Otwieramy kolejny materiał o JavaScripcie, który będzie jako pierwszy taki praktyczny opisywać jak utworzyć i uruchomić swój pierwszy program w języku JavaScript. Starałem się tak dobierać słowa i kolejność kroków do wykonania, żeby wszystko było zrozumiałe, a język nie był daleko idący. To zaczynajmy pracę i wykonajmy pierwszy krok w stronę nauki JavaScriptu :D!
| Tweet |
PIERWSZY PROGRAM W JĘZYKU JAVASCRIPT. ZACZYNA SIĘ OD HTML'A
Ponieważ JavaScript funkcjonuje na stronach internetowych, nie wymaga od nas ŻADNEGO doinstalowywania jakichkolwiek binarek, narzędzi ani wtyczek (mogą co najwyżej uprzyjemnić pisanie). Jednakże potrzebny nam będzie pewien warsztat do pracy, aby dojść do celu jakim jest uruchomienie przykładowego kodu.
ZANIM ZACZNIEMY...
W niniejszej serii o języku JavaScript, wszystko będzie przeprowadzane w IDE o nazwie "Visual Studio Code". Darmowy, wszechstronny i zdecydowanie lepszy od Notatnika (bez urazy ;)). Stąd też w celu obrania sobie innego narzędzia do pisania kodu, musicie się już posiłkować źródłami zewnętrznymi, aby nie rozgrzebywać prostego tematu na kilkadziesiąt akapitów jak zacząć w narzędziu X.
PRZYGOTOWYWANIE PROJEKTU
"Projekt" będzie nazwany tylko umownie, bo chodzi mi o zrobienie sobie najprostszego katalogu, w którym będą znajdować się wszystkie pliki jakie będą potrzebne na pierwszy program w języku JavaScript. Właściwie samo hasło "program" też będzie trochę na wyrost, gdyż w językach interpretowanych używa się raczej słowa "skrypt" (plik z rozszerzeniem ".js"). Zostawmy już te drobnostki leksykalne i przejdźmy do sedna.
UTWORZENIE I WYBRANIE KATALOGU
Stwórzcie sobie katalog o dowolnej nazwie, tak jak zwykle to robicie korzystając z systemu operacyjnego. Następnie otwórzcie program "VSCode" i korzystając z opcji "Otwórz folder" wybieramy nasz katalog przeznaczony do ćwiczeń.
 |
Otwieranie nowo utworzonego folderu w programie "VSCode" przy pomocy przycisku "Otwórz folder".
UTWORZENIE PLIKU "INDEX.HTML"
Kiedy katalog został wybrany, a rozpoznacie to po nazwie umieszczonej pod słowem "Eksplorator", zaznaczacie prawy przycisk myszy na puste miejsce poniżej i wybieracie sobie z menu kontekstowego "Nowy plik". Możecie też wcisnąć dwukrotnie lewym przyciskiem myszy na wolną przestrzeń. Wprowadzacie nazwę "index.html", koniecznie z rozszerzeniem "*.html" bo wtedy plik nie zostanie zidentyfikowany jako HTML!
 |
 |
Tworzenie nowego pliku HTML w programie "VSCode" przy pomocy przycisku "Nowy plik".
Po zatwierdzeniu nazwy klawiszem ENTER, klikacie na nazwę podwójnie przy pomocy lewego przycisku myszki. Ukaże się po prawej stronie edytor kodu. Wprowadzacie następujące wpisy (najlepiej skopiować, żeby nie narażać się na literówki):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Moja strona do nauki JS</title>
<script type="text/javascript" src="/script.js"></script>
</head>
</html>Oto najbardziej surowa struktura HTML, która w zupełności stanie się wystarczająca do naszych celów na pierwszy program w języku JavaScript. Pragnę uprzedzić, że linijka:
<script type="text/javascript" src="/script.js"></script>oznacza dostanie się do kodu w języku JS z pliku zewnętrznego (ze skryptu). Ja zawsze odseparowuję jedno od drugiego, gdyż zawsze stawiam na czytelność. Gdybyście jednak woleli korzystać z kodu osadzonego, zamieńcie ten wpis na następujący:
<script>
</script>Spowoduje to to, że HTML już nie będzie "szukać" pliku we wskazanej lokalizacji, tylko posłuży się kodem wpisanym bezpośrednio pomiędzy "znacznikami" (to są te określenia wstawione pomiędzy nawiasy ostre). To już jak chcecie.
UTWORZENIE SKRYPTU JAVASCRIPT
Zakładając, że trzymamy się pliku zewnętrznego dla kodu JS, powtarzamy tę samą czynność. Prawy przycisk myszy na eksplorator plików projektowych, "Nowy plik" i wpisujecie sobie dowolną nazwę. O wiele ważniejsze jest rozszerzenie - trzymacie się ".js"!
 |
Tworzenie nowego pliku JS w programie "VSCode".
PRZYKŁADOWY KOD NA PIERWSZY PROGRAM W JĘZYKU JAVASCRIPT
Pierwszy program w języku JavaScript będzie składał się wyłącznie z jednej linijki, więc wcale się nie spocicie przy pisaniu :D. Pokażę Wam dwie funkcje, których zadaniem jest w gruncie rzeczy to samo - wypisywanie komunikatu z podaną treścią. Funkcja to wydzielona część kodu nazywana "podprogramem". Pierwszą z dwóch funkcji jest "alert". Zapisujemy sobie następującą linijkę kodu:
alert("Mój pierwszy komunikat!");"alert" jest funkcją wywołującą wyskakujący komunikat, który wymagać będzie potwierdzenia przez użytkownika kliknięciem przycisku "OK". Wewnątrz nawiasów okrągłych wstawiamy coś, co nazywane jest "łańcuchem znaków". Na razie nie wchodząc znowu w szczegóły, najprościej pisząc to jest tekst osadzony wewnątrz znaki cudzysłowu. A druga funkcja to "console.log":
console.log("Mój pierwszy komunikat!");"console.log" działa już nieco dyskretniej. Na ekranie nie pokaże się żaden efekt, pojawi się on natomiast w konsoli przeznaczonej dla deweloperów. Niżej wyjaśniam jak się do tego dostać (nagłówek "Uruchamianie").
WYJAŚNIENIE CO DO ŚREDNIKÓW
Zdanie wyjaśnienia jeśli chodzi o średniki. To jest dla interpretera symbol zakończenia instrukcji którą może być definicja zmiennej, przypisanie wartości zmiennej (już osobno w nowej linii kodu) czy też właśnie wywołanie funkcji. JavaScript NIE WYMAGA ich umieszczania na końcu instrukcji, natomiast ja w przykładach niniejszej serii będę je stosować, aby trzymać się już wyuczonego lata temu nawyku wstawiania tych średników, bo jednak w większości innych języków programowania są one obowiązkowe. W tym języku jest to opcjonalne, aczkolwiek może się przydać, jeśli umieścicie dwie instrukcje w jednej linii:
alert("Mój pierwszy komunikat!");alert("Mój drugi komunikat!");Bez średnika pomiędzy funkcjami, byłby już błąd składniowy!
JAK DZIAŁA INTERPRETER?
Warto przed uruchomieniem kodu dowiedzieć się szybciutko na czym polega jego "interpretowanie". Interpreter to program wykonujący instrukcje zawarte w kodzie źródłowym linijka po linijce. Działa zupełnie inaczej w porównaniu do kompilatora, w którym to sprawdzane są wszystkie instrukcje od razu i plik wynikowy wychodzi dopiero po "uznaniu", że wszystko jest gicior. Interpreter nie zwraca żadnego nowego pliku, operuje on ciągle na tym samym. Tak w telegraficznym skrócie wymieniłem dwie podstawowe różnice pomiędzy interpreterem, a kompilatorem. JavaScript to język interpretowany (można zamiennie powiedzieć "skryptowy").
URUCHAMIANIE
Uruchamianie naszego kodu będzie najprzyjemniejszym krokiem ze wszystkich. Wystarczy kliknąć dwukrotnie na nasz plik "index.html", aby otworzyła się domyślna przeglądarka jaką macie ustawioną. Po chwili ujrzycie czystą białą stronę, a efekt...to zależy co wybraliście.
Jeżeli macie wywołanie "alert", to efekt będzie widoczny gołym okiem. Wyskakujący komunikat, który trzeba zamknąć kliknięciem przycisku "OK". Jeśli jednak wybraliście "console.log", trzeba przejść do konsoli deweloperskiej dla programistów JavaScript. Spokojnie, to nic skomplikowanego. W większości przypadków uruchamia się ją za pomocą skrótu F12. Możecie też nacisnąć prawy przycisk myszy na gołą przestrzeń i wybrać z menu kontekstowego coś takiego jak "Zbadaj". Wtedy powinno wyskoczyć to samo okno, o które mi się rozchodzi. Potem tylko zmieniacie aktywną zakładkę na "Console" (albo "Konsola", w zależności od języka). Na pustej przestrzeni powinniście zauważyć swój tekst podany w parametrze funkcji.
 |  |
Komunikaty funkcji "alert" i "console.log" w języku JavaScript.
Gratulacje! W ten sposób uruchomiliście swój pierwszy program w języku JavaScript w życiu :)!
Dotarliśmy z sukcesem do uruchomienia i wykonania kodu, więc na tę chwilę zamkniemy artykuł na tym podpunkcie. Wszystko stopniowo będzie się wyjaśniać.