Użycie JavaScript

<script> znaczniku

W HTML, kod JavaScript musi się znaleźć w <script> z </script> tagi.

Przykład

<script>
document.getElementById("demo").innerHTML = "Mój pierwszy dokument JavaScript";
</script>

Spróbuj sam

Komentarz:Stare przykłady JavaScript mogą używać type Atrybut: <script type="text/javascript">.

Komentarz:Atrybut type nie jest wymagany. JavaScript jest domyślnym językiem skryptowym w HTML.

Funkcje i wydarzenia JavaScript

JavaScript funkcjajest blokiem kodu JavaScript, który może być wykonywany w momencie jego wywołania.

Na przykład, gdywydarzeniewywołuje funkcję, na przykład, gdy użytkownik kliknie przycisk.

Uwaga:Więcej na temat funkcji i wydarzeń dowiesz się w kolejnych rozdziałach.

JavaScript w <head> lub <body>

Możesz umieścić dowolną liczbę skryptów w dokumencie HTML.

Skrypt można umieścić w <body> lub <head> Część w

JavaScript w

W tym przykładzie funkcja JavaScript jest umieszczona w <head> Część.

Ta funkcja zostanie wywołana, gdy naciśniesz przycisk:

Przykład

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Tekst akapitu został zmieniony.";
}
</script>
</head>
<body>
<h1>Strona internetowa</h1>
<p id="demo">Jeden akapit</p>
<button type="button" onclick="myFunction()">Spróbuj</button>
</body>
</html>

Spróbuj sam

JavaScript w <body> strony HTML

W tym przykładzie funkcja JavaScript jest umieszczona w <body> Część.

Ta funkcja zostanie wywołana, gdy naciśniesz przycisk:

Przykład

<!DOCTYPE html>
<html>
<body> 
<h1>Strona internetowa</h1>
<p id="demo">Jeden akapit</p>
<button type="button" onclick="myFunction()">Spróbuj</button>
<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "Tekst akapitu został zmieniony.";
}
</script>
</body>
</html>

Spróbuj sam

Uwaga:Umieść skrypt w <body> na dole elementu, co może poprawić szybkość wyświetlania, ponieważ kompilacja skryptu może opóźniać wyświetlanie.

Zewnętrzny skrypt

Skrypt można umieścić w pliku zewnętrznym:

Plik zewnętrzny: myScript.js

function myFunction() {
   document.getElementById("demo").innerHTML = "Tekst akapitu został zmieniony.";
}

Zewnętrzne skrypty są bardzo praktyczne, jeśli ten sam skrypt jest używany na wielu różnych stronach.

Rozszerzenie pliku JavaScript to .js.

Aby użyć zewnętrznego skryptu, proszę <script> etykiety src w atrybucie (source) określ nazwę skryptu:

Przykład

<script src="myScript.js"></script>

Spróbuj sam

Możesz umieścić skrypt w <head> lub <body> umieszczasz odwołania do zewnętrznych skryptów.

Wygląd skryptu zależy od tego, gdzie go umieszczysz <script> jest taki sam w etykiecie.

Komentarz:Zewnętrzne skrypty nie mogą zawierać <script> tagi.

Zalety zewnętrznego JavaScript

Placenie skryptów w plikach zewnętrznych ma następujące zalety:

  • Oddzielił HTML i kod
  • Ułatwia czytanie i utrzymanie HTML i JavaScript
  • Zapisane w pamięci pliki JavaScript mogą przyspieszyć ładowanie strony

Aby dodać kilka plików skryptów do jednej strony - użyj wielu tagów script:

Przykład

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

Odwołania zewnętrzne

Zewnętrzne skrypty można odwoływać się za pomocą pełnego URL lub ścieżki względnej w stosunku do bieżącej strony:

W tym przykładzie skrypt jest łączy się za pomocą pełnego URL do skryptu:

Przykład

<script src="https://www.codew3c.com/js/myScript1.js"></script>

Spróbuj sam

W tym przykładzie skrypt jest używany z folderu wskazanego na stronie:

Przykład

<script src="/js/myScript1.js"></script>

Spróbuj sam

W tym przykładzie skrypt jest połączony z tą stroną w tym samym folderze:

Przykład

<script src="myScript1.js"></script>

Spróbuj sam

Możesz Ścieżka do pliku HTMLDowiedz się więcej o ścieżkach do plików.