Examples on JavaScript: javascript

Showing posts with label javascript. Show all posts

JavaScript Comments

When Programming, it is good to write the comments around the code so that you know what it is doing and so people reading your code knows what it is doing.

When you add single line comment in JavaScript then start with //.

This example uses single line comments to explain the code:

JavaScript Multi-line Comments

If you want to add Multi line comments in your JvaSript code then start with /* and end with */.

Example on Multi line comment :

JavaScript Where To

JavaScripts in the body section will be executed WHILE the page loads.

JavaScripts in the head section will be executed when CALLED.

Script in the Head Section: Scripts to be executed when they are called, or when an event is triggered, go in the head section.

<html>
<head>
<title>......</title>
<script language="javascript">
...Write your Jvascript code hear...
</script>
</head>
<body>
HTML Statements
</body>
</html>

Scripts in the body section: Scripts to be executed when the page loads go in the body section

<html>
<head>
<title>......</title>
</head>
<body>
<script language="javascript">
...Write your Jvascript code hear...
</script>
HTML Statements
</body>
</html>

Scripts in both the body and the head section: You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section.

<html>
<head>
<title>......</title>
<script language="javascript">
...Write your Jvascript code hear...
</script>
</head>
<body>
<script language="javascript">
...Write your Jvascript code hear...
</script>
</body>
</html>

Using an External JavaScript

you want to run the same JavaScript on several pages, without having to write the same script on every page.To simplify this, you can write a JavaScript in an external file. Save the external JavaScript file with a .js file extension.

Note: The JavaScript external File/script cannot contain the <script> tag!

To use the external script, point to the .js file in the "src" attribute of the <script> tag:

JavaScript How To

The HTML <script> tag is used to insert a JavaScript into an HTML page.

How to Put a JavaScript Into an HTML Page

<html>
<body>
<script language="javascript">
document.write("Hello Everybody!");
</script>
</body>
</html>

The code above will produce this output on an HTML page:

Hello Everybody!

Example Explained
To insert a JavaScript code into an HTML Page, then we use the <script> tag.Inside the <script> tag we use the type attribute to define the scripting language.

So, the <script language="javascript"> and </script> tells where the JavaScript starts and ends:

<html>
<head>
<title>......</title>
</head>
<body>
<script language="javascript">
...Write your Jvascript code hear...
</script>
HTML Statements
</body>
</html>

The word document.write is a standard JavaScript command for writing output to a page.

By entering the document.write command between the tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello Everybody! to the page:

Note: If we had not entered the <script language="javascript"> and </script> tag, the browser would have treated the document.write("Hello World!") command as pure text, and just write the entire line on the page.

JavaScript: History list manipulation

History.Back Object
The History object contains an array of previously visited URLs by the visitor. To simulate the browser's back button, for example, you can use the History object:

**The Previous URL in the History List**
<html> <head> <title>Javascript - Browser history list manipulation</title> </head> <body> <a href="javascript:history.back(-1)">Go Back one Page</a> <a href="javascript:history.back(-2)">Go Back Two Page</a> <a href="javascript:history.back(-3)">Go Back Three Page</a> . . . <a href="javascript:history.back(-n)">Go Back n Page</a> </body> </html>

History.Forward Object
The History object contains an array of Next visited URLs by the visitor. To simulate the browser's forward button, for example, you can use the History object:

**The next URL in the History List**
<html> <head> <title>Javascript - Browser history list manipulation</title> </head> <body> <a href="javascript:history.forward(1)">Go Forward one Page</a> <a href="javascript:history.forward(2)">Go Forward Two Page</a> <a href="javascript:history.forward(3)">Go Forward Three Page</a> . . . <a href="javascript:history.forward(n)">Go Forward n Page</a> </body> </html>

History.go
Go to nearest URL in History List.

**Go on this Page**
<html> <head> <title>Javascript - Browser history list manipulation</title> </head> <body> <a href="javascript:history.go(Link Address)">Link name</a> </body> </html>

JavaScript: Validation

<html>
<head>
<title>Enquiry Form</title>
<script language="javascript">
function check()
{
var email=f1.email.value;
if(f1.fname.value=="")
alert("Please enter first name");
else
if(f1.lname.value=="")
alert("Please enter last name");
else
if(f1.cno.value=="")
alert("Please enter contact number");
else
if(isNaN(f1.cno.value))
alert("Please enter correct contact number");
else
if(f1.add.value=="")
alert("Please enter address");
else
if(f1.email.value=="")
alert("Please enter Email address");
else
if(email.indexOf("@")==-1)
alert("Missing '@' in Email address");
else
if(email.indexOf(".")==-1)
alert("Missing '.' in Email address");
else
if(f1.course.value=="select")
alert("Please select the course name");
else
if(f1.d.value=="Day")
alert("Please enter day");
else
if(f1.M.value=="month")
alert("Please enter Month");
else
if(f1.y.value=="year")
alert("Please enter Year");
}

