Month: June 2010

Document Object Model :: JavaScript Tutorial

Posted on Updated on

Hello All …

Hope everything is going good at your end …

today we will explore something about Document Object Model (DOM). From last few days i’m working on javascript and hence i read some good articles about script and dom…i learned alot and now sharing with you …

Introduction

The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

With the Document Object Model, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions

The DOM is a programming API for documents. It is based on an object structure that closely resembles the structure of the documents it models. For instance, consider this table, taken from an HTML document:

<TABLE>
<TBODY>
<TR>
<TD>Shady Grove</TD>
<TD>Aeolian</TD>
</TR>
<TR>
<TD>Over the River Charlie</TD>
<TD>Dorian</TD>
</TR>
</TBODY>
</TABLE>

graphical representation of the DOM of the example table

What is DOM Tree

Consider the following code snippet of HTML taken from a regular HTML document.

<p title="The test paragraph">This is a sample of some <b>HTML you might<br>have</b> in your document</p>

In your browser, this renders as this (hold your mouse over the paragraph to see the title – most browsers display it as a tooltip, some display it in the status bar):

This is a sample of some HTML you might
have
in your document

The DOM tree views this (simplified) as follows:

                                              P
                               _______________|______________
                              |                              |
                          childNodes                    attributes
                ______________|___________                   |
               |              |           |            title = 'The test paragraph'
'This is a sample of some '   B   ' in your document'
                              |
                          childNodes
                    __________|_______
                   |          |       |
           'HTML you might'   BR   'have'

Of course, the tree also extends above the ‘P’ from window.document, through the HTML element, down through the body element, then through any other container elements to the paragraph.

The parts of the DOM tree are known as nodes. The ‘P’, ‘B’ and ‘BR’ nodes are element nodes, childNodesand attributes are collections, the title='The test paragraph' pair is an attribute node, and the text strings are text nodes.

Referencing the element nodes

Using the DOM, there are several ways that we could reference the paragraph. We can use getElementsByTagName to reference all paragraphs, then choose the one we want. If the paragraph were to be given an id, we could also use getElementById:

document.getElementById('id of paragraph')
document.getElementsByTagName('p')[indexOfParagraph]

If we assigned the paragraph an id so that we could use getElementById, the id='elementID' pair would appear in the attributes collection, along side title='The test paragraph' in the tree diagram above. Note that if the document is served with an XML based content-type header, getElementsByTagNamebecomes case sensitive.

NOTE: getElementsByTagName does not return a true collection, it returns an object with element index and ‘length’ properties. This object keeps itself up to date, so if an element it references is deleted or added, it will automatically change its item references to reflect that change.

We could even walk the entire DOM tree from the document object, for example:

window.document.childNodes[0].childNodes[1].childNodes[4]

In this case, window.document.childNodes[0] should be the HTML element, as it is the first tag in the document (assuming there is no doctype tag), and window.document.childNodes[0].childNodes[1]should be the body tag, as the head element will be the first child of the HTML element. Alternatively, there is a shortcut to the HTML element: document.documentElement so we could use this:

window.document.documentElement.childNodes[1].childNodes[4]

There is also a shortcut to the BODY element: document.body so we could use this:

window.document.body.childNodes[4]

Those last three examples are based on a simple page structure, where the paragraph is a direct child of the body element. Neither of these would be correct in the current document as the document structure is far more complex, also using DIV elements as parents of the paragraph.

The techniques used in those examples can be unreliable. Most browsers will correctly view the blank space between tags as a text node containing only white space characters (such as space, line-break or tab), even if the blank space is not rendered, such as a gap in between a tag or a blank gap in betweentags. However, some browsers (mainly Internet Explorer) will not view this empty space as a text node at all.

This means that the childNodes collection will be different lengths in these different browsers. If you are trying to walk the DOM tree to the next element node, for example, it may be worth checking each entry in the childNodes collection to see if its nodeType is 1, or to use node.getElementsByTagName.

Because of this, and the fact that the structure of the DOM tree is designed to change as elements are moved, added or removed, the only reliable way to reference an element is using its ID:

