JavaScript : Вопрос 1 : 17

Что такое 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 

Что такое 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 

Что такое глобальные переменные ? Как они создаются ? Какие проблемы связаны с использованием глобальных переменных?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Глобальная переменная - переменная, которая доступна (видима) во всем документе, в отличии от локальной (ограничена рамками блока программного кода, внутри которого она определена) 

Пример:

var myvar = 5; 
function myFunction(){ 
   alert(myvar); // 5 
} 


Большинство JavaScript разработчиков избегает использования глобальных переменных. Одна из причин - возможный конфликт имен глобальных и локальных переменных. Так же код использующий глобальные переменные может быть тяжелее сопровождать и тестировать.

Что такое глобальные переменные ? Как они создаются ? Какие проблемы связаны с использованием глобальных переменных?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Глобальная переменная - переменная, которая доступна (видима) во всем документе, в отличии от локальной (ограничена рамками блока программного кода, внутри которого она определена) 

Пример:

var myvar = 5; 
function myFunction(){ 
   alert(myvar); // 5 
} 


Большинство JavaScript разработчиков избегает использования глобальных переменных. Одна из причин - возможный конфликт имен глобальных и локальных переменных. Так же код использующий глобальные переменные может быть тяжелее сопровождать и тестировать.

Что находится в this в следующем фрагменте кода:

function test() { 
  this; 
} 
test(); 

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

В приведенном коде значением this будет window. Механизм определения this в данном случае описывается стандартом ECMA-262, русский перевод 3 редакции которого можно увидеть на javascript.ru: javascript.ru/ecma/part11#a-11.2.3

Упрощенно говоря, чему будет равно this в функции определяется в месте ее вызова. Выражение вызова функции состоит из двух частей

1 выражение, результатом которого должна быть функция; назовем это подвыражением;

2 список аргументов для передачи в функцию.

Нотация — подвыражение(аргументы)

Вид этого подвыражения и определяет, чем будет this внутри функции. Если в этом подвыражении происходит обращение к полю объекта, то этот объект становится this (грубо говоря, мы вызываем поле объекта как функцию). Пример:

var object = {
    val: 'hi!',
    method: function(){ return this.val; }
};
object.method(); //вернет строку "hi!" 

//или аналогично
({
    val: 'hi!',
    method: function(){ return this.val; }
}).method() //вернет строку "hi!" 

В данном примере (в обоих случаях) функция была вызвана как член объекта, поэтому в качестве this в функцию method был передан именно этот объект. Как следствие, функция вернула заданное нами значения поля val.

Когда же функция вызывается не как член объекта, в функцию в качестве this передается значение undefined. А перед началом выполнения функции значения null и undefinedзаменяются на глобальный объект (window в браузерах). Пример:

function func() {
    return this.prop;
} 

window.prop = "Я - дитя window";
var obj = {prop: "Я - дитя obj"};
obj.func = func; 

func(); //вернет строку "Я - дитя window"
obj.func(); //вернет строку "Я - дитя obj" 

Кроме вызова функции как члена объекта, задать для функции значение this можно с использованием методов apply и call, которыми обладают (а точнее — наследуют от своего прототипа) все функции. Для этого нужно передать одной из этих функций первым аргументом объект, который должен стать this. Немного измененный предыдущий пример:

function func() {
    return this.prop;
} 

window.prop = "Я - дитя window";
var obj = {prop: "Я - дитя obj"};
obj.func = func;
var undefined; 

func(); //вернет строку "Я - дитя window"
func.call(null); //вернет строку "Я - дитя window"
func.call(); //вернет строку "Я - дитя window"
func.call(undefined); //вернет строку "Я - дитя window" 

func.apply(obj); //вернет строку "Я - дитя obj"
func.call(obj); //вернет строку "Я - дитя obj" 

Разницу между apply и call можно выяснить в уже упомянутом переводе стандарта на javascript.ru: http://javascript.ru/ecma/part15#a-15.3.4.3 Если кратко, то call передает функции в качестве ее аргументов свои, начиная со второго. Функция же apply передает в качестве аргументов функции элементы своего второго аргумента, который должен быть массивом (или объектом аргументов — см. javascript.ru: javascript.ru/ecma/part10#a-10.1.8 ).

Также следует отметить, что при использовании режима выполнения кода strict (он был введен в ECMAScript версии 5), передача функции undefined или null в качестве this больше не приводит к тому, что значением this автоматически становится глобальный объект (в браузерах — это window). В этом режиме this остается при своем прежнем значении — undefined (если передано значение undefined или не передано ничего) или null (если передано значение null). Пример:

function func() {
    'use strict';
    return this;
} 

window.func(); //вернет window
func(); //вернет значение undefined
func.call();  //вернет значение undefined
func.call(null); //вернет значение null 

var undefined;
func.call(undefined); //вернет undefined 

Подробнее о режимах можно прочитать на javascript.ru: es5.javascript.ru/x10.html#x10.1.1

О влиянии режима на определение значения this: es5.javascript.ru/x10.html#x10.4.3

Что находится в this в следующем фрагменте кода:

function test() { 
  this; 
} 
test(); 

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

В приведенном коде значением this будет window. Механизм определения this в данном случае описывается стандартом ECMA-262, русский перевод 3 редакции которого можно увидеть на javascript.ru: javascript.ru/ecma/part11#a-11.2.3

Упрощенно говоря, чему будет равно this в функции определяется в месте ее вызова. Выражение вызова функции состоит из двух частей

1 выражение, результатом которого должна быть функция; назовем это подвыражением;

2 список аргументов для передачи в функцию.

Нотация — подвыражение(аргументы)

Вид этого подвыражения и определяет, чем будет this внутри функции. Если в этом подвыражении происходит обращение к полю объекта, то этот объект становится this (грубо говоря, мы вызываем поле объекта как функцию). Пример:

var object = {
    val: 'hi!',
    method: function(){ return this.val; }
};
object.method(); //вернет строку "hi!" 

//или аналогично
({
    val: 'hi!',
    method: function(){ return this.val; }
}).method() //вернет строку "hi!" 

В данном примере (в обоих случаях) функция была вызвана как член объекта, поэтому в качестве this в функцию method был передан именно этот объект. Как следствие, функция вернула заданное нами значения поля val.

Когда же функция вызывается не как член объекта, в функцию в качестве this передается значение undefined. А перед началом выполнения функции значения null и undefinedзаменяются на глобальный объект (window в браузерах). Пример:

function func() {
    return this.prop;
} 

window.prop = "Я - дитя window";
var obj = {prop: "Я - дитя obj"};
obj.func = func; 

func(); //вернет строку "Я - дитя window"
obj.func(); //вернет строку "Я - дитя obj" 

Кроме вызова функции как члена объекта, задать для функции значение this можно с использованием методов apply и call, которыми обладают (а точнее — наследуют от своего прототипа) все функции. Для этого нужно передать одной из этих функций первым аргументом объект, который должен стать this. Немного измененный предыдущий пример:

function func() {
    return this.prop;
} 

window.prop = "Я - дитя window";
var obj = {prop: "Я - дитя obj"};
obj.func = func;
var undefined; 

func(); //вернет строку "Я - дитя window"
func.call(null); //вернет строку "Я - дитя window"
func.call(); //вернет строку "Я - дитя window"
func.call(undefined); //вернет строку "Я - дитя window" 

func.apply(obj); //вернет строку "Я - дитя obj"
func.call(obj); //вернет строку "Я - дитя obj" 

Разницу между apply и call можно выяснить в уже упомянутом переводе стандарта на javascript.ru: http://javascript.ru/ecma/part15#a-15.3.4.3 Если кратко, то call передает функции в качестве ее аргументов свои, начиная со второго. Функция же apply передает в качестве аргументов функции элементы своего второго аргумента, который должен быть массивом (или объектом аргументов — см. javascript.ru: javascript.ru/ecma/part10#a-10.1.8 ).

Также следует отметить, что при использовании режима выполнения кода strict (он был введен в ECMAScript версии 5), передача функции undefined или null в качестве this больше не приводит к тому, что значением this автоматически становится глобальный объект (в браузерах — это window). В этом режиме this остается при своем прежнем значении — undefined (если передано значение undefined или не передано ничего) или null (если передано значение null). Пример:

function func() {
    'use strict';
    return this;
} 

window.func(); //вернет window
func(); //вернет значение undefined
func.call();  //вернет значение undefined
func.call(null); //вернет значение null 

var undefined;
func.call(undefined); //вернет undefined 

Подробнее о режимах можно прочитать на javascript.ru: es5.javascript.ru/x10.html#x10.1.1

О влиянии режима на определение значения this: es5.javascript.ru/x10.html#x10.4.3

Перечислите и опишите новые методы класса Array, появившиеся в JavaScript 1.6:

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

indexOf(element[, from]) и lastIndexOf(element[, from]) находит в массиве первое вхождение element, начиная с индекса from, и возвращает его индекс, если такого элемента нет - возвратится -1. indexOf просматривает массив с индекса from до конца, lastIndexOf - наоборот, от индекса from к началу.

var m = [1, 1, 2, 2]; 
alert(m.indexOf(1)); // вернет 0 
alert(m.indexOf(1, 2)); // вернет -1 
alert(m.lastIndexOf(2)); // вернет 3 
alert(m.lastIndexOf(2, 1)); // вернет -1 




forEach(callback) выполняет функцию callback над каждым элементом массива.
map(callback) возвращает массив, составленный из результатов работы callback на каждом элементе исходного массива.

var a = [1, 2, 3]; 
var b = a.map(function(n) { return n * n; }); 
alert(b); // выведет 1,4,9 




filter(callback) возвращает только те элементы исходного массива, где функция callback возвратила true.
every(callback) возвращает true, если callback для всех элементов массива вернул true.
some(callback) возвращает true, если хотя бы для одного элемента массива callback вернул true.

var a = [1,0,2,3,0,0]; 
var is_zero = function(n) { return n == 0; } 
alert(a.some(is_zero)); // выведет true 
alert(a.filter(is_zero).every(is_zero)); // выведет true 

Перечислите и опишите новые методы класса Array, появившиеся в JavaScript 1.6:

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

indexOf(element[, from]) и lastIndexOf(element[, from]) находит в массиве первое вхождение element, начиная с индекса from, и возвращает его индекс, если такого элемента нет - возвратится -1. indexOf просматривает массив с индекса from до конца, lastIndexOf - наоборот, от индекса from к началу.

var m = [1, 1, 2, 2]; 
alert(m.indexOf(1)); // вернет 0 
alert(m.indexOf(1, 2)); // вернет -1 
alert(m.lastIndexOf(2)); // вернет 3 
alert(m.lastIndexOf(2, 1)); // вернет -1 




forEach(callback) выполняет функцию callback над каждым элементом массива.
map(callback) возвращает массив, составленный из результатов работы callback на каждом элементе исходного массива.

var a = [1, 2, 3]; 
var b = a.map(function(n) { return n * n; }); 
alert(b); // выведет 1,4,9 




filter(callback) возвращает только те элементы исходного массива, где функция callback возвратила true.
every(callback) возвращает true, если callback для всех элементов массива вернул true.
some(callback) возвращает true, если хотя бы для одного элемента массива callback вернул true.

var a = [1,0,2,3,0,0]; 
var is_zero = function(n) { return n == 0; } 
alert(a.some(is_zero)); // выведет true 
alert(a.filter(is_zero).every(is_zero)); // выведет true 

Что представляет собой механизм всплытия событий в JavaScript? Приведите пример.

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

После того, как событие сработает на элементе, оно также сработает на родителях, вверх по дереву DOM, если это событие нигде принудительно не прервут.

Приведу пример:

<div> первый
<div> второй
<div> третий</div>
</div>
</div>

Клик по div "третий" вызывает событие onclick сначала на элементе "третий", затем на элементе "второй" и в конце концов на элементе "первый". Это и называется всплытием, событие всплывает от самого вложенного элемента вверх через родителей. Так будет продолжаться пока не достигнем объект Document и затем Window. Всплытие реализовано во всех браузерах, включая IE.

Что представляет собой механизм всплытия событий в JavaScript? Приведите пример.

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

После того, как событие сработает на элементе, оно также сработает на родителях, вверх по дереву DOM, если это событие нигде принудительно не прервут.

Приведу пример:

<div> первый
<div> второй
<div> третий</div>
</div>
</div>

