ADVANCED SCRIPTING
BASISKENNIS FLOWCHART
Start en stop
Activiteit (=do something)
Eenduidige instructie
Voorwaarde (if-statement)
er zijn slechts 2 mogelijke antwoorden; ja of
nee, true of false
Lus (Loop/herhaling)
For-loop bij een vooraf bepaald aantal
While-loop bij vooraf onbepaald aantal
Interactie (User input/output)
HOE KOPPEL JE JAVASCRIPT AAN HTML?
Dit koppel je door de volgende regel in te voeren in de <head> van
je HTML bestand:
<script type="text/javascript" src="mapnaam/bestandsnaam.js"
defer>
</script>
Defer zorgt ervoor dat het javascript pas wordt geladen nádat het
HTML bestand geladen is.
,THEORIE HOOFDSTUK: EERSTE SCRIPT
Je kan een popup maken door in je javascript een window.alert of
verkort een alert toe te voegen. Dit doe je als volgt:
alert("Hallo wereld");
OF
Window.alert("Hallo wereld");
Deze console is ook een object van de webpagina en dat betekent dat
we die ook kunnen gebruiken in onze code. Één van de methoden van
dit console object is log(). Daarmee kunnen we zelf allerlei
meldingen en informatie uit het javascript naar de Console
schrijven. De console kun je in de webpagina openen door op de
rechtermuisknop te klikken en vervolgens op inspecteren te klikken.
Een console.log schrijf je op de volgende manier in je javascript:
console.log('Dit is een geheime tekst');
Als je vervolgens de console opent, zie je de volgende tekst staan:
Nu willen we de gebruiker om een input vragen. Dit doen we door
gebruik te maken van prompt.
Dit doe je op de volgende
manier in je javascript:
prompt('Hoe heet jouw
naam?');
Je krijgt nu opnieuw een popup-melding, maar dit keer kan de
gebruiker in het balkje zijn gegevens invoeren.
Je hebt nu de gebruiker om een input gevraagd, maar we willen
natuurlijk ook iets doen met die input. Op bovenstaande manier wordt
de ingevoerde naam niet onthouden. Daarom is het handig om een
variabele toe te voegen. Dit doe je op de volgende manier:
Var naam = prompt('Hoe heet jouw naam?');
,Nu wordt er onthouden welke input de gebruiker heeft gegeven. We
kunnen vervolgens de gebruiker
verwelkomen door zijn/haar naam
te zeggen.
Dit doen we als volgt:
alert('Welkom ' + naam);
Als laatste voegen we nog een interactie toe om de gebruiker de naam
te laten bevestigen. Hiervoor gebruiken we de functie confirm(). Om
ook hier het ingevoerde antwoord te onthouden, voegen we weer een
variabele toe.
var antwoord = confirm('Past die naam bij jou?');
Dit antwoord kunnen we ook opslaan in de console. Dat doen we op de
volgende manier:
console.log('Passende naam = ' + antwoord);
Als de gebruiker op OK drukt, zal de console de waarde true geven,
als de gebruiker op Annuleren drukt, zal de console de waarde false
geven.
UITWERKING OPDRACHT 3
, THEORIE HOOFDSTUK: EN MEER OPTIES
Je kan gebruik maken van een .indexOf() om te zien of een bepaald
karakter in een string zit. Dit werkt op de volgende manier:
var spatieLocatie = 'Waar zit een De waarde van deze variabele
is 4. Dit is omdat computers
spatie?'.indexOf(' ');
beginnen met tellen vanaf 0.
De spatie komt na het woord
of: ‘waar’. Dat wil zeggen dat W=0
var opleiding = 'Communication &
Nu is de waarde 14
Multimedia Design';
spatieLocatie = opleiding.indexOf('&');
Je kan gebruik maken van .trim() om een string te ontdoen van
overbodige spaties. Dit werkt op de volgende manier:
Var naam = ‘ Vera ten Haaf ’;
Naam = naam.trim();
Nu worden alle spaties voor en achter de naam verwijderd.
Je kan ook de lengte van een string achterhalen. Dit doe je met
.length. Dit werkt op de volgende manier:
var lengte = 'Hoe lang is deze tekst?'.length;
Een string omzetten naar hoofdletters doe je met .toUpperCase() op
de volgende manier:
var cap = 'Hoe lang is deze tekst?'.toUpperCase();
De waarde die daarbij hoort is dan HOE LANG IS DEZE TEKST?
Met Math.random() kan je een random getal laten kiezen tussen 0.0 en
1.0. Dit kan je vervolgens dmv +, -, * en / veranderen. Dit werkt op
de volgende manier:
var gokje = Math.random();
gokje = Math.random()*25;
je krijgt dan een getal tussen 0.0 en 25.0.
Je kan ook een getal naar beneden afronden. Dit doe je met
Math.floor() en dat werkt op de volgende manier:
var rond = Math.floor(3.14);
De waarde wordt dan 3.
BASISKENNIS FLOWCHART
Start en stop
Activiteit (=do something)
Eenduidige instructie
Voorwaarde (if-statement)
er zijn slechts 2 mogelijke antwoorden; ja of
nee, true of false
Lus (Loop/herhaling)
For-loop bij een vooraf bepaald aantal
While-loop bij vooraf onbepaald aantal
Interactie (User input/output)
HOE KOPPEL JE JAVASCRIPT AAN HTML?
Dit koppel je door de volgende regel in te voeren in de <head> van
je HTML bestand:
<script type="text/javascript" src="mapnaam/bestandsnaam.js"
defer>
</script>
Defer zorgt ervoor dat het javascript pas wordt geladen nádat het
HTML bestand geladen is.
,THEORIE HOOFDSTUK: EERSTE SCRIPT
Je kan een popup maken door in je javascript een window.alert of
verkort een alert toe te voegen. Dit doe je als volgt:
alert("Hallo wereld");
OF
Window.alert("Hallo wereld");
Deze console is ook een object van de webpagina en dat betekent dat
we die ook kunnen gebruiken in onze code. Één van de methoden van
dit console object is log(). Daarmee kunnen we zelf allerlei
meldingen en informatie uit het javascript naar de Console
schrijven. De console kun je in de webpagina openen door op de
rechtermuisknop te klikken en vervolgens op inspecteren te klikken.
Een console.log schrijf je op de volgende manier in je javascript:
console.log('Dit is een geheime tekst');
Als je vervolgens de console opent, zie je de volgende tekst staan:
Nu willen we de gebruiker om een input vragen. Dit doen we door
gebruik te maken van prompt.
Dit doe je op de volgende
manier in je javascript:
prompt('Hoe heet jouw
naam?');
Je krijgt nu opnieuw een popup-melding, maar dit keer kan de
gebruiker in het balkje zijn gegevens invoeren.
Je hebt nu de gebruiker om een input gevraagd, maar we willen
natuurlijk ook iets doen met die input. Op bovenstaande manier wordt
de ingevoerde naam niet onthouden. Daarom is het handig om een
variabele toe te voegen. Dit doe je op de volgende manier:
Var naam = prompt('Hoe heet jouw naam?');
,Nu wordt er onthouden welke input de gebruiker heeft gegeven. We
kunnen vervolgens de gebruiker
verwelkomen door zijn/haar naam
te zeggen.
Dit doen we als volgt:
alert('Welkom ' + naam);
Als laatste voegen we nog een interactie toe om de gebruiker de naam
te laten bevestigen. Hiervoor gebruiken we de functie confirm(). Om
ook hier het ingevoerde antwoord te onthouden, voegen we weer een
variabele toe.
var antwoord = confirm('Past die naam bij jou?');
Dit antwoord kunnen we ook opslaan in de console. Dat doen we op de
volgende manier:
console.log('Passende naam = ' + antwoord);
Als de gebruiker op OK drukt, zal de console de waarde true geven,
als de gebruiker op Annuleren drukt, zal de console de waarde false
geven.
UITWERKING OPDRACHT 3
, THEORIE HOOFDSTUK: EN MEER OPTIES
Je kan gebruik maken van een .indexOf() om te zien of een bepaald
karakter in een string zit. Dit werkt op de volgende manier:
var spatieLocatie = 'Waar zit een De waarde van deze variabele
is 4. Dit is omdat computers
spatie?'.indexOf(' ');
beginnen met tellen vanaf 0.
De spatie komt na het woord
of: ‘waar’. Dat wil zeggen dat W=0
var opleiding = 'Communication &
Nu is de waarde 14
Multimedia Design';
spatieLocatie = opleiding.indexOf('&');
Je kan gebruik maken van .trim() om een string te ontdoen van
overbodige spaties. Dit werkt op de volgende manier:
Var naam = ‘ Vera ten Haaf ’;
Naam = naam.trim();
Nu worden alle spaties voor en achter de naam verwijderd.
Je kan ook de lengte van een string achterhalen. Dit doe je met
.length. Dit werkt op de volgende manier:
var lengte = 'Hoe lang is deze tekst?'.length;
Een string omzetten naar hoofdletters doe je met .toUpperCase() op
de volgende manier:
var cap = 'Hoe lang is deze tekst?'.toUpperCase();
De waarde die daarbij hoort is dan HOE LANG IS DEZE TEKST?
Met Math.random() kan je een random getal laten kiezen tussen 0.0 en
1.0. Dit kan je vervolgens dmv +, -, * en / veranderen. Dit werkt op
de volgende manier:
var gokje = Math.random();
gokje = Math.random()*25;
je krijgt dan een getal tussen 0.0 en 25.0.
Je kan ook een getal naar beneden afronden. Dit doe je met
Math.floor() en dat werkt op de volgende manier:
var rond = Math.floor(3.14);
De waarde wordt dan 3.
