Introduction to Web Site Development Department of Computer Science California State University, Los Angeles Lecture 9: JavaScript

Why JavaScript? HTML Data What data do you want to display? CSS Presentation How is the HTML data presented? JavaScript Behavior How does the web page behave?

What is JavaScript? JavaScript is a C++-like scripting language Invented by Netscape Corporation Standardized as ECMAScript Has nothing to do with Java Can also be a programming language Microsoft's implementation of JavaScript, JScript, is also a programming language JavaScript is a trademarked name Inventor still works for Mozilla Mozilla has the most complete JavaScript implementation

The Document Object Model The document object model (DOM) is a model (a programming interface) that gives you access to the objects in your document so that you can manipulate and query them The HTML5 specification contains information about the HTML5 DOM, a model that gives you access to the elements in your HTML5 document so that you can manipulate them Different documents typically have their own DOM (Excel, Word, XML, HTML5, etc.)

JavaScript and the DOM Using JavaScript and the HTML5 DOM, you can manipulate the attributes and content of most elements in an HTML5 document JavaScript is written as a collection of statements and functions Each statement should be terminated by a semicolon (not required if new statements are put on a new line)

Dynamic HTML (DHTML) When a web page contains HTML, CSS, and JavaScript that queries the HTML5 DOM, it is oftentimes called a Dynamic HTML page (DHTML)

A Few Notes About DHTML DHTML can be used to manipulate the contents and attributes of all HTML elements in an HTML document These changes are only temporary Changes are done in memory Changes do not affect the original HTML file Refresh your web browser and you should return to the original, unmodified HTML document (unless the browser plays caching tricks)

The SCRIPT Element Description Specifies code written in a scripting language such as JavaScript, JScript or VBScript Requirements Start Tag: REQUIRED End Tag: REQUIRED Usage Usage: Anywhere in the HEAD or BODY Content Model: Scripting code.

The SCRIPT Element Common Attributes TYPE: Specifies the language of the script or format of the data; must be a valid MIME type, typically either "text/javascript" or "text/vbscript" and by default, is "text/javascript" SRC: Specifies the URL of an external script file; if this attribute is specified, the SCRIPT element must contain NO CONTENT

Hello JavaScript! document.write("Hello World");

Types of JavaScript Inline JavaScript JavaScript appears within an attribute of an HTML element, similar to inline CSS Internal JavaScript JavaScript appears within a SCRIPT element inside an HTML document (HEAD and BODY only) External JavaScript JavaScript appears outside in an external file, typically using a.JS filename extension

Internal JavaScript Use SCRIPT element without SRC attribute SCRIPT element must define content JavaScript code is the content of the SCRIPT element Example: document.write("Hello World");

External JavaScript Use SCRIPT element with SRC attribute defined SCRIPT element must not define any content SCRIPT element must still use an end tag JavaScript code goes inside an external file Example (simple external):

Inline JavaScript JavaScript code is written directly within certain HTML element attributes (such as event attributes) Example

JavaScript Variables JavaScript is a programming language, and as in other computer programming languages, you can create variables Use the var keyword to create variables Example [04] variables.html

JavaScript Functions Use functions when you want to execute code when called rather than automatically Use the function keyword to create functions The syntax is: function name_of_function(arguments) { // JavaScript code goes here } Example:

JavaScript Interfaces Window HTMLDocument HTMLElement HTMLElement Derived Interfaces

Window Attributes window.document window.location Functions window.alert(string) window.confirm(string) window.prompt(message, default) window.showModalDialog(url) window.open(url, name)

HTMLDocument Attributes document.title document.URL document.getElementById There are more but none that are so important Functions document.write(string) document.writeln(string) There are more but none that are so important

Manipulating HTML Elements To manipulate an HTML element: Give that element a unique identifier (id) Use document.getElementById(id) to get a var handle to that element Now use the HTML DOM and the var handle to access that element’s attributes and functions! Example var element = document.getElementById("myP"); element.innerHTML = "New paragraph content!";

Manipulating HTML Elements After you get a var handle to an element: element.innerHTML represents the content (stuff between the start tag and the end tag) element.attribute_name represents any attribute of that element (see example) Example var element = document.getElementById("myA"); element.href = "

HTMLElement All HTMLElements support the following Attributes innerHTML title Functions Nothing important for now

HTMLElement Derived Interfaces Many HTML elements have unique attributes and functions TABLETABLE element

HTMLTableElement Attributes innerHTML and all attributes from HTMLElement caption rows Functions insertRow(index) deleteRow(index)

HTMLImageElement Attributes alt src useMap, isMap width, height complete Functions none

HTML Events All HTML elements have event attributes See the DOM section: ents.htm Most events are pretty obvious with what they do Attributes They all start with on; onclick, onkeydown, etc. Examples