← Lekcje
JavaScript · lekcja 02

JavaScript 2/2:
konsola przeglądarki i pierwsze instrukcje

Dzisiaj:

  1. Konsola przeglądarki (F12) - gdzie programista widzi wyniki swojego kodu
  2. console.log a document.write - dwa różne wyjścia
  3. Pierwsze instrukcje: zmienna, zwiększenie wartości, wypisanie wyniku
  4. Czytanie czerwonego komunikatu błędu w konsoli
Rozgrzewka · 3 minuty

Rozgrzewka: poprzednia lekcja

  1. Gdzie wykonuje się kod JavaScript: na serwerze czy w przeglądarce?
  2. Wymieńcie dwa sposoby wstawienia kodu JavaScript do strony, które nadają się na start (bez atrybutu inline).
  3. Dlaczego znacznik <script> umieszczamy na końcu <body>, a nie w <head>?
Część 1 · Narzędzia deweloperskie

Konsola przeglądarki

Konsola JavaScript to narzędzie do sprawdzania, czy kod działa tak, jak powinien. Otwiera się klawiszem F12 (na Windows też Ctrl+Shift+I), potem zakładka Console. Konsola pokazuje wszystko, co kod wypisze poleceniem console.log, a także błędy, które napotka po drodze.

page.html - przeglądarka Strona internetowa Console > console.log("start"); start < undefined
MDN: Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools (sekcja „The JavaScript console”, skróty klawiszowe otwarcia narzędzi)
Część 2 · Trzy wyjścia

console.log, document.write, alert

To trzy różne sposoby pokazania wyniku działania skryptu. Trafiają w zupełnie inne miejsca:

console.log(x) notatka dla programisty Console 11 widoczne tylko w konsoli (F12) document.write(x) pisze wprost na stronie page.html 11 MDN: odradzane alert(x) okno wyskakujące Ta strona mówi: 11 OK blokuje stronę do kliknięcia OK
MDN: Web/API/Document/write (ostrzeżenie „Use of the document.write() method is strongly discouraged”); What_are_browser_developer_tools (przykład użycia alert w konsoli)
Część 3 · Pierwsze instrukcje

Zmienna, zwiększenie, wypisanie

Trzy linijki, trzy różne instrukcje - dokładnie to, co za chwilę wpiszecie w ćwiczeniu:

var x = 10;
x++;
console.log(x);
LinijkaCo robi
var x = 10;tworzy zmienną x i wstawia do niej wartość 10
x++;zwiększa wartość x o 1 (skrót od x = x + 1)
console.log(x);wypisuje bieżącą wartość x do konsoli

Wynik: w konsoli pojawi się 11 (do sprawdzenia w przeglądarce; sprawdzone też w Node.js).

Ciekawostka z Wikipedii: całą tę składnię (zmienne, operator ++, wywołanie funkcji) Brendan Eich napisał w 1995 roku w zaledwie dziesięć dni - tyle czasu dał mu Netscape przed premierą przeglądarki Navigator 2.0.

CKE, E.14, styczeń 2017, zad. 38 (bank pytań, ten sam kod) · ciekawostka: en.wikipedia.org/wiki/Brendan_Eich
Część 4 · Gdy coś nie działa

Czytanie błędu w konsoli

Literówka w nazwie console (np. consol.log) zatrzymuje skrypt i konsola pokazuje czerwony komunikat. Taki komunikat ma dwie części: co się stało i gdzie w pliku.

Uncaught ReferenceError: consol is not defined script.js:4:1 co się stało: nazwa consol nie istnieje gdzie: plik script.js, linia 4 poprawka: zmienić consol na console
MDN: Learn_web_development/Core/Scripting/What_went_wrong (sekcja o czytaniu komunikatu błędu: „co się stało” i „gdzie w pliku”)
Egzamin INF.03

Tak pytają na egzaminie

1. W języku JavaScript zapisano fragment kodu.

<script>
var x = 10;
x++;
console.log(x);
</script>

Po wykonaniu skryptu zmienna x

  1. będzie równa 11 i zostanie wypisana w oknie popup.
  2. będzie równa 10 i zostanie wypisana w dokumencie HTML.
  3. będzie równa 11 i zostanie wypisana w konsoli przeglądarki internetowej.
  4. będzie równa 10 i zostanie wypisana w głównym oknie przeglądarki internetowej.
CKE, E.14, styczeń 2017, zad. 38 · CKE, E.14, styczeń 2019, zad. 39
Ćwiczenie przy komputerze · 15 minut

Ćwiczenie: pierwsze instrukcje i błąd

  1. Otwórz script.js z poprzedniej lekcji (w folderze swojego projektu).
  2. Dopisz trzy linijki: var x = 10; x++; console.log(x);
  3. Otwórz page.html w przeglądarce, wciśnij F12 i otwórz zakładkę Console - sprawdź, czy widać 11 (do sprawdzenia w przeglądarce).
  4. Celowo zrób literówkę: zamień console.log na consol.log, zapisz i odśwież stronę.
  5. Przeczytaj czerwony komunikat w konsoli: jaki błąd i w której linii? Popraw literówkę z powrotem.
  6. Zapisz poprawiony plik i odśwież stronę - sprawdź, że w konsoli znowu widać 11.
Na koniec

Sprawdź się

  1. Czym różni się console.log od document.write?
  2. Jakie dwie informacje znajdziesz w czerwonym komunikacie błędu w konsoli?
  3. Ile będzie wynosić x po wykonaniu var x = 10; x++;?

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

Poza szkołą

A jak to wygląda w produkcji?

Na lekcjiW produkcjiStatus
console.log do sprawdzania wartościZostawiony w kodzie trafiłby do każdego użytkownika strony; przed publikacją usuwają go narzędzia (linter, np. reguła ESLint no-console) albo bundler.narzędzia
document.writeZastąpiony zmianą zawartości elementu przez DOM (ang. Document Object Model, czyli strukturę strony w pamięci przeglądarki; element.textContent = ...), bo document.write może wyczyścić całą stronę po jej wczytaniu.przestarzałe
alert do pokazania wynikuBlokuje całą stronę do kliknięcia OK; w aplikacji produkcyjnej wynik pokazuje się w treści strony albo w konsoli, nigdy przez alert.przestarzałe
Czytanie błędu ręcznie w konsoliBłędy z przeglądarek wszystkich użytkowników zbierają automatycznie narzędzia do monitoringu (np. Sentry, Bugsnag) i zgłaszają zespołowi.narzędzia
MDN: Web/API/Document/write (ostrzeżenie o czyszczeniu strony)