Scribd
Upload
118 views

HTML

The list is a index of html tag. We will be seeing each tag in depth in tutorials. Table is most beautiful concept in html. Now a days, most of the websites are created using table structure.

Uploaded by

Devdeep Dutta
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
118 views

HTML

The list is a index of html tag. We will be seeing each tag in depth in tutorials. Table is most beautiful concept in html. Now a days, most of the websites are created using table structure.

Uploaded by

Devdeep Dutta
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 50

The list is a index of html tag. We will be seeing each tag in depth in tutorials.

<html> </html> <head> </head> <body> </body> <b> </b> <center> </center> <br> &nbsp; <p> </p> <H1> </H1> <u> </u> <i> </i> <pre> </pre> <strike> </strike> <font> </font> <img> </img> <a> </a> <marquee> </marquee> <blockquote> </blockquote> <ul> </ul> <li> </li> <table> </table> <tr> </tr> <td> </td> <hr> <form> </form> <textarea> </textarea> <input> </input> <select> </select> <meta> <iframe> </iframe>

The main tag header tag body tag makes the font bold aligns things in center break line tag space tag define paragraph makes the font as a heading underlines the font makes the font italic to create pre formated text makes striked text or word sets font color, size, type used to add image linking tag make text move make text blink used to list things used to list things to define table table row inside table table column inside row horizontal line tag define forms shows text area creates form types used to create combo box meta tags are used to redirect, refreh pages used to create internal frames

Attribute: scrollamount This controls the amount of movement (in pixels) between the successive displays that give the impression of animation. Example Code: <marquee bgcolor=orange width=200 height=20 direction=right behavior=alternate scrollamount=5>

Moving Text Tag </marquee> Result with scrollamount as 5: Result with scrollamount as 50: Attribute: srolldelay This controls the delay (in milliseconds) between the successive displays that give the impression of animation. Example Code: <marquee bgcolor=orange width=200 height=20 direction=right behavior=alternate scrolldelay=5> Scrolling Text Tag </marquee> Result with scroll delay as 5: Result with scroll delay as 500: Moving Image Similarly image can be moved. Instead of text in between marquee tags give an image. It will scroll/move Example Code: <marquee width=100 height=20> <img src="./test.jpg"> </marquee> Result: Scrolling Images

blink> </blink> If you want blinking text, use this tag. The tag used is "blink" Example Code: <blink> blinking text tag</blink> Result: blinking text tag Table is most beautiful concept in html. Now a days, most of the websites are created using table structure. The concept of table is very simple, just rows and columns. We will split the window in to so many number of rows and columns as required. Table This tag can not act alone. It needs "tr" and "td" tags with in it. Example Code: <table> </table> As we know that table is a set of rows and columns, we introduce rows inside the table using <tr> </tr>. Also each row can have any number of columns. one to n..., so we introduce columns inside the rows using the tags <td> </td> So putting things together we define a table with a row and column as follows Code: <table> <tr> <td> This is first column </td> </tr> </table> Result: The result for above tag will be as

This is first column

Now we will create a table with one row and two columns Code: <table> <tr> <td> This is first column </td> <td> This is second column </td> </tr> </table> Result: The result for above tag will be as

This is first column This is second column

Table with border To make things much clear, we will put border to the table using the attribute "border". This attribute should be added in "table" tag. Example Code: <table border=1> <tr> <td> This is first column </td> <td> This is second column </td> </tr> </table> Result: The result for above tag will be as

This is first column This is second column


Table with 2 row 2 col Now we will try to create a table with 2 row and 2 cols each Example Code: <table border=1> <tr> <td> This is 1st row 1st column </td> <td> This is 1st row 2nd column </td> </tr> <tr> <td> This is 2nd row 1st column </td> <td> This is 2nd row 2nd column </td> </tr> </table>

Result: The result for above tag will be as

This is 1st row 1st column This is 1st row 2nd column This is 2nd row 1st column This is 2nd row 2nd column
Table with color We can add background color to the table using the attribute "bgcolor". This attribute can be added in "table"/"tr"/"td" tag. The color can be set on the whole to table or to rows and column Example Code: <table border=1 bgcolor="green"> <tr> <td> This is first column </td> <td bgcolor="yellow"> This is second column </td> </tr> </table> Result: The result for above tag will be as

This is first column This is second column


Table with background image Now we will try to create a table with one column having a background image Example Code: <table border=1 bgcolor=green> <tr> <td> This is 1st row 1st column </td> <td> This is 1st row 2nd column </td> </tr> <tr> <td> This is 2nd row 1st column </td> <td background="./test.jpg"> This is 2nd row 2nd column <br><br> Nice background </td> </tr> </table> Result: The result for above tag will be as

This is 1st row 1st column This is 1st row 2nd column This is 2nd row 2nd column This is 2nd row 1st column Nice background
Table Size We can set the size of the table based of pixiles or percentage. First we will see how to set size based on pixiles. The attribute width and height will be used. Example Code:

<table border=1 bgcolor="green" width=300 height=100> <tr height=30> <td> This is 1st row 1st column </td> <td> This is 1st row 2nd column </td> </tr> <tr height=70> <td> This is 2nd row 1st column </td> <td background="./test.jpg"> This is 2nd row 2nd column <br><br> Nice background </td> </tr> </table> Now we have set the total table width as 300 and height as 100 and split them as 30 to first row and 70 to second row. Result:

This is 1st row 1st column This is 2nd row 1st column

This is 1st row 2nd column This is 2nd row 2nd column Nice background

Table Size in percentage Table width and height can be set using percentage. e.g: width=60%. This means that the table with be drawn to 60% width of the current component. i.e. if we are drawing a table inside a body tag and using width as 100%, then the width of the table will be equal to the browser width. Table can be drawn inside tables. We will see about it later. Example Code: <table border=1 bgcolor="green" width=80% height=20%> <tr height=30%> <td> This is 1st row 1st column </td> <td> This is 1st row 2nd column </td> </tr> <tr height=70%> <td> This is 2nd row 1st column </td> <td background="./test.jpg"> This is 2nd row 2nd column <br><br> Nice background </td> </tr> </table> Now we have set the total table width as 80% and height as 30% and split the height as 30% to first row and 70% to second row. To explain in depth, say we have the component size as width=500,height=500 so the table will now take 80% of 500 (400) as its total width and 30% of 500 (150) as its total height. Then it will split that 150 height in to 30% for first row and 70% for second row.

Result:

This is 1st row 1st column This is 2nd row 1st column

This is 1st row 2nd column This is 2nd row 2nd column Nice background

Table Alignment Tables can be aligned to the left/right/center using the attribute "align" inside table tag. Example Code: <table border=1 bgcolor="green" width=300 height=100 align=center> <tr height=30> <td> HAI </td> <td> Hello </td> </tr> <tr height=70> <td> Table Alignment </td> <td background="./test.jpg"> This is 2nd row 2nd column <br><br> Nice background </td> </tr> </table> Result:

HAI Table Alignment

Hello This is 2nd row 2nd column Nice background

Aligning Content (text) in columns The content (text,image,etc..) inside the columns can be aligned horizontally using the tag attribute "align" The content (text,image,etc..) inside the columns can be aligned horizontally using the tag attribute "valign" ALIGN can take the values as LEFT/RIGHT/CENTER VALIGN can take the values as TOP/BOTTOM/CENTER Example Code: <table border=1 bgcolor="green" width=80% height=30%ALIGN=center> <tr height=20%> <td align=center> center </td> <td align=right> right </td> </tr> <tr height=70% > <td valign=top> top

</td> <td valign=bottom align=right background="./test.jpg"> Bottom <br><br> </td> </tr> </table> Result:

center top

right bottom right

