Przeczytaj

Dodaj interaktywność do swojego projektu – JavaScript

Interaktywność stron, wywoływanie zdarzeń po kliknięciu przycisku myszy, walidacja formularzy - to wszystko elementy tworzące na stronie internetowej interakcje z użytkownikiem. Są one obsługiwane głównie dzięki zastosowaniu języków programowania, między innymi języka JavaScript (innym popularnym narzędziem stosowanym w tym celu jest jQuery).

Zaczniemy od tego, w jaki sposób załączamy kod JavaScript obsługujący zdarzenia. Następnie wyjaśnimy, jak poruszamy się i znajdujemy kolejne elementy, którym nadajemy interaktywność. Na koniec wykorzystamy wszystkie zdobyte informacje i zaprogramujemy zdarzenie.

Implementacja kodu JavaScript w pliku HTML

Implementacji kodu JavaScript w pliku HTML możemy dokonać na dwa sposoby:

umieszczając kod w kodzie HTML;
tworząc osobny plik.

Umieszczenie w kodzie HTML

W ramach pierwszej metody w dolnej części <body> umieszczamy <script> oraz wstawiamy między znacznikami dowolny kod, który przygotowaliśmy.

<script>
	// w tym miejscu wpisujemy kod
</script>

Przygotowanie w osobnym pliku

W przypadku drugiej metody tworzymy w projekcie plik script.js i dodajemy w dokumencie HTML, na końcu <body>, tuż przed zamknięciem tagu, źródło pliku JavaScript.

<script src="./js/script.js" type="text/javascript"></script>

Cały kod zawarty w pliku script.js jest opakowany w zdarzenie DOMContentLoaded, które powoduje, że kod znajdujący się w jego wnętrzu jest wywoływany dopiero w momencie, gdy załaduje się cały HTML. Nie czeka on na zakończenie ładowania arkuszy stylów czy obrazów.

Kiedy mechanika JavaScript jest gotowa do działania, w konsoli deweloperskiej zostaje wyświetlony komunikat “documents is ready".

Wyszukiwanie elementów

Wyszukiwanie elementów na stronie jest kolejnym krokiem do dodania na niej interaktywności. Po ich odnalezieniu możemy dodawać kolejne zdarzenia, które mogą być wywołane, np. po kliknięciu zdjęcia czy przycisku.

Podstawowe metody wyszukiwania elementów oparte na języku JavaScript to:

document.querySelector("selector");
	// wyszukuje pierwszy element odpowiadający zapytaniu
 document.getElementById("id");
	// wyszukuje element z określonym id
document.querySelectorAll("selector");
	// wyszukuje wszystkie elementy odpowiadające zapytaniu
document.getElementsByTagName("tag");
	// wyszukuje elementy po tagu
document.getElementsByClassName("className");
	// wyszukuje elementy po nazwie klasy

Przykładowo, jeżeli chcemy zaleźć wszystkie paragrafy zawarte w znacznikach div w strukturze naszej strony, w pierwszej kolejności musimy zdefiniować zmienną, w której wywołujemy odpowiednią metodę.

var paragraf = document.querySelectorAll("div p");

Aby sprawdzić poprawność działania naszego kodu, dodajemy console.log, który wyświetli nam w konsoli deweloperskiej informacje.

var paragraf = document.querySelectorAll("div p");
console.log(paragraf);

Polecenie 1

Korzystając z przykładowego projeku strony WWWD13hPQoabprzykładowego projeku strony WWW, sprawdź możliwość wyszukiwania elementów. Otwórz plik script.js i na podstawie przedstawionych powyżej metod wykonaj następujące czynności:

Znajdź pierwszy element h2 na stronie.
Znajdź element o klasie welcome.
Znajdź element o id chartdiv.
Znajdź wszystkie elementy li, znajdujące się w tagu ul.

Pamiętaj, aby zdefiniować zmienne i zastosować console.log, który w konsoli deweloperskiej pozwoli sprawdzić poprawność kodu.

var elem_h2 = document.querySelector("h2");
	// z zasady wyszukuje pierwszy element odpowiadajacy zapytaniu; 
console.log(elem_h2);

var elem_welcome = document.getElementsByClassName("welcome");
	 // zapytanie wyszukuje wszystkie elementy o klasie welcome
console.log(elem_welcome);

var home = document.getElementById("chartdiv");
	// zapytanie wyszukuje elementy po id
console.log(home);

var ul = document.querySelectorAll("ul li");
	// wyszukujemy w ten sposób wszystkie elementy listy 
console.log(ul);

Skoro HTML zbudowany jest na kształt rodziny, w której elementy mają rodziców, a często także rodzeństwo i dzieci, możemy również – poprzez relacje między nimi – wyszukiwać poszczególne elementy.

Znajdźmy pierwszy element o klasie "card‑description", a następnie wypiszmy w konsoli jego rodzica.

var card = document.querySelector(".card-description");
console.log(card.parentElement);

Polecenie 2

Analogicznie wyszukaj element o klasie "card", a następnie – korzystając ze słowa "children" – wypisz w konsoli wszystkie jego dzieci.

Tablice w JavaScript

Zgodnie z rozwiązaniem uzyskanym w Poleceniu 2 możemy zauważyć, że otrzymaliśmy zbiór różnych wartości. Jest to tablica, a jej konstrukcja wygląda następująco:

Tablica z czterema elementami:

var array = [1, 2, 3, "czwarty element"];

Pusta tablica:

var arrayEmpty = [];

Tablice indeksujemy od zera, zatem pierwszy element tablicy ma indeks 0.

console.log(array[0]); 
	// wyświetli wartość 1

