Javascript: Events ATLS 3020 - Digital Media 2 Week 7 - Day 2 - - PowerPoint PPT Presentation

▶

Feb 11, 2023 283 likes •422 views

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 =

SLIDE 1

Javascript: Events

ATLS 3020 - Digital Media 2 Week 7 - Day 2

SLIDE 2

Project Help: Case Sensitivity

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

Use the “toLowerCase()” function

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 } . . . Javascript

SLIDE 3

Project Help: Load Javascript Last

<body> . . . . <script> // code for your game // . . . do_x(); function do_x() { . . . } </script> </body> HTML

Use the “onload” event

<body onload = "play_game();"> . . . . <script> function play_game() { // code for your game // . . . do_x(); } function do_x() { . . . } </script> </body> HTML

SLIDE 4

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

SLIDE 5

Event Example: onload

“onload” is the code event
the real life event is “after

the page loads”

<body onload = "play_game();"> . . . . <script> function play_game() { // code for your game // . . . do_x(); } function do_x() { . . . } </script> </body> HTML

SLIDE 6

Let’s look at events

load

Webpage has finished loading

error

Browser has encountered an error

resize

Browser window has been resized

scroll

The user has scrolled the webpage

User Interface Events

keydown User presses a key on the keyboard
keyup

User releases a key

Keyboard Events

click

User clicked mouse

dblclick

User double clicked mouse

mousemove

User moved the mouse

mouseover

User moved mouse over element

mouseoutUser moved mouse off element

Mouse/Trackpad Events Form Events

input

Any input or textarea changed

change

Any form element changed

submit

User submitted the form

select

User selected form element

SLIDE 7

How to add events

❶ Access an html element and store it in a variable.

var start_div; start_div = document.getElementById("start"); javascript

❷ Use the dot notation to combine the variable and the event.

start_div. javascript

❸ Add the word “on” with the event you want to use. Add it to your element (after the dot).

start_div.onclick javascript

❹ Set the event equal to a function.

start_div.onclick = my_function; javascript

SLIDE 8

Event Example: “onclick”

❶ Create variable that holds the html element.

<div id="start">Start</div> <script> var start_div; start_div = document.getElementById("start"); start_div.onclick = do_this_function(); function do_this_function() { // code } </script> HTML <div id="start">Start</div> <script> var start_div; start_div = document.getElementById("start"); start_div.onclick = do_this_function(); function do_this_function() { // code } </script> HTML <div id="start">Start</div> <script> var start_div; start_div = document.getElementById("start"); start_div.onclick = my_function; function my_function() { // code } </script> HTML

❷ Combine (with a dot) the event and that variable. ❸ Set the variable.event equal to a function.

The “onclick” event will be extremely helpful in future projects!

SLIDE 9

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

SLIDE 10

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.

SLIDE 11

Event Example: “onmouseover”

<div id="start">Start</div> <script> var start_div; start_div = document.getElementById("start"); start_div.onmouseover = my_function; function my_function() { // code } </script> HTML

“onmouseover” is another useful event

Use the exact same structure as the “onload” and “onclick” events

SLIDE 12

Event Example: “onmouseover” Part 2

<img src="image.jpg" id="my_img" /> <div id="start">Start</div> <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> HTML

Cool way to add simple interactivity on a webpage

SLIDE 13

Lab 9

1. Add 4 events (of different types) to your webpage. These