Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00415 007310 11067869 na godz. na dobę w sumie
Po prostu Internet. Techniki zaawansowane - książka
Po prostu Internet. Techniki zaawansowane - książka
Autor: Liczba stron: 128
Wydawca: Helion Język publikacji: polski
ISBN: 83-7197-670-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> podstawy komputera >> podstawy internetu
Porównaj ceny (książka, ebook, audiobook).

Doskonały podręcznik dla początkujących użytkowników Internetu, którzy chcieliby poznać techniki stosowane przy tworzeniu stron WWW. Już wkrótce Kaskadowe arkusze stylów, JavaScript, dynamiczny HTML nie będą stanowiły tajemnicy. Dzięki tej książce nauczysz się tworzyć doskonałe strony WWW, które podbiją internetowe rankingi popularności.

Książka ta jest kontynuacją przewodnika 'Po prostu Internet'. Rozszerza informacje dotyczące tworzenia stron internetowych na komputerach klasy PC o zagadnienie Kaskadowych Arkuszy Stylów (CSS), tworzenie skryptów w języku JavaScript i tworzenie formularzy na stronach WWW. Nie zabrakło również wprowadzenia do DHTML.

Niniejsza pozycja przeznaczona jest głównie dla osób, które pragną rozszerzyć swoją wiedzę zdobytą podczas pracy z książką 'Po prostu Internet', jednakże nie występują w niej odwołania do tego przewodnika, więc pozycję tą można spokojnie polecić także dla osób, które wiedzę z zakresu podstaw Internetu i tworzenia stron internetowych zdobyły z zupełnie innego źródła.

Książka, którą trzymasz w ręku, jest wyjątkowa pod wieloma względami: Dzięki tej książce nigdy nie będziesz sam!

