$ outside of jQuery

Question

This app https://developer.mozilla.org/en-US/demos/detail/meet-me-there/launch accepts uploaded photos, attaches a qr code to them, and then allows you to share them. I've attached below the JavaScript for everything except the QR functionality. The app doesn't use jQuery, but at the beginning it assigns a function to the $.

  window.onload = function(){
                    var $ = function(id){
                            console.log(id);
                            return document.getElementById(id);
                        },

When I run the app with the console.log in the above position, it shows that quite a few 'ids' are getting passed through that console.log(id). As the file loads, it logs 'surface', 'cam' and 'upload' and, as you engage the app, it logs 'result', 'sharer', 'uploadedURL' and many others. Problem is that I don't see how everything keeps getting passed through that function for the console.log to log the different 'id's at that point in the code. Therefore, I wonder what the significance of '$' is in this context (no jQuery). Specifically, by creating that '$' function, is it called anytime that any of the other events with $ are run, such as $('upload').onclick = function(){...

Is it working similar to how adding a prototype is working in jquery by using $.prototype.function() in jquery. If so, where does it get this functionality from if there's no jQuery.

window.onload = function(){
                var $ = function(id){
                        console.log(id);
                        return document.getElementById(id);
                    },
                    canvas = $('surface'),
                    ctx = canvas.getContext('2d'),
                    watcher, loc='No location provided', located;

                $('cam').onchange = function(event){
                    console.log(event);
                    console.trace();
                    var files = event.target.files,
                        file;

                    if (files && files.length > 0) {
                        file = files[0];
                        try {
                        var URL = window.URL || window.webkitURL || window.mozURL;
                        var imgURL = URL.createObjectURL(file);

                        var img = new Image();
                            img.id = "tester";

                        //Load it onto the canvas
                        img.onload = function() {
                            console.trace();

                            canvas.width = this.width;
                            canvas.height = this.height;
                            $('info').innerHTML = ("Width: " + this.width + "px, Height: " + this.height + "px");
                            $('result').width = 400;
                            $('result').height = (400 / (this.width/this.height)) >> 0;
                            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                            var codeSize = (canvas.height/4) >> 0;
                            var imgn = new Image(); 
                            imgn.onload = function(){
                                ctx.drawImage(imgn, (canvas.width-5- codeSize), (canvas.height-5-codeSize), codeSize, codeSize);
                                $('result').src = canvas.toDataURL();
                            }
                            imgn.src = (QR.encode(loc, codeSize, 5));
                        }

                        img.src = imgURL;

                        } catch (e) {
                            console.log("error: " + e);
                        }
                    }
                },
                // borrowed this functionality from cgack's demo
                // https://developer.mozilla.org/en-US/demos/detail/snap-and-share 
                $('upload').onclick = function(){
                    $('infomsg').style.display = 'block';
                    var url = "http://api.imgur.com/2/upload.json",
                    params = new FormData(),
                    http = new XMLHttpRequest();

                    params.append('key','29a8b1db1d8fda0df87006def2307242');
                    params.append('image',canvas.toDataURL().split(',')[1]);

                    http.open("POST", url);
                     http.onload = function() {
                        var url = JSON.parse(http.responseText).upload.links.imgur_page;
                        $('uploadedUrl').href = url;
                        $('uploadedUrl').innerHTML = url;
                        $('shareFb').href = ("http://www.facebook.com/sharer.php?u="+url);
                        $('shareTwitter').href = ("http://twitter.com/intent/tweet?url="+url);
                        $('sharer').style.display = 'block';
                         $('infomsg').style.display = 'none';

                    };
                    http.send(params);
                    console.log(params);
                };
                watcher = navigator.geolocation.watchPosition(function(position){
                    console.trace();
                    console.log("navigator"); 
                    loc = "geo:" + position.coords.latitude + "," +position.coords.longitude;
                    located = true;
                }, function(error){
                    if(error.code == error.PERMISSION_DENIED || error.code == error.POSITION_UNAVAILABLE)
                        alert('damn, we were not able to locate you. sorry.');
                    }
                );
            };

Answer 1

$ is just a variable name, like any other. It has no special meaning.

"Problem is that I don't see how everything keeps getting passed through that function for the console.log to log the 'id' at that point in the code."

Any time you see $, it's a reference to the function. So a () after it invokes it with the given argument. It's just like any other function, just with a funny name referencing it.

"Therefore, I wonder what the significance of '$' is in this context (no jQuery). Specifically, by creating that '$' function, is it called anytime that any of the other events with $ are run"

Again, no real significance. It's just a function name. If you renamed all the instances of $ to byId, it would behave the same.

window.onload = function(){
           //   var $ = function(id){
                var byId = function(id){
                        console.log(id);
                        return document.getElementById(id);
                    },
                    canvas = foo('surface'),
                    ctx = canvas.getContext('2d'),
                    watcher, loc='No location provided', located;

                byId('cam').onchange = function(event){
                   /* a bunch of code */
                },
                byId('upload').onclick = function(){
                   /* a bunch of code */
                };
                // rest of the code
            };