JavaScript

This week I will be talking more about JavaScript. JavaScript is a prototype-based scripting language which is dynamic, weakly typed and has first-class functions. It supports object-oriented, imperative and functional programming styles.

History

The release of Netscape 2 in 1996 offered some completely new technologies which included frames and JavaScript. JavaScript was a programming language written by Brendan Eich. Released as Mocha, it could be embedded in web pages and could process numbers and modify contents of the forms within the website. The language had more than one name while in development, LiveWire and LiveScript. The script syntax matches the one of Java and it was renamed JavaScript. The way it referenced forms, links and anchors as children of the document object, and inputs as children of their parent form became known as the DOM level 0.

JavaScript was passed to the European Computer Manufacturers Association for standardization who produced the ECMAscript standard, which embodied the JavaScript core syntax, but did not specify all aspects of the DOM level 0. JavaScript 1.1, released by Netscape later that year, could also change the location of images. DOM level 0 was completed when the images were also referenced as children on the document object.

[http://www.howtocreate.co.uk/jshistory.html]

Compatibility

JavaScript can run on a variety of environment. This means that an important part of the testing is to verify the results across a range of browsers. The DOM interfaces for manipulating web pages are not part of the ECMAScript standard or of JavaScript itself. Instead the DOM interfaces are officially defined by the W3C. Also, browser implementation differs from the standard and from the way they handle JavaScript. Some browsers do not even support JavaScript.

One way to deal with these differences is to write standards-compliant code which will also be executed correctly by most browsers. Another way is to write code that checks for the presence of certain browser features and behaves differently if they are not available. Some browsers may implement the same feature with a different behaviour. If authors detect what browser is running, they might get better results when changing the behaviour of their code according to the browser. Libraries and toolkits are available which take browsers differences into account. However, scripts may also not work if users are using old or rare browsers, mobile phones, special browsers such as speech browsers for disability and also if using browsing with disabled scripting.

Security

JavaScript is not intended to replace normal security measures such as proper encryption.  It has its own security model but it is intended to protect the end user, not the website owner or the data passed between the browser and the server. As a result of the security it enforces strict limits on the author. The abilities of the owner of the web page end with the control over their own page inside the browser. Some security issues within JavaScript:

• JavaScript cannot read or write files on users’ computers
• They are not allowed to interact with pages originating from other websites.
• JavaScript is not allowed to set the value attribute of a file input. It will not be allowed to use them to upload files without permission.
• JavaScript cannot access the cookies or variables from other web pages.
• JavaScript cannot read what locations a user has visited.

[http://www.howtocreate.co.uk/]

JavaScript Syntax

JavaScript is a case sensitive language. First of all, JavaScript must be called from the page running it. It might be embedded in the HTML file between the <script> and </script> tags. It can also be implemented by storing the JavaScript in a separate file. This is neater if the JavaScript file is very large. The way to use JavaScript in a separate file is like this: <script src=”code.js”></script>.

Most of the code in JavaScript is written within functions as it will be easier to call the functions based on events, such as mouse click, button click and more. Below is a very simple function that opens a popup windows saying “Hello World”.

function popup() {

alert("Hello World")

}

Variables are created using the syntax below:

var variablename = “value”;

In JavaScript, the variables are not assigned a type. This means that a variable can be a string and can also be an integer, for example.

JavaScript Arithmetic Operators and Comparison Operators

Operators are very similar to other languages. They are common in both operation and syntax. Arithmetic Operators include Addition, Subtraction and Modulus.  Comparison Operators include Greater Than, Smaller Than and Not Equal To.

Operator	English	Example
+	Addition	2+4
-	Subtraction	4-2
*	Multiplication	4*7
/	Division	10/5
%	Modulus	45/4

Table 1: Arithmetic Operators in JavaScript

Operator	English	Example	Result
==	Equal To	X == y	False
!=	Not Equal To	X != y	True
<	Less Than	X<y	True
>	Greater Than	x>y	False
<=	Less or Equal To	X<=y	True
>=	Greater or Equal To	x>=y	False

Table 2: Comparison Operators in JavaScript

Events

JavaScript allows the author of a webpage to create dynamic pages. This is mainly done by using events to trigger actions within the website. These include: on mouse click, the page loading, hovering over a spot, and keystrokes.

Loan Calculator using JavaScript

I created this loan calculator using HTML and JavaScript. The user has to input the amount of the loan, the annual rate of interest and the repayment period in years. When the Compute button is clicked, the page gives information about the monthly payment, the total amount paid when the loan is paid to the full, the total amount in interests, the total number of payments, and the date when the loan ends.

Another feature of this calculator is that a person may be eligible to a 10% discount. A checkbox is available to indicate if a person is eligible or not. If the person is eligible for discount, the calculator also calculates the discount (up to 10%). There is still a minimum of 1% to be paid. This means that if the interest is 6%, the user still has to pay interest at a rate of 1%. However if the interest is, for example 15%, then the user will pay at a rate of 5%.

Figure 1: The figure above shows the code checking if the user is eligible for discount

The figure above shows the if-condition checking if the checkbox is checked or not. Also, if the check box is checked and the interest is less than 10, it sets the value of the interest rate to 1% which is the minimum. If he checkbox is checked and the interest is more than 10%, 10% is subtracted from the interest rate.

Figure 2: The figure above shows the code calculating the interest

With the help of CSS, I did some styling to give a background colour to the table, and also to give some colour to the text.

Figure 3: The figure above show the empty calculator

The first example to test our calculator will be to use an example with an amount of 4000, an interest of 6.5% and a repayment period of 4 years. The results can be seen in the figure below.

Figure 4: The figure above shows the first example of the calculator.

Another example is to use a higher amount such as 10000 as the amount, 25% as the percentage and 10 years of repayment period. This time, we test the eligibility for discount. We can see that the interest is decreased by 10%.

Figure 5: The figure above shows the second example with Discount.

Using these examples we can see that the JavaScript language is fairly easy to use to create client side scripting which is very efficient, provided we use a method to make the code work on the majority of the browsers.