Jakie to proste!

Testowanie JavaScriptu bywa męczące, szczególnie jeśli nie ma się DOM inspektora (FF) i porządnej konsoli wyświetlającej błędy (FF i Opera). Tu ważne jest śledzenie nie tylko błędów krytycznych, ale także ostrzeżeń.

No dobra, ale co z kochanym IE i co jeśli mamy coś zrobić on-line, a nie mamy akurat ściągniętej całej strony? Z pomocą przychodzi protokół 'javascript'. To takie proste, że aż niesamowite i powinno działać w każdej przeglądarce, która obsłuży link w postaci:

<a href="javascript:alert('test')">test</a>

Chwila na zastanowienie - co my tu właściwie robimy? Tak, tak wywołujemy niejako adres (URL): javascript:alert('test') i dokładnie to należy wpisać w pasku adresów.

Można tak wklepać dowolną sekwencję poleceń. Jedyny myk w tym, że jeśli coś zwraca wartość, to trzeba to umieścić w funkcji alert, bo inaczej wyświetli się na stronie (zastąpi zawartość całego dokumentu).

Przykład – wkleicie/wpiszcie poniższe tak jakbyście chcieli przejść na stronę o podanych adresach:

javascript:var nowa_zmienna = 'cosik';
javascript:alert(nowa_zmienna);

Zaiste fantastyczna sprawa :). Gdyby tylko jeszcze to wielowierszowe było... Co prawda są różne rozszerzenia do FF, które to umożliwiają (FireBug!), jednak z IE i tak trzeba cierpliwie – linijka po linijce.

Problem zwracanej wartości

Chciałbym jeszcze raz wrócić do wspomnianej wcześniej kwestii zwracania wartości na ekran. Wywołanie jakiejkolwiek funkcji czy działania zwracającego wartość, powoduje wyświetlenie tejże wartości zamiast całej strony – czego zazwyczaj nie chcemy. Dlatego praktycznie wszystko poza ustawianiem zmiennych należy otaczać w funkcję alert().

Przykład (na razie jeszcze ustawiamy zmienną i jest OK):

javascript:var nowa_zmienna = 'cosik';

Wpisanie poniższego kodu, powoduje, że dostajemy pustą stronę z zapisem 'cosik i ktosik', co uniemożliwi nam dalsze testowanie.

javascript:nowa_zmienna += ' i ktosik';

Omijamy problem otaczając wywołane polecenie alertem:

javascript:alert(nowa_zmienna += ' i ktosik');

Można też użyć sztucznej zmiennej (zamiast na ekran wartość zostanie zapisana w zmiennej):

javascript:var xx = nowa_zmienna += ' i ktosik';

Użycie takiej zmiennej ma większy sens, gdy klikanie w komunikat generowany przez funkcję alert byłby po prostu nieznośny, czyli w pętlach:

javascript:var nowa_zmienna = 'cosik'; for(var i=0; i<3; i++) { var xx= nowa_zmienna += ' i ktosik';}; alert('Ostateczna wartosc: '+nowa_zmienna);

Testowanie dużych skryptów

Można wykorzystać jeszcze jeden myk, przydatny jeśli chcemy przetestować większy skrypt, a nie interesuje nas czy np. nie mamy możliwości skorzystania z rozszerzeń dla FF, czy innych podobnych bajerów. Wystarczy skorzystać z poniższej sekwencji, ale należy pamiętać, że to działa tylko do pierwszego przeładowania strony, czy przejścia na inną stronę.

javascript:var newEl = document.createElement('script');
javascript:var newAttr = document.createAttribute('type'); var xx= newAttr.nodeValue = 'text/javascript'; var xx= newEl.setAttributeNode(newAttr);

Uwaga! Poniżej dla newAttr.nodeValue należy podać adres WWW do naszego skryptu (z dysku mi się nie udało, ale też nie szukałem, bo wystarczy przecież mieć Apache'a, albo dowolny darmowy serwer).

javascript:var newAttr = document.createAttribute('src'); var xx= newAttr.nodeValue = 'http://localhost/test.js'; var xx= newEl.setAttributeNode(newAttr);

Po poniższym przeglądarka powinna dociągnąć skrypt

javascript:var el = document.getElementsByTagName('head')[0];var xx= el.appendChild(newEl);

Żeby ułatwić sprawę, można skrócić powyższe przez połączenie w jedną linię kodu. Problemem mogłoby być tutaj ograniczenie na długość adresu w przeglądarkach, ale wszystkie które sprawdzałem takiego nie mają (FF 1.5/2.0, IE 6.0, Opera 9.0). Tak nawiasem mówiąc poniższy kod grubo przekracza 255 znaków.

javascript:var skrypt='http://localhost/test.js'; var newEl = document.createElement('script');var newAttr = document.createAttribute('type'); var xx= newAttr.nodeValue = 'text/javascript'; var xx= newEl.setAttributeNode(newAttr);var newAttr = document.createAttribute('src'); var xx= newAttr.nodeValue = skrypt; var xx= newEl.setAttributeNode(newAttr);var el = document.getElementsByTagName('head')[0];var xx= el.appendChild(newEl);

Ważne! Jeśli coś się zmieni w skrypcie, to pod IE trzeba najpierw odświeżyć stronę i dopiero wpisać jeszcze raz powyższe. Pod FF jest lepiej, to znaczy ponowne wpisanie kodu powoduje ponowną interpretację. Z drugiej strony wydaje mi się, że jest to raczej błąd FF, więc nie należy na tym polegać w dłuższej perspektywie. Tym bardziej, że w Operze jest podobnie jak w IE, tylko że tam trzeba wręcz odświeżyć stronę naszego skryptu, żeby zmiany zostały „zauważone”.