Język JavaScript – opis języka (punkt 1), umieszczanie kodu JavaScript w plikach HTML i XHTML (2), przykłady skryptów

(1)

Wykład 7

Język JavaScript – opis języka (punkt 1), umieszczanie kodu JavaScript w plikach HTML i XHTML (2), przykłady skryptów

(punkt 3), przydatne linki (Dodatek)

1. Podstawowe elementy języka ECMAScript v3 (JavaScript 1.5) 1.1. Komentarze

 Komentarz blokowy:miedzy znakami /* */

/* to

jest treść komentarza

*/

 Komnetarz liniowy: od znaku // do znaku końca linii;

// to jest komentarz liniowy

1.2. Instrukcje 1.2.1. Instrukcja with

Umożliwia dostęp do właściwości i metod obiektów bez podawania przy każdym odwołaniu nazwy obiektu.

Instrukcja ta spowalnia wykonanie skryptu.

Składnia with (object) { instrukcje }

Przykład var a, b;

with (Math) { a =random();

b = SQRT2;

}

1.2.2. Instrukcja if ..else Składnia

if (warunek) { instrukcje; } [else

{ instrukcje;}]

1.2.3. Instrukcja pętli while Składnia

while (warunek)

{ instrukcje; }

(2)

1.2.4. Instrukcja pętli do...while Składnia

do {

instrukcje

} while (warunek);

Przykład do

{ i+=1;

document.write(i);

} while (i<5);

1.2.5. Instrukcja pętli for Składnia

for ([instrukcja-początkowe]; [warunek]; [instrukcja-inkrementacji]) { instrukcje; }

Przykład

for (var i = 0; i < 5; i++)

{ document.write("i= "+ i +" "); } 1.2.6. Instrukcja pętli for..in

Pętla ta przechodzi przez wszystkie pola danego obiektu (np. elementy tablicy)

Składnia

for (zmienna in obiekt) { instrukcje; }

Przykład

function pokaz_obiekt(obiekt, NazwaObiektu) { var rezultat = "";

for (var i in obiekt)

{ rezultat += NazwaObiektu+ "." + i + " = " + obiekt[i] + "\n"; } document.write(rezultat);}

1.2.7. Instrukcja label

Blok instrukcji, które mogą być wykonane podczas instrukcji break lub continue

Składnia label:

instrukcja Przykład

Miejsce1:

document.writeln(("To jest instrukcja wskazana przez instrukcję label");

(3)

1.2.8. Instrukcja break

Używana do przerwania pętli, instrukcji switch lub etykiety.

Składnia

break [etykieta]

Przykład

function testBreak() { var i = 0;

while (i < 6) { if (i == 3) break;

i++; } }

1.2.9. Instrukcja continue

Wznawia dowolną instrukcję pętli oraz etykiety

Składnia

continue [label]

Przykłady:

1) i = 0;

while (i <= 9) { i++;

if ((i % 2) == 0) continue;

i += 2;

//po zakończeniu pętli i jest równe 11=3;4;7;8;11

} 2)

i = 0;

poczatek:

i+=1;

while (i <= 9) { i++;

if ((i % 5) == 0) continue poczatek;

i +=2;

//po zakończeniu pętli n jest równe 11=1;4;6;9;11

}

(4)

Składnia

switch (wyrażenie) { case etykieta1 : instrukcje;

break;

case etykieta2 : instrukcje;

break;

...

default : instrukcje;

}

Przykład:

switch (i)

{ case "Ksiazki" :

document.writeln("Wybrano ksiazki.");

break;

case "Czasopisma" :

document.writeln("Wybrano czasopisma.");

break;

default :

document.writeln("Taki wybór nie istnieje " + i + ".");

}

document.writeln(" Czy dokonałeś właściwego wyboru?");

1.2.11. Definiowanie zmiennych – instrukcja var

var nazwazmiennej1 [= wartosc] [..., nazwazmiennej2 [= wartosc] ]

Zmienne definiowane wewnątrz funkcji są lokalne, natromiast definiowane poza funkcją są globalne

Przykład

var num_1 = 0, num_2 = 0 1.2.12. Definiowanie stałej

Deklarowanie stałej bez mozliwości zmiany jej wartości

const nazwa1 [= wartosc] [..., nazwa2 [= wartosc] ] const a = 7;

document.writeln("a jest równa " + a ); // a jest równa 7 1.2.13. Instrukcja export

Eksportuje właściowści, funkcje i obiekty z jednego skryptu do innego skryptu

(5)

Składnia

export name1, name2, ..., nameN export *

1.2.14. Instrukcja import

Pozwala importować w skrypcie własności na rzecz obiektu Obiekt, funkcje oraz obiekty (nazwa1, nazwa2) ze skryptu, który eksportuje tę informację.

Składnia

import Obiekt.nazwa1, Obiekt.nazwa2, ...,Obiekt.nazwaN import Obiekt.*

1.2.15. function

Definiowanie funkcji ze specyfikacją parametrów typu łańcuchowego, liczbowego oraz obiektowego.

Składnia

function nazwa([param] [, param] [..., param]) { instrukcje }

Przykład 1 –

deklarowanie funkcji

function cena_brutto(cena, podatek) { return cena*(1+podatek/100); }

Przykład 2

