Scribd
Încărcați
13 vizualizări26 pagini

TW Lab3

Documentul prezintă noțiuni teoretice despre JavaScript și DOM pentru crearea elementelor dinamice și validarea formularelor. Se explică tipurile de date, variabile, operatori, instrucțiuni, funcții, obiecte, evenimente și modul de accesare a elementelor din pagină prin DOM.

Încărcat de

Ciobanu Stas
Drepturi de autor
© © All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
13 vizualizări26 pagini

TW Lab3

Documentul prezintă noțiuni teoretice despre JavaScript și DOM pentru crearea elementelor dinamice și validarea formularelor. Se explică tipurile de date, variabile, operatori, instrucțiuni, funcții, obiecte, evenimente și modul de accesare a elementelor din pagină prin DOM.

Încărcat de

Ciobanu Stas
Drepturi de autor
© © All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
Sunteți pe pagina 1/ 26

Departamentul Informatică şi

Ingineria Sistemelor

RAPORT
despre lucrarea de
laborator nr.3

la Tehnologii Web

Tema: Crearea
elementelor dinamice
JavaScript și
verificarea
formularelor

A îndeplinit: st.gr. CR-221fr, Ciobanu Stanislav

A controlat: lect.univ., Rusu Viorel

Chişinău, 2024
Introducere
În cadrul acestei lucrări de laborator, care are un rol mai mult introducere în bazele
limbajului JavaScript, v-om realiza utilizarea crearea elementelor dinamice în cadrul paginii și
verificarea formularelor. Mai întâi de toate, v-om realiza crearea meniurilor derulante utilizând
JS (în cadrul lucrărilor anterioare am utilizat în aceste scopuri doar CSS). Apoi, în restul părților
lucrării, v-om crea imagini defilante, v-om afișa data și timpul curent în timp real prin utilizarea
SetTimeOut, ClearTimeOut și SetInterval. La fel, v-om verifica și valida formulare și v-om
realiza alte implementări utile (deja la propria dorință) site-ului nostru utilizând JS.
Realizarea lucrării
Haideți mai întâi de toate să realizăm analiza noțiunilor teoretice cu care v-om avea de-a
face în cadrul lucrării, studiind materialele didactice oferite de profesor pe platforma ELSE.
În primul rând... ce este JS? JavaScript este un limbaj de scripting client-side (rulează la
nivelul browser-ului), ce a fost dezvoltat pentru a prelucra informațiile din formulare și a
adăuga dinamism paginilor web. JavaScript este un limbaj interpretat, încorporat de regulă în
paginile HTML. Deși există o oarecare confuzie din cauza asemănării numelui, JavaScript este
defapt un limbaj absolut diferit față de Java, denumirea inițială a acestuia fiindcă LiveScript.
JavaScript are o sintaxă asemănătoare limbajului C sau Java. Acesta este dependent de mediu –
software-ul pe care rulează de fapt programul este browser-ul web (Firefox, Opera, Netscape
Navigator, Internet Explorer, Safari, etc.).
Ce putem face cu JavaScript? Acesta oferă design-erilor HTML posibilitarea de a
executa script-uri la nivelul browser-ului. JavaScript poate reacționa la evenimente, astfel poate
fi configurat să execute o anumită operație atunci când se întâmplă ceva, de exemplu s-a
terminat de încărcat pagina sau user-ul a făcut click pe un element HTML. JavaScript poate citi
și scrie elemente HTML, schimbându-le conținutul. JavaScript poate fi utilizat pentru a valida
datele din formulare înainte de a fi trimise către server. La fel, poate fi utilizat pentru a detecta
tipul browser-ului – în funcție de acesta poate încărca o pagină sau alta (acest lucru poate evita
apariția unor probleme de incompatibilitate cu versiuni mai vechi ale browser-elor). Printre
altele, JavaScript poate fi utilizat pentru a manipula și seta cookie-uri.
Înserarea de cod JavaScript într-o pagină HTML se face prin intermediul tag-ului
<script> în interiorul căruia deja se scriu instrucțiunile propriu-zise. Însă totuși JavaScript nu e
întotdeauna disponibil, astfel unele browsere mai vechi nu recunosc tag-ul <script> și vor
ignora tag-ul script dar vor afișa codul JavaScript inclus. Pentru a evita acest lucru folosim o
sintaxă specială, adică cuprindem instrucțiunile JavaScript în cadrul unui comentariu HTML.
Astfel codul v-a fi precedat de <!-- care este secvența de start a unui comentariu HTML. Pentru
ca motorul de JavaScript să ignore secvența de sfârșit --> a comentariului HTML, utilizăm
secvența // care indică un cometariu JavaScript. Uneori utilizatori pot dezactiva în scopuri de
securitate de la nivelul browser-ului execuția JavaScript-urilor. În acest caz putem afișa un
mesaj folosind următoarea secvența <noscript>.
Cât ține de utilizarea codului JS, putem utiliza JavaScript atât în secțiunea <head> cât şi
în <body>, însă totuși funcţiile JavaScript se definesc de regulă în <head>, deoarece acest
lucru asigură că acea funcţie este încărcată înainte de fi nevoie de ea. Codul JavaScript din
<body> se va executa în momentul în care este încărcată pagina. Script-urile JavaScript pot fi
definite într-un fișier extern cu extensia .js, avantajul fiind că acest fișier poate fi inclus în mai
multe pagini HTML. Includerea unui fișier .js într-o pagină HTML se face de regulă în tag-ul
<head> printr-o construcție de forma <script type="text/javascript"
src="/cale/numefiser.js"></script>. Apropo în cadrul standardului nou HTML5 indicarea
atributului type nu este obligatorie. JavaScript poate fi utilizat și în obiecte de tip form, de
exemplu butoane, acest cod JavaScript se va executa când obiectul este folosit.
JavaScript are trei tipuri primare și anume number, string și boolean, orice altceva
este obiect. Numerele sunt memorate întotdeauna în virgulă flotantă. Numerele hexazecimale
încep cu 0x, iar cele în baza 8 încep cu 0 (lucru, pe care nu toate browser-ele îl suportă). String-
urile sunt secvențe de caractere cuprinse între ghilimele sau apostroafe, ce pot conține \n
(newline), \" (ghilimele), etc. Valorile boolene pot fi true sau false, astfel 0, "0", string-urile
vide, undefined, null, și NaN sunt considerate false, pe când orice altceva este considerat true.
Sintaxa declarării unei variabile constă în utilizarea cuvântului-cheie var, urmat de
numele acesteia. Numele variabilelor sunt case-sensitive și trebuie să înceapă cu o literă. După
cum observăm, spre diferență de alte limbaje de programare, aici variabilele nu au tip, adică
respectiv ele pot reține orice valoare. Cuvântul var este opțional, dacă nu se specifică automat
variabila e considerată globală. Variabilele declarate într-o funcție sunt locale acelei funcții (la
declararea variabilelor locale trebuie obligatoriu var). Variabilele declarate în afara oricărei
funcții sunt globale, adică sunt accesibile oriunde în pagină.
JavaScript oferă operatori aritmetici, de comparație, logici, pe biți, de atribuire și alți
operatori precum new, typeof, delete, etc. Există la fel operatorul + pentru concatenarea string-
urilor și operatorul condițional (sau altfel numit ternal). Testarea egalității prin operatorii == și
!= încearcă să convertească ambii operanzi la același tip înainte de a efectua testul, pe când ===
și !== consideră valorile inegale dacă au tipuri diferite. Comentariile în JavaScript sunt similare
celor din C++ sau Java, adică prin // se indică un comentariu pe o singură linie, iar prin /*...*/
comentariile pe mai multe linii. O instrucțiune compusă este cuprinsă între acolade {…}.
Cât ține de instrucțiunile de decizie, selecția simplă poate fi efectuată prin if-else, iar
selecția multiplă prin switch-case-break. Ca instrucțiuni de ciclare pot fi folosite for simplu,
sau for-in pentru parcurgerea unui masiv oarecare, la fel și while sau do-while. JavaScript
dispune de un mecanism de tratare a excepțiilor aproape identic cu cel din Java. Aruncarea unei
excepții are loc prin cuvântul-cheie throw urmat de o expresie ce este valoarea excepției și
poate fi de orice tip (cel mai adesea un string). Prinderea unei excepții are loc prin blocul try-
catch-finally, unde finally este optional iar în cadrul catch-ului nu se specific sau declară tipul
excepției e.
Sintaxa definirii unei funcții constă în utilizarea cuvântului-cheie function. O funcție
poate fi apelată și poate returna o valoare prin keyword-ul return. Parametrii simpli sunt
transmiși prin valoare, iar obiectele prin referință. Tablourile pot fi create prin intermediul
instrucțiunii new Array() ca tablou condensat sau prin atribuirea directă a elementelor cuprinse
între paranteze pătrate către o variabilă (tablou de literali). Asupra acestui pot fi aplicate
diferite funcții predefinite precum reverse(), de returnare a lungimii length() sau de sortare
sort(). Crearea obiectelor poate fi realizată utilizând obiecte literal, astfel creăm un obiect “gol”
cu ajutorul operatorului new Object(), apoi adăugăm proprietăți precum id sau nume (lucru
care poate fi realizat și cu ajutorul costructorilor în cadrul unui function, unde utilizarea
cuvântului-cheie this este obligatorie). Putem la fel adăuga diferite metode la obiecte,
declarându-le ca function.
Evenimentele sunt acțiuni care pot fi detectate de JavaScript. Putem configura execuția
de acțiuni la detectarea de evenimente, de exemplu dacă s-a efectuat click pe un buton sau s-a
terminat de încărcat pagina. JavaScript permite manipularea unei pagini HTML prin intermediul
Document Object Model (DOM) ce descrie structura paginii HTML (nu cofundați cu XML
DOM). Prin intermediul DOM-ului putem face o mulțime de operații, precum accesarea
elementelor din cadrul unei pagini HTML, schimbarea conținutului unei pagini HTML și
posibilitatea de capturare a evenimentelor atașând handlere de evenimente.
Pentru a schimba conținutul paginii afișate în fereastra browser-ului este necesară
cunoașterea modului de accesare a elementelor. Basic DOM este stardard al W3C și este
compatibil cu majoritatea browser-elor. Elementul care se află la baza ierarhiei este window, și
toate celelalte elemente sunt descendente ale acestuia. Fiecare variabilă JavaScript este un câmp
al acestui obiect, respectiv în DOM toate variabilele se presupun că încep cu “window”. Fiecare
document HTML încărcat într-o ferastră (window) devine un obiect de tip Document, ce pune
la dispoziție metode prin care putem accesa toate elementele HTML din cadrul paginii
respective. Mai jos este prezentată schema ierarhiei de clase DOM:
Câmpurile posibile a obiectului window sunt următoarele:
 window - ferestra curentă (de regulă nu se specifică);
 self - referință la fereastra curentă, identică cu window (window.window);
 parent - referință la fereastra/cadrul părinte al ferestrei/cadrului curent;
 top – referință către fereastra navigator-ului situată în prim plan;
 frames[] - setul de cadre(frames) afișate, care la rândul lor sunt de tipul window;
 frames.length – numărul de cadre din ferestra curentă.
 Document - documentul HTML ce este afișat în fereastra curentă;
 location - URL-ul documentului afișat în fereastra curentă. Dacă acestă
proprietate primește un nou URL atunci document referit de acest URL este
încărcat. Dacă dorim să facem refresh la pagina curentă putem apela
location.reload();
 navigator - referință la un obiect de tip Navigator ce reprezintă browser-ul ce a
încărcat acea pagină. Putem obține numele browserului prin
navigator.appName de exemplu "Netscape". Iar prin navigator.platform,
putem obține numele sistemlui de operare, de exemplu "Win32".
 status - șirul de caractere afișat în bara de status a browser-ului, textul căruia
poate fi schimbat printr-o simplă atribuire.
Metodele obiectului window sunt următoarele:
 alert(string) - afișează o casuță de dialog ce conține string-ul specificat și un
buton cu eticheta OK;
 confirm(string) - afișează o ferestră de confirmare ce conține string-ul specificat
împreună cu butoanele Cancel și OK. Returnează true dacă este apăsat OK, și
false dacă este apăsat Cancel;
 prompt(string) – afișează o ferestră de confirmare ce conține string-ul
specificat, un input de tip text împreună cu butoanele Cancel și OK. Returnează
string-ul introdus de user dacă este apăsat OK, null dacă este apăsat Cancel;
 open(URL) - deschide o fereastră nouă în care se încarcă documentul specificat
prin URL;
 close() - închide fereastra (nu un frame).
Toate proprietățile obiectului document trebuie prefixate de acesta:
 anchors[] - un tablou de obiecte de tip Anchor (conțin tag-urile <a name=...>);
 applets[] - un tablou de obiecte de tip Applet representând apleții din document.
Proprietățile acestor obiecte sunt câmpurile declarate public în aplet, iar metodele
sunt metodele publice din aplet;
 forms[] - un tablou de obiecte de tip Form ce reprezintă formele (formularele)
din document. Dacă documentul conține numai o formă, atunci acesta este
forms[0];
 images[] - un tablou de obiecte de tip Image representând imaginile din
document. Dacă dorim să schimbăm o anumită imagine, atribuim noul URL
proprietății src;

 links[] - un tablou de obiecte de tip Link objects representând link-urile din


pagină, unde proprietatea ce reține adresa paginii referite este href;
 bgColor - culoarea de backgroud a paginii web, ce poate fi schimbată în orice
moment;
 title - propietate read-only ce reține titlul paginii web;
 URL – propietate read-only ce reține URL-ul documentului curent.
Metodele obiectului document sunt următoarele:
 getElementByID(string) - întoarce o referință la primul element cu id-ul
specificat;
 getElementsByName(string) – întoarce un tablou ce conține toate obiectele cu
un nume specificat;
 getElementsByTagName(string) - întoarce un tablou ce conține toate obiectele
cu tag-ul specificat.
Proprietățile obiectului Form sunt următoarele:
 elements[] - tablou ce conține toate input-urile din formă;
 action - URL-ul specificat în atributul action către care se vor trimite datele din
formă;
 method - metoda prin care se trimit datele din formă (POST, GET).
