JavaScript Cheatsheet

❗✋ NOTE: THIS DOCUMENT IS CURRENTLY UNDER DEVELOPMENT ✋❗

Here we will keep an ongoing list of the logic and code we explore/review in class, categorized by topic.

JavaScript Cheatsheet

Miscellaneous

Single-line comments: // comment!
Multi-line comments: /* comment! */
Browser "console" testing messages: console.log('hello world')

Data types

In Javascript there are eight data types (seven "primitive" data types, plus Object - more on that later). The three primitive types that are most recognizable to beginners are: Number, String and Boolean:

12345.67       // Number (integer, decimal, positive or negative)
'Hello world'  // String ('', "", or ``)
true           // Boolean (true or false)

Arithmetic operators

Will perform some mathematical operation with numbers

5 + 2        // 7
5 - 2        // 3
5 * 2        // 10
5 / 2        // 2.5
5 ** 2       // 25 (exponent)
5 % 2        // 1 (remainder, aka "modulus")
5 + 2 * 3    // 11
(5 + 2) * 3  // 21 (BEDMAS/PEDMAS!)

Variables

Variables hold a single value. Use var, let or const (constant: can not later be changed) to declare a variable the first time. Use = ("assignment operator") to assign a value to a variable.

let name
name = 'Ada Lovelace'

Template literals

