Найти тему
Frontend Review

Практика JavaScript

Хотелось посвятить практике по JavaScript серию публикаций, так как тема очень и очень интересная. К тому же, у новичков всегда возникает вопрос, где и как применять полученные знания на практике.

Манипуляции с DOM

Простейшие манипуляции с DOM отличный вариант с чего начать практику. Например, возьмем div и изменим его цвет.

-2

Изначально div черного цвета, с белым текстом внутри.

Структура html документа выглядит вот так:

-3

Добавляем немного стилей.

-4

И наконец пишем следующий код в файле script.js

-5

Создаем переменную black, в которую передаем ссылку на нужный нам div. Далее делаем обработчик события по клику на данный div, который меняет цвет фона на красный.

Но что делать, если нам нужно поменять больше чем один параметр?

Тут нам на помощь приходит свойство classList()

-6

Таким образом мы добавляем к элементу класс green. После клика по элементу получаем следующий результат.

-7

Таким образом мы добавили border, увеличили внешний отступ слева до 300 пикселей, ну и само собой изменили цвет самого div на зеленый.

Этот пример пожалуй простейший с чего можно начать, в следующей публикации я немного усложню задачу. Также дам ссылки на полезные ресурсы для практики по JavaScript.