Javascript: Events ATLS 3020 - Digital Media 2 Week 7 - Day 2
Project Help: Case Sensitivity Use the “toLowerCase()” function Javascript var str = "This IS a Test"; alert(str); // This IS a Test var str_lower = str.toLowerCase(); alert(str_lower); // this is a test Javascript var answer; answer = prompt("Which do you choose: red or blue"); var answer_lower; answer_lower = answer.toLowerCase(); if(answer_lower == "red") { // do the thing for red } . . .
Project Help: Load Javascript Last Use the “onload” event HTML HTML <body> <body onload = "play_game();"> . . . . . . . . <script> <script> function play_game() // code for your game // . . . { // code for your game do_x(); // . . . do_x(); function do_x() { . . . } </script> } </body> function do_x() { . . . } </script> </body>
Events ● Another way for javascript to react to the user’s actions ● Think of this like a real life event ● Javascript has code “events” (similar to functions) that match directly with a real life “event” For class: download the starter code
Event Example: onload HTML <body onload = "play_game();"> ● “onload” is the code event . . . . <script> ● the real life event is “after function play_game() { the page loads” // code for your game // . . . do_x(); } function do_x() { . . . } </script> </body>
Let’s look at events User Interface Events Mouse/Trackpad Events ● load Webpage has finished loading ● click User clicked mouse ● error Browser has encountered an error ● dblclick User double clicked mouse ● resize Browser window has been resized ● mousemove User moved the mouse ● scroll The user has scrolled the webpage ● mouseover User moved mouse over element ● mouseout User moved mouse off element Form Events Keyboard Events ● input Any input or textarea changed ● change Any form element changed ● keydown User presses a key on the keyboard ● keyup User releases a key ● submit User submitted the form ● select User selected form element
How to add events javascript Access an html element and store it in ❶ var start_div; a variable. start_div = document.getElementById("start"); Use the dot notation to combine the ❷ javascript variable and the event. start_div. Add the word “on” with the event you ❸ javascript want to use. Add it to your element start_div.onclick (after the dot). javascript Set the event equal to a function. ❹ start_div.onclick = my_function;
Event Example: “onclick” HTML HTML HTML ❶ Create variable that <div id="start">Start</div> <div id="start">Start</div> <div id="start">Start</div> holds the html <script> <script> <script> var start_div; var start_div; var start_div; element. start_div = document.getElementById("start"); start_div = document.getElementById("start"); start_div = document.getElementById("start"); start_div.onclick = do_this_function(); start_div.onclick = my_function; start_div.onclick = do_this_function(); ❷ Combine (with a dot) function do_this_function() function my_function() function do_this_function() { { { the event and that // code // code // code } } } variable. </script> </script> </script> The “onclick” event will be extremely ❸ Set the variable.event helpful in future projects! equal to a function.
Exercise (whole class) 1. Download the starter code (same code from week 6-1) 2. Create a function that will alert a phrase. 3. Create a variable. 4. Access the start button element (by it’s id) and store it in that variable. 5. Add an onclick event to that variable. Set the event equal to your function (created in step #2).
Exercise (in pairs) 1. Use the same code from the last exercise. 2. In your function, instead of alerting a phrase, change the text (innerHTML) of one of other elements on the page. 1. Create a 2nd function. 2. This 2nd function will change the text color of one of the elements on the page. 3. Set the onclick event of the start button equal to your 2nd function.
Event Example: “onmouseover” HTML Use the exact same <div id="start">Start</div> <script> structure as the “onload” var start_div; start_div = document.getElementById("start"); and “onclick” events start_div.onmouseover = my_function; function my_function() { // code } </script> “onmouseover” is another useful event
Event Example: “onmouseover” Part 2 HTML Cool way to add <img src="image.jpg" id="my_img" /> simple interactivity on <div id="start">Start</div> a webpage <script> var start_div; start_div = document.getElementById("start"); start_div.onmouseover = my_function; function my_function() { var my_img = document.getElementById("my_img"); my_img.src = "new_image.jpg"; } </script>
Lab 9 1. Add 4 events (of different types) to your webpage. These events can change the same element or different elements.
Recommend
More recommend
