El objeto Event

Los generadores de eventos necesitan información adicional para procesar las tareas que tienen que realizar. Si una función procesa, por ejemplo, el evento click, lo más probable es que necesite conocer la posición en la que estaba el ratón en el momento de realizar el click; aunque esto quizás tampoco sea muy habitual, a no ser que estemos programando alguna utilizadad de tipo gráfico.

Lo que sí es más común es tener información adicional en los eventos del teclado. Ejemplo, cuando pulsamos una tecla nos interesa saber cuál ha sido la tecla pulsada, o si tenemos a mayores alguna tecla especial pulsada como Alt, Control. Etc.

Los navegadores gestionan de forma diferente los objetos Event. Por ejemplo, en las versiones antiguas de Internet Explorer, el objeto Event forma parte del objeto window, mientras que en otros navegadores como Firefox, Chrome, etc., para acceder al objeto Event lo haremos a través de un parámetro, que escribimos en la función que gestionará el evento.

Nota: En Internet Explorer no se puede programar que un evento se dispare en la fase de captura, ya que el IE los eventos siempre burbujean.

El DOM, sus propiedades y métodos

El DOM (Modelo de Objeto del Documento), es esencialmente una interfaz de programación de aplicaciones (API), que proporciona un conjunto estándar de objetos, para representar documentos HTML y XML, un modelo estándar sobre cómo pueden combinarse dichos objetos, y una interfaz estandar para acceder a ellos y manipularlos. A través del DOM los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML, que es para lo que se diseño principalmente. El responsable del DOM es el W3C.

El DOM está separado en 3 partes / niveles:

DOM Core - modelo estándar para cualquier documento estructurado.
DOM XML - modelo estándar para documentos XML.
DOM HTML - modelo estándar para documentos HTML.

El DOM HTML es un estándar dónde se define cómo acceder, modificar, añadir o borrar elementos HTML.

En el DOM se definen los objetos y propiedades de todos los elementos del documento, y los métodos para acceder a ellos.

Hay que tener en cuenta que muchas de las funciones de Internet Explorer 4 y posteriores del modelo de objetos, no forman parte de la expecificación DOM W3C.

El DOM transforma todos los documentos XHTML en un conjunto de elementos, a los que llama nodos. En el HTML DOM cada nodo es un objeto. Estos nodos están conectados entre sí y representan los contenidos de la página web, y la relación que hay entre ellos. Cuando unimos todos estos nodos de forma jerárquica, obtenemos una estructura similar a un arbol, por lo que muchas veces se suele referenciar como árbol DOM, "árbol de nodos", etc.

Ejemplo de arbol de nodo:

Los rectángulos del gráfico representa un nodo del DOM, y las lineas representan la relación entre los nodos. La raíz del árbol de nodos es un nodo especial, denominado "document". A partir de ese nodo, cada etiqueta XHTML se transformará en nodos de tipo "elemento" o "texto". El nodo inmediantamente superior será el nodo padre y todos los nodos que están por debajo serán nodos hijos.

Algunos de los tipos de nodos:

document, es el nodo raíz y del que derivan todos los edemás nodos del árbol.
element, representa cada una de las etiquetas XHTML. Es el único nodo que puede contener atributos y el único del que pueden derivar otros nodos.
Attr, con este tipo de nodos representamos los atributos de las etiquetas XHTML, es decir, un nodo por cada atributos = valor.
Text, es el nodo que contiene el texto encerrado por una etiqueta XHTML.
comment. representa los comentarios incluidos en la página XHTML.

Los otros tipos de nodos pueden ser: CdataSection, documentFragment, documentType, EntityReference, entity, Notation y processingInstruction.

Acceso a los nodos.

El accededr a un nodo específico lo podremos hacer empleando dos métodos: a través de los nodos padres, o bien usando método de acceso directo. A través de los nodos padres partiendo del nodo raiz, accediendo a los nodos hijos y asi sucesivamente hasta llegar al elemento que queriamos.

