Category Archives: Javascript

01) Contents

JavaScript for WP

  2. Document Object Model
  3. Change Style
  4. Function Parameters
  5. Get Elements
  6. Input ID
  7. Date & Hour
  8. Mouseover
  9. Change Image
  10. Event Listener
  11. Array Loops
  12. Paint the Canvas
  13. Escape the Void!
  14. The Clock (to next page)

This presentation covers the following areas:

  • Methods: getElementById, getElementsByTagName, getDate, getTime
  • Image Property: src
  • Style Property: color
  • DOM Property: innerHTML
  • Objects: Array(), Date()
  • Events: onmouseover, onmouseout
  • Popup Box: alert, prompt

02) Document Object Model

HTML is for Content

CSS is for Presentation

JavaScript is for Interactivity

JavaScript is able to create dynamic HTML:

  • JavaScript can change all the HTML elements in the page
  • JavaScript can change all the HTML attributes in the page
  • JavaScript can change all the CSS styles in the page
  • JavaScript can react to all the events in the page

JavaScript can be executed whenever an event occurs.

Examples of HTML events:

  • When a user clicks the mouse
  • When a web page has loaded
  • When an image has been loaded
  • When the mouse moves over an element
  • When an input field is changed
  • When an HTML form is submitted
  • When a user strokes a key

JavaScript is able to manipulate HTML elements.

Here are the ways Javascript is able to find the HTML elements:

  • by id
  • by tag name
  • by class name

07) Date & Hour

Display Date

date appears here

Display Hour

Hour Displays Here



Why is the hour just a string of numbers? What does it mean?



08) Mouseover

Move Mouse Here



The onmouseover attribute in HTML can be used within many HTML elements. In JavaScript, the command is:

object.onmouseover=function() { ExecuteCodeHere };

09) Change Image



function changeImage() {

	if (theElement.src.match("bulbon.gif")) {
	else {


<img id="myimage" onclick="changeImage()" src="bulboff.gif">


11) Array Loops


13) Escape the Void!

Before clicking the link, look at what this code does.
  • Line 27 & 29: What do the first two for loops do?
  • Line 36: Within the third for loop, what happens if (zr * zr) + (zi * zi) never gets to be greater than 4?
  • Line 37: Is z%17 even necessary in this example?
  • Line 14: How much difference is there when depth is a smaller number compared to a larger one?



Here’s the link to a simple HTML page consisting of the above source code (please give it a few seconds to paint every pixel in the window):

The image is called the Mandelbrot Set.