It's important to keep HTML, CSS, and JavaScript separated in the app view, because dependencies between presentation and behavior can make the code of the app unmaintainable. This separation is also known as loose coupling of components, and it's achieved when you're able to make changes to a single component without making changes to other components.

Always separate your JavaScript from your HTML markup and be sure to separate JavaScript modules from each other. All JavaScript should be contained within the <script> tags, which ideally point to a linked JavaScript file. If the app needs additional HTML to render the UI, consider one of the following solutions:

Try to avoid assigning styles through the style property in JavaScript as it will help keep all the style information in your CSS. Instead, use classes to style an element as in the following example:

var myElement = document.querySelector('#id'),
myElement.classList.add("cssClassYouNeed");

The practices described previously help you to ensure that there are fewer dependencies between CSS and JavaScript, and that each piece only manages its specific responsibilities.

As you know, JavaScript is only a means to add a behavior to a web page or to the view of your app. Most of the time the behavior of the page is defined through several event handlers that cooperate together to the definition of the behavior itself. When you handle an event it's a good habit to avoid defining logic in the event handler with complex conditional clauses. It means that the event handler should only call other methods or functions in order to make easier future changes. Remember always to remove an event listener when it's not needed anymore.

In order to clarify what I mean, let's explore a quick example that assumes the HTML page contains a DIV with the class squareDiv applied.

var APP = (function(){

    var init = function(event){

        event.target.removeEventListener(event.type, arguments.callee);

        var target = document.querySelector('.squareDiv'),
        target.addEventListener('click', openPopup);

    };

    var openPopup = function(event){
        
        createWindow(event.x, event.y);

    };

    var createWindow = function(x, y){

    console.log('Opening a window in ' + x + ' : ' + y);

    };
    
    document.addEventListener("deviceready", init, false);

}());

As you can see the click handler doesn't contain any logic; it simply calls another function passing around only the event object information needed by the other function.