Java Script avanzado

Programación estructurada

Lo que se ha visto hasta ahora se denomina programación estructurada que consta de datos y funciones sin ninguna relación entre estos, (separados estructuralmente), porque lo que buscamos son procesar una serie de datos descritas dentro de las funciones para obtener un determinado resultado.
Se puede decir de esta forma de programar, que primero se piensa en la forma de funcionar las funciones y procedimientos dejando un poco de lado la estructura de datos que manejan dentro de esas funciones.

/* Crear un Objeto */
		
// ----------------- JavaScript ------------------ 
		
		
function arregloDos(){
	
  miArreglo = {nombre:'Jonas',profesion:'surfista',edad:36,activo:true};
  
  /* Mostramos los datos del Array desglosados */ 
  for(nodo in miArreglo){
	  
	// Guardar en variable el nodo 'ul' que se ha creado
	      // 'texto', genera el texto o valor para ese nodo.
	      // En cada bucle muestra una propiedad del Objeto Array. 
	var parf = document.createElement('ul'), texto = 
	document.createTextNode(nodo + ' --> ' + miArreglo[nodo]);
	
	// Introducimos el texto creado dentro del nodo 'ul', (lista).  
	parf.appendChild(texto);
	
	// Insertar el nodo 'ul' dentro del formulario con ID 'formObj'. 	  
	document.getElementById('formObj').appendChild(parf);
		  
  }
	  
}

// ----------------- HTML ------------------ 


<form div='formObj'>

  <input value='Crear Objeto' onclick='return arregloDos();' type='button'>
  </input>

</form>
	

Prueba, crear un Objeto:

Progrmación orientada a objetos (POO)

Esta nueva estructura contiene datos y funciones que manejan a los objetos manteniendo así las dos partes relacionadas.

JavaScript está basado en prototipos y no en clases.

Prototipo: Es un objeto abstracto, con la posibilidad de contener otros objetos dentro, los cuales pueden ser distintos tipos de datos: variables (numeros, cadenas de texto, valores lógicos), vectores, funciones e inclusive otros grupos de objetos. Lo principal en los prototipos es que estos no se copian cada vez que se crea una nueva instancia de determinado objeto, mas bien, estos son parte del objeto base y pueden ser accedidos por sus instancias.

JavaScript define así un prototípo, las variables serán las propiedades, las funciones serán los métodos.

• Propiedades: Definen características de los objetos. Por ejemplo, una propiedad de un objeto que represente la propia página web, sería su color de fondo.
  Una propiedad se maneja exactamente igual que una variable, pero con la diferencia de que está asociada al objeto:

  objeto.propiedad = valor; // Asignación de valor a una propiedad de un objeto  
  valor = objeto.propiedad; // Obtención del valor de una propiedad de un objeto 
  
  var coche = function (marca, color, tipo) {
      this.marca = audi;
      this.color = azul;
      this.tipo = deportivo;
  } 		
  		

• Métodos: Son operaciones que modifican los objetos. Por ejemplo, en el caso de un objeto que representa una cadena de caracteres, un método es aquel que permite poner todas sus letras en mayúsculas. Un método puede recibir uno o varios parámetros de entrada y retornar un valor. Los parámetros de entrada son valores que se la facilitan al método que desempeñe su función.
  
  El valor de retorno se emplea para obtener algún resultado de su ejecución.

  objeto.metodo( parametro1, parametro2,. ) // Método sin valor de retorno 
  
  // Asignar el método como valor de la variable 
  valor = objeto.metodo( parametro1, parámetro2, .. ) // Método con valor de retorno 		
  		

  En ambos casos, tanto a las propiedades como a los métodos de un objeto se les invoca empleando el operador punto "." a continuación del nombre del objeto en cuestión.

  document.write("HOLA"); // Invocar el método escritura 		
  		

  El código del ejemplo invoca al método write del objeto document que recibe como único parámetro un valor de texto que se imprimirá en la página web.

Concepto de Objeto

Un Objeto en el caso concreto de una página HTML, son cada uno de los elementos que la conforman ( imágenes, capas, formularios, etc ), pueden considerarse objetos susceptibles de ser manipulados desde javascript para aplicar dinamismo a la página. En este caso nos estamos refiriendo a objetos del navegador.

Javascript también dispone de objetos para representar diferentes tipos de datos tales como cadenas de texto, números, conjuntos de valores ( arrays ), fechas, . etc. En este caso nos estamos refiriendo a objetos del lenguaje y que ayudan a manipular más cómodamente datos de diferentes tipos.

Cada objeto dispone de una serie de propiedades y métodos y será a traves de estos por los que van a poder ser manipulados.

Subir

Definición de un objeto

JavaScript ofrece una colección bastante amplia de objetos predefinidos que podremos utilizar sin necesidad de tener que crearlos nosotros mismos.
Cuando tengamos claro los métodos y propiedades que formarán nuestro objeto, definimos su constructor, el cual tiene el objetivo de crear y inicializar las instancias que hagamos de él; en JavaScript tenemos dos opciones:

• 1- Definir la variable: (el contenido es una función). La utilización de las llaves ( { } ), en el interior de ellas definimos las propiedades y métodos, (de esta manera se crea una instancia).

  var elObjeto = { propiedades, métodos } 		
  		

  A patir de esta estructura no podemos crear una instancia directamente, así que diremos que actua como un constructor de un solo uso.
• 2- Definir la función: Utilizaremos la sentencia function, en la que definiremos las propiedades y métodos, (estructura lista para crear instancias).

      function elObjeto(propiedad_1, propiedad_2) {
         
  	   // Definir propiedades de este Objecto 
         this.propiedad_1 = valorPropiedad_1;
  	   this.propiedad_2 = valorPropiedad_2;
  	   
     } 	
  		

Instancia

Cuando asignamos un valor de cualquier tipo a una variable, ésta se convierte en una instancia de un Objeto determinado, con sus propiedades y métodos propios.

/* Definir objeto */
		
// ----------------- JavaScript ------------------ 
		
		
/* Recorrer propiedades y métodos */ 
function recorrerArray(){
	
	var elObjeto = { 
	
		nombre: "Jonas", 
		apellidos: "Fons Granero", 
		edad: 34, 
		activo: true
	
	};

	// Recorre cada una de las propiedades del objeto 
	for( propiedad in elObjeto ) {
		
   		alert( propiedad + " --> " + elObjeto[propiedad]);
		
	}
	
}

// ----------------- HTML ------------------ 


<form>

  <input value='Recorer Objeto Array' onclick='recorrerArray();' type='button'>
  </input>

</form>
	

Prueba, Definir objeto:

Subir

Operadores para objetos

Operadores y sentencias para acceder a los Objetos

• delete
• instanceof
• new
• this
• in
• . (punto)
• corchetes ([])

Delete: Este operador borra un objeto, una propiedad de un objeto, o un elemento de un array dado su índice.
Usaremos el operador delete para eliminar variables implícitamente declaradas pero no para las declaradas con la sentencia var.
Si el operador delete tiene éxito, establece la propiedad o el elemento a undefined. El operador delete devuelve true si la operación es posible; devuelve false si la operación no es posible.

    delete Nombreobjeto
    delete Nombreobjeto.propiedad
    delete Nombreobjeto[indice]
    delete propiedad // legal únicamente dentro de una sentencia with  

Ejemplo operador delete

/* DELETE */

// ----------------- JavaScript ------------------  
		
		
function color(){

// Creo un objeto Array 
colores = new Array("rojo", " amarillo", " verde",  " negro", " blanco");
	
	// Muestro todos los elementos del array
	// Insertar el resultado en el párrafo con ID 'demoDel' 
	document.getElementById('demoDel').innerHTML = colores;
	
}

function borrarColor(){	

colores = new Array("rojo", " amarillo", " verde",  " negro", " blanco");

	// Borro el segundo índice del array 
	delete colores[2];
	
	// Vuelvo a mostrar los elementos activos
	// Insertar el resultado en el párrafo con ID 'demoDel_2' 
	document.getElementById('demoDel_2').innerHTML = colores;

}


// ----------------- HTML ------------------ 


<form>

  <input value='5 colores' onclick='color();' type='button'>
  </input>
 
  <input value='borrar color' onclick='borrarColor();' type='button'>
  </input>
  
		<p id='demoDel'></p>
		
		<p id='demoDel_2'></p>

</form>	
	

Prueba, operador delete:

      Borrar el 2º índice del array:

Subir

instanceof: Este operador devuelve true si el objeto especificado es de la clase indicada.
Utilizaremos instanceof cuando necesite comprobar el tipo de un objeto en tiempo de ejecución.
Por ejemplo, capturando excepciones, puede derivar a distintos códigos manejadores de excepciones en función de qué tipo de excepción fue lanzada.

Ejemplo de operador instanceof

/* OPERADOR INSTANCEOF --------- */

// ----------------- JavaScript ------------------  
		

function instanciaDe() {
	
dia = new Date(2011, 02, 28);

  // instanceof determina si dia es un objeto Date 
  if (dia instanceof Date) {
  
  // Insertar el resultado en el párrafo con ID 'demoIns' 
  document.getElementById('demoIns').innerHTML = 'Instancia ==> ' + Date;
	
	}
	
}

// ----------------- HTML ------------------ 


<form>

  <input value='instanceof' onclick='instanciaDe();' type='button'>
  </input>
  
		<p id='demoIns'></p>

</form>			
	

Prueba, operador instanceof:

Subir

new: Utilizaremos este operador para crear una instancia de un tipo de objeto definido por el usuario o de uno de los tipos predefinidos Array, Boolean, Date, Function, Image, Number, Object, Option, RegExp, o String. En el servidor, además puede utilizarlo con DbPool, Lock, File, o SendMail.

    miobjeto = new Object();

    // Lo que equivale a hacer: 
    miobjeto = { };
	

Ejemplo de operador new

/* OPERADOR NEW ---------------- */

// ----------------- JavaScript ------------------  
		

function OperadorNew(){

	// Función inactiva hasta que es invocada  
	function sumar(a, b){
	
		var suma;
		
		suma = a + b;
		
		return suma; // 20 
	
	}

var operacion;

// Invocar la funcióm sumar  
operacion = sumar(10, 10);

  // Invocar la función producto e insertar el  
    // resultado dentro del párrafo con ID 'demoNew' 
  document.getElementById('demoNew').innerHTML = operacion;
	
// Generar nuevo objeto  
var producto = new Function( 'x', 'y', 'return x * y');
	
  // Invocar la función producto e insertar el  
    // resultado dentro del párrafo con ID 'demoNew_2' 
  document.getElementById('demoNew_2').innerHTML = producto(5, 10);

}

