JavaScript Lesson 1: Notes

HTML and JavaScript

From studying a little bit of HTML, it's clear that webpages created using only HTML are static -- they don't change over time. That makes sense: HTML is a language that primarily describes the structure or layout of a page:
headings, lists, tables, paragraphs, links, images.
Of course, it includes some text formatting features, too, like bold, italic, size, color, font but even these are static features. Static pages are also passive, in a sense the user just reads them and may or may not really get their heads involved.

So, many people want to create dynamic or interactive pages that can change in response to the user. Many possibilities:

CGI, ASP, Dynamic HTML, Java applets, JavaScript We're going to do some work with JavaScript in this class; it's the best choice for us for a number of reasons:

Programming and Algorithms

Before we actually start talking at JavaScript, let's talk about some general ideas from programming that we'll have to keep in mind

First, if we look at an example of JavaScript (click here), we see that it has some resemblance to English -- it's certainly readable by humans, at least. This presents a problem: can computers understand this piece of text? No, not really: they can execute instructions, but only a very limited set of instructions in very very specific form (in fact, computer instructions are just sequences of 0's and 1's.

So, we type in this JavaScript program which we can read, but the computer only understands 0's and 1's. So how is the computer able to execute our program?

There are essentially two answers to this question:

  1. Some programming languages are compiled. That means that after we type in our program in some language (like Java or C), a special piece of software called a compiler translates our program into the equivalent computer instructions.
  2. Other programming languages (such as JavaScript) are interpreted. That means that when we type in our program, it is translated into computer instructions as needed. With JavaScript, the web browser you use interprets any JavaScript that's on the page when it's loaded.

"GUI" Programming and Events

Let's focus a little more on the kinds of things that our JavaScript programs might do.

JavaScript programs have to respond to the user: moving the mouse, clicking things, maybe typing some stuff into boxes, etc. Programming that is done to work in this context is usually called Graphical User Interface programming, or GUI programming. Most JavaScript programming has this flavor.

First we will need to learn how to include buttons and text boxes on a web page. That involves more HTML tags.

In a GUI setting, the program generally waits for the user to tell it what to do (by, say, pressing a button or clicking a mouse). These actions are called events. After we learn how to create buttons and text boxes, we will learn how to use JavaScript to respond to events.

"Syntax" What's syntax?  It's the rules about the punctuation, spelling, etc. that a program must follow -- it's just like grammar, only computers are even pickier than any grammar teacher you can imagine.  One of the most frustrating things about programming (particularly when you're starting out, but it doesn't get any better, really) is having to follow exactly many many rules about formatting and punctuation.

Here's a simple example.  There's a very small mistake in this script -- a missing quotation mark, and so it doesn't display. This kind of pickiness is a pain.  Fortunately, there are some tools available that help you catch at least some of these mistakes. 

For Firefox: In your browser, click on the Tools menu located on the top of the screen. One of the choices is Error Console. Click on it and a list of recent JavaScript errors, warnings and errors appears. The most recent error is the last one in the list. When you're working on JavaScript assignments for this class, you'll probably want to check the Error Console frequently. For Internet Explorer: If there are JavaScript errors on the page, a small yellow triangle appears on the lower left of the screen. You can click on it to "show details" and get more information about the error.

So far, we haven't actually written very much JavaScript, but already there are a number of important rules to be aware of: