САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ

JavaScript Установка



JavaScript в теге <script>

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

Пример

<script>
document.getElementById("demo").innerHTML = "Мой Первый JavaScript";
</script>
Редактор кода »

В старых примерах JavaScript может использоваться атрибут type: <script type="text/javascript">.
Сейчас атрибут type не требуется: <script>.
JavaScript является языком сценариев по умолчанию в HTML.


Функция и событие JavaScript

JavaScript функция function - блок кода JavaScript, которая может быть выполнена, когда она "вызывается" .

Например, функцию можно вызвать, когда возникает событие, при нажатии пользователем кнопки.

Вы узнаете гораздо больше о функциях и событиях в последующих главах.


JavaScript в <head> или <body>

В документе HTML, можно поместить любое количество скриптов.

Скрипты можно поместить в <body>, или в <head> раздела страницы HTML, или в обоих.


JavaScript в <head>

В этом примере функция JavaScript помещается в <head> раздела страницы HTML.

Функция вызывает (событие) при нажатии кнопку:

Пример

<!DOCTYPE html>
<html>
<head>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "Параграф изменен.";
}
</script>

</head>
<body>

<h1>Веб страница</h1>
<p id="demo">Параграф</p>
<button type="button" onclick="myFunction()">Попробовать</button>

</body>
</html>
Редактор кода »

JavaScript в <body>

В этом примере функция JavaScript помещается в <body> раздела страницы HTML.

Функция вызывает (событие) при нажатии кнопку:

Пример

<!DOCTYPE html>
<html>
<body>

<h1>Веб страница</h1>
<p id="demo">Параграф</p>
<button type="button" onclick="myFunction()">Попробовать</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "Параграф изменен.";
}
</script>

</body>
</html>
Редактор кода »

Размещение скриптов в нижней части элемента <body> повышает скорость отображения, так как компиляция скриптов замедляет отображение.


Внешний JavaScript

Скрипты также могут быть помещены во внешние файлы: myScript.js

Пример

function myFunction() {
   document.getElementById("demo").innerHTML = "Параграф изменен.";
}

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

Файлы JavaScript имеют расширение .js.

Чтобы использовать внешний скрипт, вводим: myScript.js - имя файла скрипта, в файле src (источник), атрибут тега <script>:

Пример

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
Редактор кода »

Можно поместить ссылку на внешний скрипт в <head> или <body>, как вам нравится

Скрипт будет вести себя так же, если бы он находился именно там, где находится тег <script>

Внешние скрипты не могут содержать теги <script>.


Преимущества внешнего JavaScript

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

  • Он разделяет HTML и код
  • Упрощает чтение и обслуживание HTML и JavaScript
  • Кэшированные файлы JavaScript могут ускорить загрузку страниц

Добавить несколько файлов скриптов на одну страницу - использовать несколько тегов <script>

Пример

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

Внешняя ссылка JavaScript

Внешний скрипт может указать полный адрес или относительный путь к текущей веб странице.

В этом примере используется полный URL-адрес для ссылки на скрипт:

Пример

<script src="https://schoolsw3.com/js/myScript1.js"></script>
Редактор кода »

В этом примере используется скрипт, расположенный в указанной папке на текущем веб сайте:

Пример

<script src="/js/myScript1.js"></script>
Редактор кода »

В этом примере приводятся ссылки на скрипт, расположенный в той же папке, что и текущая страница:

Пример

<script src="myScript1.js"></script>
Редактор кода »

Дополнительные сведения о путях к файлам см. в главе Путь к файлу HTML.