Separa el JS del HTML [Feb. 14, 2012, 10:57 a.m.]
En la tarea anterior vimos como adicionarle JS a un archivo HTML dejando todo el código en un solo archivo. Esto es viable cuando el código JS es corto, pero cuando se vuelve más extenso es preferible tenerlo en un archivo aparte.
Vamos a realizar el mismo ejemplo de 'Hola JavaScript-Mundo' pero ahora separando el código JS en un archivo llamado holaMundo.js
El código de holaMundo.js sería:
document.write('Hola JavaScript-Mundo');
El código en tu archivo HTML sería:
<html>
<body>
<script style='text/javascript' src='holaMundo.js'></script>
</body>
</html>
Analicemos el ejemplo:
- Cuando tienes el código JS en un archivo aparte solo tienes que poner el código, el tag <script> no se utiliza en ese archivo.
- En el archivo HTML agregamos el atributo src al tag <script> para indicar la dirección del archivo JS que queremos adicionar. Esta dirección puede ser relativa o absoluta (en el ejemplo es relativa).
- Igual que en la tarea anterior pudimos haber puesto el tag <script> en el <head>.
Para completar esta tarea:
- Prueba el código de ejemplo. Asegúrate que el texto se despliegue correctamente en el browser.
- Prueba añadiendo varios archivos JS a tu archivo de HTML.
- Prueba poniendo los archivos JS en una carpeta diferente a la de tu archivo HTML (tienes que modificar el valor del src para que encuentre el archivo)
Esto es lo básico que necesitas para empezar a introducir JS en tu sitio. En el siguiente reto vamos a ver algunas cosas interesantes que puedes hacer utillizando JS =D.
Te recomendamos: