Storing Your Data in Variables

In general, Ajax applications can use JavaScript pretty intensively, and, among other things, that means handling data like the current price of music CDs, the number of LCD monitors in stock, the temperature in San Francisco, and so on. And in JavaScript, you can store data using variables.

For example, say that you want to store the message “This data was stored in a variable” in a variable, and use that variable to display that message. You can do it by creating a variable named, for example, message, to contain that text. You create a variable using the JavaScript var statement; after you’ve created a variable and assigned a value to it, you can use the variable in statements, like this in variables.html, where the value in the message variable is assigned to the target <div> element:

 <html>   <head>     <title>Working with variables</title>     <script language="javascript">       var message = "This data was stored in a variable.";       function showMessage ()       {         document.getElementById('targetDiv').innerHTML = message       }     </script>   </head>   <body onload="showMessage()">     <h1>Working with variables</h1>     <div >     </div>   </body> </html>

image from book
Figure 2.13: Storing data in variables

Besides text, you can also store numbers in variables. For example, say you wanted to change the adder function so that it adds the two numbers passed to it in a variable named sum, and then returns the value in that variable from the function? You could do it like this:

 <html>   <head>     <title>Returning values from functions</title>     <script language="javascript">       function showMessage ()       {         document.getElementById("targetDiv").innerHTML =           "5 + 3 = " + adder(5, 3);       }       function adder(operand1, operand2)       {         var sum = operand1 + operand2;         return sum;       }     </script>   </head>   <body onload="showMessage()">     <h1>Returning values from functions</h1>     <div >     </div>   </body> </html>

There is one more point to make about variables, and that has to do with functions. Did you notice that the message variable was declared outside any function?

 var message = "This data was stored in a variable."; function showMessage () {   document.getElementById('targetDiv').innerHTML = message }

while the sum variable was declared inside the adder function?

 function adder(operand1, operand2) {   var sum = operand1 + operand2;   return sum; }

That makes message a global variable, while sum is a local variable, that is, local to the adder function. Global variables-those declared outside any function-are available anywhere in your code, and local variables-those declared inside a function-are available only in that function.

Here’s another thing to know about variables: variables created inside a function will be reset to their original values each time the function is called. Not knowing that has stymied many JavaScript programmers. If you don’t want that to happen, place the var statement to create the variables you want to use outside the function.