Доброе время суток, уважаемые коллеги. Решил поделиться своим вариантом теста, рожденный несколько лет назад нашим скромным коллективом и несколько раз перелопаченный им же. Тест рабочий и вполне актуальный, если сидеть напротив и слушать ответчика, направляя его мысли в нужную сторону и подсказывая всякие мелочи.
1. Магия
Напишите программу, которая выводит на экран числа от 1 до 100. При том вместо чисел, кратных 3, программа должна выводить слово “Fizz”, а вместо чисел, кратных 5 — слово “Buzz”. Если число кратно 3 и 5, то программа должна выводить слово “FizzBuzz”.
2. HTML
2.1. Содержимое какого элемента можно увидеть в окне браузера?
2.2. Что будет если расположить
<b>
в контейнере
<head>
Ваш ответ...?
2.3. Для какого тега элемент
<!doctype html>
выступает родителем?
2.4. Какой тег следует использовать для переноса строки?
2.5. Как создать ссылку, которая открывается в новом окне/вкладке?
2.6. Какие теги используются для создания списков?
2.7. Для чего хороши атрибуты
data-*
Ваш ответ...?
2.8. Как будут располагаться элементы на странице?
<div>div 1</div>
<div>div 2</div>
<span>span 1</span>
<span>span 2</span>
Ваш ответ...?
2.9. Как вставить аудио/видео в html-файл?
2.10. Что не так с этим кодом
<b>Some<i> </b>Text</i>
Ваш ответ...?
2.11. Основные отличия блочной верстки от табличной?
2.12. В чем отличие
<svg>
от
<canvas>
Ваш ответ...?
3. CSS/LESS
3.1. Как скрыть элементы на странице?
3.2. В чем различия свойств «margin» и «padding»?
3.3. Знакомы ли вы с bootstrap или другой фронтенд-библиотекой компонентов?
3.4. Используете ли вы медиа-запросы?
3.5. Какие единицы измерения используются в css?
3.6. Какие существуют способы создания сетки?
3.7. Что делает свойство box-sizing?
3.8. Знакомы ли вы с анимациями?
3.9. Для чего используется Flexbox?
3.9. Как расположить элемент на странице по центру вертикально и горизонтально?
3.10. Каков будет цвет текста в следующем примере?
main.css:
p { color: red; }
index.html:
<html>
<head>
<link rel="stylesheet" href="main.css">
<style>
p#p { color: green; }
</style>
</head>
<body>
<p id="p" style="color: blue;">
Some text
</p>
</body>
</html>
3.11. Назовите разницу между LESS и CSS?
3.12. Опишите способ создания цикла в LESS?
4. JavaScript
4.1. Какие библиотеки и/или фреймворки вы используете?
4.2. Чем JavaScript отличается от Java?
4.3. В чем заключается разница между cookies, sessionStorage и localStorage?
4.4. Назовите разницу между document load event и document ready event?
4.5. Назовите способы привязки обработчиков событий к объектам.
4.6. В чем разница между == и ===?
4.7. Расскажите про AJAX.
4.8. В чем разница между null и undefined?
4.9. Опишите принцип работы прототипирования в JavaScript.
4.10. Как поменять местами две переменные без использования третьей и арифметических операций?
4.11. В чем отличие .forEach() от .map()?
4.12. Чему будет равно
a
после исполнения следующего кода:
var a; a=!!a;
4.13. Каким способом можно минифицировать код?
4.14. Какое значение будет выведено?
alert('Hello World!'.split('').reverse().join(''));
4.15. Что будет выведено на экран?
var a = 'Hello';
(function () {
var b = 'World!';
alert(a+b);
})();
alert(a+b);
4.16. В чем различие?
var a = function() {}
от
function a()
4.17. Что будет выведено на экран?
function A() {this.b = 'Cde';}
A.prototype = {getB: function() {return this.b}};
var a = new A();
A.prototype.getUpperB = function() {return this.b.toUpperCase(); };
alert(a.getUpperB());
4.18. Что будет выведено в консоль?
function A(a,b) {console.log(arguments);}
A(1,2,3);
4.19. Что выведет на экран данный пример?
alert((function f() {
function f() {return 1;}
return f();
function f() {return 2;}
})());
а если так?
alert((function f() {
function f() {return 1;}
return f();
var f = function () {return 2;}
})());
5. AngularJS
5.1. Чем AngularJs отличается от jQuery?
5.2. Как скрыть элемент при клике на него?
5.3. Опишите структуру Angular-приложения.
5.4. Для каких целей используется конструкция controllerAs?
5.5. Знакомы ли Вы с promise?
5.6. Как передать переменную из одного controller-а в другой?
5.7. Для чего следует использовать controller, а для чего directive?
5.8. В чем отличие между broadcast и emit?
5.9. Что выведет на экран данный пример?
<input type="text" ng-module="name">
<span>{{name}}</span>
а если так?
<input type="text" ng-module="name">
<span>{{::name}}</span>
5.10. Что выведет данный код?
angular.module('app', [])
.controller('SomeController', function() {
console.log($scope);
});
5.1. Что не так с данным кодом?
<span ng-init="name = 'SomeName'">{{::name}}</span>
В чем отличие между ngRoute и io.router?
5.1. Где Вы будете писать конфигурацию приложения?
5.1. Основное отличие между factory, service и provider?
6. Другое
6.1. Есть ли опыт работы с Git, NPM, Bower, Gulp, Webpack?
6.2. Знакомы ли вы с nodejs и Express?
6.3. Какие шаблонизаторы вы используете?
6.4. С какими IDE вы работали?
6.5. Как вы относитесь к PHP, Windows?
6.6. Знаком ли вам Scrum?
Литература для домашнего изучения
1 — angularjs.org (tutorial)
2 — angular UI-router
3 — angular UI-bootstrap
4 — почитать Хабр на тему сервисов ангулара (фабрики, провайдеры, директивы…
!!! вот в таком порядке…
комментарии (92)