document.getElementById()

Предназначение JavaScript

Основная задача JavaScript — "обслуживать" HTML, то есть взаимодействовать с элементами на веб-странице и манипулировать ими.

Для манипуляций мы используем переменные.

Как мы узнали на прошлом уроке, переменная — это как "ручка", которой мы "хватаемся" за какие-то данные (например, за строку) с помощью оператора присваивания] (=), чтобы потом производить с этими ручками какие-то манипуляции. Конечная цель этих манипуляций — взаимодействие с элементами HTML.

Два мира: HTML и JavaScript

Мир HTML: "Физическое тело"

Мир HTML — это то, что мы пишем в разметке: теги body, input, hr и т.д. Это статичная структура, которая описывает, что должно быть на странице.

Мир JavaScript: "Душа"

Мир JavaScript можно разделить на 2 части:

• Пользовательский JS (User JS) - это тот JavaScript-код, который мы пишем. Он находится в файле .js или внутри тегов script. Наш "пользовательский" код дает команды. Он не создает элементы из воздуха, а взаимодействует со средой, которую уже подготовил браузер.

• Браузерный JS (Browser JS) - это "промежуточная зона" между HTML-разметкой и нашим кодом. Когда браузер загружает и анализирует (парсит) HTML-страницу, он для каждого HTML-тега создает в памяти специальный JavaScript-объект. Этот объект является "зеркальным отражением" или "душой" HTML-элемента.

Эта коллекция объектов, созданная браузером, называется DOM (Document Object Model).

Взаимодействие JavaScript и HTML основано на манипуляции объектом DOM, где JavaScript изменяет структуру и содержимое HTML-страницы для добавления интерактивности и динамичности.

Поиск Элементов в HTML-документе

Первая и важнейшая операция, которую выполняет JavaScript для взаимодействия с HTML — это поиск нужного элемента.

Чтобы JS мог однозначно найти конкретный элемент среди множества других, этому элементу необходим уникальный идентификатор.

Атрибут ID

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

<input id="hello-message" />

Основные правила именования id:

• Каждое значение ID должно быть уникальным в пределах всей HTML-страницы

• Имя должно начинаться с латинской буквы (A-Z или a-z), знака подчеркивания (_) или знака доллара ($)

• Далее в имени могут следовать буквы, цифры (0-9), знаки подчеркивания (_) или знак доллара ($)

• Идентификаторы не могут содержать пробелы, тире или другие специальные символы (кроме подчеркивания и доллара)

• Имена идентификаторов регистрозависимы (т.е. Name и name — разные идентификаторы) - Нельзя использовать ключевые и зарезервированные слова JavaScript, такие как var, function, if, while и др.

• Имя для id должно быть осмысленным и четко отражать назначение элемента (например, mainContent для основного содержимого страницы или productPrice для цены товара)

• Используйте нижний регистр для первых слов и верхний регистр для начала каждого последующего слова (Camel case) (например, getUserData, calculateSum)

• Имя должно быть легко понятно другим разработчикам, работающим с вашим кодом

Глобальные объекты window и document

Для доступа к элементам страницы существует четкая иерархия объектов, которая начинается с глобального объекта window.

window — это глобальный объект, который создает сам браузер. Он предоставляет доступ к глобальной области видимости и функциям, таким как alert() или console. Все глобальные переменные и функции, объявленные в JavaScript-коде браузера, автоматически становятся свойствами и методами объекта window, хотя обращаться к ним можно без явного указания window.

//обращаемся к глобальному объекту window:
window.alert("Hello")
// "Эй, окно браузера (window), выведи, пожалуйста, (alert) сообщение ('Hello')"

Внутри объекта window существует ключевое свойство document (доступное как window.document). document - это точка входа в DOM. Поскольку document используется постоянно, обращение к нему почти всегда происходит напрямую, без префикса window.

let url = window.document.URL // или let url = document.URL

Метод getElementById

У объекта document есть специальный метод getElementById(). Этот метод просматривает всё DOM-дерево и возвращает первый найденный HTML-элемент, атрибут id которого в точности совпадает с указанной строкой.

Практика

Шаг 1: Объявление переменных

Сначала мы готовим «коробки» (переменные) для хранения данных.

var helloMessageElement // Объявляем переменную для будущего элемента
var helloMessageId // Объявляем переменную для хранения id
helloMessageId = "hello-message" // Присваиваем ей значение

Шаг 2: Поиск элемента в DOM

Вызываем метод getElementById() и сохраняем результат его работы (возвращенный объект-элемент) в переменную.

helloMessageElement = document.getElementById(helloMessageId)

Шаг 3: Шаг 3: Взаимодействие с элементом

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

// Чтение значения
helloMessageElement.value // => 'hello it-kamasutra'
 
// Изменение значения
helloMessageElement.value = "Новое значение!"
 
// Вывод значения в консоль или в alert
console.log(helloMessageElement.value)
alert(helloMessageElement.value)

Debugging

Если скрипт перестал работать (например, не появляется alert), скорее всего, в коде есть ошибка. Откройте Инструменты разработчика (F12) и посмотрите во вкладку Console.

null в данном контексте означает, что document.getElementById() не нашел элемент с указанным id (вероятно, из-за опечатки в id) и поэтому вернул "ничего".

Используйте точки останова (breakpoints), чтобы пошагово выполнить код и посмотреть значения переменных в каждый момент времени.

🏠 Домашнее задание

Работа с формами и атрибутами в JavaScript

Для чего JS вообще нужен? Одна из главных на сегодня задач - для работы с HTML.

Представьте, что у нас есть форма логина:

1. вводим email
2. вводим пароль
3. ставим галочку ЗАПОМНИТЬ МЕНЯ если хотим
4. Жмём кнопку Log In

Что произойдёт на 4 шаге?

На 4 шаге JavaScript код должен:

1. взять все эти введенные значения
2. собрать их в кучу
3. отправить на сервер

Для нас пока важен первый пункт!

Что нужно, чтобы взять все эти введённые значения?

1. Нужно найти html-элемент
2. Нужно прочитать значение какого-либо атрибута этого элемента (например value или checked)

Поэтому ВАЖНО уметь находить элементы и анализировать их (считывать свойства/атрибуты).

Обучение

Давайте учиться искать элементы и анализировать, что они из себя представляют!

Данное задание нужно делать после просмотра 1–8 видео из плейлиста: YouTube Playlist

Скопируйте следующий код к себе в index.html:

<input id="first-name" value="Dmitry" class="first-name-input" />
 
<script>
  // находим элемент по айдишнику и результат (найденный элемент) присваиваем переменной firstNameEl
  var firstNameEl = document.getElementById("first-name")
 
  // выводим в консоль значение атрибута value у найденного элемента
  console.log(firstNameEl.value)
</script>

Задачи

1. Вывести в консоль значение атрибута class для найденного firstNameEl
2. Добавьте в HTML ещё 2 input для lastName и адреса
3. Заполните value в HTML своими данными
4. Выведите эти value с помощью JS
5. Добавьте в HTML тег select, опции: moscow, minsk, kiev
6. Для option со значением minsk добавьте атрибут selected
7. Найдите select через JS и выведите его value

У тега select в HTML атрибута value нет, но у его DOM-объекта свойство есть и оно равно value выбранной option.

8. У option может быть, а может и не быть value

• если есть → значением считается оно (value="m")
• если нет → значением будет innerHTML (текст внутри тега)

Пример:

<option value="m">Minsk</option>
<option>Вот я есть значение</option>

9. Добавьте на страницу textarea и заполните его текстом (ваши хобби)
10. Найдите textarea через JS и выведите его value
11. Выведите в консоль innerHTML textarea

Вывод: textarea.innerHTML === textarea.value

12. Добавьте div, внутри него картинку (img) с src на вашу аватарку
13. Найдите этот div через JS и выведите его value → результат: undefined
14. Запомните: value есть только у input, select, textarea
15. Выведите в консоль innerHTML у div
16. Выведите в консоль innerHTML у select (увидите список option как текст)
17. Найдите img и выведите в консоль её src и alt

Полезные свойства

el.id
el.value
el.style
el.name
el.selected (для option)
el.checked (для input type=checkbox)
el.src (для img)
...

Форма логина ⭐

⭐ Дополнительное задание со звездочкой. Проделывать по желанию.

Задание 1. Сверстайте форму

Центрируйте форму посередине. Оберните теги в div, задайте стили:

div {
  width: 300px;
  margin: 0 auto;
}

Задание 2. Добавьте JS-логику

После ввода данных, отметки чекбокса и нажатия кнопки Log In, выведите сообщение:

login: blablabla; password: blablabla; remember me: true

Для этого найдите элементы и прочитайте значения их атрибутов. Код пишите внутри конструкции:

// не забудьте установить для кнопки в html-е значение атрибута id='login'
var loginButton = document.getElementById("login")
 
loginButton.onclick = function () {
  // вот здесь ваш код.
}