Ćwiczenia - JavaScript

1. Dołączenie skryptu JS do dokumentu HTML

Ćwiczenie 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>

Ćwiczenie 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>

Ćwiczenie 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>

Ćwiczenie 4: Asynchroniczne ładowanie skryptu

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

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

Ćwiczenie 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

Ćwiczenie 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);

Ćwiczenie 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);

Ćwiczenie 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);

Ćwiczenie 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.

Ćwiczenie 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.

let header = document.getElementById('header');
header.textContent = 'Nowy tekst nagłówka';

Ćwiczenie 2: Pobranie elementu po klasie

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

let item = document.querySelector('.item');
item.style.color = 'blue';

4. Wyprowadzenie zmiennej na ekran

Ćwiczenie 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;

Ćwiczenie 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';
};

Ćwiczenie 3: Używanie `innerHTML`

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

document.getElementById('output').innerHTML = 'Bold Text';

Ćwiczenie 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);

Ćwiczenie 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

Ćwiczenie 1: Dodawanie liczb

Zadeklaruj dwie zmienne z liczbami i oblicz ich sumę, a wynik wyświetl w konsoli.

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

Ćwiczenie 2: Zwiększanie wartości zmiennej

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

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

Ćwiczenie 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

Ćwiczenie 4: Operator logiczny `&&`

Użyj operatora logicznego && do sprawdzenia, czy dwie zmienne są jednocześnie większe niż 5.

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

Ćwiczenie 5: Operator warunkowy `?`

Użyj operatora warunkowego ? do przypisania wartości do zmiennej 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!"

alert('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.

let name = prompt('Jak masz na imię?');
console.log('Witaj, ' + name);

Ćwiczenie 3: Użycie `confirm()`

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

let isContinue = confirm('Czy chcesz kontynuować?');
console.log(isContinue);

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

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

let age = prompt('Ile masz lat?');
if (age >= 18) {
    alert('Jesteś pełnoletni!');
} else {
    alert('Jesteś niepeł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().

let age = prompt('Ile masz lat?');
if (age >= 18) {
    let isContinue = confirm('Chcesz kontynuować?');
    console.log(isContinue);
} else {
    alert('Za młody, aby kontynuować!');
}

7. Funkcje w JavaScript

Ćwiczenie 1: Prosta funkcja

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

function sum(a, b) {
    return a + b;
}
console.log(sum(3, 4));

Ć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.

function greet(name, greeting = 'Witaj') {
    console.log(greeting + ', ' + name);
}
greet('Ania');

Ćwiczenie 3: Funkcja zwracająca wartość

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

function square(x) {
    return x * x;
}
console.log(square(5));

Ćwiczenie 4: Funkcja z wieloma parametrami

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

function average(a, b, c) {
    return (a + b + c) / 3;
}
console.log(average(3, 4, 5));

Ćwiczenie 5: Funkcja z funkcją anonimową

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

function execute(func) {
    func();
}
execute(function() {
    console.log('Funkcja anonimowa została wywołana!');
});

8. Tablice w JavaScript

Ćwiczenie 1: Tworzenie tablicy

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

let numbers = [1, 2, 3];
console.log(numbers);

Ćwiczenie 2: Dodawanie elementu do tablicy

Dodaj nowy element do tablicy na końcu.

let numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers);

Ćwiczenie 3: Usuwanie elementu z tablicy

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

let numbers = [1, 2, 3, 4];
numbers.pop();
console.log(numbers);

Ćwiczenie 4: Iteracja po tablicy

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

let numbers = [1, 2, 3, 4];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

Ćwiczenie 5: Sprawdzanie, czy element istnieje w tablicy

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

let numbers = [1, 2, 3, 4];
console.log(numbers.includes(3)); // true

9. Obiekty w JavaScript

Ćwiczenie 1: Tworzenie obiektu

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

let person = {
    name: 'Jan',
    age: 30,
    job: 'Programista'
};
console.log(person);

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

Wyświetl imię osoby z obiektu w konsoli.

let person = {
    name: 'Jan',
    age: 30,
    job: 'Programista'
};
console.log(person.name);

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

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

let person = {
    name: 'Jan',
    age: 30,
    job: 'Programista'
};
person.city = 'Warszawa';
console.log(person.city);

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

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

let person = {
    name: 'Jan',
    age: 30,
    job: 'Programista'
};
delete person.age;
console.log(person);

Ćwiczenie 5: Funkcja w obiekcie

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

let person = {
    name: 'Jan',
    greet: function() {
        console.log('Witaj, ' + this.name);
    }
};
person.greet();

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ę.

let str = '123';
let num = parseInt(str);
console.log(num);

Ćwiczenie 2: Parsowanie liczby zmiennoprzecinkowej

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

let str = '12.34';
let num = parseFloat(str);
console.log(num);

Ćwiczenie 3: Sprawdzanie poprawności liczby

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

let str = 'abc';
console.log(isNaN(str)); // true

Ć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().

let str1 = '000123';
let str2 = '12abc';
console.log(parseInt(str1)); // 123
console.log(parseInt(str2)); // 12

Ćwiczenie 5: Zastosowanie funkcji `Number()`

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

let str = '123.45';
let num = Number(str);
console.log(num);

11. Instrukcja wyboru switch

Ćwiczenie 1: Prosta instrukcja switch

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

let day = 3;
switch(day) {
    case 1:
        console.log('Poniedziałek');
        break;
    case 2:
        console.log('Wtorek');
        break;
    default:
        console.log('Inny dzień');
}

Ć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.

let day = 5;
switch(day) {
    case 1:
        console.log('Poniedziałek');
        break;
    case 2:
        console.log('Wtorek');
        break;
    case 3:
        console.log('Środa');
        break;
    case 4:
        console.log('Czwartek');
        break;
    case 5:
        console.log('Piątek');
        break;
    case 6:
        console.log('Sobota');
        break;
    case 7:
        console.log('Niedziela');
        break;
    default:
        console.log('Nieprawidłowy dzień');
}

Ćwiczenie 3: Instrukcja switch z rzutowaniem

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

let input = '3';
switch(Number(input)) {
    case 1:
        console.log('Jeden');
        break;
    case 2:
        console.log('Dwa');
        break;
    case 3:
        console.log('Trzy');
        break;
    default:
        console.log('Inna liczba');
}

Ćwiczenie 4: Zastosowanie switch z ciągami

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

let color = 'czerwony';
switch(color) {
    case 'czerwony':
        console.log('To kolor czerwony');
        break;
    case 'zielony':
        console.log('To kolor zielony');
        break;
    default:
        console.log('Inny kolor');
}

Ć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.

let number = 5;
switch(true) {
    case (number >= 1 && number <= 3):
        console.log('Liczba w przedziale 1-3');
        break;
    case (number >= 4 && number <= 6):
        console.log('Liczba w przedziale 4-6');
        break;
    case (number >= 7 && number <= 9):
        console.log('Liczba w przedziale 7-9');
        break;
    default:
        console.log('Liczba poza zakresem');
}

12. Obiekt Math

Ćwiczenie 1: Obliczanie pierwiastka kwadratowego

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

let num = 16;
console.log(Math.sqrt(num));

Ćwiczenie 2: Zaokrąglanie liczby

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

let num = 7.5;
console.log(Math.round(num));

Ćwiczenie 3: Losowanie liczby

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

let random = Math.floor(Math.random() * 10) + 1;
console.log(random);

Ćwiczenie 4: Obliczanie wartości bezwzględnej

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

let num = -5;
console.log(Math.abs(num));

Ćwiczenie 5: Obliczanie największej liczby

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

console.log(Math.max(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.

let numbers = [1, 2, 3];
console.log(numbers);

Ćwiczenie 2: Dodawanie elementów do tablicy

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

let numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers);

Ćwiczenie 3: Usuwanie elementów z tablicy

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

let numbers = [1, 2, 3];
numbers.pop();
console.log(numbers);

Ćwiczenie 4: Iterowanie po tablicy

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

let numbers = [1, 2, 3];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

Ćwiczenie 5: Sprawdzanie długości tablicy

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

let numbers = [1, 2, 3];
console.log(numbers.length);

14. Funkcje w JavaScript

Ćwiczenie 1: Tworzenie funkcji

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

function sum(a, b) {
    return a + b;
}
console.log(sum(2, 3));

Ćwiczenie 2: Funkcja bez argumentów

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

function getAnswer() {
    return 42;
}
console.log(getAnswer());

Ć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.

function multiply(a, b = 5) {
    return a * b;
}
console.log(multiply(2)); // wynik 10

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

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

function outer() {
    return function(a, b) {
        return a * b;
    };
}
let inner = outer();
console.log(inner(2, 3)); // wynik 6

Ćwiczenie 5: Funkcja rekurencyjna

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

function factorial(n) {
    if (n === 0) {
        return 1;
    }
    return n * factorial(n - 1);
}
console.log(factorial(5)); // wynik 120

15. Praca z obiektami

Ćwiczenie 1: Tworzenie obiektu

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

let person = {
    name: 'Jan',
    age: 30
};
console.log(person);

Ć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.

let person = { name: 'Jan', age: 30 };
console.log(person.name);

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

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

let person = { name: 'Jan', age: 30 };
person.address = 'Warszawa';
console.log(person);

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

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

let person = { name: 'Jan', age: 30 };
delete person.age;
console.log(person);

Ćwiczenie 5: Praca z metodami obiektów

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

let person = { 
    name: 'Jan', 
    age: 30,
    greet: function() {
        console.log('Witaj, ' + this.name);
    }
};
person.greet();

Ćwiczenia JavaScript - Grupy

1. Dołączenie skryptu JS do dokumentu HTML

Ćwiczenie 1: Dołączenie zewnętrznego pliku JS

Ćwiczenie 2: Dołączenie wewnętrznego skryptu JS

Ćwiczenie 3: Ładowanie skryptu w sekcji <head>

Ćwiczenie 4: Asynchroniczne ładowanie skryptu

Ćwiczenie 5: Ładowanie skryptu po załadowaniu strony

2. Zmienne. Deklarowanie zmiennych. Stałe

Ćwiczenie 1: Deklarowanie zmiennych z let

Ćwiczenie 2: Deklarowanie zmiennej z const

Ćwiczenie 3: Przypisywanie nowych wartości do zmiennych

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

Ćwiczenie 5: Tworzenie zmiennych w różnych blokach

3. Uchwycenie elementu HTML w JavaScript

Ćwiczenie 1: Pobranie elementu po ID

Ćwiczenie 2: Pobranie elementu po klasie

4. Wyprowadzenie zmiennej na ekran

Ćwiczenie 1: Wyświetlanie zmiennej w div

Ćwiczenie 2: Dynamiczna zmiana zawartości strony

Ćwiczenie 3: Używanie innerHTML

Ćwiczenie 4: Dynamiczne tworzenie elementu

Ćwiczenie 5: Ukrywanie i pokazywanie elementu

5. Podstawowe operatory w JavaScript

Ćwiczenie 1: Dodawanie liczb

Ćwiczenie 2: Zwiększanie wartości zmiennej

Ćwiczenie 3: Operator porównania

Ćwiczenie 4: Operator logiczny &&

Ćwiczenie 5: Operator warunkowy ?

6. Okna dialogowe: alert, prompt, confirm

Ćwiczenie 1: Użycie alert()

Ćwiczenie 2: Użycie prompt()

Ćwiczenie 3: Użycie confirm()

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

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

7. Funkcje w JavaScript

Ćwiczenie 1: Prosta funkcja

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

Ćwiczenie 3: Funkcja zwracająca wartość

Ćwiczenie 4: Funkcja z wieloma parametrami

Ćwiczenie 5: Funkcja z funkcją anonimową

8. Tablice w JavaScript

Ćwiczenie 1: Tworzenie tablicy

Ćwiczenie 2: Dodawanie elementu do tablicy

Ćwiczenie 3: Usuwanie elementu z tablicy

Ćwiczenie 4: Iteracja po tablicy

Ćwiczenie 5: Sprawdzanie, czy element istnieje w tablicy

9. Obiekty w JavaScript

Ćwiczenie 1: Tworzenie obiektu

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

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

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

Ćwiczenie 5: Funkcja w obiekcie

10. Parsowanie liczb w JavaScript

Ćwiczenie 1: Parsowanie liczby z ciągu tekstowego

Ćwiczenie 2: Parsowanie liczby zmiennoprzecinkowej

Ćwiczenie 3: Sprawdzanie poprawności liczby

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

Ćwiczenie 5: Zastosowanie funkcji Number()

11. Instrukcja wyboru switch

Ćwiczenie 1: Prosta instrukcja switch

Ćwiczenie 2: Użycie switch z wieloma przypadkami

Ćwiczenie 3: Instrukcja switch z rzutowaniem

Ćwiczenie 4: Zastosowanie switch z ciągami

Ćwiczenie 5: Switch z wieloma przypadkami

12. Obiekt Math

Ćwiczenie 1: Obliczanie pierwiastka kwadratowego

Ćwiczenie 2: Zaokrąglanie liczby

Ćwiczenie 3: Losowanie liczby

Ćwiczenie 4: Obliczanie wartości bezwzględnej

Ćwiczenie 5: Obliczanie największej liczby

13. Tablice w JavaScript

Ćwiczenie 1: Tworzenie tablicy

Ćwiczenie 2: Dodawanie elementów do tablicy

Ćwiczenie 3: Usuwanie elementów z tablicy

Ćwiczenie 4: Iterowanie po tablicy

Ćwiczenie 5: Sprawdzanie długości tablicy

14. Funkcje w JavaScript

Ćwiczenie 1: Tworzenie funkcji

Ćwiczenie 2: Funkcja bez argumentów

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

Ćwiczenie 3: Ładowanie skryptu w sekcji `<head>`

Ćwiczenie 1: Deklarowanie zmiennych z `let`

Ćwiczenie 2: Deklarowanie zmiennej z `const`

Ćwiczenie 1: Wyświetlanie zmiennej w `div`

Ćwiczenie 3: Używanie `innerHTML`

Ćwiczenie 4: Operator logiczny `&&`

Ćwiczenie 5: Operator warunkowy `?`

Ćwiczenie 1: Użycie `alert()`

Ćwiczenie 2: Użycie `prompt()`

Ćwiczenie 3: Użycie `confirm()`

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

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

Ćwiczenie 5: Zastosowanie funkcji `Number()`