Table inside table Many a times we will be using table inside tables Now we will create two row with three columns. The 2nd row, 2nd column will be split again to a table with two rows, two cols. Also we will be using the attributes cellpadding and cellspacing to handle table space. Example Code: <table border=1 width=80% height=30% align=center cellpadding=1 cellspacing=1> <tr height=30%> <td> First Row </td> <td> First Row </td> <td> First Row </td> </tr> <tr height=70%> <td> Second Row </td> <td > <table bgcolor=yellow border=1 width=80% height=80%> <tr > <td> Inner Table </td> <td> Inner Table </td> </tr> <tr > <td> Inner Table </td> <td> Inner Table </td> </tr> </table> </td> <td> Second Row </td> </tr> </table> Result:

First Row Second Row

First Row Inner Table Inner Table Inner Table Inner Table

First Row Second Row

Cellpadding and Cellspacing The space and padding can be controlled by using the attributes cellpadding and cellspacing. Usage: <table border=0 bgcolor="#776655" width=80% height=150 align=center cellpadding=0 cellspacing=0> The above table can be made more elegant by changing the colors and borders and controlling cellspacing and cellpadding. Result:

First Row Second Row 1 3

First Row 2 4

First Row Second Row

I want a table where one my row will have only 2 columns while others have 5 columns? How to span the columns in html tables?

Explanation
Col Span While using table, it will be need of time that some of our rows should have lesser columns then others. It can be easily achieved by using colspan. For example I have a table with two rows and three colums. Now I want the first row to be on one column and the second to be of three columns. Demo:

First Row . . second Row 2 2 Table

First Row second Row 2 2 Spanned Table

Here we have spanned one of the column to three columns. That is instead of adding three columns we will add only one column and span it using the attribute colspan="x". In this case as the column should be spanned to three we will be adding a attribute "colspan=3". Tag: <table> <tr> <td colspan=3> First Row</td> </tr> <tr> <td> Second Row </td> <td >.</td> <td>2</td> </tr> </table>

want a table where one my column will be of 2 rows wide while others are as usual?

How to span the column rows in html tables?

Explanation
Row Span While using table, it will be need of time that some of our columns should be spanning across few rows. It can be easily achieved by using rowspan. For example we have a table with three rows and three columns. Now I want the second column to be of two rows height. Demo:

First Row . . second Row 2 2 Third Row 3 3 Table

First Row . spanned second Row 2 Third Row 3 3 Spanned Table

Here we have spanned one of the column to two rows. It is done using the attribute rowspan="x". In this case as the column should be spanned to two rows we will be adding a attribute "rowspan=2". As we have spanned a column in first row to two rows, we should add only two column's in second row, as one more col will be spanned from first row. Tag: <table> <tr><td>First Row</td> <td rowspan=2> spanned </td> <td> . </td></tr> <tr><td>second Row</td><td> 2 </td></tr> <tr><td>Third Row</td><td> 3 </td><td> 3 </td></tr> </table>

What are the different type of forms? How to create html form?

Explanation
Form Basic Types There are many types of forms. First of all we will see what are they and how to create them. To give a brief introduction on the type of the forms and the controls used to create the forms. "input" tag along with "form" tags is used for creating the following forms types Control: <INPUT>

Text Button Radio Checkbox Password

Submit Reset

Using "textarea" tags inside "form" tags we can create the following forms types Control: <textarea>

Text Area - Used to enter multi line text

Using "select" tags inside "form" tags we can create the following forms types Control: <select>

Combobox - user can choose from options listed

"label" tags along with "form" tag is used for creating the following forms types Control: <label>

Text in terms of label

How to create a text field with default value in it? How to set text field size in html? How the make the text field form non-editable?

Explanation
Text Fields Example Code: <form name=myText> <input type="text" name=myText value="Enter Your Name"> </form> Result:

Definition: A form should always begin and close with a "form" tag. The attribute "name" for form tag may be defined (e.g "name=myform"). However the name will be required only during form action's which will require php or any other server side scripting language. So we will see those things in our php tutorials. Here we define the text field using "input" tag. we give a attribute called "TYPE=TEXT" inside the tag, which defines the type as a text field. The attribute "name" for input tag may be defined. The value which we want to be displayed in the textfield should be given using the attribute "value"( e.g: value=Enter) Text Fields Size We can set the size of the text field using the attribute "SIZE" as 'size=50' Example Code: <input type="text" name=myText value="Enter Your Name" size=50> Result:

Non Editable Text Field We can make a text field non editable or readonly (i.e user cant edit the filed) using the entry "readonly". Example Code: <input type="text" name=myText value="Enter Your Name" readonly> Result:

How to create a button in html page? How to make the button disabled? How to use image as a button?

Explanation
Button Example Code: <form name=myform> <input type="button" name=myButton value="HAI"> </form> Result:

Definition: Here we define the button using "input" tag. we give a attribute called "TYPE=BUTTON" in the tag which defines the type as a button. The attribute name may be defined. The value which we want to be displayed in the button should be given using the attribute "value"( e.g: value=HAI) Non Editable / Un Clickable / Disabled Button To disable a form button is very simple. We can make a button non editable or un clickable (i.e user cant edit the filed) using the entry "disabled". Example Code: <input type="button" name=myButton value="disable" disabled> Result:

Image Button We can make a image as a button using the attribute "type=image" in input tag. Example Code: <input type="image" name=myImgButton src="./test.jpg" width=50 height=20> Result:

Code to create radio button in html?

How to create pre selected radio button (checked)? How to disable (non selectable) radio button?

Explanation
Radio Button Example Code: <form name=myform> <input type="radio" name=myradio value="1">one <input type="radio" name=myradio value="2">two <input type="radio" name=myradio value="3">three </form> Result: one two three Definition: Here we define the radio button using "input" tag. We give a attribute called "TYPE=RADIO" in the tag which defines the type as a radio button. The attribute name should be defined and be same. The value in this case will be used only during form processing. Note: All the input of this type should have the same name. This name is what groups them. If you have different names for each radio button then they will behave individualy. Example Code: one two three Pre selected RadioButton If we want the radiobutton to be shown selected even before the user tries to select one, we have to use the entry "checked". Example Code: <form name=myform> <input type="radio" name=myradio value="1" >one <input type="radio" name=myradio value="2" checked>two <input type="radio" name=myradio value="3" >three </form> Result: one two three Non Editable / Un selectable radio We can make a radio button unselectable (disable) using the entry "disabled" Example Code: <form name=myform> <input type="radio" name=myradio value="1" disabled>one <input type="radio" name=myradio value="2" checked disabled>two <input type="radio" name=myradio value="3" disabled>three </form> Result: one two three

How to create a checkbox in html? How to make check box pre selected? How to disable check box?

Explanation
Check Box Example Code: <form name=myform> <input type="checkbox" name=mybox value="1">one <input type="checkbox" name=mybox value="2">two <input type="checkbox" name=mybox value="3">three </form> Result: one two three Definition: Here we define the check box using "input" tag. We give a attribute called "TYPE=checkbox" in the tag which defines the type as a checkbox. The attribute "name" should be defined and be same. The value in this case will be used only during form processing. Pre selected Checkbox We can make a check box pre selected (checked) even before the users try to select, using the entry "checked" Example Code: <form name=myform> <input type="checkbox" name=mybox value="1" checked>one <input type="checkbox" name=mybox value="2" >two <input type="checkbox" name=mybox value="3" checked>three </form> Result: one two three Non Editable / Non Selectable check box We can make a Checkbox non selectable (disable) using the entry "disabled" Example: <form name=myform> <input type="checkbox" name=mybox value="1" disabled>one <input type="checkbox" name=mybox value="2" disabled>two <input type="checkbox" name=mybox value="3" disabled>three </form> Result: one two three

How to create a big text field?

How to set the size of textarea? How to disable text area?

Explanation
TextArea Code: <form name=myform> <textarea name=mytextarea> This is a text area ........... </textarea> </form> Result:

