Hoofdstuk 3: Javascript en de browser (en Object)

In je browser kun je Javascript gebruiken via de console; maar dat is een beetje “flauw”… we willen eigenlijk websites in beweging brengen!

Wil je zelf expermenteren, maak een mapje aan op je laptop/computer en copy-paste deze stukjes code: (PS let op dat windows niet zelfs een bestands-extensie toevoegt, als je ‘new text document’ kiest, maakt windows er .txt van; vraag AI om uitleg hoe je dat fixt)

• maak een bestand style.css met daarin:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f9;
}

.container {
    text-align: center;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

input {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#output {
    margin-top: 20px;
    font-size: 18px;
    color: #333;
    font-weight: bold;
}

• maak een bestand index.html met daarin:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Demo</title>
    <link rel="stylesheet" href="style.css"> <!-- dit laadt de stylesheet in en koppelt het aan de html pagina -->
</head>
<body>

    <div class="container">
        <h1>Input Demo</h1>
        <input type="text" id="myInput" placeholder="Type something here...">
        <button id="myButton">Click Me</button>
        <p id="output"></p>
    </div>

    <script src="script.js" defer></script>
</body>
</html>

• maak een bestand script.js met daarin:

const inputField = document.getElementById('myInput');
const actionButton = document.getElementById('myButton');
const outputText = document.getElementById('output');

actionButton.addEventListener('click', function() {
    const value = inputField.value;
    
    if (value === "") {
        outputText.textContent = "Please enter something!";
        outputText.style.color = "red";
    } else {
        outputText.textContent = "You entered: " + value;
        outputText.style.color = "dark blue";
        inputField.value = ""; 
    }
});

Wat herken je al aan deze Javascript?

Er zitten constantes in, er gebeuren toewijzingen, er staan teksten (strings) in.

Wat is er nieuw?

Je ziet vaak een . staan; dit zijn Objects in Javascript.

Een object is een opslag van eigenschappen. Een eigenschap heeft een naam, en een waarde.

Object

Een object slaat een waarde op bij een sleutel, zodat je die terug kunt halen. Dit noemen we in Javascript eigenschappen (properties in het Engels).

Je kunt een object schrijven in code met {}:

let docent = {
    "naam": "Merijn Vogel",
    "schoolvak": "Informatica",
    "geboortejaar": 1975
    
};

// en informatie er uit halen met de `.`:

console.log(docent.naam);
console.log(docent.schoolvak);
console.log("leeftijd als die al is jarig geweest op 12 september: " + (2026 - docent.geboortejaar));

• Welke eigenschappen heeft het object docent in bovenstaande code?

• Leeftijd is niet een eigenschap van het object zelf, waarom niet?

De DOM / de browser

Laten we even inzoomen op de eerste regel van de voorbeeldcode:

const inputField = document.getElementById('myInput');

We zien een toewijzing (assignment) aan de constante inputField.

Deze wordt gehaalt uit het object document. Dat object is voor javascript de manier om dingen te benaderen die in html staan. Die ‘dingen’ noemen we elementen. Elementen zie je in html terug als de woordjes tussen spitse haakjes, bvb: <p>. Zo’n element in HTML is ook weer een object met daarbinnen eigenschappen, bijvoorbeeld het id. id is speciaal: het identificeert precies dat element[1].

Dan getElementById: dit is een functie die tegelijk een eigenschap is van een object. Een functie in Javascript is, net zoals in Python, code die je kunt aanroepen. [2]

getElementById wordt aangeroepen met een string-waarde als parameter.

Het resultaat van die functie is een object. Dat object heeft eigenschappen die specifiek zijn voor input-elementen van Javascript, zoals value.

[1]: Je kunt natuurlijk de fout maken en een id twee keer gebruiken. Dat mag officieel niet, maar browsers doen toch hun best een pagina met zulke fouten weer te geven; daardoor zie je programmeerfouten in html gauw over het hoofd.

[2]: een functie die ook een property is, heet in Javascript ook wel een method. Je hoeft zelf geen objecten te maken met functies erin voor deze module, al zal ik het in een demonstratie wel een keer laten zien.