Programowanie w JavaScript Rusz głową!

jesteś tutaj

63

Szybki skok na głębokie wody JavaScriptu

Wyciągnij rękę i nawiąż kontakt z użytkownikami

Tych metod używaliśmy

już w tym rozdziale.

To jest właśnie cel, do którego dążymy.

Kiedy tam dotrzemy, będziemy mogli

odczytywać strony, modyfikować je

i operować na nich na wszelkie

możliwe sposoby.

Konsola jest naprawdę wygodnym

narzędziem do odnajdywania błędów

w kodzie! Jeśli popełniłeś jakiś

błąd typograficzny, np. zapomniałeś

cudzysłowu, JavaScript zazwyczaj

wyświetli w konsoli odpowiedni

komunikat, który ułatwi Ci

poprawienie.

Wspominaliśmy o tym, by tworzyć strony w taki sposób, by były

bardziej interaktywne, a w tym celu konieczne jest komunikowanie się

z użytkownikami. Okazuje się, że można to robić na kilka sposobów,

niektóre już poznałeś. Tutaj opiszemy je pobieżnie, a dalej w książce

omówimy dokładniej.

Wyświetlanie komunikatów informacyjnych

Jak się już przekonałeś, przeglądarka zapewnia możliwość wyświetlania

komunikatów. Służy do tego funkcja

alert

. W jej wywołaniu należy podać

łańcuch znaków stanowiący komunikat, a przeglądarka wyświetli go

użytkownikowi w estetycznym oknie dialogowym. W tym miejscu musimy się

do czegoś przyznać: nadużywaliśmy trochę funkcji

alert

, gdyż korzystanie

z niej jest takie proste; należy ją stosować wyłącznie wtedy, kiedy naprawdę

chcemy wszystko zatrzymać i przekazać informację użytkownikowi.

Zapisywanie bezpośrednio w przeglądarce

Stronę WWW można sobie wyobrazić jako dokument (w końcu właśnie tak

nazywają ją przeglądarki). Można skorzystać z funkcji

document.write

,

bywdowolnym momencie zapisać dowolny kod HTML bezpośrednio na

stronie. Ogólnie rzecz biorąc, takie rozwiązanie nie jest uznawane za dobre,

choć czasami można się spotkać z przykładami jego wykorzystania. Użyliśmy

go kilka razy w tym rozdziale, gdyż stanowi bardzo prosty sposób rozpoczęcia

pisania skryptów.

Wykorzystanie konsoli

Każde środowisko języka JavaScript dysponuje konsolą pozwalającą na

rejestrowanie komunikatów generowanych przez kod. W celu zapisania

komunikatu na konsoli używa się funkcji

console.log

; w jej wywołaniu

przekazywany jest łańcuch znaków, który chcemy wyświetlić (już za chwilę

podamy więcej szczegółowych informacji na jej temat). Funkcja ta jest

doskonałym narzędziem do rozwiązywania problemów z kodem, jednak

użytkownicy zazwyczaj nigdy nie będą z niej korzystać, zatem jako narzędzie

komunikacji nie jest szczególnie efektywna.

Bezpośrednie operacje na dokumencie

To już wysoka liga. Właśnie tak chcesz prowadzić interakcję z użytkownikami

istronami: korzystając z języka JavaScript, możesz odwoływać się bezpośrednio

do strony, odczytywać i zmieniać jej zawartość, a nawet modyfikować strukturę

i stosowane style. Wszystkie te możliwości są realizowane za pośrednictwem

obiektowego modelu dokumentu (ang. Document Object Model, w skrócie

DOM, o którym piszemy dalej w tej książce). Jak się przekonasz, właśnie to jest

najlepszy sposób komunikowania się z użytkownikami. Jednak korzystanie

zDOM wymaga znajomości struktury strony oraz interfejsu programistycznego

pozwalającego na odczyt i zapis elementów strony. Już niebawem zajmiemy

się tymi wszystkimi zagadnieniami. Jednak najpierw musisz się jeszcze trochę

poduczyć JavaScriptu.

64

Rozdział 1.

Porównanie metod generacji danych

Wszystkie przedstawione wcześniej metody komunikacji zostały zaproszone na imprezę kostiumową.

Czy możesz pomóc je zdemaskować? Dopasuj opisy podane z prawej strony do nazw podanych po lewej.

Jedną odpowiedź dopasowaliśmy za Ciebie.

7

7

7

:

?

KTO CO ROBI

document.write

console.log

alert

obiektowy model dokumentu

Zatrzymam wszystko w miejscu

i wyğwietlċ uīytkownikowi

krytki komunikat inIormacyjny

$by kontynuowaý, uīytkownik

musi kliknĆý przycisk ÅOk”

PotraIiċ dodawaý do strony

krytkie Iragmenty kodu +70/

i tekstu 1ie jestem najbardziej

eleganckim sposobem

wyğwietlania komunikatyw dla

uīytkownikyw, jednak mogċ

pracowaý w kaīdej przeglĆdarce

8īywajĆc mnie, dysponujesz

caâkowitĆ kontrolĆ nad stronĆ:

moīesz pobieraý wartoğci

wpisane przez uīytkownika

w polach, zmieniaý kod +70/

strony, modyIikowa

ý style,

a nawet aktualizowaý

zawartoğý strony

Sâuīċ jedynie do prostego

testowania strony 8īyj mnie,

a w rewanīu wyğwietlċ jakiğ

tekst na specjalnej konsoli

dla programistyw