1
00:00:02,290 --> 00:00:09,350
So now we got some core basics out of the way, we're able to work with some basic Javascript, with variables,

2
00:00:09,440 --> 00:00:15,380
constants, operators, numbers and strings and we're outputting that here on the screen

3
00:00:15,380 --> 00:00:18,350
but the calculator of course is not very responsive,

4
00:00:18,350 --> 00:00:22,240
all that's getting output here is kind of hardcoded into the script here,

5
00:00:22,250 --> 00:00:28,340
we're not using any user input, we're not really doing something when the user presses buttons

6
00:00:28,340 --> 00:00:31,280
here and therefore this is not really a dynamic script,

7
00:00:31,280 --> 00:00:36,620
instead it just runs from top to bottom when we load the page and therefore it immediately runs when

8
00:00:36,620 --> 00:00:37,960
the page gets loaded

9
00:00:37,960 --> 00:00:43,730
and it then does all these steps and outputs the result here, which is nice but again, which isn't

10
00:00:43,730 --> 00:00:46,630
really something interactive or dynamic.

11
00:00:46,670 --> 00:00:48,400
So it's time to change that

12
00:00:48,650 --> 00:00:54,470
and for that, we need a brand new language feature which I haven't talked about before and that would

13
00:00:54,470 --> 00:01:01,830
be functions. I like to refer to functions as code on demand,

14
00:01:01,840 --> 00:01:03,900
now what do I mean with that?

15
00:01:03,940 --> 00:01:09,730
A function is a language construct which you don't just have in Javascript but also in other programming

16
00:01:09,730 --> 00:01:16,570
languages, which basically allows you to define some code which you then execute at a later point of

17
00:01:16,570 --> 00:01:17,100
time.

18
00:01:17,170 --> 00:01:19,710
You define the code in Javascript like this,

19
00:01:19,780 --> 00:01:26,920
you use that function keyword, then you use any name you want for that function, then your function can

20
00:01:26,920 --> 00:01:29,520
take something which is called parameters,

21
00:01:29,560 --> 00:01:35,200
so some input to the function if you will and then you have the so-called function body between curly

22
00:01:35,200 --> 00:01:39,190
braces which is the code you want to execute eventually.

23
00:01:39,190 --> 00:01:42,720
Now as I said, this function can have these parameters,

24
00:01:42,760 --> 00:01:48,850
so name in this example would be a parameter and it can also return something which this example function

25
00:01:48,850 --> 00:01:52,840
here doesn't but which we'll see an action in this module.

26
00:01:52,840 --> 00:01:58,240
Now when you have a function defined, the interesting thing here is that the code in there doesn't run

27
00:01:58,270 --> 00:02:04,990
immediately when your script gets first executed, instead Javascript just sees that function and kind

28
00:02:04,990 --> 00:02:07,750
of registers it, stores it in memory

29
00:02:07,750 --> 00:02:15,880
you could say, you then execute the code in the function by calling that function. You call a function by

30
00:02:15,880 --> 00:02:17,160
using its name

31
00:02:17,350 --> 00:02:23,530
and then you add parentheses and if that function takes any parameters, any input which this function

32
00:02:23,530 --> 00:02:29,490
does and you can have more than one parameter separated by commas by the way but you'll also see that,

33
00:02:29,530 --> 00:02:36,490
so if a function takes parameters, you pass in a value for these parameters. Then this code gets executed

34
00:02:36,820 --> 00:02:44,140
with the data you entered as parameters and you can call such a function as often as you want, where

35
00:02:44,230 --> 00:02:48,520
ever you want in your code with different parameters

36
00:02:48,520 --> 00:02:56,030
if it takes parameters. So every function execution then runs independent from the other previous function

37
00:02:56,030 --> 00:03:02,300
executions you might have had in your code and the great thing about functions is that this now gives

38
00:03:02,300 --> 00:03:08,720
you way more flexibility because thus far with all the code we write here, we basically write code which

39
00:03:08,780 --> 00:03:13,850
always executes from top to bottom when the script is loaded which is the case when the page is loaded

40
00:03:14,300 --> 00:03:16,610
and therefore all this code runs immediately.

41
00:03:16,610 --> 00:03:24,050
Now with functions, we can define code that should run later and we can then take such a function and

42
00:03:24,050 --> 00:03:29,930
actually attach it to the buttons here to make sure that only when a button is pressed, the function

43
00:03:29,930 --> 00:03:30,590
runs

44
00:03:30,710 --> 00:03:37,130
and this then allows us to write code which doesn't run immediately but which allows us to provide some

45
00:03:37,130 --> 00:03:42,190
interaction to our website, to only run some code when something happens for example

46
00:03:42,230 --> 00:03:47,660
and of course you're not limited to only running functions when a button is pressed, you can run functions

47
00:03:47,960 --> 00:03:55,060
based on a broad variety of events or manually call them in your code whenever you need to do that

48
00:03:55,130 --> 00:03:58,600
and actually here, we are calling a function.

49
00:03:58,790 --> 00:04:04,940
I haven't really had a closer look at this yet but output result is a function I provide to you because

50
00:04:04,940 --> 00:04:10,280
it's defined here in the vendor.js file with the function keyword, then the name of the function,

51
00:04:10,280 --> 00:04:16,130
then in this case to parameters and then some code which is executed when the function is called,

52
00:04:16,160 --> 00:04:22,250
in this case this code here simply reaches out to our HTML page you could say, to our webpage and

53
00:04:22,250 --> 00:04:23,730
changes some text there,

54
00:04:23,870 --> 00:04:28,610
it displays the result of the calculation and this calculation text.

55
00:04:28,610 --> 00:04:32,570
So these two pieces here which are changed in our webpage,

56
00:04:32,570 --> 00:04:38,180
that's done by this function effectively because this function communicates with that part of the HTML

57
00:04:38,190 --> 00:04:43,300
page with the help of these constants which in turn set up connections to these places in the

58
00:04:43,310 --> 00:04:45,290
HTML code you could say.

59
00:04:45,290 --> 00:04:51,500
So this function is registered here and we can call it from that file because we import this file after

60
00:04:51,500 --> 00:04:54,470
the other file, right, and the order matters of course,

61
00:04:54,500 --> 00:04:57,800
and we have access to that function and I'm calling that function here

62
00:04:57,980 --> 00:05:04,160
as I explained on the slide by repeating its name, then adding parentheses and between the parentheses,

63
00:05:04,340 --> 00:05:09,610
I pass in the values to the function which this function can use.

64
00:05:09,620 --> 00:05:15,920
So here I pass in current result and calculation description, so I pass in the values that are stored

65
00:05:15,920 --> 00:05:21,030
in these variables and therefore, this function receives these values

66
00:05:21,080 --> 00:05:25,710
and that's important, it receives the values, not the variable names or anything like that,

67
00:05:25,790 --> 00:05:31,550
it receives the values stored in the variables and therefore in this function, we can then use these

68
00:05:31,760 --> 00:05:36,830
values to, in this case, output it in our HTML page

69
00:05:37,040 --> 00:05:40,900
but you could do whatever you want with these values.

70
00:05:41,240 --> 00:05:43,100
So let's write our own function then

71
00:05:43,190 --> 00:05:48,050
so that we get a better feeling and understanding for how functions work and what we can do with them.