Frontend | Вопросы собесов
Разбираем вопросы с собеседований на Frontend программиста. HTML, CSS, JavaScript, React, Angular, Vue js Сайт: https://easyoffer.ru/ Реклама: https://telega.in/c/easy_javascript_ru Написать: @easyoffer_adv
Mostrar más
Network:14 355
Suscriptores
+6024 horas
+1 0177 días
+3 06430 días
- Suscriptores
- Cobertura postal
- ER - ratio de compromiso
Carga de datos en curso...
Tasa de crecimiento de suscriptores
Carga de datos en curso...
Как добавить слушатель события ?
Спросят с вероятностью 7%
Добавление слушателя события — это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.
Почему это нужно?
Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее.
Как это используется?
Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.
1️⃣Чистый JavaScript
Для добавления слушателя события используется метод
addEventListener.
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Listener Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
alert('Button was clicked!');
});
</script>
</body>
</html>id и добавляем слушатель события click, который вызывает функцию, отображающую сообщение.
2️⃣React
Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.
Пример:
import React from 'react';
function App() {
const handleClick = () => {
alert('Button was clicked!');
};
return (
<div>
<button onClick={handleClick}>Click me</button>
</div>
);
}
export default App;handleClick и передаем её в атрибут onClick кнопки. Когда пользователь нажимает на кнопку, вызывается функция handleClick.
3️⃣jQuery
Если вы используете его, добавление слушателей событий также очень просто и удобно.
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Listener Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="myButton">Click me</button>
<script>
$(document).ready(function() {
$('#myButton').on('click', function() {
alert('Button was clicked!');
});
});
</script>
</body>
</html>click к кнопке.
Почему это удобно и важно:
✅Интерактивность: Позволяет создавать динамичные и отзывчивые интерфейсы.
✅Гибкость: Возможность реагировать на различные действия пользователей.
✅Удобство: В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.
Добавление слушателя события позволяет реагировать на действия пользователя и делает приложения интерактивными. В зависимости от технологии (чистый JavaScript, React или jQuery) процесс добавления слушателя может немного отличаться, но цель остается той же — улучшить взаимодействие пользователя с приложением.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых👍 3❤ 1
Photo unavailableShow in Telegram
📌 Составили список лучших каналов от действующих разработчиков:
Frontend Developer — советы и практики от действующего Senior-разработчика
Python Developer — готовый код и полезные ресурсы для любого питониста
Java Developer — секреты и тонкости программирования на Java
👍 1
Как изменяется контекст this в JavaScript при использовании стрелочной функции вместо обычной функции?Anonymous voting
- this всегда указывает на глобальный объект.
- this становится undefined.
- this наследуется от окружающего лексического контекста.
- this всегда указывает на объект, который вызвал функцию.
👍 12
00:13
Video unavailableShow in Telegram
Хватит терять время на уже готовый код!
Frontend Trends — библиотека фронтендера, где собраны готовые CodePen решения для ежедневных задач. Эффекты при наведении, 3D-анимации, готовые карточки и др.
Зашли – сохранили – применили в своём проекте. Пользуйтесь: @trends_frontend
1.53 MB
🔥 10👍 1
Как отрисовать компоненты на основе массива ?
Спросят с вероятностью 7%
В современных фреймворках, таких как React, отрисовка компонентов на основе массива данных — это стандартная задача. Она позволяет динамически создавать элементы интерфейса на основе данных, что делает код более гибким и адаптируемым к изменениям.
Почему это нужно?
Отрисовка компонентов на основе массива данных позволяет:
✅Динамически создавать и отображать элементы интерфейса.
✅Управлять отображением элементов на основе данных (например, список задач, карточки пользователей и т.д.).
✅Избегать дублирования кода, создавая компоненты в цикле.
Как это используется?
Для этого обычно используется метод массива
.map(), который перебирает массив данных и возвращает новый массив с JSX-элементами.
Пример:
1️⃣Подготовка данных:
Предположим, у нас есть массив объектов с данными пользователей:
const users = [
{ id: 1, name: 'Иван', age: 30 },
{ id: 2, name: 'Мария', age: 25 },
{ id: 3, name: 'Петр', age: 40 },
];User, который принимает данные пользователя через props:
function User({ name, age }) {
return (
<div>
<h2>{name}</h2>
<p>Возраст: {age}</p>
</div>
);
}.map() для создания списка компонентов User на основе массива users:
function UserList({ users }) {
return (
<div>
{users.map(user => (
<User key={user.id} name={user.name} age={user.age} />
))}
</div>
);
}key для каждого элемента списка, чтобы React мог оптимально управлять рендерингом этих элементов.
4️⃣Использование в основном компоненте:
Наконец, используем компонент UserList в основном компоненте приложения:
function App() {
return (
<div>
<h1>Список пользователей</h1>
<UserList users={users} />
</div>
);
}
export default App;users, и наш интерфейс автоматически обновится.
✅Читаемость: Код становится более структурированным и легче поддерживается.
✅Оптимизация: Использование ключей позволяет React эффективно обновлять элементы, минимизируя количество изменений в DOM.
Отрисовка компонентов на основе массива данных позволяет динамически создавать элементы интерфейса и улучшает читаемость и поддержку кода.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых👍 16❤ 3🔥 2😁 2👀 1
Photo unavailableShow in Telegram
Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает?
Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.
▪️ Как научиться отвлекаться от работы и отдыхать?
▪️ Как совместить кучу рабочих задач и время с семьей?
▪️ Как справиться с прокрастинацией?
▪️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
👨🏻💻 Псс. Заходите в закреп канала - там много полезного.
👍 2❤ 2🤔 2😁 1
В JavaScript, что происходит, если метод или свойство не найдено в объекте, но есть в его прототипе?Anonymous voting
- Происходит ошибка отсутствия свойства.
- Метод или свойство вызывается или возвращается из прототипа.
- Поиск продолжается в прототипе родительского объекта.
- Возвращается undefined.
👍 20❤ 1
Что такое интерполяция ?
Спросят с вероятностью 7%
Интерполяция — это метод вставки значений или выражений в строки. Она позволяет динамически встраивать переменные и выражения в текстовые строки, делая их более гибкими и удобными для использования. Например, интерполяция достигается с помощью шаблонных строк.
Почему это нужно?
Упрощает работу с текстом, который должен включать значения переменных или результаты вычислений. Без интерполяции, программистам пришлось бы вручную конкатенировать строки и переменные, что делает код менее читаемым и более сложным в поддержке.
Как это используется?
Для примера возьмём JavaScript и его шаблонные строки. Шаблонные строки заключаются в обратные кавычки (``) и позволяют включать выражения внутри них с помощью конструкции
${}.
Пример кода:
const name = 'Иван';
const age = 30;
const greeting = `Привет, меня зовут ${name} и мне ${age} лет.`;
console.log(greeting); // Вывод: Привет, меня зовут Иван и мне 30 лет.name и age интерполируются в строку greeting.
Как это работает и почему это удобно?
✅Читаемость: Шаблонные строки делают код более читабельным и понятным, так как видна вся строка целиком, без необходимости объединения отдельных частей.
✅Удобство: Позволяет легко включать значения переменных и результаты выражений в строку.
✅Избежание ошибок: Снижает вероятность ошибок, которые могут возникнуть при ручной конкатенации строк.
Шаблонные строки также поддерживают выполнение выражений внутри интерполяции:
const a = 5;
const b = 10;
const result = Сумма ${a} и ${b} равна ${a + b}.;
console.log(result); // Вывод: Сумма 5 и 10 равна 15.${}.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых👍 28❤ 1
Какой метод массива в JavaScript немедленно прерывает выполнение текущей операции и возвращает значение?Anonymous voting
- forEach
- map
- filter
- find
🤯 21👍 17
Что делает $emit ?
Спросят с вероятностью 7%
$emit — это метод, используемый для отправки событий из дочернего компонента в родительский компонент. Он позволяет дочернему компоненту уведомлять родительский компонент о том, что что-то произошло, передавая вместе с этим событием любые необходимые данные.
Как его использовать
1️⃣В дочернем компоненте:
✅Используйте метод
$emit, чтобы отправить событие.
✅Передайте имя события и любые данные, которые нужно передать родительскому компоненту.
2️⃣В родительском компоненте:
✅Слушайте это событие, используя директиву v-on или её сокращение @.
✅Обработайте событие в методе родительского компонента.
Дочерний компонент (ChildComponent.vue)
<template>
<button @click="notifyParent">Нажми меня</button>
</template>
<script>
export default {
methods: {
notifyParent() {
this.$emit('childClicked', 'Данные от дочернего компонента');
}
}
}
</script><template>
<div>
<h1>Родительский компонент</h1>
<child-component @childClicked="handleChildClick"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleChildClick(message) {
console.log('Событие от дочернего компонента:', message);
}
}
}
</script>@click, который вызывает метод notifyParent.
✅Метод notifyParent использует $emit для отправки события childClicked и передает строку 'Данные от дочернего компонента' в качестве данных.
2️⃣В родительском компоненте ParentComponent:
✅Мы добавили дочерний компонент <child-component> в шаблон и прослушиваем событие childClicked с помощью директивы @childClicked.
✅Когда событие childClicked происходит, вызывается метод handleChildClick, который принимает данные, переданные дочерним компонентом, и выводит их в консоль.
Почему это важно?
✅Коммуникация между компонентами: $emit позволяет организовать эффективную коммуникацию между компонентами, передавая данные и уведомления от дочернего компонента к родительскому.
✅Разделение обязанностей: С помощью событий можно поддерживать чистую и разделенную архитектуру, где каждый компонент отвечает только за свои задачи и уведомляет другие компоненты о произошедших изменениях через события.
✅Масштабируемость и поддерживаемость: Использование событий делает приложение более масштабируемым и поддерживаемым, так как компоненты остаются независимыми и могут повторно использоваться в разных частях приложения.
$emit используется для отправки событий из дочернего компонента в родительский, позволяя передавать данные и уведомления о произошедших изменениях.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых👍 11🤔 7🔥 2❤ 1
Elige un Plan Diferente
Tu plan actual sólo permite el análisis de 5 canales. Para obtener más, elige otro plan.