All right guys. 1
So, in keeping with our previous theme of creating the Twitter character count functionality, we want 2
to improve this a little bit, because, as nice as it may be telling the user that they have written 182 3
characters and that they've gone over by 42 characters, it would be a lot nicer if we simply enforced 4
this rule by removing the extra characters. 5
So, for example, if I head over here and I paste in a huge paragraph, then you can see that it gets cut 6
off at 280 characters, and all the rest is deleted. 7
So how can we implement this using Javascript? 8
Well, first we have to learn about a function called slice. And just as its name suggests, it basically 9
allows you to slice and dice your strings to separate them into individual characters. 10
Now let me show you how slice works. 11
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
down the command key and hitting forward slash. 13
Now on Windows it's holding down control and hitting the forward slash, 14
but it does exactly the same thing. 15
It takes our code and turns it into a comment. 16
So let's say that I have a variable that's called name and it contains the string 17
‘Angela’. If I take the name variable and I slice it by writing .slice, then I can specify which slice 18
I would like out of this string. 19
So say if I only want the first character in the string then I can simply write 0, 20
1, and this means that I'm trying to take the slice out of this string called name from position 0 21
all the way to, but not including, position 1. 22
So that is equal to simply the first character. 23
And now if I hit run you can see that what we get is the capital letter A, which is the first letter 24
in this string. 25
So a really important thing to remember is that programmers always count from zero. 26
So the capital A is at position zero and not at position 1. 27
So that means that the last letter or the sixth letter is actually at position 5 because we go 0 1 2 28
3 4 5. 29
So in order to get the last letter of this variable then I would have to say give me the character at 30
position 5 and continue until but not including position 6. 31
And of course there is no character at position 6. 32
But by saying 5, 6, we’re only grabbing the last character at position 5, which is of course 33
the lower case letter a. 34
Now I can also grab a bigger slice by having a larger range inside here. 35
So, for example, if I wrote name.slice(0,3), 36
can you predict what the output will be based on this code? 37
So the slice that starts off with the first character or the character position 0 and then ends before 38
the character position 3, 39
so remember 0 1 2 3, 40
that means that our output should be a n g. 41
And that's exactly what we get. 42
So a quick shortcut to know how many characters you're actually slicing is to simply take the upper 43
bound and minus the lower bound. 44
So say 3 - 0 is 3, 45
so that means you get three characters out. 46
If I wrote instead 1, 5, 5 - 1 is 4, 47
so I should be getting four characters out, and indeed that's what happens. 48
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
the string into separate characters. 50
But more importantly we can pick and choose which slices we would like out of this original string. 51
So for example if you write 0, 1, then you end up slicing at position 0 and then slicing at position 52
1. 53
So you end up with the first character of the string which in this case is a. 54
Now it's really important to remember that programmers always count from 0. 55
So the first character is always at position 0. 56
And that means that the third character, rather unintuitively, is actually at position 2. 57
Now what about this case? 58
What if we try to slice 1, 3? 59
What is the outcome? 60
Well, we start off at position 1, and we take the entire slice between position 1 and up to, but not including, 61
position 3, because you can see here we only have three items, one at 0, one at position 1, and the 62
last one at position 2. 63
So by slicing from 1 to 3, then we end up with the characters 64
b c. 65
So this is what the syntax looks like. 66
The function is called slice and you give it two numbers, the starting position and the ending position. 67
And you can't just write slice. 68
You also have to specify what you want to slice, so bread.slice, or, in our case, the name of a variable 69
.slice. And it's really important that you keep the syntax for your code to work. 70
Now, once you're comfortable with the slice function, I want you to implement this Twitter character counter 71
yourself by using what we learned about Javascript. 72
So you should be able to write some code that creates a prompt, and when you paste in a large paragraph of 73
text, then it should give you an alert that cuts your tweet down to only 140 characters. 74
So this will require what you've learned in this lesson about slice, as well as some of the knowledge from 75
previous lessons. 76
So pause the video now and see if you can complete this challenge. 77
All right. So let's delete these few lines of code, and let's uncomment our code here, which is exactly 78
the same as commenting, so command or control plus forward slash. 79
And this now becomes highlighted as code and treated as code. 80
So we've got a variable that's called tweet that gets bound to whatever the user enters in the prompt. 81
And then we want to write an alert that cuts down the tweet to 140 characters. So we can create a variable 82
called tweetUnder140. 83
And remember, we can't create variables with names that begin with numbers, but it can contain numbers 84
so tweetUnder140 is going to equal to tweet, 85
so that’s whatever the user put into the prompt, .slice, and then the all important numbers. 86
So, in order to get the first 140 characters we have to write 0, 140. 87
And, if we use that trick that we did before, which is where we try to calculate the range, then if we 88
take 140 - 0, that's 140 characters, starting from the first character. 89
So now let's put a semi-colon. 90
And in the alert we'll simply alert the tweetUnder140 91
back to the user. 92
So I'm going to go ahead and copy this long paragraph first and then I'm going to hit enter and run 93
our code, then I'm going to paste in that long paragraph, hit OK, and I get back 140 characters, 94
cutting it off at the 140th character. 95
And, if you want, you can go ahead and count this, or use the .length to get the computer to check it 96
for you. 97
Now, there might be a few variations on this solution, and that's totally fine. As long as it does exactly 98
the same thing, 99
then I'm happy that you've completed the challenge. 100
Now there's one way of dramatically cutting down these three lines of code into one, which some of you 101
guys might have done, and that is removing the need for these variables. So we can, for example, take the 102
value of this variable, tweetUnder140, and replace it in here, in the alert, and that allows us to delete 103
this line. 104
And instead of having a variable called tweet, we can also simply take the value of that variable and replace 105
it in the code here, and that allows us to get rid of this first line. 106
And this will work exactly the same as before. 107
Now in the next lesson the final thing that we're going to explore with strings is how you can change 108
the case of your string. 109
So for all of that and more, I’ll see you on the next lesson.