Javascript, een motor voor je webpagina

Transcriptie

1 Javascript, een motor voor je webpagina De heilige drievuldigheid: HTML, CSS en Javascript HTML beschrijft hoe je tekst en informatie op een webpagina structureert, de indeling in pagina-onderdelen (div's), alinea's, titels, afbeeldingen, links enz. Met CSS beschrijf je hoe elk onderdeel van de webpagina er moet uitzien: lettertype, kleur, rand, achtergrond, lettergrootte, marges, afstand (padding)... Maar waar blijft de interactiviteit met de gebruiker? De enige interactie die HTML toelaat, is het gebruik van links (afbeeldingen of aanklikbare links om naar een andere webpagina te gaan, een programma te starten of bijvoorbeeld een telefoonnummer op te bellen). CSS laat interactie toe op het vlak van layout, vb. een link een andere kleur geven als je er met de muis over beweegt. Voor alle andere vormen van interactie moeten we een gebruik dan op andere hulpmiddelen. Je kan beroep doen op insteekmodules zoals Java of Flash. Toch is het veel beter dat je gebruik maakt van open standaarden die door alle browsers worden ondersteund en niet gebonden zijn aan bepaalde firma's. We hebben het dan over Javascript. Programmeertalen, plugins en scripts Javascript is een taal die het toelaat om uitgebreide interactie aan de webpagina toe te voegen. Anders dan HTML en CSS, vraagt het dat je gestructureerde commando's schrijft. De minste fout leidt in dit geval wel tot problemen. Javascript is geen programmeertaal, maar een scriptingtaal. Wat is het verschil? Wel... er bestaan een heleboel verschillen, maar de belangrijkste lees je hieronder: Programmeertalen, nullen en enen Bij een programmeertaal zoals Delphi of C++ wordt de door de programmeur geschreven 'leesbare' code door een stuk software (de compiler) omgezet in instructies voor het besturingssysteem en de processor van de computer. De gecompileerde programmacode bestaat uit reeksen nullen en enen. Omdat elke processor op een andere manier werkt en anders door het besturingssysteem wordt aangestuurd, betekenen die nullen en enen voor een Intelcomputer met Windows iets anders dan voor een Intelcomputer met Mac OS X of Linux, en zeker voor een Arm-processor... Dit houdt in dat de programmeur voor elk besturingssysteem en/of processor andere code moet schrijven. Een programma voor Windows werkt niet op Mac OS X of omgekeerd... tenzij de programmeurs verschillende versies maken. En dat vraagt veel werk.. Voordeel is dat deze programma's snel zijn omdat ze rechtstreeks door de processor worden uitgevoerd. Insteekmodules, bytecode en runtime-omgevingen Soms, zoals in het geval van Java, wordt de code naar een soort tussentaal (intermediate language, bytecode) gecompileerd. Zo'n tussentaal wordt door een speciaal stuk software, een "plugin" of "runtime environment" vertaald naar "machinetaal" (nullen en enen) wanneer het "programma" wordt gestart. Het bekende Flash en Java werken volgens dit principe. Het voordeel van dit tussentaal-systeem is dat dezelfde code op elk besturingssysteem en op elke processor kan werken. De programmeur moet slechts één keer coderen om een programma te schrijven dat in elk besturingssysteem en op elke processor werkt. Maar er treedt wel een zekere vertraging op. Voordeel van zulke programma's is dat ze vaak ook in een webbrowser kunnen werken. Maar je moet er wel voor kunnen programmeren. En... de gebruiker moet ten allen tijde de "runtime environment" of "plugin" geïnstalleerd hebben. Anders werkt het programma niet.

2 Javascript Kris Merckx - Wat is Javascript? Creative Commons Licentie / GNU Freedoc-licence Javascript wordt niet gecompileerd en ook niet vertaald naar bytecode of tussentaal. Het verschilt dus van programmeertalen. Je tikt de code rechtstreeks in in de webpagina of in een apart bestand dat je net zoals een CSS-bestand aan je webpagina linkt. De code wordt pas uitgevoerd en gecompileerd wanneer de webpagina in de browser wordt geopend. Dit proces zorgt natuurlijk voor heel wat "vertraging". De browser moet de code eerst compileren vooraleer ze door de processor wordt uitgevoerd. Dit valt echter niet altijd op omdat de meeste scripts in vergelijking met programmeertalen erg beperkt zijn in lengte. Pas wanneer er veel scripts in je pagina zijn opgenomen zal je vertraging beginnen vaststellen. Soms loopt een webpagina er ook op vast. Moderne browsers proberen daarom Javascriptcode zo snel mogelijk uit te voeren. Daarom is Chrome bijvoorbeeld stukken sneller dan Internet Explorer 6, 7 of 8. Omwille van de veiligheid kan je met Javascript geen systeemopdrachten geven op de computer of op de server. Je kan dus bijvoorbeeld niet de harde schijf gaan wissen of een virus of programma installeren, bestanden openen, bestanden opslaan (kan in beperkte mate), bestanden wissen, bestanden kopiëren... Een motor bestaat uit motors Javascript kan je beschouwen als een motor. Wanneer de gebruiker op een knop klikt, als de pagina wordt geopend of afgesloten, als je met je muis over een bepaalde plaats beweegt... kan Javascript hier op reageren. Dit gebeurt niet automatisch. U kan als ontwikkelaar zelf bepalen wat er precies dient te gebeuren. Natuurlijk is niet alles mogelijk, maar toch al redelijk wat. Een paar voorbeelden: het uitzicht van de pagina of bepaalde onderdelen veranderen (dus: CSS aanpassen). controleren of de gebruiker de juiste informatie heeft ingevuld (vb. een adres). de inhoud van bepaalde onderdelen veranderen (dus: html aanpassen). externe informatie (van dezelfde site) inlezen en in een bepaald pagina-onderdeel plakken. "animeren"... wat er eigenlijk op neer komt dat we om de zoveel milliseconden de marges, de positie, hoogte, breedte... van een bepaald element aanpssen (dus: CSS aanpassen)... Wachten op een gebeurtenis De ontwikkelaar bepaalt wat er moet veranderen of welke acties moeten uitgevoerd worden, als zich een bepaalde "gebeurtenis" (event) voordoet. onload onclick ondblclick onmouseover onmouseout onchange gebeurtenis Wat? Als het element geladen wordt. Als de gebruiker ergens op klikt. Als de gebruiker dubbelklikt op een element. Als de gebruiker ergens met de muis overheen beweegt. Als de cursor van een element weggaat. Als de inhoud van een invoerveld (van een invulformulier) gewijzigd wordt door de gebruiker. Als zich zo'n gebeurtenis of event voordoet, kunnen we een bepaalde actie (laten) uitvoeren met Javascript. Zo'n actie heten we een function. Functions kan je beschouwen als kleine motoren in Javascript. Je kan het vergelijken met een ruitenwisser. Als het begint te regenen (event) of als de ruiten vuil zijn (event) kunnen we met de knop van de ruitenwisser (object, instance) de motor (function) van de ruitenwisser in gang zetten. Hierdoor gaan de ruitenwissers

3 bewegen (method). De ruitenwissers (objects, instances) kunnen enkel gebruikt worden voor de method 'water verwijderen van de ruiten'... Als het regent, worden de ruiten nat. Toch kan er een paar milliseconden verschil zijn tussen het starten van de regen en het nat worden van de ruiten of blijven de ruiten droog omdat je in een ondergrondse garage staat. Daarom moeten we ook controleren of de ruiten effectief nat zijn. Hetzelfde geldt bij het stoppen van de regen. De ruiten blijven iets langer nat, want het water van de straat kan nog op uw venster spatten. Een voorbeeld voor bij slecht weer Stel je voor dat we de onderdelen van onze automotor zelf zouden kunnen scripten met een gelijkaardige scriptingtaal, dan zou het script voor onze ruitenwissers er misschien als volgt uitzien: <script type="text/motorscript"> //variabelen (verander-bare informatie) var ruitenwissersinbeweging=false; var RuitenWisserInterval; var knopruitenwisser= auto.dashboard.getelementbyid("hendelruitenwisser"); var knopintervalruitenwisser= auto.dashboard.getelementbyid("knopintervalruitenwisser"); var ruitenwissers= auto.ruitenwissers; //bij welke gebeurtenis moet de functie gestart worden knopruitenwisser.onclick(startstopruitenwisser(1000)); knopintervalruitenwisser.onclick(startstopruitenwisser(3000)); //de functie voor de werking van de ruitenwissers function startstopruitenwisser(snelheid){ if(!ruitenwissersinbeweging){ RuitenWisserInterval= setinterval(ruitenwissers.move(),snelheid); ruitenwissersinbeweging=true; else{ clearinterval(ruitenwisserinterval); ruitenwissersinbeweging=false; //rest van de code Voor elk onderdeel van de motor zou je aldus een aparte functie moeten schrijven. Eentje voor de ruitenwissermotor, eentje voor de carburator, eentje voor de ontsteking... enz. En je zou ook moeten scripten wanneer elke motor wordt gestart. Een echt voorbeeld Javascript werkt eveneens met functies, net zoals het fictieve "motorscript" hierboven. Hieronder vind je een paar simpele voorbeelden. Maak een nieuwe webpagina met de onderstaande code. Enig idee wat er zal gebeuren? function vervang(){ document.getelementbyid("container").innerhtml="dit is de nieuwe tekst."; Hier staat de originele tekst. <button onclick="vervang();">klik om de tekst te veranderen</button>

4 Met Javascript kan je bepaalde onderdelen van de pagina 'selecteren' door bijvoorbeeld het element op zijn "id" te zoeken. var GeselecteerdElement= document.getelementbyid("container"); Vervolgens kan je dat element van uitzicht veranderen of de inhoud ervan wijzigen. document.getelementbyid("container").style.backgroundcolor="#cccccc"; document.getelementbyid("container").innerhtml="dit is de nieuwe tekst."; Je kan ook een verzameling van elementen selecteren, zoals bijvoorbeeld alle links die zich op de pagina bevinden en vervolgens daar de referenties van te wijzigen. Je kan dit zinvol gebruiken, maar ook voor iets "stoutere" dingen, zoals in het onderstaande voorbeeld: function verander(){ var uls = document.links; var i; for(i=0;uls.length;i++){ void(uls[i].href=' ; <style type="text/css"> #links, #container{ border:1px solid black; margin:20px; </style> <div id="links"> <a href=" target="_blank">microsoft</a><br/> <a href=" target="_blank">yahoo</a><br/> <a href=" target="_blank">wikipedia</a><br/> <div id="container" onmouseover="verander();"> <p>klik op een van de bovenstaande links... Niets speciaals, niet?</p> <p>googelen/goochelen... beweeg nu met de muis van de bovenkant van dit bericht tot onderaan deze webpagina... een paar keer op en neer... en ik durf er voor wedden dat je binnen enige ogenblikken op Google zit als je op een van de links klikt.</p> Hmmm... de bovenstaande code kan gebruikt worden in vb. forums om de site te testen op veiligheid... maar ruikt toch wel naar phishing. Javascript verovert het web Als je geen kaas gegeten hebt van scripten of programmeren, kan het een aardige demper zijn op je webdesign-enthousiasme. Het is ook niet zo eenvoudig om meteen ingewikkelde interactieve scripts te gaan schrijven. De laatste jaren is het belang van Javascript enorm toegenomen. Webpagina's krijgen steeds meer functionaliteit en mogelijkheden die je vroeger enkel van echte computerprogramma's gewend was. Javascript staat niet alleen. Vaak werkt het samen met allerlei programma's op de server voor bijvoorbeeld het uploaden van afbeeldingen, het aanpassen van persoonsgegevens enz. Javascript controleert de invoer van de gebruiker, de informatie zelf wordt opgeslagen in een online databank. Een van de grootste veranderingen is AJAX... Daarover nu een woordje meer.

5 Ajax om je website op te poetsen Ajax is geen nieuw ding... het is een leuk woord en een afkorting, zoals er nog wel een 'paar' zijn in computer- en internetland. Ajax staat voor "asynchronous javascript and xml". Dat is meteen een mondvol, maar het bekt wel, zeker als je bij vrienden of vreemden wat indruk wil maken. Wanneer je op een link klikt naar een andere webpagina, moet je wachten tot die volledige pagina geladen is vooraleer je de nieuwe informatie te zien krijgt. Stel je het zo voor: je bekijkt een wereldkaart. Elke keer je op de zoom-knop drukt om een meer gedailleerd beeld te krijgen, wordt een nieuwe webpagina geopend met daarin een grotere kaart. De webdesigner zou honderden webpagina's en honderden afbeeldingen moeten klaarstomen. Vroeger was dit ook echt het geval op het web. Ondertussen is het web enorm veranderd. Wij kunnen het ons nog moeilijk anders voorstellen. Wanneer je op maps.google.com op de kaart inzoomt, wordt enkel de kaart ververst, maar niet de hele pagina. Euh? Dat is toch normaal? Neen, zo normaal is dit niet. Hier is AJAX aan het werk: wanneer je op de zoom-knop drukt, schiet er een Javascript-functie in gang die berekent waar je muis zich bevindt en hoeveel je bent ingezoomd. Een andere functie vraagt de juiste kaarten aan de Google Maps-server. Het Javascript leest die nieuwe kaarten in en plaatst ze in het pagina-element waar de kaarten thuishoren. De hele pagina en bijhorende kaarten en afbeeldingen worden dus niet synchroon ingelezen, maar naargelang wat de gebruiker vraagt, dus in stapjes of asynchroon. AJAX wordt ondertussen ingezet op alle grote, maar ook op massa's kleine websites. Het is een gewoonte geworden. We zijn er aan gewend. Een site zonder AJAX komt nogal snel oubollig over. Wat is dan het verschil tussen simpel Javascript en AJAX? Javascript blijft op de 'ene' webpagina. AJAX correspondeert met andere pagina's, programma's op de server enz. terwijl de webpagina in de browser van de gebruiker in beeld is... en m.a.w. al volledig geladen is. Om dit proces precies te begrijpen, moet je een klein beetje snappen hoe het HTTP-protocol werkt, maar die uitleg hoort niet meteen in dit hoofdstuk over Javascript.

6 Samen naar de bibliotheek: de jquery-way Omdat Javascript en AJAX aan belang winnen, en vele ontwikkelaars met dezelfde vragen, eisen en verlangens zitten, hebben sommigen zich gestort op het maken van hele bibliotheken met Javascriptfuncties. Wanneer je zo'n bibliotheek op je website integreert, moet je alvast de functies (motoren) niet meer zelf schrijven. Je moet enkel nog de knopjes maken en met Javascript invoeren welke knop of welke gebeurtenis aan welke voorgeprogrammeerde functie moet worden gekoppeld én wat het resultaat moet zijn. Zulke bibliotheken hebben een enorme boost gegeven aan de webdesignwereld. Je kan zonder meer zeggen dat Javascriptbibliotheken (die dan ook nog eens gratis en open source zijn) van veel groter belang zijn voor uw mogelijkheden als webontwikkelaar dan bijvoorbeeld een 'schrijfprogrammaatje' als Dreamweaver. Een van de bekendste en meest gebruikte bibliotheken is zonder twijfel jquery. Op vind je zeer handige videotutorials die je op weg kunnen helpen bij de ontwikkeling met jquery. jquery vervangt dus Javascript niet. jquery IS Javascript, maar maakt het programmeren en scripten een stuk handiger. Bovendien moet je je vrijwel niet meer afvragen of je scripts wel in alle browsers werken, want dit werk is bij jquery reeds gebeurd. De onderstaande code vertalen we even naar jquery. Het groene gedeelte geeft de code aan voor het wijzigen van de links. In Javascript: function verander(){ var uls = document.links; var i; for(i=0;uls.length;i++){ void(uls[i].href=' ; In jquery: <script type="text/javascript" src="jquery.js"> $("a").attr("href", "

7 Starten met jquery De basisbibliotheek van jquery bestaat uit welgeteld één bestand, jquery.js. Je kan dit bestand van de jquery-site downloaden en in een map op je website opslaan. Vervolgens moet je jquery.js aan je webpagina linken met de script-tag zoals in het onderstaande voorbeeld. <script type="text/javascript" src="jquery.js"> Het linken van dit bestand zelf, zal niets aan uw pagina wijzigen. De interactiviteit moet u immers zelf toevoegen. Hiervoor moeten we een extra script-tag toevoegen waartussen we onze eigen code gaan invoeren. <script type="text/javascript" src="jquery.js"> //hier komt onze code... Animeren en presenteren We voegen ook een aantal te wijzigen pagina-onderdelen en een aantal bedieningselementen (knoppen, links...) toe aan de HTML van onze pagina. Daarnaast voegen we ook wat CSS toe om het uitzicht van deze elementen 'vast' te leggen. <script type="text/javascript" src="jquery.js"> //hier komt onze code... <style type="text/css"> #news{ background:green; height:150px; padding:20px; border:1px dotted black; </style> <div id="news"> Interessant nieuwsbericht... <button id="verbergknop">verberg het nieuws</button>

8 De pagina ziet eruit zoals je op de onderstaande afbeelding kan zien. Interactiviteit is er nog niet, ook niet als u op de knop "verberg het nieuws" klikt. U zal wel gemerkt hebben dat de knop een uniek id gekregen heeft: verbergknop. jquery heeft zijn eigen unieke manier om elementen van een pagina te selecteren en het uitzicht of de inhoud ervan te veranderen ad runtime. In het voorbeeld hieronder zijn een paar regels toegevoegd. De regels kan je zien als een soort van 'initialisatie'. De code daarbinnen zal pas uitgevoerd worden als de pagina volledig door de browser is ingelezen. <script type="text/javascript" src="jquery.js"> //hier komt onze code... <style type="text/css"> #news{ background:green; height:150px; padding:20px; border:1px dotted black; </style> <div id="news"> Interessant nieuwsbericht... <button id="verbergknop">verberg het nieuws</button> Nu kunnen we interactiviteit gaan toevoegen. Hoe gaan we tewerk? 1. Selecteer de knop "verbergknop". 2. Voeg een click-functie toe voor de geselecteerde knop. 3. Als op de knop wordt geklikt moet je de div met als id "news" selecteren. 4. Verberg de div "news".

9 De code ziet er dan stap voor stap als volgt uit: 1. Selecteer de knop "verbergknop". $("#verbergknop"); 2. Voeg een click-functie toe voor de geselecteerde knop. $("#verbergknop").click(function(){ 3. Als op de knop wordt geklikt moet je de div met als id "news" selecteren. $("#verbergknop").click(function(){ $("#news"); 4. Laat de div "news" zachtjes uitfaden tot hij onzichtbaar wordt. $("#verbergknop").click(function(){ $("#news").fadeout('slow'); De fadeout-functie is reeds voorgeprogrammeerd in jquery. Indien we dit zelf zouden doen, zouden we een hoop coderegels moeten schrijven in Javascript om hetzelfde effect te bereiken. In jquery gaat dit veel sneller. De volledige code ziet er nu als volgt uit: <script type="text/javascript" src="jquery.js"> //hier komt onze code... $("#verbergknop").click(function(){ $("#news").fadeout('slow'); <style type="text/css"> #news{ background:green; height:150px; padding:20px; border:1px dotted black; </style> <div id="news"> Interessant nieuwsbericht... <button id="verbergknop">verberg het nieuws</button> In plaats van fadeout, bestaan er in jquery nog tal van andere mogelijkheden. Bovendien kan je van de jquery-site nog massa's andere plugins downloaden waarmee de functionaliteit van jquery nog verder wordt uitgebreid.

10 Je kan fadeout() vervangen door bijvoorbeeld hide(); slideup(); Tussen de haakjes () kan je parameters invoeren zoals fadeout('slow') of fadeout('fast') of een tijd in milliseconden fadeout(4000). Op een even eenvoudige manier kunnen we de news-div bij het opstarten van de pagina initieel verbergen. Dit kan zowel met CSS als met jquery. De CSS-manier: <style type="text/css"> #news{ background:green; height:150px; padding:20px; border:1px dotted black; display:none; </style> De jquery-manier: In de Javascriptcode moet je de news-div verbergen en fadeout() dan vervangen door fadein(). $("#news").css("display", "none"); $("#verbergknop").click(function(){ $("#news").fadein('slow'); Als je in plaats van fadeout() gebruikgemaakt van een andere jquery-functie, dan moet je ook die vergangen: fadeout() => fadein() hide() => show() slideup() => slidedown()

11 De basis van AJAX met jquery We maken nu 2 webpagina's aan. 1. Plak de onderstaande code in een leeg document (of vervang de reeds aanwezige code door die hieronder). 2. Sla het bestand op als nieuws2.html. <div id="news2"> <h3>kop nieuwsbericht</h3> <p>een ander interessant nieuwsbericht...</p> 1. Maak een tweede pagina. Plak de onderstaande code in een leeg document (of vervang de reeds aanwezige code door die hieronder). 2. Sla de pagina op als nieuws.html. <script type="text/javascript" src="jquery.js"> //hier komt onze code... $("#laadnieuwsknop").click(function(){ $('#news').load('nieuws2.html #news2'); <style type="text/css"> #news{ background:green; height:150px; padding:20px; border:1px dotted black; </style> <div id="news"> Interessant nieuwsbericht... <button id="laadnieuwsknop">laad nieuws</button> 1. Selecteer de laadnieuwsknop. $("#laadnieuwsknop"); 2. Voeg een click-functie toe voor deze knop. $("#laadnieuwsknop").click(function(){ 3. Selecteer de div met als id "nieuws".

12 $("#laadnieuwsknop").click(function(){ $('#news'); 4. Laad uit de nieuws2.html-pagina de inhoud van het element met id "news2". $("#laadnieuwsknop").click(function(){ $('#news').load('nieuws2.html #news2'); OPGELET: De kans is groot dat deze code niet functioneert als u ze lokaal (op uw thuiscomputer) gebruikt. Mogelijk zal ze ook niet functioneren als u ze op gratis webruimte van bijvoorbeeld Telenet gebruikt. Als u ze op een betalende site gebruikt, zou dit moeten functioneren. Als dat niet het geval is, kan u het volgende doen: Aan uw hostingprovider vragen om AJAX-requests mogelijk te maken voor.html-pagina's. De pagina nieuws2.html hernoemen naar nieuws2.php op een Linux-server en nieuws2.asp op een Windows-server. Vergeet de naam dan ook niet aan te passen in de load-functie. Wilt u dit toch ook lokaal uitproberen, dan zal u lokaal een webserver moeten installeren. Dat kan vrij eenvoudig dankzij XAMPP.