⌨ Область видимости переменных

Область видимости переменных в JavaScript определяет доступность переменных в том или ином участке кода. С 2015 года в ES6 появилась область действия блока. К переменным let и const, которые объявлены внутри блока { }, нельзя получить доступ извне этого блока:

{
let x = 10;
}
// x нельзя использовать здесь

Переменные, которые объявлены при помощи ключевого слова var, не могут иметь блок { } в качестве области видимости:

{
var x = 10;
}
// x можно использовать здесь

Переменная, объявленная через var, имеет либо глобальную область видимости, либо область действия внутри функции.

Сайтодел | #код #javascript

🌐 Choices.js – библиотека JavaScript для создания полей ввода

Это небольшая легковесная библиотека JavaScript, которая позволяет работать с полями ввода или выбором текста. Отличительной особенностью Choices.js является то, что она не имеет зависимости от jQuery.

Сам по себе выбор (choice) применительно к этой библиотеке - это значение, которое выбирает пользователь. Он будет эквивалентен элементу <option></option> внутри тега <select></select>. Выборы могут объединяться в коллекции. Которые называются группами. Группу следует рассматривать как эквивалент элемента <optgroup></optgroup>

Основные преимущества Choices.js – это настраиваемая сортировка, гибкая стилизация, быстрый поиск и фильтрация, чистый API и использование пользовательских шаблонов. Библиотека работает на нативном JavaScript.

Сайтодел | #библиотека #javascript

🌐 Uglify.js – библиотека JavaScript для сжатия файлов

Эта библиотека используется, чтобы сжимать и объединять JavaScript-файлы. Благодаря Uglify.js размер HTTP-ответов с сервера уменьшается, поэтому сайт начинает работать быстрее. Библиотека содержит различные инструменты, которые позволяют автоматизировать работу с кодом JavaScript.

К числу этих инструментов относятся:
- парсер, создающий абстрактное синтаксическое дерево (AST) из кода JavaScript;
- генератор кода, который выводит код JavaScript из AST и предоставляет возможность получить исходную карту;
- механизм, сокращающий имена локальных переменных до (обычно) одинарных букв.

Uglify.js также содержит анализатор области видимости, который представляет собой инструмент, дополняющий AST информацией о том, где определены или указаны переменные. В библиотеке есть простой API, позволяющий вам что-то делать на каждом узле в AST, и еще один API, предназначенный для преобразования дерева.

Сайтодел | #библиотека #javascript

⌨ Можно ли изменить константу в JavaScript?

Принято считать, что в языке JavaScript константа const не может меняться и повторно принимать значения. Этим она отличается от переменных, объявленных через let и var

В данном примере мы не можем записать в константу новое значение:

const a = "Сайтодел";
a = "Канал";

Если в константу помещен объект, то мы можем перезаписывать свойства. После замены свойства name на экране появляется значение "Канал":

const user = {
name: "Сайтодел"
};
user.name = "Канал";
alert(user.name); // Канал

Та же особенность актуальна и для массивов, в которые можно перезаписывать данные с помощью методов вроде .push() и .unshift()

Сайтодел | #код #javascript

⌨ Зачем нужен метод join() в массивах JavaScript?

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

Содержимое массива разделяется запятыми, поэтому вы можете оставить их как есть, склеить, заменить пробелами или другими знаками:

const elements = ['Я', 'изучаю', 'JavaScript'];

console.log(elements.join()); // Я, изучаю, JavaScript

console.log(elements.join('')); // ЯизучаюJavaScript

console.log(elements.join('-')); // Я-изучаю-JavaScript

Метод join() бывает полезен на практике, когда на экран необходимо вывести все элементы массива, например изображения, но при этом убрать мешающие запятые.

Сайтодел | #код #javascript

🌐 Axios – библиотека JavaScript для работы с HTTP-запросами

Эта библиотека используется для взаимодействия с AJAX и HTTP-запросами. Она довольно популярная и применяется не только с Vue, Angular и React, но и с Node.js на сервере. Axios прост в использовании и обладает богатым функционалом.

Axios полностью поддерживает Promise API, обрабатывает XMLHttpRequests в браузерах и HTTP-запросы из Node.js, перехватывает запросы и ответы и преобразует входные и выходные данные.

Библиотека автоматически преобразует формат JSON и защищает на стороне клиента от CSRF-атак. Axios абсолютно бесплатный и имеет открытый исходный код на GitHub.

Сайтодел | #библиотека #javascript

🌐 Survey.js - библиотека JavaScript для создания опросов и викторин

Библиотека позволяет создавать полностью настраиваемые опросы, формы и тесты, которые легко интегрируются в приложение. С помощью Survey.js вы можете показывать опросы в браузере, менять их внешний вид и даже создать собственное хранилище данных.

Survey.js позволяет писать код для опросов за короткое время, проводить подсчет результатов и хранить полученные данные. Опросы, сделанные на Survey.js, можно внедрять в любое приложение.

Работу библиотеки легко расширить с помощью сторонних виджетов JavaScript, которые не включены в продукт. Survey.js основан на JSON и совместим с различными фреймворками и библиотеками JavaScript, такими как React, Angular, jQuery и Vue.

Сайтодел | #библиотека #javascript

⌨️ Метод splice в JavaScript

Иногда бывает нужно удалить какой-либо элемент из массива. Для этого можно использовать delete. Однако тут есть проблема – количество элементов в массиве не изменится, а на месте удаленного элемента останется незаполненное пространство:

let arr = ["Я", "читаю", "Сайтодел"];

delete arr[1]; //

alert( arr[1] ); // undefined

arr = ["Я", , "Сайтодел"];

Чтобы избежать этой проблемы, используем метод splice()

let arr = ["Я", "читаю", "Сайтодел"];

arr.splice(1, 1); // удалить 1 элемент с позиции 1

alert( arr ); // осталось два элемента

Метод splice() позволяет вырезать элементы из массивов, не оставляя при этом «дыры» на их месте.

Сайтодел | #код #javascript

🌐 Choreographer.js - библиотека JavaScript для работы с CSS-анимациями

Это очень маленькая (примерно 2 Кб) библиотека для обработки сложных CSS-анимаций, которые могут быть привязаны к любым событиям. Choreographer.js дает возможность создавать анимацию через JavaScript, а не с помощью чистого CSS.

Библиотека предоставляет ряд свойств, которые вы можете легко настроить и расширить во время использования. Сюда относятся выбор типов движения, настройка стилей для объектов и настройка эффектов движения на основе таких событий, как перемещение мыши, прокрутка и так далее.

Choreographer.js также может добавлять пользовательские функции, которые выполняют анимацию, отличную от CSS. Чтобы начать пользоваться библиотекой, просто установите пакет через npm или подключите файл через тег <script> в качестве скрипта.

Сайтодел | #библиотека #javascript

🌐 Gatsby.js – фреймворк JavaScript для создания бессерверных сайтов

Это бесплатный фреймворк с открытым исходным кодом, основанный на React. Gatsby.js помогает разработчикам создавать невероятно быстрые веб-сайты и приложения. Он сочетает в себе контроль и масштабируемость динамически отображаемых сайтов со скоростью генерации статических сайтов.

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

Сайтам на Gatsby.js не требуются серверы, поэтому вы можете разместить весь свой сайт на CDN. Многие сайты Gatsby могут быть размещены совершенно бесплатно в Gatsby Cloud и на других подобных сервисах.

Сайтодел | #фреймворк #javascript

💾 Image Slider – слайдер для веб-страниц, выполненный в ярком и современном стиле. Он позволяет перелистывать слайды легко и удобно. Слайдер адаптивный для мобильных устройств.

Сайтодел | #сниппет #javascript

⌨️ Метод shift в JavaScript

Для работы с массивами в JavaScript используются методы. Метод shift() убирает первый элемент массива с индексом [0] и возвращает его.

Удобство метода shift() в том, что он изменяет длину массива:

let arr = [ 1, "javascript", true ];
arr.shift();
console.log (arr); // [ "javascript", true ]

После удаления числа 1 из массива, элементом с индексом [0] стала строка. Иными словами, весь ряд сдвинулся на один элемент.

При работе с пустым массивом метод shift() возвращает undefined

Сайтодел | #код #javascript

🌐 Mocha.js – фреймворк JavaScript для тестирования

Это многофункциональный фреймворк JavaScript, который работает на Node.js и в браузере. Mocha.js предназначен для тестирования как синхронного, так и асинхронного кода и имеет очень простой интерфейс.

Основные возможности Mocha.js – это поддержка асинхронности, в том числе Promise, а также таймаутов, которые обеспечивают асинхронное выполнение.

Mocha.js можно использовать с большинством библиотек, однако этот фреймворк обычно используется с Chai, популярной assertion-библиотекой для Node.js и браузеров. Тесты в фреймворке инициализируются серийно, поэтому отчеты создаются гибко и точно.

Сайтодел | #фреймворк #javascript

🌐 Math.js – библиотека JavaScript для работы с математическими операциями

Math.js – это обширная библиотека для JavaScript и Node.js . Она оснащена гибким парсером выражений с поддержкой символьных вычислений, поставляется с большим набором встроенных функций и констант, а также предлагает интегрированное решение для работы с различными типами данных: числа, большие числа, дроби, строки, массивы.

Библиотека работает на любом движке JavaScript и совмещается со встроенной библиотекой Math для JavaScript. Math.js поддерживает многочисленные расширения и используется как в браузере, так и в Node.js.

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

Сайтодел | #библиотека #javascript

⌨️ Оператор ! в JavaScript

Этот оператор (его также называют логическое НЕ) выражает в языке JavaScript отрицание. Он преобразует значение в противоположное и относится к булеву типу:

let firstVar = true;
let secondVar = false;
alert(!firstVar); // false
alert(!secondVar); // true

Если оператор логического отрицания использовать два раза подряд, он вернет исходное значение операнда:

let firstVar = true;
let secondVar = false;
alert(!!firstVar); // true
alert(!!secondVar); // false

Важно помнить, что оператор ! сначала приводит любое значение к булеву типу, будь то строка или число. Только потом он меняет значение на противоположное. Пустые строки и число ноль определяются как false.

Сайтодел | #код #javascript

🌐 Bluebird.js – библиотека JavaScript, которая работает с промисами

Эта библиотека реализует функционал промисов в языке JavaScript. Bluebird.js включает в себя множество возможностей, таких как отмена, методы итерации и предупреждения, которых нет в нативных промисах. Преимущество библиотеки – быстрая работа.

Метод finally регистрирует обработчик, который срабатывает независимо от конечного состояния промиса (fulfilled или rejected). В Bluebird.js улучшен метод catch, который с легкостью фильтрует ошибки.

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

Сайтодел | #библиотека #javascript

🌐 Plotly.js – библиотека JavaScript для создания диаграмм

Эта высокоуровневая библиотека предназначена для построения интерактивных диаграмм. Все графики в Plotly.js можно настраивать: вы можете выбрать большое количество точек, цвета, подписи, метки, а также применить масштабирование и панорамирование.

Plotly.js дает возможность создавать точечные и линейные графики, круговые и пузырьковые диаграммы, гистограммы, различного вида шкалы и другие графические способы передачи данных. Она поддерживает анимацию графиков и создание 3D-моделей.

Библиотека подходит для работы с большим количеством данных. Plotly.js совместима с разными браузерами и позволяет экспортировать изображения диаграмм. Изображения 3D создаются при помощи WebGL.

Сайтодел | #библиотека #javascript

🌐 Howler.js – библиотека JavaScript для работы с аудио

Эта библиотека делает работу со звуком в языке JavaScript простой и надежной на всех платформах. Ее преимущества – это упрощенный API, поддержка большого количества аудиоформатов, совместимость с разными браузерами и отсутствие внешних зависимостей.

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

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

Сайтодел | #библиотека #javascript

🌐 Go.js – библиотека JavaScript для создания интерактивных диаграмм

Эта библиотека позволяет создавать графики и диаграммы с помощью языков JavaScript и TypeScript. С помощью Go.js можно создавать блок-схемы, различные типы диаграмм, а также инструменты проектирования и планирования.

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

Другие важные особенности Go.js – это привязка и синхронизация данных, а также совместимость с такими популярными фреймворками, как Vue, React и Angular.

Сайтодел | #библиотека #javascript

💾 Mobile Gallery – интерактивная мобильная галерея, которая подойдет для интернет-магазина. Изображения можно масштабировать, а также листать вправо и влево.

Сайтодел | #сниппет #javascript