Metodele obiectului Form sunt submit() ce trimite(submite) datele către server și reset()
ce resetează conținutul formei.
Majoritatea elementelor dintr-o pagină HTML “răspund” la acțiuni ale utilizatorului
(apăsarea tastelor, efectuarea de click-uri) prin generarea de evenimente. Fiecare tip de element
produce evenimente specifice, însă noi ne vom concentra mai mult pe evenimentele recunoscute
de elementele de tip form și cele comune. Pentru a gestiona evenimentele trebuie să scriem niște
funcții speciale numite handlere care le asociem diverselor tipuri de evenimente. La apariția
evenimentului respectiv, este apelat automat handler-ul corespunzător (de exemplu apăsarea
butonului va declanșa o execuție). Mai jos este prezentat un tabel (în limba engleză) cu lista de
evenimente posibile și handler-ele lor corespunzătoare:
Inițial am vrut să separez conținutul de logică, adică să plasez tot codul JavaScript în
cadrul unui fișier extern cu extensia script.js, care trebuia implementat folosind tag-ul link cu
atributul type corespunzător (care în HTML5 nu e obligatoriu de indicat). Însă totuși am decis
să mă las condus de materialele didacte și să le corespund de aceea am inserat codul în cadrul
tag-ului <script> cu toate recomandările pentru versiuni mai vechi ale browser-elor respectate.
Astfel, conform condițiilor am creat un buton cu handler-ul de evenimente onClick ce execută
funcția JavaScript specificată toggleDropdown() ce la rândul său afișează sau ascunde meniul
derulant. Prin CSS am setat stilul cu hover astfel încât când cursorul mouse-ului v-a fi
deasuprea butonului dat sau a unui element din meniu, culoarea de fundal a acestuia să se
schimbe (la fel se v-a schimba și însuși cursorul).

Am creat o secțiune cu imagini care sunt afișate orizontal și permit defilarea în caz că
sunt prea multe. Observăm că deoarece nu vreau să salvez imagini pe local, ca să fiu nevoit să
le transmit ulterior împreună cu documentul HTML pentru o afișare corectă pe alte calculatoare
(ceea ce respectiv va duce la mărirea dimensiunii fișierelor laboratorului, care trebuie să se
încadreze în cadrul limitelor stabilite de platforma ELSE). Deci am fost nevoit să recurg la un
mic lifehack în acest sens, și anume am utilizat link-uri directe CDN spre imagini de
dimensiunea 1024x600, și nu am stabilit alte dimensiuni noi prin intermediul atributelor
HTML width și height, ci prin intermediul claselor CSS scrollable-images corespunzătoare
unde am stabilit ca blocul imaginilor defilante să aibă o lățime de 40% prin intermediul
proprietății CSS width, iar pentru fiecare din cele 3 imagini am stabilit lățimea de 300px și
înălțime automată prin intermediul proprietății CSS height cu valoare auto.
Observăm (din codul anexat) că am declarat prin new un obiect de tip Date care
automat a preluat data și timpul curent, însă totul la un loc, acum pentru obținerea orei,
minutelor, secundelor din timp și a zilei, lunii și anului din dată, trebuie să realizăm separarea
(extragerea) prin intermediul funcțiilor corespunzătoare, și dacă în cazul funcțiilor pentru timp
getHours(), getMinutes() și getSeconds() totul este simplu, atunci pentru dată apar anumite
complicații și nuanțe. Astfel de exemplu pentru extragerea anului mai înainte se utiliza funcția
getYear(), însă din cauză că au găsite unele erori legate de ea, aceasta a fost înlocuită cu
getFullYear(). La fel, puteți observa că am adăugat 1 la funcția getMonth() pentru a obține
numărul corect al lunii, fiindcă aceasta returnează valori din intervalul 0-11. După denumire se
poate părea că funcția getDay() ar trebui să returneze ziua, însă defapt aceasta returnează
numărul zilei săptămânii, iar pentru a extrage numărul zilei din dată se utilizează altă funcție, și
anume getDate(). Am realizat afișarea timpului în timp real, folosind setInterval pentru a
actualiza afișarea timpului în fiecare secundă (adică la un interval de 1000 de milisecunde).
Observăm că acesta își v-a face apariția în secțiunea goală div (descrisă în CSS) pentru afișarea
timpului cu identificatorul clock. La fel dimineață culoarea textului va fi albastră iar, după
amiază deja roșu (am realizat acest lucru comparând valoarea variabilei hours).

Astfel, atunci când utilizatorul apasă butonul "Afișează mesaj după un timp
specificat", apare o fereastră de dialog JavaScript de tip prompt care îi permite să introducă
timpul de întârziere în secunde, care după e convertat în milisecunde prin înmulțirea la 1000
deoarece așa argument așteaptă funcția standard setTimeout(), apelată de funcția
delayMessage() pentru a afișa mesajul după o întârziere de interval specificat. Mai întâi însă are
loc verificarea valorii introduse de utilizator (citită prin ParseInt), și anume dacă acesta a
introdus măcar ceva, dacă această valoare este un număr (prin IsNaN) și dacă acestă valoare
este pozitivă. În caz că una din condiții nu a fost îndeplinită se v-a afișa mesajul corespunzător
de tip alert. Apropo dacă apăsăm butonul Cancel din fereatra prompt v-om obține același mesaj
ca și atunci când nu am introdus nimic și am apăsat OK. Dacă totuși am introdus o valoare
validă, numărătoarea v-a începe instant fără alte ferestre suplimentare.
Când timpul specificat va trece (de exemplu fie un timeout de 10 secunde), se va afișa
mesajul corespunzător care arată în felul următor. Observăm că acesta își v-a face apariția în
secțiunea goală div pentru afișarea mesajului cu identificatorul mesaj_timeout.

Dacă utilizatorul apasă butonul "Anulează afișarea mesajului" înainte ca timpul necesar
să se scurgă, funcția JavaScript cancelMessage() este apelată și anulează afișarea mesajului prin
intermediul clearTimeout, apoi prin intermediul metodei getElementByID al obiectului de tip
Document (ce întoarce o referință la primul element cu id-ul specificat) cu proprietatea
innerHTML căreia îi v-om atribui un string vid, facând prin asta ca mesajul să dispară și printr-
un alert v-om informa utilizatorul despre faptul că anularea afișării mesajului a avut loc cu
succes (adică chiar dacă va trece timeout-ul stabilit, nu se va întâmpla nimic). La fel, vreau să
menționez că atât la stabilirea unui timeout nou, cât și la anularea unuia existent, conținutul
secțiunii div cu mesaj este golită.

Cât ține de validarea formularului cu handler-ul eventului onSubmit, observăm că


validarea se va baza pe valoarea booleană a return-ului funcției (true sau false). Am folosit
atributul required pentru a face ca câmpurile formularului să fie obligatorii. Am adăugat
expresii regulate (pattern-uri) pentru a valida formatul numelui, adresei de e-mail și al
numărului de telefon. Funcția JavaScript validareFormular() este apelată la trimiterea
formularului și verifică fiecare câmp în parte prin intermediul instrucțiunii decizionale if,
afișând un mesaj de eroare dacă nu sunt validate. Mai întâi de toate, salvăm datele în variabilele
corespunzătoare extrăgându-le cu proprietatea value din tabloul de obiecte de tip Form ce
reprezintă formularele obiectului de tip document. Căutarea formei necesare a avut loc după
nume. Validarea câmpului pentru nume constă în faptul că acesta trebuie să fie completat
înainte de a trimite formularul (dacă nu este completat, se v-a afișează o alertă). La fel acesta
trebuie să conțină doar litere și spații, și nici într-un caz cifre și/sau simboluri speciale.
Validarea câmpului poștei electronice constă în faptul că aceasta trebuie să corespundă
formatului unui e-mail, adică să conțină simbolul @, etc. Numărul de telefon trebuie să constăie
doar din cifre și să aibă o dimensiune fixă de 9 cifre, iar câmpul mesajului trebuie completat
obligatoriu, iar dimensiunea acestuia trebuie să nu fie mai mică de 10 caractere.
Concluzie
Am înțeles un pic principiul de lucru al framework-ului CSS Bootstrap studiat în cadrul
lucrării anterioare. Probabil acesta în cadrul fișierului său JS analiza de pe ce dispozitiv a fost
deschisă pagina prin intermediul navigator.platform și deja în baza acestei valori extrase din
DOM stabilea unele stiluri CSS. Am avut o oarecare expriență de lucru cu ferestrele de dialog
JavaScript, deoarece m-am ciocnit cu alert în cadrul cursului web de la colegiu. La fel, mi-a
fost înteresant să aflu despre event-ul DragDrop, deoarece văzusem pe diferite site-uri că ai
posibilitatea la încărcarea unui fișier ori să deschizi dialogul special ori să “tragi” fișierul direct
în fereastră de pe desktop, ceea ce este desigur o posibilitate destul de comodă. Acum îmi dau
seama cum lucrează partea back-end a acestui proces, cel mai probabil că se declanșează un
handler onDragDrop. Vreau să menționez că JavaScript are o importanță mare, fiind practic
singurul limbaj în domeniul dat, deținând o așa numită hegemonie, în timp ce în alte sfere IT
există o concurență enormă între diferite limbaje. Cunoașterea JS este un must-have pentru orice
doritor de a deveni dezvoltator web, deoarece în era Web 4.0 ar fi absurd să realizăm pagini web
statice, fiindcă în ziua de azi totul în Internet se bazează pe funcționalitate și conținut cu blocuri
dinamice, ceea ce a permis interacțiunea dintre utilizator și aplicația web, și respective a dus la
apariția așa numitor aplicații web complexe – Progressive Web Application (PWA) și a permis,
de exemplu, trecerea serviciilor bancare în online. În cadrul cursului “Tehnologii ale securității
informaționale” studiat paralel (predat de doamna profesoară Bulai Rodica), am aflat că uneori
utilizatorii pot dezactiva de la nivelul setărilor browser-ului execuția JavaScript-urilor în scopuri
de securitate (deoarece din păcate funcționalul vast oferit de JS este deseori utilizat de utilizatori
rău-intenționați).
P.S. apropo mi-a venit ulterior ideea... de ce nu am combinat sarcinile, adică putem plasa
butoanele de comandă pentru timeout în cadrul meniului derulant, așa reiese că meniul dat duce
la anchore de genu # și practic nu are nici un sens practic.
Anexe
Anexa 1. Codul HTML al paginii exemplu_JS
(fișierul cu extensia index.html)
<!-- Specificăm standardul HTML5 -->

