Introduction to JavaScript

Introduction

A week has passed since my first posts and it is now time to blog about my experiences in the second week on my journey in web application development. For this week’s task we were given a Web page that contains JavaScript that acts as a Loan calculator. Our task consists in altering and adding up to the already existing script to add features to the Loan Calculator. Improving the visuals using CSS style sheets is also part of the exercise.

In the task provided, the use of the website http://jsfiddle.net/ was suggested as a working platform. This website creates a developing environment which takes in HTML, CSS and JavaScript to output the resulting webpage. The HTML, CSS and JavaScript are inputted in separate boxes and not as a single HTML file. I tried using JFiddle and did most of the JavaScript there, but I found using a text editor being better. However the idea of separating the code seemed very good therefore I separated my code into different files.

Task Development and Explanation

It was not the first time that I had peeked into some JavaScript but I had never written anything in it. For starter, I downloaded a good text editor called “Programmer’s Notebook” that can highlight keywords for many different languages. This way it is much easier to create code and find errors.

The Loan Calculator provided takes in the amount of the loan, the annual percentage rate of interest and the repayment period in years as input. The monthly payment, total payment, and the total interest paid are the results of the Calculation.

As part of the exercise we had to add the number of payments and the date when the loan ends as Outputs together with a checkbox that adds discount to the formula. Well the number of payments is easy to achieve since it only involves multiplying the payment period by the number of months in a year. The date calculation is a little trickier. Assuming the starting date is the date the computation occurs, I added up the number of months to the current date by using the formula in line 58. To make it more interesting I assumed that the repayment period in years could be a decimal. I used Math.ceil() such that if the number of payments is not a whole number, it would be converted into the next bigger Integer available. The Reason for using Math.ceil instead of Math.round is because payments are usually done in the end of the month and the extra days are considered as another month. Lines 60 and 61 show how I managed to output the date in short Date format.

Next in line was the discount. To compute the discount, I simply deduced the total discounted payment from the total undiscounted payment. The final part of the exercise suggested that each student creates a feature of his own. Since I wanted to learn JavaScript starting from the basics, I created a new textbox that takes in the amount of discount. This input box is enabled and disabled depending on the checked property of the checkbox controlling the discount. The discount cannot be greater than 50%. If so an alert is triggered. When the Discount checkbox is disabled, no discount is computed and the discount box is disabled and also cleared. Finally I downloaded a CSS template as a reference and I used it to make the webpage look alike while adding a touch of my own.

Final Comments

JavaScript is a language that uses syntax similar to other popular languages but its structure is different. It can be quite difficult to manage due to the way it manages variables. In fact in JavaScript variable types are not declared making it very easy to get confused. Another disadvantage is that JavaScript is downloaded and executed on the client’s side and therefore it is unsafe as it can be easily altered from the receiving end. On the other hand JavaScript can help create a better user experience.