Narzędzia internetowe Paweł Rajba ttp://pawel.ii.uni.wroc.pl/

Prezentacja na temat: "Narzędzia internetowe Paweł Rajba ttp://pawel.ii.uni.wroc.pl/"— Zapis prezentacji:

1 Narzędzia internetowe Paweł Rajba awel@ii.uni.wroc.pl ttp://pawel.ii.uni.wroc.pl/

2 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,...

3 JavaScipt i ECMAScript Organizacja ECMA - European Computer Manufacturers Association ttp://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

4 Osadzanie JavaScript Węwnątrz dokumentu HTML <!–...tutaj umieszczamy skrypt... //--> Dołączenie zewnętrznego pliku Wewnątrz znaczników: Tu klikać

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

6 Komentarze // komentarz jednowierszowy /* komentarz blokowy */

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

8 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

9 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

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

11 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

12 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";

13 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

14 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;

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

16 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 Tu klikać i nic się nie stanie

17 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ć"; }

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

19 Instrukcje sterujące Pętla for for ([wyrażeniepoczątkowe]; [warunek]; [wyrażenieInkrementacyjne]) {...instrukcje... } for (var i=0; i<10; i++) { document.write(i+" "); }

20 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 }

21 Instrukcje sterujące Instrukcja break [etykieta] Instrukcja continue [etykieta] i = 0; while (i < 5) { i++; if (i == 3) continue; document.write(i); }

22 Instrukcje sterujące Instrukcja continue c.d. while (i<4) { document.write(i + " "); i+=1; checkj : while (j>4) { document.write(j + " "); j-=1; if ((j%2)==0) continue checkj; document.write(j + " is odd. "); } document.write("i = " + i + " "); document.write("j = " + j + " "); } Przykład z dokumentacji do JavaScript

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

24 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

25 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

26 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

27 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

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

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

30 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

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

32 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."

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

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

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

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

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

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

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

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

41 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

42 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

43 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

44 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

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

46 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

47 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

48 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

49 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

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

51 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

52 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

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

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

55 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

56 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

57 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

58 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

59 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

60 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

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

62 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

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

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

65 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

66 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

67 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']

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

69 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

70 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

71 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

72 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

73 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

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

75 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

76 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

77 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

78 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

79 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

80 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

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

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

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

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

85 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

86 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

87 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

88 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

89 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

90 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

91 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

92 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

93 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

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

95 Obiekt Window Zdarzenia onBlur onDragDrop onError onFocus onLoad onMove onResize onUnload

96 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 #)

97 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

98 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/"; }

99 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

100 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

101 Zależności między oknami Przykładowy ramki.html

102 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 dokumentu

103 Obiekt Document Właściwości c.d. images[ ] – tablica obiektów Image reprezentujących elementy dokumentu lastModified – data modyfikacji dokumentu links[ ] – tablica obiektów Link reprezentujących łącza hipertekstowe title – tekst zawarty w znacznikach

104 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

105 Obiekt Document Zdarzenia onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseUp

106 Obiekt Document Przykładowy plik HTML document.html

107 Obiekt Image Lista obrazków w dokumencie – tablica document.images[ ] Tworzenie new Image([szer, [wysokość] ]) im = new Image() im.src = 'konewka.gif'

108 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

109 Obiekt Image Przykład obrazki.html

110 Obiekt Link, Anchor Lista linków w dokumencie document.links[ ] documents.anchors[ ]

111 Obiekt Link Właściwości href protocol host port hostname pathname search taget text

112 Formularze – obiekt Form Właściwości action=URL elements[ ] encoding length method name

113 Formularze – obiekt Form Metody reset() submit() Zdarzenia onReset onSubmit

114 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ść

115 Formularze – obiekt Button Metody focus() blur() click() Zdarzenia onFocus onBlur onClick onMouseDown onMouseUp

116 Formularze – obiekt CheckBox Właściwości checked defaultChecked form name type value

117 Formularze – obiekt CheckBox Metody focus() blur() click() Zdarzenia onFocus onBlur onClick

118 Formularze – obiekt Radio Właściwości checked defaultChecked form name type value

119 Formularze – obiekt Radio Metody blur() focus() click() Zdarzenia onBlur onFocus onClick

120 Formularze – obiekt Text Właściwości defaultValue form name type value

121 Formularze – obiekt Text Metody blur() focus() select() Zdarzenia onBlur onChange onFocus onSelect

122 Formularze – obiekt Textarea Właściwości defaultValue form name type value Metody blur() focus() select()

123 Formularze – obiekt Textarea Zdarzenia onBlur onFocus onChange onKeyDown onKeyUp onKeyPress onSelect

124 Formularze – obiekt Hidden Właściwości form name type value

125 Formularze – obiekt Select Właściwości form length name options[ ] selectedIndex type (select-one | select-multiple)

126 Formularze – obiekt Select Metody blur() focus() Zdarzenia onBlur onFocus onChange

127 Formularze – obiekt Option Tworzenie new Option([text[, value[, defaultSelected[, selected]]]]) Właściwości defaultSelected selected text value

128 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

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

130 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

131 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

132 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

133 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) {... }

134 Zdarzenia Przykład coords.html cyfry.html

135 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... }

136 DHTML Atrybut style Przykład dynamic.html pozycjonowanie.html