</script>
</head>
<body>
<h1>Enquiry Form</h1><p>
<form name="f1" action="mailto:yourmailid@sitename.com" method="post">
<table width="60%">
<tr>
<td width="50%">First Name: </td><td width="50%"><input type="text" name=fname></td></tr>
<tr>
<td>Last Name: </td><td><input type="text" name=lname></td></tr>
<tr><td>Gender: </td><td><input type="radio" name=g checked>Male <input type="radio" name=g>Female</td></tr>
<tr><td>PhoneNumber:</td><td><input type="text" name=cno></td></tr>
<tr><td>Address: </td><td><textarea name="add"></textarea></td></tr>
<tr><td>Email-id</td><td><input type="text" name=email style="background-color:yellow"></td></tr>
<tr><td>Date of Birth: </td><td>
<select name="d">
<OPTION value="Day" selected>Day</OPTION>
<OPTION value=1>1</OPTION> <OPTION value=2>2</OPTION>
<OPTION value=3>3</OPTION> <OPTION value=4>4</OPTION>
<OPTION value=5>5</OPTION> <OPTION value=6>6</OPTION>
<OPTION value=7>7</OPTION> <OPTION value=8>8</OPTION>
<OPTION value=9>9</OPTION> <OPTION
value=10>10</OPTION> <OPTION value=11>11</OPTION>
<OPTION value=12>12</OPTION> <OPTION
value=13>13</OPTION> <OPTION value=14>14</OPTION>
<OPTION value=15>15</OPTION> <OPTION
value=16>16</OPTION> <OPTION value=17>17</OPTION>
<OPTION value=18>18</OPTION> <OPTION
value=19>19</OPTION> <OPTION value=20>20</OPTION>
<OPTION value=21>21</OPTION> <OPTION
value=22>22</OPTION> <OPTION value=2>23</OPTION>
<OPTION value=24>24</OPTION> <OPTION
value=25>25</OPTION> <OPTION value=26>26</OPTION>
<OPTION value=27>27</OPTION> <OPTION
value=28>28</OPTION> <OPTION value=29>29</OPTION>
<OPTION value=30>30</OPTION> <OPTION
value=31>31</OPTION></SELECT>
<select name="M">
<OPTION value="month" selected>Month</OPTION> <OPTION
value=Jan>Jan</OPTION> <OPTION value=Feb>Feb</OPTION>
<OPTION value=March>March</OPTION> <OPTION
value=April>April</OPTION> <OPTION
value=May>May</OPTION> <OPTION
value=June>June</OPTION> <OPTION
value=July>July</OPTION> <OPTION
value=Aug>Aug</OPTION> <OPTION
value=Sept>Sept</OPTION> <OPTION
value=Oct>Oct</OPTION> <OPTION value=Nov>Nov</OPTION>
<OPTION value=Dec>Dec</OPTION></SELECT>
<select name="y">
<OPTION value="year" selected>Year</OPTION>
<OPTION value=2008>2008</OPTION> <OPTION
value=2007>2007</OPTION> <OPTION
value=2006>2006</OPTION> <OPTION
value=2005>2005</OPTION> <OPTION
value=2004>2004</OPTION> <OPTION
value=2003>2003</OPTION> <OPTION
value=2002>2002</OPTION> <OPTION
value=2001>2001</OPTION> <OPTION
value=2000>2000</OPTION> <OPTION
value=1999>1999</OPTION> <OPTION
value=1998>1998</OPTION> <OPTION
value=1997>1997</OPTION> <OPTION
value=1996>1996</OPTION> <OPTION
value=1995>1995</OPTION> <OPTION
value=1994>1994</OPTION> <OPTION
value=1993>1993</OPTION> <OPTION
value=1992>1992</OPTION> <OPTION
value=1991>1991</OPTION> <OPTION
value=1990>1990</OPTION> <OPTION
value=1989>1989</OPTION> <OPTION
value=1988>1988</OPTION> <OPTION
value=1987>1987</OPTION> <OPTION
value=1986>1986</OPTION> <OPTION
value=1985>1985</OPTION> <OPTION
value=1984>1984</OPTION> <OPTION
value=1983>1983</OPTION> <OPTION
value=1982>1982</OPTION> <OPTION
value=1981>1981</OPTION> <OPTION
value=1980>1980</OPTION> <OPTION
value=1979>1979</OPTION> <OPTION
value=1978>1978</OPTION> <OPTION
value=1977>1977</OPTION> <OPTION
value=1976>1976</OPTION> <OPTION
value=1975>1975</OPTION> <OPTION
value=1974>1974</OPTION> <OPTION
value=1973>1973</OPTION> <OPTION
value=1972>1972</OPTION> <OPTION
value=1971>1971</OPTION> <OPTION
value=1970>1970</OPTION> <OPTION
value=1969>1969</OPTION> <OPTION
value=1968>1968</OPTION> <OPTION
value=1967>1967</OPTION> <OPTION
value=1966>1966</OPTION> <OPTION
value=1965>1965</OPTION> <OPTION
value=1964>1964</OPTION> <OPTION
value=1963>1963</OPTION> <OPTION
value=1962>1962</OPTION> <OPTION
value=1961>1961</OPTION> <OPTION
value=1960>1960</OPTION> <OPTION
value=1959>1959</OPTION> <OPTION
value=1958>1958</OPTION> <OPTION
value=1957>1957</OPTION> <OPTION
value=1956>1956</OPTION> <OPTION
value=1955>1955</OPTION> <OPTION
value=1954>1954</OPTION> <OPTION
value=1953>1953</OPTION> <OPTION
value=1952>1952</OPTION> <OPTION
value=1951>1951</OPTION> <OPTION
value=1950>1950</OPTION> <OPTION
value=1949>1949</OPTION> <OPTION
value=1948>1948</OPTION> <OPTION
value=1947>1947</OPTION> <OPTION
value=1946>1946</OPTION> <OPTION
value=1945>1945</OPTION> <OPTION
value=1944>1944</OPTION> <OPTION
value=1943>1943</OPTION> <OPTION
value=1942>1942</OPTION> <OPTION
value=1941>1941</OPTION> <OPTION
value=1940>1940</OPTION> <OPTION
value=1939>1939</OPTION> <OPTION
value=1938>1938</OPTION> <OPTION
value=1937>1937</OPTION> <OPTION
value=1936>1936</OPTION> <OPTION
value=1935>1935</OPTION> <OPTION
value=1934>1934</OPTION> <OPTION
value=1933>1933</OPTION> <OPTION
value=1932>1932</OPTION> <OPTION
value=1931>1931</OPTION> <OPTION
value=1930>1930</OPTION> <OPTION
value=1929>1929</OPTION> <OPTION
value=1928>1928</OPTION> <OPTION
value=1927>1927</OPTION> <OPTION
value=1926>1926</OPTION> <OPTION
value=1925>1925</OPTION> <OPTION
value=1924>1924</OPTION> <OPTION
value=1923>1923</OPTION> <OPTION
value=1922>1922</OPTION> <OPTION
value=1921>1921</OPTION> <OPTION
value=1920>1920</OPTION> <OPTION
value=1919>1919</OPTION> <OPTION
value=1918>1918</OPTION> <OPTION
value=1917>1917</OPTION> <OPTION
value=1916>1916</OPTION> <OPTION
value=1915>1915</OPTION> <OPTION
value=1914>1914</OPTION> <OPTION
value=1913>1913</OPTION> <OPTION
value=1912>1912</OPTION> <OPTION
value=1911>1911</OPTION> <OPTION
value=1910>1910</OPTION> <OPTION
value=1909>1909</OPTION> <OPTION
value=1908>1908</OPTION> <OPTION
value=1907>1907</OPTION> <OPTION
value=1906>1906</OPTION> <OPTION
value=1905>1905</OPTION> <OPTION
value=1904>1904</OPTION> <OPTION
value=1903>1903</OPTION> <OPTION
value=1902>1902</OPTION> <OPTION
value=1901>1901</OPTION></SELECT>
</td></tr>
<tr><td><center>
<input type="submit" value="Submit" onclick="check()"> </center></td><td>
<input type="reset" value="reset"></td></tr>
</table>
</form>
</body>
</html>

