Controlling Loop

Javascript(JS):
There may be situations when user tried to comes out of loop or skip the code on particular check
JavaScript provides break and continue statements to achieve this

The break Statement:
The break statement,is used to exit a loop early, come out of the enclosing curly braces.

Example:

The example will explain the use of a break statement with a while loop.
how the loop breaks out early once x reaches 5 and reaches to document.write(..)
statement just below to closing curly brace:

<script type="text/javascript">

var x = 1;
document.write("Enter the loop<br /> ");
while (x < 10)
{
  if (x == 5){
     break;  // breaks out of loop
  }
  x = x + 1;
  document.write( x + "<br />");
}
document.write("Exiting from loop!<br /> ");

</script>
This will produce following result:

Entering the loop
2
3
4
5
Exiting from loop!


The continue Statement:
The continue statement tells interpreter , immediately start the next iteration of
the loop and skip remaining code block.

When a continue statement is encountered, the loop flow will move to the loop check
expression immediately and if condition remain true then it start next iteration
otherwise control comes out of the loop.

Example:

This example will explain the use of a continue statement with a while loop.
how the continue statement is used to skip printing when the index
held in variable x reaches 5:

<script type="text/javascript">

var x = 1;
document.write("Entering inside loop<br /> ");
while (x < 8)
{
  x = x + 1;
  if (x == 5){
     continue;  // skip the rest loop body
  }
  document.write( x + "<br />");
}
document.write("Exiting from loop!<br /> ");

</script>
This will produce following result:

Entering the loop
2
3
4
6
7
8
Exiting from loop!

Javascript : Conditional Statement - Part - 3

Javascript(JS):

The while Loop :
The most basic loop in JavaScript is the while loop which would be discussed in this tutorial.

Syntax:

while (expression){
   executed if expression is true
}
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.

Example:

Following example illustrates a basic while loop:

<script type="text/javascript">
var count = 0;
document.write("Start" + "<br />");
while (count < 10){
  document.write("Count : " + count + "<br />");
  count++;
}
document.write("stopped!");
</script>
Output:

Start
Count : 0
Count : 1
Count : 2
Count : 3
Count : 4
Count : 5
Count : 6
Count : 7
Count : 8
Count : 9
stopped!

The do...while Loop:
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{
   Will be executed;
} while (expression);
Note the semicolon used at the end of the do...while loop.

Example:

Let us write above example in terms of do...while loop.

<script type="text/javascript">

var count = 0;
document.write("Loop" + "<br />");
do{
  document.write("Count : " + count + "<br />");
  count++;
}while (count < 0);
document.write("Loop stopped!");

</script>

Output:

Loop
Count : 0
stopped!


The for Loop:

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 iteration statement where you can increase or decrease your counter.

Syntax:

for (initialization; test condition; iteration statement){
     to be executed if test condition is true
}
Example:

Following example illustrates a basic for loop:

<script type="text/javascript">

var count;
document.write("Loop" + "<br />");
for(count = 0; count < 10; count++){
  document.write("Count : " + count );
  document.write("<br />");
}
document.write("stopped!");

Output:

Start
Count : 0
Count : 1
Count : 2
Count : 3
Count : 4
Count : 5
Count : 6
Count : 7
Count : 8
Count : 9
stopped! 

Javascript : Conditional Statement Part-2

Javascript(JS):

Syntax:

Syntax of the switch statement is 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.

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("switch Section<br />");
switch (grade)
{
  case 'A': document.write("Excellent<br />");
            break;
  case 'B': document.write("Very good<br />");
            break;
  case 'C': document.write("good<br />");
            break;
  case 'D': document.write("poor<br />");
            break;
  case 'F': document.write("Failed<br />");
            break;
  default:  document.write("no grade<br />")
}
document.write("Exit switch block");

</script>


Note : Break keyword is used to comes out of looping statment
           When the condition satisfied .. break keyword helps to
           poped out of that statement

Javascript :Conditional Statements Part -1

Javascript(JS):

While writing a program, there may be a situation when you need to
choose one way out of the given two ways. Here we need conditional statements
that allow your program to make correct decisions and perform right actions.

