JavaScript

Ok przejdźmy do rzeczy, mamy jakiś banalny formularz z wyborem imion :

Maciej
Kazek
Czesio
Majka
Gabrysia

Jak widać bezpośrednio pod znacznik FORM podpiąłem funkcję walidacji – nie jest to oczywiście najlepsze rozwiązanie, ale nie o to w tym przykładzie chodzi.

Nasza funkcja wygląda tak :

function walidacja(formularz)
{
	var ile = formularz.imie.length;
	var zaznaczono = false;
	for (var i=0; i < ile ; i++)
	{
		if(formularz.imie[i].checked == true)
		{
      			zaznaczono = true;
      			break;
		}
	}
	if(zaznaczono == false)
	{
    		alert('Proszę zaznaczyć przynajmniej jedną opcję !');
    		return false;
	}
	return true;
}

Jest ona bardzo prosta i nie ma sensu żeby tłumaczyć ją kawałek po kawałku. Problem pojawi się jednak kiedy nasze pola będą zamiast "imie" nazywać się "imie[]" - zapis ten jest bardzo często stosowany przez programistów PHP. W przypadku jQuery, którym za chwilę się zajmiemy sprawa jest prosta - wykorzystamy klasy dla pół checkbox, jednak dla czystego JS nie jest już tak różowo. Z tego względu rozwiązaniu tego problemu z wykorzystaniem raw js poświęcę osobny wpis - niebawem

jQuery

jQuery to naprawdę poczciwy "wynalazek" pozwalający nam na łatwe "operowanie" JavaScriptem z zachowaniem wysokiej wydajności kodu. Rozwiązanie naszej walidacji pól checkbox w jQuery jest bardzo proste, a ponadto możemy w łatwy sposób uporać się z tablicowym nazewnictwem pól.

Mamy więc formularz :

Maciej
Kazek
Czesio
Majka
Gabrysia

I oczywiście jQuery :

$(document).ready(
	function()
	{
		$("form#f").submit (
			function()
			{
        			if($('.imie').is(":checked") == false)
        			{
            				alert("Proszę wybrać przynajmniej jeden element !");
					return false;
        			}
				return true;
      			}
     		);
	}
);

Czyż to nie proste i wspaniałe ? Problem nazewnictwa pól został rozwiązany dzięki wykorzystaniu dodatkowej klasy nadanej dla każdego z pół formularza.

Skoro mamy do czynienia ze zmianą zawartości jakiegoś elementu bez przeładowania strony co kilka sekund to łatwo się domyślić, że używane jest do tego zdarzenie czasowe. W JavaScript jest to oczywiście funkcja setTimeout.

Chciałbym tutaj przedstawić proste rozwiązanie jak taki skrypt wykonać czyli zmieniające się obrazki w raz z nawigowaniem po nich (łącza 1,2,3,4) jednak zanim to nastąpi przedstawię proste rozwiązanie gdzie po prostu 4 obrazki zmieniają się w czasie.

Tak więc mamy prosty kod CSS :

div.okienko {
  width:560px;
  height:230px;
}
div.okienko IMG {
  border:0px;
}

Element o klasie okienko to oczywiście pewien kontener, w którym zmieniać będą się nasze obrazy. Zanim przedstawię kod JavaScript to taki oto kod powinien się znaleźć w kodzie strony :

W folderze o nazwie graficzki powinny zostać umieszczone 4 pliki o nazwa 1.jpg, 2.jpg itd. Zauważ, że standardowo na starcie obraz w naszym kontenerze odnosi się do pierwszego z obrazów i pierwszego z odnośników. Popatrzmy więc na kod JavaScript :

window.onload = okienka;
var obrazki = new Array("graficzki/1.jpg","graficzki/2.jpg","graficzki/3.jpg","graficzki/4.jpg");
var linki = new Array("http://www.bmedon.net","http://www.blog.bmedon.net","http://www.mp3-pobierz.pl","http://www.adamekvsgolota.pl");
var ile = obrazki.length;
var i = 0;
var ink = 0;
function okienka()
{
	if ( ile != null )
	{
		if(window.document.zmienny_obrazek)
		{
      		ink = i++;
			window.document.zmienny_obrazek.src = obrazki[ink];
			window.document.getElementById("zmienny_link").setAttribute("href",linki[ink]);
			if ( i > ile-1 )
			{
				i=0;
			}
		}
		setTimeout("okienka()",3500);
	}
}

Kod ten jest bardzo prosty, a wytłumaczenie bardzo podobnego przykładu znajdziesz w moim kursie JavaScript. Wszystko działa jak powinno jednak nie mamy paska nawigacja gdzie można by przełączać się między obrazkami zarówno wstecz jak i do przodu.