var theParagraph = document.getElementById('id of element')

The first entry of the childNodes collection can be accessed using the shortcut firstChild, and the last can be accessed using lastChild. node.nextSibling references the next entry in the parent node’s childNodes collection and node.previousSibling references the previous one. To reference the parent node, we use node.parentNode. Note also that all element nodes have the getElementsByTagName method to help reference elements within them. This means that from any node, it is possible to reference any of the other notes around it.

Referencing the attribute node

To reference the title=’The test paragraph’ attribute pair, we use the attributes collection. Depending on the browser, this collection may be filled up in a variety of different ways, and many empty attribute pairs may exist in the collection. To find the correct attribute, we search through the attributes collection for an attribute whose nodeName matches what we want. The nodeName may be in any case in HTML documents (typically upper case) and should be case sensitive in XHTML and XML if served using an XML based MIME type.

for( var x = 0; x < theParagraph.attributes.length; x++ ) {
  if( theParagraph.attributes[x].nodeName.toLowerCase() == 'title' ) {
    window.alert( 'The value of the \'title\' attribute is: ' +
      theParagraph.attributes[x].nodeValue );
  }
}

An easy way to check the attribute node

If all you want to do is to check the value of an attribute, not manually edit its entry, it is easier to just use getAttribute.

window.alert( 'The value of the \'title\' attribute is: ' +
  theParagraph.getAttribute('title') );

Attribute names are case sensitive. For example, bgcolor must be written as bgColor.

Note that according to the specification, getAttribute should always return a string. However, this makes it impossible to differentiate between empty attributes and unspecified attributes. For this reason, browsers will return null for unspecified attributes, even though this is wrong. Opera 7-8 returns an empty string – this was changed to null in Opera 9. As a result, code that checks for attributes and incorrectly tests against null will fail in Opera 7 and 8, because a string will never equate to null. There is no need to test against null, just check if get attribute failed to retrieve a value:

if(!element.getAttribute('attribute_name'))

Changing the attribute

The attributes of an element can be set or changed using setAttribute:

element.setAttribute('attributeName','attributeValue')
theParagraph.setAttribute('align','center')

Attribute names are case sensitive. For example, bgcolor must be written as bgColor.
You can also remove attributes, with a few exceptions, using removeAttribute:

theParagraph.removeAttribute('attributeName')

The event handler attributes are available as referenced functions (this is not the case for handlers added using DOM events), with their names matching the attribute name; element.onclick. These are read/write but must be written as a reference to a function, not as a direct string. They can also be written as a string using the Function constructor:

element.onclick = new Function(codeAsAString);

They may also be read as a string using the toString method of the function, but note that it will normally contain the anonymous function wrapper, and may not be available at all in browsers running on devices with limited capabilities, such as mobile phones. Note also that it will not be available at all if the attribute is not present:

var functioncode = element.onclick.toString();

The string value of the style attribute is available as a read/write string called cssText, which is a property of the style object, which itself is a property of the element. Note, however, that it is not supported very well; Safari does not support it up to version 1.1 (reading it produced the value null), Mozilla versions prior to 1.0 could not write to it, and iCab 3-, NetFront and Escape/Evo do not support it at all. To avoid problems with its use, a combination of cssText and getAttribute/setAttribute can be used. To read it:

var cssString;
cssString = element.style.cssText;
if( typeof(cssString) != 'string' ) {
  cssString = element.getAttribute('style');
}

To write it, simply set both versions, and the browser will use whichever one works:

var cssString = 'color:lime;font-weight:bold;';
element.style.cssText = cssString;
element.setAttribute('style',cssString);

Note that this will then prevent it from being read correctly if other styles are changed individually. If this will cause a problem, check if cssText is supported first:

var cssString = 'color:lime;font-weight:bold;';
if( typeof(element.style.cssText) == 'string' ) {
  element.style.cssText = cssString;
}
element.setAttribute('style',cssString);

Referencing the text nodes

