The Web Developer Bootcamp 2024

Colt Steele

Back to Templating Index Page

 

Extended Js Syntax
ejs Syntax

Extended JavaScript (ejs) has it's own specific uses and syntax. More info can be found here.

Here are the specific ejs tags:

  • <%    'Scriptlet' tag, for control-flow, no output
  • <%_    ‘Whitespace Slurping’ Scriptlet tag, strips all whitespace before it
  • <%=    Outputs the value into the template (HTML escaped)
  • <%-    Outputs the unescaped value into the template
  • <%#    Comment tag, no execution, no output
  • <%%    Outputs a literal '<%'
and here are the possible closing tags:
  • %>    Plain ending tag
  • -%>    Trim-mode ('newline slurp') tag, trims following newline
  • _%>    ‘Whitespace Slurping’ ending tag, removes all whitespace after it

Remember that ejs code only runs in ejs files. And we can see from the list that different ejs tags have different uses. For example, we can see that "<%= "Outputs the value into the template (HTML escaped)" which means it runs any JavaScript code and returns an HTML output.

In our previous discussions on "Templating", we created a home.ejs in our views directory. And within the file we started with an <h3> element:

  • <h3>EJS Home Page</h3>
So, in the home.ejs file, let's add some ejs code to our <h3> element, like so:
  • <h3>EJS Home Page <%= 3 + 4 + 5 %></h3>
This will output an <h3> element with the value:
  • EJS Home Page 12
What happened here was that ejs evaluated the coding within our home.ejs html file, and found some ejs encoded javascript. It evaluated the Js code and produced a result, which it then converted to an html output, which it then added to then end of the <h3> element, which is where the ejs code was placed. So we've added some Js coding inside an html element, and the Js was evaluated and added to the html element as an output. This is the heart of EJS.

Another example. Let's take the same <h3> element and add this Js code:

  • <h3><%= 'EJS Home Page'.toUpperCase() %></h3>
would output:
  • EJS HOME PAGE
Once again, it processed the Js, produced a result, converted the result into an html output it then displayed on the page.

Let's have one more example to discuss another point. We'll have our home.ejs page display a random number between 1 and 100, every time we refresh the page. The code would be:

  • <p>Your random number is: <%= Math.floor(Math.random() * 100) +1 %></p>
Remember, this is HTML code, written inside an ejs page with some embedded Js with the proper ejs syntax. Now this code works, however, it is generally not considered good practice to write extensive Js code inside of our ejs files. What is a better approach is to write the bulk of our Js externally and display the results of the code within our ejs file, using the proper ejs syntax, of course.

So we're going to restructure a bit here. We're going to move our random number generator to our index.js file. We already have the code:

  • JavaScript
  • index.js
  • app.get( '/', ( req, res ) => {
    • res.render('home')
  • })
and we are going to modify it and add our random number generator, like so:
  • JavaScript
  • index.js
  • app.get( '/', ( req, res ) => {
    • const num = Math.floor(Math.random() * 100) + 1;
    • res.render('home', { num })
  • })
So we generate our random number inside our index.js file, and we assign it to the variable num that we then pass on to our home.ejs file when we "render" the page. Now all we have to do is change the coding inside our home.ejs file to just display the result, instead of running the Math.random() function:
  • HTML
  • home.ejs
  • <p>Todays Random Number is: <b><%= num %></b></p>

One last thing to mention here is that in the Js code, when we "render" the page, we have the line:

  • res.render('home', { num })
you will notice that num is an object. It's expecting a Key/Value pair. But, most coders would write it as { num: num } for the key value pair. But when the key and the value are the same, we can simplify this and just call { num }. This will assume that the key is named num and the value is the variable num.

The Takeaway

So EJS has some real potential here for "real time" dynamic page construction, but we must use the proper opening AND closing tags to achieve the results we are looking for.

Also, remember that it is generally better practice to write most of your Js code externally and display the results in your ejs page using the ejs specific syntax.

<%= %> vs <% %>

So far we've seen examples using the equals sign ejs syntax. This allows us to insert some Js code (or result), it then converts into an HTML output. But what if we didn't want any conversion to HTML output? What if we simply wanted to run some Js code, say, maybe a conditional?

Let's say with our random number generator, if it produces an even number, let's output This is an EVEN number., and if it's an odd number, output This is an ODD number. We'll need a conditional for this, so we can't use <%= %> (equals sign). Instead, we'll use <% %> without the equals sign. Here's the code:

  • HTML
  • home.ejs
  • <% if ( num % 2 === 0 ) { %>
  • This is an EVEN Number
  • <% } else { %>
  • This is an ODD Number
  • <% } %>
So now using the ejs syntax <% %> with no equals sign, we can run our Js conditional. And we are no longer converting anything in to an HTML output, we are actually running the Js code from inside of an HTML page, and producing the output based on the conditional logic.

Now we could also use a "Ternary Operator" to accomplish the same thing. Just replace the above code with:

  • <%= num%2===0 ? 'EVEN' : 'ODD' %>
which would be simpler coding, but would defeat the point of this discussion which is the difference between using <%= (with equals sign), and <% (without equals sign). Remember that <%= (with equals sign) will run the Js code and convert the result into an HTML output.

One other solution would also be to run our conditional within our index.js file and just render the output to our home.ejs.


Back to Top