👨‍💻 [УРОК 76] Selenium - инструмент автоматизации действий на сайтах

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

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

⌨ Как преобразовать строку в массив?

Иногда бывает нужно сделать так, чтобы строка была разделена на несколько частей.

Ее отрезки помещаются в массив, который получается при преобразовании.

Допустим, у нас есть переменная с фамилией, именем и отчеством:

var a = “Иванова Елена Владимировна”;

Создаем массив:

var arr = a.split (“ ”);

Чтобы вызвать какой-либо элемент массива, обратимся к его индексу через квадратные скобки:

аlert (a.split(“ ”)[0]) // Иванова
аlert (a.split(“ ”)[1]) // Елена
аlert (a.split(“ ”)[2]) // Владимировна

Нумерация при этом начинается, как и положено в массиве – с нуля.

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

🌐 Rainbow Brackets – расширение VSCode, которое подсвечивает скобки

Иногда мы забываем поставить скобки в нужном месте, и весь код перестает работать! Расширение Rainbow Brackets помогает бороться с этой проблемой. С набором разноцветных подсветок сразу станет понятнее, какие скобки относятся к какой части кода.

Приложение подсвечивает парные скобки одинаковым ярким цветом, а одиночные – красным, чтобы вы точно не упустили их. Rainbow Brackets выделяет и квадратные, и фигурные скобки.

Расширение особенно популярно у программистов, которые работают с языком JavaScript. Найти Rainbow Brackets можно в разделе «Расширения» в VSCode.

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

🌐 MetaGo – расширение VSCode для быстрого перемещения курсора и выделения текста

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

В MetaGo есть свои собственные горячие клавиши, например Alt+a для изменения выбранного участка, Ctrl+o, Ctrl+l для работы с текстом, ctrl+alt+/ чтобы добавить новый курсор. Теперь вы можете выбрать более одного участка текста за один раз!

Навигация по закладкам происходит тоже при помощи горячих клавиш: Alt+' для переключения закладки в месте расположения курсора, Alt+ [ перейти к предыдущей закладке, Alt+] перейти к следующей закладке, Alt+\ для отображения списка закладок с меню управления.

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

👨‍💻 [УРОК 77] D3.js – библиотека JavaScript для визуализации данных

В этом уроке вы узнаете, как установить популярную JS-библиотеку D3.js, ознакомитесь с методами, которые позволяют делать выбор HTML-элементов, а также с другими методами, которые используются в работе с веб-документом.

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

Деструктуризация в JavaScript

Деструктуризация массива – это способ, который позволяет извлекать из него части.

В стандарте ES5 можно было извлекать элементы из массива следующим образом:

var mas = ["Канал", "Сайтодел"];
var firstName = mas[0];
var lastName = mas[1];

Деструктуризация выглядит иначе:

let [firstName, lastName] = mas;

alert(firstName); // Канал
alert(lastName); // Сайтодел

Таким образом, массив разбивается на составные части.

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

🌐 Knockout JS – библиотека JavaScript для работы с каркасом веб-приложений

Библиотека реализует паттерн MVVM (Model - View - ViewModel) и используется для создания функциональных пользовательских интерфейсов на JavaScript и HTML.

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

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

Knockout JS весит всего 13 кБ после сжатия и поддерживает новые и старые браузеры, в том числе IE 6+, Firefox 2+, Chrome, Safari, Edge.

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

⌨ Конструкция 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, а также как с ней работать. Вы также прочитаете об ее основных преимуществах.

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