JavaScript DOM and CSS

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

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

79 εμφανίσεις

JavaScript DOM and CSS


What we should learn in this lesson


What is DOM
-
The JavaScript Document Object
Module, its architectures, methods ..


Dynamic Website structure: Placeholders and
separated JavaScript files


Using DOM method to generate HTML
structures


Formatting with CSS


One JavaScript DOM exmple


Why the following codes works?


<img src="http://.../~zhaoza/monkey.gif"
name="the_image"><br>


document.the_image.src=‘
http://www.sbu.ac.uk/

~zhaoza/sun.gif ';


document.writeln(“<h1>test</h1>”);


DOM is the way JavaScript describes Web
pages, and it lies at the heart of all
JavaScript programming


The JavaScript Document Object
Model


JavaScript is an Object
-
oriented programming language. The main
idea of OOP is that information is organized in terms of
objects
.
JavaScript is wonderful because it comes with a built
-
in library of
objects. For example, a window is an object.



Object properties


Objects have properties that describe them. For example the windows
object has properties such as its name, the words in its status bar, the
URL of the document inside the window, and the window’s document.



Objects methods


In addition to properties, objects also have methods. Methods are the
actions an object knows how to take. For example, Windows know how
to open other Windows:
window.open("URL,""name,""features").

This
tells JavaScript to use the open method of the Window object to open a
new window. For the windows object, we already learn its methods such
as: open(), alert(), prompt(), confirm() etc. Here introduces two more,
focus and blur, The
focus

method moves a window that's behind other
windows to the front. The
blur

method does the reverse


it moves a
window behind other windows.



One neat thing about objects is that the properties of an object can
be objects too. For example, windows have a property called
document that refers to the actual HTML document in the window.
This document property is itself an object that has properties and
methods of its own. We saw an example of this when we talked
about image swapping. Go back to the last lesson, we learned that
you can do an image swap like this:


<a href="#" onMouseOver=

"window.document.the_image.src='button_d.gif';">

change</a>

That long string, window.document.the_image.src='button_d.gif',
translates into: "Find the document property of the window, find
the_image property of the document, find the src property of
the_image, and set it to button_d.gif.“


It may seem like a lot of detail to keep track of. The JavaScript
Document Object Model describes a small hierarchy of objects.
Here it is:


JavaScript’s objects


The top box of the diagram represents your
browser window. Following the line from that box
down, you'll see it connects to seven more
boxes. These are the properties of the browser
window.


The sixth box here, "document," represents the
contents of your window. If you follow the little
line leading out of the document box, you'll see it
connects to six more boxes. These are the
properties of the document object.


Introduction to DOM


The
Document Object Model

(DOM) is the model that
describes how all elements in an HTML page, like input
fields, images, paragraphs etc., are related to the
topmost structure: the document itself. By calling the
element by its proper DOM name, we can influence it.


The purpose of the DOM:


It has been developed by the W3C to provide any programming
language with access to each part of an XML document.


What are the
nodes

of DOM


How you can
walk the DOM tree

from node to node


How to
get

a specific node and how to
change

its value
or attributes.


How to
create nodes

yourself, the ultimate purpose of
the new DOM.

What are the
nodes

of DOM


In the Level 1 DOM, each object, whatever
it may be exactly, is a
Node
. So if you do


<P>This is a paragraph</P>



you have created two nodes: an
element

P
and a
text node

with content '
This is a
paragraph
'.


The
text node

is inside the element, so it is
considered a
child node

of the element.
Conversely, the
element

is considered the
parent node

of the
text node
.


If you do


<P>This is a <B>paragraph</B></P>



the element node P has two children, one of
which has a child of its own:


The element node P also has its own
parent, this is usually the document,
sometimes another element like a DIV. So
the whole HTML document can be seen as
a tree consisting of a lot of nodes, most of
them having child nodes (and these, too,
can have children).


DOM tree structure

Walking through the DOM tree


Knowing the exact structure of the DOM tree, you can walk through it
in search of the element you want to influence.


For instance, assume the element node P has been stored in the variable
x Then if we want to access the BODY we do


x.parentNode


We take the parent node of x and do something with it.


To reach the B node:


x.childNodes[1]



childNodes is an array that contains all children of the node x. Of course
numbering starts at zero, so childNodes[0] is the text node 'This is a' and
childNodes[1] is the element node B.


Two special cases:
x.firstChild

accesses the first child of x (the text node),
while
x.lastChild

accesses the last child of x (the element node B).


So supposing the P is the first child of the body, which in turn is the
first child of the document, you can reach the element node B by either
of these commands:


document.firstChild.firstChild.lastChild;


document.firstChild.childNodes[0].lastChild;


document.firstChild.childNodes[0].childNodes[1];


