PAI Programowanie aplikacji internetowych Podręcznik · klasa 1 TIP · JavaScript

Rozdział 1

Środowisko pracy i pierwsze kroki w JavaScript

Zanim napiszesz pętlę albo funkcję, musisz wiedzieć, gdzie piszesz kod, czym jest JavaScript i jak podłączyć skrypt do strony HTML. Nowe pojęcia (język programowania, IDE, skrypt) znajdziesz też w słowniczku.

Po tym rozdziale powinieneś umieć

  • uruchomić Visual Studio Code, utworzyć pliki HTML i JS oraz otworzyć stronę w przeglądarce;
  • otworzyć narzędzia deweloperskie, znaleźć kartę Konsola i odczytać komunikat albo błąd;
  • odróżnić język skryptowy (interpretowany) od kompilowanego oraz edytor od debuggeru;
  • powiedzieć, czym jest JavaScript, a czym standard ECMAScript;
  • osadzić skrypt wewnątrz HTML i w osobnym pliku .js;
  • użyć console.log, alert i prompt;
  • skomentować kod, zadbać o czytelność i włączyć tryb ścisły.

1. VS Code i narzędzia deweloperskie przeglądarki

Na tym przedmiocie programujesz w przeglądarce. Edytor służy do pisania plików, przeglądarka — do uruchamiania i sprawdzania. Na zadaniu praktycznym oddajesz działające pliki, a nie „kod na kartce”.

Visual Studio Code

Visual Studio Code (w skrócie VS Code) to edytor kodu. Otwierasz w nim folder projektu, tworzysz pliki, korzystasz z podpowiedzi i kolorowania składni. To nie to samo co Visual Studio — to duży pakiet Microsoftu do innych języków. Na zajęciach używamy VS Code.

Trzy pojęcia, których nie mylimy

Edytor — program do pisania kodu (VS Code).
Debugger — narzędzie do śledzenia działania programu krok po kroku i oglądania błędów (w przeglądarce: karta Źródła / Sources oraz punkty przerwania).
IDE (Integrated Development Environment) — środowisko, które łączy edytor, debugger, podpowiedzi i często uruchamianie projektu w jednym programie. VS Code bywa nazywany lekkim IDE. Definicje tych i innych pojęć są w słowniczku.

Typowy start pracy:

  1. Utwórz folder, np. pai-rozdzial-01 (na pulpicie albo w katalogu ucznia).
  2. W VS Code: File → Open Folder… i wskaż ten folder.
  3. Nowy plik: index.html. Drugi plik, gdy będzie potrzebny: skrypt.js.
  4. Zapisz (Ctrl+S). Bez zapisu przeglądarka pokaże starą wersję.
  5. Otwórz HTML w przeglądarce (dwuklik albo przeciągnięcie pliku na okno Chrome / Edge / Firefox).
Folder otwarty w VS Code. Pracuj zawsze w folderze projektu, nie w pojedynczym „luźnym” pliku na pulpicie bez struktury.
Zanim oddasz pracę Liczy się plik, który działa w przeglądarce, jest zgodny z poleceniem i da się przeczytać. Piękny, ale niedziałający skrypt nie spełnia zadania. Zapisz pliki, odśwież stronę, otwórz konsolę i sprawdź, czy nie ma czerwonego błędu.

Narzędzia deweloperskie przeglądarki

Otwierasz je klawiszem F12 albo skrótem Ctrl+Shift+I (na macOS: Cmd+Option+I). To środowisko uruchomieniowe Twojego skryptu: tu widać błędy, tu wypisujesz wartości, tu później zatrzymasz program na wybranej linii.

