JavaScript: Wstawianie skryptu na stronę www

0:00Jak wspominałem już w jednej z poprzednich

0:02lekcji, kod JavaScript możemy uruchamiać wszędzie tam, gdzie jest odpowiednie

0:06środowisko, które potrafi go zinterpretować i uruchomić.

0:09Najpopularniejszym tego typu środowiskiem jest przeglądarka internetowa, czyli można

0:14powiedzieć, że kod uruchamiany na stronach internetowych.

0:17I tak też będziemy robić w większości tego kursu,

0:20dlatego w tej lekcji będę chciał Ci pokazać jak możemy do strony internetowej

0:23podpiąć skrypt, który następnie będzie podczas wczytywania się tej strony

0:27internetowej uruchamiany przez przeglądarkę.

0:31Mam tutaj taką prostą stronę internetową,

0:32którą oczywiście znajdziesz w plikach źródłowych i na niej jedyne co jest

0:36podłączone jakby z zewnątrz jest to link do styli tak żeby nam tutaj to wszystko

0:41fajnie wyglądało i podobnie jak podłączamy style CSS do strony,

0:46podobnie możemy podłączyć również skrypty

0:47JavaScript. Więc mam tutaj taki pusty plik, który nazwałem main.js i

0:52jest w katalogu js tutaj właśnie i będziemy chcieli go podłączyć.

0:56Robimy to za pomocą specjalnego tagu, który nazywa się script.

1:01Wygląda to w ten sposób i dodajemy atrybut src.

1:05Tutaj musimy podać ścieżkę pod jaką znajduje się nasz plik JavaScript.

1:09I to może być ścieżka, czyli adres zewnętrzny, tak jak np.

1:11tutaj widzimy, nie musi to być z tego samego serwera serwowane, z którego jest

1:16nasza strona, albo może to być plik podłączony lokalnie.

1:19Tak czy siak, kiedy znajdzie się to na serwerze już internetowym, to przeglądarka

1:23wczytując tę stronę tak naprawdę z góry na dół

1:26kiedy natknie się na taki lokalny adres to

1:28pobierze go oczywiście z tej samej domeny z tego samego miejsca.

1:32Więc tutaj możemy po prostu napisać js i następnie main.js

1:36w ten oto sposób dlatego, że patrzymy sobie relatywnie, jesteśmy w pliku index.html

1:41więc od razu z niego można wejść do katalogu

1:44js i do tego pliku.

1:46Dlatego właśnie podaliśmy taką oto ścieżkę.

1:49Jak wspomniałem, kiedy ta strona będzie wczytywana, z góry na dół będzie

1:52tworzone takie całe drzewo dokumentu, o którym jeszcze później będziemy mówić, to

1:56kiedy przeglądarka natknie się na ten skrypt, po prostu go pobierze i wykona.

2:01Co ważne, skrypt nie musi być umieszczony dokładnie w tym miejscu, ale zazwyczaj

2:05skrypty umieszczamy właśnie przed zamykającym tagiem body.

2:08Niemniej jednak w zasadzie w dowolnym

2:09miejscu możemy je umieścić i będzie to działać w niektórych przypadkach tak samo,

2:14a w większości przypadków będziemy tutaj musieli zwrócić uwagę na pewną

2:19kolejność, ale o tym jeszcze będę później mówił w kursie.

2:22Czyli możesz się spotkać również z tym, że taki skrypt będzie umieszczany w elemencie

2:26head, ale to będzie blokowało nam wczytywanie strony

2:29jeżeli ten plik będzie zajmował np.

2:30500 kilobajtów, to strona będzie cały czas

2:33biała dla użytkownika do momentu, aż nie wczyta się i nie wykona ten skrypt.

2:38Dlatego w tym przypadku lepszą praktyką jest robienie tego tutaj.

2:41Wtedy strona się wczytuje, ona już wizualnie na ekranie użytkownika jest,

2:45następnie jest pobierany skrypt i dopiero jest on wykonywany.

2:49Jeszcze jest więcej zalet podłączania tego

2:51na dole strony, ale tak jak wspomniałem będę o tym jeszcze mówił w tym kursie.

