WEBVTT

00:00:07.010 --> 00:00:11.890
In this video we're going to learn how to create functions and use them.

00:00:12.330 --> 00:00:18.300
So first of all what is a function function is a block of code.

00:00:18.420 --> 00:00:24.890
Basically we need functions to perform a specific task or operation.

00:00:25.470 --> 00:00:32.550
So rather than writing this block of code at many times in our javascript's code will just invoke the

00:00:32.550 --> 00:00:34.890
function whenever we need it.

00:00:34.980 --> 00:00:44.700
All right so let's create a new file and call its functions both D.M. only post the source code again

00:00:44.700 --> 00:00:50.850
from the previous file and change the title to functions

00:00:52.080 --> 00:00:56.820
.

00:00:57.880 --> 00:01:01.280
The the least the scripts contents transfer.

00:01:01.470 --> 00:01:03.280
Start from scratch again.

00:01:03.300 --> 00:01:12.780
All right so let's define our first function so to define a function we need to use function K and then

00:01:13.320 --> 00:01:14.350
a space.

00:01:14.400 --> 00:01:17.310
And we need a name for the function.

00:01:17.310 --> 00:01:28.480
Let's call our first function grating one basically right after the name we need parentheses.

00:01:28.580 --> 00:01:30.990
So in open brackets in a close brackets.

00:01:30.990 --> 00:01:39.150
And after that we're going to need an open curly brackets and a close curly brackets.

00:01:39.150 --> 00:01:40.440
All right.

00:01:40.440 --> 00:01:46.140
Some functions they will have some barometers between the parentheses but for now we're going to use

00:01:46.140 --> 00:01:49.230
a function without parameters OK.

00:01:49.410 --> 00:01:51.900
So we want what we want this function to do.

00:01:51.960 --> 00:01:55.470
We just want to include one statements.

00:01:55.860 --> 00:01:57.340
OK we want a simple function.

00:01:57.340 --> 00:02:02.560
So are we're just going to go window those alerts.

00:02:03.660 --> 00:02:07.180
Hello.

00:02:08.520 --> 00:02:11.150
All right.

00:02:12.000 --> 00:02:14.620
So this is the definition of the function.

00:02:14.640 --> 00:02:19.680
So now if you want to use the function we need to invoke this function and the ways we invoke the function

00:02:19.710 --> 00:02:23.000
is by using the name of the function.

00:02:23.420 --> 00:02:24.240
OK.

00:02:24.720 --> 00:02:31.410
And depending on whether the function is God's promises or not then inside the parenthesis we might

00:02:31.470 --> 00:02:33.760
need to get to the point I was in our case.

00:02:33.810 --> 00:02:35.390
There are no promises needed.

00:02:35.740 --> 00:02:43.470
OK so let's try this.

00:02:43.800 --> 00:02:47.160
OK so now we can see the alleged message saying hello.

00:02:47.190 --> 00:02:54.410
Which means does the function has been executed all right.

00:02:54.510 --> 00:02:55.440
Now let's try

00:02:58.950 --> 00:03:04.080
to use the name of the function alone without the parentheses and see what happens

00:03:04.080 --> 00:03:10.200
.

00:03:10.200 --> 00:03:12.840
OK we don't see anything.

00:03:12.840 --> 00:03:17.130
Now let's put this in an alert message

00:03:20.490 --> 00:03:23.130
and see what we get.

00:03:24.740 --> 00:03:25.690
OK.

00:03:25.710 --> 00:03:30.520
Basically what we're getting here is exactly the definition of the function.

00:03:30.540 --> 00:03:38.970
OK which means that if we use the name of the function only that means the objects of function only

00:03:38.990 --> 00:03:39.030
.

00:03:39.060 --> 00:03:44.640
And usually in an alert message it will just return exactly the definition does reporting what code

00:03:44.650 --> 00:03:45.010
.

00:03:45.340 --> 00:03:48.960
Ok so the right way if using a function is.

00:03:49.120 --> 00:03:51.180
OK so we added an extra semi-colon.

00:03:51.200 --> 00:03:55.220
But anyway would have cost the same.

00:03:55.380 --> 00:03:57.110
We get the same result.

00:03:57.180 --> 00:04:06.240
So do the function we need the name of the function and we need the parentheses later on we will see

00:04:06.450 --> 00:04:08.070
how to use the promises.

00:04:08.250 --> 00:04:10.510
If the function needs promises.

00:04:10.600 --> 00:04:14.340
OK so let's go for our second example.

00:04:14.340 --> 00:04:21.960
So can we define second function using function space.

00:04:21.960 --> 00:04:23.130
Name of the function.

00:04:23.560 --> 00:04:31.110
Let's call this one greasing to and this time the function is going to need a barometer which we will

00:04:31.110 --> 00:04:32.400
call first.

00:04:32.580 --> 00:04:33.120
First thing

00:04:37.560 --> 00:04:40.140
and what the function is going to be doing.

00:04:40.200 --> 00:04:43.340
It's going to send an alert message.

00:04:44.250 --> 00:04:45.800
OK.

00:04:45.820 --> 00:04:50.180
And in the last message we're going to use the promiser.

00:04:50.640 --> 00:04:52.460
OK.

00:04:53.460 --> 00:05:01.460
So you're going to say hello space and then we're going to need to use our apartments first name

00:05:04.740 --> 00:05:13.500
and we need an exclamation mark this.

00:05:14.680 --> 00:05:15.160
All right

00:05:20.780 --> 00:05:26.640
apparently we need to close brocades.

00:05:27.060 --> 00:05:27.780
All right.

00:05:28.130 --> 00:05:32.350
So this is the definition of the function no let's invoke the function.

00:05:32.420 --> 00:05:39.910
So we're going to need to use the name of the function and this time we do need a barometer.

00:05:40.230 --> 00:05:43.370
OK so we're going to need to use a parameter is a string.

00:05:43.380 --> 00:05:48.170
In our case let's use for instance John.

00:05:49.250 --> 00:05:56.670
OK let's Commines this line so that we don't invoke the first function and then we'll see what happens

00:05:56.660 --> 00:05:57.500
.

00:05:57.500 --> 00:06:02.870
So we just invoke the second function and it's shown in the last message which is exactly what we were

00:06:02.880 --> 00:06:06.110
expecting from this line of code.

00:06:06.120 --> 00:06:06.630
All right.

00:06:06.800 --> 00:06:14.460
So if we change John to any other name then the last message is going to change.

00:06:15.600 --> 00:06:16.990
OK.

00:06:18.260 --> 00:06:24.740
All right so now let's try something else.

00:06:24.960 --> 00:06:27.380
You know it's like a function.

00:06:27.380 --> 00:06:34.020
Let's define a function as will take as barometers a couple of numbers and we'll return some of these

00:06:34.010 --> 00:06:35.030
numbers.

00:06:35.660 --> 00:06:41.400
OK so function is it's sum.

00:06:41.450 --> 00:06:47.230
Let's give it two promises a and b.

00:06:47.820 --> 00:06:50.120
OK.

00:06:50.750 --> 00:06:54.930
So in this case we're going to need to use a return.

00:06:56.010 --> 00:06:56.720
OK.

00:06:56.900 --> 00:07:03.440
So the risk to me is does the function function outputs is going to be whatever we get it puts offset

00:07:03.440 --> 00:07:06.120
the return.

00:07:07.820 --> 00:07:08.100
OK

00:07:11.060 --> 00:07:28.520
so if we set a certain variable x to sum of 3 and 7 for instance since the function is returning a plus

00:07:28.520 --> 00:07:37.370
b which is going to be in our case 3 plus 7 which is 10 that means that the value of X is going to be

00:07:37.400 --> 00:07:38.060
10.

00:07:38.060 --> 00:07:49.210
Now let's verify that and use a win to alert X and see what we get let's just Commons does one control

00:07:49.270 --> 00:07:49.660
for us.

00:07:49.670 --> 00:07:52.880
Let's see.

00:07:52.880 --> 00:07:56.380
So basically we are guessing 10.

00:07:56.390 --> 00:07:58.340
All right.

00:07:58.340 --> 00:07:58.700
OK.

00:07:58.740 --> 00:08:01.460
Now let's go for another example.

00:08:01.460 --> 00:08:06.040
So this time we want a function that will take a couple of promises.

00:08:06.050 --> 00:08:09.850
So we want the function to take two strings.

00:08:10.880 --> 00:08:18.980
And these two strings we want them to be ID's of certain elements that we want the function to swap

00:08:19.400 --> 00:08:24.030
the contents of these two IDs of these two simple elements.

00:08:24.040 --> 00:08:31.020
All right so are you going to go.

00:08:31.040 --> 00:08:35.020
Function first they just commons these.

00:08:35.090 --> 00:08:35.680
No.

00:08:35.990 --> 00:08:36.830
OK.

00:08:36.870 --> 00:08:46.020
So let's name a swap and it's going to have two parameters.

00:08:46.010 --> 00:08:49.440
So first one is ID one then Id two

00:08:53.710 --> 00:08:55.230
then curly brackets.

00:08:55.280 --> 00:09:00.610
And now we can to define a variable.

00:09:01.380 --> 00:09:07.140
That's where we get to store the contents of the first elements.

00:09:07.460 --> 00:09:11.570
OK so we're going to call it a variable.

00:09:11.580 --> 00:09:12.690
Why.

00:09:13.380 --> 00:09:16.760
And inside why are we going to store

00:09:19.860 --> 00:09:27.440
the contents of the first elements which is the 7 the elements of the one Id idea on.

00:09:28.110 --> 00:09:31.160
So that's me accessing the end of a shemale.

00:09:31.640 --> 00:09:32.550
OK.

00:09:32.550 --> 00:09:39.760
And we just set the value of y to the end of a symbol of the elements of ID ID one.

00:09:40.070 --> 00:09:40.560
OK.

00:09:40.760 --> 00:09:49.770
And we're going to do the same thing with the variable Zed which we will set to the end of a symbol

00:09:49.760 --> 00:09:53.310
of all of the elements of ID ID too.

00:09:53.880 --> 00:10:02.360
OK and now we get to sets the in a shemale of ID 2 to y.

00:10:03.200 --> 00:10:20.120
DNA symbol of ID 1 to is it OK because it was my ID ID to so this time in Ishmail is going to be set

00:10:21.870 --> 00:10:22.290
to

00:10:25.670 --> 00:10:30.620
Y and you can just duplicate those using control.

00:10:30.620 --> 00:10:36.750
The change is to set these two ID.

00:10:37.570 --> 00:10:41.410
OK OK.

00:10:41.690 --> 00:10:46.230
So now if we go to the couple of buses that we have here.

00:10:46.630 --> 00:10:56.140
So lets say that you want this button to when we click on it we want to change or swap the contents

00:10:56.150 --> 00:10:57.800
of Facebook and Apple

00:11:04.720 --> 00:11:15.180
and the second button we want to change or swap the content of Apple and Microsoft.

00:11:20.300 --> 00:11:26.580
OK so we're going to need to say the only attributes

00:11:28.610 --> 00:11:30.760
.

00:11:31.760 --> 00:11:35.810
So we're going to invoke the function here so we can use the name of the function.

00:11:35.820 --> 00:11:40.980
So swep and the function needs a couple of promises.

00:11:40.970 --> 00:11:43.410
The first idea and the second idea.

00:11:43.400 --> 00:11:55.450
So first idea is Facebook that he says Drink second I.D. is also a string so Facebook and Apple were

00:11:55.460 --> 00:12:01.590
going to need to give Microsoft's an idea as well.

00:12:03.940 --> 00:12:09.740
And same thing this person needs a one click attributes

00:12:13.780 --> 00:12:19.040
to invoke the function swap again.

00:12:19.160 --> 00:12:28.090
Couple of promises that this time was going to be Apple and Microsoft.

00:12:30.150 --> 00:12:31.450
All right.

00:12:32.570 --> 00:12:34.820
Let's try.

00:12:36.080 --> 00:12:36.870
It's not working.

00:12:36.870 --> 00:12:39.660
Something went wrong.

00:12:39.680 --> 00:12:44.230
The reason is because.

00:12:47.300 --> 00:12:54.630
OK so let's look at our console and see what went wrong.

00:12:54.630 --> 00:12:58.410
OK so basically we've got an era in line 62.

00:12:58.620 --> 00:13:04.850
And if we look at the function curly brackets we close to Brucie's here we suppose it closes at the

00:13:04.860 --> 00:13:08.700
end of the block of code which is supposed to be there.

00:13:08.790 --> 00:13:15.830
So it is try again and refresh the page and know if we try we can see that the first one is working

00:13:15.860 --> 00:13:16.050
.

00:13:16.180 --> 00:13:19.260
So you can see that's the Facebook Devante Apple.

00:13:19.290 --> 00:13:22.610
If this were up there their content also is Troy.

00:13:22.670 --> 00:13:23.510
Second one.

00:13:23.720 --> 00:13:26.930
So it is working as well.

00:13:26.930 --> 00:13:28.420
All right.

00:13:29.140 --> 00:13:38.510
So we can see how powerful functions can be so they will avoid us a lot of efforts and time as well

00:13:38.510 --> 00:13:38.690
.

00:13:38.750 --> 00:13:39.140
So.

00:13:39.230 --> 00:13:40.550
All right.

00:13:41.120 --> 00:13:44.010
In the next video we're going to move to objects