Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Projektowanie stron WWW JavaScript jako język programowania.

Podobne prezentacje


Prezentacja na temat: "Projektowanie stron WWW JavaScript jako język programowania."— Zapis prezentacji:

1 Projektowanie stron WWW JavaScript jako język programowania

2 Co to jest Java-script JavaScript jest językiem programowania jest opisywany jako język skryptowy, jest językiem obiektowym: –używa obiektów, metod, zdarzeń, zmiennych, itd. Tworzony przez Netscape (wcześniej był znany jako LiveScript), JavaScript jest programem, który jest umieszczany na stronie HTML –znaczniki:, –Powinny się znaleźć w sekcji a nie powinny być umieszczane w sekcji, ale to nie jest regułą.

3 Przykład My first script document.write("Hello, world!")

4

5 Dlaczego używamy JavaScript? Język HTML nie umożliwia wielu czynności, a niektóre są trudne do uzyskania, JavaScript umozliwia pracę interaktywną, oraz tworzenie dynamicznych witryn, JavaScript umożliwia sprawdzanie poprawnosci danych przekazywanych przez skrypty CGI, JavaScript został zaprojektowany z myślą o jego użytkowaniu przez osoby, które nie umieją programować,

6 Dlaczego używamy JavaScript? Potrafi lepiej wykorzystac możliwości serwera, odciążyć jego pracę, umożliwia lepsze zarzadzanie okienkami, przyciskami, ramkami (ogólnie elementami witryny), umożliwia stosowanie różnych efektów specjalnych jak np. animację, przewijania, uzależnienie wyświetlania witryny od preferencji użytkownika.

7 Tryby działania JavaScript JavaScript działa w dwóch trybach: –Podczas ładowania strony –W reakcji na zdarzenia (zwykle kliknięcia elementu ekranu) Postać użycia JavaScript: – UWAGA: W JAVASCRIPT OBOWIAZUJE ZASADA: JEDNA INSTRUKCJA TO JEDEN WIERSZ (chyba że średnikiem oddzielimy dwie instrukcje w jednym wierszu. Ale jedna instrukcja nie może się ciągnąć przez kilka wierszy)

8 Java Script – język obietowy Własności, Metody, Zdarzenia.

9 Właściwości Właściwościami są zmienne przechowujące atrybuty obiektów stosowanych w języku. Dostęp jest możliwy poprzez polecenie postaci: obiekt.własność Przykładowe właściwości: –document.color - kolor dokumentu –document.fgcolor - kolor tekstu, –document.lastModyfied - data ostatniej modyfikacji

10 Metody Metoda jest funkcją, która wykonuje czynności związane z obiektem. Wywołujemy poprzez podanie obiekt.nazwa. Po nazwie metody podajemy parę nawiasów. Przykłady: –document.write(string) - wpisujemy do dokumetu tekst, –form.submit() - wysyłamy formularz, –window.alert() - wyświetla okienko dialogowe z zawartością string, –window.open(URL, nazwa) - otwiera dokument.

11 Przykład „własnej”: wyświetlanie daty

12 Zdarzenia Zdarzeniami są specjalne akcje, wywoływane podczas czynności zachodzących w systemie, np. otwarcie okna, wysłanie formularza. Przykłady: –onBlur - wykonywane, gdy użytkownik opuszcza stronę –onChange - wykonywane, gdy użytkownik zmieni zawartość aktywnego pola, –onClick - wykonywane, gdy użytkownik kliknie określony przycisk,

13 Elementy języka Java Script Do pisania programów korzystamy z liter alfabetu łacińskiego (angielskiego): małe i duże litery (są rozróżniane), cyfry, znaki specjalne: [, ], (, ),,(przecinek), … Liczby: 123, , 123e3, 123e-4, e-4, Identyfikatory: ciąg liter i cyfr zaczynający się od litery, do liter zaliczamy znak „_”, Słowa kluczowe: słowa, które mają specjalne znaczenie, nie należy ich używać do innych celów, Instrukcje: połączenia identyfikatorów, liczb, znaków specjalnych i słów kluczowych, instrukcje są z góry ustalone, nie jest ich dużo, –Np. for(i=1;i<=10;i++) Funkcje: zbiór instrukcji+pewne dodatkowe zasady, Biblioteki: zbiór funkcji+pewne dodatkowe zasady.

14 Instrukcje Instrukcje dzielą się na: –Instrukcje podstawienia, –Instrukcje wywołania funkcji, –Instrukcje bloku, –Instrukcje warunkowe, –Instrukcje pętli, –Instrukcje przerywające wykonywanie sekwencji.

15 Instrukcje podstawienia Używamy ich wtedy, gdy chcemy pewną złożoną wartość czymś prostszym (oczywiście zmienną), –Np. x=12.34+y+12/y Ogólna postać: –identyfikator=wyrażenie

16 Wyrażenie Wyrażenie jest to złożony zapis wykonywanych operacji zgodnie z pewnymi regułami. Te reguły to przede wszystkim znaczenie operatorów i kolejność wykonywania operacji. Np.. Nie jest obojętne, czy operację: wykonamy ( )+325 czy 132+( ).

17 Wyrażenie Wyrażenie dzielą się na wyrażenia proste (bez operatorów) i złożone – wyrażenia proste połączone operatorami. Przykład wyrażeń prostych: –1 –c, I złożonych –1+c, –2+4 –2+4+3/4+5 –2+(3*5+1)/(3+1)

18 Przykład My first script x=12*34 document.write("x="+x) //mogę napisać: document.write("x="+12*34)

19 Instrukcja bloku (sekwencji) Instrukcji bloku używamy wtedy, gdy chcemy by pewna grupa instrukcji była traktowana jako jedność. Ważne w połączeniu z innymi instrukcjami. Możemy także stosować, gdy chcemy wydzielić pewne operacje (przykład) Ogólna postać: { I1;I2 I3 I4 I5;i6 }

20 Przykład My first script {x=12*38 document.write("x="+x) }

21 Instrukcje złożone (bloki) zagnieżdżone My first script { x=2 y=1+1/x z=1+1/y } document.write("z="+z) }

22 Instrukcja alternaty Używamy wtedy, gdy chcemy warunkowo wykonać pewną operację. Są dowstepne dwie wersje alternatywy: –if (w) {…} –if (w) {…} else {…} Semantyka, czyli działanie jest następujące: –W obu przypadkach obliczany jest warunek (coś do daje prawdę lub fałsz) –Jeśli warunek jest prawdziwy, to wykonywana jest instrukcja, może być złożona i koniec instrukcji if - pierwszy wariant, –Jeśli warunek jest prawdziwy, to wykonywana jest instrukacja, w przeciwnym razie wykonywana jest duga instrukcja – drugi wariant

