WEBVTT 0 00:00.480 --> 00:01.080 All right guys. 1 00:01.110 --> 00:02.440 Welcome back. 2 00:02.460 --> 00:07.590 In this module we're going to learn about some other really useful features of Javascript, for example 3 00:07.590 --> 00:09.930 randomization and control flow. 4 00:10.190 --> 00:15.150 And I believe in learning through doing, so while we're picking up all of these skills, we're going to 5 00:15.150 --> 00:17.370 be building a love calculator. 6 00:17.550 --> 00:19.860 So this is a bit of a throwback to the 90s. 7 00:19.890 --> 00:26.460 And for those of you guys who are snapchatting away, then, you know, you might not remember this, but it was 8 00:26.580 --> 00:32.310 kind of a complicated process where you would put down one person's name, then your crush’s name, and 9 00:32.310 --> 00:40.050 then through a process of complicated maths, you would arrive at some random percentage, basically, that 10 00:40.080 --> 00:43.240 dictated how well matched these two people were. 11 00:43.350 --> 00:46.710 So let's try and replicate this using Javascript code. 12 00:46.710 --> 00:52.840 Now, I hate to break it to you, but it's not really a love calculator. It doesn't actually work. 13 00:52.890 --> 00:59.980 It's essentially a way of generating a random number to satisfy young girls’ needs to predict the future. 14 01:00.240 --> 01:02.830 And we can replicate this using code. 15 01:02.910 --> 01:09.570 So Javascript has a really handy way of generating random numbers. As you can imagine, especially when 16 01:09.570 --> 01:11.280 you're creating things like games, 17 01:11.340 --> 01:17.490 you need a lot of random numbers to be generated. So you can do this using Javascript by simply writing 18 01:17.550 --> 01:19.320 Math.random(). 19 01:19.530 --> 01:26.730 And this is a function that generates a random number. And the random number that gets generated is a 20 01:26.730 --> 01:35.670 16 decimal place number, and it can be any number between 0 and 0.9999999. 21 01:35.670 --> 01:39.870 So essentially it never reaches 1. And the number that you get out, 22 01:39.870 --> 01:46.410 so in this case n, will be different every single time you run the code, but it will always be between 23 01:46.410 --> 01:52.290 0 and 0.9 to 16 decimal places, and it never ever reaches 1. 24 01:52.290 --> 01:57.780 Now this is useful because it allows us to generate up to a billion random numbers. 25 01:57.780 --> 02:03.810 So, for example, say if I were to say, variable n = Math.random, and remember we need to 26 02:03.810 --> 02:08.170 use the parentheses to run the function even though it doesn't take an input. 27 02:08.190 --> 02:13.490 Now say that in this case we get 0.3647 etc. etc.. 28 02:13.530 --> 02:15.960 Now say if we were trying to simulate a dice roll, 29 02:15.960 --> 02:21.810 so we have 6 possibilities. When we roll a dice we get any number between 1 and 6, right? 30 02:22.080 --> 02:29.370 So how do we take this random number that we get from Math.random and turn it into a number between 31 02:29.370 --> 02:30.640 1 and 6? 32 02:30.810 --> 02:33.850 Well, we could first multiply it by 6, 33 02:33.870 --> 02:36.710 so we get 2.188. 34 02:36.720 --> 02:40.540 Next we take that number and we perform Math.floor. 35 02:40.560 --> 02:44.130 So you can see here, from our functions knowledge, we know that 36 02:44.160 --> 02:50.100 n in this case is being used as an input to this function floor, which essentially rounds it down to 37 02:50.100 --> 02:51.400 the nearest whole number. 38 02:51.420 --> 02:52.810 In this case it would be 2. 39 02:52.890 --> 02:57.380 And now we have a number that we can work with and we can give back to the user. 40 02:57.480 --> 03:03.570 So I'm going to open up my Snippets inside Chrome, and I'm going to create a variable called n that 41 03:03.570 --> 03:05.490 is equal to Math.random(), 42 03:05.580 --> 03:10.560 and then I'm going to console.log whatever the number n might be. 43 03:10.560 --> 03:17.070 So now I'm going to run my code and you can see we get 0.187 and then we get 44 03:17.210 --> 03:21.630 0.03, 0.147, 0.8446. 45 03:21.630 --> 03:29.220 So you can see that they’re random numbers between 0 and 1 and it never reaches 1, but it can in fact 46 03:29.220 --> 03:30.400 be 0. 47 03:30.840 --> 03:34.840 So it would be 0.0 to 16 decimal places. 48 03:34.920 --> 03:40.980 That is possible with Math.random. And we know this because if we head over to the MDN Developer 49 03:40.990 --> 03:47.490 Docs and we search for Math.random, then it tells us that this function creates a floating point number, 50 03:47.550 --> 03:57.210 so a number that has decimal places, and it is a pseudo random number in the range from 0 inclusive up 51 03:57.210 --> 03:59.100 to but not including 1, 52 03:59.100 --> 04:01.640 so hence the 0.99999. 53 04:01.710 --> 04:05.410 And then you can use this number to scale to your desired range. 54 04:05.430 --> 04:12.030 So say if we wanted to simulate a dice roll using our code, then we would be able to scale this up if 55 04:12.090 --> 04:19.980 we simply did n = n * 6. And if we run the code now, then you can see that we're 56 04:19.980 --> 04:24.940 getting numbers between 0 and 5. 57 04:24.960 --> 04:27.270 Now it never ever reaches 6. 58 04:27.270 --> 04:33.040 The highest number we got was 5.99 and the lowest was 0.2 something. 59 04:33.060 --> 04:42.450 So remember if we do Math.floor on this, then we will get numbers that are between 0 and 5, and you can 60 04:42.450 --> 04:46.260 run this for as many times as you wish but it will never show 6. 61 04:46.260 --> 04:49.560 So our range currently is between 0 and 5, 62 04:49.560 --> 04:55.590 so, in order to increase it to 1 and 6, to simulate that dice roll, because when we roll the dice we never 63 04:55.590 --> 04:56.310 get 0, 64 04:56.310 --> 05:02.690 instead we get a range between 1 and 6, then all we need to do is just to add 1 over here. 65 05:02.780 --> 05:10.430 So now we get the range between 1 all the way through to 6, and this is what's called a pseudo random 66 05:10.430 --> 05:11.650 number generator. 67 05:11.810 --> 05:18.980 And the reason why it's pseudo is because a computer is essentially a whole bunch of switches, just a 68 05:19.040 --> 05:27.200 giant box of many many billions of switches, and, depending on whether the switch is on or off, you essentially 69 05:27.200 --> 05:30.360 get 1 or 0, and it's through these 1s and 0s 70 05:30.380 --> 05:33.870 it does all this computing and all of this glorious work. 71 05:33.920 --> 05:40.160 But there's one thing that it's not very good at, and that is being random. Whereas in nature it's very 72 05:40.160 --> 05:46.180 easy to get randomness, in a computer, because it's a completely deterministic process, 73 05:46.340 --> 05:49.880 it’s not very easy to get a true random number. 74 05:49.970 --> 05:56.270 So people have come up with all sorts of ways and mathematical formulas to get this nonrandom computer 75 05:56.330 --> 06:03.470 to generate what looks like or appears to be, at least statistically, random numbers. 76 06:03.470 --> 06:08.450 Now if you're interested in learning more about pseudo random number generators or what's the difference 77 06:08.450 --> 06:13.850 between random and pseudo random, then take a look at the resources section of this lesson. 78 06:13.850 --> 06:16.460 There's a link to this video by Khan Academy 79 06:16.460 --> 06:20.320 that’s really really good at explaining this in more detail. 80 06:20.350 --> 06:25.200 So view this as a bit of extra reading or extra curricular work if you want. 81 06:25.310 --> 06:31.310 And, if we just review that process, we created a variable called n that is equal to whatever we get 82 06:31.310 --> 06:37.400 back from the Math.random function. And we know that Math.random gives us a number within the 83 06:37.400 --> 06:43.820 range between 0 to 0.9 to 16 decimal places, so 0.9999999. 84 06:43.820 --> 06:50.070 Now, it can be any number in that range, but it's not very useful to us until we scale it. 85 06:50.120 --> 06:55.640 So we take that number and we multiply it by whatever range we need. 86 06:55.640 --> 07:01.640 So if we need numbers between 1 and 12 then we would multiply it by 12, if we need it as a dice then 87 07:01.640 --> 07:06.260 we would maybe multiply it by 6 because we want numbers between 1 and 6. 88 07:06.320 --> 07:11.590 So this then changes the range from 0 to 5.99999, 89 07:11.650 --> 07:15.580 and we can now get any number within that range from this code. 90 07:15.590 --> 07:19.900 Now very rarely will you want to use the random number as a floating point number, 91 07:20.150 --> 07:27.140 so you tend to use Math.floor to round that number down to the nearest whole number, 92 07:27.290 --> 07:30.380 and that range then becomes 0 to 5. 93 07:30.380 --> 07:36.620 Now, finally, because we want a range for our dice between 1 and 6, then all we need to do is add 1 to 94 07:36.620 --> 07:42.470 our code and we end up with code that generates random numbers between 1 and 6. 95 07:42.470 --> 07:44.730 So now here's your challenge. 96 07:44.870 --> 07:49.190 As we said we're going to be building a love calculator. 97 07:49.790 --> 07:56.540 And the way the love calculators work is that you enter two names and it should give you back a percentage 98 07:56.750 --> 08:01.720 between 1 and 100, and that number is supposed to have some sort of meaning. 99 08:01.730 --> 08:05.820 So I want you, as a challenge, to create a love calculator. 100 08:06.050 --> 08:12.650 So it should have two prompts that ask for the names of the two people, and then it should be able to 101 08:12.830 --> 08:19.500 completely ignore that and then calculate a random number that is a percentage. 102 08:19.520 --> 08:24.420 So your random number generator should generate a number between 1 and 100. 103 08:24.440 --> 08:30.350 And finally you should give this information back to the user in the form of an alert telling them what 104 08:30.350 --> 08:32.360 is their love score. 105 08:32.660 --> 08:38.240 So pause the video now and see if you can complete this challenge. 106 08:38.360 --> 08:38.650 All right. 107 08:38.650 --> 08:43.360 So let's clear the screen and start from the beginning. 108 08:43.370 --> 08:48.020 So the first thing I'm going to do is I'm going to create two prompts. Now, because we're not actually 109 08:48.020 --> 08:51.530 doing anything with the values that they're giving us, 110 08:51.530 --> 08:56.420 we’re not going to save the data that the user gives us into a variable, because we're not actually going to 111 08:56.420 --> 08:57.150 be using it. 112 08:57.290 --> 09:00.340 It's just there for authenticity’s sake. 113 09:00.380 --> 09:05.610 So the next thing is where the real stuff happens and which is where the randomization comes in. 114 09:05.630 --> 09:12.740 So let's create a very well called loveScore, and let's create this using Math.random. 115 09:12.980 --> 09:18.850 And, remember, this will give us a number between 0 and up to but not including 1. 116 09:18.860 --> 09:26.570 So now, if we wanted this number to be between 1 and 100, we would have to multiply that by 100. 117 09:26.870 --> 09:34.030 So, if we console.log this as it is, then you can see that we're getting numbers between 0 and 99, 118 09:34.100 --> 09:40.160 and also they have lots and lots of decimal places after the number. 119 09:40.160 --> 09:41.230 So let's change that. 120 09:41.240 --> 09:42.690 Let's round that number down. 121 09:42.710 --> 09:50.810 So let's say loveScore = Math.floor the previous value of loveScore. 122 09:51.140 --> 09:56.920 So now, if we hit run, we're getting 75, 17, so we're getting whole numbers now, 123 09:57.110 --> 10:01.310 but it still does not go all the way up to 100, 124 10:01.460 --> 10:03.600 but it can include 0. 125 10:03.770 --> 10:11.990 So, in order to fix this, we are going to add 1 to the value, and that shifts our range up by 1, moving 126 10:11.990 --> 10:15.380 it from 0 to 99 to 1 to 100. 127 10:15.380 --> 10:17.720 So now that we've got our loveScore, 128 10:17.900 --> 10:22.130 we can send this to the user using an alert, 129 10:22.190 --> 10:26.540 “Your love score is “ + loveScore. 130 10:26.930 --> 10:35.270 So now, if we uncomment our prompt and hit run, then it’ll say, “What is your name?”, and it’ll say, “What is their 131 10:35.270 --> 10:36.200 name?”, 132 10:36.740 --> 10:39.750 and of course none of that information is used 133 10:39.800 --> 10:41.470 and it just gets discarded, 134 10:41.600 --> 10:48.290 because at the end of the day love is a random process. And we get back a loveScore. And I can also 135 10:48.380 --> 10:53.460 add a percentage at the end of this, and now it gives us a love score. 136 10:53.490 --> 10:55.150 So pretty cool, right? Now, 137 10:55.160 --> 11:03.220 wouldn’t it be nice if we could give them a custom message depending on how high or how low their score is? 138 11:03.230 --> 11:07.530 So that's what we'll explore in the next lesson when we learn about control flow 139 11:07.610 --> 11:10.100 and if else statements using Javascript. 140 11:10.100 --> 11:13.270 So for all of that and more, I'll see you on the next lesson.