Main features of JavaScript

(1)

Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes

y Sistemas Informáticos

Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. What is JavaScript? 1.1 Comments 1.2 Data types

1.3 Variables

Chapter 5 - JavaScript

1.4 Functions 1.5 Structures of control 1.6 Conditionals 1.7 Classes and 1.7 Classes and objects 1.8 Predefined classes

2. JavaScript and the web

3. BOM 4. DOM

4.1 The DOM tree 4.2 DOM nodes 4 3 Node types 4.3 Node types 4.4 Elements 4.5 Traversing the tree 4.6 Finding elements in the

Grupo de Ingeniería del Software y Bases de Datos

Departamento de Lenguajes y Sistemas Informáticos

elements in the tree 4.7 Modifying the tree 4.8 Event handling 4 9 HTML DOM Du rá n T o ro , 201 1 D u rá n T o ro , 201 1

Universidad de Sevilla

March 2013

4.9 HTML DOM 5. Web references © Diseño de Amador D © Diseño de Amador D

Javascript

• Main features of JavaScript

–

It is interpreted (

script

language), not compiled

1. What is JavaScript? 1.1 Comments 1.2 Data types 1.3 Variables

–

It is an object-oriented language

–

It is not Java, although its syntax is similar

1.4 Functions 1.5 Structures of control 1.6 Conditionals 1.7 Classes and 1.7 Classes and objects 1.8 Predefined classes

3. BOM 4. DOM

4.1 The DOM tree 4.2 DOM nodes 4 3 Node types 4.3 Node types 4.4 Elements 4.5 Traversing the tree 4.6 Finding elements in the elements in the tree 4.7 Modifying the tree 4.8 Event handling 4 9 HTML DOM Du rá n T o ro , 201 1 4.9 HTML DOM

5. Web references _Amador

(2)

Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos

• Comments in JavaScript

//

One line comment

/*

Several line comments

are the same as in Java

1.4 Functions 1.5 Structures of

control 1.6 Conditionals 1.7 Classes and

are the same as in Java

*/

1.7 Classes and objects 1.8 Predefined classes

3. BOM 4. DOM

4.1 The DOM tree 4.2 DOM nodes 4 3 Node types 4.3 Node types 4.4 Elements 4.5 Traversing the tree 4.6 Finding elements in the

–

There may be comments of one line or several lines.

They have the same syntax as in Java or C++.

elements in the tree 4.7 Modifying the tree 4.8 Event handling 4 9 HTML DOM Du rá n T o ro , 201 1 4.9 HTML DOM 5. Web references © Diseño de Amador D

March 2013

Introducción a la Ingeniería del Software y a los Sistemas de Información

2

Javascript

• Basic data types in JavaScript

––

Strings

Strings: "Hello, world!", '[email protected]'

––

Numbers

Numbers: 12, 22.4, -5

––

Booleans

Booleans: true, false

1.4 Functions 1.5 Structures of control 1.6 Conditionals 1.7 Classes and

• String constants

“JavaScript is 'cool' "

–

“JavaScript is 'cool'."

–

“You must be careful with quotes'

'C

I

h1 HTML /h1

t

?'

3. BOM 4. DOM

4.1 The DOM tree 4.2 DOM nodes 4 3 Node types

–

'Can I use <h1>HTML</h1> tags?'

–

"Can I use the slash: \\ ?"

4.3 Node types 4.4 Elements 4.5 Traversing the tree 4.6 Finding elements in the elements in the tree 4.7 Modifying the tree 4.8 Event handling 4 9 HTML DOM Du rá n T o ro , 201 1 4.9 HTML DOM 5. Web references de Amador D

(3)

• Declaration of variables in 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 IISSImark;

IISSImark = 10;

// No explicit declaration

IISSImark = 10;

3. BOM 4. DOM

I iti li

ti

f

i bl

NOT RECOMMENDED

4.3 Node types 4.4 Elements 4.5 Traversing the tree 4.6 Finding elements in the

• Initialization of variables

var Pract = 10, Test = 10;

var Total

(Pract0 4)+(Test0 6);

var ISSImark;

IISSImark

10;

elements in the tree 4.7 Modifying the tree 4.8 Event handling 4 9 HTML DOM Du rá n T o ro , 201 1

var Total = (Pract0.4)+(Test0.6);

IISSImark = 10;

4.9 HTML DOM 5. Web references © Diseño de Amador D

Introducción a la Ingeniería del Software y a los Sistemas de Información

4 March 2013

Javascript

• Functions in JavaScript

function function_name( parameters )

{

var local_variable = initial_value;

// function code

t

(

t

l

)

1.4 Functions 1.5 Structures of control 1.6 Conditionals

1.7 Classes and

–

If there is no

return

the function returns an

undefined

return (return_value);

}

If there is no

return

the function returns an

undefined

variable

.

–

There are three predefined functions that are very

3. BOM 4. DOM

There are three predefined functions that are very

useful to validate forms:

••

parseInt

parseInt: converts a string to an integer.

p

g

••

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

i N N(

I t( “

" ) ) // t

4.9 HTML DOM

D

(4)

• Control structures in JavaScript

–

They have the same syntax as in Java and C++.

switch (expression) {

case label1 :

// bl

k 1

if (condition) {

//

if

block

// block 1

break;

case label2 :

}

else {

//

else

block

// block 2

break;

//

else

block

}

3. BOM 4. DOM

...

default :

// block n

while (condition) {

//

while

block

}

for (i=0; i<=N; i++) {

}

d {

for (i=0; i<=N; i++) {

//

for

block

}

do {

//

do

block

} while (condition)

Introducción a la Ingeniería del Software y a los Sistemas de Información

6 March 2013

Javascript

C

diti

l

i

• Conditional expressions

if (condition) {

while (condition) {

if (condition) {

/* Code executed if the

condition is true */

}

/* Code executed if while

condition is true */

}

else {

/* Code executed if the

}

do {

/ Code executed if the

condition is false */

}

do {

/* Code executed if the

condition is true */

}

hil (

diti

)

3. BOM 4. DOM

4.1 The DOM tree 4.2 DOM nodes

4 3 Node types

• Condition examples

} while (condition)

Condition examples

(IISSIpassed) is

true

(notInitialized) is

false

var IISSIpassed;

var notInitialized;

(notInitialized) is

false

(IISSImark >= 5) is

true

(IISSImark == 5) is

false

var IISSImark = 10;

IISSIpassed = true;

4.9 HTML DOM 5. Web references de Amador D

(IISSImark

5) is

false

(5)

• JavaScript classes

–

Classes define categories of objects.

–

For instance: Car, Person, String, …

• Objects in JavaScript

Objects in JavaScript

–

An object represents one instance of a class.

For instance

joe

and

mike

are

var joe = new Person();

–

For instance,

joe

and

mike

are

instances of the class Person.

Objects are associative arrays to which new properties

j

();

var mike = new Person();

3. BOM 4. DOM

–

Objects are associative arrays, to which new properties

or functions (methods) can be dynamically added.

Properties can be accessed as follows:

–

Properties can be accessed as follows:

object.property

object[“property"]

object[ property"]

–

Methods can be accessed as follows:

bj

t

th d(

t

)

object.method( parameters )

Introducción a la Ingeniería del Software y a los Sistemas de Información

8 March 2013

Javascript

• JavaScript has several predefined classes

–

The most commonly used are: Array

Array, Boolean

Boolean, Math

Math,

Date

Date, Number

Number, Object

Object and String

String.

–

They can be used to create new instances:

var str1, str2;

str1 = new String(“My String");

1.7 Classes and

objects 1.8 Predefined classes

str2 = str1.toUpperCase();

// str2 = “MY STRING"

3. BOM

4. DOM

4.1 The DOM tree 4.2 DOM nodes

4 3 Node types

Or also

statically

:

–

Or also

statically

:

var str;

str

String(“Static") toUpperCase();

str = String(“Static").toUpperCase();

// str = "STATIC"

4.9 HTML DOM

(6)

Predefined classes String

• Predefined classes: String

• Properties

length string length

–

length: string length.

• Methods

–

big(): sets the font bigger

–

big(): sets the font bigger

–

bold(): sets the font in bold

–

charAt(n): returns the character at position

n

–

match(c) : returns whether substring c belongs to the

string

–

substring(x,y): returns the substring from

x

to

y

both

3. BOM 4. DOM

g( ,y)

g

y

included (strings start in 0)

–

toLowerCase(): converts to lower case

toUpperCase(): converts to upper case

–

toUpperCase(): converts to upper case

–

valueOf() : returns the value of type string (important

when comparing strings)

i

()

h

bj

i

–

toString(): converts the object to a string

Introducción a la Ingeniería del Software y a los Sistemas de Información

10 March 2013

Javascript

• Predefined classes: Math

• Methods

Methods

–

abs(number): returns the absolute value

max(x y): returns the maximum between

x

and

y

–

max(x,y): returns the maximum between

x

and

y

–

min(x,y): returns the minimum between

x

and

y

pow(base exp): pow

–

pow(base, exp): pow

–

random(): returns a random number in [0,1]

d(

b

)

d t th

l

t i t

3. BOM 4. DOM

–

round(number): rounds to the closest integer

–

sin(number): function sin

–

sqrt(number): function square root

–

tan(number): function tangent

–

…

(7)

• Predefined classes: Array

• Properties

Properties

–

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 4. DOM

a = new Array (25); // creates an array with 25 elements

a = new Array (1,“iissi",true); // an array with 3 elements

a = new Array (“mystring"); // an array with one string

4.3 Node types

4.4 Elements 4.5 Traversing the tree

4.6 Finding

elements in the

–

Array with 3 rows and 6 columns?

a = new Array ( mystring ); // an array with one string

a = new Array (false); // an array with the element false

Array with 3 rows and 6 columns?

a = new Array (3);

for (i=0;i<3;i++) a[i]= new Array (6);

Introducción a la Ingeniería del Software y a los Sistemas de Información

12

//array access

a[i][j]

March 2013

Javascript

P

d fi

d l

D t

• Predefined classes: Date

• Methods

–

getDate(): returns the day of the current month as an

integer between 1 and 31

tD

()

t

th d

f th

t

k

–

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.

–

getMinutes(): returns the minutes of the current time as

3. BOM 4. DOM

an integer between 0 and 59.

–

getMonth(): returns the month of the current year as an

integer between 0 and 11

integer between 0 and 11.

–

getSeconds(): returns the seconds of the current minute

as an integer between 0 and 59.

g

–

getTime(): returns the time in milliseconds elapsed from

the 1st January 1970

4.9 HTML DOM

(8)

• Predefined classes: Date (cont.)

• Methods

–

getYear(): returns the current year as an integer

–

setDate(day, month): sets the day and month in the

se

a e(day,

o

) se s

e day a d

o

e

object Date in use.

–

toGMTString(): returns a string with the current date

g()

g

(GMT zone)

3. BOM 4. DOM

var f = new Date ();

var f = new Date (year, month);

var f = new Date (year, month, day);

var f new Date (year, month, day);

var f = new Date (year, month, day, hours);

var f = new Date (year, month, day, hours, minutes);

var f = new Date (year month day hours minutes seconds);

var f = new Date (year, month, day, hours, minutes, seconds);

Introducción a la Ingeniería del Software y a los Sistemas de Información

14 March 2013

Javascript

• Predefined classes: Date (cont.)

function dayOfTheWeek()

{

var today = new Date();

var day;

switch ( today.getDay() ) {

case 0: day = “Sunday";

break;

case 1: day = “Monday";

break;

2 d

“T

d

"

b

k

3. BOM 4. DOM

case 2: day = “Tuesday";

break;

case 3: day = “Wednesday";

break;

case 4: day = “Thursday"; break;

y

y ;

;

case 5: day = “Friday";

break;

case 6: day = "Saturday";

break;

}

return( day );

}

(9)

i

l

lik

h

Escuela Técnica Superior

de Ingeniería Informática Departamento de Lenguajes

• JavaScript is a programming language like any other

and it can be used in many different contexts.

• However, it has a widespread use in the web where

it is used to give dynamism to web pages.

• When used inside a web browser,

there are several available

predefined objects

–

Some objects are related to the

3. BOM 4. DOM

j

own web browser (BOM – Browser Object Model)

window.alert(“¡que viene IISSI!");

–

Others are related to the structure of the HTML

document (DOM) and can be accessed by means of

the object

document

:

<img id="imgmail" src="mail.jpg"/>

Introducción a la Ingeniería del Software y a los Sistemas de Información

16

document.getElementById("imgmail").src = "mail.jpg";

March 2013

Javascript

• JavaScript in context

h

l

Internet

1.7 Classes and

_http://

_{http://server com/page html}

_{server com/page html}

server.com

page.html

Internet

http://

http://server.com/page.html

server.com/page.html

se

e co

<html>

3. BOM 4. DOM

<html>

<head>…</head>

<body>

<h1>Page</h1>

</body>

/h

l

</html>

page.html

4.9 HTML DOM

(10)

• JavaScript in context (cont.)

_Internet

1.7 Classes and

_http://

_{http://server com/page html}

_{server com/page html}

server.com

Internet

http://

http://server.com/page.html

server.com/page.html

se

e co

Page

<html>

3. BOM 4. DOM

Page

<html>

<head>…</head>

<body>

y

<

<h1>Page</

h1>Page</h1>

h1>

</body>

/h

l

</html>

page.html

Introducción a la Ingeniería del Software y a los Sistemas de Información

18 March 2013

Javascript

• JavaScript in context (cont.)

h

l

Internet

1.7 Classes and

_http://

_{http://server com/page html}

_{server com/page html}

server.com

page.html

Internet

http://

http://server.com/page.html

server.com/page.html

se

e co

<html>

<head>…</head>

3. BOM 4. DOM

<body>

<h1>Page</h1>

i t

<script>

document.Write("Hello World!");

</script>

/script

</body>

</html>

page.html

(11)

• JavaScript in context (cont.)

_Internet

1.7 Classes and

_http://

_{http://server com/page html}

_{server com/page html}

server.com

Internet

http://

http://server.com/page.html

server.com/page.html

se

e co

<html>

<head>…</head>

Page

3. BOM 4. DOM

<body>

<h1>Page</h1>

i t

Page

<script>

document.Write("Hello World!");

</script>

/script

</body>

</html>

Introducción a la Ingeniería del Software y a los Sistemas de Información

20

page.html

March 2013

Javascript

• JavaScript in context (cont.)

_Internet

1.7 Classes and

_http://

_{http://server com/page html}

_{server com/page html}

server.com

Internet

http://

http://server.com/page.html

server.com/page.html

se

e co

<html>

<head>…</head>

Page

3. BOM 4. DOM

<body>

<h1>Page</h1>

i t

Page

Hello World!

<script>

document.Write("Hello World!");

</script>

/script

</body>

</html>

4.9 HTML DOM

D

(12)

Wh

d

J

S i t?

Escuela Técnica Superior

de Ingeniería Informática Departamento de Lenguajes

• Where do we use JavaScript?

–

In the HTML document

• Inside the element

head

1. What is JavaScript?

1.1 Comments 1.2 Data types 1.3 Variables

• Inside the element

head

• Inside the element

body

• As an event handler onevent=“code"

*

1.4 Functions

1.5 Structures of control 1.6 Conditionals 1.7 Classes and

• As the URL of a link href="javascript:code"

**

–

In a separated file

J

S i t

d

ithi

l

t

i t

h

ld b

• JavaScript code within an element

script

should be

placed inside HTML comments to avoid problems

with old web browsers

3. BOM 4. DOM

with old web browsers.

• In XHTML it must be enclosed in a section

CDATA

.

I

hi h

d

i J

S i t

d

t d?

• In which order is JavaScript code 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.

Introducción a la Ingeniería del Software y a los Sistemas de Información

22

*

Events and their handling are studied in the next lesson.

**

NOT RECOMMENDED.

March 2013

Javascript

• Script inside the HTML document (

body

)

<html>

<head>

<title>Document title</title>

<!– other header information -->

</head>

<body>

<script type="text/javascript">

3. BOM

4. DOM

<!--// JavaScript code

// >

4.3 Node types 4.4 Elements 4.5 Traversing the tree 4.6 Finding

elements in the

_{<! more document content}

_>

//-->

</script>

<!– more document content -->

</body>

</html>

/

(13)

• Script inside the HTML document (

head

)

<html>

<h

d>

<head>

<title>Document title</title>

<script type="text/javascript">

<script type= text/javascript >

<![CDATA[

// JavaScript code

]]>

</script>

3. BOM

4. DOM

</head>

<body>

</bod >

</body>

</html>

Introducción a la Ingeniería del Software y a los Sistemas de Información

24 March 2013

Javascript

• Script in a separated file

<html>

<h

d>

<head>

<title>Document title</title>

<script type="text/javascript" src=“mycode.js">

</script>

<!– other header information -->

</head>

<body>

3. BOM

4. DOM

<body>

<!– document content -->

</body>

</html>

// JavaScript

// code

4.9 HTML DOM

D

y

j

(14)

• Browser Object Model (BOM)

–

window: the window of the navigator.

–

screen: the screen.

–

navigator: the web browser itself.

–

history: the navigation history.

–

location: the URL of

window

navigator

location

the current page.

oca o

3. BOM 4. DOM

4.1 The DOM tree 4.2 DOM nodes 4 3 Node types 4.3 Node types 4.4 Elements 4.5 Traversing the tree 4.6 Finding elements in the elements in the tree 4.7 Modifying the tree 4.8 Event handling 4 9 HTML DOM Du rá n T o ro , 201 1 4.9 HTML DOM 5. Web references © Diseño de Amador D

Introducción a la Ingeniería del Software y a los Sistemas de Información

26 March 2013

Javascript

• Predefined objects: window

–

Represents the window of the navigator

• Properties

status: status bar message

–

status: status bar message

–

document: current HTML document

history: navigation history

–

history: navigation history

–

closed: true if the window is closed

l

th

b

f f

th t

t i

d i th

3. BOM 4. DOM

–

length: number of frames that are contained in the

window

frames an arra that contains all frames that are

–

frames: an array that contains all frames that are

contained in the window, i.e., returns an array of

objects of type Frame

4.9 HTML DOM 5. Web references

de

Amador

(15)

P

d fi

d bj

i d

• Predefined objects: window

• Methods

–

alert(msg): shows a window with a message

–

confirm(msg): shows a window with

g

an accept and a cancel button;

it returns true if accept has been

d

d f l

if

l h

b

d

pressed and false if cancel has been pressed.

–

prompt(msg,default): shows a window that prompts

a string with a

3. BOM 4. DOM

a string with a

default value

–

open(url,name,opt): opens a

new window in the web browser

–

close(): closes the window

–

navigate(url): go to url (only IE)

Introducción a la Ingeniería del Software y a los Sistemas de Información

28 March 2013

Javascript

P

d fi

d bj

t

i

t

• Predefined objects: navigator

–

Represents the navigator itself.

• Properties

–

appName: name of the navigator: Microsoft Internet

E

l

M

ill

N tS

Explorer, Mozilla, NetScape, …

–

appVersion: Netscape 5.0 (Windows; es-ES) Microsoft

Internet Explorer 4 0 (compatible; MSIE 6 0; Windows NT

Internet Explorer 4.0 (compatible; MSIE 6.0; Windows NT

5.0)

–

mimeTypes: an array with the MIME types (

Multipurpose

3. BOM 4. DOM

Internet Mail Extensions

) supported by the navigator

(

Application, Audio, Image, Message, Multipart, Text,

Video

)

Video

)

–

plugins: an array with the plugins that are installed in the

navigator

–

javaEnabled(): returns a boolean indicating whether the

navigator supports Java applets

4.9 HTML DOM

(16)

• Predefined objects: frame

–

Represents a frame.

• Properties

–

parent: the parent frame

control 1.6 Conditionals

1.7 Classes and

• Predefined objects: location

–

Represents the URL of the document displayed in

window

• Properties

3. BOM 4. DOM

p

–

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

t

b

–

port: port number

–

protocol: protocol (http, ftp,..)

–

href: URL that can be dynamically changed

Introducción a la Ingeniería del Software y a los Sistemas de Información

30 March 2013

Javascript

What is DOM?

• Designed to access to XML and HTML documents

Designed to access to XML and HTML documents

• W3C standard ( http://www.w3.org/DOM/

)

Al

k

W3CDOM

• Also known as W3CDOM

• Three levels:

level 1, level 2, level 3

• Each navigator implements a version of DOM

• From IE 6 (Trident) and browsers based on Gecko

3. BOM 4. DOM

(Mozilla, Firefox) support W3CDOM

Trident

Gecko

KHTML

Presto

iCab

L1

6.0

1.0 Yes

7.0 Yes

L2

Minor

Major

L3

No

Minor

4.9 HTML DOM 5. Web references

de

Amador

(17)

••

The

The DOM

DOM tree

tree

Menú 10-02-2012

document

<html>

<head>

Primeros •Pasta •Ensalada Segundos

head

1.7 Classes and

document

(html)

<title>Menú Cafeta</title>

</head>

b d

Segundos •Lomo •Flamenquin

title

body

head

title

”Menú Cafeta”

<body>

<h1>Menú 10-02-2012</h1>

Primeros

<ul>

ul

body

h1

3. BOM 4. DOM

body

h1

”Menú 10-02-2012”

<ul>

<li>Pasta</li>

<li>Ensalada</li>

</ul>

li

ul

”Primeros”

/

Segundos

<ul>

<li>Lomo</li>

li

”Pasta”

li

<li>Flamenquin</li>

</ul>

</body>

”Ensalada”

Introducción a la Ingeniería del Software y a los Sistemas de Información

32

</html>

March 2013

Javascript

••

DOM

DOM nodes

nodes

document

(html)

Elements

head

title

”Menú Cafeta”

Elements

body

h1

”Menú 10-02-2012”

h1

ul

”Primeros”

3. BOM 4. DOM

li

”Pasta”

li

Text

”Menú 10-02-2012”

”Ensalada”

”Primeros”

elements in the tree 4.7 Modifying the tree 4.8 Event handling 4 9 HTML DOM Du rá n T o ro , 201 1 4.9 HTML DOM

(18)

Node types

…<div id=“

…<div id=“MyDiv

MyDiv”>DOM

”>DOM iis easy</

s easy</div>…

div>…

1.7 Classes and

Element

Attribute

Text

• Elements

Represent an HTML tag

3. BOM 4. DOM

–

Represent an HTML tag

• Attributes

div

”M Di ”

id

–

Provide access to the attributes

of a tag.

”DOM is easy”

”MyDiv”

• Text

–

Represents strings.

Introducción a la Ingeniería del Software y a los Sistemas de Información

34 March 2013

Javascript

••

Elements

• • Properties

Properties

IMG

– tagName (

READ ONLY

)

• Contains the name of the element’s tag

• • Methods

Methods

– getAttribute(n)

g

( )

• Returns the attribute with name “n”

– setAttribute(n,v)

3. BOM 4. DOM

( , )

• Sets the value of attribute “n” to “v”

<script type="text/javascript">

<img src=“homer.jpg”/>

p

yp

/j

p

<!—

// …

// image contains the object of the element

alert(image.tagName);

image.setAttribute(“src”,”bart.jpg”);

//-->

</script>

(19)

••

Traversing

Traversing the

the tree

tree

The

The array

array c

childNodes

childNodes gives

gives

access

access to

to the

the child

child nodes

nodes of

of

element

1. What is JavaScript?

1.1 Comments 1.2 Data types

1.3 Variables

The

The object

object d

document.body

access

access to

to the

the child

child nodes

nodes of

of

an

an element

element..

_subelem1

subelem2

element.childNodes[0];

element.childNodes[1];

provides

provides direct

direct access

access to

to

the

the document

document body

body

subelem3

element.childNodes[2];

1.7 Classes and

2. JavaScript and the

web

<script type="text/javascript">

document

body

3. BOM

4. DOM

<!--var e1 = document.body.childNodes[0];

var root = document.body;

h1

”Menú 10-02-2012”

var e2 = root.childNodes[1].childNodes[0];

var list = root.childNodes[1];

li t hildN d

[1] hildN d

[0]

Menú 10 02 2012

ul

li

list.childNodes[1].childNodes[0];

//-->

</script>

li

”Pasta”

Introducción a la Ingeniería del Software y a los Sistemas de Información

36

</script>

li

”Ensalada”

March 2013

Javascript

••

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)

g

y

g

(

g

)

<script type="text/javascript">

<!--1.7 Classes and objects 1.8 Predefined classes

var images = document.getElementsByTagName(“img”);

var firstImage = images[0];

//-->

</script>

3. BOM 4. DOM

• • By

By means

means of

of the

the id of

id of the

the element

element

tEl

tB Id(id)

</script>

– g

getElementById(id)

<script type="text/javascript">

<!--elements in the tree 4.7 Modifying the tree 4.8 Event handling 4 9 HTML DOM Du rá n T o ro , 201 1

<!--var div = document.getElementById(“mainDiv”);

//-->

</script>

4.9 HTML DOM

D

(20)

••

Finding

Finding elements

elements in

in the

the tree

tree ((

examples

))

1. What is JavaScript? 1.1 Comments 1.2 Data types

1.3 Variables

_{<script type="text/javascript">}

<html>

<head>

<title>Menú Cafeta</title>

<script type= text/javascript >

<!--var items = document.getElementsByTagName(“li”);

var myItem = items[1];

<title>Menú Cafeta</title>

</head>

<body>

y

[ ];

var myDiv = document.getElementById(“primeros”);

var list = myDiv.getElementsByTagName(“ul”)[0];

<h1>Menú 10-02-2012</h1>

<div id=“primeros”>

Primeros

3. BOM 4. DOM

var items2 = list.getElementsByTagName(“li”);

//-->

<ul>

<li>Pasta</li>

<li>Ensalada</li>

l

</script>

</ul>

</div>

</body>

</html>

Introducción a la Ingeniería del Software y a los Sistemas de Información

38 March 2013

Javascript

••

Modifying

Modifying the

the DOM

DOM tree

tree

• • All

All nodes

nodes have

have an

an interface

interface to

to

insertBefore

• • 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…)

…)

replaceChild

removeChild

appendChild

1.7 Classes and

• • To

To create

create new

new elements

elements you

you must

must

_{createElement}

1.7 Classes and

• • To

To create

create new

new elements

elements,

, you

you must

must

use

use the

the parent

parent node

node ((d

document

document))

..

createElement

createTextNode

3. BOM 4. DOM

<script type="text/javascript">

<!--var newTextNode;

newTextNode = document.createTextNode("Hello World! ");

d

b d

dChild(

T

N d )

document.body.appendChild(newTextNode);

//-->

</script>

(21)

••

Event

Event handling

handling (L2)

(L2)

<html>

<head>

<title>Document title</title>

</head>

<body>

<marca … onevent="JavaScript code">

…

3. BOM 4. DOM

<!– more document content -->

</marca>

</body>

</html>

It is usually a call to a

function that has been

previously declared in a

script

block in either the

section

head

or in an

Introducción a la Ingeniería del Software y a los Sistemas de Información

40

external file

section

head

or in an

external file.

March 2013

Javascript

••

HTML DOM

• • It

It is

is an

an extension

extension to

to the

the basic

basic DOM

DOM

1. What is JavaScript? 1.1 Comments 1.2 Data types

1.3 Variables

Document

Form[]

1.7 Classes and

Plugin[]

Textarea

Text

FileUpload

Password

Applet[]

Anchor[]

Text

Password

Reset

Radio

3. BOM 4. DOM

Anchor[]

Area[]

Hidden

Checkbox

Button

Select

4.3 Node types 4.4 Elements 4.5 Traversing the tree 4.6 Finding

elements in the

Link[]

Image[]

_Submit

Options[]

Layer[]

4.9 HTML DOM

(22)

P

d fi

d bj

d

• Predefined objects: document

–

Represents the document that is being displayed.

• Properties

–

bgColor: integer value with the code of the background

g

color or string with the color ("#12345", "red")

–

fgColor: identifies the document text color

–

forms: an array that contains all elements

form

of the

document

3. BOM 4. DOM

–

images: array that contains all images in the

document

lastModified: string with the last modification date

–

lastModified: string with the last modification date

–

links: array that contains all links in the document

referrer: URL of the link from which the user reached

–

referrer: URL of the link from which the user reached

the document.

–

title: string with document title

Introducción a la Ingeniería del Software y a los Sistemas de Información

42 March 2013

Javascript

• Predefined objects: document (cont.)

• Methods

Methods

–

close(): closes the document (important to do it in

written)

–

write(str), 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

3. BOM 4. DOM

g

y ( )

specified ID

<img id="imgmail" src="mail jpg"/>

<img id= imgmail src= mail.jpg />

document.getElementById("imgmail").src = "mail.jpg";

elements in the tree 4.7 Modifying the tree 4.8 Event handling 4 9 HTML DOM Du rá n T o ro , 201 1 4.9 HTML DOM 5. Web references de Amador D

(23)

• Predefined objects: link

–

Represents the links.

• Properties

target: string with the target name

–

target: string with the target name

–

href: string with the URL of the link

3. BOM 4. DOM

4.1 The DOM tree 4.2 DOM nodes 4 3 Node types 4.3 Node types 4.4 Elements 4.5 Traversing the tree 4.6 Finding elements in the elements in the tree 4.7 Modifying the tree 4.8 Event handling 4 9 HTML DOM Du rá n T o ro , 201 1 4.9 HTML DOM 5. Web references © Diseño de Amador D

Introducción a la Ingeniería del Software y a los Sistemas de Información

44 March 2013

Javascript

• Predefined objects: image

–

Represents the images.

• Properties

border: integer with the value of the

border

of the

–

border: integer with the value of the

border

of the

image (in pixels)

–

complete: boolean that indicates whether 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 4. DOM

src: it refers to the content of the image itself

4.3 Node types 4.4 Elements 4.5 Traversing the tree 4.6 Finding elements in the elements in the tree 4.7 Modifying the tree 4.8 Event handling 4 9 HTML DOM Du rá n T o ro , 201 1 4.9 HTML DOM