Page Load © Copyright 2014, Fred McClurg All Rights Reserved

Loading a Page Discussion: It is often preferred to wait until the entire page is loaded before executing a script. The onload() event does not fire until the page has completed loading. 2

Event onload() via body Attribute Discussion: The “onload()” event can be defined as an attribute to the body element. Example: Event onload() via body Attribute function waitUntilLoaded() { alert( 'Page load complete' ); } 3 onloadViaBodyAttrib.html

Page onload() via window event Discussion: The “onload()” method can also be defined as an event to the window element. Example: Page onload() via window event function waitUntilLoaded() { alert( 'Page load complete' ); } window.onload = function() { waitUntilLoaded(); } 4 onloadViaWinEvent.html

Show/Hide Page Elements (HTML) HTML Example Code: Show/Hide Page Elements "I never met a bitter person who was thankful. Or a thankful person who was bitter." -- Nick Vujicic Australian motivational speaker born with a rare disorder characterized by the absence of all four limbs styleDisplayShowHide.html

Show/Hide Page Elements (JS) JavaScript Example Code: // show and hide biography function initializeBio() { document.getElementById("author").onclick = function() { var bioObj = document.getElementById("bio"); if ( document.getElementById("bio").style.display == "block" ) { // set CSS to hide the DIV document.getElementById("bio").style.display = "none"; } else { // set CSS to show the DIV document.getElementById("bio").style.display = "block"; } }; // now hide it on the initial page load. document.getElementById("bio").style.display = "none"; } window.onload = function() { initializeBio(); }; 6 styleDisplayShowHide.html