Rozgrzewka: plansza z poprzedniej lekcji

1. Ile elementów ma tablica utworzona zapisem Array(9).fill("")?
2. Co jest zapisane w każdym elemencie tej tablicy na starcie gry, zanim ktokolwiek kliknie?
3. Do czego służy atrybut data-index na przycisku planszy?

Pętla for: jeden nasłuch, dziewięć przycisków

Na godzinie 1 podpięliście addEventListener do jednego przycisku. Plansza ma dziewięć przycisków - zamiast pisać dziewięć razy ten sam kod, document.getElementsByClassName("cell") (lekcja 21) zwraca kolekcję wszystkich przycisków naraz, a pętla for przechodzi po niej i do każdego podpina tę samą funkcję.

Ciekawostka z Wikipedii: kółko i krzyżyk ma dużo dłuższą historię, niż widać po tej planszy. Podobne gry z trzema polami w rzędzie grano już w starożytnym Egipcie ponad 3000 lat temu, a w Rzymie pod nazwą terni lapilli. W 1952 roku brytyjski informatyk Sandy Douglas zaprogramował ją na komputerze EDSAC jako grę OXO - jedną z pierwszych gier komputerowych w historii.

event.target.dataset: numer pola z atrybutu HTML

Wszystkie przyciski wywołują tę samą funkcję handleMove - ale każdy ma inny numer pola zapisany w atrybucie data-index. Właściwość dataset elementu (event.target z godziny 1 tego tematu) czyta te atrybuty jako zwykły tekst.

handleMove: czy pole jest puste?

function handleMove(event) {
  const index = event.target.dataset.index;
  if (board[index] !== "") {
    return; // pole zajęte, nic nie rób
  }
  board[index] = currentPlayer;
  event.target.textContent = currentPlayer;
}

Kolejność ma znaczenie: najpierw sprawdzacie, czy board[index] jest puste (""). Dopiero gdy jest puste, wpisujecie znak gracza do tablicy board (dane) i do textContent przycisku (to, co widać na ekranie) - dwa różne miejsca, ten sam znak.

currentPlayer: operator warunkowy przełącza X na O

currentPlayer = currentPlayer === "X" ? "O" : "X";

Ten sam efekt da zapis z if: if (currentPlayer === "X") { currentPlayer = "O"; } else { currentPlayer = "X"; } - operator warunkowy (? :) to krótszy zapis tego samego „jeśli-inaczej” (dział Warunki, lekcje 7-8).

Tak pytają na egzaminie

1. Funkcja JavaScript powinna być wywołana za każdym razem, gdy użytkownik wpisze dowolny znak do pola edycji. Którego zdarzenia należy użyć?

1. onload
2. onclick
3. onkeydown
4. onmouseout

Ćwiczenie: kliknięcie pola zapisuje ruch

1. Otwórz tic-tac-toe.html i tic-tac-toe.js z poprzedniej lekcji (plansza z dziewięcioma przyciskami klasy cell, każdy z data-index od 0 do 8, tablica let board = Array(9).fill("")).
2. Dodaj zmienną let currentPlayer = "X"; - kto zaczyna.
3. Pętlą for po document.getElementsByClassName("cell") podepnij addEventListener("click", handleMove) do każdego z dziewięciu przycisków.
4. Napisz funkcję handleMove(event): odczytaj event.target.dataset.index, sprawdź, czy board[index] === "".
5. Jeśli pole jest puste: wpisz currentPlayer do board[index] i do event.target.textContent, potem przełącz gracza operatorem warunkowym.
6. Sprawdź w przeglądarce: kliknij kilka pól po kolei - znaki mają się zmieniać X, O, X, O; kliknięcie zajętego pola ma nic nie robić.
7. Dla chętnych: zapisz zmiany w swoim repozytorium - commit „Dodaję obsługę kliknięcia pola”.

// tic-tac-toe.js (dopisane do pliku z poprzedniej lekcji)
let board = Array(9).fill("");
let currentPlayer = "X";
const cells = document.getElementsByClassName("cell");
for (let i = 0; i < cells.length; i++) {
  cells[i].addEventListener("click", handleMove);
}
function handleMove(event) {
  const index = event.target.dataset.index;
  if (board[index] !== "") {
    return;
  }
  board[index] = currentPlayer;
  event.target.textContent = currentPlayer;
  currentPlayer = currentPlayer === "X" ? "O" : "X";
}

A jak to wygląda w produkcji?