Learn to code

CSS Tutorial in PDF

2014-04-11T02:42:00.001-07:00

If you think this PDF is worth of $5.99 value, kindly pay this little amount using a Credit Card or PayPal for the PDF.

Download CSS Tutorial (PDF Version)

CSS Useful Resources

2014-04-11T02:41:00.001-07:00

If you want to list down your website, book or any other resource on this page then please contact at webmaster@tutorialspoint.com

CSS 1 Specification - W3C Cascading Style Sheets, level 1 Specification
CSS 2 Specification - W3C Cascading Style Sheets, level 2 Specification
W3C HTML Validation Service - Validate your HTML/XHTML document against W3C Standard.
Offline HTML Validator - Download and install this software to validate your HTML/XHTML pages offline.
Starting with HTML + CSS - A W3C tutorial on HTML and CSS.
XHTML1.0 - W3C XHTML 1.0. It offers the same flavors as HTML 4.0 and 4.01, reformulated in XML, with minor restrictions.
XHTML1.0 - W3C XHTML 1.1. It is based on XHTML 1.0 Strict, but includes minor changes.
HTML 4.01 Specification - A complete specification of HTML4.01, the most popular version of HTML.
W3C Specifications List - A comprehensive list of W3C standards. You will find most latest versions available on this page.

CSS2 Reference Guide

2014-04-11T02:40:00.002-07:00

This is a complete reference guide for web developers where haved we listed all the CSS properties defined in the World Wide Web Consortium's Recommended Specification for Cascading Style Sheets, Level 2

Click any property to see its description with examples:

Property	Description
azimuth	Describes the position of a sound source along the horizontal axis of the listener's environment.
background	Composite property for the following properties: background-attachment background-color background-image background-position background-repeat
background-attachment	Determines if the background image is fixed in the window or scrolls as the document scrolls
background-color	Sets the background color of an element
background-image	Sets the background image of an element
background-position	Sets the initial position of the element's background image, if specified; values normally are paired to provide x, y positions; default position is 0% 0%.
background-repeat	Determines how the background image is repeated (tiled) across an element
border	Sets all four of an element's borders; value is one or more of a color, a value for border-width, and a value for border-style
border-bottom	Sets an element's bottom border; value is one or more of a color, a value for border-bottom-width, and a value for border-style
border-bottom-width	Sets the thickness of an element's bottom border.
border-collapse	Sets the table border rendering algorithm
border-color	Sets the color of all four of an element's borders; default is the color of the element
border-left-color	Sets the color of an element's left borders; default is the color of the element
border-right-color	Sets the color of an element's right borders; default is the color of the element
border-top-color	Sets the color of an element's top borders; default is the color of the element
border-bottom-color	Sets the color of an element's bottom borders; default is the color of the element
border-left	Sets an element's left border; value is one or more of a color, a value for border-left-width, and a value for border-style.
border-left-width	Sets the thickness of an element's left border
border-right	Sets an element's right border; value is one or more of a color, a value for border-right-width, and a value for border-style.
border-right-width	Sets the thickness of an element's right border
border-spacing	With separate borders set the spacing between borders. One value sets vertical and horizontal spacing and two values sets horizontal and vertical spacing respectively.
border-style	Sets the style of all four of an element's borders
border-top	Sets an element's top border; value is one or more of a color, a value for border-top-width, and a value for border-style
border-top-width	Sets the thickness of an element's top border.
border-width	Sets the thickness of all four of an element's borders
bottom	Used with the position property to place the bottom edge of an element
caption-side	Sets the position for a table caption
clear	Sets which margins of an element must not be adjacent to a floating element; the element is moved down until that margin is clear
clip	Sets the clipping mask for an element
color	Sets the color of an element
content	Inserts generated content around an element.
counter-increment	Increments a counter by 1; value is a list of counter names, with each name optionally followed by a value by which it is incremented.
counter-reset	Resets a counter to zero; value is a list of counter names, with each name optionally followed by a value to which it is reset.
cue-after	Plays the designated sound after an element is spoken
cue-before	Plays the designated sound before an element is spoken
cursor	Defines shap of the cursor
direction	Defines direction of the flow of an element content
display	Controls how an element is displayed
elevation	Sets the height at which a sound is played
empty-cells	With separate borders, hides empty cells in a table
float	Determines if an element floats to the left or right, allowing text to wrap around it or be displayed inline
font	Sets all the font attributes for an element. Value is any of the values for: font-style font-variant font-weight font-size line-height font-family
font-family	Defines the font for an element, either as a specific font or as one of the generic serif, sans-serif, cursive, fantasy, and monospace.
font-size	Defines the font size
font-size-adjust	Adjusts the current font's aspect ratio
font-stretch	Determines the amount to stretch the current font
font-style	Defines the style of the face, either normal or some type of slanted style
font-variant	Defines a font to be in small caps
font-weight	Defines the font weight . if a number is used, it must be a multiple of 100 between 100 and 900; 400 is normal, 700 is the same as the keyword bold
height	Defines the height of an element
left	Used with the position property to place the left edge of an element
letter-spacing	Inserts additional space between text characters
line-height	Sets the distance between adjacent text baselines
list-style	Defines list-related styles using any of the values for: list-style-image liststyle-position list-style-type
list-style-image	Defines an image to be used as a list item's marker, in lieu of the value for: list-style-type
list-style-position	Indents or extends (default) a list item's marker with respect to the item's content
list-style-type	Defines a list item's marker either for unordered lists (circle, disc, or square) or for ordered lists (decimal, loweralpha, lower-roman, none, upper-alpha, or upper-roman)
margin	Defines all four of an element's margins
margin-bottom	Defines the bottom margin of an element. Default value is 0.
margin-left	Defines the left margin of an element. Default value is 0.
margin-right	Defines the right margin of an element. Default value is 0.
margin-top	Defines the top margin of an element. Default value is 0.
marker-offset	The marker-offset property can be used in bulleted lists for specifying the distance between the nearest border edges of a marker box (or bullet) and its associated principal box.
marks	The marks property is used to set crop marks and cross marks on paged media. This is used with the @page rule.
max-height	max-height property is used to constrain the height of an element.
max-width	max-width property is used to set the maximum width of an element.
min-height	min-height property is used to constrain the height of an element.
min-width	min-width property is used to constrain the width of an element.
orphans	Sets the minimum number of lines allowed in an orphaned paragraph fragment
outline	The outline property is a shorthand property to specify all outline properties.
outline-color	The outline-color property is used to specify the color of the outline. Note that, unlike the border property, outline does not take up extra space and it can be non-rectangular.
outline-color-style	The outline-style property is used to specify the style of the outline. Note that, unlike the border property, outline does not take up extra space and it can be non-rectangular.
outline-width	The outline-color property is used to specify the color of the outline. Note that, unlike the border property, outline does not take up extra space and it can be non-rectangular.
overflow	Determines how overflow content is rendered
padding	Defines all four padding amounts around an element
padding-bottom	Defines the bottom padding of an element. Default value is 0
padding-left	Defines the left padding of an element. Default value is 0
padding-right	Defines the right padding of an element. Default value is 0
padding-top	Defines the top padding of an element. Default value is 0
page	Associates a named page layout with an element
page-break-after	Forces or suppresses page breaks after an element.
page-break-before	Forces or suppresses page breaks before an element.
page-break-inside	Suppresses page breaks within an element
pause	The pause property is CSS shorthand for specifying shorthand property for specifying pauses in aural media.
pause-after	Pauses a media after speaking an element
pause-before	Pauses a media before speaking an element
pitch	Sets the average pitch of an element's spoken content
pitch-range	Sets the range of the pitch, from 0 (flat) to 100 (broad); default is 50
play-during	If a URL is provided, it is played during an element's spoken content . specifying repeat loops the audio; mix causes it to mix with, rather than replace, other background audio.
position	Sets the positioning model for an element
quotes	Sets the quote symbols used to quote text
richness	Sets the richness of the voice, from 0 (flat) to 100 (mellifluous); default is 50
right	Used with the position property to place the right edge of an element.
size	The size property is used in paged media to specify the size of the page.
speak	Determines how an element's content is spoken.
speak-header	Determines if table headers are spoken once for each row or column or each time a cell is spoken.
speak-numeral	Determines how numerals are spoken
speak-punctuation	Determines if punctuation is spoken or used for inflection
speech-rate	Sets the rate of speech; a number sets the rate in words per minute
stress	Sets the stress of the voice, from 0 (catatonic) to 100 (hyperactive); default is 50.
table-layout	Determines the table-rendering algorithm
text-align	Sets the text alignment style for an element
text-decoration	Defines any decoration for the text; values may be combined
text-indent	Defines the indentation of the first line of text in an element; default is 0
text-shadow	Creates text drop shadows of varying colors and offsets
text-transform	Transforms the text in the element accordingly
top	Used with the position property to place the top edge of an element.
vertical-align	Sets the vertical positioning of an element
visibility	Determines if an element is visible in the document or table
voice-family	Selects a named voice family to speak an element's content
volume	Sets the volume of spoken content; numeric values range from 0 to 100
white-space	Defines how whitespace within an element is handled
widows	Sets the minimum number of lines allowed in a widowed paragraph fragment
width	Defines the width of an element
word-spacing	Inserts additional space between words
z-index	Sets the rendering layer for the current element.

