Javascript : Client Side Scripting :: Basic Concepts of JavaScript

• JavaScript Statements
• JavaScript Code Vs JavaScript Blocks
• Comments in JavaScript
• Variables declaration in JavaScript
• Construct block with JavaScript [eg. if..else, switch..case]
• Operators with JavaScript
• For Loop in JavaScript
• How to make Functions in JavaScript?

---

JavaScript Statements

• JavaScript is a sequence of statements to be executed by the browser.
• The word document.write is a standard JavaScript command for writing output to a page.

Example :
document.write("Hi! I am james Bond!");

Note : The semicolon is optional (according to the JavaScript standard), and the browser is supposed to interpret the
end of the line as the end of the statement. Because of this you will often see examples without the semicolon at the end.
Note : Using semicolons makes it possible to write multiple statements on one line.

JavaScript Code Vs JavaScript Blocks

JavaScript Code

• JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
• Each statement is executed by the browser in the sequence they are written.

Example

<script type="text/javascript">
document.write("<h1>This is a first header</h1>");
document.write("<p>This is a first paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

JavaScript Blocks

• JavaScript statements can be grouped together in blocks.
  Blocks start with a left curly bracket {, and ends with a right curly bracket }.
• The purpose of a block is to make the sequence of statements execute together.

Example

<script type="text/javascript">
{
document.write("<h1>This is a first header</h1>");
document.write("<p>This is a first paragraph</p>");
document.write("<p>This is another paragraph</p>");
}
</script>

The example above is not very useful. It just demonstrates the use of a block. Normally a block is used to group statements together in a function or in a condition (where a group of statements should be executed if a condition is met).

Comments in JavaScript

• JavaScript comments can be used to make the code more readable.
• Comments are simply lines of text that describe or explain the script; they are not treated as executable code.

Single line comments start with //

<script type="text/javascript">
// This will write a header:
document.write("<h1>This is first header</h1>");
// This will write two paragraphs:
document.write("<p>This is a first paragraph</p>");
</script>

Multi line comments start with /* and end with */

<script type="text/javascript">
/*
The code below will write
one header and two paragraphs
*/
document.write("<h1>This is first header</h1>");
document.write("<p>This is first paragraph</p>");
</script>

Using Comments to Prevent Execution

<script type="text/javascript">
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
//document.write("<p>This is another paragraph</p>");</script>


<script type="text/javascript">
/*
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
*/
</script>

Using Comments at the End of a Line

<script type="text/javascript">
document.write("Hello"); // This will write "Hello" 
document.write("World"); // This will write "World"

Variables declaration in JavaScript

A variable is a “container” for information you want to store. A variable’s value can change during the script. You can refer to a variable by name to see its value or to change its value.

Rules for variable names

• Variable names are case sensitive
  They must begin with a letter or the underscore character
• JavaScript does not have explicit data types
• There is no way of specifying that a particular variable represents an integer, a string or a real.
• The same variable may be interpreted differently in different contexts.
• All JavaScript variables are declared applying the keyword var.

For example:
    var x,y=7

JavaScript recognizes the following types of values

• Numbers, like 989 or 3.1415
• Logical (Boolean) values, either true or false
• Strings, like “javaskool!”
• null, a special keyword denoting a null value

Life of Variables

• When you declare a variable within a function, the variable can only be accessed within that function. When you exit the function, the variable is destroyed. These variables are called local variables.
• If you declare a variable outside a function, all the functions on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed.

Keywords

var, true, false, new, return

Construct block with JavaScript [if..else, switch..case]

JavaScript If…Else Statements or Conditional Statements

Conditional statements in JavaScript are used to perform different actions based on different conditions.

Followings are the conditional statements

• if statement – use this statement if you want to execute some code only if a specified condition is true
• if…else statement – use this statement if you want to execute some code if the condition is true and another code if the condition is false
• if…else if….else statement – use this statement if you want to select one of many blocks of code to be executed
• switch statement – use this statement if you want to select one of many blocks of code to be executed

if Statement

You should use the if statement if you want to execute some code only if a specified condition is true.

Syntax
if (condition)
{
//code to be executed if condition is true
}

if…else Statement

If you want to execute some code if a condition is true and another code if the condition is not true, use the if….else statement.

Syntax
if (condition)
{
//code to be executed if condition is true
}
else
{
//code to be executed if condition is not true
}

If…else if…else Statement

You should use the if….else if…else statement if you want to select one of many sets of lines to execute.

Syntax
if (condition1)
{
//code to be executed if condition1 is true
}
else if (condition2)
{
//code to be executed if condition2 is true
}
else
{
//code to be executed if condition1 and
//condition2 are not true
}

JavaScript Switch Statement

Conditional statements in JavaScript are used to perform different actions based on different conditions.

Syntax
switch(n)
{
case 1:
//execute code block 1
break; 
case 2:
//execute code block 2
break;
default:
//code to be executed if n is
//different from case 1 and 2
}

Example:

<script type="text/javascript">
//Note that Sunday=0, Monday=1, ..... Saturday=6.
var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5: document.write("Finally Friday");
break;
case 6: document.write("Super Saturday");
break;
case 0: document.write("Sleepy Sunday");
break;
default:
document.write("I'm looking forward to this weekend!");
}
</script>

Operators with JavaScript

Arithmetic Operators

Operator	Description	Example	Result
+	Addition	x=5; y=5; document.write(x+y);	10
–	Subtraction	x=5; y=5; document.write(x-y);	0
*	Multiplication	x=5; y=5; document.write(x*y);	25
/	Division	x=15; y=5; document.write(x/y);	3
%	Modulus (division remainder)	x=16; y=5; document.write(x%y);	1
++	Increment	x=5;x++; document.write(x);	6
—	Decrement	x=5;x–; document.write(x);	4

Assignment Operators

Operator	Example	Is The Same As
=	x=y	x=y
+=	x+=y	x=x+y
-=	x-=y	x=x-y
*=	x*=y	x=x*y
/=	x/=y	x=x/y
%=	x%=y	x=x%y

Comparison Operators

Operator	Description	Example
==	is equal to	5==8 returns false
===	is equal to (checks for both value and type)	x=5, y="5"; x==y returns true x===y returns false
!=	is not equal	6!=8 returns true
>	is greater than	6>8 returns false
<	is less than	6<8 returns true
>=	is greater than or equal to	6>=8 returns false
<=	is less than or equal to	6<=8 returns true

Logical Operators

Operator	Description	Example
&&	and	x=6; y=3 ; (x < 10 && y > 1) returns true
||	or	x=6; y=3 ; (x==5 || y==5) returns false
!	not	x=6; y=3;  !(x==y) returns true

String Operator

• A string is most often text, for example “Hello India!”.
• To stick two or more string variables together, use the + operator.

Example

txt1="What";
txt2="a nice baby!";
txt3=txt1+txt2;
document.write(txt3);

The variable txt3 now contains "What a nice baby!".

Conditional Operator :-  [ ?: ]

JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.

<em>Syntax :</em>
variablename=(condition)?value1:value2

<em>Example:</em>

gender="Male";
str= (gender=="Male") ? "Mr." : "Ms.";
document.write(str);

<em>Output :</em> Mr.

For Loop in JavaScript

Loops in JavaScript are used to execute the same block of code a specified number of times or while a specified condition is true.

In JavaScript there are two different kind of loops:

• for : loops through a block of code a specified number of times
• while : loops through a block of code while a specified condition is true

The for loop

Syntax:-

for (var=startvalue;var<=endvalue;var=var+increment) 
{
    code to be executed
}

The while loop

The while loop is used when you want the loop to execute and continue executing while the specified condition is true.

while (var<=endvalue)
{
    code to be executed
}

The do…while Loop

The do…while loop is a variant of the while loop. This loop will always execute a block of code ONCE, and then it will repeat the loop as long as the specified condition is true. This loop will always be executed at least once, even if the condition is false, because the code is executed before the condition is tested.

do
{
    code to be executed
}while (var<=endvalue);

JavaScript Break and Continue

There are two special statements that can be used inside loops: break and continue thru which loop can be controlled.

Break

The break command will break the loop and continue executing the code that follows after the loop (if any).

Continue

The continue command will break the current loop and continue with the next value.

JavaScript For…In Statement

The for…in statement is used to loop (iterate) through the elements of an array or through the properties of an object.

Syntax:

for (variable in object)
{
code to be executed
}

Example :

<html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
</body>
</html>

How to make Functions in JavaScript?

• A function is a reusable code-block that will be executed by an event, or when the function is called.
• To keep the browser from executing a script when the page loads, you can put your script into a function.
• A function contains code that will be executed by an event or by a call to that function.
• You may call a function from anywhere within the page (or even from other pages if the function is embedded in an external .js file).
• Functions can be defined both in the <head> and in the <body> section of a document. However, to assure that the function is read/loaded by the browser before it is called, it could be wise to put it in the <head> section.

Example:

The syntax for creating a function is

function functionname(var1,var2,...,varX)
{
//statement ...........
}

Here var1, var2, etc are variables or values passed into the function. The { and the } defines the start and end of the function.
Note : A function with no parameters must include the parentheses () after the function name:

function functionname()
{
//statement ...........
}

Note: The word function must be written in lowercase letters, otherwise a JavaScript error occurs!.

The return Statement

The return statement is used to specify the value that is returned from the function. So, functions that are going to return a value must use the return statement.

Example

function add(a , b)
{
x=a+b;
return x;
}

When you call the function above, you must pass along two parameters:

x=add(5,10);
or
document.write(add(5,10));