👁🗨 CODORUM
Kanalga Telegram’da o‘tish
🟣 Канал создан с целью совместного обучения программированию на языке JavaScript 🟨 ✔️ Канал подойдёт для тех кто желает: ➖ научиться программировать на языке JavaScript ➖ расширить свой кругозор в знаниях функций на JS 🎥 Ютуб канал: youtube.com/@codo
Ko'proq ko'rsatish755
Obunachilar
Ma'lumot yo'q24 soatlar
+17 kun
-830 kun
Ma'lumotlar yuklanmoqda
O'xshash kanallar
Ma'lumot yo'q
Muammo bormi? Iltimos, sahifani yangilang yoki bizning qo'llab-quvvatlash boshqaruvchimizga murojaat qiling>.
Taglar buluti
Kirish va chiqish esdaliklari
---
---
---
---
---
---
Obunachilarni jalb qilish
Oktabr '26Okt '26
Oktabr '26
+2
0 kanalda
Sentabr '260
0 kanalda
Get PRO
Avgust '26
+5
0 kanalda
Get PRO
Iyul '26
+8
0 kanalda
Get PRO
Iyun '26
+10
0 kanalda
Get PRO
May '26
+14
0 kanalda
Get PRO
Aprel '26
+7
0 kanalda
Get PRO
Mart '26
+25
0 kanalda
Get PRO
Fevral '26
+23
0 kanalda
Get PRO
Yanvar '26
+21
0 kanalda
Get PRO
Dekabr '25
+15
0 kanalda
Get PRO
Noyabr '25
+43
0 kanalda
Get PRO
Oktabr '25
+38
0 kanalda
Get PRO
Sentabr '25
+32
0 kanalda
Get PRO
Avgust '25
+28
0 kanalda
Get PRO
Iyul '25
+43
0 kanalda
Get PRO
Iyun '25
+30
0 kanalda
Get PRO
May '25
+31
0 kanalda
Get PRO
Aprel '25
+48
0 kanalda
Get PRO
Mart '25
+47
0 kanalda
Get PRO
Fevral '25
+54
0 kanalda
Get PRO
Yanvar '25
+48
0 kanalda
Get PRO
Dekabr '24
+98
0 kanalda
Get PRO
Noyabr '24
+65
0 kanalda
Get PRO
Oktabr '24
+63
0 kanalda
Get PRO
Sentabr '24
+441
0 kanalda
| Sana | Obunachilarni jalb qilish | Esdaliklar | Kanallar | |
| 18 Oktabr | 0 | |||
| 17 Oktabr | 0 | |||
| 16 Oktabr | 0 | |||
| 15 Oktabr | +2 | |||
| 14 Oktabr | 0 | |||
| 13 Oktabr | 0 | |||
| 12 Oktabr | 0 | |||
| 11 Oktabr | 0 | |||
| 10 Oktabr | 0 | |||
| 09 Oktabr | 0 | |||
| 08 Oktabr | 0 | |||
| 07 Oktabr | 0 | |||
| 06 Oktabr | 0 | |||
| 05 Oktabr | 0 | |||
| 04 Oktabr | 0 | |||
| 03 Oktabr | 0 | |||
| 02 Oktabr | 0 | |||
| 01 Oktabr | 0 |
Kanal postlari
Как конвертировать массив в объект на JavaScript? Для этого можно воспользоваться обычным развертыванием с участием Spread оператора 🟨
Объявляем объект и в фигурных скобках добавляем Spread оператор (многоточие в данном случае будет считаться Spread оператором) и название массива, который мы хотим конвертировать в объект ✨
👉 При развертывании:
➖ элементы массива будут конвертированы в свойства объекта
➖ создадутся стандартные ключи для свойств в виде индексов элементов из массива
| 2 |  Благодаря методу parseInt можно проводить вычисления с целыми числами (любые действия будут произведены лишь с целой частью чисел) ⏺️
Обратите внимание на умножение числа 3 на десятичное число со скрина. Десятичная часть числа 3.7 была полностью проигнорирована, то есть число 3 было умножено на целую часть числа 🥚
Следовательно, метод пригодится, если необходимо произвести вычисления с целыми числами и проигнорировать все десятичные части чисел 👁️🗨️ | 133 |
| 3 | Matn yo'q... | 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 | Matn yo'q... | 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 |
