javascript introduction. slide 2 lecture overview javascript background the purpose of javascript a...

JavaScriptIntroduction

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

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)

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

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

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

Creating a First Script <script> tag appears in a <head> or <body> tag

type argument denotes that it’s JavaScript type is no longer required in HTML 5

Example:

<script>document.write(“hello”);

</script>

Creating a First Script

<html> <body>

<script type=“text/javascript">

document.write(“hello")

</script>

</body>

</html>

script tag

End script tag

Script language

Script Placement (1) A document may have multiple <script> blocks Scripts in a <head> block

Create procedures here Before or after the <style> section is fine

Scripts in a <body> 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

Script Placement (2) Scripts appearing in a <head> 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 <body> tag execute as they are encountered The placement has an effect on page

rendering

Creating a First Script (Example) See JavaScriptExample1.htm

Pay particular attention to the order in which the script code executes

Handling Java Incapable Browsers

Include the <noscript> directive to display a message when JavaScript is disabled

<html> <body> <script>

document.write("Greetings") </script> <noscript> <p>JavaScript is not enabled.</p> </noscript> </body></html>

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

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

Using getElementById (Example) Get a reference to the element whose

ID property has a value of spnNumericVariables

var v;v = document.getElementById( "spnNumericVariables");

javascript introduction. slide 2 lecture overview javascript background the purpose of javascript a...

Documents