Satya New Appl Javascript

Disable Enter Key Within Forms
If you have an HTML form on your web page, many times your visitors may hit the 'Enter' key on their
keyboard, instead of the 'Tab' key, thinking it will advance them to the next form field. However, the 'Enter'
key will actually submit the form. This will cause you to receive incomplete form submissions.
To avoid this problem, you can use a piece of JavaScript within your HTML code that will disable the
'Enter' button within your forms until it is completely filled out.
The above form is real and will subscribe you to our highly popular, free weekly ezine - eTips. However,
this form is also an example of how you can disable the 'Enter' key on your visitors keyboard until your
form is submitted.
Place the following JavaScript code within your web page HTML between your HEAD tags:
function stopRKey(evt)
{
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>
Highlight an Image on Mouseover
If you're looking for a way to spice up your web site, this JavaScript tip may be just what you're looking
for. You can use JavaScript to highlight an image when you place your mouse over it.
This JavaScript tip provides a great way to highlight your navigational buttons or whatever you'd like.
Example:
<HTML>
<HEAD>
<SCRIPT language="JavaScript1.2">
function makevisible(cur,which)
{
strength=(which==0)? 1 : 0.2
if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
</SCRIPT>
</HEAD>
<BODY>
<img src="E:/satya/images/C2_0512.JPG" WIDTH="227" HEIGHT="177" BORDER="0" ALT=""

width="96" height="134" style="filter:alpha(opacity=20);-moz-opacity:0.2"
onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)">
</BODY>
</HTML>
Disappearing Default Form Text

When using forms within your web site, there may be times when you will want to include an example of
what you'd like your visitors to fill in your form field. Although you could place some default text within your
form field, your users would need to delete the default text in order to type in their own information.
However, this cool little JavaScript code will enable you to display some example default text within a text
box that will disappear when clicked on - much better than your users having to delete the example text.
Example:
Submit
Place your cursor inside the text box to see the text disappear.
Place your form code within your HTML like this:
<FORM action="http://www.domain.com" method="post">
<INPUT type="text" size="25" value="Enter Your Default Text Here" onFocus="if(this.value == 'Enter
Your Default Text Here') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Enter Your Default
Text Here';}" />
<INPUT type=submit value=Submit>
</FORM>
Change the default text displayed within your text box by editing the code indicated in bold.
major issue. But here, using XML and JavaScript, it's XML that's the
issue: not all browsers support the parsing of XML documents.
I'll use IE6 to explain the codes. Browsers that don't support XML
can't read these, so when you view an XML file in such a browser, it
will simply ignore all the tags.
Sample XML File
Let's consider a sample XML file, which shows employee data and
Turnover of a company:
<?xml version="1.0" ?>
<company>
<employee id="001" sex="M" age="19">Premshree Pillai</employee>
<employee id="002" sex="M" age="24">Kumar Singh</employee>
<employee id="003" sex="M" age="21">Ranjit Kapoor</employee>
<turnover>
<year id="2000">100,000</year>
<year id="2001">140,000</year>
<year id="2002">200,000</year>
</turnover>
</company>
Manipulating the XML file data using JavaScript

Load The XML File
You can load a XML fie from JavaScript like this:

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
function loadXML(xmlFile)
{
xmlDoc.async="false";
xmlDoc.onreadystatechange=verify;
xmlDoc.load(xmlFile);
xmlObj=xmlDoc.documentElement;
}
Actually, just the last two lines of the function are enough to load the
XML file. The previous two lines ensure that any JavaScript functions
that we may use to manipulate the XML file data later, will not
perform any function on an uninitialized object. Thus the function
verify()is called:
function verify()
{
// 0 Object is not initialized
// 1 Loading object is loading data
// 2 Loaded object has loaded data
// 3 Data from object can be worked with
// 4 Object completely initialized
if (xmlDoc.readyState != 4)
{
return false;
}
}
Now the XML file can be loaded:

loadXML('xml_file.xml');
Display The Contents of the XML File
View the entire contents of the XML file using alert(xmlObj.xml); The
whole XML file will be displayed in an alert box as it is, with proper
indentation.
Children and Nodes
In the above XML file, <company> is the top level tag under which all
other tags fall. These tags are called children. This XML file can be
represented graphically like a folder-tree:
989_folderimage (click to view image)
In the above XML file, the top level tag <company> has 4 children.
The numbering of children (as is usual in all languages) starts from 0

(zero). The <turnover> tag has 3 children under it.
We can find the number of children a tag has by using the

childNodes.length property. Thus the number of children of <company>
tag (here, 4) can be found by using xmlObj.childNodes.length
The number of children of <turnover> tag (here, 3) can be found by

using xmlObj.childNodes(3).childNodes.length
Here we use childNodes(3) because <turnover> is the 3rd child of

<company>
Test for Children
You can test whether a particular node child has any children using
childNodes(i).hasChildNodes
Thus, xmlObj.childNodes(3).hasChildNodes() will return true.

xmlObj.childNodes(2).hasChildNodes() will return false, as the
<employee> tag doesn't have any children.
Get Tag Name
You can get the tag name of a child using childNodes(i).tagName.

Thus, xmlObj.tagName will return "company".
xmlObj.childNodes(0).tagName will return "employee".
xmlObj.childNodes(3).childNodes(0).tagName will return "year".
Display the Content of a Tag
In the XML file, the content of the 1st <employee> tag is "Premshree
Pillai". You can get this value using
xmlObj.childNodes(0).firstChild.text
xmlObj.childNodes(2).firstChild.text will return "Suhasini Pandita".

Similarly, xmlObj.childNodes(3).childNodes(1).firstChild.text will
return "140,000".
Attributes
In the XML file, the <employee> tag has 3 attributes. An attribute can
be accessed using childNodes(i).getAttribute("AttributeName"). Thus,
xmlObj.childNodes(0).getAttribute("id") will return "001".
xmlObj.childNodes(1).getAttribute("age") will return "24". And
xmlObj.childNodes(2).getAttribute("sex") will return "F".
Go to page: 1 2 Next
If you liked this article, share the love:

1.
Read and Display Server-Side XML with

JavaScript
Project: An XML-based JavaScript Ticker
There are many more properties and methods available, and, using
these, you can create many client side applications. The main
advantage of using XML with JavaScript is that editing data becomes
very easy. As XML is structured, it makes the management of content
very easy. One example is a folder-tree menu. Another one is a
JavaScript Ticker. You can find the full code an an example of this XML-
based JavaScript Ticker at DynamicDrive.
We will create a XML based JavaScript Ticker that can display any
number of messages. The ticker reads its contents (i.e. the ticker
style), the text to be displayed, and the link for that particular
message from an XML file. We'll call the XML file ticker_items.xml.
The structure of the XML document is as follows:

<?xml version="1.0"?>
<ticker>
<tickerstyle
pause = "true" / "false" "true" for pause onMouseOver
timeout = positive integer The delay in seconds b/w
messages
border = positive integer The border width of Ticker
bordercolor = #HexColor The border color of Ticker
background = #HexColor The background color of Ticker
width = positive integer Ticker width
height = positive integer Ticker height
/>
<tickerlinkstyle>
<mouseout
font = "verdana,arial,helvetica..." Ticker link font
color = #HexColor Ticker link color
decoration = "none" / "underline" /
"underline + overline" Ticker link style
weight = "normal" / "bold" Ticker link weight
size = <positive integer>pt Ticker link size
/>
<mouseover
font = "verdana,arial,hevetica..." Ticker link font
color = #HexColor Ticker link color
decoration = "none" / "underline" /
"underline + overline" Ticker link style
weight = "normal" / "bold" Ticker link weight
size = <positive integer>pt Ticker link size
/>
</tickerlinkstyle>
<tickeritem
URL = A valid URL Ticker link URL
target = "_blank" / "_top" / "_self" /
<any other valid target name> Ticker link target
> Ticker item 1 text </tickeritem>
<tickeritem ...> Ticker item 2 text </tickeritem>
...
</ticker>
XML Ticker Script

<script language="JavaScript1.2">
// XML Ticker JavaScript
// (c) 2002 Premshree Pillai
// http://www.qiksearch.com
// Use freely as long as all messages are as it is
// Location of script:
http://www.qiksearch.com/javascripts/xml/ticker.htm
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
function loadXML(xmlFile)
{
xmlDoc.async="false";
xmlDoc.onreadystatechange=verify;
xmlDoc.load(xmlFile);
ticker=xmlDoc.documentElement;
}
function verify()
{
if (xmlDoc.readyState != 4)
{
return false;
}
}
loadXML('ticker_items.xml');
document.write('<style type="text\/css">');
document.write('.ticker_style{font-family:' +
ticker.childNodes(1).childNodes(0).getAttribute('font') + ';
font-size:' +
ticker.childNodes(1).childNodes(0).getAttribute('size')
+ '; color:' +
ticker.childNodes(1).childNodes(0).getAttribute('color') +
'; font-weight:' +
ticker.childNodes(1).childNodes(0).getAttribute('weight') +
'; text-decoration:' +
ticker.childNodes(1).childNodes(0).getAttribute('decoration')
+ '}');document.write('.ticker_style:hover{font-family:' +
ticker.childNodes(1).childNodes(1).getAttribute('font') +
'; font-size:' +
ticker.childNodes(1).childNodes(1).getAttribute('size')
+ '; color:' +
ticker.childNodes(1).childNodes(1).getAttribute('color') +
'; font-weight:' +
ticker.childNodes(1).childNodes(1).getAttribute('weight') +
'; text-decoration:' +
ticker.childNodes(1).childNodes(1).getAttribute
('decoration') + '}<br>');
document.write('</style>');
document.write('<table style="border:' +
ticker.childNodes(0).getAttribute('border')
+ ' solid ' + ticker.childNodes(0).getAttribute('bordercolor') +
'; background:' + ticker.childNodes(0).getAttribute('background') +
'; width:' + ticker.childNodes(0).getAttribute('width') + '; height:'
+ ticker.childNodes(0).getAttribute('height') + '">
<tr><td><div id="ticker_space"></div>
</td></tr></table>');
var item_count=2;
var timeOutVal=(ticker.childNodes(0).getAttribute('timeout'))*1000;
var original_timeOutVal=timeOutVal;
var isPauseContent;
if(ticker.childNodes(0).getAttribute('pause')=="true")
{
isPauseContent=' onmouseover="setDelay();" onmouseout="reset();"';
}
else
{
isPauseContent='';
}
function setTicker()
{
document.all.ticker_space.innerHTML='<center><a href="' +
ticker.childNodes(item_count).getAttribute('URL') + '" target="'
+ ticker.childNodes(item_count).getAttribute('target') +
'" class="ticker_style"' + isPauseContent + '>' +
ticker.childNodes(item_count).firstChild.text + '</a></center>';
if(item_count==ticker.childNodes.length-1)
{
item_count=2;
}
else
{
item_count++;
}
setTimeout("setTicker()",timeOutVal);
}
function setDelay()
{
timeOutVal=10000000000000;
item_count--;
}
function reset()
{
timeOutVal=original_timeOutVal;
setTicker();
}
setTicker();
</script>
As you can see in the source code, the ticker reads:
all the messages to be displayed,

the links for each message,
the target for each URL,
the ticker static style,
the roll-over style,
border width, color and background,
the delay between messages, and more, from the XML file.
So if you want to change any parameter of the Ticker, all you have to
do is make necessary changes in the XML file.
The ticker shown here is a basic ticker that rotates messages at an

interval that is specified in the XML file. There are many effects you
could add to the ticker like 'Fading message' or 'Teletypewriter'. You
could also add features to change the ticker speed, or to list all
messages in an instant!
Difference between GET and POST methods
• Fundamental Difference is probably the Visibility - GET request is sent via the URL string
(appended to the URI with a question-mark as separator), which is visible whereas POST request is
encapsulated in the body of the HTTP request and can't be seen.
• Length - Since, GET request goes via URL, so it has a limitation for its length. It can't be more than
255 characters long (though this is browser dependent, but usually the max is 255 characters only).
Whereas no such maximum length limitation holds for the POST request for the obvious reason that
it becomes a part of the body of the HTTP request and there is no size limitation for the body of an
HTTP request/response.
• Performance - GET request is comparatively faster as it's relatively simpler to create a GET request
and the time spent in the encapsulation of the POST request in the HTTP body is saved in this case.
In addition, the maximum length restriction facilitates better optimization of GET implementation.
• Type of Data - GET request is sent via URL string and as we all know that URL can be text-only, so
GET can carry only text data whereas POST has no such restriction and it can carry both text as well
as binary data.
• Caching/Bookmarking - again for the obvious reason that a GET request is nothing but an URL hence
it can be cached as well as Bookmarked. No such luxuries with a POST request.
• FORM Default - GET is the default method of the HTML FORM element. To submit a FORM using POST
method, we need to specify the method attribute and give it the value "POST".
• Data Set - GET requests are restricted to use ASCII characters only whereas POST requests can use
the 'enctype' attribute with a value "multipart/form-data" to use the Universal Multiple-Octet Coded
Character Set (UCS).
When to use what?
HTML 4.01 Specification says in the section 17.13.1 Form Submission method:
The "get" method should be used when the form is idempotent (i.e., causes no side-effects). Many database
searches have no visible side-effects and make ideal applications for the "get" method.
If the service associated with the processing of a form causes side effects (for example, if the form
modifies a database or subscription to a service), the "post" method should be used.
I think the above W3C Recommendation makes it pretty clear when to use the GET method and when to use
the POST method.
window.getSelection
Table of contents
1. 1. Summary
2. 2. Syntax
3. 3. Example
4. 4. Notes
5. 5. Specification
6. 6. See also
« Gecko DOM Reference
Summary
Returns a selection object representing the range of text selected by the user.
Syntax
selection = window.getSelection() ;
• selection is a Selection object.
Example
function foo() {
var selObj = window.getSelection();
alert(selObj);
var selRange = selObj.getRangeAt(0);
// do stuff with the range
}
Notes
In JavaScript, when a selection object is passed to a function expecting a string (like window.alert
or document.write ), a string representation of it (i.e. the selected text) is passed instead. This
makes the selection object appear like a string, when it is really an object with its own properties and
methods. Specifically, the return value of calling the toString() method of the Selection object is
passed.
In the above example, selObj is automatically "converted" when passed to window.alert. However, to
use a JavaScript String property or method such as length or substr, you must manually call the
toString method.
The difference between setTimeout and setInterval
setTimeout: Run once and then stop.

Code sample: var timerA = setTimeout("AFunction()",1000);
How to loop: function AFunction(){/*..Some codes..*/ timerA =
setTimeout("AFunction()",1000);}
How to stop: clearTimeout(timerA)
;
Example: Tue Oct 7 09:40:45 UTC+0530 2008
Example Codes:
<i id="lblstdate">timer A</i>

<script type="text/javascript">
function AFunction(){
document.getElementById('lblstdate').innerHTML=(new Date()).toString();
setTimeout("AFunction()",1000)
}
AFunction();
</script>
setInterval: Run by loop.

Code sample: var timerB = setInterval("BFunction()",1000);
How to loop: It loops automatically.
How to stop: clearInterval(timerB);
Example: Tue Oct 7 09:40:45 UTC+0530 2008
Example codes:
<i id="lblsidate">timer B</i>
function BFunction()
{
document.getElementById('lblsidate').innerHTML=(new Date()).toString();
}
var timerB = setInterval("BFunction()",1000);
//clearInterval(timerB)
</script>
By javascript manual at 9/8/2008 with 0 review(s).

javascript window maximization
<body onload="window.resizeTo(window.screen.width - 4,window.screen.height-

50);window.moveTo(-4,-4)">
IE only.
javascript autocomplete feature of input
<input type="text" autocomplete="on" />

<input type="text" autocomplete="off" />
Note:
The autocomplete attribute will cost failture of passing W3C validation though this
attribute works in most browsers.
javascript get user selected text
IE version:
document.selection.createRange().duplicate().text;
Firefox version:
document.getSelection();
For all browser selected():

<input type="button" onclick="alert(selected())" />
function selected(){
if (document.selection) return document.selection.createRange().duplicate().text;
else return document.getSelection();
}
</script>
javascript to check opened window is closed or not
var win = window.open('http://www.royh.cn');

alert(win.closed);
return boolean
javascript get millisecond or microsecond
var n1 = new Date("2008-3-25".replace(/-/g, "\/")).getTime();

var n2 = (new Date()).getTime();
javascript move to next input when ENTER key is pressed
<input onkeydown="if(event.keyCode==13)event.keyCode=9" name="txt1" />

<input onkeydown="if(event.keyCode==13)event.keyCode=9" name="txt2" />
keyCode = 13 is ENTER pressed event

keyCode = 9 is TAB key
Unfortunately, this is IE only. For firefox, it raises the error 'setting a property that has
only a getter', beacuase of read-only property of keyCode.
Test:
Press Enter here
javascript turn off ime(english letters only)
<input style="ime-mode:disabled" />

IE only?
javascript view webpages' HTML source
<input type="button" value="View" onclick="window.location = 'view-source:'+

'http://www.royh.cn/'" />
Firefox only?

javascript forbid to use right click/save/select/paste
Forbid to use mouse right click:

document.oncontextmenu = function() { return false;}
Forbid to save webpages:

<noscript><iframe src="*.htm"></iframe></noscript>
Forbid to select text:

<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return
false" onselect="document.selection.empty()" oncopy="document.selection.empty()"
onbeforecopy="return false"onmouseup="document.selection.empty()>
Forbid to paste:
<input type=text onpaste="return false">
javascript tips 2
Jump to postion quickly:

obj.scrollIntoView(true)
Anchor:
<a name="first">
<a href="#first">anchors</a>
Transfer variables:
location.search();
Make div or elements editable:

document.getElementById('divid').contenteditable=true
Execute menu command:

obj.execCommand
Transparency background:
<IFRAME src="1.htm" width=300 height=180 allowtransparency></iframe>
Get current style content:

obj.style.cssText
HTML lable:
document.documentElement.innerHTML
The first style label:

document.styleSheets[0]
The first style of stylesheet:

document.styleSheets[0].rules[0]
Avoid that when click empty link, page scrolls to top:

<a href="javascript:function()">word</a>
Get last page url:

document.referrer
javascript tips 02
Display in one row, Hide element's focus, Wrap line base on width, Auto refresh
webpages, Email link with body and subject filled ... view full content
javascript change css style dynamically
document.all.css.href = "a.css";
document.all.css.href = "b.css";
document.all.css.href = "c.css";
document.all.css.href = "d.css";
javascript exchange row/col/tr/td of table
var tb = document.getElementById("tableid");
tb.moveRow(2,1)
javascript get parent objects or elements
obj.parentElement(dhtml)
obj.parentNode(dom)
javascript set time out
timer=setInterval('scrollwindow()',delay);
clearInterval(timer);
The way to find objects or elements
document.getElementsByName("r1");
document.getElementById(id);
Javascript tips 1
Windows active element:

document.activeElement
Bind event:
document.captureEvents(Event.KEYDOWN);
Visit window elements:

document.all("txt").focus();
document.all("txt").select();
Window command:
document.execCommand
Context menu event:

document.oncontextmenu
Create element:
document.createElement("SPAN");
Get element by mouse:
document.elementFromPoint(event.x,event.y).tagName=="TD
document.elementFromPoint(event.x,event.y).appendChild(ms)
Window images:
document.images[index]
Bind window event:

document.onmousedown=scrollwindow;
Object bind event:

document.all.xxx.detachEvent('onclick',a);
Get plugins' count:

navigator.plugins
Get variables' type:

typeof($js_libpath) == "undefined"
Dropdown:
select.options[index]
select.options.length
Javascript event return value and mouse position
Event return value is:

event.returnValue
Get mouse position of event:

event.x
event.y
Javascript event keys

event.keyCode
event.shiftKey
event.altKey
event.ctrlKey
Javascript release event capture
event.srcElement.setCapture();
event.srcElement.releaseCapture();
Javascript event source objects
event.srcElement.tagName
event.srcElement.type
javascript xmp Description
See pre. ... view full content

javascript xml XMLDocument
This is a reference to the Microsoft XML document object. This object resembles the
W3C DOM core document object in many ways, but Microsoft provide ... view full
content
javascript xml src
Contains the URL of the external XML document loaded into the data island. To load a
new document after the fact, assign a new URL to this property. ... view full content
javascript xml Description
The xml object reflects the Microsoft proprietary xml element, creating a so-called XML
data island inside an HTML document. ... view full content
javascript with Description
The content of 'with' chapter is same as javascript Operators with ... view full content
javascript window handleEvent[ ]
Instructs the window object to accept and process the event whose specifications are
passed as the parameter to the method ... view full content
javascript window stop( )
Halts the download of external data of any kind. This method is the same as clicking the
browser's Stop button. ... view full content
javascript window sizeToContent( )
Lets the browser determine the optimum window size to display the window's content.
Suitable for subwindows that display a limited amount of information. ... view full
content
javascript window showModelessDialog( )
Displays a special window that remains atop all browser windows, yet allows the user to
interact with other open windows and their content. ... view full content
javascript window showModalDialog( )
Displays a special window that remains atop all browser windows until
the user explicitly closes the dialog window. This kind of window is
different ... view full content
javascript window showHelp( )
Displays a WinHelp window with the .hlp document specified with the URL parameter. ...
view full content
javascript window setTimeout( )
Starts a one-time timer that invokes the scriptExpression or functionReference after a

delay of msecs. Other scripts can run while the browser waits to invoke the expression.
... view full content
javascript window setInterval( )

Starts a timer that continually invokes the expression every msecs. Other scripts can
run in the time between calls to expression. This method is useful for starting animation
sequences that must reposition an element along a path at a fixed rate of ... view full
content
javascript window setCursor( )
Changes the cursor to a desired type. This method is an alternate to the style sheet
cursor attribute. Starting with Netscape 6.2, a cursor changed ... view full content
javascript window scrollTo( )
Scrolls the document in the window to a specific scrolled pixel position. # Horizontal
position in pixels of the window.
# Vertical position in pixels of the window. ... view full content
javascript window scrollByLines( ), scrollByPages( )
Scroll the document in the window downward (positive value) or upward

(negative value) by the increment of lines or pages. The methods
perform the s ... view full content
javascript window scrollBy( )
Scrolls the document in the window by specified pixel amounts along both axes. To
adjust along only one axis, set the other value to zero. Positive ... view full content
javascript window scroll( )
Sets the scrolled position of the document inside the current window or frame. To return
the document to its unscrolled position, set both parameter ... view full content
javascript window routeEvent( )
Used inside an event handler function, this method directs Navigator 4 (only) to let the
event pass to its intended target object. ... view full content
javascript window resizeTo( )

This is a convenience method that adjusts the height and width of the window to
specific pixel sizes. The top and left edges of the window remain fixed ... view full
content
javascript window resizeBy( )
This is a convenience method that shifts the width and height of the window by
specified pixel amounts. To adjust along only one axis, set the other ... view full content
javascript window removeEventListener( )
removeEventListener ( "eventType", listenerFunction, useCapture ). Netscape 6

implements this W3C DOM event model method for the window object. ... view full
content
javascript window releaseEvents( )
The opposite of window.captureEvents( ) , this method turns off event capture at the
window level for one or more specific events named in the para ... view full content
javascript window prompt( )
Displays a dialog box with a message, a one-line text entry field, and two clickable
buttons. Script execution halts while the dialog box appears. T ... view full content
javascript window print( )
Starts the printing process for the window or frame. A user must still confirm the print
dialog box to send the document to the printer. This method ... view full content
javascript window open( )
Opens a new window. You can specify a URL to load into the new window or set that
parameter to an empty string to allow scripts to document.write( ) into that new
window. ... view full content
javascript window navigate( )

Loads a new document into the window or frame. This is the
IE-specific way of assigning a value to the
window.location.href property. ... view full content
javascript window moveTo( )
This is a convenience method that shifts the location of the current

window to a specific coordinate point. The moveTo(
) method uses the screen c ... view full content
HTML DOM Window Object
Window Object
The Window object is the top level object in the JavaScript hierarchy.
The Window object represents a browser window.
A Window object is created automatically with every instance of a <body> or <frameset> tag.
IE: Internet Explorer, F: Firefox, O: Opera.
Window Object Collections

Collection Description IE F O
frames[] Returns all named frames in the window 4 1 9
Window Object Properties

Property Description IE F O
closed Returns whether or not a window has been closed 4 1 9
defaultStatus Sets or returns the default text in the statusbar of the window 4 No 9
document See Document object 4 1 9
history See History object 4 1 9
length Sets or returns the number of frames in the window 4 1 9
location See Location object 4 1 9
name Sets or returns the name of the window 4 1 9
opener Returns a reference to the window that created the window 4 1 9
outerHeight Sets or returns the outer height of a window No 1 No
outerWidth Sets or returns the outer width of a window No 1 No
pageXOffset Sets or returns the X position of the current page in relation to the No No No
upper left corner of a window's display area
pageYOffset Sets or returns the Y position of the current page in relation to the No No No
upper left corner of a window's display area
parent Returns the parent window 4 1 9
personalbar Sets whether or not the browser's personal bar (or directories bar)
should be visible
scrollbars Sets whether or not the scrollbars should be visible
self Returns a reference to the current window 4 1 9
status Sets the text in the statusbar of a window 4 No 9
statusbar Sets whether or not the browser's statusbar should be visible
toolbar Sets whether or not the browser's tool bar is visible or not (can only
be set before the window is opened and you must have
UniversalBrowserWrite privilege)
top Returns the topmost ancestor window 4 1 9
Window Object Methods

Method Description IE F O
alert() Displays an alert box with a message and an OK button 4 1 9
blur() Removes focus from the current window 4 1 9
clearInterval() Cancels a timeout set with setInterval() 4 1 9
clearTimeout() Cancels a timeout set with setTimeout() 4 1 9
close() Closes the current window 4 1 9
confirm() Displays a dialog box with a message and an OK and a Cancel button 4 1 9
createPopup() Creates a pop-up window 4 No No
focus() Sets focus to the current window 4 1 9
moveBy() Moves a window relative to its current position 4 1 9
moveTo() Moves a window to the specified position 4 1 9
open() Opens a new browser window 4 1 9
print() Prints the contents of the current window 5 1 9
prompt() Displays a dialog box that prompts the user for input 4 1 9
resizeBy() Resizes a window by the specified pixels 4 1 9
resizeTo() Resizes a window to the specified width and height 4 1.5 9
scrollBy() Scrolls the content by the specified number of pixels 4 1 9
scrollTo() Scrolls the content to the specified coordinates 4 1 9
setInterval() Evaluates an expression at specified intervals 4 1 9
setTimeout() Evaluates an expression after a specified number of milliseconds 4 1 9
HTML DOM Document Object
Document Object
The Document object represents the entire HTML document and can be used to access all elements in a
page.
The Document object is part of the Window object and is accessed through the window.document property.
IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).
Document Object Collections

