Best way to learn JavaScript programming for beginners

JavaScript is a popular client-side programming language. It is also known as ECMAScript. ECMAScript was first introduced in 1997. Before we explore more into JavaScript first let us know how JavaScript help in web development. In client server architecture JavaScript helps to reduce http requests by performing possible operations in client end. Let’s talk about an employee registration form. Using this form to register an employee we need to provide valid data before form submission. It can possible user will submit the form with blank fields or invalid data. To protect this we need to check user data before form submission.

It can be done using server. But to do this we have to play with response & request mechanism. Which is time consuming & can increase server load. That’s why client script, to check whether data filed or user trying to submit the form with blank fields it is better to use client resource rather then sending a request to server. Like this there are several cases where client-script is more useful then server-script. Are you looking to learn such a powerful client-script? If so, this is the right place for you. Let us learn JavaScript. I know you will enjoy while learning.

How to write JavaScript in a HTML page?

In a HTML page JavaScript can wrote using 2 ways. One is inside <script> tag & other one is using js file. Look at the examples below.

<script type="text/javascript">
document.write('JavaScript Hello World Program');
</script>

OR

<script type="text/javascript" src="hello-world.js"></script>

Keep remember if you will not add type=”text/javascript” still your script will run. But it is a best practice to use type with script tag. Compare to script block using js files you can modularize your code. I mean if you are designing a form validation related scripts you can keep in validation.js & dynamic theme related scripts you can keep in theme.js.

How to comment in JavaScript?

During development code commenting is an essential skill. Think once in a thousand line program how much time you required to understand the flow. In this matter comment helps. By looking comments you can take less time to understand where which changes are required. In JavaScript we can do comment using 2 ways. To comment a single line of text we need to add two back slash (//). To comment multiple lines syntax is /* ……. */. Look at the example below.

<script type="text/javascript">
// This is a Single line Comment.
document.write('JavaScript Single line Comment.');
/* This is a Multi-line Comment.
You can add more Comments here... */
document.write('JavaScript Multi-line Comment.');
</script>

How to display data using JavaScript?

JavaScript doesn’t have any in-built print or display function. There are 4 ways through which you can display data to outside from a JavaScript function. window.alert(), document.write(), innerHTML & console.log().

JavaScript Data Types, Variable & Scope

JavaScript is a loosely coupled programming language. It has three primitive data types. Number, String & Boolean. To declare a variable in JavaScript we use syntax var. For an example if we are declaring var x = 6; then here x belongs to Number data type. In case we are declaring var x = “6”; here x belongs to String data type. In the similar way if we declare var x = true or var x = false, here data type of x is Boolean.

JavaScript is a case sensitive programming language. While declaring a variable stay aware variable names are case sensitive. variable “MyVar” is not same as “myVar”.

JavaScript variables are only two scope Local & Global. Global variable is accessible to all functions while Local variable is specific for that function inside which it is declared. Look at the example below.

<script type="text/javascript">
<!--
//Global variable
var myVar = "this is a global variable.";
function variablescope( ) {
//Local variable
var myVar = "this is a local variable.";
document.write(myVar);
}
//-->
</script>

JavaScript Operators

JavaScript supports various types of operators. These are Arithmetic Operators, Comparison Operators, Logical Operators, Assignment Operators & Conditional Operators.

Arithmetic Operators

Arithmetic Operators are used to perform arithmetic operations. In JavaScript arithmetic operators are + (Addition), – (Subtraction), * (Multiplication), / (Division), % (Modulus Division), ++ (Increment) & – – (Decrement). Addition used to add two integer values. Similarly subtraction, multiplication & division works for numeric values. Modulus Operator and remainder of after an integer division. Increment operator increase the value by one. If the value of variable A is 5 by adding increment operator A++ value is equal to 6. Similar to increment operator decrement operator decrease the value by one.

Comparison Operators

JavaScript supports 6 Comparison Operators. These are == (Equal), != (Not Equal), < (Less than), > (Greater than), <= (Less then Equal to) & >= (Greater then Equal to). Let’s talk about two variable X & Y. I assigned their values X = 10 & Y = 20. In this case equal operator (X == Y) returns false. X != Y returns true. X < Y returns true. X > Y returns false & So on. Keep remember Comparison Operators returns Boolean results.

Logical Operators

JavaScript supports 3 logical operators AND (&&), OR (||) & NOT(!). Where both the conditions need to valid we can use AND operator, if from both conditions at least one condition need to valid in this scenario we can use OR. While the condition is not valid in this case we can use NOT operator.

Assignment Operators

There are 6 Assignment Operators available in JavaScript =, +=, -=, *=, /= & %=. = operator helps to assign values from right side operand to left side operand. For an example if var Y = X; then during execution Y will hold X value. += It adds right operand value to the left operand & store the result to left operand. -= It subtracts right operand value from the left operand & store the result to left operand. *= It multiplies right operand value with the left operand & store the result to left operand. /= It divides left operand value with the right operand & store the result to left operand. %= It takes modulus using two operands & assign the result to left operand.

Conditional Operators

Conditional Operator is generally the ?:. The syntax is If Condition is true ? Then value X : Otherwise value Y.

If…Else Statement in JavaScript programming

I can say if else is the primary conditional statement for any programing language. Let’s assume you have a variable X which hold the value of employee age. How can you display a message for employees greater then 50 plus. Here if else helps to take the decision. Look at the example below how to use if else in JavaScript program.

<script type="text/javascript">
<!--
var age = 52;
if( age > 50 ) {
document.write("<b>This is an old Employee.</b>");
}
//-->
</script>

Note: JavaScript supports nested if else.

Switch Case in JavaScript programming

Compare to nested if else switch case is a very similar conditional statement. If you have less then 8 to 10 conditions in this matter it’s not a problem which conditional statement you prefer to use. You can choose if else or switch case. But if you have more then 10 conditions in your function it is better to choose switch case. Compare to if else switch case gives better performance. Look at the example below how to use switch case in a JavaScript program.

<script type="text/javascript">
<!--
var level='A';
document.write("Example of switch case<br />");
switch (level)
{
case 'A': document.write("This is a Good job.<br />");
break;
case 'B': document.write("This is a Pretty good job.<br />");
break;
case 'C': document.write("You are Passed.<br />");
break;
default: document.write("Default level for unknown value.<br />")
}
//-->
</script>

A switch case comes with cases. Refer to the above example Case ‘A’: mean when the level is A at that time this condition will execute. After each block of case execution switch case restricted to provide break so the next block of code will not execute. Finally if no condition will satisfy switch case provides a default case. I mean in the above example if the level value is not equal to A, B or C then the default: part will execute.

While Statement in JavaScript programming

During writing a program some time we required until the condition is satisfied we need iterations. In this case while is useful. Look at the example below how to use while statement in JavaScript program.

<script type="text/javascript">
<!--
var count = 0;
document.write("Example of while Loop" + "<br />");
while (count < 12){
document.write("Print Current Count : " + count + "<br />");
count++;
}
//-->
</script>

For loop in JavaScript programming

For loop starts from a value we initialize & the iterations goes up to the condition satisfied. Using for loop we can increase or decrease the conditional value from the initial value. Syntax for for loop is as below.

for (initialization; test condition; iteration statement){
//Statement(s) to be executed if test condition is true
}

Let’s talk about a case where I want a loop where count will start from 0 & it will go up to less then 10. Look how I did this using for loop JavaScript.

<script type="text/javascript">
<!--
var count;
document.write("Example of for Loop" + "<br />");
for(count = 0; count < 10; count++){
document.write("Printing the Count value : " + count );
document.write("<br />");
}
//-->
</script>