Si quieren tener un fragmento de texto volando a través de la pantalla, o una palabra que cambie de color cuando el usuario la toque con el mouse, deben saber escribir scripts. Los lenguajes de script están diseñados para expandir y mejorar las posibilidades de una aplicación (como el Internet Explorer o el Netscape Navigator) sin necesitar de los costosos servicios de un programador.

Sin embargo, los conceptos de la escritura de script son los mismos que los de la escritura de programación. Y ustedes al manejar los conceptos básicos de un lenguaje script van a estar más cerca de entender de qué se tratan los lenguajes de programación.

La diferencia fundamental entre escribir programas enteros y escribir scripts para manipular una página web es la siguiente: cuando uno escribe un programa entero, todo lo que aparece en la pantalla es resultado del código del programa. En cambio, cuando uno escribe scripts, le está indicando al explorador qué debe hacer con todo el documento HTML.

Hablemos ahora de qué lenguaje de script vamos a utilizar nosotros para manipular el DOM de los documentos HTML. En el 94 Netscape lanzó al mercado el JavaScript, un lenguaje de script que, aunque sugiera lo contrario, no tiene nada que ver con el potente Java, desarrollado por Sun Microsystems.

Desde ese momento, y a pesar de que Microsoft respondió velozmente con el Internet Explorer 4.0 y domina actualmente el mercado de los exploradores, el JavaScript goza de enorme popularidad entre los desarrolladores de páginas web. Microsoft lanzó al mercado su propia versión de script, el Jscript, que es muy parecido al JavaScript, y hasta tiene algunas funciones que se escriben igual. Los dos están basados en Java y muchas veces los desarrolladores utilizan recursos de uno y de otro sin saber que son lenguajes distintos. También existe el VisualBasicScript, basado en el lenguaje VisualBasic.

E este tutorial utilizaremos JavaScript por ser el lenguaje de uso común entre los webmasters. Aprenderemos ahora los conceptos básicos de este lenguaje:

El JavaScript sirve para indicarle al explorador cómo debe manipular la página. Pero esa manipulación no sucede porque sí, sucede en respuesta a una acción. Esa acción se llama evento y se refiere a una acción del usuario. Por ejemplo, puedo escribir un script que ante la acción del usuario de cliquear sobre una imagen (evento), cambie el color del texto del documento.

JavaScript puede leer y escribir propiedades. Piensen en las propiedades como si fueran adjetivos que describen partes de la página web. Las propiedades incluyen el ancho y el largo de elementos HTML, la cantidad de frames que hay en la página, o la URL del documento.

Además de propiedades, JavaScript puede llamar, o invocar, métodos. Invocar un método es ejecutar una acción. Por ejemplo, en el punto 3 invocábamos el método alert (). Esto ejecutaba la acción de que apareciera un cartel con la inscripción que nosotros deseábamos.

Finalmente, el JavaScript puede llamar a otras líneas de script, o sea, una función. En la vida real, cuando queremos hacer algo, tenemos que hacerlo paso a paso. Si queremos cocinar puré tenemos que poner a calentar el agua, pelar las papas, cortarlas, tirarlas al agua hirviendo, esperar 20 minutos, colarlas, aplastarlas, ponerles manteca y condimentar a gusto.

Si tuvieramos que escribir 10 programas para cocinar puré, ¿repetiríamos todos los pasos 10 veces o crearíamos una función que abarcara todo el proceso y después la llamaríamos cuantas veces fuera necesario? La segunda opción sería más inteligente, y nos ahorraría mucho tiempo, para eso existen las funciones. Son procesos de script a los que les damos un nombre y los llamamos cada vez que necesitamos.

Presionen aquí para ver el ejemplo

Acaban de ver una página cuyo código contemplaba líneas de script que asignaba determinadas funciones, para determinados eventos. Le decíamos al explorador que cuando el usuario hiciera click sobre un campo de texto (un evento), este texto cambiara de color o de ubicación (una función). El código script decía:

<script>

function cambiarcolor() {

texto1.style.color= "blue";

}
function movertexto() {

texto2.style.posLeft +=60;

texto2.style.posTop +=80;

}

</script>

Entre <script> y </script> definimos las funciones. Las funciones tienen el nombre que nosotros le demos, en este caso cambiarcolor y movertexto. Luego definimos las variables texto1 y texto2, y le asignamos a cada una de ellas el método (la acción) que debían realizar cuando la función fuera ejecutada. Como se ve en el código, se está trabajando con el parámetro style, y se están invocando determinados métodos (acciones) a él. Se le está diciendo que cambie de color, o que cambie de posición. Luego, en el body, el código continúa:

<span id=texto1 style="position:relative" onclick="cambiarcolor()"> Si me haces click me pongo azul </span>

<br>

<span id=texto2 style="position:relative" onclick="movertexto()">Si me haces click me muevo hacia la derecha y hacia abajo</span>

La etiqueta <span> es muy útil para trabajar en HTML dinámico. Sirve para contener un montón de comandos y darles un nombre. Veamos paso a paso cada uno de los parámetros que usamos en esta etiqueta:

• id, sirve para asignarle un nombre particular a la etiqueta y a todo lo que ella contenga (“texto1” o “texto2”).


• style, está relacionada con las páginas de estilo que ya hablamos y profundizaremos en la lección 3. Sirve para definir varios aspectos de cómo se mostrará un elemento (color,ubicación,tamaño,etc)


• onclick , esto es lo más importante. Es el evento que el explorador está esperando para llamar a la función correspondiente. Cuando el usuario haga click aquí, determinada función se llamará y se ejecutará.

Acabamos de ver un simple ejemplo de lo que se puede hacer en HTML dinámco. Lo importante es retener el concepto de lo que es una función, de lo que es un evento, y de la forma de escribirlos en script para hacerlos funcionar.

Las líneas de script están escritas en inglés, lo único que está en castellano son los nombres de las funciones y los id de las etiquetas . Eso es porque son nombres que asignamos nosotros. Un mínimo conocimiento del idioma inglés es necesario para darse cuenta, por ejemplo, de que onclick significa: “cuando se haga click”, o de que id significa: "identidad".

Pasemos ahora al punto 4, que ya es hora de que empiecen ustedes a trabajar un poco y a poner en práctica los conocimientos que fueron incorporando.

Próxima página » 1 ¿Qué quiere decir "HTML dinámico"?

Los mensajes publicados por los usuarios no sufren revisión ortográfica o de redacción alguna. Ver reglamento de aprobación.

Mensajes publicados en esta nota: 0