– warunkowe deklarowanie funkcji warunek

<script type="text/javascript">

// <![CDATA[

function zawsze()

{ document.writeln(" Funcja ta zawsze jest deklarowana."); } if (1)

function warunek()

{ document.writeln("Funkcja jest deklarowana tylko dla if(1) ."); } // ]]>

</script>

Przykład 3

W JavaScript operuje się na referencjach do funkcji:

function f1(a,b) { return a+b;}

function f2(a,b) { return a-b; } switch(i)

{ case " +" : g=f1; break;

case " - " : g=f2; break;

}

document.writeln(g(1,4));

1.2.16. Instrukcja return

(6)

Składnia

return expression;

Przykład

function sqr(x) { return x*x; }

1.2.17. Instrukcja throw

Definiowanie wyjątków użytkownika Składnia

throw wyrażenie;

throw "Blad1"; // generowanie wyjątku z wartością łańcuchową throw 42; // generowanie wyjątku z wartością 42

throw true; // generowanie wyjątkuz wartością true Przykład:

Generowanie wyjątku z generowaniem obiektu. Należy zdefiniować obiekt, zanim zostanie przekazany do generowanego wyjatku. W bloku catch można odwoływać się do właściwości przekazanego obiektu. W przykładzie generowany jest obiekt moj_Wyjatek typu Wyjatek_uzytkownika i przekazany w instrukcji generowania wyjątku.

function Wyjatek_uzytkownika(wiadomosc) { this.message=wiadomosc;

this.name=" Wyjatek_uzytkownika ";}

function Podziel (dzielnik) { if (dzielnik != 0)

{ return 1/dzielnik;}

else

{ moj_Wyjatek = new Wyjatek_uzytkownika ("Dzielenie przez zero");

throw moj_Wyjatek;}

} try

{ odwrotnosc=Podziel(liczba);}

catch (e)

{ odwrotnosc=-1;

logMyErrors(e.message, e.name);

// przekazanie obiektu wyjątku do obsługi błędu

}

(7)

1.2.18. Instrukcja try..catch Składnia

try {

instrukcje }

[catch (wyjatek_var if wyrazenie) {instrukcje}] . . .

[catch (wyjatek_var) {instrukcje}]

[finally {instrukcje}]

Przykład 1 try

{ throw "moj_Wyjatek" }

// generowanie wyjatku

catch (e)

{

//obsługa wyjątku

logMyErrors(e) }

// przekazanie obiektu wyjątku do osługi błędu

Przykład 2 try

{ jakasfunkcja();}

// może wygenerować dwa wyjątki

catch (e if e instanceof Type)

{

/* instrukcje obsługujące błędy typu wyjątku*/

} catch (e if e instanceof Format)

{

/* instrukcje obsługujące błędy Format wyjątku*/

} catch (e)

{

/* instrukcje obsługujące dowolny typ wyjątku*/

logMyErrors(e) }

// przekazanie obiektu wyjatku do obsługi błędu

Przykład 3 –

instrukcje w bloku finally zawsze są wykonywane, również wtedy, gdy wystąpi wyjątek-przed błędnym zakończeniem skryptu (po stronie serwera).

Przykład ze strony http://www.programmershelp.co.uk/docs/javascript/stmt.html#1082618

openMyFile() try {

// tie up a resource

writeMyFile(theData) }

finally {

closeMyFile()

// always close the resource

}

(8)

1.3. Obiekty

Podstawowym typem obiektowym jest typ Object – wszystkie obiekty dziedziczą po typie Object. Standard ECMA opisuje także :

Chapter 1 Objects, Methods, and Properties

Array Boolean Date Function java

JavaArray JavaClass JavaObject JavaPackage Math

netscape Number Object Packages RegExp String sun

1) Obiekty JavaScriptu są tablicami asocjacyjnymi.

 Dostęp do pól obiektów jest możliwy przy użyciu równoważnych notacji:

obiekt.pole

 obiekt["pole"]

 obiekt[nr].

Obie notacje z nawiasami kwadratowymi zwyczajowo stosuje się jednak przy korzystaniu z tablic powstałych jako obiekt Array.

2) Definiowanie typu obiektu

Aby zdefiniować własny typ obiektu, należy utworzyć funkcję konstruktora:

function Obiekt1(wlasciwosc_1)

{ this.wlasciwosc_1 = wlasciwosc_1;

function metoda_1()

{ alert("Obiekt1::metoda_1()"); } this.metoda_1 = metoda_1;

}

(9)

3) Aby utworzyć obiekt typu Obiekt1, należy skorzystać z operatora new:

var obiekt1 = new Obiekt1(2);

Nowe obiekty w JavaScripcie tworzone są na stercie. W przypadku, kiedy do danego obiektu nie istnieje już żadna referencja, mechanizm garbage collectora usuwa dany obiekt z pamięci.

4) Ponieważ metody obiektu (funkcje) są jego skladowymi, dostęp do nich jest możliwy przy użyciu notacji z kropką i notacji z nawiasami kwadratowymi. Poniższe dwie linie kodu są równoważne:

obiekt1.metoda_1();

obiekt1["metoda_1"]();

1.4. Typ Function

