Please note, this is a STATIC archive of website www.tutorialspoint.com from 11 May 2019, cach3.com does not collect or store any user information, there is no "phishing" involved.
Tutorialspoint
Home
Q/A
Tools
Coding Ground
Current Affairs
UPSC Notes
Online Tutors
Code Examples
Whiteboard
Net Meeting
Articles
Library
Videos
eBooks

JavaScript Html Sample Program

javascript 

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<script>
function sayHello() {
   document.write("Hello, Coding Ground!");
}
sayHello();
</script>
</head>
<body>
</body>
</html>

Create Gradient on Canvas using HTML5

javascript 

<!DOCTYPE html>
<html>
    <head>
<title>Web Page Design</title>



<style>
  
  body{
      
      background-image: linear-gradient( to right, crimson , indigo , darkorange  );
  }
  
  #canvas{
      
      margin-left: 20px;
      margin-right: 0;
      margin-bottom: 20px;
      border: thin solid #aaaaaa;
      cursor: crosshair;
      padding: 0;
      
  }
  
  #controls{
      margin: 20px 20px 20px 20px;
  }
  #rubberbandDiv{
      
      position: absolute;
      border: 3px solid blue;
      cursor: crosshair;
      display: none;
      
  }
  
</style>

</head>
<body>
    
    
    <div id="controls">
        
        <input type="button" id="resetButton" value="Reset" />
        
    </div>
    
    <div id="rubberbandDiv"></div>
    
    
    <canvas id="canvas" width="800" height="520">
        
        
        
    </canvas>
    
    

    
  <script>


    var canvas = document.getElementById('canvas');
     
    var context = canvas.getContext("2d");
    
    var rubberbandDiv = document.getElementById("rubberbandDiv");
    var resetButton = document.getElementById("resetButton");
    var image = new Image();
    var mouseDown = {};
    var rubberbandRectangle = {};
    var dragging = false;
    image.src = "https://www.4usky.com/data/out/74/164662929-quake-wallpapers.jpg";
   
    
function rubberbandStart(x,y)
{
        mouseDown.x = x;
        mouseDown.y = y;
        
        
        rubberbandRectangle.left = x;
        rubberbandRectangle.top = y;
        
        moveRubberbandDiv();
        showRubberbandDiv();
        
        dragging = true;
}
    
function rubberbandStretch(x,y)
{
        rubberbandRectangle.left = x < mouseDown.x ? x:mouseDown.x;
        rubberbandRectangle.top = y < mouseDown.y ? y:mouseDown.y;
        
        
        rubberbandRectangle.width = Math.abs(rubberbandRectangle.left - mouseDown.x),
        rubberbandRectangle.height = Math.abs(rubberbandRectangle.top+mouseDown.y);
        
        moveRubberbandDiv();
        resizeRubberbandDiv();
}
    
function rubberbandEnd()
{
        var bbox = canvas.getBoundingClientRect();
        
        try{
            
            context.drawImage(canvas, rubberbandRectangle.left - bbox.left,
            rubberbandRectangle.top - bbox.top,rubberbandRectangle.width, rubberbandRectangle.height,0,0,canvas.width, canvas.height);
            
        }
        catch(E)
        {
            E.printStackTrace();
        }
            
            resetRubberbandRectangle();
            
            rubberbandDiv.style.width = 0;
            rubberbandDiv.style.height=0;
            
            hideRubberbandDiv();
            
            dragging = false;
    }


function moveRubberbandDiv()
{
    rubberbandDiv.style.top = rubberbandRectangle.top + "px";
    rubberbandDiv.style.left = rubberbandRectangle.left + "px";
}

function resizeRubberbandDiv()
{
    rubberbandDiv.style.width = rubberbandRectangle.width + "px";
    rubberbandDiv.style.height = rubberbandRectangle.height = "px";
    
}

function showRubberbandDiv()
{
    rubberbandDiv.style.display = "inline";
    
}
    
function hideRubberbandDiv()
{
    rubberbandDiv.style.display = "none";
}

function resetRubberbandRectangle()
{
    rubberbandRectangle = { top: 0, left: 0, width: 0, height: 0 };
}

canvas.onmousedown = function(e){
     
    var x = e.clientX,
    y = e.clientY;
    e.preventDefault();
    rubberbandStart(x,y);
    
   
};

window.onmousemove = function(e)
{
    var x = e.clientX;
    var y = e.clientY;
    
    e.preventDefault();
    if(dragging){
        rubberbandStretch(x,y);
    }
};


window.onmouseup = function(e)
{
    e.preventDefault();
    rubberbandEnd();
};

image.onload = function()
{
    context.drawImage(image, 0, 0, canvas.width , canvas.height);
};

resetButton.onclick = function(e)
{
    context.clearRect(0,0,context.canvas.width,context.canvas.height);
    context.drawImage(image,0,0,canvas.width,canvas.height);
}


</script>  
    
    
    
    
    
    
</body>
</html>

Submitting HTML Form to CGI

javascript 

