I find this to be a terribly obscure way to do a type conversion. The double exclamation mark in JavaScript basically means convert to Boolean, invert, then invert again. I documented this on my blog for quick reference as I keep running into it.
So you’re converting a value to a boolean, then inverting it, then inverting it again. Take a look at the three examples below that mean the same thing starting with the double exclamation mark.
// Really Confusing:
site.enable = !!webId;
// Less Confusing:
site.enable = (webId != 0) ? true : false;
// Easiest to understand in my opinion:
site.enable = (webId != 0);
In my last project I ran into an annoying nuance of IE9 but turned out to be IE (Internet Explorer) in general. IE does not like to acknowledge the maxLength property that you can set on a <textarea> tag. In FireFox as well as in Chrome you could set this property to the desired length and the browser would acknowledge this and stop user input at the desired length. Take a look at the following snippet.
In this snippet, the attribute to look at is maxlength=”1000″. Make sure you have this set as it works well in FireFox and in Chrome. Now, let’s talk about Internet Explorer. From my project it looks like IE7, IE8, IE9, and IE10 don’t care about the maxlength attribute and will let the user keep typing long beyond what you desire. So there are two pieces to this puzzle that I found fit my likings best. The first is we bind the <textarea> to the keyup event like so.
$('# limitChars').keyup(function () {
//Code
});
In binding the textarea to this keyup event it will be fired on every keystroke. So inside of this event we now just have to check the length of characters in the texarea and either do nothing or we will cut it down. So let’s add the code in the middle.
$('#limitChars').keyup(function () {
//Get the value of the textarea.
var valueOfInput = $("#limitChars").val();
//Check and see if its over our desired limit.
if (valueOfInput.length > 1000) {
//We reset the characters they have typed and cut it off to 1000.
$("#limitChars").html(valueOfInput.substr(0, 1000));
}
});
It causes a bit of weird behavior when they get to the limit but up until that limit it works quite well.
This weeks 30 second question. Why does YUI Minify fail on char and browsers do not in JavaScript?
In JavaScript the following line of code works on all browsers that I have seen:
var char = 15;
However, the YUI minifier chokes on this line of code. Why is this? And should that line not work on browsers? i.e. why are browsers allowing that line to work?
Let’s start out with Reserved words in Javascript. These words are words that you cannot use as variable or function names as they hold special meanings and instruction to the language. If you haven’t guess by now, ‘char’ is a reserved keyword in JavaScript. So in the above example we are trying to use a keyword as a variable name which causes the YUI Minify to throw a fit. To give you an example, open up this link and plug in the following and click compress.
[ERROR] 1:10:missing variable name
[ERROR] 1:0:Compilation produced 1 syntax errors.
org.mozilla.javascript.EvaluatorException: Compilation produced 1 syntax errors.
at com.yahoo.platform.yui.compressor.YUICompressor$1.runtimeError(YUICompressor.java:154)
at org.mozilla.javascript.Parser.parse(Parser.java:392)
at org.mozilla.javascript.Parser.parse(Parser.java:337)
at com.yahoo.platform.yui.compressor.JavaScriptCompressor.parse(JavaScriptCompressor.java:312)
at com.yahoo.platform.yui.compressor.JavaScriptCompressor.<init>(JavaScriptCompressor.java:533)
at com.yahoo.platform.yui.compressor.YUICompressor.main(YUICompressor.java:131)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
at java.lang.reflect.Method.invoke(Method.java:585)
at com.yahoo.platform.yui.compressor.Bootstrap.main(Bootstrap.java:21)
That answers the first part of the question, now onto the second part of the question. Why do browsers still allow this code snippet to work? Well, the keyword char is not actually used by the JavaScript language. So yes it’s labeled as a reserved keyword, but it is never been used as one. Browsers run their own compilers for JavaScript and tend to have more of a lenient stance on this subject. They want to allow as much of the JavaScript execute as they possibly can. So since there is not a repercussion of using this keyword, the browsers don’t take it into account as an issue. The YUI Minify is a more standards compliant engine that will follow standards, hence why it blows up when you try to use a keyword it recognizes as a word that’s off limits.
Recent Comments