{ instrukcje }

Transkrypt

{ instrukcje }

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; }
Zofia Kruczkiewicz, Wykład 7, HTML
1
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");
2
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
}
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=3;4;7;8;11
11=1;4;6;9;11
3
1.2.10. Instrukcja switch
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
4
1.2.13. Instrukcja export
Eksportuje właściowści, funkcje i obiekty z jednego skryptu do innego skryptu
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));
5
1.2.16. Instrukcja return
Specyfikuje wartość zwracaną przez funkcję.
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
}
6
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
7
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;
}
8
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.
9
1.5.1.Pierwszy sposób tworzenia dziedziczenia:
Aby utworzyć klasę Pochodna dziedziczącą
Pochodna.prototype na nowy obiekt klasy Bazowa:
po
klasie
Bazowa,
należy
ustawić
pole
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>Pokazy slajdów, skrypty JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styl10.css" rel="stylesheet" type="text/css" />
// <![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 onload= "proby()">
</body>
</html>
10
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.
// <![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() "); }
}
{ document.write("Bazowa::B() "); }
function Pochodna()
{ this.extending(Bazowa);
{ 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>
11
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
12
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:
// <![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".
13
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ę.
14
3.1. Właściwosci dokumentu
Przykład 1.
15
<head>
// <![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>
<input type="submit" value="Prześlij dane operacji"/><br/>
</form>
</body>
</html>
16
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">
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/></head>
<frameset rows="200,*">
<frameset cols="200,*">
<frame src="b1.html" name="b1"></frame>
</frameset>
</frameset>
</html>
•
•
•
b1 jest top.frames[0]
17
Przykład 3
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Pierwsze ramki</title>
</head>
<frame src="ramka3.html" name="br1"></frame>
<frame src="b3.html" name="br3"></frame>
</frameset>
</html>
Strona “ramka.2html”
<head>
<title> Pierwsze ramki</title>
</head>
<frameset rows="200,*">
</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]
18
Przykład 4.
<head>
<title> Ramki</title>
</head>
<frame src="ramka4_1.html" name="ramka1"></frame>
<frame src="ramka4_2.html" name="ramka2"></frame>
</frameset>
</html>
<head>
<title> Pierwsza ramka</title>
// <![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”
19
<head>
<title> Druga ramka</title>
// <![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”
20
21
3.3. Okna
3.3.1. Tworzenie zamykanie nowego okna
Przykład 5
<head>
</head>
<body>
<form name="ankieta1" method="post" action="http://sprocket.ict.pwr.wroc.pl/~zkruczkiewicz/imie.php">
<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>
22
// <![CDATA[
function okno()
{ 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>
23
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>
// <![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)
24
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”
25
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
blur
defaultChecked click
form
focus
name
type
value
onBlur
onClick
onFocus
26
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
Form
action
Button
reset
submit
onReset
onSubmit
27
Checkbox
elements
encoding
FileUpload
Hidden
length
method
name
Password
Radio
Reset
Select
Submit
target
Text
Textarea
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
pathname
port
none
onClick
onMouseOut
onMouseOver
28
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
none
enabledPlugin
type
suffixes
none
mimeTypes array
length
none
navigator
appCodeName javaEnabled
appName
taintEnabled
appVersion
mimeTypes
plugins
userAgent
none
options array
length
none
none
options array elements defaultSelected none
index
length
selected
selectedIndex
text
value
none
none
29
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
blur
defaultChecked click
form
focus
length
name
type
value
onBlur
onClick
onFocus
Reset
form
name
type
value
blur
click
focus
onBlur
onClick
onFocus
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
sup
toLowerCase
toUpperCase
none
Submit
form
blur
onBlur
30
name
type
value
click
focus
onClick
onFocus
Text
defaultValue
form
name
type
value
blur
focus
select
onBlur
onChange
onFocus
onSelect
Textarea
defaultValue
form
name
type
value
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
31
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.
32
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
Navigator 6.0
JavaScript 1.5
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
33
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.”
34
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_Ja
vaScript_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
35
Function
java
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
36
Chapter 4 Comments
comment
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
Copyright © 2000 Netscape Communications Corp. All rights reserved.
Last Updated September 28, 2000
37
5.4.
Introduction
What's new in Navigator 3.0
What you should already know
How to use this book
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
38
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
defaultValue
description
document
39
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
onMouseOut
40
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
URL
userAgent
UTC
41
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
Copyright © 1995-1996 Netscape Communications Corporation
Last modified 01/08/2006 18:22:04
42

{ instrukcje }

Transkrypt

Podobne dokumenty

INŻYNIER OPROGRAMOWANIA JAVA/JEE

Coffee Bean - strona dla kawiarni Strona www wykonana w

Detekcja pluginów w przeglądarce

Wstęp - Webmaster Helion

JavaScript - sosw.poznan.pl