1 / 63

Internetteknologi 2 (ITNET2)

Internetteknologi 2 (ITNET2). Præsentation 2: Opsummering af Client-Side Teknologier del 1. Indhold i denne præsentation. En hvirvelvind introduktion til: Internettets historie HTML/XHTML CSS JavaScript DHTML. Internettets historie. ARPAnet

joan-craft
Download Presentation

Internetteknologi 2 (ITNET2)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Indhold i denne præsentation • En hvirvelvind introduktion til: • Internettets historie • HTML/XHTML • CSS • JavaScript • DHTML

  3. 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. 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) • 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. 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. 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. 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. Ingredienser i en Webapplikation HTML / XHTML: til definere indhold (og form) Grafik (JPEG og GIF)

  10. 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. 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. 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.asp • Bemærk: XHTML er en fremtidssikring

  13. 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. DOCTYPE II • XHTML 1.0 Strict • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • Brug denne til rigtig pæn markup, fri for præsentations elementer. Brug Cascading Style Sheets til præsentation. • XHTML 1.0 Transitional • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • 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 • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> • Brug denne når du vil anvende HTML Frames til at opdele browseren vindue i flere dele.

  15. HTML - sådan fungerer rendering Bruger indtaster adresse i browser: http://www.dr.dk Webserver findes via IP adresse & DNS Lytter på port f.eks. 80 1 HTTP Request (over TCP/IP) GET /request-URI HTTP/version 2 Webserveren modtager requestet: Finder det rette HTML dokument frem fra fil systemet samt billeder m.v. Og sender response 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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> ... her følger resten af dokumentet 3 Browseren modtager response: Renderer HTML dokumentet til brugervenlig form (tagregler + CSS)

  16. Text between strong tags will appear bold. Linking is accomplished in XHTML with the anchor (a) element. The text between the a tags is the anchor for the link. The anchor links to the page that’s value is given by the href attribute. Elements placed between paragraph tags will be set apart from other elements on the page with a vertical line before and after it. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 4.5: links.html --> 6 <!-- Introduction to hyperlinks --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Links</title> 11 </head> 12 13 <body> 14 15 <h1>Here are my favorite sites</h1> 16 17 <p><strong>Click on a name to go to that page.</strong></p> 18 19 <p><a href = "http://www.deitel.com">Deitel</a></p> 20 21 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p> 22 23 <p><a href = "http://www.yahoo.com">Yahoo!</a></p> 24 25 <p><a href = "http://www.usatoday.com">USA Today</a></p> 26 27 </body> 28 </html> HTML Example

  17. Cascading Style Sheets (CSS)

  18. Ingredienser i en Webapplikation HTML / XHTML: til indhold of form Grafik (JPEG og GIF) CSS (Cascading Style Sheets): til at formatere koden i et eksternt stylesheet hvilket giver et ensartet design

  19. 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/CSS

  20. 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. CSS Syntaks div {color: red; padding-left: 3cm} Selector (tag) Property Value Declaration

  22. 3 anvendelser af CSS i HTML Eksternt Stylesheet: <link rel=”stylesheet” href=”style.css”> Den mest ”afkoblede” måde at gøre det på Style information placeres i separat fil Inline style: <input type=”text” style=”color: #ff0000”> Indlejret i HTML tagget Internt stylesheet: <style type=”text/css”> div {text-align: right} </style> Indlejret i starten af HTML dokumentet (typisk)

  23. The style attribute specifies the style for an element. Some style properties are font-size and color. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 6.1: inline.html --> 6 <!-- Using inline styles --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Inline Styles</title> 11 </head> 12 13 <body> 14 15 <p>This text does not have any style applied to it.</p> 16 17 <!-- The style attribute allows you to declare --> 18 <!-- inline styles. Separate multiple styles --> 19 <!-- with a semicolon. --> 20 <p style = "font-size: 20pt">This text has the 21 <em>font-size</em> style applied to it, making it 20pt. 22 </p> 23 24 <p style = "font-size: 20pt; color: #0000ff"> 25 This text has the <em>font-size</em> and 26 <em>color</em> styles applied to it, making it 27 20pt. and blue.</p> 28 29 </body> 30 </html> Inline.html

  24. Use the style element to create an embedded CSS. More style properties include font type (font-family) and background color (background-color). 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 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 6.2: declared.html --> 6 <!-- Declaring a style sheet in the header section. --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Style Sheets</title> 11 12 <!-- This begins the style sheet section. --> 13 <style type = "text/css"> 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 </style> 25 </head> 26 Declared.html Styles placed in the head apply to all elements in the document.

  25. The styles associated with the special class are applied to the header and paragraph elements. 27 <body> 28 29 <!-- This class attribute applies the .blue style --> 30 <h1 class = "special">Deitel & Associates, Inc.</h1> 31 32 <p>Deitel & Associates, Inc. is an internationally 33 recognized corporate training and publishing organization 34 specializing in programming languages, Internet/World 35 Wide Web technologyand object technology education. 36 Deitel & Associates, Inc. isa 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.</p> 40 41 <h1>Clients</h1> 42 <p class = "special"> The company's clients include many 43 <em>Fortune 1000 companies</em>, 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.</p> 50 51 </body> 52 </html> Declared.html Notice the styles defined in the CSS are applied to all paragraphs, headers, and bolded text.

  26. The link element is used to reference an external style sheet. The type attribute defines the MIME type. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 6.5: external.html --> 6 <!-- Linking external style sheets --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Linking External Style Sheets</title> 11 <link rel = "stylesheet"type = "text/css" 12 href = "styles.css" /> 13 </head> 14 15 <body> 16 17 <h1>Shopping list for <em>Monday</em>:</h1> 18 <ul> 19 <li>Milk</li> 20 <li>Bread 21 <ul> 22 <li>White bread</li> 23 <li>Rye bread</li> 24 <li>Whole wheat bread</li> 25 </ul> 26 </li> 27 <li>Rice</li> 28 <li>Potatoes</li> 29 <li>Pizza <em>with mushrooms</em></li> 30 </ul> 31 External.html 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. 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. 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. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig 6.8: positioning.html --> 6 <!-- Absolute positioning of elements --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Absolute Positioning</title> 11 </head> 12 13 <body> 14 15 <p><img src = "i.gif"style = "position: absolute; 16 top: 0px; left: 0px; z-index: 1" alt = 17 "First positioned image" /></p> 18 <p style = "position: absolute; top: 50px; left: 50px; 19 z-index: 3; font-size: 20pt;">Positioned Text</p> 20 <p><img src = "circle.gif"style = "position: absolute; 21 top: 25px; left: 100px; z-index: 2" alt = 22 "Second positioned image" /></p> 23 24 </body> 25 </html> Positioning.html The effect of the z-index property is several images layered on top of one another.

  29. Introduktion til JavaScript

  30. 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. 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. The script tag indicates to the browser that the text which follows is part of a script. The document object’s writeln method writes a line of XHTML markup in the XHTML document. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 7.1: welcome.html --> 6 <!-- Displaying a line of text --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>A First Program in JavaScript</title> 11 12 <script type = "text/javascript"> 13 <!-- 14 document.writeln( 15 "<h1>Welcome to JavaScript Programming!</h1>" ); 16 // --> 17 </script> 18 19 </head><body></body> 20 </html> welcome.htmProgram Output

  33. Variable • Løst typet sprog • Typer • Number, Boolean, String, Function, Object • Variable erklæres med • var <navn> [= <værdi>] • Bemærk: ingen type på variablen • Scope • Globale og lokale • Som i typiske programmeringssprog • Lokale variable går ud af scope og forsvinder

  34. Operatorer • Aritmetiske +, -, *, /, %, +, +=, … • Sammenligninger ==, !=, <=, <, > BEMÆRK BRUG ALDRIG = til sammenligninger • Boolske && = AND, || = OR, ! = NOT • Strenge Konkatenering af strenge ”alfa”+”beta” = ”alfabeta”

  35. Kontrolstrukturer • De samme som vi kender fra andre programmeringssprog: • If-else if (<udsagn>) { … } else { … } • Switch-case switch (<udsagn>) { case <værdi>: … break; … default: … }

  36. 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. 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. 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. 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. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 12.4: CharacterProcessing.html --> 6 <!-- Character Processing Methods --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Character Processing Methods</title> 11 12 <script type = "text/javascript"> 13 <!-- 14 var s = "ZEBRA"; 15 var s2 = "AbCdEfG"; 16 17 document.writeln( "<p>Character at index 0 in '" + 18 s + "' is " + s.charAt( 0 ) ); 19 document.writeln( "<br />Character code at index 0 in '" 20 + s + "' is " + s.charCodeAt( 0 ) + "</p>" ); 21 22 document.writeln( "<p>'" + 23 String.fromCharCode( 87, 79, 82, 68 ) + 24 "' contains character codes 87, 79, 82 and 68</p>" ) 25 26 document.writeln( "<p>'" + s2 + "' in lowercase is '" + 27 s2.toLowerCase() + "'" ); 28 document.writeln( "<br />'" + s2 + "' in uppercase is '" 29 + s2.toUpperCase() + "'</p>" ); 30 // --> 31 </script> 32 33 </head><body></body> 34 </html> CharacterProcessing.html

  40. DHTML

  41. 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. 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. 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. 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. DOM • DOM: Document Object Model • 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. Der programmeres til DOM’en • JavaScript: <script> document.writeln(”tekst”) </script> • Modificerer (udvider DOM’en) • … hvilket renderes af browseren umiddelbart efter – og skaber et nyt billede på skærmen

  47. IE4 vs NN4 DOM • NN4: <script language="JavaScript" type="text/JavaScript"> function enFunktion(){ document.layers.ElmRef.left=300; document.layers.ElmRef.top=300; } </script> <layer id=”ElmRef”>Et XHTML layer element</layer> • IE4: <script language="JavaScript" type="text/JavaScript"> function enFunktion(){ document.all.ElmRef.left=300; document.all.ElmRef.top=300; } </script> <div id=”ElmRef”>Et XHTML layer element</layer>

  48. 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. 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 all collection is a collection of all the XHTML elements in the page in the order they appear. The innerHTML property is similar to the innerText property but can also include XHTML formatting. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig 13.2: all.html --> 6 <!-- Using the all collection --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Object Model</title> 11 12 <script type = "text/javascript"> 13 <!-- 14 var elements = ""; 15 16 function start() 17 { 18 for ( var loop = 0; loop < document.all.length; ++loop ) 19 elements += "<br />" + document.all[ loop ].tagName; 20 21 pText.innerHTML += elements; 22 alert( elements ); 23 } 24 // --> 25 </script> 26 </head> 27 28 <body onload ="start()"> 29 <p id ="pText">Elements on this Web page:</p> 30 </body> 31 </html> All.html

  50. 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

More Related