Первое, что всегда спрашивают, это опыт работы, поэтому если у вас нет опыта работы в front end и js рекомендуем поискать "подработку" вначале у нас на сайте и так же изучить типичные и возможные вопросы на собеседовании которые вам могут задать интервьюеры
Общие вопросы по front-end
- Методологии и подходы написания CSS?
- GruntJS,Gulp, Bower, npm — для чего используются?
- RequireJS (или подобные) — зачем нужны?
- Тестирование: какие библиотеки знаете для тестирования, что использовали на практике? (какие подводные камни были и тд)
- Как логировать JS ошибки с клиента, какие "подводные" камни?
- Какие фреймворки знаете/использовали на практике (если не использовали, то почему), как они устроены внутри.
- Паттерны проектирования
- Другие вопросы из области вёрстки (css, html)
Eсть ли разница между window и document?
Ответ: Да. У JavaScript есть глобальный объект и всё происходит через него. window – тот самый объект, который хранит глобальные переменные, функции, местоположение, историю. Всё находится внутри него, setTimeout, XMLHttpRequest, console и localStorage также являются частью window. Аналогично дело обстоит и с document, который является свойством объекта window и представляет DOM. Все ноды – это часть document, следовательно, вы можете использовать getElementById или addEventListener для document. Но обратите внимание, что этих методов нет в объекте window.
Вызываются ли document.onload и window.onload одновременно?
window.onload вызывается, когда DOM готов и весь контент, включая картинки, стили, фреймы и т.д. загружен. document.onload вызывается когда дерево DOM выстроено, но до момента, как подгружаются картинки, стили и пр.
Как предотвратить нажатие по ссылке?
Использовать preventDefault() внутри обработчика события.
Как остановить дальнейшее распространение события?
Вызвать event.stopPropagation();
Могу ли я удалить удалить обработчик события с элемента?
Да. target.removeEventListener(‘click’, handler)
Как я могу запустить обработчик в фазе захвата, а не в фазе всплытия?
В методах addEventListener и removeEventLister есть третий опциональный параметр. Вы можете установить его в true или false в зависимости от того хотите или нет использовать фазу захвата.
Каким образом можно предотвратить множественный вызов обработчика для одного события?
Если слушатель события прикреплён к одному и тому же типу (click, keydown, и т.д.) элемента, вы можете вызвать event.stopImmediatePropagation() в первом обработчике и другие не будут выполнены.
Самовызывающиеся функции.
Тоже весьма частый вопрос на собеседованиях. Ещё иногда подходят к этому со стороны jQuery: «Почему все плагины обособлены в конструкцию (function() {})();?».
Как поменять контекст функции. Частичное применение функции.
Тут нужно описать разницу между .call, .apply и .bind и некоторых стандартных решений на уровне языка.
Разница между операторами == и ===
Оператор == сравнивает на равенство, а вот === — на идентичность. Плюс оператора === состоит в том, что он не приводит два значения к одному типу. Именно из-за этого он обычно и используется.
Напишите регулярное выражение для проверки строк соответствующих формату даты dd.mm.yyyy. или подобное.
Каков будет результат выполнения следующего кода:
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 0);
}
Что вернет выражение +new Date()? Чем отличается от Date.now().
Отличный вопрос. Ответ в том, что +new Date(); создаст экземпляр объекта Date и благодаря + переведет его в числовой формат. Во втором случае вызовется статический метод конструктора, который является более приоритетным, т.к. во-первых он не требует создания экземпляра, а во-вторых является более понятным.
Напишите функцию принимающую строку с именем файла и возвращающую расширение (фрагмент после последней точки)
function getExtension(filename) {
var fragments = filename.split(".");
return fragments[fragments.length - 1];
}
В чём опасность использования for .. in для объекта или массива?
For..in итерируется по всем полям объекта [b]и его прототипов[/b] (т.е. проходит по всей цепочке прототипов).
В приведённом в вопросе коде проблем как таковых нет, но они могут появиться при использовании библиотек/полифиллов, которые переопределяют или создают новые свойства для прототипов стандартных конструкторов (таких как Array или Object).
var arr = [3, 4, 5];
Array.prototype.each = function() {/*some fancy polyfill*/};
for (var i in arr) {
console.log(i);
}
Выведет
0
1
2
each
Чтобы избежать таких проблем, можно воспользоваться методом
Object.prototype.hasOwnProperty.
Модифицированный пример, который работает корректно:
var arr = [3, 4, 5];
Array.prototype.each = function() {/*some fancy polyfill*/};
for (var i in arr) {
if (arr.hasOwnProperty(i)){
console.log(i);
}
}
Примечание:
Многие инструменты для статического анализа JavaScript кода считают for .. in без фильтрации с hasOwnProperty не безопасным.
Какие языковые конструкции в javascript создают scope? Что произойдет при выполнении следующего куска кода?
var a = 90100;
function someFunc(){
if(false){
var a = 1;
} else {
var b = 2;
}
console.log(b);
console.log(a); //(1)
}
someFunc();
В javascript только функции создают новый scope.
console.log(i) //i здесь уже будет undefined
for(var i = 0; i < 2; i++){
}
Код в вопросе аналогичен следующему:
var a = 90100;
function someFunc(){
var a;
var b;
if(false){
a = 1;
} else {
b = 2;
}
console.log(b);
console.log(a); //(1) переменную a переопределили в функции
}
someFunc();
Результат выполнения:
2
undefined
Что такое hoisting или "поднятие переменных"? Что произойдет при выполнении следующего куска кода?
myname = "global";
function func() {
console.log(myname);
var myname = "local";
console.log(myname);
}
func();
Интерпретатор JavaScript всегда перемещает («поднимает») объявления функций и переменных в начало области видимости (вверх текущего скрипта или функции). Код в вопросе аналогичен следующему:
myname = "global";
function func() {
var myname;
console.log(myname); // "undefined"
myname = "local";
console.log(myname); // "local"
}
func();
В консоль будет напечатано:
undefined
local
Как добавлять элементы на HTML страницу динамически ?
Создание новых элементов осуществляется с помощью document.createElement(tagName);
После создания элемента его нужно присоединить к родительскому элементу с помощью .appendChild(node);
Пример:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<script type="text/javascript">
function addNode() {
var newP = document.createElement("p");
var textNode = document.createTextNode(" I'm a new text node");
newP.appendChild(textNode);
document.getElementById("target").appendChild(newP);
}
</script>
</head>
<body onload="addNode();">
<p id="target">sart here<p>
</body>
</html>
В чем разница между Object.getOwnPropertyNames() и Object.keys()
Object.getOwnPropertyNames() возвращает перечислимые и не перечислимые свойства из объекта или массива.
var arr = ["a", "b", "c"];
print(Object.getOwnPropertyNames(arr).sort()); // prints "0,1,2,length"
// Array-like object
var obj = { 0: "a", 1: "b", 2: "c"};
print(Object.getOwnPropertyNames(obj).sort()); // prints "0,1,2"
Object.keys() возвращает перечислимые свойства из объекта или массива.
Пример:
var arr = ["a", "b", "c"];
alert(Object.keys(arr)); // will alert "0,1,2"
// array like object
var obj = { 0 : "a", 1 : "b", 2 : "c"};
alert(Object.keys(obj)); // will alert "0,1,2"
С помощью какой конструкции языка можно управлять потоком выполнения скрипта и отслеживать ошибки?
Это возможно с помощью конструкции try{}... catch{}
try {
var number = 9;
alert( number.toString(2) );
// ...
alert('Выполнено без ошибок!');
} catch(e) {
alert('Ошибка!');
}
Почему вызов a(); происходит успешно, а вызов b(); выдает ошибку?
a(); //ok
b(); //error
var b = function(){
alert( 'function b');
}
function a(){
alert( 'function a' );
}
Функция а() инициализируется на этапе загрузки скрипта, как бы "всплывает вверх" а функция б инициализируется, когда объявляется переменная b
Что такое глобальные переменные ? Как они создаются ? Какие проблемы связаны с использованием глобальных переменных?
Глобальная переменная - переменная, которая доступна (видима) во всем документе, в отличии от локальной (ограничена рамками блока программного кода, внутри которого она определена)
Пример:
var myvar = 5;
function myFunction(){
alert(myvar); // 5
}
Большинство JavaScript разработчиков избегает использования глобальных переменных. Одна из причин - возможный конфликт имен глобальных и локальных переменных. Так же код использующий глобальные переменные может быть тяжелее сопровождать и тестировать.
Что такое замыкания (closure) в JavaScript?
Простыми словами это внутренняя функция, т.е. функция в функции.
Замыканием (closure) называют потому, что после выполнения родительской или внешней функции, код внутренней все еще "живет" в интерпретаторе, и его можно выполнить. Ошибок не возникнет даже если внутренняя функция (замыкание) будет использовать переменные из внешней функции.
Например, эту особенность можно использовать для создания функций обработчиков событий:
(function addHandler() {
var element = document.getElementById("element");
element.onclick = function() {
alert("Привет из замыкания!");
};
})();
Вопросы, относящиеся к jQuery
Как создать утечку памяти с помощью jQuery?
var jqSelector = $("#selector"),
nativeSelector = document.getElementById("selector");
// Удаляем элемент "нативным" способом
nativeSelector.parentNode.removeChild(nativeSelector);
// Выводим закешированное значение селектора jQuery
console.log(jqSelector); // Привет, jQuery.cache!
jQuery.extend
Рассказать всё про функцию, возможно попросят написать аналог.
В чем различие между .get(), [], и .eq()?
В чем разница между .bind(), .live(), и.delegate()?
В чем разница между $ и$.fn? Или просто что такое $.fn.
#javascript #js #frontend #собеседованиенаработу #собеседование