Definition: Here we define the text area using "textarea" tag. What ever you want to be displayed in side textarea should be given in between the textarea's open and close tags as shown in the example. This will take the default size. Setting TextArea Size The text area size is determined using the attributes "rows" and "cols". You can change the size of text area by changing the values of rows and cols. Example Code: <form name=myform> <textarea name=mytextarea cols=35 rows=3> This is a text area example........... </textarea> </form> Result:

Non Editable Text Area We can make a test area non selectable (i.e user cant edit the field) using the entry "readonly" Example Code: <form name=myform> <textarea name=mytextarea cols=5 rows=5 readonly> This is a text area ........... </textarea> </form> Result:

How to create a drop down box? How to make a value selected in combobox?

How to create a multiple option select box?

Explanation
Combo box / Dropdown box Example Code: <form name=myform> <select name=mytextarea> <option name=one value=one> one </option> <option name=two value=two> two </option> <option name=three value=three> three </option> </select> </form> Result:

Definition: Here we define the drop down box using "select" and "option" tags. The select box is defined using the tag "select". The number of options in the combobox is defined by using the "option" tag. As shown in the example we have given users three option to select from. The name to be shown for the option is given inbetween "option" tags. Scrollable Select Option The size of the select option can be defined using the attribute "size" inside "select" tag. Example Code: <form name=myform> <select name=mytextarea size=2> <option name=one value=one> one </option> <option name=two value=two> two </option> <option name=three value=three> three </option> <option name=four value=four> four </option> </select> </form> Result:

Multi Select Option We can give the option for users to select multiple options using the entity "multiple". So user can select multiple options by using "shift" or "Ctrl" keys. Example Code: <form name=myform> <select name=mytextarea size=3 multiple> <option name=one value=one> one </option> <option name=two value=two> two </option> <option name=three value=three> three </option> <option name=four value=four> four </option> </select> </form> Result:

Preselected Select Option The options can be preselected using the entity "selected". Example Code: <form name=myform > <select name=mytextarea size=2> <option name=one value=one> one </option> <option name=two value=two> two </option> <option name=three value=three selected> three </option> <option name=four value=four> four </option> </select> </form> Result:

I want a field where password will be given, so i want the field values to be hidden? How to create a password form field in html?

Explanation
Password Field Example Code: <form name=testform> <input type=password> </form> Result:

Definition: The password field for a form is create by "input of type password". The result shows a password field displayed. Disable Password Field Code: <form name=testform> <input type=password disabled> </form> Result:

Definition: The make the password field disabled (not-usable) just add an additional variable "disabled" in the input tag.

What is the use of label?

Explanation
Label Tag: <form name=testform> <label name=testlabel> My Label </label> </form> Result: My Label Definition: A form should always have "form" tag. The attribute name may be defined (e.g "name=myform"). However the name will be required only during form action's which we will reqire javascript. So we will see those things in our javascript tutorials. The type label is just a form a text. The result shows how a label is displayed

CONCLUSION: Basically forms are used to get the data from the user and use the data. To validate the data you need the learn javascript. To get the data and use it you need to learn any server side scripting languages like php or jsp or asp... We use php and we will see it in the tutorials (To Be Published Soon).

The following table shows the special characters that can be displayed in html with the codes given on their sides. For example copyright symbol '' can be displayed using the following code in html "&copy;". Symbol < > & " Code
&lt; &gt; &amp; &quot; &nbsp; &#151; &reg; &copy; &iexcl; &euro; &cent; &pound; &curren; &yen; &brvbar; &sect; &uml; &ordf; &laquo; &not; &shy;

Description
Less then Greater then And Quotes Empty space Line mark Registered Copyright Euro Symbol Cent Symbol Pounds symbol Currency Yen Symbol -

Symbol

Code
&Igrave; &Iacute; &Icirc; &Iuml; &ETH; &Ntilde; &Ograve; &Oacute; &Ocirc; &Otilde; &Ouml; &Oslash; &Ugrave; &Uacute; &Ucirc; &Uuml; &Yacute; &THORN; &szlig; &aacute; &agrave;

Description
-

&macr; &deg; &plusmn; &sup2; &sup3; &micro; &para; &middot; &cedil; &sup1; &ordm; &raquo; &frac14; &frac12; &frac34; &iquest; &ETH; &times; &Agrave; &Aacute; &Acirc; &Atilde; &Auml; &Aring; &AElig; &Ccedil; &Egrave; &Eacute; &Ecirc; &Euml;

Degree plus minus power 2 power 3 Micro Symbol fraction symbol fraction symbol fraction symbol -

&acirc; &atilde; &auml; &aring; &aelig; &ccedil; &egrave; &eacute; &ecirc; &euml; &igrave; &iacute; &icirc; &iuml; &eth; &ntilde; &oacute; &ograve; &ocirc; &otilde; &ouml; &oslash; &ugrave; &uacute; &ucirc; &uuml; &yacute; &thorn; &yuml;

I want to auto redirect web pages after some time interval? Html Tag or Code for redirection of a web page to another?

Explanation
To make a page redirect itself we have to use the HTML Meta Tag inside the head tag Example:

<meta http-equiv="refresh" content="5; url=http://www.hscripts.com">


This code will redirect your webpage to the url http://www.hscripts.com after 5 seconds. The attribute http-equiv="refresh" calls for refresh of the page. The attribute content="5; URL=http://www.hscripts.com" sets the time interval in seconds after which the page redirection will take place and the destination page. Make sure you follow the exact order of coding.

i.e: content="time interval in seconds; URL=resulting page"; Note that you should not use semicolon after 'url='. So using this meta tag will redirect the page to the destination page after the time interval. To make the page to redirect to a pre-defined page edit the attribute "content" and set proper values of time and destination url as required. This will work on all pages with any extension or server side language (php, jsp, asp, etc...). I want the web page to be reloading itself after every few seconds? How can I make my html page to auto refresh?

Explanation
To make the page reload or refresh itself, we have to use the following code inside the head tag

<meta http-equiv="refresh" content="5" >


The attribute http-equiv="refresh" calls for refresh of the page. The attribute content="5" sets the time for refresh. The time after which the page has to reload is set using the content attribute. Say if you want the page to refresh after 10 seconds interval, set content value to 10. We would recommend the time of refresh [reloading interval] be above 5 seconds. This is because you have to consider the page loading time.

How to put an address bar icon on my website? What is favicon and how can I add it?

Explanation
Favicon: Favorites Icon Create a image with size 16X16 pixels and of format .ico, some browser can use .jpg or .gif formats too. Preferably create a .ico image. We have used a gif [ ] as a favicon for this page.

Upload the image file in to your directory [preferably root dir]. Use the following html code inside the <head> tag of your web page. Example 1: Using complete path <head> <link rel="shortcut icon" href="http://www.your-page-name.com/favicon.ico"> </head> The link tag does the magic. Give the complete path of the uploaded image in href attribute. Example 2: Using the path from the root dir

<head> <link rel="shortcut icon" href="/images/h22.gif"> </head> Here we use the path beginning from the root dir. i.e if the image or icon is present under xcvxcvxcv.com/images/... the path should begin from /images/.... The address bar image also called as favicon may not work properly in IE browsers. Test it with a browser like mozilla or firefox. Create your .jpg/.gif files, it can be converted to .ico using some free online utilities.

What is Javascript?