// ----------------- HTML ------------------ 


<form>

  <input value='new' onclick='OperadorNew();' type='button'>
  </input>
  
	<p id='demoNew'></p>
	
	<p id='demoNew_2'></p>

</form>			
	

Prueba, operador new:

Subir

this: Utilizar el término this, es para referirse al objeto actual. this se refiere al objeto que se llama en un método.

// Operador this

// ----------------- JavaScript ------------------  
	

function valida(objeto, valmin, valmax){

  if ((objeto.value < valmin) || (objeto.value > valmax)) {
		 
	return alert(objeto.value + 'Fuera de rango!');
	
  } else {
		
	return alert(objeto.value + 'Dentro de los parámetros!');
	
  }

}

// ----------------- HTML ------------------ 


<form>

    // Ingrese un número entre 10 y 50: 
    <input type='text' name='edad' size='3' onchange="valida(this, 10, 50);"> 
    </input> 
	
</form>		
	

Prueba, operador this:

Número entre 10 y 50, pulsar intro:

Otro ejemplo this

// Otro operador this 
	
<form name='miFormulario'>

    // El nombre del formulario es: 
    <input name='texto1' type='text' value='Nombre del formulario'> 
    </input> 
	
    <input type='button' value='Nombre del formulario'
	    onclick='this.form.texto1.value=this.form.name'> 
    </input>
    // Al pulsar el botón, pido que en este formulario, 
	// en el valor del campo con nombre texto1, 
	// se imprima el nombre de este formulario. 
	
</form>			
	

Prueba, otro operador this:

El nombre del formulario es:

Subir

in: Este operador devuelve true si la propiedad especificada está en el objeto indicado y el nombre de la propiedad debe estar escrito como un String, (entre comillas, como cadena de caracteres).

// Arrays 
arboles = new Array('cipres','pino','roble','eucalipto','yucatan')

0 in arboles; // devuelve true 
3 in arboles; // devuelve true 
6 in arboles; // devuelve false, solo hay 5 índices 

'pino' in arboles; // devuelve false 
// Se debe especificar el índice, no el valor alojado en el índice 

'length' in arboles; // devuelve true (length es una propiedad de la clase Array) 

// Objetos predefinidos 
'PI' in Math; // devuelve true 

miCadena = new String('coral');

'length' in miCadena; // devuelve true

// Objetos del usuario 
micarro = {fabricante:'Honda', modelo:'Accord', año:1998}

'fabricante' in micarro; // devuelve true 
'modelo' in micarro; // devuelve true 
	

Ejemplo de operador in

/* OPERADOR IN ---------------- */

// ----------------- JavaScript ------------------  
	

function en(){
	
var componentIds = new Array();

componentIds["tabla"] = "mi tabla de componentes";
componentIds["arbol"] = "mi árbol de componentes";

  containerComponent = function(compId){
	
	if((compId in componentIds)){
	  
	  return true;
	  
	}else{  
	  
	  return false;
	
	}
  
  }

// Comprobamos si existen algunos componentes del Array  
alert("árbol: en Array ? " + containerComponent("arbol")); // true 
alert("miTabla: en Array ? " + containerComponent("miArbol")); // false 
alert("tabla: en Array ? " + containerComponent("tabla")); // true 
alert("mapa: en Array ? " + containerComponent("mapa")); // false 

}

// ----------------- HTML ------------------ 


<form>

    <input type='button' value='Operador in' onclick="en();">
    </input> 
	
</form>		
	

Prueba, operador in:

Subir

punto " . ": Una vez creado un objeto para acceder a las propiedades o los métodos de ese objeto se utiliza el operador punto (.), y usamos el mismo procedimiento al asignar un valor a estos.
Dado que Javascript declara directamente las nuevas variables al asignarles un valor si estas no estaban antes declaradas nos basta dar un valor a una variable de un objeto para definir una nueva propiedad del objeto (para definir un nuevo método también basta hacer algo del tipo objeto.nombreMetodo = nombreFuncion;).
Además conviene hacer notar que dado que los objetos también son datos, pueden definirse como propiedades de otro objeto.

/* Ejemplos con Operador (.) punto: */

// Accedemos a la propiedad fabricante de mi objeto 
// fabricante, que habremos asociado previamente con el valor
// que nos pasaron como parámetro al crear el objeto en nuestro
// constructor. Ahora fab contiene la cadena “AMD”  
var fab = miCPU.fabricante;

// Cambiar valor propiedad 
miCPU.fabricante = "Intel";

// Definir nuevas propiedades 
miCPU.precio = 120;

// Objeto propiedad de otro 
miPC.cpu = miCPU;

// Para acceder a una propiedad de un objeto 
// que sea a su vez propiedad de otro objeto. 
var precio = miPC.miCPU.precio; 
	

Subir

corchete [ ]: Sirven para acceder al valor de una propiedad o método del objeto que le precede y debemos escribirlo como un String, (entre comillas).

/* Operador corchete ( [ ] ) */ 

get = objeto[ nombre_propiedad ];

objeto[ "nombre_propiedad" ] = set; // nombre_propiedad es una cadena. 
// La cadena no tiene que ser un identificador válido; puede tener 
// cualquier valor, por ejemplo "1foo", "!bar!", o incluso " " (un espacio). 

document[ "createElement" ]('pre');
	

Subir

Definición de propiedad de un objeto

Definición de propiedades

Hay un procedimiento a seguir según las propiedades que se hayan empleado en uno u otro tipo de constructor.

Si utilizamos las llaves ( { } ) las propiedades se escriben como pares, (propiedad: "valor") y cada uno de los "pares" va separado por una coma, (,).

//  Definir propiedad mediante llaves

// ----------------- JavaScript ------------------  


var ropa = { Tejano: "Levis", Slip: "Giulio", Bufanda: "Tiffany" };

var ropa2 = { Tejano: "Diesel", Slip: "D&G", Bufanda: "Hermès" };

var ropa3 = { Tejano: "Lois", Slip: "Impetus", Bufanda: "Versace" };


// DEFINICIÓN DE UN OBJETO MEDIANTE LLAVES 
function DefinLlaves(){

  // Mostramos los datos del Array desglosados 
  for(propiedad in ropa2){
	
    var parf = document.createElement('p'), lateral = 
    document.createTextNode(propiedad + ' -->; ' + ropa2[propiedad]);
  
    parf.appendChild(conLlaves); // párrafo hijo de formulario 'conLlaves' 
  
    // Estilos para el DIV 'llaves' 
    document.getElementById('llaves').style.backgroundColor = '#FFBE84'; // naranja 
  
    document.getElementById('llaves').style.padding = '5px 10px';
  
    // Colocamos párrafo dentro de DIV 'llaves' 
    document.getElementById('llaves').appendChild(parf); 
		
  }
  
}

// ----------------- HTML ------------------ 


<form id='conLlaves'>

  <input value='Mediante llaves' onclick='DefinLlaves();' type='button'>
  </input>
  
  <div id='llaves'></div>

</form>
	

Prueba, Definir propiedad mediante llaves:

Si utilizamos la sentencia function será más sencillo ya que podemos utilizar los parámetros como valores que se asignarán a las propiedades. También deberemos de hacer uso de la palabra reservada this, esta hace referencia a los elementos del propio objeto.

La palabra this se debe utilizar siempre que se quiera acceder a una propiedad de un objeto, ya que en otro caso, no se está accediendo correctamente a la propiedad.

function GeneroTienda(_, Tejano, Slip, Bufanda, _){

	// definimos propiedades 
	this.Tejano = 'Tejano';
	this.Slip = 'Slip';
	this.Bufanda = 'Bufanda';

}	
	

Ahora bien, esto tiene un inconveniente, y es que los valores que se asignan son fijos, al crear instancias del objeto ropa, todas tendrán los mismos datos.
Podríamos solventarlo creando varias instancias más y añadiendo distintos valores para cada una, pero aún así tendríamos que escribir mucho código.

// Definición de las instancias 
var ropa = { Tejano: "Levis", Slip: "Giulio", Bufanda: "Tiffany" };

var ropa2 = { Tejano: "Diesel", Slip: "D&G", Bufanda: "Hermès" };

var ropa3 = { Tejano: "Lois", Slip: "Impetus", Bufanda: "Versace" };	
	

Mucho más útil será utilizar la sentencia function ya que podremos usar los parámetros como los valores asignados a cada propiedad.

function GeneroTienda(Tejano, Slip, Bufanda){

  // Definición de propiedades 
  this.Tejano = 'Tejano';
  this.Slip = 'Slip';
  this.Bufanda = 'Bufanda';
  
}

// Definición de las instancias 
var genero = 'Tejanos /' + ' Slips /' + ' Bufandas ';

// Genero los valores de una instancia 
var miTienda = new GeneroTienda('Levis', 'Giulio', 'Tiffany');

// Genero los valores de otra instancia 
var otraTienda = new GeneroTienda('Diesel', 'D&G', 'Hermès'); 
	

Al mantener los parámetros con el mismo nombre que las propiedades no tendremos problemas de error, ya que la sentencia this nos ayuda a diferenciar cuando nos referimos a la propiedad en sí del objeto y cuando al parámetro.

function GeneroTienda(Tejano, Slip, Bufanda){

  // Definición de propiedades 
  this.Tejano = 'Tejano';
  this.Slip = 'Slip';
  this.Bufanda = 'Bufanda';
  
}

// Definición de las instancias 
var miTienda = new GeneroTienda('Levis', 'Giulio', 'Tiffany');
var otraTienda = new GeneroTienda('Diesel', 'D&G', 'Hermès');; 	
	

Ejemplo de definición mediante función

/* DEFINICIÓN DE UNA PROPIEDAD MEDIANTE FUNCIÓN ---- */

// ----------------- JavaScript ------------------ 


function MedianteFuncion(){
	
  function GeneroTienda(Tejano, Slip, Bufanda){
	  
	// definimos propiedades 
	this.Tejano = Tejano;
	this.Slip = Slip;
	this.Bufanda = Bufanda;	
  
  }

// Definimos instancia 
var genero = 'Tejanos  /' + '  Slips  /' + '  Bufandas';
var miTienda = new GeneroTienda('Levis', 'Giulio', 'Tiffany');
var otraTienda = new GeneroTienda('Diesel', 'D&G', 'Hermès');
  
  // Variables encabezado 
  var uno = 'TIENDA 1';
  var dos = 'TIENDA 2';
	  
  // ENCABEZADO DE TIENDA 1
  // Crear nodo 'h4' y insertar texto de variable 'uno' 
  var encabezado = document.createElement('h4'), porFunc = 
  		     document.createTextNode(uno);
  
  // El nodo formara parte del formulario con ID 'porFunc' 
  encabezado.appendChild(porFunc);
  
    // Colocar nodo dentro del div con ID 'funcion' 
    document.getElementById('funcion').appendChild(encabezado);
    // FIN ENCABEZADO 
		  
  // MOSTRAR ELEMENTOS 'TIENDA_1' 
  for(funcion in miTienda){
	
    // Crear nodo 'párrafo' y insertar el texto de variable 'miTienda'   
    var tien1 = document.createElement('p'), porFunc = 
    document.createTextNode(funcion + ' ==> ' + miTienda[funcion]);
    // guardamos en 'tien1' el NODO y TEXTO 
	
	tien1.appendChild(porFunc); // Párrafo hijo de formulario 'porFunc'
	  
	 // Estilos para el DIV 'funcion' 
    document.getElementById('funcion').style.backgroundColor = '#FFBE84';
    document.getElementById('funcion').style.width = '150px';

    // Colocamos párrafo dentro de DIV 'funcion' 	
    document.getElementById('funcion').appendChild(tien1); 
	  
  }
  
  
		
  // ENCABEZADO DE TIENDA 2
  // Crear nodo 'h4' y insertar texto de variable 'dos' 
  var encabezado = document.createElement('h4'), porFunc = 
  		     document.createTextNode(dos);
  
  // El nodo formara parte del formulario con ID 'porFunc' 
  encabezado.appendChild(porFunc);
  
  // Colocar nodo dentro del div con ID 'funcion2' 
  document.getElementById('funcion2').appendChild(encabezado);
  // FIN ENCABEZADO 

  // MOSTRAR ELEMENTOS 'TIENDA_2' 
  for(funcion_2 in otraTienda){
	  
    // Crear nodo 'párrafo' y insertar el texto de variable 'otraTienda' 
    var tien2 = document.createElement('p'), porFunc = 
    document.createTextNode(funcion_2 + ' ==> ' + otraTienda[funcion_2]); 
    // guardamos en 'tien2' el NODO y TEXTO 
	
	tien2.appendChild(porFunc); // Párrafo hijo de formulario 'porFunc'
	
     // Estilos para el DIV 'funcion2' 
    document.getElementById('funcion2').style.backgroundColor = '#FFBE84';
    document.getElementById('funcion2').style.width = '150px';
	  
    // Colocamos párrafo dentro de DIV 'funcion2' 	
    document.getElementById('funcion2').appendChild(tien2);
	  
  }

}
	

Prueba, definición de propiedad mediante función:

Subir

Definición de métodos

Definición de métodos

Un método es una función asociada con un objeto. Puedemos definir el método de la misma forma que definimos una función estandar. Asociamos la función mediante un objeto que ya existe:

	
obj.nom_metd = nom_fun
	
obj es nuestro objeto
nom_metd es el nombre que asignamos al método 
nom_fun es el nombre de la función  
	
	

Podemos definir los métodos de nuestro Objeto de igual forma que definimos sus propiedades. Para los métodos podemos hacerlo de dos maneras:

• Definir la función a la vez que el método
• Asignar una función ya existente
• Definir la función a la vez que el método: Almacena el contenido de la función dentro de la propiedad que representa el método, la función se ha de escribir sin nombre, (function()), "función anónima".
  Usadas también para agregar métodos a objetos, ya que es la única forma de hacerlo porque Javascript no posee una construcción del lenguaje para crear clases y en las variables son un tipo de dato de primera clase.
  
  Tipo de dato de primera clase quiere decir que las funciones son datos como cualquier otro y que pueden asignarse, crearse, pasarse como parámetro y manipularse casi de cualquier forma.

  // Definimos Objeto mediante llaves 
  var tuAuto = { contacto: function() {
  		
  	alert('En marcha'); 
  	
  } };
  
  // Definimos Objeto mediante function 
  function TuAuto() {
  
  	// Definimos los métodos mediante la notación de puntos ( . )
  	this.contacto = function() { alert('En marcha'); 
  
  };			
  			

  En los dos casos se define el método 'contacto' de la misma forma; Asignando una función a la propiedad del objeto que simboliza el método. Es decir que los métodos se definen asignando funciones al objeto.
  
  En el primer caso hacemos la asignación de una función a la propiedad mediante los 'dos puntos' ( : ) y en le caso de definición con function, mediante el 'operador de asignación' ( = ).
  
  También podemos pasar parámetros a los métodos, declararemos los métodos de la misma forma que se pasan parámetros a una función.

  // Definimos Objeto mediante llaves 
  var tuAuto = { 
  	
    pisarAcelerador: function(masVelocidad){ 
    
      alert('Velocidad punta: ' + masVelocidad); 
  	
    } 
  
  };
  
  // Definimos Objeto mediante function 
  function TuAuto(){
  	
    // Definimos los métodos 
    this.pisarAcelerador = function(masVelocidad) { 
    
      alert('Velocidad punta: ' + masVelocidad); 
  	
    };
  
  }			
  			

• Asignar una función ya existente Las funciones que se asignan a los métodos, ya se encuentran definidas fuera del objeto, de esta forma nos será más fácil localizar las funciones para hacer alguna modificación.

// Definimos la función 
function contactoArranque() {
	
  alert("En marcha");
  
}

// Asignamos función al método 
var tuAuto = { contacto: contactoArranque };

  function TuAuto() {
	  
	// Definimos métodos 
	this.contacto = contactoArranque;
	
  }
			

• De esta forma al hacer la llamada al método 'contacto' del Objeto, se estará ejecutando la función asociada al método 'function contactoArranque()'.

// Definimos Objeto con llaves 
tuAuto.contacto();

// Definimos de Objeto con función 
var tuAuto = new TuAuto();

  tuAuto.contacto();
			

• Función con paso de parámetros:

// Definimos función con parámetro 
function pisarAcelerador(masVelocidad);
  
  alert("Velocidad punta: " + masVelocidad);

}

// Asignamos función a método 
var tuAuto = { masGas: pisarAcelerador };

function TuAuto(){
  
  // Definimos métodos 
  this.masGas = pisarAcelerador;

}
			

• Llamadas con parámetros:

// Definimos método de Objeto con llaves 
tuAuto.masGas(100);

// Definimos método de Objeto con función 
var tuAuto = new TuAuto();
  
  tuAuto.masGas(100);
			

Ejemplo de definición de método mediante función:

/* DEFINICIÓN DE MÉTODO MEDIANTE FUNCTION ----------- */

// ----------------- JavaScript ------------------ 


// Para llamar a esta función, lo hacemos con el nombre de la 
// variable a la que se le asigna esa función: "objeto.miMetodo"

// Construimos un nuevo Objeto: "objeto" 
var objeto = new Object();

// Defino el método asignandole una "función()" ANÓNIMA 
objeto.miMetodo = function(){
  
 objeto.metodo = prompt("Inserta un valor numérico al Objeto" + "");

 // Si objeto es menor de 10 ... 
 if(this.metodo < 10){
	 
  // Insertar el resultado en el párrafo con ID 'demoDefiFun' 
  document.getElementById('demoDefiFun').innerHTML = 
  	   "Valor de unidad: " + this.metodo + ", es insuficiente");
 
 }
 
 // Si objeto es mayor de 10 y menor o igual a 100 ... 
 if(this.metodo > 10 && this.metodo <= 100) {
  
   // Accedo a la propiedad del Objeto mediante "this"
    // Insertar el resultado en el párrafo con ID 'demoDefiFun' 
  document.getElementById('demoDefiFun').innerHTML = 
  	   "Valor del objeto " + this.metodo + ", está dentro de los parámetros");
 
 }

}

// ----------------- HTML ------------------ 


<form>

  <input value='Función anónima' onclick='objeto.miMetodo();' type='button'>
  </input>
  
  <p id='demoDefiFun'> </p>

</form>
	

Prueba, definición de método mediante función:

Ejemplo de acceso a propiedades desde función definida en el interior:

// Función con acceso a propiedades mediante this

// ----------------- JavaScript ------------------  
  
  
function colorAuto() {
 
  // Insertar el resultado en el párrafo con ID 'demofunInter' 
  document.getElementById('demofunInter').innerHTML = 
  	   "Color del Auto: " + this.color + "Marca: " + this.marca");
	   
}

// Definimos el Objeto  
function TuAuto(marca, modelo, color) {
                
// Definimos las propiedades  
this.marca = marca;
this.modelo = modelo;
this.color = color;

  // Acceso a propiedades desde función definida en interior  
  this.marcaAuto = function() { 
	
  // Insertar el resultado en el párrafo con ID 'demofunInter' 
  document.getElementById('demofunInter').innerHTML = 
  	   "Marca: " + this.marca + "Modelo: " + this.modelo");
	
  };
              
// Acceso a propiedades desde función ya existente  
this.verColor = colorAuto; // Llama a función 'TuAuto(marca, modelo, color)' 

}

// Generar el nuevo objeto con paso de parámetros  
var tuAuto = new TuAuto("Seat", "600", "Azul");

// Crear instancias de los nuevos objetos   
var tuAuto_2 = new TuAuto("Renault", "11", "rojo");
var tuAuto_3 = new TuAuto("citroën", "2CV", "verde");

// ----------------- HTML ------------------ 


<form>

  <input value='Color auto' onclick='tuAuto.verColor();;' type='button'>
  </input>
  
  // Acceder a las propiedades desde la función interior  
  <input value='Marca auto' onclick='tuAuto_2.marcaAuto();;' type='button'>
  </input>
  
  <p id='demofunInter'> </p>

</form>
	

Prueba, Acceso a propiedades desde función definida en interior:

Ejemplo de asignar función al método:

/* ASIGNAR FUNCIONES EXISTENTES A MÉTODO */

// ----------------- JavaScript ------------------
  

// Definimos la función   
function contactoArranque(){ 

  // Insertar el resultado en el párrafo con ID 'demofunMet' 
  document.getElementById('demofunMet').innerHTML = "En marcha"; 
  
} 

// Asignamos función al método   
var tuAuto = { pisarAcelerador: contactoArranque }; 

// ----------------- HTML ------------------ 


<form>
  
  <input value='Asignar función' onclick='contactoArranque();' type='button'>
  </input>
  
  <p id='demofunMet'> </p>

</form>

	

Prueba, asignar función existente al método:

Subir

Método join

Join (separador): Este método se utiliza para concatener todos los valores almacenados en el array en un string. Es el equivalente en PHP a implode().

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.

// Método join

// ----------------- JavaScript ------------------ 
  

