Week 1 - Eerste stappen met JavaScript

Variabelen (opslag voor gegevens)#

let naam = "Jamal"; // kan je later veranderen
const geboortejaar = 2005; // kan NIET meer veranderen

Wanneer gebruik je wat?

let -> waarde kan veranderen (bijv. score in game)
const -> waarde blijft hetzelfde (bijv. je geboortejaar)

Datatypes (soorten gegevens)#

let getal = 10; // number (getallen)
let tekst = "Hallo"; // string (tekst, altijd tussen "")
let aanwezig = true; // boolean (true of false)

LET OP het verschil:

10 + 10 // = 20 (rekenen met getallen)
"10" + "10" // = "1010" (plakken van tekst)

Output (laten zien aan gebruiker)#

In de console:

console.log("Test");

Pop-up melding:

alert("Welkom!");

In HTML schrijven:

document.write("Hallo wereld");

HTML element veranderen:

document.getElementById("titel").innerHTML = "Nieuwe tekst";

Input (vragen aan gebruiker)#

// Vraag stellen (pop-up)
prompt("Wat is je naam?");

// Antwoord opslaan in variabele
let naam = prompt("Wat is je naam?");

// Antwoord tonen op pagina
document.write("Hallo " + naam);

DOM selecteren (HTML aanpassen)#

Wat betekent het?

document = je html bestand
getElementById("titel") = zoek een element met id="titel"

HTML:

<p id="begroeting">Hallo</p>

JavaScript:

document.getElementById("begroeting").innerHTML = "Hoi!";

Onthoud: getElementById zoekt het element met die id op

document.getElementById uitleg#

Stapje voor stapje:

document.getElementById("titel")

1. document -> kijk in je HTML

2. get -> pak

3. ElementById -> een element met een bepaalde id

4. ("titel") -> namelijk id="titel"

Voorbeeld:

HTML:

<h1 id="titel">Welkom</h1>

JavaScript:

// Pak de titel
document.getElementById("titel")

// Maak hem rood
document.getElementById("titel").style.color = "red";

Let op: Je id in HTML moet exact hetzelfde zijn als in JavaScript! (hoofdletters tellen)

Teksten samenvoegen#

let voornaam = "Ali";
let achternaam = "Bakker";

// Met + plak je teksten aan elkaar
let volledigeNaam = voornaam + " " +
achternaam;

// Resultaat: "Ali Bakker"
document.write("Mijn naam is " +
volledigeNaam + "!");

// Resultaat: "Mijn naam is Ali Bakker!"

Meest gemaakte fouten#

Console.log -> console.log (kleine letter!)
"tekst' -> "tekst" (zelfde soort aanhalingstekens)
let naam = Jamal -> let naam = "Jamal" (tekst tussen "")
Geen id in HTML -> JavaScript vindt element niet!

Test jezelf#

Wat is de output?

let x = 5;
let y = "5";
console.log(x + x); // = ?
console.log(y + y); // = ?

Antwoord:

10 (number + number = rekenen)
"55" (string + string = plakken)