Первый опыт работы с JavaScript

Автор: |
Нет комментариев

Создание первого приложения на JavaScript — это захватывающий момент для каждого начинающего разработчика. Мы пройдем через процесс запуска простого скрипта через консоль браузера и создадим первую программу «Hello, World!» для всех распространенных браузеров. Важно отметить, что отличия между браузерами практически отсутствуют, поскольку JavaScript является стандартным языком для веб-разработки, поддерживаемым всеми современными браузерами.

Запуск простого скрипта через консоль браузера

Консоль браузера — это удобный инструмент для выполнения JavaScript-кода без необходимости создавать отдельный файл. Чтобы запустить простой скрипт, выполните следующие шаги:

  1. Откройте консоль браузера. В большинстве браузеров это можно сделать, нажав сочетание клавиш F12 или Ctrl + Shift + J (в macOS: Cmd + Opt + J).
  2. Введите JavaScript-код. Введите следующий код в консоль и нажмите Enter:

console.log(‘Привет, Мир!’);                  

  • Результат. После ввода кода вы увидите сообщение Привет, Мир! в консоли. Таким образом, вы выполнили свою первую команду на JavaScript!

Первая программа «Hello, World!»

Теперь перейдем к созданию первой полноценной программы, которая выводит сообщение «Привет, Мир!» на веб-странице. Мы сделаем это для всех распространенных браузеров: Google Chrome, Mozilla Firefox, Microsoft Edge и Safari.

Шаг 1: Создайте HTML-файл  

Создайте новый файл с именем index.html и вставьте туда следующий код:

   <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя первая программа на JavaScript</title>
</head>
<body>
    <h1>Привет, Мир!</h1>
    <script>
        // Здесь будет ваш JavaScript-код
    </script>  
</body>
</html>

Шаг 2: Добавьте JavaScript-код

Внутри тега <script> добавьте следующий код:

document.addEventListener('DOMContentLoaded', function() {
    var message = 'Привет, Мир!';
    var element = document.createElement('p');
    element.textContent = message;
    document.body.appendChild(element);
});

Подробное объяснение кода

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

document.addEventListener(‘DOMContentLoaded’, function() { … });

document: Это объект, представляющий документ HTML-страницы. Он используется для взаимодействия с содержимым веб-страницы.

addEventListener(‘DOMContentLoaded’, function() {…}); Эта команда привязывает функцию-обработчик к событию DOMContentLoaded, которое срабатывает, когда вся страница полностью загружена и готова к использованию. В данном случае функция-обработчик добавляет элемент на страницу после полной загрузки.

var message = ‘Привет, Мир!’;
var message: Объявляется переменная message, которая хранит строку «Привет, Мир!».

‘Привет, Мир!’: Это строка, которую мы хотим вывести на странице.

var element = document.createElement(‘p’);
element: Объявляется переменная element, которая создается как элемент HTML с помощью метода createElement(‘p’). В данном случае создается параграф (<p>).

element.textContent = message;
textContent: Устанавливается текстовое содержимое созданного элемента element равным строке «Привет, Мир!».

document.body.appendChild(element);
appendChild: Метод appendChild добавляет созданный элемент element в тело документа (элемент body), делая его видимым на странице.

Что делают эти элементы:

document Представляет текущий HTML-документ и служит для доступа к его содержимому.

addEventListener Привязывает функцию-обработчик к событию DOMContentLoaded, чтобы дождаться полной загрузки страницы перед добавлением нового контента.

message Содержит текст, который будет добавлен на страницу.

element Является элементом HTML, в который добавляется текст message.

textContent Определяет текстовое содержимое элемента element.

appendChild: Добавляет элемент element на страницу, помещая его в тело документа (body).

Этот фрагмент кода демонстрирует базовые операции с HTML-документом и JavaScript, позволяющие динамически добавлять контент на веб-страницу после её полной загрузки..

Шаг 3: Сохраните и откройте файл

Сохраните файл index.html и откройте его в любом браузере. Вы должны увидеть сообщение «Привет, Мир!» на странице.

Поздравляем! Вы создали свое первое веб-приложение на JavaScript. Теперь вы готовы двигаться дальше и изучать более сложные аспекты веб-разработки.

