Javascript

Wat is Javascript?

Javascript is in 1995 ontwikkeld door Brendan Eich van Netscape Communications Corporation, speciaal voor het gebruik in Netscape Navigator. De oorspronkelijke naam was Mocha en later LiveScript. De naam JavaScript komt uit de tijd dat in de Netscape-browser ook ondersteuning voor Java-applets werd ingebouwd. Door het gebruik van JavaScript werd het mogelijk om webpagina’s interactief te maken. Dynamic HTML was hier een logisch vervolg op.

JavaScript is een scripttaal. Een script is een stukje code op een HTML-pagina. Met Javascript voeg je functionaliteit aan je webpagina’s toe.

De browser herkent JavaScript aan <script> -tags. De syntax is als volgt:

<script> ………………….. </script>

Op de puntjes plaatsen we JavaScript-code. Alle JavaScript-code tussen de <script> -tags vormt de body van je script.

Console en Javascript basis

In de console van de browser kunnen we JS code uitvoeren. We kunnen rekenen, of ingebouwde functies zoals “alert()” aanroepen en veel meer.

Opdracht: Zoek een handige cheatsheet voor javascript. Ingebouwde functies, logica, loops, variabelen…

Oefening 1: alertbox -> alert();

Maak een map JSoef op je bureaublad en codeer het volgende script in de editor, open hiervoor oefening1.html. Ben je klaar? Sla je oefening op!

• Het woord alert is een standaard-Javascript-methode die een alertbox op het scherm weergeeft.
• Alle opdrachten binnen de <script> -tags moeten eindigen met een puntkomma (;)
• JavaScript kan zowel aan de <head>- als in de <body>-secties worden toegevoegd.

Oefening 2: document.write();

Deze methode gebruiken we om teksten en HTML-elementen vanuit JavaScript op het beeldscherm te tonen. De write-opdracht heeft de volgende syntax:

document.write(“Jouw tekst”);

Codeer het volgende script met je favoriete HTML-editor, open hiervoor oefening2.html. Ben je klaar? Sla je oefening op!

Je kan HTML-tags schrijven in een document.write(). Dit doen we om onze pagina meer vorm te geven.

Oefening 3: confirm();

Bij een interactieve webpagina hoort feedback van de gebruiker. Een manier om feedback te vragen is met de methode confirm(). Deze methode genereert een confirmbox waarmee je de gebruiker kunt vragen om informatie te bevestigen. De confirm-methode heeft de volgende syntax:

confirm(“Jouw vraag”);

Codeer het volgende script met je favoriete HTML-editor, open hiervoor oefening3.html. Ben je klaar? Sla je oefening op!

• Klik je op OK, dan is het resultaat van de confirmbox true.
• Klik je op Cancel of annuleren, dan is het resultaat van de confirmbox false.

Oefening 4: prompt();

Met de promptbox vraag je om input van de gebruiker. Als je bijvoorbeeld meer gegevens van de gebruiker nodig hebt om een bepaald proces uit te voeren, kan je de gebruiker ‘prompten’ met de vraag naar meer informatie. De prompt-methode heeft de volgende syntax:

prompt(“Jouw prompttekst”, “default (standaard) waarde”);

Codeer het volgende script met je favoriete HTML-editor, open hiervoor oefening4.html. Ben je klaar? Sla je oefening op!

• Klik je op OK, dan is het resultaat van de promptbox de inputtekst.
• Klik je op Cancel of Annuleren, dan is het resultaat van de promptbox een nul (leeg).

Scriptvariabelen

Een variabele is een manier om in JavaScript (en ook in andere computertalen) veranderlijke gegevens te bewaren.

Namen van variabelen:

De naam van een variabele mag letters, getallen en underscores bevatten. De naam van de variabele moet een beschrijving zijn van de inhoud van de variabele, bijvoorbeeld:

stad = “Leuven”;

LET OP!!!! JavaScript is hoofdlettergevoelig: er is onderscheid tussen variabele namen met en zonder hoofdletters: Stad en stad zijn twee verschillende variabelen.

Hieronder declareren (aanmaken) we een variabele met een string (tekst):

var student = “Jan”;

Hiermee declareer je de variabele student en sla je die op met de inhoud “Jan”. Je zou je dit als volgt kunnen voorstellen:

Hieronder declareren we een variabele met een getal:

var leeftijd = 25;

Hiermee declareer je de variabele leeftijd en sla je die op met de inhoud 25. Je zou je dit als volgt kunnen voorstellen:

De waarde van een variabele kun je wijzigen. Bijvoorbeeld:

leeftijd = leeftijd + 1;

Hiermee verander je de waarde van de variabele leeftijd in 26.

Hier is nog een voorbeeld:

som = som + som;

Wat is het resultaat NU in som?………………………………………………………………………………..

Oefening 5: Variabelen

Codeer het volgende script met je favoriete HTML-editor, open hiervoor oefening5.html. Ben je klaar? Sla je oefening op!

Overload operatoren

In de vorige oefening hebben we de operator ‘+’ op twee manieren gebruikt.
Ten eerste hebben we het bedrag als volgt berekend:

var bedrag = schoolgeld + boekengeld;

Ten tweede hebben we met de ‘+’ drie stukken tekst aan elkaar geplakt:

var volledigeNaam = voornaam + “<br>” + achternaam;

Hier laten we zien dat je HTML-tags mag gebruiken binnen een tekst. We zeggen dat de operator + wordt overloaded. Dit betekent dat deze operator opereert in twee contexten: hij kan gebruikt worden voor het optellen van twee getallen én hij kan gebruikt worden voor het aan elkaar plakken van teksten. De context bepaalt de gebruikswijze van de operator.

If-structuur

Een beslissingsmoment kunnen we aangeven met de opdracht if.

Je gebruikt de opdracht if om te beslissen wat er moet gebeuren als een situatie true of false is.

De syntax van de opdracht if is als volgt:

If(voorwaarde){
                acties uit te voeren als de voorwaarde true is;
}

Een voorwaarde in de opdracht if() kunnen we aangeven door twee waarden te vergelijken. Dit doen we met vergelijkingsoperatoren. Bijvoorbeeld:

If(a == b)

== betekent gelijk aan (de inhoud),
=== betekent is identiek aan (zowel de inhoud als de soort variabele)

Een andere operator die je vandaag nodig zal hebben is && (AND). Wanneer we && gebruiken gaan we kijken dat er aan beide voorwaarden voldaan wordt. Bijvoorbeeld:If(a == b && c == d)

Oefening 6: If structuur en operatoren

Codeer het volgende script met je favoriete HTML-editor, open hiervoor oefening6.html. Ben je klaar? Sla je oefening op!

De clausule else

De clausule else is optioneel. De clausule else is een alternatieve optie van de opdracht if. Als de if niet waar is, wordt de actie bij de else uitgevoerd. De syntax van de clausule else is als volgt:

If(voorwaarde){
                acties uit te voeren als de voorwaarde true is;
}else{
                acties uit te voeren als de voorwaarde false is
}

Codeer het volgende script met je favoriete HTML-editor, open hiervoor oefening7.html. Ben je klaar? Sla je oefening op!

getElementById

Ga naar https://www.wikipedia.org/

Opdracht: Arrays

Zoek uit wat arrays zijn, hoe deze werken.

Probeer uit met de weekdagen als array.

Vraag de eerste weekdag op van je array, en vraag de lengte op.

Zoek uit op welke manieren je via een FOR loop doorheen een array kan lopen (er zijn 4 mogelijke “for” loops in javascript hierbij!) Probeer ze eens uit en vergelijk.

Zoek uit hoe je in een array items kan toevoegen en verwijderen. Zowel vooraan als achteraan.

Opdracht: Maak een pop-up

Plaats een button op het scherm.

Klikken op de button laat een popup verschijnen.

Experimenteer hiervoor met:

getElementById

innerHTML

Onclick event ((zoek zelf op wat dit is en hoe dit werkt))

Eindoefening:

Download volgend document: eindoefening-start.html

Hierin zit een navigatiebar met een knop om in te loggen. We gaan vertrekken van de knop ‘inloggen’. Hier een voorbeeld van een knop:

<button class=”btn btn-outline-success my-2 my-sm-0″ onclick=”inloggen();”>Inloggen</button>

Het stukje code in bold aangeduid moet je toevoegen op je knop!!!

Opdracht:

Eerst even overlopen wat we gaan doen als we op de knop klikken:

1. We gaan zorgen dat je kan inloggen (een gebruikersnaam en paswoord vragen aan de gebruiker)
2. We gaan dit vergelijken door een if structuur te gebruiken en kijken of wat de gebruiker opgegeven heeft gelijk is aan de gegevens die wij hebben (username: “jouw naam”, wachtwoord: “jouw keuze”).
3. Als dit juist is, gaan we aan de gebruiker de klantnaam vragen en het aantal boeken dat de klant besteld.
4. Wanneer dit alles ingegeven is door de gebruiker gaan we dit laten zien op het scherm.
5. Dit alles steken we in een functie, deze functie geven we dezelfde naam zoals we opgegeven hebben bij de knop daarnet (zie hierboven in bold)

Het resultaat van deze oefening:

Uitbreiding opdracht:

Probeer het nu eens zelf …

• Maak een nieuwe variabele totaal aan
• Reken het totaal uit (bedrag is aantal boeken maal de prijs)
• Maak een nieuwe variabele btw
• Reken de btw van het totaal uit (btw is 6% van het totaal)
• Maak een nieuwe variabele eindtotaal aan
• Reken het eindtotaal uit (totaal + btw)
• Toon dit ook allemaal nog in het document

Dit zou er dan zo moeten uitzien: