الجمعة، 20 فبراير 2015

Buttons on a web-page allows users to submit data or to do any action on it and generally the actions are performed by clicking on it. Different types of buttons are used on web-page and they may be inside a form or outside a form for certain action to be performed. Buttons used within a form may be Submit Button, Reset Button, Browse Button etc.

You can set the actions performed by submit and reset buttons on a form with in a <form> tag as below.

<form action="submitpage.html" onsubmit="return validate(this)"
onreset="return conform()" method="post">
<!--Other Form Elements-->
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

In the above code, when submit button was clicked it goes to the page "submitpage.html" after validating the form by the function validate() and when reset button was clicked it clears all the form data after displaying conformation box by the function conform().

It is easier to do any task on clicking event of a button by executing certain JavaScript functions when the button was clicked. There are different ways to execute JavaScript codes on button click. In this post I am going to describe about those different methods of clicking buttons using JavaScript.

Different Ways to Click Button Using JavaScript


You can click button using JavaScript with the different methods given below.

With directly specifying JavaScript Built-in function on onClick event of Button


<input type="button" value="Display Time" 
onClick="alert(new Date().toLocaleTimeString());">


Preview:


With creating a JavaScript function and specifying it on onClick event of Button as given on the previous post: "How to create Timer Using JavaScript?"


<script>

var c=0

var t

function timedCount()

{

document.getElementById('txt').value=c

c=c+1

t=setTimeout("timedCount()", 1000)

}

</script>

<input type="button" value="Start Count" onClick="timedCount()">

<input type="button" value="0" id="txt">

Preview:
 

With creating a JavaScript function along with specifying onClick event of Button


<script>

window.onload=function(){

var btn=document.getElementById('btn');

btn.onclick=function(){alert("You Have Clicked Button");}

};

</script>

<input type=button id='btn' value='click me'>

Preview:
 

With specifying single function for multiple buttons having same class name by using for loop on onClick event of button


<script>

window.onload=function(){

var btns=document.getElementsByClassName('bt');

for(var i=0; i<btns.length; i++){

var bt=btns[i];

bt.onclick=function(){alert("You Have Clicked Button");}

}

};

</script>

<input type=button class='bt' value='Button 1'>

<input type=button class='bt' value='Button 2'>

<input type=button class='bt' value='Button 3'>

Preview:
 

I have described here some methods of clicking buttons using JavaScript . If you know other more methods of clicking buttons using JavaScript, you are welcomed to mention on the comment session at the bottom this post.



Related Search Terms


Related Posts:

How to Click Button Using JavaScript?

Posted at  12:43 ص - by mego almasry 0

Buttons on a web-page allows users to submit data or to do any action on it and generally the actions are performed by clicking on it. Different types of buttons are used on web-page and they may be inside a form or outside a form for certain action to be performed. Buttons used within a form may be Submit Button, Reset Button, Browse Button etc.

You can set the actions performed by submit and reset buttons on a form with in a &lt;form&gt; tag as below.

<form action="submitpage.html" onsubmit="return validate(this)"
onreset="return conform()" method="post">
<!--Other Form Elements-->
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

In the above code, when submit button was clicked it goes to the page "submitpage.html" after validating the form by the function validate() and when reset button was clicked it clears all the form data after displaying conformation box by the function conform().

It is easier to do any task on clicking event of a button by executing certain JavaScript functions when the button was clicked. There are different ways to execute JavaScript codes on button click. In this post I am going to describe about those different methods of clicking buttons using JavaScript.

Different Ways to Click Button Using JavaScript


You can click button using JavaScript with the different methods given below.

With directly specifying JavaScript Built-in function on onClick event of Button


<input type="button" value="Display Time" 
onClick="alert(new Date().toLocaleTimeString());">


Preview:


With creating a JavaScript function and specifying it on onClick event of Button as given on the previous post: "How to create Timer Using JavaScript?"


<script>

var c=0

var t

function timedCount()

{

document.getElementById('txt').value=c

c=c+1

t=setTimeout("timedCount()", 1000)

}

</script>

<input type="button" value="Start Count" onClick="timedCount()">

<input type="button" value="0" id="txt">

Preview:
 

With creating a JavaScript function along with specifying onClick event of Button


<script>

window.onload=function(){

var btn=document.getElementById('btn');

btn.onclick=function(){alert("You Have Clicked Button");}

};

</script>

<input type=button id='btn' value='click me'>

Preview:
 

With specifying single function for multiple buttons having same class name by using for loop on onClick event of button


<script>

window.onload=function(){

var btns=document.getElementsByClassName('bt');

for(var i=0; i<btns.length; i++){

var bt=btns[i];

bt.onclick=function(){alert("You Have Clicked Button");}

}

};

</script>

<input type=button class='bt' value='Button 1'>

<input type=button class='bt' value='Button 2'>

<input type=button class='bt' value='Button 3'>

Preview:
 

I have described here some methods of clicking buttons using JavaScript . If you know other more methods of clicking buttons using JavaScript, you are welcomed to mention on the comment session at the bottom this post.



Related Search Terms


Related Posts:

الأربعاء، 18 فبراير 2015

Bookmarklet is a small JavaScript code which is saved on a browser's bookmark while bookmarking JavaScript: URL. It is a mini program that can be easily launched from the browser's menus or toolbar.

The code in a bookmarklet runs as if it ware a script on a page and can query and set document content presentation, and behavior. As long as a bookmarklet does not return a value, it can operate on whatever document is currently displayed without replacing that document with new content.

 How to Create JavaScript Bookmarklet?


To create bookmarklet on your browser, either you can create HTML file containing JavaScript: URL and can bookmark it right clicking on the link and selecting something like bookmark link or dragging the link to your bookmarks toolbar or you can directly add new bookmark with add new bookmark option on the browser.

Here is a simple HTML code to create JavaScript URL link with a simple JavaScript code to display current time which I have previously mentioned on my previous post "How to Write JavaScript Function as URL in Hyperlink".

<a href="javascript:alert(new Date().toLocaleTimeString());"> 
check the document without writing the docment</a>

To check bookmarklet for your browser, save on bookmark the link given below which is generated from the code given above.

Check the document without writing the document

Another example of JavaScript:URL link in an <a> tag is given below, which opens a simple JavaScript expression evaluator that allows you to evaluate expressions and execute statements in the context of the page.

<a href='javascript:
var e="", r=""; /*expression evaluate the result*/
do{
/*display expression and result and ask for a new expression*/
e=prompt("Expression:"+e+"\n"+r+"\n", e);
try{r="Result:"+eval(e);} /*try to evaluate the expression*/
catch(ex){r=ex;} 
} while(e); /*continue until no expression entered or cancel clicked*/
void 0;'> 
Javascript Evaluator </a>

Even the above JavaScript:URL is written in multiple lines, the HTML parser treats it a single line, and in a single line code comments using // will not work so comments are created using /* and */. The preview of the code above is given below.

  JavaScript Evaluator

You can save this link on your browsers bookmarks and check it by lunching the bookmark.




Related Search Terms


Related Posts:

How to Create JavaScript Bookmarklet?

Posted at  12:39 ص - by mego almasry 0

Bookmarklet is a small JavaScript code which is saved on a browser's bookmark while bookmarking JavaScript: URL. It is a mini program that can be easily launched from the browser's menus or toolbar.

The code in a bookmarklet runs as if it ware a script on a page and can query and set document content presentation, and behavior. As long as a bookmarklet does not return a value, it can operate on whatever document is currently displayed without replacing that document with new content.

 How to Create JavaScript Bookmarklet?


To create bookmarklet on your browser, either you can create HTML file containing JavaScript: URL and can bookmark it right clicking on the link and selecting something like bookmark link or dragging the link to your bookmarks toolbar or you can directly add new bookmark with add new bookmark option on the browser.

Here is a simple HTML code to create JavaScript URL link with a simple JavaScript code to display current time which I have previously mentioned on my previous post "How to Write JavaScript Function as URL in Hyperlink".

<a href="javascript:alert(new Date().toLocaleTimeString());"> 
check the document without writing the docment</a>

To check bookmarklet for your browser, save on bookmark the link given below which is generated from the code given above.

Check the document without writing the document

Another example of JavaScript:URL link in an <a> tag is given below, which opens a simple JavaScript expression evaluator that allows you to evaluate expressions and execute statements in the context of the page.

<a href='javascript:
var e="", r=""; /*expression evaluate the result*/
do{
/*display expression and result and ask for a new expression*/
e=prompt("Expression:"+e+"\n"+r+"\n", e);
try{r="Result:"+eval(e);} /*try to evaluate the expression*/
catch(ex){r=ex;} 
} while(e); /*continue until no expression entered or cancel clicked*/
void 0;'> 
Javascript Evaluator </a>

Even the above JavaScript:URL is written in multiple lines, the HTML parser treats it a single line, and in a single line code comments using // will not work so comments are created using /* and */. The preview of the code above is given below.

  JavaScript Evaluator

You can save this link on your browsers bookmarks and check it by lunching the bookmark.




Related Search Terms


Related Posts:

الاثنين، 16 فبراير 2015

You can write JavaScript function as like URL in hyperlink on href attribute of <a>....</a> tag. Writing JavaScript codes in a URL is another way that JavaScript code can be included in the client side using javascript: protocol specifier. This special protocol type specifies that the body of the URL is an arbitrary string of JavaScript code to be run by the JavaScript interpreter.

The "resource" identified by a javascript: URL is the return value of the executed code, converted to a string. If the code has an undefined return value, the resource has no content.

You can use a javascript: URL anywhere you'd use a regular URL: on the href attribute of <a> tag, on the action attribute of a <form>, on the click event of a button, on the method like window.open() etc.

The syntax for writing JavaScript function within href attribute of <a> tag is given below.

<a href="javascript:myfunction();">JavaScript Link</a>

And the syntax for writing JavaScript function within the action attribute of a <form> tag is given below.

<form action="myfunction();" onsubmit="return validate(this);" method="post"> .......</form>

An example for getting new date using javascript function as a hyperlink is given below.

<a href="javascript:new Date().toLocaleTimeString();"> What time is it?</a>

While using such functions on a hyperlink, some browsers like Firefox and IE execute the code in the URL and use the returned string as the content of a new document to display.

Just as when following a link to an http:URL, the browser erases the current document and displays the new one. The value returned by the code above does not contain any HTML tags.

Other browsers like chrome and safari do not allow URLs like the one above to overwrite the containing document, they just ignore the return value of the code. But they support the JavaScript code to display the returned content on alert box as below.

<a href="javascript:alert(new Date().toLocaleTimeString());"> check the document without writing the docment</a>

In the above cases, the javascript:URL serves the same purpose as an on-click event handler. The link The link above would be better expressed as an on-click handler on a <button> element. The <a> element generally reserved for hyperlinks that load new documents.

If you want to open a new document using a javascript: URL which does not overwrite the document, you can use void operator with window.open method as given below.

<a href="javascript:void window.open('http://www.siteforinfotech.com/p/javascript-programming-tutorials.html');">Open link on new window</a>


If you want to open a new document using a javascript: URL which overwrite the current document, you can use location.replace method as given below.

<a href="javascript:location.replace('http://www.siteforinfotech.com/p/javascript-programming-tutorials.html');">Open window using location.replace</a>


Like HTML event handler attributes, JavaScript URLs are a holdover from the early days of the web and generally avoided in modern HTML. JavaScript: URLs are very useful if you need to test a small snippet of JavaScript code, you can type a javascript:URL directly into the location bar of your browser. And another most powerful use of Javascript:URLs is in browser bookmarks.

Related Search Terms


Related Posts:


How to Write JavaScript Function as URL in Hyperlink?

Posted at  12:19 ص - by mego almasry 0

You can write JavaScript function as like URL in hyperlink on href attribute of <a>....</a> tag. Writing JavaScript codes in a URL is another way that JavaScript code can be included in the client side using javascript: protocol specifier. This special protocol type specifies that the body of the URL is an arbitrary string of JavaScript code to be run by the JavaScript interpreter.

The "resource" identified by a javascript: URL is the return value of the executed code, converted to a string. If the code has an undefined return value, the resource has no content.

You can use a javascript: URL anywhere you'd use a regular URL: on the href attribute of <a> tag, on the action attribute of a <form>, on the click event of a button, on the method like window.open() etc.

The syntax for writing JavaScript function within href attribute of <a> tag is given below.

<a href="javascript:myfunction();">JavaScript Link</a>

And the syntax for writing JavaScript function within the action attribute of a <form> tag is given below.

<form action="myfunction();" onsubmit="return validate(this);" method="post"> .......</form>

An example for getting new date using javascript function as a hyperlink is given below.

<a href="javascript:new Date().toLocaleTimeString();"> What time is it?</a>

While using such functions on a hyperlink, some browsers like Firefox and IE execute the code in the URL and use the returned string as the content of a new document to display.

Just as when following a link to an http:URL, the browser erases the current document and displays the new one. The value returned by the code above does not contain any HTML tags.

