JSNotes

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 — users just read 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:

doesn't require access to a web server -- anyone can put JavaScript on their page
doesn't require special software (compilers) to create JavaScript
doesn't require tons of special knowledge to make interesting things happen

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:

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.
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.

So why are we even bothering with programming in this class? Why is programming part of The Core?

get a sense of what it takes to make computers useful
a different kind of thinking: algorithmic

So what is algorithmic thinking -- or, what is an algorithm? a step-by-step procedure to solve a specific problem

certainly many things we do in "real life" could be described algorithmically, but it's usually not how people think about their lives-- nor is it necessarily the best way to think about many things

But computers are, of course, designed to solve problems by taking many steps, so this is clearly an important way of thinking to be familiar with when dealing with computers.

"GUI" Programming and Events

Let's focus a little more on the kinds of things that our JavaScript programs might do. With a little thought it's clear that the kind of computation done in a JavaScript program is probably quite different from that done by, say, a payroll program.

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, and in order to be able to do a little bit of it, there are a few concepts we're going to need.

In a GUI setting, the program generally waits for the user to tell it what to do (by, say, clicking a button). These actions are called events. Most of our JavaScript will be written to respond to events. Here's a partial list of the events that JavaScript programs might find interesting (obviously, not every web page you create will deal with all these events -- but it could if you wanted it to). You don't need to memorize this table in any sense -- just look over it to get a sense of what an "event" might be. In the left column is the name of the event; in the center column is the name of the event handler -- this is how we indicate the JavaScript code that will respond to the particular event. And in the right column is a little description of the event is.

Event Event handler Description

Click onClick Executes JavaScript code when an object on a form is clicked.

DblClick onDblClick Executes JavaScript code when the user double-clicks a form element or a link.

DragDrop onDragDrop Executes JavaScript code when the user drops an object onto the browser window, such as dropping a file.

KeyDown onKeyDown Executes JavaScript code when the user depresses a key.

KeyPress onKeyPress Executes JavaScript code when the user presses or holds down a key.

KeyUp onKeyUp Executes JavaScript code when the user releases a key.

MouseDown onMouseDown Executes JavaScript code when the user depresses a mouse button.

MouseMove onMouseMove Executes JavaScript code when the user moves the cursor.

MouseOut onMouseOut Executes JavaScript code each time the mouse pointer leaves an area (client-side image map) or link from inside that area or link.

MouseOver onMouseOver Executes JavaScript code once each time the mouse pointer moves over an object or area from outside that object or area.

MouseUp onMouseUp Executes JavaScript code when the user releases a mouse button.

Move onMove Executes JavaScript code when the user or script moves a window or frame.

Reset onReset Executes JavaScript code when a user resets a form (clicks a Reset button).

Resize onResize Executes JavaScript code when a user or script resizes a window or frame.

Submit onSubmit Executes JavaScript code when a user submits a form.

Most commonly, we want to deal with events like Click or DblClick; we'll also see that MouseOver and MouseOut can let us do interesting things. We're almost to the point where we can look at an example, but first:

Objects -- and, Finally, Some Examples

Since the user is going to be dealing with things on the screen such as links, buttons, or maybe textboxes to fill in, plus the browser window itself, we need to have some way that our JavaScript programs can access these things as well (for example, to find out what value the user typed into a text box, or, say, change the background color of the window).

In JavaScript, each of these things (buttons, textboxes, windows, etc.) is an object. The concept of object can actually get very complicated, so for now we'll take a simplified view of objects. For our purposes now, an object consistsof two things:

a name
a collection of named properties, or values

Before we go any farther, let's look at a couple examples that illustrate both events and objects.

