0
głosów
- +

JavaScript i jej biblioteka jQuery

Autor:

Aktualizacja: 27.12.2011


Kategoria: Internet i Komputery / Tworzenie Stron


Artykuł
  • 0 głosów dodatnich
  • 0 głosów ujemnych
  • 1348 razy czytane
  • 2 przedrukowany
  • 0 Polemik/Poparć <span class="normal">Odpowiadanie na artykuł</span>
  • Licencja: CC <span class="normal">Zezwala się na kopiowanie, dystrybucję, wyświetlanie i użytkowanie dzieła i wszelkich jego pochodnych pod warunkiem umieszczenia informacji o tw&oacute;rcy.</span>
Dostęp bezpłatny <span class="normal">Dostęp do treści jest bezpłatny.<br/> Inne pola eksploatacji mogą być zastrzeżone sprawdź <b>licencję</b>, żeby dowiedzieć się więcej</span>
 

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. 


      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!nnKliknij 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/javascript"src="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.


Podobał Ci się artykuł?
0
głosów
- +

Brak polemik/poparć



Podobne artykuły:


KOMENTARZE


Używając tej strony zgadzasz się na wykorzystywanie plików Cookie.
Dowiedz się więcej.

Używamy plików cookies, aby ułatwić Ci korzystanie z naszego serwisu oraz do celów statystycznych. Jeśli nie blokujesz tych plików, to zgadzasz się na ich użycie oraz zapisanie w pamięci urządzenia. Pamiętaj, że możesz samodzielnie zarządzać cookies, zmieniając ustawienia przeglądarki. Z dniem 25.05.2018 wprowadziliśmy też w życie rozporządzenia dotyczące ochrony danych osobowych. Więcej informacji w naszej Polityce Prywatności i Regulaminie.

Zamknij