JavaScript supports conditional statements which are used to perform different
actions based on different conditions

JavaScript supports following forms of if..else statement:

-> if statement

-> if...else statement

-> if...else if... statement.

if statement :

Syntax:

if (expression){
   if true execute the statement .....
}
If the resulting value is true,given statement will be executed.
If expression is false then no statement would be not executed.

Example:

<script type="text/javascript">

var age = 20;
if( age > 18 ){
   document.write("this is my world");
}
</script>


if...else if... statement:


Syntax:

if (expression 1){
   execute if expression 1 is true
}
else if (expression 2){
   execute if expression 2 is true
}
else if (expression 3){
   execute if expression 3 is true
}
else{
   execute if no expression is true
}
each if is part of the else clause of the previous statement.
Statement(s) are executed based on the true condition, if non of the condition
is true then else block is executed.


if...else statement:


Syntax:

if (expression){
   execute if expression is true
}
else{
   execute if expression is false
}
If the expression is true, given statement(s) in the if block, are executed.
If expression is false then given statement(s) in the else block, are executed.

Javascript : Expressions & operators

Expressions :
An expression is valid unit of code that output a value.

Basically, there are two types of expressions:
->those that assign a value to a variable
    Ex : The expression x = 1 is an example of the first type.
           This expression uses the = operator to assign the value
           seven to the variable x. The expression itself evaluates to one.
->those that simply have a value.
    Ex : The code 1 + 4 is an example of the second expression type.
          This expression uses the + operator to add one and four together
          without assigning the result, five, to a variable.


Operators :
An Operator is something which help to perform some operation
                 operand1   operator  operand2

Types :
           Arithmetic Operators :
                                 

           Comparison operators :

                                         

           Logical Operators:
                                       

           Bitwise operators :
                                         

           Assignment Operators:
                                         

           Conditional Operator :

? :

Conditional Expression

If Condition is true ? Then value X : Otherwise value Y

Javascript : Data types & Variable

JavaScript DataTypes:
Javascript support these types of data types:

JavaScript have three primitive data types:

-> Strings of text e.g. "Hello string" etc.
-> Numbers eg. 123, 3200 etc.
-> Boolean e.g. true or false.

JavaScript have two trivial data types :
-> null
-> undefined

JavaScript also supports a composite data type known as object.

JavaScript Variables:

JavaScript has variables.
Variables is actually a containers.
User can place data into these containers and
then refer to the data simply by naming the container.

Before you use a variable in a JavaScript program,
User must declare it.
Variables are declared with the var keyword as follows:

<script type="text/javascript">

var data;
var employeename;

</script>

User declare multiple variables with the same var keyword as follows:

<script type="text/javascript">

var data,employeename;

</script>
Storing a value in a variable is called variable initialization.
User can do variable initialization at the time of its creation:

<script type="text/javascript">

var data = "hello how are you?";
var employeename = Abhi;

</script>
Note: Use the var keyword only for declaration or initialization.
         once for the life of any variable name in a document.
         Do not re-declare same variable twice.
         JavaScript is untyped language.
         it can hold a value of any data type.
         you don't have to tell JavaScript during variable declaration
         what type of value the variable will hold.

JavaScript Variable Scope:
JavaScript variable will have only two scopes.

Global Variables: A global variable has global scope which means it is defined
                          and can be use everywhere in your JavaScript code.

Local Variables: A local variable will be visible only within a function where
                         it is defined.And it can be use only within that function scope
Following example explains it:

Javscript Reserved Keyword :

abstract,   boolean , break , byte ,  case  ,   catch,  char , class ,     const  , continue
debugger ,  default ,delete , do ,   double, else  , enum , export   ,  extends false
final   ,   finally , float ,  for ,  function , goto ,  if  ,  implements , import ,  in
instanceof ,  int  ,   interface ,   long  ,  native , new , null , package ,  private
protected ,  public ,  return , short , static , super , switch , synchronized , this
throw,  throws , transient , true , try ,  typeof , var ,  void ,  volatile ,  while , with

