javascript – return function, time object and image rollover
DESCRIPTION
JavaScript – return function, time object and image rollover. Function that provides a return. We seen function eg. displayText() We seen function with parameters function f1(varName) eg. markBox(cell) - PowerPoint PPT PresentationTRANSCRIPT
JavaScript – return function, time object and image rollover
Function that provides a return
We seen function eg. displayText()We seen function with parameters
function f1(varName) eg. markBox(cell)Today we tackle function that returns
something. It could return a number, a string, a boolean or even an “object”
Might need it for TIC TAC TOE assignment – especially for checkWin()
Example:
function calcArea(l, w) {/* function calculates and returns */var area = l*w;return area;
}
function calcPerim(l, w) {return (2 * l * w); //a short cut without using temp var
}
function calc() {var wid=parseFloat(document.simpleForm.widthBox.value);var len=parseFloat(document.simpleForm.lengthBox.value);
calcArea(len, wid); calcPerim(len, wid);
document.simpleForm.showArea.value = area;document.simpleForm.showPerim.value = perimeter;
}
Example of function return
function calcArea(l, w) {/* function calculates and returns */var area = l*w;return area;
}
function calcPerim(l, w) {return (2 * l * w); //a short cut without using temp var
}
function calc() {var wid=parseFloat(document.simpleForm.widthBox.value);var len=parseFloat(document.simpleForm.lengthBox.value);
var area = calcArea(len, wid); // call a fn with parametersvar perimeter = calcPerim(len, wid);document.simpleForm.showArea.value = area;document.simpleForm.showPerim.value = perimeter;
}
Exercise: Displaying Time.
For this exercise, you need to be able to use the previous jex12.html to help you. You DO NOT need random function.
The only part is how to create current time. There is a Date object. Use the code here below to create a
timeStamp variable that is of object type Date(). See the code below in order to get the hrs, mins and seconds.
var timeStamp = new Date();hrs = timeStamp.getHours();mins = timeStamp.getMinutes();seconds = timeStamp.getSeconds();
Note that hrs, mins and seconds are declared as numeric integer. In order to print them in HH:MM:SS, you need to concatenate into string ie.
displayString = hrs + ":" + mins + ":" + seconds;
Exercise: Displaying Time.
displayString = hrs + ":" + mins + ":" + seconds; Then you write the following code to display the time.
document.simpleForm.displayTime.value = displayString; However, if any of hrs, mins or seconds are less than 10, then
the time might look wierd, eg. 9:4:5 which actually suppose to mean 09:04:05 Therefore you need to write some if conditions to include a "0"
in front. displayString can be concatenated to itself. For example if
displayString shows "bc" and you want to make it "abc", you dodisplayString= "a" + displayString;
displayString shows "bc" and you want to make it "bcd", you do displayString = displayString + "d";
Exercise jex14.html: From trial to reality First try and get the seconds out of the time stamp and see if
you can animate the seconds moving and stopping.
Once this works, then you try and get the whole time to display correctly. Do not worry about the 09 vs. 9 minutes at this point. Once you are able to display the time, then you start to write the if condition to check.
Once this works, then you can use style sheet to modify your textbox. Look at POP/TART exercise
Image Roll Over
You have seen this applications of image roll over in many web pages especially for menu choices etc.
The two event handlers that deals with image roll over are onmouseover
This is when the mouse is on top of the image onmouseout
This is for handling the event when the mouse leaves the image.
You need to preload all the images into arrays in order to facilitate this feature.
Example – in body of HTML
<BODY> <A href="links.html" onmouseover = "change(0)" onmouseout = "changeback(0)"> <img src="links1.gif" width=97 height=26 border=0 align=bottom></A>
<A href="pics.html" onmouseover = "change(1)“ onmouseout = "changeback(1)"> <img src="pics1.gif" width=97 height=26 border=0 align=bottom ></A>
<A href="demos.html" onmouseover = "change(2)" onmouseout = "changeback(2)"> <img src="demos1.gif" width=97 height=26 border=0 align=bottom ></A>
</BODY>
Example – JavaScript codevar roll_in = new Array(); var roll_out = new Array(); for(i=0; i<3; i++) {
roll_in[i]=new Image();roll_out[i]= new Image();
} roll_in[0].src="links1.gif"; roll_in[1].src="pics1.gif"; roll_in[2].src="demos1.gif"; roll_out[0].src="links2.gif"; roll_out[1].src="pics2.gif"; roll_out[2].src="demos2.gif"; function change(whichOne) {
document.images[whichOne].src = roll_out[whichOne].src; } function changeback(whichOne) {
document.images[whichOne].src=roll_in [whichOne].src; }
Be careful here. You may have to adjust the “index” of the images. Sometimes it will be whichOne + x where x is the number of displayed images prior to the roll over images
Exercise jex15.html – Web page with image roll over.