GetElementsName(), Esta función obtiene una colección, que contiene todos los elementos de la página XHTML cuyo atributo name coincida con el indicado como parámetro.

var elementos = document.getElementsByName("apellidos");

Una colección no es un array, aunque se le parezca mucho, ya que aunque puedas recorrerla y referenciar a sus elementos como un array, no se pueden usar métodos de array, como push o pop, en la colección.

getElementById(), esta función es la más utilizada, ya que nos permite acceder directamente al elemento por el ID. Entre paréntesis escribiremos la cadena de texto con el ID. Es muy importante que el ID sea único para cada elemento de una misma página. La función nos devolverá únicamente el nodo buscando.

var elemento= document.getElementById("apellidos");

NOTA: Cuando escribimos los atributos en HTML, da igual que se pongan en mayúsculas o minúsculas, pero si estamos trabajando con XHTML debermos escribirlos siempre en minúculas , ejemplo type, value, size, etc.

El tamaño máximo de lo que se puede almacenar en un nodo de texto, depende del navegador, por lo que muchas veces, si el texto es muy largo, tendremos que consultar varios nodos para  ver todo el contenido.

En el DOM de HTML, para acceder al valor de un nodo de texto, o modificarlo, es muy común ver la porpiedad innerHTML. Esta propiedad es de microsoft al igual que outerHTML. Aunque hasta HTML5 no estaba en el estándar de W3C esta propiedad está soportada por todos los navegadors, y es muy rápida en su uso para hacr modificaciones, del contenido de un DIV por ejemplo. outerHTML no se soporta en el estandar.

Para modificar el contenido del nodo, modificaremos la propiedad nodeValue.

document.getElementsByTagName("p")[0].childNodes[1].firstChild.nodeValue = "Texto MODIFICADO";

Lo que hace es cambiar la cadena de texto "texto HTML", por "texto MODIFICADO".

Creación y borrado de nodos

La creación y borrado de nodos fue uno de los objetos para los que se creó el DOM. Podremos crear elementos y luego insertarlos en el DOM, y la actualización quedará reflejada automaticamente por el navegador. También podremos mover nodos ya existentes, simplemente insertándolo en cualquier otro lugar del árbol del DOM.

Ten en cuenta que cuando estemos creando nodos de elementos, el elemento debe estar en minúsculas. Aunque en HTML esto daría igual, el XHTML sí que es sensible a mayúsculas y tendrá que ir, por lo tanto, en minúsculas.

para crear se usan los metodos createElement(), createTextNode() y appendChild(), que nos permitirán crear un elemento, crear un nodo de texto y añadir un nuevo nodo hijo.


//Creamos tres elementos nuevos: p, b, br var elementoP = document.createElement('p'); var elementoB = document.createElement('b'); 
var elementoBR = document.createElement('br'); 

 //Le asignamos un nuevo atributo title al elementoP que hemos creado. elementoP.setAttribute('title','Parrafo creado desde JavaScript'); 

 //Preparamos los nodos de texto var texto1 = document.createTextNode('Con JavaScript se '); var texto2 = document.createTextNode('pueden realizar '); var texto3 = document.createTextNode('un monton'); var texto4 = document.createTextNode(' de cosas sobre el documento.'); 

 //Añadimos al elemento B los nodos de texto2, elemento BR y texto3. elementoB.appendChild(texto2); elementoB.appendChild(elementoBR); elementoB.appendChild(texto3); //Añadimos al elemento P los nodos de texto1, elemento B y texto 4. elementoP.appendChild(texto1); elementoP.appendChild(elementoB); elementoP.appendChild(texto4); 

 //insertamos el nuevo párrafo como un nuevo hijo de nuestro párrafo document.getElementById('parrafito').appendChild(elementoP);

Propiedades y métodos de los objetos nodo

Todo lo que se utiliza en la actualidad es el DOM 2, y algunas de las extensiones de DOM 3. Por que el DOM 3 esa creado para XHTML.

