# EJS (Embedded JavaScript) Basics Tutorial
Welcome to the world of EJS! This tutorial will teach you everything you need to know to get started with EJS, a powerful templating engine that helps you create dynamic HTML pages.
## What is EJS?
EJS stands for **Embedded JavaScript**. It's a simple templating language that lets you generate HTML markup with plain JavaScript. Think of it as HTML with JavaScript sprinkled in - it helps you create dynamic web pages by mixing static HTML with dynamic content.
## Why Use EJS?
- **Easy to learn**: Simple syntax that looks like regular HTML
- **Flexible**: You can use any JavaScript inside your templates
- **Popular**: Widely used in Node.js applications
- **Powerful**: Can handle complex logic and data manipulation
## Basic Syntax
EJS uses special tags to embed JavaScript code into HTML:
### 1. Outputting Data
**<%= %>` - Outputs data without HTML escaping**
```html
Welcome <%= username %>!
Your age is <%= age %>
```
**<%- %>` - Outputs data with HTML escaping (for HTML content)**
```html
<%- userContent %>
```
### 2. JavaScript Code Blocks
**<% %>` - Executes JavaScript code without outputting anything**
```html
<% if (isLoggedIn) { %>
Welcome back!
<% } else { %>
Please log in
<% } %>
```
## Simple Example
Here's a basic EJS template that shows how it works:
**Template file (index.ejs):**
```html
<%= title %>
Hello <%= name %>!
<% if (showMessage) { %>
Welcome to our website!
<% } %>
<% items.forEach(function(item) { %>
- <%= item %>
<% }); %>
```
**JavaScript code:**
```javascript
const ejs = require('ejs');
const data = {
title: "My Website",
name: "John",
showMessage: true,
items: ["Apple", "Banana", "Cherry"]
};
const html = ejs.render(template, data);
console.log(html);
```
## Common EJS Features
### 1. Variables
```html
<%= variableName %>
```
### 2. Conditionals
```html
<% if (condition) { %>
This shows if condition is true
<% } else { %>
This shows if condition is false
<% } %>
```
### 3. Loops
```html
<% items.forEach(function(item) { %>
<%= item %>
<% }); %>
```
### 4. Includes (reusing templates)
```html
<% include header %>
```
## Installation
To use EJS in your Node.js project:
```bash
npm install ejs
```
## Basic Usage Example
**app.js:**
```javascript
const express = require('express');
const ejs = require('ejs');
const app = express();
// Set EJS as template engine
app.set('view engine', 'ejs');
// Route that uses EJS
app.get('/', (req, res) => {
const data = {
title: "Home Page",
name: "Alice",
items: ["Red", "Green", "Blue"]
};
res.render('index', data);
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
```
**views/index.ejs:**
```html
<%= title %>
Hello <%= name %>!
<% items.forEach(function(color) { %>
- <%= color %>
<% }); %>
```
## Quick Tips for Beginners
1. **Always close your tags**: Make sure every `<%` has a matching `%>`
2. **Use <%= for output**: When you want to display data
3. **Use <% for code**: When you need to execute JavaScript logic
4. **Test your templates**: Start simple and gradually add complexity
5. **Keep it clean**: Don't put too much logic in your templates
## Common Mistakes to Avoid
### Wrong: Missing closing tags
```html
<% if (condition) { %>
Hello John!
<% } %>
```
### Correct:
```html
<% if (user.name === "John") { %>
Hello John!
<% } %>
```
## Practice Exercise
Try creating your own EJS template:
1. Create a file called `welcome.ejs`
2. Add HTML structure with title and heading
3. Display a user's name using `<%= %>`
4. Use a loop to display a list of hobbies
5. Add a conditional that shows different content based on age
## Next Steps
Once you master the basics, you can explore:
- EJS layouts and partials
- Custom filters and helpers
- Advanced looping and conditionals
- Integration with Express.js frameworks
## Summary
EJS is a powerful tool for creating dynamic web pages by embedding JavaScript directly into HTML templates. With practice, you'll be able to create complex, data-driven websites that update based on user input or database content.
Remember: Start simple, practice regularly, and don't be afraid to experiment with different features!
---
*Happy coding!*