Other browsers like chrome and safari do not allow URLs like the one above to overwrite the containing document, they just ignore the return value of the code. But they support the JavaScript code to display the returned content on alert box as below.

<a href="javascript:alert(new Date().toLocaleTimeString());"> check the document without writing the docment</a>

In the above cases, the javascript:URL serves the same purpose as an on-click event handler. The link The link above would be better expressed as an on-click handler on a <button> element. The <a> element generally reserved for hyperlinks that load new documents.

If you want to open a new document using a javascript: URL which does not overwrite the document, you can use void operator with window.open method as given below.

<a href="javascript:void window.open('http://www.siteforinfotech.com/p/javascript-programming-tutorials.html');">Open link on new window</a>


If you want to open a new document using a javascript: URL which overwrite the current document, you can use location.replace method as given below.

<a href="javascript:location.replace('http://www.siteforinfotech.com/p/javascript-programming-tutorials.html');">Open window using location.replace</a>


Like HTML event handler attributes, JavaScript URLs are a holdover from the early days of the web and generally avoided in modern HTML. JavaScript: URLs are very useful if you need to test a small snippet of JavaScript code, you can type a javascript:URL directly into the location bar of your browser. And another most powerful use of Javascript:URLs is in browser bookmarks.

Related Search Terms


Related Posts:


الأحد، 15 فبراير 2015

With JavaScript it is possible to execute some code not immediately after a function is called,  but after a specified time interval. This is called timing events. With timing events you can create timer like stopwatch, clock, quiz timer and many more.

For timing events in JavaScript, there are four methods that are used are

setTimeout(): This method of the window object schedules a function to run after a specified number of milliseconds elapses. setTimeout() returns a value that can be passed to clearTimeout() to cancel the execution of the scheduled function.

syntax: var t=setTimeout("javascript statement", milliseconds)

setInterval(): setInterval is like setTimeout() except that the specified function is invoked repeatedly at intervals of the specified number of milliseconds.

syntax: var t=setInterval("javascript statement", milliseconds)

clearTimeout() and clearInterval(): Like setTimeout() and setInterval() returns a value that can be passed to clearTimeout() or clearInterval() to cancel any future invocation of the scheduled function.

syntax: clearTimeout(setTimeout_variable)
syntax: clearInterval(setInterval_variable)

Execution of Function with Timer


Here is a function which will be executed after 5 seconds on button click. Here the first parameter of setTimeout() is a string that contains a

JavaScript statement and the second parameter indicates how many milliseconds from now you want to execute the first parameter.

<script>
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')", 5000)
}
</script>

<form>
<input type="button" value="Dispaly timed alertbox!" onClick="timedMsg()">
</form>

Preview of Timer



How to Create Stopwatch using JavaScript Timer


With using JavaScript timing event, you can create a stopwatch which counts the time when clicked on start button and stops counting when clicked on stop button.

Here is a JavaScript and HTML code for creating stopwatch.

<script>
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()", 1000)
}
function stopCount()
{
clearTimeout(t)
}
function clearTimer()
{
document.getElementById('txt').value=0
c=0
}
</script>

<form>
<input type="button" value="Start Count" onClick="timedCount()">
<input type="button" value="0" id="txt">
<input type="button" value="Stop Count" onClick="stopCount()">
<input type="button" value="Clear Timer" onClick="clearTimer()">
</form>

Preview of Stopwatch




How to Create Timer for Online Quiz


With using JavaScript timing event, you can create timer for online quiz, which count down from the given time and finishes quiz after given time finished. 

Here is a JavaScript and HTML code for creating timer for online quiz.

<script>
var s=59
var m=5
var q
function quizCount()
{
document.getElementById('timer').value=m+":"+s+" remaining"
s=s-1
q=setTimeout("quizCount()", 1000)
if (s<1)
{ m=m-1; s=59;}

if (m<0)
{
quizStop();
}
}
function quizStop()
{
clearTimeout(q)
document.getElementById('timer').value="Your Time Was Finished"
}
</script>

<form>
<input type="button" value="Start Count" onClick="quizCount()">
<input type="button" value="Quiz Timer" id="timer">
<input type="button" value="Stop Count" onClick="quizStop()">
</form>

Here the timer was set for 5 minutes, it countdowns from 5 to 0 and when time finishes it gives alert for time finished. You can add function to calculate and display quiz results on quizStop().

Preview of Online Quiz Timer





