1. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 1 McGraw-Hill/Irwin Chapter 14 JavaScript

2. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 2 McGraw-Hill/Irwin Objectives Differentiate between Java and JavaScript. Use JavaScript in an HTML file. Hide your scripting from browsers that do not support JavaScript. Determine information about the browser and operating system that is executing your JavaScript code. Create links to other Web sites.

3. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 3 McGraw-Hill/Irwin JavaScript JavaScript and Java are two entirely different programming languages.

4. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 4 McGraw-Hill/Irwin Scripting Netscape and Sun developed the JavaScript language for generating interactive and dynamic Web pages. JavaScript, sometimes referred to as JS, works well for developing Web pages but cannot be used for stand-alone applications. Frequently coding in JavaScript is referred to as scripting rather than programming.

5. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 5 McGraw-Hill/Irwin CGI is a server-side scripting language, meaning that the script resides on the Web server rather than on the user's machine. JScript and VBScript come from Microsoft; JScript resembles Java and VB Script resembles Visual Basic. Not all Web browsers recognize JavaScript. Netscape, beginning with Navigator 2, and Internet Explorer 3 and above can read JavaScript code. Only the newer browsers support some features of JavaScript. Scripting Continued

6. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 6 McGraw-Hill/Irwin Writing a Script You can create a script as a separate file or embedded in an HTML file, which is the more common practice. To place the script in an HTML file, you enclose the script in script tags. The tags are not case-sensitive. For example: script goes here

7. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 7 McGraw-Hill/Irwin A problem can occur if a user attempts to display the HTML page in a browser that does not support JavaScript. Although Netscape 2 and Internet Explorer 3 support JavaScript, some features don't work correctly on these early versions. JavaScript runs best on at least version 4 of both Netscape and IE. You can solve the compatibility problem by hiding the script when necessary. You just include tags that turn the script into HTML comments, and a browser that doesn't recognize the script ignores those lines. Writing a Script Continued

8. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 8 McGraw-Hill/Irwin Writing a Script Continued One tag " " terminates it. For example: <!--Hide JavaScript script goes here // Terminate JavaScript hiding --> If you are using a JavaScript feature from a later version you should include the JavaScript version number in the code.

9. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 9 McGraw-Hill/Irwin Comments You can create comments in HTML code using opening and closing tags. Inside a JavaScript you write comments by using the Java comment symbols for single-line or multiline comments.

10. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 10 McGraw-Hill/Irwin The document.write Method Each Web page is considered a document object. An easy way to display information on a Web page is to use the Document's write method. Enclose the information to display in quotes. Enclose the information to display in quotes. In JavaScript you can use either single or double quotes, such as "Hello World" or 'Hello World'. However, you must be consistent within the same literal. But be aware that JavaScript statements are case-sensitive, it's only the HTML tags that are not.

11. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 11 McGraw-Hill/Irwin More Tags You can include HTML tags inside JavaScript code. For example, to make a literal appear in bold font, use the HTML tags inside the literal. document.write(" Hello World "); Enclose each tag in brackets <>. Tags work as a pair; the closing tag includes a slash (/).

12. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 12 McGraw-Hill/Irwin HTML Tags TagPurpose a hrefalert and reference-for links. bbold hnhnA header style, n can be from 1 to 6. iitalics pparagraph uunderline

13. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 13 McGraw-Hill/Irwin Enclosing a Quote in a Literal Since the computer translates very precisely, the literal: "Ann said "Hi Mom"“ actually only contains the text from the first quote to the second (Ann said). The rest of the text is meaningless. To make the inner quote read as a quotation mark, precede it with a backslash, like an escape sequence in Java. The solution : "Ann said \"Hi Mom\"" The solution is the same when you use single quotes : 'Anna\'s Favorite Links'

14. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 14 McGraw-Hill/Irwin Concatenation JavaScript uses + (a plus sign) for combining multiple elements in a literal. The elements can be of any data type.

15. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 15 McGraw-Hill/Irwin The Navigator Object You can learn many interesting facts using the navigator object, which is part of the JS language. Using methods of the navigator object you can return the browser type, the version of the browser, and the operating system. You can even determine the language used by the Web browser. Example:document.write("You are using " + navigator.platform);

16. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 16 McGraw-Hill/Irwin Selected Properties of the Navigator Object PropertyReturns appNameName of the Web browser. appVersionVersion number of the Web browser. languageLanguage used by the Web browser. platformOperating system.

17. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 17 McGraw-Hill/Irwin Creating your First JavaScript Program You can use any text editor to create the HTML page and your JavaScript source code. Although you can use a word processor, you have to be very careful to store the information as a text file with the appropriate extension. Follow the steps in the book in creating your JavaScript program.

18. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 18 McGraw-Hill/Irwin Correct Any Errors If your script does not run in the browser, double check the source code. Also make sure that the file is saved as a text file with the.htm or.html extension.

19. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 19 McGraw-Hill/Irwin The Object Model You display items on a Web page using the JavaScript document object model. The top level of the hierarchy is the window object, which exists when a browser is open even if no document is showing. You can also create additional window objects known as subwindows. The window contains a document, which is the Web page. The window can also contain other objects, such as history and location.

20. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 20 McGraw-Hill/Irwin Selected Parts of JavaScript Document Object Model

21. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 21 McGraw-Hill/Irwin The Document Object Earlier you used the statement to a call to the write method of the document object. Documents can contain forms, links, and images. The forms, in turn, contain input fields, buttons, checkboxes, and radio buttons (option buttons). To refer to a component in code, you must give the fully qualified name (the window can be omitted unless it is a subwindow).

22. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 22 McGraw-Hill/Irwin The Document Object Continued The following code refers to the value contained in txtName located on frmMain - document.frmMain.txtName.value You can use the lastModified property of a document object. This property holds the date that the file was last saved. For example: document.write("This page was last updated on: " + document.lastModified);

23. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 23 McGraw-Hill/Irwin Functions A function in JavaScript is a procedure, just like a method in Java. You can embed a function in the script or place the function in the HTML Head section and call it as an event occurs. Most JavaScript events begin with the prefix "on", such as onClick and onLoad. When you write a function, you give it a name. Then elsewhere in code, you can call the function by specifying that name.

24. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 24 McGraw-Hill/Irwin Functions Continued Begin a function with the keyword function followed by the name. Include brackets for the block of code inside the function, just as you do for a method in Java. The alert statement in the following function pops up a message box that displays the specified text. function Monday() { //Display Monday task alert("Contract Meeting 1pm"); } You can call the function in an HTML object tag. The following line of code creates a button called btnMonday.

25. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 25 McGraw-Hill/Irwin Functions Continued The Value specifies the text that appears on the button. When the button is clicked (the onClick event), the Monday function executes. Notice that when you call a function, you must include the parentheses, which indicate that the name is a function.

26. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 26 McGraw-Hill/Irwin Output of Functions Script

27. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 27 McGraw-Hill/Irwin Calling the Function as the Web Page Appears You can call a function at startup by specifying the onLoad event in the HTML Body tag.

28. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 28 McGraw-Hill/Irwin Special Buttons When you place a button on a Web page, you can choose from three types: the regular button, the submit button, or the reset button. Submit and reset buttons look the same as regular buttons but they perform special actions. A reset button clears all text fields and options selected on a form. For example: A submit button is used to submit the contents of the form's fields to a CGI script on the server.

29. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 29 McGraw-Hill/Irwin Variables Declaring variables in JavaScript is a little different from Java. In JavaScript you use the keyword var for all variables; you do not specify a data type. Example: var numValue; var strYourName;

30. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 30 McGraw-Hill/Irwin Scope JavaScript variables have scope, just like those in Java. Any variable that you declare inside a function is local to that function. If you declare a variable outside a function, the variable's scope is the entire document. And if you give the same name to a local variable as a document-level variable, the local variable "hides" the document-level variable when the function is executing.

31. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 31 McGraw-Hill/Irwin Control Structures The basic control structures in JavaScript are the same as those in Java. You already know how to loop, make decisions, and create arrays.

32. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 32 McGraw-Hill/Irwin Web Page for Variables and Control Structures Script

33. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 33 McGraw-Hill/Irwin Fun with JavaScript – Image Rollovers Most of the JavaScript that you find on Web pages produces the fun or action on the page. You will create images that change as the user moves the mouse over.

34. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 34 McGraw-Hill/Irwin Store the Images Before you begin, store all the graphics in a process called precaching the images. For each image, create an object and assign the graphic file as its source (.src). You will declare two images for each of the objects—one in the default color (red) and the other in the selected color (yellow). Older browsers do not support the Image object. You can check for this error condition by testing the images property of the document object, which returns boolean true for browsers that can handle graphics.

35. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 35 McGraw-Hill/Irwin Mouse Events The mouse events in JavaScript include onMouseOver and onMouseOut. For each image you need an tag, since each image is a link to a different page. You must include the mouse events within the tags. For the onMouseOut event, you only need to change the image; the status bar message automatically changes back to the default message that you set in the onload event in the Body tag. Internet Explorer can handle the mouse events in either the image tag or the A tag, but Netscape only recognizes the mouse events in the A tag.

36. Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 36 McGraw-Hill/Irwin Web Page for Image Rollovers Script