Sigur! Hai să-ți ofer un tutorial simplu pentru a învăța JavaScript, cu exemple pas cu pas.
Vom
explora concepte fundamentale, de la variabile la funcții și interacțiuni cu HTML.
Pasul 1: Introducere în JavaScript
JavaScript este un limbaj de programare folosit pentru a adăuga interactivitate pe paginile web. Este
utilizat pentru manipularea elementelor HTML și CSS, crearea de animații și gestionarea
evenimentelor.
Pasul 2: Adăugarea JavaScript într-o pagină HTML
Pentru a utiliza JavaScript într-o pagină web, trebuie să-l incluzi într-un fișier .js extern sau direct
în fișierul HTML. Iată un exemplu simplu folosind un script direct în HTML.
html
КопироватьРедактировать
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplu JavaScript</title>
</head>
<body>
<h1>Salut, JavaScript!</h1>
<button id="buton1">Click pentru mesaj</button>
<script>
// Adăugăm un eveniment de click pentru buton
[Link]('buton1').addEventListener('click', function() {
alert('Salut! Ai apăsat pe buton!');
});
</script>
</body>
</html>
Pasul 3: Variabile în JavaScript
În JavaScript, poți crea variabile folosind cuvintele cheie let, const sau var. De obicei, let este
folosit pentru variabile care se pot schimba, iar const pentru variabile care rămân constante.
javascript
КопироватьРедактировать
let nume = "Ion";
const varsta = 25;
[Link](nume); // Afișează "Ion"
[Link](varsta); // Afișează 25
Pasul 4: Tipuri de date
JavaScript are mai multe tipuri de date:
String: pentru texte
Number: pentru numere
Boolean: pentru adevărat/fals
Array: pentru liste
Object: pentru colecții de date
Exemplu:
javascript
КопироватьРедактировать
let nume = "Ana";
let varsta = 30;
let esteActiv = true;
let listaFructe = ["măr", "banană", "portocală"];
let persoana = {
nume: "Ion",
varsta: 25,
esteActiv: true
};
[Link]([Link]); // Afișează "Ion"
Pasul 5: Funcții
O funcție este un bloc de cod care poate fi apelat pentru a executa o acțiune. În JavaScript, o funcție
este definită folosind cuvântul cheie function.
javascript
КопироватьРедактировать
function salut(nume) {
[Link]("Salut, " + nume + "!");
}
salut("Ion"); // Afișează "Salut, Ion!"
Pasul 6: Manipularea DOM
DOM (Document Object Model) permite interacțiunea cu elementele HTML. Poți schimba
conținutul sau stilul elementelor folosind JavaScript.
html
КопироватьРедактировать
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manipularea DOM</title>
</head>
<body>
<h1 id="titlu">Bun venit!</h1>
<button id="butonSchimbaText">Schimbă textul</button>
<script>
[Link]('butonSchimbaText').addEventListener('click',
function() {
[Link]('titlu').textContent = 'Textul a fost
schimbat!';
});
</script>
</body>
</html>
Pasul 7: Evenimente
JavaScript poate asculta diverse evenimente (click, hover, tastare etc.) pe elementele HTML și poate
răspunde la acestea.
Exemplu de eveniment click:
html
КопироватьРедактировать
<button id="buton">Click pe mine</button>
<script>
[Link]('buton').addEventListener('click', function() {
alert('Butonul a fost apăsat!');
});
</script>
Pasul 8: Condiții (If-Else)
Poți folosi condiții pentru a executa diferite blocuri de cod în funcție de anumite condiții.
javascript
КопироватьРедактировать
let varsta = 20;
if (varsta >= 18) {
[Link]("Ești major!");
} else {
[Link]("Ești minor!");
}
Pasul 9: Buclă for
Bucla for permite executarea unui bloc de cod de mai multe ori.
javascript
КопироватьРедактировать
for (let i = 0; i < 5; i++) {
[Link](i); // Afișează 0, 1, 2, 3, 4
}
Pasul 10: Funcții de închidere (Callback Functions)
Uneori, vrei ca o funcție să fie apelată după ce o altă funcție și-a terminat execuția. Aceste funcții se
numesc callback functions.
Exemplu de callback:
javascript
КопироватьРедактировать
function procesareDate(data, callback) {
[Link]("Datele procesate: " + data);
callback();
}
function mesaj() {
[Link]("Procesarea a fost finalizată!");
}
procesareDate("date importante", mesaj);
Concluzie
Acesta este un început pentru învățarea JavaScript. Pe măsură ce înveți mai multe, vei descoperi
funcționalități avansate, cum ar fi manipularea asincromă cu Promises, fetch API, Module și altele.