1 / 62

Kurs WWW – wykład 5

Kurs WWW – wykład 5. Paweł Rajba pawel@ii.uni.wroc.pl 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"].

tessa
Download Presentation

Kurs WWW – wykład 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 = newArray("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("May23, 200410: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&nbsp;ma&nbsp;kota".split("&nbsp;")); // ['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() // <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>

  39. 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>

  40. 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>

  41. 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>

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

More Related