All language subtitles for 005 Running Code Inside the EJS Template_en

Now in the last lesson we looked at how we were able to pass variables from our server over to our template

file using EJS and these little markers.

Now in this lesson I want to talk about how you can use EJS to run code inside your template.

So for example if we wanted to check to see what was the value of the kindOfDay that was passed in

and if the value was something like Saturday or Sunday then we're going to render our h1 slightly

differently than if it happened to be a weekday.

Now instead of simply saying it's a Thursday or it's a Friday, we're actually name our h1 as our list title.

So h1 is going to instead be something like Thursday list or Friday list.

And what I want to be able to do is I want to be able to check to see if the day is a Saturday or a Sunday.

And in that case I'm going to change the color of my h1 depending on that information.

So if I were to write it out in plain old Javascript, then I would say something like If the value

of the variable kindOfDay is equal to the string that is a Saturday or if kindOfDay was equal

to Sunday, then in that case I'm going to render this

h1 as Saturday list or maybe say something like Saturday to do list, Sunday to do list, but I'm going

to change the h1's style attribute to change the color when it is a Saturday or Sunday to purple.

But if the kindOfDay was not a Saturday or Sunday namely it was a weekday then I'm going to change

the h1 to have a different color, let's say I don't know, maybe change it to blue.

So this is how I would write it out in Javascript.

Now if you take a look at the EJS docs section, you can see that there is a part where it talks about

the different tags.

And previously we've been using this particular tag which as it says outputs the value of whatever goes

inside the tag into the template. And that is how we manage to get the day of the week into our h1.

Now in this case, what we're doing is we're using some control flow so namely an if and else statement,

to check what is the value of that kindOfDay variable that we got passed in here

and if it is a weekend a Saturday or Sunday, then we're rendering a different h1 style compared to if

it was the week day.

So in this case we need to use a different tag.

And the one that we're going to be using is this one which has a scriptlet tag.

So it's not a full script tag because you can't write any sort of Javascript in here

but it does allow you to use control flow,

namely IF and ELSE statements or ELSE-IF or Switch statements or WHILE statements. And this allows you to render

a different HTML depending on what was the value of the variable that you got passed in to the

template.

So the special thing about the scriptlet tag is that you have to added around any part of your code that

is not HTML.

So this is HTML,

it's an h1 tag. But this is not HTML email so we can add our scriptlet tags in front of our Javascript

basically.

So I'm going to add a open angle bracket, a percentage sign and then I'm going to end the line with a

percentage and angle bracket. And then we're going to add one over here as well,

the line of the statement.

And finally remember every single little bit of your code that is Javascript, you will need to add the scriptlet

tags. And these scriptlet tags work on a line by line basis.

So even if you had two lines of Javascript that were next to each other, you still have to add a

open and close tag on each line of the JavaScript.

You can't just add a start one and add a end one, it doesn't work.

So now let's hit save and let's try it out.

So it says it's the Thursday to do list and it's colored blue because we're landing in the else statement

here.

So let's try changing this to Thursday. And now we're checking if the kindOfDay is equal to Thursday

in which case render it with the color purple. And you can see when I update, this h1 is now colored

purple.

So the scriptlet tag allows us to run some basic Javascript code namely for control flow purposes

so we can render our HTML slightly differently depending on the value of the variable that we got passed

in.

Now the reason why the scriptlet tag only lets you use control flow Javascript is because in most cases

you want to keep your logic inside your server.

And it's only in the cases where you're really changing something that is difficult to do inside the

server or it would be a lot quicker to do inside the template

do you actually use the scriptlet tags.

And you see a lot of people in the wild abusing these trying to stuff too much logic into what is essentially

still the content file.

Remember HTML is for content.

So remember try to do all of your logic inside your server and only in select situations where it really

is about modifying the content based on the variable

do you actually add in the scriptlet tags. Now in the next lesson, we're going to build out the functionality

of our to do list.

We're going to talk about how we can pass data from our template back to our server.

So for all of that and more, I'll of course see you on the next lesson.