Javascript: sobreescribir el comportamiento del botón derecho del ratón en una web.

A veces, por lo que sea, en una aplicación web necesitamos sobreescribir el comportamiento standar del click derecho del ratón, que en lugar de abrirnos el menú contextual abra algo personalizado. Veamos lo básico ¿Cómo hacemos que en lugar del comportamiento por defecto ejecute el código que queramos? Pues recogiendo el evento y escribiendo nuestro propio código:

if (document.addEventListener) {
    document.addEventListener('contextmenu', function(e) {
        alert("NANAY DE ABRIR!!!!!"); //Aquí iría el código que quieres ejecutar en lugar del comportamiento por defecto
        e.preventDefault(); //esta línea evita el comportamiento por defecto
     }, false);
 } else {
    document.attachEvent('oncontextmenu', function() {
        alert("NANAY DE ABRIR"); ///aquí una alternativa
        window.event.returnValue = false;
    });
}

Búsqueda binaria o dicotómica

Durante el corto tiempo que tuve cuenta en CuriousCat (lo borré porque para recibir insultos anónimos ya me llega con Tweeter y los comentarios de este blog) alguien me pidió que escribiera sobre la diferencia entre una búsqueda binaria y una búsqueda dicotómica. Eso se lo contesté rápidamente allí: búsqueda dicotómica y búsqueda binaria son sinónimos, no hay diferencia.

¿En qué consiste la búsqueda binaria?

Cuando hablamos de búsqueda binaria hablamos de un algoritmo, una serie de instrucciones para que un programa informático realice una tarea. Concretamente de un algoritmo de búsqueda, es decir, la serie de instrucciones necesarias para encontrar un valor dentro de una colección de valores. La búsqueda binaria está pensada para buscar un elemento dentro de una colección ordenada. Vamos a explicar cómo funciona con un ejemplo: imagínate que tuvieras una lista con todos los habitantes de Barcelona ordenada por la primera letra de su apellido, tienes que buscar a alguien que se apellida «Martínez» ¿te pondrías a mirar la lista desde el principio hasta llegar a ese nombre? Son millones de comprobaciones. Ese procedimiento sería el de una búsqueda lineal: comprobar todos los valores hasta encontrar el deseado, funciona pero es muy lento, tiene utilidad cuando no queda más remedio (una colección desordenada) pero es demasiado ineficiente para una lista ordenada.

Aplicando una búsqueda binaria a ese ejemplo lo que haríamos sería encontrar primero el valor del medio de la lista, dividir la lista en dos mitades y comprobar si el valor intermedio es el que buscamos, es menor o es mayor. Si se diera la casualidad de que es el que buscamos la búsqueda ya estaría finalizada, si el valor intermedio es menor descartaríamos la mitad inferior de la lista y si es mayor descartaríamos la mitad superior. Ahora que localizamos en qué mitad tiene que estar nuestro valor repetimos el procedimiento sobre esa mitad, creando otras dos mitades y de nuevo repitiendo el procedimiento hasta dar con nuestro valor. En cada iteración descartamos la mitad de los datos que teníamos, lo que reduce el tiempo de búsqueda respecto a la lineal.

¿Se usa este algoritmo?

La mayoría de lenguajes de programación o frameworks ya tienen funciones de búsquea integradas muy bien optimizadas, así que no es habitual que alguien tenga que escribir una función de búsquea binaria, excepto en ejercicios académicos para aprender algoritmia. Yo personalmente he utilizado este método para buscar entre conjuntos de datos manualmente, cuando no disponía de un índice. Aquí abajo os dejo una implementación del algoritmo en Javascript:

