martes, junio 26, 2012

Curso de desarrollo web, Parte XXXVIII: Código en archivos externos

¡Hola otra semana más! Sí, sé que sigo sin corregir el asunto de los post anteriores, pero prometo que acabaré haciéndolo... tarde o temprano. Podría poner cientos de excusas (y todas son verdad), pero también reconozco que me ha dado vagueza. Pero acabaré arreglándolo.
Bueno, recordaréis que, cuando comenzamos a estudiar JavaScript, les comenté que, al igual que ocurría con el CSS, existen varios modos de introducir JavaScript en nuestra página, no sólo con el método de la escritura directa mediante la etiqueta <script>, y que con el tiempo os los enseñaría. Pues bien, ese momento ha llegado y aquí estamos listos para aprender un segundo método. Aviso de que esta entrada va a ser corta, pero no por ello con poco contenido.
Este segundo método es increiblemente simple y es el de poner nuestro código en un archivo externo, en lugar de directamente en la página web. Para ello, crearemos un nuevo archivo con extensión "js" en el que incluiremos nuestro código. Como hasta ahora, no necesitaremos ningún programa especial para trabajar con este tipo de archivo, sino que el blog de notas (o cualquier editor de texto plano, como el Komodo Edit del que os hablé hace ya unos meses) nos valdrá.
Para este ejemplo vamos a crear un archivo llamado "pagina-principal.html" y otro llamado "javascript-externo.js". Ahora en el archivo "js" escribiremos lo siguiente:

alert("Ésto está escrito en un archivo externo.");

Recordad escribir sólo esa línea. Sin etiquetas <script> ni nada por el estilo. Sólo ese pequeño código. Si intentamos abrir el archivo "js" veremos que no tiene ningún resultado visible. De hecho, a menos que lo hayamos asociado con alguno de los editores que estamos usando, es muy probable que no nos deje abrirlo o nos pida que elijamos un programa para abrirlo. Así que ahora empieza la magia.
En el archivo "pagina-principal.html" haremos una página básica (ya sabéis, "doctype", "html", "head", "body"...) y, en el lugar donde normalmente habríamos puesto la etiqueta "script" (recordemos que podía ser tanto en el "head" como en el "body"), ahora incluiremos el siguiente código:

<script type="text/javascript" src="javascript-externo.js"></script>

Como véis, la etiqueta sigue siendo la etiqueta "script", aunque esta vez no tiene nada en su contenido, sino que le hemos añadido un nuevo atributo, el atributo "src", que ya habíamos usado en la etiqueta "img". ¿Qué resultado tendrá esto? Comprobémoslo: abramos la página "pagina-principal.html" y veamos su resultado.
¿Lo habéis hecho? ¿Qué ha ocurrido? En efecto, el código escrito en el archivo externo ha sido ejecutado como si lo hubiéramos escrito en el propio archivo HTML. Y tal vez os preguntéis: ¿de qué nos puede servir esto?
Igual que ocurría con el CSS, habrá veces en que necesitemos un mismo código que se ejecute en varias páginas. Sobre todo para incluir una misma función en distintas páginas. Por ejemplo, ¿recordáis la función  "esBisiesto()" que creamos la semana pasada? ¿No estaría bien poder usarla en varias páginas sin tener que estar escribiéndola una y otra vez? Pues sólo nos hace falta escribirla en un archivo externo y cargarla mediante el atributo "src" de la etiqueta "script".
Como anotación, debemos recordar que si en una etiqueta "script" le colocamos un atributo "src" NO podremos usar la misma etiqueta para introducir código nuevo. Por ejemplo:

<script type="text/javascript" src="javascript-externo.js">
alert("Ésto está escrito en el propio archivo.");
</script>

Este código estaría mal y, de hecho, el navegador ignorará las instrucciones escritas entre ambas etiquetas "script". Para que funcionara, debería ser escrito así:

<script type="text/javascript" src="javascript-externo.js"></script>
<script type="text/javascript">
alert("Ésto está escrito en el propio archivo.");
</script>

Este último código sí sería correcto.
Pues bien, por esta semana es todo. Tal vez parezca poco, pero prefiero que esto quede claro y que se queden rumiándolo esta semana antes que saturarles con más cosas. La semana que viene veremos el tercero de los métodos y nos meteremos en un tema bastante interesante: los eventos. Mientras tanto: ¡ejercicios!

EJERCICIO

Esta semana nuestro ejercicio consistirá en crear tres páginas webs que estén enlazadas entre ellas. En cada una de las páginas, el programa preguntará mediante "prompt":
¿Qué año es?
 ¿En qué año naciste?
¿Cual ha sido tu mejor año?
Una vez el usuario ha introducido un año, se mostrará por pantalla si el año fue bisiesto o no. La única pega es que la función "esBisiesto()" debe ir (como no) en un archivo externo.
Si queréis un reto aún mayor, tampoco se puede llamar a la función "esBisiesto()" desde los archivos "html". reduciendo a una línea el código JavaScript que puede haber en dichos archivos. Suerte con ello.

No hay comentarios: