‹Revenir à la recherche

Week 7 - Les 2

1 / 15
suivant
Slide 1: Diapositive
Applicatie- en mediaontwikkelaarMBOStudiejaar 2

Cette leçon contient 15 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 90 min

Éléments de cette leçon

Slide 1 - Diapositive

Kennismakingsronde
  • Terugblik html, css en javascript
  • Javascript interactie met de gebruiker - events
  • Introductie cms - Wordpress
  • Installatie XAMPP
Doelen

Slide 2 - Diapositive

Wat doet de javascript functie
document.getElementById

Slide 3 - Question ouverte

Wat doet de javascript functie
document.createElement()

Slide 4 - Question ouverte

Kennismakingsronde
  • Event - gebeurtenis
    Bijvoorbeeld : laden van een pagina, muisklik, indrukken toets
  • Listner - een in het geheugen geladen functie die reageert op een event
    Bijvoorbeeld: positie veranderen als de gebruiker een pijltjestoets indrukt.




Eventlistner

Slide 5 - Diapositive

<!DOCTYPE html>
<html>
    <head>
        <style>
            #blokje {
                width: 50px;
                height: 50px;
                background-color: red;
                position: absolute;
                left: 0;
                top: 0;
                cursor: pointer; /* Voeg een aanwijzer toe om aan te geven dat het blokje klikbaar is */
            }
        </style>
    </head>
    <body>
        <div id="blokje"></div>

        <script>
            const blokje = document.getElementById("blokje");
            let posX = 0;
            let posY = 0;

            blokje.addEventListener("click", function () {
                alert("Je hebt op het blokje geklikt!");
            });

            document.addEventListener("keydown", function (event) {
                // Links
                if (event.key === "ArrowLeft") {
                    posX -= 10;
                }
                // Rechts
                else if (event.key === "ArrowRight") {
                    posX += 10;
                }
                // Boven
                else if (event.key === "ArrowUp") {
                    posY -= 10;
                }
                // Onder
                else if (event.key === "ArrowDown") {
                    posY += 10;
                }

                blokje.style.left = posX + "px";
                blokje.style.top = posY + "px";
            });
        </script>
    </body>
</html>

Slide 6 - Diapositive

Kennismakingsronde
  • Zorg ervoor dat het blokje 3 keer zo snel gaat bewegen
  • Voeg een kopje toe bij elke toets. Dus naar links, rechts, boven of beneden
Oefening

Slide 7 - Diapositive

Wat kunnen we allemaal doen met javascript?
javascript

Slide 8 - Carte mentale

Hoe schat je jouw kennis in om een eenvoudige website met html en css te maken?
010

Slide 9 - Sondage

Kennismakingsronde
  • Software om websites te maken
  • HTML, CSS zijn de standaardtalen die een browser begrijpt
  • Bij CMS hoef je niets te weten van html en css
  • Hoe kan dat?
  • Wat doet een cms eigenlijk?
Content Management System (CMS)

Slide 10 - Diapositive

Met een cms kan je een website maken zonder dat je iets hoeft te weten van html en css.
Een website bestaat altijd uit html en css?
Hoe doet een cms dat dan???

Als je het antwoord niet weet: Wat zou je dan willen leren/weten over een cms?

Slide 11 - Question ouverte

Slide 12 - Diapositive

Kennismakingsronde
Wordpress lokaal installeren

Slide 13 - Diapositive

Kennismakingsronde
  • http://localhost in de browser
  • Verwijst naar de map htdocs
  • demo
XAMPP

Slide 14 - Diapositive

Evaluatie - noem drie dingen die nieuw waren voor jou en die je in deze les hebt geleerd

Slide 15 - Question ouverte

Plus de leçons comme celle-ci

BBL Week 7 - XAMPP en installatie

- Leçon avec 16 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 2

Week 8 - Les 1

- Leçon avec 12 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 2

01 - Javascript - wat is javascript

- Leçon avec 15 diapositives
ICTMBOStudiejaar 1,2

BBL Week 5

- Leçon avec 15 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 2

01 - Javascript - wat is javascript

- Leçon avec 15 diapositives
ICTMBOStudiejaar 1,2

Week 6 - Les 1

- Leçon avec 10 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 2

workshop_20241007_Webtechnologie

- Leçon avec 17 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

BBL Week 4

- Leçon avec 12 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 2