Getting Started with JavaScript

JavaScript is a widely used programming language supported by all web browsers. It enables web developers to design and develop highly interactive web pages. It is a simple and easy to learn language yet powerful enough to add interfaces that are highly responsive to the user. The use of JavaScript and the two other web technologies HTML 5 and CSS, have greatly changed the way web pages are designed, developed and used.

A JavaScript program is a set of statements to be executed one after the other. These statements "tell" the computer what to do. These statements are made up of standard objects such as Array, Math, Boolean, along with their methods and properties. Various operators are also needed in order to evaluate numerical expressions, compare quantities. Control structures which allow a change of program flow within a block of code, are also needed in JavaScript. It has a large library of objects such as Maths, Boolean, Strings,... These easy to use objects, along with their properties and methods may be used to build more powerful programs.

Example of statements in a JavaScript program

JavaScript Statement
Meaning
var x,y,z,p,w; This statement declares x,y,z,p and w as variables
var x = 2; assign 2 to the variable x
var y = 4; assign 4 to y
var z = x + y; add x and y and assign the result to z (operator + is used)
var p = Math.PI; use Math.PI from library to assign π (≈ 3.14) to p (use standard object Math and its property)
if(z > p){w = 0}
else {w=1} The last two statements:compare z and p; if z is greater than p, assign 0 to w, otherwise assign 1 to w

In order to write and develop javascript programs, you need an editor. I suggest that you download the free code editor Notpad++ (click on "Notepad++ Installer" it is the easiest to install). You also need to to check your JavaScript source code for common mistakes. I suggest the online use of JavaScript Lint.

1 - Download Notepad++, install it and run javascript programs

Download Notpad++ and follow instructions to install it. Open a new file. Copy and paste the following code into the new file area; then save the file with html extension.

<!DOCTYPE html>
<html>
<body>
<script>
alert("This is my first javascript program !!");
</script>
</body>
</html>

Then click on run (as shown below) and select any of the browser in your computer. I have selected Chrome in this example as shown in figure 1 below.

Notepad++ Control Panel.

Figure 1 - Notepad++ Control Panel


The alert window with the message "This is my first javascript program !!" should appear as shown in figure 2 below

alert window .

Figure 2 - Alert Window

2 - Use "JavaScript Lint" to detect errors in a javascript program

We now examine the use of "JavaScript Lint" to check a javascript program. Click on JavaScript Lint so that it opens in another window as shown below.

JavaScript Lint.

Copy and paste the program below and run it in Notepad++, nothing happens. Let us see why

Copy and paste the javascript program shown below and paste into the blank area of "JavaScript Lint" then click on the button "Lint" located below the blank area.

<!DOCTYPE html>
<html>
<body>
<script>
alert("This is my first javascript program !!");
</scrip>
</body>
</html>


The "JavaScript Lint" reports an error somewhere in the program. The closing tag </srcip> needs a "t" at the end (line 7 below) and has to be written as </srcipt> .



JavaScript Lint.

You are know ready to run and check programs with javascript elements.

Books and References

1 - A Smarter Way to Learn JavaScript: The new approach that uses technology to cut your effort in half - Mark Myers
2 - JavaScript and JQuery: Interactive Front-End Web Development 1st Edition - Jon Duckett - ISBN-13: 978-1118531648
3 - A Smarter Way to Learn HTML & CSS: Learn it faster. Remember it longer. (Volume 2) - Mark Myers
4 - http://www.w3schools.com/js/default.asp - JavaScript Tutorial