¿Qué es HTML ?
HTML (Hypertext Markup Language) se utiliza para diseñar la estructura de una página web y su contenido. HTML en realidad no es técnicamente lenguajes de programación como C++, JAVA o python. Es un lenguaje de marcado y, en última instancia, proporciona instrucciones declarativas al navegador. Cuando se carga una página web, el navegador primero lee el HTML y construye el árbol DOM (Document Object Model) a partir de él. HTML consta de una serie de elementos.
¿Qué es un motor de plantillas?
Un motor de plantillas es una herramienta que permite a los desarrolladores escribir marcado HTML utilizando JavaScript simple. El motor de plantillas tiene su propia sintaxis definida o etiquetas que insertarán variables o ejecutarán alguna lógica de programación en tiempo de ejecución y generarán HTML final antes de enviarlo al navegador para su visualización.
¿Qué es EJS?
EJS simplemente significa JavaScript incorporado. Es un lenguaje o motor de plantilla simple. EJS tiene su propia sintaxis y etiquetas definidas. Ofrece una manera más fácil de generar HTML dinámicamente.
Relación entre HTML y EJS:
De hecho, definimos HTML en la sintaxis de EJS y especificamos cómo y dónde irán varios datos en la página. Luego, el motor de plantillas combina estos datos y ejecuta la lógica de programación para generar la página HTML final. Entonces, la tarea de EJS es tomar sus datos e insertarlos en la página web de acuerdo con cómo ha definido la plantilla y generar el HTML final.
Por ejemplo, podría tener una tabla de datos dinámicos de una base de datos y desea que EJS genere la tabla de datos de acuerdo con sus reglas de visualización.
¿Cuándo usar HTML/ EJS?
Varía según su aplicación. Si desea representar una página estática, busque un archivo HTML y si desea representar una página dinámica donde sus datos provienen de varias fuentes, debe elegir un archivo EJS.
Diferencia entre index.ejs e index.html:
| archivo HTML | archivo EJS |
| Bueno para la página web estática. | Bueno para la página web dinámica. |
| El lenguaje de maquillaje HTML se utiliza para escribir archivos HTML. | JavaScript se utiliza para escribir archivos EJS. |
| Escrito en lenguaje HTML. | El marcado HTML se genera dinámicamente usando JavaScript. |
| No podía vincular datos dinámicos antes de enviarlos al navegador. | Los datos dinámicos se vincularán con la plantilla y luego el resultado final se enviará al navegador. |
| La extensión del archivo HTML es .html | La extensión del archivo EJS es .ejs |
Ejemplo: suponga que tiene una página web para mostrar los salarios de los empleados. Si crea un archivo HTML estático, debe volver a escribirlo cada vez que se agregue un nuevo empleado o cambie el salario. Pero, con EJS se vuelve demasiado fácil insertar datos dinámicos en él.
Código de versión HTML:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Employee Salary</title>
<style>
table {
margin: 20% auto;
border-collapse: collapse;
border-spacing: 0;
width: 20%;
border: 1px solid #ddd;
}
th,
td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #d1d1d1;
}
</style>
</head>
<body>
<table>
<tr>
<th> Employee </th>
<th> Salary </th>
</tr>
<tr>
<td> Sayan Ghosh </td>
<td> 37000 </td>
</tr>
<tr>
<td> Susmita Sahoo </td>
<td> 365000 </td>
</tr>
<tr>
<td> Nabonita Santra </td>
<td> 36000 </td>
</tr>
<tr>
<td> Anchit Ghosh </td>
<td> 30000 </td>
</tr>
</table>
</body>
</html>
Producción:
Código de versión EJS:
Paso 1: primero, cree una aplicación NodeJS e instale los módulos necesarios, como los módulos express.js y ejs .
Nota: Consulte https://www.geeksforgeeks.org/how-to-use-ejs-in-javascript/ para comenzar con EJS.
Paso 2: Cree un archivo index.js que es nuestro servidor básico con el siguiente código.
index.js
var express = require('express');
var app = express();
// Set EJS as templating engine
app.set('view engine', 'ejs');
// Employees data
const empSalary = [
{
name: "Sayan Ghosh",
salary: 37000
},
{
name: "Susmita Sahoo",
salary: 365000
},
{
name: "Nabonita Santra",
salary: 36000
},
{
name: "Anchit Ghosh",
salary: 30000
}
]
app.get('/employee/salary', (req, res) => {
// Render method takes two parameter
// first parameter is the ejs file to
// render second parameter is an
// object to send to the ejs file
res.render('index.ejs', { empSalary: empSalary });
})
// Server setup
app.listen(3000, function (req, res) {
console.log("Connected on port:3000");
});
Paso 3: cree un archivo index.ejs y colóquelo en la carpeta de vistas con el siguiente código.
index.ejs
<!DOCTYPE html>
<html>
<head>
<title>Employee Salary</title>
<style>
table {
margin: 20% auto;
border-collapse: collapse;
border-spacing: 0;
width: 20%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #d1d1d1;
}
</style>
</head>
<body>
<table>
<tr>
<th> Employee </th>
<th> Salary </th>
</tr>
<% empSalary.forEach(emp => { %>
<tr>
<td> <%= emp.name %>
<td> <%= emp.salary %>
</tr>
<% }); %>
</table>
</body>
</html>
Paso 4: Ejecute el servidor usando el siguiente comando:
node index.js
Salida: Ahora abra su navegador y vaya a http://localhost:3000/employee/salary , verá la siguiente salida: