**Obiectivele cursului** - Înțelegerea rolului JavaScript-ului în aplicațiile web moderne și a modului în care acesta rulează în browser. - Explicarea conceptului de DOM și a modului în care JavaScript poate modifica conținutul paginii. - Prezentarea mecanismelor asincrone: promisiuni, async/await și event loop. - Înțelegerea modului în care clientul comunică cu serverul prin API-uri REST. - Introducerea principiilor de bază ale aplicațiilor reactive (SPA – Single Page Applications). --- ### 1. Rolul JavaScript-ului în Web JavaScript este limbajul care oferă paginilor web interactivitate și dinamism. Spre deosebire de HTML (structură) și CSS (stil), JavaScript adaugă **comportament** și **logică de execuție** în browser. - Permite modificarea conținutului paginii fără reîncărcare completă. - Gestionează evenimentele declanșate de utilizator (click, tastare, scroll etc.). - Comunică cu serverul pentru a obține sau trimite date. *Exemplu simplu:* ```html

``` La apăsarea butonului, conținutul paragrafului este actualizat instantaneu de către browser. --- ### 2. DOM – Document Object Model DOM-ul este reprezentarea internă a paginii web sub formă de arbore de obiecte. Fiecare element HTML devine un nod care poate fi accesat și modificat prin JavaScript. Operațiile principale asupra DOM-ului: - **Selectarea elementelor:** `document.querySelector('#id')`, `getElementsByClassName()`. - **Crearea și adăugarea elementelor:** `document.createElement('div')`, `appendChild()`. - **Modificarea conținutului:** `element.textContent = 'Nou text'`. *Exemplu practic:* ```javascript const lista = document.querySelector('#lista'); const item = document.createElement('li'); item.textContent = 'Element nou'; lista.appendChild(item); ``` Acest cod adaugă dinamic un element într-o listă, fără reîncărcarea paginii. DOM-ul face legătura dintre conținutul static (HTML) și logica dinamică (JavaScript), fiind esențial în orice aplicație web modernă. --- ### 3. Evenimente și interacțiuni JavaScript permite reacția la acțiunile utilizatorului printr-un mecanism numit **event handling**. Fiecare eveniment poate fi asociat unei funcții care se execută automat atunci când evenimentul are loc. *Exemple de evenimente uzuale:* - `click` – apăsarea unui buton; - `input` – modificarea conținutului unui câmp de text; - `submit` – trimiterea unui formular; - `keydown` – apăsarea unei taste; - `load` – finalizarea încărcării paginii. *Exemplu practic:* ```javascript window.addEventListener('load', () => { console.log('Pagina s-a încărcat complet.'); }); ``` Prin aceste evenimente, JavaScript face posibilă logica interactivă – de la formulare dinamice la animații sau validări. --- ### 4. Asincronismul în JavaScript Unul dintre cele mai importante concepte din JavaScript este **executarea asincronă**. În timp ce codul sincronic se execută linie cu linie, cel asincron permite browserului să continue alte sarcini (ex: redarea UI-ului) până când o operație de durată (de exemplu o cerere către server) se finalizează. **Mecanismele principale de asincronism:** - **Callback-uri:** funcții transmise ca parametri și apelate ulterior. - **Promisiuni (Promises):** obiecte care reprezintă o valoare ce va fi disponibilă în viitor. - **Async/Await:** sintaxă modernă pentru scrierea codului asincron într-un stil secvențial. *Exemplu simplu:* ```javascript function salut() { return new Promise(resolve => { setTimeout(() => resolve('Salut după 2 secunde!'), 2000); }); } async function afisare() { const mesaj = await salut(); console.log(mesaj); } afisare(); ``` Programul așteaptă 2 secunde și apoi afișează mesajul, fără să blocheze interfața utilizatorului. --- ### 5. Comunicarea cu serverul: Fetch API JavaScript poate comunica direct cu backend-ul folosind **Fetch API**, care permite trimiterea de cereri HTTP și procesarea răspunsurilor, de obicei în format JSON. *Exemplu practic:* ```javascript fetch('https://api.dev-bit.com/users') .then(response => response.json()) .then(data => { console.log('Utilizatori:', data); }) .catch(error => { console.error('Eroare la cererea API:', error); }); ``` Versiunea modernă, cu `async/await`: ```javascript async function getUsers() { try { const response = await fetch('https://api.dev-bit.com/users'); const users = await response.json(); console.log(users); } catch (err) { console.error('Eroare:', err); } } getUsers(); ``` Această abordare permite actualizarea dinamică a conținutului paginii pe baza răspunsului primit de la server, fără reîncărcare completă. --- ### 6. Event Loop și modelul de execuție Browserul JavaScript folosește un mecanism numit **Event Loop**, care gestionează ordinea în care sunt executate sarcinile sincrone și asincrone. - **Call Stack:** unde se execută funcțiile sincrone. - **Task Queue:** unde sunt plasate callback-urile și promisiunile rezolvate. - **Event Loop:** verifică continuu dacă există sarcini noi și le mută în execuție. *Exemplu ilustrativ:* ```javascript console.log('Start'); setTimeout(() => console.log('Timeout'), 0); console.log('End'); ``` Ordinea afișării va fi: `Start`, `End`, `Timeout` – pentru că setTimeout este tratat asincron. Acest comportament asigură fluiditatea aplicațiilor web și răspunsul imediat al interfeței la acțiunile utilizatorului. --- ### 7. Conectarea logicii de client cu API-ul backend Într-o aplicație completă, JavaScript reprezintă interfața logică dintre utilizator și datele din backend. *Exemplu concret: formular de login cu API Flask.* ```javascript async function login() { const data = { username: document.getElementById('user').value, password: document.getElementById('pass').value }; const response = await fetch('https://api.dev-bit.com/login', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data) }); const result = await response.json(); if (response.ok) { localStorage.setItem('token', result.token); alert('Autentificare reușită!'); } else { alert('Eroare: ' + result.error); } } ``` Astfel, logica din browser comunică direct cu logica Python de pe server, formând împreună un sistem complet. --- ### 8. Aplicații reactive și conceptele SPA Aplicațiile moderne de tip **SPA (Single Page Application)** se bazează pe JavaScript pentru a gestiona întreaga navigație internă fără reîncărcarea paginii. Framework-urile precum **React**, **Vue** sau **Svelte**: - Reprezintă interfața sub formă de **componente** independente; - Folosesc **state management** pentru a actualiza doar secțiunile care se schimbă; - Comunică eficient cu API-urile backend. *Exemplu conceptual (React):* ```javascript function ProductList() { const [products, setProducts] = useState([]); useEffect(() => { fetch('/api/products').then(res => res.json()).then(setProducts); }, []); return (

{p.nume}

); } ``` Astfel, componenta React se actualizează automat de fiecare dată când lista de produse se schimbă. --- ### Ideile centrale - JavaScript oferă logica de interacțiune și comportament în aplicațiile web moderne. - DOM-ul este structura internă a unei pagini și permite manipularea dinamică a conținutului. - Evenimentele conectează acțiunile utilizatorului cu logica aplicației. - Asincronismul permite executarea simultană a sarcinilor fără blocarea interfeței. - Fetch API oferă mijlocul standard de comunicare între browser și server. - Event Loop-ul gestionează execuția asincronă și asigură performanță optimă. - Framework-urile moderne (React, Vue) se bazează pe aceleași principii, dar oferă o structură scalabilă pentru aplicații mari. - Înțelegerea modului în care JavaScript procesează cererile, evenimentele și datele este esențială pentru orice dezvoltator web.