Ćwiczenia JavaScript – Grupy

Zestaw ćwiczeń od podstaw do średniego poziomu: zmienne, funkcje, tablice, obiekty, okna dialogowe, Math i wiele więcej – idealne do nauki w szkole lub samodzielnie.

Odkryte rozwiązania: 0/72 XP: 0
🎯 Cel: ogarnąć podstawy JS z przykładami 💡 Najpierw spróbuj sam, dopiero potem „Pokaż rozwiązanie”

1. Dołączenie skryptu JS do dokumentu HTML

Temat: struktura HTML + JS

Dowiesz się, jak prawidłowo podpiąć plik JavaScript do strony i czym różnią się async i defer. To fundament każdej aplikacji webowej.

1: Dołączenie zewnętrznego pliku JS

Dołącz plik JavaScript do dokumentu HTML w taki sposób, aby funkcje w JS mogły być wywoływane z HTML.

<script src="script.js"></script>

2: Dołączenie wewnętrznego skryptu JS

Dodaj skrypt JS bezpośrednio w dokumencie HTML w tagu <script> na końcu dokumentu.

<script>
    console.log("Skrypt działa!");
</script>

3: Ładowanie skryptu w sekcji <head>

Dodaj skrypt JS w sekcji <head> i upewnij się, że działa on przed zawartością strony.

<head>
    <script src="headScript.js"></script>
</head>

4: Asynchroniczne ładowanie skryptu

Wstaw skrypt JS z atrybutem async i wyjaśnij, dlaczego jest używany.

<script src="script.js" async></script>

5: Ładowanie skryptu po załadowaniu strony

Dodaj skrypt, który będzie ładowany po załadowaniu całej strony, używając atrybutu defer.

<script src="script.js" defer></script>

2. Zmienne. Deklarowanie zmiennych. Stałe

Temat: zmienne i const

Poznasz różnicę między let i const, zakres zmiennych i typowe błędy przy próbie zmiany stałej.

1: Deklarowanie zmiennych z let

Zadeklaruj zmienną za pomocą let i przypisz jej wartość, a następnie wyświetl ją w konsoli.

let a = 5;
console.log(a);

2: Deklarowanie zmiennej z const

Zadeklaruj stałą PI o wartości 3.14 i wyświetl ją w konsoli.

const PI = 3.14;
console.log(PI);

3: Przypisywanie nowych wartości do zmiennych

Użyj zmiennej zadeklarowanej za pomocą let, aby przypisać nową wartość, a następnie wyświetl ją w konsoli.

let a = 10;
a = 20;
console.log(a);

4: Błąd przy próbie zmiany stałej

Spróbuj zmienić wartość stałej zadeklarowanej za pomocą const i wyświetl błąd w konsoli.

const PI = 3.14;
PI = 3.14159;  // Błąd: Assignment to constant variable.

5: Tworzenie zmiennych w różnych blokach

Użyj zmiennej w bloku kodu i sprawdź jej zakres.

if (true) {
    let a = 10;
    console.log(a);
}
console.log(a);  // Błąd: a is not defined

3. Uchwycenie elementu HTML w JavaScript

Ćwiczenie 1: Pobranie elementu po ID

Pobierz element HTML o identyfikatorze header i zmień jego tekst.

Ćwiczenie 2: Pobranie elementu po klasie

Pobierz pierwszy element HTML z klasą item i zmień jego styl.

4. Wyprowadzenie zmiennej na ekran

Temat: manipulacja DOM

Uczysz się, jak przenieść dane z kodu na stronę: zmiana tekstu, dodawanie elementów, ukrywanie/pokazywanie.

1: Wyświetlanie zmiennej w div

Użyj JavaScriptu, aby wyświetlić wartość zmiennej w elemencie div.

let message = 'Hello, world!';
document.getElementById('output').textContent = message;

2: Dynamiczna zmiana zawartości strony

Użyj JavaScriptu, aby zmienić zawartość h1 na stronie po kliknięciu przycisku.

document.getElementById('changeHeader').onclick = function() {
    document.getElementById('header').textContent = 'Nowy nagłówek';
};

3: Używanie innerHTML

Użyj innerHTML, aby dodać HTML do elementu na stronie.

document.getElementById('output').innerHTML = '<strong>Bold Text</strong>';

4: Dynamiczne tworzenie elementu

Stwórz element p i dodaj go do strony.

let p = document.createElement('p');
p.textContent = 'Nowo dodany element!';
document.body.appendChild(p);

5: Ukrywanie i pokazywanie elementu

Użyj JavaScriptu, aby ukryć lub pokazać element na stronie po kliknięciu przycisku.

document.getElementById('toggleBtn').onclick = function() {
    let elem = document.getElementById('toggleElem');
    elem.style.display = (elem.style.display === 'none') ? 'block' : 'none';
};

5. Podstawowe operatory w JavaScript

Temat: operatory

Nauczysz się używać operatorów arytmetycznych, porównań, logicznych oraz operatora warunkowego. [file:112]

1: Dodawanie liczb

Zadeklaruj dwie zmienne z liczbami i oblicz ich sumę.

let a = 5;
let b = 10;
console.log(a + b);

2: Zwiększanie wartości zmiennej

Użyj operatora inkrementacji do zwiększenia wartości zmiennej.

let x = 5;
x++;
console.log(x);

3: Operator porównania

Użyj operatora porównania == do sprawdzenia, czy dwie zmienne są równe.

let a = 5;
let b = 5;
console.log(a == b); // true

4: Operator logiczny &&

Sprawdź, czy dwie zmienne są jednocześnie większe niż 5.

let a = 6;
let b = 8;
console.log(a > 5 && b > 5); // true

5: Operator warunkowy ?

Użyj operatora warunkowego do przypisania wartości w zależności od warunku.

let age = 18;
let isAdult = (age >= 18) ? 'Tak' : 'Nie';
console.log(isAdult);

6. Okna dialogowe: alert, prompt, confirm

Ćwiczenie 1: Użycie alert()

Wyświetl okno alertu z wiadomością "Witaj w JavaScript!"

Ćwiczenie 2: Użycie prompt()

Użyj funkcji prompt() do zapytania użytkownika o jego imię i wyświetl odpowiedź w konsoli.

Ćwiczenie 3: Użycie confirm()

Zapytaj użytkownika, czy chce kontynuować, i wyświetl wynik w konsoli.

Ćwiczenie 4: Sprawdzenie odpowiedzi użytkownika w prompt()

Zapytaj użytkownika o jego wiek i sprawdź, czy jest pełnoletni.

Ćwiczenie 5: Użycie prompt() i confirm() razem

Najpierw zapytaj użytkownika o jego wiek za pomocą prompt(), a potem zapytaj, czy chce kontynuować, używając confirm().

7. Funkcje w JavaScript

Ćwiczenie 1: Prosta funkcja

Stwórz funkcję, która przyjmuje dwie liczby jako argumenty i zwraca ich sumę.

Ćwiczenie 2: Funkcja z domyślnymi wartościami

Stwórz funkcję, która przyjmuje dwa parametry, ale ustawia domyślną wartość dla drugiego parametru, jeśli nie zostanie on przekazany.

Ćwiczenie 3: Funkcja zwracająca wartość

Stwórz funkcję, która przyjmuje liczbę jako argument i zwraca jej kwadrat.

Ćwiczenie 4: Funkcja z wieloma parametrami

Stwórz funkcję, która przyjmuje trzy liczby i zwraca średnią arytmetyczną tych liczb.

Ćwiczenie 5: Funkcja z funkcją anonimową

Stwórz funkcję, która jako argument przyjmuje funkcję anonimową i wykonuje ją.

8. Tablice w JavaScript

Ćwiczenie 1: Tworzenie tablicy

Stwórz tablicę zawierającą trzy liczby i wyświetl je w konsoli.

Ćwiczenie 2: Dodawanie elementu do tablicy

Dodaj nowy element do tablicy na końcu.

Ćwiczenie 3: Usuwanie elementu z tablicy

Usuń ostatni element tablicy za pomocą funkcji pop().

Ćwiczenie 4: Iteracja po tablicy

Użyj pętli for, aby przejść przez wszystkie elementy tablicy i wyświetlić je w konsoli.

Ćwiczenie 5: Sprawdzanie, czy element istnieje w tablicy

Sprawdź, czy liczba 3 istnieje w tablicy za pomocą metody includes().

9. Obiekty w JavaScript

Ćwiczenie 1: Tworzenie obiektu

Stwórz obiekt reprezentujący osobę, który zawiera jej imię, wiek i zawód.

Ćwiczenie 2: Dostęp do właściwości obiektu

Wyświetl imię osoby z obiektu w konsoli.

Ćwiczenie 3: Dodawanie nowej właściwości do obiektu

Dodaj właściwość city do obiektu osoby i wyświetl ją w konsoli.

Ćwiczenie 4: Usuwanie właściwości obiektu

Usuń właściwość age z obiektu i wyświetl obiekt w konsoli.

Ćwiczenie 5: Funkcja w obiekcie

Stwórz obiekt z funkcją, która zwraca powitanie z imieniem osoby.

10. Parsowanie liczb w JavaScript

Ćwiczenie 1: Parsowanie liczby z ciągu tekstowego

Użyj funkcji parseInt(), aby przekształcić ciąg tekstowy '123' na liczbę.

Ćwiczenie 2: Parsowanie liczby zmiennoprzecinkowej

Użyj funkcji parseFloat(), aby przekształcić ciąg tekstowy '12.34' na liczbę zmiennoprzecinkową.

Ćwiczenie 3: Sprawdzanie poprawności liczby

Sprawdź, czy ciąg tekstowy 'abc' jest liczbą za pomocą funkcji isNaN().

Ćwiczenie 4: Parsowanie liczby z różnych formatów

Spróbuj przekonwertować różne ciągi, np. '000123', '12abc', na liczby za pomocą parseInt() i parseFloat().

Ćwiczenie 5: Zastosowanie funkcji Number()

Spróbuj przekształcić ciąg '123.45' na liczbę za pomocą funkcji Number().

11. Instrukcja wyboru switch

Ćwiczenie 1: Prosta instrukcja switch

Użyj instrukcji switch do sprawdzenia wartości zmiennej i wyświetlenia odpowiedniej wiadomości.

Ćwiczenie 2: Użycie switch z wieloma przypadkami

Użyj instrukcji switch do obsługi dni tygodnia (1-7) i wyświetlenia odpowiednich nazw dni.

Ćwiczenie 3: Instrukcja switch z rzutowaniem

Użyj instrukcji switch i rzutuj zmienną na liczbę, aby wyświetlić wynik.

Ćwiczenie 4: Zastosowanie switch z ciągami

Użyj instrukcji switch do sprawdzenia wartości ciągu tekstowego i wykonania odpowiednich działań.

Ćwiczenie 5: Switch z wieloma przypadkami

Użyj instrukcji switch, aby obsłużyć przypadki, w których liczba ma wartość 1-3, 4-6, 7-9.

12. Obiekt Math

Ćwiczenie 1: Obliczanie pierwiastka kwadratowego

Użyj metody Math.sqrt(), aby obliczyć pierwiastek kwadratowy z liczby 16.

Ćwiczenie 2: Zaokrąglanie liczby

Użyj metody Math.round(), aby zaokrąglić liczbę 7.5.

Ćwiczenie 3: Losowanie liczby

Użyj funkcji Math.random(), aby wylosować liczbę całkowitą w przedziale od 1 do 10.

Ćwiczenie 4: Obliczanie wartości bezwzględnej

Użyj metody Math.abs(), aby obliczyć wartość bezwzględną z liczby -5.

Ćwiczenie 5: Obliczanie największej liczby

Użyj metody Math.max(), aby znaleźć największą liczbę z 3, 5, 7, 2, 8.

13. Tablice w JavaScript

Ćwiczenie 1: Tworzenie tablicy

Stwórz tablicę zawierającą trzy liczby i wyświetl je w konsoli.

Ćwiczenie 2: Dodawanie elementów do tablicy

Dodaj nowy element do tablicy za pomocą metody push() i wyświetl tablicę.

Ćwiczenie 3: Usuwanie elementów z tablicy

Użyj metody pop() do usunięcia ostatniego elementu z tablicy.

Ćwiczenie 4: Iterowanie po tablicy

Użyj pętli for do iterowania po tablicy i wypisania jej elementów.

Ćwiczenie 5: Sprawdzanie długości tablicy

Sprawdź długość tablicy za pomocą właściwości length.

14. Funkcje w JavaScript

Ćwiczenie 1: Tworzenie funkcji

Stwórz funkcję, która przyjmuje dwie liczby jako argumenty i zwraca ich sumę.

Ćwiczenie 2: Funkcja bez argumentów

Stwórz funkcję, która zwraca stałą wartość 42.

Ćwiczenie 3: Funkcja z wartościami domyślnymi

Stwórz funkcję, która przyjmuje dwa argumenty, z których jeden ma wartość domyślną 5.

Ćwiczenie 4: Funkcja zwracająca inną funkcję

Stwórz funkcję, która zwraca inną funkcję, która zwraca wynik mnożenia dwóch liczb.

Ćwiczenie 5: Funkcja rekurencyjna

Stwórz funkcję rekurencyjną, która oblicza silnię z liczby n.

15. Praca z obiektami

Ćwiczenie 1: Tworzenie obiektu

Stwórz obiekt person z właściwościami name i age.

Ćwiczenie 2: Dostęp do właściwości obiektu

Uzyskaj dostęp do właściwości name obiektu person i wyświetl ją w konsoli.

Ćwiczenie 3: Dodawanie właściwości do obiektu

Dodaj nową właściwość address do obiektu person.

Ćwiczenie 4: Usuwanie właściwości obiektu

Usuń właściwość age z obiektu person.

Ćwiczenie 5: Praca z metodami obiektów

Dodaj metodę greet do obiektu person, która wyświetla powitanie z jego imieniem.

Test wiedzy – 20 pytań

Test obejmuje wszystkie omawiane tematy z grup 1–15. Użyj go jako podsumowanie modułu lub sprawdzian dla siebie/klasy.

Materiały dodatkowe do pobrania (np. wersja offline, obudowa dydaktyczna):

📦 Paczka z plikami (odcinek.zip) | 📄 Obudowa dydaktyczna (PDF)