Wiele razy rozpisywałem się o ciasteczkach jako formie przechowywania danych skryptów pomiędzy sesjami przeglądarki. Ciasteczka mają swoje zalety, jak łatwość zarządzania nimi, ale mają też swoje wady w postaci szeregu ograniczeń.

Czytaj dalej...

W trzecie urodziny jQuery użytkownikom oddano nową wersję tego frameworka oznaczoną numerem 1.3. W nowej wersji biblioteka zmieniła się przede wszystkim w "środku". Wiele dostępnych modułów zostało poprawionych pod kątem szybkości działania, o czym już pisałem w przypadku wersji testowej.

Oprócz nowego silnika selektorów i optymalizacji modułu modyfikacji DOM, jQuery 1.3 wnosi nową funkcjonalność zwaną Live Events.

Live Events są to zdarzenia, których obsługę możemy dodać do istniejących i jeszcze nieistniejących elementów, tzn. do elementów które utworzymy dynamicznie w przyszłości. Co tu dużo pisać, najlepiej Zobaczyć na własne oczy.

Programiści jQuery w końcu zrezygnowali z wykrywania przeglądarki w celu obejścia błędów browsera. Browser-Sniffing został zastąpiony kilkoma testami funkcjonalności. Testy te zebrano w kolekcji jQuery.support.

Więcej szczegółów na temat wydania na stronie jQuery.

Prawie dwa lata temu rozpisywałem się nieco na temat ciasteczek w JavaScript w artykule „JS a cookies”. Od tego czasu napisałem sporo skryptów i eksperymentowałem na wiele różnych sposobów. Eksperymenty dotyczyły również ciasteczek. W tym artykule postanowiłem podzielić się wynikami tych doświadczeń.

Czytaj dalej...

Witam po długiej przerwie. Nie gwarantuję, że ten wpis oznacza mój powrót do blogowania, ale zobaczymy co z tego wyniknie.

Dzisiejsza notka poświęcona będzie frameworkowi jQuery, który powoli szykuje się do aktualizacji do wersji 1.3.

Główną nowością w wersji 1.3 będzie nowy silnik selektorów CSS, który jest znacznie szybszy od aktualnie stosowanego. Niektórzy na pewno zetknęli się z profektem Johna Resiga - Sizzle. Właśnie o tym silniku mowa.

Głównymi zaletami nowego silnika są niezależność od jakichkolwiek bibliotek, rozszerzalność oraz mała waga kodu (tylko 3 kilobajty w upakowanej formie).

Nowy engine nie jest jedyną nowością w nadchodzącym jQuery. Inne części kodu także doczekały się optymalizacji, szczególnie moduł manipulacji dokumentem, który został praktycznie od nowa napisany, dzięki czemu metody typu append, prepend, before, after i inne mają kilkakrotnie szybciej działać.

Każdy webmaster piszący skrypty JS dla stron WWW wie jaki to koszmar manipulować dokumentem za pomocą DOM, szczególnie ze względu na przydłuwage nazwy metod i własności elementów (np. getElementById, getElementsByTagName, itd.). Nie da się ukryć, że rozbudowane skrypty korzystające z DOM mają nieczytelny kod. Z tego też względu, w wielu bibliotekach JavaScriptowych - mam na myśli tutaj Prototype, jQuery, MooTools i wielu innych - zaimplementowano własne, uproszczone mechanizmy poruszania się po drzewie dokumentu oraz manipulacji nim. Większość z nich opiera się na składni selektorów CSS (częściowo składni powstającego standardu CSS3 oraz XPath). Niestety, korzystanie z tego typu frameworków wiąże się ze sporym narzutem kodu, co niesie ze sobą spadek wydajności pisanych skryptów.

Najnowsza wersja testowa silnika WebKit, tj. wersja z 7-go lutego, oferuje natywną obsługę W3C Selectors API. Dokładniej, do naszej dyspozycji mamy dwie metody - querySelector oraz querySelectorAll, które pozwalają nam wyszukiwać elementy za pomocą selektorów. Niezaprzeczalną zaletą natywnej obsługi tego typu funkcjonalności jest szybkość działania. I tutaj można sprawdzić samemu, jak natywna obsługa wypada na tle niektórych bibliotek. Aby móc to sprawdzić potrzebujemy jeszcze najnowszą wersję testową przeglądarki Safari.

