technologie internetowe cw 04 JS, Różne, Technologie internetowe
[ Pobierz całość w formacie PDF ]
Ć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.
<
input
type
="button"
value
="Przywitaj się"
onclick
="
alert('Cześć');
"
/>
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.
<
a
href
="
javascript:alert('Cześć');
">
Przywitaj się
</
a
>
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óźniej. 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
<head>
<title>
Przykład 1
</title>
<script
type
="text/javascript"
>
<!
function Witaj()
{
alert('Hello');
}
var licznik=0;
//>
</script>
</head>
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.
<body>
<script
type
="text/javascript"
>
<!
document.write('Witamy');
//>
</script>
<noscript>
Witamy awaryjnie
</noscript>
</body>
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 :
<script
type
="text/javascript"
src
="zwroty.js"
></script>
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ądź równy
<=
mniejszy bądźró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
[ Pobierz całość w formacie PDF ]