Basiscursus javascript en jQuery
Arrays maken en gebruiken
Een Array is een variabele waarin meer dan één waarde opgeslagen kan worden.
Bekijk de afbeelding om te zien hoe de syntax er uit ziet.
Let op de vierkante haakjes!
Kijk ook goed naar het resultaat in de console.
$(document).ready(function(){
var fruit = ['appels','peren','bananen'];
console.log(fruit);
});
Array(3) [ “appels”, “peren”, “bananen” ]
Methods: push() en unshift()
JavaScript kent een aantal Methods om de inhoud van een array te manipuleren.
Er zijn twee manieren om een nieuw element aan de array toe te voegen.
Met de method push() voeg je een element achter aan de array toe.
Met unshift() voeg je een element vooraan toe.
Vergelijk het resultaat met de code.
$(document).ready(function(){
var fruit = ['appels','peren','bananen'];
fruit.push('bessen');
fruit.unshift('ananassen');
console.log(fruit);
});
Method sort()
Met de method sort() zet je de inhoud van de array op alfabetische volgorde.
Als je een array met Numbers hebt zet je hiermee de inhoud op numerieke volgorde.
Vergelijk het resultaat met de code.
$(document).ready(function(){
var fruit = ['appels','peren','bananen'];
fruit.push('bessen');
fruit.unshift('ananassen');
fruit.sort();
console.log(fruit);
});
Methods: pop() en shift()
En dan zijn er nog twee methods om elementen uit een array te verwijderen.
pop() verwijdert het laatste element, shift() verwijdert het eerste element.
Vergelijk het resultaat met de code.
$(document).ready(function(){
var fruit = ['appels','peren','bananen'];
fruit.push('bessen');
fruit.unshift('ananassen');
fruit.sort();
fruit.pop();
fruit.shift();
console.log(fruit);
});
Properties: length
Behalve methods zijn er ook properties nodig voor het bewerken en gebruiken van arrays
Soms is het nodig om te controleren hoeveel elementen er in een array zitten.
Deze property kunnen we opvragen met de opdracht .length
Vergelijk het resultaat met de code.
$(document).ready(function(){
var fruit = ['appels','peren','bananen'];
fruit.push('bessen');
fruit.unshift('ananassen');
fruit.sort();
fruit.pop();
fruit.shift();
console.log(fruit);
console.log(fruit.length);
});
Start at zero
Tenslotte een extraatje over het uitlezen van een array.
Daarvoor is het belangrijk om te weten dat JavaScript begint te tellen bij 0.
Dus niet zoals wij gewend zijn met 1.
Dat maakt het in het begin misschien wat ingewikkeld.
Het eerste element heeft dus volgnummer 0,
Het tweede element heeft volgnummer 1, enzovoort.
We noemen dat volgnummer de index.
Bekijk de afbeelding om te zien hoe de afzonderlijke elementen van een Array opgevraagd kunnen worden.
Vergelijk het resultaat met de code.
$(document).ready(function(){
var fruit = ['appels','peren','bananen'];
fruit.push('bessen');
fruit.unshift('ananassen');
fruit.sort();
fruit.pop();
fruit.shift();
console.log("In de array zit " + fruit);
console.log("Er zitten " + fruit.length + " elementen in de array");
console.log("Het eerste element, met index 0 is " + fruit[0]);
console.log("Het eerste element, met index 1 is " + fruit[1]);
console.log("Het eerste element, met index 2 is " + fruit[2]);
});
Meer naar de body
In dit voorbeeld maakt $(...) een jQuery-object aan.
Elke variabele bevat nu een jQuery-object dat een <p> -element vertegenwoordigt. Dit jQuery-object heeft alle jQuery-methoden, zoals .append(), .css(), enzovoort.
Op deze manier wordt de tekst in de HTML pagina geplaatst maar heeft nog de standaard stijl van een <p>-element.
Maak voor de classnames in het css-bestand rules om de stijl van elk tekstelement te veranderen.
.t1{
font-family: sans-serif;
color: red;
text-align: center;
}
.t2{
font-family: sans-serif;
color: blue;
}
.t3{
font-family: sans-serif;
color: orange;
text-align: right;
font-style: italic;
}
.t4{
font-family: monospace;
color: purple;
font-size: 18px;
}
$(document).ready(function(){
var fruit = ['appels','peren','bananen'];
var aantalElementenInArray = fruit.length;
var tekst1 = $("<p class = 't1'>Er zitten"+aantalElementenInArray+" in de array.</p>");
var tekst2 = $("<p class = 't2'>Het eerste element, met index 0 is " + fruit[0] + "</p>");
var tekst3 = $("<p class = 't3'>Het eerste element, met index 1 is " + fruit[1] + "</p>");
var tekst4 = $("<p class = 't4'>Het eerste element, met index 2 is " + fruit[2] + "</p>");
$("body").append(tekst1);
$("body").append(tekst2);
$("body").append(tekst3);
$("body").append(tekst4);
});
- index.html zorgt voor de inhoud en structuur.
- style.css zorgt voor de opmaak en stijl.
- code.js zorgt voor de functionaliteit en interactiviteit.
Deze bestanden werken samen om een complete, interactieve, dynamische en visueel aantrekkelijke webpagina te vormen.
Opdracht
Kennis en vaardigheden
- Maak een nieuw project aan met de startbestanden.
De naam van het project is Array - Maak een Array met de voornamen van 5 klasgenoten.
- Voeg een extra naam toe vooraan de array
- Voeg een extra naam toe achter aan de array
- Zet de namen op alfabetische volgorde.
- Verwijder de eerste en de laatste naam.
- Schrijf een regel code om het aantal elementen in de array uit te lezen.
- Schrijf voor elke naam een regel code met daarin de index en de naam.
- Maak voor elke regel een jQuery object en plaats dat in de html pagina.
- Verander de stijl van elke regel met css.
Bewaar je werk.
Dit wordt jouw persoonlijke Javascript kennisbank.
- Welke 5 methoden om een array te verwerken ken je?
- Geef voor elk van die methoden aan wat je daar mee kunt doen.
- Welke property van Arrays ken je?
Wat kun je daarmee doen? - Wat is de index van een element in een array?
- Met welke opdracht kun je één element uit een array selecteren?
- Hoe wordt een jQuery object aangemaakt?
- Met welke jQuery-methode kan een object in de html pagina worden geplaatst?
- Hoe kan de style van een jQuery-object in de html pagina veranderd worden?
- Leg uit wat de “rol” is van de drie documenten (index, style en code)