JAVASCRIPT OBSŁUGA
ZDARZEŃ I FORMULARZY
Dawidowicz Paweł
ĆWICZENIE 1
Dla dokumentu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button id="myButton" type="button">Kliknij</button>
</body>
</html>
Dodać procedurę obsługi zdarzenia click przycisku myButton, która wyświetla okno alert z tekstem: "Hello world".
Uwaga! Można to zrobić na kilka sposobów:
// Assuming myButton is a button element
myButton.addEventListener('click', function(){alert('Hello world');}, false);
<button onclick="alert('Hello world!')">
// Assuming myButton is a button element
myButton.onclick = function(event){alert('Hello world');};
Które z nich są dobre, a które nie?
Ć
W
IC
Z
E
N
IE
2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function pointMouse(oEvent){
var pbutton=oEvent.button;
comment="Wartość clientX="+oEvent.clientX+' Wartość clientY='+oEvent.clientY+'\n';
comment+="Wartość screenX="+oEvent.screenX+' Wartość screenY='+oEvent.screenY;
alert(comment)
}
</script>
</head>
<body onmousedown="pointMouse(event)">
Tresc strony
</body>
</html>
Przeanalizować następujący kod do prostego przechwytywania kodu wciśnietego klawisza (powinien działać w Firefoksie i IE):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kody </title>
<script type="text/javascript">
function pressedKey(oEvent){
var pkey=oEvent.keyCode;
var pshift=oEvent.shiftKey;
var palt=oEvent.altKey;
var pctrl=oEvent.ctrlKey;
comment='Wciśnięto klawisz ';
if(pshift) comment+='Shift ';
else if (palt) comment+='Alt ';
else if (pctrl) comment+='Ctrl ';
else if ((pkey>=48) && (pkey <=125))
{
pchar=String.fromCharCode(pkey);
comment+=pchar;
}
comment+=' o kodzie '+pkey;
alert(comment)
}
</script>
</head>
<body onkeydown="pressedKey(event)">
</body>
</html>
Ć
W
IC
Z
E
N
IE
3
Stworzyć formularz o tytule: "Wypełnij przykładową ankietę", który będzie przetwarzany przez Javascript
· mię (pole tekstowe)
· Nazwisko (pole tekstowe)
· Dwa pola typu radio do wyboru płci, np.:
<input type="radio" name="plec" value="kobieta">
<input type="radio" name="plec" value="mezczyzna">
· Pole select do wyboru wykształcenia, np.
<select name="edu" id="edu">
<option value="0">...</option>
<option value="1">podstawowe</option>
<option value="2">średnie</option>
<option value="3">wyższe</option>
</select>
· Pola checkbox do wyboru sposobu spędzania wolnego czasu, np.:
<input type="checkbox" name="friends" value="1" >
<input type="checkbox" name="comp" value="1" >
<input type="checkbox" name="kino" value="1" >
<input type="checkbox" name="teatr" value="1" >
<input type="checkbox" name="filharmonia" value="1" >
<input type="checkbox" name="sport" value="1" >
<input type="checkbox" name="muzyka" value="1" >
<input type="checkbox" name="ksiazki" value="1" >
<input type="checkbox" name="spi" value="1" >
<input type="checkbox" name="inaczej" value="1" >
· Pole select z możliwością wyboru wielokrotnego (opcja multiple="multiple") dla wyboru
znanego systemu operacyjnego, np.:
<select name="systemy" size="5" multiple="multiple">
<option value="MS Windows">MS Windows</option>
<option value="Linux">Linux</option>
<option value="Solaris">Solaris</option>
<option value="Mac OS">Mac OS</option>
<option value="FreeBSD">FreeBSD</option>
</select>
· Pole textarea do wpisania komentarza:
<textarea name="komentarz" rows="4" cols="30">Tu wpisz komentarz</textarea>
Napisać funkcję testującą formularz z ćw. 3 w tym sensie, że:
pola imię i nazwisko są niepuste (wyświetlamy ich zawartość),
wybrana jest płeć (wyświetlamy ją),
wybrane jest wykształcenie (wyświetlamy je),
wybrany jest przynajmniej jeden sposób spędzania wolnego czasu (wyświetlamy wszystkie
wybrane),
wybrany jest przynajmniej jeden system operacyjny (wyświetlamy wszystkie wybrane),
komentarz może być pusty, ale jeśli coś zawiera to wyświetlamy ten tekst,
Jeśli zawartość jest niepoprawna, informujemy użytkownika, w którym polu są błędy.
Ć
W
IC
Z
E
N
IE
3
Document Outline
Wyszukiwarka
Podobne podstrony:
Dynamiczna obsługa zdarzeń
jotesy, JS-10(2), Zdarzenia i formularze
Cw 7 Obsługa zdarzeń Materiały dodatkowe
Cw 7 Obsługa zdarzeń Instrukcja
JavaScript Skrypty JavaScript ułatwiające przetwarzanie formularzy 07 2005
Cw 7 Obsługa zdarzeń Instrukcja
Obsługa zdarzeń Mysz
Formularze javascript
FORMULARZ OBSŁUGI TECHNICZNEJ, Śmieszne
Formularze javascript
Formularz oswiadczenie uczestnika zdarzenia
JAvaScript Zdarzenia
obsluga klienta 1
zdarzenia masowe, Dr I Baumberg 1 1
Encyklopedia prawa 2 normy, stosunki, zdarzenia
adresowanie kopert i formularze
więcej podobnych podstron