Sunteți pe pagina 1din 93

Programarea Clientului Web

asist. dr. ing. Simona Caraiman


mailto: sarustei@cs.tuiasi.ro

Universitatea Tehnica Gheorghe Asachi din Iasi


Facultatea de Automatica si Calculatoare

Recapitulare
o

Adresare resurse:

Accesare resurse:

Prezentare resurse:

URI, URL, URN, IRI

HTTP

limbaje de marcare ((X)HTML, XML, DOM, SAX, CSS, XSL, RSS,


Atom, VRML, X3D)
scripting (JavaScript, JQuery, Prototype, Script.aculo.us, )
AJAX

n
n

o
o
o
o
o
o

programare browser Web


mashups
dezvoltare RIA
tehnologii Web 3D
Web mobil
securitate Web

PCW - C3.JavaScript.DOM.Tehnologii XML

Limbaje de marcare
- (X)HTML -

PCW - C2.Recapitulare

Limbaje de marcare
o set de coduri ce dau instructiuni referitoare
la structura unui text si la modul de afisare
a acestuia
o 1967 GenCode adnotarea manuscriselor
o 1970-1980 TeX carti de matematica
o Scribe, GML, SGML
o HTML, XML, XHTML
o text + instructiuni de marcare (tag-uri)
o prezentarea altor tipuri de informatii
(imagini vectoriale, playlist-uri, servicii
web, etc)
PCW - C2.Recapitulare

Limbaje de marcare
Limbaje de marcare XML:
Extensible Stylesheet Language
MathML
MusiXML
MXML
RSS
Scalable Vector Graphics
Synchronized Multimedia Integration Language
Web Services Description Language
X3D
XAML
XHTML
XPath

PCW - C2.Recapitulare

Limbaje de marcare
Limbaje de marcare de uz general:

GML predecesor al SGML

SGML predecesor al XML

XML

Limbaje de marcare a documentelor:

HTML

XHTML

MathML

TeX, LaTeX

Limbaje de marcare pentru content syndication:

Atom

RSS

SyncML

PCW - C2.Recapitulare

Hypertext Markup Language (HTML)


o limbaj universal pentru publicarea hypertext-ului pe
World Wide Web
o descrie continutul si structura informatiilor intr-o
pagina web
o format neproprietar bazat pe SGML
o unelte de creare si redare:
- editor text
- unelte WYSIWYG (Dreamweaver, etc.)
o text + indicatii de redare (tag)
o numele fiecarui tag = element
n sintaxa: <element> continut </element>
n ex: <p>Acesta este un paragraf</p>
PCW - C2.Recapitulare

Structura unei pagini HTML


<html>
<head>
informatii despre pagina
</head>
<body>
continutul paginii
</body>
</html>

header descrie pagina


body continutul paginii
fisier extensie .html, .htm
PCW - C2.Recapitulare

HTML - Versiuni
o
o
o
o
o
o
o
o
o
o
o

GML (IBM Charles Goldfarb, 60)


Generalized Markup Language
SGML (ISO 8879:1986)
Standard Generalized Markup Language
HTML Tags Tim Berners-Lee, 1991
IETF 1993: "Hypertext Markup Language (HTML)" Internet-Draft,T.
Berners-Lee, D. Connolly
Dave Raggett, 1993: HTML+ (Hypertext Markup Format)
HTML 2.0 IETF HTML WG, 1995 (RFC 1866)
HTML 3.2 Ian 1997 (W3C)
HTML 4.0 Dec 1997
HTML 4.01 Dec 1999
XHTML 1.0 - 2000
HTML 5
n
n

2004: Web Hypertext Application Technology Working Group (WHATWG)


18 Februarie 2010, W3C Working Draft

PCW - C2.Recapitulare

HTML vs XHTML
XHTML eXtensible HyperText Markup
Language
- reformulare a HTML/4.01 in XML
- mai extensibil (namespaces includerea de
fragmente din alte limbaje bazate pe XML)
- interoperabilitate cu alte formate de date
(bazate pe XML)
- divizare HTML in componente reutilizabile
(XHTML Modularization)

PCW - C2.Recapitulare

DHTML
o Dynamic HTML
o nu este un limbaj
o termen pentru a desemna arta de a
construi pagini web dinamice si interactive
o tehnologii DHTML:
n limbaje de marcare statice (ex. HTML)
n limbaj de definire a prezentarii (CSS)
n limbaj de creare scenarii la nivel de client (ex.
JavaScript)
n DOM Document Object Model
PCW - C3.JavaScript.DOM.Tehnologii XML

Creare scenarii la nivel de client


- JavaScript -

PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
o limbaj de programare destinat crearii de scenarii la
nivelul unei aplicatii client web (scripting)
o utilizat pentru crearea de pagini web interactive
n inserare de text dinamic in HTML (ex: user name)
n reactie la producerea unor events (ex: incarcarea
paginii, user click)
n preluarea de informatii despre calculatorul
utilizatorului (ex: tipul browser-ului)
n realizarea de calcule pe calculatorul utilizatorului
(ex: validarea formularelor)
o standard web (dar nu este suportat in aceeasi
maniera de toate browserele) - ECMAScript
o NU are legatura cu Java decat prin denumire si cateva
similaritati sintactice
PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Diferente intre Javascript si Java
o interpretat nu compilat
o sintaxa si reguli mai relaxate
n mai putine tipuri de date si mai lejere
n nu este necesara declararea variabilelor
n erorile often silent (few exceptions)

o constructia cheie o reprezinta functia si nu


clasa
n procedural SAU orientat obiect ??

o codul este continut intr-o pagina web si se


integreaza cu continutul HTML/CSS al
acesteia
PCW - C3.JavaScript.DOM.Tehnologii XML

Ce poate face un JavaScript?


o inserare text dinamic intr-o pagina HTML
o reactie la evenimente
o citire/scriere elemente HTML
o validare date
o detectare browser
o creare cookies

PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Inserare JavaScript in HTML
codul Javascript poate fi adaugat
intr-o pagina web in trei moduri:
1. in sectiunea body a paginii (ruleaza la
incarcarea paginii)
2. in antetul paginii (ruleaza la aparitia
evenimentelor)
3. intr-o legatura catre un fisier script extern
(.js)
PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Exemplu in HTML body
<body>
...
<script type="text/javascript"> Javascript code
</script>
...
</body>

o ruleaza intotdeauna la incarcarea paginii


o util pentru generarea textului dinamic

PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Exemplu in HTML head
<head>
...
<script type="text/javascript"> Javascript code
</script>
...
</head>
o nu ruleaza decat daca functiile sunt apelate explicit
o util pentru actiunile activate de evenimente
n pop up alert message (ex. cand utilizatorul apasa un
buton)
n afisarea unui mesaj de intampinare la refresh-ul paginii
PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Exemplu legarea unu fisier JavaScript
<script src="filename" type="text/javascript">
</script>
<script src="example.js" type="text/javascript">
</script>

o poate fi plasat in sectiunile head sau body


ale paginii web
o script-ul este stocat intr-un fisier .js
PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Variabile

o
o
o

var name = value;


var clientName = "Connie Client";
var age = 32;
var weight = 137.4;
tipul nu este specificat, desi JavaScript contine tipuri
de date
n valorile sunt deseori convertite intre tipuri in mod
automat, in functie de necesitate
numele variabilelor sunt case sensitive
se declara explicit folosind cuvantul cheie var
se declara implicit prin asignare (daca i se da o
valoare, atunci exista!)
PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Cuvinte cheie
abstract boolean break byte case catch char
class const continue debugger default delete
do double else enum export extends false
final finally float for function goto if
implements import in instanceof int interface
long native new null package private
protected public return short static super
switch synchronized this throw throws
transient true try typeof var void volatile
while with

PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Operatori
+ - * / % ++ -- = += -= *= /= %= ==
!= > < >= <= && || !
o == verifica doar valoarea ("5.0" == 5 este
adevarat)
o === verifica si tipul ("5" === 5 este fals)
o multi operatori fac conversia automata de
tip: 5 < "7" is true
o precedenta este similara cu cea din Java
PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Injectarea dinamica a textului: document.write()

document.write(<p>message</p>");
o afiseaza textul specificat in pagina web
o poate fi utilizat pentru a afisa elemente HTML
o argumentul poate fi un sir de caractere intre
ghilimele sau o variabila

PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Functii
function name(parameterName, ..., parameterName) {
statements;
}
function quadratic(a, b, c) {
return -b + Math.sqrt(b*b - 4*a*c) / (2*a);
}
o tipul parametrilor si tipul de retur nu sunt specificate
n var nu apare la declararea parametrilor
n functiile fara instructiune de retur returneaza o valoare
nedefinita
o orice variabila declarata in interiorul functiei este locala
(exista doar in acea functie)
PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Apelul functiilor
name(parameterValue, ..., parameterValue);
var root = quadratic(1, -3, 2);

o daca se transmite un numar gresit de


parametri:
n prea multi: parametrii in exces sunt
ignorati
n prea putini: cei netransmisi primesc o
valoare nedefinita
PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Tratarea evenimentelor
<h2 onclick="myFunction();">Click me!</h2>
o elementele HTML au atribute speciale denumite
evenimente
o Functiile Javascript pot fi utilizate pentru tratarea
evenimentelor
n functia se va executa la interactiunea cu elementul
respectiv
n onclick este doar un exemplu de atribut HTML de tip
eveniment

PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Tratarea evenimentelor
<h2 onclick="myFunction();">Click me!</h2>
o elementele HTML au atribute speciale denumite
evenimente
o Functiile Javascript pot fi utilizate pentru tratarea
evenimentelor
n functia se va executa la interactiunea cu elementul
respectiv
n onclick este doar un exemplu de atribute HTML de
tip eveniment
PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Functia typeof
typeof(value)
o

Fiind date declaratiile:


n
n

function foo() { alert("Hello"); }


var a = ["Huey", "Dewey", "Louie"];

Urmatoarele propozitii sunt adevarate:


n
n
n
n
n
n
n

typeof(3.14) == "number"
typeof("hello") == "string"
typeof(true) == "boolean"
typeof(foo) == "function"
typeof(a) == "object"
typeof(null) == "object"
typeof(undefined) == "undefined"

PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Obiecte JS
String, Date, Array, Boolean, Math, RegExp
1. var myFruits=new Array();
myFruits[0]=apple;
myFruits[1]=cherry;
myFruits[2]=orange;

2. var myFruits=new Array(apple, cherry,


orange);

3. var myFruits = [(apple, cherry, orange];

PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Obiecte JS - creare obiecte
1. Instantiere directa
personObj=new Object();
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";
2. Creare sablon al unui obiect
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
PCW - C3.JavaScript.DOM.Tehnologii XML

JavaScript
Detectie browser
Obiectul navigator
proprietati:
n appCodeName, appName, appVersion,
cookieEnabled, platform, userAgent

PCW - C3.JavaScript.DOM.Tehnologii XML

HTML DOM

PCW - C3.JavaScript.DOM.Tehnologii XML

Document Object Model (DOM)


o o reprezentare a paginii web
curente sub forma unui set de
obiecte Javascript
o permite vizualizarea/modificarea
elementelor paginii in codul
script, dupa ce pagina a fost
incarcata
n independent de browser
n permite imbunatatirea
progresiva a paginii

o utilizat si pentru parsarea XML


PCW - C3.JavaScript.DOM.Tehnologii XML

Obiecte DOM globale


o window : fereastra browser-ului
o navigator : info despre browser-ul
folosit
o screen : info despre zona de pe ecran
ocupata de browser
o history : lista a paginilor vizitate de
utilizator
o document : pagina HTML curenta
PCW - C3.JavaScript.DOM.Tehnologii XML

Tratarea evenimentelor
<h2 onclick="myFunction();">Click me!</h2>

o elementele HTML au atribute speciale


denumite evenimente
o functiile Javascript pot fi utilizate pentru
tratarea evenimentelor
n functia se va executa la interactiunea cu
elementul respectiv
n attribute HTML de tip eveniment :
onabort, onblur, onchange, onclick, ondblclick,
onerror, onfocus, onkeydown, onkeypress, onkeyup,
onload

PCW - C3.JavaScript.DOM.Tehnologii XML

document object si getElementById


<h2 onclick="makeRed();">Sell</h2>
<p id="announce">Get it while it's hot!</p>
function makeRed() {
var para = document.getElementById("announce");
para.style.color = "red";
}
o
o

metoda getElementById a obiectului document returneaza


un obiect reprezentand un element HTML cu atributul id
furnizat (null daca nu este gasit)
obiectele DOM pentru toate elementele HTML contin
urmatoarele proprietati:
className, id, style, title
PCW - C3.JavaScript.DOM.Tehnologii XML

HTML DOM
o Proprietati
<html>
n x.innerHTML
- the text value of x
<body>
n x.nodeName - the name of x
n x.nodeValue
- the value ofWorld!</p>
x
<p id="intro">Hello
n x.parentNode - the parent node of x
n x.childNodes
- the child nodes of x
<script type="text/javascript">
document.getElementById("intro").childNodes[0].nodeValue;
n x.attributes
- the attributes nodes of x
txt=document.getElementById("intro").innerHTML;
document.write("<p>The text from the intro
o Metode
paragraph: " + txt + "</p>");
n x.getElementById(id)
- get the element with a specified id
</script>
n x.getElementsByTagName(name) - get all elements with a
specified
tag name
</body>
n x.appendChild(node)
- insert a child node to x
</html>
n x.removeChild(node) - remove a child node from x
PCW - C3.JavaScript.DOM.Tehnologii XML

Tehnologii XML

PCW - C3.JavaScript.DOM.Tehnologii XML

Marcarea informatiilor pentru Web


Tehnologii XML
o Familia XML
n XML reprezentarea datelor semistructurate
n Componente de baza
o spatii de nume
o transformarea documentelor XML: CSS, XSL
o validarea documentelor XML: DTD, XML Schema

n Limbaje bazate pe XML


o Procesari XML
n Modelul DOM
n Interfata SAX
o XML pentru servicii Web: REST, AJAX
PCW - C3.JavaScript.DOM.Tehnologii XML

XML - eXtensible Markup Language


o meta-limbaj de marcare
o XML descendent simplificat al SGML,
utilizat in Web
o standard W3C (1998, 2000, 2004)
http://www.w3.org/TR/REC-xml/
o versiuni: XML 1.0, XML 1.1
o proiectat pentru transportul si stocarea
datelor (nu pentru prezentare - HTML)
o marcajele nu sunt predefinite
PCW - C3.JavaScript.DOM.Tehnologii XML

XML - caracterizare
o marcaje descriptive: <para>, <imagine/>
o DTD Document Type Definition
n parti componente + structura
n permite validarea documentelor XML (parser)

o independenta datelor
n comunicarea datelor intre sist. incompatibile
n independenta hardware/software
n extinderea marcajelor

o case-sensitivity
PCW - C3.JavaScript.DOM.Tehnologii XML

XML - trasaturi
o suport Web, implementare in toate
limbajele de programare
o utilizare internationala
n suport pentru Unicode
n independent de codificare si limba

o meta-limbaj
n Permite definirea de noi limbaje, portabil

o solutie pentru reprezentarea continutului


resurselor Web identificate prin URI
PCW - C3.JavaScript.DOM.Tehnologii XML

XML structura documentelor


Constituenti:
n
n
n
n
n
n

declaratia xml
elemente
atribute
entitati
sectiuni de marcare
instructiuni de procesare
PCW - C3.JavaScript.DOM.Tehnologii XML

XML structura arborescenta


<root>
<child>
<subchild>.....</subchild>
</child>
<bookstore>
<book category="CHILDREN">
</root>

<title lang="en">Harry Potter</title>


<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="WEB">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
<book category="COOKING">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
</bookstore>

PCW - C3.JavaScript.DOM.Tehnologii XML

XML structura arborescenta


<root>
<child>
<subchild>.....</subchild>
</child>
<bookstore>
</root>
<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="WEB">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
<book category="COOKING">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
</bookstore>
PCW - C3.JavaScript.DOM.Tehnologii XML

XML Reguli de sintaxa


Document XML bine formatat (well formed):
o toate elementele trebuie sa aiba marcaje
de sfarsit
o marcajele sunt case-sensitive
o elementele XML trebuie imbricate corect
o documentele XML trebuie sa aiba un
element radacina
o valorile atributelor furnizate intre ghilimele
PCW - C3.JavaScript.DOM.Tehnologii XML

XML - constituenti
Declaratia XML
- specifica versiunea si codificarea
documentului
- primul element al documentului
- apare o singura data
- trei atribute posibile:
<?xml version=1.0
encoding=UTF-8
standalone=yes ?>
PCW - C3.JavaScript.DOM.Tehnologii XML

XML - constituenti
Elementele
-

componenta structurala a unui document XML (unitateatext)


specificate prin intermediul marcajelor de inceput si de
sfarsit
<disciplina>PCW</disciplina>
pot avea continut vid
<disciplina></disciplina> sau <disciplina/>
reguli de formare a numelor elementelor:
- contin litere, numere si alte caractere
- nu pot incepe cu un numar sau caracter de punctuatie
- numele incepand cu xml/XML sunt rezervate
- nu pot contine spatii
PCW - C3.JavaScript.DOM.Tehnologii XML

XML - constituenti
Elementele
- trebuie sa fie inchise si imbricate corect
- case-sensitive
- pot contine text si/sau alte elemente
<facultate>
AC are adresa
<adresa>www.ace.tuiasi.ro</adresa>
si este o facultate
</facultate>
<center><p><b>Salut!</b></p></center>

- sunt extensibile
PCW - C3.JavaScript.DOM.Tehnologii XML

XML - constituenti
Elementele
- trebuie sa fie inchise si imbricate corect
- case-sensitive
<bookstore>
<book category="CHILDREN">
<title lang="en">Harry
Potter</title>
- pot contine text si/sau
alte
elemente
<author>J K. Rowling</author>
<ISBN>978-0590353403</ISBN>
<facultate>
<year>2005</year>
AC are adresa
<publisher>Scholastic Press</publisher>
<adresa>www.ace.tuiasi.ro</adresa>
<price>29.99</price>
si este o facultate
</book>
</facultate>

</bookstore>

<center><p><b>Salut!</b></p></center>

- sunt extensibile
PCW - C3.JavaScript.DOM.Tehnologii XML

XML - constituenti
Atribute
-

furnizeaza informatii aditionale despre continut


<book category="CHILDREN">

</book>

apar doar in tag-ul de inceput


scrise intre ghilimele (simple sau duble)
nu sunt acceptate atribute fara valoare
case-sensitive
evitarea atributelor:
- nu pot contine valori multiple
- nu pot contine structuri imbricate
- nu pot fi usor expandate (pentru modificari ulterioare)
metadate > atribute;
date -> elemente
PCW - C3.JavaScript.DOM.Tehnologii XML

XML - constituenti
<message date=12/03/2009>
<from>Tarzan</from>
<to>Jane</to>
furnizeaza informatii<body>Me
aditionale
continut
Tarzan,despre
you Jane</body>
</message>
<book category="CHILDREN">

Atribute
-

<message</book>
<date>12/03/2009</date>
- <from>Tarzan</from>
apar doar in tag-ul de inceput
- <to>Jane</to>
scrise intre ghilimele (simple sau duble)
<body>Me Tarzan, you Jane</body>
</message>
- nu sunt acceptate atribute <message
fara valoare
<date>
- case-sensitive
<day>12</day>
- evitarea atributelor:
<month>03</month>
<year>2009</year>
- nu pot contine valori multiple
</date>
<from>Tarzan</from>
- nu pot contine structuri imricate
<to>Jane</to>
- nu pot fi usor expandate (pentru
modificari
ulterioare)
<body>Me
Tarzan, you
Jane</body>
</message>
- metadate > atribute;
date
-> elemente
PCW - C3.JavaScript.DOM.Tehnologii XML

XML - constituenti

<message id=101
<date>
<day>12</day>
<month>03</month>
<year>2009</year>
</date>
<from>Tarzan</from>
furnizeaza informatii aditionale
despre continut
<book category="CHILDREN"> <to>Jane</to>
<body>Me Tarzan. You Jane</body>

</message>
</book>
<message id=102
apar doar in tag-ul de inceput
<date>
<day>12</day>
scrise intre ghilimele (simple sau
duble)
<month>03</month>
<year>2009</year>
nu sunt acceptate atribute fara
valoare
</date>
case-sensitive
<from>Jane</from>
<to>Tarzan</to>
evitarea atributelor:
<body>Show me the
jungle</body>
- nu pot contine valori multiple
</message>

Atribute
-

- nu pot contine structuri imricate


- nu pot fi usor expandate (pentru modificari ulterioare)
metadate > atribute;
date -> elemente
PCW - C3.JavaScript.DOM.Tehnologii XML

XML - constituenti
Referinte la entitati
-

entitate XML = unitate de text (un singur caracter,


un alt document)
constructia sintactica:
&nume_entitate; sau &#numar;
entitati predefinite:
Entitate

Referinta la entitatate

<

&lt;

>

&gt;

&

&amp

&apos;

&quot;

PCW - C3.JavaScript.DOM.Tehnologii XML

XML - constituenti
Sectiuni de marcare

- anumite parti din document necesita


procesari speciale:
- CDATA (character data) inhiba
procesarea XML
- ex.: includerea de cod sursa
- sintaxa: <![CDATA[]]>
- sectiunile CDATA nu pot fi imbricate
PCW - C3.JavaScript.DOM.Tehnologii XML

XML - constituenti
<script type=text/javascript>
/*<![CDATA[*/
function matchwo(a,b) {
if (a < b && a < 0) then {
return 1;
}
else {
return 0;
}
}
/*]]>*/
</script>

Sectiuni de marcare

- anumite parti din document necesita


procesari speciale:
- CDATA (character data) inhiba
procesarea XML
- ex.: includerea de cod sursa
- sintaxa: <![CDATA[]]>
- sectiunile CDATA nu pot fi imbricate
PCW - C3.JavaScript.DOM.Tehnologii XML

XML - constituenti
Instructiuni de procesare
-

includ informatii privitoare la aplicatiile (externe) care


urmeaza a fi executate pentru procesarea continutului
<?nume_apl ?>
nume_apl nu poate fi xml

ex.: invocare interpretor php


<script>
<?php echo <p>Salut!\n</p>; ?>
</script>

ex.: asociere foi de stiluri


<?xml:stylesheet type=text/css href=stil.css ?>

PCW - C3.JavaScript.DOM.Tehnologii XML

Tehnologii XML Familia XML


o XML (eXtensible Markup Language)
o XSL (eXtensible Stylesheet language)
n transformarea documentelor XML in alte tipuri de
documente (XML, XHTML, etc.)
n atasare obiecte de formatare pentru redarea
continutului in alte formate (ex. PDF)
o XQuery + XPath
n interogarea documentelor XML
o XLL (eXtensible Linking Language)
n ofera suport pentru specificarea de legaturi hipertext
n XLink descrierea legaturilor
n XPointer scheme de adresare a datelor XML
PCW - C3.JavaScript.DOM.Tehnologii XML

Aplicatii XML
o

Formatarea continutului
n
n
n
n
n

in cadrul navigatorului Web: XHTML


in medii mobile, fara fir: WML (Wireless Markup Language)
formulare electronice XForms
grafica vectoriala: SVG (Scalable Vector Graphics)
grafica 3D: X3D (Extensible Three Dimensions)

Reprezentarea diferitelor tipuri de continut


n
n
n
n
n

expresii matematice: MathML


continut multimedia sincronizat: SMIL (Synchronized
Multimedia Integration Language)
informatii vocale: VoiceXML
componente ale interfetei cu utilizatorul: XUL (Extensible Userinterface Language), XAML (Extensible Application Markup
Language)
stocarea informatiilor prelucrate de suite de birou (ex.
OpenOffice): OpenDocument
PCW - C3.JavaScript.DOM.Tehnologii XML

Aplicatii XML (cont.)


o Descrierea resurselor Web
n cadrul general: RDF (Resource Description
Frameweork)
n exprimarea vocabularelor de meta-date: RSS (Really
Simple Syndication), Atom
n exprimarea de ontologii: OWL (Web Ontology
Language)
o Descrierea serviciilor Web
n serializarea datelor transmise conform paradigmei
RPC (Remote Procedure Call): XML-RPC
n descrierea serviciilor Web: WSDL (Web Service
Description Language)
n exprimarea protocolului de transfer: SOAP (Simple
Object Access Protocol)
PCW - C3.JavaScript.DOM.Tehnologii XML

Instrumente XML
o analizoare (Expat, libxml, MSXML, Xerces)
o vizualizatoare (Firefox, OpenOffice, <oXygen/>,
XMLSpy, Stylus, etc)
o formatatoare (FOP, Saxon, Xalan, XEP, etc)
o instrumente de convertire/arhivare (Tidy, OpenSP)
o sisteme de gestiune a bazelor de date orientate pe
text (dbXML, eXist, etc)
o biblioteci/sisteme de procesare a meta-datelor
(Drive.NET, Jena, etc.)
o instrumente de modelare conceptuala (pOWL)
o aplicatii din domeniul social (blog-uri, portaluri, wikiuri, etc.)
PCW - C3.JavaScript.DOM.Tehnologii XML

Familia XML componente de baza


1. Spatiile de nume
2. Transformarea documentelor XML
3. Validarea documentelor XML

PCW - C3.JavaScript.DOM.Tehnologii XML

Spatii de nume
-

date din diverse surse XML => conflicte de nume


spatiu de nume (namespace): vocabular utilizat
pentru identificarea in mod unic a elementelor si a
<!- carti -->
atributelor
<book>
<title>The Godfather</title>
<author>Mario Puzo</author>
<year>1969</year>
<genre>crime</genre>
</book>
<! persoane -->
<person>
<title>Mr.</title>
<name>John Doe</name>
<email>johndoe@mail.com</email>
</person>

PCW - C3.JavaScript.DOM.Tehnologii XML

Spatii de nume
- vocabularul poate fi desemnat de un URI
- atributul xmlns specifica acest URI,
atasand optional un identificator unic
fiecarui vocabular folosit
- QName nume calificat: prefix:nume
- declarare implicita sau explicita

PCW - C3.JavaScript.DOM.Tehnologii XML

Spatii de nume
- vocabularul poate fi desemnat de un URI
<lentBook xmlns:b=http://www.library.com/books/>
<b:book>
<b:title>The Godfather</b:title>
<b:author>Mario Puzo</b:author>
<b:year>1969</b:year>
<b:genre>crime</b:genre>
</b:book>
<p:person xmlns:p=http://www.library.com/people/>
<p:title>Mr.</p:title>
<p:name>John Doe</p:name>
<p:email>johndoe@mail.com</p:email>
</p:person>
<lentBook>

- atributul xmlns specifica acest URI,


atasand optional un identificator unic
fiecarui vocabular folosit

- QName nume calificat: prefix:nume


- declarare implicita sau explicita

PCW - C3.JavaScript.DOM.Tehnologii XML

Transformarea documentelor XML


o Un document XML separa continutul de
maniera de formatare/procesare
o Pentru a prezenta utilizatorului datele XML,
trebuie specificata o modalitate de redare
(asa-numita foaie de stiluri stylesheet)
o Solutii:
CSS (Cascading Style Sheet)
sintaxa non-XML, flexibilitate limitata, nu exista
context

XSL (Extensible Stylesheet Language)


sintaxa XML, flexibilitate mai mare, procesare in
functie de context, se pot opera modificari de
structura XML,...
PCW - C3.JavaScript.DOM.Tehnologii XML

Transformarea documentelor XML


Strategii:
o 1 foaie de stiluri, N documente
n se mentine consistenta formatului pentru
documente multiple
n usor de dezvoltat, aplicat si controlat

o N foi de stiluri, 1 document


n se permit formatari diferite in functie de mediile
de redare (ecran, imprimanta, etc) sau de
preferinte (ex. skin-uri)
n usor de produs documente derivate: selectii,
sumarizari, indexari, cataloage,
PCW - C3.JavaScript.DOM.Tehnologii XML

Transformarea documentelor XML


Prezentarea continutului XML via CSS
<!-- xml file -->
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>

</CATALOG>
PCW - C3.JavaScript.DOM.Tehnologii XML

<!-- css file -->


CATALOG {
background-color: #ffffff;
width: 100%;
}
CD {
display: block;
margin-bottom:
30pt;
<!-- xml file
-->
margin-left:
0;
<?xml version="1.0"
encoding="ISO-8859-1"?>
}
<?xml-stylesheet
type="text/css" href="cd_catalog.css"?>
TITLE
{
<CATALOG>
color: #FF0000;
<CD>
font-size: 20pt;
<TITLE>Hide
your heart</TITLE>
}
<ARTIST>Bonnie
Tyler</ARTIST>
ARTIST {
<COUNTRY>UK</COUNTRY>
color: #0000FF;
font-size:
20pt;
<COMPANY>CBS
Records</COMPANY>
}
<PRICE>9.90</PRICE>
COUNTRY,PRICE,YEAR,COMPANY {
<YEAR>1988</YEAR>
display: block;
</CD>
color: #000000;

margin-left: 20pt;
</CATALOG>
}

Transformarea documentelor XML


Prezentarea
continutului XML
via CSS

PCW - C3.JavaScript.DOM.Tehnologii XML

Transformarea documentelor XML


XSL eXtensible Stylesheet Language
o

o
o

Scopuri:
n Transformarea structurii/continutului documentelor XML
n Rescrierea documentelor XML => documente
XML/XHTML/alte formate
Inspirat din DSSSL (Document Style Semantics and Specification
Language) folosit pentru SGML
Trei componente:
n XSLT (XSL Transformations) limbaj pentru transformarea
documentelor XML
n XPath limbaj pentru navigare in documente XML
n XSL-FO (XSL Formatting Objects) limbaj pentru formatarea
documentelor XML pe baza unor obiecte de formatare

o Limbaj descriptiv bazat pe reguli, orientat-evenimente


PCW - C3.JavaScript.DOM.Tehnologii XML

Transformarea documentelor XML


XSL eXtensible Stylesheet Language
o Document XML arbore de noduri
o Tipuri de noduri :

n Radacina, Elemente, Text, Atribute, Spatii de


nume, Instructiuni de procesare, Comentarii
n pentru noduri de tip text caracterele rezervate
trebuie rescrise cu entitati
o
o
o
o

Reguli compuse dintr-un pattern (model) si o actiune


Modelul este exprimat in XPath
Actiunea este specificata in XSLT
Transformarile se aplica recursiv tuturor nodurilor XML
care satisfac modelul/sabloanele de reguli (patternmatching)
PCW - C3.JavaScript.DOM.Tehnologii XML

XPath
o

Recomandare a Consortiului Web (1999)


http://www.w3.org/TR/xpath

o
o
o
o
o

Adreseaza parti dintr-un document XML


Ofera facilitati de baza pentru manipularea sirurilor, numerelor,
Opereaza la nivelul structurii abstracte a documentelor XML
(arborele)
Constructia de baza este expresia XPath
Evaluarea se realizeaza in functie de context:
n
n
n
n

Un nod al documentului XML


Pozitie
Functie de biblioteca
Declaratie a unui spatiu de nume

In urma evaluarii expresiei este returnat un obiect:


n
n
n
n

Multime de noduri (node-set)


Boolean (true, false)
Numar (float)
Sir de caractere
PCW - C3.JavaScript.DOM.Tehnologii XML

XPath
Operatori:
n
n
n
n
n
n
n
n

descendent /
traversare recursiva //
wildcard *
nodul curent .
atribut @
spatiu de nume ::
filtru/index []
pentru booleeni si numere: operatorii uzuali
o or and = != <= < >= >
o + - * div mod
PCW - C3.JavaScript.DOM.Tehnologii XML

XPath
Exemple:
o table/tr[@align=center or
@valign=top]
n selecteaza elementele dintr-un element <tr> avand
specificate atributele align=center sau
valign=top din cadrul unui element <table>

o capitol/nume | capitol/autor
n va furniza toate elementele <nume> si <autor>
descendente ale elementului <capitol>
PCW - C3.JavaScript.DOM.Tehnologii XML

XPath
Functii de baza:
o Noduri: id(), position(), count(),
name(), namespace-uri(), last(),
o Tipuri de noduri: node(), text(),
comment(), processing-instruction()
o Siruri: concat(), starts-with(),
contains(), substring(), stringlength(), translate(),
o Booleeni: not(), true(), false(),
o Numere: sum(), round(), floor(),
number(),
PCW - C3.JavaScript.DOM.Tehnologii XML

<?xml version="1.0" encoding="ISO-8859-1"?>


<bookstore>
/bookstore/book/title/text()
<book category="COOKING">
<title lang="en">Everyday Italian</title> Everyday Italian
<author>Giada De Laurentiis</author> Harry Potter
<year>2005</year>
XQuery Kick Start
<price>30.00</price>
Learning XML
</book>

XPath - exemple

<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>

/bookstore/book[1]/price/text()
30.00
/bookstore/book[price>35]/price

<book category="WEB">
49.99
<title lang="en">XQuery Kick Start</title>
39.95
<author>James McGovern</author>
<author>Per Bothner</author>
/bookstore/book[@category=
<year>2003</year>
WEB']/title
<price>49.99</price>
</book>
XQuery Kick Start
Learning XML
<book category="WEB">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
PCW - C3.JavaScript.DOM.Tehnologii XML
</bookstore>

XSLT
XSLT XSL Transformations
o Recomandare a ConsortiuluiWeb (1999)
http://www.w3.org/TR/xslt

o Transforma documentele XML in alte tipuri de


continut (XML, HTML, text etc.)
o Gandit pentru a fi parte din XSL
(XSL XSLT + XSL-FO)
http://www.w3.org/TR/xsl
http://www.w3.org/TR/xml-stylesheet/

o Poate fi utilizat independent de XSL


PCW - C3.JavaScript.DOM.Tehnologii XML

XSLT
o pentru a putea fi folosite, constructiile XSLT trebuie
sa apartina spatiului de nume desemnat de URI-ul:
http://www.w3.org/1999/XSL/Transform

o o foaie de stiluri XSLT are drept element radacina


<xsl:stylesheet> sau <xsl:transform>
o include sabloane de transformare (macar un sablon
la nivelul radacina)
o pentru transformare se utilizeaza expresii XPath
folosite la:
n selectarea nodurilor dorite a fi procesate
n specificarea conditiilor de procesare
n generarea textului de iesire (ex. HTML)
PCW - C3.JavaScript.DOM.Tehnologii XML

<?xml version="1.0" encoding="ISO-8859-1"?>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet
version="1.0"
<?xml-stylesheet type="text/xsl"
href="style.xsl"?>
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<bookstore>

XSLT - exemplu

<xsl:template match="/">
<book category="COOKING">
<html>
<title lang="en">Everyday
Italian</title>
<author>Giada De Laurentiis</author>
<body>
<year>2005</year> <h2>My Book Collection</h2>
<price>30.00</price>
<table border="1">
</book>
<tr bgcolor="#9acd32">
<th>Title</th>
<book category="CHILDREN">
<th>Author</th>
<title lang="en">Harry Potter</title>
<th>Year</th>
<author>J K. Rowling</author>
<year>2005</year> </tr>
<price>29.99</price><xsl:for-each select="bookstore/book">
</book>
<tr>
<td><xsl:value-of select="title"/></td>
<book category="WEB"> <td><xsl:value-of select="author"/></td>
<title lang="en">XQuery Kick Start</title>
<td><xsl:value-of select="year"/></td>
<author>James McGovern</author>
</tr>
<author>Per Bothner</author>
<year>2003</year> </xsl:for-each>
<price>49.99</price>
</table>
</book>
</body>
</html>
<book category="WEB">
</xsl:template>
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
</xsl:stylesheet>
<year>2003</year>
<price>39.95</price>
PCW - C3.JavaScript.DOM.Tehnologii XML
</book>
</bookstore>

XSLT
Modelul XSLT
o o lista de noduri sursa este procesata pentru a genera un
fragment de arbore de noduri destinatie (output)
o initial se proceseaza nodul radacina, la care se insereaza
noduri copil generate de sabloane aplicate unei liste de
noduri selectate (recursiv) prin pattern-matching via
expresii XPath
Reguli de aplicare XSLT
o regulile sabloanelor identifica noduri asupra carora se vor
aplica transformari
o selectarea nodurilor se face prin XPath
o un sablon se defineste prin elementul <xsl:template>
o aplicarea unui sablon se realizeaza cu elementul
<xsl:apply-templates>
PCW - C3.JavaScript.DOM.Tehnologii XML

XSLT
Crearea arborelui de iesire
o intr-un sablon, orice elemente ce nu apartin
spatiului de nume XSLT sunt copiate (fara a fi
operate modificari) in arborele de iesire
o pot fi generate si alte tipuri de noduri:
<xsl:element>, <xsl:attribute>, <xsl:text>,
<xsl:comment> etc.
o extragerea unor valori se face prin elementul
<xsl:value-of>
o controlul iesirii: <xsl:output>

PCW - C3.JavaScript.DOM.Tehnologii XML

XSLT
Programe XSLT
o

Constructii repetitive:
n

Constructii de test:
n

<xsl:sort>

Includerea de alte foi de stiluri:


n

<xsl:copy>, <xsl:copy-of>

Sortarea nodurilor:
n

<xsl:if>, <xsl:choose>, <xsl:when>, <xsl:otherwise>

Copierea nodurilor:
n

<xsl:for-each>

<xsl:include>

Variabile si parametri:
n

<xsl:variable>, <xsl:param>

PCW - C3.JavaScript.DOM.Tehnologii XML

XSLT
Functii XSLT de baza:
o nodul curent:
n current()

o verifica existenta unei functii:


n function-available()

o formateaza valori numerice:


n format-number()

o ofera informatii privitoare la sistemul de


procesare:
n system-property()
PCW - C3.JavaScript.DOM.Tehnologii XML

Validarea documentelor XML


Necesitati:
- informatiile marcate in XML sa poata fi
regasite, reutilizate si partajate intre
aplicatii
- cunoasterea:
n elementelor/atributelor ce pot fi specificate
n modului lor de structurare (e.g., ordinea,
numarul minim/maxim de aparitii,...)
n tipului continutului
n ce este valid si ce reprezinta eroare
PCW - C3.JavaScript.DOM.Tehnologii XML

Validarea documentelor XML


Solutie:
- specificarea modelului structural al
documentului (multimea de elemente si
atribute permise si regulile de marcare)
- realizata de:
-

companii (Adobe XMP, Sun - JSP)


industrie (dispozitive mobile - WML)
persoane ce impartasesc un scop comun
(dezvoltatori ai OpenOffice)
producatori de instrumente specifice (Microsoft,
Oracle)
consortii, organizatii non-profit (W3C, OASIS)
PCW - C3.JavaScript.DOM.Tehnologii XML

Validarea documentelor XML


o Modelul structural
n se aplica unei clase de documente XML,
in vederea verificarii corectitudinii
instantelor apartinand clasei

o Se au in vedere:
n
n
n
n

numirea elementelor/atributelor
definirea regulilor de utilizare a acestora
specificarea structurii si continutului
oferirea unui set de conventii de numire
PCW - C3.JavaScript.DOM.Tehnologii XML

Validarea documentelor XML


o specificarea unui set de constrangeri
asociate documentelor
o modalitati de specificare:
n descrieri DTD, XMLSchema
o exista un element <student> avand un atribut
nume care are continutul
n reguli Schematron
o orice element <student> va avea un atribut
nume, iar continutul acestui atribut se va
conforma regulii
n sabloane RELAX NG
o orice document din clasa student trebuie sa se
potriveasca urmatorului sablon
PCW - C3.JavaScript.DOM.Tehnologii XML

Validarea documentelor XML


DTD Document Type Definition
- specificare formala a tipurilor de
documente (constituenti + structura)
- documentele XML pot avea sau nu un
DTD atasat
- daca DTD-ul lipseste, documentul
trebuie sa respecte un numar minim
de constrangeri (sa fie bine formatat
- well formed)
PCW - C3.JavaScript.DOM.Tehnologii XML

Validarea documentelor XML


DTD Document Type Definition
- intern sau extern documentului
- regulile sintactice de specificare a metaelementelor DTD provin de la SGML
- DTD-ul poate defini:
-

structura continutului
indicatori de aparitie
conectori
exceptii
PCW - C3.JavaScript.DOM.Tehnologii XML

Validarea documentelor XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE book SYSTEM Book.dtd">
<bookstore>
<book>
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<ISBN>978-0590353403</ISBN>
<year>2005</year>
<price>29.99</price>
</book>
</bookstore>

DTD Document Type Definition

- intern sau extern documentului


- regulile sintactice de specificare a metaelementelor DTD provin de la SGML
- DTD-ul poate defini:
<!DOCTYPE bookstore [
bookstore
(book+)>
- <!ELEMENT
structura
continutului
<!ELEMENT book (title, author, ISBN, year, price)>
title
- <!ELEMENT
indicatori
de(#PCDATA)>
aparitie
<!ELEMENT author (#PCDATA)>
ISBN (#PCDATA)>
- <!ELEMENT
conectori
<!ELEMENT year (#PCDATA)>
price (#PCDATA)>
- <!ELEMENT
exceptii
<!ATTLIST title lang (en|fr|de|ro) en>
]>
PCW - C3.JavaScript.DOM.Tehnologii XML

Validarea documentelor XML


XMLSchema
- alternativa la DTD, bazata pe XML
- descrie structura unui document XML
- XML Schema Definition (XSD)
- avantaje:
- extensibile
- mai bogate si mai puternice decat DTD
- scrise in XML
- suporta tipuri de date
- suporta spatii de nume
- se foloseste spatiul de nume definit de
http://www.w3.org/2001/XMLSchema
PCW - C3.JavaScript.DOM.Tehnologii XML

Validarea documentelor XML


XMLSchema
Defineste:
elementele ce pot aparea intr-un document
atributele ce pot aparea intr-un document
elementele care sunt de tip child
numarul de elemente child
daca un element este vid sau daca poate
include text
o tipurile de date pentru elemente si atribute
o valori implicite si fixe pentru elemente si
atribute
o
o
o
o
o

PCW - C3.JavaScript.DOM.Tehnologii XML

<?xml version="1.0" encoding="ISO-8859-1"?>


<book
xmlns=http://www.somebookstore.com
xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance
xsi:schemaLocation="http://www.somebookstore.com book.xsd">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<ISBN>978-0590353403</ISBN>
<year>2005</year>
<price>29.99</price>
</book>

Validarea documentelor XML


XMLSchema
Defineste:

o elementele ce pot aparea intr-un document


<?xml version="1.0"?>
o atributele
ce pot aparea intr-un document
<xs:schema
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name=book">
<xs:complexType>
o elementele
care sunt de tip child
<xs:sequence>
<xs:element
name=title"child
type="xs:string"/>
o numarul
de elemente
<xs:element name=author" type="xs:string"/>
<xs:element
name=ISBN"
type="xs:string"/>
o daca un
element
este
vid
sau daca poate
<xs:element name=year" type="xs:unsignedInt"/>
include<xs:element
text name=price" type="xs:float"/>
</xs:sequence>
</xs:complexType>
o tipurile
de date pentru elemente si atribute
</xs:element>
</xs:schema>
o valori implicite si fixe pentru elemente si
atribute
PCW - C3.JavaScript.DOM.Tehnologii XML