sap4help@gmail.com +91 8956877466
This website is always under updation with new contents
JavaScript Tutorials
Introduction
Js comment
Variable
Global variables
Operators
Control Statement
Switch
Loop
for loop
while loop
for in loop
Functions
Parameter Functions
Mouse Over
Javascript Object
Date
String
Escape Represents
Number
Boolean
Object
Array
Java Browser objects
Window Object
History Object
Navigator Object
Screen object
Document object
getElementById
getElementByTagName
innerhtml
innerText
Form validation
JavaScript
Introduction

If you are a designer or developer who has only used JavaScript under the mantle of libraries (such as jQuery, Prototype, etc), it is my hope that the material in this tutorial will transform you from a JavaScript library user into a JavaScript developer.


Javascript basic
Js comment

Have you ever written a script or a program in the past only to look at it six months later with no idea what's going on in the code? You probably forgot to do what all programmers tend to forget to do: write comments!

Creating Single Line Comments

To create a single line comment in JavaScript, you place two slashes "//" in front of the code or text you wish to have the JavaScript interpreter ignore. When you place these two slashes, all text to the right of them will be ignored, until the next line.

These types of comments are great for commenting out single lines of code and writing small notes.

JavaScript Code:
<script type="text/javascript">
<!--
// This is a single line JavaScript comment

document.write(" JavaScript code!");
//document.write("You can't see this!");
//-->
</script>
Display:
JavaScript code!

Each line of code that is colored red is commented out and will not be interpreted by the JavaScript engine.

Creating Multi-line Comments

Although a single line comment is quite useful, it can sometimes be burdensome to use when disabling long segments of code or inserting long-winded comments. For this large comments you can use JavaScript's multi-line comment that begins with /* and ends with */.

JavaScript Code:
<script type="text/javascript">
<!--
document.write(" multi-line comments!");
/*document.write("You can't see this!");
document.write("You can't see this!");
document.write("You can't see this!");
document.write("You can't see this!");
document.write("You can't see this!");
document.write("You can't see this!");
document.write("You can't see this!");*/
//-->
</script>
Display:
multi-line comments!
Variable

Cooking up a dish according to a recipe in the kitchen has one advantage over cooking up some data in a program. In the kitchen, you follow recipe steps and work with real things:

carrots, milk, or a salmon fillet. A computer, on the other hand, follows a list of instructions to work with data. Even if the data represents something that looks real, such as the text entered into a form’s input field, once the value gets into the program, you can no longer reach out and touch it.

In truth, the data that a program works with is merely a collection of bits (on and off states) in your computer’s memory. More specifically, data in a JavaScriptenhanced Web page occupies parts of the computer’s memory set aside for exclusive use by the browser software.

In the olden days, programmers had to know the numeric address in memory (RAM) where a value was stored to retrieve a copy of it for, say, some addition. Although the innards of a program have that level of complexity, programming languages such as JavaScript shield you from it. The most convenient way to work with data in a script is to first assign the data to a variable. It’s usually easier to think of a variable as a basket that holds information. How long the variable holds the information depends on a number of factors. But the instant a Web page clears the window (or frame), any variables it knows about are immediately discarded.


Creating a variable

You have a couple of ways to create a variable in JavaScript, but one covers you properly in all cases. Use the var keyword, followed by the name you want to give that variable. Therefore, to declare a new variable called myAge, the JavaScript statement is

varmyAge

On the other hand, if I declare a variable in one statement and later want to assign a value to it, the sequence of statements is

varmyAge
myAge = 45

Global variables

Do not confuse the head object with global properties or global variables contained within the global scope. The head object is an object that contains all objects. The term "global properties" or "global variables" is used to refer to values directly contained inside the head object and are not specifically scoped to other objects. These values are considered global because no matter where code is currently executing, in terms of scope, all code has access (via the scope chain) to these global properties/ variables.

Below, I place a foo property in the the global scope, then access this property from a different scope.

<!DOCTYPE html><html lang="en"><body><script>
var foo = 'bar'; // foo is a global object and a property of the head/window object
varmyApp = function() { // remember functions create scope
! var run = function() {
! ! // logs bar, foo's value is found via the scope chain in the head object
live code: http://jsbin.com/utaloy/edit
79
! ! console.log(foo);
! }();
}
Ex: WAP in javascript for Global variable
<html>
<body onload = checkscope();>
<script  type="text/javascript">
varmyVar="global";
functioncheckscope()
 {
varmyVar="local";
document.write(myVar);
 }
</script>
</body>
</html>

Operators

