W serii „Przewodnik dla początkujących” Szkoły Programowania CodeBerry będziemy odpowiadać na pytania, które możesz mieć odnośnie tego, jaki język programowania wybrać, ile pieniędzy będziesz zarabiać, co możesz zrobić jako programista stron internetowych oraz od czego zacząć.

Chcesz nauczyć się programować, online? Przyjdź i wypróbuj nasze pierwsze 25 lekcji za darmo w Szkole Programowania CodeBerry.

Języki programowania

Wstęp do języka JavaScript

JavaScript jest językiem sieciowym. Prawie każda strona, którą odwiedzasz w swojej przeglądarce internetowej, będzie używać go w ten czy inny sposób, aby zapewnić odpowiednie doznania i komfort z użytkowania. Dlatego właśnie znajomość JavaScript jest tak pożądana wśród nowoczesnych programistów. Trudno jest znaleźć dobre zastępstwo dla tak elastycznego języka programowania, jeśli chce się stworzyć niezapomniane doświadczenia użytkowania, oparte na przeglądarce internetowej, zdolne do zaciekawienia klientów czy potencjalnych pracodawców. 

Chcesz stworzyć stronę internetową dla swojego szybko rozwijającego się biznesu tworzącego zabawne skarpetki dla psów? A co powiesz na doświadczenie VR w przeglądarce – zobaczyć, jak to jest odwiedzić dom swojej teściowej na Boże Narodzenie? Musisz nauczyć się JavaScript, jeśli chcesz zrealizować ambitne marzenia związane z przeglądarkami, a także wiele więcej.

Jeśli coś z tego cię ciekawi (lub po prostu się nudzisz) – czytaj dalej, aby dowiedzieć się więcej o podstawach JavaScriptu i rozpocznij swoją podróż w kierunku zostania programistycznym ninja.

Zmienne w JavaScript

Najlepszym miejscem na początek są zmienne. Zmienne są typem danych, w których programiści przechowują informacje – zwłaszcza takie, których program będzie potrzebować podczas pracy. Są one jak pudełka, do których można wkładać rzeczy. Programista może stworzyć zmienną w kodzie, wypełnić ją czymś (zadeklarować), a następnie uzyskać do niej dostęp w prosty sposób. W ten sposób informacja jest dostępna zawsze wtedy, gdy jest potrzebna.

Więc, jak mogę stworzyć zmienną w kodzie?

W ten sposób:

var myCoolVariable;

A co to niby znaczy?!

Cieszę się, że pytasz! Powyższy wiersz składa się z dwóch części, które łączą się, aby utworzyć zmienną. Podzielmy ją i dokonajmy jej analizy.

  • var
    • W języku JavaScript jest to słowo zastrzeżone. W tym języku jest ich całkiem sporo i wszystkie mają swoje dedykowane zadania. Ten mówi programowi, że masz zamiar utworzyć zmienną.
  • myCoolVariable
    • Jest to identyfikator zmiennej, jej nazwa. Może to być wszystko, od „kota” do „mojaSuperZmienna3” (ale lepiej nie nazywać ich w ten sposób!). Identyfikator zmiennej jest używany do odnoszenia się do niej w przyszłości, gdy jest ona potrzebna. Dobrą praktyką jest nadawanie swoim zmiennym nazw, które opisują ich działanie, więc jeśli masz zmienną, która zawiera twój wiek, to prawdopodobnie powinieneś ją nazwać myAge. Rób to konsekwentnie, a twoi koledzy programiści będą Cię szanować i kupować za to różne prezenty! 

Dobra, fajnie, ale co dalej?

Pamiętasz, że zmienne są jak pudełka? Powyższy kod tworzy pudełko, ale jeszcze niczego w nim nie włożyliśmy – to jest następny krok. Jednak zanim to zrobimy, słowo o typach danych.

Jakich danych?

Typy danych są różnymi rodzajami zmiennych, które można wytworzyć, w większości przypadków wszystkie języki programowania je posiadają. Niektóre języki są bardzo ścisłe, praktycznie nakazują Ci określić dokładnie jaki typ zmiennej tworzysz, a następnie musisz trzymać się tego przez cały czas! Na szczęście, JavaScript taki nie jest. Możesz stworzyć zmienną określonego typu w JavaScript, a następnie zmienić ją później w zależności od potrzeb czy własnej chęci, ponieważ wartości i typy zmiennych mogą być zmieniane w dowolnym momencie. Woohoo! Możesz sobie poszaleć.