To give a full example, I will try to reference the text node ‘HTML you might’. To do this, I will go through the second entry of the childNodes array of the ‘P’. This will be a reference to the ‘B’. I will then look at the firstChild (equivalent to the first entry in the childNodes collection) of the ‘B’ to reference the text node.

window.alert( 'The value of the text node is:\n' +
  theParagraph.childNodes[1].firstChild.nodeValue );

Also important to note is that although the specifications say that no matter how much text exists between tags, it should all be in one text node, in practice this is not always the case. In Opera 7-9.2x and Mozilla/Netscape 6+, if the text is larger than a specific maximum size, it is split into multiple text nodes. These text nodes will be next to each other in the childNodes collection of the parent element.

In Opera 7-9.2x, this maximum text node size is 32 KB. In Mozilla/Firefox/Netscape 6+, it is 4 KB. Although the normalize() method of the parent node(s) should be able to replace the multiple text nodes with a single text node containing all the text, this only works in Mozilla/Firefox/Netscape 6+. In Opera 7-9.2x it puts all of the text into a single node and then truncates that node to 32 KB, so the contents of all except the first node are lost. Running the normalize method can crash Internet Explorer 6 and does not exist in Internet Explorer 5 on Windows.

For this reason, I do not recommend trying to normalize. It is better to manipulate the contents of text nodes separately. In fact, you can create your own text nodes and add them to the childNodes collection. Although to the DOM, they will still appear as separate nodes, they will appear as a single piece of text in the document. Basically, you need to be aware that your text may be split into several nodes, if it is 4 KB or over, or if you have added extra text nodes in yourself. In order to get that text in a single variable, you may need to look through every child node, and if they are consecutive text nodes append them together to get the total string.

Creating new nodes and removing existing ones

This is what the DOM was truly created for. In order to create new nodes, we use a couple of methods of the document object to create the node. We then insert the node into the main DOM tree, at which point the browser will display it. We can also move existing nodes (like the test paragraph) simply by inserting them into the DOM tree somewhere else.

Note that when creating element nodes, the element name must be in lower case. Although in theory it should not be case sensitive with HTML, I have noticed some problems in Konqueror when using upper case with strict doctypes – see the top of this page. It will be case sensitive with XHTML (in all compliant browsers, not just Konqueror), and must be in lower case.

var theNewParagraph = document.createElement('p');
var theTextOfTheParagraph = document.createTextNode('Some content.');
theNewParagraph.appendChild(theTextOfTheParagraph);
document.getElementById('someElementId').appendChild(theNewParagraph);

We could also use insertBefore instead of appendChild, or even manually add the new element to the end of the end of the childNodes collection. Using replaceChild, we could also overwrite existing nodes. It is also possible to copy a node using cloneNode(true). This returns a copy of the node but does not automatically add it into the childNodes collection. Using element.removeChild(referenceToChildNode), we can remove existing nodes.

How about something even more complicated. What about adding HTML elements within the new element, instead of just plain text. Here, I will recreate the test sentence from above, one piece at a time.

//three elements are required: p, b, br
var theNewParagraph = document.createElement('p');
var theBoldBit = document.createElement('b');
var theBR = document.createElement('br');

//set up theNewParagraph
theNewParagraph.setAttribute('title','The test paragraph');

//prepare the text nodes
var theText1 = document.createTextNode('This is a sample of some ');
var theText2 = document.createTextNode('HTML you might');
var theText3 = document.createTextNode('have');
var theText4 = document.createTextNode(' in your document');

//put together the bold bit
theBoldBit.appendChild(theText2);
theBoldBit.appendChild(theBR);
theBoldBit.appendChild(theText3);

//put together the whole paragraph
theNewParagraph.appendChild(theText1);
theNewParagraph.appendChild(theBoldBit);
theNewParagraph.appendChild(theText4);

//insert it into the document somewhere
document.getElementById('someElementId').appendChild(theNewParagraph);

n case you were wondering how I managed to make those new paragraphs end up just above the links you clicked on, this is how.

