World Wide Web Programming 14 - Programming the browser and using forms
The Browser Objects window object
location object
history object
forms object
document object navigator object screen object
images object
links object
The window object window.alert(“HELLO”); window.defaultStatus = “Hello and welcome”; Since window is a global object you can also do
• alert(“Hello”) or defaultStatus=“Hello and welcome”
The history object history.go(-2) history.go(3) history.back() history.forward()
The location object
location.replace(“myPage.htm”) • Will change the current page with the select page. Replacing it in the history stack
location.href(“myPage.htm”) • Does the same but adding the new page to the history rather than replacing
The navigator and screen objects Navigator gives information about the browser Screen includes some information like height , width or colorDepth
The document object This represents the page itself Contains properties like forms images and links This object has the problem of not being handled the same way depending on the browser
• NN has for example the tags array not supported by IE
Example
switch (window.screen.colorDepth) { case 1: case 4: document.bgColor = "white"; break; case 8: case 15: case 16: document.bgColor = "blue"; break; case 24: case 32: document.bgColor = "skyblue"; break; default: document.bgColor = "white"; } document.write("Your screen supports " + window.screen.colorDepth + "bit color");
The images array
Each time you use an image with
it is automatically added to the images[] array First image can be found at document.images[0], second one in document.images[1] and so on… We can assign an image to a var • var myImage2 = document.images[1]
If we use the NAME attribute in the IMG tag, it is possible to reference by name • document.images[“myImage”]
Example
<SCRIPT LANGUAGE=JavaScript> var myImages = new Array("usa.gif","canada.gif","jamaica.gif","mexico.gif"); var imgIndex = prompt("Enter a number from 0 to 3",""); document.images["img1"].src = myImages[imgIndex];
The links array The same way you can access an image array you can access a link array It references all the
tags links[]
Using Web Page Events
Click me You can also use functions • <SCRIPT LANGUAGE=“JavaScript”> function linkPage_onclick() { alert(‘You Clicked?’); return true; }
Click Me
Event handlers as properties
<SCRIPT LANGUAGE=“JavaScript”> function linkPage_onclick() { alert(‘This link is going nowhere’); return false; }
Click Me <SCRIPT LANGUAGE=“JavaScript”> window.document.link[0].onclick = linkPage_onclick;
Example
<SCRIPT LANGUAGE=JavaScript> var myImages = new Array("usa.gif","canada.gif","jamaica.gif","mexico.gif"); function changeImg(imgNumber) { var imgClicked = document.images[imgNumber]; var newImgNumber = Math.round(Math.random() * 3); while (imgClicked.src.indexOf(myImages[newImgNumber]) != -1) { newImgNumber = Math.round(Math.random() * 3); } imgClicked.src = myImages[newImgNumber]; return false;
}
Browser Checking
Check the following folder • http://cs465.free.fr/files/samples/
The form array
<SCRIPT LANGUAGE=JavaScript> function window_onload() { var numberForms = document.forms.length; var formIndex; for (formIndex = 0; formIndex < numberForms; formIndex++) { alert(document.forms[formIndex].name); } }
This is inside form1
This is inside form2
This is inside form3
Example 1
<SCRIPT LANGUAGE=JavaScript> var numberOfClicks = 0; function myButton_onclick() { numberOfClicks++; window.document.form1.myButton.value = 'Button clicked ' + numberOfClicks + ' times'; }
Example 2
<SCRIPT LANGUAGE=JavaScript> function myButton_onmouseup() { document.form1.myButton.value = "Mouse Goes Up“ } function myButton_onmousedown() { document.form1.myButton.value = "Mouse Goes Down“ }
Checkboxes and Radio buttons
Check http://cs465.free.fr/files/samples/ch eckexample.html
Select examples
Check • http://cs465.free.fr/files/samples/select example.html • http://cs465.free.fr/files/samples/select exampleIE.html • http://cs465.free.fr/files/samples/select events.html
