Las funciones setInterval() y setTimeout() en javascript.

Feliz 2017 a todos, esta es la primera entrada del año. Una cuestión sencilla de javascript ¿para qué valen las funciones setInterval() y setTimeout() y en qué se diferencian?

Pues ambas funciones tienen el mismo objetivo: ejecutar otra función pasado un intervalo de tiempo. ¿En qué se diferencian? En que setTimeout() se ejecutará solamente una vez, mientras que setInterval() lo hará en repetidas ocasiones.

Por ejemplo, podríamos usar setInterval() para que se mostrara en pantalla cuántos segundos llevamos desde que se cargó la página:

/*definimos una función que cada ponga en un
cuadro de texto un valor numérico, sumando uno cada
vez que la invocamos*/
function showSeconds(){
 var val = document.getElementById("tiempo").value;
 document.getElementById("tiempo").value = parseInt(val)+1;
}
/*usamos setTimeout() para que se
ejecute cada segundo (1000 milisegundos como parámetro)*/
setInterval(showSeconds,1000);

O podríamos usar setTimeout() para dar un aviso al usuario a los diez segundos de entrar

/*función que sólo hace un alert*/
function funcAvisa(){
 window.alert("Pareces interesado en esta sección");
}
/*se la llama a los 10 segundos*/
setTimeout(funcAvisa,10000);

Así funcionan los dos temporizadores de Javascript.

Declarar una función en Javascript

Hemos hablado mucho de javascript en este blog, pero a veces nos dejamos por explicar cosas básicas ¿Cómo se declara una función? y ya puestos ¿para qué sirve hacerlo?

Bueno, la utilidad de una función es no tener que repetir el mismo bloque de código varias veces. Nos permite agrupar externamente una serie de instrucciones para luego llamarla desde cualquier parte del código.

Para declarar una función debemos usar la palabra reservada function. Tras ella, separada por un espacio, ponemos el nombre que queremos darle seguido de los párametros que recibirá ,si es que recibe alguno, que pondremos entre paréntesis. Abriremos unas llaves y dentro insertaremos el código de la función. Si la función debe devolver un valor esto lo definiremos con la palabra return, que además finalizará la función. Vamos con un ejemplo práctico, una función que calcula un precio final aplicándole unos valores fijos al que recibe:

function precioFinal(precio,descuento){
  var ivaCultural = 1.21;
  var gastosEnvio = 10;
  var precioFinal = (precio*ivaCultural*(100-descuento/100))+10;
  return precioFinal.toFixed(2);
}

La función recibiría un precio y un descuento en porcentaje, le añadiría el IVA, le aplicaría el descuento, le sumaria los gastos de envío y devolvería el resultado rendondeado a dos decimales. En el código llamaríamos así a la función:

var precio = precioFinal(449.99,10);

Como el intérprete de javascript de los navegadores busca en primer lugar la declaración de variables y de funciones una función puede aparecer en el código antes de ser declarada.

Javascript: mostrar número con decimales en formato de moneda.

Seguro que más de una vez has estado trabajando con Javascript y has necesitado calcular un importe monetario. Y seguro que más de una vez a aplicar un descuento porcentual te ha salido un churro con 7 decimales (aprox) ¿Cómo se puede solucionar esto? pues con el método toFixed().

El método toFixed() existe de Javascript 1.5, se puede aplicar sobre todos los objetos numéricos y devuelve una cadena con el número seguido de tantos decimales como le pasemos a la función como parámetro. Si la cantidad de decimales que queremos es menor que la del número al que aplicamos el método realizará una operación de redondeo, en caso de que sea mayor entonces rellenará con ceros. Si no le pasamos ningún número como parámetro entonces redondeará a entero.

var n = 5.56998767123;
var num1 = n.toFixed();
var num2 = n.toFixed(3);
var num3 = n.toFixed(2);

//num1 tendrá el valor 6
//num2 tendrá el valor 5.570
//num3 tendrá el valor 5.57

Por tanto, si necesitas un formato monetario te basta con un .toFixed(2) para mostrar sólo dos decimales.

Usando rel=”noopener” para evitar ataques crossdomain en páginas abiertas con target=”_blank”