String surrounded by back-ticks (`) can contain expressions within it by using the evaluator symbol: ${ }

let name = 'Alan Turing'
`Hey ${name}, can machines think?`  // Hey, Alan Turing, can machines think?

Functions

An executable block of procedural code that can exclusively perform actions and/or return a single value to the point in code from which the function was called. Functions can receive instructions ("arguments") meant to modify its behaviour.

function greetings(name) {
  return `Hello, ${name}!`
}

Call a function by using its name and passing it the desired arguments:

greetings(`Brendan Eich`)   // Hello, Brendan Eich!
greetings(`Grace Hopper`)   // Hello, Grace Hopper!

Here, the string that passed is assigned to name in the function named greetings

Arrow Functions

The same function above can be written using => notation ("fat arrow", or "lamba"):

const greetings = (name) => {
  return `Hello, ${name}!`
}

Arrow functions can be called the same way as standard functions.

Object (literal)

Objects (in this case, referred to as "Object literals") allow multiple values (known as "properties") to be stored in a single structure.

const person = {
  name: 'Dorothy Vaughan', 
  occupation: 'Human Computer'
}

The variable an Object is assigned to is actually holding a reference to the Object, not the Object itself.

Array

Arrays, like Object literals, allow multiple values to be stored in a single structure. However, array values are indexed, rather than named.

const hiddenFigures = [
  'Dorothy Vaughan', 
  'Katherine G. Johnson',
  'Mary Jackson'
]

As with Objects, the variable that Arrays are assigned to, hold a reference to the Array, not the Array itself.

Conditions

A condition can be checked using an if statement. If the "condition" is true, the block will run, if false (or "falsy") it will evaluate the next condition (if one exists).

if ( condition ) {
  // the initial condition
} else if ( condition ) {
  // (optional) condition(s) can be added after the initial "if"
} else {
  // (optional) "default" condition
}

Comparison operators

Comparison operators are binary operators that compare their left and right value or variable, resulting in a Booleans (true or false):

== (equal value), != (not equal to), < (less than), > (greater than), <= (less than or equal to), >= (greater than or equal to)
Comparing both value and type: === (equal in value and type), !== (not equal in type or value)

Other condition evaluation techniques: ternary, case/switch statements

Loops

Coming soon: for, for...in, while, and more.

Utility Libraries

Math library

A few useful Math functions:

Math.random()    // a random number between 0 and 0.999
Math.round(5.5)  // 6, because of standard rounding rules
Math.ceil(5.5)   // 6, ceil (ceiling) always rounds up
Math.floor(5.5)  // 5, floor always rounds down

Document (DOM)

Refer to the entire live browser page with: document. From there, you can search for elements that exist and manipulate them.

document: represents the entire physical interface and all of it's functionality and parts
document.documentElement: The top level container (the <html> Element)
document.body: The container that holds the physical interface (the <body> Element)

Nodes

Element and the Document are both technically a (subtype of) Node. Other Node subtypes are Comment and Text. A good visual explanation of Node types in an HTML document can be found here.

Select a single Element

document.getElementById('submitBtn')  // Finds the HTML element with id="submitBtn"
document.querySelector('.btn')  // Finds only the *first* HTML element with class="btn"

Returns a reference to the first matching Element found, or null if a match is not found. Element references can be stored into variables for recall.

Selecting multiple elements at once

document.querySelectorAll('.btn')  // Finds *all* HTML elements with class="btn"

Will store the found Element references in an array-like structure. To work with the resulting elements, iterate over them using a loop, just as you would an Array:

const allButtons = document.querySelectorAll('.btn')  // Select all ".btn" elements

allButtons.forEach(aBtn => {
  // Each ".btn" Element is now referred to as "aBtn" one-by-one because we declared it so in this function definition (above)
})

Common element properties

Each elements in a document (an Object of type Element in JavaScript) has specific properties and methods defined that allows it to be modified at any time, in real time.

For example, given an element (HTML) structured as such: <h1 class="heading"></h1>. After selecting the element (store the reference as ele), here are a few properties or methods to perform common actions.

const ele = document.querySelector('.test')  // Select an element, store the reference

// Modify the content between the opening/closing tags (treat HTML as text)
ele.textContent = `Hello, world!`

// Modify the content between the opening/closing tags, to include HTML
ele.innerHTML = `Hello, <strong>world</strong>!`

// Modify a single CSS property, like "color" and "text-align"
ele.style.color = `tomato`
ele.style.textAlign = `right`

// Affect the classes applied to an element
ele.classList.add(`highlight`)
ele.classList.remove(`highlight`)
ele.classList.toggle(`highlight`)

// HTML element attributes (get and set)
ele.setAttribute(`title`, `Hello world`)  // Modify/add an attribute (title="Hello world")
ele.getAttribute(`title`)  // Returns the String: Hello world

Physical dimensions of an Element

const ele = document.querySelector('.test')  // Select an element, store the reference

// px sizes of content including padding and border
ele.offsetWidth
ele.offsetHeight

// px sizes of content including padding (but not border)
ele.clientWidth
ele.clientHeight

// px sizes of the element as an exact decimal
ele.getBoundingClientRect().height
ele.getBoundingClientRect().width

// px measurements to an element relative to the document
ele.offsetTop
ele.offsetRight
ele.offsetBottom
ele.offsetLeft

// px measurement (decimal) relative to the window (viewport)
ele.getBoundingClientRect().top
ele.getBoundingClientRect().right
ele.getBoundingClientRect().bottom
ele.getBoundingClientRect().left

Event listeners

Replace ele with a reference to the element you want to make clickable, and place the code to execute (on occurrence of the event) between the { } callback (or "handler").

ele.addEventListener('click', event => {  })

A list of some comment Event types can be found here.

Creating elements

Info on insertAdjacent, innerHTML and createElement coming soon.

Window (and document)

The browser is referred to as the window. The window holds the document.documentElement (aka, the <html> element).

In addition to controlling the browser's history and console (amongst other key components), the window (and the documentElement) can be used to help with interaction by using some of its key properties or methods:

Dimensions

let $doc = document.documentElement  // Select the <html> element (the biggest wrapper there is)

// Window, including scrolls bars (window's outside perimeter)
let windowHsc = window.innerHeight  // window height (px)
let windowWsc = window.innerWidth  // window width (px) 

// Window, not including scrolls bars (inside of the scroll bars)
let windowH = $doc.clientHeight  // window height (px)
let windowW = $doc.clientWidth  // window width (px)
// ** this is weird one! it's obtaining the windows true inner dimensions via the documentElement

// Dimensions of any element (including content and padding, but not border or margin)
let documentH = $doc.scrollHeight
let documentW = $doc.scrollWidth

Window scrolling

// Get the current window scroll position (px)
let scrollPxVert = window.scrollY
let scrollPxHorz = window.scrollX

// Scroll to an element
ele.scrollIntoView()  // hard scroll the window
ele.scrollIntoView({ behavior:'smooth' })  // soft scroll the window

// Scroll to a coordinate in the document
window.scrollTo(0, 0)  // hard scroll the window (x, y)
window.scrollTo({ left:0, top:0, behavior:'smooth' })  // soft scroll the window

Window Events

A few common window events are: 'load', 'scroll', 'resize', 'hashchange'

Timers

Window framerate timer

// use the browser's animation framerate to do something over and over again
let count = 0;  // optional counter

// Function to run over and over (call it whatever you want)
const loop = () => {

  // Check a condition (here, a max number of times it should run: 10)
  // If the limit was hit, escape immediately
  if (++count > 10) return   // "return" quits the function

  // Do whatever the actions is
  console.log(`Iteration number: ${count}`)

  // Loop again if we got this far!
  window.requestAnimationFrame(loop)
}

// Start looping!
window.requestAnimationFrame(loop)

Coming soon: setInterval/clearInterval, setTimeout/clearTimeout, requestAnimationFrame/cancelAnimationFrame

lukastomasek / javascript-overview