Итак пришло время к практике. Скучное сообщение «Hello World! » мы не будем выводить, а начнём с чего-то по интересней.
Первым практическим заданием будет создание блока с помощью JS. С эти заданием справится метод createElement(tag);
Строка var newElement = document.createElement('div'); создаст новый элемент «div».
Далее нам нужно добавить элемент на страницу.
Существует много вариантов добавление его в DOM – дерево. Я выбрал метод «parentElem.appendChild(elem)».
Этим вызовом мы добавляем созданный нами элемент в конец «parentElem».
Добавляем наш элемент в Body, «document.body.appendChild(newElement);»
Нашему элементу ми задали начальные стили ширину, высоту и цвет заливки.
Мы создали новый блок с помощью JS. На этом можно остановится, но мы пойдём дальше. Мы создадим кнопку при нажатии на неё будет добавляться новый блок.
Создаём функцию под названием «newblock» и заставим выполнятся функцию по клику. Для этого кнопке добавим атрибут «Onclick» с названием функции. «Onclick = "newblock();».
Внутрь функции мы добавим наш код
var newElement = document.createElement('div');
newElement.className = "block";
document.body.appendChild(newElement);
Теперь при нажатии будет добавляться новый блок.
Но это ещё не всё. Давайте мы будем добавлять каждый новый блок разного цвета.
Для этого нам потребуется метод «style.backgroundColor». Перед этим нам нужно генерировать случайное шестизначное число.
«var i = Math.floor(Math.random() * 10000);»
Мы в переменную i записуем случайное число.
Math.floor округляет число к меньшему целому значению.
Далее добавляем строку
newElement.style.backgroundColor = "#" + i;
и радуемся результатом.
Мы создали первое рабочее веб приложение.
Код с урока https://github.com/Palllke/1st/tree/master