Javascript Cheatsheet

Iterate through a string

for (let char of text) {}

Iterate through the keys of an object

for (let key in obj) {}

For loop with pause at any iteration

for (let i = 0; i < 5; i++) {
  setTimeout(() => {                            // Pause at any iteration for 5 seconds / 5000 ms
    console.log("hey");
  }, i * 5000);
}

While loop with break condition

while (x < 4) {
    if xyz === "abc" {break}
}

Do While loop with break condition

do {} while (x < 4)

Endless while loop - has to be exited somewhere

while (true) {}

Iterate through array by elements (x)

arr.forEach((x) => {
    console.log(x)
})

Are all falsy values - can checked with if (xyz)...

0,"",'',null,undefined,NaN

Ternary Operator for if - if isNight=true then s=Night - else s=Day

isNight ? s="Night" : s="Day"

FUNCTION

Normal Function Decleration

function addFunc(x=0,y=0) {    // Define a function    - with default value 0 if no input is given
    let erg = x+y              // Calculate erg
    return erg}                // Return erg value
addFunc(3,5)                   // Function Call

Function Expression (used for anonymous functions)

const add = function(x,y) {...}     // Define a function expression (function is assigned to an variable
add(3,5)                            // Function Call

Anonymous Function with Fat Arrow syntax

const add = (x,y) => {...}
add(3,5)                            // Function Call
let h = a => a % 3                  // Even shorter without parentees

return-statement with "?" or "||"

return (age > 18) ? true : console.log('Did parents allow');    // When age > 18 returns true - otherwise output something in the console
return (age > 18) || console.log('Did parents allow');          // Same logic with "||"

Use Rest Parameters to accept any number of arguments

function max(...numbers) {                // Any numbers of arguments
    => do something with a loop
}

AddEventListener with parameters in the function

document.querySelector("#dayToday").addEventListener("click",function() {   // define addEventListener as normal but use "function ()"
    toggleBackground("today", 6)                                            // call the function with parameters inside
}, false);

OBJECT

Define an object (literal syntax)

let obj = {}

2nd method to define object (construtor syntax)

let obj = new Object()

properties = attributes of the object (eg. color, shape, minutes, seconds)

Define an object and initialize it

let obj = {
    name: "John",
    age: 30,                // last "," i allowed and called trailing / hanging (its easier so to add/remove/move properties of the object)
    shout() {               // Defines a method for the object
        return "Hurra!"
    }
}

Access property / shows value of the key "name" (1st method) => John (dot.notation)

obj.name

Shows value of the key "name" (2nd method) => John (bracket notation)

obj["name"]

Shows key "age" of the object => 30 (dot notation)

obj.age

Add a new propertie to the object

obj.newOne = "xyz"

Add a new method to the object

obj.newMethod = function(var) {...do someth...}

Call the new method

obj.newMethod(25)

Check if key is in the object

age in obj

Delete a property of an object (dot notation)

delete obj.age

Delete a property of an object (bracket notation)

delete obj["age nr"]

Check if a property / method is in an object

if ("property" in obj) {...}

Read the keys of an object into an array

arr = Object.keys(obj)

Read the values of an object into an array

arr = Object.values(obj)

Read alle key / value pairs of an object into an (nested) array

arr = Object.entries(obj)

Check if xyz i part of the object

obj.hasOwnProperty("xyz")

Check if Object is empty

Object.keys(obj).length === 0 && obj.constructor === Object

Iterate through the keys of the object and outputs key and value

