Skryptozakładki: najlepsze porcje kodu JavaScript dla webmasterów

Jak skorzystać ze skryptozakładki

Tworzenie skryptozakładek jest całkiem proste. Wystarcza podstawowa znajomość JavaScriptu. Można stosować wszystkie znane z tego języka programowania polecenia. Przykładowo, aby przygotować skrót uruchamiający w odrębnej karcie stronę główną Webhosting.pl, należy utworzyć nową zakładkę i zamiast linku wpisać kod:

javascript:(function(){ window.open('http://www.webhosting.pl/'); })();

Taki element można później umieścić na pasku przeglądarki i korzystać z niego tak samo, jak z tradycyjnych linków.

Zabawki dla dewelopera

W Sieci da się znaleźć tysiące gotowych skryptozakładek. Większość przydaje się miłośnikom konkretnych serwisów (na przykład Bit.ly czy Delicious). My postanowiliśmy wyszukać 15 takich, które ułatwią pracę każdego webmastera czy dewelopera.

Warto pamiętać o tym, że skryptozakładki są pod wieloma względami lepsze od rozszerzeń. Działają w praktycznie każdej przeglądarce (zależy to oczywiście od funkcji oferowanych przez poszczególne aplikacje). Nie ma problemów z kompatybilnością w obrębie różnych wersji programu. Instalacja i deinstalacja nie wymagają ponownego uruchamiania.

Skryptozakładki zazwyczaj nie spowalniają przeglądarki. Firefox nie przyporządkowuje im jednak kolorowych ikon - jak to ma miejsce w wypadku zwykłych zakładek. Z każdym javascriptowym linkiem można na szczęście skojarzyć słowo kluczowe. Wpisanie go w pasek adresu natychmiast aktywuje powiązaną komendę. Skryptozakładek nie trzeba więc umieszczać w widocznym miejscu, na pasku przeglądarki.

Opcja ta działa niestety tylko w aplikacji Mozilli. Użytkownicy Internet Explorera czy Google Chrome muszą uruchamiać skryptozakładki tradycyjnie, klikając je klawiszem myszy. Oba programy dodają jednak do tego rodzaju elementów kolorowe ikony, co ułatwia ogarnięcie zbioru na pasku narzędziowym. Rzadziej używane elementy można schować w menu.

1.     Wyszukiwanie otwartych DIV-ów

Wyświetla granice wokół wszystkich elementów ujętych w znaczniki <div>. Wyszukując otwarte obiekty, ułatwia walidację strony. Przydaje się także do weryfikowania tabel.

Kod:

 

javascript:(function(){var s="body",c="",I=" ! important;",i,b,f,x,h; for(i=0;i<17;++i) { x = i.toString(16); b = i>15?"FCC":x+x+x; f = i>9?"000":"FFF"; c += s + " {background: #" + b + I + "border: 1px outset #" + b + I + "color: #" + f + I + "}\n"; s += " *"; } if(document.createStyleSheet) { document.createStyleSheet("javascript:'"+c+"'"); } else { h=document.createElement('link'); h.rel='stylesheet'; h.href='data:text/css,'+escape(c); document.getElementsByTagName("head")[0].appendChild(h);}})()

Zamiast dodawania granic można zastosować kolory. Opcja ta lepiej sprawdza się w Internet Explorerze.

Kod:

javascript:(function(){var s="body",c="",I=" ! important;",i,b,f,x,h; for(i=0;i<17;++i) { x = i.toString(16); b = i>15?"FCC":x+x+x; f = i>9?"000":"FFF"; c += s + " {background: #" + b + I + "border-color: #" + b + I + "color: #" + f + I + "}\n"; s += " *"; } if(document.createStyleSheet) { document.createStyleSheet("javascript:'"+c+"'"); } else { h=document.createElement('link'); h.rel='stylesheet'; h.href='data:text/css,'+escape(c); document.getElementsByTagName("head")[0].appendChild(h);}})()

2.     Zarządzanie plikami cookie

Poniższa skryptozakładka wyświetla wszystkie pliki cookie zapisane przez daną witrynę.

Kod:

javascript:alert('Cookies stored by this host or domain:\n\n' + document.cookie.replace(/; /g,'\n'));
 

Druga usuwa je. Dzięki temu nie trzeba wyszukiwać tych elementów w ustawieniach przeglądarki.

Kod:

javascript:(function(){C=document.cookie.split("; ");for(d="."+location.host;d;d=(""+d).substr(1).match(/\..*$/))for(sl=0;sl<2;++sl)for(p="/"+location.pathname;p;p=p.substring(0,p.lastIndexOf('/')))for(i in C)if(c=C[i]){document.cookie=c+"; domain="+d.slice(sl)+"; path="+p.slice(1)+"/"+"; expires="+new Date((new Date).getTime()-1e11).toGMTString()}})()