Temat pracy: „Omówić elementy kodu JavaScript i utworzyć trzy skrypty JavaScript”

Polecam: drukarnia
Przejrzyj sobie: Fajną stronę dobrej firmy poligraficznej drukarnia Wrocław.




Prosty program do faktur

 

Temat: „Omówić elementy kodu JavaScript i utworzyć trzy skrypty JavaScript”. 1

Czym jest JavaScript?. 3

Zasady umieszczania kodu JavaScript 3

Komentarze w kodzie Java Script. 5

Instrukcja document.write. 6

Instrukcja warunkowa. 7

Instrukcja przetwarzania warunkowego. 9

Pętle i rekurencje. 9

Obiekty (string, Math, Date i document) 10

Zdarzenia i formularze, oraz elementy. 13


 

Czym jest JavaScript?



      JavaScript to skryptowy język programowania dokumentów internetowych i powstał pod koniec 1995 roku i został opracowany przez firmę Netscape oraz Sun Microsystems. JavaScript jest językiem skryptowym przystosowanym do tworzenia interaktywnych, dynamicznych stron WWW. Skrypty pisane za pomocą JavaScript mogą być umieszczane bezpośrednio w dokumentach HTML, a połączenie tych dwóch języków często jest określane jako DHTML.

      Skrypt umieszczany jest bezpośrednio w dokumencie HTML oraz interpretowany po stronie klienta, zatem istnieje pełny dostęp do źródła skryptu, czyli dopiero po przez przeglądarkę użytkownika. Dzięki temu język JS, jest uniwersalny i może być wykorzystywany we wszystkich systemach operacyjnych. Składnia JS jest podobna do Javy, ale w przeciwieństwie do jeżyka Java, nie nie są one skompilowane - kod źródłowy jest od podstaw interpretowany przez przeglądarkę. Dzięki kompletowi wbudowanych obiektów udostępnianych przez przeglądarkę, JS może komunikować się z użytkownikiem, manipulować zawartością stron, pomagać w nawigacji itp. Pozwala to na interaktywne tworzenie stron WWW, czego zdecydowanie nie można osiągnąć przy pomocy samego języka HTML. Aby rozpocząć naukę języka JavaScript wymagana jest znajomość podstaw języka HTML.

      Po raz pierwszy JavaScript zaimplementowano do pierwszych przeglądarek z rodziny Netscape Navigator, czyli do wersji 2.0 (która z czasem zyskiwała sobie coraz większą popularność) i później także do Internet Explorer 3.0. Późniejsze wersje tego języka już o numerze 1.1 ukazały się tylko w NN3. Następną wersję 1.2 wprowadzono do NN4 oraz IE4. Ostatni wytyczny standard 1.5 implementowany jest w każdej, najnowszej przeglądarce.

 

 

 

Zasady umieszczania kodu JavaScript

 

Kod JavaScript tak jak każdego inengo języka skryptowego jest osadzany w znacznikach HTML znacznikami o nazwie <script> i </script>, należy też dodać że właściwie powinno się od razu podać <script type="text/javascript">

<script type="text/javascript">
kod naszego skryptu
</script>

W zasadzie to taki kod należy umieszczać pomiędzy znacznikami <head></head> niemniej jenak można także osadzać te w dowolnym miejscu naszego dokumentu html/zhtml'a, ale zaleca się ogólnie stosować raczej metodę pierwszą, ponieważ sekcja ta jest wczytywana jako pierwsza. A dlaczego tak należy robić? Ano, dla przykładu.. mamy jakiś dłuuugi dokument, i będzie się on ładował nieco dłużej niż 5 sekund. Jeśli umieścimy nasz kod Java Script w sekcji <head></head> będzie wszystko OK., ale załóżmy że umieścimy ten kod gdzieś przy końcu naszego ładującego się przez dajmy na to 45 sekund kodu html/xhtml'a wtedy pojawi się błąd, jeśli Dominik zechce kliknąć w element, który jest obsługiwany przez nasz skrypt Java Script.

Jak każdy niemalżne rodzaj znacznika, także i znacznik <script> posiada atrybut type, poprzez który deklarujemy język, w którym napisany będzie nasz kod, w tym konkretnym interesującym nas przypadku będzie on przyjmował wartość: text/javascript

Kod HTML strony używającej JavaScript wygląda więc następująco:

<html>
<head>

