Правильное место для вставки кода JavaScript зависит от конкретных требований вашего проекта. Вот несколько распространенных методов с примерами кода:
- Встроенный: вы можете вставить JavaScript непосредственно в HTML-файл с помощью тега
. Этот метод подходит для небольших фрагментов кода.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
// Inline JavaScript code
console.log('Inline JavaScript');
</script>
</body>
</html>
- Внешний файл: для более крупных блоков кода JavaScript или если вы хотите повторно использовать код на нескольких страницах, вы можете создать внешний файл JavaScript с расширением
.jsи связать его со своим HTML-файлом, используя тег.
index.html:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<script src="script.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
script.js:
// External JavaScript code
console.log('External JavaScript');
- Обработчик событий: вы можете прикрепить код JavaScript для реагирования на определенные события, например нажатие кнопок или отправку формы.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
// Event handler JavaScript code
console.log('Button clicked');
}
</script>
</body>
</html>
- Асинхронная загрузка. Чтобы повысить производительность загрузки страницы, вы можете загружать файлы JavaScript асинхронно, используя атрибут
asyncв теге. Это позволяет продолжать рендеринг HTML во время загрузки файла JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<script src="script.js" async></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
- Отложить загрузку. Подобно асинхронной загрузке, вы можете использовать атрибут
deferв теге, чтобы отложить выполнение JavaScript до тех пор, пока HTML не будет проанализирован.. Это может повысить производительность и обеспечить выполнение кода JavaScript в том порядке, в котором он отображается в HTML.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>