InnoMarts logo
InnoMarts
Fast websites
← Back to course

Pierwsze Kroki z JavaScript

Pierwsze Kroki z JavaScript

Witaj w swojej pierwszej lekcji JavaScript.

To tutaj twoje strony internetowe przestają być cichymi plakatami i zaczynają być interaktywne.

HTML daje stronie strukturę.

CSS daje stronie styl.

JavaScript daje stronie zachowanie.

To znaczy, że JavaScript może reagować, kiedy user kliknie button, wpisze coś w form, otworzy menu, wyśle data albo zrobi coś podejrzanego, na przykład kliknie ten sam button 47 razy.

JavaScript to język, który mówi:

“Coś się stało. Pozwól, że zareaguję.”

Bardzo useful.

Czasem bardzo dramatic.

Ale zaczniemy spokojnie.

Bez frameworks.

Bez skomplikowanych tools.

Bez ogromnego setup.

Tylko HTML, CSS, JavaScript i twój browser.

Piękne małe laboratorium chaosu.

Czego Się Nauczysz

W tej lekcji nauczysz się:

Na końcu tej lekcji będziesz mieć małą web page połączoną z JavaScript file.

I tak, browser w końcu zacznie cię słuchać.

Przeważnie.

Browsers są uprzejme, ale surowe.

Czym Jest JavaScript?

JavaScript to programming language używany głównie w web development.

Może działać w browser i kontrolować, co dzieje się na web page.

Z JavaScript możesz:

Przykład:

console.log("Hello, JavaScript!");

Ta linia wypisuje message w browser console.

Nie pokazuje message na stronie.

Pokazuje go w developer tools.

Console to miejsce, gdzie JavaScript mówi, kiedy nie chce przeszkadzać meblom.

JavaScript w Browser

Twój browser rozumie trzy główne frontend languages:

HTML tworzy content.

CSS styluje content.

JavaScript kontroluje behavior.

Wyobraź sobie button.

HTML tworzy button.

CSS sprawia, że wygląda ładnie.

JavaScript decyduje, co się stanie, kiedy ktoś go kliknie.

Bez JavaScript button może istnieć.

Z JavaScript button może coś zrobić.

To różnica między dekoracyjnym buttonem a buttonem z pracą.

Nikt nie lubi bezrobotnych buttonów.

Stwórz Projekt

Stwórz folder dla tej lekcji:

mkdir javascript-lesson1
cd javascript-lesson1
touch index.html
touch script.js

Twój projekt powinien wyglądać tak:

javascript-lesson1/
  index.html
  script.js

Zostawimy wszystko proste.

Jeden HTML file.

Jeden JavaScript file.

Bez build tools.

Bez npm.

Bez “zainstaluj 900 packages, zanim napiszesz hello”.

Tylko czysty beginner JavaScript.

Napisz HTML

Otwórz index.html i dodaj to:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pierwsze Kroki z JavaScript</title>
</head>
<body>
  <h1>Pierwsze Kroki z JavaScript</h1>

  <p id="message">JavaScript jeszcze nie działa.</p>

  <button id="changeButton">Zmień Wiadomość</button>

  <script src="script.js"></script>
</body>
</html>

Najważniejsza część:

<script src="script.js"></script>

Ta linia łączy JavaScript file z HTML file.

Dajemy ją przed zamknięciem body.

Dzięki temu HTML elements ładują się najpierw, a potem JavaScript może je znaleźć.

Jeśli JavaScript próbuje znaleźć element, zanim browser go stworzy, JavaScript się myli.

Jak szukanie kawy przed wejściem do kuchni.

Napisz Swój Pierwszy JavaScript

Otwórz script.js i dodaj:

console.log("JavaScript jest połączony!");

Teraz otwórz index.html w browser.

Nie zobaczysz message na stronie.

To normalne.

console.log() wypisuje messages w browser console.

Aby otworzyć console:

Powinieneś zobaczyć:

JavaScript jest połączony!

Gratulacje.

Twój JavaScript file jest połączony.

Małe zwycięstwo.

Duży moment emocjonalny.

Jeszcze bez fajerwerków, ale console żyje.

Użyj alert

JavaScript może też pokazać popup message.

Dodaj to do script.js:

alert("Cześć z JavaScript!");

Odśwież stronę.

Browser pokaże popup.

To potwierdza, że JavaScript działa.

Ale uważaj z alert().

Jest useful do szybkich testów, ale annoying na prawdziwych websites.

Website, który pokazuje za dużo alerts, jest jak osoba, która ciągle dotyka cię w ramię i mówi “patrz, patrz, patrz”.

Podczas nauki częściej używaj console.log().

Users ci podziękują.

Twój future self też ci podziękuje.

Zmień Text na Stronie

Teraz sprawmy, żeby JavaScript zmienił page.

Zastąp code w script.js tym:

const message = document.getElementById("message");

message.textContent = "JavaScript teraz działa!";

Odśwież browser.

Paragraph powinien zmienić się z:

JavaScript jeszcze nie działa.

na:

JavaScript teraz działa!

To twoja pierwsza zmiana DOM.

DOM znaczy Document Object Model.

Brzmi oficjalnie i lekko strasznie.

Ale na razie myśl o DOM jak o strukturze page, którą JavaScript może czytać i zmieniać.

JavaScript znalazł paragraph.

Potem JavaScript zmienił jego text.

Bardzo simple.

Bardzo powerful.

Tutaj webpages zaczynają czuć się alive.

Dodaj Button Click

Teraz sprawmy, żeby button coś robił.

Zastąp swój script.js tym:

const message = document.getElementById("message");
const button = document.getElementById("changeButton");

button.addEventListener("click", function () {
  message.textContent = "Kliknąłeś button. JavaScript to zauważył.";
});

Odśwież page.

Kliknij button.

Message powinien się zmienić.

Co się stało?

const message = document.getElementById("message");

To znajduje paragraph.

const button = document.getElementById("changeButton");

To znajduje button.

button.addEventListener("click", function () {
  message.textContent = "Kliknąłeś button. JavaScript to zauważył.";
});

To mówi browser:

“Kiedy user kliknie button, uruchom ten code.”

To nazywa się event listener.

Events to rzeczy, które dzieją się na page.

Przykłady:

JavaScript może słuchać tych events i reagować.

Jak bardzo skupiony kelner, ale z mniejszą liczbą talerzy.

Dodaj Trochę Stylu

Uczymy się JavaScript, ale trochę CSS sprawi, że page będzie wyglądać lepiej.

Zaktualizuj index.html tak:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pierwsze Kroki z JavaScript</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    h1 {
      font-size: 42px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }

    button {
      background-color: #2563eb;
      color: white;
      border: none;
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      background-color: #1d4ed8;
    }
  </style>
</head>
<body>
  <h1>Pierwsze Kroki z JavaScript</h1>

  <p id="message">JavaScript jeszcze nie działa.</p>

  <button id="changeButton">Zmień Wiadomość</button>

  <script src="script.js"></script>
</body>
</html>

Teraz page wygląda czyściej.

HTML daje structure.

CSS daje style.

JavaScript daje behavior.

Trzej przyjaciele wreszcie pracują razem.

Nikt jeszcze nie rzucił krzesłem.

Dobry start.

Uruchom z Local Server

Możesz otworzyć HTML file bezpośrednio w browser.

Ale możesz też uruchomić prosty local server.

Jeśli używasz Caddy, uruchom to wewnątrz project folder:

caddy file-server --listen :8080

Potem otwórz:

http://localhost:8080

To useful, bo wiele real web features działa lepiej z local server.

Dla tej lekcji otwieranie pliku bezpośrednio wystarczy.

Ale używanie local server to dobry habit.

Professional habit.

Mała energia DevOps.

Common Mistakes

Zła Nazwa Pliku

Jeśli twój HTML mówi:

<script src="script.js"></script>

to file musi nazywać się:

script.js

Nie:

scripts.js
main.js
Script.js
javascript.js
prosze-dzialaj.js

Nazwa musi pasować dokładnie.

Browsers nie czytają w myślach.

Niestety.

Script Tag w Złym Miejscu

Jeśli dasz script w head, JavaScript może uruchomić się zanim HTML elements istnieją.

To może spowodować errors.

Beginner-friendly solution:

<script src="script.js"></script>

Daj to przed closing body tag.

Później nauczysz się też o defer.

Ale dziś trzymamy bestię spokojną.

Zapomnienie o Zapisaniu Plików

To zdarza się częściej, niż ludzie przyznają.

Piszesz poprawny code.

Odświeżasz browser.

Nic się nie zmienia.

Panika.

Potem widzisz, że file nie był zapisany.

Klasyka.

Najpierw save.

Potem refresh.

Panic never.

No dobrze, prawie never.

Nieotwieranie Console

Console jest twoim przyjacielem.

Poważnym przyjacielem.

Przyjacielem, który mówi ci, kiedy code jest wrong.

Otwieraj ją często.

Czytaj errors.

Errors to nie insults.

To clues.

Czasem rude clues, ale nadal clues.

Praktyka

Stwórz własną wersję page.

Zmień:

Potem dodaj kolejny console.log() message:

console.log("Button jest gotowy.");

Spróbuj zrozumieć, gdzie pojawia się message.

Im częściej używasz console, tym mniej straszna się staje.

Jak ciemna piwnica.

Nadal ciemna.

Ale teraz wiesz, gdzie jest włącznik światła.

Mini Wyzwanie

Dodaj drugi button.

Pierwszy button powinien mówić:

Pokaż Wesołą Wiadomość

Drugi button powinien mówić:

Pokaż Poważną Wiadomość

Po kliknięciu pierwszego button pokaż:

JavaScript jest fajny!

Po kliknięciu drugiego button pokaż:

JavaScript wymaga uwagi.

Będziesz potrzebować:

Spróbuj sam, zanim zaczniesz szukać pomocy.

Struggle is part of learning.

Nie forever.

Tylko wystarczająco długo, żeby brain się obudził.

Podsumowanie

Dzisiaj nauczyłeś się, że:

To jest początek.

Small code.

Big door.

JavaScript jest ogromny, ale nie musisz uczyć się wszystkiego dzisiaj.

Dzisiaj połączyłeś file, zmieniłeś text i zareagowałeś na button click.

To już jest real JavaScript.

Następna Lekcja

W następnej lekcji nauczymy się variables i data types.

Poznasz let, const, strings, numbers i booleans.

Czyli JavaScript zacznie coś pamiętać.

Więcej niż niektóre browsers po refresh.