Javascript Practice

Introduction

In the early Internet years web pages were lifeless and static. The implementation of Javascript in browsers in early 1996 gave the initial spark that would give life and dynamism to the internet web page. Today Javascript is ubiquitous in web pages thus knowledge of Javascript is imperative amongst web developers.  Javascript also known as ECMA Script was created by Netscape early 1996 and has been gathering momentum and popularity among web developers since.

Programming has been my passion for quite some time now. Throughout my academic studies and work experience I encountered a variety of programming / scripting languages but as a programmer I always preferred a programming language whose syntax resembled that of C or Java and since Javascript resembled that style I eagerly adopted the syntax.  From my experience as a Javascript developer I enjoyed the flexibility of having a weakly typed scripting language but also paid the price for it. Being an interpreted language Javascript inherits some advantages all interpreted languages get like portability and faster development. Throughout the years I managed to find a balance between both pros and cons of this scripting language.

Javascript like most web based technologies using the DOM implementation suffers from cross-browser incompatibilities; this is partly because at some point there was no DOM specification which engraved the rules for html elements manipulation

e.g.  window.addEventListener for browsers supporting DOM and window.attachEvent for IE.

The application area for Javascript is growing each day; this is all thanks to the libraries, APIs and frameworks like jQuery which are available to web developers. These libraries have empowered web developers and in my opinion made web development more exciting than ever before.

I am used to working on Javascript using “Textpad “ but nowadays various IDEs exist like Dreamweaver and  NetBeans which include mentioned frameworks and cut the effort needed to build a project. Other IDEs are also made available on the web like jsfiddle.net which has some very good features like “TidyUp” which reformats the code to be more readable and “JSLint” which check the code for syntactical errors.

Task Overview

This task assigned this week is a Loan Calculator. We were given html with Javascript and CSS code which gave us the functionality and presentation of the Loan Calculator, next I will be giving a summary of the tasks assigned this week. The objective of this task is to practice and make use of Javascript in the underlined tasks.

• Modify HTML and CSS to make the table element more presentable
• Modify the project to display the following information:
• Total number of payments
• Loan end date (assuming the loan starts today)
• Add a checkbox which reduces the interest rate by 10%
• Add new custom feature

Implementation

Starting off the first thing that came to my mind was to segregate html, css and javascript to separate files and link the files from the HTML via the <link> and <script> tag respectively, this way code is organised and cleaner.  

Modify HTML and CSS for better presentation

For better presentation I used CSS and restructured some of the HTML. I created two classes that target the table rows, one for the row header and one for the other rows.

Table Row Styling

 The button used to compute was also given a style one for when the button is hovered over and one for the remaining states of the button.

Mouse different state styles

After applying a style to header of the page, this was the end result.

HTML after styling

Modify the project to display the following information:

• Total number of payments
•  Loan end date (assuming loan starts today)

First I went through the Javascript code to analyse how the code works. Mainly events are attached with each element which received a user input like “Amount of Loan”. The event handling the calculate() function is onChange which is only triggered when the user changes the value in the control. To include the information above I went through the calculate() function and found that the payments were already being extrapolated and so I created a new row in the information section of the payment information and by using the Document Object Model function getElementById() I accessed the respective span inside the row and used innerHTML to fill the span with the payments variable. For completeness sake I also concatenated the “Payments” literal to give metric to the value.

Total number of payments logic

Getting the Loan end date required a little more thought so for better code management I created a function called GetLastPaymentDate() which given two arguments pStartDate and pMonth the function gives the last payment date by making use of the Javascript Date object. The value is then filled into the span the same way as the total number of payments.

Get Last Payment Date function

This is the end result of this task

Total number of payment / Loan End Date

Add a checkbox which reduces the interest rate by 10%

To include this functionality first the checkbox named discountChk was created and a function attached to the onChange event handler was added named ShowHideIntRateAfterDiscount().This sole purpose of this function was to either hide or display the row showing information about the interest rate after the discount has been applied. A second function validate() was added which did the actual calculation.

Discount checkbox and onChange functions

To calculate the discount first a conditional statement was inserted to ascertain the value of the discount after which the value is then subtracted from the interest value. By using a post conditional statement I always found that code is more elegant, but one must also be cautious when doing complex post conditional statements as they are often harder to debug.

Postconditional statement to set discount value

Since the discount is subtracted from the interest the monthly payment is changed accordingly through the remainder of the function.

Discount function in effect

This image shows the Payment Information line 7 showing the interest rate after the discount

Add new custom feature

Information number reordering

Since I added the remaining interest as a row inside the information section of the table when discount checkbox was unchecked the row was hidden and thus the numbers indexing the information were not contiguous.

Showing duplicate index when checking discount check box

To resolve this issue I created a new function which is called every time the discount checkbox is checked. This function goes through all the table rows using the DOM function getElementsByTagName , check class the name of the row and since I set the class name of the rows in the payment information section as “TableRow 2” the row will still inherit the style from “Table Row” but differentiate from the rows having “TableRow” as a class name thus selecting only rows from the payment information section. To complete the function the index number which I placed in a span is re arranged to be contiguous. This can be viewed in the image placed in the previous section.

Validators

To better guide the user in using the loan calculator I created a two small function for validation. A span was placed next to each control needing validation messages and gave the span a “validator” class name. Whenever the user triggers the calculate function the validation function checks for errors like required and invalid number. If an error is found then the second function goes through each control and from the control I get the adjacent span and fill it with the notification message

Validators in effect