Develop Reference

Cannot bind Javascript Symbol to HTMLElement.style

Why can I bind a JavaScript Symbol to everything except the style property of an HTMLElement?
https://jsfiddle.net/elgs/ftj9zx42/3/
Here's the HTML:
<div id='a'></div>
Here's the Javascript:
const a = document.querySelector('#a');
a.classList._someSymbol = Symbol('some_symbol');
console.log(1);
a.style._someSymbol = Symbol('some_symbol');
console.log(2);
And here's the output:
1
(index):35 Uncaught TypeError: Cannot convert a Symbol value to a string
at window.onload ((index):35)
Update:
The whole story is I'm writing a proxy that will attach a Symbol to every property as identifier in the get trap, this unintentionally included the style. I will eventually include only the properties that I'm interested in, that won't include the style. But now I got this error and I'm curious why this happened.

It's browser dependent. As HTML is a standard (it is a series of guidelines on how a document should be interpreted by a user agent).
So, your above example does work in FireFox, but not in Google Chrome.
If you want to understand why, I recommend looking into the source code of your browser, which appears to be converting your symbol toString

🎈 Try this one:
const a = document.querySelector('#a');
a.classList._someSymbol = {};
a.classList._someSymbol = Symbol('some_symbol');
console.log(1);
a.style._someSymbol = {};
a.style._someSymbol = Symbol('some_symbol');
console.log(2);
I don't know why it works in this way 🤪.

_str is not defined while using underscore.js

This is the first time I am using Underscore.js. I have included the production underscore-min.js at the bottom of my page ( which is in Jade originally ), just before my custom script.
<script src="/javascripts/underscore-min.js">
<script src="/javascripts/custom.js">
Now, I call this function in my custom.js:
var selections = "Bold;Business-like;Charming";
var num_selections = _str.words( question.selected_words, ";").length;
Basically, I need to know the number of words selected and the native javascript method split returns 1 for even a blank string. But when I use this code, I get this error in my browser console:
Uncaught ReferenceError: _str is not defined
I tried using this line before using _str, but then I get require is not defined:
var _ = require('underscore');
Or, perhaps I can put my question as How do we start using underscore functions in our front-end javascripts?

Even though you are using node, require is not available on the front-end. Front-end javascript is not the same as back-end, nor do they directly interact. Underscore is called using _. All the methods available here: http://underscorejs.org/ are accessed via _.<method_name>. I am not too familiar with underscore and maybe you are using an older version but I cannot find _.str anywhere in the docs. So first, make sure you are using the correct notation for underscore _.<method_name> and make sure the function exists in the documentation. This fiddle shows some basic underscore functions: https://jsfiddle.net/mawpw2c5/

jQuery or javascript syntax that I don't understand

I´m reading a Polymer tutorial but I don't understand some code lines, like this:
postTask: function(e) { // Add a new task
var tsk = this.$.tTask.value;
var usr = this.$.tUser.value;
...
In this code block I don't understand the selector this.$.tTask.value, is another way to select in jQuery syntax?

I know nothing about Polymer, so I can only answer this question based on javascript syntax.
This code doesn't necessarily involve jQuery.
In javascript, the $ symbol is just an identifier.
When you include jQuery, it happens to assign the jQuery function to window.$. But jQuery does not 'own' the $ symbol.
Here, a variable with the identifier of $ has been assigned to the current object. For example, some code somewhere could be calling
this.$ = {
tTask: { value: "TaskValue" },
tUser: { value: "UserValue" }
};

Example of how to use PEG.js

I'm playing around with PEG.js.
I created some simple code that accepts inputs in the form [LettersNumbers]:
abc123
hello98765
etc.
This is the code:
start = expression
expression = text + number
text =
a: [a-z]+
{return a.join("");}
number =
b:[0-9]+
{return b.join("");}
Here: Online version the code can be tested and the parser downloaded, additionally I downloaded peg.js itself.
Unfortunately, the documentation is very sparse. I tried:
<script src="peg-0.9.0.min.js"></script>
<script src="parser.js"></script>
<script>
var parser = new PEG;
parser.parse("test123");
</script>
But got these errors:
Uncaught ReferenceError: module is not defined
Uncaught TypeError: PEG is not a function
Could anybody please provide me with a working example? I just need to integrate the generated js-files into a website.

This answer assumes that you would like to continue using the PEG.js online version to build your parser.
You only need peg-0.9.0.min.js if you are generating the parser in your web page. Since you are using the PEG.js online version to generate your parser you don't need to do that.
You do need to include the downloaded parser.js. You need to specify a browser-friendly global variable in the PEG.js web version and re-download.
This example uses PARSER:
Following that you can use:
<script src="parser.js"></script>
<script>
PARSER.parse("test123");
</script>
Plunker example

If you want to use it on web, you need to download the browser version, or ref it from CDN.
Also, you need to use its javascriptAPI to create a parser.
// One line version of your grammer.
var parser = PEG.buildParser('start = expression;expression = text + number;text = a: [a-z]+{return a.join("");};number = b:[0-9]+{return b.join("");}');
console.log(parser.parse("test123"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/pegjs/0.7.0/peg.min.js"></script>

Unable to create a MozillaBrowserBot object

I tried to get the MozillaBrowserBot object in mozilla js. But it is not giving the object. I used the code as below:
function externalApplication(){
var wm = Components.classes["#mozilla.org/appshell/window-mediator;1"].getService(Components.interfaces.nsIWindowMediator);
alert("wm: "+wm);
var contentWindow=wm.getMostRecentWindow('navigator:browser').getBrowser().contentWindow;
alert("contentWindow: "+contentWindow);
//I am not gettting this pageBot object
var pagebot=new MozillaBrowserBot(contentWindow);
alert(pagebot);
}
I want to add the find option to the xpath checker. If the MozillaBrowserBot is related to selenium IDE then is there any possibility to get the pagebot object?

Judging by Google search results, MozillaBrowserBot is something that's defined by Selenium IDE. Also, it is apparently defined in the content page you got, not in the context where your code executes. That means that the proper invocation would be:
var pagebot = new contentWindow.MozillaBrowserBot(contentWindow);
This is based on a bunch of guesses of course since your question doesn't provide any context information whatsoever.