Создаём приложение, выводящее надпись «Привет Мир!» несколько иначе

Давайте углубимся в процесс создания простого приложения для браузера, которое будет выводить надпись «Привет Мир!», используя два популярных браузера: Google Chrome и Mozilla Firefox. Процесс создания приложения одинаковый для обоих браузеров, поэтому мы предоставим общий алгоритм действий.

Шаг 1: Подготовьте рабочую среду

Прежде всего, убедитесь, что у вас установлены последние версии браузеров Google Chrome и Mozilla Firefox. Также вам потребуется текстовый редактор для создания файлов HTML и JavaScript. Рекомендуемые редакторы: Visual Studio Code, Sublime Text или Notepad++.

Шаг 2: Создайте HTML-файл             

Создайте новый файл с именем hello-world.html, откройте его в NotePad++ или любой другой подобной программе и вставьте туда следующий код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Привет, Мир!</title>
</head>
<body>
    <div id="message"></div>
    <script src="hello-world.js"></script>
</body>
</html>

Во владке «Кодировки» выберите и нажмите «Преобразовать в UTF-8 без BOM. Если этого не сделать, вместо фразы «Привет Мир», после исполнения программы у вас появятся ромбики с вопросами внутри.

Обратите внимание, что мы добавили пустой элемент <div> с идентификатором message, куда позже будем добавлять наше приветственное сообщение. Также мы подключаем внешний JavaScript-файл hello-world.js, который создадим на следующем шаге.

Шаг 3: Создайте JavaScript-файл

Создайте новый файл с именем hello-world.js и вставьте туда следующий код:

 

window.onload = function() {
    var messageElement = document.getElementById('message');
    messageElement.innerHTML = 'Привет, Мир!';
};

Этот код выполняется после полной загрузки страницы и добавляет текст «Привет, Мир!» внутрь элемента <div> с идентификатором message.

Подробное объяснение кода 

window.onload = function() { … };

window.onload: Присваивает функцию-обработчик событию onload, которое происходит, когда окно браузера завершает загрузку страницы. Это событие вызывается после завершения загрузки всех ресурсов на странице.

function() { … }: Функция-обработчик, который выполняется при наступлении события onload. Внутри этого блока содержится логика для добавления текста на страницу.

var messageElement = document.getElementById(‘message’);

var messageElement: Объявляется переменная messageElement, которая получает элемент с ID message из HTML-документа

.
getElementById(‘message’): Метод getElementById находит элемент с указанным ID (‘message’) в документе.

messageElement.innerHTML = ‘Привет, Мир!’;

innerHTML: Изменяется внутреннее HTML-содержимое элемента messageElement, заменяя его на строку «Привет, Мир!».

Что делают эти элементы:

window.onload Привязывает функцию-обработчик к событию onload, которое происходит, когда страница полностью загружена.

messageElement Указатель на элемент с ID message, который уже присутствует в HTML-документе.

innerHTML Заменяет текущее содержимое элемента messageElement на строку "Привет, Мир!".

Этот код обеспечивает динамическое обновление содержимого страницы после её полной загрузки, добавляя текст «Привет, Мир!» в существующий элемент с ID message.

Шаг 4: Сохраните и откройте файлы

Сохраните оба файла (hello-world.html и hello-world.js) в одной папке. Затем откройте файл hello-world.html в браузере Google Chrome или Mozilla Firefox. Вы должны увидеть на странице надпись «Привет, Мир!».

Отличия выполнения программы между браузерами

В данном примере их нет. Процесс создания приложения для вывода надписи «Привет Мир!» абсолютно одинаков для Google Chrome и Mozilla Firefox. Оба браузера поддерживают стандартные веб-технологии, такие как HTML, CSS и JavaScript, и не требуют дополнительных настроек или изменений кода для разных платформ.

Заключение

Мы рассмотрели, как создать простое веб-приложение, которое выводит приветственную надпись «Привет Мир!» в браузерах Google Chrome и Mozilla Firefox. Этот базовый пример поможет вам начать освоение веб-разработки и даст понимание основ работы с HTML и JavaScript. Продолжайте учиться и экспериментировать, и вскоре вы сможете создавать более сложные и интересные веб-приложения!

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *