More HTML and Introduction to JavaScript

JavaScript

This week’s topic focuses on JavaScript, the currently most used web scripting tool. Although the name suggests that they are, JavaScript has nothing to do with Java.  JavaScript is an object-based, scripting language used by HTML authors to make web pages interactive and dynamic.

Being an interpreted language, JavaScript requires no special program to be able to create usable code, and is supported by most web browsers but the code is visible to the user and could be easily modified if the user knows the syntax of JavaScript, which one could easily learn since it’s licence-free and a lot of material can be found on the web to learn it.


To create JavaScript, you just need to create the <script> tag in your HTML file and code all your scripts inside that tag. It is very simple to do stuff such as:

• React to Events - A JavaScript can be set to execute when something in the webpage happens, like when a user clicks on an HTML element.
• Read and Write the content of HTML elements.
•  Used to Validate Data before its submitted to the server, releifing it from extra processing (although server side validation is extremely important since it’s so easy to modify JAVAscript from the client).
• Used to detect the visitor’s browser so that depending on the browser detected load the page specifically designed for that browser because even though most syntax is universal, there is always that little bit of functions which have differing naming across different browsers such as the window.addEventListener used for browsers supporting DOM (more on this on the next blog) and window.attachEvent used for IE.
• Can be used to create cookies to store and retrieve information on the visitor’s computer.

Task

This week’s task was to modify some code given to us, so that we learn to use the basics of JavaScript. We were given some simple HTML and JavaScripts which gave us simple functionality of a Loan Calculator.  The Task involved that we edit the HTML and CSS of the code to make the table more presentable, modify the JavaScript to include the total amount of payments for the loan and the date that the loan will end (assuming the loan starts the date the calculation is done). Also we had to add a checkbox which when checked would reduce the interest rate by 10%

First I analysed the already existing JavaScript, to understand how the existing code was working. Since there wasn’t too much code I didn’t feel the need to separate the HTML, CSS and JavaScripts into different file and then link them.

The existing code was fairly simple, basically when the user fills in 3 fields with the loan amount, the interest rate and the payment period of the loan, then the user clicks the calculate button which will trigger the JavaScript which will gather the data inputted by the user in the 3 fields provided and calculate the monthly repayment, the total cost of the load and the total amount of the interest to be paid using some simple mathematical formula. Then the JavaScript will display the results of the calculation by changing the innerHTML property of the elements connected to the variables holding the results in the JavaScript.

I started off by giving the some styling to the tables. First, I created a header with a title and gave it a background image as a header. I left the background of the body as white but I gave the table holding the data a ridge border with a very thin width, I gave the background a light green color and I changed the font of the content to Verdana. I could have fiddled more since 

styling is so much vast but since this task was to focus on JavaScript I stopped here.

Next, I edited the HTML to add 2 more fields in the table under the current results. These were kept in the span class “result”. I kept the same HTML code as previous so that any styling given to the previous results would still be kept in the new ones. I also added a checkbox to be used when the user will be eligible for a discount.

After adding the fields I when to the JavaScript and modified the calculate method so that the new results will be shown along with the already existing ones. The number of payments was already being calculated in the method so to display this all I had to do was to create a variable, connected it to the span element I created in the HTML by ID and assign it to the no of the payment to the created variable.

For the last payment date I had to do a bit more work, first I created a date variable and to get the system date I used the getMonth(), getDate() and getFullYear() methods. Then to calculate the end date I added the value to the years taken from the form by first multiplying the value by 1 so that the years would not be added as a string but as an integer instead.

The last thing to go was to calculate the discount when the checkbox was ticked. An IF statement was created before any of the results are calculated. The IF statement was done only when the value of the checkbox was 1 (meaning it was ticked). Inside this statement there was to get 10% of the value of the interest given in the form and then the interest was calculated by first reducing the interest given in the form by the 10% found just now. If the checkbox is not ticked, the interest would be calculated normally.

Here is a screenshot of the form with all the modifications made:

That’s it for this blog, the next entry will focus on more JavaScript.