#javanoscript #собеседования
⚡️Задача дня
Что выведет этот код?
Ответ:15
Статья по теме: https://learn.javanoscript.ru/rest-parameters-spread-operator#the-arguments-variable
⚡️Задача дня
Что выведет этот код?
function foo(a, b) {
arguments[0] = 5;
arguments[1] = 10;
return a + b;
}
console.log(foo(1, 2));
Ответ:
Статья по теме: https://learn.javanoscript.ru/rest-parameters-spread-operator#the-arguments-variable
⚡ Задача дня
Что выведет этот код?
Ответ:
undefined
Ошибка ReferenceError
Если возникли трудности, почитайте про области видимости, hoisting и разницу между var, let и const тут:
https://learn.javanoscript.ru/var
#javanoscript #собеседования
Что выведет этот код?
function sayHi() {
console.log(name);
console.log(age);
var name = "John";
let age = 30;
}
sayHi();
Ответ:
Если возникли трудности, почитайте про области видимости, hoisting и разницу между var, let и const тут:
https://learn.javanoscript.ru/var
#javanoscript #собеседования
masha_codeca pinned «👋 Привет, друг! Давайте знакомиться! Меня зовут Маша и я фронтенд разработчик. Работала в таких крупных компаниях как Epam и Yandex, а также в стартапах и веб-студиях. В общем я прошла огонь, воду, «галеры» и бигтехи. 👩💻И мне есть, что тебе рассказать. 😏…»
⚡ Задача дня
Что выведет этот код?
Ответ:
TypeError: Assignment to constant variable.
[0, 2, 3, 4]
Если возникли трудности, почитайте про работу с const и изменение массивов тут:
https://learn.javanoscript.ru/array
#javanoscript #собеседования
Что выведет этот код?
const arr = [1, 2, 3];
arr.push(4);
arr[0] = 0;
try {
arr = [5, 6, 7];
} catch (error) {
console.log(error.message);
}
console.log(arr);
Ответ:
Если возникли трудности, почитайте про работу с const и изменение массивов тут:
https://learn.javanoscript.ru/array
#javanoscript #собеседования
⚡ Задача дня
❓ Что выведет этот код?
✅ Ответ:
"123"
"33"
"02"
6
2
"42"
Если возникли трудности, почитайте про преобразование типов в JavaScript:
https://learn.javanoscript.ru/type-conversions
Учитесь с удовольствием! 🎉
#javanoscript #собеседования
❓ Что выведет этот код?
console.log(1 + "2" + "3");
console.log(1 + +"2" + "3");
console.log(1 + -"1" + "2");
console.log("2" * "3");
console.log("4" / "2");
console.log("4" + "2");
✅ Ответ:
Если возникли трудности, почитайте про преобразование типов в JavaScript:
https://learn.javanoscript.ru/type-conversions
Учитесь с удовольствием! 🎉
#javanoscript #собеседования
Доступность (accessibility): 5 простых советов для улучшения интерфейсов 🔼
Доступность (accessibility) помогает сделать сайт удобным для людей с ограниченными возможностями: людей с особенностями зрения, слуха, моторики. 🧑🦽🧑🦯
Поэтому в современной разработке интерфейсов этот вопрос часто всплывает на собеседованиях, особенно в зарубежных компаниях. 🌍
Вот 5 лёгких шагов, которые помогут сделать твои интерфейсы доступнее:
1️⃣ Используй семантический HTML 🏗
Структурируй страницу с помощью <header>, <nav>, <main>, <footer>.
А заголовки выстраивай логически: <h1> → <h2> → <h3>. Это упрощает навигацию для экранных читалок. 🛠️
2️⃣ Добавляй описания 🖼️
Для изображений: добавь понятный alt. Если картинка декоративная, оставь alt="".
Для кнопок: используй aria-label. Например:
3️⃣ Обеспечь навигацию с клавиатуры ⌨️
Убедись, что пользователи могут перемещаться по сайту с помощью Tab.
Для кастомных элементов добавляй tabindex="0". 🔑
4️⃣ Добавь фокусные состояния 🎯
Не убирай outline у кнопок и ссылок — это важно для клавиатурной навигации. Но можешь его кастомизировать:
5️⃣ Проверь масштабируемость 🔍
Твой текст должен оставаться читабельным при увеличении масштаба до 200%. Используй относительные единицы (rem, em), чтобы всё выглядело гармонично.
И не забывай тестировать! 🧪
Пройди по сайту только с клавиатурой. Проверь его через Lighthouse, Axe или экранные читалки (VoiceOver, NVDA). 🎧
Доступность — это забота о пользователях и шаг к профессионализму. Сделай свои интерфейсы удобнее для всех! 💪💻
#accessibility #html #frontend
Доступность (accessibility) помогает сделать сайт удобным для людей с ограниченными возможностями: людей с особенностями зрения, слуха, моторики. 🧑🦽🧑🦯
Поэтому в современной разработке интерфейсов этот вопрос часто всплывает на собеседованиях, особенно в зарубежных компаниях. 🌍
Вот 5 лёгких шагов, которые помогут сделать твои интерфейсы доступнее:
1️⃣ Используй семантический HTML 🏗
Структурируй страницу с помощью <header>, <nav>, <main>, <footer>.
А заголовки выстраивай логически: <h1> → <h2> → <h3>. Это упрощает навигацию для экранных читалок. 🛠️
2️⃣ Добавляй описания 🖼️
Для изображений: добавь понятный alt. Если картинка декоративная, оставь alt="".
Для кнопок: используй aria-label. Например:
<button aria-label="Открыть меню">☰</button>
3️⃣ Обеспечь навигацию с клавиатуры ⌨️
Убедись, что пользователи могут перемещаться по сайту с помощью Tab.
Для кастомных элементов добавляй tabindex="0". 🔑
4️⃣ Добавь фокусные состояния 🎯
Не убирай outline у кнопок и ссылок — это важно для клавиатурной навигации. Но можешь его кастомизировать:
button:focus {
outline: 2px solid #005fcc;
}
5️⃣ Проверь масштабируемость 🔍
Твой текст должен оставаться читабельным при увеличении масштаба до 200%. Используй относительные единицы (rem, em), чтобы всё выглядело гармонично.
И не забывай тестировать! 🧪
Пройди по сайту только с клавиатурой. Проверь его через Lighthouse, Axe или экранные читалки (VoiceOver, NVDA). 🎧
Доступность — это забота о пользователях и шаг к профессионализму. Сделай свои интерфейсы удобнее для всех! 💪💻
#accessibility #html #frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡ Задача дня
❓ Что выведет этот код?
✅ Ответ:
1
undefined
Если возникли трудности, почитайте про this в JavaScript:
https://learn.javanoscript.ru/object-methods
Разбирайтесь в теме, вы супер! 💪😊
#javanoscript #собеседования
❓ Что выведет этот код?
const obj = {
a: 1,
b: function() {
return this.a;
}
};
const fn = obj.b;
console.log(obj.b());
console.log(fn());
✅ Ответ:
Если возникли трудности, почитайте про this в JavaScript:
https://learn.javanoscript.ru/object-methods
Разбирайтесь в теме, вы супер! 💪😊
#javanoscript #собеседования
❤1
⚡ Задача дня
❓ Что выведет этот код?
✅ Ответ:
"object"
true
false
false
true
Если возникли трудности, почитайте про null, undefined и сравнения в JavaScript:
https://learn.javanoscript.ru/comparison
#javanoscript #собеседования
❓ Что выведет этот код?
console.log(typeof null);
console.log(null == undefined);
console.log(null === undefined);
console.log(null > 0);
console.log(null >= 0);
✅ Ответ:
Если возникли трудности, почитайте про null, undefined и сравнения в JavaScript:
https://learn.javanoscript.ru/comparison
#javanoscript #собеседования
⚡ Задача дня
❓ Что выведет этот код?
✅ Ответ:
"Sync"
"Promise"
"Timeout"
Если возникли трудности, почитайте про очередь микрозадач и макрозадач в JavaScript:
https://learn.javanoscript.ru/event-loop
#javanoscript #собеседования
❓ Что выведет этот код?
setTimeout(() => console.log("Timeout"), 0);
Promise.resolve().then(() => console.log("Promise"));
console.log("Sync");
✅ Ответ:
Если возникли трудности, почитайте про очередь микрозадач и макрозадач в JavaScript:
https://learn.javanoscript.ru/event-loop
#javanoscript #собеседования
⚡ Задача дня
❓ Что произойдет, если в HTML будет такой код?
✅ Ответ:
<p>Параграф 1</p><p>Параграф 2</p><p>Параграф 3</p>
Если возникли трудности, почитай про свойство innerHTML:
https://learn.javanoscript.ru/dom-nodes
Ты на верном пути, продолжай! 💡✨
#javanoscript #собеседования
❓ Что произойдет, если в HTML будет такой код?
<div>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>
</div>
<noscript>
const div = document.querySelector('div');
console.log(div.innerHTML);
</noscript>
✅ Ответ:
Если возникли трудности, почитай про свойство innerHTML:
https://learn.javanoscript.ru/dom-nodes
Ты на верном пути, продолжай! 💡✨
#javanoscript #собеседования
⚡ Задача дня
❓ Какой цвет будет у текста, если есть такие стили?
✅ Ответ:
Синий
Если возникли трудности, почитай про !important и приоритеты в CSS:
https://developer.mozilla.org/ru/docs/Web/CSS/Specificity
Ты молодец, продолжай развиваться! 🌟💻
#javanoscript #собеседования
❓ Какой цвет будет у текста, если есть такие стили?
p {
color: blue !important;
}
.container p {
color: red;
}
p.special {
color: green;
}
<div class="container">
<p class="special">Привет!</p>
</div>
✅ Ответ:
Если возникли трудности, почитай про !important и приоритеты в CSS:
https://developer.mozilla.org/ru/docs/Web/CSS/Specificity
Ты молодец, продолжай развиваться! 🌟💻
#javanoscript #собеседования
⚡ Задача дня
❓ Что выведет этот код?
✅ Ответ
Промис создан
Код завершён
Успех!
Если возникли трудности, читай про эту тему здесь:
https://learn.javanoscript.ru/promise-basics
Промисы — мощная вещь, главное понять, как они работают. Ты справишься! 🚀
#javanoscript #собеседования
❓ Что выведет этот код?
const promise = new Promise((resolve, reject) => {
console.log("Промис создан");
resolve("Успех!");
});
promise.then((result) => console.log(result));
console.log("Код завершён");
✅ Ответ
Если возникли трудности, читай про эту тему здесь:
https://learn.javanoscript.ru/promise-basics
Промисы — мощная вещь, главное понять, как они работают. Ты справишься! 🚀
#javanoscript #собеседования
⚡ Задача дня
❓ Что выведет этот код?
✅ Ответ
15
Если возникли трудности, читай про эту тему здесь:
https://learn.javanoscript.ru/array-methods#reduce-reduceright
#javanoscript #собеседования
❓ Что выведет этот код?
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum);
✅ Ответ
Если возникли трудности, читай про эту тему здесь:
https://learn.javanoscript.ru/array-methods#reduce-reduceright
#javanoscript #собеседования
⚡ Задача дня
❓ Что выведет этот код?
✅ Ответ
Деление на ноль!
Операция завершена
Если возникли трудности, читай про эту тему здесь:
https://learn.javanoscript.ru/try-catch
Ошибки — это не страшно, если знаешь, как с ними справляться! 💪✨
#javanoscript #собеседования
❓ Что выведет этот код?
try {
const num = 10 / 0;
if (!isFinite(num)) {
throw new Error("Деление на ноль!");
}
} catch (error) {
console.log(error.message);
} finally {
console.log("Операция завершена");
}
✅ Ответ
Если возникли трудности, читай про эту тему здесь:
https://learn.javanoscript.ru/try-catch
Ошибки — это не страшно, если знаешь, как с ними справляться! 💪✨
#javanoscript #собеседования
Самые полезные операторы TypeScript: typeof и keyof
TypeScript даёт нам два классных оператора, которые делают работу с типами удобнее:
🔹 typeof — позволяет взять тип у уже существующей переменной:
Теперь AgeType будет всегда таким же, как тип переменной age. Это полезно, когда нужно создать новый тип на основе уже объявленных данных.
Другой пример:
Теперь UserType — это { name: string; age: number }, и если user изменится, тип автоматически обновится.
🔹 keyof — даёт список ключей объекта в виде строкового типа:
Теперь UserKeys — это "name" | "age", и мы можем использовать это, например, в функции:
Это помогает избежать ошибок, если случайно передать неправильное имя ключа.
Итог:
typeof помогает взять существующий тип.
keyof позволяет получить список ключей объекта.
Простые, но мощные штуки, которые делают код более надёжным! 🚀
TypeScript даёт нам два классных оператора, которые делают работу с типами удобнее:
🔹 typeof — позволяет взять тип у уже существующей переменной:
const age = 30;
type AgeType = typeof age; // number
Теперь AgeType будет всегда таким же, как тип переменной age. Это полезно, когда нужно создать новый тип на основе уже объявленных данных.
Другой пример:
onst user = {
name: "Alice",
age: 25,
};
type UserType = typeof user;
Теперь UserType — это { name: string; age: number }, и если user изменится, тип автоматически обновится.
🔹 keyof — даёт список ключей объекта в виде строкового типа:
type UserKeys = keyof UserType; // "name" | "age"
Теперь UserKeys — это "name" | "age", и мы можем использовать это, например, в функции:
function printUserInfo(key: UserKeys) {
console.log(key);
}
printUserInfo("name"); // ✅ Работает
// printUserInfo("email"); // ❌ Ошибка, такого ключа нет
Это помогает избежать ошибок, если случайно передать неправильное имя ключа.
Итог:
typeof помогает взять существующий тип.
keyof позволяет получить список ключей объекта.
Простые, но мощные штуки, которые делают код более надёжным! 🚀
⚡ Задача дня
Вот код:
❓ Какой тип будет у переменной key?
✅ Ответ
"id" | "name" | "isAdmin"
Если возникли трудности, можно почитать тут:
🔗 https://www.typenoscriptlang.org/docs/handbook/2/keyof-types.html
🔗 https://www.typenoscriptlang.org/docs/handbook/2/typeof-types.html
Вот код:
const user = {
id: 1,
name: "Alice",
isAdmin: true,
};
type UserKeys = keyof typeof user;
let key: UserKeys;
❓ Какой тип будет у переменной key?
✅ Ответ
Если возникли трудности, можно почитать тут:
🔗 https://www.typenoscriptlang.org/docs/handbook/2/keyof-types.html
🔗 https://www.typenoscriptlang.org/docs/handbook/2/typeof-types.html
This media is not supported in your browser
VIEW IN TELEGRAM
Кто сказал, что фастфуд только вредит?!
А если так?)
А если так?)