Tutaj sprawa troszkę się komplikuje ponieważ po każdym kliknięciu należałoby zmieniać odpowiednią zmienną, od której zależy jaki następny obrazek ma się wyświetlać. Niby proste, ale trzeba również zapanować nad zdarzeniem czasowym – nie można tak po prostu go „pozostawić”, bo nie skrypt nie będzie odpowiednio działał i w nieodpowiednich odstępach czasowych zmieniał reklamę po kliknięciu. Również przy nieodpowiednim nadzorze mogłoby dojść do pewnego zdublowania zdarzenia czasowego. Nie mniej popatrzmy na prawidłowego rozwiązanie.

Kod CSS :

div.okienko {
  width:560px;
  /*height:230px;*/
  border:Solid 1px #ccc;
}
div.okienko IMG {
  border:0px;
}
div.nawigacja {
  background:#000;
  color:#fff;
  display:block;
  text-align:center;
}
div.nawigacja a {
  text-decoration:none;
  color:#fff;
  font-family:Tahoma;
  font-size:10pt;
  font-weight:bold;
  padding-left:3px;
  padding-right:3px;
}
div.nawigacja a:hover {
  background:#fff;
  color:#000;
}
.red {
  background:red;
}

Kod html :

Jak widać podczas kliknięć w elementy nawigacyjne będziemy korzystać z funkcji ustaw. Jak wiesz korzystanie ze zdarzeń w ten sposób nie jest zgodne z DOM i porządnym programowaniem w JS. Chociaż uważam, że czasem można sobie na to pozwolić – mimo to jeszcze do tego wrócę.

Popatrzmy na zmodyfikowany znacznie kod JavaScript :

window.onload = okienka;
var obrazki = new Array("graficzki/1.jpg","graficzki/2.jpg","graficzki/3.jpg","graficzki/4.jpg");
var linki = new Array("http://www.bmedon.net","http://www.blog.bmedon.net","http://www.mp3-pobierz.pl","http://www.adamekvsgolota.pl");
var ile = obrazki.length;
var i = 0;
var ink = 0;
var odliczanie;
function okienka()
{
	if ( ile != null )
	{
		if(window.document.zmienny_obrazek)
		{
      		ink = i++;
      		ustaw(ink,0);
			if ( i > ile-1 )
			{
				i=0;
			}
		}
		odliczanie = setTimeout("okienka()",3500);
	}
}
function ustaw(indeks,click)
{
	window.document.zmienny_obrazek.src = obrazki[indeks];
	window.document.getElementById("zmienny_link").setAttribute("href",linki[indeks]);
	for(var x=0;x<4;x++)
	{
    	if (x == indeks)
    	{
      		window.document.getElementById(indeks).className = "red";
    	}
    	else
    	{
      		removeClass(window.document.getElementById(x),"red");
    	}
	}
	if (click == 1)
  	{
    	clearTimeout(odliczanie);
    	i = indeks;
    	okienka();
  	}
}

Dodatkowo skorzystamy z dwóch funkcji związanych z posiadaniem przez element danej klasy – funkcje to pochodzą z tej strony :

function hasClass(ele,cls) {
	return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function removeClass(ele,cls) {
	if (hasClass(ele,cls)) {
		var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
		ele.className=ele.className.replace(reg,' ');
	}
}

I to wszystko Kod nie jest jednak idealny i jak wspomniałem korzysta z przypisania zdarzeń do linków nawigacyjnych starą metodą. Niebawem przedstawię rozwiązanie zmodyfikowane, ulepszone o elementy takie jak :
1). Kod JavaScript napisany obiektowo
2). DOM’owe korzystanie ze zdarzeń
3). Dodatkowe pole na obrazkach ładujące odpowiedni zmienny tekst

Jeśli ktoś miałby problemy ze zrozumieniem przedstawionego kodu, który trudny nie jest jednak wiadomo, że każdy z Nas kiedyś uczył się od zera to proszę napisać w komentarzu. Chętnie wszystko wyjaśnię od podstaw

I na koniec działanie omówionego przykładu można zobaczyć na stronie wspominanego kursu języka JavaScript.

Przeżytek jakim jest Internet Explorer 6 od dawien dawna sprawia sporo kłopotów głównie dwóm grupą Internautów :
1). Webmasterzy – nie dzielmy już tutaj ich na programistów, projektantów itd. Każdy kto się zajmuje szeroko rozumianą Web Developerk’ą doskonale wie, że tworząc wszelkiego rodzaju strony, aplikacje Internetowe itd. w przeglądarce Microsoftu bardzo często coś nie działa mimo, że w najpopularniejszych innych śmiga bez zarzutu. Tyczy się to choćby JavaScriptu czy CSSa. W 7 i 8 wersji IE te problemy już nie są takie straszne, aczkolwiek to co się „wyrabia” w 6 to po prostu tragedyja Trudno tutaj właściwie winić za to Microsoft – nie oszukujmy się to nie ich wina. Wina leży po stronie tych użytkowników komputera którzy nadal korzystają z IE 6 i to niestety jest tragedia. Jak pisze Piotr Potera Gdyby przenieść tę sytuację do domowego ogniska i porównać z telewizją, to trochę tak, jakbyś trzymał w domu 35-letni telewizor i jest to 100 procentowa racja. Przeglądarka, która ma swoje lata nie jest w stanie sobie poradzić z coraz to nowszymi trendami, technologiami itd. więc Webmasterzy mając na uwadze wysoki udział w rynku przeglądarek IE 6 muszą dwoić się i troić, aby pewne elementy w tym „cudzie” działały poprawnie.

2). Przeglądający sieć – tacy ludzie dziwią się, że coś w sieci im nie działa jak trzeba, narzekają na programistów, projektantów nie zdając sobie sprawy, że sami korzystają z bardzo starego oprogramowania. A wystarczy jak wspomniałem zaktualizować Internet Explorer lub wybrać inną przeglądarkę. Rozumiem, że bardzo wielu ludzi nie ma pojęcia za bardzo o komputerach, informatyce itd. wie tylko jak włączyć komputer uruchomić Internet (przeglądarkę) i tyle. Ci ludzie korzystają zazwyczaj z IE ponieważ jest on standardem w Windowsach więc nie ma się co dziwić. Zresztą jeśli ktoś chce proszę bardzo niech korzysta, ale z aktualnego oprogramowania !! Wykonanie takiej czynności jak update nie jest niczym trudnym – wystarczy umieć czytać i posługiwać się myszką czy klawiaturą. Ludzie powinni sobie zdawać z tego sprawę bo to tak jak gdyby ktoś ciągle pracował na Windows 98 i dziwił się, ze nie działają na nim najnowsze programy, gry czy nie jest obsługiwany tak jak trzeba (albo w ogóle) dany hardware. Dlatego użytkownicy Ci powinni aktualizować swoje przeglądarki podobnie jak robi się to z innym oprogramowaniem. Do tego zachęca od pewnego czasu serwis ie6.pl i myślę, że to między innymi dzięki niemu i ludziom, którzy tą akcję wspierają pozycja IE 6 na rynku ciągle spada.

Każdy z Was do wspomnianej akcji może się przyłączyć. Zamieścić można banner, button, link czy też specjalny kod, który w razie wykrycia iż korzystamy z IE 6 wyświetli stosowny komunikat. I tutaj chciałem też pokazać pewne alternatywne rozwiązanie do ostrzegania ludzi o korzystaniu z IE 6 – jest ono bardziej nazwijmy to radykalne ponieważ powoduje, że w przypadku wykrycia tejże przeglądarki pojawia się komunikat generalnie uniemożliwiający korzystanie ze strony. Spowodować to może, że potencjalny odwiedzający po prostu spraw brzydko mówiąc oleje i opuści stronę. Może też wyłączyć obsługę JavaScript i jak się potocznie mawia „po ptokach”

Nie mniej mamy taki oto kod css :

#zakryj { display: none; position: absolute; height:100%; width:100%; background: #000; top: 0; left: 0; }
#zakryj[id] { position:fixed; }
#zakryj { text-align:center; }
#zakryj div {background:white; width:600px; height:200px; margin: 0 auto; margin-top:150px; border:Solid 1px white; overflow:hidden; padding:10px; }
#zakryj div a {text-decoration:none; color:#d80001; }
#zakryj div a:hover {text-decoration:underline; }

Div o id zakryj będzie pełnoekranowym czarnym elementem, które zakryje ekran w momencie wykrycia naszej „poczciwej” przeglądarki. W elemencie tym znajdzie się kolejny element div ze stosowną informacją.

Do wykrycia wersji przeglądarki posłużymy się tym razem JavaScriptem, a dokładnie biblioteką brwsniff – krótki opis jej działania w moim kursie JavaScript. Skorzystamy również z jQuery.

Mamy więc plik script.js :

$(document).ready
(
	function()
	{
		var przegladarka = getBrowser();
		var nazwa = przegladarka[0];
		var wersja = przegladarka[1];
		if ( (nazwa == "msie") && (wersja == "6.0") )
		{
			$("#zakryj").css({opacity:0.95}).fadeIn("slow")
			.load("ie6.php");
			$("#zakryj").click(function(){$(this).fadeOut("fast")});
			return false;
		}
	}
);

Do odpowiedniego diva zostanie załadowana zawartość pliku ie6.php, w którym przykładowo może być :

< ?php header("Content-type: text/html; charset=iso-8859-2"); ?>

Wykryto, że używasz Internet Explorer wersji 6.0 - WSTYD !!

Zainstaluj porządną przeglądarkę :
+ Mozillę Firefox
+ Operę
+ Najnowszą wersję Internet Explorer

I oczywiście trzeba pamiętać o umieszczeniu w naszym głównym pliku serwisu kodu :