Pr

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 1960erne 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 standardiseringsarbej
  det 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 DTDer (document types)
• STRICT
• TRANSITIONAL
• FRAMESET

14
DOCTYPE II

• XHTML 1.0 Strict
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"gt
• Brug denne til rigtig pæn markup, fri for
  præsentations elementer. Brug Cascading Style
  Sheets til præsentation.
• XHTML 1.0 Transitional
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• 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
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Frameset//EN" "http//www.w3.org/TR/xhtml1/DTD/xht
  ml1-frameset.dtd"gt
• 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/v
ersion
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 012204 GMT Last-modified Thursday,
20-Nov-97 104453 GMT Content-length 6372
Content-type text/html lt!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 3.2 Final//EN"gt ltHTMLgt
... her følger resten af dokumentet
3
Browseren modtager response Renderer HTML
dokumentet til brugervenlig form (tagregler CSS)
16
1 lt?xml version "1.0"?gt 2 lt!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt 4 5 lt!-- Fig. 4.5 links.html
--gt 6 lt!-- Introduction to hyperlinks --gt 7
8 lthtml xmlns "http//www.w3.org/1999/xhtml"
gt 9 ltheadgt 10 lttitlegtInternet and
WWW How to Program - Linkslt/titlegt 11
lt/headgt 12 13 ltbodygt 14 15
lth1gtHere are my favorite siteslt/h1gt 16 17
ltpgtltstronggtClick on a name to go to that
page.lt/stronggtlt/pgt 18 19 ltpgtlta href
"http//www.deitel.com"gtDeitellt/agtlt/pgt 20 21
ltpgtlta href "http//www.prenhall.com"gtPrent
ice Halllt/agtlt/pgt 22 23 ltpgtlta href
"http//www.yahoo.com"gtYahoo!lt/agtlt/pgt 24 25
ltpgtlta href "http//www.usatoday.com"gtUSA
Todaylt/agtlt/pgt 26 27 lt/bodygt 28 lt/htmlgt
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
• ltlink relstylesheet hrefstyle.cssgt
• Den mest afkoblede måde at gøre det på
• Style information placeres i separat fil
• Inline style
• ltinput typetext stylecolor ff0000gt
• Indlejret i HTML tagget
• Internt stylesheet
• ltstyle typetext/cssgt
• div text-align right
• lt/stylegt
• Indlejret i starten af HTML dokumentet (typisk)

23
1 lt?xml version "1.0"?gt 2 lt!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt 4 5 lt!-- Fig. 6.1 inline.html --gt 6
lt!-- Using inline styles --gt 7 8 lthtml
xmlns "http//www.w3.org/1999/xhtml"gt 9
ltheadgt 10 lttitlegtInline Styleslt/titlegt 11
lt/headgt 12 13 ltbodygt 14 15
ltpgtThis text does not have any style applied to
it.lt/pgt 16 17 lt!-- The style attribute
allows you to declare --gt 18 lt!-- inline
styles. Separate multiple styles --gt 19
lt!-- with a semicolon.
--gt 20 ltp style "font-size 20pt"gtThis
text has the 21 ltemgtfont-sizelt/emgt style
applied to it, making it 20pt. 22 lt/pgt 23
24 ltp style "font-size 20pt color
0000ff"gt 25 This text has the
ltemgtfont-sizelt/emgt and 26 ltemgtcolorlt/emgt
styles applied to it, making it 27 20pt.
and blue.lt/pgt 28 29 lt/bodygt 30 lt/htmlgt
Inline.html
24
1 lt?xml version "1.0"?gt 2 lt!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt 4 5 lt!-- Fig. 6.2 declared.html
--gt 6 lt!-- Declaring a style
sheet in the header section. --gt 7 8 lthtml
xmlns "http//www.w3.org/1999/xhtml"gt 9
ltheadgt 10 lttitlegtStyle Sheetslt/titlegt 11
12 lt!-- This begins the style sheet
section. --gt 13 ltstyle type
"text/css"gt 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
lt/stylegt 25 lt/headgt 26
Declared.html
Styles placed in the head apply to all elements
in the document.
25
27 ltbodygt 28 29 lt!-- This class
attribute applies the .blue style --gt 30
lth1 class "special"gtDeitel Associates,
Inc.lt/h1gt 31 32 ltpgtDeitel
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.lt/pgt 40 41
lth1gtClientslt/h1gt 42 ltp class "special"gt
The company's clients include many 43
ltemgtFortune 1000 companieslt/emgt, 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.lt/pgt 50 51 lt/bodygt 52 lt/htmlgt
Declared.html
Notice the styles defined in the CSS are applied
to all paragraphs, headers, and bolded text.
26
1 lt?xml version "1.0"?gt 2 lt!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt 4 5 lt!-- Fig. 6.5 external.html
--gt 6 lt!-- Linking external style sheets
--gt 7 8 lthtml xmlns "http//www.w3.org/19
99/xhtml"gt 9 ltheadgt 10
lttitlegtLinking External Style Sheetslt/titlegt 11
ltlink rel "stylesheet" type "text/css"
12 href "styles.css" /gt 13
lt/headgt 14 15 ltbodygt 16 17
lth1gtShopping list for ltemgtMondaylt/emgtlt/h1gt 18
ltulgt 19 ltligtMilklt/ligt 20
ltligtBread 21 ltulgt 22
ltligtWhite breadlt/ligt 23
ltligtRye breadlt/ligt 24 ltligtWhole
wheat breadlt/ligt 25 lt/ulgt 26
lt/ligt 27 ltligtRicelt/ligt 28
ltligtPotatoeslt/ligt 29 ltligtPizza
ltemgtwith mushroomslt/emgtlt/ligt 30
lt/ulgt 31
External.html
4 a text-decoration none 5 6
ahover 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
1 lt?xml version "1.0"?gt 2 lt!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt 4 5 lt!-- Fig 6.8 positioning.html
--gt 6 lt!-- Absolute positioning of elements
--gt 7 8 lthtml xmlns "http//www.w3.org/19
99/xhtml"gt 9 ltheadgt 10
lttitlegtAbsolute Positioninglt/titlegt 11
lt/headgt 12 13 ltbodygt 14 15
ltpgtltimg src "i.gif" style "position
absolute 16 top 0px left 0px
z-index 1" alt 17 "First
positioned image" /gtlt/pgt 18 ltp style
"position absolute top 50px left 50px 19
z-index 3 font-size 20pt"gtPositioned
Textlt/pgt 20 ltpgtltimg src "circle.gif"
style "position absolute 21 top
25px left 100px z-index 2" alt 22
"Second positioned image" /gtlt/pgt 23 24
lt/bodygt 25 lt/htmlgt
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 lta 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
1 lt?xml version "1.0"?gt 2 lt!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt 4 5 lt!-- Fig. 7.1 welcome.html
--gt 6 lt!-- Displaying a line of text --gt 7
8 lthtml xmlns "http//www.w3.org/1999/xhtml"
gt 9 ltheadgt 10 lttitlegtA First
Program in JavaScriptlt/titlegt 11 12
ltscript type "text/javascript"gt 13
lt!-- 14 document.writeln( 15
"lth1gtWelcome to JavaScript Programming!lt/h1gt"
) 16 // --gt 17 lt/scriptgt 18
19 lt/headgtltbodygtlt/bodygt 20 lt/htmlgt
welcome.htmProgram Output
33
Variable

• Løst typet sprog
• Typer
• Number, Boolean, String, Function, Object
• Variable erklæres med
• var ltnavngt ltværdigt
• 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
• , !, lt, lt, gt
• BEMÆRK BRUG ALDRIG til sammenligninger
• Boolske
• AND, OR, ! NOT
• Strenge
• Konkatenering af strenge alfabeta
  alfabeta

35
Kontrolstrukturer

• De samme som vi kender fra andre
  programmeringssprog
• If-else
• if (ltudsagngt)
• else
• Switch-case
• switch (ltudsagngt)
• case ltværdigt break
• default

36
Løkker

• Også velkendte kontrolstrukturer
• For løkke
• for (var counter0 counterltlist.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 xy
• 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
1 lt?xml version "1.0"?gt 2 lt!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt 4 5 lt!-- Fig. 12.4 CharacterProcessing.
html --gt 6 lt!-- Character Processing Methods
--gt 7 8 lthtml xmlns
"http//www.w3.org/1999/xhtml"gt 9 ltheadgt 10
lttitlegtCharacter Processing
Methodslt/titlegt 11 12 ltscript type
"text/javascript"gt 13 lt!-- 14
var s "ZEBRA" 15 var s2
"AbCdEfG" 16 17
document.writeln( "ltpgtCharacter at index 0 in '"
18 s "' is " s.charAt( 0 )
) 19 document.writeln( "ltbr
/gtCharacter code at index 0 in '" 20
s "' is " s.charCodeAt( 0 ) "lt/pgt" )
21 22
document.writeln( "ltpgt'" 23
String.fromCharCode( 87, 79, 82, 68 ) 24
"' contains character codes 87, 79, 82
and 68lt/pgt" ) 25 26
document.writeln( "ltpgt'" s2 "' in lowercase
is '" 27 s2.toLowerCase() "'"
) 28 document.writeln( "ltbr
/gt'" s2 "' in uppercase is '" 29
s2.toUpperCase() "'lt/pgt" ) 30
// --gt 31 lt/scriptgt 32 33
lt/headgtltbodygtlt/bodygt 34 lt/htmlgt
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 -gt 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
• -gt Mere avanceret HTML editor i browseren

44
Hvordan bruger vi DHTML

• Via DOMen 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-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

46
Der programmeres til DOMen

• JavaScript
• ltscriptgt
• document.writeln(tekst)
• lt/scriptgt
• Modificerer (udvider DOMen)
• hvilket renderes af browseren umiddelbart efter
  og skaber et nyt billede på skærmen

47
IE4 vs NN4 DOM

• NN4
• ltscript language"JavaScript" type"text/JavaScrip
  t"gt
• function enFunktion()
• document.layers.ElmRef.left300
• document.layers.ElmRef.top300
• lt/scriptgt
• ltlayer idElmRefgtEt XHTML layer elementlt/layergt
• IE4
• ltscript language"JavaScript" type"text/JavaScrip
  t"gt
• function enFunktion()
• document.all.ElmRef.left300
• document.all.ElmRef.top300
• lt/scriptgt
• ltdiv idElmRefgtEt XHTML layer elementlt/layergt

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
1 lt?xml version "1.0"?gt 2 lt!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt 4 5 lt!-- Fig 13.2 all.html --gt 6
lt!-- Using the all collection --gt 7 8
lthtml xmlns "http//www.w3.org/1999/xhtml"gt 9
ltheadgt 10 lttitlegtObject
Modellt/titlegt 11 12 ltscript type
"text/javascript"gt 13 lt!-- 14
var elements "" 15 16
function start() 17 18
for ( var loop 0 loop lt document.all.length
loop ) 19 elements "ltbr
/gt" document.all loop .tagName 20
21 pText.innerHTML elements 22
alert( elements ) 23
24 // --gt 25 lt/scriptgt 26
lt/headgt 27 28 ltbody onload
"start()"gt 29 ltp id "pText"gtElements on
this Web pagelt/pgt 30 lt/bodygt 31 lt/htmlgt
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

51
Dynamisk style

• Mulighed for at ændre et elements style dynamisk

ltscript gt document.all.para1.style.colorred
document.all.para1.style.backgroundColorwhite
document.all.para1.style.classNamesmallFonts
lt/scriptgt ltp idpara1gtDette er en
tekstlt/pgt
52
Dynamisk indhold

• Indhold kan også ændres dynamisk

ltscript gt document.all.para1.innerTexten ny
tekst document.all.para1.innerHTMLltigten ny
tekstlt/igt lt/scriptgt ltp idpara1gtDette er
en tekst der vil blive ændretlt/pgt
53
Dynamisk positionering

• Vi kan ændre på elementernes position

ltscript gt document.all.afs1.style.left200px
lt/scriptgt ltdiv idafs1 stylepositionabso
lutleft20topgt Dette er et afsnit der
flytteslt/divgt

• Vi kan endda animere skidtet

54
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
1 lt?xml version "1.0"?gt 2 lt!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt 4 5 lt!-- Fig. 14.2 onload.html
--gt 6 lt!-- Demonstrating the onload event
--gt 7 8 lthtml xmlns "http//www.w3.org/19
99/xhtml"gt 9 ltheadgt 10 lttitlegtDHTML
Event Model - onloadlt/titlegt 11 ltscript
type "text/javascript"gt 12 lt!-- 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 // --gt 25
lt/scriptgt 26 lt/headgt 27 28 ltbody
onload "startTimer()"gt 29 30
ltpgtSeconds you have spent viewing this page so
far 31 lta id "soFar"gtltstronggt0lt/stronggt
lt/agtlt/pgt 32 33 lt/bodygt 34 lt/htmlgt
Onload.html
56

• Mobile Mark-up Sprog

57
Great Differences in Size Capabilities
58
Wireless Markup History
HTML 4 -gt XHTML 1.0 -gt XHTML Basic -gt XHTML
Mobile Profile Standardization is still poor!
59
Nokia Platform Support (2008)
Wast majority of phones still only support WAP /
XHTML-MP
60
Nokia S60 Web Browser Support

• HTML 4.01, XHTML 1.0, including image maps,
  frames, background images, ltmetagt and ltobjectgt
  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
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
WML Programming
1 lt?xml version "1.0"?gt 2 lt!DOCTYPE wml PUBLIC
"-//WAPFORUM//DTD WML 1.2//EN" 3
"http//www.wapforum.org/DTD/wml12.dtd"gt
4 5 lt!-- Fig. 23.2 fig23_2.wml --gt 6 lt!--
Simple WML Page --gt 7 8 ltwmlgt 9 ltcard
id "index" title "WML Title"gt 10
ltpgt 11 Welcome to wireless
programming! 12 lt/pgt 13 lt/cardgt
14 lt/wmlgt

• Much like XHTML STRICT
• MUST be Well-formed and valid
• Look at the DTD
• Some formatting involved (e.g. ltbgt)

63
First.wml

• 1 lt?xml version "1.0"?gt
• 2 lt!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML
  1.2//EN"
• 3 "http//www.wapforum.org/DTD/wml12.dtd"gt
• 4
• 5 lt!-- Fig. 23.4 fig23_4.wml --gt
• 6 lt!-- Using local icons --gt
• 7
• 8 ltwmlgt
• 9 ltcard id "index" title "Icons"gt
• 10 ltpgt
• 11 Local Iconsltbr /gt
• 12
• 13 lt!-- link to the second card --gt
• 14 lta href "card2"gt
• 15
• 16 lt!-- insert the local icon --gt
• 17 ltimg src "" alt "Link"
  localsrc "link" /gt
• 18 lt/agtLinkltbr /gt
• 19

The text Wrench is a link to card3.
The boat local icon is a link to card5 in another
WML dokument