23 Przykład My first script {x=5 if (x<10) { document.write("Liczba jest mniejsza od 10") }

24 Przykład My first script {x=11 if (x<10) { document.write("Liczba jest mniejsza od 10") } else { document.write("Liczba jest większa od 10") }

25 Przykład My first script {var dzis= new Date() document.write("teraz jest "+dzis.getHours()+" ") if (dzis.getHours()<10) { document.write("Dzień dobry ") } else if (dzis.getHours()<18) { document.write("miłego dnia ") } else { document.write("dobry wieczór ") }

26 Przykład Można prościej. Tam gdzie jest jedna instrukcja możemy opuścić nawiasy klamrowe (oznaczają one instrukcję złożoną). My first script {var dzis= new Date() document.write("teraz jest "+dzis.getHours()+" ") if (dzis.getHours()<10) document.write("Dzień dobry ") else if (dzis.getHours()<18) document.write("miłego dnia ") else document.write("dobry wieczór ") }

27 Instrukcja switch Konstrukcja switch Jeśli chcemy mieć jeszcze więcej możliwości określenia zachowania programu przy zróżnicowanych wartościach wejściowych, użyjemy konstrukcji switch. Pozwala ona wykonać jeden z wielu bloków kodu, w zależności od różnych wartości zmiennej. Jej składnia ma postać: switch (zmienna) { case wartosc1: kod wykonywany, gdy zmienna ma wartość wartosc1 break case wartosc2: kod wykonywany, gdy zmienna ma wartość wartosc2 break //... itd case wartoscX: kod wykonywany, gdy zmienna ma wartość wartoscX break default: kod wykonywany, gdy zmienna nie przyjmuje żadnej z powyższych wartości }

28 Instrukcja switch Instrukcja switch opisuje sytuacje wielowariantowe. Gdyby nie break, to od momentu wejścia w blok byłyby wykonywane wszystkie instrukcje do końca bloku. Działanie switch: –Obliczamy wartość zmiennej, –Po obliczeniu szukamy wartości w case, –Jak znajdziemy, to jest wykonywany odpowiedni blok instrukcji, –Gdy nie będzie znaleziony, to wykonywane są instrukcje przypisan do default.

29 Przykład var dzis=new Date() // tworzony jest obiekt z datą dzien=dzis.getDay() // wiemy, jaki jest dzień, na podstawie daty switch (dzien); { case 5: document.write("Wreszcie piątek!"); break; case 6: document.write("Imprezowa sobota"); break; case 0: document.write("Śpiąca niedziela"); break; default: document.write("Kiedy wreszcie będzie weekend?!"); }

30 Pętle Pętle używamy wtedy, gdy chcemy wykonywać kilka operacji pewną liczbę razy. Rodzaj użytej pętli zależy od tego, czy wiemy ile razy pętla będzie się wykonywać (instrukcja for), czy też nie wiemy (pętla while).

31 Pętla while Składnia: –while (warunek) { –Instrukcje } Działanie: 1.Obliczany jest warunek, 2.Jeśli jest prawdziwy, to wykonujemy instrukcje i powrót do 1, 3.Jeśli nie jest prawdziwy, to koniec

32 Przykład My first script { x=20*Math.random() document.write("*** x="+x+" ") while (x>0) { x=x-1 document.write(" **x="+x+" ") } document.write(" *x="+x+" ") }

33 Pętla while My first script { // while (w) {…} var cotydzien= new Date(2011,10,2) // var i=1 while (i<=15) { document.write("Wyklad "+i+" będzie "+cotydzien+" ") cotydzien=new Date(cotydzien.getYear(), cotydzien.getMonth(), cotydzien.getDate()+7) i++ }

34 Petla do while Konstrukcja tej pętli jest bardzo podobna do poprzednio opisanej while, z tym że kod w niej umieszczony zawsze musi być wykonany co najmniej raz – nawet gdy warunek nie zostanie spełniony. Jest to związane z tym, że warunek interpreter sprawdza dopiero po wykonaniu poleceń – składnia ma bowiem postać

35 Instrukcja do while Składnia do { instrukcje } while (warunek). Działanie: –Instrukcje są wykonywana, –Obliczany jest warunek, –Gdy jest prawdziwy, to pętla jest ponownie wykonywana, –Gdy jest nieprawdziwy, to pętla jest przerywana

36 Pętla for Pętli for używamy wtedy, gdy wiemy ile razy pętla ma się wykonać. Składnia: –for(zm=wp; warunek;zmiana zm) –{ Instrukcje –} Semantyka: –Zmiennej zm jest przypisywana wartość początkowa –Następuje sprawdzenie, czy warunek jest prawdziwy, –Jeśli jest prawdziwy, to: Wykonywane są instrukcje, Następuje modyfikacja zmiennej sterującej –Jeśli jest nieprawdziwy, to następuje koniec instrukcji pętli

37 Przykład My first script { for (i=1; i<=10; i++) document.write(i+" ") }

38 For zagnieżdżone My first script { for (i=1; i<=5; i++) { document.write(" ") for (j=5; j>=1; j--) document.write(i*j+" ") }

39 Operatory relacyjne ==, !=, <, <=, >=, >

40 Przykład My first script { document.write("operatory relacyjne+ ") x=5 y=6 if (x==y) document.write("równe ") else document.write("różne ") if (x!=y) document.write("różne ") else document.write("równe ") if (x

41 Operatory arytmetyczne + - dodawanie - odejmowanie * - mnożenie, / - dzielenie, % - dzielenie całkowitoliczbowe, ++ - incrementacja, -- - dekrementacja przypisania: –+=, -=, *=, /=, %=

42 Obiekty Własności, Metody, zdarzenia

43 Częściej wykorzystywane obiekty Tablice, Napisy, Matematyczny (funkcje, stałe matematyczne), Data, Inne, np. okna

44 array - pozwala na tworzenie tablic i pracę z nimi. Tablice przechowują wielkości tego samego typu. Do przetwarzania tablic wykorzystujemy funkcję indeks. Indeks jest to wyrażenie, które powinno być >= 0 i nie powinno przekraczać liczby elementów. tablicę tworzymy za pomocą: nazwatablicy=new array([dlugość]) Własności: –length - liczba całkowita określająca ilość komórek w tablicy, np. a.lenght(), Tablice

45 Przykład Obliczanie sumy elementów tablicy n=5: a=Array(n) suma=0 for (i=0;i<5;i++) suma=suma+a[i]

46 Tablice Przykład: obliczenie elementu maksymalnego max=a[0] for (i=1;imax) max=a[i] Można i tak i_max=0 for (i=1;ia[i_max) i_max=i

47 Tablice Przykład: wypisz elementy maksymalne: Obliczamy maksimum (poprzedni slajd) for (i=0;i

48 Metody dla typu tablicowego.concat(obiektArray2) - Łączy dwie lub więcej tablic i zwraca nową..join("separ") - Zwraca łańcuch znaków elementów tablicy, przedzielonych separatorem..pop() - Usuwa i zwraca ostatni element tablicy..push("el1"[,"el2"]) - Dodaje element lub więcej na koniec tablicy i zwraca nową długość..reverse() - Zwraca tablice z elementami w odwrotnej kolejności..slice(indexPocz [,indexKońc]) - Zwraca tablicę utworzoną z części danej..sort([funkcjaPorównawcza]) - Zwraca tablicę posortowaną..splice(index,ile [,el1, el2]) - Dodaje i/lub usuwa elementy tablicy..toString() - Zwraca łańcuch znaków, który reprezentuje daną tablicę..unshift("el1"[,"el2"]) Dodaje jeden lub kilka elementów na początek tablicy i zwraca nową długość.

49 Tablice // przykład tablicy var dztyg= new array(8) dztyg[1]="poniedziałek" dztyg[2]="wtorek" dztyg[3]="środa" dztyg[4]="czwartek" dztyg[5]="piątek" dztyg[6]="sobota" dztyg[7]="niedziela"

50 Przykład a=new Array(3) for (i=0;i<3;i++) a[i]=i document.write("Tablica przed operacja") for (i=0;i<3;i++) document.write(a[i]) document.write("Tablica po operacji") a.reverse() for (i=0;i<3;i++) document.write(a[i]) b=new Array(3) b=a.reverse() document.write("Tablica po jeszcze kolejnej operacji") for (i=0;i<3;i++) document.write(b[i])

51 String Obiekt String przechowuje napisy. Napisy są ważnym typem danych, są wykorzystywane nie tylko do tworzenia i zarządzania tekstów, ale także dynamicznie potrafią przechwowywać dane.

52 Obiekt String Metoda charAt(5) Wyjaśnienie Znak na pozycji lengthLiczba znaków w Stringu indexOf(”ala”)Pozycja pierwszego wystąpienia znaku lub stringu. –1 znaczy brak lastIndexOf(j w) j.w. Ale zaczynając od tyłu Match(”ala”)j.w. Ale zwraca albo zadany string albo „null” zamiast liczby substr(2,5)Zwraca string od pozycji 2 5 znaków substring(2,4)Zwraca string od pozycji 2 do pozycji 4-1 toLowerCase () Zamiana na małe litery toUpperCase () Zamiana na duże litery

53 Przykład a="Jan Abacki ul.3-go Maja" document.write("a="+a+" ") document.write("długość napisu="+a.length+" ") document.write("wystapienie A="+a.indexOf("A")+" ") document.write("część napisu od 4 6 znaków="+a.substr(4,6)+" ")

54 Obiekt Math. Obiekt Math zawiera ważne funkcje matematyczne i stałe.

55 Obiekt Math MetodaWyjaśnienie max(x,y)Zwraca wieksza wartość min(x,y)Zwraca mniejszą wartość random()Zwraca liczbę losową z przedziału 0..1 round(x)Zaokragla liczbę do najbiższej całkowitej a = Math.PI * r*r y = r*Math.sin(theta) x = r*Math.cos(theta)

56 Przykład x=Math.random() document.write("x="+x+" ") document.write("sin(x)="+Math.sin(x)+" ") document.write("pierwiastek="+Math.sqrt(x)+" ") document.write("min 4 5="+Math.min(4,5)+" ") document.write("max ="+Math.max(4,5,8,3,5)+" ")

57 Funkcje Kiedy używamy funkcji –Wtedy, gdy chcemy wykonać pewną grupę poleceń logicznie ze sobą powiązanych, –Kiedy piszemy duży skrypt i chcemy łatwiej zarządzać kodem, –Kiedy opracowujemy trudny algorytm

58 Budowa funkcji Definicja funkcji: function nazwa_funkcji(parametry formalne) { instrukcje return wyrażenie } lub function nazwa_funkcji(parametry formalne) { instrukcje //bez return } Wywołanie funkcji - przykłady: y=nazwa_funkcji(parametry aktualne) lub nazwa_funkcji(parametry aktualne) Uwaga: gdy nie będzie return to wywołanie funkcji nie może wystąpić w wyrażeniu

59 Parametry formalne i aktualne Ogólnie można powiedzieć, że dzięki parametrom funkcję definiujemy raz, a wykorzystujemy wiele razy, Są to parametry, które pozwalają w sposób ogólny, abstrakcyjny) opisać rozwiązanie jakiegoś problemu. –Na przykład dla równania kwadratowego parametrami formalnymi są: a, b i c. Parametry aktualne pozwalają rozwiązać problem dla konkretnych danych. –Na przykład dla równania kwadratowego parametrami aktualnymi są: 2, 3 i 4 (konkretnie to: a=2, b=3 i c=4).

60 Wywołanie funkcji Gdy funkcja zostanie wywołana to: –Nastąpi podstawienie wartości parametrów aktualnych pod formalne, –Wykonanie instrukcji tworzących funkcję, –Ew. zwrócenie wartości. Uwaga: pomijamy tu wszelkie rozważania związane z pracą systemu operacyjnego

61 Odwołanie do parametrów //Liczba przekazanych parametrów function cos() { Document.write(”Liczba parametrów=”+ arguments.length); } //dostęp do parametrów function f(x) { if (arguments.length == 1) document.write(”x=”+x) }

62 Instrukcja return Instrukcji return używamy do przekazania wartości programowi wołającemu function f() { x=4+6*Math.sin(Math.Pi) return x } A można szybciej function f() { return x=4+6*Math.sin(Math.Pi)} }

63 Instrukcja return Możemy zwracać kilka wartości – wtedy grupujemy je w tablicę Przykład function cos() { x=3:y=6 return [x,y,x+y,7] }

64 Tworzenie własnych obiektów Na przykaład window, document, button itp. to typowe obiekty, które posiadają swoje metody i właściwości – już trochę było. Każdy z nich ma np. metodę onclick, właściwość value itp.

65 Tworzenie własnego obiektu var obiekt_1 = { nazwisko: „Abacki", brutto: 2345, wypisz : function() { document.write(this.nazwisko) }

66 Odwołanie się do obiektu var obiekt_1 = { liczba: 100, kwadrat : function() {return this.liczba * this.liczba }, wypisz : function() { alert(this.kwadrat()) } obiekt_1.liczba = 200; obiekt_1.wypisz();

67 Interfejs Komunikacja z użytkownikiem, Praca z okienkami

68 Okna dialogowe Okienka z ostrzeżeniem: –alert(”tekst_ostrzeżenie”) –przykład: alert(”nie wprowadziłeś wartości n>=0”) udzielanie odpowiedzi: –zm=prompt(”Podpowiedź”,”w_domyślna”) –przykład: ile=prompt(”Podaj ilość kart”,10)

69 Przykład Okienka dialogowe

70 Wynik

71 Podejmowanie decyzji Confirm(”komunikat”) zwraca wartość logiczną: true (OK) lub false (Anuluj) Przykład: –document.write("Zdecydowałeś się na ") –var decyzja = confirm("Na co się decydujesz ?") –if (decyzja) { document.write(" TAK! ")} –else {document.write(" nie, a szkoda ")}

72 Przykład

73 Można otworzyć osobne okno Definicja okna: –okno= window.open(”prz1.htm","pomoc", "toolbar=yes,width=350,height=400, scrollbars=1,resizable=1,alwaysRaised"); –Opcja alwaysRaised oznacza, że nowe okienko będzie nad dotychczas otworzonymi Miejsce, w którym wstawiamy: –okno.focus(); –gdzie prz1.htm jest dokumentem, który będzie wyświetlony w oknie, –focus - ustala miejsce wpisywania w aktualnym oknie.

74 Można otworzyć osobne okno i do niego pisać Przykład var okno1= window.open("","pomoc", "toolbar=yes,width=350,height=400,scrollbars=1,resi zable=1,alwaysRaised") okno1.focus() okno1.document.open() okno1.document.write('Cześć'); okno1.document.write(' ') self oznacza odwołanie do aktualnego okna

75 Przykład: onclick() - odejmowanie Wpisz odjemną wpisz odjemnik Kliknij na polu, by zobaczyć różnicę Obsługa zdarzeni a Przechwycen ie zdarzenia

76 Wynik

77 Zmiana koloru tła

78 Wynik - -po kliknięciu przycisku niebieski

79 Dodatkowe okno

80 Dodatkowe okno cd. Wpisz wiadomość in the box, dzięki której zamkniesz nowe okno.

81 efekt Po kliknięciu tu

82 Ważniejsze obiekty w JS Button - odpowiada przyciskom na formularzach na stronach www, Własności: –form - odwołanie do obiektu form, na którym jest umieszczony przycisk, –name - łańcuch zawierający nazwę przycisku, –value - łańcuch zawierający wartość przycisku, –type - łańcuch zawierający wartość parametru Type znacznika INPUT, Zdarzenia: –onClick - kod JS, który będzie wykonany po kliknięciu przycisku, –onMouseDown - kod JS, który będzie wykonany w momencie wciśnięcia przycisku myszy, –onMouseUp - kod JS, który będzie wykonany w momencie zwolnienia wciśniętego przycisku myszy,

83 Ważniejsze obiekty w JS CheckBox/ radio - pozwala na umieszczanie pól wyboru/radialnych na formularzu HTML, Własności: –checked - wartość logiczna określająca czy pole jest zaznaczone, –enabled - wartość logiczna określająca, czy przycisk jest aktywny, –form - odwołanie do obiektu form, na którym umieszczony jest przycisk, –name, type, value - jak wcześniej (dla button), Zdarzenia: –onClick - jak wyżej

84 Ważniejsze obiekty w JS Date - udostępnia metody związane z datą i czasem, Tworzymy: obiekt=new Date([daneoDacie]), gdzie daneoDacie są postaci: –”miesiąc dzień, rok godziny: minuty:sekundy”, –”rok, miesiąc, dzień”, –”rok, miesiąc, dzień, godziny, minuty, sekundy”, Metody: –getDate() - zwraca dzień miesiąca z 1..31, –getDay() - zwraca dzień tygodnia, 0=n, 1=p, itd., –getHours(), getMinutes(), getSeconds(), getMonth(), getYear() - podobnie, –getTime() - zwraca ilość milisekund, które upłynęły od , –parse(data) - zwraca ilość milisekund, które upłynęły od godz. 00:00 a podaną datą, –setDate(data) - ustawia dzień miesiąca dla obiektu date, –setHours(dat), setMinutes(data), setMonth(ilośćM), setSeconds(ilesek), setTime(czas) - podobnie

85 Ważniejsze obiekty w JS Document - odpowiada aktualnie wyświetlanemu dokumentowi HTML, Własności: –bgColor - kolor tła dokumentu, –cookie - łańcuch znaków określający cookies dla danego dokumentu, –fgColor - kolor liter, –forms - tablica obiektów typu form, obiekty są ułożone w kolejności wystąpienia, ilość ich określamy za pomocą forms.length, –images - tablica obiektów typu image, w kolejności wystąpienia, –location - łańcuch znaków określający URL, –title - łańcuch określający tytuł dokumentu,

86 Ważniejsze obiekty w JS Dokument - cd Metody: –close() - zamknięcie dokumentu, –write(), writeln() - pisze do dokumentu, Zdarzenia: –onKeyDown, onKeyPress, onKeyUp - kod JS, który zostanie wykonany po wciśnięciu, puszczeniu klawisza, –onMouseDown, onMouseUp- tak samo, ale dla myszy,

87 Ważniejsze obiekty w JS Form- odpowiada formularzom HTML, Własności: –action - adres URL, gdzie będą wysłane dane z formularza, –elements - tablica obiektów, w kolejności ich wystąpienia, –target - nazwa dokumentu, gdzie będą wyświetlone dane z formularza, Metody: –reset() - czyści wszystkie pola, –submit() - przesyła dane do serwera, Zdarzenia: –onReset() - kod JS, który zostanie wykonany w momencie czyszczenia formularza, –onSubmit() - jw., ale dla przesłania danych,

88 Ważniejsze obiekty w JS Frame - odpowiada zawartości konkretnej ramki, Własności: –frames - tablica obiektów reprezentująca ramki w oknie, –parent - nazwa okna zawierającego ramkę, Metody: –alert(wiadomość), –close()- zamyka okno, –confirm(wiadomość), –open(url, nazwa, opcje),

89 Ważniejsze obiekty w JS Cd Frames gdzie opcje: –toolbar=[yes,no,1,0] -czy ma być opasek narzędziowy, –location =[yes,no,1,0] - czy ma być pole służące wpr. Adresu, –directories =[yes,no,1,0] - czy mają być przyciski umożliwiające poruszanie się między stronami, –status=[yes,no,1,0] - czy okno ma mieć pasek stanu, –menubar =[yes,no,1,0] - jw. Pasek menu, –scrollbars =[yes,no,1,0] - jw. ale paski przewijania, –resizable =[yes,no,1,0] - czy użytkownik może zmieniać rozmiar, –width=piksele, –height=piksele, –prompt(wiadomosc, odpowiedz), –setTimeout(wyrażenie, czas) - powoduje wykonanie polecenia podanego za pomocą wyrażenie po upływie czasu (w milisekundach),

90 Ważniejsze obiekty w JS Frame - cd Zdarzenia: –onMove- kod JS, gdy ramka zostanie przesunięta, –onResize - kod JS, gdy zostanie zmieniona wielkość okna.

91 Ważniejsze obiekty w JS Math: –własności: E (wartość e), LN10 (wartość ln10), LN2 (wartość ln2), LOG10, LOG2E, PI, SQRT1_2 (pierwiastek z 0.5), SQRT2, Metody: –abs(liczba), acos, asin, atan, ceil(liczba) (najmniejsza liczba całkowita >= liczba), cos, exp, floor(liczba) (największa liczba całkowita <= liczba), log, max(liczba1,liczba2), min, random(), round, sqrt, tan.

92 Ważniejsze obiekty w JS String - przetwarza tekst Właściwości: –length - długość Metody: –big(), blink(), bold() - dodaje znaczniki odpowiednio: BIG, BLINK, B, –charAt(indeks) - zwraca znak o podanym indeksie, –indexOf(łańcuch, indeks) - zwraca indeks pierwszego wystąpienia łańcucha począwszy od indeks, –lastindexOf(łańcuch, indeks) - jw. ale ostatnie wystąpienie, –replace(szukany, nowy) - zastepuje szukany łańcuch nowym, –split(separator), tworzy tablicę z elementami podzielonymi przez separator, –substring(ineksP, indeksK) - zwraca podciąg znaków, –toLowerCase(), toUpperCase() - zamienia na małe, duże

93 Ważniejsze obiekty w JS Obiekt window - jest to najwyższy obiekt w hierarchii ramki lub okna (zawiera obiekty dokumentu, lokalizacji oraz listy historycznej), Właściwości: – defaultStatus - informacje wyświetlane domyślnie na pasku statusu, –frames - tablica obiektów odpowiadających ramkom w oknie, –length - ilość ramek w oknie, –name - łańcuch z nazwą ramki, –scrollbars - odwołuje się do pasków przewijania przeglądarki (wartości: scrollbars.visible=flase|true), –toolbar - jak wyżej,

94 Ważniejsze obiekty w JS Window - cd Metody: –alert(wiadomość), –back(), forward() - wyświetla poprzednią/następną stronę, –close() - zamyka okno, –confirm(wiadomość), –focus() - ustawia miejsce wprowadzania w aktualnym oknie, –moveBY(x,y) - przesuwa okno o x i y pikseli, –moveTo(x,y) - przesuwa lewy, górny róg przeglądarki do podanych wsp. –Open(url,nazwa, opcje) - otwiera podaną stronę, opcje były już –prompt(wiadomość, odpowiedz), –setInterval(wyrażenie, czas)- powoduje cykliczne wykonanie polecenia co określoną ilość czasu, –setTimeout(wyarżenie, czas) - powoduje wykonanie wyrażenia po upływie czasu, –scroll(x,y) - przewija okno do punktu o podanych współrzędnych, –stop() - zatrzymuje ładownie dokumentu,

95 Ważniejsze obiekty w JS Zdarzenia: –onError -kod JS wykonywany w przypadku zaistnienia błędów w ładowanym pliku, –onFocus - kod JS, który będzie wykonany w momencie ustawienia miejsca w oknie, –onLoad - kod JS wykonywany w momencie załadownia strony, –onMove -kod JS wykonywany w momencie zakończenia przesuwania strony, –onResize - kod JS wykonywany w momencie zmiany wielkości okna,

96 Ciasteczka Ogólna postać ciasteczek to: Cookie Nazwa=cookieWartosc; expires=datawygasniecia; domain=domenaStrony; path=sciezkaURL; secure Nazwa to nazwa ciasteczka, expires to czas, po którym ciasteczko będzie usunięte, Domain to nazwa domeny ciasteczka, czyli miejsca, gdzie ono się znajduje. Np. secure – zazwyczaj się pomija, oznacza wtedy, że ciasteczka są dostępne dla każdej domeny. Jeśli podamy, to dla niektórych Aby utworzyć ciasteczko korzystamy z document.cookie = nazwa_cokie + "=" + wartosc_cookie + "; expires=" + data_Wygasniecia

97 Uwagi Przeglądarka użytkownika może mieć wyłączoną obsługę ciasteczek Stosowanie ciasteczek może być bardzo użyteczne przy tworzeniu liczników odwiedzin, Za pomocą ciasteczek możemy na przykład pobrać od użytkownika jego imię, a podczas następnych wizyt za pomocą wartości ciasteczka ustawionego na pewien czas (za pomocą expires) od razu je wypisywać na naszej stronie.

98 Przykład 1 Problem - urozmaicenie strony poprzez wprowadzenie losowości wyświetlanej strony, Co potrzebujemy: –liczba losowa z zadanego przedziału, –instrukcji warunkowej

99 Rozwiązanie Generator losowych połączeń

100 Rozwiązanie - cd Generator losowych połączeń Odwiedź losowo wybraną

101 Sprawdzanie poprawności danych Słowo kluczowe this - powoduje przekazanie do funkcji odwołania obiektu skojarzonego z aktualnym formularzem, null - oznacza, że nie ma żadnej wartości, ”” - oznacza pusty łańcuch,

102 Przykład Sprawdzanie poprawności danych

Podobne prezentacje


Reklamy Google