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

 

 

 

 

Made with Slides.com