Colocar scripts en la página web

Un script es un programa insertado dentro del documento html y que es interpretado y ejecutado por el navegador del usuario. Permiten crear páginas dinámicas: modificar el comportamiento normal del navegador, validar formularios, realizar efectos visuales, animaciones, crear elementos de la página, etc..

Estos programas se ejecutan en el ordenador del usuario, bien sea directamente, cuando el navegador lee el documento HTML para mostrar la página, o cuando se produce un suceso determinado (eventos), como puede ser el pulsar sobre un enlace o mover el ratón o cargar una imagen o modificar el tamaño de la ventana del navegador.

Son importantes por que permiten crear páginas dinámicas e interactivas. al ejecutarse en la máquina del usuario y no en el servidor tienen ciertas limitaciones como manejar bases de datos o crear archivos permanentes entre otros. Para tareas que funcionan en el servidor se usan programas escritos en lenguajes como PHP.

El lenguaje usado para crear scripts es el JavaScript, actualmente normalizado mediante el estándar ECMAScript. Puedes aprender más sobre este lenguaje en la en dedicada a Javascript DesdeCero

Este sitio está dedicado a aprender html y CSS, pero Javascript es hoy la tercera pata en la que se basa el desarrollo web, por eso me detengo un poco para mostrar la utilidad de los scripts en las páginas web.

Así que te pongo una micro introducción al Javascript, y te aconsejo que visites algún sitio para conocerlo más a fondo. Si te animas te recomiento Javascript Desde Cero tambíen en Espacio Latino en la que te guio para aprender sin mucha dificultad.

Ahora vamos con el tradicional hola mundo. Tu primer "programa" en JavaScript. Haremos surgir una ventana que nos muestre el tradicional mensaje "hola, mundo". Así podremos ver los elementos principales del lenguaje. El siguiente código es una página Web completa con un botón que, al pulsarlo, muestra el mensaje.

Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraños que tiene en la págona del ejemplo:

Esta etiqueta encierra el programa escrito en JavaScript, el código del programa. Puedes poner cuantos quieras a lo largo del documento y en el lugar que consideres necesario. Si un navegador no entiende la etiqueta <script> escribirá el código como si fuera parte de la página, por eso a veces se encierra entre cometnarios <!-- código del script -->.

Eso sería un script integrado en el código HTML. Vale para casos muy sencillos.

Lo recomendables es separar código de progrma de código HTML. Cada cosa en un sitio.

El código de programa se puede guardar en un archivo externo y se incorpora a la pa´gina web añadiendo a al elemento <script> el atributo src="url_file.js". Con esto le decimos al navegador que inserte en la página web el contenido del archivo cuya dirección es url_file.js. :

function Saludo(){ alert("¡Hola, mundo!"); }

El sitio donde colocar este script (con src) es el head, cunado el navegador ve esta linea se detiene la carga de la página hasta que termina de cargar el archivo con el script. Y esto no es bueno. Puede solucionarse con atributos extra como async (la craga del script y la pa´gina se hacen en paralelo) o defer (la carga de página y script es en paralelo y el script no se ejecuta hasta que la página está totalmente cargada).

O tembién se pueden ponerse al final del documento, justo antes de la etiqueta de cierre de body. Con esto nos aseguramos que el archivo script no bloquea la carga de la página y que no se ejecuta hasta que el documento se ha cargado.

Esta es nuestra primera función en JavaScript. En el código de la misma vemos que pone alert (es un método o acción que puede ejecutar el navegador donde se vea tu página web. Concretamente este método muestra un mensaje en la pantalla, ¿qué mensaje? el que tu le digas, en este caso ¡Hola Mundo!.

<button onClick="Saludo()">Púlsame</button>

Dentro del elemento botón vemos una cosa nueva: onClick. Se llama evento y funciona como una marca que le dice al navegador que haga algo cuando se haga click con el ratón. Cuando el usuario pulsa el botón, el evento onClick se pone en marcha y ejecuta el código que tenga entre comillas, en este caso la llamada a la función Saludo(), que tendremos que haber definido con anterioridad. Y al ejecutarse saludo() mostrará en pantalla el mensaje.

Este ejemplo es una pequeñísima muestra de como funcionan los scripts en JavaScript. De hecho, su utilidad es más bien escasa, por eso te recomiendo de nuevo que eches un vistazo a Javascript Desde Cero.