Related Search Terms


Related Posts:


How to create Timer Using JavaScript?

Posted at  1:38 ص - by mego almasry 0

With JavaScript it is possible to execute some code not immediately after a function is called,  but after a specified time interval. This is called timing events. With timing events you can create timer like stopwatch, clock, quiz timer and many more.

For timing events in JavaScript, there are four methods that are used are

setTimeout(): This method of the window object schedules a function to run after a specified number of milliseconds elapses. setTimeout() returns a value that can be passed to clearTimeout() to cancel the execution of the scheduled function.

syntax: var t=setTimeout("javascript statement", milliseconds)

setInterval(): setInterval is like setTimeout() except that the specified function is invoked repeatedly at intervals of the specified number of milliseconds.

syntax: var t=setInterval("javascript statement", milliseconds)

clearTimeout() and clearInterval(): Like setTimeout() and setInterval() returns a value that can be passed to clearTimeout() or clearInterval() to cancel any future invocation of the scheduled function.

syntax: clearTimeout(setTimeout_variable)
syntax: clearInterval(setInterval_variable)

Execution of Function with Timer


Here is a function which will be executed after 5 seconds on button click. Here the first parameter of setTimeout() is a string that contains a

JavaScript statement and the second parameter indicates how many milliseconds from now you want to execute the first parameter.

<script>
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')", 5000)
}
</script>

<form>
<input type="button" value="Dispaly timed alertbox!" onClick="timedMsg()">
</form>

Preview of Timer



How to Create Stopwatch using JavaScript Timer


With using JavaScript timing event, you can create a stopwatch which counts the time when clicked on start button and stops counting when clicked on stop button.

Here is a JavaScript and HTML code for creating stopwatch.

<script>
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()", 1000)
}
function stopCount()
{
clearTimeout(t)
}
function clearTimer()
{
document.getElementById('txt').value=0
c=0
}
</script>

<form>
<input type="button" value="Start Count" onClick="timedCount()">
<input type="button" value="0" id="txt">
<input type="button" value="Stop Count" onClick="stopCount()">
<input type="button" value="Clear Timer" onClick="clearTimer()">
</form>

Preview of Stopwatch




How to Create Timer for Online Quiz


With using JavaScript timing event, you can create timer for online quiz, which count down from the given time and finishes quiz after given time finished. 

Here is a JavaScript and HTML code for creating timer for online quiz.

<script>
var s=59
var m=5
var q
function quizCount()
{
document.getElementById('timer').value=m+":"+s+" remaining"
s=s-1
q=setTimeout("quizCount()", 1000)
if (s<1)
{ m=m-1; s=59;}

if (m<0)
{
quizStop();
}
}
function quizStop()
{
clearTimeout(q)
document.getElementById('timer').value="Your Time Was Finished"
}
</script>

<form>
<input type="button" value="Start Count" onClick="quizCount()">
<input type="button" value="Quiz Timer" id="timer">
<input type="button" value="Stop Count" onClick="quizStop()">
</form>

Here the timer was set for 5 minutes, it countdowns from 5 to 0 and when time finishes it gives alert for time finished. You can add function to calculate and display quiz results on quizStop().

Preview of Online Quiz Timer





Related Search Terms


Related Posts:


الجمعة، 13 فبراير 2015

Here are the steps to create a simple calculator using HTML and JavaScript which can evaluate simple arithmetic on integer numbers. Two types of inputs text and button are used here on a table within a form element and OnClick event was used to insert button values on the screen or to evaluate the numbers.

Steps to create a Simple calculator Using HTML and JavaScript


1. At first Insert a <form> element within <body> tag.
2. Create a table using <table> .....</table> tag.
3. Insert two types of Input text and button within table data of table row using <tr><td>....</td></tr> tag.
4. Assign OnClick event for all the buttons having numbers and arithmetic operators.
5. Give blank value for Clear(C) button.
6. Use eval() function to evaluate the numbers on OnClick event of equal to sign button.

Full HTML code for a Simple HTML calculator


