ICT Module 294

cheatsheetM294.md

General

Math

var random = Math.random(); //random num 0-1
var randomInt = Math.floor(Math.random() * 100); //random int 1-100

Arrays

const fruits = ['orange', 'apple', 'banana'];
const newFruits = [...fruits, 'pineapple'];
/*or*/
const newFruits = fruits.append('pineapple');

const arr = ["value", "other value"];
arr.forEach((item) => {
  console.log(item);
});
const arr = {name: "Noah", age: 16};
for(var key in arr){
  console.log(key + ":" + arr[key]);
}

arr.push("test") //adds to array
arr.push(...arr) //adds array items to array
arr.unshift("test") //adds in front of array
arr.pop() //remove item from end of array
arr.shift() //remove item in front of array
arr.splice(0, cantons.length / 2) //splices half of array
cantons.sort(() => 0.5 - Math.random()); //shuffles array

arr.includes("text") // returns bool if "text" in array

DOM Selectors

Selectors

document.getElementById("htmlId"); //selects #htmlId
document.querySelector("#htmlId"); //selects like CSS
document.getElementsByClassName("htmlClass"); //selects by class

Manipulation

document.getElementById("htmlId").classList.add("mystyle"); //adds class to element
document.getElementById("htmlId").style.display = "none"; //hides element
document.querySelector("#htmlId").remove(); //deletes an element
document.querySelector("#htmlId").innerHtml = "new text"; //changes html text

Create Element

var node = document.createElement("h1"); //-> <h1></h1>
node.setAttribute("id", "htmlId"); //adds id to h1
node.setAttribute("class", "htmlClass"); //adds class to h1
node.setAttribute("src", "../img.png"); //adds src (for img)
var text = document.createTextNode("Your Title here");
node.appendChild(text); //-> <h1>Your Title here</h1>
document.body.appendChild(node); //adds title to end of body

or

var title = document.createElement("h1"); //-> <h1></h1>
title.setAttribute("id", "htmlId"); //adds id to h1
title.setAttribute("class", "htmlClass"); //adds class to h1
title.setAttribute("src", "../img.png"); //adds src (for img)
title.textContent = "Your Title here"; //-> <h1>Your Title here</h1>
title.innerHTML = "Your <b>Title</b> here"; //-> <h1>Your <b>Title</b> here</h1>
document.body.append(title); //adds title to end of body

HTML

Iput validation

The datalist displays shows possible "answers" and the pattern checks it.

<input type="text" required pattern="[Bb]anana|[Cc]herry" list="l1">
<datalist id="l1">
  <option>Bannana</option>
  <option>Cherry</option>
</datalist>

How to call function on click

<button id="htmlId" class="htmlClass" onclick="functionName()">Click!</button>

or

document.querySelector("#htmlId").addEventListener("click", "functionName()");
document.querySelector("#htmlId").removeEventListener("click");

Forms

Design

<fieldset>
  <legend>Kategorie</legend>
  ...
<fieldset>

Submit Event Listener

document.querySelector("form").addEventListener('submit', (ev) => {
    const formData = new FormData(form);
}

Event listeners

element.addEventListener('event', ...);

• mouseover
• click
• mouseout
• resize
• mouseup
• mousedown
• dblclickmouseout
• keydown
• keypress
• keyup
• focus
• blur
• change
• submit