Js + html

Почему JS должен уметь работать с HTML?

Как получить элемент на странице
…
text
…
…
var paragraph = document.getElementById(‘thisIsMyText’);

document.getElementById();
Функция найдёт элемент в html по заданному id

textContent
…
text
…
…
var paragraph = document.getElementById(‘thisIsMyText’);
paragraph.textContent = ‘hello’

textContent
Свойство хранит текст внутри элемента

События
Что такое событие?

Код событий выполнится только после того, как произойдет их активирующее действие. Разные типы событий имеют разные активирующие действия.
Примеры активирующих действий JavaScript:
• Щелчок мыши (событие onclick);
• Нажатие клавиши (onkeypress);
• Отправление формы (onsubmit);
• Наведение курсора мыши на элемент (onmouseover) или выведение курсора мыши за пределы границ элемента (onmouseout);
• Полная загрузка страницы или картинки (onload);
• Изменение содержимого элемента, например содержимого текстового поля формы (onchange).

Как задать событие
…
text
…
…
var par = document.getElementById('id');
function changeText(){
par.textContent = 'asd';
}

Как получить данные, которые можно ввести
text onclick="changeText()">Click
var par = document.getElementById('id');
var inp = document.getElementById('input');
function changeText(){
par.textContent = inp.value;
}

input.value
Свойство value хранит всё, что мы вводим в поле

Функция случайного выбора
Создадим страницу, позволяющую получать случайные значения из заданного диапазона

Страница тренировка счёта
Получить два случайных числа, вывести их на страницу. Получить число от пользователя и сравнить, правильно ли он сложил число. Если правильно, то поздравить, если нет, что отругать.