for (let key in obj) {
    console.log(key, obj[key]
}

Other example for an object
teacher count must have quotations cause it contains a space character

var school = {
  name: 'The Starter League',
  location: 'Merchandise Mart',
  "teacher count": 10
  students: 120,
  teachers: ['Jeff', 'Raghu', 'Carolyn', 'Shay']
};

CONSTRUCTOR, CLASS

4 Pillars of Object Orientation
Make a Object with the old method

function MakeCar (carMake,carModel,carColor){       // Define the constructor function
    this.make = carMake,                            // Define properties for the constructor
    this.carModel = carModel,                       // "this" is referencing to the actual object
    this.carColor = carColor,
    this.honk = function(){                         // Define a mtehod for the constructor
        alert(`BEEP ${this.carModel} BEEP`)         // Alert something when the method is called (with prop this.carModel)
    }
}
let car1 = new MakeCar("Honda","Civic","black")     // Create a new car1 (with codeword "new")
let car2 = new MakeCar("Tesla","Roadster","red")    // Create a new car1

Make a Object with the shorthand

let robotFactory = (model, mobile) => {             // Define constructor with two parameters
    return {
        model: model,                               // property1
        mobile: mobile,                             // property2
        beep(){                                     // method
            console.log("Beep Boop")
        }
    }
}

Make a Object with the new class method (longhand)

class MakeCar{                                      // Define the classs
    constructor (carMake,carModel,carColor){        // Define properties for the class
        this.make = carMake                         // Assign the properties of the class to the concrete individual object
        this._carModel = carModel                    // "this" is referencing to the actual object (use "_" to indicate that this properties should only changed with getters)
        this.carColor = carColor
    }
    honk(){                                         // Define a method for the class
        alert("BEEP ${this.carModel} BEEP")         // Alert something when the method is called (with prop this.carModel)
    }
}
let car1 = new MakeCar("Honda","Civic","black")     // Create a new car1 (with codeword "new")
let car2 = new MakeCar("Tesla","Roadster","red")    // Create a new car1

Give new property and function

MakeCar.prototype.wash = true                       // Give all the created cars from the class "MakeCar" a new property "wash"
MakeCar.prototype.newFunc = function () {           // Give all the created cars from the class "MakeCar" a new function "newFunc"
    console.log("We have a new function!"
}

Define a getter in the class (returns the name-property of the class-element
So when somebody is requesting for obj.name - the return will be for _name
When somebody is changing with obj.name = "xzy" - nothing happens, cause the property is named _name
Of course with obj._name there would be a change possible - but this is very bad practice cause due the "_" the variable should not be touched

  get name() {
    return this._name;
  }

Inherit a class from another class
The class Cat inherits from the class Animal with the keyword "extends"
With super - the attributes name and age will be taken / inherit from the class Animal

class Animal {
  constructor(name, age){
	this.name = name
	this.age = age
  }
  speak() {
	console.log("Blablabla")
  }
}

class Cat extends Animal {
  constructor(name, age, usesLitter) {
    super(name, age);
    this._usesLitter = usesLitter;
  }
}

Define static function - this can only be done for the class itself (or for the instances of the class)

    static generateName() {...}

OBJECT ORIENTATION - 4 PILLARS OOP

DOCUMENT, QUERYSELECTOR, EVENTLISTENER

4 pillars of object orientation in practice
Add Eventlistener

document.querySelector('#check').addEventListener('click',func1)        // New Method / create an Event Listener / execute function "func1" when mouse is clicked
...'onmouseenter'...                                                    // New Method / create an Event Listener / exceute function "func2" when mouse-cursor is over the element
...'input'...                                                           // Event Listener with trigger input
...'change'...                                                          // Event Listener with trigger every change in the element
...'mousemove'...                                                       // Event Listener with trigger when mouse is moved over the element
...'transitionend'...                                                   // Event Listener with trigger when the transistion ends
document.getElementById("green").onclick = funcGreen                    // Old Method / Waiting for click on this element (by ID) as a "event-listener"

E.G. document.querySelector('idBlue').addEventListener('click',changeToBlue)

function funcGreen() {                                      // Define function
  document.querySelector("body")
    .style.backgroundColor = "rgba(241,63,247,1)"           // Change BackGroundColor-Style to rgba-color green (as inlinecode in the rendering - not in the html-code)
  document.querySelector("body").style.color = "white"      // Change Fontcolor to white (as inlinecode in the rendering - not in the html-code)
}

Use EventListner for alle elements with a specific class

let elements = document.querySelectorAll(".panel");             // Select all elements with class "panel"
elements.forEach(elem => elem.addEventListener("click",func1))  // Iterate trough every element and create EventListener - when clicked start func1 for the element
function func1() {                                              // Function is run with the activated Element for the EventListener
    this.classlist.toggle("newClass")}

Old Method / Select an element by ID

document.getElementById

New Method / Select (first) a or .class or =>id

document.querySelector("xyz")

Select all elements which have h2 and store it in the constante c

const c = document.querySelectorAll("h2")

Element-Listener waiting for a click7

.onclick

Change BackgroundColor

.style.backgroundColor

Change Font Color

.style.color

Hide element in DOM

.style.display = "none"

Change Text of the selected element

.innerText = "xyz"

Concatenate 3 variables with space between (old method)

.innerText = v1 + " " + v2 + " " + v3

Concatenate 3 variables with space between (new method with the "`"-char called template string)

.innerText = `${v1} ${v2} ${v3}`

Read the value/text of the field

.value

Show the ID of the selected element

.id

Set the src of a image

.src

Change class of the element to "MyClass"

.className = "MyClass";

Manipulate classes informations

.classList

Toggle the class hidden (when triggered class is deleted OR added (when the next click occured)

.classList.toggle("hidden")

Add the class hidden

.classList.add("hidden")

Check if element contains class "cl"

.classList.contains("cl")

Remove the class from the element

.classList.remove("wiggle")

Call function "func1" every second (1000ms)

setInterval(func1, 1000)

{do something},10000) => Do something any 10 seconds

setInterval(()

Func1 is running with a delay of at least 2 seconds (with own seperate function)

setTimeout(func1, 2000)

{do something},1000) => Do something and wait 1 second (function direct in the statement)

setTimeout(()

Add some elments to an ul-element

var li = document.createElement("li")           // create new li-element
li.textContent = "new text"                     // add text to the new element
document.querySelector("ul").appendChild(li)    // append the new li-element to the ul-element

CSS VARIABLE HANDLING

Read all control- and input-elements

let inputs = document.querySelectorAll(".controls input");

input.addEventListener("change", handleUpdate)); => Wait for change in any element and call the function "handleUpdate"

inputs.forEach(input

Handle Update

function handleUpdate() {
    const suffix = this.dataset.sizing || '';       // read the sizing-parameter for the triggered element (used data-sizing in html)
    document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
        // set the variable in css (name according to --name in css)
        // use the value from the read element from the adventlistener
        // and use the suffix which is read above
        // full property looks eg. like "--spacing: 10px"
}

API ACCESS

request data from API get data back in JSON format
Reading / Fetching the informations from an API-url
Request the API-content and output as JSON-information
alle the information is stored in data
last part is the error handling when something wrong happens

fetch(url)
    .then(res => res.json())
    .then(data => {
        console.log(data)
    })
    .catch(err => {
        console.log("error ${err}")
    });

Using a API using async / await

async function getSomethingFromAPI() {
	const res = await fetch("url").catch(e => {
		console.log("Error - Fetch not possible...")
	})
	if (!data) {
		console.log("Error - Data / JSON wrong...")
	} else {
		const data = await res.json()
		console.log(data)
	}
}
getSomethingFromAPI()

JQUERY

ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> => include before body-tag