Today, we have a lot of JavaScript libraries like jQuery, MooTools, Qooxdoo, DOJO, MochiKit, X library, Fork etc. are available to bring the websites to life. Such libraries made the things very easier on the client side, providing users a way to use as well as develop plugins and extensions with them. Lightbox from jQuery and MooFX from MooTools are two very common examples of such plugins. You can see a list of more JavaScript libraries here.

Useful JavaScript Snippets

Using JavaScript libraries is simple, you can download their latest version for free from their official websites and upload to your server or can directly access them from their servers.

You can experience a lot of high-end effects with the hundreds of plugins available for JavaScript libraries, but if you emphasize on making your website lighter, you might like to do the things with normal JavaScript, as using a JavaScript library may slow down down your website – can cause the increased load times.

Some things are really very simple to do with Websites that using a JavaScript library would be a big deal. People often use simple JavaScript to obtain basic features like client date, random text, e-mail validation, printing and bookmarking features and many more.

Below given are 10 very basic, yet useful and handy snippets, which can help you achieve certain basic features for your website.

Instructions to implement the snippets:

  • Put the code labeled as Script in the head section of your web document, i.e. below <head> and above </head> tag.
  • Put the code labeled as Markup in anywhere in the body section of your web document, i.e. below <body> and above </body>.
  • If you still feel troublesome, you should follow some of the W3Schools’ basic tutorials for HTML and JavaScript.
  1. E-mail Validation Script:

    JavaScript:

    <script type="text/javascript">
function validateEmail(theForm) {
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(theForm.email-id.value)){
return(true);
}
alert("Invalid e-mail address! Please enter again carefully!.");
return(false);
}
</script>

    HTML:

    <form onSubmit="return validateEmail(this);" action="">
E-mail Address:
<input type="text" name="emailid" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
  2. Comma Separator Script:

    JavaScript:

    <script type="text/javascript">
function addCommas(num) {
  num += '';
  var n1 = num.split('.');
  var n2 = n1[0];
  var n3 = n1.length > 1 ? '.' + n1[1] : '';
  var temp = /(d+)(d{3})/;
  while (temp.test(n2)) {
    n2 = n2.replace(temp, '' + ',' + '');
  }
  var out = return n2 + n3;
  document.write(out);
}
</script>

    HTML:

    <script type="text/javascript">addCommas("4550989023");</script>
  3. Disable right-click Script:

    JavaScript:

    <script type="text/javascript">
function f1() {
  if(document.all) { return false; }
}
function f2(e) {
  if(document.layers || (document.getElementById &! document.all)) {
    if(e.which==2 || e.which==3) { return false; }
  }
}
if(document.layers) {
  document.captureEvents(Event.MOUSEDOWN);
  document.onmousedown = f1;
}
else {
  document.onmouseup = f2;
  document.oncontextmenu = f1;
}
document.oncontextmenu = new function("return false");
</script>
  4. Disable text selection Script:

    JavaScript:

    <script type="text/javascript">
  window.onload = function() {
    document.onselectstart = function() {return false;} // IE
    document.onmousedown = function() {return false;} // Mozilla
  }
  /* Below code is for those who want it with a particular element; say <div id = "the-container-id"> */
  window.onload = function() {
    var element = document.getElementById('the-container-id');
    element.onselectstart = function () { return false; } // IE
    element.onmousedown = function () { return false; } // Mozilla
}
</script>
  5. Random quotes Script:

    JavaScript:

    <script type="text/javascript">
  writeRandomQuote = function () {
    var quotes = new Array();
    quotes[0] = "Action is the real measure of intelligence.";
    quotes[1] = "Baseball has the great advantage over cricket of being sooner ended.";
    quotes[2] = "Every goal, every action, every thought, every feeling one experiences, whether it be consciously or unconsciously known, is an attempt to increase one's level of peace of mind.";
    quotes[3] = "A good head and a good heart are always a formidable combination.";
    var rand = Math.floor(Math.random()*quotes.length);
    document.write(quotes[rand]);
  }
  writeRandomQuote();
</script>

    HTML:

    <script type="text/javascript">writeRandomQuote();</script>
  6. Formatted date Script:

    JavaScript:

    <script type="text/javascript">
  function showDate() {
    var d = new Date();
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1; //months are zero based
    var curr_year = d.getFullYear();
    document.write(curr_date + "-" + curr_month + "-" + curr_year);
  }
</script>

    HTML:

    <script type="text/javascript">showDate();</script>
  7. Search box effect Script:

    JavaScript + HTML:

    <input type="text" value="Search..." onfocus="if(this.value=='Search...') this.value='';" onblur="if(this.value=='') this.value='Search...';" />
  8. Browser history:

    HTML:

    <a href="javascript:history.back(1)">Previous Page</a> | <a href="javascript:history.back(-1)">Next Page</a>
  9. Add to Bookmark Link:

    HTML:

    <a href="javascript:window.external.AddFavorite('http://www.yoursite.com', 'Your Site Name')">Add to Favorites</a>
  10. Print link:

    HTML:

    <a href="javascript:window.print();">Print Page</a>

If you have any queries about the above given scripts, feel free to reply back with it in comments. I hope you enjoyed these snippets, have a good time.