W drugim artykule z serii Podstaw jQuery dokładniej zapoznamy się z obsługą zdarzeń przeglądarki oraz możliwościami jQuery w zakresie modyfikacji treści strony internetowej. W trakcie pracy bazować będziemy na poprzednim artykule serii.

Zdarzenia przeglądarki

Zdarzenia (events) to mechanizm JavaScript pozwalający na wykonanie określonego przez programistę kodu w chwili, kiedy wystąpi określone zdarzenie. Zdarzeniem takim może być kliknięcie w określony element strony, naciśnięcie klawisza czy zakończenie zapytania AJAX (co omówimy w dalszej części serii). Zdarzenia możemy podzielić według elementów, który emitują informację o ich wystąpieniu:

  • Zdarzenia myszy - najazd na element, kliknięcie
  • Zdarzenia formularza i jego kontrolek - aktywacja/dezaktywacja pola formularza, zatwierdzenie formularza, zmiana treści
  • Zdarzenia klawiatury - naciśnięcie klawisza, zwolnienie klawisza
  • Zdarzenia dokumentu - wczytanie dokumentu, zamknięcie strony, zmiana rozmiaru okna

Na podstawie przykładowego kodu postaram się przybliżyć obsługę niektórych z tych zdarzeń. Pełna lista eventów jQuery dostępna jest w oficjalnej dokumentacji.

Jak w poprzednim artykule należy utworzyć trzy pliki: index.html, skrypty.js i styl.css. Następnie uzupełniamy dokumenty, kolejno:

index.html

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Strona główna</title>
    <link rel="stylesheet" href="styl.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="skrypty.js"></script>
  </head>
  <body>
    <h1>Nagłówek strony</h1>
    <p id="lorem">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
	<span>Rozmiar okna: <span id="rozmiar">123</span></span>
	<input type="submit" value="Pokaż">
     <p id="ukryty">
	Ten tekst jest domyślnie ukryty
     </p>
  </body>
</html>

Nie rozpisując się nadmiernie, względem kodu z pierwszej części dodaliśmy

  • <span> w celu wyświetlenia rozmiaru okna
  • <input type="submit" value="Pokaż"> w celu pokazania reakcji na użycie kontrolek
  • <p id="ukryty"> przechowujący ukryty na początku tekst, który zostanie pokazany po wystąpieniu odpowiedniego zdarzenia

styl.css

html, body{
    margin:0px;
    padding:0px;
    background:#000;
    color:#FFF;
    font-family:verdana;
}
h1{
	background:#42A;
}
p{
	background:#274;
}
p#ukryty{
	display:none;
}

Elementom h1 i p otrzymały wyróżniające tło, aby dokładnie zobaczyć jaki obszar będzie reagował na zdarzenia. Ponadto paragraf z identyfikatorem #ukryty nie będzie wyświetlany.

skrypty.js

$(function(){
	$("span#rozmiar").text($(document).width()+"x"+$(document).height());
	
    $("h1").hover(
		function(){
			$("p#lorem").css("color","#0F0");
		},function(){
			$("p#lorem").css("color","#FFF");
		}
    );
	
	$("input[type=submit]").click(function(){
		$("p#ukryty").show();
	});
	
	$(window).resize(function(){
		$("span#rozmiar").text($(document).width()+"x"+$(document).height());
	});
	
	$(window).keypress(function(e){
		if(String.fromCharCode(e.which) == "w")
			$("html").css("background","#FFF");
		else if(String.fromCharCode(e.which) == "b")
			$("html").css("background","#000");
	});
});

Efekt końcowy można zobaczyć tutaj

Cel kodu

Kod ma zadanie wyświetlić stronę, której nagłówek ma fioletowe a paragraf zielone tło. Najechanie myszką na nagłówek spowoduje zmianę koloru paragrafu na zielony. Treść pola <span id="rozmiar">123</span> zostanie przez skrypt zmieniona na bierzące wymiary okna przeglądarki po załadowaniu strony oraz po każdej zmianie rozmiaru okna. Ostatnim zadaniem jakie będzie spełniał skypt będzie pokanie dotychczas ukrytego paragrafu po kliknięciu w przycisk <input type="submit" value="Pokaż">.

