Podstawy języka JavaScript 1. CEL ĆWICZENIA Celem ćwiczenia

Transkrypt

Projektowanie aplikacji internetowych - ćwiczenie nr 6
ETI II stopień - semestr I
Podstawy języka JavaScript
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 <script> i </script>. Jednak najlepszym rozwiązaniem jest
umieszczanie skryptów w oddzielnym plikach z rozszerzeniem .js, wówczas element <script>
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>
<script> document.write('<h3>Witamy!</h3>'); </script>
<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 <script>.
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>
<script>
var zmienna1 = "Mój komputer";
var zmienna2 = 30.7;
document.write ("<h3>" + zmienna1 + " ma dysk o pojemności " + zmienna2 +
"GB.</h3>");
</script>
</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
…
<script>
var imie = prompt ("Podaj swoje imię:");
document.write ("Cześć " + imie + "!");
</script>
…
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
<script>
alert ("\nA teraz ukaże się zdjęcie!\n\nKliknij na przycisk Ok!")
document.write ("<img src = \"brawo.jpg\">");
</script>
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/

Podstawy języka JavaScript 1. CEL ĆWICZENIA Celem ćwiczenia

Transkrypt

Podobne dokumenty

JAVAScript w dokumentach HTML (2)

Krótki kurs JavaScript

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

JavaScript - sosw.poznan.pl

JavaScript cd. (2)

CMS czyli systemy zarządzania treścią

JAVAScript w dokumentach HTML (2)

INŻYNIER OPROGRAMOWANIA JAVA/JEE