WEBVTT 0 00:00.360 --> 00:00.990 All right guys. 1 00:00.990 --> 00:08.160 So, in keeping with our previous theme of creating the Twitter character count functionality, we want 2 00:08.160 --> 00:14.640 to improve this a little bit, because, as nice as it may be telling the user that they have written 182 3 00:14.640 --> 00:21.060 characters and that they've gone over by 42 characters, it would be a lot nicer if we simply enforced 4 00:21.060 --> 00:24.660 this rule by removing the extra characters. 5 00:24.750 --> 00:31.170 So, for example, if I head over here and I paste in a huge paragraph, then you can see that it gets cut 6 00:31.170 --> 00:36.870 off at 280 characters, and all the rest is deleted. 7 00:37.080 --> 00:40.910 So how can we implement this using Javascript? 8 00:41.040 --> 00:48.960 Well, first we have to learn about a function called slice. And just as its name suggests, it basically 9 00:48.990 --> 00:55.500 allows you to slice and dice your strings to separate them into individual characters. 10 00:55.500 --> 00:57.870 Now let me show you how slice works. 11 00:57.870 --> 01:03.750 So I'm going to go ahead and select these two lines, and I'm going to comment out all of them by holding 12 01:03.750 --> 01:06.540 down the command key and hitting forward slash. 13 01:06.540 --> 01:10.620 Now on Windows it's holding down control and hitting the forward slash, 14 01:10.650 --> 01:12.460 but it does exactly the same thing. 15 01:12.510 --> 01:15.490 It takes our code and turns it into a comment. 16 01:15.570 --> 01:20.220 So let's say that I have a variable that's called name and it contains the string 17 01:20.220 --> 01:30.050 ‘Angela’. If I take the name variable and I slice it by writing .slice, then I can specify which slice 18 01:30.060 --> 01:32.070 I would like out of this string. 19 01:32.100 --> 01:38.180 So say if I only want the first character in the string then I can simply write 0, 20 01:38.790 --> 01:47.610 1, and this means that I'm trying to take the slice out of this string called name from position 0 21 01:48.210 --> 01:52.020 all the way to, but not including, position 1. 22 01:52.080 --> 01:55.600 So that is equal to simply the first character. 23 01:55.730 --> 02:01.950 And now if I hit run you can see that what we get is the capital letter A, which is the first letter 24 02:01.950 --> 02:02.990 in this string. 25 02:03.000 --> 02:08.470 So a really important thing to remember is that programmers always count from zero. 26 02:08.670 --> 02:13.890 So the capital A is at position zero and not at position 1. 27 02:13.980 --> 02:22.680 So that means that the last letter or the sixth letter is actually at position 5 because we go 0 1 2 28 02:22.680 --> 02:24.130 3 4 5. 29 02:24.240 --> 02:29.670 So in order to get the last letter of this variable then I would have to say give me the character at 30 02:29.670 --> 02:36.430 position 5 and continue until but not including position 6. 31 02:36.510 --> 02:39.610 And of course there is no character at position 6. 32 02:39.660 --> 02:46.380 But by saying 5, 6, we’re only grabbing the last character at position 5, which is of course 33 02:46.440 --> 02:48.310 the lower case letter a. 34 02:48.360 --> 02:54.290 Now I can also grab a bigger slice by having a larger range inside here. 35 02:54.300 --> 03:00.280 So, for example, if I wrote name.slice(0,3), 36 03:00.300 --> 03:05.150 can you predict what the output will be based on this code? 37 03:05.220 --> 03:13.970 So the slice that starts off with the first character or the character position 0 and then ends before 38 03:14.070 --> 03:16.440 the character position 3, 39 03:16.470 --> 03:20.610 so remember 0 1 2 3, 40 03:20.670 --> 03:23.900 that means that our output should be a n g. 41 03:24.150 --> 03:26.130 And that's exactly what we get. 42 03:26.130 --> 03:33.180 So a quick shortcut to know how many characters you're actually slicing is to simply take the upper 43 03:33.180 --> 03:35.610 bound and minus the lower bound. 44 03:35.620 --> 03:38.050 So say 3 - 0 is 3, 45 03:38.220 --> 03:41.110 so that means you get three characters out. 46 03:41.130 --> 03:45.400 If I wrote instead 1, 5, 5 - 1 is 4, 47 03:45.540 --> 03:49.830 so I should be getting four characters out, and indeed that's what happens. 48 03:49.830 --> 03:56.820 So let's say that we have a string abc, and we use the slice function on it. Then it allows us to separate 49 03:56.820 --> 03:58.870 the string into separate characters. 50 03:58.920 --> 04:06.420 But more importantly we can pick and choose which slices we would like out of this original string. 51 04:06.420 --> 04:15.630 So for example if you write 0, 1, then you end up slicing at position 0 and then slicing at position 52 04:15.630 --> 04:16.440 1. 53 04:16.470 --> 04:22.240 So you end up with the first character of the string which in this case is a. 54 04:22.260 --> 04:27.420 Now it's really important to remember that programmers always count from 0. 55 04:27.660 --> 04:32.540 So the first character is always at position 0. 56 04:32.760 --> 04:38.340 And that means that the third character, rather unintuitively, is actually at position 2. 57 04:38.340 --> 04:39.540 Now what about this case? 58 04:39.540 --> 04:42.470 What if we try to slice 1, 3? 59 04:42.510 --> 04:43.790 What is the outcome? 60 04:43.890 --> 04:53.700 Well, we start off at position 1, and we take the entire slice between position 1 and up to, but not including, 61 04:53.730 --> 05:02.070 position 3, because you can see here we only have three items, one at 0, one at position 1, and the 62 05:02.070 --> 05:04.150 last one at position 2. 63 05:04.440 --> 05:08.810 So by slicing from 1 to 3, then we end up with the characters 64 05:08.880 --> 05:09.990 b c. 65 05:10.110 --> 05:12.410 So this is what the syntax looks like. 66 05:12.420 --> 05:18.760 The function is called slice and you give it two numbers, the starting position and the ending position. 67 05:19.170 --> 05:21.410 And you can't just write slice. 68 05:21.420 --> 05:28.950 You also have to specify what you want to slice, so bread.slice, or, in our case, the name of a variable 69 05:29.070 --> 05:34.710 .slice. And it's really important that you keep the syntax for your code to work. 70 05:34.860 --> 05:41.460 Now, once you're comfortable with the slice function, I want you to implement this Twitter character counter 71 05:42.000 --> 05:45.690 yourself by using what we learned about Javascript. 72 05:45.690 --> 05:51.420 So you should be able to write some code that creates a prompt, and when you paste in a large paragraph of 73 05:51.420 --> 06:00.830 text, then it should give you an alert that cuts your tweet down to only 140 characters. 74 06:00.840 --> 06:06.270 So this will require what you've learned in this lesson about slice, as well as some of the knowledge from 75 06:06.270 --> 06:07.190 previous lessons. 76 06:07.260 --> 06:12.350 So pause the video now and see if you can complete this challenge. 77 06:12.350 --> 06:21.120 All right. So let's delete these few lines of code, and let's uncomment our code here, which is exactly 78 06:21.120 --> 06:25.440 the same as commenting, so command or control plus forward slash. 79 06:25.500 --> 06:29.670 And this now becomes highlighted as code and treated as code. 80 06:29.820 --> 06:35.580 So we've got a variable that's called tweet that gets bound to whatever the user enters in the prompt. 81 06:35.820 --> 06:44.790 And then we want to write an alert that cuts down the tweet to 140 characters. So we can create a variable 82 06:44.790 --> 06:48.250 called tweetUnder140. 83 06:48.270 --> 06:54.120 And remember, we can't create variables with names that begin with numbers, but it can contain numbers 84 06:54.690 --> 06:59.980 so tweetUnder140 is going to equal to tweet, 85 07:00.000 --> 07:07.760 so that’s whatever the user put into the prompt, .slice, and then the all important numbers. 86 07:07.770 --> 07:14.720 So, in order to get the first 140 characters we have to write 0, 140. 87 07:14.970 --> 07:19.710 And, if we use that trick that we did before, which is where we try to calculate the range, then if we 88 07:19.710 --> 07:26.080 take 140 - 0, that's 140 characters, starting from the first character. 89 07:26.340 --> 07:28.260 So now let's put a semi-colon. 90 07:28.320 --> 07:33.310 And in the alert we'll simply alert the tweetUnder140 91 07:33.390 --> 07:34.950 back to the user. 92 07:35.040 --> 07:40.240 So I'm going to go ahead and copy this long paragraph first and then I'm going to hit enter and run 93 07:40.240 --> 07:49.110 our code, then I'm going to paste in that long paragraph, hit OK, and I get back 140 characters, 94 07:49.590 --> 07:52.950 cutting it off at the 140th character. 95 07:53.070 --> 07:59.400 And, if you want, you can go ahead and count this, or use the .length to get the computer to check it 96 07:59.400 --> 08:00.130 for you. 97 08:00.140 --> 08:05.730 Now, there might be a few variations on this solution, and that's totally fine. As long as it does exactly 98 08:05.730 --> 08:06.590 the same thing, 99 08:06.640 --> 08:08.880 then I'm happy that you've completed the challenge. 100 08:08.880 --> 08:14.730 Now there's one way of dramatically cutting down these three lines of code into one, which some of you 101 08:14.730 --> 08:20.910 guys might have done, and that is removing the need for these variables. So we can, for example, take the 102 08:20.910 --> 08:29.850 value of this variable, tweetUnder140, and replace it in here, in the alert, and that allows us to delete 103 08:29.910 --> 08:30.980 this line. 104 08:30.980 --> 08:37.800 And instead of having a variable called tweet, we can also simply take the value of that variable and replace 105 08:37.800 --> 08:42.250 it in the code here, and that allows us to get rid of this first line. 106 08:42.390 --> 08:46.100 And this will work exactly the same as before. 107 08:46.110 --> 08:51.210 Now in the next lesson the final thing that we're going to explore with strings is how you can change 108 08:51.330 --> 08:53.310 the case of your string. 109 08:53.310 --> 08:56.330 So for all of that and more, I’ll see you on the next lesson.