WEBVTT 0 00:01.350 --> 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 00:08.940 --> 00:13.400 file using EJS and these little markers. 2 00:13.440 --> 00:20.630 Now in this lesson I want to talk about how you can use EJS to run code inside your template. 3 00:20.940 --> 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 00:28.800 --> 00:35.340 and if the value was something like Saturday or Sunday then we're going to render our h1 slightly 5 00:35.430 --> 00:38.770 differently than if it happened to be a weekday. 6 00:39.000 --> 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 00:48.900 --> 00:55.070 So h1 is going to instead be something like Thursday list or Friday list. 8 00:55.170 --> 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 01:03.510 --> 01:09.560 And in that case I'm going to change the color of my h1 depending on that information. 10 01:09.600 --> 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 01:16.140 --> 01:28.320 of the variable kindOfDay is equal to the string that is a Saturday or if kindOfDay was equal 12 01:28.500 --> 01:34.560 to Sunday, then in that case I'm going to render this 13 01:34.710 --> 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 01:44.190 --> 01:53.330 to change the h1's style attribute to change the color when it is a Saturday or Sunday to purple. 15 01:53.430 --> 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 02:00.300 --> 02:07.120 the h1 to have a different color, let's say I don't know, maybe change it to blue. 17 02:07.350 --> 02:10.860 So this is how I would write it out in Javascript. 18 02:10.860 --> 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 02:18.180 --> 02:20.040 the different tags. 20 02:20.130 --> 02:27.660 And previously we've been using this particular tag which as it says outputs the value of whatever goes 21 02:27.660 --> 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 02:37.020 --> 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 02:44.310 --> 02:49.860 to check what is the value of that kindOfDay variable that we got passed in here 24 02:50.190 --> 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 02:58.170 --> 02:59.860 it was the week day. 26 03:00.120 --> 03:03.340 So in this case we need to use a different tag. 27 03:03.630 --> 03:08.000 And the one that we're going to be using is this one which has a scriptlet tag. 28 03:08.040 --> 03:13.550 So it's not a full script tag because you can't write any sort of Javascript in here 29 03:13.740 --> 03:17.570 but it does allow you to use control flow, 30 03:17.850 --> 03:26.950 namely IF and ELSE statements or ELSE-IF or Switch statements or WHILE statements. And this allows you to render 31 03:26.950 --> 03:33.990 a different HTML depending on what was the value of the variable that you got passed in to the 32 03:33.990 --> 03:34.780 template. 33 03:35.130 --> 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 03:42.150 --> 03:43.970 is not HTML. 35 03:44.040 --> 03:46.910 So this is HTML, 36 03:46.930 --> 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 03:55.980 --> 03:56.810 basically. 38 03:57.060 --> 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 04:04.110 --> 04:09.900 percentage and angle bracket. And then we're going to add one over here as well, 40 04:09.900 --> 04:12.530 the line of the statement. 41 04:12.600 --> 04:21.260 And finally remember every single little bit of your code that is Javascript, you will need to add the scriptlet 42 04:21.260 --> 04:27.550 tags. And these scriptlet tags work on a line by line basis. 43 04:27.570 --> 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 04:33.750 --> 04:39.060 open and close tag on each line of the JavaScript. 45 04:39.060 --> 04:43.500 You can't just add a start one and add a end one, it doesn't work. 46 04:43.500 --> 04:46.820 So now let's hit save and let's try it out. 47 04:46.980 --> 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 04:55.080 --> 04:55.640 here. 49 04:55.830 --> 05:04.200 So let's try changing this to Thursday. And now we're checking if the kindOfDay is equal to Thursday 50 05:04.200 --> 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 05:12.210 --> 05:13.060 purple. 52 05:13.290 --> 05:21.080 So the scriptlet tag allows us to run some basic Javascript code namely for control flow purposes 53 05:21.500 --> 05:28.920 so we can render our HTML slightly differently depending on the value of the variable that we got passed 54 05:28.920 --> 05:29.490 in. 55 05:29.490 --> 05:37.230 Now the reason why the scriptlet tag only lets you use control flow Javascript is because in most cases 56 05:37.320 --> 05:41.170 you want to keep your logic inside your server. 57 05:41.640 --> 05:46.890 And it's only in the cases where you're really changing something that is difficult to do inside the 58 05:46.890 --> 05:51.260 server or it would be a lot quicker to do inside the template 59 05:51.420 --> 05:53.900 do you actually use the scriptlet tags. 60 05:53.970 --> 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 06:00.390 --> 06:01.970 still the content file. 62 06:01.980 --> 06:04.070 Remember HTML is for content. 63 06:04.350 --> 06:11.190 So remember try to do all of your logic inside your server and only in select situations where it really 64 06:11.190 --> 06:15.120 is about modifying the content based on the variable 65 06:15.120 --> 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 06:21.660 --> 06:23.120 of our to do list. 67 06:23.160 --> 06:29.230 We're going to talk about how we can pass data from our template back to our server. 68 06:29.340 --> 06:33.360 So for all of that and more, I'll of course see you on the next lesson.