Strict JavaScript and "use strict"

[jamesbcox1980]

A few weeks ago, someone suggested that my PHP methods weren't quite acceptable for programming correctly in JavaScript. So I set out to learn how to program strictly in JavaScript.

I'm still learning JavaScript, but I'm learning more everyday. I figured learning to be more strict would help me to learn faster. Obviously I still need to learn more about DOM standards and browser compatibility.

My question is where can I find exact standards on programming using the "use strict"; statement? I read somewhere that browser writers are only just beginning to look at making them compatible with this statement, so there's no way for me to test my strictness. And to make matters worse, JSLint doesn't even find "strict" errors. It only checks for the use of the "use strict"; statement.

For example, I was trying to practice some simple problem solving skills and decided to write a JavaScript version of the binary clock app on the iPhone, just for fun. I figured it would be a good chance to figure out strict code, so I put it all in JSLint.

I plan to add functionality to it for dates, epoch time, displaying actual time, color choices, etc. That way, I'll be building a program and building good coding form at the same time:

/*global window, document, setInterval, Date, addEvent, changeDigits, clockToBinaryArray, doccc, leadZero, parseInt, startClockInt */

"use strict";

function addEvent(target, eventName, handlerName) {

    //Cross browser event handling
    if (target.addEventListener) {
        target.addEventListener(eventName, handlerName, false);
    }
    else if (target.attachEvent) {
        target.attachEvent("on" + eventName, handlerName);
    }
    else {
        target["on" + eventName] = handlerName;
    }
}

function leadZero(str, len) {
    var outputBin, z;

    // Use a minumum of 4 digits in binary.  Add leading zeros.  Better way to do this?
    outputBin = "";
    for (z = 0; z < (len - str.length); z += 1) {
        outputBin += "0";
    }
	//add the actual binary string
    outputBin += str;

    return outputBin;
}

function changeDigits(binary) {
    var digits, switches, digID, bcclass;

    //Digits = columns, switches = rows, loop through and change the class to use a different background (lights up the switch)
    for (digits = 0; digits < 6; digits += 1) {
        for (switches = 0; switches < 4; switches += 1) {
            //Build the id of the cell
            digID = "dig" + digits + "-" + switches;
			//Build class name based on 1 or 0, depending on the binary string
            bcclass = "bc-" + binary[digits].charAt(switches);
            document.getElementById(digID).setAttribute("class", bcclass);
        }
    }
}

function setTrueTime(timeStr) {
    var trueTime;

    // The HTML element to contain the normal time for testing
    trueTime = document.getElementById("trueTime");
	
	// if none of these work, something's up... I know there's another way to do this with DOM methods.
	if (document.innerText) {
        trueTime.innerText = timeStr;
    }
    else if (document.textContent) {
        trueTime.textContent = timeStr;
    }
    else {
        try {
			// This is not DOM standard. Need to replace all of this with DOM methods.
		    trueTime.innerHTML = timeStr;
		}
		catch (e) {
			// throw an error for testing
			// throw new Error(e.msg);
		}
    }
}

function clockToBinaryArray() {
    var rightNow, timeString, newBin, binDig, newBinDig, stHours, stMinutes, stSeconds, stTime;

    rightNow = new Date();

    // Create a string of actual time to convert to binary and for comparison
    stHours = leadZero(rightNow.getHours().toString(), 2);
    stMinutes = leadZero(rightNow.getMinutes().toString(), 2);
    stSeconds = leadZero(rightNow.getSeconds().toString(), 2);
    timeString = stHours + stMinutes + stSeconds;

    //An array containing each subset of binary for each corresponding digit (loop through standard time string)
    newBin = [];
    for (binDig = 0; binDig < timeString.length; binDig += 1) {
        newBinDig = parseInt(timeString.charAt(binDig), 10);
		//convert to binary and add leading zeros
        newBin.push(leadZero(newBinDig.toString(2), 4));
    }
	// change the class of each cell using an array of binary numbers
    changeDigits(newBin);

    //For testing, set standard time to compare to binary time
    stTime = stHours + ":" + stMinutes + ":" + stSeconds;
	//setTrueTime(stTime);
}

addEvent(window, "load", function () {
    // set the clock to run every tenth of a second
    window.startClockInt = setInterval(clockToBinaryArray, 100);
});

Any suggestions on how I can make this more "strict", so that when browsers do start using it, my code will still work?