Lab. 1

spongereasonInternet και Εφαρμογές Web

12 Νοε 2013 (πριν από 7 χρόνια και 8 μήνες)

240 εμφανίσεις

CS216

Lab. 1



You need
certain software
on your workstations in order to make effective use of the lab environment.


1)

Download the latest version of FireFox
(version 2.0
+
)
, and install it, select the custom radio button, check
the
box “Developer Tools” and
finish the installation.

2)

Restart FireFox, select Tools, Extensions, Get More, search for and install Execute JS,

3)

Go to
www.mozilla.org/projects/venkman

install the
Venkman
JavaScript Debugger

for Fi
reFox

4)

Go to livehttpheaders.mozdev.org, click installation, and click and install
Install version xxx

of
LiveHTTPHeaders

now

5)

Create the following xhtml file

(call it hello.xhtml)
:


<?xml

version=
"1.0"

encoding=
"iso
-
8859
-
1"
?>

<!DOCTYPE

html PUBLIC
"
-
//W3
C//DTD XHTML 1.1//EN"


"
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd
">

<html

xmlns=
"
http://www.w3.org/1999/xhtml
">

<!
--

Created on: 1/24/2006
--
>

<head>




<title>
Example of Using Dom

and JavaScript
</title>


</head>

<body>

<p

id =
'hello'>
hello
</p>

<div

id =
'empty'></div>

<p

id =
'station1'>
This is station 1
</p>


<br

/><br

/>

<div

id=
'station2'>
This is station 2
</div>



</body>

</html>

6)

Load the file into FireFox, then select Tools, Dom Inspector and locate the nodes
inside the body node
for the id
tags
and
capture the node tree, (
use alt printscreen)

embed the tree in Word
.

7)

Create the css file hello.css containing:

@charset

"iso
-
8859
-
1"
;



.declared
{




color
:

red
;




font
-
family
:

arial
;




font
-
weight
:

normal
;




font
-
size
:

16
px
;




}


.programmed
{




color
:

blue
;




font
-
family
:

helvetica
;




font
-
weight
:

bold
;




font
-
size
:

10
px
;




}



















8)

Create the file hello.js containing:

window
.
onload
=
function
()
{


var

hello
=
document
.
getElementById
(
'hello'
);


hello
.
classN
a
me
=
'declared'
;




var

empty
=
d
ocument
.
getElementById
(
'empty'
);


addNode
(
empty
,

"reader of"
);


addNode
(
empty
,

"Ajax in Action"
);




var

children
=
empty
.
childNodes
;


for
(
var

i

=

0
;

i

<

children
.
length
;

i
++)
{



children
[
i
].
className
=
'programmed'
;



}





empty
.
style
.
bo
r
der
=
'solid gre
en 2px'
;


empty
.
style
.
width
=
"200px"
;


}




function

addNode
(
el
,

text
)
{



var

childEl

=

document
.
createElement
(
"div"
);



el
.
appendChild
(
childEl
);



var

txtNode
=
document
.
createTextNode
(
text
);



childEl
.
appendChild
(
txtNode
);



}


9)

Modify hello.xhtml
by adding in the head section:

<link rel="StyleSheet" type="text/css" href="hello.css" />


<script type='text/javascript' src = 'hello.js'></script>

10)


Load hello.xhtml into FireFox and redo the DOM tree. Notice the new nodes
that where

added by the javascr
ipt
code!

11)

Modify
the javascript
file
to
change the class of station1 to declared and
place a
yellow 4px
box
having a width
of 150px
around
the
station1

section of the document, then change the class of station2 to programmed and
place an orange 1px box

ha
ving a width of 125px around the sta
t
ion2 section of the document.

12)

Zip the
word file and
files hello.cs, hello.js and hello.xhtml and attach them to an email to kuroskit@ecc.edu , in
the subject heading have the ph
rase “CS216 Lab.1”. Due date 2/
4/08


9)