Safari browser reports error using classes in javascript - 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.

Related

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

Javascript strict mode and versions

I want to use let in my code. Like so:
"use strict";
var b = 5;
for(let i =0;b > i; i++){
alert(i);
}
This is working in Chrome and IE. But not in Firefox.
Wrapping my code in script tags with the type attribute set to "application/javascript;version=1.7" like so:
<script type="application/javascript;version=1.7">
This fixes the problem in Firefox, but breaks the code in Chrome and IE.
The error Firefox gives me when i execute the first code snippet:
SyntaxError: let is a reserved identifier
Is there any way to support all browsers?
Avoid using let unless you're using a transcoder/transpiler to convert your js to code that is currently widely supported.
Let became standard in ECMA-262 but it'll be several years before a large enough portion of visitors support it natively to use it.
The following have basic support for let, everything below will break:
Chrome 41+
Gecko 2.0
IE11
Opera 17+
Safari ??
The above browsers likely have inconsistent implementations at this point, so it's best to avoid it.
Check out babel to transform.
Let as defined in ES2015 (ES6) is not yet supported in Firefox. It has an old version of let that is non standard and works slightly differently.
The current way to support it in all browsers is to use a transpiler like BabelJS.

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

Default parameter behaviour in Firefox and Chrome

So I was fiddling around with function overloading (I believe thats the correct term for this). Heres what happened:
function example(a=3,b=6){
console.log(a);
console.log(b);
}
In firefox, this did exactly what I expected.
example()
3
6
example(17)
17
6
example(10,20)
10
20
However, when I tried this in the console in Chrome, it failed to even create the function. I got error
SyntaxError: Unexpected token =
Why is this happening?
Default values to functions are part of ECMA Script 6 specifications. You might be using the latest version of FireFox in which they would have implemented it.
All the browsers which havn't implemented the ES6 specifications won't be able to parse the expression. That is why it is failing.
You can check Kangax's compatibility table to know where your browser supports it or not.

Method compareDocumentPosition unsupported only in IE9

In one of my web pages, I am using the following line of JavaScript:
return !!(a.compareDocumentPosition(b) & 16);
However, only in IE9, I am getting the following error:
Object doesn't support property or method 'compareDocumentPosition'
Other browsers work fine. Does anyone know of an available fix or workaround for this?
Internet Explorer supports compareDocumentPosition only in IE9 mode. Make sure you have at the beginning of your markup and document.documentMode returns 9

Categories