webtechniekendoor Glenn Mertens, voor Syntra

var fruit = document.getElementById(‘shape1’);fruit.style.color = (age < 300) ? “yellow” : “brown”;

webtechnieken, door Glenn Mertens, ©2014 2

inhoudstafelinhoudstafel 2

HOOFDSTUK 1: DE WERELD VAN HET WIJDE WEB 4webterminologie 4een webmaster, webdesigner en webdeveloper 6evolutie 6de 7 geboden 6

HOOFDSTUK 2: HYPERTEXT MARKUP LANGUAGE 7html 8

evolutie syntax commentaar template

tag reference 8

HOOFDSTUK 3: 9css 10

evolutie selectoren eigenschappen

fonts & font-families 10eenheden 10kleuren 10responsive css 11css translations 11

transformaties transities

css animaties 11box model 12

block elementen inline elementen inline-block elementen verborgen elementen

float 13position 13z-index 13commentaar 13

HOOFDSTUK 3: PROGRAMMEREN & SCRIPTEN 14webdesign: scripten met verschillende syntaxis 15programmeren: definitie 15niveaus 15syntax 16variabelen 16

local of global session

operatoren 16functies & methodes 16eigenschappen 16controlestructuren 17

if... else for while switch

webtechnieken, door Glenn Mertens, ©2014 3

HOOFDSTUK 4: JAVASCRIPT 19javascript? 20client-side vs server-side 20object-georiënteerd 20objecten 20eigenschappen 20methodes en functies 20events 21variabelen 21functies schrijven 21constructor en het keyword: new 21standaard constructors 22this 22het DOM 23dhtml 23selectors 23eigenschappen opvragen of aanpassen 23elementen toevoegen of verwijderen 23event handler 23operatoren 24

algemene syntax wiskundige operatoren string operatoren logische operatoren vergelijkingsoperatoren conditionele operatoren

enkele oefen-functies 25formuliervalidatie 26snippets 26

HOOFDSTUK 5: FRAMEWORKS 27framework? 28

jQuery $. bibliotheek integreren

slimbox: full screen image browser 28downloaden integreren opties trigger

myFirstLittleSnippet 29overload 29andere populaire frameworks 29

HOOFDSTUK 6: JSON & XML 30json? 31

client-side en server-side 2d-array 31

structuur json variabele string datapakketje json syntax opvragen

xml? 32voorbeeld xls gebruik markup language

hoofdstuk_1

dewereld

van hetwijde

web

webtechnieken, door Glenn Mertens, ©2014 5

webterminologie

wat is het web?Het world wide web is een netwerk van servers waar websites op gehost worden. Deze servers zouden wereldwijd bereikbaar moeten zijn.

wat is een website?Een website is een mapje met bestanden en eventueel een database gehost op één van die servers. Elke server (webhost) heeft een eigen uniek ip adres (zoals een telefoonaansluiting een telefoonnummer heeft). Het mapje op de webserver wordt gekoppeld aan een bepaald domein via dns. De bestanden worden geïnterpreteerd door een webbrowser en daar visueel weergegeven op het scherm van de eindgebruiker.

dnsDomain Name System is niet meer dan een server die aan de hand van een tabel officieel geregistreerde domeinnamen koppelt aan het ip adres van de webhost. Het is een essentiële component voor de werking het Internet.

een domein/subdomein?Een domein is een zelfgekozen "naam" gekoppeld aan een account op een bepaalde server (syntraweb.be), voorafgegaan door "www" refereert het naar de "main" website (www.syntraweb.be) van de account. Een subdomein kan gezien worden als een subaccount, het verwijst meestal naar een onderdeel (onderliggende map) van de desbetreffende website (student.syntraweb.be)

wat is een url?A Uniform Resource Locator. Een aan elkaar koppeling van lettertekens die verwijzen naar een bron op het web.vb: http://www.rogez.be/work.php#retouch

wat is http/https?HyperText Transfer Protocol. Het protocol dat gebruikt wordt om webdata op het internet door te sturen. HyperText Transfer Protocol Secure is hetzelfde protocol maar dan versleuteld met een ssl-certificaat om data te beveiligen tegen snuffelaars.

wat is ftp?FileTransferProtocol. Het protocol dat voornamelijk gebruikt wordt om bestanden in hun geheel te versturen of te downloaden van of naar een webserver.

ssl/tlsSecure Sockets Layer (SSL) en diens opvolger Transport Layer Security (TLS), zijn encryptie-protocollen die communicatie op het internet beveiligen. Encryptie en decryptie gebeuren via door speciale instanties uitgegeven certificaten die kunnen worden aangekocht door het bedrijf die de website host.

statische code vs dynamische codeStatische code is code die letterlijk verschijnt zoals zo geschreven werd terwijl dynamische code aan de hand van logische operatoren statische code genereert. Bijvoorbeeld php code kan html/css code genereren die afhankelijk is van een locale parameter zoals de taal van de gebruiker.

wat is een script?Een script is dynamische code die uitgevoerd wordt binnen een Sandbox. Een Sandbox is een beschermde omgeving waarvan de grenzen afgebakend zijn door het programma waarin het script uitgevoerd wordt. Bijvoorbeeld: JavaScript wordt geïnterpreteerd binnen de Sandbox van de browser. Dit betekent dat het bijvoorbeeld geen toegang heeft tot de bestanden op de harde schrijf van de gebruiker. De browser zelf heeft daar wel toegang toe.

webtechnieken, door Glenn Mertens, ©2014 6

wat is een framework?Een framework is een programmeertaal gebouwd op een lager liggende programmeertaal om de werking ervan eenvoudiger (lees: met minder code) te maken. Bijvoorbeeld jQuerry is een framework gebouwd op JavaScript. Met het jQuerry commando $('demo').hide() kan je het element met als id='demo' snel gaan verbergen. Het framework voert op de achtergrond deze JavaScript code uit: document.getElementById('demo').style.visibility = 'hidden';

wat is ajax?Asynchronous JavaScript And XML (AJAX) is een term voor het ontwerp van interactieve webpagina's waarin asynchroon gevraagde gegevens worden opgehaald van de webserver. Daardoor hoeven dergelijke pagina's niet in hun geheel ververst te worden.

wat is een browser?Een programma dat webcode op de computer/tablet/smartphone interpreteert naar een website.

