Week 8 - Events, DOM, & Colours

Events

The majority of the notes are in week 7 but I want to summarize the concepts here.

In JS, an Event is an Object. It has properties and methods.

The type of events that we will use most often are the DOM events - click, mouseover, mouseout, DOMContentLoaded, keypress, keyup, keydown, mouseup, mousedown, contextmenu, dblclick, etc. To use them, we need to connect a part of the interface with the Event. This is done with an EventListener. All the DOM Nodes have methods called addEventListener() and removeEventListener().

let mynav = document.querySelector('nav');
nav.addEventListener('click', someFunc);
//we are saying when `nav` has the event `click` happen, run `someFunc`

function someFunc(ev) {
  //ev is the Event object created by the user clicking on the <nav> element.
  ev.target; // this is the Node that was clicked
  ev.currentTarget; // this is the thing that called the addEventListener method
  ev.preventDefault(); // if ev.target or currentTarget was a link, cancel the navigation
  ev.type; // in this case it would be `click`
}

You can use addEventListener to add multiple event listeners to any Node. They will run in the order that you add them. element.removeEventListener(type, func) will remove the listener for events of type type which call the function func from element.

Picsum.photos

Picsum.photos is a great website for embedding placholder images into your website. A Basic url for an image will look like this:

https://picsum.photos/400/200

The 400 is the width and 200 is the height. You can put any integers you want there. With a single number it will be used as both the width and height.

If you want a specific image you can use the id as part of the URL.

https://picsum.photos/id/112/400/200

Here, the 112 is the id of the image. If you want a random image then you need to add seed/ plus a unique string to the URL, before the width and height.

https://picsum.photos/seed/myvalue/400/200

If you want grayscale images, add ?grayscale at the end of the URL.

If you want a blur effect you can also add blur=1 to the end of the queryString. The number must be a value between 1 and 10.

If you want to get some data about an image you can put /info at the end of the request for a specific image instead of the width and height.

https://picsum.photos/id/123/info

Returned images also have a header called Picsum-ID which will provide their id.

DOM

The Week 5 page has three sections which contain all the information you need to know to work with the DOM elements. Hopefully, you have already watched those videos, but if not, make sure you do it now.

Colours in JS

When we generate colours in JavaScript, we are actually just creating string values that have to be in certain format:

p {
  color: #876; /* 3 digit hex */
  color: #a7f623; /* 6 digit hex */
  color: #a7f623ff; /* 8 digit hex */
  color: hsl(120, 50%, 65%); /* hsl values */
  color: hsla(120, 50%, 65%, 0.32); /* hsla values */
  color: rgb(120, 255, 0); /* rgb values */
  color: rgba(120, 255, 0, 0.32); /* rgba values */
}

The browser doesn't care which you write. So, which would you prefer to code?

The hsl, rgb values are 3 random integers.

The hsla and rgba values are 3 random integers and a float value.

The hex colours are 3 or 4 integers converted into hexadecimal.

With any of those approaches you are generating multiple numbers, converting them into strings and then concatenating the strings.

My personal preference is to generate one long number, convert it into a hexadecimal value string and then prefix it with the #. One line of chained methods to create a colour.

let c = `#${Math.random()
  .toString(16)
  .substring(2, 8)}`;

Keyword this

There is a keyword in JavaScript this which can be quite confusing to understand as it's value changes depending on the circumstances of where it is used.

Brendan Eich, the creator of JavaScript, has said that he regrets adding it to the language but did so because of pressure from his superiors to include more Object Oriented features and be more like another new popular language Java.

Despite all that, it can be a useful tool, once you understand how it works.

Learn about this

Call, Apply and Bind

We have been calling functions from the start of the semester using a set of parentheses after the name of the function.

However, there are three methods that allow us to call a function and change the context of how the function runs.

Learn about call, apply, and bind

Arrow Functions and this

Arrow Functions are one of the cases where the meaning of the keyword this changes.

Review Arrow functions and how they differ from other functions

TODO

TODO Before next week

• If you have not read all these notes and watched the videos from this week, do that first.
• Finish reading the notes for week 8 and watch all the videos in the notes for week 9.
• Finish and submit the exercises Exercise 13 - Create Elements and Exercise 14 - Modify DOM before 5pm on this Tuesday.
• Finish and submit Hybrid 9 by next Monday.