CIS 89C
Client-Side Programming with JavaScript
Unit 2 - Introduction to JavaScript (2 hours, second
night)
References:
McDuffie - Chapter 1
Introduction to JavaScript
Topics:
What is JavaScript - McDuffie page 9
History and Technologies used in Web Page Clients - McDuffie page 11
Objects, Properties, and Methods - McDuffie page 13
the Document Object Model - McDuffie page 20
References:
Core JavaScript Objects - McDuffie page 592
Client-side JavaScript Objects (DOM) - McDuffie page 597
JavaScript in the Location bar of the browser
id versus name
the Event Model
***********************************************************
What is JavaScript?
This was covered last time in unit 1. Review:
JavaScript is a programming language.
It is object based. You will use objects a lot, but do not build many in JavaScript.
It is a language designed to use with web pages; thus, it is called a scripting language.
JavaScript is interpreted by the browser. It is not compiled.
This can be a big pain, because some browsers (IE) do not conform to standards. Also, there are differences between different releases of the same browser.
JavaScript is loosely typed. A variable is not limited to only containing a specific type of data. A variable can contain an integer; then you might replace the integer with a string. This is very different than C and perl.
***********************************************************
History and Technologies used in Web Page Clients
LiveScript was created by Brendan Eich at Netscape.
The syntax was modified to look more like Java, and
it was renamed JavaScript.
The syntax looks somewhat like Java, but it does not work like Java.
JavaScript objects are very much different than Java objects.
We will learn how JavaScript objects work, as we go through the course.
JavaScript was first released as part of Netscape Navigator 2.0 in December 1995.
It is hard for me to understand that it is such a recent addition to computer programming technology.
It is the dominant technology for processing web pages in the client machine.
There are other, more powerful, languages and environments used in server machines.
In user's client machines, JavaScript is the most common programming language used.
Since its inception, JavaScript has been used to validate input from forms, to allow immediate response to a user, when the user enters something in the wrong form, or omits a required field. We will learn to validate forms, and other
similar activities in this course.
Cascading Style Sheets (CSS) are used to control the appearance of web pages. CSS was first introduced in December 1997 by the W3C standards organization. CSS is very widely used.
You are encouraged to use CSS in this course, if you know it, but it is not taught as part of this course.
If you do not know how to code CSS, do not worry. I will provide CSS files,
when required.
XML is a script language, somewhat like HTML. It is easier for browsers, and other programs, to process than HTML. It is used to contain data, but not the control of how it is displayed on a web page. This is an important new script language for transmitting data in many contexts, including data for web pages.
The W3C organization completed the standard for XML in February 1998.
The Document Object Model (DOM) provides a common description of the elements in a web page. We will use some of the capabilities of the Document Object Model in this course. The DOM was first introduced in October 1998, by the W3C standards organization.
XHTML is a version of HTML that meets the standards for HTML and XML.
XHTML version 1.0 is very little different from HTML version 4.01 We will use XHTML in this course. The XHTML 11.0 standard was released by the W3C in January 2000.
The use of JavaScript with XHTML, CSS, and the DOM is called Dynamic HTML.
The newest hot topic in web pages is
XMLHttpRequest object to Dynamic HTML. This new http communication feature allows web pages to be updated without reloading the whole page. Google has been a leader in implementing this new technology.
So, before 1995, there was just HTML. In 1995 JavaScript was the first of a set of new technologies added to web pages. You need to learn these technologies. JavaScript is central to much that is done with web pages today.
If you only know HTML, you have a lot to learn. JavaScript is the place to start.
***********************************************************
Objects, Properties, and Methods
We will use objects in JavaScript.
Most of the objects in JavaScript are provided for you.
You do not need to build many objects.
We will look at building some objects late in the course.
An object is a set of data and code, used to represent some real thing.
Examples of objects used in JavaScript:
some kinds Core
JavaScript object types:
String - a string of characters
Boolean - a true-false value
some DOM objects,
used with Client-Side JavaScript:
document - the web page document
window - the window containing the web page
An object has some data contained within it.
For example:
A String contains a sequence of characters as its data.
A window contains a number of things, including:
the document object
the history object
An object has some functions associated with it.
For example:
toUpperCase() is a function that will return a string, from a String object,
converted to upper case.
write() is a function that will write a string in a document object.
A datum stored in an object is called a property.
A function associated with an object is called a method.
Example of a variable:
var name =
"George";
This is a statement in JavaScript.
The end of a statement is marked by the semicolon, or by the end of the line.
(This is different than C.)
var says that you are building a variable object, to contain some data.
You do NOT say what type of data you will put in the variable.
(This is very different than C.)
"George" is a string Object.
The statement, shown above, takes a copy of the "George" string, and puts it
in the variable name
Now name contains
the property "George"
document.write(name);
will write the word "George" in your web page, so you can see it.
Notice that when you use a property or method of an object, you specify the name of the object, a dot, and then the name of the property or method.
name.toUpperCase()
will give us the name "GEORGE" in upper case.
document.write(
name.toUpperCase() );
This statement provides the property of the name in upper case,
and then writes "GEORGE" to the document.
You can also write XHTML tags
Example:
document.write(
"<br />" );
Look at sample 2-1-methods.
sample-2-1-methods.html
Sometimes you use a series of dots, to reference objects inside objects.
Example:
document.form[0].radio[3].checked
This will look in the document object.
It will consider the array of all forms in the document, and look at the first form.
In this form, it will consider the array of radio buttons, and look at the fourth radio button.
In this radio button, it will look at the checked property, to see if this radio button has been selected; the result will be the Boolean value of true or false.
Notice that document is an object
form is an array of form objects
radio is an array of radio objects
checked is a property of the radio object
You can write two or more strings with one document.write()
Just put commas between them.
Example:
document.write(name,
"<br />", name.toUpperCase());
You can continue a line with a comma at the end of the line.
Example:
document.write(name,
"<br />", name.toUpperCase(),
"<br
/>", "The background color is ", document.bgColor);
You can also work with object properties.
For example:
document.bgColor =
"navy"; // note the capital C
document.fgColor =
"white";
Look at sample 2-2-properties.
sample-2-2-properties.html
***********************************************************
the Document Object Model
Many objects are provided with the Core JavaScript language.
Examples:
Math, String, Date, Array
A list is in McDuffie on page 592.
Many more objects are provided in Client-side JavaScript in the
Document Object Model.
Examples:
window, document, form, checkbox
A list is in McDuffie on page 597.
The Document Object Model is a hierarchy of objects that describe what
is happening in the browser, including information about the window, the document, and all the HTML elements.
The browser keeps the DOM up to date, so it represents the current state of the browser. We can look at the DOM using JavaScript, to see what is in the browser. We can also change the DOM using JavaScript, to change what is in the browser. So, this is a very powerful way to use JavaScript.
If the browser does not support all of the objects in the DOM, or if the page does not load completely, then the DOM model and the actual web page will not match. This can cause problems.
There are two problems with the DOM:
1) Different browsers use somewhat different DOM contents, and use the DOM is somewhat different ways. This is a very major problem when using JavaScript.
We will learn the best, most standard way to code, but be aware that different browsers, or older versions of browsers will be different.
2) The new stuff in
***********************************************************
JavaScript in the location bar of the browser
A neat trick is to type in the location bar of the browser:
javascript:
followed by a JavaScript command.
It will show the result in the window.
For example type:
javascript:
location.hostname
It will show you the URL for the web page you are looking at.
This is a quick way to test a piece of JavaScript.
***********************************************************
id versus name
In the examples, the McDuffie book uses the name attribute of an html element.
This is correct, but current usage is not to use the name attribute.
Instead, use the id attribute.
The id and name attribute usually do the same thing; however, sometimes you may find that id works better.
***********************************************************
the Event Model
There are many things, that may happen in a web page.
These are called events. They include:
Load - when an element loads into the web page.
When this happens, if there is an onload attribute, with some JavaScript
as the value of the attribute, the JavaScript will execute when the element
loads.
Example script 1.8 from the McDuffie book:
script 1-8
There are other events listed in the McDuffie book in Table 1.8.
Some are:
Click, used with the onclick attribute
Change, used with the onchange attribute.
et cetera.
Notice the spelling:
McDuffie spells them:
onLoad
onClick
onChange
Using XHTML we will use lower case letters for the attribute names
onload
onclick
onchange