Hola,
el var button = document.querySelector("button"); es otra variable, por lo cual es recomendable agregar al inicio.
A lo mejor si llamamos a esta variable de otra forma te despeja un poco.
Vamos a llamar a esta variable como myButton:
var myButton = document.querySelector("button");
Lo que si es recomendable, es que primero cargues las variables, luego las funciones y debajo la llamada a la función:
/* DECLARO VARIABLES */
var miNombre = "Leonardo";
var myButton = document.querySelector("button");
/* CREACIÓN DE FUNCIONES */
function mostrarNombre(){
alert(miNombre)
}
/* LLAMADA A LA FUNCION */
myButton.onclick=mostrarNombre; // cuando se presiona el botón, se ejecuta la función mostrarNombre
Tienes que entender, que el navegador lee el programa primero desde arriba y luego sigue leyendo las siguientes líneas hasta llegar debajo de todo. Es por ello que si la función la creas abajo del todo, puede que no tome la llamada a la función.