Файл: Webпрограммирование практическая работа 1 Знакомство с языком JavaScript (JS).pdf

Web-программирование практическая работа 1
Знакомство с языком JavaScript (JS)
Самый простой вариант преобразования статичной html страницы в динамичную использовать JS - написать нужные нам команды внутри тега

– это какое-то отслеживаемое действие, например, щелчок мышью, или нажатие клавиши на клавиатуре.
Клик мышью – это событие
onclick . Чтобы привязать к кнопке функцию, нужно написать
onclick=”имяфункции()”
Проверьте страницу. По нажатию на кнопку должны всплывать окна.
Создадим страничку: по нажатию на кнопку, число на экране увеличивается на 1. Давайте вставим на страничку текст в формате заголовка, а также кнопку. Обоим элементам задайте уникальные id, они понадобятся нам дальше. Текстом кнопки поставим символ «+».
Напишем функцию, которая увеличивает нашу переменную на 1.
Чтобы вывести переменную на страницу, нам нужно найти необходимый объект, в котором её значение будет написано. У нас для этого есть текст-заголовок, а именно тег div со своим уникальным id.
Будем использовать команду
document.getElementById(“id”).innerHTML = “что хотим вставить в див”;
Первое слово document позволяет нам получить доступ к любому элементу документа (страницы), метод
getElementById находит объект по его Id. Именно за этим мы и задавали уникалььный id.
Метод innerHTML возвращает весь тот код, что внутри парного тега, к которому мы обращаемся.
Таким образом, мы записали внутри div значение нашей переменной. Протестируйте программу.
По нажатию на кнопку число на экране должно увеличиваться на 1.
Измените кнопку согласно приведенному изображению:
Для этого в css файле пропишем 3 свойства – размеры и цвет.
Измените кнопку согласно приведенному изображению:

Чтобы сделать разметку сложнее, нужно добавить скругление и размер шрифта. Обратите внимание, шрифт измеряется в пунктах, pt. Для нас – это привычный размер кегля.
Самостоятельная работа. Добавьте кнопку, уменьшающую число на 1.
Разберёмся с двумя важными свойствами, которые есть у любого блочного элемента – это padding и margin. padding - это свойство, которое служит для установления количества полей у элемента от внутреннего края границы до содержимого. Содержимым может быть обычный текст, изображение или дочерний элемент, который так же может иметь свои поля.
Свойство margin, в отличии от padding, устанавливает величину отступа между границами элементов.
Если элемент является дочерним, то отступом является пространство от границы элемента до внутреннего края границы родителя.
Если у элемента отсутствует родитель, то отступом считается установленное свойством свободное пространство до краев рамки окружающих элементов.
Чтобы переместить наше число правее, чтобы оно было между кнопками, мы можем задать маржин от левого края на 100 пикселей. для этого нам поможет css-стиль margin-left. Вместо left мы можем использовать любую другую сторону, либо вообще не использовать, чтобы установить маржин сразу от всех 4-х сторон.
Проделайте это.
Сделаем немного другую страницу, чтобы по нажатию на кнопку генерировалось случайное число. Тут нам поможет функция Math.random();
Эта функция генерирует случайное число от 0 до 1 (1 не включительно).

Самостоятельная работа – создайте страницу, как показано на экране.
Сделайте такую страницу.