Scripts only once (block multiple)

Enter your name and see what happens.

by mkennedy

HTML

<html>
<body>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"> </script>
    
    <!-- INCLUDE OUR SCRIPT -->
    <script src="https://s3.amazonaws.com/michael-kennedy/blog/JavaScriptTwiceExamples/good-example.js" type="text/javascript"> </script>
    
    <h1>Sample Repeated JS File (good version)</h1>
    <div>
        Enter your name: 
        <input type=text /><br />
        <button id="nameIt">Tell Me Your Name</button>
    </div>
    <div id="nameOut"></div>
    
    <!-- Imagine lots more content here. -->
    
    <!-- OOPS, I DID IT AGAIN -->
    <!-- But, it's ok now! -->
    <script src="https://s3.amazonaws.com/michael-kennedy/blog/JavaScriptTwiceExamples/good-example.js" type="text/javascript"> </script>
        <script src="https://s3.amazonaws.com/michael-kennedy/blog/JavaScriptTwiceExamples/good-example.js" type="text/javascript"> </script>
</body>
</html>

CSS

body {padding: 10px;} 
h1 {font-size: 1.5em; padding: 10px; padding-left: 0px;}
#nameIt{margin: 5px; margin-left: 133px;}
#nameOut {color: red; font-size: 1.25em;}

JavaScript

/*
THE SCRIPT REFERENCED ON S3 IS BASICALLY THIS JS.
*/

/*
/// <reference path="blog.js" />

blog = {};
blog.comments = blog.comments || {};
blog.comments.debugMode = false;

blog.isFirstLoad = function(namesp, jsFile) {
    var isFirst = namesp.firstLoad === undefined;
    namesp.firstLoad = false;
    
    if (!isFirst) {
        console.log(
            "Warning: Javascript file is included twice: " + 
                jsFile);
    }

    return isFirst;
};


$(document).ready(function () {
    if (!blog.isFirstLoad(blog.comments, "comments.js")) {
        return;
    }

    // normal event handling stuff.
    $("#nameIt").click(function(e) {
        var name= $("input[type=text]").val();    
        $("#nameOut")
            .append("<div>Hi there " + name + "</div>");
    });
});



*/