Клик по div "третий" вызывает событие onclick сначала на элементе "третий", затем на элементе "второй" и в конце концов на элементе "первый". Это и называется всплытием, событие всплывает от самого вложенного элемента вверх через родителей. Так будет продолжаться пока не достигнем объект Document и затем Window. Всплытие реализовано во всех браузерах, включая IE.

Почему использование ключевого слова var предпочтительно для создания переменной?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Почти все современные браузеры создают переменные для элементов, у которых есть id.
Если присвоить значение переменной с таким же именем что и id какого-либо элемента, то фактически это приведет к изменению уже существующей переменной, что может привести к ошибкам (например в IE < 9).
Используя var мы переопределяем переменную. Также необходимо использовать var в функциях, чтобы быть уверенным что мы не изменяем значение глобальной переменной, а создаем новую, другого контекста переменную.

Почему использование ключевого слова var предпочтительно для создания переменной?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Почти все современные браузеры создают переменные для элементов, у которых есть id.
Если присвоить значение переменной с таким же именем что и id какого-либо элемента, то фактически это приведет к изменению уже существующей переменной, что может привести к ошибкам (например в IE < 9).
Используя var мы переопределяем переменную. Также необходимо использовать var в функциях, чтобы быть уверенным что мы не изменяем значение глобальной переменной, а создаем новую, другого контекста переменную.

Возьмём следующий код:

var arr = [3, 4, 5]; 
for (var i in arr){ 
  console.log(i); 
} 

Что выведется в консоль? Какие могут с ним возникнуть проблемы?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

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 не безопасным.

Возьмём следующий код:

var arr = [3, 4, 5]; 
for (var i in arr){ 
  console.log(i); 
} 

Что выведется в консоль? Какие могут с ним возникнуть проблемы?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

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 не безопасным.

Что такое замыкания (closure) в JavaScript?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Простыми словами это внутренняя функция, т.е. функция в функции.
Замыканием (closure) называют потому, что после выполнения родительской или внешней функции, код внутренней все еще "живет" в интерпретаторе, и его можно выполнить. Ошибок не возникнет даже если внутренняя функция (замыкание) будет использовать переменные из внешней функции. 
Например, эту особенность можно использовать для создания функций обработчиков событий:

(function addHandler() { 
    var element = document.getElementById("element"); 
    element.onclick = function() { 
        alert("Привет из замыкания!"); 
    }; 
})(); 

Что такое замыкания (closure) в JavaScript?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Простыми словами это внутренняя функция, т.е. функция в функции.
Замыканием (closure) называют потому, что после выполнения родительской или внешней функции, код внутренней все еще "живет" в интерпретаторе, и его можно выполнить. Ошибок не возникнет даже если внутренняя функция (замыкание) будет использовать переменные из внешней функции. 
Например, эту особенность можно использовать для создания функций обработчиков событий:

(function addHandler() { 
    var element = document.getElementById("element"); 
    element.onclick = function() { 
        alert("Привет из замыкания!"); 
    }; 
})(); 

Сколько элементов будет в объектах elems1 и elems2 в результате выполнения этого кода и почему?

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Yandex</title> 
</head> 
<body> 
    <a href="((http://yandex.ru))">Яндекс</a>, 
    <a href="((http://yandex.com))">Yandex</a> 
</body> 
</html> 
 
 
var elems1 = document.getElementsByTagName('a'), 
    elems2 = document.querySelectorAll("a"); 
 
document.body.appendChild(document.createElement("a")); 
 
console.log(elems1.length, elems2.length); 

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

elems1.length == 3;
elems2.length == 2;
По сути оба метода представляют собой поиск элементов в документе. В данном случае ссылок. Однако метод getElementsByTagName() возвращает так называемую "живую коллекцию" элементов, т.е. при каждом вызове он снова выполняет поиск и в коллекцию добавляются элементы, которые появились в документе уже после присвоения.
Метод querySelectorAll() выполняет поиск единожды и, на момент присвоения, находит только два элемента "а". Если же выполнить поиск этим методом после создания нового элемента, querySelectorAll() вернет соответствующую истине коллекцию с тремя элементами.

Данный вопрос, входит в категорию тестовых вопросов компании Yandex, для соискателей на должность JavaScript-программиста.

Сколько элементов будет в объектах elems1 и elems2 в результате выполнения этого кода и почему?

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Yandex</title> 
</head> 
<body> 
    <a href="((http://yandex.ru))">Яндекс</a>, 
    <a href="((http://yandex.com))">Yandex</a> 
</body> 
</html> 
 
 
var elems1 = document.getElementsByTagName('a'), 
    elems2 = document.querySelectorAll("a"); 
 
document.body.appendChild(document.createElement("a")); 
 
console.log(elems1.length, elems2.length); 

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

elems1.length == 3;
elems2.length == 2;
По сути оба метода представляют собой поиск элементов в документе. В данном случае ссылок. Однако метод getElementsByTagName() возвращает так называемую "живую коллекцию" элементов, т.е. при каждом вызове он снова выполняет поиск и в коллекцию добавляются элементы, которые появились в документе уже после присвоения.
Метод querySelectorAll() выполняет поиск единожды и, на момент присвоения, находит только два элемента "а". Если же выполнить поиск этим методом после создания нового элемента, querySelectorAll() вернет соответствующую истине коллекцию с тремя элементами.

Данный вопрос, входит в категорию тестовых вопросов компании Yandex, для соискателей на должность JavaScript-программиста.

Как добавлять элементы на 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> 

Как добавлять элементы на 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> 

Расскажите в каких случаях используются данные методы и в чем их главное отличие?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Применение Function.call:

Методы массива для массивоподобных объектов например arguments:

arguments — массивоподобный объект
[code]function test () {
return [].join.call(arguments, '-');
}
test('one', 'two', 'three'); // 'one-two-three'[/code]

Применение Function.apply:

Для переписывания стандартных методов или чужих функций

[code]var _byId = document.getElementById;
document.getElementById = function () {
console.warn('"document.getElementById" +
'with arguments: ' +
[].join.call(arguments, ','));
return _byId.apply(this, arguments);
}[/code]

Итого: 

call принимает контекст( на какой объект ссылается оператор this в функции, внутри которой он вызван, например Math) и аргументы, разделенные запятой.

apply делает то же самое, но 2-ым аргументом может принимать массив или массиво-подобный объект.

[code]dd.call( this, 1, 2 ); // call принимает каждый аргумент индивидуально и меняет контекст[/code]

[code]add.apply( this, [ 1, 2 ] ); // apply принимает массив аргументов также меняя контекст[/code]

Расскажите в каких случаях используются данные методы и в чем их главное отличие?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Применение Function.call:

Методы массива для массивоподобных объектов например arguments:

arguments — массивоподобный объект
[code]function test () {
return [].join.call(arguments, '-');
}
test('one', 'two', 'three'); // 'one-two-three'[/code]

Применение Function.apply:

Для переписывания стандартных методов или чужих функций

[code]var _byId = document.getElementById;
document.getElementById = function () {
console.warn('"document.getElementById" +
'with arguments: ' +
[].join.call(arguments, ','));
return _byId.apply(this, arguments);
}[/code]

Итого: 

call принимает контекст( на какой объект ссылается оператор this в функции, внутри которой он вызван, например Math) и аргументы, разделенные запятой.

apply делает то же самое, но 2-ым аргументом может принимать массив или массиво-подобный объект.

[code]dd.call( this, 1, 2 ); // call принимает каждый аргумент индивидуально и меняет контекст[/code]

[code]add.apply( this, [ 1, 2 ] ); // apply принимает массив аргументов также меняя контекст[/code]

Когда при проверке несуществующего поля в каком-либо объекте на null будет выдано сообщение true ?

value = window.wiper;  
alert (value === null);  
alert (value == null);  
alert (value === undefined); 
alert (value == undefined); 

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Результатом будет
false
true
true
true

Так как поле wiper не объявлено в объекте window.
А оператор === проверяет более строго, учитывая тип переменной, который в данном случае undefined.

Когда при проверке несуществующего поля в каком-либо объекте на null будет выдано сообщение true ?

value = window.wiper;  
alert (value === null);  
alert (value == null);  
alert (value === undefined); 
alert (value == undefined); 

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Результатом будет
false
true
true
true

Так как поле wiper не объявлено в объекте window.
А оператор === проверяет более строго, учитывая тип переменной, который в данном случае undefined.

В чем разница между 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" 

В чем разница между 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" 

