Week 4

Mappen & bestanden

• artevelde/
  • pgm-code/
    • pgm-1/
      • week-1
      • week-2
      • week-3
      • week-4/
        • sum_arrays.js
        • background-color/
          • index.html
          • index.js
        • …
    • web-1/

Background color

Maak een folder background-color aan in de reeds aangemaakt folder week-4, met daarin een index.js en index.html. Vergeet niet om de HTML en JavaScript bestanden te koppelen.

In deze webpagina (website bestaande uit één pagina) willen we het achtergrondkleur van het body element wijzigen door input van de gebruiker via prompt() methode uit het window object.

Tip

• Met document.body.style.backgroundColor kunnen we het achtergrondkleur veranderen.
• Met window.prompt() kunnen we de input van de gebruiker vragen via een dialoogcenster.

Resultaat

Addition

Maak een folder addition aan in de reeds aangemaakt folder week-4, met daarin een index.js en index.html. Vergeet niet om de HTML en JavaScript bestanden te koppelen.

In deze webpagina willen we de ingegeven (via prompt()) getallen optellen… Toon het resultaat in een dialoogvenster (alert()).

Tip

• Met parseInt() kunnen we een string converteren naar een geheel getal.
• Toon het aantal in te geven cijfers in de prompt-mededeling (zie schermafbeeldingen).

Resultaat

Getal 1:

Getal 2:

Som van de getallen (in een alert):

BMI

Maak een folder bmi aan in de reeds aangemaakt folder week-4, met daarin een index.js en index.html. Vergeet niet om de HTML en JavaScript bestanden te koppelen.

*[BMI]: Body Mass Index

In deze webpagina willen we de BMI berekenen door inputs van de gebruiker via prompt() methode uit het window object. Eerst wordt de lengte opgevraagd gevolgd door het gewicht. Het resultaat wordt getoond via alert() methode uit het window object.

Tip

• Met window.alert() kunnen we tekst weergeven via een dialoogcenster.
• Schrijf een functie calculateBMI() om de BMI te berekenen.
• Schrijf een functie bmiToString(bmi) om op basis van de BMI-waarde een tekst terug te geven volgens de volgende vergelijkingen:
  • Als BMI kleiner dan 18.5 geef dan de tekst ondergewicht terug.
  • Als BMI groter dan 25 geef dan de tekst overgewicht terug.
  • Als BMI groter of gelijk aan 18.5 en kleiner of gelijk aan 25 geef dan de tekst een gezond gewicht terug.

Resultaat

Lengte:

Gewicht:

Bericht:

PGM

Maak een folder pgm aan in de reeds aangemaakt folder week-4, met daarin een index.js en index.html en een folder images. Vergeet niet om de HTML en JavaScript bestanden te koppelen.

In deze webpagina willen we informatie uit het Graduaat Programmeren weergeven, zoals:

• een lijst van studenten die deze opleiding volgende. Een student (object) bevat:
  • een voornaam
  • een familienaam
  • een thumbnail (relatieve URL)
  • een e-mailadres

De lijst van studenten zullen we dynamisch inladen en converteren naar HTML elementen via JavaScript.

Tip

• voeg het volgende HTML-element toe: <div id="students"></div>
• met document.getElementById('students') kunnen we een specifiek element op basis van de waarde van het id-attribuut opvragen
• met element.innerHTML kunnen we HTML-tekst toekennen aan een element
• schrijf een functie convertStudentToHTMLString(student) waarme we HTML genereren op basis van een student object

Resultaat

Multiplication

Maak een folder multiplication aan in de reeds aangemaakt folder week-4, met daarin een index.js en index.html. Vergeet niet om de HTML en JavaScript bestanden te koppelen.

In deze webpagina willen we maaltafels berekenen door inputs van de gebruiker via prompt() methode uit het window object. Eerst wordt de maaltafel opgevraagd gevolgd door het aantal berekeningen. Het resultaat wordt getoond in een lijst (ul...li).

Tip

• voeg het volgende HTML-element toe: <div id="multiplication__container"></div>
• met document.querySelector('#multiplication__container') of document.getElementById('multiplication__container') kunnen we een specifieke element op basis van de waarde van het id-attribuut opvragen
• met parseInt() kunnen we een string converteren naar een geheel getal

Resultaat

Maaltafel:

Aantal berekeningen:

Lijst van calculaties:

Som van arrays

Maak een bestand sum_arrays.js aan in de reeds aangemaakt folder week-4.

Maak de som van twee matrices die elk even veel gehele getallen bevatten. Doe dit met maximum één loop (iteratie) met een for-lus.

const arrayOne = [3, 5, 22, 5, 7, 2, 45, 75, 89, 21, 2]; 
const arrayTwo = [9, 2, 42, 55, 71, 22, 4, 5, 90, 25, 26];
// Example output:
// Het totaal is 627

Bittersweet

Maak een bestand bittersweet.js aan in de reeds aangemaakt folder week-4.

Welke getallen tussen x en y zijn zowel deelbaar door 3 als 5? Maak een for lus om te itereren tussen 1 en een opgegeven aantal. Ga na of het getal binnen een interatie deelbaar is door 3. Indien dit het geval is, schrijf dan bitter op het scherm. Ga vervolgens na of het getal deelbaar is door 5, zoja schrijf dan sweet. Indien het niet deelbaar is door 3 en door 5, zet dan gewoon het huidige getal uit de iteratie op het scherm.

Resultaat

1
2
bitter
4
sweet
bitter
7
8
bitter
sweet
11
bitter
13
14
bittersweet