Kurs WWW. Paweł Rajba

Transkrypt

1 Kurs WWW Paweł Rajba Paweł Rajba

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 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 <SCRIPT language="javascript" type="text/javascript"> <!...tutaj umieszczamy skrypt... //--> </SCRIPT> Dołączenie zewnętrznego pliku <SCRIPT language="javascript" type="text/javascript" src="skrypt.js"></script> Wewnątrz znaczników: <A href="javascript:void(0)">tu klikać</a>

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 <A HREF="javascript:void(0)">Tu klikać i nic się nie stanie</a>

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

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 + "<BR>"); i+=1; checkj : while (j>4) { document.write(j + "<BR>"); j-=1; if ((j%2)==0) continue checkj; document.write(j + " is odd.<br>"); } document.write("i = " + i + "<br>"); document.write("j = " + j + "<br>"); } 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 ( ) 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, :24:00") alert (Number(d)) Wyświetli się: " " 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) bf2 = new Boolean(false) bf3 = new Boolean(null) bt1 = new Boolean(true) bt2 = new Boolean("false") bt3 = new Boolean("Inny taki") Metody //false //false //false //true //true //true 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 , 00:00:00

45 Obiekty i metody Date Przykłady tworzenia daty: dzisiaj = new Date() data1 = new Date("May 23, :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 :00:00 Date.parse(data) zwraca ilość milisekund od :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) // alert(d.gettime()) // d = new Date(104,02,20) alert(d.getyear()) // 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, :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 :20:20 GMT Date.toLocaleString() zwraca datę i czas lokalną w formacie lokalnym alert(d.tolocalestring()) // :20:20

56 Obiekty i metody Date Metody zamieniające datę na napis Date.toLocaleDateString() zwraca lokalną datę w formacie lokalnym alert(d.tolocaledatestring()) // Date.toString() zamienia na napis alert(d.tostring()) // Mon, 01 May :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()); // :20:20 alert(gmtdate.toutcstring()); // Mon, 01 May :20:20 GMT

58 Obiekty i metody Math Stałe E stała Eulera, liczba e, podstawa log naturalnego ok LN2 logarytm naturalny z 2, ok LN10 logarytm naturalny z 10, ok LOG2E logarytm dwójkowy z E ok LOG10E logarytm dziesiętny z E ok PI liczba pi, ok SQRT1_2 pierwiastek kwadratowy z ½; to samo co 1 przez pierwiastek kwadratowy z 2, ok SQRT2 - pierwiastek kwadratowy z 2, ok

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 " ".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() // <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>

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

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

73 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(" // <A HREF="

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

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

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

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

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