Ćwiczenie laboratoryjne. Obiektowy model przeglądarki (BOM, Browser Object Model)

Wielkość: px
Rozpocząć pokaz od strony:

Download "Ćwiczenie laboratoryjne. Obiektowy model przeglądarki (BOM, Browser Object Model)"

Transkrypt

1 Tematy ćwiczenia Ćwiczenie laboratoryjne Obiektowy model przeglądarki (BOM, Browser Object Model) obiekty window, frames, history, location, navigator, screen, document Wyniki opracowania zadań pokazywać za pomocą obydwóch przeglądarek: Firefox Mozilla, Internet Explorer. W przypadku stosowania Firefox Mozilla używać konsoli błędów (Narzędzia/Konsola błędów). Korzystając z Notatnika opracowywać: plik HTML (XHTML), zewnętrzny plik JS zawierający program w języku JavaScript, zewnętrzny plik CSS. a) Obiekt window Zadanie Opracować aplikację, która po naciśnięciu przycisku Okno otworzy nowe okno z właściwościami według wariantu z przytoczonej tabeli wariantów. Opracowanie zadań <skrypt> <pliki JS i CSS> Testowanie <zrzut z przeglądarki> Tabela wariantów punktu a) Np URL Zmiana rozmiarów okna Możliwość przewijania Pasek narzędzi Pasek stanu Pasek adresu 1 Tak Tak Tak Tak Tak 2 Tak Tak Tak Tak Tak 3 Nie Tak Tak Tak Tak 4 Nie Tak Tak Tak Tak 5 Nie Nie Tak Tak Tak 6 Nie Nie Tak Tak Tak 7 Tak Nie Tak Tak Tak 8 Tak Nie Tak Tak Tak 9 Tak Nie Nie Tak Tak 10 Tak Nie Nie Tak Tak 11 Nie Nie Nie Tak Tak 12 Nie Nie Nie Tak Tak

2 Np URL Zmiana rozmiarów okna Możliwość przewijania Pasek narzędzi Pasek stanu Pasek adresu 13 Nie Tak Nie Tak Tak 14 Nie Tak Nie Tak Tak 15 Tak Tak Nie Tak Tak 16 Tak Tak Nie Tak Tak 17 Tak Tak Nie Tak Tak 18 Tak Tak Nie Tak Tak 19 Nie Tak Nie Tak Tak 20 Nie Tak Nie Tak Tak 21 Nie Nie Nie Tak Tak 22 Nie Nie Nie Tak Tak 23 Tak Nie Nie Tak Tak 24 Tak Nie Nie Tak Tak 25 Tak Nie Tak Tak Tak 26 Tak Nie Tak Tak Tak 27 Nie Nie Tak Tak Tak 28 Nie Nie Tak Tak Tak 29 Nie Tak Tak Tak Tak 30 Nie Tak Tak Tak Tak 31 Tak Tak Tak Tak Tak 32 Tak Tak Tak Tak Tak 33 Tak Tak Tak Tak Tak 34 Tak Tak Tak Tak Tak 35 Nie Tak Tak Tak Tak 36 Nie Tak Tak Tak Tak 37 Nie Nie Tak Tak Tak 38 Nie Nie Tak Tak Tak 39 Tak Nie Tak Tak Tak 40 Tak Nie Tak Tak Tak 41 Tak Nie Nie Tak Tak 42 Tak Nie Nie Tak Tak 43 Nie Nie Nie Tak Tak 44 Nie Nie Nie Tak Tak 45 Nie Tak Nie Tak Tak 46 Nie Tak Nie Tak Tak 47 Tak Tak Nie Tak Tak 48 Tak Tak Nie Tak Tak 49 Tak Tak Nie Tak Tak 50 Tak Tak Nie Tak Tak 51 Nie Tak Nie Tak Tak 52 Nie Tak Nie Tak Tak 53 Nie Nie Nie Tak Tak 54 Nie Nie Nie Tak Tak 55 Tak Nie Nie Tak Tak 56 Tak Nie Nie Tak Tak 57 Tak Nie Tak Tak Tak 58 Tak Nie Tak Tak Tak 59 Nie Nie Tak Tak Tak 60 Nie Nie Tak Tak Tak 61 Nie Tak Tak Tak Tak 62 Nie Tak Tak Tak Tak 63 Tak Tak Tak Tak Tak 64 Tak Tak Tak Tak Tak

3 b). Właściwości obiektów window, frames, history, location, navigator, screen, document Zadanie Opracować aplikacje, w której stworzyć dwie pionowych paneli (ramki). W lewej paneli (ramce) rozmieścić przycisku "Window", Ramki, Historia, URL, Przeglądarka, Ekran i Dokument. W prawej paneli (ramce) po naciśnięciu przycisku "Window", Ramki, Historia, URL, Przeglądarka, Ekran lub Dokument wyświetlać odpowiednio wszystkie właściwości i metody obiektów window, frames, history, location, navigator, screen lub document modelu BOM. Dla obiektu location wyświetlić URL za pomocą metody "tostring()". Opracowanie zadań <skrypt> <pliki JS i CSS> Testowanie <zrzut z przeglądarki> Pokazać prowadzącemu wyniki pracy. Sprawozdanie Na każdym zajęciu laboratoryjnym sporządza się za pomocą edytora Word sprawozdanie na bazie materiałów ćwiczenia. Bazowa zawartość sprawozdania musi być przygotowana w domu przed ćwiczeniem (sprawozdanie do ćwiczenia pierwszego jest przygotowywane w czasie ćwiczenia). W czasie ćwiczenia do sprawozdania są dodawane wyniki testowania. Treść sprawozdania: strona tytułowa, spis treści sporządzony za pomocą Word'a, dla każdego punktu rozdziały "Zadanie ", "Opracowanie zadania" (rozdział ze skryptem i komentarzami), "Testowanie" (rozdział z opisem danych wejściowych i wynikami testowania, w tym zrzuty okna przeglądarki). Wzorzec strony tytułowej znajduje się w pliku Strona_tytulowa_stac_Interpr_jezyki_progr_PWSBAiTK.doc. Nazwa pliku ze sprawozdaniem musi zawierać skrót "InterprJP_52_", numer ćwiczenia i nazwisko studenta (bez polskich liter, żeby można było archiwizować). Pliki ze sprawozdaniem są przekazywane do archiwum grupy.

4 Wskazówki Reakcja na naciśnięcie przycisku W następnym programie jest zaimplementowana reakcja na naciśnięcie przycisku oraz wyświetlenie modalnego okna: <html> <head> function func2() { window.alert('reakcja na button'); } <input type="button" id="bid" name="b1" value="start" onclick="func2()"> </body> </html> Otwieranie i zamykanie okien metodami obiektu window Metoda open( _adres_url, _nazwa_okna, _atrybuty_przez_przecinek ) otwiera okno, a metoda close() zamyka okno. Przykład: window.open ( wingoogle, width=400,height=250, top=50,left=50,resizeable=yes ) Jeżeli skrypt dotyczy głównego okna, to można nie wskazywać na obiekt window : open( wingoogle, width=400,height=250,top=50, left=50,resizeable=yes ) W trzecim argumencie są zapisywane atrybuty okna. Uwaga. W ciągu atrybutów nie można stosować spacje. Przeglądarka Firefox nie obsługuje poprawnie "resizeable=no". Atrybuty okna: Atrybut Wartość left, top, width, height Liczba Współrzędna od lewej, od góry oraz szerokość i wysokość okna resizable yes / no* Określa możliwość zmiany rozmiaru okna przez przeciągnięcie ramki scrollbars yes / no* Określa możliwość przewijania okna location yes / no* Określa, czy musi być pasek adresu toolbar yes / no* Określa, czy musi być pasek narzędzi status yes / no* Określa, czy musi być pasek stanu * - wartość domyślna

5 Przykład: <html><head> <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> <title>strona</title> var newwind=window.open(" "oknogoogle", "width=600,height=450,top=50,left=50,resizeable=yes"); newwind.moveto(0,300) ; <p>tekst testowy</p> window.resizeto(800,600); window.moveto(100,100) ; </body></html> Wyświetlenie listy właściwości i metod obiektu W następnym programie zaimplementowano wyświetlenie listy właściwości i metod obiektu "window" JavaScript: <html><head> <title>okno</title> var indeks; for (indeks in window) { document.write(indeks+" = "+window[indeks] + "<br />"); } </body></html> Tworzenie paneli ramek W następnym programie jest zaimplementowane tworzenie ramek: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html><head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>właściwości</title> <frameset cols="50%,*"> <frame src="frame1.htm" id="id1" name="fr1"> <frame src="frame2.htm" id="id2" name="fr2"> </frameset> </html>

6 Aby odwołać się do jednego z obiektów kolekcji frames należy zastosować indeks ramki. Przykład z wyświetleniem tekstu w ramce 2: <!-- plik frames.htm --> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html><head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>strona testowa</title> function tekst2() { parent.frames[1].document.open(); parent.frames[1].document.write("w oknie 1 był naciśnięty przycisk.<br />"); var nram=window.frames.length parent.frames[1].document.write("ilość ramek = "); parent.frames[1].document.write(nram); parent.frames[1].document.close(); } <frameset rows="50%,*"> <frame src="frame1.html" id="id1" name="fr1"> <frame src="frame2.html" id="id2" name="fr2"> </frameset> </html> <!-- plik frame1.html --> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html><head> <meta http-equiv="content-type" content="text/html; charset=iso "> <p>ramka 1</p> <input type="button" id="but1" name="but1" value="start" onclick="parent.tekst2()"> </body></html> <!-- plik frame2.html --> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html><head> <meta http-equiv="content-type" content="text/html; charset=iso "> <p>ramka 2</p> </body></html>

7 Model BOM Model BOM opisuje obiekty umożliwiające manipulowanie oknem przeglądarki. Współdziałanie przeglądarki i skryptów w pliku HTML (lub XHTML), oraz współdziałanie przeglądarki i ekranu ilustruje niżej położony rysunek. Plik HTML (lub XHTML) Przeglądarka Pliki CSS i JS Obiekty BOM Obiekty DOM Ekran Skrypty JavaScript używają właściwości przeglądarki, a przeglądarka może zmieniać zawartość plików HTML (XHTML), CSS i JS. Dostępne do wykorzystania właściwości przeglądarki są opisywane, jako modeli BOM (Browser Object Model) i DOM (Document Object Model). Obiekty skoncentrowane w modelu BOM sterują oknem przeglądarki, a obiekty modelu DOM dokumentem. Model BOM (Browser Object Model) porządkuje komponenty przeglądarki, które odpowiadają za dostęp do okna wyświetlanym na ekranie i manipulowanie tym oknem. Nie istnieje standard opisujący model BOM, ale w każdej przeglądarce można wydzielić komponenty modelu BOM. Skrypty JavaScript mają dostęp do obiektów BOM i przez nich manipulują oknem przeglądarki. Manipulowanie oknem przeglądarki Bazowym obiektem modelu BOM jest obiekt window. Obiekt window Właściwości obiektu window Właściwość status defaultstatus Wyświetlany tekst Tekst, który jest wyświetlany na czas oglądania strony Pasek stanu Pasek stanu znajduje się w dolnej części okna. Do definiowania zawartości pasku stanu obiektu window są stosowane dwie właściwości: status = _tekst_na_krótko wyświetlany tekst, defaultstatus = _tekst_na_stałe tekst jest wyświetlany na czas oglądania strony. Przykład: window.defaultstatus="gotowe";

8 Metody obiektu window Metoda moveby(dx, dy) Przemieszcza okno o dx pikseli w poziomie i o dy pikseli w pionie moveto(x, y) Ustawia lewy górny róg okna w punkcie (x, y), gdzie x i y są liczone w pikselach resizeby(dw, dh) Zmienia rozmiar okna o dw pikseli w poziomie i o dh pikseli w pionie resizeto(w, h) Ustawia rozmiar okna na szerokość w i wysokość h, gdzie w i h są liczone w pikselach open( _adres_url, Otwieranie okna _nazwa_okna, _atrybuty_przez_przecinek ) close() Zamykanie okna alert(_informujący_ciąg_znaków) Tworzy modalne okno dialogowe z przyciskiem OK i wyświetla tekst _Informujący_ciąg_znaków confirm(_ciag_znaków_zapytania) Tworzy modalne okno dialogowe z dwoma przyciskami OK i Anuluj oraz wyświetla tekst _Ciąg_znaków_zapytania prompt(_zapytanie, Tworzy modalne okno dialogowe z polem edycyjnym i dwoma przyciskami OK i Anuluj oraz wyświe- _Odpowiedź_domyślna) tla tekst _Zapytanie settimeout(_funkcja, _odstęp) Do odliczenia odstępów czasowych cleartimeout(_identyfikator_ Do rezygnacji z odliczenia odstępów czasowych zwrócony_settimeout) setinterval(_funkcja, _odstęp) Do nieskończonego powtórzenia odstępów czaso- clearinterval(_identyfikator_ zwrócony_setinterval) wych Do rezygnacji z nieskończonego powtórzenia odstępów czasowych Metody obiektu window do manipulowania oknem przeglądarki: moveby(dx, dy) przemieszcza okno o dx pikseli w poziomie i o dy pikseli w pionie, moveto(x, y) ustawia lewy górny róg okna w punkcie (x, y), gdzie x i y są liczone w pikselach, resizeby(dw, dh) zmienia rozmiar okna o dw pikseli w poziomie i o dh pikseli w pionie, resizeto(w, h) ustawia rozmiar okna na szerokość w i wysokość h, gdzie w i h są liczone w pikselach. Metody obiektu window do otwierania i zamykania okien: open( _adres_url, _nazwa_okna, _atrybuty_przez_przecinek ) - otwieranie okna, close() - zamykanie okna. Przykład: window.open ( wingoogle, width=400,height=250, top=50,left=50,resizeable=yes ) Jeżeli skrypt dotyczy głównego okna, to można nie wskazywać na obiekt window :

9 open( wingoogle, width=400,height=250,top=50, left=50,resizeable=yes ) W trzecim argumencie są zapisywane atrybuty okna. Uwaga. W ciągu atrybutów nie można stosować spacje. Atrybuty okna: Atrybut Wartość left, top, width, height Liczba Współrzędna od lewej, od góry oraz szerokość i wysokość okna resizable yes / no* Określa możliwość zmiany rozmiaru okna przez przeciągnięcie ramki scrollbars yes / no* Określa możliwość przewijania okna location yes / no* Określa, czy musi być pasek adresu toolbar yes / no* Określa, czy musi być pasek narzędzi status yes / no* Określa, czy musi być pasek stanu * - wartość domyślna Obiekt window zawiera trzy metody do otwierania systemowych modalnych okien dialogowych: alert(_informujący_ciąg_znaków) tworzy modalne okno dialogowe z przyciskiem OK i wyświetla tekst _Informujący_ciąg_znaków, Przykład: <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows- 1250"> <title>strona</title> <p>teksty JavaScript</p> window.alert("test"); </body> </html>

10 confirm(_ciag_znaków_zapytania) tworzy modalne okno dialogowe z dwoma przyciskami OK i Anuluj oraz wyświetla tekst _Ciąg_znaków_zapytania. Funkcja zwraca wartość true, jeśli było naciśnięte OK, oraz wartość false, jeśli było naciśnięte Anuluj. Przykład: <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows- 1250"> <title>strona</title> <p>teksty JavaScript</p> var odpowiedz=window.confirm("czy wykonać test?"); document.write(odpowiedz); </body> </html> prompt(_zapytanie, _Odpowiedź_domyślna) tworzy modalne okno dialogowe z polem edycyjnym i dwoma przyciskami OK i Anuluj oraz wyświetla tekst _Zapytanie. Do pola edycyjnego jest wpisywany tekst _Odpowiedź_domyślna. Funkcja zwraca wartość pola edycyjnego, jeśli było naciśnięte OK. W przypadku naciśnięcia przycisku Anuluj funkcja zwraca wartość null. Przykład: <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows- 1250"> <title>strona</title> <p>teksty JavaScript</p> var odpowiedz=window.prompt("który test wykonać?", "Wiraż"); document.write(odpowiedz); </body> </html>

11 Czasomierz okna Obiekt window ma metodę settimeout do odliczenia odstępów czasowych. Metoda settimeout ma dwa argumenty, z których pierwszy jest skryptowym odwołaniem do funkcji, która będzie wywołana po upływie odstępu czasowego wprowadzonego w drugim argumencie w milisekundach. Przykład: <html><head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>strona</title> function funk(){alert("opóźnienie 4 s");} settimeout(funk,4000); </body></html> Do rezygnacji z odliczenia odstępów czasowych służy metoda cleartimeout (_identyfikator_zwrócony_metodą_settimeout). Dwie metody setinterval i clearinterval podobne do metod settimeout i cleartimeout służą do nieskończonego powtórzenia odstępów czasowych. Przykład zawierający realizację zegara na pasku stanu. <html><head> <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> <title>strona</title> ///window.defaultstatus="gotowe"; function zegar() { var czas=new Date(); var g=czas.gethours(); var m=czas.getminutes(); var s=czas.getseconds(); window.status=g+((m<10)?":0":":")+m+((s<10)?":0":":")+s; } setinterval("zegar()",1000); </body></html>

12 Zdarzenia obiektu window Zdarzenie Właściwość Sytuacja abort onabort Anulowanie pobierania strony blur onblur Okno traci fokus (aktywność) change onchange Zmiana wartości w graficznych elementach okna click onclick Kliknięcie myszą close onclose Zamknięcie okna dragdrop ondragdrop Zdarzenie "przeciągnij i upuść w oknie" error onerror Wykrycie błędu przez przeglądarkę focus onfocus Kontrolka została uaktywniona keydown onkeydown Naciśnięcie przycisku na klawiaturze keypress onkeypress Naciśnięcie przycisku na klawiaturze i zwolnienie przycisku keyup onkeyup Zwolnienie przycisku na klawiaturze load onload Ładowanie dokumentu mousedown onmousedown Naciśnięcie przycisku myszy mousemove onmousemove Kursor myszy przesunął się mouseout onmouseout Kursor myszy wyszedł poza obiekt graficzny mouseover onmouseover Kursor myszy przesuwa się nad obiektem graficznym mouseup onmouseup Zwolnienie przycisku myszy paint onpaint Rysowanie w oknie reset onreset Zerowanie danych resize onresize Zmiana przez użytkownika rozmiaru okna scroll onscroll Przewijanie okna select onselect Zaznaczenie tekstu submit onsubmit Wysyłanie danych formularzu unload onunload Wyładowanie dokumentu Przykład zawierający reakcje na ładowanie strony: <html> <head> function func() { window.alert('zakończono ładowanie strony'); } window.onload = func; </body> </html>

13 Obiekty window Obiekt window zawiera następujące obiekty i kolekcji obiektów: Obiekty i kolekcji obiektów frames history location navigator screen document Kolekcja ramek okna, z których każda jest obiektem window Lista stron, które odwiedzał użytkownik Obiekt reprezentujący adres URL (Uniform Resource Locator) Obiekt zawierający informację o przeglądarce Obiekt zawierający informację o monitorze Obiekt zawierający właściwości dokumentu Obiekt frames Obiekt frames jest kolekcją ramek okna, z których każda jest obiektem window. Ilość obiektów można otrzymać przez właściwość length : var ilo=window.frames.length Obiekt history Obiekt history jest listą stron, które wcześniej odwiedził użytkownik. Obiekt history ma metody: Metoda back() Do przejścia w liście wstecz forward() go(_ilość) Do przejścia w liście do przodu Do przejścia w liście wstecz lub do przodu na odległość wskazaną w argumencie _ilość Właściwość length daje możliwość sprawdzić, ile adresów URL znajduje się w liście. var ilo=window.history.length Obiekt history nie udostępnia adresy URL.

14 Obiekt location Obiekt location reprezentuje adres URL załadowanej strony. Obiekt location ma następujące właściwości. Właściwość href Pełny adres URL. Właściwość może być ustawiona host Nazwa serwera hostname Nazwa serwera bez prefiksu www protocol Nazwa protokołu, który znajduje się w adresie URL przed znakami // pathname Wszystko, co następuje w adresie URL po nazwie serwera search Ciąg zapytania, który może znajdować się w adresie URL po znaku? hash Wszystko, co następuje w adresie URL po znaku # port Numer portu umieszczony w adresie URL Właściwość href umożliwia ustawienie adresu URL: location.href= Metody obiektu location : Metoda assign(_adres_url) Ustawienie adresu URL replace(_adres_url) Ustawienie adresu URL oraz usuwania aktualnego adresu z listy historii reload(_znacznik_źródła) Ładowanie ponownie aktualnej strony z serwera, jeśli _znacznik_źródła jest równy true, lub z bufora, jeśli _znacznik_źródła jest równy false tostring() Zwraca pełny adres URL Obiekt navigator Obiekt navigator zawiera informację o przeglądarce. Ilość właściwości tego obiektu różni się w zależności od przeglądarki. Dlatego na bazie zbioru właściwości można ustalić typ przeglądarki.

15 Obiekt navigator przeglądarki Internet Explorer ma właściwości: Właściwość appcodename appname appversion appminorversion browserlanguage systemlanguage userlanguage cpuclass platform plugins cookieenabled online useragent userprofile Nazwa kodowa przeglądarki Oficjalna nazwa przeglądarki Wersja przeglądarki Dodatkowa informacja o wersji przeglądarki Język przeglądarki Język systemu operacyjnego Język użytkownika przeglądarki Klasa procesora Platforma programowa zastosowana w komputerze Lista bibliotek-wtyczek komputera Znacznik włączenia obsługi cookies Znacznik podłączenia do Internetu Nagłówek User-Agent Profil użytkownika przeglądarki Obiekt navigator przeglądarki Internet Explorer ma metody: Metoda javaenabled() taintenabled() Zwraca znacznik włączenia obsługi Javy Zwraca znacznik zezwolenia na przekazywanie zabezpieczonych danych Obiekt navigator przeglądarki Firefox Mozilla ma właściwości: Właściwość appcodename appname appversion cookieenabled language mimetypes oscpu platform plugins product productsub securitypolicy useragent vendor vendorsub Nazwa kodowa przeglądarki Oficjalna nazwa przeglądarki Wersja przeglądarki Znacznik włączenia obsługi cookies Język przeglądarki Tablica typów MIME System operacyjny lub procesor Platforma programowa zastosowana w komputerze Lista bibliotek-wtyczek komputera Nazwa produktu Dodatkowe informacje o produkcie Podsystem ochrony danych Nagłówek User-Agent Typ przeglądarki Dodatkowe informacje o typie przeglądarki

16 Obiekt navigator przeglądarki Firefox Mozilla ma metody: Metoda javaenabled() preference() taintenabled() Zwraca znacznik włączenia obsługi Javy Ustawia preferencje przeglądarki Zwraca znacznik zezwolenia na przekazywanie zabezpieczonych danych Obiekt screen Obiekt screen zawiera informację o ekranie i ma następujące właściwości: Właściwość height, width availheight, availwidth colordepth Wysokość i szerokość ekranu w pikselach Wysokość i szerokość ekranu w pikselach, które są dostępne dla okien Ilość bitów palety kolorów Wartość właściwości colordepth jest zwykle równa 32 (4 * 8). Obiekt document Obiekt document występuje w obydwóch modelach: BOM i DOM. Każda z tych modeli dołącza do obiektu swój podzbiór właściwości i metod. Obiekt document jako podobiekt obiektu window ma następujące właściwości. Właściwość alinkcolor Kolor aktywnego odnośnika zdefiniowany poprzez <body alink="kolor"> linkcolor Kolor odnośników zdefiniowany poprzez <body link="kolor"> vlinkcolor Kolor odwiedzonych odnośników zdefiniowany poprzez <body vlink="kolor"> bgcolor Kolor tła zdefiniowany poprzez <body bgcolor="kolor"> fgcolor Kolor tekstu zdefiniowany poprzez <body text="kolor"> lastmodified Data ostatniej modyfikacji strony referrer Adres URL umieszczony w historii przeglądarki o jedną pozycję wcześniej URL Adres URL aktualnej strony. Właściwość może być ustawiona title Tytuł strony wyświetlany w znaczniku <title/>. Właściwość może być ustawiona W modelu BOM obiekt document składa się z szeregu kolekcji: Kolekcja anchors applets embeds forms images links Kolekcja kotwic dokumentu (konstrukcje <a name= _nazwa_kotwicy"></a>) Kolekcja apletów dokumentu Kolekcja obiektów osadzonych w dokumencie Kolekcja formularzy na stronie Kolekcja obrazów dokumentu Kolekcja odnośników (łącz) (konstrukcje typu <a href= _adres_url"></a>)

17 Ilość obiektów każdej kolekcji można otrzymać przez właściwość length, na przykład: var ilo=windows.images.length Aby wywołać jeden z obiektów należy zastosować indeks obiektu, na przykład: var img=windows.document.images[0] lub krócej var img=document.images[0] Można też odwołać się do jednego z obiektów poprzez nazwę obiektu, na przykład: var img=windows.document.images[ _nazwa_obrazu ] lub krócej var img=document.images[ _nazwa_obrazu ] Metody obiektu document w modelu BOM: Metoda open() close() write(_argument) writeln(_argument) Otwarcie dokumentu w celu zapisywania do niego Zamkniecie dokumentu otwartego metodą open(), co powoduje wyświetlenie dokumentu Wyświetlenie argumentu _argument w miejscu wywołania metody Wyświetlenie argumentu _argument w miejscu wywołania metody oraz przejście na nowy wiersz

Współdziałanie przeglądarki i skryptów w pliku HTML (lub XML), oraz współdziałanie przeglądarki i ekranu ilustruje niżej położony rysunek.

Współdziałanie przeglądarki i skryptów w pliku HTML (lub XML), oraz współdziałanie przeglądarki i ekranu ilustruje niżej położony rysunek. Obiektowy model przeglądarki (BOM, Browser Object Model) Współdziałanie przeglądarki i skryptów w pliku HTML (lub XML), oraz współdziałanie przeglądarki i ekranu ilustruje niżej położony rysunek. Plik

Bardziej szczegółowo

Przetwarzanie dokumentów XML i zaawansowane techniki WWW Zdarzenia w JavaScript (Zajęcia r.)

Przetwarzanie dokumentów XML i zaawansowane techniki WWW Zdarzenia w JavaScript (Zajęcia r.) Przetwarzanie dokumentów XML i zaawansowane techniki WWW Zdarzenia w JavaScript (Zajęcia 08 25.04.2016 r.) 1) Zdarzenia w JavaScript Zdarzenia są sygnałami generowanymi w chwili wykonywania ściśle określonych

