Scribd
Upload
4 views2 pages

JavaScript Events and Listeners Guide

This assignment focuses on JavaScript events and listeners, requiring the creation of interactive elements using JSBin. Students will implement click events to toggle visibility of panels, add event listeners to change panel properties, and handle multiple events with a single event handler. Resources and URLs for each step must be documented and submitted via Blackboard with a specified naming convention.

Uploaded by

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

JavaScript Events and Listeners Guide

This assignment focuses on JavaScript events and listeners, requiring the creation of interactive elements using JSBin. Students will implement click events to toggle visibility of panels, add event listeners to change panel properties, and handle multiple events with a single event handler. Resources and URLs for each step must be documented and submitted via Blackboard with a specified naming convention.

Uploaded by

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

Assignment 5 Events and Listeners

JavaScript Events and Listeners

AS.430.619 Advanced Web Development

This assignment will build on the previous modules to look more closely at events and
listeners in JavaScript.

Read through Chapter 6 in your textbook.

Step 1: Click events

• In JSBin, create one button and one div panel in HTML and CSS

• Create an OnClick event that toggles the panel on/off when the user clicks on the
button.

• Create a second panel, hidden by default. When the user clicks the button, the new
panel should show.

The finished code should contain 2 panels. When the button is clicked, the first panel
disappears and the second panel reappears. On a second click, the first panel should appear
but the second will not change.

Q1 Copy URL to your JSBin code and paste in word document

[Link]

Step 2: Event Listeners

This is a great extra resource regarding Event handlers in Javascript


[Link] HYPERLINK
"[Link] HYPERLINK
"[Link]

As introduced in the above video, there are two ways to create a click event. The first is using
the method above, attaching a function to the click property of an element. The second is
add a listener to the element with the addEventListener method.

• In JSBin, write the code to add an event listener that changes the text and color of a
panel by clicking a button.

Q2 Copy URL to your JSBin code and paste in word document


[Link]

Step 3: Handling Many Events

Using Chapter 6 and the following link


[Link]

as resources:

• in JSBin, create several buttons. Referencing the examples in the article above, create
one event handler that will control the events for each button. The event and the
action are your choice.

Q3 Copy URL to your JSBin code and paste in word document

[Link]

Note: The last few modules have served as a fairly light introduction to topics we will dive
much further into once we hit the ArcGIS API modules. If you have any worries regarding
anything we have already covered, please post in the forum or email Philip or I directly.

Upload your word document to Blackboard with a naming convention


LastName_Assignment05

You might also like