Explanation
Javascript is the client side scripting language, developed by netscape, used along with HTML to build a efficient web site / webpage. In the beginning stages, web pages were developed only using html, which are nothing but static pages. User interaction and dynamic changes are not possible with html. With the advent of scripting languages the problem was solved. There are two types of script languages server side and client side. When a page is requested, the request is sent to the server and data is fetched and viewed in the browser. If the dynamic changes in the webpage are caused in the client side (the browsers like mozilla / IE) its called client side scripting language (E.g. - Javascript). If the dynamic changes in the web page are caused in the server side (the server checks the request and based on the data it makes changes in the page before sending the data to the browser) its called server side scripting language (E.g. - php). Java script codes are embedded in HTML files. Whenever a browser requests for a webpage, the HTML file along with script is transferred to the browser. This tutorial will give you an introduction and help you learn java script JavaScript is used in to create dynamic changes, validate forms, detect visitor details, create/use cookies, etc.. JavaScript works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape, Opera, Safari and more. Java and Javascript: Never confuse javascript with java. Java is an application development language developed by SUN Microsystems and has no links with javascript. Javascript was created long before java was developed. Javascript is many times denoted as java script. This tutorial will help both beginners and advanced users. Learn java script. Index of Javascript Tutorial 1) Introduction 4) Html Tags 7) String 10) Type Conversion 13) Logical 16) Ternary 19) If Else 22) For Statement 25) Break 28) Parameters 31) Math

2) How To 5) Alert 8) Number 11) Operators 14) Comparison 17) Precedence 20) Switch Case 23) While Loop 26) Continue 29) Return Value 32) Global

3) .Write 6) Types 9) Boolean 12) Arithmetic 15) Assignment 18) If Statement 21) With Statement 24) Do While 27) Functions 30) Date 33) Array Basic

34) Dynamic Array 37) Window Object 40) Navigator 43) Checkbox 46) Text Area

35) Array Methods 38) Document 41) DOM & Events 44) Radio 47) Select Object

36) Hierarchy 39) History 42) Button Object 45) Text Field 48) Form Object

How to start using the Javascript?

Explanation
Script tag is the primary tag which identifies javascript. Any javascript code should be written in between the script tag. <script language="javascript"> </script> Here the attribute language defines the language used. For VBscript user it will be vbscript. The script tag can be written anywhere inside head or body tag of html. Example: <html> <head></head> <body> <script language=javascript> //code comes here..... //code comes here..... //code comes here..... </script> </body> </html>

First Javascript program using document.write?

Explanation
We will begin with the in built method or function document.write() to code our first javascript program. This method helps to write any given variable on the browser. Example: <html> <head></head> <body> <script language=javascript> document.write("This is my first javascript program"); </script> </body> </html>

Test It: Copy the code or type the code in to the text box shown below and click show. How to insert a html code using javascript? How to break the sequence of write method in javascript?

Explanation
HTML Code using Javascript: HTML tags or code can also be added using document.write method. i.e. Just use the html code as the argument for document.write or document.writeln functions document.write("-- bold red --"); Example Code: <script language=javascript> document.write("-- <b>bold</b&lg; <font color=red> red </font>--"); </script> Result: -- bold red -Break line for .write method : document.write will append the string to the previous string. i.e. if you call document.write(" -- first line ---"); document.write(" -- second line ---"); the result will be as " -- first line --- -- second line ---"; So in order to break the lines in the browser you have to use an additional code "<br>" at the end. e.g: document.write(" -- first line --- <br>"); Example Code: <script language=javascript> document.write(" -- first line --- <br>"); document.write(" -- second line --- <br>"); </script> Result: -- first line ---- second line --How to create a alert box using javascript? Creating a popup message using javascript?

Explanation
Alert or Popup: The in built function alert can be used for creating a alert or popup message. Use the function with any string as argument. Example: <script language=javascript> alert("This is a test alert message"); </script> What is a variable?

What are the variable types supported by javascript?

Explanation
Variables are used to store values. i.e. for example if we have to add two numbers, we will declare two variables and assign the numbers to each variable and add them to get the result. var a = 5; var b= 5; var c = a+b; Javascript can handle the following variable types

a) Number (Integer and Float) b) String c) Boolean d) Null e) Undefined

In javascript all variable types are declared as var, only depending on how we assign the values the data type is defined. var a = "as"; --> This is a string type variable var a = 2; --> This is a integer type variable var a = true; --> This is a boolean type variable Here var defines it as a variable. "a" is the variable name. "as", 2, true are called values. The variable name can have alphanumeric values. Any lowercase (a-z) or uppercase (A-Z) alphabets, numbers (0-9) or underscore(_).

How can we use a string in javascript? How to use the special characters '(quote), "(double quote), \(backslash), newline, tab in javascript string variable?

Explanation
String- E.g: "sdfesdfe" For a variable to be a string type, the value assigned should be given in quotes. A number given within quotes will be considered only as a string and not as an integer. i.e if var a = "2"; var b = "2"; then a+b will give "22" and not 4. Special Character's: To use the special characters like tab, newline, back space, double quotes, etc.. in string variable the following format should be used
Character Single Quote Double Quote Backslash Code to be used \' \" \\

Horizontal Tab New Line Back Space Carriage Return

\t \n \b \r

Example Code: <script language="javascript"> var as = "this is \"a\" \'test\'"; document.write(as); </script> Result: this is "a" 'test'

What are the different variable type of numbers in javascript? How can I assign integer/float values in java script?

Explanation
Number: Numbers can be used in two different types in javascript. They are integer and float. Integer- E.g: 2 For a variable to be of int type just assign number with out any quotes. i.e if var a = 2; var b = 2; then a+b gives 4. Float- E.g: 2.12 For a variable to be of float type just assign fractional number with out any quotes. i.e if var a = 2.12; var b = 2.12; then a+b gives 4.24 Important: Never forget that number types should not have any quotes. Example Code: <script language="javascript"> var a = 2; var b = 3; var c = a+b; document.write(" addition - "); document.write(c); </script> Result: addition - 5 Using boolean variable (true or false) in javascript?

Explanation
Boolean Data Type- E.g: true

It can have logical values true or false. Variable type Boolean should not have any quotes. i.e. "true" is not equal to true, "true" will be considered as a string. var a = true; var b = false; Boolean variable values are mostly used along with "if", "if else" statements and "while" loops. Example Code: <script language="javascript"> var a = true; if(a == true) { document.write("this is true"); } </script> Result: this is true

Converting a string data type to integer? How to convert a float to integer in javascript?

Explanation
Data Type Conversion: The following data type conversions are possible a) String to Integer (int) b) Float to Integer (int) c) String to Float d) Integer (int) to String e) Float to String a) Converting String to Integer To convert a value from string to integer we have to use the function or method "parseInt(). Passing a correct argument to the function (e.g: "4") will return correct value else (e.g: "sd") 0 will be returned. Example parseInt("4"); parseInt("5aaa"); parseInt("4.33333"); parseInt("aaa"); Result 4 4 4 NaN (means "Not a Number")

b) Converting Float to Integer To convert a float value in to integer we have to use the function or method parseInt. Example Result

parseInt(5.133);

Example Code: <script language="javascript"> var a = "334"; var b = 3; var c = parseInt(a)+b; var d = a+b; document.write("parseInt(a)+b = "+c); document.write(" a+b = "+d); </script> Result: parseInt(a)+b = 337 a+b = 3343

Converting a string data type to float in javascript? How to convert a float, interger value to string?

Explanation
c) Converting String to Float To convert a value from string to float, we have to use the function or method "parseFloat() to convert a string value to float. Example parseFloat("4.333"); parseFloat("5aaa"); parseFloat("6e2"); parseFloat("aaa"); Result 4.333 5 600 NaN (means "Not a Number")

d) Converting Integer/Float to String Integer (int) or float value can be converted to string by using the function or method toString(). Example var a = 3.22; a.toString(); var a = 5; a.toString(); Result

"3.22"

Example Code: <script language="javascript"> var a = 32; var b = 333; var c = a.toString()+b;

document.write(" to String function "+c); </script> Result: to String function -> 32333

What is an operator and what are the types

