docInterakcyjna strona WWW
download 
Reklamacja 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.
