W ostatnim artykule zrobiliśmy mały wstęp do zagadnień jakie będziemy poruszać całym w kursie. Dzisiaj zajmiemy się już bardziej konkretną problematyką, która przybliży nas do bycia mistrzami jQuery (albo przynajmniej ludźmi znającymi ją przyzwoicie:) Mając na uwadze to co napisaliśmy w zeszłym tygodniu podkreślamy, że nie zawsze trzeba używać jQuery. Dodatkowo aby stosować tę bibliotekę warto najpierw zdobyć trochę więdzy o JavaScript aby nie nadużywać narzędzia jakim jest omawiana biblioteka i aby lepiej rozumieć co robimy. W związku z tym kilka pierwszych lekcji poświęcimy również na krótki wstęp do JavaScript.
Po co uczyć się JavaScript skoro jest jQuery?
Generalnie żeby nie popełnić faux pau i nie podpinać całego jQuery UI w celu wygenerowania jednego pop up’a. Jquery to narzędzie, które ma nam uprościć pracę, a nie wyręczać ze znajomości podstaw JS. Co więcej dobra znajomość jQuery nie może istnieć bez znajomości podstaw JS. W poprzednim artykule stwierdziliśmy, że nie będziemy rozstrzygać sporu o to „czego powinno się uczyć na początku”. Podtrzymujemy to, nadal musicie sami odpowiedzieć na to pytanie. Nie będziemy prowadzić kursu JavaScript, jedynie damy wam lekkie podstawy teoretyczne tego języka.
Zacznijmy od początku…
Jak to działa i gdzie to wsadzić?
Dodając do strony kod JavaScript tak naprawdę tworzymy program komputerowy (skrypt). Wprawdzie jest to prosty program, dużo prostszy niż np. ten którego używasz do czytania tego artykułu, ale jest to jednak program, czyli zestaw poleceń wykonywanych w pewnej z góry określonej kolejności. Dzięki wbudowanemu w przeglądarkę interpreterowi języka JavaScript przeglądarka rozumie, że po napotkaniu tagu <script> ma wykonać program. Kiedy napotyka tag zamykający </script> kończy wykonywać program.
Uff. Teraz trudne pytanie – gdzie umieścić nasze skrypty? Wbrew pozorom odpowiedź nie jest prosta. Przez długi (długi) czas mówiono i pisano o tym, iż należy je umieszczać między tagami <head></head> dokumentu. Jednak ostatnio częściej mówi się o załączaniu plików JS tuż przed zamknięciem <body></body>. Uzasadnienie dla opcji numer jeden można znaleźć np. tu, a dla opcji numer dwa tu.
Jak widać jest to wbrew pozorom dość rozbudowany temat. Postarajmy się jednak odpowiedzieć na kilka podstawowych pytań. Po pierwsze skrypty JS powinny być dołączane do dokumentu w postaci odrębnych plików. To rozwiązanie jest przede wszystkim wygodne i ułatwia edycję kodu podobnie jak zewnętrzne arkusze stylów. Ponad to jest bardziej efektywne ponieważ przeglądarka będzie przechowywać te pliki w swojej pamięci. Zewnętrzne pliki JS najczęściej przechowujemy na serwerze strony w specjalnie do tego przeznaczonym katalogu.
1 | <script src="js/myJavaScript.js" type="text/javascript"></script> |
Jeśli zaś chodzi o spór o umieszczenie plików JS między tagami <head></head> vs. umieszczanie plików JS na końcu elementu body to chyba najlepsza odpowiedź padła na stackoverflow :) Jak więc widać nie ma chyba jednej, jedynie słusznej odpowiedzi. Żeby dobrze załączać pliki JS należy zrozumieć kilka rzeczy i brać pod uwagę kilka czynników.
Załączanie plików JavaScript między tagami <head></head> naszego dokumentu może powodować, że treść strony będzie się wolniej ładowała. Klient (przeglądarka) może równolegle pobierać dwa pliki na domenę. Dlatego jeśli mamy więcej plików JS zalecane jest załączenie ich tuż przed zamknięciem tagów <body></body>. Patrząc jednak z innej strony na ten problem można powiedzieć, że skoro nasze pliki JavaScript manipulują tagami HTML i stylami CSS i w ten sposób wpływają na wygląd strony i interakcję użytkownika z nią, to lepiej żeby owy użytkownik poczekał dłużej na „pełne doświadczenie” niż aby miał szybciej doświadczyć jakby „niepełnej” wersji naszej witryny. Może to i prawda, ale (zawsze jest jakieś „ale”) strony powinno się tworzyć zgodnie z zaleceniami progresywnego ulepszania, a więc tak żeby bez JavaScriptu też mogły być funkcjonalne (pod względem wyglądu i interakcji). Dlatego argument o dostarczeniu użytkownikowi od razu „pełnego doświadczenia” do mnie nie przemawia.
W tym kontekście pozostają jednak dalsze problemy. Chociażby sytuacja, w której używamy funkcji document.write w celu umieszczenia jakiejś treści w dokumencie. W takim wypadku dodanie plików JS na końcu tagów <body></body> jest bezskuteczne. Można też pomyśleć o innych przypadkach kiedy chcemy lub wręcz musimy zapewnić ładowanie się plików JS przed treścią HTML po to by nasz JavaScript mógł już sobie działać kiedy przeglądarka wczytuje język znaczników. Co możemy zrobić by usprawnić ładowanie?
Możemy po prostu korzystać z zewnętrznych serwerów hostujących. W przypadku jQuery mamy bardzo duży wybór. Wtedy nasze tagi <script></script> przybiorą następującą postać:
1 | <script src="http://code.jquery.com/jquery-1.9.0.min.js" type="text/javascript"></script> |
Teraz nie odwołujemy się do plików na naszym serwerze, więc możemy zapomnieć o problemie jednoczesnego ładowania maksymalnie dwóch plików. W przypadku jQuery możliwy jest nawet ciekawy zabieg, który pozwoli nam zawsze pobierać najnowszą bibliotekę:
1 | <script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script> |
Inną ciekawą alternatywą jest Google Ajax API loader:
1 2 3 | <script type="text/javascript"> google.load("jqueryui", "1.7.2"); </script> |
Oczywiście takie rozwiązanie nie jest bez wad. Wprawdzie jest szybkie i omija problem ładowania maksymalnie dwóch plików naraz, ale co jeśli biblioteka hostowana na innym serwerze będzie niedostępna? Na to też jest rada. Utwórz subdomenę swojej witryny i stamtąd ładuj pliki JS. Przykładowo jeśli Twoja witryn ma domenę mojastronka.pl stwórz subdomenę static.mojastronka.pl i tam umieść pliki JavaScript.
Tagi <script></script>
Skoro filozofię załączania plików mamy już za sobą sięgnijmy do podstaw, czyli do tagów <script></script>. Owe znaczniki są znacznikami HTML i jak już wspominałem, informują przeglądarkę, że interpreter JavaScript ma wykonać nasz skrypt. W skrócie, więc służą do załączania plików JavaScript do naszego dokumentu HTML.
Skrypty załączone za pomocą znaczników bez atrybutów 'async’ lub 'defer’ są wykonywane natychmiastowo. To oznacza, że po ich napotkaniu przeglądarka rozpoczyna ponowne parsowanie strony dopiero po wykonaniu skryptu.
Już widzieliśmy jak wygląda załączony do dokumentu HTML plik JS, ale przyjrzyjmy się mu jeszcze raz:
1 | <script src="js/myJavaScript.js" type="text/javascript"></script> |
Omówmy atrybuty, które widzimy na powyższym przykładzie.
Atrybut 'src’ definiuje nam URL pliku JS. Jeśli nie zamieszczamy kodu bezpośrednio między znacznikami <script></script> jest on konieczny aby przeglądarka była w stanie zlokalizować skrypt. Jeśli już zdecydujemy się na stosowanie tego atrybutu i załączanie plików ze skryptami JS to nie możemy między tagami <script></script> zamieszczać kodu JS.
Atrybut 'type’ identyfikuje język skryptu zawartego między znacznikami <script></script> lub do którego odnosi się atrybut 'src’. Jeśli nie określimy tego atrybutu skrypt będzie traktowany jak JavaScript. Warto też wspomnieć, że w HTML5 nie ma wymogu stosowania atrybutu 'type’. Nasz JavaScript mógłby, więc wyglądać tak:
1 2 3 | <script> //jakiś JavaScript </script> |
Warto pamiętać, że jeśli deklarujemy typ dokumentu na XHTML 1.0 lub HTML 4.01 to niestety brak atrybutu 'type’ sprawi, iż nasza strona nie przejdzie walidacji.
Atrybuty 'src’ i 'type’ to zapewne te, z którymi spotkasz się najczęściej, ale są też inne warte uwagi.
Atrybut 'async’ został wprowadzony w HTML5 i jest bardzo ciekawy rozwiązaniem, które wiąże się mocno z tematyką jaką poruszaliśmy w poprzednim podpunkcie. Cytując kultowy kurs html:
W trybie domyślnym wczytywanie dokumentu zostaje zatrzymane po napotkaniu tak osadzonego skryptu i kontynuowane dalej, dopiero kiedy w całości się on załaduje. Często tylko niepotrzebnie wydłuża to czas, po którym użytkownik może już przeglądać pozostałą treść strony.
Korzystniej by było od razu wyświetlić podstawową treść tekstową strony, tak aby czytelnik mógł już się zacząć z nią zaznajamiać, a w tym czasie w tle doładować wszystkie potrzebne pliki dynamicznych skryptów. W języku HTML 4.01 służył do tego atrybut logiczny defer. Oznaczony nim skrypt ładuje się dopiero po wczytaniu wszystkich znaczników z dokumentu, tzn. po osiągnięciu </html>. HTML5 wprowadza dodatkowy atrybut logiczny – async – dzięki któremu pliki skryptów zostaną załadowane tak szybko, jak to będzie możliwe (być może jeszcze przed wczytaniem wszystkich znaczników dokumentu).
Atrybut 'defer’ – został już opisany w powyższym cytacie, łącznie z atrybutem 'async’
Tutaj moglibyśmy zamknąć listę aktualnych i zgodnych ze standardem atrybutów tagu <script>. Jeśli interesuje Cię wycofany atrybut 'language’ albo nie opisany w standardzie dla znacznika <script>, atrybut 'crossorigin’ zachęcam do lektury.
Na tym dzisiaj zakończymy ;) Omówiliśmy zaledwie dwa zagadnienia, a tematyka okazała się tak szeroka, że swobodnie mógłby o niej dopisać jeszcze jeden taki artykuł. Jednak na tym co jest teraz poprzestanę. Nie chcę Was zamęczyć.
Zapraszam do komentowania na naszym portalu i na naszym profilu facebook!
to są bardziej podstawy JS niż samego jQuery ;) powinniście na to zwrócić uwagę, bo potem ludzie myślą JS to jQuery i nic innego. Poza tym, walidacja walidatorem HTML jest dobra w trakcie uczenia się.Potem już doświadczenie pokazuje że to nie ma żadnego znaczenia.
Co do walidacji – zgadzam się. Chociaż jak widzę zielony napis pomyślnej walidacji, to mi weselej :)
Co do JS i jQuery:
Dzięki za komentarz. Pozdrawiam.
Witam,
Dokładnie o tym o czym piszesz pisaliśmy w naszym artykule (poprzedniej części też:)
Po tytule można było się spodziewać raczej przedstawienia czym jest funkcja fabryczna… Jeśli chodzi o walidacje to nie widziałem strony napisanej zgodnie HTML5 w pełnym tego słowa znaczeniu, która by tę walidacje przeszła poprawnie, ten walidator ma parę błędów zwłaszcza jeśli przepuści się tam kod JS, w którym ma być zawarty jakiś znacznik, jak choćby banalne document.write(”); (pomijając już wątpliwą poprawność tego przykładu). Może od części 3 kursu o jQuery, będzie wreszcze o jQuery. Życzę powodzenia bo temat złożony.
PS. „Utwórz subdomenę swojej witryny i stamtąd ładuj pliki JS.” Ale po co?
z subdomeną chodziło o sytuację taką jak opisane tutaj:
http://stackoverflow.com/questions/6716523/advantages-of-having-css-js-and-media-subdomains
http://webmasters.stackexchange.com/questions/24955/why-insert-static-files-css-images-js-ecc-in-a-subdomain
czy tu
http://www.askapache.com/htaccess/apache-speed-subdomains.html
a na razie piszemy chwilę o js żeby zrobić wstęp i żeby nauczyć czytających, chociażby podstaw podstaw
Pozdrawiam
Trzeba to przetestować ;) Choć z tego co odkopałem to będzie to zysk kilku(nastu?) ms pod warunkiem dobrze skonfigurowanego konta – na przykładzie pełnej wersji jQuery.
Nie ukrywam, że rozwiązanie jest raczej dla rozbudowanych serwisów, a nie dla strony-wizytówki gdzie jest jeden slider ;)
Skoro artykuł dotyczy podstaw javascriptu to pozwolę sobie wkleić linka do pewnej biblioteki która pozwala na asynchroniczne ładowanie plików javascript.
https://github.com/szagi3891/autoloadjs
Trochę mało informacji, czekam na więcej ;)
I trochę denerwuje duża ilość odnośników do innych stron.
Link do: progresywnego ulepszania nie działa.
rozkręcamy się :)
a link już poprawiam
czekamy na kolejną lekcje :D
Niestety jest ona opóźniona, ale będzie opublikowana już w tym tygodniu!
Kiedy mozna sie spodziewac kolejnej lekcji z kursu jQuery?
http://code.jquery.com/jquery-lates.pack.js
Ten adres już nie działa. Polecam sprawdzić najnowszą wersję i podać źródło do niej
http://code.jquery.com/jquery-latest.pack.js
W linku po prostu była literówka.