Object-Oriented JavaScript — Events

Best way to listen to events.

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at listening to events.

Events

We can listen to events triggered by users.

For instance, we can listen to mouse button clicks, keypresses, page load etc.

We can attach event listener functions to listen to all these events.

Inline HTML Attributes

One way to add event listeners to our elements is to add them as attribute values.

For instance, we can write:

<div onclick="alert('clicked')">click me</div>

We have the onclick attribute with value being the JavaScript code alert(‘clicked’) .

This is easy to add, but hard to work with if the code gets complex.

Element Properties

We can also add them as element properties.

For instance, given the following HTML:

<div>click me</div>

We can write:

const div = document.querySelector('div');
div.onclick = () => {
  alert('clicked');
};

We have the div which we get with document.querySelector .

Then we set the onclick property to a function that runs when we click on the div.

This is better because it keeps JavaScript out of our HTML.

The drawback of this method is that we can only attach one function to the event.

programming javascript technology

Exercise from Eloquent JavaScript. Today, we will write a function that forms a chessboard. You can find the exercise in the Eloquent Javascript book (3rd edition, chapter 2; Program Structure). Write a program that creates a string that represents an 8×8 grid, using newline characters to separate lines. At each position of the grid there is either a space or a “#” character. The characters should form a chessboard.

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.

To paraphrase the title of an old computer science textbook, “Algorithms + Data = Programs.” The first step in learning a programming language such as JavaScript is to learn what types of data the language can work with. The second step is to learn how to store that data in variables. In this article I’ll discuss the different types of data you can work with in a JavaScript program and how to create and use variables to store and manipulate that data.

Professor JavaScript is a JavaScript online learning courses YouTube Channel. Students can learn how to develop codes with JavaScript from basic to advanced levels through the online courses in this YouTube channel.

Async callbacks or promises. Introduction to JavaScript Async Programming