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