Collection Description IE F O W3C
anchors[] Returns a reference to all Anchor objects in the 4 1 9 Yes
document
forms[] Returns a reference to all Form objects in the 4 1 9 Yes
document
images[] Returns a reference to all Image objects in the 4 1 9 Yes
document
links[] Returns a reference to all Area and Link objects in the 4 1 9 Yes
document
Document Object Properties

Property Description IE F O W3C
body Gives direct access to the <body> element
cookie Sets or returns all cookies associated with the current 4 1 9 Yes
document
domain Returns the domain name for the current document 4 1 9 Yes
lastModified Returns the date and time a document was last 4 1 No No
modified
referrer Returns the URL of the document that loaded the 4 1 9 Yes
current document
title Returns the title of the current document 4 1 9 Yes
URL Returns the URL of the current document 4 1 9 Yes
Document Object Methods

Method Description IE F O W3C
close() Closes an output stream opened with the 4 1 9 Yes
document.open() method, and displays the
collected data
getElementById() Returns a reference to the first object with the 5 1 9 Yes
specified id
getElementsByName() Returns a collection of objects with the specified 5 1 9 Yes
name
getElementsByTagName() Returns a collection of objects with the specified 5 1 9 Yes
tagname
open() Opens a stream to collect the output from any 4 1 9 Yes
document.write() or document.writeln() methods
write() Writes HTML expressions or JavaScript code to a 4 1 9 Yes
document
writeln() Identical to the write() method, with the addition of 4 1 9 Yes
writing a new line character after each expression
HTML DOM Objects

