JavaScript:
Events and Functions
Events
¤ A browser event represents some change to a
web page
¤User interaction events
¤Web page loads
¤Keyboard events
¤User presses a key
¤Mouse events
¤User presses and releases a button
¤Form events
¤Submit a form
Event Handling
¤ When an event has occurred, we say the event
was fired
¤ You can use JavaScript to do something when
an event has fired
¤Select the element you want to respond to
¤ Select which event on the element you want to
respond to
¤ Write the code you want to run when the event
occurs
HTML Event Handlers
¤ You can include an event handler as an
attribute in a HTML tag
<img src=“logo.png”
onclick=“alert(‘You clicked me’)” >
¤ Inside the double quotes of an event handler
you don’t need <script> tags for
JavaScript
¤ Alternate double and single quotes so they can
be matched properly.
Lab
¤Create a web page that uses an event handler
¤Can add on to your previous lab
Functions
¤ HTML event handlers can only include one
JavaScript instruction.
¤ Call a function to run multiple instructions
¤ A function is a series of instructions grouped
together because they perform a specific task
¤ Functions may:
¤ Perform a task
¤ Accept data
¤ Return a value
¤ Or any
combination of
the three
Functions
¤Allows multiple instructions to be executed
¤Enables modularization
¤Makes code reusable
¤Reduce size and complexity of code
¤Efficiency by avoiding repetition
¤Ensures consistency
¤Modifications are only made once
Defining Functions
¤ Create a function in the <head> </head>
section of an HTML page inside <script>
</script> tags.
function functionName (parameters)
{
a line of JavaScript; another
line of JavaScript; more lines
of JavaScript;
}
Calling Functions
¤To run a function you call it within the <body>
</body> portion of an HTML page.
¤ Functions are not run until they are called in the
body portion of an HTML page.
functionName (arguments);
Functions
¤ Some functions need data to achieve its task
¤ Parameters in the function header act as
variables to hold data sent to the function
¤ If a function is expecting data you must send
the data it needs when you call the function
¤ Arguments represent the data sent to a function
when it’s called
¤ Arguments and parameters are matched 1-to-1
according to their order
Return Values
¤ A function can return data back known as a
return value
¤Return statements return a single value
¤ Functions without a return statement have a
specific purpose that does not require a value
to be sent back to the calling program
¤ Output
Return Values
¤ When calling a function that returns a value
you must do something with the returned value
¤ assign it to a variable
¤ have it be a part of output
JavaScript Files
¤ To better organize your files it’s best to separate
your JavaScript functions into their own file.
¤ Similar to using an external stylesheet for CSS
¤ JavaScript files should use a .js file extension
¤ Enables JavaScript functions to easily be used in
multiple pages.
<head>
<script src="script.js"></script>
</head>
Variable Scope
¤ Where a variable is defined will affect where it
can be used. This called the variable’s scope.
¤ A variable defined in a function can only be
used in that function.
¤Local variable
¤ Function parameters are automatically local
variables
Variable Scope
¤ Variables created outside a function can be
used anywhere in your script.
¤ Global variable
¤ Global variables
¤Convenient for accessing data throughout a
program.
¤Dangerous because it’s hard to keep track of
where they’re being changed.
¤ Use global variables sparingly and intentionally.
HTML Event Handlers
¤ Using an event handler in the HTML mixes HTML
and JavaScript.
¤ Always better to separate HTML(content),
CSS(presentation), and JavaScript(behavior)
¤ Event handlers in the HTML only lets you run one
JavaScript instruction
Event Listeners
¤ Event listeners are a better approach to handling
events.
¤Can handle multiple functions and events on one
element
¤ The web page must first be loaded
¤ Not supported in older browsers
Event Listeners
element.addEventListener(‘event’,
functionName, event flow[boolean]);
¤Event names don’t need to precede
with ‘on’
¤No parentheses after the function
name
¤Event flow is usually ‘false’
var
sw=document.getElementById("lo
go");
sw.addEventListener("click", changeImage,
Event Listeners with Parameters
¤ If the function takes parameters you can’t just
put them in the function call in an event listener
¤ You have to wrap the function call in an
anonymous function
var sw=document.getElementById("logo");
sw.addEventListener("click", function(){
changeImage("logo", "images/sw.jpg");
}, false);
Lab
¤ Modify your lab so your event uses an event
handler