Pseudo-classes & Pseudo-elements:

Property	Description
:active	Use this class to add special effect to an activated element
:focus	Use this class to add special effect to an element while the element has focus
:hover	Use this class to add special effect to an element when you mouse over it
:link	Use this class to add special effect to an unvisited link
:visited	Use this class to add special effect to a visited link
:first-child	Use this class to add special effect to an element that is the first child of some other element.
:lang	Use this class to specify a language to use in a specified element
:first-letter	Use this element to add special effect to the first letter of a text
:first-line	Use this element to add special effect to the first line of a text
:before	Use this element to insert some content before an element
:after	Use this element to insert some content after an element

Javascript Array unshift() Method

2014-04-07T19:29:00.001-07:00

Description:

Javascript array unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

Syntax:

array.unshift( element1, ..., elementN );

Here is the detail of parameters:

element1, ..., elementN : The elements to add to the front of the array.

Return Value:

Returns the length of the new array. This returns undefined in IE browser.

Example:

<html>
<head>
<title>JavaScript Array unshift Method</title>
</head>
<body>
<script type="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar");

var length = arr.unshift("water");
document.write("Returned array is : " + arr );
document.write("<br /> Length of the array is : " + length );

</script>
</body>
</html>

This will produce following result:

Returned array is : water,orange,mango,banana,sugar
Length of the array is : 5

Javascript Array toString() Method

2014-04-07T19:28:00.003-07:00

Description:

Javascript array toString() method returns a string representing the source code of the specified array and its elements.

Syntax:

array.toString();

Here is the detail of parameters:

Return Value:

Returns a string representing the array.

Example:

<html>
<head>
<title>JavaScript Array toString Method</title>
</head>
<body>
<script type="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar");

var str = arr.toString();
document.write("Returned string is : " + str );

</script>
</body>
</html>

This will produce following result:

Returned string is : orange,mango,banana,sugar

Javascript Array splice() Method

2014-04-07T19:28:00.001-07:00

Description:

Javascript array splice() method changes the content of an array, adding new elements while removing old elements.

Syntax:

array.splice(index, howMany, [element1][, ..., elementN]);

Here is the detail of 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.
element1, ..., elementN : The elements to add to the array. If you don't specify any elements, splice simply removes elements from the array.

Return Value:

Returns the extracted array based on the passed parameters.

Example:

<html>
<head>
<title>JavaScript Array splice Method</title>
</head>
<body>
<script type="text/javascript">
var arr = ["orange", "mango", "banana", "sugar", "tea"];

var removed = arr.splice(2, 0, "water");
document.write("After adding 1: " + arr );
document.write("<br />removed is: " + removed);

removed = arr.splice(3, 1);
document.write("<br />After adding 1: " + arr );
document.write("<br />removed is: " + removed);

</script>
</body>
</html>

This will produce following result:

After adding 1: orange,mango,water,banana,sugar,tea
removed is: 
After adding 1: orange,mango,water,sugar,tea
removed is: banana

Javascript Array sort() Method

2014-04-07T19:27:00.003-07:00

Description:

Javascript array sort() method sorts the elements of an array.

Syntax:

array.sort( compareFunction );

Here is the detail of parameters:

compareFunction : Specifies a function that defines the sort order. If omitted, the array is sorted lexicographically.

Return Value:

Returns a sorted array.

Example:

<html>
<head>
<title>JavaScript Array sort Method</title>
</head>
<body>
<script type="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar");

var sorted = arr.sort();
document.write("Returned string is : " + sorted );

</script>
</body>
</html>

This will produce following result:

Returned array is : banana,mango,orange,sugar

Javascript Array toSource() Method

2014-04-07T19:27:00.001-07:00

Description:

Javascript array toSource() method returns a string representing the source code of the array. This method is supported by Mozilla.

Syntax:

array.toSource();

Here is the detail of parameters:

Return Value:

Returns a string representing the source code of the array.

Example:

<html>
<head>
<title>JavaScript Array toSource Method</title>
</head>
<body>
<script type="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar");

var str = arr.toSource();
document.write("Returned string is : " + str );

</script>
</body>
</html>

This will produce following result:

Returned string is : ["orange", "mango", "banana", "sugar"]

Javascript Array some() Method

2014-04-07T19:26:00.005-07:00

Description:

Javascript array some() method tests whether some element in the array passes the test implemented by the provided function.

Syntax:

array.some(callback[, thisObject]);

Here is the detail of parameters:

callback : Function to test for each element.
thisObject : Object to use as this when executing callback.

Return Value:

If some element pass the test then it returns true otherwise false.

Compatibility:

This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present in other implementations of the standard. To make it work you need to add following code at the top of your script:

if (!Array.prototype.some)
{
  Array.prototype.some = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this &&
          fun.call(thisp, this[i], i, this))
        return true;
    }

    return false;
  };
}

Example:

<html>
<head>
<title>JavaScript Array some Method</title>
</head>
<body>
<script type="text/javascript">
if (!Array.prototype.some)
{
  Array.prototype.some = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this &&
          fun.call(thisp, this[i], i, this))
        return true;
    }

    return false;
  };
}

function isBigEnough(element, index, array) {
  return (element >= 10);
}

var retval = [2, 5, 8, 1, 4].some(isBigEnough);
document.write("Returned value is : " + retval );

var retval = [12, 5, 8, 1, 4].some(isBigEnough);
document.write("<br />Returned value is : " + retval );
</script>
</body>
</html>

This will produce following result:

Returned value is : false
Returned value is : true

Javascript Array slice() Method

2014-04-07T19:26:00.003-07:00

Description:

Javascript array slice() method extracts a section of an array and returns a new array.

Syntax:

array.slice( begin [,end] );

Here is the detail of parameters:

begin : Zero-based index at which to begin extraction. As a negative index, start indicates an offset from the end of the sequence.
end : Zero-based index at which to end extraction.

Return Value:

Returns the extracted array based on the passed parameters.

Example:

<html>
<head>
<title>JavaScript Array slice Method</title>
</head>
<body>
<script type="text/javascript">
var arr = ["orange", "mango", "banana", "sugar", "tea"];
document.write("arr.slice( 1, 2) : " + arr.slice( 1, 2) ); 
document.write("<br />arr.slice( 1, 3) : " + arr.slice( 1, 3) ); 
</script>
</body>
</html>

This will produce following result:

arr.slice( 1, 2) : mango
arr.slice( 1, 3) : mango,banana

Javascript Array shift() Method

2014-04-07T19:26:00.001-07:00

Description:

Javascript array shift() method removes the first element from an array and returns that element.

Syntax:

array.shift();

Here is the detail of parameters:

Return Value:

Returns the removed single value of the array.

Example:

<html>
<head>
<title>JavaScript Array shift Method</title>
</head>
<body>
<script type="text/javascript">
var element = [105, 1, 2, 3].shift();
document.write("Removed element is : " + element ); 
</script>
</body>
</html>

This will produce following result:

Removed element is : 105

Javascript Array reverse() Method

2014-04-07T19:25:00.003-07:00

Description:

Javascript array reverse() method reverses the element of an array. The first array element becomes the last and the last becomes the first.

Syntax:

array.reverse();

Here is the detail of parameters:

Return Value:

Returns the reversed single value of the array.

Example:

<html>
<head>
<title>JavaScript Array reverse Method</title>
</head>
<body>
<script type="text/javascript">
var arr = [0, 1, 2, 3].reverse();
document.write("Reversed array is : " + arr ); 
</script>
</body>
</html>

This will produce following result:

Reversed array is : 3,2,1,0

Javascript Array reduce() Method

2014-04-07T19:25:00.001-07:00

Description:

Javascript array reduce() method applies a function simultaneously against two values of the array (from left-to-right) as to reduce it to a single value.

Syntax:

array.reduce(callback[, initialValue]);

Here is the detail of parameters:

callback : Function to execute on each value in the array.
initialValue : Object to use as the first argument to the first call of the callback.

Return Value:

Returns the reduced single value of the array.

Compatibility:

