In the previous lesson, we learned how to execute JavaScript code in our page.
Now we're going to dive deeper into the JavaScript syntax, which are the rules that define how we should
write JavaScript code.
The first important thing to understand is why we had to use parentheses.
So we use parentheses because the alert is a function.
There's something in JavaScript called functions and methods which are blocks of code that we can create
and give them a name so we can execute them later.
JavaScript has some built in functions, and one example is the alert function.
We can also create our own functions.
So I'm going to create one real quick just so we use as an example.
But later in the course, we're going to have a dedicated lesson about functions.
But to create a function, I would use the function keyword and I can give it a name.
For example, I can name this function test alert.
Remember that JavaScript is case sensitive.
So when I execute this function later, I need to type it exactly the way I did here.
So with all lowercase except for this letter, which is uppercase, when you are creating functions,
you can't use names that are already used by the JavaScript built in functions.
So for example, we can't create our own function called alert because this function already exists.
We also can't use reserved words.
So for example, function is a reserved word that's used to create a function.
So we cannot create a function with this name.
Now test alert is a new name.
There is no built in JavaScript function with this name, so we can use it for our custom function.
Then we open and close parentheses and inside them is where we're going to place the arguments for this
function.
For this first test, let's make this function without any argument.
We still need the open and closing parentheses.
We just leave it blank.
In this case now we are going to open and close curly braces.
Now it's a good practice to break some lines, so we write the content of our function inside here.
So every time you see open and closing curly braces in JavaScript, this means this is a block of code.
In this case, this is the block of code that it's going to be executed every time we invoke this function.
So we can type many different things here that will be executed.
When we call this function, for example, we can get this alert statement and we can write it inside
here.
We can also write more statements.
And once this function is executed, all these lines of code will be executed.
So we can type something like test one.
Test to.
And we just created our first function.
So remember, function is the key word that we need to use to start a function followed by the name
of the function, which has to be a unique name.
It can't be a name already used by JavaScript, then open and close parentheses.
Here is where we're going to place arguments.
I'm going to show you an example with an argument in a second.
And inside curly braces is where we are going to type the code that is going to be executed by this
function.
Now, if we save this and go back to the page, nothing is going to happen yet.
This is because we just created the function.
Now, if we want to execute this code, we need to execute the function.
And the way we do this is by using the name we just created and open and close parentheses to execute
the function.
So this is why we were using parentheses in the alert function.
Every time we want to execute a method or a function, we are going to have to use the open and close
parentheses.
Here we can use the semi colon to end this statement and once we do this, we can save this and go back
to the web browser.
And when we refresh the page, we see the test one, we click okay, and now we see the test.
Two, we click okay, and then the page finishes loading.
Now that we have created this function, we can execute it any time we want in the code.
So this is a good way of storing a piece of code or a sequence of statements that can be executed any
time you need to execute them.
So this is our custom made function, we just created it.
And JavaScript also has the built in functions like the alert function we used in the previous lesson.
Now, in the beginning of this lesson, I spoke about the parentheses.
So when we create functions, we can pass arguments, and arguments are useful, so we make the function
dynamic.
Right now this function is static because every time we executed it is just going to send test one and
then test two.
But if we want to make this dynamic, we can create an argument and the argument can be, for example,
a message.
And now, instead of sending this text, we can send the message.
And now how do we define what message is this?
Every time we execute the function, we can pass any message we want.
And the reason why we use quotation marks for that is because we are sending text every time we work
with text in JavaScript, which is a data type called string, we have to use the quotation marks.
So here we can send text.
One, two, three.
We can save this.
And when we load the page, we can see the message right here and now.
Our function is dynamic.
We can use the same function to send different messages so we can try this one and then we can send
the message for the function.
Let's do four or five six.
And we don't have to change the function.
We can just change the argument that we are passing to this function.
So when we go back there now we have one, two, three, and we also have four, five, six.
Now, if we want to do math operations, we can also do that.
For example, we can do four plus five.
As the argument of this function.
We click save, we go back there.
Now we see test one, two, three, and we see nine.
This is because JavaScript can do math operations.
So we are adding four and five, which is nine.
And then when we enter the function, JavaScript is sending the result of that math operation through
the alert function.
So remember that when we were in the console, we could type the operations directly here like four
plus five and we would see the result below.
But right here if we just type for.
Plus five.
We're not going to see anything because even though JavaScript will do the calculation, we need to
tell JavaScript.
Where do we want to show this?
So one place that we can show this is in an alert box, we can also send it to HTML element, which
is something that we are going to do later in the course.
And there is also one important function which is called console dot log and the dot that is a new thing
that we are seeing right here.
We will also be clear to you when we speak about the objects.
So an object is a data type in JavaScript and objects can have methods which are the same thing as functions.
So the console object has a method called log, which works exactly as a function, which means that
we can pass any message we want as an argument.
So let's send some some text.
We can also send math operations, which in this case won't need the quotation marks.
But if we want to send a piece of text, we need to use the quotation marks, which, by the way, can
also be single quotation marks like this.
This is going to work exactly the same way.
So let's send test.
Message to the console.
So right now, we don't need our function anymore.
I'm going to delete it from here.
I was just making a test to show you how you create a function.
Now we're going to use another builtin function, which is the console.log function.
And let's see what this function does.
I'm going to save this.
And when I go back to the page, you can see that now we don't have any alert because this function
does not show an alert box.
What this function does is sending something to the console.
So this is extremely useful for us developers to send stuff to the console so we understand what's going
on with our JavaScript code.
This is not for the user to see.
This is only for US developers, and during the course you will see that we are going to use the console
a lot.
So we know the values that we are working with.
Now, again, going back there, if we want to send a math operation on to the console, we can just
do four plus.
Five.
Save this.
And when we go back there, we see the results showing in the console.
So this is something important.
Every time you have a value, a message, or the result of a calculation in JavaScript, you need to
decide where do you want to send this?
So we can send an alert box, we can send it to the console.
And even more importantly, we are going to send these values to our HTML elements.
And this is what is going to make our page dynamic.
For example, when we do this low code time element, we are going to get the current hour and send
this value right here.
Then the same thing for the minutes and same thing for the seconds.
So this is how we are going to do stuff with JavaScript and show them on the page.