javascript lesson 2 tbe 540 f. fisher. prerequisites before beginning this lesson, the learner must...
Post on 20-Dec-2015
214 views
TRANSCRIPT
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.
Example - The Status Bar
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.
Example - The Status Bar
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).
Example - The Status Bar
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 (‘).
Example - The Status Bar
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.
Example - Text in a Box
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:
Example - Text in a Box
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.
Example - Text in a 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>
Example - Text in a Box
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
afternoon!"else document.greet.greetingbox.value="Good
evening!"
</script>
Example - Text in a Box
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
afternoon!"else document.greet.greetingbox.value="Good
evening!"</script>
Example - Text in a Box
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() )
Example - Text in a Box
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.
Example - Text in a Box
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.
Example - Text in a Box
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.
Example - Text in a Box
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
Self Check - JS Lesson 2
True or false - all programming languages are object-oriented. True False {most current languages are object-
oriented, but older languages like BASIC are not}
Self Check - JS Lesson 2
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.
Self Check - JS Lesson 2
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.
Self Check - JS Lesson 2
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
Self Check - JS Lesson 2
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.
Self Check - JS Lesson 2
The dot address of a text box called B in a form called MYFORM would be: window.document.B.MYFORM window.document.MYFORM.B
Self Check - JS Lesson 2
The dot address of a text box called B in a form called MYFORM would be: window.document.B.MYFORM window.document.MYFORM.B
Self Check - JS Lesson 2
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”
Self Check - JS Lesson 2
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”