Lab Webdesign: Javascript 11 februari 2008 JAVASCRIPT

Transcriptie

1 H1: INLEIDING JAVASCRIPT Met HTML kun je fraaie webpagina's bouwen, alleen: ze zijn erg statisch. HTML is dan ook een pagina-beschrijvingstaal en geen echte programmeertaal. Om je homepagina interactief te maken, moet je gebruik maken van een zogenaamde "scripting language" als VBScript of JavaScript. VBScript wordt alleen ondersteund door de Internet Explorer van Microsoft. JavaScript daarentegen wordt ondersteund door Internet Explorer, Netscape Navigator en vele andere webbrowsers, en is daarom de aangewezen taal om te gebruiken als je pagina met verschillende browsers zal worden bekeken. Ik ga er van uit, dat je al wel wat basiskennis hebt op het gebied van computers, het Internet en HTML, maar nog niets weet van JavaScript. Heb je ervaring met programmeren in een andere taal, dan is dat meegenomen; noodzakelijk is het echter niet. In deze inleiding wil ik allereerst iets vertellen over de geschiedenis van JavaScript. Vervolgens geef ik een beknopt overzicht van de cursus, zodat je weet wanneer welk onderwerp aan de orde komt. Daarna ga ik kort in op het verschil tussen Java en JavaScript. Tenslotte komen we toe aan ons eerste script, en zal ik laten zien hoe je dat gebruikt binnen je HTML-pagina. GESCHIEDENIS JavaScript werd ontwikkeld door Netscape als script-taal voor de Navigator webbrowser, en heette oorspronkelijk LiveScript. De taal werd eind 1995 "geadopteerd" door Sun (de ontwikkelaar van Java) als open script-standaard voor het Internet, en kreeg toen de naam JavaScript. De ondersteuning door Sun leidde er toe dat vele andere bedrijven JavaScript als standaard erkenden; voorbeelden hiervan zijn America Online, Apple, Borland en Oracle. Ook Microsoft besloot de taal te gaan ondersteunen in Internet Explorer. De implementatie van Microsoft verschilt echter op subtiele wijze van die van Netscape, en draagt de naam JScript. Eind 1996 werd JavaScript door Netscape als standaard voorgedragen aan ECMA (het Europese instituut voor standaardisering), hetgeen leidde tot ECMA-standaard 262 (ECMAScript), die in medio 1997 werd aanvaard. Oorspronkelijk was JavaScript bedoeld als "client-side" script-taal, dat wil zeggen dat de scripts worden uitgevoerd door de webbrowser. Inmiddels bestaat er ook een "server-side" versie van JavaScript: hiermee kunnen programma's worden geschreven die worden uitgevoerd door de webserver. Dat betekent dus dat een website gebruik kan maken van JavaScript faciliteiten, of de browser van een bezoeker die taal nu wel of niet ondersteunt. Door Netscape is server-side JavaScript opgenomen in de LiveWire omgeving, en door Microsoft in Active Server Pages. De serverside versies van JavaScript bevatten server-specifieke uitbreidingen waarmee bijvoorbeeld gegevens 1

2 in een database kunnen worden benaderd. ONTWIKKELING VAN JAVASCRIPT Javascript werd door Netscape ontwikkeld en werd voor het eerst in versie 2 van Netscape Navigator geïntegreerd ( Javascript 1.0 ). Ongeveer 9 maanden later verscheen versie 3.0 van Netscape Navigator, die versie 1.1 van Javascript ondersteunde. Ook Microsoft had Javascript intussen in versie 3.0 van Internet Explorer geïntegreerd, maar daar heette het Jscript. Javascript 1.2 werd voor het eerst ondersteund door Netscape Communicator 4.0. versie 1.2 bood verschillende vernieuwingen. Ook het nauw met Javascript verbonden D-HTML ( Dynamic-HTML ) werd geïntroduceerd. De huidige versie van Javascript is versie 1.5 Meer over Javascript versie 1.5 op : De volgende versie van Javascript wordt versie 2.0 Meer hierover op De nieuwste versie van Microsofts Jscript is 5.5 Meer hierover op De ECMA ( European Computer Manufacturers Associotion ) definiëerde de standaard ECMA-262 voor scripttalen ( ECMAscript ) waaraan zowel Microsoft als Netscape zich wensen te houden. De ISO-standaard hiervoor is ISO

3 OVERZICHT Wat gaat er in deze cursus aan bod komen: 1. INLEIDING: ACHTERGROND EN BASISBEGRIPPEN Hierover kan ik kort zijn: het is de tekst die je nu onder ogen hebt! 2. HERHALINGSLUSSEN EN LOGICA Soms hoef je een bepaalde handeling maar een keer uit te voeren, maar in veel gevallen is het nodig die handeling verschillende keren te herhalen --hetzij een vast aantal keren, hetzij tot een bepaald resultaat is bereikt. Ik zal laten zien hoe je in JavaScript herhalingslussen programmeert, en hoe je gebruik kunt maken van logische tests. 3. FUNCTIES Stukjes script kunnen soms op meerdere plaatsen gebruikt worden. In dergelijke gevallen is het vaak handig om er functies van te maken: je hoeft dan minder in te tikken, je pagina's worden kleiner, en eventuele wijzigingen hoef je maar op een plaats aan te brengen. JavaScript telt diverse ingebouwde functies voor taken die regelmatig voorkomen bij het programmeren --zo hoeft niet iedereen steeds opnieuw het wiel uit te vinden. Het is echter niet moeilijk om zelf functies te schrijven als je een taak hebt waarvoor geen ingebouwde functie bestaat. 4. OPERATORS JavaScript gebruikt diverse "operators" voor het uitvoeren van berekeningen en vergelijkingen, het manipuleren van individuele bits, en het toekennen van waarden aan variabelen. In dit hoofdstuk laat ik zien welke operators er zijn en hoe ze gebruikt worden; daarbij komen ook de "voorrangsregels" aan de orde. 5. ARRAYS EN STRINGS In het verleden dacht men bij de term "programmeren" direct aan het uitvoeren van ingewikkelde berekeningen. Tegenwoordig weten we dat computers ook heel goed gebruikt kunnen worden voor het manipuleren van tekenreeksen ofwel "strings". Ik zal laten zien hoe JavaScript hier mee omgaat; ook de met strings verwante "arrays" komen hier aan de orde. 6. OBJECTEN De arrays en strings uit het vorige hoofdstuk zijn strikt beschouwd in JavaScript "ingebouwde" objecten. In deze hoofdstuk komen de eigenschappen en methoden van enkele andere ingebouwde objecten als Date en Math ter sprake. Daarnaast zal ik iets vertellen over objecten die je zelf definieert, en over zogenaamde browser-objecten. 7. FORMS Een belangrijke toepassing van JavaScript is het controleren van de gegevens die door de sitebezoeker op een formulier zijn ingevuld. Een eenvoudig voorbeeld daarvan is: het script constateert dat een verplicht veld niet is ingevuld, en vraagt je om dat alsnog te doen. Ingewikkelder controles zijn ook denkbaar: als bij vraag 5 is ingevuld dat sprake is van een huurhuis, dan mag bij vraag 9 geen huurwaardeforfait worden ingevuld; was echter sprake van een koophuis, dan moet juist het huurwaardeforfait worden ingevuld. 3

