JavaScript cheatsheet¶

Kommentit¶

// const a = "a";  for one-line comment

/* const b = "b";
const c = "c";   for multiple lines*/

JavaScriptin muuttujat

JavaScript tarjoaa kolme tapaa määritellä muuttujia: var, let ja const. Näiden välillä on eroja näkyvyysalueen ja muokattavuuden suhteen.

var: Globaali tai funktion sisäinen näkyvyys. Sallii uudelleenmäärittelyn ja noston. Ei suositella uusissa projekteissa.
let: Lohkon sisäinen näkyvyys. Sallii uudelleenmäärittelyn, mutta ei nostoa.
const: Lohkon sisäinen näkyvyys. Ei salli uudelleenmäärittelyä. Arvo on kiinteä, mutta viitattu objekti voi olla muokattavissa.

Suositukset: * Käytä const aina, kun mahdollista. * Käytä let, kun arvo tarvitsee muuttamista. * Vältä var-muuttujia.

Yhteenveto: Eri muuttujatyyppien ymmärtäminen on olennaista JavaScriptin tehokkaassa käytössä. Oikean tyypin valinta parantaa koodin luettavuutta ja vähentää virheitä.

Lisähuomiot: * Temporal Dead Zone (TDZ): let- ja const-muuttujilla on TDZ, mikä tarkoittaa, että niihin ei voi viitata ennen niiden määrittelyä. * Nosto (hoisting): var-muuttujien määrittelyt nostetaan koodin alkuun, mutta arvo on undefined ennen määrittelyä.

let

let counter = 0;                     // can be changed
counter += 1;

const

const studentName = "Teemu Teekkari"; // cannot be changed

Logging¶

console.log("Hello from console!");

Logging-muuttujat:

const studentName = ("Teemu Teekkari");
console.log(studentName); // Teemu Teekkari

Merkkijonojen ketjuttaminen:

Plus-merkkiä (+) voidaan käyttää merkkijonojen ketjuttamiseen

const studentName = ("Teemu Teekkari");
console.log("Hello " + studentName + " from console.log");

Template literals luettavampi, jos mukana on useita muuttujia

const studentName = ("Teemu Teekkari");
console.log(`Hello ${studentName} from console.log`);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Tietotyypit¶

Primitiiviset tietotyypit¶

string

const studentName = "Teemu Teekkari";
console.log(typeof studentName);      // string

number

const studentAge = 25;
console.log(typeof studentAge);      // number

boolean

const isStudentActive = true;
console.log(typeof isStudentActive); // boolean

undefined

let student;
console.log(student);               // undefined

bigint and symbol

Harvoin käytetty (ei tarvita tällä kurssilla)

Objekti¶

avainarvoparit: avaimet ovat “merkkijonoja”, arvot voivat olla mitä tahansa

const student = {
  name: "Teemu Teekkari",
  age: 25,
  major: "Pervasive computing"
};

console.log(typeof student);      // object

const now = new Date();
console.log(typeof now);          // object

Funktio¶

const add = (a, b) => a + b;
console.log(typeof add);          // function

function log() {
  console.log("Hello world!");
}
console.log(typeof log);          // function

Operaattori¶

Aritmeettiset¶

const a = 5;
const b = 10;

console.log(a + b); // 15
console.log(a - b);  // -5
console.log(a * b); // 50
console.log(a / b); // 0.5
console.log(a % b); // 5

let c = 0;
c++;
console.log(c); // 1
c--;
console.log(c); // 0

Vertailut¶

const a = 5;
const b = 10;
const c = "10";

console.log(a == b);  // false
console.log(b == c);  // true
console.log(b === c); // false, Use === and !== instead of == and !=
console.log(b != c);  // false
console.log(b !== c); // true
console.log(a > b);   // false
console.log(a < b);   // true
console.log(b > c);   // false
console.log(b < c);   // false

Loogiset¶

const a = true;
const b = false;

console.log(a && b);    // false
console.log(a || b);    // true
console.log(!a);        // false
console.log(!(a && b)); // true

Control structures¶

If-else¶

Two if-elses:

// 1. a usual way
const a = true;

if (a) {
  console.log("Condition was true");
} else {
  console.log("Condition was false");
}

// 2. an alternative conditional operator
console.log(`a is ${a?"true":"false"}`);

Multiple and nested if-elses:

const age = 18;

if (age < 18) {
  console.log("Age under 18");
} else if (age === 18) {
  console.log("Age is exactly 18");
} else if (age === 19) {
  console.log("Age is exactly 19");
} else {
  console.log("Age is over 20");
}

Switch¶

const age = 18;

switch (age) {
  case 18:
    console.log("Age 18");
    break;
  case 19:
    console.log("Age 19");
    break;
  case 20:
    console.log("Age 20");
    break;
  default:  //Remember to include!
    console.log("Age not 18, 19 or 20");
    break;
}

