Frontend Interview - собеседования по Javascript / Html / Css

👉 @frontendInterview

Кошачьи и собачьи года У меня есть кошка и собака. Они родились humanYears тому назад. Напишите функцию, которая сконвертирует humanYears в catYears и dogYears. Правила конвертации: Cat Years: 15 cat years в первый год +9 cat years во второй год +4 cat years в каждый последующий год Dog Years 15 dog years в первый год +9 dog years во второй год +5 dog years в каждый последующий год 👉 @frontendInterview

В чём разница между методом Object.freeze() и ключевым словом const? Ключевое слово const и метод Object.freeze() — это совершенно разные вещи. Ключевое слово const применяется к привязкам (к «переменным»). Оно создаёт иммутабельную привязку, то есть — к переменной (константе), объявленной с помощью const, нельзя привязать что-то новое. Константе нельзя присвоить новое значение.

 const person = {
     name: "Leonardo"
 };
 let animal = {
     species: "snake"
 };
 person = animal; // Uncaught TypeError: Assignment to constant variable.

Метод Object.freeze() работает со значениями. А точнее — с объектными значениями. Он делает объект иммутабельным, что защищает от изменений значения свойств этого объекта.

 let person = {
     name: "Leonardo"
 };
 Object.freeze(person);
 person.name = "Lima"; // Uncaught TypeError: Cannot assign to read only property 'name' of object
 console.log(person);

Обратите внимание на то, что сообщение об ошибке выводится в строгом режиме. В обычном режиме операция просто не сраб

👉 @frontendInterview

Для чего обычно используются анонимные функции? Анонимные функции используются при создании IIFE — конструкций, переменные, объявленные в которых, не загрязняют глобальную область видимости.

 (function() {
   // Какой-то код.
 })();

Анонимные функции применяют в качестве функций обратного вызова, которые используются лишь в одном месте программы. Код будет выглядеть более самодостаточным и читабельным в том случае, если коллбэк будет объявлен прямо в том месте, где он используется. Это избавляет от необходимости просматривать код в поиске тела функции.

 setTimeout(function() {
   console.log('Hello world!');
 }, 1000);

Анонимные функции удобно использовать в конструкциях, характерных для функционального стиля программирования, или при работе с библиотеками вроде Lodash (этот вариант их использования похож на их применение в качестве коллбэков). const arr = [1, 2, 3]; const double = arr.map(function(el) { return el * 2; }); console.log(double); // [2, 4, 6]

Думаешь написать игру на чистом JavaScript — это сложно? Сделаешь это самостоятельно за 4 дня, если будешь выполнять все задания. С 22 по 25 июня проводим интенсив, на котором сможешь вдоволь попрактиковаться и написать свою игру “гоночки”. Программа интенсива: ✅ 1 День — Пройдем основы JS (переменные, типы данных, условия) — Сделаем игровое поле и машину — Поработаем с DOM (получение элементов со страницы, события мыши и клавиатуры) ✅ 2 День — Создадим дорогу и научим автомобиль перемещаться по полосам — Изучим циклы, forEach ✅ 3 День — Реализуем остальные машины, которые будут ехать по дороге — Познакомимся с методом getBoundingClientRect, который позволит нам реализовать столкновения — Добавим немного косметики ✅ 4 день — Бонусный урок Жми на ссылку и получи приглашение: https://telegram.me/gloacademy_bot?start=60cedbedc1de7e9e35e69bce

Графика на JavaScript В этой книге рассказывается, как, работая с JavaScript, jQuery, DHTML и элементом Canvas (холст), появившимся в HTML5, создавать насыщенные веб-приложения для ПК и мобильных устройств. С появлением HTML5 и усовершенствованной браузерной поддержки язык JavaScript стал исключительно удобным для создания высокопроизводительной веб-графики. Опытный веб-разработчик, прочитав данное издание, на практических примерах изучит интересные и полезные подходы к созданию аркадных игр, эффектов DHTML и т. д. Сложные темы представлены в книге в виде легких для усвоения фрагментов. 👉 @frontendInterview

Четные, умноженные на последний Вам дан массив чисел. Напишите функцию, которая вернет сумму чисел с четными индексами умноженные на число с последним индексом. Пример: evenLast([2, 3, 4, 5]) => 30 👉 @frontendInterview

Software Development From A to Z (2018) Прочитав данное руководство, вы научитесь понимать общую картину процесса разработки программного обеспечения. Эта книга проведет вас через весь процесс создания приложений, от самых основ до готового продукта: обзор бэкэнд разработки - от баз данных до протоколов связи, включая практические навыки программирования в Java, и обзор фронтенд разработки - от HTML до CSS и Vue.js. Также вы освоите тестирование с использованием Selenium. 👉 @frontendInterview

👉 @frontendInterview

​В чём разница между ES6-классами и конструкторами функций? Сначала рассмотрим примеры. Функция-конструктор:

 function Person(name) {
   this.name = name;
 }

ES6-класс:

 class Person {
   constructor(name) {
     this.name = name;
   }
 }

Если речь идёт о создании простых объектов, то конструкторы и классы, используемые для этой цели, выглядят очень похоже. Основная разница между конструкторами и классами проявляется при использовании наследования. Если нам нужно создать класс Student, являющийся подклассом класса Person, и добавить к этому новому классу поле studentId, то вот как будет выглядеть код, в котором используются конструкторы, и код, в котором применяются классы. Функция-конструктор:

 function Student(name, studentId) {
  // Вызываем конструктор суперкласса для инициализации полей, унаследованных от него.
   Person.call(this, name);

  // Инициализация собственных полей объекта.
   this.studentId = studentId;
 }

 Student.prototype = Object.create(Person.prototype);
 Student.prototype.constructor = Student;

ES6-класс: class Student extends Person { constructor(name, studentId) { super(name); this.studentId = studentId; } } 👉 @frontendInterview

Хотите освоить фронтенд-разработку? Начните 24 июня с demo-занятия «Создание интерактивных страниц, работа с анимациями»! Вместе с преподавателем Эржаном Торокуловым вы рассмотрите способы создания интерактивных страниц, научитесь анимировать переходы состояний HTML элементов, а также создадите анимации как на CSS, так и на JavaScript. Для регистрации на вебинар оставьте заявку 👉 https://otus.pw/Nnem/

👉 @frontendInterview

​Когда следует использовать стрелочные функции, которые появились в ES6? Вот простые правила по использованию различных способов объявления функций, которыми я руководствуюсь, разрабатывая код для сред, поддерживающих стандарт ES6 и более новые стандарты: 1. Используйте ключевое слово function в глобальной области видимости и для свойств Object.prototype. 2. Используйте ключевое слово function для конструкторов объектов. В остальных случаях используйте стрелочные функции. Как видите, стрелочные функции рекомендуется использовать практически везде. У такого положения дел есть несколько причин: 1. Удобная работа с контекстом. Стрелочные функции используют значение this окружающего контекста, не имея собственного this. Если такие функции применяются последовательно, без использования обычных функций в сложных конструкциях, это обеспечивает безопасную работу с контекстом. 2. Компактность. Код стрелочных функций легче вводить и легче читать. Возможно, это преимущество стрелочных функций перед обычными покажется вам спорным и зависящим от точки зрения каждого конкретного разработчика. 3. Ясность кода. Если практически весь код представлен стрелочными функциями, любая обычная функция выделяется в таком коде тем, что создаёт собственный контекст. Применяя стрелочные функции, программист создаёт более понятный код, в котором легче, чем в коде без стрелочных функций, работать с this. 👉 @frontendInterview