Autor publikacji
Virtual Patriot - Administrator

script

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu script

Element script reprezentuje zasób internetowy w postaci dodatkowego skryptu przeznaczonego dla danego dokumentu HTML (domyślnie skryptu języka programowania JavaScript).

Dodatkowe artykuły związane z elementem script

Informacje techniczne o elemencie script

kategoria ogólna
kontekst zewnętrzny

  • element HTML, który tworzy wewnętrzny kontekst metadata

    Przykładowy Kod HTML

    <!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <script src="skrypt-01.js"></script>
  </head>

  <body>
    <!-- miejsce na pozostały kod części BODY dokumentu HTML -->
  </body>
</html>

    Kontekstem zewnętrznym przykładowego elementu "script" jest element "head". Wspomniany element "head" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst metadata, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "head", jest prawidłowym kontekstem zewnętrznym dla elementu "script".

  • element HTML, który tworzy wewnętrzny kontekst frazowany

    Przykładowy Kod HTML

    <article>
  <h1>Mój ulubiony owoc</h1>

  <p>
    Moim ulubionym owocem jest czereśnia.
    <script src="skrypt-01.js"></script>
  </p>
</article>

    Kontekstem zewnętrznym przykładowego elementu "script" jest element "p". Wspomniany element "p" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "p", jest prawidłowym kontekstem zewnętrznym dla elementu "script".

  • element HTML, który tworzy wewnętrzny kontekst skryptowy

    Przykładowy Kod HTML

    <article>
  <h1>Mój ulubiony owoc</h1>
  <p>Moim ulubionym owocem jest czereśnia.</p>

  <script src="skrypt-01.js"></script>
</article>

    Kontekstem zewnętrznym przykładowego elementu "script" jest element "article". Wspomniany element "article" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst skryptowy, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "article", jest prawidłowym kontekstem zewnętrznym dla elementu "script".

kontekst wewnętrzny

  • gdy dany element script nie posiada atrybutu src, wtedy kontekstem wewnętrznym takiego elementu script może być zawartość tekstowa reprezentująca skrypt utworzony w języku, na który wskazuje wartość atrybutu type wspomnianego elementu script

    Przykładowy Kod HTML

    <article>
  <h1>Mój ulubiony owoc</h1>
  <p>Moim ulubionym owocem jest czereśnia.</p>

  <script>alert('Witaj w serwisie!');</script>
</article>

    Kontekstem wewnętrznym przykładowego elementu "script" jest wyłącznie zawartość tekstowa w formie skryptu języka programowania JavaScript. Ponadto wspomniany element "script" nie posiada atrybutu "src" oraz wartością domyślną atrybutu "type" wspomnianego elementu "script" jest wartość "text/javascript", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli ciąg znaków "alert('Witaj w serwisie!');", jest prawidłowym kontekstem wewnętrznym dla elementu "script".

  • brak, lecz tylko wtedy gdy dany element script posiada atrybut src, ponadto kontekstem wewnętrznym takiego elementu script może być wyłącznie zawartość tekstowa reprezentująca dokumentację danego skryptu, napisaną w formie komentarza danego języka skryptu, na który wskazuje wartość atrybutu type wspomnianego elementu script

    Przykładowy Kod HTML

    <article>
  <h1>Mój ulubiony owoc</h1>
  <p>Moim ulubionym owocem jest czereśnia.</p>

  <script src="skrypt-01.js"></script>
</article>

    Przykładowy element "script" nie posiada kontekstu wewnętrznego, ponieważ wspomniany element "script" posiada atrybut "src", dlatego w tej sytuacji wspomniany brak kontekstu wewnętrznego jest prawidłowym kontekstem wewnętrznym dla elementu "script".

    Przykładowy Kod HTML

    <article>
  <h1>Mój ulubiony owoc</h1>
  <p>Moim ulubionym owocem jest czereśnia.</p>

  <script src="skrypt-01.js">
    //ten skrypt JavaScript pełni rolę powitania użytkownika
  </script>
</article>

    Kontekstem wewnętrznym przykładowego elementu "script" jest wyłącznie zawartość tekstowa w formie komentarza języka programowania JavaScript. Ponadto wspomniany element "script" posiada atrybut "src" oraz wartością domyślną atrybutu "type" wspomnianego elementu "script" jest wartość "text/javascript", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli ciąg znaków "//ten skrypt JavaScript pełni rolę powitania użytkownika", jest prawidłowym kontekstem wewnętrznym dla elementu "script".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<script> ... </script>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

none

Przypuszczalnie domyślne reguły CSS elementu script

script {
  display:none;
}

Interpretacja elementu script

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Interpretuje atrybut async oraz defer, lecz od wersji "10".

Interpretuje atrybut crossorigin, lecz od wersji "11".

Nie interpretuje atrybutu nonce.

Edge

tak

Opis atrybutów elementu script

Atrybut Lokalny

async

Przeznaczenie atrybutu async

Atrybut async wykorzystany wraz z elementem script pozwala nam określić czy w momencie pobierania przez przeglądarkę internetową do swojej pamięci podręcznej skryptu reprezentowanego przez dany element script jeden z mechanizmów przeglądarki internetowej powinien kontynuować przetwarzanie kodu znajdującego się po danym elemencie script, a następnie gdy docelowy proces pobierania skryptu zakończy się, skrypt ten powinien zostać natychmiast uaktywniony, nawet gdy przetwarzanie kodu danego dokumentu HTML nie zakończyło się jeszcze w całości.

Atrybut "async" ma sens tylko wtedy gdy dany element "script" posiada atrybut src.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu async

async

Atrybut async jest atrybutem logicznym elementu script.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <script src="https://webkod.pl/files/html/skrypt-v1.js" async>
      //var zmienna = 88;
      //console.log(zmienna);
    </script>

    <p>
      Przykładowa treść dokumentu HTML.
    </p>

  </body>
</html>

Rezultat

Przykładowa treść dokumentu HTML.

W momencie pobierania przez przeglądarkę internetową do swojej pamięci podręcznej skryptu "skrypt-v1.js" reprezentowanego przez przykładowy element "script" przetwarzanie kodu znajdującego się po przykładowym elemencie "script" nie zostało wstrzymane przez jeden z mechanizmów przeglądarki internetowej, ponieważ do wspomnianego elementu "script" został dodany atrybut "async".

Atrybut Lokalny

charset

Przeznaczenie atrybutu charset

Atrybut charset wykorzystany wraz z elementem script pozwala nam określić informację o systemie kodowania znaków, jaki posiada zasób internetowy reprezentowany przez dany element script.

Atrybut "charset" ma sens tylko wtedy gdy dany element "script" posiada atrybut src.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu charset

system kodowania znaków

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującego nas systemu kodowania znaków.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <p id="akapit-2">
      Domyślna treść elementu "p".
    </p>

    <script src="https://webkod.pl/files/html/skrypt-v2.js" charset="utf-8">
      //window.document.getElementById('akapit-2').innerHTML += '<b>Dodatkowa treść elementu "p".</b>';
    </script>

  </body>
</html>

Rezultat

Domyślna treść elementu "p".

Sugerowanym dla przeglądarki internetowej systemem kodowania znaków, jaki posiada zasób internetowy "skrypt-v2.js", jest system "utf-8", ponieważ do przykładowego elementu "script" reprezentującego zasób internetowy "skrypt-v2.js" został dodany atrybut "charset" wraz z wartością "utf-8".

Atrybut Lokalny

crossorigin

Przeznaczenie atrybutu crossorigin

Atrybut crossorigin wykorzystany wraz z elementem script pozwala nam określić, w jaki sposób dany element script reprezentujący zasób internetowy ma reagować na mechanizm umożliwiający wymienianie się zasobami internetowymi pomiędzy serwerami znajdującymi się w różnych domenach (tzw. CORS, czyli Cross-Origin Resource Sharing).

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

anonymous (gdy nie podaliśmy wartości)

