Exerciții - Adăugați interactivitate cu JavaScript

10 minute

JavaScript (sau ECMAScript) este un limbaj de programare care vă ajută să adăugați interactivitate la paginile web.

De exemplu, puteți utiliza JavaScript pentru a defini comportamentul care se întâmplă atunci când un utilizator selectează un buton, cum ar fi deschiderea unei ferestre pop-up. Utilizând JavaScript, puteți să adăugați sau să eliminați conținut dintr-o pagină web fără a-l reîncărca.

În această unitate, configurați un exemplu de fișier JavaScript pentru pagina web. În aceasta, creați un buton pentru a comuta între teme luminoase și întunecate. Apoi atașați butonul la codul JavaScript care efectuează comutarea în temă propriu-zisă. În sfârșit, verificați proiectul finalizat utilizând instrumentele de dezvoltator ale browserului.

Link către JavaScript

La fel ca CSS, puteți adăuga JavaScript direct la fișierul HTML, dar o practică recomandată este să salvați JavaScript într-un fișier separat. Adăugarea codului JavaScript la un fișier separat facilitează reutilizarea acestuia pe mai multe pagini web. De exemplu, puteți crea o avertizare pop-up adăugând următorul cod oriunde în corpul paginilor web:

<script>alert('Hello World')</script>

Cu toate acestea, este mai bine să adăugați codul JavaScript la un fișier separat pe care îl puteți lega la fiecare fișier care are nevoie de funcționalitatea particularizată.

Eticheta script HTML <script> ne permite să creem un link la un fișier JavaScript extern, care este modul în care configurați aplicația web în acest exercițiu.

În Visual Studio Code, deschideți fișierul index.html.
Găsiți elementul </body> de închidere și plasați cursorul pe o linie nouă deasupra ei. Introduceți script:src și apăsați Enter. Etichetele de deschidere și închidere pentru un element <script> sunt adăugate la cod.

Modificați elementul <script> pentru a încărca fișierul app.js, așa cum se arată în exemplul următor. Asigurați-vă că se află după închiderea </ul> element pentru listă.

...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...

Puteți plasa elementul <script> în <head> sau în altă parte în <body>. Cu toate acestea, plasarea elementului <script> la sfârșitul secțiunii <body> permite ca tot conținutul paginii să se afișeze mai întâi pe ecran, înainte de încărcarea scriptului.

Adăugați toleranță la erori

În fișierul HTML, adăugați un element <noscript> după eticheta de închidere </script>, care poate fi utilizată pentru a afișa un mesaj dacă JavaScript este dezactivat.
```
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
```
Adăugarea elementului <noscript> este un exemplu de toleranță defecte sau degradare grațioasă. Atunci când utilizați elementul <noscript>, codul dvs. poate detecta și planifica când o caracteristică nu este acceptată sau disponibilă.

Setare mod strict

JavaScript a fost proiectat să fie ușor de învățat și permite dezvoltatorului să facă anumite greșeli. De exemplu, JavaScript nu generează o eroare atunci când utilizați o variabilă ortografiată greșit și creează o variabilă globală nouă. Atunci când începeți să învățați JavaScript, este convenabil să aveți mai puține erori. Cu toate acestea, poate duce la scrierea de cod, care este mai greu pentru browsere să optimizeze și mai greu pentru dvs. să depanați.

Comutați la modul strict pentru a obține erori mai utile atunci când faceți greșeli.

În Visual Studio Code, deschideți fișierul app.js și introduceți următoarele:
```
'use strict';
```

Adăugați un buton

Aveți nevoie de o modalitate de a le permite utilizatorilor să comute între temele luminoase și întunecate din pagina web. În acest exercițiu, implementați funcționalitatea respectivă cu un element de <button> HTML.

În fișierul HTML (index.html), adăugați un element <button>. Amplasați butonul în interiorul unui element <div> și adăugați-l imediat după sfârșitul listei (</ul>).
```
...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...
```
Observați că elementul <button> din acest exemplu are un atribut clasă pe care îl puteți utiliza pentru a aplica stiluri CSS.
Salvați modificările fișierului HTML cu comanda rapidă de la tastatură Control+S în Windows sau Command+S pe macOS.
În fișierul CSS (main.css), adăugați o regulă nouă cu un selector de clasă .btn pentru butonul HTML. Pentru a diferenția culorile butonului de culorile temei generale sau deschise, setați proprietățile color și background-color în această regulă. Atunci când se afișează pagina, aceste proprietăți .btn înlocuiesc proprietățile implicite setate în regula de body a fișierului CSS.
```
.btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```
În continuare, modificați regula de .btn pentru a adăuga unele stiluri pentru dimensiunea, forma, aspectul și amplasarea butonului. Următorul CSS creează un buton rotund în partea dreaptă a titlului de pagină.
```
.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```

În continuare, actualizați CSS pentru tema Luminos și Întunecat. Definiți câteva variabile noi, --btnBg și --btnFontColor, pentru a specifica culoarea de fundal specifică butonului și culoarea fontului.

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

Salvați modificările fișierului CSS cu comanda rapidă de la tastatură Control+S în Windows sau Command+S pe macOS.

Adăugarea unei rutine de tratare a evenimentelor

Pentru a face butonul să facă ceva atunci când îl selectați, aveți nevoie de o rutină de tratare eveniment în fișierul JavaScript. O rutină de tratare a evenimentelor este o modalitate de a rula o funcție JavaScript atunci când are loc un eveniment pe pagină. Pentru buton, să adăugăm o rutină de tratare eveniment pentru evenimentul click; funcția rutinei de tratare a evenimentelor rulează atunci când are loc evenimentul click.

Înainte de a adăuga rutina de tratare eveniment, aveți nevoie de o referință la elementul butonului.

În fișierul JavaScript (app.js), utilizați document.querySelector pentru a obține referința butonului.
```
const switcher = document.querySelector('.btn');
```
Funcția document.querySelector utilizează selectori CSS, la fel ca pe cele pe care le-ați utilizat în fișierul CSS. switcher este acum o referință la butonul din pagină.
În continuare, adăugați rutina de tratare a evenimentelor pentru evenimentul click. În următorul cod, adăugați un ascultător pentru evenimentul click și definiți o funcție de rutină de tratare a evenimentelor pe care o execută browserul atunci când are loc evenimentul click.
```
switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});
```

În codul precedent, ați utilizat metoda toggle pentru a modifica atributul clasă al elementului <body>. Această metodă adaugă sau elimină automat clasele de light-theme și dark-theme. Acest cod aplică stilurile întunecate în loc de stiluri de lumină dacă faceți clic, apoi stiluri de lumină în loc de întunecat dacă faceți clic din nou.

Totuși, eticheta butonului trebuie să fie actualizată pentru a afișa tema corectă, deci trebuie să adăugați o instrucțiune de if pentru a determina tema curentă și a actualiza eticheta butonului.

Iată cum ar trebui să arate codul Dvs. JavaScript cu rutina de tratare a evenimentului adăugată:

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

Este o convenție JavaScript de a utiliza caz de cămilă pentru nume variabile cu mai multe cuvinte; de exemplu, variabila className.

Mesaj consolă

În calitate de dezvoltator web, puteți crea mesaje ascunse care nu sunt vizibile pe pagina web, dar pe care le puteți citi în Instrumentele pentru dezvoltatori din fila consolă. Utilizarea mesajelor de consolă este utilă pentru a vedea rezultatul codului.

În fișierul JavaScript, adăugați un apel la console.log după instrucțiunea if, dar în interiorul ascultătorului de evenimente.

După ce efectuați această modificare, codul JavaScript complet ar trebui să arate astfel.

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

Atunci când vă aflați într-un fișier JavaScript în Visual Studio Code, puteți utiliza completarea automată pentru console.log introducând log și apăsând Enter.

Puteți defini un șir de text cu ghilimele simple sau duble în jurul textului.

Deschidere în browser

Pentru a previzualiza, faceți clic dreapta pe index.html și selectați Deschidere în browserul implicitsau reîncărcați aceeași filă de browser apăsând F5.
Selectați noul buton Întunecat pentru a comuta la tema întunecată.
Asigurați-vă că totul arată corect și se comportă așa cum vă așteptați. Dacă nu, ar trebui să revizuiți pașii precedenți pentru a vedea dacă ați pierdut ceva.

Verificați pagina din instrumentele pentru dezvoltatori

Deschideți Instrumente pentru dezvoltatori făcând clic dreapta și selectând Inspectațisau utilizând comanda rapidă de la tastatură F12. Alternativ, utilizați comanda rapidă de Ctrl+Shift+I pe Windows sau Linux și Option+Command+I pe macOS.
Selectați fila Elemente și selectați fila Stiluri.
Selectați elementul <body>. În fila Stiluri, uitați-vă la tema aplicată. Dacă tema curentă este întunecată, se aplică stilurile dark-theme.

Asigurați-vă că este selectată tema Întunecat.
Selectați fila consolă pentru a vedea mesajul console.log, current class name: dark-theme.

Folosind consola, puteți obține detalii interesante din codul Dvs. JavaScript. Adăugați mai multe mesaje de consolă pentru a înțelege ce părți din cod sunt executate și pentru a cunoaște valorile curente ale altor variabile.

Pentru a afla mai multe despre consolă, consultați articolul Prezentare generală a consolei.