2:55Czyli w ten sposób możemy dołączyć jeden plik JavaScript,

2:58oczywiście ich tutaj mogą być więcej, wtedy podajemy kolejne elementy script.

3:03Pamiętaj, że zawsze, również tutaj musimy domknąć ten element, mimo tego, że nie

3:07mamy tutaj pomiędzy jak widzisz tymi elementami żadnego kodu JavaScript.

3:13OK, więc teraz będę chciał żebyśmy sobie w

3:15tym pliku coś wpisali i na początek skorzystamy sobie z takiego console log.

3:20Jest to taka specjalna metoda log na obiekcie Console, która pozwala nam

3:24wyświetlić w konsoli przeglądarki podany tutaj tekst.

3:28W zasadzie tu można przekazać jeszcze inne rzeczy.

3:30Też będziemy to wielokrotnie jeszcze robić.

3:32Napiszmy sobie tutaj Witaj świecie,

3:35zakończę to w ten sposób,

3:36później jeszcze będę w kursie w kolejnych

3:38lekcjach tłumaczył składnie funkcji i wszystkich niezbędnych konstrukcji.

3:42Niemniej jednak taki prosty programik dołączyliśmy do naszej strony i teraz tę

3:46stronę będę chciał uruchomić z użyciem Live Servera

3:49więc wciskam Command Shift P lub Control

3:51Shift P na Windowsie i tutaj wybieram Live Serwer: Open with Live Serwer.

3:57W ten oto sposób. I teraz przejdę sobie do

3:58przeglądarki Chrome, odświeżę stronę właśnie pod takim adresem

4:03i będziemy mieli taki główny katalog i następnie nasz przykład,

4:07możemy do niego przejść.

4:08Kliknę jeszcze prawym przyciskiem na stronę i wybiorę Inspect żeby otworzyć

4:12sobie ten panel Chrome Developer Tools i przejdziemy do zakładki Console,

4:17dokładnie tutaj zobaczymy komunikat, który

4:19wpisaliśmy. Więc mogę jeszcze raz odświeżyć stronę,

4:22kiedy ta strona się wczytuje wczytuje się nasz skrypt,

4:25kod JavaScript jest interpretowany przez

4:27ten silnik zawarty w przeglądarce internetowej i jest wykonywany.

4:30No i w przypadku przeglądarki kiedy robimy właśnie console.log

4:34to to co tutaj przekażemy

4:36pojawia się w tej zakładce Console i służy to głównie dla nas do debugowania.

4:41W innym środowisku, takim jak np.

4:43Node.js, również będziemy mogli skorzystać

4:45z console.log, ale wtedy oczywiście gdzie indziej zobaczymy ten komunikat.

4:50Na koniec tej lekcji chcę jeszcze

4:52wspomnieć o jednej możliwości podłączenia skryptów do strony internetowej

4:55a w zasadzie, że możemy je wpisywać bezpośrednio.

4:58Czyli jeżeli byśmy nie użyli tutaj atrybutu src, a tylko utworzyli taki tag script,

5:04to możemy wewnątrz tego tagu wpisać dowolny kod JavaScript.

5:08Czyli tutaj również mógłbym wpisać console.log Witaj z liniowego skryptu np.

5:15w ten sposób,

5:17bo nazwiemy to takim liniowym skryptem, który jest bezpośrednio wstawiony na

5:20stronę i tutaj nam się strona automatycznie odświeży

5:23i jak widzisz najpierw mamy Witaj świecie, a następnie Witaj z liniowego skryptu.

5:27Czyli kod JavaScript również może być zawarty w takich elementach

5:30i to przydaje się przede wszystkim wtedy, kiedy chcemy tutaj skonfigurować pewne

5:34rzeczy, a następnie podpinamy jakiś inny skrypt i w tym skrypcie korzystamy z

5:39niektórych globalnych zmiennych, które tutaj ustawiliśmy.

5:42Często również w ten sposób osadza się np.

5:44Google Analytics na stronach itd.

5:46więc na pewno często się z tym spotkasz.

5:48Niemniej jednak zdecydowaną większość skryptów będziemy tworzyć w osobnych

5:52plikach i podłączać je do naszej strony w taki sposób jak tutaj widzisz.