Jak powstał JavaScript
JavaScript jest aktualnie, według serwisów Github i StackOverflow, najpopularniejszym językiem programowania na świecie. Czas jego stworzenia okazał się być niewspółmiernym do jego późniejszej popularności. JavaScript powstał bowiem w zaledwie 10 dni, a obecnie jest używany praktycznie przez każdą firmę na świecie, zarówno jako technologia frontendowa i backendowa.
W 1995 roku niejaki Brendan Eich stworzył w rekordowo szybkim czasie język, który miał umożliwić tworzenie interaktywnych stron. Nazwa została zmieniona parokrotnie – początkowe Mocha oraz LiveScript zostały ostatecznie zastąpione przez JavaScript. Należy jednak pamiętać, iż pomimo podobieństw w nazwach, JavaScript to nie to samo co Java. Choć pierwszy z nich czerpał inspiracje z drugiego, JavaScript jest zupełnie odrębnym językiem programowania.
Do dzisiejszej popularności JavaScript przyczyniła się przede wszystkim jego wszechstronność. Każdy poważny serwis internetowy używa JavaScriptu. Coraz częściej używa się jego frameworkowych wersji, takich jak stworzony przez Facebooka React.js, czy napisany przez programistów Google’a Angular.js. JavaScript nie jest już tylko językiem frontendowym (tj. odpowiedzialnym za wyświetlanie stron www i interakcje z użytkownikiem), ale jest również środowiskiem backendowym (tj. służącym do przetwarzania danych po stronie serwera) w postaci coraz bardziej popularnego Node.js.
Poznajmy podstawy tego najbardziej popularnego języka i sprawdźmy, jak łatwo możemy w nim programować.
O zmiennych
Podstawową jednostką przechowywania danych w JavaScript jest zmienna. Zapisuje się ją poprzez podanie słowa kluczowego var (od variable) oraz nazwy. Następnie po znaku "równa się" (operator przypisania "=") podaje się wartość, jaką chce się tam zapisać.
Oto przykład:
var number1 = 5;
var number2 = 2;
var number3 = number1 + number2;W tym przykładzie:
- zmienna o nazwie number1 przechowuje wartość 5,
- zmienna o nazwie number2 przechowuje wartość 2,
- zmienna o nazwie number3 przechowuje wartość 7 (number1 + number2, czyli 5 + 2).
Zmienna przechowuje wartość. Prościej mówiąc – ma wartość, którą w prosty sposób możemy zmienić:
var apple = "jabłko"; // teraz zmienna apple przechowuje napis "jabłko"
apple = "ananas"; // teraz zmienna apple przechowuje napis "ananas"Zmienną możesz wyobrazić sobie jako pudełko. Z użyciem var tworzymy je, a po znaku równości mówimy, co do niego chcemy włożyć. Jeśli ma w nim być nowa rzecz, to nie tworzymy go na nowo. Po prostu wskazujemy je i deklarujemy, co tym razem wkładamy.
Należy pamiętać, że nazwa każdej zmiennej powinna być unikalna. Może to być skrócona nazwa (x czy y) lub – co jest zgodne z dobrą praktyką – bardziej opisowa (name, city, age).
Krótko o nazywaniu zmiennych
Zmienne w JavaScripcie:
- mogą zawierać litery, cyfry, podkreślenia i znak dolara,
- powinny zaczynać się od litery,
- mogą rozpoczynać się od $ lub _,
- rozróżniają duże i małe litery (a i A to dwie różne zmienne),
- jeżeli po zadeklarowaniu zmiennej nie przypiszemy do niej żadnej wartości, to wtedy przyjmie ona wartość undefined.
W JavaScripcie znak "=" jest operatorem przypisania, co znaczy, że nie używamy go jak normalnego znaku równości. Jeżeli chcesz porównać dwie zmienne i dzięki temu dowiedzieć się, czy są takie same, to użyj "==" czyli podwójnego znaku równości (program zwróci true lub false).
Zmienne mogą przechowywać różnego rodzaju dane. Najważniejsze z nich to:
number – czyli wszystkie liczby, np.
// zmienna numberOfChild przechowuje liczbę dzieci w klasie
var numberOfChild = 12;string – czyli napisy, np.
// zmienna name przechowuje napis z imieniem
var name = "Bożydar";boolean – czyli wartości logiczne. Mogą przyjąć dwie wartości: prawda (true) lub fałsz (false).
// zmienna loggedIn przechowuje informację, czy jestem zalogowany (true = tak,
false = nie)
var loggedIn = true;Pamiętaj, że zmienne typu string (napisy) zawsze powinny znajdować się w cudzysłowie. Przyjrzyj się poniższym różnicom:
- 22 – zmienna typu number (liczba),
- "22" – zmienna typu string (napis), (liczba),
- true – zmienna typu boolean (logiczna),
- "true" – zmienna typu string (napis).
Instrukcja logowania
Zanim zaczniesz rozwiązywać zadania, wejdź na stronę: https://repl.it/ i załóż konto, klikając w prawym górnym rogu przycisk “Sign Up”. Następnie, w celu weryfikacji konta, postępuj zgodnie z instrukcją, która pojawi się na stronie.
Udało się? Super! Teraz możesz zacząć rozwiązywać zadania.
Pamiętaj, aby po przejściu na stronę z każdym zadaniem, kliknąć przycisk "Fork". Umożliwi Ci to wprowadzanie zmian w kodzie. Zawsze wybieraj plik "index.js" (w menu po lewej stronie), chyba że inaczej mówi instrukcja.
Zadania
Zadanie 1
Zanim zaczniesz, jak wspomnieliśmy wcześniej: kliknij przycisk "Fork" i wybierz plik index.js (w menu po lewej stronie). Następnie naciśnij „Run” (nad okienkiem kodu), aby wygenerować kod. Nie zajmuj się wyrażeniem document.getElementById('ex1').innerText. Jest ono po to, żeby zmienna była widoczna zaraz po napisie "Wynik zadania 1:".
Przyjrzyj się zmiennej po znaku "+=" oraz deklaracji zmiennej linię wyżej. Czy potrafisz powiedzieć, dlaczego napis pod spodem się nie wyświetla? Popraw kod tak, aby wszystko działało poprawnie.
Przejdź do pierwszego zadania:
Wskazówka: Jeżeli utknąłeś/łaś, przeczytaj akapit o nazwach zmiennych, przyjrzyj się kodowi z zadania 1 i porównaj obie linie.
Zadanie 2
Tak, jak powiedzieliśmy wcześniej, zmienne deklarujemy za pomocą słowa kluczowego "var", po którym następuje nazwa, a następnie po operatorze przypisania (znak =) jej wartość. Jeżeli wartość jest w cudzysłowiu, to znajduje się w niej tekst (string).
W kodzie do zadania 2 znajdziesz zmienną o nazwie favouriteLanguage. Przypisz do niej napis (string) ze swoim ulubionym językiem programowania (np. JavaScript). Jeżeli wszystko jest dobrze, wyświetli się on poniżej.
Przejdź do drugiego zadania:
Zadanie 3
W zmiennych możemy również przechowywać liczby, na których możemy potem wykonywać operacje arytmetyczne (+,-, *, /). W kodzie do zadania 3 znajdziesz zmienną o nazwie result, która dodaje zmienne number1 i number2 jest wyświetlana poniżej za znakiem równości. Nadaj zmiennym number1 i number2 takie wartości liczbowe, żeby wynik równania pod spodem był prawidłowy.
Przejdź do trzeciego zadania:
Wskazówka: Jeżeli liczby nie dodają się prawidłowo, "sklejają" się z sobą – znaczy to, że są niepotrzebnie otoczone cudzysłowem. W takim przypadku komputer traktuje je jako napis a nie liczbę.
Zadanie 4
W kodzie JavaScript do zadania 4 znajduje się kolejny typ zmiennych boolean (flaga), przyjmuje on tylko dwie wartości: true albo false (prawda lub fałsz). Zazwyczaj zmienne tego typu używane są do sterowania naszym programemm i mówienia mu, czy ma coś zrobić, czy nie.
Uzupełnij zmienne tak, żeby program wiedział, jaka jest pogoda. Jeżeli wszystko uzupełnisz wartościami true lub false, to na dole pokaże się informacja, jak powinienneś się przygotować przed wyjściem z domu. Któraś z podanych zmiennych nie ma w sobie wartości logicznej.
Przejdź do czwartego zadania:
Wskazówka: Pamiętaj, że w cudzysłowy wkładamy tylko napisy (stringi). Wartości logiczne pozostawiamy bez takich znaków.
Zadanie 5
Kolejnym typem zmiennych są tablice. W uproszczeniu można powiedzieć, że są to zbiory innych zmiennych (string, number, boolean itd.). Tworzy się je tak samo jak inne zmienne, z tym że po znaku równości piszemy nawias kwadratowy, w który wstawiamy wartości oddzielone przecinkiem. Do zmiennych w tablicy można dostać się przez podanie nazwy tablicy oraz numeru indeksu, w którym znajduje się interesująca nas wartość. Pamiętaj, że tablice numeruje się według standardu amerykańskiego, czyli od zera a nie od jednego.
Tak wygląda przykładowa tablica:
W indeksie 0 znajduje się ciąg znaków "ananas", w indeksie 1 – liczba 5, a w indeksie 2 – "mirabela".
Przejdź do piątego zadania:
Znajdź tablicę. Wypełnij ją zgodnie z następującymi wymaganiami:
- lista powinna mieć dokładnie pięć elementów,
- w indeksie 0. powinna się znajdować liczba (np. Twoja ulubiona),
- w indeksie 1. powinien znajdować się napis (np. Twoje imię),
- w indeksie 2. powinna znajdować się wartość logiczna,
- w indeksie 3. powinien znajdować się dowolny napis,
- w indeksie 4. powinna znajdować się liczba.
To jeszcze nie wszystko, czego możesz dowiedzieć się o tablicach. Bardziej zaawansowane zagadnienia poznasz później.
