Download as ppt, pdf, or txt
Download as ppt, pdf, or txt
You are on page 1of 52

DOM(Document Object Model):

One important feature of JavaScript is that it is object based language.


This helps the user to develop program.
It is not complete object oriented programming language it supports
object oriented features.
An object can be defined as a single entity.
Any object consist of
1)A collection of properties which contains data
2)Methods which perform certain operation on the data contained in the
properties.
Ex: the paragraph element has an alignment attribute that can be set to
the left, right, center. <
In the object model this attribute are called as property of the object.
A property is a value that belongs to an object.

All the standards JavaScript object have such properties placing a dot
after the object name can access a property of an object.

Ex: The bgcolor property of the document can be referred as


document.bgcolor
document.write(“ “);
In the previous section you have used document. write to write some
text in the document body where write() is the method of the object
document.

Similarly alert(), promt() are the methods of the window object.


In JavaScript there are different object having their properties and
methods and events.

1)JavaScript window object

2)JavaScript Navigator object

3)JavaScript Screen object

4)JavaScript History object

5)JavaScript Location Object


JavaScript Window Object:

This is the top level object in the hierarchy of the browser object and is
automatically defined by the browser.

This represented in the window in which the web page is displayed.


Ex: when you use the stmt

document. write(“tybca”) in a script

JavaScript assume that you are referring to the current window object
and execute the following stmt.

Window.document.write (“tybca”)

All the data available to JavaScript about the browser is attached to the
window object as properties.
Various properties of the window object are:

1)closed:
It identifies whether window is closed.
2)default status:
default message that appears in the status bar of the browser.
3)frames:
An array that contains all frame object contained in the window.
4)location:
source location of the document in the window.
5)name:
the name of the window by which it is identified.
6)top:
it refers the topmost parent window.
7)open:
the object that caused the window to open.
8)status:
The status bar is the bar on the lower left side of the browser and
is used to display temporary message.

Ex: window. Status ” “

The window status bar will not always work when written to page load.
Normally it is used when event happens such as when the user clicks on
something or moves the mouse over an item.
Window Object Methods:

1)alert:
displays an alert dialog box. The alert function is displayed
message in dialog box.

2)focus:
this function will give focus to the window.
3)blur:
this function removes the focus from the window.
4)confirm(“msg”):
The string passed to the confirm function is displayed in the
confirm dialogs box.
The dialog box returns a true or false value depending on which button
was clicked.
5)prompt(“msg” “defaultsmsg”):
A prompt dialog box is displayed with the message
passed as the prompt question or phrase.
If no default message string is present no default string is displayed.

6)open(“url”, “window name”,[“option”])


A new window is opened with the name specified by the second
parameter.
The option are not required.
7)resizeBy(x,y):
Adjust the window size relative to the current value.
8)resizeTo(x,y):
Adjust the window size to set x and y.
9)scroll (x, y):
the window is scrolled to the location specified by the x and y
values in pixels.
JavaScript History Object:

The history object represent the list of document that the current window
has displayed.

The history object does not allow the user to actually see the URL that
have been displayed previously in the browser.

It provide methods that allows the user to navigate back and forth
through the list of previous pages.

It has following methods:


1)back:
loads the previous URL in the history list.
History.back()
2)forward():
loads the next URL in the history list.
3)length():
It gives the length of the history list.
4)go():
it loads the URL specified from the current place in the history
list.

Ex: window.history.back()
Or
history. back()
The above stmt has the same effect as pressing the back button of the
browser once.
JavaScript Location Object:

The location object is automatically created by the JavaScript runtime


engine.

It contains information about the current URL.

The location object is the part of the window object and is accessed
through the window. Location property.
Location object properties:

1)Hash:
sets the URL from the hash sign.
2)Host:
set or return the host name and port name of the current URL.
3)Hostname:
set or return the hostname of current URL.
4)Href:
set or return the entire URL.
5)pathname:
set or return the path of current URL.
6)port:
set or return the port number of the current URL
7)protocol:
set or return the protocol of the current URL.
The most frequently used property is href which is used to display a
new document in the current window.

Ex:
window.location.href=<<http://
or
location.href=<<http://

