Praktyczne wprowadzenie do JavaScript #10

Screencast – film będący zapisem zdarzeń prezentowanych na ekranie komputera — obrazu widzianego przez użytkownika komputera. Film taki wraz z komentarzem osoby wykonującej czynności może pełnić funkcje instruktażowe lub prezentacyjne, np. demonstrować sposób zmiany kroju pisma w procesorze tekstu. Nagrywanie i publikowanie screencastów określane jest z angielska jako screencasting. Za wikipedią.

Za nami wiele opisanych przykładów działania JavaScript, a już teraz mały jubileusz – oto 10. odcinek Praktycznego wprowadzenia! Z tej okazji też mała niespodzianka – nagrany screencast, prezentujący krok po kroku wszystko, czego dzisiaj się nauczymy.

Poprzedni odcinek prezentował prostą walidację formularza. Tym razem troszeczkę ją usprawnimy oraz dodamy pewien sympatyczny element, który z pewnością przyda się we wszelakich forach dyskusyjnych. Implementację cookies zostawiłem na później, jako że jest to element dość złożony i warto, abyśmy wcześniej poznali inne, przydatne konstrukcje.

Do roboty!

Rzeczony screencast znajdziecie tutaj. Miłej zabawy. Oglądajcie i ćwiczcie jednocześnie. Prosiłbym również o wszelkie opinie o takim duecie: screencast plus kurs. Czy jest to dla Was pomocne?

Jak pamiętasz, walidacja formularza miała dość denerwujący błąd: kiedy pierwszy raz nie wpisaliśmy żadnej wartości, dany element otoczony był ramką. Kiedy jednak zdecydowaliśmy się go uzupełnić, czerwona otoczka była nadal widoczna. Zajmijmy się tym.

Zacznijmy od przedstawienia całego dokumentu, którym obecnie dysponujemy.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z formularzem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />

<style type="text/css">

label
{
	display: block;
	margin: 2px;
}

</style>

<!-- Nasz kod Javascript: -->

<script type="text/javascript">
window.onload = Laduj;

function Laduj()
{
	document.forms['dodawanie_posta'].onsubmit = Verify;
}
	
function Verify()
{
	var nick = document.forms['dodawanie_posta'].nick.value;
	var content = document.forms['dodawanie_posta'].content.value;
	var error = false;
	
	if (nick == "")
	{
		document.forms['dodawanie_posta'].nick.style.border = "2px solid #FF0000";
		alert('Nie wypełniłeś pola z nickiem!');
		error = true;
		
	}
	if (content == "")
	{
		document.forms['dodawanie_posta'].content.style.border = "2px solid #FF0000";
		alert('Nie wypełniłeś pola z treścią!');
		error = true;
	}

	if (error)
	{
		return false;
	}

	
}
</script>

</head>
<body>
	<form method="post" action="" name="dodawanie_posta">
			<label>Nick: <input type="text" name="nick" value="" /></label>
			<label>Tresc <textarea name="content" rows="5" cols="20"></textarea></label>
			<input type="submit" value="dodaj" />
		</form>
</body>
</html>

Logicznie rzecz biorąc, musimy sprawdzić, kiedy wartość danego pola jest niepusta, czyli uzupełniona. Wtedy też zmienimy border danego elementu.


	if (nick == "")
	{

	if (content == "")
	{

Powyższe konstrukcje if odpowiedzialne są za sprawdzanie, czy wartość pól jest pusta. Jak powszechnie wiadomo, można to przetłumaczyć następująco:

Jeśli warunek w nawiasie jest prawdziwy, wykonaj kod w klamrach.

Zresztą, to już wiemy z drugiego odcinka.

Konstrukcje if można wykorzystać również w takim zapisie:

Jeśli warunek w nawiasie jest prawdziwy, wykonaj kod w klamrach. Jeśli nie, wykonaj inny kod.

W JS możemy uzyskać coś takiego w ten sposób:


  if (warunek)
  {
	//jakis kod
  }
  else
  {
	//inny kod
  }

Całe zamieszanie powoduje tutaj konstrukcja else { }, której używamy w połączeniu z warunkami if { }. Oznacza ona alternatywę i nakazuje wykonanie kodu, jeśli warunek w if jest nieprawdziwy. Else zaczynamy zaraz po drugiej klamrze if’a. Spójrzmy na ten przykład:


  var liczba = 1;
  var druga_liczba = 2;
  if (liczba > druga_liczba)
  {
	alert('1 jest większe od 2');
  }
  else
  {
	alert('1 jest mniejsze od 2');
  }

Definiujemy dwie zmienne – zmienna liczba ma wartość 1, zmienna druga_liczba ma wartość 2. Sprawdzamy w warunku if, czy zmienna liczba jest większe od zmiennej druga_liczba. Jeden od dwóch nie jest większe, więc wykona się kod w konstrukcji else. Zapisać słownie możemy to tak:

Jeśli jeden jest większe od dwa, wykonaj alert(‚1 jest większe od 2’); W przeciwnym razie wykonaj alert(‚1 jest mniejsze od 2’);

Wracając do naszego przykładu, mamy warunek który sprawdza czy dana wartość jest pusta (nick albo treść) i, jeśli jest, zmienia border elementu, w którym użytkownik nic nie wpisał. Dodajmy do tego konstrukcję else, która zmieni border pola w razie, kiedy jakiś element nie będzie pusty. Będzie to przypominało coś takiego:


	if (nick == "")
	{

	}
	else
	{
	}

Jeśli wartość zmiennej nick jest pusta, wykonaj jakiś kod. W przeciwnym razie wykonaj inny kod

Wystarczy teraz dodać potrzebny kod, który zmieni obramowanie elementów.


	if (nick == "")
	{
		document.forms['dodawanie_posta'].nick.style.border = "2px solid #FF0000";
		alert('Nie wypełniłeś pola z nickiem!');
		error = true;

	}
	else
	{
		document.forms['dodawanie_posta'].nick.style.border = "1px solid #000000"; 
	}

Tłumacząc po kolei:

Jeśli wartość zmiennej nick jest pusta, zmień obramowanie pola o name=”nick”, pokaż okienko z ostrzeżeniem i ustaw wartość błędu na true. W przeciwnym razie zmień obramowanie na 1px solid #000000 – czarny.

Pozostaje zająć się też polem <textarea>, które także zmieni obramowanie na czarne, w przypadku, kiedy po błędnym wypełnieniu pola, poprawimy się.


	if (content == "")
	{
		document.forms['dodawanie_posta'].content.style.border = "2px solid #FF0000";
		alert('Nie wypełniłeś pola z treścią!');
		error = true;
	}
	else
	{
		document.forms['dodawanie_posta'].content.style.border = "1px solid #000000";
	}

Jeśli wartość zmiennej content jest pusta, zmień obramowanie pola o name=”content”, pokaż okienko z ostrzeżeniem i ustaw wartość błędu na true. W przeciwnym razie zmień obramowanie na 1px solid #000000 – czarny.

I w ten sposób, załatwiliśmy nasz problem. Dokument HTML wygląda teraz tak:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z formularzem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />

<style type="text/css">

label
{
	display: block;
	margin: 2px;
}

</style>

<!-- Nasz kod Javascript: -->

<script type="text/javascript">
window.onload = Laduj;

function Laduj()
{
	document.forms['dodawanie_posta'].onsubmit = Verify;
}

function Verify()
{
	var nick = document.forms['dodawanie_posta'].nick.value;
	var content = document.forms['dodawanie_posta'].content.value;
	var error = false;

	if (nick == "")
	{
		document.forms['dodawanie_posta'].nick.style.border = "2px solid #FF0000";
		alert('Nie wypełniłeś pola z nickiem!');
		error = true;

	}
	else
	{
		document.forms['dodawanie_posta'].nick.style.border = "1px solid #000000"; //jeśli wartość będzie niepusta, ramka przyjmie kolor czarny... Przetestujmy to..
	}
		
		
	if (content == "")
	{
		document.forms['dodawanie_posta'].content.style.border = "2px solid #FF0000";
		alert('Nie wypełniłeś pola z treścią!');
		error = true;
	}
	else
	{
		document.forms['dodawanie_posta'].content.style.border = "1px solid #000000";
	}
		

	if (error)
	{
		return false;
	}

}
</script>
</head>
<body>
	<form method="post" action="" name="dodawanie_posta">
			<label>Nick: <input type="text" name="nick" value="" /></label>
			<label>Tresc <textarea name="content" rows="5" cols="20"></textarea></label>
			<input type="submit" value="dodaj" />
	</form>
</body>
</html>

Pora teraz na element – niespodziankę, o której powiedzieliśmy sobie zdawkowo we wstępie. Otóż chodzi o licznik wpisanych znaków w <textarea>. I tak, kiedy wpiszemy słowo „JavaScript„, powinna nam się wyświetlić liczba 10. Przyjmijmy, że liczba ta wyświetlać będzie się w elemencie div o id=”licznik_znakow”. Zaczynamy.

Najpierw warto dodać <div>, który będzie wyświetlał ilość znaków:


<form method="post" action="" name="dodawanie_posta">
			<label>Nick: <input type="text" name="nick" value="" /></label>
			<label>Tresc <textarea name="content" rows="5" cols="20"></textarea>
			<div id="licznik_znakow"></div> <!-- o tutaj -->
			</label>
			<input type="submit" value="dodaj" />
</form>

Musimy sobie uzmysłowić, kiedy mamy pokazywać i pobierać liczbę znaków wpisanych w textarea. Symulując działanie takiego skryptu, dochodzimy do wniosku, że czynności będą wykonywane w następującej kolejności:

Otóż, jak widać, trzeba przechwycić zdarzenie, kiedy użytkownik naciśnie klawisz i zwolni go podczas wpisywania czegokolwiek w polu textarea. Textarea musi więc wiedzieć, czyli posiadać właściwość zdarzenia, kiedy cokolwiek będzie w nim wpisywane. Pomocne jest tutaj kolejne zdarzenie: onkeyup, które przechwytuje moment zwolnienia wciśniętego klawisza, czyli, po ludzku, moment, kiedy przed chwilą ktoś nacisnął klawisz, ale już go nie przytrzymuje. Właściwość tą, musi posiadać oczywiście <textarea name=”content” rows=”5″ cols=”20″></textarea>. Przypiszmy ją w funkcji Laduj, która odpowiada za to, by nie wpisywać zdarzeń typu onsubmit czy onkeyup w ciele dokumentów HTML.


document.forms['dodawanie_posta'].content.onkeyup = Licz; 

Jak widać, w ten sposób – document.forms[‚dodawanie_posta’].content – dobraliśmy się do elementu content formularza o nazwie dodawanie_posta. onkeyup to właściwość/zdarzenie, która po znaku równa się przyjmuje jakąś wartość – to już wiemy z poprzednich lekcji. Oczywiście za obsłużenie danego zdarzenia musi odpowiadać jakiś kod/funkcja. W tym wypadku, jak łatwo zauważyć, pomoże nam funkcja, którą nazwaliśmy swojsko Licz.

Zapiszmy ją:


function Licz()
{

}

W ten sposób, po każdym wpisaniu znaku w textarea, wykonywać będzie się funkcja Licz!

Jako że wypisaliśmy sobie w punktach, co się będzie dziać po kolei, zastosujmy się do tego planu i uzupełniajmy funkcję Licz kolejnymi elementami. Na początek pobierzmy odnośnik do diva, którego trzeba będzie na końcu uzupełnić ilością znaków.


function Licz()
{
	var odnosnik = document.getElementById('licznik_znakow');

Teraz czas na pobranie liczby znaków, wpisanych w textarea o name=”content”.


function Licz()
{
	var odnosnik = document.getElementById('licznik_znakow');
	var liczba_znakow = document.forms['dodawanie_posta'].content.value.length;

Przechowuje je, jak widać, zmienna liczba_znakow. Warto natomiast przyjrzeć się elementowi, jaki przypisujemy do tej zmiennej.

Jeśli mamy liczbę znaków, przekażmy ją do diva, aby mogła się wyświetlić po wpisaniu czegokolwiek w textarea.


function Licz()
{
	var odnosnik = document.getElementById('licznik_znakow');
	var liczba_znakow = document.forms['dodawanie_posta'].content.value.length;

	odnosnik.innerHTML = liczba_znakow;
}

Zapiszmy wszystko i wypróbujmy – pisząc w polu Treść wyświetlana jest ilość znaków!

Dokument wygląda teraz tak:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z formularzem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />

<style type="text/css">

label
{
	display: block;
	margin: 2px;
}

</style>

<!-- Nasz kod Javascript: -->

<script type="text/javascript">
window.onload = Laduj;

function Laduj()
{
	document.forms['dodawanie_posta'].onsubmit = Verify;
	document.forms['dodawanie_posta'].content.onkeyup = Licz; 
}

function Licz()
{
	var odnosnik = document.getElementById('licznik_znakow');
	var liczba_znakow = document.forms['dodawanie_posta'].content.value.length;

	odnosnik.innerHTML = liczba_znakow;
}

function Verify()
{
	var nick = document.forms['dodawanie_posta'].nick.value;
	var content = document.forms['dodawanie_posta'].content.value;
	var error = false;

	if (nick == "")
	{
		document.forms['dodawanie_posta'].nick.style.border = "2px solid #FF0000";
		alert('Nie wypełniłeś pola z nickiem!');
		error = true;

	}
	else
	{
		document.forms['dodawanie_posta'].nick.style.border = "1px solid #000000"; 
	}
		
		
	if (content == "")
	{
		document.forms['dodawanie_posta'].content.style.border = "2px solid #FF0000";
		alert('Nie wypełniłeś pola z treścią!');
		error = true;
	}
	else
	{
		document.forms['dodawanie_posta'].content.style.border = "1px solid #000000";
	}
		

	if (error)
	{
		return false;
	}

}
</script>
</head>
<body>
	<form method="post" action="" name="dodawanie_posta">
			<label>Nick: <input type="text" name="nick" value="" /></label>
			<label>Tresc <textarea name="content" rows="5" cols="20"></textarea>
			<div id="licznik_znakow"></div> <!-- o tutaj -->
			</label>
			<input type="submit" value="dodaj" />
	</form>
</body>
</html>

Teraz, pisząc w polu Treść widoczna jest liczba znaków, jakie popełniliśmy. Fajnie byłoby natomiast uzyskać coś podobnego: Liczba wpisanych znaków: x. Od razu wiedzielibyśmy, co do czego służy. Oczywiście, aby uzyskać podobny efekt, musimy zainteresować się treścią naszego diva, a konkretnie tym:

odnosnik.innerHTML = liczba_znakow;

Tutaj właśnie ustawiamy wartość diva, jaką jest sama ilość znaków.

odnosnik.innerHTML = "Liczba wpisanych znaków:"+liczba_znakow;

Coś takiego natomiast powuduje, że wyświetli się nam to, co zamierzaliśmy. Rozdzielmy ten zapis, po znaku równa się, na dwie części:

Na koniec powstało coś takiego:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z formularzem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />

<style type="text/css">

label
{
	display: block;
	margin: 2px;
}

</style>

<!-- Nasz kod Javascript: -->

<script type="text/javascript">
window.onload = Laduj;

function Laduj()
{
	document.forms['dodawanie_posta'].onsubmit = Verify;
	document.forms['dodawanie_posta'].content.onkeyup = Licz; 
}

function Licz()
{
	var odnosnik = document.getElementById('licznik_znakow');
	var liczba_znakow = document.forms['dodawanie_posta'].content.value.length;

	odnosnik.innerHTML = "Liczba wpisanych znaków:"+liczba_znakow;

}

function Verify()
{
	var nick = document.forms['dodawanie_posta'].nick.value;
	var content = document.forms['dodawanie_posta'].content.value;
	var error = false;

	if (nick == "")
	{
		document.forms['dodawanie_posta'].nick.style.border = "2px solid #FF0000";
		alert('Nie wypełniłeś pola z nickiem!');
		error = true;

	}
	else
	{
		document.forms['dodawanie_posta'].nick.style.border = "1px solid #000000"; 
	}
		
		
	if (content == "")
	{
		document.forms['dodawanie_posta'].content.style.border = "2px solid #FF0000";
		alert('Nie wypełniłeś pola z treścią!');
		error = true;
	}
	else
	{
		document.forms['dodawanie_posta'].content.style.border = "1px solid #000000";
	}
		

	if (error)
	{
		return false;
	}

}
</script>
</head>
<body>
	<form method="post" action="" name="dodawanie_posta">
			<label>Nick: <input type="text" name="nick" value="" /></label>
			<label>Tresc <textarea name="content" rows="5" cols="20"></textarea>
			<div id="licznik_znakow"></div> <!-- o tutaj -->
			</label>
			<input type="submit" value="dodaj" />
	</form>
</body>
</html>

Komentarze

1

o tym, że Twoje kursy są świetne to już wiesz ;)

ale taka mała propozycja z mojej strony – dawaj może demo efektów które zamierzasz osiągnąć podczas danej lekcji czy coś :)

2

Heh, co prawda mozna sobie skopiowac kod i zapisac do pliku html, ale pomysle nad ta opcja dla leniwych ;). Dzieki za opinie.

3

Jakieś przykłady na serwerze byłyby dobrym uzupełnieniem. Sreencast też jest świetny. Dzięki za opis onkeyup, ostatnio szukałem czegoś takiego, a nie mogłem sobie sam poradzić.

4

Dzięki temu,że nie ma przykładów, a jest kod, wkleja / kopiuje się kod
co sprawia że się uczysz. Ja np. próbuję sam pisać kod i obecny sposób
prezentowania kodu, nie zaś przykładu jest OK!

Dzięki za fajne lekcje !

robert
5

wszystko jak narazie czaje :) wiec kurs jest bardzo dobry hehe :) tylko nie mam pojecia jak dodac wpisane dane do formularza do bazy danych mysql (nie wiem jak polaczyc java script z php)