JavaScript: VISIT COUNTER

<html>
<head>
<title>VISIT COUNTER</title>
<style>
.counter{
background-color:white;
color:blue;
font-weight:bold;}
</style>

<SCRIPT>
expireDate = new Date
expireDate.setMonth(expireDate.getMonth()+6)
jcount = eval(cookieVal("jaafarCounter"))
jcount++
document.cookie = "jaafarCounter="+jcount+";expires=" + expireDate.toGMTString()

function cookieVal(cookieName) {
thisCookie = document.cookie.split("; ")
for (i=0; i<thisCookie.length; i++){
if (cookieName == thisCookie[i].split("=")[0]){
return thisCookie[i].split("=")[1]
}
}
return 0
}

function page_counter(){
for (i=0;i<(7-jcount.toString().length);i++)
document.write('<span class="counter">0</span>')
for (y=0;y<(jcount.toString().length);y++)
document.write('<span class="counter">'+jcount.toString().charAt(y)+'</span>')
}
</SCRIPT>

<SCRIPT>
page_counter(jcount);
</SCRIPT>
</head>
</html>

JavaScript: Date Function

<html>
<head>
<title>Date Function</title>
<script language="javascript">
var cdate=new Date();
function day()
{
var d1=cdate.getDay();
if(d1==0)
d1="Sunday";
else if(d1==1)
d1="Monday";
else if(d1==2)
d1="Tuesday";
else if(d1==3)
d1="Wednesday";
else if(d1==4)
d1="Thursday";
else if(d1==5)
d1="Friday";
else if(d1==6)
d1="Saturday";
time.d.value=d1;
}
function month()
{
time.m.value=cdate.getMonth()+1;
}
function year()
{
var cyear=cdate.getYear();
time.y.value=cyear;
}
function hour()
{
time.h.value=cdate.getHours();
}
function minute()
{
time.m1.value=cdate.getMinutes();
}
function sec()
{
time.s1.value=cdate.getSeconds();
}
function time1()
{
time.t.value=cdate.getTime();
}
function date()
{
time.d1.value=cdate;
}
</script>
</head>
<body>
<form name="time">
<input type="button" value="Day" onclick="day()">
<input type="text" name="d">
<input type="button" value="Month" onclick="month()">
<input type="text" name="m">
<input type="button" value="Year" onclick="year()">
<input type="text" name="y">
<input type="button" value="Hour" onclick="hour()">
<input type="text" name="h">
<input type="button" value="Minute" onclick="minute()">
<input type="text" name="m1">
<input type="button" value="Second" onclick="sec()">
<input type="text" name="s1">
<input type="button" value="Time" onclick="time1()">
<input type="text" name="t">
<input type="button" value="Date" onclick="date()">
<input type="text" name="d1">
</form>
</body>
</html>

