Sunday 15 February 2015

Javascript Basic

JavaScript Syntax:

 <script ...>
JavaScript code
 </script>

There are two important attributes for script:-
  1. language: This attribute specifies what scripting language you are using. Typically, its value will be javascript. Although recent versions of HTML (and XHTML, its successor) have phased out the use of this attribute.
  2. type: This attribute is what is now recommended to indicate the scripting language in use and its value should be set to "text/javascript".

Syntax:-

 <script language="javascript" type="text/javascript"> JavaScript code </script>


Example1>

<html>
<body>
 <script language="javascript" type="text/javascript">
 <!--
 document.write("Hello saurav")
 //-->
 </script>
</body>
</html>

JavaScript Placement in HTML File:
  1. Script in <head>...</head> section.
  2. Script in <body>...</body> section.
  3. Script in <body>...</body> and <head>...</head> sections.
  4. Script in and external file and then include in <head>...</head> section.

if statement:

if (expression){
 Statement(s) to be executed if expression is true
 }

if...else statement:


if (expression){
Statement(s) to be executed if expression is true }
else{
Statement(s) to be executed if expression is false
}

if...else if... statement:

 if (expression 1){
Statement(s) to be executed if expression 1 is true }
else if (expression 2){
Statement(s) to be executed if expression 2 is true
 }
else if (expression 3){
 Statement(s) to be executed if expression 3 is true }
else{
Statement(s) to be executed if no expression is true
 }

switch statement:

 switch (expression) {
case condition 1: statement(s) break;
 case condition 2: statement(s) break;
 ... case condition n: statement(s) break;
default: statement(s) }

The while Loop

 while (expression){
 Statement(s) to be executed if expression is true
 }

 The do...while Loop:

 do{ Statement(s) to be executed; }
while (expression);

The for Loop:

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

The for...in Loop

 for (variablename in object)
{
 statement or block to execute
}

Function Definition:

 syntax:-
<script type="text/javascript">
<!--
function functionname(parameter-list) { statements }
//-->
</script>

Calling a Function:

 <script type="text/javascript">
 <!--
sayHello();
 //-->
 </script>

Exceptions:-

 <script type="text/javascript">
 <!--
 try { statementsToTry }
 catch ( e ) { catchStatements }
 finally { finallyStatements }
 //-->
</script>

Alert Dialogue Box:

 <head>
 <script type="text/javascript">
<!--
 alert("Warning Message");
 //-->
 </script>
</head>

Confirmation Dialogue Box:

 <head>
<script type="text/javascript">
 <!--
var retVal = confirm("Do you want to continue ?");
if( retVal == true )
{
alert("User wants to continue!");
return true;
}
else{
 alert("User does not want to continue!");
 return false;
 }
 //-->
 </script>
 </head>

 Prompt Dialogue Box:

 <head>
 <script type="text/javascript">
 <!--
 var retVal = prompt("Enter your name : ", "your name here");
 alert("You have entered : " + retVal );
 //-->
 </script>
 </head>

Page Re-direction:-

 <head>
<script type="text/javascript">
<!--
 window.location="http://www.newlocation.com";
 //-->
 </script>
</head>

The Page Printing:

 <head>
<script type="text/javascript">
 <!-- //-->
</script>
 </head>
 <body>
 <form>
<input type="button" value="Print" onclick="window.print()" />
</form>
 </body>

The try...catch...finally Statement:

 <script type="text/javascript">
 <!--
 try {
 // Code to run [break;] }
 catch ( e )
{ // Code to run if an exception occurs [break;] }
[ finally { // Code that is always executed regardless of // an exception occurring }]
 //-->
</script>

example:-
<html>
 <head>
 <script type="text/javascript">
 <!--
 function myFunc() {
 var a = 100;
 alert("Value of variable a is : " + a ); }
 //-->
 </script>
 </head>
 <body>
 <p>Click the following to see the result:</p>
<form>
 <input type="button" value="Click Me" onclick="myFunc();" />
</form>
 </body>
 </html>





Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)