Aby sprawdzić wielkość tablicy, możemy skorzystać z atrybutu length.

console.log(array.length);  
	//wyświetli 4

Polecenie 3

W pliku js stwórz tablicę z pięcioma różnymi owocami, a następnie wypisz w konsoli deweloperskiej, ile znajduje się tam elementów, oraz podaj nazwy trzeciej i szóstej wartości.

Wywoływanie zdarzeń

Eventy to zdarzenia wywoływane na stronie WWWstrona internetowastronie WWW. Możemy je wywoływać w zależności od rodzaju interakcji, np. poprzez kliknięcie, najechanie kursorem na element, przy edycji formularza, za pomocą klawiatury czy myszy. Aby dodać zdarzenie na stronie, w pierwszej kolejności wybieramy element, na jakim ma się ono zrealizować. U nas jest to przycisk o id = submitBtn

var button = document.querySelector("#submitBtn");

Na przycisku dodajemy metodę addEventListener(). Podstawowe parametry, jakie wskazujemy w tej funkcji, określają, w jakiej sytuacji wydarzenie ma się wykonać (u nas przykładowo będzie to "click") i co dokładnie ma się stać po jego wywołaniu.

var button = document.querySelector("#submitBtn");

button.addEventListener("click", function(event) {
	// po kliknięciu w konsoli deweloperskiej pojawi się tekst "button test"
	console.log("button test");
});

Podsumowując: zdefiniowaliśmy zdarzenie, które jest wywoływane na przycisku o id = submitBtn. Po jego kliknięciu, w konsoli dewelopera wyświetli się tekst: "button test".

Zobaczmy jeszcze kolejny przykład działania kodu w języku JavaScript.

Zdarzenie dotyczy wyświetlenia przepisu po kliknięciu przycisku Zobacz mój ostatni przepis. W pierwszej kolejności musimy znaleźć zatem ten element i przypisać go do zmiennej. Od razu sprawdźmy, czy kod, który zapisaliśmy, jest poprawny, przez użycie console.log.

var recipe = document.getElementsByClassName("show-recipe");
console.log(recipe);

Po wywołaniu zmiennej w konsoli deweloperskiej widzimy, że to tablica.

Musimy zatem pamiętać, aby przy wywoływaniu zdarzenia wskazać, że jest to pierwszy element - robimy to poprzez dodanie [0].

var recipe = document.getElementsByClassName("show-recipe");
    
recipe[0].addEventListener("click", function() {
	// ciało funkcji   
});

Po kliknięciu przycisku „Zobacz mój ostatni przepis” chcemy, aby pojawił się przepis. Następnym krokiem jest w takim razie odnalezienie elementu o klasie .favorite‑recipe (który ma się wyświetlać lub chować po kliknięciu przycisku) oraz skorzystanie z konstrukcji warunkowej if. Konstrukcję tę znamy doskonale z innych języków programowania, więc nie będziemy jej omawiać w tym miejscu.

var recipe = document.getElementsByClassName("show-recipe");
    
recipe[0].addEventListener("click", function(e) {
	var parentEl = this.parentElement.parentElement;
	var favoriteRecipe = parentEl.getElementsByClassName("favorite-recipe");
        
	if (favoriteRecipe[0].style.display === "flex") {
		favoriteRecipe[0].style.display = "none";
	} else {
			favoriteRecipe[0].style.display = "flex";
	}
        
});

Ciekawostka

Wyszukiwanie elementów w dokumencie HTML może również być związane z relacjami względem innych elementów, np. rodzic, dziecko, rodzeństwo. W przypadku omówionego wyżej zdarzenia odnaleźliśmy element odnosząc się do relacji dziecko‑rodzic, wykorzystując sformułowanie parentElement.

Polecenie 4

Na podstawie przeanalizowanego kodu spróbuj wykorzystać informację dotyczącą wywoływania zdarzeń na stronie internetowej i dodaj kod tak, aby po kliknięciu przycisku Zobacz mój ostatni przepis, podświetlał się on na czerwono. Kiedy przepis zostanie schowany, należy przywrócić pierwotny kolor.

  
var recipe = document.getElementsByClassName('show-recipe');
    
recipe[0].addEventListener('click', function() {
	var parentEl = this.parentElement.parentElement;
	var favoriteRecipe = parentEl.getElementsByClassName('favorite-recipe');
        
	if (favoriteRecipe[0].style.display === "flex") {
		favoriteRecipe[0].style.display = "none";
		recipe[0].style.backgroundColor = "#293462";
	} else {
		favoriteRecipe[0].style.display = "flex";
		recipe[0].style.backgroundColor = "red";
	}
        
});

Polecenie 5

Znajdź w repozytorium element o klasie color_photo, a następnie utwórz zdarzenie, które – po podwójnym kliknięciu zdjęcia – będzie w konsoli wypisywało dblclick.

Słownik

dokument HTML

dokument (strona WWW) czytany przez przeglądarki internetowe, widoczny pod konkretnym adresem URL; zawiera tekst, odnośniki (linki), informacje o multimediach i zdjęciach

link

inaczej odnośnik; aktywny fragment tekstu albo obrazek; pozwala przejść na inny adres URL albo wykonać inną czynność, np. przesłać zapytanie przez formularz kontaktowy

strona internetowa

zbiór dokumentów HTML połączonych ze sobą linkami URL (odnośnikami); dokumenty te znajdują się w obrębie jednej domeny internetowej (serwisu albo witryny)

tablica

rodzaj danych, który pozwala w jednej zmiennej przechowywać wiele wartości; może zawierać różne typy danych, m.in. liczby, stringi, obiekty, funkcje

Animacja

Prezentacja multimedialna