Wprowadzenie do JavaScript

1. Wstęp teoretyczny

JavaScript (JS) to jeden z najważniejszych języków programowania używanych w internecie. Powstał w 1995 roku w firmie Netscape, a jego twórcą jest Brendan Eich. Początkowo miał służyć do ożywienia stron internetowych, które wcześniej były statyczne i nie pozwalały na interakcję z użytkownikiem.

Dlaczego opracowano JavaScript?

  • Aby umożliwić programistom tworzenie dynamicznych stron WWW.
  • Do obsługi interakcji – np. przycisków, formularzy, animacji.
  • Żeby odciążyć serwery – część logiki można wykonywać po stronie użytkownika (przeglądarka).

Jak się wykorzystuje JavaScript?

  • Do tworzenia efektów wizualnych na stronach (animacje, rozwijane menu).
  • Do walidacji danych w formularzach (np. sprawdzanie poprawności adresu e-mail przed wysłaniem).
  • Do budowania gier i aplikacji internetowych.
  • W połączeniu z technologiami HTML i CSS tworzy trzon współczesnych stron WWW.
  • Obecnie JavaScript działa też poza przeglądarką, np. w Node.js, co pozwala używać go do pisania aplikacji serwerowych.

Ciekawostki o JS:

  • Pierwotnie nazywał się Mocha, później LiveScript, a dopiero potem JavaScript.
  • Nazwa „JavaScript” nie oznacza, że jest spokrewniony z Javą – to tylko chwyt marketingowy.
  • Jest to jeden z najpopularniejszych języków programowania na świecie.
  • Każda przeglądarka ma wbudowany silnik JavaScript (np. V8 w Chrome, SpiderMonkey w Firefoksie).

2. Przykłady użycia JavaScript

Przykład 1 – komunikat powitalny

<!DOCTYPE html>
<html>
<head>

<title>Witaj w JS</title>
</head>
<body>
  <script>
    alert("Witaj na mojej stronie!");
  </script>
</body>
</html>

Efekt: Po otwarciu strony pojawi się okienko z komunikatem.

Przykład 2 – zmiana treści na stronie

<!DOCTYPE html>
<html>
<head>

<title>JS przykład</title>
</head>
<body>
  <p id="tekst">To jest stary tekst.</p>
  <button onclick="document.getElementById('tekst').innerHTML = 'Tekst został zmieniony!'">
    Kliknij mnie
  </button>
</body>
</html>

Efekt: Po kliknięciu przycisku zmienia się treść paragrafu.

Przykład 3 – prosty kalkulator dodawania

<!DOCTYPE html>
<html>
<head>

<title>Kalkulator</title>
</head>
<body>
  <input id="a" type="number" placeholder="Pierwsza liczba">
  <input id="b" type="number" placeholder="Druga liczba">
  <button onclick="dodaj()">Dodaj</button>
  <p id="wynik"></p>

  <script>
    function dodaj() {
      let x = Number(document.getElementById("a").value);
      let y = Number(document.getElementById("b").value);
      document.getElementById("wynik").innerHTML = "Wynik: " + (x + y);
    }
  </script>
</body>
</html>

Efekt: Po wpisaniu dwóch liczb i kliknięciu przycisku, wyświetli się wynik dodawania.

3. Zadania dla uczniów

Zadanie 1

Napisz stronę, na której po kliknięciu przycisku wyświetli się w okienku (alert) Twoje imię i ulubione hobby.

Zadanie 2

Utwórz stronę, na której:

  • będzie przycisk „Zmień kolor tła”,
  • po jego kliknięciu strona zmieni kolor tła na np. żółty.