Executing JavaScript
In EJS (Embedded JavaScript), the <% %> syntax is used to execute JavaScript code without directly outputting it to the HTML. This allows you to run logic, loops, conditionals, and other JavaScript operations within your EJS templates. Here's how it works:
1. Basic Syntax
<% %>: Used to execute JavaScript code but does not output anything.<%= %>: Used to output the result of a JavaScript expression as HTML-encoded text.<%- %>: Used to output the result of a JavaScript expression as raw HTML without escaping.
2. Using <% %> to Run JavaScript Code
2.1 Conditional Statements
You can use <% %> to include conditional logic in your templates. This is useful for rendering different content based on conditions.
Example:
Server-Side Code (Node.js with Express):
app.get('/', (req, res) => {
res.render('index', { user: { name: 'Alice', isAdmin: true } });
});
EJS Template (views/index.ejs):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conditional Rendering Example</title>
</head>
<body>
<% if (user.isAdmin) { %>
<h1>Welcome, Admin <%= user.name %>!</h1>
<% } else { %>
<h1>Welcome, <%= user.name %>!</h1>
<% } %>
</body>
</html>
In this example:
- The
<% if (user.isAdmin) { %>block checks if the user is an admin and renders different content accordingly.
2.2 Loops
You can use <% %> to loop through arrays or objects and generate repetitive HTML content.
Example:
Server-Side Code:
app.get('/', (req, res) => {
res.render('index', { items: ['Apple', 'Banana', 'Cherry'] });
});
EJS Template (views/index.ejs):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loop Example</title>
</head>
<body>
<ul>
<% items.forEach(function(item) { %>
<li><%= item %></li>
<% }); %>
</ul>
</body>
</html>
In this example:
- The
<% items.forEach(function(item) { %>loop iterates over theitemsarray and generates a list item (<li>) for each element.
2.3 Including Other Templates
You can use <% %> to include other EJS templates or partials using the include method.
Example:
Main Template (views/index.ejs):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Include Example</title>
</head>
<body>
<%- include('partials/header') %>
<h1>Welcome to the site</h1>
<%- include('partials/footer') %>
</body>
</html>
Header Partial (views/partials/header.ejs):
<header>
<h1>My Website</h1>
</header>
Footer Partial (views/partials/footer.ejs):
<footer>
<p>© 2024 My Website</p>
</footer>
In this example:
- The
<%- include('partials/header') %>and<%- include('partials/footer') %>tags include the contents ofheader.ejsandfooter.ejsrespectively.
3. Using JavaScript Functions
You can define and call JavaScript functions within your EJS templates using <% %>.
Example:
Server-Side Code:
app.get('/', (req, res) => {
res.render('index', { numbers: [1, 2, 3, 4, 5] });
});
EJS Template (views/index.ejs):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Function Example</title>
</head>
<body>
<% function double(num) { %>
<%= num * 2 %>
<% } %>
<ul>
<% numbers.forEach(function(number) { %>
<li>Original: <%= number %>, Doubled: <%= double(number) %></li>
<% }); %>
</ul>
</body>
</html>
In this example:
- The
<% function double(num) { %>block defines a JavaScript functiondoublethat doubles a number. - The function is then used within the loop to display both the original and doubled values.
Summary
<% %>: Executes JavaScript code without outputting it to the HTML. Useful for logic, loops, and includes.<%= %>: Outputs the result of a JavaScript expression as HTML-encoded text.<%- %>: Outputs the result of a JavaScript expression as raw HTML without escaping.
Using <% %> allows you to control the flow of your template and dynamically generate content based on your application’s logic and data.