1. CEL ĆWICZENIA Celem ćwiczenia jest przedstawienie możliwości wykorzystania języka JavaScript do tworzenia interaktywnych aplikacji działających po stronie klienta. 2. MATERIAŁ NAUCZANIA 2.1. DOM model dokumentu HTML Kiedy przeglądarka wczytuje stronę internetową, tworzy jej model, tzw. model drzewa DOM (ang. Document Object Model), który jest przechowywany w pamięci zajmowanej przez przeglądarkę. Składa się on z czterech podstawowych typów węzłów (obiektów): węzeł dokument, węzły elementów, węzły atrybutów oraz węzły tekstowe. (rys. 2.1) [1] Rys.2.1. Drzewo modelu DOM [1] Każdy węzeł jest dokumentem wraz z metodami i właściwościami. Skrypty uzyskują dostęp do drzewa modelu DOM (nie pliku źródłowego HTML) i uaktualniają je. Wszystkie zmiany wprowadzane w drzewie modelu DOM są odzwierciedlane w przeglądarce. Na samej górze drzewa znajduje się węzeł dokument, który przedstawia całą stronę (i jednocześnie odpowiada obiektowi document). Poprzez ten obiekt można otrzymać dostęp praktycznie do każdego elementu strony i za jego pomocą można tymi elementami manipulować. Wybrane właściwości obiektu document zostały przedstawione w tabeli 2.1. Tabela 2.1. Wybrane właściwości obiektu document Właściwość compatmode images URL forms title lastmodified Opis ciąg określający tryb kompatybilności dokumentu ze standardami HTML tablica zawierająca odniesienia do znajdujących się w dokumencie obrazów ciąg zawierający URL bieżącego dokumentu tablica zawierająca odniesienia do znajdujących się w dokumencie obiektów formularzy zawiera tytuł dokumentu zdefiniowany za pomocą znacznika <title> zawiera datę i czas ostatniej modyfikacji dokumentu
Przykład 2.1. Utwórz stronę o tytule Wybrane właściwości obiektu document. Wstaw poniższy skrypt do dokumentu HTML. Zapisz pod nazwą właściwości.html. Obejrzyj w przeglądarce wynik działania skryptu. document.write("podstawowe informacje o dokumencie:<br />"); document.write("tryb kompatybilności: "); document.write(document.compatmode + "<br />"); document.write("url: " + document.url + "<br />"); document.write("liczba obrazów: "); document.write(document.images.length + "<br />"); document.write("liczba formularzy: "); document.write(document.forms.length + "<br />"); document.write("tytuł: " + document.title + "<br />"); document.write("data ostatniej modyfikacji: "); document.write(document.lastmodified + "<br />"); Obiekt document nie zawiera dużej liczby metod. Wybrane z nich zostały przedstawione w tabeli 2.2. Najczęściej korzysta się z document.getelementbyid oraz document.write. Tabela 2.2. Wybrane metody obiektu document Metoda Opis write() writeln() wypisanie tekstów, wartości wyrażeń w dokumencie dostęp do elementów getelementbyid( id ) dostęp do wszystkich elementów o konkretnej wartości atrybutu id getelementbytagname( znacznik ) dostęp do wszystkich elementów o typie znacznika, np. P lub DIV getelementbyname( nazwa ) dostęp do wszystkich elementów o konkretnej wartości atrybutu name tworzenie nowego elementu createtextnode() tworzenie węzła tekstowego createelement() tworzenie elementu Tworzenie referencji do istniejącego elementu (obiektu) zmiennej reprezentującej element na stronie najwygodniej wykonać instrukcją JavaScript (pobierz element dokumentu o pewnym id): var element= document.getelementbyid (idelementu); Ważniejsze właściwości tak pobranego elementu to: - innerhtml umożliwia określenie kodu HTML który zostanie umieszczony w elemencie, - innertext umożliwia określenie ciągu znaków który zostanie umieszczony w elemencie, - classname umożliwia określenie klasy CSS użytej do prezentacji elementu. Przykład 2.2. Przepisz podany poniżej kod HTML zawierający skrypt JavaScript. Zapisz pod nazwą dostep_do_elementow.html. <!DOCTYPE html> <head> <title> Przykłady dostępu do elementów </title> <meta charset="utf-8"> <style type="text/css">.wyroznienieczerwone { color: Red; font-weight: 600; </style> </head> <body> <div id="nazwa"></div>
document.getelementbyid("nazwa").innerhtml = "Witaj"; document.getelementbyid("nazwa").classname = "wyroznienieczerwone"; </body> 2.2. Obsługa wejścia i wyjścia Wyświetlanie i pobieranie informacji w języku JavaScript realizowane jest poprzez: wypisanie informacji na stronie, okna dialogowe lub wyświetlanie kodu HTML w dowolnym elemencie. W celu umieszczenia dowolnego napisu na stronie należy wykorzystać polecenie document.writeln(napis), gdzie napis jest ciągiem znaków wyświetlonym na stronie. document.writeln("to zdanie zostanie wyświetlone na stronie."); Kolejną możliwością wyświetlania komunikatów są okna dialogowe. Jeśli wyświetlimy okno dialogowe aplikacja zatrzyma wykonanie skryptu aż do momentu kiedy użytkownik kliknie OK. alert ("To zdanie zostanie wyświetlone w oknie dialogowym."); Użycie tej metody powinniśmy ograniczyć do niezbędnego minimum. Wyskakujące okna dialogowe są raczej negatywnie odbierane przez użytkowników. Kolejną możliwością jest dynamiczne wyświetlanie kodu HTML w dowolnym elemencie na stronie. Każdy element na stronie może posiadać właściwość ID jednoznacznie go identyfikującą. Wykorzystujemy ją nie tylko przy definiowaniu stylów CSS, ale również przy odwoływaniu się do elementu w języku JavaScript. Przy pomocy konstrukcji: document.getelementbyid(idelementu) możemy jednoznacznie odwołać się do elementu o id=idelementu. Następnie możemy odwoływać się do właściwości takiego elementu (patrz przykład 2.2). Najprostszą metodą komunikacji jest wciśnięcie przycisku lub innego elementu na stronie. Każdy element na stronie umożliwia obsługę zdarzenia kliknięcia za pomocą właściwości onclick. Podajemy w niej jako parametr nazwę funkcji która zostanie wywołana. Przykład 2.3. Zmodyfikuj listing z przykładu 2.2 o podany poniżej kod. Zapisz pod nazwą klik.html. <div id="nazwa" onclick="zmien()"></div> document.getelementbyid("nazwa").innerhtml = "Witaj"; function zmien(){ document.getelementbyid("nazwa").innerhtml = "Witaj serdecznie!"; document.getelementbyid("nazwa").classname = "wyroznienieczerwone"; Po kliknięciu na napis Witaj pojawia się na czerwono napis Witaj serdecznie! Kod umieszczony w znacznikach jest wykonywany od razu, natomiast kod umieszczony w funkcji dopiero po jej wywołaniu po kliknięciu na aktywną zawartości. Pobieranie informacji od użytkownika umożliwiają również pola tekstowe. Fragment strony umożliwiający wyświetlenie w miejscu div id="wynik" informacji wpisanej w kontrolce input o id="dane".
Przykład 2.4. Utwórz stronę o tytule Pobranie informacji od użytkownika. Wstaw poniższy kod HTML zawierający skrypt js. Zapisz pod nazwą pobranie_informacji.html. Obejrzyj w przeglądarce wynik działania skryptu. <body> <input id="dane" type="text" /> <input type="button" value="wyświetl" onclick="wyswietl()" /> <div id="wynik" ></div> function Wyswietl() { document.getelementbyid("wynik").innerhtml = "Wpisałeś " + document.getelementbyid("dane").value; </body> Jak wynika z przykładu konstrukcja document.getelementbyid służy nie tylko do określania właściwości ale również do ich pobierania. 2.3. Operacje na zmiennych Operacje dokonywane na zmiennych możemy podzielić na: operacje arytmetyczne, o operacje logiczne, operacje przypisania, operacje porównania, operacje na łańcuchach znaków. W tabelach 2.3. 2.6 przedstawiono popularne operatory używane w JavaScript. Tabela 2.3. Operatory arytmetyczne w JavaScript Operator Wykonywane działanie Przykład Wynik * mnożenie 10 * 5 50 / dzielenie 10 / 5 2 + dodawanie 10 + 5 15 - odejmowanie 10-5 5 % dzielenie modulo (reszta z dzielenia) 10 % 3 1 ++ inkrementacja (zwiększanie) i = 10; i++ 11 -- dekrementacja (zmniejszanie) i = 10; i-- 9 Tabela 2.4. Operatory przypisania w JavaScript Operator Wykonywane działanie Przykład = x=y += x+=7 x=x+7 -= x-=3 x=x-3 *= x*=y x=x*y /= x/=y x=x/y %= x%=y x=x%y Tabela 2.5. Operatory porównania w JavaScript Operator Wykonywane działanie Przykład Wynik = jest równe 2==3 wynik:fałsz!= nie jest równe 2!=3 wynik:prawda > jest większe 25>30 wynik:fałsz < jest mniejsze 2<3 wynik:prawda >= większe lub równe 25>=3 wynik:prawda <= mniejsze lub równe 2<=3 wynik:prawda
Tabela 2.6. Operatory logiczne w JavaScript Operator Wykonywane działanie Przykład Wynik && x=3 iloczyn logiczny (i) y=4 wynik:prawda (x < 9 && y > 2) x=3 suma logiczna (lub) y=4 wynik:fałsz (x==8 y==6)! x=3 negacja y=4!(x==y) wynik:prawda Przykład 2.5. Program pobiera od użytkownika długości boków prostokąta, a następnie na ich podstawie oblicza jego pole oraz obwód sposób pierwszy. Wstaw podany skrypt js do dokumentu HTML i zapisz pod nazwą pole_obwod1.html var a = prompt("podaj a"); var b = prompt("podaj b"); var a1 = parseint(a); // konwertuje ciąg znaków na liczbę całkowitą var b1 = parseint(b); var wynikpole = a1 * b1; var wynikobwod = 2 * a1 + 2 * b1; alert("pole wynosi " + wynikpole + ", a obwód " + wynikobwod); Przykład 2.6. Program pobiera od użytkownika długości boków prostokąta, a następnie na ich podstawie oblicza jego pole oraz obwód sposób drugi. Uzupełnij podany poniżej kod HTML, zawierający skrypt js i zapisz pod nazwą pole_obwod2.html. Podaj bok a: <input type="text" id="bok_a"> <br/> Podaj bok b: <input type="text" id="bok_b"> <br/> <button onclick="oblicz()">oblicz</button> <div id="wynik"></div> function Oblicz(){ var a = document.getelementbyid("bok_a").value; var b = document.getelementbyid("bok_b").value; a = parseint(a); b = parseint(b); var wynikpole = a * b; var wynikobwod = 2 * a + 2 * b; document.getelementbyid("wynik").innerhtml = "Pole wynosi " + wynikpole + ", a obwód " + wynikobwod; Na zakończenie zostanie zaprezentowany skrypt obliczający rozwiązania równania kwadratowego. Na stronie zostaną umieszczone cztery pola tekstowe, trzy służące do wprowadzania danych i jedno do przedstawiania rozwiązań, tak jak jest to widoczne na rys.2.2. Każde pole posiada identyfikator, który pozwala na dostęp do niego z poziomu skryptu: parama dla pola przechowującego parametr A, paramb dla pola przechowującego parametr B, paramc dla pola przechowującego parametr C, wynik dla pola przechowującego wynik.
Rys.2.2. Widok fragmentu strony Pierwiastki równania kwadratowego Przykład 2.7. Utwórz stronę HTML Pierwiastki równania kwadratowego w oparciu o podany kod HTML i skrypt JavaScript. Zapisz pod nazwą równanie_kwadratowe.html Kod HTML: <div> parametr A: <input type="text" id="parama" size="3"> parametr B: <input type="text" id="paramb" size="3"> parametr C: <input type="text" id="paramc" size="3"> <input type <br /><br /> Wynik: <input type="text" id="wynik" size="70"> </div> Skrypt JavaScript: ="button" value ="Oblicz" onclick="oblicz();"> function oblicz() { //deklaracje zmiennych odpowiadających parametrom równania var A = parseint(document.getelementbyid("parama").value); var B = parseint(document.getelementbyid("paramb").value); var C = parseint(document.getelementbyid("paramc").value); var wyniktekst = ""; //sprawdzenie, czy jest to równanie kwadratowe if (A == 0){ //A jest równe zero, równanie nie jest kwadratowe wyniktekst = "To nie jest równanie kwadratowe: A = 0!"; else{ //A jest różne od zera, równanie jest kwadratowe //obliczenie delty var delta = B * B - 4 * A * C; //jeśli delta mniejsza od zera if (delta < 0){ wyniktekst = "Delta < 0. To równanie nie ma rozwiązania "; wyniktekst += ("w zbiorze liczb rzeczywistych!"); //jeśli delta równa zero lub większa od zera else{ //jeśli delta jest równa zero if (delta == 0){ //obliczenie wyniku var wynik = - B / 2 * A; wyniktekst = "Rozwiązanie: x = " + wynik;
//jeśli delta jest większa od zera else{ //obliczenie wyniku wynik = (- B + Math.sqrt(delta)) / 2 * A; wyniktekst = "x1 = " + wynik; wynik = (- B - Math.sqrt(delta)) / 2 * A; wyniktekst += ", x2 = " + wynik; document.getelementbyid('wynik').value = wyniktekst; LITERATURA 1. Lis M., JavaScript. Ćwiczenia praktyczne. Wydanie III. Helion, Gliwice, 2013. 2. Duckett J., JavaScript i jquery. Interaktywne strony WWW dla każdego., Helion, Gliwice, 2015. 3. www.poradnik-webmastera.com/kursy/javascript/ 4. http://webmaster.helion.pl/index.php/kursjs-obsluga-zdarzen-i-elementow-strony/kursjsdostep-do-elementow-strony/29-kurs-javascript/376-kursjs-dostep-do-elementowstrony?tmpl=component&print=1&page=