function MetodoJoin(){
  
  // Generar un nuevo objeto 
  miArray = new Array ("Carmen", 242, "www.pop" );

  // Colocar párrafo dentro del formulario con ID 'formJoin',
  // más separador de barra inclinada. 
  var arreglo = document.createElement('p'), formJoin = document.createTextNode(miArray.join(" // ")); 
	  
  // párrafo hijo de div "lateral" 
  arreglo.appendChild(formJoin); 
  
  // Estilo para DIV 'demoJoin' 
  document.getElementById('demoJoin').style.backgroundColor = "#FFBE84";
  document.getElementById('demoJoin').style.padding = "5px 10px";
  document.getElementById('demoJoin').style.width = "190px";  
  
  
  // Colocamos párrafo dentro de DIV 'demoJoin' 
  document.getElementById('demoJoin').appendChild(arreglo);

}

// ----------------- HTML ------------------ 


<form>
  
  <input value='Método join' onclick='MetodoJoin();' type='button' />
  
  <div id='demoJoin'> </div>

</form>
	

Prueba, método join:

Subir

Método Split

split es un método del objeto Array, es útil para dividir una cadena de texto en un array.

Split se compone de dos parámetros opcionales:

• Primer parámetro: Especifica el carácter o la expresión regular, que se utilizará para la división de la cadena. Si se omite, se devolverá la totalidad de la cadena (una matriz con un solo elemento).
• Segundo parámetro: Es un entero que especifica el número límite de divisiones, y que después de este número límite de divisiones, no serán incluidos el resto de los elementos de esta matriz.

// Método split

// ----------------- JavaScript ------------------ 
  
// Dividir por espacio y limitar a 4  

function MetodoSplit() {
	
  // Generar una cadena 
  var cadena = "JavaScript es un lenguaje de programación interpretado";
  
  // Al encontrar un espacio, divide la cadena gracias al primer parámetro
   // y limita el número de divisiones a 4, gracias al segundo parámetro. 
  var dividirCadena = cadena.split(" ", 4);  
  
  // Insertar resultado dentro del párrafo con ID 'demoSplit' 
  document.getElementById("demoSplit").innerHTML = dividirCadena;
	
}

// Dividir por búsqueda de caracter 

function MtdSplit() {
	
  // Generar una cadena 
  var cadena2 = "JavaScript es un lenguaje de programación interpretado";
  
  // Utilizamos el carácter 'a', para dividir la cadena 
  var borraCaracter = cadena2.split("a"); 
  
  // Insertar resultado dentro del párrafo con ID 'demoSplit' 
  document.getElementById("demoSplit").innerHTML = borraCaracter;
	
}


// ----------------- HTML ------------------ 


<form>
  
  <input value='Método split' onclick='MetodoSplit();' type='button' />
  
  <p id='demoSplit'> </p>

  <input value='Método split 2' onclick='MtdSplit();' type='button' />

</form>
	

Prueba, método split:

Subir

Eventos JavaScript

Los Eventos son las acciones que realizamos como usuarios a cualquier elemento de una página con el cual se puede interactuar, (clicar sobre un botón, pasar el puntero sobre una imagen).

Con estos eventos podemos crear algunos efectos, ya que los eventos generan acciones.

Lista de eventos y sus acciones

Tabla de eventos JavaScript
EVENTO	ACCIÓN
Abort	La carga de una imagen se interrumpe y pasa a otra
Load	Cuando finaliza la carga de la pagina o la imagen
Unload	Ocurre cuando se abandona la página actual, "cerramos el navegador o vamos a otra página, clicar un enlace, la presentación de un formulario, etc.)"
Error	Se produce un error durante la carga de una imagen o archivo
Resize	Modifica el tamaño de una ventana
Blur	Un elemento pierde el foco
Focus	Un elemento recibe el foco
Change	El estado o valor de un elemento cambia, generalmente después de perder el foco
Select	Selecciona un elemento de la página
KeyDown	Mantener pulsada una tecla
Which	Evento de ratón, devuelve el código de caracteres Unicode de la tecla que activa el evento 'onkeypress', o el código de la llave Unicode de la tecla que desencadenó los eventos 'onkeydown' o 'onkeyup'.
KeyUp	Soltar una tecla presionada
KeyPress	Tecla pulsada
Click	Clicar sobre un elemento de página
DblClick	Doble click sobre elemento de página
MouseDown	Pulsar un botón del ratón
MouseUp	Liberar el botón del ratón que se ha pulsado
MouseMove	Mover el puntero del ratón por un elemento de la página
MouseOut	Sacar el puntero del ratón del área que ocupa un elemento de la página
MouseOver	Entrar con el puntero del ratón en un área que ocupa un elemento de la página
Submit	Envio a través de un formulario
Reset	Limpiar o borrar los campos de un formulario

Ejemplo evento abort

La carga de una imagen se interrumpe y pasa a otra.

/*  ABORT */

// ----------------- JavaScript ------------------ 


