HTML z JavaScript - zst-czest.cba.pl · Strona WWW czyli dokument hipertekstowy HTML jest zwykłym plikiem tekstowym, w którym znajduj si polecenia jzyka HTML. Dokument taki mo na

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.

str. 2 z 47

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. 3 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. Ka�dy temat przyporz�dkowujemy jednej stronie. 2. Struktura witryny powinna by� hierarchiczna. 3. Ka�da strona składa si� listy tematów (forma menu po lewej stronie okna) oraz tre�ci wybranego tematu (po prawej

stronie okienka). 4. Wybór tematu z listy prowadzi u�ytkownika do strony opisuj�cej dany temat lub listy podtematów. 5. 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. 4 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; c harset=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> <H1>Witam na mojej stronie</H1> <HR> <H3>Moje zainteresowania</H3> <P> Wycieczki rowerowe </P> <P> Biologia i zoologia </P> <HR> <H3>Moje sukcesy</H3> <P> I miejsce w Ogólnopolskich Zawodach Strzeleckich z kuszy </P> </BODY> ....

str. 5 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. 6 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> <meta http-equiv="content-type" content="text/html; c harset=iso-8859-2"> <TITLE> Moja strona WWW</TITLE> </HEAD> <BODY> <H1>Witam na mojej stronie</H1> <HR> <H3>Moje zainteresowania</H3> <UL> <LI><B> Wycieczki rowerowe </B></LI> <LI><I> Biologia i zoologia</I></LI> <LI><U> Muzyka rokowa</U></LI> </UL> <HR> <H3>Moje sukcesy</H3> <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> <HR> <H3>Firma mojego taty:</H3> <A HREF="http://www.arminius.gdansk.wp.pl">ARMINIUS S.C.</A> </BODY> </HTML> Powy�szy kod HTML w przegl�darce internetowej b�dzie wygl�dał nast�puj�co

str. 7 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> <meta http-equiv="content-type" content="text/html; c harset=iso-8859-2"> <TITLE> Moja strona WWW</TITLE> </HEAD> <BODY> <H1>Witam na mojej stronie</H1> <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> <H3>Moje sukcesy</H3> <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> <HR> <H3>Firma mojego taty:</H3> <A HREF="http://www.arminius.gdansk.wp.pl">ARMINIUS S.C.</A> </BODY> </HTML>

str. 8 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 grafi cznych Utwórz plik o nazwie Grafika1.html w którym umie�� nast�puj�cy kod HTML: <HTML> <HEAD>

str. 9 z 47

<meta http-equiv="content-type" content="text/html; c harset=iso-8859-2"> <TITLE> Grafika na stronie WWW</TITLE> </HEAD> <BODY BGCOLOR="gray"> <H1>Witam na mojej stronie</H1> <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�� do tzw. standardu HTML 3.2 i dlatego nie zawsze s� stosowane przez autorów stron.

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. 10 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> <BODY BGCOLOR="gray"> <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. 11 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%> <FRAME NAME="Strona2" SRC=Strona2.html> <FRAME NAME="Strona3" SRC=Strona3.html> <FRAME NAME="Strona4" SRC=Strona4.html> </FRAMESET> <FRAMESET COLS=50%,50%> <FRAME NAME="Strona5" SRC=Strona5.html> <FRAME NAME="Strona6" SRC=Strona6.html> </FRAMESET> </FRAMESET> <NOFRAMES> <BODY BGCOLOR="gray"> <A HREF=" Strona1.html "> Strona1 </A <A HREF=" Strona2.html "> Strona2 </A <A HREF=" Strona3.html "> Strona3 </A <A HREF=" Strona4.html "> Strona4 </A <A HREF=" Strona5.html "> Strona5 </A <A HREF=" Strona6.html "> Strona6 </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. 12 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> <A HREF="Strona2.html" TARGET="Main">Strona 2</A> <A HREF="Strona3.html" TARGET="Main">Strona 3</A> <A HREF="Strona4.html" TARGET="Main">Strona 4</A> <A HREF="Strona5.html" TARGET="Main">Strona 5</A> <A HREF="Strona6.html" TARGET="Main">Strona 6</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> <BODY BGCOLOR="gray">

str. 13 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> <BODY BGCOLOR="gray"> <H1>STRONA BEZ RAMEK</H1> <UL> <LI><A HREF="Strona1.html" TARGET="Main"> Strona1 </A <LI><A HREF="Strona2.html" TARGET="Main"> Strona2 </A <LI><A HREF="Strona3.html" TARGET="Main"> Strona3 </A <LI><A HREF="Strona4.html" TARGET="Main"> Strona4 </A <LI><A HREF="Strona5.html" TARGET="Main"> Strona5 </A <LI><A HREF="Strona6.html" TARGET="Main"> Strona6 </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> <BODY BGCOLOR="gray"> <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> <LI><A HREF="Strona2.html" TARGET="Main">Strona 2</A> <LI><A HREF="Strona3.html" TARGET="Main">Strona 3</A> <LI><A HREF="Strona4.html" TARGET="Main">Strona 4</A> <LI><A HREF="Strona5.html" TARGET="Main">Strona 5</A> <LI><A HREF="Strona6.html" TARGET="Main">Strona 6</A> </B></FONT> </UL>

str. 14 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. 15 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> Wygl�d w przegl �darce: Za pomoc � parametru BORDER mo �na zmieni � wygl �d i grubo �� obramowania – na przykład na: <TABLE BORDER=5> lub <TABLE BORDER=10> Wygl�d w przegl �darce:

str. 16 z 47

�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. 17 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">  </script> <script language="JavaScript">  </script>

CZ�� IV – ZADANIA SPRAWDZAJ �CE

ZADANIE NR 1 �� !"#$%%�� $��&�� '� &�(�� )�*��+��*�%!,+��*�-��%+��*./,0+��*1+��*�"+��*/�+��*$�+��*�-+��*!+��*."+��*�!"#$%%+�� 2�� 3��&��'��'� �4��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. 18 z 47

<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�: 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" > <META NAME="Description" CONTENT="Strona A" > <META NAME="Author" CONTENT="Imi � i nazwisko ucznia" > <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: 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" > <META NAME="Description" CONTENT="Strona B" > <META NAME="Author" CONTENT="Imi � i nazwisko ucznia" > <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. 19 z 47

1. strona w pliku ZadanieNr1.html: Uwaga: czas na wykonanie zadania: 2 x 45 minut).

Poprawne wykonanie nast�puj�cych elementów: Ocena: zapisanie plików ZadanieNr1.html, stronaa.html, stronab.html Dopuszczaj�ca zapisanie plików (j. w.)+ tło strony, napisy, linie poziome Dostateczna zapisanie plików (j. w.) + tło strony, napisy, linie poziome + obrazki, animowany tekst, listy: numerowana i wypunktowana

Dobra

zapisanie plików (j. w.) + tło strony, napisy, linie poziome + obrazki, animowany tekst, listy: numerowana i wypunktowana + hiperł�cza

Bardzo dobra

2. strona w pliku stronaa.html:

str. 20 z 47

3. strona w pliku stronab.html:

ZADANIE NR 2 �� 7��$"�� 8�� $"�� !"#$%%�� 8� ��4�� $��&�� '� &�(�� )�*��+��*�%!,+��*�-��%+��*./,0+��*1+��*�"+��*/�+��*$�+��*�-+��*!+��*."+��*�!"#$%%+��*-�9+��*3:"-1�+�� 2�� 3��&��'��'� �4��1 ��5��1 '��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, zsb alogo.gif. 2. Skopiuj ww. pliki do katalogu w którym b �dziesz tworzy � strony WWW.

str. 21 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 � naszym

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. 22 z 47

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: Ocena:

zapisanie plików witryna.html, ei.html. Dopuszczaj�ca zapisanie plików (j. w.) + tło strony, napisy, linie poziome. Dostateczna

str. 23 z 47

zapisanie plików (j. w.) + tło strony, napisy, linie poziome + obrazki, animowany tekst, listy: numerowana i wypunktowana.

Dobra

zapisanie plików (j. w.) + tło strony, napisy, linie poziome + obrazki, animowany tekst, listy: numerowana i wypunktowana + hiperł�cza.

Bardzo dobra

zapisanie plików (j. w.) + tło strony, napisy, linie poziome + obrazki, animowany tekst, listy: numerowana i wypunktowana + hiperł�cza + skrypt JavaScript obsługuj�cy menu.

Celuj�ca

DODATEK A – ZNACZNIKI HTML

Znaczniki podstawowe NAZWA OPIS

<BODY> .... </BODY> Tre�� dokumentu <A> ..... </A> Hiperł�cze, zakotwiczenie <BR> Wymuszone złamanie wiersza <BUTTON> .... </BUTTON> Przycisk <FORM> .... </FORM> Formularz <FRAME> Ramka <FRAMESET> .... </FRAMESET> Układ ramek <HEAD> .... </HEAD> Nagłówek dokumentu <HR> Linia pozioma <HTML> .... </HTML> Okre�lenie typu dokumentu <IMG> Obraz osadzony <INPUT> Pole formularza <LI> Element listy <MENU> .... </MENU> Lista menu <OL> .... </OL> Lista numerowana <P> Akapit <SCRIPT> .... </SCRIPT> Wyra�enia skryptowe <TD> ... </TD> Komórka tabeli <TH> .... </TH> Komórka nagłówka tabeli <TITLE> .... </TITLE> Tytuł dokumentu <TR> .... </TR> Wiersz tabeli <UL> .... </UL> 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. 24 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”>  </SCRIPT>

