Υπάρχουν μερικές ρουτίνες javascript που χρησιμοποιώ σε κάθε νέο project εδώ και λίγο καιρό, συνήθως τις βάζω σε ένα αρχείο common.js που φορτώνεται σε κάθε σελίδα.

Για αρχή έχω την addEvent (και τις συνοδευτικές της) - ορίστε ο κώδικας και η σχετική ανάλυση. Χρησιμοποιείται συνήθως για να εκκινήσει άλλες ρουτίνες μόλις φορτώσει η σελίδα και εφόσον η javascript υποστηρίζεται ΚΑΙ είναι ενεργή (progressive enhancement). Εξυπηρετεί ιδιαίτερα σε περίπτωση που χρησιμοποιούμε και επιπλέον βιβλιοθήκες javascript που απαιτούν να εκκινήσουν onload (όπως η Lightbox JS που έχω σε κάποια άρθρα) μαζί με π.χ. την focusLabels:

function focusLabels() {
	if (!document.getElementsByTagName) return false;
	var labels=document.getElementsByTagName('label');
	for (var n=0; n<labels.length; n++) {
		if (!labels[n].getAttribute('for')) continue;
		labels[n].onclick=function() {
			var id=this.getAttribute('for');
			if (!document.getElementById(id)) return false;
			var element=document.getElementById(id);
			element.focus();
		}
	}
}

η οποία χρησιμοποιείται για να δίνει το focus στο πεδίο που αντιστοιχεί στο label που κάνουμε κλικ, ή, με πιο απλά λόγια, ο χρήστης μπορεί να κάνει κλικ στο label ενός radio ή checkbox και να ενργοποιήσει το control. Δουλεύει φυσικά και για τα text inputs.

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
	node = document;
	if ( tag == null )
	tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
	for (n=0, j=0; n<elsLen; n++) {
		if (pattern.test(els[n].className) ) {
			classElements[j] = els[n];
			j++;
		}
	}
	return classElements;
}

Η getElementsByClass συμπληρώνει τις document.getElementById και document.getElementsByTagName που είναι διαθέσιμες μέσω του DOM και μας βοηθούν να αναζητούμε elements στην σελίδα με βάση το class τους. Συμπληρωματική είναι και η insertAfter:

function insertAfter(newElement,targetElement) {
	var parent = targetElement.parentNode;
	if (parent.lastChild == targetElement) {
		parent.appendChild(newElement);
	} else {
		parent.insertBefore(newElement,targetElement.nextSibling);
	}
}

Επίσης, για εφαρμογές AJAX χρησιμοποιώ την ακόλουθη:

function getHTTPObject() {
	var xmlhttp;
	/*@cc_on
	@if (@_jscript_version >= 5)
		try {
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (E) {
				xmlhttp = false;
			}
		}
	@else
		xmlhttp = false;
	@end @*/
	if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
		try
		{
			xmlhttp = new XMLHttpRequest();
		} catch (e) {
			xmlhttp = false;
		}
	}
	return xmlhttp;
}
var http=getHTTPObject();

και τέλος αν έχω καλάθι αγορών ή τιμοκαταλόγους ή τέλος πάντων θέλω να δείξω τιμές σε «ελληνική» μορφή χρησιμοποιώ την formatCurrency:

function formatCurrency(num) {
	num = num.toString().replace(/\$|\,/g,'');
	if(isNaN(num)) {
		num = "0";
	}
	sign = (num == (num = Math.abs(num)));
	num = Math.floor(num*100+0.50000000001);
	cents = num%100;
	num = Math.floor(num/100).toString();
	if(cents<10) {
		cents = "0" + cents;
	}
	for (var n=0; n<Math.floor((num.length-(1+n))/3); n++)
	num = num.substring(0,num.length-(4*n+3))+','+    num.substring(num.length-(4*n+3));
	return (((sign)?'':'-') + num.replace(",",".") + ',' + cents);
}

Αυτές είναι οι βασικές ρουτίνες που έχω στο common.js και με βάση αυτές αλλά και όσες custom functions χρειαστώ, χτίζω σιγά-σιγά ένα site. Σε κάποιο επόμενο άρθρο θα εξηγήσω την διαδικασία σχεδιασμού ενός site από το μηδέν μέχρι τα πρώτα κομμάτια κώδικα.