function abortarVentana(){

  ventana = confirm('¿Realmente desea interrumpir esta ventana?');
	
	// Si interrumpimos la página, se activa el evento 'abort' 
	if(ventana){
		
	  ventana.onAbort(alert("Activó el evento ABORT"))
	
	// Si no, muestra la página 	
	}else{
	 
	  ventana = window.open('homerNo.html', 'Homer_No', 'height=200, 
				    width=200, left=200, top=200, location=1, 
				    menubar=0, resizeble=0, scrollbar=1, 
				    status=1, titlebar=1');
	  
  }
  
}

// ----------------- HTML ------------------ 


<form>
  
  <input value='Adort' onclick='abortarVentana();' type='button' />

</form>
	

Prueba, evento abort:

Otro ejemplo de evento abort.

/*  OTRO ABORT */

// ----------------- JavaScript ------------------ 
	

var confirmar;

function interrumpir(){ 

  confirmar = confirm ("Carga de una imagen detenida!. \n\n 
  							\t ¿Deseas ver la imagen?") 
  
  // Si interrumpimos la página, activa el evento 'abort' 
  if (confirmar){
	  
	document.homerCome.src="images/homer.png";
  
  // Si no, muestra la página 
  }else{
	  
	ventana.onAbort(alert("Activó el evento ABORT"));
		  
  }
  
} 


// ----------------- HTML ------------------ 

	
// Imagen interrumpida por el evento 'abort' 
<img id="homer" border="0" width="100px" height="100px"style="font-size:12px; 
	color: #6C6;" title="Imagen interrumpida por evento ABORT" 
	alt="Pincha encima (Tamaño de imagen 16,7kb)" name="homerCome" 
	onabort="interrumpir();" onclick="interrumpir();"  />
	

Prueba, otro evento abort:

Subir

Ejemplo evento load

Cuando finaliza la carga de la pagina o la imagen.

/*  LOAD */

// ----------------- JavaScript ------------------ 


function eventLoad(){

	// Mensaje que mostrará al terminar de cargar la página 
	alert("Página cargada");
  
}

// ----------------- HTML ------------------


// Manejador 'onLoad' dentro de etiqueta 'body' 
<body onload="eventLoad()">
	

Subir

Ejemplo evento Unload

Ocurre cuando se abandona la página actual, "cerramos el navegador o vamos a otra página, clicar un enlace, la presentación de un formulario, etc).

/*  UNLOAD */

// ----------------- JavaScript ------------------ 


function eventOnunload(){

	// Mensaje que mostrará al abandonar la página 
	alert("¡Gracias por tu visita!");
  
}

// ----------------- HTML ------------------


// Manejador 'onunload' dentro de etiqueta 'body' 
<body onunload="eventOnunload()">
	

Subir

Ejemplo evento Error

Es cuando de produce un error durante la carga de una imagen o archivo.

/*  ERROR */

// ----------------- JavaScript ------------------ 


// Manejador 'onerror', llama a una función 
onerror = exfoerr;

// Cadena vacia 
var fallo = ""; 

function exfoerr(msg, url, line){
	
   // '=+' imprescindible para mostrar uno detrás 
    // de otro todos los mensajes dentro de un 'alert()'
  
   // Solo el operador '=', si añado el operador 
    // '+' delante, se duplicaria todo el resultado 
  fallo = "Error detectado\n\n"; 
  
  // muestra error del alert mal escrito de la función Error() 
  fallo += "Error: " + msg + "\n"; 
  
  // Muestra la ruta del archivo 
  fallo += "URL: " + url + "\n"; 
  
  // Muestra el nº de la línea donde se encuentra el error 
  fallo += "Número de línea: " + line + "\n\n"; 
  fallo += "Click OK para continuar.\n\n";
  
  // Mostrar los valores de la variable 'fallo' concatenados 
  alert(fallo); 
  
  /* El programador se devuelve el valor "false" de la 
       función si el programador quiere que el navegador 
       muestre el mensaje de error estándar en la pantalla. */ 
    return true;
  
}

function Error(){

  // Ventana de alerta, mal escrita, para probocar el error 'applert' 
  applert("Haga clic para Proceder!");

}
	

Subir

Ejemplo evento Resize

Al modificar el tamaño de la ventana del navegador.

/*  RESIZE */

// ----------------- JavaScript ------------------ 


function Resize(){
  
  alert('No modifique el tamaño de la ventana porfavor!')

}

  // Llama función 'Resize()' cuando el 
   // usuario manipula el tamaño de la ventana 
  window.onresize = Resize;
  // Mediante el objeto 'windows' acceder al manejador 'onresize'   

function TamanyoVentana(){
  
  alert('Manipule el tamaño de la ventana \n 
  		    para mostrar mensaje de alerta');
	  
}

// MINIMIZAR O MAXIMIZAR LA VENTANA
	

Subir

Ejemplo evento Focus, Blur, Reset

Focus: Cuando un elemento recibe el foco.
Blur: Cuando un elemento pierde el foco.
Reset: Limpia o borrar los campos de un formulario.

/*  FOCUS / BLUR / RESET */

// ----------------- JavaScript ------------------


// FOCUS 
function evfocus(recibeFoco){
	
  // Pulsar sobre el campo, da foco 'focus' 
  recibeFoco.value = "";
  
}

// BLUR 
function evblur(pierdeFoco){
	
  // Pinchar fuera del campo sin rellenar, pierde el foco, 'blur' 
  if (pierdeFoco.value == "") // Si campo vacio 
   
	alert('Debe ingresar datos');
   
}

// RESET 
function borrarParr(){
	
  // Si falta el nombre ... 
  if(document.getElementById('contrasenya').value != "" && 
     document.getElementById('nom').value == ""){
	  
	// Mensaje aviso 
	document.getElementById('demoFocusBlur').value = 'Nombre??';
	  
  }
  // Si falta le contraseña ... 
  else if(document.getElementById('nom').value != "" && 
	   document.getElementById('contrasenya').value == ""){
  
	// Mensaje aviso 
	document.getElementById('demoFocusBlur').value = 'Contraseña??';
	
  // Si no, borra todos los campos del formulario, 'reset' 
  }else{

	// El objeto 'document' accede al formulario mediante el 
		// valor de 'name' para poder eleiminar todos sus campos. 
	document.formReset.reset();
	
	// Mensaje reset 
	document.getElementById('demoFocusBlur').value = 'RESET evento';
	  
  }
	
}

// ----------------- HTML ------------------ 


<form name="formReset">
  
  <label>Nombre:</label>
  <input id="nom" name="nom" size="20" 
  	  onfocus="evfocus(this)" 
	  onblur="evblur(this)" type="text" /> <br />
  
  <label>Contraseña:</label>
  <input id="contrasenya" name="contrasenya" size="20" 
  	  onfocus="evfocus(this)" 
	  onblur="evblur(this)" type="password" /> <br />
  
  <input onClick="borrarParr();" value="Focus / Blur" type="button" />
  <input id='demoFocusBlur' value=" " type="text" />

  <label>Borrar todos los campos:</label>
  <input type="reset" onReset="borrarCampos();" value="onReset" />

</form>
	

Prueba, evento Focus, Blur, reset:

Dar y quitar foco

Pincha sobre un campo para dar foco y pulsa fuera de este para perder el foco.
Si pulsas el botón 'Focus / Blur' actua el reset

Nombre:          
Contraseña:    
   
Borrar todos los campos:    

Subir

Ejemplo evento change

Cuando el estado o valor de un elemento cambia, generalmente después de perder el foco.

/*  CHANGE */

// ----------------- JavaScript ------------------ 


function Cambiar(){
  
  // Mediante 'selectedIndex' establecemos el índice del 
   // elemento seleccionado del campo con ID 'cambio'. 
  var objeto = document.getElementById('cambio').selectedIndex;
  
  // Si el campo seleccionado es el primer índice, el '0 ' 
  if(objeto == 0){
	
	// Mensaje vacio dentro del campo con ID 'eleccion' 
	document.getElementById('eleccion').value = "";
	
  // Si es cualquier otro índice ... 
  }else{
	  
	// el valor del índice 'options[objeto]', seleccionado en el campo
		// con ID 'cambio' se muestra en el campo con ID 'eleccion'.  
	document.getElementById('eleccion').value = 
	document.getElementById('cambio').options[objeto].value;
	
  }
	
}

// ----------------- HTML ------------------ 


<form method="post" action="" name="prova">

  <fieldset>
  
  <legend>Deporte que practicas:</legend>
  
  <select  name="cambio" id="cambio" onchange="javascript:Cambiar();">
  
	<option value="vacio"> </option>
	<option value="Basquet">Basquet</option>
	<option value="Tenis">Tenis</option>
	<option value="Futbol" selected="selected">Futbol</option>
  
  </select>
  
  <label for="eleccion">Elección del usuario: </label>
  
  <input text="area" id="eleccion" value=" " width="100px" />
  	
  </fieldset>

</form>
	

Prueba, evento change.

Que deporte practicas?:

Basquet Tenis Futbol      Elección del usuario:

Subir

Ejemplo evento Select

Selecciona un elemento de la página.

/*  SELECT */

// ----------------- JavaScript ------------------ 


var provincias_1 = new Array("-","Cáceres","Alicante","Gerona","Huesca",
			        			   "Madrid","Zaragoza","Salamanca");
var provincias_2 = new Array("-","Avignon","Provence","Roussillon",
			        			   "Saintonge","Normandy");
var provincias_3 = new Array("-","Berlin","Brandeburgo",
			        			   "Baviera","Brema", "Turingia");
var provincias_4 = new Array("-","Milán","Roma","Palermo",
			        			   "Verona","Turín") ;

function CambiaProvincia(){
  
  // Tomo el valor del select del pais elegido 
  var pais;
  
  pais = document.paises.pais[document.paises.pais.selectedIndex].value;
  
  // Comprobar si el país está definido 
  if (pais != 0) {
  
	// Si estaba definido, entonces coloco las 
		// opciones de la provincia correspondiente.
		// Selecciono el array de provincia adecuado 
	mis_provincias = eval("provincias_" + pais);
	
	// Calcular el numero de provincias 
	num_provincias = mis_provincias.length;
	
	// Marco el número de provincias en el 'select' 
	document.paises.provincia.length = num_provincias;
	
	// Para cada provincia del array, la introduzco en el select 
	for(i = 0; i < num_provincias; i++){
	
	document.paises.provincia.options[i].value = mis_provincias[i];
	
	document.paises.provincia.options[i].text = mis_provincias[i];
  
  	}
  
  }else{
  
	// Si no había provincia seleccionada, 
	      // eliminar las provincias del 'select' 
	document.paises.provincia.length = 1;
	
	// Coloco un guión en la única opción que he dejado 
	document.paises.provincia.options[0].value = "-";
	
	document.paises.provincia.options[0].text = "-";
  
  }
  
  // Marcar como seleccionada la primera opción de provincias 
  document.paises.provincia.options[0].selected = true;

} 

 /* Explicación:
  Detecto el país que se ha seleccionado
  Si el valor del país no es 0 (el valor 0 es cuando no se ha seleccionado país )
  Tomo el array de provincias adecuado, utilizando el índice del país.
  Marco el número de opciones que debe tener el select de provincias
  Para cada opcion del select, coloco su valor y texto asociado, que se 
  hace corresponder con lo indicado en el array de provincias.
  SI NO (El valor de país es 0, no se ha seleccionado país )
  Coloco en el select de provincia un único option con el valor "-", 
  que significaba que no había provincia.
  Coloco la opción primera del select de provincia como la seleccionada. */ 


// ----------------- HTML ------------------ 


  <form name="paises">
  
	<label for="pais">Elige país</label>
	
	<label for="provincia">Elige provincia</label>
		
		<br />

	  <select name="pais" onchange="CambiaProvincia();">
	  
		<option value="0" selected=""> .........</option>
		<option value="1">España</option>
		<option value="2">Francia</option>
		<option value="3">Alemania</option>
		<option value="4">Italia</option>
	  
	  </select>
	
	<select name="provincia">
	
	  <option value="__">.........</option>
	  
	</select>
	
  </form>
	

Prueba, evento select:

      Elige país         Elige provincia
    ......... España Francia Alemania Italia     .........

Subir

Ejemplo evento KeyDown y Which

KeyDown: Mantener pulsada una tecla del teclado.

Which: Devuelve el código de caracteres Unicode de la tecla que activa el evento 'onkeypress', o el código de la llave Unicode de la tecla que desencadenó los eventos 'onkeydown' o 'onkeyup'.

/* KEYDOWN / WHICH */

// ----------------- JavaScript ------------------ 


function Caracter(event){
	
 // 'which', evento de ratón, devuelve el código de caracteres Unicode de 
  // la tecla que activa el evento 'onkeypress', o el código de la llave 
  // Unicode de la tecla que desencadenó los eventos 'onkeydown' o 'onkeyup'. 	
 var CodigoTecla = ('which' in event) ? event.which : event.CodigoTecla;
 	
	// Insertar resultado dentro de párrafo con ID 'demoKeyDown_2' 
	document.getElementById('demoKeyDown_2').innerHTML = 
	"El código Unicode de la tecla es: " + CodigoTecla;

}


/* OTRO KEYDOWN / WHICH */ 

function CaracterNoNumerico(event){

  // 'which', evento de ratón, devuelve el código de caracteres Unicode de 
   // la tecla que activa el evento 'onkeypress', o el código de la llave 
   // Unicode de la tecla que desencadenó los eventos 'onkeydown' o 'onkeyup'. 
  var keyCode = ('which' in event) ? event.which : event.keyCode;
  
  // Teclas numéricas superiores (48 a 57) ||
   // teclas numéricas laterales derechas (96 a 105 ) 
  esNumerico = (keyCode >= 48 // TecladoEvent.DOM_VK_0 // && 
  keyCode <= 57 // TecladoEvent.DOM_VK_9 //) || 
  (keyCode >= 96 // TecladoEvent.DOM_VK_NUMPAD0 // && 
  keyCode <= 105 // TecladoEvent.DOM_VK_NUMPAD9 //);
  
  
  // La propiedad 'keyCode' es equivalente a 'charCode', 
   // la utilizaremos depende con que soporte se navegue. 
  
  
  // Modificadores: alt / ctrl / shift 
  modificador = (event.altKey || event.ctrlKey || event.shiftKey);
  
  if(esNumerico || modificador){
  
	// Insertar resultado dentro de párrafo con ID 'demoKeyDown_2' 
	document.getElementById('demoKeyDown_2').innerHTML = 
	"Caracter restringido!, " + !esNumerico || modificador;
  
  }

}





// ----------------- HTML ------------------ 


<form method="post" action="" name="prova">

  <label for="texto">Pulsar una tecla para mostrar su código:</label>
  
  <input name="texto" onkeydown="return Caracter(event);" type="text">
  
	<p class='demoKeyDown'></p>
  
  <label for="texto2">Pulsar una tecla, se han restringido las  <br />
  Numéricas y Modificadores: alt / ctrl / shift: </label>
  
  <input name="texto" onkeydown="return CaracterNoNumerico(event);" type="text">

	<p class='demoKeyDown_2'></p>

</form>
	

Prueba, eventos keydown, which:

Pulsar una tecla para mostrar su código:  

Pulsar una tecla, se han restringido las teclas
Numéricas y Modificadores: alt / ctrl / shift:   

Subir

Ejemplo evento Keyup

Soltar una tecla presionada.

/* KEYUP */

// ----------------- JavaScript ------------------ 


function ObtenerCaracter(event){
	
  // Código Tecla 'keyCode' es equivalente a 'CharCode' 
  var keyCode = ('which' in event) ? event.which : event.keyCode;
  	
	// Insertar resultado dentro de párrafo con ID 'demoKeyup' 
	document.getElementById('demoKeyup').innerHTML =
	"Código Unicode de la tecla liberada: " + keyCode;


}

// ----------------- HTML ------------------ 


<form method="post" action="" name="miKeyup">

  <label for="texto">Código Unicode: </label>
  
  <input placeholder='Escribir!' onkeyup='ObtenerCaracter(event);' type='text' />
  
	<p id='demoKeyup'> </p>
  
</form>
	

Prueba, evento keyup:

Muestra el código Unicode de la tecla que se ha liberado:

Subir

Ejemplo evento Keypress

Tecla pulsada.

/* KEYPRESS */

// ----------------- JavaScript ------------------


//document.onkeypress = TeclaPulsada; 
function TeclaPulsada(event){
 
  // Código Tecla 'keyCode' es equivalente a 'CharCode ' 
  var teclaASCII = event.keyCode || event.charCode; // Código de la tecla pulsada 
  var teclaCHAR = String.fromCharCode(teclaASCII ); // Obtiene la tecla pulsada 
	
	// Insertar resultado dentro de párrafo con ID 'demoKeypres'  
	document.getElementById('demoKeypres').innerHTML = 
	'Tecla: ' + teclaCHAR + 'Código: ' + teclaASCII;

}

// ----------------- HTML ------------------ 


<form method="post" action="" name="miKeyup">

  <label for="texto">Código Unicode: </label>
  
  <input value='Escribir!' onkeypress='TeclaPulsada(event);' type='text' />
  
	<p id='demoKeypres'> </p>
  
</form>
	

Prueba, evento keypress:

Pulsa una tecla dentro del campo:

Subir

Ejemplo evento Click

Clicar sobre un elemento de la página.

/*  CLICK */

// COLOCAR EL SCRIPT INMEDIATAMENTE 
// BAJO LOS ELEMENTOS DE LISTA

// ----------------- JavaScript ------------------ 


function crearEvento(elemento, evento, funcion){
      
  if(elemento.addEventListener){
  
    // 'addEventListener' Agrega un evento al documento.
	// Los parámetros evento, function, false.
	// evento: cadena que especifica el nombre del evento.
	// function: función a ejecutar cuando se produzca el evento.
	// false: valor booleano que especifica si el evento se debe ejecutar.
	// true: El controlador de eventos se ejecuta en la fase de captura.
	// false: El controlador de eventos se ejecuta en la fase de propagación. 
    elemento.addEventListener(evento, funcion, false);
  
  }else{
  
    // 'attachEvent' es idéntico a 'addEventListener'.
	 // Utilizaremos uno u otro, dependiendo del soporte de navegación. 
    elemento.attachEvent('on' + evento, funcion);
	
  }
  
}
  

// Recuperar los elementos 'li' del nodo con ID 'frases', 
// para insertarles el evento 'onClick'. 
var elementos = document.getElementById('frases').getElementsByTagName('li');

// Recorrer todos los elementos. 
for (var i = 0; i < elementos.length; i++) {
	
  // Añadir el evento 'onclick'. 
  crearEvento(elementos[i], 'click', function(){
  
	// Mostrar el elemento pulsado de la lista dentro
		// del nodo con ID 'demoEvenClick'. 
	alert(this.innerHTML);
  
  });
  
}

// ----------------- HTML ------------------ 


    <ul id="frases">
	
        <li style="cursor:pointer;">Aston Martin</li>
        <li style="cursor:pointer;">Subaru</li>
        <li style="cursor:pointer;">Cadillac</li>
        <li style="cursor:pointer;">Ferrari</li>
        <li style="cursor:pointer;">Jaguar</li>
        <li style="cursor:pointer;">Lamborghini</li>
        <li style="cursor:pointer;">Porsche</li>
		
    </ul>

	

Prueba, evento Click:

• Coches clase A:
• Aston Martin
• Subaru
• Cadillac
• Ferrari
• Jaguar
• Lamborghini
• Porsche

Subir

Ejemplo evento Dblclick

Doble click sobre elemento de página.

/* DBLCLICK */

// ----------------- JavaScript ------------------ 


function CopiarTexto(){
	
  // El valor del nodo con ID "campoB" es  
    // igual al valor del nodo con ID "campoA".  
  document.getElementById('campoB').value = 
  document.getElementById('campoA').value;

}

// ----------------- HTML ------------------ 


<form method="post" action="" name="miKeyup">

  <label for="texto">Campo A: </label>
  
  <input id='campoA' placeholder='Escribe' type='text' />
  
  <label for="texto">Campo B: </label>
  
  <input id='campoB' value='' type='text' />
  
  <input value='Doble click' type='button' ondblclick='CopiarTexto();' />   
   
</form>
	

Prueba, evento Dblclick:

Campo A:
Campo B:

Subir

Ejemplo evento MouseDown, MouseUp

MouseDown: Pulsar un botón del ratón.

MouseUp: Liberar el botón del ratón que se habia pulsado.

/* MOUSEDOWN / MOUSEUP */

// ----------------- JavaScript ------------------


// MOUSEUP 
function Boton_onmouseup() {
	
  // 'document' accede al botón con ID 'btnForm'
   // del formulario con ID 'formBoton', para variar
   // al valor al dejar de clicar sobre este. 
  document.formBoton.btnForm.value = 'Botón LIBERADO'

}

// MOUSEDOWN 
function Boton_onmousedown() {
	
  // 'document' accede al botón con ID 'btnForm'
   // del formulario con ID 'formBoton', para variar
   // al valor al clicar con el ratón sobre este. 
  document.formBoton.btnForm.value = 'Botón PULSADO!'

}

// ----------------- HTML ------------------ 


<form method="post" action="#" name="formBoton">

  <label>Pulsar botón: </label>
  
  <input value='CLICK' name='btnForm' onmouseup='Boton_onmouseup()' 
  			onmousedown='Boton_onmousedown()' type='button' />
   
</form>
	

Prueba, eventos mousedown, mouseup:

Pulsar botón:

Subir

Ejemplo evento MouseMove, MouseOut

MouseMove: Mover el puntero del ratón por un elemento de la página.

MouseOut: Sacar el puntero del ratón del área que ocupa un elemento de la página

// Evento MouseMove, MouseOut

// ----------------- JavaScript ------------------


//  MOUSEMOVE COORDENADAS DEL PUNTERO 
function emouseMove(e){

  // Al entrar en el área de la imagen
   // mostramos coordenadas del área,
   // mediante la propiedad 'clientX / clientY' 
  var x = e.clientX;
  var y = e.clientY;
  
  // clientX devuelve la coordenada horizontal (de acuerdo con cierta área de la página)
   // clientY devuelve la coordenada vertical (de acuerdo con cierta área de la página) 
  
  var posicion = 'Coordenada X = ' + x + ', Coordenada Y = ' + y;
  
  // Insertar las coordenadas dentro del párrafo 'demoMouseMove' 
  document.getElementById('demoMouseMove').innerHTML = posicion;

}


/* MOUSEMOVE MOUSEOUT ---------------------------- */ 
function emouseOut(){
	
  // Al salir del área de la imagen, el texto
    // cambia dentro del párrafo con ID 'demoMouseMove'. 
  document.getElementById('demoMouseMove').innerHTML = 
  				'Pasar el ratón sobre la imagen.';

}



// ----------------- HTML ------------------ 


  <img src="homer.png" width="142" height="200" 
	onMouseMove=emouseMove(event);
	onMouseOut="emouseOut();" />
  
  <p id='demoMouseMove'>Pasar el ratón sobre la imagen. </p>
	

Prueba, Evento MouseMove, MouseOut:

Pasar el ratón sobre la imagen.

Subir

Ejemplo evento MouseOver

Entrar con el puntero del ratón en un área que ocupa un elemento de la página.

/*  MOUSEOVER / ONMOUSEOUT */

// ----------------- JavaScript ------------------


// Colocar el puntero sobre el área 
function imgOver(k) {
  
  // Cambiar tamaño de imagen 
  k.style.height = "200px";
  k.style.width = "200px";
  
  // Si tenemos esta image ...  
  if(document.getElementById('demoOverOut').src="images/homer1.png"){
	  
	// Cambiarla por esta 
	document.getElementById('demoOverOut').src="images/homer2.png";
	
	// Insertar mensaje dentro de párrafo con ID 'demoOut' 
	document.getElementById('demoOut').innerHTML = "MouseOver";
	  
  }
	
}

// Retirar el puntero del área 
function imgOriginal(k) {
  
  // Cambiar tamaño de imagen 
  k.style.height = "150px";
  k.style.width = "150px";
	
  // Si tenemos esta image ... 
  if(document.getElementById('demoOverOut').src="images/homer2.png"){
		
	// Cambiarla por esta 
	document.getElementById('demoOverOut').src="images/homer1.png";
	
	// Insertar mensaje dentro de párrafo con ID 'demoOut' 
	document.getElementById('demoOut').innerHTML = "MouseOut";
		
  }
	
}

// ----------------- HTML ------------------ 



  <img id='demoOverOut' onmouseover='bigImg(this)' 
			   onmouseout='normalImg(this)' 
			   src='images/homer1.png' 
			   width='180' height='180' />
			   
			   
  <p id='demoOut'><p/>
	

Prueba, evento MouseOver, MouseOut:

Subir

Ejemplo evento Submit

Envio a través de un formulario.

/*  SUBMIT */

// ----------------- JavaScript ------------------ 


function EsValido() {
	
 var email=document.form1.t1.value;
 
 if (email.indexOf(' ') == -1
     && 0 < email.indexOf('@')
     && email.indexOf('@') + 1 < email.length ) {
		 
	return true;	 

 else{
	 
	alert ('Dirección no válida!')
	 
 }
 
 return false;

}

// ----------------- HTML ------------------ 


<form name="form1" method="post" 
	  action="javascript:alert('Enviado')" 
	  onSubmit="return esValido();">
  
  <fieldset>La arroba '@' es obligatoria <br /> <br />
  
	<label>Correo: </label>
	
	<input type="text" name="t1" size=20 />
	
	<input type="submit" value="Enviar" />
  
  </fieldset>

</form>
	

Prueba, evento submit:

La arroba '@' es obligatoria

Correo:

Subir

Donde utilizar los eventos en páginas HTML

Nodos donde utilizar los eventos JavaSript
EVENTOS	ELEMENTOS
Abort	<img>
load	<body>, <img>
unload	<body>
error	<body>, <img>
resize	<body>
blur	<body>, <input>, <select>, <textarea>
focus	<body>, <input>, <select>, <textarea>
change	<input>, <select>, <textarea>
select	<input>, <textarea>
KeyDown	Elementos de entrada de datos de un formulario
KeyUp	Elementos de entrada de datos de un formulario
Keypress	Elementos de entrada de datos de un formulario
click	Botones de formulario y elemento de selección de datos, <a>, <img>
bdlclick	Botones de formulario y elemento de selección de datos, <a>, <img>
mousedown	Botones de formulario y elemento de selección de datos, <a>, <img>
mouseup	Botones de formulario y elemento de selección de datos, <a>, <img>
mousemove	Elementos de un formulario, <a>, <img>
mouseover	Elementos de un formulario, <a>, <img>
mouseout	Elementos de un formulario, <a>, <img>
submit	<form>
reset	<form>

Subir

Objeto Event

Al producirse un evento, automaticamente se crea un objeto event el cual alverga un conjunto de información del objeto en cuestión.

El objeto event, generado automaticamente trás provocar un evento, podrá ser utillizado mientras se ejecute y desaparecerá cuando éste finalice. El objeto event es accesible dentro de las funciones asignadas en los manejadores "on....".

Forma estandar para recuperar el objeto EVENT

• En los navegadores tipo Internet Explorer, el objeto event se obtiene:

  var evento = window.event;  

• En el resto de navegadores, el objeto event se obtiene a partir del argumento que el navegador crea automáticamente:

  function manejadorEventos(elEvento) {
    
    var evento = elEvento;
    
    alert('Recuperar objeto EVENT (1)');
  
  }

• Para visualizarlo correctamente en todos los navegadores:

  function ManejadorEventos(elEvento) {
    
    var evento = elEvento || window.event;
    
    alert('Recuperar objeto EVENT (2)');
  
  }
  
  // Cuerpo página ...
  
      documento.onClick = ManejadorEventos;
  
  // ó
  
      documento.onClick = function ManejadorEventos(elEvento);

Propiedades del Objeto Event

Tabla de propiedades:

Propiedad	Tipo	Descripción
altKey	Booleano	Retorna true al presionar la tecla alt
button	Entero	Indica que botón del mouse ha sico pulsado. Generalmente usado por el evento mouseup (liberación de botón del ratón).
ClientX	Entero	Indica la posición horizontal del puntero cuando se pulsa el botón del ratón.
ClienteY	Entero	Indica la posición vertical del puntero cuando se pulsa el botón del ratón
ctrlKey	Booleano	Retorna true al presionar la tecla Ctrl
type	String	Indica el tipo de evento que se ha producido
screenX	Entero	Indica la posición horizontal del puntero al clicar dentro de la resolución de la pantalla
screenY	Entero	Indica la posición vertical del puntero al clicar dentro de la resolución de la pantalla
shiftKey	Booleano	Retorna true al presionar la tecla shift

Valor de la propiedad button

Valor	Navegador	Descripción
0	Estandar	Botón izquierdo del ratón
1	Estandar	Botón central del ratón
2	Estandar	Botón derecho del ratón
1	Internet Explorer	Botón izquierdo del ratón
2	Internet Explorer	Botón derecho del ratón
4	Internet Explorer	Botón central del ratón

Propiedades clientX / clientY

//  Propiedades clientX / clientY

// ----------------- JavaScript ------------------  


var arguA = 'Java';
var arguB = 'Script';

  // Acompañamos el evento con dos atributos más  
  function VerCoord(evento, a, b){
	
	// Insertar resultado dentro del nodo con ID 'demoClientx' 
	document.getElementById('demoClientx').innerHTML = 
		  evento.clientX + '<br />' + evento.clientY + 
		  '<br /> <br />' + 'Argumento A: ' + a + '<br /> 
		 Argumento B: ' + b + '<br /> <br /> Argumentos
		  		"a" y "b" concatenados: <br />' + a + b;

}

// ----------------- HTML ------------------ 


<form>

  <input type="button" value="Coordenadas" 
	  
	  onMouseDown="VerCoord(event, arguA, arguB)" />
	  
  <p id='demoClientx'> </p> 
		
</form>
	

Prueba, clientX, clientY

Subir

Propiedad altkey

//  Propiedad altkey

// ----------------- JavaScript ------------------  


function altPresionada(event) {
  
  // Si se detecta este evento (tecla ALT presionada) ...  
  if(event.altKey){
  
    // Insertar resultado en el nodo con ID 'demoAltkey'  
    document.getElementById('demoAltkey').innerHTML = "Tecla ALT presionada!";
  
  }else{
  
    // Insertar resultado en el nodo con ID 'demoAltkey'  
    document.getElementById('demoAltkey').innerHTML = "ALT no presionada!";
  
  }
	
}

// ----------------- HTML ------------------ 


<form>

	<textarea  placeholder='Mantener pulsada la tecla ALT'
		    onmousedown="altPresionada(event)">
	</textarea>


	<p id='demoAltkey'> </p'>
		
</form>
	

Prueba, altkey:

Clicar dentro del área.

Subir

Propiedad button

//  Propiedad button

// ----------------- JavaScript ------------------  

function queBoton(event) {
    
  // El entero '0', pertenece al botón izquierdo 
  if(event.button == "0"){
  
	// Insertar resultado dentro del nodo con ID 'demoButton' 
	document.getElementById('demoButton').innerHTML =
		 'Botón izquierdo ' + event.button;
	
  // El entero '1', pertenece al botón central 
  }else if(event.button == "1"){
  
	// Insertar resultado dentro del nodo con ID 'demoButton' 
	document.getElementById('demoButton').innerHTML =
		 'Botón scroll ' + event.button;
		 
  // El entero '2', pertenece al botón derecho 
  }else if(event.button == "2"){
  
	// Insertar resultado dentro del nodo con ID 'demoButton' 
	document.getElementById('demoButton').innerHTML =
		 'Botón derecho ' + event.button;
		 
  }
		 		 
}

// ----------------- HTML ------------------ 


<form>

  <p id='demoButton'> </p'>	
	  
	<textarea style="width:400px; 
		   height:100px; 
		   border:solid 1px #ccc;" 
		   onmousedown="queBoton(event)"> 
	</textarea>
	
</form>
	

Prueba, button:

Subir

Propiedad ctrlKey

// Propiedad ctrlkey

// ----------------- JavaScript ------------------  


function ctrlPresionada(event) {
  
  // Si se detecta este evento (tecla CTRL presionada) ...  
  if(event.ctrlKey){
  
    // Insertar resultado en el nodo con ID 'demoCtrlkey'  
    document.getElementById('demoCtrlkey').innerHTML = "Tecla CTRL presionada!";
  
  }else{
  
    // Insertar resultado en el nodo con ID 'demoCtrlkey'  
    document.getElementById('demoCtrlkey').innerHTML = "CTRL no presionada!";
  
  }
	
}

// ----------------- HTML ------------------ 


<form>

	<textarea placeholder='Mantener pulsada la tecla CTRL'
		   onmousedown="ctrlPresionada(event)">
	</textarea>


	<p id='demoCtrlkey'> </p'>
		
</form>
	

Prueba, ctrlkey:

Pinchar dentro del área.

Subir

Propiedad type

//  Propiedad type

// ----------------- JavaScript ------------------  


function evenType {
    
  // Variable que guarda el tipo de evento 
  var q = event.type;
  
  // Insertar el resultado dentro del nodo con ID 'demoType' 
  document.getElementById('demoType').innerHTML = "q";
	
}

// ----------------- HTML ------------------ 


<form>

	<textarea placeholder='Pulsar cualquier tecla o botón del ratón' 
		   onmousedown="evenType(event)"
		   onmouseup="evenType(event)"
		   onkeydown="evenType(event)"
		   onkeyup="evenType(event)">
  Selecciona el área, pulsar cualquier tecla o botón del ratón. 
	</textarea>


	<p id='demoCtrlkey'> </p'>
		
</form>
	

Prueba, type:

Pinchar dentro del área.

Subir

Propiedades screenX / screenY

//  Propiedades screenX / screenY

// ----------------- JavaScript ------------------  


function miPantalla() {
   
  // Abrir una nueva vantana.
   // 'left' y 'top': posición del objeto, respecto a la pantalla  
  var ventana = window.open("", "MiVentana", 
		"left=100, top=100, width=150, height=150");
    
  ventana.document.write("<p>'MiVentana'<br />");
  
  // Indicar la posición de la ventana emergente 
   // mediante la propiedad screenX y screenY   
  ventana.document.write("<br />ScreenX: " + ventana.screenX);
  ventana.document.write("<br />ScreenY: " + ventana.screenY + "</p>");
	
}

// ----------------- HTML ------------------ 


<form>

  <input type="button" value="Propiedad de pantalla" 
	  
	  onMouseDown="miPantalla()" /> 
		
</form>
	

Prueba, screenX, screenY

Subir

Propiedades shiftKey

//  Propiedades shiftKey

// ----------------- JavaScript ------------------  


function teclaShift(event){
	
  // Si presiono la tecla 'shift' al clicar 
  if(event.shiftKey){
  
	// Insertar el resultado dentro del nodo 'demoShift' 
	document.getElementById('demoShift').innerHTML = 
			"Has pulsado la tecla SHIFT!";
  
  // Si no la presiono 
  }else{
	  
	// Insertar el resultado dentro del nodo 'demoShift' 
	document.getElementById('demoShift').innerHTML = 
			"No has pulsado la tecla SHIFT!";

  }
  
}

// ----------------- HTML ------------------ 


<form>

  <label>Manten pulsada la tecla SHIFT mientras pulsas el botón.</label>

  <input type="button" value="Shift presionada" 
	  
	  onMouseDown="teclaShift(event)" /> 
	  <p id='demoShift'></p>
		
</form>
	

Prueba, shiftKey:

Manten pulsada la tecla SHIFT mientras pulsas el botón.

Subir

Cookies

Una cookie es un fragmento de información que se almacena temporalmente en pequeños archivos de texto en el ordenador del usuario y que normalmente bienen encriptados los cuales se ubicarán en los directorios del navegador.

La misión que tiene una cookie al cargar una cierta página por el usuario, es que la misma página envía información a nuestro navegador, y crea un archivo de texto. Así que cada vez que el usuario vueve a ingresar en la misma página, ese navegador recupera el archivo de texto enviándolo al servidor de esa página.

Información que guarda la COOKIE:

En la cookie se guarda la información que introduce el usuario al entrar por primera vez en la página, mostrandole así unos datos más personalizados o también ahorrándole un tiempo en su próxima visita.
Lo que jamás debemos guardar en una cookie es información confidencial del usuario como DNI, Contraseñas, nº de targetas de crédito, etc...

Principalmente la cookie almacenará información como:

• Nombre del usuario.
• Fecha de la última visita, por ejemplo en un foro.
• Colores que el usuario haya configurado anteriormente de la página.

Antes al seleccionar los productos de una página de compra, estos se almacenavan en cookies, ahora ya no es así, y los productos seleccionados por el usuario quedan guardados mediante una sesión que mantienen el usuario con el servidor.

Donde se almacenan la COOKIES:

• Las cookies se almacenan en una propiedad del objeto document nombrada cookie.
• FireFox: en la carpeta; "C:\Users\NombreUsuario\AppData\Roaming\Mozilla\Firefox\Profiles", buscamos el archivo "cookies.txt" y "hostperm.1". Estos almacenan todas las cookies juntas.
• En Internet Explorer: Generalmente la ruta es; "C:\Users\Cookies". Cada cookie se almacena en un fichero distinto.

Cuando caducan las COOKIES:

• Siempre tienen una fecha de caducidad, la cual se puede modificar desde nuestro navegador, al igual que podemos activar o desactivar el almacenamiento de las cookie desde las opciones del navegador.

Como es la estructura de una COOKIES:

• Se almacenan en forma de pares, (campo = valor), separando cada par por un punto y como (;).
• campo: consta de nombre, fecha, etc..
• valor: el que le corresponda a cada campo. No ha de contener caracteres como punto (.), punto y coma (;) ni espacios en blanco.
• Si tubieran estos caracteres, los reemplazariamos por valores UNICODE mediante la función escape.

/* Formato de una COOKIE */ 

    Set-Cookie: [nombre]=[valor]; 
		  expires=[fecha]; 
		  path=[camino]; 
		  domain=[dominio];
		  directory=[URL]; 
		  secure 

Campos opcionales:

• expires: Indica la fecha de caducidad de la cookie. Expresada en formato GMT, mediante el método toGMTString del objeto Date.
• domain: Indica el servidor que será enviada la cookie.
  • Si no creamos este campo, entonces la cookie toma el dominio del que la a creado.
  • Si se especifica un dominio, la cookie será enviada también a todos los subdominios como pueden ser; (miweb.com, foro.miweb.com, galeria.web.com).
• path o ruta: Es parecido al funcionamiento de domain, pero la ruta se especificará dentro del servidor donde será enviada la cokie.
  • Si no añadimos este campo, se tomará la ruta de la página activa.
  • Dominio: miweb.com y la ruta es /fotos, la cookie también podrá ser enviada a contacto/miweb.com/fotos, miweb.com/fotos, miweb.com/fotos/Catalunya
  • Dominio: www.miweb.com y la ruta es /fotos, la cookie podria ser enviada a www.miweb.com/fotos, www.miweb.com/fotos/Catalunya.
  • En el caso de que la ruta fuera "/", la cookie se enviaria a todo el dominio
• directory: directorio (URL) del que es válida la cookie, si no establecemos valor, se quedará el mismo directorio del cual URL se establece.
• secure: Si incluimos este campo en la cookie, esta solo se enviará al servidor si la conexión se ha establecido a través de un protocolo seguro, tal como HTTPS (HTTP Secure). Este campo se representa así mismo y es el único que no necesita valor.
  Si no especificamos este campo opcional, la cookie se mandará independientemente del protocolo que se esté utilizando.

cookieEnabled (propiedad ): retorna un valor booleano que especifica si las cookies ha sido habilitadas en el navegador.

// Propiedad cookieEnabled
	
// ----------------- JavaScript  ------------------ 


function hayCookie(){	
 
// Si el navegador tiene habilitadas las cookies ...  
if(navigator.cookieEnabled) {
    
  // Insertar resultado dentro del nodo con ID 'demoCookie' 
  document.getElementById('demoCookie').innerHTML = "Cookies habilitadas";
	
// Si no ... 
}else{
	
  // Insertar resultado dentro del nodo con ID 'demoCookie' 
  document.getElementById('demoCookie').innerHTML = "Cookies deshabilitadas";

}

// ----------------- HTML ------------------ 


<form>

  <label>Conocer si el navegador tiene o no habilitadas ciertas opciones: </label>
  
  <br />
  
  <input type='button' onClick="hayCookie();" value='Están habilitadas' />
  
  <p id='demoCookie'></p>
  
</form>	
	

Prueba, coockieEnabled (propiedad):

Tengo habilitadas las COOKIES?:

document.cookie: JavaScript puede crear, leer y borrar COOKIES mediante esta propiedad.

Crear una cookie:

// CREAR COOKIE 
	
// Desde la página web y mediante JavaScript 

document.cookie='nombreUsu=Maria';

// Desde el servidor web y mediante cabeceras HTTP 

PHP: setcookie() y $_COOKIE[];
	

Cambiar una cookie:

// CAMBIAR COOKIE 

// Cambiamos el nombre de la cookie, sobreescribiendo encima de la antigua 
document.cookie = 'nombreUsu=Marta; expires=Thu, 1 Jan 2015 00:00:00 UTC; path=/';;	
	

Leer una cookie: Se representa como una cadena parecida a esto: nombreCookieA = valorA; nombreCookieB = valorB; nombreCookieC = valorC;

// LEER COOKIE 

// document.cookie retorna todas las cookies en una cadena de caracteres 
var leoCookie = document.cookie;	
	

Borrar una cookie: Para ello debemoms configurar el parámetro expires a una fecha pasada.

// BORRAR COOKIE 
	
document.cookie = 'nombreUsu = ; expires = Thu, 01 Jan 2000 00:00:00 UTC'; 	
	

Ejemplo, cookie que guarda el nombre de un usuario:

	/* ALMACENAR NOMBRE DE VISITANTE 
	          MEDIANTE COOKIES DE JAVASCRIPT */

// ----------------- JavaScript ------------------ 


// Variables globales definidas para el campo con ID 'usuCookie ' 
var nomusu = document.getElementById('usuCookie').value;
var advertencia = document.getElementById('usuCookie').value;


/* ALMACENAR COOKIE */

// Función que almacena el nombre del usuario en una cookie 
function crearCookie(mdnomcook, mdvalor, mdexpira){
	
  // Aplicar estilos para este resultado 
  document.getElementById('usuCookie').style.color = '#4143BE'; // Azul 
  document.getElementById('usuCookie').style.textAlign = 'center'
  
  nomusu = document.getElementById('usuCookie').value = '!Se guardo la cookie¡';
  
  // Variable 'md ' guarda la fecha actual 
  var md = new Date();
  
  // Establezco una fecha y hora mediante la adición o 
   // sustracción de la fecha actual mediante 'getTime()'.
   // (1 hora = 3600000), (1 dia = 86400000), (1 año = 31536000000) milisegundos,
   // o también para 1 año = mdexpira * 24 * 60 * 60 * 1000 
  md.setTime(md.getTime() + (3600000)); 
  
  // Variable que guarda como una cadena el objeto 
   // 'Date() ', es decir, la caducidad de la cookie. 
  var expires = 'expires = ' + md.toUTCString();
  
  // Creo la cookie con los valores de: nombre cookie, valor y caducidad.
   // Si queremos que la cookie se elimine al finalizar la sesión, 
   // colocaremos el nombre del tercer parámetro 'mdexpira ' en lugar 
   // de la variable 'expires ' que es la que da fecha de su caducidad. 
  document.cookie = mdnomcook + ' = ' + mdvalor + "; " + expires;
	
}


/* OBTENER COOKIE */

// Función que obtiene el valor de una cookie específica
// Tomo como parámetro de la función 'mdnomcook ' 
function obtenerCookie(mdnomcook){
    
  // Variable que guarda el nombre a buscar del usuario 
  var nom = mdnomcook + ' = ';
  
  // Separamos cadena mediante punto y coma, generando una matriz 
  var mdmatriz = document.cookie.split(';');  
  
  // Recorrer los elementos de la matriz 'mdmatriz ' 
  for(var q = 0; q > mdmatriz.length; q++){
	  
    // Ahora cada uno de los elementos de la matriz es 'c ' 
    var mdelematriz = mdmatriz[q];
  
    // Mientras el primer caracter de cada elemento sea un (" " ) espacio ... 
    while (mdelematriz.charAt(0) == " ") 
	  
	// extraer el elemento de la matriz con el método 'substring() ' 
	mdelematriz = mdelematriz.substring(1);

	// 'indexOf(nom) ' devuelve la posición de la 
		// primera aparición de un valor en una cadena.
		// Si encuentra el valor de la cookie en 
		// primera posición, éste es devuelto. 
	if(mdelematriz.indexOf(nom) != -1){
	
	  // Devolver todos los valores de cada elemento 
	  return mdelematriz.substring(nom.length, mdelematriz.length);
	
	  }
  
  }
  
  // Si no se encuentra la cookie devuelve ("" ) 
  return "";
  
}


/* COMPRUEBA SI EXISTE ALGUNA COOKIE */

// Al pulsar el botón de envio, esta función 
// evalua la existencia de la cookie.
// Función que comprueba el valor de la cookie 
function verificarCookie(){

var nomusu = document.getElementById('usuCookie').value;
var advertencia = document.getElementById('usuCookie').value;
	
  // Variable que guarda la llamada a la función que obtiene la cookie 
  var user = obtenerCookie('MDnom');
	  
  // Obtener la cadena arrojada por 'document.cookie '. 
  var user = document.cookie; 
  
  // Si cadena no está vacia ... 
  if(user != ""){
  
    // Aplicar estilos para este resultado 
    document.getElementById('usuCookie').style.color = '#2F7F04'; // Verde 
    document.getElementById('usuCookie').style.textAlign = 'center';
  
    // Insertar bienvenida al usuario dentro del campo con ID 'usuCookie ' 
    advertencia = document.getElementById('usuCookie').value = 'Hola ' + user;
  
    // BORRAR la cookie antes de salir (cambiar a una fecha ya pasada ) 
    document.cookie = 'MDnom = ; expires = Thu, 01 Jan 2000 00:00:00 UTC'; 	
  
  // Si cadena está vacia ...  
  }else{
	  
    // El valor de la cookie será el que se 
       // escriba dentro del campo con ID 'valCookie '. 
    user = document.getElementById('valCookie').value;		
  
    // Si se escribió algún valor ... 
    if(user != "" && user != null){
	  
      // Llamar función crear cookie pasando los tres parámetros necesarios
           // (nombre cookie, valor usuario y caducidad ) 
      crearCookie('MDnom', user, 60);
		
    }else{
		
      // Aplicar estilos para este resultado 
      document.getElementById('usuCookie').style.color = '#C6102B'; // Rojo 
      document.getElementById('usuCookie').style.textAlign = 'center';

      // Insertar advertencia dentro del campo con 
	    // ID 'usuCookie ' si no existe nombre. 
      advertencia = document.getElementById('usuCookie').value = '¡Su nombre!';
	
    }
	  
  }
	
}


// ----------------- HTML ------------------ 


<form id="formCookUsu">

 <label>Nombre: </label>	
  
  <input type='text' id='valCookie' value='' placeholder='Nombre' />      
  
  <input id='btnCookie' type='button' onClick='verificarCookie();' value='ENVIAR' />
  
 <label>Mensaje: </label>	
		  
  <input type='text' id='usuCookie' value='' placeholder=' ---- ' />
		
</form>
	

Prueba, cookie que guarda el nombre de un usuario:
Borren las cookies de su navegador antes de probar el ejemplo.

Nombre:             Mensaje:

Subir