The link you clicked on is in a paragraph. The paragraph is in a div (although this technique would work anywhere). The script is run in the event handler for the link. Therefore, in the handler function, ‘this’ refers to the link. The parentNode of the link is the paragraph – this.parentNode – and the parentNode of the paragraph is the div – this.parentNode.parentNode. I want to get the div to import the new paragraph node I have created above the paragraph the link is in, so I want to say this:

theDIV.insertBefore(theNewParagraph,theCurrentParagraph);

In JavaScript, this would be:

this.parentNode.parentNode.insertBefore(theNewParagraph,this.parentNode);

As for making them disappear when you click on them, when creating these paragraphs, I also assign an onclick event handler function that uses this.parentNode to reference the div, and then uses removeChild to delete the paragraph:

theNewParagraph.onclick = function () { this.parentNode.removeChild(this); };

Note that nodes belong to the document they were created in. So for example, if your page uses frames, and you create a paragraph node in one frame then attempt to add it to the document in another frame, it will not work. In theory you can use the document.importNode method to create a copy of it in the new document, but that method does not exist in Internet Explorer. If a script in one frame needs to create a node and append it to a document in another frame, it must use the document object for the destination frame when creating the node:

var newP = parent.frames['leftfr'].document.createElement('p');
parent.frames['leftfr'].document.body.appendChild(newP);

Using document fragments

It is also possible to deal with multiple nodes at the same time. Say for example that you want to create 10 paragraphs, and add them all to the document at the same time as each other, instead of one at a time. This can be done using a document fragment. The benefit of using this is that it creates fewer document reflows, and as a result it can improve performance for big changes.

A document fragment is like a normal element (such as a div), except that it cannot become a part of the document itself. If you try to append a document fragment to any part of a document, instead of appending the fragment, the browser will add the child nodes of the fragment. For example, you create 10 paragraphs, append them to a document fragment, then append the document fragment to the body of a document. Instead of appending the fragment to the body, it will add the 10 paragraphs as children of the body.

var frag = document.createDocumentFragment();
for( var i = 0, p; i < 10; i++ ) {
  p = document.createElement('p');
  p.appendChild(document.createTextNode('Paragraph '+(i+1)));
  frag.appendChild(p);
}
document.body.appendChild(frag);

There is still lot lot more to discuss but can’t do this on single post. I will post some more articles related to this topic to cover those things. I love javascript its really fun to play with dom …

Happy Development ..

free counters

U.S. Identifies Vast Mineral Riches in Afghanistan

Posted on

WASHINGTON — The United States has discovered nearly $1 trillion in untapped mineral deposits in Afghanistan, far beyond any previously known reserves and enough to fundamentally alter the Afghan economy and perhaps the Afghan war itself, according to senior American government officials.

The previously unknown deposits — including huge veins of iron, copper, cobalt, gold and critical industrial metals like lithium — are so big and include so many minerals that are essential to modern industry that Afghanistan could eventually be transformed into one of the most important mining centers in the world, the United States officials believe.

An internal Pentagon memo, for example, states that Afghanistan could become the “Saudi Arabia of lithium,” a key raw material in the manufacture of batteries for laptops and BlackBerrys.

The vast scale of Afghanistan’s mineral wealth was discovered by a small team of Pentagon officials and American geologists. The Afghan government and President Hamid Karzai were recently briefed, American officials said.

A bleak Ghazni Province seems to offer little, but a Pentagon study says it may have among the world’s largest deposits of lithium.

While it could take many years to develop a mining industry, the potential is so great that officials and executives in the industry believe it could attract heavy investment even before mines are profitable, providing the possibility of jobs that could distract from generations of war.

“There is stunning potential here,” Gen. David H. Petraeus, commander of the United States Central Command, said in an interview on Saturday. “There are a lot of ifs, of course, but I think potentially it is hugely significant.”

The value of the newly discovered mineral deposits dwarfs the size of Afghanistan’s existing war-bedraggled economy, which is based largely on opium production and narcotics trafficking as well as aid from the United States and other industrialized countries. Afghanistan’s gross domestic product is only about $12 billion.

