[W&G FAQ] JavaScript inleiding

[crisp]

--selecteer--IndexPolicy & BeleidTopic RichtlijnenQuickstartFAQ InhoudelijkOverig

Webdesign & Graphics FAQ Special: JavaScript Inleiding

In deze inleiding wil ik graag ingaan op de algemene aspecten van javascript; wat het is, hoe en waar het wordt toegepast, mythen en onwaarheden omtrent javascript en wat voorbeelden hoe javascript toegepast kan worden in een browseromgeving.
In toekomstige specials wil ik later verder ingaan op wat specifieke aspecten met betrekking tot het gebruik van javascript; in het bijzonder een aantal cases die regelmatig vragen oproepen bij gebruikers (hoe kan ik ...?) en wat do's and dont's.
Aanvullingen en verbeteringen mag je mailen naar crisp(at)xs4all.nl.
Een deel van deze teksten heb ik vrij vertaald uit het boek "JavaScript - The Definitive Guide" van O'Reilly geschreven door David Flanagan (ISBN 0-596-00048-0).

Inhoud

• Wat is JavaScript?
• Mythen en onwaarheden rond JavaScript
• Clientside JavaScript

« · ^

Wat is JavaScript?

Javascript is een lichtgewicht, geinterpreteerde programmeertaal met object-oriented kantjes. Javascript wordt meestal gebruikt in webpagina's , waar het in samenhang met HTML wordt gebruikt om interactie met de gebruiker tot stand te brengen, controle uit te oefenen op de browser en om dynamisch HTML content te genereren en te manipuleren.

Qua syntax lijkt javascript op talen als C, C++ en Java, maar daarmee houdt de vergelijking ook op. Javascript is in tegenstelling tot voorgenoemde talen een 'weaktyped' language, wat wil zeggen dat je van te voren niet het type van variabelen hoeft op te geven, en objecten in javascript lijken meer op associatieve arrays zoals in Perl. Ook het object-oriented inheritance mechanisme is compleet anders.
Net als Perl is javascript een script-taal, wat wil zeggen dat de code geinterpreteerd wordt op het moment van uitvoeren. Ook op andere punten (bijvoorbeeld het gebruik van reguliere expressies en dus het werken met arrays) heeft javascript veel weg van Perl.

« · ^

Mythen en onwaarheden rond JavaScript

Javascript == Java

Veel mensen verwarren javascript met java en denken dat het een versimpelde versie is van java. Niets is minder waar; behalve dat de talen hier en daar syntactisch op elkaar lijken hebben ze behalve de naam weinig met elkaar gemeen. De naam 'javascript' is alleen gekozen om marketingtechnische redenen (de originele naam was eigenlijk 'livescript').
Javascript en Java kunnen echter in een browseromgeving wel goed met elkaar samenwerken. Zo kan je met behulp van javascript java applets besturen, en java kan vanuit een applet javascript aanroepen om browser-interactie tot stand te brengen.

Javascript is een simpele taal

Veel mensen denken dat script-talen simpel zijn en ondergeschikt aan hogere programmeertalen.
Javascript lijkt op het eerste gezicht ook erg simpel, en wordt dan ook door veel non-programmeurs gebruikt om simpele taken binnen een browser te vervullen (de zogenaamde 'copy-paste cowboys' ).
Achter dit masker zit echter een volledige programmeertaal verstopt, net zo complex en soms zelfs complexer en veelzijdiger als andere talen. Zonder een volledig inzicht in de taal zelf is het vaak frustrerend voor veel programmeurs om bepaalde functionaliteit te bereiken met javascript.

Javascript is Javascript en werkt altijd en overal hetzelfde