Wyjaśnienie realizacji

Skrypt standardowo już zawarty jest wenątrz kodu: $(function(){ /* KOD */ }); w celu uruchomienia go dopiero kiedy dokument będzie gotów. Jak wyjaśnia poprzedni artykuł jest to związane z obsługą zdarzenia ready().

Pierwsza linia właściwego kodu ustawia za pomocą metody text() tekst wewnątrz <span id="rozmiar">123</span>. Wstawiany tekst to kolejno szerokość i wysokość okna pobrane za pomocą metod width() i height(). Wszystkie trzy wspomniane tu metody można wykorzystać dwojako:

  • Bez argumentu zwracają bierzącą wartość (aktualny tekst, szerokość, wysokość)
  • Z arguentem ustawiają zadaną wartość obietktowi. Tekst dla text() należy ująć w cudzysłowach jeśli nie pochodzi ze zmiennej

Trzeba zaznaczyć, że ta linia zostanie wykonana jednorazowo, zaraz po wczytaniu dokumentu.

Pierwszym zdarzeniem, które nasz skrypt opisuje jest najechanie (hover()). Jak mówi dokumentacja, hover obsługuje najazd i zazd kursora z obiektu(ów) wskazanych selektorem. Jako argumenty przyjmuje dwie funkcje: pierwsza stanowi o tym co stanie się po najechaniu kursora na obszar obiektu, druga analogicznie o opuszczeniu przez kursor obszaru. Ciała obu funkcji zawierają po jednej linii, każda z nich odpowiada za ustawienie dla paragrafu o identyfikatorze #lorem (patrz: selektor identyfikatora) odpowiedni kolor tekstu.

Kolejne obslugiwane zdarzenie to click() znany z poprzeniej części pradnika. Funkcja przypisana do tego zdarzenia wywołuje metodę show(), która jedynie czyni wskazany selektorem obiekt widocznym.

Dwa ostatnie zdarzenia, które pozostały do omówienia w tym przykładzie jako selektora używają obiektu window. Jest to obiekt języka JavaScript, który reprezentuje aktualnie otwarte okno przeglądarki. Pierwsze zdarzenie to zmiana rozmiaru wspomnianego okna. Jak większość zdarzeń przyjmuje jako argument jedną funkcję. W naszym przykładzie ciało tej funkcji odpowiada pierwszej linijce. Jej celem jest zaktualizowanie wymiarów okna w polu <span id="rozmiar">.

Ostatnie zdarzenie: keypress jest najbardziej zaawansowanym, z się zapoznamy. Jak łatwo zauważyć, metodę keypress wyróżnia fakt, że zadana jej funkcja sama posiada argument. Argument ten, oznaczony w linijce $(window).keypress(function(e){ jako e jest obiektem, który przechowuje informacje o zdarzeniu, które nastąpiło. Dzięki przechwyceniu tego obiektu w funkcji, mamy dostęp do ważnej dla nas informacji: który klawisz został naciśnięty. Mówi nam o tym parametr which obiektu. Zwraca on kod ASCII klawisza. Chcąc porównać go ze klawisza musimy przetłumaczyć go za pomocą: String.fromCharCode(e.which). Taki zapis możemy przyrównywać do liter alfabetu.

Znając techniczne znaczenie całego zapisu łatwo więc wywnioskować, że naciśnięcie klawisza “w” ustawi kolor tła dokumentu na #FFF czyli biały, a naciśnięcie “b” na #000 co w RGB oznacza czerń.

Cała lista zdarzeń, któtych obsługę ułatwi nam jQuery dostępna jest pod tym adresem.

W następnej części poradnika:

  • Zapoznamy się z metodą on() i zakończymy zapoznanie ze zdarzeniami
  • Zapoznamy się z mechanizmami obsługi AJAX

Aktualizacja

Kolejna część poradnika jest już dostępna, zapraszam.