HTML z JavaScript

Transkrypt

HTML z JavaScript

Jerzy Kluczewski
________________________________________
Wydanie I
Gda sk, listopad 2000
Cało
skryptu oraz adna z cz ci nie mo e by modyfikowana, kopiowana oraz publikowana w formie elektronicznej
b d drukiem bez zezwolenia autora.
Podr cznik ten stanowi integraln cz
materiałów edukacyjnych i nie jest samodzieln cało ci . Pełne wykorzystanie
zawartych w nim informacji oraz realizacja wicze mo liwa jest tylko poprzez aktywne uczestnictwo w zaj ciach
wiczeniowych.
SPIS TRE CI
CZE
I.....................................................................................................................................................................3
Wst p.......................................................................................................................................................................3
Zasady tworzenia stron WWW .................................................................................................................................3
Uwagi praktyczne.....................................................................................................................................................3
Co to jest znacznik?..................................................................................................................................................3
Budowa szkieletu dokumentu ...................................................................................................................................4
Tytuły ......................................................................................................................................................................4
Akapit......................................................................................................................................................................4
Poziome linie ...........................................................................................................................................................4
Listy wypunktowane i numerowane..........................................................................................................................5
Styl czcionki ............................................................................................................................................................5
Hiperł cza, czyli odsyłacze.......................................................................................................................................5
wiczenie nr 1 – Tytuły, listy, odsyłacze ..................................................................................................................6
wiczenie nr 2 – atrybuty czcionek ..........................................................................................................................7
Grafika.....................................................................................................................................................................8
Kolor tła strony ........................................................................................................................................................8
wiczenie nr 3 – wstawianie tła strony i obrazów graficznych ..................................................................................8
CZ
II ...................................................................................................................................................................9
Tworzenie stron z ramkami ......................................................................................................................................9
Konstruowanie ramek...............................................................................................................................................9
wiczenie nr 4 - ramki pionowe ............................................................................................................................10
Ramki kolumnowo -wierszowe...............................................................................................................................11
wiczenie nr 5 - ramki kolumnowo -wierszowe......................................................................................................11
Ramki i spis tre ci ..................................................................................................................................................12
wiczenie nr 6 – ramki ze spisem tre ci..................................................................................................................12
Animacja Marquee, czyli przesuwaj cy si tekst .....................................................................................................14
D wi k w tle dokumentu........................................................................................................................................14
Tabele....................................................................................................................................................................15
wiczenie nr 7 – tabelka.........................................................................................................................................16
CZ
III ................................................................................................................................................................16
Umieszczanie skryptów JavaScript na stronach WWW ...........................................................................................16
Jak umie ci skrypt JavaScript w dokumencie HTML? ...........................................................................................16
CZ
IV – ZADANIA SPRAWDZAJ CE ..........................................................................................................17
ZADANIE NR 1 ....................................................................................................................................................17
ZADANIE NR 2 ....................................................................................................................................................20
DODATEK A – ZNACZNIKI HTML.....................................................................................................................23
Znaczniki podstawowe ...........................................................................................................................................23
Znaczniki fizyczne .................................................................................................................................................23
DODATEK B – WYBRANE ELEMENTY JAVASCRIPT ....................................................................................24
Umieszczanie skryptów w dokumencie HTML .......................................................................................................24
Deklaracje zmiennych ............................................................................................................................................24
Operatory arytmetyczne, porównania i logiczne......................................................................................................25
Operatory arytmetyczne .........................................................................................................................................25
Operatory porównania ............................................................................................................................................25
Operatory logiczne .................................................................................................................................................25
Funkcje ..................................................................................................................................................................25
Instrukcja wyboru...................................................................................................................................................26
Instrukcja p tli .......................................................................................................................................................26
Formularze.............................................................................................................................................................27
Przydatne funkcje standardowe j zyka JavaScript ...................................................................................................27
Funkcje daty i czasu systemowego..........................................................................................................................27
Funkcje: alert, confirm, prompt obsługuj ce okienka dialogowe..............................................................................28
Funkcje zwracaj ce dane o przegl darce internetowej .............................................................................................28
DODATEK C – PRZYKŁADY SKRYPTÓW .......................................................................................................28
Animowany tekst w pasku statusu ..........................................................................................................................28
Pole tekstowe z zegarkiem......................................................................................................................................29
Rozwijane menu w ramce......................................................................................................................................30
DODATEK D – Podstawy JavaScript .....................................................................................................................30
Wst p.....................................................................................................................................................................30
Dlaczego u ywamy skryptów JS na stronach WWW? .............................................................................................31
str. 2 z 47
Jak umie ci skrypt JS w dokumencie HTML? .......................................................................................................31
Podstawowe elementy JS........................................................................................................................................31
Obiekty i ich wła ciwo ci oraz metody ...................................................................................................................32
Predefiniowane obiekty JS......................................................................................................................................33
Podstawowe konstrukcje u ywane w JS..................................................................................................................36
Komentarze:...........................................................................................................................................................36
Okna komunikatów ................................................................................................................................................36
Instrukcje podstawiania ..........................................................................................................................................36
Instrukcje warunkowe if .........................................................................................................................................36
Deklaracje zmiennych ............................................................................................................................................37
Instrukcje p tli .......................................................................................................................................................37
Definicje funkcji ....................................................................................................................................................37
Przykładowe skrypty ..............................................................................................................................................38
Super animacja w pasku statusu..............................................................................................................................40
Zadania wiczeniowe .............................................................................................................................................43
Uwagi ko cowe .....................................................................................................................................................46
LITERATURA.........................................................................................................................................................47
CZE
I
Wst p
Strona WWW czyli dokument hipertekstowy HTML jest zwykłym plikiem tekstowym, w którym znajduj si polecenia
j zyka HTML. Dokument taki mo na utworzy za pomoc dowolnego edytora tekstów np. Notatnika, jednak jest to
metoda zbyt uci liwa. Dlatego drug metod jest u ywanie specjalizowanych edytorów, które ułatwiaj tworzenie
dokumentu hipertekstowego. Najbardziej dost pnymi programami do tworzenia stron WWW s np. Kreator stron
WWW w pakiecie MS-Office 97 Professional, FrontPage Express w systemie Windows 98, a ostatnio jest to program
Paj czek zalecany przez Ministerstwo Edukacji Narodowej do u ywania w szkołach.
W niniejszym skrypcie zajmiemy si programowaniem stron WWW w oparciu o mo liwo ci programu Paj czek.
Zasady tworzenia stron WWW
1.
2.
3.
4.
5.
Ka dy temat przyporz dkowujemy jednej stronie.
Struktura witryny powinna by hierarchiczna.
Ka da strona składa si listy tematów (forma menu po lewej stronie okna) oraz tre ci wybranego tematu (po prawej
stronie okienka).
Wybór tematu z listy prowadzi u ytkownika do strony opisuj cej dany temat lub listy podtematów.
Pami taj o korekcie j zykowej tekstów.
Uwagi praktyczne
1.
Jeden temat – jedna strona. Kilka niezbyt przeładowanych stron b dzie si ładowa szybciej ni jedna ogromna
strona.
2. Wiersze tekstu nie powinny by zbyt długie – s one trudne w odbiorze, szczególnie gdy odst p mi dzy nimi jest
zbyt mały. Kontrol szeroko ci akapitu umo liwia znacznik <BLOCKQUOTE>.
3. Oddzielaj fragmenty tekstu znacznikiem <BR>. Pozwoli to na wprowadzenie odrobiny wolnego miejsca.
4. Zachowaj umiar w korzystaniu z pogrubienia i kursywy. Czcionka o małym rozmiarze, pisana kursyw , jest
całkowicie nieczytelna.
5. Unikaj stosowania czcionki podkre lonej, poniewa tekst podkre lony wygl da jak hiperł cze.
6. Nie wyró niaj zwykłego tekstu za pomoc znacznika nagłówka.
7. Definiuj c ł cze unikaj okre lenia „tutaj”.
8. Nie twórz niepotrzebnego tłoku nadmiarem obrazów i kolorów.
9. Parametry rysunków (wielko , ilo kolorów) w formacie GIF powinny zosta tak zoptymalizowane, aby strona
nie ładowała si za wolno, co mo e zniech ci potencjalnego czytelnika.
10. Testuj c strony staraj si u ywa ró nych rozdzielczo ci ekranu, tak aby dobra proporcje optymalne wielko ci
tekstu i rysunków dla ró nych rozdzielczo ci – nie ka dy posiada najnowszy monitor.
11. Sprawd ortografi ! Nawet ortograficzne orły robi bł dy.
Co to jest znacznik?
Polecenie (znacznik, tag) HTML jest specjalnym ci giem znaków obj tym nawiasami ostrymi.
str. 3 z 47
Wszystkie polecenia (znaczniki) steruj wygl dem i zachowaniem si strony WWW. Znaczniki w przegl darce WWW
nie s wy wietlane. S one jedynie interpretowane, tzn. pozwalaj formatowa tekst.
Budowa szkieletu dokumentu
Cały dokument powinien by obj ty par znaczników <HTML> </HTML>. Mi dzy nimi powinna za si znale para
znaczników <HEAD> </HEAD>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny
by obj te z kolei znacznikami <BODY> </BODY> (patrz poni szy przykład).
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<TITLE>Moja strona WWW</TITLE>
</HEAD>
<BODY>
wła ciwa tre (ciało) dokumentu
</BODY>
</HTML>
Stosowanie strony kodowej ISO-8859-2 (czyli ISO Latin 2) powoduje e nasz dokument jest zgodny z Polsk Norm .
Tytuły
Do wprowadzania tytułów w dokumencie słu y polecenie <Hn> </Hn>. Znak H oznacza „header”, natomiast cyfra n to
stopie tytułu (mamy ich sze ). Polecenie wprowadzaj ce tytuł stopnia pierwszego składa si ze znacznika
otwieraj cego <H1> i zamykaj cego </H1>. A oto przykład:
<H1>Witam na mojej stronie</H1>
<H3>Moje zainteresowania</H3>
<H3>Moje sukcesy</H3>
Akapit
Do tworzenia akapitów słu y polecenie <P>, które wstawi interlinie mi dzy poszczególne fragmenty tekstu. Pami taj o
stosowaniu znacznika zamykaj cego </P>.
Przykład:
<P> Wycieczki rowerowe </P>
<P> Biologia i zoologia </P>
Je li chcemy przełama tekst, nie wprowadzaj c przy tym znaku ko ca akapitu, to stosujemy pojedyncze polecenie
<BR>, które przenosi tekst o jeden wiersz w dół, a przy tym nie wprowadza dodatkowej interlinii.
Przykład:
Wycieczki rowerowe <BR>
Biologia i zoologia <BR>
Poziome linie
Aby wstawi poziom lini u ywamy polecenia <HR>.
....
<BODY>
<HR>
<P> Wycieczki rowerowe </P>
<P> Biologia i zoologia </P>
<HR>
<P> I miejsce w Ogólnopolskich Zawodach Strzeleckich z kuszy </P>
</BODY>
....
str. 4 z 47
Listy wypunktowane i numerowane
Aby utworzy list wypunktowan , nale y u y polecenia <UL> </UL>. Poszczególne pozycje listy wprowadzamy za
pomoc polecenia <LI>
Przykład:
<UL>
<LI> Wycieczki rowerowe </LI>
<LI> Biologia i zoologia </LI>
<LI> Muzyka rokowa </LI>
<LI> Rozmowy internetowe </LI>
</UL>
Aby utworzy list numerowan , nale y u y polecenia <OL> </OL>. Poszczególne pozycje listy wprowadzamy za
pomoc polecenia <LI>
Przykład:
<OL>
<LI>I miejsce w Ogólnopolskich Zawodach Strzeleckich z kuszy </LI>
<LI> Zało enie sieci osiedlowej z dost pem do Internetu </LI>
</OL>
Styl czcionki
Style czcionki: pogrubienie (bold), pochylenie (italic) i podkre lenie (underlined) ustawiamy za pomoc nast puj cych
par znaczników: <B></B>, <I> </I>, <U> </U>.
<B> Wycieczki rowerowe </B>
<I>Biologia i zoologia</I>
<U>Muzyka rokowa</U>
Hiperł cza, czyli odsyłacze
Odsyłacze to po prostu ł cza do innych stron, które znajduj si w wiatowej sieci. W trakcie przegl dania strony
WWW klikamy na taki odsyłacz i automatycznie zostaje przeczytana oraz wy wietlona inna strona WWW – w ten oto
sposób za pomoc klikni myszk na odsyłaczach mo na przenosi si do ró nych miejsc w Internecie.
Przykładowy odsyłacz mo e wygl da nast puj co:
<A HREF="http://www.arminius.gdansk.wp.pl">ARMINIUS S.C.</A>
a na ekranie przegl darki:
ARMINIUS S.C.
str. 5 z 47
Inne przykłady:
<a href="http://www.pg.gda.pl">Politechnika Gda ska</a>
<a href="http://www.univ.gda.pl">Uniwersytet Gda ski</a>
<a href="http://www.gdansk.gda.pl">Nasze Miasto Gda sk</a></p>
<a href="ei.html">Elementy informatyki</a></p>
wiczenie nr 1 – Tytuły, listy, odsyłacze
Wykorzystuj c edytor stron HTML Paj czek (lub Notatnik w Windows) do pliku o nazwie Moja strona WWW.html
wpisz nast puj ce znaczniki:
<HTML>
<HEAD>
</HEAD>
<BODY>
<HR>
<UL>
<LI><B> Wycieczki rowerowe </B></LI>
<LI><I>Biologia i zoologia</I></LI>
<LI><U>Muzyka rokowa</U></LI>
</UL>
<HR>
<OL>
<LI> I miejsce w Ogólnopolskich Zawodach Strzeleckich z kuszy </LI>
</OL>
<HR>
<H3>Firma mojego taty:</H3>
</BODY>
</HTML>
Powy szy kod HTML w przegl darce internetowej b dzie wygl dał nast puj co
str. 6 z 47
wiczenie nr 2 – atrybuty czcionek
Teraz w pliku o nazwie Moja strona WWW.html zmie kod HTML tak aby wygl dał nast puj co:
(dodane zostały znaczniki <FONT SIZE=”n”> i <FONT COLOR=”#FF0000”> - kolor czcionki czerwony)
<HTML>
<HEAD>
</HEAD>
<BODY>
<FONT SIZE="3">Teraz przedstawi ...</FONT>
<FONT SIZE="5">moje sukcesy... i zainteresowania....</FONT>
<H3><FONT COLOR="#FF0000">Moje zainteresowania</FONT></H3>
<UL>
<LI><B> Wycieczki rowerowe </B></LI>
<LI><I>Biologia i zoologia</I></LI>
<LI><U>Muzyka rokowa</U></LI>
</UL>
<OL>
<LI> I miejsce w Ogólnopolskich Zawodach Strzeleckich z kuszy </LI>
</OL>
<HR>
<H3>Firma mojego taty:</H3>
</BODY>
</HTML>
str. 7 z 47
Powy szy kod HTML w przegl darce internetowej b dzie wygl dał nast puj co:
Grafika
Oczywi cie oprócz testów strony WWW zawieraj grafik , która czyni je bardziej atrakcyjnymi. Jednak grafik nale y
stosowa z umiarem. Tak zwane graficzne ozdobniki, zwłaszcza gdy nie nios adnych istotnych tre ci s
niepotrzebnym „wodotryskiem”. Na stronach WWW s stosowane dwa formaty bitowych plików graficznych: GIF i
JPG (JPEG) - które s skompresowane, aby zajmowały mniej miejsca a co z tego wynika - ich przesyłanie z serwera
WWW do komputera odbiorcy strony trwało znacznie krócej.
Grafik mo emy wprowadzamy za pomoc polecenia:
<IMG SRC="nazwa_pliku">
Uwaga: gdy plik graficzny (obrazek) znajduje si w tym samym katalogu co dokument, wystarczy poda jego nazw .
Natomiast gdy pliki graficzne s przechowywane w odr bnym katalogu, nale y nazw pliku poprzedzi cie k
dost pu.
Na przykład:
<IMG SRC="../GRAFIKA/ZsbaLogo.gif">
lub
<IMG SRC="C:/Windows/WINLOGO.GIF">
Kolor tła strony
Kolor tła strony mo na ustawi za pomoc parametru BGCOLOR w znaczniku BODY (<BODY
BGCOLOR="kolor">).
wiczenie nr 3 – wstawianie tła strony i obrazów graficznych
Utwórz plik o nazwie Grafika1.html w którym umie
<HTML>
<HEAD>
nast puj cy kod HTML:
str. 8 z 47
<TITLE>Grafika na stronie WWW</TITLE>
</HEAD>
<BODY BGCOLOR="gray">
<FONT SIZE="3">Tutaj b dzie obrazek...</FONT>
<IMG SRC=" C:/Windows/WINLOGO.GIF ">
</BODY>
</HTML>
Powy szy kod HTML w przegl darce internetowej b dzie wygl dał nast puj co:
xx
Za pomoc przedstawionych znaczników mo emy ju budowa proste strony WWW.
CZ
II
Tworzenie stron z ramkami
Celem u ycia ramek jest umieszczenie w jednej ramce spisu tre ci a w drugiej - wywoływanych dokumentów (tak
zawsze spis tre ci był obok aktualnej strony HTML). Wszystkie strony WWW musz by dowi zane do
poszczególnych pozycji spisu tre ci. Ramka przeznaczona na dokumenty mo e by dynamicznie powi kszana lub
zmniejszana za pomoc myszki (je li nie została zablokowana przez autora strony).
Ramki ułatwiaj poruszanie si w wielostronicowych dokumentach HTML, lecz powoduj wolniejsze wczytywanie
stron. Bł dy w konstrukcji dokumentu z wieloma ramkami mog spowodowa dziwne zachowanie strony.
Przegl darki Netscape i Internet Explorer potrafi je obsługiwa , jednak ramki nie nale
i dlatego nie zawsze s stosowane przez autorów stron.
do tzw. standardu HTML 3.2
Konstruowanie ramek
W specjalnej stronie definiujemy liczb , wielko i pozycj ramek oraz zachowanie si innych dokumentów w
momencie uaktywnienia ł cza hipertekstowego. Pozostałe strony, wchodz ce w skład całego, wielostronicowego
dokumentu, s stronami podrz dnymi. Uwaga: na podstawowej stronie nie powinno by adnych znaczników poza
blokiem nagłówkowym <TITLE> oraz definicj samych ramek. Znaczniki <BODY></BODY> s umieszczane w
ramach NOFRAMES i s interpretowane przez przegl darki nie akceptuj ce ramek. Pomi dzy znacznikami
<BODY></BODY> jest umieszczana "bezramkowa" wersja strony.
Para znaczników <FRAMESET> </FRAMESET> jest szkieletem całej konstrukcji i obejmuje bardziej szczegółowe
znaczniki, dotycz ce liczby ramek, podziału strony i wielko ci ramek. Z kolei para znaczników <NOFRAMES>
</NOFRAMES> słu y do wprowadzenia elementów strony, które b d widoczne dla posiadacza przegl darki innej ni
Navigator i Internet Explorer. W przypadku u ywania Navigatora lub Internet Explorera, wszelkie informacje mi dzy
tymi znacznikami zostan zignorowane.
str. 9 z 47
Znacznik <FRAME> słu y do wprowadzenia konkretnej ramki wraz z parametrami ustawiaj cymi zawarto
zagnie d onych stron oraz decyduj cych o tym, czy ramka zawiera suwaki, a tak e definiuj cymi nazw ramki.
Parametry FRAMESET
Parametr COLS="x,y", umieszczany w znaczniku FRAMESET słu y do liczbowego okre lenia szeroko ci ramek
(podajemy je w pikselach lub w procentach szeroko ci strony) np. <FRAMESET COLS="18%,82%">.
Parametr <FRAME SRC="nazwa_pliku.htm"> przypisuje ramce dokument - jako ródło dokumentu nale y poda
cie k dost pu wraz z nazw pliku.
Parametr <FRAME SCROLLING=yes> powoduje wy wietlenie ramki z suwakami.
Parametr <FRAME SCROLLING=no> powoduje wy wietlenie ramki bez suwaków.
Parametr <FRAME SCROLLING=auto> powoduje wy wietlenie ramki z suwakami tylko wtedy, gdy dokument
b dzie wi kszy ni ramka.
Parametr <FRAME NAME="nazwa_ramki"> słu y do nadawania unikalnej nazwy dla ramki w celu ustawienia
punkt odniesienia dla odsyłaczy.
Je li u yjemy parametru <FRAME NORESIZE> to zabezpieczymy ramk przed zmian rozmiaru.
Domy lna posta definicji ramki wygl da nast puj co:
<FRAME SCROLLING=yes NAME="nazwa_ramki" SRC="nazwa_pliku.htm">
Aby zmieni posta kolumnow ramek na wierszow nale y znacznik <FRAMESET COLS="18%,82%"> zamieni
na nast puj cy znacznik <FRAMESET ROWS="18%,82%">.
wiczenie nr 4 - ramki pionowe
Wykonaj poni sz stron WWW wykorzystuj c poprzednio wykonane strony i sprawd czy jej wygl d w przegl darce
jest podobny do przedstawionego w tre ci wiczenia.
Przykład pliku RAMKI1.html
<HTML>
<TITLE>Ramki 1</TITLE>
<FRAMESET COLS="18%,82%”>
<FRAME SCROLLING=&auto;yes" NAME="Grafika na WWW" SRC="Grafika1.html">
<FRAME SCROLLING="auto" NAME="Moja strona WWW" SRC="Moja strona WWW.html">
</FRAMESET>
<NOFRAMES>
<A HREF=" Grafika1.html "> Grafika na WWW </A
<A HREF=" Moja strona WWW.html "> Moja strona WWW </A
</BODY>
</NOFRAMES>
</HTML>
Wygl d pliku RAMKI1.html w przegl darce:
str. 10 z 47
Ramki kolumnowo -wierszowe
Zanim przyst pimy do nast pnego wiczenia stworzymy sze prostych stron WWW o nast puj cych nazwach:
Strona1.html, Strona2.html, Strona3.html, Strona4.html, Strona5.html, Strona6.html.
Najpierw dzielimy stron na wiersze, a nast pnie w drugim i trzecim wierszu deklarujemy dodatkowy podział na
kolumny - trzy w drugim i dwie w trzecim. Odpowiedni kod w pliku Ramki2.html ma nast puj c posta :
<HTML>
<TITLE>Ramki 2</TITLE>
<FRAMESET ROWS=25,*,25>
<FRAME NAME="Strona1" SRC=Strona1.html>
<FRAMESET COLS=30%,*,30%>
</FRAMESET>
<FRAMESET COLS=50%,50%>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<A HREF=" Strona1.html "> Strona1 </A
</BODY>
</NOFRAMES>
</HTML>
wiczenie nr 5 - ramki kolumnowo -wierszowe
Utwórz w pliku Ramki2.html przedstawion wy ej konstrukcj aby otrzyma poni sz posta strony w przegl darce.
str. 11 z 47
Ramki i spis tre ci
Aby wykona witryn internetow zawieraj c dwie ramki – jedn kolumnow po lewej stronie zawieraj c spis stron
WWW , oraz drug ramk po prawej stronie (oczywi cie mo na j nazwa główn ramk ) nale y wykorzysta
znaczniki:
<FRAMESET COLS="25%,*"> - 25% przegl danego obszaru przeznaczamy na spis tre ci
<FRAME SCROLLING="auto" NAME="SPIS TRE CI" SRC="SpisTresci.htm"> - ramka po lewej stronie
<FRAME SCROLLING="auto" NAME="Main" SRC="Main.htm"> - do ramki Main b d ładowane
poszczególne strony wybierane za pomoc odsyłaczy w spisie tre ci.
Spis tre ci (ramka po lewej stronie) to po prostu lista zawieraj ca odsyłacze do odpowiednich stron. Klikni cie na
odsyłaczu b dzie powodowało załadowanie wskazanej w parametrze HREF strony, ale zarazem ładowało j do ramki o
nazwie Main.
Stwórzmy wi c nast puj c konstrukcj :
<A HREF="Strona1.html" TARGET="Main">Strona 1</A>
Parametr HREF="nazwa_ładowanej_strony" dotyczy nazwy pliku, w którym jest zapisana dana strona WWW.
Parametr TARGET="nazwa_ramki" dotyczy docelowego miejsca, do którego ma by załadowana strona.
wiczenie nr 6 – ramki ze spisem tre ci
W pliku Main.html utwórz stron która b dzie pełniła rol twojej strony głównej wy wietlanej na pocz tku.
<HTML>
<HEAD>
<TITLE>Main</TITLE>
</HEAD>
str. 12 z 47
<H1>STRONA GŁÓWNA</H1>
<IMG SRC="INFORMAlogo.jpg">
<IMG SRC="C:/Windows/WINLOGO.GIF">
</BODY>
</HTML>
Nast pnie utwórz w pliku Ramki3.html przedstawion ni ej konstrukcj :
<HTML>
<HEAD>
<TITLE>RAMKI3</TITLE>
</HEAD>
<FRAMESET COLS="20%,*">
<FRAME SCROLLING="auto" NAME="SPIS TRE CI" SRC="SpisTresci.html">
<FRAME SCROLLING="auto" NAME="Main" SRC="Main.html">
<H1>STRONA Z RAMKAMI</H1>
</FRAMESET>
<NOFRAMES>
<H1>STRONA BEZ RAMEK</H1>
<UL>
<LI><A HREF="Strona1.html" TARGET="Main"> Strona1 </A
</UL>
</BODY>
</NOFRAMES>
</HTML>
Nast pnie utwórz w pliku SpisTresci.html przedstawion ni ej konstrukcj :
<HTML>
<HEAD>
<TITLE>Spis Tre ci</TITLE>
</HEAD>
<H3>SPIS TRE CI</H3>
<UL TYPE=SQUARE>
<FONT SIZE="3"><B>
<LI><A HREF="Main.html" TARGET="Main">Strona główna</A>
<LI><A HREF="Strona1.html" TARGET="Main">Strona 1</A>
</B></FONT>
</UL>
str. 13 z 47
</BODY>
</HTML>
W pliku INFORMAlogo.jpg znajduje si rysunek. Je li chcesz mo esz utworzy swój własny rysunek. Pami taj
jednak o zmianie parametru <IMG SRC="nazwa_pliku"> w pliku MAIN.HTML.
Wygl d witryny internetowej składaj cej si z plików: RAMKI3.HTML, MAIN.HTML, SpisTresci.HTML,
Strona1.html, Strona2.html, Strona3.html, Strona4.html, Strona5.html, Strona6.html. b dzie przypominał
poni szy rysunek:
Sprawd czy po klikni ciu na odno niki (tzw. linki) w prawym oknie zostanie wy wietlona odpowiednia strona WWW.
Je li wszystko działa tak jak to sobie zaplanowali my, to znaczy e w przyszło ci b dziesz osi ga sukcesy w sztuce
budowania stron internetowych. Gratulacje!!! :-))))
Animacja Marquee, czyli przesuwaj cy si tekst
Animacja to efektowny napis, który „pływa” w poprzek ekranu. Definiowanie takiego animowanego napisu wygl da
nast puj co:
<MARQUEE>To jest animowany tekst</MARQUEE>
D wi k w tle dokumentu
Aby umie ci w tle strony (dokumentu HTML) d wi k (podkład muzyczny) nale y posłu y si nast puj c
konstrukcj w sekcji HEAD:
<HEAD>
...
<BGSOUND SRC="pinkpant.mid" LOOP="1">
...
</HEAD>
Parametr LOOP okre la jak ma by odtwarzany plik d wi kowy (liczba powtórze d wi ku) podany w parametrze
SRC:
Warto infinite – odtwarzanie bez przerwy
Przykład dla pliku d wi kowego WAV (tylko dla Microsoft IE) <BGSOUND SRC="dzwiek.wav" LOOP=infinite>
str. 14 z 47
Uwaga: Tylko Internet Explorer obsługuje konstrukcj BGSOUND.
Tabele
Ka da tabela składa si z wierzy. Ka dy wiersz składa si z danych.
Znaczniki definiuj ce tabel : <TABLE> </TABLE> (ang. Table – tabela).
Znaczniki definiuj ce pojedynczy wiersz tabeli: <TR> </TR> (ang. Table row – wiersz tabeli).
Znaczniki definiuj ce pojedyncz dan w wierszu tabeli: <TD> </TD> (ang. Table data – dana w wierszu).
Przykład:
<TABLE>
<TR>
<TD>Imi </TD><TD>Nazwisko</TD><TD>Wiek</TD>
</TR>
<TD>Grzegorz</TD><TD>Juszko</TD><TD>20</TD>
<TR>
<TD>Jan</TD><TD>Kowalski</TD><TD>18</TD>
</TR>
<TR>
<TD>Urszula</TD><TD>Kasolik</TD><TD>19</TD>
</TR>
</TABLE>
Wygl d w przegl darce:
Tabel z obramowaniem definiuje si za pomoc nast puj cego znacznika: <TABLE BORDER> </TABLE>
Przykład:
<TABLE BORDER>
<TR>
<TD>Imi </TD><TD>Nazwisko</TD><TD>Wiek</TD>
</TR>
<TD>Grzegorz</TD><TD>Juszko</TD><TD>20</TD>
<TR>
<TD>Jan</TD><TD>Kowalski</TD><TD>18</TD>
</TR>
<TR>
<TD>Urszula</TD><TD>Kasolik</TD><TD>19</TD>
</TR>
</TABLE>
Za pomoc parametru BORDER mo na zmieni wygl d i grubo
przykład na:
<TABLE BORDER=5> lub <TABLE BORDER=10>
str. 15 z 47
obramowania – na
wiczenie nr 7 – tabelka
W pliku tabelka.html utwórz tabelk , która w przegl darce b dzie wygl dała
nast puj co:
CZ
III
Umieszczanie skryptów JavaScript na stronach WWW
Celem u ywania skryptów jest w dokumentach internetowych HTML jest wzbogacenie mo liwo ci stron WWW w
postaci interesuj cych elementów takich jak np. przyciski, formularze, umieszczanie tekstu w wierszu statusu
przegl darki, otwieranie nowego okna bez zamykania okna aktualnego itp.
Jak umie ci skrypt JavaScript w dokumencie HTML?
Aby umie ci skrypt napisany w JavaScript nale y posłu y si znacznikami: <SCRIPT
LANGUAGE=”JavaScript”> </SCRIPT>.
Na przykład, aby wy wietli napis na stronie WWW nale y (wewn trz dokumentu HTML) wpisa do sekcji BODY
nast puj cy skrypt:
<HTML>
<HEAD>
To jest HTML + JavaScript
</HEAD>
str. 16 z 47
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("To jest JavaScript!")
</SCRIPT>
</BODY>
</HTML>
Bardziej skomplikowany skrypt mo e wygl da nast puj co:
<script language="JavaScript">
<!-function go(){
if (document.selecter.select1.options[document.selecter.select1.selectedIndex].value != "none")
{
location = document.selecter.select1.options[document.selecter.select1.selectedIndex].value
}
}
// -->
</script>
<!-document.write('<form name="selecter"><select name="select1" size=1>');
document.write('<option value=none>Wybierz test z listy i kliknij przycisk obok...');
document.write('<option value=none>------------------------------------------------------------------------------');
document.write('<option value="ei_inf_test1.htm">Test nr 1 - Podstawy przetwarzania informacji');
document.write('<option value="ei_inf_test2.htm">Test nr 2 - Podstawy budowy komputera IBM PC');
document.write('<option value="ei_inf_test3.htm">Test nr 3 - Struktura informacji w komputerze');
document.write('<option value="ei_inf_test4.htm">Test nr 4 - System operacyjny Windows');
document.write('<option value="ei_inf_test5.htm">Test nr 5 - Edytory tekstów');
document.write('<option value="ei_inf_test6.htm">Test nr 6 - Arkusze kalkulacyjne');
document.write('</select>');
document.write('<INPUT TYPE="button" VALUE="Uruchom test" onclick="go()">');
document.write('</form>');
// -->
</script>
CZ
IV – ZADANIA SPRAWDZAJ CE
ZADANIE NR 1
*
+ * %!,+ * 2
!"#$%%
$
&
' & (
)
%+ *./,0+ *1+ * "+ */ + *$ + * -+ *!+ *."+ * !"#$%%+
3
1
5
1 '
2
&
'
6
Wykonaj nast puj ce strony WWW:
ZadanieNr1.html – zawieraj c :
W sekcji <HEAD> ..... </HEAD> umie nast puj ce znaczniki:
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
<META HTTP-EQUIV="Creation-date" CONTENT="0000-00-00">
str. 17 z 47
'
4
<META NAME="Description" CONTENT="Zadanie nr 1">
<META NAME="Author" CONTENT="Imi i nazwisko ucznia">
<TITLE>Zadanie nr 1</TITLE>
Tło strony głównej w pliku backgrnd.gif.
Teksty nagłówkowe <H4> .... </H4> : dzisiejsza data, imi i nazwisko autora, symbol klasy i grupy.
Tekst tytułowy na rodku <H1> .... </H1> : Zadanie nr 1.
Linia pozioma.
Obrazek polska.gif na rodku.
Linia pozioma.
NA rodku tekst LISTA HIPERŁ CZY.
Dwa hiperł cza do odnosz ce si : do pliku stronaa.html i do pliku stronab.html.
U ycie obrazka kulka.gif do znaczników hiperł czy.
Tekst animacji typu MARQUEE: To jest zadanie sprawdzaj ce
Tekst wyrównany do prawego marginesu: Strona utworzona w Pracowni Informatyki ZSBA (styl czcionki STRONG).
stronaa.html – zawieraj c :
<META NAME="Description" CONTENT="Strona A">
<TITLE>Strona A</TITLE>
Tło strony głównej w pliku backgrnd.gif.
Teksty nagłówkowe <H4> .... </H4> : imi i nazwisko autora.
Tekst tytułowy na rodku <H1> .... </H1> : Strona A.
Linia pozioma.
Tekst po lewej stronie, pogrubiony: Lista ksi ek o Internecie.
Lista wypunktowana:
Christian Crumlish, Internet dla pocz tkuj cych
Dariusz Boncler, Moje strony WWW
Maria Sokół, Tworzenie stron WWW - wiczenia praktyczne
Michael Sullivan - Trainor, Infostrada
Linia pozioma.
Po lewej stronie tekst LISTA HIPERŁ CZY.
Dwa hiperł cza do odnosz ce si : do pliku ZadanieNr1.html i do pliku stronab.html.
U ycie obrazka kulka.gif do znaczników hiperł czy.
Tekst wyrównany do prawego marginesu: Strona utworzona w Pracowni Informatyki ZSBA (styl czcionki STRONG).
stronab.html – zawieraj c podobne elementy jak stronaa.html, z tym e:
<META NAME="Description" CONTENT="Strona B">
<TITLE>Strona B</TITLE>
Tekst tytułowy na rodku <H1> .... </H1> : Strona B.
Linia pozioma.
Tekst po lewej stronie, pogrubiony: Lista podr czników.
Lista numerowana:
Btyan Pfaffenberger, Słownik terminów komputerowych.
Byron Spinney, Ethernet - Porady praktyczne.
Tomasz Zydorowicz, PC i sieci komputerowe.
H. Małysiak, B. Pochopie , E. Wróbel, Mikrokomputery klasy IBM PC.
Krzysztof Wojtuszkiewicz, Urz dzenia peryferyjne i interfejsy.
Dwa hiperł cza do odnosz ce si : do pliku ZadanieNr1.html i do pliku stronaa.html.
Widok stron WWW:
str. 18 z 47
1.
strona w pliku ZadanieNr1.html:
Uwaga: czas na wykonanie zadania: 2 x 45 minut).
Poprawne wykonanie nast puj cych elementów:
zapisanie plików ZadanieNr1.html, stronaa.html, stronab.html
zapisanie plików (j. w.)+ tło strony, napisy, linie poziome
zapisanie plików (j. w.) + tło strony, napisy, linie poziome + obrazki, animowany
tekst, listy: numerowana i wypunktowana
zapisanie plików (j. w.) + tło strony, napisy, linie poziome + obrazki, animowany
tekst, listy: numerowana i wypunktowana + hiperł cza
2.
strona w pliku stronaa.html:
str. 19 z 47
Ocena:
Dopuszczaj ca
Dostateczna
Dobra
Bardzo dobra
3.
strona w pliku stronab.html:
ZADANIE NR 2
7
$"
8
$"
!"#$%%
8
4
*
+ * %!,+ * *- 9+ *3:"-1 +
1
5
1 '
$
&
' & (
)
%+ *./,0+ *1+ * "+ */ + *$ + * -+ *!+ *."+ * !"#$%%+
2
3
&
'
'
4
2
6
Utwórz dwie strony WWW (pierwsza o nazwie witryna.html, druga o nazwie ei.html).
Uwaga: czas na wykonanie zadania: 2 x 45 minut).
Wskazówki do witryna.html:
1. Spytaj nauczyciela o miejsce przechowywania nast puj cych plików: artus.jpg,
mouse.jpg, muppets.mid, pastel.jpg, poland.gif, zsbalogo.gif.
2. Skopiuj ww. pliki do katalogu w którym b dziesz tworzy strony WWW.
str. 20 z 47
3. W obu plikach HTML zastosuj stron kodow ISO-8859-2: za pomoc znacznika
<META http-equiv="Content-Type"content="text/html; charset=iso-8859-2"> w
sekcji HEAD.
4. Wykonaj stron witryna.html wg nast puj cych wskazówek:
- <title>Zadanie kontrolne z HTML</title>
- podkład muzyczny z pliku muppets.mid jednokrotnie odtwarzanego,
- wstaw logo szkoły po lewej stronie (plik: zsbalogo.gif),
- wstaw tekst () po prawej stronie: Twoje imi , nazwisko, klasa, grupa +
„Gda sk,” + dzisiejsza data,
- tekst ma by pogrubiony,
- wstaw tekst „Moja prywatna witryna” (wycentrowany, wielk. fontu = 5),
- wstaw obrazek (plik poland.gif) – wycentrowany,
- wstaw obrazek (plik artus.jpg) po prawej stronie,
- wstaw tytuł „Moje zainteresowania:” (znacznik H4),
- wstaw list wypunktowan :
• Podró e
• Dyskoteka
•
ycie pod namiotami
• Grafika komputerowa
wstaw tytuł „Nie lubi :” (znacznik H4),
- wstaw list wypunktowan :
1. Głupoty
2. Chamstwa
3. Uczenia si na pami
4. Pacanów
- Wstaw lini poziom ,
- Wstaw tekst przesuwaj cy si poziomo (animacj Marquee): „Zosta
studentem”,
- Wstaw cztery odno niki do nast puj cych adresów URL:
http://www.pg.gda.pl (napis: Politechnika Gda ska)
http://www.univ.gda.pl (napis: Uniwersytet Gda ski)
http://www.gdansk.gda.pl (napis: Nasze Miasto Gda sk)
ei.html (napis: Elementy informatyki)
Widok menu rozwijanego (tylko na ocen celuj c ):
(dot. utworzenia skryptu na ocen celuj c )
Adresy URL w menu:
ei.html (napis: Elementy informatyki)
http://www.pg.gda.pl (napis: Politechnika Gda ska)
http://www.univ.gda.pl (napis: Uniwersytet Gda ski)
http://www.gdansk.gda.pl (napis: Miasto Gda sk)
Wygl d strony WWW witryna.html:
str. 21 z 47
naszym
Wskazówki do ei.html:
1. Wykonaj stron ei.html wg nast puj cych wskazówek:
- <META NAME="Author" CONTENT="Autor dokumentu">
<TITLE>ELEMENTY INFORMATYKI</TITLE>
- wstaw napis po rodku „ELEMENTY INFORMATYKI”,
- wstaw tekst animowany „Zapraszamy na lekcje z elementów informatyki”,
- wstaw obrazek z pliku mouse.jpg.
Wygl d strony WWW ei.html:
Zasady oceniania zadania nr 2
Poprawne wykonanie nast puj cych elementów:
zapisanie plików witryna.html, ei.html.
zapisanie plików (j. w.) + tło strony, napisy, linie poziome.
str. 22 z 47
Ocena:
Dopuszczaj ca
Dostateczna
zapisanie plików (j. w.) + tło strony, napisy, linie poziome + obrazki,
animowany tekst, listy: numerowana i wypunktowana.
animowany tekst, listy: numerowana i wypunktowana + hiperł cza.
animowany tekst, listy: numerowana i wypunktowana + hiperł cza + skrypt
JavaScript obsługuj cy menu.
Dobra
Bardzo dobra
Celuj ca
DODATEK A – ZNACZNIKI HTML
Znaczniki podstawowe
NAZWA
<BODY> .... </BODY>
<A> ..... </A>
<BR>
<BUTTON> .... </BUTTON>
<FORM> .... </FORM>
<FRAME>
<FRAMESET> .... </FRAMESET>
<HEAD> .... </HEAD>
<HR>
<HTML> .... </HTML>
<IMG>
<INPUT>
<LI>
<MENU> .... </MENU>
<OL> .... </OL>
<P>
<SCRIPT> .... </SCRIPT>
<TD> ... </TD>
<TH> .... </TH>
<TITLE> .... </TITLE>
<TR> .... </TR>
<UL> .... </UL>
OPIS
Tre dokumentu
Hiperł cze, zakotwiczenie
Wymuszone złamanie wiersza
Przycisk
Formularz
Ramka
Układ ramek
Nagłówek dokumentu
Linia pozioma
Okre lenie typu dokumentu
Obraz osadzony
Pole formularza
Element listy
Lista menu
Lista numerowana
Akapit
Wyra enia skryptowe
Komórka tabeli
Komórka nagłówka tabeli
Tytuł dokumentu
Wiersz tabeli
Lista wypunktowana
Znaczniki fizyczne
Czcionka pogrubiona
<B> </B>
Przykład:
To jest czcionka pogrubiona (bold)
Czcionka pochylona
<I> </I>
Przykład:
To jest czcionka pochylona (italic)
Czcionka migaj ca
<BLINK> </BLINK>
Przykład:
To jest czcionka migaj ca (blink) - jest to rozszerzenie Netscape'a, nie działa w specyfikacji HTML 4.
Czcionka podkre lona
<U> </U>
str. 23 z 47
Przykład:
To jest czcionka podkre lona (underline)
Czcionka o stałej szeroko ci znaku
<TT> </TT>
Przykład:
To jest czcionka monotypiczna, o stałej szeroko ci znaku (fixed width =
teletype)
Czcionka przekre lona
<STRIKE> </STRIKE>
Przykład:
Czcionka przekre lona
Superskrypt (indeks górny)
<SUP> </SUP>
Przykład:
Czcionka z superskryptem
Subskrypt (indeks dolny)
<SUB> </SUB>
Przykład:
Czcionka z subskryptem
Du a czcionka (+1 punkt)
<BIG> </BIG>
Przykład:
Du a czcionka
Mała czcionka (-1 punkt)
<SMALL> </SMALL>
Przykład:
Mała czcionka
DODATEK B – WYBRANE ELEMENTY JAVASCRIPT
Umieszczanie skryptów w dokumencie HTML
Aby umie ci skrypt w j zyku JavaScript nale y w dokumencie HTML u y nast puj cej konstrukcji:
<SCRIPT LANGUAGE=”JavaScript”>
<!-tutaj powinny zosta umieszczone deklaracje zmiennych, funkcje oraz polecenia j zyka JavaScript
-->
</SCRIPT>
Deklaracje zmiennych
Wj
-
zyku JavaScript istniej nast puj ce typy danych:
tekstowy,
liczbowy,
logiczny
str. 24 z 47
-
null.
Aby zadeklarowa zmienn typu tekstowego nale y przed u yciem tej zmiennej umie ci słowo var, nazw zmiennej
oraz przypisa jej warto pocz tkow uj t w apostrofy podwójne ( rednik ko czy instrukcj ) np.
var tekst = ”To jest warto tekstowa”;
Aby zadeklarowa zmienn typu liczbowego nale y przed u yciem tej zmiennej umie ci słowo var, nazw zmiennej
oraz przypisa jej liczbow warto pocz tkow ( rednik ko czy instrukcj ) np.
var liczba = 123;
Aby zadeklarowa zmienn typu logicznego (true lub false) nale y przed u yciem tej zmiennej umie ci słowo var,
nazw zmiennej oraz przypisa jej warto logiczn ( rednik ko czy instrukcj ) np.
var koniec = false;
Aby zadeklarowa zmienn typu pustego nale y przed u yciem tej zmiennej umie ci słowo var, nazw zmiennej oraz
przypisa jej warto null ( rednik ko czy instrukcj ) np.
var nic = null;
Operatory arytmetyczne, porównania i logiczne
Za pomoc operatorów mo na wykonywa podstawowe operacje arytmetyczne i logiczne takie jak dodawanie,
odejmowanie, mno enie, dzielenie, porównanie lewej strony z praw stron oraz koniunkcja, alternatywa, negacja.
Operatory arytmetyczne
OPERATOR
+
*
/
-++
OPIS
dodawanie liczb
odejmowanie liczb
mno enie liczb
dzielenie liczb
zmniejszenie warto ci o 1
zwi kszenie warto ci o 1
Operatory porównania
OPERATOR
==
<=
>=
!=
<
>
OPIS
czy lewa strona równa jest prawej
czy lewa strona jest mniejsza lub równa prawej
czy lewa strona jest wi ksza lub równa prawej
czy lewa strona jest nierówna prawej
czy lewa strona jest mniejsza od prawej
czy lewa strona jest wi ksza od prawej
Operatory logiczne
OPERATOR
||
&&
!
OPIS
Alternatywa dwóch wyra e
Koniunkcja dwóch wyra e
Zaprzeczenie (negacja wyra enia)
Funkcje
Składnia definicji funkcji wygl da nast puj co:
function nazwa_funkcji (argumenty)
{
...
polecenia JavaScript;
...
return warto _zwracana;
}
str. 25 z 47
Definicja funkcji musi rozpoczyna si słowem kluczowym function. Potem nast puje nazwa funkcji. W nawiasach
okr głych umieszczane s argumenty przekazywane do wn trza funkcji. Je li liczba argumentów jest wi ksza od 1, to
argumenty nale y oddziela przecinkami. Nawias klamrowy { rozpoczyna działanie funkcji, a nawias klamrowy }
ko czy działanie funkcji. Pomi dzy tymi nawiasami umieszcza si polecenia j zyka JavaScript – ka de polecenie
ko czy si rednikiem. Polecenie return warto _zwracana; zwraca konkretn warto funkcji. W przypadku gdy to
polecenie nie zostanie u yte funkcja zwraca warto null.
Przykład funkcji:
function Dzielenie(x,y)
{
var iloraz = 0;
iloraz = x / y;
return iloraz;
}
UWAGA: Funkcje umieszczamy w sekcji <HEAD> .... </HEAD> dokumentu HTML (znaki // oznaczaj komentarz)
np.:
<HEAD>
...
<!-//algorytm zamiany liczby binarnej (cztery bity) na dziesi tn
// Autor: Jerzy Kluczewski
function Bin2Dec()
{
var x3 = 0;
var x2 = 0;
var x1 = 0;
var x0 = 0;
var y = 0;
y = x3*8+x2*4+x1*2+x0;
document.form1.xdec.value = y;
return;
}
...
//-->
</SCRIPT>
</HEAD>
Instrukcja wyboru
Składnia instrukcji wyboru wygl da nast puj co:
if (warunek)
{polecenia JavaScript}
else
{polecenia JavaScript};
Przykład:
if ( y != 0)
{ iloraz = x / y}; }
else
{ alert(‘Nie mo na dzieli przez zero!’); };
Instrukcja p tli
W j zyku JavaScript istniej dwa rodzaje instrukcji p tli:
str. 26 z 47
- for – jest to ci g instrukcji wykonywanych z góry okre lon ilo razy,
- while – jest to ci g instrukcji wykonywanych tak długo jak długo jest spełniony podany warunek.
Składnia instrukcji p tli for ma nast puj c posta :
for (zmienna; warunki; indeks; ) { polecenia JavaScript };
Przykład:
var zmienna = 200;
var krok == 1;
for (krok; krok<101; krok++) { zmienna = zmienna + 1 };
Składnia instrukcji p tli while ma nast puj c posta :
while (warunek) { polecenia JavaScript };
Przykład:
var zmienna = 200;
var krok == 1;
while (krok <=100) { zmienna = zmienna + 1 };
Formularze
Ka dy formularz musi mie swoj nazw nazwa_formularza. Formularz składa si z pól. Ka de pole musi mie swoj
nazw .
Składnia adresu danego pola w formularzu jest nast puj ca: document.forms[”nazwa_formularza”].nazwa_pola;
Aby pola formularza były widoczne w dokumencie HTML nale y u y w sekcji <BODY> .... <BODY> nast puj cego
znacznika:
<FORM NAME=”nazwa_formularza”>
<INPUT TYPE =”text” NAME=”nazwa_pola1” SIZE=”20”>
<INPUT TYPE =”button” NAME=”nazwa_pola2” VALUE=”Naci nij” onClick=”funkcja(argumenty)”>
</FORM>
Parametr pola TYPE okre la jakiego rodzaju dane mog znale si w danym polu formularza. Mog to by pola
tekstowe lub przyciski steruj ce. Ka dy typ pola posiada swoje wła ciwo ci i metody.
Dla pola typu tekstowego „TEXT” mo na okre li nast puj ce wła ciwo ci:
NAME – nazwa pola tekstowego,
VALUE – aktualna zawarto pola,
SIZE – długo pola
Dla pola typu przycisk „BUTTON” mo na okre li nast puj ce wła ciwo ci:
NAME – nazwa przycisku,
VALUE – tekst przycisku,
Metoda onClick – okre la jaka funkcja ma by wywołana po klikni ciu przycisku.
Przydatne funkcje standardowe j zyka JavaScript
Funkcje daty i czasu systemowego
Aby pobra z systemu operacyjnego aktualn dat i czas JavaScript dysponuje nast puj cymi funkcjami:
GetDate, getMonth, getYear, getHours, getMinutes, getSeconds.
Przykład:
var dzisiaj = new Date;
var dzien = dzisiaj.getDate();
var miesiac = dzisiaj.getMonth();
var rok = dzisiaj.getYear();
var godziny = dzisiaj.getHours();
str. 27 z 47
var minuty = dzisiaj.getMinutes();
var sekundy = dzisiaj.getSeconds();
</SCRIPT>
Funkcje: alert, confirm, prompt obsługuj ce okienka dialogowe
Okienka dialogowe czyli okna słu ce do komunikacji strony WWW z u ytkownikiem mog by nast puj ce:
- informacyjne alert,
- potwierdzaj ce (z przyciskami „OK” i „Anuluj”) confirm,
- do wprowadzania danych prompt,
Okienko informacyjne wy wietlane jest za pomoc funkcji alert, której składnia jest nast puj ca:
alert(‘tekst_komunikatu’).
Przykład:
alert(‘Nie wolno dzieli przez zero’);
Okienko potwierdzaj ce obsługiwane jest za pomoc funkcji confirm, której składnia jest nast puj ca:
confirm(‘tekst_komunikatu’). W przypadku naci ni cia przycisku „OK” funkcja confirm zwraca warto
przeciwnym warto false.
Przykład:
if alert(‘Czy na pewno chcesz zamkn okno?’) { window.clos() };
true, a w
Okienko do wprowadzania danych obsługiwane jest za pomoc funkcji prompt, której składnia jest nast puj ca:
prompt(‘tekst_komunikatu’,’domy lna_warto ’). W przypadku naci ni cia przycisku „OK” funkcja prompt zwraca
warto wprowadzon do pola okna, a w przeciwnym warto domy ln .
Przykład:
nazwisko = alert(‘Podaj swoje nazwisko’,’Kowalski’);
Funkcje zwracaj ce dane o przegl darce internetowej
Funkcja navigator.appName zwraca nazw przegl darki.
Funkcja navigator.appVersion zwraca numer wersji przegl darki.
Funkcja navigator.language zwraca wersj j zykow przegl darki.
Przykład:
dokument.write(”Nazwa: ”+navigator.appName+”<BR>”)
dokument.write(”Wersja: ”+navigator.appVersion+”<BR>”)
dokument.write(”J zyk: ”+navigator.language+”<BR>”)
</SCRIPT>
DODATEK C – PRZYKŁADY SKRYPTÓW
Animowany tekst w pasku statusu
W sekcji <HEAD> ... </HEAD> nale y umie ci nast puj cy skrypt:

