1 / 36

Chapter 14

Chapter 14. JavaScript. 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.

levi
Télécharger la présentation

Chapter 14

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related