Существует гибкость, позволяющая включать код 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>
Если вы хотите, чтобы скрипт запускался на каком-то событии, например, когда пользователь щелкает где-то, вы поместите этот скрипт в заголовок следующим образом:
<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.