2 - Jak
tworzyć strony WWW ze skryptami ?
Znaczników
<SCRIPT> i </SCRIPT> używa się do rozpoczęcia i zakończenia pisania
skryptu. Pierwszy z tych znaczników powinien zawierać opcję language z
parametrem JavaScript.
|
Poniższy
przykład pokazuje jak zbudować stronę zawierającą skrypty JavaScipt. Wyjaśnia
do czego służą znaczniki <SCRIPT> i </SCRIPT>
|
<HTML>
<HEAD>
<META
http-equiv="Content-Type" content="text/html;
charset=Windows-1250">
</HEAD>
<BODY
bgcolor="#6FB20F">
<SCRIPT
language="JavaScript">
document.write("<B>Ten tekst
został napisany dzięki JavaScript<B>")
Dzięki poleceniu
document.write("tekst") w skrypcie można wykorzystać instrukcje
języka HTML. Po prostu w miejsce tekst należy wstawić dowolny ciąg instrukcji
HTML, które mają być wykonane w skrypcie.
</SCRIPT>
Ten zaś został napisany w HTML-u
</BODY>
</HTML> Powyższy
przykład obrazuje jak używać języka JavaScript do pisania stron. Został tu
zastosowany bardzo prosty skrypt. Jego instrukcjie są wykonywane bez względu na
reakcje użytkownika. Oczywiście na stronie może występować kilka skryptów i znaczników
<SCRIPT>.
Autor: Michał Gwóźdź
3 -
Definiowanie zmiennych
Zmienne
służą do przechowywania danych. W języku JavaScript są cztery typy danych:
liczby, łańcuchy tekstowe, wartości logiczne (true, false) oraz typ null. Nie
ma konieczności definiowania zmiennych na początku programu. Można je
zdefiniować bezpośrednio przed użyciem.
|
Poniższy
przykład pokazuje do czego służą zmienne, jak je definiować i jak ich
używać
|
<HTML>
<HEAD>
<META
http-equiv="Content-Type" content="text/html;
charset=Windows-1250">
</HEAD>
<BODY
bgcolor="#6FB20F">
<SCRIPT
language="JavaScript">
{ imie="Jacek ";
nazwisko="Kowalski";
tekst=imie+nazwisko;
document.write(tekst) }
</SCRIPT>
</BODY>
</HTML>
|
Imię Jacek
i nazwisko Kowalski zostają
zapamiętane w zmiennych tekstowych 'imie' i 'nazwisko'. Następnie zmienne
te są sumowane i powstaje nowy łańcuch o nazwie tekst. Łańcuch ten zostaje
napisany na ekranie. Warto zauważyć, że podczas pisania skryptów
definowanie zmiennych jak i polecenia oddziela się średnikami.
Autor: Michał Gwóźdź
|
|
4 - Pasek
statusu
Do
operowania nad tekstem statusu służą dwie właściwości obiektu window:
defaultStatus i status. Dzięki DefaultStatus można wyświetlić stały tekst
statusu, zaś dzięki właściwości status można wyświetlać teksty tymczasowe.
|
Poniższy
przykład pokazuje jak można zmieniać domyślny tekst statusu oraz jak
wyświetlić tekst w pasku statusu na pewien czas.
|
<HTML>
<HEAD>
<META
http-equiv="Content-Type" content="text/html;
charset=Windows-1250">
<BODY bgcolor="#6FB20F">
<SCRIPT
language="JavaScript">
defaultStatus="Wjedź na ten
rysunek !";
</SCRIPT>
</HEAD>
<BODY
bgcolor="#6FB20F">
<A
HREF="../przyk/przyk_18.htm"
onMouseOver="window.status='Dziękuję.'; return true">
Zdarzenie onMouseOver wywoływane
jest w momencie najechania myszką na obiekt posiadający obsługę tego
zdarzenia.
<IMG
SRC="../rys/status.gif" border=0></A>
</BODY>
</HTML>
|
Właściwości status najlepiej używać z
procedurami obsługi zdarzeń. Wszystkie zdarzenia zostały dokładnie opisane
w dodatkach.
Autor: Michał Gwóźdź
|
|
5 - Okienka
dialogowe
Są trzy
typy okienek dialogowych:
- okienko informacyjne, które może
służyć jako pomoc dla użytkownika w pewnych sytuacjach. Sposób wywołania: alert("komunikat"), gdzie komunikat jest tekstem wyświetlanym w
okienku.W tym okienku wyświetlany jest tylko przycisk OK.
- okienko z klwiszami OK i Anuluj (lub
Cancel), powodujące zwrócenie wartości true lub false. Sposób wywołania: confirm("komunikat").
- okienko zawierające pole do
wprowadzenia danych. Sposób wywołania: prompt("komunikat","domyślna_wartość"), gdzie domyślna_wartość jest wyświetlana w polu
okienka w czasie jego wywołania.
|
Poniższy
przykład wyjaśnia do czego mogą służyć okienka dialogowe oraz pokazuje,
które okienka należy zastosować do danej sytuacji.
|
<HTML>
<HEAD>
<META
http-equiv="Content-Type" content="text/html;
charset=Windows-1250">
</HEAD>
<BODY
bgcolor="#6FB20F">
<CENTER>
<FORM>
<INPUT type="button"
value="Pokaż adres strony" onClick="alert('Jesteś na
stronie:'+document.URL);">
Zdarzenie onClick wywoływane jest
w momencie naciśnięcia przycisku myszy na obiekcie posiadającym obsługę tego
zdarzenia (zob. dodatki).
Document.URL zwraca adres URL aktualnego dokumentu w przeglądarce.
<P>
<INPUT type="button"
value="Zamknij to okno"
onClick="if (confirm('Czy na
pewno tego chcesz?')) { window.close() }";>
Funkcja window.close() powoduje zamknięcie aktualnego okna.
<P>
<INPUT type="button"
value="Połącz się..." onClick="adres=prompt('Wprowadź adres
strony','http://home.netscape.com'); if (adres!=null)
{location.href=adres}">
Operator != sprawdza czy lewe wyrażenie jest różne od prawego (zob.
dodatki).
Location.href powoduje przejście do strony o podanym adresie.
</FORM>
</BODY>
</HTML>
|
W powyższym przykładzie można zauważyć,
iż okienko alert nie ma wpływu na wygląd strony, czy działanie skryptu.
Dzięki okienkom confirm i prompt można uzależnić wygląd swojej strony od
decyzji lub danych użytkownika.
Autor: Michał Gwóźdź
|
|
6 - Lista
historyczna
Aby
otrzymać adres URL poprzedniej strony z listy historii należy skorzystać z
właściwości previous obiektu history. Adres URL aktualnej i następnej uzyskuje
się zaś dzięki właściwościom current i next. Chcąc jednak przejść do tych stron
trzeba posłużyć się metodą back(), go(0) lub forward() - w zależności od
strony, do której chce się przejść - także obiektu history.
|
Poniższy
przykład pokazuje jak wyświetlać teksty w różnych krojach czcionki. Dzięki
poznanym metodom tworzone strony staną się bardziej czytelne i przejrzyste.
|
<HTML>
<HEAD>
<META
http-equiv="Content-Type" content="text/html; charset=Windows-1250">
</HEAD>
<BODY
bgcolor="#6FB20F">
<FORM NAME="form1">
<INPUT TYPE="button"
VALUE="WSTECZ" onClick="history.back()">
<INPUT TYPE="button"
VALUE="Przeładuj tą stronę" onClick="history.go(0)">
<INPUT TYPE="button"
VALUE="DALEJ" onClick="history.forward()">
</FORM>
</BODY>
</HTML>
|
Metody go(n) można używać także do
wywoływania stron z innych pozycji listy historii. Jeżeli n jest liczbą
ujemną, wtedy wyświetlana jest strona wcześniejsza o n względem aktualnej.
Jeżeli jest liczbą dodatnią - na odwrót. Wyjątkowo przykład do tego kroku
znajduje się pod jego kodem źródłowym. Jeżeli znajdowałby się w nowo
otwartym oknie to jego lista historyczna byłaby pusta.
Autor: Michał Gwóźdź
|
|
7 -
Instrukcja wyboru
Instrukcja
wyboru jest to instrukcja, która w zależności od zadanego warunku wykonuje
odpowiednie poleceia. Oto jej zapis:
if
(warunek) { polecenia } else { polecennia }. Jeśli warunek ma wartość true to zostaną wykonane polecenia z pierwszego nawiasu klamrowego. Jeżeli
zaś warunek ma wartość false to zostaną wykonane polecenia z drugiego nawiasu.
Drugi nawias wraz z instrukcją else można opuścić. Wtedy w przypadku, gdy warunek ma wartość false nie będą wykonywane żadne polecenia
|
Poniższy
przykład pokazuje do czego służy instrukcja wyboru i jak należy z niej
korzystać.
|
<HTML>
<HEAD>
<META
http-equiv="Content-Type" content="text/html;
charset=Windows-1250">
<SCRIPT
language="JavaScript">
wiek=(prompt("Wpisz w poniższe
pole liczbę swoich lat.",""));
napis="";
if (wiek<150) { napis="Dobrze
wyglądasz" };
if (wiek<80) { napis="Jesteś
w pełni wieku" };
if (wiek<50) { napis="Czy nie
jesteś jeszcze za młody na takie rzeczy ?" };
if (wiek<20) { napis="Masz
tyle samo lat co ja !" };
if (wiek<10) { napis="Musisz
jeszcze podrosnąć !" };
if (napis=="")
{napis="Nie oszukasz mie !"};
document.write(napis);
</SCRIPT>
</HEAD>
<BODY
bgcolor="#6FB20F">
</BODY>
</HTML>
|
Po napisaniu liczby lat i naciśnięciu OK
podana wartość zostaje zapamiętana w zmiennej 'wiek'. W zależności od
wartości tej zmiennej, zmienna tekstowa 'napis' przybiera różną wartość.
Zmienna 'napis' jest wypisana w oknie przeglądarki.
Autor: Michał Gwóźdź
|
|
8 - Pętle
Pętla jest
to blok instrukcji wykonywany określoną ilość razy. Można wyróżnić dwa rodzaje
pętli. Pierwszy rodzaj pętli to pętla: for(zmienna; warunki; modyfikacja_indeksu)
{ polecenia }, gdzie
zmienna jest to wartość indeksu pętli, warunki są warunkami zakończenia pętli,
a modyfikacja_indeksu jest wyrażeniem modyfikującym wartość indeksu pętli.
Polecenia znajdujące się w nawiasach klamrowych będą wykonywane dotąd aż indeks
przestanie spełniać warunek. Drugim rodzajem pętli jest pętla: while(warunek) { polecenia }. W tym przypadku polecenia będą wykonywane tak
długo, jak długo warunek jest spełniony.
|
Poniższy
przykład pokazuje jak używać pętli for. Dzięki niemu można zobaczyć do
czego mogą się przydać pętle.
|
<HTML>
<HEAD>
<META
http-equiv="Content-Type" content="text/html;
charset=Windows-1250">
</HEAD>
<BODY
bgcolor="#6FB20F">
<CENTER>Tabliczka mnożenia
<P>
<TABLE border="1">
<SCRIPT
language="JavaScript">
czynnik1=1;
czynnik2=1;
document.write("<TD></TD>");
for
(czynnik1;czynnik1<11;czynnik1++)
Wyrażenie czynnik1++ spowoduje
przypisanie tej zmiennej wartości o jeden większej. Jest to równoważne
zapisowi czynnik1=czynnik1+1. Spis wszystkich operatorów przypisania znajduje
się w dodatkach.
{
document.write("<TD>"+czynnik1+"</TD>");}
czynnik1=1;
for
(czynnik2;czynnik2<11;czynnik2++)
{
document.write("<TR><TD>"+czynnik2+"</TD>");
for (czynnik1;czynnik1<11;czynnik1++)
{ document.write("<TD>"+czynnik1*czynnik2+"</TD>");
}
document.write("</TR>" height=1);
czynnik1=1; }
</SCRIPT>
</BODY>
</HTML>
|
Wywołanie tego przykładu spowoduje
wyświetlenie w oknie przeglądarki tabliczki mnożenia do 100.
Autor: Michał Gwóźdź
|
|
9 - Funkcje
Funkcja to
blok instrukcji, który będzie wykonywany dopiero po jej wywołaniu. Funkcje mogą
zawierać wywołania innych funkcji. Każda funkcja musi zawierać swoją,
niepowtarzającą się nazwę. Funkcje mogą też zawierać argumenty tzn. wartości od
których będzie uzależnione działanie funkcji. Definicję funkcji rozpoczyna się
słowem function:
function
nazwa_funkcji(argumenty)
{ polecenia;
return wartość }
Definicję funkcji należy
umieszczać pomiędzy znacznikami <HEAD> i </HEAD>. Należy
pamiętać, aby argumenty oddzielać przecinkami, a polecenia średnikami.
Polecenie return zwraca konkretną wartość jako wynik działania funkcji. Można
go nie podawać, wtedy funkcja zwróci wartość null.
|
Poniższy
przykład pokazuje jak i w którym miejscu definiuje się funkcje. Przedstawia
również sposób wywołania funkcji z argumentem.
|
<HTML>
<META
http-equiv="Content-Type" content="text/html;
charset=Windows-1250">
<HEAD>
<SCRIPT
language="JavaScript">
function napisz(tekst)
{ odwrotnie="";
dlugosc=tekst.length;
Dlugosc.length jest właściwością
obiektu String. Zwróci ona długość zmiennej tekstowej długosc.
for (dlugosc;dlugosc>0;dlugosc--)
{ odwrotnie=odwrotnie+tekst[dlugosc-1]; }
Zmienna tekst[x] przyjmuje wartość znaku będącego w zmiennej tekst, przy
czym x oznacza pozycję tego znaku w tej zmiennej. Uwaga! Dla pierwszego znaku
zmiennej tekstowej tekst wartość x wynosi 0.
document.forms["wpisz"].pole2.value=odwrotnie;
}
Powyższy zapis spowoduje nadanie jednemu z pól, wartości wcześniej
utworzonego formularza o nazwie wpisz.
</SCRIPT>
</HEAD>
<BODY
bgcolor="#6FB20F">
<FORM name="wpisz">
Wpisz tu jakiś tekst:<BR>
<INPUT type="text"
name="pole1" onChange="napisz(this.value)"><BR>
Zdarzenie onChange zostanie wywołane w momencie zmiany zawartości pola o
nazwie pole1. Dokładny opis wszystkich zdarzeń znajduje się w dodatkach.
Ten tekst napisany od końca wygląda
tak:<BR>
<INPUT type="text"
name="pole2">
</FORM>
</BODY>
</HTML>
|
Jeżeli do pierwszego pola zostanie
wpisany pewien tekst to w poniższym polu ukaże się ten sam tekst napisany
od końca. Zmiana kolejności liter i wyświetlenie tekstu zawarte są w
funkcji napisz(tekst). W powyższym przykładzie można zauważyć, iż nazwy
zmiennych nie mogą zawierać polskich znaków (np. zmienna dlugosc).
Autor: Michał Gwóźdź
|
|
10 - Tablice
Tablice są
zbiorami zmiennych połączonych wspólną nazwą. Zapisanie wartości w tych
zmiennych odbywa się za pomocą indeksów. Tablicę tworzy się według schematu:
tablica =
new Array(wartość_1, wartość_2, ..., wartość_n);
Wartości poszczególnych zmiennych w
tablicy można zmieniać. Np.:
tablica[0]=
wartość_2;
tablica[1]= wartość_5
Dzięki temu do utworzonej
już tablicy można definiować nowe elementy wraz z ich wartościami, a także
utworzyć pustą tablicę w celu późniejszego zdefiniowania jej elementów.
|
Poniższy
przykład pokazuje do czego służą tablice, jak należy je definiować oraz jak
nadawać ich elementom wartości.
|
<HTML>
<META
http-equiv="Content-Type" content="text/html;
charset=Windows-1250">
<HEAD>
<SCRIPT language="JavaScript">
function sortuj()
{wyraz=new Array();
wyraz[0]=document.forms["wyrazy"].wyr1.value;
Dzięki temu zapisowi można odwołać
się do wartości każdego pola formularza.
wyraz[1]=document.forms["wyrazy"].wyr2.value;
wyraz[2]=document.forms["wyrazy"].wyr3.value;
wyraz[3]=document.forms["wyrazy"].wyr4.value;
wyraz[4]=document.forms["wyrazy"].wyr5.value;
wyraz.sort();
Funkcja sort() powoduje alfabetyczne posortowanie elementów w tablicy.
alfab=wyraz[0]+" "+wyraz[1]+"
"+wyraz[2]+" "+wyraz[3]+" "+wyraz[4];
document.forms["wyrazy"].posortowane.value=alfab;
}
</SCRIPT>
</HEAD>
<BODY
bgcolor="#6FB20F">
<FORM name="wyrazy">
Wpisz w te pola jakieś
wyrazy.<BR>
<INPUT type="text"
size="10" name="wyr1">
<INPUT type="text"
size="10" name="wyr2">
<INPUT type="text"
size="10" name="wyr3">
<INPUT type="text"
size="10" name="wyr4">
<INPUT type="text"
size="10" name="wyr5">
<P><INPUT
type="button" value="Gotowe"
onClick="sortuj()">
<P>Wyrazy te w kolejności
alfabetycznej:<BR>
<INPUT type="text"
size="50" name="posortowane">
</FORM>
</BODY>
</HTML>
|
Jeżeli w pięć górnych pól zostaną
wprowadzone wyrazy to po naciśnięciu przycisku "gotowe", w dolnym
polu ukażą się te wyrazy wypisane alfabetycznie.
Autor: Michał Gwóźdź
|
|
11 -
Formatowanie tekstu (rozmiar i kolor)
Do
wyświetlania tekstu w innym niż domyślnym kolorze służy funkcja
tekst.fontcolor(kolor), gdzie rozmiar jest zmienną tekstową, a kolor nazwą
koloru (patrz tablica kolorów w dodatkach). Aby wyświetlić tekst powiększony
lub pomniejszony należy użyć funkcji tekst.fontsize(rozmiar),gdzie rozmiar jest
liczbą z przedziału od 1 do 7. Rozmiar 3 jest rozmiarem domyślnym.
|
Poniższy
przykład pokazuje jak wyświetlać tekst w różnych kolorach i w różnych
rozmiarach. Dzięki poznanym metodom na swoich stronach można umieszczać
bardzo ciekawe efekty.
|
<HTML>
<HEAD>
<META
http-equiv="Content-Type" content="text/html;
charset=Windows-1250">
</HEAD>
<BODY
bgcolor="#6FB20F">
<SCRIPT
language="JavaScript">
kolor=new Array("#00008B",
"#B8860B", "#8B008B", "#FF8C00", "#8B0000",
"#2F4F4F");
imie="Michał";
nazwisko="Gwóźdź";
for (i=0; i<imie.length; i++)
{document.write(imie[i].fontsize(7-i).fontcolor(kolor[i]));}
document.write(" ");
for (i=0; i<nazwisko.length; i++)
{document.write(nazwisko[i].fontsize(7-i).fontcolor(kolor[i]));}
</SCRIPT>
</BODY>
</HTML>
|
Dzięki zastosowaniu pętli każda litera
będzie wyświetlona w innym kolorze i innym rozmiarze. Aby wyświetlić tekst
w jakimś kolorze lub rozmiarze należy funkcję tekst.fontcolor(kolor) lub
tekst.fontsize(rozmiar) użyć razem z funkcją document.write(tekst).
Autor: Michał Gwóźdź
|
|
12 -
Formatowanie tekstu (kroje czcionek)
Aby strony
były bardziej czytelne należy, w zależności od tekstu, zmieniać krój czcionki,
którą jest napisany. W JavaScript robi to się za pomocą schematu:
document.write(tekst.styl()), gdzie tekst jest dowolną zmienną tekstową, zaś styl
jest rodzajem kroju lub formatu czcionki. Można używać następujących stylów:
italics (kursywa), bold (pogrubienie), strike (przekreślenie), sub (indeks
dolny), sup (indeks górny), blink (tekst migający).
|
Poniższy
przykład pokazuje jak wyświetlać teksty w różnych krojach czcionki. Dzięki
poznanym metodom tworzone strony staną się bardziej czytelne i przejrzyste.
|
<HTML>
<HEAD>
<META
http-equiv="Content-Type" content="text/html;
charset=Windows-1250">
</HEAD>
<BODY
bgcolor="#6FB20F">
<SCRIPT
language="JavaScript">
document.write("To jest tekst
pochylony (kursywa)<BR>".italics());
document.write("To jest tekst
pogrubiony<BR>".bold());
document.write("Ten zaś jest
pogrubiony i pochylony<BR>".bold().italics());
document.write("To jest tekst
przekreślony<BR>.strike());
document.write("Tekst w indeksie
dolnym ".sub()+" ABC ");
document.write("Tekst w indeksie
górnym<BR>".sup());
document.write("Ten tekst
miga".blink());
</SCRIPT>
</BODY>
</HTML>
|
Po uruchomieniu przykładu w oknie pokażą
się teksty w różnych krojach czcionek. Ukaże się także tekst, który będzie
migał. Efekt ten będą mogli zobaczyć tylko użytkownicy przeglądarki
Netscape Navigator.
Autor: Michał Gwóźdź
|
|
13 - Liczby
losowe
Korzystanie
z liczb losowych jest dosyć przydatne podczas tworzenia skryptów. Do
generowania liczb losowych służy funkcja Math.random(). Ma ona jednak pewną
wadę ponieważ generuje liczby losowe z przedziału od 0 do 1. Aby otrzymywać
liczby z innych zakresów należy użyć funkcji Math.round(zakres*Math.random()).
Funkcja Math.round służy do zaokrąglenia liczby do najbliższej liczby
całkowitej. Dokładny opis obiektu Math można znaleźć w dodatkach.
|
Poniższy
przykład pokazuje do czego przydatne mogą być liczby losowe i jak je generować.
|
<HTML>
<HEAD>
<META
http-equiv="Content-Type" content="text/html;
charset=Windows-1250">
<SCRIPT>
function sprawdz(liczba)
{licznik++;
if (liczba==moja) {alert("Brawo!
Zgadłeś za "+licznik+" razem");}
if (liczba<moja) {alert("Moja
liczba jest większa");}
if (liczba>moja) {alert("Moja
liczba jest mniejsza");}}
</SCRIPT>
</HEAD>
<BODY
bgcolor="#6FB20F">
<SCRIPT>
licznik=0;
moja=Math.round(1000*Math.random())
</SCRIPT>
Właśnie wylosowałem liczbę z
przedziału od 0 do 1000. Spróbuj zgadnąć jaka to liczba. Po wpisaniu jej w
poniższe pole kliknij na przycisk znajdujący się obok niego.
<FORM name="liczba">
<INPUT type="text"
name="strzal" size="5">
<INPUT type="button"
value="Sprawdź"
onClick="sprawdz(document.forms['liczba'].strzal.value)">
<P>
<INPUT type="button"
value="Jeszcze raz"
onClick="document.forms['liczba'].reset();history.go(0)">
</FORM>
</BODY>
</HTML>
|
Metody go(n) można używać także do
wywoływania stron z innych pozycji listy historii. Jeżeli n jest liczbą
ujemną, wtedy wyświetlana jest strona wcześniejsza o n względem aktualnej.
Jeżeli jest liczbą dodatnią - na odwrót. Wyjątkowo przykład do tego kroku
znajduje się pod jego kodem źródłowym. Jeżeli znajdowałby się w nowo
otwartym oknie to jego lista historyczna byłaby pusta.
Autor: Michał Gwóźdź
|
|
14 -
Formularze
Każde pole
formularza ma swój adres. Aby odnieść się do konkretnego pola w utworzonym już
formularzu należy podać jego adres według schematu:
document.forms["nazwa_formularza"].nazwa_pola . Każde pole formularza
ma kilka właściwości. Na przykład właściwość value zwraca napis przycisku
(element Button) lub tekst napisany w polu tekstowym (element Text). Dokładna
lista właściwości znajduje się w dodatkach.
|
Poniższy
przykład pokazuje jak odnosić się do konkretnych pól formularza oraz jak
zmieniać ich wartości.
|
<HTML>
<HEAD>
<META
http-equiv="Content-Type" content="text/html;
charset=Windows-1250">
<SCRIPT>
function litery(wielkosc)
{if (wielkosc=="duze")
{document.formularz.imie.value=document.formularz.imie.value.toUpperCase()
document.formularz.nazwisko.value=document.formularz.nazwisko.value.toUpperCase()
}
Funkcja toUpperCase() zmienia małe
litery na duże.
else
{ document.formularz.imie.value=document.formularz.imie.value.toLowerCase()
document.formularz.nazwisko.value=document.formularz.nazwisko.value.toLowerCase()
} }
Funkcja toLowerCase() zmienia duże litery na małe.
</SCRIPT>
</HEAD>
<BODY
bgcolor="#6FB20F">
<FORM name="formularz">
Wpisz imię:
<INPUT type="text"
name="imie" size="20"><BR>
Wpisz nazwisko:
<INPUT type="text"
name="nazwisko" size="20"><P>
<INPUT type="button"
value="Duże litery" onClick="litery('duze')">
<INPUT type="button"
value="Małe litery" onClick="litery('male')">
</FORM>
</BODY>
</HTML>
|
Po naciśnięciu na przycisk "Duże
litery" wpisane imię i nazwisko zostanie wyświetlone dużymi literami.
Chcąc zamienić na małe litery należy nacisnąć przycisk "Małe
litery". Użytkownicy przeglądarek w wersji innej niż polska będą mieli
kłopoty przy zamianie polskich liter.
Autor: Michał Gwóźdź
|
|
15 - Data i
czas
Aktualną
datę i czas można poznać dzięki obiektowi Date. Funkcjami umożliwiającymi to
są: getDate(), getYear(), getMonth(), getHours(), getMinutes(), getSeconds().
Metody te wykorzystują datę i czas systemowy więc przy błędnych ustawieniach
aktualna data i czas będzie również błędna. Aby móc korzystać z w/w funkcji należy
utworzyć najpierw zmienną dla daty: zmienna = new Date().
|
Poniższy
przykład pokazuje jak uzyskiwać aktualną datę i czas systemowy.
|
<HTML>
<HEAD>
<META
http-equiv="Content-Type" content="text/html;
charset=Windows-1250">
</HEAD>
<BODY bgcolor="#6FB20F">
<FONT size="4"
color="4b0082">Dzisiejsza data:</FONT><BR>
<SCRIPT
language="JavaScript">
dzisiaj=new Date;
document.write("Dzień:
"+dzisiaj.getDate()+"<BR>")
document.write("Miesiąc:
"+,dzisiaj.getMonth()+1,"<BR>")
document.write("Rok:
"+dzisiaj.getYear()+"<BR>")
document.write("Godzina:
"+dzisiaj.getHours()+":"+dzisiaj.getMinutes()+"<BR>")
</SCRIPT>
</BODY>
</HTML>
|
Warto zauważyć, że JavaScript zwraca
numer miesiąca od 0 do 11. Aby uzyskać więc poprawną datę należy dodać do
numeru miesiąca liczbę jeden. Po uruchomieniu przykładu w oknie zostanie
wyświetlona aktualna data czas.
Autor: Michał Gwóźdź
|
|
16 - Ramki
w dokumencie
Kiedy w
dokumencie są utworzone ramki, można korzystać z funkcji i zmiennych, które są
zdefiniowane w innej ramce niż obecna. Podobnie jak w przypadku pól formularzy
należy podać pewien adres według schematu:
parent.frames["nazwa_ramki"].nazwa_funkcji(), a w przypadku zmiennych
parent.frames["nazwa_ramki"].nazwa_zmiennej.
|
Poniższy
przykład pokazuje jak korzystać z funkcji zdefiniowanych w innych ramkach,
a także jak pobierać wartości zmiennych, które nie są zdefiniowane w ramce
bieżącej.
|
Definicja
ramek <HTML>
<HEAD>
<META
http-equiv="Content-Type" content="text/html;
charset=Windows-1250">
</HEAD>
<FRAMESET
rows="*,20%,20%">
<FRAME
SRC="przyk16a.htm" SCROLLING="no" NAME="r1">
<FRAME
SRC="przyk16b.htm" SCROLLING="no" NAME="r2">
<FRAME
SRC="przyk16c.htm" SCROLLING="no" NAME="r3">
</FRAMESET>
</HTML>
Plik
przyk16a.htm
<HTML>
<HEAD>
<META
http-equiv="Content-Type" content="text/html;
charset=Windows-1250">
</HEAD>
<BODY
bgcolor="#6FB20F">
<FONT size="6">
<SCRIPT
language="JavaScript">
skladnik1=Math.round(1000*Math.random());
skladnik2=Math.round(1000*Math.random());
wynik=skladnik1+skladnik2;
document.write("Jle to jest
"+skladnik1+" + "+skladnik2+" ?");
</SCRIPT>
</BODY>
</HTML>
Plik
przyk16b.htm
<HTML>
<HEAD>
<META
http-equiv="Content-Type" content="text/html; charset=Windows-1250">
</HEAD>
<BODY
bgcolor="#6FB20F">
<FORM
name="dzialanie">
Tutaj wpisz wynik:
<INPUT type="text"
name="suma" size="20"
onChange="parent.frames['r3'].sprawdz()"><BR>
</FORM>
</BODY>
</HTML>
Plik
przyk16c.htm
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=Windows-1250">
<SCRIPT
language="JavaScript">
function sprawdz()
{twoj=parent.frames['r2'].document.forms["dzialanie"].suma.value;
dobry=parent.frames['r1'].wynik
if (twoj==dobry)
{
document.forms["dobry"].poprawny.value="Twoja odpowiedź jest
poprawna" }
else
{
document.forms["dobry"].poprawny.value="Niestety, suma tych
liczb wynosi "+dobry } }
</SCRIPT>
</HEAD>
<BODY
bgcolor="#6FB20F">
<FORM name="dobry">
<INPUT type="text"
name="poprawny" size="50">
<INPUT type="button" value="Jeszcze
raz"
onClick="parent.frames['r1'].history.go(0);document.forms['dobry'].poprawny.value=''">
</FORM>
</BODY>
</HTML>
|
Jeżeli w środkowej ramce zostanie podana
jakaś liczba, to w dolnej ramce zostanie wyświetlony komunikat dotyczący
poprawności wykonania działania znajdującego się w górnej ramce.
Autor: Michał Gwóźdź
|
|