1 / 7

(Optional)Using keys on the keyboard:

(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)" >

swarren
Télécharger la présentation

(Optional)Using keys on the keyboard:

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

  2. .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" } }

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

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

  5. Other keycodes:

  6. 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()">

More Related