JavaScript - размещение в HTML-файле

Предоставляется гибкость для включения кода JavaScript в любом месте документа HTML. Однако наиболее предпочтительные способы включения JavaScript в файл HTML следующие:

Скрипт в разделе <head> ... </head>.
Скрипт в разделе <body> ... </body>.
Скрипт в разделах <body> ... </body> и <head> ... </head>.
Скрипт во внешнем файле, а затем включение в раздел <head> ... </head>.

В следующем разделе мы увидим, как можно по-разному разместить JavaScript в файле HTML.

JavaScript в разделе <head> ... </head>

Если вы хотите, чтобы сценарий запускался при каком-то событии, например, когда пользователь где-то щелкает, вы поместите этот сценарий в голову следующим образом:

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>     
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>  
</html>

Этот код даст следующие результаты -

JavaScript в разделе <body> ... </body>

Если вам нужен скрипт для запуска при загрузке страницы, чтобы скрипт генерировал контент на странице, тогда скрипт входит в часть документа <body>. В этом случае у вас не будет никакой функции, определенной с помощью JavaScript. Взгляните на следующий код.

<html>
   <head>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <p>This is web page body </p>
   </body>
</html>

Этот код даст следующие результаты -

JavaScript в разделах <body> и <head>

Вы можете поместить свой код JavaScript в раздел <head> и <body> следующим образом:

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>
</html>

Этот код даст следующий результат -

JavaScript во внешнем файле

Когда вы начнете более активно работать с JavaScript, вы, вероятно, обнаружите, что есть случаи, когда вы повторно используете идентичный код JavaScript на нескольких страницах сайта.

Вы не ограничены сохранением идентичного кода в нескольких файлах HTML. Вscript Тег предоставляет механизм, позволяющий хранить JavaScript во внешнем файле, а затем включать его в ваши HTML-файлы.

Вот пример, показывающий, как вы можете включить внешний файл JavaScript в свой HTML-код, используя script тег и его src атрибут.

<html>
   <head>
      <script type = "text/javascript" src = "filename.js" ></script>
   </head>
   
   <body>
      .......
   </body>
</html>

Чтобы использовать JavaScript из внешнего источника файла, вам необходимо записать весь исходный код JavaScript в простой текстовый файл с расширением «.js», а затем включить этот файл, как показано выше.

Например, вы можете сохранить следующий контент в filename.js файл, а затем вы можете использовать sayHello в вашем HTML-файле после включения файла filename.js.

function sayHello() {
   alert("Hello World")
}