Ook dit is niet waar; als je het over javascript hebt, dan heb je het eigenlijk over een verzameling van verschillende versies en afgeleiden van wat tegenwoordig samengevoegd is in de ECMA standaard. Javascript is als eerste geintroduceerd in Netscape 2 onder de noemer 'JavaScript 1.0'. Deze versie was nogal buggy en bevatte nog maar weinig functionaliteit vergeleken met het huidige javascript. In Netscape 3 werd deze versie dan ook vervangen door 'JavaScript 1.1'; rond dezelfde tijd introduceerde Microsoft een afgeleide van deze taal onder de naam 'JScript 1.0' in Internet Explorer 3.

Tegenwoordig confirmeren zowel Netscape/Mozilla (JavaScript 1.5) als IE (JScript 5.5) zich volledig aan de huidige ECMA v3 standaard. Ook Macromedia's ActionScript is een implementatie van ECMA v3.

JavaScript wordt alleen clientside en in HTML pagina's gebruikt

Inderdaad kent JavaScript de meeste toepassingen in een browseromgeving embedded in een webpagina. Echter kan en wordt javascript ook gebruikt in andere contexten: bijvoorbeeld als scripttaal voor serverside doeleinden binnen een webserver (Microsoft ASP), of binnen stand-alone applicaties (bijvoorbeeld de webbrowser Mozilla zelf).
Aangezien dit buiten de scope van deze FAQ ligt ga ik hier niet verder op in, en als ik het over javascript heb, dan bedoel ik dus ook altijd het gebruik clientside binnen een webbrowser.

Javascript is onveilig

Veel mensen leven nog met het idee dat javascript onveilig is; in die zin dat scripts schade kunnen toebrengen aan hun computer of lokale bestanden kunnen lezen en doorsturen naar derden. Veel van die mensen schakelen javascript dan ook uit in hun webbrowser.
Javascript heeft in het verleden inderdaad wel eens te kampen gehad met beveiligingsproblemen waardoor dit soort dingen tot op zekere hoogte mogelijk waren. De laatste tijd echter zijn er weinig veiligheidsproblemen omtrent de taal zelf meer gemeld. Het huidige veiligheidsmodel rond javascript is erg strict, en vroeg of laat zal je dat zelf wel eens ondervinden. Het javascript security model is erop gericht dat het geen resources buiten het eigen domein kan benaderen en ook geen netwerk mogelijkheden kent.

Verder heeft javascript nogal te lijden onder hetgeen waar het veel voor gebruikt wordt: het ongevraagd openen van windows (popups) en het wijzigen van je browserwindow (vergroten, verkleinen, verplaatsen) of je browserinstellingen. Vooral louche sites maken graag misbruik van de mogelijkheden die javascript biedt met betrekking tot het manipuleren van de browser zelf; Microsoft biedt daarnaast nog wat extra mogelijkheden in hun javascript implementatie in Internet Explorer (aansturen van ActiveX controls, mogelijkheid een browserwindow fullscreen te maken en tot voor kort een bug waarmee een chromeless window gemaakt kon worden) die naast mogelijke veiligheidsrisico's voornamelijk voor irritante toepassingen op het web hebben gezorgd.

Echter in de meeste gevallen wordt javascript wel functioneel gebruikt, en is het een verrijking voor de webpagina. Javascript maakt het mogelijk pagina's dynamisch te maken (DHTML) zonder daarvoor serverside technieken of plugins nodig te hebben; dit komt vaak de snelheid en laadtijd van een pagina ten goede. In de do's en dont's kom ik later nog terug op hoe om te gaan met browsers die geen javascript ondersteunen of uit hebben staan.

« · ^

Clientside JavaScript

Zoals gezegd specificeer ik mij in deze en volgende javascript FAQ's op het gebruik clientside in een browseromgeving. Hier wil ik graag een aantal simpele voorbeelden geven hoe javascript gebruikt kan worden embedded in een HTML pagina. Later zal ik ingaan op wat meer complexe toepassingen in een aantal real-world cases, waarin ik uitga van een redelijke kennis van de javascript syntax. Deze voorbeelden zijn meer bedoeld om je vertrouwd te maken met de javascript syntax en als voorbeeld hoe ik andere cases wil gaan opzetten.