The hostname, protocol name will be displayed in the window as

document. write(“host name”+location. hostname)


other than href property other properties will not display proper result
file you are trying access on the local machine.

These properties will work if the file being display was fetched from
web server.
Location Object methods:

1)assign():
It simply loads a new document.

2)reload():
It reloads the current document.

3)replace():
It replaces the current document with a new one.
JavaScript Screen Object:

The screen object is automatically created by the JavaScript runtime


engine.
It contains information about clients display screen.

Screen object Properties:

1) avilHeight:
Return the height of the displayed screen (excluding the windows
taskbar)

2) avilwidth:
Returns the width of the displayed screen.
3) colordepth:
Return the bit depth of the color palette on the destination device.

4) deviceXDPI:
It return the number of horizontal dots per inches of the
displayed screen

5) deviceYDPI:
It return the number of vertical dots per inches of the displayed
screen.

6)height:
The height of the displayed screen

7) PixelDepth:
It returns the color resolution of the displayed screen.
8)width:
It returns the width of the displayed screen.

9) LogicalXDPI:
It returns the normal number of horizontal dots per inch of the
displayed screen.
JavaScript Navigator Object:

The navigator object provides information about the browser such as


version and type.

Navigator properties:

1) appcodeNames:
The name of the browsers code i.e. Mozilla

2) appMinorVersion:
The minor version number of the browser.

3) appName:
The name of the browser i.e Netscape.
4) cookie Enabled:
A Boolean value of true or false depending on whether cookies
are enabled in the browser.

5) UserLangauge:
the language the user using such as “en-us”
6) plugins:
An array of all plug-ins installed in the browser.
A plug-ins is a special helper application, which browser uses to
integrate multimedia.

7) mimetypes:
An array of all mime type currently supported by the browser.
An mime type specifies how information is encoded for plug-in to use.
MIME provides away to exchange file in any format between computer
using mail.
Navigator methods:

1) javaEnabled():
Returns a Boolean if the browser has JavaScript enabled.

2) taintEnabled():

Tainting is a security protection mechanism for data.


It returns a Boolean if the browser has tainting enabled.
JavaScript Predefined Function:

1) escape(string):
It encode a string from ASCII into ISO Latin-1 character set which is
suitable for HTML processing.
It passed the string to be encoded and return the encoded string.

2) unescape():
It convert an ISO 8859-1 character set to ASCII.

Ex:
If a string is “MY PHONE # IS 123” after escape function it is
MY%20PHONE%20%23%20 is%20123
after unscape it is “MY PHONE # IS 123”
3) eval():

It converts a string to integer or float value.


It can also evaluate expression included with a string.

Ex: Val= eval(“124/2”)


the Val becomes 62

4) isNan(value):
If the value passed is not a number then boolean value of true is
returned.
If it is number it return false.
.5) parseFloat ():

It covert string to a floating point number and return the value.


It continues to convert until it hits a non numeric character and
then return the result.
If the first character cannot be converted to a number the function returns
zero.

6) parseInt ():

It converts a string to an integer returning the first integer


encountered which is contained in the string.
If no integer value found then a value 0 is returned.
EVENT:

Event are signals generated when specific action occurs.

Events represents the entire activity that goes between the program
system and the user.

As a result of user interaction with the application the system generates


an event representing the action performed by the user.

Ex: selecting a menu option or clicking on some button.

For every event that is generated the application performed some


specified task by executing the associated code.
JavaScript is aware of these signals and scripts can be built to react to
these events.

The events available in JavaScript as:

1) abort ():
It occurs when the user cancels loading of an image.

2) blur ():
It occurs when focus is removed from window.

3) click ():
It occurs when user clicks on a link.

4) change ():
It occurs when an error happens during loading of a document or
image
5) error () :
It occurs when an error happens during loading of a document.

6) load ():
It occurs when a page is loaded into explorer.

7) mouseout ():
It occurs when the user moves the pointer of a link.

8) mouseover ():
It occurs when the user moves the pointer over a hypertext link.

9) reset ():
It occurs when the user clears a form using the reset button.

10) submit ():


It occurs when form is submitted.

You might also like