Kurs WWW – wykład 5

Kurs WWW – wykład 5

Paweł Rajba

[email protected]

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

Obiekty i metody - Array

Tworzenie tablic: konstruktor Arrayt = new Array()

t = new Array(10)

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

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


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]


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"


Metody pop() – usuwa i zwraca ostatni element tablicycolours = ["red", "black", "white"];kolorek = colours.pop(); // "white"

push(elem1,...,elemN) – wstawia elementy na koniec tablicy i zwraca nowy rozmiarcolours = ["red", "black"];ile = colours.push("white"); // 3

reverse() – odwraca kolejność elementówa = new Array("Jeden","Dwa","Trzy")a.reverse() // ["Trzy","Dwa","Jeden"]


Metody shift() – usuwa i zwraca pierwszy element

tablicycolours = ["red", "black", "white"];

kolorek = colours.pop(); // "red"

slice(begin[,end]) – zwraca fragment tablicyc1 = ["red", "black", "white"];

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


Metody splice(index, ile, [elem1][,...,elemN] – usuwa

ile elementów zaczynając od index i w ich miejsce wstawia elem1 do elemNc1 = ["red", "black", "white","blue"];

c2 = c1.splice(1,2,"green");

// c2 == ["red","green","blue"]


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, ab) return 1; return 0;}liczby = new Array(20,3,12,200)liczby.sort(cmp) // [3,12,20,200]


Metody toString() – zamienia tablicę na napisvar mon = new Array("Jan","Feb","Mar","Apr")

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

unshift(element1,..., elementN) – wstawia elementy na początek tablicycolours = ["red", "black"];

ile = colours.unshift("white"); // 3

Obiekty i metody - Boolean

Konstruktor Boolean(wartość) Nie należy mylić literałów true i false z

obiektamix = new Boolean(false);

if(x) // warunek jest prawdziwy

x = false;

if(x) // warunek jest fałszywy

Obiekty i metody - Boolean

Konstruktor – przykładybf1 = new Boolean(0) //falsebf2 = new Boolean(false) //falsebf3 = new Boolean(null) //falsebt1 = new Boolean(true) //truebt2 = new Boolean("false") //truebt3 = new Boolean("Inny taki") //true

Metody toString() – zwraca wartość przechowaną w

obiekciex = 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


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)


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


Metody pobierające czas względem UTC Date.getUTCDate Date.getUTCMonth Date.getUTCFullYear Date.getUTCDay Date.getUTCHours Date.getUTCMinutes Date.getUTCSeconds Date.getUTCMilliseconds


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


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

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

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


Przykładfunction 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);

}


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


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


Metody ustawiające czas Date.setHours(hoursValue[, minutesValue[,

secondsValue[, msValue]]]) Date.setMinutes(minutesValue[,

secondsValue[, msValue]]) Date.setMilliseconds(millisecondsValue)


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])


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


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


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


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


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


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 0var 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


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, ..., kNString.fromCharCode(65,66,67) // "ABC"


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);}


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


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


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 ma kota".split(" "));

// ['Ala','ma','kota']


Metody String.substr(start[, długość]) – zwraca napis

długość znaków pobrany od pozycji startstr = "abcdefghij";

str.substr(3,3) // def

str.substr(-3,3) // abc

String.substring(indexA, indexB) – zwraca napis zawarty pomiędzy indeksami indexA i indexBnapis = "Netscape"

napis.substring(0,3) // "Net"

napis.substring(3,0) // "Net"

napis.substring(7,4) // "cap"

napis.substring(-1,10) // "Netscape"


Metody toLowerCase() – zamienia wszystkie znaki na

małe literyvar upperText="ALFABET"

upperText.toLowerCase() // alfabet

toUpperCase() – zamienia wszystkie znaki na wielkie literyvar lowerText="alfabet"

lowerText.toUpperCase() // ALFABET


Metody związane z HTMLem String.big() – dodaje znacznik BIG

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

String.small() – dodaje znacznik SMALL"Mały".small() // Mały

String.bold() – dodaje znacznik B"Gruby".bold() // Gruby

String.italics() – dodaje znacznik I"Pochyły".italics() // Pochyły

String.fixed() – dodaje znacznik TT"Mono".fixed() // <TT>Mono</TT>


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() // Na dół

String.sup() – dodaje znacznik SUP"Do góry".sup() // Do góry


Metody związane z HTMLem String.fontcolor(kolor) – dodaje znacznik

FONT z atrybutem color=kolor"Czerwony".fontcolor("red")

// Czerwony

String.fontsize(rozmiar) – dodaje znacznik FONT z atrybutem size=rozmiar"Rozmiarek".fontsize(4)

// Rozmiarek


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+/


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


Metody exec(napis) – sprawdza, czy napis

dopasowuje się do wzorca i zwraca tablicę test(napis) – to samo co exec, tylko zwraca

true lub false


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


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


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


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


Tworzenie wyrażeń regularnych \w – znak alfanumeryczny ([A-Za-z0-9_]) \W – dopełnienie \w \xhh, \uhhhh – kody znaków


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")


Przykłady re = /ab*/ig;

t = re.exec("abbadona");

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


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 casemyRe=/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

Documents

Kurs WWW – wykład 5