We Keep Coding

Safari browser reports error using classes in javascript

I use a class in my javascript.
class FileSet {
constructor(id,
path,
folder,
children,
all,
isfolder
) {
}
}
It works in all browsers except Safari.
In Safari I get the following exception.
SyntaxError: Use of reserved word 'class'
How do I make my script run in Safari browser.
Thanks,
Gagan

You might be using safari browser less that version 9. The class keyword is a reserved keywork in ES6 and safari browser do not support ES6 less than version 9. So, you must need to update your browser to version 9 or more to get your JavaScript work.

IE 11 AngularJS error - Object doesn't support property or method 'from'

In my JavaScript I have a function detectEnvironmentAndGetLEAndDepot() which is called onload via HTML. I'm working with wicket, and need to take values held in the back-end, so I fire them to the screen, hide them, and search the <span> values from my JS for the name value, for example if(v.getAttribute('name') === 'LE'){do stuff} or if(v.getAttribute('name') === 'depot'){do stuff} (I'm sure not the most elegant solution, but I needed a quick one!). Then within the function detectEnvironmentAndGetLEAndDepot() I do a bit of formatting etc so the data is usable.
detectEnvironmentAndGetLEAndDepot() function (quite long, only relevant part) -
detectEnvironmentAndGetLEAndDepot = function() {
Array.from(document.getElementsByTagName('span')).forEach(function(v) {
//Search name tag for particular names, then do formatting
}
When I open this in IE11 I get the error in a popup SCRIPT438: Object doesn't support property or method 'from' which is related to the first line of the method above - the Array class. Help much appreciated.

As Array.from method is not supported by IE, you can try to use:
[].slice.call(document.getElementsByTagName('span')).forEach(function(v) {});
This doesn't require usage of any 3rd party libraries.

You could use an ES2015 polyfill, like es6-shim, Array.from or Babel polyfill

As explained by Mozilla here, the Array.from function is not yet supported by IE

you can use instead _underscore.js with function _.toArray(document.getElementsByTagName('span'))...
FYI:
'Array.from' not supported in the following document modes: Quirks, Internet
Explorer 6 standards, Internet Explorer 7 standards, Internet Explorer
8 standards, Internet Explorer 9 standards, Internet Explorer 10
standards, Internet Explorer 11 standards. Not supported in Windows
8.1.
source

How to get `let` statement work on major three browsers?

Firefox requires using <script type="application/javascript;version=1.7"> to activate ES6 let statement support.
Note: The let keyword is only available to code blocks in HTML wrapped in a <script type="application/javascript;version=1.7"> block (or higher version). XUL script tags have access to these features without needing this special block.
However, it seems that this actually deactivates the whole script on both Internet Explorer and Chrome, as their debuggers do not show the script anymore.
Example: http://embed.plnkr.co/7YvyDZfPRsijqrHJnhMf/preview
Is there any way to use application/javascript;version=1.7 on IE/Chrome, or to use ES6 let on Firefox without the type attribute?
Is there any hack to activate let statement support for all major browsers, while their implementations are not 100% standard-compliant?

You are asking the wrong question. You should not ask when <script type="application/javascript;version=1.7"> becomes available in other browsers, but when Firefox (and other browsers) will ship the let keyword as defined by the ECMAScript 6 standard. "JS 1.7" is a non-standard Firefox-only thing, and let in Firefox is slightly different from ES6's let keyword.
To know when let (and const, and block scope) is ready, just follow the following issues:
Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=950547
Chrome 41+ (Opera 28?): https://code.google.com/p/v8/issues/detail?id=2198
Internet Explorer 11+: https://status.modern.ie/blockbindingsletconstfunction (MSDN)

While we await the standard support of Firefox to the ES6 let keyword, you might want to dynamically load the script based on the type of browser you have using your server-side code (if you happen to be implementing a server-side web framework)
You might want to check the user agent string in order to detect the browser:
http://msdn.microsoft.com/en-us/library/ms537503(v=vs.85).aspx

how to ensure the browser can support **{get X() {}}**

i refuse to use __defineProperty__ and instead prefer the alternative syntax {get X() {}}
However this will not work on IE.
Aside from browser detection, what is the best way i can detect that a browser supports the newer syntax?
Edit: ok actually im not trying to detect IE in particular but redirect those "browsers that do not support get X(){} syntax" to notsupported.html. I believe that there's some way to do it and am working on it but in case someone already has this problem before and had a solution..
Edit 2: btw doesn't that mean that no one (erm other than me) uses the get X(){} syntax since its not supported by all (or not supported by the 5 major browsers yet) ?

As others have noted, you cannot force older (current!) browsers to accept newer syntax. And what would you do with browser detection? Use the old syntax for the old browsers and new syntax otherwise? Then you're writing the same code twice.
Decide on a set of browsers you need to support, determine what features they can all guarantee to you, then limit yourself to those features. That's how web development works.

You want to use an ES5 feature that is not commonly implemented.
You want to use syntax that common javascript interpreters cannot recognise.
There is no way to emulate it.
I recommend you just use
{
getX: function() { ... }
}
If you check the benchmark. Then you'll see using ES5 is 15 times slower. Just stick with ES3.
There is little you can do about this as there is no way to emulate getters in IE8.

Try this:
function browserSupportsGetterAndSetterSyntax() {
try {
return eval('({ get x() { return 3; }}).x') == 3;
} catch (e) {
return false;
}
}

Is there is reliable way to find out which revision of ECMA-262 my browser supports?

How do I find out if my browser supports Javascript 1.5 or not? using javascript of course. (or should I have googled or binged some more?)

For official “JavaScript”, that is Mozilla's implementation of ECMA-262, you can use the type attribute to detect version:
<script type="text/javascript;version=1.5"> v= '1.5'; </script>
<script type="text/javascript;version=1.6"> v= '1.6'; </script>
<script type="text/javascript;version=1.7"> v= '1.7'; </script>
...
This also works in Opera, (recent versions of which claim to support JavaScript 1.5). IE and Webkit will not execute any script with a version parameter in its type.
This is similar to the old-school language attribute:
<script language="javascript1.5"> v= '1.5'; </script>
...
This is generally considered obsolete, but it does work in more browsers. Recent Webkit browsers claim to support 1.7 and all IEs claim to support 1.3 only.
IE has its own versioning scheme for JScript, which you can sniff for through conditional comments:
<script type="text/javascript">
/*#cc_on #if (#_jscript_version>=5.5)
v= '5.5';
#end #*/
</script>
Other browsers you can't find out. As for ECMA-262 version, all modern browsers support the baseline of Third Edition (yeah, OK, there are small differences and outright bugs, especially in IE, but still). No browser supports large amounts of Fifth Edition yet, though that will come. (There was no Fourth Edition.)
None of this is very useful. As you can see, version numbers are all pretty woolly and don't really reflect what the browser supports terribly well. You are generally better off doing capability-sniffing. For example if you want ECMA-262-5's JSON features, see if window.JSON exists. If you want function binding, see if .bind exists on your function. You can often detect the lack of such features and patch in a native-JavaScript fallback for when they aren't available.
The syntactical features of JavaScript, however, can't be sniffed for. Just including something like a getter/setter definition in a block of JavaScript code will immediately give a syntax error in IE before you could sniff for their availability. But then this is usually not too big a problem because in practice you can't use these newer features anyway.

Its typically not worth trying.
If you want to make use of a specific feature, query to see if that feature is supported instead.
Even then, there's no guarantee that the feature is implemented correctly! ;-)
Case in point... IE supports document.getElementById(id); however unless you are using IE8 in IE8 Standards mode it can return one of many wrong results.

Another way you can do it, you can put inside try block some of it's syntax. for example:
try{
"use strict";
let x=1;//if it's works, then you have some supprot
console.info("Good news, ecma6 works ");
}catch(e){
console.warn("Sorry, but ecma6 still doesn't supported");
}

You can specify which version of Javascript should evaluate a block of code like this:
<script language="javascript1.5">
//this code gets run
</script>
More info here.

There are scripts out there that will generate a float containing the Javascript version. Here's a nice read on detection with Javascript: https://developer.mozilla.org/En/Browser_Detection_and_Cross_Browser_Support
Here is such script: http://www.docsteve.com/DocSteve/Samples/JS/js_version.html