Este documento describe los conceptos básicos de la programación web con lenguajes de script como JavaScript. Explica la sintaxis y elementos de los lenguajes de script, incluyendo datos, arrays, funciones, variables y objetos. También cubre eventos de script, efectos visuales y algunas aplicaciones comunes de la programación web con lenguajes de script.
2. Programación Web
Lenguaje Script:
Sintaxis
Elementos
Aplicaciones
Eventos Script
Efectos con Lenguaje Script
3. Lenguajes de script
Sintaxis:
Un lenguaje de script es un pequeño lenguaje de programación cuyo código se inserta dentro del
documento HTML. Este código se ejecuta en el navegador del usuario al cargar la página, o
cuando sucede algo especial como puede ser el pulsar sobre un enlace.
Estos lenguajes permiten variar dinámicamente el contenido del documento, modificar el
comportamiento normal del navegador, validar formularios, realizar pequeños trucos visuales,
etc... Sin embargo, conviene recordar que se ejecutan en el navegador del usuario y no en la
máquina donde estén alojadas, por lo que no podrán realizar cosas como manejar bases de
datos. Esto hace que los contadores (por ejemplo) se deban realizar de otra manera, utilizando
programas CGI.
El primer lenguaje de script que vió la luz fue el JavaScript de Netscape. Nacido con la versión
2.0 de este navegador y basado en la sintaxis de Java, su utilidad y el casi absoluto monopolio
que entonces ejercía Netscape en el mercado de navegadores permitieron que se popularizara y
extendiera su uso.
4. Elementos:
Datos
Anteriormente has hecho una primera aproximación a los elementos básicos
con que vas a enfrentarte al programar. Es el momento de ahondar algo más
en estos elementos y comenzaremos por los más elementales:
Los datos. JavaScript maneja cuatro tipos de datos: números, cadenas,
lógicos y punteros.
Los datos numéricos sirven para manejar cualquier número real, como 12,
56.5, -9. Pero también son datos numéricos: 2.0E2, 0xF0, 012. El primero
corresponde a la llamada notación científica: 2.0*102, mientras que el
segundo ejemplo corresponde a la notación hexadecimal y el tercero a la
octal. Lo normal es que sólo uses valores decimales y a veces hexadecimales
(como los códigos RGB par definir colores).
Los datos de cadena son los usados para representar palabras, así los
siguientes son datos de cadena: "prueba", "La clave es 4r5t". Observa que
estos datos están encerados entre comillas, es la forma de decirle a
JavaScript que está ante una cadena de caracteres y no ante un nombre o
descriptor de algún elemento del programa.
5. Este tipo de datos no es ni numérico ni de cadena, es un dato
lógico o técnicamente booleano. En los lenguajes de
programación en lugar de sí o no se emplean los valores true o
false. Estos datos son los que utilizaras cuando en los programas
se tengan que tomar decisiones, o sea, comprobar algo y actuar
en consecuencia: si el explorador es Netscape 4.0, no usar efectos
de presentación, por ejemplo.
Existe un último tipo de datos que también se emplea a menudo
en los scripts para la captura de eventos, son direcciones de
memoria, o punteros, usadas para asignar funciones. Si en una
variable se guarda el nombre de una función esa variable se
convierte en otro nombre para esa función. ¿Raro? Esto tiene su
verdadera utilidad al asignar funciones a los eventos disparados
por el ratón.
6. Arrays
Apesar de su extraño nombre los arrays no son más que estructuras para
almacenar listas de valores. A diferencia de otros lenguajes, en Javascript los
arrays no son un tipo de variable sino que fueron implementados por
Netscape como un objeto, lo cual les da una potencia enorme.
Pero empecemos por abajo. Un array puede verse como una lista con nombre
donde podemos anotar cosas, cada anotación se identifica por su número de
orden en el array (la lista), su índice, y el número total de espacios para
anotar cosas en el array es su longitud. Si en un array tenemos anotados 5
números, el primero de todos será el de índice 0 y el último tendrá como
índice el 4, siendo 5 la longitud del array. Simple ¿verdad?, veamos como se
crea un array y como se asignan valores en unos ejemplos muy sencillos:
....
semana = new Array(7);
miLista = new Array(1,5,9);
nombres= new Array('Juan', 'Luis', 'María');
vacio = new Array();
interesante = new Array(4);
7. Funciones
Las funciones como decíamos en la introducción, no son más que
bloques de instrucciones de programa con nombre y que pueden
ejecutarse sin más que llamarlas desde alguna parte de otra función o
desde la página HTML, bien sea directamente o mediante eventos.
Habitualmente una función se crea para ejecutar una acción muy
concreta. Javascript posee una serie de funciones predefinidas o
funciones globales pero el programador puede crear las suyas propias.
Para crear una función tan sólo es necesario indicárselo al intérprete
mediante la plabra clave function seguida del nombre que deseemos
darle a la función y, encerrados entre paréntesis, las variables que
simbolizan los valores con los que deba trabajar la función, los
argumentos.
8. Variables
Ya dijimos que los datos, los valores, no siempre pueden
utilizarse de manera directa, sino que habitualmente se
almacenan en una posición de memoria con nombre, esto
es lo que llamamos una variable. En otros lenguajes de
programación existen diferentes tipos de variables en
función del tipo de datos que pueden guardar: variables
para cadenas, para números enteros, para números reales,
etc.. JavaScript es muy permisivo en este aspecto de
manera que una variable puede guardar cualquier tipo de
dato y además pueden crearse en cualquier parte del
programa.
9. Objetos
Javascript no posee todas las características de los lenguajes
orientados a objetos como Java o C++, pero si es capaz de
manejar objetos e incluso crearlos. De hecho si un programa en
este lenguaje es capaz de interactuar con el explorador es
gracias a esta capacidad. Javascript posee algunos objetos
predefinidos u objetos intrínsecos como son: Array, Boolean,
Date, Function, Global, Math, Number, Object, RegExp, y String.
Además el programador puede crear objetos nuevos, con sus
propios métodos y propiedades, adaptados a las necesidades
concretas de su aplicación.
10. Aplicaciones
La mayoría de aplicaciones mas utilizadas son completamente gratuitas,
esto facilita al usuario común a poner en marcha su web, tienda virtual o
comunidad de forma muy sencilla sin necesidad de saber programar.
Esto que sin duda es una gran ventaja también supone un gran
inconveniente:
Al ser aplicaciones con el código abierto, todo el mundo puede acceder
a su código, incluido aquellos que buscan agujeros de seguridad para
hacer un mal uso de este. También hay que destacar que algunas de
estas aplicaciones carecen de un código bien depurado y optimizado, ya
que muchos basan la creación de estos en torno a una comunidad y no a
un equipo de programadores bien organizados, es por ello que
continuamente se descubren nuevos bugs y errores.
La utilización de este tipo de aplicaciones presupone que cuando se
produzcan errores, se busque soporte técnico en la comunidad o equipo
de desarrollo de la aplicación. En Evidalia Hosting trabajamos para
mantener un correcto funcionamiento de los distintos servicios, pero no
podemos dar soporte para este tipo de aplicaciones.
11. Eventos
Antes de nada, una premisa: a la hora de decidir en qué orden
tratar los distintos temas, estaba bastante indeciso sobre el
lugar en que colocar esta lección y las relacionadas con ella, ya
que en algunos textos los eventos son tratados antes de las
funciones y en otros después.
La elección no era indiferente porque el tema constituye una
parte importante de la teoría Javascript y, si se coloca en una
posición equivocada, puede llegar a romper el carácter
secuencial de la exposición.
12. Los eventos se usan para invocar instrucciones. Así, el
script se ejecuta secuencialmente, pero, para conseguir
introducir el carácter dinámico e interactivo, debe cargarse
en memoria y activarse o invocarse sólo cuando se verifican
situaciones particulares como el ratón que pasa, un
documento que se carga, etc. El problema de la conciliación
con las funciones reside en el hecho de que a un evento
puede ir asociada una sola instrucción, pero la mayor parte
de las veces, la asociación está establecida con un bloque de
instrucciones y, por tanto, con las funciones que toman el
nombre de handler o gestores de eventos.
13. Es importante entender este concepto porque Javascript,
en sus comienzos, tenía pocos eventos, los cuales se
activaban sólo si insertados en particulares marcas y
sucede a menudo que se utilizan los handler de manera
arbitraria y que se considere como error la no activación
de un evento cuando insertado en marcas incompatibles.
Internet Explorer en las versiones más recientes ha
ampliado las posibilidades de uso de los eventos, por lo
que pueden insertarse en muchísimas marcas, mientras
que Netscape ha permanecido fiel a las impostaciones
originarias.
14. Efectos
Con Javascript podemos crear efectos especiales en las páginas y
definir interactividades con el usuario. El navegador del cliente es el
encargado de interpretar las instrucciones Javascript y ejecutarlas para
realizar estos efectos e interactividades, de modo que el mayor recurso,
y tal vez el único, con que cuenta este lenguaje es el propio navegador.
Javascript es el siguiente paso, después del HTML, que puede dar un
programador de la web que decida mejorar sus páginas y la potencia de
sus proyectos. Es un lenguaje de programación bastante sencillo y
pensado para hacer las cosas con rapidez, a veces con ligereza. Incluso
las personas que no tengan una experiencia previa en la programación
podrán aprender este lenguaje con facilidad y utilizarlo en toda su
potencia con sólo un poco de práctica.
15. El script permite utilizar varios efectos, mas de 20.
Incluye:
Scroll desde diferentes ángulos y slide.
Efecto de zoom
Slide.
Shuffle.
Efecto de desvanecimiento o Fade.
Entre otros.