1. CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment

2. Agenda My Web Site: http://fog.ccsf.edu/~hyip (download syllabus, class notes).http://fog.ccsf.edu/~hyip JavaScript Environment. Window object. DOM. Events. The tag. JavaScript Psuedo-protocol.

3. 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

4. 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 variable window.answer = 42; // create a new property of the Window obj

5. 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).

6. 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.

7. 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.

8. Embedding Scripts in HTML Client-Side JavaScript code is embedded within HTML documents in a number of ways:  Between a pair of and tags  From an external file specified by the src attribute of a 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

9. The Tag Client-side JavaScript scripts are part of an HTML file and are coded within and tags: // your JavaScript code goes here A simple JavaScript program in an HTML file: Today’s date function print_todays_date() { var d = new Date(); document.write(d.toLocaleString()); } The date and time are: print_todays_date();

10. Scripts in External Files The tag supports a src attribute that specifies the URL of a file containing JavaScript code: A JavaScript file typically has a.js extension and contains pure JavaScript, without tags or any other HTML.

11. 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 tag. 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 tag: // js code

12. 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 and tags will be: When the tag was first introduced, it was not support the type attribute. It was defined with the language attribute. // JS code

13. Specifying the Scripting Language The HTML 4 specification standardized the tag, but it deprecated the language attribute. Sometimes you will see 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: 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".

14. The Tag HTML defines the element to hold content that should be rendered only if JavaScript has been disabled in the browser. You can use to notify the users that JavaScript is required and possibly to provide a link to alternative content.... Your browser does not support JavaScript!...

15. Hiding Scripts from Old Browsers When JavaScript was new, some browsers did not recognize the tag and would render the content of this tag as text. The workaround is to use HTML comments inside the script tag. <!-- Begin HTML comment that hide the script // js statements // more js statements // end html comments that hide the script --> Or, more compactly: <!-- // js statements //-->

16. 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: These are the most common event handlers:  onclick  onmousedown, onmouseup  onmouseover, onmouseout  onchange  onload

17. 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(); " The time is: " + 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!")

18. 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.

19. Execution of JavaScript Programs The JavaScript code in tags is executed as part of document loading and parsing process. Document loading process:  Load document (execute )  Parse document (text output from 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.