JavaScript Lesson 2

1. JavaScript Lesson 2 TBE 540 F. Fisher

2. 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.

3. 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.

4. 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.

5. 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.

6. 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).

7. Addressing Objects • For example, a graphic on a web page might be window.document.buttonorwindow.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”).

8. 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

9. 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

10. 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.

11. 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”

12. 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.

13. 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.

14. 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).

15. 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 (‘).

16. 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).

17. 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.

18. 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:

19. 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.

20. 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>

21. 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>

22. 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>

23. 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() )

24. 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.

25. 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.

26. 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.

27. 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.

28. More About FORMs? • FORMs will be presented in another PPT presentation.

29. Self Check - JS Lesson 2 • True or false - all programming languages are object-oriented. • True • False

30. 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}

31. 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.

32. 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.

33. 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

34. 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.

35. 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

36. 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

37. 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”

38. 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”