Nota: hay que procurar evitar utilizar funciones especificas de DOM 1 por los problemas inesperados que se pueddad dar sobre todo si se utilizan en XHTML.

 Gestión de eventos

Cuando el usuario hace algo, se produce un evento. Tambien habrá algunos eventos que no están relacionados directamente con acciones de usuario: ejemplo: el evento carga de un documento, que es el caso de "load", se dispara automaticamente cuando un documento ha sido cargado en el navegador.

Existen diferencias, en lo que es la gestión de eventos, por unos navegadores u otros. Esas diferencias provocan que los programadores tengan que tener mucha precaución con los métodos y propiedades que usan, dependiendo del navegador que ejecutará la página de javascript.

un ejemplo de solución es cross-browser para asignar evento, independientemente del navegador utilizado. Ejemplo:

function crearEvento(elemento, tipoEvento, funcion) {

    if (elemento.addEventListener) {

        elemento.addEventListener(tipoEvento, funcion, false);

    } else if (elemento.attachEvent) {

        elemento.attachEvent("on" + tipoEvento, funcion);

    } else {

        elemento["on" + tipoEvento] = funcion;

    }

}

var miparrafo = document.getElementById("parrafito");

crearEvento(miparrafo, 'click', function () {

    alert("hola")

});

el método addeventListener() no funciona en Internet Explorer 8, pero sí en cambio está ya implementado en Internet Explorer 9. Si tienes Windows XP no podrás usar ese evento ya que la última versión de IE que se puede usar en Windows XP es la 8 y no deja instalar la versión 9. La recomendación es que tengas las ultimas versiones de Mozilla Firefox o Google Chrome.

El objeto RegExp

El objeto regExp es tanto un literal como un objto de javaScript, por lo que también se podrá crear usando un constructor:

var expresionregular = new RegExp("texto expresion regular");

La expresión RegExp es compilada cuando se ejecuta el script, por lo tanto se recomienda usar el literal cuando sabemos que la expresión no cambiará. Una versión compilada es mucho más eficiente.

Usaremos el objeto, cuando asbemos que la expresión regular va a cambiar, o cuando vamos a proporcionarla en tiempo d ejecución.

Al igual que otros objetos en javascript, el objeto regExp también tiene sus propiedades y métodos.

global: Especifica que sea utilizado el modificador "g".
ignoreCase: Especifica que sea utilizado el modificador "i".
lastIndex: El índice donde comenzar la siguiente búsqueda.
multiline: Especifica si el modificador "m" es utilizado.
source: El texto de la expresión regular RegExp.

Métodos de RegExp

compile(): Compila una expresión regular.
exec(): Busca la coincidencia en una cadena. Devolverá la primera coincidencia.
test(): Busca la coincidencia en una cadena. Devolverá true o false.

Ejemplos:

// Comprobando si una subcadena existe dentro de otra

var datos = new Array();
datos[0] = "El Blogger de Google";     // verdadero
datos[1] = "El blogger de Google";          // falso
datos[2] = "BloggerGoogle";          // verdadero
datos[3] = "Google Blogger";          // falso
 
var patron = /Blog.*Goog/;
// Patrón de búsqueda
// Contenga "Blog" cualquier caracter(.) 0 o más veces (*) y a continuación "Goog"
for (var i = 0; i < datos.length; i++)
  alert(datos[i] + " " + patron.test(datos[i]));

// Validación de un número de Seguridad social americano

function comprobar()
{  
     var numero = document.getElementById("ssn").value;
     var patron = /^\d{3}-?\d{2}-?\d{3}$/;
     if (numero.match(patron))
          alert("Correcto: el número "+numero+" cumple el estándar americano");
     else
          alert("Error: el número "+numero+" NO cumple el estandar.");
}

Expresiones regulares y objetos regExp

Las expresiones regulares son patrones de búsqueda, que se pueden utilizar para encontrar txto que coincida con el patrón especificado.

