HTML and Web Pages - Marquette University
Download
Report
Transcript HTML and Web Pages - Marquette University
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 parameters
var 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 do
displayString= "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 code
var roll_in = new Array();
var roll_out = new Array();
for(i=0; i<3; i++) {
roll_in[i]=new Image();
Be careful here. You may
roll_out[i]= new Image();
have to adjust the “index”
}
of the images. Sometimes
roll_in[0].src="links1.gif";
it will be whichOne + x
roll_in[1].src="pics1.gif";
where x is the number of
roll_in[2].src="demos1.gif";
displayed images prior to
roll_out[0].src="links2.gif";
the roll over images
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;
}
Exercise jex15.html – Web page with
image roll over.