Lets apply the Best practices to the Image Gallery .
/*** index.html ***/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Image Gallery</title> <link rel="stylesheet" href="styles/layout.css" media="screen"> </head> <body> <h1>Snapshiots</h1> <ul id="imagegallery"> <li> <a href="images/fireworks.jpg" title="A fireworks display"> Fireworks </a> </li> <li> <a href="images/coffee.jpg" title="A cup of black coffe"> Coffee </a> </li> <li> <a href="images/rose.jpg" title="A red, red rose"> Rose </a> </li> <li> <a href="images/bigben.jpg" title="The famous clock"> Big Ben </a> </li> </ul> <div id="placeholder"> <img src="images/placeholder.gif" alt="my image gallery" > </div> <div id="description"> <p>Choose an image</p> </div> <script type="text/javascript" src="scripts/showPic.js"></script> <script type="application/javascript"> // alert (description.childNodes.length); // window.onload = countBodyChildren; //var description = document.getElementById("description"); //alert (description.childNodes[2].nodeValue); </script> </body> </html>
/*** showPic.js ***/
/** * Created by Administrator on 9/9/2015. */ function addLoadEvent(func) { var oldonload = window.onload; if( typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function prepareGallery() { if( !document.getElementsByTagName ) return false; if( !document.getElementById ) return false; if( !document.getElementById("imagegallery") ) return false; var gallery = document.getElementById("imagegallery"); var links = gallery.getElementsByTagName("a"); for(var i=0; i<links.length; i++) { links[i].onclick = function() { return showPic(this) ? false : true; } } } /* you can use this function to count how many children nodes the body element contains */ function countBodyChildren() { var body_element = document.getElementsByTagName("body")[0]; alert(body_element.nodeType); alert( body_element.childNodes.length ); } function showPic(whicPic) { if( !document.getElementsByTagName ) return false; if( !document.getElementById("placeholder") ) return false; var source = whicPic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); var img = placeholder.getElementsByTagName("img")[0]; img.setAttribute("src", source); if(document.getElementById("description")) { var text = whicPic.getAttribute("title") ? whicPic.getAttribute("title") : 3; var description = document.getElementById("description"); var desc_p = description.getElementsByTagName("p")[0]; desc_p.firstChild.nodeValue = text; } return true; } addLoadEvent( prepareGallery );
/*** layout.css ***/
body{ font-family: "Helvetica", "Arial", serif; color: #333; background-color: #ccc; margin: 1em 10%; } h1{ color: #333; /*background-color: #777;*/ } a{ color: #c60; background-color: transparent; font-weight: bold; text-decoration: none; } ul{ padding: 0; } li{ float: left; padding: 1em; list-style: none; } img { display: block; clear: both; }
I think there is a function you can use in the furture, thats the addLoadEvent() :
function addLoadEvent(func) { var oldonload = window.onload; if( typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } }
This is a good plan for the future expansion.
This effectively creates a queue of functions to be executed when the page loads.
To add functions to this queue, I just need to write :
addLoadEvent( firstFunction );
addLoadEvent( secondFunction );