Projektowanie stron WWW

Transkrypt

1 <?php Ming_setScale(1.0); $string = "Ming"; $f = new SWFFont("ComicSansMS.fdb"); $m = new SWFMovie(); $m->setrate(24.0); $m->setdimension(2400, 1600); $m->setbackground(0xff, 0xff, 0xff); function text($r, $g, $b, $a) { global $f, $m; $t = new SWFText(); $t->setfont($f); $t->setcolor($r, $g, $b, $a); $t->setheight(960); $t->moveto(-($t->getwidth($string))/2, 220); $t->addstring($string); $i = $m->add($t); $i->x = $x; $i->y = $y; $i->rot = $rot; $i->s = $scale; $i->rotateto($rot); Projektowanie stron WWW Projektowanie stron WWW Wykład 4 Michał Dudkiewicz, WMiI UMK (jaymz@mat.umk.pl)

2 <?php Ming_setScale(1.0); $string = "Ming"; $f = new SWFFont("ComicSansMS.fdb"); $m = new SWFMovie(); $m->setrate(24.0); $m->setdimension(2400, 1600); $m->setbackground(0xff, 0xff, 0xff); function text($r, $g, $b, $a) { global $f, $m; $t = new SWFText(); $t->setfont($f); $t->setcolor($r, $g, $b, $a); $t->setheight(960); $t->moveto(-($t->getwidth($string))/2, 220); HTML (formularz) $t->addstring($string); $i = $m->add($t); $i->x = $x; $i->y = $y; $i->rot = $rot; $i->s = $scale; $i->rotateto($rot); 2 Projektowanie stron WWW

3 HTML formularz Definicja formularza: <form name="formularz" method="post" action="form.php"> </form> name nazwa formularza method sposób wysyłania danych GET/POST action skrypt obsługujący dane z formularza id unikalny identyfikator formularza 3

4 HTML formularz pole INPUT Pole formularza INPUT - typu text, password : <input type="text" name="nazwa" value="odpowiedź domyślna" /> maxlength = liczba maksymalna ilośc znaków w polu tekstowym accesskey = znak skrót klawiaturowy (lewy alt + lewy shift + znak) tabindex = liczba - kolejność reagowania na klawisz tabulatora readonly = readonly pole tylko do odczytu (nie można modyfikować) disabled = disabled pole zablokowane (nie będzie wysyłane wraz z danymi formularza) Istnieje jeszcze typ pola hidden (pole ukryte, którego nie widać na stronie WWW) 4

5 HTML formularz pole INPUT Pole formularza INPUT - typu checkbox: <input type="checkbox" name="nazwa" id="id_pola1" value= wartość1" /> <input type="checkbox" name="nazwa" id="id_pola2" value= wartość2" /> accesskey = znak skrót klawiaturowy (lewy alt + lewy shift + znak) tabindex = liczba - kolejność reagowania na klawisz tabulatora readonly = readonly pole tylko do odczytu (nie można modyfikować) disabled = disabled pole zablokowane (nie będzie wysyłane wraz z danymi formularza) checked = checked - pole domyślnie zaznaczone 5

6 HTML formularz pole INPUT Pole formularza INPUT - typu radio: <input type="radio" name="nazwa" id="id_pola1" value= wartość1" /> <input type="radio" name="nazwa" id="id_pola2" value= wartość2" /> accesskey = znak skrót klawiaturowy (lewy alt + lewy shift + znak) tabindex = liczba - kolejność reagowania na klawisz tabulatora readonly = readonly pole tylko do odczytu (nie można modyfikować) disabled = disabled pole zablokowane (nie będzie wysyłane wraz z danymi formularza) checked = checked - pole domyślnie zaznaczone 6

7 HTML formularz pole INPUT Pole formularza INPUT - typu submit, reset: <input type="submit" name="send" value="wyślij" id="id" /> <input type="reset" name="clear" value="zresetuj formularz" id="id" /> accesskey = znak skrót klawiaturowy (lewy alt + lewy shift + znak) tabindex = liczba - kolejność reagowania na klawisz tabulatora 7

8 HTML formularz pole INPUT, typ button Pole formularza INPUT - typu button: <input type="button" name="nazwa" id="id_pola1" value="wartość" /> accesskey = znak skrót klawiaturowy (lewy alt + lewy shift + znak) tabindex = liczba - kolejność reagowania na klawisz tabulatora readonly = readonly pole tylko do odczytu (nie można modyfikować) disabled = disabled pole zablokowane (nie będzie wysyłane wraz z danymi formularza) 8

9 HTML formularz Przykład formularza HTML: <form name="formularz" method="post" action="form.php"> <input type="text" name="imie" id="imie" /><br /> <input type="text" name="nazwisko" id="nazwisko" /><br /> <input type="radio" value="m" name="plec"/>mężczyzna<br/> <input type="radio" value="k" name="plec"/>kobieta<br/> <input type="submit" value="wyślij" id="wyslij"/> </form> 9

10 HTML formularz pole TEXTAREA Pole formularza TEXTAREA: <textarea rows="4" cols="50" name="pole" id="p1">pole tekstowe</textarea> accesskey = znak skrót klawiaturowy (lewy alt + lewy shift + znak) tabindex = liczba - kolejność reagowania na klawisz tabulatora readonly = readonly pole tylko do odczytu (nie można modyfikować) disabled = disabled pole zablokowane (nie będzie wysyłane wraz z danymi formularza) 10

11 HTML formularz pole SELECT Pole formularza SELECT: <select name="kolory" id="lista1 multiple="multiple"> <option value="b">zielony</option> <option value="g">niebieski</option> <option value="r">czerwony</option> </select> accesskey = znak skrót klawiaturowy (lewy alt + lewy shift + znak) tabindex = liczba - kolejność reagowania na klawisz tabulatora readonly = readonly pole tylko do odczytu (nie można modyfikować) disabled = disabled pole zablokowane (nie będzie wysyłane wraz z danymi formularza) size = liczba ilość jednocześnie wyświetlanych pól option multiptle = multiple możliwość wielokrotnego zaznaczenia 11

12 <?php Ming_setScale(1.0); $string = "Ming"; $f = new SWFFont("ComicSansMS.fdb"); $m = new SWFMovie(); $m->setrate(24.0); $m->setdimension(2400, 1600); $m->setbackground(0xff, 0xff, 0xff); function text($r, $g, $b, $a) { global $f, $m; $t = new SWFText(); $t->setfont($f); $t->setcolor($r, $g, $b, $a); $t->setheight(960); $t->moveto(-($t->getwidth($string))/2, 220); Java Script (obsługa formularza) $t->addstring($string); $i = $m->add($t); $i->x = $x; $i->y = $y; $i->rot = $rot; $i->s = $scale; $i->rotateto($rot); 12 Projektowanie stron WWW

13 JavaScript JavaScript, JS skryptowy język programowania, stworzony przez firmę Netscape. Głównym autorem JavaScriptu jest Brendan Eich. Najczęściej spotykanym zastosowaniem języka JavaScript są strony WWW. Skrypty służą do zapewnienia interaktywności poprzez reagowanie na zdarzenia, sprawdzania poprawności formularzy lub budowania elementów nawigacyjnych. W języku JavaScript można także pisać pełnoprawne aplikacje. Skrypt JavaScriptu ma znacznie ograniczony dostęp do komputera użytkownika. 13

14 JavaScript osadzanie Osadzanie skryptu w dokumencie HTML: zewnętrznie <script type="text/javascript" src="code.js"></script> bezpośrednio w dokumencie <script type="text/javascript"> </script> Jeżeli kod znajduje się w dokumencie XHTML, w celu uniknięcia zinterpretowania niektórych operatorów jako elementów składni języka należy otoczyć skrypt sekcją CDATA <script type="text/javascript"> /* <![CDATA[ */ alert(12 > 6); /*]]>*/</script> 14

15 JavaScript biblioteki JQuery - biblioteka programistyczna dla języka JavaScript, ułatwiająca korzystanie z JavaScript. Cechy: niezależność od przeglądarki eliminuje konieczność dostosowywania kodu do różnych przeglądarek WWW pozwala osiągnąć interesujące efekty animacji, dodać dynamiczne zmiany strony, wykonać zapytania AJAX MooTools obiektowa biblioteka JavaScript składająca się z modułów 15

16 JavaScript prosty przykład <html> <head> <script type="text/javascript"> function komunikat() { alert("wciśnięto przycisk"); } </script> </head> <body> <input type="button" name="przycisk" value="click Me!" onclick="komunikat()"> </body> </html> 16

17 JavaScript zdarzenia Zdarzenia generowane przez mysz: Zdarzenie onclick ondblclick onmousedown onmousemove onmouseover onmouseout onmouseup Opis zdarzenie występuje w momencie kliknięcia myszą na dany element zdarzenie występuje w momencie dwukrotnego kliknięcia myszą na dany element zdarzenie występuje w momencie naciśnięcia lewego przycisku myszy na danym elemencie zdarzenie występuje w momencie przemieszczania wskaźnika myszy na danym elemencie zdarzenie występuje w momencie pojawienia się wskaźnika myszy na danym elemencie zdarzenie występuje w momencie opuszczenia danego elementu przez wskaźnik myszy zdarzenie występuje w momencie zwolnienia lewego przycisku myszy na danym elemencie 17

18 JavaScript zdarzenia Zdarzenia ogólne i generowane przez klawiaturę: Zdarzenie onkeydown onkeypress onkeyup onload onunload Opis zdarzenie występuje w momencie naciskania klawisza na klawiaturze zdarzenie występuje w momencie naciśnięcia klawisza na klawiaturze zdarzenie występuje w momencie zwolnienia wciśniętego klawisza na klawiaturze zdarzenie występuje w momencie załadowania strony <body> lub obiektu <object> zdarzenie występuje w momencie opuszczenia strony <body> 18

19 JavaScript zdarzenia Zdarzenia generowane przez elementy formularza: Zdarzenie onblur onchange onfocus onreset onselect onsubmit Opis zdarzenie występuje kiedy dany element formularza przestaje być aktywny zdarzenie występuje kiedy dany element formularza zmieni swoją wartość, dotyczy elementów: <input>, <select>, <textarea> zdarzenie występuje kiedy dany element formularza staje się aktywny, dotyczy elementów: <label>, <input>, <select>, <textarea>, <button> zdarzenie występuje w momencie resetowania formularza zdarzenie występuje w momencie zaznaczenia tekstu w formularzu, dotyczy pól: <input> i <textarea> zdarzenie występuje w momencie wysyłania formularza (po naciśnięciu SUBMIT) 19

20 JavaScript model DOM Obiektowy model dokumentu (Document Object Model, DOM) sposób reprezentacji złożonych dokumentów XML i HTML w postaci modelu obiektowego. Model ten jest niezależny od platformy i języka programowania. Pierwotnie nie istniał standardowy model DOM. Twórcy najpopularniejszych przeglądarek internetowych (Netscape i Microsoft) tworzyli własne niezgodne ze sobą modele. Organizacja W3C przygotowała ujednolicony standard obiektowego modelu dokumentu. 20

21 JavaScript dostęp do elementów strony Dostęp do elementów strony WWW za pomocą JavaScript: document.getelementbyid("id_elementu") <html> <head> <title>przykład getelementbyid</title> <script type="text/javascript"> function changecolor(newcolor) { elem = document.getelementbyid("para1"); elem.style.color = newcolor; } </script> </head> <body> <p id="para1">jakiś tekst</p> <button onclick="changecolor('blue');">niebieski</button> <button onclick="changecolor('red');">czerwony</button> </body> </html> 21

22 JavaScript wyrażenia regularane Metaznak Znaczenie Przykład Zgodne Nie zgodne ^ Początek wzorca ^za $ Koniec wzorca. Jeden dowolny znak [ ] [^ ] dowolny z wymienionych znaków; możemy podawać kolejne znaki lub wpisywać zakres - na przykład [a-z] oznacza wszystkie małe litery. dowolny z niewymienionych znaków dowolny z rozdzielonych znakiem ciągów az$ ^.arka$.an.a [a-z]an[nd]a [a-z][a-za-z0-9.- ][pus] zapałka, zadra, zapłon, zarazek uraz, pokaz barka, warka panda, Wanda, panna, kania pana, panda, wanna pas, mas, p2p, m3u, b-s, z.u kazanie, poza, bazar azymut, pokazy parkan rana, konia kre[^st] krew, krem kres, kret [nz]a pod przed trzynasty 13-ty 13 na, za, pod, przed trzynasty, 13-ty, 13 Wanda, kania Bas, bal, balu, mp3 22

23 JavaScript wyrażenia regularane Metaznak Znaczenie Przykład Zgodne Nie zgodne ( ) zawężenie zasięgu g(ż rz)eg(ż rz)(u ó)łka (ósmy 8-my 8)(maj maja) gżegżółka, gżegrzółka, gżegrzułka, grzegrzułka ósmy maja, 8-my maj, 8 maja? zero lub jeden poprzedzający znak lub element; elementem może być na przykład wyrażenie umieszczone wewnątrz nawiasów (...) ro?uter (ósmy 8(-my)?)maja? router, ruter ósmy maja, ósmy maj, 8-mymaja, 8- my maj, 8 maja, 8 maj + jeden lub więcej poprzedzających znaków lub elementów; elementem może być na przykład wyrażenie umieszczone wewnątrz nawiasów (...) [0-9]+[abc] pan+a (tam)+ 10a, 1b, 003c, 42334b pana, panna, pannnna tam, tamtam, tamtamtam a, b, c, z, 14, 03, 12d, 1231z paa, panda, ta, tamta, mat 23

24 JavaScript wyrażenia regularane Metaznak Znaczenie Przykład Zgodne Nie zgodne * {4} {4,} {2,4} zero lub więcej poprzedzających znaków lub elementów; elementem może być na przykład wyrażenie umieszczone wewnątrz nawiasów (...) dokładnie 4 poprzedzające znaki lub elementy 4 lub więcej poprzedzających znaków lub elementów od 2 do 4 poprzedzających znaków lub elementów [0-9]*[abc] pora*n*a* 10a, 1b, 003c, 42334b, a, b, c por, poa, poranna, poraannnaa, pornnna [0-9]{4} 8765, 8273, 2635 [ah]{4,} haha, haaaaahaha, ahaaa k, 2335, porada, panna 12345, 234, haa, ha, hehe, aha p.{2,4}a piana, pola, polana psa, poranna \* znak * \*.+ *nic nic*, nic 24

25 JavaScript poprawność danych (walidacja) Walidacja danych (sprawdzanie poprawności danych) Czy liczba całkowita? function integer_validate(src) { var regex = /^[\-]{0,1}[0-9]{1,8}$/; return regex.test(src); } Kod pocztowy? function postal_code_validate(src) { var regex = /^[0-9]{2}\-[0-9]{3}$/; return regex.test(src); } 25

26 JavaScript poprawność danych (walidacja) Ćwiczenie Jak sprawdzić poprawność formatu adresu ? function _validate(src) { var regex =???????????? return regex.test(src); } 26

27 JavaScript poprawność danych (walidacja) Ćwiczenie Jak sprawdzić poprawność formatu adresu ? function _validate(src) { var regex = /^[a-za-z0-9._-]+@([a-za-z0-9.-]+\.)+[a-za-z0-9.-]{2,4}$/; return regex.test(src); } 27

28 Zakończenie 28