Deel I: Client side technology Interactie via DOM en JavaScript Hoorcollege IUW Thema Webdesign 19 november 2014 Christof van Nimwegen

Over laatste werkcollege en opdracht 

Error reporting van de server in het practicum, probeer de volgende workaround: plaats bestand met naam .htaccess in je www-directory met daarin tekst "php_flag display_errors on"



Video probleem: alleen vanaf (deze) server wil Firefox het niet. We checken dit met Chrome of Opera

2

JavaScript    

 



WWW was geheel statisch, interactie was alleen volgen van link Javascript maakt interactie binnen webpagina mogelijk Javascript is quick and dirty ontstaan, steeds serieuzer geworden Betrekkelijk eenvoudige scripting taal  syntaxis lijkt op veel andere talen  pragmatisch, met beperkingen  Net als PHP geïnterpreteerd, niet gecompileerd Aanvankelijk vaak niet-functioneel ingezet Javascript Is NIET Java Ga zelf met JavaScript aan de slag!  W3Schools tutorial (http://www.w3schools.com/)  Veel handige resources (voorbeelden, naslag)

3

JS vandaag: In Web API, Mashup, AJAX  

AJAX: Asynchronous JAvaScript and XML Paginas hoeven niet geheel ververst te worden: een applicatie die in pagina draait



(Web) API (application programming interface): Definitie van hoe een webapplicatie door andere partijen benaderd kan worden



Mashup: Combineren van allerlei bronnen (bv. API’s) in een webpagina 4

Javascript: wat kan het?   





Client side (van oudsher) Reageren op Events Event voorbeelden:  Pagina klaar met laden  Clicks, mouseovers, mousedowns, onsubmit, etc.  Data validatie Reageren:  Content veranderen, verangen (tekst, afbeeldingen, tabellen, etc.)  Geluid spelen, popups, dialogen  Systeem informatie tonen (bv. Tijd), rekenen  Nog veel meer!.............……. Javascript werd pas echt interessant toen DOM wijder verbreid werd 5

Wat zit er in JavaScript 

Variabelen en expressies   





typen: Number, String, Array (index, length), Object etc. booleans: true/false gebruikelijke operaties op constanten en variabelen assignment: toekenning waarde aan variabele

Statements conditional statement (if)  loop (while, for) Functies en objecten: bewerkingen  Ingebouwd in JavaScript, bv.:  alert() - laat alertbox zien  Number() – converteert string naar number (zien we in vb. later)  zelfgedefinieerd Commentaar  essentieel voor begrijpen door anderen (en jezelf) 





6

Waar laten we het? 

In principe overal in HTML toegestaan Niet zo elegant



Goede oplossing: in aparte file



Script wordt uitgevoerd zodra browser script element tegenkomt

Als het moet…

Beter

7

Simpel Javascript (nog geen DOM) 

Laat datum zien

8

Simpel Javascript (nog geen DOM) 

Laat alert box zien

9

Timeout: Nu even opzij naar DOM

HTML DOM (Document Object Model) definieert de objecten en eigenschappen van alle HTML elementen, en de methoden om toegang tot ze te krijgen

10

DOM: Document Object Model 







Kwam een paar jaar na JavaScript, wordt erg veel gebruikt meestal, in combinatie met JavaScript De manier waarop HTML elementen in een pagina zich tot elkaar, en tot het document zelf verhouden Zorgt dat programmas en scripts op dynamische wijze toegang krijgen om inhoud, structuur of style van een document te veranderen Platform onafhankelijk

11

Document Object Model 

W3C standaard sinds 1998 (level 1)  lijkt sterk op elementboom XML



Vooral veel gebruikt in Web 2.0



DOM scripting  is gebaseerd op interactie van objecten  in principe bekend van imperatief programmeren



Een DOM object heeft  properties (eigenschappen met een bepaalde waarde)  methoden (verzameling bewerkingen)

12

Objecten (geheugensteuntje) 

Voorbeeld  een kat is een object  kleur is een property (eigenschap) die katten hebben met in dit geval een waarde (grijs)  eten is een methode van die de kat gebruikt



Eigenschappen en acties van objecten worden altijd aangeroepen met een punt stel o is een object, dan:  is o.p de waarde van de property p  voer je de methode m uit met de aanroep o.m()



voorbeeld  kat.kleur heeft waarde ‘grijs’  kat.eten(): de kat voert de bewerking ‘eten’ uit  kat.eten(‘muis’)  kat.eten(‘blik’) 13

DOM boom 

Dit was de HTML boom tot nu toe html

head

title

body

h1

p

p

b

a

…

…

…

DOM eigenlijk…: 

DOM definieert deze uitgebreider dan voorheen html

head

title

text

text

body

h1

text

p

p

b

text

text

text

a

text

attr

text

DOM Nodes: knopen 

   

In een “node tree” wordt de hoogste node de “root” genoemd Elke knoop heeft precies 1 “parent” (behalve de bovenste dus) Een knoop kan meerdere “children” hebben Een node zonder children is een “leaf” Nodes met dezelfde parent zijn “siblings”

16

Vb. DOM/Javascript: getElementById 

  

Stel dit is de tabel (mijntable) waarmee JS iets mee moet gaan doen via een functie, bv. “change” :

In JS maak ik de functie “change”. Ik maak variabele “table”: JS benadert via getElementById “mijntable”: Ik definieer de opdracht: wat gaat er gebeuren met de table

17

HTML atributes: van event naar actie 

HTML events     



load: pagina geheel geladen click: muisklik op element mouseover: muis beweegt over element submit: formulier gesubmit reset: formulier gereset

HTML attributen “on” + eventnaam 

waarde: functie (scriptcomponent) die uitgevoerd wordt bij event



voorbeeld: