Client side representation 1 Webtechnologie Lennart Herlaar.

Slides:



Advertisements
Verwante presentaties
The stock market will go up De beurswaarden zullen stijgen YESNO JA NEEN Is Jefken a good person ? Is Jefken een goed mens ? YES NO JA NEEN Is Lonny a.
Advertisements

Zelf objecten maken in VBA Ynte Jan Kuindersma, BIRD Automation Nationale Officedag 2009 EDE, 14 Oktober 2009.
Inleiding: hoe media worden Rick Dolphijn. Paranoimia…
Order placed Should be Nederland Netherlands can be removed here, just Scancorner Instead of ‘undefined’ -> ‘geen’ New logo should be displayed here. COUNTS.
Een alternatief voorstel Naar aanleiding van bestudering van de IAASB voorstellen denkt de NBA na over een alternatief. Dit alternatief zal 26 september.
Deltion College Engels C1 Gesprekken voeren [Edu/002]/ subvaardigheid lezen thema: Order, order…. can-do : kan een bijeenkomst voorzitten © Anne Beeker.
Stateful web, developments, trends 1 Webtechnologie Lennart Herlaar.
JQuery en ASP.NET Bart De Meyer.
Conditional Clauses If-zinnen.
1 Co-Design at Chess-iT Guus Bosman. 2 Afstuderen bij Chess Net.Footworks tot augustus 2003 Afstuderen augustus 2003 tot maart 2004 Chess full-time vanaf.
ETHOS PROJECT: PROGRESS Follow-up & feedback end of year 1.
Past Simple – Past Continuous
Teams on the frontline Geert Stroobant De Heide - Balans
Programmeren in Java met BlueJ
OOP met Java Sessie 1.
Accessible Instructional Materials. § Discussion: Timely access to appropriate and accessible instructional materials is an inherent component.
Nieuwe wegen in ontwerpen met CAD
Voor VBA programmeurs Maurice de Beijer.  Maurice de Beijer.  The Problem Solver.  Visual Basic MVP.  Blog: theproblemsolver/default.aspxhttp://msmvps.com/blogs/
OOS Object geOrienteerd Software-ontwerp - 4 Codeerperikelen Singleton Specificeren Scheiding GUI en Domein Facade.
zaterdag 19 juli 2014 Saturday, 19 July 2014 I see what you don’t see I come from another galaxy My earthal life was not the intention I was meant.
Instructie grammatica
AAHA (voor intern gebruik)
Omgevingen zijn dan geïmplementeerd als Symbol Tables. Symbol Table mapt een symbool met een Binding Meerdere noties van binding –Meerdere manieren te.
SQL injections en meer... PERU. web application vulnerabilities Cross Site Scripting (21.5%) SQL Injection (14%) PHP includes (9.5%) Buffer overflows.
Modula vs Java MODULE Show; CONST PI = ; TYPE PointRc = RECORD x,y : INTEGER; speed : REAL; angle : REAL; END; VAR a,b : PointRc; BEGIN.
Programming for Linguists An Introduction to Python 29/11/2012.
Server side scripting 1 Webtechnologie Lennart Herlaar.
Client side scripting 1 Webtechnologie Lennart Herlaar.
Directe rede  Indirecte rede
en ‘If-zinnen’ (klik hier als je meteen naar If-zinnen wilt.)
1/1/ / faculty of Computer Science eindhoven university of technology 5JJ20:Computerarchitectuur 2M200:Inleiding Computersystemen Sessie 7(2): Vertalen.
Algoritmiek Arrays: wat zijn dat en wat kun je ermee? Loops: hoe hou je ze in bedwang? Hoorcollege 6 - Ma. 9 okt L.M. Bosveld-de Smet.
WinFX Overview Martin Tirion Senior Consultant Microsoft Services.
Webmaster Training: CSS CSS2 & XHTML By Frederik Van Outryve.
Hoorcollege 8 Game object structuren. Arrays in games Grid-gebaseerd speelveld (zoals Tetris) Lijst van spelers Lijst van inventory items Lijst van alle.
Hoorcollege 7 Collections, arrays. Programma ‘Snowflakes’ Sneeuwvlok object.
De digitale coach Het verbeteren van een plan van aanpak Steven Nijhuis, coördinator projecten FNT Deze presentatie staat op:
Hibernate Object relational mapping
zondag 3 augustus 2014 Click Klik Sunday, 03 August 2014.
Wolter Kaper - AJAX en Javascript via Rails Deel 1 en 2.
Algoritmiek Strings & Stringmanipulaties; Controle Structuren; Floating-point notation. Hoorcollege 4 - Ma. 25 sept L.M. Bosveld-de Smet.
Tussentoets Digitale Techniek. 1 november 2001, 11:00 tot 13:00 uur. Opmerkingen: 1. Als u een gemiddeld huiswerkcijfer hebt gehaald van zes (6) of hoger,
JAVA1 H 22. COLLECTIONS FRAMEWORK. 1. INLEIDING. Collections framework Is een verzameling van data structuren, interfaces en algoritmen Meest voorkomende.
Visual Basic.Net - Overzicht
Vervolg C Hogeschool van Utrecht / Institute for Computer, Communication and Media Technology 1 Onderwerpen voor vandaag GUI  command line redirection.
Client side representation
Hoofdstuk 2 Java. Soorten Java-programma’s nJava Applet programma “leeft” op een WWW-pagina nJava Application programma heeft een eigen window nJavascript.
Simple en continuous tenses Met of zonder –ing. Alle tijden kun je in het Engels met of zonder –ing-form maken: I sleep… I slept… I had slept… I will sleep…
Deltion College Engels B1 Gesprekken voeren [Edu/005] thema: applying for a job can-do : kan een eenvoudig sollicitatiegesprek voeren © Anne Beeker Alle.
Deltion College Engels C1 Gesprekken voeren [Edu/004]/ thema: There are lies, damned lies and statistics... can-do : kan complexe informatie en adviezen.
Deltion College Engels B1 En Spreken/Presentaties [Edu/007] Thema: Soap(s) can-do : kan met enig detail verslag doen van ervaringen, in dit geval, rapporteren.
Deltion College Engels En Projectopdracht [Edu/001] thema: research without borders can-do/gesprekken voeren : 1. kan eenvoudige feitelijke informatie.
Deltion College Engels C1 Spreken/Presentaties [Edu/006] thema ‘I hope to convince you of… ‘ can-do : kan een standpunt uiteenzetten voor een publiek van.
Deltion College Engels B1 Schrijven [Edu/004]/ subvaardigheid lezen thema: reporting a theft can-do : kan formulieren waarin meer informatie gevraagd wordt,
XForms TU Delft Library Digitale Productontwikkeling Egbert Gramsbergen.
Web Applicaties Bouwen met Visual Studio .NET
All right 1thv unit 7 gr 2.1 en 2.2.
 vertaal:  Ik ga elke dag naar de universiteit  Ik ga naar de universiteit in London.
Rational Unified Process RUP Jef Bergsma. Iterations –Inception –Elaboration –Construction –Transition De kernbegrippen (Phases)
© Shopping 2020 TITLE Date Subtitle Logo Gastheer Logo Voorzitter.
Hoofdstuk 5 Interactie. Controls Form Label Button Label TextBox.
EML en IMS Learning Design
De evolutie van JavaScript
In samenwerking met HowITsDone JSF versus AngularJS client-server 2.0.
C++ C++ als een verbetering van C Abstracte datatypen met classes Constructoren en destructoren Subklassen binding van functies 1.
The beast has been released! 4 arcade-style games Interviews with famous people in the game industry Develop browsers games for any device (phone, tablet,
Het geheim van Linked Data Marcel ReuversGeonovum CB-NL 20 november 2014.
Computertechniek Hogeschool van Utrecht / Institute for Computer, Communication and Media Technology 1 C programmeren voor niet-C programmeurs les 2 definitie.
Algoritmiek Class Hierarchies, Inheritance. Hoorcollege 12 - Ma. 20 nov L.M. Bosveld-de Smet.
1 OMI Modelleren van content. 2 Vocabulary Content “gevangen” in begrippenapparaat: Vocabulary: lijst met termen nauwelijks semantiek Ontology:
Transcript van de presentatie:

Client side representation 1 Webtechnologie Lennart Herlaar

Client side representation 2 Webtechnologie Lennart Herlaar

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)

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;}

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;}

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

Client side scripting 7 Webtechnologie Lennart Herlaar

Inhoud JavaScript Document Object Model Event model jQuery

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

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 ?

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

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…

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

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

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

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);

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);

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);

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));

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));

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

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();

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);

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));

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();

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

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);

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

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

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

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 //

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…

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?

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");

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]; }

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());

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));

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

Client side scripting 39 Webtechnologie Lennart Herlaar

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

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

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

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

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

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

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

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)

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

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