Wstawiamy pierwszy skrypt na naszą stronę

Do umieszczenia skryptów na stronie służy znacznik <script>:


<html>
<head>
    <title>Super skrypt</title>
</head>
<body>
<script>
    ...instrukcje skryptu
</script>
</body>

W przypadku html4 trzeba do tagu script dodać dodatkowy atrybut type="javascript".

Umieszczanie skryptów w oddzielnym pliku

Ogólnie rzecz biorąc powinniśmy unikać wstawiania skryptów bezpośrednio w kod strony, zastępując je skryptami umieszczonymi w dołączanych plikach. Nie jest to zasada, której pominięcie zniszczy nam życie. Zobacz chociażby skrypty Google Analitics, czy skrypty dla Facebooka. Wstawia się je do kodu html i nikt z tego afery nie robi.

Wyobraź sobie jednak, że tak jak w tym kursie chcesz za pomocą JS obsłużyć menu.
Gdybyś wstawiał ten skrypt w kod każdej strony z osobna, trochę by ci zajęło. Gorzej, gdy za jakiś ktoś ci wyśle maila, że masz w tym skrypcie literówkę (nawet nie zdajesz sobie sprawy, ile ja takich maili dostaje :P). Musiałbyś na nowo przeglądać kod wszystkich podstron, poprawiać, dłubać. Tylko po co?
Gdy dołączasz skrypt z pliku, wszystko masz w jednym miejscu. Poprawiasz literówkę i wszędzie jest poprawione. Co więcej, od razu wiadomo w jakim miejscu ten skrypt jest - co nie zawsze jest wiadome, gdy kawałki skryptów są rozrzucone po bardzo długich HTML, które przypominają zupę.

Aby przyłączyć plik ze skryptami do naszej strony powinniśmy zastosować dodatkowy atrybut src:


    <script src="plik_ze_skryptem.js"></script>

Gdzie wstawiać nasze skrypty

Skrypty możesz wrzucać w różne miejsca na stronie. Najlepszymi miejscami do umieszczania skryptów są sekcja HEAD i koniec sekcji BODY:


    <!DOCTYPE html>
    <html>
        <head>
            <title>Jestem super stroną</title>

            <script src="modernizr.js"></script>
            <script src="jquery.js"></script>
        </head>
        <body>
            ..treść strony...

            <script src="super-script.js"></script>
            <script>
                alert('Witaj świecie');
            </script>
        </body>
    </html>

Wybór miejsca wiąże się z dwiema kwestiami.
Pierwsza z nich tyczy się zasady, która mówi o tym, by użytkownik dostawał w pierwszej chwili treść strony. Cała interakcja (JS), dodatki itp powinna być wysyłana w drugiej kolejności.
Ale to drobnostka, o której na początku możemy zapomnieć.
Ta "bardziej ważna" sprawa tyczy się samych skryptów. Bardzo często będziesz chciał w nich działać na konkretnych elementach strony. Przykładowo zapragniesz pokazać przycisk, ukryć formularz, pokazać użytkownikowi jakieś okienko itp. Jeżeli twój skrypt zostanie wczytany przed takim elementem (czyli w kodzie HTML będzie się znajdował przed takim elementem HTML), a nie posiada żadnych metod do wykrywania czy cała strona została już wczytana, to dostaniesz błąd wynikający z tego, że skrypt ten nie widzi elementu.

Póki co jednak najbezpieczniej będzie, gdy swoje skrypty lub odwołania do plików z JS będziesz umieszczał na końcu strony.
Z czasem nauczysz się wykrywać załadowanie całej strony, pakować kilka skryptów w jeden plik itp metody, ale wtedy pewnie już nie będziesz czytał tego kursu :}