Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,330 --> 00:00:03,570
One operator that I dint mention
2
00:00:03,570 --> 00:00:04,880
in the last lecture,
3
00:00:04,880 --> 00:00:07,260
is the Remainder Operator.
4
00:00:07,260 --> 00:00:10,444
And the reason for that is that the remainder operator,
5
00:00:10,444 --> 00:00:13,610
has actually some special use cases,
6
00:00:13,610 --> 00:00:16,783
and so it deserves a lecture on its own.
7
00:00:18,740 --> 00:00:22,520
So what is the remainder operator?
8
00:00:22,520 --> 00:00:25,520
Well, as the name says, the remainder operator,
9
00:00:25,520 --> 00:00:29,770
simply returns the remainder of a division.
10
00:00:29,770 --> 00:00:31,213
So lets check that out,
11
00:00:32,330 --> 00:00:35,240
so the remainder operator is this one.
12
00:00:35,240 --> 00:00:36,883
So the percentage sign,
13
00:00:38,140 --> 00:00:41,393
and so lets check what five remainder two is,
14
00:00:42,450 --> 00:00:43,723
and it is one.
15
00:00:44,900 --> 00:00:46,193
So why is that?
16
00:00:47,400 --> 00:00:50,283
Lets say we divide five by two,
17
00:00:51,530 --> 00:00:53,583
and so then we get two point five.
18
00:00:54,450 --> 00:00:57,240
But if we took only the integer part,
19
00:00:57,240 --> 00:01:01,560
so only two then the result will be two.
20
00:01:01,560 --> 00:01:02,670
Okay?
21
00:01:02,670 --> 00:01:06,400
So if we did the division only until the integer part,
22
00:01:06,400 --> 00:01:08,560
then that result will be two,
23
00:01:08,560 --> 00:01:10,800
because two times two is four,
24
00:01:10,800 --> 00:01:13,520
but then there will be the remainder of one.
25
00:01:13,520 --> 00:01:14,460
Right?
26
00:01:14,460 --> 00:01:17,053
Because five minus four is one.
27
00:01:19,000 --> 00:01:24,000
So we can say that five is two times two plus one.
28
00:01:26,340 --> 00:01:27,173
Alright?
29
00:01:27,173 --> 00:01:28,910
And so this here is the remainder,
30
00:01:28,910 --> 00:01:32,633
and therefore five remainder two is one.
31
00:01:33,670 --> 00:01:35,053
Lets try another one,
32
00:01:36,800 --> 00:01:41,800
lets say eight remainder two or three actually,
33
00:01:44,190 --> 00:01:45,983
and so now the remainder is two.
34
00:01:48,890 --> 00:01:50,120
Okay?
35
00:01:50,120 --> 00:01:54,000
And if we did eight dived by three,
36
00:01:54,000 --> 00:01:56,830 line:15%
then we would get this number here.
37
00:01:56,830 --> 00:02:00,030 line:15%
But again if we only took the integer part,
38
00:02:00,030 --> 00:02:03,570
so two, then we would only end up with six.
39
00:02:03,570 --> 00:02:08,570
So two times three is six, so lets write that.
40
00:02:08,740 --> 00:02:12,223
eight is two times three,
41
00:02:13,390 --> 00:02:16,393
so this three here times two,
42
00:02:18,950 --> 00:02:21,890
plus the remainder which is two.
43
00:02:21,890 --> 00:02:24,110
So six plus two is eight,
44
00:02:24,110 --> 00:02:26,830 line:15%
and so two is the remainder and therefore,
45
00:02:26,830 --> 00:02:28,780 line:15%
that's the result that we get here
46
00:02:28,780 --> 00:02:31,300 line:15%
from the remainder operation.
47
00:02:31,300 --> 00:02:32,840
Alright?
48
00:02:32,840 --> 00:02:36,490
So maybe you are not yet familiar with this concept,
49
00:02:36,490 --> 00:02:38,960
and so I hope that it made sense.
50
00:02:38,960 --> 00:02:42,370
Now, one thing that is many times used for in programming,
51
00:02:42,370 --> 00:02:46,890
is to check whether a certain number is even or odd.
52
00:02:46,890 --> 00:02:51,600
So, even numbers are zero, two, four, six, eight, ten
53
00:02:51,600 --> 00:02:53,620
and so on and so forth.
54
00:02:53,620 --> 00:02:56,640
And the odd numbers are all the others.
55
00:02:56,640 --> 00:03:00,000
So, one, three, five, seven, etcetera.
56
00:03:00,000 --> 00:03:02,800
So, when is a number even?
57
00:03:02,800 --> 00:03:06,850
Well, its even if its divisible by two.
58
00:03:06,850 --> 00:03:10,200
And divisible by two means that if we divide it by two,
59
00:03:10,200 --> 00:03:11,693
the remainder is zero.
60
00:03:12,800 --> 00:03:14,410
So lets check that,
61
00:03:14,410 --> 00:03:17,190
so six is an even number.
62
00:03:17,190 --> 00:03:18,220
Right?
63
00:03:18,220 --> 00:03:23,220 line:15%
And so, the remainder of dividing it by two is zero.
64
00:03:23,570 --> 00:03:27,791
And that's because, a dividing six by two,
65
00:03:27,791 --> 00:03:32,160 line:15%
is an integer number, so its exactly three.
66
00:03:32,160 --> 00:03:37,157
So three times two, so this two here gives then six,
67
00:03:38,430 --> 00:03:39,280
Alright?
68
00:03:39,280 --> 00:03:44,253
But on the other hand, an even number is for example seven.
69
00:03:47,370 --> 00:03:48,203
Alright?
70
00:03:49,050 --> 00:03:52,600 line:15%
And so here we have the remainder as one,
71
00:03:52,600 --> 00:03:56,600 line:15%
and that's because three times two is six,
72
00:03:56,600 --> 00:04:01,040 line:15%
and then plus one which is the remainder is seven again.
73
00:04:01,040 --> 00:04:04,933
And so just like five, which is also an odd number.
74
00:04:06,292 --> 00:04:07,125
Okey?
75
00:04:07,125 --> 00:04:09,530
And so now we, can use that knowledge to check
76
00:04:09,530 --> 00:04:12,213
whether a certain number is even or not.
77
00:04:14,060 --> 00:04:15,463
So lets create a function,
78
00:04:17,175 --> 00:04:21,425
isEven and a simple arrow function is perfect here,
79
00:04:24,890 --> 00:04:29,890
so if the reminder of n with two is equal zero,
80
00:04:31,612 --> 00:04:34,900
well then of course, this will return true.
81
00:04:34,900 --> 00:04:37,470
And otherwise its gonna return false,
82
00:04:37,470 --> 00:04:40,960
so when its one, then the result of this function
83
00:04:40,960 --> 00:04:42,203
will be false.
84
00:04:43,110 --> 00:04:47,190
So, lets use this, isEven, lets try with eight,
85
00:04:50,850 --> 00:04:55,773
23 and maybe well, something else, it doesn't really matter,
86
00:04:56,720 --> 00:05:01,720 line:15%
and so intuitively, we know that eight is an even number
87
00:05:01,720 --> 00:05:03,310 line:15%
and so we get true.
88
00:05:03,310 --> 00:05:06,720
This one is an odd number, and an even number,
89
00:05:06,720 --> 00:05:09,640
and therefore we get the correct results.
90
00:05:09,640 --> 00:05:11,300
Okay?
91
00:05:11,300 --> 00:05:15,490
And so of course, this works to check if any number
92
00:05:15,490 --> 00:05:18,350
is divisible by any other number.
93
00:05:18,350 --> 00:05:19,183
Alright?
94
00:05:19,183 --> 00:05:22,670
And whenever the results of the remainder operator is zero,
95
00:05:22,670 --> 00:05:25,580
then that means that the first number is completely
96
00:05:25,580 --> 00:05:27,910
divisible by the second one.
97
00:05:27,910 --> 00:05:30,230
And again, this is sometimes very important
98
00:05:30,230 --> 00:05:32,730
to know in programming.
99
00:05:32,730 --> 00:05:34,540
So lets see another example here,
100
00:05:34,540 --> 00:05:36,810
involving our application,
101
00:05:36,810 --> 00:05:41,380
not really in practical terms, but just to have some fun.
102
00:05:41,380 --> 00:05:44,923
So lets select all of the rows of our movements.
103
00:05:46,100 --> 00:05:49,363
So, yeah lets check the hdml here,
104
00:05:53,990 --> 00:05:57,340
so each of the movements is this row,
105
00:05:57,340 --> 00:05:59,910
so this element with this class,
106
00:05:59,910 --> 00:06:02,220
and so lets select all of them,
107
00:06:02,220 --> 00:06:05,290
and then we will paint them a little bit
108
00:06:05,290 --> 00:06:07,173
based on some conditions.
109
00:06:08,700 --> 00:06:10,943 line:15%
So lets select all of this elements,
110
00:06:12,070 --> 00:06:17,070
so all, so that's that, and then this class name,
111
00:06:19,010 --> 00:06:22,200
and so this here will return a note list,
112
00:06:22,200 --> 00:06:25,440
and so lets convert it to a real array,
113
00:06:25,440 --> 00:06:28,500
and for that this time am gonna use the spread operator,
114
00:06:28,500 --> 00:06:30,880
so I will spread all of these elements,
115
00:06:30,880 --> 00:06:35,260
into this newly created array, and then on that array,
116
00:06:35,260 --> 00:06:37,383 line:15%
I can immediately call for each,
117
00:06:39,120 --> 00:06:41,570 line:15%
and so lets specify a call back function,
118
00:06:41,570 --> 00:06:43,390 line:15%
with the current element,
119
00:06:43,390 --> 00:06:46,573 line:15%
which is the current row, and the current index.
120
00:06:47,710 --> 00:06:48,580 line:15%
Alright?
121
00:06:48,580 --> 00:06:50,750
And now lets say that I wanted to color
122
00:06:50,750 --> 00:06:53,820
every second row of the movements.
123
00:06:53,820 --> 00:06:58,330 line:15%
So all i have to do, is to check if the code index
124
00:06:58,330 --> 00:06:59,873 line:15%
is divisible by two.
125
00:07:01,110 --> 00:07:03,760 line:15%
So I, which will start at zero,
126
00:07:03,760 --> 00:07:06,120 line:15%
then its gonna be one, two, three, four,
127
00:07:06,120 --> 00:07:08,330 line:15%
and so on and so forth.
128
00:07:08,330 --> 00:07:11,240 line:15%
So if I want to color every second row,
129
00:07:11,240 --> 00:07:14,710 line:15%
then if I do this, then every second number
130
00:07:14,710 --> 00:07:16,560 line:15%
will be divisible by two,
131
00:07:16,560 --> 00:07:19,293 line:15%
and every other second number will not.
132
00:07:20,770 --> 00:07:24,230 line:15%
So I can just check if its zero, and if it is,
133
00:07:24,230 --> 00:07:26,223 line:15%
then I take the current row,
134
00:07:27,910 --> 00:07:32,910 line:15%
take this style and change the background color,
135
00:07:33,090 --> 00:07:36,713 line:15%
and remember that we have to use camel case notation here,
136
00:07:37,700 --> 00:07:41,133 line:15%
and lets change it to orange red.
137
00:07:42,490 --> 00:07:46,443 line:15%
So just to make it a little bit fun, okey?
138
00:07:53,820 --> 00:07:55,763 line:15%
And actually just like before,
139
00:07:56,920 --> 00:08:00,783 line:15%
this here has to happen inside of a handler,
140
00:08:01,890 --> 00:08:04,100 line:15%
so an event handler function,
141
00:08:04,100 --> 00:08:08,510 line:15%
because this code here, will execute right when we start
142
00:08:08,510 --> 00:08:09,730 line:15%
our application,
143
00:08:09,730 --> 00:08:11,090 line:15%
but then as we log in,
144
00:08:11,090 --> 00:08:14,953 line:15%
we override that with the deposits of the current user.
145
00:08:16,260 --> 00:08:19,693
And so, lets again do that as we click here on this balance,
146
00:08:21,150 --> 00:08:24,053 line:15%
just so that we have like any reference point.
147
00:08:34,174 --> 00:08:35,007 line:15%
Okey?
148
00:08:36,640 --> 00:08:38,203
And now lets try this again.
149
00:08:43,150 --> 00:08:43,983
Alright?
150
00:08:43,983 --> 00:08:48,600
And now as I click this label, well like magic,
151
00:08:48,600 --> 00:08:52,703
every second row is now painted in orange red.
152
00:08:54,390 --> 00:08:56,363
So beautiful, right?
153
00:08:57,230 --> 00:09:00,793
Well not really, but at least we know that our code worked.
154
00:09:01,710 --> 00:09:02,680
Alright?
155
00:09:02,680 --> 00:09:04,320 line:15%
Lets do another one,
156
00:09:04,320 --> 00:09:08,390 line:15%
so now lets say that I want to paint every third row,
157
00:09:08,390 --> 00:09:10,860 line:15%
also in even another color.
158
00:09:10,860 --> 00:09:15,860 line:15%
And so I do, the remainder of three,
159
00:09:18,600 --> 00:09:21,040 line:15%
And each time is equal to zero,
160
00:09:21,040 --> 00:09:26,040 line:15%
then I do set this back ground color to blue.
161
00:09:28,320 --> 00:09:29,340 line:15%
Alright?
162
00:09:29,340 --> 00:09:34,340 line:15%
And so this here will be at zero, three, six, nine
163
00:09:35,450 --> 00:09:37,460 line:15%
and so on and so forth,
164
00:09:37,460 --> 00:09:40,530 line:15%
while this one here is gonna be, as we already saw
165
00:09:40,530 --> 00:09:45,530 line:15%
at zero, two, four, six, and so on.
166
00:09:46,310 --> 00:09:48,963 line:15%
And you see that there's gonna be some overlap here,
167
00:09:49,980 --> 00:09:52,270 line:15%
but that's not a problem.
168
00:09:52,270 --> 00:09:56,390 line:15%
Here we are missing the r, give it a save,
169
00:09:56,390 --> 00:09:57,933
and just try it one more time.
170
00:09:59,010 --> 00:10:01,010
So this is just for fun of course,
171
00:10:01,010 --> 00:10:03,583
but there could be real applications to this.
172
00:10:04,890 --> 00:10:06,860
So you see that now every third row,
173
00:10:06,860 --> 00:10:08,973
is indeed blue.
174
00:10:09,940 --> 00:10:12,060
So really nice looking,
175
00:10:12,060 --> 00:10:14,453
a fact that we just created here.
176
00:10:16,400 --> 00:10:18,400 line:15%
But yeah, and just to illustrate really,
177
00:10:18,400 --> 00:10:20,530 line:15%
how the remainder works.
178
00:10:20,530 --> 00:10:24,780 line:15%
So whenever you need to do something every Nth time
179
00:10:24,780 --> 00:10:28,320 line:15%
so to say, so every, I mean this,
180
00:10:28,320 --> 00:10:31,210 line:15%
every Nth time, then it is a good idea
181
00:10:31,210 --> 00:10:34,010 line:15%
to use the remainder operator for that.
182
00:10:34,010 --> 00:10:37,566 line:15%
So here for example, every second time, every third time,
183
00:10:37,566 --> 00:10:41,523 line:15%
but of course this might then depend on your specific need,
184
00:10:42,460 --> 00:10:43,873 line:15%
maybe in you application.
185
00:10:44,800 --> 00:10:47,890 line:15%
So this how we use the remainder operator,
186
00:10:47,890 --> 00:10:50,850 line:15%
yet another one in your tool box now,
187
00:10:50,850 --> 00:10:53,893
and with that lets go straight to the next video.
13966
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.