Advanced HTML Programming

JavaScript Notes: Part 1




This note page discusses features of JavaScript, as discussed in class. References will be made to Dr. Joe Burns' web lessons on Links to some of those lessons are provided below:

Joe Burns' JavaScript Primer #1
Joe Burns' JavaScript Primer #2: Error Messages
Joe Burns' JavaScript Primer #3: Dates and Times
Joe Burns' JavaScript Primer #4: onMouseover
Joe Burns' JavaScript Primer #6: Prompts and Variables


In his first lesson, Dr. Burns introduces the format of a JavaScript. <script> tags are used, as well as standard HTML remarks, as explained in other notes at this site (Chapters 19 and 20 of Laura Lemay's book)..

Dr. Burns first example script uses the document object and its built-in write method. You should be aware that an object is anything that can be stored in a computer's memory. A method is a function (or program) that is part of the object. The document object refers to the actual code for the web page that is to be displayed. When Dr. Burns uses the document.write method, he is dynamically writing characters into the copy of the page that is stored in memory. Changing what is on the page will change what is displayed by the browser, and may change what the page can do when events occur. Remember that the write method can write text to a page, but it can also write HTML code.

Some vocabulary might help here. An object can have many parts, some of which are methods, and some of which are properties, which are just text settings. For example, the document object has multiple properties, like title and background color, which can be changed in a JavaScript. Every component of an object is referred to as a member of the object. Objects can have members that are properties or methods. Some objects have both kinds of members.

When constructing JavaScripts, it is not uncommon to encounter errors. One of the more useful observations that Dr. Burns makes is that error messages often mention a line number. The line number refers to the lines in the actual HTML document. Lines are numbered from the very top of the page, not the top of the script. Be careful not to be fooled by word-wrap: a line in a page must end with a carriage return, or it does not count as a separate line.

Now for the bad news: you can't trust the line numbers. JavaScript is derived from the C and C++ languages. In my experience with these languages, I have learned that the system will report that an error exists, and it will mention the line where it stopped understanding instructions. This is not necessarily the line that actually contains the error. In most cases, the line number will be correct. In some cases, the actual error will be higher on the page. In some rare cases, the actual error will be below the line that is reported in the error message.

An error that Dr. Burns discusses, and that we encountered in class, has to do with balanced characters. When using a method, for example, it is necessary to use parentheses, such as document.write("this gets written"). I made that red so it would stand out. A method requires the use of parentheses, which must be balanced, meaning they must be used in pairs. Likewise, the string that this method will place on the page is enclosed in quotes, which must also be balanced, or paired.

This gets more interesting when you try to dynamically write an HTML command to the page. HTML commands usually include tags, and the tags often include properties. Properties usually are given values, which are normally enclosed in quotes. But, since you have to enclose the entire string that the write method is writing inside quotes, putting more of that kind of quotes inside the string has the effect of ending the string. This is not good. So, you use pairs of single quotes (') inside pairs of double quotes(").

Since this is programming, Dr. Burns uses some variables in his examples. Note the simple kind of variable he has used in his third primer. Each is created with the keyword var, which creates a variable that can hold anything you wish to store in it: numbers, strings, or results of functions. What is a result? Most functions can return a result to the line of code that calls (runs) them. For instance, the getMonth() function of the Date object returns the current month when it is called. Think of a result as the answer that the function calculates.

Regarding variables, remember that you can write the name of a variable to a page if you enclose it in quotes, and you can write the value stored in the variable to the page if you leave it outside the quotes. If I write a script like this:

<script language="JavaScript">
var name="Steve"
document.write("My name is " +name)

and then execute it on this page, like this:		

...What happens? The value I stored in the variable is written to the page because it is handed to the write() function outside any quotes. This also points out that we can feed the write() function several pieces, which can be literal strings, named variables, or other functions. The pieces are joined together with plus signs. (Commas could be used instead of the plus signs, but let's stick with one way for now.)

JavaScript is an event oriented language. Events are things that happen in your environment, which means that the browser knows about some events, the operating system probably knows about lots of events, and the scripts you write can know about them as well. HTML itself is event oriented. Every web page you make probably has links in it, and the act of clicking a link is an event.

You should be familiar with the syntax Dr. Burns uses in Primer 4, which details a use of the Mouseover event. Know the difference between the event and its event handler. The event handler is a program, already included in your browser in many cases, that sits around waiting for its matching event to happen. The onClick event handler waits for a Click event to take place.

You can write code in a JavaScript (and in some tags) that tells the event handler what to do when the event happens, like onClick="alert('You are off!');", which would create an alert box that displays the message inside the quotes. (An alert box is a window, but it belongs to a class of windows called "message boxes".) Note the use of the various quotation marks in this example. When the Click event occurs, the onClick event handler does what is inside the double quotes: it creates an alert box with a call the the alert() function. The alert function is told what to display as its message by the string inside the single quotes. The call to the alert() function ends with a semicolon, as most good JavaScript instructions do. The closing double quote encloses the function call and the semicolon, because both are meant to be seen and processed by the event handler, and only the characters inside the double quotes are seen by the event handler.

In Primer 6, Dr. Burns continues to introduce new ideas. He uses the prompt() function to obtain input from the user, and to store that input in a variable. Open his page with the link above to see it work.

Dr. Burns also uses more remark notation. He notes that standard C remarks work now in JavaScripts, contrary to the experiences I have had with older browsers. A standard C remark begins with the symbols /* and may go on for several lines before ending with the reverse of those two symbols: */ I have made these symbols bold, but it seems to make no difference.

You should now feel familiar with the code used in the first six lessons on Dr. Burns' site. If you do not, review his lessons again, and try to complete each assignment until you can make it work.