Introduction to JavaScript

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”>



</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>

Introduction to JavaScript

Documents

Transcript of Introduction to JavaScript