Podstawy Programowania: Tworzenie zmiennych

0:00W tej lekcji napiszemy swój pierwszy kod,

0:03który będzie wykorzystywał koncepcję zmiennych.

0:06Natomiast zanim to zrobimy to chciałbym na początku utworzyć sobie tutaj w naszym

0:10projekcie katalog 01 i plik. Więc robię to w ten sposób: nazwiemy katalog 01 a plik

0:16index.js. I teraz o ile zakończenie tego pliku, czyli rozszerzenie to powinno

0:21być zawsze js o tyle nazwa pliku nie ma znaczenia.

0:24Możesz go sobie nazywać Script.js albo main.js, nie ma to większego

0:30znaczenia ja będę te pliki nazywał po prostu jako index.

0:33Więc utworzymy sobie taki pierwszy katalog i zrobię to tylko teraz w kolejnych

0:38lekcjach już tutaj będę taki katalog i plik miał żeby nie marnować czasu.

0:42I jeszcze jedna rzecz, którą będę chciał

0:43uruchomić to jest ten dodatek Quokka, który wcześniej zainstalowaliśmy więc Command

0:47Shift P lub Control Shift P na Windowsie i wpiszemy Quokka Start on Current File.

0:54Dzięki temu będziemy mieli fajne

0:55podpowiedzi, gdzie będziemy widzieli wynik naszego kodu.

0:59I teraz jeszcze przejdziemy do terminala.

1:01Jestem w tym katalogu kurs, musimy przejść

1:04do katalogu 01, czyli wpisać cd 01, po utworzeniu tego katalogu.

1:09Jeżeli wpisze ls to nam pokaże, że plik index się w tym katalogu znajduje.

1:13I teraz będziemy chcieli ten plik po prostu uruchomić, ale za pomocą nodemona

1:17jak już ci wcześniej pokazałem po to, aby za każdym razem kiedy zapiszemy ten plik był

1:22on od nowa wykonywany i abyśmy wynik tego wykonania widzieli tutaj.

1:26Więc tak sobie to uruchomimy.

1:27I co ważne w kolejnych lekcjach ja już to

1:29będę robił przed rozpoczęciem takiej lekcji, więc nie będę tego za każdym razem

1:33pokazywał na ekranie. Pamiętaj żeby to zrobić u siebie.

1:37Przechodzimy zatem do pliku i tutaj będę chciał utworzyć pierwszą zmienną. I teraz w

1:42różnych językach programowania są różne zapisy do tworzenia zmiennych. W

1:45przypadku JavaScriptu można to zrobić na kilka sposobów np.

1:49z użyciem słowa kluczowego let. Więc

1:51piszemy let i potem wpisujemy dowolną nazwę np.

1:55let zmienna, ale ja będę chciał tutaj napisać imię.

1:59Można również użyć polskich znaków, ale nie

2:01jest to dobra praktyka więc napiszmy coś takiego let imię równa się i napiszę tutaj

2:06Jan. Na końcu linijkę zakończę średnikiem

2:09i już tłumaczę co tutaj się wydarzyło.

2:12A więc słowo kluczowe let określa, że będziemy tworzyć zmienną.

2:16Następnie podajemy nazwę takiej zmiennej,

2:19następnie podajemy znak równości i tak naprawdę jest to znak przypisania,

2:23a konkretnie operator przypisania i później podajemy wartość. W tym przypadku w

2:27cudzysłowach podałem wartość tekstową, która jest o wartości Jan.

2:31Jest to można powiedzieć typ tekstowy, o

2:34których jeszcze będziemy mówić w kolejnych lekcjach a wartość

2:38tego tekstu jest to Jan.

2:39Na końcu zakańczamy linijkę średnikiem. Więc

2:42tak to wygląda i teraz słów kilka na temat nazewnictwa zmiennych.

2:46Otóż zmienne w języku JavaScript konkretnie możemy nazywać prawie dowolnie,

2:51ale muszą się one zaczynać zawsze albo od dolara albo od podkreślnika albo od liter

2:57od A do Z wielkich lub małych. Więc nie może się zmienna zaczynać od cyfry np.

3:03nie może być tutaj 3,

3:04ale gdybym tutaj zrobił 3 już w porządku.

3:07Taka zmienna też będzie w porządku.

3:09Nie ma problemu, podobnie z dolarami. Mogę

3:11tutaj użyć dolara czy podkreślnika w środku również jest to poprawna nazwa.

3:15Natomiast na początku nie może być cyfry.

3:17Może być dolar, podkreślnik lub litera wielka lub mała

3:21i co ważne później mogą być również te same znaki i dodatkowo cyfry.

3:26Natomiast nie może być tutaj znaków takich jak np.#.

3:29Czyli ważne żeby te zmienne nazywać zazwyczaj po prostu literami od a do z no i

3:34cyframi, ale nie na początku takiej zmiennej.

3:37OK no i teraz utworzyliśmy taką zmienną i

3:39jeżeli tutaj napiszemy tylko imię czyli jakby odwołamy się do tej zmiennej to Quokka

