Week 7 - Les 2

1 / 15

Slide 1: Tekstslide

Applicatie- en mediaontwikkelaarMBOStudiejaar 2

In deze les zitten 15 slides, met interactieve quizzen en tekstslides.

Lesduur is: 90 min

Onderdelen in deze les

Slide 1 - Tekstslide

Kennismakingsronde

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

Doelen

Slide 2 - Tekstslide

Wat doet de javascript functie
document.getElementById

Slide 3 - Open vraag

Wat doet de javascript functie
document.createElement()

Slide 4 - Open vraag

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

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

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

Wat kunnen we allemaal doen met javascript?

javascript

Slide 8 - Woordweb

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

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

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 vraag

Slide 12 - Tekstslide

Kennismakingsronde

Webserver (apache)
Databaseserver (Mysql)
PHP
Als stack - xampp
Download en installeer:
https://www.apachefriends.org/download.html

Wordpress lokaal installeren

Slide 13 - Tekstslide

Kennismakingsronde

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

XAMPP

Slide 14 - Tekstslide

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

Slide 15 - Open vraag

Week 7 - Les 2

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Open vraag

Slide 4 - Open vraag

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Woordweb

Slide 9 - Poll

Slide 10 - Tekstslide

Slide 11 - Open vraag

Slide 12 - Tekstslide

Slide 13 - Tekstslide

Slide 14 - Tekstslide

Slide 15 - Open vraag

Meer lessen zoals deze

BBL Week 7 - XAMPP en installatie

Week 8 - Les 1

BBL Week 4

Week 6 - Les 1

BBL Week 5

01 - Javascript - wat is javascript

workshop_20241007_Webtechnologie

Week 4 - Les 2