JavaScript в примерах и задачах

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

👉 @frontendInterview

First non-repeating character

Создайте функцию, которая принимает строку и возвращает первый символ, который ни разу не повторяется в этой строке.

Примеры:
'stress' => 't'
'sTreSS' => 'T'

👉 @frontendInterview

Зачем нужен HTML атрибут hidden?

Свойство Element.hidden позволяет узнать значение HTML-атрибута hidden или изменить его. Когда Element.hidden равен true, элемент скрыт на странице и недоступен для скринридеров.

Обращение к свойству Element.hidden вернёт текущее значение HTML-атрибута hidden. Если атрибута нет на элементе, результат будет false.
<input type="text" placeholder="Введите почту">
<div class="error" hidden>Неправильная почта</div>

👉 @frontendInterview

Расскажите про статический метод Promise.allSettled

Метод allSettled() — это один из статических методов объекта Promise. Его используют, когда нужно запустить несколько промисов параллельно и дождаться их выполнения.

Promise.allSettled() очень похож на метод Promise.all(), но работает немного по-другому. В отличие от Promise.all(), Promise.allSettled() ждёт выполнения всех промисов, при этом неважно, завершились они успешно или с ошибкой.

👉 @frontendInterview

👉 @frontendInterview

Как стилизовать задизейбленный HTML элемент?

:disabled и :enabled легко применяются к любым элементам, которым можно задать атрибут disabled: <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> и <input>.

Часто требуется, чтобы на кнопку отправки формы нельзя было нажать, пока не заполнены все поля этой формы. Проще всего заблокировать кнопку атрибутом disabled. Его проставляют, как правило, при помощи JavaScript. Но недостаточно просто указать его в HTML, нужно ещё и при помощи оформления показать пользователю, что кнопка не активна. Как раз для этого нам пригодится псевдокласс :disabled.

Кнопка будет полупрозрачной:

 button:disabled {
     opacity: 0.5;
 }

👉 @frontendInterview

👉 @frontendInterview

Познакомьтесь, JavaScript.

Вы пока еще не знаете JS. И Кайл Симпсон признается, что тоже его не знает (по крайней мере полностью)… И никто не знает. Но все мы можем начать работать над тем, чтобы узнать его лучше. Сколько бы времени вы ни провели за изучением языка, всегда можно найти что-то еще, что стоит изучить и понять на другом уровне.

Учтите, что, хотя книга и называется «Познакомьтесь, JavaScript», она не для новичков. У нее другая задача: дать обзор тем, в которых необходимо разобраться на начальном этапе изучения JS. Даже если вы уже написали достаточно кода JS, эту книгу не стоит пропускать, возможно, в ваших знаниях есть пробелы, которые необходимо заполнить перед углубленным изучением сложных тем.

👉 @frontendInterview

Are all elements equal

Создайте функцию, которая принимает строку или массив и возвращает true, если все элементы этой строки или этого массива равны.

Примеры:
"aaaaa".eqAll() => true
"abcde".eqAll() => false
[0,0,0].eqAll() => true
[0,1,2].eqAll() => false

"".eqAll() => true
[].eqAll() => true

👉 @frontendInterview

Как сделать блок с раскрывающимся контентом на чистом HTML?

Иногда нужно скрывать какую-то информацию на странице в специальном блоке. Чтобы в любой момент можно было кликнуть на этот блок и развернуть информацию. И свернуть обратно таким же кликом. Такой блок ещё называют «аккордеоном».

Самый простой раскрывающийся блок выглядит вот так:
<details>
<summary>Легенда</summary>
<p>Раскрывающийся текст</p>
</details>

👉 @frontendInterview

👉 @frontendInterview

Для чего используется ключевое слово currentColor в CSS?

Ключевое слова currentColor можно использовать в качестве значения для CSS-свойства, принимающего цвет. Например, background-color. Браузер подставит вместо currentColor текущее значение свойства color.

Пример
Возьмём небольшой кусочек текста, зададим ему нужный цвет текста и добавим тень. В месте, где нужно задавать цвет тени, используем ключевое слово currentColor:
.element {
color: darkblue;
box-shadow: 0 0 5px currentColor;
}

👉 @frontendInterview

Какие бывают области видимости в JS?

Глобальная область видимости
Это самая внешняя коробка из всех. Когда мы «просто объявляем переменную», вне функций, вне модулей, то эта переменная попадает в глобальную область видимости.
Самый известный пример глобальной переменной — это console.
console.log(console)
// Console {debug: function, error: function,
// log: function, info: function, warn: function, …}

Блочная область видимости
Она ограничена программным блоком, обозначенным при помощи { и }. Простейший пример такой области — это выражение внутри скобок:

if (true) {
const a = 42
console.log(a)
// 42
}

console.log(a)
// ReferenceError: Can't find variable: a

Функциональная область видимости
Это область видимости в пределах тела функции. Можно сказать, что она ограничена { и } функции.

function scoped() {
const b = 43
}

console.log(b)
// Reference error.
К переменной b есть доступ только внутри функции scoped.

👉 @frontendInterview