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

Transkrypt

Projektowanie aplikacji internetowych - ćwiczenie nr 7
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
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.
<script>
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 />");
</script>
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
write() writeln()
Opis
wypisanie tekstów, wartości wyrażeń w dokumencie
dostęp do elementów
getElementById(„id”)
getElementByTagName(„znacznik”)
getElementByName(„nazwa”)
dostęp do wszystkich elementów o konkretnej wartości atrybutu id
dostęp do wszystkich elementów o typie znacznika, np. P lub DIV
dostęp do wszystkich elementów o konkretnej wartości atrybutu
name
tworzenie nowego elementu
createTextNode()
createElement()
tworzenie węzła tekstowego
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>
<script>
document.getElementById("nazwa").innerHTML = "Witaj";
document.getElementById("nazwa").className = "wyroznienieCzerwone";
</script>
</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ć
document.writeln(napis), gdzie napis jest ciągiem znaków wyświetlonym na stronie.
polecenie
<script>
document.writeln("To zdanie zostanie wyświetlone na stronie.");
</script>
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.
<script>
alert ("To zdanie zostanie wyświetlone w oknie dialogowym.");
</script>
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>
<script>
document.getElementById("nazwa").innerHTML = "Witaj";
function zmien(){
document.getElementById("nazwa").innerHTML = "Witaj serdecznie!";
document.getElementById("nazwa").className = "wyroznienieCzerwone";
}
</script>
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>
<script>
function Wyswietl() {
document.getElementById("wynik").innerHTML = "Wpisałeś " +
document.getElementById("dane").value; }
</script>
</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
Wykonywane działanie
Operator
*
/
+
%
mnożenie
dzielenie
dodawanie
odejmowanie
dzielenie modulo (reszta z dzielenia)
++
inkrementacja (zwiększanie)
--
dekrementacja (zmniejszanie)
Przykład
Wynik
10 * 5
10 / 5
10 + 5
10 - 5
10 % 3
i = 10;
i++
i = 10;
i--
50
2
15
5
1
11
9
Tabela 2.4. Operatory przypisania w JavaScript
Operator
=
+=
-=
*=
/=
%=
Przykład
x=y
x+=7
x-=3
x*=y
x/=y
x%=y
x=x+7
x=x-3
x=x*y
x=x/y
x=x%y
Tabela 2.5. Operatory porównania w JavaScript
Operator
=
!=
>
<
>=
<=
jest równe
nie jest równe
jest większe
jest mniejsze
większe lub równe
mniejsze lub równe
Przykład
2==3
2!=3
25>30
2<3
25>=3
2<=3
Wynik
wynik:fałsz
wynik:prawda
wynik:fałsz
wynik:prawda
wynik:prawda
wynik:prawda
Tabela 2.6. Operatory logiczne w JavaScript
Operator
&&
iloczyn logiczny (i)
||
suma logiczna (lub)
!
negacja
Przykład
x=3
y=4
(x < 9 && y > 2)
x=3
y=4
(x==8 || y==6)
x=3
y=4
!(x==y)
Wynik
wynik:prawda
wynik:fałsz
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>
<script>
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;
}
</script>
…
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
="button" value ="Oblicz" onClick="oblicz();">
<br /><br />
Wynik: <input type="text" id="wynik" size="70">
</div>
…
Skrypt JavaScript:
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.
2.
3.
4.
Lis M., JavaScript. Ćwiczenia praktyczne. Wydanie III. Helion, Gliwice, 2013.
Duckett J., JavaScript i jQuery. Interaktywne strony WWW dla każdego., Helion, Gliwice, 2015.
www.poradnik-webmastera.com/kursy/javascript/
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=

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

Transkrypt

Podobne dokumenty

07. Obiektowy język JavaScript oraz format JSON

Podstawy programowania w JavaScript - Programowanie