This video tutorial explains how to use buttons use buttons and events such as clicking on a button or moving the mouse over or away from a button. Click here to watch the video on YouTube or view it below.
This sample code snippet shows how to work with events (eg. onclick and onmouseover). It also shows how to use those annoying alert messages…but please, only use them for good! You will also be introduced to HTML form elements such as buttons, mentioned in the video above.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>JavaScript - Events</title> <script type="text/javascript"> // alert("Welcome to my web page"); would bring up an alert whenever the page loads // However, we will use a click event to load an alert message instead, and this will be in the body section of the html page </script> </head> <body> <form> <input type="button" value="click me" onclick="alert('You clicked me');"/> <input type="button" value="hover me" onmouseover="alert('You hovered over me');"/> </form> </body> </html> |
JavaScript can also use an event listener to ‘listen’ for other events such as the page loading, a user scrolling down the page or the user pressing a keyboard or mouse button.
Next tutorial: Functions