1. Pierwszy kod JavaScript w przeglądarce
~20 min
podstawowy
JavaScript (JS) to język skryptowy, który umożliwia interaktywność stron internetowych – reaguje na kliknięcia, formularze czy przewijanie. Stworzony w 1995 r. przez Brendana Eicha w Netscape, pierwotnie nazywał się Mocha, potem LiveScript.
Jak podłączyć JavaScript do strony
Najlepszy sposób: plik zewnętrzny dla lepszej organizacji i cache'owania.
<!-- index.html -->
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja strona</title>
</head>
<body>
<h1>Witaj!</h1>
<!-- Skrypt na końcu body, by HTML załadował się najpierw -->
<script src="script.js"></script>
</body>
</html>// script.js
console.log("Działa!"); // Wyświetla w konsoli przeglądarki
alert("Witaj!"); // Okienko popup – unikaj w produkcji, bo blokuje UI
Ciekawostka: Umieszczanie <script> przed </body> zapobiega blokowaniu renderowania HTML. Alternatywa: atrybut defer lub async dla asynchronicznego ładowania, np. <script src="script.js" defer></script>.
Ostrzeżenie: Unikaj inline JS w tagu <script> bezpośrednio w HTML – utrudnia utrzymanie kodu.
Szybki test w przeglądarce
Otwórz stronę (np. pusty plik HTML), naciśnij F12 (lub Ctrl+Shift+I), przejdź do zakładki Console i wpisz:
console.log("Cześć!"); // Natychmiastowe wykonanie
Ciekawostka: Konsola to REPL (Read-Eval-Print Loop) – idealna do testów. JS jest interpretowany, nie kompilowany jak Java.
Ćwiczenie
- Utwórz plik index.html i script.js.
- Dodaj document.write("Hello from JS!"); do script.js – wyświetli tekst w body (ale unikaj, bo nadpisuje stronę po załadowaniu).
Poprawka do oryginału: Dodano doctype i lang dla lepszej dostępności; rozszerzono przykłady o wyjaśnienia.