Tom Mix Comic Riding Avenger

Javascript For:

You name it. Here is a list of various javascript resources I've found useful. Unless you are a Javacript Jedi Level 10 you will likely find the following resources very helpful. So dig in!

"Javascript is one of the worlds most misunderstood languages." - Douglas Crockford

» Image Gallery - Example
» Javascript onClick
» CSS and and JavaScript
» Animating with Javascript
» Timers
» Links to help you learn JavaScript
» JavaScript Example Code Sites
» JavaScript Validation
» JavaScript Reference Guide

JavaScript for an image gallery
// The default behavior on the link is intercepted to instead run a function.
// showPic - Swap out placeholder image by changing src attribute. Also changes the description text.
// It is the name for the argument which is passed into the showPic function. whichPic represents an element node.
Example Images
- Using the setAttribute method to change the img src.
- Extract href path using the getAttribute method and store in a variable

Images Here:
My image gallery

x


JavaScript Onclick - Applied to a div element

<button class="onclickExample" onclick='window.location.href="http://www.example.org"'>onclick example</button>

JavaScript Countdown Example
Here is a countdown example.

CSS and JavaScript
Using JavaScript to manipulate CSS of something on the page.
Anything that would be written with a dash or hyphen becomes camel case. (Because we cant put a dash in code thats how we subtract)

I needed some style

Change an image onclick

JavaScript Panther Annimation
Using JavaScript to make that kitty run! Meeeow! Click the kitty to make it run.



Form and Form Elements
Retrieve the form or any field in a form:

document.forms.NameOfTheForm (the form)
document.forms.NameOfTheForm.nameOfTheElement (field element in a form)

onfocus - into it
onblur - when you leave the element
onchange - When something changes
onkeypress-
onkeydown -
onkeyup -

Required example e-mail field:


Check to see onclick event:

Secret Treasure Revealed!
Option 1:
Option 2:
Option 3:
Option 4:

Timers
Just happens once.

Alert should appear after 2 seconds.

function simpleMessage() { alert("This is just an alert box"); } var timeMe = document.getElementById("timerButton"); timeMe.onclick = function() { setTimeout(simpleMessage, 3000); }

Set Interval
Change an element (image in this example) using setInterval (repeating at an interval you define).
icon_happy.png
icon_sad.gif

var myImage = document.getElementById("sadIcon"); var imageArray = ["icon_sad.gif", "icon_happy.png", "silly-icon.png", "crazy-smiley.jpg"]; var imageIndex = 0; function changeImage() { console.log('changeImage fired'); myImage.setAttribute("src", imageArray[imageIndex]); imageIndex++; if(imageIndex >= imageArray.length) { imageIndex = 0; } } setInterval(changeImage,1000);

Can you HANDLE it? - Handling or registering events
Events are happening all the time. You decide which ones you care about. When the page loads, when a button is clicked, when the user types, etc. Here is some info on how to handle Javascript events. Common Events - onload, onclick, onmouseover, onblur, onfocus.

Example - Write Jascript directly into your html. You should avoid script mixed in with your html.

<button onClick="alert('Hello, world');">Run Some JavaScript</button>
Example - Name of the element, name of the event. Annonymous function that executes as soon as event happens: var myImage = document.getElementById("mainImage"); myImage.onclick = function() { // Your event handler code // When user clicks this element run this function // Semi colon because whole thing is a statement };

Click the image -

<script> var emailField = document.getElementById("yourEmail"); emailField.onfocus = function() { if ( emailField.value == "your email") { emailField.value = ""; } }; emailField.onblur = function() { if ( emailField.value == "") { emailField.value = "your email"; } }; </script>

Changing DOM Elements
Some examples of how you can change DOM elements using JavaScript.

Example Div/Element
<script> var mainContent = document.getElementById("domFun"); mainContent.setAttribute("align","center"); </script> Creating DOM elements:
  1. Create the element
  2. Add the newly created element to the right place in the DOM
<script> var myElement = document.getElementById("xyz"); var myNewElement = document.createElement("li"); myNewElement.innerHTML = "Did You Know?"; myElement.appendChild(myNewElement); </script>
  • Javascript For Back to Previous Page - Back Button
    <form><input type="button" value="Back to Previous Page" onClick="javascript: history.go(-1)"></form> <a href="javascript: history.go(-1)">Back</a>

    Back href Link

    • Test Your Javascript