Scribd
Upload
75 views

Javascript: Events and Functions

The document discusses JavaScript events and functions. It explains that events represent changes to a web page like user interactions or form submissions. Functions allow code to be reused and organized. Events can be handled by assigning functions to run when the event occurs. Functions are defined with a name and parameters, and are called elsewhere in the code. Variables may have local or global scope depending on where they are defined. Event listeners are a better way to handle events than HTML event attributes.

Uploaded by

Ricky Vamba
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
75 views

Javascript: Events and Functions

The document discusses JavaScript events and functions. It explains that events represent changes to a web page like user interactions or form submissions. Functions allow code to be reused and organized. Events can be handled by assigning functions to run when the event occurs. Functions are defined with a name and parameters, and are called elsewhere in the code. Variables may have local or global scope depending on where they are defined. Event listeners are a better way to handle events than HTML event attributes.

Uploaded by

Ricky Vamba
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

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

You might also like