<html>
<head></head>
<body>
<h3>Simple Calculator</h3>
<br/>
<form Name="calc">
<table border=2>
<tr>
<td colspan=4><input type=text Name="display"></td>
</tr>
<tr>
<td><input type=button value="0" OnClick="calc.display.value+='0'"></td>
<td><input type=button value="1" OnClick="calc.display.value+='1'"></td>
<td><input type=button value="2" OnClick="calc.display.value+='2'"></td>
<td><input type=button value="+" OnClick="calc.display.value+='+'"></td>
</tr>
<tr>
<td><input type=button value="3" OnClick="calc.display.value+='3'"></td>
<td><input type=button value="4" OnClick="calc.display.value+='4'"></td>
<td><input type=button value="5" OnClick="calc.display.value+='5'"></td>
<td><input type=button value="-" OnClick="calc.display.value+='-'"></td>
</tr>
<tr>
<td><input type=button value="6" OnClick="calc.display.value+='6'"></td>
<td><input type=button value="7" OnClick="calc.display.value+='7'"></td>
<td><input type=button value="8" OnClick="calc.display.value+='8'"></td>
<td><input type=button value="x" OnClick="calc.display.value+='*'"></td>
</tr>
<tr>
<td><input type=button value="9" OnClick="calc.display.value+='9'"></td>
<td><input type=button value="C" OnClick="calc.display.value=''"></td>
<td><input type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
<td><input type=button value="/" OnClick="calc.display.value+='/'"></td>
</tr>
</table>
</form>
</body>
</html>



Preview of Simple HTML calculator



Related Search Terms


Related Posts:


How to create a Simple calculator Using HTML and JavaScript

Posted at  12:00 ص - by mego almasry 0

Here are the steps to create a simple calculator using HTML and JavaScript which can evaluate simple arithmetic on integer numbers. Two types of inputs text and button are used here on a table within a form element and OnClick event was used to insert button values on the screen or to evaluate the numbers.

Steps to create a Simple calculator Using HTML and JavaScript


1. At first Insert a <form> element within <body> tag.
2. Create a table using <table> .....</table> tag.
3. Insert two types of Input text and button within table data of table row using <tr><td>....</td></tr> tag.
4. Assign OnClick event for all the buttons having numbers and arithmetic operators.
5. Give blank value for Clear(C) button.
6. Use eval() function to evaluate the numbers on OnClick event of equal to sign button.

Full HTML code for a Simple HTML calculator


<html>
<head></head>
<body>
<h3>Simple Calculator</h3>
<br/>
<form Name="calc">
<table border=2>
<tr>
<td colspan=4><input type=text Name="display"></td>
</tr>
<tr>
<td><input type=button value="0" OnClick="calc.display.value+='0'"></td>
<td><input type=button value="1" OnClick="calc.display.value+='1'"></td>
<td><input type=button value="2" OnClick="calc.display.value+='2'"></td>
<td><input type=button value="+" OnClick="calc.display.value+='+'"></td>
</tr>
<tr>
<td><input type=button value="3" OnClick="calc.display.value+='3'"></td>
<td><input type=button value="4" OnClick="calc.display.value+='4'"></td>
<td><input type=button value="5" OnClick="calc.display.value+='5'"></td>
<td><input type=button value="-" OnClick="calc.display.value+='-'"></td>
</tr>
<tr>
<td><input type=button value="6" OnClick="calc.display.value+='6'"></td>
<td><input type=button value="7" OnClick="calc.display.value+='7'"></td>
<td><input type=button value="8" OnClick="calc.display.value+='8'"></td>
<td><input type=button value="x" OnClick="calc.display.value+='*'"></td>
</tr>
<tr>
<td><input type=button value="9" OnClick="calc.display.value+='9'"></td>
<td><input type=button value="C" OnClick="calc.display.value=''"></td>
<td><input type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
<td><input type=button value="/" OnClick="calc.display.value+='/'"></td>
</tr>
</table>
</form>
</body>
</html>



Preview of Simple HTML calculator



Related Search Terms


Related Posts:


الخميس، 12 فبراير 2015

Round, Random, Min and Max are the methods used in math object in JavaSript. Math object allows you to perform common mathematical tasks. The math object includes several mathematical values and functions. Yo do not need to define the math object before using it. In this post I am describing How to use Round, Random, Min and Max in JavaSript.

How to use Round() in JavaScript


Using round() method in math object, you can round the given numbers as given below.

<script>
document.write(Math.round(0.60) +"<br/>");
document.write(Math.round(0.40) +"<br/>");
document.write(Math.round(0.49) +"<br/>");
document.write(Math.round(-3.69) +"<br/>");
document.write(Math.round(-6.10) +"<br/>");
</script>

Preview:


How to use Random() in JavaScript


You can use the random() method in math object,you can return a random number between 0 and 1 as given below.

