23 April 2019

Тест на должность FrontEnd

CSSJavaScriptjQueryHTMLAngular
Доброе время суток, уважаемые коллеги. Решил поделиться своим вариантом теста, рожденный несколько лет назад нашим скромным коллективом и несколько раз перелопаченный им же. Тест рабочий и вполне актуальный, если сидеть напротив и слушать ответчика, направляя его мысли в нужную сторону и подсказывая всякие мелочи.

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 — почитать Хабр на тему сервисов ангулара (фабрики, провайдеры, директивы…

!!! вот в таком порядке…
Tags:собеседование вопросыfront-end
Hubs: CSS JavaScript jQuery HTML Angular
-64
17.5k 68
Comments 92
Top of the last 24 hours