1 00:00:00,150 --> 00:00:05,910 Are you ready for the exciting stuff and I know the earlier lesson was Temel and success, now we get 2 00:00:05,910 --> 00:00:10,560 to get into the JavaScript because we've got our basic structure set up. 3 00:00:10,800 --> 00:00:16,260 The first thing that I usually like to do is select my elements and add them in as objects within my 4 00:00:16,260 --> 00:00:21,510 JavaScript, which makes it a whole lot easier for me to select them and make use of them. 5 00:00:21,780 --> 00:00:25,100 So I'm using query selector, I use query selector quite a bit. 6 00:00:25,380 --> 00:00:27,440 We can also use different ones. 7 00:00:27,450 --> 00:00:31,950 So we've got a button which is element there so we can use. 8 00:00:32,880 --> 00:00:40,590 If we have ID, we can get element by ID, we can also get elements by tag name, get elements by name, 9 00:00:40,860 --> 00:00:42,480 get elements by class name. 10 00:00:42,630 --> 00:00:48,180 But really at the end of the day, the query selector is the easiest one to use because this one is 11 00:00:48,180 --> 00:00:51,260 going to be consistent with the way that we select CSFs. 12 00:00:51,270 --> 00:00:54,120 They're using const setting up another one. 13 00:00:54,130 --> 00:00:56,150 So we've got our player one area. 14 00:00:56,340 --> 00:00:58,530 So this is where the gameplay for player one is. 15 00:00:59,070 --> 00:01:02,120 And again, query selector a quick and easy way. 16 00:01:02,130 --> 00:01:07,230 It's going to give us a quick and easy way to access that element information and what query selector 17 00:01:07,230 --> 00:01:12,590 all will do is query selector all gives you the option to select more than one element. 18 00:01:12,900 --> 00:01:18,900 So typically if you're using class or different tags and you've got more than one on the page, whereas 19 00:01:18,900 --> 00:01:23,190 I've got a really simple application, so I don't have a whole lot happening within my HTML. 20 00:01:23,640 --> 00:01:30,270 So now that we've selected all the elements into usable format in our JavaScript, the next step is 21 00:01:30,270 --> 00:01:32,340 to make our button clickable. 22 00:01:32,640 --> 00:01:38,160 So now we have a nice button here, but it doesn't do anything when we click it so we can use JavaScript 23 00:01:38,160 --> 00:01:41,730 in order to make a clickable using that button object that we just created. 24 00:01:41,910 --> 00:01:47,010 We're adding an event listener and then we need to specify what type of event we're listening for. 25 00:01:47,190 --> 00:01:48,570 So we're going to listen for a click. 26 00:01:48,840 --> 00:01:54,810 You have an option now to create either a function, so link it to a function that gets invoked when 27 00:01:54,810 --> 00:01:56,730 the event listener gets triggered. 28 00:01:56,760 --> 00:02:02,010 Or we can do an anonymous function, which is the case that I'm going to do here where we don't need 29 00:02:02,010 --> 00:02:05,460 a name and we're just going to have the function sitting within the event. 30 00:02:05,460 --> 00:02:09,620 Listener, a console logout the word works. 31 00:02:10,020 --> 00:02:12,780 Always a good idea to check along the way. 32 00:02:13,020 --> 00:02:15,900 And this is one of the key functionalities of our game. 33 00:02:16,020 --> 00:02:17,850 So we want to make sure it works at this point. 34 00:02:18,090 --> 00:02:23,480 So go ahead and click the button and you could see some type of output happening within your console. 35 00:02:23,820 --> 00:02:24,990 Try it out for yourself. 36 00:02:25,650 --> 00:02:32,070 Set up all of your document elements into as JavaScript objects and you'll be ready to move on to the 37 00:02:32,070 --> 00:02:32,640 next step. 38 00:02:32,910 --> 00:02:38,100 And the next step is going to be where we're going to look at JavaScript, not random, which is going 39 00:02:38,100 --> 00:02:42,620 to give us the ability to provide a random output for the gameplay. 40 00:02:42,660 --> 00:02:43,530 So that's still to come.