Существует гибкость, предоставляемая для включения кода 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. Сценарий тег обеспечивает механизм, позволяющий хранить 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")
}



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok