Wprowadzenie do Java Script

Czym jest JavaScript?

JavaScript to skryptowy język programowania, który działa głównie po stronie klienta (czyli w przeglądarce internetowej użytkownika). O ile HTML nadaje stronie strukturę, a CSS wygląd, o tyle JavaScript nadaje jej interaktywność.

Na egzaminie INF.03 JavaScript jest używany przede wszystkim do:

Reagowania na kliknięcia przycisków przez użytkownika.
Pobierania danych wpisanych w formularzach.
Wykonywania obliczeń (np. obliczanie kosztu wesela, spalania paliwa, ceny usługi).
Dynamicznej zmiany treści strony (wyświetlanie wyników bez przeładowywania strony) oraz jej stylów (np. zmiana koloru tła).

Podstawowa składnia

Składnia JS jest podobna do języków takich jak C++ czy Java (które możesz znać z innych zajęć), ale jest bardziej elastyczna.

Wielkość liter ma znaczenie (Case sensitive): Zmienna i zmienna to dwie różne rzeczy.
Średniki (;): Dobrą praktyką jest kończenie każdej instrukcji średnikiem (choć JS często wybacza ich brak).
Komentarze: Służą do opisywania kodu.

// To jest komentarz jednolinijkowy
/* To jest komentarz
wielolinijkowy */

Osadzanie w HTML: Kod JS na egzaminie najczęściej umieszcza się w pliku HTML wewnątrz znaczników <script>, lub podłącza z zewnętrznego pliku: <script src="skrypt.js"></script>.

Zmienne i ich charakterystyka

Zmienne to „pudełka” do przechowywania danych. W nowoczesnym JS (i na egzaminie) używamy głównie trzech słów kluczowych do ich deklaracji:

let – Używamy, gdy wiemy, że wartość zmiennej będzie się zmieniać (np. licznik w pętli, wynik obliczeń). Zmienna żyje tylko w bloku kodu { ... }, w którym została stworzona.
const – Od słowa constant (stała). Używamy, gdy przypisujemy wartość raz i nie chcemy, aby uległa zmianie (np. stawka VAT, pobrany element ze strony). To najbezpieczniejszy wybór.
var – Przestarzały sposób deklaracji. Zmienne var mają zasięg globalny lub funkcyjny. Lepiej unikać, ale warto znać, bo może pojawić się w starych arkuszach.

Przykład:

const cenaPodstawowa = 100; // Tego nie zmienimy
let iloscSztuk = 2; // To możemy zmienić
iloscSztuk = 5; // Zmiana wartości
// cenaPodstawowa = 150; // BŁĄD! Nie można zmienić stałej

Instrukcje warunkowe

Pozwalają programowi podejmować decyzje na podstawie określonych warunków.

Instrukcja if...else

let wiek = 18;

if (wiek >= 18) {
console.log(„Jesteś pełnoletni.”);
} else if (wiek == 17) {
console.log(„Prawie pełnoletni.”);
} else {
console.log(„Jesteś niepełnoletni.”);
}

Instrukcja switch (często używana na egzaminie przy listach rozwijanych)

let opcja = 2;

switch(opcja) {
case 1:
console.log(„Wybrano opcję 1”);
break;
case 2:
console.log(„Wybrano opcję 2”);
break;
default:
console.log(„Nieznana opcja”);
}

Pętle

Pętle służą do wielokrotnego wykonywania tego samego fragmentu kodu.

Pętla for (najbardziej przydatna)

Składa się z trzech części: zmienna startowa; warunek działania; krok.

for (let i = 0; i < 5; i++) {
console.log(„To jest przebieg nr: ” + i);
}

Zapis ten to instrukcja, która tłumaczy przeglądarce, od czego zacząć, kiedy skończyć i co robić po każdym kroku.

Rozłóżmy to na trzy części, oddzielone średnikami

