SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The nextSibling property is bolean for if statement,& string value for output value?

    Hi
    I have been reading a book I find very good called "JavaScript second edition The complete reference". In Chapter 10 of this book I find some very interesting code which I find the book does not fully explain. I have put the code I am talking about below and have marked the part I have questions about in Orange. The lines I am talking about which I find I need more explanation on is this.

    "case 'nextSibling': if (currentElement.nextSibling)
    currentElement = currentElement.nextSibling;"

    On the first of these lines it appears that one is meeting the case by saying the string value nextsibling has been passed to the function this line is contained in as the parameter named direction. This line also uses nextsibling is a property of the currentElement parameter as such the nextsibling property is a bolean. Then in the next line in quotation marks above we are updating the currentElement parameter in a way which requires it to be a string value. So is it a string a bolean value or is the nature of switch statements that you can meet a case equals string condition by including this condition in the if portion of this case statement as a string value ? And this is a deviation from the normal way that and if condition requires something which evaluates to a bolean value?

    Incidentally what this program does is traversed the DOM document tree. To operate this program and invoked the case I am talking about first click on the button marked "first child" and then click on the button marked "next sibling". They should invoke the case I am talking about with the word "body" outputted to the text window marked "node name" and the number 1 in outputted to the text window marked "node type"

    So please tell me what you think about my question I am anxious to learn as much as I can about JavaScript.
    Very sincerely
    Marc

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>DOM Test</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    </head>
    <body>
    <h1>DOM Test Heading</h1>
    <hr />
    <!-- Just a comment -->
    <p>A paragraph of <em>text</em> is just an example</p>
    <ul>
       <li><a href="http://www.yahoo.com">Yahoo!</a></li>
    </ul>
    
    <form name="testform" id="testform" action="#" method="get">
    Node Name: <input type="text" id="nodeName" name="nodeName" /><br />
    Node Type: <input type="text" id="nodeType" name="nodeType" Value="xxx" /><br />
    Node Value: <input type= "text" id="nodeValue" name="nodeValue" Value="xxx" /><br />
    </form>
    <script type="text/javascript">
    <!--
    
    function update(currentElement)
    {
      window.document.testform.nodeName.value = currentElement.nodeName;
      window.document.testform.nodeType.value = currentElement.nodeType;
      window.document.testform.nodeValue.value = currentElement.nodeValue;
    }
    
    function nodeMove(currentElement, direction)
    {
      switch (direction)
        {
         case "previousSibling": if (currentElement.previousSibling)
                                    currentElement = currentElement.previousSibling;
                                 else
                                    alert("No previous sibling");
                                 break;
         case "nextSibling": if (currentElement.nextSibling)
                                 currentElement = currentElement.nextSibling;   
                             else
                                 alert("No next sibling");
                             break;   
    
         case "parent": if (currentElement.parentNode)
                          currentElement = currentElement.parentNode;
                        else
                          alert("No parent");
                        break;
    
         case "firstChild": if (currentElement.hasChildNodes())
                              currentElement = currentElement.firstChild;
                            else
                              alert("No Children");
                             break;
    
         case "lastChild":  if (currentElement.hasChildNodes())
                              currentElement = currentElement.lastChild;
                            else
                              alert("No Children");
                            break;
         default: alert("Bad direction call");
        } 
    
      update(currentElement);
      return currentElement;
    }
    
    var currentElement = document.documentElement;
    update(currentElement);
    
    //-->
    
    </script>
    <form action="#" method="get">
     <input type="button" value="Parent" 
            onclick="currentElement=nodeMove(currentElement,'parent');" />
     <input type="button" value="First Child"
            onclick="currentElement=nodeMove(currentElement,'firstChild');" />
     <input type="button" value="Last Child"
            onclick="currentElement=nodeMove(currentElement,'lastChild');" />
     <input type="button" value="Next Sibling"
            onclick="currentElement=nodeMove(currentElement,'nextSibling');" />
     <input type="button" value="Previous Sibling"
            onclick="currentElement=nodeMove(currentElement,'previousSibling');" />
     <input type="button" value="Reset to Root"
            onclick="currentElement=document.documentElement; update(currentElement);" />
    </form>
    </body>
    </html>
    Last edited by MarcMiller; Feb 4, 2007 at 01:26.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    JavaScript is a loosely typed language. You can treat any variable as a boolean. (I don't remember any special cases -- there might be one or two though.)

    The code makes sure that there is a nextSibling -- that the current node isn't the last node in its parentNode -- before it overwrites currentElement with a reference to that node.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I my right you would normally expect the nextSibling property to be typed as a string value. In JavaScript has the ability to spontaneously convert a string to a bolean if a property appears in a "if statement" which should be looking for a condition and one normally thinks of conditions in most computer line which is as bolean values. I am sorry but that answer just doesn't do it for me. Do you have anything more to say about this or could someone else give me their perspective on this question?

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh right. I forgot to mention what type nextSibling is. It's type is "object", which in JavaScript covers a great many things. In this case it is a DOM node. A node might be of type "text", but a node itself is not a string.

    For more information on the Document Object Model (DOM) check out these:
    Rough Guide to the DOM
    JavaScript tutorial - W3C DOM introduction
    http://www.quirksmode.org/js/contents.html#dom
    http://www.brainjar.com/
    http://developer.apple.com/internet/...ent/dom2i.html
    http://developer.mozilla.org/en/docs/DOM:document
    http://developer.mozilla.org/en/docs..._DOM_Reference
    http://digital-web.com/articles/form...d_the_w3c_dom/
    http://www.w3.org/DOM/
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I my right you would normally expect the nextSibling property to be typed as a string value.
    .nextSibling is a property of an html element. It refers to another object (or it may be null).

    You could also create a variable and assign it the string "nextSibling". However, the string "nextSibling" is just a bunch of characters, and it does not refer to any object.

    As far as the if statement goes, js will convert any data type to another type if the situation calls for it. If a data type appears in a boolean context, in other words in a situation where a data type must be deemed true or false, then js will convert the data type to a boolean value. The rules are:

    1) the values null and undefined are converted to false

    2) the numbers 0 and NaN are converted to false

    3) the empty string '' is converted to false

    4) all other values are converted to true

    (from: ppk on Javascript)

    As far as a property like .nextSibling, which refers to an object, it is either going to be null or not. Therefore, if the property .nextSibling appears in an if conditional, then if .nextSibling is null, null is converted to false. If the property .nextSibling is not null, i.e. it refers to an object, then .nextSibling is converted to true.

    Note however that the string "nextSibling" will always be converted to true in an if statement conditional.

    This line also uses nextsibling is a property of the currentElement parameter as such the nextsibling property is a bolean.
    No. .nextSibling refers to an object, and therefore it is known as a "reference".

    Then in the next line in quotation marks above we are updating the currentElement parameter in a way which requires it to be a string value.
    Why do you say that? If .nextSibling were a boolean value, and its value happened to be false, and you did this:

    currentElement = currentElement.nextSibling

    you would be assigning false to a variable named currentElement.

    However, what that line actually does is assign the reference stored in currentElement.nextSibling to the variable currentElement.

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .
    Quote:
    Then in the next line in quotation marks above we are updating the currentElement parameter in a way which requires it to be a string value.
    Why do you say that? If .nextSibling were a boolean value, and its value happened to be false, and you did this:

    currentElement = currentElement.nextSibling

    you would be assigning false to a variable named currentElement.

    However, what that line actually does is assign the reference stored in currentElement.nextSibling to the variable currentElement
    Well I guess I forgot the program uses properties of the currentElemen like this.

    Code:
    function update(currentElement)
    {
      window.document.testform.nodeName.value = currentElement.nodeName;
      window.document.testform.nodeType.value = currentElement.nodeType;
      window.document.testform.nodeValue.value = currentElement.nodeValue;
    }
    So I guess what I should really assume is currentElement.nodeName, currentElement.nodeType, and currentElement.nodeValue, are of type string in order to output to the text boxes.

    Incidentally those rules were great!

    (from: ppk on Javascript)
    Is PPK on JavaScript a book, a web site or what?

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An interesting thing to note is that '0' (a string containing a single character that is a zero) is evaluated as true.

    PPK on JavaScript is a book.
    PPK's excellent site, called QuirksMode.org, is here.

    P.S. Thanks 7stud, for clarifying what I was saying.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I guess what I should really assume is currentElement.nodeName, currentElement.nodeType, and currentElement.nodeValue, are of type string in order to output to the text boxes.
    In js, you cannot determine the type of a value by looking at its destination type--because js makes automatic conversions. If you want to know the type of a value, then use the typeof operator:
    Code:
    <html>
    <head><title></title>
    <script type="text/javascript">
    
    window.onload = function()
    {
    	
    	var num = 10;
    	num += 2;
    	var x = document.getElementById("t");
    	x.value = num;  //num is a number--it's the result of a mathematical calculation
    	
    	alert(typeof x.nodeType);  //number
    }
    
    </script>
    </head>
    <body>
    
    <div>hello world</div>
    <form id="f" method="post" action="http://www.goggle.com">
    
    <input id="t" type="text" value="goodbye" />
    </form>
    </body>
    </html>

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    7stud, why are you bothering to give the input a value? It's value will always be a string, but nodeTypes are always numebrs.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •