javascript lesson 2 tbe 540 f. fisher. prerequisites before beginning this lesson, the learner must...

JavaScript Lesson 2

TBE 540F. Fisher

Prerequisites

Before beginning this lesson, the learner must be able to… Create and edit a web page using a

text editor or a web page editor. Edit the HTML code of a web page. Identify JavaScript code within HTML

code.

Objectives

After completing this lesson, the learner will be able to… Explain the meaning of “object-

oriented” programming. Use a “dot” scheme to identify any part

of a web page display. Customize existing JavaScript code.

Object-Oriented Programming

Programming languages come in many varieties.

Older languages like BASIC and FORTRAN accepted input from the user and displayed information.

They could not directly influence “objects” such as graphics or text boxes.

Object-Oriented Programming

JavaScript (and other contemporary languages) are classified as object-oriented, because they can affect objects on the screen.

For example, JavaScript can be used to change an image when the mouse rolls over it.

Addressing Objects

In order to affect objects, JavaScript must have a way of addressing (naming) them.

JavaScript uses a “dot scheme” (parts of the web page are addressed using certain terms with periods/dots in between).

Addressing Objects

For example, a graphic on a web page might be window.document.button or window.document.images[1]

The largest part (window) is first, then a subset of window (document), and finally a subset of document (the image named “button”).

Addressing Objects

If the CSUDH College of Education’s address were done this way, it might look like this:

usa.california.carson.90747.victoriastreet.1000east.collegeofeducation

Addressing Objects

You can see that there are other layers to a web page.

From http://www.cpcug.org/user/houser/javascript/object/model.html

Properties

Objects on the screen often have properties (attributes) that can be addressed by JavaScript.

For example, each image has a source.

A web page document may have a background color.

Properties

Here are some “dot” addresses: image source (image place named M) window.document.M.src=“me.gif” image source (3rd image on the page –

remember that the computer starts counting at 0) window.document.images[2].src= “me.gif”

web page background color: window.document.bgcolor.value= “blue”

Example - The Status Bar

At the bottom of most web pages, there is an area called the status bar. It often shows the link addresses.


JavaScript can be used to put text into the status bar.

For example, in the mouseover.htm example on the class web page, a message was placed in the status bar when the mouse moves over images.


In the scroller.htm example on the class web page, a message scrolled across the status bar as long as the page was open.

The “dot address” of the status bar is window.status (it doesn’t have anything to do with the web page document, so the term document is not included).


Here is the code to add to an IMG tag to put text into the status bar:

onMouseOver=“window.status=‘HI!’” Notice that the entire instruction (from

window.status to the end is in quotes (“).

The message itself (HI!) is inside single quotes (‘).


The IMG tag might look like this (name of image file is “hello.jpg”)

<IMG src=”hello.jpg” onMouseOver=“window.status=‘HI!’”>

Other choices for images are onClick (if you click on the image) and onMouseOut (when you move the mouse away from the image).

Example - Text in a Box

Forms are used to put buttons and input boxes on the web page.

The next JavaScript example will put a message in a text box.

The message will depend on the time of day.

See greet.htm on the class website to try it out.


This page uses FORM tags for the box (more about FORMs in another PPT):

<form name="greet"><input type="text" size="20”

name="greetingbox"></form>

This results in a text box (20 characters long) called greetingbox:


The dot address for the box is: document.greet.greetingbox.value

The box is called greetingbox. The box called greetingbox is in the form called

greet.The form called greet in in the current web

page document.value shows that something will be put into the

box.


Here is the JavaScript code (explanations follow):

<script language="JavaScript">currentTime=new Date();if (currentTime.getHours() < 12) document.greet.greetingbox.value="Good morning!"else if (currentTime.getHours() < 17) document.greet.greetingbox.value="Good

afternoon!"else document.greet.greetingbox.value="Good

evening!"</script>


The SCRIPT tags begin and end the JavaScript:

<script language="JavaScript">currentTime=new Date();if (currentTime.getHours() < 12) document.greet.greetingbox.value="Good

morning!"else if (currentTime.getHours() < 17) document.greet.greetingbox.value="Good


evening!"

</script>


new Date() puts the current time/date (from your computer) into the variable currentTime:

<script language="JavaScript">currentTime=new Date();if (currentTime.getHours() < 12) document.greet.greetingbox.value="Good

morning!"else if (currentTime.getHours() < 17) document.greet.greetingbox.value="Good


evening!"</script>


Look at the structure of the IF statements:if (currentTime.getHours() < 12) document.greet.greetingbox.value="Good morning!"else if (currentTime.getHours() < 17) document.greet.greetingbox.value="Good afternoon!"else document.greet.greetingbox.value="Good

evening!”

The computer must make a decision about the message, depending on the hour (12=noon, 17=5 pm). currentTime.getHours() contains the hour information (originally from new Date() )


JavaScript IF statements look like this:

IF (condition) instructions

The condition usually contains == (is equal to) or < (less than) or > (greater than).

If the condition is true, the instructions are carried out.If the condition is false, the program goes to the next

line without performing the instructions.


In this case there are three choices:

The hour is < 12 (before noon) - Good morning!The hour is between 12 and 17 (noon and 5 pm) -

Good afternoon!The hour is > 17 (after 5 pm) - Good evening!

Using IF, ELSEIF and ELSE lets the computer make the choice among these three options.


If you have looked at the HTML code for greet.htm, you will see something very strange.

The JavaScript is in the BODY section, not the HEAD.


The reason for this difference is that computer must be instructed to start the JavaScript.

In past examples, we have clicked buttons to start the JavaScript instructions.

This time, the instructions start automatically when the browser reaches that part of the HTML.

More About FORMs?

FORMs will be presented in another PPT presentation.

Self Check - JS Lesson 2

True or false - all programming languages are object-oriented. True False


True or false - all programming languages are object-oriented. True False {most current languages are object-

oriented, but older languages like BASIC are not}


In order to address objects on the screen, object-oriented languages use: Pixel addresses (form top, from left) Dot addresses (e.g., window.status) They cannot address objects.


The dot address of the source of an “image place” called M1 would be: window.document.src.M1 window.document.M1.src document.M1.src


The dot address of the source of an “image place” called M1 would be: window.document.src.M1 window.document.M1.src document.M1.src

window may be deleted when the address refer to the web page document.


The dot address of a text box called B in a form called MYFORM would be: window.document.B.MYFORM window.document.MYFORM.B


The code to put “HI” into a box called B in a form called MYFORM would be: window.document.MYFORM.B=“HI” window.document.MYFORM.B.src=“HI” document.MYFORM.B.value=“HI” window.document.MYFORM.B.value=“HI”

javascript lesson 2 tbe 540 f. fisher. prerequisites before beginning this lesson, the learner must...

Documents