Frontend Interview - собеседования по Javascript / Html / Css
11.9K subscribers
2.07K photos
111 videos
313 files
511 links
Канал для подготовки к собеседованиям по фронтенду

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Менеджер по рекламе: @Spiral_Yuri

Купить рекламу: https://telega.in/c/frontendinterview

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
Блочная модель

Каждый элемент на веб-странице — это прямоугольник, к которому во время отрисовки браузеры применяют CSS-свойства. Чтобы конечные размеры элементов не были для вас сюрпризом и вы точно понимали, из чего они складываются, нужно разобраться с одной из основных концепций вёрстки — блочной моделью.

Блочная модель, она же box model — это алгоритм расчёта размеров каждого отдельного элемента на странице, которым браузеры пользуются при отрисовке.

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

👉 @frontendInterview
👍41
Modern Full-Stack Development: Using TypeScript, React, Node.js, Webpack, Python, Django, and Docker, 2nd Edition

Изучите, что могут предложить React, Node, Python, Django, TypeScript, Webpack и Docker по отдельности, и как они все вместе подходят для разработки современных приложений.
Вы начнете с создания прочного фундамента знаний и быстро расширите его, создав три различных реальных приложения. Это не просто простые, надуманные примеры, а реальные приложения, которые вы можете установить на свои серверы и использовать в реальных условиях.

👉 @frontendInterview
Clock

Часы показывают h часов, m минут и s секунд после полуночи.

Ваша задача - написать функцию, которая возвращает время с полуночи в миллисекундах.

Пример:
h = 0
m = 1
s = 1
result = 61000


👉 @frontendInterview
Где заканчивается 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
👍1
Что выведется в консоль?
Anonymous Quiz
57%
true
43%
false
⚡️ИМБА-новость для инженеров, разработчиков и тестировщиков.

⌚️📱💻⌨️🖥🖨🕹
📡🔋💡⚙️🎁🎊
✉️📨🗒📈📕

На Yandex Neuro Scale 2025 соберутся лучшие разрабы, тимлиды и архитекторы, чтобы обсудить главные тренды и вызовы IT-индустрии.

В этом году:
🔅 7 треков;
🔅 50+ выступлений;
🔅 10+ интерактивных зон;
🔅 главные анонсы: в ИИ, инфраструктуре, работе с данными, безопасности и DevOps.

Регистрируемся и запоминаем дату и адрес: 24 сентября, Москва, бизнес-центр «Амальтея», Большой бульвар, 40.
Please open Telegram to view this post
VIEW IN TELEGRAM