Category: Javascript

Slide images using JavaScript


Slide images using JavaScript:-Welcome Readers, In this blog I will demonstrate you that how can we make a simple slider using JavaScript code.

I must tell you it is very interesting and easy job. Just you have to follow all these steps one by one. First of all, we have to add an image tag of an HTML element so that we can iterate all images in folder one by one

<html>
<head>
<title>  Slide images using javascript ?</title>

</head>
<body>
  <img height="400" name="slide" src="images/slider/big1.jpg" width="100%" />
<!-- Create a folder with images and then create sub folder with
 name slider and copy all images in that folder -->
</body>

</html>

Then Add JavaScript code to HTML file.


<html>
<head>
<title>  Slide images using JavaScript ?</title>

</head>
<body>
  <img height="400" name="slide" src="images/slider/big1.jpg" width="100%" />
<!-- Create a folder with images and then create sub folder with
 name slider and copy all images in that folder -->
</body>
<script language="JavaScript" type="text/javascript">
        var i = 0;
        var path = new Array();

        // All LIST OF IMAGES in folder
      //  path[0] = "images/slider/big1.jpg";
       // path[1] = "images/slider/big2.jpg";
       // path[2] = "images/slider/big3.jpg";

        function swapImage() {
            document.slide.src = path[i];
            if (i < path.length - 1) i++; else i = 0;
            setTimeout("swapImage()", 7000);
        }
        window.onload = swapImage;
</script>
</html>

I have copied the code after body you should do same because it as a good practice to keep all JavaScript code after body end.

After doing this code.When you will execute this code a slider of your images will start sliding.You can increase and decrease the speed of slider by changing the value in this code.

setTimeout("swapImage()", 7000); //7000 means 7second you can increase and decrease speed

Feedback

I hope you enjoyed this post about  “Slide images using JavaScript in HTML” and provide your valuable feedback and share your problem in Technical Forum.

simple calculator

simple calculator in javascript

simple calculator in javascript:-Hi Readers,to make simple calculator in javascript is very easy and intresting.In this simple calculator we have functionalty of add,minus,multiplication,divide and square root of number

 

Source Of simple calculator

To make this, We have used some predefined function of javascript like

var x=document.getElementById("val1").value;
//getElementById get the value of element of textbox with id=val1.
var sum=parseInt(x) + parseInt(y); //addition of two values
//parseInt is used to convert the string into integer type.
document.getElementById("result").value=sqt.toString();
//converting integer value into string using toString()method

var sqt=(Math.sqrt(parseInt(x)));

 

Source Code of simple calculator in javascript

 

<!DOCTYPE html>
<html>
<head>
<title>simple calculator in javascript</title>
<head>
<script type="text/javascript">
function sum()
{
var x=document.getElementById("val1").value;
//getElementById get the value of element with id=val1.

var y=document.getElementById("val2").value;
//getElementById get the value of element with id=val2.

var sum=parseInt(x) + parseInt(y); //addition of two values
//parseInt is used to convert the string into integer type.
document.getElementById("result").value=sum.toString();

//converting integer value into string using toString()method

}
function minus()
{
var x=document.getElementById("val1").value;
//getElementById get the value of element with id=sum1.

var y=document.getElementById("val2").value;
//getElementById get the value of element with id=sum2.

var sub=parseInt(x) - parseInt(y); //subtraction of two values
//parseInt is used to convert the string into integer type.
document.getElementById("result").value=sub.toString();
//converting integer value into string using toString()method
}
function multiply()
{
var x=document.getElementById("val1").value;
var y=document.getElementById("val2").value;
var mul=parseInt(x)*parseInt(y);
//parseInt is used to convert the string into integer type.

document.getElementById("result").value=mul.toString();
//converting integer value into string using toString()method
}
function divide()
{
var x=document.getElementById("val1").value;
var y=document.getElementById("val2").value;
var divide=parseInt(x)/parseInt(y);
document.getElementById("result").value=divide.toString();
//converting integer value into string using toString()method
}
//percentage function to get %
function per()
{
var x=document.getElementById("val1").value;
var y=document.getElementById("val2").value;
var per=(parseInt(x)/parseInt(y))*100;
document.getElementById("result").value=per.toString();
//converting integer value into string using toString()method
}
//square root function to get the root of a value.
function squareRoot()
{
var x=document.getElementById("val1").value;
var sqt=(Math.sqrt(parseInt(x)));
document.getElementById("result").value=sqt.toString();
//converting integer value into string using toString()method
}
</script>
</head>
<body>
Input1:
<input type="text" name="text1" id="val1"/>
Input2:
<input type="text" name="text2" id="val2" />
<div style="margin-top:20px;">
Result(=):
<input type="text" name="result" id="result" />
</div>

