Na het bestuderen van dit hoofdstuk wordt van je verwacht dat je:
In deze cursus gaan we aan de slag met het programmeren van web applicaties aan de client kant. Bij het programmeren aan de client kant wordt het werk door de computer van de gebruiker gedaan in plaats van een veraf gelegen server. Je maakt uiteraard gebruik van HTML/CSS, maar vooral van JavaScript en JavaScript bibliotheken zoals het populaire JQuery.
Om je een idee van de mogelijkheden te geven , kun je de (open source) broncode van het populaire spel 2048 op je online portfolio zetten. Voor hulp kun je terecht bij een gratis online cursus van "Udacity". Je hoeft hiervoor geen voorkennis te hebben.
JavaScript is in 1995 ontwikkeld door Brendan Eich voor Netscape. Zijn opdracht was om een programmeertaal te ontwikkelen die gemakkelijk te gebruiken zou zijn door ongeschoolde programmeurs, en waarmee de code direct in HTML geschreven kon worden. De benaming voor de taal was aanvankelijk "ActionScript" maar vanwege de populariteit van de nieuwe programmeertaal Java werd besloten om de naam te veranderen. Ook werd de taal aangepast zodat de syntax aan java doet denken. Verder heeft JavaScript niets met java te maken!
Het feit dat JavaScript inderdaad gebruikt kan worden door ongeschoolde programmeurs, o.m. omdat je gemakkelijk stukken code kunt knippen, plakken en uitproberen maakte dat JavaScript lange tijd door "echte programmeurs" werd beschouwd als een inferieur speelgoedtaaltje. Ook het feit dat het zo gemakkelijk is om uiterst slecht onderhoudbare code vol fouten te schrijven heeft daaraan bijgedragen.
Sinds de opkomst van Ajax (waarover later meer) is er meer belangstelling voor JS gekomen en is er daarmee ook meer oog gekomen voor de mooie eigenschappen, de flexibiliteit en de kracht van de taal. Ook werden JavaScript bibliotheken als JQuery ontwikkeld om de valkuilen van JS te vermijden. In deze cursus gaan we hier dankbaar gebruik van maken.
Met de volgende opdracht leer je hoe je met behulp van JQuery er voor zorgt dat de pagina inhoud verandert als je op een knop klikt.
Maak een html webpagina en importeer JQuery met een link naar een "cdn" (content delivery network; zie code).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>oefening 1</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
</body>
</html>
Voeg vervolgens een aantal simpele pagina elementen en een knop toe aan de body.
<body>
<h1>Oefening 1</h1>
<p>Een willekeurig stukje tekst</p>
<p>Een ander stukje tekst</p>
<button type="button" id="knop_1">Verander tekst</button>
</body>
Zet nu de volgende JQuery code in je document. De plek maakt op zich niet uit. Later ga je JS/JQ code in een apart .js bestand zetten.
<script>
//voer uit als document gereed is
$(document).ready (function () {
// voeg event handling aan de knop toe
$("#knop_1").click(function() {
// beschrijf wat er moet gebeuren
$("p").text("it just works!!!!");
$("button").hide();
$("h1, p").css({
'color': 'red',
'font-size': '200%',
'font-family': "'Comic Sans MS', cursive, sans-serif"
});
}); //einde click event
}); //einde ready event
</script>
JavaScript is "event driven" dat wil zeggen dat het een functie uitvoert als er iets gebeurt. In bovenstaande code zijn er twee events. De eerste is het moment dat de pagina geladen is. Dit is standaard het begin van je code.
$(document).ready (function () { // hier komen je functies }); //einde ready event;
Hier staat letterlijk: voer de volgende functies uit zodra het document gereed is. De functies die je schrijft worden als argument aan de ready functie meegegeven. Omdat functies in JavaScript vaak binnen andere functies worden "genest" is het heel belangrijk dat je er voor zorgt dat je code goed inspringt. Vaak wordt aan het einde van een functie (te herkennen aan }); commentaar gezet zoals in bovenstaande code.
Binnen de ready functie wordt de click functie geïnitialiseerd. Deze zorg er voor dat een functie wordt uitgevoerd als gebruiker op de knop klikt.
Elementen in JQuery selecteren werkt met dezelfde systematiek als elementen met CSS selecteren:
$("p") // selecteert alle <p> tags $("#id") // selecteer element met id ... $(".class") // selecteer elementen van klasse ... $("#id p") // selecteer p elementen binnen element met id ...
Zie w3schools voor een uitgebreide lijst met selectors .
De volgende codefragmenten vragen een waarde van een element op en kennen ze toe aan een variabele van het type var:
var tekst = $("#id").text(); //vraagt de tekst van element met id ... var html = $("#id").html(); //vraagt de html van element met id ... var waarde = $("#id").val(); //vraagt de "value" van element met id ...
Met de derde regel code zou je bijvoorbeeld de waarde die een gebruiker in een input veld met een bepaald id heeft ingevoerd kunnen opvragen.
Je krijgt altijd een string terug als je op deze manier waardes opvraagt. Hoewel JavaScript vrij flexibel met verschillende typen gegevens omgaat is het toch raadzaam om de string te parsen met parsInt("nummer") of parsFloat("nummer") voor je ermee gaat rekenen.
De volgende code fragmenten veranderen de waarde van een element:
var tekst = "Hallo Wereld!" $("#id").text(tekst); //verandert de tekst van element met id ... var htmlCode = "<p>Een stukje tekst</p>"; $("#id").html(htmlCode); //verandert de html van element met id ... var waarde = 25; $("#id").val(waarde); //verandert de "value" van element met id ...
Maak het spel YAHTZEE! in JQuery/JavaScript volgens onderstaande uitwerking. Als je een dobbelsteen opnieuw wilt gooien, kun je er op klikken.
Er zijn nog geen scores