Intro a JavaScript

Original de Carlos Castillo, Ph.D., 2005, tomado de http://www.tejedoresdelweb.com)

Actualmente se puede encontrar también en http://tejedoresdelweb.com/w/Introducci%C3%B3n_al_Javascript

• Introducción a JavaScript, por Carlos Castillo, 2005

Contenido:

1. Nota importante
2. Como incluir JavaScript
3. Sintaxis básica
4. Variables
5. Control lógico
6. Palabras reservadas
7. Funciones
8. Objetos
9. Eventos
10. Resumen

El lenguaje JavaScript es el complemento ideal del HTML, al permitir a la página realizar algunas tareas por si misma, sin necesidad de estar sobrecargando el servidor del cual depende.

El siguiente esquema muestra la diferencia:

Usando cgi-bin

Entre estas tareas, puede estar, por ejemplo, realizar algunos cálculos simples, formatear un texto para que sea leído por distintas personas de manera distinta, proveer de un medio de configurar la visualización de una página, realizar un pre-chequeo de validación en un formulario antes de enviarlo, etc.

La especificación "oficial" de JavaScript se puede encontrar en developer.Netscape.com.

1. Nota importante

Este documento asume que usted conoce el lenguaje C, al menos de manera básica y que está familiarizado en grado medio a alto con el lenguaje HTML.

2. Como incluir JavaScript

Existen principalmente tres lugares de una página donde puede aparecer un trozo de lenguaje JavaScript:

1.Usando la directiva: <SCRIPT LANGUAGE="JavaScript"> ... </SCRIPT>. Por ejemplo:

<SCRIPT LANGUAGE="JavaScript">  
document.write( 'Esto es una prueba' );  
<SCRIPT>  

2.Utilizado como respuesta a algun evento. Por ejemplo:

<INPUT TYPE="checkbox"  
 onCLICK="window.status='Usted acaba de hacer click.';  

 return true;">  

Otro ejemplo:

<A HREF="javascript:window.history.back()"> Volver</A>  

3. Sintaxis básica

