JavaScript

JavaScript is a lightweight, interpreted programming language with object-oriented capabilities that allows you to build interactivity into otherwise static HTML pages.
Key Points
It is Lightweight, interpreted programming language.
It is Lightweight, interpreted programming language.
It is designed for creating network-centric applications.
It is designed for creating network-centric applications.
It is complementary to and integrated with Java.
It is complementary to and integrated with Java.
It is complementary to and integrated with HTML
It is complementary to and integrated with HTML
It is an open and cross-platform
It is an open and cross-platform
JavaScript statements are the commands to tell the browser to what action to perform. Statements are separated by semicolon (;).
Example of JavaScript statement:
document.getElementById("demo").innerHTML = "Welcome";
Following table shows the various JavaScript Statements −
JavaScript supports both C-style and C++-style comments, thus:
Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript.
Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript.
Any text between the characters /* and */ is treated as a comment. This may span multiple lines.
Any text between the characters /* and */ is treated as a comment. This may span multiple lines.
JavaScript also recognizes the HTML comment opening sequence <!--. JavaScript treats this as a single-line comment, just as it does the // comment.-->
JavaScript also recognizes the HTML comment opening sequence <!--. JavaScript treats this as a single-line comment, just as it does the // comment.-->
The HTML comment closing sequence --> is not recognized by JavaScript so it should be written as //-->.
The HTML comment closing sequence --> is not recognized by JavaScript so it should be written as //-->.
Example
<script language="javascript" type="text/javascript">
   <!--

      // this is a comment. It is similar to comments in C++

      /*
         * This is a multiline comment in JavaScript
         * It is very similar to comments in C Programming
      */
   //-->
<script>
Variables are referred as named containers for storing information. We can place data into these containers and then refer to the data simply by naming the container.
Here are the important rules that must be followed while declaring a variable in JavaScript.
In JavaScript variable names are case sensitive i.e. a is different from A.
In JavaScript variable names are case sensitive i.e. a is different from A.
Variable name can only be started with a underscore ( _ ) or a letter (from a to z or A to Z), or dollar ( $ ) sign.
Variable name can only be started with a underscore ( _ ) or a letter (from a to z or A to Z), or dollar ( $ ) sign.
Numbers (0 to 9) can only be used after a letter.
Numbers (0 to 9) can only be used after a letter.
No other special character is allowed in variable name.
No other special character is allowed in variable name.
Before you use a variable in a JavaScript program, you must declare it. Variables are declared with the var keyword as follows −
<script type="text/javascript">
   <!--
      var money;
      var name, age;
   //-->
</script>
Variables can be initialized at time of declaration or after declaration as follows −
<script type="text/javascript">
   <!--
      var name = "Ali";
      var money;
      money = 2000.50;
   //-->
</script>
There are two kinds of data types as mentioned below −
Primitive Data Type
Primitive Data Type
Non Primitive Data Type
Non Primitive Data Type
The following table describes Primitive Data Types available in javaScript
Can contain groups of character as single value. It is represented in double quotes.E.g. var x= “tutorial”.
Contains the numbers with or without decimal. E.g.  var x=44, y=44.56;
Contain only two values either true or false. E.g. var x=true, y= false.
Variable with no value is called Undefined. E.g. var x;
If we assign null to a variable, it becomes empty. E.g. var x=null;
The following table describes Non-Primitive Data Types in javaScript
Function is a group of reusable statements (Code) that can be called any where in a program. In javascript function keyword is used to declare or define a function. 
Key Points
To define a function  use function keyword followed by functionname, followed by parentheses ().
To define a function  use function keyword followed by functionname, followed by parentheses ().
In parenthesis, we define parameters or attributes.
In parenthesis, we define parameters or attributes.
The group of reusabe statements (code) is enclosed in curly braces {}. This code is executed whenever function is called.
The group of reusabe statements (code) is enclosed in curly braces {}. This code is executed whenever function is called.
Syntax
function functionname (p1, p2) {
   function coding...
}
Operators are used to perform operation on one, two or more operands. Operator is represented by a symbol such as +, =, *, % etc.  Following are the operators supported by javascript −
Arithmetic Operators
Arithmetic Operators
Comparison Operators
Comparison Operators
Logical (or Relational) Operators
Logical (or Relational) Operators
Assignment Operators
Assignment Operators
Conditional (or ternary) Operators
Conditional (or ternary) Operators
Arithmetic Operators
Arithmetic Operators
Following table shows all the arithmetic operators supported by javascript −
Following table shows all the comparison operators supported by javascript −
Following table shows all the logical operators supported by javascript −
Following table shows all the assignment operators supported by javascript −
It is also called ternary operator, since it has three operands.
Control structure actually controls the flow of execution of a program. Following are the several control structure supported by javascript.
if ... else
if ... else
switch case
switch case
do while loop
do while loop
while loop
while loop
for loop
for loop
The if statement is the fundamental control statement that allows JavaScript to make decisions and execute statements conditionally.
Syntax
if (expression){
   Statement(s) to be executed if expression is true
}
Example
<script type="text/javascript">
   <!--
      var age = 20;
      if( age > 18 ){
         document.write("<b>Qualifies for driving</b>");
      }
   //-->
