Lekcja 1: Wprowadzenie do JavaScript

Witaj w pierwszej lekcji kursu JavaScript! Zaczniemy od absolutnych podstaw, wyjaśniając, czym jest JavaScript, do czego służy i jak możesz zacząć go używać na swoich stronach internetowych.

Czym jest JavaScript?

JavaScript (często skracany do JS) to dynamiczny, interpretowany język programowania wysokiego poziomu. Jest jednym z trzech fundamentalnych technologii tworzenia stron internetowych, obok HTML (struktura) i CSS (wygląd). JavaScript odpowiada za interaktywność i dynamiczne zachowanie stron WWW.

Początkowo stworzony do działania w przeglądarkach internetowych, aby "ożywić" strony, dziś JavaScript jest używany również po stronie serwera (dzięki Node.js), w aplikacjach mobilnych, grach i wielu innych obszarach.

Co potrafi JavaScript?

Manipulować zawartością i strukturą strony HTML (DOM - Document Object Model).
Reagować na akcje użytkownika (kliknięcia, ruchy myszką, wpisywanie tekstu).
Wysyłać i odbierać dane z serwera bez przeładowywania strony (AJAX, Fetch API).
Tworzyć animacje i efekty wizualne.
Walidować dane w formularzach przed wysłaniem.
Przechowywać dane w przeglądarce użytkownika (localStorage, sessionStorage).
Budować pełnoprawne aplikacje webowe (SPA - Single Page Applications) przy użyciu frameworków takich jak React, Angular czy Vue.
Tworzyć aplikacje serwerowe (Node.js).

Jak dodać JavaScript do strony?

Istnieją dwa główne sposoby dodawania kodu JavaScript do strony HTML:

Wewnętrzny skrypt: Kod umieszczony bezpośrednio w dokumencie HTML, wewnątrz znaczników <script> i </script>. Zazwyczaj umieszcza się go tuż przed zamknięciem znacznika </body>.
Zewnętrzny plik: Kod zapisany w osobnym pliku z rozszerzeniem .js i podlinkowany do strony HTML za pomocą atrybutu src w znaczniku <script>. To preferowane podejście dla większych skryptów, ponieważ ułatwia organizację kodu i pozwala przeglądarce buforować plik.

Przykład wewnętrznego skryptu:

<!DOCTYPE html>
<html>
<head>
    <title>Przykład</title>
</head>
<body>
    <h1>Moja strona</h1>

    <script>
        // To jest komentarz w JavaScript
        alert("Witaj na mojej stronie!"); // Wyświetla okienko dialogowe
        console.log("Skrypt został załadowany."); // Wyświetla komunikat w konsoli przeglądarki
    </script>
</body>
</html>

Przykład zewnętrznego pliku:

Plik moj-skrypt.js:

alert("Witaj z zewnętrznego pliku!");
console.log("Zewnętrzny skrypt został załadowany.");

Plik HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Przykład</title>
</head>
<body>
    <h1>Moja strona</h1>

    <!-- Podlinkowanie zewnętrznego skryptu -->
    <script src="moj-skrypt.js"></script>
</body>
</html>

Ważne: Aby zobaczyć komunikaty z console.log(), musisz otworzyć narzędzia deweloperskie w swojej przeglądarce (zazwyczaj klawiszem F12) i przejść do zakładki "Konsola".

Zadanie praktyczne

Stwórz prosty plik HTML i użyj wewnętrznego skryptu JavaScript, aby wyświetlić w okienku dialogowym (za pomocą alert()) komunikat "Uczę się JavaScript!".

Pokaż rozwiązanie

<!DOCTYPE html>
<html>
<head>
    <title>Zadanie 1</title>
</head>
<body>
    <h1>Pierwsze zadanie</h1>

    <script>
        alert("Uczę się JavaScript!");
    </script>
</body>
</html>

Zadanie do samodzielnego wykonania

Zmodyfikuj poprzedni plik HTML. Zamiast używać alert(), użyj console.log(), aby wyświetlić w konsoli przeglądarki komunikat "JavaScript jest super!". Sprawdź wynik w narzędziach deweloperskich.

FAQ - Wprowadzenie do JavaScript

Czy JavaScript to to samo co Java?

Nie, absolutnie nie. Mimo podobnej nazwy, są to dwa zupełnie różne języki programowania, o innej składni, zastosowaniach i filozofii. Podobieństwo nazw jest wynikiem decyzji marketingowej z czasów powstania JavaScript.

Czy muszę znać HTML i CSS, żeby uczyć się JavaScript?

Podstawowa znajomość HTML jest bardzo pomocna, ponieważ JavaScript najczęściej manipuluje elementami strony HTML. Znajomość CSS również się przydaje, ale nie jest ściśle wymagana na samym początku nauki podstaw samego języka JavaScript.

Gdzie najlepiej umieszczać znacznik <script>?

Najczęściej znaczniki <script> (szczególnie te z atrybutem src) umieszcza się tuż przed zamknięciem znacznika </body>. Dzięki temu strona HTML może się najpierw załadować i wyświetlić, zanim przeglądarka zacznie pobierać i wykonywać skrypty, co poprawia odczuwalną szybkość ładowania strony.

Czy JavaScript działa tylko w przeglądarkach?

Nie. Chociaż JavaScript narodził się w przeglądarkach, dzięki środowiskom takim jak Node.js, może być używany do tworzenia aplikacji serwerowych, narzędzi linii komend, aplikacji desktopowych (np. z Electron) i wielu innych.

Co oznacza, że JavaScript jest językiem "interpretowanym"?

Oznacza to, że kod JavaScript jest wykonywany linijka po linijce przez specjalny program (interpreter, np. silnik V8 w Chrome) w momencie uruchomienia, bez wcześniejszego etapu kompilacji do kodu maszynowego, jak ma to miejsce w językach kompilowanych (np. C++).

Do czego służy `console.log()`?

`console.log()` to funkcja służąca do wyświetlania informacji w konsoli deweloperskiej przeglądarki. Jest niezwykle przydatna podczas tworzenia i debugowania kodu, pozwalając sprawdzać wartości zmiennych czy śledzić przepływ wykonania programu.