Ostatnio edytowany:

script

Autor: Virtual Patriot

Przeznaczenie elementu script

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

Dodatkowe techniczne informacje 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>
        <title>Darmowy Kurs HTML</title>
        <script src="skrypt-01.js"></script>
      </head>
    
      <body>
        <!-- miejsce na pozostały kod części BODY -->
      </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
  • jeżeli dany element script nie posiada atrybutu src kontekstem wewnętrznym może być zawartość tekstowa reprezentująca skrypt utworzony w języku, który został określony za pomocą wartości atrybutu type wspomnianego elementu script

    Przykładowy Kod HTML

    <article>
      <script>alert('Witaj w serwisie!');</script>
    
      <h1>Mój ulubiony owoc</h1>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

    Kontekstem wewnętrznym przykładowego elementu "script" jest wyłącznie zawartość tekstowa. Ponadto wspomniany element "script" nie posiada atrybutu "src", 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".

  • jeżeli dany element script posiada atrybut src oznacza to brak kontekstu wewnętrznego (jego kontekstem wewnętrznym może być wyłącznie zawartość tekstowa reprezentująca dokumentację danego skryptu, napisaną w formie komentarza danego języka skryptu, typ danego języka skryptu ewentualnie może zostać określony za pomocą wartości atrybutu type wspomnianego elementu script)

    Przykładowy Kod HTML

    <article>
      <script src="skrypt-01.js"></script>
    
      <h1>Mój ulubiony owoc</h1>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </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>
      <script src="skrypt-01.js">
        //ten skrypt JavaScript pełni rolę powitania użytkownika
      </script>
    
      <h1>Mój ulubiony owoc</h1>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

    Kontekstem wewnętrznym przykładowego elementu "script" jest wyłącznie zawartość tekstowa w formie komentarza języka 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

składnia HTML

<script> ... </script>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

none

Dodatkowe 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".

Edge

tak

Opis atrybutów elementu script

async

Przeznaczenie atrybutu async

Atrybut async wykorzystany wraz z elementem script określa czy w momencie pobierania przez przeglądarkę internetową do swojej pamięci podręcznej skryptu reprezentowanego przez dany element script jeden z mechanizmów wspomnianej przeglądarki internetowej ma kontynuować przetwarzanie kodu znajdującego się po wspomnianym elemencie script, a następnie gdy wspomniany proces pobierania skryptu zakończy się, skrypt ten ma 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="http://webkod.pl/files/html/script-01.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 czasie pobierania do pamięci podręcznej przeglądarki internetowej skryptu języka JavaScript reprezentowanego przez przykładowy element "script" przetwarzanie kodu znajdującego się po wspomnianym elemencie "script" nie zostało wstrzymane przez jeden z mechanizmów wspomnianej przeglądarki internetowej, ponieważ do wspomnianego elementu "script" został dodany atrybut "async".

charset

Przeznaczenie atrybutu charset

Atrybut charset wykorzystany wraz z elementem script określa 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="p-2">
      Domyślna treść elementu "p".
    </p>

    <script src="http://webkod.pl/files/html/script-02.js" charset="utf-8">
      //window.document.getElementById('p-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 zasobu internetowego reprezentowanego przez przykładowy element "script" jest system "utf-8", ponieważ do wspomnianego elementu "script" został dodany atrybut "charset" wraz z wartością "utf-8".

crossorigin

Przeznaczenie atrybutu crossorigin

Atrybut crossorigin wykorzystany wraz z elementem script określa, 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.

defer

Przeznaczenie atrybutu defer

Atrybut defer wykorzystany wraz z elementem script określa czy skrypt reprezentowany przez dany element script ma 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="http://webkod.pl/files/html/script-03.js" defer>
      //window.document.getElementById('p-3').innerHTML += '<b> Dodatkowa treść elementu "p". </b>';
    </script>

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

  </body>
</html>

Rezultat

Domyślna treść elementu "p".

Skrypt języka JavaScript 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 całego kodu danego dokumentu HTML, ponieważ do wspomnianego elementu "script" został dodany atrybut "defer".

src

Przeznaczenie atrybutu src

Atrybut src wykorzystany wraz z elementem script określa adres zasobu internetowego, który powinien 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="p-4">
      Domyślna treść elementu "p".
    </p>

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

  </body>
</html>

Rezultat

Domyślna treść elementu "p".

Zasobem internetowym, który powinien być reprezentowany przez przykładowy element "script" jest zasób internetowy "script-04.js" znajdujący się pod adresem "http://webkod.pl/files/html/script-04.js", dlatego do wspomnianego elementu "script" został dodany atrybut "src" wraz z wartością "http://webkod.pl/files/html/script-04.js".

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem script określa 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 posiadanym przez zasób internetowy reprezentowany przez dany element "script", wtedy wspomniany 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="p-5">
      Domyślna treść elementu "p".
    </p>

    <script src="http://webkod.pl/files/html/script-05.js" type="text/javascript">
      //window.document.getElementById('p-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" wspomniany element "script" reprezentujący zasób internetowy znajdujący się pod adresem "http://webkod.pl/files/html/script-05.js" zawiera dodatkową informację dla przeglądarki internetowej o tym, że typem MIME, jaki posiada wspomniany zasób internetowy jest typ wskazujący na plik typu JS.