</script>
The basic syntax of the switch statement is to give an expression to evaluate and several different statements to execute based on the value of the expression. The interpreter checks each case against the value of the expression until a match is found. If nothing matches, a default condition will be used.
Syntax
switch (expression) {
   case condition 1: statement(s)
                    break;
   case condition 2: statement(s)
                    break;
   ...
   case condition n: statement(s)
                    break;
   default: statement(s)
}
Example
<script type="text/javascript">
   <!--
      var grade='A';
      document.write("Entering switch block<br/>");
      switch (grade) {
         case 'A': document.write("Good job<br/>");
            break;
         case 'B': document.write("Pretty good<br/>");
            break;
         case 'C': document.write("Passed<br/>");
            break;
         case 'D': document.write("Not so good<br/>");
            break;
         case 'F': document.write("Failed<br/>");
            break;
         default:  document.write("Unknown grade<br/>")
      }
      document.write("Exiting switch block");
   //-->
</script>
The do...while loop is similar to the while loop except that the condition check happens at the end of the loop. This means that the loop will always be executed at least once, even if the condition is false.
Syntax
do{
   Statement(s) to be executed;
} while (expression);
Example
<script type="text/javascript">
   <!--
      var count = 0;
      document.write("Starting Loop" + "<br/>");
      do{
         document.write("Current Count : " + count + "<br/>");
         count++;
      }while (count < 0);
      document.write("Loop stopped!");
   //-->
</script>
This will produce following result −
Starting Loop
Current Count : 0
Loop stopped! 

The purpose of a while loop is to execute a statement or code block repeatedly as long as expression is true. Once expression becomes false, the loop will be exited.
Syntax
while (expression){
   Statement(s) to be executed if expression is true
}
Example
<script type="text/javascript">
   <!--
      var count = 0;
      document.write("Starting Loop" + "<br/>");
      while (count < 10){
         document.write("Current Count : " + count + "<br/>");
         count++;
      }
      document.write("Loop stopped!");
   //-->
</script>
This will produce following result −
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped! 

The for loop is the most compact form of looping and includes the following three important parts −
The loop initialization where we initialize our counter to a starting value. The initialization statement is executed before the loop begins.
The loop initialization where we initialize our counter to a starting value. The initialization statement is executed before the loop begins.
The test statement which will test if the given condition is true or not. If condition is true then code given inside the loop will be executed otherwise loop will come out.
The test statement which will test if the given condition is true or not. If condition is true then code given inside the loop will be executed otherwise loop will come out.
The iteration statement where you can increase or decrease your counter.
The iteration statement where you can increase or decrease your counter.
Syntax
for (initialization; test condition; iteration statement){
   Statement(s) to be executed if test condition is true
}
Example
<script type="text/javascript">
   <!--
      var count;
      document.write("Starting Loop" + "<br/>");
      for(count = 0; count < 10; count++){
         document.write("Current Count : " + count );
         document.write("<br/>");
      }
      document.write("Loop stopped!");
   //-->
</script>
This will produce following result which is similar to while loop −
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped! 

Following is the sample program that shows time, when we click in button.
<html>
   <body>
      <button onclick="this.innerHTML=Date()">The time is?</button>
      <p>Click to display the date.</p>
      <button onclick="displayDate()">The time is?</button>
      <script>
         function displayDate() {
            document.getElementById("demo").innerHTML = Date();
         }</script>

         <p id="demo"></p>
      </script>
   </body>
</html>
Output

    61 Lectures 
     8 hours 

 Amit Rana

    13 Lectures 
     2.5 hours 

 Raghu Pandey

    5 Lectures 
     38 mins

 Harshit Srivastava

    62 Lectures 
     3.5 hours 

 YouAccel

    9 Lectures 
     36 mins

 Korey Sheppard

    10 Lectures 
     57 mins

 Taurius Litvinavicius
 Print
 Add Notes
 Bookmark this page