8. Interactief JavaScript-element

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

WEB

Frontend verdieping

Les 1 / Week 8

Interactief JavaScript-element

Week 8 // WEB

Javascript toevoegen 

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

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

alert() en confirm()

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.

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!

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";

Opdracht 8.2 (gez.) - variabele

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. 

If-statements

Opdracht 8.4 (gez.) - JS aan id koppelen

We maken gezamenlijk opdracht 8.4 uit het moduleboekje FEV-I.

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.

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?

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.