Kurs JavaScript - Komunikacja z użytkownikiem - wyświetlanie informacji  

Autor: Piotr Bubacz

Opublikowano: 2011-12-09

Jednym z najważniejszych opcji języka JavaScript jest możliwość interakcji pomiędzy kodem a użytkownikiem. Komunikacja może odbywać się bezpośrednio, za pomocą okna wyskakującego (ang. pop-up), jednak jest to przez większość użytkowników niezbyt akceptowany sposób i bardzo rzadko wykorzystuje się go na stronach WWW. Częściej zmienia się zawartość lub właściwość elementu HTML. Można wyświetlić tekst w elemencie div lub zmienić kolor akapitu, nad którym znajduje się kursor myszki.

Przed wykonaniem zadań powinieneś wiedzieć:

• Jak tworzyć strony internetowe
• Jak określać elementy za pomocą parametru id

Po wykonaniu zadań nauczysz się:

• wyświetlać informacje dla użytkownika,
• dopisywać treść do elementu.

Implementacja

W przeglądarce Internet Explorer (>=8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, to zobacz Jak przygotować stronę samouczka JavaScript.

Twoim zadaniem będzie wyświetlenie informacji na stronie za pomocą okna wyskakującego (pop-up) oraz bezpośrednio w elemencie HTML.

Wyświetlenie informacji za pomocą okna wyskakującego (pop-up)

W języku JavaScript najprościej jest wyświetlić informacje za pomocą okna wyskakującego (Rys. 1.).

Rys. 1. Okno wyskakujące w JavaScript.

Więcej informacji o oknach wyskakujących znajdziesz w encyklopedii pod hasłem Jak wyświetlić pop-up w JavaScript.

1. W przeglądarce Internet Explorer (>=8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip.
2. Wciśnij przycisk F12 lub wybierz Tools­>F12 developer Tools.
3. W pojawiającym się oknie kliknij na zakładkę Script (oznaczoną 1 na Rys. 2.), a następnie w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 2.), wpisz:

alert("To jest okno wyskakujące")

Rys. 2. Narzędzia programistyczne do języka JavaScript w Internet Explorer 9.

4. Wciśnij Enter.
5. Na ekranie powinno pojawić się okno, w którym będzie napisane: To jest okno wyskakujące(Rys. 1.).

Informacja

Ten sposób komunikacji może być używany jedynie w ostateczności i najczęściej można go spotkać m.in. w aplikacjach internetowych, przygotowanych jako zamiana aplikacji desktopowej lub na stronach różnych „konkursów” w momencie, w którym chcesz opuścić stronę.

Wyświetlenie informacji za pomocą zmiany zawartości elementu

Większość użytkowników nie akceptuje okna wyskakującego jako metody komunikacji. Najczęściej więc zmienia zawartość elementu na stronie. Aby zmienić zawartość elementu, musisz odwołać się do niego za pomocą następującego polecenia:

document.getElementById(id).innerHTML= ciągZnaków

gdzie id jest wartością właściwości id elementu (więcej o właściwości id znajdziesz w encyklopedii CSS pod hasłem Jak wskazać element w CSS), a ciagZnaków jest kodem HTML, który możesz umieścić w danym elemencie, np. <strong>Super</strong> tekst.

Więcej informacji o zmianie zawartości elementu znajdziesz w encyklopedii pod hasłem Jak wyświetlić informacje na stronie WWW w języku JavaScript.

1. W oknie narzędzi programistycznych przeglądarki Internet Explorer, w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 2.), wpisz:

document.getElementById("pokaz").innerHTML="Hello <strong>Java Script</strong>"

2. Na stronie powinien pojawić się napis „Hello JavaScript” (Rys. 3.).

Rys. 3. Wynik wyświetlenia informacji w elemencie.

Informacja

Zauważ, że prezentowany sposób wymaga, aby element, który jest zmieniany posiadał właściwość id. Zmiana elementu na stronie dotyczy najczęściej elementów div lub span, chociaż może dotyczyć również innych elementów. Więcej informacji przeczytasz w encyklopedii pod hasłem Jak wyświetlić komunikat .

Dopisanie informacji do istniejącego elementu

Tym razem będziesz chciał dopisać treść do elementu. W tym celu wykorzystaj następujące polecenie:

document.getElementById(id).innerHTML+= ciągZnaków

gdzie += jest operatorem dopisania wartości ciagZnaków do elementu (więcej o operatorach znajdziesz w e Kod – operatory).

3. W oknie narzędzi programistycznych przeglądarki Internet Explorer, w wierszu w prawym dolnym rogu (oznaczonym 2 na Rys. 2.), wpisz:

document.getElementById("pokaz").innerHTML+=" Hello <strong>World</strong>"

4. Na stronie powinien pojawić się napis „Hello JavaScript Hello World” (Rys. 3.).

Rys. 4. Wynik dopisania tekstu do elementu.

Podsumowanie

W tym samouczku nauczyłeś się wyświetlać informacje na stronie za pomocą okien wyskakujących (pop-up). Dowiedziałeś się też, że nie jest to najbardziej preferowany sposób komunikacji. Lepszym sposobem jest wyświetlenie informacji w elemencie HTML. Nauczyłeś się również dodawać tekst do elementu.

W kolejnym samouczku nauczysz się więcej o kodzie języka JavaScript.

Dodatkowo zobacz:

• Jak wyświetlić pop-up w JavaScript

 

---