let i = 0; (Inicjalizacja / Start): Tworzymy zmienną pomocniczą (tzw. licznik lub iterator) o nazwie i i ustalamy jej wartość początkową na 0. W programowaniu zazwyczaj zaczynamy liczyć od zera, m.in. dlatego, że tablice są indeksowane od zera.
i < 5; (Warunek / Kiedy skończyć): Jest to test sprawdzany przed każdym wykonaniem pętli. Pętla będzie działać tak długo, dopóki zmienna i jest ostro mniejsza od 5. Gdy i osiągnie wartość 5, warunek przestanie być prawdziwy i pętla natychmiast się zakończy.
i++ (Krok / Inkrementacja): Co ma się stać po wykonaniu każdego obiegu pętli? Zapis i++ to skrót od i = i + 1. Oznacza po prostu: „zwiększ wartość zmiennej i o dokładnie jeden”.

Podsumowując działanie tego zapisu: Pętla wykona się dla i równego: 0, 1, 2, 3 oraz 4. Wykona się zatem dokładnie 5 razy.

Tablice (Arrays)

Tablica to specjalna zmienna, która może przechowywać wiele wartości jednocześnie. Elementy są indeksowane (numerowane) od zera.

// Tworzenie tablicy
let kolory = [„czerwony”, „zielony”, „niebieski”];

// Dostęp do elementów
console.log(kolory[0]); // Wyświetli: „czerwony”
console.log(kolory[2]); // Wyświetli: „niebieski”

// Sprawdzanie długości tablicy
console.log(kolory.length); // Wyświetli: 3

// Dodawanie elementu na koniec
kolory.push(„żółty”);

Operatory matematyczne (arytmetyczne)

Służą do wykonywania obliczeń na liczbach (i zmiennych liczbowych).

Operator	Nazwa	Opis i przykład działania
`+`	Dodawanie	`2 + 3` da wynik `5`. Służy też do łączenia tekstów!
`-`	Odejmowanie	`5 - 2` da wynik `3`.
`*`	Mnożenie	`3 * 4` da wynik `12`.
`/`	Dzielenie	`10 / 2` da wynik `5`.
`%`	Modulo (Reszta z dzielenia)	`10 % 3` da wynik `1` (bo w 10 mieszczą się trzy 3, i zostaje 1 reszty). Często używane do sprawdzania, czy liczba jest parzysta.
`++`	Inkrementacja	Zwiększa wartość o 1. `let a = 5; a++;` sprawi, że `a` wynosi `6`.
`--`	Dekrementacja	Zmniejsza wartość o 1. `let a = 5; a--;` sprawi, że `a` wynosi `4`.

Operatory porównania (relacyjne)

Służą do porównywania dwóch wartości. Zawsze zwracają wartość logiczną: true (prawda) lub false (fałsz). To na nich opierają się instrukcje warunkowe.

Operator	Nazwa	Opis i przykład działania
`==`	Równe	Sprawdza, czy wartości są równe (np. `5 == "5"` to `true`, bo JS ignoruje tu typ danych).
`===`	Identyczne (Ściśle równe)	Sprawdza wartość oraz typ danych. (`5 === "5"` to `false`, bo jedno to liczba, drugie tekst). Używaj tego na egzaminie!
`!=`	Różne	Sprawdza, czy wartości są różne.
`!==`	Ściśle różne	Sprawdza, czy wartości lub typy się różnią.
`>`	Większe niż	`5 > 3` zwraca `true`.
`<`	Mniejsze niż	`3 < 5` zwraca `true`.
`>=`	Większe lub równe	`5 >= 5` zwraca `true`.
`<=`	Mniejsze lub równe	`3 <= 5` zwraca `true`.

Operatory logiczne

Pozwalają łączyć kilka warunków w jeden większy.

Operator	Nazwa	Opis i przykład działania
`&&`	AND (I)	Zwraca `true` tylko gdy oba warunki są prawdziwe. Np. `(wiek >= 18 && maBilet == true)`.
`\|\|`	OR (LUB)	Zwraca `true` gdy przynajmniej jeden warunek jest prawdziwy. Np. `(dzien == "Sobota" \|\| dzien == "Niedziela")`.
`!`	NOT (NIE)	Odwraca wartość logiczną. Jeśli coś jest `true`, zmienia to na `false`. Np. `!(5 > 3)` zwróci `false`.

Kontakt: mgzsp22@gmail.com