JavaScript: Tworzenie obiektów i praca z właściwościami
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, pokażę ci w jaki sposób w języku JavaScript tworzymy obiekty i jak możemy pracować z ich
właściwościami.
Mianowicie jak te właściwości odczytywać, dodawać oraz usuwać.
Przechodzimy od razu do kodu i będziemy chcieli nowy obiekt utworzyć, aby mieć referencje do tego obiektu,
aby na nim można było pracować.
To oczywiście musimy zapisać go w zmiennej, więc napiszemy tutaj var i nazwa zmiennej,
będzie to person, czyli osoba i teraz nowy obiekt tworzymy za pomocą takich nawiasów klamrowych.
Gdybym sobie tutaj to zakończył średnikiem, to mamy poprawny zapis, gdzie utworzyliśmy pusty obiekt.
Wcześniej takie nawiasy klamrowe pojawiały się tam, gdzie mieliśmy bloki kodu np. w instrukcji warunkowej
if albo w pętli.
Tutaj jednak działa to troszeczkę inaczej, chociaż jest to podobny zapis.
Tak tworzymy nowy tak zwany Object Literal.
Chciałbym od razu przypisać pewne właściwości do tego obiektu, dlatego przejdziemy tutaj wewnątrz i będę
chciał tutaj kilka różnych właściwości utworzyć i będzie to na przykład firstName.
Możemy to zapisać w ten sposób i napiszemy tutaj
Tomasz. Jak widzisz tutaj przypisujemy wartość prostą.
Jest to string, wartość prymitywna.
A tutaj po dwukropku tą wartość podajemy.
Do tej pory poznałeś jeden z operatorów przypisania.
Był to właśnie znak równa się, które widać tutaj.
Natomiast dwukropek również jest znakiem przypisania.
Tak jak tutaj widzisz, w przypadku obiektów i tutaj nie dajemy znaku równa się, bo to by nam wygenerowało
błąd. W obiektach używamy dwu kropka.
Natomiast, aby podać teraz kolejną właściwość musimy tutaj postawić przecinek, a nie średnik.
Czasami może się zdarzyć, że postawisz z przyzwyczajenia średnik, ale wówczas w konsoli przeglądarki pojawi
się błąd. Ustawimy średnik i teraz wpisze sobie
Np. lastName
i niech to będzie Kowalski.
Jak widzisz, dzięki temu że utworzyliśmy sobie taki obiekt person, to możemy w nim grupować różne jak
gdyby zmienne, dlatego że firstName czy lastName jest to nic innego, jak po prostu, zmienne, które znajdują
się w tym obiekcie i które my nazywamy
z angielskiego properties, a w języku polskim są to po prostu właściwości obiektu.
I teraz jeszcze jedną, którą sobie dodamy będzie to age i wpiszemy tutaj
32.
Teraz co jest bardzo ważne, myślę że się tego domyśliłeś już, że możemy tutaj przypisywać dowolne konstrukcje
jakie są w języku JavaScript dostępne. Tutaj użyliśmy stringu. Tutaj również, a tutaj mamy typ number,
czyli 32.
Tu oczywiście moglibyśmy tworzyć tablicę czy przypisywać wywołania funkcji.
Nie ma to znaczenia. Wszystkie konstrukcje dostępne w JavaScript'cie możemy wewnątrz obiektu tak samo jak wewnątrz
zmiennych przechowywać.
Skoro mamy już utworzony obiekt, to przejdźmy do przeglądarki. Odświeżę tutaj i w konsoli wpiszemy person.
Jak widzisz po wciśnięciu Enter mamy informację Object, bo jest to obiekt i wszystkie właściwości obiektu,
które podałem i teraz chciałbym ci pokazać, w jaki sposób możemy do tych właściwości się odwołać,
jak możemy je odczytywać.
Jeżeli mamy pod zmienną person taki właśnie obiekt, to aby odczytać firstName, odwołujemy się do person
kropka
firstName,
w taki oto sposób. Jak widzisz, odwołaliśmy się to Tomasz.
Podobnie będzie z lastName czy z age i również możesz to teraz zobaczyć.
Odwołujemy się do tego tak jak gdyby to była zmienna. Gdybyśmy operatorem typeof chcieli sprawdzić
person.age,
to pamiętaj, nie odwołujemy się jakby to person, ale do tego, co to zostanie zwrócone i tu powinniśmy zobaczyć
number.
Działa to dokładnie tak, jak gdyby zmienne były przechowywane wewnątrz takiego kontenera.
Wróćmy teraz do kodu i chciałbym Ci wspomnieć o jeszcze jednej rzeczy.
Mianowicie, jeżeli chodzi o zapis tych zmiennych, które tutaj się znajdują, tych właściwości to obowiązują
tutaj zasady podobne jak przy tworzeniu zmiennych.
Natomiast, co jest bardzo istotne. Możemy tutaj użyć na przykład znaku minus, gdybyśmy chcieli napisać
first-name, ale wszystko musimy wówczas objąć w taki oto sposób, czyli będzie to po prostu string.
W ten sposób możemy zapisywać first-name czy nawet możemy stworzyć taki oto zapis i również nam to zadziała.
Możesz się jednak domyślić, że nie moglibyśmy się do tego bez problemu odwołać tutaj,
po odświeżeniu jako pierson i first-name.
Z tego powodu, że tutaj ten minus zostanie potraktowany właśnie jako operator odejmowania.
No i jak widzisz mamy Not a Number.
Dlatego, że chcieliśmy się odwołać do person.first,
jest to undefined i od tego odjąć name.
Ani taka zmienna ani taka zmienna nie istnieje.
Dlatego mamy drugi sposób pobierania właściwości z obiektów, który wygląda następująco, person
i tutaj zamiast kropki podajemy taki oto zapis,
czyli to są nawiasy kwadratowe
i tutaj podajemy string z nazwą właściwości.
I tutaj możemy wpisać first-name i w ten sposób odwołaliśmy się do
Tomasz, jak widzisz. Natomiast nie musimy tego zapisywać jako stringi.
Tak jak tutaj, aby się w ten sposób do tego odwoływać.
Jak widzisz lastName zostało zapisane tak po prostu tutaj wpisane.
I również gdybym się do tego odwołał podając to jako string.
Czyli w ten sposób to również
nam to zadziała. Natomiast gdybym tutaj podał lastName, w ten sposób, to myślę że już na tym etapie domyślasz się
jakby to działało.
Szukali byśmy gdzieś wyżej zmiennej lastName i chcielibyśmy tutaj podstawić to, co ona przechowuje.
Więc gdybyśmy wcześniej tutaj utworzyli sobie zmianą lastName, która miałaby taką wartość, to wówczas
moglibyśmy tutaj wpisać person lastName, dlatego że odwołali byśmy się do tego co przechowuje ta zmienna.
A więc działałoby to dokładnie tak, jak byśmy cały ten string wpisali tutaj.
No i zobaczmy również nam to w dobry sposób zadziałało.
Wiesz już jak odczytywać właściwości obiektu. Natomiast teraz pokażę ci, jak możemy te właściwości przypisywać.
Dlatego że tutaj od razu je przepisałem tworząc obiekt, ale tak jak ci pokazałem, możemy stworzyć pusty obiekt
i dopiero później uzupełnić go właściwościami.
Zrobimy to niżej. Mianowicie odwołamy się do person i skoro po kropce możemy np. odwołać się do lastName
to możesz się domyślić, że tutaj możemy to zmodyfikować przypisując jakąś inną wartość.
Nie chcę zmieniać tej wartości, która jest tutaj zapisana dlatego nadamy nową wartość. Napiszmy sobie tutaj
Job i niech to będzie np. programista.
Jak widzisz tutaj już odwołujemy się poprzez znak przypisania poprzez ten operator równa się, a nie poprzez
dwukropek, więc dwukropek kropek będzie tylko wewnątrz takiego obiektu.
I teraz gdybyśmy chcieli sobie zrobić console.log person. Zobaczmy, to widzisz że mamy również tutaj coś
takiego jak job, programista.
Przy okazji również warto, abyś wiedział, że wewnątrz obiektów właściwości nazywane są czasem kluczami,
a ich wartości to są po prostu wartości, czyli to będzie key,
a to będzie value i obiekt przechowuje tzw. key value pair, czyli po prostu pary, gdzie mamy klucz oraz jego
wartość.
Nie zdziwię cię zapewne, jeżeli powiem ci że moglibyśmy również w ten sposób przypisać sobie job, programista.
Podając tutaj po prostu string i następnie równa się tak jak odczytujemy,
tak również możemy przypisywać i zadziała to dokładnie w taki sam sposób, jak możesz tutaj zobaczyć. Teraz
ostatnia rzecz, którą chciałbym ci jeszcze pokazać.
Jest to usuwanie właściwości obiektu w JavaScript'cie
mamy coś takiego jak operator delete.
Jeszcze zanim do niego przejdę,
być może zastanawiasz się, dlaczego mamy tutaj ostrzeżenie.
Z tego powodu, że tutaj na dole możesz zobaczyć komunikat.
Jest zapisane, że lepiej jest odwoływać się po kropce do przypisywania takich oto właściwości.
Natomiast taka notacja tak naprawdę jest przydatna tylko po to,
jeżeli gdzieś wcześniej zmiennej będziemy przechowywać taki string i będziemy chcieli tutaj tę zmienną
podstawić, dlatego że nie moglibyśmy tej zmiennej podstawić po kropce i wpisać tutaj job,
jeżeli mielibyśmy wcześniej utworzoną zmienną job, to w ten sposób nie działa.
Dlatego tutaj możemy się w ten sposób do tego odwoływać.
Wrócę jednak do tego zapisu i przejdę do operatora delete.
Gdybym chciał usunąć całkowicie wiek, który tutaj się znajduje to mogę skorzystać z operatora delete
i później podajemy to, co chcemy usunąć, a więc person
kropka, age.
W ten sposób powinniśmy całkowicie usunąć taki klucz age, który znajduje się w obiekcie. Odświeżę sobie
stronę i mamy tutaj console.log obiektu.
Jak widzisz first-name, lastName oraz job, a age już się tutaj nie znajduje.
Jak zatem widzisz, możemy tworzyć obiekty i od razu przypisywać im pewne właściwości.
Możemy również tworząc obiekt, utworzyć go jako pusty obiekt i później przypisywać do niego właściwości
na kilka różnych sposobów, a także możemy je usuwać.
I ostatnia rzecz w tej lekcji, którą chciałbym Ci pokazać. Mianowicie przekazywanie obiektów przez referencje.
i co to oznacza?
Oznacza to tylko tyle, że gdybym utworzył zmienną person2
i tutaj odwołam się do person, to jak wcześniej już widziałeś na zmiennej, gdyby ta zmienna person przechowywała
string to on zostałby, po prostu, skopiowany do tej zmiennej.
Natomiast tutaj dzieje się inaczej.
Tutaj podstawiona jest referencja do tego obiektu, który tutaj został utworzony.
Co to oznacza?
Mianowicie tylko tyle, że gdybym teraz odwołał się do person2 np. age równa się 23, to jeżeli przejdziemy
do przeglądarki. Odświeżę i odwołam się do person. po prostu, to mamy tutaj coś takiego jak age.
Natomiast ja nie przypisałem tego do person, ale do person2.
Niemniej jednak person 2 kieruje właśnie poprzez referencje na ten obiekt, który tutaj się znajduje.
I odwołując się poprzez person2.age, odwołujemy się tak naprawdę do tego obiektu, więc gdybyśmy cały
ten obiekt chcieli skopiować, musielibyśmy to zrobić w nieco inny sposób, który pokazywałem w przypadku
pętli for in.
Kod
Tworzenie obiektów i praca z właściwościami · 1 min
var person = {
"first-name": "Tomasz",
lastName: "Kowalski",
age: 32
};
person["job"] = "programista";
delete person.age;
console.log(person);
var person2 = person;
person2.age = 23;