JavaScript: Operatory arytmetyczne

0:00W języku JavaScript, podobnie jak w każdym

0:02innym języku programowania, mamy do czynienia również z operatorami

0:06arytmetycznymi, czyli takimi, które pozwalają nam dodawać, odejmować czy np.

0:10mnożyć. Będę chciał Ci je w miarę szybko pokazać

0:13w tej lekcji. Więc utworzymy sobie na początek dwie zmienne number1 i number2.

0:21I teraz będziemy mogli sobie utworzyć stałą tym razem,

0:25a tutaj zrobiłem to z użyciem let, bo później będziemy jeszcze to modyfikować.

0:29Tutaj oczywiście nie może być żadnej spacji w nazwie zmiennej.

0:32Teraz utworzę sobie stałą res1 jak rezultat 1. Będę chciał w niej przechować

0:38rezultat dodawania tych dwóch liczb, czyli 2 i 4.

0:42Więc pierwszym z operatorów arytmetycznych będzie operator dodawania, czyli +.

0:48No i korzystamy z niego

0:49w ten sposób, wpiszemy number 1 i number 2.

0:52Oczywiście tutaj nie musielibyśmy

0:53podstawiać zmiennych, tu można literalnie podstawić jakąś wartość.

0:57To nie ma żadnego znaczenia.

0:58W każdym razie w ten sposób możemy dodać do siebie dwie liczby.

1:02Operator plusa ma również jeszcze jedno zastosowanie w przypadku stringów. Bo

1:06tutaj ważne jest to, że te dwie zmienne przechowują liczby, czyli typ

1:11number i wtedy operator plusa wie, że ma je po prostu dodać.

1:15Natomiast jeżeli użyli byśmy tego operatora na stringu, czyli na tekście,

1:20to ten tekst zostanie połączony. I mogę Ci to teraz pokazać.

1:24Napiszemy sobie const res2 jak rezultat drugi

1:28i spróbujemy sobie dodać może na początek 2 jako number + 5 jako string.

1:36W niektórych językach programowania taka operacja byłaby po prostu błędem.

1:40W języku JavaScript stety albo niestety tak nie jest

1:43i zobaczmy sobie po zapisaniu tego w konsoli przeglądarki

1:47jaki będzie wynik takiej operacji. Zobaczmy.

1:51No i wygląda na to, że jest to 25.

1:53Co możemy tutaj zaobserwować.

1:55Natomiast czy rzeczywiście jest to 25?

1:58Zobacz dodaliśmy 2 i 5 i tak naprawdę to

2:00zostało ze sobą scalone, a nie w żaden sposób dodane matematycznie.

2:04I teraz, jeżeli byśmy sobie sprawdzili jakiego typu wartość jest przechowywana w

2:08tej stałej res2, to możemy to zrobić z użyciem operatora typeof.

2:12Skoro tu mamy dostęp do res2, tu już

2:15widzimy, że jest to 25, ale możemy skorzystać z takiego specjalnego operatora

2:19w języku JavaScript, który nazywa się typeof i tutaj podajemy jakąś dowolną

2:23wartość albo wpisaną bezpośrednio, albo np.

2:25poprzez zmienną.

2:27Więc jeżeli zapytamy jaki jest typ

2:29przechowywany w stałej res2, zobaczymy, że jest to string.

2:33Natomiast w przypadku res1 pokaże Ci typeof res1

2:38jest to number. Czyli tutaj zawsze

2:40zwracana jest wartość taka string, ale mamy w niej napisane number albo string

2:46albo jeszcze inne wartości jakie mogą być przechowywane.

2:49Czyli to Ci pokazuje, że możemy również za

2:51pomocą operatora plusa scalać ze sobą jakieś teksty,

2:54natomiast w przypadku gdybyśmy przekazali

2:56i number i tutaj string to zostanie to ze sobą połączone.

2:59Natomiast częściej używa się tego

3:00oczywiście, żeby połączyć ze sobą jakieś dwa teksty np.

3:03imię + spacja + nazwisko.

3:06Pamiętaj jednak, że ten operator plusa i

3:08na typach liczbowych może operować i na typach właśnie takich jak ciągi znaków.

3:14Natomiast jeżeli to pomieszane ze sobą to

3:16jest to jak widzisz również scalane a nie dodawane matematycznie.

3:19Jeżeli chodzi o inne operatory to oczywiście mamy również, jak możesz się

3:23domyślić operator do odejmowania, więc możemy powiedzieć number1 minus number2,

3:29następnie możemy pomnożyć,

3:34number 1 i gwiazdka to znaczy mnożenie number 2.

3:37Tutaj te białe znaki w języku JavaScript nie mają znaczenia,

3:40jeżeli zapiszesz tak będzie poprawnie,

3:42jeżeli byś zrobił coś takiego, też.

3:44Przyjmuje się, żeby tutaj zrobić jedną spację, żeby to po prostu było czytelne.

3:48Mamy również operator dzielenia number np.

3:542 podzielimy przez number 1.

3:56W tej sytuacji wygląda to w następujący sposób.

3:59Mamy również operator modulo i jest to reszta z dzielenia, więc możemy napisać

4:03rezultat 6 i tutaj podstawię sobie literalnie np.

4:066 modulo, czyli taki procent, 3.

4:09To nam zwraca resztę z dzielenia,

4:10w tym przypadku tutaj powinna być wartość 0, bo 6 dzielone przez 3

4:14wiemy, że żadnej reszty nam nie zostawia, czyli res 6

4:18zobaczmy jest tutaj przechowywana wartość 0.

4:22W ten sposób np. możemy sprawdzać czy mamy do czynienia z

4:24liczbą parzystą czy nie, bo jeżeli będziemy mieli jakąś liczbę tutaj

4:28powiedzmy w zmiennej byłaby jakaś liczba 6 i zrobimy modulo 2, to jeżeli nie zostanie

4:33żadna reszta z dzielenia, to mamy do czynienia z liczbą parzystą.

4:37Pokażę Ci tutaj jeszcze rezultat siódmy,

4:41że możemy z modulo skorzystać na przykład na 6 modulo z 4.

4:45I co nam to zwróci?

4:48Jak widzisz 2 dlatego, że 6dzielone na 4 to jest 1 i

4:52pozostałość to jest 2, czyli ta reszta z dzielenia właśnie nam tutaj zostaje.

4:55Mamy również operator podnoszenia do potęgi.

4:58On jest dostępny od ES6 czy jest

5:00stosunkowo nowy w języku JavaScript, więc możemy powiedzieć np.

5:042 i dwie takie gwiazdki 2 to będzie 2 do potęgi drugiej.

5:09Zobaczmy, res8 sobie

5:12teraz wyświetlimy jest to 4 oczywiście,

5:14więc w ten sposób możemy podnosić jakąś liczbę do potęgi.

5:18No i mamy jeszcze takie operatory

5:20przypisania od razu ze zmianą wartości i będę chciał Ci to pokazać.

5:24Natomiast właśnie z tego powodu tutaj mamy utworzone z let zmienne, a nie stałe.

5:29Czyli jeżeli chcielibyśmy zwiększyć

5:31wartość tej zmiennej number na przykład o 2, czyli mamy 2, chcemy do

5:36tego dodać 2, to na to jest kilka sposobów.

5:39Możemy napisać, że number 1 równa się number 1 + 2 i zawsze ta prawa strona

5:45najpierw jest ewaluowana, czyli tu zostanie podstawiona dwójka stąd zostanie dodane 2

5:50to zwróci nam 4 i przypiszemy to do tej zmiennej.

5:53Ale wykomentuję to i pokażę Ci jak można to skrócić.

5:56Możemy napisać number 1 + równa się,

5:59tutaj nie może być spacji

6:00pamiętaj, 2.

6:02I to jest dokładnie to samo co wyżej, czyli zmieniamy wartość tej zmiennej o 2.

6:07No i dlatego też ważne jest, żeby taka zmienna przechowywała wartość liczbową,

6:10żeby to mogło się poprawnie odbyć.

6:12Jeżeli chodzi o resztę takich operatorów to ja je wypiszę tutaj w komentarzu.

6:17Bo mamy również minus równa się, mamy następnie razy równa się,

6:22szczerze mówiąc ja chyba nigdy z tego nie korzystałem.

6:25W takiej mojej codziennej pracy nie było to chyba nigdy potrzebne, więc

6:28jest taki operator, ale niekoniecznie będziesz z niego często korzystał.

6:32Mamy dzielone równa się i oczywiście

6:36modulo równa się. Czyli wszystkie z nich robią dokładnie to

6:40samo co tutaj, a więc zmieniają wartość operując na tej samej wartości.

6:45Czyli minus równa się

6:46to będzie tak, jakbyśmy odjęli wartość, którą tutaj podamy razy

6:50równa się to tak jakbyśmy chcieli pomnożyć

6:52to co jest w środku razy jakąś wartość itd.

6:54Czyli np. number 1 razy równa się 2

6:57to znaczy weźmy to, co już tam jest,

6:59pomnożymy to razy 2 i przypiszmy z powrotem do tej zmiennej.

7:03Na sam koniec chcę Ci jeszcze pokazać, że JavaScript zachowuje pewną kolejność

7:08działań, taką jak w matematyce, jak nas uczono w szkole.

7:11Czyli na przykład jeżeli byśmy sobie tutaj utworzyli zmienną rezultat 9 i zrobię

7:16tutaj 2 + 2 razy 4, to najpierw zostanie pomnożone dwa razy 4, a potem dwójka

7:23zostanie do tego dodana, więc taka byłaby kolejność działań.

7:26Natomiast kolejność działań można zmienić za pomocą nawiasów.

7:30Więc zróbmy sobie res 10 i zrobimy tutaj coś takiego jak dwa plus dwa razy 4.

7:37W tym momencie zostanie 2 dodane do 2 i dopiero pomnożone razy 4.

7:41A więc pamiętaj, że kolejność działań można wymusić za pomocą nawiasów. No i że

7:45oczywiście tutaj nie zawsze będziemy wstawiać bezpośrednio liczby.

7:48Tutaj każdą zmienną oczywiście moglibyśmy podstawić jak najbardziej.

7:54To zatem tyle, jeżeli chodzi o operatory arytmetyczne.

7:56Będziemy z nich jeszcze wielokrotnie

7:57korzystać w tym kursie, przynajmniej z części z tych, które tutaj widzisz.