English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной учебник JavaScript

Объекты JavaScript

Функции JavaScript

JS HTML DOM

JS Браузер BOM

Базовый учебник AJAX

JavaScript Референс Манифест

Использование JavaScript

Использование JavaScript в HTML

В этой главе вы узнаете, как интегрировать JavaScript в ваш веб-сайт.

Обычно, есть три способа добавить JavaScript на веб-страницу:

  • можно<script>и</script>вставить JavaScript-код между тегами

  • используясвойства событий (например, onclick, onkeypress и т.д.), чтобы вставить JavaScript-код direkt в HTML-теги

  • Создайте внешнюю JavaScript-файл, затем загрузите его через<script>атрибут src тега для загрузки его на страницу

тег <script>

В HTML, необходимо использовать<script>и</script>вставить JavaScript-код между тегами.

<script>
document.write("Hello World");
</script>
тестировать看看‹/›

Примечание:Старые примеры JavaScript могли использовать атрибут type: <script type="text/javascript">. С момента introduction HTML5, атрибут type больше не нужен. JavaScript является-default языком скрипта в HTML5.

JavaScript в <head> или <body>

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

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

JavaScript в <head>

В этом примере JavaScript-функция находится в HTML-странице<head>части.

Эта функция будет вызываться при нажатии на кнопку:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunc() {
　　document.getElementById("output").innerHTML = "Hello World";
}
</script>
</head>
<h2>JavaScript in Head</h2>
<button type="button" onclick="myFunc()">Нажмите</button>
<p id="output">This is a Paragraph</p>
</html>
тестировать看看‹/›

каждый<script>Теги могут阻止 процесс отображения страницы, до тех пор, пока они не будут полностью загружены и выполнены JavaScript-код, поэтому их placement в начале документа может значительно снизить производительность вашего веб-сайта без正当 причин.

JavaScript в <body>.

В этом примере JavaScript-функция находится в HTML-страницечасти.

Эта функция будет вызываться при нажатии на кнопку:

<!DOCTYPE html>
<html>
<h2>JavaScript в теле</h2>
<button type="button" onclick="myFunc()">Нажмите</button>
<p id="output">Это абзац</p>
<script>
function myFunc() {
　　document.getElementById("output").innerHTML = "Hello World";
}
</script>
</html>
тестировать看看‹/›

Скрипты должны быть размещены в конце的主要内容, сразу после</body>до тега, что сделает загрузку вашей веб-страницы быстрее, так как это предотвратит задержку начального отображения страницы.

внутреннее placement JavaScript-кода

Вы также можете использоватьсвойства событий (Например, onclick, onkeypress и т.д.) поместите JavaScript-код direkt в HTML-теги.

<p onclick="this.innerHTML='Hello World';">This is First Paragraph (Click me)</p>
тестировать看看‹/›

Но следует избегать вlining большого объема JavaScript-кода, так как это может сделать HTML беспорядочным и затруднить поддержку JavaScript-кода.

вызов внешнего JavaScript-файла

Вы также можете поместить JavaScript-код в отдельный файл с расширением .js и затем загрузить его через<script>меткиsrcсвойства для загрузки его на страницу.

Ниже приведен пример, указывающий на внешнюю JavaScript-файл:

<script src="myscript.js"></script>
тестировать看看‹/›

Чтобы добавить несколько скриптовых файлов на одну страницу, используйте несколько тегов <script>:

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

Вы можете добавить необходимые<head>или<body>разместить ссылку на внешнюю скрипт.

поведение этого скрипта как будто он находится<script>на том же месте, что и метка.

Примечание:Внешние файлы скриптов не могут содержать<script>метка.

Преимущества внешних скриптов JavaScript

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

  • Это отделяет JavaScript от HTML

  • Это делает HTML и JavaScript более читаемыми и удобными для обслуживания

  • Кэшированные файлы JavaScript могут ускорить загрузку страницы

  • Тот же скрипт может использоваться в нескольких документах

СоветОбычно, при первом загрузке внешнего файла JavaScript, он хранится в кеше браузера (как и изображения и таблицы стилей), поэтому не нужно многократно загружать этот файл с веб-сервера, создающего веб-страницу. Загрузка быстрее.

Референс внешних скриптов

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

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

<script src="https://ru.oldtoolbag.com/run/js/myscript.js"></script>
тестировать看看‹/›

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

<script src="/run/js/myscript.js"></script>
тестировать看看‹/›

Вы можете проверить в " Путь файла HTML В этой главе вы найдете больше информации о путях файлов.

Вывод JavaScriptОбычные примеры JavaScript