1. Introduction to JavaScript LIS390W1A Web Technologies and Techniques 24 Oct. 2007 M. Cameron Jones

2. What is JavaScript? What is HTML? Programming language for controlling the content, presentation, or behavior of a webpage (HTML document, DOM) in the user’s browser. Server LandClient Land Internet HTML + JavaScript JavaScript Interpreter

3. What can you do with JavaScript? Manipulate the DOM – Create, Remove, and Move nodes – Modify styles and other attributes Interact with the user – Listen for keyboard + mouse events – Process user input – Send messages to user Communicate with the server – Send and Retrieve data Interact with the browser – Detect browser version and settings – Firefox extensions are written in JavaScript

4. Examples http://www.google.com/webhp?complete=1 http://maps.google.com/maps http://www.walterzorn.com/dragdrop/dragdrop_e.htm http://script.aculo.us/ http://dojotoolkit.org/demos http://jsmsxdemo.googlepages.com/jsmsx.html

5. How do we create JavaScript? In the Inline with other elements In URL’s with javascript: scheme Various event attributes added to elements

6. My First JavaScript Create a new folder in your I-Drive courseweb_html folder called “javascript” Open TextWrangler and create a new HTML file called “helloworld.html” and save it in your javascript folder Block out a basic HTML document with a and. Add a heading in the with some message

7. My First JavaScript Hello world! Hello World alert("Hello World");

8. My Second JavaScript Move the element into the Save the file and Refresh your browser What happened? The browser interprets the HTML in a “top- down” fashion. The Javascript executes before the body has been parsed, so the headline hasn’t been displayed yet.

9. Some cooler JavaScript Save your file with a different name, “domexample.html” and close “helloworld.html” Popups are annoying, so let’s write our message dynamically into the webpage Delete the headline Move the element back into the body

10. Improved Hello World Hello world! var hello = document.createElement("h1"); var msg = document.createTextNode("Hello World"); hello.appendChild(msg); document.body.appendChild(hello);

11. Helloworld Autopsy Let’s read this from right to left var hello = document.createElement("h1"); Create a new element on type “ h1 ” Store that new element in a variable named hello var msg = document.createTextNode("Hello World"); Create a new text node with value “Hello World” hello.appendChild(msg); Add the text node to the h1 node we created document.body.appendChild(hello); Add the h1 node to the body of the document

12. General Concepts Variables – document (predefined) – hello (we defined it with var ) – msg (we defined it with var ) Strings – “ h1 ” – “ Hello World ” Functions – createElement – createTextNode – appendChild

13. Getting more advanced Save your file with a new name “domexample2.html” and close the old one. Move the into the Add a hyperlink in the body Say Hello

14. Getting tougher Hello world! function sayHello() { var hello = document.createElement("h1"); var msg = document.createTextNode("Hi"); hello.appendChild(msg); document.body.appendChild(hello); } Say Hello

15. Say Hello! Click the link What happened? Click the link a bunch of times What happened? The onClick attribute of the tag allows us to execute some JavaScript every time the link is clicked We are calling our “ sayHello ” function defined above in the