An Introduction to JavaScript Summarized from Chapter 6 of “Web Programming: Building Internet Applications”, 3 rd Edition

What is JavaScript? a dynamic, client-side scripting language  it is not compiled  it is not Java (from Sun) developed by Netscape  originally called LiveScript  When Java became popular – Netscape changed the name to JavaScript open language (no purchasing)

What is JavaScript? (cont.) Now managed by ECMA (European Computer Manufacturers Association) and adopted by ISO Since it is a client-side language, it works with a browser

What is JavaScript? (cont.) Pros  form validation (before sending to a server)  calculations  create custom HTML on- the-fly  test for plug-ins and other browser settings (does not work in IE after version 5.0; that function is now handled by ActiveX) Cons  cannot read local files (files on the client machine)  cannot write local file (except for cookies)  cannot read/write server files  can only close it’s own windows  can only read data from it’s own pages

JavaScript is Object-Oriented (?) Objects are things  In the world (cat, chair, car, etc.)  In browsers (window, button, title, etc.) Objects have properties  size, color, and position are all properties  Object are said to “have a” property Object have methods (or functions)  these are things that object do  click(), open(), selected() are methods Think of properties as being nouns Think of methods are being verbs

What is the DOM? Document Object Model  Developed by W3C but implemented differently in every browser.  “The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web.” ( object properties methods

A Document Tree (node tree) downloaded from

A Worked Example text “My Page” text “This is text on my page” My Page This is text on my page

Hello, world!

Another couple of examples

Conditions (if statements) In order to validate to XHTML-Strict, you need to leave out ‘language=“javascript”. TRUE part FALSE part

Example A Simple Script (from text) navigator refers to the browser object alert creates a pop-up window document.write creates the content on a web page onLoad and onUnload are events

A Simple Script variation Inside the describe() function, change the document.write lines to display all of the data on a page instead of a pop-up

User Input Prompt the user and store the input as a variable You can include this in your page to notify the user that their JavaScript is disabled.