Cwicz3_JavaScript_formularze

Transkrypt

Ćwiczenie laboratoryjne
„Formularze i dane”
Tematy ćwiczenia
•
opracowanie formularzy.
Plan
Wyniki opracowania zadań pokazywać za pomocą dwóch przeglądarek:
• Firefox Mozilla,
• Internet Explorer.
W przypadku stosowania Firefox Mozilla używać konsoli błędów (Narzędzia/Konsola błędów).
Korzystając z Notatnika opracowywać:
plik HTML (XML),
zewnętrzny plik JS zawierający program w języku JavaScript,
zewnętrzny plik CSS.
a) Formularze
Zadanie
Opracować aplikacje - formularz do wprowadzania danych użytkownika.
Rodzaj danych pobrać z tabeli wariantów.
Aplikacje - formularz w języku HTML musi zawierać napisy wspomagające, pola tekstowe i przycisk
"Akceptuj".
Po naciśnięciu przycisku sprawdzić, czy wprowadzone są wszystkie dane i wyświetlić odpowiedni komunikat.
Opracowanie zadań
<skrypt>
<pliki JS, CSS>
Testowanie
<zrzut z przeglądarki>
b) Formularz z zegarem
Zadanie
Realizować na pasku stanu zegar liczący czas wprowadzania danych.
Wyświetlić odpowiedni komunikat, jeśli czas wprowadzania danych przekroczy ustawioną granicę.
Opracowanie zadań
<skrypt>
<pliki JS, CSS>
Testowanie
<zrzut z przeglądarki>
Pokazać prowadzącemu wyniki pracy.
Tabela wariantów
Np
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Imię
Tak
Nie
Tak
Tak
Tak
Tak
Nie
Tak
Tak
Nie
Tak
Tak
Tak
Tak
Nie
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Nie
Nie
Tak
Tak
Tak
Nie
Tak
Imię drugie
Tak
Tak
Nie
Nie
Nie
Nie
Tak
Tak
Tak
Tak
Tak
Nie
Nie
Nie
Tak
Tak
Tak
Tak
Nie
Tak
Nie
Tak
Tak
Tak
Tak
Tak
Nie
Nie
Nie
Nie
Tak
Tak
Nazwisko
Tak
Tak
Tak
Tak
Nie
Tak
Nie
Nie
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Nie
Nie
Nie
Nie
Tak
Nie
Tak
Tak
Tak
Tak
Data urodzenia
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Nie
Nie
Nie
Tak
Nie
Nie
Nie
Nie
Nie
Tak
Tak
Tak
Nie
Nie
Nie
Nie
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Miejsce
urodzenia
Nie
Nie
Nie
Nie
Tak
Tak
Tak
Tak
Nie
Tak
Tak
Nie
Tak
Tak
Tak
Tak
Tak
Nie
Nie
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Nie
Tak
Tak
Imię ojca
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Tak
Nie
Nie
Tak
Nie
Tak
Tak
Tak
Tak
Nie
Tak
Tak
Tak
Tak
Tak
Tak
Nie
Imię matki
Nie
Tak
Tak
Tak
Tak
Nie
Nie
Nie
Tak
Tak
Nie
Tak
Tak
Tak
Tak
Nie
Tak
Tak
Tak
Nie
Tak
Nie
Tak
Tak
Tak
Tak
Tak
Tak
Nie
Tak
Nie
Nie
Sprawozdanie
Na każdym zajęciu laboratoryjnym sporządza się za pomocą edytora Word sprawozdanie na bazie
materiałów ćwiczenia.
Bazowa zawartość sprawozdania musi być przygotowana w domu przed ćwiczeniem
(sprawozdanie do ćwiczenia pierwszego jest przygotowywane w czasie ćwiczenia). W czasie ćwiczenia
do sprawozdania są dodawane wyniki testowania.
Treść sprawozdania:
strona tytułowa,
spis treści sporządzony za pomocą Word'a,
dla każdego punktu rozdziały "Zadanie ", "Opracowanie zadania" (rozdział ze skryptem i
komentarzami), "Testowanie" (rozdział z opisem danych wejściowych i wynikami testowania, w tym
zrzuty okna przeglądarki).
Wzorzec strony tytułowej znajduje się w pliku
Strona_tytulowa_stac_Interpr_jezyki_progr_PWSBAiTK.doc.
Nazwa pliku ze sprawozdaniem musi zawierać skrót
"InterprJP_niestac_", numer ćwiczenia i nazwisko studenta (bez polskich liter, żeby można było
archiwizować).
Pliki ze sprawozdaniem są przekazywane do archiwum grupy.
Wskazówki
Realizacja zegara
Przykład zawierający realizację zegara na pasku stanu.
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1250">
<title>Strona</title>
<script type="text/javascript">
///window.defaultStatus="Pokój";
function zegar()
{
var czas=new Date();
var g=czas.getHours();
var m=czas.getMinutes();
var s=czas.getSeconds();
window.status=g + ((m<10)? ":0" : ":") + m +
((s<10)? ":0" : ":") +s;
}
</script>
</head>
<body>
setInterval("zegar()",1000);
</script>
</body>
</html>
Formularze i dane
Formularze HTML zawierają elementy dialogu z użytkownikiem. Dane z formularza można wysyłać
do serwera. JavaScript umożliwia sprawdzanie danych i decydowanie o tym, czy wysłać dane czy nie.
Do identyfikowania formularza jest zwykle stosowana kolekcja forms, chociaż można zaznaczać
formularz identyfikatorem id i identyfikować za pomocą metody document.getElementById().
Wewnątrz kolekcji forms formularz można identyfikować przez indeks, np.
document.forms[0].
Najlepiej stosować odwołanie do formularza za pomocą nazwy, np.
document.forms["form1"], ponieważ komunikacja z serwerem jest realizowana za pomocą nazw
elementów HTML.
Przykład nadania nazwy formularzowi:
<form name="form1">
...
</form>
Do identyfikowania elementów formularza najlepiej stosować kolekcję, tym razem kolekcję
elements, a wewnątrz kolekcji elementy identyfikować za pomocą indeksu lub nazwy, na przykład:
document.forms["form1"].elements[0]
lub
document.forms["form1"].elements["elem1"]
Indeksowanie elementów umożliwia użycie instrukcji powtórzeń.
Pola tekstowe
Pola tekstowe języka HTML służą do wprowadzenia danych tekstowych.
Istnieją trzy rodzaje pól tekstowych:
pola jednowierszowe tekstowe, np.:
<input type="text" id="id1" name="elem1" value="Tekst" />
pola hasła, np.:
<input type="password" id="id2" name="elem2" value="" />
pola wielowierszowe, np.:
<textarea id="id3" name="elem3" value="Tekst testowy" />
Zawartość pola jest udostępniana przez właściwość value.
Przykład stosowania pól tekstowych.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1250">
function akcept1(tf)
{
window.alert(tf.elements["tekst1"].value);
}
{
}
{
}
</script>
<title>Formularz</title>
</head>
<body>
<h1 align="center">DANE</h1>
<form name="form1">
<hr/>
<input type="text" name="tekst1" value="test" />
<input type="button" name="butt1" value="Akceptuj1"
onclick="akcept1(this.form)" />
<input type="password" name="tekst2" value="" />
<textarea name="tekst3">Tekst testowy, tekst testowy, tekst testowy, tekst
testowy, tekst testowy
</textarea>
<hr/>
</form>
</body>
</html>
Pola wyboru
Pola wyboru języka HTML służą do wprowadzenia opcji "Tak/Nie".
Zawartość pola jest udostępniana przez właściwość checked.
Przykład stosowania pola wyboru.
<html>
<head>
{
window.alert("Pole wyboru jest "+
((tf.elements["check1"].checked)? "zaznaczone.": "nie zaznaczone."));
}
</script>
</head>
<body>
<form name="form1">
<hr/>
<input type="checkbox" name="check1" value="false" />
<hr/>
</form>
</body>
</html>
Pola wyboru w grupie
Pola wyboru w grupie języka HTML służą do wprowadzenia opcji "Tak/Nie" w grupie przycisków.
Zaznaczenie jednego z przycisków powoduje odznaczanie innych.
Zawartość pola jest udostępniana przez tablicę właściwości checked każdego z elementów.
Przykład stosowania pola wyboru w grupie.
<html>
<head>
{
var str="";
var nn=tf.elements["radio1"].length;
for (var i=0;i<nn;i++)
{
var wart=tf.elements["radio1"][i];
str += wart.value+": "+wart.checked+"\n";
}
window.alert(str);
}
</script>
</head>
<body>
<form name="form1">
<hr/>
<input type="radio" name="radio1" value="Opcja1" />
<hr/>
</form>
</body>
</html>
Listy wyboru
Listy wyboru języka HTML służą do wprowadzenia zaznaczonego elementu listy.
Zawartość elementu listy może być dostępna przez właściwość selectedIndex, która podaje
indeks zaznaczonego elementu.
W przypadku braku zaznaczeń właściwość selectedIndex ma wartość -1.
Kolekcja options[] zawiera dane o elementach listy. Właściwość text elementu options[i]
jest wyświetlanym tekstem, właściwość value elementu options[i] równa się tej wartości, która jest
wysyłana do serwera, a właściwość property elementu options[i] informuje o tym, czy element jest
zaznaczony.
Przykład stosowania listy wyboru.
<html><head>
{
var ind=tf.elements["lista"].selectedIndex;
if (ind==-1)
{
window.alert("Brak zaznaczonego elementu.");
}
else
{
var elem=tf.elements["lista"].options[ind];
window.alert("Zaznaczono element numer "+(ind+1)+
". Tekst="+elem.text+". Wartość="+elem.value);
}
}
</script>
</head>
<body>
<form name="form1">
<hr/>
<select name="lista" size="4">
<option value="Opcja1">Tekst1</option>
</select>
<hr/>
</form>
</body></html>
Listy wielokrotnego wyboru
Listy wielokrotnego wyboru języka HTML służą do wprowadzenia grupy zaznaczonych elementów
listy. Aby wprowadzić wielokrotny wybór, w znaczniku listy musi być ustawiony na wartość "multiple"
atrybut multiple, tj. multiple="multiple".
W tym przypadku właściwość selectedIndex ma wartość równą indeksowi pierwszego
zaznaczonego elementu. W przypadku braku zaznaczeń właściwość selectedIndex ma wartość -1.
Zaznaczone elementy można otrzymać za pomocą sprawdzania w cyklu właściwości selected
elementów kolekcji options[].
Przykład stosowania listy wielokrotnego wyboru.
<html>
<head>
{
if (ind==-1)
{
}
else
{
var str="Elementy:";
var nn=tf.elements["lista"].options.length;
{
var elem=tf.elements["lista"].options[i];
str+="\nnumer "+(i+1)+". Tekst="+elem.text+
". Wartość="+elem.value+". Wybór="+
((elem.selected)?"tak":"nie");
}
window.alert(str);
}
}
</script>
</head>
<body>
<form name="form1">
<hr/>
<select name="lista" size="4" multiple="multiple">
</select>
<hr/>
</form>
</body>
</html>
Wyłączanie elementów formularza
Do przełączenia aktywności elementów języka HTML służy właściwość disabled.
Przykład z wyłączeniem przycisku zatwierdzenia formularza po wprowadzeniu danych.
W przykładzie zamiast wysyłania formularza na serwer jest realizowane wyświetlenie komunikatu o
zatwierdzeniu.
<html>
<head>
{
if (ind==-1)
{
}
else
{
var str="Zaznaczono elementy:";
var nn=tf.elements["lista"].options.length;
{
var elem=tf.elements["lista"].options[i];
str+="\nnumer "+(i+1)+". Tekst="+elem.text+
". Wartość="+elem.value+". Wybór="+
((elem.selected)?"tak":"nie");
}
window.alert(str);
}
}
</script>
</head>
<body>
<form name="form1" action="javascript:alert('Zatwierdzono');">
<hr/>
<select name="lista" size="4" multiple="multiple">
</select>
<input type="button" name="butt1" value="Akceptuj"
<input type="button" name="butt2" value="Zatwierdź"
onclick="this.disabled=true; this.form.submit();" />
<hr/>
</form>
</body>
</html>

Cwicz3_JavaScript_formularze

Transkrypt

Podobne dokumenty

Technologie internetowe

JS - obsługa formularzy

Ćw.1. Przykładowa walidacja formularza PoniŜsza strona wyświetla

Struktura semantyczna i formularze

html> html> Ramy dokumentu html Nagłówek

1 mySql i php – łączenie materiały dydaktyczne dla uczniów

script type="text/javascript"

faktura pro forma (pro forma invoice)