Добавление JavaScript в HTML

Добавление JavaScript в HTML

Добавление JavaScript в HTMLJavaScript можно добавить практически в любое место HTML документа. Но существуют следующие наиболее предпочтительные способы, которые используются чаще всего:

  • в средине тега <head>;
  • в средине тега <body>;
  • в тегах <head> и <body>;
  • внешний JavaScript файл с ссылкой на него в средине тега <head>.

1. Тег <script>

В HTML код JavaScript должен быть вставлен в средину тега <script>. Например:

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

2. JavaScript в теге <head>

Если вы хотите, чтобы сценарий запустился после какого-то события, например, когда пользователь щелкнет на кнопку, JS нужно размещать в теге <head>. Например:

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

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


3. JavaScript в теге <body>

Если вам нужен сценарий, который должен запускаться при загрузке страницы, то JS следует размещать в теге <body>. Например:

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--document.write("Hello World")//-->
</script>
<p>Результат JS на следующей строчке</p>
</body>
</html>

4. JavaScript в тегах <head> и <body>

Вы можете разместить код 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=&quot;Say Hello" />
</body>
</html>

Результат будет таким:

 


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

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

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

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

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

Или еще вариант:

<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

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


Внешний JavaScript Преимущества

Размещение JavaScript во внешних файлах имеет ряд преимуществ:

  • это отделяет HTML и JS код;
  • HTML код выглядит намного чище;
  • кэширование файлов JavaScript может ускорить загрузку страниц.
Ставив лайк Вы помогаете сайту :)

Статьи по теме:
Рейтинг:
3.5/5 из 2
Категория: Учебник JavaScript | Добавил: zaharchuk (20.02.2015)
Просмотров: 1550
Комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]