Scribd
Upload
33 views41 pages

120 Javascript - Events

This document provides an overview of JavaScript events. It discusses common event examples like timers, key input, and mouse events. It also provides code snippets for setting intervals, mouse movement listeners, and updating text on a page. The document encourages hands-on practice with JavaScript events, such as creating a simple game, and testing code locally rather than relying on an external domain.

Uploaded by

nehru prasad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views41 pages

120 Javascript - Events

This document provides an overview of JavaScript events. It discusses common event examples like timers, key input, and mouse events. It also provides code snippets for setting intervals, mouse movement listeners, and updating text on a page. The document encourages hands-on practice with JavaScript events, such as creating a simple game, and testing code locally rather than relying on an external domain.

Uploaded by

nehru prasad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

Javascript

Events
Web Authoring and Design

Benjamin Kenwright
Outline
Review
What do we mean by a Javascript
Events?
Common Event Examples
Timer, Key Input, Mouse
Summary
Review/Discussion
Question
Write down a simple `forms’
html/javascript example – which will
trigger (call) javascript function
Answer
Question
Write down an example of a Javascript
object – contains, a variable and a
method
Answer
Question
Write a simple javascript program that
would store a cookie
Answer
Question
Write a simple javascript program that
would ‘read’ a cookie back in from
storage
Answer
Event
What is an ‘event’ in Javascript?
Give some examples of events you
might be interested in?
Where would you use events?
Events/Triggers
Javascript has callback functions that
trigger when specific events occur
For example, timing triggers, mouse
movement, mouse button presses, ...
Timer
Javascript timer is an element of code that
triggers after a certain period of time has
elapsed
There are two types of Timers you can
create in JavaScrit
1. Triggers just once after a certain period of
time
2. Long time firing timers, that continually
triggers at set intervals
setInterval() Method
The setInterval() Method returns a unique
ID with which the timer can be canceled
at a later time
Syntax:
window.setInterval("functionname", time in
milliseconds);
Example:
var intVal = setInterval(function(){alert('Timer
Here')},4000);
Example
Question
What is the name of the Javascript
event timer?

a) SetInterval
b) setInterval
c) setTimeInterval
d) setTimer
Answer
b) setInterval
Stop setInterval() method
If you want to stop the execution of
setInterval() method, call clearInterval()
method and just pass the interval ID
returned by the setInterval() method
Syntax:
clearInterval(intervalVariable)
Example:
var timeVar =
setInterval(function(){alert('Timer
Here')},4000); clearInterval(timeVar);
Question
Javascript event method to stop a timer
is called:

a) stopTimer
b) clearInterval
c) resetInterval
d) killTimer
Answer
b) clearInterval
What does the following
example do?
Answer
Scrolling Image

Image of a fish with identifier ‘i1’ will


scroll across the screen when the timer
is started
Key Press Events
Capture ‘key’ presses

// Add an event listener to the keypress


event.document.addEventListener("keydown", KeyDown, false);
Example
Mouse Events
Mouse Movement

// Add an event listener to the mouse


event.document.addEventListener('mousemove',
MouseMove);
Example
Text Javascript
Place text on screen
e.g., feedback, warnings, ….
Move around/display feedback from
Javascript
<div id=‘msg’>..</div>
document.getElementById("msg").innerHTML=‘..’
Example
Output
Review Events
Timer
Keyboard Input
Mouse Input
Set Text (Move Around Screen)
Example
https://zjnu2017.github.io/WAD/test/javascripsanta.html
Other Events
Other events for you to investigate and try out:

document.addEventListener('mousedown',startDrag,false);
document.addEventListener('mousemove',drag,false);
document.addEventListener('mouseup',stopDrag,false);
document.addEventListener("click“, mouseClick, false);
document.addEventListener("mouseover", overFunction);
Run Locally
Your website should work ‘offline’ locally
if you download the html
e.g., not hardcoded to your github domain
For instance, if you upload it to a
different domain
Professional Design
Consistency
Clean and Logical
Design and Plan First
Use HTML/CSS/Javascript to create your
design/dream
This Week
Review Slides
Read Associated Chapters
Group Project (Christmas Theme)
Website & Javascript Game
Video
Create a Simple Javascript Examples
Test it locally (e.g., local computer in Chrome
or Explorer)
Experiment
Update GitHub Account/Webpage
Summary
Overview of Javascript Events
Javascript Game
Interactive and Dynamic
Hands-On/Practical
Questions/Discussion

You might also like