Programare WEB - Curs 5

Programare Web - Curs 5
Scurtă recapitulare – noțiuni de teorie prezentate în laboratoare:
HTML (Hyper Text Markup Language) este limbajul folosit pentru a

crea pagini web. Hyper Text se referă la textul care este conectat prin
link-urile dintr-o pagină web. Un limbaj de marcare este folosit pentru
a specifica soft-ului, precum un browser web cum să afișeze textul și
ce să facă cu el. HTML este un limbaj de marcare, ce conține un set de
tag-uri, pentru a descrie documente sau pagini web. Fiecare tag HTML,
descrie în mod diferit conținutul documentului.
În exemplul anterior, declarația DOCTYPE definește tipul de

document, ce va fi HTML5 și ajută browser-ul să afișeze o pagină web
corect. Toate documentele HTML trebuie să înceapă cu această
declarație (nu este case sensitive). Încă din 1991 au fost multe
versiuni de HTML, ultima, HTML5 fiind din 2012.
Textul dintre <html> și </html> descrie documentul HTML.
Textul dintre <head> și </head> oferă informații despre

document.
Textul dintre <title> și </title> oferă titlul documentului

HTML, nu în document ci în tab-ul browser-ului.
Textul dintre <body> și </body>, sau corpul documentului, descrie

conținutul vizibil al paginii.
Textul dintre <h1> și </h1> descrie un heading. Heading-urile sunt

definite de tag-urile <h1> până la <h6>, <h1> definind pe cel mai
important heading. Acestea nu se folosesc pentru a face textul mai
mare sau text îngroșat, ci pentru a arăta structura unui document.
Tag-ul <head> nu are legătură cu heading. Acesta conține meta-date

(date despre datele din documentul HTML) ce nu sunt afișate, el fiind
amplasat între tag-ul <html> și <body>.
Textul dintre <p> și </p> descrie un paragraf. Documentele HTML

sunt împărțite în paragrafe. În mod automat, browser-ele adaugă o
linie goală înainte și după un paragraf. Browser-ul va scoate extra
spațiile și extra liniile (orice număr de spații și orice număr de linii se
socotește ca un singur spațiu), atunci când este afișată pagina. Dacă
se dorește afișarea cu spațiere se poate folosi elementul <pre> care
definește un bloc de text pre-formatat.
Astfel, conform exemplului anterior, un browser web va afișa un

document cu heading și paragraf.
Tag-urile HTML reprezintă cuvinte cheie, între paranteze unghiulare,

fiind în perechi, primul tag este cel de început (opening tag), al doilea,
scris la fel ca și primul dar cu / în față, este tag-ul de sfârșit (closing

tag). Astfel un element HTML este:
<tagname> CONȚINUT </tagname>
Versiuni mai stricte de HTML, precum XHTML, nu permit

neînchiderea unui tag.
Unele elemente HTML nu au tag de sfârșit. De exemplu: <br>, sau

<hr> ce semnifică trecerea pe o nouă linie (line break) sau delimitarea
printr-o linie orizontală a conținutului. Unele elemente HTML nu au
conținut, deci sunt goale și se pot scrie <br/>
Observație: HTML5 nu necesită ca elementele goale să fie închise.
Scopul unui browser web este citirea documentelor HTML și afișarea

lor. Browser-ul nu afișează tagurile, ci doar conținutul acestora. Ceea
ce se va afișa în browser este în zona cuprinsă între <body> și
</body>.
Exisă numeroase tipuri de editoare HTML, mai mult sau mai puțin
profesionale: Adobe Dreamweaver, Microsoft Expression Web,
Notepad… Fișierul salvat cu codul HTML va avea extensia .htm sau
.html
Toate elementele HTML pot avea atribute specificate în tag-ul de

început, ce oferă informație adițională despre element. Link-urile
către alte pagini sunt definite prin folosirea tag-ului <a>, exemplu:
<a href=”https://edu.csed.ugal.ro/”> Acesta este un link

</a>. Adresa link-ului este specificată cu ajutorul atributului href .
Imaginile HTML sunt definite cu tag-ul <img> ce conține atribute

nume="valoare", de tipul src, alt, sau mărimea pozei dată de width
și height în pixeli. Exemplu:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" heigh

t="142">
Atributele uzuale folosite în HTML sunt:
alt, ce specifică un text alternativ pentru o imagine,
id, ce specifică un id unic pentru un element,
src, ce specifică adresa web URL pentru o imagine,
value, ce specifică valoarea unui element introdus.
Orice element HTML are un stil implicit (default): culoarea de

background este albă, culoarea textului este neagră, mărimea textului
este de 12 px. Schimbarea stilului implicit al documentului HTML se
face cu atributul style, folosind diverse proprietăți ale acestuia
precum culoarea fundalului, culoarea textului, fontul și mărimea
acestuia . Acesta are următoarea sintaxă: style="proprietate:valoare".
În exemplul anterior, s-a schimbat culoarea de background cu

galben, culorile textului în roșu și albastru, fontul și mărimea
acestuia, alinierea pe orizontală a textului.
Elementele de formatare a textului precum <b> sau <i> sunt

elemente speciale, folosite pentru anumite tipuri de text, ce au o
anume semnificație, de exemplu, text îngroșat sau înclinat. Diferența
dintre tag-urile <b> și <strong> / <i> și <em> este dată de

importanța textului, conținutul ambelor fiind afișate ca și text boldat
/ text italic.
Se pot folosi diverse elemente de formatare, precum:
<small> ce definește un text mai mic,
<mark> ce definește un text marcat, evidențiat,
<del> ce definește un text șters, eliminat,
<ins> ce definește un text inserat, adăugat,
<sub> ce definește un text sub-script,
<sup> ce definește un text supra-script,
<q> ce definește un citat scurt, între ghilimele,
<blockquote> ce definește un citat mai lung,
<abbr title="World Wide Web">WWW</abbr> ce definește un

acronim, o abreviere,
<dfn> ce definește definiția unui termen sau o abreviere. Dacă este

prezent și atributul title al elementului <dfn>, atunci va fi definit
termenul. Dacă elementul <dfn> conține un element <abbr> cu un
titlu, atunci acel titlu definește termenul.
<adress> ce definește informații de contact ale autorului

documentului sau articolului. Elementul, de obicei este afișat înclinat.
Majoritatea browserelor vor adăuga o linie înainte și după element.
<cite> ce definește titlul unei opere. Browserele vor afișa

elementul scris cu text înclinat.
<bdo dir="rtl"> Acest text va fi scris de la dreapta

la stângawill be written from right to left</bdo>
ce definește supra-scrierea bi-direcțională. Dacă browserele suportă
bdo, atunci textul va fi scris de la dreapta la stânga.
<code>
var persoană = { firstName:"Ion",
lastName:"Vasile", age:50, eyeColor:"green" }
</code> ce definește text sub forma unui cod de programare. Dacă
se dorește o aranjare a codului cu spațiere se poate folosi elementul
<pre> care definește un bloc de text pre-formatat.
<samp> ce definește text sub forma output-ului computerului.
<var> ce definește o variabilă.

DOM și jQuery
Până acum am folosit JavaScript pentru a face lucruri relativ simple,
precum afișarea unui text în consolă sau afișarea unei ferestre de tip
alert sau prompt. JavaScript poate fi folosit pentru a manipula
(controla sau modifica) și interacționa cu HTML-ul din paginile web. În
JavaScript există două unelte: DOM și jQuery, care permit scrierea
unui cod mai bun.
DOM – Document Object Model – este unealta care permite
JavaScript-ului să acceseze conținutul unei pagini web. Browser-ele
web folosesc DOM pentru a urmări elementele din pagină, precum
paragrafe, heading-uri și alte elemente HTML. JavaScript poate
manipula elementele DOM în diverse moduri.
jQuery este o unealtă ce oferă un set de funcții pe care le putem folosi
pentru a alege cu ce elemente vom lucra și ce schimbări să facem
asupra lor.
Vom folosi DOM și jQuery pentru a edita elementele DOM existente și
pentru a crea noi elemente DOM, permițând control complet asupra
conținutului paginii web din JavaScript. Vom folosi jQuery pentru a
anima elemente DOM.
1. Selectarea elementelor DOM

Atunci când este încărcat un document HTML într-un browser, acesta
convertește elementele într-o structură de tip arbore. Acest arbore
este cunoscut ca arborele DOM. În figură este prezentat un arbore
DOM simplu, pentru a reprezenta ierarhia unui document simplu
HTML:
Browser-ele oferă programatorilor JavaScript o cale de a accesa și

modifica această structură arborescentă folosind o colecție de metode
numite DOM.
1.1. Folosirea lui id pentru a identifica elemente

Atributul id oferă posibilitatea de a atribui un nume unic sau
identificator unui element HTML. De exemplu, elementul h1 are un
atribut id:
În acest exemplu, id-ul lui main-heading ne permite identificarea și

eventual schimbarea acestui heading particular fără a afecta alte
elemente sau chiar alte h1 heading-uri.
1.2. Selectarea unui element folosind getElementById

Având un element identificat unic prin id (fiecare id trebuie să aibă

o valoare unică), putem folosi metoda
document.getElementById pentru a returna main-
heading-ul elementului:
Prin apelarea acestei metode, browser-ul va căuta elementul cu id-ul

lui main-heading. Acest apel returnează un obiect DOM care
corespunde cu id-ul. Salvăm acest obiect DOM în variabila
headingElement. Odată selectat un element, acesta poate fi
manipulat cu ajutorul lui JavaScript. De exemplu, putem folosi
proprietatea innerHTML pentru a recupera și înlocui textul din
interiorul elementului selectat:
Acest cod returnează conținutul HTML al lui headingElement,

elementul pe care l-am selectat folosind getElementById. În
acest caz, conținutul acestui element este textul Salut! introdus
între tag-urile <h1>.
1.3. Înlocuirea textului din Heading folosind DOM

Un exemplu de înlocuire a textului din heading folosind DOM:
dom.html:
La linia 11, folosim document.getElementById pentru a obține

elementul h1 ( cu id-ul lui main-heading) și îl salvăm în variabila
headingElement.
La linia 12 afișăm șirul returnat de
headingElement.innerHTML, adică se afișează Salut! în
consolă și în pagină.
La linia 13 folosim o fereastră de dialog de tip prompt pentru a cere
utilizatorului un nou heading și salvăm textul introdus de utilizator în
variabila newHeadingText.
La linia 14 setăm proprietatea innerHTML a lui headingElement
cu textul salvat anterior în newHeadingText.
Atunci când vom încărca pagina dom.html, vom avea o fereastră
prompt, de forma:
Dacă introducem textul: Cursul 3 Programare Web în prompt și

apăsăm pe OK, vom observa o actualizare imediată a heading-ului cu
noul text introdus. Folosind proprietatea innerHTML, putem
schimba conținutul oricărui element DOM folosind JavaScript.
2. Folosirea lui jQuery pentru a lucra cu arborele DOM

Metodele din DOM nu sunt foarte ușor de folosit. Mulți dezvoltatori
folosesc un set de unelte numit jQuery pentru a accesa și manipula
arborele DOM. jQuery este o librărie JavaScript – o colecție de funcții
care oferă un mod mai ușor de lucru cu elementele DOM. Odată
încărcată librăria în pagină, se pot folosi funcțiile și metodele acesteia.
2.1. Încărcarea lui jQuery în pagina HTML

Pentru a folosi librăria jQuery în browser:
Observați că tag-ul <script> din codul de mai sus nu are conținut,

dar are atributul src. Acest atribut ne permite să inserăm un fișier
JavaScript în pagină folosind URL-ul acestuia (adresa web). În acest
caz, https://code.jquery.com/jquery-2.2.1.js reprezintă URL-ul pentru
o versiune specifică de jQuery (versiunea 2.2.1) de pe website-ul
jQuery. Pentru a vedea librăria, vizitați acest URL.
2.2. Înlocuirea textului din Heading folosind jQuery

În 1.3 am văzut cum înlocuim textul din heading folosind metodele din
DOM. În această secțiune vom actualiza acel cod pentru a folosi jQuery
pentru a înlocui textul.
Deci, documentul jQuery.html:
La linia 10 am adăugat un nou tag <script> în pagină pentru a

încărca jQuery. Odată încărcată librăria, la linia 15 folosim funcția $
pentru a selecta un element HTML. Funcția $ are un argument, numit
șir selector, care-i spune lui jQuery ce element (sau elemente) să
selecteze din arborele DOM. În acest caz, am introdus “#main-
heading” ca și argument. Caracterul # dintr-un șir selector
înseamnă ID, adică șirul selector “#main-heading” înseamnă
elementul cu id-ul lui main-heading.
Funcția $ returnează un obiect jQuery ce reprezintă elementele
selectate. De exemplu, $(“#main-heading”)întoarce un obiect
jQuery pentru elementul h1(care are id-ul lui main-heading).
La linia 15, avem un obiect jQuery ce reprezintă elementul h1. Putem
modifica textul prin apelarea metodei text asupra obiectului
atribuindu-i noul text pentru acel element și înlocuind textul din
heading cu ceea ce a introdus utilizatorul, adică ceea ce a fost salvat
în variabila newHeadingText.
Astfel, ca și mai înainte, la încărcarea paginii într-un browser, va apare

o fereastră de dialog de tip prompt în care va trebui introdus noul text
care-l va înlocui pe Salut!
2.3. Crearea de noi elemente folosind jQuery

Pe lângă manipularea elementelor cu ajutorul librăriei jQuery, putem
folosi această librărie pentru a crea noi elemente și a le adăuga la
arborele DOM. Pentru a realiza acest lucru, apelăm metoda append
pe un obiect jQuery cu un șir ce conține HTML. Metoda append
convertește șirul într-un element DOM (folosind tag-uri HTML în șir) și
adaugă noul element la finalul celui original.
De exemplu, pentru a adăuga un element p, la finalul unei pagini,
putem adăuga:
Prima parte a acestei afirmații folosește funcția $ cu șirul selector

"body" pentru a selecta corpul documentului HTML. Șirul selector nu
trebuie să fie un id. Codul $("body") selectează elementul body.
De asemenea, putem folosi $("p") pentru a selecta toate elementele
p. Apoi, se apelează metoda append pentru obiectul întors de
$("body") . Șirul întors de append este transformat într-un element
DOM și este adăugat în interiorul elementului body , chiar înainte de
tag-ul de închidere. Putem folosi de asemenea append pentru a
adăuga mai multe elemente într-o buclă for, precum aceasta:
Această buclă va merge de 3 ori. De fiecare dată, va apare un prompt

ce va cere utilizatorului să introducă unul din hobby-uri. Fiecare din
hobby-urile introduse, va fi pus apoi în interiorul unui set de tag-uri

<p> și apoi trecut în metoda append, care va adăuga hobby-ul la
finalul elementului body. Dacă se adaugă codul de mai sus în
documentul jQuery.html, se observă cele 3 prompt-uri și hobby-urile
amintite.
2.4. Animarea elementelor cu jQuery

Multe site-uri web folosesc animații pentru a arăta sau ascunde
conținut. De exemplu, dacă adăugați un nou paragraf de text în
pagină, poate doriți să apară încet, nu totul deodată. Folosind metoda
fadeout din jQuery animarea elementelor devine ușoară.
Pentru a testa această metodă, se folosește codul următor într-un nou
script în jQuery.html :
Folosim funcția $ pentru a selecta toate elementele h1. Deoarece

jQuery.html are un singur element h1 (heading-ul care conține noul
text introdus în prompt), acel heading va fi selectat ca un obiect
jQuery. Prin apelarea lui .fadeOut(5000) asupra acestui obiect
jQuery, se va estompa textul până când va dispare total în cursul a 5
secunde.
2.5. Înlănțuirea animațiilor jQuery

Atunci când se apelează o metodă pentru un obiect jQuery, de obicei
metoda întoarce obiectul original pentru care a fost apelată. De
exemplu, $("h1") întoarce un obiect JQuery ce reprezintă toate
elementele h1, iar $("h1").fadeOut(5000) întoarce același

obiect jQuery ce reprezintă toate elementele h1.
Pentru a schimba textul din elementul h1 și a-l estompa se introduce:
Apelarea a mai multor metode într-un singur rând se numește

înlănțuire.
Putem face mai multe animații pe același element. De exemplu:
Metoda de animare fadeIn face ca un element invizibil să devină

vizibil. Astfel, codul anterior va estompa elementul h1 pentru 3
secunde și apoi îl va face vizibil în timp de alte 3 secunde. JQuery oferă
alte 2 metode de animare similare cu fadeOut și fadeIn numite
slideUp și slideDown. Prima face ca elementele să dispară
alunecând în sus, a doua metodă face ca elementele să apară
alunecând în jos:
Astfel, înlocuind al doilea element script din documentul jQuery.html
cu următorul cod și reîncărcând pagina, se observă ceea ce am spus
înainte.

Programare WEB - Curs 5

Î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

Programare WEB - Curs 5

Încărcat de

Drepturi de autor:

Formate disponibile

Programare Web - Curs 5

Scurtă recapitulare – noțiuni de teorie prezentate în laboratoare:

HTML (Hyper Text Markup Language) este limbajul folosit pentru a

În exemplul anterior, declarația DOCTYPE definește tipul de

Textul dintre <html> și </html> descrie documentul HTML.

Textul dintre <head> și </head> oferă informații despre

Textul dintre <title> și </title> oferă titlul documentului

Textul dintre <body> și </body>, sau corpul documentului, descrie

Textul dintre <h1> și </h1> descrie un heading. Heading-urile sunt

Tag-ul <head> nu are legătură cu heading. Acesta conține meta-date

Textul dintre <p> și </p> descrie un paragraf. Documentele HTML

Astfel, conform exemplului anterior, un browser web va afișa un

Tag-urile HTML reprezintă cuvinte cheie, între paranteze unghiulare,

scris la fel ca și primul dar cu / în față, este tag-ul de sfârșit (closing

<tagname> CONȚINUT </tagname>

Versiuni mai stricte de HTML, precum XHTML, nu permit

Unele elemente HTML nu au tag de sfârșit. De exemplu: <br>, sau

Observație: HTML5 nu necesită ca elementele goale să fie închise.

Scopul unui browser web este citirea documentelor HTML și afișarea

Toate elementele HTML pot avea atribute specificate în tag-ul de

<a href=”https://edu.csed.ugal.ro/”> Acesta este un link

Imaginile HTML sunt definite cu tag-ul <img> ce conține atribute

<img src="w3schools.jpg" alt="W3Schools.com" width="104" heigh

Atributele uzuale folosite în HTML sunt:

alt, ce specifică un text alternativ pentru o imagine,

id, ce specifică un id unic pentru un element,

src, ce specifică adresa web URL pentru o imagine,

value, ce specifică valoarea unui element introdus.

Orice element HTML are un stil implicit (default): culoarea de

În exemplul anterior, s-a schimbat culoarea de background cu

Elementele de formatare a textului precum <b> sau <i> sunt

dintre tag-urile <b> și <strong> / <i> și <em> este dată de

Se pot folosi diverse elemente de formatare, precum:

<small> ce definește un text mai mic,

<mark> ce definește un text marcat, evidențiat,

<del> ce definește un text șters, eliminat,

<ins> ce definește un text inserat, adăugat,

<sub> ce definește un text sub-script,

<sup> ce definește un text supra-script,

<q> ce definește un citat scurt, între ghilimele,

<blockquote> ce definește un citat mai lung,

<abbr title="World Wide Web">WWW</abbr> ce definește un

<dfn> ce definește definiția unui termen sau o abreviere. Dacă este

<adress> ce definește informații de contact ale autorului

<cite> ce definește titlul unei opere. Browserele vor afișa

<bdo dir="rtl"> Acest text va fi scris de la dreapta

<samp> ce definește text sub forma output-ului computerului.

<var> ce definește o variabilă.

1. Selectarea elementelor DOM

Browser-ele oferă programatorilor JavaScript o cale de a accesa și

1.1. Folosirea lui id pentru a identifica elemente

În acest exemplu, id-ul lui main-heading ne permite identificarea și

1.2. Selectarea unui element folosind getElementById

Având un element identificat unic prin id (fiecare id trebuie să aibă

Prin apelarea acestei metode, browser-ul va căuta elementul cu id-ul

Acest cod returnează conținutul HTML al lui headingElement,

1.3. Înlocuirea textului din Heading folosind DOM

La linia 11, folosim document.getElementById pentru a obține

Dacă introducem textul: Cursul 3 Programare Web în prompt și

2. Folosirea lui jQuery pentru a lucra cu arborele DOM

2.1. Încărcarea lui jQuery în pagina HTML

Observați că tag-ul <script> din codul de mai sus nu are conținut,

2.2. Înlocuirea textului din Heading folosind jQuery