JavaScript Introduction

Slide 2 Lecture Overview JavaScript background The purpose of JavaScript A first JavaScript example Introduction to getElementById

Slide 3 History Lesson JavaScript is NOT Java Started at Netscape in 1995 Microsoft released its own version 'JScript" in 1996 JavaScript is the default scripting language in.NET (VBScript has pretty much faded away)

Slide 4 What do we do with JavaScript? A starter list Adds sizzle to pages (Animation) Dynamic HTML Client side data entry validation Reduce the load on overburdened servers Process and manage cookies AJAX to load parts of Web pages jQuery layered on top of JavaScript

Slide 5 What is JavaScript? (1) It’s a programming language that ‘closely’ resembles Java Implementations European Computer Manufacturers Association created ECMAScript to standardize different scripting versions See ECMA-262 I’ll try to conform There are others It’s a “C ish” language

Slide 6 What is JavaScript (2) Most of what we do is to access the object model supported by the underlying browser The W3C defines the Document Object Model (DOM) Differences do exist between browsers I will try, where possible, to point out these differences Most support the common ECMA standards though

Slide 7 Creating a First Script tag appears in a or tag type argument denotes that it’s JavaScript type is no longer required in HTML 5 Example: document.write(“hello”);

Slide 8 Creating a First Script document.write(“hello") script tag End script tag Script language

Slide 9 Script Placement (1) A document may have multiple blocks Scripts in a block Create procedures here Before or after the section is fine Scripts in a block Code executes as the page is rendered Importing external script files This is the recommended place to put generic functions and way to create reusable libraries

Slide 10 Script Placement (2) Scripts appearing in a tag but outside a procedure execute first in the order they appear More about procedures later Code in a procedure is not executed unless explicitly called Scripts appearing in a tag execute as they are encountered The placement has an effect on page rendering

Slide 11 Creating a First Script (Example) See JavaScriptExample1.htm Pay particular attention to the order in which the script code executes

Slide 12 Handling Java Incapable Browsers Include the directive to display a message when JavaScript is disabled document.write("Greetings") JavaScript is not enabled.

Slide 13 The document Object Recall that there exists a hierarchical in- memory representation of an HTML document This is maintained by the browser in the document object Much more later but the document object allows us to reference all the document’s elements

Slide 14 Using getElementById Is a key to working with JavaScript It gets a reference to an element having a specific value for the ID property That’s why ID must be unique Like a variable, it’s a unique identifier Once we have a reference to an element, we can call its methods and read / write its properties

Slide 15 Using getElementById (Example) Get a reference to the element whose ID property has a value of spnNumericVariables var v; v = document.getElementById( "spnNumericVariables");