Interactie: Document Object Model en JavaScript. Hoorcollege Webdesign 7 23 mei 2014 Christof van Nimwegen

Maat: px

Weergave met pagina beginnen:

Download "Interactie: Document Object Model en JavaScript. Hoorcollege Webdesign 7 23 mei 2014 Christof van Nimwegen"

Alexander van der Pol
8 jaren geleden
Aantal bezoeken:

1 Interactie: Document Object Model en JavaScript Hoorcollege Webdesign 7 23 mei 2014 Christof van Nimwegen

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 programmeertaal syntaxis lijkt op veel andere talen pragmatisch, met beperkingen geïnterpreteerd, niet gecompileerd waarschuwing: JavaScript is zeer tolerant voor slordig programmeerwerk. Veel libraries online te vinden Aanvankelijk vaak niet-functioneel ingezet Javascript Is NIET Java Ga zelf met JavaScript aan de slag! W3Schools tutorial ( Veel handige resources (voorbeelden, naslag) Bekijk het op sites 2

gecompileerd waarschuwing: JavaScript is zeer tolerant voor slordig programmeerwerk.

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 XML HttpRequest DOM object om XML-file mee te lezen verversen data op webpagina belangrijk in AJAX 3

een webapplicatie door andere partijen benaderd kan worden Mashup: Combineren van allerlei bronnen (bv.

4 Javascript: wat kan het? Client side (van oudsher, en in deze cursus) 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 4

Clicks, mouseovers, mousedowns, onsubmit, etc.

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

conditional statement (if) loop (while, for) Functies en objecten: bewerkingen Ingebouwd in JavaScript, bv.

6 Waar laten we het? In principe overal in HTML toegestaan Goede oplossing: in aparte file Script wordt uitgevoerd zodra browser script element tegenkomt Niet zo elegant Als het moet Best 6

7 Simpel Javascript (nog geen DOM) Laat datum zien 7

8 Simpel Javascript (nog geen DOM) Laat alert box zien 8

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 9

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 10

en tot het document zelf verhouden Zorgt dat programmas en scripts op dynamische wijze

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

0 DOM scripting is gebaseerd op interactie van objecten in principe bekend van

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

aangeroepen met een punt stel o is een object, dan: is o.

13 DOM boom Dit was de HTML boom tot nu toe html head body title h1 p p <html> <head> <title> </title> </head> <body> <h1> </h1> <p> <b> </b> </p> <p> <a> </a> </p> </body> </html> b a

14 DOM eigenlijk : DOM definieert deze uitgebreider dan voorheen html head body title h1 p p text text text b text text a attr text text text

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

bovenste dus) Een knoop kan meerdere children hebben Een node

16 Parents, Children, bv: firstchild, lastchild Als er in een object een ander object zit waarvan een eigenschap opgevraagd moet worden, of als je een functie ervan wil uitvoeren, moeten alle voorgaande objecten genoemd met een punt ertussen. document.body.firstchild document.body.lastchild 16

je een functie ervan wil uitvoeren, moeten alle voorgaande objecten

17 Parents, Children, bv: Siblings document.body.firstchild.nextsibling 17

18 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>  </body> </html>

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

change : In JS maak ik de functie change.

20 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: <input type="submit" onclick="change();" value="extra rij > bij klikken op deze button wordt functie change uitgevoerd 20

on + eventnaam waarde: functie (scriptcomponent) die uitgevoerd wordt bij event voorbeeld: <input

21 DOM: Element (Tabel) veranderen Javascript HTML: Event 21

22 Belangrijke DOM methoden en properties Chapman & Chapman, tabel

23 HTML events Chapman & Chapman, tabel

24 Javascript: Niet zo netjes Functie document.write docwrite.html Wel netjes: Script in externe file Niet netjes: script niet op juiste plaats content zit niet in pagina (accessibility, gebruikers zonder JavaScript) 24

25 Javascript: Nieuw element invoegen maak element h = document.createelement( h1 ); maak tekstnode t = document.createtextnode( Webdesign ); voeg tekstnode aan element toe h.appendchild(t); zoek het gewenste parent-element in documentboom body = document.getelementsbytagname("body")[0] plaats element in documentboom body.appendchild(h); addnode.html 25

26 Javascript: Simpele rekenmachine simplecalculator.html Kort programma Weinig nodig qua DOM Illustreert aantal belangrijke begrippen uit JavaScript 26

27 Javascript: Simpele rekenmachine - HTML Input via knoppen met onclick attribuut Roepen functies aan appendtonumber() add() total() clear() Resultaat wordt getoond in <p id= result > 27

Javascript: Simpele rekenmachine Structuur Twee variabelen numberstring: type String (want cijfers worden aan elkaar gelijmd) sum: default nul (gaat natuurlijk

28 Javascript: Simpele rekenmachine Structuur Twee variabelen numberstring: type String (want cijfers worden aan elkaar gelijmd) sum: default nul (gaat natuurlijk veranderen) worden bij laden pagina geïnitialiseerd Vijf functies vier uitgevoerd bij click event changecontent(m) aangeroepen uit andere functie: toont getal op webpagina 28

29 Tonen getal DOM in actie element met id result wordt gezocht wordt aan variabele x toegekend waarde van m wordt in het element geplaatst 29

30 Invoeren getal functie gekoppeld aan nummer-knoppen variabele n bevat corresponderend getal wordt achteraan numberstring geplaatst numberstring wordt in browser getoond 30

31 Optellen numberstring wordt in getal omgezet vervolgens opgeteld bij sum (wordt getoond) numberstring wordt geleegd en klaargezet voor volgende getal 31

32 Totaal berekenen grotendeels hetzelfde als add() sum wordt op 0 gezet 32

33 Alles wissen herstelt startwaarden variabelen toont het getal 0 33

34 Collapsible list turndown.html ook in zip file bron: Chapman & Chapman eenvoudig voorbeeld illustreert samenwerking HTML-CSS-JS Zelf mee experimenteren! 34

35 Richtlijnen voor scripting combineer top-down en bottom-up benaderingen begin top-down te ontwerpen bedenk welke functionaliteit je wilt maak een hoog-niveau ontwerp weeg af hoe HTML, CSS en JavaScript samenwerken graceful degradation separate behaviour from content and structure welke componenten/voorbeelden zijn er? 35

36 Bottom-up ontwerp HTML speciaal: welke id en class waarden heb je nodig, op welk elementen maak CSS speciaal: tonen/verbergen elementen laatste stap: JavaScript plan welke functie(s) je nodig hebt bouw ze stapsgewijs op zorg altijd dat je code werkt voor je verder gaat kom je in de problemen, dan is dat vaak een reden om het hoog-niveau ontwerp te herzien 36

37 Waarschuwingen JavaScript is een geïnterpreteerde programmeertaal maakt debugging lastig een script met fouten wordt niet uitgevoerd Firebug, andere tools Professioneel scripten is een vak op zich rekening houden met allerlei browsers, versies etc. kennis libraries, toolboxen, frameworks security meer hierover bij vak Webtechnologie 37

38 JavaScript in Opdracht 2 Voorbeelden uit dit college: cht/scripts.zip style sheet switch: cht/style-switch2.zip van Chapman & Chapman: es/7.html Beter goed gejat dan slecht bedacht uiteraard onder bronvermelding 38

Vergelijkbare documenten

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

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