1. Variable Scope

The scope of a variable refers to the portions of the program where it can be directly accessed.
A variable declared within a function is called a local variable, its value is recognized only within that function, it doesn't exist out of that function. Thus, another function can declare a variable with same name, JS (JavaScript) treats the two as different variables.
The variables created out of the functions can be used everywhere in that script, inclusively inside the functions and other JS script from that HTML page.

- Let's see some examples.

1. In the next example we declare a variable "va" inside a function and then we try to use that variable outside function.
<script type="text/javascript"><!--
function ex1() {
  var va = 8;
}
document.write(va);
--></script>
- This will cause an error and prints nothing becouse the script don't knows the variable "va" outside the function ex1().

We can declare a variable with the same name outside and inside functions.
2. In the next example we use a variable "va" declared outside function ex2() and also inside it.
<script type="text/javascript"><!--
var va = 'tutorials';
function ex2() {
  var va = 'lesson';
  document.write(va+ '<br />');
}

// Calling the function
ex2();                              // lesson

document.write(va+ '<br />');         // tutorials (uses the "va" declared outside function)
--></script>
- In this code, the function ex2() declares a variable called "va" and prints its value. When you reference that variable on the next line inside the function, the interpreter first checks the local scope (the function context) to see if it has been defined. If finds this variable declared in the local scope, it uses that one instead of any others of the same name that might appear higher up in the scope chain.
- But, when the variable "va" is used outside function, the interpreter uses the value of the global variable. And the two "va" variabiles does not interfere with each other.
- The output of this script will look like this:
lesson
tutorials

If inside function we use a global variable declared outside, without explicity define it with the word "var" in local scope (inside function), the function will use and also will change the value of the global variable. As you can see in the next example.
<script type="text/javascript"><!--
var va = 5;
function ex3() {
  va += 3;            // the same as ( va = va+3; )
  document.write(va+ '<br />');
}

// Calling the function
ex3();                              // 8

document.write(va+ '<br />');         // 8
--></script>
- This will generate the fallowing output:
8
8
- In this example, you do not explicitly define (with "var") the variable "va" in function local scope, so it relies on the global scope and knows you are reassigning the global variable. When the function change its value, it is changing the value of the variable in the global scope.

2. Ussing different number of arguments

When we create a function and define the number of its arguments, we must keep them in mind when calling that function.
But, there are situations where we have to transmit a different number of arguments when we call the function, which may be lower or higher than the number of function parameters.

if you neglect to include arguments in your function call, the interpreter will not view this as a syntax error. The interpreter assigns a value of undefined (or null) to the missing arguments.
The value of "undefined" is evaluated to false when tested as a Boolean.

In such a situation we can asign a default value to the parameters, inside the function, for the case when the arguments are not transferred.
Below is presented a function that return the amount of its parameters. To be shure that the parameters are not null (or undefined) we test to see if each parameters is not defined (using the Boolean ! not), in that case we create a local variable by that name and by the time you get to the line beginning with return, every argument is defined and has a default value, if not already available.
<html>
<head>
 <title>JS Tutorials</title>
<script type="text/javascript"><!--
function addFourNumbers(a,b,c,d) {
  if (!a) a = 0;
  if (!b) b = 0;
  if (!c) c = 0;
  if (!d) d = 0;

  return a + b + c + d;
}
--></script>
</head>
<body>

<script type="text/javascript"><!--
document.writeln("1+2+3 = "+ addFourNumbers(1,2,3));
--></script>

</body>
</html>
- As you can see, the function addFourNumbers() has 4 parameters but was called with 3 arguments. This code will display the fallowing output:
1+2+3 = 6

In some cases the function can receive more arguments than its parameters. The values of additional arguments are not lost, they are stored in an Array called "arguments", this object is is a local property of all functions.
- For example, the arguments passed to a function called "setMsg" are stored in the object-like Array "setMsg.arguments".
To access an element of a typical Array you use the bracket operator [] . The arguments are in the array in the order they were passed to the function. To access the first element you would use:
                functionName.arguments[0]
The second argument can be access using:
                functionName.arguments[1]
- and so on.
You can know the number of arguments in total by looking at
                functionName.arguments.length
Following these instructions, let's rewrite the previous example, so, this time it can return the amount of any numbers of arguments.
<html>
<head>
 <title>JS Tutorials</title>
<script type="text/javascript"><!--
function addNumbers() {
  // Sets a variable that will return the amount
  var re = 0;
  // go through the arguments Array and adds every value to "re" variable
  for(var i=0; i<addNumbers.arguments.length; i++) {
    re += addNumbers.arguments[i];
  }

  return re;
}
--></script>
</head>
<body>

<script type="text/javascript"><!--
document.writeln("1+2+3+4+5+6+7+8 = "+ addNumbers(1,2,3,4,5,6,7,8));
--></script>

</body>
</html>
- This example will display:
1+2+3+4+5+6+7+8 = 36

3. Nested Functions

Because functions are first - class objects, it follows that you ’ re easily able to create functions within functions. This is known as function nesting . Consider the following example:

<script type="text/javascript"><!--
function amount2(a,b) {
  // Get the amount of 'a' and 'b'
  var re = a+b;

  // Nested function
  function multiply(x) {
    return x*x;
  }

  // Return the call of nested function "multiply()", with the variable "re" to argument
  return multiply(re);
}

document.write( amount2(3,4) ); // 49
--></script>
- As you can see, inside the "amount2()" function it's another function that is called when the amount2() return its result. First, the "re" variable stores the value of 3 and 4 (7) and pass it to the function multiply() that return the value of 7*7 (49).

4. Recursive functions

A JavaScript function can be recursive, meaning it can auto-call itself.
A good way to demonstrate the ability of the recursive function is to solve a factorial equation.
In this example we have a JavaScript recursive function that finds the factorial of a number "n" (here 8).
<html>
<head>
 <title>JS Tutorials</title>
<script type="text/javascript"><!--
function factorial(n) {
  var re;
  if (n>0) re = n*factorial(n-1);
  else if (n==0) re = 1;
  else re = null;

  return re;
}
--></script>
</head>
<body>

<form>
 <input type = "button" value = "Factorial 8" onclick="alert(factorial(8))" >
</form>

</body>
</html>
- In the browser window will display the following button: In fereastra browser-ului va apare urmatorul rezultat:
- This function check first if the "n" is greater than 0, and if so, "n" is multiplied by the result returned by auto-calling function with the argument (n-1) and stores the value in a variable, "re". When "n" reaches 0, the auto-calling ends and the function returns the final value stored in the variable "re".

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
Functions - scope, arguments and recursive

Last accessed pages

  1. Bubbles3 (8622)
  2. Butterfly Kyodai (6559)
  3. Lucky Balls (391)
  4. Get search data from URL address in JavaScript (1501)
  5. AJAX with POST and PHP (7442)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (47733)
  2. Read Excel file data in PHP - PhpExcelReader (35866)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (35489)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (31998)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (29264)