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

Циклы в JavaScript: полный обзор функции Представьте, что нужно написать «Привет» ста друзьям подряд. Руки быстро устанут набирать одно и то же сообщение, а вот компьютер легко справится с таким заданием. Для этого существуют циклы — они позволяют выполнять повторяющиеся действия автоматически. Если вы уже имеете опыт в программировании, то, скорее всего, статья для вас покажется избыточной. Однако она может пригодиться, чтобы освежить знания. 👉 @frontendInterview

Intersection Observer Это браузерный API, который позволяет асинхронно отслеживать пересечение элемента с его родителем или областью видимости документа (viewport). В момент пересечения можно запустить какое-либо действие, например, подгрузить дополнительные посты в ленте новостей («бесконечный скролл») или сделать «ленивую» загрузку контента. С помощью этого инструмента можно создавать бесконечные ленты, как во многих популярных соцсетях, запускать красивые анимации, как на сайте Apple, и даже создавать необычные странички, как bertani.net. Исторически обнаружение видимости отдельного элемента или видимости двух элементов по отношению друг к другу было непростой задачей. Варианты решения задачи были ненадёжными и замедляли браузер из-за работы в основном потоке. Intersection Observer API работает асинхронно, что повышает производительность приложения. 👉 @frontendInterview

⚡️ИМБА-новость для инженеров, разработчиков и тестировщиков. ⌚️📱💻⌨️🖥🖨🕹 📡🔋💡⚙️🎁🎊 ✉️📨🗒📈📕 На Yandex Neuro Scale 2025 соберутся лучшие разрабы, тимлиды и архитекторы, чтобы обсудить главные тренды и вызовы IT-индустрии. В этом году: 🔅 7 треков; 🔅 50+ выступлений; 🔅 10+ интерактивных зон; 🔅 главные анонсы: в ИИ, инфраструктуре, работе с данными, безопасности и DevOps. Регистрируемся и запоминаем дату и адрес: 24 сентября, Москва, бизнес-центр «Амальтея», Большой бульвар, 40.

👉 @frontendInterview

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

​Где заканчивается js, а где начинается DOM? JS заканчивается там, где он перестает быть просто набором инструкций и начинает манипулировать DOM, т.е. когда скрипт обращается к элементам страницы (например, через document.getElementById), он начинает взаимодействовать с DOM для изменения структуры, стилей или содержимого веб-страницы. JavaScript Используется для создания динамических и интерактивных веб-страниц. Он работает в браузере и на сервере (с помощью Node.js). JavaScript сам по себе не имеет знаний о веб-странице или ее структуре. Он предоставляет синтаксис и базовые возможности для выполнения вычислений, обработки данных, работы с объектами и функциями. Основные возможности: Управление переменными и типами данных: Объявление переменных (var, let, const). Работа с различными типами данных (строки, числа, объекты, массивы). Управление потоком: Условные операторы (if, else, switch). Циклы (for, while, do-while). Работа с функциями: Объявление и вызов функций. Работа с анонимными и стрелочными функциями. Объектно-ориентированное программирование: Создание объектов и классов. Наследование и полиморфизм. DOM (Document Object Model) Это программный интерфейс для веб-документов. Он представляет структуру HTML-документа как дерево объектов, которые могут быть изменены скриптами (например, JavaScript). DOM позволяет JavaScript взаимодействовать с HTML-страницей: изменять элементы, стили, атрибуты и содержимое страницы. Основные возможности: Доступ к элементам: Получение элементов по идентификатору(document.getElementById), классу(document.getElementsByClassName), тегу(document.getElementsByTagName), селектору(document.querySelector, document.querySelectorAll). Изменение структуры документа: Создание новых элементов (document.createElement). Добавление и удаление элементов (appendChild, removeChild). Изменение содержимого и атрибутов: Изменение текста и HTML-содержимого (element.textContent, element.innerHTML). Управление атрибутами (element.setAttribute, element.getAttribute). События: Добавление обработчиков событий (element.addEventListener). Создание и отправка пользовательских событий. Примеры Изменение содержимого элемента:

<!DOCTYPE html>
<html>
<head>
    <title>Пример DOM</title>
</head>
<body>
    <div id="myDiv">Исходный текст</div>
    <button onclick="changeText()">Изменить текст</button>

    <script>
        function changeText() {
            // Получение элемента DOM
            const myDiv = document.getElementById('myDiv');
            // Изменение содержимого элемента
            myDiv.textContent = 'Измененный текст';
        }
    </script>
</body>
</html>

Создание и добавление нового элемента:

<!DOCTYPE html>
<html>
<head>
    <title>Пример добавления элемента</title>
</head>
<body>
    <button onclick="addElement()">Добавить элемент</button>

    <script>
        function addElement() {
            // Создание нового элемента
            const newElement = document.createElement('p');
            newElement.textContent = 'Новый параграф';

            // Добавление нового элемента в DOM
            document.body.appendChild(newElement);
        }
    </script>
</body>
</html>

Граница JavaScript — это язык программирования, который предоставляет базовые возможности для работы с данными и логикой. DOM — это интерфейс, который предоставляет структуру HTML-документа и позволяет JavaScript взаимодействовать с этой структурой. 👉 @frontendInterview

В канале Selectel Newsfeed новые бесплатные курсы! Наши бесплатные курсы для специалистов всех уровней помогут разобраться в темах быстро, структурно и последовательно. Вступайте в сообщество IT-специалистов в Telegram от Selectel и развивайте новые навыки📚 Смотреть #реклама 16+ О рекламодателе

Clock Часы показывают h часов, m минут и s секунд после полуночи. Ваша задача - написать функцию, которая возвращает время с полуночи в миллисекундах. Пример:

h = 0
m = 1
s = 1
result = 61000

👉 @frontendInterview

Modern Full-Stack Development: Using TypeScript, React, Node.js, Webpack, Python, Django, and Docker, 2nd Edition Изучите, что могут предложить React, Node, Python, Django, TypeScript, Webpack и Docker по отдельности, и как они все вместе подходят для разработки современных приложений. Вы начнете с создания прочного фундамента знаний и быстро расширите его, создав три различных реальных приложения. Это не просто простые, надуманные примеры, а реальные приложения, которые вы можете установить на свои серверы и использовать в реальных условиях. 👉 @frontendInterview

Блочная модель Каждый элемент на веб-странице — это прямоугольник, к которому во время отрисовки браузеры применяют CSS-свойства. Чтобы конечные размеры элементов не были для вас сюрпризом и вы точно понимали, из чего они складываются, нужно разобраться с одной из основных концепций вёрстки — блочной моделью. Блочная модель, она же box model — это алгоритм расчёта размеров каждого отдельного элемента на странице, которым браузеры пользуются при отрисовке. Блочная модель состоит из нескольких CSS-свойств, влияющих на размеры элемента: - width — ширина элемента; - height — высота элемента; - padding — внутренние отступы от контента до краёв элемента; - border — рамка, идущая по краю элемента; - margin — внешние отступы вокруг элемента. 👉 @frontendInterview

Легко и непринужденно эта задача теперь твоя 👉 @frontendInterview

Ищу желающих заполнять карточки товаров на ВБ! Работа полностью на удаленке с зп до150 000 рублей в месяц. Без опыта, нужен только телефон, занятость 3-6 часов в день. Всему обучат на бесплатном курсе и после возьму на работу: ✅ 3 дня уроков по 30 минут ✅ Домашки с проверкой и оплатой бонусами ✅ Плачу 10 тыс за каждую выполненную домашку Все кто пройдет курс, получат сертификат от школы с образовательной лицензией. ⚡ Набор заканчивается завтра. 👍 Для регистрации жмите кнопку "Зарегистрироваться" Зарегистрироваться #реклама 16+ course.wildmanager.ru О рекламодателе

Улучшаем JavaScript-код с помощью стрелочных функций В этой статье расскажу, как стрелочные функции помогают сокращать записи функций, делают код визуально чище и как использовать их без потери смысла. Также покажу, чем обычные функции проигрывают стрелочным и почему одно нельзя заменить другим. 👉 @frontendInterview

👩‍💻 Всем программистам посвящается! Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Frontend — t.me/frontend_ready 📱 JavaScript — t.me/javascript_ready 👩‍💻 Backend — t.me/backend_ready 📱 GitHub & Git — t.me/github_ready 👩‍💻 Python — t.me/python_ready 🤔 InfoSec & Хакинг — t.me/hacking_ready 🖥 SQL & Базы Данных — t.me/sql_ready 🤖 Нейросети — t.me/neuro_ready 👩‍💻 C/C++ — https://t.me/cpp_ready 👩‍💻 C# & Unity — t.me/csharp_ready 👩‍💻 Java — t.me/java_ready 👩‍💻 Linux — t.me/linux_ready 🖼️ DevOps — t.me/devops_ready 📖 IT Книги — t.me/books_ready 👩‍💻 Весь IT — t.me/it_ready 👩‍💻 Bash & Shell — t.me/bash_ready 🖥 Design — t.me/design_ready 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

REKONFA Live 6 ноября приглашаем всех, кто имеет отношение к маркетингу и рекламным технологиям, обсудить рынок, тренды, вызовы и их решения. С докладами на актуальные темы выступят лидеры индустрии и медийные спикеры. Принять участие можно офлайн и онлайн. Мероприятие бесплатное, нужно только зарегистрироваться. Зарегистрироваться #реклама 18+ ya.rekonfa.ru О рекламодателе

Как получить информацию о браузере пользователя? Свойство window.navigator возвращает объект описания приложения (user agent), которое выполняет скрипт. В подавляющем большинстве случаев это приложение — браузер. Объект содержит свойства, описывающие браузер, и методы для выполнения действий. Часто используемые свойства: - userAgent возвращает строку, которая содержит название браузера. navigator.userAgent // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:93.0) Gecko/20100101 Firefox/93.0" - language возвращает предпочитаемый язык интерфейса в виде языкового тега. - languages возвращает массив предпочитаемых языков в порядке предпочтительности. Первый в списке будет язык, который возвращает navigator.language. navigator.language // "ru" navigator.languages // ["ru", "en-US", "es-ES"] - cookieEnabled возвращает true, если браузер пользователя поддерживает куки и они включены, false в противном случае. 👉 @frontendInterview

Замыкания в JavaScript Замыкание в JavaScript - это комбинация функции и лексического окружения, в котором она была определена. Это позволяет ей обращаться к переменным и функциям этого лексического окружения в дальнейшем. В следующем примере мы определяем функцию makeCounter(), которая фактически является фабричной функцией. При вызове она возвращает дочернюю функцию, которая имеет доступ к лексическому окружению внешней функции, то-есть функции makeCounter(). Таким образом, возвращаемая функция запоминает переменную counter и в последующем изменяет ее значение. function makeCounter(initial = 0) { let counter = initial; return function() { return counter += 1; } } const counterA = makeCounter(0); console.log(counterA()); // 1 console.log(counterA()); // 2 const counterB = makeCounter(100); console.log(counterB()); // 101 console.log(counterB()); // 102 👉 @frontendInterview