rrogacz.pl
Kurs JavaScript
JavaScript: struktury, przykłady, samouczki w3schools.com
Przewodnik po JavaScript MDN
JavaScript (JS) to dynamiczny język programowania <-kliknij , którego głównym celem początkowo było wprowadzenie interaktywności do stron HTML.
Dzięki dynamicznemu rozwojowi już od kilkunastu lat wyszedł ponad swój pierwotny cel pozwalając nam tworzyć całe aplikacje.
Tak naprawdę Javascript sam w sobie nie jest jakimś rozbudowanym językiem.
Kilka pętli, kilka funkcji, obiekt Math, window, null itp. rzeczy, o których będziemy się tutaj uczyć.
W dzisiejszych czasach możemy jednak za jego pomocą napisać nie jedno wielkie dzieło. Zresztą daleko nie ma co szukać - każdy z nas na co dzień używa wielu dynamicznych stron takich jak Facebooka, Youtuba, które są stworzone właśnie za pomocą Javascript.
document.
document: Jest to główny obiekt, który stanowi korzeń całego drzewa DOM. Dostęp do niego umożliwia manipulowanie całą stroną internetową.window: Jest to obiekt globalny, który zawiera document oraz wszystkie inne obiekty, funkcje i właściwości przeglądarki, co pokazuje hierarchię modelu. <script>:
<!doctype html>
<html lang="pl">
<head>
<meta charset=UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>pierwszy skrypt</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Odit quia aspernatur optio recusandae, atque, reiciendis
tempore doloremque temporibus aliquid nemo vitae sint?
</p>
<script>
document.write("Nasz pierwszy skrypt!");
</script>
</body>
</html>
<!doctype html>
<html lang="pl">
<head>
<meta charset=UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>pierwszy skrypt</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Odit quia aspernatur optio recusandae, atque, reiciendis
tempore doloremque temporibus aliquid nemo vitae sint?
</p>
<script src="plik_ze_skryptem.js"></script>
</body>
</html>W większości przypadków raczej ta z zewnętrznym plikiem. Tak robi większość stron.
Ale nie jest to wcale 100% normą. Część stron, którym bardzo zależy na optymalizacji
wstawia swoje całe skrypty i style inline w kod html strony.
Dzięki temu przeglądarka nie musi dociągać dodatkowych plików.
Osobiście został bym przy skryptach w oddzielnych plikach. Ewentualnie szybkie, krótkie zadania gdzie skrypty to tylko kilka linii kodu spokojnie możemy pisać bezpośrednio w html.
<script src="..." defer></script>
<script src="..." async></script>
<script src="..." async defer></script>
Przeglądarka czyta kod strony od góry do dołu.
Gdy natrafi na dołączony skrypt, wstrzymuje ładowanie reszty strony aż do momentu całkowitego wczytania i wykonania skryptu.
Przy malutkich skryptach nie ma to raczej znaczenia, ale przy większych skryptach może to powodować zauważalne blokowanie wczytywania strony.
Aby zapobiec takiemu blokowaniu stosuje się właśnie atrybuty defer lub async.
Atrybut async powoduje, że jeżeli przeglądarka czytając kod strony natrafi na plik ze skryptem zacznie go wczytywać w tle,
równocześnie czytając dalszą część kodu strony.
Jeżeli cały plik ze skryptem się wczyta, wtedy kod zostanie odpalony.
Atrybut defer działa w miarę podobnie.
Plik ze skryptem też będzie wczytywany w tle.
Różnica jest taka, że jeżeli przeglądarka wczyta już cały plik ze skryptem,
odpali go po załadowaniu całego dokumentu (ale tuż przed odpaleniem zdarzenia DOMContentLoaded).
Różnica między tymi atrybutami jest też taka,
że skrypty z atrybutem defer będą odpalane w kolejności w jakiej zostały wstawione do dokumentu.
W przypadku async skrypty będą odpalane w kolejności "kto pierwszy ten lepszy",
czyli który skrypt wczyta się wcześniej, ten zostanie wcześniej odpalony.
Niektóre starsze przeglądarki różnie implementują te atrybuty.
Z tego też powodu czasami spotkasz się ze znacznikami script, które nie tylko posiadają async i defer,
ale też umieszczone są na końcu pliku.
Są to skrypty, które nie mają istotnego znaczenia dla działania strony, więc nie muszą się szybko wczytywać.
W dzisiejszych czasach większość osób zaleca wstawianie skryptów do HEAD dokumentu (lub gdzieś na górę dokumentu)
i dodawanie im atrybutu defer.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="super-script.js" defer></script>
</head>
<body>
..treść strony...
</body>
</html>
Dzięki temu przeglądarka będzie mogła wcześniej zacząć wczytywać twoje skrypty równocześnie czytając resztę strony.
Jeżeli będziesz robił stronę, która ma wspierać mocno stare przeglądarki,
wtedy zastosuj omawiane powyżej klasyczne podejście czyli umieszczaj skrypty przed zamknięciem BODY.
W przeciwnym razie polecam miejsce w HEAD i skorzystanie z atrybutu defer.