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? – document.the_image.src=‘ ~zhaoza/sun.gif '; –document.writeln(“ test ”); 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: change 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 DOMnodes How you can walk the DOM tree from node to nodewalk the DOM tree How to get a specific node and how to change its value or attributes.getchange How to create nodes yourself, the ultimate purpose of the new DOM.create nodes

What are the nodes of DOMnodes In the Level 1 DOM, each object, whatever it may be exactly, is a Node. So if you do This is a paragraph 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 This is a paragraph 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 structureDynamic Website structure: Placeholders and separated JavaScript files AJAX Foundations: JavaScript and DOM I love you! // 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 structureDynamic Website structure: Placeholders and separated JavaScript files Morejsdom.html: AJAX Foundations: More JavaScript and DOM Hello Dude! Here's a cool list of colors for you: Morejsdos.js function process() { // Create the HTML code var string; string = " " + " Black " + " Orange " + " Pink " + " "; // obtain a reference to the element on the page myDiv = document.getElementById("myDivEleme nt"); // add content to the element myDiv.innerHTML = string; }

Dynamic Website structure: Placeholders and separated JavaScript files Access the named element programmatically from the JavaScript function. Having the JavaScript code execute after the HTML template is loaded, so you can access the element (no HTML elements are accessible from JavaScript code that executes referenced from the element). You will do that by calling JavaScript code from the element's onload event. Group the JavaScript code in a function for easier code handling.

Using DOM method Using DOM method to generate HTML structures Evenmorejs.html: AJAX Foundations: Even More JavaScript and DOM 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 element oUl = document.createElement("ul") // create the first element and add a text node to it oLiBlack = document.createElement("li"); oBlack = document.createTextNode("Black"); oLiBlack.appendChild(oBlack); // create the second element and add a text node to it oLiOrange = document.createElement("li"); oOrange = document.createTextNode("Orange"); oLiOrange.appendChild(oOrange); // create the third element and add a text node to it oLiPink = document.createElement("li"); oPink = document.createTextNode("Pink"); oLiPink.appendChild(oPink); // add the elements as children to the element oUl.appendChild(oLiBlack); oUl.appendChild(oLiOrange); oUl.appendChild(oLiPink); // obtain a reference to the element on the page myDiv = document.getElementById("myDivElement"); // add content to the element myDiv.appendChild(oHello); myDiv.appendChild(oUl); }

Formatting with CSS AJAX Foundations: CSS Product Name Airplane Big car

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 Getting and using a window reference <!-- 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 --> A new window has been opened and moved to the background. Bring it forward Put it backward

Messing with the DOM in other Windows Image Remote <!-- 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 -->

slide_show_main.html Remote Image Swapping

Getting Framed In JavaScript, Frames are treated just like windows Main.html: Using Frames with JavaScript Frames_example_controls.html: Frames Example Controls <a href="#" onClick="top.target_frame.document.writeln('Monkey do! ');">Monkey see

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) URL Slideshow <!-- 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 a_url = " + 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 -->

Functions(Timer.html) Function with No Parameters <!-- 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 --> time!