Heb je nog geen basiskennis van javascript, of gaan deze voorbeelden je al boven je pet, dan verdient het aanbeveling je eerst hiermee verder vertrouwd te maken. Zie de links en boeken sectie voor een aantal resources.

Werken met datum en tijd

We beginnen met een heel simpel voorbeeld hoe javascript gebruikt kan worden om dynamische HTML content te genereren; dit stukje script werk ik wat verder uit, de andere voorbeelden bied ik aan in de vorm van snippets met wat opmerkingen.

In dit geval gaan we gebruik maken van het javascript Date() object om de datum en tijd van de pc van de bezoeker uit te vragen en aan de hand daarvan een dynamische tekst op het scherm neer te zetten.

Het Date() object wordt standaard geinitialiseerd met de huidige datum/tijd van de pc; vervolgens zijn er een aantal methoden beschikbaar om jaar, maand, dag, uren en seconden daaruit te halen. Allereerst beginnen we natuurlijk met een script-tag om aan te geven dat wat volgt geinterpreteerd moet worden als javascript, waarna we een datum object aanmaken:

JavaScript:

<script type="text/javascript">
var datum = new Date();

Nu gaan we hieruit het jaar, de maand etcetera halen, en stoppen die in aparte variabelen:

JavaScript:

var jaar = datum.getFullYear();
var maand = datum.getMonth();
var dag = datum.getDate();
var uur = datum.getHours();
var minuut = datum.getMinutes();
var seconde = datum.getSeconds();

we willen nu aan de hand van de tijd een dynamisch tekstje maken: 'Goedemorgen' als het ochtend is, 'Goedemiddag' als het middag is etcetera. We gebruiken hiervoor de inhoud van variabele uur en schrijven in een if-else constructie de juiste tekst naar de browser:

JavaScript:

if (uur < 6 || uur > 22) {
  document.write('Goedenacht!<br />');
} else if (uur < 12) {
  document.write('Goedemorgen!<br />');
} else if (uur < 18) {
  document.write('Goedemiddag!<br />');
} else {
  document.write('Goedenavond!<br />');
}

Verder willen we hierna de huidige datum en tijd geven, met de naam van de maand voluit geschreven. De variabele maand bevat het cijfer van de maand waarbij januari = 0, februari = 1 etcetera. Het handigst is dan ook om een array te maken met de namen van de maanden:

JavaScript:

var maanden = new Array('januari', 'februari', 'maart',
                        'april', 'mei', 'juni', 'juli',
                        'augustus', 'september', 'oktober',
                        'november', 'december');

nu kunnen we dmv maanden[maand] de juiste naam van de maand ophalen (een array begint standaard ook op index 0, dus da's handig. Rest ons nog om de rest van de tekst naar de browser te sturen en het scriptblok af te sluiten:

JavaScript:

document.write('Vandaag is het '+dag+' '+maanden[maand]+
                ' '+jaar);
document.write(', en de tijd is '+uur+':'+minuut+':'+seconde);
</script>

Maak een standaard HTML document, en stop de bovengenoemde code tesamen in je <body> en open het in je browser om het resultaat te zien!

Dynamisch style elementen wijzigen

Een klein voorbeeldje om de achtergrondkleur van deze pagina te wijzigen:



De source:

HTML:

<input type="button" value="rood"
  onclick="document.body.style.backgroundColor='#ff0000'" />
<input type="button" value="groen"
  onclick="document.body.style.backgroundColor='#00ff00'" />
<input type="button" value="blauw"
  onclick="document.body.style.backgroundColor='#0000ff'" />
<input type="button" value="wit"
  onclick="document.body.style.backgroundColor='#ffffff'" />

« · ^

[ Voor 143% gewijzigd door crisp op 19-09-2003 23:26 ]