Technologia JavaScript.
Język JavaScript jest najpopularniejszym językiem skryptowym w Internecie wykorzystywanym po
stronie klienta, czyli podobnie jak HTML interpretowanym przez przeglądarkę Internetową. Oznacza to po
prostu, że stworzony przez nas kod nie musi być przed wykonaniem kompilowany do postaci binarnej. Zamiast
tego język posługuje się instrukcjami, które poddane analizie za pomocą interpretera, wbudowanego
w przeglądarkę, wykonywane są za każdym razem kiedy go uruchomimy. Od chwili pierwszej prezentacji z
przeglądarką Netscape w wersji 2, język przebył długą drogę, a firma Netscape opracowuje wciąż nowe wersje.
Język JavaScript jaki i JScript firmy Microsoft oparty jest na ECMAScript. Obecne przeglądarki obsługują oba
ustandaryzowane już języki i brak obecnie niezgodności jakie występowały pod koniec lat dziewięćdziesiątych.
Język JavaScript umożliwia wprowadzenie elementów interaktywnych na stronach sieci Web, takich jak, prze-
suwanie obiektów w oknach przeglądarki, sprawdzanie poprawności danych wprowadzonych do formularza,
rozwijane menu, czy proste szyfrowanie. W początkowym zamyśle witryny Internetowe miały prezentować
statyczny tekst, z wyłączeniem elementów graficznych. Jednak rozwój języka HTML, oraz powstanie kaska-
dowych arkuszy stylów, wprowadził dynamikę na stronach WWW, oraz potrzebę większej interaktywno-
ści z użytkownikiem. Do tej pory HTML mógł zaoferować co najwyżej hiperłącza i pewne elementy formula-
rza, bez sprawdzenia poprawności wprowadzanych tam danych. To pociągnęło za sobą rozwój różnorakich
technologii, które mają na celu wprowadzenie usprawnień do języka HTML. W języku JavaScript wielkość
liter ma znaczenie, dobrym zwyczajem jest kończenie każdej instrukcji średnikiem, interpreter ignoruje nad-
miarowe spacje i tabulatory. Kod języka skryptowego możemy umieścić w sekcji ciała <body> dokumentu
HTML lub nagłówka <head>, tylko, że w drugim przypadku trzeba funkcję wywołać w sekcji ciała.
Przykład:
<html>
<head>
</head>
<body>
<script language=”JavaScript” type=”text/javascript”>
//tutaj wpisujemy kod programu;
</script>
</body>
</html>
lub
<html>
<head>
<script language=”JavaScript” type=”text/javascript”>
//tutaj wpisujemy kod programu;
</script>
</head>
<body>
//tutaj wywołujemy program;
</body>
</html>
Można też umieścić kod programu w zewnętrznym pliku o rozszerzeniu *.js, wtedy znacznik
<script> będzie miał postać:
<script src=”nazwaZewnetrznegoSkryptu.js”>
Działanie skryptu można umieścić wewnątrz znacznika <body>. Istnieje kilka różnych rodzajów zda-
rzeń, dla których można utworzyć specjalną procedurę obsługi, aby nasz skrypt działał efektywniej.
<body onload=”alert(‘Witam na stronie !’)”>
Tabela zdarzeń w JavaScript.
Tabela znaków sterujących.
Znaki sterujące pozwalają na odpowiednie formatowanie skryptów i wstawianie znaków zastrzeżo-
nych w kod. Komentarze wewnątrz skryptów umieszczamy oddzielone ukośnikiem i gwiazdką ( /* komen-
tarz */ ) i unikajmy w nazwach zmiennych, funkcji i nazwach plików polskich znaków diakrytycznych,
znaków specjalnych, słów zastrzeżonych oraz spacji. Wyróżniamy trzy podstawowe okienka, ostrzeżenia
alert(), pytania confirm(), prośby prompt().
Rys. 2.3 Okienko funkcji alert()
Rys. 2.4 Okienko funkcji confirm()
Zdarzenie :
Działanie :
onload
uruchamia skrypt, gdy przeglądarka ładuje stronę
onunload
uruchamia skrypt, gdy zamykamy stronę
onclick
uruchamia skrypt, po kliknięciu na element
ondbclick
uruchamia skrypt, po dwukrotnym kliknięciu
onmouseover
gdy wskażemy nad element
onmouseout
gdy kursor myszy opuści element
onkeydown
gdy naciśniemy klawisz
onkeyup
gdy zwolnimy klawisz
Znak :
Rodzaj sterowania :
Znak :
Rodzaj sterowania :
\b
backspace
\t
tabulacja
\f
wysunięcie strony
\’
apostrof
\n
nowy wiersz
\”
cudzysłów
\r
powrót karetki
\\
lewy ukośnik
Rys. 2.3 Okienko funkcji prompt()
Funkcja alert() wyświetla okno z ostrzeżeniem lub z informacją o konsekwencjach jakiegoś dzia-
łania, jeżeli komunikat jest ciągiem znaków musi zostać ujęty w cudzysłowy i nawiasy, jeżeli to tylko liczba,
wystarczą same nawiasy. Obowiązkowo średnik na końcu instrukcji.
Przykład:
alert(”Komunikat okienka ostrzeżenia !”);
lub
alert(123);
Funkcja
confirm() wyświetla okno zapytania, które zwraca dwie wartości true lub false, gdy kliknie-
my odpowiednio OK lub Cancel.
Przykład:
confirm(”Czy jesteś pewien ?”);
Funkcję confirm() można umieścić wewnątrz funkcji alert(), wtedy zobaczymy zwracane war-
tości.
Przykład:
alert(confirm(”Czy jesteś pewien ?”));
Funkcja prompt() wyświetla okno z prośbą wprowadzenia danych, wewnątrz nawiasów znajdują
się dwa podwójne cudzysłowy oddzielone przecinkiem. W pierwsze wpisujemy treść komunikatu, drugie służą
jako podpowiedź dla użytkownika, gdzie i jakiej formie dane ma wpisać. Wpisane dane można przypisać
zmiennej, która dane te przechowa.
Przykład:
prompt(”Podaj swoje dane”,”tu wpisz imię i nazwisko”);
Tworzenie
własnej funkcji jest równie proste, po słowie kluczowym function podajemy nazwę funk-
cji, nie używamy polskich znaków diakrytycznych, znaków specjalnych i spacji oraz słów zastrzeżonych. W
nawiasach klamrowych umieszczamy kod funkcji.
function nazwaFunkcji()
{
kod funkcji;
}
Deklaracja zmiennych. Po słowie var podajemy nazwę zmiennej z tymi samymi zastrzeżeniami co dla
funkcji i przypisujemy jej wartość. Może to być ciąg znaków lub liczba, możemy też pobrać wartość zmiennej
od użytkownika za pomocą funkcji prompt().
Przykład:
var nazwaZmiennej=”wartość zmiennej”;
lub
var nazwa_zmiennej=123;
lub
var nazwazmiennej=prompt(”Podaj jakieś dane”,”wpisz tu”);
Deklaracja
stałej. Po słowie kluczowym const podajemy nazwę i przypisujemy wartość stałej.
Przykład:
const nazwaStalej=123;
Teraz kiedy poznaliśmy podstawowe funkcje i deklaracje zmiennych, nasz pierwszy program w Java-
Script może wyglądać następująco:
Przykład:
<html>
<head>
<script language=”JavaScript” type=”text/javascript”>
function pozdrowienie()
{
var mojeImie=prompt(”Podaj imię :”, ” ”);
alert(”Witam Cię Serdecznie ”+mojeImie+” !” );
}
</script>
</head>
<body>
<a href=”JavaScript: pozdrowienie()”>kliknij</a>
</body>
</html>
Słowa zarezerwowane w języku JavaScript mają specjalne znaczenie dla interpretera poleceń i nie moż-
na bezkarnie używać ich w nazwach zmiennych, funkcji, stałych, itd.
Tabela słów zastrzeżonych.
Operatory to narzędzia do wykonywania działań (operacji). W języku JavaScript wyróżniamy operato-
ry arytmetyczne, porównań, logiczne, łańcuchowe, przypisania. Operatory inaczej znaki do wykonywania dzia-
łań. Operandy to dane, na których wykonywane są działania (głównie liczby), a wyrażenie jest połączeniem
operandów z operatorami.
Tabela operatorów arytmetycznych.
abstrakt
else
instanceof
switch
boolean
enum
int
synchronized
break
export
interface
this
byte
extends
long
throw
case
false
native
throws
catch
final
new
transient
char
finalny
null
true
class
float
package
try
const
for
private
typeof
continue
function
protected
var
debugger
goto
public
void
default
if
return
volatile
delete
implements
short
while
do
import
static
with
double
in
super
Operator :
Nazwa :
Opis :
+
dodawanie
dodawanie dwóch operandów
–
odejmowanie
odjęcie drugiego operandu od pierwszego
*
mnożenie
mnożenie dwóch operandów
/
dzielenie
dzielenie pierwszego operandu przez drugi
%
modulo
zwraca resztę z dzielenia pierwszego operandu przez drugi
++
inkrementacja
dodanie 1 do operandu
--
dekrementacja
odjęcie jeden od operandu
-
negacja
odwrócenie znaku operandu
Tabela operatorów porównań.
Tabela operatorów logicznych.
Tabela operatora łańcuchów.
Tabela operatorów przypisania.
Instrukcje warunkowe wykorzystywane są do podejmowania decyzji, umożliwiają dokonanie wyboru z
pośród kilku opcji. Instrukcja if else. Po słowie kluczowym if w nawiasie zwykłym wpisujemy warunek,
jeżeli przyjmie on wartość true wykonywane są instrukcje zawarte w nawiasie klamrowym. Jeżeli warunek
jest nieprawdziwy (przyjmie wartość false) wykonywane są instrukcje z nawiasów klamrowych po słowie
else. Warunków może być więcej niż jeden.
if (warunek)
{
instrukcja 1;
instrukcja 2;
:
instrukcja n;
}
else
Operator :
Nazwa :
Opis :
>
większy niż
czy pierwszy operand jest większy niż drugi
<
mniejszy niż
czy pierwszy operand jest mniejszy niż drugi
>=
większy lub równy
czy pierwszy jest większy lub równy drugiemu
<=
mniejszy lub równy
czy pierwszy jest mniejszy lub równy drugiemu
= =
równy
czy oba operandy są sobie równe
!=
różny
czy oba operandy są różne
= = =
ściśle równy
czy operandy są równe i mają ten sam typ danych
!= =
nie ściśle równy
czy operandy są różne i/lub typ danych mają różny
Operator :
Nazwa :
Opis :
!
logiczne NOT
negacja wartości logicznej
&&
logiczne AND
czy obydwa warunki są prawdziwe (true)
||
logiczne OR
czy chociaż jeden warunek jest prawdziwy (true)
Operator :
Nazwa :
Opis :
+
konkatenacja (dołączanie)
łączenie łańcuchów znaków
Operator :
Równoważny z :
x + = y
x = x + y
x – = y
x = x – y
x * = y
x = x * y
x / = y
x = x / y
x %= y
x = x % y
{
instrukcja 1;
instrukcja 2;
:
instrukcja n;
}
lub
if (warunek 1)
{
instrukcja 1;
instrukcja 2;
:
instrukcja n;
}
else if(warunek 2)
{
instrukcja 1;
instrukcja 2;
:
instrukcja n;
}
else if(warunek n)
{
instrukcja 1;
instrukcja 2;
:
instrukcja n;
}
else
{
instrukcja 1;
instrukcja 2;
:
instrukcja n;
}
Instrukcja
warunkowa
switch umożliwia dokonanie wyboru spośród kilku opcji, działaniem przypo-
mina instrukcję if else, ale znaczącą różni się składnią. Wiersze zaczynające się od słowa case muszą
kończyć się dwukropkiem, instrukcje kończą się słowem break, a instrukcje nie spełniające żadnego z warun-
ków wypisujemy po default.
switch (wyrażenie)
{
case ”wartość 1”:
instrukcja 1;
instrukcja 2;
:
instrukcja n;
break;
case ”wartość 2”:
instrukcja 1;
instrukcja 2;
:
instrukcja n;
break;
case ”wartość n”:
instrukcja 1;
instrukcja 2;
:
instrukcja n;
break;
default:
instrukcja 1;
instrukcja 2;
:
instrukcja n;
break;
}
Instrukcje iteracji (pętle) stosuje się gdy zachodzi potrzeba powtórzenia działania, aż do chwili gdy
określone wyrażenie przyjmie wartość true. Integralną część stanowią tu operatory inkrementacji i porówna-
nia. Rozróżniamy trzy podstawowe pętle while, do while, for. Najprostszą instrukcją w zastosowaniu
jest while najpierw wyliczone są wartości wyrażenia z nawiasów zwykłych później wykonywane instrukcje,
odwrotnie niż w do while, gdzie przed wyliczeniem wartości wyrażenia sterującego wykonywany jest ciąg
instrukcji. W instrukcji for wszystko wykonywane jest w obrębie jednego nawiasu zwykłego. Wszystko od-
dzielone średnikami.
while (wyrażenie)
{
instrukcja 1;
instrukcja 2;
:
instrukcja n;
}
lub
do
{
instrukcja 1;
instrukcja 2;
:
instrukcja n;
}
while (wyrażenie);
lub
for (pierwszyStanLicznika; warunek; zmianaWartościLicznika)
{
instrukcja 1;
instrukcja 2;
:
instrukcja n;
}
Tablica jest typem obiektu, który za pomocą liczb uzyskuje dostęp do wszystkich charakterystyk obiek-
tu. Indeksowanie elementów tablicy zaczyna się od zera, dlatego pierwszy element ma indeks 0, drugi 1, trzeci
2, itd.
var nazwaTablicy = new Array();
nazwaTablicy[0] = “pierwszy element”;
nazwaTablicy[1] = “drugi element”;
nazwaTablicy[2] = “trzeci element”;
:
:
nazwaTablicy[n] = “kolejny element”;
Predefiniowane funkcje globalne stanowią rdzeń języka JavaScript i można je wykorzystywać bez two-
rzenia swoich własnych funkcji, do tej pory zostały opisane trzy alert(), confirm(), prompt(), umoż-
liwiające wykonanie prostej interakcji z użytkownikiem. Kolejne decodeURI(), decodeURIComponent
(), encodeURI(), encoreURIComponent(), escape(), unescape(), pozwalają na kodowanie i
dekodowanie adresów URI (jednolitych identyfikatorów zasobów). Funkcja eval() służy do zmiany ciągu
znaków na kod, a charCodeAt() na proste szyfrowanie. Istnieją dwie sytuacje, które najczęściej skutkują
niepowodzeniem wykonania skryptów. Pierwsza, gdy liczba rośnie w nieskończoność, druga gdy w wyrażenie
arytmetyczne wprowadzimy wartość nieliczbową. Pomogą tu isFinite() oraz isNaN(). Do konwersji
ciągów znaków na liczby i odwrotnie pomocne będę Number(), parseFloat(), parseInt(), to-
String().