JavaScript


Najprostszym sposobem na umieszczenie skryptu na swojej stronie internetowej jest wprowadzenie jego kodu w dokumencie, pomiędzy znacznikami <SCRIPT></SCRIPT>. Nie potrzebujemy do tego żadnych specjalnych narzędzi wystarczy zwykły tekstowy edytor lub jeśli takowy posiadamy, edytor skryptów (np.: SKRYBA). Stosowanie specjalistycznych edytorów, choć niewymagane, na pewno ułatwia pracę. Główną zaletą jest to, że edytor taki wyróżnia kolorami znaczące dla skryptu wyrażenie. Łatwo więc zorientujemy się gdzie jest komentarz, a gdzie nazwa funkcii czy zmienna.

Choć trudno w to uwierzyć posiadając taką wiedzę napisać możemy pierwszy skrypt. Nie będzie to nic skomplikowanego tylko standardowe "Hello World".

W dokumencie umieszczamy więc znacznik <SCRIPT> po czym wydajemy komendę document.write ('Hello World') po czym zamykamy skrypt znacznikiem </SCRIPT> Kod całej strony ma więc postać:


<HTML>
<BODY>
<SCRIPT>

document.write('Hello World');
</SCRIPT>
</BODY>
</HTML>

Efekt działania skryptu jest następujący:


Hello World


Znacznik <SCRIPT> może posiadać następujące atrybuty:

  • CHARSET - kodowanie znaków,
  • DEFER - Używane kiedy skrypt nic nie wyświetla,
  • LANGUAGE - użyty język skryptowy,
  • SRC - położenie zewnętrznego skryptu,
  • TYPE - typ, język skryptowy,

Do tworzenia nieco bardziej skomplikowanych skryptów potrzebne nam będą jednak wiadomości o innych elementach języka, takich jak zmienne, pętle programowe itp.


JAVASCRIPT - ZMIENNE

Zmienną nazywamy daną, która może przyjmować wartości w ramach przypisanego jej typu.

Zmienne możemy podzielić na lokalne (występują w obrębie funkcii) i globale (występują poza funkcjami).

W języku JavaScript wyróżnić możemy następujące typy zmiennych:

  • Number - zmienne liczbowe,
  • String - łańcuch znaków,
  • Boolean - zmienne logiczne,
  • Null - wartość zerowa,

Number - zmienne liczbowe

W języku JavaScript nie ma występującego w większości języków programowania podziału liczb na rzeczywiste (real), całkowite (integer) czy też inne. JavaScript dla wszystkich danych liczbowych, niezależnie czy są to liczby zmiennoprzecinkowe czy też całkowite posiada jeden typ zmiennej - Number. Przy podawaniu wartości zmiennej posługiwać się możemy zarówno liczami całkowitymi (np.: 24), zmiennoprzecinkowymi (np.: 0.25), ósemkowymi poprzedzonymi dla odróżnienia cyfrą 0 (np.: 064) oraz szesnastkowymi poprzedzonymi 0x (np.: 0xFF).

String - łańcuch znaków

Zmienna ta może przyjąć jako swoją wartość dowolny tekst umieszczony w cudzysłowach.

Boolean - zmienna logiczna

Zmienna ta może przyjąć jedną z dwóch wartości: prawda (TRUE) albo fałsz (FALSE).

Deklarowanie zmiennych

Definiowanie zmiennych w JavaScript odbywa się przy pomocy komendy Var. Zmienne nie muszą być przy tym deklarowane na początku programu jak to ma miejsce w niektórych językach programowania wysokiego poziomu (np.: Pascal). Możemy więc zmienną zadeklarować bezpośrednio przed jej użyciem w programie. Zmiennej możemy również nadać wartość przy deklaracjii.

Możemy więc zadeklarować zmienne:

var a - deklaracja zmiennej,

var b=10 - przypisanie wartości zmiennej przy deklaracji,

b=10 - przypisanie wartości zmiennej w programie,

Posiadając takie wiadomości pokusic się możemy o napisanie krótkiego skryptu na sumowanie zmiennych:


<SCRIPT language="JavaScript">
var a=15;
var b=10;
var wynik=a+b;
document.write(wynik);
</SCRIPT>

Efektem wykonania skryptu jest wyświetlenie wyniku: 25

Możemy również napisać skrypt, który poprosi nas o podanie wartości zmiennych a i b:

<SCRIPT language="JavaScript">
var a;
var b;
a=parseInt(prompt("Podaj wartośc zmiennej a: "));
b=parseInt(prompt("Podaj wartośc zmiennej b: "));
document.write("Wynik działania "+a+" + "+b+" = ",a+b);
</SCRIPT>

Kolejny skrypt operować będzie na zmiennej znakowej (string):

<SCRIPT language="JavaScript">
var nick;
nick=prompt("Jaki jest Twój nick ?");
document.write("Cześć "+nick+"! Wita Cię WebMajster");
</SCRIPT>

Wszystkie deklarowane do tej pory zmienne były zmiennymi lokalnymi. Zrozumienie ideii zmiennych lokalnych i globalnych jest zasadniczym zagadnieniem gdy w grę wchodzą nieco bardziej rozbudowane skrypty. Jak już wspomniałem na początku zmienne lokalne są deklarowane i występują w obrębie funkcii. Zmienne globalne miały być natomiast deklarowane poza funkcją. Napiszemy teraz skrypt zawierający zmienną globalną.

<SCRIPT language="JavaScript">
var a=10;
var b=20;
function dodaj()
{
var suma=a+b;
document.write("Suma "+a+" + "+b+" = "+suma+"<BR>");
}
function roznica()
{
var roznica=a-b;
document.write("Różnica "+a+" - "+b+" = "+roznica);
}
dodaj();
roznica();
</SCRIPT>

W powyższym przykładzie zadeklarowałem dwie zmienne globalne: a i b oraz dwie zmienne lokalne suma i roznica. Zmienne lokalne wykorzystywały do obliczeń zmienne globalne. Dzięki temu uniknąłem deklarowanie tych zmiennych w każdej z funkcji osobno.

Przy okazji omawiania zmiennych warto wspomnieć o tablicach, które są zbiorem zmiennych zebranych razem. Tablice podzielić możemy na jedno i wielowymiarowe. Oczywiście omawianie tablic zacznę od jednowymiarowych, gdyż na nich łatwiej zrozumieć ten temat. Typowa deklaracja tablicy n-elementowej ma postać:

var tablica = new Array(n); - tablica n-elementowa;

var tablica = new Array(); - tablica o niezdefiniowanej długości;

Przypisanie wartości kolejnym elementom tablicy polega na podaniu nazwy tablicy, zadeklarowanie w nawiasie kwadratowym numeru elementu tablicy (pierwszy element ma numer 0) oraz podaniu wartości tego elementu:

tablica[0]=10

tablica[1]="webmajster"

Napiszmy więc skrypt z zastosowaniem tablicy jednowymiarowej. Zadaniem skryptu będzie wypisanie elementów tablicy.

<SCRIPT language="JavaScript">
var tablica = new Array();
tablica[0]="a";
tablica[1]="b";
tablica[2]="c";
document.write(tablica);
</SCRIPT>

Oczywiście możemy również pozwolić użytkownikowi na podanie elementów tablicy:

<SCRIPT language="JavaScript">
var tablica = new Array();
tablica[0]=prompt("Podaj element 0 - tablicy: ");
tablica[1]=prompt("Podaj element 1 - tablicy: ");
tablica[2]=prompt("Podaj element 2 - tablicy: ");
document.write(tablica);
</SCRIPT>

Myślę, że wystarczy już o zmiennych. Powracać do nich będziemy dość często ponieważ są nierozłącznym elementem programowania. Zastosowanie tablic omówione będzie również dokładniej w dalszej części tego "kursu".



JAVASCRIPT - OPERATORY

Jak w każdym języku programowania również w JavaScript do zmian wartości zmiennych służą operatory. Dzięki nim możemy przeprowadzać takie operacje jak: dodawanie, mnożenie i inne, bardziej lub mniej skomplikowane. Operatory JavaScript są bardzo zbliżone do operatorów w C++. Jeśli znacie więc ten język będziecie mieli ułatwione zadanie.

Poniżej przedstawiam operatory języka JavaScript:

Operatory arytmetyczne
+ dodawanie
- odejmowanie
* iloczyn
/ iloraz
% reszta z dzielenia
++ zwiększenie wartości o 1
-- zmniejszenie wartości o 1
Operatory przypisania
= przypisanie zmiennej i wartości zmiennej J (i=j)
+= przypisanie zmiennej i wartości i+j (i=i+j)
-= przypisanie zmiennej i wartości i-j (i=i-j)
* przypisanie zmiennej i wartości i*j (i=i*j)
/ przypisanie zmiennej i wartości i/j (i=i/j)
% przypisanie zmiennej i wartości i%j (i=i%j)
Operatory porównania
== równe
<= mniejsze-równe
>= większe-równe
!= nie równe
< mniejsze
< większe
Operatory bitowe
>> przesunięcie o jeden bit w prawo
<< przesunięcie o jeden bit w lewo
& AND (i)
| OR (lub)
^ różnica
~ NOT
Operatory logiczne
&& koniunkcja
|| alternatywa
! negacja