Tema 5 Tema 5 - Javascript Javascript and and Dom Dom: Software Software Engineering Engineering Group Group

escuela tcnica superior
de ingeniera informtica
V
e
r
s
i
n

o
r
i
g
i
n
a
l
:

A
m
a
d
o
r

D
u
r
n
,

D
a
v
i
d

B
e
n
a
v
i
d
e
s

y

P
a
b
l
o

F
e
r
n
a
n
d
e
z
(
n
o
v
i
e
m
b
r
e

2
0
0
6
M
a
n
u
e
l

R
e
s
i
n
a
s

(
n
o
v
i
e
m
b
r
e

2
0
0
7
)
;

R
e
e
s
t
r
u
c
t
u
r
a
c
i
n

d
e

c
o
n
t
e
n
i
d
o
.
(
n
o
v
i
e
m
b
r
e

2
0
1
0
)
;

T
r
a
d
u
c
c
i
o
n
e
j
e
m
p
l
o
s

y

c
a
m
b
i
o
s

m
e
n
o
r
e
s
.

T
i
e
m
p
o
:

4
h
Tema 5 Tema 5 JavaScript JavaScript and and
DOM DOM
Departamento de Departamento de
Lenguajes y Sistemas Informticos Lenguajes y Sistemas Informticos
V
e
r
s
i
n

o
r
i
g
i
n
a
l
:

A
m
a
d
o
r

D
u
r
n
,

D
a
v
i
d

B
e
n
a
v
i
d
e
s

y

P
a
b
l
o

M
a
n
u
e
l

R
e
s
i
n
a
s

(
n
o
v
i
e
m
b
r
e

2
0
0
7
)
;

R
e
e
s
t
r
u
c
t
u
r
a
c
i
n

d
e

c
o
n
t
e
n
i
d
o
.
l
t
i
m
a

r
e
v
i
s
i
n
:

P
a
b
l
o

F
e
r
n
a
n
d
e
z
(
n
o
v
i
e
m
b
r
e

2
0
1
0
)
;

[ngel US V7] Diseo: Amador Durn Toro (2003-2006)
Software Software Engineering Engineering Group Group
JavaScript JavaScript
Escuela Tcnica Superior
de Ingeniera Informtica
Departamento de Lenguajes
y Sistemas Informticos
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

1. 1. What What is is JavaScript JavaScript? ?
1.1 1.1 Comments Comments
1.2 Data 1.2 Data types types
1.3 Variables 1.3 Variables
1.4 1.4 Functions Functions
1.5 1.5 Structures Structures of of
control control
1.6 1.6 Conditionals Conditionals
1.7 1.7 Classes Classes y y objects objects
1.8 1.8 Predefined Predefined classes classes
2. 2. JavaScript JavaScript and and the the web web
Main Main features features of of JavaScript JavaScript
It is interpreted (script language), not compiled
It is an object-oriented language
It is not Java, although its syntax is similar
3. BOM 3. BOM
4. DOM 4. DOM
4.1 4.1 The The DOM DOM tree tree
4.2 DOM 4.2 DOM nodes nodes
4.3 4.3 Node Node types types
4.4 4.4 Elements Elements
4.5 Traversing the tree 4.5 Traversing the tree
4.6 Finding elements in 4.6 Finding elements in
the tree the tree
4.7 Modifying the tree 4.7 Modifying the tree
4.8 Event handling 4.8 Event handling
4.9 HTML DOM 4.9 HTML DOM
55. Web references . Web references
1
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Comments Comments in in JavaScript JavaScript
// One line commet
/* Several lines comments
are the same as in Java
*/
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
2
There may be comments of one line or several
lines. They have the same syntax as in Java or
C++.
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Basic data Basic data types types in in JavaScript JavaScript
Strings Strings: "Hello, world!", 'epi@barriosesamo.es'
Numbers Numbers: 12, 22.4, -5
Booleans Booleans: true, false
String String constants constants
JavaScript is 'cool'."
You must be careful with quotes'
'Can I use <h1>HTML</h1> tags?'
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
3
'Can I use <h1>HTML</h1> tags?'
"Can I use the slash: \\ ?"
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Declaration Declaration of variables in of variables in JavaScript JavaScript
JavaScript is case sensitive, which means variable
name is not the same as variable Name.
It is not mandatory to declare variables, but it is
recommended.
var var ABDscore;
ABDscore = 10;
// No explicit declaration
ABDscore = 10;
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
4
Initialization Initialization of variables of variables
var var Pract = 10, Test = 10;
var var Total = (Pract*0.4) + (Test*0.6);
var var ABDscore;
ABDscore = 10;
NOT RECOMMENDED NOT RECOMMENDED
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Functions Functions in in JavaScript JavaScript
If there is no return return the function returns an undefined
variable.
function function function_name( parameters )
{{
var var local_variable = initial_value;
// function code
return return (returned value);
}}
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
5
There are three predefined functions that are very
useful to validate forms:
parseInt parseInt: converts a string to an integer.
parseFloat parseFloat: converts a string to a float.
isNaN isNaN: it is true whether the parameter is not a number.
parseInt( "456" ) == 456; // true
parseFloat( "1.34" ) == 1.34; // true
isNaN( parseInt( one" ) ); // true
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Control Control structures structures in in JavaScript JavaScript
They have the same syntax as in Java and C++.
switch switch (expresin) {{
case case etiq1 :
// block 1
break; break;
case case etiq2 :
// block 2
break; break;
if if (condition) {{
// if block
}}
else else {{
// else block
}}
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
6
...
default : default :
// bloquen
}}
for for (i=0; i<=N; i++) {{
// for block
}}
while while (condition) {{
// while block
}}
do { do {
//do block
} } while while (condition)
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Conditionals Conditionals
if if (condition) {{
/* Code executed if
condition is true*/
}}
else else {{
/* Code executed if
condition is false */
}}
while while (condition) {{
/* Code executed if
condition while true */
}}
do { do {
/* Code executed if
condition is true */
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
7
Condition Condition examples examples
var var ABDpassed;
var var notInitialized;
var var ABDscore = 10;
ABDpassed = true true;
(ABDpassed) es true
(notInitialized) es false
(ABDscore >= 5) es true
(ABDscore == 5) es false
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
JavaScript JavaScript classes classes
Classes define categories of objects.
For instance: Car, Person, String,
Objects Objects in in JavaScript JavaScript
An object represents one instance of a class.
For instance, joe and mike are instances of class
Person.
var var joe = new new Person();
var var mike = new new Person();
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
8
Objects are associative arrays, to which new
properties or functions (methods) can be
dynamically added.
Properties can be accessed as follows:
object.property
object[property"]
Methods can be accessed as follows:
object.method( parameters )
var var mike = new new Person();
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
JavaScript JavaScript has has several several predefined predefined classes classes
The most commonly used are: Array Array, Boolean Boolean,
Math Math, Date Date, Number Number, Object Object y String String.
They can be used to create new instances:
var var str1, str2;
str1 = new new String(My String");
str2 = str1.toUpperCase();
// str2 = MY STRING"
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
9
Or statically:
// str2 = MY STRING"
var var str;
str = String(Static").toUpperCase();
// str = "STATIC"
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined classes classes: : String String
Properties Properties
length: string length.
Methods Methods
big(): sets the font bigger
bold(): sets the font bolder
charAt(n): returns the character at position n
match(c) : returns whether substring c belongs to
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
10
match(c) : returns whether substring c belongs to
the string
substring(x,y): returns the substring from x to y
both included (strings start in 0)
toLowerCase(): converts to lower case
toUpperCase(): converts to upper case
valueOf() : returns the value of type string
(important when comparing strings)
toString(): converts the object to a string
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined classes classes: : Math Math
Methods Methods
abs(nmero): returns the absolute value
max(x,y): returns the maximum between x and y
min(x,y): returns the minimum between x and y
pow(base, exp): pow
random(): returns a random number in [0,1]
round(nmero): rounds to the closest integer
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
11
round(nmero): rounds to the closest integer
sin(nmero): function sin
sqrt(nmero): square root
tan(nmero): tangent
...
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined classes classes: : Array Array
length: length of the array
Methods Methods
join(): joins the elements separating them with
commas.
reverse(): inverts the order of the elements
sort(): sort the elements of the array
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
12
sort(): sort the elements of the array
Array with 3 rows and 6 columns?
a = new new Array Array (25); // creates an array of 25 elements
a = new new Array Array (1,"abd",true); // an array with 3 elements
a = new new Array Array (mystring"); // an array with one string
a = new new Array Array (false false); // an array with element false
a = new new Array Array (3);
for for (i=0;i<3;i++) a[i]= new new Array Array (6);
//array access a[i][j]
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined classes classes: Date : Date
Methods Methods
getDate(): returns the day of the current month as
an integer between 1 and 31
getDay(): returns the day of the current week as an
integer between 0 and 6
getHours(): returns the hour of the current time as
in integer between 0 and 23.
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
13
getMinutes(): returns the minutes of the current
time as an integer between 0 and 59.
getMonth(): returns the month of the current year
as an integer between 0 and 11.
getSeconds(): returns the seconds of the current
minute as an integer between 0 and 59.
getTime(): returns the time in miliseconds
transcurred from the 1st January 1970
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Methods Methods
getYear(): returns the current year as an integer
setDate(day, month): sets the day and month
toGMTString(): returns a string with the current
date
var var f = new Date new Date (); 2. 2. JavaScript JavaScript and and the the web web
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
14
var var f = new Date new Date ();
var var f = new Date new Date (year, month);
var var f = new Date new Date (year, month, day);
var var f = new Date new Date (year, month, day, hour);
var var f = new Date new Date (year, month, day, hour, minutes);
var var f = new Date new Date (year, month, day, hour, minutes, seconds);
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
function function dayOfTheWeekInSpanish()
{{
var var today = new new Date();
var var day;
switch switch ( day.getDay() ) {{
case case 0: day = "Domingo"; break break;
case case 1: day = "Lunes"; break break;
case case 2: day = "Martes"; break break;
case case 3: day = "Mircoles"; break break;
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
15
case case 3: day = "Mircoles"; break break;
case case 4: day = "Jueves"; break break;
case case 5: day = "Viernes"; break break;
case case 6: day = "Sbado"; break break;
}}
return return( day );
}}
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
JavaScript JavaScript is is a a programming programming language language like like any any
other other and and it it can can be be used used in in many many different different
contexts contexts..
However However, , it it has a has a widespread widespread use in use in the the web web
where where it it is is used used to to give give dynamism dynamism to to web web pages pages..
When When used used inside inside a web browser, a web browser, the the web web
browser browser provides provides several several predefined predefined objects objects
Some objects are related to the web browser (BOM
Browser Object Model)
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
Browser Object Model)
Others are related to the structure of the HTML
document (DOM) and can be accessed by means of
object document document:
16
window window.alert(que viene ABD!");
< <img img id id="imgmail" src src="mail.jpg"/> />
document document.getElementById("imgmail").src = "mail2.jpg";
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
JavaScript JavaScript in in context context
http://server.com/page.html http://server.com/page.html
Server.com Server.com
page.html page.html
Internet Internet
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
17
<html> <html>
<head></head> <head></head>
<body> <body>
<h1> <h1>Pgina Pgina</h1> </h1>
</body> </body>
</html> </html>
page.html page.html
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
server.com server.com
Internet Internet
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
18
Pgina
<html> <html>
<body> <body>
<h1>Pgina</h1> <h1>Pgina</h1>
</body> </body>
</html> </html>
page.html page.html
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
page.html page.html
Internet Internet
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
19
page.html page.html
<html> <html>
<body> <body>
<h1> <h1>Pgina Pgina</h1> </h1>
<script> <script>
document.Write document.Write(" ("Hola Hola Mundo Mundo!"); !");
</script> </script>
</body> </body>
</html> </html>
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Internet Internet
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
20
page.html page.html
<html> <html>
<body> <body>
<script> <script>
document.Write("Hola Mundo!"); document.Write("Hola Mundo!");
</script> </script>
</body> </body>
</html> </html>
Pgina
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Internet Internet
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
21
page.html page.html
<html> <html>
<body> <body>
<script> <script>
document.Write("Hola Mundo!"); document.Write("Hola Mundo!");
</script> </script>
</body> </body>
</html> </html>
Pgina
Hola Mundo!
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Where Where do do we we use use JavaScript JavaScript? ?
In the HTML document
Inside element head
Inside element body
As an event handler onevento=code"
*
As the URL of a link href="javascript:code"
**
In a separated file
JavaScript JavaScript code code inside inside element element script script should should be be
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
22
JavaScript JavaScript code code inside inside element element script script should should be be
placed placed inside inside HTML HTML comments comments to to avoid avoid problems problems
with with old old web browsers. web browsers.
In XHTML In XHTML it it must must be be encolsed encolsed a a section section CDATA CDATA..
In In which which order order is is JavaScript JavaScript code code executed executed? ?
JavaScript code is always executed in the same
order as in the HTML code.
Usually, element head contains only declarations of
variables and functions.
*Events and their handling are studied in the next lesson.
**NOT RECOMMENDED.
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Script Script inside inside the the HTML HTML document document ( (body body) )
< <html html> >
<head> <head>
< <title title> >Document title</ </title title> >
<!  >
</head> </head>
< <body body> >
<!  >
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
23
<! <!- - more document content -- --> >
</ </body body> >
</ </html html> >
<script <script type type=" ="text text/ /javascript javascript""> >
<!  >
</script> </script>
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Script Script inside inside the the HTML HTML document document( (head head) )
< <html html> >
<head> <head>
<![CDATA[ <![CDATA[
// JavaScript code
]]> ]]> 2. 2. JavaScript JavaScript and and the the web web
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
24
<!  >
</head> </head>
< <body body> >
</ </body body> >
</ </html html> >
]]> ]]>
</script> </script>
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Script in a Script in a different different file file
< <html html> >
<head> <head>
<!  >
</head> </head>
<script <script type type=" ="text text/ /javascript javascript" " src src="mycode.js" ="mycode.js"> >
</script> </script>
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
25
</head> </head>
< <body body> >
</ </body body> >
</ </html html> >
// JavaScript
// code
mycode.js mycode.js
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Browser Browser Object Object Model Model (BOM) (BOM)
window: the window of the navigator.
screen: the screen.
navigator: the web browser itself.
history: the history of navigation.
location: the URL of the current page.
window
navigator
location
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
26
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined objects objects: : window window
Represents the window of the navigator
status: status bar message
document: current HTML document
history: navigation history
closed: true if the window is closed
length: number of frames that are contained in the
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
27
length: number of frames that are contained in the
window
frames: an array that contains all frames that are
contained in the window, i.e., returns an array of
objects of type Frame
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined objects objects: : window window
Methods Methods
alert(msg): shows a window
with a message
confirm(msg): shows a
window with an accept and a
cancel button; it returns true
if the user presses accept and
false if he/she presses cancel
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
28
false if he/she presses cancel
prompt(msg,default): shows a
window that prompts a string
with a default value
open(url,nombre,opt): opens
a new window in the web
browser
close(): closes the window
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined object object: : navigator navigator
Represents the navigator intself.
appName: name of the navigator: Microsoft
Internet Explorer, Mozilla, NetScape,
appVersion: Netscape 5.0 (Windows; es-ES)
Microsoft Internet Explorer 4.0 (compatible; MSIE
6.0; Windows NT 5.0)
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
29
mimeTypes: an array with the MIME types
(Multipurpose Internet Mail Extensions) supported
by the navigator (Application, Audio, Image,
Message, Multipart, Text, Video)
plugins: an array with the plugins that are installed
in the navigator
javaEnabled(): returns whether the navigator
supports Java applets
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined objects objects: : frame frame
Represents a frame.
Propiedades Propiedades
parent: the parent frame
Predefined Predefined objects objects: : location location
Represents the URL of the document displayed in window
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
30
host: Contains the server name and the port number of
the URL
hostname: server name
pathname: path without including the server name and
the port number
port: port number
protocol: protocol (http, ftp,..)
href: URL that can be dynamically changed
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
What What is is DOM? DOM?
Designed Designed to to dynamically dynamically access access and and update update the the
content content and and structure structure of XML and HTML of XML and HTML
documents documents
W3C W3C standard standard ( ( http://www.w3.org/DOM/ http://www.w3.org/DOM/ ) )
Also Also known known as W3CDOM as W3CDOM
Three Three levels levels: : level level 1, 1, level level 2, 2, level level 33
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
31
Each Each navigator navigator implements implements a a version version of DOM of DOM
Starting Starting from from IE 6 ( IE 6 (Trident Trident) and browsers ) and browsers based based
on on Gecko Gecko ( (Mozilla Mozilla, , Firefox Firefox) ) support support W3CDOM W3CDOM
Trident Gecko KHTML Presto iCab
L1 6.0 1.0 Yes 7.0 Yes
L2 Minor Major Major Major Major
L3 No Minor Minor Minor Minor
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
The The DOM DOM tree tree
<html> <html>
<head> <head>
<title>Menu Cafeta</title> <title>Menu Cafeta</title>
</head> </head>
<body> <body>
<h1>Menu 15 <h1>Menu 15- -11 11- -06</h1> 06</h1>
Primeros Primeros
<ul> <ul>
Menu 15-11-06
Primeros
Pasta
Ensalada
Segundos
Lomo
Flamenquin
document
head
title
body
h1
document
head
(html)
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
32
<ul> <ul>
<li>Pasta</li> <li>Pasta</li>
<li>Ensalada</li> <li>Ensalada</li>
</ul> </ul>
Segundos Segundos
<ul> <ul>
<li>Lomo</li> <li>Lomo</li>
<li>Flamenquin</li> <li>Flamenquin</li>
</ul> </ul>
</body> </body>
</html> </html>
ul
li
li
head
body
title
ul
li
Menu Cafeta
h1
Menu 15-11-06
Primeros
Pasta
li
Ensalada
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
DOM DOM nodes nodes
document
head
body
title
Menu Cafeta
h1
Menu 15-11-06
Primeros
(html)
Elementos
body
h1
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
33
ul
li
Pasta
li
Ensalada
Texto
Primeros
Menu 15-11-06
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Node Node types types
Elements Elements
<div id= <div id=MyDiv MyDiv>DOM is easy</div> >DOM is easy</div>
element element
attribute attribute text text
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
34
Elements Elements
Represent an HTML tag
Attributes Attributes
Provide access to the
attributes of a tag.
Text Text
Represent strings.
div
DOM is easy
MyDiv
id
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Elements Elements
tagName (READ ONLY)
Contains the name of the elements tag
Methods Methods
getAttribute(n)
Returns the attribute with name n
IMG
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
35
Returns the attribute with name n
setAttribute(n,v)
Sets the value of attribute n to v
<img src=homer.jpg/> <img src=homer.jpg/>
<! <!
// //
// // image image contains contains the the object object of of the the element element
alert alert( (image.tagName image.tagName); );
image.setAttribute image.setAttribute( (src,bart.jpg src,bart.jpg); );
// //-- --> >
</script> </script>
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Object Object document.body document.body
provides provides direct direct access access to to
the the document document body body
Array Array childNodes childNodes gives gives
access access to to the the child child nodes nodes of of
an an element element..
element
subelem1
subelem2
subelem3
element.childNodes element.childNodes[0]; [0];
document
Traversing Traversing the the tree tree
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
36
<script <script type="text/javascript" type="text/javascript"> >
<!  >
</script> </script>
body
h1
Menu 15-11-06
ul
li
Pasta
li
Ensalada
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Finding Finding elements elements in in the the tree tree
There There are are two two ways ways: :
By By means means of of the the tag tag name name
getElementsByTagName(tagName)
<!  >
</script> </script>
<!  >
</script> </script>
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Finding Finding elements elements in in the the tree tree
( (examples examples) )
<script <script type="text/javascript" type="text/javascript"> >
<!  >
</script> </script>
<div id=primeros> <div id=primeros>
Primeros Primeros
<ul> <ul>
<li>Pasta</li> <li>Pasta</li>
<li>Ensalada</li> <li>Ensalada</li>
</ul> </ul>
</div> </div>
<!  >
</body> </body>
</html> </html>
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Modifying Modifying the the DOM DOM tree tree
All All nodes nodes have have an an interface interface to to
modify modify the the structure structure of of the the tree tree
( (i.e. i.e. add add nodes nodes, , remove remove nodes nodes) )
To To create create new new elements elements, , you you must must
use use the the parent parent node node ( (document document) )..
insertBefore insertBefore
replaceChild replaceChild
removeChild removeChild
appendChild appendChild
createElement createElement
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
39
<!  >
</script> </script>
use use the the parent parent node node ( (document document) )..
createElement createElement
createTextNode createTextNode
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
< <html html> >
<head> <head>
</head> </head>
< <body body> >
< <tag tag onevent onevent= =JavaScript code"> >

Event Event handling handling (L2) (L2)
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
40
<! <! more document content -- --> >
</ </body body> >
</ </html html> >

</ </tag tag> >
It is usually a call to a
function that has been
previously declared in either
section head or an external
file.
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
HTML DOM HTML DOM
It It is is an an extension extension to to the the basic basic DOM DOM to to make make
the the management management of HTML of HTML documents documents easier easier
Document
Plugin[]
Applet[]
Form[]
Textarea
Text
FileUpload
Password
Reset Radio
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
41
Applet[]
Anchor[]
Area[]
Link[]
Layer[]
Image[]
Hidden
Submit
Reset Radio
Checkbox Button
Select
Options[]
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined objects objects: : document document
Represents the document that is being displayed.
bgColor: integer value with the code of the
background color or string with the color
("#12345", "red")
fgColor: identifies the text color
forms: an array that contains all elements form of
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
42
forms: an array that contains all elements form of
one document
images: array that contains all images in the
document
lastModified: string with the las modification date
links: array that contains all links in the document
referrer: URL of the link from which the user
reached the document.
title: document title
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined objects objects: : document document
Methods Methods
close(): closes the document
write(srt), writeln(str): modifies the document
(notice that writeln does not insert a new line when
the document is displayed in the navigator)
getElementById(id): returns the element with the
specified ID
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
43
< <img img id id="imgmail" src src="mail.jpg"/> />
document document.getElementById("imgmail").src = "mail2.jpg";
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined objects objects: link : link
Represents the links.
target: string with the target name
href: string with the URL of the link
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
44
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined objects objects: : image image
Represents the images.
border: integer with the value of the border of the
image
complete: boolean that indicates whether the image
has been fully loaded from the server
src: it refers to the content of the image itself
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
45
src: it refers to the content of the image itself
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined objects objects: : form form
Represents the forms
Those related to the attributes: action, method, etc.
elements: array that contains all the elements in
the form (buttons, text areas,...)
length: number of elements of a form
Methods Methods
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
46
Methods Methods
submit(): submits the form (it is the same as
clicking the submit button of the form)
reset(): resets the content of the form
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined objects objects: : text text / / textarea textarea
Represents the text controls
All properties related to this kind of controls such as
defaultValue,
value: contains the string entered in the text are or
text box; therefore, the content of a text area or
text box can be modified within JavaScript
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
47
Methods Methods
focus(): captures the focus on the text area
select(): selects the text in the text area
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined objects objects: : checkbox checkbox
Represents a check box control
name: object name
checked: indicates whether the object has been
checked
defaultChecked: indicates whether the object
should be checked by default
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
48
should be checked by default
value: indicates the value associated to the check
box (atributte value of HTML)
Methods Methods
click(): the same as if the user clicks the control
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined objects objects: radio : radio
This object is an array of all the elemnts that
compose the radio button.
length : indicates the number of the elements that
compose the radio button.
Item : the array that contains the elements that
compose the radio button. Each element in the
array has the following properties:
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
49
array has the following properties:
name: object name.
checked: indicates whether the object has been
selected.
defaultChecked: indicates whether the object should
be checked by default.
value: indicates the value associated to the radio
button (atributte value).
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Predefined Predefined objects objects: : select select
Represents element select.
length: number of elements that it contains
options: array with the selection options, each one
with the following properties:
defaultChecked: indicates whether the object should
be selected by default
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
50
index: the position of the object in the array
selected: indicates whether the object is selected
selectedIndex: integer that indicates the index of the
position that has been selected.
text: string that shows the text shown in the option
selectedIndex: integer that indicates the index of
the position that has been selected
[
n
g
e
l

U
S

V
7
]

D
i
s
e
o
:

A
m
a
d
o
r

D
u
r
n

T
o
r
o

(
2
0
0
3
-
2
0
0
6
)

control control
Web Web references references
References in the HTML standard:
http://www.w3.org/TR/html401/interact/scripts.html
Information about JavaScript:
https://developer.mozilla.org/en/About_JavaScript
ECMAScript standard (Javascript 1.5)
http://www.ecma-international.org/publications/standards/Ecma-
262.htm
3. BOM 3. BOM
4. DOM 4. DOM
the tree the tree
51
Tutorials:
http://www.webteacher.com/javascript/
http://www.webreference.com/programming/javascript/dayries/
http://www.pageresource.com/jscript/
http://www.webestilo.com/javascript/

Tema 5 Tema 5 - Javascript Javascript and and Dom Dom: Software Software Engineering Engineering Group Group

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tema 5 Tema 5 - Javascript Javascript and and Dom Dom: Software Software Engineering Engineering Group Group

Uploaded by

Copyright:

Available Formats

escuela tcnica superior

You might also like