Karta Do czego służy na tym etapie
Elements / Elementy Drzewo HTML strony. Później przy DOM będziesz tu sprawdzać, czy skrypt zmienił treść.
Console / Konsola Komunikaty console.log oraz błędy składni. Zaczynasz od tej karty.
Sources / Źródła Podgląd plików JS i debugger (punkty przerwania). Przyda się przy trudniejszych błędach.
Elements Console Sources Network
Witaj w JavaScript
Uncaught SyntaxError: Unexpected token '}'
Częsty błąd początkujących Strona „nic nie robi”, a uczeń poprawia HTML. Najpierw otwórz konsolę. Czerwony komunikat (np. literówka w nazwie pliku, brak średnika w złym miejscu, odwołanie do nieistniejącej funkcji) mówi, od czego zacząć. Debugger nie zgaduje intencji — pokazuje, co przeglądarka naprawdę wykonała.
Dobór narzędzia do zadania Kod piszesz w VS Code. Działanie i błędy oglądasz w przeglądarce. Nie szukaj wyniku skryptu w edytorze — JavaScript wykonuje silnik przeglądarki, nie VS Code.

2. Podział języków. Skryptowe a kompilowane

Języki programowania można grupować na wiele sposobów (przeznaczenie, paradygmat, składnia). Na początek wystarczy jeden podział: języki kompilowane i języki skryptowe (interpretowane).

Kompilowane

Kod źródłowy najpierw tłumaczy kompilator na postać wykonywalną (np. plik .exe albo kod pośredni). Uruchamiasz już wynik kompilacji.

Przykłady: C, C++, Go, często też Java i C# (kompilacja do kodu pośredniego).

Skryptowe / interpretowane

Program wczytuje interpreter (albo silnik) i wykonuje go na bieżąco. W przeglądarce silnikiem JavaScript jest np. V8 (Chrome, Edge) albo SpiderMonkey (Firefox).

Przykłady: JavaScript, Python, PHP, Bash.

JavaScript jest językiem skryptowym Skrypt to program dołączony do strony (lub innego środowiska) i wykonywany przez silnik. Nie kompilujesz JS do .exe na lekcji. Zapisujesz .js albo kod w HTML i otwierasz stronę. Przeglądarka sama parsuje i uruchamia skrypt.

Współczesne silniki JS stosują też kompilację just-in-time (JIT) — przyspieszają kod w tle. Dla Ciebie ważne jest rozróżnienie sposobu pracy: tu nie ma osobnego kroku „skompiluj projekt”, jest plik i przeglądarka.

Gdzie działa nasz skrypt?

JavaScript na tych zajęciach działa po stronie klienta — w przeglądarce. PHP (klasy 2–3) to skrypt po stronie serwera: przeglądarka dostaje już wynik HTML, a kod PHP wykonuje się na serwerze. Na razie nie instalujesz serwera WWW na potrzeby tego przedmiotu.

Klient (JavaScript) Serwer (PHP później)
Gdzie się wykonuje Przeglądarka Serwer
Kto widzi kod źródłowy Można podejrzeć w DevTools Użytkownik zwykle widzi tylko wynik
Typowe zadanie Reakcja na kliknięcie, walidacja pola, zmiana treści strony Zapis do bazy, logowanie, generowanie HTML

3. Historia JavaScript i standard ECMAScript

JavaScript powstał w 1995 roku w firmie Netscape. Autorem pierwszej wersji jest Brendan Eich. Język miał ożywić strony WWW: reagować na działania użytkownika bez przeładowania całej strony. Nazwa bywa myląca.

JavaScript to nie Java Java to osobny, kompilowany język (m.in. aplikacje i Android). JavaScript dziedziczy z nazwy głównie marketing z lat 90. Składnia bywa podobna „z daleka” (nawiasy, if), ale to dwa różne języki. Na tym przedmiocie programujesz w JavaScript.
Pierwszy JavaScript w przeglądarce Netscape Navigator (roboczo Mocha, potem LiveScript).
Standaryzacja pod nazwą ECMAScript (organizacja Ecma International). Dzięki temu różne przeglądarki mogą mówić „tym samym językiem”.
Dojrzały standard, wciąż spotykany w starszych przykładach. Pojawia się m.in. tryb ścisły.
Duża zmiana: let, const, funkcje strzałkowe, klasy, szablony łańcuchów. Tego zestawu będziesz się uczyć w kolejnych rozdziałach.
Kolejne edycje ECMAScript (ES2016, ES2017, …). Przeglądarki wdrażają je stopniowo.
ECMAScript a JavaScript ECMAScript to oficjalny standard języka (opis, co wolno w składni i jak ma działać). JavaScript to nazwa implementacji, której używamy w przeglądarce. Mówimy „piszę w JavaScript zgodnie z ECMAScript”. Standard ma sprawić, że ten sam skrypt działa w Chrome, Edge i Firefox (z drobnymi wyjątkami).

