Introduction to JavaScript LIS390W1A Web Technologies and Techniques 24 Oct 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 LandClient Land Internet HTML + 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

How do we create JavaScript? In the 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 and. Add a heading in the with some message

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

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.

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

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

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 into the Add a hyperlink in the body Say Hello

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

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