new Date()

Kurs WWW – wykład 5
Paweł Rajba
[email protected]
http://www.ii.uni.wroc.pl/~pawel/
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
bf2
bf3
bt1
bt2
bt3
=
=
=
=
=
=
new
new
new
new
new
new
Boolean(0)
Boolean(false)
Boolean(null)
Boolean(true)
Boolean("false")
Boolean("Inny taki")
//false
//false
//false
//true
//true
//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]])



Date.setTime(timevalue)




d = new Date(2000,4,20)
d.setFullYear(2004,2,22) // d == 22 marzec 2004
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
"Zielona
"Zielona
"Zielona
zasłona".indexOf("Zmielona") // -1
zasłona".indexOf("ona") // 4
zasłona".indexOf("ona", 6) // 12
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 UserAgent
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