</script>
Pole tekstowe z zegarkiem
Poni szy skrypt wy wietla cyfrowy zegarek w polu tekstowym:
<script language="javascript">

</script>
str. 29 z 47
<form name="clock" onSubmit="0">
<input type="text" name="face" size="24">
</form>
<script>startclock();</script>
Rozwijane menu w ramce
W sekcji <BODY> ... </BODY> nale y umie ci nast puj cy skrypt:
<!-function go()
{
if
(document.selecter.select1.options[document.selecter.select1.selectedIndex].valu
e != "none")
{
location =
document.selecter.select1.options[document.selecter.select1.selectedIndex].value
}
}
//-->
</script>
<!-document.write('<form name="selecter"><select name="select1" size=1>');
document.write('<option value=none>Wybierz stron WWW...');
document.write('<option value="ei.html">Elementy informatyki');
document.write('<option value="http://www.pg.gda.pl">Politechnika Gda ska');
document.write('<option value="http://www.univ.gda.pl">Uniwersytet Gda ski');
document.write('<option value="http://www.gdansk.gda.pl">Miasto Gda sk');
document.write('</select>');
document.write('<INPUT TYPE="button" VALUE="Go" onclick="go()">');
document.write('</form>');
//-->
</script>
DODATEK D – Podstawy JavaScript
Wst p
J zyk JavaScript (w skrócie JS) jest obiektowym j zykiem interpretowanym przez przegl darki dokumentów HTML i
jest bardzo łatwy do przyswojenia przez ka dego pocz tkuj cego HTML-owca. Dokumenty pisane napisane w HTML z
u yciem JS nazywa si stronami WWW w dynamicznym HTML (DHTML).
Składnia j zyka JS przypomina bardzo składni j zyka C++ oraz w pewnej mierze j zyka Pascal, a wi c wystarczy
mie troch wiedzy na temat tych j zyków oraz du o zapału do tworzenia atrakcyjnych stron WWW.
str. 30 z 47
Dlaczego u ywamy skryptów JS na stronach WWW?
Celem u ywania skryptów jest w dokumentach internetowych HTML jest wzbogacenie mo liwo ci stron WWW w
postaci interesuj cych elementów takich jak np. przyciski, formularze, umieszczanie tekstu w wierszu statusu
przegl darki, otwieranie nowego okna bez zamykania okna aktualnego itp.
Wystarczy wklei odpowiedni kod do swojego dokumentu HTML i wszystko co on potrafi b dzie działa . Poniewa
skrypty s bez adnego kodowania umieszczane w HTMLu mo na skopiowa skrypty z odwiedzanych stron.
Oczywi cie mo e to by naruszeniem praw autorskich, wi c lepiej skorzysta z serwisów oferuj cych skrypty za darmo
do wykorzystania Nie jest jednak naruszeniem praw autorskich analizowanie ciekawych rozwi za i zdobywanie
wiedzy na przykładach - to jest wr cz godne polecenia.
Jednak bezmy lne kopiowanie skryptów nie pozwala w pełni doceni mo liwo ci tego j zyka. Dodatkowo, bez
znajomo ci chocia podstaw nie b dzie mo na znale i poprawi bł dów, ani dostosowa skryptów do własnych
potrzeb. Dlatego warto zapozna si z podstawami JS.
Jak umie ci skrypt JS w dokumencie HTML?
Aby umie ci skrypt napisany w JS nale y posłu y si znacznikiem HTML:
<SCRIPT LANGUAGE=”JavaScript”> </SCRIPT>.
Na przykład, aby wy wietli napis na stronie WWW nale y (wewn trz dokumentu HTML) wpisa do sekcji BODY
nast puj cy skrypt:
<HTML>
<HEAD>
<TITLE>To jest HTML + JavaScript</TITLE>
</HEAD>
<BODY>
document.write("To jest JavaScript!")
</SCRIPT>
</BODY>
</HTML>
Podstawowe elementy JS
Podstawowe elementy j zyka skryptowego JavaScript to: operatory, zdarzenia oraz obiekty.
Operatory
W JS oprócz znanych powszechnie operatorów +, – , *, / , wyst puj nast puj ce operatory1 :
Opis operacji
Dzielenie modulo (reszta z dzielenia)
Podstaw praw stron do lewej
Równa si
Mniejsze od
Wi ksze od
Ró ne od
Wi ksze lub równe
mniejsze lub równe
Nie mniejsze od
1
Symbol
%
=
==
<
>
!=
>=
<=
!<
Operatory stosuje si po prawej stronie znaku „=” (tzw. Instrukcja
podstawiania - do zmiennej ”wynik” wstawiana jest wyliczona warto :
wynik = liczba2 operator liczba2
str. 31 z 47
!>
&&
||
++
--
Nie wi ksze od
Iloczyn logiczny (koniunkcja)
Suma logiczna (alternatywa)
Inkrementacja2
Dekrementacja3
Zdarzenia
JS obsługuje nast puj ce zdarzenia:
Opis zdarzenia
Gdy klikniemy myszk na danym elemencie
Gdy wchodzimy w pole tekstowe
Gdy opuszczamy pole tekstowe
Gdy opuszczamy pole tekstowe, którego zawarto
została
zmieniona
Gdy zawarto
pola formularza zostaje wybrana
Gdy strona jest ładowana
Gdy dana strona jest opuszczana
Gdy wska nik myszy znajdzie si na elemencie
Gdy trzymamy przyci ni ty przycisk myszy na obiekcie
Gdy zwolnimy przycisk myszy na obiekcie
Formalna nazwa
zdarzenia
onClick=
onFocus=
onBlur=
onChange=
onSelect=
onLoad=
onUnload=
onMouseOver=
OnMouseDown=
onMouseUp=
Obiekty i ich wła ciwo ci oraz metody
Obiekty mo na tworzy samemu lub korzysta z gotowych, udost pnianych przez przegl dark , a reprezentuj cych np.
elementy dokumentu HTML. Ka dy obiekt mo e mie swoje własno ci i metody. Własno obiektu zachowuje si jak
zmienna (albo kolejny obiekt), a metoda to nic innego jak funkcja wykonuj ca jak operacj na obiekcie. Własno ci i
metody obiektów wywołuje si nast puj co:
obiekt.własno
obiekt.metoda()
Aby na przykład utworzy obiekt towar o odpowiednich własno ciach nale y napisa poni szy kod:
towar.rodzaj = ”owoce”;
towar.waga = 5.65;
towar.waga.jednostka = "kg";
towar.opakowanie = "skrzynki drewniane";
towar.sprzedany = false;
albo w inny sposób – z u yciem instrukcji with:
with (towar)
{
rodzaj = ”owoce”;
waga = 5.65;
waga.jednostka = "kg";
opakowanie
= "skrzynki drewniane";
sprzedany = false;
}
W JS istnieje bardzo wiele gotowych (tzw. predefiniowanych) obiektów, które s najcz ciej u ywane. Najwa niejsze z
nich to document reprezentuj cy cały dokument HTML, w którym umieszczony jest skrypt oraz window, czyli okno
przegl darki.
2
3
Inkrementacja oznacza zwi kszanie o 1 np. napis zmienna++ jest równoznaczny z zmienna=zmienna+1
Dekrementacja oznacza zmniejszanie o 1 np. napis zmienna-- jest równoznaczny z zmienna=zmienna-1
str. 32 z 47
Predefiniowane obiekty JS
Array
Obiekt Array słu y do tworzenia tablic w dokumentach HTML. Obiekt posiada metody do wykonywania ró nych
operacji na tablicach (np. ł czenie, sortowanie), tak e wła ciwo ci np. do okre lania ich długo ci.
Tworzenie tablic odbywa si według schematu:
Tablica=new Array(pierwszy element, drugi element, ..., ostatni element);
Metody:
METODA
concat
join
pop
push
reverse
shift
splice
sort
OPIS
Ł czy dwie tablice, tworz c now
Ł czy wszystkie elementy tablicy w ła cuch tekstowy
Usuwa ostatni element tablicy
Dodaje jeden lub kilka elementów tablicy
Odwraca kolejno elementów w tablicy
Usuwa pierwszy element tablicy
Dodaje lub usuwa elementy tablicy
Sortuje elementy tablicy
Boolean
Obiekt Boolean słu y do obsługi zmiennych logicznych np. do zamiany warto ci na zmienn logiczn .
Przykłady:
zmienna=new
zmienna=new
zmienna=new
zmienna=new
zmienna=new
Boolean()
Boolean("")
Boolean(false)
Boolean(true)
Boolean(1)
tworzy zmienn
tworzy zmienn
tworzy zmienn
tworzy zmienn
tworzy zmienn
o warto
o warto
o warto
o warto
o warto
ci false
ci false
ci false
ci true
ci true
Obiekt Boolean posiada jedn wła ciwo . Jest ni valueOf. Zwraca ona warto
obiektu Boolean.
Date
Obiekt Date słu y do korzystania z daty i godziny. Nie posiada adnych wła ciwo ci, ale za to oferuje du
metod do manipulowania dat i godzin .
Deklaracja obiektu odbywa si według schematu:
dzisiaj=new Date("rok, miesi c, dzie , godzina, minuta, sekunda"); , gdzie:
rok: liczba wy sza od 1900, miesi c: 0 - 11 (0 - stycze ) , dzie : 1 - 31
godzina: 0 – 23, minuta: 0 – 59, sekunda: 0 - 59
Metody:
METODA
getDate
getDay
getHours
getMinutes
getMonth
OPIS
Zwraca dzie miesi ca
Zwraca dzie tygodnia
Zwraca godzin
Zwraca minut
Zwraca numer miesi ca
str. 33 z 47
liczb
getSeconds
getYear
setDate
setDay
setHours
setMinutes
setMonth
setSeconds
setYear
toGMTString
getTime
setTime
Zwraca sekundy
Zwraca rok
Ustawia dzie miesi ca
Ustawia dzie tygodnia
Ustawia godzin
Ustawia minut
Ustawia numer miesi ca
Ustawia sekundy
Ustawia rok
Zamienia dat na ła cuch
Zwraca ilo milisekund od 1970 r.
Ustawia ilo milisekund od 1970 r.
Math
Obiekt Math reprezentuje funkcje i stałe matematyczne. Jego metody to funkcje trygonometryczne, logarytmiczne,
wykładnicze oraz inne, rzadziej u ywane. Natomiast wła ciwo ci reprezentuj stałe matematyczne.
Wła ciwo ci - stałe matematyczne:
STAŁA
OPIS
E
Stała Eulera
LN10
Logarytm naturalny liczby 10
LN2
Logarytm naturalny liczby 2
LOG10E
Baza logarytmu dziesi tnego
LOG2E
Baza logarytmu o podstawie 2
PI
Liczba PI
SQRT1_2
Pierwiastek kwadratowy z 1/2
SQRT2
Pierwiastek z 2
PRZYBLI ENIE
2.718281828459045
2.30585092994046
0.693147180559945
0.4342944819032518
1.4426950408889634
3.141592653589793
0.7071067811865476
1.414213562373095
Metody:
FUNKCJA
abs(liczba)
cos(alfa)
sin(alfa)
tan(alfa)
acos(alfa)
asin(alfa)
atan(alfa)
exp(x)
log(x)
ceil(x)
floor(x)
log(x)
max(x,y)
min(x,y)
pow(x,y)
random()
round(x)
PRZYKŁAD
Math.abs(-5)
Math.cos(Math.PI)
Math.sin(Math.PI)
Math.tan(0)
Math.acos(1)
Math.asin(0)
Math.atan(1)
Math.exp(1)(0)
Math.log(1)
Math.ceil(8.1)
Math.floor(8.1)
Math.log(1)
Math.max(4,3.9)
Math.min(4,9)
Math.pow(3,3)
Math.random()
Math.round(0.7)
OPIS
Warto bezwzgl dna
Cosinus k ta w radianach
Sinus k ta w radianach
Tangens k ta w radianach
Arcus cosinus k ta w radianach
Arcus sinus k ta w radianach
Arcus tangens k ta w radianach
Zwraca liczb Eulera podniesion do x pot gi
Odwrotno powy szej funkcji
Najmniejsza l. całkowita, niemniejsza od x
Najwi ksza l. całkowita, niewi ksza od x
Odwrotno powy szej funkcji
Zwraca liczb wi ksz z podanych
Zwraca liczb mniejsz z podanych
Liczba x do pot gi y
Zwraca liczb losow z przedziału 0-1
Zaokr glenie x do liczby całkowitej
str. 34 z 47
WYNIK
5
-1
0
0
0
0
0.785398163397448
2.718281828459045
0
9
8
0
4
4
27
0.536296745237586
1
sqrt(x)
Pierwiastek kwadratowy z x
Math.sqrt(81)
9
String
Obiekt String słu y do operacji na ła cuchach tekstowych.
Tworzenie obiektu odbywa si według schematu:
Lancuch = new String(string);
gdzie string jest dowolnym ła cuchem tekstowym
Obiekt String posiada jedn wła ciwo . Jest ni String.length. Zwraca ona długo
ła cucha tekstowego.
Metody:
METODA
anchor("nazwa")
big, blink, bold,fixed,
italics, small, strike, sub, sup
charAt(pozycja)
charCodeAt(pozycja)
indexOf(łancuch1, ła cuch2)
lastIndexOf(łancuch1, ła cuch2)
link
concat(ła cuch2)
split(znak podziału, ilo )
slice(pocz tek, koniec)
substr(pocz tek, długo )
toLowerCase
toUpperCase
OPIS
Definiuje nazw kotwicy
Odpowiednio formatuj tekst
Zwraca znak z okre lonej pozycji
Zwraca kod znaku z okre lonej pozycji
Zwraca pozycj pierwszego wyst pienia ła cucha1 w ła cuchu2
Zwraca pozycj ostatniego wyst pienia ła cucha1 w ła cuchu2
Tworzy odno nik z tekstu
Doł cza ła cuch2 do aktualnego ła cucha
Ła cuch zostaje podzielony na pewn ilo podła cuchów,
przy czym ka dy si ko czy znakiem podziału
Zwraca ła cuch o zadanym pocz tku i ko cu
Zwraca ła cuch o pewnej długo ci i zadanym pocz tku
Zamienia ła cuch na małe litery
Zamienia ła cuch na wielkie litery
Istnieje jeszcze wi cej predefiniowanych obiektów z których najciekawsze to:
Document – reprezentuje aktualnie przegl dany dokument
Wła ciwo ci:
WŁA CIWO
bgColor
fgColor
lastModified
OPIS
Kod koloru tła
Kod koloru głównego elementów
Data ostatniej modyfikacji strony
Metody:
METODA
close()
open()
write(”tekst”)
writeln(”tekst”)
OPIS
Zamyka dokument.
Otwiera dokument.
Umieszcza na stronie ła cuch „tekst” (writeln powoduje e nast pny
element wy wietlany jest w nowej linii).
str. 35 z 47
Navigator – reprezentuje u ywan wła nie przegl dark
Wła ciwo ci:
WŁA CIWO
appName
appVersion
language
OPIS
Nazwa programu przegl darki
Wersja programu przegl darki
J zyk narodowy przegl darki
Metody:
METODA
javaEnabled()
OPIS
Zwraca warto true je li przegl darka obsługuje skrypty Javy, w
przeciwnym razie zwraca false.
Podstawowe konstrukcje u ywane w JS
Podstawowe konstrukcje u ywane w JS to: komentarze, okna dialogowe, okna komunikatu, instrukcje podstawiania,
instrukcje warunkowe, deklaracje zmiennych, p tle, definicje funkcji.
Komentarze:

</SCRIPT>
</HEAD>
<BODY onLoad="startBanner()">
<CENTER><H2>Przykład strony WWW z animacj ± w pasku statusu</H2></CENTER>
</BODY>
</HTML>
str. 42 z 47
Zadania wiczeniowe
Zadanie nr 1
Wykonaj stron WWW zawieraj c poni szy formularz.
Przycisk „Oblicz kwot odsetek” umo liwia rozwi zanie nast puj cego zadania:
Bank komercyjny przyj ł do dyskonta weksel na 1 mln zł przy stopie dyskontowej 10%, a do dnia płatno ci
brakuje jeszcze 36 dni. Jak kwot gotówki otrzyma klient za weksel po potr ceniu kwoty odsetek z tytułu
dyskonta? Bank nabywaj cy weksel (czyli dyskontuj cy weksel) nie płaci jego pełnej kwoty, lecz potr ca z góry
pewn kwot nazywan tak e dyskontem. Kwota nale nych bankowi odsetek liczona jest według wzoru:
D=
W ×%×t
100 × 360
gdzie:
D - kwota odsetek z tytułu dyskonta,
W - suma weksla,
% - stopa dyskonta w skali rocznej,
t - liczba dni upływaj cych do daty płatno ci weksla.
Zadanie nr 2
Wykonaj stron WWW zawieraj c nast puj cy formularz:
Po wpisaniu ci gu znaków w górnym polu tekstowym i naci ni ciu przycisku „Podziel” w dolnych polach tekstowych
powinny wy wietli si dwa ci gi znaków: do jednego ci gu wpisane zostaj znaki o numerach parzystych, do drugiego
– o numerach nieparzystych (chodzi o numery pozycji zajmowanych przez znaki w ci gu).
Zadanie nr 3
str. 43 z 47
Za pomoc dost pnych narz dzi wykonaj stron WWW zawieraj c rysunek strzałki, który b dzie obracany o k t 90°
zgodnie z ruchem wskazówek zegara po ka dym klikni ciu w przycisk „Obró ”. Wykorzystaj odpowiednie programy
do utworzenia rysunków strzałki.
Zadanie nr 4
Wykonaj stron WWW zawieraj c nast puj cy formularz w którym przycisk „Kontrola” powinien kontrolowa , czy
pierwsze trzy pola s puste, a przycisk „Wyczy ” kasuje ww. pola.
Zadanie nr 5
Utwórz stron WWW, która zawiera nast puj cy formularz:
str. 44 z 47
Po wpisaniu warto ci k ta (w stopniach) w pierwszym polu i naci ni ciu przycisku Oblicz w czterech nast pnych
polach powinny pojawi si warto ci funkcji trygonometrycznych dla wprowadzonego k ta np.:
Zadanie nr 6
Wykonaj stron WWW zawieraj c nast puj cy formularz:
Po wpisaniu dwóch liczb w polach oznaczonych x oraz y i naci ni ciu jednego z czterech przycisków w polu
poni ej powinien pojawi si wynik wybranego działania arytmetycznego.
Zadanie nr 7
str. 45 z 47
Wykonaj stron WWW zawieraj c poni szy formularz:
Po wpisaniu ci gu znaków w górnym polu tekstowym i naci ni ciu przycisku „Zmie ” w dolnym polu powinien
pojawi si wprowadzony ci g znaków z zamienionymi literami wielkimi na małe i na odwrót, na przykład:
Uwagi ko cowe
JavaScript to nazwa j zyka programowania opracowanego przez firmy Sun Microsystems i Netscape. Umo liwia on
umieszczanie na stronach WWW aktywnych elementów, takich jak przyciski zmieniaj ce wygl d, gdy przesunie si
str. 46 z 47
nad nimi myszk , tekst przesuwaj cy si w pasku statusu przegl darki czy odsyłacze otwieraj ce nowe okna. To s
najbardziej popularne zastosowania, ale mo na te tworzy bardziej skomplikowane i po yteczniejsze skrypty. JS jest
obsługiwany przez wszystkie (dwie) główne przegl darki, czyli IE (Internet Explorer) i NN (Netscape Navigator), ale
tak e przez niektóre mniej znane, jak np. Opera 3.20. J zyk ten jest tak e stosowany do innych celów, nie zwi zanych
bezpo rednio z przegl dark WWW - w JS mo na pisa ASP (Active Server Pages), mo na go wykorzysta przy
automatyzacji zada w ró nych aplikacjach (np. MS Office, Star Office, czy sam Windows 98).
Warto jednak tu zauwa y , e obsługa JavaScriptu w ró nych przegl darkach nie jest jednakowa, w szczególno ci
Microsoft promuje własne "narzecze", czyli JScript, zgodne z implementacj Netscape'a je li chodzi o same podstawy,
ale rozszerzaj ce funkcjonalno tego j zyka o np. Regular Expressions.
LITERATURA
1.
2.
3.
4.
Maria Sokół. Tworzenie stron WWW – wiczenia praktyczne.
Dariusz Boncler. Moje strony WWW.
Paweł Wimmer. Podr cznik HTML (zainstalowany w Pracowni wraz z Paj czkiem).
Michał Gwó d . Internetowy Kurs JavyScript ( ródło: http://www.ipts.w.pl).
str. 47 z 47

HTML z JavaScript

Transkrypt

Podobne dokumenty

Buty narciarskie HEAD EZON ht 5.0