Scribd
Upload
8 views24 pages

lecture07

The document outlines a lecture on JavaScript events and DOM manipulation, covering event handling, the JavaScript file skeleton, and strict mode. It discusses the use of addEventListener for event handling, the module pattern for code organization, and methods for manipulating CSS classes. Additionally, it emphasizes the importance of understanding the differences between visibility and display properties in CSS.

Uploaded by

Furkan Tunç
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
8 views24 pages

lecture07

The document outlines a lecture on JavaScript events and DOM manipulation, covering event handling, the JavaScript file skeleton, and strict mode. It discusses the use of addEventListener for event handling, the module pattern for code organization, and methods for manipulating CSS classes. Additionally, it emphasizes the importance of understanding the differences between visibility and display properties in CSS.

Uploaded by

Furkan Tunç
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/ 24

More Events in JS + Skeleton

File + DOM Manipulation


Lecture 7
Today’s Agenda

● Admin & Reminders


● Continue with JavaScript Events
● Dive into our JavaScript Skeleton File
● Introduce some new DOM manipulation
Even more JS Events
Event Handling
We can use JavaScript to attach functions to elements when an
event (e.g. "click") occurs.
To do so, we need to:

1. Identify the source element to listen for an event


2. Indicate the event to trigger a response
3. Specify the response function(s) to call when the event is
triggered.

Once we have this information, we can use addEventListener


to hook everything up!
Event handler syntax
What’s the difference between these two?

addEventListener("click", openBox);

addEventListener("click", openBox());
Event handler syntax
What’s the difference between these two?

addEventListener("click", openBox);

addEventListener("click", openBox());
addEventListener with multiple events
removeEventListener
Event Objects!
Recall that the event handler function can be attached to objects (window, DOM
elements, etc.)
source.addEventListener("click", responseFunction);

function responseFunction(e) {
// we can access the click Event object here!
}

When the event occurs, an Event object is created and passed to the event listener. You
can "catch" this event object as an optional parameter to get more information about the
event.
Example: event-objects.html
Common Types of JavaScript Events

Name Description

load Webpage has finished loading the document

scroll User has scrolled up or down the page

click A pointing device (e.g. mouse) has been pressed and released on an
element

dblclick A pointing device button is clicked twice on the same element

keydown Any key is pressed

keyup Any key is released

You can find a full list here


JS File Skeleton
JavaScript File Skeleton
/** 1. Strict mode
* Name, section, date, etc.
* Description of program 2. Module pattern
*/ 3. Load event
"use strict";
4. Alias functions
(function() {

window.addEventListener('load', init);

function init() {
// TODO: Your code here
}

function id() { /* TODO */ }


function qs() { /* TODO */ }
function qsa() { /* TODO */ }

})();
JavaScript “strict” mode
"use strict";
… your code …

Writing "use strict"; at the very top of your JS file turns on strict syntax checking:

● Shows an error if you try to assign to an undeclared variable


● Stops you from overwriting key JS system libraries
● Forbids some unsafe or error-prone language features

You should always turn on strict mode for your code in this class!
Example: strict.html
The “module pattern”
(function() {
Statements;
})();

Wraps all of your file's code in an anonymous function that is declared and immediately
called
0 global symbols will be introduced!
The variables and functions defined by your code cannot be accessed/modified externally
We'll use this pattern moving forward for all of our programs.

Example: module.html
Listening to the window “load” event

You can only access document element after the “load” event has fired

"use strict";
(function() {
window.addEventListener("load", init);
// no access to the document here

function init() {
// we now have access to the DOM tree!
// set up your initial document event handlers here.
}
})();

Example: load.html
Handy Shortcut Functions

We will use document.getElementById and document.querySelectorAll a LOT. It's handy to


declare a shortcut to help us out. You may use the following in your JS functions (these are
exceptions to the rule of having description function names).
function id(idName) {
return document.getElementById(idName);
}

function qsa(selector) {
return document.querySelectorAll(selector);
}

function qs(selector) { // less common, but you may find it helpful


return document.querySelector(selector);
}

We will start using these in examples (as well as gen for document.createElement which
we'll see soon)!
A Provided JS Template
We have provided a template you can refer to for the standard JS program structure
here. (Either copy the contents of script.js from the code tab, or "fork" the repl.it
after logging in.)

You are expected to replace the example functions and comment examples with your
own (you may use the same JSDoc comments for id, qs, and qsa as is though).
DOM Manipulation: Classes
Hiding/Showing Elements

How can we hide an HTML element?

.hidden {
display: none;
}

In JS, it’s possible to modify the style properties of an element directly

id("my-img").style.display = "none";

QUESTIONS for you:


1. What’s wrong with that?
2. How can we add/remove CSS classes with JS?
Hiding/Showing Elements

What do we mean by "hide"?

.hidden {
visibility: hidden;
}

QUESTIONS for you:


1. What’s the difference between display: none and visibility: hidden?
2. When might we want to use one vs. the other?
visibility:hidden vs. display:none.
visibility: hidden:
- The element still takes up space on the page, but is just "hidden" (cannot be seen)

display: none:
- The element is hidden by removing it from the page entirely. It's still in the DOM, but
the page will be rendered as if it isn't.
Modifying the classList

You can manipulate the DOM element’s classList with the following methods:

Name Description

add(classname) Adds the specified class(es) to the list of classes on this element. Any that
are already in the classList are ignored.

remove(classname) Removes the specified class(es) to the list of classes from this element. Any
that are already not in the classList are ignored without an error

toggle(classname) Removes a class that is in the list, adds a class that is not in the list.

contains(classname) Returns true if the class is in the the DOM element's classList, false if not.

replace(oldclass, Replaces the old class with the new class.


newclass)
End of lecture (the following slides were
skipped)
Skittles
Today, we’ll access DOM elements and manipulate text and class names via Skittles.

You might also like