Bardziej szczegółowo

Kurs WWW wykład 6. Paweł Rajba

Kurs WWW wykład 6. Paweł Rajba Kurs WWW wykład 6 Paweł Rajba pawel@ii.uni.wroc.pl http://www.ii.uni.wroc.pl/~pawel/ Obiekt Window Zdarzenia onblur ondragdrop onerror onfocus onload onmove onresize onunload Obiekt Location Właściwości

Bardziej szczegółowo

Obiekt navigator. Dodał Administrator wtorek, 16 marzec :32

Obiekt navigator. Dodał Administrator wtorek, 16 marzec :32 Obiekt navigator przechowuje informacje dotyczące przeglądarki, jej nazwy, wersji, języka, systemu operacyjnego, na którym została uruchomiona, itp. Nie jest częścią specyfikacji W3C, ale większość produktów

Bardziej szczegółowo

CZYM JEST JAVASCRIPT?

CZYM JEST JAVASCRIPT? JAVASCRIPT JAVASCRIPT - CECHY Język skryptowy stosowany w sieci WWW Stosowany przez autorów witryn WWW głównie w celu: poprawy wyglądu stron walidacji danych z formularzy wykrywania typu przeglądarki tworzenia

Bardziej szczegółowo

Zdarzenia Zdarzenia onload i onunload

