🚀 AI Интервью — умная программа для помощи на собеседованиях в Телемост, Google Meet, Zoom, Teams и на других платформах!

💎 Слушает, что говорит интервьюер
💎 Подсказывает правильные ответы в реальном времени, прямо во время разговора
💎 Интервьюер не видит окно с подсказками

Программа очень хорошо работает для собеседований на вакансии разработчика, архитектора, CTO и других. На любых языках.

Подпишитесь на канал AI Интервью и используйте программу на ближайшем собеседовании.

​Расскажи про области видимости

В JavaScript область видимости (scope) определяет доступность переменных, функций и объектов в разных частях кода. Это фундаментальная концепция, которая управляет тем, какие данные могут быть доступны или недоступны в различных частях программы.

Глобальная область видимости
Переменные и функции, объявленные вне любых функций или блоков, находятся в глобальной области видимости. Они доступны из любой части программы.

var globalVar = 'Я глобальная переменная';

function testFunction() {
  console.log(globalVar); // Доступно
}

testFunction();
console.log(globalVar); // Доступно

Функциональная область видимости
Переменные, объявленные с помощью var внутри функции, имеют область видимости, ограниченную этой функцией. Они недоступны за её пределами.

function testFunction() {
  var functionVar = 'Я внутри функции';
  console.log(functionVar); // Доступно
}

testFunction();
console.log(functionVar); // Ошибка: переменная functionVar недоступна

Блочная область видимости
Переменные, объявленные с помощью let и const, имеют область видимости, ограниченную ближайшим блоком {}.

if (true) {
  let blockVar = 'Я внутри блока';
  console.log(blockVar); // Доступно
}

console.log(blockVar); // Ошибка: переменная blockVar недоступна

Область видимости модуля (Module Scope)
При использовании модулей (например, import и export в ES6), все переменные и функции в модуле имеют собственную область видимости. Они не попадают в глобальную область видимости.

export const myVar = 'Я переменная из модуля';

import { myVar } from './module1.js';
console.log(myVar); // "Я переменная из модуля"

👉 @frontendInterview

👉 @frontendInterview

Вставка изображений в HTML

Картинки — важная часть веба. Они делают сайты визуально выразительными, помогают передать смысл, иллюстрируют текст и даже играют функциональную роль (например, иконки или изображения товаров). И у HTML есть сразу несколько способов вставки изображений.

👉 @frontendInterview

HTML- и CSS-советы для джуниор фронтенд-разработчиков

Я начинал изучать вёрстку в 2010 году. Я не знал английский, поэтому у меня был ограниченный набор материала. Кто помнит видеоуроки Попова?

Хорошо, что сейчас ситуация уже лучше. В целом можно найти очень классные статьи, видео и бесплатные курсы. Но и мне есть что сказать!

Я собрал несколько советов. По моей задумке, если вы обратите внимание на эти аспекты, то ваш код будет лучше.

Давайте посмотрим, что я вам подготовил.

👉 @frontendInterview

"Да, я развился в такой перспективной сфере как гуглить"

👉 @frontendInterview

​Объект пользовательского события CustomEvent

CustomEvent даёт возможность создавать пользовательские события с произвольным именем и дополнительной информацией. Их можно запускать вручную и отслеживать через стандартные механизмы событий.

Пример

const myCustomEvent = new CustomEvent('mycustomevent', {
  detail: {
    key: 'value'
  }
})

CustomEvent создаёт пользовательское (кастомное) событие. Оно даёт разработчику возможность самостоятельно определить, когда событие происходит, как называется и какие данные с ним передаются. Пригодится, когда стандартных DOM-событий (например, click или input) недостаточно для описания происходящего на странице.

CustomEvent похож на обычный Event. Основное отличие — CustomEvent позволяет передать дополнительные данные, а Event нет.

Отправить пользовательское событие можно с помощью dispatchEvent().

👉 @frontendInterview

Real-World Next.js: Build scalable, high-performance, and modern web applications using Next.js, the React framework for production

Next.js - это масштабируемый и высокопроизводительный фреймворк поверх React.js для современной веб-разработки, предоставляющий большой набор функций, таких как гибридный рендеринг, предварительная выборка маршрутов, автоматическая оптимизация изображений и интернационализация. Если вы хотите создать блог, сайт электронной коммерции или простой веб-сайт, эта книга покажет вам, как можно использовать многоцелевой фреймворк Next.js для создания впечатляющего пользовательского опыта.

👉 @frontendInterview

Spin Around, Touch the Ground

Вам дан массив, состоящий из строк "left" и "right". Каждая строка делает поворот на 90° в соответствующую сторону. Создайте функцию, которая вернет количество разворотов на 360°.

Примеры:

 ["left", "right", "left", "right"] ➞ 0

 ["right", "right", "right", "right", "right", "right", "right", "right"] ➞ 2

 ["left", "left", "left", "left"] ➞ 1

👉 @frontendInterview

​Опасности использования innerHTML в JavaScript

innerHTML – это свойство, которое позволяет вставлять HTML-код внутрь элемента как строку. Однако оно небезопасно и может привести к серьезным проблемам.

document.getElementById("content").innerHTML = "<h1>Привет!</h1>";

Уязвимость: XSS-атаки (внедрение вредоносного кода)
Если innerHTML получает данные от пользователя (например, из формы или URL), хакер может вставить вредоносный JavaScript-код.

const userInput = "<script>alert('Вас взломали!');</script>";
document.getElementById("content").innerHTML = userInput;

Проблемы с безопасностью CSP (Content Security Policy)
Если в веб-приложении включена CSP (защита от XSS), то innerHTML может нарушать политику безопасности.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

Случайное удаление обработчиков событий
Если заменить содержимое элемента через innerHTML, все обработчики событий внутри него удалятся.

document.getElementById("btn").addEventListener("click", () => {
  alert("Нажато!");
});

document.getElementById("container").innerHTML = "<button id='btn'>Клик</button>";
document.getElementById("btn").click(); // Ошибка, обработчик удален

👉 @frontendInterview