How to Scroll Top or Bottom of Document Using JavaScript

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">There are different methods to scroll HTML document using JavaScript, You can scroll the document to Top, Bottom or in any part or to view any element in the document using JavaScript. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">To scroll the document using JavaScript, there is a scrollTo() method in window object which takes the X and Y coordinates of a point and sets these as the scrollbar offsets. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">The scrollTo() method scrolls the window so that the specified point is in the upper left corner of the view-port. If you specify a point that is too close to the bottom or too close to the right edge of the document, the browser will move it as close as possible to the upper left corner.</div><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;">How to Scroll Bottom of Document Using JavaScript</h3><div style="text-align: justify;"><br />You can use the following set of JavaScript codes that scroll the browser to the bottom most page of the document. </div><div style="text-align: justify;"><br /><blockquote class="tr_bq">var documentHeight=documentElement.offsetHeight;<br />var viewportHeight=window.innerHeight;<br />window.scrollTo(0, documentHeight-viewportHeight);</blockquote></div><div style="text-align: justify;"><br />Here the first variable documentHeight specifies the read only offsetHeight properties of any HTML element return its on screen height, in CSS pixels and the returned size include the element border and padding but not margin.<br /><br />And the second variable, viewportHeight specifies the height of viewport, which is obtained from innerHeight property of window object. <br /><br />You can execute this code on onclick event of JavaScript hyperlink or on onclik event of any button or text as given below.<br /><br /><pre class="prettyprint">function gobottom(){<br />var documentHeight=document.documentElement.offsetHeight;<br />var viewportHeight=window.innerHeight;<br />window.scrollTo(0,documentHeight-viewportHeight);<br />}<br /></pre><br />You can call this function gobottom() within HTML file as below.<br /><br /><pre class="prettyprint"><input type="button" value="Go To Bottom" onclick="gobottom();"> </pre><br />On the other way, you can execute onclick event of button with assigning a function on onload event of window as below.<br /><br /><pre class="prettyprint"><script><br />window.onload=function(){<br />var bottom=document.getElementById('bottom');<br />bottom.onclick=function(){<br />var documentHeight=document.documentElement.offsetHeight;<br />var viewportHeight=window.innerHeight;<br />window.scrollTo(0,documentHeight-viewportHeight);}<br /></script><br /></pre><br />You can call this function by placing id attribute within HTML file as below.<br /><br /><pre class="prettyprint"><input type="button" value="Go To Bottom" id="bottom"> <br /></pre><br /><h4>Preview:</h4><br /><script>window.onload=function(){ var bottom=document.getElementById('bottom'); bottom.onclick=function(){ var documentHeight=document.documentElement.offsetHeight; var viewportHeight=window.innerHeight; window.scrollTo(0,documentHeight-viewportHeight);} var top=document.getElementById('top'); top.onclick=function(){window.scrollTo(0,0);} }; </script> <input id="bottom" type="button" value="Go To Bottom" /> <br /><br /><h3>How to Scroll Top of Document Using JavaScript</h3><br /><a name='more'></a><br />You can use the following JavaScript code that scroll the browser to the top most page of the document.<br /><br /><blockquote class="tr_bq">window.scroll(0,0);</blockquote><br />You can execute this code on onclick event of JavaScript hyper-link or on onclick event of any button or text as given below.<br /><br /><pre class="prettyprint"><script><br />window.onload=function(){<br />var top=document.getElementById('top');<br />top.onclick=function(){window.scrollTo(0,0);}<br /></script><br /></pre><br />You can call this function by placing id attribute within HTML file as given below.<br /><br /><pre class="prettyprint"><input type="button" value="Go To Top" id="top"> <br /></pre><br /><h4>Preview:</h4><input id="top" type="button" value="Go To Top" /> <br /><br /><h3>How to Scroll Document Automatically Using JavaScript</h3><br />You can scroll the document automatically using scrollBy() method which is similar to scroll() and scrollTo(), but its arguments are relative and are added to the current scrollbar offsets.<br /><br />For example, you can use the following code to scroll 10 pixels down every 200ms.<br /><br /><blockquote class="tr_bq">javascript:void setInterval(function(){scrollBy(0,10)}, 200);</blockquote><br /><h3>How to Scroll Document to View Certain Element Using JavaScript   </h3><br />Instead of scrolling to a numeric location in document, you can just scroll that a certain element in the document is visible. It can be done easily scrollIntoView() method on the desired HTML element and this method insures that the element on which it is invoked is visible in the viewport. <br /><br />By default, the scrollIntoView() method tries to put the top edge of the element at or near the top of the viewport. The browser will also scroll the viewport horizontally as needed to make the element visible.<br /><br /><br /><br /><h3>Related Search Terms</h3><ul><li><h3><a href="http://www.siteforinfotech.com/search?q=scroll+top+using+javascript" target="_blank">How to Scroll to Top Using JavaScript</a> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=http://www.siteforinfotech.com/search?q=scroll+bottom+using+javascript" target="_blank">How to Scroll to Bottom Using JavaScript</a></h3><h3></h3><h3> </h3> </li></ul><h3> Related Posts:</h3><ul><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-window-using-javascript.html">How to Show Pop Up Window Using JavaScript</a></h3></li><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-go-back-browsing-history-using.html">How to go Back Browsing History Using JavaScript</a></h3></li><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-click-button-using-javascript.html">How to Click Button Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul></div></div>

How to Scroll Top or Bottom of Document Using JavaScript

There are different methods to scroll HTML document using JavaScript, You can scroll the document to Top, Bottom or in any part or to view any element in the document using JavaScript. To scroll the d…

مزيد من المعلومات »

How to Create Table of Contents Using JavaScript

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><style>#TOC {border:solid black 1px; margin:10px; padding:10px;} .TOCEntry{font-family:sans-serief;} .TOCEntry a{text-decoration:none;} .TOCLevel1{font-size:17pt; font-weight:bold;} .TOCLevel2{font-size:16pt; font-weight:bold;} .TOCLevel3{font-size:15pt; font-weight:bold;} .TOCLevel4{font-size:14pt; margin-left:.25in;} .TOCSectNum{display:none;} </style><script>window.onload=function(){ function getSelectedText(){ if (window.getSelection) return window.getSelection().toString()+"<br/>"+document.URL; else if (document.selection) return document.selection.createRange().text+"<br/>"+document.URL; } var toc=document.getElementById("TOC"); if(!toc) { toc=document.createElement("div"); toc.id="TOC"; document.body.insertBefore(toc, document.body.firstChild); } var headings; if (document.querySelectorAll) headings=document.querySelectorAll("#tp h1, #tp h2, #tp h3, #tp h4, #tp h5, #tp h6"); else headings=findHeadings(document.body, []); function findHeadings(root, sects){ for(var c=root.firstChild; c!=null; c=c.nextSibling){ if (c.nodeType!==1) continue; if (c.tagName.length==2 && c.tagName.charAt(0)=="H") sects.push(c); else findHeadings(c, sects); } return sects; } var sectionNumbers=[0,0,0,0,0,0]; for(var h=0; h<headings.length; h++) { var heading=headings[h]; if(heading.parentNode==toc) continue; var level=parseInt(heading.tagName.charAt(1)); if (isNaN(level)||level<1||level>6) continue; sectionNumbers[level-1]++; for(var i=level; i<6; i++) sectionNumbers[i]=0; var sectionNumber=sectionNumbers.slice(0, level).join("."); var span=document.createElement("span"); span.className="TOCSectNum"; span.innerHTML=sectionNumber; heading.insertBefore(span, heading.firstChild); heading.id="TOC"+sectionNumber; var anchor=document.createElement("a"); heading.parentNode.insertBefore(anchor, heading); anchor.appendChild(heading); var link=document.createElement("a"); link.href="#TOC"+sectionNumber; link.innerHTML=heading.innerHTML; var entry=document.createElement("div"); entry.className="TOCEntry TOCLevel" + level; entry.appendChild(link); toc.appendChild(entry); } }; </script></div><div id="TOC" style="text-align: justify;"></div><div style="text-align: justify;"><br /></div><div dir="ltr" style="text-align: justify;" trbidi="on"><div id="tp">You can create dynamic table of contents for any HTML document using JavaScript which can show the list of headings from h1 to h6 with links to the headings and make easier to navigate through the document. <br /><br />In this post I am going to describe about the steps to Create Table of Contents Using JavaScript and about the JavaScript codes required to create dynamic table of contents. <br /><br />To create this set of JavaScript codes for creating table of contents, at first you have to know the different JavaScript concepts like selecting elements, document traversal, setting element attributes, setting innerHTML property, creating nodes and inserting then into the document. <br /><br /><br /><h3>Steps to Create Table of Contents Using JavaScript</h3><br />At first create window.onload function that runs automatically when the document finishes loading as given below.<br /><br /><pre class="prettyprint">window.onload=function(){<br /><br />function getSelectedText(){<br />if (window.getSelection)<br />return window.getSelection().toString()+"<br />"+document.URL;<br />else if (document.selection)<br /> return document.selection.createRange().text+"<br />"+document.URL;<br />}<br />var toc=document.getElementById("TOC");<br />if(!toc) {<br /> toc=document.createElement("div");<br /> toc.id="TOC";<br /> document.body.insertBefore(toc, document.body.firstChild);<br />}<br /></pre><br />When the above function runs, it first looks for a document element with an id of "TOC". If there is no such element it creates on at the start of the document.<br /><br />Add the following codes to the function to find all <h1> through <h6> tags and sets them as headings.<br /><br /><pre class="prettyprint">var headings;<br />if (document.querySelectorAll) <br />headings=document.querySelectorAll("h1, h2, h3, h4, h5, h6");<br />else<br />headings=findHeadings(document.body, []);<br /></pre><br />Then recursively traverse the document body looking for headings using function: findHeadings(root, sects){  }<br /><br />Initialize an array: var sectionNumber=[0,0,0,0,0,0]; that keeps track of section numbers and add section numbers to each section numbers to each section heading and wrap the headings in named anchors so that the TOC can link to them. <br /><br />Write CSS code to style created table of contents. Where all entries have a class "TOCEntry" and the section headings from <h1> to <h6> have class name "TOCLevel1" to "TOCLevel6" and the section number inserted into headings have class "TOCSectNum".<br /><br /><h3>Full CSS Code To Style Table of Contents</h3><br /> Here is a full CSS code within <style> </style> tag to style table of contents.<br /><br /><pre class="prettyprint"><style><br />#TOC {border:solid black 1px; margin:10px; padding:10px;}<br />.TOCEntry{font-family:sans-serief;}<br />.TOCEntry a{text-decoration:none;}<br />.TOCLevel1{font-size:17pt; font-weight:bold;}<br />.TOCLevel2{font-size:16pt; font-weight:bold;}<br />.TOCLevel3{font-size:15pt; font-weight:bold;}<br />.TOCLevel4{font-size:14pt; margin-left:.25in;}<br />.TOCSectNum{display:none;}<br /></style><br /></pre><br /><h3>Full JavaScript Code To Create Table of Contents</h3><br /><a name='more'></a><br />Here is a full JavaScript Code To Create Table of Contents within <script> </script> tag.<br /><br /><pre class="prettyprint"><script><br />window.onload=function(){<br /><br />function getSelectedText(){<br />if (window.getSelection)<br />return window.getSelection().toString()+"<br/>"+document.URL;<br />else if (document.selection)<br /> return document.selection.createRange().text+"<br/>"+document.URL;<br />}<br /><br />var toc=document.getElementById("TOC");<br />if(!toc) {<br /> toc=document.createElement("div");<br /> toc.id="TOC";<br /> document.body.insertBefore(toc, document.body.firstChild);<br />}<br />var headings;<br />if (document.querySelectorAll) <br />headings=document.querySelectorAll("h1, h2, h3, h4, h5, h6");<br />else<br />headings=findHeadings(document.body, []);<br /><br />function findHeadings(root, sects){<br /> for(var c=root.firstChild; c!=null; c=c.nextSibling){<br />if (c.nodeType!==1) continue;<br />if (c.tagName.length==2 && c.tagName.charAt(0)=="H")<br />sects.push(c);<br />else<br />findHeadings(c, sects);<br />}<br />return sects;<br />}<br /><br />var sectionNumbers=[0,0,0,0,0,0];<br /><br />for(var h=0; h<headings.length; h++) {<br /> var heading=headings[h];<br /><br />if(heading.parentNode==toc) continue;<br /><br />var level=parseInt(heading.tagName.charAt(1));<br />if (isNaN(level)||level<1||level>6) continue;<br /><br />sectionNumbers[level-1]++;<br />for(var i=level; i<6; i++) sectionNumbers[i]=0;<br /><br />var sectionNumber=sectionNumbers.slice(0, level).join(".");<br /><br />var span=document.createElement("span");<br />span.className="TOCSectNum";<br />span.innerHTML=sectionNumber;<br />heading.insertBefore(span, heading.firstChild);<br />heading.id="TOC"+sectionNumber;<br />var anchor=document.createElement("a");<br />heading.parentNode.insertBefore(anchor, heading);<br />anchor.appendChild(heading);<br /><br />var link=document.createElement("a");<br />link.href="#TOC"+sectionNumber; <br />link.innerHTML=heading.innerHTML;<br /><br />var entry=document.createElement("div");<br />entry.className="TOCEntry TOCLevel" + level;<br />entry.appendChild(link);<br /><br />toc.appendChild(entry);<br />}<br />};<br /><br /></script><br /></pre><br />You can see the preview of Table of contents generated by JavaScript code above. If you have any problem or difficulties while implementing the above JavaScript code, you are welcomed to mention on the comment session at the bottom this post.</div><br /><br /><br /><div></div><h3>Related Search Terms</h3><ul><li><h3><a href="http://www.siteforinfotech.com/search?q=toc+using+javascript" target="_blank">TOC for HTML Document Using JavaScript</a> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=http://www.siteforinfotech.com/search?q=table+of+contents+javascript" target="_blank">Create Table of Contents Using JavaScript</a></h3><h3></h3><h3> </h3> </li></ul><h3> Related Posts:</h3><ul><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-window-using-javascript.html">How to Show Pop Up Window Using JavaScript</a></h3></li><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-go-back-browsing-history-using.html">How to go Back Browsing History Using JavaScript</a></h3></li><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-click-button-using-javascript.html">How to Click Button Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul></div></div>

How to Create Table of Contents Using JavaScript

#TOC {border:solid black 1px; margin:10px; padding:10px;} .TOCEntry{font-family:sans-serief;} .TOCEntry a{text-decoration:none;} .TOCLevel1{font-size:17pt; font-weight:bold;} .TOCLevel2{font-size:16pt…

مزيد من المعلومات »

How to Select Document Elements Using JavaScript?

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">You have to select the document elements for manipulation of elements of document to complete any task for the document design or action of the document using JavaScript codes. <br /><br />There are number of ways to select elements to query a document for an element or elements in order to manipulate elements of the document, to obtain or select the element objects that refer to those document elements. <br /><br />The different ways to select elements to query a document are explained below. </div><br /><h3 style="text-align: left;">Selecting Elements By ID Attribute</h3><div style="text-align: justify;"><br />Any of the HTML element can have the unique id attribute within the document. You can select an element based on this unique id with getElementById() method of the document object. <br /><br />To select any element with id 'elt' you can use the following code.</div><br /><blockquote class="tr_bq">var elt=document.getElementById('elt');</blockquote><div style="text-align: justify;"><br /></div><h3 style="text-align: left;">Selecting Elements By Name Attribute</h3><div style="text-align: justify;"><br />Name attribute assigns the name of the element and it does not have to be unique. You can select the elements by name using getElementsByName() method. <br /><br />To select any element with name 'address' you can use the following code.</div><br /><blockquote class="tr_bq">var addresses=document.getElementsByName("address");</blockquote><div style="text-align: justify;"><br />If there is a only one element with a given name, you use the name directly as the document property to assign the value of the element as given below.<br /><br />To get the element for the from <form name="addresses">, you can use the following code. </div><br /><blockquote class="tr_bq">var addresses=document.addresses;</blockquote><div style="text-align: justify;"><br /></div><h3 style="text-align: left;">Selecting Elements By TagName</h3><div style="text-align: justify;"><br />You can select any HTML or XML elements by tagName using the getElementsByTagName() method of the document object. To select all <p> elements, you can use the following code. </div><br /><blockquote class="tr_bq">var para=document.getElementsByTagName("p");</blockquote><div style="text-align: justify;"><br />You can select any element with given tagName with specifying the position number according to the order of the document. You can select first <p> element of the document using the following. </div><br /><blockquote class="tr_bq">var firstpara=document.getElementsByTagName("p")[0];</blockquote><div style="text-align: justify;"><br />Also to find all <span> elements inside the first <p> element of document, you can write.</div><br /><blockquote class="tr_bq">var firstpara=document.getElementsByTagName("p")[0];<br />var firstparaspans=firstpara.getElementsByTagName("span");</blockquote><div style="text-align: justify;"><br /></div><h3 style="text-align: left;">Selecting Elements By CSS Class</h3><div style="text-align: justify;"><br />It is the another way to select elements from the document. You can select one or more elements with the given class name by using getElementsByClassName() method. <br /><br />To select elements with ClassName 'color' you can use the following code.</div><br /><blockquote class="tr_bq">var colors=document.getElementByClassName("color");</blockquote><div style="text-align: justify;"><br />If you have to select elements having more than one class name, can do as below.<br /><br />To select any element with ClassName 'color'  and 'design' you can use the following code.</div><br /><blockquote class="tr_bq">var colors=document.getElementByClassName("color design");</blockquote><div style="text-align: justify;"><br /></div><h3 style="text-align: left;">Selecting Elements By CSS Selectors</h3><div style="text-align: justify;"><br />You can also select document elements with specifying CSS selectors which are used on CSS style-sheet. You can select one or more elements with the given CSS selectors by using querySelectorAll method.<br /><br />To select an element with id 'nav' you can use the following code.</div><br /><blockquote class="tr_bq">var nav=document.querySelectorAll("#nav");</blockquote><div style="text-align: justify;"><br />To select a paragraph written in english you can use the following code.</div><br /><blockquote class="tr_bq">var eng=document.querySelectorAll("p[lang="en"]");</blockquote><div style="text-align: justify;"><br />Here are other examples of CSS selectors to select elements from the document.<br /><br />#log span     // selects any <span> descendant of the element with id="log"<br /><br />#log>span     // Selects <span> child of the element with id="log"<br /><br />*[name="x"]     // Selects any element with a name="x" attribute.<br /><br /><br />You can also use document.all[] method, which is a collection that represented all the elements in the document as the following although this method is replaced by standard methods like getElementById() and getElementsByTagName().<br /><br />document.all[0]         // Selects the first element in the document <br />document.all["navbar"]         // Selects all elements with id or name="navbar"<br />document.all.tags("div")     // Selects all <div> elements in the document<br />document.all.tags("p")[0]     // The first <p> in the document</div><div style="text-align: justify;"></div><div style="text-align: justify;"></div><div style="text-align: justify;"><br /><a name='more'></a><br /></div><div style="text-align: justify;"><br /></div><h3>Related Search Terms</h3><ul><li><h3><a href="http://www.siteforinfotech.com/search?q=selecting+elements+javascript" target="_blank">Selecting HTML Elements Using JavaScript</a> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=http://www.siteforinfotech.com/search?q=querying+elements+javascript" target="_blank">Querying Elements Using JavaScript</a></h3><h3></h3><h3> </h3> </li></ul><h3> Related Posts:</h3><ul style="text-align: left;"><li><h3 class="post-title entry-title" style="text-align: left;"><a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-window-using-javascript.html">How to Show Pop Up Window Using JavaScript</a></h3></li><li><h3 class="post-title entry-title" style="text-align: left;"><a href="http://www.siteforinfotech.com/2015/02/how-to-go-back-browsing-history-using.html">How to go Back Browsing History Using JavaScript</a></h3></li><li><h3 class="post-title entry-title" style="text-align: left;"><a href="http://www.siteforinfotech.com/2015/02/how-to-click-button-using-javascript.html">How to Click Button Using JavaScript?</a></h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul></div>

How to Select Document Elements Using JavaScript?

You have to select the document elements for manipulation of elements of document to complete any task for the document design or action of the document using JavaScript codes. There are number of way…

مزيد من المعلومات »

How to Show Pop Up Window Using JavaScript

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: justify;" trbidi="on"><div dir="ltr" trbidi="on"><div>You can show pop up window By using JavaScript window.open() method which loads specified URL into a new or existing window and returns the window object that represents that window. <br /><br />The window.open() method takes four optional arguments which are URL of the window, Window name, attributes of window, the boolean value to replace or not the current window.<br /><br /><blockquote class="tr_bq">Syntax: window.open("windowname.html", "New Window", "width=width in pixel, height=height in pixel, status=yes or no, resizable=yes or no");</blockquote><br />The first argument of window.open() method allows to display given URL in the new window. If the argument is omitted, the special blank-page URL:about:blank is used.<br /><br />The second argument of window.open() method is a string which specifies a window name. If the argument is omitted, the special name "_blank" is used which opens a new, unnamed window. <br /><br />The third optional argument of window.open() method is a comma-separated list of size and features attributes for the new window to be opened. If you omit this argument, the new window is given a default size and has a full set of UI components: a menu bar, status bar, toolbar etc. <br /><br />The fourth optional argument of window.open() is useful only when the second argument names an existing window. It is a boolean value that indicates whether the URL specified as the first argument should replace the current entry in the window's browsing history: written true, or create a new entry in the window's browsing history: written false. And omitting the argument is same as written false. <br /><br />Here is an example to open a small but resizable browser window with a status bar but no menu bar, tool-bar, or location bar.<br /><br /><pre class="prettyprint">window.open("new_window.html", "New Window", "width=400, <br />height=350, status=yes, resizable=yes");<br /></pre><br />Here status bar is showing using status=yes and the window is resizable  using resizable=yes, if you don't want to show status bar, you can use status=no and want the fixed window, can use resizable=no in the argument.<br /><br />To open a new pop up window on onclick event of button, you can use the following code.<br /><br /><pre class="prettyprint"><input type=button name="open" value="Open window"<br />onclick="window.open('http://www.siteforinfotech.com/p/about-us.html <br />','new window', 'width=400, height=350, status=yes, resizable=yes');"><br /></pre><br /><b>Preview:</b><br /><br /><input name="open" onclick="window.open('http://www.siteforinfotech.com/p/about-us.html', 'new window', 'width=400, height=350, status=yes, resizable=yes');" type="button" value="Open window" /> <br /><br />To open a new pop up window on <a> href link, you can use the following code.<br /><br /><pre class="prettyprint"><a href="javascript:void window.open<br />('http://www.siteforinfotech.com/p/about-us.html', 'new window', <br />'width=400, height=350, status=yes, resizable=yes');<br />">Open Pop Up window</a><br /></pre><br /><b>Preview:</b><br /><br /><a href="javascript:void%20window.open('http://www.siteforinfotech.com/p/about-us.html',%20'new%20window',%20'width=400,%20height=350,%20status=yes,%20resizable=yes');">Open Pop Up window</a><br /><br />The return value of the window.open() method is the window object that represents the named or newly created window. You can use this window object in you JavaScript code to refer to the new window and to specify the properties on it as given below.<br /><br /><pre class="prettyprint">var w=window.open();<br />w.alert("You are going to visit:http://www.siteforinfotech.com");<br />w.location="http://www.siteforinfotech.com";<br /></pre></div></div></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Here you can specify other properties like width, height, status, resizable given above. And you can assign variable w for any windows event or on any event trigger using JavaScript. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">"Pop Up" and "Pop Under" advertisements are made by using this method window.open() while you browse the web. JavaScript codes that tries to open a pop up window when the browser first loads, browsers blocked them. So the advertisements are made to run pop up windows only in response to a user action such as clicking on button and clicking on link. </div><div style="text-align: justify;"><br /><a name='more'></a><br /></div><div style="text-align: justify;"><br /></div><br /><h3>Related Search Terms</h3><ul><li><h3><a href="http://www.siteforinfotech.com/search?q=javascript+pop+up+window" target="_blank">Pop Up Window Using JavaScript</a> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=javascript+show+popup" target="_blank">Show Pop Up Using JavaScript</a></h3><h3></h3><h3> </h3></li></ul><h3><br /> </h3><h3> Related Posts:</h3><ul style="text-align: left;"><li><h3 class="post-title entry-title" style="text-align: left;"><a href="http://www.siteforinfotech.com/2015/02/how-to-go-back-browsing-history-using.html">How to go Back Browsing History Using JavaScript</a></h3></li><li><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-click-button-using-javascript.html">How to Click Button Using JavaScript?</a></h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul></div>

How to Show Pop Up Window Using JavaScript

You can show pop up window By using JavaScript window.open() method which loads specified URL into a new or existing window and returns the window object that represents that window. The window.open()…

مزيد من المعلومات »

How to go Back Browsing History Using JavaScript

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">The history property of the window object refers to the history object for the window. Using history in JavaScript you can go back to the previous browsing history.  <br /><br />The history object models the browsing history of a window as a list of document and document states and the length property of the history object specifies the number of elements in the browsing history list.<br /><br />The history object has back() and forward() methods that behave like the browser's back and forward buttons do, they make the browser go backward or forward one step in its browsing history. <br /><br />history.back();     // Go back to the browsing history<br />history.forward(); //Go forward to the browsing history<br /><br /><h3>Creating Buttons for History Back and Forward</h3><br />You can create buttons to navigate browsing history back and forward using the following code. <br /><br /><pre class="prettyprint"><input type=button name="back" value="Go Back" onclick="history.back();"><br /><br /><input type=button name="forward" <br />value="Go Forward"onclick="history.forward();"><br /></pre><br /><b>Preview:</b><br /><br /><input name="back" onclick="history.back();" type="button" value="Go Back" /> <input name="forward" onclick="history.forward();" type="button" value="Go Forward" /><br /><br /><br />A third method, go(), takes an integer argument and can skip any number of pages forward or backward in the history list. <br /><br />history.go(-2) //go back 2, like clicking the back button twice<br /><br /><h3>Creating Buttons for History Back and Forward for Specific Page</h3><br />You can create buttons to navigate browsing history two step back using the following code.<br /><br /><pre class="prettyprint"><input type=button name="backward2"<br />value="Go Back 2" onclick="history.go(-2);"><br /></pre><br /><b>Preview:</b><br /><br /><input name="backward2" onclick="history.go(-2);" type="button" value="Go Back 2" /> <br /><br /><br />Using history.go() method, if you want to go forward, can use positive arguments and if you want to go back, can use negative argument and the number used on the argument represents how many steps to go back or forward. <br /><br />For example, if you want to go two step forward to the browsing history, can use history.go(2); and if you want to go three step backward to the browsing history, can use history.go(-3);<br />  <br />If  a window contains child windows such as <iframe> elements, the browsing histories of the child windows are chronologically interleaved with the history of the main window.  This means that calling history.back(); on the main window may cause one of the child windows to navigate back to a previously displayed document but leave the main window in its current state.<br /><br />If a frame is contained within another frame that is contained within a top-level window, that frame can refer to the top-level window as parent. For parent window to navigate back to a previously displayed document you can use parent property as below. <br /><br />parent.history.back();<br /><br /><br />I have described here some methods of navigating browsing history back and forward using JavaScript . If you know other more methods of navigating browsing history back and forward using JavaScript, you are welcomed to mention on the comment session at the bottom this post.<br /><br /><a name='more'></a><br /><br /><h3>Related Search Terms</h3><ul><li><h3><a href="http://www.siteforinfotech.com/search?q=javascript+browsing+history+back" target="_blank">Browsing History Back Using JavaScript</a> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=javascript+browsing+history+forward" target="_blank">Browsing History Forward Using JavaScript</a></h3><h3></h3><h3> </h3></li></ul><h3><br /> </h3><h3> Related Posts:</h3><h3></h3><ul><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul></div></div>

How to go Back Browsing History Using JavaScript

The history property of the window object refers to the history object for the window. Using history in JavaScript you can go back to the previous browsing history.  The history object models the brow…

مزيد من المعلومات »

How to Click Button Using JavaScript?

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">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. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">You can set the actions performed by submit and reset buttons on a form with in a &lt;form&gt; tag as below.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint"><form action="submitpage.html" onsubmit="return validate(this)"<br />onreset="return conform()" method="post"><br /><!--Other Form Elements--><br /><input type="submit" value="Submit"><br /><input type="reset" value="Reset"><br /></form><br /></pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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().</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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.</div><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;">Different Ways to Click Button Using JavaScript</h3><div style="text-align: justify;"><br /></div><div style="text-align: justify;">You can click button using JavaScript with the different methods given below.</div><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;"><span style="font-weight: normal;">With directly specifying JavaScript Built-in function on onClick event of Button</span></h4><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint"><input type="button" value="Display Time" <br />onClick="alert(new Date().toLocaleTimeString());"><br /></pre></div><br /><br /><div style="text-align: justify;"><b>Preview:</b><br /><br /><input onclick="alert(new Date().toLocaleTimeString());" type="button" value="Display Time" /></div><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;"><span style="font-weight: normal;">With creating a JavaScript function and specifying it on onClick event of Button as given on the previous post:</span> "<span style="font-weight: normal;"><a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a>"</span></h4><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint"><script><br /><br />var c=0<br /><br />var t<br /><br />function timedCount()<br /><br />{<br /><br />document.getElementById('txt').value=c<br /><br />c=c+1<br /><br />t=setTimeout("timedCount()", 1000)<br /><br />}<br /><br /></script><br /><br /><input type="button" value="Start Count" onClick="timedCount()"><br /><br /><input type="button" value="0" id="txt"><br /></pre></div><br /><div style="text-align: justify;"><b>Preview:</b><br /><b> </b><br /><script> var c=0 var t function timedCount() { document.getElementById('txt').value=c c=c+1 t=setTimeout("timedCount()", 1000) } </script> <input onclick="timedCount()" type="button" value="Start Count" /> <input id="txt" type="button" value="0" /></div><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;"><span style="font-weight: normal;">With creating a JavaScript function along with specifying onClick event of Button</span></h4><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint"><script><br /><br />window.onload=function(){<br /><br />var btn=document.getElementById('btn');<br /><br />btn.onclick=function(){alert("You Have Clicked Button");}<br /><br />};<br /><br /></script><br /><br /><input type=button id='btn' value='click me'><br /></pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>Preview:</b><br /><b> </b><br /><script> window.onload=function(){ var btn=document.getElementById('btn'); btn.onclick=function(){alert("You Have Clicked Button");} 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 id="btn" type="button" value="click me" /></div><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;"><span style="font-weight: normal;">With specifying single function for multiple buttons having same class name by using for loop on onClick event of button</span></h4><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><pre class="prettyprint"><script><br /><br />window.onload=function(){<br /><br />var btns=document.getElementsByClassName('bt');<br /><br />for(var i=0; i<btns.length; i++){<br /><br />var bt=btns[i];<br /><br />bt.onclick=function(){alert("You Have Clicked Button");}<br /><br />}<br /><br />};<br /><br /></script><br /><br /><input type=button class='bt' value='Button 1'><br /><br /><input type=button class='bt' value='Button 2'><br /><br /><input type=button class='bt' value='Button 3'><br /></pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>Preview:</b><br /><b> </b><br /><input class="bt" type="button" value="Button 1" /> <input class="bt" type="button" value="Button 2" /> <input class="bt" type="button" value="Button 3" /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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.</div><div style="text-align: justify;"><br /><a name='more'></a><br /><br /><h3>Related Search Terms</h3><ul><li><h3><a href="http://www.siteforinfotech.com/search?q=javascript+button+click" target="_blank">JavaScript for Button Click</a> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=javascript+button+click+different+ways" target="_blank">Different Ways to Click Button Using JavaScript</a></h3><h3></h3><h3> </h3></li></ul><h3><br /> </h3><h3> Related Posts:</h3><h3></h3><ul><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul></div></div>

How to Click Button Using JavaScript?

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

مزيد من المعلومات »

How to Create JavaScript Bookmarklet?

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">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. <br /><br />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.<br /><br /><h3> How to Create JavaScript Bookmarklet?</h3><br />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. <br /><br />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 <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html" target="_blank">"How to Write JavaScript Function as URL in Hyperlink"</a>.<br /><br /><pre class="prettyprint"><a href="javascript:alert(new Date().toLocaleTimeString());"> <br />check the document without writing the docment</a><br /></pre></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">To check bookmarklet for your browser, save on bookmark the link given below which is generated from the code given above.<br /><br /><a href="javascript:alert(new%20Date().toLocaleTimeString());"> Check the document without writing the document</a><br /><br />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.<br /><br /><pre class="prettyprint"><a href='javascript:<br />var e="", r=""; /*expression evaluate the result*/<br />do{<br />/*display expression and result and ask for a new expression*/<br />e=prompt("Expression:"+e+"\n"+r+"\n", e);<br />try{r="Result:"+eval(e);} /*try to evaluate the expression*/<br />catch(ex){r=ex;} <br />} while(e); /*continue until no expression entered or cancel clicked*/<br />void 0;'> <br />Javascript Evaluator </a><br /></pre><br />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.<br /><br /><a href="javascript:var%20e="",%20r="";%20/*expression%20evaluate%20the%20result*/do{/*display%20expression%20and%20result%20and%20ask%20for%20a%20new%20expression*/e=prompt("Expression:"+e+"\n"+r+"\n",%20e);try{r="Result:"+eval(e);}%20/*try%20to%20evaluate%20the%20expression*/catch(ex){r=ex;}%20}%20while(e);%20/*continue%20untill%20no%20expression%20entered%20or%20cancel%20clicked*/void%200;">  JavaScript Evaluator </a><br /><br />You can save this link on your browsers bookmarks and check it by lunching the bookmark.<br /><br /><br /><a name='more'></a><br /><br /><h3>Related Search Terms</h3><ul><li><h3><a href="http://www.siteforinfotech.com/search?q=javascript+save+bookmark" target="_blank">How to Save JavaScript Code on Bookmark</a> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=javascript+save+link" target="_blank">How to Save JavaScript Link</a></h3><h3></h3><h3> </h3></li></ul><h3><br /> </h3><h3> Related Posts:</h3><h3></h3><ul><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul><h3></h3></div></div>

How to Create JavaScript Bookmarklet?

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. T…

مزيد من المعلومات »

How to Write JavaScript Function as URL in Hyperlink?

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">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. <br /><br />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. <br /><br />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.<br /><br />The syntax for writing JavaScript function within href attribute of <a> tag is given below.</div><br /><blockquote class="tr_bq"><a href="javascript:myfunction();">JavaScript Link</a></blockquote><div style="text-align: justify;"><br />And the syntax for writing JavaScript function within the action attribute of a <form> tag is given below.</div><br /><blockquote><form action="myfunction();" onsubmit="return validate(this);" method="post"> .......</form></blockquote><div style="text-align: justify;"><br />An example for getting new date using javascript function as a hyperlink is given below.</div><br /><blockquote class="tr_bq"><a href="javascript:new Date().toLocaleTimeString();"> What time is it?</a></blockquote><div style="text-align: justify;"><br />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. <br /><br />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.<br /><br />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.</div><br /><blockquote><a href="javascript:alert(new Date().toLocaleTimeString());"> check the document without writing the docment</a></blockquote><div style="text-align: justify;"><br />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. <br /><br />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.</div><br /><blockquote class="tr_bq"><a href="javascript:void window.open('http://www.siteforinfotech.com/p/javascript-programming-tutorials.html');">Open link on new window</a></blockquote><div style="text-align: justify;"><br /><br />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.</div><br /><blockquote class="tr_bq"><a href="javascript:location.replace('http://www.siteforinfotech.com/p/javascript-programming-tutorials.html');">Open window using location.replace</a></blockquote><div style="text-align: justify;"><br /><br />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.</div><div style="text-align: justify;"><br /><a name='more'></a><h4>Read More:<a href="http://www.siteforinfotech.com/2015/02/how-to-create-javascript-bookmarklet.html">How to Create JavaScript Bookmarklet?</a></h4></div><h3 style="text-align: justify;">Related Search Terms</h3><ul style="text-align: left;"><li><h3><a href="http://www.siteforinfotech.com/search?q=javascript+href" target="_blank">How to a href using JavaScript</a> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=javascript+function+href" target="_blank">How to JavaScript function in href</a></h3><h3></h3><h3> </h3></li></ul><h3><br /> </h3><h3> Related Posts:</h3><br /><ul style="text-align: left;"><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a></h3></li><li><h3> </h3><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3><h3> </h3></li></ul></div>

How to Write JavaScript Function as URL in Hyperlink?

You can write JavaScript function as like URL in hyperlink on href attribute of .... tag. Writing JavaScript codes in a URL is another way that JavaScript code can be included in the client side using…

مزيد من المعلومات »

How to create Timer Using JavaScript?

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">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. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">For timing events in JavaScript, there are four methods that are used are</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>setTimeout():</b> 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.</div><div style="text-align: justify;"><br /></div><blockquote class="tr_bq"><div style="text-align: justify;">syntax: var t=setTimeout("javascript statement", milliseconds)</div></blockquote><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>setInterval():</b> setInterval is like setTimeout() except that the specified function is invoked repeatedly at intervals of the specified number of milliseconds.</div><div style="text-align: justify;"><br /></div><blockquote class="tr_bq"><div style="text-align: justify;">syntax: var t=setInterval("javascript statement", milliseconds)</div></blockquote><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>clearTimeout() and clearInterval():</b> Like setTimeout() and setInterval() returns a value that can be passed to clearTimeout() or clearInterval() to cancel any future invocation of the scheduled function.</div><div style="text-align: justify;"><br /></div><blockquote class="tr_bq"><div style="text-align: justify;">syntax: clearTimeout(setTimeout_variable)</div><div style="text-align: justify;">syntax: clearInterval(setInterval_variable)</div></blockquote><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;">Execution of Function with Timer</h3><div style="text-align: justify;"><br />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 <br /><br />JavaScript statement and the second parameter indicates how many milliseconds from now you want to execute the first parameter.<br /><br /><pre class="prettyprint"><script><br />function timedMsg()<br />{<br />var t=setTimeout("alert('5 seconds!')", 5000)<br />}<br /></script><br /><br /><form><br /><input type="button" value="Dispaly timed alertbox!" onClick="timedMsg()"><br /></form><br /></pre></div><div style="text-align: justify;"><h4>Preview of Timer</h4><script>function timedMsg() { var t=setTimeout("alert('5 seconds!')", 5000) } </script> <br /><form><input onclick="timedMsg()" type="button" value="Dispaly timed alertbox!" /></form></div><div style="text-align: justify;"><br /><h3>How to Create Stopwatch using JavaScript Timer</h3><br />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. <br /><br />Here is a JavaScript and HTML code for creating stopwatch.<br /><br /><pre class="prettyprint"><script><br />var c=0<br />var t<br />function timedCount()<br />{<br />document.getElementById('txt').value=c<br />c=c+1<br />t=setTimeout("timedCount()", 1000)<br />}<br />function stopCount()<br />{<br />clearTimeout(t)<br />}<br />function clearTimer()<br />{<br />document.getElementById('txt').value=0<br />c=0<br />}<br /></script><br /><br /><form><br /><input type="button" value="Start Count" onClick="timedCount()"><br /><input type="button" value="0" id="txt"><br /><input type="button" value="Stop Count" onClick="stopCount()"><br /><input type="button" value="Clear Timer" onClick="clearTimer()"><br /></form><br /></pre><h4>Preview of Stopwatch</h4><br /><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> <br /><form><input onclick="timedCount()" type="button" value="Start Count" /><input id="txt" type="button" value="0" /><input onclick="stopCount()" type="button" value="Stop Count" /><input onclick="clearTimer()" type="button" value="Clear Timer" /></form><div><br /></div><h3>How to Create Timer for Online Quiz</h3><div><br />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.  <br /><br />Here is a JavaScript and HTML code for creating timer for online quiz.<br /><br /><pre class="prettyprint"><script><br />var s=59<br />var m=5<br />var q<br />function quizCount()<br />{<br />document.getElementById('timer').value=m+":"+s+" remaining"<br />s=s-1<br />q=setTimeout("quizCount()", 1000)<br />if (s<1)<br />{ m=m-1; s=59;}<br /><br />if (m<0)<br />{<br />quizStop();<br />}<br />}<br />function quizStop()<br />{<br />clearTimeout(q)<br />document.getElementById('timer').value="Your Time Was Finished"<br />}<br /></script><br /><br /><form><br /><input type="button" value="Start Count" onClick="quizCount()"><br /><input type="button" value="Quiz Timer" id="timer"><br /><input type="button" value="Stop Count" onClick="quizStop()"><br /></form><br /></pre></div><div><br /></div><div>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().<br /><h4>Preview of Online Quiz Timer</h4><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> <br /><form><input onclick="quizCount()" type="button" value="Start Count" /><input id="timer" type="button" value="Quiz Timer" /><input onclick="quizStop()" type="button" value="Stop Count" /></form></div><br /><a name='more'></a><br /><br /><h3 style="text-align: justify;">Related Search Terms</h3><ul style="text-align: left;"><li><h3> <a href="http://www.siteforinfotech.com/search?q=timer+using+javascript" target="_blank">Timer Using JavaScript</a> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=stopwatch+javascript" target="_blank">Stopwatch Using JavaScript</a></h3><h3></h3><h3> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=javascript+online+quiz+timer" target="_blank">JavaScript Online Quiz Timer</a></h3></li></ul><h3><br /> </h3><h3> Related Posts:</h3><br /><ul><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaSript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Slideshow with LInks</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/detecting-visitors-browser-using-javascript.html">How to Detect Visitor's Browser Using JavaScript?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul></div></div>

How to create Timer Using JavaScript?

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

مزيد من المعلومات »

How to create a Simple calculator Using HTML and JavaScript

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">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.<br /><br /><h3>Steps to create a Simple calculator Using HTML and JavaScript </h3><br />1. At first Insert a <form> element within <body> tag.<br />2. Create a table using <table> .....</table> tag. <br />3. Insert two types of Input text and button within table data of table row using <tr><td>....</td></tr> tag.<br />4. Assign OnClick event for all the buttons having numbers and arithmetic operators.<br />5. Give blank value for Clear(C) button.<br />6. Use eval() function to evaluate the numbers on OnClick event of equal to sign button.<br /><br /><h3>Full HTML code for a Simple HTML calculator</h3></div><div style="text-align: justify;"><br /><pre class="prettyprint"><html><br /><head></head><br /><body><br /><h3>Simple Calculator</h3><br /><br/><br /><form Name="calc"><br /><table border=2><br /><tr><br /><td colspan=4><input type=text Name="display"></td><br /></tr><br /><tr><br /><td><input type=button value="0" OnClick="calc.display.value+='0'"></td><br /><td><input type=button value="1" OnClick="calc.display.value+='1'"></td><br /><td><input type=button value="2" OnClick="calc.display.value+='2'"></td><br /><td><input type=button value="+" OnClick="calc.display.value+='+'"></td><br /></tr><br /><tr><br /><td><input type=button value="3" OnClick="calc.display.value+='3'"></td><br /><td><input type=button value="4" OnClick="calc.display.value+='4'"></td><br /><td><input type=button value="5" OnClick="calc.display.value+='5'"></td><br /><td><input type=button value="-" OnClick="calc.display.value+='-'"></td><br /></tr><br /><tr><br /><td><input type=button value="6" OnClick="calc.display.value+='6'"></td><br /><td><input type=button value="7" OnClick="calc.display.value+='7'"></td><br /><td><input type=button value="8" OnClick="calc.display.value+='8'"></td><br /><td><input type=button value="x" OnClick="calc.display.value+='*'"></td><br /></tr><br /><tr><br /><td><input type=button value="9" OnClick="calc.display.value+='9'"></td><br /><td><input type=button value="C" OnClick="calc.display.value=''"></td><br /><td><input type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td><br /><td><input type=button value="/" OnClick="calc.display.value+='/'"></td><br /></tr><br /></table><br /></form><br /></body><br /></html><br /></pre></div><div style="text-align: justify;"><br /><br /><a name='more'></a><br /><h3>Preview of Simple HTML calculator</h3><br /><form name="calc"><table border="2"><tbody><tr><td colspan="4"><input name="display" type="text" /></td></tr><tr><td><input onclick="calc.display.value+='0'" type="button" value="0" /></td><td><input onclick="calc.display.value+='1'" type="button" value="1" /></td><td><input onclick="calc.display.value+='2'" type="button" value="2" /></td><td><input onclick="calc.display.value+='+'" type="button" value="+" /></td></tr><tr><td><input onclick="calc.display.value+='3'" type="button" value="3" /></td><td><input onclick="calc.display.value+='4'" type="button" value="4" /></td><td><input onclick="calc.display.value+='5'" type="button" value="5" /></td><td><input onclick="calc.display.value+='-'" type="button" value="-" /></td></tr><tr><td><input onclick="calc.display.value+='6'" type="button" value="6" /></td><td><input onclick="calc.display.value+='7'" type="button" value="7" /></td><td><input onclick="calc.display.value+='8'" type="button" value="8" /></td><td><input onclick="calc.display.value+='*'" type="button" value="x" /></td></tr><tr><td><input onclick="calc.display.value+='9'" type="button" value="9" /></td><td><input onclick="calc.display.value=''" type="button" value="C" /></td><td><input onclick="calc.display.value=eval(calc.display.value)" type="button" value="=" /></td><td><input onclick="calc.display.value+='/'" type="button" value="/" /></td></tr></tbody></table></form></div><br /><h3 style="text-align: justify;">Related Search Terms</h3><ul style="text-align: left;"><li><h3> <a href="http://www.siteforinfotech.com/search?q=simple+calculator+javascript" target="_blank">Simple Calculator Usnig JavaScript</a> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=simple+calculator+HTML" target="_blank">Simple Calculator Usnig HTML</a></h3><h3><a href="http://www.siteforinfotech.com/search?q=generate+random+javascript" target="_blank"></a></h3><h3> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=how+to+create+calculator" target="_blank">How to create a Calculator</a></h3></li></ul><div style="text-align: justify;"><h3><br /> </h3><h3> Related Posts:</h3><br /><ul><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaSript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Slideshow with LInks</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/detecting-visitors-browser-using-javascript.html">How to Detect Visitor's Browser Using JavaScript?</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a></h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul><h3></h3></div></div>

How to create a Simple calculator Using HTML and JavaScript

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 …

مزيد من المعلومات »

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

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">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.<br /><br /><h3>How to use Round() in JavaScript</h3><br />Using round() method in math object, you can round the given numbers as given below.<br /><br /><script><br />document.write(Math.round(0.60) +"<br/>");<br />document.write(Math.round(0.40) +"<br/>");<br />document.write(Math.round(0.49) +"<br/>");<br />document.write(Math.round(-3.69) +"<br/>");<br />document.write(Math.round(-6.10) +"<br/>");<br /></script><br /><h4>Preview:</h4><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> <br /><h3>How to use Random() in JavaScript</h3><br />You can use the random() method in math object,you can return a random number between 0 and 1 as given below.<br /><br /><script><br />document.write(Math.random());<br /></script><br /><h4>Preview:</h4><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> <br /><h3>How to use Max() in JavaScript</h3><br />Using max() method in math object, you can return the number with the highest value of two specified numbers as the following.<br /><br /><script><br />document.write(Math.max(9,3) +"<br/>");<br />document.write(Math.max(-5,7) +"<br/>");<br />document.write(Math.max(10,21) +"<br/>");<br />document.write(Math.max(-5,-9) +"<br/>");<br />document.write(Math.max(6.12,7.98) +"<br/>");<br /></script><br /><h4>Preview:</h4><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> <br /><br /><h3>How to use Min() in JavaScript</h3><br />Using min() method in math object, you can return the number with the highest value of two specified numbers as the following.<br /><br /><script><br />document.write(Math.min(9,3) +"<br/>");<br />document.write(Math.min(-5,7) +"<br/>");<br />document.write(Math.min(10,21) +"<br/>");<br />document.write(Math.min(-5,-9) +"<br/>");<br />document.write(Math.min(6.12,7.98) +"<br/>");<br /></script><br /><h4>Preview:</h4><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><br />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.<br /><ul><li>abs(x):  Returns the absolute value of a number</li><li>ceil(x): Returns the value of a number rounded upwards to the nearest integer</li><li>exp(x):  Returns the value or E^x.</li><li>floor(x): Returns the value of a number rounded downwards to the nearest integer.</li><li>log(x):  Returns the natural logarithm (base E) of a number.</li><li>pow(x,y): Returns the value of x to the power of y.</li><li>sqrt(x):  Returns the square root of a number.</li></ul><br /><a name='more'></a><br /><br /><h3 style="text-align: justify;">Related Search Terms</h3><ul style="text-align: left;"><li><h3> <a href="http://www.siteforinfotech.com/search?q=Create+round+Javascript" target="_blank">Calculate Round in JavaScript</a> </h3></li><li><h3> </h3><h3> <a href="http://www.siteforinfotech.com/search?q=generate+random+javascript" target="_blank">Generate Random number in JavaScript</a></h3><h3> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=find+min+max+javascript" target="_blank">Finding Min and Max in Javascript</a></h3></li></ul><div style="text-align: justify;"><h3><br /> </h3><h3> Related Posts:<br /> </h3><ul><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3></h3><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a></h3><h3> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/image-slideshow-with-navigation-buttons.html">Image Slideshow with Navigation Buttons Using JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Slideshow with LInks</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/detecting-visitors-browser-using-javascript.html">How to Detect Visitor's Browser Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul></div></div></div>

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

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

مزيد من المعلومات »

How to Concatenate, Join and Sort Array in JavaScript?

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">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.</div><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;">How to Join Two Arrays using Concat()</h3><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Using concat() method, you can join to arrays array1 and array2 as below.</div><div style="text-align: justify;"><br /></div><script><br />var array1=new Array(3);<br />array1[0]="Saab"<br />array1[1]="Volvo"<br />array1[2]="BMW"<br /><br />var array2=new Array(3);<br />array2[0]="Yamaha"<br />array2[1]="Honda"<br />array2[2]="Bajaj"<br /><br />var array3=array1.concat(array2);<br /><br />for(i=0; i<array3.length;i++)<br />{<br />document.write(array3[i]+"<br/>")<br />}<br /></script><br /><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;">Preview:</h4><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> <br /><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Here the method array1.concat(array2) concentrates two arrays array1 and array2.</div><div style="text-align: justify;"></div><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;">How to Put Array Elements Into a String using Join()</h3><div style="text-align: justify;"><br /></div><div style="text-align: justify;">You can use the join() method to put all the elements of an array into a string as the following script.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><script></div><div style="text-align: justify;">var array1=new Array(3);</div><div style="text-align: justify;">array1[0]="Yamaha"</div><div style="text-align: justify;">array1[1]="Honda"</div><div style="text-align: justify;">array1[2]="Bajaj"</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">document.write(array1.join()+"<br/>");</div><div style="text-align: justify;">document.write (array1.join("."));</div><div style="text-align: justify;"></script></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;">Preview:</h4><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> <br /><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;">How to Sort String Array using sort()</h3><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Using sort() method, you can sort the elements of string array as given below.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><script></div><div style="text-align: justify;">var array1=new Array(6);</div><div style="text-align: justify;">array1[0]="Saab"</div><div style="text-align: justify;">array1[1]="Volvo"</div><div style="text-align: justify;">array1[2]="BMW"</div><div style="text-align: justify;">array1[3]="Yamaha"</div><div style="text-align: justify;">array1[4]="Honda"</div><div style="text-align: justify;">array1[5]="Bajaj"</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">document.write(array1+"<br/>");</div><div style="text-align: justify;">document.write (array1.sort());</div><div style="text-align: justify;"></script></div><div style="text-align: justify;"><br /></div><h4 style="text-align: justify;">Preview:</h4><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> <br /><h3 style="text-align: justify;">How to Sort Numeric Array using sort()</h3><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Using sort() method, you can sort the elements of numeric array as given below.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><script></div><div style="text-align: justify;">var array2=new Array(6);</div><div style="text-align: justify;">array2[0]=10</div><div style="text-align: justify;">array2[1]=5</div><div style="text-align: justify;">array2[2]=40</div><div style="text-align: justify;">array2[3]=25</div><div style="text-align: justify;">array2[4]=35</div><div style="text-align: justify;">array2[5]=95</div><div style="text-align: justify;">function sortNumber(a,b) {return a - b;}<br /><br /></div><div style="text-align: justify;">document.write(array2+"<br/>");</div><div style="text-align: justify;">document.write (array2.sort(sortNumber));</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"></script></div><h4 style="text-align: justify;">Preview:</h4><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> <br /><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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.</div><div style="text-align: justify;"><br /></div><ul style="text-align: left;"><li>pop(): Removes and returns the last element of an array</li><li>push(): Adds one or more elements to the end of an array and returns the new length.</li><li>reverse(): Reverses the order of the elements in an array</li><li>toString(): Converts an array to string and returns the result.</li></ul><div style="text-align: justify;"><h4>Read Next:<a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaSript<a name='more'></a></a></h4><h3 style="text-align: justify;">Related Search Terms</h3><ul style="text-align: left;"><li><h3> <a href="http://www.siteforinfotech.com/search?q=JavaScript+concate+Array" target="_blank">Concate Array in JavaScript</a> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=JavaScript+Join+Array" target="_blank">Join Array in JavaScript</a></h3><h3> </h3></li><li><h3> </h3><h3><a href="http://www.siteforinfotech.com/search?q=JavaScript+Sort+Array" target="_blank">Sort Array in JavaScript</a></h3></li></ul><div style="text-align: justify;"><h3><br /> </h3><h3> Related Posts:<br /> </h3><ul><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3></h3><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a></h3><h3> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/image-slideshow-with-navigation-buttons.html">Image Slideshow with Navigation Buttons Using JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Slideshow with LInks</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/detecting-visitors-browser-using-javascript.html">How to Detect Visitor's Browser Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul></div></div></div>

How to Concatenate, Join and Sort Array in JavaScript?

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

مزيد من المعلومات »