docAplikacje internetowe Instrukcja do laboratorium 3
download 
Reklamacja Transkrypt
Aplikacje internetowe Instrukcja do laboratorium 3
Aplikacje internetowe
Instrukcja do laboratorium 3
Javascript w XHTML
JavaScript jest prostym językiem w którym pisze się małe "programiki" pod strony
internetowe. Wielu ludzi nie potrafi odróżnić języka JavaScript od języka Java. Nie wolno mylić
tych języków ponieważ są one całkiem odmienne. Zasadniczą różnicą jest to, że Java jest językiem
programowym, wymaga skompilowania, a JavaScript jest językiem skryptowym wykonywanym po
stronie klienta (w przeglądarce).
Skrypt JS umieszcza się w znaczniku <script>, który ma obowiązkowy atrybut type, a jego
wartością ma być text/javascript.
1. Utwórz nowy plik .html:
<?xml version="1.0" encoding="iso-8859-2" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"
dir="ltr">
<head>
<title>Moj pierwszy skrypt JS w XHTML</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=iso-8859-2"/>
<meta http-equiv="Content-Language" content="pl"/>
</head>
<body>
<script type="text/javascript">alert("Witaj!");</script>
<p>Treść strony</p>
</body>
</html>
Sprawdź działanie skryptu w przeglądarkach. Zauważ kiedy pojawia się treść strony.
Przenieś teraz skrypt poniżej treści strony, sprawdź działanie skryptu w przeglądarce.
Sprawdź czy strona jest zgodna ze standardem (http://validator.w3.org)
2. Zmień teraz skrypt JS na poniższy:
if (2 < 4) { alert("Witaj!"); }
Sprawdź działanie w przeglądarce, a następnie sprawdź zgodność ze standardem.
JavaScript zwykle zawiera znaki (<, &) , które nie mogą istnieć w dokumencie XHTML
poza sekcjami CDATA. Wobec tego jeśli w dokumencie xhtml musimy wstawić
wykonywanie skryptu, wstawiamy go w blok CDATA:
<script type="text/javascript">
<![CDATA[ if (2 < 4) { alert("Witaj!"); } ]]>
</script>
Uwaga, starsze przeglądarki mogą nie interpretować poprawnie CDATA, więc można sam
ten znacznik (i zamykający) wziąć w komentarze js /* <![CDATA[ */ i /* ]]> */
3.
O wiele wygodniej i często wydajniej jest umieszczać skrypty w osobnym pliku. Plik ma
zawierać wyłącznie JavaScript, dlatego nie trzeba używać w nim CDATA.
W elemencie <script> ścieżkę do pliku wskazuje atrybut src. Jeśli jest podany, to element
<script> ma pozostać pusty. Czyli tworzymy nowy plik skrypt.js, w którym zamieszczamy:
if (2 < 4) { alert("Witaj!"); }
A pliku html zamiast tamtego skryptu piszemy:
<script src="skrypt.js" type="text/javascript"></script>
4. Zmień teraz plik html, żeby miał postać:
<?xml version="1.0" encoding="iso-8859-2" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"
dir="ltr">
<head>
<title>Moj pierwszy skrypt JS w XHTML</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=iso-8859-2"/>
<meta http-equiv="Content-Language" content="pl"/>
<script src="skrypt.js" type="text/javascript"></script>
<link rel="stylesheet" href="skin.css" type="text/css" />
</head>
<body>
<div onclick="wyswietl('1');">Kliknij pierwszą warstwę</div>
<div onmouseover="wyswietl('2');">Najedź na drugą warstwę</div>
<div ondblclick="wyswietl('3');">Kliknij dwa razy trzecią warstwę</div>
</body>
</html>
W pliku skrypt.js zapisz poniższą funkcję:
function wyswietl(a) {
alert("Warstwa " + a);
}
Ściągnij też z materiałów plik skin.css i umieść go w folderze z plikiem html.
Sprawdź działanie strony w przeglądarce.
Kiedy zachodzi jakieś zdarzenie (ang. event) można kazać przeglądarce wywołać odpowiednią
funkcję, która je obsłuży (ang. event handler). Zdarzenia to wszystko co zachodzi w związku z
obiektami JavaScript (np. window) i elementami XHTML. Zdarzenia generuje np. najechanie
myszą i kliknięcie na element, wybranie elementu formularza, koniec ładowania strony, itp.
Niektóre zdarzenia:
● click - element został kliknięty myszą
Który przycisk został kliknięty można sprawdzić w obiekcie event. Przeglądarki wywołują
to zdarzenie również, gdy użytkownik aktywuje element z klawiatury. W przypadku
elementów formularza kliknięcie wywołuje również bardziej specyficzne zdarzenia jak
zmiana stanu (change) lub wysłanie dokumentu (submit) — w takim przypadku lepiej jest z
nich skorzystać, zamiast z ogólnego kliknięcia.
● dblclick - podwójne kliknięcie na element
●
●
●
●
mouseover i mouseout - kursor myszy odpowiednio najechał na element lub zjechał z niego
Te zdarzenia są przydatne do pokazywania dynamicznych menu i „dymków”, ale działa
tylko, gdy użytkownik używa myszy (niezależne od urządzenia są focus i blur). Dla
ułatwienia obsługi warto jest nieco opóźnić ukrywanie.
keypress - wciśnięcie klawisza (analogiczne do click).
load i unload - zachodzą na <body>, gdy dokument zostanie załadowany do końca (load) i
gdy użytkownik zamknie lub przejdzie do innego dokumentu (unload).
Przeglądarki mogą blokować lub ograniczać działanie unload (broniąc się przed złośliwymi
skryptami), dlatego nie można na nim polegać.
submit - Wysłanie formularza
Dodaj teraz jeszcze jedną warstwę, po zjechaniu z której myszką, wyświetli się jakiś
komunikat.
5. Zmień teraz w pliku html warstwy, dodając poszczególnym warstwom id oraz w funkcji
wyswietl zmień argument na this, np.:
<div id="pierwsza" onclick="wyswietl(this);">Kliknij pierwszą
warstwę</div>
W analogiczny sposób zmień pozostałe warstwy. A funkcję wyswietl podmień na poniższą:
function wyswietl(e) {
alert("Warstwa " + e.id);
}
Jak teraz działa skrypt?
to referencja do obiektu, na rzecz którego została wywołana metoda lub obiekt, który
wywołał zdarzenie.
this
6. Pod wszystkimi warstwami dodaj kolejną, z id=”ile”, wpisz do niej dowolny tekst, zaś w
poprzednich warstwach podmień funkcję wyswietl(this) na zdarzenie(this), Dopisz funkcję
zdarzenie i zmienne i1, i2, i3 do pliku skrypt.js:
var i1 = 0;
var i2 = 0;
var i3 = 0;
function zdarzenie(e) {
switch(e.id) {
case "pierwsza": i1++; break;
case "druga": i2++; break;
case "trzecia": i3++; break;
}
document.getElementById("ile").innerHTML='Warstwa 1 ma zdarzeń:
'+i1+'<br />Warstwa 2 ma zdarzeń: '+i2+'<br />Warstwa 3 ma zdarzeń:'+i3;
;
}
Wykorzystany jest tutaj funkcja getElementById, która zwraca nam element identyfikowany
przez nas po id, oraz atrybut elementu innerHTML, który pozwala zmieniać html wewnątrz
danego taga. W ten sposób możemy dynamicznie zmieniać treść strony.
Napisz teraz własną funkcję, która będzie podmieniała tekst w pierwszej warstwie po
kliknięciu jej na „Już kliknąłeś tutaj”.
7. Javascript pozwala również na dynamiczną zmianę stylu danego elementu.
Zmień teraz warstwę drugą na:
<div id="druga" onmouseover="zdarzenie(this);zmienstyl(this);"
onmouseout="powrot(this);">Najedź na drugą warstwę</div>
I w pliku skrypt.js dodaj dwie funkcje:
function zmienstyl(e) {
e.style.backgroundColor='#ff0';
}
function powrot(e) {
e.style.backgroundColor='white';
}
Samodzielnie teraz dodaj nową funkcję do pozostałych warstw tak, aby po najechaniu na nie
myszką kolor czcionki danej warstwy zmieniał się na czerwony i pozostawał taki aż
najedzie się myszką na inną warstwę.
8. Dodatkowym atrybutem stylu, który może się przydać jest visibility. Dodaj poniższe
warstwy do pliku html:
<div class="menu">
<div id="m1" onclick="ukryj(this);">Ukryj pierwszą</div>
<div id="m2" onclick="ukryj(this);">Ukryj drugą</div>
<div id="m3" onclick="ukryj(this);">Ukryj trzecią</div>
</div>
Natomiast do pliku skrypt.js dodaj kolejną funkcję:
function ukryj(e) {
switch(e.id) {
case "m1":a=document.getElementById("pierwsza");break;
case "m2":a=document.getElementById("druga");break;
case "m3":a=document.getElementById("trzecia");break;
}
if(a.style.visibility!='hidden') {
a.style.visibility='hidden';
}
}
Dodaj teraz do funkcji ukryj(e) opcję, żeby jeśli dana warstwa jest już ukryta, to po
kliknięciu kolejny raz pokazywała ją (visible) oraz tekst w warstwach m1,m2,m3 zmieniał
się odpowiednio: „Pokaż warstwę”, „Ukryj warstwę”.
9. Za pomocą JavaScript można w pełni kontrolować formularze na stronach, np. sprawdzać
poprawność danych umieszczonych w formularzach, zmieniać zachowanie elementów
formularza (np. pozwalać na wpisywanie tylko cyfr w polu tekstowym) oraz dynamicznie
pokazywać i ukrywać jego części.
Utwórz teraz nowy plik html, który będzie zawierał formularz:
<?xml version="1.0" encoding="iso-8859-2" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"
dir="ltr">
<head>
<title>Formularz</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=iso-8859-2"/>
<meta http-equiv="Content-Language" content="pl"/>
<script src="skrypt2.js" type="text/javascript"></script>
<link rel="stylesheet" href="form.css" type="text/css" />
</head>
<body>
<div><form id="fff" action="lab_js_form.html" onsubmit="return
sprawdz(this);">
<fieldset><legend>Formularz</legend>
<p><label for="imie">Imię:</label><input type="text" name="imie" id="imie"
value="Franciszek" /></p>
<p><label for="nazwisko">Nazwisko:</label><input type="text"
name="nazwisko" id="nazwisko" /></p>
<p><label for="email">E-mail:</label><input type="text" name="email"
id="email" /></p>
<p><label for="haslo">Hasło:</label><input type="password" name="haslo"
id="haslo" /></p>
<p><label for="haslo2">Powtórz hasło:</label><input type="password"
name="haslo2" id="haslo2" /></p>
<p><label for="dzien">Data urodzenia:</label><input type="text"
name="dzien" id="dzien" class="s" />
<select name="miesiac" id="miesiac">
<option value="0">--</option>
<option value="1">styczeń</option>
<option value="2">luty</option>
...
<option value="12">grudzień</option>
</select>
<input type="text" name="rok" id="rok" class="s ml0" />
</p>
<p><input type="submit" name="koniec" id="koniec" value="Wyślij"
class="button" /></p>
</fieldset>
</form>
</div>
</body>
</html>
Ściągnij kolejny css: form.css oraz utwórz nowy plik skrypt2.js, w którym będą zapisane
funkcje JS:
function sprawdz(f) {
if (f.elements["haslo"].value!="")
if (f.elements["haslo"].value==f.elements["haslo2"].value)
return true;
else alert("Powtórz to samo hasło");
else alert("Wpisz hasło");
return false;
}
Zauważ, że każdy element formularza ma dwa atrybuty: id i name. Id wykorzystujemy przy
odwoływaniu się do elementu jako składowej xhtmla (np.
document.getElementById('haslo')), natomiast atrybut name pozwala nam odwołać się do
elementów formularza (np. document.forms['fff'].elements['haslo']), a następnie pod takimi
nazwami wartości przekazywane są na stronę serwera.
Powyższy formularz przed wysłaniem (onsubmit) zostanie sprawdzony przez funkcję
sprawdz(f), gdzie w f przekazywany jest odnośnik do formularza. Jeśli funkcja zwróci false
formularz nie zostanie wysłany.
Powyższa funkcja sprawdza wyłącznie czy hasło nie jest puste, a jeśli nie, czy powtórne
hasło jest takie samo.
10. Rozbuduj funkcję sprawdz(f), tak żeby sprawdzała czy pola: imię, nazwisko i email nie są
puste, a także czy adres email jest sensowny (*@*.* gdzie * to dowolny znak). Sprawdź
także, czy dzień i rok urodzenia to cyfry i czy rok jest sensowny (nie mniejszy niż 1900, nie
większy niż aktualny).
11. Dodaj teraz dodatkowe elementy w formularzu: jeden (przed datą urodzenia), w którym
będzie się zaznaczało płeć (element select, checkbox albo radio), a drugi początkowo
niewidoczny – nazwisko panieńskie. Jeśli użytkownik wybierze płeć – kobieta (zdarzenie
onchange dla selectu albo onclick dla radio/checkbox), ukryj element odnoszący się do daty
urodzin (document.getElementById('name').style.visibility = 'visible' lub 'hidden'), a pokaż
element: nazwisko panieńskie. Odwrotnie jeśli wybrana zostanie płeć – mężczyzna.
Funkcja sprawdz(f) ma działać tak samo jak w punkcie 9.
Strona ma być zgodna ze standardem xhtml 1.0 (http://validator.w3.org).
