internetteknologi 2 (itnet2)

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


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


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

http://www.jyskebank.dk/


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


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


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


Ingredienser i en WebapplikationGrafik (JPEG og GIF) HTML / XHTML: til definere indhold (og form)


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


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

http://www.w3schools.com/xhtml


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

http://www.w3schools.com/xhtml/xhtml_html.asp


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


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.


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

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 6 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)


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


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

http://www.w3.org/Style/CSS




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


CSS Syntaks

div {color: red; padding-left: 3cm}

Selector (tag)

Declaration

Property Value


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)

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 6 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 18 19 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.

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 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Style Sheets</title>11 12 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.

Declared.html

27 <body>28 29 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.

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 6 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


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

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 6 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


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


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

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


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


Operatorer

• Aritmetiske+, -, *, /, %, +, +=, …

• Sammenligninger==, !=, <=, <, >

BEMÆRK BRUG ALDRIG = til sammenligninger

• Boolske&& = AND, || = OR, ! = NOT

• StrengeKonkatenering af strenge ”alfa”+”beta” = ”alfabeta”


Kontrolstrukturer

• De samme som vi kender fra andre programmeringssprog:– If-else

if (<udsagn>) { … }

else { … }

– Switch-caseswitch (<udsagn>) {

case <værdi>: … break;

…

default: …

}


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 { … }


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) ;


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)

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


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


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


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


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”


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


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


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>


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

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 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Object Model</title>11 12 <script type = "text/javascript">13 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.


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


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>


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>


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


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

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


Mobile Mark-up Sprog


Great Differences in Size & Capabilities


Wireless Markup History

HTML 4 -> XHTML 1.0 -> XHTML Basic -> XHTML Mobile ProfileStandardization is still poor!


Nokia Platform Support (2008)

“Wast majority of phones still only support WAP / XHTML-MP”


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


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

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 6 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>)

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 6 78 <wml>9 <card id = "index" title = "Icons">10 <p>11 Local Icons<br />1213 14 <a href = "#card2">1516 17 <img src = "" alt = "Link" localsrc = "link" />18 </a>Link<br />19 20 21 <a href = "#card3">22 <img src = "" alt = "Wrench" localsrc = "wrench" />23 </a>Wrench<br />24 25 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

internetteknologi 2 (itnet2)

Documents