profexorgeek/simple-js-app.js

## simple-js-app.js
<!DOCTYPE html>
<html>
    <head>
        <title>Modular JavaScript Example</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

        <script>
            //==========================================================================
            // This is an application, we write JavaScript this way so that
            // everything we write is self-contained and we won't risk having
            // variables or functions with the same name as a library we use!
            //
            // We start by setting a variable, which is our application object
            // to the RESULT of a function. Surrounding the function with
            // parenthesis is not actually necessary but it lets other
            // developers know that you intend for this function to be
            // executed immediately.
            //
            // This function requires jQuery. It expects an argument named
            // "$" to be passed when the function is executed.
            //==========================================================================
            var myApp = (function($) {

                // this variable is PRIVATE. It will not be accessible
                // outside the scope of this magic function. This is
                // good because we don't want something to accidentally
                // change this!
                var initialized = false;

                // This function is PRIVATE. As soon as
                // our magic function exits, this will not be available
                // to any other JavaScript. However, it IS available to
                // the methods defined on our "a" object!
                function privateFunction () {
                    console.log("Private function executed");
                }

                // We have to return something from our function.
                // This is what we will return. We are calling it "a"
                // for "application". We will put all of the variables
                // and functions (or "fields" and "methods" if you prefer)
                // on this object.
                var a = {};

                // This is the entry point to our application. It's always
                // a good idea to have a clear entry point. This method
                // is PUBLIC. Meaning it can be called on "myApp" at any time.
                a.initialize = function () {

                    // lets make sure we haven't already started
                    // our application
                    if(initialized === false) {
                        console.log("Starting application...");

                        // We can call this public method as part of our initilization process
                        a.fetchSomeData();

                        // We can call this private function here
                        // because it's in scope here!
                        privateFunction();

                        // we have finished initializing. Let's keep track of that.
                        initialized = true;

                        console.log("Application has finished starting up!");
                    }
                    else {
                        console.log("Could not initialized: already initialized once!");
                    }

                };

                // This is a PUBLIC method. It doesn't do anything but let us
                // know that it was actually executed.
                a.fetchSomeData = function () {
                    console.log("Fetching some data...");
                }

                // This is another PUBLIC method. This one expects
                // a jQuery object. Naming a variable with a dollar
                // sign lets other developers know that it's a jQuery
                // element, not a raw DOM element.
                a.putTextHere = function ($jQueryElement) {
                    console.log("Putting some text in a jQuery element...");
                    try {
                        $jQueryElement.text("This is some text!");
                    }
                    catch(err) {
                        console.log("We couldn't put text: " + err.message);
                    }
                };

                // Now that we have added functionality to our object,
                // we must return it from this magic function or "myApp"
                // will just be null.
                return a;

            // This is the end of our magic function. By placing open and
            // closing parenthesis immediately after the function, we are
            // calling it right away! So instead of our variable being set
            // to the function itself, it is set to the RESULT of the function.
            //
            // Since our function signature requires jQuery, we will pass the
            // jQuery object into the function so it is available when we need
            // it above.
            })(jQuery);


            //==========================================================================
            // Now we will start up our application. It's a good idea
            // to keep custom application logic out of jQuery calls.
            // This makes jQuery calls very clean with all important
            // logic stored in the application itself.
            //==========================================================================
            $(function () {

                // start up our application
                myApp.initialize();

                // we should not be able to accidentally start up twice!
                myApp.initialize();

                // let's call a different public method on the application
                myApp.putTextHere($("#putTextInMe"));

                // this will fail but it will fail gracefully because we handle errors
                myApp.putTextHere();

                // let's try to call a private function, this should fail
                try {
                    privateFunction();
                }
                catch (err) {
                    console.log("Couldn't call privateFunction: " + err.message);
                }

                // let's try to access a private variable, this should fail
                try {
                    console.log("The value of initialized is: " + initialized);
                }
                catch (err) {
                    console.log("Couldn't get value: " + err.message);
                }
            });

        </script>

    </head>

    <body>
        <h1>Modular JavaScript Example</h1>
        <p id="putTextInMe"></p>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Modular JavaScript Example</title>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

	<script>
	//==========================================================================
	// This is an application, we write JavaScript this way so that
	// everything we write is self-contained and we won't risk having
	// variables or functions with the same name as a library we use!
	//
	// We start by setting a variable, which is our application object
	// to the RESULT of a function. Surrounding the function with
	// parenthesis is not actually necessary but it lets other
	// developers know that you intend for this function to be
	// executed immediately.
	//
	// This function requires jQuery. It expects an argument named
	// "$" to be passed when the function is executed.
	//==========================================================================
	var myApp = (function($) {

	// this variable is PRIVATE. It will not be accessible
	// outside the scope of this magic function. This is
	// good because we don't want something to accidentally
	// change this!
	var initialized = false;

	// This function is PRIVATE. As soon as
	// our magic function exits, this will not be available
	// to any other JavaScript. However, it IS available to
	// the methods defined on our "a" object!
	function privateFunction () {
	console.log("Private function executed");
	}

	// We have to return something from our function.
	// This is what we will return. We are calling it "a"
	// for "application". We will put all of the variables
	// and functions (or "fields" and "methods" if you prefer)
	// on this object.
	var a = {};

	// This is the entry point to our application. It's always
	// a good idea to have a clear entry point. This method
	// is PUBLIC. Meaning it can be called on "myApp" at any time.
	a.initialize = function () {

	// lets make sure we haven't already started
	// our application
	if(initialized === false) {
	console.log("Starting application...");

	// We can call this public method as part of our initilization process
	a.fetchSomeData();

	// We can call this private function here
	// because it's in scope here!
	privateFunction();

	// we have finished initializing. Let's keep track of that.
	initialized = true;

	console.log("Application has finished starting up!");
	}
	else {
	console.log("Could not initialized: already initialized once!");
	}

	};

	// This is a PUBLIC method. It doesn't do anything but let us
	// know that it was actually executed.
	a.fetchSomeData = function () {
	console.log("Fetching some data...");
	}

	// This is another PUBLIC method. This one expects
	// a jQuery object. Naming a variable with a dollar
	// sign lets other developers know that it's a jQuery
	// element, not a raw DOM element.
	a.putTextHere = function ($jQueryElement) {
	console.log("Putting some text in a jQuery element...");
	try {
	$jQueryElement.text("This is some text!");
	}
	catch(err) {
	console.log("We couldn't put text: " + err.message);
	}
	};

	// Now that we have added functionality to our object,
	// we must return it from this magic function or "myApp"
	// will just be null.
	return a;

	// This is the end of our magic function. By placing open and
	// closing parenthesis immediately after the function, we are
	// calling it right away! So instead of our variable being set
	// to the function itself, it is set to the RESULT of the function.
	//
	// Since our function signature requires jQuery, we will pass the
	// jQuery object into the function so it is available when we need
	// it above.
	})(jQuery);



	//==========================================================================
	// Now we will start up our application. It's a good idea
	// to keep custom application logic out of jQuery calls.
	// This makes jQuery calls very clean with all important
	// logic stored in the application itself.
	//==========================================================================
	$(function () {

	// start up our application
	myApp.initialize();

	// we should not be able to accidentally start up twice!
	myApp.initialize();

	// let's call a different public method on the application
	myApp.putTextHere($("#putTextInMe"));

	// this will fail but it will fail gracefully because we handle errors
	myApp.putTextHere();

	// let's try to call a private function, this should fail
	try {
	privateFunction();
	}
	catch (err) {
	console.log("Couldn't call privateFunction: " + err.message);
	}

	// let's try to access a private variable, this should fail
	try {
	console.log("The value of initialized is: " + initialized);
	}
	catch (err) {
	console.log("Couldn't get value: " + err.message);
	}
	});

	</script>

	</head>

	<body>
	<h1>Modular JavaScript Example</h1>
	<p id="putTextInMe"></p>
	</body>
	</html>