Przeglądarka jest środowiskiem uruchomieniowym. Dostarcza silnik JS oraz obiekty, których nie ma „goły” standard: okno, dokument HTML (DOM), konsola, alert. Dlatego ten sam język JS w przeglądarce i np. w Node.js ma wspólny rdzeń, ale inne dodatki. Na tych zajęciach pracujesz wyłącznie w przeglądarce.

4. Osadzanie skryptu w HTML

HTML na tym przedmiocie jest nośnikiem skryptu. Minimalna strona, od której warto zacząć: 

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Moja strona</title>
</head>
<body>
  <h1>Witaj</h1>
  <script src="skrypt.js"></script>
</body>
</html>

Skrypt wewnętrzny

Kod wpisujesz między znacznikami <script> i </script> w tym samym pliku HTML. 

<script>
  alert("Skrypt wewnętrzny");
</script>

Wygodne na jedną linijkę albo szybki test. Przy dłuższym programie plik HTML puchnie i trudniej utrzymać porządek.

Skrypt zewnętrzny

Kod leży w pliku .js. HTML tylko go dołącza atrybutem src. Między znacznikami <script src="…"> i </script> nie wstawiaj kodu — przeglądarka go zignoruje. 

/* plik skrypt.js */
alert("Skrypt z pliku");
<script src="skrypt.js"></script>

Zewnętrzny plik da się użyć na wielu stronach, łatwiej go czytać i debugować. Na zadaniach z kilku funkcji to standard, którego warto się trzymać.

Kolejność ładowania

Przeglądarka czyta HTML od góry do dołu. Gdy natrafi na <script> bez dodatkowych atrybutów, zatrzymuje budowanie strony, pobiera i wykonuje skrypt, potem idzie dalej. Jeśli skrypt w <head> szuka elementu, którego jeszcze nie ma w HTML — dostaniesz błąd albo „pusty” wynik.

Najprostsza zasada na początek: umieść <script src="skrypt.js"> na końcu <body>, tuż przed </body>. Wtedy znaczniki HTML już istnieją.

Atrybuty defer i async defer — pobierz skrypt w tle, uruchom po sparsowaniu HTML, w kolejności znaczników. async — pobierz w tle i uruchom, gdy będzie gotowy (kolejność niegwarantowana). Na ćwiczeniach wystarczy skrypt na końcu body. Warto jednak umieć powiedzieć, dlaczego wybrałeś skrypt wewnętrzny albo plik oraz gdzie go wstawiłeś względem HTML.
Nie pisz JavaScriptu w atrybutach HTML Zapis w stylu <button onclick="alert('ok')"> bywa w starych poradnikach. Na tym kursie podłączasz logikę w pliku JS (później przez addEventListener). Rozdzielamy strukturę (HTML) i zachowanie (JS).

5. Konsola, alert i prompt

Na początku roku skrypt jeszcze nie rysuje ładnego interfejsu. Potrzebujesz trzech sposobów, żeby coś zobaczyć i coś wpisać.

console.log

Wypisuje wartość na karcie Konsola w DevTools. Nie zasłania strony. Tego używasz do sprawdzania, co program naprawdę policzył. 

console.log("Witaj w JavaScript");
console.log(2 + 2);

Przydają się też console.warn (ostrzeżenie) i console.error (komunikat w stylu błędu). To nie zatrzymuje programu — tylko oznacza linię w konsoli.

alert

Pokazuje okno z komunikatem i przyciskiem OK. Zatrzymuje skrypt, aż użytkownik kliknie. Wygodne na pierwszym programie, męczące gdy wywołujesz je w pętli. Gdy polecenie prosi o komunikat — użyj alert albo (częściej później) tekstu w elemencie HTML. 

alert("Zapisano dane");

prompt

Okno z polem tekstowym. Zwraca to, co wpisał użytkownik — zawsze jako łańcuch znaków (tekst), nawet gdy ktoś wpisze 17. Jeśli użytkownik kliknie Anuluj, dostajesz wartość null (brak wartości). 

const imie = prompt("Jak masz na imię?");
alert("Cześć, " + imie);
Anuluj i puste pole to nie to samo Anuluj → null. OK przy pustym polu → pusty łańcuch "". Na razie wystarczy o tym wiedzieć. Przy zmiennych i typach nauczysz się to rozróżniać w warunkach.

Spróbuj na tej stronie

Przyciski wywołują te same funkcje, których użyjesz we własnym pliku. Konsola poniżej naśladuje console.log; prawdziwy zapis zobaczysz też w DevTools przeglądarki (F12).

Podgląd komunikatów:

Istnieje jeszcze confirm (OK / Anuluj, wynik true / false). Możesz go rozpoznać w dokumentacji; na razie wystarczą alert i prompt.

6. Komentarze, czytelność, tryb ścisły

Kod piszesz dla przeglądarki i dla człowieka: kolegi z ławki, nauczyciela i siebie za dwa tygodnie. Na start wystarczą komentarze i czytelny zapis.

Komentarze

// komentarz jednoliniowy — do końca linii

/* komentarz
   wieloliniowy */

alert("Ten wiersz się wykona"); // ten dopisek już nie

Komentarz wyjaśnia dlaczego albo oznacza fragment do poprawy. Nie powtarzaj w komentarzu tego, co widać w nazwie: zamiast // zmienna imie przy const imie napisz raczej, skąd dane pochodzą albo jaki jest zamysł.

Czytelność

  • Nazwy mówią, co trzyma wartość: imieUcznia, nie x1.
  • Wcięcia — w VS Code zaznacz blok i naciśnij Tab. Typowo 2 albo 4 spacje, konsekwentnie.
  • Jedna instrukcja — jeden wiersz na tym etapie. Nie upychaj trzech alert w jednej linii.
  • Polskie znaki w komunikatach są OK; w nazwach plików i zmiennych na razie trzymaj się liter bez ogonków i spacji (skrypt.js, nie mój skrypt.js).

Tryb ścisły

Na początku pliku JS (albo na początku skryptu wewnętrznego) wpisujesz: 

"use strict";

To dyrektywa ECMAScript (od ES5). Silnik traktuje kod ostrzej: np. przypisanie do niezadeklarowanej nazwy staje się błędem, zamiast cicho tworzyć zmienną globalną. Dzięki temu literówki wychodzą od razu w konsoli. 

"use strict";

// bez let/const/var — w trybie ścisłym to błąd
imie = "Ania";

Wklejaj "use strict"; jako pierwszy wiersz każdego nowego pliku .js. Cudzysłów i średnik są częścią zapisu.

Krótka lista kontrolna przed oddaniem
  1. Pliki zapisane, nazwy zgodne z src.
  2. Strona odświeżona w przeglądarce.
  3. Konsola bez czerwonego błędu (albo błąd zrozumiany i poprawiony).
  4. Skrypt robi to, o co prosi polecenie — nie „coś podobnego”.
  5. Kod z wcięciami, nazwy czytelne, jest komentarz przy mniej oczywistym miejscu.

Ćwiczenia do samodzielnego wykonania

Zrób je we własnym folderze w VS Code. Nie wklejaj rozwiązań z tej strony — tu są polecenia i wskazówki. Nauczyciel może poprosić o pokazanie plików i konsoli.

Ćwiczenie 1. Stanowisko łatwe

  1. Utwórz folder cw-01-stanowisko i otwórz go w VS Code.
  2. Dodaj plik index.html z nagłówkiem h1 o treści Twoje imię.
  3. Otwórz plik w przeglądarce. Następnie włącz DevTools i kartę Konsola.
  4. W konsoli wpisz 2 + 3 i zatwierdź Enterem. Zapamiętaj, gdzie pojawia się wynik.

Efekt: potrafisz uruchomić edytor, stronę i konsolę bez pomocy.

Ćwiczenie 2. Pierwszy skrypt według wzoru łatwe

W index.html przed </body> wstaw skrypt wewnętrzny, który wywołuje alert z tekstem Działa. Odśwież stronę. Okno ma się pojawić samo po załadowaniu.

Ćwiczenie 3. Konsola i alert łatwe

Ten sam plik. Skrypt ma:

  • wypisać w konsoli Twoje imię i klasę (dwa osobne console.log albo jeden z dwoma argumentami);
  • pokazać alert z napisem Sprawdź konsolę (F12).

Otwórz DevTools przed odświeżeniem, jeśli okno alert zasłania Ci kartę Konsola.

Ćwiczenie 4. Plik zewnętrzny średnie

Przenieś kod do skrypt.js. W HTML zostaw tylko <script src="skrypt.js"></script>. Upewnij się, że oba pliki są w tym samym folderze. Jeśli alert zniknął — konsola powie, czy plik się nie wczytał (404 / failed to load).

Częsty błąd: literówka w nazwie, plik w innym katalogu albo kod wpisany jednocześnie w HTML i w src (wewnętrzna treść znacznika ze src jest ignorowana).

Ćwiczenie 5. Prompt średnie

Skrypt pyta o imię przez prompt, potem wita użytkownika w alert oraz powiela powitanie w konsoli. Na początku pliku dodaj "use strict"; i krótki komentarz, co robi program.

Ćwiczenie 6. Dwa sposoby osadzenia trudne

Przygotuj dwa HTML-e: wewnatrz.html (skrypt w pliku HTML) i zewnatrz.html (ten sam kod w app.js). Oba mają robić to samo: prompt + alert. W komentarzu na górze każdego HTML-a napisz jednym zdaniem, kiedy wybrałbyś dany wariant.

Ćwiczenie 7. Kolejność względem HTML trudne

Zrób eksperyment i zapisz wnioski w komentarzu wieloliniowym na górze pliku JS:

  1. Umieść w <body> akapit z id="komunikat" i tekstem Przed skryptem.
  2. W skrypcie odwołaj się do tego elementu: document.getElementById("komunikat") i wypisz go w konsoli.
  3. Porównaj dwa warianty: znacznik <script src> w <head> bez defer oraz ten sam znacznik na końcu <body>.

Nie musisz jeszcze rozumieć całego DOM — chodzi o kolejność: czy element istnieje w chwili startu skryptu. W konsoli raz zobaczysz element, raz null. Napisz, który wariant jest bezpieczniejszy na start nauki i dlaczego.

null oznacza „nic nie znaleziono”. Skrypt w head startuje, zanim przeglądarka dojdzie do akapitu w body.

Ćwiczenie 8. Mini-słowniczek średnie

W pliku notatki.txt zapisz własnymi słowami (1–2 zdania każde): edytor, debugger, język skryptowy, ECMAScript, skrypt zewnętrzny, tryb ścisły. Potem porównaj z hasłami w słowniczku podręcznika.

Sprawdź się

Pięć pytań zamkniętych. Po zatwierdzeniu zobaczysz, do których podrozdziałów wrócić.

1. Gdzie wykonuje się JavaScript na tych zajęciach?
2. Czym jest ECMAScript?
3. Który zapis dołącza skrypt z pliku?
4. Co zwraca prompt, gdy użytkownik kliknie Anuluj?
5. Po co na początku pliku JS wpisujemy "use strict";?

Wymagania na ocenę

Ocena wyższa zawiera wymagania na oceny niższe.

Ocena Uczeń
2 Identyfikuje JavaScript jako język skryptowy przeglądarki. Osadza skrypt w HTML według wzoru.
3 Uruchamia VS Code i konsolę DevTools. Rozróżnia skrypt wewnętrzny i zewnętrzny. Używa console.log i alert.
4 Odróżnia język skryptowy od kompilowanego oraz edytor od debuggeru. Charakteryzuje rolę ECMAScript. Stosuje komentarze i prompt.
5 Wyjaśnia przeglądarkę jako środowisko uruchomieniowe. Dobiera sposób osadzenia skryptu. Dba o wcięcia i nazwy. Wie, że liczy się działający, czytelny plik zgodny z poleceniem.
6 Porównuje warianty osadzania (kolejność względem HTML). Korzysta ze świadomej listy kontrolnej przed oddaniem pracy.

Lista „już umiem”

Rozdział 1. Następny: zmienne, typy i operatory.