JavaScript: Other Examples

Right click Disabled
Date and Time Object
Visit Counter
Form with validation

JavaScript: Disable right click options

<html>
<head>
<title>Disable right click options</title>
<script language="javascript">
function click()
{
<-------Javascript start-----
if(event.button==2)
{
alert("Disabled");
}
}
document.onmousedown=click
-------Javascript End-------->
</script>
</head>
</html>

JavaScript: Validation on Email address

Example:
<html>
<head>
<title>Validation on email Address</title>
<script language="javascript">
function check()
{
var email=document.f1.email.value;
if(f1.email.value=="")
alert("Please enter Email address");
else
if(email.indexOf("@")==-1)
alert("Missing '@' in Email address");
else
if(email.indexOf(".")==-1)
alert("Missing '.' in Email address");}
</script>
</head>
<body>
<form name="f1">
Enter Email Address: <input type="text" name="email">
<input type="button" value="Submit" name="b1" onclick="check()">
</form>
</body>
</html>

Introduction to JavaScript

JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more.

JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, and Opera.

What is JavaScript?

Jvascript is a Object Oriented Language

Javascript is a Scripting Language

Javascript is case sensitive

Javascript is Interpreted Language

A scripting Language is a lightweight Programming Language

JavaScript was designed to add interactivity to HTML pages

A JavaScript consists of lines of executable computer code

Javascript Language is clientside Scripting

Are Java and JavaScript the Same?
NO!

Java and JavaScript are two completely different languages in both concept and design!

Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.

JavaScript: Push Function

Push Function:
Adds one or more elements to the end of an array and returns the last element added to the array. This method changes the length of the array.

Syntax:
arrayname.push("element1","element2",.......,"elementN")

Description:
The behavior of the push method is analogous to the push function in Perl 4. Note that this behavior is different in Perl 5.

Example in HEAD Section:

<html>
<head>
<title>Push Function</title>
<script language="javascript">
myfish=new Array("Elephent", "Lion" , "Tiger" , "Cat" , "Dog");
document.write("<b>Before my Array is:</b> " +myfish +"<br>");
document.write("<b>Total element in the Array is:</b> " + myfish1.push("Mouse"));
document.write("<br><b>After my Array is:</b> " +myfish);
</script>
</head>
</html>

Example in BODY Section:

<html>
<head>
<title>Push Function</title>
</head>
<body>
<script language="javascript">
myfish=new Array("Elephent", "Lion" , "Tiger" , "Cat" , "Dog");
document.write("<b>Before my Array is:</b> " +myfish +"<br>");
document.write("<b>Total element in the Array is:</b> " + myfish1.push("Mouse"));
document.write("<br><b>After my Array is:</b> " +myfish);
</script>
</body>
</html>

OUTPUT:

Before my Array is: Elephent,Lion,Tiger,Cat,Dog
Total element in the Array is: 6
After my Array is: Elephent,Lion,Tiger,Cat,Dog,Mouse

JavaScript: POP Function

pop Function:
Removes the last element from an array and returns that element. This method changes the length of the array.

Syntax:
arrayname.pop()

Example in HEAD Section:

<html>
<head>
<title>pop function</title>
<script language="javascript">
myfish = ["Onion", "Bannana"," Orange", "Apple"];
document.write("<b>Before my Array is:</b> " + myfish +"<br>");
document.write("<b>Remove element in the array is:</b> " + myfish.pop());
document.write("<br><b>After my Array is:</b> " + myfish);
</script>
</head>
</html>

Example in BODY Section:

<html>
<head>
<title>pop function</title>
</head>
<body>
<script language="javascript">
myfish = ["Onion", "Bannana"," Orange", "Apple"];
document.write("<b>Before my Array is:</b> " + myfish +"<br>");
document.write("<b>Remove element in the array is:</b> " + myfish.pop());
document.write("<br><b>After my Array is:</b> " + myfish);
</script>
</body>
</html>

OUTPUT:

Before my Array is: Onion,Bannana,Orange,Apple
Remove element in the array is: Apple
After my Array is: Onion,Bannana,Orange

JavaScript: Sort Function

sort Function:
Sorts the elements of an array.

Syntax:
sort()

Example in HEAD section:

<html>
<head>
<title>Sort Function</title>
<script language="javascript">
names=new Array("Mango","Apple","Orange","Water Melon","Bannana","Strawberry");
document.write("Array is <br>" + names + "<p>");
var str1=names.sort();
document.write("After Sorting this array is<br>" +str1);
<script>
</head>
</html>

Example in BODY section:

<html>
<head>
<title>Sort Function</title>
</head>
<body>
<script language="javascript">
names=new Array("Mango","Apple","Orange","Water Melon","Bannana","Strawberry");
document.write("Array is <br>" + names + "<p>");
var str1=names.sort();
document.write("After Sorting this array is<br>" +str1);
<script>
</body>
</html>

OUTPUT:

Array is
Mango,Apple,Orange,Water Melon,Bannana,Strawberry

After Sorting this array is
Apple,Bannana,Mango,Orange,Strawberry,Water Melon

JavaScript: Reverse Function

reverse Function:
Transposes the elements of an array: the first array element becomes the last and the last becomes the first.

Syntax:
arrayname.revrse()

Description:
The reverse method transposes the elements of the calling array object.

Example in HEAD section:

<html>
<head>
<title>Reverse Function</title>
<script language="javascript">
example=new Array("one" , "two", "three", "four");
document.write("<p>" + example.reverse());
</script>
</head>
</html>

Example in BODY section:

<html>
<head>
<title>Reverse Function</title>
</head>
<body>
<script language="javascript">
example=new Array("one" , "two", "three", "four");
document.write("<p>" + example.reverse());
</script>
</body>
</html>

OUTPUT:

four,three,two,one

JavaScript: splice Function

Splice Function:
Changes the content of an array,adding new elements while removing old elements.

Syntax:
splice(index,howmany,"element1","element2",......,"elementN");

Parameters:

index:	Index at which to start changing the array.
howMany:	An integer indicating the number of old array elements to remove. If howMany is 0, no elements are removed. In this case, you should specify at least one new element.
element1, ....,elementN	The element to add to the array. If you don't specify any elements, splice simply removes elements from the array.

Example in HEAD section:

<html>
<head>
<title>Splice Function</title>
<script language="javascript">
arr=new Array("one","two","three","Four");
document.write("<b>My Array before:</b> " + arr);
arr.splice(4,0,"five","six");
document.write("<br><b>my Array after:</b> " + arr);

document.write("<p><b>My Array before:</b> " + arr);
arr.splice(0,2,"1","2");
document.write("<br><b>my Array after:</b> " + arr);
</script>
</head>
</html>

Example in BODY section:

<html>
<head>
<title>Splice Function</title>
</head>
<body>
<script language="javascript">
arr=new Array("one","two","three","Four");
document.write("<b>My Array before:</b> " + arr);
arr.splice(4,0,"five","six");
document.write("<br><b>my Array after:</b> " + arr);

document.write("<p><b>My Array before:</b> " + arr);
arr.splice(0,2,"1","2");
document.write("<br><b>my Array after:</b> " + arr);
</script>
</body>
</html>

OUTPUT:
My Array before: one,two,three,Four
my Array after: one,two,three,Four,five,six

My Array before: one,two,three,Four,five,six
my Array after: 1,2,three,Four,five,six

JavaScript: Join Function

join Function:
Joins all elements of an array into a string.

Syntax:
join(separator);

Example in HEAD section:

<html>
<head>
<script language="javacsript">
num=new Array("One""two","Three","our");
var str;
str=num.join();
document.write(str + "<br>");
str=num.join(" , ");
document.write(str + "<br>");
str=num.join(" + ");
document.write(str + "<br>");
</script>
</head>
</html>

Example in BODY section:

<html>
<head>
<script language="javacsript">
</head>
<body>
num=new Array("One""two","Three","our");
var str;
str=num.join();
document.write(str + "<br>");
str=num.join(" , ");
document.write(str + "<br>");
str=num.join(" + ");
document.write(str + "<br>");
</script>
</body>
</html>

OUTPUT

One,two,Three,Four
One , two , Three , Four
One + two + Three + Four

JavaScript: Fontsize Function

fontsize Function:
You can change font size by using fontsize Function in Javascript.

Syntax:
variablename.fontsize(size);

Example in HEAD section:

<html>
<head>
<title>Fontsize Function</title>
<script lnaguage="javascript">
var worldString="Hello, world"
document.write(worldString.small())
document.write("<P>" + worldString.big())
document.write("<P>" + worldString.fontsize(5))
</script>
</head>
</html>

Example in BODY section:

<html>
<head>
<title>Fontsize Function</title>
</head>
<body>
<script lnaguage="javascript">
var worldString="Hello, world"
document.write(worldString.small())
document.write("<P>" + worldString.big())
document.write("<P>" + worldString.fontsize(5))
</script>
</body;
</html>

OUTPUT

Hello, world

Hello, world

Hello, world

JavaScript: Concat Function

concat Function:
Joins two arrays and returns a new array.

Syntax:
concat(arrayName2,arrayName3, ...,arrayNameN);

Example in HEAD section:

<html>
<head>
<title>Concat Function</title>
<script language="javascript">
var s1="Oh "
var s2="what a beautiful "
var s3="morning"
var s4=s1.concat(s2,s3)
document.write(s4);
</script>
</head>
</html>

Example in BODY section:

<html>
<head>
<title>Concat Function</title>
</head>
<body>
<script language="javascript">
var s1="Oh "
var s2="what a beautiful "
var s3="morning"
var s4=s1.concat(s2,s3)
document.write(s4);
</script>
</body>
</html>

OUTPUT

Oh what a beautiful morning

JavaScript: unshift Function

unshift Function:
Adds one or more elements to the beginning of an array and returns the new length of the array.

Syntax:
arrayname.unshift(element1,element2.........elementn)

Example in HEAD section:

<html>
<head>
<title>unshift Function</title>
<script language="javascript">
var nushifted;
myArray = ["angel", "clown"];
document.writeln("myArray before: " + myArray + "<p>");
unshifted = myArray.unshift("mandarin", "surgeon");
document.writeln("myArray after: " + myArray + "<p>");
</script>
</head>
</html>

Example in BODY section:

<html>
<head>
<title>unshift Function</title>
</head>
<body>
<script language="javascript">
var nushifted;
myArray = ["angel", "clown"];
document.writeln("myArray before: " + myArray + "<p>");
unshifted = myArray.unshift("mandarin", "surgeon");
document.writeln("myArray after: " + myArray + "<p>");
</script>
</body>
</html>

OUTPUT

myArray before: angel,clown

myArray after: angel,clown,mandarin,surgeon

More Examples