Wednesday, January 24, 2018

How to use Automated Animation In Javascript.

The moveRight() function is calling setTimeout() function to set the position ofimgObj.
We have added a new function stop() to clear the timer set by setTimeout()  function and to set the object at its initial position.

Program

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

var imgObj=null;
var animate;
function  init(){
imgObj=document.getElementById('myImage');
imgObj.style.position='relative';
imgObj.style.left= '0px';
}
function moveRight(){
imgObj.style.left= parseInt(imgObj.style.left) + 10 + 'px';
animate=styleTimeout(moveRight,20);
}
function stop(){

clearTimeout(animate);
imgObj.style.left='0px';
}
window.onload =init;

</script>
</head>
<body>
<form>
<img id="myImage" src="/home/imperial-android/Pictures/Screenshot from 2016-11-14 11-41-49.png"/>
        <p>Click button below to move the image to right</p>

<input type="button" value="start" onclick="moveRight();"/>
<input type="button" value="stop" onclick="stop();"/>

</form>
</body>
</html>


Output



How to Use manual Animation in javascript

We are using the JavaScript function getElementById()  and then assigning it to a global variable imgObj.



Program

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

var imgObj=null;
function  init(){
imgObj=document.getElementById('myImage');
imgObj.style.position='relative';
imgObj.style.left= '0px';
}
function moveRight(){
imgObj.style.left= parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init;

</script>
</head>
<body>
<form>
<img id="myImage" src="/home/imperial-android/Pictures/Screenshot from 2016-11-14 11-41-49.png"/>
<input type="button" value="click Me" onclick="moveRight();"/>

</form>
</body>
</html>


Output



How to use Cookie in Javascript.

   The simplest way to create a cookie is to assign a string value to the document.


Program

<html>
<head>
<title>abc</title>
<script type="text/javascript">
function writecookie(){

if(document.myform.custmor.value == ""){
alert("enter some value");
return;
}
cookievalue= escape(document.myform.custmor.value) + ";" ;
document.cookie ="name" +cookievalue;
document.write("setting cookie:"  + "name =" + cookievalue );
}
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="custmor"/>
<input type="button" value="set cookie" onclick="writecookie();" />
</form>

</body>
</html>




Output






Tuesday, January 23, 2018

How to use print function of window object in Javascript.

JavaScript helps you to implement this functionality using the print function of  window object.

<html>
<head>
<title>abc</title>
<script type="text/javascript">
</script>
</head>
<body>
<form>
<input type="button" value="print" onclick="window.print();"/>
</form>
</body>
</html>
   

Output



How to use alert Expression by Void Keyword in javascript.

Void is  an important keyword in JavaScript which can be used as a unary operator that appears before its single operand.



<html>
   <head>
   
      <script type="text/javascript">
         <!--
         //-->
      </script>
      
   </head>
   <body>
   
      <p>Click the following, This won't react at all...</p>
      <a href="javascript:void(alert('Warning!!!'))">Click me!</a>
      
   </body>
</html>


Output





How to Use Alert Box in Javascript


An alert dialog box is mostly used to give a warning message to the users.


<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>

Output





Multiple parameters in Function using Javascript.




<html>
   <head>
 
      <script type="text/javascript">
         function sayHello(name,email,password,age)
         {
            document.write (name + " has  " +  email + " email id  " + password  + "password " + age + "age ");
         }
      </script>
   
   </head>
   <body>

      <form>
         <input type="button" onclick="sayHello('Zara','abc@gmail.com' ,' 12345 ',' 30 ')" value="Say Hello">
      </form>
   
      <p>Use different parameters inside the function and then try...</p>
   </body>
</html>


Output 





How To Use H1 To H6 Tag In HTML.

<h1> defines the most important heading.
 <h6> defines the least important heading.


Program:
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

Output

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

How To Use The onerror() Method In Javascript.

The onerror event handler was the first feature to facilitate error handling in JavaScript. 


<html>
   
   <head>
      
      <script type="text/javascript">
         <!--
            window.onerror = function () {
               alert("An error occurred.");
            }
         //-->
      </script>
      
   </head>
   
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type="button" value="Click Me" onclick="myFunc();" />
      </form>
      
   </body>
</html>

Output



How To Use Throw Satement in Javascript.

You can use Throw statement In Javascript

<html>
   
   <head>
      
      <script type="text/javascript">
         <!--
            function myFunc()
            {
               var a = 100;
               var b = 0;
               
               try{
                  if ( b == 0 ){
                     throw( "Divide by zero error." ); 
                  }
                  
                  else
                  {
                     var c = a / b;
                  }
               }
               
               catch ( e ) {
                  alert("Error: " + e );
               }
            }
         //-->
      </script>
      
   </head>
   
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type="button" value="Click Me" onclick="myFunc();" />
      </form>
      
   </body>
</html>

Output