1
00:00:02,170 --> 00:00:04,590
Now we know about methods.

2
00:00:04,590 --> 00:00:08,469
And I did want to talk about methods right now, already,

3
00:00:08,469 --> 00:00:10,579
because whilst we for the moment

4
00:00:10,579 --> 00:00:14,349
won't define our own methods too often,

5
00:00:14,349 --> 00:00:19,179
we will actually work with quite a bit of built in methods

6
00:00:19,179 --> 00:00:22,600
throughout this and the next sections.

7
00:00:22,600 --> 00:00:25,440
And here's a good example: up to this point,

8
00:00:25,440 --> 00:00:28,143
I always used alert for outputting something.

9
00:00:28,143 --> 00:00:32,070
And the advantage is that we do see that right here on the

10
00:00:32,070 --> 00:00:34,260
screen, in this alert box.

11
00:00:34,260 --> 00:00:36,040
The disadvantage is that we always

12
00:00:36,040 --> 00:00:37,733
have to click it away and so on.

13
00:00:38,820 --> 00:00:42,540
And since this is all just a dummy example anyways,

14
00:00:42,540 --> 00:00:45,840
to get started with Java script and learn these basics,

15
00:00:45,840 --> 00:00:50,070
this of course is not code that does anything useful,

16
00:00:50,070 --> 00:00:52,520
which we would need on a real page.

17
00:00:52,520 --> 00:00:54,180
Since that's the case,

18
00:00:54,180 --> 00:00:56,610
it would be nice to not have this alert,

19
00:00:56,610 --> 00:00:59,840
but instead we have this console here

20
00:00:59,840 --> 00:01:02,913
in the developer tools, this console tab.

21
00:01:03,770 --> 00:01:06,140
And we did see that in here,

22
00:01:06,140 --> 00:01:11,140
we get error messages that might be caused by our code.

23
00:01:11,240 --> 00:01:13,010
Well, it turns out that

24
00:01:13,010 --> 00:01:16,270
we cannot just see possible error messages

25
00:01:16,270 --> 00:01:18,519
of which we hopefully don't have too many,

26
00:01:18,519 --> 00:01:20,209
but we can also actively

27
00:01:20,209 --> 00:01:24,720
output data and information into this console.

28
00:01:24,720 --> 00:01:27,580
We can log data into this console.

29
00:01:27,580 --> 00:01:29,750
So that we see it here.

30
00:01:29,750 --> 00:01:33,490
And during development for learning Java script

31
00:01:33,490 --> 00:01:36,540
and for playing around with it, that's great.

32
00:01:36,540 --> 00:01:39,230
It's quicker and simply easier to use,

33
00:01:39,230 --> 00:01:42,258
than working with that alert box.

34
00:01:42,258 --> 00:01:46,360
Now for that, we will use a built in object

35
00:01:46,360 --> 00:01:49,450
provided by the browser and a method

36
00:01:49,450 --> 00:01:52,960
that's built into this object out of the box.

37
00:01:52,960 --> 00:01:56,271
And I'll start here, when I first alert something.

38
00:01:56,271 --> 00:01:59,710
Instead of calling this alert command,

39
00:01:59,710 --> 00:02:04,250
which has all that built in, I will now remove that,

40
00:02:04,250 --> 00:02:09,250
and instead use the built in console variable in the end,

41
00:02:10,759 --> 00:02:12,920
it's provided by the browser,

42
00:02:12,920 --> 00:02:16,623
which turns out to store an object.

43
00:02:17,560 --> 00:02:19,820
Hence we can use the dot notation here.

44
00:02:19,820 --> 00:02:23,880
And now we see there are a bunch of methods built in.

45
00:02:23,880 --> 00:02:27,200
You learned these purple boxes,

46
00:02:27,200 --> 00:02:29,900
which are shaped like this, are methods.

47
00:02:29,900 --> 00:02:32,323
We also have one property here.

48
00:02:33,730 --> 00:02:38,730
Now for us, the log method is very useful.

49
00:02:39,610 --> 00:02:42,050
So here I'll select this by clicking on it.

50
00:02:42,050 --> 00:02:43,800
And now as it's a method,

51
00:02:43,800 --> 00:02:46,453
we execute it by adding parentheses.

52
00:02:47,860 --> 00:02:51,710
Now this log method wants a parameter value

53
00:02:51,710 --> 00:02:53,720
and we can see this. If I hover over it,

54
00:02:53,720 --> 00:02:55,660
we see that it's a method.

55
00:02:55,660 --> 00:03:00,600
And then this part here all looks a bit strange,

56
00:03:00,600 --> 00:03:01,860
but in the end, that means that

57
00:03:01,860 --> 00:03:05,760
it takes a flexible amount of parameters.

58
00:03:05,760 --> 00:03:07,980
It's not something we have learned about yet,

59
00:03:07,980 --> 00:03:09,850
but it means it takes parameters.

60
00:03:09,850 --> 00:03:11,610
That's all we need to know for now.

61
00:03:11,610 --> 00:03:15,870
And then this part here void simply means that that's a

62
00:03:15,870 --> 00:03:19,506
method that won't return any value.

63
00:03:19,506 --> 00:03:22,810
Void means this method or this function

64
00:03:22,810 --> 00:03:25,280
does not return anything.

65
00:03:25,280 --> 00:03:27,510
That's how we can read this.

66
00:03:27,510 --> 00:03:29,080
And since it takes parameters,

67
00:03:29,080 --> 00:03:32,563
we can pass total adult years as a parameter,

68
00:03:33,600 --> 00:03:37,380
we can see that it's takes any kind of value.

69
00:03:37,380 --> 00:03:38,630
That's what this means.

70
00:03:38,630 --> 00:03:40,424
So passing in a number,

71
00:03:40,424 --> 00:03:44,053
which total adult years will be, should be fine.

72
00:03:45,580 --> 00:03:47,570
And we can do this here as well.

73
00:03:47,570 --> 00:03:50,783
Replace alert with console.log,

74
00:03:52,700 --> 00:03:55,700
and also here in our agreed method,

75
00:03:55,700 --> 00:03:58,540
replace alert with console.log.

76
00:03:58,540 --> 00:04:03,440
We can use this built in variable and method inside of our

77
00:04:03,440 --> 00:04:05,743
own method, that works without issues.

78
00:04:06,760 --> 00:04:07,730
And as a side note,

79
00:04:07,730 --> 00:04:10,040
if you now hover over your own method here,

80
00:04:10,040 --> 00:04:13,580
you also get some explanation here by visual studio code.

81
00:04:13,580 --> 00:04:16,980
We see that it's a method and that this also doesn't return

82
00:04:16,980 --> 00:04:19,829
anything because we have no return statement in there,

83
00:04:19,829 --> 00:04:21,813
and that we take no parameters.

84
00:04:22,930 --> 00:04:25,550
On the other hand for a calculate adult years,

85
00:04:25,550 --> 00:04:27,940
We see that we need an age.

86
00:04:27,940 --> 00:04:31,940
Here the type is anything which is technically not correct,

87
00:04:31,940 --> 00:04:34,240
but visual studio code doesn't understand

88
00:04:34,240 --> 00:04:36,220
that we need a number in there,

89
00:04:36,220 --> 00:04:40,619
but we see that it will return a number in the end,

90
00:04:40,619 --> 00:04:44,027
because we returned a result of this calculation.

91
00:04:44,027 --> 00:04:47,460
That's just a side note, but also useful to use

92
00:04:47,460 --> 00:04:50,700
when you want to find out how you can execute your own

93
00:04:50,700 --> 00:04:55,700
or built in methods and functions, but back to console.log,

94
00:04:56,200 --> 00:04:57,920
I'm now using console.log

95
00:04:57,920 --> 00:05:01,150
in all the places where I used alert.

96
00:05:01,150 --> 00:05:05,570
And if I now a save that, you see that now after reloading,

97
00:05:05,570 --> 00:05:08,890
you get this output here in this console tab

98
00:05:08,890 --> 00:05:11,163
in your browser dev tools,

99
00:05:12,000 --> 00:05:13,750
and that's more convenient than

100
00:05:13,750 --> 00:05:16,080
having to deal with these alerts.

101
00:05:16,080 --> 00:05:17,390
And if you reload this page,

102
00:05:17,390 --> 00:05:19,820
you get this output again, and here you see

103
00:05:19,820 --> 00:05:23,740
two numbers and then some text, the text is white,

104
00:05:23,740 --> 00:05:25,566
the numbers are purple, in my case,

105
00:05:25,566 --> 00:05:27,453
when using this dark mode.

106
00:05:28,720 --> 00:05:32,290
And that's how we use a built in variable,

107
00:05:32,290 --> 00:05:36,050
which holds an object, which has this log method.

108
00:05:36,050 --> 00:05:39,420
And that's why I wanted to introduce methods,

109
00:05:39,420 --> 00:05:41,640
because console.log is just

110
00:05:41,640 --> 00:05:45,300
one example of a built-in method, which we'll use a lot.

111
00:05:45,300 --> 00:05:48,640
We'll use it a lot to output information without using

112
00:05:48,640 --> 00:05:52,620
alert, which is more disturbing and a bit more annoying.

113
00:05:52,620 --> 00:05:54,880
Of course, I want to emphasize again,

114
00:05:54,880 --> 00:05:57,758
that console.log is producing output,

115
00:05:57,758 --> 00:06:00,750
which we only see in these developer tools

116
00:06:00,750 --> 00:06:02,968
and the typical user of our page,

117
00:06:02,968 --> 00:06:05,470
Of course, won't see them.

118
00:06:05,470 --> 00:06:07,350
Everyone could open these tools,

119
00:06:07,350 --> 00:06:09,463
but no one typically does that.

120
00:06:10,360 --> 00:06:13,320
It's just there for us to practice JavaScript.

121
00:06:13,320 --> 00:06:17,280
We will do more useful things with JavaScript later,

122
00:06:17,280 --> 00:06:19,523
once we've learned a bit more about it.