Follow the links to learn more about the objects and their collections, properties, methods and events.
Contain lots of examples!
Object Description
Document Represents the entire HTML document and can be used to access all elements in
a page
Anchor Represents an <a> element
Area Represents an <area> element inside an image-map
Base Represents a <base> element
Body Represents the <body> element
Button Represents a <button> element
Event Represents the state of an event
Form Represents a <form> element
Frame Represents a <frame> element
Frameset Represents a <frameset> element
Iframe Represents an <iframe> element
Image Represents an <img> element
Input button Represents a button in an HTML form
Input checkbox Represents a checkbox in an HTML form
Input file Represents a fileupload in an HTML form
Input hidden Represents a hidden field in an HTML form
Input password Represents a password field in an HTML form
Input radio Represents a radio button in an HTML form
Input reset Represents a reset button in an HTML form
Input submit Represents a submit button in an HTML form
Input text Represents a text-input field in an HTML form
Link Represents a <link> element
Meta Represents a <meta> element
Option Represents an <option> element
Select Represents a selection list in an HTML form
Style Represents an individual style statement
Table Represents a <table> element
TableData Represents a <td> element
TableRow Represents a <tr> element
Textarea Represents a <textarea> element

Satya New Appl Javascript

Uploaded by

Copyright:

Available Formats

Satya New Appl Javascript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Satya New Appl Javascript

Uploaded by

Copyright:

Available Formats

Disable Enter Key Within Forms

Highlight an Image on Mouseover

<img src="E:/satya/images/C2_0512.JPG" WIDTH="227" HEIGHT="177" BORDER="0" ALT=""

Disappearing Default Form Text

Manipulating the XML file data using JavaScript

You can load a XML fie from JavaScript like this:

Now the XML file can be loaded:

Display The Contents of the XML File

Children and Nodes

The numbering of children (as is usual in all languages) starts from 0

We can find the number of children a tag has by using the

The number of children of <turnover> tag (here, 3) can be found by

Here we use childNodes(3) because <turnover> is the 3rd child of

Test for Children

Thus, xmlObj.childNodes(3).hasChildNodes() will return true.

Get Tag Name

You can get the tag name of a child using childNodes(i).tagName.

xmlObj.childNodes(2).firstChild.text will return "Suhasini Pandita".

If you liked this article, share the love:

Read and Display Server-Side XML with

The structure of the XML document is as follows:

XML Ticker Script

As you can see in the source code, the ticker reads:

all the messages to be displayed,

The ticker shown here is a basic ticker that rotates messages at an

When to use what?

The difference between setTimeout and setInterval

setTimeout: Run once and then stop.

