Z uwagi na bardzo statyczny wygląd początkowo tworzonych stron, zaczęto poszukiwać języka, który umożliwi interakcje z użytkownikiem. Odpowiedzią na te poszukiwania stał się stworzony w porozumieniu między firmami Netscape, a Sun Microsystems w roku 1995 język JavaScript (JS). Język, jak sama nazwa wskazuje, jest językiem skryptowym, opartym o język Java autorstwa Sun Microsystems. Nie należy jednak utożsamiać obydwu tych języków razem i nie możliwym jest używanie terminów JavaScript, a Java wymiennie. Java to język programowania, który oparty jest na języku C++, a co za tym idzie jest językiem w pełni obiektowym, służącym do tworzenia programów źródłowych (kompilowanych przez maszynę). JavaScript natomiast jest interpretowanym językiem skryptowym, w którym podobna jest tylko składnia podstawowych instrukcji (w stosunku do języka Java). Głównym przeznaczeniem języka JS jest tworzenie skryptów (krótkich programów), które wzbogacają strony WWW.
Przykładem mogą być:
- walidacja danych wprowadzonych do formularza przez użytkownika,
- tworzenie odpowiednich okienek tzw. alertów,
- przeglądarka zdjęć,
- kalkulator.
Ważną cechą języka skryptowego JS jest fakt, iż wykonywany jest on po stronie klienta (w przeglądarce), co ma duże znaczenie podczas np.: walidacji danych. Możliwym jest wyłączenie obsługi JavaScript w przeglądarce, o czym również należy pamiętać, korzystając z tego języka podczas tworzenia aplikacji/stron internetowych.
Do zalet owego języka śmiało zaliczyć możemy szybkość wykonywania, wszechstronność użycia, zmniejszenie obciążenia serwera poprzez wykonywanie licznych funkcji po stronie klienta, ciągłe rozwijanie języka. O wszechstronności i rozwoju języka niech świadczy fakt, iż jednym z wymogów użycia pakietu Google o nazwie Analytics jest osadzenie na stronie właśnie odpowiedniego skryptu JS.
Osadzanie języka jest stosunkowo proste i polega na wpisaniu odpowiedniej linii najczęściej między znacznikami <head>, a </head>. Bywają jednak przypadki, że osadzenie danego skryptu następuje w sekcji <body> np.: użycie skryptu cufon, który pozwala na zamianę wpisanego tekstu na niestandardową czcionkę. Umieszczenie danego skryptu odbywa się za pomocą znaczników <script>, a ściślej mówiąc:
- gdy chcemy użyć zewnętrznego pliku JavaScript koniecznym jest użycie znacznika:
<script type=text/javascript src=kod_js.js></script>,
- natomiast w przypadku pisania danego skryptu w dokumencie, używamy znacznika:
<script type=text/javascript>/* <![CDATA[ *///tresc_skryptu_w_jezyku_JavaScript/*]] > */</script>
Pisać skrypty w języku JS można praktycznie pod każdym kątem i na każdy temat. Najczęściej dotyczą one walidacji danych, które wprowadził użytkownik, lub też zajmują się formatowaniem danych. Są również i skrypty wymagające większej wiedzy programisty np.: zaawansowane kalkulatory, gry, czy generatory.
Przykład kodu w języku JavaScript zaprezentowany został poniżej (kod źródłowy 2), a jego wykonanie gwarantuje (przy przeglądarce, która ma włączoną obsługę JavaScript) po naciśnięciu przycisku OK., ukazanie się zdjęcia (‘img_1.jpg”).
<script type="text/javascript”>
<!-- Ukrycie przed przeglądarkami nieobsługującymi JavaScriptów
alert ("\nA teraz ukaże się zdjęcie!\n\nKliknij na przycisk OK!")
document.write ("<IMG SRC = \"img_1.jpg\">");
// Koniec kodu JavaScript -->
</SCRIPT>
Kod źródłowy 2 – Przykładowy kod języka JavaScript
źródło: Lis M., JavaScript. Ćwiczenia praktyczne, str. 11-12, Helion, Gliwice, 2002,
JavaScript, jak już wcześniej zostało napisane to język, który wzbogaca, a często wprowadza w dokumencie animację. Możliwe jest to dzięki użyciu stosunkowo ciekawej biblioteki o nazwie jQuery, która nie tylko czyni naszą aplikację bardziej efektowną, ale i dynamiczną oraz atrakcyjną.
jQuery jest biblioteką typu OpenSource, która dzięki manipulacji drzewem DOM, wzbogaca korzystanie z JavaScript. Podstawowym zadaniem by móc korzystać z owej biblioteki jest zdefiniowanie w sekcji <head> następującego znacznika:
<script type=text/javascriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Dzięki firmie Google, która udostępnia ową bibliotekę na swoich serwerach bezpłatnie i wydajnie, nie musimy sami wgrywać jej na swojej serwery. Po poprawnym zdefiniowaniu znacznika, możemy przystąpić do pisania odpowiedniego kodu JavaScript. Głównym sloganem, który ma reklamować i zachęcać do używania biblioteki jQuery jest w wolnym tłumaczeniu na język polski – „Pisz mniej, rób więcej”. Choć hasło wydawać się może pokrętne, jest w nim sporo prawdy.
Biblioteka nie tylko wzbogaca kod JS o animację i efekty, ale także umożliwia dostęp do czynności takich jak:
- możliwość definiowania własnych zdarzeń,
- manipulowanie drzewem DOM,
- przypisywanie odpowiedniego stylu do danych elementów.
Dodatkowo do zalet tejże biblioteki zaliczyć możemy pełną kompatybilność z popularnymi przeglądarkami (Internet Explorer, Opera, Mozilla, Chrome, Safari), niewielkie rozmiary oraz pełną obsługę CSS’a . Ważnym aspektem jest również fakt, iż użycie jQuery pozwala bez zmian w strukturze dokumentu HTML zmienić elementy statyczne w dynamiczne (np.: galeria). Korzystanie z jQuery umożliwia również asynchroniczne przesyłanie technologią AJAX, która jest głównym wyznacznikiem aplikacji Web 2.0.
Kod źródłowy 3 skryptu działającego w oparciu o opisywane rozszerzenie JavaScript, tylko na pierwszy rzut oka wydaje się skomplikowany.
<html>
<head>
<title>Witaj, świecie z jQuery</title>
<script type=text/javascript
src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js></script>
<script type=text/javascript>
$(document).ready(function() {
$('button').click(function() {
alert('Witaj, świecie!'); } );
});
</script>
</head>
<body>
<button>Kliknij</button>
</body>
</html>
Kod źródłowy 3 – Przykładowy kod z użyciem biblioteki jQuery
źródło: http://webhosting.pl/Kurs.jQuery.Czesc.1.Wprowadzenie.Zalety.podstawowe.zasady.pierwszy.
.skrypt.i.rozszerzenia?page=1 z dnia 24.05.2011r.
Przyjrzyjmy się zatem bliżej, omawiając kolejne linie i wyjaśniając ich funkcjonalność (kod źródłowy 3). Na początku pojawiają się znaczniki <html> oraz <head>, które określają, że zajmujemy się dokumentem HTML. Niżej znacznik <title> definiujący tytuł strony. Dalej znany z początku tego podrozdziału znacznik, definiujący, że korzystać będzie z dodatku jQuery. Następnie od znacznika <script type=text/javascript>, aż do znacznika </script> znajdujemy właściwą treść skryptu. Pierwsza jego linia - $(document).ready(function() { - zaczyna się od znaku $, który oznacza po prostu nazwę, która umożliwia dostęp do biblioteki. Jej dalsza część mówi nam, że na rzecz obiektu document, chcemy wykonać metodę jQuery o nazwie ready(). Metoda ta służy do zapamiętania przekazanego parametru i realizacji w momencie użycia całego drzewa DOM. W naszym przypadku przekazujemy funkcję, która znacznikowi button (dzięki jQuery) przypisuje zdarzenie click, które automatycznie uruchamia kolejną funkcję, mającą za zadanie wyświetlenie okienka (tzw. alertu) z napisem „Witaj świecie”.
Jak zatem zostało pokazane w owym podrozdziale stosowanie skryptowego języka JavaScript wraz z biblioteką jQuery wprowadza w nasze dokumenty wiele nowych funkcji i możliwości, które praktycznie w żadnym kierunku nie są ograniczone, a tematy poszczególnych skryptów zależą tylko od inwencji programisty.