Zdarzenia Zdarzenia onload i onunload Zdarzenia Zdarzenia onload i onunload Ćwiczenie 1. Rysunek 1. Okno powitalne wykorzystujące zdarzenie onload Na stronie mogą zachodzić różne zdarzenia, np. użytkownik kliknie myszą lub zacznie wprowadzać

Bardziej szczegółowo

Dodanie nowej formy do projektu polega na:

Dodanie nowej formy do projektu polega na: 7 Tworzenie formy Forma jest podstawowym elementem dla tworzenia interfejsu użytkownika aplikacji systemu Windows. Umożliwia uruchomienie aplikacji, oraz komunikację z użytkownikiem aplikacji. W trakcie

Bardziej szczegółowo

Tworzenie aplikacji internetowych E14

Tworzenie aplikacji internetowych E14 Tworzenie aplikacji internetowych E14 JavaScript w przykładach Tomasz Fitzermann Język JavaScript JavaScript - język skryptowy rozszerzający standardowy HTML m.in. o możliwość interakcji z użytkownikiem

Bardziej szczegółowo

JavaScript - wykład 4. Zdarzenia i formularze. Obsługa zdarzeń. Zdarzenia. Mysz. Logiczne. Klawiatura. Beata Pańczyk

JavaScript - wykład 4. Zdarzenia i formularze. Obsługa zdarzeń. Zdarzenia. Mysz. Logiczne. Klawiatura. Beata Pańczyk Obsługa zdarzeń JavaScript - wykład 4 Zdarzenia i formularze Beata Pańczyk zdarzenia - wszystko co zachodzi w związku z obiektami JavaScript (np. window) i elementami XHTML przeglądarka moŝe wywołać funkcję

Bardziej szczegółowo

JAVASCRIPT (cz. IV) ĆWICZENIA DO SAMODZIELNEGO WYKONANIA materiały dydaktyczne dla słuchaczy opracowanie: 2004-2007 by Arkadiusz Gawełek, Łódź

JAVASCRIPT (cz. IV) ĆWICZENIA DO SAMODZIELNEGO WYKONANIA materiały dydaktyczne dla słuchaczy opracowanie: 2004-2007 by Arkadiusz Gawełek, Łódź JAVASCRIPT (cz. IV) ĆWICZENIA DO SAMODZIELNEGO WYKONANIA Ćwiczenie 1 obliczanie daty Wielkanocy Napisz skrypt, który: poprosi użytkownika o podanie roku z przedziału 1900..2099 sprawdzi, czy podana wartość

Bardziej szczegółowo

Podstawy JavaScript ćwiczenia

Podstawy JavaScript ćwiczenia Podstawy JavaScript ćwiczenia Kontekst:

