Zadaniem artykułu jest pokazanie zalet języka JavaScript, który wzbogaca możliwości programistyczne podczas tworzenia stron WWW czy aplikacji internetowych. Dodatkowo opisano ciekawą bibliotekę jQuery, która umożliwia tworzenie bardzo atrakcyjnych modułów animacyjnych. 

Data dodania: 2011-12-27

Wyświetleń: 1723

Przedrukowań: 0

Głosy dodatnie: 0

Głosy ujemne: 0

WIEDZA

0 Ocena

Licencja: Creative Commons

      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 2Przykł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.

Licencja: Creative Commons
0 Ocena