1 Lesson 6 Introducing JavaScript HTML and JavaScript BASICS, 4 th Edition

Lesson 6 22 Objectives Display Web page text with JavaScript. Use HTML formatting tags both in and around JavaScript code. Create conditional statements with JavaScript. Use the JavaScript alert() method. Access the browser status line with JavaScript.

Lesson 6 33 Enhancing Your Web Page The document.write() method simply inserts a string of characters into the standard HTML text stream. function hello() { document.write(" Hello World "); }

Lesson 6 44 Creating Conditional Statements in JavaScript The conditional statement gives programmers the ability to evaluate a specific condition and then perform different actions depending on the results of that evaluation. A keyword is recognized as part of the language definition. A variable is a user-defined name for a memory location whose value can change over time.

Lesson 6 55 Creating Conditional Statements in JavaScript (continued) The JavaScript if statement also supports an optional else clause, which defines the action to take if the specified condition is not true. A JavaScript condition will always consist of two tokens separated by a relational operator. A token can either be a variable name (such as x or count) or a literal constant (such as 10 or “hello”).

Lesson 6 66 Creating Conditional Statements in JavaScript (continued) Relational Operators

Lesson 6 77 Using the JavaScript alert() Method The alert() method allows a JavaScript program to display a special dialog box that notifies the user of an unexpected event or that some sort of user action is required. The window object is considered to be the JavaScript default object, which means it is not necessary to use its name explicitly.

Lesson 6 88 Accessing the Browser Status Line The graphic below shows both a status line and an alert message. Web page viewed with Internet Explorer 8

Lesson 6 99 Making Graphic Images Come Alive A function is a segment of JavaScript code that can be invoked or called. – Methods and functions are the same, except that methods have been defined as part of the objects that make up the JavaScript programming environment. Calling a function from a hyperlink Back

Lesson 6 10 Making Graphic Images Come Alive (continued) Teaching an Image to Roll Over: An image rollover changes the appearance of an image when a visitor moves the mouse pointer over the image. – The onMouseOver event is generated when the mouse pointer is over a particular object. – The onMouseOut event is generated when the user moves the mouse pointer off of the object.

Lesson 6 11 Teaching a Hyperlink to Roll Over A hyperlink rollover is triggered when the user moves the mouse pointer over a hyperlink. – The code for an image rollover and a hyperlink rollover are very similar.

Lesson 6 12 Teaching a Hyperlink to Roll Over (continued) The graphic to the right shows JavaScript events.

Lesson 6 13 Advanced JavaScript Programming Frame-based Web page A Web page that contains a frameset includes a file that defines the frameset and two or more additional files that define the frames within that frameset.

Lesson 6 14 Advanced JavaScript Programming (continued) The frameset file is known as the parent document, and the frame files contained within the frameset are known as child documents.

Lesson 6 15 Adding JavaScript Code to Your Frameset All JavaScript function definitions include a parameter list, which is a list of data items that the function needs to perform its intended action. A function parameter is simply an object or data element that is accessed by an assigned name within the function. A parent object is a reserved word in JavaScript that refers to the parent frameset.

Lesson 6 16 Adding JavaScript Code to Your Frameset (continued) Web page with functional hyperlinks By using the JavaScript function parameter to distinguish one hyperlink from another, it is not necessary to define a function for each hyperlink.