Explanation
Operator: An operator is a symbol or sign used in javascript to identify a specific operation. For example, when we want to define an expression for adding two numbers, we use 3+4. Here let us assume that we have defined variable a and b for the number, so the expression will become a+b; The symbol "+" defines that the operands a and b has to be added. So "+" is called as an operator. Types Of Operators: There a three type of operators based on operands used, namely unary, binary, ternary. Unary - The Operator works with one operand (e.g: a++, a will be incremented by 1), Binary - The Operator works with two operands (e.g: a+b), Ternary - The Operator works with three operands (e.g: condition? value 1 : value 2). There a four type of operators based on the type of use.

Arithmetic operators that can be used in javascript? Logical operators that can be used in javascript?

Explanation
Arithmetic Operators: They are operators or syntax used to do arithmetic or math operations like addition, subtraction, multiplication, division, increment, decrement, etc.. These are some time misspelled as arithmatic, arithematic. Operator Syntax + * / % ++ Description Used for addition of two numbers Used for subtraction of two numbers Used for multiplication of two numbers Used for division of two numbers Used to find the division remainder Used to increment a value

--

Used to decrement a value

Example Code: <script language="javascript"> var c = (2+4-2)*10; document.write(" Arithmetic Operations -> "+c); </script> Result: Arithmetic Operations -> 40

Logical operator conditions and syntax that can be used in javascript?

Explanation
Logical Operators: There are used mainly for boolean operations. Operator Syntax Description && || | Used for logical "and" operation, condition Used for logical "or" operation, condition Used for logical "not" operation, condition

Local operators or used along with if statements and while loops to check multiple criterias. example usage1: if a is animal && (and) b is man, print something. example usage2: if a is tany || (or) a is ramani, say good morning. Example Code: <script language="javascript"> var a = "tany"; var b = "ramani"; if(a == "tany" && b == "ramani") { document.write(" Logical Operator AND '&&', OR '||', NOT '|' "); } </script> Result: Logical Operator AND '&&', OR '||', NOT '|'

Comparative operators and syntax that can be used in javascript? How to check not equal to, less and greater than condition of numerical values?

Explanation

Comparison Operators: They are used to compare numerical (numbers), string or boolean values. Operator-Syntax Description

==

validates the condition whether two numbers or string values are equal

!=

validates the condition whether two numbers or string values are not equal

>

validates the condition whether one numbers is greater than other

<

validates the condition whether one numbers is less than other

>=

compares the numbers and checks whether one numbers is greater than or equal to other

<=

compares the numbers and checks whether one numbers is less than or equals other

===

used to compare and check whether two values are strictly equal

!==

used to compare and check whether two values are strictly not equal

The main difference between "equal to (==)" and "strictly equal to (===)" is that the equality comparison takes place after type conversion for "equal to (==)" and before type conversion for "strictly equal to (===)". i.e "5" == 5 and "5" !== 5 Example Code: <script language="javascript"> var a = "5"; var b = 5; if(a == b) { document.write(" Testing Comparative Operator for equals "); } if(a === b) { document.write(" Testing Comparison Operator for strictly equals "); } </script> Result: Testing Comparative Operator for equals How to assign a incremental value to a variable in javascript? Different assaignment operators and their purpose?

Explanation

Assignment Operators: Assignment Operators are use to assign a value to a variable. Operator Description Syntax = used to assign a value on the right side to the variable of the left side of the operator.

Example

b = 3; b = 3; b += 4; // Now b will become 7 b = 4; b -= 2; // Now b will become 2 b = 4; b *= 2; // Now b will become 8 b = 6; b /= 2; // Now b will become 3 -

+=

it adds the value on the right to the previous value of the variable on the left and assign the new value to the variable.

-=

it subtracts the value on the right to the previous value of the variable on the left and assign the new value to the variable.

*=

it multiplies the operand on the right to the previous value of the variable on the left and assaigns the new value to the variable.

/=

it divides the operand on the right to the previous value of the variable on the left and assaigns the new value to the variable.

<<= <<=

The operand on the left is shifted left by the value on the right. A signed right shifted is performed on the left operand by the value on the right.

How to use ternary operator in javascript?

Explanation
Ternary Operator: As the name indicates ternary operators take three operands. The syntax is condition ? result1 : result2;. Here you use a condition before question mark (?) followed by result 1 and result 2 separated by a colon (:). Result1 is called if the condition is satisfied else result2 is called. Example 1: <script language=javascript> var b=5; (b == 5) ? a="true" : a="false"; document.write(" --------------------------- "+a); </script> Result: --------------------------- true Example 2: <script language=javascript> var b=true;

(b == false) ? a="true" : a="false"; document.write(" --------------------------- "+a); </script> Result: --------------------------- false

What is the precedence of the operators or calculation in an expression? Which calculation or operation will be executed first division or addition?

Explanation
Operators Execution Order: When the expression or the formula has more operators they will follow the following order of precedence. Precedence Order 1 2 3 Operator (Symbol) Operator in Words

!, ++, --, ~ *, /, %, +, << , >>, >>>

Not, Increment, Decrement Multiplication, Division, Modulus, Addition, Subtraction Less Than, Less than or equal to, Greater Than, Greater than or equal to Equals Comparison, Not Equals, Strictly Equals, Strictly Not Equals Bitwise AND, Bitwise OR, Bitwise Exclusive OR, Logical AND, Logical OR Ternary Operator

<, <=, >, >=

==, !=, ===, !==

&, |, ^, &&, ||

?: Assignment Operators =, +=, -=, /=, *=, %=, <<=, >>=, >>>=, &=, ^=

Assign, other assignment operators

Say we have an expression a = 4*2+4;. Here as we can note from the table. Operator "*" (multiplication) has top preference than "=" (equals) and "+" (addition), so 4*2 will be executed first. Now the expression is a = 8+4; In this "+" has highest preference so addition will be done. The result is equated to a and so a becomes 12.

How to validate a condition in javascript?

What is the use of if statement?