ejemplo de busqueda sin utilizar expresiones regulares:

var texto = "la linea de alta velocidad llegará pronto a toda España,";
var subcadena = "velocidad";
var i = texto.indexOf(subcadena); // devuelve 17, índice de donde se encuentra la subcadena.

if (i != -1) // correcto, se ha encontrado la subcadena.

Este código funciona porque esta buscando cadenas que cumplen un patrón en lugar de una cadena exacta. ¿Pero qué pasaría si hiciéramos una búsqueda más general? Por ejemplo si quisiéramos buscar la cadena "car" en textos como "cartón", "bicarbonato", "practicar", ...?

Cuando se búsque cadenas que cumplen un patrón en lugar de una cadena exacta, necesitaremos usar expresiones regulares. Podrías intentar hacerlo con funciones de string, pero al final, es mucho más sencillo hacerlo con expresiones regulares, aunque la sintaxis de las mismas es un poco extraña y no necesariamente muy amigable.

En javascript las expresiones regulares se gestionan a través del objeto regExp.

Crear un literal del tipo regExp:

var expresion = /expresion regular/;

La expresión regular está contenida entre "/", y no lleva comillas. Las comillas sólo se pondrán en la expresión regular, cuando formen parte del patrón en si mismo.

Las expresiones regulares están hechas de caracteres, solos o en combinación con caracteres especiales, que se proporcionarán para búsquedas más complejas. Por ejemplo, lo siguiente es una expresión regular que realiza una búsqueda que contenga las palabras Aloe vera, en ese orden y separadas por uno o más espacios en medio:

var expresion = /Aloe\s+Vera/;

Los caracteres especiales  en este ejemplo son, la barra invertida (\), que tiene dos efectos:

Se utiliza para indicar que se trata de un carácter especial, o se usa con carácter especial, tales como el signo más (+), para indicar que el carácter debe ser tratado literalmente. En este caso, la barra invertida se utiliza con "s", que tranforma la letra s en un carácter especial indicando un espacio en blanco, un tabulador, un slto de línea, etc. el símbolo + indica que el carácter anterior puede aparecer una o más veces.

Modelo de registro de eventos tradicional

En los navegadores antiguos, el modelo que se utilizaba era el modelo en línea. Con la llegada de DHTML, el modelo se extendió para ser más flxible. En este nuevo modelo el evento pasa a ser una propiedad del elemento, así que por ejemplo los navegadores modernos ya aceptan el siguiente código de javaScript:

elemento.onclick = hacerAlgo; // cuando el usuario haga click en el objeto, se llamara a la función hacerAlgo();

Esta forma de registro, no la estandarizo W3C, pero debido a que fue ampliamente utilizada por netscape y Microsoft, todavia es válida hoy en día. La ventaja de este modelo es que podremos asignar un evento a un objeto desde javaScript, co lo que ya estamos separando el código de la estructura. Fíjate que aquí los nombres de los eventos si que van siempre en minúsculas.

elemento.onClick = hacerAlgo;

Para eliminar un gestor de eventos de un elemento u objeto, le asignaremos null:

elmento.onclick = null;

Otra gran ventaja es que como el gestor de eventos es una función, podremos realizar una llamada directa a ese gestor, con lo que estamos disparando el evento de forma manual. Por ejemplo:

elemento.onClick();
// al hacer click estamos disparando el evento de forma manual y se ejecutará la función hacerAlgo();

Modelo de registro de eventos en línea

En el modelo de registro de eventos en líneas (estandarizado por Netscape), el evento es añadido como un atributo más a la etiqueta HTML.

Cuando hacemos click en el enlace, se llama al gestor de eventos onclick(al hacer click) y se ejecuta el script; que contiene en este caso una alerta de javascript. También se podría realizar lo mismo pero llamando a una función:

function alertar() {
   alert("Has pulsado en el enlace");
}

