1 / 7

Handling Keyboard Events in JavaScript for Interactive Web Functions

This guide explains how to use keyboard events in JavaScript to create interactive web applications. By utilizing the `onKeyPress` event, you can call functions in response to user input. Examples show how to respond to arrow key presses and adjust elements on the page accordingly. Functions can capture event parameters, such as `keyCode`, to determine which key was pressed and modify the content or styles of HTML elements dynamically. Follow along with practical examples to enhance user experience through keyboard interaction.

magar
Download Presentation

Handling Keyboard Events in JavaScript for Interactive Web Functions

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