Client Side Javascript
Enviado por astorgabriel • 28 de Mayo de 2014 • 931 Palabras (4 Páginas) • 180 Visitas
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:
<html>
<head>
<script src="library.js"></script> <!-- include a library of JavaScript code -->
</head>
<body>
<p>This is a paragraph of HTML</p>
<script>
// And this is some client-side JavaScript code
// literally embedded within the HTML file
</script>
<p>Here is more HTML.</p>
</body>
</html>
Chapter 14, The Window Object, explains techniques for scripting the web browser and
covers some important global functions of client-side JavaScript. For example:
<script>
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 = "http://google.com";
}
// Run the function defined above 1 minute (60,000 milliseconds) from now.
setTimeout(moveon, 60000);
</script>
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
techniques:
// 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
log.id = "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>
...