The main reason is external files that are included in the head. When you include a file in your <head> it gets run immediately. This means if the JavaScript interacts with the DOM it needs to be wrapped in Dom Ready.
It's also needed for unobtrusive JavaScript and separations of concerns. Ideally your JavaScript and HTML are in separate files. If you follow this you will not have any in-line script tags in your HTML at all.
The second is to defend yourself against obscure browser bugs when you make mistakes. There are cases where it's not save to go and manipulate DOM elements immediately afterwards. (I'm looking at you IE6!)
The third reason is to keep your code clean.
Mixing script tags into your HTML makes spaghetti code.
some HTML
<script> ... </script>
some HTML
<script> ... </script>
some HTML
<script> ... </script>
some HTML
<script> ... </script>
some HTML
<script> ... </script>
some HTML
<script> ... </script>
some HTML
<script> ... </script>
We have code about ten times worse then that. It's a right pain to read / maintain
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
