Manual [ - Java Scrip - ]
INDICE:1) Introducción al lenguaje JavaScript:
A) Programas, lenguajes, scripts...
B) El Javascript....
C) Variables, datos, objetos...
D) La ejecución de los scripts.
2) Elementos del lenguaje:
A) Los datos
B) Las variables
C) Los Objetos
D) Los Arrays
E) Las funciones
3) Los operadores:
A) Operadores aritméticos
B) Operadores binarios
C) Operadores lógicos
D) Operadores varios
E) Funciones Globales en Javascript
F) Expresiones regulares
4) La gramática:
A) Gramática JavaScript: Condicionales
B) Gramática JavaScript: Selección múltiple
C) Gramática JavaScript: Bucles
D) Gramática JavaScript: Ruptura de bucles
5) Los objetos:
A) Objetos en JavaScript: Array
B) Objetos booleanos: Verdadero o Falso
C) Objeto Function
D) Objeto Number
E) Objeto Object
F) Objeto Regular Expresion
a) Métodos RegExp: Compile
b) Métodos RegExp: Exec
c) Métodos RegExp: Test
d) RegExp
G) Objeto String
a) Métodos de String: anchor
b) Métodos de String: big
c) Métodos de String: blink
d) Métodos de String: bold
e) Métodos de String: charAt
f) Métodos de String: charCodeAt
g) Métodos de String: concat
h) Métodos de String: fixed
i) Métodos de String: fontcolor
j) Métodos de String: fontsize
k) Métodos de String: fromCharCode
l) Métodos de String: indexOf
m) Métodos de String: italics
n) Métodos de String: lastIndexOf
o) Métodos de String: link
p) Métodos de String: match
q) Métodos de String: replace
r) Métodos de String: search
s) Métodos de String: slice
t) Métodos de String: small
u) Métodos de String: split
v) Métodos de String: strike
w) Métodos de String: sub
x) Métodos de String: substr
y) Métodos de String: substring
z) Métodos de String: sup
aa) Métodos de String: toLowerCase
bb) Métodos de String: toUpperCase
H) Objeto Date
a) Métodos de Date: getDate()
b) Métodos de Date: getDay()
c) Métodos de Date: getFullYear()
d) Métodos de Date: getHours()
e) Métodos de Date: getMilliseconds()
f) Métodos de Date: getMinutes()
g) Métodos de Date: getMonth()
h) Métodos de Date: getSeconds()
i) Métodos de Date: getTime()
j) Métodos de Date: getTimezoneOffset()
k) Métodos de Date: getYear()
l) Métodos de Date: Object.toString()
m) Métodos de Date: Object.valueOf()
n) Métodos de Date: parse()
o) Métodos de Date: setDate()
p) Métodos de Date: setFullYear()
q) Métodos de Date: setHours()
r) Métodos de Date: setMilliseconds()
s) Métodos de Date: setMinutes()
t) Métodos de Date: setMonth()
u) Métodos de Date: setSeconds()
v) Métodos de Date: setTime()
w) Métodos de Date: setYear()
x) Métodos de Date: toGMT()
y) Métodos de Date: toLocaleString()
z) Métodos de Date: toUTCString()
I) Objeto Math
a) Métodos Math: abs
b) Métodos Math: acos
c) Métodos Math: asin
d) Métodos Math: atan
e) Métodos Math: atan2
f) Métodos Math: ceil
g) Métodos Math: cos
h) Métodos Math: exp
i) Métodos Math: floor
j) Métodos Math: log
k) Métodos Math: max
l) Métodos Math: min
m) Métodos Math: pow
n) Métodos Math: random
o) Métodos Math: round
p) Métodos Math: sin
q) Métodos Math: sqrt
r) Métodos Math: tan
6) Ejemplos JavaScript:
A) Operadores
B) Media Aritmética
C) Saludo
D) Array aleatorio
E) Comprobar E-mail 1
F) Comprobar E-mail 2
G) Buscar en un Array
H) Extraer Subcadena
I) Creando Objetos
7) Aplicaciones JavaScript HTML:
A) El Reloj en pantalla
B) Fecha de Actualización
C) Menús Desplegables (IE)
D) Formularios de Correo
E) Personalizar Colores
F) Persianas
G) Rollover
H) Información del Navegador
I) Esquema desplegable (IE)
J) Botón más/menos
K) Password 1
L) Título de página animado
M) Bloque fijo
N) Paisaje Nevado 1
O) Paisaje Nevado 2
P) Estrella Navideña 1
Q) Estrella Navideña 2
R) Buscador en la Página
S) Página de Inicio
T) Carrusel de Imágenes
1) Introducción al lenguaje JavaScript:
A) Programas, lenguajes, scripts...
Antes de comenzar: Nada de asustarse por la jerga técnica. Para quién comienza desde
cero, estas cosillas son lo primero que debiera conocer: Que es eso de programa,
lenguaje, scripts o guiones....
Lo primero a aclarar es lo del programa, algo que realmente no es exclusivo de la informática, todos hemos programado alguna vez: al poner el vídeo para que grabe cuando no estamos en casa, cuando ponemos el despertador para que nos dé el disgusto
matutino...En el caso de un programa informático los que programamos es un ordenador y los programas habitualmente se hacen escribiéndolos en un cierto lenguaje.
Concretando, un programa no es mas que una serie de instrucciones que le damos a un sistema para que haga cosas. En otras palabras, y en el caso que nos atañe, es decirle al ordenador como hacer una determinada tarea. Puede por tanto ser algo tan simple como decirle que sume dos números y nos diga el resultado hasta algo tan complejo como decirle que controle todo un edificio: temperatura, puertas, iluminación... En nuestro
caso es algo bastante sencillo, vamos a decirle al ordenador que cuando presente nuestra página web al visitante haga cosas como poner en la página la fecha del día, hacer que una imagen se mueva de un lado a otro, responder de una determinada forma a la pulsación del ratón, etc.
Para escribir un programa no nos vale ni el castellano, ni el inglés, ni ninguno de los lenguajes que habitualmente usa el hombre para comunicarse. Para entendernos con un ordenador se utilizan los lenguajes informáticos. Existen dos grandes grupos de
lenguajes a la hora de escribir un programa: Los compilados y Los interpretados.
Cuando usamos lenguajes compilados seguimos los siguientes pasos:
• Nosotros escribimos el programa (código fuente),
• Un programa lo traduce al lenguaje interno del ordenador (se compilan)
• Se obtiene así un nuevo fichero que es el que se ejecuta tantas veces como se
desee.
Los programas así obtenidos son los que se almacenan en ficheros con un nombre terminado en .exe o en .com, si trabajamos en los sistemas operativos DOS o Windows. Podríamos resumir: Un programa compilado se traduce una vez y se ejecuta cuantas
veces se desee. A este grupo pertenecen los lenguajes tradicionales como C, Pascal, Ada y otros.
El otro grupo es el de los lenguajes interpretados, en éstos el programa se escribe (código fuente), y el ordenador va leyendo cada instrucción, la traduce y la ejecuta. O sea, es necesario traducir el programa cada vez que se ejecuta. ¿Quién traduce las
instrucciones del programa? Pues muy sencillo, otro programa: el traductor o intérprete. A este grupo pertenece el legendario Basic, el Perl y los llamados scripts como JavaScript y Vbscript. Los programas escritos en estos dos últimos lenguajes son
interpretados por los navegadores de Internet como Internet Explorer, Netscape Navigator, Opera.
B) El Javascript....
Escribir un programa por lo tanto es simplemente escribir instrucciones para que las ejecute el ordenador, utilizando para ello un cierto lenguaje. Es como escribir en inglés: necesitas conocer el vocabulario y la gramática del idioma de Shakespeare. En nuestro caso usamos como lenguaje el JavaScript y necesitas conocer sus reglas y su vocabulario. Como ya sabes se trata de un lenguaje interpretado y los programas escritos con estos lenguajes son conocidos como scripts o guiones. Pese a su nombre no tiene nada que ver con Java, este último es un lenguaje algo más complejo con el que se pueden construir programas de propósito general como podría hacerse con C++ o
Visual Basic, la particularidad que tienen los programas Java es que pueden funcionar en cualquier ordenador y con cualquier sistema operativo. Las aplicaciones escritas para
Internet en Java son conocidas como applets.
La única razón de ser de JavaScript son las páginas web. Con JavaScript no pueden construirse programas independientes, sólo pueden escribirse scripts que funcionarán en el entorno de una página Web, interpretado por un explorador, de ahí la importancia de conocer para que explorador escribimos los guiones. Y aquí viene el primer obstáculo: no todos los exploradores integran en la misma forma los guiones JavaScript.
La primera versión de JavaScript se debe a Netscape, que lo introdujo con la versión 2.0 de su explorador, posteriormente han ido surgiendo nuevas versiones habiendo sido estandarizado por la European Computer Manufacturers Asociation (ECMA).
Pondríamos preguntarnos por que el esfuerzo de aprender JavaScript, ya es bastante con el HTML para construir páginas Web. En parte esto es cierto, con un buen programa
editor podemos obtener una página para publicar en la red, pero esa página Web consistiría en: texto, imágenes e hipervínculos, con los atributos como colores, tipos de letra y poco más sobre los que el autor puede actuar. Pero ¿y si quisiéramos poner un
menú desplegable?, ¿y si queremos que el visitante pueda mover una imagen por la pantalla? .¿y si necesitamos validar el texto entrado por el usuario?.... En resumen si queremos ir mas allá de la simple presentación de un documento en pantalla y queremos
controlar al explorador no hay mas remedio que utilizar un programa. ¿Por qué en JavaScript? muy simple: es soportado por todos los exploradores, es sencillo y es el que está siendo contemplado por los organismos de normalización.
C) Variables, datos, objetos...
Para comenzar a utilizar Javascript (y cualquier lenguaje de programación) es necesario conocer algunos conceptos básicos, no podemos empezar a hacer una casa si no sabemos que existen los ladrillos. Un programa es una lista de instrucciones, pero esas
instrucciones se deberán ejecutar sobre algo, si damos una instrucción escribir debemos especificar que es lo que hay que escribir. Es evidente pues que en las instrucciones del
programa también deben figurar los datos con que trabajar. Por ejemplo el nombre de una persona es "Juan", esta palabra es un dato. El precio de una manzana en ptas. es 10, este número es otro dato. Estos datos no suelen usarse tal cual sino que se almacenan en unos elementos con nombre denominados Variables. En los ejemplos previos usaría una variable, nombre, para guardar "Juan" o precio para guardar el 10. Si ahora digo al ordenador que escriba nombre el ordenador escribirá su contenido, o sea, Juan. Un pequeño ejemplo par no aburrirnos: abre una ventana y escribe en la caja de direcciones del explorador lo que sigue:
javascript:nombre="juan";window.alert(nombre)
¡Acabas de escribir un par de instrucciones en JavaScript! (no te preocupes aún de su significado), como ves has dado un valor a la variable nombre y luego se ha escrito el valor de esa variable. En el ejemplo anterior también podrías haber escrito:
window.alert("Mi nombre: "+nombre).
Mediante el símbolo + has concatenado ambas cadenas. Has usado un operador, algo que no es nuevo si has estudiado alguna vez matemáticas. Los operadores son símbolos usados para realizar operaciones con los datos, son los símbolos +, -, /, *,
respectivamente sumar, restar, dividir y multiplicar. Como sabes estos operadores se usan con datos numéricos: 4 + 5 son 9. Estas dos instrucciones que has escrito podrían encerrarse en un bloque con un nombre, por ejemplo mepresento() y tendrías una
función. Podríamos definir una función llamada quehoraes() que encierre las instrucciones necesarias para que aparezca en pantalla la hora actual. Es decir mediante las funciones creamos las órdenes que luego podremos darle al navegador para que
actúe según nuestro deseo. Hasta aquí has visto los elementos básicos existentes cualquier lenguaje de programación, pero alguna vez habrás leído que Javascript es un lenguaje que utiliza
objetos a diferencia de Java que es un lenguaje orientado a objetos. ¿Y que es eso de objetos? Los objetos son como una extensión de las variables, una estructura que nos
permite agrupar diferentes valores y nombres de funciones. Una variable numérica sólo puede contener eso, un número: 10 o 20 o 2000, una cadena tipo sólo puede guardar una serie de caracteres "ACAD", "LE18P". Un objeto va mas allá puede guardar varias
cosas a la vez. ¿Suena raro?. Veamos un ejemplo muy sencillo: un rectángulo se caracteriza por la longitud de sus lados y por la forma de dibujarlo.
En un programa el rectángulo se asimilaría a un objeto que tendría dos propiedades: base y altura, y un método: como_dibujarlo. Este como_dibujarlo sería una función que dibuja rectángulos.
Si un programa define la variable mirectángulo como un objeto de este tipo y contiene la instrucción mirectangulo.como_dibujarlo dibujaría en pantalla un rectángulo. La ventana del explorador que tienes delante es un objeto con propiedades como: altura,
anchura, nombre... y métodos como abrir, cerrar, mover...Vamos a hacer algo con este objeto que se llama window, para ello abre otra ventana de tu navegador y escribe en la barra de direcciones javascript:window.close(). ¿Has visto lo que ocurre? Has usado el
método close() del objeto window para cerrar la ventana. Otro ejemplo escribe javascript:window.alert(window.closed), ahora has usado el método alert del objeto window para mostrar una ventana con el valor de la propiedad closed, closed que dice si
la ventana está cerrada o abierta. Los objetos son bastante mas complicados que lo aquí expuesto, pero JavaScript no es un lenguaje orientado a objetos, aunque puede crearlos
y por supuesto manipularlos. Los scripts manipulan los objetos propios del lenguaje y los que le proporciona el navegador. Y he aquí la causa de tus primeros dolores de cabeza como programador en javaScript: los sistemas de objetos de los diferentes navegadores no coinciden al 100%.
D) La ejecución de los scripts.
Habitualmente cuando quieres ejecutar un programa basta con buscar el archivo correspondiente y hacer un sencillo click de ratón o pulsar la tecla enter. ¿Pero que pasa con los programas en JavaScript?. En los ejemplos que has escrito en los apartados
anteriores has enviado instrucciones en javascript al navegador, le has dado órdenes en directo. Pero esta no es la forma habitual de ejecutar programas en JavaScript.
Lo normal es que la ejecución se realice de forma automática cuando el navegador carga una página, o cuando el usuario pasa el ratón por una imagen, o cuando pulsa el botón de un formulario, etc. Estos cambios provocan los llamados eventos que son recibidos por el navegador que reaccionará en la forma adecuada: si haces click en un hiperenlace se genera un evento y el navegador abre una nueva página. Esos eventos son los que se
aprovechan para que se ejecuten las instrucciones que nosotros escribimos en JavaScript. A cada evento se le puede asociar una función para que haga algo predeterminado por nosotros. Por ejemplo cuando el navegador carga una página se produce un evento que puede aprovecharse para hacer que se abra otra ventana (las conocidas como ventanas popup tan usadas para mensajes publicitarios), o cuando pasamos el ratón por una enlace se produce otro evento que puede aprovecharse para
llamar a una función que modifique el color en que se muestra el enlace, o cuando el usuario pulsa una tecla. Los eventos tienen la naturaleza de objetos, o sea, poseen métodos y propiedades. Así cuando se produce un evento podemos saber quien lo
dispara, en que posición de la pantalla se ha disparado y otras propiedades dependientes de cada evento en concreto. Y aquí viene uno de las causas para tus futuros dolores de
cabeza: cada navegador maneja los eventos de manera algo diferente.
Pero sigamos con el tema de la ejecución de los programas, veamos que es eso del flujo de programa. Cuando el navegador empieza a leer el script para ejecutarlo lo hace en
orden secuencial, o sea, empieza con la primera instrucción, sigue por la segunda y así hasta llegar al final. Esto es lo que se conoce como ejecución secuencial o lineal. Pero a veces es necesario saltarse instrucciones, por ejemplo, construyes una página a la que sólo pueden entrar determinadas personas, deberás escribir una función que pida el nombre de quien desee ver la página, si es una persona autorizada muestra la página y si no lo es no la muestra.
Tu programa no ha seguido un flujo lineal, unas veces ejecutará
la parte de mostrar la página y otras no. Otra situación bastante común: deseas que tu programa recorra todas las imágenes de tu página y vaya cambiando su contenido, no vas a escribir el mismo código una y otra vez, lo ideal sería escribir las instrucciones y
poderlas repetir.. Cualquier lenguaje de programación tiene solucionado este asunto mediante las llamadas sentencias de control del flujo de programa. Son sentencias que permiten que se ejecuten condicionalmente algunos pasos (condicionales) o repetir una serie de instrucciones una y otra vez (bucles). Estas instrucciones la veremos en capítulos posteriores, con ejemplos y probando cositas.
2) Elementos del Lenguaje:
A) Los 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 mas en estos elementos y comenzaremos por los más elementales: los datos. JavaScript maneja cuatro tipos de datos: numéricos, de cadena, booleanos 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.
Los datos de cadena son los usados para cadenas alfanuméricas, o sea, 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. Es decir "41" es un dato de cadena mientras que 41 es el número cuarenta
y uno. ¿Y que ocurre si quiero que la cadena tenga comillas?, por ejemplo queremos escribir la siguiente frase Juan alias "Maqui" es el jefe, en JavaScript esto es una cadena y debe encerrarse entre comillas "Juan alias "Maqui" es el jefe", la interpretación de esta
cadena daría un error como puedes comprobar si escribes en la barra de direcciones la siguiente instrucción:
javascript:window.alert("Juan alias"Maqui" es el jefe" )
¿Por qué? Pues por que ahí hay dos cadenas y un nombre en medio: "Juan alias", Maqui y "es el jefe". JavaScript intentará encontrar una variable con el nombre Maqui. Para poder hacer esto correctamente se usa el carácter de escape: , lo que sigue a esta barra invertida es un carácter especial que debe interpretarse como un carácter normal, prueba ahora esto:
javascript:window.alert("Juan alias "Maqui" es el jefe" )
Ahora ya funciona perfectamente. Existen mas caracteres especiales como tabulaciones, cambios de línea de escritura, borrado izquierda, la propia barra invertida. Puedes
probarlos con la técnica del alert: javascript:window.alert("Esto usa una t tabulación " ) javascript:window.alert("Esto usa un
cambio de línea" ) javascript:window.alert("Esto usa un r retorno de carro" ) javascript:window.alert("Esto es la barra invertida " )
Esto es bastante importante pues en muchas ocasiones usarás un programa para escribir segmentos de páginas HTML donde tendrás que usar caracteres especiales, como por ejemplo las comillas de los atributos. Estos datos son bastante habituales incluso en la vida cotidiana, pero existen mas tipos de datos como seguro sabes. Por ejemplo si preguntas a alguien ¿son las cinco en
punto? Sólo hay dos posibles respuestas: SI o NO. Este tipo de datos no es ni numérico ni de cadena, es 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.
B) Las variables.
Ya dijimos que los datos, los valores numéricos 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. Esto último es cómodo pero peligroso pues puede llevar a programas difíciles de depurar y de modificar, es conveniente llevar un cierto control sobre las variables que vas usando en cada función y declararlas al principio de la misma.
Hemos dicho que las variables tienen nombres, ¿cómo son estos nombres? Vale cualquier combinación de letras y dígitos, mas el guión bajo, siempre que el primer carácter no sea un dígito y por supuesto que no coincida con una palabra reservada del lenguaje, es decir, palabras con un significado especial para el intérprete como close, open, write... Es aconsejable usar nombres autoexplicativos, es una forma de documentar tus programas. Por ejemplo una variable para guardar una dirección de un icono puede llamarse direc_icono. Un último detalle JavaScript diferencia entre mayúsuclas y minúsculas, así Edad y edad serían dos variables distintas.
Otro aspecto a tener en cuenta a la hora de usar las variables es su ámbito, es decir, qué funciones tienen acceso a ellas. Si se crea una variable dentro de una función sólo será conocida dentro de esa función, se trata de variables locales. Si se necesita que varias funciones tengan acceso a una determinada variable ésta debe crearse como variable global, esto se hace creándola fuera de todas las funciones. Por ejemplo en el siguiente
script tenemos variables globales y locales:
<script language="Javascript">
var navegador_version = 0;
function verNavegador()
{
var version;
version = document.appVersion;
return version;
}
</script>
En este ejemplo navegador_version es una variable global mientras que version es local a la función verNavegador(). Observa que las variables están creadas con la palabra clave var, el uso de esta palabra es opcional, sólo es obligatorio si una variable local tienen el mismo nombre que una global. Otro detalle a tener en cuenta es que al mismo tiempo que creamos la variable podemos darle un valor, si no lo hacemos la variable
contendrá el valor null.
C) Los 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.
Crear un objeto nuevo es tan simple como definir cuales serán sus propiedades y sus métodos, teniendo en cuenta que cualquier objeto que definamos ya posee heredados los métodos y propiedades del objeto predefinido object. En el ejemplo siguiente creamos un objeto pagina que aclarará la forma de crear objetos propios:
function pagina (titulo, color, fondo)
{
this.titulo = titulo;
this.color = color;
this.imgfondo = fondo;
this.length = 3;
}
var miPagina = new pagina("Mi página", "Blue", "cruces.gif" );
var nuevapag = new pagina("2ª Página", "White", "" );
Este objeto se crea con el operador new pasándole como argumentos las propiedades declaradas para este objeto: titulo, color, imgfondo. La palabra clave this se usa para referirnos al propio objeto que estamos definiendo. Aún mas podemos crear propiedades nuevas sólo para la variable miPagina, pero estas propiedades no afectarán al objeto pagina en sí. Por ejemplo:
miPagina.descripcion = "Este es un ejemplo";
alert (miPagina.descripcion);
da como resultado la frase Este es un ejemplo, pero si ahora escribiéramos:
alert(nuevaPag.descripcion);
obtendríamos undefined pues descripcion solo es una propiedad de la variable miPagina no del objeto pagina. Para ampliar un objeto usamos la propiedad prototype:
pagina.prototype.descripcion = "Objeto definido por mi";
alert(nuevaPag.descripcion);
alert(miPagina.descripcion);
Ahora hemos añadido una propiedad al objeto pagina y esta propiedad se transmite a las variables de tipo pagina (mas correctamente instancias de pagina), por tanto en
ambos casos obtendríamos la frase Objeto definido por mí, que es el valor dado a la
nueva propiedad.
D) Los Arrays
A pesar 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);
...
El array semana se ha creado con longitud 7, o sea, permite 7 elementos. El array miLista se ha creado con longitud 3 y se ha dado valor a cada elemento al igual que el array nombres. Por último el array vacio se ha creado sin longitud.
...
semana[0] = 'Lunes';
semana[1] = 'Martes';
semana[2] = 'Miércoles';
semana[3] = 'Jueves' ;
semana[4] = 'Viernes';
semana[5] = 'Sábado';
semana[6] = 'Domingo' ;
vacio[5] = 'ultimo';
interesante['Jose'] = 10;
interesante['Pilar'] = 5;
interesante['Antonio'] = 8;
....
En este último segmento de código hemos rellenado los arrays: semana se ha rellenado con los nombres de los días de la semana. Observa el array vacio, hemos dado valor al elemento 5, a partir de ahora este array tiene longitud 6 con los cindo primeros elementos con valor null y el sexto (vacio[5]) con valor 'último'. Por último el array llamado interesante, y lo es: los índices no tienen porque ser numéricos. Cada elemento de un array puede ser un valor de cualquier tipo: números, cadenas ... u otro array, en este último caso tendremos arrays multidimensionales, o sea, donde cada elemento tiene varios índices o coordenadas para localizarlos. ¿Un lio? vemos el caso mas simple, un array bidimensional sería un array donde cada elemento es a su vez otro array con lo que cada elemento tendrá dos índices uno para el primer array y otro para el segundo.
El array bidimensional podmeos imaginarlo como una tabla ordenada en filas y columnas, cada elemento del array es una celda de esa tabla. Un ejemplo para una tabla de 3 filas y 2 columnas:
function matBidim()
{
var tabla = new Array(3);
tabla[0] = new Array(2);
tabla[0][0] = 10;
tabla[0][1] = 5;
tabla[1] = new Array(2);
tabla[1][0] = 7;
tabla[1][1] = 8;
tabla[2] = new Array(2);
tabla[2][0] = 9;
tabla[2][1] = 3;
alert(tabla[1][1]); /*Visializaría un cuadro con el
número 8*/
}
Como ves la cosa es sencilla: el array tabla tiene tres elementos y cada uno de ellos es a su vez otro array de dos elementos.
E) Las Funciones
Las funciones como decíamos en la introducción, no son mas que bloques de instrucciones de programa con nombre y que pueden ejecutarse sin mas 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. Los paréntesis deben escribirse aunque no haya argumentos. Para los nombres de funciones seguimos las mismas reglas que para las variables: carateres, dígitos y guión bajo, debiendo comenzar por un carácter o
el guión bajo.
Como es natural es recomendable dar a las funciones un nombre representativo de la operación que realize. Por supuesto no debemos darle un nombre que ya exista en JavaScript. A continuación encerradas entre llaves escribimos las sentencias u órdenes en JavaScript. Opcionalmente la función puede finalizar con la palabra clave return seguida de un valor, este valor será el que devuelva la función al programa que la llame.
Por ejemplo:
function sumar(a,b)
{
var suma;
suma = a + b;
return suma;
}
Mediante este ejemplo creamos la función llamada sumar, que utiliza dos argumentos y lo que hace es sumar estos argumentos. Por último devuelve el resultado de la operación, mediante la palabra clave return seguida del valor que debe devolver. Ahora en el siguiente código de programa usamos la función recién definida:
var operacion;
operacion = sumar(4,5);
alert(operacion);
En este código llamamos a la función con los argumentos 4 y 5 y almacenamos el resultado en la variable operacion.
Hasta aquí el comportamiento de las funciones JavaScript es similar a cualquier otro lenguaje, pero en JavaScript las funciones también son objetos. Veamos el siguiente
ejemplo:
var multip = new Function("x", "y", "return x * y" )
alert(multip(8,9));
Interesante, ahora multip no es una variable cualquiera sino una instancia del objeto Function y puede usarse como la propia función. Esta característica permite asignar directamente funciones a los eventos de las páginas web y así simplificar su
programación.
3) Los Operadores:
A) Operadores Aritméticos
En los primeros ejemplos de este tutor tan sólo se han usado sentencias muy simples como asignar un valor a una variable, mediante el operador de asignación, =, o realizar
operaciones aritméticas, pero evidentemente JavaScript puede realizar mas operaciones. En esta seccion y las siguientes se presentan los operadores de que dispone este lenguaje
clasificados en varios grupos, según el contexto en el que se usen. Comenzamos con los mas conocidos, los operadores aritméticos.
Suma +
Se trata de un operador usado para sumar dos valores numéricos o para concatenar cadenas entre sí o números y cadenas.
var var1 = 10, var2= "Buenos", var3 = " días", var4 = 31;
document.write(var1+var4) /* resultado 41 */
document.write(var2+var3) /* resultado: Buenos días */
document.write(var1+var3) /* resultando: 10 días */
Resta -
Operador usado para restar valores numéricos. Puede actuar sobre un único operando numérico cambiándole de signo.
var num1 = 10, num2 = 8, res = 0;
res = num1 - num2; /*res contiene 2 */
res = -res /* ahora res contiene -2*/
Producto ( * ) y cociente ( / )
Realizan las operaciones aritméticas de multiplicar y dividir dos valores
var op1 = 50, op2= 4, div, mul;
div = op1/op2 /*div contiene 12.5 */
mul = op1 * op2 /*mul contendrá 200 */
Resto %
También llamado operador módulo calcula el resto de una división.
var op1 = 50, op2= 4, resto;
resto = op1 % op2; /*resto contiene 2 */
Incremento ( ++) y decremento (--)
Estos operadores se usan para incrementar o decrementar en 1 el valor de una variable. Si el operador se antepone a la variable la operación de incremento o decremento es prioritaria sobre cualquier otra.
var op1=5, op2 = 5, res;
res = ++op1; /*res adquiere el valor 6 y luego op1 el 6*/
res = op1++; /*res adquiere el valor 5 y luego op2 el 6*/
Operadores compuestos
Los operadores +, -, *, / pueden asociarse con el operador de asignación (=) para cambiar el valor de una variable numérica por incrementándolo, decrementándolo, multiplicándolo o dividiéndolo por un valor. El operador += puede usarse igualmente con variables de cadena.
var num = 20, cad = "buena";
num += 5; /*num adquiere el valor 25 (20 + 5) */
cad += 's' ; /*cad adquiere el valor 'buenas' */
num *= 10; /*num adquiere el valor 250 (25*10) */
B) Operadores Binarios
E l ordenador, internamente, trata cualquier tipo de datos como una cadena binaria (ceros y unos). Así los números se representan en sistema binario de numeración mientras que los caracteres se convierten a código ASCII, que son números que se
almacenan por tanto codificados en binario. JavaScript ofrece los operadores típicos para trabajar con estas cadenas a nivel de bit (cada uno de los ceros o unos de las cadenas binarias. Para trabajar con estos operadores es conveniente tener una idea
previa sobre la codificación binaria.
Complementación ~
Complementa una cadena binaria convirtiendo los 1 en 0 y los 0 en 1.
Por ejemplo el número 38 escrito en sistema binario es 00100110 si le aplicamos este operador se convierte en 11011001, o sea el -39 (JavaScript usa codificación en complemento a 2 para los números negativos).
Desplazamiento izquierda <<
Desplaza los bits a la izquierda los lugares que se le indique rellenando con ceros por la derecha y desechando los bits de mayor peso, esto equivale a multiplicar por potencias de 2. Por ejemplo si al 00011010 (26) lo desplazamos 2 a la izquierda tendremos el 01101000 (104).
var num = 26, res;
res = num << 2; /* num contendrá 104 */
Desplazamiento derecha >>
Desplaza los bits a la derecha los lugares que se le indique rellenando con ceros por la izquierda y desechando los bits de menor peso, esto equivale a una división entera por potencias de
2. Por ejemplo si al 00011010 (26) lo desplazamos 2 a la derecha
tendremos el 00000110 (6).
var num = 26, res;
res = num << 2; /* num contendrá 104 */
AND lógico binario &
Realiza un AND lógico bit a bit entre dos valores. El AND lógico da como resultado 1 sólo si ambos bits son 1. Por ejemplo
0 1 1 0 1 1 0 1 (109) AND 0 0 1 0 0 1 1 0 (38)
resultado: 0 0 1 0 0 1 0 0 (36)
var op1 = 109, op2 = 38, res;
res = op1 & op2; /*res contiene 36 */
OR lógico binario |
Realiza un OR lógico bit a bit entre dos valores. El OR lógico da como resultado 0 sólo si ambos bits son 0. Por ejemplo 0 0 1 1 1 0 1 0 (58) OR 0 1 0 1 0 0 1 0 (82)
resultado: 0 1 1 1 1 0 1 0 (122)
En el ejemplo podemos ver la sintaxis del operador
var op1 = 58, op2 = 82, res;
res = op1 | op2; /*res contiene 122 */