wat is een cookie?Een cookie is een hoeveelheid data die een server naar de browser stuurt met de bedoeling dat deze opgeslagen wordt, om bij een volgend bezoek weer naar de server te worden teruggestuurd. Zo kan de server de browser opnieuw herkennen en bijhouden wat de gebruiker in het verleden heeft uitgestoken. Wat interessant is voor marketingdoeleinden. Vanwege de privacy aspecten is het gebruik van cookies in deze situaties omstreden, doch zeer gebruikelijk, maar wel verplicht te melden aan de gebruiker. Cookies kunnen o.a. gebruikt worden voor: • Het onthouden van een loginnaam. • Het vergaren van surfinformatie (profilering) • Het koppelen van een browser aan tijdelijke variabelen op de server (session cookie) Een cookie hoeft niet veel data te bevatten. Als het cookie een unieke sleutel bevat, dan kan de server onder die sleutel alle verdere gegevens over de betreffende gebruiker zelf bewaren en oproepen wanneer de cookie in een volgende sessie weer opduikt.

wat is SEO en waarom is het nodig?Search Engine Optimization zorgt ervoor dat je website hoog gewaardeerd wordt door zoekmachines. Dit kan kosteloos bekomen worden door enkele basis zaken te voorzien in je codering.

wat is jQuerry?Een framework voor JavaScript.

wat is usability?De gebruiksvriendelijkheid van je website. Als mensen te lang moeten zoeken op je website om terug te vinden naar wat ze op zoek waren is de usability van je website slecht. Als je site te lang moet laden door te veel overload eveneens.

wat is een CMS?Een Content Management System is een website waar alle content (tekst en media) via een database wordt opgeslagen. Op die manier kunnen verschillende groepen van gebruikers (users) via bepaalde rechten die ze toegewezen krijgen al dan niet de inhoud (content) gaan lezen of veranderen.

wat is SQL?Structured Query Language is een gestandaardiseerde taal die gebruikt kan worden voor taken zoals het bevragen en het aanpassen van gegevens in een relationele database.

wat is het verschil tussen een anker en een link?Een link verwijst naar een andere webpagina terwijl een anker naar een punt binnen eenzelfde webpagina verwijst.

webtechnieken, door Glenn Mertens, ©2014 7

wat is het verschil tussen upload en download?Upload is gegevens versturen. Download is gegevens ontvangen.

wat is het verschil tussen een tag en een attribuut?een tag (object) kan verschillende attributen (eigenschappen) bevatten.

wat is het verschil tussen een class en een id?een bepaalde class kan aan meerdere elementen in een document toegewezen worden terwijl een unieke identificator slecht eenmalig in een document mag voorkomen.

wat is het verschil tussen een functie en een methode?een methode is een voorgedefinieerde functie

wat is het verschil tussen een object en een property?een object kan verschillende properties (en methodes) bevatten

een webmaster, webdesigner en web developerEen web designer is iemand die de vormgeving van websites ontwerpt. De techniek of eventueel software die voor de functionaliteit van een website zorgt, wordt gemaakt door een web developer. De persoon die de website beheert, noemt men de webmaster. Vormgeving en functionaliteit worden door verschillende vakgebieden ingevuld. Gezien het toegenomen belang van internet in de bedrijfswereld, wordt het maken en onderhouden van een website steeds vaker uitbesteed aan een bureau met professionele webdesigners, die bij het creatieve proces een afweging dienen te maken tussen de wensen van de klant en de technologische mogelijkheden. Tevens moet daarbij de huisstijl van het betreffende bedrijf geïntegreerd worden. Een web designer kan als freelancer werken maar ook als medewerker van een internetbureau of bedrijf gespecialiseerd in webdesign.

evolutieDoordat de technologische ontwikkelingen steeds verder gaan, worden er hogere eisen aan een web designer gesteld: met alleen kennis van html en een grafisch programma komt men er niet meer. De klant vraagt om coherente opmaak met gebruikmaking van css. Interactieve elementen die gebruik maken van JavaScript of jQuerry. Een database die gebruik maakt van SQL. Animaties voor presentatiedoeleinden, dit kan in swf of met het html5 canvas element. Vaak specialiseert iemand zich binnen een bedrijf in een specifieke tak die berust op één van deze technologieën. In deze opleiding maken we kennis met alle technologieën. De keuze is dan aan u of u zich later verder wenst te specialiseren of liever het gehele spectrum op u neemt.

de 7 geboden van een webdesigner• focust op gebruikservaring, usability is alles, elke onnodige klik is een klik te veel.• laat zijn voetafdruk achter in de vorm van een eigen stijl.• less is more, gebruik alleen het nodige, geen toeters en bellen.• heeft een argument voor elk element.• begrijpt marketing, onder elke website schuilt een commercieel doel.• is op de hoogte van de laatste trends en ontwikkelingen• bedenkt een concept en visie voor die aan de slag gaat met ontwerpen en programmeren

hypertextmarkup

languagev5

hoofdstuk_2

webtechnieken, door Glenn Mertens, ©2014 9

html?HyperText Markup Language is een op SGML (xml) gebaseerde opmaaktaal voor de specificatie van documenten, voornamelijk bedoeld voor het World Wide Web.

evolutieDe taal is geëvolueerd van een opmaaktaal (tekst met opmaaktekens) naar een gestructureerd stelsel van afzonderlijke objecten (het DOM). Dankzij deze evolutie is het mogelijk geworden om elementen (tags en eigenschappen) dynamisch te gaan beïnvloeden. Tevens is het daardoor mogelijk om de opmaak en de inhoud van elkaar gescheiden te houden.

syntaxhtml elementen worden gedefinieerd aan de hand van een tag (object) die mogelijk verschillende attributen (eigenschappen) heeft. html tags waar van verwacht wordt dat ze inhoud bevatten, worden ook afgesloten door een closing tag.<p class=”vet”>dit wordt vet</p>

p: tag | class: attribuut | vet: value | dit wordt vet: taginhoud

commentaarOm commentaar tussen html code te plaatsen gebruik je de volgende syntax:<!-- Hier komt de commentaar -->

templateStandaard ziet een html5 document zonder inhoud er ongeveer zo uit:<html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> <meta name=”keywords” content=””> <meta name=”description” content=””> <title></title> <link rel=”stylesheet” type=”text/css” href=””> <script type=”text/javascript” src=””></script> </head>

