Анкета по веб-технологиям

Беспокоишься, как будет проводиться техническое собеседование при приёме на работу? Тебе поможет этот опросник по стеку веб-технологий на должность «веб-разработчик». Этот большой список вопросов взят из реальных собеседований.

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

На самом деле на это надо взглянуть с другой стороны: представьте, что кто-нибудь прочитал все эти вопросы/ответы и решил все типовые задачи. Считайте, что это кунг-фу, которое можно загрузить заранее. На самом деле приятно работать с джуниором, который не спотыкается на идиотских мелочах. Который не лезет в мануалы, чтобы читать как пишутся функции или строки «склеиваются». Который не пишет свою сортировку взамен идентичной стандартной. У которого div в верстке не скачут по всей странице.

В качестве отступления расскажу три истории:
1. Натуральная сортировка
Была задача выводить строки в алфавитном порядке, но при наличии циферок — в порядке возрастания цифр. Джуниор после месяца экспериментов выдал функцию, которая работала 100% как надо. Успех? Как бы да, но есть natcasesort и natsort, которые делают то же самое, а работают быстрее.
2. Правильное округление
Пользователь вводил в форме сумму, она сохранялась в базе данных, но при извлечении обратно к значению суммы приписывался длиннющий хвост незначащих цифр после запятой, штук 10 или 15. Как только не мучились — и округляли, и отбрасывали эти цифры — иногда проскакивали значения не те, что вводил пользователь. А почему? Потому что числа с плавающей точкой — не действительные!. Для значений сумм используют типы данных с фиксированным количеством знаков после запятой. Где-то достаточно две, а где-то и восемь. Платёжная система Stripe принимает параметр «сумма» в виде целого числа центов или копеек.
3. Нужно было сверстать страницу, на которой вокруг центральной формы регистрации располагались бы этакие мыльные пузыри с рекламой фич. Верстальщик несколько дней пытался выстроить их кругом, но в разных браузерах они у него располагались по-разному и иногда совсем кругом, а в линию. Оказывается, он их верстал с плавающей вёрсткой (style = «float: left;»). Почему располагались в линию? Отступы элементов HTML, перекрытия, ширина экрана разные и плавающая вёрстка «ломалась». В результате их переверстали с абсолютным позиционированием (style = «position: absolute;» и style = «position: relative;») — получилось аккуратно и в разных браузерах выглядело одинаково.

К чему все эти три истории? Потому что когда я задавал этим мастерам простые вопросы: что ты знаешь про натуральную сортировку, про округление и числа с плавающей точкой, про плавающую вёрстку и абсолютное позиционирование — в воздухе была звенящая тишина, а в глазах — пустота. А надо, чтобы послышался звук движущихся шестерёнок в мозгу, а в глазах — хотя бы признаки вспомнить: «Да, где-то слышал и видел примеры».

Итак, заставим шестерёнки двигаться…

Ответы и советы по прохождению собеседования — на отдельной странице, чтобы не было соблазна подсматривать, ссылка — в конце списка вопросов

1. Объектно-ориентированное программирование

1.1. Я хочу, чтобы к свойству prop имели доступ только объекты класса Sample. Как мне изменить текст программы? (PHP)

class Sample {
    public $prop;
}

1.2. Чем отличается абстрактный класс от интерфейса?

1.3. Фрагмент кода:

class A {
	public function f() { return 1; }
}
class B extends A {
	public function g() { return 2; }
}

Какая парадигма объектно-ориентированного программирования используется в этом фрагменте кода?
a) наследование
б) инкапсуляция
в) полиморфизм
г) кэширование

1.4. Когда исполняется конструктор класса?
а) при старте программы б) при создании объекта в) при обращении к объекту

1.5. Составь пример класса (на любом языке), в котором каждый новый создаваемый объект автоматически связывался бы с предыдущим созданным объектом.

$a = new SomeClass();
$b = new SomeClass();
// $b->prev → $a;
// или
// $a->next → $b;

1.6. Что такое «магические методы”? Приведи пример

2. Шаблоны проектирования:

2.1. Во время выполнения скрипта класс должен иметь только одну сущность. Какой из паттернов проектирования необходимо использовать для реализации такого класса?
a) Singleton б) Mutex в) Registry г) Factory

2.2. Два программных процесса одновременно хотят записать данные в один файл. Какой из паттернов проектирования не позволит этим процессам перезаписать те изменения, которые в этот файл только что сохранил другой процесс?
a) State б) Mutex в) Registry г) Builder

2.3. Инициализация работы с базой данных выполняется только в том случае, если процессу понадобилось обратиться к базе данных. Как называется такая инициализация?
а) Отложенная б) Параллельная в) Временная г) Абстрактная

2.4. Часто используемые объекты хранятся в другом объекте-хранилище, которое предоставляет доступ хранимым объектам по условному имени. Что это за хранилище объектов?
а) Prototype б) Registry в) Iterator г) Interface

2.5. Вместо того, чтобы создавать новый объект через конструктор, объекты клонируются. Что это за подход?
а) Prototype б) Registry в) Iterator г) Factory

3. Вопросы по проектированию реляционных баз данных

3.1.Необходимо спроектировать полноценную базу данных для хранения и обработки трех сущностей – книги, авторы книг, магазины, в которых продаются книги. Сколько таблиц будет в такой базе данных, чтобы она соответствовала 3-ей нормальной форме?

3.2. Напишите запрос, чтобы получить таблицу «Результат»

3.3. Имеется таблица employe, состоящая из трех полей: name, age, department (имя сотрудника, его возраст, отдел, в котором он работает). Нужно найти все отделы в которых работает не менее 3х человек старше 30 лет.

3.4. Некоторый алгоритм, хранящийся внутри базы данных, запускается автоматически сразу же после вставки строки в таблицу. Какое общее название этого механизма?
а) Представление б) Индекс в) Триггер г) Внешний ключ

3.5. Сложный запрос сохранили в базе данных и теперь выполнять его можно обращением вида

SELECT * FROM ‘something’

Что такое something?
а) Представление б) Индекс в) Триггер г) Транзакция

3.6. Чтобы из таблицы быстро выбирать данные, к ней добавили дополнительную информацию. Что это за информация?
а) Представление б) Индекс в) Хранимая процедура г) Транзакция

3.7. При изменении записей в нескольких таблицах произошла ошибка при работе с одной из этих таблиц. Какой механизм позволяет отменить все изменёния?
а) Представление б) Репликация в) Индекс г) Транзакция

3.8. Перечислите случаи, когда использование индексов может только навредить.

3.9. Существует ли универсальная защита от SQL-инъекций? Можешь привести пример кода, который пропускает и пример кода, который не пропускает SQL-инъекцию.

3.10. Какие бывают способы хранения деревьев в таблице? Например, когда нужно реализовать древовидные комментарии к статье.

4. Вопросы по веб-интерфейсам (HTML/CSS)

4.1. Какие типы изображений не используются при оформлении веб-страниц
а) Graphics Interchange Format б) Scalable Vector Graphics в) Portable Network Graphics г) Encapsulated PostScript

4.2. Список строк с цифрами, выровненными с одного края, называется нумерованный список. Какой фрагмент выведет нумерованный список:

а) <dl><dt>1</dt><dd>элемент 1</dd><dt>2</dt><dd>элемент 2</dd></dl>
б) <ol><li>элемент 1</li><li>элемент 2</li></ol>
в) <ul><li>элемент 1</li><li>элемент 2</li></ul>
г) <table><tr><td>1</td><td>элемент 1</td></tr><tr><td>2</td><td>элемент 2</td></tr></table>

4.3. Что делает css-свойство clear:right?
a) Убирает все отступы справа от элемента
b) Отменяет свойство text-align: right; для вложенных элементов
c) Запрещает обтекание другими элементами с правой стороны
d) Свойство clear не существует в css

4.4. Верна ли следующая запись?
border-style: solid dotted;
a) Да
b) Нет

4.5. Как установить для элемента фоновый рисунок, который бы повторялся по горизонтали?
(Выбрать все правильные ответы)
a) background:src(«image.jpg») scale-x;
b) background:url(«image.jpg») repeat-x;
c) background-image:src(«image.jpg»); background-repeat: x
d) background-image:url(«image.jpg»); background-repeat: repeat-x
e) background: repeat-x url(«image.jpg»);

4.6. Выберите допустимые значения для css-свойства overflow
a) scroll
b) middle
c) hidden
d) auto
e) 10px
f) right

4.7. Выберите корректные варианты стилей:
a) border: none;
b) padding: -10px;
c) margin: -20px;
d) padding: 12% 20px 0;
e) margin: none;

4.8. Дан код:

<div style="position:relative;">
    <div style="position:absolute;">TEXT</div>
</div>

Относительно чего будет позиционироваться внутренний элемент DIV?
a) относительно документа
b) относительно области видимости окна браузера
c) относительно элемента с position:relative;

4.9. Как установить отступ слева для блочного элемента:
a) text-indent:
b) margin-left:
c) indent:
d) left-margin:

4.10. Каким стилем можно запретить подчеркивание ссылок?
a) a {decoration:no underline}
b) a {text-decoration:none}
c) a {underline:none}
d) a {text-decoration:no underline}

4.11. Какой цвет заливки будет у контейнера?

<style>
#div    { background: green; }
div     { background: blue !important; }
.div    { background: red; }
div.div { background: yellow; }
</style>

<div id="div" style="background: black;">test</div>

4.12. Какими css-селекторами можно установить стили для контейнеров (по номерам строк):
a) 5
b) 2, 3, 4+
c) 2
d) 3

1 <div class="c1">
2     <div class="c2"/>
3     <div class="c2" title="test" />
4     <div class="c2">
5         <div class="c2" />
6     </div>
7 </div>

4.13. Какой будет offsetHeight у вложенного контейнера?

<style>
#test {
    width: 400px;
    height: 100px;
}

#test div {
    width: 100px;
    height: 50px;
    padding-top: 10%;
    border: 1px solid white;
}
</style>

4.14. Расскажи об XSS-инъекции. Как избежать?

4.15. Что такое «Адаптивный дизайн”?

4.16. Что такое «Graceful Degradation”? Что такое «Progressive Enhancement»?

5. Вопросы по веб-разработке на языке программирования PHP

5.1. Во время выполнения скрипта класс должен иметь только одну сущность. Какой из паттернов проектирования необходимо использовать для реализации такого класса?

5.2. Каким будет результат выполнения кода в PHP5?

<?php
class MyClass{
	var $value;
}

$a  = new MyClass;
$a->value = 1;
$b = $a;
$b->value = 2;

echo $a->value;
?>

5.3. Каким образом в PHP5 можно написать класс, чтобы некоторые его свойства не могли быть изменены в обход методов класса?

5.4. Для каких целей используют функцию autoload? Какие из нижеперечисленных строк являются прототипом этой функции?
1) function __autoload ($className)
2) function autoload ($className)
3) function __autoload ($className, $fileName)
4) function autoload ($className, $fileName)

6. Вопросы по программированию на языке Javascript

6.1. Как в Javascript проверить переменную (глобальную и локальную) на существование?

6.2. Что выведет следующий код:

var e = [];
for (var i in [1,2,3,4]) {
    e.push(function(){
        console.log(i)
    });
}
e[0](); e[1](); e[2](); e[3]();

6.3. Как передаются переменные в javascript: по ссылке, по значению, либо как-то ещё?

6.4. Опишите все известные модели распространения событий.

6.5. Приведите 1 к булеву типу. Приведите «1» к целому. Проверьте переменную, что она NaN

6.6. Что такое замыкания?

6.7. Что делают методы Function.prototype.call и Function.prototype.apply ?

6.8. Чем плохо расширение прототипов встроенных объектов?

6.9. Написать пример наследования через прототипы в js, по возможности реализовав возможность вызова методов предка в потомке.

6.10. Что такое «Unobtrusive JavaScript»?

Постарайся самостоятельно ответить на все вопросы, даже если опыта работы с отдельными технологиями не хватает.
В реальных собеседованиях не было возможности обратиться к справочным материалам, а у тебя под рукой habrahabr, stackoverflow, wikipedia.

---