JavaScript Methods (Web API)

Global scope

setInterval

setInterval() repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.

The example below will call function every 1000 milliseconds (1 second).

1
let timerId = setInterval(function, 1000);

clearInterval

clearInterval() cancels a timed, repeating action which was previously established by a call to setInterval().

1
clearInterval(timerId)

EventTarget

EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them. Element, Document, and Window are the most common event targets.

addEventListener

addEventListener() sets up a function that will be called whenever the specified event is delivered to the target, here it will fire when the DOM is loaded. This is the same as jQuerys $(document).ready(function() { });.

The syntax is [TARGET].addEventListener('event', function), common targets include

  • element
  • document
  • window

Some common events

  • onclick
  • keydown
  • keypress
  • keyup
  • click
  • auxclick
  • contextmenu
  • mousedown
  • mouseenter
  • mouseleave
  • mouseover
  • mouseout
1
2
3
4
5
6
7
8
9
document.addEventListener('DOMContentLoaded', () => {
    console.log("foo");
});

document.addEventListener('keyup', control);

document.querySelector('#start-button').addEventListener('click', () => {
    console.log('startButton clicked');
});

removeEventListener

Removes the event listner.

1
document.removeEventListener('keyup', control);

Document

The Document interface represents any web page loaded in the browser and serves as an entry point into the web page’s content, which is the DOM tree.

querySelector

querySelector() returns the first Element within the document that matches the specified selector

1
const grid = document.querySelector('.grid');

querySelectorAll

querySelectorAll() returns a static node list representing a list of the document’s elements that match the specified group of selectors.

For the ids like #score we can also use document.getElementById('#score')

1
2
3
let squares = document.querySelectorAll('.grid div');
const scoreDisplay = document.querySelector('#score');
const startButton = document.querySelector('#start-button');

Element

classList

classList is used to access an element’s list of classes as a space-delimited string.

classList.add then appends to it.

1
div.classList.add("foo", "bar", "baz");

classList.remove then appends to it.

1
div.classList.remove("foo");

classList.contains checks if the class exists then returns true if it does, else returns false.

1
div.classList.contains("foo");

appendChild & createElement

appendChild allows us to append elements to an existing element, here the element that to be appended is created with createElement

1
2
3
const grid = document.querySelector('.grid');
var square = document.createElement('div'); // creates an HTML element of div
grid.appendChild(square);

KeyboardEvent

keyCode (DEPRICATED)

1
2
3
4
5
6
7
8
9
10
11
12
13
function control(e) {
    if (e.keyCode === 37) { 
        moveLeft()
    } else if (e.keyCode === 38) { 
        rotate();
    } else if (e.keyCode === 39) { 
        moveRight();
    } else if (e.keyCode === 40) { 
        moveDown();
    }
}

document.addEventListener('keyup', control);

References