You seem to be confused about the file itself and the execution of the file. The file is always the same, but the states it goes through depends on variables passed in (the value in your input in this case). The file itself isn't changing, only the state the code is in.
In your example:
$(document).ready(function () {
var appointmentID = $("#appointmentID").val(); //@(Model.Appointment.ID)
});
@(Model.Appointment.ID) is just a value assigned to appointmentID in memory. That has nothing to do with what is written in the file...it's just that what is written in the file tells js what to put into memory.
Update based on your comments:
Familiarize yourself with the window variable/property. You can check it out by going anywhere in js and doing console.log(window). If you then make a global variable, you will see that it is a property of window. I recently gave a detailed explanation of this here (click). Basically, whatever you're doing in an html document is inside of window. It's pretty clear to see what a different document is. Different pages...different tabs, etc. If the page loaded - it's a different document. Obviously, iframes will be a slightly odd case, since it's a document inside of a document, but the same logic applies. Also, not everything is necessarily a "property" of anything. Just because everything is executed in the context of window doesn't mean that everything is a property of window. That is beyond the scope of your question, so I'll just say that you could study about scope/closures/encapsulation.