Dynamic Website structure
: Placeholders
and separated JavaScript files


<!DOCTYPE html PUBLIC "
-
//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/
DTD/xhtml11.dtd">

<html>


<head>


<title>AJAX Foundations:
JavaScript and DOM</title>


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


</head>


<body>


I love you!


</body>

</html>




// declaring new variables

var date = new Date();

var hour = date.getHours();

// demonstrating the if statement

if (hour >= 22 || hour <= 5)


document.write("Goodnight,
world!");

else


document.write("Hello, world!");


Dynamic Website structure
: Placeholders
and separated JavaScript files

Morejsdom.html:


<!DOCTYPE html PUBLIC "
-
//W3C//DTD
XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtm
l11.dtd">

<html>


<head>


<title>AJAX Foundations: More JavaScript
and DOM</title>


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


</head>


<body onload="process()">


Hello Dude! Here's a cool list of colors for
you:


<br />


<div id="myDivElement" />


</body>

</html>


Morejsdos.js


function process()

{


// Create the HTML code


var string;


string = "<ul>"


+ "<li>Black</li>"


+ "<li>Orange</li>"


+ "<li>Pink</li>"


+ "</ul>";


// obtain a reference to the <div> element on
the page


myDiv =
document.getElementById("myDivEleme
nt");


// add content to the <div> element


myDiv.innerHTML = string;

}


Dynamic Website structure: Placeholders
and separated JavaScript files


Access the named <div> element
programmatically from the JavaScript function.


Having the JavaScript code execute after the
HTML template is loaded, so you can access the
<div> element (no HTML elements are
accessible from JavaScript code that executes
referenced from the <head> element). You will
do that by calling JavaScript code from the
<body> element's
onload

event.


Group the JavaScript code in a function for
easier code handling.



Using DOM method
to generate
HTML structures

Evenmorejs.html:


<!DOCTYPE html PUBLIC "
-
//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>


<head>


<title>AJAX Foundations: Even More JavaScript and DOM</title>


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


</head>




<body onload="process()">


<div id="myDivElement" />


</body>

</html>


Evenmoreisdos.js:


function process()

{


// create the first text node


oHello = document.createTextNode


("Hello Dude! Here's a cool list of colors for you:");



// create the <ul> element


oUl = document.createElement("ul")



// create the first <ui> element and add a text node to it


oLiBlack = document.createElement("li");


oBlack = document.createTextNode("Black");


oLiBlack.appendChild(oBlack);




// create the second <ui> element and add a text node to it


oLiOrange = document.createElement("li");


oOrange = document.createTextNode("Orange");


oLiOrange.appendChild(oOrange);



// create the third <ui> element and add a text node to it


oLiPink = document.createElement("li");


oPink = document.createTextNode("Pink");


oLiPink.appendChild(oPink);



// add the <ui> elements as children to the <ul> element


oUl.appendChild(oLiBlack);


oUl.appendChild(oLiOrange);


oUl.appendChild(oLiPink);



// obtain a reference to the <div> element on the page


myDiv = document.getElementById("myDivElement");



// add content to the <div> element


myDiv.appendChild(oHello);


myDiv.appendChild(oUl);

}



Formatting with CSS

<!DOCTYPE html PUBLIC "
-
//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>


<head>


<title>AJAX Foundations: CSS</title>


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


<link href="styles.css" type="text/css" rel="stylesheet"/>



</head>




<body>


<table id="table">


<tr>


<th id="tableHead">


Product Name


</th>


</tr>


<tr>


<td id="tableFirstLine">


Airplane


</td>


</tr>


<tr>


<td id="tableSecondLine">


Big car


</td>


</tr>


</table>


<br />


<input type="button" value="Set Style 1" onclick="setStyle1();" />


<input type="button" value="Set Style 2" onclick="setStyle2();" />


</body>

</html>


Formatting with CSS

/ Change table style to style 1

function setStyle1()

{


// obtain references to HTML elements


oTable = document.getElementById("table");


oTableHead = document.getElementById("tableHead");


oTableFirstLine = document.getElementById("tableFirstLine");


oTableSecondLine = document.getElementById("tableSecondLine");


// set styles


oTable.className = "Table1";


oTableHead.className = "TableHead1";


oTableFirstLine.className = "TableContent1";


oTableSecondLine.className = "TableContent1";

}


// Change table style to style 2

function setStyle2()

{


// obtain references to HTML elements


oTable = document.getElementById("table");


oTableHead = document.getElementById("tableHead");


oTableFirstLine = document.getElementById("tableFirstLine");


oTableSecondLine = document.getElementById("tableSecondLine");


// set styles


oTable.className = "Table2";


oTableHead.className = "TableHead2";


oTableFirstLine.className = "TableContent2";


oTableSecondLine.className = "TableContent2";

}


.Table1

{


border: DarkGreen 1px solid;


background
-
color: LightGreen;

}

.TableHead1

{


font
-
family: Verdana, Arial;


font
-
weight: bold;




font
-
size: 10pt;

}

.TableContent1

{


font
-
family: Verdana, Arial;


font
-
size: 10pt;

}


.Table2

{


border: DarkBlue 1px solid;


background
-
color: LightBlue;

}

.TableHead2

{


font
-
family: Verdana, Arial;


font
-
weight: bold;


font
-
size: 10pt;

}

.TableContent2

{


font
-
family: Verdana, Arial;


font
-
size: 10pt;

}


Communicating between Windows

<html><head><title>Getting and using a window reference</title>

<script language="JavaScript">

<!
--

hide me


// open a new window, In order to communicate with a window using

// JavaScript, you need a reference to that window.

var new_window =
window.open("hello.html","html_name","width=200,height=200");


//This opens a little window and assigns the variable new_window

//to refer to it. And then blur the new window

new_window.blur();


// show me
--
>

</script>

</head>

<body>

<h1>A new window has been opened and moved to the background.</h1>

<a href="#" onMouseOver="new_window.focus();">Bring it forward</a><br>

<a href="#" onMouseOver="new_window.blur();">Put it backward</a><br>


</body>

</html>

Messing with the DOM in other
Windows

<html>

<head><title>Image Remote</title>


<script language="JavaScript">

<!
--

hide me

//opens a new window and assigns the variable display_window to that window

var display_window = window.open("slide_show_main.html","display_window");

window.focus();


// stop hiding
--
>

</script>

</head>

<body>

<a href="#" onClick="
display_window
.document.
main_image
.src= 'sky.jpg';return false;"> <img
src="sky.jpgf"></a>

<a href="#" onClick="
display_window
.document.
main_image
.src= 'sun.jpg';return false;"> <img
src="sun.jpg"></a><br>

<a href="#" onClick="
display_window
.document.
main_image
.src= 'thau.jpg';return false;"> <img
src="thau.jpg"></a>

<a href="#" onClick="
display_window
.document.
main_image
.src= 'monkey.jpg';return false;"><img
src="monkey.jpg"></a><br>

</body>


</html>


slide_show_main.html

<html><head><title>Remote
Image Swapping
</title></head>


<body>

<div align="center">

<img src="sky.jpg"
name="
main_image
"
height="400" width="400">

</div>

</body>

</html>


Getting Framed


In JavaScript, Frames are treated just like windows


Main.html:

<html><head><title>Using Frames with
JavaScript</title></head>

<frameset rows="25%,*">

<frame src="frames_example_controls.html"
name="control_frame">

<frame src="blank.html" name="target_frame">

</frameset>

</html>


Frames_example_controls.html:

<html><head><title>Frames Example
Controls</title></head>

<body>


<a href="#"

onClick="top.target_frame.document.writeln('Monkey
do!<br>');">Monkey see</a>


</body>

</html>


Some other JavaScript Syntax


Loops


While loops:

while (some test is true) {

do the stuff inside the curly braces

}


For loops:


for (initial value; test; increment)


{ do this stuff; }


Arrays
-

Arrays are lists.


An example to create an array of colors:

var colors = new Array("red","blue","green");


good thing about arrays is that elements of an array can be accessed by
number. The first element is number 0 and can be accessed like this:


var the_element = colors[0];


After you execute this line of JavaScript, the variable the_element will hold
the string "red."


An example for Loops and
Arrays(slide show)

<html><head><title>URL Slideshow</title>


<script language = "JavaScript">

<!
--

hide me


var url_names = new Array("hits.org","awaken.org","bianca.com");

var a_url;


for (loop = 0; loop < url_names.length; loop++)

{



// make the name of a url, for example http://www.hits.org


a_url = "http://www." + url_names[loop];



// open a window


var new_window=open(a_url,"new_window","width=300,height=300");



// wait for the click


alert("Hit OK for the next site");



}

// show me
--
>

</script>

</head>

</html>

Functions(Timer.html)


<html> <head> <title>Function with No Parameters</title>


<script langauge="JavaScript">


<!
--

hide me



function announceTime() { //get the date, the hour, minutes, and seconds




var the_date = new Date();




var the_hour = the_date.getHours();




var the_minute = the_date.getMinutes();




var the_second = the_date.getSeconds();




//put together the string and alert with it




var the_time = the_hour + ":" + the_minute + ":" + the_second;




alert("The time is now: " + the_time); }


// show me
--
>


</script>


</head>


<body>



<a href="#" onClick="announceTime(); return false;">

time!</a>


</body>


</html>