<script type="text/javascript">
kod skryptu
</script>

<script type="text/javascript">
kod skryptu
/* może być więcej rozgraniczonych znacznikami <script> kodów na jednej stronie */
</script>

</head>
<body>

<script type="text/javascript">
tu - w dowolnym miejscy sekcji BODY - też można umieścić kod źródłowy skryptu
</script>

</body>
</html>

 

Obecnie wielu webmasterów używa w wielu przypadkach napisanego wcześniej kodu java script, tak aby pozbyć się problemu każdorazowego przeszukiwania kodu html/xhrmla pod kątem obecności owego skryptu. Osadzanie takiego skryptu następuje już bez pisania znaczników <script></script>, tylko bezpośrednio osadza się kod w pliku tekstowym i nadaje się mu rozszerzenie .js i zgrywa do jakiegoś folderu na naszym serwerze, załóżmy że będzie to katalog: skrypty. Niby już wszystko, ale jeszcze musimy powiadomić naszą przeglądarkę o tym, gdzie znajduję się nasz skrypt, w tym celu musimy powiadomić naszą przeglądarkę o tym, za pośrednictwem kodu, wykorzystując w tym celu atrybut src:

<script type="text/javascript" src="nazwa_pliku.js"></script>

Nie ma co ukrywać, że metoda ta jest o wiele bardzije wygodna dla osób, które zajmują się tworzeniem stron www, ponieważ est o wiele więcej czasu na inne sprawy, niż pisanie setny raz tego samego kodu, albo szukanie jego źródła w kodzie strony, który ma dajmy na to w skrajnych przypadkach nawet po kilka tysięcy linijek. ;-)

 

 

Komentarze w kodzie Java Script.

 

Nie da się ukryć, że jest to bardzo przydatna rzecz, która nie jednemu czasami potrafi oszczędzić bardzo, bardzo... dużo czasu, podczas gdy trzeba szybko zorientować się w kodzie i odnaleść właściwą nas i interesującą część, stworzoną nawet przed kilku dniami.Komentarze w Java Script nie są niczym nowym, są one integralną częścią każdego języka programowania, poczynając od Pascala, kończąć na takich cudeńkach jakie obecnie narzucają standard jak C#, czy też ASP, mamy dostępne dwa rodzaj komentarze, jeden jest tak zwany liniowy, zaczyna się od ukośników i kończy się na ukośnik. Polega on na tym, że tylko w danej linijce jest wszystko ignorowane, to co jest poniżej i wyżej jest normalnie odczytywane przez przeglądarkę. Drugi rodzaj komentarza, to komentarz blokowy, który rozpoczyna się od /* i kończy na */, może się on ciągnąć przez wiele linijek i dopiero zamknięcie ów nawiasu zamyka także i komentarz.

 

Komentarze są o tyle wygodne, że możemy poinformować przeglądarkę, że dany kod nie jest javą skryptem i nie używając do tego znacznika <noscript>. Spójrzmy teraz na przykłądowy szablon html i jak się on zmieni:

<html>
<head>

<script type="text/javascript">
// Twoja przeglądarka nie obsługuje JavaScriptu.
/* chcesz zobaczyc tą strone, zainstaluj inną przeglądarkę, polecam Mozillę Firefoks... */
<!—ukrywanie kodu przed przeglądarkami nieznanymi

kod skryptu

// koniec ukrywania -->
</script>

</head>
<body>

kod HTML strony

</body>
</html>

W takim przypadku, gdy mamy ten kod powyżej, jeśli przeglądarka obsługuje JavaScript, będzie wiedziała, że pierwsze trzy linie kodu są komentarzami i nie wyświetli ich. W przeciwnym razie, znacznik <script> zostanie zignorowany i wyświetlone zostanie wszystko aż do początku komentarza HTML - czyli <!--.
Momimo iż można stosować i jedno i drugie rozwiązanie, polecam zdecydowanie rozwiązanie ze znacznikiem <noscript>.

 

Instrukcja document.write.

 

Document.write, to jedna z podstawowych komend używanych w składni języka skryptowego java script i nie tylko, jej działanie można zobrazować prostym przykładem i właściwie na tym skończyć jej omawianie, gdyż nie jest ona jakoś bardzo skomplikowana. Dajmy na to, że chcemy na ekranie przy pomocy java script wypisać jakieś zdanie, zróbmy tow ten sposób:

