8. Interactief JavaScript-element

WEB
Frontend verdieping
Les 1 / Week 8
Interactief JavaScript-element
1 / 16
next
Slide 1: Slide
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

This lesson contains 16 slides, with interactive quiz and text slides.

time-iconLesson duration is: 120 min

Items in this lesson

WEB
Frontend verdieping
Les 1 / Week 8
Interactief JavaScript-element

Slide 1 - Slide

Week 8 // WEB
Javascript toevoegen 

Slide 2 - Slide

We gaan het hebben over JavaScript. Wat weet je hier al van?

Slide 3 - Open question

JavaScript
  • Website interactief maken. 
  • Met JavaScript voeg je functionaliteit aan je webpagina’s toe.
  • De browser herkent JavaScript (voortaan JS) aan de <script></script>tags. De syntaxis is <script> javascript-code </script> 
  • We gebruiken dit aan de onderzijde van onze body. De opbouw kan er dus als volgt uit zien. 
  • Dit kan ook extern in een .js-file die we koppelen aan onze html. Dit gaan we vandaag níét doen.
  • comments maken we in JS met twee slashes '//' voor de code

Slide 4 - Slide

alert() en confirm()

Slide 5 - Slide

prompt()
  • Met de promptbox vraag je om input van de gebruiker. 
  • We kunnen het antwoord gebruiken bij de actie die we willen uitvoeren en in JS programmeren.
  • De prompt-methode heeft de volgende syntaxis (code-opbouw) en ziet er in de browser zo uit.

Slide 6 - Slide

8.1 Hoe ziet prompt er uit?

Drukken we op OK, dan gebeurt er niets, maar het resultaat van deze prompt-box is nu wel wat hebben ingevuld. Je kunt je voorstellen dat dat heel interessant is als we deze input elders kunnen gebruiken. Om deze input tijdelijk op te kunnen slaan gebruiken we een variabele.
Opdracht 8.1 voeg onderstaande code eens toe aan je editor en kijk wat het effect in de browser is!

Slide 7 - Slide

Variabelen
  • Een variabele is een soort tijdelijk laatje met een naam in het geheugen van de computer. 
  • Door middel van de naam kun je de inhoud van het laatje bekijken of wijzigen. 
  • We kiezen voor een variabele een logische naam voor het soort gegeven dat we opslaan. 
  • Als we het vorige voorbeeld pakken, zou dat dus bijv. ‘name’ kunnen zijn.
  • Voorbeelden van datatypes in de variabele:
  • - string (stukje tekst, bijv. “Ine”), 
  • - boolean (waar/onwaar  true/false)
  • - integer (heel getal, bijv. 18)
  • - float (decimaal getal, bijv. 3.65) - datum (bijv. 23/12/2020)
In Javascript maken we een variabele aan door 'let' en dan de variabelenaam te noemen. 
Bijv: let name = "Ine";

Slide 8 - Slide

Opdracht 8.2 (gez.) - variabele

Slide 9 - Slide

Opdracht 8.3 (gez.) - HTML id
We gebruiken een stukje HTML toe waar we straks vanuit JS iets mee willen doen. Om dit aan te kunnen spreken vanuit JS geven we de p een id. 

Slide 10 - Slide

If-statements

Slide 11 - Slide

Opdracht 8.4 (gez.) - JS aan id koppelen
We maken gezamenlijk opdracht 8.4 uit het moduleboekje FEV-I.

Slide 12 - Slide

Opdracht 8.5 (gez.) Button 
Een button is een knop waar de gebruiker op kan klikken. Aan een button koppelen we gedrag, een actie, wat we willen dat er gebeurt als de gebruiker op de knop klikt. Dit kan van alles zijn, van opslaan van een document tot het laten zien van een boodschap. Het button-element is een HTML-element, maar het gedrag wat we er aan koppelen kan in JS geschreven zijn. 
Aan de onderstaande button is nog geen gedrag gekoppeld.. Het p-element er onder is niet te zien in verband met de display: none.

Slide 13 - Slide

Opdracht 8.6 (Gez.) - Gedrag button
We voegen er nu JS-code aan toe om gedrag te geven aan de button waar we op klikken.
Onder de al bestaande JS-code waarin we de naam koppelden aan het document zetten we de volgende code:




Test eens in je browser wat er gebeurt? Het tekstje is ineens te zien. 
Kun je nog meer style-properties zelf toevoegen die pas veranderen na het klikken van de button?

Slide 14 - Slide

Opdracht 8.7 (zelfst.)
Probeer nu zelf opdracht 8.7 in het moduleboekje FEV-I op pagina 11 te maken. 
Je gaat hier zelf een javascript-element toevoegen stap-voor-stap. 
Gebruik alle theorie die je daarvoor in hetzelfde moduleboekje terug kunt vinden.

Slide 15 - Slide

Slide 16 - Slide