JavaScript 1

Transkrypt

JavaScript 1

Ćwiczenie 4
Temat:
Obsługa formularzy
w oparciu o skrypt
kliencki JavaScript
Cel ćwiczenia:
Celem ćwiczenia jest zapoznanie studenta z możliwościami przetwarzania
danych użytkownika wprowadzonych w formularzu po stronie klienta w oparciu
o skrypt JavaScript i obiektowy model dokumentu DOM (ang. document object
model). Realizując ćwiczenia student zapozna się z elementami języka
JavaScript oraz możliwościami wykorzystania go do dynamicznej generacji
zawartości strony internetowej oraz dostępu do elementów formularza.
Język JavaScript
JavaScript jest stworzonym przez firmę Netscape obiektowym językiem programowania.
Najczęściej wykorzystywany jest do tworzenia skryptów osadzonych w stronach
internetowych i realizowanych po stronie klienckiej przez przeglądarkę. Język JavaScript jest
językiem całkowicie niezależnie rozwijanym od platformy Java i oprócz pewnych
podobieństw składni nie ma z nią nic wspólnego.
Osadzanie skryptów JavaScript
Najprostszym sposobem osadzenia skryptu JS w kodzie strony HTML jest umieszczenie
poleceń tego języka bezpośrednio we wnętrzu wybranych atrybutów znaczników HTML.
Podstawową grupę reprezentują atrybuty odpowiedzialne za obsługę standardowych
zdarzeń elementów strony internetowej.
<input type="button" value="Przywitaj się" onclick="alert('Cześć');" />
Ważną sprawą, na którą trzeba zwrócić uwagę w tym wypadku jest zastosowanie innych
cudzysłowów ograniczających łańcuch tekstowy w poleceniu JavaScript od cudzysłowów
otaczających wartość atrybutu HTML.
Drugą możliwością lokalnego osadzenia JavaScript wewnątrz znacznika HTML jest
wprowadzenie go do znacznika hiperłącza.
<a
href="javascript:alert('Cześć');">Przywitaj się</a>
Kolejną metodą osadzenia JavaScript jest utworzenie bloku skryptowego. Stosuje się dwie
podstawowe jego lokalizacje: nagłówek strony i ciało strony.
W nagłówku umieszcza się zwykle kody, które będą wywoływane później. Dlatego zazwyczaj
znajdą się tam definicje funkcji własnych użytkownika, ewentualnie deklaracje i inicjacje
zmiennych globalnych. Widoczny poniżej w kodzie skryptowym znacznik komentarza HTML
 zabezpiecza przed niepożądanym wyświetleniem kodu skryptu w oknie przeglądarki.