anonymous (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu crossorigin

anonymous

Wartość anonymous oznacza, że nie jest wymagane potwierdzenie tożsamości użytkownika.

use-credentials

Wartość use-credentials oznacza, że jest wymagane potwierdzenie tożsamości użytkownika, np. za pomocą COOKIES (tzw. ciasteczka), za pomocą certyfikatu SSL po stronie klienta lub za pomocą uwierzytelnienia HTTP.

Atrybut Lokalny

defer

Przeznaczenie atrybutu defer

Atrybut defer wykorzystany wraz z elementem script pozwala nam określić czy skrypt reprezentowany przez dany element script powinien zostać uaktywniony przez jeden z mechanizmów przeglądarki internetowej wyłącznie w momencie gdy kod danego dokumentu HTML zostanie przetworzony w całości przez drugi z mechanizmów przeglądarki internetowej.

Atrybut "defer" ma sens tylko wtedy gdy dany element "script" posiada atrybut src.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu defer

defer

Atrybut defer jest atrybutem logicznym elementu script.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <script src="https://webkod.pl/files/html/skrypt-v3.js" defer>
      //window.document.getElementById('akapit-3').innerHTML += '<b>Dodatkowa treść elementu "p".</b>';
    </script>

    <p id="akapit-3">
      Domyślna treść elementu "p".
    </p>

  </body>
</html>

Rezultat

Domyślna treść elementu "p".

Skrypt "skrypt-v3.js" reprezentowany przez przykładowy element "script" został uaktywniony przez jeden z mechanizmów przeglądarki internetowej w momencie gdy drugi z mechanizmów przeglądarki internetowej zakończył w całości przetwarzanie kodu danego dokumentu HTML, ponieważ do wspomnianego elementu "script" został dodany atrybut "defer".

Atrybut Lokalny

nonce

Przeznaczenie atrybutu nonce

Atrybut nonce wykorzystany wraz z elementem script pozwala nam określić informację o tym, jaki wygenerowany losowo (np. za pomocą języka programowania PHP) oraz istniejący na potrzeby polityki prywatności treści (Content Security Policy) ciąg znaków powinien zostać przypisany do danego elementu script, dzięki czemu jeden z mechanizmów przeglądarki internetowej będzie mógł zdecydować, czy skrypt reprezentowany przez dany element script powinien zostać uaktywniony.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu nonce

ciąg znaków

Należy podać niepusty ciąg znaków, który został wygenerowany losowo dla dokumentu HTML, w którego zawartości znajduje się dany element script.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-security-policy" content="script-src 'nonce-46348910'">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <p id="akapit-1">
      Skrypt jest nieaktywny!
    </p>

    <script nonce="46348910">
      window.document.getElementById('akapit-1').innerHTML = 'Skrypt został uaktywniony!';
    </script>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "script" został dodany atrybut "nonce" wraz z wartością "46348910", ciągiem znaków, jaki został przypisany do przykładowego elementu "script", jest ciąg znaków "46348910", dlatego skrypt reprezentowany przez wspomniany element "script" został uaktywniony przez jeden z mechanizmów przeglądarki internetowej.

Atrybut Lokalny

src

Przeznaczenie atrybutu src

Atrybut src wykorzystany wraz z elementem script pozwala nam określić adres zasobu internetowego, który chcemy, aby był reprezentowany przez dany element script.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu src

URL

Należy podać niepusty ciąg znaków w formie adresu URL.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <p id="akapit-4">
      Domyślna treść elementu "p".
    </p>

    <script src="https://webkod.pl/files/html/skrypt-v4.js">
      //window.document.getElementById('akapit-4').innerHTML += '<b>Dodatkowa treść elementu "p".</b>';
    </script>

  </body>
</html>

Rezultat

Domyślna treść elementu "p".

Zasobem internetowym reprezentowanym przez przykładowy element "script" jest zasób internetowy "skrypt-v4.js" znajdujący się pod adresem "https://webkod.pl/files/html/skrypt-v4.js", ponieważ do wspomnianego elementu "script" został dodany atrybut "src" wraz z wartością "https://webkod.pl/files/html/skrypt-v4.js".

Atrybut Lokalny

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem script pozwala nam określić informację o typie MIME, jaki posiada zasób internetowy reprezentowany przez dany element script.

Jeżeli typ MIME określony przez nas za pomocą wartości danego atrybutu "type" nie będzie zgadzał się z typem MIME w rzeczywistości posiadanym przez zasób internetowy reprezentowany przez dany element "script", wtedy docelowy zasób internetowy będzie traktowany przez przeglądarkę internetową jako zasób nieistniejący.

Wartość domyślna

text/javascript (gdy pominęliśmy atrybut)

BRAK (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu type

typ MIME

Należy podać ciąg znaków w formie typu MIME.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <p id="akapit-5">
      Domyślna treść elementu "p".
    </p>

    <script src="https://webkod.pl/files/html/skrypt-v5.js" type="text/javascript">
      //window.document.getElementById('akapit-5').innerHTML += '<b>Dodatkowa treść elementu "p".</b>';
    </script>

  </body>
</html>

Rezultat

Domyślna treść elementu "p".

Ponieważ do przykładowego elementu "script" został dodany atrybut "type" wraz z wartością "text/javascript", przykładowy element "script" reprezentujący zasób internetowy "skrypt-v5.js" zawiera dodatkową informację dla przeglądarki internetowej o tym, że typem MIME, jaki posiada zasób internetowy "skrypt-v5.js", jest typ wskazujący na plik typu JS.