my quote of the day

When someone explains a thing to me,
and if I say, "Yeah, I understood.",
what does it mean?

It means,
I did not find anything that I have to disagree with,
often for the reason that I lack in the knowledge to start an argument,
therefore I think I will believe what you said for now,
and just in case you might be thinking of confirming it with me,
the chance of repeating just what you said in my own words is
as impossible as Republicans and Democrats work together in harmony

Study Notes

Unobtrusive code implies a complete separation of HTML content: the data coming from the server and the JavaScript code used to make it all dynamic. Modern unobtrusive code consists Document Object Model (DOM) and JavaScript events.

Ajax

Ajax relies primarily on two technologies to work: JavaScript and the XMLHttpRequest. At the heart of Ajax is the ability to communicate with a Web server asynchronously without taking away the user’s ability to interact with the page. The XMLHttpRequest is what makes this possible. Ajax makes it possible to update a page without a refresh. By Ajax, we can refresh a particular DOM object without refreshing the full page.


In here, Ajax is best described anywhere else:
http://www.codeproject.com/KB/ajax/AjaxTutorial.aspx

Example given in this page:

1. The JavaScript function handEvent() will be invoked when an event occurred on the HTML element.
2. In the handEvent() method, an instance of XMLHttpRequest object is created.
3. The XMLHttpRequest object organizes an XML message within about the status of the HTML page, and then sends it to the Web server.
4. After sending the request, the XMLHttpRequest object listens to the message from the Web server.
5. The XMLHttpRequest object parses the message returned from the Web server and updates it into the DOM object.

Source:

var xmlHttpRequest;

function GetTime()
{
    //create XMLHttpRequest object
    xmlHttpRequest = (window.XMLHttpRequest) ?
new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");

    //If the browser doesn't support Ajax, exit now
    if (xmlHttpRequest == null)
return;

    //Initiate the XMLHttpRequest object
    xmlHttpRequest.open("GET", "Time.aspx", true);

    //Setup the callback function
    xmlHttpRequest.onreadystatechange = StateChange;

    //Send the Ajax request to the server with the GET data
    xmlHttpRequest.send(null);
}
function StateChange()
{
    if(xmlHttpRequest.readyState == 4)
    {
document.getElementById('lblTime').value = xmlHttpRequest.responseText;
    }
}




.

XSL and XSLT

XSL consists of three parts:
XSLT   - a language for transforming XML documents
XPath  - a language for navigating in XML documents
XSL-FO - a language for formatting XML documents


Style Sheet Declaration:
<xsl:stylesheet
xmlns:xsl = http://www.w3.org/1999/XSL/Transform
version = "1.0">
or,
<xsl:transform
xmlns:xsl = http://www.w3.org/1999/XSL/Transform
version = "1.0">


Link XSL Stylesheet to XML Document:
Add the XSL stylesheet reference to XML document. 
<?xml-stylesheet type="text/xsl" herf="abc.xsl"?>


Template:
A template contains rules to apply when a specified nodes is matched.
Use <xsl:template> element to build templates.
The match attribute tells which part of XML document is targeted. 
match="/" attribute means from the root of the XML source document.

The <XSL:value of> element:
<XSL:value of> element extract the value of an XMLelement and add it to the output steam of the transformation.

Example:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <body>
  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th>Title</th>
      <th>Artist</th>
    </tr>
    <tr>
      <td><xsl:value-of select="catalog/cd/title"/></td>
      <td><xsl:value-of select="catalog/cd/artist"/></td>
    </tr>
  </table>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>


.

Loading XML Document

For most browswers:
var xmlhttp = new XMLHttpRequest();

For IE5 and 6:
var xmlhttp = new ActiveXObject();

Selecting Nodes for IE:
xmlDoc = selectNodes(xpath);

Selecting Nodes for Others:
xmlDoc.evaluate(xpath,xmlDoc,null,XPathResult.ANY_TYPE,null);


.

XPass

XPass:

XPath is a syntax for defining parts of an XML document
XPath uses path expressions to navigate in XML documents
XPath contains a library of standard functions
XPath is a major element in XSLT
XPath is a W3C recommendation


XPass Nodes:

In XPath, there are seven kinds of nodes: element, attribute, text, namespace, processing-instruction, comment, and document nodes.

Example:

<?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore>
  <book>
    <title lang="en">Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>
  <book>
    <title lang="eng">Learning XML</title>
    <price>39.95</price>
  </book></bookstore>


<bookstore> is root element node.
<year>2005</year> is element node.
lang="en" is attribute node.

Atomic value means node without children or parent.
This case, for example, "en", and J K. Rowling.

Items means, atomic values or nodes.

Expression:

nodename        Selects all child nodes of names name.
bookstore       Selects all child nodes of the bookstore elements.

/               Selects from root node.
/bookstore      Selects the root element bookstore.
                "/" always represents an absolute path to an element.

//              Select nodes in the document from the curresnt node that
                match the selection no matter where they are. 
//book          Select all book elements no matter where they are in the 
                document.
bookstore//book Select all book elements that are descendant of the bookstore
                element, no matter where they are. 

.               Select the current node.
..              Select the parent of the current node.

@               Select attributes
//@lang         Select all attributes that named "lang" .


Predicates:

Predicates are used to find a specific node or node that contains a specific value, and they are always embedded in the square brackets.


/bookstore/book[1]     Selects the first book element that is the child of the
                       bookstore element. 
                       [1] is the first element, but IE wrongly expects [1]. 

bookstore/book[last()] Selects the last book element that is the child of the
                       bookstore element. 


bookstore/book[last()-1] 
                       Selects the last but one book element that is the
                       child of the bookstore element.

bookstore/book[position()<3] 
                       Selects the first two book element that is the
                       child of the bookstore element.

//title[@lang]         Selects all the title elements that have an
                       attribute named "lang".  

//title[@lang='eng']   Selects all the title elements that have an 
                       attribute named "lang" with value of 'eng". 

bookstore/book[price<35.00]
                       Selects all the book elements of the bookstore
                       element that have a price element with a value
                       greater than 35.00.

bookstore/book[price<35.00]/title
                       Selects all the title elements of the book
                       elements of the bookstore element
                       that have a price element with a value
                       greater than 35.00.

Wildcard:
*               Matches any element node.
@*              Matches any attribute node.
node()          Matches any node of any kind.

Path Expression:
/bookstore/*    Selects all child nodes of the bookstore element.
//*             Selects all elements in the document.
//title[@*]     Selects all title elements which have any attribute.

XPath Axes:
An axis defines a node-set relative to the current node.

AxisName
ancestor            Selects all ancestors (parent, grandparent, etc.) of
                    the current node

ancestor-or-self    Selects all ancestors (parent, grandparent, etc.) of
                    the current node and the current node itself

attribute           Selects all attributes of the current node

child               Selects all children of the current node

descendant          Selects all descendants (children, grandchildren, etc.)
                    of the current node

descendant-or-self  Selects all descendants (children, grandchildren, etc.)
                    of the current node and the current node itself

following           Selects everything in the document after the closing
                    tag of the current node

following-sibling   Selects all siblings after the current node

namespace           Selects all namespace nodes of the current node

parent              Selects the parent of the current node

preceding           Selects everything in the document that is before the
                    start tag of the current node

preceding-sibling   Selects all siblings before the current node

self                Selects the current node

Location Path Expression:

A location path can be absolute or relative. An absolute location path starts with a slash ( / ) and a relative location path does not. In both cases the location path consists of one or more steps, each separated by a slash:

An absolute location path:/step/step/...
A relative location path:step/step/... 

Each step is evaluated against the nodes in the current node-set.

A step consists of:
an axis (defines the tree-relationship between the selected nodes and the current node)
a node-test (identifies a node within an axis)
zero or more predicates (to further refine the selected node-set)

The syntax for a location step is:axisname::nodetest[predicate]

Examples

child::book
Selects all book nodes that are children of the current node

attribute::lang Selects the lang attribute of the current node

child::* Selects all children of the current node

attribute::* Selects all attributes of the current node

child::text() Selects all text child nodes of the current node

child::node() Selects all child nodes of the current node

descendant::book Selects all book descendants of the current node

ancestor::book Selects all book ancestors of the current node

ancestor-or-self::book Selects all book ancestors of the current node - and the current as well if it is a book node

child::*/child::price Selects all price grandchildren of the current node




.

Web 2.0 (CIS-36) Vocabraries

Collective Intelligence:

It is the combining of behavior, preference, or ideas of group of people to create novel insights.

Web as a Platform:

Runing independent of the computer’s platform, and not requiring additional installations of program into the computer. It does, however, require a relatively newer Web browser.