Oto niektóre z typów danych dostępnych dla programistów JavaScript.

  • Number
    • Number (Liczba) określa zmienną o wartości liczbowej. Ten typ zmiennej może teoretycznie przechowywać wartości od -nieskończoności do +nieskończoności. Może również przechowywać specjalną wartość, NaN, która oznacza 'Not a Number' (Nie Liczba) i zdarza się, że kiedy popełnisz błąd w kodzie, to właśnie taką wartość otrzymasz. Biedny JavaScript.
  • String
    • String (Ciąg) definiuje zmienną, która zawiera tekst, jak 'Witaj', 'Żegnaj' lub 'Pokaż mi swoje towary'.
  • Boolean
    • Boolean definiuje zmienną, która może być prawdziwa lub fałszywa. Ten typ zmiennej jest często używany do podejmowania decyzji w kodzie. Czy powinienem stać, czy iść naprzód? Boolean ma dla Ciebie odpowiedź.

Dostępne są również inne typy danych i jeśli chcesz się im przyjrzeć, możesz kliknąć tutaj

Nadawanie wartości zmiennym

Zobaczmy, jak możesz włożyć dane do zmiennych. Poniżej znajduje się jakiś kod, który to robi.

myCoolVariable = 10;

myCoolVariable = ‘hello’;

myCoolVariable = true;

Powyższy kod ustawia myCoolVariable trzy razy: raz na typ Number (10), raz na wartość Stringa („hello”), a następnie na wartość boolean (true).

Tworzenie i ustawianie zmiennej w tym samym czasie

Możliwe jest również tworzenie i ustawienie wszystkich zmiennych naraz. Robisz to w ten sposób:

var myCoolVariable = 10;

Tutaj stworzyliśmy myCoolVariable i nadaliśmy mu wartość 10 w jednej i tej samej linii. 

Odnoszenie się do zmiennej w przyszłości

Tworzenie i ustawianie zmiennych jest świetne, ale prawdziwa moc przychodzi później – kiedy rzeczywiście ich używasz. Jak to wygląda? To proste! Użyj identyfikatora.

var myCoolVariable = 10;

var myCoolVariableDouble = myCoolVariable + myCoolVariable;

Tutaj tworzymy myCoolVariable i nadajemy mu wartość 10. Następnie tworzymy kolejną zmienną, myCoolVariableDouble i ustawiamy ją na wynik dodawania myCoolVariable do siebie. Tak więc teraz myCoolVariableDouble równa się 20 i mamy dwie zmienne w programie. Dwie! Lepiej biegnij po aparat!

Dość już o zmiennych

Zajęliśmy się podstawami zmiennych: ich tworzeniem, ustawianiem i odwoływaniem się do nich. Jednak w JavaScripcie jest o wiele więcej do zaprogramowania i odkrycia. Teraz gdy już znasz podstawy, możemy przejść do większych i lepszych rzeczy. Takich jak instrukcje if.

Tak wygląda kod języka JavaScript

Instrukcja If

Więc mamy opanowane zmienne, ale jak ich użyć do robienia fajnych i niesamowitych rzeczy? Cóż, jednym ze sposobów jest użycie instrukcji if.

Instrukcja if jest sposobem, w jaki programista może wbudować w swój kod logikę decyzyjną. Oznacza to, że możemy powiedzieć naszym programom, aby zrobiły coś w oparciu o pewien warunek. Spójrzmy na przykład.

If (10 > 20) {

  // Run this code

} else {

  // Run this code

}

{} definiują blok kodu. Niektóre narzędzia JavaScript, takie jak instrukcje if, wymagają ich w celu oddzielenia różnych bitów kodu.