For¶

for (let i = 0; i < 10; i++) {
  console.log(i);
}

While¶

let i = 0;

while (i < 10) {
  console.log(i);
  i++;
}

let i = 0;

while (i < 10) {
  console.log(i);

  if (i % 2 !== 0) {
    break;
  }
  i++;
}

Do While¶

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 10);

Functions¶

1. Traditional function declaration

Slightly longer syntax:

function printHelloWorld() {
  console.log("Hello World!");
}

2. Fat arrow function declaration (ES6)

Shorter syntax. As a one-liner:

const printHelloWorld = () => console.log("Hello World!");

As a multi-liner:

const printTwoTimes = () => {
  console.log("Hello darkness my old friend");
  console.log("I've come to talk with you again");
};

Formal parameters (function parameters)¶

1. Traditional function

function add(x, y) {
  console.log(x + y);
}

2. Fat arrow function

const add = (x, y) => console.log(x + y);

Actual parameters (arguments)¶

passed during function call:

add(1, 2); // prints 3 to console

Attention

Käännetyt kielet tarkistavat yleensä tarvittavien parametrien olemassaolon etukäteen. JavaScriptiä ei siis skriptikielenä käännetä, joten puuttuva parametri havaitaan vasta ajon aikana. Siinä vaiheessa se voi aiheuttaa ajonaikaisen virheen, jos undefined-arvoa ei voida hyväksyä.

Palautusarvot¶

Perinteiset ja “fat arrow” -funktiot palauttavat arvot eri tavalla; muokattu add()-funktio on esimerkki tästä:

function add(x, y) {
  return x + y;
}
const three = add(1, 2); // Variable three now has a value of 3

“fat arrow”-nuolifunktio palauttaa arvon “implisiittisesti”:

const add = (x, y) => x + y;
const three = add(1, 2); // Variable three now has value of 3

..kun taas monirivinen “fat arrow”-funktio toimii toisin, eikä tee “implisiittistä” palautusta:

const add = (x, y) => {
  console.log(x);
  console.log(y);
  return x + y;
};
const three = add(1, 2); // Variable three now has value of 3

Taulukot¶

Yleiset funktiot

const names = ["Teemu Teekkari", "Teppo Testaaja"];
console.log(names[0]);            // Teemu Teekkari
names.reverse();
console.log(names[0]);            // Teppo Testaaja
console.log(names.length);
names.push("Jaakko JavaScript");
console.log(names[2]);            // Jaakko JavaScript
console.log(Array.isArray(names));// true

Printing array content

const names = ["Teemu Teekkari", "Teppo Testaaja", "Jaakko JavaScript"];

for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

// Or
names.map(name => console.log(name));

DOM funktiot¶

Elementtien käyttö¶

// element with id of example
const elementWithId = document.getElementById("example");  //#example in CSS

// First div element with class swot
const elementWithClass = document.querySelector("div.swot");

// A collection of all elements that match the selector
const elementsWithClass = document.querySelectorAll("div.swot");

// A collection of all elements with specified class name
const elementsWithClass = document.getElementsByClassName("swot");

Toisista riippuvat elementit¶

// element with id of example
const elementWithId = document.getElementById("example");

const nextSibling = elementWithId.nextSibling;
const previousSibling = elementWithId.previousSibling;

const parent = elementWithId.parentNode;

const firstChild = elementWithId.firstChild;
const lastChild = elementWithId.lastChild;

Elementtien lisääminen¶

const newHeader = document.createElement("h2");
newHeader.innerHTML = `<strong>Nice</strong> work!`;

const parent = document.getElementById("container");
parent.appendChild(newHeader);

Tekstin lisääminen elementteihin¶

const newHeader = document.createElement("h2");
newHeader.innerText = "New text";

const parent = document.getElementById("container");
parent.appendChild(newHeader);

Elementtien poistaminen¶

const removeThis = document.getElementById("example");

const parent = removeThis.parentNode;
parent.removeChild(removeThis);

Elementin attribuutit¶

const button = document.getElementById("btn");

// Add attribute
button.setAttribute("disabled", "");

// Remove attribute if it exists
if (button.hasAttribute("disabled")) {
  button.removeAttribute("disabled");
}

Elementtiluokat¶

const button = document.getElementById("btn");

button.classList.toggle("cool");
button.classList.contains("cool");
button.classList.add("cool");
button.classList.remove("cool");

Tapahtumakuuntelijoiden liittäminen¶

Available events

const button = document.getElementById("btn");

const sayHello = () => console.log("Hello world!");
button.addEventListener("click", sayHello);

Tapahtumakuuntelijoiden parametrit¶

const input = document.getElementById("input");
const printInput = (e) => console.log(e.target.value);

input.addEventListener("input", printInput);