if (!Array.prototype.reduce)
{
  Array.prototype.reduce = function(fun /*, initial*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    // no value to return if no initial value and an empty array
    if (len == 0 && arguments.length == 1)
      throw new TypeError();

    var i = 0;
    if (arguments.length >= 2)
    {
      var rv = arguments[1];
    }
    else
    {
      do
      {
        if (i in this)
        {
          rv = this[i++];
          break;
        }

        // if array contains no values, no initial value to return
        if (++i >= len)
          throw new TypeError();
      }
      while (true);
    }

    for (; i < len; i++)
    {
      if (i in this)
        rv = fun.call(null, rv, this[i], i, this);
    }

    return rv;
  };
}

Example:

<html>
<head>
<title>JavaScript Array reduce Method</title>
</head>
<body>
<script type="text/javascript">
if (!Array.prototype.reduce)
{
  Array.prototype.reduce = function(fun /*, initial*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    // no value to return if no initial value and an empty array
    if (len == 0 && arguments.length == 1)
      throw new TypeError();

    var i = 0;
    if (arguments.length >= 2)
    {
      var rv = arguments[1];
    }
    else
    {
      do
      {
        if (i in this)
        {
          rv = this[i++];
          break;
        }

        // if array contains no values, no initial value to return
        if (++i >= len)
          throw new TypeError();
      }
      while (true);
    }

    for (; i < len; i++)
    {
      if (i in this)
        rv = fun.call(null, rv, this[i], i, this);
    }

    return rv;
  };
}

var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; });
document.write("total is : " + total ); 
</script>
</body>
</html>

This will produce following result:

total is : 6

Javascript Array push() Method

2014-04-07T19:24:00.007-07:00

Description:

Javascript array push() method appends the given element(s) in the last of the array and returns the length of the new array.

Syntax:

array.push(element1, ..., elementN);

Here is the detail of parameters:

element1, ..., elementN: The elements to add to the end of the array.

Return Value:

Returns the length of the new array.

Example:

<html>
<head>
<title>JavaScript Array push Method</title>
</head>
<body>
<script type="text/javascript">
var numbers = new Array(1, 4, 9);

var length = numbers.push(10);
document.write("new numbers is : " + numbers ); 

length = numbers.push(20);
document.write("<br />new numbers is : " + numbers ); 
</script>
</body>
</html>

This will produce following result:

new numbers is : 1,4,9,10
new numbers is : 1,4,9,10,20

Javascript Array pop() Method

2014-04-07T19:24:00.005-07:00

Description:

Javascript array pop() method removes the last element from an array and returns that element.

Syntax:

array.pop();

Here is the detail of parameters:

Return Value:

Returns the removed element from the array.

Example:

<html>
<head>
<title>JavaScript Array pop Method</title>
</head>
<body>
<script type="text/javascript">
var numbers = [1, 4, 9];

var element = numbers.pop();
document.write("element is : " + element ); 

var element = numbers.pop();
document.write("<br />element is : " + element ); 
</script>
</body>
</html>

This will produce following result:

element is : 9
element is : 4

Javascript Array map() Method

2014-04-07T19:24:00.003-07:00

Description:

Javascript array map() method creates a new array with the results of calling a provided function on every element in this array.

Syntax:

array.map(callback[, thisObject]);

Here is the detail of parameters:

callback : Function that produces an element of the new Array from an element of the current one.
thisObject : Object to use as this when executing callback.

Return Value:

Returns created array.

Compatibility:

if (!Array.prototype.map)
{
  Array.prototype.map = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var res = new Array(len);
    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this)
        res[i] = fun.call(thisp, this[i], i, this);
    }

    return res;
  };
}

Example:

<html>
<head>
<title>JavaScript Array map Method</title>
</head>
<body>
<script type="text/javascript">
if (!Array.prototype.map)
{
  Array.prototype.map = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var res = new Array(len);
    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this)
        res[i] = fun.call(thisp, this[i], i, this);
    }

    return res;
  };
}

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);

document.write("roots is : " + roots ); 

</script>
</body>
</html>

This will produce following result:

roots is : 1,2,3

Javascript Array lastIndexOf() Method

2014-04-07T19:24:00.001-07:00

Description:

Javascript array lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting atfromIndex.

Syntax:

array.lastIndexOf(searchElement[, fromIndex]);

Here is the detail of parameters:

searchElement : Element to locate in the array.
fromIndex : The index at which to start searching backwards. Defaults to the array's length, i.e. the whole array will be searched. If the index is greater than or equal to the length of the array, the whole array will be searched. If negative, it is taken as the offset from the end of the array.

Return Value:

Returns index of the found element from the last.

Compatibility:

if (!Array.prototype.lastIndexOf)
{
  Array.prototype.lastIndexOf = function(elt /*, from*/)
  {
    var len = this.length;

    var from = Number(arguments[1]);
    if (isNaN(from))
    {
      from = len - 1;
    }
    else
    {
      from = (from < 0)
           ? Math.ceil(from)
           : Math.floor(from);
      if (from < 0)
        from += len;
      else if (from >= len)
        from = len - 1;
    }

    for (; from > -1; from--)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}

Example:

<html>
<head>
<title>JavaScript Array lastIndexOf Method</title>
</head>
<body>
<script type="text/javascript">
if (!Array.prototype.lastIndexOf)
{
  Array.prototype.lastIndexOf = function(elt /*, from*/)
  {
    var len = this.length;

    var from = Number(arguments[1]);
    if (isNaN(from))
    {
      from = len - 1;
    }
    else
    {
      from = (from < 0)
           ? Math.ceil(from)
           : Math.floor(from);
      if (from < 0)
        from += len;
      else if (from >= len)
        from = len - 1;
    }

    for (; from > -1; from--)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}

var index = [12, 5, 8, 130, 44].lastIndexOf(8);
document.write("index is : " + index ); 

var index = [12, 5, 8, 130, 44, 5].lastIndexOf(5);
document.write("<br />index is : " + index ); 
</script>
</body>
</html>

This will produce following result:

index is : 2
index is : 5

Javascript Array join() Method

2014-04-07T19:23:00.003-07:00

Description:

Javascript array join() method joins all elements of an array into a string.

Syntax:

array.join(separator);

Here is the detail of parameters:

separator : Specifies a string to separate each element of the array. If omitted, the array elements are separated with a comma.

Return Value:

Returns a string after joining all the array elements.

Example:

<html>
<head>
<title>JavaScript Array join Method</title>
</head>
<body>
<script type="text/javascript">

var arr = new Array("First","Second","Third");

var str = arr.join();
document.write("str : " + str ); 

var str = arr.join(", ");
document.write("<br />str : " + str ); 

var str = arr.join(" + ");
document.write("<br />str : " + str ); 
</script>
</body>
</html>

This will produce following result:

str : First,Second,Third
str : First, Second, Third
str : First + Second + Third

Javascript Array indexOf() Method

2014-04-07T19:23:00.001-07:00

Description:

Javascript array indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

Syntax:

array.indexOf(searchElement[, fromIndex]);

Here is the detail of parameters:

searchElement : Element to locate in the array.
fromIndex : The index at which to begin the search. Defaults to 0, i.e. the whole array will be searched. If the index is greater than or equal to the length of the array, -1 is returned.

Return Value:

Returns the index of the found element.

Compatibility:

if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt /*, from*/)
  {
    var len = this.length;

    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;

    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}

Example:

<html>
<head>
<title>JavaScript Array indexOf Method</title>
</head>
<body>
<script type="text/javascript">
if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt /*, from*/)
  {
    var len = this.length;

    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;

    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}
