prev | next
| i = 3.14 | // number |
| i = 'hello' | // string |
| i = false | // boolean |
| i = Array('apples', 'oranges') | // array |
| i = document.getElementById('me') | // object |
days = Array('mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun');
day1 = days[1];
alert(day1); // arrays are indexed from 0 so day1='tue'
fulldays = Array();
fulldays['mon'] = 'Monday'; // a hash-style array
fulldays['tue'] = 'Tuesday';
fulldays['wed'] = 'Wednesday';
day1Full = fulldays[day1]; // look up 'tue' in the hash index
alert(day1Full)
fruit = Array('apple', 'banana', 'orange');
veg = Array('carrot', 'onion', 'potato');
meat = Array('pork', 'beef', 'chicken');
groceries = Array(fruit, veg, meat); // an array of arrays
buySpuds = groceries[1][2]; // access 3rd item from 2nd array
alert(buySpuds);
myVeg = groceries[1]; // alternatively put 2nd array into a variable
buySpuds = myVeg[2];
alert(buySpuds);
days = Array('mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun');
numOfDays = days.length; // number of items in array
week = "";
for (i = 0; i < numOfDays; i++) { // loop through each item in array
day = days[i];
week = week + ' - ' + day;
}
alert(week);
function makeMessage(myText) { // a function called makeMessage expecting to be passed myText
var myMessage; // myMessage variable only available to this function
myMessage = 'Rich says ' + myText + '.';
return myMessage; // the value of myMessage is output by the function
}
shout = makeMessage('Hello world'); // call the function
alert(shout);
headings = document.getElementsByTagName('h2');
// getElementsByTagName method of the document object
alert(headings); // a NodeList or HTMLCollection, ie. an array of elements
numHeadings = headings.length; // the length property of 'headings'
alert(numHeadings); // the number of <h2>2 headings in the document
<ul> // parentNode
<li> // firstChild of UL, nodeType=1
oranges // firstChild of LI, nodeType=3, nodeValue='oranges'
</li>
<li> // nextSibling of LI
apples
</li>
<li>
<strong> // firstChild of LI
bananas
</strong>
</li>
</ul>
Use the Mozilla Firefox DOM Inspector to view the document tree as well as JavaScript DOM methods, node values and CSS rules.
<div id='hello'>Hello World</div> <input type="button" value="show me" onclick="changeColour('hello', 'green')"> function changeColour(myId, colour) { if (document.getElementById) { document.getElementById(myId).style.color = colour; } }
function toggleAmazon(country) {
myList = document.getElementById('xmp-amz'); // get list of links
myLinks = myList.getElementsByTagName('a'); // get all links in list
for (var i=0; i<myLinks.length; i++) {
url = myLinks[i].href; // pull out link URL
if (url.indexOf('amazon')>-1) { // crude check for link to Amazon
if (country == '.com') {
myLinks[i].href = url.replace(/\.co\.uk/,'.com'); // regex text replace
} else {
myLinks[i].href = url.replace(/\.com/,'.co.uk');
}
}
}
}
A list of navigation links with accesskeys.
<ul id="xmp-nav"> <li><a href="#" accesskey="A">About Us</a></li> <li><a href="#" accesskey="v">Services</a></li> <li><a href="#" accesskey="P">Products</a></li> <li><a href="#" accesskey="C">Contact</a></li> <li><a href="#" accesskey="S">Search</a></li> </ul>
We will dynamically insert a span as a style hook for these rules:
#xmp-nav A {text-decoration:none;}
#xmp-nav A SPAN {text-decoration:underline;}
A list of navigation links with accesskeys underlined.
function underline() {
We select all the links in our xmp-nav list:
var nav = document.getElementById('xmp-nav');
var navlinks = nav.getElementsByTagName('A');
Loop through all the links.
for (var i = 0; i < navlinks.length; i++) {
Pull out the accesskey defined for the link.
var accesskey = navlinks[i].getAttribute('accesskey');
Get the text of the link.
if (accesskey) {
var link = navlinks[i];
var linktext = link.childNodes[0].nodeValue;
Find the first instance of the assigned accesskey in the link text.
var keypos = linktext.indexOf(accesskey);
Isolate the accesskey text and the bit of text before and after the accesskey.
var firstportion = linktext.substring(0,keypos);
var keyportion = linktext.substring(keypos,keypos+1);
var lastportion = linktext.substring(keypos+1,linktext.length);
Rewrite the link text with only the bit of text before the accesskey.
link.childNodes[0].nodeValue = firstportion;
Create a span element and attach it to the link
var s = document.createElement("span");
var span = link.appendChild(s);
Write the accesskey letter inside the newly created span.
var keyt = document.createTextNode(keyportion);
span.appendChild(keyt);
Append the remaining portion of the link text to the link.
var lastt = document.createTextNode(lastportion);
link.appendChild(lastt);
}
}
}
Call the underline function when the document loads.
window.onload = function() {
underline();
}
prev | next