This week we will introduce the idea of object-oriented programming and learn to use the XHTML document object model with JavaScript:
Javascript is object oriented. What is that and what is the point of object-talk in programming? Objects are the next step in making programs more modular and re-usable. In "traditional" structured programming techniques, we used functions to help break tasks down into parts and make the solutions re-usable. Objects take this idea further by tying functions to a particular type of data and putting the two together in an object. An object has attributes (properties, or data) and methods (functions) associated with it. Objects hide (encapsulate) the data they contain. The result is that once an object is defined, the programmer can use and re-use it without having to directly interact with the nitty-gritty of the data in the object. The net results are more modular programs that are easier to re-use.
You have already encountered some Javascript objects and methods. The document.writeln "function," for example, is actually a method (writeln) of the document object. Similarly, the window object has a method called prompt that you have used to get input from web page users. You also have seen examples of methods associated with the Math object, such as Math.random(). Note how the dot operator is used to reference the attributes and methods of an object.
1. Arrays are objects in Javascript. Complete questions 20-24 from Week 4, if you have not already done so.
Instances of an object inherit the methods and attributes of that object. For example, the String object has a method split that breaks a string into separate tokens. An instance of the String object inherets this method and can invoke it - as shown in the following example file:
2. Modify object1.html to do the following:
Here are two more files that you might find useful as examples of
using the document object model with JavaScript:
object2.html
object3.html
Now that you have have learned a bit about objects and how to use Javascript to dynamically change the elements of an XHTML document, we will look at some examples that demonstrate event-driven programming in Javascript. Events, such as mouse clicks, mouse movements, or reloading the page, can be used to trigger actions. Typically, you will use Javascript to define a function, and then call the function from within the body of your XHTML document when some event occurs. You have already seen an example of this with the "submit" button of object1.html.
The following examples are borrowed from Ching Fan Sheu's section of this course from a while back. They illustrate a number of uses of events with Javascript programs. Note that these examples use HTML rather than XHTML, and that semicolons are omitted in many of the scripts.
I suggest you copy the entire directory /var/www/html/psy422/myjs to your public_html directory so that you can easily make changes and do the assigned exercises.
Here are the images used in these examples:
T1.gif
T2.gif
T3.gif
T4.gif
T5.gif
T6.gif
T7.gif
T8.gif
T9.gif
T10.gif
Here are two examples we will look at together:
x1.html
x2.html
Here are three examples for you to work on:
x3.html x4.html
x5.html
3. Explain what these pages do and how do they achieve those effects.
4. Modify one or more of these pages so that they achieve some other effects of your fancy. Describe the modifications you made and what they do.
Here is a link to some other examples of JavaScript programming from a previous section of the course that you may find useful.
5. Use what you have learned so far about XHTML and Javascript to create a web page that does the following: (As always, link the page from your class home page.)