Część Pierwsza: Tworzenie obiektów HTML działających z JavaScript JavaScript jest językiem programowania specjalnie zaprojektowanym do tworzenia na stronach WWW elementów interaktywnych. Element interaktywny jest to element, który odpowiada na dane wejściowe użytkownika na przykład przycisk, który spowoduje,że coś się zdarzy kiedy użytkownik kliknie na niego, lub pole tekstowe, które automatycznie sprawdzi poprawność tekstu jaki wpisał użytkownik. Aby stworzyć elementy interaktywne, jednak muszą najpierw istnieć elementy pierwotne. Dla tych elementów może stworzyć łatwo elementy interaktywne dzięki instrukcjom HTML zawartych w tej części. W tej części... Stworzymy podstawową, całkiem logiczną stronę WWW w HTML'u Dodamy elementy do Twojej strony WWW Połączymy stronę WWW do serwera programu CGI Tworzenie strony WWW Stworzenie strony WWW jest dosyć prostym procesem. Najpierw musisz stworzyć plik dokumentu HTML nazwanego jakiśplik.html (lub jeśli system nie obsługuje długich rozszerzeń nazw plików, nazwij plik jakiśplik.htm). Możesz użyć edytora tekstu jaki jest dla ciebie najwygodniejszy dla tworzenia pliku HTML, takiego jak WordPad, BBEdit, edytora zawartego w Netscape Navigator Gold, lub nawet edytora tekstu jeśli pozwalają one na zapisywanie czystego tekstu. Dokument HTML jaki tworzysz powinien mieć następujące sekcje: Ogólna sekcja dokumentu (wymagana): Aby interpreter HTML rozpoznał, że Twój dokument jest plikiem HTML, a nie żaden inny plik, pierwsza linia dokumentu musi zawierać początkowy znacznik <HTML> a ostatnia linia musi zawierać znacznik końcowy </HTML> Wszystkie inne znaczniki HTML i instrukcje JavaScript jakie zdecydowałeś się dołączyć do strony są opcjonalne ale znaczniki i instrukcje jakie dołączasz muszą pojawić się między znacznikami <HTML>...</HTML>. Sekcja nagłówka (opcjonalna): Jeśli dokument ma nagłówek (taki jak Tworzenie strony WWW, który widzisz na początku tej sekcji) po nagłówku bezpośrednio następuje początkowy znacznik <HTML>. Nagłówek jest ograniczony przez otwierający znacznik <HEAD> i znacznik zamykający </HEAD>. Musisz umieścić jakieś elementy wewnątrz nagłówka, taki jak tytuł strony WWW. Inne elementy na przykład skrypt JavyScript, który jest identyfikowany przez znacznik <SCRIPT> - może lub nie rezydować w nagłówku. Sekcja body (technicznie opcjonalna ale praktycznie wymagana!) : Możesz stworzyć dokument, który nie zawiera body, ale będzie wtedy dosyć nudny! Wszystkie interaktywne formy elementów, które znajdą się w tej części muszą pojawić się między znacznikami <BODY>...</BODY> aby zostały rozpoznane przez interpreter HTML. Po stworzeniu pliku dokumentu HTML, możesz załadować stronę w przeglądarce obsługującej JavaScript (na przykład Netscape Navigator lub Microsoft Internet Explorer) i zobaczyć swoją nową stronę WWW. Kiedy skończysz testowanie strony i ocenisz,że jest doskonała, prawdopodobnie będziesz chciał podzielić się nią ze światem co wymaga udostępnienia pliku dokumentu (i być może zapłaty) administratorowi serwera. Sekcja body: <BODY>...</BODY> Zazwyczaj treść dokumentu gdzie są umieszczone instrukcje HTML mieszczą się pomiędzy parą
znaczników <BODY>...</BODY>. Dla zdefiniowana sekcji body w HTML'u użyj pary znaczników <BODY>...</BODY>. Aby uzyskać dostęp do sekcji body w JavaScript, użyj identyfikatora document. Para znaczników <BODY>...</BODY> daje ci szansę dopasowania do własnych potrzeb kolorów, jakie wyświetli strona WWW. Możesz zmienić kolory dowolnej pozycji, która pojawia się w kolumnie Opis w poniższej tabeli na wartości koloru pokazane w Dodatku B. Ustawienia kolorów w HTML Opis Dostęp do kolorów w JavaScript BGOLOR= chartreuse Kolor tła strony document.bgcolor TEXT = blue Kolor pierwszoplanowy (tekst) document.fgcolor LINK = yellow Kolor linku przed kliknięciem document.linkcolor ALINK = white Kolor linku klikniętego document.alinkcolor VLINK = black Kolor linku po kliknięciu document.vlinkcolor Poniżej mamy kod z powyższej tablicy wstawiony do sekcji body dokumentu HTML: <HTML>... <BODY BGCOLOR= jakiśkolor TEXT= jakiśkolor LINK= jakiśkolor ALINK= jakiśkolor VLINK= jakiśkolor >... Większość kodu HTML, wliczając w to kod dla interaktywnego formularza, znajduje się tutaj... </BODY> </HTML> Sekcja nagłówka: <HEAD>...</HEAD> Ponieważ interpreter JavaScript (oprogramowanie dołączane do przeglądarek sieciowych, pozwalające przeglądarkom rozpoznawać instrukcje JavaScript) zaczyna odczytywanie kodu HTML od góry każdego pliku w dół, znacznik <HEAD> powinien pojawić się u góry tego pliku: <HTML> <HEAD> Instrukcje tu umieszczone są interpretowane podczas ładowania strony WWW. </HEAD>... Instrukcje HTML zawarte w sekcji BODY przychodzą tu... </HTML> Wykorzystaj organizacyjną wygodę sekcji nagłówka i body dokumentu HTML. Na przykład, jeśli masz zwyczaj wstawiania wszystkich definicji funkcji JavaScript w sekcji nagłówka, możesz być pewien,że funkcje będą dostępne dla reszty Twojej strony Formularz interaktywny: <FORM>...</FORM> Para znaczników <FORM>...</FORM> jest niewątpliwie jedną z najważniejszych par znaczników jakich używasz. Znacznik <FORM> otacza serce strony WWW z JavąScript: formularz
interaktywny. Formularz jest używany do pobierania danych od użytkownika i wysyłania, lub rozsyłania, danych formularza do serwera dla dodatkowego przetworzenia. Zawsze definiuj formularze wewnątrz sekcji <BODY>...</BODY>. Definiując formularz w HTML, używasz pary znaczników: <FORM NAME=myForm >... </FORM> Dla dostęp do tego formularza w JavaScript użyj identyfikatora: document.myform Musisz umieścić znacznik dla każdego elementu formularza jaki chcesz zawrzeć na stronie WWW, czy to będzie przycisk, pole listy, pole tekstowe czy cokolwiek, pomiędzy znacznikami <FORM>...</FORM>, jak pokazano w poniższej tabelce: dla znacznika <FORM> <FORM NAME = nazwa Formularza [TARGET= nazwa Okna ] [ACTION= URL serwera ] [METHOD = GET POST ] [ENCTYPE = typ Kodowania ] [onsubmit = obsługa Tekstu Wyjaśnienie Otwarcie znacznika <FORM> Wewnętrzna nazwa formularza (dla celów kodowania) Okno do wyświetlania odpowiedzi serwera (opcjonalne; domyślnie jest to bieżące okno URL gdzie dane formularza są wysyłane, kiedy użytkownik wypełni formularz Metoda wysyłania albo GET albo POST; GET jest domyślne (opcjonalne) Schemat specjalnego kodowania (opcjonalne) Kod wywoływany kiedy formularz jest dostarczony... Tu wstaw wszystkie elementy formularza </FORM> Znacznik zamykający <FORM> Możesz nigdy nie wykorzystać całej składni; przynajmniej do czasu kiedy staniesz się ekspertem! Zacznij od prostego, codziennego przykładu składni dla formularza interaktywnego: <FORM NAME = mójformularz... <INPUT TYPE= button NAME= obliczanieceny VALUE= Oblicz Teraz! onclick= obliczanieceny() >... </FORM> HTML, a zwłaszcza znacznik <INPUT> mogą być trochę odstraszające, jeśli nie jesteś z nimi obeznany. Skrypt JavaScript: <SCRIPT>...</SCRIPT> Para znaczników HTML <SCRIPT>...</SCRIPT> pozwala ci wstawić skrypt JavaScript na Twoją stronę WWW.(Miej świadomość,że JavaScript nie jest jedynie językiem skryptowym, który możesz określać; jest tak dlatego,ze znacznik <SCRIPT> ma powiązany z nim atrybut LANGUAGE). Możesz umieścić skrypt JavaScript wewnątrz sekcji nagłówka lub body strony WWW, i możesz wstawić wiele skryptów jakich chcesz. Ponieważ JavaScript jest oparty na obiektach (a nie zorientowanym obiektowo) językiem, kod JavaScript jaki napiszesz będzie powszechni odnosił się do takich jednostek jak obiekty, metody i właściwości. Niestety, ze względu na objętość, tekst ten nie będzie zawierał omówienia programowania opartego o obiekty.
dla znacznika <SCRIPT> <SCRIPT [LANGUAGE= JavaScript ] [SRC= nazwapliku.js ]> Wyjaśnienie Otwarcie znacznika <SCRIPT> Język skryptowy (opcjonalne ale zalecane;domyślnie JavaScript) Nazwa pliku źródłowego JavaScript (ocjonalne)... Instrukcje JavaScript, chyba,że określisz wartość dla SRC </SCRIPT> Tu masz przykład znacznika <SCRIPT> w akcji: <HTML> <SCRIPT LANGUAGE= JavaScript >... </SCRIPT> </HTML> Znacznik zamykający </SCRIPT> Upewnij się,że umieściłeś instrukcje HTML wewnątrz znaczników <SCRIPT>...</SCRIPT>. Jedyne instrukcje jakie interpreter JavaScript rozpatrzy poprawnie jako instrukcje JavaScript to te pomiędzy tymi dwoma znacznikami inny typ instrukcji spowoduje błąd składni. Strona WWW: <HTML>...</HTML> Niektóre przeglądarki mogą załadować dokument HTML jeśli nie znajdą tych znaczników. Technicznie jednak, przeglądarki nie robią tego i nie ma gwarancji,że będzie tak w przyszłości. Dlatego bezpieczniej będzie zawrzeć parę znaczników <HTML>...</HTML> w pliku dokumentu HTML. Znacznik otwierający powinien być w pierwszej lini pliku a znacznik zamykający w ostatniej, jak pokazano w poniższym przykładzie: <HTML> Miejsce na instrukcje jakie mają być zawarte w pliku HTML między tymi znacznikami </HTML> Wstawianie elementów formularza na Twoją stronę WWW Wszystkie elementy opisane w tej sekcji są elementami formularza, a ponieważ są częścią formularza, muszą być zdefiniowane pomiędzy znacznikami <FORM>...</FORM>, które z kolei muszą być zdefiniowane między znacznikami <BODY>...</BODY>. Komponent ActiveX: <OBJECT>...</OBJECT> Komponenty ActiveX są aktualnie kompatybilne tylko z wersją JavaScript Internet Explorera, ale wieść niesie,że mają wkrótce być kompatybilne także z Navigatorem. Aby osadzić komponent ActiveX w dokumencie HTML, użyj pary znaczników <OBJECT>...</OBJECT>.Aby uzyskać dostęp do komponentu ActiveX JavyScript w IE, użyj identyfikatora document.myform.myactivexid
znacznika dla osadzonego komponentu ActiveX <OBJECT CALSSID= classid ID= componentid [HEIGHT= pixels values %] [WIDTH= pixels values %] [HSPACE= pixels ] [VSPACE= pixels ] [ALIGN= position ]> Wyjaśnienie Możesz powtarzać te opcjonalne sekcja tak długo jak to jest konieczne [<PARAM NAME= nazwa Parametru VALUE= wartość Parametru [</PARAM>] </OBJECT> Znacznik otwierający <OBJECT> ID klasy komponentu Wewnętrzna nazwa komponentu dla celu kodowania Wysokość komponentu w pikselach, lub procent wysokości okna Szerokość komponentu w pikselach, lub procent wysokości okna Pozioma spacja pomiędzy lewą a prawą stroną komponentu i lewą a prawą stroną brzegów okna, w pikselach Pionowa spacja pomiędzy górą a dołem komponentu i górnym a dolnym brzegiem okna, w pikselach Określa wyrównanie obrazka Znacznik otwierający <PARAM> Nazwa parametru przekazywanego do komponentu Wartość przekazywana do komponentu Znacznik zamykający <PARAM> Znacznik zamykający </OBJECT> Poniższy kod osadza komponent ActiveX, którego zadaniem jest ładowanie strony WWW wewnątrz innej strony WWW. <OBJECT ALIGN=CENTER CLASSID= classid:1a4da620-6217-11cf-be62-0080c72edd2d WIDTH=650 HEIGHT=40 BORDER=1 HSAPCE=5 ID=marquee> <PARAM NAME= ScrollStyleX VALUE= Circular > <PARAM NAME= ScrolStyleY VALUE= Circular <PARAM NAME= szurl VALUE= http://ww.idgbooks.com > <PARAM NAME= ScrollDelay VALUE=100> <PARAM NAME= LoopsX VALUE = -> <PARAM NAME= LoopsY VALUE=-> <PARAM NAME= ScrollPixelsX VALUE=0> <PARAM NAME= ScrollPixelsY VALUE=30> <PARAM NAME= DrawImmediately VALUE=1> <PARAM NAME= Whitespace VALUE=0> <PARAM NAME= PageFlippingOn VALUE=1> <PARAM NAME= Zoom VALUE=100> <PARAM NAME= WidthOfPAge VALUE=640> </OBJECT> Obrazek graficzny: <IMG> Aby osadzić obrazek w HTML, użyj tegoznacznika:
<IMG NAME= myimage... Aby uzyskać dostęp do obrazka w implementacji JavaScript w Navigatorze użyj identyfikatora : document.myform.myimage. Możesz osadzić dowolny obrazek na stronie WWW przez zastosowanie znacznika <IMG>. Jak możesz oczekiwać, pozycja osadzonego obrazka jest określona przez pozycję instrukcji <IMG> w pliku HTML. Na przykład jeśli zdefiniujesz przycisk, osadzony obrazek i zbiór przycisków radiowych, będzie to taki porządek w jakim pojawią się one na stronie WWW. znacznika <IMG> <IMG NAME= nazwa obrazka SRC = położenie [LOWSRC= położenie ] [HEIGHT= pixels value %] [WIDTH= pixels value %] [HSPACE= pixels ] [VSPACE= pixels ] [BORDER= pixels ] [ALIGN= pozycja ] [ISMAP] Wyjaśnienie Znacznik otwierający <IMG> Nazwa obrazka dla wewnętrznych celów kodowania URL obrazka do załadowania URL alternatywnej wersji obrazka o niskiej rozdzielczości Wysokość obrazka, w pikselach lub jako procent wysokości okna Szerokość obrazka, w pikselach lub jako procent wysokości okna Pozioma spacja między lewą a prawą stroną obrazka i lewym a prawym brzegiem okna, w pikselach Pionowa spacja między górą a dołem obrazka i górnym a dolnym brzegiem okna, w pikselach Szerokość obramowania obrazka, w pikselach Określenie wyrównania obrazka Czy obrazek jest odwzorowany po stronie serwera [USEMAP= położenie#nazwa Odwzorowania ] Czy obrazek jest odwzorowany po stronie klienta [onabort= obsługa Tekstu ] [onerror = obsługa Tekstu ] [onload = obsługa Tekstu ] Kod do wykonania kiedy użytkownik przerwie ładowanie obrazka Kod do wykonania kiedy pojawi się błąd podczas ładowania obrazka Kod do wykonania podczas ładowania obrazka Większość atrybutów jest opcjonalnych; tylko kilka z nich jest niezbędnych, jak widać na poniższym przykładzie: <IMG NAME= dogimage SRC= images/dalmation.gif ALIGN= MIDDLE > Komentarz HTML: <! -... - > Spróbuj balansować między nad komentowaniem a nie dodawaniem komentarzy doswojego kodu. Nad komentowanie może uczynić kod trudniejszym do odczytania; z drugiej strony, brak komentarzy powoduje,że inni autorzy HTML czy JavaScript muszą zgadywać co twój kod robi <HML>... <!- Ten plik HTML został stworzony przez Jana Kowalskiego 01/01/2006 - >
</HTML> Istnieją dwa rodzaje komentarzy: komentarze HTL, zaprezentowane w poprzednim przykładzie i komentarze JavaScript, wyglądające tak: // lub /* */. Te komentarze nie są wymienne. Jeśli spróbujesz zastosować komentarz HTML wewnątrz skryptu JavaScript, otrzymasz błąd. Jeśli użyjesz komentarza JavaScript wewnątrz znacznika HTML, komentarz ten pojawi się na stronie WWW! Ramki: <FRAMESET>...<FRAME>...</FRAMESET> Ramka jest specjalnym rodzajem okna. Możesz mieć kilka ramek w regularnym: oknie, a użytkownik może przesuwać każdą ramkę niezależnie. Kazba ramka może być również powiązana z oddzielnym URL'em. Dobre!Jakie możliwości! Aby stworzyć ramkę w HTML, użyj tych znaczników: <FRAMESET>...<FRAME>...</FRAMESET> Aby uzyskać dostęp do tej ramki w JavaScript, użyj identyfikatora: frames[0]. ) oznacza tu porządek w jakim ramka została zdefiniowana w kodzie HTML. Pierwsza ramka jest przedstawiana przez 0, druga przez 1 trzecia przez 2 i tak dalej. znacznika ramki <FRAMESET ROWS= list wysokości wierszy COLS= list szerokości kolumn' [onblur = obsługa Tekstu ] [onfocus = obsługa Tekstu ] [onload = obsługa Tekstu ] [onunload = obsługa Tekstu ] Wyjaśnienie Znacznik otwierający <FRAMESET> (grupa ramek) Oddzielona przecinkami lista wartości wysokości wiersza Oddzielona przecinkami lista wartości szerokości kolumn Kod wywoływany kiedy ramka jest opuszczana (opcjonalne) Kod wywoływany kiedy ramka przejmuje aktywność (opcjonalne) Kod wywoływany kiedy ramka jest ładowana (opcjonalne) Kod wywoływany kiedy ramka jest zwalniana (opcjonalne) [<FRAME Pojedynczy znacznik <FRAME> (opcjonalny ale zalecany) SRC= położenie lub URL NAME= nazwa ramki >] </FRAMESET> Tu mamy kod definiujący dwie ramki: <HTML> <HEAD><TITLE> Ramek</TITLE></HEAD> <FRAMESET ROWS= 50%, 50% COLS= 40%,60% > <FRAME SRC= frameicon1.html NAME= frame1 > <FRAME SRC= frameicon2.html NAME= frame2 > </FRAMESET> </HTML> URL dokumentu pojawiającego się w tej ramce Wewnętrzna nazwa ramki Znacznik zamykający </FRAMESTE> Łącze hipertekstowe:<a>...</a> Łącze jest to fragment tekstu, który jednoznacznie identyfikuje miejsce na stronie WWW. Po zdefiniowaniu łącza, możesz się do niego połączyć. Dla zdefiniowania łącza w HTML użyj pary znaczników <A>.../A>
Aby uzyskać dostęp do łącza w JavaScript użyj identyfikatora document.links[0]. Podobnie jak poprzednio, identyfikator 0 jest liczbą przedstawiającą porządek w jakim łącze jest zdefiniowane w kodzie HTML. Pierwsze łącze to 0, drugie 1, trzeci 2 i tak dalej. Zauważyłeś może, iż para znaczników <A>...</A> jest używana zarówno do łącz jak i linków. znacznika łącza Wyjaśnienie <A Znaczni otwierający <A> NAME= nazwa łącza > Tekst łącza </A> <A NAME= TOC >Spis Treści</A> Nazwa łącza do którego odnosi się link Tekst wyświetlany jako łącze Znacznik zamykający </A> Link hipertekstowy: <A>...</A> Linki hipertekstowe (lub po prostu linki) jest to serce użyteczności WWW. Możesz użyć linków do połączenia i uporządkowania wielu stron, połączenia swojej strony z innymi stronami WWW. Technicznie, link jest to fragment tekstu (lub obrazek), który ładuje inną stronę WWW kiedy na nim klikniesz Dla zdefiniowania linku hipertekstowego w HTML użyj pary znaczników <A>.../A> Aby uzyskać dostęp do linku w JavaScript użyj identyfikatora document.links[0]. Podobnie jak poprzednio, identyfikator 0 jest liczbą przedstawiającą porządek w jakim łącze jest zdefiniowane w kodzie HTML. Pierwszy link to 0, drugi 1, trzeci 2 i tak dalej. dla znacznika linka Wyjaśnienie <A Znacznik otwierający <A> HREF= położenie lub URL[#łącze] TARGET= nazwa okna [onclick= obsługa Tekstu ] [onmouseout = obsługa tekstu [onmouseover = obsługa Tekstu linktext </A> URL i łącze do linka Okno do którego ładowana jest linkowana strona (opcjonalne) Kod wywoływany kiedy użytkownik klinie link (opcjonalnie) Kod wywoływany kiedy myszka przesuwa się z linku (opcjonalnie) Kod wywoływany kiedy myszka znajduje się nad linkiem (opcjonalnie) Tekst wyświetlany po stronie linku Znacznik zamykający </A> Wiele atrybutów linku jest opcjonalnych. Możesz użyć je wszystkie, jeśli czujesz taką potrzebę, ale poniżej mamy dobry przykład zastosowania tych niezbędnych <A HREF= http://www.dummies.com > Link do strony WWW Wydawictwa IDG Dummies</A> Kiedy najedziesz kursorem myszki nad ten link, wartość określona atrybutem HREF pojawi się w linii statusu na dole przegladarki. Nie musisz robić nic specjalnego z tą wartością interpreter HTML zrobi to za ciebie automatycznie. Wstawianie interaktywnych elementów formularza: <INPUT> Aby zdefiniować interaktywny element wejściowy w HTML, użyj znacznika: <INPUT NAME= mójelementwejściowy...>
Aby uzyskać dostęp do tego elementu w JavaScript użyj identyfikatora: document.myform.mójelementwejściowy Wszystkie elementy z tej sekcji są elementami formularza a więc musza być zdefiniowane między znacznikami <FORM>...</FORM>. Elementy interaktywne jakie tworzymy w JavaScript są w rzeczywistości elementami HTML, z jedną bardzo ważną różnicą: JavaScript pozwala ci dodawać obsługę zdarzeń (onclick, onchange, onblur itd.) do elementów, tak aby elementy mogły odpowiadać interakcją na działania użytkownika. Możesz stworzyć kilka różnych typów elementów wejściowych interaktywnych w JavaScript: Elementy wejściowe TYPE= button TYPE= chekbox TYPE= file TYPE= hidden TYPE= password Wyjaśnienie Dopasowany przycisk Zgrupowane pola wyboru(pozwalające na wielokrotne wybory) Kontrolka,która pozwala użytkownikowi przeglądać i wybierać pliki. Element tekstowy, którego użytkownik nie widzi Element tekstowy wyświetlający znaki jako gwiazdki TYPE= radio Pogrupowane przyciski radiowe (ograniczające użytkownika do jednego wyboru) TYPE= reset <SELECT> TYPE= submit TYPE= text <TEXTAREA> Przedefiniowany przycisk resetujący wartości formularza Konfigurowalna pojedynczy lub wielokrotny wybór) pole listy Przedefiniowany przycisk do wysyłania wartości formularza Pole tekstu wejściowego jednoliniowego Pole tekstu wejściowego wieloliniowego Elementy <SELECT> i <TEXTAREA> są również elementami wejściowymi, ale zdefiniowane są nieco inaczej niż pozostałe. Zamiast wartości identyfikujących dla atrybutu TYPE znacznika <INPUT>, mają one swoje własne znacnziki: <SELECT>...</SELECT> <TEXTAREA>...</TEXTAREA> Przycisk Przycisk jest to element formularza HTML znacznika dla przycisku <INPUT TYPE= button NAME= nazwa przycisku VALUE= Tekst przycisku [onclick= obsługa Tekstu ] Wyjaśnienie Pojedynczy znacznik <INPUT> Określony rodzaj kontrolki (przycisk) Wewnętrzna nazwa przycisku Tekst wyświetlony na przycisku Kod wywołany po naciśnięciu przycisku przez użytkownika Poniżej mamy przykład: <INPUT TYPE= button NAME= infobutton VALUE= Kliknij tu po informację onclick=displayinfo() >
Pole wyboru Pole wyboru jest kontrolką dwustanową. Kiedy użytkownik kliknie pole wyboru, to albo go zaznaczy albo odznaczy. znacznika dla pola wyboru <INPUT TYPE= checkbox NAME= nazwa pola wyboru VALUE= wartość pola wyboru [CHECKED] [onclick= obsługa Tekstu ] TextToDisplay Wyjaśnienie Pojedynczy znacznik <INPUT> Określony typ kontrolki (pole wyboru) Wewnętrzna nazwa pola wyboru Wartość zwracana do serwera kiedy formularz jest wysyłany Określa początkowe zaznaczenie jako wybrane (opcjonalnie) Kod wykonywany kiedy kliknięte jest pole wyboru Tekst opisowy wyświetlany obok pola wyboru Oto przykład: <INPUT TYPE= checkbox NAME= classicalcheckbox VALUE= checkedclassical onclick= ShowClassicalTitle() > Kliknij tu jeśli lubisz muzykę klasyczną fileupload Element fileupload pozwala użytkownikowi przeglądać katalogi plików na swojej maszynie i wybierać pliki. Wewnątrz skryptu JavaScript możesz uzyskać dostęp do nazwy wybranego pliku poprzez fileuploadname.value. znacznika dla fileupload <INPUT TYPE= file NAME= fileuploadname > Wyjaśnienie Pojedynczy znacznik <INPUT> Określony typ elementu (plik) Określona nazwa elementu <INPUT TYPE= file NAME= myfileupload > Ukryty Element hidden jest polem tekstowym wejściowym, który nie pojawia się na ekranie. Elementy ukryte są zazwyczaj używane do przechowywania wartości obliczanych programowo, a potem wysyłane na serwer kiedy użytkownik wysyła formularz. znacznika dla elementu hidden <INPUT TYPE= hidden NAME= hiddenname [VALUE= textvalue Wyjaśnienie Pojedynczy znacznik <INPUT> Określa typ elementu (ukryty) Wewnętrzna nazwa elementu ukrytego Początkowa wartość elementu ukrytego <INPUT TYPE= hidden NAME= secrettextfield > Hasło Obiekt password jest specjalnym polem tekstowym, które wyświetla gwiazdki na ekranie (w
miejsce wpisywanych przez użytkownika znaków) znacznika dla elementu password <INPUT TYPE= hidden NAME= passwordname SIZE=integer [VALUE= textvalue Wyjaśnienie Pojedynczy znacznik <INPUT> Określa typ elementu (hasło) Wewnętrzna nazwa elementu hasła Początkowa liczba znaków do wyświetlenia Początkowa wartość elementu ukrytego Spójrz na to zdefiniowane hasło: <INPUT TYPE= password NAME= userpassword SIZE=15 VALUE= secret! > Przycisk radiowy Radio button jest dwustanowym elementem, podobnie jak pole wyboru. Jednak w przeciwieństwie do niego, przyciski radiowe są częściej grupowane w zbiory, które pozwalają użytkownikowi wybierać pojedyncze opcje z listy. znacznika dla elementu hidden <INPUT TYPE= radio NAME= radioname [VALUE= radiovalue [CHECKED] [onclick= obsługa Tekstu ] texttodisplay Wyjaśnienie Pojedynczy znacznik <INPUT> Określa typ elementu (radio) Wewnętrzna nazwa przycisku radiowego Określa wartość zwracaną do serwera Określa,że ten przycisk jest początkowo wybrany (opcjonalne Kod wykonywany kiedy użytkownik kliknie przycisk radiowy Tekst opisowy Poniższy kod pokazuje popularny sposób definiowania zbioru przycisków radiowych. Zauważ jak wartość dla atrybuty NAME jest taka sama (timechoice) dla każdego przycisku radiowego? Ponieważ wszystkie trzy przyciski radiowe współdzielą jedną nazwę (i tylko jedna wartość może być powiązana z jedną nazwą w danym czasie), użytkownik jest ograniczony do wybrania tylko jednego przycisku radiowego z całej grupy. Jaka jest twoja ulubiona pora dnia? <INPUT TYPE= radio NAME= timechoice VALUE= morningselected CHECKED onclick=showvalues(0) > Poranek <INPUT TYPE= radio NAME= timechoice VALUE= aftrenoonselected CHECKED onclick=showvalues(1) > Popołudnie <INPUT TYPE= radio NAME= timechoice VALUE= eveningselected CHECKED onclick=showvalues(2) > Wieczór
Reset Obiekt reset jest specjalnym rodzajem przycisku. Kiedy użytkownik na przycisk reset, wszystkie dane wprowadzone przez użytkownika w formularzu są czyszczone i resetowane ich wartości początkowe (domyślne). znacznika dla przycisku reset <INPUT TYPE= reset NAME= resetname [VALUE= buttontext [onclick= obsługa Tekstu ] Wyjaśnienie Pojedynczy znacznik <INPUT> Określa typ elementu (reset) Wewnętrzna nazwa kontrolki Tekst wyświetlany na przycisku reset Kod wykonywany kiedy użytkownik kliknie przycisk Tu mamy przykład jak dodać przycisk reset do formularza: <INPUT TYPE= reset NAME= resetbuttom VALUE= Resetuj Formularz onclick= reinitializeformulas() > Select Element <SELECT> jest używany do wyświetlania zarówno listy pojedynczego wyboru jak i przewijanego pola listy wielokrotnego wyboru (w zależności od tego czy określony jest atrybut MULTIPLE). Element <SELECT> jest jednym z dwóch elementów wejściowych (<TEXTAREA> jest drugim),który nie podąża za standardową konwencją określającą ten element jako wartość znacznika <INPUT> atrybutu TYPE. W przeciwieństwie do innych interaktywnych obiektów, jakie wstawiasz w dokumencie HTML poprzez znaczniki <INPUT> i atrybut, po prostu używasz znacznika <SELECT> do wstawienia pola listy na stronie WWW. znacznika wyboru pola listy <SELECT NAME= selectname Wyjaśnienie Znacznik otwierający <SELECT> Wewnętrzna nazwa kontrolki [SIZE= integer ] Liczba widzialnych opcji (opcjonalny, domyślnie 1) [MULTIPLE] [onblur = obsługa Tekstu ] [onchange= obsługa Tekstu ] Określa pasek przewijania wielokrotnego wyboru Kod wywoływany kiedy nie jest aktywne (użytkownik kliknął gdziekolwiek) Kod wywoływany kiedy zmieniono wartość i nnie jest aktywne [onfocus = obsługa Tekstu ] Kod wywoływany kiedy element jest aktywny (użytkownik kliknął element) <OPTION [VALUE= wartość opcjonalna ] [SELECTED]> TextToDisplay </SELECTED> Określa wybraną pozycję Wartość wysyłana do serwera kiedy użytkownik wysyła formularz Określa,że ta opcja jest wybrana domyślnie Tekst opisowy wyświetlania kolejnej opcji Znacznik zamykający </SELECT> Możesz powtarzać znaczniki OPTION (i powiązane z nim atrybuty) jak to jest konieczne. Ponieważ
dodanie pola listy pociągają za sobą pracę nie tylko ze zwykłymi powiązanymi atrybutami, ale również dodatkowym znacznikiem (znacznik <OPTION>), może być to trochę kłopotliwe za pierwszym razem. Podam tu krótki pomocny przykład: <SELET NAME= favoritrmusic SIZE=3 MULTIPLE onblur = displayresult(this) > <OPTION VALUE= popchosen SELETED >pop <OPTION VALUE= rockchosen > rock <OPTION VALUE= dogschosen > dogs barking Jingle Bells <OPTION VALUE= rapchosen > rap <OPTION VALUE= showchosen > show tunes <OPTION VALUE= africanchosen > African classical </SELECT> Submit Element submit jest specjalnym rodzajem przycisku, który dostarcza (lub wysyła) wartości z formularza na serwer (szczególnie określony program CGI na określony serwer, który definiujesz jako część pary znaczników <FORM>..</FORM>).Przycisk submit współpracuje z atrybutem ACTION pary znaczników <FORM>...</FORM> znacznika dla przycisku submit <INPUT TYPE= submit NAME= submitname [VALUE= submittext [onclick= obsługa Tekstu ] Wyjaśnienie Pojedynczy znacznik <INPUT> Określa typ elementu (submit) Wewnętrzna nazwa przycisku submit Tekst wyświetlany na przycisku submit Kod wykonywany kiedy użytkownik kliknie przycisk submit (technicznie opcjonalnym w praktyce zalecany) <INPUT TYPE = submit NAME= submitbutton VALUE= Submit Form occlick= verifyinput() > Text Element text jest jedno liniowym polem danych wejściowych znacznika elementu Text <INPUT TYPE= text NAME= textname VALUE= textvalue SIZE= integer [onblur = obsługa Tekstu ] [onchange= obsługa Tekstu ] Wyjaśnienie Pojedynczy znacznik <INPUT> Określa rodzaj kontrolki (text) Wewnętrzna nazwa pola tekstowego Określa wartość początkową pola tekstowego Liczba znaków wyświetlana przed przewinięciem Kod wywoływany kiedy użytkownik kliknął gdziekolwiek, i nie jest aktywny (opcjonalne) Kod wywoływany kiedy zmieniono wartość i nie jest aktywny [onfocus = obsługa Tekstu ] Kod wywoływany kiedy element jest aktywny (użytkownik kliknął element)
[onselect = obsługa Tekstu Kod wykonywany kiedy tekst w polu jest zaznaczony (opcjonalne) Tu mamy prostą ilustrację elementu tekstowego w działaniu: <INPUT TYPE= text NAME= lastname VALUE = Twoja nazwa SIZE=30 onchange= validate() > Textarea Element <TEXTAREA> jest podobny do elementu text, z wyjątkiem tego,że zamiast definiować jedną linię do przewinięcia, element <TEXTAREA> definiuje wieloliniowy suwak tak aby użytkownik mógł wpisać dużo tekstu za jednym razem. Podobnie jak <SELECT>,<TEXTAREA>nie podąża za standardową konwencją określającą ten element jako wartość znacznika <INPUT> atrybutu TYPE. Zamiast tego, znacznik <INPUT> jest zastępowany w tym przypadku przez znacznik <TEXTAREA> znacznika dla elementu textarea <TEXTAREA NAME= textareaname ROWS=integer COLS=integerLiczba wierszy do wyświetlenia [onblur = obsługa Tekstu ] [onchange = obsługa Tekstu ] Wyjaśnienie Znacznik otwierający <TEXTAREA> Wewnętrzna nazwa obiektu textarea Liczba wierszy do wyświetlenia Liczba kolumn do wyświetlenia Kod wywoływany kiedy textarea traci aktywność (opcjonalne) Kod wykonywany kiedy wartość się zmienia i traci aktywność [onfocus = obsługa Tekstu ] Kod wywoływany kiedy element jest aktywny (opcjonalne) [onselect = obsługa Tekstu ] TextToDisplay </TEXTAREA> : Kod wywoływany kiedy tekst jest zaznaczony Początkowy tekst wyświetlany wewnątrz suwaka Znacznik zamykający </TEXTAREA> <TEXTAREA NAME= directions ROWS=4 COLS=60 onblur= validate() onchange = display() onfocus= welcome() onselect= changemode() > To jest tekst domyślny. Możesz tu wpisać swoje, dodawać, wycinać,wklejać lub kopiować </TEXTAREA> Wstawianie apletu Javy: <APPLET>...</APPLET> Aplet Javy jest specjalnym małym programem zaprojektowanym do stosowania wewnątrz stron WWW. Aby osadzić aplet Javy na swojej stronie WWW użyj pary znaczników <APPLET>...</APPLET> Aby uzyskaćdostęp do apletu w JavaScript, użyj identyfikatora dosument.applet[0]. Podobnie jak poprzednio, identyfikator 0 jest liczbą przedstawiającą porządek w jakim aplet został zdefiniowany w kodzie HTML. Pierwszy aplet to 0, drugi 1, trzeci 2 i tak dalej. Kiedy osadzisz aplet w swoim kodzie HTML, musisz widzieć co nieco o tym aplecie. Na przykład, jakie aplety wymagają parametrów, które są wartościami jakie wysyła aplet kiedy go osadzasz. Jeśli chcesz osadzić aplet wymagający parametrów, musisz objąć te parametry definicją
<APPLET>...</APPLET> Są dwa sposoby aby odkryć czego wymaga dany aplet aby można było go osadzić na stronie WWW: Surfuj po Sieci dopóki nie znajdziesz przykładu jak ktoś osadził aplet i wykorzystaj to Napisz e-mail do twórcy apletu i poproś go o instrukcje znacznika osadzania apletu Javy <APPLET CODE= classfilename HEIGHT=height WIDTH=width [MAYSCRIPT] [NAME= nazwa apletu ] [CODEBASE= classfiledirectory ] [ALT= tekst alternatywny ] [ALIGN= położenie ] [HSPACE= numberofpixels ] [VSPACE= numberofpixels ] Możesz powtarzać sekcje opcjonalne tak długo jak to konieczne [<PARAM NAME= nazwa parametru VALUE= wartość parametru >] [</PARAM>] [</APPLET>] Wyjaśnienie Początkowy znacznik <APPLET> Nazwa pliku apletu do załadowania (*.class) Wysokość apletu w pikselach Szerokość apletu w pikselach Jeśli jest określony, atrybut ten zezwala apletowi na dostęp do wartości JavaScript (opcjonalne) Nazwa obrazka dla wewnętrznych celów kodowania Katalog gdzie jest umieszczony classfilename (opcjonalne ale zalecane) Tekst wyświetlany w miejsce apletu(dla przeglądarek nie obsługujących Javy) Określa wyrównanie apletu na stronie HTML (opcjonalne) Poziomy margines apletu w pikselach Pionowy margines w pikselach Znacznik otwierający <PARAM> Nazwa parametru przekazywanego do apletu Wartość przekazywana do apletu Znacznik zamykający <PARAM> Znacznik kończący </APPLET> Wartość dla ALIGN może przybrać jedną z następujących wartości: LEFT, RIGHT,TOP ABSMIDDLE,ABSBOTTOM,TEXTTOP,MIDDLE,BASELINE lub BOTTOM. Tu mamy przykład kodu osadzającego aplet bez parametrów: <APPLET NAME= BubbleApplet CODE= Bubble.class' CODEBASE= http://java.sun.com/applets/applets/bubbles WIDTH=500 HEIGHT=500> </APPLET> Odwzorowanie obszaru: <MAP>...<AREA>...</MAP> Obszar jest jak duży,gruby link: Obszar opisuje przestrzeń na stronie, którą możesz ukształtować i nadać rozmiar jaki chcesz i który odpowiada na zdarzenia użytkowników. Obszary są używane do tworzenia czegoś co nazywa sie klikalnymi mapami ;jeśli użytkownicy przesuwają myszką nad obrazkiem, zmienia się link (lub URL) pojawiający się w lini stanu WWW. Do osadzenia obszaru na swojej stronie WWW użyj pary znaczników <MAP>...<AREA>...</MAP>. Aby uzyskać dostęp do obszaru w JavaScript użyj identyfikatora document.links[0]. Obszary są przechowywane
w tablicy links Składania znacznika dla osadzonego obszaru <MAP NAME= nazwa mapy <AREA NAME= nazwa obszaru COORDS= x1,y1,x2,y2 HREF= położenie [SHAPE= shape ] [TARGET= windowname ] [onmouseout= obsługa Tekstu [onmouseover= obsługa Tekstu </MAP> Wyjaśnienie Znacznik otwierający <MAP> (musisz zdefiniować mapę definiowanego obszaru. Nazwa mapy dla wewnętrznych celów kodowania Znacznik otwierający <AREA> Nazwa obszaru dla wewnętrznych celów kodowania Współrzędne obrazu mapy, w liczbach całkowitych URL dokumentu do ładowania kiedy użytkownik kliknie na obszarze, lub javascript:functionname() Kształt mapy Okno ładujące URL kiedy użytkownik kliknie na obszar Kod wykonywany kiedy wskaźnik myszy wysunie się poza obszar Kod wykonywany kiedy wskaźnik myszy jest przeciągany przez obszar Znacznik zamykający </MAP> Tu mamy przykład definicji obszaru: <MAP NAME= thistlemap > <AREA NAME= topthistle COORDS= 0,0,228,318 HREF= javascript:void(0) onmouseover= self.status=' To jest wskaźnik myszki' ;return true onmouseout= self.status='dzięki za odwiedziny; zapraszam ponownie!'; return true > </MAP> Ta wstawka tworzy mapę,która odwzorowuje granice obrazka (W tym przypadku obrazkiem jest jasno różowy ostrożeń, dlatego też nazwa mapy to thistlemap) Kiedy użytkownik przesunie kursor nad obrazek / mapę, pojawi się tekst To jest wskaźnik myszki w pasku stanu. Kiedy użytkownik przeciągnie kursorem nad obrazkiem/mapą aby kliknąć kursorem gdzieś dalej, tekst w pasku stanu zmieni się na Dzięki za odwiedziny; zapraszam ponownie Wartość SHAPE może być jedną z następujących: rect, poly, circle lub default. Jeśli nie zdefiniujesz żadnej wartości dla atrybutu SHAPE, domyślnym kształtem będzie rect Dołączanie we wsatwkach: <EMBED>..</EMBED> Wstawki Netscape są komponentami programowymi, które wstawione do Netscape Navigatora rozszerzają jego możliwości. Aby wstawić plug-in do strony WWW użyj pary znaczników <EMBED>...</EMBED>. Aby uzyskać dostęp do plug-inu w JavaScript użyj identyfikatora: navigator:plugins[0] Identyfikator 0 jest liczbą przedstawiającą porządek w jakim pluginy zostały osadzone w kodzie HTML. Pierwszy plugin to 0, drugi 1, trzeci 2 i tak dalej. Definiujesz obiekt plugin używając znacznika <EMBED> Dane wyjściowe osadzonego pluginu pojawią się w tym samym miejscu na formie, gdzie pojawi się obiekt plugin. Składania znacznika dla osadzonego plug-inu <EMBED SRC= źródło Wyjaśnienie Znacznik otwierający <EMBED>. URL zawierający źródło plug-inu
NAME= embedname HEIGHT = height WIDTH=width> Nazwa osadzanego obiektu plugin Wysokość osadzanego pluginu w pikselach Szerokość osadzanego pluginu w pikselach Możesz powtarzać następujące sekcje opcjonalne tyle razy ile to konieczne [<PARAM NAME= parametername VALUE= parametervalue >] [<PARAM>] </EMBED> Znacznik otwierający <PARAM> Nazwa parametru (argument) przekazany do pluginu Wartość parametru (argument) przekazanego do pluginu Znacznik zamykający </PARAM> Znacznik zamykający </EMBED> Poniżej mamy przykład. Kod ten używa pluginu Adobe Acrobata do wyświetlenia pliku.pdf. <EMBE NAME= myembed SRC= http://ecco.bsee.swin.edu.au/text/adobe/pdfs/acrocd.pdf WIDTH= 450 HEIGHT=450> </EMBED. Określenie użytecznych cech strony WWW Sekcja ta zawiera przykłady użytecznych rzeczy jakie możesz chcieć skonfigurować dla swojej strony WWW: Wywołanie programu CGI Wyświetlenie tytułu Program CGI wywoływany przez Submit: <FORM>...</FORM> Kiedy użytkownik kliknie przycisk submit w formularzu, wszystkie wartości zawarte w formularzu są automatycznie wysyłane do programu CGI (Wspólny Interfejs Bramkowy) Określasz szczególny program CGI jako wartość atrybutu ACTION znacznika formularze <FORM>. Jeśli nie określisz programu CGI dla atrybutu ACTION,nie zdarzy się nic jeśli użytkownik kliknie przycisk submit, Jeśli będziesz miał problemy z określeniem wartości dla atrybutu ACTION, spójrz na to: <FORM... ACTION = http://www.madeup/com/cgi-bin/jakiś_program_cgi... </FORM> Tytuł dla strony WWW: <TITLE>...</TITLE> Tytuł odgrywa ważną role podczas komunikowania wiadomości użytkownikowi.są to słowa nie tylko używane przez programy wyszukujące, ale kiedy użytkownicy zachowują odniesienie do twojej strony (czasami nazywane zakładkowaniem) tytuł pojawia sie na liście zapisanych odnośników. Z tego powodu warto poświęcić trochę czasu na jego opracowanie. Znaczniki <TITLE>...</TITLE> są umieszczone pomiędzy znacznikami <HEAD>...</HEAD> <HTML> <HEAD> <TITLE> SexShop u Alfreda </TITLE> </HEAD> </HTML>
Część Druga: Podstawy JavaScript Ta część jest podobna do książki z gramatyką JavaScript, słownika i tezaurusa wszystko połączone w jedno. W części tej, znajdziesz podstawowe fakty mechaniki pisania instrukcji JavaScript od składni specjalnych słów kluczowych, od deklaracji zmiennych do definiowania funkcji wywołujących. Znajdziesz również omówienie wszystkich obiektów z jakimi możesz pracować w JavaScript W tej części... Zrozumiesz sprawy bezpieczeństwa związane ze skryptami JavaScript Poznasz model obiektów JavaScript Rozwiniemy składnię i wyrażenia JavaScript O bezpieczeństwie JavaScript Ponieważ JavaScript uruchamia się na komputerze klienta, możliwość naruszenia bezpieczeństwa jest duża. Sprawy bezpieczeństwa są kluczowe kiedy komunikacja dotyczy klient/serwer. A ten typ komunikacji nie jest tematem sztuczek w JavaScript. Podczas pisania tego tekstu jednym głównym problemem jaki był szeroko upubliczniony, było to,że złośliwy JavaScripter tworzył niewinnie wyglądający przycisk, który wysyłał wiadomości e-mail (z całym adresem e-mail)bez jego wiedzy. Na szczęście, problem ten tylko pojawił się z przeglądarką Netscape Navigator 3.0, i został całkowicie rozwiązany. W głównym oknie Navigatora przejdź do Options - > Network Preferences - > Protocols. Potem w okienku Show an Alert Box, kliknij pole wyboru przy Submitting a Form by Email, i problem będzie rozwiązany. Za każdym razem kiedy przeglądarka próbuje wysłać e-mail, pojawi się okienko alarmowe. Ponieważ programiści podeszli bardzo poważnie do tematu bezpieczeństwa, można oczekiwać,że każda kolejna wersja Netscape Navigatora i Microsoft Internet Explorera będzie bardziej bezpieczna. Bezpieczeństwo sieciowe jest gorącym tematem w dzisiejszych dniach ponieważ informacje przekazywane przez internet wiążą się z dużym ryzykiem. Programy CGI, plug-iny, aplety Javy i cookies, wszystkie przedstawiają różny poziom ryzyka, o czym musisz mieć pełną świadomość Podstawy Modelu Obiektów JavaScript Możesz pracować z trzema rodzajami obiektów w JavaScript: Wbudowanymi typami danych Obiektami tworzącymi stronę WWW Obiektami narzędziowymi Poczytaj na temat każdego typu obiektu i różnic miedzy nimi. Wbudowane typy danych w JavaScript Liczby, wartości boolowskie (prawda lub fałsz) i ciągi (ciąg znaków otoczonych cudzysłowem, jak tata ) są takimi podstawowymi programistycznymi wbudowanymi blokami(nazwanymi typami danych), dla których nawet nie musisz tworzyć specjalnych obiektów aby użyć ich z JavaScript. Wszystko co musisz zrobić to określić wartości numeryczne, boolowskie lub ciągu, a interpreter JavaScript zadba o resztę. Spójrz na poniższe przykłady a zobaczysz co mam na myśli:
Wbudowany typ danej Boolean null JavaScript var lovework = true var middleinitial = null number var myage= 29 string var fullname = Jan Kowalski W tablicy tej stworzyliśmy cztery różne zmienne przechowujące cztery różne wartości, każda powiązana z innym typem danej. Pierwsza zmienna lovework jest związana z wartością boolowską true; druga zmienna middleinitial związana jest z wartością null; trzecia, myage związana jest z liczbą a czwarta wartość fullname jest związana z wartością ciągu. Biorąc wszystko razem, interpreter JavaScript odczyta te zmienne jako : Jan Kowalski is 29 age, has no middle initial, and loves his work Typ danej null oznacza nic (co jest różne od prostego nie przypisania żadnej wartości) Hierarchia obiektów JavaScript Możesz myśleć o hierarchii obiektów JavaScript jako hierarchii ulubionych obiektów w przeglądarce, ponieważ tworzysz te obiekty w HTML (kilka jest tworzonych nawet automatycznie przez samą przeglądarkę) przed zastosowaniem JavaScript. Po utworzeniu obiektów, JavaScript pozwala ci je badać, zmieniać,wykonywać obliczenia i wiele innych rzeczy. Zauważ w poniższej tabelce,że kiedy jeden obiekt jest zawarty w innym, wtedy zawartość jest odzwierciedlona w składni JavaScript. Na przykład, przycisk jest zdefiniowany w HTML jako część formularza, który sam jest częścią całkowitego dokumentu HTML. Tak więc jeśki chcesz mieć dostęp do przycisku musisz wpisać ten kod: document.nameofyoruform.nameofyourbutton Obiekt Znacznik HTML JavaScript window brak window (opcjonalne) document <HTML>...</HTML> document anchor <A>...</A> document.links[0] applet <APPLET>...</APPLET> document.applets[0] area <MAP>...<AREA>...</MAP> document.applets[0] form <FORM>...</FORM> document.someform button <INPUT TYPE= button > document.someform.somebutton checkbox <INPUT TYPE= checkbox > document.someform.mycheckbox fileupload <INPUT TYPE= file > document.someform.myfileupload hidden <INPUT TYPE= hidden > document.someform.somehidden image <IMG> document.someform.someimage password <INPUT TYPE= password document.someform.somepassword radio <INPUT TYPE= radio > document.someform.someradio reset <INPUT TYPE= reset document.someform.somereset select <SELECT>...</SELECT> document.someform.someselect submit <INPUT TYPE= submit > document.someform.somesubmit text <INPUT TYPE= text > document.someform.sometext
textarea <TEXTAREA>...</TEXTARE A> document.someform.sometextarea link <A>...</A> document.links[0] plugin <EMBED>..</EMBED> document.embeds[0] frame <FRAMESET>...</FRAMESE T> frame history brak history location brak location navigator brak navigator Zarówno obiekt window jak i frame mają powiązane aliasy (Alias jest to alternatywny sposób odnoszenia się do obiektów i powinny być używane aby stworzyć kod łatwiejszym do zrozumienia). Możesz odnieść się do window prze jedne z następujących identyfikatorów: parent (jeśli okno rozpatrywane jest rodzicem okna zawierającego odniesienie);self (jeśli rozpatrywane okno jest tym samym oknem jak to zawierające odniesienie); lub top (jeśli rozpatrywane okno jest na górze hierarchii okna zawierającego odniesienie). Podobnie do frame możemy się odnieść przez parent lub self. Obiekty narzędziowe Obiekty narzędziowe, w przeciwieństwie do obiektów, które tworzą hierarchię obiektów JavaScript, nie reprezentują żadnego fragmentu strony WWW. Jak pokazuje poniższa tabela, obiekty narzędziowe są w zasadzie użytecznymi samodzielnymi narzędziami tablice, data, funkcje których możesz chcieć użyć w instrukcjach JavaScript Obiekty narzędziowe Array Date Function Math Option JavaScript var mypets = new Array ( spike, Zeke, Fluffy ) var today = new Date() var salary = new Function ( base, commission, return base + base * commission)) var randomnumber = Math.randowm() var blues = new Option ( Blues music, blues, true, true ) Obiekt Option nie jest przeznaczony do samodzielnego zastosowania; ma tylko znaczenie kiedy jest połączony z select pola listy. Normalnie definiujesz opcję z instrukcjami HTML w tym samym czasie kiedy definiujesz samą listę pola. Podstawowe znaki interpunkcyjne i składnia Jako język programowania JavaScript jest bardzo łatwy do nauczenia. Podobnie jak język angielski, język JavaScript jest stworzony ze słów i znaków interpunkcyjnych, które musisz połączyć w formę sensownych instrukcji. Niektóre interpretery JavaScript są bardziej wymagające niż inne, ale nie gwarantuje,że w przyszłości się to poprawi. Jeśli jesteś zaznajomiony z C lub C++ możesz bezpośrednio zauważyć średnik jako instrukcja kończąca. Znak interpunkcyjny jest trochę mniej skomplikowany w JavaScript niż w C lub C++, ale nie jest to udowodnione w pełni!javascript pozwala jeszcze na elastyczne tworzenie pary irytujących błędów interpunkcyjnych -a ta sekcja pomoże ci ich uniknąć.
Zagnieżdżone apostrofy Używasz apostrofów w JavaScript - zarówno pojedynczego (') jak i podwójnego ('') - dla otaczania wartości ciągów Dlaczego obu rodzajów apostrofów? Ponieważ może dojść do sytuacji gdzie musisz użyć dwóch zbiorów apostrofów w pojedynczej instrukcji JavaScript Jeśli tak, musisz użyć zarówno pojedynczego jaki i podwójnego apostrofu. Jeśli spróbujesz zagnieździć podwójny apostrof wewnątrz podwójnego apostrofu (lub pojedynczy apostrof wewnątrz pojedynczego apostrofu),będą problemy. Oto przykład: onclick = alert('to jest przykład poprawnego zagnieżdżenia apostrofów') onclick = alert( Uwaga! Ta instrukcja stworzy błąd ) onclick = 'alert('uwaga!ta instrukcja jest również zła')' Jeśli chcesz aby podwójne apostrofy pojawiły się w ciągu, to co musisz zrobić: Poprzedzić podwójny apostrof backslashem. (To działanie jest nazywane przesunięciem apostrofu): alert( Czy lubisz film \ Fenomen\? ) Pary Skrypty JavaScript są zazwyczaj spotykane w parach pary znaczników otwierających i zamykających, nawiasy ostre (fundowane przez HTML), pary nawiasów, pary apostrofów i pary nawiasów klamrowych. Jeśli zapomnisz dodać element zamykający jakikolwiek, JavaScript złoży zażalenie.czasami takie zażalenie przyjmuje postać błędu składniowego; czasami otrzymasz dziwną stronę Poniżej jest kilka przykładów błędnych par : Instrukcje HTML/JavaScript Błąd <FORM NAME= myform Brak prawego nawiasu ostrego (>) <A HREF= http://www.tucows.com>two Cows Brak znacznika zamykającego </A> alert( Zakończone przetwarzania formularza Brak nawiasu ( ) ) firstname= Barney Brak apostrofu ( ) If (name= = ){alert( Proszę wpisać imię ) Brak nawiasu klamrowego ( ) Pisownia i pisanie wielkimi literami Wszystkie słowa używane w programowaniu JavaScript musi być wpisane poprawnie. Na przykład, jeśli tworzysz zmienną nazwaną lastname a potem próbujesz wyświetlić ją na swojej stronie WWW ale pomyliłeś się i wpisałeś lastnam, otrzymasz błąd. Jako człowiek możesz tego nie zauważyć ale nie zapomni o tym interpreter JavaScript. Wielkość znaku jest równie ważna jak poprawna pisownia. Na przykład, interpreter JavaScript nie rozpozna zmiennej nazwanej lastname jeśli wpiszesz LASTNAME. Góra dół Interpreter JavaScript czyta od góry do dołu, od lewej do prawej. Więc zanim zaczniesz czegoś używać, to coś musi być zdefiniowane. Żeby wywołać (lub użyć) funkcji, musisz najpierw zdefiniować tą funkcję we wcześniejszych instrukcjach. Podobnie, jeśli chcesz mieć dostęp do zmiennej, musisz zadeklarować najpierw tą zmienną. Komentarze (/*...*/ i //) Komentarze nie są przetwarzane przez wszystkie interpretery JavaScript; są ignorowane. Celem komentarza jest danie autorowi skryptu możliwość komunikowania z nim (jeśli zapomniałbyś co dany skrypt ma wykonywać) i innymi ludźmi, którzy czytają ten skrypt. Istnieją dwa różne rodzaje komentarza.może się on pojawić gdziekolwiek w skrypcie, tak wiele razy ile chcesz. Pojedynczą linię komentarza tworzysz przez wpisanie dwóch slashy (//) na początku tej linii, po czym następuje komentarz:
// To jest pojedyncza linia komentarza Komentarz wieloliniowy tworzymy stawiając na początku linii /* i kończąc kometarz znakiem */ : /* To jest komentarz wieloliniowy zawsze pamiętaj aby zamykać go gdyż w przeciwnym razie otrzymasz błąd przy próbie wyświetlenia skryptu */ Zagnieżdżanie komentarzy wieloliniowych jest złym pomysłem. Blok kodu jak poniższy może spowodować kłopot ponieważ interpreter zignoruje drugi /* kiedy dojdzie do pierwszego */: /* Zblokowana sekcja dla celów testowych... /* Tu jest komentarz */ */ Wyrażenie warunkowe: if...else Wyrażenie if..else jest nazywane wyrażeniem warunkowym ponieważ używane jest do testowania czy pewien warunek jest prawdziwy.warunek może by zmienną, instrukcją lub wyrażeniem wszystko co może być sprowadzone przez interpreter JavaScript jako prosta odpowiedź prawda czy fałsz. Jeśli warunek to prawda, interpreter wykonuje wszystkie instrukcje pomiędzy nawiasami klamrowymi stojące po klauzuli if. Jeśli warunek jest fałszem, interpreter wykonuje instrukcje pomiędzy nawiasami klamrowymi stojącymi po klauzuli else. if (warunek) { instrukcje [ else { instrukcje ] Nawiasy kwadratowe otaczające klauzulę else oznacza,że jest ona opcjonalna. Zasada mówi,że wyrażenie if..else nie może mieć innych instrukcji zagnieżdżonych wewnątrz. Pamiętaj aby wstawić nawiasy klamrowe dla każdej pary if...else. Nie ma tu żadnej swobody działania; muszą być nawisy klamrowe, nie zwykłe i muszą one iść w parze, podobnie jak w tym przykładzie: if (numberordered <= 100) { //obliczenia else { //inne obliczenia Pętle Pętle są powszechną konstrukcją programistyczną, której możesz użyć do wykonania pojedynczego zadania wiele razy, w sposób możliwie najbardziej skumulowany. JavaScript zawiera dwa podstawowe rodzaje pętli: for i while. Oba rodzaje pętli są objaśnione w tej sekcji wraz z innymi słowami kluczowymi stosowanymi przy pętlach. break Słowo kluczowe break musi być używane wewnątrz pętli (pętle for, for...in, i while).kiedy interpreter JavaScript napotka instrukcję break, przerwie całą pętlę i zacznie ponownie interpretację od pierwszej linii następującej po pętli: Na przykład: for ( var i = 1; i< = 20; i++ ) {... if ( i = = 13) { //tylko dochodzi do 12
break document.writeln(i) // to jest miejsce gdzie interpreter zacznie ponownie //po break A tu mamy dane wyjściowe: 1 2 3 4 5 6 7 8 9 10 11 12 continue Podobnie jak break, continue może być użyty wewnątrz for, for...in lub while. Kiedy interpreter JavaScript napotka instrukcję continue, zatrzyma się skacząc na początek pętli i kontynuuje normalnie. Wyjaśni to poniższy przykład : for (var i =1 ; i< = 20; i++) { if (i = = 13) {//Przesąd! Nie drukuje 13 continue document.writeln(i) Dane wyjściowe pokazują dokładnie jak pracuje continue. Możesz chcieć porównać dane wyjściowe z tymi wygenerowanymi przez break: 1 2 3 4 5 6 7 8 9 10 11 12 14 15 16 17 18 19 20 W danych wyjściowych z continue widać,że liczba 13 została pominięta ale pętla kontynuuje działanie i drukuje liczby od 14 do 20. (chyba,że jest polecenie break, która zatrzymuje pętlę po wydrukowaniu liczby 12) Słowo kluczowe continue jest użyteczne dla obsługi wyjątków. Na przykład możesz chcieć przetworzyć wszystkie pozycje w grupie w ten sam sposób z wyjątkiem jednego lub dwóch specjalnych przypadków. for Pętla for pochodzi wprost z języka C.Najpierw spójrzmy na jej ogólną budowę: for ([wyrażenie początkowe]; [warunek]; [wyrażenie aktualizujące]) { instrukcje ta wprowadza trzy terminy które mogą być dla ciebie nowością: wyrażenie początkowe: myśl o wyrażeniu początkowym jako punkcie startowym warunek: warunek jest wyrażeniem JavaScript będącym testowanym za każdym razem kiedy interpreter przechodzi przez pętlę wyrażenie aktualizujące: Jeśli test warunku to prawda, interpreter JavaScript wykona wyrażenie aktualizujące przed przejściem do kolejnego wykonania pętli Poniżej mamy prosty przykład który powinien pomóc w zrozumieniu pętli for for (var i = 1; i < = 10 ; i++ ){ dovument.writeln(i) Poniższe kroki opisują co dzieje się podczas pętli for 1. Zmienna i jest ustawiona na 1