need update general JS syntax info

[auntnini]

In a recent post -- http://www.dynamicdrive.com/forums/showthread.php?t=59307 -- I noticed the following code, the syntax of which puzzles me:



<script type="text/javascript">
(function() {
function findwidth(){
var width = document.getElementById('test').offsetWidth;
alert(width); }
if (window.addEventListener){
window.addEventListener('load', findwidth, false);
} else if (window.attachEvent){
window.attachEvent('onload', findwidth); }
})();
</script>
===========================
<script type="text/javascript">
(function(){
var width = document.getElementById('test').offsetWidth;
alert(width);
})();
</script>




Flash EMCA Script version (which seems to be ahead of browser support for JavaScript) has been using addEventListener for a while so I somewhat comprehend that. But the extra (parentheses) encompassing the function is a mystery to me. Can someone point me toward some up-to-date references and/or give me "keywords" to search for?

Also so noted


" ... please post a new question in a new thread .... Do not interrupt an existing thread, especially not before the original person has had a chance to respond to the initial advice."


Forgive me, my trespasses.

[auntnini]

Reading Shelley Powers' "JavaScript Cookbook" O'Reilly Media Inc. © 2010, I came across an explanation of mysterious extra () parentheses encompassing code seen on DD. Following the page 112 example "6.10 Using an Anonymous Function to Wrap Global Variables," the Discussion noted:

The functionality ... has existed for some time, but I've only seen anonymous functions as a way to scope what would normally be global variables in John Resig's work with the jQuery framework library. It's a way of wrapping jQuery plug-in functions so that the code can use the jQuery dollar sign function ($) when the jQuery plug-in is used with another framework library, such as Prototype, which also uses the dollar sign function.



//swap blue/red colors
( function ($) { $.fn.flashBlueRed = function {
return this.each (function () {
var hex = $.bbConvertRGBtoHex ($()this).css(b"background-color"));
if (hex == "#0000ff") { $(this).css("background-color, "#ff0000"); } <
else { #(this).css)("background-color" , "#0000ff"); }
});};
}) () [ #1 if no parameters in code block]
or
}) (jQuery) [ #2 if passing parameter into function]




The approach consists of surrounding the code block with parentheses, beginning with the anonymous function syntax, and following up with the code block, and then the final function closure. It could be ...[#1 or #2]...
Now you can use as many "global" variables as you need without polluting the global space [scope] or colliding with global variables used in other libraries.

[sic] Any typos or errors are mine, not the quoted author's fault. While this may be simplistic JS101 to hardened OOPy programmers, it might be newsy to some others like me who couldn't figure out the extra () parentheses wrapping the function.