JS_w4

JavaScript - wykład 4

Zdarzenia i formularze

Beata Pańczyk

Obsługa zdarzeń

• zdarzenia - 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.

• kiedy zachodzi jakieś zdarzenie (ang. event) –

przeglądarka moŜe wywołać odpowiednią funkcję, która je
obsłuŜy (ang. event handler)

• XHTML posiada atrybuty: onclick, onmouseover,

onload, słuŜące do prostej obsługi zdarzeń i za pomocą
JavaScript pozwalają modyfikować obsługę zdarzeń
„w locie”

• Zdarzenie moŜe obsłuŜyć kaŜda funkcja JavaScript
• Funkcje przypisuje się do obiektów lub elementów

XHTML (przez DOM) za pomocą addEventListener()

element.addEventListener(funkcja, zdarzenie, kolejność)

Zdarzenia

• Mysz

• Klawiatura

• Logiczne

• Obiekt event - funkcja obsługująca

zdarzenie jako pierwszy argument dostanie
obiekt, który zawiera szczegółowe
informacje o zdarzeniu i pozwala
kontrolować dalszy jego los

Mysz

• click - element został kliknięty myszą. Który

przycisk został kliknięty moŜna sprawdzić w
obiekcie event; zachodzi równieŜ przy aktywacji
elementu z klawiatury.

• dblclick - podwójne kliknięcie na element
• mousedown i mouseup - bardziej szczegółowa

reakcja na kliknięcie - gdy przycisk został
wciśnięty i puszczony

• mouseover i mouseout - przydatne do

pokazywania dynamicznych menu i „dymków”,
działają tylko, gdy uŜytkownik uŜywa myszy
(niezaleŜne od urządzenia są focus i blur)

Klawiatura

• keypress - wciśnięcie klawisza

(analogiczne do click); obiekt event będzie
zawierał kod wciśniętego klawisza

• keydown i keyup - moment wciśnięcia i

puszczenia klawisza (podobnie jak
mousedown i mouseup)

Logiczne

• focus i blur - to stan, gdy np. pole tekstowe czeka

na wpisanie tekstu lub odnośnik został zaznaczony
z klawiatury. Te zdarzenia zachodzą, gdy element
zyskuje lub traci focus

• 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

Obsługa zdarzeń

• Obsługa zdarzeń – w ciele dokumentu

• MoŜliwość obsługi w znacznikach:

– <body>

– <a>

– <img>

– <form>

– <input>

– <textarea>

– <select>

Funkcja obsługi zdarzenia

• funkcja obsługi zdarzenia - reakcja na zdarzenie

• funkcje obsługi zdarzeń wywoływane atrybutami

onEvent="kod_JavaScript"

umieszczanymi w obrębie znaczników elementów,
do których mają odnosić się śledzone zdarzenia

• funkcja obsługi zdarzenia moŜe przyjmować jedną

z dwu form:

– wywołanie funkcji

– kod bezpośredni

Funkcja obsługi zdarzenia -

przykład

href="url"

onMouseOver = "kod_javascriptu"
onMouseOut = "funkcja_javascriptu()"

tekst odsyłacza, który pojawi si

na stronie

</a>

Zdarzenie

onMouseOver

i onMouseOut

  <a href="http://www.lublin.pl"
  onmouseover="confirm('Najpiękniejsze miasto świata!')"
  onmouseout="alert('Opuszczasz Lublin?')" >  Lublin </a>

Zdarzenie

onClick

<a href="http://www.lublin.pl"

onclick="confirm('Poł

czenie z Lublinem')">

Lublin

</a>

Zdarzenie

onLoad i unLoad

<body

onload="alert('Witaj !!!')"
onunload="alert('

egnaj!!!')" >

Zdarzenie unload – blokowane przez przeglądarki

Zdarzenie

onFocus

• Wywoływane w chwili przeniesienia kursora

w pole tekstowe

• Występuje przed zdarzeniem

onBlur

• Znaczniki: <body>, wszystkie elementy

formularzy

• Przykład

<input type="text" name="email"

onfocus="this.value='';">

Zdarzenie

onBlur

• Wywoływane w chwili opuszczania pola

tekstowego (po zdarzeniu

onFocus

)

• Znaczniki: <body>, wszystkie elementy

formularzy

• Przykład

<input type="text" name="email"

onfocus="this.value='';"

onblur="sprawdz(this.value);">

Zdarzenie

onChange

• Wywoływane w chwili opuszczania pola

tekstowego, którego zawartość została
zmieniona (po zdarzeniu

onFocus

)

• Elementy formularzy: select, text, textarea,

password

• Przykład

<input type="text" name="email"

onchange="sprawdz(this.value);">

Zdarzenie

onSelect

• Wywoływane w chwili podświetlenia tekstu

wewnątrz pola tekstowego (po zdarzeniu

onFocus

)

• Elementy formularzy: select, text, textarea,

password

• Przykład

<input type="text" name="email"

onselect="sprawdz(this.value);">

Formularze

• Za pomocą JavaScript moŜna w pełni kontrolować

formularze na stronach:

– sprawdzać poprawność danych umieszczonych

w formularzach

– zmieniać zachowanie elementów formularza

(np. pozwalać na wpisywanie tylko cyfr w polu
tekstowym)

– dynamicznie pokazywać i ukrywać jego części.

• MoŜna skorzystać ze zwykłych metod DOM

(getElementById(), nextSibling, itd.), ale W3C
DOM posiada teŜ specjalne metody dostępu do
formularzy, które w praktyce często są łatwiejsze
w uŜyciu

Odnalezienie formularza

• Kolekcja document.forms zawiera wszystkie formularze na

stronie

• document.forms[0] - obiekt reprezentujący pierwszy element

<form> na stronie

• jeśli formularz ma atrybut name, to moŜna go wybrać po nazwie

w kolekcji document.forms:

<form name="nazwaformularza"> ...

document.forms['nazwaformularza']

document.forms.nazwaformularza

• W starych skryptach i kursach moŜna spotkać jeszcze bardziej

skrócony zapis document.nazwaformularza — ten sposób jest
niestandardowy, przestarzały i nie będzie działał w kaŜdej
przeglądarce

Elementy formularza

• Wewnątrz obiektu formularza moŜna odwoływać się do jego pól

po nazwach za pośrednictwem kolekcji elements:

document.forms[0].elements['nazwaelementu']

• lub (w przeciwieństwie do formularzy w obiekcie document)

odwoływać się bezpośrednio po nazwie:

document.forms[0].nazwaelementu

document

links[0]

images[0]

forms[0]

links[1]

elements[0] elements[1] elements[2] elements[3]

Zmienna tymczasowa

document.forms, atrybut value

• var f = document.forms[0]

• kaŜdy element formularza ma pole form, które

wskazuje formularz, do którego element naleŜy -
szczególnie przydatne przy obsłudze zdarzeń

var textbox =
document.forms[0].przykladowy_element;
textbox.form.inny_element

• prawie kaŜde pole formularza ma atrybut value, który

zawiera jego wartość:

document.forms.daneOsobowe.imie.value

(odczyta zawartość pola o nazwie „imie”)

Zdarzenia dla formularza

• submit - zdarzenie generowane przez

element <form> tuŜ przed wysłaniem
formularza

• onchange, onclick, onkey – zmiany

• onfocus/onblur - aktywacja

Właściwości obiektu form

• name

atrybut NAME

• method

atrybut METHOD

• action

atrybut ACTION

• encoding

atrybut ENCTYPE

• target

atrybut TARGET

• length

liczba elementów w formularzu

• elements

tablica elementów składowych
formularza

Obsługa formularzy

• Metody obiektu

form

– reset

()

czyści zawartość wszystkich pól
formularza

– submit

() wysyła zawartość formularza

• Przykład wysłania formularza

mojFormularz

document.forms.mojFormularz.submit()

• Obsługa zdarzeń:

onReset

onSubmit

Właściwości wszystkich elementów

formularzy

• name

łańcuch znaków odpowiadający
nazwie elementu (atrybut NAME)

• value

łańcuch znaków zawierający wartość
elementu (atrybut VALUE)

• type

łańcuch znaków odpowiadający
nazwie typu (atrybut TYPE)

• form

odwołanie do obiektu

form

(formularza), w którym dany element
został umieszczony

Metody elementów formularzy

• blur

()

sprawia, Ŝe dany element przestaje
być aktywny (wszystkie elementy)

• focus

()

uaktywnia dany element
(wszystkie elementy)

• click

()

symuluje kliknięcie myszą obiektu
(

button

checkbox

radio

reset

submit

)

• select

()

zaznacza cały tekst w polu
(

password

text

textarea

)

Składniki elementów formularzy

• Obiekty

text

password

textarea

– defaultValue

łańcuch znaków z

początkową wartością pola

• Obiekt

checkbox

– checked

stan pola (true lub false)

– defaultChecked

stan początkowy

• Obiekt

radio

– length

liczba opcji

– checked

defaultChecked

Składniki elementów formularzy

• Obiekt

select

– length

liczba opcji

– options

tablica opcji zdefiniowanych
znacznikiem <option>

– selectedIndex

indeks aktualnie

wybranej opcji

• Właściwości elementów tablicy

options

– text

value

selected

defaultSelected

Przykład 1 – sprawdzenie

danych w formularzu

<head> ...
<script type="text/javascript" src="formularz.js"></script>
</head><body>
<p>Skrypt sprawdza, czy odpowiednie pola zostały wypełnine oraz czy adres

e-mail został poprawnie wpisany.</p>

<div>
<form enctype="text/plain" method="post"