This example is a very simple web page that prints a message in the "status bar" (at the bottom of the window) whenever the user moves their mouse over the link. What's the event here? We said "moves their mouse over" so yes, the event is MouseOver. Note that after we set the window status message we also say "return true". This is just part of how JavaScript expects event handlers to work; in this case it's necessary to ensure that our message is displayed instead of the URL of the link. The semi-colon is used to separate the two actions (first setting the status bar, then "returning true").
Now, to change the message in the window's status bar, we need to use the object corresponding to the window which, not surprisingly, is called window. The window object has many properties; we want to change the value of the message that is displayed in the status bar; the property corresponding to that is the status property. Note the format of using a "." (just a period) to separate the name of the object from the name of the property we're interested in. This variation of the example shows that we can deal with several events at once -- we use the MouseOut event to change the status bar message. (Note: depending on your browser, the message you see when your mouse "leaves" the link may only flash very briefly -- we'll talk about that in the exercises.)
This example illustrates changing the background color of the document. To do this, we use the document object and change the bgColor property. We also show how to put a button into a webpage.

An Aside: Notation for Color

If you look carefully at how we described the background color in the last example, you'll see that the notation is a bit unusual: red seems to be FF0000, green is 00FF00, blue is 0000FF, and white is FFFFFF. What's going on?

We talked about this a bit when we were talking about compressing images, but let's review (since we're actually going to have to use this notation now. This is called RGB notation -- one of the least interesting acronyms you can find. It stands for Red-Green-Blue. The first pair of characters tells how much red is in the color, the second pair is for blue, and the last pair is for green. How do we interpret each pair? Easy! It's a two-digit hexadecimal number -- so every digit can be anything from 0 to F. So 00 means 0, and FF means 255. So the notation for red says "255 units of red (note that this is the maximum possible value), 0 units of blue, and 0 units of green." Not surprisingly, the result is red. The notations for blue and green work similarly. What about the color 000000? That means "no red, no blue, and no green" -- in other words, black. And "255 red, 255 green, 255 blue" -- all the color possible -- means white.

Here is little page that lets you experiment with this notation. Experiment with putting the same value in for all three colors (like 909090) -- what should happen? What it does it take to get some shade of yellow?

"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 version of example 4 -- a missing quotation mark, which causes the first button not to work correctly. This kind of pickiness is a pain. Fortunately, there is one tool available that help you catch at least some of these mistakes. In your browser (Note! this is only guaranteed to work with Netscape Navigator!!), open a new page called javascript: (don't forget the colon). This opens a new window called the JavaScript console; in this window your browser will provide some information about JavaScript errors. When you're working on JavaScript assignments for this class, you'll probably want to keep the JavaScript console open all the time. (Another note: depending on how your browser was set up, it's possible that the javascript console will automatically appear every time there's an error; if this happens to you, you're in luck, as f ar as this class goes.)

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

spelling counts! documetn is very different from document; bcolor is different from bgcolor, etc.
spacing counts! words have to be separated by space (either the space key, or tab, or a new line). It's OK to have lots of space, but not OK to have none
punctuation counts! Go back to this example and notice how punctuation is used:

each event handler is enclosed in double-quotes
Quotation marks (like those around 'Goodbye') inside other quotation marks have to be "the other kind", so use single-quotes inside double-quotes.
Semi-colons separate lists of actions (like in the window status event handlers).

In general, you should try to imitate the style of these examples as closely as you can. The JavaScript console will give you some information about some errors you make; if all else fails, ask the perfesser.

Event	Event handler	Description
Click	`onClick`	Executes JavaScript code when an object on a form is clicked.
DblClick	`onDblClick`	Executes JavaScript code when the user double-clicks a form element or a link.
DragDrop	`onDragDrop`	Executes JavaScript code when the user drops an object onto the browser window, such as dropping a file.
KeyDown	`onKeyDown`	Executes JavaScript code when the user depresses a key.
KeyPress	`onKeyPress`	Executes JavaScript code when the user presses or holds down a key.
KeyUp	`onKeyUp`	Executes JavaScript code when the user releases a key.
MouseDown	`onMouseDown`	Executes JavaScript code when the user depresses a mouse button.
MouseMove	`onMouseMove`	Executes JavaScript code when the user moves the cursor.
MouseOut	`onMouseOut`	Executes JavaScript code each time the mouse pointer leaves an area (client-side image map) or link from inside that area or link.
MouseOver	`onMouseOver`	Executes JavaScript code once each time the mouse pointer moves over an object or area from outside that object or area.
MouseUp	`onMouseUp`	Executes JavaScript code when the user releases a mouse button.
Move	`onMove`	Executes JavaScript code when the user or script moves a window or frame.
Reset	`onReset`	Executes JavaScript code when a user resets a form (clicks a Reset button).
Resize	`onResize`	Executes JavaScript code when a user or script resizes a window or frame.
Submit	`onSubmit`	Executes JavaScript code when a user submits a form.