👁🗨 CODORUM
Open in Telegram
🟣 Канал создан с целью совместного обучения программированию на языке JavaScript 🟨 ✔️ Канал подойдёт для тех кто желает: ➖ научиться программировать на языке JavaScript ➖ расширить свой кругозор в знаниях функций на JS 🎥 Ютуб канал: youtube.com/@codo
Show more755
Subscribers
No data24 hours
+17 days
-830 days
Loading data
Similar Channels
No data
Any problems? Please refresh the page or contact our support manager.
Tags Cloud
Incoming and Outgoing Mentions
---
---
---
---
---
---
Attracting Subscribers
October '26Oct '26
October '26
+2
in 0 channels
September '260
in 0 channels
Get PRO
August '26
+5
in 0 channels
Get PRO
July '26
+8
in 0 channels
Get PRO
June '26
+10
in 0 channels
Get PRO
May '26
+14
in 0 channels
Get PRO
April '26
+7
in 0 channels
Get PRO
March '26
+25
in 0 channels
Get PRO
February '26
+23
in 0 channels
Get PRO
January '26
+21
in 0 channels
Get PRO
December '25
+15
in 0 channels
Get PRO
November '25
+43
in 0 channels
Get PRO
October '25
+38
in 0 channels
Get PRO
September '25
+32
in 0 channels
Get PRO
August '25
+28
in 0 channels
Get PRO
July '25
+43
in 0 channels
Get PRO
June '25
+30
in 0 channels
Get PRO
May '25
+31
in 0 channels
Get PRO
April '25
+48
in 0 channels
Get PRO
March '25
+47
in 0 channels
Get PRO
February '25
+54
in 0 channels
Get PRO
January '25
+48
in 0 channels
Get PRO
December '24
+98
in 0 channels
Get PRO
November '24
+65
in 0 channels
Get PRO
October '24
+63
in 0 channels
Get PRO
September '24
+441
in 0 channels
| Date | Subscriber Growth | Mentions | Channels | |
| 18 October | 0 | |||
| 17 October | 0 | |||
| 16 October | 0 | |||
| 15 October | +2 | |||
| 14 October | 0 | |||
| 13 October | 0 | |||
| 12 October | 0 | |||
| 11 October | 0 | |||
| 10 October | 0 | |||
| 09 October | 0 | |||
| 08 October | 0 | |||
| 07 October | 0 | |||
| 06 October | 0 | |||
| 05 October | 0 | |||
| 04 October | 0 | |||
| 03 October | 0 | |||
| 02 October | 0 | |||
| 01 October | 0 |
Channel Posts
Как конвертировать массив в объект на JavaScript? Для этого можно воспользоваться обычным развертыванием с участием Spread оператора 🟨
Объявляем объект и в фигурных скобках добавляем Spread оператор (многоточие в данном случае будет считаться Spread оператором) и название массива, который мы хотим конвертировать в объект ✨
👉 При развертывании:
➖ элементы массива будут конвертированы в свойства объекта
➖ создадутся стандартные ключи для свойств в виде индексов элементов из массива
| 2 | Благодаря методу parseInt можно проводить вычисления с целыми числами (любые действия будут произведены лишь с целой частью чисел) ⏺️
Обратите внимание на умножение числа 3 на десятичное число со скрина. Десятичная часть числа 3.7 была полностью проигнорирована, то есть число 3 было умножено на целую часть числа 🥚
Следовательно, метод пригодится, если необходимо произвести вычисления с целыми числами и проигнорировать все десятичные части чисел 👁️🗨️ | 133 |
| 3 | No text... | 132 |
| 4 | Рассмотрим тип объекта Error в JavaScript ⚜️
Error – тип объекта, использющийся для представления исключительных ситуаций и ошибок кода. Он может содержать информацию об ошибке, включая текстовое описание и стек вызовов ❗
Создать новый объект Error можно через конструктор, а вызвать ошибку можно через оператор throw ⛔
В связке со структурой try...catch, которая позволяет обрабатывать ошибки, можно избежать аварийного завершения программы. Она позволяет выполнять блок кода в попытке try и перехватывать любые возникающие в этом блоке ошибки с помощью блока обработки catch 👁️🗨️ | 146 |
| 5 | useState – это React хук, который используется для контролирования какого-либо локального состояния в компоненте и предоставления обновления этого состояния ⚛️
На гифке пример использования хука useState: есть компонент с надписью и кнопкой ⏏️
➖ "const [count, setCount] = useState(0)" – это состояние, сохраняющее значение переменной count
➖ setCount – функция, обновляющая состояние
➖ значение возле хука "(0)" – это значение переменной count по умолчанию
Также кнопке присвоена функция, увеличивающая значение переменной count на единицу – "onClick={() => setCount(count + 1)}" 👁🗨
Код из гифки:
import { useState } from 'react';
const MyComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Счетчик: {count}</p>
<button onClick={() => setCount(count + 1)}>
добавить
</button>
</div>
);
};
export default MyComponent; | 154 |
| 6 | Как сделать поле ввода для регистрации и авторизации как у Google 🔍
Ключевые моменты:
➖ надпись поля ввода (labelline) меняет свое расположение, размер и цвет при нажатии на поле ввода
➖ у неё есть белый фон, благодаря чему при наезде на границу/обводку поля ввода она перекрывает часть линии
➖ сама обводка поля ввода меняет лишь толщину и цвет, а также высоту (height) и ширину (width) лишь на 2 пикселя, благодаря чему создается впечатление что обводка при нажатии на поле ввода "жирнеет" внутрь
Классы для анимации надписи поля ввода (больше кода не помещается в пост):
.labelline {
position: absolute;
font-size: 2em;
padding: 0 25px;
margin: 0 12px;
background-color: white;
transition: 0.2s ease;
}
input:focus,
input:valid {
border: 3px solid blue;
height: 78px;
width: 498px;
}
input:focus + .labelline,
input:valid + .labelline{
color: blue;
height: 30px;
line-height: 30px;
padding: 0 10px;
transform: translate(-15px, -16px) scale(0.83);
z-index: 1111;
} | 160 |
| 7 | 🔘 Что произойдет с объектом, на который больше не существует доступной ссылки в JavaScript?
Вопрос высокой сложности 🅰️ | 172 |
| 8 | Через свойство length можно узнать количество элементов в интересующем нас массиве или количество символов в строке JavaScript 🟨
Для этого достаточно дописать length через точку после названия массива или строки, количество элементов которого/которой мы хотим узнать 📐
Ну и вывести в новую переменную или в консоль 👁🗨 | 221 |
| 9 | Скоупинг – понятие, охватывающее несколько аспектов, направленных на правильное управление переменными и функциями кода. Для избежания конфликтов и обеспечения прозрачного и безопасного взаимодействия элементов программы 🧿
Основные аспекты скоупинга: Объявление переменных, Объем видимости, Жизненный цикл, Поднятие, Замыкание 🔹
Рассмотрим аспект – жизненный цикл ⏱️
Все переменные в коде существует определенное время. Жизненный цикл локальных переменных, например, короче чем глобальных переменных. Всё потому, что глобальные переменные существуют в течении всего времени работы программы, а локальные только во время работы функций, например. Жизненный цикл блочных переменных обычно ещё короче 👁🗨 | 261 |
| 10 | В JavaScript существует множество типов операторов 🟨
Рассмотрим такой тип операторов - арифметические операторы 🧮
Они предназначены для работы с числовыми значениями 🔢
А именно для сложения чисел, вычитания, умножения, деления, вычисления остатка от деления, возведения к степени, инкремента и декремента ➗ | 324 |
| 11 | Указав путь к изображению в значении url свойства cursor можно поменять отображение курсора 🟦
Можно использовать разные форматы импортируемого изображения, но если вы импортируете невекторное изображение, к примеру формат png, то лучше чтобы оно не превышало размер 100х100 пикселей 👆
.body {
cursor: url(/public/icons/cursor.png), auto;
} | 264 |
| 12 | Async await – это функция JavaScript, позволяющая писать асинхронный код с чистой и понятной синтаксической структурой. Слово async определяет асинхронную функцию, а слово await указывает на ожидание выполнения асинхронной операции 🔀
Если простыми словами, то основная функция отмечена ключевым словом async, которая возвращает какой-то объект Promise. А ключевое слово await используется внутри этой функции (функции async) для ожидания результатов выполнения Promise 🎎
В видео мы рассмотрели пример с функцией async await по вычислению количества процентов числа "b" от числа "a". Часть функции percentFromNum (await) вычислила процент от числа "a", а основная часть функции calculate (async) умножила результат полученный с функции percentFromNum на число "b" 👁🗨 | 251 |
| 13 | 🔘 Что происходит с let и const переменными к моменту их объявления?
Вопрос средней сложности ✴️ | 202 |
| 14 | С помощью метода findLast можно найти последний элемент массива удовлетворяющий определенное условие в JavaScript 🟨
Для этого достаточно задать массив, прописать метод findLast, в скобках которого указать условие для элемента 🔦
Отталкиваясь от этого условия будут поочередно перебираться все элементы с конца массива, пока не будет найден первый с конца массива элемент удовлетворяющий заданное условие 🔬
Когда такой элемент будет найден – он будет выведен в консоль, в случае кода на скрине, и поиск будет остановлен 👁🗨 | 213 |
| 15 | Цикл – это управляющая конструкция, обеспечивающая многократное выполнение блока кода до выполнения заданного условия. Циклы сокращают количество дублирования кода и помогают эффективно работать с данными 🔂
Один из самых распространенных видов циклов – цикл "for" ℹ
В следствие выполнения цикла for на скрине было проведено 3 итераций, на каждой из которых значение переменной "i" увеличивалось на единицу (i++), начиная со значения "i = 0", пока значение переменной не достигло максимального допустимого значения для соблюдения условия цикла и цикл прекратил работу (запуск новых итераций) ✋
На каждой итерации в консоль выводилось новое актуальное значение переменной 👁🗨 | 214 |
| 16 | No text... | 193 |
| 17 | В React существует множество типов компонентов ⚛
Рассмотрим тип компонента - Компонент класса 👤
Компонент класса – один из основных способов создания компонентов, подход которого основан на классах ES6 и использует расширение от базового класса React Component 👥
Можно передавать данные от одного компонента класса к другому компоненту класса 🤝
На примере кода выше есть класс MyComponent который наследует React Component. В конструкторе определяется исходное состояние компонента, а метод render отвечает за отображение элементов в виртуальном DOM 👁🗨 | 191 |
| 18 | Если необходимо распаковать элементы массива таким образом, чтобы каждый элемент массива был присвоен новой самостоятельной переменной – можно воспользоваться Rest оператором 📤
➖ Такой подход называется деструктивным присваиванием: объявляем сразу несколько новых переменных (перечислив их в квадратных скобках). Элементы, которые не нужно присваивать отдельным переменным можно объединить в массив указав его название в конце конструкции и Rest оператор перед ним 👁🗨
Если необходимо распаковать элементы массива в новый массив – можно воспользоваться Spread оператором. Для этого при объявлении нового массива нужно указать название нового массива в квадратных скобках и Spread оператор перед названием 📥 | 217 |
| 19 | Как реализовать анимацию загрузки контента на странице в виде движения линии по блоку с помощью 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 |
| 20 | 🔘 Какой метод преобразует строку в массив, используя указанный разделитель в JavaScript?
Вопрос лёгкой сложности ❇️ | 200 |
