Help with some website design...

**MutantJohn** · 04-26-2015

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*

**Nominal Animal** · 04-26-2015

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.

**phantomotap** · 04-26-2015

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

**Nominal Animal** · 04-26-2015

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.

Originally Posted by phantomotap

The spinet says

I like the way a spinet sounds, but that turn of phrase really threw me off like a wild burro.

**MutantJohn** · 04-27-2015

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>

**Lesshardtofind** · 04-27-2015

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.

**phantomotap** · 04-27-2015

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

**Nominal Animal** · 04-28-2015

Originally Posted by Lesshardtofind

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.

Originally Posted by phantomotap

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.

**phantomotap** · 04-28-2015

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

**MutantJohn** · 04-28-2015

Originally Posted by phantomotap

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!!!

**Alpo** · 04-28-2015

Originally Posted by Lesshardtofind

...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.

**Nominal Animal** · 04-28-2015

Originally Posted by phantomotap

You are talking about a different interface exhibiting different behavior.

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.

Originally Posted by phantomotap

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?

Originally Posted by Alpo

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.

**Mario F.** · 04-28-2015

Originally Posted by Nominal Animal

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.

Originally Posted by Alpo

// 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.

**Alpo** · 04-28-2015

Originally Posted by Mario F.

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).

**phantomotap** · 04-28-2015

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