1. Znacznik SCRIPT
2. Znacznik SCRIPT FOR ... EVENT ...
3. Znacznik SCRIPT SRC...
4. Protokół javascript

1. Komentarze
2. Zmienne
3. Operatory
4. Najważniejsze instrukcje
5. Funkcje
6. Obiekty

1. Wbudowane funkcje
2. Zdarzenia
3. Wbudowane obiekty
4. Mały przykład

Co to jest?

JavaScript jest prostym językiem skryptowym interpretowanym przez przeglądarki WWW. Interpreter tego języka został po raz pierwszy zaimplementowany w przeglądarce Netscape Navigator 2.0. Pierwotnie był znany pod nazwą LiveScript, dopóki Sun Microsystems nie opublikował języka Java. Po wprowadzeniu Javy Netscape i Sun Microsystems porozumiały się i przemianowały LiveScript na JavaScript. Java i JavaScript są w istocie dwiema różnymi technikami programowania w internecie.

JavaScript a HTML

Znacznik SCRIPT

Najczęściej stosowany sposób:

<script language="JavaScript" type="text/javascript">
<!--
........Treść skryptu........
// -->
</script>

Atrybut LANGUAGE określa język skryptu. Jeśli nie zostanie podany dla większości przeglądarek przyjmie domyślną wartość "JavaScript". Parametr TYPE jest w zasadzie ignorowany przez większość przeglądarek, jest za to wymagany w specyfiakcji HTMLa. Treść skryptu najlepiej jest ująć w znakach komentarza (<!-- i // -->), aby przeglądarki nieinterpretujące JavaScript go zignorowały.
Oto prosty przykład. Umieszczenie w kodzie strony formuły:

<SCRIPT>
<!--
document.write("Hello world!");
//-->
</SCRIPT>

da w wyniku:




Znacznik SCRIPT FOR ... EVENT ...

Skrypty obsługujące określone zdarzenia można definiować następująco:

<script for="nazwa" event="event">
<!--
...Polecenia...
//-->
</script>

gdzie "nazwa" jest identyfikatorem elementu, zaś "event" nazwą zdarzenia.

Znacznik SCRIPT SRC ...

Kod w JavaScript (np. z defincjami funcji) można umieścić w zewnętrznym pliku. Skryptu takiego można użyć stosując polecenie:

<SCRIPT SRC="url">

Wartością "url" powinien być adres (względny lub bezględny) skryptu.

Protokół javascript

Polecenia JavaScript można wykonywać również stosując protokuł javascript. Jeżeli np. w pasku adresu wpiszemy:
javascript: document.write("Hello world!")
wyświetlona zostanie strona z napisem "Hello world!". Wpisanie w pasku adresu:
javascript: history.back()
da taki sam wynik jak naciśnięcie klawisza Wstecz/Back przeglądarki.

Język

Komentarze

W JavaScript mamy możliwość komentowania tekstu na dwa sposoby:
- ujęcie dowolnego fragmentu tekstu w znaczniki /* i */
- znacznik // powodujący potraktowanie jako komentarz tekstu stojącego za znacznikiem do końca lini

Zmienne

Wprowadzenie do kodu zmiennej nie wymaga jej wcześniejszego deklarowania (nie podajemy jej typu). Wystarczy użyc np. liczba = 12. Podanie przed nazwą zmiennej słowa VAR oznacza jej lokalną deklarację. Bez tego słowa zmienna traktowana jest globalna. Zmienne mogą mieć następujące wartości:

• liczbowa, np.: x = 10    x = 3.14    x = -7.45 + 12
• ciąg znaków np.: s = "Hello world!"
  Uwaga: wartością "rok" + 2001 jest ciąg znaków "rok 2001"
  
Znaki specjalne:
- \n - koniec linii
- \" - cudzysłów
• logiczna - true lub false (bez cudzysłowia)
• null - wartość pusta. Użycie:
  VAR zmienna
  jest równoważne:
  VAR zmienna = null
Wartością zmiennej niezadeklarowanej jest undefined

Operatory

• binarne: +, -, *, /, % (dzielenie modulo)
• unarne: negacja (-) oraz inkrementacja i dekremetacja (zmienna++ , zmienna += 1)
• przypisania: a += b (to samo co: a = a + b), a -= b, a *= b, a /= b, a %= b
• logiczne: && (konkatenacja), || (alternatywa), ! (negacja)
• porównania: == (równe), != (nie równe), <=, >=, <, >.
  Możemy porównywać ciągi znaków np. "ala" < "alb"
• wyrażenia warunkowe: zmienna = (warunek) ? wartość_prawda : wartość_fałsz

Najważniejsze instrukcje

Składnia intrukcji if, for, while jest w JavaScript identyczna jak w C, np:
var x = 1;
for (var i = 1; i < 5; i++)
{
   x = x * i;
}

Funkcje

W JavaScript funkcje nie muszą zwracać żadnej wartości, ale także mogą zwracać wartość dowolnego typu (nie trzeba go deklarować w nagłówku funkcji)

function Nazwa_Funkcji(argument1, argument2, ... , argumentn) {
   // treść
}

Wywołanie funkcji:

Funkcja1(argument1, argument2);
Funkcja2();
Zmienna = Funkcja3(argument);

W treści funkcji możemy użyć instrukcji RETURN <wartość>. Przerywa ona działanie funkcji, która zwraca wtedy <wartosc>.

Obiekty

Obiekty w JavaScript można tworzyć samemu lub korzystać z już gotowych, udostępnianych przez przeglądarkę, a reprezentujących np. elementy dokumentu HTML. Każdy obiekt może mieć pewne własności i metody. Własność obiektu zachowuje się jak zmienna (albo kolejny obiekt), a metoda to nic innego jak funkcja odnosząca się do obiektu. Własności i metody obiektów wywołuje się następująco:

obiekt.własność
obiekt.metoda()

Przy odwoływaniu się do metod lub własności obiektu można użyć instrukcji with, np.:

with (obiekt)
{
  wlasnosc = 'aaa';
  metoda(parametr);
}

Nowy obiekt tworzy się instrukcją new. Konstruktor obiektu jest funkcją, w której do konstruowanego obiketu odwoływać się można poprzez słowo this:
function mojObiekt()
{
  this.wlasnosc1 = null;
  this.wlasnosc2 = null;
  return this;
}
Użycie:
nowyObiekt = new mojObiekt();

Najciekawsze predefiniowane w JavaScript konstruktory:

• Date - użycie:
  zmienna = new Date()
  zmienna = new Date(hours, minutes, seconds)
  zmienna = new Date(year, month, day)
  Dostępne metody: getDate(), setDate(), getTime(), getDay(), setTime() itp.
• Array - użycie:
  a = new Array(5) //tablica 5-cio elementowa
  t = new Array("aaa", "bbb", "ccc")
• Function - użycie:
  f = new Function([argument1, argument2, ..., argumentn], treść)
  W ten sposób możemy utworzyć funkcję, która jest w istocie obiektem przypisanym na zmienną f (wywołanie: f(arg1,arg2,...,argn)).
• Math - przykładowe własności: E (stała Eulera), LN2 (logarytm naturalny z dwóch), PI (liczba Pi)
  przykładowe metody: abs(liczba), sqrt(liczba), random(liczba), sin(liczba)

Praktyka

Wbudowane funkcje

• alert("tekst") - wyświetla okienko z tekstem
• eval("kod") - oblicza i zwraca wartość wygenerowaną przez "kod" (może to być ciąg instrukcji)
• parseFloat("ciąg") - konwertuje ciąg znaków na liczbę zmiennoprzecinkową
• parseInt("ciąg") - konweruje ciąg znaków na liczbę całkowitą

Zdarzenia

JavaScript jest przede wszystkim wykorzystywana do obsługi zdarzeń. Oto przykładowe nazwy zdarzeń oraz opis sytauacji, w których są wywoływane:
• onBlur - przy zmianie fokusa na inny element
• onClick - przy kliknięciu
• onChange - przy zmianie
• onFocus - przy ustawieniu fokusa
• onLoad - przy ładowaniu strony
• onMouseover - przy przejechaniu kursorem myszki ponad elementem
• onSubmit - przy wysyłaniu formularza
• onUnload - opuszczenie strony
Przypisanie obsługi zdarzenia do elementu następuje poprzez rozszerzenie definicji taga:
<TAG parametryTagu nazwaZdarzenia="kod, np. wywołanie funkcji">
Przykład:

<script language="JavaScript">
<!--
function wyswietl() {
  alert(eval("5+10"));
}
//-->
</script>
<input type="button" value="Kliknij tu" onClick="wyswietl()">
<input type="button" value="I tu też" onClick="alert('Tekścik')">



Wbudowane obiekty

W JavaScript mamy możliwość korzystania z wbudowanych obiektów. Oto niektóre z nich:
• document - obiekt z danymi aktualnej strony. Ciekawe własności: alinkColor, bgColor, fgColor, referrer (adres URL poprzednio odwiedzanego dokumentu), location (wyświetla bieżący adres URL dokumentu)
  Metody: clear, close, open, write i writeln
  
• navigator - obiekt z danymi przeglądarki. Własności:
  appCodeName - Zwraca nazwę kodową przeglądarki
  appName - Zwraca nazwę przeglądarki
  appVersion - Zwraca numer wersji przeglądarki
  userAgent - Zwraca pełną nazwę przeglądarki
  
• history - zawiera informację o bieżącej sesji użytkowania przeglądarki. Metody: back, forward, go(skok)
• location - informacje o adresie URL. Własności:
  hash - odwołuje się do kotwicy
  host - ustala nazwę hosta
  hostname - wyświetla nazwę hosta lub adres IP bieżącego hosta
  href - określa cały adres URL
  pathname - odnosi się do ścieżki dostępu w adresie URL
  port - określa port komunikacyjny serwera. Zazwyczaj 80
  protocol - określa nazwę protokołu dla transmisji danych (http, ftp, etc.)
  search - pokazuje tekst zapytania po znaku ? w adresie URL
• window - najwyższy w hierarchi obiekt dla każdego obiektów związanych ze stroną. Do jego metod i własności można odwoływać bezpośrednio, bez podawania nazwy obiektu.Własności:
  defaultStatus - Domyślna wiadomość wyświetlana w pasku statusu
  document - Dotyczy bieżącego dokumentu
  frames - Tablica zawierająca listę wszystkich ramek w oknie
  frame - Przewijalne okno używane dla tablicy
  length - Liczba ramek w bieżącym oknie
  location - Pełny adres URL bieżącego dokumentu
  name - Nazwa okna
  parent - Synonim dla okna, którego szkielet ramek (frameset) zawiera bieżącą ramkę
  self - Dotyczy bieżącego okna
  status - Wyświetla wiadomość w pasku statusu
  top - Dotyczy okna położonego najwyżej w hierarchii (głównego)
  window - Dotyczy bieżącego okna
  Metody:
  alert - Tworzy okienko dialogowe z alertem
  close - Zamyka dokument
  confirm - Tworzy okienko dialogowe z potwierdzeniem - z przyciskami OK i Cancel
  open - Otwiera nowe okno.
  prompt - Tworzy okienko dialogowe zachęcające do wprowadzenia jakichś danych
  setTimeout - Wykonuje skrypt JavaScript po upłynięciu podanej liczby milisekund
  clearTimeout - Przerywa polecenie setTimeout

Mały przykład

Oto mały przykład, który ilustruje wykorzystanie w skryptach JavaScript wbudowanych obiektów:

<SCRIPT>
<!--
var text2="";
var z=0;
function pokazujNapis(z){
  var kursor="|";
  var tekst=document.f.tekst.value;
  text2=text2+tekst.substring(z,z+1);
  window.status=text2+kursor;
  b=z+1;
  if (z<tekst.length){
    setTimeout("pokazujNapis(b)",100);
  } else {
    window.status=tekst;
  }
};

function przejdz() {
  history.go(document.f.go.value);
}

//-->
</SCRIPT>

<form name="f">
<input type="text" name="tekst" value="To jest tekst!!!">
<input type="button" value="Pokaż" onClick="pokazujNapis(0)">
<br><input type="text" name="go" value="1">
<input type="button" value="go" onMouseOver="przejdz()">
</form>

<script>
document.write("Dane przeglądarki:");
document.write("Nazwa: "+navigator.appName+"<BR>");
document.write("Wersja: "+navigator.appVersion+"<BR>"); document.write("Język: "+navigator.language+"<BR>");
</script>

Linki