WEBVTT 00:00:07.090 --> 00:00:09.720 In this video we're going to learn for loops. 00:00:09.750 --> 00:00:12.020 So what do we need loops for. 00:00:12.390 --> 00:00:17.910 Imagine that we would like to add to our jobs Chris barograph numbers between 0 and 4. 00:00:18.150 --> 00:00:21.990 And every time we add a number we want a line break before the number. 00:00:22.860 --> 00:00:27.040 So we know how to do without using the elements by id method. 00:00:27.290 --> 00:00:36.030 Streitz So documents its elements by id my paragraph and then we go into the in the middle. 00:00:36.480 --> 00:00:46.250 And I think first of all a line break and then we adding the number so we saucing with zero. 00:00:46.710 --> 00:00:48.570 OK. 00:00:49.040 --> 00:00:56.010 And then one two three four. 00:00:56.750 --> 00:01:01.890 So we write this code several times so that we get this result OK. 00:01:02.160 --> 00:01:10.200 Now if you want to go into 100 we will need to duplicate this same piece of code a hundred times and 00:01:10.200 --> 00:01:11.720 we don't want to do that. 00:01:11.760 --> 00:01:15.090 So there is a better way of doing this is by using for loops. 00:01:15.090 --> 00:01:23.510 So let's see how it works so we need to use the javascript key word for followed by parentheses where 00:01:23.510 --> 00:01:29.100 we're going to put some statements and then we're going to put the piece of code does we would like 00:01:29.100 --> 00:01:30.960 to run every time. 00:01:31.830 --> 00:01:39.630 So in our case every time we're running almost the same piece of code but what's changing here is the 00:01:39.900 --> 00:01:43.600 barometer that we are using in here. 00:01:43.890 --> 00:01:46.750 So we're going to use a variable for that. 00:01:46.980 --> 00:01:51.660 And then we're going to write the statements inside the parenthesis using I. 00:01:51.900 --> 00:01:59.290 So first of all we are going to initiate II to zero because the first piece of code is using is zero 00:01:59.340 --> 00:01:59.850 . 00:02:00.240 --> 00:02:07.230 And then we're going to say that every time we would like to run the code first we need to verify that 00:02:07.450 --> 00:02:09.470 he is less than five. 00:02:09.810 --> 00:02:10.400 OK. 00:02:10.710 --> 00:02:14.160 And every time we run the code he goes up by 1. 00:02:14.160 --> 00:02:18.970 So first one is 0 then we go up by 1 and then we run for one and so on. 00:02:19.140 --> 00:02:19.890 So on. 00:02:19.950 --> 00:02:26.330 Plus plus plus plus plus is the same as he becomes becomes i. 00:02:26.850 --> 00:02:30.110 Plus one is exactly the same. 00:02:30.200 --> 00:02:31.010 OK. 00:02:31.410 --> 00:02:33.720 So I'm plasma's. 00:02:33.720 --> 00:02:38.180 So basically what's happening is at the beginning equal is equal to zero. 00:02:38.190 --> 00:02:40.490 We on this for I equals zero. 00:02:40.560 --> 00:02:43.940 OK so we were actually writing this line. 00:02:44.400 --> 00:02:47.610 And then it becomes one. 00:02:47.640 --> 00:02:49.390 We test this. 00:02:49.470 --> 00:02:51.480 Yes one is less than five. 00:02:51.540 --> 00:02:53.190 We run our equals 1. 00:02:53.370 --> 00:02:55.820 We ahd another one too. 00:02:55.860 --> 00:02:57.330 And then it becomes two. 00:02:57.540 --> 00:03:00.900 We run I becomes three we run again becomes four. 00:03:00.930 --> 00:03:01.860 We run. 00:03:01.860 --> 00:03:03.610 And then it becomes five. 00:03:03.630 --> 00:03:08.350 We cannot run we can because we cannot verify this condition and then we're going to stop that. 00:03:08.370 --> 00:03:08.830 All right. 00:03:08.940 --> 00:03:15.390 So let's get rid of our old code and test if this is working. 00:03:15.390 --> 00:03:22.940 Yes he's working this test for 11 and then it does work. 00:03:22.950 --> 00:03:30.770 We go in until 10 and let's try hundred one for example and it is working. 00:03:30.870 --> 00:03:33.060 We are going until hundreds. 00:03:33.060 --> 00:03:33.810 All right. 00:03:34.260 --> 00:03:37.570 So that's how four loops work. 00:03:37.770 --> 00:03:39.500 OK let's go back to four. 00:03:39.780 --> 00:03:42.270 And now you can see that's what he's working on. 00:03:42.330 --> 00:03:44.790 Or five. 00:03:44.790 --> 00:03:53.010 All right now let's go for another example let's say odd numbers to power two and this time we would 00:03:53.010 --> 00:03:58.550 like to start with seven square and then go to six square and until one. 00:03:58.790 --> 00:03:59.770 OK. 00:04:00.030 --> 00:04:06.770 So in this example I'm not going up by one every time he's going down by 1 every time. 00:04:06.780 --> 00:04:13.000 So how do we do that. 00:04:13.050 --> 00:04:15.540 So first of all we would like to add 00:04:20.220 --> 00:04:24.530 to the paragraph you know Ishmail would want to add a line break plus. 00:04:24.570 --> 00:04:33.630 So rather than I we're adding here with an eye to the power of two so we need to use the method power 00:04:33.900 --> 00:04:36.060 of months. 00:04:36.150 --> 00:04:37.160 OK. 00:04:37.680 --> 00:04:40.660 And it needs two provinces first moments it's going to be. 00:04:40.950 --> 00:04:45.050 And then the power is to obey. 00:04:45.180 --> 00:04:49.980 So the first number we say is going to be seven squares or seven. 00:04:49.980 --> 00:04:52.430 So we need sheets at seven. 00:04:52.670 --> 00:04:54.220 OK. 00:04:54.300 --> 00:05:02.150 And the condition that we are checking every time is is greater than zero. 00:05:02.430 --> 00:05:05.700 And every time I will go down down by one. 00:05:05.790 --> 00:05:10.200 OK so what it's like minus minus 1 right. 00:05:10.320 --> 00:05:11.240 Right. 00:05:11.880 --> 00:05:12.560 And it is working. 00:05:12.560 --> 00:05:17.090 So we've got seven square six square exit until one square. 00:05:17.340 --> 00:05:18.410 All right. 00:05:18.780 --> 00:05:22.300 So now let's go for another example this time let's use an array. 00:05:22.560 --> 00:05:24.800 So let's define an array. 00:05:25.350 --> 00:05:31.980 Let's go back to our shopping list array. 00:05:32.280 --> 00:05:39.430 So it's go for bread milk eggs. 00:05:40.520 --> 00:05:41.910 OK. 00:05:42.060 --> 00:05:52.620 So this time we would like to add to our paragraph the item values of the array following a line break 00:05:52.640 --> 00:05:53.120 . 00:05:53.610 --> 00:05:58.520 So all we're going to do is to be for. 00:05:59.760 --> 00:06:02.690 OK let's write the piece of code first. 00:06:02.730 --> 00:06:09.100 So we want to add. 00:06:09.270 --> 00:06:10.800 So I want to add 00:06:13.740 --> 00:06:25.780 a line break every time followed by the item body so we get a neat name of the array and the index. 00:06:26.580 --> 00:06:27.870 OK. 00:06:28.770 --> 00:06:33.950 So at the beginning it's going to be it is equal to zero. 00:06:35.040 --> 00:06:40.500 And the condition is going to be less than three. 00:06:40.650 --> 00:06:46.860 And usually we just use the length property of the array. 00:06:47.540 --> 00:06:48.650 OK. 00:06:49.410 --> 00:06:56.090 And every time I goes up by one. 00:06:57.170 --> 00:06:59.710 OK. 00:07:01.740 --> 00:07:03.480 And it works. 00:07:03.750 --> 00:07:05.230 All right. 00:07:06.450 --> 00:07:13.530 OK let's go for another example this time we were going to build another example where we change item 00:07:13.590 --> 00:07:14.910 values inside an array. 00:07:14.910 --> 00:07:18.090 So let's go for a an array of numbers. 00:07:18.470 --> 00:07:22.580 OK them the list. 00:07:23.220 --> 00:07:29.390 Let's go one two one two three. 00:07:29.410 --> 00:07:31.200 All right. 00:07:31.380 --> 00:07:35.980 And this time we want to increase each of these numbers by 10. 00:07:36.360 --> 00:07:39.930 OK so we're going to go for 00:07:43.650 --> 00:07:50.510 every time we would like to access the item value using the index. 00:07:50.700 --> 00:07:51.530 OK. 00:07:51.970 --> 00:07:58.600 And we're just going to add 10 to that item so to initiate. 00:07:58.860 --> 00:08:09.720 So we're going to initiate to zero and then he is less than the length of the array. 00:08:09.870 --> 00:08:13.560 And then finally oil is going up by one every time. 00:08:13.610 --> 00:08:14.250 Now let's 00:08:17.380 --> 00:08:24.120 after the for loop let's just odd the array to our barograph and see what the results are going to be 00:08:24.120 --> 00:08:24.480 so 00:08:25.470 --> 00:08:32.700 . 00:08:39.930 --> 00:08:40.730 Okay. 00:08:40.770 --> 00:08:44.250 In the library or library to make it more readable 00:08:46.850 --> 00:08:49.650 . 00:08:50.030 --> 00:08:50.590 Okay. 00:08:50.730 --> 00:08:54.230 And we can see that. 00:08:55.250 --> 00:08:58.370 Okay. 00:08:58.450 --> 00:08:59.570 Then it should work. 00:08:59.700 --> 00:09:00.390 Okay. 00:09:00.420 --> 00:09:05.650 Now we can see that's the all the elements all the items item values of the array. 00:09:05.820 --> 00:09:09.050 They are they have all increased by 10. 00:09:09.580 --> 00:09:09.800 Okay