<!DOCTYPE html>

<!-- Deschidem documentul HTML și stabilim limba română -->

<html lang="ro">

<!-- Secțiunea declarativă cu titlu și metainformații -->

<head>

<!-- Unicode pentru diacritice -->

<meta charset="utf-8">

<!-- Pentru ca site-ul să fie responsiv pe dispozitivele mobile -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Stabilirea titlului documentului -->

<title>JavaScript Elemente Dinamice</title>

<!-- Specificăm Style sheet-ul (CSS) extern cu link-ul către fișierul CSS -->

<link href="style.css" rel="stylesheet">

</head>

<!-- Secțiunea corpului conținutului -->

<body>

<br>&nbsp;&nbsp;&nbsp;

<!-- Meniu derulant (JS) -->

<div class="dropdown">

<!-- Butonul cu handler-ul de evenimente onClick ce execută funcția specificată


-->

<button onclick="toggleDropdown()" class="dropbtn">Meniu derulant</button>

<div id="myDropdown" class="dropdown-content">

<ul type="none">

<li><a href="#">Opțiunea 1</a></li>

<li><a href="#">Opțiunea 2</a></li>

<li><a href="#">Opțiunea 3</a></li>

</ul>

</div>

</div>

<br><br><br><br><br><br><br><br><br><br>
<!-- Imagini defilante -->

<div class="scrollable-images">

<img
src="https://images.wallpaperscraft.ru/image/single/karty_kombinatsiia_chernyj_192979_
3840x2400.jpg" alt="Imagine 1">

<img
src="https://images.wallpaperscraft.ru/image/single/shahmaty_figury_chernobelyj_868183
_1024x600.jpg" alt="Imagine 2">

<img
src="https://images.wallpaperscraft.ru/image/single/kubik_rubika_kubik_grani_913047_10
24x600.jpg" alt="Imagine 3">

</div>

<!--

Secțiunea goală div pentru afișarea

timpului cu identificatorul clock

-->

<div id="clock"></div>

<div id="mesaj_timeout"></div>

<!--

Butoane care execută la click anumite funcții

folosind handler-ul de event-uri onClick

-->

<button class="cst-btns" onclick="delayMessage()">Afișează mesaj după un timp


specificat</button>

<button class="cst-btns" onclick="cancelMessage()">Anulează afișarea


mesajului</button>

<!--

Am utilizat comentariile HTML și JS pentru a evita

ignorarea tag-ului script de către browser-ele mai vechi

-->

<script>

<!--

// Funcția de afișare a meniului derulant

function toggleDropdown() {

document.getElementById("myDropdown").classList.toggle("show");

}
// Afișarea timpului în timp real

