← Lekcje
JavaScript · lekcja 01

JavaScript 1/2:
skąd przeglądarka bierze kod

Dzisiaj:

  1. Czym jest JavaScript i gdzie się wykonuje? Różnica względem PHP
  2. Trzy sposoby wstawienia kodu JavaScript do strony
  3. Kolejność wczytywania strony i skryptu
  4. Ćwiczenie przy komputerze: pierwszy własny plik JavaScript
Rozgrzewka · 3 minuty

Co już wiecie?

Zanim dołożymy zachowanie, wracamy do tego, co już opisuje i ubiera Waszą stronę.

  1. Za co na stronie odpowiada HTML, a za co CSS?
  2. Jak dołączacie zewnętrzny plik style.css do strony?
  3. Co pokazuje przeglądarka po wciśnięciu Ctrl+U?
MDN: developer.mozilla.org/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax · .../Styling_basics/What_is_CSS
Część 1 · Trzecia warstwa strony

Czym jest JavaScript?

JavaScript to język, który dodaje stronie WWW zachowanie: reaguje na kliknięcia, zmienia treść bez przeładowania strony, sprawdza dane w formularzu jeszcze przed wysłaniem. HTML, CSS i JavaScript to trzy warstwy jednej strony:

WarstwaDo czego służy
HTMLstruktura i treść strony (kurs HTML)
CSSwygląd i styl strony
JavaScriptzachowanie strony - reakcja na to, co robi użytkownik

Życiowe porównanie: HTML to ciało strony, CSS to jej ubranie, JavaScript to mięśnie, które pozwalają się ruszać.

Kod JavaScript jest interpretowany: przeglądarka czyta go i wykonuje bezpośrednio, linijka po linijce, bez wcześniejszego tłumaczenia na inny format.

MDN: Learn_web_development/Core/Scripting/What_is_JavaScript (sekcje „A high-level definition”, „Interpreted versus compiled code”)
Część 2 · Dwa miejsca wykonania

Gdzie wykonuje się kod?

PHP wykonuje się na serwerze - zanim przeglądarka cokolwiek zobaczy, serwer zamienia kod PHP na gotowy HTML. JavaScript wykonuje się inaczej: dopiero w przeglądarce, na komputerze ucznia, już po tym jak strona się wczyta.

SERWER Apache + PHP kod PHP wykonuje się tutaj (zanim strona trafi do przeglądarki) wysyła gotowy HTML PRZEGLĄDARKA komputer ucznia JavaScript wykonuje się tutaj (od dziś)
MDN: What_is_JavaScript (sekcja „Server-side versus client-side code”)
Część 3 · Trzy sposoby

Trzy sposoby wstawienia JavaScript

WEWNĄTRZ STRONY na końcu <body> <script> console.log("start"); </script> nadaje się na start PLIK ZEWNĘTRZNY kod w osobnym pliku .js <script src="script.js"> </script> łatwo użyć na kilku stronach ATRYBUT INLINE kod wewnątrz znacznika HTML <button onclick="run()"> Kliknij</button> MDN: odradzane
MDN: What_is_JavaScript (sekcje „Internal JavaScript”, „External JavaScript”, „Inline JavaScript handlers”)
Część 4 · Kolejność ma znaczenie

Kiedy skrypt się wykona?

Przeglądarka czyta i wykonuje kod strony po kolei, od góry do dołu. Skrypt na końcu <body> wykona się dopiero wtedy, gdy cała reszta strony jest już wczytana - to najprostszy i najbezpieczniejszy sposób na start.

<script> na końcu <body> HTML wczytywane skrypt się wykonuje (cała strona gotowa) ✓ bezpiecznie <script> w <head>, bez defer skrypt próbuje się wykonać HTML wczytywane (jeszcze nie gotowe) ⚠ ryzyko - element może nie istnieć

Ciekawostka z MDN: skrypt z atrybutem defer wykonuje się dopiero po wczytaniu całej strony, ale zawsze w takiej kolejności, w jakiej występuje w dokumencie. Podobny atrybut async takiej gwarancji nie daje: skrypty z async mogą wykonać się w innej kolejności niż w kodzie, bo o kolejności decyduje to, który plik pobierze się szybciej.

MDN: What_is_JavaScript (sekcja „Script loading strategies”) · ciekawostka: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script (sekcje „defer”, „async”)
Egzamin INF.03

Tak pytają na egzaminie

1. Zadanie z rysunkiem opisane tekstem: „1. Wyświetlić okno do wpisania wartości z poleceniem «Podaj kwalifikację: », następnie po zatwierdzeniu 2. Umieścić napis na stronie internetowej, gdzie w miejscu kropek znajduje się wartość pobrana z okna «Kwalifikacja: ...»”. Aby w JavaScript wykonać wymienione kroki, należy w znaczniku <script> umieścić kod

  1. A = prompt("Podaj kwalifikację: "); document.write("Kwalifikacja: " + A);
  2. A = prompt("Podaj kwalifikację: "); document.write("Kwalifikacja: ".A);
  3. A = alert("Podaj kwalifikację: "); document.write("Kwalifikacja: " + A);
  4. A << prompt("Podaj kwalifikację: "); document.write("Kwalifikacja: " + A);

2. Wykonanie kodu JavaScript w przeglądarce wymaga

  1. debugowania.
  2. kompilowania.
  3. interpretowania.
  4. zamiany na kod maszynowy.
CKE, E.14, czerwiec 2020, zad. 36 (w oryginale rysunek z dwoma krokami, opisany tekstem powyżej) · CKE, E.14, wrzesień 2015, zad. 32 (bank pytań, przedmiot strony, temat javascript)
Ćwiczenie przy komputerze · 15 minut

Ćwiczenie: pierwszy plik JavaScript

  1. W swoim folderze na strony utwórz plik page.html: podstawowy szkielet HTML (<html>, <head>, <body>).
  2. Na końcu <body>, tuż przed </body>, dodaj <script>console.log("start");</script>.
  3. Utwórz osobny plik script.js z treścią console.log("plik zewnętrzny");.
  4. W page.html dodaj drugi znacznik, za pierwszym: <script src="script.js"></script>.
  5. Otwórz page.html w przeglądarce, wciśnij F12 i w zakładce Console sprawdź, czy widać oba napisy: „start” i „plik zewnętrzny” (do sprawdzenia w przeglądarce).
  6. Dla chętnych: dopisz w script.js drugą linijkę console.log("druga linijka"); i sprawdź, gdzie pojawi się w konsoli.
Na koniec

Sprawdź się

  1. Czym różni się plik zewnętrzny (src) od wewnętrznego <script>?
  2. Dlaczego umieszczamy <script> na końcu <body>, a nie zaraz na początku strony?
  3. Co to znaczy, że JavaScript jest językiem interpretowanym?

Na następnej lekcji: operatory i pierwsze zmienne w JavaScript.

Poza szkołą

A jak to wygląda w produkcji?

Na lekcjiW produkcjiStatus
Skrypt wpisany na końcu <body>Bundler (np. Vite, Webpack) łączy pliki w jeden, wstawiany zwykle w <head> z atrybutem defer albo type="module".zastępowane (nowocześniejszym sposobem)
Atrybut inline onclick="..."addEventListener() wywoływany z osobnego pliku JavaScript, bez mieszania kodu z HTML.przestarzałe (odradzane)
Jeden plik ze wszystkimWiele plików JavaScript połączonych przez moduły (import/export) i bundler.narzędzia
JavaScript jako dodatek do stronyJavaScript jest używany po stronie klienta na 98,9% stron internetowych.nadal w użyciu
MDN: What_is_JavaScript (sekcje „Using addEventListener instead”, „Script loading strategies”) · W3Techs, „Usage Statistics of JavaScript as Client-side Programming Language” (98,9%)