Где писать JavaScript и как подключить его в HTML. Блог 4.

Существует несколько методов вставки JavaScript в HTML. И прежде чем углубится в изучение JavaScript, необходимо понять где именно писать JavaScript код чтобы он выполнялся браузером. В HTML JavaScript встраивается с помощью открывающегося и закрывающегося тега <script>. Между ними пишется код на JavaScript.

 

<script>
...
</script>

Этот тег можно прописать либо в тегах <head> либо в <body>. Например, возьмем файл index.html и разместим JavaScript в теге <head> и теге <body>. Между тегами <script> пропишем команду alert, которая выводит сообщения.

 

<!DOCTYPE html>
<html lang="ru">
  <head>
     <title>Тег SCRIPT</title>
     <meta charset="utf-8">
     <script>
         alert( 'Hello World!' );
     </script>
   </head>
   <body>
     <script>
         alert( 'Привет, Мир!' );
     </script>
   </body>
</html>

Если откроем этот файл в браузере, то сначала увидим сообщение «Hello world«, которое прописано в теге <head>. Следующее сообщение будет «Привет мир«, прописанное в теге <body>.

В более ранних версиях HTML в теге <script> необходимо было еще прописывать атрибут type=»javascript». Это нужно было для того чтобы браузер понял что это JavaScript, а не какой то другой скриптовый язык. Но в HTML5 этот атрибут не обязателен, сейчас JavaScript признан скриптовым языком по умолчанию.

Подключение JavaScript файла в HTML.

Код JavaScript может хранится в отдельном файле с расширением .js. При написании кода в таком файле, тег <script> в этом файле прописывать ненужно, сразу пишется чистый код JavaScript. Для примера создадим файл script.js в той же директории, что и наш index.html из предыдущего примера. И в нем пропишем alert с сообщением «Привет мир! Это JavaScript!«.

Примечание: чтобы создать файлы с расширением .html, .js или .css, можно создать файл в редакторе Notepade++ и при сохранении выбрать нужный тип файла.

 


Теперь файл script.js нужно подключить в index.html. Это можно сделать с помощью тега <script> в тегах <head> или <body>. Чтобы указать путь к файлу с JavaScript  кодом необходимо у тега <script> прописать атрибут src.

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

Т.к. файл  script.js находится в одной директории с файлом index.html, то в src прописано просто название файла «script.js«. Но если файл с JavaScript находится в другой директории, это нужно указать. Например, в директории с index.html есть папка javascript и файл script.js в ней находится.

В этом случае прописываем в src весь относительный путь от файла index.html к script.js.

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

 

После подключения script.js в index.html, этот файл будет выглядеть так:

 

<!DOCTYPE html>
<html lang="ru">
   <head>
      <title>Тег SCRIPT</title>
      <meta charset="utf-8">
      <script src="script.js"></script>
      <script>
         alert( 'Hello World!' );
      </script>
   </head>
   <body>
      <script>
         alert( 'Привет, Мир!' );
      </script>
   </body>
</html>

 

Если запустить index.html в браузере, то сначала появится сообщение «Привет мир! Это JavaScript!«, затем «Hello world» и последнее «Привет мир«.


Считается, что скрипты лучше подключать в теге <body>. Причем в самом конце, перед тем как этот тег закроется, перед </body>. Это нужно что бы ускорить отображение страницы. Браузеры интерпретируют HTML сверху вниз, поэтому HTML разметка загрузится первой. И только в конце тега <body>, где будет подключен JavaScript, браузер сначала его загрузит, а потом отобразит. В это время другие элементы на странице будут уже отображены и пользователь сможет просматривать информацию.
Писать JavaScript в отдельном файле удобно, если скрипт будет использован на нескольких HTML страницах. Файл будет подключатся на нужные страницы, иначе на них пришлось бы копировать один и тот же код. Ну и конечно же использование отдельных файлов для JavaScript помогает делать код более структурированным и не захламлять HTML код.
Если страница загрузилась, а JavaScript не работает, то посмотреть какие ошибки произошли можно в инструментах разработчика браузера. Более подробно как ими пользоваться описано тут.

Добавить комментарий