Frontend собеседования – Telegram
Frontend собеседования
1.53K subscribers
383 photos
543 links
Подготовка к собеседованиям на позицию Frontend-разработчик

Еще больше ответов на сайте https://frontview-it.ru

JS собеседования - @frontview_js
Frontend работа - @frontview_vacancies
Все IT вакансии - @frontview_all_vacancies
Download Telegram
👩‍💻 Что такое never тип и когда он применяется?

Тип never в TypeScript представляет тип для значений, которые никогда не встречаются. Он используется в случаях, когда функция никогда не возвращает результат, например, всегда выбрасывает ошибку. Также never применим для обеспечения полной проверки исчерпывающих условий в конструкциях switch или if.

Пример использования функции, которая никогда ничего не возвращает:


function throwError(message: string): never {
throw new Error(message); // Эта функция всегда выбрасывает ошибку
}


Использование never для обеспечения полноты проверок:


type Animal = Fish | Bird;

function getAnimal(): Animal {
// Логика получения животного
}

function assertNever(x: never): never {
throw new Error("Unexpected object: " + x); // Обработка неучтенного случая
}

switch (getAnimal()) {
case "Fish":
// Обработка кейса
break;
case "Bird":
// Обработка кейса
break;
default:
assertNever(x); // Компилятор проверяет, все ли случаи обработаны
}


Использование типа never помогает повысить надежность кода, гарантируя, что все возможные варианты учтены, и предотвращает неожиданные состояния в приложении.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥1
👩‍💻 Для чего используются propTypes?

PropTypes в React используются для проверки типов передаваемых пропсов в компоненты (если в проекте не используется, например, TypeScript для типизации). Это инструмент для обеспечения корректного использования компонентов, позволяющий выявлять ошибки на этапе разработки.

Основные преимущества использования PropTypes:

- Валидация типов пропсов: гарантирует, что переданные пропсы соответствуют ожидаемым типам.
- Улучшение отладки: облегчает обнаружение и исправление ошибок при неправильном использовании компонентов.
- Документация компонентов: служит своеобразной документацией, показывая, какие пропсы ожидает компонент.

Пример использования PropTypes:


import PropTypes from 'prop-types';

function UserProfile({ username, age }) {
return (
<div>
<h1>{username}</h1>
<p>Age: {age}</p>
</div>
);
}

UserProfile.propTypes = {
username: PropTypes.string.isRequired, // Имя должно быть строкой и обязательно
age: PropTypes.number, // Возраст должен быть числом
};


В этом примере компонент UserProfile ожидает пропсы username и age. Если переданный username не будет строкой или отсутствовать, React выведет предупреждение в консоль.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13
👩‍💻 Для чего используется атрибут rel="noopener noreferrer"?

Атрибут rel="noopener noreferrer" используется в HTML для обеспечения безопасности при открытии ссылок в новых вкладках с помощью target="_blank".

Зачем нужен noopener:

Когда ссылка открывается с target="_blank", новая страница получает доступ к объекту window.opener, что позволяет ей изменять оригинальную страницу через JavaScript. Это может привести к фишинговым атакам или другим уязвимостям. Атрибут noopener предотвращает доступ новой страницы к window.opener, защищая исходный сайт.

Зачем нужен noreferrer:

Атрибут noreferrer дополнительно блокирует передачу информации о реферере (URL исходной страницы) на новую страницу. Это улучшает конфиденциальность пользователя и предотвращает утечку данных о источнике перехода.

Пример использования:


<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Посетить Example.com
</a>


В этом примере ссылка открывается в новой вкладке без предоставления доступа к window.opener и без передачи реферера. Это стандартная практика для повышения безопасности веб-приложений и предотвращения потенциальных атак через внешние ссылки.

Использование rel="noopener noreferrer" является важным аспектом безопасной разработки веб-приложений, особенно при работе с внешними ресурсами.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15
👩‍💻 Что такое CSS Grid и какие задачи он решает?

CSS Grid — это модуль компоновки в CSS, позволяющий создавать сложные 2D макеты веб-страниц. Он обеспечивает гибкость и контроль над размещением элементов как по строкам, так и по колонкам, что значительно упрощает процесс разработки интерфейсов.

Основные задачи, которые решает CSS Grid:

- Создание адаптивных макетов: позволяет легко адаптировать дизайн под разные размеры экранов без сложных медиазапросов.
- Организация контента: упрощает распределение элементов в сетку, обеспечивая четкое и структурированное размещение.
- Улучшение семантики кода: делает код более читаемым и поддерживаемым за счет декларативного описания макета.

Пример использования CSS Grid:


.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Создание трех колонок одинаковой ширины */
grid-gap: 20px; /* Промежуток между элементами */
}

.item {
background-color: #f0f0f0;
padding: 10px;
}


В этом примере контейнер определен как сетка с тремя равными колонками и промежутками между элементами. Каждый элемент внутри контейнера будет автоматически располагаться согласно заданной сетке.

CSS Grid значительно упрощает создание сложных и адаптивных макетов, делая процесс разработки более эффективным и организованным.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
👩‍💻 Как использовать generics (обобщенные типы)?

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

Преимущества использования Generics:

- Повторное использование кода: позволяет писать универсальные функции и классы, которые работают с любыми типами.
- Типовая безопасность: обеспечивает проверку типов во время компиляции, предотвращая ошибки.
- Улучшенная читаемость и поддержка кода: делает намерения разработчика явными, облегчая понимание кода.

Пример использования Generics:


// Функция, возвращающая переданный аргумент
function identity<T>(arg: T): T {
return arg; // Возвращает аргумент того же типа
}

// Использование функции с различными типами
const num = identity<number>(42); // Тип number
const str = identity<string>("Hello"); // Тип string

// Generic интерфейс
interface GenericBox<T> {
value: T; // Значение типа T
}

const box: GenericBox<string> = { value: "Box content" }; // Тип string


В этом примере функция identity использует обобщенный тип T, позволяя ей возвращать значение того же типа, что и аргумент. Интерфейс GenericBox демонстрирует, как можно создавать обобщенные структуры данных. Generics значительно улучшают гибкость и надежность кода, делая его более адаптируемым к различным сценариям использования.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
👩‍💻 Что такое форма в React?

Форма в React представляет собой средство сбора пользовательского ввода, управляемого компонентами React. В отличие от стандартных HTML-форм, React позволяет более гибко контролировать состояние и поведение формы, что улучшает взаимодействие пользователя с приложением.

Контролируемые компоненты:

В контролируемых компонентах состояние формы хранится в состоянии компонента React. Это позволяет легко отслеживать и валидировать ввод.


import React, { useState } from 'react';

function MyForm() {
const [value, setValue] = useState('');

const handleChange = (e) => {
setValue(e.target.value); // Обновление состояния при изменении ввода
};

const handleSubmit = (e) => {
e.preventDefault();
console.log(value); // Обработка отправки формы
};

return (
<form onSubmit={handleSubmit}>
<input type="text" value={value} onChange={handleChange} />
<button type="submit">Submit</button>
</form>
);
}


Неконтролируемые компоненты:

Используют рефы (refs) для доступа к значениям формы без управления состоянием через React.


import React, { useRef } from 'react';

function MyForm() {
const inputRef = useRef(null);

const handleSubmit = (e) => {
e.preventDefault();
console.log(inputRef.current.value); // Получение значения через ref
};

return (
<form onSubmit={handleSubmit}>
<input type="text" ref={inputRef} />
<button type="submit">Submit</button>
</form>
);
}


Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
👩‍💻 Как добавить элемент в конец массива?

Добавление элемента в конец массива является распространенной операцией в JavaScript и часто используется в разработке фронтенда.

Использование метода push:

Метод push добавляет один или несколько элементов в конец существующего массива и возвращает новую длину массива. Этот метод изменяет оригинальный массив.


const fruits = ['Apple', 'Banana'];
fruits.push('Orange'); // Добавление 'Orange' в конец массива
console.log(fruits); // Вывод: ['Apple', 'Banana', 'Orange']


Использование оператора spread:

Оператор распространения позволяет создавать новый массив, добавляя элементы без изменения оригинального массива. Это особенно полезно в контексте иммутабельности, например, при работе с React.


const fruits = ['Apple', 'Banana'];
const newFruits = [...fruits, 'Orange']; // Создание нового массива с добавлением 'Orange'
console.log(newFruits); // Вывод: ['Apple', 'Banana', 'Orange']


Использование метода concat:

Метод concat объединяет два или более массивов, возвращая новый массив без изменения исходных.


const fruits = ['Apple', 'Banana'];
const newFruits = fruits.concat('Orange'); // Объединение массивов с добавлением 'Orange'
console.log(newFruits); // Вывод: ['Apple', 'Banana', 'Orange']


Выбор метода зависит от конкретных требований проекта. Метод push эффективен для изменения существующих массивов, тогда как оператор распространения и concat предпочтительны для создания новых массивов, что соответствует принципам иммутабельности в современных фреймворках.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥1
👩‍💻 Для чего используются атрибуты min и max в элементах ввода?

Атрибуты min и max в input-элементах используются для определения минимально допустимого и максимального допустимого значений, которые пользователь может ввести. Эти атрибуты особенно полезны при работе с типами ввода, такими как number, range, date и другими, где важны ограничения на вводимые данные.

Преимущества использования min и max:

- Валидация данных на клиенте: предотвращает ввод значений вне допустимого диапазона еще до отправки формы.
- Улучшение пользовательского опыта: предоставляет пользователям визуальные подсказки о допустимых значениях.
- Снижение количества ошибок: минимизирует риск ошибок ввода, обеспечивая корректность данных.

Пример использования с типом number:


<form>
<label for="age">Возраст:</label>
<input type="number" id="age" name="age" min="18" max="99">
<button type="submit">Отправить</button>
</form>


Пример использования с типом date:


<form>
<label for="birthday">Дата рождения:</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-18">
<button type="submit">Отправить</button>
</form>


Использование атрибутов min и max способствует созданию более надежных и удобных форм, обеспечивая контроль над вводимыми данными.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍171
👩‍💻 Объясни разницу между unknown и any типами

В TypeScript типы any и unknown используются для представления значений неопределённого типа, но между ними есть важные различия.

Тип any отключает все проверки типов. Использование any позволяет присваивать любое значение без ограничений, что может привести к ошибкам во время выполнения.


let value: any;
value = 10;
value = "строка";
value.toFixed(); // Ошибка во время выполнения, если value не число


В отличие от any, тип unknown более безопасен. Значение типа unknown нельзя использовать напрямую без предварительной проверки его типа. Это обеспечивает дополнительный уровень безопасности и предотвращает неожиданные ошибки.


let value: unknown;
value = 10;
value = "строка";

if (typeof value === "string") {
console.log(value.toUpperCase()); // Безопасно
}


Использование unknown рекомендуется вместо any, когда точный тип значения неизвестен, но требуется сохранить безопасность типов.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍102🔥2
👩‍💻 Объясни разницу между flexbox и CSS Grid

Flexbox и CSS Grid – современные CSS-модули для построения макетов, но они решают разные задачи.

Flexbox ориентирован на однострочные или одностолбцовые макеты. Он идеально подходит для распределения пространства вдоль одной оси (горизонтальной или вертикальной) и управления выравниванием элементов.


.container {
display: flex;
justify-content: space-between;
align-items: center;
}


CSS Grid предназначен для двухмерных макетов, позволяя работать как с строками, так и со столбцами одновременно. Это мощный инструмент для создания сложных макетов страниц.


.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}


Ключевые различия:
- Ось: Flexbox – односторонняя, Grid – двухсторонняя.
- Применение: Flexbox подходит для компонентов, Grid – для целых страниц.
- Контроль: Grid обеспечивает более точное размещение элементов.

Выбор между Flexbox и Grid зависит от сложности макета и требований к расположению элементов.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥2
👩‍💻 Как создать ссылку для отправки электронной почты в HTML?

Для создания ссылки для отправки электронной почты в HTML используется протокол mailto: в атрибуте href тега <a>. Это позволяет пользователям при клике на ссылку автоматически открыть почтовый клиент с предзаполненными полями.

Пример базовой ссылки:


<a href="mailto:example@example.com">Отправить письмо</a>


При клике откроется почтовый клиент с полем "Кому" заполненным адресом example@example.com.

Добавление темы и тела письма:

Можно предварительно задать тему и текст письма, используя параметры subject и body.


<a href="mailto:example@example.com?subject=Вопрос&body=Здравствуйте, хотел бы узнать больше о вашем продукте.">Связаться</a>


Пояснения:

- subject: задаёт тему письма.
- body: задаёт текст сообщения.

Преимущества использования mailto::

- Простота реализации.
- Улучшение пользовательского опыта за счёт быстрого доступа к почтовому клиенту.

Особенности:

- Работает только при наличии настроенного почтового клиента на устройстве пользователя.
- Ограниченная поддержка дополнительных параметров.

Использование mailto: ссылок является эффективным способом облегчить связь пользователей с разработчиками или службой поддержки через электронную почту.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥2
👩‍💻 Как удалить последний элемент из массива?

Для удаления последнего элемента из массива в JavaScript используется метод pop(). Этот метод изменяет исходный массив, удаляя последний элемент и возвращая его значение.


let array = [1, 2, 3, 4];
const removedElement = array.pop();
console.log(array); // [1, 2, 3]
console.log(removedElement); // 4


Альтернативным способом является использование метода splice. Он позволяет удалить элементы из массива по указанному индексу.


let array = [1, 2, 3, 4];
const removedElements = array.splice(-1, 1);
console.log(array); // [1, 2, 3]
console.log(removedElements); // [4]


Метод pop предпочтителен для простой операции удаления последнего элемента из массива из-за его простоты и читаемости.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
👩‍💻 Чем отличаются контролируемые и неконтролируемые компоненты?

Контролируемые и неконтролируемые компоненты в React отличаются способом управления состоянием формы.

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


function ControlledInput() {
const [value, setValue] = useState('');
return (
<input
value={value}
onChange={e => setValue(e.target.value)}
/>
);
}


Неконтролируемые компоненты полагаются на DOM для управления состоянием формы. Значения элементов собираются с помощью ссылок (refs), что упрощает использование, но предоставляет меньше контроля и усложняет валидацию.


function UncontrolledInput() {
const inputRef = useRef();

const handleSubmit = () => {
console.log(inputRef.current.value);
};

return (
<input ref={inputRef} />
);
}


Основные различия:
- Управление данными: Контролируемые – через состояние, неконтролируемые – через DOM.
- Контроль и валидация: Контролируемые обеспечивают больший контроль и удобную валидацию.
- Простота использования: Неконтролируемые проще в реализации для простых форм.

Выбор между ними зависит от требований к контролю над формой и сложности приложения.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍71
👩‍💻 Объясни использование тега <nonoscript>

Тег <nonoscript> используется для предоставления альтернативного контента пользователям, у которых отключен JavaScript, или браузерам, не поддерживающим его. Это позволяет улучшить доступность и SEO сайта, обеспечивая базовый функционал независимо от выполнения скриптов.

Применение:

1. Отображение сообщения:

<nonoscript>
Ваш браузер не поддерживает JavaScript или он отключен. Для корректной работы сайта включите JavaScript.
</nonoscript>


2. Альтернативный контент:

<nonoscript>
<img src="static-image.jpg" alt="Статическое изображение для пользователей без JavaScript">
</nonoscript>


Преимущества:

- Улучшение доступности: Обеспечивает доступ к важной информации для пользователей без JavaScript.
- SEO: Помогает поисковым системам понимать альтернативный контент.
- Фолбэк решения: Предоставляет альтернативные пути взаимодействия при отсутствии скриптов.

Особенности:

- Содержимое <nonoscript> отображается только в том случае, если JavaScript отключен или не поддерживается.
- Использовать этот тег стоит для важной информации или функционала, критичного для работы сайта.

Использование <nonoscript> способствует созданию более универсальных и надежных веб-приложений, учитывающих различные сценарии использования.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11
👩‍💻 Как создать сетку с помощью CSS Grid?

Создание сетки с помощью CSS Grid начинается с задания контейнера как grid и определения строк и столбцов.


.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 200px 200px;
gap: 10px;
}


В этом примере:

- display: grid; превращает элемент в grid-контейнер.
- grid-template-columns: repeat(3, 1fr); создаёт три столбца одинаковой ширины.
- grid-template-rows: 200px 200px; задаёт две строки высотой по 200 пикселей.
- gap: 10px; устанавливает расстояние между ячейками сетки.

Размещение элементов:

Элементы внутри контейнера автоматически размещаются в ячейках сетки по порядку. Можно явно позиционировать элементы с помощью свойств grid-column и grid-row.


.item {
grid-column: 1 / 3;
grid-row: 1;
}


Этот код размещает элемент item от первого до третьего столбца в первой строке.

Преимущества CSS Grid:

- Двумерное построение макетов (строки и столбцы).
- Простое и интуитивное размещение элементов.
- Гибкость в создании адаптивных дизайнов.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
8👍4💯1
👩‍💻 В чем разница между splice и slice?

Методы splice и slice в JavaScript используются для работы с массивами, но имеют разные назначения и поведение.

splice

Метод splice изменяет исходный массив, позволяя добавлять, удалять или заменять элементы.


const array = [1, 2, 3, 4];
array.splice(2, 1, 'a', 'b');
console.log(array); // [1, 2, 'a', 'b', 4]


В данном примере начиная с индекса 2 удаляется 1 элемент и добавляются 'a' и 'b'.

slice

Метод slice не изменяет исходный массив, а возвращает новый массив, содержащий копию части оригинала.


const array = [1, 2, 3, 4];
const newArray = array.slice(1, 3);
console.log(newArray); // [2, 3]
console.log(array); // [1, 2, 3, 4]


Здесь slice возвращает элементы с индексов 1 до 3 (не включая 3), оставляя оригинальный массив неизменным.

Ключевые различия:
- Изменение массива: splice изменяет исходный массив, slice — нет.
- Назначение: splice для добавления/удаления элементов, slice для копирования части массива.
- Возвращаемое значение: splice возвращает массив удалённых элементов, slice — новый массив.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16💯1
👩‍💻 Как наследовать интерфейсы в TypeScript?

В TypeScript интерфейсы могут наследовать друг от друга, позволяя расширять или комбинировать их свойства.

Пример наследования интерфейсов:


interface Person {
name: string;
age: number;
}

interface Employee extends Person {
employeeId: string;
}

const emp: Employee = {
name: "Иван",
age: 30,
employeeId: "E123"
};


В этом примере интерфейс Employee наследует свойства из интерфейса Person и добавляет своё свойство employeeId.

Множественное наследование:

Интерфейс может наследовать несколько интерфейсов одновременно.


interface Manager extends Employee, Lead {
department: string;
}


Расширение через extends:

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

Использование наследования интерфейсов способствует структурированности и ясности в определении типов данных в TypeScript.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
👩‍💻 Как использовать ref для доступа к DOM-элементам?

В React ref используется для прямого доступа к DOM-элементам. Это необходимо для управления фокусом, выделения текста или интеграции со сторонними библиотеками.

Как использовать ref:

1. Импортировать хук useRef:

import React, { useRef } from 'react';


2. Создать ref:

const inputRef = useRef(null);


3. Присоединить ref к элементу:

<input ref={inputRef} type="text" />


4. Установить фокус:

inputRef.current.focus();


Пример использования:

function TextInput() {
const inputRef = useRef(null);

const focusInput = () => {
inputRef.current.focus();
};

return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Фокус</button>
</div>
);
}


Преимущества использования ref:

- Прямой доступ к DOM-элементам
- Управление фокусом и текстом
- Интеграция со сторонними библиотеками

Использование ref должно быть ограничено случаями, когда необходим прямой доступ к элементам, чтобы сохранять декларативный подход React.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥3
👩‍💻 Что такое медиазапросы в CSS?

Медиазапросы в CSS позволяют применять стили в зависимости от характеристик устройства, например, размера экрана. Это основной инструмент для создания адаптивного дизайна, обеспечивающий корректное отображение сайта на различных устройствах.

Пример использования медиазапросов:


/* Стили по умолчанию */
.container {
width: 100%;
padding: 20px;
}

/* Медиазапрос для экранов шириной 768px и больше */
@media (min-width: 768px) {
.container {
width: 750px;
padding: 40px;
}
}

/* Медиазапрос для экранов шириной 1024px и больше */
@media (min-width: 1024px) {
.container {
width: 960px;
padding: 60px;
}
}


Основные возможности:

- Адаптация к различным устройствам: Настройка стилей для мобильных, планшетов, десктопов.
- Оптимизация производительности: Применение только необходимых стилей для конкретного устройства.
- Гибкость дизайна: Изменение макета и элементов интерфейса под разные размеры экранов.

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍101🔥1
👩‍💻 Как включить файл JavaScript в HTML-документ?

Для включения JavaScript файла в HTML-документ используется тег <noscript>. Этот тег может быть размещен в <head> или в <body> секциях HTML-документа.

Наиболее распространенный способ — это подключение скрипта перед закрывающим тегом </body>. Это позволяет загружать и выполнять JavaScript после того, как весь HTML-контент был загружен, что улучшает производительность страницы.

Пример подключения внешнего JavaScript файла:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<noscript>Document</noscript>
</head>
<body>
<h1>Hello, World!</h1>
<noscript src="noscript.js"></noscript>
</body>
</html>


Атрибут src указывает путь к JavaScript файлу. Если файл находится в той же директории, что и HTML-документ, достаточно указать его имя.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍171🔥1
👩‍💻 Что такое объект в JS и как его создать?

В JavaScript объект — это коллекция свойств, где каждое свойство состоит из ключа и значения. Объекты позволяют хранить и управлять данными в структурированном виде.

Создать объект можно несколькими способами. Один из самых распространенных — использование литерала объекта.

Пример создания объекта с помощью литерала:


const person = {
name: "John",
age: 30,
greet: function() {
console.log("Hello!");
}
};


В этом примере объект person имеет три свойства: name, age и метод greet.

Другой способ создания объекта — использование конструктора Object:


const car = new Object();
car.make = "Toyota";
car.model = "Camry";
car.year = 2020;


Оба подхода позволяют динамически добавлять и изменять свойства объекта.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍191