JavaScript Tutorials - Herong's Tutorial Examples - 2.33, by Herong Yang
JavaScript Support in Web Browsers
This section provides a quick description of how Web browsers execute JavaScript codes, provide DOM API for document interaction, and provide events to trigger JavaScript code execution.
A typical Web browser will provide support to JavaScript in 4 areas:
Let's use a simple JavsScript example to illustrate those areas:
<html> <!-- DOM_and_Event.html Copyright (c) 2008 HerongYang.com. All Rights Reserved. --> <head> <title>DOM and Event</title> <script type="text/javascript"> var colorID = 0; function changeColor() { if (colorID == 0 ) document.body.bgColor = "lightgrey"; else if (colorID == 1 ) document.body.bgColor = "lightblue"; else if (colorID == 2 ) document.body.bgColor = "lightgreen"; else if (colorID == 3 ) document.body.bgColor = "lightyellow"; colorID = (colorID+1)%4; } </script> </head> <body> <p> <script type="text/javascript"> document.write('Hello World!'); </script> </p> <form> <input type="button" value="Click to change background color" onClick="changeColor();"/> </form> <p>Want to know the color code? <a href="javascript:alert(document.body.bgColor)">Click here.</a> </p> </body> </html>
Run this JavaScript example in a Web browser, and click the change color button. The browser will change the background color of the page each time you click the button.
If you want to know the code value of the current background color, you can click the hyper link near the end of the page.
Now look at the JavaScript example again. The browser indeed supports you in 4 areas:
1. Executes the JavaScript code included in the "script" tag while rendering the HTML document:
<script type="text/javascript"> document.write('Hello World!'); </script>
2. Provides the "document" object as part of the DOM API to allow the JavaScript code to interact with the HTML document:
document.write('Hello World!'); document.body.bgColor = "lightgrey"; ...
3. Provides the "onClick" event to allow the JavaScript code to be executed:
<input type="button" value="Click to change background color" onClick="changeColor();"/>
4. Executes the JavaScript code included in "javascript:" pseudo-URL.
<a href="javascript:alert(document.body.bgColor)">Click here.</a>
Table of Contents
ECMAScript Language Specification and JavaScript Dialects
Data Types, Variables and Expressions
Creating, Accessing, and Manipulating Arrays
Defining and Calling Functions
►Web Browser Supporting JavaScript
►JavaScript Support in Web Browsers
Including JavaScript Codes with HTML "script" Tags
type="text/javascript" or language="JavaScript"
JavaScript Version Supported by Browsers
Including 'script' Tags in String Literals
Escaping 'script' Tags in String Literals
Using HTML Entities to Protect HTML Tags
Including JavaScript Codes as External Files
DOM API - The "document" Object
DOM API - The "window.open" Method
'javascript:' Pseudo-URL Addresses
JavaScript Console in Google Chrome
JavaScript Console in Mozilla Firefox
JavaScript Console in Apple Safari
JavaScript Console in IE (Internet Explorer)
Server-Side and Client-Side Web Scripting
Defining Your Own Object Types
Inheritance of Properties and Methods through the Prototype Object Chain
'jrunscript' - JavaScript Shell Command from JDK
Using Functions as "Function" Objects
Introduction to Built-in Object Types
W3C's Document Object Model (DOM) Specifications