Thread: Help with some website design...

  1. #46
    Registered User MutantJohn's Avatar
    Join Date
    Feb 2013
    Posts
    2,665
    Interesting. I only asked about item() because I was reading some of the docs and it mentioned in returned null instead of undefined. I figured it was like using the at() member function in C++ vector's and the like.

    And that's interesting syntax for object definition and assignment.

    Dynamically-typed languages are so confusing. I miss C++ land where everything is hard-defined and you know exactly what's going on. *sigh*

  2. #47
    Ticked and off
    Join Date
    Oct 2011
    Location
    La-la land
    Posts
    1,728
    Phantomotap answered your questions already, but I guess I could explain the snippet line by line, in case it might help others.

    Code:
                dataset = [];
    This is the preferred form in Javascript for initializing a variable to an empty array. (Similarly, it is recommended to use just curly braces instead of new Object() to create a new object.)

    We will be adding each new found data entry as a new Object to this array.

    Code:
                var element = document.getElementsByClassName("name");
    The getElementsByClassName returns a HTMLCollection of the elements that have all the given class names. Using .item() is not required, as a HTMLCollection exposes the elements directly by index.

    Code:
                for (i = 0; i < element.length; i++) {
    The HTMLCollection exposes the number elements in the read-only .length property. This for loop therefore goes through all elements in the HTMLCollection, in order.

    Code:
                    dataset[i] = { row: element[i].parentNode,
                                   text: String(element[i].textContent).toLowerCase(),
                                   target: element[i].parentNode.querySelector("select") };
    Here we construct a new Object, with properties
    .row
    referring to the parent of the element whose class was 'name'
    .text
    referring to the text content, converted to lower case, of the element whose class was 'name', and
    .target
    referring to the select element related to this entry -- specifically, to the first 'select' descendant starting at the element pointed to by the .row property -- or null if no such element exists.

    .querySelector() method was a new one to me, and I like it.

    The object initializer syntax is explained in MDN here.
    Code:
                    if (dataset[i].target !== null)
                        dataset[i].target.addEventListener("focus", self.select_focused);
    If we have a row that does not have a select element, the .target property will be null.

    If there is a non-null .target, this installs the self.select_focused function as the focus handler for that element.

    The intention is that it would auto-open the drop-down list for that member. The function receives a FocusEvent as a parameter, with its .target property specifying the element.

    Unfortunately, Firefox 37 at least does not support any way of doing this from Javascript. It is a known woe. The number of dropdown-related bugs in Firefox is so large, I don't think it's going to be addressed anytime soon, though.

    For Chrome, synthesizing a mousedown MouseEvent to the target member should work, I've read.

  3. #48
    Master Apprentice phantomotap's Avatar
    Join Date
    Jan 2008
    Posts
    5,108
    I only asked about item() because I was reading some of the docs and it mentioned in returned null instead of undefined. I figured it was like using the at() member function in C++ vector's and the like.
    O_o

    Nope. The `item' method doesn't raise an exception, and the differences between `null' and `undefined' aren't that interesting for the majority of code.

    A `NodeList' really shouldn't have holes in any event, but you can check the element before accessing a member if you so desire.

    The code shows an example using operator chaining: `(ev && ev.buttons && (ev.buttons & 1))'.

    The spinet says "If `ev' is not `null' or `undefined' check for the `buttons' member which if exists and is not `null' or `undefined' should be masked against the one value.".

    I'm ignoring some quirks, but you should get the idea.

    Soma
    “Salem Was Wrong!” -- Pedant Necromancer
    “Four isn't random!” -- Gibbering Mouther

  4. #49
    Ticked and off
    Join Date
    Oct 2011
    Location
    La-la land
    Posts
    1,728
    Which reminds me, I should use if (dataset[i].target) instead of if (dataset[i].target !== null). I think .target could also be undefined, at least on some browsers.

    Quote Originally Posted by phantomotap View Post
    The spinet says
    I like the way a spinet sounds, but that turn of phrase really threw me off like a wild burro.

  5. #50
    Registered User MutantJohn's Avatar
    Join Date
    Feb 2013
    Posts
    2,665
    I'm trying to understand your code by recreating it.

    If I submit something and it does have a matching substring, the matches will flash blue for like a second before returning to normal. What's going on here?
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Tabbing Test Page</title>
    
            <script>
    var tabInterface = new(function()
    {
        var self = this;
        var tableData = null;
        var form = null;
        var input = null;
    
        self.highlightName = function(i, match)
        {
            if (match)
            {
                tableData[i].row.style.background = "#cce5ff";
            }
            else
            {
                tableData[i].row.style.background = "#ffffff";
            }
        };
    
        self.find = function(evt)
        {
            var ev = evt || window.event;
            var phrase = String(input.value).toLowerCase();   
            
            var found = [];
            var tabIndex = 1;        
    
            if (phrase.length > 0)
            {
                for (var i = 0; i < tableData.length; ++i)
                {
                    if (String(tableData[i].name).contains(phrase))
                    {  
                        self.highlightName(i, true);
                    }
                    else
                    {
                        self.highlightName(i, false);
                    }
                }
            }
    
            return false;
        };
    
        /*
         * Simple function to initialize our object-oriented approach
         *
         */
    
        self.init = function()
        {
            // gather up member data...
            var memberNameColumns = document.getElementsByClassName("memberNameColumn");
            console.log(memberNameColumns);
    
            tableData = [];
    
        for (var i = 0; i < memberNameColumns.length; ++i)
            {
                tableData[i] = { name : String(memberNameColumns[i].textContent).toLowerCase(),
                                 row : memberNameColumns[i].parentNode,
                                 select : memberNameColumns[i].parentNode.querySelector("select") };
    
            }
    
        console.log(tableData);
    
            // add an event listener to the form element
            // so that we may respond to submissions...
        form = document.getElementById("searchForm");
            input = document.getElementById("searchInput");
    
            form.addEventListener("submit", self.find);
            self.find(null);
        };
    });
    
    document.addEventListener("DOMContentLoaded", tabInterface.init);
            </script>
        </head>
        <body>
            <table id="memberTable">
                <tr>
                    <td class="memberNameColumn">1 A B C D E F</td>
                    <td>
                        <select>
                            <option>Yea</option>
                            <option>Nea</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="memberNameColumn">2 A B C D E</td>
                    <td>
                        <select>
                            <option>Yea</option>
                            <option>Nea</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="memberNameColumn">3 A B C D</td>
                    <td>
                        <select>
                            <option>Yea</option>
                            <option>Nea</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="memberNameColumn">4 A B C</td>
                    <td>
                        <select>
                            <option>Yea</option>
                            <option>Nea</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="memberNameColumn">5 A B</td>
                    <td>
                        <select>
                            <option>Yea</option>
                            <option>Nea</option>
                        </select>
                    </td>
                </tr>
            </table>
            <div id="searchDiv">
                <form id="searchForm" method="POST" action="#">
                    <input id="searchInput" type="text" value=""></input>
                </form>
            </div>
        </body>
    </html>

  6. #51
    Bored Programmer
    Join Date
    Jul 2009
    Location
    Tomball, TX
    Posts
    428
    Code:
    if (String(tableData[i].name).contains(phrase))
    JavaScript `string.contains()` what is this which craft? lol

    Maybe a:
    Code:
    if (String(tableData[i].name).indexOf(phrase) > -1)
    Even es6/es2015 is just releasing the array and string.includes() method still not a contains().

    Something like this could shim it though
    Code:
    String.prototype.contains = function(x){
      return this.indexOf(x) !== -1;
    }
    Edit:
    And I look back at page 3 and see there was already a big discussion on this.
    Last edited by Lesshardtofind; 04-27-2015 at 11:22 PM.
    Virtual reality hello world http://www.rodneybrothers.com/vr/vrh...rld/index.html in html and javascript.
    Viewable with dodocase, google cardboard, OR, and other compatible VR gear.

  7. #52
    Master Apprentice phantomotap's Avatar
    Join Date
    Jan 2008
    Posts
    5,108
    If I submit something and it does have a matching substring, the matches will flash blue for like a second before returning to normal. What's going on here?
    O_o

    The expected is "going on" considering that your event listener allows the default response to an event.

    If only there was a way to prevent that...

    Soma
    “Salem Was Wrong!” -- Pedant Necromancer
    “Four isn't random!” -- Gibbering Mouther

  8. #53
    Ticked and off
    Join Date
    Oct 2011
    Location
    La-la land
    Posts
    1,728
    Quote Originally Posted by Lesshardtofind View Post
    JavaScript `string.contains()` what is this which craft? lol
    Hey, no need to rub my nose in it. I did already admit my Javascript is rusty.

    Quote Originally Posted by phantomotap View Post
    If only there was a way to prevent that...


    There was a time when browsers canceled the event if the handler returned false, but nowadays you need to call that prevent-the-default-please event method, too. I dunno if it matters, but I like to do both.

  9. #54
    Master Apprentice phantomotap's Avatar
    Join Date
    Jan 2008
    Posts
    5,108
    There was a time when browsers canceled the event if the handler returned false, but nowadays you need to call that prevent-the-default-please event method, too. I dunno if it matters, but I like to do both.
    O_o

    You are talking about a different interface exhibiting different behavior.

    Actually, the behavior of the other methods vary in several ways.

    If you are using the `addEventListener' method, the return from the event processor is ignored.

    You can though still do both; you aren't going to hurt anything.

    Soma
    “Salem Was Wrong!” -- Pedant Necromancer
    “Four isn't random!” -- Gibbering Mouther

  10. #55
    Registered User MutantJohn's Avatar
    Join Date
    Feb 2013
    Posts
    2,665
    Quote Originally Posted by phantomotap View Post
    O_o

    The expected is "going on" considering that your event listener allows the default response to an event.

    If only there was a way to prevent that...

    Soma
    Wait, is that what all that preventDefault stuff is all about? Oh man... Back to the docs!!!

  11. #56
    Registered User Alpo's Avatar
    Join Date
    Apr 2014
    Posts
    877
    Quote Originally Posted by Lesshardtofind View Post
    ...what is this which craft? lol
    Speaking of Witch craft

    Code:
    String.prototype.reverse = function () {
      return this.split("").map((_, i, arr) =>  arr[arr.length - i - 1];).join("");
    }
    // Not sure if 'return' would be necessary?
    // Edit - Just looked it up, and MDN says for a single expression, no
    // braces are required and the expression is the implied return value.
    // (Arrow functions)
    Something weird this way comes.
    Last edited by Alpo; 04-28-2015 at 12:41 PM.
    WndProc = (2[b] || !(2[b])) ? SufferNobly : TakeArms;

  12. #57
    Ticked and off
    Join Date
    Oct 2011
    Location
    La-la land
    Posts
    1,728
    Quote Originally Posted by phantomotap View Post
    Right. Specifically, when handlers are assigned in the HTML code itself, i.e.
    PHP Code:
    <a href="/notgonnagothere" onclick="return false;">unfollowed link</a></href
    I used to take advantage of that in form onsubmit hooks: a function would take the form values, and do whatever with them, then return false to stop the browser from actually submitting the form.

    Quote Originally Posted by phantomotap View Post
    You can though still do both; you aren't going to hurt anything.
    My thinking was, it could be useful if those writing the HTML code accidentally used a handler function the above way -- onclick="return tabinterface.do_find(event);" or something like that -- instead of using the .addEventListener method. Robustness for the win?

    Quote Originally Posted by Alpo View Post
    Something weird this way comes.
    Ouch. It is true that expressions of that form are very powerful -- you get lots of stuff done in a single stanza --, but I'd be buggered if I had to maintain code written that way.

  13. #58
    (?<!re)tired Mario F.'s Avatar
    Join Date
    May 2006
    Location
    Angola
    Posts
    8,445
    Quote Originally Posted by Nominal Animal View Post
    Ouch. It is true that expressions of that form are very powerful -- you get lots of stuff done in a single stanza --, but I'd be buggered if I had to maintain code written that way.
    Actually I kind like call chaining. I feel comfortable around it and don't have much trouble following the code. What kills me, is nested parenthesis. That's the type of code that makes my head hurt.

    Quote Originally Posted by Alpo View Post
    // Edit - Just looked it up, and MDN says for a single expression, no
    // braces are required and the expression is the implied return value.
    // (Arrow functions)
    Better be explicit. Don't trust, on any language, certain shortcuts that may affect your code expressiveness. Although on your example the language lacks non-returning procedures, I think "return" is still one of those beautiful words that (like a warm friendly handshake) should seal any function contract.
    Last edited by Mario F.; 04-28-2015 at 03:23 PM.
    Originally Posted by brewbuck:
    Reimplementing a large system in another language to get a 25% performance boost is nonsense. It would be cheaper to just get a computer which is 25% faster.

  14. #59
    Registered User Alpo's Avatar
    Join Date
    Apr 2014
    Posts
    877
    Quote Originally Posted by Mario F. View Post
    Better be explicit. Don't trust, on any language, certain shortcuts that may affect your code expressiveness. Although on your example the language lacks non-returning procedures, I think "return" is still one of those beautiful words that (like a warm friendly handshake) should seal any function contract.
    Yeah I definitely agree. I'm not sure if I would use arrow functions much though, it just takes to long for me to make sense of when reading. Maybe I'm wrong and the shorthand really does make some things easier though. Calls to the Array functions 'map' or 'some' seem like a reasonable place to use this (maybe that's what they were made for).
    WndProc = (2[b] || !(2[b])) ? SufferNobly : TakeArms;

  15. #60
    Master Apprentice phantomotap's Avatar
    Join Date
    Jan 2008
    Posts
    5,108
    My thinking was, it could be useful if those writing the HTML code accidentally used a handler function the above way -- onclick="return tabinterface.do_find(event);" or something like that -- instead of using the .addEventListener method. Robustness for the win?
    O_o

    I'm sure what point you were trying to make. My point was that your approach, as shown, isn't more robust.

    If you are using only the `addEventListener' interface, you can safely use both the `preventDefault' method and a return value.

    If you are using a different interface, you can't make the assumption that you can safely use both.

    $): If you use `onclick', the `this' pointer may not point to the element.

    $): If you use `onclick' or `attachEvent', the `preventDefault' method may not exist.

    Using both a return value and `preventDefault' with the `addEventListener' interface doesn't buy you anything.

    Using both, without extra checks, for other interfaces to handle events isn't reliable.

    My point was that if you are actually trying to buy something, more robust code, you need a better shim.

    [Edit]
    Yes. I did read that you preferred writing your own code, and I'm not saying you shouldn't write your own code. You aren't going to really hit every note you need to support such outdated environments by yourself. I'm more saying "You should depend on a reasonable environment if you aren't going to use a library." than "You should just use a library.".
    [/Edit]

    Soma
    Last edited by phantomotap; 04-28-2015 at 06:43 PM.
    “Salem Was Wrong!” -- Pedant Necromancer
    “Four isn't random!” -- Gibbering Mouther

Popular pages Recent additions subscribe to a feed

Similar Threads

  1. Replies: 2
    Last Post: 12-11-2012, 12:25 AM
  2. Website Design....again
    By Sentral in forum A Brief History of Cprogramming.com
    Replies: 14
    Last Post: 10-29-2006, 05:47 AM
  3. Website design!
    By Sentral in forum A Brief History of Cprogramming.com
    Replies: 28
    Last Post: 10-07-2006, 12:38 AM
  4. website
    By the Wookie in forum Windows Programming
    Replies: 1
    Last Post: 11-07-2002, 02:25 PM