Направления развития фронтенд разработчика

Упрощенно можно выделить следующие направления развития фронтенд разработчика:

1. Верстальщик. Ему не нужно использовать javascript и заботиться о том,
как приложение будет взаимодействовать с сервером. Главное - создать красивую
html-страницу.

Содержание работы:

• Создание кросс-браузерных статичных макетов с использованием html/css.
• При верстке использовать блоки, которые можно будет без особых настроек использовать в других проектах (БЭМ-верстка).
• Использовать технологию progressive enhancement, чтобы задействовать при создании страницы новые возможности, появившиеся в современных браузерах.
• Использовать технологию graceful degradation, чтобы дать пользователям возможность работать со страницей, если вдруг не сработает javascript или не загрузятся css-стили.
• Умение использовать css-фреймворки: bootstrap, foundation.
• Уметь применять при верстке какую-либо из технологии: LESS, SASS, Stylus.

2. Javascript-программист. Не нужно больше заботиться о том,
почему "поехала" верстка в одном из блоков в Interner Explorer, поскольку
это задача верстальщика.

Содержание работы:

• Написание javascript-приложения, способного хранить, обрабатывать, передавать данные на сервер, а также принимать их от него.
• Уметь работать с деревом DOM и знать особенности работы Javascript в различных браузерах.
• Иметь представление о нововведениях в стандарт Ecmascript
• Уметь использовать новые возможности браузеров, применяя feature detection.
• Создавать структурированные javascript-приложения, в рамках проекта.
• При создании рекомендуется соблюдать DRY-принцип, а также принцип повторного использования кода, чтобы созданные блоки кода (модули) можно было задействовать и в других проектах.
• Уметь создавать собственные jquery-модули.
• Уметь использовать jquery ui модули.
• Уметь использовать фреймворки jquery, rightjs, 3d.js, backbone, underscore, knockoutjs, bootstrap и др.
• Уметь выбрать наиболее подходящий фреймворк для решения поставленной задачи.

Разумеется, такое деление условно. Зачастую компании нужен человек, который будет прокачан в обоих направлениях. Однако очевидно, что для достижения максимума нужна практика (т. е. время). Достичь ощутимого результата в одном направлении можно быстрее, нежели в двух. Также важен вопрос предпочтения - кому-то просто нравится визуальное оформление, и он не хочет иметь дела с javascript. В таком случае он выберет путь верстальщика.

setTimeout в цикле

Задача по javascript.
Что будет выведено в консоли? Почему?

for(var i=1; i<=2; i++){
    setTimeout(function() { console.log(i) }, 100);
}

Получить массив с уникальными значениями

Имеется массив с повторяющимися значениями:

var arr = ['banana', 'apple', 'orange', 'banana', 'tomato', 'apple']; 

Требуется написать функцию, принимающую на вход этот массив и возвращающую массив с уникальными значениями.

Найти сумму чисел в массиве элементов

Имеется массив элементов:

var arr = ['a', 1, 2, [3, 'b', 4, [5, 6, 'c']], 'd', 7, [8, 9]]; 

Найдите сумму всех чисел, включая вложенные массивы.

TypeError: window.event is undefined

Как-то раз меня попросили заставить работать один раздел сайта, написанный на чистом javascript, в Google Chrome и Firefox.

Вот ошибка, с которой я столкнулся:
TypeError: window.event is undefined

Код, вызвавший ошибку:

function divisionExpand () {
    var division = window.event.srcElement;
    var iddivision = division.id;
    # ...
}

Данная функция должна разворачивать скрытый блок с содержимым при клике на элементе. В html-файле было написано следующее:

<img onclick="javascript:divisionExpand()" src="/img/p.gif">

Причина ошибки в не кроссбраузерном получении объекта event.
Для исправления нужно в html написать:

<img onclick="javascript:divisionExpand(event)" src="/img/p.gif">

В javascript-файле написать:

function divisionExpand(event){
    # Кроссбраузерное получение объекта event
    var event = event || window.event;

    # Кроссбраузерное получение объекта target
    var target = event.target || event.srcElement;
    var iddivision = target.id;
    # ...
}

Не определяется переменная, заданная в теге script

Можно столкнуться с ситуацией, когда переменная, определенная в теге script , не определяется на странице.

В Firebug выводится следующее сообщение об ошибке:

Данная ошибка может быть связана с некорректностью верстки.

Проверить валидность верстки можно следующими способами:
1. На сайте http://validator.w3.org/
2. При помощи плагина для браузера. В Firefox, примеру, это HTML Validator. Для других браузеров вы можете найти плагин валидации html, введя в поисковике запрос html validator plugin.

Я веду разработку в Firefox, поэтому при нажатии на Ctrl + U я увидел результаты валидации html моей страницы:

Вот таким образом невалидная верстка может испортить работу вашего веб-приложения.