We Keep Coding

How does an external JavaScript tag access a another js files functions?

I have seen two .js files one containing
object.variable = (function(){
//some functions init() is defined here
//returns init
})();
Then within a .html file within script tags
$(document).ready(function(){object.variable.init()})
However, in the .html file there is no reference explicitly to that .js file, but the .html file can call the init()
Can someone explain to me how that is possible? Also how is a document.ready event handled inside a function expression?

All JavaScript files that are loaded on one page got the same global scope:
<script>
var a = 1;
window.b = 1;
</script>
<script>
console.log(
a,
b
);
</script>
Using the global scope is usually a bad thing, as it makes the code hard to track (as you said: there is no explicit reference). Additionally any script that you include can access everything, so be careful which libraries you use. Therefore I wouldn't adopt that pattern, instead use the import / export syntax and bundlers.
Also how is a document.ready event handled inside a function expression?
Thats not the document ready event. It is a jQuery event handler. doc

Avoiding global scope?

I like to include my javascript in each page that needs it (more general js files go in the document head):
-- item.html --
<div id="item">
<script type="text/javascript" src="item.js"></script>
...
</div>
so in my script file I can now grab the container and use it to find things:
-- item.js --
var container = $('scripts').last().parent();
var f = container.find('form');
however, if the work needs to be done after the page loads:
$().ready(function() {
var f = container.find('form');
});
I have a problem because container scopes across files. consider:
-- index.html --
<div id="item">
<script type="text/javascript" src="item.js"></script>
...
</div>
<div id="link">
<script type="text/javascript" src="link.js"></script>
...
</div>
<div id="part">
<script type="text/javascript" src="part.js"></script>
...
</div>
where the item.js fails because it picks up the last value container was assigned, instead of the one it was assigned at the time that it was declared such that it in essence performs:
$('#part').find('form');
instead of what I want:
$('#item').find('form');
so my question: how do I make the scope of container local to the file where it's declared?
alternatively, how could I do this differently?

Please look into modularizing your code using something like AMD to solve this. This is exactly what AMD was designed to solve.
There are several possible libraries for this. Since you are using jQuery, RequireJS might make the most sense, however there are other solutions as well, such as
CommonJS using Browserify
Webpack
Duo
RequireJS

I don't a environment to test this on, but would this small alteration work?
var container = $('script[src="item.js"]').parent();
You would have to specify the filename for each scope, but that doesn't seem like much of a burden.

JavaScript in the browser is functional scope. Which means variables declared (using the var keyword) belongs to the top most function, or the global scope if there is no function.
So to answer your question, in every file, you can do:
(function() {
var someVariable = 1;
//...
})();
What this does, is first evaluates and creates the anonymous function, and then immediately executes it with no arguments.
Since you are executing a function, any variables that you declare (as long as you use var), will be scoped to the function, and won't be available globally.

Javascript global variable when using Scripts.Render MVC4

I have an MVC 4 project that utilizes javascript bundling.
In my _Layout.cshtml page I have something like this:
#Scripts.Render("~/bundles/scripts/desktop/modernizr",
"~/bundles/scripts/desktop/jquery","~/bundles/scripts/desktop/jqueryui",
"~/bundles/scripts/desktop/jqueryvalidation", "~/bundles/scripts/custom")
There are others, but this is just an example. Within one of my scripts that's called in the custom script I need to reference a global variable that set within the ready function, as shown below:
<script type="text/javascript">
$(function () {
//alert('Page is ready!');
var warning = 10;
var timeout = 20; }); </script>
Problem is, I always seem to get an error within the method that requires the warning and timeout variables. Am I missing something obvious (not to me, though!) on how I should create these variables? Should I var them outside the $Ready, because the js is loading before the page is technically ready?
Where should the global variable go, if everything is already in a render bundle and there are no script blocks?
Thanks!

The warning and timeout variables aren't global. They've only been defined within the function that you provide to the $ function.
I'd generally recommend avoiding global variables where possible, but if you really want to create global variables just use this:
<script type="text/javascript">
var warning = 10;
var timeout = 20;
</script>
Or this:
<script type="text/javascript">
$(function () {
window.warning = 10;
window.timeout = 20;
});
</script>

Thanks for the response.
I don't think adding the variables in the Ready page will work. The functions that require these variables are loaded before the page is 'ready' (per my understanding how this all works), so there are situations on a new page load where the variable will be required but unreferenced.
This is how I'm currently handling it:
I created a new .js file, with the following:
var warning;
var timeout;
Then I created a bundle reference to the file and put it into my #Script.Render stmt in the correct order for scope. Now, I have my global variables, and it's cleanly implemented into my view code. Now, I know that I should be passing around variables vs. having them global, but in this case I don't see a major issue.

break js to files with $(document).ready() but keep scope

I would like to break my javascript code to several .js files. Each of those .js has code that need to be inside the $(document).ready(..). So in each file a new $(document).ready(..) will start.
How could I call from filea.js functions declared in fileb.js (both inside a $(document).ready block) ?
If this is not possible, can you propose an alternative?
Thank you.
Edit: I would like to clarify that I would like to avoid using the global scope. I was hoping something in the line of using named functions as handlers for the event but I can't really see how to do it.

You can make a local variable global with
window.globalname = localname;
Remember that functions are variables.

You really can't get away from declaring a global. Creating a single global isn't so bad, you can then namespace all your functions under it.
Put this in something like a main.js file, so you can keep your shared functions here:
// name this something unique to your page/site/app
var MYAPP = {};
// now we can attach functions to it
MYAPP.funcA = function() { /* ... */ };
MYAPP.funcB = function() { /* ... */ };
Then, in each of your anonymous functions you can access MYAPP.funcA(), MYAPP.funcB(), etc. You can also modify MYAPP on the fly to add functions, properties, etc.
In the end you have a single global (darn it!), but if you've named it properly you are creating a global namespace where your app code can safely reside.

As long as the files are loaded in order (i.e. functions in filea.js get loaded before fileb.js calls them, you should be fine.
In order to make sure files load their dependencies first, you could consider require.js or head.js
I've had luck with the latter: http://headjs.com/

How should I store my javascript variables?

I am currently coding in this way:
<script type="text/javascript">
var linkObj;
Is this a safe way to store data? My concern is what if a jQuery or other plug-in was to also use the variable linkObj. Also if I declare my variable like this then can it also be seen by other functions in scripts located in other js files that I include?

$(document).ready(function(){
var linkObj;
});
as long as you use the var keyword, any variable defined in that scope won't be accessible by other plugins.

I you declare a variable this way it will be accessible to all scripts running on the page.
If you just want to use it locally, wrap it in a function:
(function() {var linkObj; ... })()
However, this way nothing outside of the function will be able to access it.
If you want to explicitly share certain variables between different scripts, you could also use an object as a namespace:
var myProject = {}
myProject.linkObj = ...
This will minimize how many global names you have to rely on.

Wrap it in a closure:
<script type="text/javascript">
(function() {
var linkObj;
// Rest of your code
})();
</script>
This way no script outside your own will have access to linkObj.

Is this a safe way to store data?
This is not storing data per se, it's only declaring a variable in a script block in what I assume is an HTML page. When you reload the page in the future, it will not hold previous values.
My concern is what if a jQuery or other plug-in was to also use the variable linkObj.
That's a valid concern, like others have pointed out. However, you would expect plugins not to rely on scope outside the plug-in. This shouldn't impact a lot as good plug-in design would likely prevent this from happening.
Also if I declare my variable like this then can it also be seen by other functions in scripts located in other js files that I include?
Yes. As long as their execution is triggered after your script block gets loaded. This normally follows the order in which your script declaration appears in the page. Or regardless of the order they appear on the page if they are executed, for example, after the jQuery DOM 'ready' event.
It's common to hear that is good to avoid 'global namespace pollution', which relates to this concern. To accomplish that you can use a function to contain code, and directly invoke that function in your script block.
(function () {
var a = 1; // the scope is within the function
alert('The variable a is equal to: ' + a);
}) (); // the parenthesis invoke the function immediately