SUMMARY

DISCUSSION

• "Containers" for holding data
• Declare using keyword var
  • var sName
• Can initialize when declare

  • var sName = "jobob"
• Assign value in code
  • sName = "newbob"
  • sOldName = sName
• Variable names must start with a letter or underscore
• Variable names can not have punctuation characters or spaces
• Variable names must be unique and not be the same as a reserved word

• Global variables are declared outside of functions
• Global variables an be accessed from any function
• Local variables can only be accessed locally in the function in which it is declared
• If a variable is not declared, it is automatically global. This is BAD practice.
  

innerHTML

You can refer to the contents of a <div> by using its innerHTML property. For example, as shown in the example, the letter "a" can be displayed in the div using the line:

divA.innerHTML = "<b>a</b>"

This example also illustrates how HTML tags are rendered when used in the innerHTML property of a <div>.  When you run the example, you will see that the <b> tags are not displayed; instead, the letter "a" appears as bold.

EXAMPLE - Variables and innerHTML

On line 4, a variable called a is declared and initialized to 0.  Initializing means that the variable is assigned a value.  If you do not initialize a variable, then it is undefined.  Because this variable is declared outside of all functions, it is global.  Global variables remain in memory throughout the life of the program and can be accessed by all functions.  Generally you should avoid using global variables unless you absolutely must.  

On line 6, a variable called b is declared and initialized to 0.  Because it is declared in a function, it can only be used in the function.  Also, because it is local to the function, it is cleared from memory after the function executes. 

On line 7,  variable c is declared.  It is not initialized.  On line 8, the values of the variables are displayed in an alert.  Notice that when we use the variables we do NOT put quotations around them. If you put quotations around the variables, then the variable names would be displayed since the quotations make them strings.    

On line 9, we add 1 to the value of a.  In programming, the variable on the left side of the = sign is assigned the value from the right side.  On line 9, 1 is added to the value of a.  We could have used a++ instead of a=a+1to add 1 to a.   On line 10, we add 1 to b.  On line 11 we set c equal to the value of 0.5 - a.

On line 12 we set the contents of divA to "a = [the value of a]".  Notice that we can embed HTML tags in the innerHTML of a <div> so that the a is in bold.  We can also combine strings using the + sign. Lines 13 and 14 set the innerHTML of divB and divC.   

Run the program and click on the page several times. Observe the values of a, b, and c in the alert and in the <div>'s.  Notice that the value of a keeps increasing by 1.  This is because a is global and so it remains in memory throughout the execution of the program.  Notice that the value of b remains constant in the alert and <div> no matter how many times you click on the page.  The variable b is local so it is created every time the function is called.  After the function is done executing, the variable is released from memory.   Generally we should make variables local unless we have a specific reason to make them global.  As we write more complicated programs, the drawbacks of global variables will become more apparent.

As you click on the page, notice the value of c.  When displayed in the alert, c is undefined since it was never assigned a value.  When displayed in divC, it has a value because it was assigned the value of 0.5 - a on line 11.

PRACTICE

1. Modify line 7 to initialize c to 100. Run the code and observe the value of c in the alert and <div>.
2. Modify line 8 by changing the alert to: alert(a + b + c). Run the program.  What is displayed now?  Notice that a, b, and c are bing added as numbers.
3. Modify the declarations of the variables a,b, and c so that the values are in quotes. For example, line 4 should be changed to var a = "0".  Run the program and notice the values in the alert and the <div>'s. Notice that the variables are being added as strings instead of numbers.
4. Create a function called f2().   Then add the following code to f2(): alert(a);alert(b).  Next change the onclick event in the body so that f2() is called instead of f1().  Run the program. Notice that the value of a is displayed in the alert, but an error occurs so that the alert with b is NOT displayed.  What is the error? Why is there an error? What could you do to prevent the error?
5. Add a button with an onclick event.  Create a function called operations() that is called in the onclick event and add code to:
   1. Define a variable called x and initialize it to 100.
   2. Define a variable called y and initialize it to 200.
   3. Define a variable called z and initialize it to 0.
   4. Set z to x + y and then display z in an alert.
   5. Set z to x/y and then display z in an alert.
   6. Set z to x*y and then display z in an alert.
   7. Increase z by 1 by using z++. Then display z in an alert.
   8. Display the statement z is equal to:  [value of z] in divA.

GAME DEVELOPMENT

Modify your game page (game.htm) so that the score is displayed in the <div>. The <div> should display the number of times that the target is moved and the number of hits. For example, if you hit the target 5 out of 7 times, then the <div> should display 5/7.  Modify your page as follows:

1. Add a global variable called gNumTries and initialize it to 0.
2. Add a global variable called gNumHits and initialize it to 0.
3. Add a line to the moveTarget() function to add 1 to gNumTries every time that the timer ticks.
4. Add a line to the moveTarget() function to display gNumHits and gNumTries in the <div> that keeps track of the score. 
5. Add a click event to the target that adds 1 to gNumHits when the user clicks on the target. 

Test your page.  As the target moves, the number of tries should increase.  If you click on the target, the number of hits should increase. In the next lesson we will add code to end the game.