Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s...
Transcript of Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s...
![Page 1: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/1.jpg)
Client-Side Web DevelopmentClass 10.1
![Page 2: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/2.jpg)
Today’s Topics
• Functions
• Event Handling
• Exercise: Event Horizon
![Page 3: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/3.jpg)
Announcements
![Page 4: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/4.jpg)
Web Portfolio
![Page 5: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/5.jpg)
Any Questions?
![Page 6: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/6.jpg)
Functions
![Page 7: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/7.jpg)
A function is set of statements that can be used to perform a task some
time in the future
![Page 8: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/8.jpg)
A function can be executed multiple times
![Page 9: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/9.jpg)
A function should be declared before it can be called.
![Page 10: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/10.jpg)
Declaring a Function
![Page 11: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/11.jpg)
A function definition starts with the function keyword followed by a
name, set of parentheses, and a set of curly braces.
![Page 12: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/12.jpg)
The return statement is used to specify the value a function will return after complete its task
![Page 13: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/13.jpg)
// Function definition function greeting () { return `Hello World` }
![Page 14: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/14.jpg)
// Function definition function greeting () { return `Hello World` }
The function keyword
![Page 15: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/15.jpg)
// Function definition function greeting () { return `Hello World` }
The name of the function
![Page 16: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/16.jpg)
// Function definition function greeting () { return `Hello World` }
Set of parenthesis used to hold parameters
![Page 17: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/17.jpg)
// Function definition function greeting () { return `Hello World` } Set of curly braces used to
hold the code block
![Page 18: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/18.jpg)
// Function definition function greeting () { return `Hello World` }
Returns any value that proceeds it, when the function is called
![Page 19: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/19.jpg)
Calling a Function
![Page 20: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/20.jpg)
A function does not execute until it is called
![Page 21: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/21.jpg)
To call a function, use the function's name or variable followed by a set
of parenthesis
![Page 22: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/22.jpg)
// Function definition function greeting () { return `Hello World` }
// Calling the function greeting() // Hello World
![Page 23: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/23.jpg)
// Function definition function greeting () { return `Hello World` }
// Calling the function greeting() // Hello World
Use the function name to call the function
![Page 24: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/24.jpg)
Function Scope
![Page 25: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/25.jpg)
Variables declared inside a function can only be accessed by the
function and its children
![Page 26: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/26.jpg)
Variables declared outside of any function or block are accessible
from inside a function
![Page 27: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/27.jpg)
// Creating a global variable const who = `World`
// Function definition function greeting () { // Creating a function variable const salutation = `Hello` return `${salutation} ${who}` }
console.log(greeting()) // Hello World console.log(salutation) // Error
![Page 28: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/28.jpg)
// Creating a global variable const who = `World`
// Function definition function greeting () { // Creating a function variable const salutation = `Hello` return `${salutation} ${who}` }
console.log(greeting()) // Hello World console.log(salutation) // Error
A global variable is one that is declared outside of a
block or function
![Page 29: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/29.jpg)
// Creating a global variable const who = `World`
// Function definition function greeting () { // Creating a function variable const salutation = `Hello` return `${salutation} ${who}` }
console.log(greeting()) // Hello World console.log(salutation) // Error
Global variables can be used inside of a function
![Page 30: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/30.jpg)
// Creating a global variable const who = `World`
// Function definition function greeting () { // Creating a function variable const salutation = `Hello` return `${salutation} ${who}` }
console.log(greeting()) // Hello World console.log(salutation) // Error
Variables declared inside a function have function scope
![Page 31: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/31.jpg)
// Creating a global variable const who = `World`
// Function definition function greeting () { // Creating a function variable const salutation = `Hello` return `${salutation} ${who}` }
console.log(greeting()) // Hello World console.log(salutation) // Error
Variables declared inside a function cannot be used outside
of the function
![Page 32: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/32.jpg)
Event Handling
![Page 33: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/33.jpg)
DOM Events
![Page 34: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/34.jpg)
DOM Events are notifications that some action has occurred on the
page.
![Page 35: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/35.jpg)
DOM Events can represent a basic user action or the status of the
render model.
![Page 36: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/36.jpg)
There are DOM Events for the keyboard, mouse, touch, clipboard, media, view, printing, drag & drop,
animation, forms, and more
![Page 37: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/37.jpg)
To have JavaScript respond to DOM Events you must add an event
listener to an element
![Page 38: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/38.jpg)
Event Listeners
![Page 39: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/39.jpg)
Event Listeners are JavaScript objects that listens for a specific DOM Event to occur and
executes a function when it does
![Page 40: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/40.jpg)
The addEventListener() Method
![Page 41: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/41.jpg)
This method listens for a specified event to occur on a specified
element and then executes the provided function
![Page 42: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/42.jpg)
This method requires an event type and a function
![Page 43: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/43.jpg)
const $button = document.getElementById('button')
$button.addEventListener('click', function () { alert(`You pressed the button!`) })
![Page 44: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/44.jpg)
Event Types
![Page 45: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/45.jpg)
Mouse Events
![Page 46: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/46.jpg)
Mouse Events
• mouseenter
• mouseover
• mousemove
• mousedown
• mouseup
• auxclick
• click
• dblclick
• contextmenu
• wheel
• mouseleave
• mouseout
• select
![Page 47: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/47.jpg)
const $button = document.getElementById('button')
$button.addEventListener('mouseover',function () { alert(`Don't you do it!`) })
$button.addEventListener('click', function () { alert(`You pressed the button!`) })
$button.addEventListener('mouseout', function () { alert(`Don't do it again!`) })
![Page 48: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/48.jpg)
const $button = document.getElementById('button')
$button.addEventListener('mouseover',function () { alert(`Don't you do it!`) })
$button.addEventListener('click', function () { alert(`You pressed the button!`) })
$button.addEventListener('mouseout', function () { alert(`Don't do it again!`) }) Listening for three different
events to occur
![Page 49: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/49.jpg)
Keyboard Events
![Page 50: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/50.jpg)
Keyboard Events
• keydown
• keypress (ignores modifier keys)
• keyup
![Page 51: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/51.jpg)
Getting Key Codes
Deprecated
• event.keyCode (100%)
• event.charCode
• event.which
Not Fully Supported
• event.key (85%)
• event.code (48%)
![Page 52: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/52.jpg)
Checking for Modifier Keys
• event.ctrlKey
• event.shiftKey
• event.altKey
• event.metaKey (Not Fully Supported)
![Page 53: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/53.jpg)
const textbox = document.getElementById('textbox')
textbox.addEventListener('keyup', function (event) { console.log(`You typed ${event.key}`) })
![Page 54: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/54.jpg)
const $textbox = document.getElementById('textbox')
$textbox.addEventListener('keyup', function (event) { console.log(`You typed ${event.key}`) })
Event Object
![Page 55: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/55.jpg)
const $textbox = document.getElementById('textbox')
$textbox.addEventListener('keyup', function (event) { console.log(`You typed ${event.key}`) })
Represents the key pressed as a string
![Page 56: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/56.jpg)
Other Standard Events
![Page 57: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/57.jpg)
Other Standard Events
• blur
• change
• copy
• cut
• focus
• invalid
• load
• paste
• reset
• resize
• select
• submit
![Page 58: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/58.jpg)
Adding to Multiple Elements
![Page 59: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/59.jpg)
There will be times when you will need to add an event listener to multiple elements
![Page 60: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/60.jpg)
This can be done using a loop
![Page 61: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/61.jpg)
<div id="box"></div>
<button class="button">red</button> <button class="button">green</button> <button class="button">blue</button>
![Page 62: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/62.jpg)
const $box = document.getElementById('box') const $buttons = document.querySelectorAll('.button')
for (const $button of $buttons) { $button.addEventListener('click', function (e) { $box.style.background = e.target.textContent
})
}
![Page 63: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/63.jpg)
const $box = document.getElementById('box') const $buttons = document.querySelectorAll('.button')
for (const $button of $buttons) { $button.addEventListener('click', function (e) { $box.style.background = e.target.textContent
})
} Event Object
![Page 64: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/64.jpg)
const $box = document.getElementById('box') const $buttons = document.querySelectorAll('.button')
for (const $button of $buttons) { $button.addEventListener('click', function (e) { $box.style.background = e.target.textContent
})
}
The Button that was clicked
![Page 65: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/65.jpg)
Examples
![Page 66: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/66.jpg)
Exercise: Event Horizon
![Page 67: Client-Side Web Development - GitHub Pages · Client-Side Web Development Class 10.1 Today’s Topics • Functions • Event Handling • Exercise: Event Horizon Announcements Web](https://reader034.fdocuments.in/reader034/viewer/2022052017/602f8024edffbf182878f3b4/html5/thumbnails/67.jpg)
For next class...
• Review: Dominoes
• Lab: Domino's