var index = [12, 5, 8, 130, 44].indexOf(8);
document.write("index is : " + index ); 

var index = [12, 5, 8, 130, 44].indexOf(13);
document.write("<br />index is : " + index ); 
</script>
</body>
</html>

This will produce following result:

index is : 2
index is : -1

Javascript Array forEach() Method

2014-04-07T19:22:00.005-07:00

Description:

Javascript array forEach() method calls a function for each element in the array.

Syntax:

array.forEach(callback[, thisObject]);

Here is the detail of parameters:

callback : Function to test each element of the array.
thisObject : Object to use as this when executing callback.

Return Value:

Returns created array.

Compatibility:

if (!Array.prototype.forEach)
{
  Array.prototype.forEach = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this)
        fun.call(thisp, this[i], i, this);
    }
  };
}

Example:

<html>
<head>
<title>JavaScript Array forEach Method</title>
</head>
<body>
<script type="text/javascript">
if (!Array.prototype.forEach)
{
  Array.prototype.forEach = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this)
        fun.call(thisp, this[i], i, this);
    }
  };
}

function printBr(element, index, array) {
  document.write("<br />[" + index + "] is " + element ); 
}

[12, 5, 8, 130, 44].forEach(printBr);
  
</script>
</body>
</html>

This will produce following result:

[0] is 12
[1] is 5
[2] is 8
[3] is 130
[4] is 44

Javascript Array filter() Method

2014-04-07T19:22:00.003-07:00

Description:

Javascript array filter() method creates a new array with all elements that pass the test implemented by the provided function.

Syntax:

array.filter(callback[, thisObject]);

Here is the detail of parameters:

callback : Function to test each element of the array.
thisObject : Object to use as this when executing callback.

Return Value:

Returns created array.

Compatibility:

if (!Array.prototype.filter)
{
  Array.prototype.filter = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var res = new Array();
    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this)
      {
        var val = this[i]; // in case fun mutates this
        if (fun.call(thisp, val, i, this))
          res.push(val);
      }
    }

    return res;
  };
}

