Klovy.pl – Twoje centrum wiedzy!
Related Articles
Witaj w 6 części nauki HTML, JavaScript
Tym razem poznajemy zaawansowane techniki JavaScript.
Oczywiście do strony możemy dodać CSS, lecz w tym momencie uczymy się JS, więc porzucamy CSS na później
1. Input – wprowadzanie danych
W praktyce nie używamy ’inputa’ lecz ’prompta’. Oznacza to, że aby pobrać dane musimy przenieść się do naszej strony internetowej. Kontynuacja w punkcie 2.
2. JavaScript z HTML!
A) Pierwszy raz połączymy skrypt js z naszą stroną internetową, zrobimy to w bardzo prosty sposób. Aby dodać skrypt do HTML mamy 2 opcje:
- umieścić kod pomiędzy tagami <script> nasz kod </script>
- podłączyć plik .js do HTML, robimy to poprzez dodanie do tagu <script> ’src’, powinno to wyglądać w ten sposób:
<script src="index.js"></script>, oczywiście jeżeli pliki są w tym samym miejscu i plik JS ma nazwę 'index.js’.
B) Kontynuacja punktu 1.
Wyświetlimy na stronie formularz z napisem ’Podaj swoje imię:’ oraz input. Po podaniu imienia, wyświetli się komunikat ’Witaj, IMIE! Miło Cię widzieć.’, gdzie zamiast 'IMIE’ pojawi się to co wpisałeś w input.
Przykładowy kod:
HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Witaj</title>
</head>
<body>
<button onclick="greetUser()">Witaj!</button><script src="index.js"></script></body>
</html>JS:
const greetUser = () => {
const userName = prompt('Podaj swoje imię:');
alert(Witaj, ${userName}! Miło Cię widzieć.`);
};greetUser();
Opis:
Powyższy kod prosi użytkownika o podanie imienia za pomocą okna dialogowego prompt, a następnie wyświetla spersonalizowane powitanie za pomocą funkcji alert. Plik .html oraz .js należy mieć w jednym miejscu, oraz nazwa pliku JS musi być 'index’.
3. Liczenie
Prosty kalkulator z dodawaniem!
Kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suma w JavaScript</title>
</head>
<body>
<button id="calculateButton">Oblicz</button><script>
const calculate = () => {
const x = parseInt(prompt('Podaj pierwszą liczbę:'));
const y = parseInt(prompt('Podaj drugą liczbę:'));
const sum = x + y;
alert(`Suma liczb to: ${sum}`);
};
document.getElementById('calculateButton').addEventListener('click', calculate);
</script></body>
</html>
Opis:
Funkcja calculate pobiera dwie liczby od użytkownika za pomocą okien dialogowych prompt, dodaje je do siebie, a następnie wyświetla wynik za pomocą funkcji alert po kliknięciu przycisku.
4. Prosty w pełni funkcyjny kalkulator
Mamy tutaj prosty przykład w pełni funkcjonalnego kalkulatora.
Kod HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator</title>
</head>
<body>
<h2>Kalkulator</h2>
<input type="text" id="firstNumber" placeholder="Wprowadź pierwszą liczbę">
<input type="text" id="secondNumber" placeholder="Wprowadź drugą liczbę">
<button id="addButton">Dodaj</button>
<button id="subtractButton">Odejmij</button>
<button id="multiplyButton">Pomnóż</button>
<button id="divideButton">Podziel</button>
<p id="result">Wynik: </p><script src="index.js"></script></body>
</html>Kod JS (index.js):
document.getElementById('addButton').addEventListener('click', add);
document.getElementById('subtractButton').addEventListener('click', subtract);
document.getElementById('multiplyButton').addEventListener('click', multiply);
document.getElementById('divideButton').addEventListener('click', divide);function add() {
const firstNumber = parseFloat(document.getElementById('firstNumber').value);
const secondNumber = parseFloat(document.getElementById('secondNumber').value);
const result = firstNumber + secondNumber;
document.getElementById('result').innerText = Wynik: ${result};}function subtract() {
const firstNumber = parseFloat(document.getElementById('firstNumber').value);
const secondNumber = parseFloat(document.getElementById('secondNumber').value);
const result = firstNumber - secondNumber;
document.getElementById('result').innerText = Wynik: ${result};}function multiply() {
const firstNumber = parseFloat(document.getElementById('firstNumber').value);
const secondNumber = parseFloat(document.getElementById('secondNumber').value);
const result = firstNumber * secondNumber;
document.getElementById('result').innerText = Wynik: ${result};}function divide() {
const firstNumber = parseFloat(document.getElementById('firstNumber').value);
const secondNumber = parseFloat(document.getElementById('secondNumber').value);
const result = firstNumber / secondNumber;
document.getElementById('result').innerText = Wynik: ${result};}
Teraz samemu możesz dodać CSS do kalkulatora, aby wyglądał np. w ten sposób:
nie zapomnij podłączyć pliku CSS do HTML
Koniec 🙂