Note : User cannot use these keyword as variable name

      

Javascript : Where to Place in HTML

Javascript (JS):
You can include JavaScript code anywhere in an HTML document.
preferred ways are :

-> <head> .... </head> section
-> <body> .... </body> section
-> Use External file and include it in <head>..</head> section

JavaScript placed in <head>...</head> section:

-> if User want to user event such as click , change etc .. You have to
   place script in <head> section

JavaScript placed in <body>...</body> 

-> When you want script to generate contents in webpage place
   script in <body> section

JavaScript placed in External File :

-> As We know javascript code may require more than one html pages
   so user can create an external JS file and use it in various
   HTML pages
-> Also its reduces the complexity

    NOTE : save the javascript file with .js extension

Javascript : Activating in Browsers

JavaScript(JS):
Almost all the modern browsers have built-in support for JavaScript.
User may need to enable or disable this support manually.

Google Chrome ->
       Step 1 - Customize and Control Google Chrome(top-right corner three parallel line)
       Step 2 - Go to 'Settings'.
       Step 3 - Click on Show advanced Settings
       Step 4 - Under Privacy you will find 'content settings..' click on it
       Step 5 - You will find 'Javascript' option . Select as required and click on 'Done'

Internet Explorer ->
       Step 1 - Open the 'Tools' menu. After that,
       Step 2 - Select 'Internet Options' at the bottom of the menu.
       Step 3 - Click on the 'Security' tab and then
       Step 4 - Select 'Custom Level'.
       Step 5 - Scroll down the security settings menu and
       Step 6 - Look for the heading 'Scripting'.
       Step 7 - Under 'Active Scripting', check the box next to 'Enable'. Then, click the 'OK' button.
       Step 8 - A window will appear asking for confirmation. Just select 'Yes' and JavaScript will be
                    enabled.

Mozilla Firefox ->
       Step 1 - Go to 'Tools' menu, and choose 'Options'.
       Step 2 - In the 'Options' menu, Click on 'Content' tab.
       Step 3 - Look for the 'Enable JavaScript' option.
       Step 4 - Check the box next to the option and then click the 'OK' button at the bottom.

Apple Safari ->
       Step 1 - Select 'Edit' on the browser menu and then click on 'Preferences'.
       Step 2 - Go to the 'Security' section.
       Step 3 - Under 'Web Content', there is an 'Enable JavaScript' option.
       Step 4 - Check the box next to it to turn on JavaScript.

Javascript : Understanding Syntax

Javascript (JS):
-> Should be written inside <script> tag
   <script>
   ...........code here.......
   </script>
-> can be added anywhere in the webpage but preferred to be inside <head> tag
   <html>
   <head>
   <script> ... code here ... </script>  
   </head>
   </html>
   this is done because the script will load before the html loads if not it might throw errors
   also help to improve performance of webpage
-> <script language="javascript" type="text/javascript">
    ... code here.....
   </script>
               NOTE : language specify what scripting language are we using.
                            type specify the language should be written in which format.
-> Javascript ignores white spaces and Line breaks.
-> Javascript is provide raw code writing feature as semicolon is optional
     but for the good practices everyone should specify semicolon
-> Javascript is Case-sensitive
     EX : data , Data , DATA ... are different .
-> You can comment Javascript code
   // - for single line
   /* ...multiple line...
    .....code... */

JavaScript : Introduction

JavaScript (JS) is a computer programming language.
 - > It is basically scripting language which was developed by Netscape and Mozilla foundation.
  -> It was released in year 1995 .
  -> It can be used within or outside of HTML page.
  -> It is very popular client-side scripting language.
  -> Almost in every web development javascript is used.
  -> Earlier known as LiveScript .
  -> Lightweight , interpreted,object-oriented.

Example : 

          

Note: Save the File with .htm or .html extension (ex- helloworld.html) and run the file in browser

Advantage : 

-> Reduce Server Call

-> Avoid Reloading of Page.

-> You can do drag-drop , mouse hover actions , create events , validation

-> Create Rich dynamic interfaces