Explanation
If Statement: If statement is used to check or verify a condition and execute a set of statement only if the condition is true. This should be referred as a statement and not as a function. Syntax: if(condition) { // set of statements that will be executed // only if the condition is true or satisfied } Example Code: <script language="javascript"> var a = "if check"; if(a == "if check") { document.write(" inside if statement "); } </script> Result: inside if statement In the above example the condition is to check whether variable 'a' equals (==) the string "if check". As the condition satisfies, the statements inside the brackets are executed. Nested If: Nested if statement is nothing but using an if statement inside another if statement. Nested if is used when we check a condition only when another condition is true. For an example when we purchase a car, first we verify is the car looks good, only if it satisfies we go to the next condition color, then next and so on.. Syntax: Nested if if(condition 1) { if(condition 2) { // set of statements that will be executed } }

What is the use of if-else statement? How to use if else method in javascript?

Explanation
If-Else Statement: If else statement also has the same format as of "if" statement. Only additional thing is that an else part is added to if statement. So if the condition satisfies the statements inside if part will be executed else the statement inside else part will be executed Syntax: if(condition){

// set of statements if condition satisfies } else{ // set of statements if condition fails } Example Code: <script language="javascript"> var a = "1234abc"; if(a == "adcdefa"){ document.write(" inside if statement "); }else{ document.write(" inside else part of statement "); } </script> Result: inside else part of statement In the above example the condition is to check if variable 'a' equals (==) "abcdefa". The condition fails as we have assigned a as "1234abc". So the else part is executed.

How to use switch case statements in javascript? What are the options when a condition may have numerous result?

Explanation
Switch Case Statement: Switch case is used to when a condition may have multiple results and a different set of operation is done based on each result.. Syntax: Switch(condition) { case result1: // Operation for result1 case result2: // Operation for result2 . . . default : // If result belongs to none of the case specified } Example Code: <script language="javascript"> for(var i=1; i<5; i++) { switch(i) { case 1: document.write("message for case 1 <br>"); break; case 2: document.write("message for case 2 <br>"); break; case 3: document.write("message for case 3 <br>");

break; default: document.write("message for case default<br>"); break; } } </script> Result: message message for message for message for for case 1 case 2 case 3 case default

In the above example we have used for loop to explain switch case statement. Here each time the value of i is different and increases as 1, 2, 3, 4. There are three case defined for 1, 2, 3. When value is 4, default is executed. How to use with statement in javascript? Using many functions of an object in easiest way?

Explanation
with Statement: "with" statement is used when numerous function of an object is used or a function of an object is to be used numerous times. Syntax: with(object) { // Calling the functions or methods of the object } For this example we will use the object "document" and its methods (functions) "write" and attribute "title". Example Code: <script language="javascript"> with(document) { write(" inside with statement <br>"); write(" using with(object) we can call its functions directly <br>"); write (" TITLE -"+title); } </script> Result: inside with statement using with(object) we can call its functions directly TITLE - HIOX (JS) Javascript Tutorial - Using with statement example, code, function In the above example you can clearly see that the write function is executed numerous times with out calling document.write() and also title (document.title) is called. You can use any objects with "with" statement. e.g: date, math, etc. You will know more about these objects in later part of the tutorial. Using 'for' loop in javascript? I want to execute the same set of statements numerous time based on a incremental or decremental value?

Explanation
for LOOP: As we state it, for loop is a looping syntax. A set of statements are executed as a loop until a condition is satisfied, the condition is based on an incremental or decremental counter. In other words "Looping statements in javascript are used to execute the same set of code a specified number of times". Syntax: for(intialvalue; condition; increment) { // set of statements that will be executed } As defined in the syntax, for loop takes three parameters, the initial value (e.g i=0), condition the statements inside "for" will be executed until this condition is satisfied (e.g i<7), increment this is where we set the initial value to be increased or decreased after each loop. All the three parameters are separated by semicolon ";". For an example, we will consider a situation where we want to add all numbers between one and ten. Example Code: <script language="javascript"> var i=0; var total=0; for(i=1; i<11; i++) { total = total+i; } document.write("--------- The total ------: "+total); </script> Result: --------- The total ------: 45 The example worked as follows, a) Initially we created the for loop by setting variable i as 1. b) then we set the condition that the loop should execute till i is less than 11 (i<11). c) We made the variable to be incremented at the end of each loop (i++) First loop: i=0, i<11 is true so the statement is executed, now the total becomes 0+1=1 and i is incremented to 2. Second loop: now i=1, i<11 is true so the statement is executed, now the total becomes 1+2=3 and i is incremented to 2. this continues till i=11 Last loop: now i=11, i<11 becomes false and the loop ends here. Note: i++ increments the value at the end on the loop, while ++i to increase the value of i at the start of the loop. Using 'while' loop in javascript?

Explanation
while LOOP: 'while' loop is used to execute a set of statements repeatedly until a condition works true. The difference between 'for' and 'while' loop is that 'while' does not take counter as an argument. Syntax:

while(condition) { // set of statements that will be executed } As defined in the syntax, while loop has only one parameter, condition to be validated. The statements inside "while" will be executed until this condition becomes false. For an example, we will consider a situation where we want to print first 5 number. Example Code: <script language="javascript"> var i=0; while(i<5) { document.write("The value of i is - "+i+" "); i++; } </script> Result: The value of The value of i is The value of i is The value of i is The value of i is i is - 0 -1 -2 -3 -4

The execution process is as, a) The initialization of the variable "i" as 1 was done before starting the loop. b) In while loop, the condition was checked, the condition is satisfied (true) as i<5 and so the statements are executed. c) In the last line of the statement we has increased or incremented the value of i by 1. So after the end of the loop the pointer goes back to the beginning of the loop and checks the condition. d) Now "i" will be 1 and i is less than 5. The condition satisfies and the statements are executed. This continues till i is 5. e) When i is five, the condition becomes false and the pointer comes out of the loop. Note: The very important thing to note here is the i++ statement. If i++ has not been included 'i' will always be zero, so the condition will always be true and the loop becomes an infinite loop. This will cause memory issue or infinite loading of the page. Using 'do-while' loop in javascript? Difference between while and do-while?

Explanation
do-while LOOP: 'do-while' loop is similar to while loop and the only difference here is that the set of statements are executed first and the condition is checked next. Syntax: do { // set of statements that will be executed } while(condition) Here the statements are added under do loop and while condition is checked at the end of loop. In 'Do While' the statements are executed once even if the condition will fail. An example Example Code:

<script language="javascript"> var i=0; do { document.write("Testing DO-While loop"); } while(i!=0) </script> Result: Testing DO-While loop In the example the condition is 'i' should not be equal to zero. The statements are executed and the condition is checked. The condition failed. The pointer comes out of the loop. So the statements are executed once even when the condition fails. How to exit from a loop in-between an iteration in javascript?

Explanation
break statement: Break is a statement used to exit or terminate a loop in execution. It is used in "for, while, do-while" looping statements. Break statement is used mostly with a conditional statement inside the loop. When the condition satisfies the control breaks/terminates from the loop and moves to the next line below the loop. For an example, we will use a for loop that prints 1 to 5 but will use break or exit the loop iteration when i is 3. Example Code: <script language="javascript"> for(var i=0; i<5; i++) { if(i == 3) break; document.write("i is - "+i); } document.write(" --------- After Looping------ "); </script> Result: i is - 0 i is - 1 i is - 2 --------- After Looping-----The example worked as follows, a) "for loop" has five iterations from i=0 to i=4. b) It executes document.write at every iteration for i=0,i=1,i=2. c) when i is 3 the condition above document.write becomes true and so break statement is called. d) break statement exits or terminates the looping sequence and brings the control to the line next to the end of loop. How to terminate or stop from a loop for only one iteration in javascript?

Explanation

continue statement: Continue statement is used to stop or terminate one iteration of the loop in execution. It is used in "for, while, do-while" looping statements. Continue statement unlike break statement does not completely terminate the loop. It stops processing for only one iteration and brings the control back to the beginning of the loop. For an example, we will try to stop processing inside a for loop when i is 2. Example Code: <script language="javascript"> for(var i=0; i<5; i++) { if(i == 2) continue; document.write("i is - "+i); } </script> Result: i i i i is is is is 0 1 3 4

The example worked as follows, a) This for loop has five iterations from i=0 to i=4. b) It executes document.write at every iteration. c) when i is 2 the condition above document.write becomes true and so continue statement is called. d) continue statement terminates the looping sequence and brings the control to the beginning of loop, starting the next iteration. e) Thus the print was not done for i as 2. What is a function? How to use functions in javascript?

Explanation
Function Tutorial: A function is nothing but a group or block of statements doing a specific task. Syntax: function name() { // set of statements that will be executed } A function has to be defined in the above syntax. The name "function" followed by the name we choose for the function and then open and close brackets. The statements that will do the specific operation are then group together under this name using braces. A function may or may not return a value. A function may or may not have parameters value. Invoking a function: The statements inside the function will not be executed automatically. We have to invoke or call the function to execute the statements. Just calling the name of the function will invoke the function. i.e. if we write a function with the name "test" calling it as "test();" will invoke the function. Example Code:

<script language="javascript"> function test() { document.write(" ---- This is a test function ---- "); } test(); </script> Result: ---- This is a test function ---Using or Passing parameters to a function?

Explanation
Function with Parameters: Syntax: function name(parameter 1,parameter 2,...) { // set of statements that will be executed } In many cases we pass parameters or arguments to functions, these arguments will be used inside the function for required calculations. For an example we will use two numbers to add, subtract using function. Here we write separate function for each operations add, subtract. Example Code: <script language="javascript"> function add(number1, number2) { var c = number1+number2; document.write(" ---- This added value is ---- "+c; } function sub(number1, number2) { var c = number1-number2; document.write(" ---- This subtracted value is ---- "+c; } var a = 7; var b = 3; add(a,b); sub(a,b); </script> Result: ---- This added value is ---- 10 ---- This subtracted value is ---- 4 Here you can clearly see that the two functions where invoked as "add(a,b);" and "sub(a,b);" where a and b are defined variables. You can even call the function directly with the variables as say "add(9,1);". A function can be invoked any number of times with any proper value. Returning a value from a function!

How to get the result of a function to be used in other operations?

Explanation
Function - Returning a value: Syntax: function name(parameter 1,parameter 2,...) { // set of statements that will be executed return thevalue; } A function can also return a value after doing the specified operations. To explain, we would consider a requirement where we have to calculate x2/2. We will calculate x2 in a function and return the result of x2. After getting the return value, we will divide it by 2. Example Code: <script language="javascript"> function square(number1) { var c = number1*number1; // Now we will return the result return c; } var x = 4; // Here we invoke the function and capture the result var des = square(x); var res = des/2; document.write(" The result - "+res); </script> Result: The result - 8 In the above example we calculate x2 in the function "square(xxx)". We returned the result. Getting the Result: As the function is to return a value, while we invoke the function we assigned a variable to capture the result as "var des = square(xxxx);". Now the result of x2 is assigned to the variable des. Using the variable 'des' further operations were completed. Note: Once the return statement is called in a function it will break, i.e no further statements below it will be executed. What are the methods of string object in javascript?

Explanation
String Object An object is nothing but a class or file with a group of functions or methods. In javascript strings are stored as string objects. We can declare a string in either of the two ways a) var sname = "testing string object"; b) var sname = new String("testing string object");

Both results in the same string object. String object contains some predefined function or methods that are extensively used in javascript. String object has the following functions a)length() b)charAt() c)indexOf() d)lastIndexOf() e)substring() f)split() g)toLowerCase() h)toUpperCase() function or method to find the length or size of the string in javascript?

Explanation
Object: String Method or Function: length Description: This will count the total number of characters (length or size) present in the string and returns the value.

Example Code: <script language=javascript> var ss = "a character count - size test "; var result = ss.length; document.write(result); </script> Result: 30

Explanation: In the above example, the string is stored in a variable ss. then the function is called as "ss.length". the method counts the total characters in the string and returns it. the result is of variable type, integer. function or method to find the character at a position in a string using javascript?

Explanation
Object: String Method or Function: charAt(int) Description: This method takes an integer value as argument and returns the character at that position in the string. The positioning of the string starts from zero to n. i.e. The first character of the string is assumed to be at position zero (0), next at 1 and so on.

Example Code:

<script language=javascript> var ss = "a string test "; var result = ss.charAt(3); document.write(result); </script> Result: t

Explanation: In the above example, the string is stored in a variable ss. then we called the function or method charAt(3), to get the character at position 3 in the string. the positioning is as 0-a, 1- , 2-r, 3-t, .... character at position 3 is 't' and so 't' is returned as result. the result is of variable type, string.

how to find the position of a character or word in a string using javascript?

Explanation
Object: String Method or Function: indexOf(string) Description: This method takes a character or string as an argument. Searches the given string in the main string and returns the index or starting (first occurrence) position of the string. Returns -1 if the search string is not present in the main string.

Example Code: <script language=javascript> var ss = "a string index of test "; var result = ss.indexOf("ri"); document.write(result); </script> Result: 4

Explanation: In the above example, the main string is stored in a variable ss. the method takes a string "ri" as argument. this function searches in main string (ss) for the search string (ri). the first occurrence of the search word is found at the position 4 and is returned as the result. how to find the last occurrence position of a character or word in a string using javascript?

Explanation
Object: String Method or Function: lastIndexOf(string) Description: This method is similar to indexOf() function and takes a character or string as an argument. Searches the given string in the main string and returns the last occurrence position of

the string. Returns -1 if the search string is not present in the main string.

Example Code: <script language=javascript> var ss = "a last index test "; var result = ss.lastIndexOf("e"); document.write(result); </script> Result: 14

Explanation: In the above example, the main string is stored in a variable ss. the method take a character "e" as argument. the method searches in main string (ss) for the search string "e". "e" is at two positions 10 and 14. last occurrence value 14 is returned as result. how to get a portion of the string in javascript?

Explanation
Object: String Method or Function: substring(integer, integer) Description: Takes two integer arguments. The first argument is the start index and the second argument is the end index. This method returns a part or portion of the main string beginning from begin index to last index.

Example Code: <script language=javascript> var ss = " string test "; var result = ss.substring(3,6); document.write(result); </script> Result: rin

Explanation: In the above example, the main string is stored in a variable ss. the method substring takes two arguments 3 and 6. this method takes a portion of the string from the position 3 up to 6 and forms a new string. i.e "rin" the result is of variable type string. how to split or concatenate a string in javascript?

Explanation
Object: String Method or Function: split(string)

Description: It takes one argument called as delimiter. The argument is used to split the string in to an array of string. Every part that comes in between the delimiter is separated as a string. A delimiter can be any string or a character or even blank space.

Example Code: <script language=javascript> var ss = "testing-delimiter-split-function"; var result = ss.split("-"); document.write(result); </script> Result: testing,delimiter,split,function

Explanation: In the above example, the main string is stored in a variable ss. the method split takes the one argument, here it is "-". the delimiter character "-" is used to split or concatenate the string. any thing that comes in between the delimiter ("-") is separated in to a new string. the result variable is an array of string. how to convert a lower case alphabet to upper case and vice versa in javascript?

Explanation
Object: String Method or Function: toLowerCase(), toUpperCase() Description: These methods are used to cover a string or alphabet from lower case to upper case or vice versa. e.g: "and" to "AND". Converting to Upper Case: Example Code: <script language=javascript> var ss = " testing case conversion method "; var result = ss.toUpperCase(); document.write(result); </script> Result: TESTING CASE CONVERSION METHOD

Converting to Lower Case: Example Code: <script language=javascript> var ss = " TESTING LOWERCASE CONVERT FUNCTION "; var result = ss.toLowerCase(); document.write(result); </script> Result: testing lowercase convert function

Explanation: In the above examples, toUpperCase() method converts any string to "UPPER" case letters. toLowerCase() method converts any string to "lower" case letters how to get today's date, system time and display it using javascript? or

using javascript date functions and methods!

Explanation
Object: Date Date is a predefined object in javascript. This object contains methods that can be used to get or set the system date, time, month, day, hours, minutes, seconds, etc.... Contains methods to get and set properties of UTC universal coordinated time. Universal Coordinated Time, UTC is the world time standard also called as Greenwich Mean Time. A new object has to be created before using its methods. Creation of new date object: Example Code: var exd = new Date(); Calling "new Date()" will create a new date object. This object can be used to execute its methods or functions. We have to capture the object in a variable. In the example the object it stored in a variable name exd. The below table uses the object exd as an example. Method getDate() Example Code
exd = new Date(); exd.getDate();

Result 8

Description getDate() method returns today's date of the month as in your computer. The range is from 1 to 31. getUTCDate() method return the date value of Universal Coordinated Time. UTC is the world time standard also called as Greenwich Mean Time. getMonth() method returns the Month of this year, as in your computer. The result can range is from 1 to 12. 1 for january to 12 for december. getUTCMonth() returns the UTC month of the year, as in your computer. getDay() method returns the day of the week, as in your computer. The result can range is from 1 to 7. 1 for sunday, 2 for monday, up to 7 for saturday. getUTCDay() returns the UTC day of the week, as in your computer. getHours() method returns the current hour of the day, as in your computer. The result can range is from 0 to 24. getUTCHours() returns the UTC hours of the day, as in your computer. [Indian Standard Time is 5.30 hours ahead of UTC]. getMinutes() method returns the minutes of this hour, as in your computer. The result can range is from 0 to 59. getUTCMinutes() returns the UTC minutes of the hour, as in your computer. getSeconds() method returns the Seconds of this minute, as in your computer. The result can range is from 0 to 59. getUTCSeconds() returns the UTC seconds of the minute, as in your computer.

