Basiscursus javascript en jQuery
Variabelen declareren
Een variabele is een ding met een naam en een waarde.
De naam blijft altijd hetzelfde, maar de waarde kan door opdrachten in het script gewijzigd worden.
Een variabele aanmaken noemen we een variabele declareren
In de afbeelding worden drie variabelen gedeclareerd.
Hieronder staat een korte uitleg.
- Het woord var betekent dat je een nieuwe variabele declareert.
- Daarna komt de naam die je hebt bedacht voor de variabele.
- En tenslotte achter het = teken de waarde die je er aan geeft.
Regel 2: De eerste variabele is van het type string
Een string is een tekst en staat altijd tussen aanhalingstekens.
Regel 3: De volgende variabele is van het type number
Met deze variabelen kun je de computer een berekening laten uitvoeren.
Met een string is dat niet mogelijk.
Regel 4: De derde variabele is weer van het type string
Het lijkt een getal, maar omdat het tussen aanhalingstekens staat is het een tekst.
$(document).ready(function(){
var s = "dit is een string";
var g = 200;
var sg = "200";
});
Variabelen gebruiken
Tijd om te beginnen.
Maak op je laptop een nieuw HTML/JS project aan met de naam variabelen.
Open het bestand index.html ook in Firefox.Neem de code uit het voorbeeld over in het bestand code.js en sla de wijzigingen op.
Uiteraard typ je in plaats van Joyfully-Joe jouw eigen naam.Klik nu in het venster van Firefox en ververs de pagina Ctrl + r (windows) of Cmd + r (apple)
Als het goed gegaan is zie je dat Javascript de twee strings (Hallo en de variabele naam ) heeft samengevoegd tot één string.
Let op de spatie achter het woord Hallo!
$(document).ready(function(){
var naam = "Joyfully-Joe";
console.log("Hallo " + naam)
});
Hallo Joyfully-Joe
Ietsjes ingewikkelder nu
We gaan de code iets uitbreiden.
Neem het script van het voorbeeld over.
Uiteraard gebruik je jouw naam, leeftijd en geboortedag.Bewaar de wijzigingen.
Klik in het Firefox-venster en ververs de pagina.
We hebben nu ook een variabele van het type Number gebruikt.
En op regel 6 hebben we met deze variabele een berekening gemaakt.
Klopte de uitvoer in de console?
$(document).ready(function(){
var naam = "Joyfully-Joe";
var leeftijd = 15;
var geboortedag = "1 januari";
var over_een_jaar = leeftijd + 1;
console.log("Hallo ik ben " + naam);
console.log("Mijn leeftijd is " + leeftijd);
console.log("Op " + geboortedag + " word ik " + over_een_jaar);
});
Tekst naar de body met append()
De .append()-methode voegt HTML-elementen of tekst toe aan de geselecteerde plaats in het document.
- In plaats van de samengestelde zinnen in de console te loggen, worden ze in een variabele geplaast.
- Vervolgens wordt $(“body”) gebruikt om de body-tag te selecteren.
- Met $(“body”).append(tekst1); wordt de HTML-inhoud van variabele tekst1 toegevoegd aan de body, gevolgd door tekst2 en tekst3.
Je ziet nu dat de drie bestanden index.html en code.js netjes samenwerken.
$(document).ready(function(){
var naam = "Joyfully-Joe";
var leeftijd = 15;
var geboortedag = "1 januari";
var over_een_jaar = leeftijd + 1;
var tekst1 = "<h1>Hallo ik ben " + naam + "</h1>";
var tekst2 = "<h2>Mijn leeftijd is " + leeftijd + "</h2>";
var tekst3 = "<h1>Op " + geboortedag + " word ik " + over_een_jaar + "</h1>";
$("body").append(tekst1);
$("body").append(tekst2);
$("body").append(tekst3);
});
Hallo ik ben Joyfully-Joe
Mijn leeftijd is 15
Op 1 januari word ik 16
Opdracht
Kennis en vaardigheden
Bewaar het project met de naam Variabelen op jouw laptop in de map javascript.
Dit wordt jouw persoonlijke Javascript kennisbank!
Wat is een variabele?
Wat betekent “Een variabele declareren”?
Hoe wordt een variabele gedeclareerd?
Welke typen variabelen zijn op deze pagina besproken?
Noem 2 verschillen tussen deze 2 variabelen.
Hoe kun je twee strings samenvoegen tot één string?
Hoe kun je javascript een berekening laten uitvoeren?
Hoe kun je met de append-methode tekst in de html-pagina plaatsen?