function displayTime() {

// Obiect de tip Date cu data/timp curent

var now = new Date();

// Extragem anul

var year = now.getFullYear();

// Extragem luna

var month = now.getMonth()+1;

// Extragem ziua

var day = now.getDate();

// Extragem ora

var hours = now.getHours();

// Extragem minutele

var minutes = now.getMinutes();

// Extragem secundele

var seconds = now.getSeconds();

document.getElementById('clock').innerHTML = "&nbsp;" + day + "/" + month +


"/" + year + " " + hours + ":" + minutes + ":" + seconds;

// Actualizăm stilurile elementului HTML în JavaScript

document.getElementById('clock').style.fontSize = "72px";

// Setăm culoarea textului în funcție de ora din zi

if(hours<12) {

document.getElementById('clock').style.color = "blue"; // Text albastru


pentru orele dimineții

} else {

document.getElementById('clock').style.color = "red"; // Text roșu pentru


orele după-amiezii

// Am stabilit actualizarea fiecare secundă (la un interval de 1000 milisecunde)

setInterval(displayTime, 1000);

// Variabile globale (în JS nu se specifica tipul)

var timeoutID;

var delayTime;

// Afișează un mesaj după o întârziere de x secunde

function showMessage() {
var msg = "Acesta este un mesaj afișat după o întârziere de " + delayTime + "
secunde.";

document.getElementById("mesaj_timeout").innerHTML = msg;

// Afișăm mesajul (realizăm apelul funcției) după un delay de un anumit interval

function delayMessage() {

delayTime = prompt("Introduceți timpul de întârziere (în secunde):");

// Operator ce consideră valorile inegale dacă au tipuri diferite

if(delayTime === null || delayTime === "") {

alert("Nu s-a introdus niciun timp de întârziere!");

return;

delayTime = parseInt(delayTime);

if(isNaN(delayTime) || delayTime < 0) {

alert("Introduceți un timp de întârziere valid!");

return;

document.getElementById("mesaj_timeout").innerHTML = "";

// Convertim secundele în milisecunde

timeoutID = setTimeout(showMessage, delayTime*1000);

// Anulăm afișarea mesajului (dacă avem mult de așteptat)

function cancelMessage() {

// Declarăm o variabilă booleană căreia i-am atribuit un dialog de confirmare

var confirmCancel = confirm("Sunteți sigur că doriți să anulați afișarea


mesajului de întârziere?");

// Dacă am apăsat butonul OK și s-a returnat true

if(confirmCancel) {

clearTimeout(timeoutID);

document.getElementById("mesaj_timeout").innerHTML = "";

alert("Afișarea mesajului de întârziere a fost anulată cu succes.");

/*

Funcție pentru validarea câmpurilor de

introducere înainte de a trimite formularul


*/

function validareFormular() {

// Salvăm datele în variabilele corespunzătoare

// extrăgându-le cu proprietatea value din tabloul

// de obiecte de tip Form ce reprezintă formularele

// obiectului de tip document. Căutarea formei necesare

// a avut loc după nume

var nume = document.forms["formular1"]["nume"].value;

var email = document.forms["formular1"]["email"].value;

var telefon = document.forms["formular1"]["telefon"].value;

var mesaj = document.forms["formular1"]["mesaj"].value;

// Validare nume

var numePattern = /^[a-zA-Z]+(([ ][a-zA-Z ])?[a-zA-Z]*)*$/;

if(nume=="") {

alert("Câmpul numelui trebuie completat!");

return false;

if(!numePattern.test(nume)) {

alert("Introduceți vă rog un nume valid (fără cifre sau simboluri


speciale)!");

return false;

// Validare adresă de email

if(email=="") {

alert("Câmpul adresei de e-mail trebuie completat!");

return false;

// Stabilim un fel de RegEx căruia trebuie să corespundă

var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if(!emailPattern.test(email)) {

alert("Adresa de e-mail introdusă este invalidă!");

return false;

// Validare număr de telefon (expresie regulată)

var telefonPattern = /^\d{9}$/;


if(telefon=="") {

alert("Câmpul numărului de telefon trebuie completat!");

return false;

if(!telefonPattern.test(telefon)) {

alert("Introduceți vă rog un număr de telefon valid (9 cifre)!");

return false;

// Validare mesaj

if(mesaj=="") {

alert("Câmpul mesajului trebuie completat obligatoriu!");

return false;

// Funcția length pentru string

if(mesaj.length<10) {

alert("Mesajul trebuie să conțină cel puțin 10 caractere!");

return false;

// Dacă toate câmpurile sunt validate formularul poate fi trimis

alert("Datele tuturor câmpurilor formularului au fost validate cu succes!");

return true;

//-->

</script>

<!-- Formular pentru validare cu handler-ul eventului onSubmit-->

<form name="formular1" onsubmit="return validareFormular()">

<label for="nume">Nume:</label>

<input type="text" name="nume" placeholder="Introduceți numele"


required><br><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email" placeholder="Introduceți e-mailul"


required><br><br>

<label for="telefon">Telefon:</label>

<input type="tel" id="telefon" name="telefon" placeholder="Introduceți


telefonul" pattern="[0-9]{9}" required><br><br>

<label for="message">Mesaj:</label><br>

<textarea id="mesaj" name="mesaj" rows="4" cols="50" placeholder="Introduceți


mesajul aici..." required></textarea><br><br>

<input type="submit" value="Submite">

</form>

</body>

</html>

Anexa 2. Codul CSS al paginii exemplu_JS


(fișierul cu extensia style.css)

/* Stilul secțiunii corpului */

body {

/* Lista cu familiile de font-uri */

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

/* Culoarea fundalului */

background-color: #F0F0F0;

/* Stilul containerului */

.container {

/* Lățimea maximă */

max-width: 800px;

/* Spațiu din părți */

margin: 20px auto;

/* Spațiu între conținut */

padding: 20px;

/* Culoarea fundalului */

background-color: #FFF;

/* Colțuri rotungite */

border-radius: 8px;

/* Umbră */
box-shadow: 0 0 10px #0000001a;

/* Stilurile meniului derulant */

.dropdown {

position: relative;

display: inline-block;

/* Conținutul derulant */

.dropdown-content {

display: none;

position: absolute;

/* Culoarea fundalului */

background-color: #FFF;

/* Lățimea minimă */

min-width: 160px;

/* Umbră */

box-shadow: 0 8px 16px 0 #000033;

z-index: 1;

/* Colțuri rotungite */

border-radius: 8px;

/* Spațiu între conținut */

padding: 10px 0;

/* Lista din conținut */

.dropdown-content ul {

/* Lipsa unui marker */

list-style: none;

padding: 0;

margin: 0;

/* Ancora elementului listei */

.dropdown-content ul li a {

display: block;

/* Spațiu între conținut */


padding: 10px 20px;

/* Culoarea textului */

color: #333;

text-decoration: none;

/* Tranziție lină */

transition: background-color 0.3s;

/* Când mouse-ul e deasupra elementului */

.dropdown-content ul li a:hover {

/* Schimbă culoarea fundalului */

background-color: #F9F9F9;

/* Când mouse-ul e deasupra conținutului derulant */

.dropdown:hover .dropdown-content {

display: block;

/* Stilul butonului meniului derulant */

.dropbtn {

/* Culorea fundalului */

background-color: #4CAF50;

/* Culorea textului */

color: white;

padding: 10px 20px;

/* Dimensiunile font-ului */

font-size: 16px;

/* Fără margine */

border: none;

/* Colțuri rotungite */

border-radius: 8px;

/* Schimbarea cursorului mouse-ului */

cursor: pointer;

/* Tranziție lină */

transition: background-color 0.3s;

}
/* Când mouse-ul e deasupra butonului */

.dropbtn:hover {

/* Schimbă culoarea fundalului */

background-color: #45A049;

/* Stilurile imaginilor defilante */

.scrollable-images {

/* Lățimea în procente */

width: 40%;

/* Spațiu din stânga */

margin-left: 25px;

overflow-x: auto;

white-space: nowrap;

/* Spațiu de sus */

margin-bottom: 20px;

.scrollable-images img {

/* Lățimea unei imagini concrete */

width: 300px;

/* Înălțime automată */

height: auto;

display: inline-block;

/* Spațiu din dreapta */

margin-right: 10px;

/* Colțuri rotungite */

border-radius: 8px;

/* Umbră */

box-shadow: 0 2px 4px #0000001a;

/* Stilul formularului */

form {

/* Lățimea */

width: 500px;

/* Spațiu din toate 4 direcții */

margin: 20px 20px 20px 20px;


/* Culoarea fundalului */

background-color: #F9F9F9;

/* Spațiu între conținut */

padding: 20px;

/* Colțuri rotungite */

border-radius: 8px;

/* Umbră */

box-shadow: 0 2px 4px #0000001a;

/* Etichetele formularului */

label {

display: block;

/* Spațiu de sus */

margin-bottom: 5px;

/* Text îngroșat */

font-weight: bold;

/* Câmpurile formularului */

input[type="text"],

input[type="email"],

input[type="tel"],

textarea {

/* Lățimea */

width: 90%;

/* Spațiu între conținut */

padding: 10px;

/* Spațiu de sus */

margin-bottom: 10px;

/* Grosimea și culoarea marginii */

border: 1px solid #CCC;

/* Colțuri rotungite */

border-radius: 5px;

box-sizing: border-box;

/* Butonul de confirmare */
input[type="submit"] {

/* Culoarea fundalului */

background-color: #4CAF50;

/* Culoarea textului */

color: #FFF;

/* Spațiu între conținut */

padding: 10px 20px;

/* Lipsă margine */

border: none;

/* Colțuri rotungite */

border-radius: 5px;

/* Schimbarea cursorului mouse-ului */

cursor: pointer;

/* Dimensiunea font-ului */

font-size: 16px;

/* Când mouse-ul e deasupra butonului */

input[type="submit"]:hover {

/* Schimbă culoarea fundalului */

background-color: #45A049;

/* Pentru referire la un id folosim # */

#mesaj_timeout {

/* Spațiu din stânga */

margin-left: 12px;

/* Dimensiunea font-ului */

font-size: 24px;

/* Culoarea textului */

color: #900;

/* Spațiu de sus */

margin-top: 10px;

/* Butoanele pentru dată/timp */

.cst-btns {

/* Spațiu din toate 4 direcții */


margin: 20px 20px 20px 20px;

/* Culoarea fundalului */

background-color: #4CAF50;

/* Culoarea text-ului */

color: #FFF;

/* Spațiu între conținut */

padding: 10px 20px;

/* Fără margine */

border: none;

/* Colțuri rotungite */

border-radius: 5px;

/* Schimbarea cursorului mouse-ului */

cursor: pointer;

/* Dimensiunea font-ului */

font-size: 16px;

/* Când mouse-ul e deasupra butonului */

.cst-btns:hover {

/* Schimbă culoarea fundalului */

background-color: #45A049;

S-ar putea să vă placă și