Bardziej szczegółowo

Kurs HTML 4.01 TI 312[01]

Kurs HTML 4.01 TI 312[01] TI 312[01] Spis treści 1. Wiadomości ogólne... 3 2. Wersje języka HTML... 3 3. Minimalna struktura dokumentu... 3 4. Deklaracje DOCTYPE... 3 5. Lista znaczników, atrybutów i zdarzeń... 4 5.1 Lista atrybutów

Bardziej szczegółowo

Okna, ramki i ciasteczka

Okna, ramki i ciasteczka Okna, ramki i ciasteczka Okna Ćwiczenie 6.1. Rysunek 6.1. Skrypt otwierający nowe okno przeglądarki po wciśnięciu przycisku Manipulację oknami umożliwia nam obiekt window. Jego właściwości i metody przedstawione

Bardziej szczegółowo

Tworzenie stron internetowych RAMKI

Tworzenie stron internetowych RAMKI Tworzenie stron internetowych RAMKI RAMKI Ramka to zdefiniowana część okna przeglądarki, której to części przypisano właściwości takie jak całemu oknu. ramka może być przewijana niezależnie od pozostałej

Bardziej szczegółowo

Krótki kurs JavaScript

Krótki kurs JavaScript Krótki kurs JavaScript Java Script jest językiem wbudowanym w przeglądarkę. Gdy ma się podstawy nabyte w innych językach programowania jest dość łatwy do opanowania. JavaScript jest stosowany do powiększania

Bardziej szczegółowo

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco: 1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera

Bardziej szczegółowo

Tablica zawierająca odniesienia do znajdujących się w dokumencie obiektów typu Anchor.

Tablica zawierająca odniesienia do znajdujących się w dokumencie obiektów typu Anchor. Obiekt document służy do reprezentacji wczytanego do przeglądarki dokumentu HTML oraz zawiera szereg właściwości i metod pozwalających na jego modyfikację. Poprzez ten obiekt można otrzymać dostęp praktycznie

Bardziej szczegółowo

Podstawy programowania w języku JavaScript

Podstawy programowania w języku JavaScript Podstawy programowania w języku JavaScript Część trzecia Funkcje i programowanie sterowane zdarzeniami Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie

Bardziej szczegółowo

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

JAVAScript tablice, przekazanie danych do funkcji, obiekty Date i window

JAVAScript tablice, przekazanie danych do funkcji, obiekty Date i window Programowanie obiektowe ćw.2 JAVAScript tablice, przekazanie danych do funkcji, obiekty Date i window Tablice w JavaScript Przykład zastosowania tablicy dla przekazania rezultatów funkcji do miejsca wywołania

Bardziej szczegółowo

HTML ciąg dalszy. Listy, formularze

HTML ciąg dalszy. Listy, formularze HTML ciąg dalszy Listy, formularze Listy Służą do prezentacji treści w postaci wypunktowania: numerowanego nienumerowanego definicji Możliwe jest zagnieżdżanie list zarówno tego samego, jak i różnych typów

Bardziej szczegółowo

Pozycjonowanie i poruszanie warstw

Pozycjonowanie i poruszanie warstw Pozycja warstwy na ekranie może być zmieniana poprzez modyfikację właściwości top i left obiektu style. Odpowiadają one za położenie lewego górnego rogu; pierwsza za współrzędną x, druga y. Umiejscowienie

Bardziej szczegółowo

Najprostszy dokument HTML. <html> <body> Dowolny tekst. </body> </html>

Najprostszy dokument HTML. <html> <body> Dowolny tekst. </body> </html> HTML - podstawy HTML = Hyper Text Markup Language Plik HTML plik tekstowy zawierający elementy HTML definiowane przez znaczniki HTML Znaczniki HTML odpowiadają za interpretację informacji zawartych w pliku

Bardziej szczegółowo

Zadanie 1. Stosowanie stylów

Zadanie 1. Stosowanie stylów Zadanie 1. Stosowanie stylów Styl to zestaw elementów formatowania określających wygląd: tekstu atrybuty czcionki (tzw. styl znaku), akapitów np. wyrównanie tekstu, odstępy między wierszami, wcięcia, a

Bardziej szczegółowo

Zajęcia 4 - Wprowadzenie do Javascript

Zajęcia 4 - Wprowadzenie do Javascript Zajęcia 4 - Wprowadzenie do Javascript Co to jest Javascript Javascript jest językiem skryptowym pozwalającym na dołączanie dodatkowej funkcjonalności do stron WWW. Jest ona najczęściej związana z modyfikacją

Bardziej szczegółowo

Kurs programowania 2 - listy

Kurs programowania 2 - listy Kurs programowania 2 - listy Listy rozwijane (ComboBox) Listy rozwijane (rozwijalne) można tworzyć przy użyciu klasy ComboBox. W tabeli poniżej właściwości udostępniane przez tę kontrolkę. Najważniejsza

Bardziej szczegółowo

Utworzenie aplikacji mobilnej Po uruchomieniu Visual Studio pokazuje się ekran powitalny. Po lewej stronie odnośniki do otworzenia lub stworzenia

Utworzenie aplikacji mobilnej Po uruchomieniu Visual Studio pokazuje się ekran powitalny. Po lewej stronie odnośniki do otworzenia lub stworzenia Utworzenie aplikacji mobilnej Po uruchomieniu Visual Studio pokazuje się ekran powitalny. Po lewej stronie odnośniki do otworzenia lub stworzenia nowego projektu (poniżej są utworzone projekty) Po kliknięciu

Bardziej szczegółowo

HTML (HyperText Markup Language)

HTML (HyperText Markup Language) HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy

Bardziej szczegółowo

Atrybuty znaczników HTML

Atrybuty znaczników HTML Atrybuty znaczników HTML Atrybut Zastosowanie Opis Abbr Td, Th Skrót dla komórki nagłówkowej tabeli Accept Form, input Lista typów MIME dla wysyłanego pliku Accept-charset Form Lista obsługiwanych znaków

Bardziej szczegółowo

Programowanie WEB PODSTAWY HTML

Programowanie WEB PODSTAWY HTML Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony

Bardziej szczegółowo

Podstawy programowania. Ćwiczenie. Pojęcia bazowe. Języki programowania. Środowisko programowania Visual Studio

Podstawy programowania. Ćwiczenie. Pojęcia bazowe. Języki programowania. Środowisko programowania Visual Studio Podstawy programowania Ćwiczenie Pojęcia bazowe. Języki programowania. Środowisko programowania Visual Studio Tematy ćwiczenia algorytm, opis języka programowania praca ze środowiskiem, formularz, obiekty

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 10

Tworzenie Stron Internetowych. odcinek 10 Tworzenie Stron Internetowych odcinek 10 JavaScript JavaScript (ECMAScript) skryptowy język programowania powszechnie używany w Internecie. Skrypty JS dodają do stron www interaktywność i funkcjonalności,

Bardziej szczegółowo

Podręcznik użytkownika programu. Ceremonia 3.1

Podręcznik użytkownika programu. Ceremonia 3.1 Podręcznik użytkownika programu Ceremonia 3.1 1 Spis treści O programie...3 Główne okno programu...4 Edytor pieśni...7 Okno ustawień programu...8 Edycja kategorii pieśni...9 Edytor schematów slajdów...10

Bardziej szczegółowo

Uwaga: znaczniki <body> </body> nie powinny byd umieszczane na stronie zawierającej ramki, w ramach FRAMESET.

Uwaga: znaczniki <body> </body> nie powinny byd umieszczane na stronie zawierającej ramki, w ramach FRAMESET. * HTML + Wstęp do HTML Dokument HTML jest plikiem tekstowym, który zawiera znaczniki, zwane inaczej tagami, i stanowią język HTML. Same składają się z nawiasów kątowych, między którymi znajdują się ściśle

Bardziej szczegółowo

CZĘŚĆ A PIERWSZE KROKI Z KOMPUTEREM

CZĘŚĆ A PIERWSZE KROKI Z KOMPUTEREM CZĘŚĆ A PIERWSZE KROKI Z KOMPUTEREM 1.1. PODSTAWOWE INFORMACJE PC to skrót od nazwy Komputer Osobisty (z ang. personal computer). Elementy komputera można podzielić na dwie ogólne kategorie: sprzęt - fizyczne

Bardziej szczegółowo

Temat: Organizacja skoroszytów i arkuszy

Temat: Organizacja skoroszytów i arkuszy Temat: Organizacja skoroszytów i arkuszy Podstawowe informacje o skoroszycie Excel jest najczęściej wykorzystywany do tworzenia skoroszytów. Skoroszyt jest zbiorem informacji, które są przechowywane w

Bardziej szczegółowo

dokumentacja Edytor Bazy Zmiennych Edytor Bazy Zmiennych Podręcznik użytkownika

dokumentacja Edytor Bazy Zmiennych Edytor Bazy Zmiennych Podręcznik użytkownika asix 4 Edytor Bazy Zmiennych Podręcznik użytkownika asix 4 dokumentacja Edytor Bazy Zmiennych ASKOM i asix to zastrzeżone znaki firmy ASKOM Sp. z o. o., Gliwice. Inne występujące w tekście znaki firmowe

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza na stronie WWW z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed

Bardziej szczegółowo

Wprowadzenie do języka HTML

Wprowadzenie do języka HTML Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system

Bardziej szczegółowo

Visual Basic for Applications. Formatki tworzenie,

Visual Basic for Applications. Formatki tworzenie, Visual Basic for Applications Formatki tworzenie, sterowanie, właściwości. Podstawowe typy kontrolek: Wybrane właściwości obiektu UserForm: BackColor kolor wypełnienia tła formatki, BorderStyle fmborderstylenone/fmborderstylesingle,

Bardziej szczegółowo

Edytor tekstu MS Office Word

Edytor tekstu MS Office Word Edytor tekstu program komputerowy ukierunkowany zasadniczo na samo wprowadzanie lub edycję tekstu, a nie na nadawanie mu zaawansowanych cech formatowania (do czego służy procesor tekstu). W zależności

Bardziej szczegółowo

Rys.2.1. Drzewo modelu DOM [1]

Rys.2.1. Drzewo modelu DOM [1] 1. CEL ĆWICZENIA Celem ćwiczenia jest przedstawienie możliwości wykorzystania języka JavaScript do tworzenia interaktywnych aplikacji działających po stronie klienta. 2. MATERIAŁ NAUCZANIA 2.1. DOM model

Bardziej szczegółowo

2018/10/16 20:47 1/5 3 Ekrany

2018/10/16 20:47 1/5 3 Ekrany 2018/10/16 20:47 1/5 3 Ekrany 3 Ekrany Przegląd W ekranach Zabbix można grupować informacje z różnych źródeł, co pozwala na szybki przegląd na jednym ekranie. Budowanie ekranu jest całkiem proste i intuicyjne.

Bardziej szczegółowo

Odsyłacze. Style nagłówkowe

Odsyłacze. Style nagłówkowe Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami

Bardziej szczegółowo

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE 1. TABELE 1.1. Definicja tabeli Definicja tabeli musi być umieszczona między znacznikami. W ich ramach umieszczane są definicje rzędów

Bardziej szczegółowo

Makra Access 2003 wg WSiP Wyszukiwanie, selekcjonowanie i gromadzenie informacji Ewa Mirecka

Makra Access 2003 wg WSiP Wyszukiwanie, selekcjonowanie i gromadzenie informacji Ewa Mirecka Makra Access 2003 wg WSiP Wyszukiwanie, selekcjonowanie i gromadzenie informacji Ewa Mirecka Makra pozwalają na zautomatyzowanie często powtarzających się czynności. Opierają się na akcjach np.: otwarcie

Bardziej szczegółowo

Wykład 03 JavaScript. Michał Drabik

Wykład 03 JavaScript. Michał Drabik Wykład 03 JavaScript Michał Drabik Język programowania wykorzystywany na stronach internetowych głównie w celu umożliwienia interakcji z użytkownikiem. Kod JavaScript może być umieszczany w kodzie XHTML

Bardziej szczegółowo

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 6 JavaScript w przeglądarce Agenda Skrypty na stronie internetowej Model DOM AJAX Skrypty na stronie

Bardziej szczegółowo

Edukacja na odległość

Edukacja na odległość Ćwiczenie 2. Edukacja na odległość Obsługa konta WWW na serwerze Linuksowym Tworzenie portalu edukacyjnego o określonej, wybranej przez studenta tematyce naukowej. Cel ćwiczenia: Projektowanie strony czołowej

Bardziej szczegółowo

Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz

Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz Wykład 2 TINT XHTML tabele i ramki Zofia Kruczkiewicz 1. Tabele 1.1. Przykład tabeli zawierającej kalendarz na miesiąc marzec ... definiuje tabelę Atrybuty: border ="" obramowanie tabeli,

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 5

Tworzenie Stron Internetowych. odcinek 5 Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja

Bardziej szczegółowo

1. Przypisy, indeks i spisy.

1. Przypisy, indeks i spisy. 1. Przypisy, indeks i spisy. (Wstaw Odwołanie Przypis dolny - ) (Wstaw Odwołanie Indeks i spisy - ) Przypisy dolne i końcowe w drukowanych dokumentach umożliwiają umieszczanie w dokumencie objaśnień, komentarzy

Bardziej szczegółowo

HTML cd. Ramki, tabelki

HTML cd. Ramki, tabelki HTML cd. Ramki, tabelki Ramki Umożliwiają wyświetlanie kilku niezależnych dokumentów w tym samym oknie w układzie pionowym, poziomym lub mieszanym. Wady: kłopotliwe drukowanie, konieczność zapanowania

Bardziej szczegółowo

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language

Bardziej szczegółowo

WŁĄCZANIE W PRZEGLĄDARKACH INTERNETOWYCH OBSŁUGI SKRYPTÓW JAVASCRIPT

WŁĄCZANIE W PRZEGLĄDARKACH INTERNETOWYCH OBSŁUGI SKRYPTÓW JAVASCRIPT WŁĄCZANIE W PRZEGLĄDARKACH INTERNETOWYCH OBSŁUGI SKRYPTÓW JAVASCRIPT JavaScript jest językiem skryptowym powszechnie stosowanym przez programistów internetowych. Skrypty służą zazwyczaj do zapewnienia

Bardziej szczegółowo

E-geoportal Podręcznik użytkownika.

E-geoportal Podręcznik użytkownika. PROCAD SA E-geoportal Podręcznik użytkownika. gis@procad.pl 2 Spis treści 1. Wstęp.... 3 2. Ikony narzędziowe.... 4 2.1. Ikony narzędziowe przesuwanie obszaru mapy.... 5 2.2. Ikony narzędziowe informacja

Bardziej szczegółowo

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze

Bardziej szczegółowo

Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript.

Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript. Instrukcja laboratoryjna do ćwiczenia: 1. Cel ćwiczenia Strona internetowa w systemach unix-owych Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania

Bardziej szczegółowo

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 7 jquery Agenda Czym jest jquery? Podstawowe zasady jquery Selektory jquery Model DOM i jquery Zdarzenia

Bardziej szczegółowo

Zadanie 9. Projektowanie stron dokumentu

Zadanie 9. Projektowanie stron dokumentu Zadanie 9. Projektowanie stron dokumentu Przygotowany dokument można: wydrukować i oprawić, zapisać jako strona sieci Web i opublikować w Internecie przekonwertować na format PDF i udostępnić w postaci

Bardziej szczegółowo

learningpanel - materiały pomocnicze - JAK ZROBIĆ... Jak zrobić...

learningpanel - materiały pomocnicze - JAK ZROBIĆ... Jak zrobić... Jak zrobić... W tym dziale prezentujemy przepisy "krok po kroku" jak stworzyć różne aplikacje multimedialne w generatorze lekcji learningpanel. APLIKACJA I: Zestaw ćwiczeń i zadań testowych. Przykład aplikacji,

Bardziej szczegółowo

Ćwiczenia laboratoryjne. Oprogramowanie i badanie prostych metod sortowania w tablicach

Ćwiczenia laboratoryjne. Oprogramowanie i badanie prostych metod sortowania w tablicach Ćwiczenia laboratoryjne Oprogramowanie i badanie prostych metod sortowania w tablicach Sprawozdanie Na każdym zajęciu laboratoryjnym sporządza się za pomocą edytora Word sprawozdanie. Bazowa zawartość

Bardziej szczegółowo

Skróty klawiaturowe w systemie Windows 10

Skróty klawiaturowe w systemie Windows 10 Skróty klawiaturowe w systemie Windows 10 Skróty klawiaturowe to klawisze lub kombinacje klawiszy, które zapewniają alternatywny sposób na wykonanie czynności zwykle wykonywanych za pomocą myszy. Kopiowanie,

Bardziej szczegółowo

Laboratorium - Monitorowanie i zarządzanie zasobami systemu Windows XP

Laboratorium - Monitorowanie i zarządzanie zasobami systemu Windows XP 5.0 5.3.3.7 Laboratorium - Monitorowanie i zarządzanie zasobami systemu Windows XP Wprowadzenie Wydrukuj i uzupełnij to laboratorium. W tym laboratorium, będziesz korzystać z narzędzi administracyjnych

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza HTML z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed wysłaniem

Bardziej szczegółowo

Aplikacja projektu Program wycinki drzew i krzewów dla RZGW we Wrocławiu

Aplikacja projektu Program wycinki drzew i krzewów dla RZGW we Wrocławiu Aplikacja projektu Program wycinki drzew i krzewów dla RZGW we Wrocławiu Instrukcja obsługi Aplikacja wizualizuje obszar projektu tj. Dorzecze Środkowej Odry będące w administracji Regionalnego Zarządu

Bardziej szczegółowo

XML extensible Markup Language. część 5

XML extensible Markup Language. część 5 XML extensible Markup Language część 5 XML ważne zastosowanie Jak często pracujemy z plikami XML? Wróćmy jeszcze do wykładu poprzedniego. A dokładnie do pliku zawierającego ten wykład. xml_2017_wyklad_4.pptx

Bardziej szczegółowo

Komputery I (2) Panel sterowania:

Komputery I (2) Panel sterowania: Komputery I (2) Paweł Jamer Panel sterowania: Podstawowym miejscem z którego zarządzamy ustawieniami systemu Windows jest panel sterowania. Znaleźć tam możemy wszelkiego rodzaju narzędzia umożliwiające

Bardziej szczegółowo

Damian Daszkiewicz 2010 www.damiandaszkiewicz.pl www.videowebmaster.pl. Tworzenie strony-wizytówki dla firmy XYZ

Damian Daszkiewicz 2010 www.damiandaszkiewicz.pl www.videowebmaster.pl. Tworzenie strony-wizytówki dla firmy XYZ Damian Daszkiewicz 2010 www.damiandaszkiewicz.pl www.videowebmaster.pl Tworzenie strony-wizytówki dla firmy XYZ Dokument może być dowolnie rozpowszechniany w niezmiennej formie. Nie możesz pobierać opłat

Bardziej szczegółowo

Zadanie 3. Praca z tabelami

Zadanie 3. Praca z tabelami Zadanie 3. Praca z tabelami Niektóre informacje wygodnie jest przedstawiać w tabeli. Pokażemy, w jaki sposób można w dokumentach tworzyć i formatować tabele. Wszystkie funkcje związane z tabelami dostępne

Bardziej szczegółowo

JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.

JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. IŚ ćw.8 JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Skrypt JavaScript

Bardziej szczegółowo

Sprawozdanie Sieci komputerowe i bazy danych Laboratorium nr 4

Sprawozdanie Sieci komputerowe i bazy danych Laboratorium nr 4 03.04.2017r AGH, WIMIR, Inżynieria Mechatroniczna Dawid Furdzik Nr albumu: 279671 Sprawozdanie Sieci komputerowe i bazy danych Laboratorium nr 4 Po wywołaniu polecenia odpowiedź serwera wygląda następująco:

Bardziej szczegółowo

JavaScript. mgr inż. Remigiusz Pokrzywiński

JavaScript. mgr inż. Remigiusz Pokrzywiński JavaScript mgr inż. Remigiusz Pokrzywiński Czym jest JavaScript JavaScript to skryptowy język umożliwiający rozbudowę dokumentów HTML o możliwość interakcji z użytkownikiem oraz sprawdzania poprawności

Bardziej szczegółowo

Baza wiedzy instrukcja

Baza wiedzy instrukcja Strona 1 z 12 Baza wiedzy instrukcja 1 Korzystanie z publikacji... 2 1.1 Interaktywny spis treści... 2 1.2 Przeglądanie publikacji... 3 1.3 Przejście do wybranej strony... 3 1.4 Przeglądanie stron za pomocą

Bardziej szczegółowo

Programowanie obiektowe

Programowanie obiektowe Laboratorium z przedmiotu Programowanie obiektowe - zestaw 08 Cel zajęć. Celem zajęć jest zapoznanie z praktycznymi aspektami powiązania modelu obiektowego z modelem okienkowym w C#. Wprowadzenie teoretyczne.

Bardziej szczegółowo

Visual Studio instalacja

Visual Studio instalacja Visual Studio 2017 - instalacja Do tej pory napisaliśmy wiele programów, z czego niemal wszystkie były aplikacjami konsolowymi. Najwyższy więc czas zająć się tworzeniem aplikacji z graficznym interfejsem

Bardziej szczegółowo

wstawianie przycisków umożliwiających wybieranie wartości poprzez klikanie strzałek

wstawianie przycisków umożliwiających wybieranie wartości poprzez klikanie strzałek VBA Excel Formularz Formanty Label wstawianie etykiet TextBox wstawianie pól tekstowych ComboBox wstawianie pól kombi ComboBox wstawianie pól kombi ComboBox wstawianie pól kombi OptionButton wstawianie

Bardziej szczegółowo

Laboratorium - Podgląd informacji kart sieciowych bezprzewodowych i przewodowych

Laboratorium - Podgląd informacji kart sieciowych bezprzewodowych i przewodowych Laboratorium - Podgląd informacji kart sieciowych bezprzewodowych i przewodowych Cele Część 1: Identyfikacja i praca z kartą sieciową komputera Część 2: Identyfikacja i użycie ikon sieci w obszarze powiadomień

Bardziej szczegółowo

Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW

Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW Rys.1. Przykład prostej tabeli zawierającej kalendarz na miesiąc marzec ... definiuje tabelę Atrybuty: border

Bardziej szczegółowo

I. Spis treści I. Spis treści... 2 II. Kreator szablonów... 3 1. Tworzenie szablonu... 3 2. Menu... 4 a. Opis ikon... 5 3. Dodanie nowego elementu...

I. Spis treści I. Spis treści... 2 II. Kreator szablonów... 3 1. Tworzenie szablonu... 3 2. Menu... 4 a. Opis ikon... 5 3. Dodanie nowego elementu... Kreator szablonów I. Spis treści I. Spis treści... 2 II. Kreator szablonów... 3 1. Tworzenie szablonu... 3 2. Menu... 4 a. Opis ikon... 5 3. Dodanie nowego elementu... 7 a. Grafika... 7 b. Tekst... 7 c.