getUTCDate()

exd = new Date(); exd.getUTCDate();

getMonth()

exd = new Date(); exd.getMonth(); exd = new Date(); exd. getUTCMonth(); exd = new Date(); exd.getDay(); exd = new Date(); exd.getUTCDay(); exd = new Date(); exd.getHours();

getUTCMonth()

getDay()

getUTCDay() getHours()

4 17

getUTCHours()

exd = new Date(); exd.getUTCHours();

11

getMinutes()

exd = new Date(); exd.getMinutes(); exd = new Date(); getUTCMinutes(); exd = new Date(); exd.getSeconds(); exd.

getUTCMinutes() exd.

38

getSeconds()

47 47

getUTCSeconds() exd = new Date();

getUTCSeconds();

getMilliseconds() exd.getMilliseconds();

exd = new Date();

84

getMilliseconds() method returns the milli seconds of current second, as in your computer. Result: 1170934727184 getTime() method returns the current time since 1/1/1970 in milli seconds, as in your computer.

getTime()

exd = new Date(); exd.getTime(); exd = new Date(); exd.getYear(); exd = new Date(); exd.getFullYear(); exd = new Date(); exd.toGMTString();

getYear() getFullYear()

2007 2007 Thu, 8 Feb 2007 11:38:47 UTC

getYear() method returns the year since 1900, as in your computer. getFullYear() method returns the full year, as in your computer. toGMTString() method returns the date and time in Internet Greenwich Mean Time Format (GMT).

toGMTString()

JavaScript dates are stored as the number of milliseconds since midnight of January 1, 1970. This date is called Opoch date. how to do math calculations in javascript? or what are the methods to do mathematical operations in javascript?

Explanation
Object: Math Math object contains the methods or function that can be used to easily do mathematical calculations. Math object is an in built object and so it is not required to instantiate the object as done for Date object. Math also contains pre-defined variables that will give values of important constants like Pi, LN2, log base 10 etc... To use math object: Syntax: Math.methodName() Explanation: To call a math method, just use the name Math followed by its method name, separated by a dot. Example: Math.random() This method call generates a random number. Math object can be categorized as Basic Math Functions Trigonometric Functions Math Variables or Constants

Methods available in Math Object for basic calculation in javascript?

Explanation
Object: Math Methods

Math object has the following methods that can be used to do specific & basic operations like getting random numbers, rounding a number, square root calculation, etc.. in javascript The below table lists the methods that are available for math calculations Constant abs(value) ceil(value) Example Code
Math.abs(2.822);

Result

Description

abs() method returns the absolute value of the 2.822 argument passed. 4 2 ceil() method returns the nearest greater integer value of the value passed as argument. The argument can be an integer or float. floor() method returns the nearest lowest (least) integer value of the argument passed. Result: 1.0986122886681097 log(x) function returns the natural logarithm of the value used. 14 Math.max(value1, value2) compares the two values and returns the maximum value of the two values passed. Math.min(value1, value2) compares the two values and returns the minimum value of the two values passed. Math.pow(value1, value2) function is used to calculate xy calculation. Here it is 42. Math.random() gives a random value between 0 and 1. more... Math.round() function is used to round a float (decimal) value to the nearest integer value. i.e. round of 4.5 will give 5, rounding of 4.4 will give 4.

Math.ceil(3.44);

floor(value) Math.floor(2.44); log(value)


Math.log(3);

max(value1, Math.max(14, 12); value2) min(value1, Math.min(14, 12); value2) pow(value1, Math.pow(4, 2); value2) random() round()
Math.random();

12 16 31 10

Math.round(9.678);

These functions can be used for rounding a number to the nearest greater, lowest values, comparing two numbers, finding log, absolute value, etc.... Next we will look in to function of math object that can be used for trigonometric calculations.

What is an array - Basic Tutorial, example? or How to use arrays in javascript?

Explanation
Arrays: Arrays are special type of javascript objects. It is used to store data's in contiguous manner. In other words arrays help you to store similar data's under one name in a defined order. Syntax: var varname = new Array(3); In the above syntax we have declared a new array of size 3 under the name varname. We can create new array only using the syntax new Array. It is case sensitive and so "Array" should not be defined as "array". The size of the array is set as 3. So, we can store 3 variables in the array varname. It can be declared with any size according to our requirement. Assigning Vales: Arrays always start from 0th index or position. If we have set the size as 3, the array will have

3 position 0,1 & 2. We can assign values to the array as follows, varname[0] = "testing array"; varname[1] = "position 2"; varname[2] = "position 3"; To assign a value in to an array, we have to call the variable name on which the array was created, followed by the position [where we want to store the value] and then assign the value. Retrieving Values: To retrieve a value from an array is very simple. Just calling the array with its position will retrieve the value at that position in the array. E.g: var val = varname[0]; Example Code: <script language="javascript"> var varname = new Array(2); varname[0] = "testing array"; varname[1] = "position 2"; document.write("Result of array is - "+varname[1]); </script> Result: Result of array is - position 2 The above example shows how to create a new array of size two, add values in to array and retrieve them. In next tutorial chapter, you will learn dense array, dynamic array.. How to create an array with out specifying any length? or What are dense arrays and how can we use them?

Explanation
Dynamic Arrays: In many a cases we will not want to create the array with a fixed size or length. In such cases we can create an array with out passing length. This array will dynamically set its value as and when a new variable or entry is added. Syntax: var araay = new Array(); Now we can assign value at any position in this array as it has no length limit. We can test this by using the attribute "length". e.g: varname[6] = "testing array"; As we have assigned a value at 6th position the length of array will now be 7. Example Code: <script language="javascript"> var araay = new Array(); araay[6] = "testing array"; document.write("Size of dynamic array is - "+araay.length); </script> Result: Size of dynamic array is - 7 Dense Array: Dense array is nothing different in functionality from a normal array. The only difference is

that the values are assigned to the array at the time of initialization of the array. E.g: var arraa = new Array("index 0","index 1","index 2"); Example Code: <script language="javascript"> var arraa = new Array("array test 1","array test 2"); document.write("Result from dense array is - "+arraa[1]); </script> Result: Result from dense array is - array test 2 In the next chapter we will look into the predefined methods of Array object .. What are different functions or methods in javascript array? How can we sort the elements in javascript array? How to join elements in an array?

Explanation
Array Methods : Array has the following predefined methods. toString() joint() reverse() sort() Method: toString() : This method is used to convert the array elements in to a string. The string will have each element in the array separated by comma(,). Example Code: <script language="javascript"> var varname = new Array(); varname[0] = "testing to string 1"; varname[1] = "testing to string 2"; document.write("toString -- "+varname.toString()); </script> Result: toString -- testing to string 1,testing to string 2 Method: join() : This method is used to join the elements in the array separated by a separator. This function is much similar to toString method. Here we can specify the delimiter or separator that comes instead of comma. Example Code: <script language="javascript"> var aarray = new Array(); aarray[0] = "element 1"; aarray[1] = "element 2"; var xx = aarray.join(" +++ "); document.write("join() -- "+xx); </script> Result: join() -- element 1 +++ element 2 Method: sort() :

This method is used for sorting elements in the array. The values will be sorted in a dictionary order. Example Code: <script language="javascript"> var sorting = new Array(); sorting[0] = "b for balloon"; sorting[1] = "d for donkey"; sorting[2] = "a for apple"; aarray.sort(); document.write("sort function -- "+sorting.toString()); </script> Result: sort function -- a for apple,b for balloon,d for donkey

You might also like