Deklaracje zmiennych W j�zyku JavaScript istniej� nast�puj�ce typy danych: - tekstowy, - liczbowy, - logiczny

str. 25 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. 26 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> ... <SCRIPT LANGUAGE=" JavaScript " >  </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. 27 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: <SCRIPT LANGUAGE ="JavaScript"> var dzisiaj = new Date; var dzien = dzisiaj.getDate(); var miesiac = dzisiaj.getMonth(); var rok = dzisiaj.getYear(); var godziny = dzisiaj.getHours();

str. 28 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�� true, a w przeciwnym warto�� false. Przykład: if alert(‘Czy na pewno chcesz zamkn� okno?’) { window.clos() }; 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: <SCRIPT LANGUAGE ="JavaScript"> 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 language="JavaScript">  </script>

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

str. 30 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: <script language ="JavaScript" >  </script> <script language ="JavaScript" >  </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. 31 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> <SCRIPT LANGUAGE="JavaScript"> 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 Symbol 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 Operatory stosuje si � po prawej stronie znaku „=” (tzw. Instrukcja podstawiania - do zmiennej ”wynik” wstawiana jest w yliczona warto ��: wynik = liczba2 operator liczba2

str. 32 z 47

Nie wi �ksze od !> Iloczyn logiczny (koniunkcja) && Suma logiczna (alternatywa) || Inkrementacja 2 ++ Dekrementacja 3 --

Zdarzenia JS obsługuje nast�puj�ce zdarzenia:

Opis zdarzenia Formalna nazwa

zdarzenia Gdy klikniemy myszk � na danym elemencie onClick= Gdy wchodzimy w pole tekstowe onFocus= Gdy opuszczamy pole tekstowe onBlur= Gdy opuszczamy pole tekstowe, którego zawarto �� została zmieniona

onChange=

Gdy zawarto �� pola formularza zostaje wybrana onSelect= Gdy strona jest ładowana onLoad= Gdy dana strona jest opuszczana onUnload= Gdy wska �nik myszy znajdzie si � na elemencie onMouseOver= Gdy trzymamy przyci �ni �ty przycisk myszy na obiekcie OnMouseDown= Gdy zwolnimy przycisk myszy na obiekcie 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 Inkrementacja oznacza zwi�kszanie o 1 np. napis zmienna++ jest równoznaczny z zmienna=zmienna+1 3 Dekrementacja oznacza zmniejszanie o 1 np. napis zmienna-- jest równoznaczny z zmienna=zmienna-1

str. 33 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 OPIS concat Ł�czy dwie tablice, tworz�c now� join Ł�czy wszystkie elementy tablicy w ła�cuch tekstowy pop Usuwa ostatni element tablicy push Dodaje jeden lub kilka elementów tablicy reverse Odwraca kolejno�� elementów w tablicy shift Usuwa pierwszy element tablicy splice Dodaje lub usuwa elementy tablicy sort 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 Boolean() tworzy zmienn� o warto�ci false zmienna=new Boolean("") tworzy zmienn� o warto�ci false zmienna=new Boolean(false) tworzy zmienn� o warto�ci false zmienna=new Boolean(true) tworzy zmienn� o warto�ci true zmienna=new Boolean(1) tworzy zmienn� o warto�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�� liczb� 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 OPIS getDate Zwraca dzie� miesi�ca getDay Zwraca dzie� tygodnia getHours Zwraca godzin� getMinutes Zwraca minut� getMonth Zwraca numer miesi�ca

str. 34 z 47

getSeconds Zwraca sekundy getYear Zwraca rok setDate Ustawia dzie� miesi�ca setDay Ustawia dzie� tygodnia setHours Ustawia godzin� setMinutes Ustawia minut� setMonth Ustawia numer miesi�ca setSeconds Ustawia sekundy setYear Ustawia rok toGMTString Zamienia dat� na ła�cuch getTime Zwraca ilo�� milisekund od 1970 r. setTime 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 PRZYBLI�ENIE E Stała Eulera 2.718281828459045 LN10 Logarytm naturalny liczby 10 2.30585092994046 LN2 Logarytm naturalny liczby 2 0.693147180559945 LOG10E Baza logarytmu dziesi�tnego 0.4342944819032518 LOG2E Baza logarytmu o podstawie 2 1.4426950408889634 PI Liczba PI 3.141592653589793 SQRT1_2 Pierwiastek kwadratowy z 1/2 0.7071067811865476 SQRT2 Pierwiastek z 2 1.414213562373095 Metody:

FUNKCJA OPIS PRZYKŁAD WYNIK abs(liczba) Warto�� bezwzgl�dna Math.abs(-5) 5 cos(alfa) Cosinus k�ta w radianach Math.cos(Math.PI) -1 sin(alfa) Sinus k�ta w radianach Math.sin(Math.PI) 0 tan(alfa) Tangens k�ta w radianach Math.tan(0) 0 acos(alfa) Arcus cosinus k�ta w radianach Math.acos(1) 0 asin(alfa) Arcus sinus k�ta w radianach Math.asin(0) 0 atan(alfa) Arcus tangens k�ta w radianach Math.atan(1) 0.785398163397448 exp(x) Zwraca liczb� Eulera podniesion� do x pot�gi Math.exp(1)(0) 2.718281828459045 log(x) Odwrotno�� powy�szej funkcji Math.log(1) 0 ceil(x) Najmniejsza l. całkowita, niemniejsza od x Math.ceil(8.1) 9 floor(x) Najwi�ksza l. całkowita, niewi�ksza od x Math.floor(8.1) 8 log(x) Odwrotno�� powy�szej funkcji Math.log(1) 0 max(x,y) Zwraca liczb� wi�ksz� z podanych Math.max(4,3.9) 4 min(x,y) Zwraca liczb� mniejsz� z podanych Math.min(4,9) 4 pow(x,y) Liczba x do pot�gi y Math.pow(3,3) 27 random() Zwraca liczb� losow� z przedziału 0-1 Math.random() 0.536296745237586 round(x) Zaokr�glenie x do liczby całkowitej Math.round(0.7) 1

str. 35 z 47

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 OPIS anchor("nazwa") Definiuje nazw� kotwicy big, blink, bold,fixed, italics, small, strike, sub, sup

Odpowiednio formatuj� tekst

charAt(pozycja) Zwraca znak z okre�lonej pozycji charCodeAt(pozycja) Zwraca kod znaku z okre�lonej pozycji indexOf(łancuch1, ła�cuch2) Zwraca pozycj� pierwszego wyst�pienia ła�cucha1 w ła�cuchu2 lastIndexOf(łancuch1, ła�cuch2) Zwraca pozycj� ostatniego wyst�pienia ła�cucha1 w ła�cuchu2 link Tworzy odno�nik z tekstu concat(ła�cuch2) Doł�cza ła�cuch2 do aktualnego ła�cucha

split(znak podziału, ilo��) Ła�cuch zostaje podzielony na pewn� ilo�� podła�cuchów, przy czym ka�dy si� ko�czy znakiem podziału

slice(pocz�tek, koniec) Zwraca ła�cuch o zadanym pocz�tku i ko�cu substr(pocz�tek, długo��) Zwraca ła�cuch o pewnej długo�ci i zadanym pocz�tku toLowerCase Zamienia ła�cuch na małe litery toUpperCase 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� OPIS bgColor Kod koloru tła fgColor Kod koloru głównego elementów lastModified Data ostatniej modyfikacji strony Metody:

METODA OPIS close() Zamyka dokument. open() Otwiera dokument. write(”tekst”) writeln(”tekst”)

Umieszcza na stronie ła�cuch „tekst” (writeln powoduje �e nast�pny element wy�wietlany jest w nowej linii).

str. 36 z 47

Navigator – reprezentuje u�ywan� wła�nie przegl�dark� Wła�ciwo�ci:

WŁA�CIWO� OPIS appName Nazwa programu przegl�darki appVersion Wersja programu przegl�darki language J�zyk narodowy przegl�darki Metody:

METODA OPIS

javaEnabled() 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. 43 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:

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

360100

%

×××= tW

D

str. 44 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. 45 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. 46 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. 47 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. Maria Sokół. Tworzenie stron WWW – �wiczenia praktyczne. 2. Dariusz Boncler. Moje strony WWW. 3. Paweł Wimmer. Podr�cznik HTML (zainstalowany w Pracowni wraz z Paj�czkiem). 4. Michał Gwó�d�. Internetowy Kurs JavyScript (�ródło: http://www.ipts.w.pl ).

Documents

HTML z JavaScript - zst-czest.cba.pl · Strona WWW czyli dokument hipertekstowy HTML jest zwykłym plikiem tekstowym, w którym znajduj si polecenia jzyka HTML. Dokument taki mo na