1 00:00:02,290 --> 00:00:06,400 So we wrote this code here in the procedural style you could say. 2 00:00:06,400 --> 00:00:08,690 Now let's create a new Javascript file, 3 00:00:08,740 --> 00:00:16,130 oop.js where we will write basically the same logic but now using an object oriented style. 4 00:00:16,240 --> 00:00:22,120 So for that in index.html, I'll swap the import for the oop.js file here. 5 00:00:22,120 --> 00:00:26,720 Now how would this look like if we think about this in an object oriented way? 6 00:00:26,740 --> 00:00:31,810 Now there are certainly different ways of approaching this but I would like to think about the different 7 00:00:32,110 --> 00:00:36,210 entities, the different types of objects we could work with here. 8 00:00:36,280 --> 00:00:40,330 We could say our form for example is one object, 9 00:00:40,330 --> 00:00:46,060 it's one object which in the end will have two inputs which has this button and which will have a method 10 00:00:46,120 --> 00:00:48,510 which is triggered when the button is fired. 11 00:00:48,640 --> 00:00:54,820 The validation could be organized in its own object as well, in a helper object which holds validation 12 00:00:54,820 --> 00:00:58,460 logic that we could reuse in different parts of the application 13 00:00:58,510 --> 00:01:04,930 if we had multiple forms and the user we create in the end, we could create a blueprint for this 14 00:01:04,930 --> 00:01:11,200 user as well, a class or constructor function which allows us to create user objects which has a built-in 15 00:01:11,200 --> 00:01:14,520 greet method to show this greeting for example. 16 00:01:14,560 --> 00:01:20,050 So here in the object oriented Javascript file, I will work with classes, 17 00:01:20,140 --> 00:01:25,120 if you were working with an older version of Javascript, you could of course also work with constructor 18 00:01:25,120 --> 00:01:31,630 functions instead. Classes in the end are just syntactic sugar with some extras and you'll learn all about 19 00:01:31,630 --> 00:01:37,690 that of course in my complete guide in the object oriented and classes course section. So which classes 20 00:01:37,690 --> 00:01:38,650 do we need here? 21 00:01:38,650 --> 00:01:40,270 Well we have our form right, 22 00:01:40,270 --> 00:01:46,500 so I'll a user input form class here and this should hold everything that is related to my form. 23 00:01:47,500 --> 00:01:51,270 I also want to have another class and the order does not really matter here, 24 00:01:51,370 --> 00:01:57,460 I'll just have the form at the bottom because it is the thing I will actually start with and it will 25 00:01:57,460 --> 00:02:00,520 use all the other classes which I'm about to define, 26 00:02:00,520 --> 00:02:05,920 so I want to define them first, though technically as I said, you could also organize this differently but 27 00:02:05,920 --> 00:02:09,340 here, another class we'll need later is the user itself, 28 00:02:09,460 --> 00:02:16,750 so not the input form but for the concrete user object we work with and then maybe also our validator 29 00:02:16,840 --> 00:02:20,290 class here which holds our validation logic. 30 00:02:20,300 --> 00:02:24,100 Now let's start with the user input form though, what could be in there? 31 00:02:24,110 --> 00:02:31,010 Well I want to define my constructor function which allows us to do some initialization work whenever 32 00:02:31,010 --> 00:02:34,440 we create an instance based on this class. 33 00:02:34,460 --> 00:02:39,340 Now my goal is to create an instance based on this class when the app starts in the end. 34 00:02:39,440 --> 00:02:46,400 So therefore here, I want to get access to the different inputs in the HTML file and to the form itself 35 00:02:46,430 --> 00:02:48,660 so that we can add a listener. 36 00:02:48,680 --> 00:02:55,220 So here I will add some properties to the instance created based on the class with the this keyword, 37 00:02:55,220 --> 00:02:58,710 for example a form property and the name is up to you 38 00:02:58,760 --> 00:03:02,660 and here I get access to get element by ID, user-input, 39 00:03:02,660 --> 00:03:06,150 so here I store access to this user input form. 40 00:03:06,170 --> 00:03:10,390 I also want to get access to the different input fields in the form, 41 00:03:10,400 --> 00:03:19,550 so I have my usernameInput field, document get element by ID username and of course one for the password, 42 00:03:19,790 --> 00:03:24,710 so passwordInput with document get element by ID password. 43 00:03:24,710 --> 00:03:29,640 So basically what we stored in constants before, here 44 00:03:29,720 --> 00:03:37,940 this constant, this constant and this constant is now getting stored in properties of this class or to 45 00:03:37,940 --> 00:03:45,450 be precise, in properties of the concrete objects created based on this class. I also of course will 46 00:03:45,450 --> 00:03:51,800 reach out to my form and add an event listener here for the submit event and when this is triggered, 47 00:03:51,840 --> 00:03:54,790 I of course want to trigger a function. 48 00:03:54,840 --> 00:03:59,580 Now we could work with an anonymous function here but since we're in the class and we want to write 49 00:03:59,670 --> 00:04:06,480 object oriented code, it makes much more sense to create a method, so a function inside of an object, inside 50 00:04:06,480 --> 00:04:08,060 of a class here. 51 00:04:08,070 --> 00:04:14,850 So for that, I'll add the signupHandler method here which gets the event object and now I can point 52 00:04:14,910 --> 00:04:15,500 at it here, 53 00:04:15,510 --> 00:04:22,370 this signupHandler. This ensures that this function which is registered on this class and which therefore 54 00:04:22,370 --> 00:04:27,250 is called a method is fired whenever the submit event occurs 55 00:04:27,630 --> 00:04:34,350 and in here, we can now do stuff, we can call even prevent default but we can now also get the concrete 56 00:04:34,410 --> 00:04:36,440 entered values and validate them 57 00:04:36,450 --> 00:04:38,190 and so on. 58 00:04:38,190 --> 00:04:45,300 Now one important word, if I want to get the let's say entered username here, then I of course can reach 59 00:04:45,300 --> 00:04:47,070 out to this usernameInput, 60 00:04:47,070 --> 00:04:53,670 so to this pointer at this input element in the HTML code we stored here and access .value 61 00:04:54,480 --> 00:04:56,280 but this won't work, 62 00:04:56,280 --> 00:05:03,480 why won't it work? Because the this keyword inside of this method will not refer to this class in this case 63 00:05:03,480 --> 00:05:03,900 here, 64 00:05:03,900 --> 00:05:04,670 why? 65 00:05:04,770 --> 00:05:07,190 Because this method gets fired upon this event 66 00:05:07,200 --> 00:05:12,720 and when you point at a function or a method based on an event that gets triggered, 67 00:05:12,750 --> 00:05:17,560 so here on such a event listener, the this keyword will be bound to the event target, 68 00:05:17,580 --> 00:05:20,340 that's a default behavior. To override this, 69 00:05:20,400 --> 00:05:22,780 we have to call bind this here. 70 00:05:22,800 --> 00:05:29,700 This ensures that the this keyword inside of signupHandler will point to the exact same thing 71 00:05:29,730 --> 00:05:35,610 this would point to in the constructor and that will be the instance created based on the class. 72 00:05:35,610 --> 00:05:37,900 So now this will work correctly and 73 00:05:37,920 --> 00:05:44,280 we can therefore also get the entered password here with this passwordInput.value. 74 00:05:44,310 --> 00:05:46,140 So now we get the two values, 75 00:05:46,140 --> 00:05:48,220 now it would make sense to validate them 76 00:05:48,270 --> 00:05:54,220 and here again thinking in an object oriented way, we could outsource this validation logic into a validator 77 00:05:54,220 --> 00:05:55,310 class. 78 00:05:55,440 --> 00:05:56,560 We don't have to do that, 79 00:05:56,580 --> 00:05:58,200 we could write it inline here, 80 00:05:58,200 --> 00:06:05,040 we could just copy over this logic here from procedural but that means that whenever we have some other 81 00:06:05,040 --> 00:06:12,540 form in our application, we can only reuse our code by copying it again and copy and pasting is not something 82 00:06:12,540 --> 00:06:16,530 we want to do too often because that is a bad programming style, 83 00:06:16,530 --> 00:06:20,160 you're repeating yourself and you shouldn't do that. 84 00:06:20,160 --> 00:06:23,460 So instead, I'll add something here in the validator class, 85 00:06:23,460 --> 00:06:30,140 I'll add a static method validate, this means we can call it without instantiating this class and there, 86 00:06:30,150 --> 00:06:36,660 I expect to get a value and then let's say a flag and a validator value if you want to, 87 00:06:36,750 --> 00:06:40,180 so I'm writing a little bit of a more complex validator here. 88 00:06:40,200 --> 00:06:41,410 What does this mean? 89 00:06:41,430 --> 00:06:41,810 Well. 90 00:06:41,820 --> 00:06:45,000 value should be the value I want to check, 91 00:06:45,000 --> 00:06:47,650 so the entered username and enter password. 92 00:06:47,670 --> 00:06:53,570 Flag should then allow us to identify which kind of validation we want to perform and then validator 93 00:06:53,570 --> 00:06:58,490 value is basically optional allowing us to configure the validation. 94 00:06:58,680 --> 00:07:06,060 Now for this to work, I'll add two new static properties here - required and I'm writing in all caps to make 95 00:07:06,060 --> 00:07:13,680 it clear that this is basically a globally unique value you could say and min length here 96 00:07:13,680 --> 00:07:20,130 and these are just identifiers which we can then use because my idea now is that I can check if in here 97 00:07:20,130 --> 00:07:27,280 in the validate function, if the flag argument I'm getting, if this is equal to this required, 98 00:07:27,360 --> 00:07:33,870 so if we're running some required validation and if it is, I want to return true or false, I want to return 99 00:07:33,870 --> 00:07:38,020 true if the entered value is not empty and false if it is empty. 100 00:07:38,100 --> 00:07:45,490 So I will return value trim length greater zero, if it's not an empty input, this will return true, 101 00:07:45,510 --> 00:07:47,420 otherwise this will return false. 102 00:07:47,820 --> 00:07:58,370 If the flag is let's say this min length, then I will return value trim length greater validator value, 103 00:07:58,410 --> 00:08:02,430 so this extra argument with which we can configure validation. 104 00:08:02,460 --> 00:08:04,160 Why am I doing it like this? 105 00:08:04,170 --> 00:08:10,440 Well simply just to show that now we would have a reusable validate function because in the user input 106 00:08:10,440 --> 00:08:14,240 form here, in the signupHandler, we can now use this. 107 00:08:14,340 --> 00:08:18,570 We can now simply check if validator, 108 00:08:18,570 --> 00:08:24,210 so this class I just worked in, .validate which we can call like this because it's a static method 109 00:08:24,330 --> 00:08:26,950 hence we don't need to instantiate the class, 110 00:08:27,150 --> 00:08:34,770 if this yields true for the entered username which is the value and validator.required as a flag. 111 00:08:35,250 --> 00:08:40,080 So i want to validate this here with the required validator and check if it's not empty. 112 00:08:40,230 --> 00:08:42,090 If this returns true, I'm fine, 113 00:08:42,090 --> 00:08:46,680 if it does not return true indicated by this exclamation mark here, 114 00:08:46,830 --> 00:08:50,880 I want to show an error but this is not the only validation of course, 115 00:08:50,880 --> 00:08:59,670 I also want to check one other validation logic here, one other expression, if not validator validate for 116 00:08:59,670 --> 00:09:11,120 the entered password, for the min length flag and a value of five as a minimum length, if this returns 117 00:09:11,300 --> 00:09:18,080 not true or this first one returns not true, in any of these cases I want to make it into this if block 118 00:09:18,170 --> 00:09:24,760 and here we can now show an alert and say invalid input, username or password is wrong, 119 00:09:25,610 --> 00:09:33,760 password should be at least six characters. This is the alert 120 00:09:33,770 --> 00:09:38,960 we could show here and then we want to return here to not continue with this method execution. 121 00:09:38,960 --> 00:09:45,020 So the error message, the error handling still happens in this class here which makes sense because this 122 00:09:45,080 --> 00:09:48,570 is the place where I do work with my concrete values 123 00:09:48,710 --> 00:09:54,380 but the logic for checking the input is outsourced in a separate class. 124 00:09:54,380 --> 00:10:00,140 Now this is not a must do but it ensures that we could now reuse this validator in other forms of this 125 00:10:00,140 --> 00:10:05,570 application as well and we might of course have more complex validation logic in there than we currently 126 00:10:05,570 --> 00:10:08,620 do. So now with this, 127 00:10:08,650 --> 00:10:15,720 we know that after this if check, we have valid inputs and hence we could now create our new user. 128 00:10:15,730 --> 00:10:21,730 So for this, let's go to this user class and work on this, here I want to define how a user should look 129 00:10:21,730 --> 00:10:25,420 like and attach any logic to it which it should have, 130 00:10:25,420 --> 00:10:34,210 so for example here let's add a constructor to define some values with which we create a user, specifically 131 00:10:34,630 --> 00:10:42,070 the username and the user password let's say and then in here, we have this user name, set it equal 132 00:10:42,070 --> 00:10:47,550 to uName and this password set it equal to upassword here, 133 00:10:47,560 --> 00:10:52,780 this would allow us to create a new object with these two properties but I also want to add some logic, 134 00:10:52,960 --> 00:10:57,890 I'll add a greet method here to this user object where I just say console log 135 00:10:58,370 --> 00:11:04,100 Hi I am plus this username. 136 00:11:04,100 --> 00:11:12,050 And with that, we can create a new user based on this class down there, our new user with new user, here 137 00:11:12,050 --> 00:11:18,440 we need the new keyword to construct a new instance of the user class and we forward our entered user 138 00:11:18,440 --> 00:11:27,500 name and our entered password here and thereafter we can not only log the new user but also call new 139 00:11:27,500 --> 00:11:35,620 user.greet to execute that greet logic and with all that done, there's just one remaining thing now. 140 00:11:35,720 --> 00:11:40,660 Thus far all the logic lives in the user input form but this is just a class, right, 141 00:11:40,700 --> 00:11:44,040 we need to instantiate it to bring this code to life. 142 00:11:44,270 --> 00:11:52,730 So below this here, we can call new user input form like this to create a new instance. We could store 143 00:11:52,730 --> 00:11:57,870 it in a constant but if we don't work with this constant, we also don't have to do that, 144 00:11:58,050 --> 00:12:02,690 so here I'm just creating a new instance and with that, this class here now comes to life, 145 00:12:02,700 --> 00:12:07,330 we run this constructor, we set up this event listener and we're therefore good to go. 146 00:12:07,860 --> 00:12:14,670 So now if we go back and we reload this page, if we submit an empty form, we should get an error and indeed 147 00:12:14,670 --> 00:12:15,580 we do. 148 00:12:15,720 --> 00:12:22,200 If I enter a valid password here but I have an empty username, it still gets this error and if I enter 149 00:12:22,200 --> 00:12:28,040 a valid username here but my password is too short, we still get an error here. 150 00:12:28,040 --> 00:12:34,160 If I enter a different password which is long enough, we do log our user object here and this greeting. 151 00:12:34,160 --> 00:12:39,020 So this now works and it's essentially the same logic as before in the procedural style, 152 00:12:39,020 --> 00:12:45,680 the difference is now that we think about our code as different objects working together and we split 153 00:12:45,740 --> 00:12:51,250 our code logically into entities which can make it easier to reason about your code. 154 00:12:51,290 --> 00:12:53,920 It can also help with reusing code 155 00:12:54,110 --> 00:12:59,120 as I mentioned at the example of the validator because we can use this anywhere in the application, in 156 00:12:59,120 --> 00:13:04,100 the procedural style, in the way we're doing it at the moment here, we would have to copy this around 157 00:13:04,220 --> 00:13:09,590 to share it and again copy and pasting is bad because you need to change your logic in one place, you 158 00:13:09,590 --> 00:13:13,380 then need to change it in 10 places or how often you're using it. 159 00:13:13,490 --> 00:13:15,290 So that's the object oriented style, 160 00:13:15,500 --> 00:13:18,230 let's explore the functional programming style now.