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

1.2 Client-Side JavaScript

Client-side JavaScript does not exhibit the nonlinear cross-reference problem nearly to
the extent that the core language does, and it is possible to learn how to use JavaScript
in web browsers in a fairly linear sequence. But you’re probably reading this book to
learn client-side JavaScript, and Part II is a long way off, so this section is a quick sketch
of basic client-side programming techniques, followed by an in-depth example.
Chapter 13, JavaScript in Web Browsers, is the first chapter of Part II and it explains in

detail how to put JavaScript to work in web browsers. The most important thing you’ll

learn in that chapter is that JavaScript code can be embedded within HTML files using
the <script> tag:
<script src="library.js"></script> <!-- include a library of JavaScript code -->
<p>This is a paragraph of HTML</p>
// And this is some client-side JavaScript code
// literally embedded within the HTML file
<p>Here is more HTML.</p>
Chapter 14, The Window Object, explains techniques for scripting the web browser and
covers some important global functions of client-side JavaScript. For example:
function moveon() {
// Display a modal dialog to ask the user a question
var answer = confirm("Ready to move on?");
// If they clicked the "OK" button, make the browser load a new page
if (answer) window.location = "";
// Run the function defined above 1 minute (60,000 milliseconds) from now.
setTimeout(moveon, 60000);
Note that the client-side example code shown in this section comes in longer snippets
than the core language examples earlier in the chapter. These examples are not designed
to be typed into a Firebug (or similar) console window. Instead you can embed them
in an HTML file and try them out by loading them in your web browser. The code
above, for instance, works as a stand-alone HTML file.
Chapter 15, Scripting Documents, gets down to the real business of client-side Java-
Script, scripting HTML document content. It shows you how to select particular HTML
elements from within a document, how to set HTML attributes of those elements, how
to alter the content of those elements, and how to add new elements to the document.
This function demonstrates a number of these basic document searching and modification
// Display a message in a special debugging output section of the document.
// If the document does not contain such a section, create one.
function debug(msg) {
// Find the debugging section of the document, looking at HTML id attributes
var log = document.getElementById("debuglog");
// If no element with the id "debuglog" exists, create one.
if (!log) {
log = document.createElement("div"); // Create a new <div> element = "debuglog"; // Set the HTML id attribute on it
log.innerHTML = "<h1>Debug Log</h1>"; // Define initial content
document.body.appendChild(log); // Add it at end of document
// Now wrap the message in its own <pre> and append it to the log
var pre = document.createElement("pre"); // Create a <pre> tag
var text = document.createTextNode(msg); // Wrap msg in a text node
pre.appendChild(text); // Add text to the <pre>
log.appendChild(pre); // Add <pre> to the log
Chapter 15 shows how JavaScript can script the HTML elements that define web content.
Chapter 16, Scripting CSS, shows how you can use JavaScript with the CSS styles
that define the presentation of that content. This is often done with the style or
class attribute of HTML elements:
function hide(e, reflow) { // Hide the element e by scripting its style
if (reflow) { // If 2nd argument is true = "none" // hide element and use its space
else { // Otherwise = "hidden"; // make e invisible, but leave its space
function highlight(e) { // Highlight e by setting a CSS class
// Simply define or append to the HTML class attribute.
// This assumes that a CSS stylesheet already defines the "hilite" class
if (!e.className) e.className = "hilite";
else e.className += " hilite";
JavaScript allows us to script the HTML content and CSS presentation of documents
in web browsers, but it also allows us to define behavior for those documents with
event handlers. An event handler is a JavaScript function that we register with the
browser and the browser invokes when some specified type of event occurs. The event
of interest might be a mouse click or a key press (or on a smart phone, it might be a
two-finger gesture of some sort). Or an event handler might be triggered when the
browser finishes loading a document, when the user resizes the browser window, or
when the user enters data into an HTML form element. Chapter 17, Handling Events,
explains how you can define and register event handlers and how the browser invokes
them when events occur.
The simplest way to define event handlers is with HTML attributes that begin with
“on”. The “onclick” handler is a particularly useful one when you’re writing simple
test programs. Suppose that you had typed in the debug() and hide() functions from
above and saved them in files named debug.js and hide.js. You could write a simple
HTML test file using <button> elements with onclick event handler attributes:
<script src="debug.js"></script>
<script src="hide.js"></script>
<button onclick="hide(this,true); debug('hide button 1');">Hide1</button>
<button onclick="hide(this); debug('hide button 2');">Hide2</button>
Here is some more client-side JavaScript code that uses events. It registers an event
handler for the very important “load” event, and it also demonstrates a more sophisticated
way of registering event handler functions for “click” events:
// The "load" event occurs when a document is fully loaded. Usually we
// need to wait for this event before we start running our JavaScript code.
window.onload = function() { // Run this function when the document loads
// Find all <img> tags in the document
var images = document.getElementsByTagName("img");
// Loop through them, adding an event handler for "click" events to each
// so that clicking on the image hides it.
for(var i = 0; i < images.length; i++) {
var image = images[i];
if (image.addEventListener) // Another way to register a handler
image.addEventListener("click", hide, false);
else // For compatibility with IE8 and before
image.attachEvent("onclick", hide);
// This is the event handler function registered above
function hide(event) { = "hidden"; }
Chapters 15, 16, and 17 explain how you can use JavaScript to script the content
(HTML), presentation (CSS), and behavior (event handling) of web pages. The APIs
described in those chapters are somewhat complex and, until recently, riddled with
browser incompatibilities. For these reasons, many or most client-side JavaScript programmers
choose to use a client-side library or framework to simplify their basic programming
tasks. The most popular such library is jQuery, the subject of Chapter 19,
The jQuery Library. jQuery defines a clever and easy-to-use API for scripting document
content, presentation, and behavior. It has been thoroughly tested and works in all
major browsers, including old ones like IE6.
jQuery code is easy to identify because it makes frequent use of a function named
$(). Here is what the debug() function used previously looks like when rewritten to use
function debug(msg) {
var log = $("#debuglog"); // Find the element to display msg in.
if (log.length == 0) { // If it doesn't exist yet, create it...
log = $("<div id='debuglog'><h1>Debug Log</h1></div>");
log.appendTo(document.body); // and insert it at the end of the body.
log.append($("<pre/>").text(msg)); // Wrap msg in <pre> and append to log.
The four chapters of Part II described so far have all really been about web pages. Four
more chapters shift gears to focus on web applications. These chapters are not about
using web browsers to display documents with scriptable content, presentation, and
behavior. Instead, they’re about using web browsers as application platforms, and they
describe the APIs that modern browsers provide to support sophisticated client-side
web apps. Chapter 18, Scripted HTTP, explains how to make scripted HTTP requests
with JavaScript—a kind of networking API. Chapter 20, Client-Side Storage, describes
mechanisms for storing data—and even entire applications—on the client side for use
in future browsing sessions. Chapter 21, Scripted Media and Graphics, covers a clientside
API for drawing arbitrary graphics in an HTML <canvas> tag. And, finally, Chapter
22, HTML5 APIs, covers an assortment of new web app APIs specified by or affiliated
with HTML5. Networking, storage, graphics: these are OS-type services being provided
by the web browser, defining a new cross-platform application environment. If you are
targeting browsers that support these new APIs, it is an exciting time to be a client-side
JavaScript programmer. There are no code samples from these final four chapters here,
but the extended example below uses some of these new APIs.

友情链接It题库(| 版权归yishouce.com所有| 友链等可联系|粤ICP备16001685号-1