A useful function that Javascript seems to be missing is an onready or onload function. jQuery has such abilities in the form of .ready() and vanilla JS has not got a simple way to carry out this function. Having this ability means that all scripts can be loaded within the head tags. Fortunately there is a way to do this in vanilla, the same basis as how jQuery runs it.

document.onreadystatechange = function() {
	if (document.readyState == "complete") {
		// Useful Code Goes Here
	}
};

This code runs a function each time the ready state changes. The ready state of a document changes at least twice when a page loads. The reason for this is that it changes first to "interactive" and then to "complete". When it is "complete" the document is loaded and this is when we can run our scripts.

Another missing ability in Javascript is the lack of changing multiple properties at once, namely adding/removing attributes or changing styles. The best way I have found to combat this is to use JSON keys and keywords to name and define properties. Using JSON in this way allows us to change as many properties as we need at once in a clean and reliable way.

function addAttributes(elem, attrs) {
	for (var key in attrs) {
		elem.setAttribute(key, attrs[key]);
	}
}
function applyStyle(elem, attrs) {
	for (var key in attrs) {
		elem.style[key] = attrs[key];
	}
}
addAttributes(element,
			  {
			  	"x": 100,
				"y": 250,
				"fill": "#ff6760"
			  });
applyStyles(element,
			{
			  "display": "inline-block",
			  "width": "400px"
			});

By using the for ...in function we can loop through each key in the JSON string. Then we can use the values of "key", "attrs" and "elem" as we need. Using a JSON string means that you get the benifits of being able to use variables, and numbers as parameters but by default will be passed as strings.

Events can often become tricky, especially if they are touch events, I use switches, although switches can be used for many things. However I use switches because they keep an ordered workflow. One issue with switches is that each case statement must be broken, if it is not broken then it will run each statement until it hits a break. This being said it is no more problematic than a bad loop.

switch (event.type) {
	case "touchstart": type="mousedown"; break;
	case "touchend": type="mouseup"; break;
	default: break;
}
switch (event.button) {
	case 0: console.log("Left Click"); break;
	case 2: console.log("Right Click"); break;
	default: break;
}

The first switch is to replace a touchevent for a mouseevent meaning that you only need to account for 1 type of event. I run the event.type value into a switch, the case statements then check for a match in values. Hence "touchstart" and "touchend" if the case is a match then it runs that line. The "type=" changes the type of event to a mouse event while keeping all other event attributes.

The second switch is used for differentiating between mouse buttons. On left click the mouse.button value will be equal to 0 and right click will be 2. The appropriate code can then be run from the output of each case statement.