action="mailto:beatap@pluton.pol.lublin.pl" onsubmit="return
validate_form()">

<table> <tbody>
<tr> <td>E-mail:</td> <td> <input name="email" size="30" maxlength="80"

type="text "/> </td>

</tr>
<tr> <td> Imię/nazwisko: </td> <td> <input name="realname" size="30"

maxlength="80" type="text "/> </td>

</tr>

Przykład 1 – sprawdzenie

danych w formularzu

<tr> <td> Temat listu</td> <td> <input name="subject" size="30"

maxlength="80" type="text "/> </td> </tr>

<tr> <td> Treść listu</td> <td> <textarea name="tresc" cols="26"

rows="10"></textarea></td>

</tr>

</tbody></table>

<input name="submit" value=" Wyślij" type="submit"/>
<input name="reset" onclick="resetform()" value="Wyczyść formularz"

type="reset"/>

</div>

</form> </div>
</body></html>

function validate_form() {

validity = true;
if (!check_empty(document.forms[0].realname.value))
{ validity = false; alert('Brakuje imienia i nazwiska...'); }
if (!check_empty(document.forms[0].subject.value))
{ validity = false; alert('Brakuje tematu listu'); }
if (!check_email(document.forms[0].email.value))
{ validity = false; alert('Podany adres e-mail nie jest poprawny'); }
return validity; }

function check_empty(text) { return (text.length > 0); }
function check_email(address) {

if ((address == "") || (address.indexOf ('@') == -1) ||

(address.indexOf ('.') == -1)) return false;

return true; }

Przykład 1 – formularz.js

Przykład 1

Formularz

Przykład 2 – Sprawdzenie danych

Przykład 2 – form2.html

<head><script type="text/javascript" src="formularz2.js"></script></head>
<body><h3>Formularz sprawdzający poprawność</h3>
<form enctype="text/plain" name="addform" method="post"

action="mailto:beatap@pluton.pol.lublin.pl" onsubmit="return
submitForms()">

<div><input name="Form" value="Submit Sub" type="hidden"> </div>
<table bgcolor="#7789aa" border="3" cellpadding="2" cellspacing="0">
<tbody><tr><td>E-mail:</td>
<td><input name="Email Address" size="35" maxlength="80"

type="text"></td></tr>

<tr><td>Nazwisko i imię:</td>
<td><input name="First Name" size="35" maxlength="80" type="text"></td></tr>
<tr><td>Adres:</td><td><input name="Address" size="35" maxlength="80"

type="text"></td></tr></tbody></table><br/>

Przykład 2 – formularz2.js

function resetform() { document.forms[0].elements[1]=""; }

function submitForms() {

if (isEmail() && isFname() && isAddress())

if (confirm("\n Czy napewno zamierzasz podać swój adres e-mail?"))

{ alert("\nTwoje dane zostaną teraz wysłane.\n\n Dziękuję za

subskrybcję."); return true;}

else { alert("\n Czy chcesz anulować subskrybcję?");return false}

else return false;}

function isFname() {

if (document.forms[0].elements[2].value == "")

{ alert ("\n Nie wpisałeś swojego nazwiska. \n\n Proszę o uzupełnienie

danych."); document.forms[0].elements[2].focus(); return false;}

return true; }

Przykład 2 – formularz2.js

function isEmail() {
if ( document.forms[0].elements[1].value == '') {

alert ("\n Brak adresu e-mail. \n\n Proszę o uzupełnienie.")
document.forms[0].elements[1].focus(); return false;}

if ( document.forms[0].elements[1].value.indexOf ('@',0) == -1 ||

document.forms[0].elements[1].value.indexOf ('.',0) == -1)

{ alert ("\n Błąd w adresie e-mail - \"@\" lub \".\"\nProsze wpisać adres e-

mail ponownie.");

document.forms[0].elements[1].select();

document.forms[0].elements[1].focus();

return false; }

return true;
}
function isAddress() { if (document.forms[0].elements[3].value == "")
{ alert ("\n Brak adresu. \n\nProszę, uzupełnij dane.")

document.forms[0].elements[3].focus(); return false; }

return true; }

Przykład 2 - komunikaty

Przykład 3 -wybór opcji

<form action="mailto:xx@xxxx.xx?subject=test"

method="post" onsubmit="return wyslijDane(this)">

<h3>Wybierz kolor:</h3>
<p>

<option value="" selected="selected">wybierz kolor</option>
<option value="czerwony">czerwony</option>
<option value="zielony">zielony</option>
<option value="niebieski">niebieski</option>

</select> <br/> <input type="submit" value="wy

lij"/>

</p>

</form>
</body></html>

Przykład 3 – plik js3.js

function wyslijDane(form)
{ wybrany=form.kolor.selectedIndex;

if (form.kolor.options[wybrany].value=="")
{ alert("Musisz wybra

kolor");

form.kolor.focus();
return false;

}
return true;

}

Przykład 3