4 8. EVENTS Vroeger werkten programma's zeer rechtlijnig: eerst werd stuk A uitgevoerd, vervolgens stuk B, en tenslotte stuk C. Moderne programma's zijn minder voorspelbaar: er kunnen allerlei "events" ofwel gebeurtenissen plaatsvinden, vaak als gevolg van handelingen van de gebruiker, en verschillende routines binnen het programma handelen die gebeurtenissen af. Klikt de gebruiker bijvoorbeeld een button aan, dan wordt A uitgevoerd; komt de muispointer boven een plaatje, dan wordt B uitgevoerd; en verlaat de gebruiker een invoerveld, dan wordt C uitgevoerd. In dit hoofdstuk bespreek ik, wanneer welk event kan optreden, en hoe we events in onze programma's kunnen afhandelen. 9. COOKIES Ze zijn geliefd bij de marketingmensen omdat ze een individuele benadering van websurfers mogelijk maken, maar gehaat bij veel Internet-gebruikers omdat ze een inbreuk kunnen vormen op hun privacy... Cookies maken het mogelijk om gegevens over een sitebezoeker te verzamelen en vast te leggen, zodat deze bijvoorbeeld bij een volgend bezoek aan de site kan worden begroet als "oude bekende". In het voorlaatste hoofdstuk zal ik laten zien hoe je cookies gebruikt vanuit JavaScript. TIP: Cookies zijn gebonden aan een specifiek domein. 11. TROUBLESHOOTING EN GEAVANCEERDERE ONDERWERPEN In het laatste hoofdstuk zal ik het hebben over enkele problemen die je tegen kunt komen bij het programmeren in JavaScript. Zodra je "interessante" scripts begint te schrijven, is er een goede kans dat ze niet meteen doen wat je wilt, of dat ze bijvoorbeeld wel werken met de ene browser maar niet met de andere. 4

5 JAVA EN JAVASCRIPT Je weet nu, waarover we het in deze cursus zullen hebben. Voordat we nu eindelijk aan ons eerste programmaatje in JavaScript toekomen, wil ik nog enkele woorden wijden aan iets dat een enkele maal tot verwarring leidt: de verschillen tussen Java en JavaScript. De naam van de twee programmeertalen Java en JavaScript suggereert dat ze nauw aan elkaar verwant zijn, en er zijn inderdaad overeenkomsten: de syntaxis (zeg maar: de schrijfwijze en de regels voor het gebruik) van JavaScript lijkt sterk op die van Java, en in beide talen is het uit veiligheidsoverwegingen onmogelijk gemaakt om direct naar de harde schijf te schrijven. Er zijn echter ook belangrijke verschillen. Sommige daarvan zijn wat technisch voor een beginnerscursus (zo is Java een echte object-georiënteerde taal die volledig uitbreidbaar is met "klassen" en "overerving"; JavaScript daarentegen is een op objecten gebaseerde taal die maar beperkt "uitbreidbaar" is), maar enkele andere verschillen wil ik hier zeker noemen. Allereerst is daar het al dan niet gecompileerd worden. De broncode van een Java-programma wordt eerst door een Java-compiler vertaald naar "byte-code" die hetzelfde is voor ieder platform (Windows, Macintosh, etc.). De byte-code wordt vervolgens uitgevoerd door een "runtime interpreter" die wèl per platform verschilt. Als eindgebruiker krijg je de Java-broncode normalerwijze nooit te zien. JavaScript daarentegen wordt niet gecompileerd maar direct geïnterpreteerd. De JavaScriptbroncode is opgenomen binnen de HTML-pagina, en gewoon te bekijken m.b.v. "View Source". Dat heeft nadelen --iedereen kan zien hoe je programma werkt, dus van beveiliging is nauwelijks sprake, en geïnterpreteerde talen zijn doorgaans trager dan gecompileerde--, maar ook voordelen. Je kunt bijvoorbeeld leren van voorbeelden: als je op het Web een pagina tegenkomt die iets indrukwekkends doet met JavaScript, kan je zonder problemen bekijken hoe het is geprogrammeerd. Je kunt zelfs stukjes broncode kopiëren en in je eigen pagina's opnemen. (Het is overigens wel zo netjes om daarbij te verwijzen naar de oorspronkelijke auteur!) Daarnaast hoef je bij het ontwikkelen van een JavaScript-programma niet te compileren voordat je kunt testen, hetgeen de "ontwikkelingscyclus" vereenvoudigt. Een tweede verschil heeft te maken met de variabelen die in programma's gebruikt worden. In Java moeten we van tevoren opgeven wat het type van die variabelen is ("strong typing"); in JavaScript hoeft dat niet ("loose typing"). Een laatste verschil is de mate van integratie met de HTML-pagina. Java-programma's staan op zichzelf (ze worden in de HTML-pagina ingebed met behulp van een speciale "tag", maar moeten vervolgens nog apart van de server worden opgehaald). JavaScript programma's daarentegen zijn nauw verweven met de rest van de HTML-pagina. Gewapend met deze achtergrondkennis zullen we nu zien hoe je een eenvoudig script schrijft, en hoe je het precies opneemt in je pagina. 5

6 HELLO, WORLD: ONS EERSTE SCRIPT We zullen ons houden aan de goede traditie die zegt dat ons eerste programmaatje in een nieuwe programmeertaal de woorden "Hello, world" op het scherm zet. In JavaScript kan dat met de volgende opdracht: document.write("hello, world") (In plaats van dubbele aanhalingstekens " mag je ook enkele aanhalingstekens ' gebruiken.) Zoals we later nog zullen zien, maken we hier gebruik van het ingebouwde "object" document, en gebruiken daarvan de "methode" write. We lopen hier overigens direct al aan tegen een verschil tussen Internet Explorer en Navigator. JavaScript is namelijk "case sensitive", hetgeen betekent dat er een verschil wordt gemaakt tussen hoofdletters en kleine letters. De opdracht moet daarom precies zo worden geschreven als hierboven is aangegeven; schrijven we bijvoorbeeld Document met een hoofdletter, dan is dat fout. In Navigator krijg je in dat geval een foutmelding. Internet Explorer daarentegen accepteert schrijfwijzen met hoofdletters wèl. Om dit soort problemen op het spoor te komen, zou je dus altijd minimaal met deze twee browsers moeten testen! We weten nu, welke opdracht we moeten gebruiken, maar nog niet, hoe we die opdracht opnemen in onze HTML-pagina. Dat gaat heel eenvoudig: door de opdracht tussen SCRIPT-tags te zetten. Recentere browsers die scripting ondersteunen, weten dat de tekst tussen deze tags een stukje script is (de verstekwaarde voor de script-taal is JavaScript). Oudere browsers die geen scripting ondersteunen, negeren de tags (zoals alle tags die ze niet kennen). Onze HTML-pagina bevat inmiddels het volgende: <HTML> <SCRIPT> document.write("hello, world") </SCRIPT> </HTML> Dat lijkt voldoende, maar er is nog één probleem. Oudere browsers zullen de SCRIPT-tags weliswaar negeren, maar de tekst ertussen behandelen als gewone tekst. In ons geval komt er dus document.write("hello, world") op het scherm te staan. Om dit te voorkomen, gebruiken we het volgende foefje. We zetten onze JavaScript-regel tussen de tekens die HTML gebruikt voor het aangeven van commentaar, dat wil zeggen: <!-- vóór het script en --> erachter. 6

7 Tenslotte zetten we nog // voor de tekens waarmee je in HTML het commentaar afsluit. (JavaScript behandelt alles wat op een regel geplaatst is na de tekens // als commentaar. Is je commentaar meer dan een regel lang, dan zet je de tekens /* ervoor en */ erachter.) Al met al ziet ons script er nu als volgt uit: <HTML> <SCRIPT> <!-- Afschermen voor oude browsers document.write("hello, world") // Einde afscherming --> </SCRIPT> </HTML> We hebben nu gezien hoe je een eenvoudig script in een HTML-pagina opneemt. In het volgende hoofdstuk zullen we zien hoe we, d.m.v. lussen of "loops" opdrachten herhaaldelijk of alleen onder bepaalde voorwaarden kunt uitvoeren; daarbij komen ook de zogenaamde "variabelen" aan de orde. 7