Video 5: Intro Javascript

code voor opdrachten

Hieronder de code uit de video. Gebruik deze voor de onderstaande opdrachten.


<html>
<head>
</head>
<body>
   <div id="roodBlok" style="margin:100px;
                             background-color:red;
                             padding:20px;
                             colour:white" >
      Hello World!
   </div>
   <div id="greenBlok" style="margin:100px;
                              background-color:#0a0;
                              padding:20px;
                              colour:white" >
        Bla Bla Bla...
   </div>

   <script>
       alert("Hello World")
       document.getElementById("roodBlok").innerHTML = "Dag Allemaal"
   </script>

</body>
</html>

Vraag 5.1: script achterin

Waarom denk je dat de <script>-tag in het voorbeeld achteraan in de HTML-file staat?

[ mail je antwoord…]

Vraag 5.2: leukere HTML

Pas de HTML in het voorbeeld zo aan dat-ie, in plaats van de saaie text “Dag Allemaal”, een wat interessanter stuk HTML in de rode <DIV> plaatst (bijvoorbeeld een afbeelding of een tabelletje).

Geef met de slider aan hoe tevreden je bent met je uitwerking en mail je code.
  50%  
Geef eerst aan hoe tevreden je bent met je uitwerking!

Vraag 5.3: HTML uitlezen

Voor de bonus: Denk je dat je het programma zo kunt maken dat de tekst in het venstertje dat door “alert(…)” getoont wordt, de HTML is die in het Rode blok staat?

Het idee is dat je die tekst niet copy-paste, maar dat je programma die HTML-tekst uitleest uit de rode DIV, en doorgeeft aan het alert commando.

Geef met de slider aan hoe tevreden je bent met je uitwerking en mail je code.
  50%  
Geef eerst aan hoe tevreden je bent met je uitwerking!

Vraag 5.4: Firebug

Druk in chrome bij een webpagina op rechtermuisknop->inspect. Kun je ontdekken hoe je de HTML structuur (= DOM: Document Object Model) van een webpagina kunt inspecteren?

[ mail je antwoord…]

Vraag 5.5: De Firebug console

Voer, vanaf de Chrome-console een paar alert-commando’s uit. Hoe kun je, in de Chrome-console, met één toets, het vorige commando dat je net hebt laten uitvoeren weer terughalen in het veld waarin je commando’s kunt editen?

[ mail je antwoord…]

Vraag 5.6: Grafisch ontwerp vanuit Javascript

De <div> elementen in de voorbeeld-HTML hebben een syle-attribuut met wat CSS erin. Dat kun je aanpassen met commando’s als

document.getElementById("roodBlok").style.backgroundColor = "blue"

(het streepje in “background-color” is verboden in een JavaScript-naam. Dat lossen ze op door het streepje weg te laten, en het nieuwe woord met een hoofdletter te beginnen)

of

document.getElementById("roodBlok").style.padding = "2pt"

(let op dat het getal hier tussen aanhalingtekens staat. Da’s nodig om ervoor te zorgen dat JavaScript niet in de war raakt van de “pt” die erachter staat).

Kun je ervoor zorgen dat het rode blok groene text op een oranje achtergrond krijgt, en met een wat kleinere witruimte (margin) om het blok heen?

Geef met de slider aan hoe tevreden je bent met je uitwerking en mail je code.
  50%  
Geef eerst aan hoe tevreden je bent met je uitwerking!

Vraag 5.7: Of je worst lust…

Wat doet Javascript als je een waarde probeert op te geven die niet kan kloppen? (bijv. document.getElementById(“roodBlok”).style.padding = “Verse Worst”)

[ mail je antwoord…]

🙂