Как создать простой терминал, например веб-сайт, с помощью jQuery?
Терминал - один из самых распространенных инструментов, используемых разработчиками. Многие приложения, фреймворки и даже языки программирования имеют больше функций, которые можно вызывать с помощью интерфейса командной строки. Большинство компьютеров поставляются с как минимум одним терминалом в своей операционной системе с командной строкой, которая теперь в большинстве случаев заменена кроссплатформенной оболочкой PowerShell в Windows и консолью Linux в ОС на базе Linux.
К настоящему времени большинство из вас понимают терминал как системное приложение, но как мы можем создать терминал, подобный веб-сайту, в браузере. Для этого JavaScript вернулся, этот терминал нравится и ощущается как системный терминал, но не так мощен, как они, но они делают работу за нас, и благодаря некоторым разработчикам у нас есть некоторые библиотеки, которые помогают нам, а не писать из царапать. Некоторые библиотеки - это jQuery.terminal, Xtermjs, для этого урока мы будем использовать JQuery.terminal.
Теперь откройте ваш любимый редактор кода и создайте наш базовый файл html в основном index.html и вызовите наши зависимости
HTML
<!DOCTYPE html>< html lang = "en" >< head > <!--content tpe : HTML --> < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" > <!-- Making viewport responsive --> < meta name = "viewport" content= " width = device -width, minimum-scale = 1 , initial-scale = 1 "> <!-- Loading jQuery, jQuery.terminal, and style sheet --> < script src = </ script > < script src = </ script > < link rel = "stylesheet" href =</ head >< body ></ body ></ html > |
Тело веб-страницы пусто, потому что это место, где мы будем писать наш код JavaScript. Напишем нашу первую команду
Javascript
// In body tag$("body").terminal({ iam: function (name) { this.echo("Hello, " + name + ". Welcome to GeeksForGeeks"); }}, { greetings: "GeeksForGeeks - A place to" + " learn DS, Algo and Computer" + " Science for free"}); |
В приведенном выше коде JavaScript мы используем jQuery для передачи основной части документа в функцию терминала. Затем мы создаем другую функцию внутри функции терминала, которая принимает аргумент. iam - это созданная нами команда, которая печатает ваше имя, переданное в качестве аргумента, и добро пожаловать в GeeksForGeeks.
Приветствие в команде по умолчанию, которая печатается вверху страницы при каждой загрузке страницы. Плагин также содержит команду ошибки, которая выводится, когда команды нет.
Простая команда iam
Мы также можем написать дополнительную команду, такую как команда основателя, которая печатает имя основателя GeeksForGeeks и команду помощи, которая печатает. Обе эти команды передаются без аргументов
Javascript
$( 'body' ).terminal({ iam: function (name) { this .echo( 'Hello, ' + name + '. Welcome to GeeksForGeeks' ); }, founder: function () { this .echo( 'Sandeep Jain' ); }, help: function () { this .echo( 'iam - iam command and' + ' pass your name as argument' + '
founder to know the founder' ); },}, { greetings: 'GeeksForGeeks - A place to' + ' learn DS, Algo and Computer Science' + ' for free'}); |
доступные команды
Теперь мы изменим некоторые стили с помощью тега стиля, мы используем зеленый цвет для всего текста и увеличим размер текста.
HTML
< style type = "text/css" >.terminal,span,.cmd,div { --color: rgba(0, 128, 0, 0.99);}.terminal, span { --size: 1.4;}</ style > |
Полный код ниже
HTML
<!DOCTYPE html>< html lang = "en" >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" > < meta name = "viewport" content=" width = device -width, minimum-scale = 1 , initial-scale = 1 "> < script src = </ script > < script src = </ script > < link rel = "stylesheet" href = < style type = "text/css" > .terminal, span, .cmd, div { --color: rgba(0, 128, 0, 0.99); } .terminal, span { --size: 1.4; } </ style ></ head >< body > < script > $('body').terminal({ iam: function (name) { this.echo('Hello, ' + name + '. Welcome to GeeksForGeeks'); }, founder: function () { this.echo('Sandeep Jain'); }, help: function () { this.echo('iam - iam command and ' + 'pass your name as argument
' + 'founder to know the founder'); }, }, { greetings: 'GeeksForGeeks - A place to' + ' learn DS, Algo and Computer ' + 'Science for free' }); </ script ></ body ></ html > |
Полный вывод с помощью devtools
Вы создали простой интерактивный веб-сайт терминала и настроили его. jquery.terminal также может делать некоторые другие вещи, например
- Форматирование и подсветка синтаксиса.
- JSON-RPC, где все находится на сервере (находится в разделе «Интерпретатор» в вики).
- Изменение подсказки.
- Маскировка паролей.
- Аутентификация.
- Комбинирование команд с оператором Pipe, как в терминале UNIX.
- Сочетания клавиш (список встроенных функций можно найти здесь).
- Чтение текста от пользователей.
- Обработка эмодзи (если система не делает этого из коробки, например Windows10).
- Выполнение команд из JavaScript.
- Вызов команд и методов терминала с Сервера.
- Обновление строк.
- Сохранение состояния в хэше URL и выполнение сохраненных команд.
Вы можете узнать больше о jQuery.terminal из документации и github.