Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - JavaScript: Functions

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Scope Rules - JavaScript(JS)

The attributes of variables include name, value and data type (e.g., string, number or boolean). We also use identifiers as names for user-defined functions. Each identifier in a program also has a scope.

Scope Rules

 

Chapters 6–8 used identifiers for variable names. The attributes of variables include name, value and data type (e.g., string, number or boolean). We also use identifiers as names for user-defined functions. Each identifier in a program also has a scope.

 

The scope of an identifier for a variable or function is the portion of the program in which the identifier can be referenced. Global variables or script-level variables that are declared in the head element are accessible in any part of a script and are said to have global scope. Thus every function in the script can potentially use the variables.

Identifiers declared inside a function have function (or local) scope and can be used only in that function. Function scope begins with the opening left brace ({) of the function in which the identifier is declared and ends at the terminating right brace (}) of the func-tion. Local variables of a function and function parameters have function scope. If a local variable in a function has the same name as a global variable, the global variable is “hidden” from the body of the function.

The script in Fig. 9.8 demonstrates the scope rules that resolve conflicts between global variables and local variables of the same name. This example also demonstrates the onload event (line 52), which calls an event handler (start) when the <body> of the XHTML document is completely loaded into the browser window.

      <?xml version = "1.0" encoding = "utf-8"?>

 

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

      <!-- Fig. 9.8: scoping.html -->

 

      <!-- Scoping example. -->

 

      <html xmlns = "http://www.w3.org/1999/xhtml">

 

      <head>

 

      <title>A Scoping Example</title>

 

        <script type = "text/javascript">

        <!--

 

        var x = 1; // global variable

        function start()

{

var x = 5;   // variable local to function start

                  

document.writeln( "local x in start is " + x );

                  

functionA();         // functionA has local x

functionB();         // functionB uses global variable x

functionA();         // functionA reinitializes local x

functionB();         // global variable x retains its value

                  

document.writeln(

"<p>local   x in start is " + x + "</p>" );

} // end function start

                  

        function functionA()

{

var x = 25; // initialized each time

          // functionA is      called

                  

document.writeln( "<p>local x in functionA is " +

          x + " after entering functionA" );

++x;

document.writeln( "<br />local x in functionA is " + x + " before exiting functionA" + "</p>" );

} // end functionA

      function functionB()

{

document.writeln( "<p>global variable x is      " + x +

" on entering functionB" );             

x *= 10;               

document.writeln( "<br />global variable         x        is " +

x + " on exiting functionB"  + "</p>"        );      

      } // end functionB

      // -->

 

      </script>

 

      </head>

 

      <body onload = "start()"></body>

 

</html>


Fig. 9.8 | Scoping example.

Global variable x (line 12) is declared and initialized to 1. This global variable is hidden in any block (or function) that declares a variable named x. Function start (line 14–27) declares a local variable x (line 16) and initializes it to 5. This variable is output in a line of XHTML text to show that the global variable x is hidden in start. The script defines two other functions—functionA and functionB—that each take no arguments and return nothing. Each function is called twice from function start.

 

Function functionA defines local variable x (line 31) and initializes it to 25. When functionA is called, the variable is output in a line of XHTML text to show that the global variable x is hidden in functionA; then the variable is incremented and output in a line of XHTML text again before the function is exited. Each time this function is called, local variable x is re-created and initialized to 25.

Function functionB does not declare any variables. Therefore, when it refers to vari-able x, the global variable x is used. When functionB is called, the global variable is output in a line of XHTML text, multiplied by 10 and output in a line of XHTML text again before the function is exited. The next time function functionB is called, the global vari-able has its modified value, 10, which again gets multiplied by 10, and 100 is output. Finally, the program outputs local variable x in start in a line of XHTML text again, to show that none of the function calls modified the value of x in start, because the func-tions all referred to variables in other scopes.


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.