Учебники

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

Январь 22, 2019

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

  • Скрипт в разделе <head> … </ head>.

  • Скрипт в разделе <body> … </ body>.

  • Скрипт в разделах <body> … </ body> и <head> … </ head>.

  • Сценарий во внешнем файле, а затем включить в раздел <head> … </ head>.

Скрипт в разделе <head> … </ head>.

Скрипт в разделе <body> … </ body>.

Скрипт в разделах <body> … </ body> и <head> … </ head>.

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

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

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

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

Live Demo

<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. Посмотрите на следующий код.

Live Demo 

<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> следующим образом:

Live Demo 

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

42
Share: