Original subtitles

0 All right. 1

So how did that go? 2

Well I hope this was challenging but at the same time fun. 3

So the problem essentially boils down to, how do we selectively capitalize the first letter but not any 4

of the other letters. 5

So, as I said, let's break this problem down. 6

So, step one, we need to be able to create a variable that stores the name that the user enters via a prompt. 7

Now, step two, we need to be able to capitalize the first letter of their name, and then step three, 8

we use the capitalized version of their name to greet them using an alert. 9

OK. 10

So let's try and tackle this one by one. 11

Let's create a var that we can call just name, and we can use it to store the name that they give us 12

via a prompt. 13

So let's delete this line. 14

Let's use our console to verify that we're doing it right every step of the way. 15

So I'm going to put this into the console and I'm going to paste it in here and hit enter. 16

So now that line of code gets run and it's asking me for my name. 17

So I'm going to give it my name but all in lowercase and I'm going to hit OK. 18

So now if I check inside the console what is the current value of name, 19

then you can see it's lower case angela. 20

OK, so the next part, which is the most challenging part, 21

how can you capitalize only the first letter of their name? 22

Well, if you look at this problem just by itself it seems like we can’t achieve it using only what we've 23

learned. 24

But we can actually break down this problem. 25

What if part a of this, we actually isolate the first character, and then we turn the first character 26

to uppercase, step c we isolate the rest of the name, 27

and finally we concatenate the first character with the rest of the characters. 28

So now this seems a little bit more feasible, 29

right? 30

We've initially tried to break down the problem as we saw fit but then we realized that one of these 31

steps actually needed to be further broken down. 32

And now we can tackle it. 33

So isolate the first character. We know how to do that. 34

We can say var firstChar = name.slice, and the numbers we're going to put in here are 35

0 and 1 because we want to take the character beginning at the zero position up to but not including 36

the first position. 37

So that's going to be the first character of the string. So we can again verify this by copying it and 38

pasting it into our console, hitting enter, 39

and let's just check to see what firstChar is currently equal to. 40

So it's equal to the lower case a. Perfect. 41

So the next step, step b, is we want to turn the first character to upper case. 42

So this is very easy as well. 43

Let’s create a var called upperCaseFirstChar, and it's now equal to firstChar, which is the lower case a 44

at the moment, .toUpperCase, and remember we need those two empty parentheses at the end. 45

OK, so let's see if this worked by pasting this into our console. 46

So what is the current value of upperCaseFirstChar? 47

It's capitalized A. Brilliant. 48

So now how do we isolate the rest of the name? 49

Let's create a variable called restOfName, and we will need to use the slice function again. 50

So we're going to take the name that they gave us, we're going to slice the characters so that we get 51

everything other than the first character. 52

Now how do we do that? 53

Well, the first part is easy. 54

We can start off at position 1. 55

So that excludes the first character which is at 0. 56

Now what about the last one? 57

It's pretty easy if we know that the name is Angela because we can count and we can see this is 1 58

2 3 4 5 6 characters. 59

So, in order to get all the characters after the letter A, 60

all we need to do is to write 6 in here. Now, because we're getting the name through a prompt, 61

and we don't know what the user is going to enter, 62

then if we just put in 6, 63

it’s not always going to work. 64

It's only going to work if the name has 6 characters. But we've learned something really useful in 65

this case. 66

We know that we can get the number of characters through the property that is length. So we can simply 67

say name.length, and we'll be able to get the length of whatever name it is that the user enters, 68

so we will always be able to get the last position to put into our slice in order to get the rest of 69

the name. 70

So let's paste this into here as well and let's run it and let's see what restOfName is equal to. 71

And there we go. 72

It's equal to ngela. 73

Beautiful name, right? 74

So now finally we can add our uppercase first character to the rest of the name in order to get our 75

capitalized name. We can use concatenation for this. We can say upperCaseFirstChar + restOfName 76

is now going to be equal to the name that is capitalized. 77

Paste that in here and let's check it out. 78

There we go. 79

We've now got the capitalized Angela. Pretty cool, right? 80

And now all we have to do is to put the capsulized version into the alert and greet the user by saying 81

“Hello ,” 82

+ capitalisedName. 83

So now let's run our code and it asks us for our name, so we'll give it angela, lowercase, hit OK, 84

and it changes our name to capitalized Angela and greets us through an alert. 85

So that might have seemed pretty complicated for achieving something quite simple. 86

And if you look on Stack Overflow or Google, there are simpler ways of doing it. 87

But this exercise is really really crucial in starting to build an essential skill that programmers 88

have, which is taking a big problem, chunking it down, breaking it into smaller pieces, and whenever you get 89

stuck on those smaller pieces, then trying to break that problem down even further. 90

Now some of you guys might have realized that we actually need one extra thing to make our code completely 91

foolproof. 92

Because, what if the user, instead of just writing, you know, lower case angela, which we've addressed, what 93

if they wrote lower case to begin with, but then towards the end they added in some capitalized letters? 94

Our current code doesn't address this, 95

and so it still looks a bit weird. 96

Now this is completely optional. 97

You can either pause the video now and see if you can fix this bug or you can follow along with me and 98

I'll show you how to do this. 99

This is one of the reasons why testing your code is really important, because there's always these edge 100

cases that you might not have thought about but that might happen when you have thousands of users 101

using your web site. 102

So now that we've achieved turning the first letter into uppercase, fixing this one small user experience 103

issue is going to be a walk in the park, because all we need to do is just to add another small step 104

in here. 105

We can call this one d and this one e, and we can say change the rest of the name to lowercase. So 106

we can take this variable we've already got, restOfName is now equal to the previous version of 107

restOfName.toLowerCase(). 108

And now this changes that variable to make all of those characters lower case, and uses it in the concatenation 109

of the capitalized name. 110

So now if we run our code and we put in what we had before which is lower case ang, upper case ELA, 111

hit 112

OK. 113

And, voila, we get our perfect capitalized name no matter what the user decided to enter. 114

So, I hope you had fun with me in this module learning all about strings in Javascript. 115

In the next module we're going to learn more about numbers, doing maths with Javascript and a lot lot 116

more. 117

So I'll see you on the next module.