1 00:00:00,750 --> 00:00:06,060 All right and the last video we looked at working with string so concatenation We also looked at some 2 00:00:06,060 --> 00:00:10,590 of the popular methods or functions that are used as strings. 3 00:00:10,590 --> 00:00:18,960 Now I want to introduce you to template literals or template strings which are part of ESX but are compatible 4 00:00:18,960 --> 00:00:26,430 in all the modern browsers so there's no need to have to compile your ESX down unless you're looking 5 00:00:26,430 --> 00:00:34,620 to you know be compatible with older versions of IEEE or stuff like that which which personally I don't 6 00:00:34,830 --> 00:00:38,090 I don't care about when I do my development. 7 00:00:38,160 --> 00:00:41,540 There's not too many people using IEEE 7 anymore. 8 00:00:41,600 --> 00:00:43,280 And you know browsers like that. 9 00:00:43,440 --> 00:00:47,650 So you know all this stuff is compatible and all the modern browsers. 10 00:00:47,970 --> 00:00:52,530 So what we're going to do here is define some variables. 11 00:00:52,540 --> 00:00:58,850 Let's say name equals John and we'll say age. 12 00:00:59,040 --> 00:01:06,730 Rules 30 let's do the job rules. 13 00:01:07,260 --> 00:01:09,310 Web Developer. 14 00:01:09,320 --> 00:01:17,350 Best job in the world and city equals let's say Miami. 15 00:01:17,370 --> 00:01:17,670 All right. 16 00:01:17,670 --> 00:01:26,850 So we have these variables and a lot of times you know a lot of times you're going to be inserting HVM 17 00:01:26,880 --> 00:01:29,110 owl from javascript. 18 00:01:29,130 --> 00:01:35,820 OK so when you fetch something through Ajax and you want to put in let's say in an order to list or 19 00:01:35,820 --> 00:01:41,130 a table with dynamic data you're going to do that through javascript so you're usually going to have 20 00:01:41,130 --> 00:01:48,900 to create some kind of aged him house string with the HCM owl and then with the dynamic data that you 21 00:01:48,900 --> 00:01:50,310 want to insert. 22 00:01:50,310 --> 00:01:58,410 Now first thing I want to show you is how to do that without template strings. 23 00:01:59,170 --> 00:02:03,860 OK so this is basically the E.S. five way. 24 00:02:04,590 --> 00:02:12,870 And what I'm going to do is just initialize an aged female variable here and then we'll say HTL equals 25 00:02:13,230 --> 00:02:17,070 we want our quotes and then let's say we wanted the UL 26 00:02:20,850 --> 00:02:30,870 and then inside here we want our ally will say name and then we want to put that name variable and so 27 00:02:30,870 --> 00:02:34,800 we're going to have to concatenate like this. 28 00:02:35,180 --> 00:02:35,790 Right. 29 00:02:37,520 --> 00:02:39,800 Space there. 30 00:02:40,010 --> 00:02:42,530 So we have our name. 31 00:02:42,530 --> 00:02:43,610 Next we want 32 00:02:46,790 --> 00:02:47,940 the age. 33 00:02:47,990 --> 00:02:52,000 So say age cottony. 34 00:02:52,010 --> 00:02:56,880 Again I like to put spaces to get. 35 00:02:56,870 --> 00:03:00,040 It just makes it look neater so age 36 00:03:03,930 --> 00:03:07,260 then we'll put the what is it job. 37 00:03:07,260 --> 00:03:08,960 So inside this I 38 00:03:13,650 --> 00:03:14,520 put Job 39 00:03:23,110 --> 00:03:27,910 crying and then in our last hour I 40 00:03:31,980 --> 00:03:39,470 mean spaces so this will be what city. 41 00:03:39,480 --> 00:03:39,830 All right. 42 00:03:39,840 --> 00:03:43,980 And we'll just go right here and say city. 43 00:03:43,980 --> 00:03:44,650 All right. 44 00:03:44,730 --> 00:03:47,110 I can do that for job as well. 45 00:03:47,460 --> 00:03:48,330 OK. 46 00:03:48,330 --> 00:03:55,260 So we have our template string here not a template string just an each team string. 47 00:03:55,260 --> 00:03:59,010 So what I'm going to do is just I'll put this in the browser. 48 00:03:59,010 --> 00:04:00,930 Now you guys haven't seen this yet. 49 00:04:00,930 --> 00:04:09,510 Don't worry about it we're going to get into the dorm soon but I'm just going to say document Dog Body 50 00:04:09,510 --> 00:04:12,290 dog owner paged him out. 51 00:04:12,320 --> 00:04:16,440 Eagles are aged him owl string and save. 52 00:04:16,440 --> 00:04:21,740 And now we have a list with the name age and name age job and city. 53 00:04:21,750 --> 00:04:22,040 All right. 54 00:04:22,050 --> 00:04:23,810 So this is kind of a pain in the neck. 55 00:04:23,850 --> 00:04:25,850 Now this doesn't look very good. 56 00:04:25,850 --> 00:04:31,120 It's all meshed together so you may want to put them on separate lines so to do that. 57 00:04:31,200 --> 00:04:40,050 What we would have to do is we would have let's do our UL and then to go to a different line. 58 00:04:40,050 --> 00:04:44,640 I mean we couldn't just go on to the next line and then put in I can see that that's already messed 59 00:04:44,640 --> 00:04:45,500 up. 60 00:04:45,780 --> 00:04:55,530 We would have to concatenate each line so put a plus sign and then we'd have to do our ally shall just 61 00:04:55,530 --> 00:04:56,190 copy 62 00:04:58,770 --> 00:05:01,690 just grab this. 63 00:05:01,690 --> 00:05:11,450 All right so we would have to do that and then we'd have to concatenate onto the next line. 64 00:05:11,570 --> 00:05:16,490 Copy this. 65 00:05:17,410 --> 00:05:20,210 All right so what do we have for things. 66 00:05:20,210 --> 00:05:22,980 And then the last one will just end with a semi-colon. 67 00:05:23,180 --> 00:05:26,020 So we have name age 68 00:05:30,880 --> 00:05:31,450 job 69 00:05:35,740 --> 00:05:37,520 and city. 70 00:05:37,610 --> 00:05:38,130 All right. 71 00:05:38,140 --> 00:05:40,840 And this is the old way of doing things. 72 00:05:41,380 --> 00:05:43,360 So we save that we get the same thing. 73 00:05:43,360 --> 00:05:44,970 We have our list. 74 00:05:45,070 --> 00:05:46,690 Now this is kind of a pain in the neck. 75 00:05:46,690 --> 00:05:52,170 So template strings have fixed this so let's do it now. 76 00:05:55,100 --> 00:06:02,810 With the template strings I call them template strings but you'll see template literals as well. 77 00:06:02,850 --> 00:06:08,540 So to do it with template strings well we can do is just say team all equals. 78 00:06:08,580 --> 00:06:13,030 Now instead of using single quotes or double quotes we're going to use back text. 79 00:06:13,070 --> 00:06:19,430 Ok that's how it knows that this is the template string back ticks to the left of your number one key. 80 00:06:19,920 --> 00:06:23,820 And then what we can do is we can just go on separate lines. 81 00:06:23,900 --> 00:06:31,860 We can put a UL in go down here and it put in an ally just like we would in an h tim him file. 82 00:06:32,040 --> 00:06:32,330 All right. 83 00:06:32,340 --> 00:06:35,990 So have a couple of different allies here. 84 00:06:37,650 --> 00:06:44,000 All right we'll say name and then move we want to put a variable in such as name. 85 00:06:44,070 --> 00:06:45,480 We don't have to concatenate. 86 00:06:45,480 --> 00:06:46,980 We don't want to use plus signs. 87 00:06:46,980 --> 00:06:52,650 We use this syntax a money sign in curly braces and then we can stick a variable in there just like 88 00:06:52,650 --> 00:06:57,550 that a variable and expression whenever we want anything to do with Javascript. 89 00:06:57,630 --> 00:06:58,200 So we'll do. 90 00:06:58,200 --> 00:07:00,430 Age. 91 00:07:01,080 --> 00:07:04,940 Age and job 92 00:07:10,550 --> 00:07:13,860 City. 93 00:07:13,940 --> 00:07:15,250 All right we'll save that. 94 00:07:15,260 --> 00:07:20,890 And we get the same thing so you can see that this is much much nicer much cleaner now. 95 00:07:20,900 --> 00:07:25,560 I mean we've even forgot the ending well here. 96 00:07:25,580 --> 00:07:31,520 And so it's again concatenate and put in our ending. 97 00:07:31,650 --> 00:07:34,310 Well OK. 98 00:07:34,610 --> 00:07:39,080 So I mean even with this doesn't look too too bad because it's an unordered list. 99 00:07:39,080 --> 00:07:44,630 It's simple but when you start getting into until you know a lot of each time when you get into tables 100 00:07:44,630 --> 00:07:50,480 if you're trying to insert a table with all the teachers and teaches and headings and all that this 101 00:07:50,480 --> 00:07:53,350 can get quite messy and quite annoying. 102 00:07:53,690 --> 00:07:58,970 But with eight with template strings or temple literals it's basically just like you're putting it right 103 00:07:58,970 --> 00:08:00,160 into your aged him. 104 00:08:00,170 --> 00:08:02,970 It's essentially a template. 105 00:08:02,990 --> 00:08:03,350 All right. 106 00:08:03,350 --> 00:08:05,110 So let's add some other stuff here. 107 00:08:05,120 --> 00:08:12,520 So we'll put another lie and put a couple of more allies. 108 00:08:12,530 --> 00:08:12,910 All right. 109 00:08:12,910 --> 00:08:16,840 So in addition to just you know variables we can put expressions. 110 00:08:16,830 --> 00:08:23,960 So for instance if we want to say two plus two and save it'll actually evaluate that to four. 111 00:08:23,980 --> 00:08:24,400 All right. 112 00:08:24,400 --> 00:08:26,520 We can put in functions. 113 00:08:26,540 --> 00:08:33,560 So I mean we haven't gone into functions yet but just to give you an example we'll say function we'll 114 00:08:33,560 --> 00:08:44,870 call it hello and then we'll just have a return a string of hello and then we'll go down here and we'll 115 00:08:44,870 --> 00:08:53,450 put in our variable and we can call the hello function save and you can see the returns so we can even 116 00:08:53,450 --> 00:08:54,520 do conditionals. 117 00:08:54,530 --> 00:09:00,800 Now we haven't got into the turn every operator yet but it's basically a shorthand for an IF statement. 118 00:09:00,980 --> 00:09:09,920 So let's say age is if it's greater than 30 that we're going to use the turn or operator which is a 119 00:09:09,920 --> 00:09:12,960 question mark and I'm going to go over all this don't worry about it. 120 00:09:12,980 --> 00:09:15,280 I just want to show you that this is possible. 121 00:09:15,290 --> 00:09:24,080 So if that's true then we're going to say over 30 and if not k the colon represents owls. 122 00:09:24,230 --> 00:09:26,890 If not then we're going to say under 30. 123 00:09:27,140 --> 00:09:33,410 So we'll save that we get under 30 and if we look at the age I mean it is exactly 30 so it's going to 124 00:09:33,820 --> 00:09:34,180 that. 125 00:09:34,190 --> 00:09:36,110 That's technically not over 30. 126 00:09:36,110 --> 00:09:41,330 But if we were to do 31 and save we get over 30. 127 00:09:41,330 --> 00:09:46,110 All right so you can actually do conditionals inside of these variables here. 128 00:09:47,430 --> 00:09:53,280 All right so this is something that we'll be using a lot throughout the course especially in our projects. 129 00:09:53,280 --> 00:09:59,310 I don't want to do it this way the old way it's very very tedious and annoying. 130 00:09:59,820 --> 00:10:02,410 So that's it for this video guys. 131 00:10:02,580 --> 00:10:07,020 And the next video we're going to start to look at arrays and Array methods.