setTimeout() What if you want to automatically cycle through the pics? So you don’t have to keep clicking the button to see the next pic Use the built-in JavaScript setTimeout() function function displaypic() { num = num + 1 if (num >= picArray.length) { num = 0 } document.getElementById("pic1").src = picArray[num] document.getElementById("p1").innerHTML = num setTimeout(function(){displaypic()},2000)
setTimeout(function(){displaypic()}, 2000) Calls the function setTimeout, which causes javascript to STOP running – just freeze! It stops for the number specified (in milliseconds) After that many milliseconds, it calls the function specified So in the above example, setTimeout freezes javascript for 2000 milliseconds (or 2 seconds), and then after 2 seconds, it calls the function displaypic(), just as if you’d clicked on a button calling it.
Example: <script> </script> </head> <body> function setToRed ( ) { document.getElementById("colorButton").style.color = "#FF0000"; setTimeout ( function(){setToBlack()}, 2000 ); } function setToBlack ( ) { document.getElementById("colorButton").style.color = "#000000"; </script> </head> <body> <input type="button" name="clickMe" id="colorButton" value="Click me and wait!" onclick="setToRed()"/> Link:
<script > var count = 0 function myfunc() { if (count == 1) { count = 0 document. getElementById(“img1”).src = “Images/black.jpg " } else if (count == 0) { count = 1 document. getElementById(“img1”).src = "Images/lightbulb.jpg" setTimeout(function(){myfunc()},1000) </script> </head> <body > <p onClick = “myfunc()”> <img width = "189" height = "267" id = "img1"> Click Here to Start </p> </body> Link:
Starting automatically… So far we’ve started function in a couple of ways: Primarily: onClick Also: onMouseOver and onMouseOut If we want a function to start automatically, without our having to click or run our mouse over anything… We can use onLoad We’ll use it within the body tag, e.g., <body onload = “func()”> This means that when the body of your html page loads into the browser, func() will be executed.
<script > var count = 0 function myfunc() { if (count == 1) { count = 0 document. getElementById(“img1”).src = “Images/black.jpg " } else if (count == 0) { count = 1 document. getElementById(“img1”).src = "Images/lightbulb.jpg" setTimeout(function(){myfunc()},1000) </script> </head> <body onClick = “myfunc()”> <p> <img width = "189" height = "267" id = "img1"> </p> </body> Link:
<!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > var picArray = new Array() picArray[0]="Images/ kittyfur-back.jpg " picArray[1]=“Images/kittyhimself.jpg" picArray[2]="Images/kittybreakfast.jpg" picArray[3]="Images/kittyno-regrets.jpg" picArray[4]="Images/kttylemon.jpg" var num = -1 function displaypic() { num = num + 1 if (num >= picArray.length) { num = 0 } document.getElementById("pic1").src = picArray[num] document.getElementById("p1").innerHTML = num setTimeout(function(){displaypic()},2000) </script> </head> <body> <h1> Vacation Pics </h1> <p><img src = "Images/Leopard.jpg" height = "300" width = "390" alt = "vacation pics" id = "pic1" > </p> <input type = "button" value = “Start Slide Show" onClick = "displaypic()"> <p id = "p1">Image number </p> </body> </html> link
What about this?: link <script > var count = 0 function myfunc() { if (count == 1) { count = 0 document. getElementById(“img1”).src = " " } else if (count == 0) { count = 1 document. getElementById(“img1”).src = "Images/lightbulb.jpg" setTimeout(function(){myfunc()},1000) </script> </head> <body onLoad = “myfunc()”> <p><img src = "" width = "189" height = "267" id = "img1"> </p> </body>
What does this do? <script> var ycoord = 800 var direction = 10 link <script> var ycoord = 800 var direction = 10 function myfunc() { document.getElementById('img1').style.position = "absolute" ycoord = ycoord + direction document.getElementById('img1').style.left = ycoord+"px" setTimeout(function(){myfunc()},400) } </script> </head> <body onLoad = "myfunc()"> <p><img src = "Images/train.jpg" width = "189" height = "267" id = "img1" ></p> </body> </html> Modify to go up and down? Diagonally? To go back and forth?
What does this do? link <script> var leftedge = 50 var rightedge = 800 var ycoord = 800 var direction = 10 function myfunc() { document.getElementById('img1').style.position = "absolute" ycoord = ycoord + direction document.getElementById('img1').style.left = ycoord+"px" if (ycoord < leftedge) direction = direction * -1; } else if (ycoord > rightedge) setTimeout(function(){myfunc()},400) </script> </head> <body onLoad = "myfunc()"> <p><img src = "Images/train.jpg" width = "189" height = "267" id = "img1" ></p> </body> </html> Modify to go up and down? Diagonally? To go back and forth?
Moving things by clicking: link var rightleft =0 function MovecarRight() { rightleft = rightleft +10 document.getElementById(“car").style.left = rightleft + "px" } function MovecarLeft() { rightleft = rightleft -10 </script> </head> <body> <img src = “carimage.gif” width = “200” height = “200” id = “car”> <img src = "Images/left.gif" width= "25px" height = "25px" onclick = "MovecarLeft()"> <img src = "Images/right.gif" width= "25px" height = "25px" onclick = "MovecarRight()">
How do we check if the car is over the frog? var rightleft =0 var xpos =0 function startit() { Movefrog() } function MovecarRight() { rightleft = rightleft +10 document.getElementById(“car").style.left = rightleft + "px" function MovecarLeft() { rightleft = rightleft -10 function Movefrog() { xpos = Math.floor(Math.random() * 650) document.getElementById(‘frog').style.left = xpos + "px" setTimeout("Movefrog()",20000) </script> </head> <body> <div id = "hi" style = "position: relative;"> <img src = “frog.png" id = “frog" width= "150" height = "150" style = "position: absolute; top: 0px; left: 0px;"> <img src = “car.png" id = “car" width = "150" height = "150" style = "position: absolute; top: 0px; left: 0px; "> </div <img src = "Images/left.gif" width= "25px" height = "25px" onclick = "MovecarLeft()"> <img src = "Images/right.gif" width= "25px" height = "25px" onclick = "MovecarRight()"> <input type = "button" value = "start" onClick = "startit()"> link How do we check if the car is over the frog?
var rightleft =0 var xpos =0 Totalscore = 0 function startit() { Movefrog() } function MovecarRight() { rightleft = rightleft +10 document.getElementById(“car").style.left = rightleft + "px“ if ((rightleft > (xpos - 11)) && (rightleft < (xpos + 11)) ) { document.getElementById(‘frog').src="Images/splat.png" totalscore = totalscore +10 document.getElementById('tot').innerHTML = "Total Score: "+totalscore xpos = 0 function MovecarLeft() { rightleft = rightleft -10 function Movefrog() { document.getElementById(‘frog').src="Images/frog.png“ xpos = Math.floor(Math.random() * 650) document.getElementById(‘frog').style.left = xpos + "px" setTimeout("Movefrog()",20000) </script> </head><body> <p id = “tot”>Score goes here<p> <img src = “frog.png" id = “frog" width= "150" height = "150" style = "position: absolute; top: 0px; left: 0px;"> <img src = “car.png" id = “car" width = "150" height = "150" style = "position: absolute; top: 0px; left: 0px; "> <img src = "Images/left.gif" width= "25px" height = "25px" onclick = "MovecarLeft()"> <img src = "Images/right.gif" width= "25px" height = "25px" onclick = "MovecarRight()"> <input type = "button" value = "start" onClick = "startit()"> link
Parameters: Parameters are another way of having something hold a value. E.g., var x = 3 Now the variable x holds 3. We can use x as if it is the number 3 var narr = new Array() narr[0] = “cat” narr[1] = “dog” Now the array narr at location 1 holds the word “dog”, and we can use narr[1] as if it is the word “dog” Parameters: <p onclick = “func(‘easy’)”> click here to call the function with the parameter ‘easy’ </p> <script> function func(easyorhard) { If (easyorhard == ‘easy’) … Now when you click on the paragraph, the word ‘easy’ is placed in the parameter easyorhard, so easyorhard can be used as if it is the word ‘easy’
Parameter Example: link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > function showparam(x) { if (x == 'snow') { document.getElementById("h11").innerHTML = "it's snowing!" } else if (x == 'rain') { document.getElementById("h11").innerHTML = "it's raining!" else if (x == 'sun') { document.getElementById("h11").innerHTML = "it's sunny!" </script> </head> <body> <h1 id = "h11"> Different Styles</h1> <p id = "p1" onClick = "showparam('snow')">click here for snow</p> <p id = "p2" onClick = "showparam('rain')">click here for rain</p> <p id = "p3" onClick = "showparam('sun')">click here for sun</p> </body> </html>
<!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function changepic(x) { document.getElementById('bigpic').src = x } function changebak() { document.getElementById('bigpic').src = “frog.jpg" </script> </head> <body > <table ><tr><td colspan = "4" height = "300" width = "300"> <img src = "frog.jpg" width = "250" height = "250" id = "bigpic"> </td></tr> <tr><td > <img src = "pic1.jpg" width = "40" height = "40" id = "img1" onMouseOver = "changepic('pic1.jpg')" onMouseOut = "changebak()"> </td><td> <img src = "pic2.jpg" width = "40" height = "40" id = "img2" onMouseOver = "changepic('pic2.jpg')" onMouseOut = "changebak()"> <img src = "pic3.jpg" width = "40" height = "40" id = "img3" onMouseOver = "changepic('pic3.jpg')" onMouseOut = "changebak()"> <img src = "pic4.jpg" width = "40" height = "40" id = "img4" onMouseOver = "changepic('pic4.jpg')" onMouseOut = "changebak()"> </td></tr></table> </body> </html> link
Functions can have more than one parameter link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function myFunction(x, y) { document.getElementById('p1').innerHTML = "Welcome " + x + ", the " + y; } </script> </head> <body> <p id = "p1">Results go here.</p> <button onclick="myFunction('Harry Potter','Wizard')">Try it</button> <button onclick="myFunction('Bob','Builder')">Try it</button> </body> </html> Parameters match in order: function myFunction( name, job) onClick = myFunction( ‘Harry Potter’, ‘Wizard’) onClick = myFunction( ‘Bob’ ‘Builder’)
Parameter Example: link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > function showparam(x, y) { document.getElementById(x).innerHTML =y } </script> </head> <body> <h1 id = "h11"> Different Styles</h1> <p id = “snow" onClick = "showparam('snow‘, ‘it is snowing!’)">click here for snow</p> <p id = “rain" onClick = "showparam('rain‘, ‘it is raining!’)">click here for rain</p> <p id = “sun" onClick = "showparam('sun‘, ‘it is sunny’)">click here for sun</p> </body> </html>
link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> var ycoord = 5 function myfunc(x,y) { document.getElementById(x).style.position = "absolute" document.getElementById(x).style.top = y + "px" ycoord = ycoord + Math.floor(Math.random()*100) document.getElementById(x).style.left = ycoord+"px" setTimeout(function(){myfunc(x,y)},400) } function startfunc() { myfunc('img1',20) /* what’s happening here?*/ myfunc('img2',160) </script> </head> <body> <p ><img src = "Images/train.jpg" width = "189" height = "267" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <p ><img src = "Images/train.jpg" width = "189" height = "267" id = "img2" style = "position: absolute; top: 160px; left: 5px"></p> <h1 style="color:white;" id = "h11"> </h1> <p style = "position: absolute; top: 270px; left: 5px"> <input type = "button" onclick = "startfunc()" value = "start" ></p> </body> </html> link
(Optional)Using keys on the keyboard: Using your keyboard keys to call functions. Typing on the keyboard is considered an event in javaScript. So when we call a function, we call it with the parameter, event E.g., <body onKeyPress = “myfunc(event)"> (Remember onkeypress? It was in our list of ways to call functions, along with onMouseOver, onMouseOut, onClick, onLoad, etc. onKeyPress: when you press on a key, the function you named myfunc() is called. event – it means the activity the user takes on the web page This event – what the user did – must be passed into the function as a parameter.
.keyCode When you press on a key, it has a number associated with it. That’s the keycode. E.g., function myfunc(keys) { if (keys.keyCode == 39) { document.getElementById("p1").innerHTML = "You pushed the right arrow" } else if (keys.keyCode == 37) { document.getElementById("p1").innerHTML = "You pushed the left arrow"
Putting it together: link <html><head> <script> function getarrows(keys) { if (keys.keyCode == 39) { document.getElementById("p1").innerHTML = "You pushed the right arrow" } else if (keys.keyCode == 37) { document.getElementById("p1").innerHTML = "You pushed the left arrow" else if (keys.keyCode == 38) { document.getElementById("p1").innerHTML = "You pushed the up arrow" else if (keys.keyCode == 40) { document.getElementById("p1").innerHTML = "You pushed the down arrow" </script> </head> <body onkeypress = "getarrows(event)"> <p id = "p1"> Which arrow did you push? </p> </body> </html>
Another example: link <html><head> <script> var opacity = .02 function changeopacity(currkey) { if (currkey.keyCode == 38) { opacity += .03 document.getElementById("zombie").style.opacity = opacity } else if (currkey.keyCode == 40) { opacity -= .03 </script> </head> <body onkeypress = "changeopacity(event)"> <p><img src = "Images/Zombie.gif" id = "zombie" width= "150" height = "150" style = "opacity: .02;"></p> </body> </html>
Other keycodes: Key Code e 69 f 70 g 71 h 72 i 73 j 74 k 75 l 76 m 77 n 78 o 79 p 80 q 81 r 82 s 83 t 84 u 85 v 86 w 87 Key Code backspace 8 tab 9 enter 13 shift 16 ctrl 17 alt 18 pause/break 19 caps lock 20 escape 27 page up 33 page down 34 end 35 home 36 Key left arrow Code 37 up arrow 38 right arrow 39 down arrow 40 insert 45 delete 46 48 1 49 2 50 3 51 4 52 5 53 6 54 7 55 8 56 9 57 a 65 b 66 c 67 d 68
link var rightleft =0 var xpos =0 Totalscore = 0 function startit() { Movefrog() } function Movecar(direction) { if (direction.keyCode == 39) { rightleft = rightleft + 10 document.getElementById(“car").style.left = rightleft + "px" else if (direction.keyCode == 37) { rightleft = rightleft -10 if ((rightleft > (xpos - 11)) && (rightleft < (xpos + 11)) ) { document.getElementById(‘frog').src="Images/splat.png" totalscore += 10 document.getElementById('tot').innerHTML = "Total Score: "+totalscore xpos = 0 function Movefrog() { document.getElementById(‘frog').src="Images/frog.png“ xpos = Math.floor(Math.random() * 650) document.getElementById(‘frog').style.left = xpos + "px" setTimeout("Movefrog()",20000) </script> </head> <body onkeypress = “Movecar(event)”><p id = “tot”>Score goes here<p> <div id = "hi" style = "position: relative;"> <img src = “frog.png" id = “frog" width= "150" height = "150" style = "position: absolute; top: 0px; left: 0px;"> <img src = “car.png" id = “car" width = "150" height = "150" style = "position: absolute; top: 0px; left: 0px; "> </div <input type = "button" value = "start" onClick = "startit()"> link