JavaScript: Tworzenie zmiennych

0:00W tej lekcji powiem Ci o tym, jak w języku JavaScript można tworzyć zmienne i stałe.

0:05I jak widzisz będziemy mieli już od teraz cały czas podłączony taki script main.js do

0:09naszej strony internetowej, którą sobie tutaj otworzyłem z użyciem Live Serwera

0:14i my nic nie będziemy na razie robić, co byłoby związane z samą stroną internetową

0:18po prostu potrzebowaliśmy środowiska, w którym chcemy uruchamiać kod JavaScript i

0:22mogliśmy wybrać albo przeglądarkę albo Node.js

0:25Ja wybrałem przeglądarkę, bo z nią będziemy jeszcze później pracować.

0:28Tak więc po prostu tutaj w konsoli będziemy widzieć wyniki naszych programów,

0:33a sama strona internetowa nie ma tutaj większego znaczenia.

0:36Natomiast później z użyciem skryptów będziemy oczywiście wpływać na to, co

0:39dzieje się już bezpośrednio na naszej stronie internetowej.

0:43W tej lekcji będę chciał Ci pokazać jak tworzy się zmienne, dlatego przejdziemy do

0:48tego oto pliku i utworzymy sobie pierwszą zmienną, którą nazwę imię.

0:52Co ważne, później w tym kursie będę używał

0:55już angielskich nazw, bo jest to preferowany sposób tworzenia kodu,

0:59natomiast w tej pierwszej lekcji chciałbym zrobić to po polsku, abyś wyraźnie widział

1:03gdzie jest ten identyfikator, który ja sobie sam nadaję, takie jak np.

1:07imię, a gdzie są poszczególne słowa,

1:10których używamy właśnie w języku JavaScript.

1:13Zatem najprostszy sposób, aby utworzyć

1:15zmienną w języku JavaScript to użycie specjalnego słowa kluczowego let i

1:19następnie podajemy nazwę tej zmiennej, więc ja ją nazwę imię.

1:23Moglibyśmy również tutaj użyć polskich znaków,

1:25to tak samo będzie działać. Więc zróbmy to w ten sposób.

1:28Następnie jest operator przypisania, czyli znak równa się i tutaj podajemy wartość,

1:33która ma być przechowywana pod właśnie identyfikatorem imię.

1:37Te wartości mogą być różne.

1:38O nich będziemy sobie mówić w lekcjach

1:40kolejnych, czyli jakie typy danych można reprezentować w języku JavaScript,

1:45natomiast na razie będę chciał sobie tutaj

1:46przypisać wartość tekstową w cudzysłowach i będzie to Jan.

1:50Następnie linijkę kończymy średnikiem,

1:53który w niektórych sytuacjach jest opcjonalny, a w niektórych jest wymagany,

1:57natomiast dobrą praktyką jest po prostu te wyrażenia średnikiem kończyć.

2:01Możemy sobie w tej samej linijce lub poniżej utworzyć kolejną zmienną np.

2:06nazwisko i przypiszemy

2:07tutaj wartość Kowalski. Zakończę średnikiem.

2:11Zauważ, że gdybym tutaj nie dał średnika nic nam się nie podświetla w edytorze,

2:14to oznacza, że nie ma żadnego błędu, ale jeżeli bym to zapisał w jednej linii

2:18już jakieś podświetlenia mamy dlatego, że byłby to błąd.

2:22Dlatego jeżeli tutaj dam sobie średnik może to być w jednej linii i żadnego błędu nie ma.

2:27Z tego powodu choćby dobrze jest kończyć takie wyrażenia średnikiem.

2:31I oczywiście lepiej jest to zapisywać w sposób, który dla nas będzie czytelny, ale

2:34z punktu widzenia języka JavaScript nie ma to znaczenia.

2:37Tutaj możesz zrobić tak możesz zrobić tabulatory,

2:40dla interpretera języka JavaScript nie ma

2:42to najmniejszego znaczenia, a takie znaczenie ma to w niektórych

2:45językach programowania. Czyli tam indentacja

2:47czyli te wcięcia mają kluczowe znaczenie

2:50w języku JavaScript one znaczenia nie mają.

2:52Jak widzisz. Zostawimy sobie to jednak w taki sposób.

2:55Myślę, że najbardziej czytelny.

2:57I teraz mając już te dwie zmienne możemy w

3:00naszym kodzie oczywiście się do nich odwoływać jak ten plik zapiszę

3:03i kiedy ten plik jest bezpośrednio podłączony do strony internetowej, to na

3:07tej stronie tutaj w konsoli będziemy do tych zmiennych mogli się odwołać.

3:11Czyli mogę napisać imię i to zwróci mi

3:13przechowywaną tam wartość Jan, a nazwisko zwróci mi Kowalski.

3:18Nie zawsze oczywiście jest to pożądane, abyśmy do zmiennych, które mamy tutaj w

3:21kodzie mogli się na stronie bezpośrednio odwoływać,

3:24ale to już jest temat związany z zakresem zmiennych, o którym powiemy później.

3:28Na razie jednak skupmy się na tym, jak te zmienne tworzyć.

3:32No i właśnie zobaczyłeś taki najprostszy

3:34sposób, czyli z użyciem słowa kluczowego let.

3:37Żeby nie wpisywać tych identyfikatorów takich jak imię i nazwisko tutaj w

3:41konsoli, tylko z poziomu naszego kodu je wypisać, to oczywiście możemy zrobić

3:45console.log imię i możemy zrobić drugi console.log

3:48nazwisko.

3:50Czyli jak możesz zobaczyć

3:53w kodzie JavaScript, do tych zmiennych odwołujemy się bezpośrednio

3:57właśnie w taki sposób. Nazwaliśmy sobie to imię

4:00i w całym naszym kodzie możemy się do tego odwoływać,

4:03a to sprawia, że dokładnie w to miejsce zostaje podstawiona wartość

4:06Jan. Zapisuje to no i oczywiście kiedy ten program się wykona to te dwa

4:11console.logi zwrócą nam tutaj to co te zmienne przechowywały.

4:15Kiedy utworzymy zmienną z użyciem let, to

4:18jak sama nazwa wskazuje możemy zmieniać jej wartość. Więc moglibyśmy teraz poniżej

4:22stwierdzić, że wartość zmiennej imię zmieniamy na np.

4:26Tomasz. Wtedy robimy to w ten sposób.

4:28Nie używamy już żadnego słowa kluczowego,

4:30ale po prostu odwołuje się do zmiennej i przypisuje jej nową wartość.

4:34Dokładnie tak to zrobię i jeżeli teraz

4:36zrobię console.log imie to tam jest już zupełnie inna wartość.

4:39Dlatego zobaczymy Jan Kowalski i następnie Tomasz.

4:44Kolejnym typem, który możemy utworzyć już

4:47niezmiennych, ale często mówi się o tym, że są to zmienne

4:50chociaż tak naprawdę nie powinno się używać tego nazewnictwa, bo są to stałe,

4:55są właśnie stałe. Czyli tworzymy jest z użyciem słowa const.

4:59Możemy utworzyć np.

5:00stałą, którą nazwę wiek i przypisze tutaj 30.

5:04Teraz przypisałem wartość liczbową, ale o tym jeszcze powiemy w kolejnych lekcjach.

5:08Mógłbyś również zapisać to w ten sposób.

5:10Nie ma to w tej lekcji znaczenia,

5:12ale utworzyliśmy coś podobnego jak zmienna z użyciem let, ale

5:17zrobiliśmy to z użyciem słowa kluczowego const.

5:20I teraz czym to się różni?

5:21Otóż jak utworzymy sobie stałą z użyciem

5:23const, to nie możemy zmieniać jej wartości.

5:26Czyli jeżeli chciałbym następnie

5:29napisać wiek równa się 31 to od razu zobaczymy, że mamy coś podświetlone.

5:34Jeżeli zapiszę uruchomimy ten program w przeglądarce to zauważ, że ten silnik

5:38JavaScript, który w przeglądarce wykonuje nasz kod zwrócił nam TypeError, czyli po

5:43prostu zwrócił nam błąd, który mówi, że nie możemy przypisywać do stałej.

5:49I właśnie po to tworzy się stałe, abyśmy w

5:51żadnym miejscu naszego programu nie mogli zmienić ich wartości np.

5:55przez przypadek.

5:56Dlatego zobaczysz w tym kursie, że w

5:58większości przypadków będziemy sobie tworzyć po prostu stałe, a tam gdzie

6:01będziemy potrzebowali mieć właśnie zmienną, czyli taką konstrukcję, gdzie my

6:05będziemy w którymś momencie zmieniać jej wartość

6:08będziemy korzystać z let.

6:10Na koniec powiem Ci, że jeżeli

6:12kiedykolwiek miałeś do czynienia z językiem JavaScript, to mogłeś zauważyć,

6:16że można tworzyć zmienne również z użyciem słowa var.

6:19Czyli mógłbym napisać np.

6:20var i powiedzmy zawód

6:23równa się programista i w ten sposób utworzyć zmienną.

6:27Pytanie czy to będzie działać?

6:28Jak najbardziej tak.

6:30I właśnie w ten sposób dawniej w języku JavaScript tworzyło się zmienne, ale od

6:34standardu ES6 mamy dwa nowe słowa, takie jak let i const, które mają wiele przewag

6:39nad var, nad którymi jednak teraz nie będziemy się skupiać, bo nie chcę na

6:43początku zarzucić Cię zbyt wieloma takimi smaczkami czy technikaliami.

6:48Zapamiętaj sobie, że możesz korzystać wyłącznie z let i const a var

6:52jest to coś, co było w starszych wersjach języka JavaScript i w zasadzie nie ma

6:55potrzeby, aby dzisiaj z tej konstrukcji korzystać.

6:59Ostatnią istotną rzeczą, którą chcę Ci

7:01powiedzieć jest to, jak możesz nazywać swoje zmienne.

7:03Ja je tutaj nazwałem po polsku.

7:05Użyłem samych jak widzisz liter.

7:07Natomiast nazwa zmiennej może się zaczynać od dolara,

7:10może się zaczynać również od podkreślnika lub od dowolnej litery.

7:15Nie może się natomiast zaczynać od liczb.

7:16Czyli nie mógłbym powiedzieć, że nazwę tę zmienną raz, dwa, trzy imię.

7:20Od razu nam tutaj edytor podświetla

7:22to byłby błąd, ale liczby mogą się

7:24znajdować w nazwie zmiennej, jednak nie na samym jej początku.

7:28Czyli mógłbym powiedzieć i123nie.

7:31To jest poprawna nazwa, Nie ma żadnego problemu.

7:34Więc po prostu sobie zapamiętaj, że możesz albo zaczynać od dolara.

7:37Niektórzy to preferują, bo np.

7:38w języku PHP zmienne tworzymy zawsze z użyciem tego dolara.

7:43W języku JavaScript nie jest to konieczne.

7:45Jest to zwykły znak, po prostu którego można użyć.

7:48Może być podkreśli nawet dwa podkreśli i to też będzie poprawne,

7:53nie ma problemu lub dowolna litera.

7:56Mogą to również być wielkie litery, czyli mógłbym to zrobić w

7:59ten sposób, ale język JavaScript zwraca uwagę na wielkość liter,

8:03więc jeżeli utworzę zmienną gdzie na początku jest duże i tak jak to zrobiłem

8:07tutaj i mamy imię, to wszędzie, gdzie się odwoływałem do imię,

8:11będę również musiał się odwoływać po wielkiej literze.

8:15Więc na to należy zwrócić uwagę i nie tylko

8:17pierwsza litera oczywiście może być duża czy wielka.

8:20Moglibyśmy zrobić w ten sposób.

8:22Czyli wszystkie takie kombinacje są możliwe.

8:24A więc na początku dowolna litera mała lub wielka, dolar lub podkreślnik,

8:29natomiast później mogą być również cyfry.

8:31To zatem tyle, jeżeli chodzi o sposoby tworzenia zmiennych.

8:33Zapamiętaj, że zmienne tworzymy z użyciem let i możemy zmieniać

8:37ich wartości, natomiast stałe tworzymy z użyciem const i ich wartości zmienić się

8:41nie da, bo to zgłasza nam po prostu błąd i nasz program przestaje działać.