Dzisiaj świętujemy drugie urodziny jQuery. Z tej okazji wydana została nowa wersja biblioteki, oznaczona numerem 1.2.2. Wersja ta wnosi kilka zmian, które mają przyspieszyć działanie jQuery.

Pierwsza ze zmian dotyczy sytuacji, gdy jako pierwszy argument funkcji jQuery przekażemy element DOM. Zminimalizowano po prostu operacje do minimum. Element DOM zostaje od razu opatrzony w obiekt jQuery i zwrócony do dalszej obróbki przez skrypty. Dopiero potem są sprawdzane pozostałe kombinacje atrybutów.

Kolejna zmiana dotyczy "zdarzenia"/metody ready. W Internet Explorerze została ona znacznie zmieniona. Zrezygnowano z sztuczki z document.write na korzyść rozwiązania zaproponowanego przez Diego Periniego, wykorzystującego pewną informację zawartą w dokumentacji behaviorów w IE dotyczącą m.in. metody doScroll.

Na dodatek wszystkie przeglądarki przy zdarzeniu ready czekają aż załaduje się drzewo DOM oraz arkusze stylów, co ułatwia nieco pracę skryptom zależnych od pewnych wartości arkusza stylów strony.

Do biblioteki dodano także obsługę nowych zdarzeń (m.in. mouseenter, mouseleave, mousewheel) oraz kompletnie przebudowano API dla zdarzeń, które zezwala na tworzenie nowych, własnych typów zdarzeń i manipulację nimi.

Zwijane panele

Ja z tej okazji postanowiłem uaktualnić jeden ze swoich skryptów. Co nowego w tej wersji:

• Cały skrypt został opatrzony funkcją jQuery.sliding. Dzięki temu można zdefiniować sobie wiele zestawów paneli, których ustawienia będą przechowywane z oddzielnych ciasteczkach
• Już nie jesteśmy zależni od pewnej struktury dokumentu. Funkcja jQuery.sliding oczekuje m.in. podania ID elementów, których skrypt będzie dotyczył
• Dodałem wyrażenie regularne sprawdzające, czy String zapisany w ciasteczku ma poprawną składnię JSON. Z tym, że wyrażenie ogranicza się tylko do składni wykorzystywanej przez ten skrypt, czyli {"klucz":1,'klucz':0} (nazwy kluczy w cudzysłowach lub apostrofach i wartości 0 lub 1)
• Funkcje fromJSON i toJSON zostały przemianowane na json2str i str2json

Funkcja jQuery.sliding oczekuje jednego argumentu - obiektu o następującej składni:

{
	tabs:{'id_naglowka':'id_zwijanej_tresci','id_innego_naglowka':'id_innej_tresci'},
	visible:{'id_naglowka':1,'id_innego_naglowka':0}, // 1 - treść widoczna, 0 - treść zwinięta
	cookie:'tabs' // nazwa ciasteczka (opcjonalny)
}

Skrypt w akcji można zobaczyć na testowej stronie. Źródła do pobrania znajdują się tutaj

Szykuje się kolejna wersja testu sprawdzającego przeglądarki internetowe pod kątem obsługi różnych aspektów standardów sieciowych. Następca Acid2 - Acid3 będzie tym razem testował obsługę standardów ECMAScript i DOM. Oczywiście test jest jeszcze w fazie przygotowań, ale już teraz można zobaczyć w jakim kierunku jest on budowany.

Testowane będą najprzeróżniejsze kombinacje, od podstawowych metod na tablicach czy łańcuchach znaków, przez obsługę wyrażeń regularnych, po poprawną iterację do drzewie DOM.

Ostateczny wynik ma się prezentować mniej więcej nastepująco

Test ten szczególnie mnie interesuje, ponieważ od lat zajmuję się głównie JavaScriptem. I już teraz wiem, że twórcy przeglądarek będą mieli znowu sporo pracy. Często bowiem dochodzi do sytuacji, że przeglądarki niepoprawnie obsługują pewną dziwną kombinację argumentów (np. ujemne indeksy w metodach na Stringach i wiele, wiele innych).

Jak pisałem, Acid3 jest na razie w trakcie przygotowywania. Nie ma sensu już teraz sprawdzać poszczególnych przeglądarek, bo wiele może w teście się zmienić do czasu jego wydania.

Przypadkowo natrafiłem na film (prezentację), która może zainteresować osoby piszące skrypty w JavaScript. Wykład prowadzi jeden z pracowników Yahoo! z Indii, który omawia różne aspekty związane z JavaScript i wydajnością pisanych skryptów. Całość trwa około 23 minuty. Pierwsza część wykładu dotyczy samego JavaScriptu, druga traktuje już o DOM.

