R 21 07 (2)

[ Pobierz całość w formacie PDF ]
.Co więcej, plansza ma stanowić najniższąwarstwę strony, a zatem atrybutowi z-index wszystkich jej elementów należy przypi-sać wartość 0.Trzeba także zadbać o to, aby poszczególne elementy tworzące planszębyły widoczne; w tym celu posłużysz się właściwością visibility.Chcesz także, bykliknięcie planszy spowodowało wygenerowanie zdarzenia.W tym celu, w każdym zeznaczników div zdefiniuj atrybut onclick, a w nim przypisz wartość zmiennej identy-fikującej kliknięte pole planszy i wywołaj funkcję update(), która wyświetli na plan-szy odpowiedni pionek.Analizując poniższy kod HTML tworzący planszę do gry,zwróć uwagę, iż każdy element div posiada unikalne wartości atrybutów id, top orazleft.Gdy użytkownik kliknie jedno z pól planszy, zmiennej position przypisywanajest odpowiednia wartość.Wartość ta zostanie wykorzystania w funkcji update().Rozdział 21.Użycie Dynamicznego HTML a 627Na rysunku 21.13 przedstawiłem wygląd tworzonej strony WWW, w jej aktualnej postaci.628 Część 7.JavaScript i Dynamiczny HTMLRysunek 21.13.Tytuł strony(znajdujący siępoza widoczną częściąstrony) oraz planszado gry po określeniupołożeniaA zatem plansza do gry została już stworzona.Teraz powinieneś zająć się zdefiniowa-niem pionów.Zgodnie z oryginalnym pomysłem zdecydowałam się stworzyć zarównopiony O, jak i X i umieścić je nad każdym polem planszy.Początkowo piony te będąniewidoczne.Gdy użytkownik kliknie jedno z pól planszy, skrypt określi, jakimi pio-nami gra dana osoba (X bądz O) i wyświetli odpowiedni obrazek.Rozdział 21.Użycie Dynamicznego HTML a 631O rany! To był naprawdę długi fragment kodu.Teraz należałoby wyświetlić kilka in-formacji, aby użytkownicy wiedzieli, jak należy grać i czyścić planszę.Także instrukcjezostaną wyświetlone przy użyciu dobrze już znanego znacznika div.Stworzysz takżeformularz zawierający przycisk Wyczyść planszę.Instrukcje:Aby grać, należy kliknąć pole, na którym nie ma ani O ani X.Pierwszy gracz gra pionami X, a drugi O.Celem gry jest umieszczeniena planszy trzech swoich pionów w linii prostej - poziomo, pionowolub po przekątnej.Aktualną postać strony przedstawiłem na rysunku 21.14.632 Część 7.JavaScript i Dynamiczny HTMLRysunek 21.14.Strona po dodaniuinstrukcji oraz przyciskuczyszczącego planszęPonieważ chcemy mieć pełną kontrolę nad wyglądem strony, także ten element zostałumiejscowiony bezwzględnie.Znacznik formularza nie zawiera atrybutu action animethod, nie są one potrzebne, gdyż jedynym zadaniem formularza jest wyświetlenieprzycisku submit, który umożliwi wywołanie funkcji window.location.reload().Wykonanie tej funkcji spowoduje ponowne wyświetlenie strony w przeglądarce.Skrypty obsługujące stronęA zatem strona jest gotowa.Teraz można zająć się skryptem, który ożywi naszą stro-nę DHTML.W pierwszej kolejności stwórz znacznik script i na samym jego początku zdefiniujkilka zmiennych, które będą wykorzystywane w dalszej części skryptu.Zauważ, iżbezpośrednio za otwierającym znacznikiem script umieściłam początek komentarzaHTML () przed zamykającym znacznikiem script.Komentarze języka JavaScript rozpoczy-nają się od dwóch znaków ukośnika (//).= 4));var is_ie = (agt.indexOf("msie") != -1);var is_ie4up = (is_ie && (is_major >= 4));W celu sprawdzenia, czy używana przeglądarka to Netscape Navigator lub InternetExplorer w wersji 4 lub wyższej, możesz posłużyć się następującym fragmentem kodu:if (is_nav4up) { zrób coś.}if (is_ie4up) { zrób coś.}Pierwsza funkcja jest wywoływana w momencie zakończenia pobierania strony i służydo inicjalizacji skryptu.Aby śledzić ruchy kolejnych graczy, przypisz zmiennej cur-rentplayer wartość player1 [ Pobierz całość w formacie PDF ]

Podstrony