print.gif

 

Wat is JavaScript?

JavaScript is een scriptingtaal. Er bestaat client-side en server-side JavaScript. Client-side JavaScript wordt direct uitgevoerd via de browser van de bezoeker, vandaar client-side. Server-side JavaScript wordt uitgevoerd via een server waarna het resultaat wordt teruggestuurd naar de browser van de bezoeker. In dit artikel wordt alleen client-side JavaScript behandeld.

In het algemeen kun je zeggen dat je met JavaScript je site interactief kunt maken. Je kan de bezoekers een vraag stellen of browsergegevens achterhalen waarna deze gegevens gebruikt worden op je site. Bijvoorbeeld: als een bezoeker je site bezoekt, ziet hij een venster waarin hem naar zijn naam gevraagd wordt. Nadat hij de naam heeft ingetypt, wordt op de site, op alle gewenste plaatsen, de bezoeker met zijn (voor)naam aangesproken. Nu is dit misschien niet zo'n nuttige toepassing van JavaScript (misschien zelfs wel irritant), maar het laat wel goed zien dat JavaScript je site interactief maakt.

Het verschil tussen JavaScript en Java

In iedere JavaScript cursus op het web lees je dit, dus daarom staat het hier ook nog eens: JavaScript is geen Java. Kort gezegd is het verschil dat JavaScript een scriptingtaal is en Java een programmeertaal. Java is, omdat het een programmeertaal is, een stuk moeilijker te leren dan JavaScript. Een zgn. Java applet is verder een stuk ingewikkelder en groter dan een brok JavaScript code, waardoor de laadtijd van een applet langer is.

De geschiedenis van JavaScript

Dat er veel verwarring is over de begrippen JavaScript en Java is te begrijpen. De namen zijn verwarrend en de geschiedenis van de beide talen is nauw met elkaar verbonden. JavaScript is namelijk ontstaan toen Java populair werd. De taal Java is ontwikkeld door Sun Microsystems. In 1995 werd Java heel populair, maar omdat de taal zo ingewikkeld was, waren er maar weinig mensen die er goed mee om konden gaan.

Het bedrijf Netscape zag dat er behoefte was aan een taal met veel van de mogelijkheden van Java, maar die wel eenvoudig te leren was en die verder direct door de browser uitgevoerd kon worden. In de tweede helft van 1995 begonnen Netscape en Sun een samenwerking die de creatie van JavaScript tot gevolg had. JavaScript heette eerst "Mocha" en later werd het "Livescript" genoemd. Toen de samenwerking tussen Netscape en Sun eenmaal een feit was, ontstond de uiteindelijke naam: JavaScript.

Wat heb je nodig?

Voor het volgen van deze JavaScript cursus heb je het volgende nodig:

Even een vlekje wegwerken

U weet nu het nodige over de achtergrond van JavaScript. U wilt beginnen met de eerste les van de JavaScript cursus, maar u krijgt dezelfde foutmelding als de volgende cursist tijdens de installatie van Java:

Ik heb een probleem gehad tijdens het updaten van Java. Nu krijg ik steeds de melding error 25099 during installation java. Ik heb dan zoals staat vermeld bij 'help' van java, het programma van java compleet van de pc verwijderd via het configuratiescherm. Maar nu kan ik het niet meer opnieuw installeren want ik krijg opnieuw steeds dezelfde melding fout 25099. Ik ben ook via taakbeheer gegaan en daar was er ook niets meer terug te vinden van java. Wie kan mij helpen. Bedankt op voorhand.

Wanneer u tijdens het installeren of updaten van Java een berichtvenster ziet met de volgende foutmelding:

Fout 25099. Uitpakken van kernbestanden mislukt of in de Engelse versie: error 25099 during installation java.

infokomcomputerGebruik deze knop. U komt dan op een pagina die aangeeft hoe u deze fout kunt herstellen.

 

jQuery

Query is een uitbreiding of bibliotheek voor Javascript. jQuery heeft als motto "Wirth less, do more", wat inhoudt dat je met minder code veel meer mogelijkheden hebt. jQuery is, net als fietsen, makkelijk om te leren, maar moeilijk om er écht goed in te worden. Om jQuery te leren is ervaring met Javascript niet vereist, maar het maakt het wel makkelijker sommige dingen te begrijpen. Het jQuery framework is ontworpen om het programmeren van Javascript te vereenvoudigen. Het grote probleem bij Javascript is namelijk dat er behoorlijk wat browser afhankelijke variabelen zijn, waardoor het soms lastig kan zijn om Javascript te schrijven die in alle browsers goed werkt. jQuery rekent hiermee af, door een groot gedeelte van de geboden opties browser onafhankelijk te maken.

