Things to learn from this tutorial.
The first thing that we are going to learn is of
course and obvious, the concept of function.
Now the second thing that we are going to learn is about local variable and global variable
- both of them are equally important in case of JavaScript and if we do not possess
with sufficient knowledge on these things we can't proceed further.
So this is the thing that we are going to emphasize in this
tutorial, so stay tuned.
[Music..]
Hello and welcome to another new episode of learning simplified.
In today's tutorial we are going to understand the concept of functions
and the concept of local and global variables.
Now what are these functions?
Functions are practically execution of some instructions written prior into your script.
We can write safely that a function...
Is consisting of these...
Function name here; it will be requiring a function name and then,
here's the instruction, instructions or statements or whatever they are those should be
written over here or those should be appearing over here and then either in the head part
that means the head part of your web page, or in the body part where ever you wish to
have them just call them in and execute these kind of instructions those are to be
carried out here.
Now let's understand these with some proper examples.
So all we have to do first of all we are deleting this and
now let's introduce our example here.
This is the block of the function where we are practically defining the nature of the
function and the instruction to be carried out, where we have declared a variable x.
This variable x should be written, should be printed into our HTML web page.
Now into this body part we are just calling this function
name here.
Care to notice that we are practically writing it inside a script part.
Now if we press Control + S and get back to our project and reload, we can see that we
have called this same function name here into the body part of your HTML page inside a script
tag, and that is why it is now executing that particular storage variable.
Here it is.
If you change it to 6 we can see now that it is now changing into 6.
Now let's try with another example.
Deleting this off and here we have assigned a
variable for say, 6 or for say 5 against this variable x.
Now I am checking some conditions here.
If..
Remember the if else block statement that we used in our previous
tutorial.
So in this particular case we have assigned that if isNaN - isNaN is another
function which is Defined by JavaScript.
isNaN - is not a number.
And it is practically checking whether the input here is which is
in this particular case is 5 is a number or not.
If this is not a number then it will be having this kind of alert here and if it is
a number then this thing will be skipped and it will be skipping into the next segment
'else'.
We are now going back to our project and reload and we can see that the last thing that
has been executed over here is a number.
What if we provide here a string for say[Hello Cruel World]....
Now if we reload we can see that and alert popup box has been generated
which states that no number is inserted.
And that is the exact condition that we have provided over here.
We first of all have checked that is variable x possessed a
particular number and it is been checked over here into this if statement, and into this
else statement we are writing that if this thing is not happening, that means if a
number is provided against this variable x, then this part will be first checked, it is
alright and it will be passing on to the next 'else' statement and here it will be
writing as this one - it is a number.
So that is exactly what we are going to learn over
here - is a number.
Now as we have understood this particular part, if we just move ahead and provide
something more, such as this 'else-if' condition.
If this input is compared to 5, we see this input is equals to 5; then it will write
here...
And of course this will be within a new line - so we are providing it.
In this else if condition if x that means this
variable x that has been defined previously, is equivalent to 5, then 'this is a proper
number' along with the variable number which is being defined here will be written into
your HTML document.
So this is what we are expecting.
Now let's provide another else-if condition.
What happens if we give an input value which is greater than 5?
Then it should be printing....
Now we will see that another else if condition is being generated
over here.
If this variable number is greater than 5 then it will be printing a line
which is 'this number is greater than 5'.
And in this else statement we will find; so what should be the if else condition?
We have checked that the provided input whether it is equivalent to 5 and not; we have checked
whether it is greater than 5 or not; now the remaining thing is whether it is lesser
than 5 or not.
So this will be the obvious thing that will be coming up next.
So here is the position.
First of all, all we are going to do we will be late and we can
see that I printed line has been generated; the input here is provided 5.
So that is why it is providing the first line of this block
and it is 'this is a proper number' along with the variable number here.
What is the program flow of heat?
First of all when it is coming down from the top it is first checking
that there is a declaration of variable here and here x is equivalent to 5.
Now it is checking whether it is a number or a
string or anything else and if it is not a number then it is going to alert us with this
line, 'no number is inserted'.
So we now assume that this condition is been checked and
we can see that x = 5 has been provided so it finds that x is a number and that is why
this part will be skipped and it will be coming down towards the next part.
Here it finds that x is equivalent to 5 or not.
Not this condition has been checked here.
So that is why it is now printing that 'this
is a proper number' along with the variable.
As this condition is met here so all of these things those things are now becoming
irrelevant.
We do not have a need of those things.
So that is why this things will be skipped on and nothing will be produced here.
In case if we now provide here 7, pressing control + s,getting back to our project and
we can see that this number is greater than 5.
That means in the first situation it is now checking for as usual whether this
provided input is text, is a string or is a number or not; now in this particular case
it is a number so this part it becomes irrelevant.
Here comes the next part where it is not comparing with this value 5.
If this condition was met, then it had to print this
line over here.
But now this condition is not checked so after that it will come down
into the next part and it will see that whether this condition is met or not.
Now it finds that this condition is met.
x here is practically greater than 5.
As this condition is met so it is printing this particular
line here.
And in that particular case this program will not respond today's
block of statements.
If we just provide X = 1.
Let's get back to our project.
This line is less than 5.Now we can see that 'this value is less than 5'; that means all
these conditions are getting checked here and after that it is now finding that none
of these conditions are met.
So it now skips back to this else block of statement and here
it finds that this value is less than 5, this particular line.
So that is why it is now providing that 'this value is less than
5'..
Now if we provide here for say, and if we now get back and reload we can see now
that 'no number is inserted' because it is now stopped into this particular block.
All of your program is not stuck into this particular
block of statement, this if statement and that is why it is now popping you back
with this alert that 'no number is inserted'.
Now let's talk about first of all reload and you can see that we are back in business.
Now if we come back here we can see that a variable has been declared.
Here it is.
And in this body segment if we now declare the
same variable- try to print our variable over here, we can see that there is no display.
Now for say we are just cutting it off from this function block and we are pasting it
over here, now we can see that another 1 is been executed over here which is this one.
That means if we place this variable inside this function we can see that there is no
display of this particular variable, but if we place this variable outside this function,
outside the block of this function, then we can see that the same thing is been executed
over here.
To make it advantages we are now using another line break tag.
And we can see that this variable is practically being executed into
your HTML page.
So this is the main concept of local and global variable.
A global variable is that which can be used anywhere in to
your page and which is practically placed outside every kind of block of statements.
And this Global variable it becomes local if instead
of putting it outside of this function, we put it inside a block of statement.
This is a local variable which is used locally for this function which is known as num();
for if this variable has to be a global one then all you have to do you have to cut it
off from here and paste it over here.
And now if you reload again you can see that your
variable is back in business.
So from this tutorial we have learnt using a function, creating a user defined function
and how to use it, and then we have learnt about global and local variables.
So this is the part that we have to know from this tutorial
that means the concept of function and in this context I would like to add that this
function is without any parameters.
So this is the thing that we need to know from
this tutorial.
In the next tutorial we are going to know a lot more about these functions
and examples.
So stay tuned and if you guys have like this tutorial then do not hesitate
to hit the red subscribe button down below.
Hope to see you guys in our next tutorial.
Till then, bye...
[Music....]
No comments:
Post a Comment