Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Thursday, May 25, 2017

How to Concatenate Join and Sort Array in JavaScript

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 sort an array in JavaScript. In this post you will learn about How to Concatenate, Join and Sort Array in JavaScript.

How to Join Two Arrays using Concat()


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

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

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

var array3=array1.concat(array2);

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

Preview:



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

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


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


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

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


Preview:



How to Sort String Array using sort()


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

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

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

Preview:


How to Sort Numeric Array using sort()


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

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

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

</script>

Preview:



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

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

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

Related Search Terms

  • Concate Array in JavaScript

  • Join Array in JavaScript

  • Sort Array in JavaScript


Related Posts:

  • How to Show Pop Up Boxes Using JavaScript?

  • How to Write Conditional Statements in JavaScript?

  • How to Write JavaScript With HTML?

  • How to Loop using JavaScript?

  • Image Slideshow with Navigation Buttons Using JavaScript

  • How to create Changeable Date and Time Using JavaScript?

  • How to Create JavaScript Image Slideshow with LInks

  • How to Display Date Format in JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • What are the Different Ways to Redirect Page in JavaScript?

  • How to Detect Visitors Browser Using JavaScript?

  • How to make rounded corners border using CSS

  • How to Create Custom CSS Template for Printing

  • How to create a simple form using HTML?


Go to link Download

Read more »

Sunday, May 7, 2017

How to Loop Through JavaScript Array

How to Loop Through JavaScript Array


You can loop any Array by using different types of looping statements in JavaScript, which I have previously posted. In this post you can loop through JavaScript Array. At first let you know basic concepts of Array ie. defining array, adding values to the array and accessing array elements. 

The Array object is used to store a set of values in a single variable name. You can define Array object with the new keyword.

The following line of code defines an Array object called  myArray.

var myArray=new Array()

You can also define the array size by passing an integer argument as follows.

var myArray=new Array(5)

You can add the values to an array as the following.

var myArray=new Array()
myArray[0]="value1"
myArray[1]="value2"
myArray[2]="value3"


You can also give values to the arrays while defining it as below.

var myArray=new Array("value1", "value2", "value3")

While accessing Arrays, you can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0. The following line accesses the first value of the array myArray.

document.write(myArray[0])


Loop Through JavaScript Array


You can loop any Array by using any of the following looping statements in JavaScript.

Using For loop


You can loop any Array by using For Loop as below.

var myArray=new Array()
myArray[0]="value1"
myArray[1]="value2"
myArray[2]="value3"

for(i=0; i<myArray.length;i++)
{
document.write(myArray[i])
}

Example:


<html>
<head></head>
<body>
<script type="text/javascript">
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"

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

Preview:


Using For .... In Statement


You can loop any Array by using For .... In Statement as below.

var myArray=new Array()
myArray[0]="value1"
myArray[1]="value2"
myArray[2]="value3"

for(x in myArray)
{
document.write(myArray[x])
}

Example:


<html>
<head></head>
<body>
<script type="text/javascript">
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"

for(x in mycars)
{
document.write(mycars[x]+"<br/>")
}
</script>
</body>
</html>

Preview:


You can also loop any Array by using other looping statements like while and Do ... while loops as the same methods given above.

Read Next:How to Concatenate, Join and Sort Array in JavaScript?

Related Search Terms

  • Javascript For Loop Through Array

  • Javascript Array For .. In Statement

  • JavaScript Array Loop


Related Posts:

  • How to Show Pop Up Boxes Using JavaScript?

  • How to Write Conditional Statements in JavaScript?

  • How to Write JavaScript With HTML?

  • How to Loop using JavaScript?

  • Image Slideshow with Navigation Buttons Using JavaScript

  • How to create Changeable Date and Time Using JavaScript?

  • How to Create JavaScript Image Slideshow with LInks

  • How to Display Date Format in JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • What are the Different Ways to Redirect Page in JavaScript?

  • How to Detect Visitors Browser Using JavaScript?

  • How to make rounded corners border using CSS

  • How to Create Custom CSS Template for Printing

  • How to create a simple form using HTML?


Go to link Download

Read more »

Sunday, April 23, 2017

How to go Back Browsing History Using JavaScript

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

The history object has back() and forward() methods that behave like the browsers back and forward buttons do, they make the browser go backward or forward one step in its browsing history.

history.back();     // Go back to the browsing history
history.forward(); //Go forward to the browsing history

Creating Buttons for History Back and Forward


You can create buttons to navigate browsing history back and forward using the following code.

<input type=button name="back" value="Go Back" onclick="history.back();">

<input type=button name="forward"
value="Go Forward"onclick="history.forward();">

Preview:




A third method, go(), takes an integer argument and can skip any number of pages forward or backward in the history list.

history.go(-2) //go back 2, like clicking the back button twice

Creating Buttons for History Back and Forward for Specific Page


You can create buttons to navigate browsing history two step back using the following code.

<input type=button name="backward2"
value="Go Back 2" onclick="history.go(-2);">

Preview:




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.

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);
 
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.

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.

parent.history.back();


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.



Related Search Terms

  • Browsing History Back Using JavaScript

  • Browsing History Forward Using JavaScript


Related Posts:

  • How to Write JavaScript Function as URL in Hyperlink?

  • How to use Round, Random, Min and Max in JavaScript

  • How to Concatenate, Join and Sort Array in JavaScript?

  • How to Loop Through JavaScript Array?

  • How to Loop using JavaScript?

  • How to Show Pop Up Boxes Using JavaScript?

  • How to Write Conditional Statements in JavaScript?

  • How to Write JavaScript With HTML?

  • How to create Changeable Date and Time Using JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • How to create a simple form using HTML?

  • How to Create JavaScript Image Sideshow with Links

  • How to Display Date Format in JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • What are the Different Ways to Redirect Page in JavaScript?

  • How to create Timer Using JavaScript?

  • How to make rounded corners border using CSS

  • How to Create Custom CSS Template for Printing

  • How to create a simple form using HTML?


Go to link Download

Read more »

Saturday, April 22, 2017

How to create a Simple calculator Using HTML and JavaScript

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 a form element and OnClick event was used to insert button values on the screen or to evaluate the numbers.

Steps to create a Simple calculator Using HTML and JavaScript


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

Full HTML code for a Simple HTML calculator


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



Preview of Simple HTML calculator



Related Search Terms

  • Simple Calculator Usnig JavaScript

  • Simple Calculator Usnig HTML

  • How to create a Calculator


Related Posts:


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

  • How to Concatenate, Join and Sort Array in JavaScript?

  • How to Loop Through JavaScript Array?

  • How to Loop using JavaScript?

  • How to Show Pop Up Boxes Using JavaScript?

  • How to Write Conditional Statements in JavaScript?

  • How to Write JavaScript With HTML?

  • How to create Changeable Date and Time Using JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • How to create a simple form using HTML?

  • How to Create JavaScript Image Slideshow with LInks

  • How to Display Date Format in JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • What are the Different Ways to Redirect Page in JavaScript?

  • How to Detect Visitors Browser Using JavaScript?

  • How to make rounded corners border using CSS

  • How to Create Custom CSS Template for Printing

  • How to create a simple form using HTML?


Go to link Download

Read more »

Friday, April 21, 2017

How to Loop using JavaScript

How to Loop using JavaScript


Loops in JavaScript are used to execute the same block of code a specified number of times or while a specified condition is true.

In JavaScript there are two different kinds of loops which are for loop, which loops through a block of code a specified number of times and while loop, which loops through a block of code while a specified condition is true.

JavaScript For Loop


The for loop is used when you know in advance how many times the script should run.

Syntax:

for(var=startvalue; var<=endvalue;var=var+increment)
{
code to be executed
}

Example:

<html>
<head>
</head>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++){
document.write("The number is" +i)
document.write("<br/>")}
</script>
</body>
</html>

The above example defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. i will increase by 1 each time the loop runs.

Preview:


JavaScript While Loop


The while loop is ued when you want the loop to execute and continue executing while the specified condition is true.

Syntax:

while (var<=endvalue)
{
code to be executed
}

Example:

<html>
<head></head>
<body>
<script type="text/javascript">
var i=0
while(i<=10)
{
document.write("The number is "+i)
document.write("<br/>")
i=i+1
}
</script>
</body>
</html>

The example above defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. i will increase by 1 each time the loop runs.

Preview:


JavaScript do .... while Loop:


The do .... while loop is a variant of the while loop. This loop will always execute a block of code Once, and then it will repeat the loop as long as the specified condition is true. The lop alway be executed at least once, even if the condition is false, because the code is executed before the condition is tested.

Syntax:

do
{
code to be executed
}
while (var<=endvalue)

Example:

<html>
<head></head>
<body>
<script type="text/Javascript">
var i=0
do
{
document.write("The number is "+i)
document.write("<br/>")
i=i+i
}
while (i<0)
</script>
</body>
</html>

Preview:


JavaScrpt Break and Continue Statements


There are two special statements that can be used inside loops: break and continue.

Break

The break command will break the loop and continue executing the code that follows after the loop.

Example:

<html>
<head></head>
<body>
<script type="text/javascript">
var i=0
for(i=0;i<=10;i++)
{
if (i==3) {break}
document.write("The number is " +i)
document.write("<br/>")
}
</script>
</body>
</html>

Preview:


Continue

The continue command will break the current loop and continue with the next value.

Example:

<html>
<head></head>
<body>
<script type="text/javascript">
var i=0
for(i=0;i<=10;i++)
{
if (i==3) {continue}
document.write("The number is " +i)
document.write("<br/>")
}
</script>
</body>
</html>

Preview:


Read Next:How to Loop Through JavaScript Array?

Related Search Terms

  • Javascript For Loop

  • Javascript Do While Loop

  • JavaScript While Loop

  • JavaScript Break and Continue


Related Posts:

  • How to Show Pop Up Boxes Using JavaScript?

  • How to Write Conditional Statements in JavaScript?

  • How to Write JavaScript With HTML?

  • How To Create Simple Image Slideshow Using JavaScript ?

  • Image Slideshow with Navigation Buttons Using JavaScript

  • How to create Changeable Date and Time Using JavaScript?

  • How to Create JavaScript Image Slideshow with LInks

  • How to Display Date Format in JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • What are the Different Ways to Redirect Page in JavaScript?

  • How to Detect Visitors Browser Using JavaScript?

  • How to make rounded corners border using CSS

  • How to Create Custom CSS Template for Printing

  • How to create a simple form using HTML?


Go to link Download

Read more »

Tuesday, April 11, 2017

How to Show Pop Up Window Using JavaScript

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() 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.

Syntax: window.open("windowname.html", "New Window", "width=width in pixel, height=height in pixel, status=yes or no, resizable=yes or no");

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.

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.

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.

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 windows browsing history: written true, or create a new entry in the windows browsing history: written false. And omitting the argument is same as written false.

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.

window.open("new_window.html", "New Window", "width=400, 
height=350, status=yes, resizable=yes");

Here status bar is showing using status=yes and the window is resizable  using resizable=yes, if you dont want to show status bar, you can use status=no and want the fixed window, can use resizable=no in the argument.

To open a new pop up window on onclick event of button, you can use the following code.

<input type=button name="open" value="Open window"
onclick="window.open(http://www.siteforinfotech.com/p/about-us.html
,new window, width=400, height=350, status=yes, resizable=yes);">

Preview:



To open a new pop up window on <a> href link, you can use the following code.

<a href="javascript:void window.open
(http://www.siteforinfotech.com/p/about-us.html, new window,
width=400, height=350, status=yes, resizable=yes);
">Open Pop Up window</a>

Preview:

Open Pop Up window

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.

var w=window.open();
w.alert("You are going to visit:http://www.siteforinfotech.com");
w.location="http://www.siteforinfotech.com";


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.

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




Related Search Terms

  • Pop Up Window Using JavaScript

  • Show Pop Up Using JavaScript


Related Posts:

  • How to go Back Browsing History Using JavaScript

  • How to Click Button Using JavaScript?

  • How to Write JavaScript Function as URL in Hyperlink?

  • How to use Round, Random, Min and Max in JavaScript

  • How to Concatenate, Join and Sort Array in JavaScript?

  • How to Loop Through JavaScript Array?

  • How to Loop using JavaScript?

  • How to Show Pop Up Boxes Using JavaScript?

  • How to Write Conditional Statements in JavaScript?

  • How to Write JavaScript With HTML?

  • How to create Changeable Date and Time Using JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • How to create a simple form using HTML?

  • How to Create JavaScript Image Sideshow with Links

  • How to Display Date Format in JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • What are the Different Ways to Redirect Page in JavaScript?

  • How to create Timer Using JavaScript?

  • How to make rounded corners border using CSS

  • How to Create Custom CSS Template for Printing

  • How to create a simple form using HTML?


Go to link Download

Read more »

Friday, March 17, 2017

How to Scroll Top or Bottom of Document Using JavaScript

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

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.

How to Scroll Bottom of Document Using JavaScript


You can use the following set of JavaScript codes that scroll the browser to the bottom most page of the document.

var documentHeight=documentElement.offsetHeight;
var viewportHeight=window.innerHeight;
window.scrollTo(0, documentHeight-viewportHeight);

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.

And the second variable, viewportHeight specifies the height of viewport, which is obtained from innerHeight property of window object.

You can execute this code on onclick event of JavaScript hyperlink or on onclik event of any button or text as given below.

function gobottom(){
var documentHeight=document.documentElement.offsetHeight;
var viewportHeight=window.innerHeight;
window.scrollTo(0,documentHeight-viewportHeight);
}

You can call this function gobottom() within HTML file as below.

<input type="button" value="Go To Bottom" onclick="gobottom();"> 

On the other way, you can execute onclick event of button with assigning a function on onload event of window as below.

<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);}
</script>

You can call this function by placing id attribute within HTML file as below.

<input type="button" value="Go To Bottom" id="bottom"> 

Preview:




How to Scroll Top of Document Using JavaScript



You can use the following JavaScript code that scroll the browser to the top most page of the document.

window.scroll(0,0);

You can execute this code on onclick event of JavaScript hyper-link or on onclick event of any button or text as given below.

<script>
window.onload=function(){
var top=document.getElementById(top);
top.onclick=function(){window.scrollTo(0,0);}
</script>

You can call this function by placing id attribute within HTML file as given below.

<input type="button" value="Go To Top" id="top"> 

Preview:



How to Scroll Document Automatically Using JavaScript


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.

For example, you can use the following code to scroll 10 pixels down every 200ms.

javascript:void setInterval(function(){scrollBy(0,10)}, 200);

How to Scroll Document to View Certain Element Using JavaScript  


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.

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.



Related Search Terms

  • How to Scroll to Top Using JavaScript

  • How to Scroll to Bottom Using JavaScript

     

Related Posts:

  • How to Show Pop Up Window Using JavaScript

  • How to go Back Browsing History Using JavaScript

  • How to Click Button Using JavaScript?

  • How to Write JavaScript Function as URL in Hyperlink?

  • How to use Round, Random, Min and Max in JavaScript

  • How to Concatenate, Join and Sort Array in JavaScript?

  • How to Loop Through JavaScript Array?

  • How to Loop using JavaScript?

  • How to Show Pop Up Boxes Using JavaScript?

  • How to Write Conditional Statements in JavaScript?

  • How to Write JavaScript With HTML?

  • How to create Changeable Date and Time Using JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • How to create a simple form using HTML?

  • How to Create JavaScript Image Sideshow with Links

  • How to Display Date Format in JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • What are the Different Ways to Redirect Page in JavaScript?

  • How to create Timer Using JavaScript?

  • How to make rounded corners border using CSS

  • How to Create Custom CSS Template for Printing

  • How to create a simple form using HTML?


Go to link Download

Read more »

Thursday, February 2, 2017

How to Create JavaScript Bookmarklet

How to Create JavaScript Bookmarklet


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

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

 How to Create JavaScript Bookmarklet?


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

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

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

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

Check the document without writing the document

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

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

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

  JavaScript Evaluator

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




Related Search Terms

  • How to Save JavaScript Code on Bookmark

  • How to Save JavaScript Link


Related Posts:

  • How to Write JavaScript Function as URL in Hyperlink?

  • How to use Round, Random, Min and Max in JavaScript

  • How to Concatenate, Join and Sort Array in JavaScript?

  • How to Loop Through JavaScript Array?

  • How to Loop using JavaScript?

  • How to Show Pop Up Boxes Using JavaScript?

  • How to Write Conditional Statements in JavaScript?

  • How to Write JavaScript With HTML?

  • How to create Changeable Date and Time Using JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • How to create a simple form using HTML?

  • How to Create JavaScript Image Sideshow with Links

  • How to Display Date Format in JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • What are the Different Ways to Redirect Page in JavaScript?

  • How to create Timer Using JavaScript?

  • How to make rounded corners border using CSS

  • How to Create Custom CSS Template for Printing

  • How to create a simple form using HTML?


Go to link Download

Read more »

Monday, January 30, 2017

How to Write Conditional Statements in JavaScript

How to Write Conditional Statements in JavaScript


The different types of conditional statements used in JavaScript for making different decisions are as follows.

If Statement


This statement is used to execute some code only if a specified condition is true.

Syntax:

if {condition}
{
code to be executed if condition is true
}

Example:

<script type="text/javascript">
var d=new Date()
var time=d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>")
}
</script>

This script writes "Good morning" greeting if the time is less than 10

If .... elese statement


This statement is used to execute some code only if the condition is true and another code if the condition is false.

Syntax:

if {condition}
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}

Example:

<script type="text/javascript">
var d=new Date()
var time=d.getHours()
if (time<10)
{
document.write("Good morning")
}
else
{
document.write("Good Day")
}
</script>

Preview:



If .... else If ..... else statement


This statement is used to select one of many blocks of code to be executed.

Syntax:

if {condition}
{
code to be executed if condition1 is true
}
else if {condition2}
{
code to be executed if condition2 is true
}
else
{
code to be executed if condition1 and condition2 are not true.
}

Example:

<script type="text/javascript">
var d=new Date()
var time=d.getHours()
if (time<10)
{
document.write("Good morning")
}
else if (time>=10 && time<16)
{
document.write("Good Day")
}
else
{
document.write("Hello World")
}
</script>

Preview:



Switch statement


This statement is used to select one of many blocks of code to be executed.

Syntax:

switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}

Example:

<script type="text/javascript">
var d=new Date();
theDay=d.getDay();
switch(theDay)
{
case 5:
document.write("Good Friday");
break;
case 6:
document.write("Super Saturday");
break;
case 0:
document.write("Sleepy Sunday");
break;
default:
document.write("I am looking forward to this weekend!");
}</script>

Preview:


Read Next: How to Show Pop Up Boxes Using JavaScript?

Related Search Terms

  • Javascript Conditional Statements

  • Javascript if and if else Statement

  • JavaScript if Condition Example


Related Posts:

  • How To Create Simple Image Slideshow Using JavaScript ?

  • Image Slideshow with Navigation Buttons Using JavaScript 

  • How to create Changeable Date and Time Using JavaScript?

  • How to Create JavaScript Image Slideshow with LInks

  • How to Display Date Format in JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • What are the Different Ways to Redirect Page in JavaScript?

  • How to Detect Visitors Browser Using JavaScript?

  • How to make rounded corners border using CSS

  • How to Create Custom CSS Template for Printing

  • How to create a simple form using HTML?


Go to link Download

Read more »

Monday, January 23, 2017

How to create Changeable Date and Time Using JavaScript

How to create Changeable Date and Time Using JavaScript


