Category Archives: Javascript

01) Javascript Examples

  1. CONTENTS
  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. Escape the Void!
  13. jQuery Menu Button
  14. For More JS Information

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) The 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

Number:

Even number, or Odd?

inputid

07) Date & Hour

Display Date


date appears here


Display Hour

Hour Displays Here



datehour

 

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

 

 

08) Mouseover

Move Mouse Here

mouseover

 

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

object.onmouseover=function() { ExecuteCodeHere };

09) Change Image

<html>
<body>

<script>

function changeImage() {
	theElement=document.getElementById('myimage')

	if (theElement.src.match("bulbon.gif")) {
		theElement.src="bulboff.gif";
		}
	else {
		theElement.src="bulbon.gif";
		}
	}

</script>

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

</body>
</html>

10) Event Listener

Click Me!


clickalert


THESE ARE THE ALERTS FROM THREE DIFFERENT BROWSERS

chrome

safari

firefox

11) Array Loops

array.js

12) Escape the Void!

Before clicking the link, look at what this code does.
  • Why is there a zero in line 6?
  • Line 25: What is this particular set of colors names called?
  • 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?

 

void

Here’s the link to a page consisting of the above source code :

zapmap.com/programming/javascript/void4.html