DHTML 1 Innehll DHTML Varje del fr sig
- Slides: 13
DHTML 1
Innehåll • DHTML • Varje del för sig 2
DHTML • • Innehåll: Text, bild, ljud, film, kombination Struktur: HTML, XML Stil/design: CSS Funktion/dynamik: Java. Script + OM • Olika paradigmer, man kombinera dessa på många olika sätt, se upp för kaos! 3
Varje del för sig • Vi ska isolera varje av de 4 delarna och arbeta mycket strikt • När man väl lärt sig denna teknik blir det enormt mycket lättare att utveckla • Författare, designers, programmerare kan arbeta mer isolerat • Tre exempel direkt: sämst, dålig, bäst --> 4
Varje del för sig 3 exempel • Gör ett DHTMLprogram: – En knapp, svart bakgrund, vit text – När man klickar på knappen: • Knappen röd bakgrund • Dialogruta visas • Knappen svart bakgrund 5
Varje del för sig Exempel 1: Sämst, in-line <html> <head> <title>Exempel 1</title> </head> <body> <h 1>Det här är exempel 1</h 1> <input type="button" value="tryck mig" style="color: white; background: black" onmousedown= "this. style. background='red'; window. alert('Du klarade det!'); this. style. background='black'"> </input> </body> </html> 6
Varje del för sig Exempel 1: Sämst, in-line, varför sämst? • Innehåll, stil, funktion – Allt ligger inline blandat, rörigt – Ingen återanvändning av någon del – Svårt att förändra stora dokument • Stil sätts i Java. Script • ” och ’ tecken till förbannelse : -) • Fungerar inte bra i XHTML 7
Varje del för sig Exempel 2: Dåligt, in-doc <html> <head> <title>Exempel 2</title> <style>. is 1 {color: white; background: black}. is 2 {color: white; background: red} </style> <script> function x() { document. get. Element. By. Id('i'). class. Name='is 2'; window. alert('Du klarade det!'); document. get. Element. By. Id('i'). class. Name='is 1'; } </script> </head> 8
Varje del för sig Exempel 2: Dåligt, in-doc <body> <h 1>Det här är exempel 2</h 1> <input type="button" value="tryck mig" id="i" class="is 1"> </input> <script> set. Event. By. Id('i', 'click', x); </script> </body> </html> Definitionen av den här egna funktionen finns inte med av utrymmesskäl, se Tips för Uppgift 3 c 9
Varje del för sig Exempel 2: Dålig: in-doc, varför dåligt? • Innehåll, stil, funktion – Allt ligger inte lika blandat men fortfarande rörigt – Ingen återanvändning mellan dokument – Svårt att förändra stora webplatser • Fungerar inte bra i XHTML 10
Varje del för sig Exempel 3: Bäst, out-doc (separata filer) link etablerar länkar till externa dokument, rel = Filen exempel 3. html: relationship mellan elementet och länkat dokumentet <html> <head> <title>Exempel 3</title> <link href="exempel 3. css" rel="stylesheet" type="text/css"/> </head> <body> <h 1>Det här är exempel 3</h 1> <input type="button" value="tryck mig" id="i" class="is 1"> </input> <script type="text/javascript" src="exempel 3. js"></script> </body> </html> 11
Varje del för sig Exempel 3: Bäst, out-doc (separata filer) Filen exempel 3. css: . is 1 { color: white; background: black; }. is 2 { color: white; background: red; } Filen exempel 3. js: function x() { document. get. Element. By. Id('i'). class. Name='is 2'; window. alert('Du klarade det!'); document. get. Element. By. Id('i'). class. Name='is 1'; } set. Event. By. Id('i', 'click', x); 12
Varje del för sig Exempel 3: Bäst, out-doc (separata filer), varför bäst? • Innehåll, stil, funktion – Allt ligger inte blandat --> ordning – Återanvändning mellan dokument – Lätt att förändra stora webplatser • Stil sätts inte direkt i Java. Script, man byter klass-namnet • Fungerar direkt i XHTML 13