Funkcje są jednocześnie obiektami typu Function. Obiekt ten ma konstruktor przyjmujący jako argument ciąg znaków, stąd pewną funkcję f_1 można zdefiniować w sposób następujący:

f_1= new Function("wlasciwosc_1","return wlasciwosc_1");

Ostatni argument Function() jest treścią kodu funkcji, pozostałe to nazwy parametrów. Ten sposób tworzenia funkcji może być mało wydajny.

1.5. Dziedziczenie

W implementacjach ECMAScript V3 dziedziczenie realizowane jest przez

prototypy.

(10)

1.5.1.Pierwszy sposób tworzenia dziedziczenia:

Aby utworzyć klasę Pochodna dziedziczącą po klasie Bazowa, należy ustawić pole Pochodna.prototype na nowy obiekt klasy Bazowa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Pokazy slajdów, skrypty JavaScript</title>

<script type="text/javascript">

// <![CDATA[

function Bazowa() { this.A = function()

{document.write("Bazowa::A() "); } this.B = function()

{document.write("Bazowa::B() ");}

}

function Pochodna()

{

// B przeciąża odpowiednią metodę B z klasy Bazowa:

this.B = function ()

{ document.write("Pochodna::B() "); } }

function Logo()

{ document.write("To jest początek pokazu: ");}

function proby() { Logo();

Pochodna.prototype = new Bazowa();

bazowy = new Bazowa();

pochodny = new Pochodna();

bazowy.A();

// wyświetla: "Bazowa::A()"

pochodny .A();

bazowy.B();

// wyświetla: "Bazowa::B()"

pochodny.B();

// wyświetla: "Pochodna::B()"

}

// ]]>

</script>

</head>

</body>

</html>

(11)

1.5.2. Drugi sposób tworzenia dziedziczenia w JavaScripcie.

Należy zmodyfikować metodę extending w prototypie klasy Object i w funkcjach konstruktora klasy dziedziczącej należy korzystać z metody extending(), wywoływanej jako pierwsza.

<script type="text/javascript">

// <![CDATA[

Object.prototype.extending = function (supClass) { tempObj = new supClass();

for (property in tempObj)

{ this[property] = tempObj[property]; } }

function Bazowa() { this.A = function ()

{ document.write("Bazowa::A() "); }

this.B = function ()

{ document.write("Bazowa::B() "); } }

function Pochodna()

{ this.extending(Bazowa);

this.B = function ()

{ document.write("Pochodna::B() "); } }

function Logo()

{ document.write("To jest początek pokazu: ");}

function proby() { Logo();

bazowy = new Bazowa();

pochodny = new Pochodna();

bazowy.A();

pochodny.A();

bazowy.B();

// wyświetla: "Bazowa::B()"

pochodny.B(); }

// wyświetla: "Pochodna::B()"

// ]]>

</script>

(12)

1.6.Operatory Chapter 5 Operators

Assignment Operators Comparison Operators

Using the Equality Operators Arithmetic Operators

% (Modulus) ++ (Increment) -- (Decrement) - (Unary Negation) Bitwise Operators

Bitwise Logical Operators Bitwise Shift Operators Logical Operators String Operators Special Operators

?: (Conditional operator) , (Comma operator) delete

function in

instanceof new

this typeof void

1.7. Ważne własciwości i funkcje niektórych typów obiektów

Chapter 2 Top-Level Properties and Functions decodeURI

decodeURIComponent encodeURI

encodeURIComponent eval

Infinity

isFinite

isNaN

NaN

Number

parseFloat

parseInt

String

undefined

(13)

2. Umieszczanie kodu JavaScript w plikach HTML i XHTML

wg encykopedii Wikipedia

2.1. W kodzie HTML 4.x

<script type="text/javascript" language="JavaScript1.5">

// Ten skrypt wymaga JS 1.5.

// Zostanie zignorowany przez przeglądarki // nie obsługujące tej wersji języka

function fun() { try {

...

} catch (e) { ...

} }

</script>

2.2. W przypadku XHTML 1.x

nie występuje parametr language. Ponadto specyfikacja XML wymaga, by umieścić treść skryptu wewnątrz sekcji CDATA, jeśli używamy znaków takich jak

"<" czy ">". Tak więc dla XHTML:

<script type="text/javascript">

// <![CDATA[

function fun() { ...

} // ]]>

</script>

Znaki komentarza "//" przy początku i końcu sekcji CDATA zapobiegają błędnemu zinterpretowaniu tej sekcji przez starsze przeglądarki.

2.3. Zewnętrzne skrypty dodajemy także przy użyciu w/w znacznika, dodając tylko parametr src z nazwą pliku zawierającego kod skryptu:

<script type="text/javascript" src="plik.js"></script>

Typem MIME dla samodzielnych plików z kodem w JavaScripcie jest

"text/javascript" lub "application/x-javascript".

(14)

3. Skrypty po stronie klienta – kontynuacja wykładu 6

Skrót do materiałów dotyczących mozliwości budowy skryptów typu JvaScript po stronie klienta.

http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/

Zastosowanie obiektów Navigatora Hierarchia typów obiektów

.

Appendix A, "Object summary."

Kazda strona zawiera następujące obiekty:



navigator: posiada typ i nazwę używanego Navigatora, typ MIME wspierany oraz plug-iny zainstalowane po stronie klienta.



