W tej lekcji nauczysz się jak stworzyć pierwszy prosty program w JavaScript. Do napisania tego przykładu potrzebujesz edytora kodu, będziemy korzystali z Visual Studio Code, który obecnie jest standardem w programowaniu i jest w pełni darmowy. Po zainstalowaniu programu stwórz w dowolnym folderze plik index.html i otwórz go w edytorze.
Plik html jest wymagany przez przeglądarki ponieważ opisuje strukturę strony internetowej, którą wyświetli przeglądarka. Uwaga bez html przeglądarka nie uruchomi kodu JavaScript. Jeśli nie znasz html 5 to warto nauczyć się tego prostego języka znaczników z wielu artykułów w internecie, z pewnością szybko przez nie przebrniesz.
Do pliku index.html wpisz poniższy kod:
<!DOCTYPE html>
<html>
<head>
<title>Przykład html z JavaScript - tytuł strony</title>
</head>
<body>
<script>
// Kod JavaScript który pokaże okienko w przeglądarce
// z podanym tekstem
alert("Witaj w świecie JavaScript!");
</script>
</body>
</html>
Jak widać kod html jest dość prosty, w sekcji head mamy tylko tytuł strony, a w body czyli głównej treści witryny zamieściliśmy prosty kod JavaScript. Po uruchomieniu pliku w przeglądarce naszym oczom ukaże się poniższy widok, czyli proste okienko informacyjne z przekazanym tekstem do funkcji alert.
Zauważ że kod JavaScript osadziliśmy w html w tagu script, jest to obowiązkowe aby przeglądarka prawidłowo zinterpretowała kod JS. Jeżeli chciałbyś umieścić kod JS w oddzielnym pliku zapisz go z rozszerzeniem .js i dodaj do html poniższą linijkę kodu:
<script src="myfile.js"></script> Przeglądarka załaduje wskazany plik myfile.js i go zinterpretuje również pokazując alert. W praktyce dzielenie aplikacji na wiele plików bezie przydatne, gdy staje się coraz bardziej skomplikowana, dzięki czemu łatwiej nad nią zapanować szczególne jeśli w zespole pracuje kilka osób i każdy zajmuje się oddzielnym plikiem.
Wróćmy do kodu JavaScript, dopisałem do niego bardziej rozbudowane komentarze. W programowaniu warto dodawać komentarze w jednej linii z pomocą podwójnego znaku slash czyli // albo wieloliniowy który musi się zaczynać na /* i kończyć na */
Komentarze docenią inni programiści którzy będą korzystali czy modyfikowali Twój kod co pozwoli im na szybsze zrozumienie trudniejszych jego części. Sam sobie nawet podziękujesz jak wrócisz do własnej twórczości po dłuższym czasie i komentarze szybciej przypomną Tobie jak co działa.
// Kod JavaScript który pokaże okienko w przeglądarce
// z podanym tekstem
// to komentarz w jednej linii ignorowany przez interpreter
alert("Witaj w świecie JavaScript!");
/*
To komentarz
w wielu liniach
również ignorowany przez interpreter
*/Najważniejszą linijką która nas interesuje jest ta która wywołuje funkcję alert:
alert("Witaj w świecie JavaScript!");alert to wbudowana funkcja w przeglądarce pozwalająca na pokazanie informacji użytkownikowi. Wywołanie funkcji to nawiasy okrągłe, które instruują przeglądarkę aby użyła funkcji alert i pokazała okno z wiadomością. Dodatkowo w nawiasach okrągłych przekazujemy tekst do pokazania który obowiązkowo musimy zapisać w nawiasach klamrowych lub apostrofach.
To była pierwsza lekcja JavaScript, w kolejnych dokładnie sobie powiemy czym są zmienne i funkcje i wtedy więcej rzeczy się wyjaśni jeśli coś jest niezrozumiałe.
Jeśli szukasz kursu video polecam mój własny kurs JavaScript który krok po kroku uczy programowania od absolutnych podstaw