Javascript Grokking, Part 1: Function Properties and Assignments

So. I’ve been wading my way through The Javascript Bible and I’ve picked up a few things. After getting grilled by several advanced developers in the past couple of weeks, I realized my Javascript wasn’t NEARLY at the level I thought it was. In fact, it’s rather sloppy. I know how to do a great many things – but the question of why things work, or why things should be done in a certain way, is one that I’ve been sorely neglecting. 

And so, in my grokking quest, I’m going to be documenting things which junior-to-mid level javascript programmers might not be aware of, especially if they’re self-taught. I’ll start with function properties!

1) The caller property

Say you have the following functions:

function foo() {
function callMe() {
var myCaller = callMe.caller;


 // returns ‘null’ 

 // returns foo()

The caller is the function that called your function. When callMe is called directly, its caller is null. When foo calls callMe, its caller is foo.

2) Calling Functions the Right Way

Take the following two buttons with onclick assignments:


function foo() {
<input id="btn1" type="button" />
<input id="btn2" type="button" />
<input id="btn3" type="button" />
<script type="text/javascript">
document.getElementById("btn1").onclick = foo();
document.getElementById("btn2").onclick = foo;
document.getElementById("btn3").onclick = function() { foo(); }


There are important differences between these three methods of assignments. If you try running this bit of html and javascript, as soon as the page launches you’ll see


in your console. Why? This is being caused by

document.getElementById("btn1").onclick = foo();

.This Post in Stack Overflow describes the difference between these three onclick assignments beautifully:

When you leave the parentheses on the function reference, what you’re basically saying is:

Evaluate the foo function and assign the result to onclick

when what you really want to do is assign the function reference to the click handler:

document.getElementById("btn1").onclick = foo;

Leave out the parentheses instead, and you’ll bind the foo function to the onclick. What this instead says is:

Assign the function foo to the click handler.

You are essentially assigning the function to the variable as a first-class object (click to learn more), or a reference to a function.

As an aside, my personal preference is to always use an anonymous function wrapper. Sometimes you need to be able to pass parameters into your function, and this makes sure that you can more easily do so:

document.getElementById("btn1").onclick = 
    function() {

3) Function Overloading and the Arguments Property

Take the following function:

function checkArgs() {
alert("There are" + arguments.length + arguments and the first is " + arguments[0]);

5 Timesaving CSS Tools to Make your Site Pretty

1. Animate.css

Problem: You need CSS3 animations, and you need em fast.
Solution: Dan Eden’s Animate.css. You can choose from a variety of effects, including fade, bounces, rotations, and slides. Simply download the file from github, drop it into your page’s <head> section, and then add the class “animated” to the element you’d like to animate. Then add a second class with the animation you’d like to add, and you’re done. You can configure the animation’s settings in your css file like so:

#yourElement {
    -vendor-animation-duration: 3s;
    -vendor-animation-delay: 2s;
    -vendor-animation-iteration-count: infinite;

Demo | Download

2. CSS3 Pie

Problem: Your website still supports IE8, and you need to add a border-radius. Or perhaps you need linear gradients and box-shadows going all the way back to IE6? (Now that since IE6 usage has dipped below 7%, you hopefully won’t have to support it, but just in case…)
Solution: CSS3 Pie to the rescue! Simply download css.pie, add it to the appropriate directory on your server, and specify in the css the border-radius as you normally would. Then add behavior: url(‘pie.css’); as a final attribute.

#YourElement {
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
behavior: url('pie.css');

Demo | Download

3. Spritebox

Problem: A designer has handed you a giant pre-assembled sprite file, and you don’t feel like hand-coding all those background positions.
Solution: In comes Spritebox, an online click-and-drag tool that will allow you to visually select the background positions for all your mouseover and mouseout images simultaneously, spitting out a single css file once you’re done. This tool became my best friend when I built Camps @ The JCC, which has around 100 separate mouseover and mouseout images in seven different menus.

Go To Spritebox

4. CSS Sprites (

Opposite problem: You have dozens of mouseover and mouseout images which you’d like to consolidate into a single sprite image.
Solution: CSS Sprites will allow you to upload all of your images at once, consolidate them into a single file for download, and spit out matching css code. Neat!

Go To CSS Sprites


5. CSS Color Scheme Designer

Problem: Your clients wants fuschia. Yeah, yellow and fuschia. And some green! How on earth are you going to make this work without looking hideous?

Solution: CSS Color Scheme Designer 3 allows you to select your color and will offer a variety of swatches to meet your needs. Choose your color in the Hues tab. Use the Adjust Scheme tab to edit the saturation, contrast and brightness, and the Adjust Variants submenu to edit the kinds of additional colors presented in your palette, and present some improved suggestions to your cient. Or you can use the color swatch tool to enter the precise hues they insists on, and use the Light Page Example and Dark Page Example tabs to show how [awful] they might look on a live site! You can edit the swatch selection further using the Colorblind menu at the top, choose between Web, RGB and Opaltone colors, and export your file as a photoshop palette (ACO), GIMP Palette (GPL), HTML+CSS, XML or Text, depending on your color space. This tool is rated A for awesome.

Go to CSS Color Scheme Designer 3