<script>
document.write(Math.random());
</script>

Preview:


How to use Max() in JavaScript


Using max() method in math object, you can return the number with the highest value of two specified numbers as the following.

<script>
document.write(Math.max(9,3) +"<br/>");
document.write(Math.max(-5,7) +"<br/>");
document.write(Math.max(10,21) +"<br/>");
document.write(Math.max(-5,-9) +"<br/>");
document.write(Math.max(6.12,7.98) +"<br/>");
</script>

Preview:



How to use Min() in JavaScript


Using min() method in math object, you can return the number with the highest value of two specified numbers as the following.

<script>
document.write(Math.min(9,3) +"<br/>");
document.write(Math.min(-5,7) +"<br/>");
document.write(Math.min(10,21) +"<br/>");
document.write(Math.min(-5,-9) +"<br/>");
document.write(Math.min(6.12,7.98) +"<br/>");
</script>

Preview:


There are also other more methods on JavaScript math object to perform common mathematical tasks which are listed below along with their description. You can use them as the methods given above.
  • abs(x):  Returns the absolute value of a number
  • ceil(x): Returns the value of a number rounded upwards to the nearest integer
  • exp(x):  Returns the value or E^x.
  • floor(x): Returns the value of a number rounded downwards to the nearest integer.
  • log(x):  Returns the natural logarithm (base E) of a number.
  • pow(x,y): Returns the value of x to the power of y.
  • sqrt(x):  Returns the square root of a number.



Related Search Terms

How to use Round, Random, Min and Max in JavaSript

Posted at  12:07 ص - by mego almasry 0

Round, Random, Min and Max are the methods used in math object in JavaSript. Math object allows you to perform common mathematical tasks. The math object includes several mathematical values and functions. Yo do not need to define the math object before using it. In this post I am describing How to use Round, Random, Min and Max in JavaSript.

How to use Round() in JavaScript


Using round() method in math object, you can round the given numbers as given below.

<script>
document.write(Math.round(0.60) +"<br/>");
document.write(Math.round(0.40) +"<br/>");
document.write(Math.round(0.49) +"<br/>");
document.write(Math.round(-3.69) +"<br/>");
document.write(Math.round(-6.10) +"<br/>");
</script>

Preview:


How to use Random() in JavaScript


You can use the random() method in math object,you can return a random number between 0 and 1 as given below.

<script>
document.write(Math.random());
</script>

Preview:


How to use Max() in JavaScript


Using max() method in math object, you can return the number with the highest value of two specified numbers as the following.

<script>
document.write(Math.max(9,3) +"<br/>");
document.write(Math.max(-5,7) +"<br/>");
document.write(Math.max(10,21) +"<br/>");
document.write(Math.max(-5,-9) +"<br/>");
document.write(Math.max(6.12,7.98) +"<br/>");
</script>

Preview:



How to use Min() in JavaScript


Using min() method in math object, you can return the number with the highest value of two specified numbers as the following.

<script>
document.write(Math.min(9,3) +"<br/>");
document.write(Math.min(-5,7) +"<br/>");
document.write(Math.min(10,21) +"<br/>");
document.write(Math.min(-5,-9) +"<br/>");
document.write(Math.min(6.12,7.98) +"<br/>");
</script>

Preview:


There are also other more methods on JavaScript math object to perform common mathematical tasks which are listed below along with their description. You can use them as the methods given above.
  • abs(x):  Returns the absolute value of a number
  • ceil(x): Returns the value of a number rounded upwards to the nearest integer
  • exp(x):  Returns the value or E^x.
  • floor(x): Returns the value of a number rounded downwards to the nearest integer.
  • log(x):  Returns the natural logarithm (base E) of a number.
  • pow(x,y): Returns the value of x to the power of y.
  • sqrt(x):  Returns the square root of a number.



Related Search Terms

الأربعاء، 11 فبراير 2015

In the previous post, I have already described about "How to Loop Through JavaScript Array". Along with accessing an element of an array using looping statements, you can also concatenate, join and sort an array in JavaScript. In this post you will learn about How to Concatenate, Join and Sort Array in JavaScript.

How to Join Two Arrays using Concat()


Using concat() method, you can join to arrays array1 and array2 as below.

<script>
var array1=new Array(3);
array1[0]="Saab"
array1[1]="Volvo"
array1[2]="BMW"

var array2=new Array(3);
array2[0]="Yamaha"
array2[1]="Honda"
array2[2]="Bajaj"

var array3=array1.concat(array2);

for(i=0; i<array3.length;i++)
{
document.write(array3[i]+"<br/>")
}
</script>

Preview:



Here the method array1.concat(array2) concentrates two arrays array1 and array2.

How to Put Array Elements Into a String using Join()


You can use the join() method to put all the elements of an array into a string as the following script.


<script>
var array1=new Array(3);
array1[0]="Yamaha"
array1[1]="Honda"
array1[2]="Bajaj"

document.write(array1.join()+"<br/>");
document.write (array1.join("."));
</script>


Preview:



How to Sort String Array using sort()


Using sort() method, you can sort the elements of string array as given below.

<script>
var array1=new Array(6);
array1[0]="Saab"
array1[1]="Volvo"
array1[2]="BMW"
array1[3]="Yamaha"
array1[4]="Honda"
array1[5]="Bajaj"

document.write(array1+"<br/>");
document.write (array1.sort());
</script>

Preview:


How to Sort Numeric Array using sort()


Using sort() method, you can sort the elements of numeric array as given below.

<script>
var array2=new Array(6);
array2[0]=10
array2[1]=5
array2[2]=40
array2[3]=25
array2[4]=35
array2[5]=95
function sortNumber(a,b) {return a - b;}

document.write(array2+"<br/>");
document.write (array2.sort(sortNumber));

</script>

Preview:



There are also other more methods for manipulating array elements, which are listed below along with their description. You can use them as the methods given above.

  • pop(): Removes and returns the last element of an array
  • push(): Adds one or more elements to the end of an array and returns the new length.
  • reverse(): Reverses the order of the elements in an array
  • toString(): Converts an array to string and returns the result.

Read Next:How to use Round, Random, Min and Max in JavaSript

Related Search Terms

How to Concatenate, Join and Sort Array in JavaScript?

Posted at  9:28 م - by mego almasry 0

In the previous post, I have already described about "How to Loop Through JavaScript Array". Along with accessing an element of an array using looping statements, you can also concatenate, join and sort an array in JavaScript. In this post you will learn about How to Concatenate, Join and Sort Array in JavaScript.

How to Join Two Arrays using Concat()


Using concat() method, you can join to arrays array1 and array2 as below.

<script>
var array1=new Array(3);
array1[0]="Saab"
array1[1]="Volvo"
array1[2]="BMW"

var array2=new Array(3);
array2[0]="Yamaha"
array2[1]="Honda"
array2[2]="Bajaj"

var array3=array1.concat(array2);

for(i=0; i<array3.length;i++)
{
document.write(array3[i]+"<br/>")
}
</script>

Preview:



Here the method array1.concat(array2) concentrates two arrays array1 and array2.

How to Put Array Elements Into a String using Join()


You can use the join() method to put all the elements of an array into a string as the following script.


<script>
var array1=new Array(3);
array1[0]="Yamaha"
array1[1]="Honda"
array1[2]="Bajaj"

document.write(array1.join()+"<br/>");
document.write (array1.join("."));
</script>


Preview:



How to Sort String Array using sort()


Using sort() method, you can sort the elements of string array as given below.

<script>
var array1=new Array(6);
array1[0]="Saab"
array1[1]="Volvo"
array1[2]="BMW"
array1[3]="Yamaha"
array1[4]="Honda"
array1[5]="Bajaj"

document.write(array1+"<br/>");
document.write (array1.sort());
</script>

Preview:


How to Sort Numeric Array using sort()


Using sort() method, you can sort the elements of numeric array as given below.

<script>
var array2=new Array(6);
array2[0]=10
array2[1]=5
array2[2]=40
array2[3]=25
array2[4]=35
array2[5]=95
function sortNumber(a,b) {return a - b;}

document.write(array2+"<br/>");
document.write (array2.sort(sortNumber));

</script>

Preview:



There are also other more methods for manipulating array elements, which are listed below along with their description. You can use them as the methods given above.

  • pop(): Removes and returns the last element of an array
  • push(): Adds one or more elements to the end of an array and returns the new length.
  • reverse(): Reverses the order of the elements in an array
  • toString(): Converts an array to string and returns the result.

Read Next:How to use Round, Random, Min and Max in JavaSript

Related Search Terms

الاشتراك في: الرسائل (Atom)
Copyright © 2013 hello1. by Bloggertheme9 Powered by Blogger.
WP Theme-junkie converted by Blogger template