JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

13.1 Client-Side JavaScript

13.1 Client-Side JavaScript


The Window object is the main entry point to all client-side JavaScript features and APIs. It represents a web browser window or frame, and you can refer to it with the identifier window. The Window object defines properties like location, which refers to a Location object that specifies the URL currently displayed in the window and allows a script to load a new URL into the window:

// Set the location property to navigate to a new web page window.location = "http://www.oreilly.com/";

The Window object also defines methods like alert(), which displays a message in a dialog box, and setTimeout(), which registers a function to be invoked after a specified amount of time:

// Wait 2 seconds and then say hello setTimeout(function() { alert("hello world"); }, 2000);

Notice that the code above does not explicitly use the window property. In client-side JavaScript, the Window object is also the global object. This means that the Window object is at the top of the scope chain and that its properties and methods are effectively global variables and global functions. The Window object has a property named window that always refers to itself. You can use this property if you need to refer to the window object itself, but it is not usually necessary to use window if you just want to refer to access properties of the global window object.

There are a number of other important properties, methods, and constructors defined by the Window object. See Chapter 14 for complete details.

One of the most important properties of the Window object is document: it refers to a Document object that represents the content displayed in the window. The Document object has important methods such as getElementById(), which returns a single document element (representing an open/close pair of HTML tags and all of the content between them) based on the value of its id attribute:

// Find the element with id="timestamp" var timestamp = document.getElementById("timestamp");

The Element object returned by getElementById() has other important properties and methods that allow scripts to get its content, set the value of its attributes, and so on:

// If the element is empty, then insert the current date and time into it

if (timestamp.firstChild == null)

timestamp.appendChild(document.createTextNode(new Date().toString()));

Techniques for querying, traversing, and modifying document content are covered in Chapter 15 .

Each Element object has style and className properties that allow scripts to specify CSS styles for a document element or to alter the CSS class names that apply to the element. Setting these CSS-related properties alters the presentation of the document element:

// Explicitly alter the presentation of the heading element timestamp.style.backgroundColor = "yellow";

// Or just change the class and let the stylesheet specify the details: timestamp.className = "highlight";

The style and className properties, as well as other techniques for scripting CSS, are covered in Chapter 16 .

Another set of important properties on Window, Document, and Element objects are the event handler properties. These allow scripts to specify functions that should be invoked asynchronously when certain events occur. Event handlers allow JavaScript code to alter the behavior of windows, of documents, and of the elements that make up those documents. Event handler properties have names that begin with the word “on”, and you might use them like this:

// Update the content of the timestamp element when the user clicks on it timestamp.onclick = function() { this.innerHTML = new Date().toString(); }

One of the most important event handlers is the onload handler of the Window object. It is triggered when the content of the document displayed in the window is stable and ready to be manipulated. JavaScript code is commonly wrapped within an onloadevent handler. Events are the subject of Chapter 17 . Example 13-1 demonstrates the onload handler and shows more client-side JavaScript code that queries document elements, alters CSS classes, and defines event handlers. The HTML

Click Here to Reveal Hidden Text

This paragraph is hidden. It appears when you click on the title.


13.1 Client-Side JavaScript | 309


We noted in the introduction to this chapter that some web pages feel like documents and some feel like applications. The two subsections that follow explore the use of JavaScript in each kind of web page.

欢迎转载,转载请注明来自一手册:http://yishouce.com/book/1/27698.html
友情链接It题库(ittiku.com)| 版权归yishouce.com所有| 友链等可联系 admin#yishouce.com|粤ICP备16001685号-1