Terminal es una de las herramientas más comunes utilizadas por los desarrolladores. Muchas aplicaciones, marcos e incluso lenguajes de programación tienen más funciones que se pueden invocar mediante la interfaz de línea de comandos. La mayoría de las computadoras vienen con al menos una terminal en su sistema operativo con el símbolo del sistema ahora reemplazado por PowerShell multiplataforma en Windows y consola Linux en sistemas operativos basados en Linux.
A estas alturas, la mayoría de ustedes han entendido la terminal como una aplicación del sistema, pero ¿cómo podemos construir una terminal como un sitio web en un navegador? Para eso , JavaScript nos respalda, a estos terminales les gusta y se siente como un terminal de sistema, pero no son tan poderosos como ellos, pero hacen el trabajo por nosotros, y gracias a algunos desarrolladores obtuvimos algunas bibliotecas para ayudarnos en lugar de escribir desde rascar. Algunas bibliotecas son jQuery.terminal, Xtermjs, para este tutorial usaremos JQuery.terminal
Ahora abra su editor de código favorito y cree nuestro archivo html base, principalmente index.html y llame a nuestras dependencias
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>
El cuerpo de la página web está vacío porque es el lugar donde escribiremos nuestro código JavaScript. Escribamos nuestro primer comando
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'
});
En el código JavaScript anterior, estamos usando jQuery para obtener una parte del cuerpo del documento en la función de terminal. Luego creamos otra función dentro de la función terminal que toma un argumento. iam es el comando que creamos que imprime su nombre como argumento y le da la bienvenida a GeeksForGeeks.
Saludos en un comando predeterminado que se imprime en la parte superior de la página cada vez que se carga la página. También el complemento también contiene un comando de error que se imprime cuando el comando no está presente
Comando iam simple
También podemos escribir un comando adicional como el comando de fundador que imprime el nombre del fundador de GeeksForGeeks y el comando de ayuda que imprime. Ambos comandos se pasan sin argumentos.
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'
+ '\nfounder to know the founder');
},
}, {
greetings: 'GeeksForGeeks - A place to'
+ ' learn DS, Algo and Computer Science'
+ ' for free'
});
comandos disponibles
Ahora, cambiaremos algunos estilos usando la etiqueta de estilo, usamos el color verde para todo el texto y aumentamos el tamaño del texto.
HTML
<style type="text/css">
.terminal,span,.cmd,div {
--color: rgba(0, 128, 0, 0.99);
}
.terminal, span {
--size: 1.4;
}
</style>
El código completo está abajo
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=
"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>
Salida completa con devtools
Ha creado un sitio web de terminal interactivo simple y lo ha personalizado. jquery.terminal también puede hacer otras cosas como
- Formato y resaltado de sintaxis.
- JSON-RPC donde todo está en el servidor (que se encuentra en la sección Intérprete de la wiki).
- Cambio de aviso.
- Enmascaramiento de contraseñas.
- Autenticación.
- Combinando comandos con el operador Pipe como en la terminal UNIX.
- Métodos abreviados de teclado (lista de compilación que puede encontrar aquí).
- Lectura de texto de los usuarios.
- Manejo de Emoji (si el sistema no lo hace de fábrica como Windows10).
- Ejecución de comandos desde JavaScript.
- Invocación de comandos y métodos de terminal desde el servidor.
- Líneas de actualización.
- Guardar estado en hash de URL y ejecutar comandos guardados.
Puede obtener más información sobre jQuery.terminal en docs y github
Publicación traducida automáticamente
Artículo escrito por kushwanthreddy y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA