Client side representation 1 Webtechnologie Lennart Herlaar.

Presentatie over: "Client side representation 1 Webtechnologie Lennart Herlaar."— Transcript van de presentatie:

1 Client side representation 1 Webtechnologie Lennart Herlaar

2 Client side representation 2 Webtechnologie Lennart Herlaar

3 Box model revisited Box sizing 50% + 50% = 100% ?.foo {box-sizing: content-box; width: 50%; border: 1em ridge red;}.foo {box-sizing: border-box; width: 50%; border: 1em ridge red;}.foo {box-sizing: border-box; width: 50%; border: 1em ridge red; margin: 1px;} IE x, met x < 6 Fratsenmodus (quirks mode)

4 Box model revisited Collapsing margins Top en bottom margins schuiven ineen voor unstyled elementen Dit is ook wat je meestal zou verwachten Bijvoorbeeld na, binnen li {background: #FB8; margin: 2px;} p {margin: 10px;}

5 Box model revisited Maar… Collapsing margins What's happening here?.foo {background: #f80; margin: 10px;}.foo h1 {margin: 10px;}.foo p {margin: 10px; font-style: italic;}.foo {background: #f80; margin: 9px; padding: 1px;}.foo h1 {margin: 10px;}.foo p {margin: 10px; font-style: italic;}

6 Final words Enorme aantallen properties en values z-index, visibility, overflow,... Bepaalde properties vooral zinvol met JavaScript Browser support minder eenduidig dan HTML Graceful degradation / Progressive enhancement CSS3 (en HTML5) leer je alleen door te doen! W3Schools tutorials HTML5 + CSS3 Showcases CSSZenGarden

7 Client side scripting 7 Webtechnologie Lennart Herlaar

8 Inhoud JavaScript Document Object Model Event model jQuery

9 We gaan hard! 4 talen in 4 weken, allemaal een eigen syntax HTML (XHTML, HTML5, XML) CSS JavaScript PHP En verder: DTDs, jQuery, regular expressions In 220 uur geen expert op al deze gebieden Hoofdlijnen, pragmatische insteek Zelf doen "The student that, like the wild animal being prepared for its tricks in the circus called "life", expects only training as sketched above, will be severely disappointed: by his standards he will learn next to nothing." – Edsger W. Dijkstra

10 Client side scripting revisited Client side scripts draaien in de browser De scripts zijn onderdeel van de opgevraagde pagina Source code leesbaar "Actief" zolang de pagina getoond wordt In essentie gericht op het oplossen van tekortkomingen in protocol en presentatie Page based request, ontbreken van state JavaScript (een hele tijd niets) VBScript ?

11 JavaScript Ontwikkeld door Netscape in 1995 Oorspronkelijk Mocha, toen LiveScript Uiteindelijk JavaScript "Het lijkt op Java" ? Java was populair Sinds 1997 gestandaardiseerd als ECMAScript Implementaties vormen dialecten daarvan JavaScript JScript ActionScript "It had to be Java’s dumb kid brother [...]. Plus, it had to be done in ten days or something worse than JS would have happened." – Brendan Eich "ECMAScript was always an unwanted trade name that sounds like a skin disease." – Brendan Eich

12 Rol van JavaScript Oorspronkelijk Quick and dirty, ad hoc browser add-on, geen DOM Browser detection code, hairy stuff Eenvoudige animaties, input validation Later DOM, CSS: DOM + CSS + JS = DHTML (Dynamic) XMLHttpRequest object: DHTML + XHR = AJAX JavaScript Object Notation: JSON Dijkstra would not have liked this…

13 Rol van JavaScript JavaScript wordt steeds serieuzer Belangrijke rol binnen HTML5 Betere standaardisatie en browser support Fat clients Steeds meer toepassingen buiten de browser Server side JavaScript

14 JavaScript als scripting taal JavaScript is een scripting taal Geïnterpreteerd door een JavaScript Engine Multi-paradigma Object-georiënteerd Imperatief Functioneel Prototype gebaseerd Zwak getypeerd, dynamisch

15 Prototype gebaseerd Objects maar geen classes Een object is een lijst property:value paren Associative array, hash Functies zijn beschikbaar Binnen objects worden dit methods Objecten aanmaken Uit het niets, met een lijst property:value paren Op basis van een functie (object constructor) Klonen van een prototype

16 Prototype gebaseerd Stiekem allemaal hetzelfde De link tussen kloon en prototype blijft bestaan Wijziging van prototype leidt tot wijziging van kloon Prototype chain, delegation Object staat aan de basis van alle objecten myFirstObject = {myFirstProperty: 1, myNextProperty: 'Hi'}; myFirstObject = new Object(); myFirstObject.myFirstProperty = 1; myFirstObject.myNextProperty = 'Hi'; alert(myFirstObject.myNextProperty);

17 Objection, your honor! Function MyObject() { this.myFirstProperty = 1; this.myNextProperty = 'Hi'; } myFirstObject = new MyObject(); myNextObject = new MyObject(); myNextObject.myNextProperty = 'Hello'; alert(myFirstObject.myNextProperty); myFirstObject = new Object(); myFirstObject.myFirstProperty = 1; myFirstObject.myNextProperty = 'Hi'; myNextObject = myFirstObject; myNextObject.myNextProperty = 'Hello'; alert(myFirstObject.myNextProperty);

18 Prototype inheritance: properties function MyObject() { this.myFirstProperty = 1; this.myNextProperty = 'Hi'; } myFirstObject = new MyObject(); myNextObject = new MyObject(); MyObject.prototype.myLastProperty = 'The End'; alert(myFirstObject.myLastProperty); alert(myNextObject.myLastProperty);

19 Methods myFirstObject.add = function(x, y) { return x + y; } alert(myFirstObject.add(3, 4)); alert(myFirstObject.add(41, myNextObject.myFirstProperty)); Function MyObject() { this.myFirstProperty = 1; this.myNextProperty = 'Hi'; this.add = function(x, y) { return x + y; } myFirstObject = new MyObject(); alert(myFirstObject.add(3, 4));

20 Prototype inheritance: methods Function MyObject() { this.myFirstProperty = 1; this.myNextProperty = 'Hi'; } myFirstObject = new MyObject(); MyObject.prototype.add = function(x, y) { return x + y; } alert(myFirstObject.add(3, 4));

21 Functions als 1 st class citizen myFunction = function() { return 3*12; } alert(myFirstObject.add(6, myFunction())); alert(myFirstObject.add(6, myFunction));

22 Katten die miauwen function Cat(name) { this.name = name; if (name) { this.talk = function() { alert(this.name + " says meeow!") } cat1 = new Cat("Tommie"); cat1.talk(); cat2 = new Cat(); cat2.talk();

23 Child objects function MyObject() { this.myFirstProperty = 1; this.myNextProperty = 'Hi'; this.myChild = new Object(); } myFirstObject = new MyObject(); myFirstObject.myChild.childProperty = 'Hello'; alert(myFirstObject.myChild.childProperty);

24 Sub "classes" en inheritance function MyObject() { this.myFirstProperty = 1; this.myNextProperty = 'Hi'; this.add = function(x, y) { return x + y; } mySubClassObject = function() { }; mySubClassObject.prototype = new MyObject(); mySubClassObject.prototype.add = function(x, y) { return 'Use your calculator'; } myFirstSubObject = new mySubClassObject(); alert(myFirstSubObject.add(3, 4));

25 Public & private properties Function MyObject() { this.myFirstProperty = 1; this.myNextProperty = 'Hi'; var privateProperty = 42; this.getPrivate = function() { alert(privateProperty); } myFirstObject = new MyObject(); alert(myFirstObject.myFirstProperty); alert(myFirstObject.privateProperty); myFirstObject.getPrivate();

26 Zwak getypeerd, dynamisch Niet nodig variabelen of properties te declareren Type wordt "at runtime" bepaald, duck typing Automatische type conversion Functies zijn 1 st class citizens Functies en properties kunnen dynamisch aan objecten toegevoegd worden Functies met mogelijk variabel aantal parameters Polymorfie Nesting van functiedefinities, closures

27 Type conversion / casting == versus === Waarde Waarde en type Evenzo != en !== myFirstVar = 42; myFirstVar = 'We are sorry for the inconvenience'; myFirstVar = /[0-9]{4} {0,1}[A-Z]{2}/g; x = "the answer is " + "42"; x = 3 + "5"; x = 3 * "5"; x = "this is " + true; x = 1 + true; x = null + false; x = Boolean(""); x = Boolean("0"); x = ("0" == true); x = (Boolean("0") == true); x = ("1" == 1); x = ("1" === 1); typeof(x);

28 JavaScript? Gelijkenis met Java? Gelijkenis met C#? C-achtige syntax, naamgeving, enkele objecten Java is class based Java is static en sterk getypeerd Java is gecompileerd (bytecode) Java is geen scripting taal

29 Business as usual Laat je niet intimideren De geavanceerde zaken kom je nauwelijks tegen De meeste scripts zijn daarvoor niet complex genoeg Typisch enkele tot enkele tientallen regels code Wederom: pragmatische insteek Ook veel herkenbare zaken

30 Herkenbare zaken? Globale en lokale variabelen Globaal tenzij gedeclareerd met var Functie scope in plaats van block scope Verder gebruikelijke scoping en shadowing Gebruikelijke typen string, character, integer, float, boolean, array Maar ook: function, object, undefined, null, regexp Case sensitivity Geen de-allocatie van variabelen nodig

31 Herkenbare zaken? Gebruikelijke control structures if else, while, for, do while, switch Gebruikelijke operators + - * / = += -= ++ -- == != = && || Call-by-value parameter passing Behalve arrays en objecten Statement termination met ; Niet verplicht, maar doe mij een plezier… Commentaar met /* */ of //

32 Starting up Gebruik de error console JavaScript heeft allerlei issues Cross-browser support Beschikbaarheid (noscript) Toegankelijkheid Security Draaien in een sandbox En toch gebruiken we het…

33 Gebruik in een webpagina Source code in de webpagina of ; juiste "timing" Source code in een extern bestand; scheiding Link naar het bestand in function displayDate() { document.getElementById("demo").innerHTML=Date(); } Pas op! Officieel "application/javascript". Maar: browser issues… Weglaten?

34 Hoe lang nog? My First Script today = new Date(); endYear = new Date(2013,11,31,23,59,59,999); endYear.setFullYear(today.getFullYear()); // correct year msPerDay = 24 * 60 * 60 * 1000; daysLeft = (endYear.getTime() - today.getTime()) / msPerDay; daysLeft = Math.round(daysLeft); document.writeln("Still " + daysLeft + " days left in this year");

35 Arrays Ingebouwd object type Net als String, Number, Boolean, Date, Math Methods join, sort, concat, slice, shift, unshift, pop, push var mylist1 = new Array(1, 2, 3, 36); var mylist2 = new Array(4); var mylist3 = [1, 2,, "four"]; var multi1 = [ [ 1], [ 3, 4, 5] ]; var x = multi1.length + multi1[0].length; var sum = 0; for (var i in mylist1) { sum += mylist1[i]; }

36 Prototype inheritance revisited Maar dan dus ook… Object wrappers: String, Number, Boolean String.prototype.reverse = function() { var reversed = ''; for (var x = this.length - 1; x >= 0; x-- ) { reversed += this.charAt(x); } return reversed; }; test = new String("Hello World"); alert(test.reverse());

37 Object inspection, Global Alles begint undefined Object inspection typeof, instanceof for (...in...) obj[memb] versus obj['memb'] versus obj.memb Global functions, properties isNaN(), parseInt(), String(), encodeURI(), eval() undefined alert(typeof(myFirstObject.myFirstProperty)); alert(myFirstSubObject instanceof MyObject); function printAllMembers(obj) { var str = ''; for (var memb in obj) str += memb + ' = ' + obj[memb] + '\n'; return str; } alert(printAllMembers(myFirstSubObject));

38 Binding aan het document alert op zich niet zo interessant... Document object document.writeln document.getElementById Functies gekoppeld aan events Play/Pause

39 Client side scripting 39 Webtechnologie Lennart Herlaar

40 DOM revisited HTML document is een boom Ook in het geheugen van de browser Het gestandaardiseerde object model is de DOM Het Document Object Model definieert De document objecten (objects, HTML elementen) De bijbehorende eigenschappen (properties) De methoden om ze te benaderen (methods, API) Geeft een W3C-gestandaardiseerde manier om de HTML boomstructuur te manipuleren Veelal op basis van events

41 DOM revisited De boom is uitgebreider dan tot nu toe aangenomen … … … html headbody title h1 p ab p

42 DOM revisited html headbody title h1 p ab p text attrtext … … … Eigenlijk…

43 Door de bomen het bos… Sample page Sample page This is a simple sample.

44 Core DOM, HTML DOM Core DOM (XML DOM) Structuur, DOM tree traversal HTML DOM Extensie van Core DOM voor HTML en XHTML Specifieke properties voor HTML elementen Specifieke methods voor HTML elementen Afhandelen Legacy DOM problematiek

45 DOM Levels Ontwikkeling DOM verbonden met browser wars 1996: DOM Level 0, "Legacy DOM" Netscape Navigator, Microsoft Internet Explorer Input validation, "mouseover"-effecten document.forms[0].elements[0], basis events 1997: Intermediate DOM CSS support, DHTML Browser detection code, hairy stuff 1998: DOM Level 1, W3C Volledig document model

46 DOM Levels 2000: DOM Level 2, W3C getElementById Core DOM, HTML DOM, event model En toen werd het een beetje stil… 2004: DOM Level 3, W3C Alleen Core DOM XPath, event handling, XML serialization Nu: DOM Level 4 Hand in hand met HTML5, voortbouwend op Level 2 "the scope of the HTML5 specification include what had previously been specified in three separate documents: HTML4, XHTML1, and DOM2 HTML." – HTML Living Standard "This specification standardizes the DOM [...] by moving features from HTML5 that ought to be part of the DOM platform here." – DOM4 W3C Working Draft

47 DOM revisited HTML document is een boom Ook in het geheugen van de browser Het gestandaardiseerde object model is de DOM Het Document Object Model definieert De document objecten (objects, HTML elementen) De bijbehorende eigenschappen (properties) De methoden om ze te benaderen (methods, API)

48 Objecten, al dan niet DOM Browser objecten, (nog) niet gestandaardiseerd Window Navigator, screen, history, location Core DOM objecten Node, document, element, attribute HTML DOM objecten Document, element, event Uitbreiding op Core DOM Properties / methods voor specifieke elementen

49 DOM Collections Groepen van gerelateerde objecten Images collection Links collection Forms collection Anchors collection Stylesheets collection var allMyLinks = document.links;