1
00:00:00,270 --> 00:00:05,690
Great, you made it to try and catch a lesson in this lesson we are going to be looking at try catch

2
00:00:05,850 --> 00:00:12,480
and this gives us the ability to try different blockquote as well as catch any errors, throw custom

3
00:00:12,480 --> 00:00:15,470
errors and then execute code so it using final.

4
00:00:15,510 --> 00:00:20,490
So these are very useful when you're writing functions and you've got some values and you're not sure

5
00:00:20,490 --> 00:00:21,510
what the result will be.

6
00:00:21,840 --> 00:00:25,510
So let me take a closer look and show you within what can be done.

7
00:00:25,530 --> 00:00:27,480
So it marks a block of code statements.

8
00:00:27,480 --> 00:00:29,970
Try specifies a response exception.

9
00:00:30,130 --> 00:00:36,720
So I've got a simple example here where we've got try so it's got non existent function and it's going

10
00:00:36,720 --> 00:00:41,220
to throw an error because, of course, this function doesn't exist and that's going to log that error

11
00:00:41,220 --> 00:00:42,120
into the console.

12
00:00:42,360 --> 00:00:47,820
So it's a really great example of it where we can customize the errors on catch and output.

13
00:00:47,820 --> 00:00:51,770
That error information so non existent is not defined.

14
00:00:52,080 --> 00:00:56,430
That means that we tried to execute this function and we had an error.

15
00:00:56,550 --> 00:00:57,690
So that's where catch came.

16
00:00:57,690 --> 00:01:05,190
And also extend on that as well, where you've got finally so you've got another option to run the code

17
00:01:05,940 --> 00:01:07,450
using finally as well.

18
00:01:07,710 --> 00:01:12,630
So let's take a closer look and I'll show you a little bit more about it and let's create an element

19
00:01:12,630 --> 00:01:13,260
for the page.

20
00:01:13,270 --> 00:01:14,880
So create an input area.

21
00:01:14,880 --> 00:01:19,890
And for this input, then we can grab the contents of the input when the button gets clicked.

22
00:01:20,250 --> 00:01:21,430
So let's set all of that up.

23
00:01:21,750 --> 00:01:28,020
So using document and of course, create element in order to create the element in this case, we're

24
00:01:28,020 --> 00:01:32,070
creating an input and then taking that element and we're setting an attribute.

25
00:01:32,550 --> 00:01:35,610
And the attribute that we're setting is the type.

26
00:01:37,030 --> 00:01:42,720
And set it as text and we can console logout the element just to make sure that everything looks good.

27
00:01:42,940 --> 00:01:47,310
So got our input text next we should add it onto the page.

28
00:01:47,620 --> 00:01:54,080
So using document body append child and the child that we're pending is the element.

29
00:01:54,490 --> 00:01:56,230
So now we've added it to the page.

30
00:01:56,590 --> 00:01:57,420
Let's make this bigger.

31
00:01:57,970 --> 00:02:02,770
And of course I could have just done with this with each HTML, but this is a JavaScript course, so

32
00:02:02,770 --> 00:02:05,650
any opportunity we have to practice and do it with JavaScript.

33
00:02:05,770 --> 00:02:06,610
That's what we want to do.

34
00:02:07,030 --> 00:02:14,800
So let's also select our button to document and query selector selecting the button element.

35
00:02:14,920 --> 00:02:19,720
So it's just a button with the JavaScript there and then we can use a button and we could add an event

36
00:02:19,720 --> 00:02:20,790
listener to that button.

37
00:02:21,100 --> 00:02:26,920
So listening for a click on the button and if the button gets clicked, then we can invoke a function

38
00:02:27,100 --> 00:02:33,800
what is called this next, create the function that's going to get invoked and will console log out.

39
00:02:34,240 --> 00:02:34,660
Yes.

40
00:02:35,310 --> 00:02:40,620
So usually when I create these things, I like to just make sure that everything is working properly.

41
00:02:40,840 --> 00:02:41,770
So it is working.

42
00:02:42,070 --> 00:02:45,820
We can also get the contents of the elements so we can do element value.

43
00:02:46,300 --> 00:02:47,920
So I'll put that into the console.

44
00:02:48,220 --> 00:02:50,620
So because we are going to need to work with that.

45
00:02:50,630 --> 00:02:56,830
So that element, object value, you can see as I update the value, the value update so we can utilize

46
00:02:56,830 --> 00:02:57,640
that within the code.

47
00:02:58,210 --> 00:03:05,470
So what we want to do, so we want that actually to be a number and then this is what we're going to

48
00:03:05,470 --> 00:03:07,000
try and we're going to test against.

49
00:03:07,300 --> 00:03:12,370
So we're getting that element value and also let's set a default value for this.

50
00:03:12,640 --> 00:03:14,590
So don't always have to keep refreshing.

51
00:03:14,620 --> 00:03:15,440
So do value.

52
00:03:16,030 --> 00:03:24,790
So coming into the Testor function, we're going to have try and checking to see if NUM is equal to

53
00:03:26,440 --> 00:03:26,920
nothing.

54
00:03:26,920 --> 00:03:36,370
If it's empty, then we're going to throw an error and no value because we're throw you can set custom

55
00:03:36,520 --> 00:03:40,830
error messages and then of course we need cash in order to catch those errors.

56
00:03:41,080 --> 00:03:46,540
So it's taking in that as a parameter as error and we're outputting it into the console.

57
00:03:46,540 --> 00:03:49,050
Whatever the error messages will just output into the console.

58
00:03:49,720 --> 00:03:52,540
So refresh and that's working.

59
00:03:52,870 --> 00:03:58,810
If we have no value that we throw no value within, they're also going to get rid of the console of

60
00:03:58,810 --> 00:03:59,060
that.

61
00:03:59,290 --> 00:04:01,960
So it's all fine whenever there's a value in there.

62
00:04:01,960 --> 00:04:05,140
If there's no value, then you see we get this error message of no value.

63
00:04:05,470 --> 00:04:09,970
Let's try a few more and we'll check to see if it's a number.

64
00:04:10,420 --> 00:04:12,460
So to make sure that it is actually a number.

65
00:04:13,150 --> 00:04:18,940
And if it's not, then we want to throw an error because we want to make sure that this value is a number.

66
00:04:18,950 --> 00:04:22,180
So not a number or should be digit.

67
00:04:22,180 --> 00:04:26,710
But so if we have testin here, we see we get not a number.

68
00:04:26,920 --> 00:04:28,720
If we have blank, we have no value.

69
00:04:28,960 --> 00:04:30,580
If we have a no, everything's good.

70
00:04:30,700 --> 00:04:31,540
We can continue.

71
00:04:33,810 --> 00:04:37,260
So let's convert it into a number in case that was the problem.

72
00:04:39,750 --> 00:04:47,850
And then check to see if the value of NUM is greater than five and if it's not, then we can say over

73
00:04:48,000 --> 00:04:51,140
five and it's actually over five.

74
00:04:51,150 --> 00:04:52,230
So it is over five.

75
00:04:52,670 --> 00:04:53,430
That's the error.

76
00:04:54,420 --> 00:04:55,880
And we can also do the other way.

77
00:04:55,890 --> 00:04:58,110
We can check to see if it's less than five.

78
00:04:59,080 --> 00:05:05,170
And then throw an error under five, because maybe we're expecting something more so over five and under

79
00:05:05,170 --> 00:05:05,590
five.

80
00:05:05,770 --> 00:05:08,200
So now we've got ability to catch a bunch of errors.

81
00:05:08,500 --> 00:05:10,600
And then also let's add in finally.

82
00:05:11,020 --> 00:05:16,050
So finally, let's us just execute code and we'll just put into the console.

83
00:05:16,300 --> 00:05:18,940
This will always run.

84
00:05:20,170 --> 00:05:21,910
So this is a block that will always run.

85
00:05:22,180 --> 00:05:23,860
So it doesn't matter if we have any errors.

86
00:05:23,860 --> 00:05:24,920
We always see that running.

87
00:05:24,940 --> 00:05:29,230
So does it actually matter what happens within the try and catch?

88
00:05:29,440 --> 00:05:30,980
Finally will always execute.

89
00:05:31,080 --> 00:05:32,160
You see that they're in the bottom.

90
00:05:33,190 --> 00:05:35,130
So extending on what we just saw.

91
00:05:35,530 --> 00:05:41,770
What I want you to do for this lesson challenge is to multiply it input field by 10 on the press of

92
00:05:41,770 --> 00:05:48,220
a button, provide an error message to the user if the input is not correct format and clear the input

93
00:05:48,220 --> 00:05:53,740
value each time that the user runs or execute invokes the function.

94
00:05:54,280 --> 00:05:56,890
So go ahead, pause the video, try this one out.

95
00:05:56,980 --> 00:05:59,710
And this is a little bit of an extension on what we just did.

96
00:05:59,800 --> 00:06:01,770
A walk you through the solution coming up.

97
00:06:02,680 --> 00:06:08,170
So it's got this block of code and I'm going to simply I'm going to duplicate some of it because a lot

98
00:06:08,170 --> 00:06:14,200
of this Testor function is going to be the same thing, but will call it something different.

99
00:06:14,230 --> 00:06:17,020
Well, we'll call it calculate or something like that.

100
00:06:17,140 --> 00:06:21,760
So we've got our calculation and now that's going to get invoked whenever we press the button.

101
00:06:22,030 --> 00:06:27,190
So let's update this where we've got the value that we're taking from the input.

102
00:06:27,200 --> 00:06:28,120
So we still need that.

103
00:06:28,540 --> 00:06:32,080
And we're checking to see if the number exists and if no no value.

104
00:06:32,650 --> 00:06:34,300
We're also making sure that it is a number.

105
00:06:35,110 --> 00:06:40,840
And if everything is good, then we're going to update the output value in the console.

106
00:06:41,050 --> 00:06:42,800
And we do have a div existence.

107
00:06:42,800 --> 00:06:50,650
So document and query, select and update the text content of the div to be whatever the number of times

108
00:06:50,650 --> 00:06:51,280
ten is.

109
00:06:51,520 --> 00:06:57,940
So output that for the user if there is an error instead of outputting in the console, let's output

110
00:06:57,940 --> 00:07:03,480
the message to the user, the error message, and then we need it to reset the value of the element.

111
00:07:03,850 --> 00:07:07,610
So we always want to reset it to be blank so we can do that as well.

112
00:07:08,620 --> 00:07:09,460
So let's try that.

113
00:07:09,640 --> 00:07:15,310
And we see we get a value of one hundred and this time we get a value of fifty and we see it always

114
00:07:15,310 --> 00:07:15,850
updates.

115
00:07:16,090 --> 00:07:17,610
So let's try the error messages.

116
00:07:17,620 --> 00:07:18,640
So not a number.

117
00:07:18,880 --> 00:07:22,240
And the other one was if it's blank, so no value.

118
00:07:22,360 --> 00:07:25,030
So we get the error messages or we get the calculation.