Jak dołączyć kod JavaScript do dokumentu HTML?

Mam problem ze wstawieniem kodu JavaScript do dokumentu HTML. Czy jest jakieś konkretne miejsce w kodzie strony, w którym powinien pojawiać się skrypt?

  • Sposobów jest kilka

    1. Możesz osadzić Javascript do testów w kodzie dokumentu np:

      <div>
      costam
      </div>
      <script>
         function pokazHalo()
         {
            alert('Halo!');
         }
      </script>
      <a href='#' onclick='pokazHalo(); return false;'>Pokaż halo!</a>
      
    2. Możesz podać odwołanie do pliku JS z kodem Javascript w ten sposób:

      < SCRIPT TYPE="text/javascript" SRC="adresurlpliku_js.js"></script>

    Dobre praktyki

    Najlepiej trzymać kod Javascript w pliku i stosować metodę 2 jednak czasem do testów wygodniej jest zacząć w kodzie programu. Trzymanie kodu w JS jest dobre ponieważ przeglądarka może sobie zapamiętać ten plik i nie pobierać za każdym razem gdy otwierasz każdą podstronę strony. Poza tym oczywiście możesz korzystać z takiego pliku w wielu stronach i podstronach.

    Odwołanie do pliku skryptu dobrze jest trzymać w nagłówku dokumentu (< HEAD >). Natomiast skrypt wewnątrz html-a(rozw. 1 na końcu pliku HTML, aby strona wczytała się w całości przed przetwarzaniem JS, a po drugie, żeby błędy w JS nie powodowały nieoczekiwanych błędów na stronie.

    Odwołanie do zewnętrznego pliku JS na końcu pliku HTML też ma sens o ile zależy Ci na otrzymaniu ekstremalnej wydajności. Warto pamiętać przy tym o jeszcze jednej ekstremalnie szybkiej metodzie. Aczkolwiek musisz się zastanowić, czy takie zmiany warte są świeczki - czy poświęcony czas na to zagadnienie spowoduje wzrost wydajności, który jest Ci do czegokolwiek potrzebny.

  • Najlepszym rozwiązaniem jest dołączenie zewnętrznych plików o rozszerzeniu .js z czystym kodem JavaScript. Robi się to w sekcji HEAD :

    <HEAD>
    <!-- metatagi -->
    <SCRIPT TYPE="text/javascript" SRC="moj_plik_skryptu.js"></SCRIPT>
    </HEAD>
    

    Dzięki temu:

    1. Ogranicza się ilość przesyłanych przez serwer danych, ponieważ przeglądarka może cache'ować pliki skryptu.

    2. Przeglądarki potrafią zrównoleglać proces wczytywania osobnych plików składających się na stronę WWW.

    3. Modyfikacja strony HTML i umieszczenie jej na serwerze trwa krócej (mniej danych trzeba wysłać).

    4. Oddziela się warstwę logiki strony od warstwy prezentacji.

    5. Tego samego skryptu można użyć na innych podstronach.

  • Szkoda, że nie napisałeś dokładniej, na czym polega problem. Ogólnie to kod musisz umieścić w znacznikach <script>, najlepiej w cześci <head>, chociaż czasami zdarza się potrzeba umieszczenia go w sekcji <body>. Na wszelki wypadek masz tu przykładowy kawałek kodu.

    <script type="text/javascript">
        function NewWindow (url) {
            rez=window.open(url, "", width=1024, height=768, scrollbars=yes, resizable=yes);
        }
    </script>
    

  • Tak. Tagi script mogą być umieszczane w sekcji <head> albo jako dzieci tagu <body>.

    (specyfikacja)

  • A w praktyce lepiej w body i to na samym końcu, bo wtedy oczekiwanie na skrypty nie będzie blokować renderowania strony...

    Oczywiście mowa o załączeniu zewnętrznych skryptów, a nie wpisywanie ich inline w kodzie strony.

    Uzasadnienie: Jeżeli nie umieści się skryptów na końcu kodu strony, to przeglądarka zacznie je ładować podczas gdy mogłaby się zająć ładowaniem obrazków itd. Skrypty blokują równoległe ładowanie elementów strony, umieszczenie ich na końcu sprawi że ich ładowanie nie zakłóci renderowania strony tak szybko jak to tylko możliwe.

  • <html>
      <head>
      <title>Podstawowa struktura strony</title>
    
     <script type = "text/javascript">
    
      // Tu umieszczamy kod JavaScript
      // Ale nie HTML
    
     </script>
    
      </head>
      <body>
    
      <script type = "text/javascript">
    
      // Tu również możemy umie¶cić kod JavaScript
      // Ale nie HTML
    
      </script>
    
      </body>
      </html>
    

  • Pamiętaj, że tworząc stronę w jakimś standardzie (x)HTML musisz pamiętać o odpowiednim zapisie tagu otwierającego <script< p="">

Zaloguj się, aby dodać swoją odpowiedź