() translation by (you can also view the original English article)
Wprowadzenie
JavaScript jest językiem, który możemy wykorzystać do pisania programów uruchamianych w przeglądarce, jak i na serwerze przy użyciu Node. Dzięki Node, możemy użyć JavaScript do budowy pełnoprawnych aplikacji internetowych, jak Twitter lub gier w stylu Agar.io.
Jest to pierwsza lekcja z czteroczęściowej serii, w której nauczę cię podstaw programowania niezbędnych, by dowiedzieć się jak pisać swoje własne aplikacje. W pierwszej części, zaznajomię cię ze składnią JavaScript i ES6. ES6 oznacza ECMAScript 6, który jest wersją JavaScript.
Treść
- Instalacja i konfiguracja
- Projektowanie programu
- Składnia
- Zmienne
- Typy danych
- Podsumowanie
- Bibliografia
Instalacja i konfiguracja
Najpierw ustawimy nasze środowisko programistyczne, tak by można było uruchomić kod na naszym komputerze. Ewentualnie możesz przetestować kod z przykładów w edytorze online, takim jak repl.it. Wolałabym, żebyś zaczął od pisania i uruchamiania kodu na swoim komputerze, byś mógł poczuć się jak prawdziwy programista. Dodatkowo, chciałabym żebyś korzystał z Node. Będziesz mógł go potem umieścić w swoim CV i zaimponować swojemu pracodawcy.
Po pierwsze, będziesz potrzebować edytora tekstu do pisania swojego kodu. Polecam Sublime Text. Następnie pobierz i zainstaluj Node. Możesz go pobrać na stronie internetowej Node.js. Upewnij się, że instalacja przebiegła pomyślnie, wpisując komendę node -v w wierszu poleceń. Jeżeli wszystko jest w porządku, zobaczysz numer wersji twojej instalacji Node.
Jedną z możliwości jakie daje Node jest uruchamianie kodu JavaScript z poziomu wiersza poleceń. Nazywamy to REPL. By spróbować, wpisz komendę node w wierszu poleceń.
Następnie wypiszmy wiadomość "Hello, World". Wpisz poniższy kod w wierszu poleceń:
1 |
> console.log("Hello, World"); |
By opuścić REPL, wciśnij dwa razy Control-C. Korzystanie z REPL staje się pomocne, gdy chcesz przetestować proste wyrażenia, jak w powyższym przykładzie. Może się to okazać wygodniejsze, niż zapisywanie kodu do pliku, zwłaszcza jeśli jest to kod jednorazowego użytku.
By wykonać program, który zapisałeś w pliku, wykonaj komendę node filename, gdzie filename jest nazwą twojego pliku JavaScript. Nie musisz wpisywać rozszerzenia pliku js , aby wykonać skrypt. Musisz być także w folderze zawierającym twój plik.
Spróbujmy na przykładzie. Stwórz plik o nazwie hello.js. Wewnątrz wpiszemy poniższy kod:
1 |
console.log("Hello, World"); |
Uruchom kod z wiersza poleceń:
1 |
$ node hello
|
Jeśli wszystko przebiegło pomyślnie, zobaczysz wiadomość "Hello, World" w oknie wiersza poleceń. Teraz już wiesz jak testować przykłady kodu z tego tutorial'a, używając Node REPL lub zapisując plik.
Projektowanie programu
Zanim zaczniesz pisać kod, powinieneś poświęcić trochę czasu na zrozumienie problemu. Jakich danych potrzebujesz? Jaki jest wynik? Jakie testy musi przejść twój program?
Gdy już zrozumiesz wymagania programu, możesz wtedy rozpisać poszczególne kroki do wykonania. Owe kroki są twoim algorytmem. Twój algorytm to nie kod. To instrukcje niezbędne do rozwiązania problemu w czystym angielskim (zastąp angielski swoim językiem). Na przykład, jeśli chcesz napisać algorytm gotowania zupki chińskiej, mógłby on wyglądać następująco:
- Rozpakuj zupkę.
- Zawartość opakowania umieść w misce.
- Miskę zalej wodą.
- Włóż miskę do mikrofalówki na 2 minuty.
- Poczekaj minutę, aż się ostudzi.
Tak, byłam głodna, gdy to pisałam. Nie jest to problem, który byś rzeczywiście rozwiązywał jako programista. Weźmy bardziej praktyczny przykład. Jest to algorytm do obliczania średniej ze zbioru liczb.
- Oblicz sumę wszystkich liczb.
- Oblicz ilość wszystkich liczb.
- Podziel sumę przez ilość liczb.
- Zwróć wynik.
Zrozumienie problemu i wymyślenie algorytmu są najważniejszymi krokami w programowaniu. Jeśli wydaje ci się, że twój algorytm jest w porządku, powinieneś napisać testy. Pokażą one jak powinien zachowywać się twój program. Gdy masz już testy, wtedy piszesz swój kod i poprawiasz go, dopóki nie przechodzi pomyślnie testów. W zależności od stopnia złożoności twojego problemu, każdy z kroków algorytmu może być podzielony na kolejne.
Zadanie
Napisz algorytm do obliczania silni danej liczby. Silnia liczby *n* jest iloczynem wszystkich liczb całkowitych od 1 do *n*. Np. 4! (4 silnia) to 1 x 2 x 3 x 4 = 24.
Składnia
Program jest podobny do języka, którym się posługujemy. Jedyną różnicą jest to, że język programowania jest stworzony do komunikacji z komputerem (i innymi programistami, którzy muszą go używać). Zasady konstruowania programu nazywamy jego składnią. Program składa się z instrukcji. Instrukcja może być traktowana jako zdanie. W JavaScript musisz stawiać średnik na końcu instrukcji. Przykład:
1 |
a = 2 + 2; |
Instrukcje składają się z wyrażeń. Wyrażenia są odpowiednikiem podmiotu/orzeczenia w zdaniu. W języku programowania wyrażenia mają wartość. Wyrażenia składają się ze słów kluczowych, takich jak var i for , będących wbudowanym słownictwem języka; danych jak liczba lub ciąg znaków i operatorów jak + i =. Przykład:
1 |
2+2 |
Poniżej mamy listę operatorów arytmetycznych:
-
+- Dodawanie -
-- Odejmowanie -
*- Potęgowanie -
*- Mnożenie -
/- Dzielenie -
%- Reszta -
++- Inkrementacja -
--- Dekrementacja
Operator reszty zwraca resztę z dzielenia dwóch liczb. Na przykład, 4 % 2 zwraca wartość 0 i 5 % 3 zwraca 2. Operator reszty jest powszechnie używany, aby dowiedzieć się, czy wartość jest parzysta lub nieparzysta. Wartości parzyste będą mieć resztę 0.
Zadanie
Znajdź wartość następujących wyrażeń. Najpierw zapisz swoje odpowiedzi, a potem sprawdź je w REPL.
- 9 % 3
- 3 % 9
- 3 % 6
- 3 % 4
- 3 % 3
- 3 % 2
Zmienne
Zmienna jest nazwą, która reprezentuje wartość w pamięci komputera. Każda wartość, którą chcemy przechowywać lub używać wielokrotnie, powinna być umieszczona w zmiennej. Jedną z metod tworzenia zmiennych jest użycie słowa kluczowego var. Jednak zaleca się używanie słów kluczowych let i const. Zobaczmy na przykłady użycia let do tworzenia zmiennych:
Deklarowanie zmiennej
1 |
let a; |
Deklarowanie i inicjowanie zmiennej:
1 |
let a = 1; |
Nadpisanie zmiennej:
1 |
a = 2; |
Stałe są zmiennymi, których nie można zmienić. Mogą być tylko przypisane jeden raz. Stałe, będące obiektami lub tablicami mogą być dalej modyfikowane, ponieważ są przypisane poprzez referencję. Zmienne nie przechowują wartości. Zamiast tego, wskazują na lokalizację obiektu. Przykład:
1 |
const a = {foo:1,bar:2}; |
2 |
|
3 |
a.baz = 3; |
4 |
|
5 |
console.log( a ); // displays { foo: 1, bar: 2, baz: 3 } |
6 |
Jednakże, to spowoduje błąd:
1 |
const a = {foo:1,bar:2}; |
2 |
|
3 |
a = {}; |
4 |
|
5 |
console.log( a ); |
Typy danych
Typy danych mają swoje zasady w jaki sposób można na nich działać. Np. jeśli dodamy dwie liczby, dostaniemy ich sumę. Jeśli jednak dodamy liczbę i łańcuch znaków, dostaniemy łańcuch. Oto lista różnych typów danych:
- Undefined: zmienna, która nie ma przypisanej wartości
- Null: brak wartości
- Boolean: byt przyjmujący wartość true (prawda) lub false (fałsz)
- String: łańcuch znaków
- Symbol: unikalny, niezmienny klucz
- Number: liczby całkowite lub dziesiętne
- Object: zbiór właściwości
Łańcuch jest typem danych, który składa się z poszczególnych znaków. Łańcuch otaczamy pojedynczym lub podwójnym cudzysłowem. Łańcuchy także posiadają metody, których możesz użyć, by wykonać na nich pewne akcje. Spójrzmy na przykłady niektórych z nich:
Sprawdźmy, czy łańcuch zaczyna się od innego łańcucha:
1 |
"Hello, World".startsWith("hello"); //true |
Sprawdźmy, czy łańcuch kończy się innym łańcuchem:
1 |
"Hello, World".endsWith("World"); //true |
Sprawdźmy, czy dany łańcuch zawiera się w innym łańcuchu:
1 |
"Hello, World".includes("World"); //true |
Powtórzmy łańcuch określoną ilość razy:
1 |
"Hello".repeat(3); //HelloHelloHello |
Możemy zmienić łańcuch znaków w tablicę przy użyciu operatora spread: ...
1 |
let str = [..."hello"]; |
2 |
|
3 |
console.log(str); //[ 'h', 'e', 'l', 'l', 'o' ] |
"Template literals" są specjalnym typem łańcucha, który używa znaku ` ` zamiast cudzysłowu. Możemy go użyć, by wstawić zmienne do łańcucha znaków:
1 |
let name = "World"; |
2 |
|
3 |
let greeting = `Hello, ${name}`; |
4 |
|
5 |
console.log(greeting); //Hello, World |
Możemy tworzyć wieloliniowe łańcuchy znaków, jak:
1 |
`
|
2 |
<div>
|
3 |
|
4 |
<h1>Hello, World</h1>
|
5 |
|
6 |
</div>
|
7 |
|
8 |
`
|
Podsumowanie
Zobaczyliśmy jak ustawić środowisko programistyczne przy użyciu Node. Pierwszym krokiem do programowania jest opisanie kroków potrzebnych do rozwiązania problemu. Nazywamy je algorytmem. Właściwy kod będzie się składał z wielu instrukcji. Instrukcje składają się z wyrażeń. Wyrażenia przydają się w naszym programie, jeśli przypisujemy je do zmiennych. Zmienne tworzymy przy użyciu słów kluczowych let lub const.
W części 2 wytłumaczę instrukcje warunkowe.
Bibliografia
