Kurs WWW – wykład 6 Paweł Rajba

Prezentacja na temat: "Kurs WWW – wykład 6 Paweł Rajba"— Zapis prezentacji:

1 Kurs WWW – wykład 6 Paweł Rajba pawel@ii.uni.wroc.pl http://www.ii.uni.wroc.pl/~pawel/

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

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

4 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

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

6 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

7 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

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

9 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

10 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

11 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

12 Obiekt Document Zdarzenia onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseUp

13 Obiekt Document Przykładowy plik HTML document.html

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

15 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

16 Obiekt Image Przykład obrazki.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

35 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

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

37 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

38 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

39 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

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

41 Zdarzenia Przykład coords.html cyfry.html

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

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