dedykacja Autora

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TRE(cid:140)CI SPIS TRE(cid:140)CI KATALOG KSI¥flEK KATALOG KSI¥flEK KATALOG ONLINE KATALOG ONLINE ZAM(cid:211)W DRUKOWANY KATALOG ZAM(cid:211)W DRUKOWANY KATALOG TW(cid:211)J KOSZYK TW(cid:211)J KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE Po prostu Internet. Techniki zaawansowane Tomasz Trejderowski Autor: ISBN: 83-7197-670-4 Format: B5, stron: 122 Doskona‡y podrŒcznik dla pocz„tkuj„cych u¿ytkownik(cid:243)w Internetu, kt(cid:243)rzy chcieliby pozna(cid:230) techniki stosowane przy tworzeniu stron WWW. Ju¿ wkr(cid:243)tce Kaskadowe arkusze styl(cid:243)w, JavaScript, dynamiczny HTML nie bŒd„ stanowi‡y tajemnicy. DziŒki tej ksi„¿ce nauczysz siŒ tworzy(cid:230) doskona‡e strony WWW, kt(cid:243)re podbij„ internetowe rankingi popularno(cid:156)ci. ZAM(cid:211)W INFORMACJE ZAM(cid:211)W INFORMACJE O NOWO(cid:140)CIACH O NOWO(cid:140)CIACH ZAM(cid:211)W CENNIK ZAM(cid:211)W CENNIK Ksi„¿ka ta jest kontynuacj„ przewodnika (cid:132)Po prostu Internet(cid:148). Rozszerza informacje dotycz„ce tworzenia stron internetowych na komputerach klasy PC o zagadnienie Kaskadowych Arkuszy Styl(cid:243)w (CSS), tworzenie skrypt(cid:243)w w jŒzyku JavaScript itworzenie formularzy na stronach WWW. Nie zabrak‡o r(cid:243)wnie¿ wprowadzenia do DHTML. CZYTELNIA CZYTELNIA FRAGMENTY KSI¥flEK ONLINE FRAGMENTY KSI¥flEK ONLINE Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl Niniejsza pozycja przeznaczona jest g‡(cid:243)wnie dla os(cid:243)b, kt(cid:243)re pragn„ rozszerzy(cid:230) swoj„ wiedzŒ zdobyt„ podczas pracy z ksi„¿k„ (cid:132)Po prostu Internet(cid:148), jednak¿e nie wystŒpuj„ w(cid:160) niej odwo‡ania do tego przewodnika, wiŒc pozycjŒ t„ mo¿na spokojnie poleci(cid:230) tak¿e dla os(cid:243)b, kt(cid:243)re wiedzŒ z zakresu podstaw Internetu i tworzenia stron internetowych zdoby‡y z zupe‡nie innego (cid:159)r(cid:243)d‡a. Ksi„¿ka, kt(cid:243)r„ trzymasz w rŒku, jest wyj„tkowa pod wieloma wzglŒdami: Ka¿de omawiane zagadnienie jest przedstawiane krok po kroku, tak by nikt nie mia‡ problem(cid:243)w z powt(cid:243)rzeniem danego rozwi„zania na w‡asnym komputerze. Ka¿de omawiane zagadnienie jest tak¿e bardzo bogato ilustrowane (cid:151) ksi„¿ka zwiera ponad dwie(cid:156)cie ilustracji! Omawiane problemy s„ wzbogacane o zestawienia tabelaryczne najczŒ(cid:156)ciej wykorzystywanych funkcji, obiekt(cid:243)w czy styl(cid:243)w. Autor skupia siŒ na zgodno(cid:156)ci z obowi„zuj„cym od kilku lat standardem HTML 4.0 --czytelnik w trakcie lektury ju¿ teraz nabywa wiedzŒ z zakresu, kt(cid:243)ry bŒdzie obowi„zywa‡ w przysz‡o(cid:156)ci, od momentu, gdy wiod„ce przegl„darki internetowe wprowadz„ kolejne rozwi„zania zdefiniowane przez tw(cid:243)rc(cid:243)w HTML 4.0 Autor ksi„¿ki udostŒpni‡ sw(cid:243)j prywatny adres e-mail. Mo¿esz wykorzysta(cid:230) go do wyra¿enia w‡asnych opinii na temat tej ksi„¿ki, ale przede wszystkim, by uzyska(cid:230) odpowied(cid:159), kt(cid:243)rej by(cid:230) mo¿e nie uda‡o Ci siŒ odnale(cid:159)(cid:230) w ksi„¿ce. Spis treści 7 9 Wstęp Rozdział 1. Wprowadzenie do CSS Wstęp ...................................................d...................................................d.... 9 Podstawowe wady i zalety stosowania CSS ............................................. 11 Rozdział 2. Tworzenie arkuszy stylów 13 Wstęp ...................................................d...................................................d.. 13 Style na trzy sposoby ...................................................d............................. 14 Anatomia stylu ...................................................d....................................... 16 O czym warto pamiętać... ...................................................d...................... 17 Odnośniki...................................................d............................................... 19 Klasy ...................................................d...................................................d... 20 Własne znaczniki HTML ...................................................d....................... 21 Jednostki ...................................................d................................................ 22 Dziedziczenie stylów ...................................................d............................. 23 O czym warto pamiętać ...................................................d......................... 24 S p i s t r e ś c i Rozdział 3. Przykładowe style 25 Właściwości czcionki...................................................d............................. 26 Właściwości tekstu (akapitu) ...................................................d................. 28 Kolor i tło...................................................d............................................... 30 Bloki...................................................d...................................................d.... 31 Listy ...................................................d...................................................d.... 36 Tabele...................................................d...................................................d.. 38 Rozdział 4. Wprowadzenie do JavaScript 41 „DżawaSkrypt” ...................................................d...................................... 41 Co to znaczy „skryptowy”? ...................................................d................... 43 Złe nawyki ...................................................d............................................. 44 W czym pisać skrypty? ...................................................d.......................... 46 3 i c ś e r t s i p S Spis treści Rozdział 5. Podstawy JavaScript 47 Zmienne ...................................................d................................................. 47 Deklarowanie zmiennych...................................................d....................... 49 Umieszczanie skryptu JavaScript na stronie WWW................................. 50 Funkcje...................................................d...................................................d 52 Zdarzenia ...................................................d............................................... 54 Operatory ...................................................d............................................... 55 Instrukcje warunkowe ...................................................d............................ 59 Pętle ...................................................d...................................................d.... 62 Dziedziczenie w JavaScript ...................................................d................... 64 Rozdział 6. Obiekty w JavaScript 65 Zdarzenia, metody i właściwości ...................................................d........... 66 Konstruktory ...................................................d.......................................... 67 Obiekt document...................................................d.................................... 68 Obiekt history ...................................................d........................................ 71 Obiekt math...................................................d............................................ 72 Obiekt date ...................................................d............................................. 73 Obiekt string ...................................................d.......................................... 75 Obiekt window...................................................d....................................... 77 Obiekt window, a problematyka ramek w dokumencie............................ 81 Podsumowanie ...................................................d....................................... 81 Rozdział 7. Wprowadzenie do formularzy 83 Wprowadzenie ...................................................d....................................... 83 Ramy formularza ...................................................d................................... 84 Typy formularzy ...................................................d.................................... 85 FORM /FORM ...................................................d.............................. 86 Filozofia przesyłania danych ...................................................d................. 87 Rozdział 8. Budowanie formularzy 89 INPUT ...................................................d............................................... 90 TEXTAREA — Obszary tekstowe ...................................................d... 94 Listy wyboru ...................................................d.......................................... 95 Przesyłanie plików ...................................................d................................. 97 Pola ukryte ...................................................d............................................. 98 Klawisze sterujące formularza ...................................................d............... 99 Elementy nieaktywne...................................................d........................... 102 4 Rozdział 9. Obsługa formularzy przed wysłaniem Spis treści 103 Dostęp do formularza z poziomu JavaScript .......................................... 104 Przykłady wykorzystania JavaScript w obsłudze formularzy................. 105 Rozdział 10. Obsługa formularzy po wysłaniu 111 Wysyłanie danych bezpośrednio na adres e-mail ................................... 112 Wysyłanie danych poprzez skrypt na serwerze ...................................... 113 Rozdział 11. Wprowadzenie do DHTML 115 DHTML, którego nie ma… ...................................................d................. 116 DOM ...................................................d...................................................d. 117 Jaka przeglądarka...................................................d................................. 119 Nowe zdarzenia...................................................d.................................... 119 Nowy JavaScript ...................................................d.................................. 120 Potęga w Twoich rękach… ...................................................d.................. 122 To już jest koniec… ...................................................d............................. 122 Skorowidz 123 S p i s t r e ś c i 5 Podstawy JavaScript Zmienne Najprościej mówiąc, zmienna to zasobnik (ang. container), jednoznacznie określony unikalną nazwą, przechowujący w sobie jakąś wartość. Język JavaScript rozróżnia cztery podstawowe typy zmiennych: Rysunek 5.1. Różne rodzaje zmiennych u liczby (różne formaty zapisu), u łańcuchy tekstowe, u wartości logiczne, u null. Poniżej pokrótce omówiona została każdy z powyższych typów zmiennych. Należy zwrócić uwagę na fakt, który nie występuje w większości popularnych języków programowania. Otóż, w JavaScript wprowadzone zostały operatory dodawania do siebie zmiennych bez względu na ich typ. To znaczy możliwe jest dodanie do zmiennej typue, np. łańcuch tekstowy innej zmiennej typu np. liczba,e bez konieczności zamiany któregoś z typów zmiennej na ten sam jak druga zmienna (rysunki 5.1 – 5.3). Liczby JavaScript nie rozróżnia typu liczby — zmienna liczbowa może przechowywać wszystkie liczby zmiennoprzecinkowe i całkowite, bez względu na to czy są to liczby rzeczywiste, dodatnie, ujemne, a neawet bez względu na to czy są one zapisane w systemie dziesiętnym, ósemkowym czy szesnastkowym. Dokładniej obrazuje to poniższa tabela. Z m i e n n e Rysunek 5.2. Przykład mieszania różnych typów zmiennych w jednym poleceniu języka JavaScript Rysunek 5.3. Efekt działania powyższego kodu w przeglądarce Typ zapisu liczby: Przykłady: Uwagi: 3.1415 — 314e-2, 78E17 Jest to tak zwana „eksponenta”. — Liczbę poprzedzamy cyfrą  (zero), by odróżnić ją od tej samej zapisanej w systemie dziesiętnym. j.w. przy czym liczbę poprzedza się kombinacją Z (zero-iks); wielkość znaku x nie ma znaczenia. 47 Liczby zmiennoprzecinkowe (zapis standardowy) Liczby zmiennoprzecinkowe (zapis naukowy) liczby całkowite Liczby w systemie ósemkowym 77 013 Liczby w systemie szesnastkowym 0xFF, 0XE3 Rozdział 5. Należy pamiętać, że JavaScript korzysta ze standardów amerykańskich, gdzie do oddzielenia części ułamkowej używa się znaku kropki (), a nie przecinka ()! Jeżeli nie znasz różnic ani metod przeliczania liczb zapisanych w systemach dziesiętnym, szesnastkowym i ósemkowym — poszukaj w dowolnym podręczniku podstaw informatyki, tam znajdziesz dokładne przedstawienie tego zagadnienia. Łańcuchy tekstowe Zmienne typu łańcuch tekstowy (zawierające jeden lub więcej znaków wprowadzonych z klawiatury) odróżnia od innych typów zmiennych znak podwójnego cudzysłowu () występujący na początku i końcu. Taka zmienna jest traktowana jako tekst bez względu na zawartość, czyli zarówno /KUKQ jaki i  są traktowane jako tekst mimo, że drugi przykład mógłby sugerować coś innego. Kombinacja dwóch cudzysłowów () — czyli tzw. łańcuch pusty, także jest traktowany jako tekst. W szczególnych przypadkach możliwe jest zastąpienie pary cudzysłowów podwójnych przez parę cudzysłowów pojedynczych (  ), ale W3C zaleca niedopuszczanie do takich sytuacji. Wartości logiczne Wartość logiczna to typ pochodny od zmiennej liczbowej, lecz może on przyjmować tylko dwie wartości: prawda (VTWG) i fałsz (HCNUG). Typ null To specjalny typ pusty, rzadko wykorzystywany w skryptach. Nie należy mylić go ani z wartością 0 (jest to zmienna typu liczba) ani z  (jest to zmienna typu łańcuch tekstowy). e n n e i m Z 48 Rysunek 5.4. Przykład deklarowania zmiennej bez określania jej typu Rysunek 5.5. Deklarowanie zmiennej z jednoczesnym określeniem jej typu oraz nadaniem jej wartości Podstawy JavaScript Deklarowanie zmiennych Jeżeli wykorzystujesz zmienną w więcej niż jednym miejscu w skrypcie, musisz ją zadeklarować. Dzięki temu będzie ona „widoczna” w całym kodzie, to znaczy — jej wartość w danej chwili będzie taka sama w każdym miejscu skryptu. Aby zadeklarować zmienną, poprzedź jej nazwę zastrzeżonym słowem XCT, a po jej nazwie wpisz znak średnika (jest to uniwersalny znak, służący do rozdzielania kolejnych poleceń języka JavaScript). Przykład takiej deklaracji jest przedstawiony na rysunku 5.4. Możesz także od razu nadać zmiennej wartość, a tym samym poinstruować interpreter JavaScript z jakim typem zmiennej ma on do czynienia w przypadku konkretnej nazwy. Aby dokonać takiej deklaracji, pomiędzy nazwą zmiennej, a znakiem średnika wstaw znak równości (przypisania) oraz podaj wartość zgodną z typem zmiennej jaki chcesz zadeklarować. Przykłady takich deklaracji znajdują się na rysunku 5.5. D e k l a r o w a n i e z m i e n n y c h 49 Rozdział 5. Umieszczanie skryptu JavaScript na stronie WWW Mówimy teraz o skryptach wyzwalanych automatycznie przez przeglądarkę w czasie ładowania zawartości strony. W odróżnieniu od nich, są jeszcze skrypty wyzwalane jako efekt zajścia jakiegoś zdarzenia (bo jak pamiętasz JavaScript jest językiem obiektowo-zdarzeniowym), ale o nich będzie mowa później. Są dwa sposoby umieszczenia skryptu wyzwalanego automatycznie, w dokumencie HTML. Osadzanie skryptu bezpośrednio w dokumencie HTML. Pierwszym z nich jest wstawienie kolejnych poleceń pomiędzy znacznikami 5 4+26 i 5 4+26 . Są dwie szkoły. Jedna z nich twierdzi, że polecenia języka JavaScript wraz z powyższymi znacznikami należy umieszczać pomiędzy sekcjami * # oraz $1 ; . Druga szkoła twierdzi, że skrypty należy umieszczać w sekcji $1 ; . Wybór należy do Ciebie — w obu przypadkach przeglądarka powinna wykonać skrypt bez błędów (rysunki 5.6 i 5.7). Możesz mieć dowolną ilość skryptów osadzonych w treści dokumentu HTML, zostaną one wykonane po kolei, tak jak kolejność ich umieszczania w dokumencie (rysunki 5.8 i 5.9). e i n o r t s a n t p i r c S a v a J u t p y r k s e i n a z c z s e i m U Rysunek 5.6. Sposób umieszczenia najprostszego skryptu w treści dokumentu HTML… Rysunek 5.7. …oraz efekt takiego działania, zaprezentowany w przeglądarce Rysunek 5.8. Możesz mieć dowolną ilość skryptów osadzonych w dokumencie HTML 50 Rysunek 5.9. Zostaną one wykonane po kolei tak jak były umieszczone przez twórcę Podstawy JavaScript Jak widać na rysunkach 5.6 – 5.9 skrypty zostały wykonane bezbłędnie bez informowania przeglądarki z jakim językiem programowania ma do czynienia (bo JavaScript nie jest jedynym językiem, który można umieszczać na stronach WWW). Mimo to W3C zaleca by umieszczać w znaczniku 5 4+26 informację o tym. Możesz to zrobić albo według starej metody, poprzez użycie atrybutu .#0)7#) tegoż znacznika (tak jak na rysunku 5.10). Zalecane jest oczywiście stosowanie nowej metody (wprowadzonej wraz z HTML 4.0), która została przedstawiona na ilustracji 5.11. Wywoływanie zewnętrznego pliku Jeżeli na jednej stronie WWW wykorzystujesz większą ilość skryptów JavaScript, ich umieszczenie bezpośrednio w treści dokumentu może spowodować niezły bałagan. Warto wtedy pomyśleć o „wyrzuceniu” ich do zewnętrznego pliku. Rozwiązanie takie jest również bardzo dobre, jeżeli na kilku różnych stronach wykorzystujesz te same skrypty. To dokładnie ta sama sytuacja jak z omawianymi wcześniej stylami — jeżeli będziesz chciał zmienić fragment kodu, zmienisz go w zewnętrznym pliku, a wszystkie strony odwołujące się do tego pliku automatycznie uwzględnią te zmiany. Stosując poprzednią metodę musiałbyś aktualizować każdy plik zawierający kod JavaScript. Aby skorzystać z tej metody, zapisz cały kod w osobnym pliku. Nadaj mu dowolną nazwę oraz rozszerzenie *.js. Następnie w znaczniku 5 4+26 dodaj nowy atrybut 54 , a jako jego wartość nazwę pliku, w którym przed chwilą zapisałeś cały kod JavaScript. Zostało to przedstawione na rysunkach 5.12 – 5.14. Problematyka ścieżek dostępu (dla przypadku, kiedy plik zawierający skrypt nie znajduje się w tym samym katalogu co dokument HTML) została omówiona w mojej poprzedniej książce zatytułowanej „Po prostu Internet”, która ukazała się nakładem wydawnictwa Helion w grudniu 2001 roku. 51 U m i e s z c z a n i e s k r y p t u J a v a S c r i p t n a s t r o n i e Rysunek 5.10. Poprzednia metoda deklaracji typu zastosowanego języka skryptowego Rysunek 5.11. Metoda deklaracji wprowadzona w HTML 4.0 Rysunek 5.12. Kod JavaScript zapisany w osobnym pliku o rozszerzeniu *.js Rysunek 5.13. Odwołanie do zewnętrznego skryptu w treści dokumentu HTML Rysunek 5.14. Efekt powyższych operacji w przeglądarce Rozdział 5. Funkcje Deklarowanie funkcji Jak każdy język programowania, także JavaScript umożliwia programiście tworzenie funkcji. Funkcje to wyraźnie ograniczone bloki kodu, które są wywoływane w innych częściach tego kodu. Mogą one być wywoływane „tak jak są” lub z określoną listą parametrów, których wartość można odczytać wewnątrz takiej funkcji. Sama funkcja może też zwrócić jakąś wartość. Dzielenie kodu na funkcje jest niezbędne, jeżeli planujesz wywoływać różne jego elementy jako reakcję na określone zdarzenia (patrz dalej). Aby dodać funkcję do kodu JavaScript, w dowolnym jego miejscu użyj zastrzeżonego słowa HWPEVKQP, po nim wstaw znak odstępu i podaj nazwę funkcji (nie możne ona zawierać odstępów ani znaków specjalnych), a na koniec kombinację dwóch nawiasów . Następnie w nowej linijce wstaw nawias klamrowy lewy (]). Teraz możesz (albo w jednej linijce, albo w kilku) wpisać cały kod tej procedury. Definicję procedury zakańczasz wstawiając nawias klamrowy prawy (_). Przykład takiej deklaracji znajduje się na rysunku 5.15. Zgodnie z tym co napisałem wcześniej, w JavaScript możesz każdej funkcji przyporządkować jeden lub więcej argumentów, a następnie korzystać z nich wewnątrz tej funkcji tak jak korzysta się z każdej innej zmiennej. Pamiętaj, że jeżeli nie zadeklarujesze zmiennej na początku skryptu to jej wartość wewnątrz funkcji będzie inna niż poza funkcją. Jeżeli używasz więcej niż jednego argumentu — i w deklaracji funkcji i w ewentualnym odwołaniu do niej oddziel je znakiem przecinka (). Użyj zastrzeżonego słowa TGVWTP, aby określić jaką wartość dana funkcja ma zwrócić. Taką zwróconą wartość możesz później (traktując ją jak zwykłą zmienną) wykorzystać w innej części skryptu — np. w innej funkcji (rysunki 5.16 – 5.18). e j c k n u F Rysunek 5.15. Przykład podstawowej deklaracji funkcji języka JavaScript Rysunek 5.16. Przykład funkcji z jednym parametrem, która zwraca określoną wartość Rysunek 5.17. Funkcja korzystająca z dwóch argumentów 52 Rysunek 5.18. Efekt działania powyższego skryptu Podstawy JavaScript Wywoływanie zadeklarowanej funkcji To proste! Po prostu w miejscu, w którym tego potrzebujesz napisz nazwę funkcji, a w nawiasach wartości jakie chcesz nadać jej konkretnym parametrom (o ile dana funkcja posiada jakieś parametry). Najczęściej wywoływanie określonych funkcji stosuje się w przypadku zdarzeń, o czym dalej (rysunek 5.19). Rysunek 5.19. Przykład wywołania zadeklarowanej wcześniej funkcji F u n k c j e 53 Rozdział 5. Zdarzenia Podstawy Pewna grupa znaczników umożliwia obsługę zdarzeń. Zdarzenia to pewne procesy zachodzące w związku z zachowaniem się użytkownika na Twojej stronie internetowej — ruchem myszki po ekranie, klikaniem na różnych elementach czy wypełnianiem pól formularzy. Aby dodać do swojej strony internetowej obsługę jakiegoś zdarzenia, po pierwsze zdecyduj się jaki obiekt (znacznik) ma to zdarzenie obsługiwać. Następnie dodaj mu atrybut, który będzie nazywał się tak jak jedna z wymienionych poniżej, zastrzeżonych nazw funkcji, dodaj znak równości, a następnie w cudzysłowie wpisz nazwę zadeklarowanej wcześniej funkcji wraz ze wszystkimi argumentami. (rysunki 5.20 – 5.22) A co zrobić w sytuacji, gdy parametr wywoływanej funkcji musi być podany w cudzysłowach, gdyż zmienna jest typu łańcuch tekstowy? Otóż w tej sytuacji możesz zastosować cudzysłowy pojedyncze ( i ), by podać wartości zmiennych typu łańcuch tekstowy. Zaś samo wywołanie zdarzenia wraz z nazwą funkcji (wartość określonego atrybutu) bez zmian podajesz w cudzysłowach podwójnych ( i ). (rysunek 5.23) Jeżeli natomiast musisz użyć znaku apostrofu (cudzysłowu pojedynczego) jako elementu argumentu typu łańcuch tekstowy, poprzedź go znacznikiem odwrotnego ukośnika. Dzięki temu unikniesz błędów przy wykonywaniu skryptu. (rysunek 5.24) Lista zdarzeń W JavaScript możesz pisać skrypty, których funkcje będą reagowały na jedną spośród 18 niżej opisanych funkcji. a i n e z r a d Z Rysunek 5.20. Przykładowy skrypt obrazujący wykorzystanie zdarzeń Rysunek 5.21. Efekt działania powyższego skryptu w przeglądarce Rysunek 5.22. Znacznik z zadeklarowanym zdarzeniem (kliknięcie); w przypadku jego zajścia zostanie wywołana funkcja JavaScript zadeklarowana we wcześniejszym bloku SCRIPT /SCRIPT Rysunek 5.24. Sposób radzenia sobie w przypadku, gdy wewnątrz łańcucha tekstowego niezbędne jest użycie apostrofa 54 Rysunek 5.23. Wywołanie funkcji (jako reakcji na zajście zdarzenia) z argumentami typu łańcuch tekstowy — wykorzystano pojedyncze i podwójne cudzysłowy Podstawy JavaScript Operatory Opisane wcześniej zmienne mogą przyjmować określoną wartość, ale aby można było tę wartość im przypisać lub zmodyfikować, niezbędne staje się wykorzystanie operatorów — sekwencji zastrzeżonych znaków, których zaistnienie w dowolnym miejscu kodu powoduje zmianę wartości zmiennej. Operatory w JavaScript zostały podzielone na kilka grup (rysunek 5.25). Rysunek 5.25. Przykłady operatorów w JavaScript, pierwszy jest operatorem przypisania, drugi operatorem matematycznym O p e r a t o r y Zdarzenie Moment zajścia 1P NKEM 1P DN NKEM Użytkownik kliknął klawiszem myszki na danym obiekcie. j.w. — dwukrotne kliknięcie. 1P/QWUG QYP Użytkownik wskazał dany obiekt wskaźnikiem myszki i nacisnął klawisz, lecz nie zwolnił go. 1P/QWUG7R Występuje bezpośrednio po poprzednim zdarzeniu — użytkownik zwolnił klawisz myszki. 1P/QWUG1XGT Użytkownik wskazał myszką dany obiekt. 1P/QWUG/QXG Użytkownik przesuwa myszkę nad danym obiektem. 1P/QWUG1WV Wskaźnik myszki przemieścił się poza obszar Przykładowe znaczniki $76610 , # , +/) j.w. j.w. j.w. j.w. j.w. j.w. 1P.QCF 1P7P.QCF 1P5GNGEV 1P(QEWU 1P$NWT danego obiektu. Zachodzi w momencie rozpoczynania rysowania zawartości strony na podstawie jej kodu HTML. Tylko $1 ; i (4#/ 5 6 Zachodzi w momencie opuszczenia danej strony przez przeglądarkę celem udania się pod nowy adres. j.w. Zachodzi w momencie zaznaczenia przez użytkownika jakiegoś fragmentu tekstu w obiekcie, w którym można pisać. Tylko elementy formularza — znaczniki +0276 Zachodzi w momencie uaktywnienia (poprzez użycie klawisza Tab lub wykorzystanie myszki) jakiegoś elementu formularza. j.w. Zachodzi, gdy dany aktywny element formularza przestaje być aktywny, a zaznaczenie (focus) przemieszcza się na inny obiekt. Tylko wybrane elementy formularza — znaczniki +0276 1P-G[2TGUU Użytkownik wpisuje coś w elementach formularza, które j.w. 1P-G[ QYP 1P-G[7R 1P JCPIG 1P5WDOKV 1P4GUGV umożliwiają wprowadzanie tekstu. Użytkownik nacisnął klawisz na klawiaturze, ale nie zwolnił go. Występuje bezpośrednio po poprzednim zdarzeniu wskutek zwolnienia naciśniętego klawisza. Zmiana zawartości elementu umożliwiającego wprowadzanie znaków. j.w. j.w. j.w. Wysłanie formularza Tylko znacznik (14/ Wyczyszczenie zawartości formularza j.w. 55 Rozdział 5. Operatory matematyczne Przez niektórych bywają nazywane operatorami arytmetycznymi — dzięki nim dokonuje się operacji na liczbach. Operatory przypisania Jak nazwa wskazuje, są to operatory przypisujące konkretną wartość (podaną jako argument po prawej stronie operatora) zmiennej (znajdującej się po lewej stronie operatora) (rysunek 5.26). Rysunek 5.26. Nawet zwykłe zadeklarowanie zmiennej z jednoczesnym określeniem jej typu i nadaniem początkowej wartości, wiąże się z wykorzystaniem operatora przypisania Operator Działanie Ō    y r o t a r e p O dodawanie dwóch liczb odejmowanie dwóch liczb mnożenie dwóch liczb dzielenie dwóch liczb reszta z dzielenia zwiększenie wartości o jeden zmniejszenie wartości o jeden Przykłady   U D      V V Operator Działanie Przykłady Dotyczy standardowe przypisanie V CNCŒOCMQVCŒ wszystkich typów zmiennych tak jak CC D tak jak CCD tak jak CC D tak jak CCD tak jak CCD C D CD C D CD CD tylko liczb tylko liczb tylko liczb tylko liczb tylko liczb       56 Podstawy JavaScript Operatory porównania Różnią się one tym od pozostałych operatorów, że porównują (w określony sposób) dwie wartości (podane z lewej i prawej strony operatora) i zwracają wartość logiczną typu prawda (VTWG) lub fałsz (HCNUG) w zależności od tego, czy zadany warunek porównania jest spełniony czy nie. Operatory te najczęściej wykorzystuje się w instrukcjach warunkowych i pętlach, o czym mowa w dalszej części rozdziału. Operatory logiczne W odróżnieniu od poprzednich, te operatory powodują nadanie argumentowi znajdującemu się po lewej stronie operatora konkretnej wartości logicznej typu prawda (VTWG) lub fałsz (HCNUG). Operatory porównania Operator Opis   ^^ negacja, zaprzeczenie koniunkcja alternatywa Wynik działania HCNUG, jeśli było VTWG lub odwrotnie. Wynikiem jest VTWG, jeśli oba argumenty są VTWG, w każdym innym przypadku wynikiem jest HCNUG. Wynikiem jest HCNUG, jeżeli oba argumenty są HCNUG, w każdym innym przypadku wynikiem jest VTWG. O p e r a t o r y Operatory logiczne Operator Sprawdzany warunek Przykłady      Czy oba wyrażenia są równe? Czy oba wyrażenia nie są równe? Czy lewe wyrażenie jest mniejsze od prawego? Czy lewe wyrażenie jest większe od prawego? Czy lewe wyrażenie jest mniejsze lub równe prawemu? Czy lewe wyrażenie jest większe lub równe prawemu? CD T CD CD C D CD C D 57 Rysunek 5.27. Przykład użycia operatora konkatenacji Rysunek 5.28. Efekt działania powyższego skryptu w przeglądarce Rozdział 5. Operator konkatenacji Konkatenacja to trudne słowo, przez które należy rozumieć po prostu łączenie tekstów. Nie chodzi tu o nowy operator, a jedynie o to, że jeżeli użyjesz operatora dodawania ( ) dla dwóch zmiennych typu łańcuch tekstowy, to w efekcie uzyskasz jedną zmienną typu łańcuch tekstowy, której wartość będą stanowiły połączone dwa łańcuchy poddane operacji konkatenacji (rysunki 5.27 i 5.28). Tak jak wspominałem wcześniej, możesz połączyć przy użyciu operatora dwie zmienne różnych typów (np. łańcuch tekstowy i liczbę) i nie spowoduje to wygenerowania komunikatu o błędzie, gdyż JavaScript automatycznie konwertuje typ zmiennej na pożądany. y r o t a r e p O 58 Podstawy JavaScript Instrukcje warunkowe Jest to jedna z podstaw programowania (pisania skryptów), gdyż umożliwia sterowanie przepływem programu — w zależności od tego czy określony warunek jest spełniony czy nie, wykonywane są odpowiednie partie skryptu. W JavaScript możesz korzystać z kilku typów instrukcji warunkowych — najważniejsze z nich zostały pokrótce opisane poniżej. if Najprostsza w użyciu i chyba przez to najpopularniejsza instrukcja warunkowa. Przykład wykorzystania tego rodzaju instrukcji warunkowej w skrypcie, został przedstawiony na rysunkach 5.29 – 5.32. Interpreter JavaScript sprawdza, czy warunek podany w nawiasach okrągłych zwraca wartość VTWG i jeśli tak to wykonuje polecenia zawarte w nawiasach klamrowych (] i _), po czym kontynuuje wykonywanie skryptu od następnej linii kodu. Jeżeli zadany warunek zwraca wartość HCNUG wszystkie polecenia w nawiasach klamrowych są ignorowane, a wykonywanie skryptu jest kontynuowane od pierwszej linii kodu po zamykającym nawiasie klamrowym (rysunki 5.29 – 5.32). I n s t r u k c j e w a r u n k o w e Rysunek 5.29. Fragment skryptu zawierającego instrukcję warunkową Rysunek 5.30. Uruchomienie skryptu w przeglądarce powoduje wyświetlenie monitu z prośbą o podanie imienia — oczywiście możesz wpisać co tylko ci się żywnie podoba… Rysunek 5.31. Efekt działania skryptu w przypadku, gdy warunek zadany w instrukcji warunkowej if został spełniony Rysunek 5.32. Efekt działania skryptu w przypadku niespełnienia zadanego warunku 59 Rozdział 5. if… else Jest to rozbudowana wersja poprzedniej instrukcji warunkowej. Jedyną różnicą jest dodany element GNUG, który oddziela (również nawiasami klamrowymi) instrukcje, które będą wykonane wyłącznie w przypadku, gdy zadany warunek nie jest spełniony. Popatrz na rysunki 5.33 i 5.34. ? Uproszczona (skrócona) wersja poprzedniej instrukcji warunkowej, przeznaczona dla rozwiązań w których zarówno spełnienie jaki i niespełnienie zadanego warunku spowoduje wykonanie tylko jednej (za każdym razem) instrukcji. Ogólna konstrukcja: YCTWPGM !KPUVTWMELCALGUNKARTCYFC KPUVTWMELCALGUNKAHCđU Przykład użycia w skrypcie jest na ilustracji 5.35. e w o k n u r a w e j c k u r t s n I Rysunek 5.33. Przykład skryptu wykorzystującego instrukcję warunkową if ... else Rysunek 5.34. Niespełnienie zadanego warunku powoduje wykonanie poleceń, które w żadnym innym przypadku nie zostałyby wykonane Rysunek 5.35. Uproszczona wersja instrukcji warunkowej if… else 60 Rysunek 5.36. Wykorzystane instrukcji warunkowej switch Rysunek 5.37. Efekt działania powyższego skryptu w przeglądarce Rysunek 5.38. Efekt działania tego samego skryptu w przypadku niezastosowania polecenia break przerywającego działanie całego bloku switch Podstawy JavaScript switch To rozbudowana wersja instrukcji warunkowej, która pozwala na analizę jednocześnie kilku możliwych wartości, zwracanych przez badanie danego warunku. Jak pamiętasz, poprzednie instrukcje warunkowe badały tylko zwrócenie VTWG lub HCNUG. W przypadku tej instrukcji możesz badać np. różne wyniki liczbowe. Przykład zastosowania tej instrukcji warunkowej przedstawiono na ilustracji 5.36. Pamiętać należy, że w przypadku napotkania sekwencji ECUG po której zadany warunek jest spełniony, wykonywane są wszystkie następujące instrukcje. Aby ograniczyć takie działanie, należy przerywać wykonywanie danego bloku skryptu dyrektywą DTGCM, gdyż w przeciwnym przypadku efekt końcowy może być inny niż pożądany — przykład na ilustracji 5.38. I n s t r u k c j e w a r u n k o w e 61 e l t ę P Rozdział 5. Pętle Pętle bywają czasami nazywane „blokami poleceń zapętlonych”. Jest to element, bez którego budowanie sprawnie działających skryptów byłoby niemożliwe lub bardzo trudne. Pętle to blok poleceń, które są wykonywane określoną bądź nieskończoną ilość razy. Stosowanie pętli zwiększa czytelność i przejrzystość skryptu, nie mówiąc o sytuacjach, w których ich zastosowanie jest wręcz niezbędne. Poznasz dwa rodzaje pętli. for Jest pętlą skończoną. Ogólna postać: HQT OKGPPCYCTWPMKARTGTYCPKC OKCPCAYCTVQUEKAOKGPPGL ] RQNGEGPKC _ gdzie w miejscu OKGPPC należy podać nazwę zmiennej wraz z jej początkową wartością, jako YCTWPMKARTGTYCPKC należy określić warunek, którego spełnienie będzie oznaczało przerwanie wykonywania pętli i przejście do pierwszego polecenia poza nawiasami klamrowymi zamykającymi pętlę, zaś OKCPCAYCTVQUEKA OKGPPGL to określenie, jak ma być zmieniana OKGPPC w każdym kolejnym przejściu pętli. Na rysunku 5.39 przedstawiono przykład najprostszej pętli skończonej typu HQT. continue Nie jest to osobny typ pętli, a jedynie polecenie uzupełniające działanie pętli HQT. Jego wystąpienie w dowolnym miejscu bloku wyznaczonego nawiasami klamrowymi (wewnątrz pętli HQT), zmusi interpreter JavaScript do zachowania się tak, jakby dany krok przebieg już się skończył — to znaczy do zignorowania wszystkich poleceń następujących po EQPVKWPWG oraz do rozpoczęcia nowego przebiegu pętli, oczywiście wraz ze zwiększeniem wartości OKGPPC w sposób określony przez OKCPCAYCTVQUEKAOKGPPGL (patrz definicja pętli HQT, powyżej). Przykładem takiego „ominięcia” jednego lub kilku przebiegów pętli jest zmodyfikowana wersja poprzedniego skryptu przedstawiona na rysunku 5.41. 62 Rysunek 5.39. Przykład prostej pętli typu for Rysunek 5.40. Efekt działania powyższego kodu, w przeglądarce Rysunek 5.41. Modyfikacja skryptu: „ominięcie” dwóch przebiegów pętli Rysunek 5.42. Efekt powyższego ominięcia, zaprezentowany w przeglądarce Rysunek 5.43. Prosty przykład wykorzystania pętli while Rysunek 5.44. Efekt działania skryptu — żadnych różnic w stosunku do rysunku 5.40 mimo, że do uzyskania obu efektów wykorzystano dwie różne pętle Rysunek 5.45. Przykład skryptu wykorzystującego pętlę nieskończoną; ze względu na optymalizacje, w przeglądarce nie ujrzysz żadnego efektu działania tego skryptu Podstawy JavaScript while Ogólna konstrukcja: YJKNG YCTWPMKARTGTYCPKC ] RQNGEGPKC _ gdzie YCTWPMKARTGTYCPKC mają identyczne znaczenie jak to podane przy omawianiu pętli for. Na rysunku 5.43 przedstawiono skrypt wykonujący dokładnie to samo zadanie, które realizuje skrypt z rysunku 5.39, lecz tym razem z wykorzystaniem pętli YJKNG. Pętla YJKNG, ze względu na swoją konstrukcję pozwala w prosty sposób tworzyć pętle nieskończone (rysunek 5.45), ale ponieważ JavaScript ma w założeniu być uzupełnieniem HTML, a nie celem samym w sobie, więc stosowanie na stronach WWW pętli nieskończonych nie ma chyba większego sensu. P ę t l e 63 Rysunek 5.46. Przykład dziedziczenia obiektów. Aby wypisać tekst w ramce o nazwie „ramka_gorna” (zdefiniowanej gdzieś indziej) należy najpierw odwołać się do obiektu nadrzędnego window, następnie do podrzędnego mu obiektu ramki, dalej do podrzędnego tej ramce obiektu document i dopiero ostatecznie wywołać jej metodę write. Każdy kolejny poziom dziedziczenia został oddzielony kropką. Rozdział 5. Dziedziczenie w JavaScript W przypadku języka skryptowego JavaScript problem dziedziczenia jest znacznie bardziej rozbudowany niż w przypadku arkuszy stylów CSS. Bez zmian, obiekty (wraz z właściwościami i metodami) są ułożone w sposób hierarchiczny. Jednakże w tym przypadku, aby operować na jakimś obiekcie podrzędnym lub jego metodzie czy właściwości, trzeba w poleceniu wskazać wszystkie jego obiekty nadrzędne. Do rozdzielenia kolejnych obiektów oraz ich metod i właściwości służy znak kropki (). Przykład został przedstawiony na rysunku 5.46. Trzy obiekty JavaScript (patrz następny rozdział): PCXKICVQT, JKUVQT[ oraz YKPFQY nie mają nad sobą obiektów nadrzędnych, wszystkie pozostałe posiadają swojego „rodzica” i to od niego należy rozpoczynać wywołanie określonej metody czy właściwości obiektów podrzędnych. t p i r c S a v a J w e i n e z c i z d e i z D 64
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Po prostu Internet. Techniki zaawansowane
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: