Les 1 - Hello world! - Je eerste programma in JavaScript

Interactie met een webpagina

Tot nu to heb je webpagina's gemaakt met behulp van HTML en CSS. Die pagina's die zien er voor iedereen hetzelfde uit en de gebruiker kan er informatie zoeken. Maar de pagina reageert niet op wat gebruikers doen. Om dat voor elkaar te krijgen gaan we JavaScript gebruiken.

We gaan JavaScript toevoegen aan webpagina's en dit script wordt dan uitgevoerd in je eigen browser op je eigen computer. Dit noemen we client side scripting. Je browser is de client en de webpagina die je ophaalt komt van de server.

We laten eerst wat voorbeelden zien en dan kun je zelf aan de slag!

Hello world!

Je script kun je direct in je webpagina zetten tussen de <script> en </script> tags:

<!DOCTYPE html>
<html>
  <head>
    <title>hello world</title>
  </head>
  <body>
    <script>
      alert("hello world!");
    </script>
  </body>
</html>

Apart scriptbestand

Het is echter overzichtelijker om je JavaScript code in aparte bestanden te bewaren, net als met CSS. Zo kun je bijvoorbeeld hetzelfde script op meerdere pagina's laden.

Inhoud van index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>hello world</title>
  </head>
  <body>
    <script src=script.js></script>
  </body>
</html>

Inhoud van script.js:

alert("hello world!");

Variabelen

Je kunt in JavaScript uiteraard ook met bekende dingen als variabelen, strings en ints werken. Functies zijn ook aanwezig en heel erg handig.

Je kunt variabelen met de sleutelwoorden: let, const, var. Wat je kiest van deze drie maakt zeker uit. Gedurende de lesbrieven komen we daar op terug. Voor nu gebruiken we let. Zo maken we strings en ints:

let woord1 = "hello"; // string
let woord2 = "world";
let getal = 10; //int
alert(woord1 + " " + woord2 + " " + getal);

Je ziet dat dit eenvoudiger gaat dan in Python: JavaScript zet het getal om naar een string voor ons.

Je hebt nog meer bekende typen:

let waarheid = true;
let kommaGetal = 9.4;

prompt()

Je kunt invoer vragen van je gebruiker met de functie prompt().

let naam = prompt("Hoe heet je?");
alert("Welkom op deze pagina, " + naam + "!");

Maak de volgende opdracht in Repl.it (zie links in het menu).

Note: Oefenopdracht - Naam en leeftijd

Vraag de bezoeker om zijn/haar naam. Vraag de bezoeker om zijn/haar leeftijd. Geef vervolgens een alert() met de volgende inhoud:

Hallo <naam>, je bent <leeftijd> jaar oud.

Naam en leeftijd vervang je dan door wat je hebt opgevraagd

if-statement

Je kunt ook if-statements gebruiken.

let aantal = prompt("Hoeveel bolletjes wil je?");

if (aantal <= 0){
  alert("Je wilt dus geen bolletjes");
} else if (aantal == 1){
  alert("Alsjeblieft, een bolletje");
} else {  // 2 of hoger
  alert("Alsjeblieft, uw " + aantal + " bolletjes");
}

Note: Inleveropdracht - Volwassen of niet?

Vraag de bezoeker om zijn/haar leeftijd. Geef vervolgens een alert() met de volgende inhoud. Is de persoon jonger dan 12:

Jij bent jonger dan 12.

Is de persoon tussen 12 en 18:

Jij bent een jong volwassene.

Is de persoon 18 en ouder:

Jij bent een volwassene.

Les 1 - Hello world