Udostępnij za pośrednictwem

  • Artykuł

          

Kurs JavaScript - Jak umieszczać skrypty  Udostępnij na: Facebook

Autor: Piotr Bubacz

Opublikowano: 2011-12-05

W języku JavaScript możesz umieszczać skrypty prawie w dowolnym miejscu na stronie. Wiele lat temu dobrą praktyką było umieszczanie skryptu w nagłówku strony. Dzisiaj raczej odchodzi się od takich praktyk ze względu na szybkość renderowania strony w przeglądarce. Dzisiejsze przeglądarki renderują stronę podczas jej pobierania i dodatkowe obciążenie, w postaci kodu JavaScript, nie wpływa pozytywnie na szybkość wyświetlania strony w przeglądarce klienta. Dodatkowo, większość kodu JavaScript, wywoływana jest już po załadowaniu strony – utworzeniu wszystkich referencji do obiektów DOM, w związku z tym umieszczanie skryptu w nagłówku nie jest dobrym rozwiązaniem.

Przykład umieszczania skryptu w nagłówku strony:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript w akcji</title>
<script type="text/javascript">
document.getElementById("pokaz").innerHTML = "Twoja przeglądarka obsługuje JavaScript";
</script>
</head>
<body>
<h1>Moja pierwsza strona</h1>
<p id="pokaz">To jest mój akapit.</p>
</body>
</html>

Po uruchomieniu kodu w przeglądarce, zostanie wyświetlony komunikat błędu (Rys. 1.). Wyświetlenie błędu zależy od ustawień przeglądarki. Często przeglądarki ignorują ten błąd i nie pokazują odpowiedniego komunikatu.

Rys. 1. Błąd właściwości innerHTML w przeglądarce.

Aby uniknąć tego typu błędów, możesz wykonać swój skrypt, po załadowaniu strony, za pomocą obsługi zdarzenia onload().

<!DOCTYPE html>
<html>
<head>
<title>JavaScript w akcji</title>
<script type="text/javascript">
function start() {
document.getElementById("pokaz").innerHTML = "Twoja przeglądarka obsługuje JavaScript";}
</script></head>
<body onLoad="start()">
<h1>Moja pierwsza strona</h1>
<p id="pokaz">To jest mój akapit.</p>
</body>
</html>

Inną możliwością poprawnego wykonania skryptu jest umieszczenie go na końcu strony.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript w akcji</title>
</head>
<body>
<h1>Moja pierwsza strona</h1>
<p id="pokaz">To jest mój akapit.</p>
<script type="text/javascript">
document.getElementById("pokaz").innerHTML = "Twoja przeglądarka obsługuje JavaScript";
</script>
</body>
</html>

Dodatkowo, zamiast umieszczać kod bezpośrednio na stronie, lepiej umieścić go w zewnętrznym pliku, który możesz dołączyć do strony, za pomocą następującej konstrukcji:

<script type="text/javascript" src="adresPlikuJS">
</script>

gdzie adresPlikuJS jest lokalizacją pliku JavaScript.

Za umieszczaniem kodu w zewnętrznym pliku przemawia również możliwość budowania biblioteki funkcji i ponownego ich wykorzystania w innej aplikacji internetowej.

Jeśli chcesz umieścić skrypt bezpośrednio na stronie i jeśli zdarzy się, że Twój klient posiada przeglądarkę, która nie obsługuje skryptów JavaScript, musisz do swojego kodu dodać komentarz pomiędzy znacznikami:

<script type="text/javascript">
<!--
document.getElementById("pokaz").innerHTML="Twoja przeglądarka obsługuje JavaScript";
//-->
</script>