“This will become the backbone of the Afghan economy,” said Jalil Jumriany, an adviser to the Afghan minister of mines.

American and Afghan officials agreed to discuss the mineral discoveries at a difficult moment in the war in Afghanistan. The American-led offensive in Marja in southern Afghanistan has achieved only limited gains. Meanwhile, charges of corruption and favoritism continue to plague the Karzai government, and Mr. Karzai seems increasingly embittered toward the White House.

So the Obama administration is hungry for some positive news to come out of Afghanistan. Yet the American officials also recognize that the mineral discoveries will almost certainly have a double-edged impact.

Instead of bringing peace, the newfound mineral wealth could lead the Taliban to battle even more fiercely to regain control of the country.

The corruption that is already rampant in the Karzai government could also be amplified by the new wealth, particularly if a handful of well-connected oligarchs, some with personal ties to the president, gain control of the resources. Just last year, Afghanistan’s minister of mines was accused by American officials of accepting a $30 million bribe to award China the rights to develop its copper mine. The minister has since been replaced.

Minerals in Afghanistan

Endless fights could erupt between the central government in Kabul and provincial and tribal leaders in mineral-rich districts. Afghanistan has a national mining law, written with the help of advisers from the World Bank, but it has never faced a serious challenge.

“No one has tested that law; no one knows how it will stand up in a fight between the central government and the provinces,” observed Paul A. Brinkley, deputy undersecretary of defense for business and leader of the Pentagon team that discovered the deposits.

At the same time, American officials fear resource-hungry China will try to dominate the development of Afghanistan’s mineral wealth, which could upset the United States, given its heavy investment in the region. After winning the bid for its Aynak copper mine in Logar Province, China clearly wants more, American officials said.

Another complication is that because Afghanistan has never had much heavy industry before, it has little or no history of environmental protection either. “The big question is, can this be developed in a responsible way, in a way that is environmentally and socially responsible?” Mr. Brinkley said. “No one knows how this will work.”

With virtually no mining industry or infrastructure in place today, it will take decades for Afghanistan to exploit its mineral wealth fully. “This is a country that has no mining culture,” said Jack Medlin, a geologist in the United States Geological Survey’s international affairs program. “They’ve had some small artisanal mines, but now there could be some very, very large mines that will require more than just a gold pan.”

The mineral deposits are scattered throughout the country, including in the southern and eastern regions along the border with Pakistan that have had some of the most intense combat in the American-led war against the Taliban insurgency.

free counters

Date Formatting in C#

Posted on

Hello all.

hope doing well …

here is another tip related to C# programming …. i found it useful so sharing with you people …   this is how you can format date in different format in asp.net / C#

the usage is as follows

<%= String.Format(“{specifier}”, DateTime.Now) %>

where the possible specifiers are given below.

Specifier Description Output
d Short Date 15/05/2010
D Long Date 15 June 2010
t Short Time 21:08
T Long Time 21:08:59
f Full date and time 15 June 2010 21:08
F Full date and time (long) 15 June 2010 21:08:59
g Default date and time 15/06/2010 21:08
G Default date and time (long) 15/06/2010 21:08:59
M Day / Month 15 June
r RFC1123 date Tue, 15 June 2010 21:08:59 GMT
s Sortable date/time 2010-06-15 21:08:59
u Universal time, local timezone 2010-06-15 21:08:59Z
Y Month / Year June 2010
dd Day 15
ddd Short Day Name Sun
dddd Full Day Name Sunday
hh 2 digit hour 09
HH 2 digit hour (24 hour) 21
mm 2 digit minute 08
MM Month 04
MMM Short Month name Jun
MMMM Month name June
ss seconds 59
tt AM/PM PM
yy 2 digit year 07
yyyy 4 digit year 2010
: seperator, e.g. {0:hh:mm:ss} 09:08:59
/ seperator, e.g. {0:dd/MM/yyyy} 15/06/2010

happy development 🙂

free counters

Zero Point, 15-June-2K10

Posted on Updated on


free counters

Zero Point, 11-June-2K10

Posted on Updated on

free counters