JavaScript - DOM Document Object Model, Error Handling, Objects

DOM Document Object Model
Error Handling
- Try -- Catch
- Throw
Objects

DOM (Document Object Model)

DOM window

Window is the top most level object in the JavaScript hierarchy as we saw in DOM topic, window object represents a browser window. Every <body> tag creates an window object. As we know that an object can have properties and methods or functions. Window object have man properties and methods listed below to know about any property click on that property.

Properties:

document
History
Location
Name
closed
toolbar
scrollbars

Methods

Open()
print()
alert()
confirm()
close()
moveTo()
prompt()

Properties

Name

This window property is used to set or get the name of the window in use. When we are working with many windows it becomes very necessary to know the name of the window we are working with. The below given example shows how to get the name of the window in use.

Example:

<html>

<head>

function nm()

{

document.write("<br> Current Window Name is : "+win.name)

}

</script>

</head>

win=window.open('','Sandeep','width=150,height=150')

win.document.write("This is a new window created by sandeep , it's name is sandeep, move the window & click on the button ")

</script><input type="button" value="Hit me to know name of window" onclick="nm()"></body>

</html>

Closed

This window property is used to know whether the specified window is closed or not many times a processing is to be done but before that it becomes necessary to check whether the page is open or not we can use this window property to know the status of the window. The below given example shows how to get the status of the window in use.

Example:

<html>

<head>

function nm()

