Why the function also is put in the SCRIPT code, the code in the page load is not automatically after execution, and other code automatically when the page loads, the following code

<script>
document. Write (" hello ");
Document. Write (" & lt; H1 & gt; Through the document. The write output content 1 & lt;/h1 & gt;" );
function changeContent () {
Document. The getElementById (" demo "). The innerHTML="through innerHTML method to output the content page 3";
}
</script>
<body>

The above code (1) the red code page loading is performed, the blue code is only executed after the mouse to click the button button, why?
(2) in the script code no placed in the HEAD tag is placed in the BODY tag, why can also normal execution?

The above code (1) the red code page loading is performed, the blue code is only executed after the mouse to click the button button, why? (2) in the script code no placed in the HEAD tag is placed in the BODY tag, why can also normal execution?

The above code (1) the red code page loading is performed, the blue code is only executed after the mouse to click the button button, why?
(2) in the script code no placed in the HEAD tag is placed in the BODY tag, why can also normal execution?