Dezvoltarea aplicaţiilor Web la nivel de client (cursul #11): Programare Web. Suita de tehnologii...
-
Upload
sabin-buraga -
Category
Technology
-
view
236 -
download
4
description
Transcript of Dezvoltarea aplicaţiilor Web la nivel de client (cursul #11): Programare Web. Suita de tehnologii...
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
suita de tehnologii HTML5
programare Web la nivel de client
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“If you can dream it, you can do it.”
Walt Disney
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Care este prezentul și viitorulprogramării Web la nivel de client?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
un vocabular (set de elemente + atribute)folosit pentru marcarea paginilor Web
+o suită de API-uri facilitând procesarea documentelor
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
permite dezvoltarea standardizată de aplicații Webpe baza unor API-uri specificate formal
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
permite dezvoltarea standardizată de aplicații Webpe baza unor API-uri specificate formal
API-urile sunt definite de interfețedescrise via limbajul declarativ WebIDLW3C Candidate Recommendation, 2012
http://www.w3.org/TR/WebIDL/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
recurge la tehnologii înrudite referitoare la
prezentare: CSS – nivelul 3model conceptual (abstract): DOM
procesare: JavaScript
…și altele
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
recurge la tehnologii înrudite referitoare la
prezentare: CSS – nivelul 3model conceptual (abstract): DOM
procesare: JavaScript
…și altele API-urispecifice
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
inițial, o propunere independentă de Consorțiul Web
WHATWG (Web Hypertext Application TechnologyWorking Group) compus din Apple, Mozilla, Opera
www.whatwg.org
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
www.whatwg.org/specs/web-apps/current-work/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
în curs de standardizare la Consorțiul Web
Candidate Recommendation (august 2013)
http://www.w3.org/TR/html5/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
diverse specificații HTML5în lucru:
http://dev.w3.org/html5/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
specificațiile redactate de W3C și de WHATWGsunt diferite
conținut, frecvența actualizărilor, licență de utilizare
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Ce aduce nou HTML5?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Relaxarea corectitudinii la nivel de sintaxă
HTML
și/sau
XHTML
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Relaxarea corectitudinii la nivel de sintaxă
text/html
versus
application/xhtml+xml
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
specificarea tipului de documentse poate realiza în mod simplificat:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<title>…</title>
<meta charset="utf-8" />
…
</head>
<body>
…
</body>
</html>
spațiul de numerămâne neschimbat
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Modelul de reprezentare internă este bazat pe DOM
DOM HTML5
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Modelul de reprezentare internă este bazat pe DOM
DOM HTML5
eventual, arborele DOM – regăsit la nivel de browservia un obiect de tip Document – poate fi redat (accesat)
de către o extensie/plug-in
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Modelul de reprezentare internă este bazat pe DOM
DOM HTML5
orice document Web este identificatde o adresă unică (URL) ce poate fi manipulată via DOM
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
detalii privind elementele (marcajele) și atributele aferente:
http://docs.webplatform.org/wiki/html
a se vizita și HTML5 Doctorhttp://html5doctor.com/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Noi elemente de structurare (secțiuni)
în stilul POSH – Plain Old Semantic HTML
article, nav, aside, section, header, footer etc.
de studiat Ș. Negru, Web LSD (Logic, Semantics and Design)http://slid.es/blankdots/weblsd
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Embedded content
“scufundarea” altor tipuri de conținuturiîntr-un document HTML
conținut grafic – raster și/sau vectorialconținut sonorconținut video
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Embedded content
svg
conținut grafic vectorialspecificat prin SVG (Scalable Vector Graphics)
un limbaj descriptiv bazat pe XML
http://www.w3.org/Graphics/SVG/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8cm" height="3cm">
<title>Conținut grafic SVG</title><defs>
<linearGradient id="unGradient"> <!-- definim un degradé liniar --><stop offset="20%" stop-color="#3FF" /><stop offset="90%" stop-color="#F3F" />
</linearGradient><rect id="patrat" width="15px" height="15px" fill="navy" /><path id="cale" d="M15 50 C10 0 90 0 90 40" /> <!-- o cale de redare -->
</defs><!-- o formă rectangulară umplută cu degradé-ul de mai sus --><rect x="1cm" y="1cm" width="6cm" height="1cm" fill="url(#unGradient)" /><!-- folosim instanțe ale pătratului definit --><use x="40" y="40" xlink:href="#patrat" /><use x="100" y="80" xlink:href="#patrat" /><use x="160" y="80" xlink:href="#patrat" /><use x="220" y="80" xlink:href="#patrat" /><!-- un text redat conform căii specificate --><text fill="#000"><textPath xlink:href="#cale">Salut, lume!</textPath></text>
</svg>
studiu de caz: grafică vectorială cu SVG
C. Bulancea & S. Buraga, 2004
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
studiu de caz: grafică vectorială cu SVG
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
un experiment de editare on-line cu instrumentul JS Binincluderea construcțiilor SVG – aici, <rect> și <circle> –
direct în documentul HTML5
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Embedded content
svg
specificația curentă: SVG 1.1 2nd Edition (2011)în contextul dispozitivelor mobile: SVG Tiny (2008)
suport în cadrul navigatoarelor moderne Chrome, Firefox, IE9+, Opera, Safari (inclusiv pentru iOS)
biblioteci JavaScript: Raphaël.js, Snap.svg, svg.js,…
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
exemple demonstrative: http://svg-wow.org/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
animații SVG realizate dinamic via biblioteca Raphaël
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Embedded content
math
expresii matematice exprimate via limbajul MathML
un limbaj declarativ bazat pe XML
http://www.w3.org/Math/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Embedded content
math
specificația curenta: MathML 3.0 (2010)
o listă a instrumentelor software lahttp://www.w3.org/Math/Software/
suport nativ oferit de Firefox, Safari și Blackberry
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
exemplu demonstrativ oferit de Mozilla – Mathzillahttps://developer.mozilla.org/docs/Mozilla_MathML_Project
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Embedded content
alături de elementele img, iframe, embed și object,sunt permise audio, video, source
ce pot fi utilizate la includerea de conținut multimedia
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Embedded content
elementele audio și video
implementează interfața HTMLMediaElement
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
interface HTMLMediaElement : HTMLElement {
readonly attribute MediaError error;
attribute DOMString src;
readonly attribute DOMString currentSrc;
attribute DOMString preload;
readonly attribute TimeRanges buffered;
attribute double currentTime;
readonly attribute double duration;
readonly attribute boolean paused;
attribute boolean autoplay;
attribute boolean loop;
attribute boolean controls;
attribute double volume;
attribute boolean muted;
void load ();
void play ();
void pause ();
};
principalele atribute șimetode ale interfeței
HTMLMediaElement
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<video id="film" src="/media/tux.ogg" controls autoplay>
Nu există suport pentru elementul video… :-(
</video>
…
<script type="text/javascript">
// preluăm conținutul video
var video = document.getElementById ('film');
</script>
<p>
<input type="button" value="Oprește"
onclick="video.pause ();" />
<input type="button" value="Rulează"
onclick="video.play ();" />
</p>
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Embedded content
principalele evenimente ce pot fi tratateîn ceea ce privește conținutul audio/video:
loadstart progress suspend abort error
stalled play pause loadeddata
waiting playing seeking
canplay seeked timeupdate ended
ratechange durationchange volumechange
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<source src='fii-absolvent.mp4'
type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"' />
<source src='fii-absolvent.mkv'
type='video/x-matroska; codecs="theora, vorbis"' />
<source src='discursul-lui-tux.oga'
type='audio/ogg; codecs=flac' />
precizarea codec-urilornecesare redării
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<source src='fii-absolvent.mp4'
type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"' />
<source src='fii-absolvent.mkv'
type='video/x-matroska; codecs="theora, vorbis"' />
<source src='discursul-lui-tux.oga'
type='audio/ogg; codecs=flac' />
precizarea codec-urilornecesare redării
codec-uri uzuale:H.264 (MP4 – comercial, susținut de Apple și Microsoft;
actualmente, orice browser Web îl acceptă)www.h264info.com
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<source src='fii-absolvent.mp4'
type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"' />
<source src='fii-absolvent.mkv'
type='video/x-matroska; codecs="theora, vorbis"' />
<source src='discursul-lui-tux.oga'
type='audio/ogg; codecs=flac' />
precizarea codec-urilornecesare redării
codec-uri uzuale:OGG (Theora – disponibil open-source;
implementat de Chrome, Firefox și Opera)www.xiph.org/ogg/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<source src='fii-absolvent.mp4'
type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"' />
<source src='fii-absolvent.mkv'
type='video/x-matroska; codecs="theora, vorbis"' />
<source src='discursul-lui-tux.oga'
type='audio/ogg; codecs=flac' />
precizarea codec-urilornecesare redării
codec-uri uzuale:WebM (o inițiativă Google – open source;
suport oferit de Chrome, Firefox și Opera)www.webmproject.org
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Embedded content
elementul track permite specificarea de piste (track-uri)ce pot include subtitrări, descrieri, capitole, meta-date
<video src="http://videolectures.net/eswc2013_staab_semantic_web/">
<track kind="subtitles" src="..." srclang="en" label="English" />
<track kind="captions" src="..." srclang="en"
label="English for the Hard of Hearing" />
<track kind="subtitles" src="..." srclang="ro" label="Românește" />
</video>
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
statistici actuale privind redarea conținutului via <video>
(inclusiv la nivelul dispozitivelor mobile)www.longtailvideo.com/html5
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
În ceea ce privește redarea conținutului video, de interes poate fi și Fullscreen API
specificație în lucru la Consorțiul Web, dar implementată de majoritatea navigatoarelor
www.w3.org/TR/fullscreen/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Embedded content
canvas
suport pentru grafica raster (bitmap)generată dinamic via JavaScript
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interfața HTMLCanvasElement
scop:generarea dinamică de conținut grafic
dependent de rezoluția curentă
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interfața HTMLCanvasElement
specificație W3C: Candidate Recommendation (august 2013)
context de redare:conținut grafic 2D transparent de tip raster
www.w3.org/TR/2dcontext/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
interface HTMLCanvasElement : HTMLElement {
// specifică zona rectangulară de redare a conținutului
attribute unsigned long width;
attribute unsigned long height;
// metodă care oferă contextul redării conținutului
object getContext (in DOMString contextId, in any... args);
// metodă ce întoarce un URL folosind schema data:
// pentru accesul la conținutul generat
DOMString toDataURL
(in optional DOMString type, in any... args);
};
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interfața HTMLCanvasElement
este asociată elementului HTML5 canvas
contextul 2D de redare a conținutul generat dinamicde script-urile operând asupra obiectului canvas este
specificat formal de interfața CanvasRenderingContext2D
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Elementul canvas – interfața CanvasRenderingContext2D
transformări geometrice de bază:
scale()
rotate()
translate()
transform()
setTransform()
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Elementul canvas – interfața CanvasRenderingContext2D
generarea de căi grafice (paths):
lineTo() moveTo() rect() arc() fill() stroke() clip()
arcTo() quadraticCurveTo() bezierCurveTo()
beginPath() closePath()
isPointInPath()
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Elementul canvas – interfața CanvasRenderingContext2D
manipularea zonelor rectangulare:
strokeRect()
fillRect()
clearRect()
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Elementul canvas – interfața CanvasRenderingContext2D
crearea degradé-urilor:
createLinearGradient()
createRadialGradient()
createPattern()
plus addColorStop() – oferită de interfața CanvasGradient
vezi și CSS3
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Elementul canvas – interfața CanvasRenderingContext2D
specificarea de conținuturi textuale:
font
textAlign
fillText()
strokeText()
measureText()
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Elementul canvas – interfața CanvasRenderingContext2D
suport pentru redarea umbrelor:
shadowOffsetX
shadowOffsetY
shadowColor
shadowBlur
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Elementul canvas – interfața CanvasRenderingContext2D
manipularea conținutului grafic:
createImageData()
getImageData()
putImageData()
vezi interfața ImageData
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Elementul canvas – interfața CanvasRenderingContext2D
operații cu imagini:
drawImage()
save()
restore()
globalAlpha
globalCompositeOperation
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<!DOCTYPE html><html><head>
<title>Corola de minuni</title></head><script type="text/javascript" src="discuri.js"></script><body onclick="javascript:deseneazaDiscuri()">
<h1>Un click…</h1><canvas id="canvas"
height="500" width="375">
</canvas></body></html>
generareaunei corole de minuni
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
function deseneazaDiscuri() {// preluăm contextul de redare 2Dvar context =
document.getElementById ('canvas').getContext ('2d');
// stabilim parametrii corpului de literăcontext.font = "20pt sans-serif"; context.fillText ("o minune", 5, 30);
// translăm...context.translate (75, 75);
programul JavaScript(discuri.js) generând conținutul
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
for (var i = 1; i < 5; i++) { // vom genera 'inele' de discuri// salvăm contextul de redarecontext.save ();// stabilim via CSS3 culoarea de umplere a discului curent// și ajustăm aleatoriu transparența (alpha)context.fillStyle = 'rgba(33,' + (51 * i) + ',' + (255 - 51 * i) + ','
+ Math.random() + ')';
for (var j = 0; j < i * 6; j++) { // desenăm discuricontext.rotate (Math.PI * 2 / (i * 6));context.beginPath ();context.arc (0, i * 12.5, 5, 0, Math.PI * 2, true);context.fill ();
}// restăuram contextul de redarecontext.restore ();
}}
programul JavaScript(discuri.js) generând conținutul
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
un posibil rezultat al execuției codului
Sabin Buraga < [email protected] >
exemple, tutoriale și resurse:www.html5canvastutorials.com
www.canvasdemos.com
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
vizualizarea datelor:redarea în <canvas> a unui grafic cu biblioteca Flotr2http://humblesoftware.com/flotr2/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interfața HTMLCanvasElement
alternativă de redare:conținut grafic 3D pe baza WebGL
implementare JavaScript a standardului OpenGL ES 2.0specificație în lucru (Khronos Group, noiembrie 2013)
http://www.khronos.org/webgl/
http://webglplayground.net/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
WebGL implementat de Chrome, Firefox, MSIE 11+, Safari etc.vezi Shader Editor oferit de instrumentele de dezvoltare din Firefox: https://hacks.mozilla.org/2013/11/live-editing-webgl-shaders-with-firefox-developer-tools/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<script id="shader-vs" type="x-shader/x-vertex">
// codul-sursă implementând un vertex shader (OpenGL)
</script>
<script id="shader-fs" type="x-shader/x-fragment">
// codul-sursă al unui fragment shader (OpenGL)
</script>
<script type="text/javascript">
// cod JavaScript recurgând la WebGL
</script>
…
<body onload="webGLStart ();">
<canvas id="spatiu3D" width="1024" height="768"></canvas>
</body>
tutorial WebGL: http://learningwebgl.com/blog/?page_id=1217
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
biblioteci JS: CopperLicht, CubicVR, PhiloGL,SceneJS, TDL (ThreeD Library), Three.js,…
diverse exemple demonstrative: http://tutorialzine.com/2013/09/20-impressive-examples-for-learning-webgl-with-three-js/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Formulare HTML5
formularele Web pot include noi tipuri de câmpuri
search
tel url email
datetime date
number
range
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Tip Data type Control type search Text with no line breaks Search field
tel Text with no line breaks A text field url An absolute URL A text field
email An e-mail address or list of e-mail addresses A text field
datetime A date and time (year, month, day, hour, min., sec., fraction of a second) with the time zone set to UTC
A date & time control
date A date (year, month, day) with no time zone A date control
month A date consisting of a year & a month
with no time zone A month control
week A date consisting of a week-year number and
a week number with no time zone A week control
time A time (hour, minute, seconds, fractional seconds) A time control
number A numerical value A text field/
spinner control
range A numerical value, with the extra semantic
that the exact value is not important A slider control
or similar
color An sRGB color
with 8-bit red, green, and blue components A color wheel
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<label>Adrese suplimentare:<input type="email" multiple
list="adrese" name="cc" /></label> … <datalist id="adrese">
<option value="[email protected]" /> <option value="[email protected]" /> <option value="[email protected]" />…
</datalist>
<input type="date" max="2000-12-31" name="zi-nastere" />
<input type="range" min="1" max="7" step="2" name="premii" />
pentru detalii, de studiat http://diveintohtml5.info/forms.html
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Formulare HTML5
elemente noi asigurând interactivitatea:
details
summary
command
menu
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<!-- specificarea unui grup de comenzi -->
<menu type="toolbar">
<command type="radio" radiogroup="aliniere"
label="La stanga" icon="icons/align-left.png"
onclick="setAlign ('left')" checked="checked" />
<command type="radio" radiogroup="aliniere"
label="Centrat" icon="icons/align-center.png"
onclick="setAlign ('center')" />
<command type="radio" radiogroup="aliniere"
label="La dreapta" icon="icons/align-right.png"
onclick="setAlign ('right')" />
<command type="command" disabled="disabled"
label="Publica" icon="icons/publish.png"
onclick="publish ()" />
</menu>
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Atribute definite de programator(custom HTML5 attributes)
într-un document HTML5 pot fi incluse atribute proprii(prefixate cu data-)
pot stoca valori private disponibile la nivel de pagină/aplicație Web
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<div id="utilizator" data-id="1234" data-user="tux" data-date-of-birth>
Tuxy Pinguinescu</div>
var elem = document.querySelector ('#utilizator'); // obținem datele
// elem.id == 'utilizator'
// elem.dataset.id === '1234'
// elem.dataset.dateOfBirth === '' (data de naștere n-a fost precizată)
elem.dataset.dateOfBirth = '1990-12-07'; // stabilim când s-a născut
el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true
folosirea consolei navigatorului Web pentru accesarea & modificarea atributelor data-
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
❄❄
❄❄
❄❄
episodul viitor: vacanța de iarnă ☃
❄