{

if (win.closed)

{

document.write("<br> Sorry.. The window has been closed")

}

else

{

document.write("<br> The window is open enjoy.. it")

}

</script>

</head>

win=window.open('','Sandeep','width=150,height=150')

win.document.write("This is a new window created by sandeep , it's name is sandeep, move the window & click on the button ")

</script><input type="button" value="Hit me to know name of window" onclick="nm()"></body>

</html>

Toolbar

This window property is used to add the toolbar to the window at the time of creation of window , Standard toolbar appears which can be used to move forward or back , go or refresh etc. properties of the toolbar could be accessed. The below given example shows how to set the toolbar to the window.

Example:

<html>

<head>

</head>

<body>

win=window.open('','Sandeep','width=450,height=350,toolbar')

win.document.write("This is a new window created by sandeep , it's name is sandeep, move the window & click on the button ")

</script>

</body>

</html>

Scrollbars

This window property is used to add the scrollbars to the window at the time of creation of window , scrollbars are used to move up or down on the page having matter more than the window size. The below given example shows how to set the scrollbars to the window.

Example:

<html>

<head>

</head>

<body>

win=window.open('','Sandeep','width=450,height=350,toolbar,scrollbars')

win.document.write("This is a new window created by sandeep , it's name is sandeep, move the window & click on the button ")

</script>

</body>

</html>

Methods

Open()

This window method is used to open the specified window. Using this method we can open any window from code as and when required. The below given example shows how to open a window using JavaScript code.

Example:

<html>

<head>

</head>

<body>

var i=0

var winname="sandeep"

for(i=0;i<5;i++)

{

winname=winname+i

win=window.open('',''+winname,'width=450,height=350,toolbar,scrollbars')

win.document.write("This is a new window created by sandeep , it's name is sandeep, move the window & click on the button ")

}

</script>

</body>

</html>

print()

This window method is used to print the specified window contents on printer. We can activate the printer control panel using this method and set desired print settings. The below given example shows how to print a widow contents.

Example:

<html>

<head>

function ff()

{

window.print()

}

</script>

</head>

<body>

win=window.open('','MKDT','width=450,height=350,toolbar')

win.document.write("This is a new window created by sandeep , it's name is sandeep, move the window & click on the button ")

</script>

</body>

</html>

Alert Box

Alert box is a dialog box which displays a message in a small window with an OK button, user have to click on the ok button to proceed.

Example:

<html>

<head>

</head>

<body>

alert("Hit me to proceed")

document.write(" Have a nice day ");

</script >

</body>

</html>

Understanding the program:

user can type his desired message with the alert box in the quotes like alert("what ever text user want "). This message will be displayed with the alert window to guide the user.

output is:

Have a nice day

Confirm Box

Confirm box is a dialog box which displays a message in a small window with two buttons. One Ok and other Cancel. This method can be used to get the response of user in positive by clicking on ok and in negative by clicking on cancel. The value returned by the confirm method in case of OK is true and in case of Cancel is false. A programmer can program the code for positive and negative situations depending on the response returned by the user.

Example:

<html>

<head>

</head>

<body>

a=confirm(" Want to Proceed ? ");

document.write("Your have clicked on : "+a);

</script >

</body>

</html>

understanding the program:

If user will clicks on Ok then you have clicked on true will appear
If user will clicks on Cancel then you have clicked on false will appear

This window method is used to close the specified window. Using this method we can closed any window from code as and when required. The below given example shows how to close a window after clicking on a button.

Example:

<html>

<head>

function ff()

{

win.close()

}

</script>

</head>

<body>

win=window.open('','Sandeep','width=450,height=350,toolbar')

win.document.write("This is a new window created by sandeep , it's name is sandeep, move the window & click on the button ")

</script>

</body>

</html>

moveTo()

This window method is used to move the specified window to desired location on screen. The two parameter s are passed with this function one for x coordinate and other for y coordinate. Using this method we can position window to our desired position using code. The below given example shows how to position a window using JavaScript code.

Example:

<html>

<head>

</head>

<body>

var i=0

var winname="sandeep"

for(i=0;i<5;i++)

{

winname=winname+i

win=window.open('',''+winname,'width=450,height=350,toolbar,scrollbars')

win.document.write("This is a new window created by sandeep , it's name is sandeep, move the window & click on the button ")

}

</script>

</body>

</html>

Prompt Box

Prompt box is a dialog box which displays a message in a small window with a text box along with two buttons . One OK and other Cancel. Prompt method has ability to return the text kept with the prompt method's text box , this value can be assigned to some variable and can be used as and when require.

Example:

<html>

<head>

</head>

<body>

prompt ("Enter your name", "")

</script >

</body>

</html>

understanding the program :

A dialog box with a text box and two buttons will appear, the message typed with prompt method will be displayed on the dialog box the text box will appear blank , if any text is typed at the place of blank (" "), that text will appear in the text box on dialog box.

Example

<html>

<head>

</head>

<body>

prompt ("Enter your name", " enter your name here")

</script >

</body>

</html>

understanding the program :

A dialog box with a text box and two buttons will appear, the message typed with prompt method will be displayed on the dialog box the text box will appear filled with " enter your name here " text.

Storing value accepted from a prompt box in variables :

<html>

<head>

</head>

<body>

var name,address

name=prompt ("Enter your name", " enter your name here")

address = prompt ("Enter your address", "Address Please ")

document.write("Your Name : "+name);

document.write("<br>Your Address : "+address);

</script >

</body>

</html>

understanding program :

As we know that prompt method has the ability to return the text stored in it's text box, so the name fed by the user will be stored in the name variable and address of user in address variable, which will be displayed on the screen by document.write method.

Output is :

Your Name : Rhythm
Your Address : A -45, Preet Vihar, Delhi - 110092

DOM Navigator

Navigator contains information about the client's browser. A user surfs the internet using a browser program like internet explorer or Netscape navigator. These programs are quite smart programs. Javascript Navigator object contains information about user's browser program. The properties and methods of navigator object are listed below.

Properties:

appName
onLine
platform
appCodeName
appVersion

Methods

JavaEnabled()

Properties

appName()

This navigator property returns the current browser's name. Different users use different browser program many times it becomes very necessary to know the browser name of the user because it is possible that some particular command do not work on some specific browser. To know the name of the browser we can use this method.

Example:

<html>

<head>

</head>

document.write("<br>My current browser is : "+navigator.appName)

</script>

</body>

</html>

onLine ()

This navigator property returns true if the computer is in offline mode else false. If our computer is online this method returns false else it returns true.

Example:

<html>

<head>

</head>

document.write("<br>My current browser is : "+navigator.onLine)

</script>

</body>

</html>

platform ()

This navigator property returns the operating system platform. Any operating system follows a platform (some basic rules set) , like whether it is 16 bit program or 32 bit program. This method provides facility to know the operating system platform so that with this knowledge the user can put desired condition in his program.

Example:

<html>

<head>

</head>

document.write("<br>My current operating system platform is : - "+navigator.platform)

</script>

</body>

</html>

appCodeName ()

This navigator property returns browser's code name. Every browser performs certain code. To know the code name of that browser we can use this method.

Example:

<html>

<head>

</head>

document.write("<br>My current operating system platform is : - "+navigator.appCodeName)

</script>

</body>

</html>

appVersion ()

This navigator property returns browser's platform and version (version is the advancement level). This property is used to know that what platform the user is using what is the version (advancement level) of user's platform.

Example:

<html>

<head>

</head>

document.write("<br>My Browser's Details : - "+navigator.appVersion)

</script>

</body>

</html>

Method

JavaEnabled()

This navigator property returns true if the browser is java enabled else false. Java is a very powerful language, our web page may require connectivity to a Java program but in that case the browser should be java enabled. If the browser will not be java enabled then the functionalities programmed in java will not work properly. To know whether the browser is java enabled or not we can use this method.

Example:

<html>

<head>

</head>

document.write("<br>My Browser is Java Enabled ? : - "+navigator.javaEnabled())

</script>

</body>

</html>

DOM screen

Screen object contains information about the client's screen . Different users can have different screen sizes and types. In case we want to create something we should keep in mind the screen dimensions will not be same and because the screen sizes will not be same so other properties will also require attention. The properties of screen object are listed below.

Properties:

height
width
availHeight
availWidth

height

This screen property returns the screen height .

Example:

<html>

<head>

</head>

document.write("<br> the work area height is "+screen.height + " px.")

</script>

</body>

</html>

Width

This screen property returns the screen width . Different screens can have different dimensions , width property returns the height of the screen in use. A programmer can program suitably after knowing the height of screen in use.

Example

<html>

<head>

</head>

document.write("<br> the screen width is "+screen.width + " px.")

</script>

</body>

</html>

availheight

This screen property returns the screen height (screen height- taskbar). A web page is displayed on the screen availheight property returns the screen height which can be calculated by total screen height - height of taskbar.

Example:

<html>

<head>

</head>

document.write("<br> the work area height is

"+screen.availheight + " px.")

</script>

</body>

</html>

availwidth

This screen property returns the screen width (screen width- taskbar). Different screens can have different dimensions , availwidth property returns the screen web page available width of the screen in use. A programmer can program suitably after knowing the height of screen in use.

Example:

<html>

<head>

</head>

document.write("<br> the work area height is "+screen.availheight + " px.")

</script>

</body>

</html>

DOM History

History object contains information about the URLs user has accessed or visited using browser window. When a user access a web page the details of that web page are stored on computer by browser in form of history. We can access these details using the history object .The properties and methods of history object are listed below.

Properties:

Length

Methods

Back()
Forward()
Go()

Properties

length

length property of history object returns total number of elements in history list. The number of objects in the history list may be different at different times because generally person do not visit same number of pages. Length property returns us the total number of pages available in history collection.

Example:

<html>

<head>

</head>

<body>

<blockquote> history length will tell you that how many

elements are in history list </blockquote>

document.write(history.length)

</script>

</body>

</html>

Method

Back()

This history object's method loads the previous URL in the history list. The page we just left after moving to new page is history for current page. We can access the previous page by using back() method. This method will drop us back to the previous page.

Example:

<html>

<head>

</head>

<body>

<blockquote>If any page is opened in the browser before

this page the it will call that page back </blockquote>

function ff()

{

history.back()

}

</script>

<input type ="button" value="hit me to go back " name="b1"

onclick="ff()">

</body>

</html>

Forward()

This history object's method loads the next URL in the history list. There is a list page name in history. To go to the page next to current page or url can be accessed by forward () method. It will drop us on the next page to current page.

Example:

<html>

<head>

</head>

<body>

<blockquote>If any page is opened in the browser before

this page the it will call next page</blockquote>

function ff()

{

history.forward()

}

</script>

<input type ="button" value="hit me to go forward "

name="b1" onclick="ff()">

</body>

</html>

go()

This history object's method loads the specified web page number in the history list. To load any page in history we can use go () method. This method calls the specified web page and loads it on browser.

Example:

<head>

</head>

<body>

<blockquote>It will call the specified page number inthe

history list</blockquote>

function ff()

{

history.go(-2)

}

</script>

<input type ="button" value="hit me to go forward "

name="b1" onclick="ff()">

</body>

</html>

DOM document

window is the top most level object in the JavaScript hierarchy as we saw in DOM topic, document object is child object of window object. Object model also contains collections. A collection is an array holding one or more objects. The collection in document object is 'all' which represent all the elements in the document. A document object can be used to access all the elements on a page using all collection. The collections, properties, objects are listed below.

Collections:

anchors[]
forms[]
images[]

Properties:

cookie
title
URL
lastmodified

Methods

getElementById()
getElementbyTagName()
write()

Collection

Anchors

Anchor collection returns details about anchors available on your web page. Anchors are links created in a document to get connected with other documents. Using these links we can call other specified document on the browser.

Example:

<html>

<head>

</head>

<body>

<a name="one"> this is anchor no. 1 </a> <br>

<a name="two"> this is anchor no. 2 </a> <br>

<a name="three"> this is anchor no. 3 </a> <br>

<a name="four"> this is anchor no 4 </a> <br>

Total no of anchors in this page are :

document.write(document.anchors.length);

</script>

</body>

</html>

Output is:

this is anchor no. 1
this is anchor no. 2
this is anchor no. 3
this is anchor no 4

Total no of anchors in this page are : 4

Example:

<html>

<head>

<title>anchors </title>

</head>

<body>

<a name="one"> this is anchor no. 1 </a> <br>

<a name="two"> this is anchor no. 2 </a> <br>

<a name="three"> this is anchor no. 3 </a> <br>

<a name="four"> this is anchor no 4 </a> <br>

the name of anchor no 2 is:

document.write(document.anchors[1].name);

</script>

</body>

</html>

Output is:

this is anchor no. 1
this is anchor no. 2
this is anchor no. 3
this is anchor no 4

the name of anchor 2 is : two

Example:

<html>

<head>

<title>anchors </title>

</head>

<body>

<a name="one"> this is anchor no. 1 </a> <br>

<a name="two"> this is anchor no. 2 </a> <br>

<a name="three"> I am anchor no. 3 India is great </a> <br>

<a name="four"> this is anchor no 4 </a> <br>

The Text inside anchor no. 3 is :

document.write("<br>"+document.anchors[2].innerHTML);

</script>

</body>

</html>

output is:

this is anchor no. 1
this is anchor no. 2
I am anchor no. 3 India is great
this is anchor no 4
The Text inside anchor no. 3 is :
I am anchor no. 3 India is great

forms

forms collection returns details about form objects available on your web page. All the elements contained by a form can be accessed by form object.

Example:

<html>

<head>

<title>forms </title>

</head>

name <input type=text name=t1>

</form>

name <input type=text name=tt1>

</form>

name <input type=text name=ttt1>

</form>

Name of First form is

document.write(document.forms[0].name);

</script>

</body>

</html>

Output is:

name

Name of First form is f1

Example

<html>

<head>

<title>forms </title>

</head>

name <input type=text name=t1>

</form>

name <input type=text name=tt1>

</form> <form name="f3">

name <input type=text name=ttt1>

</form>

Total no of forms on page are :

document.write(document.forms.length);

</script>

</body>

</html>

Example:

<html>

<head>

<title>forms </title>

</head>

name <input type=text name=t1>

</form>

name <input type=text name=tt1 value="hi user">

</form>

name <input type=text name=ttt1>

</form>

Total no of forms on page are :

document.write(document.forms[1].tt1.value);

document.write("<br>Total no of elements of form 3 are " +document.forms[2].elements.length);

</script>

</body>

</html>

Output is:

name

Total no of forms on page are : hi user

Total no of elements of form 3 are 1

images

forms collection returns details about images available on your web page. A web page contains images which forms an array or collection. This collection can return each and every detail about any image present on the web page using different image properties.

Example:

<html>

<head>

<title>forms </title>

</head>

Name of firs image on page is :

document.write(document.images[0].name);

</script>

</body>

</html>

Output is:

Name of first image on page is : delhi

Example:

<html>

<head>

<title>forms </title>

</head>

Total no of images on page are :

document.write(document.images.length);

</script>

</body>

</html>

Output is:

Total no of images on page are : 4

Example:

<html>

<head>

<title>forms </title>

</head>

width and height of third image on page :

document.write("<br> Height "+document.images[2].height);

document.write("<br> Width "+document.images[2].width);

</script>

</body>

</html>

output is:

width and height of third image on page :

Height 100

Width 100

Properties

Cookies property returns or sets the cookies associated with current document. Cookies are the text which helps the server to identify a computer. Server responses the request of a client.

Example:

<html>

<head>

</head>

<body>

<h1 align=center> ... Cookies with this page ... </h1>

a="Vishwajit Vatsa "

document.cookie=a

document.write(document.cookie)

</script >

</body>

</html>

output is:

... Cookies with this page ...

name=Vishwajit Vatsa

title

This property returns the title of the web page. A web page can have a title created using title tag. We can know the title of any web page using title property of document object.

Example:

<html>

<head>

<title> This is just trial </title>

</head> <body>

<h3 align=center> ...Title of this page ... </h3>

document.write(document.title)

document.write("<br>Total characters in Title are "+document.title.length) a=prompt("Enter new Title","")

document.title=a document.write("<br> New Title is "+document.title)

</script >

</body>

</html>

output is:

...Title of this page ...

This is just trial
Total characters in Title are 18
New Title is sarla

URL

This property returns the URL of the current document. URL stands for uniform resource location. This could be the location on a local machine or on remote machine. Where ever a document is stored is called it's URL. URL returns the address of the document.

Example:

<html>

<head>

<title> This is just trial </title>

</head>

<body>

document.write(document.URL)

document.write("<br>Total characters in URL are "+document.URL.length) a=prompt("Enter new URL or address of any html file ","")

document.URL=a document.write("<br> New URL is "+document.URL)

</script >

</body>

</html>

lastModified

lastModified property returns date & time of a document last modified. The access and modification of every javascript file is maintained by lastModified property. We can know the date and time of any file got modified.

Example:

<html>

<head>

</head>

<body>

<h3 align=center> ... The last modification with this page was made on ... </h3>

document.write(document.lastModified)

</script >

</body>

</html>

output is:

... The last modification with this page was made on ...

01/01/2000 00:17:40

Method

getElementById()

getElementById() method returns a reference to the first object with specified id. An object can have an id with it for it's recognition we can access that element using getElementById() function.

Example:

<html>

<head>

</head>

<body>

<h4 id="obj3" > We teach our children how to walk and we also teach them that we can not fly </h4>

var a=document.getElementById("obj3")

document.write("<br>"+a.innerHTML)

</body>

</html>

output is:

We teach our children how to walk and we also teach them that we can not fly.

getElementbyTagName()

getElementbyTagName method returns a collection of objects with specified tag name. All the objects can have user defined name. We can access that element using the getElementbyTagName() function.

Example:

<html>

<head>

</head>

<body>

<a > It is true the true never dies </a> <br>

<h5> it is heading 5 </h5>

<h5>it is heading 5 </h5>

var a=document.getElementsByTagName("h5")

document.write(" h5 tag is used "+a.length+" Times")

document.write("<br> text in first h5 is :- "+a[0].innerHTML);

</script>

</body>

</html>

output is:

this is very cold
It is true the true never dies

it is heading 5

var a=document.getElementsByTagName("h5") document.write(" h5 tag is used "+a.length+" Times") document.write("
text in first h5 is "+a[0].innerHTML); h5 tag is used 2 Times
text in first h5 is it is heading 5 h5 tag is used 2 Times
text in first h5 is it is heading 5

write

write method displays the text and/or HTML expressions typed in the brackets on the web page. Write method displays the text and the variable values on the monitor. In javascript a HTML code can also be used inside a write method brackets.

Example:

<html>

<head>

</head>

<body>

var a,b,c document.write("This is a simple text, we used write method

to print this line ");

document.write("<br>here is a HTML expression

<body bgcolor=red text=yellow> ")

</script >

</body>

</html>

output is:

This is a simple text, we used write method to print this line

here is a HTML expression

Error Handling

Try -- Catch

It is very difficult to analyze all the situations to arise during runtime of a program because of which some conditions may remain unanswered, these unanswered conditions are called exceptions, JavaScript provides a facility to handle such situations. We can use try and catch statements to handle such situations. The whole code is kept inside the try block an in case any exception arises it is thrown using throw statement which is caught by the catch statement.

Example:

<html>

<head>

<title>events </title>

</head>

<h4> Enter Either Value as Zero (0)</h4>

Value 1: <input type="text" id="t1"> <br>

Value 2: <input type="text" id="t2"> <br>

Answer: <input type="button" id="b1" value="Hit me " onclick="pp()"> <br>

function pp()

{

var c= parseInt(document.all.t1.value)

var d=parseInt(document.all.t2.value)

var e=0

try

{

if(d==0)

{

throw "Divisor is Zero"

}

if (c==0)

{

throw "To be divided is Zero"

}

catch(error) {

alert(error)

}

</script>

</body>

Throw

Example

<html>

<head>

<title>events </title>

</head>

<h4> Enter Week Day Please</h4>

Value 1: <input type="text" id="t1" > <br>

Value 1: <input type="button" id="b1" value="Hit me " onclick="pp()"> <br>

function pp()

{

var c= parseInt(document.all.t1.value)

try

{

switch(c)

{

case 1 :

throw "Sunday"

break

case 2:

throw "Monday"

break

case 3:

throw "Tuesday"

break

case 4:

throw "Wednesday"

break

case 5:

throw "Thrusday"

break

case 6:

throw "Friday"

break

case 7:

throw "Saturday"

break

default:

throw "The real error"

}

catch(error) {

alert(error)

}

</script>

</body>

</html>

Objects

Properties

Properties are variables having values desired for an object and these variables determines the behaviour of that object. The variable can have different types of data .The type of data determines the type of variable. What an object contains is actually it's properties or variable used for it. The properties of an object can be changed by using a method.

Example

<html>

<head>

</head>

<body>

var car = new Object

car.name="Ferari"

car.color="red"

car.no="DEL1504"

document.write("<br> Car Name :"+car.name)

document.write("<br> Car Color :"+car.color)

document.write("<br> Car Number :"+car.no)

</script>

</body>

</html>

Output is:

Car Name :Ferari
Car Color :red
Car Number :DEL1504

Methods

Methods are set of actions that allow the access to the variables of an object. A Method contains the code to perform some task for an/many object(s). The methods and the variables forms an object.

Example

<html>

<head><title> Functions are like Objects </title>

</head>

<body>

function car()

{

var car = new Object

car.name="Lancer"

car.color="Blue"

car.no="MAH2059"

document.write("<br> Car Name :"+car.name)

document.write("<br> Car Color :"+car.color)

document.write("<br> Car Number :"+car.no)

}

var mycar= car

mycar()

</script>

</body>

</html>

Output is:

Car Name :Lancer
Car Color :Blue
Car Number :MAH2059

Functions also behaves like objects?

In Javascript functions also behave like objects. In JavaScript we can use function like an object. As an object is collection of variables and methods. The function also contains variables. We can access a function variables like object property by using dot(.) operator, as we access an object property.

Example

<html>

<head>

</head>

<body>

function road()

{

var car = new Object

car.name="Lancer"

car.color="Blue"

car.no="MAH2059"

document.write("<br> Car Name :"+car.name)

document.write("<br> Car Color :"+car.color)

document.write("<br> Car Number :"+car.no)

}

var mycar= new Object

mycar.details=road

mycar.details()

</script>

</body>

<html>

Output is:

Car Name :Lancer
Car Color :Blue
Car Number :MAH2059

Arrays also behave like objects?

In JavaScript arrays also behave like objects. An array is collection of variables, an object is also collection of variables. In JavaScript we can access an array subscripts like an object properties by using a dot(.) operator. So in JavaScript we can we have facility to use arrays like object also.

Example

<html>

<head><title> Arrays are like Objects </title>

</head>

<h4 align=center> We are using array elements as Object properties </h4>

var demo1= new Array()

demo1[0]="Car"

demo1[1]="BUS"

demo1[2]="Truck"

document.write("<br> Vehicle Type : "+demo1[0]);

document.write("<br> Vehicle Type : "+demo1[1]);

document.write("<br> Vehicle Type : "+demo1[2]);

demo1.name="Sandeep"

demo1.mname="Singh"

demo1.lname="Bhandari"

document.write("<br> <br>I am :"+demo1.name+" "+demo1.mname+" "+demo1.lname)

document.write("<br><br> My Name is : "+demo1["name"]);

document.write("<br> My Middle Name is : "+demo1["name"]);

document.write("<br> My Last Name is : "+demo1["name"]);

</script>

</body>

</html>

Output is:

We are using array elements as Object properties

Vehicle Type : Car
Vehicle Type : BUS
Vehicle Type : Truck

I am :Sandeep Singh Bhandari

My Name is : Sandeep
My Middle Name is : Sandeep
My Last Name is : Sandeep

Form Object

Text

Text is used to access text field of a form. A text field is created when we use input tag with type as text property, a text field is generated a text field should have a name for it's easier recognition. This text field can be used to type the textual data like name, address etc.

Example

<html>

<head><title> Text Element </title>

</head>

<h4 align=center> Click on Desired Button</h4>

function colo()

{

a=prompt("Enter Color name , you want ","")

document.all.tt1.style.background=a;

}

function sz()

{

a=prompt("Enter size , you want ","")

if(isNaN(parseInt(a)))

{

alert("Wrong entry")

}

else

{

document.all.tt1.style.width=a;

}

function values()

{

alert("Value in Text box is "+document.all.tt1.value);

}

function pos()

{

a=prompt("Enter X Position , you want ","")

b=prompt("Enter Y Position , you want ","")

document.all.tt1.style.pixelLeft=a;

document.all.tt1.style.pixelTop=b;

}

</script>

</body>

</html>

Button

Button is used to access Button of a form which is neither a reset nor a submit button. When we want to create a button on the web page we use input tag with type as button, we can attach an event with this button, like onclick. A button also should have name for it's recognition and value which will be displayed on the button so that user can understand that for what purpose this button is. We can understand this all by below given example.

Example:

<html>

<head><title> Text Element </title>

</head>

<h4 align=center> Click on Desired Button</h4>

function bcolo()

{

a=prompt("Enter Color name , you want ","")

document.all.tt1.style.background=a;

}

function fcolo()

{

a=prompt("Enter Color name , you want ","")

document.all.tt1.style.color=a;

}

function sz()

{

a=prompt("Enter size , you want ","")

if(isNaN(parseInt(a)))

{

alert("Wrong entry")

}

else

{

document.all.tt1.style.width=a;

}

function values()

{

alert("Value in Text box is "+document.all.tt1.value);

a=prompt("Enter New Message ","")

document.all.tt1.value=a;

}

function pos()

{

a=prompt("Enter X Position , you want ","")

b=prompt("Enter Y Position , you want ","")

document.all.tt1.style.pixelLeft=a;

document.all.tt1.style.pixelTop=b;

}

</script>

</body>

</html>

Submit

Submit is used to access submit element of a form. When user fed data in the form entries like his name, address, qualification etc. this data has no meaning until it is sent to the server where the program to analyze this data is available and where it will be stored in a database program. Submit button send the data to server.

Example:

<html>

<head><title> Text Element </title>

</head>

<h4 align=center> Click on Desired Button</h4>

</form>

function bcolo(f1)

{

a=prompt("Enter Color name , you want ","")

f1.elements.bb1.style.background=a;

}

function fcolo()

{

a=prompt("Enter Color name , you want ","")

f1.elements.bb1.style.color=a;

}

function sz()

{

a=prompt("Enter size , you want ","")

if(isNaN(parseInt(a)))

{

alert("Wrong entry")

}

else

{

f1.elements.bb1.style.width=a;

}

function values()

{

alert("Value is "+document.all.tt1.value);

a=prompt("Enter New Message ","")

f1.elements.bb1.value=a;

}

function pos()

{

a=prompt("Enter X Position , you want ","")

b=prompt("Enter Y Position , you want ","")

document.all.tt1.style.pixelLeft=a;

document.all.tt1.style.pixelTop=b;

}

</script>

</body>

</html>

Reset

reset is used to access reset element of a form. When a form is filled by the user many times it happens that a user want to fill it again or the same form should appear without sending the previous data fed to server then we use reset button, it will remove all the data fed in the different controls and a fresh form will appear.

Example:

<html>

<head><title> Text Element </title>

</head>

<h4 align=center> Click on Desired Button</h4>

</form>

function bcolo(f1)

{

a=prompt("Enter Color name , you want ","")

f1.elements.bb1.style.background=a;

}

function fcolo()

{

a=prompt("Enter Color name , you want ","")

f1.elements.bb1.style.color=a;

}

function sz()

{

a=prompt("Enter size , you want ","")

if(isNaN(parseInt(a)))

{

alert("Wrong entry")

}

else

{

f1.elements.bb1.style.width=a;

}

function values()

{

alert("Value in Text box is "+document.all.tt1.value);

a=prompt("Enter New Message ","")

f1.elements.bb1.value=a;

}

function pos()

{

a=prompt("Enter X Position , you want ","")

b=prompt("Enter Y Position , you want ","")

document.all.tt1.style.pixelLeft=a;

document.all.tt1.style.pixelTop=b;

}

</script>

</body>

</html>

Checkbox

checkbox is used to access checkbox of a form. When we use input tag with type as checkbox a square box appears with a white area , when user click on that box a tick sign appears and on clicking again on the same box the tick sign disappears. We can program this checkbox using the JavaScript code.

Example:

<html>

<head><title> Text Element </title>

</head>

<h4 align=center> Click on Desired Button</h4>

</form>

function bcolo(f1)

{

a=prompt("Enter Color name , you want ","")

f1.elements.bb1.style.background=a;

}

function fcolo()

{

a=prompt("Enter Color name , you want ","")

f1.elements.bb1.style.color=a;

}

function sz()

{

a=prompt("Enter size , you want ","")

if(isNaN(parseInt(a)))

{

alert("Wrong entry")

}

else

{

f1.elements.bb1.style.width=a;

}

function values()

{

alert("Value is "+document.all.tt1.checked);

}

function pos()

{

a=prompt("Enter X Position , you want ","")

b=prompt("Enter Y Position , you want ","")

document.all.tt1.style.pixelLeft=a;

document.all.tt1.style.pixelTop=b;

}

</script>

</body>

</html>

Radio

radio is used to access radio element of a form. When we use input tag with type as radio a circular white area appears , when we click on it a black dot appears in the white area and when we click on other circular white area the black dot gets transferred from previous circular white area to new one. Radio buttons are used to get a single option from multiple options like sex, either a person can be male or female. So we should use radio in that case. All the related radios created should have same name.

Example:

<html>

<head><title> Text Element </title>

</head>

<h4 align=center> Click on Desired Button</h4>

d<form name="f1">

</form>

function bcolo(f1)

{

a=prompt("Enter Color name , you want ","")

b=prompt("Which Radio First or Second ","")

if (parseInt(b)==1)

{

f1.elements.bb1[0].style.background=a;

}

else

{

f1.elements.bb1[1].style.background=a;

}

function tot()

{

alert("Total number of Radios "+f1.elements.bb1.length);

}

function nam()

{

alert("Name of Radio "+f1.elements[0].name);

}

</script>

</body>

</html>

Textarea

Text is used to access text area of a form. A text area is created when we use textarea tag , this control can be used to feed notes , suggestions etc. where a large amount of data from user is required.

Example:

<html>

<head><title> Text Element </title>

</head>

<h4 align=center> Click on Desired Button</h4>

This is text area </textarea>

</form>

function bcolo()

{

a=prompt("Enter Color name , you want ","")

document.all.tt1.style.background=a;

}

function fcolo(f1)

{

a=prompt("Enter Color name , you want ","")

document.all.tt1.style.color=a;

}

function fs()

{

a=prompt("Enter Font Size , you want ","")

document.all.tt1.style.fontSize=a;

}

function nam()

{

alert("Name of TextArea "+f1.elements[0].name);

}

function data()

{

alert(document.all.tt1.value)

}

</script>

</body>

</html>

Select

Select is used to access select element of a form.

Example:

<html>

<head><title> Text Element </title>

</head>

<h4 align=center> Click on Desired Button</h4>

</form>

function bcolo(f1)

{

a=prompt("Enter Color name , you want ","")

f1.elements.bb1.style.background=a;

}

function fcolo()

{

a=prompt("Enter Color name , you want ","")

f1.elements.bb1.style.color=a;

}

function sz()

{

a=prompt("Enter size , you want ","")

if(isNaN(parseInt(a)))

{

alert("Wrong entry")

}

else

{

f1.elements.bb1.style.width=a;

}

function values()

{

alert("Value in Text box is "+document.all.tt1.value);

a=prompt("Enter New Message ","")

f1.elements.bb1.value=a;

}

function pos()

{

a=prompt("Enter X Position , you want ","")

b=prompt("Enter Y Position , you want ","")

document.all.tt1.style.pixelLeft=a;

document.all.tt1.style.pixelTop=b;

}

</script>

</body>

</html>

Select option

Select option is used to access select options of a form.

Example:

<html>

<head><title> Select Element </title>

</head>

<h4 align=center> Click on Desired Button</h4>

<option > Delhi

<option> UP

<option> Bihar

<option selected> Haryana

<option> Punjab

<option> Maharastra

<option> Uttranchal

</select>

</form>

function bcolo()

{

a=prompt("Enter Color name , you want ","")

document.all.tt1.style.background=a;

}

function fcolo(f1)

{

a=prompt("Enter Color name , you want ","")

document.all.tt1.style.color=a;

}

function fs()

{

a=prompt("Enter Font Size , you want ","")

document.all.tt1.style.fontSize=a;

}

function nam()

{

alert("Name is : "+f1.elements[0].name);

}

function ind()

{

alert(document.all.tt1.selectedIndex)

}

</script>

</body>

</html>

Select list

Select is used to access select element of a form. A list of selection is used when we want user to select the given options rather then feeding it , it saves the user time and server time also in checking and validating the data, like date of birth of a person, we can feed the dates and make the user to select the desired one from the list rather than typing it from keyboard.

Example:

<html>

<head><title> Select Element </title>

</head>

<h4 align=center> Click on Desired Button</h4>

<option > Delhi

<option> UP

<option> Bihar

<option selected> Haryana

<option> Punjab

<option> Maharastra

<option> Uttranchal

</select>

</form>

function bcolo()

{

a=prompt("Enter Color name , you want ","")

document.all.tt1.style.background=a;

}

function fcolo(f1)

{

a=prompt("Enter Color name , you want ","")

document.all.tt1.style.color=a;

}

function fs()

{

a=prompt("Enter Font Size , you want ","")

document.all.tt1.style.fontSize=a;

}

function nam()

{

alert("Name is : "+f1.elements[0].name);

}

</script>

</body>

</html>

String Objects

Introduction

A string is a group of Characters .
M -> is a Character
Moral -> is a group of Characters or contains 5
Characters or is a string.

A string is an Object

A string is an object in Javascript , an object have properties and methods or functions, so a string is having property and methods in javascript.

String property

Length - property returns the no of characters present in string.

String Methods

bold() - returns the string formatting to bold.
italics() - returns the string formatting italics.
charAt() - returns the character present in string at given position.
substring() - returns the characters present from given start position to given end position.
toLowerCase() - returns the string converted to lowercase letters.
toUpperCase() - returns the string converted to uppercase letters.

Length

Length is a property of sring object, using which we can know the number of characters in a string.

Example 1:

<html>

<head>

var a="Hindustan"

document.write("Length of Variable a is "+a.length);

</script>

</html>

Output will be:

Length of Variable a is 9

Example 2:

<html>

<head>

var name="Manmohan Singh"

document.write("Length of Variable a is "+name.length);

</script>

</html>

Output will be:

Length of Variable a is 14

String Methods - bold()

Example 1:

<html>

<head>

var a="Uttar Pradesh"

document.write("The Value of Variable a is "+a.bold());

</script>

</html>

Output will be :

The Value of Variable a is Uttar Pradesh

Example 2:

<html>

<head>

var state="Bihar"

document.write("State : "+state.bold());

</script>

</html>

Output will be:

State : Bihar

String Methods - charAt()

Example 1:

<html>

<head>

var state="Bihar"

document.write("<br>character at 0th position is : "+state.charAt(0));

document.write("<br>character at 1st position is : "+state.charAt(1));

document.write("<br>character at 2nd position is : "+state.charAt(2));

</script>

</html>

Output will be :

character at 0th position is : B
character at 1st position is : i
character at 2nd position is : h

Exapmple 2:

<html>

<head>

var state="Bihar"

state=state.charAt(2).bold().italics()

document.write("Character at 2nd position is : "+state);

</script>

</html>

Output will be:

Character at 2nd position is : h

String Methods - italics()

Example 1:

<html>

<head>

var state="Bihar"

document.write("State : "+state.italics());

</script>

</html>

Example 2:

<html>

<head>

var state="Bihar"

state=state.bold();

state=state.italics();

document.write("State : "+state);

</script>

</html>

String Methods - toLowerCase()

Example 1:

<html>

<head>

var state="HIMANCHAL PRADESH"

state=state.toLowerCase()

document.write("State : "+state);

</script>

</html>

Output will be:

State : himanchal pradesh

Example 2:

<html>

<head>

var state="HIMANCHAL PRADESH"

state=state.substring(0,state.length).toLowerCase().bold().italics()

document.write("State : "+state);

</script>

</html>

Output will be :

State : himanchal Pradesh

String Methods - toUpperCase()

Example 1:

<html>

<head>

var state="uttranchal"

state=state.toUpperCase()

document.write("State : "+state);

</script>

</html>

Example 2:

<html>

<head>

var state="uttranchal"

state=state.substring(0,state.length).toUpperCase().bold().italics()

document.write("State : "+state);

</script>

</html>

output will be:

State : UTTRANCHAL

String Methods - substring()

Example 1:

<html>

<head>

var state="Bihar"

state=state.substring(0,3)

document.write("Characters from 0th to 2nd position are : "+state);

</script>

</html>

Output will be:

Characters from 0th to 2nd position are : Bih

Example 2:

<html>

<head>

var state="Bihar"

state=state.substring(0,3).bold().italics()

document.write("Characters from 0th to 2nd position are : "+state);

</script>

</html>

Output will be:

Characters from 0th to 2nd position are : Bih

Math Objects

Math object provides many properties and functions which allows to perform complex mathematical work. A Math object is a built in object of JavaScript using which a lot of mathematical calculations can be performed. We can use these mathematical functions to create the animation in JavaScript also

Math object properties

E- this property returns Euler's Constant (rougly 2.718)

PI- this property returns the value of PI

Length - property returns the no of characters present in string.

Math object Methods

abs() - this function calculates and returns the absolute value.
ceil() - this function returns the next greater or equal integer..
cos() - this function is used to calculate the cosine number..
sin()- this function is used to calculate the sin() of a number.
random () - this function returns a randomly calculated number between 0 and 1. .
sqrt() - this function calculates and returns the square root of a number.
tan() - this function calculates and returns tangent of a number.
floor() - this function returns next integer lesser than or equal to a number..
pow() - this function returns calculated value of one number for given number of powers.

Math Object's abs() function

This function calculates and returns the absolute value. Suppose the value of any variable is -345 the absolute value of -345 will be 345. if the value of a variable is 345 then the absolute value of variable will be 345.

Example:

<html>

<head>

</head>

<body>

var a=-45

document.write("<br> Value of a :"+a)

document.write("<br> Absolute Value of a :"+Math.abs(a))

</script>

</body>

</html>

Math Object's ceil() function

ceil()- this function returns the next greater or equal integer. If any number is having a decimal value then the value is increased with one else it remains as it is. Fox example a variable is having value 45.26 then the ceiling value of this variable will be 45 but if the variable value is 25 the ceil value will be 25 only.

Example:

<html>

<head>

</head>

<body>

document.write("<br>Ceiling Number is : "+Math.ceil(45.26))

document.write("<br>Ceiling Number is : "+Math.ceil(3.22))

document.write("<br>Ceiling Number is : "+Math.ceil(25))

</script>

</body>

</html>

Math Object's cos() function

cos()- this function is used to calculate the cosine number. Math object contains cos() function which can return the cos value of the angle provided with the cos function.

Examples:

<html>

<head>

</head>

<body>

var a=0

document.write("<br> Cosine of a is : "+Math.cos(a))

document.write("<br> Cosine of 90 is : "+Math.cos(90))

document.write("<br> Cosine of 180 is : "+Math.cos(180))

</script>

</body>

</html>

Math Object's floor() function

floor()- this function returns next integer lesser than or equal to a number. If any value is having the decimal values with it floor function provides the decimal truncated value. Fox example a variable is having value 45.26 the floor value of that variable will be 45 but if the value is 32 then the floor value of variable will be 32 only.

Example:

<html>

<head>

</head>

<body>

document.write("<br>Floor Number is : "+Math.floor(45.26))

document.write("<br>Floor Number is : "+Math.floor(3.22))

document.write("<br>Floor Number is : "+Math.floor(26.23))

</script>

</body>

</html>

Math Object's pow() function

pow()- this function returns calculated value of one number for given number of powers. For example if the parameters passed to the function are 2 , 3 then the answer will be 8 , 2*2*2 = 8 , this function requires the base and the power of the value and returns the calculated value.

Example:

<html>

<head>

</head>

<body>

var a=2

var b=3

document.write("<br> Value of 2's power 3 is : "+Math.pow(2,3))

document.write("<br> Value of 3's power 4 is : "+Math.pow(3,4))

document.write("<br> Value of 4's power 3 is : "+Math.pow(4,3))

</script>

</body>

</html>

Math Object's random() function

random ()- this function returns a randomly calculated number between 0 and 1. The Math object contains a random function which can be used to get the randomly generated value between 0 & 1, The code given below will generated a random value but if refreshed every time it will generate a new randomly generated value.

Example:

<html>

<head>

</head>

<body>

<h5> On Refresing screen every time new number between 0 & 1 <br> will be generated by random function</h5>

document.write("<br>Random Number is : "+Math.random())

</script>

</body>

</html>

Math Object's sin() function

sin()- this function is used to calculate the sin() of a give number. Math object contains sin function which can be used to get the sin value of any angle given to sin function as parameter. In the below given example we are passing different angle values to sin function which will generate different values

Example:

<html>

<head>

</head>

<body>

var a=0

document.write("<br> sine of a is : "+Math.sin(a))

document.write("<br> sine of 45 is : "+Math.sin(45))

document.write("<br> sine of 60 is : "+Math.sin(60))

document.write("<br> sine of 90 is : "+Math.sin(90))

</script>

</body>

</html>

Math Object's sqrt() function

sqrt()- this function calculates and returns the square root of a number. Math object has a sqrt function used to get the square root of the number given with function. Fox example if the variable value or value given to sqrt function is 81 then it will return 9 because the square root of 81 is 9.

Example:

<html>

<head>

</head>

<body>

var a=4

document.write("<br>Square Root of a is : "+Math.sqrt(a))

document.write("<br>Square Root of 81 is : "+Math.sqrt(81))

document.write("<br>Square Root is 49 is : "+Math.sqrt(49))

</script>

</body>

</html>

Math Object's sqrt() function

tan()- this function calculates and returns tangent of a number. This function will return the value generated of the angle given with tan function.

Example:

<html>

<head>

</head>

<body>

var a=0

document.write("<br> angent of a is : "+Math.tan(a))

document.write("<br> tangent of 45 is : "+Math.tan(45))

document.write("<br> tangent of 60 is : "+Math.tan(60))

document.write("<br> tangent of 90 is : "+Math.tan(90))

</script>

</body>

</html>

Date Object

Date is a built-in object of JavaScript used to deal with date in a JavaScript program. A date is composed of day, month, year, hour, minute, seconds. We can access or change any of these attributes using suitable method. These all methods provide great help to access & maintain the date. The different functions of this object are:

setDate( )	This function is used to set desire date to date object
getDate( )	This function is used to get date from date object
getDay( )	This function is used to get day of date from date object
getMonth ( )	This function is used to get Month of date from date object
getYear( )	This function is used to get Year of date from date object
SetHour()	This function is used to set Hours to a date object
SetMinutes()	This function is used to set Minutes to a date object
SetSeconds()	This function is used to set Seconds to a date object
getHour()	This function is used to get Hours from a date object
getMinutes()	This function is used to get minutes from a date object
getseconds()	This function is used to get Seconds from a date object

Date

The different date functions are used in the below given program. Like function to set desire date to date object, function get date from date object, function to get day of date from date object, function to get Month of date from date object, function to get Year of date from date object, function to set Hours to a date object , function to set Minutes to a date object, function to set Seconds to a date object, function to get Hours from a date object, function to get minutes from a date object, function to get Seconds from a date object etc.

Example:

<html>

<head><title> setDate & getDate </title>

</head>

<body>

var birthday = new Date(1985,10,5);

var day= birthday.getDate();

document.write("<br> Birth Date is : "+day)

birthday.setDate(25);

day= birthday.getDate();

document.write("<br> After Setting Birth Date to 25 date is : "+day)

</script>

</body>

</html>

Example:

<html>

<head>

</head>

<body>

var birthday = new Date(1985,10,5);

var day= birthday.getDay();

var month=birthday.getMonth();

var y = birthday.getYear();

document.write("<br> Birth Date is : "+day)

document.write("<br> Birth Month is : "+month)

document.write("<br> Birth Year is : "+y)

</script>

</body>

</html>

Example:

<html>

<head><title> setHour & getHour </title>

</head>

<body>

var calltime = new Date(1985,10,25,5,12,30);

var h= calltime.getHours()

var m = calltime.getMinutes()

var s = calltime.getSeconds()

document.write("<br>Call Time Hour is : "+h)

document.write("<br>Call Time Minutes are : "+m)

document.write("<br>Call Time Seconds are : "+s)

calltime.setHours(9)

calltime.setMinutes(29)

calltime.setSeconds(14)

var h= calltime.getHours()

var m = calltime.getMinutes()

var s = calltime.getSeconds()

document.write("<br>After Setting Call Time Hour is : "+h)

document.write("<br>After Setting Call Time Minutes are : "+m)

document.write("<br>After Setting Call Time Seconds are : "+s)

</script>

</body>

</html>

Regular Expressions

Regulars expressions are a sort of shorthand , these are used in pattern matching and substitutions. A regular expression is just sequence or a pattern of characters that is matched against a string of text. Regexps are very powerful and useful tool. They contain a lot of meaning in a short space. Every single character in the regular expression has some meaning. Any regular expression should start with a / (slash) sign and end with a slash (/) sign. The below given example can explain the power of regular expressions. In this example 5 digits are to be entered by user, when user clicks on the button function ff is called and the value entered is checked with the regular expression. In the regular expression is /^\d{5}$/

/ - start of regular expression
^ - to start the matching from first character
\ - indicates digit character
{5} - indicates that 5 , because it is preceded by \d which means digit character , so \d{5} means 5 digit characters
$ - indicates end of the string

The meaning of the above given expression is starting from beginning of the string there must be nothing other than 5 digits and There must also be nothing following those 5 digits.

<html>

<head>

</head>

<body>

function ff(f1)

{

var a=f1.t1.value

var re5=/^\d{5}$/

if (a.search(re5)==-1)

{

alert('Enter Valid number')

}

else

{

alert('good try')

}

</script>

Enter Five digits code :<input type="text" name=t1> <br>

</form>

</body>

</html>

« Previous Next Chapter »

SHARE THIS PAGE

JavaScript - DOM Document Object Model, Error Handling, Objects

it is heading 5

it is heading 5

0 Comments:

Post a Comment