3:43czyli ten dodatek, który uruchomiliśmy nam podpowiada że jest to Jan.

3:47Natomiast jeżeli zapisze tam plik i nodemon tak

3:49naprawdę go tutaj wykonał z użyciem środowiska node, nic się nie wyświetliło.

3:54No bo tak naprawdę nic nie zrobiliśmy

3:55czyli nasz program komputerowy kiedy się wykonywał zapisał sobie w pamięci

3:59operacyjnej taką wartość jak Jan, no i następnie zakończył się usuwając te dane z

4:04pamięci, bo nic z tymi danymi nie zrobiliśmy.

4:07I teraz jeżeli chcemy coś wyświetlić na

4:08ekranie tutaj lub gdybyśmy taki skrypt JavaScript uruchamiali

4:12na stronie internetowej, to byśmy to zobaczyli w specjalnej konsoli przeglądarki, to

4:17możemy wpisać coś takiego jak console.log tutaj nawiasy

4:21i w nawiasach podajemy wartość czyli to co chcemy wypisać.

4:25Tak naprawdę log to jest pewnego rodzaju

4:26funkcja, o funkcjach jeszcze bardzo dokładnie będziemy mówić później.

4:30Na razie warto wiedzieć tyle, że to wypisze taką zmienną na ekranie,

4:35tutaj Quokka znowu bez uruchamiania tego programu już pokazuje że będzie to Jan,

4:39jeżeli zapisze, tym razem pojawia się to tutaj.

4:43Jak zatem widzisz zmienne pozwalają nam

4:45przypisać do nazwanej przez nas zmiennej jakąś wartość. I z tej zmiennej możemy

4:51korzystać później przekazując ją w różne miejsca.

4:54Natomiast z tym przekazywaniem to stanie się

4:56bardziej jasne wtedy, kiedy będziemy korzystać np.

4:59z funkcji. Utwórzmy sobie kolejną zmienną którą nazwiemy nazwisko,

5:04I przypiszę jej również wartość tekstową

5:06Kowalski. W ten sposób i teraz mamy dwie takie zmienne. Oczywiście również mógłbym ją tutaj

5:11wypisać, ale nie będę tego w tym momencie robił.

5:14Zrobimy za to rzecz inną. Mianowicie tutaj wypiszemy sobie imię

5:19a pod spodem pokażę Ci jak można wartość zmiennej zmienić. Bo właśnie tutaj

5:24sama jej nazwa, czyli zmienna, to jest taka struktura, której wartość może się zmieniać.

5:28Więc napiszmy imię równa się i napiszemy Marcin. I teraz już nie podajemy tutaj

5:34słowa let bo taka zmienna została już wcześniej utworzona.

5:37Zauważ, że nawet edytor mi tutaj od razu podświetla, że nie możemy zadeklarować

5:42ponownie zmiennej, która jest już zadeklarowana.

5:45Jeżeli zapisze, zauważ że nodemon wykonał nasz program i zwrócił nam błąd.

5:50O błędach jeszcze powiemy sobie później, natomiast widzimy, że nasz program nie

5:53działa poprawnie dlatego, że źle skorzystaliśmy z zapisów języka, a więc nie

5:58możemy drugi raz utworzyć zmiennej o tej samej nazwie.

6:00Ale jeżeli zrobimy to w ten sposób to nie

6:03tworzymy jej od nowa tylko po prostu przypisujemy jej inną wartość.

6:08I teraz jeżeli byśmy zrobili console.log(imię) tutaj nam Quokka od razu pokazuje, że będzie

6:13to Marcin. Jeżeli zapisze dokładnie tak samo stało się tutaj.

6:16A więc ten program jest wykonywany z góry na dół można powiedzieć linijka po linijce.

6:21Tworzymy zmienną imię, zapisujemy taką wartość w pamięci operacyjnej, tworzymy

6:25kolejną zmienną nazwisko jest taka wartość. Wypisujemy wartość zmiennej imię na ekranie

6:30jest to Jan. Następnie zmieniamy tę wartość i wypisujemy i

6:33teraz ta wartość jest inna. Więc na tym

6:36etapie, można powiedzieć, że w tym momencie w kodzie, w tej linijce nie wiemy już, że

6:40wcześniej ta zmienna miała wartość Jan. Ta wartość w pamięci operacyjnej komputera

6:44została po prostu nadpisana. Pokażę Ci teraz, że możemy tworzyć również

6:49zmienne, które są tak naprawdę stałymi. Często zamiennie się o tym mówi, że jest to

6:54utworzenie zmiennej, ale tak naprawdę jest to stała i pokażę Ci czym się różni.

6:58Możemy napisać const zamiast let i stworzyć taką jakby zmienną nazwisko, ale

7:03poprawnie powinniśmy mówić że jest to stała.

7:05Ona działa dokładnie tak samo. Moglibyśmy ją wypisać tutaj w konsoli itd.

7:10Natomiast ma jedną bardzo ważną cechę. Otóż takiej zmiennej stałej czyli stałej tak

7:16naprawdę nie możemy nadpisać. Jeżeli zrobimy nazwisko równa się np.

7:20Nowak zauważ że nawet bez uruchamiania tego programu Quokka, czyli ten nasz dodatek od

7:25razu nam podpowiad,a że nie możemy przypisywać do stałych.

7:28I tutaj edytor również nam mówi, że nie możemy tego zrobić. Znowu byłby to błąd i

7:33nasz program nie działałby poprawnie. Bo taka jest idea deklarowania stałych.

7:37W tym kurs jeszcze zobaczysz bardzo często będziemy takie stałe deklarować.

7:40Zawsze wtedy kiedy my z góry wiemy, że chcemy tam przechowywać jakąś wartość i

7:44chcemy mieć pewność, że nigdzie się ona nie zmieniła. Jeżeli przez przypadek w naszym

7:47programie gdzieś będziemy próbowali napisać to program nie będzie działał i

7:51będziemy wiedzieć, że coś zrobiliśmy nie tak.

7:53Natomiast zmienne tworzymy wtedy kiedy wiemy, że taką wartość chcemy zmieniać.

7:58Tutaj wydaje się, że nie jest to najlepszy przykład.

8:00Po co zmieniać takie imię.

8:01Ale w tym kursie jeszcze wielokrotnie zobaczysz przykłady, gdzie te zmienne

8:05będą musiały być zmieniane, na przykład wyobraź sobie, że mamy jakąś zmienną gdzie

8:09wstawimy wartość zero, o czym powiemy jeszcze później, a potem będziemy chcieli

8:12ją zwiększać stawiając tam kolejne wartości kiedy będziemy wykonywać np.

8:16jakieś operacje dodawania itd.

8:19Na koniec pokażę Ci jeszcze jedną rzecz, otóż moglibyśmy sobie utworzyć zmienną

8:24kopiaImię i zauważ że napisałem to tak że tutaj mam wielką literę.

8:29To jest tak zwana notacja camelCase. Żeby nie pisać w ten sposób, żeby to było

8:33bardziej czytelne to robimy tak w niektórych językach programowania,

8:37niektórzy programiści tworzą np.

8:39zmianę w ten sposób. W JavaScript również byłoby to poprawne, ale nie jest to

8:43można powiedzieć taka praktyka, która jest w tym języku przyjęta.

8:46Tutaj piszemy w notacji camelCase, a więc tak i dlaczego powiedziałem kopiaImię? Dlatego, że chciałbym tutaj przypisać imię.

8:53Zauważ, że nie zrobiłem tego w cudzysłowach, a

8:56więc nie pisałem literalnie wartości imię tylko odwołałem się do innej zmiennej.

9:01Podobnie jak tutaj tą zmienną przekazaliśmy, tak samo przypisałam ją tutaj.

9:05I to oznacza tylko tyle, że utworzyłem nową

9:07zmienną o nazwie kopiaImię, która przechowuje dokładnie taką samą wartość

9:12jak imię, czyli w tym przypadku będzie to Marcin.

9:14Jeżeli wypiszemy to w konsoli,

9:18zapisze,

9:20OK tutaj mamy cały czas błąd bo nie powinniśmy

9:22tutaj nadpisywać wartości stałej, więc pokażę Ci jedną rzecz.

9:26Możemy na początku takiej linijki napisać

9:29takie dwa // i to tworzy nam komentarz, a więc w takim komentarzu możemy wpisywać

9:33sobie dowolne rzeczy na przykład jakieś podpowiedzi dla nas, albo możemy wykomentować

9:37jakiś kod i ten kod wtedy nie będzie w ogóle brany pod uwagę,

9:41więc nie będzie nam generował błędu. Ok.

9:44No i teraz widzimy, że wypisaliśmy Jan, Marcin oraz Marcin. Z tego właśnie powodu, że do

9:48tej zmiennej przypisaliśmy aktualną wartość poprzedniej zmiennej czyli zmiennej imię.

9:54Wiem, że na początku te koncepcje mogą się

9:56wydawać zamawiane, ale nie chcę w tej lekcji zbyt dużo czasu poświęcać zmiennym

9:59i stałym bo będziemy je cały czas wykorzystywać jeszcze w tym kursie i

10:03będziesz miał mnóstwo okazji żeby zobaczyć jak to wszystko wygląda w praktyce.

10:08W tej lekcji chciałem po prostu pokazać

10:09jak w przypadku języka JavaScript tworzymy zmienne.

10:12Pamiętaj, że jest to konstrukcja, która w

10:14każdym języku programowania jest dostępna natomiast w innych językach

10:17tworzenie zmiennych może wyglądać trochę

10:19inaczej niekoniecznie ze słowami let czy const.

10:22Czasami nawet tworzymy zmienne tak jak w

10:24języku PHP nie używając żadnego słowa kluczowego, tylko tam nazywamy

10:29zmienną poprzez dolar i piszemy zmienna i od razu przypisujemy jej jakąś wartość.

10:34Także sposoby tworzenia zmiennych w

10:36różnych językach mogą być różne ale jak wiesz czym są i jak działają zmienne

10:40odnajdzie się bez problemu w każdym języku programowania.