<html>
   
   <head>
      <title>Form Validation</title>
      
      <script type = "text/javascript">
         <!--
            // Form validation code will come here.
         //-->
      </script>
      
   </head>
   
   <body>
      <form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
         <table cellspacing = "2" cellpadding = "2" border = "1">
            
            <tr>
               <td align = "right">Name</td>
               <td><input type = "text" name = "Name" /></td>
            </tr>
            
            <tr>
               <td align = "right">EMail</td>
               <td><input type = "text" name = "EMail" /></td>
            </tr>
            
            <tr>
               <td align = "right">Zip Code</td>
               <td><input type = "text" name = "Zip" /></td>
            </tr>
            
            <tr>
               <td align = "right">Country</td>
               <td>
                  <select name = "Country">
                     <option value = "-1" selected>[choose yours]</option>
                     <option value = "1">USA</option>
                     <option value = "2">UK</option>
                     <option value = "3">INDIA</option>
                  </select>
               </td>
            </tr>
            
            <tr>
               <td align = "right"></td>
               <td><input type = "submit" value = "Submit" /></td>
            </tr>
            
         </table>
      </form>
      
   </body>
</html>

Print today, yesterday and tomorrows dates using Javascript

javascript 

<html>

 <head>
 <title>date</title>
 </head>

 <body>
 <script>

var dec = new Date();
 dec.setDate( dec.getDate() -1)
 var dec_date=dec.toLocaleDateString();
 document.write( 'yesterday-date : '+ dec_date +"<br>")
 
 var cur=new Date().toLocaleDateString();
 document.write('today-date : '+ cur +"<br>")
 
 var inc=new Date()
 inc.setDate(inc.getDate()+1)
 var inc_date=inc.toLocaleDateString();
 document.write('tomorrow-date : '+ inc_date)

</script>

 </body>
</html>

Hello World Alert box using Javascript

javascript 

<html>

   <head>
      
   
      <script type="text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>
      
   </head>
   <style>
       body{background-color: blue;}
   </style>
   
   
   <body>
       
      <input type="button" onclick="sayHello()" value="Say Hello" />
   </body>
   
</html>

Decision Making using Javascript

javascript 

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<script>
    var weather= prompt("Is the weather cloudy today?");
    if(weather== "not cloudy"){
        document.write("go out and play");
    }
    else{
        document.write("stay at home bro");
    }
   
    
</script>
</head>
<body>
</body>
</html>

Local vs Global variable in Javascript

javascript 

<html>
   <body onload = checkscope();>
      <script type = "text/javascript">
         <!--
            var myVar = "global";       // Declare a global variable
            function checkscope( ) {
               var myVar = "local";    // Declare a local variable
               document.write(myVar);
            }
         //-->
      </script>
   </body>
</html>

Reverse a String using Javascript

javascript 

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<script>
function sayHello(str) {
    let str2= str.split('').reverse().toString().replace(/,/g,'');
   document.write(str2);
}
sayHello("Hola");
</script>
</head>
<body>
</body>
</html>

form validation

javascript 

<html>
   
   <head>
      <title>Form Validation</title>
      
      <script type = "text/javascript">
         <!--
            // Form validation code will come here.
         //-->
         function validate() {
      
         if( document.myForm.Name.value == "" ) {
            alert( "Please provide your name!" );
            document.myForm.Name.focus() ;
            return false;
         }
         if( document.myForm.EMail.value == "" ) {
            alert( "Please provide your Email!" );
            document.myForm.EMail.focus() ;
            return false;
         }
         if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
            document.myForm.Zip.value.length != 6 ) {
            
            alert( "Please provide a zip in the format #####." );
            document.myForm.Zip.focus() ;
            return false;
         }
         if( document.myForm.Country.value == "-1" ) {
            alert( "Please provide your country!" );
            return false;
         }
         return( true );
      }
      </script>
      
   </head>
   
   <body>
      <form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
         <table cellspacing = "2" cellpadding = "2" border = "1">
            
            <tr>
               <td align = "right">Name</td>
               <td><input type = "text" name = "Name" /></td>
            </tr>
            
            <tr>
               <td align = "right">EMail</td>
               <td><input type = "text" name = "EMail" /></td>
            </tr>
            
            <tr>
               <td align = "right">Zip Code</td>
               <td><input type = "text" name = "Zip" /></td>
            </tr>
            
            <tr>
               <td align = "right">Country</td>
               <td>
                  <select name = "Country">
                     <option value = "-1" selected>[choose yours]</option>
                     <option value = "1">USA</option>
                     <option value = "2">UK</option>
                     <option value = "3">INDIA</option>
                  </select>
               </td>
            </tr>
            
            <tr>
               <td align = "right"></td>
               <td><input type = "submit" value = "Submit" /></td>
            </tr>
            
         </table>
      </form>
      
   </body>
</html>

Comparing String using Javascript

javascript 

<html>
   <body>
   
      <script type = "text/javascript">
         <!--
            var book = "maths";
            if( book == "history" ) {
               document.write("<b>History Book</b>");
            }
         
            else if( book == "maths" ) {
               document.write("<b>Maths Book</b>");
            }
         
            else if( book == "economics" ) {
               document.write("<b>Economics Book</b>");
            }
         
            else {
               document.write("<b>Unknown Book</b>");
            }
         //-->
      </script>
      
      <p>Set the variable maths to different value and then try...</p>
   </body>
<html>

1 2 3 4 5 6 7 ... 264 Next
Advertisements
Loading...
img img img img img img

Follow

© Copyright 2019. All Rights Reserved.

Newsletter

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.