Bardziej szczegółowo

Rozdział 5. Administracja kontami użytkowników

Rozdział 5. Administracja kontami użytkowników Rozdział 5. Administracja kontami użytkowników Ćwiczenia zawarte w tym rozdziale pozwolą przygotować oddzielne środowisko pracy dla każdego użytkownika komputera. Windows XP, w porównaniu do systemów Windows

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 7

Tworzenie stron internetowych w kodzie HTML Cz 7 Tworzenie stron internetowych w kodzie HTML Cz 7 7. Ramki 7.1. Wstęp Przykład: Oto przykładowy wygląd strony startowej ramek: PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">

Bardziej szczegółowo

Platforma e-learningowa

Platforma e-learningowa Platforma e-learningowa skrócona instrukcja obsługi. Aby uruchomić platformę e-learningową, należy otworzyć przeglądarkę internetową, a następnie wpisać adres http://aok.learnway.eu/ - wyświetlony zostanie

Bardziej szczegółowo

I Tworzenie prezentacji za pomocą szablonu w programie Power-Point. 1. Wybieramy z górnego menu polecenie Nowy a następnie Utwórz z szablonu

I Tworzenie prezentacji za pomocą szablonu w programie Power-Point. 1. Wybieramy z górnego menu polecenie Nowy a następnie Utwórz z szablonu I Tworzenie prezentacji za pomocą szablonu w programie Power-Point 1. Wybieramy z górnego menu polecenie Nowy a następnie Utwórz z szablonu 2. Po wybraniu szablonu ukaŝe się nam ekran jak poniŝej 3. Następnie

Bardziej szczegółowo

Wstęp 5 Rozdział 1. Instalacja systemu 13. Rozdział 2. Logowanie i wylogowywanie 21 Rozdział 3. Pulpit i foldery 25. Rozdział 4.

Wstęp 5 Rozdział 1. Instalacja systemu 13. Rozdział 2. Logowanie i wylogowywanie 21 Rozdział 3. Pulpit i foldery 25. Rozdział 4. Wstęp 5 Rozdział 1. Instalacja systemu 13 Uruchamianie Ubuntu 14 Rozdział 2. Logowanie i wylogowywanie 21 Rozdział 3. Pulpit i foldery 25 Uruchamianie aplikacji 25 Skróty do programów 28 Preferowane aplikacje

Bardziej szczegółowo

I. Wstawianie rysunków

I. Wstawianie rysunków I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka

Bardziej szczegółowo

POMOC / INSTRUKCJA OBSŁUGI

POMOC / INSTRUKCJA OBSŁUGI POMOC / INSTRUKCJA OBSŁUGI 1. Powiększanie mapy 2. Plakat 3. Schemat lekcji 4. Broszura informacyjna 5. Instrukcja obsługi Pasek narzędzi i menu wyboru Zmiana skali mapy Mini mapa - podgląd na położenie

Bardziej szczegółowo

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML

Bardziej szczegółowo

WYKŁAD 4 JĘZYK JAVASCRIPT CZĘŚĆ 1

WYKŁAD 4 JĘZYK JAVASCRIPT CZĘŚĆ 1 WYKŁAD 4 JĘZYK JAVASCRIPT CZĘŚĆ 1 DEFINICJA JAVASCRIPT (oficjalna nazwa ECMA-262, ECMAScript 6 czerwiec 2015r.) Skryptowy język programowania, którego celem jest dodanie dynamiki do możliwości HTML'a.

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium JavaServer Pages Celem ćwiczenia jest zbudowanie kilku prostych stron internetowych z użyciem technologii JSP. Podczas ćwiczenia wykorzystany zostanie algorytm sortowania bąbelkowego

Bardziej szczegółowo

TURNINGPOINT KROKI DO URUCHOMIENIA TESTU NA PC

TURNINGPOINT KROKI DO URUCHOMIENIA TESTU NA PC TURNINGPOINT KROKI DO URUCHOMIENIA TESTU NA PC 1. Podłącz odbiornik 2. Uruchom TurningPoint 3. Sprawdź połączenie (Odbiornik i/lub ResponseWare) 4. Wybierz listę uczestników (opcjonalne) 5. Wybierz głosowanie

Bardziej szczegółowo

Laboratorium 8 ( Android -pierwsza aplikacja)

Laboratorium 8 ( Android -pierwsza aplikacja) Dr Mirosław Łątka Informatyka dla medycyny Jesień 2012 Laboratorium 8 ( Android -pierwsza aplikacja) Naszym celem jest stworzenie aplikacji, która wyświetla zdjęcie Alberta Einsteina. Jeden z przycisków

Bardziej szczegółowo

Biblioteka Windows Forms

Biblioteka Windows Forms Biblioteka Windows Forms Aplikacje Windows Forms Aplikacje sterowane zdarzeniami Rysowanie oparte na GDI+ "Obudowane" kontrolki Win32 "Elementy" do budowy aplikacji Przestrzeń nazw System.Windows.Forms

Bardziej szczegółowo

Miejsce na naklejkę z numerem PESEL i z kodem ośrodka. Wypełnia zdający. Numer PESEL zdającego*

Miejsce na naklejkę z numerem PESEL i z kodem ośrodka. Wypełnia zdający. Numer PESEL zdającego* Arkusz zawiera informacje prawnie chronione do momentu rozpoczęcia egzaminu Nazwa kwalifikacji: Programowanie, tworzenie i administrowanie stronami internetowymi i bazami danych Oznaczenie kwalifikacji:

Bardziej szczegółowo

BAZY DANYCH Panel sterujący

BAZY DANYCH Panel sterujący BAZY DANYCH Panel sterujący Panel sterujący pełni z reguły rolę centrum, z którego wydajemy polecenia i uruchamiamy różnorodne, wcześniej zdefiniowane zadania, np. wyświetlamy formularze lub drukujemy

Bardziej szczegółowo

Podstawy technologii cyfrowej i komputerów

Podstawy technologii cyfrowej i komputerów BESKIDZKIE TOWARZYSTWO EDUKACYJNE Podstawy technologii cyfrowej i komputerów Budowa komputerów cz. 2 systemy operacyjne mgr inż. Radosław Wylon 2010 1 Spis treści: Rozdział I 3 1. Systemy operacyjne 3

Bardziej szczegółowo

Ćwiczenia z systemu operacyjnego WINDOWS

Ćwiczenia z systemu operacyjnego WINDOWS Opracowanie: Krzysztof Trembaczowski Spis treści Ćwiczenia z systemu operacyjnego Windows 98.... 3 1. Ćwiczenie (Zabawa z pasjansem)... 3 2. Ćwiczenie (Elementy składowe interfejsu)... 3 3. Ćwiczenie (Elementy

Bardziej szczegółowo

uczyć się bez zagłębiania się w formalnym otoczeniu,

uczyć się bez zagłębiania się w formalnym otoczeniu, CZĘŚĆ 3 - INTERNET 3.1 WSTĘP Internet jest globalnym zbiorem połączonych ze sobą komputerów, które przesyłają informacje między sobą za pośrednictwem szybkich połączeń sieciowych oraz linii telefonicznych.

Bardziej szczegółowo

I. Program II. Opis głównych funkcji programu... 19

I. Program II. Opis głównych funkcji programu... 19 07-12-18 Spis treści I. Program... 1 1 Panel główny... 1 2 Edycja szablonu filtrów... 3 A) Zakładka Ogólne... 4 B) Zakładka Grupy filtrów... 5 C) Zakładka Kolumny... 17 D) Zakładka Sortowanie... 18 II.

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium HTML + CSS Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej składającej się z zestawu stron w języku HTML. Ćwiczenia można wykonać na dowolnym komputerze,

Bardziej szczegółowo