Главная страница » JavaScript » 1. Привет, Мир!

1. Привет, Мир!

JavaScript — это мощный язык программирования, который позволяет делать веб-страницы интерактивными. Он используется для добавления динамического контента, обработки событий, валидации форм, создания анимаций и многого другого. В этом уроке мы начнем с самого простого: выведем сообщение «Привет, Мир!» на веб-странице.

Подключение JavaScript к HTML

JavaScript можно добавлять к HTML-документу несколькими способами:

Внутренний скрипт — код JavaScript внутри тега <script> в HTML-документе.
Внешний скрипт — код JavaScript в отдельном файле с расширением .js, который подключается к HTML-документу.
Инлайн-скрипт — код JavaScript, встроенный непосредственно в HTML-элементы с помощью атрибутов, таких как onclick.

Внутренний скрипт

HTML:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Привет, Мир!</title>
</head>
<body>
    <h1>Привет, Мир!</h1>
    <script>
        alert("Привет, Мир!");
    </script>
</body>
</html>

Внешний скрипт

Создайте файл script.js:

script.js:

				
					alert("Привет, Мир!");

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

HTML:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Привет, Мир!</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Привет, Мир!</h1>
</body>
</html>

Инлайн-скрипт

HTML:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Привет, Мир!</title>
</head>
<body>
    <h1 onclick="alert('Привет, Мир!')">Привет, Мир!</h1>
</body>
</html>

Распространённые ошибки

Пропущенные теги <script>: Убедитесь, что код JavaScript обернут в теги <script> и помещен в правильном месте HTML-документа.
Неправильный путь к внешнему файлу: При использовании внешнего скрипта убедитесь, что путь к файлу указан правильно.
Опечатки в коде: Даже небольшая опечатка в коде JavaScript может привести к его неработоспособности.

Заключение

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

Тестовое задание

Создайте HTML-документ с внутренним скриптом, который выводит сообщение «Привет, Мир!» при загрузке страницы.
Создайте HTML-документ с внешним скриптом, который выводит сообщение «Привет, Мир!» при загрузке страницы.
Создайте HTML-документ с инлайн-скриптом, который выводит сообщение «Привет, Мир!» при нажатии на заголовок.

HTML с внутренним скриптом:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Привет, Мир!</title>
    <script>
        alert("Привет, Мир!");
    </script>
</head>
<body>
    <h1>Привет, Мир!</h1>
</body>
</html>

HTML с внешним скриптом:

Создайте файл script.js:

				
					alert("Привет, Мир!");

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

				
					<!DOCTYPE html>
<html>
<head>
    <title>Привет, Мир!</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Привет, Мир!</h1>
</body>
</html>

HTML с инлайн-скриптом:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Привет, Мир!</title>
</head>
<body>
    <h1 onclick="alert('Привет, Мир!')">Привет, Мир!</h1>
</body>
</html>

Этот урок поможет вам освоить основы JavaScript и начать использовать его для создания интерактивных