JavaScript - podstawy i wprowadzenie
- Praktyczne zadania
- Teoria
- Pomoce do ćwiczeń
Podstawy: składnia, zmienne, operatory
Każdy kod na tej stronie możesz od razu uruchomić przyciskiem Uruchom albo skrótem Ctrl+Enter. Zmieniaj liczby, psuj kod i patrz, co się dzieje.
Czym jest JavaScript i do czego go użyjesz na egzaminie
JavaScript to skryptowy język programowania, który działa w przeglądarce użytkownika. HTML nadaje stronie strukturę, CSS wygląd, a JavaScript interaktywność. Na INF.03 użyjesz go głównie do:
- reagowania na kliknięcie przycisku,
- pobierania danych wpisanych w formularz,
- obliczeń (koszt wesela, spalanie paliwa, cena usługi),
- wyświetlania wyniku na stronie i zmiany stylów bez przeładowania.
Kod JS wstawiamy do pliku HTML na dwa sposoby:
<!-- 1. bezpośrednio w pliku HTML --> <script> console.log("Cześć!"); </script> <!-- 2. z zewnętrznego pliku (częste w arkuszach) --> <script src="skrypt.js"></script>
console.log(...) wypisuje wartość w konsoli przeglądarki. Konsolę otwierasz klawiszem F12 → zakładka Console. Tam pokazują się na czerwono wszystkie błędy JS, więc zaglądaj do niej zawsze, gdy „nic się nie dzieje”.
Zasady składni
Składnia JS przypomina C++ i Javę, ale jest bardziej elastyczna. Zapamiętaj cztery zasady:
| Zasada | Co to znaczy |
|---|---|
| Aa ≠ aa | Wielkość liter ma znaczenie. Zmienna i zmienna to dwie różne rzeczy. To samo z console.Log — to błąd. |
| ; | Kończ każdą instrukcję średnikiem. JS często wybacza jego brak, ale ze średnikiem kod jest czytelniejszy i bezpieczniejszy. |
| // /* */ | Komentarze: // jedna linia albo /* kilka linii */. Przeglądarka je pomija. |
| { } | Klamry otwierają i zamykają blok kodu. Każdą otwartą klamrę trzeba zamknąć. |
Co się stanie po uruchomieniu: let wynik = 10; console.log(Wynik);
Błąd Wynik is not defined. Zadeklarowaliśmy wynik z małej litery, a próbujemy użyć Wynik. Dla JS to zupełnie inna nazwa.
Zmienne: pudełka na dane
Zmienna to nazwane „pudełko”, do którego wkładasz wartość. Tworzysz je jednym z trzech słów:
| Słowo | Kiedy używać |
|---|---|
| const | Wartość przypisujesz raz i się nie zmienia (stawka VAT, cena bazowa, pobrany element strony). Najbezpieczniejszy wybór. |
| let | Wartość będzie się zmieniać (licznik w pętli, wynik obliczeń). Żyje tylko w bloku { }, w którym powstała. |
| var | Stary sposób. Unikaj, ale rozpoznawaj — może pojawić się w starszych arkuszach. |
const na start · let, gdy się zmienia · var do muzeum
Trzy typy danych, które spotkasz najczęściej
| Typ | Przykład | Uwagi |
|---|---|---|
| number | 25, 3.5 | Liczby. Część dziesiętną oddziela kropka, nie przecinek. |
| string | "Kowalski", '5' | Tekst, zawsze w cudzysłowie. "5" to tekst, nie liczba! |
| boolean | true, false | Prawda albo fałsz. Wynik każdego porównania. |
Co wypisze console.log("2" + 2);
+ z tekstem skleja zamiast dodawać, więc "2" + 2 daje tekst "22". Na egzaminie dane z formularza przychodzą jako tekst, dlatego trzeba je zamieniać na liczby. To najczęstszy błąd na INF.03.
Operatory arytmetyczne
| Operator | Nazwa | Przykład |
|---|---|---|
| + | dodawanie (i sklejanie tekstu) | 2 + 3 → 5 |
| - | odejmowanie | 5 - 2 → 3 |
| * | mnożenie | 3 * 4 → 12 |
| / | dzielenie | 10 / 4 → 2.5 |
| % | modulo, reszta z dzielenia | 10 % 3 → 1 |
| ++ | zwiększ o 1 | a++ to skrót od a = a + 1 |
| -- | zmniejsz o 1 | a-- to skrót od a = a - 1 |
Liczba jest parzysta, gdy reszta z dzielenia przez 2 wynosi zero:
if (liczba % 2 === 0) { ... } // parzysta
Operatory porównania
Porównanie zawsze daje true albo false. Na tym opierają się wszystkie warunki. Najważniejsze jest rozróżnienie trzech „równa się”:
x = 55 == "5" → true5 === "5" → false. Używaj tego.| Operator | Znaczenie | Przykład |
|---|---|---|
| !== | ściśle różne | 5 !== "5" → true |
| != | różne | 4 != 5 → true |
| > < | większe, mniejsze | 5 > 3 → true |
| >= <= | większe lub równe, mniejsze lub równe | 5 >= 5 → true |
Co zwróci 10 === "10"?
Wartość się zgadza, ale typ nie: po lewej liczba, po prawej tekst. Potrójne === sprawdza oba, więc wynik to false.
Operatory logiczne
Łączą kilka warunków w jeden.
| Operator | Nazwa | Kiedy daje true | Przykład |
|---|---|---|---|
| && | I (AND) | tylko gdy oba warunki są prawdziwe | wiek >= 18 && maBilet |
| || | LUB (OR) | gdy choć jeden jest prawdziwy | dzien === "Sobota" || dzien === "Niedziela" |
| ! | NIE (NOT) | odwraca wynik | !(5 > 3) → false |
&& — muszą oba · || — wystarczy jeden · ! — odwróć
Zadania
Utwórz stałą cenaLitra = 6.49 oraz zmienne kilometry = 250 i spalanie = 7 (litrów na 100 km). Oblicz i wypisz koszt paliwa na trasę.
Pokaż rozwiązanie
const cenaLitra = 6.49;
let kilometry = 250;
let spalanie = 7;
let litry = kilometry / 100 * spalanie;
let koszt = litry * cenaLitra;
console.log("Koszt paliwa: " + koszt + " zł"); // 113.575 zł
Dla zmiennej liczba = 37 wypisz resztę z dzielenia przez 2 oraz wynik porównania, czy ta reszta jest ściśle równa 0.
Pokaż rozwiązanie
let liczba = 37; console.log(liczba % 2); // 1 console.log(liczba % 2 === 0); // false, czyli nieparzysta
Zniżka przysługuje osobom poniżej 26 lat albo posiadaczom Karty Dużej Rodziny. Dla wiek = 30 i kartaRodziny = true wypisz jednym wyrażeniem, czy zniżka przysługuje.
Pokaż rozwiązanie
let wiek = 30;
let kartaRodziny = true;
console.log(wiek < 26 || kartaRodziny); // true, bo wystarczy jeden warunek
Ściąga z lekcji 1
Zmienne
const VAT = 0.23; let wynik = 0;
const na start, let gdy się zmienia, var do muzeum.
Trzy „równa się”
x = 5 // przypisz x == "5" // wartość x === 5 // wartość i typ
W warunkach zawsze ===.
Tekst a liczba
"2" + 2 // "22" 2 + 2 // 4 3.5 // kropka, nie przecinek
Plus z tekstem skleja, nie dodaje.
Parzystość i logika
x % 2 === 0 // parzysta a && b a || b !a
&& muszą oba, || wystarczy jeden, ! odwróć.
Na następnej lekcji: instrukcje if i switch, pętla for oraz tablice.