<i id="lblstdate">timer A</i>

setInterval: Run by loop.

By javascript manual at 9/8/2008 with 0 review(s).

<body onload="window.resizeTo(window.screen.width - 4,window.screen.height-

By javascript manual at 3/31/2008 with 0 review(s).

javascript autocomplete feature of input

<input type="text" autocomplete="on" />

javascript get user selected text

For all browser selected():

By javascript manual at 3/28/2008 with 0 review(s).

javascript to check opened window is closed or not

var win = window.open('http://www.royh.cn');

By javascript manual at 3/27/2008 with 0 review(s).

javascript get millisecond or microsecond

var n1 = new Date("2008-3-25".replace(/-/g, "\/")).getTime();

javascript move to next input when ENTER key is pressed

<input onkeydown="if(event.keyCode==13)event.keyCode=9" name="txt1" />

keyCode = 13 is ENTER pressed event

Press Enter here

By javascript manual at 3/25/2008 with 0 review(s).

javascript turn off ime(english letters only)

<input style="ime-mode:disabled" />

By javascript manual at 3/24/2008 with 0 review(s).

javascript view webpages' HTML source

<input type="button" value="View" onclick="window.location = 'view-source:'+

By javascript manual at 3/24/2008 with 0 review(s).

Forbid to use mouse right click:

Forbid to save webpages:

Forbid to select text:

By javascript manual at 3/23/2008 with 0 review(s).

Jump to postion quickly:

Make div or elements editable: