Статьи с тегом «JavaScript»

FrontendCSSJavaScript

Работа с CSS переменными

Одно из преимуществ CSS переменных — хранение таких значений, как цвета, размеры и другие элементы дизайна, в одном месте, с последующим использованием их во всей таблице стилей. Мы расскажем о значении CSS переменных и о том, как упростить поддержку и обновление стилей, что позволит повысить навыки фронтенд-разработки.
JavaScriptFrontend

Пользовательские события CustomEvent

JavaScript CustomEvent расширяют функциональность встроенной системы событий. Проще говоря, они позволяют программистам создавать и обрабатывать события, уникальные для их приложения, и в этой статье мы расскажем о них всё.
JavaScript

Функции высшего порядка в JavaScript

Функции высшего порядка — одна из самых мощных возможностей JavaScript, позволяющая разработчикам писать лаконичный, гибкий и модульный код. Функция высшего порядка — это просто функция, которая либо принимает одну или несколько функций в качестве аргументов, либо возвращает функцию в качестве результата. В этой статье мы рассмотрим, что такое функции высшего порядка, почему они полезны и как использовать их в своём коде.
JavaScript

Объектно-ориентированное программирование в JavaScript

В этой статье мы рассмотрим объектно-ориентированное программирование в JavaScript: Узнайте, как использовать классы, наследование и инкапсуляцию для получения более чистого и эффективного кода в ваших веб-проектах.
JavaScript

Понимание BOM в JavaScript: Быстрое объяснение с примерами

JavaScript — универсальный язык программирования, позволяющий разработчикам создавать динамичные и интерактивные веб-приложения. Хотя основная функциональность языка заключается в манипулировании веб-контентом с помощью объектной модели документа (DOM), JavaScript также предоставляет объектную модель браузера (BOM) для взаимодействия со средой браузера.
JavaScriptTypeScript

JSDoc: Надёжная альтернатива TypeScript

Многие разработчики предпочитают использовать TypeScript из-за его функций проверки типов. Однако это требует дополнительного шага транспонирования, который может быть хлопотным и отнимающим время. В этой статье мы расскажем, как использовать JSDoc, чтобы получить все те же элементы контроля, но писать на обычном JavaScript, что позволяет сократить время разработки и улучшить документацию!
JavaScriptNodeJS

Как использовать файловую систему в Node.js

Веб-приложениям не всегда нужна запись в файловую систему, но Node.js предоставляет для этого обширный интерфейс прикладного программирования (API). Это может понадобиться, если вы ведёте логи отладки, передаёте файлы на сервер или с сервера, или создаёте инструменты командной строки.
JavaScript

Изучение новых методов массивов из ECMAScript 2023

В ECMAScript 2023 появились новые функции, призванные улучшить язык и сделать его более мощным и удобным. Новая версия включает в себя интересные функции и новые методы массивов JavaScript, благодаря которым программирование на JavaScript становится более лёгким и приятным. В этой статье мы подробно рассмотрим функциональные возможности новых методов JavaScript на прототипах массивов.
JavaScript

Что такое цепочка прототипов в JavaScript

Цепочка прототипов — это механизм в JavaScript, позволяющий объектам наследовать свойства и методы других объектов, имея общий прототип. В JavaScript каждый объект имеет связанный с ним прототип объекта, и эти прототипы образуют цепочку. Когда свойство или метод не найдены в объекте, JavaScript просматривает цепочку прототипов, чтобы найти его в прототипе объекта или в прототипах его предков.
JavaScript

Очистите свой JavaScript: Избавьтесь от регулярных выражений

В этой статье я рассмотрю регулярные выражения, также известные как Regex, и попытаюсь убедить вас в том, что их наличие в вашей кодовой базе — плохая идея. Для краткости я не буду пытаться объяснить внутреннюю работу и применение Regex, но постараюсь убедить вас в необходимости их рефакторинга из вашей кодовой базы.
JavaScript

Очистите свой JavaScript: Трансформация условных операторов

В программировании, особенно в динамичном и постоянно развивающемся мире JavaScript, путь от новичка до опытного профессионала сопряжён с множеством трудностей и кривых обучения. Один из важнейших выводов, который я вынес из своего богатого опыта, как в качестве интервьюера, так и в качестве интервьюируемого, заключается в огромной важности понимания "почему", стоящего за нашими кодовыми решениями. Именно такое глубокое понимание и способность чётко сформулировать причины каждого решения действительно отличают исключительных специалистов.
JavaScriptNodeJS

Переменные среды/окружения в Node.js: Как правильно их установить

Вы когда-нибудь сталкивались с проблемой управления различными конфигурациями в Node.js приложениях? Хотелось бы иметь централизованный и организованный способ работы с такими секретами, как ключи API и учётные данные баз данных? Не ищите дальше! На помощь приходят переменные среды. В этой статье мы погрузимся в мир переменных среды в Node.js, рассмотрим их преимущества, примеры использования и лучшие практики эффективного управления ими.
JavaScript

О чем нам говорит удаление свойств объектов в JavaScript

Удаление свойств объекта в JavaScript — не самая интересная задача, но существует множество способов её решения, каждый из которых раскрывает фундаментальный аспект работы JavaScript. В этой статье Juan Diego Rodríguez рассматривает каждый из способов.
JavaScript

Проверка существования свойства объекта в JavaScript

Когда нам необходимо проверить, содержит ли объект JavaScript определённое свойство, мы можем использовать несколько методов, включая операторы JavaScript, специфические статические методы класса Object, методы экземпляра объекта, методы экземпляра массива и пользовательскую функцию JavaScript.
JavaScript

Нюансы base64-кодирования строк в JavaScript

Кодирование и декодирование base64 — это распространённая форма преобразования двоичного содержимого для представления его в виде безопасного для веб-приложений текста. Она широко используется для URL данных, таких как встроенные изображения.
JavaScript

Шпаргалка по кодировке символов для JavaScript разработчиков

Кодировка символов — важнейший аспект разработки JavaScript как на фронтенде, так и на бэкенде. В этой статье мы рассмотрим основы кодирования символов, его важность и то, как оно влияет на отображение данных на веб-страницах. Также обсудим лучшие практики и типичные ошибки, которые помогут вам избежать проблем с кодировкой в своих проектах.
JavaScript

Введение в htmx

Современные веб-пользователи ожидают от одностраничных приложений (SPA) плавных и динамичных эффектов. Однако для создания SPA часто используются сложные фреймворки, такие, как React и Angular, которые могут быть сложны для изучения и работы с ними. Появилась htmx — библиотека, позволяющая по-новому взглянуть на создание динамических веб-приложений, используя такие возможности, как Ajax и CSS-переходы, непосредственно в HTML.
JavaScript

Руководство по оптимизации JavaScript файлов

В этой статье мы рассмотрим практические методы оптимизации JavaScript-файлов, способы решения проблем производительности, связанных с JavaScript-файлами, а также инструменты, помогающие в процессе оптимизации. Вы получите знания, позволяющие повысить скорость работы веб-приложений и обеспечить бесперебойную работу пользователей.
FrontendJavaScriptCSSHTML

Как реализовать пагинацию с помощью HTML, CSS и JavaScript

В Интернете пагинация — это способ разбиения больших фрагментов содержимого на более мелкие части. В этой статье мы рассмотрим простой способ разделения содержимого на ряд "страниц" с помощью HTML, CSS и обычного JavaScript.
JavaScript

Ленивая загрузка в JavaScript

Ленивая загрузка — это метод, позволяющий отложить загрузку несущественного содержимого до того момента, когда оно станет необходимым для просмотра пользователем. В отличие от других методов загрузки, при которых все объекты сайта загружаются одновременно при доступе к странице, при ленивой загрузке используется более расчётливый подход. Она откладывает отображение некоторых элементов, таких как изображения, видео и другие мультимедиа, до тех пор, пока пользователь не начнёт активно взаимодействовать с веб-страницей. В этой статье мы расскажем вам, как использовать эту технологию, чтобы пользователи получали больше удовольствия от работы с вашим сайтом.
JavaScript

Десять соглашений об именовании JavaScript, которые должен знать каждый разработчик

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

Свойства API-интерфейса IntersectionObserver

Вчера мы рассмотрели, как определить, когда элемент входит или выходит из области просмотра. Сегодня мы познакомимся с некоторыми подробностями, которые можно получить об этих элементах из объекта IntersectionObserverEntry.
JavaScript

Как определить, когда элемент входит или выходит из области просмотра с помощью ванильного JavaScript

API Intersection Observer можно использовать для наблюдения за элементом и запуска функции обратного вызова, когда он входит или выходит из области просмотра (или из другого элемента).
JavaScript

Наследование в объектно-ориентированном программировании JavaScript

Наследование в объектно-ориентированном программировании (ООП) JavaScript — фундаментальная концепция, которая развивалась с течением времени, и в этой статье мы покажем, как она работает и как её использовать.
JavaScript

Знакомство с примитивными объектами в JavaScript (первая часть)

В первой части серии Кирилл Мышкин рассказывает о некоторых аспектах JavaScript, помогающих приблизить объекты к примитивным значениям, что позволяет воспользоваться общими возможностями языка, которые обычно не ассоциируются с объектом, такими как сравнение и арифметические операторы.
JavaScript

Использование нескольких селекторов с помощью методов селектора JavaScript

Один из моих любимых трюков ванильного JS заключается в том, что вы можете передать несколько селекторов в такие методы селектора JavaScript, как Element.querySelector(), Element.querySelectorAll(), Element.closest() и Element.matches().
JavaScript

JavaScript: Delay, Sleep, Pause, & Wait

Многие языки программирования имеют функцию sleep, которая задерживает выполнение программы на заданное количество секунд. Однако эта функциональность отсутствует в JavaScript из-за его асинхронной природы. В этой статье мы рассмотрим почему это произошло, а затем как реализовать функцию sleep самостоятельно.
JavaScript

JavaScript: Управление потоком

В этой статье мы подробно рассмотрим, как работать с асинхронным кодом в JavaScript. Мы начнём с обратных вызовов, перейдём к промисам и закончим более современными async/await. В каждом разделе будет предложен пример кода, изложены основные моменты, о которых следует знать.
JavaScript

JavaScript: Функциона­льное Выражение vs. Объявление Функции

В JavaScript есть два способа создания функции: функциональное выражение и объявление функции. Мы обсудим когда использовать функциональное выражение, а когда объявление и объясним различия между ними.
JavaScript

JavaScript: Руководство по async/await, с примерами

Ключевые слова async и await представляют современный синтаксис JavaScript, помогающий обрабатывать асинхронный операции. В этом руководстве мы подробно рассмотрим, как использовать async/await для управления потоком данных.
JavaScript

JavaScript: Спасение из ада обратных вызовов

Ад обратного вызова реален. Разработчики часто рассматривают обратные вызовы как чистое зло, вплоть до того, что избегают их. Гибкость JavaScript совсем не помогает в этом. Но не обязательно избегать обратных вызовов. Хорошая новость в том, что есть простые шаги спасения от ада обратных вызовов.
JavaScript

JavaScript: Что такое функции обратного вызова/Callback

Когда вы начинаете изучать JavaScript, вскоре услышите термин функции обратного вызова. Обратные вызовы — неотъемлемая часть модели выполнения JavaScript, и важно понимать, что они из себя представляют и как работают.
JavaScript

JavaScript: Более безопасное чтение и запись URL

Создание и манипулирование URL-адресами в виде строк может казаться безопасным, пока не сложатся общие ошибки. Но у современного JavaScript есть решение для этого, Конструктор URL, делает чтение, запись и изменение URL-адресов более безопасным и чистым.
JavaScriptFrontend

JavaScript: Руководство по localStorage

Cookie были единственным способом хранения временной и локальной информации, но теперь у нас есть localStorage. Он широко обсуждается и используется во множестве приложений JavaScript. В этой статье мы рассмотрим всё, что нужно знать о localStorage в JavaScript.
JavaScriptNodeJS

JavaScript: различие между require и import

Ключевое слово import используется для импорта привязок, которые экспортируются другим модулем, а функция require() используется для загрузки модуля в приложении Node.js. Эти два механизма похожи, но у них есть важные отличия о которых вам следует знать. Мы обсудим их в этой статье.
JavaScript

JavaScript: Понимание асинхронных вызовов

При написании кода для web, в конечном итоге вам требуется выполнить некий процесс, который может занять несколько минут. JavaScript не может работать в многозадачном режиме, поэтому нам нужен способ обработки этих длительных процессов.
JavaScriptNodeJS

Сравнение Node.js с JavaScript в браузере

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

Зачем нужны веб-фреймворки и как обойтись без них

В этой статье подробно рассматривается несколько технических возможностей, которые являются общими для всех фреймворков. Объясняется как они реализуются в различных фреймворках и какова стоимость их применения.
JavaScript

Возможности ES2022: блоки статической инициализации класса

Для настройки статической части класса у нас есть только статические поля. Предложение ECMAScript вводит статические блоки инициализации для классов, которые, грубо говоря, являются для статических классов тем же, чем конструкторы являются для экземпляров.
JavaScriptFrontendBackend

JavaScript: Четыре хитрых концепции в одной строке

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

Введение в деструктуризацию массивов в ES6

Деструктуризация в JavaScript — упрощенный метод извлечения нескольких свойств из массива путем извлечения структуры и разложения её на составные части с помощью присваивания, используя синтаксис, похожий на литералы массива.
JavaScript

Объяснение JSON простым языком

Долгое время XML был предпочтительным форматом данных для обмена между двумя точками. Затем, в начале 2000 года, был представлена JSON как альтернативный формат данных для обмена информацией. В этой статье вы узнаете всё о JSON. Вы поймёте, что это такое, как им пользоваться, и мы проясним несколько заблуждений.