Week 7 - Les 2

1 / 15
next
Slide 1: Slide
Applicatie- en mediaontwikkelaarMBOStudiejaar 2

This lesson contains 15 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 90 min

Items in this lesson

Slide 1 - Slide

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

Slide 2 - Slide

Wat doet de javascript functie
document.getElementById

Slide 3 - Open question

Wat doet de javascript functie
document.createElement()

Slide 4 - Open question

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 - Slide

<!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 - Slide

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 - Slide

Wat kunnen we allemaal doen met javascript?
javascript

Slide 8 - Mind map

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

Slide 9 - Poll

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 - Slide

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 - Open question

Slide 12 - Slide

Kennismakingsronde
Wordpress lokaal installeren

Slide 13 - Slide

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

Slide 14 - Slide

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

Slide 15 - Open question