Wreszcie zaczyna się dziać! Po trzech wpisach pełnych teorii i przygotowań przechodzimy do prawdziwego kodowania w języku JavaScript. W tej lekcji poznamy zmienne i stałe – fundamenty, bez których nie da się pisać programów. Nauczymy się też „łapać” elementy HTML z naszej strony i zapisywać je w zmiennych, żeby móc nimi manipulować, czyli poznamy querySelector JavaScript. Brzmi tajemniczo? Zaraz wszystko stanie się jasne.
Spis treści
- Zmienne i stałe w JavaScript
- let, const i var – czym się różnią?
- Konwencja nazewnicza – jak nazywać zmienne
- Zakresy zmiennych (block scope)
- Typy danych w JavaScript
- Operator typeof
- Document Object Model – co to takiego?
- querySelector – łapiemy elementy HTMLM/a>
- Praktyka – budujemy kod krok po kroku
- Ćwiczenia
- Podsumowanie
Zmienne i stałe w JavaScript
Zacznijmy od podstaw. Zmienna to pojemnik na dane. Możesz sobie wyobrazić ją jak pudełko z etykietą, do którego wrzucasz wartość. Może to być tekst, liczba, a nawet cały element HTML! Nazwa zmiennej to po prostu etykieta na pudełku, dzięki której później możesz do niego wrócić i sprawdzić, co jest w środku (albo zmienić zawartość).
Stała działa bardzo podobnie, z tą różnicą, że raz wrzucona wartość zostaje tam na zawsze i nie można jej zmienić. To jak pudełko zaklejone taśmą: widzisz co w środku, ale nie otworzysz go ponownie.
let, const i var – czym się różnią?
W JavaScript mamy trzy sposoby tworzenia zmiennych. Zacznijmy od const.
const – stała wartość
const userName = 'Kasia';Właśnie stworzyliśmy stałą o nazwie userName i przypisaliśmy jej wartość 'Kasia'. Używamy const, gdy wiemy, że wartość się nie zmieni. To najczęściej używany sposób w nowoczesnym JS.
Jeśli spróbujesz teraz zrobić coś takiego:
userName = 'Tomek';Dostaniesz błąd. Stała jest stała, więc nie można jej zmienić.
let – zmienna wartość
let counter = 0;
counter = 5;
counter = 10;let używamy, gdy wartość będzie się zmieniać, np. liczniki, flagi, wartości wprowadzane przez użytkownika itp.
var – staruszek od JS
var oldWay = 'lepiej tego nie używać';var to stary sposób tworzenia zmiennych. Działa inaczej niż let i const, co może prowadzić do błędów. W nowym kodzie nie używamy var – trzymamy się const i let.
Zasada na start: Zawsze używaj const. Jeśli zobaczysz, że wartość musi się zmienić, zmień na let. To proste.
Jeśli trochę już ogarniasz JavaScript to polecam Ci przeczytać na czym dokładnie polega różnica między tymi metodami tworzenia zmiennych, w tym artykule znajdziesz podrozdział pt. „Różnice między var a let/const„.
Konwencja nazewnicza
Jak nazywać zmienne? W JavaScript obowiązuje camelCase – pierwsza litera mała, kolejne słowa wielką literą:
const firstName = 'Jan';
const userAge = 25;
const isButtonActive = true;A poniżej dla kontrastu znajdziesz nieprawidłowe nazwy. To znaczy nieprawidłowe jako nazwy zmiennych w JavaScript, bo pierwszy przykład będzie idealny w Pythonie, a drugi świetnie sprawdzi się również w JS, ale do nazywania klas.
const first_name = 'Jan';
const FirstName = 'Jan';Kilka praktycznych wskazówek:
- nazwa powinna jasno mówić, co zawiera:
productInputlepsze niżinput1 - najlepiej po angielsku (kod łatwiej współdzielić),
- unikaj polskich znaków w nazwach zmiennych,
- stosuj nazwy konsekwentnie w całym projekcie.
Zakresy zmiennych
Zmienne utworzone przez let i const mają tzw. block scope (zakres blokowy). Co to oznacza? Że żyją tylko wewnątrz bloku kodu, w którym zostały stworzone:
if (true) {
const message = 'Jestem w środku!';
console.log(message);
}Powyżej zobaczymy message w konsoli, poniżej niż nie.
if (true) {
const message = 'Nadal jestem w środku!';
}
console.log(message);Dla nas to dobra wiadomość, bo zmienne nie „wyciekają” poza swoje miejsce. Na razie nie musisz zgłębiać tego tematu, wrócimy do niego w późniejszych wpisach, gdy będzie to potrzebne.
Typy danych w JavaScript
JavaScript ma kilka podstawowych typów danych. Zobaczmy je w akcji:
String (tekst)
const name = 'Ania';
const message = "Witaj w JS!";Możesz używać pojedynczych lub podwójnych cudzysłowów, efekt będzie taki sam, ale pamiętaj, że nie można ich ze sobą krzyżować.
Number (liczba)
const age = 30;
const price = 19.99;
const negative = -5;W JavaScript nie ma oddzielnych typów dla liczb całkowitych i zmiennoprzecinkowych. Każda możliwa liczba to number.
Boolean (prawda/fałsz)
const isActive = true;
const hasAccess = false;Tylko dwie możliwe wartości: true albo false.
Undefined (niezdefiniowane)
let something;
console.log(something);Gdy tworzysz zmienną ale nie przypisujesz jej wartości, ma wartość undefined, czyli wartość nie została jeszcze zdefiniowana.
Null (pusta wartość)
const empty = null;null to świadomie pusta wartość. Różni się od undefined, bo to my mówimy „to jest puste”, a nie JavaScript.
Operator typeof
A jak łatwo sprawdzić, jakiego typu jest nasza zmienna? Używamy operatora typeof:
const name = 'Kasia';
console.log(typeof name); // "string"
const age = 25;
console.log(typeof age); // "number"
const isStudent = true;
console.log(typeof isStudent); // "boolean"To bardzo przydatne podczas debugowania, gdy nie ma pewności, co siedzi w zmiennej, typeof to powie.
Document Object Model – co to takiego?
Zanim przejdziemy do „łapania” elementów HTML na naszej stronie, musimy zrozumieć czym jest DOM (Document Object Model). Brzmi poważnie, ale to naprawdę prosta sprawa.
DOM to reprezentacja naszej strony HTML w formie drzewa elementów (obiektów), którymi JavaScript może manipulować. Wyobraź sobie, że przeglądarka bierze Twój HTML:
<div>
<h1>Tytuł</h1>
<p>Paragraf</p>
</div>I tworzy z niego strukturę, gdzie każdy element to osobny obiekt. Dzięki temu możesz:
- znaleźć dowolny element na stronie,
- zmienić jego treść,
- dodać nowe elementy,
- usunąć istniejące elementy,
- czy zmieniać style.
DOM to taki most między HTML a JavaScript. HTML to struktura, DOM to wersja tej struktury dostępna dla JS.
querySelector – łapiemy elementy HTML
Teraz najważniejsza część! querySelector to metoda, która pozwala nam znaleźć i „złapać” element HTML. Działa identycznie jak selektory CSS, a my znamy już przecież CSS 🙂
const myElement = document.querySelector('#product-input');Co tu się stało? document to cała nasza strona. Mówimy: „hej dokumencie, znajdź mi element z ID product-input„. I dostajemy ten element zapisany w zmiennej myElement.
Możesz szukać na różne sposoby:
// Po ID (jak w CSS: #nazwa)
const input = document.querySelector('#product-input');
// Po klasie (jak w CSS: .nazwa)
const button = document.querySelector('.btn');
// Po tagu
const paragraph = document.querySelector('p');
// Możesz łączyć selektory
const formInput = document.querySelector('form input[type="text"]');Oto magia narzędzia, jakim jest querySelector JavaScript!
Ważne: querySelector zwraca pierwszy pasujący element. Jeśli masz kilka paragrafów i zastosujesz querySelector('p'), dostaniesz tylko pierwszy. Istnieje możliwość, żeby złapać wszystkie, ale o tym później.
Praktyka – budujemy kod krok po kroku
No dobra, teoria teorią, ale czas na prawdziwy kod. Otwórz plik script.js i zacznijmy od zera. Usuń to console.log, które tam było. Napiszmy kod w kilku krokach:
Krok 1: Łapiemy pole tekstowe
Najpierw potrzebujemy dostać się do pola, gdzie użytkownik będzie wpisywał produkty. W HTML mamy:
Dodajmy do niego id="product-input". Użyjemy go, żeby złapać input. Mamy teraz:
<input id="product-input" type="text" placeholder="np. 2 banany" />Napiszmy w script.js:
const productInput = document.querySelector('#product-input');
console.log('Input:', productInput);Zapisz plik, odśwież stronę w przeglądarce i otwórz konsolę (F12). W konsoli powinno się wyświetlić coś takiego:
Działa! Właśnie złapaliśmy element HTML i zapisaliśmy go w pudełku, czyli zmiennej. Teraz możemy z nim robić co chcemy..
Krok 2: Łapiemy przycisk
Podobnie zrobimy z przyciskiem. W HTML mamy:
Dodamy do niego id="add-button".
<button id="add-button" type="submit">Dodaj</button>Dodajmy kolejny querySelector do do script.js:
const productInput = document.querySelector('#product-input');
const addButton = document.querySelector('#add-button');
console.log('Input:', productInput);
console.log('Przycisk:', addButton);Odśwież stronę. W konsoli zobaczysz teraz oba elementy. Mamy input i mamy przycisk!
Moment, moment – zauważyłeś coś ciekawego?
Jeśli wpiszemy w konsoli bezpośrednio:
document.querySelector('#add-button');to zobaczymy element pokazany jako kawałek HTML-a. Ale gdy użyjemy console.log(), element pokazuje się jako obiekt JavaScript z właściwościami! (O obiektach w JavaScript pogadamy innym razem, obiecuję 🙂 )
Dlaczego tak się dzieje?
Konsola jest „inteligentna” i próbuje pokazać rzeczy w najbardziej czytelny sposób:
- bezpośrednie wpisanie: konsola rozpoznaje, że to element HTML i pokazuje go jak wygląda w kodzie strony (wygodny podgląd dla programisty)
- przez console.log(): konsola pokazuje, czym ten element naprawdę jest w środku: obiektem JavaScript z mnóstwem właściwości (textContent, className, style, itp.)
Dużo zależy od tego jakiej przeglądarki używamy i jakie usprawnienia ma wbudowane.
To tak jakbyśmy patrzyli na samochód z zewnątrz i zobaczyli karoserię vs. zajrzeli pod maskę i oglądali silnik, przewody i inne części (o których nie mam bladego pojęcia). To ten sam element, tylko pokazany na dwa sposoby.
Nie przejmujmy się tym, to tylko różne sposoby wyświetlania, zależne głównie od przeglądarki. Obydwa są przydatne w różnych sytuacjach. Najważniejsze, że złapaliśmy nasz przycisk i mamy go zapisanego w zmiennej addButton.
Krok 3: Łapiemy formularz
Formularz też będzie nam potrzebny. Dodajmy mu ID shopping-form:
Zatem nasz kod JS powinien wyglądać tak:
const productInput = document.querySelector('#product-input');
const addButton = document.querySelector('#add-button');
const shoppingForm = document.querySelector('#shopping-form');
console.log('Input:', productInput);
console.log('Przycisk:', addButton);
console.log('Formularz:', shoppingForm);Krok 4: Łapiemy miejsce na listę
Ostatni element – miejsce, gdzie będą się pojawiać produkty, czyli nasza lista oznaczona elementem <ul>. Dodamy jej id shopping-list.
const productInput = document.querySelector('#product-input');
const addButton = document.querySelector('#add-button');
const shoppingForm = document.querySelector('#shopping-form');
const shoppingList = document.querySelector('#shopping-list');
console.log('Input:', productInput);
console.log('Przycisk:', addButton);
console.log('Formularz:', shoppingForm);
console.log('Lista zakupów:', shoppingList);
Świetnie! Mamy wszystkie elementy. Ale zobaczmy jeszcze coś ciekawego.
Krok 5: Bawimy się zmiennymi
Na koniec, żeby lepiej zrozumieć zmienne, dodajmy kilka przykładów:
// Wcześniejszy kod zostaje bez zmian
// Przykłady różnych typów zmiennych
const appName = 'Lista zakupów';
let itemCount = 0;
const maxItems = 50;
console.log('Nazwa aplikacji:', appName);
console.log('Typ appName:', typeof appName);
console.log('Liczba produktów:', itemCount);
console.log('Typ itemCount:', typeof itemCount);Zobaczmy co się dzieje:
appNameto stała tekstowa (string),itemCountto zmienna liczbowa (number) – użyliśmylet, bo ta wartość będzie się zmieniać,maxItemsto stała liczbowa.
Co jeśli widzisz null?
Jeśli zamiast elementów widzisz w konsoli null, to znaczy, że querySelector nic nie znalazł. Sprawdź czy:
- ID w HTML pasują do tych w
querySelector(wielkość liter ma znaczenie!) - Plik
script.jsjest podłączony do HTML - Użyłeś atrybutu
deferw tagu<script>
Ćwiczenia
Czas na eksperymenty:
Ćwiczenie 1: Dodaj swoją zmienną Stwórz stałą const greeting = 'Cześć!' i zaloguj ją do konsoli razem z jej typem. Powinno pojawić się „string”.
Ćwiczenie 2: Złap nagłówek Spróbuj złapać nagłówek <h1> ze strony używając querySelector('h1'). Zaloguj go do konsoli. Zobacz, że możesz szukać po tagu bez żadnych dodatkowych znaków.
Ćwiczenie 3: Eksperymentuj z typami Stwórz zmienne różnych typów i sprawdź ich typy:
const text = 'Hello';
const number = 42;
const isTrue = false;
let nothing;
console.log(typeof text);
console.log(typeof number);
console.log(typeof isTrue);
console.log(typeof nothing);Ćwiczenie 4: Zmień wartość Spróbuj zmienić wartość itemCount (to let, więc powinno zadziałać):
itemCount = 5;
console.log(itemCount);Potem spróbuj zmienić appName (to const) – dostaniesz błąd. To normalne i właśnie tak ma działać.
Ćwiczenie 5: querySelector w konsoli Otwórz konsolę i wpisz bezpośrednio:
document.querySelector('#product-input')Naciśnij Enter. Zobaczysz element! Możesz tam testować różne selektory na żywo, bez zapisywania pliku.
Podsumowanie
Za Tobą ogromny krok. Teraz wiesz:
- czym są zmienne (
let) i stałe (const), - jak je nazywać zgodnie z konwencją,
- jakie są podstawowe typy danych,
- jak sprawdzić typ używając
typeof, - czym jest DOM,
- jak znaleźć elementy na stronie używając
querySelector.
W następnym wpisie nauczymy się reagować na działania użytkownika. Zrobimy tak, żeby nasz przycisk „Dodaj” był aktywny tylko wtedy, gdy użytkownik wpisze minimum 3 znaki. Wykorzystamy do tego instrukcje warunkowe i addEventListener. Będzie się działo!
Wszystkie zmiany z tej lekcji znajdziesz w repozytorium na branchu lekcja_4_zmienne_i_querySelector.
Do zobaczenia w następnej lekcji! A tymczasem – eksperymentuj, testuj, łam kod i buduj go od nowa. Tak się uczy się programowania 🙂