0
1
00:00:01,350 --> 00:00:08,940
Now in the last lesson we looked at how we were able to pass variables from our server over to our template
1

2
00:00:08,940 --> 00:00:13,400
file using EJS and these little markers.
2

3
00:00:13,440 --> 00:00:20,630
Now in this lesson I want to talk about how you can use EJS to run code inside your template.
3

4
00:00:20,940 --> 00:00:28,200
So for example if we wanted to check to see what was the value of the kindOfDay that was passed in
4

5
00:00:28,800 --> 00:00:35,340
and if the value was something like Saturday or Sunday then we're going to render our h1 slightly
5

6
00:00:35,430 --> 00:00:38,770
differently than if it happened to be a weekday.
6

7
00:00:39,000 --> 00:00:48,860
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

8
00:00:48,900 --> 00:00:55,070
So h1 is going to instead be something like Thursday list or Friday list.
8

9
00:00:55,170 --> 00:01:03,280
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

10
00:01:03,510 --> 00:01:09,560
And in that case I'm going to change the color of my h1 depending on that information.
10

11
00:01:09,600 --> 00:01:16,110
So if I were to write it out in plain old Javascript, then I would say something like If the value
11

12
00:01:16,140 --> 00:01:28,320
of the variable kindOfDay is equal to the string that is a Saturday or if kindOfDay was equal
12

13
00:01:28,500 --> 00:01:34,560
to Sunday, then in that case I'm going to render this
13

14
00:01:34,710 --> 00:01:44,190
h1 as Saturday list or maybe say something like Saturday to do list, Sunday to do list, but I'm going
14

15
00:01:44,190 --> 00:01:53,330
to change the h1's style attribute to change the color when it is a Saturday or Sunday to purple.
15

16
00:01:53,430 --> 00:02:00,300
But if the kindOfDay was not a Saturday or Sunday namely it was a weekday then I'm going to change
16

17
00:02:00,300 --> 00:02:07,120
the h1 to have a different color, let's say I don't know, maybe change it to blue.
17

18
00:02:07,350 --> 00:02:10,860
So this is how I would write it out in Javascript.
18

19
00:02:10,860 --> 00:02:17,820
Now if you take a look at the EJS docs section, you can see that there is a part where it talks about
19

20
00:02:18,180 --> 00:02:20,040
the different tags.
20

21
00:02:20,130 --> 00:02:27,660
And previously we've been using this particular tag which as it says outputs the value of whatever goes
21

22
00:02:27,660 --> 00:02:37,020
inside the tag into the template. And that is how we manage to get the day of the week into our h1.
22

23
00:02:37,020 --> 00:02:43,920
Now in this case, what we're doing is we're using some control flow so namely an if and else statement,
23

24
00:02:44,310 --> 00:02:49,860
to check what is the value of that kindOfDay variable that we got passed in here
24

25
00:02:50,190 --> 00:02:58,170
and if it is a weekend a Saturday or Sunday, then we're rendering a different h1 style compared to if
25

26
00:02:58,170 --> 00:02:59,860
it was the week day.
26

27
00:03:00,120 --> 00:03:03,340
So in this case we need to use a different tag.
27

28
00:03:03,630 --> 00:03:08,000
And the one that we're going to be using is this one which has a scriptlet tag.
28

29
00:03:08,040 --> 00:03:13,550
So it's not a full script tag because you can't write any sort of Javascript in here
29

30
00:03:13,740 --> 00:03:17,570
but it does allow you to use control flow,
30

31
00:03:17,850 --> 00:03:26,950
namely IF and ELSE statements or ELSE-IF or Switch statements or WHILE statements. And this allows you to render
31

32
00:03:26,950 --> 00:03:33,990
a different HTML depending on what was the value of the variable that you got passed in to the
32

33
00:03:33,990 --> 00:03:34,780
template.
33

34
00:03:35,130 --> 00:03:42,150
So the special thing about the scriptlet tag is that you have to added around any part of your code that
34

35
00:03:42,150 --> 00:03:43,970
is not HTML.
35

36
00:03:44,040 --> 00:03:46,910
So this is HTML,
36

37
00:03:46,930 --> 00:03:55,950
it's an h1 tag. But this is not HTML email so we can add our scriptlet tags in front of our Javascript
37

38
00:03:55,980 --> 00:03:56,810
basically.
38

39
00:03:57,060 --> 00:04:04,110
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

40
00:04:04,110 --> 00:04:09,900
percentage and angle bracket. And then we're going to add one over here as well,
40

41
00:04:09,900 --> 00:04:12,530
the line of the statement.
41

42
00:04:12,600 --> 00:04:21,260
And finally remember every single little bit of your code that is Javascript, you will need to add the scriptlet
42

43
00:04:21,260 --> 00:04:27,550
tags. And these scriptlet tags work on a line by line basis.
43

44
00:04:27,570 --> 00:04:33,730
So even if you had two lines of Javascript that were next to each other, you still have to add a
44

45
00:04:33,750 --> 00:04:39,060
open and close tag on each line of the JavaScript.
45

46
00:04:39,060 --> 00:04:43,500
You can't just add a start one and add a end one, it doesn't work.
46

47
00:04:43,500 --> 00:04:46,820
So now let's hit save and let's try it out.
47

48
00:04:46,980 --> 00:04:55,080
So it says it's the Thursday to do list and it's colored blue because we're landing in the else statement
48

49
00:04:55,080 --> 00:04:55,640
here.
49

50
00:04:55,830 --> 00:05:04,200
So let's try changing this to Thursday. And now we're checking if the kindOfDay is equal to Thursday
50

51
00:05:04,200 --> 00:05:12,210
in which case render it with the color purple. And you can see when I update, this h1 is now colored
51

52
00:05:12,210 --> 00:05:13,060
purple.
52

53
00:05:13,290 --> 00:05:21,080
So the scriptlet tag allows us to run some basic Javascript code namely for control flow purposes
53

54
00:05:21,500 --> 00:05:28,920
so we can render our HTML slightly differently depending on the value of the variable that we got passed
54

55
00:05:28,920 --> 00:05:29,490
in.
55

56
00:05:29,490 --> 00:05:37,230
Now the reason why the scriptlet tag only lets you use control flow Javascript is because in most cases
56

57
00:05:37,320 --> 00:05:41,170
you want to keep your logic inside your server.
57

58
00:05:41,640 --> 00:05:46,890
And it's only in the cases where you're really changing something that is difficult to do inside the
58

59
00:05:46,890 --> 00:05:51,260
server or it would be a lot quicker to do inside the template
59

60
00:05:51,420 --> 00:05:53,900
do you actually use the scriptlet tags.
60

61
00:05:53,970 --> 00:06:00,390
And you see a lot of people in the wild abusing these trying to stuff too much logic into what is essentially
61

62
00:06:00,390 --> 00:06:01,970
still the content file.
62

63
00:06:01,980 --> 00:06:04,070
Remember HTML is for content.
63

64
00:06:04,350 --> 00:06:11,190
So remember try to do all of your logic inside your server and only in select situations where it really
64

65
00:06:11,190 --> 00:06:15,120
is about modifying the content based on the variable
65

66
00:06:15,120 --> 00:06:21,660
do you actually add in the scriptlet tags. Now in the next lesson, we're going to build out the functionality
66

67
00:06:21,660 --> 00:06:23,120
of our to do list.
67

68
00:06:23,160 --> 00:06:29,230
We're going to talk about how we can pass data from our template back to our server.
68

69
00:06:29,340 --> 00:06:33,360
So for all of that and more, I'll of course see you on the next lesson.