Objetos en JavaScript (unico en un lenguaje client side)
JavaScript dispone de objetos intrínsecos del lenguaje, es decir, que ya existen y están disponibles sin crearlos. No hay que confundirlos con los objetos del navegador, que tienen funcionalidades distintas. Casi todos tienen propiedades y métodos, pero no todos tienen manejadores de eventos. Algunos de ellos en otros lenguajes son funciones (por ejemplo, Date).
Todos los objetos de JavaScript comienzan por una letra mayúscula y las instrucciones por una minúscula.
Array
El array (o matriz) es un objeto que permite almacenar datos con un cierto orden. Recuerda siempre que los arrays almacenan todos sus datos en memoria, y por tanto no es posible utilizarlos para recuperar en otra sesión lo almacenado, no son ficheros. Al ser la memoria del cliente el lugar donde se almacenan los datos, el acceso a ellos es muy rápido. Los datos almacenados pueden ser de cualquier tipo: números, cadenas, objetos, etc., y pueden mezclarse.
Según la sintaxis que se utilice, el objeto funciona de distinta manera. Si se escribe:
Array(2) se crea un array vacío de longitud 3, es decir con tres celdas, ya que los índices comienzan por el cero. En cambio, si se escribe Array("2") tendremos un array de una sola celda, cuyo contenido es "2". Si en lugar de un solo número se escriben varios separados por comas, también serán almacenados, y el array tendrá tantas celdas como argumentos se hayan escrito dentro de los paréntesis, por ejemplo: Array(1, 2, 3, 4) crea un array con cuatro celdas conteniendo 1, 2, 3 y 4 respectivamente. Puede ocurrir que al crear el array, no se tengan todavía disponibles los datos que se guardarán en él. ¿cómo mover los datos después? cambiando de nuevo la sintaxis:
Se crea el array: Array(2) y se le mueven los datos: Array[0] = "A" Array[1] = "B" Array[2] = "C"
Fíjate en que para asignarle valores a las celdas, esta vez se hace escribiendo el número de índice de la celda entre corchetes en lugar de paréntesis.
Aunque en estos ejemplos, por claridad, no se ha utilizado, al crear un array se debe emplear el operador new, así como cuando haya que inicializarlo si ya estaba creado previamente: new Array(2) .
Hasta aquí hemos visto que se invoca el array directamente, pero ¿qué ocurre si en nuestro programa tenemos que crear más de uno? si no tienen un nombre que los distinga, al crear el segundo, estaríamos reinicializando de nuevo el primero. Para resolver esto, se asigna el array a una variable en el momento de crearlo, lo que nos permitirá invocarlo por su nombre para todo:
Se crea el array: Mi_array = new Array(2) y se le mueven los datos invocando su nombre:
Mi_array[0] = "A" Mi_array[1] = "B" Mi_array[2] = "C"
Esta sintaxis sirve tanto para mover datos al array como para extraerlos si ya estaban almacenados.
El sistema de utilizar el índice, permite recorrer rápidamente el array con una instrucción de bucle for. Como ya se ha dicho, en cada celda de un array se puede poner cualquier cosa, incluso otro array. Esto permite crear arrays complejos de más de una dimensión, ya que JavaScript no tiene instrucciones para crear arrays multidimensionales como VBScript. El siguiente ejemplo crea un array de dos dimensiones utilizando instrucciones de bucle para recorrer los dos arrays:
Mi_array = new Array(1)
for (i=0; i < 2; i++) {
Mi_array = new Array(2)
for (j=0; j < 2; j++) {
Mi_array[j] = "["+i+","+j+"]"
}
}
for (i=0; i < 2; i++) {
resultado = "Linea "+i+":"
for (j=0; j < 2; j++) {
resultado += Mi_array[j]
}
document.write(resultado,"<p>")
}
Y esto es lo que se obtiene:
Linea 0:[0,0][0,1]
Linea 1:[1,0][1,1]
La longitud de los arrays es dinámica. Es decir, que si se crea un array de una longitud cualquiera (incluso cero) y después se mueve un dato a una posición de índice superior a la creada, el array se redimensiona hasta el nuevo valor. Todas las posiciones entre el anterior límite y el nuevo, lógicamente, estan vacias.
Propiedades
El objeto array tiene una propiedad: length que indica la longitud del índice. Por ejemplo, si se crea el array:
Mi_array = new Array(2)
document.write(Mi_array.length)
Se obtiene: 2 Fíjate en que, aunque el resultado es 2, son 3 las posiciones disponibles, ya que el índice comienza por el 0.
Métodos
Además de los 3 métodos comunes a otros objetos de JavaScript, el objeto array tiene otros 3 propios: join reverse sort Veamos cómo funcionan:
join(separador) Este método se utiliza para concatener todos los valores almacenados en el array en un string. Opcionalmente se puede establecer un string separador entre valores, que por defecto es la coma ,. Si se establece un separador que no es del tipo string, será convertido a string. Por ejemplo:
Mi_array = new Array("Item1", 100, "Item3")
document.write(Mi_array.join(", "))
Se obtiene: Item1, 100, Item3
sort(orden) Como indica su nombre, sirve para ordenar los elementos del array según el modo indicado por orden que puede ser una función, o una muestra de caracteres. Si se omite el modo de ordenación, todos los valores son convertidos a string y ordenados según el diccionario inglés por sus valores ASCII.
Mi_array = new Array("B", 100, "A")
document.write(Mi_array.sort())
Se obtiene: 100,A,B
reverse() Se utiliza para transponer los elementos de un array de forma inversa, es decir que el primer elemento pasará a ser el último y viceversa. No es una ordenación, simplemente cambian de sitio.
Mi_array = new Array("B", 100, "A")
document.write(Mi_array.reverse())
Se obtiene: A,100,B
Boolean
Este objeto sirve para convertir cualquier valor a booleano, es decir, false o true. Por ejemplo.
Mi_booleano = new Boolean("mi_valor")
document.write(Mi_booleano)
Se obtiene: true
Si el argumento "mi_valor" es omitido o su valor es cero, null, false o empty ("") el objeto devuelve false. Cualquier otro valor, incluso la cadena "false" devuelve true.
Métodos
Tiene los tres métodos comunes de todos los objetos JavaScript.
Date
Trabaja con fechas y horas. Por ejemplo:
Mi_fecha = new Date([argumentos])
document.write(Mi_fecha)
Si se omite argumentos se obtiene: Sun Aug 24 2008 15:20:39 GMT-0600 (CST)
Los argumentos son opcionales y sirven para inicializar el objeto. Si se omiten se inicializa con la fecha y hora del sistema (cliente). También pueden escribirse de diversas formas:
Date("month day, year hours:minutes:seconds")
Date(year, month, day)
Date(year, month, day, hours, minutes, seconds)
Métodos
Se dispone de un gran número de métodos destinados a obtener o establecer las distintas partes de una fecha/hora. Sea la variable Mi_fecha del ejemplo anterior. Para obtener alguna de las partes de su valor se escribe el objeto seguido del método. Por ejemplo: Mi_fecha.getDate()
* getDate El dia del mes. Es un número entre 1 y 31.
* getDay Dia de la semana en número. El domingo = 0. Es un número entre 0 y 6.
* getHours La hora. Es un número entre 0 y 23.
* getMinutes Los minutos. Es un número entre 0 y 59.
* getMonth El mes. Es un número entre 0 y 11. 0 = enero.
* getSeconds Los segundos. Es un número entre 0 y 59.
* getTime Es el número de milisegundos transcurridos desde el 1 de enero de 1970 a las 0:00:00 y la fecha/hora actual.
* getTimezoneOffset Zona horaria. Devuelve la diferencia en minutos entre la hora local y la GMT (Greenwich Meridian Time).
* getYear El año. Dependiendo del valor devolverá dos o cuatro dígitos. Entre 1900 y 1999 devuelve dos y a partir de 2000 cuatro.
* getFullYear Funciona como el anterior, pero con el año con cuatro dígitos siempre. Solamente funciona con versiones modernas de navegador.
* parse Funciona igual que getTime, pero en lugar de obtener los milisegundos hasta la fecha/hora actual, lo hace hasta la contenida en un string del tipo "Dec 20, 2005" o "Mon, 29 Dec 1999 13:30:00 GMT."
Como ya has visto, cuando el objeto ya tiene una fecha almacenada se utilizan los métodos get... para obtener algunas de las partes de esa fecha. Esta fecha se puede modificar en cualquier momento, bien entera o algunas de sus partes, mediante los métodos set...:
* setDate
* setHours
* setMinutes
* setMonth
* setSeconds
* setTime
* setYear
* setFullYear
* toGMTString
* toLocaleString
* UTC
Function([argumentos]"instrucciones")
Curiosa forma de escribir funciones. Este objeto puede contener una función que trabajará de forma análoga a las declaradas con la instrucción function. Fíjate en que la diferencia de sintaxis entre ambas es simplemente que el objeto se define con una "F" mayúscula y la instrucción con una "f" minúscula. La diferencia práctica entre los dos procedimientos es que el objeto tiene propiedades que pueden invocarse, y la declarada con la instrucción no. Por contra, el objeto es evaluado cada vez que se invoca, mientras que la declarada con la instrucción es compilada, lo que la hace más eficiente. Los argumentos pueden omitirse si no son necesarios, las instrucciones, evidentemente, no. La particularidad de esta forma de escribir funciones es que tanto los argumentos (incluso aunque vayan a ser valores numéricos) como las instrucciones van dentro de strings en lugar del típico par de llaves. Por ejemplo:
var Mi_funcion = new Function("a", "b", "return (a * b)")
document.write(Mi_funcion(2,5))
Se obtiene: 10
Propiedades
Métodos
Los tres comunes de los objetos JavaScript.
Math
Este objeto se utiliza para trabajar con constantes y funciones matemáticas. Esto hay que hacerlo mediante sus propiedades y métodos. Por ejemplo, la propiedad PI:
document.write(Math.PI)
Se obtiene: 3.141592653589793
Las propiedades devuelven valores constantes:
* Math.E = 2.718281828459045 La constante de Euler o número e.
* Math.LN2 = 0.6931471805599453 Logaritmo natural de 2.
* Math.LN10 = 2.302585092994046 Logaritmo natural de 10.
* Math.LOG2E = 1.4426950408889634 Logaritmo en base 2 de e.
* Math.LOG10E = 0.4342944819032518 Logaritmo en base 10 de e.
* Math.PI = 3.141592653589793 Relación entre la circunferencia de un círculo y su diámetro.
* Math.SQRT1_2 = 0.7071067811865476 Raíz cuadrada de un medio (1/2).
* Math.SQRT2 = 1.4142135623730951 Raíz cuadrada de 2.
Los métodos son funciones matemáticas que admiten argumentos. Además de los tres comunes tenemos:
* Math.sin(90) = 0.8939966636005579 Seno de un ángulo medido en radianes. El rango devuelto estará entre -1 y 1.
* Math.asin(-1) = -1.5707963267948966 Arco seno (en radianes) de un número. Tiene que ser un valor entre -1 y 1. El resultado obtenido siempre estará dentro del rango entre -pi/2 y pi/2 radianes. Si el valor está fuera de este rango devuelve NaN.
* Math.cos(1) = 0.7853981633974483 Coseno (en radianes) de un número. El resultado obtenido siempre estará dentro del rango entre -pi/2 y pi/2 radianes.
* Math.acos(-1) = 3.141592653589793 = pi Arco coseno (en radianes) de un número. Tiene que ser un valor entre -1 y 1. Si el valor está fuera de este rango devuelve NaN (Not-a-Number).
* Math.tan(90) = -1.995200412208242 Tangente de un ángulo medido en radianes.
* Math.atan(1) = 0.7853981633974483 Arco tangente (en radianes) de un número. El resultado obtenido siempre estará dentro del rango entre -pi/2 y pi/2 radianes.
* Math.atan2(20,50) = 0.3805063771123649 Devuelve, en un sistema cartesiano de coordenadas, el ángulo en radianes formado por el eje trazado entre el origen y el punto x,y definido por los argumentos de este método.
* Math.abs(01234) = 1234 Valor absoluto de un número.
* Math.ceil(20.5) = 21 Obtiene el número entero más pequeño posible que sea igual o mayor que el argumento dado.
* Math.floor(20.5) = 20 Al contrario que el anterior, obtiene el número entero más grande posible que sea igual o menor que el argumento dado.
* Math.exp(1) = 2.302585092994046 Números e.
* Math.log(10) = 2.302585092994046 Devuelve el logaritmo natural (en base e) del argumento dado.
* Math.pow(10, 3) = 1000 Potencia. El primer argumento es la base y el segundo el exponente.
* Math.max(10, 5) = 10 Compara el valor de los dos argumentos, que tienen que ser numéricos, y devuelve el mayor de ellos.
* Math.min(10, 5) = 5 El inverso del anterior. Compara el valor de los dos argumentos, que tienen que ser numéricos, y devuelve el menor de ellos.
* Math.random() = 0.09618143970146775 Se obtiene un número aleatorio entre 0 y 1 cuyo origen es el reloj del sistema.
* Math.round(2.5) = 3 Redondeo. Devuelve el número entero más próximo al argumento dado. Si la parte decimal es .5 o mayor, se redondea por exceso, como en el ejemplo. Si la parte decimal es menor que .5 se redondea por defecto.
* Math.sqrt(2) = 1.4142135623730951 Raiz cuadrada de un número.
Number
Objeto para trabajar con valores numéricos. Es poco utilizado. Bueno por mi parte
Propiedades
MAX_VALUE MIN_VALUE NaN NEGATIVE_INFINITY POSITIVE_INFINITY
Métodos
Los tres comunes.
String
Tiene una propiedad: length. Por ejemplo:
var Mi_cadena = new String("Esto es una prueba" )
document.write(Mi_cadena.length)
Se obtiene: 18 que como ya habrás supuesto es la longitud de la cadena dada.
Métodos
Además de los tres comunes hay un gran número de ellos. Utilizando el mismo texto del ejemplo anterior, tendremos:
* String.big() = Esto es una prueba Aumenta el tamaño del texto. El tamaño es equivalente al obtenido con <FONT SIZE=4>
* String.small() = Esto es una prueba Disminuye el tamaño del texto. El tamaño es equivalente al obtenido con <FONT SIZE=2>
* String.fixed() = Esto es una prueba Cambia el tipo de letra a paso fijo. Es equivalente al obtenido con <FONT FACE="Courier">
* String.sup() = Esto es una prueba Aplica el efecto superíndice al texto. Es equivalente al obtenido con <SUP>
* String.sub() = Esto es una prueba Aplica el efecto subíndice al texto. Es equivalente al obtenido con <SUB>
* String.fontcolor("ff0000") = Esto es una prueba Establece el color del texto. Es equivalente al obtenido con <FONT color="ff0000">. Fíjate en que el color hay que darlo en formato RGB hexadecimal.
* String.size(5) = Esto es una prueba Cambia el tamaño del texto. Es equivalente al obtenido con <FONT SIZE=x> donde x es un valor entre 1 y 7
* String.blink() = Esto es una prueba Efecto de intermitencia, equivalente al elemento <BLINK>
* String.bold() = Esto es una prueba Aumenta el peso del texto. Es equivalente al elemento <B>
* String.italics() = Esto es una prueba Aplica el tipo de letra itálica al texto. Es equivalente al obtenido con <I>
* String.strike() = Esto es una prueba Aplica el tipo de letra tachado al texto. Es equivalente al obtenido con <STRIKE>
* String.charAt(0) = E Devuelve el caracter que haya en la posición del índice que se indica. Para este método el índice comienza por el cero. No confundir con la propiedad length que devuelve el número de caracteres que hay en la cadena, no un índice.
* String.indexOf("t", [start]) = 2 Devuelve la posición del primer caracter (solamente uno) indicado en el argumento que exista en la cadena. Para este método el índice comienza por el cero. Por defecto comienza a buscar por el primer caracter de la izquierda, y opcionalmente, se le puede indicar que comience la busca desde otra posición con [start]. Si el carácter buscado no existe devuelve -1.
* String.lastIndexOf(cadena, "prueba") = 12 Devuelve la posición de una subcadena (o un solo caracter) dentro de la cadena principal. Comienza a contar por el cero. Si el carácter o subcadena buscados no existen devuelve -1.
* String.search(cadena, "prueba") = 12 Es exactamente igual que la anterior, pero esta es una sintaxis más moderna que solamente funciona en versiones 4 o superiores de navegador.
* String.replace("prueba", "muestra") = Esto es una muestra Reemplaza un substring, un caracter o incluso la cadena entera por otro/a. Si la subcadena a buscar no existe devuelve la cadena original sin cambios. Cuando la primera ocurrencia es encontrada y sustituida no se continua con el resto de la cadena.
* String.split([separador]) Como su nombre indica, corta la cadena inicial y coloca cada substring obtenido en una celda de un array. El corte se realiza por el caracter indicado por separador. Por ejemplo:
var cadena = new String("Esto es una prueba")
var cadena2 = cadena.split(" ")
for (var i=0; i < cadena2.length; i++) {
document.write (cadena2 + " / ")
}
Se obtiene: Esto / es / una / prueba /
* String.link(URL) Genera un enlace (link) a la dirección indicada por URL. Por ejemplo:
var cadena = new String("Esto es una prueba")
var cadena2 = cadena.link("
Register or Login ")
document.write(cadena2)
Se obtiene: Esto es una prueba
* String.toLowerCase() = esto es una prueba Convierte la cadena dada a todo minúsculas.
* String.toUpperCase() = ESTO ES UNA PRUEBA Convierte la cadena dada a todo mayúsculas.
RegExp
Abreviatura de Regular e-xpressions, es decir, expresiones regulares. Esta es una forma de trabajar con cadenas muy utilizada en algunos lenguajes de programación, como perl, muchos comandos del shell de Unix o Linux, etc. Consiste en ciertas convenciones para localizar cadenas o subcadenas con características variadas y son independientes de las acciones que se realizarán con ellas una vez localizadas. Se trata de establecer un patrón de búsqueda, que puede llegar a ser muy complejo, para localizar cualquier cadena y sus variantes dentro de otra cadena. Por ejemplo, partiendo de nuestra conocida cadena anterior: Esto es una prueba y su método search
String.search(/una/, "Esto es una prueba") = 8 Al aplicar este patrón se le está preguntando si la cadena contiene la subcadena "una", y como la respuesta es true devuelve su posición. Esta es una expresión regular muy simple, veamos otra más complicada:
String.search(/uno|[zxE]/, "Esto es una prueba") = 0 En este caso se busca "uno", que no existe en la cadena, y/o cualquiera de los caracteres que hay entre los corchetes. Como no existen z ni x, pero sí E, devuelve su posición que es la cero. Fíjate en que para enlazar una parte de la expresión con la otra se utiliza el caracter | llamado "pipe", y se pueden poner tantos como sean necesarios separando cada parte de la expresión regular. Si lo indicado por el patrón es encontrado más de una vez, se devolverá la posición de la última ocurrencia
Dentro de los corchetes, además de caracteres o números sueltos, se pueden poner rangos completos indicando el primer caracter y el último separados por un guión: [a-z] o [0-9]. Esto significa que se debe buscar si en la cadena se encuentra cualquier caracter entre a y z o entre 0 y 9. Si lo que se buscan son mayúsculas, hay que indicarlo aparte: [A-Z] o dentro del mismo par de corchetes: [zxy A-Z].
En el caso de que el caracter a buscar sea el propio guión - o algun caracter especial, según donde se escriba habrá que ponerle el símbolo de "escape" (\) o no, como ya se dijo en el apartado ¿Cómo se escribe el JavaScript?. Por ejemplo, si va el primero: /[\-A-Z]/ pero no es necesario "escaparlo" si va el último: /[A-Z-]/
Además de para los caracteres especiales, el signo de escape se utiliza con algunos caracteres normales que tienen un doble significado y sirven para definir conjuntos de caracteres:
/\w/ Cualquier caracter alfanumérico.
/\d/ Cualquier dígito.
/\s/ Cualquier caracter no visible, como el tabulador, el retorno o el espacio.
Otros caracteres especiales que no necesitan escape son:
* /./ El patrón coincidirá con cualquier caracter, excepto un salto de línea.
* /^[abc]/ Indica que el patrón buscado "abc" debe estar al comienzo de la cadena.
* /[^abc]/ Acepta cualquier caracter excepto los contenidos entre los corchetes.
* /$[abc]/ Indica que el patrón buscado debe estar al final de la cadena.
También se puede indicar cuantas veces debe existir el patrón en la cadena original:
/E+/ Significa que E debe aparecer al menos una vez.
/E*/ Cero o más veces.
/E?/ Cero o una vez.
/E{2}/ Dos veces.
/E{2,}/ Dos veces como mínimo.
/E{2,3}/ De dos a tres veces, inclusive.
Una vez definida la expresión regular, es posible aplicarle un modificador para que no sean tenidas en cuenta las mayúsculas y minúsculas: /xyz A-Z/i No distinguirá entre mayúsculas y minúsculas (insensitive).
Cuando se estan haciendo sustituciones en lugar de búsquedas el proceso se detiene al encontrar la primera ocurrencia. Para evitar esto y que se hagan todas las sustituciones posibles hay que emplear otro modificador:
cadena.replace(/a/g, "e") (global). cambia todas las "a" de la cadena por "e". Si es necesario, también pueden ponerse los dos modificadores juntos, y tiene importancia en que orden se escriben, normalmente será gi
En JavaScript admiten expresiones regulares algunos métodos del objeto String como search, split y replace y por supuesto, el propio objeto RegExp, que no está muy claro para qué sirve. Las expresiones regulares, en general, son bastante complicadas por lo poco descriptivas que son en sí mismas. En su construcción tiene mucha importancia el orden en que se escriben las cosas. Hasta que tengas cierta práctica, si no consigues que funcione a la primera, no desesperes, es normal.
saludos
Autor