Tres casos prácticos para aprender a programar en Javascript (Programación web: Flash)

Luis Núñez Canal

Este módulo trata básicamente de Flash y de cómo programar con este programa de Adobe. Algo que depende basante del sentido común y de entender que no son lo mismo las instancias, que los objetos ni que los símbolos. Pero, sobre todo, hay comprender que los objetos se dividen en capas al igual que en Photoshop, y que éstos, se pueden insertar en la escena que de nuevo consta de capas. Eso sí, no es necesario que lo que se meta en las capas de la escena sean símbolos (que pueden ser botones, clips de películas o gráficos), también pueden ser imágenes puras y duras, que bien rasterizaremos (si vienen de un jpg o de un gif) o que habremos creado previamente con dibujo vectorial.

Vale. Hecho. Esto de pintar en Flash es relativamente sencillo. De hecho, cuando se entiende la dinámica de las capas y los objetos, dibujar es hasta más fácil que en otros programas de Adobe como Illustrator o el bendito Photoshop.

Sin embargo, la cosa se tuerce a la hora de programar. De poco sirve aquí la creatividad, por lo que hay que reservarse ls fuerzas de la materia gris en aplicar la lógica.

Como decía, con Flash hay que programar. Gracias a Actionscript, un lenguaje tan basado en Javascript que no se puede explicar sino es a través de este pionero idioma de la web, se puede interactuar con los objetos y hacer cosas tan sencillas como que, al pasar con el ratón por encima de un dibujo, éste cambie, o que al pinchar en algún recuadro oigamos un ruido.

De hecho, esta práctica intentará demostrar alguno de estos ejemplos con lenguajes de programación. Pero, antes, hay que recordar queal igual que CSS y HTML se funciona con directivas, en Javascript, pasa lo mismo. Mientras que para delimitar el CSS hay que meter la directiva <style> y dentro meter las declaraciones CSS o bien hacer las declaraciones en un archivo externo, con Javascript pasa lo mismo. Evidentemente, con algunas difernecias, sobre todo en las directivas.

  • Ahora, el archivo externo, en vez de ser extesnión .css tiene la extensión .js (de JavaScript).
  • Por otro lado, para meter las declaraciones en la cabecera se usa la directiva <script> dentro de <head> (al igual que pasaba con <style> en CSS).

Los comentarios se escriten igual que en PHP, osea  /* lo que quiero comentar /* (conocidos como multilínea). La novedad llega en los  comentarios para una sola línea, que se hacen con // y no hace falta hacer un cierre porque como su nombre indica, sólo funcionan en una línea.

Ejemplo 1

Quiero que me salga un botón en la página que al pinchar en él me salga una ventanita de alerta en el que me diga el número de veces que aparece después de que la cierre hasta un máximo de cuator veces. Al igual que en PHP se funciona con argumentos:

El bucle FOR funciona con tres argumentos: inicio, ejecución y final
<script>
for (cuenta=1; cuenta <4; cuenta ++)
{
alert(«Aparezco» + cuenta)
}
</script>

Ejecuta cuenta=1; y como es <4 se ejecuta hasta el alert en el que ‘cuenta’ es igual a uno, y como es menor que cuatro, vuelve a ejecutarse y ejecuta otro más. Esto es un bucle y se sigue ejecutando hasta que sea 4.

Ejemplo 2

Quiero que cada vez que abra esta página en un navegador me abra una ventanita de alerta en la que me diga aparezco “una veces”; la cierre, me abra otra que diga “aparezco dos veces” y así hasta cuatro

<script>
for (cuenta=1; cuenta <4; cuenta ++)
{
alert(«Aparezco» + cuenta + “veces”)
}
</script>

Ejemplo 3

Pero como es muy feo que salga “una veces”, haremos variables con if + else,
Hay que tener en cuenta que la variable “=” es una asignación, o sea ‘cuenta es igual a uno’; pero también las hay de comparación “==”, o sea, “cuando cuenta vale uno”

<script>
for (cuenta=1; cuenta <4; cuenta ++)
{
if (cuenta ==1)
{

pepe » vez» }
else {
pepe “ veces”

}

alert(«Aparezco» + cuenta + pepe)
}
</script>

Si quiero hacer que la función funcione en algún evento de la página, o sea, cuando el usuario interactúa con la página, hay que establecer lo que ocurrirá dentro de <body> o dentro del <div> en el que queremos que se ejecute, etc. Por ejemplo, si queremos que el javascript se ejecute cuando se carga la página, pondremos <body onload ”la función que queremos que se ejecute”>

Al igual que en CSS hay lenguajes que le dicen a HTML que hay cosas de javascritp, al igual que <class>, lo que empieza con “on” como onload, onclick… etc quiere decir que será HTML.

Hay tres tipos de variables:

  • Numéricas (number)
  • Cadenas de caracteres (string)
  • Objetos

La diferencia entre las numéricas y las de caracteres es que éstas se concatenan, o sea, que se van colocando unas detrás de otras, mientras que las numéricas se ejecutan. Para diferenciarlas, las de caracteres van entre comillas

  1. Var num 1 =1; –> Numérica. Por tanto si pongo document.write (var num1 + var num 1) da un resultado 2 (suma)
  2. Var num1 =”1” –> de caracteres. Si pongo document.write (var num 1 + var num 1) da un resultado 11 (concatenación)

Respecto a los objetos, los hay que puede definir el progrmador, al igual que los estilos de CSS; y también los hay propios del lenguaje de programación como los que empiezan con “on” o history.

One Comment
Leave a reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *