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)