Pytania:

A. Gdzie w dokumencie HTML można deklarować/osadzać kod JS? (tag script)
B. Jakie są wszystkie możliwości osadzania kodu JS w HTML?
C. Jak dodatkowo można sterować osadzaniem kodu JS w HTML?
D. Kiedy skrypt jest 'blokujący' i co to oznacza?

E. Jakie są inne niż 'tag script' sposoby wywoływania/deklarowania/osadzania kodu JS?

Ad.A)
    - w sekcji head (niezalecane), w sekcji body (zalecane na końcu)

Ad.B)
    B1. Wstawianie kodu JS bezpośrednio w HTMLu, np:
        <script>console.log("To jest kod JavaScript wewnątrz HTML");</script>

    B2. Wczytawanie kodu JS wykorzystując plik z kodem JS, np:
        <script src="app.js"></script>

    B3. Wczytywanie kodu JS jako modułu ES6 wykorzystując plik z kodem JS.
        Przykład:
        <script type="module">
            import { funkcja } from './modul.js';
            funkcja();
        </script>

    B4. Osadzanie kodu JS w atrybutach HTML (niezalecane).
        Poniżej przycisk (tag button) z podpiętym kodem JS (atrybut onlick wewnątrz tagu button):
        <button onclick="alert('Witaj!');">Tekst przycisku.</button>

Ad.C)
Ponadto, w tagu 'script' osadzaniem kodu JS steruje się poprzez konfigurację "trybu asynchroniczności" wczytywania kodu JS.

    C1. Domyślnie "tryb asynchroniczności" jest wyłączony/nieskonfigurowany:
        wczytanie/wykonanie skryptu JS zatrzymuje analizowanie HTML do czasu jego zakończenia
        </script src="basics_script.js" ></script>

    C2. defer
        skrypt jest wykonywany po zakończeniu analizy całego HTML, defer jest używany dla skryptów, które muszą manipulować DOM
        </script src="basics_script.js" defer></script>

    C3. async
        skrypt jest wykonywany równolegle z ładowaniem reszty dokumentu HTML
        async jest używany dla skryptów niezależnych, takich jak analityka lub reklamy
        </script src="basics_script.js" async></script>

Ad.D)
    Mówi się, że skrypt jest blokujący, gdy tag script nie używa "trybu asynchroniczności" - defer / async nie jest ustawiony.

Ad.E)
    Niektóre elementy HTML mają atrybuty, które pozwalają na wstrzyknięcie kodu JS:
        Atrybuty / zdarzenia DOM:
         - onclick, onmouseover, onchange, itp. - button, a, form, input, select
         - W HTML5 praktycznie każdy element może mieć atrybuty zdarzeń — nawet zwykły div czy span.
         - To działa, bo przeglądarka implementuje zdarzenia DOM dla wszystkich elementów, nawet nieinteraktywnych.

        Rzadziej stosowane:
         - <a href="javascript:JS_CODE">Kliknij link</a>
         - Kliknij link

Przykłady