JavaScript: Obiekt Number
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 króciutko omówimy sobie również konstruktor number, który dla nas jest dostępny podobnie
jak ten, który widziałeś w lekcji poprzedniej, czyli string.
Przechodzimy od razu do kodu i wiesz, że do tej pory tworzyliśmy liczby.
W ten sposób, że mogłem napisać number równa się np. 23.
I znowu była to wartość prymitywna i na takiej wartości,
znowu tak jak wcześniej przypadku stringów, możemy korzystać z różnych metod oraz właściwości, chociaż
jest to wartość prymitywna. Podobnie jak przypadku string. Ona w locie będzie konwertowana do obiektu. Natomiast
również możemy napisać number2 np. w ten sposób i odwołać się do new number i tutaj albo podać w ten sposób
number, co nie ma większego sensu
albo podać na przykład 23.
W ten sposób i znowu to zostanie z konwertowane do number i zwrócone tutaj.
Ale po co nam new.
No właśnie nie będziemy zazwyczaj z tego korzystać w ten sposób. Znowu, gdybyśmy typeof number sprawdzili,
to byłoby to object, natomiast możemy z tego korzystać tak jak ze string'u, czyli konwertować jakąś
liczbę, która jest zapisana w string'u na number.
Jeśli teraz sobie w console.log zrobimy typeof number, number2 konkretnie, to powinno to być właśnie number.
Zobaczmy. Dokładnie tak jest, chociaż podałem tutaj string. Natomiast pamiętasz, że pokazywałem takie metody
jak parseInt czy parseFloat.
Gdybyśmy w nich wpisali np. 23 złote, to 23 zostałoby z tego wyłuskane, ale czy tak dzieje się w tym momencie.
Zobaczmy, tutaj mamy number, ale zróbmy sobie tylko number2.
Jak widzisz, nie do końca, mamy tutaj Not a Number.
Czyli to nie działa w taki sam sposób, w jaki działa nam funkcja parseInt.
Warto o tym wiedzieć.
Teraz chce ci szybko pokazać kilka stałych, które są zapisane pod taką klasą,
pod takim konstruktorem. Wkleję teraz tutaj i wyświetlimy je w konsoli.
Nie są one często używane, ale mogą się przydać. Warto, abyś o nich wiedział.
Więc możemy się odwołać bezpośrednio do number i po kropce do MAX_VALUE.
Przy okazji warto, abyś wiedział, że w językach programowania często Jeżeli coś jest zapisane dużymi literami,
to oznacza że jest to stała
i nie możemy zmieniać jej wartości.
MAX_VALUE w tym przypadku, zwróci nam maksymalną możliwą reprezentowaną wartość w języku JavaScript.
Wartość numeryczną.
Zobaczmy jak to wygląda.
No i jak widzisz to jest maksymalna wartość numeryczna, jaka jest w JavaScript'cie reprezentowana.
Podobnie będzie z MIN_VALUE.
Możemy to od razu zobaczyć.
Jak widzisz, tak to wygląda, jeśli chodzi o NaN, to tutaj jest przechowywana referencja dokładnie do tego
samego, co przed chwilą zostało nam zwrócone.
Czyli gdybyśmy wpisali NaN, to jest dokładnie to samo, co tutaj pod number NaN. Jęsli odświeżę.
Jak widzisz NaN zostało zwrócone.
Jeśli chodzi o nagative infinity i positive infinity, jest to właśnie ujemna nieskończoność i dodatnia
nieskończoność.
Zobacz jak to wygląda.
No i dokładnie, jak ci pokazywałem już wcześniej, że mamy takie globalne zmienne jak właśnie infinity na przykład.
Gdybyśmy tutaj chcieli sprawdzić, czy one są ze sobą równe, to możemy to zrobić.
Porównujemy i tutaj tym operatorem strict equality.
Sprawdźmy czy infinity jest to to samo, co Number.POSITIVE_INFINITY.
TruE zostało zwrócone, a więc jest to dokładnie taka sama wartość.
Tak jak wspomniałem, z tych stałych czasami możemy skorzystać, natomiast jest jeszcze kilka metod, które
są dostępne na obiektach number i również na tych wartościach prymitywnych, które są w tle konwertowane
do obiektów i chcę Ci pokazać dwie z nich chociaż jest ich troszkę więcej ale nie są one często wykorzystywane.
Pierwsza z nich jest tu string.
Wygląda to następująco. Przy okazji warto abyś wiedział, że każdy obiekt w JavaScript posiada taką metodę
toString, natomiast niekoniecznie ona przyjmuje parametry, tak jak w tym przypadku, bo w przypadku number
ona inaczej działa. W drugiej części tego kursu bardzo dokładnie tłumaczę, skąd to się bierze, że każdy
obiekt taką metodę ma. Natomiast w przypadku liczb czyli typu number.
Tutaj do tej metody toString możemy podać wartość konkretnie jest to base czyli podstawa systemu w jakim chcemy
to zapisać.
Czyli jeżeli tutaj sobie napiszę toString 16, to chciałbym, aby ten number został skonwertowany na string.
W bazie szesnastkowej, czyli tzw. hexadecymalnej. Zobaczymy jak to wygląda.
n is not devined..
Ja tutaj napisałem number.
Zobaczmy, no i jak widzisz jest to 17. Natomiast, co jest ciekawe,
jeżeli byśmy to zrobili w ten sposób, mamy taką wartość jak 255, napiszemy tu string i chcemy tutaj 16,
to zostało nam zwrócone ff.
Być może wiesz, że w CSS np. podajemy wartości szesnastkowe i kolor biały jest to ffffff.
Czyli jak możesz zobaczyć, tak to działa.
A gdybyśmy podali 0, to byłby to kolor czarny.
I on tutaj zostanie na 0 skonwertowany.
Warto o tym wiedzieć. Przy okazji dlaczego zapisałem to w nawiasach.
Właśnie dlatego, że gdybyśmy się do 255 odwołali i do toString, to pomyślałbyś, że to zostanie skonwertowane jak
wspominałem w tle, na obiekt, ale nie tutaj będzie błąd.
I to jest z tego powodu, że po kropce pamiętasz możemy podawać wartości takie jak na przykład 0 czy
255.01
Coś w tym stylu.
Tutaj postawił kropkę.
Zobaczmy, to już nam to zadziałało.
Czyli, jeżeli opleciemy sobie to nawiasami, to bez problemu będzie to wtedy działać.
No i ostatnio z metod, którą chcę Ci pokazać jest metoda toFixed.
Wkleimy tutaj. Również odwołamy się do number i teraz zobaczmy, 23, toFixed 2, co zostanie nam zwrócone.
Jak widzisz, tym razem string został zwrócony w taki sposób.
I toFixed oznacza, że chcieliśmy mieć dwa miejsca po przecinku. Gdyby tutaj był jakiś bardzo długi string.
Na przykład w ten sposób zapisany. Odwołamy się do toFixed.
To tylko dwa miejsca po przecinku zostaną tutaj zapisane.
I to są już wszystkie metody, które chciałem ci pokazać.
Jest jeszcze troszkę więcej, ale nieczęsto z nich korzystamy.
Kod
Obiekt Number · 1 min
var number = 23.12334;
var number2 = Number("23");
console.log( Number.MAX_VALUE );
console.log( Number.MIN_VALUE );
console.log( Number.NaN );
console.log( Number.NEGATIVE_INFINITY );
console.log( Number.POSITIVE_INFINITY );
console.log( Infinity === Number.POSITIVE_INFINITY );
console.log( number.toString(16) );
console.log( number.toFixed(2) );