function buscaDicotomica(valor, conjunto) {
    //valor es lo que vamos a buscar, cojunto es el array donde lo buscamos
    var ini = 0;    //inicio del array
    var fin = conjunto.length - 1;   //fin del array
    var pos = -1;
    var finaliza = false;
    var media;
 
    while (finaliza === false && ini<= fin) {
        media= Math.floor((ini+ fin)/2);
        if (conjunto[media] == valor) {
            finaliza = true;
            pos  = media;
        } else if (conjunto[media] > valor) {  //si está en la mitad inferior
            fin= media - 1;
        } else {  //si está en la mitad superior
            ini= media+ 1;
        }
    }
    return pos;
}

Javascript: cerrar una ventana automáticamente cuando se cierre el diálogo de impresión.

Veamos el caso práctico que me encontré: una aplicación web que para imprimir un documento abre un popup con la previsualización del mismo, cuando pulsas el botón de imprimir debería abrirse el diálogo de impresión y después de aceptar el popup debería cerrarse… pero resulta que si bien en el Safari y el Internet Explorer lo hace correctamente, en el Chrome o en el Firefox se cierra la ventana antes de que se abra el diálogo de impresión. ¿Cómo hacemos para que se cierre en todos los navegadores automáticamente esa ventana tras confirmar el diálogo de impresión?

Pues como el objeto window en Javascript es capaz de reconocer el evento de que se ha cerrado la ventana de impresión (evento onafterprint), bastará con que programemos que se ejecute window.close() cuando se de dicho evento. El código sería:

window.onafterprint = function () {
    window.close();
}

Sobreescribir la función javascript window.alert() nativa del navegador por una personalizada

Resulta me veía con una cuestión trabajosa: en una aplicación web tenía que hacer una ventana de alerta personalizada que sustituyera al window.alert() nativo del navegador. La parte de diseñar la nueva ventana no era tan laboriosa, la labor pesada y repetitiva venía del tener que localizar todas las ocurrencias de window.alert() diseminadas por el código y cambiarlas por la nueva función. Y ahí pensé «¿y si pudiera cambiar el window.alert() por la nueva función?«. Hay un fichero de javascript que está presente en todas las pantallas, así que solo tendría que introducirlo allí.

¿Y cómo reescribimos la función window.alert()? Pues simplemente así:

window.alert = function(){}

Asignando una nueva función a window.alert() sobreescribe su comportamiento nativo por el indicado. Veámoslo de nuevo con más o menos todo el código que lleva:

//alert personalizado, recibe el mensaje a mostrar y el elemento sobre el que poner el foco si es un mensaje de error
window.alert = function(msg,el,isError){
	var left = parseInt((screen.width - 750) / 2);
	var top = parseInt((screen.height-300)/2);
	var ventana = window.open("AvisoNuevo.asp?e="+isError+"&m="+msg,"modal","width=750,height=300,top="+top+",left="+left+",scrollbars=auto,resizable=no,menubar=no,toolbar=no");	
	if(isError && el!=null && el!="" && el!=false){			
		try {
		  document.getElementById(el).focus();
	    }
	     catch (e) { return; }
	}
}

Electron.js: Error «require is not defined» y conflictos entre require y jQuery.

Aquí sigo trabajando en mi primera aplicación corriendo sobre Electron.js y me están saliendo canas por diversos errores que me aparecen a la hora de integrar. Uno de ellos ha sido recibir constantemente el error «require is not defined«. Una de las causas de este error suele ser que la integración con NodeJS está deshabilitada, por seguridad este parámetro viene deshabilitado por defecto para evitar ataques que puedan, por ejemplo, borrar ficheros de nuestro equipo remotamente si cargamos una página no segura. En caso de que estemos cargando una aplicación local podemos ir al main.js y activarlo desde allí configurando las preferencias de nuestro ventana web:

 webPreferences: {
            contextIsolation: false,
            nodeIntegration: true,
            nodeIntegrationInWorker: true,                                                  
            enableRemoteModule: true                                                                     
 }

Es posible que esta configuración nos genere un nuevo conflicto entre jQuery y NodeJS ya que ambos intentan sobreescribir la función require(). Esto puede solucionarse añadiendo esta línea antes de la carga de jQuery:

<script>
		window.nodeRequire = require;
		delete window.require;
		delete window.exports;
		delete window.module;
</script>

Electron.js: obtener el nombre, la versión o la arquitectura de nuestro sistema operativo

Bueno, pues hace unas semanas que en el trabajo estoy currando con el framework Electron.js, que básicamente nos permite transformar aplicaciones web en aplicaciones nativas de escritorio. En mi caso es para actualizar un software de intranet que dependía de ActiveX y de Internet Explorer en exceso. En todo caso vamos a ver algunas cosillas sobre Electron, una de ellas es ¿cómo puedo obtener los datos sobre mi sistema operativo? Pues Electron incluye un módulo para eso:

Lo primero será importar el módulo «os«, para que la aplicación pueda trabajar con el sistema operativo anfitrión. Para el ejemplo crearemos una variable llamada también os (por recordarlo bien) para almacenar dicho objeto:

var os = require("os");

Ahora veamos ¿cómo haríamos para ver la arquitectura de nuestro sistema operativo? Pues llamando al método arch().

var arquitectura = os.arch();

¿Y para ver el nombre del sistema operativo? Pues tenemos dos opciones: el método type() nos devolverá el tipo genérico (Linux, Darwin o Windows) y el método platform() nos devolverá un resultado más concreto (darwin,freebsd,sunos,win32…). Finalmente el método version() nos devolverá la versión del sistema operativo:

var tipo = os.type();
var plataforma = os.platform();
var version = os.version();

Acceder al último elemento de un array en Javascript

Algunos lenguajes nos permiten acceder al último elemento de un array usando el índice en negativo (es decir, poniendo la posición -1) pero no es el caso de Javascript. En ese caso ¿cómo accedo al último elemento de un array? Bueno, si se trata de un lenguaje donde podamos conocer la longitud del array como es Javascript (y la mayoría de lenguajes modernos realmente) basta con usar dicha longitud como índice. En el caso concreto de Javascript tendríamos que usar la propiedad length del array pero restándole una posición (porque nunca hay que olvidar que los arrays empieza en 0):

var ultimoElemento = myArray[miArray.length - 1];

Convertir texto en inglés a 1337 con Javascript

Si ayer veíamos cómo hacer con javascript una función que codifique/descodifique un simple cifrado ROT13 hoy vamos a con otro ejercicio de javascript simple: un conversor inglés-1337.

1337, leet, leet speak o 1337 5p34k es un tipo de escritura compuesta por caracteres alfanuméricos y relativamente popular en ambientes informáticos. No se trata de ningún tipo de cifrado de mensajes, simplemente se sustituyen las letras por número o por conjuntos de símbolos cuyo aspecto recuerde al de dicho caracter.

La función sería algo así: recibe un texto escrito en el alfabeto latino internacional y lo devuelve en 1337. Creamos un objeto con todos los valores a sustituir llamado leetAlph para que nos facilite el trabajo, luego solo recorremos la cadena que recibimos como si fuese un array (en esencia toda cadena es una array de caracteres) y vamos cambiando en cada posición la letra por el valor que le corresponda.

function textoALeet(texto) { 
  let leetAlph={a:'@', 
    b:'8', 
    c:'(', 
    d:'|)',
    e: '3',
    f:'ph', 
    g:'g',
    h:'#',
    i:'l',
    j:'_|',
    k:'|<', 
    l:'1', 
    m:"|'|'|", 
    n:'/\/', 
    o:'0', 
    p:'|D', 
    q:'(,)', 
    r:'|2', 
    s:'5', 
    t:'+', 
    u:'|_|', 
    v:'|/', 
    w:"|/|/'",
    x:'><', 
    y:'j', 
    z:'2'};

  texto = texto.toLowerCase();
  for (var i = 0; i < texto.length; i++) {
    if (leetAlph[texto[i]]) {
      text = texto.replace(texto[i], leetAlph[texto[i]]);
    }
  }
  return(texto);
}

