Jscript учебник: Условное ветвление: if, '?'

Содержание

Книги по Windows Script Host | ProgBook

В книге «Скрипты для администратора Windows. Специальный справочник» находятся базовые сведения, описания и примеры скриптов, которые применяют для администрирования Windows. Приводится рассмотрение основных команд и ключевых слов, используемых в интерпретаторе .bat файлов, интерпретаторе KiXtart и Windows Script Host. Здесь же имеются и рабочие примеры скриптов, выполняющие самые разнообразные задачи по автоматизации работы в среде Windows.

В книге «Командные файлы и сценарии Windows Script Host» Андрея Попова описываются основные команды Windows 9x/NT/2000 и утилиты пакета Windows NT Resource Kit, требуемые при создании командных файлов. Также здесь пользователи ознакомятся с сервером сценариев Windows Script Host (WSH), в которых возможно применение объектов ActiveX для автоматизации задач администрирования операционной системы и управления работой приложений. В содержании книги имеются примеры командных файлов и сценариев WSH, созданных на языке JScript и которые осуществляют доступ к базам данных, файловой системе и службам каталогов.

Книга «Windows Script Host для Windows 2000/XP» Андрея Попова содержит в себе описание сервера сценариев Windows Script Host (WSH) версии 5.6, являющегося одним из стандартных компонентов Windows XP и доступного для установления в Windows более ранних версий. Здесь имеются сценарии на языках VBScript и JScript, показывающие использование стандартных объектов WSH 5.6, в том числе и создание из сценариев дочерних процессов и запуск сценариев на удаленных компьютерах. Для восприятия более сложных примеров приводятся сценарии, которые работают с базами данных, управляют приложениями Microsoft Office, организуют графический пользовательский интерфейс, и используют технологии ADSI (Active Directory Interface) и WMI (Windows Management Instrumentation) для решения задач администрирования. В книге освещаются вопросы практической работы с XML-файлами и создания COM-объектов, наиболее детально рассматриваются вопросы безопасности при работе со сценариями и имеются конкретные примеры настроек политики безопасности.

Книга предназначена программистам и администраторам Windows.

В книге Гюнтера Борна «Руководство разработчика на Microsoft Windows Script Host 2.0» содержатся основы программирования сценариев для Microsoft Windows Script Host 2.0. Изучив данную книгу, пользователь сможет научиться ставить на автомат, при помощи сценариев, решение каждодневных вопросов. Например, настройку Windows и вызов приложений, управление учётными записями пользователей и резервное копирование файлов. В этом издании находятся многочисленные примеры на языках VBScript и JScript. В дополнение к книге идёт компакт-диск с исходными текстами примеров, справочным руководством по языкам программирования сценариев VBScript и JScript, описанием объектной модели WSH, утилитами и электронной версией книги на английском языке. В данной публикации — 14 глав, 2 приложения и предметный указатель. Названия команд, диалоговых окон и других интерфейсных элементов ОС написаны на английском и на русском языках.

JavaScript в примерах и задачах (Алексей Васильев)

Читать отрывок

1 249 ₽

1 050 ₽

+ до 157 бонусов

Купить

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

В наличии

Создание сайтов

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

Описание

Характеристики

Создание сайтов

Эксмо

Как получить бонусы за отзыв о товаре

Сделайте заказ в интернет-магазине

Напишите развёрнутый отзыв от 300 символов только на то, что вы купили

Дождитесь, пока отзыв опубликуют.

Если он окажется среди первых десяти, вы получите 30 бонусов на Карту Любимого Покупателя. Можно писать неограниченное количество отзывов к разным покупкам – мы начислим бонусы за каждый, опубликованный в первой десятке.

Правила начисления бонусов

Книга для новичков с нуля

Книга для начинающих изучать JavaScript.

Книга «JavaScript в примерах и задачах» есть в наличии в интернет-магазине «Читай-город» по привлекательной цене. Если вы находитесь в Москве, Санкт-Петербурге, Нижнем Новгороде, Казани, Екатеринбурге, Ростове-на-Дону или любом другом регионе России, вы можете оформить заказ на книгу Алексей Васильев «JavaScript в примерах и задачах» и выбрать удобный способ его получения: самовывоз, доставка курьером или отправка почтой. Чтобы покупать книги вам было ещё приятнее, мы регулярно проводим акции и конкурсы.

Отточите свои навыки работы с JavaScript с помощью этих 9 обучающих видеороликов по интересным игровым проектам

Тот факт, что 98,4% всех веб-сайтов используют JavaScript, является причиной того, что вам как разработчику следует знать его. Оглядываясь назад, создание игры с помощью JavaScript не только помогает вам быстро учиться. Он также позволяет вам научиться применять его простые и сложные концепции в различных ситуациях на рабочем месте — независимо от того, являетесь ли вы новичком или переподготовкой.

Если вы лучше учитесь с помощью наглядных демонстраций, эти учебные пособия по играм на основе JavaScript на YouTube стоят вашего времени.

1. Карточная игра с JavaScript

Эта карточная игра с JavaScript с Гэвином Лоном покажет вам, как переворачивать карты, используя более 600 строк кода JavaScript. Хотя основное внимание уделяется обучению JavaScript, вы также научитесь сочетать возможности проектирования CSS со структурированием DOM HTML для достижения скорости отклика с помощью JavaScript.

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

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

2. 2D-игра прорыва с JavaScript

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

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

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

3. JavaScript Snake Game

Раскройте ностальгию по игре Snake II на Nokia 3310, создав эту игру JavaScript Snake вместе с Кайлом. Вы, вероятно, играли в нее раньше и, вероятно, будете играть еще много раз в жизни, поскольку вы будете кодировать ее с помощью ванильного JavaScript.

В этом видео показано, как создавать и использовать пользовательские модули в JavaScript, а также динамически связывать модели DOM. Таким образом, это открывает для вас возможность научиться разделять проблемы, используя принцип «не повторяйся» (DRY).

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

4. Игра в крестики-нолики с JavaScript

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

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

Манипулируя DOM с помощью JavaScript, видео оборачивает тяжелую работу вокруг кодирования решений о выигрыше и ничьей, определения ходов игроков и выравнивания объектов. Функции, циклы и условия JavaScript — это некоторые из продвинутых понятий, которые вы изучите в этом обучающем видео JavaScript Tic Tac Toe.

5. Игра-головоломка со слайдами и JavaScript

Головоломки могут быть сложными. Но создание одного с помощью ванильного JavaScript звучит как интересный способ исследовать свои творческие способности и изучить базовые и сложные концепции JavaScript.

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

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

6. Гоночная игра с JavaScript

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

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

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

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

7. Игра Марио с JavaScript

Это руководство по игре Марио на JavaScript — все, что вам нужно, чтобы погрузиться в азы JavaScript. Хотя создание игры про Марио с помощью JavaScript кажется сложным, Крис, ваш наставник, показывает, что это более чем возможно, в этом видео на YouTube. Таким образом, вы можете захотеть повеселиться и изучить свои способности критического мышления, работая вместе с ними.

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

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

8. Создайте Minesweeper с помощью JavaScript

Хотите изучить возможности рекурсивных функций и методов массива при умножении элементов DOM с помощью JavaScript? Вы можете начать с этого учебника JavaScript Minesweeper от Ania Kubów на Traversy Media.

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

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

9. Учебное пособие по игре Pokemon JavaScript с HTML Canvas

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

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

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

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

Изучение приложений JavaScript для решения задач

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

Создание подключаемого модуля для WebStorm — Учебное пособие для разработчиков JavaScript, часть 1

Плагины для разработкиСоветы и рекомендации

Если вы когда-нибудь задумывались о том, как создать плагин для WebStorm или любой другой IDE JetBrains, вы, возможно, знаете, что это непростая задача. Однако есть исчерпывающая документация по разработке плагинов:

Эта документация написана для тех, кто понимает основные концепции Java.
Существуют тысячи открытых API для расширения наших IDE и десятки способов выполнить одну простую задачу для плагина.

С чего начать? Как пройти, если вы не знаете никакой Java? Мы попытаемся ответить на эти вопросы, проведя вас через процесс создания трех плагинов для WebStorm.

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

Шаг 0. Прежде чем что-либо создавать

Как и все другие IDE JetBrains, WebStorm построен на платформе IntelliJ с открытым исходным кодом. И платформа IntelliJ, и WebStorm являются приложениями JVM, написанными в основном на Java и Kotlin. Из-за этого вы не можете создавать для них плагины с помощью JavaScript или TypeScript. Однако вы можете использовать интеграцию на основе JavaScript в плагинах. Например, плагин Import Cost запускает npm-пакет import-cost под капотом.

Итак, с чего начать, если вы хотите создать плагин? Прежде всего, дважды проверьте, существует ли уже искомая функциональность. Он может быть доступен из коробки или в виде плагина на нашем рынке. Если нет, то вы можете попробовать создать плагин.

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

Шаг 1: Решите, какой плагин вы хотите создать

Давайте начнем с создания нашего первого плагина. Мы можем создавать различные типы плагинов:

Фреймворки . В зависимости от фреймворка добавление его поддержки может быть похоже на поддержку нового языка. Если фреймворк расширяет некоторые существующие функции, поддерживать его относительно легко.
Инструменты . Обычно интеграция с внешними инструментами не имеет большого значения. Вам нужно указать место для запуска инструмента и написать простой код для запуска инструмента и анализа результатов.
Языки . Полная языковая поддержка требует большой работы. Вам нужно написать парсер/лексер и реализовать базовые функции, такие как автодополнение кода.
Прочие . Платформа IntelliJ позволяет изменять почти каждую часть IDE, поэтому сложность таких задач может варьироваться от очень простой до чрезвычайно сложной.

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

Шаг 2. Установите IntelliJ IDEA

Теперь, когда мы решили, какой подключаемый модуль мы собираемся создать, нам нужно установить IDE, которая позволит нам это сделать. Мы не можем использовать WebStorm для этой цели, так как нам нужна поддержка JVM. Давайте установим IntelliJ IDEA. Оба издания Community и Ultimate будут работать. Если вы выберете последний платный вариант, вы можете использовать бесплатную 30-дневную пробную версию.

Вы можете загрузить IntelliJ IDEA с нашего веб-сайта или с помощью приложения Toolbox, как показано ниже.

Шаг 3: Получите шаблон подключаемого модуля

Существует несколько способов начать создание подключаемого модуля. Мы рекомендуем использовать шаблон плагина GitHub. Все, что вам нужно, это нажать кнопку Использовать этот шаблон и указать имя плагина.

После этого клонируйте новый проект и откройте его в IntelliJ IDEA. Вы можете сделать это прямо на экране приветствия IDE , нажав кнопку Get from VCS в правом верхнем углу и указав свой репозиторий Git в диалоговом окне следующим образом.

Шаг 4. Настройка Java

Следующим шагом является настройка Java и связанных с ней инструментов. Для этого перейдите в Файл | Структура проекта в главном меню и укажите версию Java в поле Project SDK . Если вы видите там или версия Java ниже 11, вы можете загрузить подходящую версию, как показано ниже.

При скачивании JDK можно выбрать любого вендора с версией выше 11, например Amazon Corretto.

Шаг 5: Настройка сборки плагина

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

Вам не нужно устанавливать Gradle, потому что он распространяется как часть шаблона плагина (файл gradle-wrapper.jar ).

Шаблон подключаемого модуля использует файл gradle.properties для описания основной информации о подключаемом модуле и способах его создания.

Свойства pluginGroup , pluginName и pluginVersion определяют пространство имен, имя и версию подключаемого модуля:

 pluginGroup = mypluginname
pluginName = Имя моего плагина
Версия плагина = 1. 0

Свойства pluginSinceBuild и pluginUntilBuild

определяют диапазон возможных версий IDE, совместимых с подключаемым модулем. Мы создаем наш плагин для WebStorm 2021.2, поэтому добавим следующие значения:

 плагинSinceBuild = 212
pluginUntilBuild = 212.*

Свойство pluginVerifierIdeVersions используется для проверки совместимости подключаемого модуля с другими версиями (с точки зрения API), поскольку обычно при написании подключаемого модуля вы тестируете его только с последней версией. В нашем случае мы можем указать следующее:

 pluginVerifierIdeVersions = 2021.  2

Поля PlatformType и PlatformVersion используются для выбора IDE, которую Gradle будет использовать для запуска и отладки подключаемого модуля. Это еще одна IDE, которая автоматически загружается из Gradle и используется исключительно в конфигурациях запуска.

Итак, при отладке/запуске плагина у вас будет две открытые IDE: первая для разработки плагина, а вторая для тестирования плагина, который мы разрабатываем.

Хотя мы пишем плагин для WebStorm, мы должны использовать IU (IntelliJ IDEA Ultimate) для PlatformType , потому что в настоящее время WebStorm недоступен для загрузки из Gradle. Это не имеет большого значения, поскольку IntelliJ IDEA Ultimate и WebStorm используют одинаковую поддержку JavaScript. Поскольку мы хотим написать плагин для 2021.2, Версия платформы должна быть установлена на 2021.2.


  тип платформы = МЕ
версия платформы = 2021. 2
платформаDownloadSources = истина

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

Дополнительные сведения о настройке Gradle см. в документации.

