What do you mean by obtrusive an unobtrusive JavaScript.

Keeping all JavaScript and HTML in one page is called obtrusive JavaScript. It is not good practice to keep all things at one place as the application grows maintaining all becomes difficult.

Keeping all the JavaScript code in a separate file is called unobtrusive javascript. We can give the reference path to refer the required JavaScript. By making this out View page becomes cleaner and maintainable. Page load time is better. It is also easy to update the code as all the Javascript logic is present in a separate file. 

In MVC even we do not need to refer all Common Javascript files in each page. We can put commonly used javascript files in master page i.e._Layout.cshtml. We can also place all commonly used Javascript files in BundleConfig.cs which loaded when Global.asax files  Application_Start()
 is called.

       protected void Application_Start()
        {
            Database.SetInitializer<HotelManagement.Areas.AdminAccess.Models.EmployeeContext>(null);
            AreaRegistration.RegisterAllAreas();
            GlobalConfiguration.Configure(WebApiConfig.Register);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);

            BundleConfig.RegisterBundles(BundleTable.Bundles);

            Database.SetInitializer<HotelManagement.Models.HotelEmployeeContext>(null);
        }

By doing this we are reducing the repeated calls in each View.

It is always good practice to keep all custom JavaScript files in separate place and refer whenever it is required by View Page. By doing this we will get better cache support.