La mezcla de minúsculas y mayúsculas en los nombres de evento (onClick, onMouseOver) es sólo por tradición, ya que HTML es insensible a mayúsculas y minúsculas. En cambio en XHTML, sí que los atributos tendrán que ir obligatoriamente siempre en minúsculas: tienes que escribir onClick y onMouseOver. Es muy importante que te fijes en ésto, ya que probablemente trabajarás con XHTML y deberás cumplir el estandar: "todos los nombres de atributos irán siempre en minúscula".

No uses el modelo de registro de eventos en línea

no se recomienda el modelo, aun que en algún ejemplo lo hayas visto.

Si un evento genera la ejecución de un script y además también se genera la acción por defecto para ese objeto entonces:

1.- el script se ejecutará primero.
2.- La acción por defecto se ejecutará después.

Hay que evitar la acción por defecto

A veces es interesante el bloquear o evitar que se ejecute la acción por defecto. Por ejemplo, en nuestro caso anterior podríamos evitar que nos conecte con la nueva pagina.html. Cuando programamos un gestor de eventos, ese gestor podrá devolver un valor booleano true o false.

onClick="alertar(); return false"

También se podría crear una función y que nos preguntará si queremos o no ir a la pagina pagina.html:

onClick="return preguntar()"


function preguntar() {
     return confirm("¿Desea realmente ir a esa dirección?");
}

Eventos en Javascript

Hay que tener en cuenta que, sin eventos pŕaticamenete no hay scripts. En casi todas las paginas web que incorporan Javascript, Suele haber eventos programados que disparan la ejecución de dichos scripts, por que javascript fue diseñado para añadir interactividad a las páginas: el usuario realiza algo y la página reacciona.

Por lo tanto, javascript necesita detectar de alguna forma las acciones del usuario para saber cuando reaccionar. También necesita saber las funciones, que queremos que ejecute cuando se produzcan esas acciones.

Las acciones:
Cuando el usuario hace algo se produce un evento. Puede haber eventos que no esten relacionando directamente con la acción que pueda realizar un usuario, por ejemplo eventos de carga(load) de un documento, que se produce cuando el documento ha sido cargado.

Tipos de eventos:
Los eventos mouseOver y mouseOut se hicieron muy famosos a raíz de su utilización para hacer el efecto de sustitución de una imagen por otra al pasar el raton por encima.


Incompatibilidades entre navegadores

Muchas veces, lo que se hacía en un principio antes de programar cualquier evento, era detectar qué navegador estábamos utilizando, para saber si nuestro navegador soportaba, o no, los métodos y propiedades que queríamos usar.

if (Netscape) {
        utilizar modelo Netscape
}
else if (Explorer) {
        utilizar modelo Microsoft
}

Pero hoy en día ni esto ni el modelo de detección basado en DHTML se recomiendan debido a las diferencias que hay entre todos los navegadores actuales. Por lo tanto hay que intentar usar modelos de detección de eventos estándar y que sean los navegadores los que tengan que adaptarse a ese modelo.

Usando "this" en funciona javascript

En javascript tenemos un método que nos permite llamar a una función, pasándole directamente la referencia del objeto, sin tener que usar variables globales o referenciar al objeto al comienzo de cada función.

Par hacerlo hay que se necesita usar la palabra reservada this, que hace referencia siempre al objeto que contiene el código de javasript en donde usamos dicha palabra reservada.

ejemplo:

Si programamos una función para un botón, que al hacer click haga algo, ai dentro de esa función usamos la palabra this,entonces estaremos haciendo referencia al objeto en el cúal hemos hecho click, que ene este caso será el botón. El uso de this nos permitira evitar usar variable globales, y el tener que programar script más genéricos.

ejemplo:

<input id="edad" name="edad" onclick="identificar(this)" type="text" value="55" />  

Y se accede con la función:

function identificar(objeto) { 
   var atrName = objeto.name; 
   var atrId = objeto.id; 
   var atrValue = objeto.value; 
   var atrType = objeto.type; 
   alert("Datos del campo pulsado: Name: " + atrName + " ID: " + atrId + "Value: " + atrValue + "Type: " + atrType); 
}

