Now in the last lesson we looked at how we were able to pass variables from our server over to our template 1
file using EJS and these little markers. 2
Now in this lesson I want to talk about how you can use EJS to run code inside your template. 3
So for example if we wanted to check to see what was the value of the kindOfDay that was passed in 4
and if the value was something like Saturday or Sunday then we're going to render our h1 slightly 5
differently than if it happened to be a weekday. 6
Now instead of simply saying it's a Thursday or it's a Friday, we're actually name our h1 as our list title. 7
So h1 is going to instead be something like Thursday list or Friday list. 8
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. 9
And in that case I'm going to change the color of my h1 depending on that information. 10
So if I were to write it out in plain old Javascript, then I would say something like If the value 11
of the variable kindOfDay is equal to the string that is a Saturday or if kindOfDay was equal 12
to Sunday, then in that case I'm going to render this 13
h1 as Saturday list or maybe say something like Saturday to do list, Sunday to do list, but I'm going 14
to change the h1's style attribute to change the color when it is a Saturday or Sunday to purple. 15
But if the kindOfDay was not a Saturday or Sunday namely it was a weekday then I'm going to change 16
the h1 to have a different color, let's say I don't know, maybe change it to blue. 17
So this is how I would write it out in Javascript. 18
Now if you take a look at the EJS docs section, you can see that there is a part where it talks about 19
the different tags. 20
And previously we've been using this particular tag which as it says outputs the value of whatever goes 21
inside the tag into the template. And that is how we manage to get the day of the week into our h1. 22
Now in this case, what we're doing is we're using some control flow so namely an if and else statement, 23
to check what is the value of that kindOfDay variable that we got passed in here 24
and if it is a weekend a Saturday or Sunday, then we're rendering a different h1 style compared to if 25
it was the week day. 26
So in this case we need to use a different tag. 27
And the one that we're going to be using is this one which has a scriptlet tag. 28
So it's not a full script tag because you can't write any sort of Javascript in here 29
but it does allow you to use control flow, 30
namely IF and ELSE statements or ELSE-IF or Switch statements or WHILE statements. And this allows you to render 31
a different HTML depending on what was the value of the variable that you got passed in to the 32
template. 33
So the special thing about the scriptlet tag is that you have to added around any part of your code that 34
is not HTML. 35
So this is HTML, 36
it's an h1 tag. But this is not HTML email so we can add our scriptlet tags in front of our Javascript 37
basically. 38
So I'm going to add a open angle bracket, a percentage sign and then I'm going to end the line with a 39
percentage and angle bracket. And then we're going to add one over here as well, 40
the line of the statement. 41
And finally remember every single little bit of your code that is Javascript, you will need to add the scriptlet 42
tags. And these scriptlet tags work on a line by line basis. 43
So even if you had two lines of Javascript that were next to each other, you still have to add a 44
open and close tag on each line of the JavaScript. 45
You can't just add a start one and add a end one, it doesn't work. 46
So now let's hit save and let's try it out. 47
So it says it's the Thursday to do list and it's colored blue because we're landing in the else statement 48
here. 49
So let's try changing this to Thursday. And now we're checking if the kindOfDay is equal to Thursday 50
in which case render it with the color purple. And you can see when I update, this h1 is now colored 51
purple. 52
So the scriptlet tag allows us to run some basic Javascript code namely for control flow purposes 53
so we can render our HTML slightly differently depending on the value of the variable that we got passed 54
in. 55
Now the reason why the scriptlet tag only lets you use control flow Javascript is because in most cases 56
you want to keep your logic inside your server. 57
And it's only in the cases where you're really changing something that is difficult to do inside the 58
server or it would be a lot quicker to do inside the template 59
do you actually use the scriptlet tags. 60
And you see a lot of people in the wild abusing these trying to stuff too much logic into what is essentially 61
still the content file. 62
Remember HTML is for content. 63
So remember try to do all of your logic inside your server and only in select situations where it really 64
is about modifying the content based on the variable 65
do you actually add in the scriptlet tags. Now in the next lesson, we're going to build out the functionality 66
of our to do list. 67
We're going to talk about how we can pass data from our template back to our server. 68
So for all of that and more, I'll of course see you on the next lesson.