Jaar 4 - Module 2 - Les 1: Begin JavaScript
Jaar 4 - Module 2 - Les 1: Begin JavaScript
Leren hoe websites werken
Wat het verschil is tussen server & client software
Leren hoe websites werken
Wat het verschil is tussen server & client software
Zelf een website maken met Python, HTML & Javascript
Voor jezelf, of voor een eigen klant
Leren hoe JavaScript werkt
Leren hoe JavaScript werkt
Een memory game maken met JavaScript
Leren hoe JavaScript werkt
Een memory game maken met JavaScript
JavaScript toepassen op je eigen website
Leren hoe JavaScript werkt
Een memory game maken met JavaScript
JavaScript toepassen op je eigen website
Het verschil tussen client en server side code
Het verschil tussen client en server side code
Bekende concepten in Python & JavaScript
Voordelen?
Voordelen:
Voordelen:
Nadelen?
Voordelen:
Nadelen:
JavaScript code hoort bij een website in HTML.
Je kan JavaScript meteen in een HTML pagina zetten, zo:
<!DOCTYPE html>
<html>
<head>
<title>Hallo</title>
</head>
<body>
<script>
klasNaam = "klas 4";
alert("Hallo " + klasNaam);
</script>
</body>
</html>Netter is het om je JavaScript in een los bestand te zetten:
<!DOCTYPE html>
<html>
<head>
<title>Hallo</title>
</head>
<body>
<script src="script.js">
</script>
</body>
</html>klasNaam = "klas 4";
alert("Hallo " + klasNaam);script.js
Dat principe kennen we van css!
<style>
body {
background-color: red;
color: green; /* Tekst wordt groen*/
}
p {
color: blue;
background-color: yellow;
}
</style><!DOCTYPE html>
<html>
<head>
<title>Hallo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>Laten we eens naar de codes kijken!
klasNaam = "klas 4";
alert("Hallo " + klasNaam);Laten we eens naar de codes kijken!
klasNaam = "klas 4";
alert("Hallo " + klasNaam);Wat valt je op dat hetzelfde is als bij Python?
Schrijf minstens 1 ding op op je bordje!
Laten we eens naar de codes kijken!
klasNaam = "klas 4";
alert("Hallo " + klasNaam);Laten we eens naar de codes kijken!
klasNaam = "klas 4";
alert("Hallo " + klasNaam);Wat valt je op dat anders is dan bij Python?
Schrijf minstens 1 ding op op je bordje!
We bekijken ook meteen de code voor een if. Die ziet er zo uit in JavaScript:
klasNaam = "klas 4";
alert("Hallo " + klasNaam);let aantal = prompt("Hoeveel ijs?");
if (aantal <= 0){
alert("Je wilt dus geen ijs");
} else if (aantal == 1){
alert("Eén bolletje");
} else { // 2 of hoger
alert(aantal + " bolletjes");
}Wat valt je op dat hetzelfde is als bij Python?
Schrijf minstens 1 ding op op je bordje!
We bekijken ook meteen de code voor een if. Die ziet er zo uit in JavaScript:
klasNaam = "klas 4";
alert("Hallo " + klasNaam);let aantal = prompt("Hoeveel ijs?");
if (aantal <= 0){
alert("Je wilt dus geen ijs");
} else if (aantal == 1){
alert("Eén bolletje");
} else { // 2 of hoger
alert(aantal + " bolletjes");
}Wat valt je op dat anders is dan bij Python?
Schrijf minstens 1 ding op op je bordje!
De if kan ook wat complexer:
klasNaam = "klas 4";
alert("Hallo " + klasNaam);let aantal = prompt("Hoeveel ijs?");
if (aantal <= 0){
alert("Je wilt dus geen ijs");
} else if (aantal >= 1 && aantal <= 3){
alert("Eén, twee of drie bolletjes");
} else { // 4 of hoger
alert(aantal + " bolletjes");
}Wat valt je op dat hetzelfde is als bij Python?
Schrijf minstens 1 ding op op je bordje!
De if kan ook wat complexer:
klasNaam = "klas 4";
alert("Hallo " + klasNaam);let aantal = prompt("Hoeveel ijs?");
if (aantal <= 0){
alert("Je wilt dus geen ijs");
} else if (aantal >= 1 && aantal <= 3){
alert("Eén, twee of drie bolletjes");
} else { // 4 of hoger
alert(aantal + " bolletjes");
}Wat valt je op dat anders is dan bij Python?
Schrijf minstens 1 ding op op je bordje!
De if kan ook wat complexer:
klasNaam = "klas 4";
alert("Hallo " + klasNaam);let aantal = prompt("Hoeveel ijs?");
if (aantal <= 0){
alert("Je wilt dus geen ijs");
} else if (aantal >= 1 && aantal <= 3){
alert("Eén, twee of drie bolletjes");
} else { // 4 of hoger
alert(aantal + " bolletjes");
}Wat valt je op dat anders is dan bij Python?
Schrijf minstens 1 ding op op je bordje!
&& ipv and in Python
De if kan ook wat complexer:
klasNaam = "klas 4";
alert("Hallo " + klasNaam);let aantal = prompt("Hoeveel ijs?");
if (aantal <= 0){
alert("Je wilt dus geen ijs");
} else if (aantal >= 1 && aantal <= 3){
alert("Eén, twee of drie bolletjes");
} else { // 4 of hoger
alert(aantal + " bolletjes");
}Wat valt je op dat anders is dan bij Python?
Schrijf minstens 1 ding op op je bordje!
>= (zeg groter gelijk)
De if kan ook wat complexer:
klasNaam = "klas 4";
alert("Hallo " + klasNaam);let aantal = prompt("Hoeveel ijs?");
if (aantal <= 0){
alert("Je wilt dus geen ijs");
} else if (aantal >= 1 && aantal <= 3){
alert("Eén, twee of drie bolletjes");
} else { // 4 of hoger
alert(aantal + " bolletjes");
}Wat valt je op dat anders is dan bij Python?
Schrijf minstens 1 ding op op je bordje!
>= (zeg groter gelijk)
Dit is dus geen pijltje!! =>