Ontstaansgeschiedenis van javascript

1995
JavaScript werd in 1995 ontwikkeld door Brendan Eich die op dat moment werkte voor de firma Netscape. Eerst heette de taal overigens Mocha, bedacht door de oprichter van Netscape. Later dat jaar veranderde de naam in LiveScript, om daarna in december de definitieve naam javascript te krijgen.
Deze naam is niet toevallig gekozen: de programmeertaal Java was op dat moment ontzettend populair in de webwereld.

Let op: de programmeertaal Java en javascript hebben niets met elkaar te maken. Javascript is een scripttaal. Een javascript-applicatie wordt tegelijk met een bijbehorende webpagina geladen en uitgevoerd in het geheugen van de browser van de bezoeker.
Java-applicaties worden op een heel andere manier geprogrammeerd en via een compiler omgezet in een zelfstandig uitvoerbaar programma (een executable).

Tegenwoordig is javascript beschikbaar als een nieuwe en moderne manier voor innovatie, standaardisatie en het ontwikkelen van toepassingen - webapps. Frameworks zoals Node.js stellen ons in staat ook server side toepassingen te schrijven in javascript. Html5 en javascript zijn goed op elkaar ingespeeld en helpen de developers fraaie, snelle en onderhoudbare apps te schrijven.
De leercurve van javascript is hier en daar misschien steil... maar zeer zeker de moeite waard.

Html is statisch Een html-pagina is standaard statisch. Zolang er geen nieuwe versie van de pagina naar de server wordt verstuurd, toont de pagina altijd dezelfde content.

Javascript en PHP zijn dynamisch Javascript is een van de manieren om de webpagina of website dynamisch te maken. Delen van de content worden beïnvloed door het script. Denk aan slide shows, validaties van formulieren en dergelijken. Met javascript kan de website gemakkelijk responsive worden gemaakt: de lay-out verandert met behulp van javascript aan de grootte van het scherm van de bezoeker (is dat een mobiele telefoon? Een tablet? Een kleine of juist heel grote monitor?)

De javascript-code wordt in de browser uitgevoerd: client side. PHP-scripts worden server side uitgevoerd.

De sandbox maakt het veiliger javascript heeft zonder speciale instellingen geen rechtstreekse toegang tot het systeem van de bezoeker, de code wordt uitgevoerd in een beschermd gedeelte van de browser. Deze speeltuin/sandbox voorkomt dat javascript-code schade kan toebrengen aan de computer waarmee de pagina wordt bezocht. Vóór de sandbox vormde javascript een reëel gevaar en was het een geliefd middel voor hackers en virusbakkers.

Hoe voeg je javascript toe aan de pagina?

Javascript bevindt zich altijd tussen <script> en </script> en er zijn verschillende locaties in het document beschikbaar.

  • één of meer <script>-blokken in de <head>-sectie
  • één of meer <script>-blokken in de body van de pagina. Deze plaats je bij voorkeur nét voor het einde van de pagina, dus voor de </body>.

Interne bestanden

De <script>-blokken omsluiten het script:

<script> var n = prompt("Wat is je naam?"); alert("Hallo, " + n); </script>

Externe bestanden

Het is ook mogelijk een extern javascript-bestand in te lezen als src van het blok:

<script src="js/externbestand.js"></script>

Let op: In deze situatie zijn <script> en </script> verplichte onderdelen. Het is niet mogelijk het blok af te sluiten met />.

De extensie van het externe script-bestand moet .js zijn. In het externe bestand plaats je geen <script> en </script> om het script heen.

Het is niet mogelijk om het inladen van een extern javascript-bestand te combineren met javascript-code.

Er is geen limiet gesteld aan het aantal javascript-blokken (ongeacht of het interne, of externe scripts betreft).


a little javascript

Variabelen en constanten in javascript

Naamgeving van variabelen:

  • de naam mag geen spaties bevatten
  • de naam moet beginnen met een alfabetisch teken, een underscore (_) of een dollarteken ($)
  • de naam mag alleen letters, getallen, underscores of dollartekens bevatten (geen accenten of andere speciale tekens)
  • de naam van variabelen is altijd hoofd- lettergevoelig
  • de naam van een variabelen mag geen 'gereserveerd woord' zijn (bijvoorbeeld namen uit de taal zelf)
  • zorg voor 'beschrijvende' namen van de variabelen. Hoewel x en y vaak worden gebruikt voor coördinaten, is het vaak beter iets langere namen in te zetten
  • javascript dwingt geen maximale lengte voor variabelenamen af, maar in het kader van leesbaarheid is het beter de namen ook weer niet té lang te maken
  • de variabelenaam gk_88374kk is een naam die helemaal voldoet aan de regels, maar of het nu duidelijk is waar deze variabele over gaat?

Pascal case De naam van de variabele wordt in dit geval geschreven met een hoofdletter aan het begin en elk volgend woorddeel heeft ook een hoofdletter. Voorbeelden:

   NaamBezoeker
   BedragVoorReizen
   AfstandInKilometers.

Camel case De naam van een variabele (of identifier) begint altijd met een kleine letter. Elk volgend woorddeel heeft een hoofdletter. Voorbeelden:

   naamBezoeker
   bedragVoorReizen
   afstandInKilometers

Snake case De woorddelen van de variabelenaam worden in kleine letters geschreven en gescheiden door een underscore (_). Voorbeelden:

   naam_bezoeker
   bedrag_voor_reizen
   afstand_in_kilometers

Naamgevingsregels
De hoofdlettergevoeligheid van javascript dwingt een zekere zorgvuldigheid af, waardoor het in de praktijk niet zo erg is als het lijkt.

Maak er een goede gewoonte van de variabelen 'netjes' in te zetten en als je een standaard gebruikt voor het benoemen van variabelen, dan doe je er goed aan je aan die standaard te houden.

Dat geldt ook voor de komende stages en dergelijken: veel bedrijven hanteren hun eigen coderegels en naamgeving. Wees erop voorbereid dat je misschien (tijdelijk) van stijl moet wisselen.

Wat zijn variabelen? Variabelen zijn benoemde stukjes geheugen (in de browser) die voor korte of lange tijd gegevens bewaren. Ze danken hun naam aan dat aspect: gedurende de werking van de applicatie kan die waarde telkens veranderen.

Constanten houden zich aan dezelfde regels, maar veranderen niet hun waarde tijdens het programma. De naam van constanten wordt uit gewoonte geheel in hoofdletters geschreven.

Variabelen, vervolg

Variabelen in javascript zijn feitelijk type-loos, de interpreter probeert zelfstandig het type van de variabele op te sporen. Dat gebeurt op basis van de inhoud van de variabele:

var naam = "Atilla de Hun"; // string, letterreeks

var leeftijd = 56; // integer, geheel getal zonder decimalen

var toeslag = 3.5; // float, getal met decimalen

var actief = true; // boolean, true of false

var ding = Object; // type Object

Het type van de variabele is dynamisch, een variabele kan gedurende de werking van het script van type veranderen:

var x; // type is undefined

var x = 1234; // type is Number

var x = "mboRijnland"; // type is String

var x = true; // type is boolean

typeof kun je gebruiken om het actuele type van de variabele op te sporen (immers: het type kan runtime veranderen):

typeof 0 // geeft Number terug

typeof "hallo, wereld" // geeft String terug

undefined is een waarde die automatisch wordt toegewezen aan een "lege" variabele:

var voertuig; // waarde is undefined, type is undefined

Let op: een lege string ("") is NIET undefined. Het type is string:

var woonplaats = ""; // type is string, value = ""

Variabelen in actie

<script> var naam; // 'undefined' var woonplaats = 'Dedemsvaart'; // var volgnummer = 1324356; var btwPercLaag = 6; var btwPercHoog = 21; // database? var klant = 'Fred Flintstone'; var woonplaats = 'Bedrock'; var gehuwd = true; var klant2 = 'Petra Dovens'; var woonplaats2 = 'Almere'; var gehuwd2 = false; var klant3 = 'Atilla de Hun'; var woonplaats3 = 'Oeralgebergte'; var gehuwd3= false; </script>

Arrays maken het mogelijk met groepen gegevens te werken, voordat je gebruik moet maken van een database. De code links laat verschillende variabelen zien, waarbij de laatste drie 'groepjes' een soort database vormen... maar wel een hele slechte.

Een betere optie is arrays (Engels: reeks) gebruiken. Een array-variabele kun je zien als een kast met daarin verschillende laatjes. Die laatjes hebben een volgnummer (startend vanaf 0).

<script> var klant = new Array(3); // de kast met 3 laatjes (0, 1 en 2) klant[0] = 'Fred Flintstone'; klant[1] = 'Petra Dovens'; klant[2] = 'Atilla de Hun'; var woonplaats = new Array(3); // nog een kast woonplaats[0] = 'Bedrock'; woonplaats[1] = 'Almere'; woonplaats[2] = 'Oeralgebergte']; // alternatieve schrijfwijze. Gehuwd heeft ook 3 laatjes! var gehuwd = [true, false, false]; <script>

Arrays zijn heel efficiënt voor het opslaan van relatief kleine hoeveelheden gegevens. De arrays klant, woonplaats en gehuwd zijn met behulp van javascript heel goed te doorzoeken, omdat de laatjes van de drie arrays overeenkomen met elkaar. klant[0], woonplaats[0] en gehuwd[0] bevatten resp. de waarden 'Fred Flintstone', 'Bedrock' en true (alleen Fred is getrouwd). Voor dezelfde hoeveelheid gegevens heb je in de linker-versie maar liefst 9 variabelen nodig, in de rechter-versie slechts 3. De variabele gehuwd wordt met een andere schrijfwijze gemaakt, maar met hetzelfde resultaat.

Conversie tussen het ene en het andere gegevenstype

Variabele zonder initiële waarde is undefined

.

Tot slot

Javascript is cool.