<div>
<p>
<input type="button" onclick="sum()" value="SUM(+)" />
<input type="button" onclick="minus()" value="Minus(-)" />
<input type="button" onclick="multiply()" value="Multiply(*)" />
<input type="button" onclick="divide()" value="Divide(/)" />
<input type="button" onclick="per()" value="percentage(%)" />
<input type="button" onclick="squareRoot()" value="Square Root" />
</p>
</div>
</body>
</html>

I Hope You would like this Topic

 

 

 

add two numbers in JavaScript

add two numbers in JavaScript using Textbox

add two numbers in JavaScript: Hi Readers, In javascript adding two numbers, is very easy and basic steps to learn javascript.We take two numbers from textbox and display result of the sum of two numbers.

add two numbers in JavaScript

First of all, We will create a two text box and get the value of textbox using document.getElementById(“sum1”).value;  .This javascript code will get the value of textbox entered by users and save in variables defined by var.Here we have used a parseInt function to convert to int so that string concatenation couldn’t possible.

We have used return statement of javascript so that when we call the function and it could return the value on calling the function.

Suppose we have created a function with sum() and put the logic inside the function and return the sum of any two numbers on when users click the button.We have used also document.write function.This function is used to print a statement in javascript.

add two numbers using textbox Source Code

<!doctype html>
<html>
<head>
<title>add two numbers in JavaScript</title>
</head>
<!--Javascript code starts-->
<script type="text/javascript">

//function is created using function keyword.
function add()
{
var x=document.getElementById("sum1").value;
//getElementById get the value of element with id=sum1.

var y=document.getElementById("sum2").value;
//getElementById get the value of element with id=sum2.

var sum=parseInt(x) + parseInt(y); //addition of two values
//parseInt is used to convert the string into integer type.
return sum;
//return statement is used to return the value.
}

</script>
<!--javascript code ends -->

<body>

Input1:
<input type="text" name="text1" id="sum1"/>
Input2:
<input type="text" name="text2" id="sum2" />
<button type="button" onclick="document.write(add());">Output</button>

<!--onclick()event is used to display the value of add()when user clicks the button -->

</body>
</html>



I hope you would like this post about add two numbers in JavaScript using Textbox with return statement

Thankyou!

Restrict User
Restrict User

Restrict User to enter a numeric value in textbox

Hi Readers, In this blog, I am going to discuss how can we Restrict User to input only number in the textbox.Sometimes when we create a form and we have fields like mobile number and zip code.where we want Restrict User to only input number.

For this, you have basic knowledge about Html and Javascript.I have explained you this tutorial step by step.First, I have explained about HTML code and how to call a javascript function.When a user presses the key and then created a javascript function to restrict users so that it can only input numbers in a textbox.

 

 

Html Code To Restrict User

In this code, I have taken a textbox and when user click on textbox then it will call isNumberKey() Function.This function is customise function built in javacript to Restrict User to input only number on the basis of key pressed by user.

 <INPUT id="txtMobile" onkeypress="return isNumberKey(event)" 
           type="text" name="txtMobile">

 

Javascript Code To Restrict User

Here I have created a function with name isNumberKey.In this function first I get the keycode of the user’s input and then check keycode is in 0-9 series or not.If not then function return false.

48-57(0-9)

function isNumberKey(evt)
       {
          var charCode = (evt.which) ? evt.which : evt.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
       }

 

Full Code

<HTML>
  <HEAD>
<title>Restrict User</title>

    <SCRIPT>
       <!--
       function isNumberKey(evt)
       {
          var charCode = (evt.which) ? evt.which : evt.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
       }
       //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <INPUT id="txtMobile" onkeypress="return isNumberKey(event)" 
           type="textMobile" name="txtChar">
<p>Above text box take only integers not string</p>
  </BODY>
</HTML>

I hope you would like this session about  Restrict User to input only Number