C3t JavaScript - tehnologiiXML

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

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
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>
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
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
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)
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
Creare scenarii la nivel de client

- JavaScript -
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
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
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
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)
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
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
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
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!)
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
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
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
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)
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
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
JavaScript
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
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"
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];
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");
JavaScript
Detectie browser
Obiectul navigator
proprietati:
n appCodeName, appName, appVersion,
cookieEnabled, platform, userAgent
HTML DOM
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

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
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
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
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
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
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
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
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
XML structura documentelor

Constituenti:
n
n
n
n
n
n
declaratia xml
elemente
atribute
entitati
sectiuni de marcare
instructiuni de procesare
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>
</book>
<book category="COOKING">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
</book>
</bookstore>
XML structura arborescenta

<root>
<child>
<subchild>.....</subchild>
</child>
<bookstore>
</root>
<year>2005</year>
</book>
<year>2003</year>
</book>
<title lang="en">Everyday Italian</title>
<year>2005</year>
</book>
</bookstore>
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
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 ?>
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
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
XML - constituenti
Elementele
- trebuie sa fie inchise si imbricate corect
- case-sensitive
<bookstore>
<title lang="en">Harry
Potter</title>
- pot contine text si/sau
alte
elemente
<ISBN>978-0590353403</ISBN>
<facultate>
<year>2005</year>
AC are adresa
<publisher>Scholastic Press</publisher>
<adresa>www.ace.tuiasi.ro</adresa>
si este o facultate
</book>
</facultate>
</bookstore>
<center><p><b>Salut!</b></p></center>
- sunt extensibile
XML - constituenti
Atribute
-
furnizeaza informatii aditionale despre continut

</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
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>
Atribute
-
<message</book>
<date>12/03/2009</date>
- <from>Tarzan</from>
- <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>
</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
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
<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>
</message>
Atribute
-
- nu pot contine structuri imricate

- nu pot fi usor expandate (pentru modificari ulterioare)
metadate > atribute;
date -> elemente
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
<
<
>
>
&
&amp
'
"
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
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
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 ?>
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
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
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)
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.)
Familia XML componente de baza

1. Spatiile de nume
2. Transformarea documentelor XML
3. Validarea documentelor 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>
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
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
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,...

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,

Prezentarea continutului XML via CSS

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


CATALOG {
background-color: #ffffff;
width: 100%;
}
CD {
display: block;
margin-bottom:
30pt;

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

Prezentarea
continutului XML
via CSS

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


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)
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
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
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>
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(),

<bookstore>
/bookstore/book/title/text()
<title lang="en">Everyday Italian</title> Everyday Italian
<author>Giada De Laurentiis</author> Harry Potter
<year>2005</year>
XQuery Kick Start
Learning XML
</book>
XPath - exemple
<year>2005</year>
</book>
/bookstore/book[1]/price/text()
30.00
/bookstore/book[price>35]/price
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
</book>
XQuery Kick Start
Learning XML
<year>2003</year>
</book>
</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

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)

<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="/">
<html>
<title lang="en">Everyday
Italian</title>
<body>
<year>2005</year> <h2>My Book Collection</h2>
<table border="1">
</book>
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Author</th>
<th>Year</th>
<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>
</table>
</book>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
<year>2003</year>
</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>
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>
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>
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()
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

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)

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

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

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)

- 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

<!DOCTYPE book SYSTEM Book.dtd">
<bookstore>
<book>
<ISBN>978-0590353403</ISBN>
<year>2005</year>
</book>
</bookstore>
- 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>
]>

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

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

<book
xmlns=http://www.somebookstore.com
xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance
xsi:schemaLocation="http://www.somebookstore.com book.xsd">
<ISBN>978-0590353403</ISBN>
<year>2005</year>
</book>

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

C3t JavaScript - tehnologiiXML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

C3t JavaScript - tehnologiiXML

Încărcat de

Drepturi de autor:

Formate disponibile

Programarea Clientului Web

asist. dr. ing. Simona Caraiman

Universitatea Tehnica Gheorghe Asachi din Iasi

URI, URL, URN, IRI

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

programare browser Web

PCW - C3.JavaScript.DOM.Tehnologii XML

GML predecesor al SGML

SGML predecesor al XML

Limbaje de marcare a documentelor:

Limbaje de marcare pentru content syndication:

Hypertext Markup Language (HTML)

Structura unei pagini HTML

header descrie pagina

GML (IBM Charles Goldfarb, 60)

2004: Web Hypertext Application Technology Working Group (WHATWG)

Creare scenarii la nivel de client

PCW - C3.JavaScript.DOM.Tehnologii XML

o constructia cheie o reprezinta functia si nu

o codul este continut intr-o pagina web si se

Ce poate face un JavaScript?

PCW - C3.JavaScript.DOM.Tehnologii XML

o ruleaza intotdeauna la incarcarea paginii

PCW - C3.JavaScript.DOM.Tehnologii XML

o poate fi plasat in sectiunile head sau body

var name = value;

PCW - C3.JavaScript.DOM.Tehnologii XML

PCW - C3.JavaScript.DOM.Tehnologii XML

o daca se transmite un numar gresit de

PCW - C3.JavaScript.DOM.Tehnologii XML

Fiind date declaratiile:

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

Urmatoarele propozitii sunt adevarate:

PCW - C3.JavaScript.DOM.Tehnologii XML

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

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

PCW - C3.JavaScript.DOM.Tehnologii XML

PCW - C3.JavaScript.DOM.Tehnologii XML

PCW - C3.JavaScript.DOM.Tehnologii XML

Document Object Model (DOM)

o utilizat si pentru parsarea XML

Obiecte DOM globale

o elementele HTML au atribute speciale

PCW - C3.JavaScript.DOM.Tehnologii XML

document object si getElementById

metoda getElementById a obiectului document returneaza

PCW - C3.JavaScript.DOM.Tehnologii XML

Marcarea informatiilor pentru Web

n Limbaje bazate pe XML

XML - eXtensible Markup Language

o solutie pentru reprezentarea continutului

XML structura documentelor

XML structura arborescenta

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

PCW - C3.JavaScript.DOM.Tehnologii XML

XML structura arborescenta

XML Reguli de sintaxa

componenta structurala a unui document XML (unitateatext)

furnizeaza informatii aditionale despre continut

apar doar in tag-ul de inceput

- nu pot contine structuri imricate

entitate XML = unitate de text (un singur caracter,

PCW - C3.JavaScript.DOM.Tehnologii XML