window:

obiekt stojący najwyżej w hierarchii; posiada właściwości bieżącego okna przeglądarki; istnieje także obiekt typu window dla każdego okna dziecka w dokumentach typu ramki.



document: zawiera właściwości reprezentujące zawartość dokumentu:

tytuł, kolor tła, linki oraz formularze (

Chapter 3, "Using windows and frames."

)



location: posiada właściwości reprezentujące bieżący URL.



history: zawiera właściwości reprezentujące adresy URL klientów, z

którymi poprzednio połączono się.

(15)

3.1. Właściwosci dokumentu Przykład 1.

(16)

<head>

<script type="text/javascript">

// <![CDATA[

function update(form) { form.imie.value="";

form.przycisk.value="Nacisnij, aby uaktualnić";

alert("Modyfikacja danych formularza"); } // ]]>

</script>

</head>

<body>

<h2>Ankieta</h2>

<form name="ankieta1"

method="post" action="http://sprocket.ict.pwr.wroc.pl/~zkruczkiewicz/imie.php">

<i>Podaj nazwisko: </i>

<input type ="text" name="imie" value=""

class="poletekstowe" onclick="update(ankieta1)"></input>

<br/>

<p><input type="button" name="przycisk"

value="Nacisnij, aby uaktualnić"

onclick="document.ankieta1.przycisk.value += '...Zmieniono!', document.ankieta1.imie.value += '...Zmieniono!'"/>

</p>

</form>

</body>

</html>

(17)

3.2. Ramki

Przyklad 2 - Strona “ramka1.html”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<frameset rows="200,*">

<frameset cols="200,*">

<frame src="b1.html" name="b1"></frame>

<frame src="b2.html" name="b2"></frame>

</frameset>

<frame src="b3.html" name="b3"></frame>

</frameset>

</html>



b1 jest top.frames[0]



b2 jest top.frames[1]



b3 jest top.frames[2]

(18)

Przykład 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title> Pierwsze ramki</title>

</head>

<frameset cols="200,*">

<frame src="ramka3.html" name="br1"></frame>

<frame src="b3.html" name="br3"></frame>

</frameset>

</html>

Strona “ramka.2html”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title> Pierwsze ramki</title>

</head>

<frameset rows="200,*">

<frame src="b1.html" name="b1"></frame>

<frame src="b2.html" name="b2"></frame>

</frameset>

</html>

Strona “ramka3.html”



br1 jest top.frames[0]



br3 jest top.frames[1]



b1 jest top.frames[0] [0] lub br1.frames[0]



b2 jest top.frames[0][1] lub br1.frames[1]

(19)

Przykład 4.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title> Ramki</title>

</head>

<frameset cols="200,*">

<frame src="ramka4_1.html" name="ramka1"></frame>

<frame src="ramka4_2.html" name="ramka2"></frame>

</frameset>

</html>

<head>

<title> Pierwsza ramka</title>

<script type="text/javascript">

// <![CDATA[

tablica=new Array("b1.html","b2.html") function tresc(nr)

{ if( nr==0)

parent.ramka2.document.location.href=tablica[nr];

else

parent.ramka1.document.location.href=tablica[nr];

} // ]]>

</script>

</head>

<body>

<h1>Nawigacja</h1>

<a href="javascript:tresc(0)">Strona 1</a>

<a href="javascript:tresc(1)">Strona 2</a>

</body>

</html>

Plik „ramka4_1.html”

(20)

<head>

<title> Druga ramka</title>

<script type="text/javascript">

// <![CDATA[

var Fot1=new Image();

Fot1.src="Clouds.wmf";

var Fot2=new Image();

Fot2.src="kwiatek.gif";

var p=0;

function tresc_na_ekran() { if(p==0)

{parent.ramka2.document.obraz.src=Fot1.src;

p=1;}

else

{parent.ramka2.document.obraz.src=Fot2.src;

p=0; } }

// ]]>

</script>

</head>

<body>

<h1>Strona w ramce</h1>

<img src="kwiatek.gif" name="obraz" id="obraz"

alt="Obrazek, który można zmieniać"

onclick="tresc_na_ekran()"></img>

</body>

</html>

Plik „ramka4_2.html”

(21)

(22)

3.3. Okna

3.3.1. Tworzenie zamykanie nowego okna Przykład 5

<head>

</head>

<body>

<p>

<input type="button" value="Otworz okno 2"

onclick="msgWindow=window.open('','okno2',

'resizable=no,width=200,height=200')"/></p>

<p><a href="b1.html" target="okno2">Ładuj plik do okna 2</a></p>

<p><input type="button" value="Zamknij okno 2"

onclick="msgWindow.close()"/></p>

</form>

</body>

</html>

3.3.2. Przewijanie otwieranego okna Przykład 6

<head><title>Pokazy slajdów, skrypty JavaScript</title>

(23)

<script type="text/javascript">

// <![CDATA[

function okno(form)

{ msgWindow=window.open('b1.html','okno2','resizable=no,width=300, height=300, toolbars=yes, location=yes, scrollbars=yes');

setTimeout('msgWindow.scroll(0,100)',1000);

msgWindow.focus(); } // ]]>

</script>

</head>

<body>

<p><input type="button" value="Otworz okno 2" onclick="okno()"/></p>

<p><a href="b2.html" target="okno2">Ładuj plik do okna 2</a></p>

<p><input type="button" value="Zamknij okno 2"

onclick="msgWindow.close()"/></p>

</form>

</body>

</html>

(24)

3.3.3. Liczba odwiedzeń okna, zastosowanie URL, zmiana rozmiarów i położenia głównego okna oraz okna potomnego Przykład 7

<head>

<script type="text/javascript">

// <![CDATA[

var p1=0;

function okno()

{ msgWindow=window.open('b1.html','okno2',

'resizable=no,width=300,height=300,toolbars=yes,location=yes, scrollbars=yes');

msgWindow.moveTo(300,100);

setTimeout('msgWindow.scroll(0,100)',1000);

msgWindow.focus();

++p1;}

function okno1()

{msgWindow.location="b2.html";

msgWindow.moveTo(300,100);

msgWindow.focus();

++p1; } // ]]>

</script>

</head>

<body onload="self.resizeTo(350,250), self.moveTo(0,0)">

<p><input type="button" value="Otworz okno 2" onclick="okno()"/></p>

<p><a href="javascript:okno1()" >Ładuj plik do okna 2</a>

</p>

<p> <input type="button" value="Zamknij okno 2"

onclick="msgWindow.close(), alert('liczba odwiedzeń: '+p1)"/></p>

</form>

</body>

</html>

Okienko to pokazuje się po naciśnięciu przycisku „Zamknij okno 2”, jeśli naciśnięto raz przycisk „Otwórz okno 2” oraz link

„Ładuj plik do okna 2” (verte)

(25)

Okno to pokazuje się po naciśnięciu przycisku

„Otwórz okno 2”

Okno to pokazuje się po naciśnięciu linku

„Ładuj plik do okna 2”

(26)

3.4. Uzupełnienia do skryptów Advanced topics

This chapter describes some special concepts and applications that extend the power and flexibility of Navigator JavaScript. The chapter covers the following topics:

Using JavaScript URLs Using cookies

Using client-side image maps Using data tainting for security Using server-side image maps Determining installed plug-ins Using the status bar

3.4. Podsumowanie obiektów zarządzanych w skryptach po stronie klienta

Tablica zawiera listę obiektówwraz z ich właściwościami, metodami oraz funkcje obsługi zdarzeń.

Każdy obiekt posiada metody: eval, toString oraz valueOf.

Obiekt Właściwości Metody Funkcje obsługi zdarzeń

Anchor none none none

anchors array length none none

Applet none All public methods of the applet none

applets array length none none

Area hash

host hostname href pathname port protocol search target

none onMouseOut

onMouseOver

Array length

prototype join reverse sort

none

Button form

name type value

blur click focus

onBlur onClick onFocus

Checkbox checked

defaultChecked form

name type

blur click focus

(27)

value

Date prototype getDate

getDay getHours getMinutes getMonth getSeconds getTime

getTimezoneOffset getYear

parse setDate setHours setMinutes setMonth setSeconds setTime setYear toGMTString toLocaleString toString UTC valueOf

none

document alinkColor

Anchor anchors Applet applets Area bgColor cookie domain embeds fgColor Form forms Image images lastModified linkColor Link links referrer title URL vlinkColor

close open write writeln

none

FileUpload form

name type value

blur

focus onBlur

onChange onFocus

(28)

Form action Button Checkbox elements encoding FileUpload Hidden length method name Password Radio Reset Select Submit target Text Textarea

reset

submit onReset

onSubmit

forms array length none none

Frame frames

name length parent self window

blur

clearTimeout focus

setTimeout

onBlur onFocus

frames array length none none

Hidden name

type value

none none

history current

length next previous

back forward go

none

history array length none none

Image border

complete height hspace lowsrc name prototype src

vspace width

none onAbort

onError onLoad

images array length none none

Link and Area hash host hostname href

none onClick

onMouseOut onMouseOver

(29)

pathname port protocol search target

links array length none none

location hash

host hostname href pathname port protocol search

reload

replace none

Math E

LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2

abs acos asin atan atan2 ceil cos exp floor log max min pow random round sin sqrt tan

none

MimeType description

enabledPlugin type

suffixes

none none

mimeTypes array length none none

navigator appCodeName

appName appVersion mimeTypes plugins userAgent

javaEnabled

taintEnabled none

options array length none none

options array elements defaultSelected index

length selected

none none

(30)

selectedIndex text

value

Password defaultValue

form name type value

blur focus select

onBlur onFocus

Plugin description

filename length name

none none

plugins array length refresh none

Radio checked

defaultChecked form

length name type value

blur click focus

Reset form

name type value

blur click focus

Select form

length name options

selectedIndex text

type

blur

focus onBlur

onChange onFocus

String length

prototype anchor big blink bold charAt fixed fontcolor fontsize indexOf italics lastIndexOf link

small split strike sub substring

none

(31)

sup

toLowerCase toUpperCase

Submit form

name type value

blur click focus

Text defaultValue

blur focus select

onBlur onChange onFocus onSelect

Textarea defaultValue

blur focus select

onBlur onChange onFocus onSelect

window closed

defaultStatus document Frame frames history length location name opener parent self status top window

alert blur

clearTimeOut close

confirm focus open prompt setTimeOut

onBlur onError onFocus onLoad onUnload

(32)

Dodatek Z Wikipedii, wolnej encyklopedii.

„JScript - język skryptowy, który jest opracowaną przez firmę Microsoft, rozszerzoną implementacją języka ECMAScript (ECMA262), międzynarodowego standardu opartego na JavaScript, firmy

Netscape. Jest interpretowany przez przeglądarkę Internet Explorer i Windows Scripting Host.

Najnowszą wersją języka jest JScript.NET.

JavaScript ("JS") to stworzony przez firmę Netscape zorientowany obiektowo skryptowy język programowania, najczęściej stosowany na stronach WWW. Implementacja JavaScriptu stworzona przez firmę Microsoft nosi nazwę JScript.

Głównym autorem języka JavaScript jest Brendan Eich.

Pod koniec lat 90. ubiegłego wieku organizacja ECMA wydała ustandaryzowaną specyfikację tego języka pod nazwą ECMAScript.

1. Wersje języka

JavaScript 1.0

Pierwotna wersja języka, zaimplementowana w wersji 2.0 przeglądarki Netscape Navigator.

Odpowiada jej JScript 1.0, zaimplementowany w Internet Explorerze 3.0 JavaScript 1.1

W tym wydaniu rozbudowano obsługę tablic (obiekt Array) i poprawiono większość błędów wersji 1.0. Ta wersja została zaimplementowana w Netscape Navigatorze 3.0 oraz jako JScript 2.0 w późniejszych wydaniach Internet Explorera 3.0.

ECMAScript v1

Pierwsza specyfikacja języka stworzona przez ECMA, bliska JavaScriptowi 1.1, choć występują pewne różnice. Zaimplementowana jako JavaScript 1.3 w Netscape Navigatorze 4.5 i JScript 3.0 w Internet Explorerze.

JavaScript 1.2

Od tej wersji dostępne są m. in. wyrażenia regularne i instrukcja switch. Wersja 1.2 wydana została, zanim ECMA ukończyła pierwszą specyfikację, stąd JavaScript 1.2 nie jest zgodny z ECMA v1.

Niektóre operatory i metody obiektów Array i String zachowują się inaczej niż w specyfikacji ECMA oraz inaczej niż w późniejszych wersjach języka, dlatego wersji tej należy unikać.

JavaScript 1.2 został zaimplementowany w Netscape Navigatorze 4.0.

JavaScript 1.3

Wersja ta nie wprowadziła nowych możliwości, zostały w niej poprawione jedynie niezgodności wersji 1.2 ze specyfikacją ECMAScript v1. Dostępna w Netscape Navigatorze 4.5 oraz jako JScript 3.0 w Internet Explorerze.

ECMAScript v2 Poprawiono błędy i niejasności w specyfikacji ECMAScript v1.

JavaScript 1.4

Wersja ta dostępna była tylko jako język programowania po stronie serwera, używana np. w Netscape Enterprise Server.

Wg dokumentacji Opery 6, jej implementacja jest najbliższa tej wersji.

(33)

ECMAScript v3

Do specyfikacji dołączono instrukcję switch, wyrażenia regularne oraz obsługę wyjątków.

Standard w całości zaimplementowany w Operze 7.

JScript 5.0

Częściowa implementaca ECMAScriptu v3 (obsługuje wyjątki), dostępna w Internet Explorerze 5.0.

JavaScript 1.5

Pełna implementacja ECMAScriptu v3 w przeglądarkach bazujących na Mozilli (w tym Netscape 6.x i 7.x).

JScript 5.5 i 5.6

Pełna implementacja ECMAScriptu v3 dostępna w Internet Explorerze 5.5 i 6.0.

ECMAScript v4, JavaScript 2.0 i JScript.NET

W chwili pisania tego artykułu prace nad kolejną wersją specyfikacji trwały. Microsoft na bazie wstępnej wersji specyfikacji stworzył tzw. JScript.NET, jednakże język ten nie został włączony do Internet Explorera. Firma Netscape wraz z Fundacją Mozilla opracowały eksperymentalną implementację tej specyfikacji pod nazwą "JavaScript 2.0".

Wersja ta wprowadza rewolucyjne zmiany, takie jak statyczna obsługa typów, definiowanie klas oraz prostsze dziedziczenie.

Żadna przeglądarka internetowa w chwili obecnej nie obsługuje ECMAScript v4.”

Podsumowanie

JavaScript w przeglądarkach Netscape Navigator, Mozilla i Mozilla Firefox

Wersja JavaScriptu Wersja przeglądarki JavaScript 1.0 Navigator 2.0 JavaScript 1.1 Navigator 3.0 JavaScript 1.2 Navigator 4.0-4.05 JavaScript 1.3 Navigator 4.06-4.7x JavaScript 1.4 n/d

JavaScript 1.5

Navigator 6.0 Mozilla 0.x, 1.x

Mozilla Firefox 0.x, 1.x

JavaScript w Netscape Enterprise Server

Każda wersja serwera Netscape Enterprise Server także obsługuje inną wersję JavaScriptu.

Aby ułatwić pisanie skryptów zgodnych z różnymi wersjami Enterprise Servera, w każdym rozdziale poświęconym danej możliwości języka podajemy wersję NES/FES, w której zaimplementowano daną funkcjonalność.

Skrót Wersja Enterprise Servera NES 2.0 Netscape Enterprise Server 2.0 NES 3.0 Netscape Enterprise Server 3.0

(34)

2. Zastosowania

Najczęściej spotykanym zastosowaniem klienckiej wersji języka JavaScript są strony WWW. Skrypty pisane w JS służą najczęściej do zapewnienia interaktywności oraz sprawdzania poprawności formularzy HTML oraz budowania elementów nawigacyjnych (np. rozwijane menu). Tak uruchomiony skrypt JavaScriptu ma ograniczony dostęp do komputera, na którym jest wykonywany (ma wysoce ograniczony dostępu do zasobów systemu), o ile nie zostanie podpisany cyfrowo.

Niektóre strony www zbudowane są z wykorzystaniem JavaScriptu (lub JScriptu) po stronie serwera, jednakże znacznie częściej korzysta się w tym przypadku z innych języków.

W języku JavaScript można także pisać pełnoprawne aplikacje. Istnieje kilka środowisk, które to umożliwiają.

Pierwszego z nich dostarcza Mozilla. Dzięki technologiom takim jak XUL, XBL, XPCOM oraz JSLib można szybko tworzyć aplikacje korzystające z zasobów systemowych, z graficznym interfejsem użytkownika dopasowującym się do danej platformy. Przykładem aplikacji JS+XUL może być klient IRC o nazwie ChatZilla, domyślnie dołączony do pakietu Mozilla. Znacznie więcej programów korzystających z tych technologii można znaleźć na stronie MozDev.org.

Microsoft udostępnia także biblioteki umożliwiające tworzenie aplikacji w JavaScript (JScript) jako część środowiska Windows Scripting Host. Ponadto, JScript.NET jest jednym z podstawowych języków środowiska .NET.

Warto także wspomnieć o stworzonym przez IBM środowisku SashXB dla systemu Linux, które umożliwia tworzenie w języku JavaScript aplikacji korzystających z GTK+, GNOME i OpenLDAP.”

3. Java i JavaScript wg encyklopedii Wikipedia

„Początkowo Netscape nazwała ten język "LiveScript", lecz szybko nazwa ta została zmieniona na

"JavaScript" wskutek biznesowych porozumień między Netscape a firmą Sun Microsystems. Nazwa ta powoduje wiele nieporozumień wśród początkujących programistów.

Mimo odrębności tych języków, skrypty JavaScriptu mogą mieć dostęp do publicznych metod klas Javy (głównie apletów) dzięki tzw. technologii LiveConnect. Programiści Javy mogą także stosować klasę netscape.javascript.JSObject jako "opakowanie" obiektów JavaScriptu, jednakże możliwość ta dostępna jest jedynie, jeśli aplet Javy i skrypt JavaScriptu uruchamiane są przez przeglądarki Mozilla, Opera i Netscape.”

4. JavaScript w przeglądarkach internetowych Wg encyklopedii Wikipedia

„Implementacje JavaScriptu w przeglądarkach internetowych dostarczają obiektów pozwalających na modyfikowanie zawartości dokumentu oraz tworzenie i odczyt tzw. cookies (obiekt document), manipulowanie oknami i wyświetlanie prostych okien dialogowych (obiekt window), pobieraniem informacji o przeglądarce (obiekt navigator), sterowaniem pluginami przeglądarek oraz obsługą zdarzeń.

Problem z manipulowaniem zawartością dokumentu stanowił brak standaryzacji obiektowego modelu dokumentu (DOM) - poczatkowo w wersjach 4.x przeglądarek Netscape dostęp do niektórych elementów dokumentu możliwy był przy użyciu kolekcji document.layers, a w Internet Explorerze 4.x - document.all.

Organizacja W3C opracowała jednak jednolity DOM, obsługiwany przez wszystkie współczesne przeglądarki (Netscape od wersji 6, IE od wersji 5, Opera od wersji 6, Konqueror od wersji 3, Mozilla i Safari w dowolnej wersji). Aby uzyskać referencje do obiektu wewnątrz dokumentu HTML, należy skorzystać z metody document.getElementById(identyfikator), tym samym wymienione wcześniej kolekcje all i layers uważa się za przestarzałe.”

(35)

5. Gdzie szukać informacji o JavaScripcie

5.1. Wg Wikipedia: specyfikacja języka ECMAScript jest dostępna pod adresem http://www.ecma-international.org/publications/standards/ECMA-262.HTM

 Propozycja języka JavaScript 2.0 (Mozilla.org)

 Przewodnik po JavaScripcie 1.5

w/w strony Netscape aktualnie nie działają, dokumentację do JavaScript można znaleźć na stronach Mozilli, np. dla wersji 1.3:

 http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/ dokumenty: Guide i Reference

 Zasoby MSDN na temat Microsoft JScript

 Kurs i skrypty JavaScript

 JavaScript: kursy, artykuły, skrypty

 XUL Planet

 jsConcise sourceforge.net Zobacz też: AJAX

5.2. http://developer.mozilla.org/pl/docs/Przewodnik_po_j

%C4%99zyku_JavaScript_1.5



Przewodnik po języku JavaScript 1.5 - dostarcza informacji na temat samego języka JavaScript i jego obiektów.



Dokumentacja języka JavaScript 1.5 (ten dokument) - dostarcza informacji na temat języka JavaScript w formie encyklopedycznej

5.3. http://www.programmershelp.co.uk/docs/javascript/contents.html

Core JavaScript Reference

This book is a reference manual for the core JavaScript language for version 1.5. JavaScript is Netscape's cross-platform, object-based scripting language. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects.

About this Book New Features in this Release What You Should Already Know JavaScript Versions

Where to Find JavaScript Information Document Conventions

Part 1

Chapter 1 Objects, Methods, and Properties Array

Boolean Date Function java

(36)

JavaArray JavaClass JavaObject JavaPackage Math

netscape Number Object Packages RegExp String sun

Chapter 2 Top-Level Properties and Functions decodeURI

decodeURIComponent encodeURI

encodeURIComponent eval

Infinity isFinite isNaN NaN Number parseFloat parseInt String undefined

Part 2

Chapter 3 Statements break

const continue do...while export for for...in function if...else import label return switch throw try...catch var while with

Chapter 4 Comments comment

(37)

Chapter 5 Operators Assignment Operators Comparison Operators Using the Equality Operators Arithmetic Operators

% (Modulus) ++ (Increment) -- (Decrement) - (Unary Negation) Bitwise Operators

Bitwise Logical Operators Bitwise Shift Operators Logical Operators String Operators Special Operators

?: (Conditional operator) , (Comma operator) delete

function in

instanceof new this typeof void

Part 3 LiveConn

Chapter 6 Java Classes, Constructors, and Methods JSException

JSObject

Part 4

Appendix A Reserved Words Appendix B Deprecated Features Index

Index Next

Last Updated September 28, 2000

5.4.

Introduction

What's new in Navigator 3.0 What you should already know

(38)

Document conventions

Part 1. Using JavaScript in Navigator

1. Getting started What is JavaScript?

Embedding JavaScript in HTML Defining and calling functions Using the write method Scripting event handlers Validating form input

2. Using Navigator objects Navigator object hierarchy document properties: an example JavaScript reflection and HTML layout Key Navigator objects

Navigator's object arrays

3. Using windows and frames Opening and closing windows Using frames

Referring to windows and frames Navigating among windows and frames

4. LiveConnect Enabling LiveConnect The Java Console

About the Netscape packages JavaScript to Java communication Java to JavaScript communication

5. Advanced topics Using JavaScript URLs Using client-side image maps Using server-side image maps Using the status bar

Using cookies

Using data tainting for security Determining installed plug-ins

Part 2. The JavaScript Language

6. Values, variables, and literals Values

Variables Literals

7. Expressions and operators Expressions

Operators

8. Object model Objects and properties Functions

Creating new objects

9. Built-in objects and functions Built-in objects

Built-in functions

(39)

10. Overview of JavaScript statements Conditional statement

Loop statements

Object manipulation statements and operators Comments

Part 3. Reference

11. Statements break

comment continue for for...in function if...else new return this var while with

12. The Netscape packages netscape.javascript.JSObject netscape.javascript.JSException netscape.plugin.Plugin

13. Navigator JavaScript reference abs

acos action alert alinkColor anchor method Anchor object anchors appCodeName Applet applets appName appVersion Area

arguments array arguments property Array

asin atan atan2 back bgColor big blink blur bold Boolean border Button caller ceil charAt Checkbox checked clearTimeout click

close (document object) close (window object) closed

complete confirm constructor cookie cos current Date

defaultChecked defaultSelected defaultStatus

(40)

document domain E

elements array elements property embeds array enabledPlugin encoding escape eval exp fgColor filename FileUpload fixed floor focus fontcolor fontsize Form object form property forms forward Frame frames Function getDate getDay getHours getMinutes getMonth getSeconds getTime

getTimezoneOffset getYear

go hash height Hidden history array history object host hostname href hspace Image images index indexOf isNaN italics javaEnabled join lastIndexOf lastModified length link method Link object linkColor links LN2 LN10 location log LOG2E LOG10E lowsrc Math max MAX_VALUE method MimeType mimeTypes min MIN_VALUE name NaN navigator

NEGATIVE_INFINITY next

Number onAbort onBlur onChange onClick onError onFocus onLoad

(41)

onMouseOut onMouseOver onReset onSelect onSubmit onUnload

open (document object) open (window object) opener

Option options parent parse parseFloat parseInt Password pathname PI Plugin plugins port

POSITIVE_INFINITY pow

previous prompt protocol prototype Radio random referrer refresh reload replace reset method Reset object reverse round scroll search select method Select object selected selectedIndex self

setDate setHours setMinutes setMonth setSeconds setTime setTimeout setYear sin small sort split sqrt SQRT1_2 SQRT2 src status strike String sub

submit method Submit object substring suffixes sup taint taintEnabled tan target Text object text property Textarea title toGMTString toLocaleString toLowerCase top toString toUpperCase type unescape untaint

(42)

UTC value valueOf vlinkColor vspace width window object window property write

writeln

A. Object summary

B. Reserved words

C. Color values

D. Netscape cookies

E. LiveAudio and LiveConnect

F. Features added after version 1

Index