jQuery gebruiken

Om jQuery daadwerkelijk te kunnen gebruiken, moet u het eerst downloaden en opnemen in de webpagina waar u het gaat gebruiken. jQuery is 'slechts' 24KB in de verkleinde versie, waardoor het zelfs bij websites voor de mobiele telefoon gebruikt kan worden.

jQuery kan gedownload worden van, hoe verrassend, jQuery.com. Er zijn 2 verschillende versies berschikbaar: De minified versie en de development versie. De minified versie is slechts 24KB, terwijl de development versie 155KB is. Het verschil tussen deze 2 versies is dat in de minified versie o.a. het meeste commentaar verwijderd is.

Het is niet verplicht om jQuery op de eigen server te plaatsen. U kunt jQuery op uw website toepassen door het framework als extern js-bestand in te laden in uw website. De meest recente versie van jQuery kunt u downloaden via de website van jQuery zelf: www.jquery.com. U hebt dan de keuze uit de ongecomprimeerde en de gecomprimeerde versie (productie- en ontwikkelingsversie). jQuery laadt u in als volgt:

<script type="text/javascript" scr="jquery.js"></script>

U kunt jQuery ook inladen via Google Code. Voor gebruik op uw website hebt u voldoende aan de gecomprimeerde versie. Hieronder de eenvoudigste manier om jQuery te laden vanaf de Google server:

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Elementen selecteren

De basis van jQuery begint met het selecteren van de elementen waarmee u wilt gaan werken. Zodra u een element hebt geselecteerd, kunt u hier jQuery op loslaten. Het selecteren van jQuery is eenvoudig. U kunt hierbij CSS selectors gebruiken, maar ook CSS3 selectors. Dit zijn enkele voorbeelden hoe u elementen kunt selecteren:

// Selecteer all P elementen
$("p")

// Selecteer alle P elementen met de class "test"
$("p.test")

// Selecteer P elementen die in een DIV element staan
$("div p")

Nu er één of meerdere elementen geselecteerd zijn, kunt u aan de gang. Aan een geselecteerd element kunnen meerdere acties gekoppeld worden. In dit voorbeeld krijgt elk oneven P element op de pagina een extra CSS class mee:

$("P:odd").addClass("oneven");

Dit voorbeeld maakt gebruik van een speciale jQuery selector :odd. Die selecteert alle oneven elementen op de pagina. Uiteraard is er ook de versie :even. Die selecteert alle even elementen. Er zijn verschillende speciale selectors:

:first - Alleen het eerste element
:last - alleen het eerste element selecteren
:eq(5) - Het 6e element selecteren (het tellen begint namelijk bij 0)
:visible - Alle zichtbare elementen
:hidden - Alle onzichtbare elementen
:checkbox - Alle checkbox elementen
:checked - Alle checkbox en radio elementen die zijn aangevinkt
:contains(text) - Alle elmenten die de tekst "text" bevat
:image - Alle plaatjes elementen, dus ook een button met het "SRC" attribuut

Dit is een slechts een kleine opsomming van wat er allemaal mogelijk is. Op de website van jQuery staan ze allemaal

Javascript events

Het vorige voorbeeld werkt helaas niet (altijd). jQuery maakt namelijk veel gebruik van zogenaamde "javascript events". Dat houdt in dat er een bepaalde actie aan het element gekoppeld wordt. Voorwaarde hiervoor is wel dat het element al bestaat wanneer de javascript code wordt uitgevoerd. Een oplossing hiervoor zou zijn om alle code onderin de pagina te zetten, maar het is ook mogelijk om javascript te laten wachten totdat alle code is ingeladen. Dat kan op 2 manieren:

// De lange manier:
$(document).ready(function() {
// Hier komt alle code die uitgevoerd moet worden
});

// De korte manier:
$( function() {
// Hier komt alle code die uitgevoerd moet worden
});

Voorbeelden jQuery

Dit was de basis. Van hieruit kunt u verder uitbreiden met extra functies en mogelijkheden. Hier volgen enkele voorbeelden:

Toggle

$( function() {
// Kijken of er op een P element geklikt is
$("P").click( function() {
// Een div element op de pagina wel of niet laten zien
$("div").toggle();
});
});

Voorbeeld

Nog enkele jQuery voorbeelden? Bekijk deze pagina.