EJS (Embedded JavaScript) Basics Tutorial

Ejs Download Course

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

<h1>Welcome <%= username %>!</h1>
<p>Your age is <%= age %></p>

<%- %>` - Outputs data with HTML escaping (for HTML content)

<div><%- userContent %></div>

2. JavaScript Code Blocks

<% %>` - Executes JavaScript code without outputting anything

<% if (isLoggedIn) { %>
    <p>Welcome back!</p>
<% } else { %>
    <p>Please log in</p>
<% } %>

Simple Example

Here's a basic EJS template that shows how it works:

Template file (index.ejs):

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1>Hello <%= name %>!</h1>
    
    <% if (showMessage) { %>
        <p>Welcome to our website!</p>
    <% } %>
    
    <ul>
        <% items.forEach(function(item) { %>
            <li><%= item %></li>
        <% }); %>
    </ul>
</body>
</html>

JavaScript code:

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

<%= variableName %>

2. Conditionals

<% if (condition) { %>
    <p>This shows if condition is true</p>
<% } else { %>
    <p>This shows if condition is false</p>
<% } %>

3. Loops

<% items.forEach(function(item) { %>
    <li><%= item %></li>
<% }); %>

4. Includes (reusing templates)

<% include header %>

Installation

To use EJS in your Node.js project:

npm install ejs

Basic Usage Example

app.js:

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:

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1>Hello <%= name %>!</h1>
    
    <ul>
        <% items.forEach(function(color) { %>
            <li><%= color %></li>
        <% }); %>
    </ul>
</body>
</html>

Quick Tips for Beginners

Always close your tags: Make sure every <% has a matching %>
Use <%= for output: When you want to display data
Use <% for code: When you need to execute JavaScript logic
Test your templates: Start simple and gradually add complexity
Keep it clean: Don't put too much logic in your templates

Common Mistakes to Avoid

Wrong: Missing closing tags

<% if (condition) { %>  <!-- Missing %>
    <p>Content</p>
<% } %>

Correct:

<% if (condition) { %>
    <p>Content</p>
<% } %>

Wrong: Mixing quotes incorrectly

<% if (user.name === "John") { %>  <!-- No closing quote -->
    <p>Hello John!</p>
<% } %>

Correct:

<% if (user.name === "John") { %>
    <p>Hello John!</p>
<% } %>

Practice Exercise

Try creating your own EJS template:

Create a file called welcome.ejs
Add HTML structure with title and heading
Display a user's name using <%= %>
Use a loop to display a list of hobbies
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!