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 JavaScript tak naprawdę narodził się w firmie Netscape jako LiveScript, język skryptowy rozszerzający standardowy HTML m.in. o możliwość interakcji z użytkownikiem przeglądającym stronę. Nieco później doszło do porozumienia między firmami Netscape i Sun Microsystems, w wyniku którego pod koniec 1995 roku światło dzienne ujrzał JavaScript. Język ten umożliwia tworzenie zagnieżdżonych bezpośrednio w kodzie HTML krótkich programów, które potrafią rozpoznać i odpowiednio zareagować na zdarzenia powodowane przez użytkownika. Zdarzenia te to np. kliknięcie myszą, wypełnianie formularza, czy nawigowanie między stronami. Przykładowo, można stworzyć skrypt, który będzie sprawdzał poprawność danych wprowadzonych przez użytkownika do formularza (np. czy wprowadzając jakąś datę, nie przekroczyliśmy dopuszczalnej liczby dni w danym miesiącu) i który będzie informował o ewentualnym błędzie. Sprawdzenie takie odbywać się będzie na komputerze przeglądającego stronę, nie nastąpi więc konieczność dodatkowej transmisji danych w sieci. Sprawdzaniem danych nie będzie musiał też zajmować się serwer. [1] Rys.2.1. Trzy warstwy stanowiące podstawę popularnego podejścia w zakresie budowy stron internetowych [2] 2.1. Umieszczanie skryptu w kodzie HTML Skrypt jest to seria instrukcji wykonywanych kolejno przez komputer. Każda pojedyncza instrukcja nazywana jest poleceniem. Na końcu polecenia umieszczamy średnik. Polecenia mogą być ujęte w nawiasy klamrowe i wtedy tworzą blok kodu. Podobnie jak HTML i CSS, kod JavaScript ma postać zwykłego tekstu. Kod może być umieszczony pomiędzy znacznikami HTML i. Jednak najlepszym rozwiązaniem jest umieszczanie skryptów w oddzielnym plikach z rozszerzeniem.js, wówczas element posiada atrybut src, którego wartością jest ścieżka dostępu do dołączanego pliku. Kod JavaScript uruchamiany jest w miejscu, w którym jest umieszczony w dokumencie HTML.
Przykład 2.1. Pierwszy skrypt JavaSccipt Witamy. Przepisz i zapisz w swoim katalogu pod nazwą witamy.html <!DOCTYPE html> <head> <title> Kowalski & Nowak </title> <meta charset="utf-8" /> </head> <body> <h1>kowalski & Nowak</h1> document.write('<h3>witamy!</h3>'); <p>składanie zamówień możliwe jest pod numerem telefonu <em>123-456-789</em></p> </body> </html> Polecenie document.write () zapisuje zawartość w obiekcie document (strona internetowa). Rys.2.2. Obiekty i metody w JavaScript [2] Obiekt document przedstawia całą stronę internetową. Metoda write() obiektu document pozwala na umieszczenie nowej zawartości na stronie, w miejscu użycia elementu. Obiekt document posiada wiele metod i właściwości nazywane są one elementami składowymi obiektu. Dostęp do elementów składowych obiektu uzyskuje się wykorzystując kropkę umieszczoną między nazwą obiektu i nazwą elementu składowego, którego chcemy użyć. Kropka nosi nazwę operatora elementu składowego. Jeżeli do prawidłowego działania metoda wymaga pewnych informacji dodatkowych, to są one przechowywane w nawiasie. Każdy fragment informacji nosi nazwę parametru metody. 2.2. Deklaracja zmiennej i typy zmiennych w JavaScript Deklaracja zmiennej w JavaScript ma postać: var nazwa_zmiennej; Przypisanie wartości zmiennej: nazwa_zmiennej = 5; JavaScript operuje na danych sześciu wbudowanych typach - Boolean, Number, String, Undefined, Null oraz Object. [3] a) typ logiczny Boolean definiuje dwie wartości logiczną prawdę (true) oraz logiczny fałsz (false). var prawda = true, fałsz = false;
b) typy Undefined i Null - jedynymi wartościami tych typów są kolejno undefined oraz null. Typ undefined oznacza po prostu typ niezdefiniowany. Jest on używany zarówno do oznaczenia braku wartości jak i wartości niezdefiniowanej. Null, podobnie jak w innych językach programowania, oznacza nic. W zasadzie może przypominać przeznaczeniem undefined, ale null został pomyślany raczej jako wyznacznik braku referencji do obiektu. var arr = [undefined]; console.log(arr[0], arr[1]); W powyższym przykładzie utworzono tablicę z jedną wartością undefined. Następnie odczytywana jest pierwsza i druga wartość tablicy. Obydwie mają wartość undefined. var element = document.getelementbyid("id_elementu"); if (element!== null) { // kod programu } W praktyce, tak jak pokazano na powyższym przykładzie, z null spotkamy się używając funkcji wyszukujących element w dokumencie. Gdy żaden element spełniający podane kryteria (np. atrybut ID o danej wartości) nie zostanie znaleziony, funkcja zwróci null. c) typ liczbowy Number w JavaScript nie ma rozróżnienia na typ liczb całkowitych i ułamkowych, jak ma to miejsce w wielu innych językach. Liczby traktowane są wg standardu IEEE 754 dla liczb zmiennoprzecinkowych podwójnej precyzji. var jeden = 1; var pi = 3.14; var minusdwa = -2; Typ liczbowy, oprócz typowych liczb, definiuje też trzy wartości specjalne not a number (NaN), + oraz -. Not a number oznacza, że dana wartość, wynik operacji, nie jest liczbą. Z wartością tą spotkamy się przykładowo, gdy podzielimy zero przez zero. Najczęściej na NaN trafimy podczas nieudanej konwersji danych do typu liczbowego. Wartość nieskończoności (Infinity) jak sama nazwa mówi oznacza matematyczną nieskończoność. Wartość tę można uzyskać poprzez dzielenie dowolnej, niezerowej liczby przez zero czy też przekazując odpowiednie wartości parametrów dla różnych funkcji obiektu Math. d) typ tekstowy string wartość typu tekstowego jest sekwencją zera lub więcej znaków umieszczonych pomiędzy dwoma cudzysłowami lub apostrofami. W celu sprawdzenia jakiego typu jest dana wartość należy wykorzystać operator typeof, który zwraca wartość tekstową reprezentującą rozpoznany typ. console.log( typeof false, // "boolean" typeof true, // "boolean" typeof 1, // "number" typeof 3.14, // "number" typeof "foo", // "string" typeof 'bar', // "string" typeof undefined, // "undefined" typeof {}, // "object" typeof [], // "object" typeof NaN, // "number" typeof Infinity, // "number" typeof -Infinity // "number"
typeof null // "object" ); Wszystkie wartości z wyjątkiem ostatniej są raczej oczekiwanym wynikiem. Wartość null melduje się typem obiektowym - w taki sposób właśnie zostało zdefiniowane w specyfikacji języka działanie operatora typeof. Należy również zauważyć też na zwrócone oznaczenie typu dla tablicy - tablice w JS nie definiują swojego własnego typu, tylko są wyspecjalizowanymi obiektami. Przykład 2.2. Zadeklaruj dwie zmienne, przypisz im dowolne ciągi znaków i wyprowadź je na ekran za pomocą funkcji write(). Zapisz jako przyklad2_2.html <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>użyce zmiennych w JavaScript</title </head> <body> var zmienna1 = "Mój komputer"; var zmienna2 = 30.7; document.write ("<h3>" + zmienna1 + " ma dysk o pojemności " + zmienna2 + "GB.</h3>"); </body> </html> 2.3. Wprowadzanie danych okno dialogowe prompt() Wprowadzanie przez użytkownika danych do skrytpu umożliwia funkcja prompt(). Przykład 2.3. Wyświetl na ekranie okno pozwalające użytkownikowi na podanie jego imienia. Następnie wyprowadź na ekran napis powitalny zawierający podane imię. Zapisz jako przyklad2_3.html var imie = prompt ("Podaj swoje imię:"); document.write ("Cześć " + imie + "!"); 2.4. Okno dialogowe alert() Okno dialogowe zwykle do poinformowania użytkownika o wystąpieniu jakiegoś zdarzenia. Najczęściej chodzi o sytuacje, w której wystąpił błąd. Na taki charakter prezentowanej metody wskazuje już sama nazwa: alert(). Może ona przyjmować jako parametr ciąg znaków, który zostanie wyświetlony na ekranie. Przykład 2.4. Wyświetl na ekranie okno dialogowe z dowolnym napisem w postaci tekstu dwuwierszowego. Pobierz plik brawo.jpg i zapisz w tym samym katalogu co utworzony dokument HTML. Zapisz jako przyklad2_4.html alert ("\na teraz ukaże się zdjęcie!\n\nkliknij na przycisk Ok!") document.write ("<img src = \"brawo.jpg\">");
Oprócz znaczników HTML w wyświetlanych łańcuchach znakowych mogą też pojawić się znaki specjalne, takie jak np. rozpoczęcie nowego wiersza (przykład 2.4). Jeśli chcemy wyświetlić znak specjalny, musimy zastosować sekwencję ukośnik (backslash) plus litera symbolizująca dany znak (n w przypadku nowego wiersza). 2.4. Instrukcja warunkowa Podstawową instrukcją warunkową jest instrukcja if. Wygląda ona następująco: if (warunek) instrukcja; Instrukcja if posiada także możliwość umieszczenia po słowie kluczowym else instrukcji (lub grupy instrukcji), która zostanie wykonana w przypadku gdy warunek nie będzie spełniony: if (a == 0) alert("a jest równe zero"); else alert("a jest różne od zera"); 3. ZADANIA DO SAMODZIELNEGO WYKONANIA Zadanie 1. Wyświetl na ekranie okno dialogowe pozwalające na podanie przez użytkownika wieku. Wyprowadź na ekran napis: Jesteś pełnoletni gdy wiek > 18, w pozostałych przypadkach wyświetl napis Jesteś niepełnoletni! 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/