Podstawy Programowania: Tworzenie obiektów
dla Początkujących
6 godz. 26 min · JavaScript · Full-stack i Programowanie
Adam GospodarczykCzego się nauczysz
- Jak działają komputery?
- Po co nam programy komputerowe?
- Czym są algorytmy?
- Jak wyglądają programy "od środka"
- Czym są języki programowania?
- Dziedziny programowania
- Elementy wspólne dla różnych języków programowania
- Ścieżki rozwoju jako programista
- Praca programisty
- Wskazówki i porady
- Edytory kodu
- Programowanie w praktyce (JavaScript)
Od czego zacząć naukę programowania?
Programowanie to szeroka dziedzina, która nieustannie się rozwija. Rozpoczynając naukę możemy opierać się głównie na wskazówkach bardziej doświadczonych osób, bądź autorach kursów i nauczycielach. W praktyce najważniejsze na początku jest dobre zrozumienie tego, czym jest programowanie, jakie możliwości daje oraz jakie możemy wybrać ścieżki rozwoju. W tym kursie spojrzymy na programowanie z szerokiej perspektywy, dając Ci solidne podstawy do dalszej nauki.
Jaki język programowania wybrać?
To kolejne trudne pytanie, na które nie ma jednoznacznej odpowiedzi. Dobra wiadomość jest taka że języki programowania, podobnie jak angielski, niemiecki czy hiszpański mają cechy wspólne. Nie oznacza to że nauka jednego, da Ci dostęp do wszystkich ale poznasz ogólne mechanizmy, które spotkasz w niemal wszystkich pozostałych technologiach. W tym kursie skupiamy się właśnie na takich obszarach, opierając przykłady o obecnie najpopularniejszy język jakim jest JavaScript.
Jak wygląda praca programisty?
Być może zastanawiasz się jak dokładnie wygląda praca programisty? Czym różni się front-end od back-endu i czy wysokie umiejętności analityczne są wymagane niezależnie od obszaru programowania, którym się zajmujemy? Dodatkowo samo zostanie programistą to tylko początek drogi. Możliwości jakie przed nami stoją nie tylko są ogromne, ale również nieustannie się rozwijają, stawiając przed nami nowe wyzwania.
Od Teorii do Praktyki
Ten kurs podzielony jest na dwie części - teoretyczną, która przedstawi Ci szerokie spojrzenie na programowanie oraz praktyczną, w której samodzielnie będziesz w stanie przekonać się jak pisać programy z wykorzystaniem języka JavaScript - najpopularniejszego języka na świecie. To, że będziemy przerabiać przykłady w JavaScript, nie stanowi przeszkody a wręcz lepiej przygotuje Cię do pracy z innymi językami jak Python, C# czy C++ lub Kotlin. To wszystko ułatwi Ci podejmowanie decyzji dotyczących dalszej nauki i rozwoju jako programista.
Podstawy z Edytorem Kodu
W pierwszych lekcjach części praktycznej kursu dowiesz się jak skonfigurować środowisko pracy wraz z edytorem, w którym przyjdzie Ci pracować. Pomożemy Ci w dobraniu odpowiednich ustawień i wtyczek, które przyspieszą naukę i pomogą w lepszym zrozumieniu podstawowych koncepcji programistycznych. Krok po kroku dowiesz się jak przygotować środowisko i rozpocząć komfortową pracę.
Zmienne, funkcje, pętle...
Mimo, że będziemy pracować z JavaScript, posłuży nam on do przedstawienia najważniejszych koncepcji programowania w każdym innym języku. Nie będziemy uczyć się tworzenia stron i środowiska przeglądarki a jedynie przećwiczymy najważniejsze koncepcje języków programowania w środowisku konsolowym. Dzięki temu zdobyte umiejętności z łatwością przełożysz na inne języki jak Python, Java czy Swift, bo wszystkie posiadają identyczne konstrukcje, a poznać należy wyłącznie różnice.
Programowanie Obiektowe
OOP to jeden z najważniejszych paradygmatów programowania, który powinien poznać każdy aspirujący Programista. Dzięki temu będziesz mógł zdecydowanie lepiej zrozumieć możliwości i powiązania klas i obiektów, które tworzą programiści a także pisać kod, który jest prostszy i reużywalny. To koncepcja, którą także wyjaśnimy obrazowo w kursie. Oczywiście, poza teorią w kursie pokażemy Ci przykłady tworzenia funkcjonalnych klas w JavaScript.
Obsługa Błędów
Kolejną ważną koncepcją, którą musi znać każdy początkujący Programista jest praca z błędami - innymi słowy obsługa błędów lub debugowanie naszej aplikacji. To niezwykle ważne, bo oszczędzi Ci mnóstwa frustracji oraz wielu godzin rozpoznawania, co w kodzie nie działa poprawnie. Z kursu w praktyce dowiesz się, jak testować swoje aplikacje, łatwo wykrywać błędy i korzystać z narzędzi, które będą je dla nas wykrywać lub automatycznie poprawiać!
Jedyne źródło, którego potrzebujesz!
Ten kurs przygotowaliśmy tak, aby był fundamentem wiedzy o Programowaniu, którego używamy w wielu naszych ścieżkach na eduweb.pl. To znaczy, że kurs który masz przed sobą rozpoczyna ścieżkę Python, JavaScript, Ruby i wiele innych. Wiemy, że w sieci jest mnóstwo materiałów na temat podstaw programowania i chcieliśmy przygotować wyjątkowy kurs, który da Ci spokój w natłoku wielu informacji w sieci. Zaangażowaliśmy w to najlepszych autorów eduweb oraz naszym zdaniem jednych z najlepszych programistów w Polsce. To, co jest jednak najważniejsze - kurs omawia programowanie bardzo prostym językiem, dzięki czemu jest przystępny dla każdego!
Dla kogo jest ten kurs?
Kurs przeznaczony jest dla osób początkujących, które stawiają swoje pierwsze kroki na scieżce programisty lub programistki. Jednak skorzystają z niego także te osoby, które myślą o nauce programowania w celu uzupełnienia innych umiejętności, na przykład internetowi przedsiębiorcy, freelancerzy, UI/UX i web designerzy. Jeżeli czujesz się zagubiony lub przytłoczony dużą ilością często sprzecznych informacji - ten materiał pozwoli Ci szerzej spojrzeć na programowanie. To z kolei przełoży się na lepsze decyzje, które będziesz podejmować w kontekście swojego rozwoju. W kursie znajdziesz wskazówki i porady dotyczące efektywnej nauki programowania, które pomogą Ci szybciej zdobyć nowe umiejętności i pracę w zawodzie. Najważniejszą z nich jest fakt, że programowanie to dynamicznie rozwijająca się dziedzina, która wymaga od Ciebie nieustannej nauki. Zatem wypracowanie odpowiednich nawyków i technik nauki jest niezwykle istotne, niezależnie od miejsca w którym aktualnie się znajdujesz.
W tej lekcji pokażę Ci jak tworzyć obiekty
w języku JavaScript i to jest pojęcie, które może
różnie wyglądać w różnych językach programowania.
Dlatego tutaj skupimy się na tym jak to wygląda w JavaScript i potem ewentualnie
powiem Ci w jaki sposób może to wykonać w innych językach.
Ogólna idea jest taka, że możemy sobie
stworzyć jakąś strukturę, która w wewnątrz będzie miała trochę więcej danych czyli
tak jak stworzyliśmy już wcześniej tablicę i w tablicy mogliśmy zapisywać różne rzeczy i
one były pod odpowiednimi indeksami 0, 1, 2 itd.
To teraz możemy sobie stworzyć obiekt,
to będzie coś co będzie trochę jakby podobnie działać natomiast nie będzie
miało indeksu 0 1 2 3 tylko będzie miało nazwane klucze czyli będzie to taka
struktura gdzie jest klucz i wartość. Może na początek napiszemy sobie person czyli
stworzy taką stałą jak osoba, możesz dowolnie to nazywać i obiekty w
JavaScripcie tworzymy z użyciem takich oto nawiasów klamrowych.
Teraz utworzyłem pusty obiekt, który jest jak najbardziej poprawny ale jednak będę
chciał coś do tego obiektu zapisać więc możemy go sobie przełamać w ten sposób,
ale co ważne w języku JavaScript również będzie można to zapisać w jednej linijce.
Tutaj jakby te białe znaki nie mają znaczenia
czy to zrobimy tak, tutaj coś powpisujemy, język JavaScript o to nie dba, ale poprawnie
według praktyki powinno to wyglądać tak, że
otwieramy ten obiekt i w środku coś wpisujemy.
No i teraz będziemy sobie tutaj mogli w środku wpisać na przykład firstName
i nie podajemy już równa się czyli znaku przypisania ale wewnątrz obiektu robimy to
po dwukropku. I napiszemy np. Jacek.
I w ten sposób utworzyliśmy w tym obiekcie
taką jakby zmienną, którą nazwaliśmy tak jak chcieliśmy firstName
i ma ona wartość tekstową
Jacek. Więc jest to tak jakby taka zmienna tutaj wewnątrz. Teraz możemy utworzyć
kolejną ale musimy tu podać przecinek i w nowej linijce chociaż nie jest to wymagane
może to być w tej samej ale przecinek jest wymagany,
napiszemy sobie lastName znowu dwukropek i np.
Kowalski.
Czyli będziemy mieli jakby dwie takie zmienne wewnątrz tego obiektu.
Dodajmy sobie jeszcze trzecią. Napiszemy age jak wiek i wpiszemy tutaj wartość liczbową.
Co ważne w takim obiekcie możemy
przechowywać wszystkie typy danych jakie JavaScript oferuje.
Czyli tak samo jak do zmiennej mogliśmy przypisać cokolwiek
tak samo tutaj możemy przypisać cokolwiek. Moglibyśmy tu np.
utworzyć tablicę.
Nie ma żadnego problemu również by to działało poprawnie.
I co jeszcze super ważne.
Moglibyśmy też mieć jakąś zmienną np. firstName równa się Jacek
i wewnątrz takiego obiektu się do niej odwołać tutaj firstName.
I to wygląda bardzo dziwnie ale to oznacza tylko tyle, że wewnątrz obiektu tworzymy
klucz, który nazwaliśmy firstName i przekazujemy mu wartość zmiennej firstName.
Więc tu gdybyśmy po prostu zrobili np.
name wtedy byłoby to mniej jakby zagmatwane na pierwszy rzut oka,
to by oznaczało, że w tym obiekcie person tworzymy taki klucz name
i chcemy żeby miał on wartość taką jaką ma zmienna firstName.
Byłoby to Jacek ale również może to wyglądać tak samo
i te nazwy nie mają ze sobą nic wspólnego,
tu po prostu mówimy, że chcemy mieć pod kluczem firstName
to co akurat jest w zmiennej firstName.
Gdyby z kolei ta zmienna się nazwała Name,
no to tutaj musielibyśmy ją przekazać w ten sposób.
Warto o tym wiedzieć, że to można po prostu
przekazywać tak samo jak wszystkie inne rzeczy w JavaScripcie i możesz tutaj tworzyć
wewnątrz takiego obiektu tablicę itd cokolwiek tylko chcesz.
I teraz co z takim obiektem możemy zrobić.
Otóż zawarliśmy sobie wewnątrz obiektu kilka
jego właściwości bo tak będziemy je nazywać
i są to takie jakby zmienne wewnątrz.
Mamy tutaj tak naprawdę pary klucz wartość, klucz wartość, klucz wartość.
I teraz jak się odwiedzamy do person
kropka po kropce odwołujemy się do tych
wewnętrznych jakby zmiennych możemy napisać firstName
i to nam zwróci, tutaj nam powinno to pokazać,
że jest to Jacek. Zróbmy sobie console.log.
Ok w ten sposób i teraz widzimy, że jest to
Jacek. Czyli person kieruje na cały ten obiekt bo nazwaliśmy to person a po kropce
jakby wchodzimy do środka i odwołujemy się do firstName,
możemy do lastName czy do age. I to nam po prostu zwraca taką wartość.
Co ważne nie możemy nazywać zmiennych,
zapewne to już wiesz np. tak firstName
równa się Jacek.
Tak byśmy zrobić nie mogli dlatego, że
tutaj ta pauza byłaby traktowana jako minus.
Natomiast co ciekawe wewnątrz takich
obiektów możemy zmienne nazywać dowolnie jak chcemy czyli te
klucze ale wtedy muszą być one w cudzysłowach. Czyli gdybym zrobił coś takiego
nadal jest to dokładnie to samo ale jeżeli to zawre w cudzysłowach to wtedy mogę napisać
np. firstName albo nawet first name, w ten sposób i będzie to poprawne.
Natomiast w inny sposób trzeba się będzie do tego odwołać. Bo jeżeli normalnie
odwoływaliśmy się do .firstName, do tego co jest w środku, no to można by było pomyśleć,
że teraz możemy napisać person.first name, że to jest to samo.
Niestety nie. Podobnie nie możemy napisać tego w ten sposób również to nie zadziała.
Ale zadziała jeżeli odwołamy się do tego w takiej notacji.
Czyli jeżeli się odwołamy w nawiasach
kwadratowych do tego, tutaj mamy console.loga ale ja to przełamię może
w ten sposób bo możemy tak zrobić żebyś widział gdzie dokładnie
odwołujemy się do tego person, to jest tutaj
i w nawiasach kwadratowych do first name. Podałem po prostu klucz
i to mi zwróci Jacek. Więc można tutaj mieć również takie oto nazwy.
Do tego oczywiście można się odwoływać w
pewien sposób dynamicznie czyli gdybym tą wartość first name
przechowywał w takiej stałej klucz
no to mógłbym tutaj podać oczywiście klucz.
I często się zrobić w taki dynamiczny sposób.
Więc tu pod key zostanie to podstawione i wyłuska nam wartość
Jacek. Więc tak to wygląda w przypadku obiektów.
Co ważne do obiektów podobnie jak do tablic możemy dodawać nowe właściwości.
Czyli jeżeli obiekt jest już utworzony a chciałbym mu dodać właściwość np.
job czyli jakiś zawód tej osoby, tego Jacka to możemy napisać person i następnie kropka
job tak jak bym chciał odczytać właściwość, która jest w środku. Ale widzimy, że jej nie ma
więc mogę ją przypisać. Mogę napisać, że jest to programista, w ten oto sposób i
teraz jeśli byśmy zrobili console.log całego tego person
powinno on tak jak tutaj widzisz pokazać nam wszystkie jego właściwości.
Podobnie tutaj nam program fajnie to wypisze. Jest job programista. I podobnie można byłoby
się do tego odwołać w taki sposób czyli wpisać job no ale podawanie takiego
stringu tak jak przed momentem pokazałem raczej ma sens tylko wtedy jeżeli tutaj są jakieś znaki,
które normalnie nie byłyby dozwolone takie jak spacja czy np.
minus.
Zostawię to może w takiej formie. Jedną bardzo ważną rzeczą w języku JavaScript, o
której chciałbym teraz powiedzieć jest fakt, że obiekty
i też inne wartości nie prymitywne czyli inne niż string, number itd są przekazywane
przez referencje więc gdybym teraz utworzył zmienną czy w zasadzie to jest stała
person2 i nie tworzył tu nowego obiektu ale napisał, że chce żeby to było to samo co
person to można było pomyśleć, że teraz mam tutaj pod person2 dokładnie coś takiego
samego jak tu i mogę sobie tym manipulować. Oczywiście mogę.
Jeśli teraz powiem, że person2 np.
age = 50
i wyświetle console.log person2 zapiszemy żeby to zobaczyć to jak
najbardziej person 2 ma wszystkie te rzeczy, które Jacek i wiek 50.
Ale to co jest bardzo ważne jeżeli teraz
bym wyświetlał również person czyli ten pierwszy oryginalny obiekt to on również
będzie miał age 50 czyli również mu go zmieniłem.
To oznacza tylko tyle, że w języku
JavaScript obiekty i inne wartości, które nie są prymitywne, tablice również,
dokładnie tak samo to działa na tablicach są przekazywane przez referencje czyli
tworząc stałą person2 i mówiąc, że chcę żeby to było person to tak naprawdę tutaj
otrzymałem jakby taki wskaźnik to miejsca w pamięci gdzie znajduje się ten obiekt. I
teraz person2 kieruje na dokładnie to samo co person więc jeżeli zmienię coś na
person2 to zmieniam to również na person. To jest bardzo istotna rzecz.
Wykomentuje to na chwilę i pokażę Ci, że gdybyśmy operatorem porównania porównali
czy person równa się person2 to zwróci nam true.
A to oznacza nie tylko to, że w środku te
właściwości są takie same bo to nie jest sprawdzane tylko sprawdzane jest czy to
jest dokładnie ten sam obiekt, czy to kieruje na dokładnie to samo miejsce w
pamięci. Więc pokazało nam, że to jest true czyli to jest dokładnie ten sam obiekt.
Pokażę Ci teraz, że skoro można dodawać
właściwości do obiektów to można je również usuwać.
Czyli jeżeli dodaliśmy sobie np.
job a chcemy usunąć age to moglibyśmy to zrobić piszą tutaj np.
person.age
ale przed tym używając operatora delete.
To nam pozwoli usunąć całkowicie taką właściwość.
I teraz jeżeli byśmy sobie wyświetlili czy
to person czy person2 bez znaczenia zobaczymy to tutaj, to nie będziemy w środku już
mieli właściwość age bo została ona całkowicie usunięta.
Na koniec pokażę Ci jeszcze jedno zastosowanie takiego obiektu, które będzie
dla Ciebie znajome dlatego, że mieliśmy lekcje o instytucjach warunkowych gdzie w
instrukcji switch pokazywałem Ci jak możemy zamienić np.
cyfrę 1 na słowo jeden.
Pokażę Ci jak łatwo można byłoby to zrobić z użyciem również takiego obiektu dlatego,
że w obiekcie możemy mieć jak widzisz klucz i wartość. Więc zrobimy sobie to teraz,
ja te console.logi tutaj pousuwam żeby nam nie przeszkadzały.
Tutaj z prawej strony kliknę prawym przyciskiem wybiorę Clear żeby mieć czysto
i stworzymy sobie taką stałą, którą nazwę dict jak Dictionary
i będę chciał Ci pokazać, że jako klucz możemy tutaj użyć np.
cyfry 1.
Tak jak zmiennych nie mogliśmy nazywać od np.
jedynki czy w ogóle cyfr tak wewnątrz
takiego obiektu klucza możemy nazywać jak chcemy.
Więc kluczem może być tutaj string 1 albo może być sama jedynka,
nie ma to większego znaczenia. Czyli to jest
nasz klucz a jego wartość to będzie słowo jeden.
Jeżeli napiszę dwa to dodamy sobie dwa
i przy trójce napiszemy trzy. I być może pamiętasz jak mieliśmy właśnie
taką instrukcję gdzie sprawdzaliśmy czy number, tutaj jeszcze sobie utworzymy number teraz
1. Sprawdzaliśmy if, number równa się jeden
to wtedy chcieliśmy przypisać do word coś takiego jak 1 prawda.
Być może to pamiętasz. Teraz mając już coś
takiego taki słownik, można to w dużo prostszy sposób zrobić.
Czyli możemy utworzyć stałą word a więc
słowo i odwołać się teraz do dict czyli do naszego słownika i następnie w parze takich
nawiasów to co Ci pokazałem wyżej,
ok, teraz tego tutaj nie ma ale pokazałem Ci,
że można się tak odwołać bo nie możemy się odwołać tak
kropka 1,
to niestety nie zadziała ale w parze nawiasów kwadratowych możemy jeżeli tu
podamy 1 to wewnątrz tego obiektu dict, będziemy szukać klucza, który ma wartość 1,
on jest tutaj i zostanie nam zwrócona jego wartość. Czyli klucz wartość.
A więc jeżeli pod number mamy jedynkę to
możemy tu przekazać również to number i teraz w word powinniśmy mieć 1.
Spróbujemy zrobić console.log word.
Zobacz dokładnie mamy tutaj 1.
Jeżeli zmienimy tę wartość na dwa to będziemy tutaj mieli 2, 3 itd.
Jeżeli podamy czwórkę a nie ma tutaj
takiego klucza to dostaniemy z powrotem wartość undefined.
No i tutaj moglibyśmy jeszcze sprawdzić.
Jeżeli word jest równe undefined to ustaw tutaj wartość nieznana to co mieliśmy
wcześniej albo można zastosować ciekawy trik.
Możemy tu skorzystać z operatora or, o których już w tym kursie dokładnie
mówiliśmy i napisać tutaj wartość nieznana.
I zauważy to nam zwróci wartość nieznana. Dlaczego.
Bo dict number podstawi tutaj czwórkę i
całe to wyrażenie zwróci jak widziałeś przed momentem undefined. Ten operator
jeżeli po swojej lewej stronie ma coś co
jest wartością fałszywą to przechodzi na swoją prawą stronę i to co tutaj jest
zwraca. To już dokładnie w jednej z lekcji
tłumaczyłem. Więc w ten sposób możemy zastąpić sobie tą instrukcję if, else albo
switch, który mieliśmy wcześniej właśnie takim słownikiem.
Jeżeli podamy dwójkę
to nam powie, że to jest dwa ale jeżeli podamy wartość, której tam nie ma np.
czwórkę mamy wartość nieznana. Więc jest to
również jedno z zastosowań obiektów. Możemy je traktować jako takie po prostu słowniki
albo jako bardziej zaawansowane struktury danych gdzie przechowujemy np.
informacje o jednej konkretnej osobie.