JavaScript Notes

• DOM selection and manipulation
• Object Types
• Checking Object Types
• Booleans
• Strings
• Decimal Numbers / Floats
• Arrays
• Maps
• Loops, Controlling the Flow
• Math and Algebra
• Regular Expressions / RegEx
• Reserved Words
• Useful Functions

DOM selection and manipulation DOM selection & manipulation querySelector(), querySelectorAll()

// Select an element by its id
// In this case the id="loginbox"
document.querySelector('#loginbox');

// Select an element by its class
// Lets select an element with class="block"
document.querySelector('.block');

// …or select ALL instances of .box  
document.querySelectorAll(".box");
      
// Get the first element that matches the selector
getElementById()

DOM selection & manipulation Add / Remove / Toggle / Check Classes

DOM selection & manipulation createElement()

//If you wanted to create a p - paragraph
let myParagraph = document.createElement('p');

//Lets set the text in the paragraph
myParagraph.textContent = 'I am learning Javascript DOM!';

//Lets add that into a div we already have on the page
document.querySelector('#welcomeDiv').appendChild(myParagraph);
      

object types checking object types A lot of times you want to check what type of object some variable is. Here are some Javascript methods and functions that help you know for sure what kind of variable or data you're dealing with. typeof

let myDecision = true;
console.log(typeof myDecision);
// boolean

console.log(typeof "Hello Pink!")
// string

console.log(typeof 23523.23)
// number

console.log(typeof 23523)
// number

let mixedArray = [121,323,3,223.42];
console.log(typeof mixedArray)
// object

let myMap = new Map();
console.log(typeof myMap);
// object

instanceof

let num = 5.5694235234789;
num instanceof float;

booleans strings Strings split() Split is a handy string method that creates an array of characters from a string Strings charAt() A character is a singlestring decimal numbers / floats floats toFixed() A very handy method for rounding up a decimal to a specified number of digits.

let num = 5.5694235234789;
let n = num.toFixed(2);
// n becomes 5.57

arrays There are several ways to create an array in Javascript:

// FIRST way to create an array
let cities = [];

// SECOND way to create an array
let cities = ["Paris", "Boston", "Nairobi", "Seoul"];

// THIRD way to create an array
let cities = new Array();

// FOURTH way to create an array
let cities = new Array("Seoul","Tokyo","Bangokok");

// FIFTH way to create an array
let cities = new Array(8);

indexOf() and lastIndexOf() indexOf()

let cities = ["Paris", "Boston", "Nairobi", "Seoul"];

cities.indexOf("Seoul");
// returns 3

cities.indexOf("London");
// returns -1 because "London" isnt in the array.

cities.lastIndexOf("Nairobi");
// returns 2

Arrays push(), pop(), shift() and unshift() These four methods are simple ways to add and remove elements from the ends of an array.

let letters = ["j","k","l","m"];
letters.push("n");

// Length/Size of an Array
let numbers = [1,2,3,4];

console.log(numbers.length);
// This prints 4

In Javascript, an array can have different types of object. The same array can contain strings, integers, booleans, etc as its elements. maps A map is a type of JavaScript data structure thats used for mapping keys to values. Unlike a typical JavaScript object, where you can only map strings to values, a map allows you map different types of objects to values. Maps are considered a superior data structure to objects, and should be used for mapping keys to values.
A map also comes with some very useful methods like get(), set(), has(), keys(), entries(), clear(), delete()...

// Lets create a map
let favoriteMovies = new Map();

maps get(), set()

// Lets add objects into our map
let favoriteMovies = new Map();

maps has(), keys() loops, controlling the flow loops & control flow switch A switch statement can be used when there are many cases to compare, when looking for a match.

switch(userScore){
      case 20:
            gameResponse = "too low";
            break;
      }
      case 30:
            gameResponse = "try harder next time";
            break;
      }
      case 40:
            gameResponse = "you almost made it";
            break;
      }
      case 50:
            gameResponse = "good job!";
            break;
      }
      case 60:
            gameResponse = "very good!";
            break;
      }

Math, Algebra, Trigonometry Math.pow(x,y), Math.sqrt(x,y)

// EXPONENTIATION FUNCTIONS
// 2^3 = 2 raised to power 3 = 2 * 2 * 2
Math.pow(2,3)
// returns 8

// 5^4 = 5 raised to power 4 = 5 * 5 * 5 5 * 5
Math.pow(5,4)
// returns 625

// Square root of 99
Math.sqrt(99)
// returns 9.9498743710662

// Square root of 25
Math.sqrt(25)
// returns 5

regular expressions or RegEx Regular expressions are a type of javascript object. You can create a regex to check if a string matches a certain patter. reserved words Reserved words are JavaScripts own words, used in the language itself, used to call data structures, loops, perform operations etc. So you're not allowed to use them to name your variables, constants, properties, or functions. await, break, case, class, catch, const, continue, debugger, default, delete, do else, enum, export, extends, false, finally, for, function, if, implements, import, in, instanceof, interface, let, new, null, package, private, protected, public, return, super, static, switch, this, throw, true, try, typeof, var, void, while, with, yield helpful general purpose functions random number(integer) generator A random number generator, which includes the minimum and maximum sent into it.

// min and max are included 
function randomInteger(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min)
}