Czytaj dalej...

Nawiązując jeszcze do poprzedniej notki o cookies, w buildzie przeglądarki Firefox 3.0a3 z dnia 17-go marca 2007 zaimplementowano funkcjonalność zapisu cookie z atrybutem HttpOnly, który spowoduje, że ciasteczka z tym atrybutem nie będą widoczne z poziomu języków skryptowych wykonywanych przez przeglądarkę, np. z poziomu JavaScriptu. Powodem dodania tego atrybutu jest myśl o zabezpieczeniu przez atakami XSS.

Funkcjonalność ta od dłuższego czasu jest już dostępna w Internet Explorerze. Od twórców pozostałych przeglądarek oczekuje się także imlementacji tego atrybutu cookies. Miejmy nadzieję, że wysłuchają apelu. Na razie sprawa wygląda tak, że próbując zapisać ciasteczko HttpOnly w przeglądarce nie obsługującej tego atrybutu, przeglądarka może odrzucić takie ciasteczko (np. ze względu na niepoprawną składnię) lub zapisać poprawnie bez (wsparcia dla) omawianego atrybutu.

W tej notce chciałem nieco napisać o obsłudze cookies w JavaScript. Zanim jednak zajmiemy się JavaScriptem, opiszemy jak sprawa wygląda w PHP.

PHP a ciasteczka

Wszystkie cookies wysłane przez przeglądarkę są w PHP udostępniane w tablicy $_COOKIE. Jeśli chcemy odczytać wartość cookie o nazwie cookie1 wystarczy kod:

echo $_COOKIE['cookie1'];

Czyli prosto i wygodnie.

Ciasteczka zapisujemy za pomocą funkcji setcookie:

int setcookie(string nazwa [, string wartość [, int data_ważności [, string ścieżka [, string domena [, int bezpieczne]]]]])

(wg. pl.php.net/setcookie)

Czytaj dalej...

Zwykle ograniczamy się tylko do walidowania poprawności danych wprowadzanych w formularze. A czy zastanawiałeś się kiedykolwiek, czy jesteś w stanie za użytkownika uzupełnić niektóre pola formularza? Nawet jeśli się zastanawiałeś, to rozmyślania pewnie zakończyły się stwierdzeniem, a skąd niby mam wyciągnąć dane użytkownika?! Niektórzy radzą sobie w ten sposób, że zapisują dane wpisane formularzach w ciasteczku i potem uzupełniają kolejne formularze tymi danymi. Jest to skuteczna metoda do czasu skasowania lub wygaśniecia ciasteczka. Tym wstępem chciałem zainteresować czytelników obiektem navigator.userProfile, który udostępnia nam AFAIK tylko Internet Explorer. Za jego pomocą możemy odczytać dane użytkownika z jego systemowej wizytówki vCard. Warunkiem powodzenia działania skryptu, który napiszemy będzie wcześniejsze utworzenie takiej wizytówki w systemie użytkownika.

Czytaj dalej...

Przez Riddle'a (a raczej dzięki niemu) zainteresowałem się nieco jQuery. Na początku podszedłem nieco scptycznie do "gotowca", bo wolę operować tylko swoim kodem, ale potem zapomniałem o uprzedzeniach i po prostu napisałem swój pierwszy skrypt.

Ogólny opis skryptu

Wyżej wymieniony skrypt możecie zobaczyć w akcji klikając na tym blogu po panelach "Archiwum", "Kategorie", itd. Zadaniem skryptu jest zwijanie i rozwijanie panelów i zapamiętywanie ustawien użytkownika w ciasteczku. Dla zainteresowanych skrypt ten udostępniam za darmo. Jedyne co wymagam to pozostawienie w nim notki autorskiej.

Obecnie skrypt wymaga odpowiedniej struktury, tutaj akurat korzystam ze znaczników <dt> i <dd>. Jak znajdę chwilkę czasu to przystosuje skrypt do różnych struktur dokumentu.

Instalacja na stronie i konfiguracja

Na początek pobieramy najnowsze wydanie jQuery i wstawiamy do strony. Następnie pobieramy plik skryptu i też wstawiamy go do strony, oczywiście za pomocą <script />. W pliku tym należy znaleźć linijkę

