W tym artykule zajmiemy się takimi zagadnieniami jak podstawowe funkcje, instrukcje warunkowe i przełączniki, jakie stosujemy w języku JavaScript. Omówimy więc z przykładami zastosowań, czym są prompt(), querySelector(), if…else, setTimeout(), transition, isNaN(), addEventListener() oraz switch.
Wyświetlanie tekstu na stronie: innerHTML
Kiedy chcemy wyświetlić coś na stronie, używamy metody innerHTML. Pozwala ona wstawić tekst lub kod HTML do elementu. Przykład:
const element = document.querySelector("#suma");
element.innerHTML = 'Wynik: ' + (a + b);
Ten kod znajduje element z id „suma” i wstawia do niego wynik działania.
Pobieranie danych od użytkownika: prompt()
Zajmiemy się teraz funkcją prompt(), która pozwala na wyświetlenie okna dialogowego, które prosi użytkownika o wpisanie danych. Zwraca tekst, więc często używamy parseInt(), aby zamienić ten tekst na liczbę:
let a = parseInt(prompt('Podaj liczbę a'));
let b = parseInt(prompt('Podaj liczbę b'));
Zapisywanie wyników w zmiennych: let i const
W JavaScript używamy let lub const, aby tworzyć zmienne oraz stałe. let pozwala na zmianę wartości zmiennej, natomiast const oznacza, że wartość nie będzie mogła zostać zmieniona.
Przykład:
let a = 5; // zmienna, którą możemy zmieniać
const element = document.querySelector("#wynik"); // stała, której wartości nie zmieniamy
Znajdowanie elementów na stronie: querySelector()
Aby JavaScript mógł „porozumiewać się” z HTML, musimy znaleźć odpowiednie elementy. Do tego służy querySelector(). Na przykład:
const element = document.querySelector("#suma");
Tutaj wybieramy element z id „suma” z dokumentu HTML. Pamiętajcie, że różnica polega na tym, że selektor w JavaScript oznaczamy poprzedzając jego nazwę znakiem #, natomiast w HTML zawsze odnosi się właśnie do elementu oznaczonego jako id, w tym przypadku id="suma"
Operacje matematyczne
JavaScript obsługuje podstawowe operacje matematyczne, takie jak dodawanie (+), odejmowanie (-), mnożenie (*) i dzielenie (/). Możemy także podnosić liczby do potęgi za pomocą **:
let wynik = a + b; // dodawanie
let potega = a ** b; // potęgowanie
Operacje matematyczne w JavaScript obejmują podstawowe działania, takie jak dodawanie i mnożenie, ale także bardziej zaawansowane operacje, które mogą być przydatne w różnych sytuacjach. Poniżej znajdziesz tabelę przedstawiającą wszystkie możliwe operacje matematyczne w JavaScript:
| Operacja | Opis | Przykład | Wynik |
|---|---|---|---|
Dodawanie (+) |
Dodaje dwie liczby | 5 + 3 |
8 |
Odejmowanie (-) |
Odejmuje jedną liczbę od drugiej | 10 - 4 |
6 |
Mnożenie (*) |
Mnoży dwie liczby | 6 * 2 |
12 |
Dzielenie (/) |
Dzieli jedną liczbę przez drugą | 15 / 3 |
5 |
Reszta z dzielenia (%) |
Zwraca resztę z dzielenia dwóch liczb | 10 % 3 |
1 |
Potęgowanie (**) |
Podnosi liczbę do potęgi | 2 ** 3 |
8 |
Przypisanie dodawania (+=) |
Dodaje i przypisuje wynik | let a = 5; a += 3; |
a = 8 |
Przypisanie odejmowania (-=) |
Odejmuje i przypisuje wynik | let a = 10; a -= 4; |
a = 6 |
Przypisanie mnożenia (*=) |
Mnoży i przypisuje wynik | let a = 6; a *= 2; |
a = 12 |
Przypisanie dzielenia (/=) |
Dzieli i przypisuje wynik | let a = 15; a /= 3; |
a = 5 |
Zaokrąglenie w dół (Math.floor()) |
Zaokrągla liczbę w dół | Math.floor(4.7) |
4 |
Zaokrąglenie w górę (Math.ceil()) |
Zaokrągla liczbę w górę | Math.ceil(4.1) |
5 |
Zaokrąglenie (Math.round()) |
Zaokrągla liczbę do najbliższej całości | Math.round(4.5) |
5 |
Pierwiastek kwadratowy (Math.sqrt()) |
Zwraca pierwiastek kwadratowy | Math.sqrt(16) |
4 |
Wartość bezwzględna (Math.abs()) |
Zwraca wartość bezwzględną liczby | Math.abs(-5) |
5 |
Losowa liczba (Math.random()) |
Generuje losową liczbę z przedziału (0, 1) | Math.random() |
np. 0.678 |
Maksimum (Math.max()) |
Zwraca największą liczbę z podanych | Math.max(5, 10, 15) |
15 |
Minimum (Math.min()) |
Zwraca najmniejszą liczbę z podanych | Math.min(5, 10, 15) |
5 |
Wyjaśnienie
- Podstawowe operacje (
+,-,*,/) są intuicyjne i odpowiadają tradycyjnym działaniom matematycznym. - Reszta z dzielenia (
%) przydaje się np. przy sprawdzaniu parzystości liczby (liczba % 2). - Potęgowanie (
**) pozwala szybko obliczać potęgi liczb. - Metody
Mathoferują różne funkcje do zaokrąglania liczb (Math.floor(),Math.ceil()) lub generowania losowych liczb (Math.random()).
Każda z tych operacji znajduje swoje zastosowanie w codziennych zadaniach programistycznych, takich jak obliczenia w formularzach, kalkulacje w grach czy przetwarzanie danych liczbowych.
Warunki: if...else
Często musimy podjąć decyzję na podstawie jakiegoś warunku. Na przykład, jeśli wynik jest większy niż 10, zmień kolor tła. Niżej przykład zastosowania if…else, który w prosty sposób pokazuje, co się zadzieje ze stroną, w przypadku spełnienia warunku, lub w przeciwnym wypadku.
if (wynik > 10) {
document.body.style.backgroundColor = 'green';
} else {
document.body.style.backgroundColor = 'red';
}
Wyjaśnijmy teraz jak to się odnosi do dokumentu HTML:
document.body.style.backgroundColor to zapis w JavaScript, który zmienia kolor tła całej strony internetowej.
document: odnosi się do bieżącego dokumentu HTML.body: wybiera element<body>, czyli główną część strony.style.backgroundColor: pozwala zmienić właściwość CSS, która określa kolor tła. Możesz przypisać do niej dowolny kolor, np.'green','red', lub kolor w formacie heksadecymalnym ('#ff0000').
Aby odnieść się do innego elementu niż <body>, możesz użyć np. jego identyfikatora (id), klasy (class), lub dowolnego innego selektora za pomocą document.querySelector(). Oto kilka przykładów:
Zmiana tła elementu z id „box”:
document.querySelector('#box').style.backgroundColor = 'yellow';
Zmiana tła elementu z klasą „container”:
document.querySelector('.container').style.backgroundColor = 'blue';
Zmiana tła pierwszego akapitu (<p>):
document.querySelector('p').style.backgroundColor = 'pink';
Zmiana tła wszystkich elementów <div>:
document.querySelectorAll('div').forEach(el => {
el.style.backgroundColor = 'green';
});
Każda z tych metod odnosi się do różnych elementów na stronie, pozwalając na dynamiczne manipulowanie stylem tych elementów.
Wyświetlanie formatowanego tekstu z HTML
Możemy użyć innerHTML do wstawienia nie tylko tekstu, ale i elementów HTML, np. zmieniając styl wyniku:
const wynik = document.querySelector("#suma");
wynik.innerHTML = '<h1 style="color:red;">Wynik dodawania: ' + (a + b) + '</h1>';
Płynne animacje: setTimeout() i transition
Jeśli chcemy, aby coś zmieniało się stopniowo, możemy użyć animacji CSS, a do jej uruchomienia w odpowiednim momencie setTimeout():
const wynik = document.getElementById("wynik");
wynik.innerHTML = 'Suma: ' + suma;
setTimeout(() => {
wynik.style.transition = "font-size 2s";
wynik.style.fontSize = "40px";
}, 100); // opóźnienie w wykonaniu kodu
W powyższym przykładzie, mamy wynik.style.transition ustawiony dla elementu CSS o nazwie font-size, który ma trwać 2s. Oznacza to, że do wpisanego niżej fontsize wynoszącego 40px, czcionka wyniku ma zwiększać się przez 2s, aż uzyska rozmiar 40px.
Sprawdzanie typu danych: isNaN()
Aby upewnić się, że użytkownik wprowadził liczbę, możemy sprawdzić, czy dana wartość nie jest tekstem. Używamy do tego isNaN():
if (isNaN(a)) {
alert("To nie jest liczba!");
}
Kod zadziałą w ten sposób, że sprawdzi wartość liczby a i jeśli nie jest ona liczbą, wyświetli komunikat o błędzie „To nie jest liczba!”.
Zdarzenia i obsługa przycisków: addEventListener()
Możemy uruchomić kod w momencie, gdy użytkownik kliknie przycisk. Aby to zrobić, używamy addEventListener():
W praktyce wygląda to tak, że część kodu JavaScript działa na stronie odrazu po jej załadowaniu, natomiast addEventListener() daje możliwość wywołania kodu JavaScript dopiero, w czasie, kiedy będzie to wymagane. Oto przykład takiego zastosowania:
document.getElementById("przycisk").addEventListener("click", function() {
let a = parseInt(prompt('Podaj a'));
let b = parseInt(prompt('Podaj b'));
document.querySelector("#wynik").innerHTML = 'Wynik: ' + (a + b);
});
Przeanalizujcie poniższy, cały kod strony, zwróćcie uwagę, gdzie znajduje się przycisk (button) i jak się go oznacza, żeby mógł zostać rozpoznany przez JavaScript
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator dodawania</title>
</head>
<body>
<div id="wynik"></div>
<button id="przycisk">Oblicz sumę</button>
<script>
document.getElementById("przycisk").addEventListener("click", function() {
let a = parseInt(prompt('Podaj liczbę a'));
let b = parseInt(prompt('Podaj liczbę b'));
document.querySelector("#wynik").innerHTML = 'Wynik: ' + (a + b);
});
</script>
</body>
</html>
Obsługa różnych operacji: switch
Aby wykonać różne operacje w zależności od wyboru użytkownika, możemy użyć switch:
Switch działa bardzo podobnie w każdym języku, niżej na przykładzie składnia tej instrukcji, w języku JavaScript.
let operacja = prompt('Podaj operację: +, -, *, /');
switch (operacja) {
case '+':
wynik = a + b;
break;
case '-':
wynik = a - b;
break;
case '*':
wynik = a * b;
break;
case '/':
wynik = a / b;
break;
default:
wynik = 'Nieznana operacja';
}
switch pozwala na szybkie sprawdzenie kilku warunków.
Na koniec..
JavaScript daje ogromne możliwości interakcji z użytkownikiem. Dzięki metodom takim jak innerHTML możemy dynamicznie zmieniać zawartość strony, a z użyciem prompt() wprowadzać dane od użytkownika. Dodając do tego warunki, operacje matematyczne oraz zdarzenia jak kliknięcie przycisku, możemy tworzyć proste aplikacje i kalkulatory, które wprowadzają interaktywność na naszej stronie.
Pracując z JavaScriptem, kluczowe jest zrozumienie, w jakich sytuacjach i jak stosować powyższe elementy, aby realizować różnorodne zadania. Mamy nadzieję, że ten artykuł pomoże Ci opanować te podstawy i wykorzystać je w Twoich projektach!