You will use lots of operators in expressions. Earlier, you used the equal sign (=) as an assignment operator to assign a value to a variable. In the preceding examples with strings, you used the plus symbol (+) to join two strings. An operator generally performs some kind of calculation (operation) or comparison with two values (the value on each side of an operator is called an operand) to reach a third value.

In this lesson, I briefly describe two categories of operators—arithmetic and comparison. Chapter 40 covers many more operators, but once you understand the basics here, the others are easier to grasp.


Arithmetic operators

It may seem odd to talk about text strings in the context of “arithmetic” operators, but you have already seen the special case of the plus (+) operator when one or more of the operands is a string. The plus operator instructs JavaScript to concatenate (pronouncedkon-KAT-en-eight), or join, two strings together precisely where you place the operator.

The string concatenation operator doesn’t know about words and spaces, so the programmer must make sure that any two strings to be joined have the proper word spacing as part of the strings—even if that means adding a space:

firstName = “John”
lastName = “Doe”
fullName = firstName + “ “ + lastName

JavaScript uses the same plus operator for arithmetic addition. When both operands are numbers, JavaScript knows to treat the expression as an arithmetic addition rather than a string concatenation. The standard math operators for addition, subtraction, multiplication, and division (+, -, *, /) are built into JavaScript.

Ex :WAP in JavaScript for arithmatic operation
<html>
<body>
<script type="text/JavaScript">

var a = 33;
var b = 10;
var c = "Test";
varlinebreak = "<br />";
document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);

document.write("a - b = ");
result = a - b;
document.write(result);
document.write(linebreak);

document.write("a / b = ");
result = a / b;
document.write(result);
document.write(linebreak);

document.write("a % b = ");
result = a % b;
document.write(result);
document.write(linebreak);

document.write("a + b + c = ");
result = a + b + c;
document.write(result);
document.write(linebreak);

  a = ++a;
document.write("++a = ");
result = ++a;
document.write(result);
document.write(linebreak);

  b = --b;
document.write("--b = ");
result = --b;
document.write(result);
document.write(linebreak);

</script>
 Set the variables to different values and then try...
</body>
</html>

Comparison operators

Another category of operator helps you compare values in scripts—whether two values are the same, for example. These kinds of comparisons return a value of the Boolean type—true or false.

The operator that tests whether two items are equal consists of a pair of equal signs to distinguish it from the single equal sign assignment operator.

SymbolDescription
= =equals
! =not equals
>greater than
>=greater than or equal to
<less than
<=less than or equal to

Where comparison operators come into greatest play is in the construction of scripts that make decisions as they run. A cook does this in the kitchen all the time: If the sauce is too watery, add a bit of flour. You see comparison operators in action in the next chapter.

Ex: WAP in javascript for comparison operator
<html>
<body>
<script type="text/javascript">

var a=10;
	var b=20;
	varlinebreak = "<br/>"
	
	document.write("(a==b) =>");
	result = (a==b);
document.write(result);
	document.write(linebreak);
	
	document.write("(a>b) =>");
	result = (a>b);
	document.write(result);
	document.write(linebreak);
	
	document.write("(a < b) =>");
	result = (a < b);
	document.write(result);
	document.write(linebreak);
	
	document.write("(a!=b) =>");
	result = (a!=b);
	document.write(result);
	document.write(linebreak);
	
	document.write("(a>=b) =>");
	result = (a>=b);
	document.write(result);
	document.write(linebreak);
	
	document.write("(a<=b) =>");
	result = (a<=b);
	document.write(result);
	document.write(linebreak);
	
	
	</script>
	</body>
	</html>

Bitwise Operators
OperatorDescription
&Bitwise AND
|Bitwise OR
^Bitwise XOR
~Bitwise NOT
<less than
<=less than or equal to
<<Bitwise Leftt Shift
>>Bitwise Right Shift
>>>Bitwise Right Shift with Zero

Logical Operators
OperatorDescription
&&Logical AND
||Logical OR
!Logical NOT

Ex: WAP in javascript for logical operator
<html>
</body>
<script type="text/javascript">

var a = true;
	var b = false;
	varlinebreak = "<br/>";
	
	document.write("(a && b) =>");
	result = (a&&b);
	document.write(result);
	document.write(linebreak);
	
	document.write("(a || b) =>");
	result = (a || b);
	document.write(result);
	document.write(linebreak);
	
	document.write(" !(a && b) =>");
	result = (!(a && b));
	document.write(result);
	document.write(linebreak);
	
	</script>
	</body>
	</html>

Assignment Operators
OperatorDescription
=Assign
+=Add and assign
-=Subtract and assign
*=Multiply and assign
/=Divide and assign
%=Modulus and assign

Ex: WAP in javascript for assignment operator
<html>
<body>
<script type ="text/javascript">

var a = 10;
	var b = 20;
	varlinebreak ="<br/>";
	
	document.write("value of a=> (a==b)");
	result = (a==b);
	document.write(result);
	document.write(linebreak);
	
	document.write("value of a=> (a+=b)");
	result = (a+=b);
	document.write(result);
	document.write(linebreak);
	
	document.write("value of a=>(a-=b)");
	result = (a-=b);
	document.write(result);
	document.write(linebreak);
	
	document.write("value of a=>(a*=b)");
	result = (a*=b);
	document.write(result);
	document.write(linebreak);
	
	document.write("value of a=>(a/=b)");
	result = (a/=b);
	document.write(result);
	document.write(linebreak);
	
	document.write("value of a=>(a%=b)");
	result = (a%=b);
	document.write(result);
	document.write(linebreak);
	
	</script>
	</body>
	</html>	

Control Statement

The simplest program decision is to follow a special branch or path of the program if a certain condition is true. Formal syntax for this construction follows. Items in italics get replaced in a real script with expressions and statements that fit the situation.

Don’t worry about the curly braces yet. Instead, get a feel for the basic structure. The keyword, if, is a must. In the parentheses goes an expression that evaluates to a Boolean value. This is the condition being tested as the program runs past this point. If the condition evaluates to true, then one or more statements inside the curly braces execute before continuing on with the next statement after the closing brace. If the condition evaluates to false, then the statements inside the curly brace are ignored and processing continues with the next statement after the closing brace.

The following example assumes that a variable, myAge, has had its value set earlier in the script (exactly how is not important for this example). The condition expression compares the value myAge against a numeric value of 18.

if (myAge< 18) {
alert(“Sorry, you cannot vote.”)
}

The data type of the value inside myAge must be a number so that the proper comparison (via the < comparison operator) does the right thing. For all instances ofmyAge less than 18, the nested statement inside the curly braces runs and displays the alert to the user. After the user closes the alert dialog box, the script continues with whatever statement follows the entire if construction.

Ex:WAP in javascript for simple if
<html>
<body>
<script type = "text/javascript">
var age = 20;
	if (age > 18 )
	{
	document.write("<b> Qualifies for driving licence</b>");
	}
	
	</script>
	</body>
</html>	

Ex:WAP in javascript for if else
<html>
<body>
<script type ="text/javascript">
var age = 15 ;
	if(age >18)
	{
	document.write("<b> Qualifies for driving licence</b>");
	}
	else
	{
	document.write("<b> Does not qualifies for driving licence</b>");
	}
	
	</script>
</body>
</html>

Ex: WAP in javascript for elseif ladder
<html>
<body>
<script type ="text/javascript">
var book = "math";
	if (book == "history")
	{
	document.write("<b> History book </b>");
	}
	else if(book == "math")
	{
	document.write("<b> Math book </b>");
	}
	else if(book == "economics")
	{
	document.write("<b> Economics book </b>");
	}
	else
	{
	document.write("<b> Unknown book </b>");
	}
	</script>
</body>
</html>

Switch

A switch statement first evaluates its expression. It then looks for the first case clause whose expression evaluates to the same value as the result of the input expression (using strict comparison, ===) and transfers control to that clause, executing the associated statements. (If multiple cases match the provided value, the first case that matches is selected, even if the cases are not equal to each other.) If no matching case clause is found, the program looks for the optional default clause, and if found, transfers control to that clause, executing the associated statements. If no default clause is found, the program continues execution at the statement following the end of switch. By convention, the default clause is the last clause, but it does not need to be so.

Syntax
switch (expression)
 {
case value1:
    //Statements executed when the result of expression matches value1
    [break;]
case value2:
    //Statements executed when the result of expression matches value2
    [break;]
  ...
casevalueN:
    //Statements executed when the result of expression matches valueN
    [break;]
default:
    //Statements executed when none of the values match the value of the expression
    [break;]
}

Ex: WAP in javascript for switch case
<html>
<body>
<script type = " text/javascript">
var grade = 'A';
	document.write("<b> Entering in a switch block </b><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 'E': document.write("Failed <br/>");
	break;
	
	default :document.write("unknown grade <br/>");
	
	}
	document.write("Exiting switch block <br/>");
	</script>
</body>
</html>

For accessing computer programs go to TECHNOLOGY