JavaScript DOM and CSS

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.

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). What are the nodes of DOM

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.firstChildaccesses 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];

<!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/xhtml11.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("myDivElement"); // add content to the <div> element myDiv.innerHTML = string; } Dynamic Website structure: Placeholders and separated JavaScript files

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.

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); } Using DOM method to generate HTML structures

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>

/ 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; } Formatting with CSS

Communicating between Windows <html><head><title>Getting and using a window reference</title> <script language="JavaScript">  </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">  </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">  </script> </head> </html>

Functions(Timer.html) <html> <head> <title>Function with No Parameters</title> <script langauge="JavaScript">  </script> </head> <body> <a href="#" onClick="announceTime(); return false;">time!</a> </body> </html>

JavaScript DOM and CSS