You can create changeable Date and Time using JavaScript Date object. JavaScript Date object will automatically hold the current date and time as its initial value. You can manipulate it easily by using different methods in Date object. The different methods in Date object I am going to use to create changeable Date and Time are as follows.

  • Date():    Returns todays date and time.
  • getDate(): Returns the day of the month from a Date object from 1-31.
  • getDay():  Returns the day of the week from a Date object from 1-6
  • getMonth():Returns the month from a Date object from 0-11
  • getFullYear(): Returns the year, as a four digit number from Date object.
  • getHours():   Returns the hour of a Date object from 0-23.
  • getMinutes(): Returns the minutes of a Date object from 0-59
  • getSeconds(): Returns the seconds of a Date object from 0-59

Do do rest of the work you have to create a new Date() object and needs to use that value to get date, month, day name and time with hours, minutes and seconds. You can create variables for day, month and year as follows.

var now=new Date();
var today=now.getDate();
var month=now.getMonth();
var year=now.getFullYear();
var day=now.getDay();

You can create variables for hours, minutes and seconds as follows.

var now=new Date();
var hours=now.getHours();
var minutes=now.getMinutes();
var seconds=now.getSeconds();

After getting month and day in number format, you can change it into name of the month and day by using the arrays as follows.

var monthname=new Array(12)
monthname[0]="January ";
monthname[1]="February ";
monthname[2]="March ";
monthname[3]="April ";
monthname[4]="May ";
monthname[5]="June ";
monthname[6]="July ";
monthname[7]="August ";
monthname[8]="Septmber ";
monthname[9]="October ";
monthname[10]="November ";
monthname[11]="December ";

var dayname=new Array(7)
dayname[0]="Sunday ";
dayname[1]="Monday ";
dayname[2]="Tuesday ";
dayname[3]="Wednesday ";
dayname[4]="Thrusday ";
dayname[5]="Friday ";
dayname[6]="Saturday ";


Full HTML Code to Create Changeable Date


Here is a full HTML code to create changeable date, you can use these codes to display full date or you can customize to display in different format on your web page.

<html>
<body>
<script type="text/javascript">
function displayDate(){
var now=new Date();
var today=now.getDate();
var month=now.getMonth();

var monthname=new Array(12)
monthname[0]="January ";
monthname[1]="February ";
monthname[2]="March ";
monthname[3]="April ";
monthname[4]="May ";
monthname[5]="June ";
monthname[6]="July ";
monthname[7]="August ";
monthname[8]="Septmber ";
monthname[9]="October ";
monthname[10]="November ";
monthname[11]="December ";

var year=now.getFullYear();
var day=now.getDay();

var dayname=new Array(7)
dayname[0]="Sunday ";
dayname[1]="Monday ";
dayname[2]="Tuesday ";
dayname[3]="Wednesday ";
dayname[4]="Thrusday ";
dayname[5]="Friday ";
dayname[6]="Saturday ";

document.write(monthname[month]+today+ ", "+year+ " "+dayname[day]);
}
window.onload=displayDate();
</script>
</body>
</html>

Preview of Date Displayed:


Full HTML Code to Create Changable Time


Here is a full HTML code to create changeable time, you can use these codes to display full time or you can customize to display in different format on your web page. You can use these codes to create digital clock using JavaScript, which I have already posted in my previous post.

<html>
<head></head>
<body>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
var ap="AM";

//to add AM or PM after time

if(h>11) ap="PM";
if(h>12) h=h-12;
if(h==0) h=12;

//to add a zero in front of numbers<10

m=checkTime(m)
s=checkTime(s)

document.getElementById(clock).innerHTML=h+":"+m+":"+s+" "+ap
t=setTimeout(startTime(), 500)
}

function checkTime(i)
{
if (i<10)
{ i="0" + i}
return i
}

window.onload=startTime;

</script>

<div id="clock"></div>
</body>
</html>

Preview of Time Displayed:




Related Posts:

  • How To Create Simple Image Slideshow Using JavaScript ?

  • Image Slideshow with Navigation Buttons Using JavaScript

  • How to Create JavaScript Image Slideshow with LInks

  • How to Display Date Format in JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • What are the Different Ways to Redirect Page in JavaScript?

  • How to Detect Visitors Browser Using JavaScript?

  • How to make rounded corners border using CSS

  • How to Create Custom CSS Template for Printing

  • How to create a simple form using HTML?


Go to link Download

Read more »

Saturday, January 21, 2017

How to validate required field in a form using javascript

How to validate required field in a form using javascript


In a wave form, fields are needs to validate at the time of entry or on submission of form. Generally in a form it needs to validate user has left required fields empty or not, user has entered valid e-mail address or not, user has entered a valid date, user has entered text in a numeric field or not and other also. 

Here is a function below to validate if a required field has been left empty. If the required field is blank, an alert box alerts a message and the function returns false. If a value is entered, the function returns true.


 Function to validate required field in a form using javascript


function validate_required(field, alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt); return false}
else {return true}
}
}