<script type="text/javascript">
 document.write('<B>To jest przykład tekstu napisanego przy pomocy skryptu java</B>');
</script>

Możemy tez zastosować polecenie document.write np. do takiego zastosowania jak wykrywanie rodzaju przeglądarki jaką używa dana osoba odwiedzająca nasz serwis. Może to być o tyle pomocne, że róznie się formatuje rózne szablony stron, pod różne przeglądarki, co jak co operowanie stylami kaskadowymi [1] jest już obecnie dość wygodne, ale czasami zdarza się jednak, że nie damy rady bez nadwyrężenia naszego układu nerwowego dojść do ładu i czasami faktycznie zrobić dwie odrębne skóry pod różne przeglądarki, np. Internet Explorer 6.0 i Firefoksa, oraz Operę 9. Ale spójrzmy na przykład jakim możemy to zrobić, wystarczy użyć polecenia document.write:

document.write("kod html");

no a skrypt jaki sobie użyjemy aby osiągnąć ten efekt z wyborem rodzaju strony z różnym formatowaniem, wygląda mniej więcej tak:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Witaj na stronie sprawdzajacej wersje Twojej przegladarki</a>
<script type="text/javascript">

var rodzajprzegladarki=navigator.appName;

var wersjaprzegladarki=navigator.appVersion;

document.write(""+ rodzajprzegladarki +" w wersji "+

wersjaprzegladarki +"");

</script>

</head>

<body>

<br><br>

Powyżej widać jak± masz wersję przegl±darki<br><br>

</body>

</html>

 
Wstawiając taki kod na stronę nr 1, tj. index.html uzyskamy następujący efekt, otóż.. Pan Dominik szczęśliwy posiadacz 
Firefoksa, ujrzy wersję sformatowaną specjalnie pod użytkowników tej przeglądarki, natomiast jak jest posiadaczem
Internet Explorer'a ujrzy wersję dla użytkowników tejże przeglądarki ;-)

Instrukcja warunkowa

 

Instrukcje generalnie można zapisywać na kilka róznych sposobów, ta o której mówimy występuje niemalże chyba we wszystkich językach programowania. Najbardziej znaną instrukcją jest instrukcja if ... else, wygląda ona np. tak:

if (warunek) {                                                        
   instrukcja1;                                                       
   instrukcja2;
   instrukcja3;                                                       
} else {                                                              
   instrukcja4;                                                       
} 
 
Można to przetłumaczyć „łopatologicznie” mniej więcej tak: „jeśli coś to jest rób coś, ale jeśli coś innego,
to wykonaj coś innego”.
 
Jeżeli mamy tylko jedną instrukcję to możemy, zrobić tak że instrukcje mogą być zagnieżdżane i można
je ująć w klamry wokól bloku { ... } możemy opuścić. Będzie to wyglądać mniej więcej tak:
 
if ((temperatura == "letnia") || (temperatura == "wysoka")) {                  
   alert("Jak kocham taka pogode!");                                      
   confirm("A Ty tez lubisz lato i wiosne?");                                            
} else                                                                
   if (temperatura == "niska")                                       
      alert("Zdecydowanie wolę wiosnę i lato"); 
 
 
Są jeszcze takie instrukcje warunkowe jak while, która jest pętlą cyklicznie wywołującą 
umieszczony w niej kod, pod warunkiem że jest zawsze wartość TRUE:
 
while ((temperatura == "letnia") || (temperatura == "wysoka")) {                  
   alert("Jak kocham taka pogode!");                                      
   confirm("A Ty tez lubisz lato i wiosne?");                                            
} 
 
 

Mamy także funkcję for, która także jest pętlą, może posiadać wewnątrz instrukcję break, oraz continue. W przypadku wykorzystania instrukcji continue przed obliczeniem wartości wyrażenia warunkowego wykonywane jest wyrażenie iteracyjne.

For (wyrazenie_poczatkowe;wyrazenie_warunkowe;wyrazenie_iteracyjne) {

instrukcje }

albo też może wyglądać przykładowo taka pętla:

for (wyrazenie_poczatkowe;wyrazenie_warunkowe;wyrazenie_iteracyjne) {

instrukcje

}

Typy danych Java Script i ich wprowadzenie.

 

Możemy wyróżnić cztery typy danych, są nimi:

 

·         1) liczby - służą do prezentowania wszelkiego rodzaju liczb,

·         2) wartości logiczne - zmienne mogą przyjmować tylko dwie wartości: TRUE i FALSE (prawda i fałsz),

·         3) łańcuchy znaków – są to ciagi znaków pomiędzy cudzysłowiami lub apostrofami, dodać należy że są to dowolne typy znaków,

·         4) wartość NULL – dość nietypowy (specjalny) typ danych, bowiem oznacza po prostu NIC ;-).

·          

Zmienne to konstrukcje programistyczne, które pozwalają nam przechowywać dane. Każda zmienna na swoją nazwę, która ją jednoznacznie identyfikuje.

 

1.     Operacje na zmiennych (arytmetyczne, logiczne i porównania, przypisania, porównania).

 

a)  arytmetyczne: jest to standardowe dodawanie, odejmowanie, mnożenie oraz dzielenie, zapisuje się je w postaci znaków: +, –, *, /.

b)    logiczne i porównania: argumentami tego typu operacji logicznych są wyrażenia posiadające wartość logiczną TRUE or FALSE. Można wyróżnić trzy operatory: logiczne: AND (&&), logiczne OR (||) i — NOT (!) operacja logiczna. AND (iloczyn logiczny) daje zawsze wynik TRUE tylko wtedy, gdy zawsze oba przyjmują wartość TRUE. Logiczne OR daje natomiast wynik TRUE wtedy, gdy przynajmniej jeden z argumentów ma wartość TRUE. Logiczne NOT jest po prostu negacją, tzn. zmienia wartość argumentu na przeciwny; operacja porównania z kolei porównuje dwa argumenty, jeśli się one zgadzają przyjmują wartość TRUE, jeśli natomiast nie zgadzają się, to przyjmują wartość FALSE;

c)    przypisania: operacje tego typu są dwuargumentowe, polega to na tym, że argument z lewej strony, jest przypisany argumentowi z prawej strony i na odwrót, a może raczej w odwrotnej kolejności należałoby powiedzieć :-) Przypisanie wartości najlepiej obrazuje tabelka poniżej [2] :

 

Argument 1

Operator

Argument 2

Znaczenie

X

+=

Y

X = X +Y

X

–=

Y

X = X – Y

X

*=

Y

X = X * Y

X

/=

Y

X = X / Y

X

%=

Y

X = X % Y

X

<<=

Y

X = X << Y

X

>>=

Y

X = X >> Y

X

>>>=

Y

X = >>> Y

X

&=

Y

X = X & Y

X

|=

Y

X = X | Y

X

^=

Y

X = X ^ Y

 

 

d)    operacje na łańcuchach znaków;

e)    operacje na bitach.

 

 

Instrukcja przetwarzania warunkowego

Pętle i rekurencje

 

Pętle są to wyrażenia, które pozwalają nam wykonywać powtarzające się czynności, jak na przykład wpisanie po paredziesiąt razy jakiejś frazy: dajmyna to: LUBIĘ PROGRAMOWAĆ, wtedy też byłoby trochę bezsensem wpisywać to paredziesiąt razy document.write („LUBIE PROGRAMOWAĆ), a wiadomo że lepiej byłoby posłużyć się pętlą, czy to for, czy to while.

 

Pętla for przyjmuje mniej więcej taką konstrukcję:

 

for (wyrażenie inicjujące; wyrażenie posiadające warunek; wyrażenie modyfikujące){

instrukcja/blok instrukcji

}

 

I teraz po kolei: wyrażenie inicjujące służy do zapoczątkowania używanej jako licznik ilości wykonać pętli. Później mamy jakiś warunek, który musi być spełniony aby przejść do kolejnej pętli, jeśli zaś nie zostanie ona spełniona, pętli następnej skrypt nie osiągnie. Końcowe wyrażenie modyfikujące jest używane do modyfikacji zmiennej będącej licznikiem.

 

Pętla while przyjmuje taką budowę jak:

 

while (wyrażenie warunkowe){

blok instrukcji

}

 

Zatem nie trudno zauważyć, że wyrażenie warunkowe musi być spełnione, aby kolejna iteracja mogła być wykonana.

 

Rekurencja to możliwość rozwiązywania w prosty sposób niektórych problemów, ponieważ można dzięki niej wywoływać funkcję przez samą siebie, brzmi to dość skomplikowanie, ale na pewno jakiś jeden mały przykład wszystko zobrazuje. Dla przykładu niech to będzie przykład skryptu, który podnosi liczbę do potęgi:

 

