On the backend Additional jQuery (without entwine) is not working on initial page load but it is working if you refresh the edit page.

Ok I have a completely fresh install of SS 3 v3.1.12

I create a Test Page type and add a Javascript

class TestPage extends Page {

  private static $db = array(
  );

  public function getCMSFields() {
    $fields = parent::getCMSFields();
    Requirements::javascript("mysite/code/test.js");
    return $fields;
  }

}
class TestPage_Controller extends Page_Controller {
}

And the javascript page what just turns the MenuTitle into lowercase with underscores

(function($) {
    $(document).ready(function(){
         $('input[name=MenuTitle]').keyup(function () {
            var textValue = $(this).val().toLowerCase();
            textValue =textValue.replace(/ /g,"_");
            $(this).val(textValue);
         });
    });
}(jQuery));

Now when I make the about us page this page type and I go to edit the MenuTitle (Navigation label) it is not working , but If I refresh the page while in edit it is working perfectly.

Is this by design or is this a bug?

You have to use an entwine wrapper for your JS in the CMS.

but in the documentation (http://doc.silverstripe.com/en/developer_guides/customising_the_admin_interface/javascript_development/) it says:
"For any custom code developed with jQuery, you have four choices to structure it: Custom jQuery Code, a jQuery Plugin, a jQuery UI Widget, or a jQuery.entwine behaviour. We'll detail below where each solution is appropriate."

and for an example of Custom jQuery Code they give you

(function($) {
    $(document).ready(function(){
        // your code here.
    })
})(jQuery);

This is exactly what i did

*Shrug* I'd just chuck a wrapper on it.

;(function($) {
    $.entwine('your-app', function($){
        $(document).ready(function(){
            // your code here.
        });
    });
})(jQuery);

Thank you for that
so i added the wrapper as you sugested

(function($) {
    $.entwine('my-app', function($){
        $(document).ready(function(){
             $('input[name=MenuTitle]').keyup(function () {
                var textValue = $(this).val().toLowerCase();
                textValue =textValue.replace(/ /g,"_");
                $(this).val(textValue);
             });
        });
    });
}(jQuery));

but it still still does not work on the initial load only if you reload the edit page it works.

I've been struggling with using entwine, without much luck so far, so I'd be keen to find out how you go with this.

I've had a little bit of success in my case through use of .bind() on the change event and using an anonymous function to run the rest of my script. Works ok for the initial idea but not the best.
To answer your initial question, its by design, I guess to enforce use of a closure when using JavaScript so you don't run into namespacing issues.

I had some success this morning I got a jQuery time picker extension working and a basic function.

(function($) {
    $.entwine('my-app', function($){

        // load jQuery Time Picker
        $('input.time').entwine({
            onmatch: function() {
                $(this).timepicker();
            }
        });

        // just a basic function
        $('input[name=MenuTitle]').entwine({
            onkeyup: function(e) {
                var textValue = $(this).val().toLowerCase();
                textValue =textValue.replace(/ /g,"_");
                $(this).val(textValue);
            }
        });

    });
}(jQuery));

I think they should overhaul the documentation, make sure that it is correct and a section on how to convert regular jQuery/JavaScript functions/plugin’s to work with entwine.

I love most of Silverstripe but from my point of view they should get rid of entwine, I think the cost outweighs the value.