Web Design:
Event Handlers
OnClick, OnLoad, etc...
Web Design:
Event Handlers
OnClick, OnLoad, etc...
Embedded Files
Event Handlers
OnClick, OnLoad, etc...
Today's Goal
Today's Goal
We're going to keep learning more about JS & CSS.
Today, we'll focus on more JS.
Completed
Basics of HTML
Basics of MakeCode
Today
Core Languages of the Web
Try basic JS & CSS:
Event Handlers
Upcoming
Starting our Semester Project
Part 1:
MouseOver & MouseOut
Part 1:
MouseOver & MouseOut
Yesterday, we started working with a little JS and CSS. Today's focus will just be on JS. We're going to see how we can cause things to happen when we move our mouse over text.
You can start a new blank page for today, or add on to the one you worked on yesterday.
Follow along with the videos here.
mouse-over-0.mp4Take a video showing you got this to work. You'll need to upload this to canvas and add it to your slides today.
What else can we do with this? We can also add event handlers into the body tag itself. Let's see how.
onmouse-2.mp4Take a video showing you got this to work. You'll need to upload this to canvas and add it to your slides today.
We can also use event handlers with images, including changing images when the user interacts with it. Let's try it!
mouse-over-3.mp4Experiment a bit more, play with it, customize it.
Take a video showing you got this to work. You'll need to upload this to canvas and add it to your slides today.
Submit
Submit
Upload videos showing you were able to get mouse over, mouse out, and on load events to work with alerts, and also show you were able to get images to change.
Page updated
Report abuse