Las etiquetas script
por conveniencia y estandar normalmente son puestas al final de la etiqueta <head>
de html
siendo que lo primero que deberia cargarse son los estilos, luego le siguen los scripts
y luego la pagina entera:
<head>
...
<script src="js/demojdv.js"></script>
</head>
Por lo tanto considera que meter una etiqueta script
dentro de un div
es valido pero no conveniente.
La idea es tener un apartado (en este caso el head), el cual es donde van a ir todas las cargas de scripts
que necesites.
Dicho eso, la forma en la que puedes cargar mas de un script
en una pagina, es simplemente agregando otra etiqueta script
hacia ese archivo:
<head>
...
<script src="js/demojdv.js"></script>
<script src="otroArchivo.js">
</head>
Pero para solventar cualquier incoveniente que pudieras tener a futuro, es que si haces esto deberas tener en cuenta el orden en el que se cargan las cosas:
- estilos
- scripts
- cuerpo de la pagina
- pagina (todo lo anterior)
Si bien es bastante normal esa forma de cargar las cosas, lo conveniente para que no surjan problemas en tu script es cargar los recursos de esta forma:
- estilos
- cuerpo de la pagina
- scripts
- pagina (todo lo anterior)
De esta manera primero se cargara el cuerpo de tu pagina y luego los scripts
, esto es conveniente para cuando nosotros usamos javascript
en atributos html
, como lo haces en tu codigo:
<body onload="inicia();">
vemos que intentas llamar a una funcion inicia()
cuando la pagina se cargue, pero el problema de esto es que esa funcion para poder reconocerse y ser ejecutada debe haberse cargado previamente.
Por esa razon digo que es conveniente cargar las cosas de la segunda manera.
Para la carga de informacion hay otra forma que se considera estandar que resuelve muchos problemas, y es que, en vez de colocar tus etiquetas <script>
al final del <head>
, muchas personas lo que hacen es colocar sus scripts al final del body
, de esta manera se cargara primero el cuerpo de la pagina y luego los scripts
para que no haya ningún conflicto en ellos:
<body>
...
...
<script src="js/demojdv.js"></script>
<script src = "script2.js"></script>
</body>
Sin embargo haciendolo de esa manera seguira teniendo el mismo problema, y es que tu funcion llamada inicia();
no va a ejecutarse debido a que el html
esta intentando organizar su carga para enlazar una función inicia que aun no ha sido cargada (aun no existe en la pagina).
Una solucion sencilla es en vez de usar una funcion
llamada inicia para que se ejecute tu script
es directamente llamar a las utilidades de la ventana, para que puedas ejecutar tu codigo de manera directa, por lo tanto primero que todo deberas quitar el evento que tienes del body
:
<body>
...
...
</body>
Lo segundo sera decirle al script (js/demojdv.js
), que ejecute el codigo cuando la pagina se cargue por completo, por lo cual deberas colocar en ella y encerrar todo tu codigo dentro de:
//Apartado A
window.onload = ()=>{
//Aqui dentro TODO tu codigo
}
donde window.onload
se encarga de esperar a que se cargue todo en la ventana para que posteriormente se ejecute todo el codigo que se encuentra ahi dentro.
No te preocupes por eventos ni nada de eso, todo seguira funcionando normal si ejecutas tu codigo dentro del cuerpo de window.onload
anteriormente mencionado.
Ahora bien, veras que en el anterior codigo hice mencion a un Apartado A
ese apartado es donde se supone deberas colocar funciones que quieres que esten relacionadas directamente en el HTML antes de que la pagina se cargue, por lo tanto:
Si vas a añadir eventos desde el HTML
para usar funciones de un script
, tus scripts
deberian ir en el <head>
y ademas las funciones que se invoquen por medio de eventos en el HTML
deben ir por fuera de window.onload
.
Aquellos eventos o funciones que no esten siendo usadas directamente en el HTML si no que se usan solo dentro del JS
pueden y deberian ir dentro de window.onload
.
Por ultimo una recomendacion:
Si vas a manejar eventos definidos desde el HTML
entonces NO uses window.onload
simplemente pon tus scripts al final del body de lo contario deberas usar window.onload
y agregar las funciones que relaciones directamente en el HTML
por fuera de window.onload
.
De lo contrario pon todo en window.onload
y NO definas eventos desde el HTML, para asi poder manejar todo desde window.onload
y no tener que dejar funciones por fuera de window.onload
para que funcionen, recuerda que tambien puedes añadirle eventos a tus elementos directamente desde JS sin tocar el HTML.
ES6
ya hay otras formas, pero no veo que menciones en ningun momento en la pregunta que quieras usar funcionalidades deES6
para incluir scripts, si tu pregunta era mas concreta acerca de una sintaxis en especifico que no te funciona entonces deberas agregarla, de lo contrario no sabremos realmente al final lo que deseas. – Riven el 19 jun. 20 a las 0:06