Week 6: Advanced JavaScript

Attributes, Arrow Functions, Callbacks, Events, Event Listeners

Attributes

We may want to add or remove interaction between HTML and JavaScript. Typically, we may want to add some interaction to our page!

And this is where JavaScript comes into play.

To do so, we need to get the element on the page with either getElmentById or querySelector.

Then we can use either the setAttribute or removeAttribute function to set or remove the attribute.

• setAttribute element doesn’t add an additional value; it overwrites.

Arrow Functions

We have used function…by assigning the function to a variable.

or…

create a function directly — >

And a third method to create a function is called the arrow functions. And this is a commonly used method. Instead of using a word function keyword, we use an arrow =>.

And the function that doesn’t need any parameters… it looks like:

Callbacks

Functions are an extremely important part of programming and in the field of front-end web development.

To review…

• functions are reusable codes we can use or “call” over and over again in our scripts.
• One method: create by first writing the keyword function

And we specify what id, cssClass are when we “call” the function later on.
Just like… changeClass('myElement', 'cool');

• Second method: arrow function; where we use =>

Functions can be passed into other functions as parameters.

Two ways to pass functions into other functions.

• One way: assign our function to a variable. By setting JavaScript built-in setTimeout function. This is simply setting a timer.

And Done! would be printed to the console after 5 seconds.
We did not need to name the function because we assigned it to a variable (“setTimeout”)

Event Listener

In the past, in order to use the event listeners, like clicking and do something, or do not… web developers usually used HTML button element to their HTML page and assigned a JavaScript function to it.

Instead, we will separate our codes HTML and JavaScript.

An event listener does exactly what its name implies- it listens for events.

We not only need to create the element, the function to be executed when the event occurs, but also the event listener.

• So from now on, I will be using event listeners with callback functions in JavaScript, instead of using HTML attributes for events.