Zadanie 10: Podstawy JavaScript w HTML

Wstęp

HTML służy do budowania widocznej struktury strony, CSS do jej stylowania, a JavaScript (JS) ożywia stronę dodając do niej interaktywność i logikę. Aby strona mogła "myśleć" i reagować na polecenia, musimy połączyć HTML z kodem JavaScript.

Cel zadania

Poznanie sposobu podpinania skryptów w dokumencie HTML, nauka definiowania zmiennych oraz tworzenia podstawowych funkcji w języku JavaScript.

1. Dodawanie skryptu JavaScript do HTML

Kod JavaScript możemy pisać bezpośrednio wewnątrz pliku HTML, wykorzystując do tego znacznik <script>. Dobrą praktyką jest umieszczanie go na samym dole strony, tuż przed zamykającym tagiem </body>. Dzięki temu mamy pewność, że wszystkie elementy HTML zostały wczytane przez przeglądarkę przed uruchomieniem naszego kodu.

Przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Moja Strona z JS</title>
</head>
<body>
    <h1>Witaj na moje stronie!</h1>
    
    <!-- Skrypt JS dodajemy przed zamknięciem body -->
    <script>
        // Tutaj piszemy kod JavaScript
        console.log("Hurra! Mój skrypt działa!");
    </script>
</body>
</html>

(Uwaga: console.log() to polecenie, które wypisuje komunikat w ukrytej konsoli w Twojej przeglądarce. Aby ją otworzyć, wciśnij klawisz F12 i przejdź do zakładki "Konsola" / "Console").

2. Tworzenie zmiennych

Zmienne w programowaniu to takie specjalne pojemniki, w których przechowujemy różne informacje – na przykład liczby czy tekst. W JavaScript do tworzenia zmiennych używamy słów let oraz const.

Przykłady tworzenia zmiennej:

// Używamy 'let' dla zmiennych, których wartość może się zmienić w przyszłości.
let imie = "Kamil";
let wiek = 18;

// Zmiana wartości (nie piszemy już 'let', bo zmienna została utworzona wcześniej)
wiek = 19;

// Używamy 'const' dla stałych – ich wartość przypisujemy tylko RAZ i nie możemy jej potem zmienić.
const rokUrodzenia = 2005;

// Wyświetlenie naszych zmiennych w konsoli przeglądarki
console.log(imie);
console.log(wiek);
console.log(rokUrodzenia);

3. Tworzenie funkcji

Zamiast pisać ten sam kod ciągle od nowa, możemy zamknąć go w funkcji i nadać mu nazwę. Następnie taką funkcję możemy w dowolnym momencie wywołać, by wykonała swoje zadanie.

Funkcja bez argumentów

Wykonuje to samo, ściśle określone zadanie za każdym razem, gdy zostanie wywołana.

// 1. Definicja funkcji
function powiedzCzesc() {
    console.log("Cześć! Ale tu ładnie.");
}

// 2. Wywołanie funkcji (dopiero teraz kod wewnątrz niej zostanie uruchomiony!)
powiedzCzesc();

Funkcja z argumentami

Funkcja może przyjmować dodatkowe informacje (argumenty), dzięki którym jej wynik będzie zależał od parametrów wejściowych jaki jej podamy.

// Funkcja przyjmuje dwie liczby: 'a' oraz 'b'
function dodajLiczby(a, b) {
    let wynik = a + b;
    console.log("Wynik dodawania to: " + wynik);
}

// Wywołujemy funkcję podając jej różne argumenty
dodajLiczby(5, 3);    // Wynik: 8
dodajLiczby(10, 20);  // Wynik: 30

Zadania do samodzielnego wykonania

Utwórz czysty plik index.html, wygeneruj w nim standardowy szkielet dokumentu (np. wpisując ! i klikając Tab). Tuż nad zamykającym </body> dodaj tag <script>. Cały poniższy kod rozwiązujący zadania pisz wewnątrz tego jednego znacznika <script>. Używaj narzędzi przeglądarki (klawisz F12 -> zakładka Console), by weryfikować poprawność kodu.

Definicja smaku: Utwórz zmienną o nazwie ulubionySmak (pamiętaj o użyciu let) i przypisz do niej swój ulubiony smak lodów (np. "czekoladowy"). Następnie wypisz tę zmienną w konsoli za pomocą console.log().
Niezmienna wartość PI: Wykorzystując słowo kluczowe const, stwórz stałą o nazwie wartoscPi i przypisz do niej wartość 3.14. Wypisz ją w konsoli.
Modyfikacja licznika: Utwórz zmienną (używając let) o nazwie punktyGry i przypisz jej wartość początkową 10. W następnej linii kodu uaktualnij wartość tej zmiennej na 15, a następnie wypisz jej stan w konsoli.
Moja pierwsza funkcja: Stwórz funkcję bez argumentów o nazwie wyswietlOstrzezenie(). W ciele funkcji umieść polecenie console.log("Uwaga! Niski poziom baterii!"). Następnie wywołaj tę funkcję, by sprawdzić czy działa.
Personalizowane powitanie: Stwórz funkcję powitaj(imie), która przyjmuje jeden argument w postaci tekstu. Niech funkcja wypisuje w konsoli powitanie łącząc tekst, np. "Witaj na pokładzie, " + imie. Następnie wywołaj ją podając swoje własne imię.
Funkcja mnożąca mnożnik: Napisz funkcję z dwoma argumentami: pomnoz(liczba1, liczba2). Wewnątrz wylicz wynik ich mnożenia i wypisz go w konsoli: "Wynik mnożenia to: " + wynik. Wywołaj funkcję dla liczb 7 oraz 8.
Kalkulator napiwku: Napisz funkcję obliczNapiwek(kwotaRachunku). Funkcja ta powinna przemnożyć wejściową kwotę przez 0.10 (czyli wyliczyć 10%), a następnie wypisać w konsoli: "Sugerowany napiwek: " + wartoscNapiwku. Sprawdź działanie dla rachunku w wysokości 200.
Sklejanie słów: Zbuduj funkcję zrobZdanie(slowo1, slowo2), która wydrukuje w konsoli połączone obydwa słowa ze spacją pomiędzy nimi (np. dla wejścia "Uczę", "się" ma wyjść "Uczę się"). Przetestuj funkcję dając jej jako argumenty jakiekolwiek dwa wyrazy.
Logika z wywoływaniem: Zdefiniuj funkcję bez argumentów o nazwie separator(), która po prostu wypisze w konsoli ciąg znaków "------------". Użyj jej jako oddzielenia – czyli w swoim kodzie wywołaj jakąkolwiek inną funkcję wypisującą tekst, wywołaj funkcję separator(), i ponownie wywołaj inną funkcję by zobaczyć czy separator odpowiednio podzieli logi.
Test wielokrotny: Korzystając z funkcji stworzonej w punkcie 5 (czyli powitaj), wywołaj tę funkcję trzy razy pod rząd, za każdym razem dostarczając do argumentu inne imię (np. powitaj Annę, potem powitaj Jana, na końcu powitaj Tomasza).

HTML i JavaScript: Podstawy integracji