Rozpoczynamy serię tutoriali o nauce języka JavaScript. Poznamy ten język od początku, od najbardziej podstawowych operacji. Nauczymy się programować od zupełnych podstaw.
JavaScript – jak zacząć pisać kod
Oto prosty fragment kodu JavaScript, wypisujący tekst „hello world”:
console.log("Hello world");Teraz zachodzi pytanie, co musimy zainstalować i gdzie mamy ten kod wpisać, aby zaobserwować jego działanie.
Języka JavaScript nie musimy instalować. Jest on językiem, z którym radzi sobie nasza przeglądarka internetowa.
Pierwszym sposobem, aby ten kod gdzieś wkleić jest otworzenie jakiejkolwiek strony internetowej (może być nawet ta strona, choć dla porządku i braku różnych „przeszkadzajek” polecałbym po prostu otworzyć pustą kartę) i w zależności od przeglądarki internetowej jakiej używamy, musimy jakoś dostać się do konsoli REPL.
W przypadku przeglądarki Chrome jest to kliknięcie prawego przycisku myszy i wybranie „Zbadaj”. Następnie otworzy nam się (na dole bądź po prawej stronie, możemy położenie zmienić) pewne okno nieco zasłaniające naszą stronę internetową.
Tam musimy z karty „Elements” przejść do karty „Console” i wkleić nasz kod. REPL wypluje nam napis „Hello world”.
REPL to skrót od Read-Evaluate-Print-Loop czyli czytaj (input od użytkownika), oceniaj (interpretuj podany kod JS), drukuj (wynik działania kodu) oraz zapętl się (komendy można w nieskończoność podawać).
Innym sposobem przetestowania kodu JS będzie odnalezienie kompilatora online, który wspiera JS, wklejenie kodu (zazwyczaj po lewej stronie), wciśnięcie odpowiedniego przycisku i obserwowanie wyniku (zazwyczaj po prawej stronie albo na dole).
Mamy też inny sposób do dyspozycji – stworzenie pliku HTML zawierającego JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>This is my website</h1>
<script>
console.log("Hello world");
</script>
</body>
</html>Mamy tutaj standardowy HTML. Po otworzeniu takiego pliku przeglądarką zobaczymy napis „This is my website”, zaś w konsoli (prawy przycisk myszy, zbadaj, Console) zobaczymy nasz napis „Hello world”.
Jeżeli chcemy zobaczyć nasz napis nie w konsoli, możemy zmienić nasz tag <script>. Dodajmy alert, zobaczymy jak się nam to wyświetli:
<script>
console.log("Hello world");
alert("Hello world");
</script>Jak widać JS w HTMLu używamy w tagach <script> oraz </script> umieszczonych na dole strony. Każda instrukcja powinna być zakończona znakiem „;”, choć nie jest to tak ścisłe jak w językach typu PHP (JS posiada mechanizm ASI, który pozwala nam czasem o średniku zapomnieć a kod i tak wykona się – zazwyczaj – prawidłowo).
Mamy też jeszcze jeden sposób na pisanie JS, a mianowicie plik HTML oraz osobny plik o rozszerzeniu „.js”, połączone ze sobą.
Załóżmy, że nasz plik HTML nazywa się „index.html”. W tym samym folderze musimy stworzyć plik o nazwie „script.js” i wkleić do niego treść, którą na razie trzymamy w tagu script:
console.log("Hello world");
alert("Hello world");Tak wygląda script.js. Trzymamy tam kod w języku JavaScript, bez żadnych tagów.
Teraz musimy stworzyć odniesienie do naszego pliku „script.js” w pliku „index.html”. Zakładając, że plik nazywa się „script.js” i znajduje się w tym samym folderze będzie to wyglądać tak:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>This is my website</h1>
<script src="./script.js"></script>
</body>
</html>Tag script ma tu atrybut src, czyli source (źródło). Znak „./” oznacza ten sam folder, w którym jesteśmy z plikiem html (jakikolwiek by to folder nie był) zaś reszta to ścieżka do tego pliku.
Jest tam tylko nazwa pliku z rozszerzeniem, ale gdybyśmy w tym samym folderze zrobili podfolder o nazwie scripts i tam nasz skrypt przenieśli, ścieżka wyglądałaby tak:
<script src="./scripts/script.js"></script>Pracując na własnym komputerze, nie w hostingu, możemy też podawać ścieżki bezwzględne, takie „pełne” ścieżki zaczynające się od nazwy dysku i idące aż do samego końca.
Zaletą tych „względnych” ścieżek jest to, że później możemy nasze strony zahostować i nie musimy niczego w ścieżkach zmieniać. „./” zawsze znaczy „ten sam folder”, dalej podajemy resztę ścieżki, coś co napisaliśmy na naszym komputerze (korzystającym z Windowsa i o ścieżce bezwzględnej zaczynającej się na partycji C) możemy wrzucić na dowolny hosting obsługiwany przez serwer oparty o Linuksie i wszystko będzie działać.
Takie są sposoby pisania kodu JavaScript. Albo kompilator online, albo konsola REPL w przeglądarce, albo plik HTML z kodem JavaScript osadzonym w tagach <script> albo osobny plik „.js”, do którego strona w HTML posiada odpowiedni odnośnik.
JavaScript – konsola, alerty, prompty
Będziemy używać poniższej templatki HTML do pisania kodu JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>This is my website</h1>
<script>
//nasz kod tutaj
</script>
</body>
</html>W miejscu komentarza JS (znak „//”) będziemy pisać kod widoczny na stronie bądź w konsoli (prawy przycisk myszy, zbadaj, zakładka „Console”). Plik HTML posiada jakąś nazwę, np. index.html (koniecznie rozszerzenie .html), otwieramy go w celach edycji dowolnym edytorem tekstu (może być wbudowany w Windows notatnik, ale polecam coś lepszego, np. Visual Studio Code) zaś do obserwowania naszej strony używamy przeglądarki internetowej.
Jeżeli PHP nam nie straszny i posiadamy np. XAMPP to możemy ten plik umieścić w folderze htdocs i wtedy będzie serwowany za pomocą protokołu http. W innym wypadku będzie on traktowany jako plik („file://” zamiast „http” w miejscu url). Różnicy to nie robi żadnej dla nas.
Zaczynamy od zabaw w konsoli.
<script>
console.log("hello world");
</script>Ten kod wypisze nam napis „hello world” w konsoli. Ale to nie wszystko, co konsola ma do zaoferowania.
Możemy też w niej pisać ostrzeżenia:
<script>
console.warn("hello world");
</script>Bywa też, że chcemy napisać informację o jakimś błędzie. Służy do tego:
<script>
console.error("hello world");
</script>Wynik możemy zaobserwować w konsoli.
Jeżeli chcemy napisać coś „na stronie” możemy użyć poniższego kodu:
<script>
document.write("<h1>Hello World from JS</h1>");
</script>Wynik będzie taki, jakbyśmy pod naszym <h1> z HTML dopisali kolejny tag <h1>. Nie jest to zalecane (więcej niż 1 tag h1). Samo korzystanie z document.write również nie jest zalecane.
Nie jest to pewne (zależy od przeglądarki oraz jej wersji) ale jeżeli odwiedzimy konsolę strony, na której użyliśmy sobie document.write, możemy zobaczyć tam napis proszący o unikanie document.write, wypisany za pomocą console.warn
Później poznamy bardziej zaawansowane i adekwatne metody zmiany/dopisywania treści na stronie HTML.
Teraz zobaczmy sobie już nam znany alert:
<script>
alert("Hello stranger");
</script>Zróbmy coś ciekawszego – stwórzmy zmienną. Służy do tego słowo kluczowe let:
<script>
let name = "John";
alert(name);
</script>Stworzyliśmy zmienną i wypisaliśmy ją na ekranie alertem. Możemy też ten nasz napis jakoś ulepszyć:
<script>
let name = "John";
alert(`Hello ${name}`);
</script>Znaki jakich użyliśmy do tworzenia dynamicznego napisu znajdują się po lewej stronie przycisku '1′ na klawiaturze. W miejsce ${name} wrzucona została zawartość zmiennej „name”.
Możemy postawić na bardziej „klasyczne” napisy:
<script>
let name = "John";
alert("Hello " + name);
</script>Myślę jednak, że wersja z tzw. interpolacją jest czytelniejsza niż dodawanie do siebie napisów.
Teraz użyjmy czegoś takiego jak prompt:
<script>
let name = prompt("Whats your name?");
alert(`Hello ${name}`);
</script>To pozwala nam wyświetlić okienko, gdzie możemy sobie to nasze imię wpisać. Zostaje ono zapisane do zmiennej name, którą później wypisujemy alertem.
JavaScript – pierwszy warunek
Kontynuujemy tam, gdzie skończyliśmy. Podaję cały kod HTML, w tym JS, którego używamy:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>This is my website</h1>
<script>
let name = prompt("Whats your name?");
alert(`Hello ${name}`);
</script>
</body>
</html>Teraz spróbujmy wpisać w ten kod „puste” imię. Gdy zobaczymy „prompt”, wciśnijmy enter, bez podawania jakiegokolwiek imienia:
Nasz alert poda nam „Hello”, jako że zmienna name zawiera tylko pusty napis.
Poznamy teraz pierwszy kod z warunkiem, który coś sprawdza. Ale najpierw zmodyfikujmy sobie jeszcze ten kod i podajmy raz jeszcze puste imię:
<script>
let name = prompt("Whats your name?");
alert(`Hello ${name}`);
alert(name.length);
</script>Jeżeli nie podaliśmy niczego tylko wcisnęliśmy enter/ok, nasz drugi alert poda nam wartość zero.
To teraz wiemy jak sprawdzić, czy nasz napis jest pusty. Pora poznać blok warunkowy if:
<script>
let name = prompt("Whats your name?");
if(name.length > 0){
alert(`Hello ${name}`);
}
</script>Teraz nasz alert wykona się tylko wtedy, gdy długość naszego napisu zapisanego do „name” będzie większa niż 0. Jeżeli nic nie wpiszemy i damy enter/ok – alertu nie będzie.
Przydałoby się jednak dać pewne ostrzeżenie w przypadku, gdy ktoś to imię wpisze puste. Wiemy już jak to robić, pora poznać słówko kluczowe „else”, które oznacza „w przeciwnym razie”:
<script>
let name = prompt("Whats your name?");
if(name.length > 0){
alert(`Hello ${name}`);
} else {
console.warn("Name cannot be empty");
}
</script>Tutaj mamy blok if (jeżeli), który sprawdza, czy imię ma długość większą niż 0. Jeżeli tak – dostajemy alert. W przeciwnym wypadku – dostajemy ostrzeżenie w konsoli, że coś poszło nie tak.
JavaScript – nasza pierwsza pętla
Poznamy pierwszą pętlę w języku JavaScript. Będzie to pętla do-while, która wykonuje określony blok kodu tak długo, aż jej warunek zostanie spełniony.
Oto nasz kod HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>This is my website</h1>
<script>
let name = "";
do {
name = prompt("Whats your name?");
} while (name.length === 0);
alert(`Hello ${name}`);
</script>
</body>
</html>Przeanalizujmy sobie nasz skrypt:
<script>
let name = "";
do {
name = prompt("Whats your name?");
} while (name.length === 0);
alert(`Hello ${name}`);
</script>Do zmiennej „name” przypisujemy pusty napis. Musimy to zrobić, ponieważ nasza zmienna musi istnieć poza pętlą (zmienne tworzone wewnątrz pętli znikają, gdy pętla przestaje działać).
Następnie mamy blok do pętli do-while. Ten blok zostanie wykonany, przynajmniej raz, później zostanie sprawdzony warunek.
Blok zawiera przypisanie do zmiennej name naszego prompt. Następnie mamy sprawdzenie, w bloku while, czy długość wpisanego do tej zmiennej tekstu jest równa 0.
Jeżeli wpisaliśmy pusty napis i daliśmy ok/enter, a zatem długość zmiennej name jest równa 0 (potrójny znak „===” oznacza sprawdzenie równości) to pętla jest kontynuowana. Tak długo, aż wpiszemy coś, co ma przynajmniej jeden znak długości.
Po zakończeniu pętli mamy alert, który nasz tekst wypisuje.
Pętla prosta, natomiast pochylmy się jeszcze nad tym znakiem potrójnego „=”. Wiemy, że jedno „=” służy do przypisywania wartości do zmiennych (jak w let name = „”;). Do porównywania musimy zatem użyć czegoś innego. Dlaczego jednak potrójny znak?
Zobaczmy taką pętlę:
<script>
let lucky_number = 6;
let your_number;
do {
your_number = prompt("Guess my lucky number");
} while (your_number != lucky_number);
alert(`My lucky number is ${lucky_number}`);
</script>Tutaj mamy przypisanie do lucky_number LICZBY 6 (nie napisu '6′, to duża różnica). Zmienna your_number zostaje stworzona, ale bez przypisywania do niej żadnych wartości.
W bloku do nakazujemy użytkownikowi „zgadnąć” jaki jest nasz szczęśliwy numerek.
Stawiamy warunek, że pętla ma chodzić tak długo, aż zgadnięty przez nas numer nie będzie równy naszemu szczęśliwemu numerowi – znak „!=” oznacza „nie jest równe”.
I tutaj najważniejsza informacja – to, co wpisujemy do your_number za pomocą prompta to napis, nie liczba. Zaś to, co mamy w lucky_number to jest liczba.
Zatem porównanie „!=” oznacza „nie jest równe”, ale porównuje zmienne, nie sprawdzając, czy są takiego samego typu.
Jeżeli jednak zamienimy nasz lucky_number z typu liczbowego na tekstowy, możemy porównywać przy pomocy „!==” (nie jest równe, ale typ zmiennej musi być taki sam):
<script>
let lucky_number = '6';
let your_number;
do {
your_number = prompt("Guess my lucky number");
} while (your_number !== lucky_number);
alert(`My lucky number is ${lucky_number}`);
</script>Jeżeli jeszcze tego nie rozumiemy – prosty przykład:
<script>
console.log(2 == '2'); //true
console.log(2 === '2'); //false
console.log(2 != '6'); //true
console.log(2 != '2'); //false
console.log(2 !== '2'); //true
</script>Operator „==” porównuje, czy wartości/zmienne są sobie równe. Operator „===” porównuje, czy wartości/zmienne są sobie równe oraz jednakowego typu.
Operator „!=” porównuje, czy zmienne są od siebie różne, nie są równe. Operator „!==” sprawdza, czy zmienne nie są od siebie różne, nie są równe, ale różny typ zmiennych to dla niego „oblany” warunek.
To warto sobie przyswoić pracując z JS, najlepiej jak najszybciej.
JavaScript – nasza pierwsza funkcja
Teraz postarajmy się nauczyć jak pisać proste funkcje w języku JavaScript.
Funkcje to takie bloki kodu, które mogą (ale nie muszą) przyjmować różne argumenty i można je wielokrotnie wywoływać.
W naszym pliku napiszmy sobie taką funkcję:
<script>
function greet_user(name) {
console.log(`Hello ${name}`)
}
greet_user("John");
//Hello John
greet_user("Jane");
//Hello Jane
</script>Mamy słówko kluczowe function, nazwę funkcji, nawiasy z argumentami, jakie ta funkcja przyjmuje i blok kodu w nawiasach klamrowych.
Wewnątrz bloku kodu wypisujemy w konsoli odpowiednią wiadomość.
Poza blokiem mamy wywołanie funkcji dla argumentu „John” oraz dla argumentu „Jane”.
Otrzymujemy odpowiednią wiadomość.
W bloku funkcji możemy dodać pewną logikę:
<script>
function greet_user(name) {
if(name !== "")
{
console.log(`Hello ${name}`)
} else {
console.log("Hello stranger!")
}
}
greet_user("John");
//Hello John
greet_user("Jane");
//Hello Jane
greet_user("");
//Hello stranger!
</script>Tutaj sprawdzamy, czy name nie jest pustym napisem i wtedy piszemy wiadomość. W przypadku, gdy name jest pustym napisem (blok else) piszemy „hello stranger”.
Oczywiście nie musimy korzystać z argumentów, zaś do funkcji możemy „ładować” wszystko, nie tylko bloki warunkowe. Nic nie stoi na przeszkodzie, aby w funkcji wywołać pętlę:
<script>
function ask_and_greet(){
let name = "";
do {
name = prompt("Whats your name?");
} while (name.length === 0)
alert(`Hello ${name}`);
}
ask_and_greet();
</script>Tutaj wewnątrz funkcji tworzymy zmienną name, pusty napis przypisany. Pętla do-while, w bloku do zapisujemy do name wynik prompta. W bloku while – kontynuujemy tak długo, jak długość name jest równa 0.
W praktyce oznacza to, że pętla przestanie się wykonywać jak coś niebędącego pustym napisem do niej wpiszemy.
Następnie mamy nasz alert. Poza definicją funkcji mamy wywołanie tej funkcji, dzięki czemu to wszystko działa.
Wreszcie ostatnią rzeczą, jeżeli o funkcje chodzi, jest zwracanie wartości.
Funkcja może zwracać jakąś wartość, którą możemy przypisać do innej zmiennej i potem użyć. Do zwracania wartości służy słówko kluczowe return, które zwraca wartość i kończy działanie funkcji.
function ask_and_greet(){
let name = "";
do {
name = prompt("Whats your name?");
} while (name.length === 0)
alert(`Hello ${name}`);
return name;
}
let username = ask_and_greet();
console.log(username);Ta funkcja działa tak samo jak poprzednia, ale zwraca nam wartość name. Return znajduje się na samym końcu funkcji, ponieważ return zwraca wartość i kończy jej działanie.
Użycie return przed alert sprawiłoby, że alert byłby nieosiągalny.
Dzięki zwróceniu wartości funkcję możemy nie tylko wywołać, ale jej zwracaną wartość przypisać do innej zmiennej, tutaj username.
Zmiennej, która tę wartość będzie przechowywać, co sprawdzamy sobie poprzez console.log
JavaScript – pierwsza funkcja rekurencyjna
Rekurencja to dość zaawansowane zagadnienie i może popełniam błąd wspominając o nim w pierwszym odcinku tutoriala. Nie mogę jednak przejść obojętnie wobec faktu, że mamy świetny przykład jak rekurencję prosto zobrazować.
Funkcja rekurencyjna to taka, która wywołuje samą siebie – oczywiście nie w nieskończoność, ale do pewnego czasu. Jest to swego rodzaju lustrzane odbicie pętli do-while.
Zobaczmy na tę funkcję, ona rekurencyjna nie jest:
function ask_and_greet(){
let name = "";
do {
name = prompt("Whats your name?");
} while (name.length === 0)
alert(`Hello ${name}`);
return name;
}
let username = ask_and_greet();
console.log(username);Mamy tutaj pewną akcję do powtarzania tak długo, aż warunek przestanie być spełniony. Przeróbmy sobie nieco naszą funkcję:
function ask_and_greet(){
let name = "";
name = prompt("Whats your name?")
if(name.length > 0)
{
alert(`Hello ${name}`);
}
}
ask_and_greet();
</script>Mamy definicję funkcji. Program prosi o podanie imienia. Jeżeli podamy coś dłuższego niż pusty napis, wykona się alert. Jeżeli nie – nic się nie wykona, przepadło.
Możemy oczywiście dodać blok else i „wyżyć się” w konsoli, na użytkowniku, który podał nam pusty napis:
<script>
function ask_and_greet(){
let name = "";
name = prompt("Whats your name?")
if(name.length > 0)
{
alert(`Hello ${name}`);
}
else {
console.error("Wrong!!! Name cannot be empty!!!");
}
}
ask_and_greet();
</script>Ale w bloku else możemy też wywołać naszą funkcję. Tak – dotychczas wywoływaliśmy funkcję poza jej definicją. Nic nie stoi na przeszkodzie, aby robić to wewnątrz definicji funkcji.
<script>
function ask_and_greet(){
let name = "";
name = prompt("Whats your name?")
if(name.length > 0)
{
alert(`Hello ${name}`);
}
else {
ask_and_greet();
}
}
ask_and_greet();
</script>Teraz nasza funkcja jest rekurencyjna, czyli wywołuje samą siebie. Działa to tak jak w przypadku pętli do-while, natomiast nasza logika i składnia jest nieco inna.
Wywołujemy funkcję. Ona nas prosi o imię. Jeżeli podamy coś o długości powyżej 0, mamy alert, następnie funkcja się kończy.
Jeżeli jednak ten warunek nie jest spełniony to funkcja wywołuje samą siebie. I tak w kółko aż podamy takie imię, które spełnia nasz warunek (długość większa od 0).
To jest właśnie rekurencja. Przykład jest prosty, istnieją dużo bardziej zaawansowane funkcje rekurencyjne, natomiast jeżeli udało nam się pojąć koncept to bardzo dobrze. Jeżeli nie – nie szkodzi.
JavaScript – pierwsza funkcja sztrzałkowa
Poznamy sobie coś takiego, jak funkcja strzałkowa. Jest to funkcja bez nazwy, którą możemy przypisać do zmiennej (ale nie musimy, są inne sposoby jej używania).
Może zobaczmy jak ona wygląda.
<script>
let ask_and_greet = () => {
let name = "";
name = prompt("Whats your name?");
if(name.length > 0)
alert(`Hello ${name}`);
else
alert("Hello stranger");
}
ask_and_greet();
</script>Pierwsza rzecz, która może rzucić się nam w oczy nie ma nic związanego z funkcją strzałkową, a dotyczy bloków if oraz else. Nie mają nawiasów klamrowych. I nie muszą mieć, jeżeli zawierają w sobie tylko jedną instrukcję, jedną linijkę, jeden znak „;”.
To ułatwia czytelność.
Druga rzecz – do zmiennej przypisujemy funkcję strzałkową. Nic nie przyjmuje nasza funkcja, stąd pusty nawias, następnie strzałka, blok kodu, dalej instrukcje, które już sobie wcześniej omawialiśmy i powinny nie być nam obce.
Wywołujemy ją jak normalną funkcję, po nazwie zmiennej.
Po co nam takie cudo?
Wykonajmy sobie taki kod:
<script>
let ask_and_greet = () => {
let name = "";
name = prompt("Whats your name?");
if(name.length > 0)
alert(`Hello ${name}`);
else
alert("Hello stranger");
}
setTimeout(ask_and_greet, 3000);
</script>Użyliśmy tutaj setTimeout z naszą funkcją i timeoutem ustawionym na 3000ms (3 sekundy opóźnienia).
Teraz nasza funkcja rozpocznie swoje działanie z opóźnieniem 3 sekund. Fajnie, ale nadal nie tłumaczy dlaczego używamy funkcji strzałkowej, dlaczego nie mamy „normalnej” funkcji ask_and_greet:
<script>
function ask_and_greet(){
let name = "";
name = prompt("Whats your name?");
if(name.length > 0)
alert(`Hello ${name}`);
else
alert("Hello stranger");
}
setTimeout(ask_and_greet, 3000);
</script>Generalnie chodzi o to, że funkcję strzałkową, pozbawioną nazwy, można przekazać jako argument do innej funkcji, np. setTimeout:
<script>
setTimeout(() => {
let name = "";
name = prompt("Whats your name?");
if(name.length > 0)
alert(`Hello ${name}`);
else
alert("Hello stranger");
}, 3000);
</script>Może to i wydawać się dziwne, ale działa i wielu osobom odpowiada, dlatego warto znać taki zapis, nie wchodząc w niepotrzebne szczegóły.
Tak czy inaczej jak na pierwszą lekcję zrobiliśmy naprawdę dużo i myślę, że to jest najbardziej odpowiedni moment, aby zakończyć.
Naukę JS będziemy kontynuować w następnych lekcjach.
