Rozdział 22 · Tworzenie stron internetowych z Python

JavaScript: programowanie w przeglądarce

Język programowania odpowiedzialny za zachowanie strony w przeglądarce: reakcję na działania użytkownika i zmiany w treści.

JavaScript (JS) — język programowania, szeroko stosowany w web-developmencie. Rdzeń języka jest standaryzowany przez specyfikację ECMAScript (ECMA-262). W przeglądarce JavaScript realizuje logikę programową strony: obsługuje zdarzenia, pracuje z DOM, zmienia zawartość strony i może wysyłać zapytania sieciowe.

Główne właściwości JavaScript

JavaScript dodaje stronie zachowanie: reakcja na kliknięcia, zmiana zawartości bez przeładowania strony, sprawdzanie formularza przed wysłaniem. JavaScript nie jest potrzebny na każdej stronie: prosty artykuł lub dokument dobrze działają na jednym HTML (plus CSS do formatowania) — przeglądarka wyświetla taką stronę bez ani jednej linijki JavaScript. JavaScript potrzebny jest właśnie tam, gdzie strona musi reagować na działania użytkownika bez nowego żądania do serwera.

DOM jest widokiem strony, z którym pracuje JavaScript

Gdy przeglądarka analizuje HTML, tworzy drzewo obiektów w pamięci z tagów — DOM (Document Object Model). JavaScript nie edytuje tekstu źródłowego pliku HTML- — znajduje pożądany węzeł w tym drzewie i go zmienia:

<button id="knopka">Нажми меня</button>
<p id="tekst">Пока ничего не произошло.</p>

<script>
  const knopka = document.getElementById("knopka");
  const tekst = document.getElementById("tekst");

  knopka.addEventListener("click", function () {
    tekst.textContent = "Кнопку нажали!";
  });
</script>

addEventListener("click", ...) podpisuje funkcję na wydarzenie — kliknij przycisk. Jest wiele wydarzeń: "click", "submit" (złożenie formularza), "input" (wprowadzanie tekstu) i inne – kod jest wykonywany tylko wtedy, gdy zdarzenie jest ważne wydarzyło się.

Weryfikacja formularza bezpośrednio w przeglądarce

JavaScript może sprawdzić pole formularza przed wysłaniem — i od razu wyświetlić podpowiedź bez Czekam na odpowiedź serwera:

forma.addEventListener("submit", function (event) {
  if (pole.value.trim() === "") {
    event.preventDefault();
    oshibka.textContent = "Поле не должно быть пустым";
  }
});

event.preventDefault() powstrzymuje regularne wysyłanie formularzy — strona nie zostanie ponownie załadowana, dopóki błąd nie zostanie naprawiony. Nadal ten sam sprawdzenie Musi być powtarzane na serwerze (sekcja 22.31): użytkownik może wysyłać Żądanie bez przeglądarki, omijając wszelkie JavaScript.

fetch() — żądanie do serwera bez ponownego ładowania strony

Funkcja fetch() wysyła zapytanie HTTP- z JavaScript i otrzymuje odpowiedź, nie przeładowując całej strony:

fetch("/api/tasks")
  .then(function (response) { return response.json(); })
  .then(function (data) { console.log(data); });

Co to jest /api/tasks i co dokładnie odpowiada na takie żądanie — Więcej informacji można znaleźć w sekcji 22.16.

Trzy języki razem — HTML, CSS JavaScript — tworzą właśnie „frontend”

Oficjalna dokumentacja: MDN — JavaScript, ECMA-262 (ECMAScript).