Bear Bibeault

+ Follow
since Jan 10, 2002
Bear likes ...
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
Merit badge: grant badges
Author of:
Secrets of the JavaScript Ninja, 1st and 2nd editions,
jQuery in Action, 1st, 2nd and 3rd editions,
Ajax in Practice, and
Prototype and Scriptaculous in Action
Austin, TX
Cows and Likes
Total received
In last 30 days
Total given
Total received
Received in last 30 days
Total given
Given in last 30 days
Forums and Threads
Scavenger Hunt
expand Rancher Scavenger Hunt
expand Ranch Hand Scavenger Hunt Green check
expand Greenhorn Scavenger Hunt Green check

Recent posts by Bear Bibeault

Are you using a framework? For example, Spring Boot already has all this built in.

If you are rolling your own, research how to read properties using the Servlet API.
2 weeks ago
Let's use some examples:

In older code, normally you'd see a constructor created as a named function

And an instance created with:

Note that if you don't provide an explicit param list, an empty one is provide for you. So:

acts like:

Now, switching to anonymous functions, where you provide the function body inline:

acts like

calling the anonymous constructor without a value for the parameter. Which you don't want.

So look at Stephan's code again to see how the parameters are provided, and an instance, not a constructer is stored in wb_sys.
Your example differs from the example you provided in that you have params and the example doesn't.

When you don't call the constructor (see Stephan's example) with param values, the object is created without any params.

The difficulty seems to be that you are expecting new function to return a constructor, when it's actually returning the object that results from the constructor.

In modern JS, you wouldn't see code like this. As this seems to be using object-oriented techniques, you'd see the new class syntax being used. Alternatively, object-oriented approaches would be tossed out the window in favor of functional techniques.

Stephan van Hulst wrote:
I don't hold this kind of code in high regard though.

Exactly. Good code is all about clarity. Follow established conventions and avoid "clever" code.
Also, in modern JavaScript you’d either use a named function, or assign an arrow function to a const. “new function” is just weird.

It’s also not completely clear what you are trying to accomplish here. That info would help.
It would have been easier to spot the problem quickly had you just compared the JSP-generated HTML to your hand-written HTML. The browser tools are essential for debugging, be sure to utilize them.

And yeah, Java scriptlets in JSP have been deprecated 22 years. 22 years! There is no excuse for using them in JSP pages at this point (or any point in the past two decades). We often hear: "but I'm just a beginner". If so, learning the correct ways from the start is essential.
P.S. Your demo is cool, and yes, what can be done with pure CSS these days is mind-blowing!

Piet Souris wrote:It was assumed to be known, which struck me as a bit weird: if you do not know javascript, thw chances are 100% you also do not know css.

I disagree. Tens of thousands of static web sites are written using HTML and CSS with no JS component.

I can't tell you how many web designers I know that were forced out of the industry because, while they were able to grok HTML and CSS, the leap to JS was simply too much for them.

What I lack is the ability to make the javascript-code more object-oriented, a la java

In that, you would be running in the opposite direction of the industry where the desire is to make JavaScript/TypeScript more functional and definitely less object-oriented. Yes, the gnarly prototype-based inheritance system recently got some syntactic sugar class-like syntax, but the industry is definitely embracing functional programming over classes.
Well, yeah. If productUrls points to an object, you need to drill down to the reference(s) that contain the URL string(s).

Frank Carver wrote:This is an unusual design. It invents new HTML tags, which is fine for CSS, but you are at the mercy of the browser designer as to how they are processed.

This page looks very different in different browsers!

Most browser-tolerant web design these days uses DIV and SPAN tags with classes and then applies the styles to the classes rather than to the tags themselves. This is a much more predictable approach.

I will disagree. The nav and section tags used are all part of the semantic HTML 5 additions and their use is highly encouraged over semantic-less divs and spans. I'm assuming that ui is a typo for ul that needs to be corrected.

That said, I'd look askance at any CSS examples/tutorials that still use float in lieu of more modern flexbox approaches.
You're still passing different functions. bind() works by creating a new function that wraps the original function. See
Now you are not passing the same function to the add and remove calls. (because of the bind)
P.S. A key listener on a button? Eh?
You are adding the event listener to a button, but trying to remove it from the window.