Asp Forum - What Does This Code Do?

Gene Wirchenko

12/9/2015 6:44:00 PM

Hello:

Could someone please explain to me what this block of JavaScript
code is for? It is near the start of a Web page.

While I understand basic JavaScript, I do not know much idiom or
much of the object model.

I am stuck at the start. What does "!function" mean?

I suspect that this code was run through a compresser of some
sort. ("3e3" to save a byte over "3000" and the like.) I can
understand bits of it, but I can not parse it in total.

*** Start of Code ***
!function(a,b,c){function d(a){var
c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return
d&&d.fillText?(d.textBaseline="top",d.font="600 32px
Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56806,55356,56826),0,0),c.toDataURL().length>3e3):("simple"===a?d.fillText(String.fromCharCode(55357,56835),0,0):d.fillText(String.fromCharCode(55356,57135),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function
e(a){var
c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var
f,g;c.supports={simple:d("simple"),flag:d("flag"),unicode8:d("unicode8")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag&&c.supports.unicode8||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
*** End of Code ***

Sincerely,

Gene Wirchenko

3 Answers

JR

12/9/2015 8:18:00 PM

Em 09/12/2015 16:44, Gene Wirchenko escreveu:
>
> I am stuck at the start. What does "!function" mean?
>

"!function" is another form of writing an Immediately-Invoked Function
Expression (IIFE) in ES5:

(function() {
/* ... */
})();

Or

(function() {
/* etc. */
}()); // Douglas Crockford's preference.

We can also use unary operators instead of the wrapping parentheses,
if we don't care about the return value of the IIFE:

+function() { /*...*/ }();
!function() { /*...*/ }();
-function() { /*...*/ }();
~function() { /*...*/ }();

Even the void operator can be used:
void function () { /*...*/ }();

The whole point of using parens or an operator is to enforce an
expression context.

In ES2015 (aka ES6), we can replace IIFE with a block and a let declaration:
{ // open block
let tmp = ···;
···
} // close block

or with a module [2].

[2] <http://exploringjs.com/es6/ch_callables.html#sec_iifes-...

> I suspect that this code was run through a compresser of some sort.
> ("3e3" to save a byte over "3000" and the like.) I can understand
> bits of it, but I can not parse it in total.
>
> *** Start of Code ***
> !function(a,b,c){function d(a){var ... (snip)

There are some dev tools called "beautifiers" to make the code more
readable, such as http://jsbeaut... or
http://codebeautify.or.... Also you can try the Sublime-text
editor with a package to do so (jsBeautifier, jsFormat, etc.)

--
Joao Rodrigues

Thomas 'PointedEars' Lahn

12/9/2015 11:30:00 PM

[This follow-up accidentally went out as an e-mail at first; please ignore
that.]

Gene Wirchenko wrote:

> I suspect that this code was run through a compresser of some
> sort. ("3e3" to save a byte over "3000" and the like.) I can
> understand bits of it, but I can not parse it in total.

This source code was generated by a tool called a â??minifierâ?, which you can
deduce from observing that all variable and parameter identifiers are only
one character long where the characters have successive Unicode code points
(â??aâ?, â??bâ?, â??câ?, â??dâ?, â?¦).

Presumably you have seen this source code in a Web browser. If so, and you
have seen it in a script resource (usually with suffix â??.jsâ?) as well, you
can use the *built-in* developer toolsâ?? â??pretty printâ? feature to make the
source code easier readable.

For example, in Chrome Dev Tools it is toggled with the â??{}â? icon in the
left bottom corner of the source code pane of the â??Sourcesâ? tab; in
Firefox/Iceweasel it is available as â??Auto Prettify Minified Sourcesâ? in
the
Settings menu of the source code pane, and as â??Prettify Sourcesâ? in its
context menu, of the Web Developer Tools (not to be confused with the Web
Developer extension [0a]). Firebug 2.0.x [0b] also has the â??{}â? button; as
a point of note, it also has a â??Pretty Printâ? Command in the Command Editor
of the Console (triangle buttons) that works if block braces were used, and
a â??Copyâ? button that is suited to create (non-minified) one-line code for
bookmarklets out of the code in the Command Editor.

See also <http://devtoolsecret... (referred to by the FAQ in the
section â??Debuggingâ?), section â??Debugging Minified JavaScriptâ? there.

As indicated, you can then use an editor that supports ECMAScript
implementations insofar as that it can refactor a symbol in context to make
the source code even easier to understand. Eclipse JSDT [1] is one such
editor (Ctrl+1 â?? â??Rename in fileâ?, or Ctrl+2 â?? R by default), Visual Studio
Code (which is available even for Linux, and looks like a Sublime/Atom
clone ;-)) is another; Atom can do it with the js-refactor package, and
Sublime Text with Multiple Selections (built-in).

[0a] <http://chrispederick.com/work/web-deve...
[0b] <http://getfirebu...
[1] <https://www.eclipse.org/webtools... pp.
[2] <https://www.visualstudi...
[3] <https://at...
[4] <http://www.sublimetex...

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Thomas 'PointedEars' Lahn

12/9/2015 11:31:00 PM

[This follow-up accidentally went out as an e-mail at first; please ignore
that.]

Gene Wirchenko wrote:

> I suspect that this code was run through a compresser of some
> sort. ("3e3" to save a byte over "3000" and the like.) I can
> understand bits of it, but I can not parse it in total.

This source code was generated by a tool called a â??minifierâ?, which you can
deduce from observing that all variable and parameter identifiers are only
one character long where the characters have successive Unicode code points
(â??aâ?, â??bâ?, â??câ?, â??dâ?, â?¦).

Presumably you have seen this source code in a Web browser. If so, and you
have seen it in a script resource (usually with suffix â??.jsâ?) as well, you
can use the *built-in* developer toolsâ?? â??pretty printâ? feature to make the
source code easier readable.

For example, in Chrome Dev Tools it is toggled with the â??{}â? icon in the
left bottom corner of the source code pane of the â??Sourcesâ? tab; in
Firefox/Iceweasel it is available as â??Auto Prettify Minified Sourcesâ? in
the Settings menu of the source code pane, and as â??Prettify Sourcesâ? in its
context menu, of the Web Developer Tools (not to be confused with the Web
Developer extension [0a]). Firebug 2.0.x [0b] also has the â??{}â? button; as
a point of note, it also has a â??Pretty Printâ? Command in the Command Editor
of the Console (triangle buttons) that works if block braces were used, and
a â??Copyâ? button that is suited to create (non-minified) one-line code for
bookmarklets out of the code in the Command Editor.

See also <http://devtoolsecret... (referred to by the FAQ in the
section â??Debuggingâ?), section â??Debugging Minified JavaScriptâ? there.

As indicated, you can then use an editor that supports ECMAScript
implementations insofar as that it can refactor a symbol in context to make
the source code even easier to understand. Eclipse JSDT [1] is one such
editor (Ctrl+1 â?? â??Rename in fileâ?, or Ctrl+2 â?? R by default), Visual Studio
Code (which is available even for Linux, and looks like a Sublime/Atom
clone ;-)) is another; Atom can do it with the js-refactor package, and
Sublime Text with Multiple Selections (built-in).

[0a] <http://chrispederick.com/work/web-deve...
[0b] <http://getfirebu...
[1] <https://www.eclipse.org/webtools... pp.
[2] <https://www.visualstudi...
[3] <https://at...
[4] <http://www.sublimetex...

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

comp.lang.javascript

What Does This Code Do?

Gene Wirchenko

JR

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

x Login to ForumsZone