Separa el JS del HTML



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 type='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:

  1. Prueba el código de ejemplo. Asegúrate que el texto se despliegue correctamente en el browser.
  2. Prueba añadiendo varios archivos JS a tu archivo de HTML.
  3. 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:

Task Discussion


  • zhmm said:

    where is the document ?

    holaMundo.js

    This document is how to write?

    on April 22, 2012, 10:58 p.m.

    jose francisco said:

    The file holamundo.js is just the code we use in the previous activity, just place it in a separate file and links it to the document.

    This file is created only with notepad, just that we have to put the extension .js Also remove labels <script>, because they are in the code that links the document.

    Sorry for my Englis, but translates a translator.

    on April 23, 2012, 7:13 a.m. in reply to zhmm