So now we got some core basics out of the way, we're able to work with some basic Javascript, with variables,
constants, operators, numbers and strings and we're outputting that here on the screen
but the calculator of course is not very responsive,
all that's getting output here is kind of hardcoded into the script here,
we're not using any user input, we're not really doing something when the user presses buttons
here and therefore this is not really a dynamic script,
instead it just runs from top to bottom when we load the page and therefore it immediately runs when
the page gets loaded
and it then does all these steps and outputs the result here, which is nice but again, which isn't
really something interactive or dynamic.
So it's time to change that
and for that, we need a brand new language feature which I haven't talked about before and that would
be functions. I like to refer to functions as code on demand,
now what do I mean with that?
A function is a language construct which you don't just have in Javascript but also in other programming
languages, which basically allows you to define some code which you then execute at a later point of
time.
You define the code in Javascript like this,
you use that function keyword, then you use any name you want for that function, then your function can
take something which is called parameters,
so some input to the function if you will and then you have the so-called function body between curly
braces which is the code you want to execute eventually.
Now as I said, this function can have these parameters,
so name in this example would be a parameter and it can also return something which this example function
here doesn't but which we'll see an action in this module.
Now when you have a function defined, the interesting thing here is that the code in there doesn't run
immediately when your script gets first executed, instead Javascript just sees that function and kind
of registers it, stores it in memory
you could say, you then execute the code in the function by calling that function. You call a function by
using its name
and then you add parentheses and if that function takes any parameters, any input which this function
does and you can have more than one parameter separated by commas by the way but you'll also see that,
so if a function takes parameters, you pass in a value for these parameters. Then this code gets executed
with the data you entered as parameters and you can call such a function as often as you want, where
ever you want in your code with different parameters
if it takes parameters. So every function execution then runs independent from the other previous function
executions you might have had in your code and the great thing about functions is that this now gives
you way more flexibility because thus far with all the code we write here, we basically write code which
always executes from top to bottom when the script is loaded which is the case when the page is loaded
and therefore all this code runs immediately.
Now with functions, we can define code that should run later and we can then take such a function and
actually attach it to the buttons here to make sure that only when a button is pressed, the function
runs
and this then allows us to write code which doesn't run immediately but which allows us to provide some
interaction to our website, to only run some code when something happens for example
and of course you're not limited to only running functions when a button is pressed, you can run functions
based on a broad variety of events or manually call them in your code whenever you need to do that
and actually here, we are calling a function.
I haven't really had a closer look at this yet but output result is a function I provide to you because
it's defined here in the vendor.js file with the function keyword, then the name of the function,
then in this case to parameters and then some code which is executed when the function is called,
in this case this code here simply reaches out to our HTML page you could say, to our webpage and
changes some text there,
it displays the result of the calculation and this calculation text.
So these two pieces here which are changed in our webpage,
that's done by this function effectively because this function communicates with that part of the HTML
page with the help of these constants which in turn set up connections to these places in the
HTML code you could say.
So this function is registered here and we can call it from that file because we import this file after
the other file, right, and the order matters of course,
and we have access to that function and I'm calling that function here
as I explained on the slide by repeating its name, then adding parentheses and between the parentheses,
I pass in the values to the function which this function can use.
So here I pass in current result and calculation description, so I pass in the values that are stored
in these variables and therefore, this function receives these values
and that's important, it receives the values, not the variable names or anything like that,
it receives the values stored in the variables and therefore in this function, we can then use these
values to, in this case, output it in our HTML page
but you could do whatever you want with these values.
So let's write our own function then
so that we get a better feeling and understanding for how functions work and what we can do with them.