introduction to javascript lis390w1a web technologies and techniques 24 oct. 2007 m. cameron jones
DESCRIPTION
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 JavaScriptTRANSCRIPT
Introduction to JavaScript
LIS390W1AWeb Technologies and Techniques
24 Oct. 2007M. 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
InternetHTML +
JavaScript 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”><!-- // Java Script Goes Here -->
</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 leftvar 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 createddocument.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");var msg = 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 linkWhat happened?
• Click the link a bunch of timesWhat 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>