1 / 11

JavaScript – return function, time object and image rollover

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)

guenevere-adams
Download Presentation

JavaScript – return function, time object and image rollover

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript – return function, time object and image rollover

  2. 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()

  3. 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; }

  4. 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; }

  5. 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;

  6. 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";

  7. 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

  8. 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.

  9. 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>

  10. Example – JavaScript code var 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

  11. Exercise jex15.html – Web page with image roll over.

More Related