[SOLUCIONADO] Posción de <script type="text/javascript" src="JS/motor.js"></script>

[CarlosMilles]

Lo primero de todo presentarme a la comunidad, desde hace cosa de un mes me he puesto a full a aprender HTML, CSS, JS... y la verdad aun estoy muy verde, pero mmi intención es aprender y algún día poder contestar yo a preguntas.

LA PREGUNTA:

La cosa es que quiero crear un desplegable, y encontré está explicación que es perfecta.

Código HTML:

http://web.ontuts.com/tutoriales/creando-un-menu-desplegable-en-jquery/

La cosa es que yo para aprender, decidí cortar y pegar su código en el mio propio y empezar a trastear para intentar enterderlo al máximo.

Mi primera gran sorpresa fue, que inicialmente no bastó con cortar y pegar puesto que la parte de HTML y CSS si funcionaban pero la de JS no, y tras dar un par de vueltas me di cuenta que para que funcionase yo tengo que declarar:

Código:

<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript" src="JS/main.js"></script>

Al final de mi body.... Cuando yo inicialmente lo había hecho en mi head, que es donde había entendido se tenía que hacer al igual que la hoja de estilos que vas a emplear, según había leido estos días.

Mi pregunta es básicamente, porque se tiene que declarar al final, o mejor dicho, en función de que varía el lugar donde lo declaro.

Disculpad mis conocimientos tan bajos. MUCHAS GRACIAS!

[Alexis88]

Bienvenido a Foros del Web.

Sucede que el código se interpreta de arriba hacia abajo, entonces, si el código JS se encuentra antes que los elementos a los cuales se quiere afectar, lo que sucederá será que primero cargará el código JS y luego los elementos del documento, generando que estos no se vean afectados por el código JS ya que no existían cuando el primero ya había cargado.

Una solución simple es colocar el código luego de todos los elementos, pero también puedes ejecutar una función luego de que carguen los elementos, momento en el cual se produce el evento DOMContentLoaded.

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    //Instrucciones a ejecutar
}, false);
 

Cabe señalar que este evento se produce cuando han cargado los elementos del documento, mas no el contenido multimedia que pudiera haber, dígase fotografías, audio o vídeos.

P. D.: Como utilizas la librería jQuery, puedes usar el método .ready() el cual tiene un comportamiento muy similar al script señalado líneas arriba.

Código Javascript:

$(document).ready(function(){
    //Instrucciones a ejecutar
});
 

Un saludo