Kurs WWW – wykład 5 Paweł Rajba

Prezentacja na temat: "Kurs WWW – wykład 5 Paweł Rajba"— Zapis prezentacji:

1 Kurs WWW – wykład 5 Paweł Rajba pawel@ii.uni.wroc.pl http://www.ii.uni.wroc.pl/~pawel/

2 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"]

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

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

5 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"]

6 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"]

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

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

9 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

10 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

11 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

12 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

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

14 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

15 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

16 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

17 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

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

19 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

20 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

21 Obiekty i metody – Date Metody ustawiające czas Date.setHours(hoursValue[, minutesValue[, secondsValue[, msValue]]]) Date.setMinutes(minutesValue[, secondsValue[, msValue]]) Date.setMilliseconds(millisecondsValue)

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

23 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

24 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

25 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

26 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

27 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

28 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

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

30 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

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

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

33 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

34 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

35 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 ma kota".split(" ")); // ['Ala','ma','kota']

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

37 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

38 Obiekty i metody – String Metody związane z HTMLem String.big() – dodaje znacznik BIG "Wielki".big() // Wielki 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() // Mono

39 Obiekty i metody – String Metody związane z HTMLem String.strike() – dodaje znacznik STRIKE "Skreślony".strike() // Skreślony String.sub() – dodaje znacznik SUB "Na dół".sub() // Na dół String.sup() – dodaje znacznik SUP "Do góry".sup() // Do góry

40 Obiekty i metody – String 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

41 Obiekty i metody – String Metody związane z HTMLem String.anchor(nameAtt) – dodaje znacznik A z atrybutem name=nameAtt "Zakładka".anchor("ciekawe") // Zakładka String.link(hrefAtt) – dodaje znacznik A z atrybutem href=hrefAtt "Polityka".link("http://polityka.onet.pl/") // Polityka

42 Obiekty i metody – RegExp Literał re = /wzorzec/flagi re = /ab+c/i Konstruktor re = new RegExp("wzorzec"[, "flagi"]) re = new RegExp("\\w+") re = /\w+/

43 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

44 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

45 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

46 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

47 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

48 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

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

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

51 Obiekty i metody – RegExp Przykłady re = /ab*/ig; t = re.exec("abbadona"); alert(t); /^Kasia/.exec("Ala\nKasia") /^Kasia/m.exec("Ala\nKasia")

52 Obiekty i metody – RegExp Przykłady //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"); // ["dbBd", "bB", "d"]

53 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

54 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

55 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

56 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

57 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

58 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

59 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

60 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

61 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

62 Obiekt Window Przykłady: informacje o przeglądarce tworzenie i zamykanie okienka okienka dialogowe zmiana pozycji zmiany rozmiaru przesuwanie zawartości setInterval, setTimeout