Pues era un tema que desconocía hasta que lo vi ayer en el blog de Chema Alonso, pero por lo que veo lleva rulando al menos desde el mes de mayo. ¿De qué estoy hablando? Te comento con un ejemplo (aunque puedes leerlo mejor explicado en los links previos): supongamos que quieres que un link se abra en una nueva pestaña, así que le pones target=”_blank”. Al hacerlo de esta forma la página que has abierto en la nueva pestaña, mediante el selector window.opener puede modificar cosas a base de Javascript en la página desde la que se abrió el enlace. La mayoría de navegadores modernos limitan las posibilidades de esto y bloquean muchas de las acciones invocadas desde la ventaja hija sobre la padre, pero lo que se han dejado sin proteger es que dicha ventana hija puede acceder a la propiedad window.opener.location, y de esta forma mandarnos a una página desde la que hacer un ataque de phising.

¿Solución? Bueno, si es un enlace basta con el modificador noopener y el noreferrer:

<a href="paginanueva.html" target="_blank" rel="noopener noreferrer"/>

El noreferrer es necesario porque Mozilla Firefox no soporta noopener.

¿Y qué pasa si abrimos la ventana mediante Javascript utilizando el método window.open()? Pues que nos encontramos la misma vulnerabilidad. ¿Cómo la solucionamos? Tal que así (copio este ejemplo):

var newWnd = window.open();
newWnd.opener = null;

Definir el ancho y el alto de un iframe con Javascript

Una entrada rápida ¿cómo definimos el alto y el ancho de un iframe con Javascript? Pues sirviéndonos de sus propiedades width y height:

//ejemplo: definimos iFrame con
//600px de alto y 800 de ancho
document.getElementById("miIFrame").height = "600";
document.getElementById("miIFrame").width= "800";

Basta con pasarle el valor en píxeles del tamaño que queremos darle en forma de cadena.

jQuery: pulsar F11 y evitar entrar en modo pantalla completa

Un cliente tenía una petición curiosa: quería que su web mostrara un menú al pulsar la tecla F11 (habían migrado de una aplicación de escritorio a una web y estaban acostumbrados a pulsar F11 y que saliera eso) ¿Qué ocurre? Pues que F11 es la tecla que activa el modo a pantalla completa del navegador.

¿Se puede hacer esto? Sí, tenía mis dudas pero sí. Tenía mis dudas porque las teclas de función no siempre pueden sobreescribirse para limitar el comportamiento del navegador (por ejemplo, creo que con F5 o con F1 no sería posible). Pero F11, al menos en IE10, Chrome y Firefox sí puede ser deshabilitada. Os dejo el código, es javascript usando la librería jQuery:

$(document).keydown(function(event) {
  event.preventDefault();
    if (event.keyCode == 122) { // 122 es el código de F11
      event.originalEvent.keyCode = 0;
      window.alert("no dejo maximizar");
    }
});

Lógicamente, en lugar del window.alert ahí ya pondríais el código que queráis ejecutar en vuestra aplicación web.

Javascript: convertir los saltos de línea de un textárea en un salto de línea html.

Se daba el caso hoy de que tenía que recoger el texto extraído de un textarea, mediante javascript, y mostrarlo dentro de un div al pulsar un botón en pantalla. ¿Y qué problema había? Que los saltos de línea desaparecían. ¿Cómo se puede solucionar? De dos formas: Hay con vertir el caracter ASCII(10), que se representa con el símbolo \n en una etiqueta br, o como otra opción meter el texto entre etiquetas pre para que sea interpretado por el navegador como texto preformateado. Veamos el ejemplo:

//usando jQuery
var texto = $('#idDelTextarea').val();
texto = texto.replace(/\n/g, "<br />");
$("#idDelDiv").html(texto);

//sin jQuery
var texto = document.getElementById("idDelTextarea").value;
texto = texto.replace(/\n/g, "<br />");
document.getElementById("idDelDiv").innerHtml = texto;

//con <pre>
//recogemos el texto con alguno de los métodos anteriores
texto = "<pre>" + texto + "</pre>";
//y lo metemos en el div