Example:

<html>
<head>
<title>JavaScript Array filter Method</title>
</head>
<body>
<script type="text/javascript">
if (!Array.prototype.filter)
{
  Array.prototype.filter = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var res = new Array();
    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this)
      {
        var val = this[i]; // in case fun mutates this
        if (fun.call(thisp, val, i, this))
          res.push(val);
      }
    }

    return res;
  };
}

function isBigEnough(element, index, array) {
  return (element >= 10);
}

var filtered  = [12, 5, 8, 130, 44].filter(isBigEnough);
document.write("Filtered Value : " + filtered ); 
  
</script>
</body>
</html>

This will produce following result:

Filtered Value : 12,130,44

Javascript Array every Method

2014-04-07T19:22:00.001-07:00

Description:

Javascript array every method tests whether all elements in the array pass the test implemented by the provided function.

Syntax:

array.every(callback[, thisObject]);

Here is the detail of parameters:

callback : Function to test for each element.
thisObject : Object to use as this when executing callback.

Return Value:

Returns true if every element in this array satisfies the provided testing function.

Compatibility:

if (!Array.prototype.every)
{
  Array.prototype.every = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this &&
          !fun.call(thisp, this[i], i, this))
        return false;
    }

    return true;
  };
}

Example:

<html>
<head>
<title>JavaScript Array every Method</title>
</head>
<body>
<script type="text/javascript">
if (!Array.prototype.every)
{
  Array.prototype.every = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this &&
          !fun.call(thisp, this[i], i, this))
        return false;
    }

    return true;
  };
}
function isBigEnough(element, index, array) {
  return (element >= 10);
}

var passed = [12, 5, 8, 130, 44].every(isBigEnough);
document.write("First Test Value : " + passed ); 
  
passed = [12, 54, 18, 130, 44].every(isBigEnough);
document.write("Second Test Value : " + passed ); 
</script>
</body>
</html>

This will produce following result:

First Test Value : falseSecond Test Value : true

Javascript Array concat() Method

2014-04-07T19:21:00.001-07:00

Description:

Javascript array concat() method returns a new array comprised of this array joined with two or more arrays.

Syntax:

array.concat(value1, value2, ..., valueN);

Here is the detail of parameters:

valueN : Arrays and/or values to concatenate to the resulting array.

Return Value:

Returns the length of the array.

Example:

<html>
<head>
<title>JavaScript Array concat Method</title>
</head>
<body>
<script type="text/javascript">
   var alpha = ["a", "b", "c"];
   var numeric = [1, 2, 3];

   var alphaNumeric = alpha.concat(numeric);
   document.write("alphaNumeric : " + alphaNumeric ); 
</script>
</body>
</html>

This will produce following result:

alphaNumeric : a,b,c,1,2,3

Javascript String - sup() Method

2014-04-07T19:18:00.001-07:00

Description:

This method causes a string to be displayed as a superscript, as if it were in a <sup> tag.

Syntax:

string.sup( )

Here is the detail of parameters:

Return Value:

Returns the string with <sup> tag.

Example:

<html>
<head>
<title>JavaScript String sup() Method</title>
</head>
<body>
<script type="text/javascript">

var str = new String("Hello world");
alert(str.sup());

</script>
</body>
</html>

This will produce following result:

<sup>Hello world</sup>

Javascript String - sub() Method

2014-04-07T19:17:00.005-07:00

Description:

This method causes a string to be displayed as a subscript, as if it were in a <sub> tag.

Syntax:

string.sub( )

Here is the detail of parameters:

Return Value:

Returns the string with <sub> tag.

Example:

<html>
<head>
<title>JavaScript String sub() Method</title>
</head>
<body>
<script type="text/javascript">

var str = new String("Hello world");
alert(str.sub());

</script>
</body>
</html>

This will produce following result:

<sub>Hello world</sub>