Modest Programmer logo
25 września 2018
Tagi: JavaScript
Aby utrwalić temat zdarzeń, w tym artykule przejdziemy do praktyki. Utworzymy bardzo prosty formularz, na przykładzie którego przedstawię Ci kilka zdarzeń w JavaScipcie.

Co chcemy osiągnąć? Po pierwsze chcemy aby nasz formularz pobierał od użytkownika imię i nazwisko. Po aktywowaniu pola tekstowego, kolor jego tła będzie się zmieniał na żółty. Po najechaniu myszą na przycisk zapisz, kolor obramowania będzie zmieniał się na zielony, oraz po kliknięciu w przycisk zostanie wyświetlona wiadomość powitalna z wprowadzonym imieniem i nazwiskiem.

Z jakich zdarzeń będziemy musieli skorzystać? Na pewno poznane już we wcześniejszym artykule zdarzenie click, po którym zostanie wyświetlony komunikat. Ten komunikat będziemy wyświetlać za pomocą metody alert(), której jeszcze nie używaliśmy w kursie. Metoda ta wyświetla zwykły komunikat, okno dialogowe z odpowiednią wiadomością. Aby po najechaniu myszą na przycisk, zmieniało się obramowanie przycisku będziemy musieli użyć 2 zdarzeń mouseover oraz mouseout. Do zmiany koloru tła pól tekstowych będziemy potrzebować zdarzeń focus oraz blur. Ok, wiemy już wszystko, możemy zaczynać.
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zdarzenia</title>
</head>
<body>

    <div id="container">
        <label>Imię:
            <input id="firstName">
        </label>
        <label>Nazwisko:
            <input id="lastName">
        </label>
        <button id="save">Zapisz</button>
    </div>

    <script src="js/skrypt.js"></script>
</body>
</html>
Do naszego szkieletu HTML zostały dodane 2 etykiety, 2 pola tekstowe oraz przycisk. Standardowo na dole strony zostało dodane odwołanie do pliku ze skryptami, gdzie będziemy pisać nasz kod JS. Zacznijmy od napisania zdarzenia, które zostanie wyzwolone po załadowaniu się naszej strony, dla przypomnienia będzie to zdarzenie DOMContentLoaded.
document.addEventListener('DOMContentLoaded', function(event) {
	//...
});
Teraz pobierzmy oraz przypiszmy do zmiennych obiekty, których potrzebujemy to znaczy pola tekstowe oraz przycisk. Możemy to zrobić, pobierając każdy input pokolei po id:
document.addEventListener('DOMContentLoaded', function(event) {
    let firstName = document.getElementById('firstName');
    let lastName = document.getElementById('lastName');
    let save = document.getElementById('save');  
});
Ale w tym przypadku, lepszym pomysłem będzie pobranie za pomocą metody querySelectorAll wszystkich pól tekstowych jednocześnie:
document.addEventListener('DOMContentLoaded', function(event) {
    let inputs = document.querySelectorAll('input');    
    let save = document.getElementById('save');
});
Następnie podepnijmy się pod zdarzenia, o których mówiliśmy na początku artykułu oraz zdefiniujmy odpowiednie callback'i. Musimy pamiętać o tym, że pod zmienną inputs znajduje się tablica obiektów, dzięki czemu możemy w pętli przypisać do nich zdarzenia.
document.addEventListener('DOMContentLoaded', function(event) {
    let inputs = document.querySelectorAll('input');    
    let save = document.getElementById('save');

    for (const input of inputs) {
        input.addEventListener('focus', function() {
            input.style.backgroundColor = 'yellow';
        });

        input.addEventListener('blur', function() {
            input.style.backgroundColor = 'white';
        });
    }

    save.addEventListener('mouseover', function() {
        save.style.borderColor = 'green';
    });

    save.addEventListener('mouseout', function() {
        save.style.borderColor = 'black';
    });

    save.addEventListener('click', function() {
        alert(`Cześć ${inputs[0].value} ${inputs[1].value}!`);
    });
});
Tak wygląda nasz kompletny kod w JavaScript. Oczywiście można pokusić się jeszcze o jakąś walidację, tak aby nie były przekazywane puste pola tekstowe, ale nie na tym chcemy się skupić w tym artykule. Jak widzisz, dlatego że w zdarzeniu mouseover zmieniamy kolor obramowania na zielony, dodatkowo musimy podpiąć się pod zdarzenie mouseout, tak aby z powrotem ustawić pierwotny kolor. To samo dotyczy zdarzeń focus oraz blur.

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.

Poprzedni artykuł - Zdarzenia w JavaScript.
Następny artykuł - Blokowanie domyślnej akcji zdarzenia w JavaScript.
Autor artykułu:
Kazimierz Szpin
Kazimierz Szpin
Programista. Specjalizuje się w C#, głównie WPF, Windows Forms oraz ASP.NET MVC.
Autor bloga ModestProgrammer.pl
Dodaj komentarz
© Copyright 2018 modestprogrammer.pl. Wszelkie prawa zastrzeżone Design by Kazimierz Szpin