402 Tag Id Class

• newEditor
• Programmeren
• Middelbare school
• havo, vwo
• Leerjaar 4

JAVASCRIPT

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

THIS EPISODE …

• Stijl van elementen dynamisch aanpassen met classList

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

PREVIOUSLY ON ...

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

Welke elementen, concepten en functies hebben wij tot nu toe behandeld?

CONTENT

CONCEPTEN

functies

tag

id

class

if - else

for loop

innerText

innerHTML

FUNCTIES

alert()

prompt()

getElementById()

getElementByClassName()

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

CONCEPTEN

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

function functieNaam(parameter) {}

• Functies zijn code die jij vaker kunt herhalen

• In Python gebruikte we inspringen om aan te geven wat in de functie hoort

• In JavaScript gebruiken we accolades om aan te geven wat in de functie hoort

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

<p id="idNaam">Tekst</p>

• Ids zijn een unieke naam die je geeft aan een element

• In JavaScript verwijs je naar dit element met de functie getElementById()

• In CSS verwijs je naar dit element met een hashtag #

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

<p class="classNaam">Tekst</p>

• Classes zijn een naam die je geeft aan meerdere elementen.

• In JavaScript verwijs je naar deze elementen met de functie getElementsByClassName()

• In CSS verwijs je naar deze elementen met een punt .

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

for (let i = 0; i < 5; i++) { }

• Met een for-loop kan je code herhalen

• Het bovenstaande voorbeeld herhaalt vijf keer

• Een for-loop heeft drie expressions:

  • let i = 0; bepaalt waar de loop start

  • i < 5; bepaalt hoe lang de loop doorgaat

  • i++; bepaalt dat we steeds één stap verder gaan

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

btnElement.innerText = "Klik hier!"

• Met innerText kan je de textinhoud van een element veranderen

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

btnElement.innerHTML= "<div id='emoji'></div><div id='buttonText'>Klik hier!</div>"

• Met innerText kan je de HTML inhoud van een element veranderen

• In het bovenstaande voorbeeld voegen we twee nieuwe div-elementen als content van de button toe

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

FUNCTIES

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

alert("Dit is een bericht");

• Alert laat een bericht bovenin het scherm van je web-browser zien

• Kan handig zijn voor debugging

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

let leeftijd = prompt("Hoe oud ben je?");

• Prompt stelt een vraag aan de gebruiker en het antwoord kan je als variabele opslaan

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

let btnElement = document.getElementById("button");

• getElementById haalt een element van jouw webpagina op om te gebruiken in jouw JavaScript code

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

let btnElements = document.getElementsByClassName("button");

• getElementsByClassName haalt alle elementen met de class naam van jouw webpagina op om te gebruiken in jouw JavaScript code

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

CLASSLIST

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

btnElement.classList.toggle("greenStyle");

• Voegt een class toe aan een element of haalt deze weer weg

• Als een class toegevoegd of weggehaald wordt, past de CSS automatisch het element aan

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

INTERACTIEVRAAG

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

VOEG HIER JE VRAAG TOE?

A

Antwoord A

B

Antwoord B

C

Answer C

D

Answer D

VOEG HIER JE VRAAG TOE?

SLEEPVRAAG

Voeg tekst toe

Voeg tekst toe

Voeg tekst toe

Voeg tekst toe

INVULOEFENING

Code

SORTEREN

1

2

3

4

POLL MET TEKST

1

2

3

4

Categorie 1

Categorie 2

VOEG HIER JE VRAAG TOE

INSTRUCTIE

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

ONDERWERP

• Tekst

• Tekst

• Tekst

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

CONTENT

• Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.

  • In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas.

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

WAT

WAAROM

HOE

TIJD

HULP

OPBRENGST

KLAAR

Wat moet de leerling doen?

Waarom doen we dit?

Hoe moet de leerling aan de slag gaan?

Wat moet af zijn?

Wat doet de leerling als die klaar is?

Welke hulp mag de leerling inschakelen?

Hoe lang heeft de leerling?

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

ONDERWERP

• Tekst

• Tekst

• Tekst

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

CONTENT

• Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.

  • In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas.

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

CONTENT

LOREM IPSUM

• Know your material in advance

• Anticipate common questions

• Rehearse your responses

LOREM IPSUM

• Maintaining composure during the Q&A session is essential for projecting confidence and authority. Consider the following tips for staying composed:

  • Stay calm

  • Actively listen

  • Pause and reflect

  • Maintain eye contact

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

INTERACTIE

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

AFSLUITING

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

INTERACTIE

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

LOREM IPSUM

HUISWERK

• Maintaining composure during the Q&A session is essential for projecting confidence and authority. Consider the following tips for staying composed:

  • Stay calm

  • Actively listen

  • Pause and reflect

  • Maintain eye contact

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING

FIJNE DAG!

WELKOM

LEERDOEL

TERUGBLIK

THEORIE

OPDRACHT

AFSLUITING