Category Archives: Javascript

– Welcome –


Welcome to WordPress-Saratoga

  • Attendance: / Sign-in Sheet / password
  • Survey 1: Macintosh, Windows, Unix?
  • Survey 2: Freelance, Startup Team Member, Corporate Employee?
  • Survey 3: Beginner, Intermediate, Advanced User?
  • Fundamentals
    • Blogging
      • Write & post, categorize & tag; fresh content, from time to time.
      • Content consists of text, photos, and/or audio/visual media.
      • Accept comments from visitors.
      • Free Hosted Service, Themes, and Widgets (limited)
      • Optimal Resource Utilization, Load Balancing
      • Automatic Version Updating
      • Host a CMS* website on server of own choosing.
      • Unlimited Customization, Access to Code
      • Maintenance is your own Responsibility!
  • This Month’s Question?
  • Introduce Yourself
    • Name, Title, and Background
    • Tell us about your experience with WordPress so far.
    • Where do you plan to go with WordPress?
  • Next Month?
  • Other Groups 

 <- Twitter Site

* Content Management System (CMS) is a computer program that allows publishing, editing and modifying content on a website as well as maintenance from a central interface. Such systems provide procedures to manage workflow in a collaborative environment.

Pulse Check

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

06) Input ID

Enter Number


Even number, or Odd?


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


10) Event Listener

Click Me!






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 :