Ć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.
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. Przywitaj się 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ózniej. 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. Osadzanie skryptów JavaScript 30
Przykład 1
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.
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'); } Osadzanie skryptów JavaScript 31 Na stronach, które mają ze definiowanych w tym pliku funkcjonalności skorzystać należy umieścić wpis :
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ądz równy <= mniejszy bądzró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; } Instrukcje języka JavaScript 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+' '); 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) polecenia wielokrotnie wykonywane w pętli Przykład: i=10; while (i>=1) { document.write(i+' '); 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 polecenia wielokrotnie wykonywane w pętli while (warunek) Przykład: i=10; do { document.write(i+' '); i--; } while (i>=1) Instrukcje języka JavaScript 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: Kwadraty liczb
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 Opis Date() Konstruktor tworzący obiekt zawierający aktualną datę i czas Date(parametry) Konstruktor tworzący obiekt zawierający datę i czas zdefiniowaną przez parametry getYear() Dwucyfrowa forma roku (<2000) lub czterocyfrowa(>=2000) getFullYear() Czterocyfrowa forma roku getMonth() Miesiąc roku (0-11) getDate() Dzień miesiąca (1-31) getDay() Numer dnia tygodnia od niedzieli do soboty (0-6) getHours() Godzina (1-24) getMinutes() Minuta (0-59) getSeconds() Sekund (0-59) getMilliseconds() Milisekunda (0-999) getTime() Liczba milisekund od 01.01.1970 00:00:00 getTimezoneOffset() Różnica czasu lokalnego i GMT toTimeString() Tekst czasu w formie międzynarodowej toDateString() Tekst daty w formie międzynarodowej toString() Tekst daty i czasu w formie międzynarodowej toLocateTimeString() Tekst czasu w formie lokalnej (ustawienia przeglądatrki) toLocateTimeString() Tekst daty w formie lokalnej (ustawienia przeglądatrki) toLocaleString() Tekst daty i czasu w formie lokalnej (ustawienia przeglądatrki) Przykład
Data i czas Przykład 38
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 Opis abs(x) Wartość bezwzględna ceil(x) Zaokrąglenie w górę floor(x) Zaokrąglenie w dół round(x) Zaokrąglenie random(x) Liczba pseudolosowa od 0 do 1 log(x) Logarytm naturalny sqrt Pierwiastek drugiego stopnia pow(a,n) Potęga an max(x1,x2,& ,xn) Wartość maksymalna min(x1,x2,& ,xn) Wartość minimalna exp(x) en sin(x), cos(x), tan(x), Funkcje trygonometryczne asin(x),acos(x), atan(x), atan2(x,y) Stała Opis PI Liczba Ą E Stałą Eulera SQRT2 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 Opis toExponettial(x) Konwertuje liczbę na tekst w postaci naukowej toFixed(x) Konwertuje liczbę na tekst z podaną liczbą cyfr po przecinku toPrecision(x) Konwertuje liczbę na tekst zdanej długości Number(s) Konwertuje obiekt (np. łańcuch tekstowy) na liczbę. W wypadku niepowodzenia zwraca wartość NaN 40 Przykład
Pole koła
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 Opis getElementById(id_elementu) Zwraca referencję do jednego elementu strony o niepowtarzalnym id getElementsByName(name_elementu) Zwraca tablicę referencji do elementów o podanej nazwie getElementsByTagName(znacznik) 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 Opis value Wartość elementu formularza type Typ elementu formularza selectedIndex Indeks aktualnie wybranej opcji listy formularza (od 0) checked Stan pola radio lub checkbox style Styl elementu innerText Zawartość znacznika. Znaczniki zagnieżdżone są wyświetlane. innerHTML Zawartość znacznika. Znaczniki zagnieżdżone formatują treść. submit() Wysłanie formularza reset() 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.
Objętości brył
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