internetteknologi 2 (itnet2)
Post on 02-Jan-2016
20 Views
Preview:
DESCRIPTION
TRANSCRIPT
Præsentation 2:
Opsummering af Client-Side Teknologier del 1
Internetteknologi 2 (ITNET2)
Ingeniørhøjskolen i ÅrhusSlide 2 af 117
Indhold i denne præsentation
• En hvirvelvind introduktion til:– Internettets historie– HTML/XHTML– CSS– JavaScript– DHTML
Ingeniørhøjskolen i ÅrhusSlide 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
Ingeniørhøjskolen i ÅrhusSlide 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)
• Client/Server kommunikation på fælles netværksstandard og standardiserede dataformater
• En ”browser” til at fortolke og renderer HTML til et ”menneske venligt” format
Ingeniørhøjskolen i ÅrhusSlide 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
Ingeniørhøjskolen i ÅrhusSlide 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
Ingeniørhøjskolen i ÅrhusSlide 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
Grundlæggende HTML & XHTML
Ingeniørhøjskolen i ÅrhusSlide 9 af 117
Ingredienser i en WebapplikationGrafik (JPEG og GIF) HTML / XHTML: til definere indhold (og form)
Ingeniørhøjskolen i ÅrhusSlide 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
Ingeniørhøjskolen i ÅrhusSlide 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
Ingeniørhøjskolen i ÅrhusSlide 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.asp
• Bemærk: XHTML er en fremtidssikring
Ingeniørhøjskolen i ÅrhusSlide 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
Ingeniørhøjskolen i ÅrhusSlide 14 af 117
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.
Ingeniørhøjskolen i ÅrhusSlide 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 OKServer: 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
Browseren modtager response:Renderer HTML dokumentet tilbrugervenlig form (tagregler + CSS)
Webserver findes via IP adresse & DNSLytter på port f.eks. 80
Ingeniørhøjskolen i ÅrhusSlide 16 af 110
HTML Example1 <?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>
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.
Cascading Style Sheets (CSS)
Ingeniørhøjskolen i ÅrhusSlide 18 af 117
Ingredienser i en WebapplikationGrafik (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
Ingeniørhøjskolen i ÅrhusSlide 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/CSS
Ingeniørhøjskolen i ÅrhusSlide 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
Ingeniørhøjskolen i ÅrhusSlide 21 af 110
CSS Syntaks
div {color: red; padding-left: 3cm}
Selector (tag)
Declaration
Property Value
Ingeniørhøjskolen i ÅrhusSlide 22 af 110
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)
Ingeniørhøjskolen i ÅrhusSlide 23 af 110
Inline.html
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 it27 20pt. and blue.</p>28 29 </body>30 </html>
The style attribute specifies the style for an element. Some style properties are font-size and color.
Ingeniørhøjskolen i ÅrhusSlide 24 af 110
Declared.html
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
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.
Ingeniørhøjskolen i ÅrhusSlide 25 af 110
Declared.html
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 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.</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>
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.
Ingeniørhøjskolen i ÅrhusSlide 26 af 110
External.html
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>Bread21 <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
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
Ingeniørhøjskolen i ÅrhusSlide 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
Ingeniørhøjskolen i ÅrhusSlide 28 af 110
Positioning.html
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>
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.
Introduktion til JavaScript
Ingeniørhøjskolen i ÅrhusSlide 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
Ingeniørhøjskolen i ÅrhusSlide 31 af 110
Indgredienser i en Webapplikation
DHTML og JS: DOM manipuleringved klik på prik
DHTML og JS (XHTML Form):Mulighed for at inddatere data – her brugerspecifikadgang og validere
Ingeniørhøjskolen i ÅrhusSlide 32 af 110
welcome.htm
Program Output
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>
Title o f the XHTML doc ument
Script result
Location and name of the loaded XHTML document
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.
Ingeniørhøjskolen i ÅrhusSlide 33 af 110
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
Ingeniørhøjskolen i ÅrhusSlide 34 af 110
Operatorer
• Aritmetiske+, -, *, /, %, +, +=, …
• Sammenligninger==, !=, <=, <, >
BEMÆRK BRUG ALDRIG = til sammenligninger
• Boolske&& = AND, || = OR, ! = NOT
• StrengeKonkatenering af strenge ”alfa”+”beta” = ”alfabeta”
Ingeniørhøjskolen i ÅrhusSlide 35 af 110
Kontrolstrukturer
• De samme som vi kender fra andre programmeringssprog:– If-else
if (<udsagn>) { … }
else { … }
– Switch-caseswitch (<udsagn>) {
case <værdi>: … break;
…
default: …
}
Ingeniørhøjskolen i ÅrhusSlide 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økkewhile (list.next()) {
…
}
– Do/while løkke (udføres altid mindst én gang)do { … } while { … }
Ingeniørhøjskolen i ÅrhusSlide 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) ;
Ingeniørhøjskolen i ÅrhusSlide 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)
Ingeniørhøjskolen i ÅrhusSlide 39 af 110
CharacterProcessing.html
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>
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.
DHTML
Ingeniørhøjskolen i ÅrhusSlide 41 af 117
Indgredienser i en Webapplikation
DHTML og JS: DOM manipuleringved klik på prik
DHTML og JS (XHTML Form):Mulighed for at inddatere data – her brugerspecifikadgang og validere
Ingeniørhøjskolen i ÅrhusSlide 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
Ingeniørhøjskolen i ÅrhusSlide 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
Ingeniørhøjskolen i ÅrhusSlide 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”
Ingeniørhøjskolen i ÅrhusSlide 45 af 110
DOM
• DOM: Document Object Model– http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-200
30109/
• 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
Ingeniørhøjskolen i ÅrhusSlide 46 af 110
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
Ingeniørhøjskolen i ÅrhusSlide 47 af 110
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>
Ingeniørhøjskolen i ÅrhusSlide 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
applets
all
anchors
embeds
forms
filters
images
links
plugins
styleSheets
scripts
frames
plugins
collection
body
screen
document
history
navigator
location
event
document
document
object
window
Key
Ingeniørhøjskolen i ÅrhusSlide 49 af 110
All.html
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>
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.
Ingeniørhøjskolen i ÅrhusSlide 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
Ingeniørhøjskolen i ÅrhusSlide 51 af 110
Dynamisk style
• Mulighed for at ændre et elements style dynamisk<script …>…document.all.para1.style.color=’red’;document.all.para1.style.backgroundColor=’white’;document.all.para1.style.className=’smallFonts’;…</script>…<p id=”para1”>Dette er en tekst</p>
Ingeniørhøjskolen i ÅrhusSlide 52 af 110
Dynamisk indhold
• Indhold kan også ændres dynamisk
<script …>…document.all.para1.innerText=’en ny tekst’;document.all.para1.innerHTML=’<i>en ny tekst</i>’;…</script>…<p id=”para1”>Dette er en tekst der vil blive ændret</p>
Ingeniørhøjskolen i ÅrhusSlide 53 af 110
Dynamisk positionering
• Vi kan ændre på elementernes position
<script …>…document.all.afs1.style.left=’200px’;…</script>…<div id=”afs1” style=”position:absolut;left:20;top”>Dette er et afsnit der flyttes</div>
• Vi kan endda ”animere” skidtet
Ingeniørhøjskolen i ÅrhusSlide 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
Ingeniørhøjskolen i ÅrhusSlide 55 af 110
Onload.html
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. 14.2: onload.html -->6 <!-- Demonstrating the onload event -->7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>DHTML Event Model - onload</title>11 <script type = "text/javascript">12 <!--13 var seconds = 0;14 15 function startTimer() {16 // 1000 milliseconds = 1 second17 window.setInterval( "updateTime()", 1000 );18 }19 20 function updateTime() {21 seconds++;22 soFar.innerText = seconds; 23 }24 // -->25 </script>26 </head>27 28 <body onload = "startTimer()">29 30 <p>Seconds you have spent viewing this page so far:31 <a id = "soFar"><strong>0</strong></a></p>32 33 </body>34 </html>
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.
Ingeniørhøjskolen i ÅrhusSlide 56 af 25
Mobile Mark-up Sprog
Ingeniørhøjskolen i ÅrhusSlide 57 af 110
Great Differences in Size & Capabilities
Ingeniørhøjskolen i ÅrhusSlide 58 af 110
Wireless Markup History
HTML 4 -> XHTML 1.0 -> XHTML Basic -> XHTML Mobile ProfileStandardization is still poor!
Ingeniørhøjskolen i ÅrhusSlide 59 af 110
Nokia Platform Support (2008)
“Wast majority of phones still only support WAP / XHTML-MP”
Ingeniørhøjskolen i ÅrhusSlide 60 af 110
Nokia S60 Web Browser Support
• HTML 4.01, XHTML 1.0, including image maps, frames, background images, <meta> and <object> 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
Ingeniørhøjskolen i ÅrhusSlide 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
Ingeniørhøjskolen i ÅrhusSlide 62 af 110
WML Programming
1 <?xml version = "1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"3 "http://www.wapforum.org/DTD/wml12.dtd"> 45 <!-- Fig. 23.2: fig23_2.wml -->6 <!-- Simple WML Page -->7 8 <wml>9 <card id = "index" title = "WML Title">10 <p>11 Welcome to wireless programming!12 </p>13 </card> 14 </wml>
- Much like XHTML – STRICT- MUST be Well-formed and valid- Look at the DTD- Some formatting involved (e.g. <b>)
Ingeniørhøjskolen i ÅrhusSlide 63 af 25
First.wml
1 <?xml version = "1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"3 "http://www.wapforum.org/DTD/wml12.dtd"> 45 <!-- Fig. 23.4: fig23_4.wml -->6 <!-- Using local icons -->78 <wml>9 <card id = "index" title = "Icons">10 <p>11 Local Icons<br />1213 <!-- link to the second card -->14 <a href = "#card2">1516 <!-- insert the local icon -->17 <img src = "" alt = "Link" localsrc = "link" />18 </a>Link<br />19 20 <!-- link to the third card -->21 <a href = "#card3">22 <img src = "" alt = "Wrench" localsrc = "wrench" />23 </a>Wrench<br />24 25 <!--link to an external card-->26 <a href = “another.wml#card4">27 <img src = "" alt = "Football" localsrc = "football" />28 </a>Football<br />29 30 <a href = “antoher.wml#card5">31 <img src = "" alt = "Boat" localsrc = "boat" />32 </a>Boat33 </p>34 </card>
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
top related