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";
}

jQuery: Poner el foco en el siguiente elemento usando una clase

Os cuento: un cliente pide que en un formulario que está rellenando, con varios campos de texto muy pequeños para un solo carácter, el foco salte de forma automática al siguiente campo cada vez que cubre uno. Es decir, en cada evento de levantar la tecla salta al siguiente. La cosa parecía simple usando la función next() de jQuery:

$(".cuadrito").keyup(function() {
  $(this).next('.cuadrito').focus();	
});

La función next() de jQuery salta al siguiente elemento “hermano” que aparezca. ¿Qué quiere decir hermano? Pues que tengan el mismo padre, esto es que estén contenidos en el mismo elemento del DOM. Y por eso esta práctica y elegante solución no me valía, porque resulta que los inputs están dentro de una tabla, de forma que al cambiar de celda cambia el “padre” en el DOM y ya no salta el foco. ¿Qué hacer entonces? Lo solucioné con la función index():

$(".cuadrito").keyup(function() {	            
  var ind = $(".cuadrito").index(this);
  $(".cuadrito").eq(ind + 1).focus();
});

¿Qué hicimos aquí? Creo que en el pasado ya vimos que jQuery nos permite tratar a los elementos como si de un array se tratase. Simplemente estoy mirando en la primera fila qué índice tendría el elemento en el que nos encontramos y, en la siguiente, poniendo el foco en el posterior sumando 1 al índice.

Cálculo del logaritmo y logaritmo neperiano en Javascript.

Ayer me mandaban este chiste por Whatsapp:

Y como soy así de tocahuevos, que hasta llevo un reloj calculadora Casio, les mandé de vuelta el resultado del logaritmo neperiano de 1437. Y sí, estoy escribiendo esto para cuando me lo vuelvan a mandar, para contestar con este enlace, que me vale tanto para la sección de programación como para la de ciencia.

El elcálculo de logaritmos es la operación inversa a la exponenciación de la base del logaritmo. El desarrollo de calculadoras y ordenadores ha hecho que las tablas de logaritmos, que se usaban hace años para simplificar operaciones complejas, hayan perdido mucha importancia para los estudiantes de matemáticas en la actualidad. Este blog nos da una entrada muy intersante sobre el uso de los logaritmos.

La clase Math de Javascript tiene varias funciones para calcular un logaritmo. Para el logaritmo natural (logaritmo cuya base es el número e, un número irracional cuyo valor aproximado es 2,7182818284590452353602874713527):

//vamos a calcular el logaritmo de 5
var logaritmo = Math.log(5);

¿Y para obtener el logaritmo en base 10?

//vamos a calcular el logaritmo de 5
//pero con base decimal
var logaritmo = Math.log10(5);

¿Y para obtener el logaritmo en base 2?

//vamos a calcular el logaritmo de 5
//pero con base binaria
var logaritmo = Math.log2(5);

¿Y el logaritmo neperiano? Bueno, en lenguaje coloquial suele llamarse logaritmo neperiano al logaritmo natural, pero si nos ponemos precisos son dos conceptos disintos. El logaritmo neperiano, nombrado en honor del matemático John Napier, se calcularía con la fórmula -107*ln(x/-107):

//vamos a calcular el logaritmo neperiano
//de 5.
var logaritmo = Math.pow(-10,7)*Mat.log(5/Math.pow(-10,7))

Como puedes ver los logaritmos neperianos son esencialmente logaritmos naturales con la coma desplazada siete posiciones hacia la derecha y el signo invertido.

Calculadora de Ohm en Javascript

La ley de Ohm fue postulada por el físico y matemático Georg Simon Ohm, es una ley básica de los circuitos eléctricos. Nos dice que la diferencia de potencial V que aplicamos entre los extremos de un conductor es proporcional a la intensidad de la corriente I que circula por él. Introduce la noción de resistencia eléctrica R: el factor de proporcionalidad que aparece en la relación entre diferencia potencial e intensidad.

En este ejemplo vamos a hacer una función de Javascript que puede recibir tres parámetros y, según el que reciba vacío, devolverá un resultado u otro valiéndose de la fórmula general de la ley de Ohm, que resumimos en la fórmula V=R*I.

function calculadoraOhm(V,R,I){
  //si la diferencia potencial va vacía
  //en ese caso calculamos el voltaje.
  if(V==""){
    return parseFloat(R)*parseFloat(I);
  }
  //si la resistencia va vacía
  //en ese caso calculamos el voltaje.
  if(R==""){
    return parseFloat(V)/parseFloat(I);
  }
  //si la intensidad va vacía
  //es la que calculamos.
  if(I==""){
    return parseFloat(V)/parseFloat(R);
  }
  //si no va nada vacío devuelve una cadena vacía.
  return "";
}

Expresiones regulares en Javascript para validar fecha u hora.

Vamos con una entrada rápida en Javascript. Ya hace años que revisamos el tema de las expresiones regulares, pero hoy vamos a ver un ejemplo concreto ¿Cómo hago una expresión regular que me valide un formato de fecha dd/mm/aaaa?

Pues sería esta:
/^\d{1,2}\/\d{1,2}\/\d{2,4}$/

Ok ¿Y como valido un formato de hora tipo hh:mm:ss? Pues con esta:
/^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$/

Ordenación de burbuja en Javascript

El método del intercambio directo, también llamado ordenación de burbuja (bubble sort en inglés), es un algoritmo de ordenamiento extremadamente sencillo que suele ser un ejercicio clásico en los cursos de programación para entender el uso de los bucles anidados en otros bucles. Funciona revisando cada elemento de la lista que va a ser ordenada con el siguiente, intercambiándolos de posición si están en el orden equivocado. Esto hace necesario revisar varias veces toda la lista, hasta que no se necesiten más intercambios. Por ello se trata de un algoritmo lento y poco eficiente.

La implementación de dicho algoritmo en una función de Javascript que recibe un array desordenado sería la siguiente:

//la función recibe un array desordenado
function burbuja(arr) {
 //Primer bucle, recore todo el array
 for (var i = 0; i &lt; arr.length; i++) {
   //segundo bucle, va ordenando los elementos.
   for(var j=0; j  arr[j + 1]) {
       if(arr[j]>arr[j+1]){
         var el1 = arr[j]; 
         arr[j] = arr[j + 1]; 
         arr[j + 1] = el1;
       }      
     }
   }
  }
  //al acabar la ordenación devulve el array,
  //ahora ordenado
  return arr;
}