1
00:00:02,060 --> 00:00:08,120
So let's work on a very simple example application and this indeed will be a very trivial application

2
00:00:08,120 --> 00:00:08,790
here.

3
00:00:08,840 --> 00:00:14,090
It's an application where I in the end have a HTML file which renders a form, a form with two

4
00:00:14,090 --> 00:00:19,700
inputs and then with a button and I got some styling so that this doesn't look super ugly. Now we

5
00:00:19,700 --> 00:00:26,510
can simply open this by in the end double clicking that index.html file in the finder or Windows

6
00:00:26,510 --> 00:00:27,740
Explorer

7
00:00:27,740 --> 00:00:31,190
and what we get is something that looks like this.

8
00:00:31,220 --> 00:00:37,700
Now here nothing happens, if you enter something here and click the button, you'll just submit the form

9
00:00:37,700 --> 00:00:39,310
and therefore reload the page,

10
00:00:39,320 --> 00:00:41,140
besides that nothing will happen.

11
00:00:41,240 --> 00:00:47,420
We will now write code that changes this and we will write this application code three times in the

12
00:00:47,420 --> 00:00:54,230
three different programming styles and we'll start with procedural because as I mentioned, this might

13
00:00:54,230 --> 00:00:59,840
be the style you used when you started with Javascript because I would argue it is the style that's

14
00:01:00,410 --> 00:01:02,370
the most obvious to use

15
00:01:02,390 --> 00:01:09,140
if you're getting started with programming. So let's add a new script here here, procedural.js,

16
00:01:09,770 --> 00:01:14,290
you can of course name it however you want and in the index.html file, below that link here,

17
00:01:14,300 --> 00:01:20,900
I'll add a script import and point at procedural.js, add the defer attribute to make sure

18
00:01:20,900 --> 00:01:24,550
that this script only runs after the entire file has been parsed

19
00:01:24,680 --> 00:01:27,230
and of course closed the script tag as well

20
00:01:27,230 --> 00:01:30,830
and now we are importing this and we're ready to write some code

21
00:01:30,830 --> 00:01:35,900
and now we can really think about the different steps we want to execute because that's what procedural

22
00:01:35,900 --> 00:01:37,810
programming is all about.

23
00:01:37,820 --> 00:01:41,590
So if we have a look at our HTML file, what do we want to do?

24
00:01:41,600 --> 00:01:46,910
Well we want to listen to a click on this button of course or to be precise, we want to listen for the

25
00:01:46,910 --> 00:01:53,280
submission of the form, we want to get the values the user entered for the username and for the password

26
00:01:53,600 --> 00:01:57,140
and we might want to validate those values,

27
00:01:57,140 --> 00:02:00,440
so at least make sure both fields are not empty,

28
00:02:00,440 --> 00:02:02,850
show an error message if they are empty

29
00:02:02,960 --> 00:02:10,040
and then in the end if everything has been valid, do something with the data, let's say create a new object,

30
00:02:10,500 --> 00:02:15,470
a new user object and then log that to the console or something like this.

31
00:02:15,500 --> 00:02:19,560
So something fairly trivial, that is what we could do here.

32
00:02:19,640 --> 00:02:22,880
So for that, back to the procedural.js file, what do we need to do here?

33
00:02:23,060 --> 00:02:27,950
Well we need to get access to the form and to the two inputs so that we can work with the data there

34
00:02:28,400 --> 00:02:31,330
and then we can add a listener to the form and so on.

35
00:02:31,340 --> 00:02:33,860
So getting access to those things is easy,

36
00:02:33,860 --> 00:02:40,190
we have IDs, we have the user input ID on the form, we have the username ID on this input and the password

37
00:02:40,190 --> 00:02:47,130
ID on this input, so we can use these three inputs to gain access. So I'll store the form in a form constant

38
00:02:47,220 --> 00:02:52,570
or I'll store a reference to the form in the form constant and we can get access with get element by

39
00:02:52,570 --> 00:02:52,950
ID

40
00:02:53,220 --> 00:03:01,320
and then here it was user-input and then the second const that I want to create here is the username

41
00:03:01,350 --> 00:03:08,540
input, we can get access with document get element by ID username and last but not least, the password,

42
00:03:08,550 --> 00:03:16,610
so the passwordInput, that can be fetched with document get element by ID password like this.

43
00:03:16,660 --> 00:03:21,300
Okay, so we get this access, let's now add an event listener.

44
00:03:21,330 --> 00:03:26,250
So on the form I'll add an event listener to the submit event because that is the event we want to listen

45
00:03:26,250 --> 00:03:26,640
to,

46
00:03:26,670 --> 00:03:27,640
right

47
00:03:27,780 --> 00:03:30,600
and then we want to trigger a function when that executes,

48
00:03:30,600 --> 00:03:36,000
we could use an anonymous function here but I will create a named function, the signup handler let's

49
00:03:36,000 --> 00:03:44,610
say. It will get an event object automatically and I will point at this function when this event is triggered,

50
00:03:44,610 --> 00:03:46,200
when this event is fired.

51
00:03:46,230 --> 00:03:51,930
Now this is vanilla Javascript and of course even though we're using the procedural style, we are allowed

52
00:03:51,930 --> 00:03:53,790
to work with functions as well,

53
00:03:53,790 --> 00:03:55,110
this is not forbidden,

54
00:03:55,170 --> 00:04:00,230
we just don't organize our code around the idea of using functions all the time.

55
00:04:00,450 --> 00:04:05,880
So we point at this function here when this event is triggered and now in this function, we write all

56
00:04:05,880 --> 00:04:09,660
the logic, again step-by-step which you want to execute.

57
00:04:09,840 --> 00:04:16,980
So thus far our logic is get access to the different elements step-by-step and then define this function

58
00:04:17,100 --> 00:04:18,690
and then set up this listener.

59
00:04:18,690 --> 00:04:24,280
Now when this function runs, we need to get the inputs here, the values the user entered,

60
00:04:24,300 --> 00:04:30,180
we need to validate them and then create a dummy user object with that data and actually first of all,

61
00:04:30,180 --> 00:04:36,930
I want to call event prevent default to prevent that browser default of sending the form to a backend

62
00:04:36,930 --> 00:04:41,120
server which in the end leads to a page refresh which I don't want here,

63
00:04:41,160 --> 00:04:44,900
so let's call this as well and now we can get started.

64
00:04:44,900 --> 00:04:48,410
Let's get the concrete values the user entered.

65
00:04:48,410 --> 00:04:57,150
So we got the entered username and we can get this out of usernameInput.value, we can access

66
00:04:57,150 --> 00:05:01,620
.value here because we know that the element we're selecting here is an input element which will have

67
00:05:01,620 --> 00:05:07,950
a value property. Side note, you could actually also only get access to the usernameInput in here if

68
00:05:07,950 --> 00:05:12,780
you wanted to because we really only need the two inputs here inside of this function,

69
00:05:12,990 --> 00:05:16,800
so you don't have to do it globally here, in this function it would also suffice,

70
00:05:16,800 --> 00:05:23,830
so maybe let's reorganize our code to do that inside of this function, maybe even after preventing the

71
00:05:23,830 --> 00:05:29,030
default, really right before we need a value, that's not required but it is a possibility.

72
00:05:29,200 --> 00:05:31,790
So we get the entered username,

73
00:05:31,900 --> 00:05:37,410
we can also get the entered password and we get that from the passwordInput.value of course,

74
00:05:37,420 --> 00:05:41,560
just like this. Now with the two values, we can validate them,

75
00:05:41,710 --> 00:05:47,680
we could do this with an if check where we check if the entered username, if we trim it to remove excess

76
00:05:47,680 --> 00:05:53,740
whitespace at the beginning and end, if the length is equal to zero which means this is an invalid input,

77
00:05:53,770 --> 00:05:54,700
it's empty.

78
00:05:54,700 --> 00:06:04,470
In this case, we could show an alert to the user and say invalid input, username must not be empty,

79
00:06:04,510 --> 00:06:10,790
that's something we could do here and we also return here which means we cancel this function execution

80
00:06:10,910 --> 00:06:16,490
so that we don't continue in the code. If we make it past this if check, we might still have an invalid

81
00:06:16,520 --> 00:06:23,450
input because our password, our entered password, with a double s here,

82
00:06:23,570 --> 00:06:24,580
entered password,

83
00:06:24,580 --> 00:06:28,430
that might also be wrong, so we trim this and check if the length is zero

84
00:06:28,430 --> 00:06:34,250
or maybe if it's smaller or equal than five because let's say we want the password which has at least

85
00:06:34,250 --> 00:06:35,570
five characters,

86
00:06:35,750 --> 00:06:44,480
if it is too short, we can say invalid input, password must be six characters or longer

87
00:06:44,480 --> 00:06:48,730
and again we thereafter return so that we don't continue with the function execution.

88
00:06:49,130 --> 00:06:51,380
If we do continue, we made it past both

89
00:06:51,380 --> 00:06:57,320
if checks and we now know we have a valid input and that's where we now could create a new user object,

90
00:06:58,360 --> 00:07:04,720
simply with an object literal. Again just like functions are not forbidden here, objects are not forbidden

91
00:07:04,720 --> 00:07:05,250
here,

92
00:07:05,290 --> 00:07:10,800
it's not like you're only allowed to use objects when you're writing object oriented code,

93
00:07:10,840 --> 00:07:12,870
it's more about how you organize code

94
00:07:12,880 --> 00:07:19,240
and here it's really a step-by-step execution and we're using a very simple literal object here to store

95
00:07:19,240 --> 00:07:20,860
some data, to group some data.

96
00:07:21,340 --> 00:07:25,580
So here we then have let's say the username which is our entered username,

97
00:07:25,690 --> 00:07:30,490
we have the password which is our entered password, entered password

98
00:07:30,580 --> 00:07:33,160
and with that we're good

99
00:07:33,160 --> 00:07:41,980
and now we can console log the user and maybe also send a greeting with Hi I am plus user.username,

100
00:07:42,310 --> 00:07:44,170
like this.

101
00:07:44,320 --> 00:07:49,010
With that, we had a very basic procedural program.

102
00:07:49,210 --> 00:07:57,320
If we now save this's and we go back to the browser and reload this page, if I enter Maximilian here and

103
00:07:57,320 --> 00:08:05,460
then any password of my choice which is let's say too short actually, I get this error, invalid input password

104
00:08:05,460 --> 00:08:11,460
must be six characters or longer. If I don't enter Maximilian here but I leave this empty, I get this

105
00:08:11,460 --> 00:08:19,440
error regarding my username and if I do have valid inputs in both fields here, you see we're logging

106
00:08:19,440 --> 00:08:22,430
the user, we're logging Hi I am Maximilian.

107
00:08:22,590 --> 00:08:26,970
Now as I mentioned, this code here should look fairly straightforward to you,

108
00:08:26,970 --> 00:08:33,570
there also is nothing wrong with it but this would be the simple procedural way of writing your

109
00:08:33,570 --> 00:08:40,050
code, you think about the different steps you need to execute and you then just write them down and don't

110
00:08:40,050 --> 00:08:46,470
get me wrong, code will always be executed from top to bottom but you could also organize this differently.

111
00:08:46,500 --> 00:08:51,330
So let's have a look at the object oriented programming style next.