Download
1 / 7
70 likes | 179 Views
(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)" >
E N D
(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: <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: <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 document.getElementById("zombie").style.opacity = opacity } } </script> </head> <body onkeypress = "changeopacity(event)"> <p><imgsrc = "Images/Zombie.gif" id = "zombie" width= "150" height = "150" style = "opacity: .02;"></p> </body> </html>
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 document.getElementById(“car").style.left = rightleft + "px" } 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;"> <imgsrc = “frog.png" id = “frog" width= "150" height = "150" style = "position: absolute; top: 0px; left: 0px;"> <imgsrc = “car.png" id = “car" width = "150" height = "150" style = "position: absolute; top: 0px; left: 0px; "> </div <input type = "button" value = "start" onClick = "startit()">