<body>

<!--inhoud-->

</body> </html>

HTML tag referencehttp://www.w3schools.com/tags/default.asp

cascadingstyle

sheetsv3

hoofdstuk_3

webtechnieken, door Glenn Mertens, ©2014 11

css?Cascading Style Sheets worden gebruikt voor de inhoud van het html document eenduidig vorm te geven. De term ‘cascading’ staat voor ‘overlappend’, wat duidt op de erf structuur (bompa - mama - dochter - kleinzoon) van de elementen. Wanneer een bepaalde eigenschap aan een (groot)ouder wordt toegekend, zullen al de (klein)kinderen deze eigenschap erven, uiteraard geldt dit principe niet in de andere richting. Wanneer er aan een kind, class of id een bepaalde eigenschap wordt toegekend, die reeds gedefinieerd werd bij een ouder, zal deze overlapt (overschreven) worden.

evolutieDoorheen de tijd is de opmaak die mogelijk is via css interactiever geworden. Via pseudo selectoren als :hover en :focus is het mogelijk om de opmaak te beïnvloeden door events als muisbewegingen. Het is nu ook mogelijk om alle mogelijke fonts te gaan embedden. Via responsive css kunnen we ‘per schermresolutie’ bepaalde code al dan niet laten uitvoeren.

selectorenIn css kunnen we bepaalde eigenschappen gaan toekennen aan één element (via #id) maar ook aan een gehele class van elementen (.class) of zelf aan een geheel object (tag). Ook de meest creatieve combinaties zijn mogelijk via allerhande leestekens. Bestudeer daarom zeker eens de selector referentie op w3schools:http://www.w3schools.com/cssref/css_selectors.asp

eigenschappenHet grootste vooruitzicht als webdesigner is om alle css properties uit het hoofd te gaan leren. Veel succes... dat is gekkenwerk. Je moet wel bewust zijn dat ze bestaan en ze vooral kunnen toepassen. Bestudeer en gebruik daarom veelvuldig de css tag reference van w3schools:http://www.w3schools.com/cssref/default.asp

fonts en font-familiesEr zijn 3 font-families: serif (geschreefd), sans-serif (ongeschreefd) en monospace (alle letters even breed). Sinds css3 kan men ook fonts gaan embedden (@font-face) of importeren via webservices (@import) zoals Google Fonts:http://www.google.com/fontshttp://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

eenhedenAfstanden worden uitgedrukt met verschillende eenheden, absolute en relatieve. Overzicht:http://www.w3schools.com/cssref/css_units.asp

kleurenKleuren kunnen in css op verschillende manieren genoteerd worden, met of zonder alpha channel (transparantie): Als voorbeeld 100% blauw:• hex: Hexadecimaal: #0000FF• rgb: RoodGroenBlauw: rgb(00,00,255)• rgba: RoodGroenBlauwAlpha: rgba(00,00,255,1)• hsl: HueSaturationLightness: hsl(240,100%,100%)• hsla: HueSaturationLightnessAlpha: hsl(240,100%,100%,1)• voorgedefinieerde kleur namen: blue http://www.w3schools.com/cssref/css_colornames.asp

webtechnieken, door Glenn Mertens, ©2014 12

responsive cssOm het design compatibel te maken met verschillende apparaten, lees: verschillende resoluties, kunnen we bepaalde css code laten uitvoeren wanneer er aan de opgegeven condities is voldaan.@media screen and (max-width: 480px) { /* voor kleine gsm schermen */ } @media screen and (min-width: 1024px) { /* voor normale computerschermen */ }

css translationsBeweging zonder JavaScript, c'est possible! Dankzij css3. Zowel statische transformaties als vloeiende translaties... Onder statische transformaties verstaan we: verschuiven, draaien, schalen, uitrekken. Onder transities verstaan we de vloeiende overgang tussen de begintoestand en de eindtoestand.

transformatiesDe beschikbare transformaties in css3 zijn:• translate() verschuiven• rotate() draaien• scale() schalen• skew() uitrekken• matrix() 4-in-1

De div zal 30° draaien wanneer uw muis hem nadert.div { width: 100px; height: 100px; background: gold; } div:hover { transform: rotate(30deg); }

transitiesOm vloeiend van begintoestand naar eindtoestand over te gaan hebben we het aspect tijd nodig. Aan de "transition" eigenschap geven we mee welke eigenschap en in hoeveel tijd deze moet overgaan naar de nieuwe waarde. Wanneer men met de muis de div nadert zal deze gelijkzijdig vergroten in een tijdspanne van een halve seconde.div { width: 100px; height: 100px; background: gold; } div:hover { width: 200px; height: 200px; transition: width 0.5s, height 0.5s; }

css animatiesWe kunnen ook zelf animaties gaan "schrijven". Dit kan met de @keyframes css regel. Binnen de @keyframes{}definiëren we de animatie en via de animation eigenschap roepen we ze aan op het gewenste element.@keyframes psy {

from {background: red;} to {background: yellow;} }div{ width:500px; height:500px; background:red; animation:psy 10s; }

In plaats van from{} to{} kunnen we ook met tijdspercentages gaan werken.@keyframes schuif {

0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}}div{ width:500px; height:500px; background:red; position:relative; animation:schuif 10s;}

meerhttp://www.w3schools.com/css/css3_animations.asp

webtechnieken, door Glenn Mertens, ©2014 13

box-modelElk element heeft een afmeting, al dan niet bepaald door de inhoud van het element. De ruimte daarrond noemt men de padding, deze krijgt dezelfde kleur als de achtergrondkleur van het element. Dan komt de border, dit is de rand van het element, vrij vorm te geven door een border-style naar keuze. Ten slotte hebben we nog de margin, dat is de afstand tussen het element met padding met border en het ouderlijk element, deze rand krijgt ook de achtergrondkleur van het ouderlijk element (vaak de body).

block elementenEen block element zal na het element automatisch een nieuwe lijn beginnen, alsof er een 'enter' achter is geplaatst. Een block element houdt ook rekening met de marges en de padding van het element. Indien men een block element als inline element wil laten fungeren kan dit met de css eigenschap: display:inline;

Standaard block elementen:article, header, aside, hgroup, blockquote, body, canvas, caption, col, colgroup, dd, div, dl, dt, embed, fieldset, figcaption, figure, footer, form, h*, header, hgroup, hr, li, map, object, ol, output, p, pre, progress, section, table, tbody, textarea, tfoot, th, thead, tr, ul, video

inline elementenInline elementen plaatsen zichzelf naast elkaar in de rij. Er kan geen hoogte en breedte op ingesteld worden. De ingestelde linker en rechter marges (+padding) worden gerespecteerd, maar de boven en onder marges (+padding) worden genegeerd. We kunnen inline elementen ook als blok elementen laten fungeren door ze de eigenschap display:block; te geven.

Standaard inline elementen:b, big, i, small, tt, abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var, a, bdo, br, img, map, object, q, script, span, sub, sup, button, input, label, select, textarea

inline-block elementenTot slot zijn er nog de inline-block elementen die gepositioneerd worden als inline elementen maar zich gedragen als block elementen. Het komt er op neer dat ze rekening houden met de gehele margins en padding van het element, een instelbare breedte en hoogte hebben maar zich braaf naast elkaar in de rij positioneren.

Standaard bestaan er geen inline-block elementen, al wordt deze handige eigenschap wel vaak aan elementen toegekend via: display:inline-block;

webtechnieken, door Glenn Mertens, ©2014 14

verborgen elementenElementen die met de eigenschap: display:none; verborgen worden, verdwijnen uit de flow. Dit wil zeggen dat er geen rekening meer gehouden wordt met de aanwezigheid van het element.

onzichtbare elementenNaast verborgen elementen bestaan er ook latent aanwezige elementen, deze zijn niet verborgen maar onzichtbaar. Dit kan met de eigenschap: visibility:hidden; Het verschil is dat deze elementen aanwezig blijven in de flow, maar niet zichtbaar zijn.Beschouw bijvoorbeeld twee divs naast elkaar, als men de linker div verbergt, zal de rechter div opschuiven naar links. Als men de linker div onzichtbaar maakt zal de rechter div blijven staan maar niet zichtbaar zijn.

floatMet float laat men inline of inline-block elementen links of rechts aansluiten.

positionDoor een andere waarde aan de position eigenschap toe te kennen kunnen we een element uit de flow gaan halen. Dit kan op vier verschillende manieren:

position: static;→ standaard, positioneren in de volgorde van de flow. position: absolute;→ positioneren tegenover zijn eerste niet-statische ouder, los van de flow. position: relative;→ relatief tegenover de positie van de ouder volgens de flow.

position: fixed;→ positioneren tegenover browser canvas, los van de flow.

z-indexDe z-index positioneert een element los van de flöw, als een laag, boven of onder een ander element.div#n1 { position: relative; z-index: 10; }div#n2 { position: relative; z-index: -2; }div#n3 { position: relative; }

• Werkt alleen bij elementen uit de normale flow, dus bij position: fixed, relative of absolute.• Een element met een hogere z-index zal hoger geplaatst worden op het canvas.• De z-index gaat van -9999 tot 9999.

commentaarOm in css commentaar te zetten moet de commentaar omsloten worden door /* en *//* Dit is css commentaar */

scripten &

programmeren

hoofdstuk_4

webtechnieken, door Glenn Mertens, ©2014 16

Webdesign: talen en levels1. html

inhoud van webpagina’s2. css

lay-out van webpagina’s3. js (+ frameworks oa jQuery)

gedrag van webpagina’s4. php

dynamisch genereren van webpagina’s5. sql

opslaan van gegevens in databases

Programmeren: definitieProgrammeren is het schrijven van een concrete verzameling instructies die een computer interpreteert en uitvoert aan de hand van logische redeneringen en berekeningen.

NiveausMen kan ‘communiceren’ met een computer op verschillende niveaus. Een computer ‘denkt’ of rekent elektronisch, via een binair systeem, stroom of geen stroom: één (1) of nul (0). De mens daarentegen denkt via ideeën en begrippen en neemt waar via vormen en kleuren. De interface tussen mens en machine is de programmeertaal. Er bestaan verschillende programmeertalen, op verschillende niveaus. De ene ligt dichter bij de computer, de andere dichter bij de mens.

In de werkelijkheid zijn er veel meer niveaus (lagen) dan hier opgesomd, voor de eenvoud hier enkele cruciale lagen:

1. machine taal (1GL)sequenties van stroom of geen stroombinair: 0,1

2. assemblage taal (2GL)symbolische weergave van machinetaal aan de hand van instructiesetshoe de computeronderdelen met elkaar communicerenelke processorsoort heeft een eigen instructiesetvb: x86-64, drivers (stuurprogramma’s)

3. procedurele taal (3GL)de computer stap voor stap een set van functies en methodes laten uitvoerenhet niveau waarin computer programma’s geschreven wordenelke programmeertaal heeft zijn eigen methodes en syntax (schrijfwijze)vb: Java, C#, C++

4. scripting taal (4GL)een scriptingtaal stuur via een runtimebibliotheek een lager liggende procedurale taaleen script wordt uitgevoerd door een programma en functioneert in een Sandbox, een beschermde omgevingwaarvan de grenzen afgebakend zijn door het programma waarin het script uitgevoerd wordt.dit is het niveau waarop wij webdesigners gaan ‘programmeren’, of eerder scripten.vb: JavaScript, ActionScript, php, asp, jQuerry

5. probleemoplossende taal (5GL)hierbij specificeert de programmeur geen algoritme maar het probleem zelfvia directe commando’s die nog makkelijker door de mens te begrijpen zijn komt deze taal nog wat dichter bijhoe wij denken, uiteraard met veel meer beperkingen.vb: voice commando’s, Proloog, Apple Siri, Google Now

webtechnieken, door Glenn Mertens, ©2014 17

syntaxElke programmeertaal heeft een unieke syntax, de syntax kan men zien als de grammatica (schrijfwijze) van de taal. Een populaire syntax-vorm is de dot-syntax. Hierover later meer.

variabelenEen variabele is een ‘roepnaam’ waar tijdelijk informatie kan in opgeslagen worden. Veel voorkomende types variabelen zijn:• boolean false of true, 0 of 1.• number getal, kan een integer (geheel getal) of float (breukgetal) zijn.• string tekenreeks, een aaneenkoppeling van tekens, nummers, spaties en leestekens. (“...”)• array lijst van verschillende numbers, booleans of strings [..., ..., ...], eigenlijk al een object.• object bevat samengestelde waarden of gegevenstypes

De eerste drie zijn primitieve variabelen, vanaf het moment uit primitieve variabelen naar een nieuwe variabele wordt samengesteld spreek met van een object(variabele).

local of globalAls een variabele wordt aangemaakt binnen een functie, een lus of een klasse, kan deze alleen binnen deze structuur gebruikt worden. Wanneer we die doorheen het gehele script willen gebruiken moeten we deze globaal gaan declareren, dit wil zeggen buiten de structuur (meestal in het begin van het document).

sessionEr bestaan ook sessie variabelen. Deze kunnen gedurende de gehele browser sessie gebruikt worden. Sessie variabelen bestaan alleen bij server-side programmeertalen.

operatorenElke programmeertaal heeft unieke operatoren, meestal leestekens die een bepaalde functie hebben binnen de programmeertaal. Zo wordt bijvoorbeeld in JavaScript de ‘+’ gebruikt om twee getallen op te tellen maar ook om twee strings aan elkaar te plakken. In php wordt de ‘.’ gebruikt om twee strings aan elkaar te plakken. Deze taal maakt dus geen gebruik van de dot-syntax, i.p.v. de “.” wordt “->” gebruikt. Zo ziet men maar dat meertalig zijn niet altijd zo evident is.

functies en methodesEen methode is een functie die we aan een object kunnen toekennen of standaard toegekend staat. Als een functie aan een bepaald object is gekoppeld wordt het een methode genoemd. Vaak zijn methodes voorgedefinieerde functies die deel uitmaken van een voorgedefinieerd object. Indien de methode los van een object gebruikt kan worden (globaal) dan spreekt men van een functie. Methodes en functies worden gevolgd door haakjes met eventueel parameters tussen.

eigenschappenEen eigenschap (property) is een variabele (met een bepaalde waarde) dat men aan een object kan toekennen. Elk object bevat standaard eigenschappen of er kunnen eigenschappen aan worden toegewezen.

webtechnieken, door Glenn Mertens, ©2014 18

controlestructurenProgrammeren is hanteren van logica. Daarvoor bestaan er verschillende controlestructuren zoals statements en lussen. Hieronder de voornaamste:

if... elseDe if structuur zorgt ervoor dat een stukje code slechts wordt uitgevoerd wanneer er aan een bepaalde voorwaarde is voldaan. De else is optioneel en zal de code uitvoeren wanneer er niet aan de voorwaar de is voldaan.if(voorwaarde) {aan voorwaarde voldaan} else {niet aan voorwaarde voldaan}

forSoms willen we een bepaald aantal maal iets herhalen. Wanneer we vooraf weten hoeveel keer het herhaald moet worden moeten we de for-lus gebruiken.for(teller; voorwaarde; teller-bewerking){de code die zal worden uitgevoerd}

whileWanneer we echter vooraf niet weten hoeveel maal we iets willen herhalen kunnen we de while-lus gebruiken. Deze is handig om resultaten op te halen. De lus herhaalt de code tot de voorwaarde is voldaan.while(voorwaarde){de code die zal worden uitgevoerd}

switchWanneer we een variabele met heel veel mogelijke waarden willen vergelijken kunnen we ofwel veel if-blokken gebruiken, ofwel gebruiken we het switch-statement. De opgegeven variabele wordt vergeleken met al de mogelijke ‘cases’ (waarden). Op het einde van elke case zetten we het break commando, dit vertelt het programma om uit de lus te stappen.switch(variabele) { case 0: de code die zal worden uitgevoerd break; case 1: de code die zal worden uitgevoerd break; case 2: de code die zal worden uitgevoerd break; case 3: de code die zal worden uitgevoerd break; }

javascript

hoofdstuk_4

webtechnieken, door Glenn Mertens, ©2014 20

javascriptJavaScript werd oorspronkelijk gelanceerd onder de naam Mokka door Netscape (nu openSource onder de naam Mozilla) als uitbreiding op de functionaliteit van html om meer interactiviteit op webpagina’s mogelijk te maken. Ondertussen is Javascript omgevormd tot een officiële genormeerde en gestandaardiseerde scripttaal. De Javascript specificatie is vastgelegd in een document met het nummer 262- ECMA. Alle huidige browsers ondersteunen Javascript. Uiteraard gebruikt het blauwe schaap ‘Internet Explorer’ een ander versienummer en de naam Jscript, maar de functionaliteit blijft grotendeels gelijk.

client-side vs server-sideJavascript is een client-side script. De uitvoering gebeurt op de computer van de gebruiker binnenin de Sandbox van de browser. Daarbij is het ook veilig om Javascript te gebruiken aangezien het kind geen toegang heeft buiten zijn zandbak en dus geen gevaar kan aanrichten aan de bestanden op de computer.

Tegenover client-side scripts staan server-side scripts zoals php of asp. Deze worden uitgevoerd op de webserver. Daarginds wordt er op dynamische wijze (html, css of js) code gegenereerd die via het http(s) protocol naar de eindgebruiker wordt doorgestuurd en ingelezen door de browser.

object-georiënteerdJavascript is een objectgeoriënteerde scriptingtaal. Dit wil zeggen dat er een hiërarchie bestaat van objecten (die bepaalde eigenschappen en methodes bevatten) en hun kind objecten die dan weer bepaalde eigenschappen en methodes kunnen bevatten maar ook diegene van hun ouders erven. De ‘dot-syntax’ (.) scheidt ouder van kind, methode van object of eigenschap van object.

objectenJavascript bevat enkele voorgedefinieerde objecten:• navigator: behandelt info over de browser zelf (versie, OS, …)• window: parameters van het browservenster zoals knoppen en statusbalk en afmetingen• document: heeft betrekking op het html document zelf• history: de geschiedenis van de browser (vooruit of achteruit navigeren)• forms: heeft betrekking op formulieren (voor validatie bijvoorbeeld)

eigenschappenEen eigenschap (property) is een waarde dat men aan een object kan toekennen. Elk object bevat eigenschappen of er kunnen eigenschappen aan worden toegewezen. Bijvoorbeeld de paragraaf met id: demo heeft standaard een eigenschap text en ook een eigenschap style. Om de tekst van de paragraaf van kleur te veranderen, wijzigen we de waarde van de eigenschap color die weer een eigenschap is van zijn ouderlijk object style, die een eigenschap is van het object p met id demo.document.getElementById(“demo”).style.color=”red”;

methodes en functiesEen methode is een functie die we aan een object kunnen toekennen. Als een functie aan een bepaald object is gekoppeld wordt het een methode genoemd. Vaak zijn methodes voorgedefinieerde functies die deel uitmaken van een voorgedefinieerd object. Indien de methode los van een object gebruikt kan worden (globaal) dan spreekt men van een functie. Methodes en functies worden gevolgd door haakjes met eventueel parameters ertussen.Bijvoorbeeld: getElementById() is een methode van het document object die het element met id “demo” in de variabele paragraaf steekt. Deze variabele maken we ter plaatste aan met het var commando.var paragraaf = document.getElementById(“demo”);

webtechnieken, door Glenn Mertens, ©2014 21

eventsEvents worden gegenereerd door acties van de gebruiker, aan deze events kunnen er in html functies, methodes of wijzigingen van eigenschappen gekoppeld worden.

Voorbeelden van DOM events:• When a user clicks the mouse: onClick• When a web page has loaded: onLoad• When the mouse moves over an element: onMouseOver• When a user strokes a key: onKeyPresshttp://www.w3schools.com/jsref/dom_obj_event.asp

Toepassing van events in html code: als op de knop geklikt wordt, voer de functie changeColour() uit.<button onclick=”changeColor(‘demo‘,’yellow’)”>Wijzig Kleur</button>

met de functie worden er 2 variabelen meegegeven: de id en de kleur.

variabelenNet zoals in andere programmeertalen maakt men in js gebruik van variabelen. Het gegevenstype wordt in js automatisch toegewezen wanneer er inhoud aan de variabele wordt toegekend. Numbers, strings en booleans bevatten slechts een enkele waarde en worden daarom primitieve variabelen genoemd.

Mogelijke variabelen:• var number = 1; //primitieve variabele• var string = “aaneenkoppeling van tekens!?”; //primitieve variabele• var boolean = false; //primitieve variabele• var array = [‘geel’,‘groen’,‘blauw’];• var object = document.getElementById(‘demo’);

functies schrijvenMen kan zelf functies gaan definiëren met het keyword: function gevolgd door de naam en haakjes met daartussen eventueel mee te geven variabelen.Bijvoorbeeld:function changeColor(id,color) { var theElement = document.getElementById(id); theElement.style.color = color; }

Deze functie kan men aanspreken bij een event in html.Men kan deze eveneens aanspreken in javascript zelf.

constructor en het keyword: newEen object kan als variabele geconstrueerd worden aan de hand van een constructorfunctie. Een constructorfunctie wordt steeds voorafgegaan door het keyword new. Men kan een standaard constructor gebruiken of zelf een constructorfunctie definiëren.

Bijvoorbeeld: een object aanmaken met de standaard constructor Object():var person = new Object(); person.firstName = “John”; person.lastName = “Doe”; person.age = 50; person.eyeColor = “blue”;

Eerst maakt men de variabele ‘person’ aan, die men dan declareert als een object(variabele). Vervolgens gaat men het object vullen met eigenschappen (properties) maar men dan ook meteen waarden (values) aan toekent.

webtechnieken, door Glenn Mertens, ©2014 22

In het geval dat men meerdere (gelijkaardige) objecten wil aanmaken die steeds dezelfde eigenschappen of methodes bevatten, kan men een constructorfunctie gaan schrijven.

Bijvoorbeeld: het object persoon heeft steeds dezelfde eigenschappen, er zullen meerdere personen zijn.function person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; }

Bovenstaande functie is een object constructor, wanneer men het keyword new voor deze functie plaatst, creëert men een nieuw object met dezelfde eigenschappen, (de waarden van die eigenschappen zullen waarschijnlijk verschillen.)var myFather = new person(“Jozef”, “Van Dommel”, 50, “blue”); var myMother = new person(“Sally”, “Rally”, 48, “green”);

standaard constructors

var x1 = new Object(); // A new Object object var x2 = new String(); // A new String object var x3 = new Number(); // A new Number object var x4 = new Boolean() // A new Boolean object var x5 = new Array(); // A new Array object var x6 = new RegExp(); // A new RegExp object var x7 = new Function(); // A new Function object var x8 = new Date(); // A new Date object

Het is niet noodzakelijk om primitieve variabelen (string, number, boolean) als objecten te gaan definiëren, ook al is dit mogelijk. Inzicht in de taal later zal verklaren waarom.

thisIn JavaScript refereert het keyword this naar het object dat zijn code “bezit”. • De waarde van this, wanneer het gebruikt wordt in een functie, is het object dat de functie bezit.• De waarde van this, wanneer het gebruikt wordt in een object, is het object zelf.• De waarde van this, wanneer het gebruikt wordt in een object constructor, heeft geen waarde. Het is slechts een plaatsvervanger voor het nieuwe object. this zal pas refereren naar het nieuwe object, wanneer de constructor gebruikt wordt om het object te definiëren.

this refereert naar het object dat zijn waarde bevat. Wat betreft bovenstaande constructorfunctie: “person”. Naar welk object refereert this binnen de functie?

var myFather = new person(“Jozef”, “Van Dommel”, 50, “blue”);

In dit geval refereert this naar myFather.

var myMother = new person(“Sally”, “Rally”, 48, “green”);

In dit geval refereert this naar myMother.

this spreekt het object aan dat door de constructorfunctie “person” worst aangemaakt.

Voor de breinbrekers:http://stackoverflow.com/questions/12272503/what-does-this-refer-to-in-javascript-functions

webtechnieken, door Glenn Mertens, ©2014 23

Het DOMHet Document Object Model beschrijft hoe elementen gerelateerd zijn tegenover het document als hoofdelement. Het geeft webpagina’s weer in de vorm van een boomstructuur: grootouders - ouders - kinderen - kleinkinderen - enzoverder...

De elementen worden gezien als objecten met verschillende eigenschappen die elk afzonderlijk of tegelijkertijd kunnen aangepast of uitgebreid worden.

Een tag kan verschillende attributen hebben zoals een object verschillende eigenschappen kan hebben.

dhtmlWanneer we vanuit geprogrammeerde code de statische html (en css) code gaan beïnvloeden spreken we van dynamische html of kortweg: dhtml. Met JavaScript kunnen we dit vanuit de browser van de gebruiker: client-side.

selectorsVanuit JavaScript kunnen er verschillende aanspreekmethodes gebruikt worden om een bepaald element (object) te gaan selecteren en achteraf beïnvloeden.

Bijvoorbeeld:• getElementById(“id”)• getElementsByTagName(“tag”)• getElementsByClassName(“class”)

eigenschappen opvragen of aanpassenVan het geselecteerde object (tag) kunnen we bepaalde eigenschappen zoals de style, de inhoud of een attribuutwaarde gaan opvragen en indien nodig aanpassen.

Bijvoorbeeld:• element.innerHTML= verandert de tekst die tussen de tags staat• element.setAttribute(attribute,value) methode verandert de waarde van het gevraagde attribuut• element.style.property= verandert de gevraagde css property van het aangeduide element

elementen toevoegen of verwijderenEr bestaan methodes om onder het aangesproken object (element), een nieuw element aan te maken (kind) of te verwijderen. Er kan ook rechtstreeks naar de html output stream geschreven worden.

Methodes:• document.createElement() Create an HTML element• document.removeChild() Remove an HTML element• document.appendChild() Add an HTML element• document.replaceChild() Replace an HTML element• document.write(text) Write into the HTML output stream

event handlerWanneer het event direct vanuit javascript wordt aangesproken (niet vanuit de html code in de tag) en wordt toegewezen aan een functie spreekt men van een event handler.

