1 00:00:02,130 --> 00:00:07,440 Now for this module, again let's work with a simple program and for this attached you find that starting 2 00:00:07,440 --> 00:00:14,010 code, a zip file with the index.html file and an app.js file. The index.html file is relatively lean, 3 00:00:14,020 --> 00:00:16,020 we got a button in there and that's it, 4 00:00:16,020 --> 00:00:21,480 we got the script import in here. As you can tell by the title, we're going to build our rock paper scissors 5 00:00:21,480 --> 00:00:22,020 game here, 6 00:00:22,020 --> 00:00:23,380 very basic game, 7 00:00:23,460 --> 00:00:28,200 most of the interaction will happen with the help of alerts and prompts and in the console 8 00:00:28,200 --> 00:00:33,360 but we do have that button to start the game and in the app.js file which is getting imported here, 9 00:00:33,450 --> 00:00:39,480 we basically got an empty file, the only thing I added for you is this access to the button which allows 10 00:00:39,480 --> 00:00:41,350 us to add an event listener. 11 00:00:41,490 --> 00:00:46,620 Now speaking of that, we can of course add a function, maybe name it start game, as you learned it with 12 00:00:46,620 --> 00:00:49,790 the function keyword, then the name, the list of parameters, 13 00:00:49,830 --> 00:00:51,090 here I don't need any 14 00:00:51,180 --> 00:00:56,660 and then the function body where you can put your code and then you can call that function like this 15 00:00:56,670 --> 00:01:04,840 and what this would do of course is that if we output game is starting here, just like that and we save 16 00:01:04,840 --> 00:01:11,200 that and we then reload this page, load this page, visits the index.html file, we essentially see the game 17 00:01:11,200 --> 00:01:13,360 is starting output here in the console, 18 00:01:13,360 --> 00:01:18,430 clicking the button here doesn't do anything because we didn't connect this function to the button, 19 00:01:18,460 --> 00:01:19,970 we just execute it like this, 20 00:01:19,990 --> 00:01:23,140 this would be this so-called direct execution which I meant. 21 00:01:23,650 --> 00:01:30,640 Now on the other hand, you can also go to the start game button and add an event listener, click listener 22 00:01:30,640 --> 00:01:34,880 here and point at the start game function, 23 00:01:34,880 --> 00:01:36,850 then you don't add parentheses here, 24 00:01:36,860 --> 00:01:42,280 instead you just give the add event listener function here the name of the function and behind the scenes, 25 00:01:42,280 --> 00:01:48,110 that will do the wire up work and make sure that this function gets called when a click occurs. 26 00:01:48,120 --> 00:01:55,880 Now if we do that, then we actually see there is no output right now but if I click the button, there 27 00:01:55,880 --> 00:01:59,510 it is, this is this indirect execution. 28 00:01:59,510 --> 00:02:05,480 Now the first important thing which I want to highlight here or which I want to dive in is this add 29 00:02:05,480 --> 00:02:07,040 event listener function actually. 30 00:02:07,070 --> 00:02:08,810 This is not a function defined by us, 31 00:02:08,810 --> 00:02:14,110 instead it's in the end provided by the browser but we don't call it like this, 32 00:02:14,120 --> 00:02:20,840 instead we call it on this start game button, which seems to be an object because we use this dot notation. 33 00:02:20,960 --> 00:02:27,710 Now you learned that objects can have properties, you can have something like a person object with a 34 00:02:27,710 --> 00:02:34,840 name property like this and then you can always access person.name to for example output that, right? 35 00:02:34,850 --> 00:02:37,540 So that's a syntax you learned, this is something we know. 36 00:02:37,920 --> 00:02:39,720 Now here we also use the dot notation 37 00:02:39,740 --> 00:02:45,890 but what we then do is we don't access a property, we're not logging it or doing some calculation with 38 00:02:45,890 --> 00:02:46,230 it, 39 00:02:46,250 --> 00:02:55,980 instead we execute it as a function and indeed, functions can be stored inside of objects as well. If 40 00:02:55,980 --> 00:03:03,700 we add our person here and I add a greet property, let's say like a normal property, 41 00:03:03,700 --> 00:03:05,410 thus far nothing special, 42 00:03:05,500 --> 00:03:10,560 then instead of just having a value here on the right, something like Max or a number or even another 43 00:03:10,570 --> 00:03:13,350 object, you can also put a function here, 44 00:03:14,370 --> 00:03:16,580 for example a function greet 45 00:03:16,770 --> 00:03:23,630 and there we could say hello there, this would be a basic function stored in an object. 46 00:03:23,630 --> 00:03:28,420 Now the only special thing here really is that on the right side of our key-value pairs, 47 00:03:28,430 --> 00:03:35,210 so after our colon, we don't have a value which we used thus far to store it in a variable 48 00:03:35,300 --> 00:03:40,820 but instead here we have a function. Now that's of course a different use of function because thus far, 49 00:03:40,820 --> 00:03:42,860 we always created a function standalone, 50 00:03:42,890 --> 00:03:44,720 we're not storing this function anywhere, 51 00:03:44,720 --> 00:03:50,690 we just create it like this and this automatically creates this start game thing which Javascript 52 00:03:50,690 --> 00:03:54,140 registers which we then later can use by its name. Here, 53 00:03:54,170 --> 00:03:57,350 I also do that but then this seems to be stored in here 54 00:03:57,860 --> 00:04:05,180 and indeed if we now execute person.greet and we add parentheses here, we can execute this as a normal 55 00:04:05,180 --> 00:04:06,020 function. 56 00:04:06,110 --> 00:04:10,010 If I save that and reload this page, we see hello there, 57 00:04:10,010 --> 00:04:17,300 so indeed we can store a function in an object and that is then called a method, it's just a term for it, just 58 00:04:17,330 --> 00:04:24,950 as we named a variable in an object, like name, just as we name this a property even though in the end 59 00:04:24,950 --> 00:04:28,530 it's a bit like storing a value in a variable, just without an equal sign 60 00:04:28,610 --> 00:04:30,680 but that's then called a property. 61 00:04:30,680 --> 00:04:36,890 Well if you store a function in such a property, so in a key, in an object, then you call it a method but 62 00:04:36,890 --> 00:04:39,860 a method is nothing else than a function attached to an object 63 00:04:39,860 --> 00:04:46,250 you could say and add event listener therefore is a method on this start game button object 64 00:04:46,250 --> 00:04:51,630 and this is an object generated for us by Javascript by calling this method up here, 65 00:04:51,630 --> 00:04:57,350 the getElementByID method which exists on this document thing. The document thing here by the way 66 00:04:57,530 --> 00:05:02,810 is a globally available variable in the end which gives us access to our HTML document but more on that 67 00:05:02,810 --> 00:05:07,180 in a separate module where we dive into how we can interact with the HTML code, 68 00:05:07,220 --> 00:05:12,500 that's not the focus of this module but this in the end is a method which in the end generates or gives 69 00:05:12,500 --> 00:05:15,440 us this object which we store in start game button, 70 00:05:15,440 --> 00:05:21,200 so an object which represents this button so to say and this in turn then has this add event listener 71 00:05:21,260 --> 00:05:25,460 method which we can call to register an event listener. 72 00:05:25,460 --> 00:05:28,840 So storing functions in objects is possible, 73 00:05:28,910 --> 00:05:34,190 you call them like this and they're then basically methods, you call them methods if they're stored in 74 00:05:34,190 --> 00:05:35,450 objects. 75 00:05:35,450 --> 00:05:37,040 So that's a first important thing, 76 00:05:37,040 --> 00:05:41,060 I'll comment this out now because we don't need it for the game but I wanted to mention it that you 77 00:05:41,060 --> 00:05:44,060 can have functions and objects and they're then called methods.