Publikacja1

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>

//tutaj wpisujemy kod programu;

</script>

</body>

</html>

lub

<html>

<head>

//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

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 :

backspace

tabulacja

wysunięcie strony

\’

apostrof

nowy wiersz

\”

cudzysłów

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>

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

return

volatile

delete

implements

short

while

import

static

with

double

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().