如何使用jQuery建立类似于简单终端的网站

终端是开发人员最常使用的工具之一。许多应用程序、框架、甚至编程语言都有更多的功能，可以使用命令行界面来调用。大多数计算机的操作系统中至少有一个终端，其中命令提示符现在大多被windows的跨平台powerhell和基于Linux的操作系统的Linux控制台所取代。

到现在为止，你们中的大多数人都已经理解了作为系统应用的终端，但我们如何才能在浏览器中建立类似终端的网站。为此，JavaScript为我们提供了支持，这些终端喜欢并感觉像一个系统终端，但没有它们那么强大，但它们为我们做了工作，感谢一些开发者，我们得到了一些库来帮助我们，而不是从头开始写。一些库是jQuery.terminal、Xtermjs，在本教程中我们将使用JQuery.terminal。

现在打开你最喜欢的代码编辑器，创建我们的基本html文件，主要是index.html，并调用我们的依赖性

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!--content type : 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=
        "https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
  
    <script src=
"https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js">
    </script>
  
    <link rel="stylesheet" href=
"https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" />
</head>
  
<body>
</body>
  
</html>

网页的主体是空的，因为它是我们要写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。

迎接的是一个默认的命令，它在每次页面加载时都会打印在页面的顶部。该插件还包含一个错误命令，当该命令不存在时就会打印出来。

如何使用jQuery建立类似于简单终端的网站？

简单的iam命令

我们还可以写一些额外的命令，比如打印GeeksForGeeks创始人名字的founder命令和打印帮助的help命令。这两条命令都是不带参数的

$('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'
        + '\nfounder to know the founder');
    },
}, {
    greetings: 'GeeksForGeeks - A place to'
    + ' learn DS, Algo and Computer Science'
    + ' for free'
});

如何使用jQuery建立类似于简单终端的网站？

available commands

现在，我们将使用样式标签改变一些样式，我们对所有文本使用绿色，并增加文本大小。

<style type="text/css">
.terminal,span,.cmd,div { 
    --color: rgba(0, 128, 0, 0.99);
}
.terminal, span {
    --size: 1.4;
}
</style>

完整的代码如下

<!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=
        "https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
  
    <script src=
"https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js">
    </script>
  
    <link rel="stylesheet" href=
"https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" />
  
    <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\n'
                + 'founder to know the founder');
            },
        }, {
            greetings: 'GeeksForGeeks - A place to'
                + ' learn DS, Algo and Computer '
                + 'Science for free'
        });
    </script>
</body>
  
</html>