This media is not supported in your browser
VIEW IN TELEGRAM
✅ Исправление орфографических ошибок
Code Spell Checker — это расширение для VSCode.
Цель которого проверка орфографии и помощь выявить распространенные орфографические ошибки, далее исправить их.
➡️ @code_ready | #плагин
Code Spell Checker — это расширение для VSCode.
Цель которого проверка орфографии и помощь выявить распространенные орфографические ошибки, далее исправить их.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍37🔥7
Как реализованы принципы ООП в JavaScript, приведите примеры
Ответ:
function Counter() {
let count = 0;
this.increment = function() {
count++;
};
this.getCount = function() {
return count;
};
}
const counter = new Counter();
counter.increment();
console.log(counter.getCount()); // 1
console.log(counter.count); // undefined
2. Наследование — возможность создавать новые классы на основе существующих. В JS наследование реализуется с помощью прототипов. Объект может наследовать свойства и методы от другого объекта, который называется его прототипом.
function Animal(name) {
this.name = name;
}
Animal.prototype.sayName = function() {
console.log(`My name is ${this.name}`);
};
function Cat(name) {
Animal.call(this, name);
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
const cat = new Cat('Tom');
cat.sayName(); // My name is Tom
3. Полиморфизм — возможность использовать один и тот же интерфейс для разных типов данных. В JS полиморфизм реализуется с помощью переопределения методов и динамического типирования.
function drawShape(shape) {
if (shape.type === 'circle') {
console.log('Drawing a circle');
} else if (shape.type === 'square') {
console.log('Drawing a square');
}
}
const circle = { type: 'circle' };
const square = { type: 'square' };
drawShape(circle); // Рисуем круг
drawShape(square); // Рисуем квадрат
4. Абстракция — способность скрывать детали реализации и предоставлять только необходимый интерфейс. В JS абстракция достигается с помощью интерфейсов и абстрактных классов.
function createAnimal(name, sound) {
return {
name: name,
makeSound: function() {
console.log(sound);
}
};
}
const cat = createAnimal('Cat', 'Meow');
const dog = createAnimal('Dog', 'Woof');
cat.makeSound(); // Meow
dog.makeSound(); // Woof
Please open Telegram to view this post
VIEW IN TELEGRAM
👍62🔥18😁1
С помощью свойства mix-blend-mode, можно изменять способ смешивания цветов элемента с его фоновым изображением или цветом.
Принимает следующие значения:
• normal - элемент не смешивается с фоном (по умолчанию)
• multiply - умножение цвета элемента на цвет фона
• screen - инвертирование умножения инверсии цвета элемента на инверсию цвета фона
• overlay - смешивание multiply и screen, в зависимости от прозрачности элемента
• darken - использует более темный цвет из элемента или фона
• lighten - использует более светлый цвет из элемента или фона
• color-dodge - уменьшает насыщенность цвета фона в соответствии с цветом элемента
• color-burn - увеличивает насыщенность цвета фона в соответствии с цветом элемента
Остальные принимаемые значения оставлю в комментариях
Please open Telegram to view this post
VIEW IN TELEGRAM
👍29🔥8
Метод Object.create cоздает новый объект с указанным прототипом и свойствами.
Он принимает два аргумента: первый — объект, который будет прототипом для нового объекта.
Второй — необязательный, объект, содержащий свойства и их дескрипторы, которые будут добавлены в новый объект.
Если первый аргумент не передан или равен null, то новый объект будет создан с Object.prototype в качестве прототипа.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥7
This media is not supported in your browser
VIEW IN TELEGRAM
Пользователь может загрузить файл, перетащив его на выделенную область на сайте либо выбрать файл через стандартный диалог открытия файла операционной системы.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19👍13👎1
📄 Примитивы в JavaScript - это миф?
В данной статье разберем как в JavaScript реализованы примитивные типы данных.
На примерах с графиками сравним выделения памяти для них и придем к неочевидному выводу
⛓ Ссылочка: https://habr.com/ru/articles/824614/
➡️ @code_ready | #статья
В данной статье разберем как в JavaScript реализованы примитивные типы данных.
На примерах с графиками сравним выделения памяти для них и придем к неочевидному выводу
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
Doka — это полезный сайт для веб-разработчиков, предоставляющий исчерпывающие руководства и справочники по HTML, CSS и JavaScript.
⛓ Ссылочка: https://doka.guide/
➡️ @code_ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍52🔥12
Как реализовать асинхронное программирование в JavaScript?
Ответ:
// Функция с колбэком
function fetchData(callback) {
setTimeout(() => {
callback('Data received');
}, 1000);
}
fetchData(data => {
console.log(data); // Data received
});
// Функция возвращает промис
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Data received');
}, 1000);
});
}
fetchData().then(data => {
console.log(data); // Data received
});
// Функция возвращает промис
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Data received');
}, 1000);
});
}
// Асинхронная функция с await
async function getData() {
const data = await fetchData();
console.log(data); // Data received
}
getData();
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31🔥7
✅ Как работает Array,map() в JS?
Функция Array,map: Создает новый массив путем вызова указанной функции для каждого элемента исходного массива и собирает результаты в новый массив.
Она принимает один обязательный аргумент — это функция обратного вызова (callback), которая будет применена к каждому элементу исходного массива.
Callback может принимать до трёх аргументов:
• currentValue — екущий обрабатываемый элемент массива.
• index — Индекс текущего обрабатываемого элемента в массиве.
• array — Массив, по которому осуществляется проход.
• Также есть необязательный аргумент thisArg — значение, используемое в качестве this при вызове функции callback
Пример кода:
➡️ @code_ready | #функция #js
Функция Array,map: Создает новый массив путем вызова указанной функции для каждого элемента исходного массива и собирает результаты в новый массив.
Она принимает один обязательный аргумент — это функция обратного вызова (callback), которая будет применена к каждому элементу исходного массива.
Callback может принимать до трёх аргументов:
• currentValue — екущий обрабатываемый элемент массива.
• index — Индекс текущего обрабатываемого элемента в массиве.
• array — Массив, по которому осуществляется проход.
• Также есть необязательный аргумент thisArg — значение, используемое в качестве this при вызове функции callback
Пример кода:
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31🔥7
👍23🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Создание списка дел
Приложение To-Do List позволяет создавать и управлять списком задач. Пользователь может добавить новую задачу, а также удалить уже существующую.
😸 Ссылочка на репозиторий:
➡️ @code_ready | #github
Приложение To-Do List позволяет создавать и управлять списком задач. Пользователь может добавить новую задачу, а также удалить уже существующую.
https://github.com/TgCodeReady/Code-Ready.-Upload-files/tree/main/To%20Do%20List
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24😁9👎5🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Создание CSS-шаблона для html
eCSStractor - это плагин для VSCode, который помогает разработчикам извлекать CSS-стили из HTML-файлов. Он предоставляет инструменты для автоматического извлечения стилей из HTML-кода и создания соответствующих CSS-правил.
➡️ @code_ready | #плагин
eCSStractor - это плагин для VSCode, который помогает разработчикам извлекать CSS-стили из HTML-файлов. Он предоставляет инструменты для автоматического извлечения стилей из HTML-кода и создания соответствующих CSS-правил.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍28🔥4👎2
✅ Дополнительные фильтры для картинок
Мы уже рассмотрели многие фильтры для картинок свойства filter. Но остались ещё некоторые:
• Атрибут invert() инвертирует образцы во входном изображении. Принимает значения от 0% (оставляет входные данные неизменными) до 100% (полностью инвертирует).
• Атрибут saturate() насыщает изображение. Принимает от 0% (ненасыщенно) до 100% (оставляет входные данные неизменными). Но также он может принимать значения свыше 100%, обеспечивая сверхнасыщенные результаты.
➡️ @code_ready | #свойство #css
Мы уже рассмотрели многие фильтры для картинок свойства filter. Но остались ещё некоторые:
• Атрибут invert() инвертирует образцы во входном изображении. Принимает значения от 0% (оставляет входные данные неизменными) до 100% (полностью инвертирует).
• Атрибут saturate() насыщает изображение. Принимает от 0% (ненасыщенно) до 100% (оставляет входные данные неизменными). Но также он может принимать значения свыше 100%, обеспечивая сверхнасыщенные результаты.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🔥10👎3
Code Ready | Frontend
✅ Дополнительные фильтры для картинок Мы уже рассмотрели многие фильтры для картинок свойства filter. Но остались ещё некоторые: • Атрибут invert() инвертирует образцы во входном изображении. Принимает значения от 0% (оставляет входные данные неизменными)…
👋 Всем доброго вечера. Как вам данный пост?
И хочу спросить, какие рубрики с этого канала вам нравятся больше всего? Голосуйте в комментариях. Допустим #github или #свойство.
Это важно чтобы контент канала улучшался с каждым разом). А также ставьте под каждым постом реакции 👍🔥, чтобы я понимал какой именно пост вам понравился, спасибо.
И хочу спросить, какие рубрики с этого канала вам нравятся больше всего? Голосуйте в комментариях. Допустим #github или #свойство.
Это важно чтобы контент канала улучшался с каждым разом). А также ставьте под каждым постом реакции 👍🔥, чтобы я понимал какой именно пост вам понравился, спасибо.
🔥31👍11👎2
✅ Вопрос с собеседования
Какая разница между function declaration и function expression в JS?
Ответ:
Function Declaration:
• Используется ключевое слово function в начале строки кода.
• Обычно используется для создания функций, которые должны быть доступны во всем текущем контексте выполнения (например, внутри любых блоков кода в текущем скрипте).
• Функции, объявленные таким образом, поднимаются вверх в области видимости (hoisting), что означает, что они могут быть вызваны до фактического объявления функции в коде.
Function Expression:
• Функция присваивается переменной как значение.
• Обычно используется для создания анонимных функций или функций, которые должны быть доступны только внутри определенного контекста выполнения.
• Функции, созданные таким образом, не поднимаются вверх в области видимости (hoisting), их можно вызывать только после того, как они были присвоены переменной.
➡️ @code_ready | #собеседование
Какая разница между function declaration и function expression в JS?
Ответ:
• Используется ключевое слово function в начале строки кода.
• Обычно используется для создания функций, которые должны быть доступны во всем текущем контексте выполнения (например, внутри любых блоков кода в текущем скрипте).
• Функции, объявленные таким образом, поднимаются вверх в области видимости (hoisting), что означает, что они могут быть вызваны до фактического объявления функции в коде.
Function Expression:
• Функция присваивается переменной как значение.
• Обычно используется для создания анонимных функций или функций, которые должны быть доступны только внутри определенного контекста выполнения.
• Функции, созданные таким образом, не поднимаются вверх в области видимости (hoisting), их можно вызывать только после того, как они были присвоены переменной.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍37🔥6👎1
This media is not supported in your browser
VIEW IN TELEGRAM
OverAPI — это удобный сайт для программистов, предоставляющий коллекцию шпаргалок и документации по различным языкам программирования и технологиям.
⛓ Ссылочка: https://overapi.com/
➡️ @code_ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25👍17👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Реализовано на HTML, CSS и JS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥5👎1
✅ Эффект свечения
Для его создания долго объяснять ничего не придется, главное понимать как работает Css свойство text-shadow, весь остальной код максимально простой.
В примере на картинке, мы используем этот код:
➡️ @code_ready | #css
Для его создания долго объяснять ничего не придется, главное понимать как работает Css свойство text-shadow, весь остальной код максимально простой.
В примере на картинке, мы используем этот код:
text-shadow: 0px 0px 14px rgba(255,255,255,0.7);
• Первые 2 параметра (0px, 0px) отвечают за то, на сколько тень будет смещаться по горизонтали и по вертикале.
• Третий параметр (14px) это радиус размытия тени.
• И последний это цвет тени (255,255,255), в нашем случае он белый. Последние цифры в rgba (0.7) это значение альфа-канала, которое определяет прозрачность цвета (значение от 0 до 1).
Please open Telegram to view this post
VIEW IN TELEGRAM
👍33🔥8😁2👎1