1 / 49

Client side representation

Client side representation. Webtechnologie. Lennart Herlaar. Client side representation. Style sheets, CSS. Webtechnologie. Lennart Herlaar. Box model revisited. Box sizing 50% + 50% = 100% ?. .foo {box-sizing: border-box; width: 50%; border: 1em ridge red;}.

brede
Download Presentation

Client side representation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Client side representation Webtechnologie Lennart Herlaar

  2. Client side representation Style sheets, CSS Webtechnologie Lennart Herlaar

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

  4. Box model revisited • Collapsing margins • Top en bottom margins schuivenineenvoorunstyledelementen • Dit is ookwat je meestalzouverwachten • Bijvoorbeeld <p> na <p>, <p> binnen <li> li {background: #FB8; margin: 2px;} p {margin: 10px;}

  5. Box model revisited • Maar… <div class="foo"> <h1>Collapsing margins</h1> <p>What's happening here?</p> </div> .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 • Enormeaantallen properties en values • z-index, visibility, overflow, ... • Bepaalde properties vooralzinvol met JavaScript • Browser support minder eenduidigdan HTML • Graceful degradation / Progressive enhancement • CSS3 (en HTML5) leer je alleen door tedoen! • W3Schools tutorials • HTML5 + CSS3 Showcases • CSSZenGarden

  7. Client side scripting Webtechnologie Lennart Herlaar

  8. Inhoud • JavaScript • Document Object Model • Event model • jQuery

  9. We gaan hard! • 4 talen in 4 weken, allemaaleeneigen syntax • HTML (XHTML, HTML5, XML) • CSS • JavaScript • PHP • En verder: DTDs, jQuery, regular expressions • In 220 uurgeen expert op aldezegebieden • Hoofdlijnen, pragmatischeinsteek • Zelfdoen "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." – EdsgerW. Dijkstra

  10. Client side scripting revisited • Client side scripts draaienin de browser • De scripts zijnonderdeel van de opgevraagdepagina • Source code leesbaar • "Actief" zolang de paginagetoondwordt • In essentiegericht op het oplossen van tekortkomingen in protocol en presentatie • Page based request, ontbreken van state • JavaScript (eenheletijdniets) VBScript ?

  11. JavaScript • Ontwikkeld door Netscape in 1995 • Oorspronkelijk Mocha, toenLiveScript • Uiteindelijk JavaScript • "Het lijkt op Java" ? • Java was populair • Sinds 1997 gestandaardiseerdalsECMAScript • Implementatiesvormendialectendaarvan • 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 • Eenvoudigeanimaties, 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 • Belangrijkerolbinnen HTML5 • Beterestandaardisatie en browser support • Fat clients • Steeds meertoepassingenbuiten 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 • Zwakgetypeerd, dynamisch

  15. Prototype gebaseerd • Objects maar geen classes • Een object is eenlijstproperty:valueparen • Associative array, hash • Functieszijnbeschikbaar • Binnen objects wordendit methods • Objectenaanmaken • Uit het niets, met eenlijstproperty:valueparen • Op basis van eenfunctie(object constructor) • Klonen van een prototype

  16. Prototype gebaseerd • Stiekemallemaalhetzelfde • De link tussenkloon en prototype blijftbestaan • Wijziging van prototype leidt tot wijziging van kloon • Prototype chain, delegation • Object staataan de basis van alleobjecten myFirstObject = {myFirstProperty: 1, myNextProperty: 'Hi'}; myFirstObject = new Object(); myFirstObject.myFirstProperty = 1; myFirstObject.myNextProperty = 'Hi'; alert(myFirstObject.myNextProperty);

  17. Objection, your honor! myFirstObject= new Object(); myFirstObject.myFirstProperty= 1; myFirstObject.myNextProperty= 'Hi'; myNextObject= myFirstObject; myNextObject.myNextProperty = 'Hello'; alert(myFirstObject.myNextProperty); Function MyObject() { this.myFirstProperty= 1; this.myNextProperty= 'Hi'; } myFirstObject= new MyObject(); myNextObject= new MyObject(); 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 1st 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'; varprivateProperty= 42; this.getPrivate = function() { alert(privateProperty); } } myFirstObject= new MyObject(); alert(myFirstObject.myFirstProperty); alert(myFirstObject.privateProperty); myFirstObject.getPrivate();

  26. Zwakgetypeerd, dynamisch • Nietnodigvariabelen of properties tedeclareren • Type wordt "at runtime" bepaald, duck typing • Automatische type conversion • Functieszijn 1st class citizens • Functies en properties kunnendynamischaanobjectentoegevoegdworden • Functies met mogelijkvariabelaantal parameters • Polymorfie • Nesting van functiedefinities, closures

  27. Type conversion / casting • == versus === • Waarde • Waardeen 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, enkeleobjecten • Java is classbased • Java is static en sterkgetypeerd • Java is gecompileerd(bytecode) • Java is geen scripting taal

  29. Business as usual • Laat je nietintimideren • De geavanceerdezakenkom je nauwelijkstegen • De meeste scripts zijndaarvoorniet complex genoeg • Typischenkele tot enkeletientallen regels code • Wederom: pragmatischeinsteek • Ookveelherkenbarezaken

  30. Herkenbarezaken? • Globale en lokale variabelen • Globaaltenzijgedeclareerd met var • Functie scope in plaats van block scope • Verdergebruikelijke scoping en shadowing • Gebruikelijketypen • string, character, integer, float, boolean, array • Maar ook: function, object, undefined, null, regexp • Case sensitivity • Geen de-allocatie van variabelennodig

  31. Herkenbarezaken? • Gebruikelijkecontrol structures • if else, while, for, do while, switch • Gebruikelijke operators • + - * / = += -= ++ -- == != < > <= >= && || • Call-by-value parameter passing • Behalve arrays en objecten • Statement termination met ; • Nietverplicht, maar doe mijeenplezier… • Commentaar met /* */ of //

  32. Starting up • Gebruik de error console • JavaScript heeftallerlei issues • Cross-browser support • Beschikbaarheid (noscript) • Toegankelijkheid • Security • Draaien in een sandbox • En tochgebruiken we het…

  33. Gebruik in eenwebpagina • Source code in de webpagina • <body> of <head>;juiste "timing" • Source code in een extern bestand; scheiding • Link naar het bestand in <head> <head><script type="text/javascript"> function displayDate() {document.getElementById("demo").innerHTML=Date(); } </script></head> Pas op! Officieel "application/javascript". Maar: browser issues… Weglaten? <head> <script type="text/javascript" src="myjs.js"></script> </head>

  34. Hoe lang nog? <h1>My First Script</h1> <p> <script type="text/javascript"> 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"); </script> </p>

  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); varmylist2 = new Array(4); varmylist3 = [1, 2, , "four"]; varmulti1 = [ [ 1], [ 3, 4, 5] ]; var x = multi1.length + multi1[0].length; var sum = 0; for (vari in mylist1) { sum += mylist1[i]; }

  36. Prototype inheritance revisited • Maar dandusook… • 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 function printAllMembers(obj) { var str = ''; for (var memb in obj) str += memb + ' = ' + obj[memb] + '\n'; return str; } alert(printAllMembers(myFirstSubObject)); • 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);

  38. Binding aan het document • alert op zich niet zo interessant... • Document object • document.writeln • document.getElementById • Functies gekoppeld aan events <button onclick="playPause()"> Play/Pause </button>

  39. Client side scripting Document Object Model 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 bijbehorendeeigenschappen (properties) • De methodenomzetebenaderen (methods, API) • Geefteen W3C-gestandaardiseerde manierom de HTML boomstructuurtemanipuleren • Veelal op basis van events

  41. DOM revisited • De boom is uitgebreiderdan tot nu toe aangenomen <html> <head> <title>…</title> </head> <body> <h1>…</h1> <p> <b>…</b> </p> <p> <a>…</a> </p> </body> </html> html head body title h1 p p b a

  42. DOM revisited • Eigenlijk… <html> <head> <title>…</title> </head> <body> <h1>…</h1> <p> <b>…</b> </p> <p> <a>…</a> </p> </body> </html> html head body title h1 p p text text text b text text a attr text text text

  43. Door de bomen het bos… <!DOCTYPE html> <html> <head> <title>Sample page</title> </head> <body> <h1>Sample page</h1> <p>This is a <a href="demo.html">simple</a> sample.</p> <!-- this is a comment --> </body> </html>

  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 toenwerd het eenbeetjestil… • 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 bijbehorendeeigenschappen (properties) • De methodenomzetebenaderen (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;

More Related