Dziudek's jogger

Największą bolączką programistów piszących skrypty z użyciem JavaScript są oczywiście różnice w implementacji tego języka w różnych przeglądarkach - różnice pomiędzy Internet Explorerem, a Firefoksem są ogromne, a nie brak także różnic pomiędzy Firefoksem i Operą czy Safari. Dlatego też niezwykle istotną kwestią przy pisaniu uniwersalnego skryptu jest detekcja przeglądarki użytkownika.

Oczywiście MooTools 1.2 oferuje w tym zakresie bardzo wiele zwłaszcza, że pozwala nie tylko wykryć jakiej przeglądarki używa użytkownik, ale jest w stanie także udzielić nam informacji o systemie operacyjnym, możliwościach przeglądarki czy wersji pluginu Flash.

Obiekt Browser wszystko Ci powie

W obiekcie Browser zawarte są 4 właściwości: Engine, Platform, Features i Plugins. Pierwsza z nich zawiera informacje o wersji przeglądarki, druga zawiera informacje o systemie operacyjnym, a trzecia i czwarta są związane z dodatkowymi możliwościami przeglądarki. Zacznijmy od omówienia pierwszych dwóch właściwości.

Powiedz mi jakiej przeglądarki używasz, a będę wiedział co dalej

Nie będę owijał w bawełnę - z wszystkich możliwości wykrywania przeglądarki najczęściej będziecie używali tej, która wykrywa IE ;)

Ogólnie MooTools 1.2 pozwala wykrywać przeglądarki tylko ze względu na typ silnika renderującego, jak i ze względu na wersje tegoż silnika.

Poniżej pełna lista właściwości wykrywających poszczególne przeglądarki:

• Browser.Engine.trident - Internet Explorer (a także dowolna przeglądarka oparta na silniku IE),
• Browser.Engine.trident4 -Internet Explorer,
• Browser.Engine.trident5 - Internet Explorer 7,
• Browser.Engine.gecko - dowolna przeglądarka oparta na silniku Gecko,
• Browser.Engine.gecko18 - Firefox 2 (i wszystkie inne przeglądarki oparte na Gecko 1.8),
• Browser.Engine.gecko19 - Firefox 3 (i wszystkie inne przeglądarki oparte na Gecko 1.9),
• Browser.Engine.webkit - Safari i Konqueror,
• Browser.Engine.webkit419 - Safari 2 i inne przeglądarki oparte na Webkicie w wersji <= 419,
• Browser.Engine.webkit420 - Safari 3 i inne przeglądarki oparte na Webkicie w wersji >419,
• Browser.Engine.presto - Opera,
• Browser.Engine.presto925 - Opera 9.25 i starsze,
• Browser.Engine.presto950 - Opera 9.5 i nowsze

Sprawdzenie czy użytkownik korzysta z danej przeglądarki polega na stworzeniu warunku postaci:

if(Browser.Engine.odpowiedniEngine){
    // kod który wykona się tylko w danej przeglądarce
}

Dodatkowo istnieje właściwość Browser.Engine.name, która zwraca nam nazwę silnika renderującego przeglądarki. Przykładowo pod Firefoksem otrzymamy "gecko".

Gdy ważny jest system operacyjny

Wykrywanie systemu operacyjnego użytkownika przebiega w podobny sposób - różnica polega na tym, że odwołujemy się do właściwości Platform:

• Browser.Platform.mac - MacOs
• Browser.Platform.win - Windows.
• Browser.Platform.linux - Linux.
• Browser.Platform.ipod - iphone, ipod touch (a w zasadzie każde urządzenie, które oferuje właściwość window.orientation).
• Browser.Platform.other - inny system operacyjny

Nie ukrywam, że z pewnością najciekawsza aktualnie wydaje się możliwość wykrycia iphone'a/ipod touch'a jako przeglądarki - dzięki temu można na przykład załadować odpowiednie style dla tych urządzeń lub też uniemożliwić uruchomienie aplikacji dedykowanych tym urządzeniom na zwykłych pecetach.

Oczywiście Browser.Platform.name zwraca nam nazwę platformy - w wypadku Windows będzie to "win".

Co potrafisz przeglądarko ?

Dzięki właściwości Features możemy zweryfikować co dana przeglądarka potrafi - mamy możliwość sprawdzenia następujących kwestii:

• Browser.Features.air - wsparcie dla środowiska Adobe Air
• Browser.Features.xhr - wsparcie dla asynchronicznych zapytań (AJAX)
• Browser.Features.xpath - wsparcie dla XPath

I znów podobnie jak w wypadku właściwości obiektów Platform i Engine musimy tworzyć odpowiednie instrukcje warunkowe by zweryfikować możliwości przeglądarek.

Jaka wersja Flasha ?

Ostatnia właściwość obiektu Browser - Plugins, pozwala sprawdzić jakiej wersji pluginu Flash używa dana przeglądarka. Obiekt Browser.Plugins.Flash posiada dwie właściwości: version i build, zatem by wyświetlić pełną wersję pluginu Flash używanego w danej przeglądarce zapiszemy:

alert("Używasz pluginu Flash w wersji : " + Browser.Plugins.Flash.version + "." + Browser.Plugins.Flash.build);

eval nie jest dobry na wszystko

Gdyby się kogoś spytać jak wykonać tekst jako kod JavaScript to z pewnością większość pytanych (a może ankietowanych :>) odpowie, że wystarczy użyć funkcji eval dostępnej natywnie w JS. Ta odpowiedź jest oczywiście dobra, ale nie w 100% wypadków.

Weźmy dla przykładu taki oto kod:

function dodajZmienna() {
  var kod = 'var zmienna = "Tekst testowy"';
  eval(kod);
}
 
dodajZmienna();
alert(zmienna);

Powyższy kod nie zadziała, ponieważ nowa zmienna nie istnieje poza funkcją. Gdybyśmy zastosowali taki kod:

function dodajZmienna() {
  var kod = 'var zmienna = "Tekst testowy"';
  eval(kod);
  alert(zmienna);
}
 
dodajZmienna();

Wszystko będzie w porządku. Zatem jak widać problem polega na tym, że kod nie jest wykonywany przez funkcję eval globalnie. Lekarstwem na to w IE jest window.execScript (w innych przeglądarkach z reguły kończy się na dodaniu znacznika script z odpowiednim kodem JS), a uniwersalnym rozwiązaniem jakie oferuje MooTools jest funkcja $exec - zmieńmy pierwszy przykład, a dokładniej 3 linijkę:

function dodajZmienna() {
  var kod = 'var zmienna = "Tekst testowy"';
  $exec(kod);
}
 
dodajZmienna();
alert(zmienna);

Powyższy kod powinien zadziałać bez zarzutu. Podsumowując - jeżeli potrzebujemy globalnie wykonać kod JS zapisany w postaci ciągu znaków, to stosujemy funkcję $exec zamiast eval.

Wzbogacony obiekt document

Na koniec słów kilka o obiekcie document - MooTools dodaje do niego kilka właściwości, które mogą się przydać:

• document.head - zwraca uchwyt do sekcji head dokumentu,
• document.html - zwraca uchwyt do elementu html dokumentu,
• document.window - zwraca uchwyt do obiektu okna dla danego dokumentu (to samo co document.defaultView i document.parentWindow tylko w wersji uniwersalnej)

Podsumowanie

Wiemy już jak dokonać detekcji przeglądarki i systemu operacyjnego użytkownika, potrafimy też wykonywać kod JS zapisany jako ciąg znaków globalnie oraz lokalnie. W kolejnych częściach kursu skupimy się na obiektach natywnych JavaScript.