Uncaught ReferenceError: isApp is not defined

I am getting "Uncaught ReferenceError: isApp is not defined" in the console, I had tried to find solution for this error from long morning but didn't able to get much, both of my isApp.js and mApp.js are saved in folder named as "js", can someone please help me to get out of this thing....thanks in advance

//"......isApp.js file code starts from here..............."
var iA = function () {
    var t = this;
    this.user;
    var IsInvite = false;
    this.serverUrl = someLocalhostUrl;
     //some function - structure of functions is shown below
  
  //this.function1 = function(){
        //do something
  
  //};
  
  //lot of function

    this.initialize = function () {
        t.getUser();
        var pk = typeof t.user;
        if (!(typeof t.user === 'object')) {
            t.user = null;
            t.setUser();
        }
    }();
};

var isApp = new iA(); 
//"......isApp.js file code endss  here..............."




//"......mApp.js file code starts from here..............."
var mApp = function () {
    //var PostUrl = "http://localhost:52015/"
    var PostUrl = isApp.serverUrl + "/";
    var t = this;
    var u = {};
    this.ph, this.loc;
    var user, Email, UserName;
    var LoggedIn;

    this.initiate = function () {
        u = isApp.getUser();
        if (u && u.LoggedIn) {
            if (window.location.href.indexOf("index") == -1)
                $.mobile.changePage("index.html#p-start");
            //window.location = "index.html#p-home";
        }
    };

   //some function - structure of functions is shown below
  
  //this.function1 = function(){
        //do something
  
  //};
  
  //lot of function
  
    
    this.initiate();
};

m = new mApp();


//"......mApp.js file code ends here..............."

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>

    </style>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--css starts here-->
    <link href="css/jquery.mobile-1.4.5.css" rel="stylesheet" />
    <link href="css/custom.css" rel="stylesheet" />
    <!--css ends here-->

    <!--js starts here-->
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.4.5.js"></script>
    <script src="js/jquery.signalR-2.2.0.min.js"></script>
    <script src="js/mApp.js"></script>
    <script src="js/isApp.js"></script>
    <script src="js/home.js"></script>
    <!--js ends here-->
    <!--<script>
        $(function () {
            $('.image').click(function () {
                alert("selection needed");
            });
            document.getElementById("startDate").valueAsDate = new Date();
        });
    </script>-->
</head>
<body>
    <div data-role="page" id="p-start">
        <div data-role="main" class="ui-content ui-responsive ui-body-a">
            <div class="align-center">
                <h3>Its our Rocking app</h3>
                <a href="#p-login">
                    <img src="images/temp-logo.jpg" class="logo" />
                </a>
                
            </div>
            
        </div>

    </div> 

   
</body>
</html>

Solution

You load your mApp.js file before your isApp.js file and both scripts are executed right away, so naturally the function isn't defined yet when mApp.js is executed.

<script src="js/mApp.js"></script>
<script src="js/isApp.js"></script>