Rozbijmy to na części pierwsze.

  • if
    • To kolejne zastrzeżone słowo. Wskazuje ono programowi, że następujący kod będzie instrukcją if.
  • (10 > 20)
    • Ta część jest warunkiem. Program oceni warunek, a następnie na podstawie wyniku wybierze, co należy zrobić. Warunek zawsze podaje wartość typu boolean, tzn. prawdziwą lub fałszywą. Jeśli wyjście warunku jest prawdziwe, to instrukcja if uruchomi blok kodu bezpośrednio za zamykającym się nawiasem warunku. Jeśli oszacuje na wartość false, to zamiast tego zostanie uruchomiony kod w drugim bloku – co dokładnie stanie się tutaj, ponieważ 10 nie wynosi więcej od 20.
  • else
    • Jest to kolejne słowo kluczowe JavaScript. Określa ono po prostu kod, który powinien zostać uruchomiony, jeśli warunek zostanie oceniony jako fałszywy. Blok else nie jest wymagany – jeśli go dodasz, to technicznie tworzysz instrukcję if else.

Miejmy nadzieję, że teraz jest jasne, dlaczego należy tutaj używać {}. Bez zdefiniowania bloku kodu, nie byłoby jasne dla programu, który kod powinien zostać uruchomiony, jeśli warunek zostanie oceniony jako prawdziwy lub fałszywy.

Instrukcje if są jednym z podstawowych elementów składowych złożonych programów. Opanowanie ich jest niezbędne, aby stać się kompetentnym programistą JavaScript.

Pętle

Kolejnym ważnym narzędziem są pętle. Jak sama nazwa wskazuje, te bity kodu uruchamiają się w kółko, aż do momentu spełnienia określonego warunku. Istnieje kilka różnych rodzajów pętli, ale przyjrzymy się tylko dwóm z nich. Podam linki do dalszej nauki, jeśli będziecie zainteresowani.

Pętla For

Najpierw zajmiemy się pętlą for. Oto przykład.

var numberOfIterations = 10;

for (var i = 0; i < numberOfIterations; i++) {

  // do something 10 times

}

Może to wyglądać trochę dziwnie w porównaniu z innymi rzeczami z tego tekstu, ale staje się naprawdę proste, gdy pozna się podstawy działania pętli. Dlatego teraz przejrzę każdą część kodu z osobna.

  • var numberOfIterations = 10
    • Jest to tylko kod do tworzenia i ustawiania zmiennej za jednym razem.
  • for (var i = 0; i < numberOfIterations; i++)
    • for
      • Kolejne zastrzeżone słowo. To mówi programowi, że masz zamiar napisać pętlę.
    • var i = 0
      • Tworzenie i ustawianie zmiennej ponownie. Jest to szczególny przypadek, ponieważ tworzymy ją w ramach pętli, dla tej pętli. Oznacza to, że zmienna i będzie istniała tylko przez czas trwania pętli. Gdy tylko zakończy się jej wykonywanie, zostanie ona odrzucona. Na zawsze. Żegnaj, zmienno i.
    • i < numberOfIterations
      • Ta linia mówi, że pętla ma być wykonana tylko wtedy, gdy zmienna i jest mniejsza od wartości numberOfIterations (10).
    • i++
      • Wreszcie, linia ta mówi pętli, że po wykonaniu pojedynczej iteracji, powinna ona zwiększyć wartość i o 1.

Mam nadzieję, że teraz całkiem łatwo jest zobaczyć, jak działa pętla for. Tworzy ona tymczasową zmienną do śledzenia ilości pętli, które zostały wykonane: (i), następnie definiuje warunek wykonania (tylko gdy i < jakaś wartość), a następnie definiuje, jak ma się ona zwiększać z każdą pętlą (w tym przypadku +1, ale może to być naprawdę wszystko, co chcesz).

Najwyraźniej, pętla for jest dobra, gdy wiesz, ile razy chcesz coś uruchomić. Jednak co w przypadku, gdy nie wiesz? Oto nadchodzi czas na pętlę while.

Pętla While

Pętla while jest prostsza niż pętla for. Po prostu bierze warunek i wykonuje go, dopóki warunek ten nie jest fałszywy. Oto przykład.

var shouldKeepRunning = true;

while (shouldKeepRunning) {

  // Do some code

  shouldKeepRunning = false;

}

  • while
    • Mówimy programowi, że mamy zamiar napisać pętlę while.
  • (shouldKeepRunning)
    • To jest warunek. Pętla będzie działać, gdy wartość parametru shouldKeepRunning jest prawdziwa. To jest to samo co napisanie shouldKeepRunning == true, ale możemy to napisać w ten sposób, jako skrót.
JavaScript używa == do porównania dwóch wartości, dlatego bo = jest używany do ustawiania wartości. Więc jeśli piszesz if (10 == 20), to naprawdę mówisz „jeśli 10 jest równe 20, to[…]”.

Ta pętla uruchomi się tylko raz, ponieważ natychmiast ustawiliśmy shouldKeepRunning na fałszywy przy pierwszej iteracji. Prawdopodobnie nigdy czegoś takiego nie zobaczysz w 

 swoim kodzie, ale ważne jest, aby upewnić się, że pętla w pewnym momencie się zatrzyma. Nie chcemy powodować globalnej katastrofy przy pomocy nigdy niezatrzymującej się pętli obliczeń!

To są jedyne dwie pętle, które tutaj omówimy, ale jeśli chcesz dowiedzieć się więcej – możesz sprawdzić ten link

Funkcje

Wszystkie narzędzia, jakie do tej pory poznaliśmy, są świetne do pisania małych i sekwencyjnych skryptów – ale co jeśli chcemy pisać większe programy, które w kółko korzystają z tych samych bitów kodu? Nie chcemy ciągle kopiować i wklejać fragmentów kodu, tylko po to, aby ponownie go wykorzystać. Tu właśnie pojawiają się funkcje.

Funkcje są kawałkami kodu wielokrotnego użytku. Oto przykład.

function doSomething(argumentOne, argumentTwo) {

  // do something here

}

Przeanalizujmy ten kod:

  • function
    • Jeszcze jedno słowo kluczowe JavaScript. Określa ono powstanie funkcji.
  • doSomething
    • Jest to identyfikator funkcji. Tak jak identyfikator zmiennej, pozwala nam na odwołanie się do tej funkcji później, w kodzie.
  • (argumentOne, argumentTwo)
    • Kod w nawiasach jest listą argumentów. Dwie wartości argumentOne i argumentTwo zachowują się jako zmienne wewnątrz funkcji i dlatego mogą być jako takie używane. Za sekundę zobaczymy, jak te zmienne zostaną ustawione.

Każdy kod zdefiniowany w bloku funkcji może być uruchamiany tyle razy, ile chcesz, po prostu wywołując funkcję. Oto przykład.

doSomething(10, 20);

Używamy identyfikatora funkcji doSomething, a następnie podajemy dwa argumenty, 10 i 20. Wypełnią one następnie argumenty na liście argumentów funkcji, to jest argumentOne i argumentTwo. Kolejność ma znaczenie, więc argumentOne otrzyma wartość 10, a argumentTwo wartość 20.

Funkcje działają tak samo, jak zmienne w tym sensie, że można odnieść się tylko do funkcji w obrębie danego bloku i wszystkich bloków dziecięcych, w których została ona zdefiniowana. Jeśli masz funkcję, która została utworzona np. wewnątrz bloku instrukcji if, to nie możesz jej używać poza tym blokiem.

Funkcje są niezwykle ważnymi narzędziami, jeśli chcesz tworzyć złożone i dynamiczne programy – dlatego ważne jest, aby je ćwiczyć. Więcej informacji można znaleźć tutaj.  

Podsumowanie

W tym artykule omówione zostały tylko niektóre z podstaw programowania w języku JavaScript – pozostało jeszcze sporo do poznania. Programowanie JavaScript jest umiejętnością praktyczną i można się go nauczyć tylko w praktyce. Istnieje wiele usług, które pomogą Ci to zrobić, takich jak CodeAcademy, CodeBerry, CodeSchool, Pluralsight i wiele innych. Mam nadzieję, że te informacje będą dla Was przydatne jako podręczny przewodnik na przyszłość. Powodzenia w karierze programistycznej!

W serii „Przewodnik dla początkujących” Szkoły Programowania CodeBerry będziemy odpowiadać na pytania, które możesz mieć odnośnie tego, jaki język programowania wybrać, ile pieniędzy będziesz zarabiać, co możesz zrobić jako programista stron internetowych oraz od czego zacząć.

Języki programowania

Chcesz nauczyć się programować, online? Przyjdź i wypróbuj nasze pierwsze 25 lekcji za darmo w Szkole Programowania CodeBerry.