JavaScript: Tworzenie zmiennych
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 pokażę Ci, w jaki sposób w języku JavaScript tworzymy zmienne.
Przejdziemy sobie od razu do kodu i możesz zauważyć, że ten sam plik, który już w sekcji poprzedni ci pokazywałem
mam tutaj otwarty. Jest to index.html i na samym dole tego pliku mamy podlinkowany plik
scripts.js.
Tenże plik znajduje się tutaj, obok w katalogu js i mam ten plik otwarty tutaj i właśnie w tym pliku
będziemy sobie pracować.
Na początek jeszcze zanim pokażę ci jak tworzymy zmienne, to chcę pokazać ci komentarze, które są również
bardzo istotne w kontekście, w ogóle programowania, ale również w języku JavaScript.
Otóż gdybyś chciał oprócz kodu tworzyć sobie komentarze, co jest dobrą praktyką, aby dla siebie lub dla
innych programistów zapisywać jakieś ważne informacje, to możemy na dwa sposoby to w języku JavaScript
wykonać. Pierwszy rodzaj komentarza jest to komentarz w jednej linijce i robimy go za pomocą dwóch slash'y
i tutaj tekst dowolny możemy dla siebie wpisać i cała ta linijka już do samego końca będzie wykomentowana.
Gdybyśmy tutaj wpisali nawet jakiś kod JavaScript, to on nie zostanie w ogóle wykonany. Natomiast po tej
stronie takiego komentarza możemy wpisać np. tę funkcję alert, którą już wcześniej pokazywałem.
Ona będzie aktywna,
co widzisz też w moim edytorze, jest to podświetlone, ale obok niej mamy już komentarz.
To jest jedna sprawa. Natomiast drugi rodzaj komentarza, jest to komentarz blokowy i on wygląda następująco.
Mamy tutaj slash,
następnie mamy gwiazdkę, znowu mamy gwiazdkę i znowu slash.
I taki komentarz możemy w bardzo wielu linijkach mieć zapisany.
Nie ma żadnego problemu. Tutaj mi się domknął, OK i może sobie kod komentować w taki oto sposób.
Czyli te dwa sposoby są do tego, aby komentować swój kod. OK.
Teraz przejdźmy już do tworzenia zmiennych.
Pokazałem ci w lekcji o zmiennych, że
na początek używamy słowa kluczowego var
I tak też zrobimy.
A więc var i teraz podajemy nazwę zmiennej.
Będę chciał utworzyć zmienną, która przechowuje imię więc nazwę ją sobie imie.
Nie używam tutaj polskich znaków.
I tak, w ogóle, tylko w tej lekcji będę używał polskich nazw zmiennych, żebyś wiedział w którym miejscu
jest ta nazwa. Natomiast od kolejnej lekcji będę starał się korzystać z angielskich nazw zmiennych, bo
jest to również dobra praktyka, aby tworzyć zmienne w języku angielskim,
gdybyśmy tym kodem dzielili się z innymi osobami, więc mamy słowo kluczowe var, nazwę naszej zmiennej
i następnie równa się, czyli znak przypisania i teraz po tej stronie możemy podać dowolną wartość, jaka
jest dostępna w JavaScript'cie. Ja podam ciąg znaków w cudzysłowach.
W kolejnej lekcji jeszcze wytłumaczę Ci, na czym polega taki ciąg znaków, ale na razie wpiszemy tutaj
Jan.
No i teraz ostatnia rzecz, która jest potrzebna, aby to wszystko było poprawnie zapisane.
Jest to znak średnika,
na samym końcu linijki.
Jeśli go usunę, możesz zobaczyć, że mój edytor podpowiada mi, że mamy tutaj jakieś ostrzeżenie.
Nie będzie to błąd w kodzie, w tym przypadku, ale jest to ostrzeżenie, że powinniśmy użyć średnika, a w
niektórych przypadkach nie będzie to również błąd,
jeżeli jakiś kod będzie poniżej. Tak wygląda deklaracja zmiennej i od razu do tej zmiennej przypisujemy
wartość Jan.
Zapiszę to i chciałbym przejść do tego pliku w przeglądarce. Ja już to wcześniej zrobiłem i ten plik
odświeżę i teraz będę chciał ci pokazać w przeglądarce Google Chrome,
gdybyś również w niej był, że możemy tutaj prawym przyciskiem kliknąć i wybrać Inspect Element albo
w języku polskim Zbadaj element i przejdziemy do konsoli w tym miejscu i w tejże konsoli możemy wykonywać
dowolny kod JavaScript.
Ja jeszcze o tych narzędziach deweloperskich w tym kursie będę mówił, ale na chwilę obecną chciałbym
żebyś wiedział, że skoro tę stronę sobie tutaj wczytaliśmy a na niej mamy taki oto skrypt z js, to
ta zmienna którą utworzyliśmy, w tym momencie będzie dla nas dostępna z poziomu tej konsoli, a więc imie. Utworzyliśmy
zmianą imie, więc jeśli tutaj wpisze imie i wcisnę Enter to, jak widzisz, wartość Jan jest dla nas zwracana.
Wróćmy jednak do kodu, pokażę ci teraz jak jeszcze w inny sposób możemy tworzyć zmienne.
Gdybyśmy chcieli utworzyć drugą zmienną np. nazwisko to możemy znowu wpisać var nazwisko równa się
np. Kowalski.
Natomiast możemy to zrobić również krócej, a więc tutaj usuniemy średnik postawimy przecinek i tutaj
możemy usunąć słowo kluczowe var i zostawić to w ten sposób, a więc to słowo kluczowe var będzie się
odwoływało zarówno do tej nazwy imie jak i do nazwy nazwisko.
Możemy tutaj sobie zrobić wcięcie tabulatorem, aby to ładnie wyglądało, no i jak widzisz, dopiero tutaj mamy średnik.
I w tym momencie dwie zmienne
sobie zadeklarowaliśmy.
Co jest jeszcze ważne w języku JavaScript,
to tzw. białe znaki czy spacje albo tabulatory nie mają znaczenia.
Gdybyśmy chcieli to zapisać w ten sposób, na przykład, to również będzie to poprawna deklaracja zmiennych,
ale nie wygląda to oczywiście najlepiej. Niemniej jednak, jak widzisz, możemy sobie dowolnie formatować
ten kod, aby był dla nas jak najbardziej czytelny.
Przejdźmy teraz do kolejnej sprawy.
Co by się stało, gdybyś utworzył zmienną, bez używania słowa kluczowego var.
Możemy zrobić np. zmienną wiek i przypisać jej wartość 23.
Powiedzmy w ten sposob.
I czy mamy tutaj jakiś błąd?
Otóż nie.
Gdybyśmy przeszli do przeglądarki. Odświeżę, to będziemy mogli do zmiennej wiek się odwołać.
No i jak widzisz, mamy tutaj wartość 23.
Natomiast, w tym przypadku, jeżeli nie użyjemy słowa kluczowego var, to ta zmienna zostanie przypisana
do obiektu globalnego.
Ja jeszcze o tym w tym kursie będę mówił kiedy porozmawiamy sobie o obiektach, a więc jeżeli chcesz utworzyć
zmienną to zawsze powinieneś używać słowa kluczowego var.
Natomiast możemy to zrobić w ten sposób var wiek i tutaj usunąć całkowicie przypisanie wartości. Również
wszystko jest w porządku. Utworzyliśmy zmienną o nazwie wiek, która na razie ma niezdefiniowaną wartość i
poniżej możemy napisać wiek, równa się 23.
I w ten sposób do tej zmiennej już wcześniej zadeklarowanej, przypisujemy wartość.
Teraz nie będzie to już zmienna globalna, ale będzie to właśnie ta zmienna która tutaj jest widoczna.
Kolejna sprawa myślę że jest oczywista, ale chcę Ci o niej powiedzieć. Jest to odpisywanie wartości zmiennej.
Właśnie dlatego tę konstrukcję nazywają się zmiennymi, a nie stałymi, bo możemy zmieniać ich wartości.
Jeżeli tutaj przy pisaliśmy imie równa się Jan, ale gdzieś niżej do tej zmiennej będziemy chcieli się
odwołać już bez słowa kluczowego var,
czyli w ten sposób - imie, to możemy tutaj napisać Maciej.
I nie będzie problemu.
Zmienimy wartości zmiennej. Gdybym teraz tutaj odświeżył i wpiszemy imie, to zauważ mamy wartość Maciej.
A wartość Jan bezpowrotnie została z tej zmiennej usunięta.
Jak już wspominałem w lekcji teoretycznej o zmiennych zmiennych możemy używać w dowolnym miejscu, w którym
również możemy podstawiać bezpośrednio takie wartości.
Co to oznacza, że jeżeli teraz chciałbym utworzyć nową zmienną i np. nazwę ją kopiaImie, w ten sposób
przy okazji zauważ, że wielką literą zapisałem i, jest to konwencja tzw. camelCase, jeżeli chcemy napisać
kilka wyrazów, to każdy kolejny wyraz zaczynamy od wielkiej litery.
Jest to również bardziej czytelne.
Teraz postawię znak równa się i nie muszę tutaj bezpośrednio przypisywać wartości na przykład Jan czy
Maciej, ale mogę posłużyć się wcześniej stworzoną zmienną np. imie.
Jeśli wpisze to w ten sposób, to mamy nową zmienną która nazywa się kopiaImie i przechowuje ona wartość,
w tym przypadku, Maciej i teraz co się stanie, zapisze to, przejdziemy do przeglądarki.
Odwołam się do kopiaImie. Zobacz, że zostało ono zwrócone Maciej.
Gdybym teraz chciał przypisać nową wartość np. Piotr, to mógłbyś pomyśleć, że w tym momencie odwołaliśmy
się do kopiaImie i następnie jakby do imie i zmieniliśmy tę wartość. Natomiast tak się nie dzieje. Gdybyśmy
teraz wpisali sobie imie, to nadal pozostaje to Maciej.
Dlatego, że w JavaScript'cie, ciągi znaków, o których powiem w kolejnej lekcji, czyli właśnie takie konstrukcje.
Są to wartości prymitywne i jeżeli tutaj przekazujemy taką wartość, to jest ona kopiowana w oto miejsce,
a nie jest tutaj przekazywane do niej referencje.
Czyli, jeżeli zmienimy wartość kopiaImie, to zmieniamy tylko tę wartość, która została wcześniej skopiowana.
Na koniec chcę ci pokazać jeszcze jeden ważny operator, który jest dostępny w języku JavaScript. Jest
to operator typeof,
z którego
czasami korzystać i jak on wygląda? Otóż możemy przejść do konsoli i wpiszemy sobie typeof.
Następnie stawiamy spacje i podajemy wartość albo np. zmienną. Możemy tutaj wpisać imie, wcisnę Enter.
Jak widzisz, mamy tutaj napisane string, czyli ciąg znaków.
W kolejnej lekcji o stringach właśnie będę mówił.
Ten operator jest bardzo przydatny, gdybyśmy chcieli zdeterminować wartość jakiejś zmiennej.
Ale to co nam zostanie zwrócone to zawsze będzie string i nie mam tutaj na myśli że tutaj będzie słowo
string,
ale wartość jaka zostanie zwrócona będzie to string,
bo gdybym tutaj napisał typeof 23,
w ten sposób, również będę o tym mówił później, to mamy zwrócone string, ale z wartością number.
A co to są stringi?
Pokażę ci już kolejnej lekcji.
Kod
Zmienne w js · 2 min
var imie = "Jan",
nazwisko = "Kowalski";
var wiek;
wiek = "23";
imie = "Maciej";
var kopiaImie = imie;