Præsentation 2: Opsummering af Client-Side Teknologier del 1 Internetteknologi 2 (ITNET2)

Præsentationer af emnet: "Præsentation 2: Opsummering af Client-Side Teknologier del 1 Internetteknologi 2 (ITNET2)"— Præsentationens transcript:

1 Præsentation 2: Opsummering af Client-Side Teknologier del 1 Internetteknologi 2 (ITNET2)

2 Ingeniørhøjskolen i Århus Slide 2 af 117 Indhold i denne præsentation En hvirvelvind introduktion til: –Internettets historie –HTML/XHTML –CSS –JavaScript –DHTML

3 Ingeniørhøjskolen i Århus Slide 3 af 117 Internettets historie ARPAnet –Forfader til vor tids Internet udviklet i slutningen 1960’erne af ARPA (Advanced Research Projects Agency of DOD) –Computersystemer fra et dusin universiteter og offentlige institutioner med 56KB forbindelser –Deling af computerressourcer var den primære drivkraft Transmission Control Protocol (TCP) UNIX udvikles 1971 – 76 –FTP og Ethernet kommer også frem her USENET News og elektroniske opslagstavler DNS – navneservice introduceres I 1984 Internet Engineering Taskforce etableres I 1989

4 Ingeniørhøjskolen i Århus Slide 4 af 117 World Wide Web – historien bag WWW –Introduceret 1990 af Tim Berners-Lee –Gennembrud for almindelige brugeres anvendelse af Internettet I 1991 Et globalt hypermediesystem på Internet Integration af mange eksisterende Internet services: –Gopher, FTP, WAIS, News, MAIL Tekstformat: HTML – Hyper Text Markup Language En protokol (ovenpå TCP/IP): HTTP: HyperText Transfer Protocol Navne konventioner: URL = Uniform Ressource Locator –eks: http://www.jyskebank.dk (mere om dette senere)http://www.jyskebank.dk Client/Server kommunikation på fælles netværksstandard og standardiserede dataformater En ”browser” til at fortolke og renderer HTML til et ”menneske venligt” format

5 Ingeniørhøjskolen i Århus Slide 5 af 117 World Wide Web Consortium W3C –Oprettet oktober 1994 for at føre WWW ind i fremtiden og udnytte det fulde potentiale –Styres af en Chairman, en Director og et sekretariat –Herunder en række forskellige boards (strategiske, tekniske, forretningsmæssige og juridiske) –W3C sikrer konsensus omkring standardiseringsarbejdet mellem W3C konsortiets deltagere (som f.eks. Microsoft, SUN, IBM, Oracle m.f.) omkring standarder på WWW f.eks. XML, WAP, SOAP, XHTML

6 Ingeniørhøjskolen i Århus Slide 6 af 117 Internettets protokoller TCP/IP protokol familien er grundstenen bag Internettet Alt kommunikation på Internettet er baseret på TCP/IP og de protokoller der bygger ovenpå Vi kender bl.a. til: –SMTP til mail –FTP til fil overførsler –HTTP der bruges til browsere –TELNET der bruges til terminal fjernstyring De øvrige bruges også til datakommunikation, men disse ligger uden for dette fag Vi fokuserer på HTTP i dette fag

7 Ingeniørhøjskolen i Århus Slide 7 af 117 Teknologier vi møder HTTP: Hypertext Transfer Protocol HTML – HyperText Markup Language (legacy technology) XHTML – eXtended HyperText Markup Language XSL – eXtensible Stylesheet Language CSS – Cascading Style Sheets DOM – Document Object Model DHTML – Dynamic HTML Client side – JavaScript Binære klient teknologier: ActiveX, Applets Server side scripting –JSP: Java Server Pages (SUN) –ASP: Active Server Pages (Microsoft) – ASP.NET ny teknologi –PHP, CGI Script sprogene danner bro til binære komponenter – f.eks. skrevet i Perl, Python, C eller C++, men også andre sprog via COM: Delphi, VB m.f. Servlets og JavaBeans er et alternativ, ligesom ASP.NET er det

8 Grundlæggende HTML & XHTML

