1 00:00:01,210 --> 00:00:02,090 Let's now learn 2 00:00:02,090 --> 00:00:04,830 about some more mathematical operations 3 00:00:04,830 --> 00:00:07,043 and also about rounding numbers. 4 00:00:08,480 --> 00:00:09,980 And we have already been using 5 00:00:09,980 --> 00:00:12,760 lots of mathematical operations, 6 00:00:12,760 --> 00:00:16,210 for example plus, minus, times, divided, 7 00:00:16,210 --> 00:00:18,930 exponentiation and so on. 8 00:00:18,930 --> 00:00:22,030 And so we don't need to go over these again. 9 00:00:22,030 --> 00:00:25,610 So let's start here with the square root. 10 00:00:25,610 --> 00:00:28,320 And so just like many other functions 11 00:00:28,320 --> 00:00:31,233 the square root is part of the math namespace. 12 00:00:32,450 --> 00:00:37,450 So Math.sqrt, so this stands for square root. 13 00:00:38,610 --> 00:00:42,250 And so all we need to do, is to pass in the number 14 00:00:42,250 --> 00:00:44,413 and then it will give us the square root. 15 00:00:45,740 --> 00:00:47,020 And the same could be achieved 16 00:00:47,020 --> 00:00:50,260 using the exponentiation operator as well 17 00:00:51,370 --> 00:00:53,840 by doing one divided by two. 18 00:00:53,840 --> 00:00:57,600 And so that two is the square. 19 00:00:57,600 --> 00:00:59,290 So we want the square root. 20 00:00:59,290 --> 00:01:02,293 So we use one divided by two, 21 00:01:03,160 --> 00:01:07,200 and actually we have to put this into parenthesis 22 00:01:07,200 --> 00:01:10,580 and now it works, all right? 23 00:01:10,580 --> 00:01:13,500 And the same would work for a cubic root 24 00:01:13,500 --> 00:01:16,303 for example of eight, which would be two. 25 00:01:18,140 --> 00:01:21,060 And so actually this is I think the only way 26 00:01:21,060 --> 00:01:25,330 you could calculate a cubic root if you need it. 27 00:01:25,330 --> 00:01:28,040 Next up, let's get the maximum value 28 00:01:28,040 --> 00:01:31,860 of a couple of values, okay. 29 00:01:31,860 --> 00:01:36,733 So again, we use Math.max this time. 30 00:01:37,970 --> 00:01:40,743 So let's just use a couple of numbers here. 31 00:01:43,080 --> 00:01:44,400 And so as the name says, 32 00:01:44,400 --> 00:01:47,690 the maximum value gets returned to us. 33 00:01:47,690 --> 00:01:52,690 And this max function here actually does type coercion. 34 00:01:52,940 --> 00:01:57,670 So it should now still give us 23, okay? 35 00:01:57,670 --> 00:02:00,920 However, it does not parsing. 36 00:02:00,920 --> 00:02:04,640 So if we try 23 pixels for example, 37 00:02:04,640 --> 00:02:07,563 it will then result in not a number. 38 00:02:08,520 --> 00:02:11,163 So this does not work, all right? 39 00:02:13,840 --> 00:02:17,923 And just as we have max, we also have min, 40 00:02:19,470 --> 00:02:21,413 let's just put it back to 23. 41 00:02:22,390 --> 00:02:26,960 And now here we get two, all right? 42 00:02:26,960 --> 00:02:29,310 Now, besides a couple of methods, 43 00:02:29,310 --> 00:02:32,730 there are also constants on the math object 44 00:02:32,730 --> 00:02:35,023 or on the math namespace. 45 00:02:36,180 --> 00:02:37,300 And so for example, 46 00:02:37,300 --> 00:02:40,480 if we wanted to calculate the radius of a circle 47 00:02:40,480 --> 00:02:43,660 with 10 pixels, we could do that. 48 00:02:43,660 --> 00:02:47,140 So for that, we use Math.PI. 49 00:02:47,140 --> 00:02:50,100 And for now let's just take a look at that. 50 00:02:50,100 --> 00:02:55,100 And so it is this constant that you might know probably. 51 00:02:56,910 --> 00:02:59,680 And so again, let's say that we get like 10 pixels 52 00:02:59,680 --> 00:03:01,300 from the user interface. 53 00:03:01,300 --> 00:03:04,050 So we can say parseFloat 54 00:03:05,620 --> 00:03:06,883 of 10 pixels, 55 00:03:08,672 --> 00:03:11,890 and then we simply have to square this value. 56 00:03:11,890 --> 00:03:15,330 This is how we calculate the area of a circle 57 00:03:15,330 --> 00:03:18,323 with this radius, all right? 58 00:03:19,740 --> 00:03:23,260 Now another thing that is on the math object 59 00:03:23,260 --> 00:03:24,950 is the random function 60 00:03:24,950 --> 00:03:27,920 that we already have been using a couple of times. 61 00:03:27,920 --> 00:03:30,660 And it's very important to be able to generate 62 00:03:30,660 --> 00:03:33,400 good random numbers when we need them. 63 00:03:33,400 --> 00:03:37,680 So before we have already created random dice rolls. 64 00:03:37,680 --> 00:03:42,680 Remember, so that we did by Math.random. 65 00:03:44,780 --> 00:03:49,780 And so this will give us a number between zero and one. 66 00:03:49,920 --> 00:03:53,200 So as I reload, you see, I get different values. 67 00:03:53,200 --> 00:03:56,300 Then we multiply this by a six. 68 00:03:56,300 --> 00:04:01,300 And then we removed basically the decimal part 69 00:04:01,300 --> 00:04:06,300 by doing Math.trunc on like this, okay? 70 00:04:08,300 --> 00:04:09,920 Now the problem with this was 71 00:04:09,920 --> 00:04:13,030 that then the highest number could be five. 72 00:04:13,030 --> 00:04:15,730 And so we simply edit plus one 73 00:04:15,730 --> 00:04:18,530 to offset that truncation here. 74 00:04:18,530 --> 00:04:21,390 so that cutting off of the decimal part. 75 00:04:21,390 --> 00:04:23,860 And so now we're gonna get values here 76 00:04:23,860 --> 00:04:28,230 between really one and six. 77 00:04:28,230 --> 00:04:31,090 But now let's actually generalize this formula 78 00:04:31,090 --> 00:04:32,860 so that we can use it from now on 79 00:04:32,860 --> 00:04:37,860 to always generate random integers between two values. 80 00:04:38,700 --> 00:04:42,320 So let's create randomInt 81 00:04:45,230 --> 00:04:48,963 and we want to pass in a minimum and a maximum, 82 00:04:50,340 --> 00:04:52,673 and then we want to return that number. 83 00:04:53,720 --> 00:04:58,100 So as always, we need to start by removing any decimal parts 84 00:04:58,100 --> 00:05:02,463 of the result of Math.random. 85 00:05:03,960 --> 00:05:07,890 And then we will multiply this Math.random 86 00:05:07,890 --> 00:05:12,470 by max minus min okay? 87 00:05:13,960 --> 00:05:17,230 And then we add that one back on. 88 00:05:17,230 --> 00:05:19,653 And so let me show you why we do this. 89 00:05:21,010 --> 00:05:26,010 So it is because, it gives us a number between zero and one. 90 00:05:27,190 --> 00:05:30,840 So Math.random is between zero and one, right? 91 00:05:30,840 --> 00:05:34,550 So if we multiply this by max minus min 92 00:05:34,550 --> 00:05:39,490 then we get a number between zero and max minus min, okay? 93 00:05:43,800 --> 00:05:46,700 And now if we add min to all of this, 94 00:05:46,700 --> 00:05:48,880 so the minimum value, 95 00:05:48,880 --> 00:05:53,880 then we get min to max minus min plus min. 96 00:05:59,590 --> 00:06:02,090 So we added min on both sides here, 97 00:06:02,090 --> 00:06:03,990 basically of the equation. 98 00:06:03,990 --> 00:06:07,600 And so then we can cancel this minus min plus min, 99 00:06:07,600 --> 00:06:11,400 and we end up with a range between the minimum 100 00:06:11,400 --> 00:06:16,390 and the maximum value that we specified, all right? 101 00:06:16,390 --> 00:06:18,513 So let's just add that here as well. 102 00:06:20,050 --> 00:06:21,260 So adding that minimum 103 00:06:21,260 --> 00:06:24,230 that I just explained to in his last step. 104 00:06:24,230 --> 00:06:27,220 And so this is how we end up with a nice function 105 00:06:27,220 --> 00:06:29,160 which will give us always a number 106 00:06:29,160 --> 00:06:32,393 that's going to stay between min and max. 107 00:06:33,380 --> 00:06:34,823 So let's try that out. 108 00:06:36,120 --> 00:06:40,180 So randomInt, let's say between 10 and 20 109 00:06:41,880 --> 00:06:45,910 and so here we see 20 and let's try it a couple of times. 110 00:06:45,910 --> 00:06:49,053 So I'm gonna save this file here a couple of times, 111 00:06:50,250 --> 00:06:52,490 and you'll see that all of these results 112 00:06:52,490 --> 00:06:54,463 are always within this range. 113 00:06:57,040 --> 00:06:58,623 Now I maybe overdid it, 114 00:06:59,970 --> 00:07:04,510 probably it's easier to just reload this page, all right? 115 00:07:04,510 --> 00:07:07,560 So we haven't seen any 10 or any 11 yet, 116 00:07:07,560 --> 00:07:09,460 but it's gonna work just fine 117 00:07:09,460 --> 00:07:14,460 and we will get it if we reload it even more times, okay? 118 00:07:14,690 --> 00:07:17,900 Next up, let's talk a little bit about rounding 119 00:07:17,900 --> 00:07:21,060 and let's start by rounding integers. 120 00:07:21,060 --> 00:07:23,090 So you can add some comments to this here 121 00:07:23,090 --> 00:07:26,223 if you want, but I'm just gonna leave it like this. 122 00:07:27,270 --> 00:07:31,483 I will just add here rounding integers. 123 00:07:32,490 --> 00:07:37,047 And so we have already been using math.trunc, right? 124 00:07:40,290 --> 00:07:44,190 So what this does, is to simply remove any decimal part 125 00:07:44,190 --> 00:07:47,553 and so we end up with 23 here, right? 126 00:07:48,610 --> 00:07:52,253 Let's just take this one out, all right? 127 00:07:53,910 --> 00:07:58,193 So again, this one simply removes any decimal part always, 128 00:07:59,050 --> 00:08:01,470 but we have also other ways. 129 00:08:01,470 --> 00:08:06,423 So we also have round, so math.round. 130 00:08:09,870 --> 00:08:13,560 And so this one will always round to the nearest integer. 131 00:08:13,560 --> 00:08:16,703 So this one is gonna be 23 and the other one 24. 132 00:08:20,520 --> 00:08:22,320 Let's duplicate us a couple of times 133 00:08:23,530 --> 00:08:25,130 to save us some time. 134 00:08:25,130 --> 00:08:27,170 Then we also have ceil 135 00:08:28,470 --> 00:08:31,390 and this one will basically round down. 136 00:08:31,390 --> 00:08:35,900 So both of these results should become 24. 137 00:08:35,900 --> 00:08:38,300 And so that's these two here. 138 00:08:38,300 --> 00:08:41,760 So line 318 and 20, 139 00:08:41,760 --> 00:08:43,660 or actually it's these two. 140 00:08:43,660 --> 00:08:46,740 So I'm confusing these numbers, all right? 141 00:08:46,740 --> 00:08:48,620 So both of these are 24, 142 00:08:48,620 --> 00:08:52,420 because they will both always be rounded up. 143 00:08:52,420 --> 00:08:54,563 And then we also have floor. 144 00:08:57,227 --> 00:09:01,397 And so these two will both be rounded down to 23. 145 00:09:02,519 --> 00:09:04,183 And so that's what we get here. 146 00:09:05,120 --> 00:09:07,380 And by the way, all of these methods, 147 00:09:07,380 --> 00:09:10,840 they also do type coercion. 148 00:09:10,840 --> 00:09:14,103 So if we do this, then it's gonna work just the same. 149 00:09:15,210 --> 00:09:19,223 Now you might think that floor and trunc are very similar. 150 00:09:20,340 --> 00:09:22,090 Let me just put this one down here. 151 00:09:22,940 --> 00:09:25,080 And indeed they do the same 152 00:09:25,080 --> 00:09:27,760 when we are dealing with positive numbers. 153 00:09:27,760 --> 00:09:32,550 So basically floor and trunc, both cut off the decimal part 154 00:09:32,550 --> 00:09:35,263 when we are dealing with positive numbers. 155 00:09:36,140 --> 00:09:39,713 However, for negative numbers, it doesn't work this way. 156 00:09:41,470 --> 00:09:42,963 So let me compare them here. 157 00:09:44,570 --> 00:09:49,523 So trunk minus this and also floor, okay? 158 00:09:51,550 --> 00:09:53,660 And so now this one here, 159 00:09:53,660 --> 00:09:55,600 just like before it gets truncated. 160 00:09:55,600 --> 00:09:57,720 So it simply removes this part, 161 00:09:57,720 --> 00:10:01,640 but floor now gets rounded to minus 24. 162 00:10:01,640 --> 00:10:03,350 Because with negative numbers, 163 00:10:03,350 --> 00:10:05,730 rounding works the other way around. 164 00:10:05,730 --> 00:10:10,350 And so actually a floor is a little bit better than trunc 165 00:10:10,350 --> 00:10:12,720 because it works in all situations, 166 00:10:12,720 --> 00:10:14,810 no matter if we're dealing with positive 167 00:10:14,810 --> 00:10:16,960 or negative numbers. 168 00:10:16,960 --> 00:10:20,763 And so here, let's go ahead and replace this with floor. 169 00:10:21,930 --> 00:10:25,163 So we're looking for a really generalized function here. 170 00:10:26,440 --> 00:10:30,020 So this randomInt function should work in all situations 171 00:10:30,020 --> 00:10:33,670 even if we give it a negative inputs here. 172 00:10:33,670 --> 00:10:36,793 And so therefore, we need to work with floor here, 173 00:10:38,830 --> 00:10:42,740 All right, so that's rounding integers. 174 00:10:42,740 --> 00:10:45,660 Let's talk about a floating point numbers 175 00:10:48,040 --> 00:10:50,663 or we can also say decimals. 176 00:10:51,540 --> 00:10:52,680 And now with decimals, 177 00:10:52,680 --> 00:10:55,850 it works in a little bit different way. 178 00:10:55,850 --> 00:10:57,893 So let me show you how. 179 00:10:58,810 --> 00:10:59,840 So in decimals, 180 00:10:59,840 --> 00:11:04,550 we have to specify the number like this in parenthesis. 181 00:11:04,550 --> 00:11:09,550 And then on that number, we call the toFixed method, okay? 182 00:11:10,840 --> 00:11:13,160 And let's try it here with zero first, 183 00:11:13,160 --> 00:11:15,083 just so we can see the result. 184 00:11:16,010 --> 00:11:17,850 And so you see that with the zero, 185 00:11:17,850 --> 00:11:20,010 it is converted to three, 186 00:11:20,010 --> 00:11:23,480 but this three is a white here 187 00:11:23,480 --> 00:11:27,060 while these other ones are pink or purple. 188 00:11:27,060 --> 00:11:31,820 And so this means that is actually a string, right? 189 00:11:31,820 --> 00:11:36,810 So toFixed will always return a string and not a number. 190 00:11:36,810 --> 00:11:39,410 And that's important to keep in mind. 191 00:11:39,410 --> 00:11:42,263 So if we start here instead of zero to three, 192 00:11:44,040 --> 00:11:47,750 then it returns to 0.7 and it adds zeros 193 00:11:47,750 --> 00:11:51,030 until it has exactly three decimal parts. 194 00:11:51,030 --> 00:11:53,743 Just like we specify it here, all right? 195 00:11:55,770 --> 00:11:57,850 Now let's add something more here, 196 00:11:57,850 --> 00:12:00,290 like two, three, four five. 197 00:12:00,290 --> 00:12:03,890 And let's say we only want two decimal places here now. 198 00:12:03,890 --> 00:12:08,890 So this should become 2.35, and indeed it does, okay? 199 00:12:11,000 --> 00:12:14,670 And if we now wanted to convert this result to a number, 200 00:12:14,670 --> 00:12:18,370 then we simply would have to add the plus sign here. 201 00:12:18,370 --> 00:12:19,580 And then we already know 202 00:12:19,580 --> 00:12:22,803 that this here converts a string to a number. 203 00:12:23,770 --> 00:12:26,423 And indeed now it is purple again. 204 00:12:28,470 --> 00:12:31,530 So with decimals it works differently 205 00:12:31,530 --> 00:12:33,830 than with integers and debts. 206 00:12:33,830 --> 00:12:37,030 Once again, because things in JavaScript 207 00:12:37,030 --> 00:12:41,980 evolved kind of in a weird way in this kind of old language. 208 00:12:41,980 --> 00:12:44,950 And if the language was designed today 209 00:12:44,950 --> 00:12:47,430 and definitely this would be very different 210 00:12:47,430 --> 00:12:52,023 but now this is what we have to work with right now, okay? 211 00:12:53,350 --> 00:12:54,210 Just keep in mind 212 00:12:54,210 --> 00:12:55,190 Does this here works 213 00:12:55,190 --> 00:12:58,340 in a similar way than the string methods? 214 00:12:58,340 --> 00:13:03,330 So this is a number, so it's a primitive, right? 215 00:13:03,330 --> 00:13:06,100 And primitives actually don't have methods. 216 00:13:06,100 --> 00:13:09,990 And so behind the scenes, JavaScript will do boxing. 217 00:13:09,990 --> 00:13:12,980 And boxing is to basically transform this 218 00:13:12,980 --> 00:13:17,210 to a number object, then call the method on that object. 219 00:13:17,210 --> 00:13:19,290 And then once the operation is finished 220 00:13:19,290 --> 00:13:23,640 it will convert it back to a primitive, okay? 221 00:13:23,640 --> 00:13:25,900 All right, So once again, 222 00:13:25,900 --> 00:13:29,730 this lecture looked a little bit like a reference 223 00:13:29,730 --> 00:13:31,603 of a couple of different methods, 224 00:13:32,610 --> 00:13:34,430 but to make it a bit more fun 225 00:13:34,430 --> 00:13:38,770 let's now apply some of this to our bankers project. 226 00:13:38,770 --> 00:13:40,640 And the first thing that I want to do 227 00:13:40,640 --> 00:13:43,873 is to round the requested loan amount. 228 00:13:45,290 --> 00:13:48,410 So this one here, so this looks weird. 229 00:13:51,630 --> 00:13:53,793 Oh, it's because of this number. 230 00:13:56,240 --> 00:13:58,870 Now okay, So we could use this application 231 00:13:58,870 --> 00:14:01,970 in this other page here on the other side 232 00:14:01,970 --> 00:14:05,520 but I prefer to have everything here in one screen. 233 00:14:05,520 --> 00:14:10,520 But anyway, I can take a loan, like this, right? 234 00:14:11,460 --> 00:14:13,210 With the decimal part. 235 00:14:13,210 --> 00:14:15,690 But in practice, I've never seen a bank 236 00:14:15,690 --> 00:14:17,860 giving out the loan like this. 237 00:14:17,860 --> 00:14:19,960 And so that's applied to rounding 238 00:14:19,960 --> 00:14:24,960 to the loan functionality. 239 00:14:26,270 --> 00:14:29,010 So that's here and the rounding 240 00:14:29,010 --> 00:14:30,823 then needs to happen right here. 241 00:14:31,720 --> 00:14:34,370 So the value that we get from the loan here 242 00:14:34,370 --> 00:14:37,630 needs to be rounded down, okay? 243 00:14:37,630 --> 00:14:39,070 And then we actually do not need 244 00:14:39,070 --> 00:14:41,150 to convert it to a number 245 00:14:41,150 --> 00:14:45,463 because as I showed you before, the math.floor method 246 00:14:48,480 --> 00:14:52,560 actually does type coercion itself, okay? 247 00:14:52,560 --> 00:14:54,850 And we are using floor here 248 00:14:54,850 --> 00:14:58,780 because we simply want to round any value down, all right? 249 00:14:58,780 --> 00:15:02,743 So in this case it would have been 150 and that's it. 250 00:15:04,290 --> 00:15:05,843 So let's try that again now. 251 00:15:11,090 --> 00:15:15,803 So let's ask for 150.56. 252 00:15:17,200 --> 00:15:20,790 And so now we get just this, okay? 253 00:15:20,790 --> 00:15:23,500 Probably I added one more zero there 254 00:15:23,500 --> 00:15:25,410 but that doesn't matter. 255 00:15:25,410 --> 00:15:30,060 Next up, let's use the toFixed function or method 256 00:15:30,060 --> 00:15:32,853 to make our numbers here look a little bit nicer. 257 00:15:33,780 --> 00:15:37,010 So here for example, we have this decimal part 258 00:15:37,010 --> 00:15:38,270 with the two numbers 259 00:15:38,270 --> 00:15:40,483 but here then we only have the 0.9. 260 00:15:41,660 --> 00:15:44,310 And so this would be like 0.90 261 00:15:44,310 --> 00:15:47,493 and here it should be 1300.00. 262 00:15:48,570 --> 00:15:51,743 And the same also up here, all right? 263 00:15:52,850 --> 00:15:55,650 So for that we can use the toFixed function 264 00:15:55,650 --> 00:15:57,460 that we just learned about. 265 00:15:57,460 --> 00:15:59,590 And so let's do that in all the places 266 00:15:59,590 --> 00:16:03,240 where we display numbers on the screen. 267 00:16:03,240 --> 00:16:06,710 And so that's in, in these three functions. 268 00:16:06,710 --> 00:16:10,153 So displayMovements, DisplayBalance, and DisplaySummary. 269 00:16:12,524 --> 00:16:14,183 So let's start here at the top. 270 00:16:15,470 --> 00:16:18,860 And so here we have the first occurrence. 271 00:16:18,860 --> 00:16:20,870 So this movement here is a value. 272 00:16:20,870 --> 00:16:23,020 So it's a number that we display. 273 00:16:23,020 --> 00:16:26,513 And so on here, we can simply call so .toFixed, 274 00:16:28,870 --> 00:16:32,573 and then with two decimal parts, now right? 275 00:16:34,280 --> 00:16:36,080 Now, let's just copy this from here. 276 00:16:38,130 --> 00:16:41,600 So DisplayBalance, So let's do the same here 277 00:16:44,490 --> 00:16:46,450 and the same in the summary. 278 00:16:46,450 --> 00:16:49,077 And so that will then hopefully also fix 279 00:16:49,077 --> 00:16:52,740 this weird, really long number 280 00:16:52,740 --> 00:16:56,340 that happens because of the rounding errors in JavaScript 281 00:16:56,340 --> 00:16:58,990 that I just explained to you in the previous lecture. 282 00:16:59,900 --> 00:17:04,263 So everywhere we print a number, I will do this now, okay? 283 00:17:08,960 --> 00:17:13,960 Then also on this result and also on the interest. 284 00:17:15,750 --> 00:17:16,850 Let's give it a safe 285 00:17:21,770 --> 00:17:23,830 and that's a lot better. 286 00:17:23,830 --> 00:17:27,613 So it worked, you see now we get 0.00, 287 00:17:28,940 --> 00:17:32,533 and here we also get to nicely 0.90. 288 00:17:33,860 --> 00:17:35,330 And the same down here, 289 00:17:35,330 --> 00:17:38,520 we are now back to having just two decimal places 290 00:17:38,520 --> 00:17:42,710 just as we requested so to say. 291 00:17:42,710 --> 00:17:46,180 So this lecture was kind of a short overview 292 00:17:46,180 --> 00:17:49,860 of some more math functions including rounding 293 00:17:51,020 --> 00:17:53,600 and also some other stuff 294 00:17:53,600 --> 00:17:58,600 like getting the max and the min value and yeah. 295 00:17:58,860 --> 00:18:00,850 So good to know functions. 296 00:18:00,850 --> 00:18:02,850 And of course there are a lot more. 297 00:18:02,850 --> 00:18:03,930 So if you need something 298 00:18:03,930 --> 00:18:07,750 like logarhythmical functions or sinuses, 299 00:18:07,750 --> 00:18:10,050 then of course you can always check out 300 00:18:10,050 --> 00:18:12,143 the MDN documentation.