Главная | Все статьи | Дневник студента

Манипулирование DOM или как перестать гадать и начать угадывать

Время чтения статьи ~2 минуты
Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Манипулирование DOM или как перестать гадать и начать угадывать главное изображение

Завершил курс «JS: DOM API» https://ru.hexlet.io/courses/js-dom занимательный курс, посвященный манипулированию DOM.

Я уже несколько лет пишу скрипты на JS, но как-то напрямую с DOM не работал, в основном через Jquery. Прошёл этот курс и понял почему, когда я начал изучать JS, ES6 ещё не было, и король был jQuery. Пишешь один код и он работает везде в любом браузере. Обычно код в Chrome, в Firefox работал, особняком стоял IE для которого необходимо было писать свой код отличный от других браузеров. Но года бегут, изменилось чуть более, чем всё, появились новые нативные команды. Что не понравилось, они длиннее по синтаксису и необходимо очень хорошо понимать алгоритмы работы браузера (всплытие, асинхронные события).

Работа с jQuery напоминает кнопочный стиль программирования. Есть кнопка, и на клик этой кнопки вешаем обработчик, который всё делает. Но по факту это путь в никуда, при достаточно большом объёме кода программа превращается в кирпич, и понял что некорректно работает очень и очень трудоёмко.

Всё хорошо, на нативном JS, можно написать любую программу, но один минус за бесконечное время и мало кто из клиентов согласен столько ждать, поэтому на смену native JS приходят фреймворки. Но грамотно программировать на JS тоже нужно уметь, т.к. на собеседованиях постоянно предлагают задачи, которые необходимо реализовать на чистом JS без использования библиотек.

картинка

Но своих «приколов» хватает и у DOM, например, команда fetch, при помощи её можно получить json с удаленного сервера, думаете, она сразу возвращает json, нет, она возвращает промис, который возвращает json. Напоминает песню: «Я оглянулся посмотреть, оглянулась ли она, чтобы посмотреть, оглянулся ли я». Поэтому, вместо fetch, эффективней использовать библиотеку axios https://github.com/axios/axios.

Многие решения Кирилла на упражнения меня озадачили, например в упражнении «Обход DOM» было предложено рекурсивное решение с использованием рекурсивной функции reduce, как это всё работает я не понял до сих пор. В упражнении «Пятнашки» я несколько раз переписывал программу, пытался пройти тесты у меня это не получилось. Я решил перестать гадать и захотел начать угадывать, плюнул и посмотрел решение с потерей баллов, тесты оказались заточены под конкретное решение учителя.

А вот урок «Формы» мне понравился, редко где даётся как правильно работать с формой. Итак, курс «JS: DOM API» мне понравился, рекомендую.

Оригинальная публикация.

Аватар пользователя Олег Гребенёв
Олег Гребенёв 12 февраля 2020
5
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 2 мая
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 2 мая
профессия
от 6 183 ₽ в месяц
Ручное тестирование веб-приложений
4 месяца
с нуля
Старт 2 мая
профессия
от 6 300 ₽ в месяц
Разработка приложений на языке Java
10 месяцев
с нуля
Старт 2 мая
профессия
от 5 025 ₽ в месяц
новый
Сбор, анализ и интерпретация данных
9 месяцев
с нуля
Старт 2 мая
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 2 мая
профессия
от 5 840 ₽ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 2 мая
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 2 мая
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 2 мая
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 2 мая
профессия
Верстка с использованием последних стандартов CSS
5 месяцев
с нуля
Старт в любое время