Poznaj Programowanie

Certyfikat bezpieczeństwa SSL napisany na żółtej naklejce na klawiaturze laptopa z oświetleniem tylnym.

Twoja pierwsza aplikacja w JavaScript

Piotr Grochal 4 min. czytania

JavaScript to język programowania, który ożywia strony internetowe i pozwala szybko zbudować pierwsze interaktywne projekty. Dla początkujących idealnym startem jest prosty mini‑projekt, np. aplikacja zmieniająca kolor tekstu po kliknięciu przycisku – efekty zobaczysz od razu.

Dlaczego JavaScript to doskonały wybór dla początkujących?

JavaScript jest wszechstronny i stosunkowo łatwy do opanowania – od prostych stron po rozbudowane aplikacje webowe i mobilne. Opanowanie podstaw (składnia, zmienne, funkcje, pętle, obiekty) pozwala szybko przejść do praktyki, co świetnie buduje motywację. Klasyczny start to komenda w konsoli deweloperskiej: console.log("Hello, World!"); – pierwszy, natychmiastowy sukces.

Zalety dla adeptów:

  • Darmowe narzędzia – wystarczy edytor, np. Visual Studio Code, popularny wśród początkujących;
  • Natychmiastowa praktyka – kod działa w przeglądarce bez dodatkowych instalacji;
  • Szerokie zasoby – dokumentacja MDN i kursy wideo (Microsoft Learn, YouTube) ułatwiają start.

Przygotowanie środowiska – krok po kroku

Aby stworzyć pierwszą aplikację, przygotuj trzy elementy:

  • Przeglądarka – z wbudowaną konsolą deweloperską (F12) do testów i debugowania;
  • Edytor tekstu – polecany Visual Studio Code (darmowy, wygodne rozszerzenia i podpowiedzi składni);
  • Struktura projektu – utwórz folder „Pierwszy-program-javascript”, w nim plik index.html, podfolder css z style.css oraz plik script.js w folderze głównym.

Otwórz plik HTML w przeglądarce i korzystaj z konsoli (F12) do szybkich testów, np.: let imie = "Anna"; console.log("Cześć, " + imie + "!");.

Budujemy stronę HTML z podstawowym stylem CSS

Najpierw stwórz szkielet HTML, który ładuje arkusz stylów i skrypt. Wklej do index.html poniższy kod:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pierwsza aplikacja w JavaScript</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 id="mainText" class="textRed">Witaj w mojej pierwszej aplikacji JavaScript!</h1>
<button id="changeColorText" class="button">Zmień kolor tekstu</button>
<script src="script.js"></script>
</body>
</html>

Następnie dodaj podstawowe style w css/style.css dla czytelności:

.textRed { color: red; }
.textGreen { color: green; }
.button {
margin-top: 1rem;
background-color: lightcyan;
font-size: 2rem;
padding: 1rem;
border: none;
cursor: pointer;
}

Taka konfiguracja zapewnia prostotę i dobrą czytelność na urządzeniach mobilnych dzięki meta‑tagowi viewport i zewnętrznym plikom CSS/JS.

Pisanie pierwszego skryptu JavaScript – interaktywność w akcji

Najlepszą praktyką jest trzymanie logiki w zewnętrznym pliku script.js i podpinanie go na końcu sekcji body, aby przyspieszyć ładowanie strony. Wklej poniższy kod, aby przełączać kolor tekstu po kliknięciu przycisku:

const button = document.querySelector("#changeColorText"); // wybór przycisku
const text = document.querySelector("#mainText"); // wybór nagłówka

button.addEventListener("click", () => {
text.classList.toggle("textGreen"); // włącza/wyłącza klasę zieloną
text.classList.toggle("textRed"); // przełącza klasę czerwoną
console.log("Kolor przełączony!");
});

Wyjaśnienie krok po kroku:

  • document.querySelector() wybiera element po selektorze id,
  • addEventListener nasłuchuje kliknięcia w nowoczesny i czytelny sposób,
  • classList.toggle() przełącza klasy CSS bez przeładowania strony.

Uruchom stronę – po kliknięciu nagłówek zmieni kolor. To Twój pierwszy dynamiczny efekt!

Rozwijamy aplikację – dodajemy więcej funkcji

Rozszerz projekt o prosty kalkulator – świetne ćwiczenie dla juniorów. Najpierw zdefiniuj funkcję i przetestuj ją w konsoli:

const dodaj = (a, b) => a + b;

const liczba1 = 5;
const liczba2 = 3;
console.log("Wynik:", dodaj(liczba1, liczba2)); // 8

Następnie wykorzystaj funkcję w reakcji na kliknięcie (np. wypisz wynik w nagłówku):

button.addEventListener("click", () => {
const wynik = dodaj(10, 20);
text.textContent = "Wynik: " + wynik;
});

Tak w praktyce poznajesz zmienne, funkcje i zdarzenia – fundamenty programowania w JavaScript.

Typowe błędy początkujących i jak ich unikać

Najczęściej spotykane pułapki na starcie to:

  • Brak podpięcia skryptu – upewnij się, że masz w HTML: <script src="script.js"></script> tuż przed </body>;
  • Błędy w konsoli – zawsze sprawdzaj F12 (np. literówki w id, brak pliku);
  • Stare praktyki – unikaj var na rzecz let/const w nowych projektach;
  • Testowanie – ćwicz na małych zadaniach (zmienne, pętle, proste funkcje).

Kolejne kroki – od podstaw do własnej aplikacji

Oto pomysły, które rozwiną Twoje umiejętności:

  • Proste gry – licznik kliknięć, generator losowych kolorów;
  • Kursy wideo – tutoriale projektowe na YouTube i ścieżki na Microsoft Learn;
  • Aplikacje mobilne – ucz się na telefonie z aplikacjami do JavaScript;
  • Struktura projektu – zawsze oddzielaj HTML (struktura), CSS (styl) i JS (logika).

Podobne artykuły