Kurs WWW

Paweł Rajba

Paweł Rajba

[e-mail]

http://pawel.ii.uni.wroc.pl/

Wprowadzenie do JavaScript



Stworzony przez firmę Netscape



Wykonywany po stronie



klienta – i tą wersją będzie się interesować



serwera



Zorientowany obiektowo język skryptowy



Obsługiwany przez przeglądarki



MS Internet Explorer 3.0 i wzwyż



Netscape Navigator 2.0 i wzwyż



Opera, ...

JavaScipt i ECMAScript



Organizacja ECMA - European Computer

Manufacturers Association

http://www.ecma-international.org/



Współpraca Netscape z ECMA w celu

standaryzacji JavaScript



ECMAScript – standard JavaScript



JavaScript 1.5 jest w pełni zgodny z

ECMAScript-262 Edition 3

Osadzanie JavaScript



Węwnątrz dokumentu HTML

<SCRIPT language="JavaScript"
type="text/javascript">
<!–
...tutaj umieszczamy skrypt...
//-->
</SCRIPT>



Dołączenie zewnętrznego pliku

<SCRIPT language="JavaScript" type="text/javascript"
src="skrypt.js"></SCRIPT>



Wewnątrz znaczników:

<A href="javascript:void(0)">Tu klikać</A>

Osadzanie JavaScript



Gdzie umieszczać?



jeżeli w skrypcie mamy definicje funkcji lub

coś co należy wykonać przed ładowaniem

strony, to należy skrypt umieścić w nagłówku,



jeżeli natomiast skrypt ma wykonać jakieś

akcje w trakcie ładowania (np. coś napisać na

ekranie) lub później, to skrypt należy umieścić

wewnątrz treści dokumentu.

Komentarze



// komentarz jednowierszowy



/* komentarz blokowy */

Literały



Liczby całkowite



podstawa dziesiętna, np. 69



podstawa ósemkowa, np. 033 (deprecated)



podstawa szesnastkowa, np. 0x8F



Liczby zmiennoprzecinkowe



mogą mieć następujące części:



liczba całkowita w postaci dziesiętnej



kropkę (".")



część ułamkową (liczba całkowita w postaci

dziesiętnej)



wykładnik



przykłady: 3.14, -3.1E12, .1e12, 2E-12.

Literały



Logiczne (Boolean): true, false



Napisy



Umieszczamy w pojedynczych lub podwójnych

apostrofach



Znaki specjalne



\n – nowy wiersz



\t – tabulacja



\" – podwójny apostrof



\\ - backslash



"Aloha", 'Aloha', "c:\\Program Files"



null – wartość pusta



undefined – wartość niezdefiniowana

Literały



Tablice



auta = ["Audi","Ford","Fiat"]
auta[0] // "Audi"
auta[1] // "Ford"
auta[2] // "Fiat"



kolory = [ ,"niebieski", ,"zielony", ]
kolory[0] // undefined
kolory[1] // "niebieski"
kolory[2] // undefined
kolory[3] // "zielony"
Ten ostatni przecinek nie ma znaczenia – jest pomijany

Literały



Obiekty



var ulubione = "Królik";
function inne(nazwa) {
return nazwa;
}
farma={male: "Chomik", srednie: ulubione,
duze: inne("Słoń")}
farma.male // "Chomik"
farma.srednie // "Królik"
farma.duze // "Słoń"



punkt={coords: {x: 7, y: 10}, color: "red"}
punkt.coords.x // 7
punkt.coords.y // 10
punkt.color // "red"

Typy i konwersja typów



JavaScript jest językiem typowanym

dynamicznie



Nie deklarujemy typów, a w razie potrzeby

dokonywane są odpowiednie konwersje

Przykład:

var zmienna = 69;
zmienna = "nowa wartość" // tutaj nie będzie błędu
x = "x = "+40; // zwraca "x = 40"
y = "69"-9; // zwraca 60
z = "69"+9; // zwraca 699

Zmienne i stałe



Deklaracje zmiennych



przez przypisanie wartości
x=5;



przez słowo var



jeśli zmiennej nie zostanie przypisana wartość
to przyjmuje wartość undefined



Deklaracja stałych



stała nie może zmieniać wartości lub być

przedeklarowana



const wroclaw = "071";

Operatory



Przypisania:

=, +=, -=, /=, %=

x = 7; x += 4; x %= 10;



Porównania:

==, ===, !==, !=, <=, <, >, >=

4=='4';

3==='3'

; 3!=="3"; 3<10;



Arytmetyczne:

++, --, %

x++; --x; x%4;



Bitowe:

&, |, ^, ~, <<, >> (zachowuje znak),

>>>
15 & 9 // 9; 15 ^ 9 // 6; 9 << 2 // 36;



Logiczne:

&&, ||, !

true && false // false; !false // true

Operatory



Operator łączenia napisów: +

"Paweł "+"Rajba"==="Paweł Rajba"



Operator warunkowy:

?:

status = (wiek>=18) ? "pełnoletni" : "dziecko";



Operator przecinek - stosowany głównie w for

for (var i=0, j=9; i<=9; i++, j--) { ... }



Operator in – sprawdza, czy obiekt ma

szukaną własność

auta=new Array("Volvo", "Audi", "Mercedes);
0 in auta;

4 in auta

; PI in Math;

Operatory



Operator delete:

delete

x=2; var y=3;
delete x; // zwraca true
delete y; // zwraca false (bo jest var)
auta=new Array("Volvo", "Audi", "Mercedes);
delete auta[1];
1 in auta; // zwraca false
auta[1]=undefined;
1 in auta; // zwraca true



Operator new

objectName = new objectType ( param1 [,param2]

...[,paramN] )

Operatory



Operator instanceof

objectName instanceof objectType
dzien=new Date(2000, 10, 22)
if (dzien instanceof Date) { ... }



Operator this – odwołanie do bieżącego

obiektu

this.color



Operator void – wymusza obliczenie

wyrażenia bez zwracania wartości

<A HREF="javascript:void(0)">Tu klikać i nic
się nie stanie</A>

Instrukcje sterujące



Blok

{instrukcja1 instrukcja2 ... instrukcjaN}



Instrukcja warunkowa

if



if (condition) {
...instrukcje...
}
[else {
...instrukcje...
} ]



if (x<10) { return "Mało!"; }
else { return "Może być"; }

Instrukcje sterujące



Instrukcja warunkowa

switch



switch (wyrażenie) {
case etykieta :
// ...instrukcje...
break;
case etykieta :
// ...instrukcje...
break;
...
default : // ...instrukcje...
}



switch(auto) {

"Audi" : document.write("Jest ok"); break;
"Volvo" : document.write("Jest very ok"); break;
default : document.write("Takich nie lubimy");

}

Instrukcje sterujące



Pętla

for



for ([wyrażeniepoczątkowe]; [warunek];
[wyrażenieInkrementacyjne]) {
...instrukcje...
}



for (var i=0; i<10; i++) {
document.write(i+"<br>");
}

Instrukcje sterujące



Pętla

do..while

do {
i+=1;
document.write(i);
} while (i<5);



Pętla while..do

while (true) do {
alert("He, he, he...");
}
while (koniec==false) {
...rób coś tam
}

Instrukcje sterujące



Instrukcja

break [etykieta]



Instrukcja

continue [etykieta]



i = 0;
while (i < 5) {
i++;
if (i == 3) continue;
document.write(i);
}

Instrukcje sterujące



Instrukcja

continue

c.d.



while (i<4) {
document.write(i + "<BR>");
i+=1;
checkj :
while (j>4) {
document.write(j + "<BR>");
j-=1;
if ((j%2)==0)
continue checkj;
document.write(j + " is odd.<BR>");
}
document.write("i = " + i + "<br>");
document.write("j = " + j + "<br>");
}

Przykład z dokumentacji do JavaScript

Instrukcje sterujące



Pętla

for..in

function test()
{
tablica = [ ,"Ala","Basia","Małgosia"];
delete tablica[2];
for (zm in tablica) {
alert(tablica[zm]);
}
obiekt = {x: "dwa", y: "siedem"};
for (zm in obiekt) {
alert(zm);
}
}

Instrukcje sterujące



Instrukcja

with



var a, x, y;;
var r=10
with (Math) {
a = PI * r * r;
x = r * cos(PI);
y = r * sin(PI/2);
}

Przykład z dokumentacji do JavaScript

Funkcje

Przykłady



function kwadrat(number) {
return number * number;
}



function map(f,a) {
var result=new Array;
for (var i = 0; i != a.length; i++)
result[i] = f(a[i]);
return result;
}
Wywołanie
map(function(x) {return x * x * x}, [0, 1, 2, 5,

10];
zwróci [0, 1, 8, 125, 1000].

Przykłady z dokumentacji do JavaScript

Funkcje



function factorial(n) {
if ((n == 0) || (n == 1))
return 1
else {
var result = (n * factorial(n-1) );
return result
}
}

Wywołania:
a=factorial(1) // a==1
b=factorial(2) // a==2
c=factorial(3) // a==6
d=factorial(4) // a==24
e=factorial(5) // a==120

Przykład z dokumentacji do JavaScript

Własności predefiniowane



Infinity

– stała reprezentująca nieskończoność



Infinity

jest większa od każdej liczby



-Infinity

jest mniejsza od każdej liczby



Infinity

zachowuje się operacjach

matematycznych podobnie do nieskończoności



var wartosc = Infinity;
alert(isFinite(wartosc));
alert(isFinite(23444));



NaN

– nie-liczba

Funkcje predefiniowane



eval(wyrażenie)

– oblicza wyrażenie lub

wykonuje instrukcje



nie stosujemy do wyrażeń arytmetycznych –

są obliczane automatycznie



można wykorzystać do odraczania obliczeń

eval("2+2")

eval(new String("3+5"))

var str = "if (x == 5)
{alert('z is 42'); z = 42;} else z = 0; "
document.write("z is ", eval(str))

Funkcje predefiniowane



isFinite(liczba)

– sprawdza, czy liczba jest

skończona



parseFloat(napis)

– sprawdza, czy napis jest

liczbą zmiennoprzecinkową i jeśli tak, to

zwraca tę liczbę.

parseFloat("3.14")
parseFloat("314e-2")
parseFloat("0.0314E+2")

Funkcje predefiniowane



parseInt(napis [,podstawa])

– sprawdza, czy

napis jest liczbą całkowitą i jeśli tak, to

zwraca tę liczbę.



jeżeli podstawa jest nieokreślona albo jest 0,

wtedy



jeśli napis zaczyna się od "0x" – podstawa 16



jeśli napis zaczyna się od "0" – podstawa 8



jeśli napis zaczyna się od czegoś innego – 10



jeżeli podstawa nie jest >=0, to zwracany jest
NaN

Funkcje predefiniowane



parseInt

– przykłady



Wszystkie poniższe zwrócą 15
parseInt("F", 16)
parseInt("17", 8)
parseInt("15", 10)
parseInt("15*3", 10)



A te zwrócą NaN

parseInt("Hello", 8)
parseInt("0x7", 10)
parseInt("FFF", 10)



A te zwrócą 17
parseInt("0x11", 16)
parseInt("0x11", 0)

Funkcje predefiniowane



isNaN(napis)

– sprawdza, czy napis jest

liczbą całkowitą lub zmiennoprzecinkową,

czyli napis przejdzie test przez funkcję

parseFloat lub parseInt



String(obiekt)

– zamienia obiekt na napis (robi

to samo co metoda toString)

D = new Date (430054663215)
alert (String(D))
Wyświetli się: "Thu Aug 18 04:37:43 GMT-0700
(Pacific Daylight Time) 1983."

Funkcje predefiniowane



Number(obiekt)

– konwertuje obiekt na liczbę

d = new Date ("December 17, 1995 03:24:00")
alert (Number(d))
Wyświetli się: "819199440000"



Boolean(wyrażenie)

– konwertuje wyrażenie

na true lub false

b = Boolean(true)

Obiekty i metody - Array



Tworzenie tablic:



konstruktor

Array

t = new Array()
t = new Array(10)
t = new Array("Zebra", "Ryjówka", "Tygrys")



literał

t = ["Zebra", "Ryjówka", "Tygrys"]

Obiekty i metody - Array



Właściwości



length

– ilość elementów w tablicy



Metody



concat(tab2, tab3, ... tabN)

– łączy dwie tablice w jedną

num1=[1,2,3]
num2=[4,5,6]
num3=[7,8,9]
numy=num1.concat(num2,num3)
// tworzy tablicę [1,2,3,4,5,6,7,8,9]

Obiekty i metody - Array



Metody



join(separator)

– wszystkie elementy tablicy są

łączone w jeden napis; elementy są
pooddzielane separatorem (domyślnie ",")

a = new Array("Jeden","Dwa","Trzy")
str1=a.join() // "Jeden,Dwa,Trzy"
str2=a.join(", ") // "Jeden, Dwa, Trzy"
str3=a.join(" + ") // "Jeden + Dwa + Trzy"

Obiekty i metody - Array



Metody



pop()

– usuwa i zwraca ostatni element tablicy

colours = ["red", "black", "white"];
kolorek = colours.pop(); // "white"



push(elem1,...,elemN)

– wstawia elementy na

koniec tablicy i zwraca nowy rozmiar

colours = ["red", "black"];
ile = colours.push("white"); // 3



reverse()

– odwraca kolejność elementów

a = new Array("Jeden","Dwa","Trzy")
a.reverse() // ["Trzy","Dwa","Jeden"]

Obiekty i metody - Array



Metody



shift()

– usuwa i zwraca pierwszy element

tablicy

colours = ["red", "black", "white"];
kolorek = colours.pop(); // "red"



slice(begin[,end])

– zwraca fragment tablicy

c1 = ["red", "black", "white"];
c2 = c1.slice(0,2); // ["red","black"]

Obiekty i metody - Array



Metody



splice(index, ile, [elem1][,...,elemN]

– usuwa

ile

elementów zaczynając od

index

i w ich

miejsce wstawia

elem1

do

elemN

c1 = ["red", "black", "white","blue"];
c2 = c1.splice(1,2,"green");
// c2 == ["red","green","blue"]

Obiekty i metody - Array



Metody



sort([funkcja_porównująca])

– sortuje tablice



jeśli funkcja_porównująca(a, b) zwraca <0, b<a



jeśli funkcja_porównująca(a, b) zwraca >0, a<b



jeśli funkcja_porównująca(a, b) zwraca =0, a=b

function cmp(a,b) {
if (a<b) return -1;
if (a>b) return 1;
return 0;
}
liczby = new Array(20,3,12,200)
liczby.sort(cmp) // [3,12,20,200]

Obiekty i metody - Array



Metody



toString()

– zamienia tablicę na napis

var mon = new Array("Jan","Feb","Mar","Apr")
str=mon.toString() // "Jan,Feb,Mar,Apr"



unshift(element1,..., elementN)

– wstawia

elementy na początek tablicy

colours = ["red", "black"];
ile = colours.unshift("white"); // 3

Obiekty i metody - Boolean



Konstruktor



Boolean(wartość)



Nie należy mylić literałów true i false z
obiektami

x = new Boolean(false);
if(x) // warunek jest prawdziwy

x = false;
if(x) // warunek jest fałszywy

Obiekty i metody - Boolean



Konstruktor – przykłady

bf1 = new Boolean(0)

//false

bf2 = new Boolean(false)

//false

bf3 = new Boolean(null)

//false

bt1 = new Boolean(true)

//true

bt2 = new Boolean("false")

//true

bt3 = new Boolean("Inny taki")

//true



Metody



toString()

– zwraca wartość przechowaną w

obiekcie

x = Boolean(true);
x.toString(); //wyświetli true

Obiekty i metody – Date



Konstruktor – tworzenie obiektu daty



new Date()
new Date(milliseconds)
new Date(dateString)
new Date(yr_num, mo_num, day_num
[, hr_num, min_num, sec_num, ms_num])



numer roku powinien być 4 cyfrowy



miesiące: 0=styczeń – 11=grudzień



dni tygodnia: 0=niedziela – 6=sobota



milisekundy podajemy od 1.1.1970, 00:00:00

Obiekty i metody – Date



Przykłady tworzenia daty:



dzisiaj = new Date()



data1 = new Date("May 23, 2004 10:11:12")



data2 = new Date(2004,4,23)



data3 = new Date(2004,4,23,10,11,12)

Obiekty i metody – Date



Metody pobierające czas lokalny



Date.getDate()

– zwraca dzień



Date.getMonth()

– zwraca miesiąc



Date.getYear()

– zwraca rok



Date.getFullYear()

– zwraca rok 4 cyfrowy



Date.getDay()

– zwraca dzień tygodnia



Date.getHours()

– zwraca godzinę



Date.getMinutes()

– zwraca minuty



Date.getSeconds()

– zwraca sekundy



Date.getMiliseconds()

– zwraca milisekundy

Obiekty i metody – Date



Metody pobierające czas względem UTC



Date.getUTCDate



Date.getUTCMonth



Date.getUTCFullYear



Date.getUTCDay



Date.getUTCHours



Date.getUTCMinutes



Date.getUTCSeconds



Date.getUTCMilliseconds

Obiekty i metody – Date



Metody



Date.getTime()

– zwraca ilość milisekund

od 1.1.1970 00:00:00



Date.parse(data)

– zwraca ilość milisekund

od 1.1.1970 00:00:00 (metoda statyczna)



Date.getTimezoneOffset()

– zwraca różnicę w

minutach pomiędzy czasem lokalnym a UTC

Obiekty i metody – Date



Przykłady:



d = new Date(04,02,20)
alert(d.getYear()) // 4
alert(d.getFullYear()) // 1904
alert(d.getMonth()) // 2



d = new Date(2004,07,14)
alert(d.getFullYear()) // 2004
alert(d.getYear()) // 104
alert(Date.parse(2004,07,14) // 1092434400000
alert(d.getTime()) // 1092434400000



d = new Date(104,02,20)
alert(d.getYear()) // -1796
alert(d.getFullYear()) // 104

Obiekty i metody – Date



Przykład

function napisz_date(data) {
var miesiace =['Stycznia', 'Lutego', 'Marca',
'Kwietnia', 'Maja', 'Czerwca', 'Lipca', 'Sierpnia',
'Września', 'Października', 'Listopada', 'Grudnia'];
var dni = ['Niedziela', 'Poniedziałek', 'Wtorek',
'Środa', 'Czwartek', 'Piątek', 'Sobota'];
s = dni[data.getDay()]+", "+data.getDate()+
" "+miesiace[data.getMonth()]+" "
+data.getFullYear()+", godz. "+data.getHours()+
":"+data.getMinutes()+":"+data.getSeconds();
alert(s);
}

Obiekty i metody – Date



Metody ustawiające czas



Date.setDate(dayValue)



data = new Date("June 20, 2000 16:02:01")



data.setDate(21)



Date.setMonth(monthValue[, dayValue])



d = new Date(2004,07,14)



d.setMonth(4,12)



alert(d.getMonth()+" "+d.getDate()) // 4 12



Date.setYear(yearValue)



d.setYear(2000)



alert(d.getFullYear()) // 2000

Obiekty i metody – Date



Metody ustawiające czas



Date.setFullYear(yearValue[, monthValue[,

dayValue]])



d = new Date(2000,4,20)



d.setFullYear(2004,2,22) // d == 22 marzec 2004



Date.setTime(timevalue)



d = new Date("July 1, 1999")



d2 = new Date()



d2.setTime(d.getTime())



Date.setSeconds(secondsValue[, msValue])



d = new Date(2000, 4, 20, 16, 20, 20)



d.setSeconds(45) // 16:20:45



d.setSeconds(65) // 16:21:05

Obiekty i metody – Date



Metody ustawiające czas



Date.setHours(hoursValue[, minutesValue[,

secondsValue[, msValue]]])



Date.setMinutes(minutesValue[,

secondsValue[, msValue]])



Date.setMilliseconds(millisecondsValue)

Obiekty i metody – Date



Metody ustawiające czas względem UTC



setUTCDate(dayValue)



setUTCFullYear(yearValue[, monthValue[,

dayValue]])



setUTCHours(hoursValue[, minutesValue[,

secondsValue[, msValue]]])



setUTCMilliseconds(millisecondsValue)



setUTCMinutes(minutesValue[,

secondsValue[, msValue]])



setUTCMonth(monthValue[, dayValue])



setUTCSeconds(secondsValue[, msValue])

Obiekty i metody – Date



Metody zamieniające datę na napis



Date.toGMTString(), Date.toUTCString()

–

zwraca datę w odniesieniu do i formacie GMT



d = new Date(2000, 4, 20, 12, 20, 20);



alert(d.toUTCString())
// Mon, 01 May 2000 10:20:20 GMT



Date.toLocaleString()

– zwraca datę i czas

lokalną w formacie lokalnym



alert(d.toLocaleString())



// 2000-05-01 12:20:20

Obiekty i metody – Date



Metody zamieniające datę na napis



Date.toLocaleDateString()

– zwraca lokalną

datę w formacie lokalnym



alert(d.toLocaleDateString())



// 2000-05-01



Date.toString()

– zamienia na napis



alert(d.toString())



// Mon, 01 May 2000 12:20:20 GMT+0200

Obiekty i metody – Date



Metody zamieniające datę na napis



Date.UTC(year, month[, day[, hrs[, min[, sec[,

ms]]]]]) – tworzy datę UTC (statyczna)



localeDate = new Date(2000, 4, 1, 12, 20, 20);



gmtDate =
new Date(Date.UTC(2000, 4, 1, 12, 20, 20));



alert(localeDate.toLocaleString());
// 2000-05-01 12:20:20



alert(gmtDate.toUTCString());
// Mon, 01 May 2000 12:20:20 GMT

Obiekty i metody – Math



Stałe



E

– stała Eulera, liczba e, podstawa log naturalnego

ok. 2.718



LN2

– logarytm naturalny z 2, ok. 0.693



LN10

– logarytm naturalny z 10, ok. 2.302



LOG2E

– logarytm dwójkowy z E ok. 1.442



LOG10E

– logarytm dziesiętny z E ok. 0.434



PI

– liczba pi, ok. 3.14159



SQRT1_2

– pierwiastek kwadratowy z ½; to samo co 1

przez pierwiastek kwadratowy z 2, ok. 0.707



SQRT2

- pierwiastek kwadratowy z 2, ok. 1.414

Obiekty i metody – Math



Wybrane metody



abs(x)

– wartość bezwzględna z x



acos(x)

– arcus cosinus z x



asin(x)

– arcus sinus z x



atan(x)

– arcus tangens z x



cos(x)

– cosinus z x



exp(x)

– Math.E do potęgi x



ceil(x)

– sufit z x, czyli najmniejsza liczba

większa lub równa x



floor(x)

– podłoga z x, czyli najmniejsza liczba

mniejsza lub równa z x

Obiekty i metody – Math



Wybrane metody c.d.



log(x)

– logarytm naturalny z x



max(x,y)

– większa z x i y



min(x,y)

– mniejsza z x i y



pow(x,y)

– x do potęgi y



random()

– losuje liczbę pomiędzy 0 a 1



round(x)

– zaokrąglenie x



sin(x)

– sinus z x



sqrt(x)

– pierwiastek kwadratowy z x



tan(x)

– tangens z x

Obiekty i metody – Math



Przykład



Math.ceil(4.2)



Math.round(4.2)



Math.floor(4.2)



Math.pow(2,10)



function losuj(x)
{
alert(Math.round(Math.random()*(x-1)));
}

Obiekty i metody – String



Własności



String.length – długość napisu



Metody



String.charAt(index) – zwraca znak na pozycji

index, numeracja od 0

var napis = "Taki sobie napis"
alert(napis.charAt(2)) // k



String.charCodeAt(index) – zwraca kod znaku

na pozycji index, numeracja od 0

"ABC".charCodeAt(0) // 65

Obiekty i metody – String



Metody



String.concat(s1, s2, ..., sN)

– dokleja do

stringa s1, s2, ..., sN

"Ala ma".concat(" kota") // Ala ma kota



String.fromCharCode(k1, k2, ...,kN)

– zwraca

napis złożony ze znaków o kodach kolejno k1,
k2, ..., kN

String.fromCharCode(65,66,67) // "ABC"

Obiekty i metody – String



Metody



indexOf(szukany[, od])

– szuka w Stringu pozycję

pierwszego wystąpienia; jeśli podane od, to szuka

od pozycji od

"Zielona zasłona".indexOf("Zmielona") // -1
"Zielona zasłona".indexOf("ona") // 4
"Zielona zasłona".indexOf("ona", 6) // 12
"Zielona zasłona".indexOf("zielo") // -1

count = 0;
pos = str.indexOf("x");
while ( pos != -1 ) {
count++;
pos = str.indexOf("x",pos+1);
}

Obiekty i metody – String



Metody



String.lastIndexOf(searchValue[, fromIndex])

-

szuka w Stringu pozycję ostatniego
wystąpienia; jeśli podane od, to szuka od

pozycji od

"canal".lastIndexOf("a") // 3
"canal".lastIndexOf("a",2) // 1
"canal".lastIndexOf("a",0) // -1
"canal".lastIndexOf("x") // -1

Obiekty i metody – String



Metody



String.slice(beginSlice[, endSlice])

– pobiera i

zwraca kawałek napisu



jeśli endSlice jest >0 to pobierane są znaki o

indeksach od beginSlice do endSlice-1



jeśli endSlice jest <0 to oznacza ile znaków od

końca nie będzie pobieranych; pobieranie

zaczynamy do pozycji beginSlice

alert("Spasiony koteczek".slice(0,8)); //
Spasiony
alert("Spasiony koteczek".slice(9,-5)); // kot

Obiekty i metody – String



Metody



String.split([separator][, limit])

– dzieli napis

względem separator i zwraca tablicę o
rozmiarze co najwyżej limit; jeśli nie

zdefiniujemy separatora, to zwracana jest
tablica o jednym elemencie zawierającym cały

napis

"1-2-3-4-5-6-7-8-9".split("-",5)
// ['1','2','3','4','5']
alert("Ala&nbsp;ma&nbsp;kota".split("&nbsp;"));
// ['Ala','ma','kota']

Obiekty i metody – String



Metody



String.substr(start[, długość])

– zwraca napis

długość znaków pobrany od pozycji start

str = "abcdefghij";
str.substr(3,3) // def
str.substr(-3,3) // abc



String.substring(indexA, indexB)

– zwraca napis

zawarty pomiędzy indeksami indexA i indexB

napis = "Netscape"
napis.substring(0,3) // "Net"
napis.substring(3,0) // "Net"
napis.substring(7,4) // "cap"
napis.substring(-1,10) // "Netscape"

Obiekty i metody – String



Metody



toLowerCase()

– zamienia wszystkie znaki na

małe litery

var upperText="ALFABET"
upperText.toLowerCase() // alfabet



toUpperCase()

– zamienia wszystkie znaki na

wielkie litery

var lowerText="alfabet"
lowerText.toUpperCase() // ALFABET

Obiekty i metody – String



Metody związane z HTMLem



String.big()

– dodaje znacznik BIG

"Wielki".big() // <BIG>Wielki</BIG>



String.small()

– dodaje znacznik SMALL

"Mały".small() // <SMALL>Mały</SMALL>



String.bold()

– dodaje znacznik B

"Gruby".bold() // <B>Gruby</B>



String.italics()

– dodaje znacznik I

"Pochyły".italics() // <I>Pochyły</I>



String.fixed()

– dodaje znacznik TT

"Mono".fixed() // <TT>Mono</TT>

Obiekty i metody – String



Metody związane z HTMLem



String.strike()

– dodaje znacznik STRIKE

"Skreślony".strike() //
<STRIKE>Skreślony</STRIKE>



String.sub()

– dodaje znacznik SUB

"Na dół".sub() // <SUB>Na dół</SUB>



String.sup()

– dodaje znacznik SUP

"Do góry".sup() // <SUP>Do góry</SUP>

Obiekty i metody – String



Metody związane z HTMLem



String.fontcolor(kolor)

– dodaje znacznik

FONT z atrybutem color=kolor

"Czerwony".fontcolor("red")
// <FONT COLOR="red">Czerwony</FONT>



String.fontsize(rozmiar)

– dodaje znacznik

FONT z atrybutem size=rozmiar

"Rozmiarek".fontsize(4)
// <FONT SIZE="4">Rozmiarek</FONT>

Obiekty i metody – String



Metody związane z HTMLem



String.anchor(nameAtt)

– dodaje znacznik A z

atrybutem name=nameAtt

"Zakładka".anchor("ciekawe")
// <A NAME="ciekawe">Zakładka</A>



String.link(hrefAtt)

– dodaje znacznik A z

atrybutem href=hrefAtt

"Polityka".link("http://polityka.onet.pl/")
// <A
HREF="http://polityka.onet.pl/">Polityka</A>

Obiekty i metody – RegExp



Literał



re = /wzorzec/flagi



re = /ab+c/i



Konstruktor



re = new RegExp("wzorzec"[, "flagi"])



re = new RegExp("\\w+")



re = /\w+/

Obiekty i metody – RegExp



Właściwości



global

– czy wyszukiwanie jest do pierwszego

wystąpienia, czy wyszukiwane są wszystkie

dopasowania; flaga g



ignoreCase

– nie ma różnicy między wielkimi i

małymi literami; flaga i



multiline

– rozpatruje każdy wiersz osobno;

flaga m



lastIndex

– miejsce od którego będzie kolejne

wyszukiwanie; ma sens z opcją global



source

– napis reprezentujący wzorzec

Obiekty i metody – RegExp



Metody



exec(napis)

– sprawdza, czy napis

dopasowuje się do wzorca i zwraca tablicę



test(napis)

– to samo co exec, tylko zwraca

true lub false

Obiekty i metody – RegExp



Tworzenie wyrażeń regularnych



\

– nadaje stojącemu za nim znakowi

specjalne znaczenie



^

- początek wejścia



$

- koniec wejścia



*

- element poprzedzający musi powtórzyć się

0 lub więcej razy



+

- element poprzedzający musi powtórzyć się

1 lub więcej razy

Obiekty i metody – RegExp



Tworzenie wyrażeń regularnych



?

- element poprzedzający musi powtórzyć się

0 lub 1 raz



(x)

– dodatkowy wzorzec do zapamiętania



x(?=y)

– dopasuje się do x, pod warunkiem,

że po x jest y



x(?!y)

– dopasuje się do x, pod warunkiem,

że po x nie ma y



x|y

– x lub y

Obiekty i metody – RegExp



Tworzenie wyrażeń regularnych



{n}

– dopasuje się do dokładnie n wystąpień

poprzedzającego elementu



{n,}

– poprzedzający element musi wystąpić

co najmniej n razy



{n,m}

– poprzedzający element musi

wystąpić co najmniej n i co najwyżej m razy



[xyz]

– określa zbiór, dopasuje się do jednej

z liter w nawiasach



[^xyz]

– określa dopełnienie zbióru,

dopasuje się do czegokolwiek co nie jest w

nawiasach

Obiekty i metody – RegExp



Tworzenie wyrażeń regularnych



\d

– dopasuje się do cyfry ([0-9])



\D

– dopasuje się do czegoś co nie jest cyfrą



\s

– dopasuje się do pojedynczego odstępu,

równoważne [ \f\n\r\t\u00A0\u2028\u2029]



\S

– dopasuje się do czegoś do nie jest

pojedynczym odstępem



\t

– tabulator



\n

– nowy wiersz

Obiekty i metody – RegExp



Tworzenie wyrażeń regularnych



\w

– znak alfanumeryczny ([A-Za-z0-9_])



\W

– dopełnienie \w



\xhh, \uhhhh

– kody znaków

Obiekty i metody – RegExp



Przykłady



re = new RegExp("ala+","ig");
re.exec("ala ma kota ala")
re.lastIndex
re.exec("ala ma kota ala")
re.lastIndex



/a{5}/ig.exec("aaaaaaaa")



/a{5,10}/ig.exec("aaaaaaaa")

Obiekty i metody – RegExp



Przykłady



re = /ab*/ig;
t = re.exec("abbadona");
alert(t);



/^Kasia/.exec("Ala\nKasia")



/^Kasia/m.exec("Ala\nKasia")

Obiekty i metody – RegExp



Przykłady



<SCRIPT LANGUAGE="JavaScript1.2">
//Match one d followed by one or more

//b's followed by one d
//Remember matched b's and the

//following d
//Ignore case
myRe=/d(b+)(d)/ig;
myArray = myRe.exec("cdbBdbsbz");
</SCRIPT>
// ["dbBd", "bB", "d"]

DOM – Document Object Model



DOM

– jest to platforma, niezależna od

języka pozwalająca programom i skryptom na

dynamiczną modyfikację zawartości okna.



Obiekty przeglądarki



Zdarzenia

Obiekt Window



Podstawowe własności



name

– nazwa okna



defaultStatus

– domyślny tekst pasku stanu

przeglądarki



status

– tekst pasku stanu przeglądarki



closed

– wartość logiczna, czy okno zostało

zamknięte

Obiekt Window



Podstawowe własności



parent

– okno będące bezpośrednim

przodkiem (np. ramka zawierająca inną ramkę)



self, window

– odwołanie do siebie samego



top

– okno najwyższego poziomu w strukturze

(np. ramka zawierająca wszystkie inne ramki)



opener

– referencja do obiektu Window, który

utworzył okno lub null, jeśli okno utworzył

użytkownik

Obiekt Window



Podstawowe własności



document

– referencja do obiektu Document



frames[ ]

– tablica obiektów Window, które

reprezentują ramki



history

– referencja do obiektu History



location

– referencja do obiektu Location

reprezentującego adres URL dokumentu, jego
zmiana powoduje załadowanie nowego

dokumentu

Obiekt Window



Podstawowe własności



navigator

– odwołuje się do obiektu navigator



appName – prosta nazwa przeglądarki



appVersion – wewnętrzny numer wersji

przeglądarki



userAgent – zawartość nagłówka HTTP User-

Agent



appCodeName – nazwa kodowa przeglądarki



platform – platforma sprzętowa na której działa

przeglądarka

Obiekt Window



Podstawowe metody



alert(komunikat)

– wyświetla proste okno z

komunikatem



confirm(komunikat)

– wyświetla okno z dwoma

przyciskami: Ok i Anuluj



prompt(komunikat, domyślna_wartość)

–

wyświetla okno w celu pobrania napisu



focus(), blur()

– aktywuje, dezaktywuje

klawiaturę w oknie

Obiekt Window



Podstawowe metody



open("okno.html","nazwa","opcje")

– otwiera nowe okno



width=300



height=300



status=no



location=no



menubar=no



resizable=no



scrollbars=no



titlebar=no



toolbar=yes

Obiekt Window



close()

– zamyka okno



print()

– drukuje, to samo co po wciśnięciu

przycisku drukuj w przeglądarce



moveBy(x,y)

– przesuwa okno o x, y



moveTo(x,y)

– przesuwa okno do x, y



resizeBy(x,y)

– zmienia rozmiar o x,y



resizeTo(x,y)

– zmienia rozmiar do x, y



scrollBy(x,y)

– przesuwa dokument w oknie o

x,y



scrollTo(x,y)

– przesuwa dokument w oknie do

x,y

Obiekt Window



setTimeout(wyrażenie/funkcja, milisekundy)

–

odracza wykonanie funkcji



clearTimeout(TimeoutID)

– anuluje odroczenie

i funkcja nie będzie wykonana



setInterval(wyrażenie/funkcja, milisekundy)

–

wykonuje wyrażenie co określoną liczbę
milisekund



clearInterval(TimeoutID)

– przerywa

wykonywanie funkcji

Obiekt Window



Przykłady:



informacje o przeglądarce



tworzenie i zamykanie okienka



okienka dialogowe



zmiana pozycji



zmiany rozmiaru



przesuwanie zawartości



setInterval, setTimeout

Obiekt Window



Zdarzenia



onBlur



onDragDrop



onError



onFocus



onLoad



onMove



onResize



onUnload

Obiekt Location



Właściwości



href

– cały adres URL



protocol

– nazwa protokołu



host

– nazwa hosta i port



hostname

– nazwa hosta



port

– numer portu



search

– zapytanie do zasobu



pathname

– adres zasobu



hash

– identyfikator zakładki (razem z #)

Obiekt Location



Metody



reload([true])

– odświeża zawartość okienka,

dodatkowo można wymusić GET
bezwarunkowy



replace(URL)

– wymienia adres okna na ten

podany jako argument, nie działa przycisk

wstecz przeglądarki

Obiekt Location



Przykład



function adres()
{
var ad = prompt("Podaj nowy adres:");
window.location.replace(ad);
}



function zmien()
{
window.location.href="http://www.onet.pl/";
}

Obiekt History



Właściwości



length

– ilość elementów w historii



current

– bieżący adres URL



previous

– poprzedni adres w historii



next

– następny adres w historii



Metody



back()

– o jeden w tył (wstecz)



forward()

– o jeden do przodu (naprzód)



go(liczba)

– względne wybranie pozycji w

historii

Zależności między oknami



Odwołanie frames[i]



Przykłady



parent.frames[0].i

– odwołanie do zmiennej i w

w oknie pierwszej ramki



parent.menu.podswietl(5)

– wywołanie funkcji

podswietl w sąsiedniej ramce menu



var x = parent.banner.x

– przypisanie do

zmiennej lokalnej

Zależności między oknami



Przykładowy



ramki.html

Obiekt Document



Właściwości



alinkColor, linkColor, vlinkColor

– kolory

hiperłączy, odpowiedniki alink, link, vlink w
body



anchors[ ]

– tablica zakładek w dokumencie



bgColor, fgColor

– kolory tła i tekstu,

odpowiedniki bgcolor i text w body



cookie

– do obsługi cookies



forms[ ]

– tablica obiektów Form

reprezentujących elementy <form> dokumentu

Obiekt Document



Właściwości c.d.



images[ ]

– tablica obiektów Image

reprezentujących elementy <img> dokumentu



lastModified

– data modyfikacji dokumentu



links[ ]

– tablica obiektów Link

reprezentujących łącza hipertekstowe



title

– tekst zawarty w znacznikach

<title></title>

Obiekt Document



Metody



open()

– otwiera nowy dokument usuwając

zawartość



close()

– zamyka, kończy dokument



write(s1,..., sn)

– dodaje tekst do dokumentu



writeln(s1,..., sn)

– dodaje tekst do dokumentu

i znak nowego wiersza

Obiekt Document



Zdarzenia



onClick



onDblClick



onKeyDown



onKeyPress



onKeyUp



onMouseDown



onMouseUp

Obiekt Document



Przykładowy plik HTML



document.html

Obiekt Image



Lista obrazków w dokumencie – tablica

document.images[ ]



Tworzenie



new Image([szer, [wysokość] ])



im = new Image()



im.src = 'konewka.gif'

Obiekt Image



Właściwości



border

– integer, wielkość obramowania



complete

– bool, sprawdza, czy obrazek jest

już załadowany (tyko do odczytu)



height, width

– wysokość, szerokość obrazka



hspace, vspace

– margines poziomy, pionowy



name

– nazwa obrazka



src

– źródło obrazka



lowsrc

– źródło obrazka przy urządzeniu o

niskiej rozdzielczości

Obiekt Image



Przykład



obrazki.html

Obiekt Link, Anchor



Lista linków w dokumencie



document.links[ ]



documents.anchors[ ]

Obiekt Link



Właściwości



href



protocol



host



port



hostname



pathname



search



taget



text

Formularze – obiekt Form



Właściwości



action=URL



elements[ ]



encoding



length



method



name

Formularze – obiekt Form



Metody



reset()



submit()



Zdarzenia



onReset



onSubmit

Formularze – obiekt Button



Właściwości



form – odwołanie do formularza, który przycisk

zawiera



name – nazwa przycisku



type – związany z atrybutem type (w tym
przypadku wartość "button")



value – wartość

Formularze – obiekt Button



Metody



focus()



blur()



click()



Zdarzenia



onFocus



onBlur



onClick



onMouseDown



onMouseUp

Formularze – obiekt CheckBox



Właściwości



checked



defaultChecked



form



name



type



value

Formularze – obiekt CheckBox



Metody



focus()



blur()



click()



Zdarzenia



onFocus



onBlur



onClick

Formularze – obiekt Radio



Właściwości



checked



defaultChecked



form



name



type



value

Formularze – obiekt Radio



Metody



blur()



focus()



click()



Zdarzenia



onBlur



onFocus



onClick

Formularze – obiekt Text



Właściwości



defaultValue



form



name



type



value

Formularze – obiekt Text



Metody



blur()



focus()



select()



Zdarzenia



onBlur



onChange



onFocus



onSelect

Formularze – obiekt Textarea



Właściwości



defaultValue



form



name



type



value



Metody



blur()



focus()



select()

Formularze – obiekt Textarea



Zdarzenia



onBlur



onFocus



onChange



onKeyDown



onKeyUp



onKeyPress



onSelect

Formularze – obiekt Hidden



Właściwości



form



name



type



value

Formularze – obiekt Select



Właściwości



form



length



name



options[ ]



selectedIndex



type (select-one | select-multiple)

Formularze – obiekt Select



Metody



blur()



focus()



Zdarzenia



onBlur



onFocus



onChange

Formularze – obiekt Option



Tworzenie



new Option([text[, value[, defaultSelected[,

selected]]]])



Właściwości



defaultSelected



selected



text



value

Obiekt Event



Związany z pojawieniem się zdarzenia



Jego własności zależą od przeglądarki



Właściwości



screenX, screenY – pozycja kursora względem
ekranu



x,y – współrzędne względem dokumentu (IE)



layerX, layerY – j.w. (Mozilla)



type (click, keydown, itp)



altKey, shiftKey, ctrlKey

Obiekt Event



Właściwości



which – przycisk (1 - lewy,2 - środek,3 -

prawy)



keyCode – kod znaku z klawiatury (IE)



srcElement – element dokumentu w którym
nastąpiło zdarzenie (IE)



target – element dokumentu w którym
nastąpiło zdarzenie (Mozilla)

Zdarzenia



onblur – utrata fokusu



onchange – zmiana zawartości elementu



onclick – kliknięcie



ondblclick – podwójne kliknięcie



onfocus – przy ustawieniu fokusu



onkeydown – przy wciśnięciu klawisza



onkeyup – przy zwolnieniu klawisza



onkeypress – przy naciśnieciu klawisza

Zdarzenia



onmousedown – przy wciśnięciu przycisku

myszy



onmouseup – przy zwolnieniu przycisku

myszy



onmousemove – przy przesuwaniu wskaźnika

myszy



onmouseover – przy najechaniu wskaźnikiem

myszy



onmouseout – przy zjechaniu wskaźnikiem

myszy

Zdarzenia



onload – przy załadowaniu dokumentu



onunload – przy zamykaniu dokumentu



onreset – przy zerowaniu formularza



onsubmit – przy wysyłaniu danych formularza



onresize – przy zmianie rozmiaru



onselect – przy zaznaczeniu tekstu

Zdarzenia



Funkcje do obsługi zdarzeń tworzymy

następująco:



IE:

document.onclick = obsluz_klik;
function obsluz_klik() { ... }



Mozilla

document.onclick = obsluz_klik;
function obsluz_klik(event) { ... }

Zdarzenia



Przykład



coords.html



cyfry.html

Kompatybilność



Sprawdzamy, czy jest tablica images[ ]

if (document.images) {
// kod obsługi wymiany obrazków
}



Sprawdzamy dostęp do warstw

if (document.getElementById) { ...DOM W3C... }
if (document.all) { ...IE... }
if (document.layers) { ...Mozilla... }

DHTML



Atrybut style



Przykład



dynamic.html



pozycjonowanie.html