var tabs={archiwum:1,kategorie:1,meta:1,www:1}

Tutaj wpisujemy kolejne identyfikatory panelów (chodzi o element <dt>), do których chcemy przypisać skrypt. Wartość 1 oznacza, że panel będzie po starcie strony domyślnie widoczny, wartość 0, że panel będzie domyślnie ukryty. Wartości te są potem nadpisywane preferencjami użytkownika z ciasteczka. Skrypt później będzie szukał elementu <dd>, który jest spodziewany jako "brat" (selektor +). To wszystko odnośnie instalacji.

Kilka uwag

Jak już wspominałem, skrypt pisałem pod strukturę akurat tego bloga i w wolnym czasie go nieco zmodyfikuję, aby stał się bardziej uniwersalny.

Na stronie jQuery możemy znaleźć plugin $.cookie, ale na potrzeby tego skryptu napisałem własne funkcje $.cookie i $.setcookie. Uznałem łączenie zapisywania i odczytu cookie w jednej funkcji za niezbyt dobry pomysł (może się jeszcze przekonam ;-)). Funkcję $.setcookie będę jeszcze modyfikował, aby niemożliwe było zapisanie ciasteczka bez wartości (bo po co?) i dodam mozliwość dołączania pozostałych atrybutów ciasteczek (domain, secure, path).

W przyszłości zmianie ulegnie też funkcja $.toJSON, która będzie sprawdzać RegExem, czy wartość zapisana w Stringu jest poprawnym JSONem.

To tyle na temat skryptu. Życzę przyjemnego użytkowania i oczekiwania na nowe, poprawione wydanie ;-)

Napisałem z nudów skrypt menu (zakładek). Nic specjalnego, ale na forum Webhelp często pojawiały się pytania o takie skrypty. Kod nie jest optymalny, sporo rzeczy można poprawić. Zrobię to w wolnej chwili. Oczekuję Waszych propozycji odnośnie nowych funkcjonalności i zmian do obecnej wersji. Propozycje proszę pozostawiać w komentarzach lub pisać na maila.

Skrypt w akcji można zobaczyć na przykładowej stronie

Jak korzystać ze skryptu?

1. Wrzucamy plik TabMenu.js na serwer
2. Do dokumentu z menu wstawiamy w nagłówku

   <script type="text/javascript" src="TabMenu.js"></script>

3. Pod elementami składającymi się na menu wstawiamy

   <script type="text/javascript">
   t=new TabMenu(tabLinks,active,fns})
   </script>

Objaśnienia argumentów konstruktora

• tabLinks - tutaj podajemy String będący identyfikatorem elementu strony, który zawiera w sobie linki odnoszące się do odpowiednich zakładek
• active - tutaj wstawiamy identyfikator zakładki, która ma być domyślnie aktywna po załadowaniu się skryptu
• fns - tutaj oczekiwany jest obiekt, w którym możemy zdefiniować sobie kilka przydatnych funkcji:
  • onActivate - funkcja wywoływana jest w momencie aktywacji jednej z zakładek. Przekazywane argumenty są kolejno referencją do odnośnika odpowiedzialnego za aktywację zakładki oraz referencją do aktywowanej zakładki
  • onDeactivate - funkcja wywoływana jest w momencie deaktywacji (zamknięcia) jednej z zakładek. Przekazywanymi argumentami są kolejno referencja do odnośnika skojarzonego z daną zakładką oraz referencja do ukrywanej zakładki

Obecnie wszystkie argumenty są wymagane. Jeśli nie chcesz definiować własnych funkcji onActivate oraz onDeactivate wpisz pusty obiekt (tj. {}). Poprawie tę niedogodność przy najbliższej aktualizacji.

Jeśli chodzi o strukturę dokumentu, to można zobaczyć na przykładowej stronie, choć nic nie stoi na przeszkodzie, żeby ją zmienić wg. własnych upodobań.

Skrypt posiada jeden mały bajer. Na przykładowej stronie proszę otworzyć jeden z odnośników (np. LINK 3) w nowej zakładce i proszę zobaczyć, która zakładka jest aktywna.

Licencja

Skrypt jest darmowy. Jedynym wymogiem legalnego użytkowania jest pozostawienie w pliku TabMenu.js niezmienionej notki autorskiej. Mile widziane e-maile z adresami stron, gdzie skrypt znalazł zastosowanie.

Poprawiłem nieco skrypt. Teraz powinien działać poprawnie także w Internet Explorerze.