Es muy similar a la de C. Las instrucciones terminan con un punto y coma (;), se pueden agrupar usando llaves ({}), un doble-slash (//) indica que el resto de la línea es un comentario.

Los operadores matemáticos se mantienen: (suma +,resta -, multiplicación *,división /, módulo %). Además existen el autoincremento y autodecremento ( ++ y -- ).

Se pueden concatenar strings de manera muy simple usando el operador de suma (+).

Ejemplos:

var t1; var t2;  
var resultado;  
t1 = 2; t2 = 10;  
document.write( "t1 = " + t1 + ", t2 = " + t2 );  
resultado = t1 + t2;  
document.write( "Los numero suman " + resultado );  

Las asignaciones de variables se realizan usando el signo igual (=). Adicionalmente existen ( -=, +=, +=, /=, %= ), que funcionan igual que C.

Los operadores lógicos ( or ||, and &&, not !, xor ^, shiftleft <<, shiftright >>, shiftright w/0 >>> ) también están implementados, junto con las comparaciones ( <, >, ==, !=, <=, >= ).

4. Variables

La declaración de variable se debe hacer, si se hace fuera de una función es una variable global, sino es local. Se declara una variable sin indicar explícitamente su tipo, sino usando la instrucción:

var Nombre;  

En que es el nombre de la variable. Más adelante en el programa el mismo intérprete le asigna el tipo apropiado. Esto para seguir la filosofía de diseño de JavaScript que indica que se realizarán programas pequeños, y que la idea es lograr que el programador realice los scripts de la manera más rápida posible.

Se pueden declarar arreglos:

var arreglo = new Array();  
arreglo[0] = 2;  
arreglo[1] = "Elemento 1";  
arreglo[2] = "Elemento 2";  

Claro que no está completamente implementada la forma de definir el número de elementos. Como manera general se puede guardar la longitud del arreglo en el elemento cero.

Se pueden crear objetos con varias propiedades (al estilo de las struct de C) . También aquí esta subycente la filosofía de que los tipos de datos de cada propiedad de la estructura se irán viendo en el camino.

var Autor = new Object();  
Autor.nombre = "Carlos Castillo";  
Autor.apodo = "ChaTo";  
Autor.edad = 19;  

Finalmente, y para deleite de los programadores Perl, también se pueden crear arreglos asociativos, usando este mismo tipo de constructor:

var TablaColor = new Object();  
TablaColor["rojo"] = "FF0000";  
TablaColor["azul"] = "0000FF";  
TablaColor["verde"] = "00FF00";  

5. Control lógico

Existen las instrucciones: if ... else, for, while ... break ... continue, with, function ... return, que funcionan de manera idéntica a C, y la instrucción for ... in.

Ejemplos:

// Suponiendo que la variable myvar existe, y que hay un formulario  

// llamado "myform" que tiene un input de tipo text llamado "texto1"  

if ( myvar == 0 ) {  
  document.myform.texto1.value = 'Error';  
} else {  
  document.myform.submit();  
}  
// Aqui habra un error si el formulario "myform" tiene menos de  

// 31 elementos; los elementos en JavaScript se enumeran  

// comenzando por el elemento cero.  
for ( myvar = 0; myvar <= 30; myvar++ ) {  
  document.myform.elements[myvar].value = '';  
}  
// Un ciclo while tipico que no hace nada excepto hacer position = 30  

var position;  
position = 0;  
while ( position < 30 ) position++;  
// Una vez especificado with, el resto de las variables utilizadas  

// comienzan con el argumento de with  
// se asume que existen dos formularios en el documento, el segundo  

// formulario puede no tener nombre, por lo que se referencia por  

// su numero dentro del arreglo especial 'form'  
with ( document.form[1] ) {  
 nombre.value = "Ingrese aqui su nombre";  
 edad.value = "Puede dejarme en blanco si lo desea";  

}  
// for ... in ejecuta una acción con cada elemento de un arreglo  

for contador in Arreglo {  
  write( Arreglo[contador] );  
}  

6. Palabras reservadas

Además de las nombradas antes, existe la instrucción alert que es muy útil al momento de programar y depurar código JavaScript. Su uso es muy simple:

alert( "mensaje" );  

Otras palabras reservadas son: abstract boolean byte case catch char class const default do double extends false final finally float goto implements import instanceof int interface long native null package private protected public short static super switch synchronized throw throws transient try void , aunque muchas de ellas están implementadas sólo en Java.

7. Funciones

Para declarar una función se usa la instrucción function.

function NombreFuncion (parametro1, parametro2, ..., parametro N ) {  

 ...  
 return valor;  
}  

No existe un cuerpo principal del programa (main), puesto que todo lo que no esté dentro de una función es ejecutado mientras se va cargando la página, conforme va apareciendo. Cuando se declara una función, tampoco es necesario indicar que tipo de valor retornara ella, si es que retorna alguno. Sí importa el orden en que se declaren las funciones, i.e. una función debe ser declarada antes de usarse.

8. Objetos

Los siguientes son algunos de los objetos con los que los scripts pueden interactuar:

Globales document El documento cargado. window La ventana activa form Un formulario del documento, identificado por su atributo NAME además de todos sus elementos, identificados también por sus nombres. history La historia de la ventana o de un frame Objetos especiales Date Un objeto genérico conteniendo una fecha. Math Una biblioteca incorporada de funciones matemáticas y constantes.

Ejemplos:

// recarga la pagina actual (metodo)  
window.history.go(0)    

// contiene el URL de la pagina de la cual venimos (no puede modificarse)  
var x = document.referrer;  

// la barra de estado (si puede modificarse)  
window.status = y;  

// se devuelve (metodo) es equivalente a window.history.go[-1]  
window.history.back()  

// biblioteca de funciones matematicas  
var pi = Math.pi;   

// la barra de estado, cuando nada mas aparece en ella  
window.defaultStatus = z;  

// envia el formulario llamado form1  
document.form1.submit()   

// actua con la ventana.  
window.location = 'index.html'   

9. Eventos

Los siguientes eventos están definidos. Un evento debe asociarse a un elemento HTML, no a un código JavaScript.

Generalmente se usan para a invocar a funciones que realizan alguna operación con el mismo elemento que las invoca, por eso, se define la palabra reservada this para referirse al objeto cuyo evento invocó a la función.

El ejemplo típico es sumar dos números:

<SCRIPT LANGUAGE="JavaScript">  
var valor1 = 0;  
var valor2 = 0;  
function Set1 ( ingreso ) { valor1 = parseInt( ingreso.value ); }  

function Set2 ( ingreso ) { valor2 = parseInt( ingreso.value ); }  

function totalizar ( boton ) { document.myform.total.value = valor1 + valor2; }  
</SCRIPT>>  
<FORM NAME="myform">  

Numero 1: <INPUT TYPE="text" NAME="numero1" onChange="Set1( this )">

Numero 2: <INPUT TYPE="text" NAME="numero2" onChange="Set2( this )">

<INPUT TYPE="button" VALUE="Sumar" onClick="totalizar( this )">  

<INPUT TYPE="text" NAME="total">  

10. Resumen

Para concluir, repasemos lo principal:

• JavaScript es una forma de trasladar algunas tareas simples al lado del cliente.
• JavaScript tiene una sintaxis que es en general parecida a la de C, excepto que no hay una función main sino que lo que no esta dentro de una función se ejecutara mientras se cargue la pagina.
• JavaScript recibe información a a través de eventos y propiedades de objetos, y la entrega mediante propiedades de objetos y métodos.