JavaScript Learning
Ir al canal en Telegram
Обучающий канал по JavaScript По всем вопросам @mascarov_valentin
Mostrar más4 370
Suscriptores
Sin datos24 horas
-57 días
-2830 días
Archivo de publicaciones
4 370
Matrix
Анимация с кодом из фильма «Матрица», реализованная с помощью JavaScript. Можно выбрать свой цвет кода и количество кадров в секунду, а также алфавит символов.
https://codepen.io/pavi2410/pen/oNjGVgM
4 370
Как работает прототипное наследование в JavaScript? Можете ли вы объяснить разницу между классическим наследованием и прототипным?
Прототипное наследование в JavaScript означает, что объекты наследуют свойства и методы от другого объекта, известного как прототип. В отличие от классического наследования, где классы являются схемами для создания объектов, в JavaScript объект может наследовать непосредственно от другого объекта.
Ключевой особенностью прототипного наследования является то, что оно позволяет объектам делиться свойствами и методами, что упрощает повторное использование кода. Например, если у вас есть объект animal, и вы создаете объект dog, который наследует от animal, dog будет иметь доступ ко всем свойствам и методам animal.
Классическое наследование, часто встречающееся в языках, таких как Java или C++, включает в себя иерархию классов, где классы наследуются от других классов. В JavaScript прототипное наследование позволяет объектам наследовать напрямую друг от друга, что делает его более гибким, но также может быть более запутанным для понимания без тщательного изучения.
4 370
Rounded Box - Matcap texture
Куб с зеркальными гранями, выполненный с помощью Pug, Sass и библиотеки Three.js
https://codepen.io/vcomics/pen/JjpgBwY
4 370
Как записать несколько выражений в одну строку?
Для этого мы можем использовать оператор "," (запятая). Этот оператор «двигается» слева направо и возвращает значение последнего выражения или операнда.
Если мы выведем значение x в консоль, то получим 27. Сначала мы увеличиваем значение x на единицу (x = 6). Затем вызываем функцию addFive() с параметром 6, к которому прибавляем 5 (x = 11). После этого мы умножаем значение x на 2 (x = 22). Затем вычитаем 5 (x = 17). И, наконец, прибавляем 10 (x = 27).
4 370
Нахождение самого длинного слова в массиве
У нас есть массив, содержащий несколько строк. Далее мы создаём переменную, которая содержит пустую строку. А теперь, чтобы обнаружить самую длинную строку в этом массиве, нам нужно взглянуть на все элементы массива, и если длина элемента массива больше длины переменной "most_lengthy_string", то мы переназначаем переменную.
4 370
#вопросы_с_собеседований
Как следует оформлять страницу, содержимое которой может быть на разных языках?
Вопрос немного расплывчатый. Полагаю, что речь о наиболее частом случае: как показывать страницу, где содержимое доступно на нескольких языках, но отображается на одном определенном.
Когда к серверу делается HTTP-запрос, то браузер пользователя обычно отсылает информацию о предпочитаемом языке в заголовке Accept-Language. Сервер может использовать эту информацию, чтобы вернуть версию документа на подходящем языке, если такая возможность есть. В возвращённом HTML-документе обязательно должен быть указан атрибут
lang у тега <html>, к примеру <html lang="en">...</html>.
На бэкенде HTML-разметка будет содержать плейсхолдер i18n, а контент для конкретного языка будет храниться в YAML- или JSON-формате. Сервер динамически формирует HTML-страницу с контентом на конкретном языке, чаще всего при помощи бэкенд-фреймворка.4 370
Вопросы на собеседовании по фронтенду
Видеокаст от канала webDev, который можно использовать для подготовки к собеседованиям на позицию джуниор и миддл фронтенд-разработчика.
🎬Смотреть
4 370
#вопросы_с_собеседований
В чем смысл указания use strict в начале JS-файла?
Данная команда включает строгий режим, где предупреждения становятся ошибками, что помогает писать более чистый и безопасный код.
4 370
#вопросы_с_собеседований
В чем разница между атрибутами и свойствами?
Атрибут — термин из HTML, а свойство — из JS. Атрибут — значение в HTML-разметке, а свойство принадлежит объекту JavaScript.
4 370
💻 Quickchat UI Themes
Адаптивная панель управления с темой пользовательского интерфейса Quickchat. Реализована с помощью JavaScript.
4 370
Обновление элементов на странице
Элементы React иммутабельны. После создания элемента нельзя изменить его потомков или атрибуты. Элемент похож на кадр в фильме: он отражает состояние интерфейса в конкретный момент времени.
Рассмотрим пример с часами на фото.
В этом примере root.render() вызывается каждую секунду с помощью колбэка setInterval().
На практике большинство React-приложений вызывают root.render() только один раз.
4 370
Атрибуты ARIA
ARIA используется для описания элементов веб-страницы, позволяет пользователям с ограниченными возможностями лучше понимать и взаимодействовать с сайтом.
Он включает в себя ряд ролей, состояний и свойств, которые могут быть добавлены к HTML-элементам.
ARIA позволяет создавать более доступный интерфейс для пользователей с нарушениями зрения, слуха, координации движений, когнитивных способностей и других проблем.
Важно отметить, что использование ARIA не заменяет необходимости создания доступного HTML-кода.
ARIA следует использовать только в тех случаях, когда стандартные HTML-элементы не могут обеспечить достаточной информации для пользователей с ограниченными возможностями.
Использование ARIA может быть сложным и требует знаний в области доступности веб-приложений.
4 370
💻SPA умеют почти все. А вот интерфейс, который живёт в реальном времени, без перезагрузок и костылей, обычно ломает даже уверенных фронтендеров.
📆На открытом вебинаре OTUS вы соберёте мини-биржу на Vue: поднимем локальный WebSocket-сервер с мок-данными, подключим подписку на стрим, выведем список валют, изменения цен и индикаторы роста/падения. Добавим живые графики (ApexCharts или Chart.js) и обновления.
Разберём архитектуру real-time интерфейсов: реактивные данные, управление соединением, обработка событий и потоков, обновления без перезагрузки. Покажем, как после урока заменить мок-источник на реальный WebSocket-поток.
👉Встречаемся 14 января в 20:00 МСК в преддверие старта курса «Vue.js-разработчик». Регистрация открыта: https://otus.pw/3yt1/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
4 370
Как работает прототипное наследование в JavaScript? Можете ли вы объяснить разницу между классическим наследованием и прототипным?
Прототипное наследование в JavaScript означает, что объекты наследуют свойства и методы от другого объекта, известного как прототип. В отличие от классического наследования, где классы являются схемами для создания объектов, в JavaScript объект может наследовать непосредственно от другого объекта.
Ключевой особенностью прототипного наследования является то, что оно позволяет объектам делиться свойствами и методами, что упрощает повторное использование кода. Например, если у вас есть объект animal, и вы создаете объект dog, который наследует от animal, dog будет иметь доступ ко всем свойствам и методам animal.
Классическое наследование, часто встречающееся в языках, таких как Java или C++, включает в себя иерархию классов, где классы наследуются от других классов. В JavaScript прототипное наследование позволяет объектам наследовать напрямую друг от друга, что делает его более гибким, но также может быть более запутанным для понимания без тщательного изучения.
4 370
С кодом у тебя всё ок.
Если что-то не работает — смотришь логи, находишь баг, фикcишь.
А с женщинами ощущение, будто:
— документации нет
— поведение недетерминированное
— один и тот же input → разный output
— вчера работало, сегодня — игнор
Ты вроде нормальный парень.
Не токсик. Не дурак. Не бедный.
По логике этого должно хватать.
Но система не сходится.
Ты общаешься — вроде без ошибок.
А в ответ холод, странные реакции или «давай как-нибудь потом».
Самое бесячее — ты не понимаешь, где именно происходит краш.
Со временем я понял простую вещь:
в отношениях и общении с женщинами другая архитектура.
Не интуиция. Не магия.
Просто другие правила, которые никто не объяснил.
В этом канале я разбираю это как систему:
что реально влияет, где ты теряешь контроль,
и как перестать действовать методом тыка.
Если ты привык дебажить, а не гадать — оставайся. Тут будет полезно: https://t.me/+6_ztAb3YBqc3Y2Yy
4 370
Дорогие подписчики, поздравляю вас с наступающим новым годом! Пусть в 2026 году исполнятся все ваши самые заветные желания🎄🎄🎄🎄
4 370
Какова цель метода clearInterval?
Функция clearInterval() используется в javascript для очистки интервала, установленного функцией setInterval(). т. е. возвращаемое значение, возвращаемое функцией setInterval(), сохраняется в переменной и передается в функцию clearInterval() для очистки интервала. Например, приведенный на картинке метод setInterval используется для отображения сообщения каждые 3 секунды. Этот интервал можно очистить методом clearInterval().
4 370
Логические свойства CSS
Логические свойства CSS позволяют управлять стилями элементов, основываясь на их расположении на странице, а не на их конкретных свойствах. Это облегчает создание адаптивных и отзывчивых дизайнов, а также уменьшает количество кода CSS.
Вот несколько примеров логических свойств CSS:
- margin-inline-start и margin-inline-end - управляют отступами элемента слева и справа, в зависимости от направления текста на странице.
- padding-block-start и padding-block-end - управляют внутренним отступом элемента сверху и снизу, в зависимости от направления текста на странице.
- border-block-start и border-block-end - управляют границами элемента сверху и снизу, в зависимости от направления текста на странице.
4 370
SUBMIT
Анимированная кнопка, выполненная с помощью CSS, SVG и JavaScript.
https://codepen.io/jkantner/pen/zYdaBPJ
¡Ya disponible! Investigación de Telegram 2025 — los principales insights del año 
