Introduction to JavaScript

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

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 Land Client Land HTML +JavaScript Internet JavaScript Interpreter

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

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

How do we create JavaScript? <script type=“text/javascript”>  </script> • In the <HEAD> • Inline with other elements • In URL’s with javascript: scheme • Various event attributes added to elements

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 <head> and <body>. • Add a <h1> heading in the <body> with some message

My First JavaScript <html> <head> <title>Hello world!</title> </head> <body> <h1>Hello World</h1> <script type="text/javascript"> alert("Hello World"); </script> </body> </html>

My Second JavaScript • Move the <script> element into the <head> • 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 <h1> headline hasn’t been displayed yet.

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 <h1> headline • Move the <script> element back into the body

Improved Hello World <html> <head> <title>Hello world!</title> </head> <body> <script type="text/javascript"> var hello = document.createElement("h1"); var msg = document.createTextNode("Hello World"); hello.appendChild(msg); document.body.appendChild(hello); </script> </body> </html>

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

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

Getting more advanced • Save your file with a new name “domexample2.html” and close the old one. • Move the <script> into the <head> • Add a hyperlink in the body <a href=“#”>Say Hello</a>

Getting tougher <html> <head> <title>Hello world!</title> <script type="text/javascript"> function sayHello() { var hello = document.createElement("h1"); varmsg = document.createTextNode("Hi"); hello.appendChild(msg); document.body.appendChild(hello); } </script> </head> <body> <a href="#" onClick="sayHello()">Say Hello</a> </body> </html>

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

Introduction to JavaScript