Incorporating Javascript in the Head Element
the script placed inside the head element runs when you perform some action, such as clicking a link or the submit button.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Adding script in HEAD element</TITLE>
<H1>Adding script in the HEAD Element</H1>
<SCRIPT type="text/javascript">
document.write("Welcome to the World of JavaScript <BR/>");
document.write("In this example we have used the JavaScript in the HEAD element.");
</SCRIPT>
</HEAD>
</HTML>
Incorporating JavaScript in the Body Element
The script element inside the body element runs when the web page startsloading in a browser
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Adding script in Body Element</TITLE>
</HEAD>
<BODY>
<H1>Adding JavaScript in Body Element</H1>
<SCRIPT type="text/javascript">
document.write("Welcome to the World of JavaScript <BR/>");
document.write("In this example we have used the JavaScript in the BODY element.");
</SCRIPT>
</BODY>
</HTML>
Using External JavaScript File
when the javascript is very lengthy, you can place it in an external file and save that file with the .js extension.
then you need to link the external file with the HTML document by using the src attribute of the script element to access the file.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the External Script file</TITLE>
</HEAD>
<BODY>
<H2>The sum of First Four Number is:</H2>
<H2><script src="MyScript.js"></H2>
</SCRIPT>
</BODY>
</HTML>
MyScript.js
var i, count=0;
for(i=0;i<5;i++)
{
count=count+i;
}
document.write(count);
note that external script file doesnot containe the script element.
Using Variables
you need to properly declare a variable to use it in the script for storing data.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Declaring a Variable</TITLE>
</HEAD>
<BODY>
<H1>Using a variable in the script</H1>
<SCRIPT type="text/javascript">
var countBooks=100;
document.write("Number of Books=" + countBooks);
</SCRIPT>
</BODY>
</HTML>
you can assign the value of one variable to another.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Assigning values to Multiple Variables</TITLE>
</HEAD>
<BODY>
<H1>Using Multiple Variable in the Script</H1>
<SCRIPT type="text/javascript">
var countBooks=50, minBookPrice=150, maxBookPrice=3000, bookName;
countBooks=2000;
minBookPrice=500;
maxBookPrice=minBookPrice;
document.write("countBooks = " + countBooks+"<BR/>");
document.write("maxBookPrice = " + maxBookPrice+"<BR/>");
document.write("bookName = " + bookName);
</SCRIPT>
</BODY>
</HTML>
in output,
the value of the book Name variable is displayed as "undefined" because it is not assigned any value in the script.
if you do not assign any value to a variable, then that variable is assigned an undefined value.
Using Operators
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using Operators</TITLE>
</HEAD>
<BODY>
<H1>Using Operators in the Script </H1>
<SCRIPT type="text/javascript">
var math=95, English=80, science=90, avgMarks;
avgMarks=math + English + science / 3;
document.write("Average Marks = " + avgMarks);
avgMarks=(math + English + science) / 3;
document.write("<BR/>Average Marks = " + avgMarks);
</SCRIPT>
</BODY>
</HTML>
avgMarks=(math + English + science) / 3; provides the correct answer, because thee expression first adds the values of all the variables and then performs the division.
Using The if Statement
you can use if statement to execute a group of one or more script statements only when a particular condition is met.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using if Statement</TITLE>
</HEAD>
<BODY>
<H1>Using the if Statement in the script </H1>
<SCRIPT type="text/javascript">
var Number=45;
if((Number%2) != 0)
{
document.write(Number + " is an odd number");
}
document.write("<BR/>Thank you!");
</SCRIPT>
</BODY>
</HTML>
Using the if...else statement
the if ..... else statement executes the code, written in the if statement, if the specified condition is true.
otherwise, the code written in the else statement is executted.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>if...else Statement</TITLE>
</HEAD>
<BODY>
<H1>Using the if...else Statement in the Script</H1>
<SCRIPT type="text/javascript">
var Number=44;
if((Number%2) != 0)
{
document.write(Number + " is an odd number");
}
else
{
document.write(Number + " is an even number");
}
document.write("<BR/>Thank you!");
</SCRIPT>
</BODY>
</HTML>
nested if....else stetment
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Nested if... else Statement</TITLE>
</HEAD>
<BODY>
<H1>Using Nested if... else Statement</H1>
<SCRIPT type="text/javascript">
var letter="I";
if (letter=="A")
document.write("vowel A");
else
if(letter=="E")
document.write("vowel E");
else
if(letter=="I")
document.write("vowel I");
else
if(letter=="O")
document.write("vowel O");
else
if(letter=="U")
document.write("vowel U");
else
document.write("consonant");
document.write("<BR/>Thank you!");
</SCRIPT>
</BODY>
</HTML>
Using the Switch Statement
you can use the switch stement to select a particular group of statements to be executed among several other group of statements.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using switch Statement</TITLE>
</HEAD>
<BODY>
<H1>Using switch Statement in the script</H1>
<SCRIPT type="text/javascript">
var letter="I";
switch(letter)
{
default:document.write("consonant");
break;
case "A":document.write("A is a vowel");
break;
case "E":document.write("E is a vowel");
break;
case "I":document.write("I is a vowel");
break;
case "O":document.write("O is a vowel");
break;
case "U":document.write("U is a vowel");
break;
}
document.write("<BR/>Thank You!");
</SCRIPT>
</BODY>
</HTML>
Using the While Loop
you can use the while loop when you want to check the condition at the start of the loop.
the group of statements that is to be executed is specified after the condition.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using while loop</TITLE>
</HEAD>
<BODY>
<H1>Using while Loop in the Script</H1>
<SCRIPT type="text/javascript">
var totalDistance=0, fare=0;
while(totalDistance<=10)
{
fare=fare+5;
totalDistance=totalDistance+2;
document.write("Rs." + fare + " for " + totalDistance + " KM distance. <BR/>");
}
document.write("Thank You!");
</SCRIPT>
</BODY>
</HTML>
if the condition of a while loop is always true, then the loop keeps executing indefinitely.
such loops are known as infinite loops as they have an infinite number of iterations
Using the do...while Loop
if you want a group of statements to be executed at least once,
then you can use the do....while loop.
this is possible because the condition of the do while loop is placed at the end of the loop
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using do...while loop</TITLE>
</HEAD>
<BODY>
<H1>Using do...while Loop in the Script</H1>
<SCRIPT type="text/javascript">
var totalDistance=0, fare=0;
do
{
document.write("Rs." + fare + " for " + totalDistance + " KM distance. <BR/>");
document.write("<HR/>");
fare=fare+5;
totalDistance=totalDistance+2;
}
while(totalDistance<=10);
</SCRIPT>
</BODY>
</HTML>
Using the for Loop
you can execute a group of stetments multiple times based on a specific condition by using the for loop.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using for loop</TITLE>
</HEAD>
<BODY>
<H1>Using the for loop in the script</H1>
<SCRIPT type="text/javascript">
var Number;
document.write("Even numbers from 0 to 10 <BR/>");
for(Number=0;Number<=10;Number=Number+2)
{
document.write(Number+"<BR/>");
}
</SCRIPT>
</BODY>
</HTML>
the initialization, condition, and updation statements are optional and can be omitted in the for loop.
you can omit the condition or updation stetments if you want to execute the for loop infinitely.
Using the break statement
the break statement allows you to break or exit a loop.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using break Statement</TITLE>
</HEAD>
<BODY>
<H1>Using break Statement in while loop</H1>
<SCRIPT type="text/javascript">
var count=0;
while(count<10)
{
++count;
if((count%5==0))
break;
else
document.write("count="+count+"<BR/>");
}
document.write("while loop exited");
</SCRIPT>
</BODY>
</HTML>
Using the continue statement
the continue statement can also be used to stop the execution of the loop.
it does not exit the loop;
rather it executes the condition for the next iteration of the loop.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The continue Statement</TITLE>
</HEAD>
<BODY>
<H1>Using the continue statement</H1>
<SCRIPT type="text/javascript">
var count=0;
while(count<10)
{
++count;
if(count%2==0)
continue;
else
document.write("count="+count+"<BR/>");
}
document.write("while loop exited");
</SCRIPT>
</BODY>
</HTML>
Using the alert box
the alert box is generally used to display an alert message while executing JavaScript code.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using alert box</TITLE>
</HEAD>
<BODY>
<H1>Showing the alert box</H1>
<SCRIPT type="text/javascript">
alert( "Hello, I am an alert box." );
</SCRIPT>
</BODY>
</HTML>
Using the confirm box
the confirm box is used to display a message and return a true or false value.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>USING CONFIRM BOX</TITLE>
</HEAD>
<BODY>
<H1>Showing the confirm box</H1>
<SCRIPT type="text/javascript">
var qry= confirm ( "Are you sure to send this file to Recycle Bin ? " );
if (qry)
document.write ("Welcome to JavaScript. <BR/> You have moved the file to Recycle Bin.");
else
document.write ("Welcome to JavaScript <BR/> The file is not moved");
</SCRIPT>
</BODY>
</HTML>
Using the prompt box
the prompt box contains a text box with the OK and Cancel buttons.
It returns a text string when OK is clicked and null when Cancel is clicked.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using prompt Box</TITLE>
</HEAD>
<BODY>
<H1>Accepting your name using prompt box</H1>
<SCRIPT type="text/javascript">
var name= prompt( "Please enter your name: " );
if (name==null || name=="") name = " visitor ";
{
document.write ("Hi " + name + ", Welcome to JavaScript");
}
</SCRIPT>
</BODY>
</HTML>
the script placed inside the head element runs when you perform some action, such as clicking a link or the submit button.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Adding script in HEAD element</TITLE>
<H1>Adding script in the HEAD Element</H1>
<SCRIPT type="text/javascript">
document.write("Welcome to the World of JavaScript <BR/>");
document.write("In this example we have used the JavaScript in the HEAD element.");
</SCRIPT>
</HEAD>
</HTML>
Incorporating JavaScript in the Body Element
The script element inside the body element runs when the web page startsloading in a browser
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Adding script in Body Element</TITLE>
</HEAD>
<BODY>
<H1>Adding JavaScript in Body Element</H1>
<SCRIPT type="text/javascript">
document.write("Welcome to the World of JavaScript <BR/>");
document.write("In this example we have used the JavaScript in the BODY element.");
</SCRIPT>
</BODY>
</HTML>
Using External JavaScript File
when the javascript is very lengthy, you can place it in an external file and save that file with the .js extension.
then you need to link the external file with the HTML document by using the src attribute of the script element to access the file.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the External Script file</TITLE>
</HEAD>
<BODY>
<H2>The sum of First Four Number is:</H2>
<H2><script src="MyScript.js"></H2>
</SCRIPT>
</BODY>
</HTML>
MyScript.js
var i, count=0;
for(i=0;i<5;i++)
{
count=count+i;
}
document.write(count);
note that external script file doesnot containe the script element.
Using Variables
you need to properly declare a variable to use it in the script for storing data.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Declaring a Variable</TITLE>
</HEAD>
<BODY>
<H1>Using a variable in the script</H1>
<SCRIPT type="text/javascript">
var countBooks=100;
document.write("Number of Books=" + countBooks);
</SCRIPT>
</BODY>
</HTML>
you can assign the value of one variable to another.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Assigning values to Multiple Variables</TITLE>
</HEAD>
<BODY>
<H1>Using Multiple Variable in the Script</H1>
<SCRIPT type="text/javascript">
var countBooks=50, minBookPrice=150, maxBookPrice=3000, bookName;
countBooks=2000;
minBookPrice=500;
maxBookPrice=minBookPrice;
document.write("countBooks = " + countBooks+"<BR/>");
document.write("maxBookPrice = " + maxBookPrice+"<BR/>");
document.write("bookName = " + bookName);
</SCRIPT>
</BODY>
</HTML>
in output,
the value of the book Name variable is displayed as "undefined" because it is not assigned any value in the script.
if you do not assign any value to a variable, then that variable is assigned an undefined value.
Using Operators
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using Operators</TITLE>
</HEAD>
<BODY>
<H1>Using Operators in the Script </H1>
<SCRIPT type="text/javascript">
var math=95, English=80, science=90, avgMarks;
avgMarks=math + English + science / 3;
document.write("Average Marks = " + avgMarks);
avgMarks=(math + English + science) / 3;
document.write("<BR/>Average Marks = " + avgMarks);
</SCRIPT>
</BODY>
</HTML>
avgMarks=(math + English + science) / 3; provides the correct answer, because thee expression first adds the values of all the variables and then performs the division.
Using The if Statement
you can use if statement to execute a group of one or more script statements only when a particular condition is met.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using if Statement</TITLE>
</HEAD>
<BODY>
<H1>Using the if Statement in the script </H1>
<SCRIPT type="text/javascript">
var Number=45;
if((Number%2) != 0)
{
document.write(Number + " is an odd number");
}
document.write("<BR/>Thank you!");
</SCRIPT>
</BODY>
</HTML>
Using the if...else statement
the if ..... else statement executes the code, written in the if statement, if the specified condition is true.
otherwise, the code written in the else statement is executted.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>if...else Statement</TITLE>
</HEAD>
<BODY>
<H1>Using the if...else Statement in the Script</H1>
<SCRIPT type="text/javascript">
var Number=44;
if((Number%2) != 0)
{
document.write(Number + " is an odd number");
}
else
{
document.write(Number + " is an even number");
}
document.write("<BR/>Thank you!");
</SCRIPT>
</BODY>
</HTML>
nested if....else stetment
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Nested if... else Statement</TITLE>
</HEAD>
<BODY>
<H1>Using Nested if... else Statement</H1>
<SCRIPT type="text/javascript">
var letter="I";
if (letter=="A")
document.write("vowel A");
else
if(letter=="E")
document.write("vowel E");
else
if(letter=="I")
document.write("vowel I");
else
if(letter=="O")
document.write("vowel O");
else
if(letter=="U")
document.write("vowel U");
else
document.write("consonant");
document.write("<BR/>Thank you!");
</SCRIPT>
</BODY>
</HTML>
Using the Switch Statement
you can use the switch stement to select a particular group of statements to be executed among several other group of statements.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using switch Statement</TITLE>
</HEAD>
<BODY>
<H1>Using switch Statement in the script</H1>
<SCRIPT type="text/javascript">
var letter="I";
switch(letter)
{
default:document.write("consonant");
break;
case "A":document.write("A is a vowel");
break;
case "E":document.write("E is a vowel");
break;
case "I":document.write("I is a vowel");
break;
case "O":document.write("O is a vowel");
break;
case "U":document.write("U is a vowel");
break;
}
document.write("<BR/>Thank You!");
</SCRIPT>
</BODY>
</HTML>
Using the While Loop
you can use the while loop when you want to check the condition at the start of the loop.
the group of statements that is to be executed is specified after the condition.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using while loop</TITLE>
</HEAD>
<BODY>
<H1>Using while Loop in the Script</H1>
<SCRIPT type="text/javascript">
var totalDistance=0, fare=0;
while(totalDistance<=10)
{
fare=fare+5;
totalDistance=totalDistance+2;
document.write("Rs." + fare + " for " + totalDistance + " KM distance. <BR/>");
}
document.write("Thank You!");
</SCRIPT>
</BODY>
</HTML>
if the condition of a while loop is always true, then the loop keeps executing indefinitely.
such loops are known as infinite loops as they have an infinite number of iterations
Using the do...while Loop
if you want a group of statements to be executed at least once,
then you can use the do....while loop.
this is possible because the condition of the do while loop is placed at the end of the loop
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using do...while loop</TITLE>
</HEAD>
<BODY>
<H1>Using do...while Loop in the Script</H1>
<SCRIPT type="text/javascript">
var totalDistance=0, fare=0;
do
{
document.write("Rs." + fare + " for " + totalDistance + " KM distance. <BR/>");
document.write("<HR/>");
fare=fare+5;
totalDistance=totalDistance+2;
}
while(totalDistance<=10);
</SCRIPT>
</BODY>
</HTML>
Using the for Loop
you can execute a group of stetments multiple times based on a specific condition by using the for loop.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using for loop</TITLE>
</HEAD>
<BODY>
<H1>Using the for loop in the script</H1>
<SCRIPT type="text/javascript">
var Number;
document.write("Even numbers from 0 to 10 <BR/>");
for(Number=0;Number<=10;Number=Number+2)
{
document.write(Number+"<BR/>");
}
</SCRIPT>
</BODY>
</HTML>
the initialization, condition, and updation statements are optional and can be omitted in the for loop.
you can omit the condition or updation stetments if you want to execute the for loop infinitely.
Using the break statement
the break statement allows you to break or exit a loop.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using break Statement</TITLE>
</HEAD>
<BODY>
<H1>Using break Statement in while loop</H1>
<SCRIPT type="text/javascript">
var count=0;
while(count<10)
{
++count;
if((count%5==0))
break;
else
document.write("count="+count+"<BR/>");
}
document.write("while loop exited");
</SCRIPT>
</BODY>
</HTML>
Using the continue statement
the continue statement can also be used to stop the execution of the loop.
it does not exit the loop;
rather it executes the condition for the next iteration of the loop.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The continue Statement</TITLE>
</HEAD>
<BODY>
<H1>Using the continue statement</H1>
<SCRIPT type="text/javascript">
var count=0;
while(count<10)
{
++count;
if(count%2==0)
continue;
else
document.write("count="+count+"<BR/>");
}
document.write("while loop exited");
</SCRIPT>
</BODY>
</HTML>
Using the alert box
the alert box is generally used to display an alert message while executing JavaScript code.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using alert box</TITLE>
</HEAD>
<BODY>
<H1>Showing the alert box</H1>
<SCRIPT type="text/javascript">
alert( "Hello, I am an alert box." );
</SCRIPT>
</BODY>
</HTML>
Using the confirm box
the confirm box is used to display a message and return a true or false value.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>USING CONFIRM BOX</TITLE>
</HEAD>
<BODY>
<H1>Showing the confirm box</H1>
<SCRIPT type="text/javascript">
var qry= confirm ( "Are you sure to send this file to Recycle Bin ? " );
if (qry)
document.write ("Welcome to JavaScript. <BR/> You have moved the file to Recycle Bin.");
else
document.write ("Welcome to JavaScript <BR/> The file is not moved");
</SCRIPT>
</BODY>
</HTML>
Using the prompt box
the prompt box contains a text box with the OK and Cancel buttons.
It returns a text string when OK is clicked and null when Cancel is clicked.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using prompt Box</TITLE>
</HEAD>
<BODY>
<H1>Accepting your name using prompt box</H1>
<SCRIPT type="text/javascript">
var name= prompt( "Please enter your name: " );
if (name==null || name=="") name = " visitor ";
{
document.write ("Hi " + name + ", Welcome to JavaScript");
}
</SCRIPT>
</BODY>
</HTML>
No comments:
Post a Comment