CODE LAB: 5 Useful Javascript Snippets to always have close by

JavaScript is used everywhere online these days – to improve website interactivity, to validate information, and/or to improve a website outlooks.

JavaScript Beginner Tips: What You Need To Know? For starters, a few basics you need to know are:

• JavaScript can be turned off in the browser
• JavaScript will run each time a page is loaded
• JavaScript takes time to load on a slow Internet connection
• JavaScript is still ran from cached pages
• You can host JavaScript within a web page or externally from a .js file
• JavaScript is completely different than Java

It is also important to understand that JavaScript will actually lead to disaster when it's used in a wrong way.

Poorly configured and sloppy coded JavaScripts will slow your website and damage the overall site navigation. This in turn affect the return rate of your visitors (due to bad user experience) as well as search engine rankings (due to slow website response rates and bot crawling). To help validate my case here, put yourself in the shoes of a viewer. If a website you were visiting loaded slowly, was difficult to navigate, and in overall, unappealing – would you return to the site? I wouldn’t.

Below is a small list of things to think about when adding JavaScript to your website.

Is JavaScript required for the site to function properly? What will the site look like if the JavaScript was blocked?
Will the JavaScript harm the server performance?
Will adding the JavaScript help move your site in the direction you want it to go?
No, I am not trying to scare you away with these points.

In fact, don’t be afraid to use JavaScript on your websites as it provides tons benefits and, as mentioned, it's used by the majorities. The key point I am trying to get across here is don’t just keep adding JavaScript features to a site when they are unnecessary. Some sites are will need more JavaScript than the rest; some just need less – Just because one site is doing it doesn't mean you should do the same.

Preload your images This snippet will prevent your site from having that awkward time when it is only displaying part of the site; this not only looks bad but is also unprofessional. All you have to do is add your images to the preloadImages section and you are ready to roll.

														
<script type="text/javascript">
var images = new Array();

function preloadImages() {
		for (i = 0; i < preloadImages.arguments.length; i++) {
		images[i] = new Image();
		images[i].src = preloadImages.arguments[i];
		}
}

preloadImages("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg");
</script>
																
														

No Right-Click This snippet will prevent the viewer from being able to right-click on your page. This can discourage the average user from borrow images or code from your site.

														
<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>
																
														

Previous/Next Links This snippet is great if you have multiple pages on an article or tutorial. It will allow the user the browse between the pages with ease. It is also small and light weight from a resource point of view.

														
<a href="javascript:history.back(1)">Previous Page</a>
<a href="javascript:history.back(-1)">Next Page</a>
																
														

Show Formatted Date This snippet will allow you to display the current date anywhere on your webpage and does not need to be updated. Simply put it in place and forget about it.

														
Head:

<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>

Body:

<script type="text/javascript">showDate();</script>
																
														

Redirect with Optional Delay This snippet will allow you to redirect your viewers to another page and it has the option of setting a delay. The use of this snippet is pretty self-explanatory and it is a very valuable tool to have in your belt.

														
<script type="text/javascript">

setTimeout( "window.location.href =

'http://emilespamer.co.za;, 5*1000 );

</script>