document.getElementById(id).onclick=function() { //code }

webtechnieken, door Glenn Mertens, ©2014 24

operatoren

algemene syntax// commentaar. dot-syntax: scheidt ouder van kind= kent een waarde toe“ ” omvat een string‘ ’ omvat een string binnen een string in een andere programmeertaal

wiskundige operatoren+ optellen van numbers- aftrekken van numbers* vermenigvuldigen van numbers/ delen van numbers% modulus van numbers (restwaarde van de deling van de twee numbers)++ +1-- -1

string operatoren+ koppelt strings, tevens het optelteken voor numbers+= plakt string aan bestaande string

logische operatoren&& logische en|| logische of! logische niet

vergelijkingsoperatoren== vergelijkt of twee waardes gelijk zijn (5 == ‘5’): true!= vergelijkt of twee waardes ongelijk zijn=== vergelijkt twee of waardes en tevens hun gegevenstypes gelijk zijn (5 === ‘5’): false!== vergelijkt twee of waardes en tevens hun gegevenstypes ongelijk zijn< kleiner dan> groter dan<= kleiner of is gelijk aan<= groter of is gelijk aan

conditionele operatorenAan de hand van conditionele operatoren kunnen we verkort een if structuur gaan noteren:variable = (condition) ? value1:value2

is hetzelfde als:if(condition) { variabele = value1; } else { variabele = value2; }

of met een voorbeeld:stemplicht = (leeftijd < 18) ? false:true;

De variabele ‘stemplicht’ is een boolean, de if structuur gaat na of de leeftijd kleiner is dan 18, zo ja: wordt stemplicht: falsezo nee: true

webtechnieken, door Glenn Mertens, ©2014 25

enkele oefen-functies

function getSize() { //maak nieuwe variabele aan en steek er de innerWidth eigenschap van het window object in var w = window.innerWidth; //maak nieuwe variabele aan en steek er de innerHeight eigenschap van het window object in var h = window.innerHeight; //maak nieuwe variabele aan en steek er de <p> met id “demo” in als object var x = document.getElementById(“demo”); //schrijf deze tekst weg naar het html element met de id “demo” die in de var x steekt x.innerHTML = “Width: “ + w + “ Heigth: “ + h;}

function sayHi() { //maak variabele date aan en declareer die als datum object var date = new Date(); //vraag het uur op uit het datum object en steek die in een number variabele var hours = date.getHours(); //maak een variabele aan die later als boolean zal functioneren: dag (true) of nacht (false) var day; //maak een begroeting variabele aan die als string zal functioneren var greeting; //als het uur kleiner is dan 20 (vroeger dan 20h) if (hours < 20) { day = true; } else { day = false; }

//if(boolean) is hetzelfde als if(boolean = true) //stel de begroeting in if(day) { greeting = “Good day”; } else { greeting = “Good night” } //schrijf weg naar de <p> document.getElementById(“demo”).innerHTML = greeting; }

function tafels1(coefficient){ //declareer een variabele en definieer hem als lege string //als men dit niet door zal er een undefined verschijnen wanneer er later += gebruikt wordt var tafels = “”; //de lus de zal herhaald worden tot de herhalingslimiet (11x) bereikt is for(i=0; i<=10; i++) { //deze lus zal 11x worden herhaald tafels += i+” x “+coefficient+” = “+i*coefficient+”<br>”; } //schrijf de inhoud van de variabele “tafels” tussen de <p id=”demo”></p> document.getElementById(“demo”).innerHTML = tafels;}

function changeColor(id,color){ //maak een variabele en steek de html tag met meegegeven id er in als object var theElement = document.getElementById(id);

//verander de stijl met name de kleur van het object in de meegegeven kleur theElement.style.color = color;}

webtechnieken, door Glenn Mertens, ©2014 26

formuliervalidatie

voorbeeld: javascript email validatieJavascript is geschikt om gegevens uit een invulformulier te controleren voordat het formulier wordt verzonden. De controle moet dan niet meer op de webserver zelf gebeuren. Dat levert een tijdswinst op en de server wordt ook minder belast. Bijvoorbeeld een ongeldig e-mailadres kan dus op die manier heel snel worden gedetecteerd.http://www.w3schools.com/js/js_form_validation.asp

//bepaalde afbeelding plaatsen in functie van invoer function validateForm() { var invoer = document.forms[“myForm”][“email”].value; var atpos = invoer.indexOf(“@”); var dotpos = invoer.lastIndexOf(“.”); var image = document.getElementById(“validation”)

if(atpos<1 || dotpos<atpos+2 || dotpos+2>=invoer.length) { image.setAttribute(“src”, “img/disapproved.png”); }

else { image.setAttribute(“src”, “img/approved.png”); } }

<form name=“myForm” action=“...” method=“post”> <label for="email">Email:</label> <input type=“text” name=“email” onblur=“validateForm();”> <img id=“validation” src=“img/empty.png”><br><br> <input type=“submit” value=“verzenden”></form>

voorbeeld: html5 email validatieSinds html5 is emailvalidatie ingebouwd. Als we de <input> tag laten weten dat het om een “email” gaat i.p.v. gewoon “text”, dan zal die daar ook direct op valideren. Bij het gebruik van deze methode zal de border van het inputfield rood oplichten indien er geen geldig emailadres werd ingevoerd.

<form action="#" method="post"> <label for="email">Email:</label> <input type="email" name="email"> <input type="submit" value="verzenden"></form>

html5 formuliervalidatieBehalve "email" zijn er nog vele andere validatiemogelijkheden voor het input type. Zoals het required boolean attribuut dat invullen van het betreffende input field verplicht maakt. Lees ze allemaal nog eens na op w3schools:http://www.w3schools.com/html/html_form_attributes.asp

snippetsJavascript snippets zijn veelvoudig plukbaar op het internet. Ze bieden vaak een oplossing voor heel wat situaties. Het zal je als webdesigner veel tijd besparen bij het programmeren maar vaak ook veel tijd kosten om ze deftig te integreren. Ze zijn vaak gratis en met enkele regels code aan je eigen web site te koppelen.

frameworks

hoofdstuk_5

webtechnieken, door Glenn Mertens, ©2014 28

framework?Naast eenvoudige javascript snippets bestaan er ook volledige JavaScript libraries. Deze bibliotheken zijn letterlijk een raamwerk van allerlei nieuwe syntaxis waarmee standaard javascript functies op verkorte wijze kunnen worden aangeroepen. Deze ‘raamwerken’ noemen we in de programmeertaal ‘frameworks’.

jQueryEen heel bekend en veelgebruikt framework is jQuery. ‘Query’ betekent vraag en ‘j’ verwijst naar javascript.jQuery vereenvoudigt het programmeren in JavaScript omdat de syntax dichter bij de mens staat.http://www.w3schools.com/jquery/default.asp

$.Men herkent snel jQuery code aan het $-teken, de bekende functieaanroep. Dit is niets meer dan een verkorte vorm van document.getElementByID()en zijn varianten. Het framework is een extra schil rondom de kernfuncties van JavaScript en hun notatie. Een mogelijk nadeel van een framework is dat het zijn eigen syntaxis kent.

de bibliotheek integrerenOm de jQuery library te importeren maken we gebruik van de bekende html <script> tag. De meest recente jQuerry libraries worden gehost door bijvoorbeeld Google. We kunnen ze dan ook direct linken zonder ze zelf te moeten hosten.

Sinds kort is nu ook een versie 2 van de taal uit, waarbij de syntax veranderd is, daarom moet je goed controleren voor welke versie van de code jouw snippet bestemd is. Mogelijke links:• 1.x: <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script> • 2.x: <script src=”//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>

Voorbeeldenhttp://www.w3schools.com/jquery/jquery_examples.asp

Een jQuerry snippetNet zoals in JavaScript zijn er voor jQuerry ook eindeloos veel snippets, dit zijn stukjes code die we kunnen ‘copypasten’ en aanpassen voor eigen gebruik.

slimbox: full screen image browserAls voorbeeld ‘slimbox’, een snippet die het mogelijk maakt om snel door afbeeldingen te gaan bladeren.

DownloadenGoogle ‘slimbox’, ga naar hun website en download de laatste versie. U ziet dat er een v1 en een v2 bestaat. De eerste versie werkt met een andere framework: MooTools. Aangezien wij nu met jQuerry werken downloaden we v2 en we pakken het archief uit naar een mapje op de eigen schijf. Bij voorkeur een verzamelmap voor alle snippets.

IntegrerenDe volgende stap bestaat uit het integreren van de bestanden in de eigen website. Alles op de juiste plaats zetten en linken via html. Na een kleine analyse zien we 4 mapjes, een readme en een example. In de readme vinden we de instructies. Na een beetje hersenpijniging weten we welke bestanden gelinkt moeten worden...

Checklist:• css + eventuele images gelinkt?• js gelinkt?• framework gelinkt? (in dit geval jQuery)• eventuele aanroepfunctie of trigger geïntegreerd?• in de src map is de source code te vinden, die is slechts nodig als we de snippet willen verbeteren

webtechnieken, door Glenn Mertens, ©2014 29

OptiesEens de snippet correct geïntegreerd is, kunnen de eventuele opties geconfigureerd worden. In de readme vinden we: js/slimbox2.js The minified version of Slimbox 2, plus the editable autoloading code using default options.

De autoloading code is de aanroepfunctie en de options zijn in deze file configureerbaar. Hoe weten we welke opties er beschikbaar zijn? Google!http://www.digitalia.be/software/slimbox2

TriggerOp de website vinden we ook dat de beeldengalerij door het script kan herkent worden door het rel attribuut in te vullen met het woord lightbox, eventueel gevolgd door een liggend streepje en de naam van de galerij.<a href=”images/image-1.jpg” rel=”lightbox-cats”>image #1</a><a href=”images/image-2.jpg” rel=”lightbox-cats”>image #2</a><a href=”images/image-3.jpg” rel=”lightbox-cats”>image #3</a>

myFirstLittleSnippetIntelligent als wij allen zijn kunnen we nu ook zelf een snippetje gaan schrijven. De jQuery syntax is dat vrij eenvoudig voor en de beschikbare eigenschappen en methodes zijn te vinden op de jQuery website:http://api.jquery.com/

// My first little snipped$(document).ready(function() { //fadeIn all section elements after hiding them $(‘section’).hide().fadeIn(); //fadeIn all img elements with the fade class $(‘img.fade’).hide().fadeIn();});

overloadHet gebruiken van een framework heeft veel voordelen voor de webdesigner aangezien het ‘het begrijpen’ makkelijker maakt. Het enige nadeel is dat je de gehele library bij elke pagina moet integreren en dus ook elke keer moet ‘herladen’. Dit kan op tragere computers of tragere internetverbindingen voor tragere respons zorgen. Webpagina’s die traag laden kennen we allemaal... Dus gebruik ze alleen als ze echt nuttig zijn voor de website en wees er zuinig mee.

andere populaire frameworksAnders populaire javascript frameworks zijn: (zelfstudie voor de geïnteresseerden)

• MooTools• Prototype• AngularJS• Backbone• Ember.js• Stapes• Meteor• ...