Opis: Zostaną omówione sposoby osadzania JavaScript w HTML, deklaracja zmiennych (let, const, var), podstawowe typy danych (string, number, boolean, array, object) oraz operatory arytmetyczne i logiczne.
Aby strona internetowa była dynamiczna i interaktywna, w dokumencie HTML można osadzić kod JavaScript na dwa podstawowe sposoby:
<script>Kod JavaScript można umieścić wewnątrz pliku HTML, najczęściej w sekcji <head> lub tuż przed zamknięciem znacznika </body>.
Przykład:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład osadzania JS</title>
<script>
function przywitaj() {
alert("Witaj na mojej stronie!");
}
</script>
</head>
<body>
<button onclick="przywitaj()">Kliknij mnie</button>
</body>
</html>W tym przykładzie funkcja przywitaj() została zdefiniowana w sekcji <script> i wywoływana jest po kliknięciu przycisku.
Lepszą praktyką jest umieszczanie kodu w osobnym pliku .js, co pozwala na większą czytelność i ponowne wykorzystanie kodu.
Plik HTML (index.html):
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład z plikiem zewnętrznym</title>
<script src="script.js" defer></script>
</head>
<body>
<button onclick="przywitaj()">Kliknij mnie</button>
</body>
</html>Plik JavaScript (script.js):
function przywitaj() {
alert("Cześć! To kod z pliku zewnętrznego.");
}Tutaj kod znajduje się w osobnym pliku script.js, a w HTML został dołączony za pomocą atrybutu src. Użycie defer sprawia, że skrypt zostanie załadowany po wczytaniu całej struktury HTML.
Atrybuty defer lub async kontrolują, kiedy przeglądarka ładuje i wykonuje zewnętrzne skrypty JavaScript:
defer - skrypt jest pobierany w tle i wykonywany dopiero po wczytaniu całego HTML, zachowując kolejność skryptów.
async - skrypt jest pobierany w tle i wykonywany natychmiast po pobraniu, niezależnie od kolejności i wczytywania HTML.
Krótko: defer = czekaj na HTML, async = wykonaj od razu.
Podsumowanie:
<script> pozwala na szybkie osadzenie kodu w pliku HTML – dobre dla małych fragmentów.
Plik zewnętrzny .js to lepsze rozwiązanie przy większych projektach – poprawia organizację kodu i jego wielokrotne wykorzystanie.
Zmienne w JavaScript służą do przechowywania danych, które mogą być później używane lub modyfikowane. Wyróżniamy trzy podstawowe sposoby ich deklaracji:
Pozwala tworzyć zmienne, których wartość można zmieniać.
Ma zasięg blokowy (tylko wewnątrz { ... }, w którym została zadeklarowana).
Przykład:
let wiek = 25;
wiek = 26; // zmienna zmieniona
console.log(wiek); // 26Tworzy zmienną stałą, której wartość nie może być zmieniona po przypisaniu.
Ma również zasięg blokowy.
Przykład:
const imie = "Jan";
console.log(imie); // Jan
// imie = "Adam"; <-- spowoduje błądW przypadku obiektów {} i tablic [], zmienna const blokuje tylko zmianę referencji, czyli nie możesz przypisać jej innego obiektu/tablicy.
Ale możesz zmieniać zawartość obiektu/tablicy - dodawać, usuwać lub zmieniać właściwości / elementy.
const lista = [1, 2, 3];
// Możemy zmienić element:
lista[0] = 10; // działa
// Możemy dodać element:
lista.push(4); // działa
// Ale nie możemy przypisać nowej tablicy:
lista = [5,6,7]; // Błąd!Starszy sposób deklarowania zmiennych.
Ma zasięg funkcji, a nie blokowy, co czasami prowadzi do nieoczekiwanych efektów.
Dzisiaj rzadziej stosowany, częściej używa się let i const.
Przykład:
var miasto = "Warszawa";
miasto = "Kraków";
console.log(miasto); // KrakówPodsumowanie:
let - zmienna zmienna, zasięg blokowy.
const - stała, zasięg blokowy.
var - zmienna zmienna, zasięg funkcji, starsza konstrukcja.
Różnica w zasięgu blokowym zmiennych:
function testZasiagu() {
if (true) {
var zmiennaVar = "var"; // zasięg funkcji
let zmiennaLet = "let"; // zasięg bloku
const zmiennaConst = "const"; // zasięg bloku
}
console.log(zmiennaVar); // działa, bo var ma zasięg funkcji
// console.log(zmiennaLet); <-- błąd, let ma zasięg blokowy
// console.log(zmiennaConst); <-- błąd, const ma zasięg blokowy
}
testZasiagu();Różnica w zasięgu zmiennych w pętli:
for (var i = 0; i < 3; i++) {
// var ma zasięg funkcji, więc i będzie dostępne po pętli
}
console.log(i); // 3
for (let j = 0; j < 3; j++) {
// let ma zasięg bloku, więc j nie jest dostępne poza pętlą
}
// console.log(j); // błąd
for (const k = 0; k < 3; k++) {
// const musi być niezmienne, więc nie da się go użyć w typowej pętli
// każdy krok pętli wymagałby ponownego przypisania – powoduje błąd
}JavaScript obsługuje kilka podstawowych typów danych, które pozwalają przechowywać różne informacje. Poniżej omówione są najczęściej używane:
Reprezentuje ciągi znaków, np. słowa lub zdania. Można używać pojedynczych '...' lub podwójnych "..." cudzysłowów.
Przykład:
let imie = "Jan";
let powitanie = 'Witaj, ' + imie + '!';
console.log(powitanie); // Witaj, Jan!Reprezentuje liczby całkowite i zmiennoprzecinkowe.
Przykład:
let wiek = 25;
let temperatura = 36.6;
let suma = wiek + temperatura;
console.log(suma); // 61.6Przyjmuje tylko dwie wartości: true (prawda) lub false (fałsz). Stosowany w warunkach i porównaniach.
Przykład:
let czyPelnoletni = true;
let czyDzisPada = false;
console.log(czyPelnoletni && czyDzisPada); // falseTablice pozwalają przechowywać wiele wartości w jednej zmiennej. Elementy mają indeksy zaczynające się od 0.
Przykład:
let owoce = ["jabłko", "banan", "gruszka"];
console.log(owoce[0]); // jabłko
owoce.push("pomarańcza"); // dodanie nowego elementu
console.log(owoce); // ["jabłko", "banan", "gruszka", "pomarańcza"]Obiekty przechowują dane w formie par klucz-wartość. Pozwalają grupować powiązane informacje.
Przykład:
let osoba = {
imie: "Anna",
wiek: 30,
czyPelnoletnia: true
};
console.log(osoba.imie); // Anna
console.log(osoba["wiek"]); // 30string - teksty
number - liczby
boolean - prawda/fałsz
array - listy wartości
object - grupowanie powiązanych danych
Operatory pozwalają wykonywać działania na danych, np. obliczenia matematyczne czy sprawdzanie warunków.
Służą do wykonywania podstawowych działań matematycznych.
Operator | Znaczenie | Przykład |
|---|---|---|
+ | dodawanie / łączenie tekstu |
|
- | odejmowanie |
|
* | mniżenie |
|
/ | dzielenie |
|
% | reszta z dzielenia (modulo) |
|
** | potęgowanie |
|
Przykład zastosowania:
let a = 10;
let b = 3;
console.log(a + b); // 13
console.log(a % b); // 1
console.log(a ** b); // 1000Pozwalają sprawdzać warunki i łączyć je. Wynik zawsze jest typu boolean (true lub false).
Operator | Znaczenie | Przykład |
|---|---|---|
&& | AND (i) - prawda, jeśli oba warunki są prawdziwe |
|
|| | OR (lub) - prawda, jeśli chociaż jeden warunek jest prawdziwy |
|
! | NOT (nie) – zmienia wartość logiczną na przeciwną |
|
Przykład zastosowania:
let wiek = 20;
let maPrawoJazdy = true;
if (wiek >= 18 && maPrawoJazdy) {
console.log("Możesz prowadzić samochód");
} else {
console.log("Nie spełniasz warunków");
}JavaScript udostępnia proste funkcje do komunikacji z użytkownikiem poprzez wyskakujące okienka. Oprócz tego w kodzie można stosować komentarze, aby go opisywać i ułatwiać czytanie.
Służy do wyświetlania prostego komunikatu. Użytkownik musi kliknąć „OK”, aby zamknąć okienko.
Przykład:
alert("Witaj na stronie!");Wynik: wyskakuje okienko z napisem Witaj na stronie!
Wyświetla okienko z polem tekstowym, w którym użytkownik może wpisać dane. Zwraca wartość w postaci stringa (tekstu).
Przykład:
let imie = prompt("Jak masz na imię?");
alert("Witaj, " + imie + "!");Wynik: użytkownik wpisuje imię, np. Jan, a potem zobaczy komunikat: Witaj, Jan!
Wyświetla okienko z komunikatem oraz przyciskami „OK” i „Anuluj”. Zwraca true (OK) lub false (Anuluj).
Przykład:
let zgoda = confirm("Czy na pewno chcesz usunąć plik?");
if (zgoda) {
alert("Plik został usunięty.");
} else {
alert("Operacja przerwana.");
}Wynik: użytkownik wybiera odpowiedź i program wykonuje odpowiednią akcję.
Komentarze nie są wykonywane przez program – służą tylko do opisywania kodu.
Komentarz jednoliniowy zaczyna się od //.
// To jest komentarz jednoliniowy
let a = 5; // komentarz może być też na końcu liniiKomentarz wieloliniowy zaczyna się od /* i kończy */.
/*
To jest komentarz
wieloliniowy
*/
let b = 10;Napisz stronę, która po kliknięciu przycisku wyświetli komunikat „Witaj w JavaScript!”.
Utwórz plik HTML i wstaw w nim przycisk.
Osadź kod JavaScript wewnątrz znacznika <script> i napisz funkcję przywitaj(), która wyświetli komunikat za pomocą alert().
Połącz przycisk z funkcją, aby uruchamiała się po kliknięciu.
Wynik działania programu:
Po kliknięciu przycisku pojawia się okienko z napisem:
Witaj w JavaScript!Napisz program, który pokaże różnice w użyciu zmiennych let, const i var.
Utwórz trzy zmienne: let liczba = 10;, const pi = 3.14;, var miasto = "Warszawa";.
Spróbuj zmienić wartości każdej z nich i wypisz w konsoli wyniki.
Zauważ, że tylko const nie pozwala na ponowne przypisanie wartości.
Wynik działania programu (w konsoli):
Nowa liczba: 15
Nowa wartość pi: (błąd – nie można zmienić stałej)
Nowe miasto: KrakówNapisz program, który zademonstruje użycie różnych typów danych w JavaScript.
Utwórz zmienne: string (np. imię), number (wiek), boolean (czy pełnoletni), array (lista ulubionych kolorów), object (dane osoby: imię, wiek, miasto).
Wyświetl wszystkie wartości w konsoli.
Następnie wyświetl trzeci element tablicy i jedną wartość z obiektu.
Wynik działania programu (w konsoli):
Imię: Jan
Wiek: 25
Pełnoletni: true
Ulubione kolory: ["czerwony", "zielony", "niebieski"]
Trzeci kolor: niebieski
Dane osoby: {imie: "Jan", wiek: 25, miasto: "Kraków"}
Miasto osoby: KrakówNapisz program, który pobierze od użytkownika dwie liczby i wykona na nich działania matematyczne.
Poproś użytkownika o podanie dwóch liczb (np. przez prompt()).
Oblicz sumę, różnicę, iloczyn i iloraz tych liczb.
Wyświetl wyniki na ekranie.
Wynik działania programu (dla liczb 10 i 5):
Suma: 15
Różnica: 5
Iloczyn: 50
Iloraz: 2Napisz program, który sprawdzi, czy użytkownik może głosować w wyborach.
Poproś użytkownika o podanie swojego wieku.
Utwórz zmienną czyObywatel = true.
Użyj operatora logicznego &&, aby sprawdzić, czy użytkownik ma co najmniej 18 lat i jest obywatelem.
Wyświetl odpowiedni komunikat.
Wynik działania programu (dla wieku 20):
Masz prawo do głosowania.