Función para cifrado ROT13 con Javascript

ROT13 es un algoritmo para el cifrado de mensajes extremadamente, tan simple que no debería ser considerado nunca una opción válida para un cifrado seguro de nuestras comunicaciones. Basado en los cifrados que se decía que realizaba Julio César en la antigüedad, donde simplemente escribía intercambiando cada letra por otra situada N posiciones más adelante o atrás en el abecedario, ROT13 consiste en desplazar cada letra de nuestro mensaje 13 posiciones hacia delante.

En su día se popularizó en los foros de internet para introducir chistes y últimamente se ha utilizado para ocultar spoilers en foros sobre series.

¿Cómo implementamos esto en Javascript? Bueno, pues se me ha ocurrido que esta sería la solución más rápida, utilizando las funciones de javascript replace() para substituir caracteres dentro de una cadena en base a una expresión regular, charCodeAt() para obtener el código del caracter y la función fromCharCode() para crear una cadena con esos códigos que obtuvimos antes y a los que les aplicamos el desplazamiento. También usaremos toLowerCase() para convertir a minúscula y evitar conflictos con los códigos de las mayúsculas.

function str_rot13(mensaje){
    return mensaje.replace(/[a-zA-Z]/gi,function(s){
        return String.fromCharCode(s.charCodeAt(0)+(s.toLowerCase()<'n'?13:-13));
    });
}

Y ahí nos quedaría un traductor inglés-rot13/rot13-inglés. Si a la función le pasamos «hola» devolverá «ubyn» y si le pasamos «ubyn» devolverá «hola«. La expresión regular de la función replace() solo evalúa los caracteres del alfabeto latino internacional por lo que si le pasamos una cadena con acentos o con eñes no daría errores pero no convertiría esos caracteres, igual que hará si la cadena tiene números o símbolos. Es decir, si le pasamos la cadena «coño» devolvería «pbñb«.

Como ya comenté en la introducción se trata de un cifrado más bien «de andar por casa» o para jugar a los detectives, no algo que se pueda utilizar en el campo de la ciberseguridad y la confidencialidad de los datos.

Javascript: funciones querySelector() y querySelectorAll()

Las funciones querySelector() y querySelectorAll() existen en Javascript como métodos del objeto document. Ambas nos permiten acceder a elementos del DOM utilizando un selector de CSS.

La función querySelector() nos devolverá el primer elemento que coincida con el selector que le pasemos. Si es un id no habría problema puesto que deberían ser únicos en el documento, pero si se tratase de una clase o un elemento HTML entonces nos devolvería solo la primera ocurrencia:

//Si es un id nos devolverá ese elemento
var i = document.querySelector('#Contenedor');

//pero si es un elemento que existe varias veces
//entonces solo tendremos la primera ocurrencia
var x = document.querySelector('p');

//esto pondría el fondo gris al primer p que haya 
//en nuestro documento
x.style.backgroundColor = "#d9d9d9";

¿Y si queremos todos los elementos?

En ese caso tenemos que usar querySelectorAll(). El funcionamiento es igual que el de querySelector(), pero en este caso nos devolverá un objeto Nodelist que contiene todos los elementos que coincidan con el selector que hemos buscado. En este caso no tendría sentido usarlo con id, ya que debería ser un elemento único.

//Aquí tendríamos una lista estática con todos los elementos p
var x = document.querySelector('p');

¿Y cómo accedemos a los elementos del Nodelist?

Al ser una lista podemos acceder a los elementos contenidos en el Nodelist que nos devuele querySelectorAll() mediante un índice. Podemos conocer el tamaño de la lista accediendo a la propiedad length e iterar todos los elementos dentro de un bucle:

//Aquí tendríamos una lista estática con todos los elementos p
var x = document.querySelector('p');

//ahora los recorremos y, para el ejemplo, cambiaremos el color
//de fondo por un gris
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "#d9d9d9";
}