Рубрика: JavaScript/jQuery

При отладке JavaScript/jQuery кода веб-приложения часто требуется узнать:

• значение переменной в определенном месте кода
• значения переменной до выполнения какого-то кода и после его
• вызвалась ли функция вообще.

Для новичков отладка JavaScript (JS) проводится самым очевидным способом через alert-дебаг. То есть в коде пишется что-то подобное:

var a = "Hello";
alert( a );

И в итоге получали следующее:

Читать далее Отладка web-приложения через браузер. Отладка JavaScript через console.log()

Отладку web-приложений в браузере (а именно front-end) можно разделить на две задачи:

• поиск и исправление ошибок верстки (HTML/CSS)
• поиск и исправление ошибок JavaScript (jQuery)

Браузеры уже имеют необходимые инструменты, что решить указанные задачи. В качестве такого инструмента будем рассматривать Web Inspector, который используется в Chrome, Opera, Яндекс.Браузер и хромо-подобных браузерах.
Читать далее Отладка web-приложения через браузер. Инструмент для отладки

Условие задачи: необходимо разместить на странице виджет, который изображает количество работ, разделенные по годам. (для справки: заказчик является видеооператором). Виджет должен состоять из колонок, причем каждая колонка — это определенной год (далее «значение X«), и высота колонки пропорциональна количеству работ для этого года (далее «значение Y«). Иными словами виджет представляет собой гистограмму. Дополнительно необходимо, чтобы в момент отображения этого виджета в зоне видимости окна браузера начинали подниматься указанные выше колонки до своих значений.

Хочу отметить, что в данном примере приводится лишь путь к решению данной задачи и демонстрируются и описываются встреченные преграды и способы по и преодолению. И ни в коем случае не стоит рассматривать как абсолютно универсальный способ решения этой задачи.

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

Читать далее Анимированная гистограмма: часть 1. Функционально-процедурный подход