Monday, 21 March 2016

Javascript

  • JavaScript 


  • JavaScript is a lightweight, interpreted programming language.
  • Designed for creating network-centric applications.
  • Complementary to and integrated with Java.
  • Complementary to and integrated with HTML.
  • Open and cross-platform


********************************************************************************

Advantages of JavaScript



  • Less server interaction − You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.
  • Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have forgotten to enter something.
  • Increased interactivity − You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.
  • Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.

********************************************************************************

Limitations of JavaScript

We cannot treat JavaScript as a full-fledged programming language

  • Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reason.
  • JavaScript cannot be used for networking applications because there is no such support available.
  • JavaScript doesn't have any multithreading or multiprocessor capabilities.

********************************************************************************



Hello world

********************************************************************************

<html>

<body>

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

  <!--

  document.write(""hey sree ! welcome back to the javascritp ..!!");


 //-->

</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 an external file and then include in <head>...</head> section.

********************************************************************************

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





<html>
    
    
    <head>
        
        <script language="javascript" type="text/javascript">
            
            
        function download()
        {
         
         alert("hey you're exceeded your download limit");
            
        }
            
            
        </script>
        
          
    </head>
    
    
    
    <body>
        
        
    <input type="button" onclick="download()" value="download" />    
        
        
    </body>
    

</html>


********************************************************************************

   JavaScript in <body>...</body> section



<html>
    
    <head>
        
    </head>
    
    <body>
    
    <script>
     
     document.write("javascript in body");
        
    </script> 
     
     
     <p>  welcome to the javascript..this is the body</p>
    
    </body>
    
    
    
</html>


********************************************************************************

JavaScript in <body> and <head> Sections





<html>
    
    <head>
       
        <script type="text/javascript">
            
            
            function chinna()
            {
                
                alert("heyy tell me chinna ...!!!");
                
            }
            
            
        </script>
    

    </head>
    
    
    <body>
        
        
        <script type="text/javascript">
            
            
            document.write("hey chinna ..!!!");
        
        </script>
        
        <input type="button" onclick="chinna()" value="chinna"/>
        
        
    </body>
    

</html>

******************************************************************************


JavaScript in External File


The script tag provides a mechanism to allow you to store JavaScript in an external file


<html>

   <head>
      <script type="text/javascript" src="filename.js" ></script>
   </head>
   
   <body>
      .......
   </body>
</html>


you can keep the following content in filename.js file 


function sayHello() {
   alert("Hello World")
}



********************************************************************************

<html>
 

    <head>
 
        <script type="text/javascript">
         
           function download()
            {
             
                var name="heyyy sree"
                 
                  var nick="welcome back to javascript chinna"
             
                alert(name);
                alert(nick);
            }
             
    </script>
     
     
 
    </head>
 
 
    <body>

     
    <input type="button" onclick="download()" value="download"  />
     
     
    </body>
 
 
 
</html>


********************************************************************************

JavaScript Variable Scope



<html>
 
    <body onload="fn()">
     
        <script type="text/javascript">
         
            var global="global var";
         
            function fn()
            {
             
                document.write("local var");
             
             
             
            }
         
        </script>
     
     
     
    </body>
 
 
 
 
</html>



********************************************************************************

JavaScript Variable Names


JavaScript variable names are case-sensitive

should not use any of the JavaScript reserved keywords as a variable name

variable names should not start with a numeral (0-9).


JavaScript Reserved Words


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





********************************************************************************

Arithmetic Operations




<html>

    <body>
     
         <script type="text/javascript">
     
        var a=9;
        var b=5;
        var newline= "<br />";
     
     document.write("Arithmetic Operations <br/><br/>")
     
    document.write("a+b = ");
         
     
    res=a+b;
    document.write(res);
     
   
 document.write(newline)
   
   
   
     res=a-b;
     document.write("a-b =");
    document.write(res);
         
     document.write(newline)
         
 
     </script>
 
    </body>
   
 
</html>



********************************************************************************

if...else statement:


<html>
 
<body>

<script type="text/javascript">

var age=21;

if(age>18)

{
 
    document.write("you're eligible for voting")

}
else
{

  document.write("you''re not eligible");

}

</script>  
 

</body>  
 

</html>


********************************************************************************

JavaScript - Switch Case




<html>
 
    <body>
     
   
        <script>
         
         
            document.write("switch case <br/> <br/> ")
         
            var char='A'
         
            switch(char)
         
        {
         
            case 'B':
                document.write("better <br/>")
                break;
               
         
               case 'A':
                 
                   document.write("best <br/> ")
                    break;
                 
         
            case 'C':
             
                 document.write("good <br/>")

                  break;
         
        }
         
        </script>
         
     
    </body>
 
</html>



********************************************************************************

JavaScript - While Loops






<html>
 
 
    <head>

     
        <script type="text/javascript">
     
        function jai()
        {
     
        var i=0;
     
        while(i<108)
        {
         
            document.write("jai jai bajrangbali");
         
            document.write("<br />")
         
            i++;
         
        }
        }
        </script>
 
    </head>
 
 
       <body>

     
        <input type="button" onclick="jai()" value="jai jai bajrangbali"/>
     
    </body>
 
</html>



********************************************************************************

JavaScript - For Loop




<html>
 
 
    <head>

     
        <script type="text/javascript">
     
        function jai()
        {
     
        var i;
     
     for(i=0;i<108;i++)
        {
         
            document.write("jai sri ram !");
         
            document.write("<br />")
         
     
         
        }
        }
        </script>
 
    </head>
 
 
       <body>

     
        <input type="button" onclick="jai()" value="jai sri ram !"/>
     
    </body>
 
</html>


********************************************************************************



JavaScript for...in loop




for (variable in object){
   *********************************
}


<html>
 
    <body>
   
        <script type="text/javascript">
         
      var x;
       
         for(x in object)
         {
           
             document.write(x);
             document.write("<br/>");
           
           
         }
     
    </script>
     
    </body>

</html>

********************************************************************************

JavaScript - Loop Control




The break Statement




<html>
 
    <body>
     
        <script type="text/javascript">
         
           var x=0;
         
            while(x<99)
            {
             
              if(x==9)
                break;
                document.write(x)
                document.write("<br/>")
                x++;
            }
         
        </script>
     
    </body>
 

</html>




The continue Statement


<html>
 
    <body>
     
        <script type="text/javascript">
     
        var x=0;
     
        while(x<10)
        {
         
         
            document.write(x);
            document.write("<br/>");
         
            x++;
         
            if(x==3)
            continue;
         
        }
         
         
        </script>
     
    </body>
 
</html>



Using Labels to Control the Flow

********************************************************************************

<html>
   <body>
      
      <script type="text/javascript">
         <!--
            document.write("Entering the loop!<br /> ");
            outerloop: // This is the label name
         
            for (var i = 0; i < 5; i++)
            {
               document.write("Outerloop: " + i + "<br />");
               innerloop:
               for (var j = 0; j < 5; j++)
               {
                  if (j > 3 ) break ; // Quit the innermost loop
                  if (i == 2) break innerloop; // Do the same thing
                  if (i == 4) break outerloop; // Quit the outer loop
                  document.write("Innerloop: " + j + " <br />");
               }
            }
         
            document.write("Exiting the loop!<br /> ");
         //-->
      </script>
      
   </body>
</html>
********************************************************************************

JavaScript - Functions







<html>
 
    <head>
     
     
        <script type="text/javascript">
         
            function myself(name,book)
            {
             
                alert("hey " + name + " now i am reading " + book + " novel. " )
             
            }
         
        </script>
     
     
    </head>
 
 
    <body>
     
        click this button... to know about me..!!!
     
        <br/> <br/>
     
        <input type="button" onclick="myself('chinna','sudden crush')" value="about me" />
     
     
    </body>
 
</html>



The return Statement


<html>
    
    <head>
    
      <script type="text/javascript"> 



         function my_novel(name,book)
    
       {
       var novel=name+" reading " + book
       //doucment.write("hey "+ name " now i am reading  "+ book +".")
        return novel;
       
       }
        
       function myself()
        {
       
     
        var next_novel;

        next_novel =my_novel('chinna','sudden crush');
            
          document.write(next_novel);  
            
            
        }
               
        </script>
        
        
    </head>
    
    
    <body>
        
        click this button to know which novel i'm reading.
        
        <br/><br/>
        
        <input type="button" onclick="myself()" value="novel"/>
        
    </body>
    
</html>


********************************************************************************

JavaScript - Events

onclick Event Type



<html>
 
    <head>
     
<script language="javascript" type="text/javascript">
     
    function next()
    {
    alert("you're viewing next article")
    }
     
function previous()
{
    alert("you're viewing previous article")    
 
}
</script>

 
</head>
 

<body>
check this following articles.. <br/><br/>
     
 <input type="button" onclick="previous()" value="previous article"/>

   &nbsp; &nbsp; &nbsp; &nbsp;


 <input type="button" onclick="next()" value="next article"/>

  </body>
 
</html>


****************************************************************************

              onmouseover and onmouseout



<html>
 
    <head>
     
    <script type="text/javascript">
     

        function mouse()
        {
     
        document.write("hey chinna !!");
        }

    </script>
     
 
    </head>
 
 
    <body>
 
    <div onmouseover="mouse()">
     
       <h2> place your mouse over this </h2>
    </div>
     
     
     
    </body>
</html>

***************************************************************************

                onsubmit Event type




********************************************************************************


JavaScript - Page Redirection






<html>
   
   
    <head>
             
        <script type="text/javascript">
           
            function direction()
            {
       
        window.location="www.google.co.in"
                   
            }
           
           
        </script>
       
 
    </head>
   
 


 
   
    <body>
       
        <p> click this button to redirect to new page</p>
       
       
        <form>
           
            <input type="button" onclick="direction()" value="click to redirect"/>
           
           
        </form>
       
       
       
    </body>
   
   
</html>


********************************************************************************

JavaScript - Dialog Boxes





Alert Dialog Box



<html>
   <head>
   
      <script type="text/javascript">
         <!--
            function Warn() {
               alert ("This is a warning message!");
               document.write ("This is a warning message!");
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following button to see the result: </p>
      
      <form>
         <input type="button" value="Click Me" onclick="Warn();" />
      </form>
      
   </body>
</html>



Confirmation Dialog Box



<html>
   <head>
   
      <script type="text/javascript">
         <!--
            function getConfirmation(){
               var retVal = confirm("Do you want to continue ?");
               if( retVal == true ){
                  document.write ("User wants to continue!");
             
               }
               else{
                  document.write ("User does not want to continue!");
           
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following button to see the result: </p>
      
      <form>
         <input type="button" value="Click Me" onclick="getConfirmation();" />
      </form>
      
   </body>
</html>



Prompt Dialog Box



<html>
   <head>
      
      <script type="text/javascript">
         <!--
            function getValue(){
               var retVal = prompt("Enter your name : ", "your name here");
               document.write("You have entered : " + retVal);
            }
         //-->
      </script>
      
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>
      
      <form>
         <input type="button" value="Click Me" onclick="getValue();" />
      </form>
      
   </body>
</html>

------------------------------------------------------------------------------------------------------------------

<html>
    
    <head>
        
        <script type="text/javascript">
        
        function sree()
        {
            var ret=prompt("enter your name : ","your name..");
            document.write("heyyyy " + ret);
            
            
        }
        </script>
        
        
    </head>

    <body>
        
        <input type="button" onclick="sree()" value="name"/>
        
    </body>
    
</html>



********************************************************************************





********************************************************************************

********************************************************************************




********************************************************************************
********************************************************************************




********************************************************************************
********************************************************************************




********************************************************************************
********************************************************************************




********************************************************************************
********************************************************************************




********************************************************************************
********************************************************************************




********************************************************************************
********************************************************************************

********************************************************************************




********************************************************************************
********************************************************************************




********************************************************************************
********************************************************************************




********************************************************************************
********************************************************************************




********************************************************************************
********************************************************************************




********************************************************************************
********************************************************************************




********************************************************************************

********************************************************************************

********************************************************************************




********************************************************************************
********************************************************************************




********************************************************************************
********************************************************************************




********************************************************************************
********************************************************************************




********************************************************************************
********************************************************************************




********************************************************************************
********************************************************************************




********************************************************************************


No comments:

Post a Comment