Embed Size (px)
Citation preview
CNIT 133 Interactive Web Pags –JavaScript and AJAX
JavaScript Environment
Agenda
• My Web Site: http://fog.ccsf.edu/~hyip (download syllabus, class notes).
• JavaScript Environment.• Window object.• DOM.• Events.• The <script> tag.• JavaScript Psuedo-protocol.
The JavaScript Environment
• To understand client-side JavaScript, you must understand the programming environment provided by a web browser.
• Three important features of that programming environment: The Window object that serves as the global object and
global execution context for the client-side JavaScript code The client-side object hierarchy and the Document Object
Model that forms a part of it The event-driven programming model
The Window as Global Execution Context
• Window object represents the browser window (or frame) that displays the document.
• The Window object is the global object in client-side programming• The window object defines a number of properties and methods that
allow you to manipulate the web browser window. • It also defines the document property for the Document object.• It has two self-referential properties, window and self. You can use either
global variable to refer directly to the Window object.• Since the Window object is the global object in client-side JavaScript, all
global variables are defined as properties of the window. The following 2 lines of code are the same:
var answer = 42; // declare and initialize a global variablewindow.answer = 42; // create a new property of the Window obj
The Client-Side Object Hierarchy and the DOM
• The Window object is the key object in client-side JavaScript. All other client-side objects are accessed via this object. (document property; location property, etc…)
• The Document object (and other client-side JavaScript objects) also have properties that refer to other objects. (Document object has a forms[ ] array containing Form objects)
• To refer to one of these forms:window. document.forms[0]
• To continue with the example:window.document.forms[0].elements[3].options[2].text
• Many of the objects descend from the Document object. This subtree of the larger client-side object hierarchy is known as the document object model (DOM).
The Event-Driven Programming Model
• In client-side JavaScript, the web browser notifies programs of user input by generating events. (e.g. keystroke events, mouse motion events, etc…)
• When an event occurs, the web browser attempts to invoke an appropriate event handler function to respond to the event.
The Role of JavaScript on the Web
• Web browsers display HTML-structured text styled with CSS stylesheets. HTML defines the content, and CSS supplies the presentation. Properly used, JavaScript adds behavior to the content and its presentation.
• The role of JavaScript is to enhance a user’s browsing experience, making it easier to obtain or transmit information.
Embedding Scripts in HTML
• Client-Side JavaScript code is embedded within HTML documents in a number of ways: Between a pair of <script> and </script> tags From an external file specified by the src attribute of a
<script> tag In an event handler, specified as the value of an HTML
attribute such as onclick or onmousover In a URL that uses the special javascript: protocol
The <script> Tag• Client-side JavaScript scripts are part of an HTML file and are coded within <script>
and </script> tags:<script>// your JavaScript code goes here</script>
• A simple JavaScript program in an HTML file:<html><head><title>Today’s date</title><script language="JavaScript" type="text/javascript">function print_todays_date() {
var d = new Date();document.write(d.toLocaleString());
}</script></head><body>The date and time are:<br> <script language="JavaScript" type="text/javascript">
print_todays_date();</script></body></html>
Scripts in External Files
• The <script> tag supports a src attribute that specifies the URL of a file containing JavaScript code:
<script src="util.js"></script>
• A JavaScript file typically has a .js extension and contains pure JavaScript, without <script> tags or any other HTML.
Specifying the Scripting Language• There are two scripting language for the Web. JavaScript and Microsoft’s
Visual Basic Scripting Edition (supported by Internet Explorer)• You can specify the default scripting language for a file with the HTTP
Content-Script-Type header, and you can simulate this header with the HTML <meta> tag.
<meta http-equiv="Content-Type" content="text/javascript">• In practice, browsers assume that JavaScript is the default scripting
language even if your server omits the Content-Script-Type header.• If you wish to override your default, you should use the type attribute of
the <script> tag:<script type="text/javascript"> // js code</script>
Specifying the Scripting Language• JavaScript programs are not really text documents, it marks
this type as obsolete and recommends "application/javascript" instead.
• However, "application/javascript" is not well supported, once it has become well supported, the most appropriate <script> and <meta> tags will be:
<script type="application/javascript"> </script><meta http-equiv="Content-Script-Type" content="application/javascript">
• When the <script> tag was first introduced, it was not support the type attribute. It was defined with the language attribute.
<script language="JavaScript">// JS code</script>
Specifying the Scripting Language• The HTML 4 specification standardized the <script> tag, but it
deprecated the language attribute . Sometimes you will see <script> tags that use the type attribute for standards compliance and the language attribute for backward compatibility with older browsers:
• The language attribute is sometimes used to specify the version of JavaScript in which a script is written:
<script language="JavaScript1.2"> </script><script language="JavaScript1.5"> </script>
• Note: an old browser that does not support JavaScript 1.5 will not attempt to run a script that has a language attribute of "JavaScript1.5".
The <noscript> Tag• HTML defines the <noscript> element to hold content that should be
rendered only if JavaScript has been disabled in the browser.• You can use <noscript> to notify the users that JavaScript is required and
possibly to provide a link to alternative content.<body>...<script language="JavaScript" type="text/javascript"><!--document.write("Hello World!")//--></script><noscript>Your browser does not support JavaScript!</noscript>...</body>
Hiding Scripts from Old Browsers• When JavaScript was new, some browsers did not recognize the <script>
tag and would render the content of this tag as text. • The workaround is to use HTML comments inside the script tag.
<script language="JavaScript" type="text/javascript"><!-- Begin HTML comment that hide the script
// js statements// more js statements
// end html comments that hide the script --></script>
• Or, more compactly:<script> <!--
// js statements//--></script>
Event Handlers in HTML• More dynamic programs define event handlers that are
automatically invoked by the web browser when certain events occur.
• Because events in client-side JavaScript originate from HTML objects (such as buttons), event handlers can be defined as attributes of those objects:
<input type="checkbox" name="options" value="giftwrap" onclick="giftwrap();">
• These are the most common event handlers: onclick onmousedown, onmouseup onmouseover, onmouseout onchange onload
JavaScript in URLs• Another way that JavaScript code can be included on the client side is in a
URL following the javascript: pseudo protocol specifier.• This string of JavaScript code is treated as a single line of code, which
means that statements must be separated by semicolons and that /* */ comments must be used in place of // comments:
javascript: var now = new Date(); "<h1>The time is:</h1>" + now;• The browser executes the JavaScript code contained in the URL and uses
the value of the last JavaScript statement or expression, converted to a string, as the contents of the new document to display. This string value may contain HTML tags and is formatted and displayed just like any other document loaded into the browser.
• JavaScript URLs may also contain JavaScript statements that perform actions but return no value:
javascript:alert("Hello World!")
JavaScript in URLs (continue…)• To use a JavaScript URL to execute some JavaScript code
without altering the currently displayed document, be sure that the last statement in the URL has no return value. Or use the void operator to explicitly specify an undefined return value:
javascript:window.open("about:blank"); void (0);• You can use a JavaScript URL anywhere you would use a
regular URL. One handy way to use this syntax is to type it directly into the location field of your browser, where you can test arbitrary JavaScript code without having to open your editor and create an HTML file containing the code.
Execution of JavaScript Programs• The JavaScript code in <script> tags is executed as part of
document loading and parsing process.• Document loading process:
Load document (execute <script>) Parse document (text output from <script> will be displayed in
document) Load image, sound, etc… Execute onload event (browser fires off this event) JavaScript Event-driven phase and JavaScript URLs (mouse
motion, mouse click, key press, etc…) Execute onunload event
• Note: when the onload handler is triggered, the document is fully loaded and parsed. Therefore, onload event handler must not call document.write(). It will overwrite the current document.
