1 - szkolaporonin.pl

Transkrypt

1 - szkolaporonin.pl
STRONA POCZĄTKOWA
Wybierz temat
Wstawiamy pierwszy skrypt na naszą stronę
Do umieszczenia skryptów na stronie służy znacznik <script>:
1
2
3
4
5
6
7
8
9
10
//dla HTML5
<script>
...instrukcje skryptu
</script>
?
//dla HTML4
<script type="text/javascript">
...instrukcje skryptu
</script>
W dzisiejszych czasach zalecam stosowanie typu dokumentu dla HTML5, który udostępnia nam posługiwanie się powyższą - skróconą
deklaracją skryptów. Jest to o tyle zalecane, ponieważ stosowanie takiego nagłówka nie przynosi z sobą żadnych problemów, a daje
nam nowe możliwości. Same plusy :)
Nie ma co oszukiwać. Kurs ten nie był pisany ani wczoraj, ani nawet tydzień temu. Dlatego stosowana tutaj
deklaracja skryptów tyczy się HTML4. Nie zmienia to faktu, że warto przejść na HTML5 ;)
Dodatkowymi atrybutami, które możemy użyć dla tego znacznika, są:
charset="..." - który ustawia kodowanie dla skryptu. Najlepiej używać kodowania UTF-8 np:
1
2
3
4
<script type="text/javascript" charset="UTF-8">
...
</script>
?
defer="defer" - powoduje rozpoczęcie wykonywania skryptów dopiero po załadowaniu całej strony (stosowane dla IE):
1
2
3
4
<script type="text/javascript" defer="defer">
...
</script>
?
src="..." - podaje adres pliku ze skryptami js:
1
2
<script type="text/javascript" src="..."></script>
?
Poza atrybutem src (który omówię poniżej), reszta jest marginalnie stosowana i właściwie wspominam o niej z czystego obowiązku.
Bardzo rzadko się je stosuje. Chociaż polecam zapoznać się informacjami na ich temat.
W XHTML strict instrukcje skryptu powinniśmy objąć blokiem CDATA. Dzięki temu nie będziemy musieli zmieniać w skrypcie znaków <
i & na encje (znaki te mogłyby kolidować ze składnią XHTML). Niektóre przeglądarki mogą mieć problemy z obsługą instrukcji CDATA,
wstawiamy więc je jako komentarz:
1
2
3
4
5
6
<script type="text/javascript">
//<![CDATA[
...instrukcje skryptu
//]]>
</script>
?
Dawno temu skrypty objmowało się komentarzami (<// ... //>), jednak w dzisiejszych czasach jest to niezalecana metoda.
Z technicznego punktu widzenia skrypty (a więc i znaczniki) możemy wstawić w "dowolne" miejsce na stronie i przeglądarka to przełknie.
Jednak w nowoczesnych technikach odradza się takich zwyczajów. Na ich miejsce zaleca sie umieszczanie wszystkich skryptów w
oddzielnych plikach.
converted by Web2PDFConvert.com
Jeżeli koniecznie chcemy stawiać nasze skrypty bezpośrednio w kod strony, róbmy to na jego końcu (tuż przed
zamykającym znacznikiem </body>). Ma to dwie wielkie zalety.
Pierwszą jest taka, że użytkownikowi jako pierwsze wczyta się to co najważniejsze - czyli treść strony.
Drugą zaletą jest to, że nasz skrypt ładując się na samym końcu będzie widział już wszystkie elementy
występujące na stronie (a które zostały załadowane przed nim). Dzięki temu unikniemy błędów spowodowanych
tym, że skrypt nie może się odwołać do jeszcze nie istniejących elementów strony.
Umieszczanie skryptów w oddzielnym pliku
Pisząc semantyczne strony, powinniśmy unikać wstawiania skryptów bezpośrednio w kod strony, zastępując je skryptami umieszczonymi
w dołączanych plikach.
Aby przyłączyć plik ze skryptami do naszej strony powinniśmy zastosować dodatkowy atrybut src:
1
2
<script type="text/javascript" src="plik_ze_skryptem.js"></script>
?
Umieszczanie skryptów w oddzielnych plikach ma kilka zalet:
możemy dany plik wykorzystać na kilku stronach (dzięki temu możemy tworzyć biblioteki najlepszych skryptów, które będziemy
dołączać do stron - na tej zasadzie działają znane frameworki np. jQuery, Prototype itp
pozwala oczyścić naszą stronę ze zbędnego kodu (strony są przez to "lżejsze"),
nie musimy stosować bloku DATA, martwić się o wszelakie encje itp.
Tak samo jak w przypadku wstawiania skrypów w kod strony, nasze skrypty powinniśmy dołączać na końcu kodu (tuż przed </body>):
1
2
3
4
5
6
7
<body>
...treść strony...
?
<script type="text/javascript" charset="UTF-8" src="skrypty.js"></script>
<script type="text/javascript" charset="UTF-8" src="inne_skrypty.js"></script>
</body>
Dobrym pomysłem jest trzymać skrypty w jak najmniejszej ilości plików. Dzięki temu zyskamy na liczbie odwołań (requests) do
serwera. Oczywiście nie przesadzajmy też i w tą stronę. Lepiej wywołać odwołanie, niż totalnie zagubić się we własnych zbiorach funkcji.
converted by Web2PDFConvert.com