WEBVTT 0 00:00.420 --> 00:01.080 All right guys. 1 00:01.110 --> 00:05.940 So we've been hanging out for a little while now but let me formally introduce myself. 2 00:05.940 --> 00:09.260 My name is Angela and I live in London. 3 00:09.270 --> 00:13.680 My greatest ambition in life is to eat my own body weight in sushi. 4 00:13.710 --> 00:16.310 Now I want you to commit this to your memory. 5 00:16.320 --> 00:22.380 This truly is the first step towards our wonderful blossoming friendship because instead of politely 6 00:22.380 --> 00:26.600 asking you ‘Do you know anyone else called Angela who lives in London?’, 7 00:26.700 --> 00:32.050 I can now ask you ‘Do you know anyone else with my name who lives in my city?’, 8 00:32.200 --> 00:35.400 or ‘Do you know anyone else who has the same ambitions as me?’. 9 00:35.400 --> 00:40.590 This means that whenever I want to talk to you about my name, location or ambitions, I don't have to repeat 10 00:40.590 --> 00:44.510 myself and tell you the information that you've already committed to memory. 11 00:44.580 --> 00:50.610 So this is the same reason why we have something called variables in programming. In the same way that 12 00:50.610 --> 00:52.840 you've committed my name to your memory, 13 00:52.860 --> 00:59.430 we can commit pieces of data to the memory of the computer, but first we need to enable the user to enter 14 00:59.430 --> 01:00.650 a piece of information. 15 01:00.690 --> 01:03.060 So let's learn about the prompt keyword. 16 01:03.060 --> 01:10.230 Now if you open up Chrome and go to our Developer Tools, we're going to head into our Sources to work 17 01:10.290 --> 01:11.970 inside Chrome Snippets. 18 01:11.970 --> 01:17.820 Now inside the same index.js, it's just a blank file at the moment, and I want you to write a 19 01:17.820 --> 01:23.150 prompt that asks the user ‘What is your name?’. 20 01:23.280 --> 01:30.390 And now if I hit command enter or control enter on Windows, or simply just click over here, then it will run 21 01:30.390 --> 01:33.250 my code and it will show me a prompt. 22 01:33.300 --> 01:37.340 Now a prompt is pretty much identical to an alert or a pop up, 23 01:37.470 --> 01:43.820 but in this case it actually allows the user to input something, namely a piece of text. 24 01:43.980 --> 01:47.930 So I'm going to tell it that my name is Angela. 25 01:47.970 --> 01:50.780 So what happened to that piece of data? 26 01:50.790 --> 01:52.700 How can I retrieve it back? 27 01:52.710 --> 01:54.330 What exactly just happened? 28 01:54.510 --> 01:55.890 Well, nothing. 29 01:55.890 --> 01:57.840 It's not committed to memory, 30 01:57.840 --> 02:03.030 so that piece of information is just out there in the air and it's lost. 31 02:03.120 --> 02:05.740 So how can we remember it? 32 02:05.910 --> 02:08.920 Well we can use something called a variable. 33 02:08.940 --> 02:12.650 So for example I can write something like var 34 02:12.900 --> 02:16.080 myName is equal to the string 35 02:16.140 --> 02:17.590 that’s ‘Angela’. 36 02:17.700 --> 02:27.490 So now if I hit run and I go into the console and type myName and hit enter, then it will know that 37 02:27.490 --> 02:29.610 myName is equal to the string 38 02:29.650 --> 02:34.870 ‘Angela’, because I've saved this piece of data inside a variable. 39 02:34.870 --> 02:38.450 Now let's take a look at variables in more detail. 40 02:38.710 --> 02:40.880 This is what the syntax looks like. 41 02:40.930 --> 02:49.040 The first word var is a keyword, and just as alert is a keyword or prompt is a keyword, 42 02:49.060 --> 02:55.690 This tells us that we are creating a new variable, creating a new data container, and that container has 43 02:55.690 --> 02:59.100 the name of whatever it is that we give it here. 44 02:59.380 --> 03:07.030 In this case we called it myName. And then we set that variable to be equal to the value which is the 45 03:07.030 --> 03:08.490 string ‘Angela’. 46 03:08.500 --> 03:15.630 Now every time we refer to myName, the computer knows that we're talking about the string ‘Angela’. 47 03:15.700 --> 03:20.630 So let's dissect the syntax a little bit more and see what's happening behind the scenes. 48 03:20.680 --> 03:26.380 So whenever the computer encounters the keyword var it essentially knows that it has to construct a 49 03:26.380 --> 03:31.340 new container or a new box, and this box gets given a name, 50 03:31.480 --> 03:36.730 whatever it is that we put after the word var, and in this case we call it myName. 51 03:37.000 --> 03:43.600 Now after the equal sign is what we're going to place inside the box and in this case it's the string 52 03:43.930 --> 03:45.230 that's ‘Angela’. 53 03:45.310 --> 03:46.530 And now we get to the end. 54 03:46.540 --> 03:47.910 There's a semi-colon. 55 03:47.950 --> 03:53.140 We finished our line of code and that box has a lid placed on it. 56 03:53.140 --> 04:00.280 Now the special feature of a var, and why it's called a var, is because it stands for the word variable. 57 04:00.280 --> 04:04.500 So that means you can vary the data that you keep inside it. 58 04:04.750 --> 04:11.290 So, in the next instance, if I decide that I didn't really like my name, and I wanted to change it, then 59 04:11.290 --> 04:14.560 I can tap into that same container, by writing its name, 60 04:14.590 --> 04:21.370 in this case myName, and I can set it equal a new value. And what that means is that the computer will 61 04:21.370 --> 04:24.930 find the box that has the name of myName. 62 04:25.020 --> 04:32.080 It’ll take out the content that's currently contained and delete it, and then it will reassign it a new 63 04:32.080 --> 04:36.190 value depending on what I wrote on the right hand side of the equal sign. 64 04:36.340 --> 04:41.020 And with that line of code I varied what's contained inside my box. 65 04:41.020 --> 04:45.550 Notice that in this case I don't have to repeat the keyword var again. 66 04:45.670 --> 04:52.900 The word var is only used when you're constructing a new box to contain your data or when you’re constructing 67 04:52.960 --> 04:53.980 a new variable. 68 04:54.160 --> 04:59.890 When you decide to use the variable or when you decide to change the variable you don't need to use 69 04:59.890 --> 05:01.280 that keyword var anymore. 70 05:01.300 --> 05:05.770 It only needs to occur once in the lifetime of your variables. 71 05:05.770 --> 05:11.860 Now we know that we've saved this piece of data into the variable that's called myName. As a challenge, 72 05:11.890 --> 05:20.320 I want you to create an alert that shows the content of this variable but you're not allowed to type 73 05:20.380 --> 05:21.370 any strings. 74 05:21.490 --> 05:23.800 Pause the video and see if you can figure it out. 75 05:26.440 --> 05:26.760 All right. 76 05:26.770 --> 05:28.200 So this shouldn't be too hard. 77 05:28.210 --> 05:30.470 We already know how to write alerts. 78 05:30.550 --> 05:32.760 We just simply write the alert keyword, 79 05:32.800 --> 05:38.950 we open some parentheses, and inside we place whatever it is that we want to be displayed inside the 80 05:38.950 --> 05:39.720 alert. 81 05:39.910 --> 05:45.540 And in this case we want to show the data that's contained inside the variable myName. 82 05:45.640 --> 05:50.880 So all we have to do is to refer to the name that we gave that variable, 83 05:51.010 --> 05:58.060 in this case it's myName, and we can now hit run. And you can see that ‘Angela’ gets printed because that is 84 05:58.060 --> 06:02.740 the value that’s contained inside this variable or inside this box. 85 06:02.950 --> 06:07.810 So it's like going to a shelf where you've got lots of storage boxes and pulling out the box that's 86 06:07.810 --> 06:12.420 labeled myName to discover what's contained inside, which is the string 87 06:12.520 --> 06:18.760 ‘Angela’. Now, in the same way, we can save the information that the user inputs to our web site. 88 06:18.760 --> 06:26.760 So, for example, we know that myName is equal to ‘Angela’. But what if we used a prompt to ask the user 89 06:27.160 --> 06:29.180 ‘What is your name?’. 90 06:29.240 --> 06:35.470 Now, unlike the last time, we're not going to lose this piece of information. We’re going to keep it inside 91 06:35.470 --> 06:40.530 a variable. And that variable, we're going to give it a name, and we can call it anything we want. 92 06:40.690 --> 06:42.480 But let's think of something that makes sense. 93 06:42.550 --> 06:44.320 How about yourName? 94 06:44.320 --> 06:51.430 And so now you're creating a new variable that's called yourName, and the value of this variable is 95 06:51.460 --> 06:55.340 equal to whatever the user types into the prompt. 96 06:55.340 --> 07:00.040 So now let's hit run and here's my prompt, ‘What is your name?’. 97 07:00.190 --> 07:04.420 So let's say that my name is now Jack Bauer, 98 07:04.420 --> 07:06.190 my favorite person in the world. 99 07:06.660 --> 07:07.320 And hit 100 07:07.360 --> 07:08.060 OK. 101 07:08.290 --> 07:15.130 Now, if I go into the console and I type yourName, and hit enter, the computer knows the value that's 102 07:15.130 --> 07:16.890 associated with that variable 103 07:17.020 --> 07:18.550 is ‘Jack Bauer’. 104 07:18.670 --> 07:26.320 So now we can create an alert that combines the values of both of those variables. So we can write, alert 105 07:26.320 --> 07:33.310 "My name is " + myName, as the variable, + 106 07:33.310 --> 07:37.020 ", welcome to my course " +, 107 07:37.030 --> 07:40.920 the second variable, which is yourName, +, finally, 108 07:40.960 --> 07:42.880 maybe an exclamation mark. 109 07:42.910 --> 07:48.850 And now we close off that line of code with a semi-colon and I don't need these two lines of code anymore 110 07:48.880 --> 07:54.730 because that data has already been committed to the memory of the computer, so I can delete that. 111 07:54.770 --> 07:58.490 And now if I hit run, then you can see that it's created this message, 112 07:58.550 --> 08:01.300 'My nanme is Angela, 113 08:01.510 --> 08:08.770 welcome to my course Jack Bauer!'. So you can see that it's substituted these two places 114 08:08.830 --> 08:15.760 for the value that's been stored inside myName and yourName, and it's able to create this message without 115 08:15.760 --> 08:20.610 me having to explicitly say what these two things are. 116 08:20.680 --> 08:27.910 So, in this lesson, I wanted to introduce you to the power of variables, and how we can use it to store pieces 117 08:27.910 --> 08:28.730 of data, 118 08:28.840 --> 08:34.710 so we don't have to repeat ourselves and we can refer back to it later in the rest of our code. 119 08:34.840 --> 08:41.620 And, on a more practical level, you might have a case where you create a variable that's called gameLevel, 120 08:41.860 --> 08:44.440 and you set it equal to 1 to begin with, 121 08:44.560 --> 08:51.310 and then, as the user goes through the levels, then you can change the value of gameLevel each time. 122 08:51.310 --> 08:58.030 So say they complete the first level, then you can change this thing, gameLevel, to 2, and then you can 123 08:58.030 --> 09:00.150 keep changing this as they progress. 124 09:00.220 --> 09:06.160 And whenever you or the user wants to find out which level, then you can simply use an alert and say 125 09:06.280 --> 09:07.700 show the gameLevel. 126 09:07.810 --> 09:15.130 Now you'll see 3, or, if you want to make it more fancy, then you can add a string that says "Your level 127 09:15.400 --> 09:21.770 is currently: " + gameLevel. 128 09:21.820 --> 09:25.010 So you see that your level is currently: 3. 129 09:25.090 --> 09:27.880 Now I hope you enjoyed this lesson. In the next lesson, 130 09:27.880 --> 09:32.110 we're going to look at some of the rules around how you should name your variables. 131 09:32.200 --> 09:35.100 So for all of that and more, I'll see you on the next lesson.