JavaScript to język, który pomaga w łatwy sposób dodać do stron WWW nowe funkcje. Przy użyciu innych metod (HTML, CSS) część z nich byłaby zbyt trudna do zrealizowania bądź w ogóle niemożliwa.
Historia i możliwości
Język JavaScript powstał za sprawą firmy Netscape, która zaimplementowała jego obsługę w swojej przeglądarce Netscape Navigator 2.0. Była to jedna z największych innowacji w święcie przeglądarek internetowych. Chyba nikt się nie spodziewał, że w przyszłości JS zrobi aż tak dużą karierę. Jeśli chodzi o najpopularniejszą na rynku przeglądarkę – Internet Explorer – JS obecny był już w jej trzeciej wersji. Również przeglądarki Mozilli – Firefox i Mozilla – obsługują JS od początków swojego istnienia. Obecnie język występuje w kilku wersjach, a najnowsza oznaczona jest numerem 1.7.
JavaScript to obiektowy i skryptowy język bezpośrednio łączony z dokumentami HTML, na których pozwala operować. Dzięki JS możemy uzyskać wiele dynamicznych efektów: przewijane paski informacyjne, dynamiczne menu czy też sprawdzanie poprawności wysyłanych formularzy, a zastosowanie technologii AJAX umożliwia otrzymywanie rożnych efektów bez przeładowania strony w przeglądarce.
JavaScript pomocny jest przy budowie dynamicznego głosowania w ankietach, jak również pobierania zawartości konkretnych stron, a interfejs w poczcie Google (Gmail) pozwala na szybkie i kompleksowe odczytywanie e-maili i ich administrację.
Wiele badań wskazuje, że odpowiednio zastosowany kod JavaScript potrafi zwiększyć radość użytkowania strony WWW prawie o 50%. W nowoczesnych przeglądarkach istnieje możliwość wyłączenia obsługi JS, więc należy używać go z rozsądkiem, tak, by nie pozbawić użytkownika podstawowych funkcjonalności witryny. Mimo wszystko, skrypty JS już w minimalnych ilościach mogą okazać się strzałem w dziesiątkę i sposobem na zdobycie wielu odwiedzających.
JavaScript używa niejednorodnej implementacji w rożnych przeglądarkach internetowych, co może spowodować, że zastosowane konstrukcje mogą być nieobsługiwane przez niektóre przeglądarki. Kod JavaScript jednolicie interpretują przeglądarki: Opera, Firefox (i inne na silniku Gecko) oraz Safari; Internet Explorer prezentuje w kilku przypadkach nieco inne podejście.
Warto dodać, że w JavaScripcie możliwa jest również budowa aplikacji okienkowych, dzięki specjalnie stworzonym do tego platformom konwertującym kod. Jest to jednak proceder mało popularny, że względu na ukierunkowanie języka na budowanie stron WWW.
Obecnie, dzięki rozwojowi aplikacji internetowych Web 2.0, JavaScript przeżywa drugą młodość. Trwają prace nad wersją 2.0, w których uczestniczą firmy Netscape i Mozilla Foundation. Również Microsoft tworzy własną jego implementację pod nazwą JScript.Net.
Dla początkujących webmasterów wszelkie nazewnictwo związane z językiem JavaScript może powodować konsternację. Wystarczy wymienić tutaj takie wyrazy jak obiektowy, skryptowy i inne. Dla osób nie mających wcześniej styczności z programowaniem może okazać się to kłopotliwe. Przyglądając się jednak bliżej JS z pewnością można uznać, że nie taki diabeł straszny, jak go malują i niniejszy kurs postara się to dogłębnie ukazać.
Podstawy działania
JavaScript to kod zbudowany z powtarzających się elementów. Co prawda, po wpisaniu byle jakiego elementu języka nie uzyskamy nic konkretnego. Daleko mu do HTML-a, w którym możemy napisać {html}
test
{/html} i uzyskać natychmiastowy efekt.
JavaScript, tak jak wszystkie języki programowania, daje nam swobodę i pozwala zdecydować, co i kiedy ma się wykonać. Daje możliwość ukrycia, na przykład, jakiegoś tekstu po naprowadzeniu na niego wskaźnika myszki, po kliknięciu innego linku/elementu strony, po wciśnięciu jakiegoś klawisza. Warto też dodać, że nie ma w nim tagów charakterystycznych dla HTML-a.
JavaScript opiera się w głównej mierze na interakcji z użytkownikiem korzystającym z danej strony. Jeśli więc chcemy np. ukryć tekst akapitu {html}
…
{/html} po kliknięciu linku, musimy to zaprogramować . Na chłopski rozum, musimy dać linkowi właściwość, która pozwoli wychwycić przeglądarce, że ktoś go właśnie kliknął. Jeśli przeglądarka poprawnie wychwyci klikniecie, uruchamiany jest kod, który zmienia sposób wyświetlania interesującego nas elementu – w tym wypadku akapitu.
Przystępując do nauki języka JavaScript należy znać XHTML i CSS. Bez znajomości ich podstaw może być trudno.
Przyswajanie wiedzy najlepiej przebiega na konkretnych przykładach. W kolejnych częściach kursu będziemy przedstawiać najczęściej spotykane problemy, które z łatwością rozwiąże JS.
Rozpoznawanie tagów po identyfikatorach
Umożliwi to funkcja operująca na elementach dokumentów HTML – {stala}document.getElementById(argument){/stala}, gdzie w miejsce {stala}argument{/stala} wpisujemy id interesującego nas elementu (tagu HTML).
W ten sposób odwołaliśmy się do akapitu o {stala}id=\”more\”{/stala}.
Zmienne i ich wartości
Zmienna akapit przechowuje więc odwołanie do naszego akapitu {html}
{/html}. Dzięki temu możemy wyświetlić wiele właściwości tego paragrafu. Postanowiliśmy dostać się do stylu {stala}display{/stala}. Za pomocą JavaScriptu jest to łatwe i logiczne (rys. 4).
Zmienne są to takie elementy języka JS, które pozwalają przechowywać jakieś wartości. Definiujemy je słówkiem {stala}var{/stala} (od ang. variable), po czym wpisujemy dowolną nazwę zmiennej i przyrównujemy ją do jakiejś wartości, np: {stala}var nazwa_zmiennej = 2;{/stala}
W tym wypadku otrzymamy zmienną o nazwie \”nazwa_zmiennej\” o wartości 2. Zmienne mogą również przechowywać odwołania do innych elementów, o czym później.
Zmiana wartości danej zmiennej/elementu jest podobna do definiowania zmiennej: {stala}zmienna = wartosc;{/stala}. Jeśli natomiast nasza wartość to ciąg liter, wtedy otaczamy ten ciąg apostrofami bądź cudzysłowami: {stala}zmienna = \”Jakas tam wartosc!\”;{/stala}
Właściwości stylów a JavaScript
Jeśli coś ma wartość, to zazwyczaj można ją zmienić. Zmienimy więc {stala}akapit.style.display{/stala} na {stala}block{/stala}:
Wielki finał
Cały dokument wygląda teraz tak jak na listingu nr 4. Kod działa tak, jak sobie zamierzyliśmy.
Strona z newsem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.wiecej
Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.
Potrafimy już dostać się do konkretnego elementu dokumentu HTML o określonym id, a także zmienić właściwości jego stylów. W następnej części kursu przedstawię nowe funkcjonalności, które można zastosować do powyższego, wciąż prymitywnego, skryptu, a także omówię argumenty funkcji i inne elementy języka, które zostały pominięte.
Magia onclick
Naszym zadaniem jest przechwycenie informacji o tym czy ktoś kliknął link \”więcej\”. W tym celu korzystamy z gotowego elementu języka JavaScript – {stala}onclick{/stala}.
wiecej
Wstawienie {stala}onclick=\”\”{/stala} do jakiegokolwiek tagu HTML powoduje, że po kliknięciu jego zawartości wykona się kod zawarty między cudzysłowami. Najprostszym i najczęściej wykorzystywanym przykładem działania {stala}onclick{/stala} we wszelakich kursach jest wykorzystanie w duecie kolejnej funkcji języka, jaką jest {stala}alert(){/stala}:
wiecej
{stala}alert(\’Jakis tekst\’);{/stala} jest to wbudowany element języka JavaScript, który nazywamy funkcją. Natomiast \”Jakiś tekst\” to argument funkcji. Wszystkie funkcje języka JavaScript, które wywołujemy, można poznać po tej samej budowie: {stala}nazwa(argumenty);{/stala}.
Jak widzimy (rys. 3), po kliknięciu linku \”więcej\” pojawia się okienko z treścią, którą wpisaliśmy w apostrofach otoczonych nawiasem.
Okienka ostrzeżeń alert()
Teraz musimy stworzyć coś podobnego do {stala}alert(){/stala}, tyle że zmieniającego sposób wyświetlania akapitu z rozszerzoną treścią newsa. O ile {stala}alert(){/stala} jest funkcją wbudowana w język, o tyle funkcja obsługująca akapit będzie zdefiniowana przez nas. Całość umieścimy pomiędzy {html}{/html} w sekcji {html}
{/html} naszego dokumentu.Naszą funkcję nazwiemy PokazAkapit, zatem analogicznie link \”więcej\” będzie wyglądał tak:
wiecej
A cały dokument tak jak na listingu 3.
Strona z newsem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.wiecej
Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.
Fundamenty pierwszego skryptu
Napiszemy teraz fundamenty pierwszego skryptu, oczywiście pomiędzy znacznikami {html}{/html}.
Jak widać, na razie w funkcji nie ma żadnego kodu, a co za tym idzie – należy go uzupełnić zgodnie z naszymi zamiarami.
Przypomnijmy: naszym celem jest wyświetlenie akapitu z rozszerzoną treścią newsa. Najpierw ustaliliśmy, że akapit ten będzie miał ustawiony parametr stylów {stala}display: none;{/stala}. Problemem jest teraz, jak zmienić go z powrotem na {stala}display: block;{/stala}. Musimy więc dostać się do właściwości stylów akapitu o identyfikatorze {stala}id=\”more\”{/stala}.
Pierwsze kroki
Mamy prosty dokument HTML z pojedynczym, skróconym newsem (rys. 1, listing 1). Naszym celem będzie umożliwienie szybkiego podejrzenia całej wiadomości po kliknięciu linku więcej.
Strona z newsem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.wiecej
Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.
Jak widzimy, sprawa jest dość prosta. Mamy jeden {html}
{/html}. Na razie jednak efekt jest niepożądany. Drugi akapit, będący rozwinięciem treści, miał być przecież ukryty. Ukrywamy go (rys. 2) za pomocą CSS: {stala}style=\”display: none;\”{/stala}.
|
|
|
Vivamus pretium...
Inna możliwość ukrycia akapitu to zdefiniowanie stylu {stala}display: none;{/stala} w oddzielnym arkuszu stylów. Niestety, JS nie odczyta tej wartości. Trzeba ją zdefiniować bezpośrednio w dokumencie HTML.
Następnie w dokumencie HTML musi pojawić się kod JavaScript. Można go dołączyć do dokumentu w dowolnym pliku o rozszerzeniu .js, podobnie jak pliki CSS dołącza się w plikach .css. Dobrym zwyczajem jest dołączanie plików .js w sekcji {html}
{/html}. Mianowicie:
Strona z newsem
Jak można zauważyć, całość opiera się na znacznikach {html}
Sposób wklejenia kodu JS do dokumentu HTML nie odgrywa większej roli, efekt będzie zawsze taki sam.
Mamy więc pełny dokument HTML gotowy do dołączenia niezbędnego kodu JavaScript (listing 2).
Strona z newsem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.wiecej
Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.
