programmeren
in JaVASCRIPT
Jaar 4 - Module 2 - Les 2: JavaScript & HTML
Dit jaar gaan we...
-
Leren hoe websites werken
-
Wat het verschil is tussen server & client software
Dit jaar gaan we...
-
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
terugblik website
TIPS
-
Let op de rubrik!
terugblik website
TIPS
-
Let op de rubrik!
terugblik website
TIPS
-
Let op de rubrik!
terugblik website
TIPS
-
Let op de rubrik!
terugblik website
TIPS
-
Let op de rubrik!
terugblik website
TIPS
-
Let op de rubrik!
-
Let goed op spelling, Word helpt ook!
terugblik website
TIPS
-
Let op de rubrik!
-
Let goed op spelling, Word helpt ook!
terugblik website
TIPS
-
Let op de rubrik!
-
Let goed op spelling, Word helpt ook!
De komende weken gaan we...
-
Leren hoe JavaScript werkt
De komende weken gaan we...
-
Leren hoe JavaScript werkt
-
Een memory game maken met JavaScript
De komende weken gaan we...
-
Leren hoe JavaScript werkt
-
Een memory game maken met JavaScript
-
JavaScript toepassen op je eigen website
vandaag gaan we leren
-
Combinatie HTML/CSS en JavaScript
vandaag gaan we leren
-
Combinatie HTML/CSS en JavaScript
-
Meer nieuwe concepten in JavaScript
Client & Server
💻
Client
📱
Client & Server
💻
Client
📱
website
Client & Server
💻
🖥️
Client
Server
📱
/admin
website
Client & Server
💻
🖥️
Client
Server
📱
/admin
website
flask
Client & Server
💻
🖥️
Client
Server
📱
flask
/admin
HTML
website
Client & Server
💻
🖥️
Client
Server
📱
/admin
HTML
PYTHON
website
flask
Client & Server
💻
🖥️
Client
Server
📱
website
Client & Server
💻
Client
📱
website
JAVASCRIPT
Voordelen:
- Sneller want geen internet nodig
- Makkelijker programmeren
Client & Server
💻
Client
📱
website
JAVASCRIPT
Voordelen:
- Sneller want geen internet nodig
- Makkelijker programmeren
Nadelen:
- Niet alles kan "clientside"
- Verschillende talen
HTML is de codetaal die bepaalt hoe websites eruit zien.
HTML
HTML is de codetaal die bepaalt hoe websites eruit zien.
HTML
Vorige week in de Flask tutorial heb je al een beetje kennis gemaakt met HTML. De komende weken duik je dieper in HTML.
HTML is de codetaal die bepaalt hoe websites eruit zien.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
Hallo allemaal!
<p> Welkom </p>
</body>
</html>
HTML wordt vaak gecombineerd met CSS.
CSS zijn "style sheets" die bijv. kleuren en lettertypes instellen.
HTML & CSS
HTML wordt vaak gecombineerd met CSS.
CSS zijn "style sheets" die bijv. kleuren en lettertypes instellen.
HTML & CSS
<style>
body {
background-color: red;
color: green; /* Tekst wordt groen*/
}
p {
color: blue;
background-color: yellow;
}
</style>
In CSS beschrijven we hoe de HTML elementen eruit zullen zien.
HTML wordt vaak gecombineerd met CSS.
CSS zijn "style sheets" die bijv. kleuren en lettertypes instellen.
HTML & CSS
<style>
body {
background-color: red;
color: green; /* Tekst wordt groen*/
}
p {
color: blue;
background-color: yellow;
}
</style>
In CSS beschrijven we hoe de HTML elementen eruit zullen zien.
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
Hallo allemaal!
<p> Welkom </p>
</body>
</html>
Alles in de body wordt rood met groene letters
HTML wordt vaak gecombineerd met CSS.
CSS zijn "style sheets" die bijv. kleuren en lettertypes instellen.
HTML & CSS
<style>
body {
background-color: red;
color: green; /* Tekst wordt groen*/
}
p {
color: blue;
background-color: yellow;
}
</style>
In CSS beschrijven we hoe de HTML elementen eruit zullen zien.
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
Hallo allemaal!
<p> Welkom </p>
</body>
</html>
Alles in een <p> wordt geel met blauwe letters
HTML wordt ook vaak gecombineerd met JavaScript.
Net als in CSS kunnen we vanuit JavaScript stukjes HTML
aanspreken.
HTML & JavaScript
alert("Hallo klas 4!");
function weg() {
var knop = document.getElementById("knop1");
knop.style.visibility = "hidden";
}
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
<script src="script.js"></script>
<input type='submit' id='knop1' value='Knop' onclick='weg()'>
</body>
</html>
De JavaScript code kan de HTML elementen manipuleren.
HTML wordt ook vaak gecombineerd met JavaScript.
Net als in CSS kunnen we vanuit JavaScript stukjes HTML
aanspreken.
HTML & JavaScript
alert("Hallo klas 4!");
function weg() {
var knop = document.getElementById("knop1");
knop.style.visibility = "hidden";
}
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
<script src="script.js"></script>
<input type='submit' id='knop1' value='Knop' onclick='weg()'>
</body>
</html>
De JavaScript code kan de HTML elementen manipuleren.
HTML wordt ook vaak gecombineerd met JavaScript.
Net als in CSS kunnen we vanuit JavaScript stukjes HTML
aanspreken.
HTML & JavaScript
alert("Hallo klas 4!");
function weg() {
var knop = document.getElementById("knop1");
knop.style.visibility = "hidden";
}
<!DOCTYPE html>
<html>
<head>
<title>Welkom op deze site!</title>
</head>
<body>
<script src="script.js"></script>
<input type='submit' id='knop1' value='Knop' onclick='weg()'>
</body>
</html>
De JavaScript code kan de HTML elementen manipuleren.
demo
HTML wordt ook vaak gecombineerd met JavaScript.
Net als in CSS kunnen we vanuit JavaScript stukjes HTML
aanspreken.
HTML & JavaScript
De JavaScript code kan ieder HTML elementen manipuleren.
<!DOCTYPE html>
<html>
<body>
<script src="script.js"></script>
<input type='submit' id='knop1' value='Knop' onclick='weg()'>
<div id='tekst'>
Hallo allemaal, mooie site he?
</div>
</body>
</html>
function weg() {
var tekst = document.getElementById("tekst");
tekst.style.visibility = "hidden";
}
HTML wordt ook vaak gecombineerd met JavaScript.
Net als in CSS kunnen we vanuit JavaScript stukjes HTML
aanspreken.
HTML & JavaScript
De JavaScript code kan ieder HTML elementen manipuleren.
<!DOCTYPE html>
<html>
<body>
<script src="script.js"></script>
<input type='submit' id='knop1' value='Knop' onclick='weg()'>
<div id='tekst'>
Hallo allemaal, mooie site he?
</div>
</body>
</html>
function weg() {
var tekst = document.getElementById("tekst");
tekst.style.visibility = "hidden";
}
HTML wordt ook vaak gecombineerd met JavaScript.
Net als in CSS kunnen we vanuit JavaScript stukjes HTML
aanspreken.
HTML & JavaScript
function weg() {
var tekst = document.getElementById("tekst");
tekst.style.visibility = "hidden";
}
De JavaScript code kan ieder HTML elementen manipuleren.
<!DOCTYPE html>
<html>
<body>
<script src="script.js"></script>
<input type='submit' id='knop1' value='Knop' onclick='weg()'>
<div id='tekst'>
Hallo allemaal, mooie site he?
</div>
</body>
</html>
HTML wordt ook vaak gecombineerd met JavaScript.
Net als in CSS kunnen we vanuit JavaScript stukjes HTML
aanspreken.
HTML & JavaScript
function weg() {
var tekst = document.getElementById("tekst");
tekst.style.visibility = "hidden";
}
De JavaScript code kan ieder HTML elementen manipuleren.
<!DOCTYPE html>
<html>
<body>
<script src="script.js"></script>
<input type='submit' id='knop1' value='Knop' onclick='weg()'>
<div id='tekst'>
Hallo allemaal, mooie site he?
</div>
</body>
</html>
demo
HTML wordt ook vaak gecombineerd met JavaScript.
Net als in CSS kunnen we vanuit JavaScript stukjes HTML
aanspreken.
HTML & JavaScript
function weg() {
var tekst = document.getElementById("tekst");
tekst.innerHTML = "Er is geklikt!";
}
Je kan tekst ook veranderen met innerHTML.
<!DOCTYPE html>
<html>
<body>
<script src="script.js"></script>
<input type='submit' id='knop1' value='Knop' onclick='weg()'>
<div id='tekst'>
Hallo allemaal, mooie site he?
</div>
</body>
</html>
demo
Laten we eens naar de functie kijken!
JAVASCRIPT
Wat valt je op dat hetzelfde is als bij Python?
Schrijf minstens 1 ding op op je bordje!
function weg() {
var tekst = document.getElementById("tekst");
tekst.style.visibility = "hidden";
}
Laten we eens naar de functie kijken!
JAVASCRIPT
Wat valt je op dat anders is dan bij Python?
Schrijf minstens 1 ding op op je bordje!
function weg() {
var tekst = document.getElementById("tekst");
tekst.style.visibility = "hidden";
}
Laten we ook eens naar loops kijken.
JAVASCRIPT
function weg() {
var tekst = document.getElementById("tekst");
for (let i = 0; i < 5; i++) {
tekst.innerHTML += "Berichtje " + i + "<br>";
}
}
demo
Laten we ook eens naar loops kijken.
JAVASCRIPT
function weg() {
var tekst = document.getElementById("tekst");
for (let i = 0; i < 5; i++) {
tekst.innerHTML += "Berichtje " + i + "<br>";
}
}
Wat valt je op dat hetzelfde is als bij Python?
Schrijf minstens 1 ding op op je bordje!
Laten we ook eens naar loops kijken.
JAVASCRIPT
function weg() {
var tekst = document.getElementById("tekst");
for (let i = 0; i < 5; i++) {
tekst.innerHTML += "Berichtje " + i + "<br>";
}
}
Wat valt je op dat anders is dan bij Python?
Schrijf minstens 1 ding op op je bordje!
opdrachten
opdrachten
- Volg deze les: https://bit.ly/jsles-2
opdrachten
- Volg deze les: https://bit.ly/jsles-2
opdrachten
- Volg deze les: https://bit.ly/jsles-2
opdrachten
- Volg deze les: https://bit.ly/jsles-2
- https://bit.ly/jsopd-2
Python Klas 4 - Module 2 - Les 2
By Felienne
Python Klas 4 - Module 2 - Les 2
Leerdoel Module: JavaScript Lesdoel: JavaScript en de DOM, loops en functies
- 659