How to: Handle JavaScript Onloads – Tutorial

arp14 JavaScript, Tutorial Tags: , , , , 0

Howdy folks,

This tutorial is for JavaScript beginners. Many beginners are confused often – why their code is not working properly. Onload event was and is the reason for many times. You many have wrote the code properly but you did not called it at right time.

You can use internal JavaScript within <script>, you can use inline javascript or you can use external JavaScript file (script.js).

Things to Remember: DOM, script position, onload event, functions

  1. Let DOM (Document Object Model) and other windows elements be loaded fully, and then you should call your script. If you load and execute the script before DOM loaded,  then you will get errors as there will not be any object you have wrote in your script to work with.
  2. If you use internal JavaScript, then your script must be placed after the object you have wrote within the <script> tag. Then the functions within script can be triggered without any event call.
  3. If you include a external JavaScript file within the head tag, then the script will be loaded before DOM and other window elements. So, pre-execution of any function will brings a result of “Function is Not Working!”. Then you must use a event to call the functions. Example of event: onload, onclick, onkeyup, etc.
  4. onload is a JavaScript built-in event that is called automatically when the prefix element is done loading. Example: window.onload
    javascript-_window.onload
  5. On a onload, you can use a regular function or standalone function like above. The alert function will be triggered automatically after DOM is loaded and window has finished loading all of it’s elements.
  6. You can also use jQuery function¬†“ready”. It is similar to regular JavaScript onload event but the difference is ready is triggered after just the DOM finished loading. It will not wait for other elements of windows like images, video, flash objects. It is better than regular onload function.
    $(window).ready(function() {
    	alert("Hello World!");
    });

Example of a Custom Onload Handler

onload.html

<html>
<head>
<title>handling onload - Cyberster's Blog</title>
<script src="onload.js" type="text/javascript" rel="javascript"></script>
</head>

<body id="body">
<h1>This is a sample page</h1>
<hr>
<div id="content">
This is a sample page...<br>
Here is all content...<br>
A quick brown fox jumped over the lazy dog.
</div>
</body>
</html>

onload.js

onloadRunFunc(funcOne);
onloadRunFunc(funcTwo);
onloadRunFunc(funcThree);

function onloadRunFunc(funcParam) {
	var prevOnload = window.onload;

	if (typeof prevOnload == "function") {
		window.onload = function () {
			if (prevOnload) prevOnload();
			funcParam();
		}
	} else window.onload = funcParam;
}

function funcOne () {
	document.getElementById("body").style.backgroundColor = "#ebebeb";
	document.getElementById("body").style.fontFamily = "'Comic Sans MS', tahoma, serif";
}

function funcTwo () {
	var content = document.getElementById("content");
	content.style.backgroundColor = "#ccc";
	content.style.color = "blue";
	content.style.border = "1px solid grey";
}

function funcThree () {
	var allTags = document.getElementsByTagName("*");

	for (var i=0; i<allTags.length; i++) {
		if (allTags[i].nodeName == "H1") {
			allTags[i].style.border = "1px solid red";					
			allTags[i].style.backgroundColor = "skyblue";			
			allTags[i].style.color = "darkblue";			
		}
	}
}

If you have any problem, please comment below. I will be back to you.

Thanks for your time to read this article.

Leave a Reply

Note: Your email address will not be published. Required fields are marked *