Full script, with the HTML form to validate required field 

<!DOCTYPE html>
<html>
<head>
<script>
function validate_required(field, alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt); return false}
else {return true}
}
}

function validate_form(thisform)
{
with(thisform)
{
if(validate_required(email, "Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>

<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email:<input type="text" name="email" size="40">
<input type="submit" value="submit">
</form>
</body>

</html>

Preview of the above code, to validate required field 






Email:






Related Posts



  • How to Create a Digital Clock in JavaScript?
  • How to Detect Visitors Browser Using JavaScript?
  • What are the Different Ways to Redirect Page in JavaScript?
  • How To Create Simple Image Slideshow Using JavaScript ?
  • How to Create Simple JavaScript Fade Effect Animation?
  • Image Slideshow with Navigation Buttons Using Javascript
  • How to Create JavaScript Image Slideshow with Links
  • Simple JavaScript Fade Effect Animation Using Jquery

Go to link Download

Read more »

Tuesday, January 17, 2017

How to Show Pop Up Boxes Using JavaScript

How to Show Pop Up Boxes Using JavaScript


Using JavaScript you can create three kinds of pop-up boxes, Alert box, Confirm box and prompt box.

Alert Box


An alert box is used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click on "OK" to processed.

Syntax:

alert("Alert Text")

Example:

<html>
<head>
<script type="text/javascript">
function display_alert()
{
alert("This is an alert box!")
}
</script>
</head>
<body>
<input type="button" onclick="display_alert()" value="Display alert box"/>
</body>
</html>

Preview:




 Conform box


A conform box is used if you want the user to verify or accept something. When a conform box pops up, the user will have to click either "OK" or "Cancel" to processed. If the user clicks "OK" the box returns true. If the user clicks "Cancel", the box returns false.

Syntax:

confirm{"Conform Text")

Example:

<html>
<head>
<script type="text/javascript">
function display_conform(){

r=confirm("Press a button");
if (r===true)
{
alert("You pressed OK!");
}
else
alert("You pressed Cancel");
}
</script>
<body>
<input type="button" onclick="display_conform()" value="Display a confirm box"/>
</body>
</html>

Preview:



 Prompt Box


A prompt box is used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click "OK" or "Cancel" to processed entering in input value.
If the use clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

Syntax:

prompt{"sometext", "defaultvalue"}

Example:

<html>
<head>
<script type="text/javascript">
function display_prompt(){
name=prompt("Please enter your name", "Your Name");
if ((name!=null) && name!=" ")
{
alert("Hello "+name+"! How are you today?");
}
}
</script>
</head>
<input type="button"onclick="display_prompt()" value="Display a prompt box"/>
</body>
</html>

Preview:



Read Next:How to Loop using JavaScript?

Related Search Terms

  • Javascript Pop Up Boxes

  • Javascript Alert Box

  • JavaScript Conform Box

  • JavaScript Prompt Box


Related Posts:

  • How To Create Simple Image Slideshow Using JavaScript ?

  • Image Slideshow with Navigation Buttons Using JavaScript 

  • How to create Changeable Date and Time Using JavaScript?

  • How to Create JavaScript Image Slideshow with LInks

  • How to Display Date Format in JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • What are the Different Ways to Redirect Page in JavaScript?

  • How to Detect Visitors Browser Using JavaScript?

  • How to make rounded corners border using CSS

  • How to Create Custom CSS Template for Printing

  • How to create a simple form using HTML?


Go to link Download

Read more »

Thursday, December 22, 2016

How to create Timer Using JavaScript

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 timer like stopwatch, clock, quiz timer and many more.

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

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

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

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

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

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

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

Execution of Function with Timer


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

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

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

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

Preview of Timer



How to Create Stopwatch using JavaScript Timer


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

Here is a JavaScript and HTML code for creating stopwatch.

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

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

Preview of Stopwatch




How to Create Timer for Online Quiz


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

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

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

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

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

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

Preview of Online Quiz Timer





Related Search Terms

  •  Timer Using JavaScript

  • Stopwatch Using JavaScript

  • JavaScript Online Quiz Timer


Related Posts:


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

  • How to Concatenate, Join and Sort Array in JavaScript?

  • How to Loop Through JavaScript Array?

  • How to Loop using JavaScript?

  • How to Show Pop Up Boxes Using JavaScript?

  • How to Write Conditional Statements in JavaScript?

  • How to Write JavaScript With HTML?

  • How to create Changeable Date and Time Using JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • How to create a simple form using HTML?

  • How to Create JavaScript Image Slideshow with LInks

  • How to Display Date Format in JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • What are the Different Ways to Redirect Page in JavaScript?

  • How to Detect Visitors Browser Using JavaScript?

  • How to make rounded corners border using CSS

  • How to Create Custom CSS Template for Printing

  • How to create a simple form using HTML?


Go to link Download

Read more »

Monday, December 19, 2016

How to Validate a HTML Form Using JavaScript

How to Validate a HTML Form Using JavaScript


In the previous post, I have described about "How to create a simple form using HTML" step by step with describing what is a form and what elements are used to create HTML form along with complete HTML code for a form. In this post I am going to describe about to Validate a this HTML Form Using JavaScript.

You can validate a HTML Form Using JavaScript for the following circumstances.

  • Whether or not the user left required fields empty
  • Whether or not the user entered a valid e-mail address
  • Whether or not the user entered a valid date
  • Whether or not the user entered text in numeric field or entered number in text field

Here in this post I am going to describe you, "How to Validate Required Fields using JavaScript.

Validating Required Field using JavaScript


This JavaScript Function below checks if a required field has been left empty. If the required field is blank, an alert box alerts a message and the function returns false. If the value is entered the function returns true.

function validate_required(field, alerttxt)
{
with(field)
{
if (value===null||value==="")
{alert(alerttxt); return false;}
else {return true;}
}
}

Complete JavaScript Code with HTML for Validating Required Field


Here are the complete JavaScript codes along with complete HTML codes uses with the JavaScript Functions given below.

<html>
<head><title>Subscription Form</title>
<script type="text/javascript">
function validate_required(field, alerttxt)
{
with(field)
{
if (value===null||value==="")
{alert(alerttxt); return false;}
else {return true;}
}
}

function validate_form(thisform)
{
with(thisform)
{
if (validate_required(fname, "First name must be filled out!")===false)
{fname.foucus(); return false;}
if (validate_required(lname, "Last name must be filled out!")===false)
{lname.foucus(); return false;}
if (validate_required(password, "Password must be filled out!")===false)
{password.foucus(); return false;}
if (validate_required(rpassword, "Retype Password must be filled out!")===false)
{rpassword.foucus(); return false;}
}
}
</script>
</head>
<body>
<FORM METHOD=GET ONSUBMIT="return validate_form(this);" ACTION="http://www.siteforinfotech.com/p/about-us.html">
<DIV>First Name:<INPUT TYPE=text NAME=fname VALUE=Enter First Name SIZE=30 MAXLENGTH=25></DIV><br/>
<DIV>Last Name:<INPUT TYPE=text NAME=lname VALUE=Enter Last Name SIZE=30 MAXLENGTH=25></DIV><br/>
<DIV>Password:<INPUT TYPE=password NAME=password SIZE=30 MAXLENGTH=25></DIV><br/>
<DIV>Retype Password:<INPUT TYPE=password NAME=rpassword SIZE=30 MAXLENGTH=25></DIV><br/>
<DIV>Email:<INPUT TYPE=text NAME=email VALUE=Enter Your Email SIZE=30 MAXLENGTH=25></DIV><br/>
<br/>
<INPUT TYPE=submit VALUE=Submit><INPUT TYPE=reset VALUE=Reset>
</FORM>
</body>
</html>


Preview of the above HTML Code



First Name:

Last Name:

Password:

Retype Password:

Email:



Here I have posted this JavaScript and HTML codes for sample only. You can write validation JavaScript to validate other fields for other circumstances.



Related Posts:

  • How To Create Simple Image Slideshow Using JavaScript ?

  • Image Slideshow with Navigation Buttons Using JavaScript

  • How to Create JavaScript Image Slideshow with LInks

  • How to Display Date Format in JavaScript?

  • How to Create a Digital Clock in JavaScript?

  • What are the Different Ways to Redirect Page in JavaScript?

  • How to Detect Visitors Browser Using JavaScript?

  • How to make rounded corners border using CSS

  • How to Create Custom CSS Template for Printing

  • How to create a simple form using HTML?


Go to link Download

Read more »

Thursday, December 1, 2016

How to Add Multiple Slideshows on One Page Using Javascript

How to Add Multiple Slideshows on One Page Using Javascript



Most of our visitors asked "How to Add Multiple Slideshows on One Page Using JavaScript" by commenting on different previous posts for JavaScript slideshow and going to write this post about to add multiple slideshows on the same page. Using this script you can add number of slideshows on single page as your requirements. 


Multiple Slideshows on One Page Using JavaScript



To make multiple slideshows, at first you have to make variable lists for each slideshows and have to create new slideshow using function slideshow( ). Here I have created two slideshows with variables SlideList1 and SlideList2 and uses function slideshow with parameters slideList, image, speed and name.

You can create number of new slideshows using this function below using new keyword. i.e. var slideshow1=new slideshow(slideList1, slide1, 3000, slideshow1);

function SlideShow(slideList, image, speed, name) 
{
this.slideList = slideList;
this.image = image;
this.speed = speed;
this.name = name;
this.current = 0;
this.timer = 0;
}

And the another function switchImage( ) given below allows you to  change images while playing slideshows.

function switchImage(imgName, imgSrc) 
{
if (document.images)
{
if (imgSrc != "none")
{
document.images[imgName].src = imgSrc;
}
}
}

Here is a full JavaScript code for making multiple slideshows on one page using JavaScript. Copy the following codes inside body tag of your HTML file and replace given image source <img src=" "> with your image source.


<img src="image1.gif" name="slide1">
<img src="image2.gif" name="slide2">
<script type=text/javascript>
var SlideList1 = [image1.gif, image2.gif, image3.gif];
var SlideShow1 = new SlideShow(SlideList1, slide1, 3000, "SlideShow1");
var SlideList2 = [image4.gif, image5.gif, image6.gif];
var SlideShow2 = new SlideShow(SlideList2, slide2, 1000, "SlideShow2");
function SlideShow(slideList, image, speed, name)
{
this.slideList = slideList;
this.image = image;
this.speed = speed;
this.name = name;
this.current = 0;
this.timer = 0;
}
function switchImage(imgName, imgSrc)
{
if (document.images)
{
if (imgSrc != "none")
{
document.images[imgName].src = imgSrc;
}
}
}
SlideShow.prototype.play = SlideShow_play;
function SlideShow_play()
{
with(this)
{
if(current++ == slideList.length-1) current = 0;
switchImage(image, slideList[current]);
clearTimeout(timer);
timer = setTimeout(name+.play(), speed);
}
}
window.onLoad=SlideShow1.play();SlideShow2.play();
</script>


Here the speed of first and second slideshows are specified 3000 and 1000 respectively, your can change them as your requirements. Also you can add more slideshows by adding more slideList and slideshow variables.


Preview of  JavaScript Code Given Above



slide1

slide2



You can add custom CSS codes to give different styles like setting border using border: property, give rounded corners using border-radius property as presented in the previous post "How to make rounded corners border using CSS" and can give different animation effects like fade effects, zoom effects, slide effects etc. 

You can refer to the following previous posts to give fade effect animations using CSS, JavaScript or JQuery codes.

  • How to create fade effect image slideshow using CSS
  • How to Create Simple JavaScript Fade Effect Animation?
  • Simple JavaScript Fade Effect Animation Using Jquery

     


Related Posts:




  • How To Create Simple Image Slideshow Using JavaScript ?
  • Image Slideshow with Navigation Buttons Using JavaScript
  • How to Create JavaScript Image Slideshow with LInks
  • How to Display Date Format in JavaScript?
  • How to Create a Digital Clock in JavaScript?
  • What are the Different Ways to Redirect Page in JavaScript?
  • How to Detect Visitors Browser Using JavaScript?



Go to link Download

Read more »

Monday, November 7, 2016

How to Write JavaScript With HTML

How to Write JavaScript With HTML


JavaScript is the most popular scripting language in the web to improve the design, validate forms, detect browsers, create cookies and many more client side functionalities and works in all major browsers, such as Internet Explorer, Mozilla Firefox, Google Chrome, Netscape, Opera and many more.

It is a lightweight programming language consisting of lines of executable computer code and usually embedded directly into HTML pages.

To write JavaScript with HTML page, you have to use the <script> tag along with the type attribute to define the scripting language. So the <script type="text/javascript"> and </script> tells where the javascript starts and end.


Different Ways to Write JavaScript with HTML


There are different ways to write JavaScript with HTML, which are as follows.

Scripts in the HEAD Section

When scripts are placed in head section, they needs to be executed when they are called, or when an event is triggered and it will ensure that the script is loaded before anyone uses it.

You can write <script> tag in the head section as follows.

<html>
<head>
<script type="text/javascript">
javascript codes are written here
</script>
</head>
<body>
</body>
</html>

Scripts in the BODY section

As in the head section, you can also place JavaScript codes in the body section using <script> tag and it will be executed when the page loads.

You can write <script> tag in the body section as follows.

<html>
<head>
</head>
<body>
<script type="text/javascript">
javascript codes are written here
</script>
</body>
</html>

Scripts in both the HEAD and BODY section

You can write <script> tag in both the head and body section as follows.

<html>
<head>
<script type="text/javascript"> 
javascript codes are written here
</script>
</head>
<body>
<script type="text/javascript">
javascript codes are written here
</script>
</body>
</html>


Scripts Using an External JavaScript File

If you needs to write same JavaScript code on several pages, you can write it on separate external page with a .js file extension and can link it to the HTML file.

You can link external JavaScript file to HTML file as follows.

<html>
<head>
<script src="javascript.js">
</script>
</head>
<body>
</body>
</html>

Read Next: How to Write Conditional Statements in JavaScript?

Related Search Terms

  • How to link JavaScript with HTML

  • How to use JavaScript on HTML


Related Posts:

  • How To Create Simple Image Slideshow Using JavaScript ?

  • Image Slideshow with Navigation Buttons Using JavaScript 

  • How to create Changeable Date and Time Using JavaScript?

  • How to Create JavaScript Image Slideshow with LInks

  • How to Display Date Format in JavaScript?

  • How to Validate a HTML Form Using JavaScript?

  • What are the Different Ways to Redirect Page in JavaScript?

  • How to Detect Visitors Browser Using JavaScript?

  • How to make rounded corners border using CSS

  • How to Create Custom CSS Template for Printing

  • How to create a simple form using HTML?


Go to link Download

Read more »