Home

ABCs of Programming Progressively

Enhance Code

Once you have completed the first phase of your programming and you have everything working, it is now time to enhance the code for future use, to make it better or more flexible.

A. Comment Code

Particularly true for beginner developers, it is important to comment your code so that if you or someone else needs to refer to it several months later to determine what was done or why it was done. You will find out that the more proficient you become at programming, the less you will have a tendency to comment your code because you will know the code better and you will make your code more self-commenting through the use of descriptive names of variables, functions, methods, etc.

  1. Add comments to your code as you see fit. A few have been added for your reference:
<script>
function addNumbers()
{
   /*Store references of the three text fields in variables so that 
   they don't have to be writing in a long format later in the code.*/
   var firstNum = document.getElementById("firstNumber").value;
   var secondNum = document.getElementById("secondNumber").value;
   /*The built-in Number() method was used to convert the string values 
     to text values. Also, the two text fields results were added together 
     and store as the value property of the third text field (total). */
   document.getElementById("total").value = Number(firstNum) + Number(secondNum);
   //alert(typeof(firstNum));
   //alert(typeof(secondNum)); 
   //alert(typeof(sum));
}
</script>

NOTE: Comments are not executed when the program runs, so you can add as many as you like.

  1. Save the file and preview it in a browser.

    TEST RESULT:     You should see that your code works just the same with or without comments.

B. Make Code Flexible

As a beginner developer you should always strive to make your code more flexible by separating the code from the tag elements, using functions, etc.

It is best practice not to have code "coupled" with the tag elements on the page. One way to decouple your code is to use event listenering instead of simply events attributes.

  1. Remove the onClick attribute and its value (i.e., onClick="addNumbers()") from the <button> element and add an id attribute: 
<button id="addNumberButton">Add Numbers</button>

IMPORTANT CONCEPT TO REMEMBER: Instead of invoking the addNumber() function from the button, an addEventHandler method will be used so that it will add this functionality to the <button> tag from a distance so the code is made more flexible. For example, now you can cut and paste the code in the script tag and paste it in another document and link it to a different element by using the tag id attribute. Let's see how this works.

  1. Add a variable to store a reference of the button in it and then add an addEventListener to the variable to "listen" for a click event and when one occurs run the addNumbers function:
    <script>
var addButton = document.getElementById("addNumberButton")
addButton.addEventListener("click", addNumbers)
function addNumbers()
{
// Code deleted here so that you could see structure better. 
    // DO NOT delete code in example.
}
</script>
  2. Save the file and preview it in a browser.

    TEST RESULT:     You should see that it works the same. However, the code is more flexible because now you can copy the code with the <script> tags and paste it into another document and call a total different object.

    NOTE: Once you have completed the the basic needs of the project, there are times when you will discover that you need to make some additional enhancements. For example, if you type characters into the first two text fields, you will get an NaN error (Not A Number) in the third field. This is where you will realize that you have to create some validation code to prevent this from happening.

C. Add New Features

Once you have completed the basic needs of your project, you may want to add some additional features or improvement to your project. For example, you may want to add the ability to:

  1. multiple or divide the two numbers.
  2. determine if the number is within a certain range
  3. determine if the number is negative
  4. and more...
< Previous Topic     Next Topic >