Debido al distinto comportamiento de los navegadores web muchas veces se hace imprescindible detectar el nombre del mismo así como la versión que se está utilizando para realizar una programación determinada.

Gracias al objeto navigator de javaScript podemos detectar tanto el nombre como la versión de navegador que se está utilizando.
El objeto navigator tiene varias propiedades aunque quizás la más interesante sea userAgent. Mediante el uso de expresiones regulares aplicadas sobre esta propiedad podremos detectar la información que necesitamos.

Tenéis información detallada sobre el objeto navigator en la siguiente dirección:

Estos son algunos de los valores de las propiedades del objeto navigator relativo a tu navegador:

• appCodeName:
• appName:
• appVersion:
• userAgent:

Navegando un poco por la red me he topado con algunas funciones de javaScript bastante interesantes y que considero necesario tenerlas bien a mano por lo que las guardo en este post por si hay que rescatarlas.

toggle()

Ocultará o mostrara elementos dependiendo del estado anterior.

function toggle(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != 'none' ) {
		el.style.display = 'none';
	}
	else {
		el.style.display = '';
	}
}

Os dejo un ejemplo sencillo.

El código al completo del ejemplo sería:

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	}
	else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

addLoadEvent(function() { 
					  
	function anadeEvento(elemento,evento,funcion) {
	 if(document.addEventListener){
         elemento.addEventListener(evento, funcion, false);  // Resto navegadores
     }
     else{
         elemento.attachEvent("on"+evento,  funcion ); // IE8-
     }
  }				  
					  
  function toggle(obj) {
      var el = document.getElementById(obj);
	  if ( el.style.display != 'none' ) {
		  el.style.display = 'none';
	  }
	  else {
		  el.style.display = '';
	  }
  }
  
  
  
  var enlace = document.getElementById("enlace_toggle");
  obj = "parrafo1";
  
  anadeEvento(enlace, "click", function(){toggle(obj)})
  
});

A la hora de manipular el DOM tenemos el siguiente listado de expresiones

• document.getElementById(id_elemento);: Permite acceder al primer elemento con id “id_elemento”
• document.getElementsByTagName(elemento): Devuelve una lista de nodos con todos los elementos con el nombre “elemento”.
  En caso de querer hacer referencia a un elemento específico, por ejemplo el primero, podríamos hacer uso de la expresión: document.getElementsByTagName(elemento)[0]
• document.createElement(elemento);: Crea un nuevo elemento en el DOM
• document.createTextNode(“texto”);: Genera un nuevo nodo de texto.
• appendChild: Añade un nodo hijo a un padre concreto. Por ejemplo:
  

  var nuevoEnlace = document.createElement("a");
  var nodoTexto = document.createTextNode("Esto es un enlace");
  nuevoEnlace.appendChild(nodoTexto);

• elementoPadre.insertBefore(nuevoElemento, elementoReferenciado);: Inserta un elemento justo antes de otro que le especifiquemos.
• innerHTML: Permite introducir HTML dentro de una etiqueta.
• parentNode: Selecciona el nodo padre de un nodo en concreto.
• removeChild: Elimina un nodo hijo
• getAttribute(propiedad);: Devuelve el valor de una propiedad que le pasamos por parametro
• ancla.style.display: Devuelve un estilo concreto de un elemento
• document.getElementsByClassName(names);: Retorna un conjunto de elementos los cuales poseen la clase “names”.

getElementsByClassName pertenece a la nueva especificación de HTML5 y tan solo algunos navegadores lo soportan, por ejemplo Internet Explorer en todas sus versiones inferiores a la 9.

Hasta que todos los navegadores soporten getElementsByClassName podremos hacer uso de la siguiente función:

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}

Podemos encontrar información mas detallada en la siguiente página: Introducción a la manipulación del DOM mediante Javascript (Maestros del web)

Después de una temporadita haciendo uso de la librería jQuery he olvidado algunos conceptos básicos de javaScript por lo que empezaré una serie de posts tratando alguno de estos conceptos a modo de recordatorio personal, si además le sirve a alguien más pues mejor que mejor.

Como refleja el título del post empezaré abordando el manejo de los eventos. Es importante a la hora de asignar los eventos separar el código js del HTML por motivos de accesibilidad.

<a href="javascript:window.open()">Abrete sésamo</a> <!-- javaScript intrusivo -->

Para evitar tener javaScript intrusivo en nuestra página empezaremos por apoyarnos en la función de Simon Willison addLoadEvent. Esta función nos permitirá cargar varias funciones una vez la página se haya cargado, además funcionará correctamente en el caso de que el evento onload haya sido asignado previamente.

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	}
	else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

addLoadEvent(function() { 
   //funcionabilidad
});

Por otro lado haremos uso de dos funciones para añadir y borrar los eventos que queramos: “anadeEvento” y “borrarEvento”. Pasaremos como parámetros de las funciones el elemento al que queremos asignar el evento, el evento y la función que queremos ejecutar.

function anadeEvento(elemento,evento,funcion) {
	 if(document.addEventListener){
         elemento.addEventListener(evento, funcion, false);  // Resto navegadores
     }
     else{
         elemento.attachEvent("on"+evento,  funcion ); // IE8-
     }
  }
  
  function borrarEvento(elemento,evento,funcion) {
	   if(document.removeEventListener){
		   elemento.removeEventListener(evento, funcion, false);  // Resto navegadores
	   }
	   else{
		   elemento.detachEvent("on"+evento,  funcion ); // IE8-
	   }
  }

Como podéis ver en el código hay que realizar funcionabilidades distintas dependiendo del navegador. Para Internet Explorer 8 o inferior hacemos uso del método attachEvent mientras que para el resto de navegadores usamos addEventListener. A la hora de borrar eventos IE hace uso de detachEvent y el resto utiliza removeEventListener

Voy a realizar un ejemplo sencillo a modo de prueba en el que tendremos un botón con el típico alert “hola mundo” y otro botón que será el encargado de anular el evento que hace saltar el mensaje.

hola mundo! borrar

A continuación os dejo el código al completo: