JavaScript Lecția 1

Lecția 1: Ce este JavaScript și de ce este important

✔️ Ce este JavaScript?

JavaScript (JS) este un limbaj de programare care rulează în browser și permite să faci paginile web interactive și dinamice.

Cu JavaScript poți face:

  • Buton care răspunde când dai click
  • Formulare care verifică dacă ai completat corect
  • Jocuri, animații și aplicații web complexe
  • Modificarea conținutului paginii fără să o reîncarci

✔️ De ce este important?

  • Este unul dintre cele mai populare limbaje de programare din lume
  • Rulează în orice browser modern fără să ai nevoie de instalații suplimentare
  • Este baza multor aplicații web și framework-uri (React, Angular, Vue)
  • Îți permite să faci pagini web interactive și să îmbunătățești experiența utilizatorului

Exemplu simplu JavaScript:

<button onclick="alert('Salut, lume!')">Apasă-mă</button>

Acest buton afișează o alertă când îl apeși.

Codul fișierului HTML:

<!DOCTYPE html>
<html lang=”ro”>
<head>
<meta charset=”UTF-8″ />
<title>Exemplu JavaScript Simplu</title>
<style>
body {
font-family: Calibri, sans-serif;
background-color: #FFF3CD;
color: #CC0000;
padding: 20px;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>

<h1>Exemplu simplu JavaScript:</h1>

<button onclick=”alert(‘Salut, lume!’)”>Apasă-mă</button>

<p>Acest buton afișează o alertă când îl apeși.</p>

</body>
</html>

Explicații:
:: <button> creează un buton.
:: onclick=”alert(‘Salut, lume!’)” spune browserului să afișeze o fereastră alertă când se apasă butonul.
:: textul din <p> explică ce face butonul.

Lecția 2: Configurarea mediului de dezvoltare JavaScript

Configurarea mediului de dezvoltare pentru JavaScript

✔️ Ce este mediul de dezvoltare?

Este un set de unelte și programe care te ajută să scrii, testezi și rulezi codul JavaScript eficient.

✔️ Pentru JavaScript în browser, ai nevoie doar de:

  • Un editor de text (ex: Notepad++, Visual Studio Code, Sublime Text)
  • Un browser modern (Google Chrome, Firefox, Edge)

✔️ Cum să începi?

  1. Deschide editorul de text și scrie cod HTML + JavaScript.
  2. Salvează fișierul cu extensia .html.
  3. Deschide fișierul în browser pentru a vedea și testa codul.

Exemplu simplu de fișier HTML cu JavaScript:

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8" />
  <title>Test JavaScript</title>
</head>
<body>

  <h1>Salut, JavaScript!</h1>

  <script>
    alert('Salut, lume!');
  </script>

</body>
</html>

✔️ Alte opțiuni avansate:

  • Folosește un IDE dedicat pentru JavaScript (ex: WebStorm)
  • Folosește platforme online de codare (ex: CodePen, JSFiddle, repl.it)
  • Instalează Node.js dacă vrei să rulezi JavaScript și în afara browserului
Lecția 2.1: Primul program JavaScript

Primul program JavaScript

✔️ Ce este un program JavaScript?

Este un set de instrucțiuni scrise în limbajul JavaScript care rulează în browser.

✔️ Exemplu simplu:

Programul JavaScript (live)

Apasă butonul de mai jos pentru a vedea un mesaj alert JavaScript:

✔️ Cum rulezi programul?

  • Salvează codul într-un fișier cu extensia .html.
  • Deschide fișierul în browser.
  • Vezi fereastra alertă cu mesajul „Salut, lume!”.

Codul HTML:

<!DOCTYPE html>
<html lang=”ro”>
<head>
<meta charset=”UTF-8″ />
<title>Lecția 2.1: Primul program JavaScript</title>
<style>
body {
font-family: Calibri, sans-serif;
background-color: #FFF3CD;
color: #CC0000;
padding: 20px;
font-size: 16px;
line-height: 1.6;
}
code {
background-color: #eee;
padding: 2px 6px;
border-radius: 4px;
font-family: monospace;
color: black;
}
</style>
</head>
<body>

<h3>Primul program JavaScript</h3>

<p><strong>✔️ Ce este un program JavaScript?</strong></p>
<p>Este un set de instrucțiuni scrise în limbajul JavaScript care rulează în browser.</p>

<p><strong>✔️ Exemplu simplu:</strong></p>

<div style=”font-family: Calibri, sans-serif; background-color: #FFF3CD; color: #CC0000; padding: 20px; font-size: 16px; line-height: 1.6;”>

<h1 style=”color: #CC0000;”>Programul JavaScript (live)</h1>

<p>Apasă butonul de mai jos pentru a vedea un mesaj alert JavaScript:</p>

<button onclick=”alert(‘Salut, lume!’)”
style=”padding: 10px 20px; background-color: #CC0000; color: white; border: none; border-radius: 5px; cursor: pointer;”>
Apasă-mă
</button>

</div>

<p><strong>✔️ Cum rulezi programul?</strong></p>
<ul>
<li>Salvează codul într-un fișier cu extensia <code>.html</code>.</li>
<li>Deschide fișierul în browser.</li>
<li>Vezi fereastra alertă cu mesajul „Salut, lume!”.</li>
</ul>

</body>
</html>