Advanced HTML Programming
JavaScript Notes: Part 1
Objectives:
This note page discusses features of JavaScript, as discussed in class.
References will be made to Dr. Joe Burns' web lessons on Earthweb.com.
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
Concepts:
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)
</script>
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.
|