INTRODUCTION TO JAVASCRIPT AND DOM

nostalgicisolatedSoftware and s/w Development

Nov 4, 2013 (4 years and 3 days ago)

71 views

INTRODUCTION TO
JAVASCRIPT AND
DOM

Internet Engineering

Spring 2012

Preface


Until now, introducing a little change causes the entire
page to be reloaded from the server.

Submit

Response

Internet Engineering, Spring 2012

2

Preface


So we have problems on small and rapid page updates.



Solutions?


Don’t update frequently!!


Introduce a mechanism for client
-
side updates.



For client
-
side updates we need:


A programming language (JavaScript)


An API for modifying page contents (DOM)

Internet Engineering, Spring 2012

3

What is JavaScript?


JavaScript
was designed to add interactivity to HTML
pages.


JavaScript
is a scripting language.


A
scripting language is a lightweight programming
language.


JavaScript
is usually embedded directly into HTML pages
.


JavaScript is an interpreted language (means that scripts
execute without
preliminary compilation
).


Everyone
can use JavaScript without purchasing a
license.

Internet Engineering, Spring 2012

4

What can JavaScript do?


JavaScript

gives

HTML

designers

a

programming

tool

-

HTML

authors

are

normally

not

programmers,

but

JavaScript

is

a

scripting

language

with

a

very

simple

syntax!

Almost

anyone

can

put

small

"snippets"

of

code

into

their

HTML

pages


JavaScript

can

react

to

events

-

A

JavaScript

can

be

set

to

execute

when

something

happens,

like

when

a

page

has

finished

loading

or

when

a

user

clicks

on

an

HTML

element


JavaScript

can

read

and

write

HTML

elements

-

A

JavaScript

can

read

and

change

the

content

of

an

HTML

element


JavaScript

can

be

used

to

validate

data

-

A

JavaScript

can

be

used

to

validate

form

data

before

it

is

submitted

to

a

server
.

This

saves

the

server

from

extra

processing


JavaScript

can

be

used

to

detect

the

visitor's

browser

-

A

JavaScript

can

be

used

to

detect

the

visitor's

browser,

and

-

depending

on

the

browser

-

load

another

page

specifically

designed

for

that

browser


JavaScript

can

be

used

to

create

cookies

-

A

JavaScript

can

be

used

to

store

and

retrieve

information

on

the

visitor's

computer

Internet Engineering, Spring 2012

5

JavaScript Basics


Variables:


Dynamically Typed


Need not to be declared before use.


Can be declared using “
var
” keyword.


Have to scopes


Local


Global


Data Types:


Only one number type (Double Precession Floating Point).


Strings, but no character type.


Boolean


Null


Undefined (Variables that never get value)

Internet Engineering, Spring 2012

6

JavaScript Basics


Arrays:


Ordered Collections


Are Objects


Integer Indexes


Have length method


Functions:


All functions return a value


Can have variable number of arguments


Supports Object
-
Oriented Programming

Internet Engineering, Spring 2012

7

JavaScript Basics


To insert a JavaScript into an HTML page, use the <script> tag.


Inside the <script> tag use the type attribute to define the
scripting language.


The <script> and </script> tells where the JavaScript starts and
ends:


Internet Engineering, Spring 2012

8

JavaScript Basics


JavaScript can also be placed in external files.


External JavaScript files often contain code to be used on
several different web pages.


External JavaScript files have the file extension
.
js
.


Note:

External
scripts
cannot contain the <script></script>
tags!


Internet Engineering, Spring 2012

9

Events


Events are actions that can be detected by JavaScript.


Every element on a web page has certain events which
can trigger a
JavaScript.


Examples of events:


A mouse click


A web page or an image loading


Selecting
an input field in an HTML form


Submitting an HTML form


A keystroke


Note:

Events are normally used in combination with
functions, and the function will not be executed before the
event occurs!

Internet Engineering, Spring 2012

10

Some Useful Events


onLoad

and
onUnload


Triggers when the user enters or leaves the page.


O
ften
used to check the visitor's browser type and browser
version.


Also used to deal with cookies
that should be set when a user
enters or leaves a
page.


onFocus


Triggers when the user moves to an element.


onBlur


Triggers when the user leaves an element.


onChange


Triggers when the user changes the value of an element.


onSubmit


Triggers when the user submits a form.

Internet Engineering, Spring 2012

11

Document Object Model (DOM)


The
DOM
defines a standard way for accessing and
manipulating
content, structure, and style

of documents
.


The DOM presents
a document
as a
tree
-
structure.

Internet Engineering, Spring 2012

12

HTML DOM


The HTML DOM is:


A standard object model for HTML


A standard programming interface for HTML


Platform
-

and language
-
independent


A W3C standard


The HTML DOM defines the

objects and properties

of
all HTML elements, and the

methods
(interface) to access
them.


In other words:

The HTML DOM is a standard for how
to get, change, add, or delete HTML elements.


Internet Engineering, Spring 2012

13

HTML DOM


Window Object:


Represents the opened window in the browser.


If a document contains frames (<frame> or <
iframe
> tags), the
browser creates one window object for the HTML document, and
one additional window object for each frame.


Document Object:


Each HTML document loaded into a browser window becomes a
Document object.


It provides access to all HTML elements in a page, from within a
script.

Internet Engineering, Spring 2012

14

Window Object

window.window.window.x

is same as
x

Internet Engineering, Spring 2012

15

DOM Nodes


According to the DOM, everything in an HTML document is a node.


The DOM says:


The entire document is a document node


Every HTML element is an element node


The text in the HTML elements are text
nodes


Every HTML attribute is an attribute node


Comments are comment
nodes


Example:

Internet Engineering, Spring 2012

16

DOM Programming Interface


The programming interface of the DOM is defined by
standard
properties

and
methods
.




Some DOM properties:


x.innerHTML

-

the text value of x


x.nodeName

-

the name of x


x.nodeValue

-

the value of x


x.parentNode

-

the parent node of x


x.childNodes

-

the child nodes of x


x.attributes

-

the attributes nodes of x


Note:

In the list above, x is a node object (HTML element).




Some DOM methods:


x.getElementById
(
id
)
-

get the element with a specified id


x.getElementsByTagName
(
name
)
-

get all elements with a
specified tag name


x.appendChild
(
node
)
-

insert a child node to x


x.removeChild
(
node
)
-

remove a child node from x


Note:

In the list above, x is a node object (HTML element).


Internet Engineering, Spring 2012

17