Chapter 14

1. Chapter 14 JavaScript

2. 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. JavaScript • JavaScript and Java are two entirely different programming languages.

4. 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. Scripting Continued • 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.

6. 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 language = JavaScript> • script goes here • </Script>

7. Writing a Script Continued • 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.

8. Writing a Script Continued • One tag "<!--" begins the hiding and another "-->" terminates it. • For example: • <Script language = JavaScript> • <!-- Hide JavaScript • script goes here • // Terminate JavaScript hiding --> • </Script> • If you are using a JavaScript feature from a later version you should include the JavaScript version number in the code.

9. 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. 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. More Tags • You can include HTML tags inside JavaScript code. • For example, to make a literal appear in bold font, use the HTML <b> </b> tags inside the literal. • document.write("<b>Hello World</b>"); • Enclose each tag in brackets <>. • Tags work as a pair; the closing tag includes a slash (/).

12. HTML Tags

13. 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. Concatenation • JavaScript uses + (a plus sign) for combining multiple elements in a literal. • The elements can be of any data type.

15. 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. Selected Properties of the Navigator Object

17. 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. 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. The Object Model • You display items on a Web page using the JavaScript document object model. • The top level of the hierarchy is the windowobject, 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. Selected Parts of JavaScript Document Object Model

21. 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. 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. 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. 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. Functions Continued • The Value specifies the text that appears on the button. • When the button is clicked (the onClick event), the Monday function executes. • <Input Type = "button" Value = "Monday" Name = "btnMonday" onClick = "Monday()"> • Notice that when you call a function, you must include the parentheses, which indicate that the name is a function.

26. Output of Functions Script

27. 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. • <Body onLoad = "Greetings()">

28. 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: <INPUT TYPE="reset" NAME="btnClear" VALUE="Clear"> • A submitbutton is used to submit the contents of the form's fields to a CGI script on the server.

29. 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. 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. 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. Web Page for Variables and Control Structures Script

33. 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. 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. Mouse Events • The mouse events in JavaScript include onMouseOver and onMouseOut. • For each image you need an <A> tag, since each image is a link to a different page. • You must include the mouse events within the <A> </A> 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. Web Page for Image Rollovers Script