Voorkennis:
- HTML basis
- CSS basis
Doelen:
- ontdekken wat Javascript is
- eerste scripts kunnen schrijven binnen HTML
- gebruik van console.log()
Javascript
Je kunt inmiddels in een website met HTML: met DIVs een layout maken, teksten en afbeeldingen plaatsen en meer. Met CSS kun je de verder opmaken.
Maar HTML en CSS zijn geen programmeertalen: je kunt er geen voorwaarden in kwijt (if-then-else), geen for-loops, of berekeningen maken en andere.
Met Javascript kan dat wel!
- Javascript is een programmeertaal die in je HTML staat
- Je browser kan Javascript vertalen, net zoals je browser HTML en CSS naar beeldscherminformatie vertaalt
Opdracht
- Bekijk deze tutorialvan W3Schools
- Kopieer de 1stevoorbeelden van "JS Home" en "JS Introduction" en maak ze werkend in 1 pagina op jouw computer
- In "JS Where To" wordt verteld dat JS op verschillende plekken in je HTML kan staan en hoe je een "function" gebruikt
- Maak een nieuwe pagina aan!
- plaats nu die de scripts script-tags (<script> </script>) vlak voor </body> (body-sluiten).
- Maak weer een nieuwe pagina aan!
- zet de scripts in aparte functions in de in de <head>. Roep ze aan via buttons in de <body>
- Maak het voorbeeld met de lichtknopjes na uit "JS Introduction"
- maak nu 4 knoppen met bijv. "koe", "schaap", "hert", "hond" en laat die afbeelding verschijnen.
- Bekijk bij "JS Functions" hoe je parameters mee geeft aan een function
- Maak dezelfde opdracht als hiervoor met 1 function
- Bekijk in "JS Output" de werking van window.alert() en console.log()
- Maak in de laatste pagina ook een function voor de omtrek van een cirkel met let omtrek=2Math.PIr
- Vul voor de r (=straal) een getal in en laat berekening en uitkomst zien op 3 plekken:
- in een div in de body
- in de console
- als alert melding
Uitleg
Voorbeeld uit les cstegeman
Javascript tutorial op w3schools
Javascript op edutorial.nl