30
<head>
<title>Przykład 1</title>
<script type="text/javascript" >
<!-function Witaj()
{
alert('Hello');
}
var licznik=0;
//-->
</script>
</head>
W ciele strony umieszcza się skrypty zwykle automatycznie uruchamiane w chwili
wczytywania strony i dynamicie modyfikujące jej treść. Sekcja noscript pozwala zabezpieczyć
się na wypadek sytuacji, gdyby przeglądarka nie obsługiwała lub miała wyłączoną obsługę
JavaScript.
<body>
<script type="text/javascript" >
<!-document.write('Witamy');
//-->
</script>
<noscript>
Witamy awaryjnie
</noscript>
</body>
W wypadku, gdy planujemy użyć tej samej funkcjonalności skryptu JavaScript na wielu
stronach naszego serwisu, lepszym rozwiązaniem jest umieszczenie kodu w oddzielnym pliku
.js. Plik ten powinien zawierać jedynie kod JavaScript bez znaczników HTML. Przykładowa
zwartość pliku zwroty.js:
function Witaj()
{
alert('Hello');
}
31
Na stronach, które mają ze definiowanych w tym pliku funkcjonalności skorzystać należy
umieścić wpis :
<script type="text/javascript" src="zwroty.js"></script>
Operatory języka JavaScript
Język JavaScript posługuje się typowymi dla rodziny języków wywodzących się z języka C
operatorami:
Operator
Znaczenie
=
Przypisanie
+
Dodawanie liczb, sklejanie
łańcuchów
-
Odejmowanie
*
Mnożenie
/
Dzielenie
%
Dzielenie modulo
x++
x=x+1
x--
x=x-1
x+=a
x=x+a
x-=a
x=x-a
x*=a
x=x*a
x/=a
x=x/a
==
równy (wartość)
===
równy (wartość i typ)
!=
różny
>
większy
<
mniejszy
>=
większy bądź równy
<=
mniejszy bądźrówny
||
suma logiczna
&&
Iloczyn logiczny
!
negacja logiczna
Operatory języka JavaScript
32
Instrukcje języka JavaScript
JavaScript dysponuje zestawem instrukcji charakterystycznych dla rodziny C.
1. Instrukcja warunkowa wykonująca jeden z dwóch bloków poleceń w zależności od wartości
logicznej warunku.
if (warunek)
polecenia wykonywane, jeŜeli warunek jest spełniony
else
polecenia wykonywane jeŜeli warunek nie jest spełniony
Przykład:
if (a>0)
alert('Wartość przekroczona');
if (b>0)
{
// blok instrukcji
alert('Wartość przekroczona');
}
else
alert('Wartość poprawna');
2. Instrukcja wyboru wykonująca jeden z wielu bloków poleceń w zależności od wartości
zmiennej:
switch (zmienna) {
case wartość1: polecenia wykonywane, jeŜeli zmienna=wartość1
break;
case wartość1: polecenia wykonywane, jeŜeli zmienna=wartość1
break;
:
:
default: polecenia wykonywane, jeŜeli zmienna ma inną wartość
break;
}
Przykład:
switch (liczba) {
case 1: alert('jeden');
break;
case 2: alert('dwa');
break;
case 3: alert('trzy');
break;
default: alert('liczba '+liczba);
break;
}
33
3. Pętla for stosowana najczęściej w przypadku znanej przy jej rozpoczęciu liczbie powtórzeń,
nieskomplikowanej metodzie inkrementacji zmiennej i warunku ograniczającym. Wykonuje
się, jeżeli warunek jest spełniony.
for (inicjalizacja; warunek; inkrementacja)
polecenia wielokrotnie wykonywane w pętli
Przykład:
for (i=10;i>=1;i--)
document.write(i+'<br />');
4. Pętla while wykonywana, jeżeli warunek jest spełniony. W wypadku początkowego
niespełnienia warunku pętla nie wykona się ani razu. Zakres zastosowań tej pętli jest
identyczny z pętlą for. Pętle while stosuje się przy bardziej skomplikowanej logice iteracji trudne
do opisania w nagłówku pętli for.
while (warunek)
Przykład:
i=10;
while (i>=1)
{
i--;
}
5. Pętla do..while wykonywana, jeżeli warunek jest spełniony. W wypadku początkowego
niespełnienia warunku pętla nie wykona się raz, ponieważ warunek jest sprawdzany na
końcu pętli;
do
while (warunek)
Przykład:
i=10;
do
{
i--;
}
while (i>=1)
34
Deklaracja zmiennych
W JavaScript nie ma jawnego typowania zmiennych. Typ zmiennej zależy od wartości do niej
w pisanej. Zmienne nie wymagają jawnej deklaracji, choć jest to możliwe z użycie słowa
kluczowego var.
var a; //jawna deklaracja zmiennej, zmienne przyjmuje wartość undefined
var b=5; //jawna deklaracja zmiennej z inicjacją wartości
c=5; //niejawna deklaracja zmiennej z inicjacją wartości
Definiowanie funkcji
Funkcje
umożliwiają
wielokrotne
wykorzystanie
raz
zdefiniowanych
w
kodzie
funkcjonalności. Składnia definicji funkcji wygląda następująco:
function NazwaFukcji(parametr1, parametr2,..., parametr_n)
{
polecenia tworzące ciało funkcji
}
Przykład definicji i wywołania funkcji niezwracającej wartości:
function DrukujIloczyn(a,b)
{
var iloczyn=a*b;
alert('Iloczyn '+a+' i '+b+' wynosi '+iloczyn);
}
DrukujIloczyn(a,b) //wywołanie funkcji
Przykład definicji i wywołania funkcji zwracającej wartość:
function ObliczIloczyn(a,b)
{
var iloczyn=a*b;
return iloczyn;
}
alert(ObliczIloczyn(1,2)+3) //wywołanie funkcji
Standardowe okna dialogowe JavaScript
Nadrzędny obiekt DOM (obiektowego modelu dokumentu) window udostępnia trzy metody
pozwalające wyświetlić standardowe okna dialogowe.
Deklaracja zmiennych
35
Okno dialogowe alert
Metoda alert wyświetla standardowe okienko informacyjne wymagające jedynie potwierdzenia
użytkownika. W treści wiadomości wszystkich standardowych okien dialogowych można używać
znaków specjalnych typu \n (znak końca linii).
alert(treść wiadomości)
Przykład
a=3*5;
if (a>10) alert('Uwaga !\nWynik przekroczył 10');
Okno dialogowe confirm
Metoda confirm wyświetla okno dialogowe umożliwiające uzyskanie od użytkownika potwierdzenia.
W takim wypadku metoda zwraca wartość prawdy logicznej.
confirm(treść wiadomości)
Przykład
if (confirm('Czy chcesz się przywitać ?'))
alert ('Dzień dobry');
Okno dialogowe prompt
Metoda confirm wyświetla okno dialogowe umożliwiające wprowadzenie użytkownikowi wartości
tekstowej. Metoda zwraca wprowadzoną wartość lub wartość null w przypadku naciśnięcia przycisku
Anuluj.
Okno dialogowe alert
36
prompt(treść wiadomości, wartość początkowa)
Przykład
imie=prompt('Podaj imię','Tu wpisz imię');
if (imie!=null) alert('Witaj '+imie);
Dynamiczna generacja zwartości strony
Obiekt document modelu DOM daje możliwość dynamicznej generacji z poziomu skryptu
JavaScript kodu HTML udostępniając dwie przydatne do tego celu metody:
•
write – pozwala pisać do dokumentu HTML bez dodania znaku końca linii
•
writeln – pozwala pisać do dokumentu HTML wraz ze znakiem końca linii
Ponieważ obecność znaku końca linii w kodzie HTML nie wpływa na wygląd strony, można
stosować tylko metodę write. Kod JavaScript dynamicznie generujący HTML zwykle
umieszczany jest wewnątrz sekcji body.
Przykład dynamicznej generacji zawartości strony HTML:
<html><head><title>Kwadraty liczb</title></head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
<script type="text/javascript">
<!-for (i=1;i<=5;i++)
{
document.write('<tr>'); //początek wiersza tabeli
document.write('<td>'+i+'<sup>2</sup></td>'); //pierwsza komórka
document.write('<td>'+(i*i)+'</td>'); //druga komórka
document.write('</tr>'); //koniec wiersza tabeli
}
//-->
</script>
</table>
</body>
</html>
Przykład dynamicznej generacji zawartości strony HTML:
37
Obsługa daty i czasu
Wśród standardowych klas języka JavaScript istnieje klasa Date pozwalająca pozyskiwać
informacje od dacie i czasie. Obiekty tej klasy udostępniają zestaw metod pozwalających
pozyskiwać informacje o dacie i czasie w różnorodnej formie.
Metoda
Date()
Date(parametry)
getYear()
getFullYear()
getMonth()
getDate()
getDay()
getHours()
getMinutes()
getSeconds()
getMilliseconds()
getTime()
getTimezoneOffset()
toTimeString()
toDateString()
toString()
toLocateTimeString()
toLocateTimeString()
toLocaleString()
Opis
Konstruktor tworzący obiekt zawierający aktualną datę i czas
Konstruktor tworzący obiekt zawierający datę i czas zdefiniowaną przez
parametry
Dwucyfrowa forma roku (<2000) lub czterocyfrowa(>=2000)
Czterocyfrowa forma roku
Miesiąc roku (0-11)
Dzień miesiąca (1-31)
Numer dnia tygodnia od niedzieli do soboty (0-6)
Godzina (1-24)
Minuta (0-59)
Sekund (0-59)
Milisekunda (0-999)
Liczba milisekund od 01.01.1970 00:00:00
Różnica czasu lokalnego i GMT
Tekst czasu w formie międzynarodowej
Tekst daty w formie międzynarodowej
Tekst daty i czasu w formie międzynarodowej
Tekst czasu w formie lokalnej (ustawienia przeglądatrki)
Tekst daty w formie lokalnej (ustawienia przeglądatrki)
Tekst daty i czasu w formie lokalnej (ustawienia przeglądatrki)
Przykład
<html>
<head>
<title>Data i czas</title>
Przykład
38
</head>
<body>
var d=new Date(); // utworzenie obiektu zawierającego aktualny czas
document.write('<i>Dzisiejsza data:</i>'+d.toLocaleDateString());
if (d.getHours()>16) alert('Pora kończyć pracę !');
</script>
</body>
</html>
Zadanie 1. Dynamiczna generacja strony z wykorzystaniem informacji o czasie
1. Wyświetlić na stronie aktualną datę w formie tabelki
2. Zdefiniować funkcję własną DzienTygodnia, która dla podanego numeru dnia
tygodnia (niedziela=0) zwraca jego polską nazwę. We wnętrzu funkcji wykorzystać
instrukcję switch. Wstępnie przetestować z wnętrza funkcji alert.
3. W kolejnej komórce tabel z punktu 1 wypisać nazwę aktualnego dnia wykorzystując
funkcję DzienTygodnia.
4. Wykorzystując pętle for i zdefiniowaną funkcję w celu wyświetlenia na stronie, w
jednym wierszu wszystkich dni tygodnia.
Niedziela Poniedziałek Wtorek Środa Czwartek Piątek Sobota
5. Napisać kod, który w wypadku, gdy aktualnym dniem tygodnia jest dzień
laboratoriów z Technologii internetowych wyświetli okienko z zapytaniem, czy
użytkownik jest zadowolony z tego przedmiotu. Przewidzieć reakcje (wyświetlając
odpowiednie okienko alert) na dwie możliwe odpowiedzi.
Przykład
39
Operacje matematyczne w JavaScript
Podstawowym obiektem odpowiedzialnym za operacje matematyczne w JavaScript jest obiekt
globalny Math zawierający zestaw metod i stały przydanych w obliczeniach.
Metoda
abs(x)
ceil(x)
floor(x)
round(x)
random(x)
log(x)
sqrt
pow(a,n)
max(x1,x2,…,xn)
min(x1,x2,…,xn)
exp(x)
sin(x), cos(x), tan(x),
asin(x),acos(x), atan(x), atan2(x,y)
Stała
PI
E
SQRT2
Opis
Wartość bezwzględna
Zaokrąglenie w górę
Zaokrąglenie w dół
Zaokrąglenie
Liczba pseudolosowa od 0 do 1
Logarytm naturalny
Pierwiastek drugiego stopnia
n
Potęga a
Wartość maksymalna
Wartość minimalna
n
e
Funkcje trygonometryczne
Opis
Liczba π
Stałą Eulera
Pierwiastek z 2
Ważnym zagadnieniem w ramach obliczeń matematycznych jest prezentacja wyników. Klasa Number
(zmienne typu numerycznego) udostępnia zestaw przydatnych metod.
Metoda
toExponettial(x)
toFixed(x)
toPrecision(x)
Number(s)
Opis
Konwertuje liczbę na tekst w postaci naukowej
Konwertuje liczbę na tekst z podaną liczbą cyfr po
przecinku
Konwertuje liczbę na tekst zdanej długości
Konwertuje obiekt (np. łańcuch tekstowy) na liczbę.
W wypadku niepowodzenia zwraca wartość NaN
40
Przykład
<html>
<head>
<title>Pole koła</title>
</head>
<body>
var r=Number(prompt('Podaj promień koła','0')); //konwertuj tekst na liczbę
if (!isNaN(r)) // sprawdź, czy zmienna zawiera liczbę
{
var V=Math.PI*Math.pow(r,2);
alert('Pole='+V.toPrecision(3));
}
</script>
</body></html>
Obsługa elementów strony internetowej z poziomu skryptu
Obiekt document modelu DOM daje możliwość uzyskania dostępu do wszystkich składowych
stronie HTML takich jak elementy formularzy oraz znaczniki. W tym celu należy wykorzystać
jedną z metod dostępu do elementów strony.
Metoda
getElementById(id_elementu)
getElementsByName(name_elementu)
getElementsByTagName(znacznik)
Opis
Zwraca referencję do jednego elementu strony o
niepowtarzalnym id
Zwraca tablicę referencji do elementów o podanej
nazwie
Zwraca tablicę referencji do podanego rodzaju
znaczników
Po uzyskaniu referencji możemy wykorzystać charakterystyczne dla danego rodzaju
elementu właściwości i metody.
Właściwość, metoda
value
type
selectedIndex
checked
style
innerText
innerHTML
submit()
reset()
Opis
Wartość elementu formularza
Typ elementu formularza
Indeks aktualnie wybranej opcji listy formularza (od
0)
Stan pola radio lub checkbox
Styl elementu
Zawartość znacznika. Znaczniki zagnieżdżone są
wyświetlane.
Zawartość znacznika. Znaczniki zagnieżdżone
formatują treść.
Wysłanie formularza
Wyczyszczenie formularza
Przykład
41
Przykład
Zastosowanie skryptu do stworzenia strony obliczającej dla podanego przez użytkownika promienia
objętość wybranej bryły.
<html>
<head>
<title>Objętości brył</title>
function Oblicz()
{
var r=Number(document.getElementById('promien').value);
var V;
switch(document.getElementById('bryla').value)
{
case 'K': V=4.0/3.0*Math.PI*Math.pow(r,3); break;
case 'S': V=1.0/3.0*Math.PI*Math.pow(r,2)*5; break;
case 'W': V=Math.PI*Math.pow(r,2)*5; break;
}
document.getElementById('wynik').innerHTML=
'Objętość=<b>'+V.toFixed(2)+'</b>';
document.getElementById('wynik').style.backgroundColor='yellow';
document.getElementById('formularz').reset();
}
</script>
</head>
<body>
<form id="formularz">
Promień bryły: <input id="promien" type="text" value="0" /> <br />
Rodzaj bryły:
<select id="bryla">
<option value="K">Kula</option>
<option value="S">StoŜek o wysokości 5</option>
<option value="W">Walec o wysokości 5</option>
</select> <br />
<input type="button" value="Oblicz" onclick="Oblicz();">
<p id="wynik" style="width:300px">0</p>
</form>
</body></html>
Przykład
42
Zadanie 2. Przetwarzanie danych formularza
1. Przygotować formularz jak na rysunku. Uwzględnić następujące jednostki długości:
jard, węzeł, stopa.
2. Zdefiniuj funkcję Przelicz, która przeliczy w zależności od wyboru użytkownika
wartość z metrów na wybraną jednostkę lub odwrotnie. Wywołaj funkcję w chwili
kliknięcia w przycisk Oblicz.
Jednostka
Przelicznik
Jard
0.9144 metra
Węzeł
14,63 metra
Stopa
0,30 metra
3. Sformatuj wyświetlenie wyniku z dokładnością do 3 miejsc po przecinku.
4. Dodaj funkcjonalność polegającą na zmianie koloru tła strony (przez styl) w zależności
od wybranej jednostki (jard – czerwony, węzeł – niebieski, stopa – zielony).
5. Wykrywaj i ostrzegaj (okienko alert) o niepoprawnej liczbie wpisanej w pole długości.
Blokuj w takim przypadku obliczenia.
Przykład
43

JavaScript 1

Transkrypt

Podobne dokumenty

Generate PDF

Web Developer

javascript developer

Senior Web Developer

specj. Technologie sieciowe i bazy danych

ELEMENTY ANALIZY ALGORYTMÓW 1. Każdy algorytm powinien

Front-End - Looksoft

JAVAScript w dokumentach HTML (2)