⌨ Конструкция Switch в JavaScript

Switch…case – это конструкция, с помощью которой можно проверить условие на совпадение с конкретными значениями.

Она похожа на конструкцию if…else, однако последняя чаще используется на соответствие диапазону, а не определенным ответам.

Оператор switch берет выражение или значение переменной и перебирает варианты ответов с помощью ключевого слова case до тех пор, пока не найдет нужный результат среди множества вариантов.

В конце каждого блока кода со словом case нужно ставить оператор break, чтобы выйти из цикла.

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

🌐 Microlight.js – библиотека для работы с кодом

Microlight.js - это крошечная библиотека с открытым исходным кодом, которая улучшает читаемость фрагментов кода, выделяя их для любого языка программирования без добавления дополнительных языковых пакетов или стилей.

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

Размер библиотеки очень компактный – всего 2,2к! Вам не нужно указывать, какой это язык: код может быть смешанным и содержать в себе несколько языков.

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

🌐 Change Case – плагин для VSCode для работы с текстом

Этот плагин может преобразовывать текст в разные регистры. Помимо нижнего и верхнего регистра в нем предусмотрены и другие варианты: Camel Case или Pascal Case, разделение строк при помощи точек и слешей и так далее.

Change Case помогает в разных ситуациях, когда нужно быстро изменить регистр в редакторе. Он может также пригодиться для рефакторинга, иными словами чтобы привести имена переменных к одинаковому виду.

Для того, чтобы начать работать с плагином Change Case, выделите нужный вам текст и задайте необходимый регистр через Command Palette.

Сайтодел | #расширение #vscode

👨‍💻 [УРОК 78] Adonis JS – фреймворк для Node.js

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

📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья

⌨️ Как создать функцию-конструктор?

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

Прежде чем сделать отдельный объект, необходимо создать функцию-конструктор:

function Person(name, age, spec, city) {
this.name = name;
this.age = age;
this.spec = spec;
this.city = city;
}

Мы создали функцию-конструктор, а теперь пора добавить конкретный экземпляр:

const anna = new Person('Anna', 30, 'designer', 'Moscow');
console.log(anna);

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

🌐 iziModal.js – плагин для создания модальных окон

Этот плагин позволит вам создавать красивые модальные окна, которые можно самостоятельно редактировать и настраивать. Для окон применяются различные эффекты, которые легко настроить.

iziModal.js работает на jQuery. Для работы достаточно скачать плагин, подключить библиотеку и стили плагина. У iziModal.js имеются готовые варианты для фрейма, формы, AJAX`a.

Для работы с плагином для работы вам нужна копия библиотеки jQuery. Для библиотеки можно также включть библиотеку извне от CDNJS.

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

⌨ Метод map() в массиве

При помощи метода map() можно вернуть новый массив, который содержит трансформированные значения обрабатываемого массива.

Способ трансформирования задаётся в передаваемой этому методу функции:

const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el+20);
console.log(mapped);
// [21, 22, 23, 24, 25, 26];

При помощи метода map() можно таким образом изменять внутренние данные в массиве.

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

🌐 GraphQL - расширение VSCode, которое проверяет и подсвечивает код

Расширение GraphQL VSCode создано с целью тесной интеграции экосистемы GraphQL с VSCode для удобства разработчиков. Это расширение обеспечивает подсветку синтаксиса (тип, запрос, интерфейс, объединение, перечисление, фрагменты, директивы).

GraphQL выполняет переход к определению, просматривает информацию о наведении (hover) и cоздает автозаполнение для проектов graphql. Оно работает с запросами, помеченными тегом gql.

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

Сайтодел | #расширение #vscode

🌐 Log File Highlighter – расширение VSCode для поддержки log-файлов

Это расширение Visual Studio Code создано для добавления цветовой подсветки в log-файлы. Оно основано на стандартных соглашениях для файлов журналов log4net, но подходит и для других вариантов log-файлов.

Цвета в Log File Highlighter настраиваются, но по умолчанию используется текущая цветовая тема. Более ранняя версия подсветки из этого расширения была включена в Visual Studio Code версии 1.20.

Если вам нравится, как выглядят изначально log-файлы в VSCode, то вам не нужно это расширение. Однако если вам нужна дополнительная подсветка, настраиваемые шаблоны и расчет продолжительности времени, то смело устанавливайте Log File Highlighter.

Сайтодел | #расширение #vscode

⌨ Оператор break в JavaScript

Оператор break нужен для того, чтобы прервать выполнение текущего цикла. Как только в коде появляется break, происходит выход из цикла и выполнение кода завершается.

Дальнейшая работа продолжается с конструкции, которая следует за прерванной.

Очень часто оператор break используется в конструкции switch…case:

let language = 'ru';
switch (language) {
case 'ru':
alert('русский');
break;
case 'en':
alert('английский');
break;
case 'de':
alert('немецкий');
break;
default:
alert('такого языка нет);
}

Если значения совпадают, то выводится только нужное значение, а остальные – нет. Это возможно благодаря оператору break.

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

👨‍💻 [УРОК 79] Premonish – библиотека JavaScript для предсказывания действий пользователя

В этом уроке вы узнаете, как установить и запустить библиотеку Premonish, а также как с ней работать. Вы также прочитаете об ее основных преимуществах.

📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья

🌐 Cleave.js – библиотека JavaScript для форматирования поля input

Библиотека имеет простую цель: помочь вам автоматически форматировать вводимый текстовый контент (input). Используя эту библиотеку, вам не нужно будет писать какие-либо регулярные выражения или шаблоны для работы со входным текстом.

Cleave.js включает в себя форматирование номера кредитной карты, номера телефона, даты и цифр. Библиотека имеет пользовательский шаблон разделителей, префиксов и блоков. Поддерживается режим CommonJS.

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

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

🌐 Material UI – библиотека для работы с React-приложениями и сайтами

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

Библиотека проста в использовании и может применяться для быстрого создания приложений. Она находится в открытом доступе и применяется в крупных организациях, таких как Netflix, Spotify и Amazon.

Ключевые особенности Material UI – это то, что она поддерживает согласованность пользовательского интерфейса, работает во всех браузерах и с большинством CSS-решений для JS и весит менее 4 КБ при сжатии.

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

⌨ Метод find() в JavaScript

Метод find() вернет значение первого найденного в массиве элемента, которое удовлетворяет условию, переданному в функцию.

В противном случае возвращается undefined, например, если такого элемента в массиве нет.

Создадим массив, в котором есть три объекта:

const arr = [
{ id: 1, name: "Сайтодел" },
{ id: 2, name: "Телеграм" },
{ id: 3, name: "Канал" },
]

Для того, чтобы найти третий элемент, воспользуемся методом find():

arr.find(element => element.id === 3)
// Output : {id: 3, name: " Канал "}

Элемент номер 7 найти не удалось, так как его не существует:

arr.find(element => element.id === 7)
//Output : undefined

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

🌐 Voca – библиотека JavaScript для работы со строками

Библиотека предлагает полезные функции для того, чтобы манипуляции со строками были еще удобнее: изменение регистра, обрезка, накладка, латинизация и многое другое. Voca предоставляет полный набор функций для управления, форматирования и экранирования строк.

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

Voca поддерживает различные среды разработки: Node.js 0.10+, Chrome, Firefox, Safari 7+, Edge 13+, IE9+. Библиотека включает подробную, легкую для чтения и доступную для поиска документацию.

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

👨‍💻 [УРОК 80] CSS Peek – расширение для работы со стилями

В этом уроке вы узнаете о том, что такое CSS Peek, какие у него преимущества, как установить это расширение и как им пользоваться.

📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья

🌐 Apache Conf – расширение VSCode, которое поддерживает синтаксис Apache

Расширение создано для работы с синтаксисом Apache. Оно поддерживает такие расширения файлов, как .conf, .htaccess, .htgroups, .htpasswd.

Apache Conf позволит VS Code понять, что это файл Apache, и автоматически правильно выбрать язык. Определите Apache conf в качестве языка: в правом нижнем углу нажмите кнопку «Выбрать языковой режим».

Чтобы установить расширение в Visual Studio Code, откройте панель команд с помощью клавиш Ctrl+Shift+P или введите в командную строку ext install apache.

Сайтодел | #расширение #vscode

⌨️ Шаблонные литералы в JavaScript

В современном стандарте JavaScript вместо конкатенации, то есть «склеивания» строк, можно использовать шаблонные литералы.

Вот так писали раньше:

var name = prompt("Введите свое имя");
var age = prompt("Введите свой возраст");
console.log("Меня зовут " + name + ", мне " + age + " лет");

А сейчас стало проще:

var name = prompt("Введите свое имя");
var age = prompt("Введите свой возраст");
console.log(`Меня зовут ${name}, мне ${age} лет`);

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

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