9 Ingeniørhøjskolen i Århus Slide 9 af 117 Ingredienser i en Webapplikation Grafik (JPEG og GIF) HTML / XHTML: til definere indhold (og form)

10 Ingeniørhøjskolen i Århus Slide 10 af 117 HTML historie 1992: HTML 1.0, Tim-Berners Lee oprindelige forslag 1993: HTML+, diverse forbedringer, primært layout 1994: HTML 2.0, ny standard med en række forbedringer 1995: Flere “ikke standard” Netscape features 1995: Browser War: Netscape og Explorer ikke kompatible 1996: HTML 3.2, ny standard, slut på Browser War (næsten) 1997: HTML 4.0, CSS stylesheets introducereds 1999: HTML 4.01, den “sidste” HTML version 2000: XHTML 1.0, XML version af HTML 4.01 2001: XHTML 1.1, diverse ændringer 2002: XHTML 2.0, simpliciferet og generaliseret Andre markup: XML, WML, cHTML, HDML og mange flere

11 Ingeniørhøjskolen i Århus Slide 11 af 117 HTML vs XHTML Historisk har det været farligt at bruge for avanceret HTML funktionalitet –God praksis har været at designe til 3.0 Browsere –… og både til Microsoft og Netscape Det er ikke strengt nødvendigt mere –XHTML er en videreudvikling af HTML Kombination af XML og HTML Alle elementer af HTML 4.01 og XML syntaks (Well Formed) Hvorfor? For meget ”dårlig HTML” Det kræver mange ressourcer at renderer ”dårlig HTML” Problem for Mobiltelefoner og Set-Top bokse Derfor lavede de WAP/WML – bedre med XHTML Virker først fra Internet Explorer 5.5 Så pas på! –Se mere på http://www.w3schools.com/xhtml

12 Ingeniørhøjskolen i Århus Slide 12 af 117 HTML vs XHTML forskelle De vigtigste forskelle er: –Nu baseret på XML og derfor: –XHTML skal være korrekt nested (indlejret) –XHTML dokumenter skal være well-formed –Tag og attribut navne skal være lowercase –Alle XHTML elementer skal være lukkede –Attribut værdier skal være i anførelsestegn –”id” attributten erstatter ”name” attributten –XHTML DTD definerer påkrævede elementer Se detaljer på: –http://www.w3schools.com/xhtml/xhtml_html.asphttp://www.w3schools.com/xhtml/xhtml_html.asp Bemærk: XHTML er en fremtidssikring

13 Ingeniørhøjskolen i Århus Slide 13 af 117 DOCTYPE De 3 Document Type Definitions –DTD specificerer syntaxen af en web side i SGML. –DTD bliver brugt af SGML applikationer, såsom HTML, til at specificere regler der gælder for markup af dokumenter af en bestemt type, inklusiv et sæt af elementer og entitets deklarationer. –XHTML er specificeret af en SGML Document Type Definition også kaldt for en 'DTD'. –En XHTML DTD beskriver i et præcist, computer-læsbart (fortolkbart) sprog en tilladt syntaks af et XHTML markup. Der er p.t. 3 XHTML DTD’er (document types): –STRICT –TRANSITIONAL –FRAMESET

14 Ingeniørhøjskolen i Århus Slide 14 af 117 DOCTYPE II XHTML 1.0 Strict – –Brug denne til rigtig pæn markup, fri for præsentations elementer. Brug Cascading Style Sheets til præsentation. XHTML 1.0 Transitional – –Brug denne når du vil bruge HTML's præsentations elementer (når du altså er doven) og når du vil understøtte browsers der ikke kan fortolke Cascading Style Sheets. XHTML 1.0 Frameset – –Brug denne når du vil anvende HTML Frames til at opdele browseren vindue i flere dele.

15 Ingeniørhøjskolen i Århus Slide 15 af 117 HTML - sådan fungerer rendering 1 HTTP Request (over TCP/IP) GET /request-URI HTTP/version Bruger indtaster adresse i browser: http://www.dr.dk 2 Webserveren modtager requestet: Finder det rette HTML dokument frem fra fil systemet samt billeder m.v. Og sender response 3 En typisk Header kunne se ud som følger: HTTP/1.0 200 OK Server: Netscape-Communications/1.1 Date: Tuesday, 25-Nov-97 01:22:04 GMT Last-modified: Thursday, 20-Nov-97 10:44:53 GMT Content-length: 6372 Content-type: text/html... her følger resten af dokumentet Browseren modtager response: Renderer HTML dokumentet til brugervenlig form (tagregler + CSS) Webserver findes via IP adresse & DNS Lytter på port f.eks. 80

16 Ingeniørhøjskolen i Århus Slide 16 af 110 HTML Example 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Internet and WWW How to Program - Links 11 12 13 14 15 Here are my favorite sites 16 17 Click on a name to go to that page. 18 19 Deitel 20 21 Prentice Hall 22 23 Yahoo! 24 25 USA Today 26 27 28 Text between strong tags will appear bold. Elements placed between paragraph tags will be set apart from other elements on the page with a vertical line before and after it. Linking is accomplished in XHTML with the anchor (a) element. The anchor links to the page that’s value is given by the href attribute. The text between the a tags is the anchor for the link.

17 Cascading Style Sheets (CSS)

18 Ingeniørhøjskolen i Århus Slide 18 af 117 Ingredienser i en Webapplikation Grafik (JPEG og GIF) HTML / XHTML: til indhold of form CSS (Cascading Style Sheets): til at formatere koden i et eksternt stylesheet hvilket giver et ensartet design

19 Ingeniørhøjskolen i Århus Slide 19 af 110 Formål med CSS CSS er en enkel mekanisme til at knytte style information (primært fonte, farver og positionsangivelser) til HTML (og XML) Teknologi til at separere indhold og præsentation fra hinanden (bl.a. STRICT XHTML og XML) … og mindre højtflyvende: til at gøre det lettere at ændre på et design (som en slags template) CSS er en W3C anbefaling: –http://www.w3.org/Style/CSShttp://www.w3.org/Style/CSS

20 Ingeniørhøjskolen i Århus Slide 20 af 110 Brug af CSS i praksis I praksis bruges HTML stadigvæk til størsteparten af præsentationsformateringen, og CSS kun til de ”åbenlyse” fordele – såsom fonte og farver –Men der er naturligvis nogen der bruger dem mere end andre –… og det kan meget hurtigt ændre sig og blive norm

21 Ingeniørhøjskolen i Århus Slide 21 af 110 CSS Syntaks div {color: red; padding-left: 3cm} Selector (tag) Declaration PropertyValue

22 Ingeniørhøjskolen i Århus Slide 22 af 110 3 anvendelser af CSS i HTML Eksternt Stylesheet: Den mest ”afkoblede” måde at gøre det på Style information placeres i separat fil Inline style: Indlejret i HTML tagget Internt stylesheet: div {text-align: right} Indlejret i starten af HTML dokumentet (typisk)

23 Ingeniørhøjskolen i Århus Slide 23 af 110 Inline.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Inline Styles 11 12 13 14 15 This text does not have any style applied to it. 16 17 18 19 20 This text has the 21 font-size style applied to it, making it 20pt. 22 23 24 25 This text has the font-size and 26 color styles applied to it, making it 27 20pt. and blue. 28 29 30 The style attribute specifies the style for an element. Some style properties are font-size and color.

24 Ingeniørhøjskolen i Århus Slide 24 af 110 Declared.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Style Sheets 11 12 13 14 15 em { background-color: #8000ff; 16 color: white } 17 18 h1 { font-family: arial, sans-serif } 19 20 p { font-size: 14pt } 21 22.special { color: blue } 23 24 25 26 Styles placed in the head apply to all elements in the document. A style class named special is created. Style classes inherit the style properties of the style sheet in addition to their own. A class can be used for special formatting needs More style properties include font type (font-family) and background color (background-color). Use the style element to create an embedded CSS.

25 Ingeniørhøjskolen i Århus Slide 25 af 110 Declared.html 27 28 29 30 Deitel & Associates, Inc. 31 32 Deitel & Associates, Inc. is an internationally 33 recognized corporate training and publishing organization 34 specializing in programming languages, Internet/World 35 Wide Web technology and object technology education. 36 Deitel & Associates, Inc. is a member of the World Wide 37 Web Consortium. The company provides courses on Java, 38 C++, Visual Basic, C, Internet and World Wide Web 39 programming, and Object Technology. 40 41 Clients 42 The company's clients include many 43 Fortune 1000 companies, government agencies, 44 branches of the military and business organizations. 45 Through its publishing partnership with Prentice Hall, 46 Deitel & Associates, Inc. publishes leading-edge 47 programming textbooks, professional books, interactive 48 CD-ROM-based multimedia Cyber Classrooms, satellite 49 courses and World Wide Web courses. 50 51 52 The styles associated with the special class are applied to the header and paragraph elements. Notice the styles defined in the CSS are applied to all paragraphs, headers, and bolded text.

26 Ingeniørhøjskolen i Århus Slide 26 af 110 External.htm l 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Linking External Style Sheets 11 <link rel = "stylesheet" type = "text/css" 12 href = "styles.css" /> 13 14 15 16 17 Shopping list for Monday : 18 19 Milk 20 Bread 21 22 White bread 23 Rye bread 24 Whole wheat bread 25 26 27 Rice 28 Potatoes 29 Pizza with mushrooms 30 31 The link element is used to reference an external style sheet. The type attribute defines the MIME type. 4 a { text-decoration: none } 5 6 a:hover { text-decoration: underline; 7 color: red; 8 background-color: #ccffcc } 9 10 li em { color: red; 11 font-weight: bold; 12 background-color: #ffffff } 13 14 ul { margin-left: 2cm } 15 16 ul ul { text-decoration: underline; 17 margin-left:.5cm } Sådan ser det separate dokument ud – der efterfølgende kan linkes til fra XHTML dokumenter

27 Ingeniørhøjskolen i Århus Slide 27 af 110 CSS Positionering Frem for at bruge HTML tabeller til layout kan der anvendes CSS positioning F.eks. Når der køres med STRICT XHTML eller XML Mulige problemstillinger: –HTML design værktøjer understøtter det ikke –Svært for andre at læse –Det generelle problem for adskillelse af form og indhold Kan dog anvendes til at løse specifikke problemstillinger Specielt DHTML folk kan reelt bruge positioning til at lave en interaktivt brugerflade –Alternative teknologier er her f.eks. Flash

28 Ingeniørhøjskolen i Århus Slide 28 af 110 Positioning. html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Absolute Positioning 11 12 13 14 15 <img src = "i.gif" style = "position: absolute; 16 top: 0px; left: 0px; z-index: 1" alt = 17 "First positioned image" /> 18 <p style = "position: absolute; top: 50px; left: 50px; 19 z-index: 3; font-size: 20pt;">Positioned Text 20 <img src = "circle.gif" style = "position: absolute; 21 top: 25px; left: 100px; z-index: 2" alt = 22 "Second positioned image" /> 23 24 25 The position property of the style element allows for positioning of an element. The z-index property allows layering of multiple images.The images are layered such that images with lower z-indexes are placed under images with higher ones. The effect of the z-index property is several images layered on top of one another.

29 Introduktion til JavaScript

30 Ingeniørhøjskolen i Århus Slide 30 af 110 Formål med JavaScript XHTML har ingen dynamiske egenskaber –XHTML opdateres kun i forbindelse med HTTP requests –Få faciliteter i XHTML til at reagere på brugers input Link til andre sider via <a href … Interne link Brug af FORM tags til at lave HTTP forespørgsler INGEN mulighed for at reagere på bruger input udover dette –JavaScript anvendes derfor ofte ”client side” til at skabe dynamik på XHTML sider F.eks. til at validere input (meget typisk) Og i forbindelse med DHTML til at skabe en mere levende brugerflade – f.eks. med Menuer der udvider sig når musen ”hover” over dem Mere om DHTML og event orienterede udvidelser til XHTML senere

31 Ingeniørhøjskolen i Århus Slide 31 af 110 Indgredienser i en Webapplikation DHTML og JS: DOM manipulering ved klik på prik DHTML og JS (XHTML Form): Mulighed for at inddatere data – her brugerspecifik adgang og validere

32 Ingeniørhøjskolen i Århus Slide 32 af 110 welcome.htm Program Output 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 A First Program in JavaScript 11 12 13 <!-- 14 document.writeln( 15 " Welcome to JavaScript Programming! " ); 16 // --> 17 18 19 20 The document object’s writeln method writes a line of XHTML markup in the XHTML document. The script tag indicates to the browser that the text which follows is part of a script.

33 Ingeniørhøjskolen i Århus Slide 33 af 110 Variable Løst typet sprog Typer –Number, Boolean, String, Function, Object Variable erklæres med –var [= ] –Bemærk: ingen type på variablen Scope –Globale og lokale –Som i typiske programmeringssprog –Lokale variable går ud af scope og forsvinder

34 Ingeniørhøjskolen i Århus Slide 34 af 110 Operatorer Aritmetiske +, -, *, /, %, +, +=, … Sammenligninger ==, !=, BEMÆRK BRUG ALDRIG = til sammenligninger Boolske && = AND, || = OR, ! = NOT Strenge Konkatenering af strenge ”alfa”+”beta” = ”alfabeta”

35 Ingeniørhøjskolen i Århus Slide 35 af 110 Kontrolstrukturer De samme som vi kender fra andre programmeringssprog: –If-else if ( ) { … } else { … } –Switch-case switch ( ) { case : … break; … default: … }

36 Ingeniørhøjskolen i Århus Slide 36 af 110 Løkker Også velkendte kontrolstrukturer: –For løkke for (var counter=0; counter<list.length; counter++) { … brug evt. counter til indeksering af array el.lign. } –While løkke while (list.next()) { … } –Do/while løkke (udføres altid mindst én gang) do { … } while { … }

37 Ingeniørhøjskolen i Århus Slide 37 af 110 Funktioner Bruges til: –Strukturering og indkapsling af funktionalitet –Event håndtering (mere ved DHTML) –Eksempel: beregninger –Eksempel: validering af input fra bruger i FORM Erklæres ved: function enAddition (x, y) { var sum = x+y; return(sum); } Kaldes ved: var sumRetur = enAddition(3, 4) ;

38 Ingeniørhøjskolen i Århus Slide 38 af 110 Objekter JavaScript er Objekt baseret –Ikke objekt orienteret! –Det bygger faktisk på en anden objekt teknologi end vi kender fra Java og C++ –Ingen polymorfi –Ingen klasser To typer objekter –Indbyggede – til at lette vores arbejde – en slags API –Selvdefinerede (er ikke noget vi vil gøre meget ud af)

39 Ingeniørhøjskolen i Århus Slide 39 af 110 CharacterProcess ing.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Character Processing Methods 11 12 13 <!-- 14 var s = "ZEBRA"; 15 var s2 = "AbCdEfG"; 16 17 document.writeln( " Character at index 0 in '" + 18 s + "' is " + s.charAt( 0 ) ); 19 document.writeln( " Character code at index 0 in '" 20 + s + "' is " + s.charCodeAt( 0 ) + " " ); 21 22 document.writeln( " '" + 23 String.fromCharCode( 87, 79, 82, 68 ) + 24 "' contains character codes 87, 79, 82 and 68 " ) 25 26 document.writeln( " '" + s2 + "' in lowercase is '" + 27 s2.toLowerCase() + "'" ); 28 document.writeln( " '" + s2 + "' in uppercase is '" 29 + s2.toUpperCase() + "' " ); 30 // --> 31 32 33 34 Method charAt returns a string containing the character at the specified index ( 0 in this example). Method charCodeAt returns the Unicode value of the character at the specified index ( 0 in this example). Method fromCharCode takes a comma-separated list of Unicode values and builds a string containing the character representation of those Unicode values. Methods toLowerCase and toUpperCase display versions of String s2 in all lowercase and all upper case letters, respectively.

40 DHTML

41 Ingeniørhøjskolen i Århus Slide 41 af 117 Indgredienser i en Webapplikation DHTML og JS: DOM manipulering ved klik på prik DHTML og JS (XHTML Form): Mulighed for at inddatere data – her brugerspecifik adgang og validere

42 Ingeniørhøjskolen i Århus Slide 42 af 110 DHTML DHTML = Dynamisk HTML – Client Side DHTML = (X)HTML + CSS + JavaScript + DOM –HTML (4.0+), CSS (1.0+), DOM (1+) XHTML, CSS og JavaScript har I arbejdet rigeligt med – DOM er introduceret Teknik til højere enhed -> dynamik

43 Ingeniørhøjskolen i Århus Slide 43 af 110 Hvad skal vi bruge Dynamisk HTML til? Skabe ”liv på siden” - mere spændende –Fra script: style, position og indhold Validering af bruger input (har vi set på) Minimere server load Dynamiske menustrukturer Hjælpetekster ”Rollover” grafik Event styring = ”Windows”-like brugerflade -> Mere avanceret – HTML editor i browseren

44 Ingeniørhøjskolen i Århus Slide 44 af 110 Hvordan bruger vi DHTML Via DOM’en tilgås de enkelte XHTML elementer Der indfanges ”events” (som i Windows) – og reageres via … … JavaScript (eller andet script sprog) der bruges til at manipulere med elementerne Der igen er XHTML og deres CSS ”Styles”

45 Ingeniørhøjskolen i Århus Slide 45 af 110 DOM DOM: Document Object Model –http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML- 20030109/http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML- 20030109/ Hos W3C: –Standard for adgang til strukturerede dokumenter –Core DOM benyttes til XML –HTML DOM benyttes til HTML –Repræsentation af et dokument som et træ af objekter –Giver et ensartet interface på tværs af programmeringssprog –Programmerings API med interface til bl.a. JavaScript

46 Ingeniørhøjskolen i Århus Slide 46 af 110 Der programmeres til DOM’en JavaScript: document.writeln(”tekst”) Modificerer (udvider DOM’en) … hvilket renderes af browseren umiddelbart efter – og skaber et nyt billede på skærmen

47 Ingeniørhøjskolen i Århus Slide 47 af 110 IE4 vs NN4 DOM NN4: function enFunktion(){ document.layers.ElmRef.left=300; document.layers.ElmRef.top=300; } Et XHTML layer element IE4: function enFunktion(){ document.all.ElmRef.left=300; document.all.ElmRef.top=300; } Et XHTML layer element

48 Ingeniørhøjskolen i Århus Slide 48 af 110 DHTML API / DOM Som vi har set før tilgås alle elementer via DOM Under datavalidering gik vi via documet.forms… og tilgik på denne måde en navngiven form Dette kaldes en ”Collection” – der findes mange ”Collections” der giver adgang til elementerne

49 Ingeniørhøjskolen i Århus Slide 49 af 110 All.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Object Model 11 12 13 <!-- 14 var elements = ""; 15 16 function start() 17 { 18 for ( var loop = 0; loop < document.all.length; ++loop ) 19 elements += " " + document.all[ loop ].tagName; 20 21 pText.innerHTML += elements; 22 alert( elements ); 23 } 24 // --> 25 26 27 28 29 Elements on this Web page: 30 31 The for loop loops through the elements of the all collection and display each element’s name. The length property of the all collection specifies the number of elements in the collection. The name of each XHTML element (given in the tagName property) in the collection is appended to elements. The innerHTML property is similar to the innerText property but can also include XHTML formatting. The all collection is a collection of all the XHTML elements in the page in the order they appear.

50 Ingeniørhøjskolen i Århus Slide 50 af 110 Tre ting vi kan påvirke For hvert element kan vi påvirke: –Style –Indhold –Position Og dette giver os reelt fuld kontrol over alt indhold og formattering/placering af indholdet på vores XHTML sider

51 Ingeniørhøjskolen i Århus Slide 51 af 110 Dynamisk style Mulighed for at ændre et elements style dynamisk … document.all.para1.style.color=’red’; document.all.para1.style.backgroundColor=’white’; document.all.para1.style.className=’smallFonts’; … … Dette er en tekst

52 Ingeniørhøjskolen i Århus Slide 52 af 110 Dynamisk indhold Indhold kan også ændres dynamisk … document.all.para1.innerText=’en ny tekst’; document.all.para1.innerHTML=’ en ny tekst ’; … … Dette er en tekst der vil blive ændret

53 Ingeniørhøjskolen i Århus Slide 53 af 110 Dynamisk positionering Vi kan ændre på elementernes position … document.all.afs1.style.left=’200px’; … … Dette er et afsnit der flyttes Vi kan endda ”animere” skidtet

54 Ingeniørhøjskolen i Århus Slide 54 af 110 DHTML Events Events som i Windows event programering Events bruges til at fange brugerens interaktion med browseren –F.eks. tastetryk, musebevægelser m.v. –onclick, onmouseover, onfocus etc. Men de kan også bruges til at styre system betingede events og fejl håndtering –onload, onerror, onbounce

55 Ingeniørhøjskolen i Århus Slide 55 af 110 Onload.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 DHTML Event Model - onload 11 12 <!-- 13 var seconds = 0; 14 15 function startTimer() { 16 // 1000 milliseconds = 1 second 17 window.setInterval( "updateTime()", 1000 ); 18 } 19 20 function updateTime() { 21 seconds++; 22 soFar.innerText = seconds; 23 } 24 // --> 25 26 27 28 29 30 Seconds you have spent viewing this page so far: 31 0 32 33 34 Function startTimer will call function updateTime every 1000 milliseconds. Method window.setInterval is used to invoke function updateTime every second. Function updateTime sets the innerText property of the element with soFar as an id to the number of seconds that have elapsed since loading. The onload event executes when an element finishes loading.

56 Ingeniørhøjskolen i Århus Slide 56 af 25 Mobile Mark-up Sprog

57 Ingeniørhøjskolen i Århus Slide 57 af 110 Great Differences in Size & Capabilities

58 Ingeniørhøjskolen i Århus Slide 58 af 110 Wireless Markup History HTML 4 -> XHTML 1.0 -> XHTML Basic -> XHTML Mobile Profile Standardization is still poor!

59 Ingeniørhøjskolen i Århus Slide 59 af 110 Nokia Platform Support (2008) “Wast majority of phones still only support WAP / XHTML-MP”

60 Ingeniørhøjskolen i Århus Slide 60 af 110 Nokia S60 Web Browser Support HTML 4.01, XHTML 1.0, including image maps, frames, background images, and tags; CSS 1, 2, 3 (partially), including external style sheets; DOM 1, 2; SVG-Tiny; JavaScript 1.5. Not important to look into the full platform – lets look at the others

61 Ingeniørhøjskolen i Århus Slide 61 af 110 Lite Web Browsers Most Mobile Phones only support WML/XHTMLMP Special Reduced Browsers: –WAP Microbrowser –Always WML (WAP 1.0, 1.1, 1.2, 2.0) –Maybe XHTML MP (WAP 2.0) Limited Capbilities

62 Ingeniørhøjskolen i Århus Slide 62 af 110 WML Programming 1 2<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" 3 "http://www.wapforum.org/DTD/wml12.dtd"> 4 5 6 7 8 9 10 11 Welcome to wireless programming! 12 13 14 - Much like XHTML – STRICT - MUST be Well-formed and valid - Look at the DTD - Some formatting involved (e.g. )

63 Ingeniørhøjskolen i Århus Slide 63 af 25 First.wml 1 2<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" 3 "http://www.wapforum.org/DTD/wml12.dtd"> 4 5 6 7 8 9 10 11 Local Icons 12 13 14 15 16 17 18 Link 19 20 21 22 23 Wrench 24 25 26 27 28 Football 29 30 31 32 Boat 33 34 The text Link is a link to card2. The text Wrench is a link to card3. The text Football is a link to card4 in another WML dokument. The boat local icon is a link to card5 in another WML dokument