Выполнение кода javascript в html

JavaScript

Для того чтобы выполнить JavaScript-код внутри HTML-документа, необходимо разместить этот код либо непосредственно в HTML-файле между тегами <script></script>, либо подключить внешний файл с JavaScript-кодом. Рассмотрим оба варианта.

Вариант 1: Внутренний JavaScript-код

В этом случае весь необходимый JavaScript-код размещается непосредственно в HTML-документе.

Пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Пример с внутренним JavaScript</title>
</head>
<body>

<h1>Привет!</h1>
<p id="output"></p>

<script>
    document.getElementById('output').innerText = "Это текст, добавленный с помощью JavaScript.";
</script>

</body>
</html>

Здесь:

  • Код JavaScript находится внутри тега <script>, расположенного перед закрывающим тегом </body>.
  • Функция document.getElementById('output') находит элемент с идентификатором output (в данном случае это параграф <p>) и добавляет ему текст с помощью свойства innerText.

Вариант 2: Внешний JavaScript-файл

В этом варианте JavaScript-код хранится во внешнем файле, который подключается к HTML-документу.

Шаг 1: Создайте файл script.js со следующим содержимым:

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('output').innerText = "Это текст, добавленный с помощью внешнего JavaScript.";
});

Шаг 2: Подключите этот файл к вашему HTML-документу:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Пример с внешним JavaScript</title>
</head>
<body>

<h1>Привет!</h1>
<p id="output"></p>

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

</body>
</html>

Здесь:

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

Итог

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

Обновлено: 18.01.2025 в 20:21 | Просмотров: 6
Загрузка...
Похожие статьи
Использование JavaScript с HTML
Использование JavaScript с HTML позволяет создавать более интерактивные и динамичные веб-страницы. Вот несколько примеров того, что можно сделать с помощью JavaScript в контексте HTML: 1. Обработка событий JavaScript может реагировать на различные события, такие как нажатие кнопки, ввод текста в поле формы, перемещение мыши и многое другое. Например, можно добавить обработчик события к кнопке: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

Форма ввода JavaScript
Создание формы ввода в JavaScript включает в себя написание HTML-кода для отображения самой формы и использование JavaScript для взаимодействия с элементами формы и обработки введённых данных. Вот пример простой формы регистрации с валидацией полей: HTML-код формы Создайте файл index.html с следующим содержанием: <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

Функция requestAnimationFrame JavaScript
requestAnimationFrame — это метод, позволяющий планировать выполнение функции непосредственно перед тем, как браузер произведёт перерисовку экрана. Он оптимизирован для работы с анимацией и визуализацией, так как синхронизируется с частотой обновления монитора (обычно 60 кадров в секунду), обеспечивая максимально плавное отображение изменений. Как работает requestAnimationFrame? Когда вы вызываете requestAnimationFrame(callback), браузер добавляет вашу функцию callback в очередь вызовов,...

Подключение внешнего файла JavaScript
Для подключения внешнего файла JavaScript к HTML-документу используется тег <script>. Пример: <!DOCTYPE html> <html lang="ru"> <head>    <meta charset="UTF-8">    <title>Пример подключения JavaScript</title>    <!-- Подключаем внешний файл JavaScript -->    <script src="path/to/your/script.js"></script> </head> <body>    <h1>Привет, мир!</h1>        <!-- Пример использования функции из...

Первая программа на JavaScript
Вот пример простой программы на JavaScript, которая выводит приветствие в консоль браузера: <!DOCTYPE html> <html lang="ru"> <head>    <meta charset="UTF-8">    <title>Моя первая программа</title> </head> <body> <script>    console.log("Привет, мир!"); </script> </body> </html> Как работает эта программа? HTML-документ: Мы создаем простую HTML-страницу с заголовком <title> и...

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

Войти с помощью: