JavaScript DOM and CSS

1
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

2
One JavaScript DOM exmple

• Why the following codes works?
• ltimg src"http//.../zhaoza/monkey.gif"
  name"the_image"gtltbrgt
• document.the_image.src http//www.sbu.ac.uk/
  zhaoza/sun.gif '
• document.writeln(lth1gttestlt/h1gt)
• DOM is the way JavaScript describes Web pages,
  and it lies at the heart of all JavaScript
  programming

3
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 windows
  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,""feat
  ures"). 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.

4

• 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
• lta href"" onMouseOver"window.document.the_ima
  ge.src'button_d.gif'"gtchangelt/agtThat long
  string, window.document.the_image.src'button_d.gi
  f', 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

5
(No Transcript)
6
JavaScripts 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.

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

8
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
• ltPgtThis is a paragraphlt/Pgt
• 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
• ltPgtThis is a ltBgtparagraphlt/Bgtlt/Pgt
• 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).

9
DOM tree structure
10
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.childNodes1
• childNodes is an array that contains all
  children of the node x. Of course numbering
  starts at zero, so childNodes0 is the text node
  'This is a' and childNodes1 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.childNodes0.lastChild
• document.firstChild.childNodes0.childNodes1

11
Dynamic Website structure Placeholders and
separated JavaScript files

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"gt
• lthtmlgt
• ltheadgt
• lttitlegtAJAX Foundations JavaScript and
  DOMlt/titlegt
• ltscript type"text/javascript"
  src"jsdom.js"gtlt/scriptgt
• lt/headgt
• ltbodygt
• I love you!
• lt/bodygt
• lt/htmlgt

• // declaring new variables
• var date new Date()
• var hour date.getHours()
• // demonstrating the if statement
• if (hour gt 22 hour lt 5)
• document.write("Goodnight, world!")
• else
• document.write("Hello, world!")

12
Dynamic Website structure Placeholders and
separated JavaScript files

• Morejsdom.html
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"gt
• lthtmlgt
• ltheadgt
• lttitlegtAJAX Foundations More JavaScript and
  DOMlt/titlegt
• ltscript type"text/javascript"
  src"morejsdom.js"gtlt/scriptgt
• lt/headgt
• ltbody onload"process()"gt
• Hello Dude! Here's a cool list of colors for
  you
• ltbr /gt
• ltdiv id"myDivElement" /gt
• lt/bodygt
• lt/htmlgt

• Morejsdos.js
• function process()
• // Create the HTML code
• var string
• string "ltulgt"
• "ltligtBlacklt/ligt"
• "ltligtOrangelt/ligt"
• "ltligtPinklt/ligt"
• "lt/ulgt"
• // obtain a reference to the ltdivgt element on
  the page
• myDiv document.getElementById("myDivElement")
  
• // add content to the ltdivgt element
• myDiv.innerHTML string

13
Dynamic Website structure Placeholders and
separated JavaScript files

• Access the named ltdivgt element programmatically
  from the JavaScript function.
• Having the JavaScript code execute after the HTML
  template is loaded, so you can access the ltdivgt
  element (no HTML elements are accessible from
  JavaScript code that executes referenced from the
  ltheadgt element). You will do that by calling
  JavaScript code from the ltbodygt element's onload
  event.
• Group the JavaScript code in a function for
  easier code handling.

14
Using DOM method to generate HTML structures

• Evenmorejs.html
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"gt
• lthtmlgt
• ltheadgt
• lttitlegtAJAX Foundations Even More JavaScript
  and DOMlt/titlegt
• ltscript type"text/javascript"
  src"evenmorejsdom.js"gtlt/scriptgt
• lt/headgt
• ltbody onload"process()"gt
• ltdiv id"myDivElement" /gt
• lt/bodygt
• lt/htmlgt
• Evenmoreisdos.js
• function process()
• // create the first text node

• // create the second ltuigt element and add a
  text node to it
• oLiOrange document.createElement("li")
• oOrange document.createTextNode("Orange")
• oLiOrange.appendChild(oOrange)
• // create the third ltuigt element and add a text
  node to it
• oLiPink document.createElement("li")
• oPink document.createTextNode("Pink")
• oLiPink.appendChild(oPink)
• // add the ltuigt elements as children to the
  ltulgt element
• oUl.appendChild(oLiBlack)
• oUl.appendChild(oLiOrange)
• oUl.appendChild(oLiPink)
• // obtain a reference to the ltdivgt element on
  the page
• myDiv document.getElementById("myDivElement")
  

15
Formatting with CSS

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"gt
• lthtmlgt
• ltheadgt
• lttitlegtAJAX Foundations CSSlt/titlegt
• ltscript type"text/javascript"
  src"csstest.js"gtlt/scriptgt
• ltlink href"styles.css" type"text/css"
  rel"stylesheet"/gt
• lt/headgt
• ltbodygt
• lttable id"table"gt
• lttrgt
• ltth id"tableHead"gt
• Product Name
• lt/thgt
• lt/trgt
• lttrgt
• lttd id"tableFirstLine"gt
• Airplane
• lt/tdgt

16
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("table
  FirstLine")
• oTableSecondLine document.getElementById("tabl
  eSecondLine")
• // 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

• .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

17
Communicating between Windows

• lthtmlgtltheadgtlttitlegtGetting and using a window
  referencelt/titlegt
• ltscript language"JavaScript"gt
• lt!-- 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_na
  me","width200,height200")
• //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 --gt
• lt/scriptgt
• lt/headgt
• ltbodygt
• lth1gtA new window has been opened and moved to the
  background.lt/h1gt
• lta href"" onMouseOver"new_window.focus()"gtBrin
  g it forwardlt/agtltbrgt
• lta href"" onMouseOver"new_window.blur()"gtPut
  it backwardlt/agtltbrgt

18
Messing with the DOM in other Windows

• lthtmlgt
• ltheadgtlttitlegtImage Remotelt/titlegt
• ltscript language"JavaScript"gt
• lt!-- 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 --gt
• lt/scriptgt
• lt/headgt
• ltbodygt
• lta href"" onClick"display_window.document.main_
  image.src 'sky.jpg'return false"gt ltimg
  src"sky.jpgf"gtlt/agt
• lta href"" onClick"display_window.document.main_
  image.src 'sun.jpg'return false"gt ltimg
  src"sun.jpg"gtlt/agtltbrgt
• lta href"" onClick"display_window.document.main_
  image.src 'thau.jpg'return false"gt ltimg
  src"thau.jpg"gtlt/agt
• lta href"" onClick"display_window.document.main_
  image.src 'monkey.jpg'return false"gtltimg
  src"monkey.jpg"gtlt/agtltbrgt
• lt/bodygt

19
slide_show_main.html

• lthtmlgtltheadgtlttitlegtRemote Image Swapping
  lt/titlegtlt/headgt
• ltbodygt
• ltdiv align"center"gt
• ltimg src"sky.jpg" name"main_image" height"400"
  width"400"gt
• lt/divgt
• lt/bodygt
• lt/htmlgt

20
Getting Framed

• In JavaScript, Frames are treated just like
  windows
• Main.html
• lthtmlgtltheadgtlttitlegtUsing Frames with
  JavaScriptlt/titlegtlt/headgt
• ltframeset rows"25,"gt
• ltframe src"frames_example_controls.html"
  name"control_frame"gt
• ltframe src"blank.html" name"target_frame"gt
• lt/framesetgt
• lt/htmlgt
• Frames_example_controls.html
• lthtmlgtltheadgtlttitlegtFrames Example
  Controlslt/titlegtlt/headgt
• ltbodygt
• lta href""
• onClick"top.target_frame.document.writeln('Monkey
  do!ltbrgt')"gtMonkey seelt/agt
• lt/bodygt
• lt/htmlgt

21
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 colors0
• After you execute this line of JavaScript, the
  variable the_element will hold the string "red."

22
An example for Loops and Arrays(slide show)

• lthtmlgtltheadgtlttitlegtURL Slideshowlt/titlegt
• ltscript language "JavaScript"gt
• lt!-- hide me
• var url_names new Array("hits.org","awaken.org",
  "bianca.com")
• var a_url
• for (loop 0 loop lt url_names.length loop)
• // make the name of a url, for example
  http//www.hits.org
• a_url "http//www." url_namesloop
• // open a window
• var new_windowopen(a_url,"new_window","width300
  ,height300")
• // wait for the click
• alert("Hit OK for the next site")

23
Functions(Timer.html)

• lthtmlgt ltheadgt lttitlegtFunction with No
  Parameterslt/titlegt
• ltscript langauge"JavaScript"gt
• lt!-- 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 --gt
• lt/scriptgt
• lt/headgt
• ltbodygt
• lta href"" onClick"announceTime() return
  false"gttime!lt/agt
• lt/bodygt
• lt/htmlgt