JavaScript: Operatory arytmetyczne
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 dowiesz się wszystkiego o operatorach arytmetycznych, jakie występują w języku JavaScript.
Przejdźmy od razu do kodu i wyjaśnię Ci, na czym cała rzecz polega.
Stworzę dwie zmienne - number1 i będziemy tutaj mieli wartość 2 oraz number2 i będzie tutaj 4. To już wiesz,
jak to działa i przypisaliśmy sobie wartości liczbowe.
Teraz tworzę trzecią zmienną nazwę ją res1, czyli result1. Będzie to, po prostu, rezultat pewnego działania,
które teraz zrobimy i napiszemy tutaj number1 plus number2.
I co teraz tutaj się dzieje?
Jak widzisz, w te miejsca, już ci o tym mówiłem, zostaną podstawione wartości, które znajdują się tutaj.
Moglibyśmy jak najbardziej wpisać je tutaj bezpośrednio, czyli dwójkę, czwórkę, ale zapisałem je wcześniej
w zmiennych.
Posługujemy się tymi zmiennymi, bo właśnie do tego one służą.
Ale ciekawa rzecz jest tutaj pośrodku. Jest to znaczek plusa i mówiąc już tej terminologii programistycznej,
jest to operator. Wcześniej mówiłem o operatorze typeof i widziałeś, że używamy go pisząc słowo typeof,
spacja i korzystaliśmy z wartości, aby zobaczyć jakiego typu jest ta wartość.
I właśnie plus również jest operatorem. Ten plus,
jak możesz się domyślić, tak jak w kalkulatorze, doda nam dwie wartości, które zostaną podstawione.
Czyli gdybyśmy patrzyli na kolejność, to tak naprawdę tutaj zostanie podstawiona jedna wartość, tutaj
druga, a później zostaną dodane i suma właśnie tych obliczeń zostanie zapisana w tej oto zmiennej.
Zobaczmy jak to będzie wyglądać, przy okazji jeszcze Ci powiem że nie ma absolutnie żadnego znaczenia
czy zapiszemy to bez spacji czy nie.
I właśnie teraz widzisz, dlaczego nie możemy w nazwach zmiennych używać na przykład plusów, bo byłoby
to potraktowane jako już druga zmienna, ale lepiej to zapisać tak, aby było to czytelne.
Oczywiście po przejściu do przeglądarki, po odświeżeniu odwołamy się do zmiennej res1 i ma ona wartość
6.
Jak mogłeś się spodziewać - dodaliśmy te dwie cyfry.
Teraz pokażę Ci rzecz również ciekawą. Mianowicie gdybym stworzył zmienną res2
i dodał sobie tutaj dwójkę oraz piątkę, ale zapisaną w takiej formie. Zdajesz sobie sprawę, że to nie jest wartość
liczbowa, to jest ciąg znaków, w którym możemy dowolne znaki wpisywać.
Wpisałem tutaj piątkę.
No i co teraz się stanie, czy będzie jakiś błąd, jeżeli będziemy chcieli cyfrę, czyli typ number dodać
do typu string?
Zobaczmy co się stanie.
Przejdę do przeglądarki.
Odwołamy się do res2.
No i okazuje się, że błędu nie ma, ale mamy string, bo mamy tutaj cudzysłowy
wartości 25.
I co teraz tutaj się stało?
To co tutaj zobaczyłeś z użyciem operatora plus, jest to konkatenacja. Ja teraz to skomentuje.
Tutaj również u góry umieściłem komentarz, że chodzi o dodawanie i ten sam plus.
Dokładnie w taki sam sposób użyty tutaj,
nam konkatenuje
ciąg znaków.
Gdybyśmy przeszli teraz do przeglądarki, to mogę ci pokazać, że mamy jeden ciąg znaków. Napiszemy np. Jan
i możemy do tego dodać drugi ciąg znaków spacja Kowalski
w ten sposób i co zostanie nam zwrócone?
Jan Kowalski, czyli bezpośrednio możemy na stringach operować tym operatorem plusa i te string ze sobą
łączyć.
Inaczej mówiąc konkatenować.
A jeżeli liczbę chcemy dodać do string'a, to jak widziałeś również jest to łączone i w tym przypadku
mieliśmy tutaj 25.
Tutaj wrzuciłem kolejny kawałek kodu, abyś już nie musiał czekać aż go napisze. Jest to odejmowanie, sprawa
dosyć oczywista. Używamy tutaj znaczka minusa. Jest to operator minus i od number1 odejmiemy number2, czyli
od 2 odejmiemy 4. Możemy sprawdzić jaki będzie tego rezultat.
Odświeżam oczywiście,
res3 mamy wartość minus 2.
Jeżeli chodzi o minus, to nie spełnia on już jakiegoś innego specjalnego zadania tak jak plus.
Nie możemy od ciągów znaków odejmować innych ciągów znaków,
w ten sposób jak możemy je łączyć za pomocą plusa. Mówimy o operatorach arytmetycznych, więc na pewno
nie zdziwi cie, jeżeli zapisze coś takiego jak mnożenie. Napiszemy res4 i number1. Będziemy chcieli
pomnożyć, a więc znak gwiazdki. Ponownie spacja tutaj nie ma znaczenia,
razy
number2, czyli te zmienne które mamy u góry i zobaczymy tutaj rezultat, res4, jest to 8.
Myślę że nie jesteś zaskoczony.
Teraz, co by się stało gdybyśmy chcieli tutaj również jeszcze to wszystko pomnożyć przez jedynkę, ale
zapisaną jako string.
Zobaczmy. Odświeżmy raz jeszcze, wpiszemy res4.
Jest to 8.
Czyli możesz zobaczyć, że w tym przypadku string został skonwertowany na zwykłą liczbę, na typ number i
zostało to wszystko pomnożone przez tę jedynkę i wszystko jest w porządku.
Natomiast, co by się stało, gdybyśmy napisali tutaj res5, czyli kolejna zmienna i 5 chciałbym pomnożyć
przez taki ciąg znaków, asdf, czyli nie jest to już jedynka, tego się nie da skonwertować na typ number
i zobaczmy co to będzie. Odświeżam, Wpiszemy res5 i zobacz, typ o którym ci mówiłem,
NaN, czyli Not a Number. Z wyniku naszych obliczeń wyszło nam Not a Number, czyli tutaj parser JavaScript'u nie
był w stanie stworzyć jakiejś innej liczby.
Kolejna sprawa jest to dzielenie.
I tutaj również number2 możemy podzielić przez number1.
W ten sposób. Tak wygląda operator dzielenia.
Tutaj jedynka oczywiście. Sprawdzimy w konsoli
res6,
co to będzie? I jak widzisz jest to 2.
Wszystko jest OK.
Gdyby z takiego dzielenia wyszła nam liczba zmiennoprzecinkowa, to również bez problemu zostałaby ona
zapisana.
Kolejnym operatorem arytmetycznym jest operator modulo, inaczej mówiąc reszta z dzielenia.
Wygląda to następująco. Zapiszemy tutaj res7, czyli rezultat siódmy i np. szóstkę będziemy chcieli operatorem
modulo, jest to nic innego jak znaczek procenta.
Będziemy chcieli zrobić 6 modulo z 3 i zobaczymy jaki będzie tego rezultat,
res7.
Jak widzisz jest to 0, dlatego że reszta z dzielenia jest to w tym przypadku 0.
Dzielimy 6 przez 3.
Wynik mamy 2 i 0 reszty. Natomiast możemy teraz zrobić res8 zapiszemy tutaj 6 modulo 4.
I sprawdźmy teraz jaki będzie rezultat,
res8.
Jak widzisz jest to dwójka - 6 dzielone przez 4 jest to 1 i reszta 2.
Do czego to może być przydatne?
Ja jeszcze w tym kursie ci pokażę.
I teraz kolejna rzecz, jest to kolejność działań. Jak JavaScript wykonuje tutaj działania?
Otóż dokładnie tak samo jak byliśmy uczeni na matematyce.
Czyli gdybyśmy tutaj zapisali może najpierw komentarz i zrobimy zmienną res9 równa się i zapiszemy
tutaj 2 plus 2 razy 4.
Możesz się domyślić że najpierw 2 razy 4 zostanie obliczone.
Będzie to 8 i zostanie to dodane do 2, czyli powinniśmy tutaj mieć 10. Sprawdzimy to tutaj, res9.
Jest dziesiątka, wszystko się zgadza natomiast kolejność działań możemy zmieniać.
Gdybyśmy tutaj wpisali res10, czyli kolejna zmienna i zapisze tutaj to co wyżej,
ale w nawiasach możesz zobaczyć, razy 4 to będziemy mieli 4 razy 4.
Sprawdźmy to sobie dokładnie 4 razy 4 równa się 16, a więc kolejność działań możemy zmieniać nawiasami okrągłymi.
Dowolną ich ilość możemy zapisać ile będziemy potrzebowali i tutaj jeszcze jakieś kolejne obliczenia.
Ostatnia rzecz w przypadku operatorów arytmetycznych, którą chciałbym Ci pokazać, po części są to też operatory
przypisania.
Wygląda następująco.
Gdybyśmy chcieli do zmiennej, którą mieliśmy na samej górze czyli np. number2 dodać jeszcze jakąś wartość
i zapisać to tutaj.
No to jak możemy to zrobić? Odwołamy się do number2 i możemy tutaj napisać number2, nie ma problemu.
Tutaj zostanie podstawiona wartość, która się tutaj znajdowała 4 i dodamy do tego 2 i jaka jest tutaj kolejność?
4 zostanie podstawione. Dodana 2, czyli 6 i dopiero wówczas to wszystko zostanie przypisane do number2,
czyli nadpiszemy wartość 4, która tam się znajduje.
Gdybyśmy teraz odświeżyli i wpiszemy number 2, to jak widzisz, mamy tutaj wartość 6, a na samej górze była
to wartość 4.
Ale jak możemy taki zapis skrócić?
Otóż możemy to bez problemu zrobić. Napiszmy tutaj numer2 plus równa się 2.
I to oznacza dokładnie to, co zobaczyliśmy wyżej.
Oznacza to, że chcemy aby do zmiennej number2 przypisać to, co już się tam znajduje plus 2.
To jest odpowiednik tego, co mamy tutaj wyżej, więc to mogę wykomentować.
I znowu powinniśmy tutaj zobaczyć szóstkę,
kiedy odwołam się do number2.
Dokładnie tak się dzieje, jeżeli chodzi o te operatory przypisania, to nie tylko plus równa się, ale także
pozostałe. Są tutaj, jak widzisz, możliwe do użycia, a więc plus równa się minus równa się razy równa się
dzielone równa się i modulo równa się.
Gdybyśmy wartość, która tutaj się znajdowała w number2, czyli np. 4 chcieli pomnożyć przez 4
i przypisać tutaj, to moglibyśmy napisać number2 razy równa się 4.
Mam nadzieję, że to rozumiesz. Poeksperymentuj sobie z tymi znakami, które dokładnie w tym miejscu
ci zapisałem.
No i zapraszam Cię do kolejnej lekcji.
Kod
Operatory arytmetyczne · 1 min
// Dodawanie
var number1 = 2;
var number2 = 4;
var res1 = number1 + number2;
// Konkatenacja
var res2 = 2 + "5";
// Odejmowanie
var res3 = number1 - number2;
// Mnożenie
var res4 = number1 * number2 * "1";
var res5 = 5 * "asdf";
// Dzielenie
var res6 = number2 / number1;
// Reszta z dzielenia
var res7 = 6 % 3;
var res8 = 6 % 4;
// Kolejność działań
var res9 = 2 + 2 * 4;
var res10 = (2 + 2) * 4 ;
// Przypisywanie z obliczeniem
// number2 = number2 + 2;
number2 += 2; // +=, -=, *=, /=, %=