programmeren

in python

Jaar 4 - Module 2 - Les 1: Begin JavaScript

programmeren

in JAVASCRIPT

Jaar 4 - Module 2 - Les 1: Begin JavaScript

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

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

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

 

  • Het verschil tussen client en server side code

vandaag gaan we leren

 

  • Het verschil tussen client en server side code

  • Bekende concepten in Python & 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

Client & Server

💻

Client

📱

website

JAVASCRIPT

​Voordelen?

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?

Client & Server

💻

Client

📱

website

JAVASCRIPT

​Voordelen:

  • Sneller want geen internet nodig 
  • Makkelijker programmeren

Nadelen:

  • Niet alles kan "clientside"
  • Verschillende talen

JavaScript code hoort bij een website in HTML. 

Je kan JavaScript meteen in een HTML pagina zetten, zo:

JAVASCRIPT

<!DOCTYPE html>
<html>
  <head>
    <title>Hallo</title>
  </head>
  <body>
    <script>
      klasNaam = "klas 4";
      alert("Hallo " + klasNaam);
    </script>
  </body>
</html>

demo

Netter is het om je JavaScript in een los bestand te zetten:

JAVASCRIPT

<!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!

JAVASCRIPT

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

demo

Laten we eens naar de codes kijken!

JAVASCRIPT

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!

JAVASCRIPT

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:

JAVASCRIPT - IF

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:

JAVASCRIPT - IF

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:

JAVASCRIPT - IF

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:

JAVASCRIPT - IF

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:

JAVASCRIPT - IF

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:

JAVASCRIPT - IF

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:

JAVASCRIPT - IF

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!! =>

opdrachten

opdrachten

  • Volg deze JavaScript les: https://bit.ly/jsles-1
  • Maak de oefen-opdracht
  • Maak de inlever-opdracht in replit, deel je link op Magister
     
  • Klaar? Denk na hoe jij JavaScript kan gebruiken op je site en probeer alvast wat te maken!

 

 

 

 

 

 

opdrachten

  • Volg deze HTML/CSS les: https://bit.ly/html-les
  • Ben je al bekend met HTML?
    Ga dan meteen naar les 5
     
  • Gebruik wat je hebt geleerd over HTML en CSS in jouw Flask website

 

 

 

 

 

Python Klas 4 - Module 2 - Les 1

By Felienne

Made with Slides.com

Python Klas 4 - Module 2 - Les 1

Leerdoel Module: JavaScript Lesdoel: Begin maken met JavaScript

  • 734

More from Felienne