Тематика: IT, музыка
Страницы: многостраничный
CodeBase | Frontend | #figma
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6⚡1
console.log('Первое сообщение');
setTimeout(() => {
console.log('Сообщение из setTimeout');
}, 0);
console.log('Второе сообщение');
setTimeout
, сообщения будут выведены в порядке:Первое сообщение
Второе сообщение
Сообщение из setTimeout
setTimeout
помещается в очередь и будет выполнен после завершения текущего кода в стеке вызовов. Event Loop позволяет выполнять асинхронные операции, сохраняя отзывчивость и эффективность веб-приложений.Если понравился пост, обязательно добавь
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12❤2👍1
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 5]
for (let i = 0; i < array.length; i++){
console.log(i);
}
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // [0, 1, 2, 3]
Если понравился пост, добавь
И, мы обязательно разберем данный вопрос подробнее!
CodeBase | Frontend |#js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: HTML, SCSS, TS
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6👍3
CodeBase | Frontend | #ide
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: HTML, SCSS, TS
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
CodeBase | Frontend | #Stylus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: HTML, CSS
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥6❤2
Псевдокласс
:empty
используется для выбора пустых элементов. Пустыми считаются элементы без потомков и текста.🗣 В реальных проектах этот селектор сильно помогает, когда нет возможности управлять элементом, но точно знаешь, что иногда он может быть пустым. Использование псевдокласса :empty позволяет убрать лишние отступы или рамки, которые могут быть у пустого элемента.
CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥1
CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: SVG, SCSS, TypeScript
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
String — это обёртка над примитивным строковым типом, которая содержит дополнительные методы работы со строками:
new String()
:const primitive = 'приветики'
const str = new String('приветики')
trim()
Для множественных замен и поиска удобнее всего пользоваться регулярными выражениями, но это отдельный микроязык, который нужно учить.
CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1
CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: SVG, CSS, JavaScript
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
::marker
— псевдоэлемент, отвечающий за маркерное поле. В нём находятся, например, маркеры списка.Создадим ненумерованный список
<ul>
и установим синий цвет точки для каждого элемента <li>
:<ul>
<li>Цвет точек</li>
<li>этого ненумерованного списка</li>
<li>#2e9aff</li>
</ul>
li::marker {
color: #2e9aff;
}
Псевдоэлемент ::marker работает только на элементах списка.
::before
, ::after
, ::first-letter
, ::first-line
.::marker
необходимо указывать с двумя двоеточиями.CodeBase | Frontend | #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤2👏2🥰1
CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3😁1
This media is not supported in your browser
VIEW IN TELEGRAM
CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6💩3
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: SVG, CSS
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8👎1
Тернарный оператор работает с тремя операндами: одним условием и двумя выражениями. Возвращает первое выражение, если условие истинно и второе, если условие ложно.
Используется как компактная замена условного оператора
if...else
.const num = 5
console.log(num === 5 ? 'Пять' : 'Не пять')
// Пять
(A) ? (B) : (C)
Где A — условие, B — первое выражение, C — второе выражение.
Если первый операнд A вычисляется в истинное выражение
true
, то оператор вернёт выражение B. Если в false
— вернёт выражение C.const num = 10
const result = num > 10 ? 'Число больше 10' :
num === 10 ? 'Число равно 10' : 'Число меньше 10'
console.log(result)
// 'Число равно 10'
В этом случае запись идентична использованию конструкций
if...else if ... else
. Сначала проверяется первое условие, если оно ложно, то проверяется второе и так далее. 🗣️ Отступы в примере проставлены для лучшей читаемости конструкции, они не влияют на выполнение кода.
CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🤯3🤔2
CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2👎2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: SVG, SCSS, JavaScript
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥1😁1