Languages
Pages
Legal
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>
Top Related