Разбор ДЗ, урок 08

Практика

На прошлом уроке мы с вами рассмотрели функцию getElementById, которая позволяет нам находить элементы на странице html. Благодаря этой функции мы можем находить элемент расположенный на странице и детально его исследовать.

// находим элемент по id и присваиваем результат (найденный элемент) переменной firstNameElement
var firstNameElement = document.getElementById("first-name")

Давайте попрактикуемся исследовать элементы выполняя домашнее задание с прошлого урока.

Задание 0

Представьте, что вы зашли на страницу редактирования вашего профиля. Сейчас здесь только одно поле - Имя, заполненное именем (измените его на своё)

<input value="myName" class="first-name" id="first-name" />

Задание 1

Выведите в alert class (по аналогии с value) для найденного firstNameEl (атрибуту class у тэга соответствует свойство className у его объекта\души)

Логично предположить, что для HTML-атрибута class должно существовать свойство .class. Однако если вы попробуете это сделать, то получите undefined. Правильное свойство — .className.

<input value="myName" class="first-name" id="first-name" />

window.alert(firstNameElement.className)

Задание 2

Добавьте в разметку ещё 2 input для фамилии (lastName) и адреса (address)

<input value="myName" class="first-name" id="first-name" />
<input value="Kuzyubedrin" class="last-name" id="last-name" />
<input value="Minsk city" class="address" id="address" />

Задание 3

Заполните value своими данными

<input value="myName" class="first-name" id="first-name" />
<input value="myLastName" class="last-name" id="last-name" />
<input value="myCity" class="address" id="address" />

Задание 4

Выведите в alert эти value с помощью JS

Шаг 1: Поиск элементов на странице

// определяем переменные
var lastNameId;
var lastNameEl;
 
var addressId;
var addressEl;
 
// присваиваем переменным строки-`id, которые нужно найти в html
lastNameId = 'last-name';
addressId = 'address;
 
// находим элемент по id и присваиваем результат (найденный элемент) переменным
var lastNameEl = document.getElementById('last-name');
var addressEl = document.getElementById('address');

Шаг 2: Выводим значения value в alert

window.alert(lastNameEl.value)
window.alert(addressEl.value)

Задание 5

Добавьте в HTML тэг select, в качестве опций (option) которого сделайте список городов: Kiev, Minsk, Moscow.

<select id="cities">
  <option>Kiev</option>
  <option>Minsk</option>
  <option>Moscow</option>
</select>

Задание 6

Для option со значением "Minsk" добавьте атрибут selected (Minsk будет сразу выбран\селектнут в этом списке)

<select id="cities">
  <option>Kiev</option>
  <option selected>Minsk</option>
  <option>Moscow</option>
</select>

Задание 7

Найдите этот select с помощью JS и выведите в alert его value (обратите внимание, что атрибута value у тэга select не существует, но у его "души", найденной через JS, такое свойство есть).

var citiesId = "cities"
var citiesEl = document.getElementById(citiesId)
window.alert(citiesEl.value)

Задание 8

Сделайте вывод для себя, чему оно будет равно (значение value тэга select равно выбранной (селектнутой) в данный момент опции)

Задание 9

Добавьте на страницу textarea, заполните его внутренность (innerHTML) коротким предложением, перечислив своё хобби.

<textarea id="hobbies">JS, CSS, HTML</textarea>

Задание 10

Найдите с помощью JS этот textarea на странице и выведите в alert его value (обратите внимание, что атрибута value у тэга textarea не существует, но у его "души", найденной через JS, такое свойство есть).

var hobbiesId = "hobbies"
var hobbiesEl = document.getElementById(hobbiesId)
window.alert(hobbiesEl.value)

Задание 11

Делаем вывод, что в JS, value у найденного объекта textarea равно его innerHTML (то есть содержимому между открывающим и закрывающимся телом)

Задание 12

Добавьте на страницу div, внутри него картинку img, атрибут src которого равен ссылке на вашу аватарку из интернета (например BK)

<div><img src="адрес_ссылки" /></div>

Задание 13

Найдите этот div с помощью JS и алертните его значение value. Что видим? Делаем вывод: у "души" div-элемента нет свойства value (атрибута value у div-а тоже нет, так как див не является тэгом для ввода данных, это просто обёртка-контейнер для других тэгов).

// добавляем id
<div id="avatar-wrapper">
  <img src="адрес_ссылки" />
</div>

var avatarWrapperId = "avatar-wrapper"
var avatarWrapperEl = document.getElementById(avatarWrapperId)
window.alert(avatarWrapperEl.value) // Возвращает undefined

При попытке получить div.value мы получаем undefined.

Задание 14

❗ Запомните. value есть только у элементов, с помощью которых можно вводить данные (впечатывать, выбирать) с UI: input, select, textarea

Задание 15

Выведите в alert свойство innerHTML у найденного дива (по аналогии с value и className)

window.alert(avatarWrapperEl.innerHTML)

Задание 16

Выведите в alert innerHTML найденного ранее textarea. Делаем вывод, что textarea.innerHTML == textarea.value

window.alert(hobbiesEl.innerHTML)

В отличие от input, который является одиночным тегом и хранит свое значение в атрибуте value, textarea — это парный тег. Это означает, что у него есть открывающий (<textarea>) и закрывающий (</textarea>) теги. Текст, который вводит пользователь или который задан по умолчанию, находится между этими тегами.

innerHTML — это свойство, которое содержит всё, что находится между открывающим и закрывающим тегами элемента. Для textarea это как раз и будет тот самый текст, который в него введен.

Задание 17

Выведите в alert innerHTML найденного ранее тэга select (увидим его внутренности: список из option, увидим мы именно html-код)

window.alert(citiesEl.innerHTML)

Задание 18

Найдите добавленную ранее img и выведите в alert значение свойств src и alt (добавьте атрибут alt для картинки)

<div id="avatar-wrapper">
  <img src="адрес_ссылки" id="avatar" alt="аватар" /> // добавляем картинке alt и id
</div>

var avatarId = "avatar"
var avatarEl = document.getElementById(avatarId)
window.alert(avatarEl.src)
window.alert(avatarEl.alt)