В чём различие свойств innerHTML и outerHTML?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Свойство любого DOM элемента innerHTML содержит HTML код, который находится внутри этого элемента. При установке нового значения этого свойства, внутренний HTML код рендерится браузером заново.
outerHTML почти аналогичен innerHTML, разница в том, что он возвращает полный HTML элемента.

Также, важно отметить, что innerHTML поддерживается всеми современными браузерами, а outerHTML поддерживается в IE (с некоторыми отличиями от остальных браузеров), в последних версиях Opera, и в браузерах на основе последних WebKit (Safari, Chrome), но не поддерживается в Firefox.

Для кода:

<div class='outer'> 
    <p class='inner'> 
    </p> 
</div> 


innerHTML возвратит:

<p class='inner'></p>

outerHTML возвратит:

<div class='outer'><p class='inner'></p></div>

В чём различие свойств innerHTML и outerHTML?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Свойство любого DOM элемента innerHTML содержит HTML код, который находится внутри этого элемента. При установке нового значения этого свойства, внутренний HTML код рендерится браузером заново.
outerHTML почти аналогичен innerHTML, разница в том, что он возвращает полный HTML элемента.

Также, важно отметить, что innerHTML поддерживается всеми современными браузерами, а outerHTML поддерживается в IE (с некоторыми отличиями от остальных браузеров), в последних версиях Opera, и в браузерах на основе последних WebKit (Safari, Chrome), но не поддерживается в Firefox.

Для кода:

<div class='outer'> 
    <p class='inner'> 
    </p> 
</div> 


innerHTML возвратит:

<p class='inner'></p>

outerHTML возвратит:

<div class='outer'><p class='inner'></p></div>

a(); //ok 
b(); //error 
 
var b = function(){ 
 alert( 'function b'); 
} 
 
function a(){ 
 alert( 'function a' ); 
} 

Почему вызов a(); происходит успешно, а вызов b(); выдает ошибку?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Функция а() инициализируется на этапе загрузки скрипта, как бы "всплывает вверх" а функция б инициализируется, когда объявляется переменная b

a(); //ok 
b(); //error 
 
var b = function(){ 
 alert( 'function b'); 
} 
 
function a(){ 
 alert( 'function a' ); 
} 

Почему вызов a(); происходит успешно, а вызов b(); выдает ошибку?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Функция а() инициализируется на этапе загрузки скрипта, как бы "всплывает вверх" а функция б инициализируется, когда объявляется переменная b

Какие языковые конструкции в 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 (ибо hoisting) 
                        //ReferenceError: i is not defined - такого не будет 
 
  for(var i  = 0; i < 2; i++){ 
    //do nothing 
  } 
 


Код в вопросе аналогичен следующему:

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 

Какие языковые конструкции в 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 (ибо hoisting) 
                        //ReferenceError: i is not defined - такого не будет 
 
  for(var i  = 0; i < 2; i++){ 
    //do nothing 
  } 
 


Код в вопросе аналогичен следующему:

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 

С помощью какой конструкции языка можно управлять потоком выполнения скрипта и отслеживать ошибки?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Это возможно с помощью конструкции try{}... catch{}

try { 
    var number = 9; 
    alert( number.toString(2) ); 
    // ... 
    alert('Выполнено без ошибок!'); 
} catch(e) { 
    alert('Ошибка!'); 
} 


Работает это так:
Выполняется код внутри блока try. Если в нём возникнет ошибка, то выполнение try прерывается, и управление прыгает в начало блока catch.

С помощью какой конструкции языка можно управлять потоком выполнения скрипта и отслеживать ошибки?

Уважаемые учащиеся ниже Вы сможете увидеть ответ, перед тем, как ответить, пожалуйста, постарайтесь написать для себя ответ на черновике, и только потом сравните наш ответ с Вашим: 

Верно ли наше решение?

Ответ:

Это возможно с помощью конструкции try{}... catch{}

try { 
    var number = 9; 
    alert( number.toString(2) ); 
    // ... 
    alert('Выполнено без ошибок!'); 
} catch(e) { 
    alert('Ошибка!'); 
} 


Работает это так:
Выполняется код внутри блока try. Если в нём возникнет ошибка, то выполнение try прерывается, и управление прыгает в начало блока catch.