En este ejemplo, cada vez que hagamos click en alguno de los objetos, llamaremos a la función indentificar(this), y a esa función le pasaremos como parámetro this, que en este caso será la referencia al objeto en el cuál hemos hecho click. La función indentificar() recibe ese parámetro, y lo almacena en la variable objeto, la cuál le permit imprimir todas las referencias al name, id, value y type.

Propiedades y métodos del objeto Array

Propiedades y métodos del objeto Array.

Propiedades del objeto Array:

constructor: devuelve la función que creó el prototipo del objeto array.
length: ajusta o devuelve el número de elementos en un array.
prototype: te permite añadir propiedades y métodos a un objeto.

Métodos del objeto Array:

concat() Une dos o más arrays, y devuelve una copia de los arrays unidos.
join() Une todos los elementos de un array en una cadena de texto.
pop() Elimina el último elemento de un array y devuelve ese elemento.
push() Añade nuevos elementos al final de un array, y devuelve la nueva longitud.
reverse() Invierte el orden de los elementos en un array.
shift() Elimina el primer elemento de un array, y devuelve ese elemento.
slice() Selecciona una parte de un array y devuelve el nuevo array.
sort() Ordena los elementos de un array.
splice() Añade/elimina elementos a un array.
toString() Convierte un array a una cadena y devuelve el resultado.
unshift() Añade nuevos elementos al comienzo de un array, y devuelve la nueva longitud.
valueOf() Devuelve el valor primitivo de un array.

Borrar elementos de un Array

Para borra cualquier dato almacenado en un elemento del array, se hace ajustando el valor del array a "null" o una cadena vacia ("").

En las versiones más modernas de los navegadores a aparecido el operador delete.

NOTA: Al borrar un elemento del array, se eliminará su índice en la lista de índice del array, pero no se reducirá la longitud del array. Ejemplo:

miarray.length; // resultado: 8
delete miarray[5];
miarray.length; // resultado: 8
miarray[5]; // resultado: undefined


El proceso de borrar una entrada del array no libera la memoria ocupada por esos datos necesariamente. El intérprete del javascript encargado de gestionar la colección de basura en memoria, se encargará de libera memoria ocupada cuando la necesite.

Para tener mayor control sobre la eliminación de elementos de un array, se utiliza:

splice(índice, número de elementos a eliminar)

splice(), esta soportado por la mayoría de los navegadores. Este método se puede usar en cualquier array, y te permite eliminar un elemento o una secuencia de elementos de un array, provocando que la longitud del array se ajuste al nuevo número de elementos.

delete, es compatible a partir de estas versiones: winIE4 +, MacIE4 +, Moz +, Safari +, Opera +, Chrome +.

Ejemplo de uso de delete:

var  oceanos = new  array("Atlantico","Pacifico","Artico","Indico");
delete oceanos[2]; // Se elminina "Artico".

Que sucede:
El tercer elemento del array("Artico"), será eliminado del mismo, pero la longitud del array seguirá siendo la misma, y el array quedará así:

oceanos[0] = "Atlantico";
oceanos[1] = "Pacifico";
oceanos[3] = "Indico";


Si se hace referencia a oceanos[2] nos devolverá un resultado indefinido(undefined).

Para reducir el tamaño hay que utilizar splice():

oceanos.splice(2.1); // Las posiciones del array resultante serán 0, 1 y 2.

El operador delete, se recomienda para arrays que usen texto como indices del array, ya que de esta forma se producirán menos confusiones a la hora de borrar los elementos.

Creación de Arrays diferentes

Para crear un objeto array, usaremos el constructor new Array():

var miarray = new Array();


El objeto array dispone de la propiedad que nos indica su longitud. lenght, longitud, que será "0" para un array vacío. Si queremos precisar el tamaño del array durante la inicialización (por ejemplo para que se cargue con valores null) se puede hacer pasandole parametros al constructor:

var personas = new Array(40);

Ejemplo:
personas[53] = "Irene Sáinz Veiga";

longitud = personas.length;      // asignará a la variable longitud el valor 54


Introducir datos en un array, es tan simple como crear una serie de sentencias de asignación, una por cada elemento del array.:

sistemaSolar = new Array( );
sistemaSolar[0] = "Mercurio"; sistemaSolar[1] = "Venus"; sistemaSolar[2] = "Tierra";
sistemaSolar[3] = "Marte"; sistemaSolar[4] = "Jupiter"; sistemaSolar[5] = "Saturno";
sistemaSolar[6] = "Urano"; sistemaSolar[7] = "Neptuno";

El termino de "array denso" quiere decir que los datos están empaquetados dentro del array, sin espacions y comenzando en la posición 0, Otra forma permitida a partir de la version de javaScript 1.2+, sería aquella en la que no se empea el constructor y se definen los arrays de forma literal:

sistemaSolar = ["Mercurio", "Venus", "Tierra", "Martes", "Jupiter", "Saturno", "Urano", "Neptuno"];

Los corchetes sustituyen a la llamada al constructor new Array(). Hay que tener cuidado con esta forma de creación que quizás no funcione en navegadores antiguos.

Y para terminar vamos a ver otra forma de creación de un "array mixto" (o también denominado objeto literal), en el que las posiciones son referenciadas con índices de tipo texto o números, mezclándoloes de forma aleatoria. Si las posiciones índice están definidas por un texto, para acceder a ellas lo haremos utilizando su nombre y no su número(en este caso si usamos el número nos daría una posición undefined). El formato de creación sería:

nombrearray = {"indice" : valor, indice2 : "valor2"};

ejemplo:

var datos = { "numero": 42, "mes" : "Junio", "hola" : "mundo", 69 : "96" };
document.write("
"+datos["numero"]+ " -- " + datos["mes"]+ " -- " + datos["hola"]+ " -- " + datos[69]+ "
");

 En el caso de hacer un "array mixto" hay que hacerlo utilizando las llaves {}.

Indexación en arrays

Los arrays nos permiten guardar un montón de elementos y acceder a ellos de una manera independiente. Cada elemento es referenciado por la posición que ocupa dentro del array. Dichas posiciones se llaman índices y siempre son correlativos. Existen tres formas de indexar los elementos de un array:

- indexación base-cero(0): en este modo, el primer elemento del array será el componente 0, es decir tendrá el indice 0.
- Indexación base-uno(1): en este modo, el primer elemento tiene el índice 1.
- indexación base-n(n): este modo, es un modo versátil de indexación, en el que el índice del primer elemento puede ser elegido libremente.

En javascript cuando trabajamos con índice numéricos utilizaremos la indexación base-cero(0).

Los arrays se introdujeron en javascript a partir de la versión 1.1, es decir que en cualquier navegador moderno disponible actualmente no tendrás ningún problema para poder usar arrays.

Convertir cadenas a numeros

Para convertir cadenas a números existen las funciones: parseInt() y parseFloat().

ejemplo:

parseInt("34") // resultado = 34
parseInt("89.76") // resultado = 89
parseFloat devolverá un entero o un número real según el caso:
parseFloat("34") // resultado = 34
parseFloat("89.76") // resultado = 89.76
4 + 5 + parseInt("6") // resultado = 15

Si lo que se quiere hacer es realizar la conversión de números a cadenas, es más sencillo, por lo que solo hay que concatenar una cadena vacía al principio, de esta manera el número sera convertido a su cadena equivalente:

(" " + 3400) // resultado = "3400"
(" " + 3400).length // resultado = 4

En el último ejemplo podemos comprobar que al convertirlo a cadena, se pueden contar la cantidad de caracteres que contiene "3400". Hay que tener en cuenta que la Longitud de una cadena es un numero, no una cadena.