Tutorial JavaScript Romana: Programare Web pentru Incepatori
Tutorial JavaScript Romana: Programare Web pentru Incepatori
JavaScript este limbajul principal folosit pentru dezvoltarea de aplicatii web interactive. Daca esti la inceput de drum in programare si vrei sa inveti cum sa creezi site-uri dinamice si interactive, acest tutorial iti va oferi o introducere de baza in JavaScript. Vom trece prin concepte fundamentale si vom explica cum poti folosi JavaScript pentru a adauga functionalitate paginilor tale web.
Ce este JavaScript?
JavaScript este un limbaj de programare folosit in principal pentru dezvoltarea de aplicatii web. Acesta ruleaza pe partea clientului, ceea ce inseamna ca majoritatea codului JavaScript este executat direct in browserul utilizatorului. Cu JavaScript, poti adauga elemente dinamice si interactive, cum ar fi:
- Formulare interactive
- Animatii
- Validarea datelor introduse de utilizatori
- Gestionarea evenimentelor precum click-uri, scroll sau hover
Urmareste acest tutorial de JavaScript in limba romana explicat de Claudiu Ciumedean, Software Engineer la Microsoft in Danemerca.
Cum functioneaza JavaScript in paginile web?
In mod obisnuit, JavaScript functioneaza alaturi de HTML (structura paginii) si CSS (stilizarea paginii) pentru a crea site-uri web complete. HTML ofera structura paginii, CSS defineste cum arata pagina, iar JavaScript adauga comportamentele interactive.
Un exemplu simplu de integrare a JavaScript-ului intr-o pagina HTML este urmatorul:
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prima pagina cu JavaScript</title>
</head>
<body>
<h1>Bine ai venit la primul tau script JavaScript!</h1>
<button onclick="salut()">Apasa-ma!</button>
<script>
function salut() {
alert('Salutare! Ai apasat butonul.');
}
</script>
</body>
</html>In exemplul de mai sus, atunci cand utilizatorul apasa pe buton, apare un mesaj de tip “alert” generat de functia salut() din JavaScript. Acesta este un exemplu simplu de cum JavaScript poate face pagina web interactiva.
✅ In continuare, te putem ajuta sa devii programator web in doar 9 luni, pornind de la zero: https://teachbit.ro/curs-web-development
TeachBit.ro
Bazele Programarii cu JavaScript
Pentru a intelege JavaScript, trebuie sa inveti conceptele de baza ale programarii in acest limbaj. Sa trecem prin cele mai importante concepte care te vor ajuta sa incepi:
1. Variabile
O variabila este o metoda prin care poti stoca date. In JavaScript, poti crea variabile folosind cuvintele cheie var, let, sau const.
let nume = 'Ana';
const varsta = 25;letpermite modificarea valorii ulteriorconsteste folosita pentru a declara variabile care nu isi pot schimba valoarea
2. Tipuri de date
In JavaScript, cele mai comune tipuri de date sunt:
- String (sir de caractere):
"Salut" - Number (numere):
10,5.5 - Boolean (adevarat sau fals):
truesaufalse - Array (liste de valori):
[1, 2, 3] - Object (structuri complexe):
{ nume: 'Ana', varsta: 25 }
3. Operatori
Operatorii sunt simboluri care efectueaza operatii pe valori. Cei mai frecventi operatori sunt:
- Operatori aritmetici:
+,-,*,/,%
let suma = 10 + 5; // 15
let restul = 10 % 3; // 1- Operatori de comparatie:
==,===,!=,!==,>,<
let egal = (5 == '5'); // true
let strictEgal = (5 === '5'); // false4. Functii
Functiile sunt blocuri de cod care pot fi definite si apelate oricand. Poti trece argumente in functii si sa returnezi valori din acestea.
function aduna(a, b) {
return a + b;
}
let rezultat = aduna(10, 15); // 255. Controlul fluxului
Controlul fluxului se refera la modul in care instructiunile codului sunt executate. Cele mai frecvente structuri de control sunt if, else, for, si while.
- If-Else:
let numar = 10;
if (numar > 5) {
console.log('Numarul este mai mare decat 5.');
} else {
console.log('Numarul este mai mic sau egal cu 5.');
}- For:
for (let i = 0; i < 5; i++) {
console.log(i);
}Manipularea DOM-ului cu JavaScript
DOM (Document Object Model) este structura care reprezinta documentul HTML ca un arbore de elemente. Cu JavaScript, poti accesa si modifica elementele HTML prin intermediul DOM-ului.
De exemplu, daca ai un paragraf pe care vrei sa il modifici:
<p id="text">Text initial</p>
<button onclick="schimbaText()">Schimba textul</button>
<script>
function schimbaText() {
document.getElementById('text').innerText = 'Text schimbat!';
}
</script>Cand apesi butonul, textul din paragraful cu id="text" va fi schimbat din “Text initial” in “Text schimbat!”.
Gestionarea Evenimentelor
JavaScript permite gestionarea evenimentelor din browser, precum:
- Click-uri
- Trecerea mouse-ului peste un element
- Apasarea tastelor
Poti folosi functii pentru a reactiona la aceste evenimente.
<button id="buton">Apasa-ma!</button>
<script>
document.getElementById('buton').addEventListener('click', function() {
alert('Butonul a fost apasat!');
});
</script>Ce poti face mai departe cu JavaScript?
Odata ce te familiarizezi cu conceptele de baza, poti explora aplicatii mai complexe. Iata cateva exemple de ce poti realiza cu JavaScript:
1. Formulare interactive
Poti crea formulare care valideaza automat datele introduse de utilizator. De exemplu, poti verifica daca un camp de e-mail este completat corect inainte de a trimite datele.
2. Animatii si efecte vizuale
Cu JavaScript si CSS, poti crea animatii sau efecte vizuale pe site-uri. De exemplu, poti face ca un element sa dispara sau sa se miste in functie de actiunile utilizatorului.
3. Aplicatii web dinamice
Daca inveti librarii precum React sau Vue.js, poti construi aplicatii web moderne, rapide si dinamice care ruleaza direct in browser.
Biblioteci si Framework-uri JavaScript
In afara de JavaScript pur, exista multe biblioteci si framework-uri care simplifica dezvoltarea de aplicatii web. Cele mai populare sunt:
- jQuery: Usureaza manipularea DOM-ului si gestionarea evenimentelor.
- React: Un framework dezvoltat de Facebook pentru aplicatii web dinamice.
- Vue.js: O alta alternativa pentru aplicatii web reactive, foarte usor de invatat.
- Angular: Un framework dezvoltat de Google pentru aplicatii web complexe.
Concluzie
JavaScript este o alegere excelenta daca vrei sa inveti programare si sa creezi site-uri web interactive. In acest tutorial pentru incepatori, am acoperit conceptele de baza si cum sa incepi sa folosesti JavaScript. Cu perseverenta si practica, vei putea dezvolta aplicatii web dinamice, moderne si interactive.
Pe masura ce avansezi, poti explora librarii si framework-uri care iti vor simplifica munca si iti vor permite sa construiesti aplicatii mai complexe.
✅ In continuare, te putem ajuta sa devii programator web in doar 9 luni, pornind de la zero: https://teachbit.ro/curs-web-development
TeachBit.ro
Răspunsuri