Interakcyjna strona WWW
Transkrypt
Interakcyjna strona WWW
Interakcyjna strona WWW Chcemy aby obiekty w dokumencie .html reagowały na zdarzenia wywołane przez użytkownika, na przykład kliknięcie, zmiana położenia myszy, naciśnięcia klawisza. Obsłużymy te zdarzenia za pomocą skryptu napisanego w języku JavaScript. Przeglądarki zawierają interpreter języka JavaScript, który będzie tłumaczyć kolejne instrukcje i natychmiast je wykonywać (to nie jest kompilator, który utworzyłby kod wykonywalny całego skryptu i dopiero go wykonał !!!) W części <head> dokumentu .html umieszcza się skrypt ujęty w znaczniki <script> </script>, można też dołączyć skrypt umieszczony w osobnym pliku z rozszerzeniem .js <script src=”plik.js”> Przykład: Dokument o żółtym tle, z przyciskiem. Po kliknięciu przycisku kolor tła zmieni się na czerwony. <!doctype html> <html> <head> <style> body { background: yellow} </style> <script> window.onload = function() { document.getElementById("xxx").addEventListener("click",zmien,false) } function zmien() { document.body.style.background = "red" } </script> </head> <body> <input type="button" value=”zrób czerwne tło" id="xxx"/> </body> </html> Jak to działa: Zdarzenie window.onload zachodzi gdy załaduje się treść dokumentu html, nawet jeszcze przed załadowaniem ewentualnej grafiki. Z tym zdarzeniem związujemy funkcję anonimową (bez nazwy). Polecenia w niej zawarte zostaną wykonane automatycznie natychmiast po załadowaniu treści dokumentu. Do obiektu o idetyfikatorze np. id=”xxx” w dokumencie .html można odwołać się za pomocą funkcji: document.getElementById("xxx") Mając dostęp do obiektu, można odczytać i ustawić jego właściwości stylu, np. kolor tła, kolor czcionki, wielkość, położenie. Przykłady: document.body.style.background = "red" document.body.style.color = "#00FF00" - ustawia kolor tła na czerwony - ustawia kolor czcionki na zielony document.getElementById("xxx").value = "kliknij mnie" - ustawia treść napisu na obiekcie o id=”xxx” Można także dodać do obiektu funkcję „nasłuchiwacza zdarzeń”: addEventListener Wówczas obiekt będzie reagować na wybrane zdarzenie. Funkcja ta pobiera 3 parametry: rodzaj zdarzenia, np. ”click”, ”mousemove”, ”keypress”, nazwę funkcji, którą należy wykonać gdy wybrane zdarzenie wystąpi, decyzję czy po wykonaniu zadanej funkcji propagować zdarzenie dalej w systemie (true), czy zakończyć jego obsługę (false). • • • Przykład: document.getElementById("xxx").addEventListener("click",zmien,false) oznacza: przy kliknięciu obiektu xxx wykonaj funkcję zmien() i zakończ obsługę tego zdarzenia Inny przykład funkcji zmien() Ta funkcja wybiera losowo kolor z 6-elementowej tablicy kolorów i ustawia go jako kolor tła dokumentu function zmien() { var K = new Array("green","yellow", "blue", "orange", "lime", "red") var i = Math.floor(Math.random()*6) document.body.style.background = K[i] } Math.random() zwraca losową wartość z przedziału (0,1) Math.floor(x) obcina wartość x do najbliższej liczby całkowitej <=x Tablicę w języku JavaScript można deklarować tak: var var var var var K K K K n = = = = = []; new Array(); [5,2,3]; new Array(5,2,3); K.length; // pusta tablica // też pusta tablica // tablica o danych wartościach elementów // też tablica o danych wartościach elementów // zwraca liczbę elementów w tablicy, może ona ulegać zmianie. Pożyteczna bywa funkcja alert() która wyświetla małe okienko komunikatu. Parametrem funkcji może być stała tekstowa, lub jakaś zmienna, lub ich połączenie, np: alert(”Hello World”) alert(n) alert(”n=” + n) Instrukcje w języku JavaScript mogą, ale nie muszą kończyć się znakiem średnika ; jeśli jednak piszesz dwie instrukcje w tej samej linii pliku, to średnik oddzielający je jest konieczny.