Wprowadzenie do JavaScript
JavaScript to popularny język programowania, który pozwala nadawać stronom WWW interaktywność i dynamikę. Podczas gdy HTML odpowiada za strukturę strony (co się wyświetla), a CSS za wygląd (jak to wygląda), JavaScript dodaje zachowanie – dzięki niemu elementy strony mogą reagować na działania użytkownika.
Gdzie używamy JavaScriptu?
Przede wszystkim w przeglądarkach internetowych, aby tworzyć bogate interaktywne witryny. Na przykład przyciski mogą po kliknięciu pokazywać nowe treści, formularze mogą sprawdzać poprawność danych od razu na stronie, a gry przeglądarkowe działają właśnie dzięki JavaScriptowi. JavaScript działa po stronie klienta (w komputerze użytkownika w przeglądarce), co oznacza, że reaguje natychmiast na interakcje, bez konieczności przeładowania strony. Co więcej, JavaScript jest używany także poza przeglądarką – istnieje środowisko Node.js, które pozwala uruchamiać JavaScript na serwerze. W naszym kursie skupimy się jednak na użyciu JS na stronach internetowych.
Jak dodać JavaScript do HTML?
Kod JavaScript osadzamy w stronach za pomocą znacznika <script>. Możemy to zrobić na dwa sposoby:
-
Wewnątrz strony HTML:
Umieszczając kod bezpośrednio pomiędzy tagami
<script> ... </script>. Zazwyczaj taki skrypt umieszcza się na końcu sekcji<body>strony, aby najpierw załadować całą zawartość HTML, a potem dopiero wykonać skrypt. -
W zewnętrznym pliku .js:
Możemy także zapisać kod JavaScript w osobnym pliku z rozszerzeniem
.js(np.skrypt.js) i wczytać go na stronie przy pomocy znacznika<script src="skrypt.js"></script>. Taki plik można dołączyć w sekcji<head>lub na końcu<body>. Zalecane jest umieszczanie skryptu na końcu<body>, dzięki czemu przeglądarka najpierw wyświetli zawartość strony, a następnie załaduje i wykona kod.
Przykład minimalnej strony HTML z osadzonym JavaScriptem
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<title>Przykładowa strona</title>
</head>
<body>
<h1>Moja pierwsza strona z JavaScript</h1>
<p>Witamy na stronie!</p>
<script>
// Kod JavaScript wewnątrz strony
alert("To jest komunikat z JavaScript!"); // wyświetlenie okienka alert
console.log("Właśnie uruchomiono skrypt JS."); // wypisanie informacji w konsoli
</script>
</body>
</html>W powyższym przykładzie po otwarciu strony pojawi się okienko z komunikatem To jest komunikat z JavaScript!, a w konsoli przeglądarki (narzędzia deweloperskie) zobaczymy tekst Właśnie uruchomiono skrypt JS.
Konsola w przeglądarce
Każda nowoczesna przeglądarka (Chrome, Firefox itp.) posiada wbudowane narzędzia deweloperskie. Aby je otworzyć, można nacisnąć klawisz F12 lub użyć menu (np. w Chrome: Więcej narzędzi → Narzędzia dla programistów). Jednym z tych narzędzi jest konsola JavaScript, w której można na bieżąco wpisywać polecenia JavaScript i od razu obserwować wyniki. Konsola służy także do wyświetlania komunikatów diagnostycznych, błędów i logów z naszego skryptu.
Spróbuj otworzyć konsolę na swojej stronie i wpisać proste polecenia, np. matematyczne: 2+2 (powinno zwrócić wynik 4) albo wpisać: console.log("Hello!") i nacisnąć Enter. Zobaczysz, że konsola wyświetli to, co przekazaliśmy do console.log().
Funkcja console.log() jest bardzo przydatna podczas pisania skryptów. Używamy jej do wypisywania informacji w konsoli (np. wartości zmiennych lub komunikatów diagnostycznych), co pomaga nam sprawdzić, czy kod działa zgodnie z oczekiwaniami. W przeciwieństwie do alert(), console.log() nie przerywa działania strony okienkiem, tylko zapisuje wiadomość w konsoli.
Ćwiczenia
- Utwórz prostą stronę HTML na swoim komputerze (np.
index.html) i dodaj na niej skrypt JavaScript (w tagu<script>). Niech skrypt wyświetli okienkoalertz dowolnym powitaniem oraz wypisze dowolny komunikat w konsoli za pomocąconsole.log(). - Otwórz stronę w przeglądarce i przećwicz korzystanie z konsoli: sprawdź, czy pojawił się
alert, a następnie otwórz konsolę deweloperską i zobacz, czy widzisz w niej swój komunikat zconsole.log. Spróbuj też samodzielnie wpisać w konsoli kilka prostych operacji (np. dodawanie liczb, wyświetlenie własnego tekstu).
