👁🗨 CODORUM
前往频道在 Telegram
🟣 Канал создан с целью совместного обучения программированию на языке JavaScript 🟨 ✔️ Канал подойдёт для тех кто желает: ➖ научиться программировать на языке JavaScript ➖ расширить свой кругозор в знаниях функций на JS 🎥 Ютуб канал: youtube.com/@codo
显示更多776
订阅者
+124 小时
-97 天
-1530 天
数据加载中...
吸引订阅者
八月 '26
八月 '26
+5
在0个频道中
七月 '26
+8
在0个频道中
Get PRO
六月 '26
+10
在0个频道中
Get PRO
五月 '26
+14
在0个频道中
Get PRO
四月 '26
+7
在0个频道中
Get PRO
三月 '26
+25
在0个频道中
Get PRO
二月 '26
+23
在0个频道中
Get PRO
一月 '26
+21
在0个频道中
Get PRO
十二月 '25
+15
在0个频道中
Get PRO
十一月 '25
+43
在0个频道中
Get PRO
十月 '25
+38
在0个频道中
Get PRO
九月 '25
+32
在0个频道中
Get PRO
八月 '25
+28
在0个频道中
Get PRO
七月 '25
+43
在0个频道中
Get PRO
六月 '25
+30
在0个频道中
Get PRO
五月 '25
+31
在0个频道中
Get PRO
四月 '25
+48
在0个频道中
Get PRO
三月 '25
+47
在0个频道中
Get PRO
二月 '25
+54
在0个频道中
Get PRO
一月 '25
+48
在0个频道中
Get PRO
十二月 '24
+98
在0个频道中
Get PRO
十一月 '24
+65
在0个频道中
Get PRO
十月 '24
+63
在0个频道中
Get PRO
九月 '24
+441
在0个频道中
| 日期 | 订阅者增长 | 提及 | 频道 | |
| 27 八月 | +1 | |||
| 26 八月 | +1 | |||
| 25 八月 | 0 | |||
| 24 八月 | 0 | |||
| 23 八月 | 0 | |||
| 22 八月 | 0 | |||
| 21 八月 | 0 | |||
| 20 八月 | 0 | |||
| 19 八月 | 0 | |||
| 18 八月 | 0 | |||
| 17 八月 | +1 | |||
| 16 八月 | 0 | |||
| 15 八月 | 0 | |||
| 14 八月 | 0 | |||
| 13 八月 | 0 | |||
| 12 八月 | 0 | |||
| 11 八月 | 0 | |||
| 10 八月 | 0 | |||
| 09 八月 | 0 | |||
| 08 八月 | 0 | |||
| 07 八月 | 0 | |||
| 06 八月 | 0 | |||
| 05 八月 | 0 | |||
| 04 八月 | 0 | |||
| 03 八月 | +1 | |||
| 02 八月 | 0 | |||
| 01 八月 | +1 |
频道帖子
В JavaScript существует множество типов операторов 🟨
Рассмотрим такой тип операторов - арифметические операторы 🧮
Они предназначены для работы с числовыми значениями 🔢
А именно для сложения чисел, вычитания, умножения, деления, вычисления остатка от деления, возведения к степени, инкремента и декремента ➗
| 2 |  Указав путь к изображению в значении url свойства cursor можно поменять отображение курсора 🟦
Можно использовать разные форматы импортируемого изображения, но если вы импортируете невекторное изображение, к примеру формат png, то лучше чтобы оно не превышало размер 100х100 пикселей 👆
.body {
cursor: url(/public/icons/cursor.png), auto;
} | 153 |
| 3 |  Async await – это функция JavaScript, позволяющая писать асинхронный код с чистой и понятной синтаксической структурой. Слово async определяет асинхронную функцию, а слово await указывает на ожидание выполнения асинхронной операции 🔀
Если простыми словами, то основная функция отмечена ключевым словом async, которая возвращает какой-то объект Promise. А ключевое слово await используется внутри этой функции (функции async) для ожидания результатов выполнения Promise 🎎
В видео мы рассмотрели пример с функцией async await по вычислению количества процентов числа "b" от числа "a". Часть функции percentFromNum (await) вычислила процент от числа "a", а основная часть функции calculate (async) умножила результат полученный с функции percentFromNum на число "b" 👁🗨 | 184 |
| 4 | 🔘 Что происходит с let и const переменными к моменту их объявления?
Вопрос средней сложности ✴️ | 171 |
| 5 |  С помощью метода findLast можно найти последний элемент массива удовлетворяющий определенное условие в JavaScript 🟨
Для этого достаточно задать массив, прописать метод findLast, в скобках которого указать условие для элемента 🔦
Отталкиваясь от этого условия будут поочередно перебираться все элементы с конца массива, пока не будет найден первый с конца массива элемент удовлетворяющий заданное условие 🔬
Когда такой элемент будет найден – он будет выведен в консоль, в случае кода на скрине, и поиск будет остановлен 👁🗨 | 190 |
| 6 |  Цикл – это управляющая конструкция, обеспечивающая многократное выполнение блока кода до выполнения заданного условия. Циклы сокращают количество дублирования кода и помогают эффективно работать с данными 🔂
Один из самых распространенных видов циклов – цикл "for" ℹ
В следствие выполнения цикла for на скрине было проведено 3 итераций, на каждой из которых значение переменной "i" увеличивалось на единицу (i++), начиная со значения "i = 0", пока значение переменной не достигло максимального допустимого значения для соблюдения условия цикла и цикл прекратил работу (запуск новых итераций) ✋
На каждой итерации в консоль выводилось новое актуальное значение переменной 👁🗨 | 194 |
| 7 | 没有文字... | 179 |
| 8 |  В React существует множество типов компонентов ⚛
Рассмотрим тип компонента - Компонент класса 👤
Компонент класса – один из основных способов создания компонентов, подход которого основан на классах ES6 и использует расширение от базового класса React Component 👥
Можно передавать данные от одного компонента класса к другому компоненту класса 🤝
На примере кода выше есть класс MyComponent который наследует React Component. В конструкторе определяется исходное состояние компонента, а метод render отвечает за отображение элементов в виртуальном DOM 👁🗨 | 187 |
| 9 |  Если необходимо распаковать элементы массива таким образом, чтобы каждый элемент массива был присвоен новой самостоятельной переменной – можно воспользоваться Rest оператором 📤
➖ Такой подход называется деструктивным присваиванием: объявляем сразу несколько новых переменных (перечислив их в квадратных скобках). Элементы, которые не нужно присваивать отдельным переменным можно объединить в массив указав его название в конце конструкции и Rest оператор перед ним 👁🗨
Если необходимо распаковать элементы массива в новый массив – можно воспользоваться Spread оператором. Для этого при объявлении нового массива нужно указать название нового массива в квадратных скобках и Spread оператор перед названием 📥 | 217 |
| 10 |  Как реализовать анимацию загрузки контента на странице в виде движения линии по блоку с помощью CSS? 🟦
Для этого нужно определить блок в котором будет происходить анимация и прописать для него псевдоэлемент :before, в котором стилизовать линию 📏
Последнее что понадобится создать анимацию в @keyframes ▶️
Код из видео:
// index.js
<div class="block">
<div class="ava"/>
<div style={{ display: "block" }}>
<div class="name"/>
<div class="description"/>
</div>
</div>
/* index.css */
.block {
display: flex;
justify-content: center;
align-items: center;
}
.block:before {
content: '';
position: absolute;
height: 300px;
width: 40px;
background: #ffffffdd;
filter: blur(4px);
transform: rotate(-20deg) translateX(-200px);
animation: line 1s linear infinite;
}
@keyframes line {
25% {
transform: rotate(-20deg) translateX(300px); ;
}
100% {
transform: rotate(-20deg) translateX(300px); ;
}
} | 212 |
| 11 | 🔘 Какой метод преобразует строку в массив, используя указанный разделитель в JavaScript?
Вопрос лёгкой сложности ❇️ | 200 |
| 12 |  Рассмотрим тип объекта Date в JavaScript ⚜️
Date – это тип объекта, который позволяет создавать, представлять и взаимодействовать с датами и временем (год, месяц, день, час, минута и другие) ⏰
Существуют методы для получения и изменения даты и времени (детальнее на скрине) ⏲️
Стоит учесть, что отсчёт месяцев начинается с нуля, где январь - 00, февраль - 01 и так далее. Поэтому при выводе месяца можно добавить "+1", чтобы месяц отображался со своим привычным номером 👁🗨
console.log(`Сегодня ${day}.${month + 1}, ${year} год`); | 231 |
| 13 |  Ранее был пост про методы Push и Pop, которыми можно добавить элемент в конец массива и удалить последний элемент массива 🟨
Есть аналогичные этим методам методы Shift и Unshift, но:
👉 метод Shift удаляет первый элемент массива
👉 метод Unshift добавляет элемент или элементы в начало массива
Применение методов стандартное: указывается название массива и метод через точку. В скобках к методу Unshift можно указать 1 или несколько элементов через запятую, а скобки к методу Shift оставляем пустые (в любом случае он удалит первый элемент массива, независимо от того что мы там укажем) 👁🗨 | 215 |
| 14 | Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨
👉 Какие есть способы копирования простого объекта типа obj = {a: 1, b: 2}
Есть несколько популярных способов создать копию объекта:
🔸 Spread-оператор (чаще всего)
const copy = { ...obj };
🔸 Object.assign()
const copy = Object.assign({}, obj);
🔸 structuredClone() (подходит и для глубокого копирования)
const copy = structuredClone(obj);
⚠️ Spread и Object.assign() создают поверхностную (shallow) копию. Если в объекте есть вложенные объекты или массивы, они останутся общими. Если требуется независимая копия вложенных данных, стоит использовать structuredClone() | 211 |
| 15 |  Идея уникальной стилизации списка. attr функция передаёт атрибуты из html-кода и таким образом можно установить свой эмодзи для каждого пункта списка 🔥
Каждому пункту списка задаём класс (в нашем случае custom-marker), в котором значение свойства content должно быть равно селектору attr, принимающего атрибут (в нашем случае emoji) ℹ
Псевдоэлемент ::marker напрямую не принимает атрибуты, поэтому свойство content внутри оставляем пустым, а уже в отдельном классе custom-marker указываем что свойство content должно отображать наше значение в виде эмодзи через атрибут emoji 👁🗨
Код из гиф:
// ✦ index.js
<div class="main">
<ol>
<li class="custom-marker" emoji="🔥 ">Первый пункт</li>
<li class="custom-marker" emoji="💎 ">Второй пункт</li>
<li class="custom-marker" emoji="⚡ ">Третий пункт</li>
</ol>
</div>
// ✦ index.css
.main {
font-size: 12px;
font-weight: 600;
}
.main ::marker {
content: "";
}
.main .custom-marker::before {
content: attr(emoji);
font-size: 16px;
} | 226 |
| 16 |  Промис — это инструмент, позволяющий обрабатывать асинхронные операции, такие как запросы в базу данных и определять условия для решения или отклонения промиса в зависимости от результата операций 🚥
👉 Основные функции промисов:
➖ конструктор Promise для создания нового промиса
➖ метод resolve решающий промис, передавая ему значение результата
➖ метод reject отклоняющий промис, передавая ему значение ошибки
➖ метод then добавляющий обработчик для решения промиса
➖ метод catch добавляющий обработчик для отклонения промиса
✅ Если в следствии выполнения операции внутри промиса мы получаем значение true, которое свидетельствует о выполнении какого-то нашего условия - то срабатывает метод resolve, который передает результат в метод then. С этим результатом мы можем продолжить какие-то дальнейшие операции
❌ Если же получаем false - срабатывает метод reject, передающий значение error в метод catch. Но и с этим значением мы также можем проводить какие-то дальнейшие манипуляции | 209 |
| 17 | 🔘 Для чего используется метод Object.hasOwn() в JavaScript?
Вопрос средней сложности ✴️ | 218 |
| 18 |  Что такое конструктор в JS? 🏗
Конструктор – это специальная функция, которая используется для создания и инициализации разных объектов. Основная идея конструкторов заключается в возможности создавать много объектов с одинаковыми свойствами и методами по определенному шаблону 🃏
На скрине пример создания объекта Homer с помощью конструктора Person 🍩
👉 Теперь у объекта есть:
➖ два свойства/параметра: age и hometown
➖ метод speak
Но на практике удобнее пользоваться классами, использование которых в разы проще 👁🗨
Код со скрина:
// ✦ объявление конструктора
function Person(age, hometown) {
this.age = age;
this.hometown = hometown;
this.speak = function() {
console.log(`Hi, I'm ${this.age} years old, my hometown is ${this.hometown}`)
};
}
// ✦ создание объекта с помощью конструктора
let Homer = new Person(40, 'Springfield')
Homer.speak(); | 248 |
| 19 |  С помощью метода Object.assign можно продублировать свойства одного объекта в другой без необходимости объявления дополнительного объекта (для последующего сложения двух объектов или применения Spread оператора для развертывания) 👯♀️
Метод применяется просто: первым значением в скобках выступает объект, в который мы хотим добавить свойства из второго объекта. Вторым значением выступает объект, свойства из которого мы хотим добавить *️⃣
В результате первый объект (в который мы копировали свойства с другого объекта) помимо своих свойств теперь будет иметь и свойства второго объекта. Второй же объект останется исходным 👁🗨 | 232 |
| 20 |  В JavaScript существует множество различных конструкций 🟨
Конструкции в JavaScript – это общее понятие, охватывающее различные типы синтаксических элементов для управления логикой программы 🚟
👉 Рассмотрим основные условные конструкции, которые помогают выполнять разный код в зависимости от условий:
➖ if...else – абсолютно всеми знакомая конструкция, которая проверяет условие и выполняет код в зависимости от результата. (Тернарный оператор "? :" – более короткая альтернатива конструкции if...else)
➖ switch – удобная конструкция для проверки нескольких значений | 213 |
