JavaScript: Zapobieganie domyślnej akcji przeglądarki
od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Wstep do programowania oraz najwazniejsze konstrukcje jezyka
- Liczne “smaczki” zwiazane z kazda z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich trescia, atrybutami, stylami CSS
- Odczytywanie wspólrzednych polozenia elementu i jego wymiarów
- Obsluga zdarzen i debugowanie kodu
- Praktyczne projekty
- I wiele, wiele wiecej!
Witaj w kursie JavaScript od Podstaw!
Jeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs JavaScript od Podstaw to między innymi:
- Wstęp do programowania
- Najważniejsze konstrukcje języka
- Liczne “smaczki” związane z każdą z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich treścią, atrybutami, stylami CSS
- Odczytywanie współrzędnych położenia elementu i jego wymiarów
- Obsługa zdarzeń
- Debugowanie kodu
- Praktyczne projekty
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
W tej lekcji
powiem ci czym jest domyślna akcja przeglądarki oraz jak możemy jej zapobiec.
Na początek, pokażę ci, że w kodzie mam tutaj prosty formularz.
Mam również jakiś link i ukrytą wiadomość, która poprzez display: none została ukryta.
Przejdźmy najpierw do formularza i pokażę ci jak do niego przypisać zdarzenia, bo do tej pory pokazałem
ci zdarzenie
click, ale jest bardzo wiele zdarzeń w obiektowym modelu dokumentu i będziemy chcieli do tego formularza
przypisać zdarzenie
submit, więc tutaj sobie go pobrałem i poprzez addEventListener przypisałem mu zdarzenie submit i tutaj będziemy mieli
event, czyli za każdym razem to zdarzenie się wykona,
kiedy będziemy chcieli ten formularz wysłać,
czyli kiedy wcisnę wyślij.
Możemy tutaj zrobić np.console.log.
Wysyła się, powiedzmy.
I teraz przejdźmy do konsoli.
Ja wcisnę Wyślij.
Wysyła się. Mignęło tutaj bardzo szybko, patrz w to miejsce, więc może to zobaczysz i zniknęło, dlatego
że ten formularz oczywiście wykonał funkcję, przy zdarzeniu submit, ale również się wysłał.
Można to zobaczyć po tym, że tutaj zostało to serializowane i firstName zostało tutaj dodane.
A ja bym chciał, aby ten formularz się nie wesłał, czyli domyślną akcją przeglądarki przy wciśnięciu Wyślij
jest po prostu wysłanie tego formularza, a po kliknięciu na link domyślną akcją przeglądarki jest przejście
pod wskazany adres.
To jest dosyć logiczne.
Natomiast możemy zapobiec domyślnej akcji przeglądarki, poprzez odwołanie się do event, preventDefault.
Tak wygląda ta metoda I zauważ, co stanie się teraz, kiedy będę chciał wysłać formularz.
Nic się tutaj nie dzieje i strona się nie przeładowuje. Natomiast nie zawsze będziemy chcieli zapobiegać
domyślnej akcji przeglądarki, więc chciałbym tutaj sprawdzić czy pole, które mamy w tym miejscu jest uzupełnione
czy nie. Do niego możemy się odwołać na wiele sposobów poprzez nasz formularz i np. poprzez firstName.
Mówiłem ci że this, tutaj wewnątrz, to będzie element, na którym zdarzenie się wykonało.
W tym przypadku e.target to również będzie formularz, więc możemy się odwołać do this i w przypadku formularzy,
jeżeli mamy jakieś pole, które ma name to możemy się odwołać tak jak pokazywałam do form.firstName.
Skoro form to jest this to do firstName mogę się odwołać i będę miał pobrane to pole.
Pokazywałem ci również, jak sprawdzić jego wartość, poprzez value, czyli możemy w if'ie sprawdzić if this.firstName.value
to się równa np. pusty ciąg znaków, czyli nic nie zostało wpisane.
To wtedy chce zrobić event.preventDefault i chce wyświetlić alert Wpisz swoje imię.
W przeciwnym wypadku, jeżeli wszystko będzie OK, to nie będziemy chcieli robić tego preventDefault i formularz
się wyśle, więc sprawdźmy raz jeszcze, puste pole i mamy Wpisz swoje imię.
Ale jeżeli wpisze dowolną literkę i ona tutaj po poprzez value zostanie zwrócona, a zostanie porównane, to
nie jest pusty ciąg znaków, to się nie wykona, bo formularz się wyśle, co możesz zobaczyć tutaj.
Strona się przodowała i firstName zostało dopisane.
Czyli w ten sposób możemy zapobiegać domyślnej akcji przeglądarki np. w przypadku formularza.
Teraz pokażę ci na polu formularza, które tutaj mamy jeszcze inne zdarzenie, które nazywa się keypress.
Będę chciał je przypisać.
Jak widzisz, znalazłem tutaj w formularzu poprzez querySelector firstName, czyli konkretnie to pole
i przypisałem mu zdarzenie, które nazywa się keypress, a więc za każdym razem jak w takim polu wciśniemy sobie przycisk,
to takie zdarzenie się odpali.
No i teraz będziemy chcieli do eventu się odwołać i coś tam sprawdzić. Zrobimy najpierw console.log event
i teraz jak będę coś wpisywał, to jak widzisz za każdym razem się takie zdarzenie odpala.
Mamy tutaj również kilka informacji np. czy alt był wciśnięty, to ci pokazywałem w przypadku MouseEvent, tutaj
widzimy KeyboardEvent, ale również możemy tutaj zobaczyć jaki znak został wciśnięty, bo skoro onkeypress, to
możemy zobaczyć jaki klawisz został wciśnięty i zobaczmy tutaj coś takiego jak charCode, jest to 102,
czyli jakby kod tego znaku, jest to 102. Natomiast jaka to jest literka, jak możemy to sprawdzić.
Bardzo prosty sposób.
Otóż mamy coś takiego
w konstruktorze string, czego Ci jeszcze nie pokazywałem, jak metodę fromCharCode
itutaj możemy podać taki właśnie charCode, czyli np. 102
i zostanie nam zwrócona
lliterka, więc jeśli tutaj podamy
e.charCode, to zostanie nam zwrócona na przykład literka a, jeżeli taką wcisnąłem.
Dlaczego ci to pokazuje, zaraz zobaczysz, bo chciałbym sprawdzić czy została wciśnięta np. literka a.
Czyli zrobimy to w ten sposób.
Ten charCode, czyli 102 zostanie zamieniony na przykład na a i będziemy mogli to porównać, czy a,
równa się a,
czyli jeżeli wcisnęliśmy
a to możemy również zapobiec domyślnej akcji przeglądarki
i teraz mógłbyś się zastanowić jaka jest ta akcja przeglądarki kiedy tutaj coś wpisujemy.
No to sprawdźmy.
Jeżeli wpisuje s, d, nic się nie dzieje. Jeśli wpiszę a, nie mogę wpisać takiej literki.
Czyli kiedy wpisałem a, odpaliło się zdarzenie keypress.
Sprawdziliśmy czy wciśnięte zostało a.
Jeżeli tak, zapobiegnij domyślnej akcji przeglądarki, czyli nie pozwól
tutaj wpisać tej literki. Wciskam i nie mogę wpisać,
a każda inna bez problemów wchodzi.
Czyli w tym przypadku domyślna akcja jest to po prostu umieszczenie tego znaku w tym miejscu.
No i na koniec chcę ci jeszcze pokazać, jak możemy działać w wypadku linku. Również możemy to zrobić w
ciekawy sposób, bo mamy tutaj ukryty element id, div z id message.
A tutaj mamy
a href, który kieruje na message, czyli ono teoretycznie kieruje na tego div'a, ale nie do końca, po wciśnięciu,
jak widzisz tutaj, po prostu,
dodamy message, gdyby ten element był widoczny, to ewentualnie moglibyśmy do niego zostać przescrollowani.
Natomiast ja chciałbym go pokazać i teraz znowu takie zdarzenie tutaj
wrzucimy. Na samej górze możesz zobaczyć, że pobrałem sobie link do zmiennej i wklejam tutaj gotowy kod tym razem do
linku odwołaliśmy się jako onclick. Mamy tutaj przechwycenie zdarzenia,
e.preventDefault, to oznacza, że po kliknięciu tutaj nie będziemy tutaj tego hash'a dodawać, bo zapobiegamy
domyślnej akcji przeglądarki.
Ale co robimy niżej.
Jak widzisz, odwołujemy się do message, poprzez document querySelector, czyli chcemy na stronie znaleźć
element który ma takie id.
Jeżeli tutaj jest id message, to wiesz że poprzez querySelector możemy podać message.
Czyli jeżeli z klikniętego elementu pobierzemy href, to będzie cały ciąg i to przekażemy do
document.querySelector, to znajdzie nam ten element i możemy go pokazać.
Natomiast tutaj wykomentowałem, to co jest ważne jeżeli odwołamy się do e.target to już pamiętasz, że odwołamy
się do tego elementu i będę chciał się odwołać do jego href.
To nie zadziała nam to dobrze w tym momencie, bo jeżeli bym się do tego elementu odwołał tutaj. W konsoli
mogę się do niego dostać poprzez $0 i następnie href,
to jak widzisz, to jest cały jego href.
Właśnie dlatego, że znajdujemy się tutaj poprzez file. Gdybyśmy byli na serwerze, to byśmy się mogli
odwołać do e.target href i zostałoby nam tutaj zwrócone właśnie to message.
Oczywiście mogłem to pobrać poprzez getAttribute,
ale chciałem Ci pokazać, że można również inaczej.
No i teraz w przypadku, kiedy jesteśmy właśnie w file, tak jak to widzisz tutaj, to musimy się odwołać
do e.target.hash i wtedy nam zostanie zwrócony właśnie ten string.
O to chodzi, że do document.querySelector przekażemy hash message, czyli pobierzemy
ten ukryty element i poprzez style możemy mu przypisać display block i go pokazać.
Jest to o tyle ciekawe, że możemy tutaj kliknąć i pokazać ukrytą wiadomość, bez przenoszenia się gdziekolwiek,
bo zapobiegliśmy domyślnej akcji
przeglądarki i dlaczego na końcu zwracam false?
Dlatego, że alternatywą do preventDefault jest zwrócenie funkcji false.
Czyli jeżeli funkcja obsługi zdarzenia będzie zwracać false, to również zapobiegnie domyślnej akcji przeglądarki.
Kod
Zapobieganie domyślnej akcji przeglądarki · 1 min
var form = document.querySelector("#myForm"),
link = document.querySelector("#showMessage");
form.addEventListener("submit", function(e) {
if(this.firstName.value === "") {
e.preventDefault();
alert("Wpisz swoje imię!");
}
}, false);
form.querySelector("#firstName").addEventListener("keypress", function(e) {
if(String.fromCharCode(e.charCode) === "a") {
e.preventDefault();
}
}, false);
link.onclick = function(e) {
e.preventDefault();
var message = document.querySelector(e.target.hash); // na serwerze e.target.href
message.style.display = "block";
return false;
};