JavaScript Cheatsheet

Debugging

Working with the DOM

When you are updating the DOM, there are three things you need to specify in your program:

Some applications of these three considerations are shown below:

// updating attributes
document.querySelector('#my-header').innerHTML = 'Hey there!';
document.querySelector('img').src = "https://media1.britannica.com/eb-media/22/65322-004-8FF21CDA.jpg";

// updating style properties
document.querySelector('.panel').style.background = 'hotpink';
document.querySelector('.panel').style.fontSize = '3.5em';

1. Selector methods

2. HTML attributes

3. HTML element properties

HTML element properties also allow you to navigate through the DOM. A list of common properties and an example are shown below:

HTML

<section class="cards">
    <div class="card" style="background-image:url('images/field1.jpg')"></div>
    <div class="card" style="background-image:url('images/purple.jpg')"></div>
    <div class="card" style="background-image:url('images/jar.jpg')"></div>
</section>

JavaScript

// EXAMPLE
const cards = document.querySelector('.cards');

// get first child of cards:
const firstChild = cards.firstElementChild;
console.log('first child:',firstChild);

// get last child of cards:
const lastChild = cards.lastElementChild;
console.log('last child:', lastChild);

// get first child's next sibling:
const nextSibling = firstChild.nextElementSibling;
console.log('first child\'s next sibling:', nextSibling);

// get last child's previous sibling:
const previousSibling = lastChild.previousElementSibling;
console.log('last child\'s previous sibling:', previousSibling);

// get last child's parent:
const parent = lastChild.parentElement;
console.log('last child\'s parent:', parent);

4. Style properties

Data

1. Figuring out the type of data you have

console.log(typeof "hello world!");
console.log(typeof true);
console.log(typeof false);
console.log(typeof null);
console.log(typeof undefined);
console.log(typeof 23.4);
console.log(typeof 4500);
console.log(typeof [1, 3, 4, 6]);
console.log(typeof { name: "Lester", species: "dog", age: 15});

2. Functions that convert between data types

// String(), Number(), Boolean()
console.log(123, typeof 123);
console.log(String(123), typeof String(123));
console.log("123", typeof "123");
console.log(Number("123"), typeof Number("123"));
console.log("true", typeof "true");
console.log(Boolean("true"), typeof Boolean("true"));

Variables

• Variables are containers for storing and / or referencing data
• Variables can also be used to alias data, functions, variables, objects, functions, etc.
• You assign values to variables using the assignment operator (equal sign)
• Variables are case-sensitive
• Variables should be “camel case”

1. Sample Naming Conventions (Mnemonic & Camel Case)

// variable names:
let timeLeftTilEndOfClass = 35;
let firstName = "Jazmin";
let lastName = "Morales";

//function names:
const divideTwoNums = (num, denom) => {
   return num / denom;
};
const moveAvatarLeft = (dog) => {
   dog.x -= 1;
   dog.redraw();
};

2. Declaring Variables

In JavaScript, there are three keywords for declaring variables: let, const, and var.

let Means that the variable may be reassigned / can be changed.

const Means that the variable won”t be reassigned. It’s “immutable.” Used in cases where you declare and assign once, but don’t change it afterwards.

var Avoid. Old way to do things prior to ES6. “The weakest signal available” — “The variable may or may not be reassigned, and the variable may or may not be used for an entire function.”

Operators

1. Arithmetic Operators

2. Comparison Operators

Comparison operators always evaluate to true or false and are often used with if/else statements and loops.

See W3 Schools for more information and examples.

3. Logical Operators

Functions

• Functions are a way to encapsulate and re-use code
• With functions, you can perform the same operations over and over using different data
• JavaScript has many built-in functions
• You can also create your own functions

1. Syntax

const nameOfFunction = (parameters) => {
    statement 1;
    statement 2;
    ...
    return someValue; //optional
};

Avoid Older Syntax

While you will see the syntax below in many web posts, avoid if possible (to maintain consistency with newer versions):

// Old JavaScript syntax (avoid)
function addTwoNums(num1, num2) {
   	return num1 + num2;
}

// Old JavaScript syntax (avoid)
var document.querySelector(‘button’).onclick = function(num1, num2) {
   	return num1 + num2;
};

2. Terminology

Events

When JavaScript is used in HTML pages, JavaScript can “react” to particular “events,” which include (among others):

• onchange
• onclick
• onmouseover
• onmouseout
• onkeydown
• onload

1. Making events work for you

Events are comprised of two parts:

1. Event Listeners: refer to the particular interaction / thing to which you want to listen.

2. Event Handlers: snippets of code that you want to execute when the event listener triggers the event.

For instance, if I want to attach a “click” event listener to the button with the id of “subscribe”, I would assign the onclick event of that button to a function that I specify. Example:

HTML

<button id="subscribe">Subscribe</button>

JavaScript

// event handler:
const subscribe = () => {
   	alert('Perform subscribe functionality...');
};

// event listener:
document.querySelector('#subscribe').onclick = subscribe;

Therefore, to create an event-driven interaction, you need to tell your browser three things:

2. The “Event” object

When you attach an event handler (i.e function) to an event, an event object is passed to the event handler when it is triggered. This event object offers some useful information about the event that has just been fired, including:

1. target: The element that triggered the event (target)
2. currentTarget: The element whose event listeners triggered the event

You can learn more about the distinction between the target and the currentTarget here.

Note in the example below, ev.currentTarget is used to detect which button was clicked, in order to change the document background to the appropriate color:

<button id="color1" type="button">teal</button>
<button id="color2" type="button">hotpink</button>
<button id="color3" type="button">yellow</button>

// event handler:
const changeColor = (ev) => {
    console.log(ev);
   	const sourceElement = ev.currentTarget;
   	document.querySelector('body').style.background = sourceElement.innerHTML;
};

// event listener attach to all of the buttons:
document.querySelector('#color1').onclick = changeColor;
document.querySelector('#color2').onclick = changeColor;
document.querySelector('#color3').onclick = changeColor;