Paweł
6

hej ferrante sluchaj jak sie robi taki screencast, bo pare programow ktore widzialem, to nie ta jakosc :) moglbys powiedziec cos wiecej…
pozdrawiam

qb
7

BB Flashback :-)

8

W ciekawy sposób ukazany javascript.

Mam tylko małe pytanie, czy w ciele funkcji Verify nie należało by dodać na końcu return true;. W opisanym przypadku nie ma to może dużego znaczenia ponieważ jeśli funkcja nie zwróci żadnej wartości, zdarzenia onsubmit nie przerwie ządania wysyłania formularza. Ale tak zbudowana funkcja może, ale nie musi zwracać wartości. Kod obudowujący, wykorzystujący tą funkcję w innych przypadkach będzie musiał to dobrze obsłużyć.

Pozdrawiam Kula

kula
9

Screencast i omówienie stanowią świetnie uzupełniającą się parę.
Jest to mój pierwszy komentarz, i muszę powiedzieć (albo napisać ;)) że twoje kursy są naprawdę świetne. Z żadnego innego kursu nie nauczyłem się tyle w tak krótkim czasie.
Dzięki i obyś tak dalej pisał swoje kursy.
Pozdro

Dumdas
10

Hej, ferrante!
Robisz tu dobrą rzecz! Fajnie, z życia wzięte przykłady, niemalże gotowe do zaimplementowania… Jestem trochę (dość!!!;P) leniwy, a z drugiej strony chciałbym poszerzać swoją maleńka wiedzę z js, php i czegokolwiek, co uładnia i ufunkcjonalnia (sic!) strony www (nie ośmielam się używać co do moich produkcji słowa „aplikacje www”, ba nawet „strona www” to na razie za dużo, na razie wolę mówić „wizytówka www”;)). Zabierałem sie za niejeden tutorial i książke, która przez pierwsze 150 stron nudziła o czymś, co jest „podstawą”, ale prawda taka, że nikt, nigdy i nigdzie z tego nie skorzysta! Tak czy owak, wiedz, że masz publikę, która czeka na każdy kolejny odcinek:) Ja juz zerkam na kolejny odcinek i jade z tematem dalej!
Pozdrawiam!

11

Ten kurs jest naprawdę świetny. Rzadko zostawiam swoje komentarze, ale tutaj nie szło ominąć komentarza. Dziękuję ci serdecznie!

marcingda
12

Szkoda Twojego cennego (też dla nas) czasu na screencast ‚y.
Jak ktoś naprawdę chce się nauczyć musi sam wklepać i zrobić parę błędów.

piotr
13

A co zrobić, żeby zamiast dodawać, odejmować znaki od np. określonej sztywno liczny 250?

Zamienić ostatnią linijkę funkcji Licz() na coś takiego:

var minus = 250 – liczba_znakow;
odnosnik.innerHTML = „Pozostało: „+minus+” znaków.”;

Pozdrawiam.

Bloom
14

Użycie zdarzenia onkeypress wydaje się lepszym rozwiązaniem niż onkeyup.

Grzegorz
15

ref.innerHTML = "Liczba pozostałych znaków: " + (255-ref_count);

Dodaj komentarz

Dozwolone tagi: <blockquote>, <code>, <strong>