Week 7 - Les 2

1 / 15

Slide 1: Slide

Applicatie- en mediaontwikkelaarMBOStudiejaar 2

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

Lesson 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?

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

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

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

Week 7 - Les 2

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Open question

Slide 4 - Open question

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Slide

Slide 8 - Mind map

Slide 9 - Poll

Slide 10 - Slide

Slide 11 - Open question

Slide 12 - Slide

Slide 13 - Slide

Slide 14 - Slide

Slide 15 - Open question

More lessons like this

BBL Week 7 - XAMPP en installatie

Week 8 - Les 1

01 - Javascript - wat is javascript

01 - Javascript - wat is javascript

BBL Week 5

Week 6 - Les 1

workshop_20241007_Webtechnologie

BBL Week 4