1. JavaScript and Ajax (JavaScript Environment) Week 6 Web site: http://fog.ccsf.edu/~hyip

2. 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 (DOM) that forms a part of it  The event-driven programming model

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

4. 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, history property, navigator property) 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, links[] array containing Link objects, anchors[] array containing Anchor 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 /* returns the text of an option */ 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).

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

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

7. Embedding Scripts in HTML Client-Side JavaScript code is embedded within HTML documents in a number of ways:  Between a pair of and tags JavaScript codes.  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 Click me to invoke onclick event.  In an URL that uses the special javascript: (JavaScript Pseudo Protocol) javascript: alert("Call from JavaScript Pseudo Protocol");

8. 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();

9. Scripts in External Files The tag supports a src attribute that specifies the URL of a file containing JavaScript code: print_todays_date(); A JavaScript file typically has a.js extension and contains pure JavaScript, without tags or any other HTML. Inside the util.js file: function print_todays_date() { var d = new Date(); document.write(d.toLocaleString()); }

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

11. 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(); alert("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!")

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

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