JavaScript test
9.6K subscribers
3.1K photos
16 videos
4.8K links
Javascript и все что с ним связано

Ссылка: @Portal_v_IT

Сотрудничество: @oleginc
Download Telegram
❓Что будет на выходе?

const num = 8;
const obj = {
num: 10,
inner: {
num: 6,
getNum: function() {
return this.num;
}
}
};
console.log(obj.inner.getNum());
const getNum = obj.inner.getNum;
console.log(getNum());

Ответ: 6 undefined

🖥 JavaScript test // чат
Please open Telegram to view this post
VIEW IN TELEGRAM
Наблюдение за изменением размера любого элемента!

Есть нативный инструмент ResizeObserver, который реагирует именно на изменение размеров конкретного элемента:
const ro = new ResizeObserver(entries => {
const rect = entries[0].contentRect;
console.log('width:', rect.width, 'height:', rect.height);
});


Достаточно наблюдать за элементом:
ro.observe(document.querySelector('#box'));


Теперь любое изменение его ширины или высоты - мгновенно вызывает callback.

Можно остановить наблюдение:
ro.disconnect();


ResizeObserver даёт контроль над размерами элементов и позволяет строить предсказуемые, адаптивные интерфейсы.

🖥 JavaScript test // чат
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
Использование Proxy для валидации объектов

Proxy позволяет перехватывать и изменять операции над объектом, в данном случае используется для валидации значений.

🖥 JavaScript test // чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
🧩Что будет на выходе?

function Animal() {}

function Dog() {}

Dog.prototype = Object.create(Animal.prototype);

const rover = new Dog();

console.log(rover.constructor === Animal);
console.log(rover.constructor === Dog);
console.log(Dog.prototype.isPrototypeOf(rover));
console.log(Animal.prototype.isPrototypeOf(rover));

Ответ: true, false, true, true

🖥 JavaScript test // чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Получаем предыдущий и следующий элементы в массиве — будто «крутим карусель»

Иногда нужно перемещаться по массиву: переключать слайды, шагать по списку товаров, листать подсказки. Сделаем мини-утилиту, которая даёт соседние элементы по индексу.

Базовая функция:
function neighbors(arr, index) {
return {
prev: arr[index - 1] ?? null,
next: arr[index + 1] ?? null
};
}


Использование:
const items = ["A", "B", "C", "D"];

console.log(neighbors(items, 1));
// { prev: "A", next: "C" }


Сделаем версию с циклическим режимом — как в каруселях:
function cycleNeighbors(arr, index) {
const len = arr.length;
return {
prev: arr[(index - 1 + len) % len],
next: arr[(index + 1) % len]
};
}


Использование:
console.log(cycleNeighbors(items, 0));
// { prev: "D", next: "B" }


Мини-инструмент, который сильно упрощает навигацию по массивам: слайдеры, шаговые формы, клавиатурная навигация, циклические списки — всё становится на порядок чище.

🖥 JavaScript test // чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
❗️Что будет на выходе?

function delayedLog(item) {
setTimeout(() => {
console.log(item);
}, 1000);
}
for (var i = 0; i < 3; i++) {
delayedLog(i);
}

Ответ: 0 1 2

🖥 JavaScript test // чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Универсальное чтение файлов: текст, JSON и бинарные данные!

Когда пользователь загружает файл обычно начинают писать разные обработчики. Получается много дублирования.

Можно сделать универсальный ридер:
const readFile = (file, as = 'text') =>
new Promise(r => {
const fr = new FileReader();
fr.onload = () => r(fr.result);
fr[`readAs${as[0].toUpperCase() + as.slice(1)}`](file);
});


Теперь можно читать файл как текст:
const txt = await readFile(file, 'text');


Читаем как JSON:
const obj = JSON.parse(await readFile(file, 'text'));


Читаем картинку в виде base64:
const base64 = await readFile(file, 'dataURL');


Читаем бинарные данные:
const buf = await readFile(file, 'arrayBuffer');


🖥 JavaScript test // чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Алгоритмы и структуры данных с примерами на JavaScript

В этом репозитории лежат JS-примеры реализаций многих популярных алгоритмов и структур данных.

Каждый алгоритм и структуру данных можно изучить подробнее, кликнув по гиперу;

Всё сопровождается подробными пояснениями и ссылками на материалы для дальнейшего изучения.


➡️ Читать статью

🖥 JavaScript test // чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Всем программистам посвящается!

Вот 14 авторских обучающих IT каналов по самым востребованным областям программирования:

Выбирай своё направление:

👩‍💻 Python — t.me/python_ready
🤔 InfoSec & Хакинг — t.me/hacking_ready
🖥 SQL & Базы Данных — t.me/sql_ready
👩‍💻 IT Новости — t.me/it_ready
🤖 AI & ML — t.me/neuro_ready
👩‍💻 Frontend — t.me/frontend_ready
👩‍💻 C/C++ — https://t.me/cpp_ready
👩‍💻 C# & Unity — t.me/csharp_ready
👩‍💻 Linux — t.me/linux_ready
👩‍💻 Java — t.me/java_ready
📖 IT Книги — t.me/books_ready
📱 JavaScript — t.me/javascript_ready
🖼️ DevOps — t.me/devops_ready
🖥 Design —t.me/design_ready

📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!
Please open Telegram to view this post
VIEW IN TELEGRAM
❓Что будет на выходе?

var a = 1;

function scopeQuiz() {
console.log(a);
var a = 2;
}

scopeQuiz();

Ответ: undefined

JavaScript test | ChatGPT
👍2
Обработка исключений на JS – неудобная, но не безнадежная

Автор этой статьи рассказывает про работу с исключениями в JavaScript.

Помимо привычных способов обработки исключений, он также приводит и альтернативные способы, чтобы показать, как сделать её не такой безнадёжной.


➡️ Читать статью

🖥 JavaScript test // чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
🔥Что будет на выходе?

const x = [1, 2, 3];
const y = x;
y.push(4);
console.log(x);

Ответ: [1, 2, 3, 4]

JavaScript test | ChatGPT
👍2
Шпаргалка по JS-методам для работы с DOM

Автор этой статьи сделал подробную и понятную шпаргалку по методам JavaScript для работы с DOM (объектной моделью документа).

Совет: для того, чтобы получить максимальную пользу от данной шпаргалки, пишите код вместе с автором и внимательно следите за тем, что происходит в консоли инструментов разработчика и на странице.


➡️ Читать статью

🖥 JavaScript test // чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
🔨Что будет на выходе?

const product = {
name: "Laptop",
price: 1000,
discount: function(percentage) {
return this.price * (percentage / 100);
}
};
const result = product.discount(10);
console.log(result);

Ответ: 100

JavaScript test | ChatGPT
👍2
Совет по JavaScript:

Можно использовать метод console.table(), чтобы вывести табличные данные в виде таблицы в консоли.

Ты, скорее всего, каждый день пользуешься console.log().
Но знаешь ли ты, что у объекта console есть и другие полезные методы — например, console.table() и console.error()?

➡️ Читать статью

🖥 JavaScript test // чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Каждый JavaScript-разработчик хотя бы раз писал ${name} в обычных кавычках, сохранял файл и видел вместо Hello John просто "Hello ${name}". Потом, конечно, стирал и перепечатывал всё с обратными кавычками.

Теперь об этом можно забыть. Новое расширение Quotick автоматически заменяет обычные кавычки на обратные, как только вы вводите ${}.

Никаких настроек, команд или меню — всё происходит мгновенно и незаметно.

Работает с JS, TS, JSX и TSX

Понимает контекст (не трогает комментарии, импорты и другие строки)

Маленькое улучшение, которое реально экономит время и бережёт нервы

➡️ Ссылка на Github

🖥 JavaScript test // чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Универсальное чтение файлов: текст, JSON и бинарные данные!

Когда пользователь загружает файл обычно начинают писать разные обработчики. Получается много дублирования.

Можно сделать универсальный ридер:
const readFile = (file, as = 'text') =>
new Promise(r => {
const fr = new FileReader();
fr.onload = () => r(fr.result);
fr[`readAs${as[0].toUpperCase() + as.slice(1)}`](file);
});


Теперь можно читать файл как текст:
const txt = await readFile(file, 'text');


Читаем как JSON:
const obj = JSON.parse(await readFile(file, 'text'));


Читаем картинку в виде base64:
const base64 = await readFile(file, 'dataURL');


Читаем бинарные данные:
const buf = await readFile(file, 'arrayBuffer');


🖥 JavaScript test // чат
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
Уже очевидно, что ВАЙБКОДИНГ — главный навык ближайших лет

Посмотрите сами. ИИ уже забирает на себя работу целых команд: пишет код, закрывает задачи джунов и позволяет стартапам запускать продукты в 2–3 раза меньшим составом. То, на что раньше нужны были несколько разработчиков, сегодня всё чаще делает один человек с ИИ-агентами.

И это только начало. Те, кто освоит вайбкодинг сейчас, смогут быстрее запускать проекты, автоматизировать огромный объём работы, увереннее конкурировать на рынке и зарабатывать больше тех, кто продолжает делать всё вручную.

Начать с нуля поможет канал Вайб-кодинг. Там ребята круглосуточно мониторят более 320 российских и зарубежных источников и публикуют только главное: релизы, инструменты, гайды, курсы и практические кейсы.

Подписывайтесь, нас уже 60 тысяч: @vibecoding_tg
25 готовых программ на JavaScript

В статье собрано 25 готовых программ на JS, которые помогут улучшить навыки и продемонстрировать вам, как эффективно решать различные задачи.

Есть проги, созданные как с помощью Vanilla JS, так и с использованием популярных фреймворков.

Сначала идёт описание проектов, а после код, на случай, если вы хотите сделать проекты самостоятельно.

🖥 JavaScript test // чат
Please open Telegram to view this post
VIEW IN TELEGRAM