JavaScript: Praca z atrybutami
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 popracujemy troszkę z atrybutami elementów HTML.
Na pewno wiesz jak działają atrybuty, bo zawsze z nich korzystamy.
Jeżeli mamy tutaj element a to tutaj href.
Jest to atrybut klas.
Jest to również atrybut, tutaj button type, to również jest atrybut, czyli atrybuty możemy przypisać tutaj
od razu w kodzie HTML, ale również z poziomu JavaScriptu możemy pobierać ich wartości dodawać je czy
też je usuwać.
Dlatego teraz chce ci to pokazać.
Przejdźmy tutaj i utworze od razu może referencje do linku.
Czyli będę chciał sobie pobrać ten element, który tutaj mieliśmy.
Ma on klasę link, więc skorzystam może z dokument querySelector link.
W ten sposób możemy pobrać z selektorem CSS i teraz powiedzmy, że chcemy odczytać jego atrybut href, który
tutaj się znajduje jest to ten hash, więc utworze tutaj po przecinku nową zmienną, nazwę ją href. Jak możemy
się odwołać do atrybutu elementu, kiedy mamy go już zapisanego w zmiennej.
Otóż możemy się do niego odwołać poprzez link. następnie getAttribute.
Oczywiście powiedziałem zapisanego w zmiennej.
Nie ma to znaczenia.
Możemy tutaj się odwołać i od razu kropka getAttribute.
Ważne żebyśmy mieli do niego referencje,
getAttribute pobiera nam wartość atrybutu, który tutaj podamy. No i wpiszemy tutaj href, w ten sposób
i teraz przejdę do przeglądarki i mamy zmienną href, ma ona taką oto wartość. Co by było gdybyśmy podali
atrybut. który nie istnieje?
Zobaczmy, jaka byłaby jego wartość.
Jak widzisz null.
A więc ta wartość null w porównaniu do undefined, to co tłumaczyłem Ci na początku tego kursu, jak widzisz,
w wielu miejscach ma znaczenie, czyli atrybut href możemy sobie pobrać i każdy inny atrybut poprzez
getAttribute, wywołać to na konkretnym elemencie.
Teraz pokażę ci jak możemy ustawić atrybut.
Myślę, że się domyślasz. Link, następnie setAttribute.
I ta metoda działa w ten sposób, że pierwszy parametr jest to atrybutu, który chcemy ustawić np. href,
jeżeli on istnieje to zmienimy jego wartość, jeżeli nie istnieje to zostanie dodany więc href ichcemy
go ustawić na nową wartość np. http://eduweb.pl, powiedzmy, zapisuje i teraz po odświeżeniu.
Jeżeli najadę to możesz zobaczyć w lewym dolnym rogu, że mamy eduweb pl.
Gdybym tutaj chciał zobaczyć w panelu elements, to rzeczywiście jest tutaj
eduweb.pl i po kliknięciu przeszli byśmy oczywiście do strony głównej serwisu
eduweb, czyli pobierać atrybuty, ich wartości możemy poprzez getAttribute, ustawiać poprzez setAttribute.
I co jest ważne.
Tutaj będzie nam zawsze zwracana wartość string.
Usuwać atrybuty możemy myśle, że już się domyślasz poprzez removeAttribute, więc odwołajmy się może
do links znowu i removeAttribute i usuniemy atrybut class, który tutaj się znajduje czyli link.
Jak widzisz tutaj przypisałem, że link będzie to kolor czerwony, dlatego ten element jest czerwony.
Jeżeli usuniemy mu taką klasę, czyli cały ten atrybut, to ten kolor powinien zniknąć, a więc atrybut klas
chce usunąć, proszę bardzo.
Nie mamy tego atrybutu, więc klasa nie jest już aplikowana do tego elementu.
Pokażę ci jeszcze kilka przykładów. Tutaj w kodzie mamy taki element jak button, więc będę chciał sobie
go teraz pobrać do zmiennej.
Napiszmy var button.
W ten sposób sobie go pobiorę i będę chciał go wyłączyć, więc mamy taki atrybut jak disabled, mogę
go automatycznie tutaj z poziomu kodu JavaScript dodać poprzez setAttribute, nazywa on się disabled
i on nie musi mieć wartości tzn.
można mu przypisać albo wartość disabled, w ten sposób albo np. true.
Jakie są konsekwencje przypisania disabled do takiego elementu?
Oczywiście moglibyśmy to przypisać tutaj ręcznie.
Otóż taki przycisk, jak widzisz, jest wyłączony i nie możemy również na niego klikać.
Jeżeli taki atrybut usuniemy, to znowu będzie można w ten element klikać.
Wystarczy removeAttribute disable.
Nie ma drugiego parametru.
I to jest przydatne, jeżeli będziemy tworzyć jakąś aplikację, gdzie po kliknięciu np. formularz będzie
przesłany i nie chcemy, żeby ktoś drugi raz klikną, to możemy wyłączyć taki przycisk, poprzez właśnie taki
atrybut disabled.
Chcę ci teraz pokazać jeszcze jedną rzecz, otóż utworzymy nowy element będzie to img.
Mamy nowy obrazek i chciałbym mu teraz przypisać atrybut src, abyśmy mogli wstawić go na stronę i teraz
możemy to zrobić poprzez img.setAttribute. Widzimy, że ten element nigdzie nie wstawiony na stronie, ale
mimo wszystko możemy bez problemu na nim operować albo możemy użyć skrótu odwołując się do img.src
i teraz takie skróty są dostępne w przypadku większości atrybutów, czyli tak jak tutaj ustawiałem
w przypadku disabled.
Moglibyśmy się odwołać do disabled w przypadku buttona.
Jeżeli byśmy chcieli ustawić id, to możemy napisać id itd.
Ja zazwyczaj preferuję używanie setAttribute, bo tutaj wyraźnie widać, co robimy, ale często zobaczysz również
takie skróty jak np. img.src zamiast
setAttribute src i wtedy odwołujemy się do niego poprzez równa się, czyli ten drugi parametr musi być po równa
się.
Jest to po prostu właściwość, którą przypisujemy.
Tutaj podamy oczywiście string.
No i teraz chciałbym podać adres pod którym się znajduje
obrazek z logo eduweb.pl.
Ustawiliśmy go na obrazku, on w tym momencie przez przeglądarkę będzie pobrany.
I chciałbym ten obrazek wstawić na stronę, więc możemy się odwołać do kdocument.body, mamy tutaj taki skrót,
więc nie musimy wyszukiwać poprzez querySelector body.
Możemy się odwołać do document.body i następnie appendChild to już znsasz, img.
Zobaczmy, jak to będzie wyglądać na naszej stronie.
No i jak widzisz taki obrazek został tutaj wstawiony.
Gdybyśmy podejrzeli, to okazuje się że ma on src ustawione na ten ciąg, który tutaj podałem.
Na sam koniec chcę Ci pokazać jeszcze jedną rzecz, otóż gdybyś chciał pobrać wszystkie atrybuty jakie
ma dany element, aby sprawdzić np. ich ilość, to możesz to zrobić utworzymy zmianą attrs i odwołamy
się na przykład do elementu img.attribute.
Mamy tutaj taką oto właściwość i ona jest obiektem tablicopodobnym, więc odwołajmy się tutaj
do attrs.
No i jak widzisz, mamy tutaj coś takiego jak NamedNotMap.
To wygląda trochę jak tablica.
Możemy tutaj się odwołać do lenght i np. zobaczyć ile taki obrazek ma atrybutów.
Teraz ma jeden atrybut, bo mamy tutaj tylko src i moglibyśmy się odwołać do attrs np. zero, czyli
do pierwszego atrybutu, jak możesz tutaj zobaczyć.
Kod
Praca z atrybutami · 1 min
var link = document.querySelector(".link"),
href = link.getAttribute("href");
link.setAttribute("href", "http://eduweb.pl");
link.removeAttribute("class");
var button = document.querySelector("button");
button.setAttribute("disabled", true);
button.removeAttribute("disabled");
var img = document.createElement("img");
img.src = "http://i.imgur.com/P2zuQvY.png";
document.body.appendChild(img);
var attrs = img.attributes;