Wstęp do języka JavaScript
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.
Zmienną w kodzie można stworzyć w ten sposób:
var myCoolVariable;
Powyższy wiersz składa się z dwóch części, które łączą się, aby utworzyć zmienną.
var
W języku JavaScript jest to słowo zastrzeżone. W tym języku jest takich zastrzeżonych słow wiele 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ć!
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.
Typy 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 - poznamy je później.
Nadawanie wartości zmiennym
Zobaczmy, jak możesz włożyć dane do zmiennych. Poniżej znajduje się jakiś kod, który to robi.
nazwaZmiennej = 10;
nazwaZmiennej = "hello";
nazwaZmiennej = true;
Powyższy kod ustawia nazwaZmiennej 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 nazwaZmiennej = 10;
Tutaj stworzyliśmy zmienną o nazwie nazwaZmiennej 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 nazwaZmiennej = 10;
var nazwaZmiennej2 = nazwaZmiennej + nazwaZmiennej;
Tutaj tworzymy nazwaZmiennej i nadajemy mu wartość 10. Następnie tworzymy kolejną zmienną, nazwaZmiennej2 i ustawiamy ją na wynik dodawania nazwaZmiennej do siebie.
Tak więc teraz nazwaZmiennej2 równa się 20 i mamy dwie zmienne w programie!
Zaczynamy programowanie
Zajęliśmy się podstawami zmiennych: ich tworzeniem, ustawianiem i odwoływaniem się do nich. Jednak JavaScripcie posiada wiele więcej możliwości. Teraz znając już podstawy, możemy przejść do bardziej zaawansowanych rzeczy - akich jak np. instrukcje warunkowe.
Podstawy języka JavaScript cd.
Instrukcja If
Instrukcja if jest sposobem, w jaki programista może wbudować w swój kod logikę decyzyjną. Oznacza to, że możemy w naszym programie zrobić coś w oparciu o pewien warunek. Spójrzmy na przykład:
If (10 > 20) {
// wykonaj ten kod
} else {
// wykonaj ten kod
}
// dalszy ciąg programu
Objaśnienie
{} nawiasy klamrowe definiują blok kodu. Blok kodu w JavaScript (i wielu innycj językach programowania) to fragment kodu znajdujący sie pomiędzy {}. Instrukcje if wymagaja {} w celu oddzielenia różnych fragmentów kodu w zależności od logicznej wartości wyrażenia.
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), która zdecyduje który blok kodu ma być wykonywany.
(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 warunkiem. 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.
Czy teraz rozumiesz 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ą i to nie tylko w 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.
Pętla For
Najpierw zajmiemy się pętlą for. Oto przykład:
var liczba = 10;
for (var i = 0; i < liczba; i++) {
// wykonaj coś 10 razy
}
Staje się naprawdę proste, gdy pozna się podstawy działania pętli. Dlatego teraz przejrzę każdą część kodu z osobna.
var liczba = 10
Jest to tylko kod do tworzenia i ustawiania zmiennej za jednym razem.
for (var i = 0; i < liczba; i++) - ten zapis sprawia, że coś będzie wykonywane tyle razy ile wynosi wartość zmiennnej "liczba"
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
Ta linia mówi, że pętla ma być wykonana tylko wtedy, gdy zmienna i jest mniejsza od wartościliczba - ustalona została wcześniej na 10.
i++
Ten zapis mówi pętli, że po wykonaniu pojedynczej iteracji, powinna ona zwiększyć wartość i o 1.
Mam nadzieję, że teraz już rozumiesz jak działa pętla for: tworzy ona tymczasową zmienną (i) do śledzenia ilości pętli, które zostały wykonane, 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).
Pętla for jest używana, gdy wiesz, ile razy chcesz coś uruchomić. Jednak co w przypadku, gdy nie wiesz? W takim przypadku możesz skorzystać z pętli 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 wykonujDopuki = true;
while (wykonujDopuki) {
//wykonuj ten kod
wykonujDopuki = false;
}
Wyjaśnienie
while
Mówimy programowi, że mamy zamiar napisać pętlę while z warunkiem (wykonujDopuki).
wykonujDopuki to jest warunek. Pętla będzie działać, gdy wartość parametru wykonujDopuki jest prawdziwa. To jest to samo co napisanie wykonujDopuki == true, ale możemy to napisać w ten sposób, jako skrót.
JavaScript używa "==" do porównania dwóch wartości, dlatego że "=" 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 wykonujDopuki 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ń!
Są jeszcze inne petle (omówimy je później).
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 nazwaFunkcji(argument1, argument2) {
// wykonaj coś tutaj
}
Przeanalizujmy ten kod:
function
Jeszcze jedno słowo kluczowe JavaScript. Określa ono powstanie funkcji.
nazwaFunkcji
Jest to identyfikator funkcji. Tak jak identyfikator zmiennej, pozwala nam na odwołanie się do tej funkcji później, w kodzie.
(argument1, argument2)
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.
nazwaFunkcji(10, 20);
Używamy identyfikatora funkcji nazwaFunkcji, a następnie podajemy dwa argumenty, 10 i 20. Wypełnią one następnie argumenty na liście argumentów funkcji,
to jest argument1 i argument2. Kolejność ma znaczenie, argument1 otrzyma wartość 10, a argument2 otrzyma 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 potomnych, 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ć.
Podsumowanie
Zostały tutaj omówione tylko niektóre z podstaw programowania w języku JavaScript – pozostało jeszcze dużo 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 przewodnik na przyszłość. Powodzenia w karierze programistycznej!