Kurs WWW wykład 6. Paweł Rajba

Wielkość: px

Rozpocząć pokaz od strony:

Download "Kurs WWW wykład 6. Paweł Rajba"

Paweł Łuczak
7 lat temu
Przeglądów:

1 Kurs WWW wykład 6 Paweł Rajba pawel@ii.uni.wroc.pl

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

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

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

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

Podobne dokumenty

Technologie internetowe JavaScript

Technologie internetowe JavaScript Paweł Rajba pawel@ii.uni.wroc.pl http://www.kursy24.eu/ Spis treści Wprowadzenie JavaScript i ECMAScript Osadzanie JavaScript, komentarze Typy i konwersje typów, zmienne