Waarom JavaScript?
JavaScript is een krachtige, ingewikkelde, en vaak misbegrepen programmeertaal. Het maakt het mogelijk om snel programma's te ontwikkelen waarin gebruikers direct informatie kunnen invullen en het resultaat kunnen zien.
Het voornamelijke voordeel van JavaScript, ook wel bekend als ECMAScript, is dat het rond de Web browser draait en daardoor de mogelijkheid heeft om dezelfde resultaten te produceren op alle platformen die door de browser ondersteund worden. De voorbeelden op deze pagina, net als Google Maps, draait op Linux, Windows, en Mac OS. Met de recente groei van vele JavaScript bibliotheken is het nu nog makkelijker om door een document te navigeren, DOM elementen te selecteren, animaties te maken, gebeurtenissen af te handelen en Ajax applicaties te ontwikkelen. In tegenstelling tot de hype rondom andere technologieën die private interesses hebben is Javascript eigenlijk de enige client-side taal die op meerde platformen draait en tegelijkertijd gratis is en universeel geaccepteerd.
Wat je al zou moeten weten
JavaScript is een taal waar je makkelijk mee kunt beginnen. Alles wat je nodig hebt is een tekstverwerker en een Web browser.
Er zijn vele andere technologieën die geïntegreerd kunnen worden met JavaScript, dit valt echter buiten het bestek van dit document. Verwacht niet dat je direct een enorme applicatie als Google Maps kunt maken op jouw eerste dag!
Aan de slag
Beginnen met JavaScript is erg makkelijk. Je hoeft geen ingewikkelde ontwikkelprogramma's geïnstalleerd te hebben. Je hoeft niet te weten hoe je een shell moet gebruiken, hoe je Make programmeert of hoe je een compiler moet gebruiken. JavaScript wordt geïnterpreteerd door jour Web browser. Alles wat je moet doen is een programma als tekstbestand opslaan en het openen in jouw Web browser. Dat is alles!
JavaScript is een uitstekende programmeertaal voor beginners. Het maakt het mogelijk om direct resultaten te tonen aan de nieuwe leerling en leert hen over hulpmiddelen die zij waarschijnlijk nuttig vinden in het dagelijks leven. Dit staat in contrast met talen als C, C++ en Java die eigenlijk alleen nuttig zijn voor toegewijde software ontwikkelaars.
Browser compatibiliteitsproblemen
Er zijn variaties in de beschikbare functionaliteit in verschillende browsers. Mozilla Firefox, Microsoft Internet Explorer (MSIE of kortweg IE), Apple Safari en Opera verschillen in gedrag. We zijn van plan om deze afwijkingen te documenteren. Deze problemen kun je verminderen door het gebruik van de verschijnende cross-platform JavaScript APIs. Deze APIs bieden veelgebruikte functionaliteit en verbergen de afwijkingen voor jou.
Het proberen van voorbeelden
De onderstaande voorbeelden bevatten wat codes. Er zijn vele manieren om deze uit te proberen. Als je al een eigen website hebt, dan kun je deze als nieuwe webpagina's opslaan op jouw website.
Als je nog geen eigen website hebt, dan kun je deze voorbeelden opslaan als bestanden op de computer, en deze openen in jouw huidige Web browser. Hierdoor is JavaScript ook zo'n gemakkelijke taal voor beginnende programmeurs. Je hebt geen compiler of ontwikkelomgeving nodig; alles wat je nodig hebt is een browser en jijzelf!
Voorbeeld: een muisklik opvangen
De details over het afhandelen van events (NL: gebeurtenissen; details zoals event typen, het registreren van verwerkers, doorgifte, enz.) zijn te uitgebreid om in dit simpele voorbeeld te behandelen. Echter, dit voorbeeld kan niet het vangen van een muisklik demonstreren zonder een beetje in te gaan op het gebeurtenissens systeem van JavaScript. Houd echter in het achterhoofd dat dit voorbeeld de volledige details over JavaScript gebeurtenissen weglaat. Als je meer te weten wilt komen naast de beginselen die hier worden beschreven, lees meer over het gebeurtenissen systeem van JavaScript.
'Muis' gebeurtenissen zijn een deelverzameling van alle gebeurtenissen die een browser genereert als reactie op acties van de gebruiker. De volgende gebeurtenissen kunnen afgegeven worden als reactie op een muis actie:
- Click - wanneer de gebruiker met de muis klikt.
- DblClick - wanneer de gebruiker dubbel klikt met de muis.
- MouseDown - wanneer de gebruiker een muisknop indrukt (de eerste helft van een klik).
- MouseUp - wanneer de gebruiker een muisknop loslaat (de tweede helf van een klik).
- MouseOut - wanneer de muiscursor de grafische grenzen van een object verlaat.
- MouseOver - wanneer de muiscursor de grafische grenzen van een object betreedt.
- MouseMove - wanneer de muiscursor beweegt terwijl deze zich binnen de grafische grenzen van een object bevindt.
- ContextMenu - wanneer de gebruiker klikt met de rechtermuisknop.
Merk op dat inline event handlers (ingesloten gebeurtenissenverwerkers, oftewel datgene dat toegevoegd is als attribuut voor een HTML element) normaliter met kleine letters geschreven zijn en dat deze in een script altijd met kleine letters geschreven moeten zijn.
De meest simpele methode om deze gebeurtenissen af te vangen (in HTML), het registreren van event handlers is door individuele gebeurtenissen als attributen op te geven voor het element. Voorbeeld:
<span onclick="alert('Hallo Wereld!');">Klik Hier</span>
De JavaScript code die je wilt uitvoeren kan ingesloten worden als attribuut waarde, of je kunt deze aanroepen als een functie. Deze functie zou dan eerder geregistreerd moeten zijn in een <script> blok op de HTML pagina:
<script>
function clickHandler() {
alert("Hallo, Wereld!");
}
</script>
<span onclick="clickHandler();">Klik Hier</span>
Daarnaast is een gebeurtenisobject beschikbaar waarmee de ontwikkelaar toegang kan verkrijgen tot details van de gebeurtenis, zoals het element dat de gebeurtenis heeft ontvangen, het type van de gebeurtenis en welke muisknop werd ingedrukt. Uitbreidend op het eerdere voorbeeld:
<script>
function clickHandler(event) {
var eType = event.type;
/* het volgende stuk is voor compatibiliteit met oude IE versies */
/* Standaardbrowsers stellen de 'target' eigenschap in van het 'event' object */
/* IE 8 en ouder gebruikt de 'srcElement' eigenschap */
var eTarget = event.target || event.srcElement;
alert( "Opgevangen Gebeurtenis (type=" + eType + ", doel=" + eTarget );
}
</script>
<span onclick="clickHandler(event);">Klik Hier</span>
Naast het registreren voor het ontvangen van gebeurtenissen in jouw HTML code kun je dezelfde attributen voor elke HTMLElement object instellen in de JavaScript code. Het onderstaande voorbeeld creërt een zogenaamde 'span' object, voegt deze toe aan de pagina en registreert tenslotte functies voor het 'span' object waarmee enkele muisgebeurtenissen kunnen worden ontvangen.
<body></body>
<script>
function mouseeventHandler(event) {
/* het volgende stuk is voor compatibiliteit met oude IE versies */
/* IE geeft standaard NIET het event object door. */
/* Verkrijg eeb referentie tot de event als het niet gegeven was */
if (!event) event = window.event;
/* verkrijg de gebeurtenis type en doel zoals eerder beschreven */
var eType = event.type;
var eTarget = event.target || event.srcElement;
alert(eType + ' gebeurtenis op element met ID: ' + eTarget.id);
}
function onloadHandler() {
/* verkrijg een referentie naar de 'body' element op de pagina */
var body = document.body;
/* maak een 'span' element aan die aangeklikt moet worden */
var span = document.createElement('span');
span.id = 'VoorbeeldSpan';
span.appendChild(document.createTextNode('Klik Hier!'));
/* registreer enkele functies op het span object om gebeurtenissen
af te handelen. Merk op dat de namen van de events (on...) per se
kleingeschreven moeten zijn terwijl de handlers elke naam kunnen
aannemen.
*/
span.onmousedown = mouseeventHandler;
span.onmouseup = mouseeventHandler;
span.onmouseover = mouseeventHandler;
span.onmouseout = mouseeventHandler;
/* weergeef de span element op de pagina */
body.appendChild(span);
}
// doordat we de handler vervangen, en niet aanroepen, hebben we GEEN '()' nodig
// na de functie naam.
window.onload = onloadHandler;
</script>
Voorbeeld: een toetsenbord gebeurtenis opvangen
Het vangen van een toetsenbordgebeurtenis is vergelijkbaar met het bovenstaande "opvangen van een muisklik" voorbeeld, en maakt gebruik van het gebeurtenissen systeem in JavaScript. Toetsenbord gebeurtenissen worden afgevuurd wanneer een toets van het toetsenbord wordt gebruikt.
Het aantal gebeurtenissen die optreden als reactie voor een toetsenbord actie is veel kleiner vergeleken met die voor een muis:
- KeyPress - wanneer een toets wordt ingedrukt en losgelaten.
- KeyDown - wanneer een toets wordt ingedrukt, maar nog niet losgelaten is.
- KeyUp - wanneer een toets losgelaten is na het indrukken.
Bij een keypress gebeurtenis is de Unicode waarde van de ingedrukte toets opgeslagen in óf de keyCode, óf de charCode eigenschap. Als de toets een karakter genereert (bijv. 'a'), dan bevat charCode de code van dat teken, hierbij wordt rekening gehouden met hoofdletters (d.w.z. dat er rekening wordt gehouden of de Shift toets ingedrukt is). In andere gevallen is de code van de ingedrukte toets beschikbaar in keyCode.
De meest simpele methode om toetsenbord gebeurtenissen op te vangen is weer doot het registreren van event handlers in HTML. Hierbij wordt weer een individuele gebeurtenis opgegeven als attribuut voor het HTML element:
<input type="text" onkeypress="alert('Hallo Wereld!');">
Zoals bij muis gebeurtenissen kun je zowel inline JavaScript code gebruiken in het attribuut, of een functie aanroepen die eerder in een <script> block gedefinieërd was:
<script>
function keypressHandler() {
alert("Hallo, Wereld!");
}
</script>
<input onkeypress="keypressHandler();">
Het opvangen van de gebeurtenis en het aflezen van de ingedrukte toets kan worden gedaan op een soortgelijke manier als bij muis gebeurtenissen:
<script>
function keypressHandler(evt) {
var eType = evt.type; // Zal "keypress" bevatten als event type
/* hier zullen we weer een cross-browser methode gebruiken
Iedereen gebruikt 'which', behalve IE 8 en ouder, die gebruikt 'keyCode'
De voorwaardelijke, ternary operator kan hier goed gebruikt worden */
var keyCode = evt.which ? evt.which : evt.keyCode;
var eCode = 'keyCode is ' + keyCode;
var eChar = 'charCode is ' + String.fromCharCode(keyCode); // of evt.charCode
alert("Opgevangen Gebeurtenis (type=" + eType + ", Unicode waarde van toets=" + eCode + ", ASCII waarde=" + eChar + ")");
}
</script>
<input onkeypress="keypressHandler(event);">
Het opvangen van alle toetsen op een pagina kan worden gedaan door het registreren van event handlers op het niveau van het document:
<script> document.onkeypress = keypressHandler; document.onkeydown = keypressHandler; document.onkeyup = keypressHandler; </script>
Hier is een compleet voorbeeld dat het gebruik van toetsenborden gebeurtenissen weergeeft:
<!DOCTYPE html>
<html>
<head>
<script>
var metaChar = false;
var voorbeeldToets = 16;
function keyEvent(event) {
var key = event.keyCode || event.which; // alternatief voor ternary - als er geen keyCode is, gebruik which
var keychar = String.fromCharCode(key);
if (key == voorbeeldToets) {
metaChar = true;
}
if (key != voorbeeldToets) {
if (metaChar) {
alert("Combinatie met Meta + " + keychar)
metaChar = false;
} else {
alert("Ingedrukte toets: " + key);
}
}
}
function metaKeyUp(event) {
var key = event.keyCode || event.which;
if (key == exampleKey) { metaChar = false; }
}
</script>
</head>
<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)">
Druk een willekeurige toets!
</body>
</html>
Browser bugs and eigenaardigheden
De twee beschreven eigenschappen van toetsen gebeurtenissen zijn keyCode en charCode. In simpele termen, keyCode verwijst naar de werkelijke toets dat door de gebruiker ingedrukt werd terwijl charCode de ASCII waarde van de toets weergeeft. Deze twee waarden hoeven niet gelijk te zijn; een kleine letter 'a' en een hoofdletter 'A' hebben dezelfde keyCode omdat de gebruiker dezelfde toets indrukt, maar een andere charCode omdat de resulterende teken verschilt.
De manier waarmee verschillende browser met charCode omgaan is niet overal consistent. Als voorbeeld, Internet Explorer en Opera ondersteunen charCode niet. Aan de andere kant geven ze de karakter informatie in keyCode, maar alleen bij de onkeypress event. De keyCode eigenschap levert voor onkeydown and onkeyup events informatie op over de toets. Firefox gebruikt een ander woord, namelijk "which" welke het verschil in de teken kan onderscheiden.
Lees in de Mozilla Documentatie over Keyboard Events (en) voor een uitgebreidere behandeling van toetsenbord gebeurtenissen.
Voorbeeld: rondslepen van afbeeldingen
In het volgende voorbeeld is het mogelijk om een afbeelding in een pagina rond te slepen:
<!DOCTYPE html>
<html>
<head>
<style>
img { position: absolute; }
</style>
<script>
// declareer globale variablen die hieronder wordt gebruikt.
var mouseover, posLinks, posBoven, xCoord, yCoord;
window.onload = function() {
movMeId = document.getElementById("ImgMov");
movMeId.style.top = "80px";
movMeId.style.left = "80px";
document.onmousedown = coordinates;
document.onmouseup = mouseup;
function coordinates(e) {
if (e == null) { e = window.event;}
// e.srcElement bevat het doel element in IE8 en ouder,
// e.target wordt gebruikt in standaardbrowsers (inclusief Firefox)
// Beide eigenschappen geven het HTML element waarin het event optrad
var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
if (sender.id == "ImgMov") {
mouseover = true;
posLinks = parseInt(movMeId.style.left);
posBoven = parseInt(movMeId.style.top);
xCoord = e.clientX;
yCoord = e.clientY;
document.onmousemove = moveImage;
return false;
} else {
return false;
}
}
function moveImage(e) {
if (e == null) { e = window.event; }
movMeId.style.left = posLinks + e.clientX - xCoord + "px";
movMeId.style.top = posBoven + e.clientY - yCoord + "px";
return false;
}
function mouseup(e) {
// voorkom dat de moveImage functie wordt aangeroepen door de
// gebeurtenis registratie te verwijderen.
document.onmousemove = null;
}
}
</script>
</head>
<body>
<img id="ImgMov" src="https://placehold.it/100x100&text=JS" width="64" height="64">
<p>Sleep en zet het plaatje op deze pagina neer</p>
</body>
</html>
Voorbeeld: vergroot of verklein objecten
Voorbeeld waarbij de grootte van een afbeelding wordt gewijzigd (de originele afbeelding wordt niet gewijzigd, enkel hoe deze op de pagina weergeven wordt).
<!DOCTYPE html>
<html>
<head>
<style>
#resizeImage {
margin-left: 100px;
}
</style>
<script>
window.onload = function() {
var resizeId = document.getElementById("resizeImage");
var resizeStartCoordsX,
resizeStartCoordsY,
resizeEndCoordsX,
resizeEndCoordsY;
var resizeEndCoords;
var resizing = false;
document.onmousedown = coordinatesMousedown;
document.onmouseup = coordinatesMouseup;
function coordinatesMousedown(e) {
if (e == null) {
e = window.event;
}
var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target;
if (element.id == "resizeImage") {
resizing = true;
resizeStartCoordsX = e.clientX;
resizeStartCoordsY = e.clientY;
}
return false;
}
function coordinatesMouseup(e) {
if (e == null) {
e = window.event;
}
if (resizing === true) {
var currentImageWidth = parseInt(resizeId.width);
var currentImageHeight = parseInt(resizeId.height);
resizeEndCoordsX = e.clientX;
resizeEndCoordsY = e.clientY;
resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px';
resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px';
resizing = false;
}
return false;
}
}
</script>
</head>
<body>
<img id="resizeImage" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"
width="64" height="64">
<p>Klik op het plaatje en sleep om de grootte te wijzigen.</p>
</body>
</html>
Voorbeeld: lijnen tekenen
<!DOCTYPE html>
<html>
<head>
<script>
function linedraw(ax,ay,bx,by)
{
if(ay>by)
{
bx=ax+bx;
ax=bx-ax;
bx=bx-ax;
by=ay+by;
ay=by-ay;
by=by-ay;
}
var calc=Math.atan((ay-by)/(bx-ax));
calc=calc*180/Math.PI;
var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>"
}
</script>
</head>
<body onload=linedraw(200,400,500,900);> <!-- Replace with your co-ordinate -->
</body>
</html>