I have been using templates such as bootstrap templates for a while and as i try to modify or add more script, i always encounter these two scenario
SCENARIO 1: in some templates, the scripts only works when they are placed at the top i.e. head. but does not work while at the bottom of the elements
<head>
<!--required scripts here e.g.-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
</head>
<body>
<div class="content">
<!--elements that require scripts i.e. forms and button-->
</div>
<footer>
</footer>
</body>
SCENARIO 2: in some templates, the scripts only works when they are placed at the bottom i.e. footer. but does not work when placed at the top of the elements
<head>
</head>
<body>
<div class="content">
<!--elements that require scripts i.e. forms and button-->
</div>
<footer>
<!--required scripts here e.g.-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
</footer>
</body>
I rely wanted to understand the idea behind these scenarios. What is it that causes such behavior? Or what should one consider?