WEBVTT 0 00:00.240 --> 00:06.450 Now what about methods? Let's say that our bellboy is able to do something called moveSsuitcase. 1 00:06.450 --> 00:11.370 Now, I've kind of simplified it here, but it's effectively, he creates an alert saying "May I take your 2 00:11.370 --> 00:11.990 suitcase?", 3 00:12.030 --> 00:15.630 and then he picks up the suitcase and then he moves with the suitcase. 4 00:15.630 --> 00:21.690 Now this is a function because at the moment it's not attached to an object but in our previous syntax 5 00:21.990 --> 00:29.850 if we wanted our object to also have an associated function, then all we have to do is provide the name 6 00:30.180 --> 00:33.250 of the function as a new parameter, 7 00:33.390 --> 00:38.460 and then colon, and then after the colon we just put in the anonymous function. 8 00:38.550 --> 00:46.980 And now our bellBoy1 has a method, which remember is just a function that's associated with an object. 9 00:46.980 --> 00:52.890 And if we had a suitcase in the lobby then we can simply call the method and say bellBoy1.moveSuitcase(), 10 00:52.890 --> 00:56.010 and perform that method. 11 00:56.250 --> 01:02.970 So remember that when we're using the properties or calling a method we're always using the dot notation. 12 01:03.300 --> 01:08.470 And the only difference that you see between the method and the property are those parentheses, 13 01:08.520 --> 01:09.990 so keep an eye out for those. 14 01:09.990 --> 01:15.510 Now if we wanted to incorporate this method into our constructor function then all we have to write 15 01:15.540 --> 01:16.260 is 16 01:16.320 --> 01:21.710 this.moveSuitcase is equal to a function that does these and these things. 17 01:21.750 --> 01:27.750 And now when we create any object using this constructor function, then all of those objects will have 18 01:27.750 --> 01:31.640 that function of moveSuitcase, and they'll all be able to do that. 19 01:31.770 --> 01:37.240 So as a challenge I want you to add a method to our HouseKeeper constructor function, 20 01:37.320 --> 01:43.290 and this method is just called clean, so that we can get the housekeeper to perform the clean function. 21 01:43.620 --> 01:49.320 And we're going to do it in a simplified way so that our method of what it does is sends an alert that 22 01:49.320 --> 01:51.630 says "Cleaning in progress". 23 01:51.660 --> 01:54.240 So add that to the constructor function, 24 01:54.240 --> 02:01.200 create a new housekeeper from that constructor function, and call the cleaning method associated with 25 02:01.200 --> 02:02.340 that new object. 26 02:02.340 --> 02:05.750 So pause the video now and see if you can complete this challenge. 27 02:07.480 --> 02:07.770 All right. 28 02:07.780 --> 02:14.470 So as we said before to create a new method or a new property, we first have to start with this.the name 29 02:14.470 --> 02:15.880 of the property or method. 30 02:15.910 --> 02:22.990 So our method is called clean and it's not equal to just any value but it's equal to a function and 31 02:22.990 --> 02:29.550 this function, as we said before, has to send an alert that says "Cleaning in progress". 32 02:29.560 --> 02:35.680 So now that we've got our method associated with our HouseKeeper constructor function, then we need to 33 02:35.680 --> 02:38.270 create new objects that have this method. 34 02:38.410 --> 02:45.370 So let's go ahead and again empty cache and hard reload, and let's run our new code, and then let's create 35 02:45.400 --> 02:54.520 a new object called houseKeeper1, which is equal to a new HouseKeeper, which has 12 years experience, 36 02:54.530 --> 03:00.790 he's called James, and he's only qualified to clean bedrooms. 37 03:01.000 --> 03:06.960 All right. So now let's hit enter and create our new object called houseKeeper1. 38 03:07.080 --> 03:11.390 Now houseKeeper1 now comes equipped with this method called clean. 39 03:11.560 --> 03:16.120 So we can simply say houseKeeper1.clean. 40 03:16.120 --> 03:22.030 And if we hit enter you can see that we get an alert that says "Cleaning in progress". Pretty good, right? 41 03:22.420 --> 03:29.530 Now at this point you might be getting a little bit of deja vu because it's looking pretty similar to 42 03:29.530 --> 03:31.570 something that we've written before. 43 03:31.630 --> 03:40.330 It looks almost exactly the same as these lines of code that we used to create a new audio 44 03:40.510 --> 03:45.860 and to play the audio, because we created a new variable that was called tom1, 45 03:46.120 --> 03:51.980 and it's a new audio object that is linked to this particular sound file, 46 03:52.330 --> 03:57.670 and then later on we used that object's method called play to play that sound. 47 03:57.670 --> 04:03.970 So even though we can't see the source code of this constructor function, but we could guess what it 48 04:03.970 --> 04:05.170 might look like. 49 04:05.200 --> 04:09.970 So the constructor function for this audio object might look something like this. 50 04:10.270 --> 04:14.980 So, as with all constructor functions, you start off with the keyword function and then you have the 51 04:14.980 --> 04:21.850 name of the object that it's going to construct with the first letter capitalized and then in between 52 04:21.850 --> 04:24.050 some parentheses we have some inputs. 53 04:24.130 --> 04:28.610 And in this case it's going to be the location of the file for that audio. 54 04:28.720 --> 04:35.170 So now our constructor makes a new property called file location which is set equal to the location 55 04:35.380 --> 04:39.770 that was given when this new audio object gets created. 56 04:39.940 --> 04:45.690 And then this constructor function also has an associated method called play, 57 04:46.060 --> 04:47.920 and this play function does a number of things, 58 04:47.920 --> 04:51.290 for example it might tap into the audio hardware of the computer, 59 04:51.340 --> 04:55.700 it might check whether the file at the file location specified exists, 60 04:55.750 --> 05:01.810 it might check that the file is actually a sound file, and then it might try and play that file at that 61 05:01.810 --> 05:02.780 location. 62 05:02.850 --> 05:10.780 And all we had to do was to use that constructor Audio to create a new audio object specifying the 63 05:10.780 --> 05:12.770 location of our audio file, 64 05:12.820 --> 05:19.690 then we simply called the method that was associated with that new audio object and got it to play that 65 05:19.690 --> 05:20.440 sound. 66 05:20.440 --> 05:26.260 Now a lot of the code that you'll be writing in Javascript involves using these properties and methods 67 05:26.500 --> 05:32.290 associated with the objects on your web site, and occasionally you also need to create your own objects 68 05:32.560 --> 05:35.530 in order to get some custom behavior on your web site. 69 05:35.530 --> 05:39.580 Now hopefully this lesson has helped you to understand what we've been writing 70 05:39.580 --> 05:46.000 when we created our audio objects and when we called our methods or when we used our properties in our 71 05:46.000 --> 05:53.020 drumkit web site. Now a lot of these concepts are quite abstract and it might take a little bit of repetition 72 05:53.290 --> 05:57.490 and coming back to it a few times in order for it to start making more sense. 73 05:57.490 --> 06:04.300 But as with all things programming as we get more practice using a lot of these concepts over time it 74 06:04.300 --> 06:09.320 will become more and more familiar to you and the puzzle pieces will start coming together. 75 06:09.490 --> 06:13.990 So don't worry if some of this stuff is going over your head. We're going to be revisiting this in the 76 06:13.990 --> 06:14.710 future 77 06:14.920 --> 06:20.490 as we keep building more and more web sites. But this is a great place to just sow the seeds about objects 78 06:20.500 --> 06:26.350 in Javascript, and hopefully you'll revisit this lesson a few more times and eventually getting really 79 06:26.350 --> 06:28.480 comfortable with this concept.