<SCRIPT LANGUAGE = "JavaScript">

<!-- Ukrycie przed przeglądarkami nieobsługującymi JavaScript

function potega (liczba, do_potegi){

if (do_potegi == 0)

return 1;

var temp = liczba;

for (i = 0; i < do_potegi - 1; i++){

liczba = liczba * temp;

}

return liczba;

}

 

// Koniec kodu JavaScript -->

</SCRIPT>

 

 

a teraz ten sam skrypt, tylko że w wersji rekurencyjnej:

 

<SCRIPT LANGUAGE = "JavaScript">

<!-- Ukrycie przed przeglądarkami nieobsługującymi JavaScript

function potega (liczba, do_potegi){

if (do_potegi == 0)

return 1;

else

return (liczba * potega (liczba, do_potegi - 1));

}

// Koniec kodu JavaScript -->

</SCRIPT>

 

Zapis ten jest jak od razu się rzuca w oczy krótszy, a kolejną ważną informacją jest to, że funkcja wywołuje samą siebie za każdym razem, a do momentu aż osiągnie wartość równą zero. Później z kolei jest wzrastająco, aż osiągniemy pierwotną liczbę, którą poddaliśmy potęgowaniu z początku.

 

 

 

Obiekty (string, Math, Date i document)

 

Obiekty posiadają jakieś właściwości, którymi mogą być zmienne Java Script, lub też inne obiekty, z którymi z kolei powiązane są funkcje wykonujące operacje na właściwościach obiektu, które nazywa się metodami. W zasadzie w Java Script wszystko jest obiektem. Dla przykładu jeśli byśmy mieli obiekt o nazwie: zegar, moglibyśmy mu nadać właściwości takie jak: elektroniczny, czarny, drogocenny. Zatem jeśli byśmy chcieli niejako wypełnić nasz obraz, musimy wziąć i wykonać sekwencję instrukcji w stylu:

 

Zegar.elektroniczny = „panasonic”

Zegar.czarny = „skorzany”

Zegar.drogocenny = „urodzinowy”

 

Krótki, ale dość mądrze określający charakter znaczenia obiektów przykład.Wyróżniamy nastepujące rodzaje obiektów

 

 

Obiekt string – służy do przechowywania łańcuchów znaków, posiada tylko jedną właściwość o nazwie lenght, będącą liczbą całkowitą reprezentującą ilość znaków w łańcuchu. Co prawda obiekt ten posiada jedną właściwość, ale nie znaczy to że ma mało zastosowań, ponieważ można tym obiektem wiele zdziałać.

 

Aby zobrazować możliwości jakie daje obiekt string, pozwolę sobie przytoczyć dane tabelaryczne [3] , w których ujęte są metody dodające znaczniki HTML właśnie za pomocą obiektu string:

 

Nazwa metody

Znacznik HTML

Przykład wywołania

Odpowiadający kod HTML

anchor

<A>

napis.anchor
("odnosnik_1")

<ANAME = "odnosnik_1">
przykładowy tekst </A>

big

<BIG>

napis.big()

<BIG> przykładowy tekst </BIG>

blink

<BLINK>

napis.blink()

<BLINK> przykładowy tekst </BLINK>

bold

<BOLD>

napis.bold()

<BOLD> przykładowy tekst </BOLD>

fixed

<TT>

napis.fixed()

<TT> przykładowy tekst </TT>

fontcolor

<FONT>

napis.fontcolor("red")

<FONT COLOR = "red">
przykładowy tekst </FONT>

fontsize

<FONT>

napis.fontsize("wielkość")

<FONT SIZE = "wielkość">
przykładowy tekst </FONT>

italics

<I>

napis.italics()

<I> przykładowy tekst </I>

link

<A>

napis.link
("http://www.helion.pl")

<AHREF = "http://www.helion.pl"> przykładowy tekst </A>

small

<SMALL>

napis.small()

<SMALL> przykładowy tekst </SMALL>

strike

<STRIKE>

napis.strike()

<STRIKE> przykładowy tekst </STRIKE>

sub

<SUB>

napis.sub()

<SUB> przykładowy tekst </SUB>

Sup

<SUP>

napis.sup()

<SUP> przykładowy tekst </SUP>

 

Jak nie trudno się domyśleć, korzystając z tych metod można napisać jakiś skrypt formatujący nasz tekst na stronie internetowej, dla przykładu wstawiając taki kod java script w tekst html/xhtml'a:

 

<SCRIPT LANGUAGE = "JavaScript">

var jakistekst = "Cześć! Jesteś właśnie na stronie z kursem java script<BR><BR>"

document.write (jakistekst);

document.write (jakistekst.bold().fontcolor("green"));

document.write (jakistekst.italics());

document.write (jakistekst.fixed());

document.write (jakistekst.fontcolor("green"));

document.write (jakistekst.italics().fixed().bold().link("http://javascript.vj.e.pl"));

</SCRIPT>

 

 

Kod ten pozwala na wypisanie na naszej stronie internetowej tekstu, w różnych rodzajach formatowania, z pogrubieniem, pochyleniem, odpowiednim nas interesującym kolorem itp. Można ten sam efekt oczywiście osiągnąć stosując style kaskadowe [4] albo zwykłe stare formatowanie, które co prawda już wyszło ze standardów, ale jednak można powiedzieć że sporo osób sobie z tym jeszcze radzi, dajmy na to, że ostatnią linijkę naszego kodu java script dałoby radę zapisać tak:

 

<a href=”http://javascript.vj.e.pl” >"><I><B><TT> Cześć! Jesteś właśnie na stronie z kursem java script <?TT></B></I></a>

 

Obiekt Mathjak sama nazwa wskazuje jest to obiekt, którego egzystencja jest związania z matematyką i działaniami matematycznymi, oraz umożliwia rozwiązywanie różnych działań matematycznych, obiekt ten udostępnia nam podstawowe funkcje i stałe trygonometryczne.

 

Możemy wyróżnić następujące właściwości obiektu Math:

 

e, ln2, ln10, log2e, log10e, p1, sqrt1_2, sqrt2

 

Oraz następujące właściwości:

 

abs

 

Wartość bezwzględna argumentu

 

sin, cos, tan

 

Standardowe funkcje trygonometryczne; argumenty w radianach 

 

acos, asin, atan, atan2

 

Odwrotne funkcje trygonometryczne; zwracają wartość w radianach 

 

exp, log

 

Wykładniczy i naturalny logarytm, podstawą jest e

 

ceil

 

Zwraca najmniejszą liczbę całkowitą większą bądź równą argumentowi

 

floor

 

Zwraca największą liczbę całkowitą mniejszą bądź równą argumentowi

 

min, max

 

Zwraca większą lub mniejeszą (jedną z podanych) z dwóch argumentów

 

pow

 

Wykładniczy; pierwszy argument jest podstawą, drugi jest wykładnikiem

 

random

 

Zwraca przypadkową liczbę pomiędzy 0 i 1.

 

round

 

Zwraca argumenty najbliższe liczbie całkowitej

 

sqrt

 

Zwraca pierwiastek kwadratowy argumentu

 

Chyba niczego nie pominąłem ;-)

 

 

 

Zdarzenia i formularze, oraz elementy

 

Bardzo ważnym przy tworzeniu dynamicznych stron internetowych jest działanie na zdarzeniach, ponieważ wywoływanie poleceń i funkcji przed załadowaniem się dokumentu to nie jest wszystko i nie zdecydowanie nie pozwoli nam to, na stworzenie dobrze działającej dynamicznej strony internetowej.

 

Pierwszym podstawowym zdarzeniem jest zdarzenie onLoad, które następuje po załadowaniu się dokumentu, można to wstawić w tagu <body> i wygląda to w następujący sposób:

 

<BODY onLoad="jakasinstrukcja1; jakasinstrukcja2; jakasinstrukcja_n">

 

Możemy też użyć zdarzenia onUnload, następuje ono w momencie opuszczenia strony, jest to dość często stosowana sprawa przy umieszczaniu reklam na stronie internetowej, bowiem w momencie zamykania witryny jeszcze zdąży nam wyskoczyć okienko z jakąś przekonują, albo i też nie reklamą np. proszku do prania, alvbo super giga wypasionego hostingu. ;-)

 

Następną grupą zdarzeń są zdarzenia dajmy na to, związane z kursorem naszej myszki:

 

a) onClick - zdarzenie następuje podczas kliknięcia na dany element strony,
b) onMouseOver - najechanie kursorem na element,

c) onMouseMove - poruszanie kursorem nad elementem,
d) onMouseUp - zwolnienie przycisku myszy nad elementem,
e) onMouseOut - zjechanie kursora z elementu,

f)     onMouseDown - wciśnięcie przycisku myszy nad elementem.

 

Są tez ponadto zdarzenia związane z działaniem klawiatury, oraz jeszcze rózne inne, wymienię je w kolejności poczynająć od zdarzeń klawiaturowych:

 

a)    onFocus - gdy na elemencie pojawia się zaznaczenie (focus)

b)    onBlur - gdy element traci zaznaczenie

c)    onSubmit – zdarzenie następuje przy wysłaniu formularza,

d)    onReset – zdarzenie następuje przy resetowaniu formularza,

e)    onSelect - zaznaczenie tekstu w polu tekstowym

f)    onChange - tekst ulega zmianie w polu tekstowym

 

Kolejną sprawą są formularze, bez nich nie dałoby się zbudować schludnie wyglądającej strony internetowej. Java Script jest o tyle elastyczna, że umożliwia dostęp do danych w formularzu, oraz manipulację zawartością pól.

 

Dostęp do pola formularza możemy uzyskać wpisując:

document.forms["nazwa_naszego_formularza"].nazwa_danego_pola;

Należy pamiętać jednak, że każde pole musi mieć atrybut NAME, bez tego bowiem nie będzie mowy o możliwości odwołania się do danego pola później. Wygląda to w następujący sposób:

<FORM NAME="naszformularz">
<INPUT TYPE="text" NAME="nazwa_pola_nr_1">
<INPUT TYPE="text" NAME="nazwa_pola_nr_2">

<INPUT TYPE="text" NAME="nazwa_pola_nr_3">

<INPUT TYPE="text" NAME="nazwa_pola_nr_4">

itp
</FORM>

 

A teraz taki prosty przykład, załóżmy że chcemy wczytać pole nr 4 do zmiennej o nazwie „naszazmienna” wtedy wpisujemy taki fragment kodu:

 

naszazmienna = document.naszformularz.nazwa_pola_nr_4.value;

 

 

 

 

Okna, ramki, ciasteczka

 

Okna przeglądarki internetowej mogą być manipulowane także za pomocą java scriptu, służy nad do tego obiekt window, dzięki któremu możemy otworzyć nowe okno za pomocą metody open umożliwiają nam otwarcie tego okna, wygląda to mniej więcej tak:

 

jakastamzmienna = window.open ("URL", "nazwa_naszego_okna_przeglądarki", ["właściwość_okna_naszej_przeglądarki"])

 

jakastamzmienna identyfikować będzie nam nasze nowo otwarte okno, URL wskazuje adres, który ma być w nim otwarte np. www.wp.pl, nazwa_naszego_okna_przeglądarki, to jest parametr dzięki któremu otworzymy okno w znaczniku <FRAME> nadając mu target=” nazwa_naszego_okna_przeglądarki”, oraz mamy jeszcze „właściwość_okna_naszej_przeglądarki”, tego nie muszę chyba już tłumaczyć, ale chodzi tutaj wiadomo o wysokość, szerokośc naszego otwartego okna, są to parametry standardowe.

 

 

Kolejna sprawa to ramki. Jak już pewnie wiadomo każdemu służą one do dzielenia zawartości strony, choć na pewno nie są one już powszechnie używane, bowiem każdy odszedł od tego typu dzielenia treści na stronie (np. stworzenie na stronie jakiegoś menu po lewo) na rzecz div'ów, które sa wynalazkiem takiego dobrodziejstwa jakim są CSS [5] , które sobie wielce chwalę od pewnego czasu :-) W każdym razie na pewno w jakichś sieciach intranetowych i na stronach, które są tworzone w celu zarządzania nimi, ramki nadal pewnie mogą spełniac doskonale swoje zadania i dla rozwiązań internetowych też sporo jeszcze takich stronek się widuje, w szczegolności u mniej wprawnych (czyt. Początkujących) webmasterów, no ale do rzeczy.

 

Za przykład weźmy sobie jakieś menu oparte o ramki na stronie internetowej, możemy je stworzyć przy użyciu starego polecenia pamiętającego jeszcze czasy HTML 3.2, a więc <frameset>, stwórzmy zatem sobie jakieś przykładowe menu:

 

<frameset

rows = ”liczba wierszy”

cols = ”liczba kolumn”

[onLoad = ” obsluga zdarzenia i jej procedura”]

[onUnload = ”obsluga zdarzenia i jej procedura”]>

[<FRAME SRC = ”URL” NAME = ”nazwa naszej ramki”>]

</frameset>

 

A sktruktura dokumentu będzie np. taka:

 

 

<html>

<head>

<title>Nazwa naszej strony</title>

<meta tagi...>

Treść nagłówka nr 1

</head>

<frameset>

Treść dokumenty dla przeglądarek, które obsługują ramki

</frameset>

<noframes>

<body>

A to się pokaże komuś, jeśli ma przeglądarke nieobsługującą ramek

</body>

</noframes>

</html>

 

Oczywiście są jeszcze inne parametry, takie jak src, scrolling, noresize i inne, ale wykracza to poza ramy tego mojego skromnego opracowania, zatem odeślę może na stronę jakiegoś kursu HTML/XHTML [6] , albo może i nie, w google.pl jest sporo informacji na ten temat i można łatwo wiedzę poszerzyć.

 

Ciasteczka służą do przesyłania informacji między przeglądarką a serwerem, oraz do zapamiętywania informacji, które mogą byś składowane w naszej przeglądarce przez nawet bardzo dlugi okres czasu, w zależności od ich żywotności, bo są takie które mogą u nas „siedzieć” parę dni, albo tez mogą być takie, które będą siedzieć cały czas. Ciasteczka są instalowane w zasadzie tylko za pierwszym razem, kiedy wchodzimy na daną stronę internetową, a potem możemy tylko z nich korzystać, tj. nasza przeglądarka może. Niektóre ciasteczka mogą też być bardzo niebezpieczne, jeśli ktoś jest odpowiednio spreparuje może nawet wyciągnąć od nas bardzo poufne dane w postaci zapisanych loginów i haseł do serwisów transakcyjnych, banku itp.

Ale do rzeczy.. Java Script umożliwia nam napisanie takiego skryptu, dzięki właściwości document.cookie w obiekcie document. Tworzenie cookie polega na przekazaniu do właściwości document.cookie odpowiedniego napisu, który przyjmie typ danej w postaci string. Można utworzyć dwa rodzaje cookies: cookie sesji, jedne są tak zwane trwałe i ich żywotność jest określona przez autora, a inne są tak zwanymi cookie sesji, czyli ciasteczkami sesji, które są przechowywane w naszym komputerze aż do jego wyłączenia.

 

Podczas pisania kursu opierałem na się głównie na własnej wiedzy i doświadczeniu, oraz na materiałach, które podane są w przypisach. Dane tabelaryczne zaczerpnąłem z opracowania mieszczącego się pod tym adresem URL. Opracowanie jest chronione prawem autorskim, zezwalam jednak na korzystanie, kopiowanie i rozpowszechnianie fragmentów tego opracowania bez mojej zgody, mam tylko prośbę... podaj proszę w swojej pracy odnośnik do strony internetowej z tym kursem, mieszczącym się pod adresem: http://javascript.vj.e.pl/ będę Ci za to wdzięczny.

Kod tej strony, pozostawia wiele do życzenia, ale jako że robiłem to opracowanie na zaliczenie przedmiotu w szkole, pozwoliłem sobie bezpośrednio z Word'a wygenerować stronę HTML, co też pewnie widać, ale mam nadzieję, że meritum zagadnienia jest ważniejsze niż piękno kodu w tym przypadku. Pozdrawiam i mam nadzieję, że komuś się ten kurs przydał ;-)



[1] Zobacz także: http://css.vj.e.pl/ - kurs na temat styli kaskadowych CSS.

[2] JavaScript. Ćwiczenia praktyczne, autor: Marcin Lis, Helion 2002, str. 20

[3] JavaScript. Ćwiczenia praktyczne, autor: Marcin Lis, Helion 2002, str. 36-37.

[4] Zob. też. http://css.vj.e.pl/ - Kurs CSS dla początkujących!

[5] Zob. też. http://css.vj.e.pl/

[6] Być może napiszę takowy kurs już niebawem, jak tylko znajdę odrobinę czasu, pewnie będzie się mieścić pod adresem: http://xhtml.vj.e.pl/





Copyright vj zone 2006 Wszelkie prawa zastrzeżone.