Lesweek 1: JavaScript

Leerdoelen

Je herkent verschillende soorten gedrag en interactie op het internet
Je begrijpt het doel en de context van ECMAScript
Je kent het verschil tussen Java en JavaScript
Je begrijpt het verschil tussen client-side en server-side scripts
Je begrijpt wat programmeren inhoud
Je begrijpt wat het DOM is
Je hebt een indruk van de mogelijkheden van de Firefox plugin: Firebug
Je weet wat er in dit kwartaal van je verwacht wordt (je begrijpt de inhoud van de modulewijzer)

Geschiedenis JavaScript

Het boek Dom Scripting geeft in hoofdstuk 1 kort aan hoe JavaScript is ontwikkeld door Netscape. Het wordt tegenwoordig als standaard door ECMA, met als officiele naam ECMAScript, beheerd.

JavaScript is gebaseerd op Java maar veel eenvoudiger qua syntaxis en sneller aan te leren. Het doel met JavaScript was om eenvoudige taken binnen de browser uit te kunnen voeren zonder interactie met de server.

Java en JavaScript

Op sommige punten komen de beide talen overeen. De belangrijkste zijn:

Beide talen kunnen gebruikt worden om de functionaliteit van webpaginas uit te breiden.
De beveiliging van beide talen komt overeen: ze kunnen niet rechtstreeks naar het geheugen of bestanden van de clientcomputer schrijven.

De verschillen tussen beide talen zijn echter groot. Belangrijke verschillen zijn:

JavaScript is alleen bedoeld om de mogelijkheden van webpaginas uit te breiden. Java is bedoeld als algemene programmeertaal met veel meer mogelijkheden. Java kan ook gebruikt worden voor niet-internetapplicaties.
JavaScript is een geinterpreteerde scripttaal: de script staat in de html code en de browser vertaalt het script regel voor regel en voert dit direct uit. Java is een gecompileerde taal: de broncode wordt gecompileerd naar een algemene computertaal die door een browser of andere applicatie kan worden vertaald.
De JavaScript code kan door iedereen bekeken worden evenals HTML-code. Java-code is onzichtbaar voor de eindgebruiker.
JavaScript gaat minder strikt om met variabelen en objecten. Hierdoor is de code minder complex en beperkt het ook de mogelijkheden.

Programmeren

XHTML/CSS is een opmaaktaal met beperkte mogelijkheden. De code is lineair van struktuur en biedt geen mogelijkheden voor dynamisch gedrag of berekeningen. Programmeertalen bieden meer mogelijkheden. Hiervoor maken ze gebruik van variabelen, operatoren, conditionele statements (if..then..else) en looping statements. We gaan dit de komende lessen leren.

Mogelijkheden van JavaScript

Met JavaScript wordt een website dynamischer en interactiever. Het dynamische karakter werd in het verleden aangegeven met D(ynamic)HTML. Op het internet zijn allerlei voorbeelden te vinden met bewegende figuurtjes op de webpagina (zie www.dynamicdrive.com)

Interactieve mogelijkheden zijn bijvoorbeeld:

Berekeningen: met behulp van invoervelden berekeningen uitvoeren zoals bij een rekenmachine.
Interactie: een webpagina die direct reageert op waarden die een gebruiker in een invoerveld invoert.
Gegevensvalidatie: JavaScript kan gegevens aan de cliëntkant controleren en beslissen of ze goed zijn voordat ze naar de server gestuurd worden voor verdere verwerking.

JavaScript kan ook veel dingen niet. Met JavaScript is:

Beperkte communicatie met de server mogelijk.
Geen communicatie met een database mogelijk

Hiervoor is echt kennis van hogere talen zoals Java nodig.

DOM

In de vorige module in lesweek 2 is het DOM (Document Object Model) al kort aan de orde geweest. DOM geeft de structuur van het HTML document weer. Uit de titel van het boek blijkt al dat het DOM bij JavaScript een belangrijke plaats inneemt. Je moet de DOM standaard begrijpen om objecten binnen JavaScript op de juiste wijze te kunnen aanroepen. In les 3 gaan we hier uitgebreid op in.

Opdrachten:

Lees de modulewijzer.
Installeer Aptana Studio en de firebug plugin in Firefox.
Kijk op het web wat je zoal kunt met JavaScript. maak een lijst van de mogelijkheden.

Workshop

In de workshop zal, voor zover nagekeken, feedback gegeven worden over de resultaten uit het eerste blok