Name: JavaScript Basics: Flinging Event, Element, and Object Bombs at Zombie Heads
Author: John Rhea

Got basic programming skills but are new to JavaScript? Ready to pitch in and save humanity from the zombie hordes? Now you can do both at the same time.

JavaScript Basics:  Flinging Event, Element, and Object Bombs at Zombie Heads

JavaScript makes your pages dance, move and interact. For a front-end developer, it’s a fundamental skill.

JavaScript

Raw JavaScript

JavaScript Basics: Flinging Event, Element, and Object Bombs at Zombie Heads

Preface

JavaScript is an object-oriented language, but differently so than other, more "classically" object-oriented languages, like C, C++, Java, C#, and so on. For JavaScript, an object is an encapsulation. It takes a thing and sort of builds it in code, keeping track of information about the object (properties) and things the object can do/has done (methods). To borrow the metaphor from the previous book where a variable is a bucket in which you can put things, an object is more like a bucket filled with smaller buckets called properties. These are an object's own personal variables and represent information about the object, and they also come with a set of instructions on how those buckets can interact or what can be put in those buckets (these instructions are called methods and are like an object's personal functions).

Undead Objects

You saw a bunch of if-else statements and even if-else-if-else statements in the last book, An Introduction to Programming in JavaScript: Stomping Zombies with Variables, Loops, Functions, and More . While you can use the if-else-if structure to chain together distinct possibilities for different cases, it can get pretty convoluted if you have more than two or three else-ifs. For instance, here's a function using if-else-if that makes a zombie's breath worse (because a zombie's breath never gets better).

Beating Zombies with a Switch

Now, if you were the field commander for a human refuge, you'd be used to barking out orders as you and your refuge fought off the zombies, right? You'd tell Fred and Nancy and Sam what to do, and they'd do it. This is like calling functions by name to do things for you. But if you need to do something for yourself—like inject yourself with the zombie antidote—you wouldn't talk to yourself in the third person (well, John, the author, might talk to John in the third person, but you wouldn't). You would call yourself "self" or "me" or "Zombie Killa Xtreme!" (Okay, that last one was only something John would say to John.) It's the same thing with functions. If you're trying to do something to the thing that called the function, you wouldn't use the function's name. Instead, you would use a special keyword: this. We'll be using "this" in the next section when we call functions from an object on that same object.

"This" Zombie Is Important

In our zombie object, we can also have methods (think functions, but specific to an object) that update or change properties. We can expand our zombie object from before (I've added some comments explaining each function):

I Find Your Methodology Apocalyptic

When the browser processes a web page, it creates an object out of it, which is called the DOM (rhymes with zombie bomb). The object includes everything from the browser showing the page to the size of the browser window to a representation of the web page. In this representation, the document, each HTML tag is a node and laid out in what computer scientists call a tree structure. So, if you had the following HTML code:

The Document Object Model

In the tree structure, we've discussed that every element is a node within the tree, whether it's a leaf (has no children) or branch (has one or more children) of the tree. You can traverse the tree by going from grandparent to parent to child and so on down the line, or you can go up the tree from child to parent to grandparent. You can also go sideways to an element's siblings, but this can be a little more complicated, since there's no direct relationship between an element and any of its siblings. The relationship between siblings is through the parent in the tree. So, each element is a node, and you can jump from one node to the next, but there is also a second kind of node, called a text node. This will be any straight text in the tree (i.e., text that does not have any HTML within it). Thus, this:

Apocalypse Nodes

In order to manipulate the elements in the DOM, you have to first learn how to select the elements from the DOM that you want to manipulate. But don't worry. If you're familiar with CSS selectors, you're halfway there. There are three major ways to select elements from the DOM.

Selecting the Elementally Undead

One of the easiest ways to change an element in the HTML is to add a new class to it (or take one away). This allows styles to be added, changed, or removed without needing to put all the CSS in the JavaScript. It helps with the separation of structure, form, and function and makes the editing easier. CSS will be found in a CSS file and not somewhere in your JavaScript.

Classing up the Zombies

You can also do something to all elements in a HTMLCollection (or an array) at once using the map function. Map applies a function to every element in an array or a node list (for querySelectorAll()).

Map Out Your Zombie Offensive

You can also modify the CSS on any element from JavaScript using the style property. CSS properties in JavaScript use the same word/words as in CSS. For instance:

The Cascading Horde

Sometimes you'll want to collect a bunch of elements, but you may not want to put them in a div or other element because it wouldn't be semantically correct or because it would add extraneous code. For instance, if you needed to add multiple refuges/safe havens to the list above, but the ul was already on the page and already had list items in it.

Fragmenting the Horde

One way you can encode and read content using HTML is through the HTML5 data- attributes. These are custom attributes whose name and value you can set to just about anything you like (as long as the attribute name starts with data- and you don't include any additional hyphens in the attribute name). Once these types of attributes are on an element, you can access the data encoded in them by selecting the element and using the dataset property, followed by a period and the name you put after the data-. Take a look at the below HTML:

Apocalyptic Data and Attributes

Often on a web page, you want to do something in response to something else—that is, an event. You might change the color of an element when a user mouses over it or, once a page loads, test whether a user is a human or a zombie. There are many events in JavaScript, but the most common, by far, is the click event. While it sounds mouse oriented, it's also fired when a touchscreen tap happens, so it's useful in both contexts.

Events...Like the Apocalypse

One of the interesting things about JavaScript is that functions are objects too. So, you can save them to a variable or run them by referencing them. Sometimes you'll have a situation where you want to run a set of code in response to an event, but you don't need to use that script anywhere else.

The Anonymous Undead

An event listener, once created, will fire every time the event happens. This is often what you want, but sometimes you want to only start a process or wait to start it until after another button is pushed. If you want to disable input for a short time (like preventing zombies from knocking on the door while you're indisposed in the restroom with your favorite web development book—"Can I please just have five minutes! For crying out loud. Can't the apocalypse get some cereal from the table for itself? Okay, I'm sorry. Don't cry. I'll be out in a sec."), you can set a Boolean that will prevent the input from being processed during your...um..."me" time.

Removing the Zombie Event Listener's Hearing

There are a wide variety of events to choose from, but they fall into two major camps:

The Apocalypse Was&hellip;Eventful

One more thing to know is about the try-and-catch error-handling structure. This allows you to discretely handle erroneous behavior. The try block will attempt to run some code. If it's successful, congrats, you've just run some JavaScript and taken out a few zombies. If, however, there's an error or warning, the catch block will catch the error and try to process it. This is a great place to create clear and concise messages of how the error relates to user input or what the user can accomplish or change, such as clearing the cache or using a different and/or more updated browser. While I would be careful with this, you can also choose to have the try block fail quietly. This should only be done if the error won't affect the user/use on the site and/or if the error would worry or distract the user. You can also suppress an error for a time while you attempt an action again, like reconnecting to the server. If, however, whatever you are retrying continues to fail, notify the user of the issue so that they are aware of it and how it might affect their use of the site.

Catching a Trying Zombie

Given the HTML in the links below (a set of zombie dating profiles for the Undying Love Dating Service), perform the following tasks via JavaScript:

Undying Love Dating Profiles

Join the Undead Institute Facebook group and get answers. https://www.facebook.com/groups/undeadinstitutehelpforum

Got Questions?

John is a storyteller with design and development skills. By day he designs and builds websites and mobile apps, by night he spins sci-fi stories at StoryLab ( https://storylab.us ) and counts his words carefully at https://8wordstories.com . He's a pineapple in disguise https://pineapplecomics.com and (as you know) tries to make learning web development fun by helping you kill zombies https://undead.institute . He's been lucky enough to collect a wife and five kids along with six cats, four dogs, and a small army of fish. If he remembers to wear pants, it's been a good day.

JavaScript Basics: Flinging Event, Element, and Object Bombs at Zombie Heads

Details

Description

Creator

John Rhea

Content

Reviews

Frequently Asked Questions

JavaScript Basics: Flinging Event, Element, and Object Bombs at Zombie Heads