Нам также необходимо убедиться, что последняя версия подключаемого модуля Gradle IntelliJ указана в build.gradle.kts 9файл 0148. На данный момент последняя версия 1.1.4:

  плагинов {
        //...
        id("org.jetbrains.intellij") версия "1.1.4"
//...
}

Наконец, нам нужно убедиться, что модель Gradle применяется к проекту. Для этого нажмите Загрузить изменения Gradle в правом верхнем углу или нажмите кнопку обновления, которую можно найти в окне инструментов Gradle . Это может занять некоторое время в зависимости от вашего интернет-соединения. Gradle загружает все необходимые ресурсы, включая IntelliJ IDEA, которые будут использоваться для тестирования.

Шаг 6: Обновление plugin.xml

Файл plugin.xml является точкой входа в IDE. Мы можем использовать его для определения зависимостей, сервисов, действий и всего остального, что требуется IDE для загрузки плагина.

Прежде чем начать, нам нужно обновить некоторую базовую информацию в файле plugin.xml , расположенном в src/main/resources/plugin.xml . Мы можем удалить все зарегистрированные расширения и службы и обновить id , name и продавец поля. Обновленный plugin.xml должен выглядеть так:

 
   мой.plugin.id
   Мой плагин
   Мое имя
   com. intellij.modules.platform

Свойство name является общедоступным именем подключаемого модуля. Свойство id — это внутреннее имя плагина. После загрузки плагина на JetBrains Marketplace вы все еще можете изменить общедоступное имя, но id не может быть изменен. Поставщик обычно является именем автора плагина или компании. При желании вы можете указать дополнительные атрибуты в свойстве поставщика .

com.intellij.modules.platform — это зависимость по умолчанию. Его необходимо указать для корректной работы плагина, если нет других зависимостей.

Шаг 7. Очистка проекта

В шаблоне подключаемого модуля есть ряд элементов, которые можно обновить. Прежде всего, мы можем удалить все файлы в папке 9.0147 src/main/kotlin , так как мы удалили использование файлов из plugin.xml . Мы также можем обновить README.md и заменить текст шаблона новым описанием плагина. Файл CHANGELOG.md также содержит текст шаблона, который можно обновить сейчас или позже.

Шаг 8: Укажите зависимости

Новый подключаемый модуль расширит функциональные возможности JavaScript, поэтому нам необходимо указать подключаемый модуль JavaScript в качестве зависимости в plugin.xml :

 JavaScript

Нам также нужно добавить плагин в файл gradle.properties , чтобы уведомить Gradle о том, что плагин должен быть загружен во время работы и отладки:

 platformPlugins = JavaScriptLanguage

Шаг 9: Внедрение простых директив Alpine.

Прежде всего, нам нужно выяснить, что необходимо для поддержки Alpine.js. Давайте создадим новый файл .html с кодом Alpine и посмотрим, как он работает в WebStorm:

 
  
    
      Содержание…

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

Есть несколько способов решить эту проблему, но наиболее очевидными являются:

Реализовать дескрипторы атрибутов, как это сделано в существующем плагине Alpine.js.
Используйте веб-типы для описания директивы, как это сделано для плагина Vue.js.

Второй способ намного проще, так что давайте его.

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

Зарегистрируйте расширение

Теперь вернемся к нашему шаблону плагина. Начнем с создания расширения веб-типов:

Создайте пустой файл JSON, alpine.web-types.json и сохраните его в каталоге resources проекта.
Зарегистрируйте новый файл JSON в точке расширения web-types.

Как мы упоминали ранее, точкой входа для расширений является файл plugin.xml . Нам нужно добавить следующий код в корневой тег idea-plugin :

Некоторые примечания:

Родительский тег extensions описывает, что мы хотим зарегистрировать расширение в стандартном пространстве имен com. intellij . Вложенный тег описывает, что мы регистрируем расширение для точки расширения javascript.webTypes .
Дизайн немного многословен, но все, что он делает, это объясняет, что мы хотим использовать точку расширения, зарегистрированную с путем com.intellij.javascript.webTypes . WebStorm имеет сотни точек расширения, но обычно один плагин использует только несколько из них.
Вам также следует скопировать файл схемы в корень проекта, чтобы обеспечить надлежащую помощь при написании кода в файлах веб-типов. В противном случае IDE будет использовать старую версию схемы, и вы получите множество предупреждений об отсутствии атрибута.

Теперь пришло время написать поддержку первой директивы. Давайте добавим следующее в наш файл alpine.web-types.json :

 {
 "$schema": ". ./../../../schema.json",
 "имя": "Альпийский",
 "версия": "1.0.0",
 "взносы": {
   "html": {
     "атрибуты": [
       {
         "имя": "х-данные"
       }
     ]
   }
 }
}

Пара примечаний:

Раздел contributors определяет возможные расширения (мы планируем использовать веб-типы не только для расширения поддержки HTML, но и для JS и CSS).
Раздел attribute означает, что мы добавляем атрибуты ко всем возможным тегам, как это должно работать для директив в Alpine.

Запуск и отладка

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

Если конфигурация запуска не указана, вы можете запустить подключаемый модуль с помощью задачи Gradle runIde из окна инструментов Gradle .

После запуска среда IDE, скорее всего, запросит у вас лицензию, но вы можете выбрать Бесплатная пробная версия , если у вас нет лицензии IntelliJ IDEA Ultimate.

Подсветка работает корректно для директивы х-данные .

Кроме того, директива отображается во всплывающем окне завершения кода.

Директивы x-text и x-show можно обрабатывать одинаково — добавляя их в JSON-файл web-types.

Шаг 10: Внедрение сложных директив Alpine.js

Директивы x-on и x-bind гораздо сложнее, они работают как префиксы как для событий, так и для других атрибутов. У обоих также есть сокращения.

API веб-типов предоставляет способ описания сложных атрибутов. Нам нужно добавить шаблон свойство со следующей внутренней структурой:

 {
 "имя": "х-связать",
 "шаблон": {
   "предметы": [
     {
       "путь": "/html/атрибуты",
     }
   ],
   "шаблон": [
     "х-связать:",
     "#элемент"
   ]
 }
}

Давайте подробнее рассмотрим некоторые моменты кода выше. Свойство items требуется для добавления элементов после : . Свойство шаблона описывает структуру директивы. Первая часть x-bind , то нам нужно вставить все возможные элементы из свойства items .

Есть только одна проблема с решением: директивы Alpine.js включены в пространство имен /html/attributes . В результате также будут предложены директивы x-bind:x-text . Это можно исправить, добавив в атрибуты «виртуальный» специальный маркер: true , и исключив виртуальные элементы из items :

 «items»: [
 {
   "путь": "/html/атрибуты"
   «включить виртуальный»: ложь
 }

Теперь мы добавили поддержку даже такой сложной директивы, как x-bind . Поддержка x-on и сокращений может быть реализована таким же образом, поэтому пропустим эту часть. Единственное, что нужно иметь в виду, это то, что директивы очень похожи на директивы Vue, которые также описываются с помощью веб-типов, поэтому вы можете позаимствовать некоторые идеи отсюда.

Окончательную версию веб-типов для директив Alpine.js можно найти здесь. На данный момент у нас есть простая поддержка HTML для Alpine.js — WebStorm понимает директивы и предлагает их во всплывающем окне завершения кода.

Шаг 11: Создайте свой плагин

Следующим шагом будет сборка вашего плагина. Это можно сделать с помощью задачи buildPlugin из окна инструментов Gradle .

Как только плагин будет собран, он перейдет в каталог build/distributions , как показано на рисунке.

Шаг 12: Опубликуйте свой плагин

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

Во-первых, вам нужно войти в систему — для этого вы можете использовать существующую учетную запись JetBrains. После этого вы сможете загрузить свой плагин в репозиторий. Нам понадобится некоторое время, чтобы проверить загруженный плагин с нашей стороны, но как только это будет сделано, он будет доступен для загрузки для всех пользователей IDE!

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

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

Команда WebStorm

Разработка подключаемых модулей

Предыдущая запись Информационный бюллетень для разработчиков подключаемых модулей — лето 2021 г. Онлайн-вебинар: Разработчики занятых подключаемых модулей. Эпизод 2 Следующий пост

Подписаться на обновления блога

Форма подписки

Отправляя эту форму, я соглашаюсь с Политикой конфиденциальности JetBrains Значок уведомления

Отправляя эту форму, я соглашаюсь с тем, что JetBrains s.r.o. («JetBrains») может использовать мое имя, адрес электронной почты и данные о местоположении для отправки мне информационных бюллетеней, включая коммерческие сообщения, и для обработки моих личных данных с этой целью. Я согласен с тем, что JetBrains может обрабатывать указанные данные с использованием сторонних сервисов для этой цели в соответствии с Политикой конфиденциальности JetBrains. Я понимаю, что могу отозвать это согласие в любое время в своем профиле. Кроме того, в каждое электронное письмо включена ссылка для отписки.

Jscript учебник: Условное ветвление: if, ‘?’