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.

PHP: ¿Cómo saber si una variable existe?

Situación clásica en PHP: En una página tengo que mostar tal o cual resultado si una variable tiene un valor concreto, pero además existe la posibilidad de que dicha variable no exista. ¿Cómo evito que me salte un mensaje de error si esta viene vacía? Pues usando el método isset().

Un ejemplo

if (isset($_GET["id"])){
     //carga los datos asociados al id
}else{
     //no carga nada
}

Ya hace tiempo explicamos aquí la diferencia entre isset(), is_null() y empty().

Añadiendo una capa extra de seguridad al login de PHPMyAdmin

He visto este artículo en Tecmint esta semana y he pensado que no estaría de más comentarlo por aquí, por aquello de que muchos de los que llegáis a este blog es porque buscáis una solución que no esté en inglés sino en castellano.

En fin, la idea es poner protección con contraseña a la propia página de login de PHPMyAdmin, esto nos obliga a poner dos contraseñas para entrar en lugar de una. Puede paracer paranoico, pero recuerda que es el corazón y el cerebro de vuestro servidor web. Como es habitual nos centraremos en la versión para Debian/Ubuntu. Los ejemplos los copio y pego del artículo original.

Bueno, lo primero es añadir estas líneas al fichero /etc/apache2/sites-available/000-default.conf

<Directory /usr/share/phpmyadmin>
AuthType Basic
AuthName "Restricted Content"
AuthUserFile /etc/apache2/.htpasswd
Require valid-user
</Directory>

Lo siguiente será usar htpasswd para generar un fichero de contraseña para una cuenta que tendrá el acceso autorizado a la página de login. Usaremos el parámetro -c para que cree la cuente o, en caso de que exista, se la cargue y genere una nueva. En el ejemplo usan tecmint como  usuario, así que copio tal cual:

# htpasswd -c /etc/apache2/.htpasswd tecmint

Tras eso nos pedirá que insertemos la nueva contraseña dos veces. El siguiente paso nos lleva  a modificar los permisos sobre el fichero para que ningún usuario indeseado pueda leerlo:

# chmod 640 /etc/apache2/.htpasswd
# chgrp www-data /etc/apache2/.htpasswd

De esta forma si intentamos acceder a nuestro PHPMyAdmin nos encontraremos con lo comentado: nos pide una contraseña para poder acceder al login, donde tendremos que meter otra para entrar. Como recomendación, para que esto sea útil no uséis el mismo usuario y contraseña para las dos.

Subida múltiple de archivos con HTML5 y PHP

Llevaba tiempo sin tocar el PHP, sumergido en el lado del mal (aka ASP y otras cosas de Microsoft), pero el otro día tuve que retomarlo. El PHP es como ese amigo de toda la vida que por vicisitudes laborales ahora sólo puedes ver una vez cada varios meses, pero con el que te sientas en la barra de un bar y parece que todavía os visteis ayer.

El caso es que tenía que modificar un formulario para que permitiera implementar una subida de múltiples archivos. ¿Cómo va esto? Bueno, vamos con el marcado HTML:

<form action="index.php" method="post" enctype="multipart/form-data">
  <input name="upload[]" type="file" multiple="multiple" />
</form>

Puntos importantes: el enctype=”multipart/form-data” en la etiqueta form para que este envíe correctamente los archivos que subimos, el definir el nombre del input como un array poniendo los corchetes [] y la etiqueta multiple=”multiple” que nos permitirá seleccionar varios items a las vez.

Vamos ahora con el PHP con explicación línea a línea:


// RECORREMOS LOS FICHEROS
for($i=0; $i<count($_FILES['upload']['name']); $i++) {
  //Obtenemos la ruta temporal del fichero
  $fichTemporal = $_FILES['upload']['tmp_name'][$i];

  //Si tenemos fichero procedemos
  if ($fichTemporal != ""){
    //Definimos una ruta definitiva para guardarlo
    $destino = "./nuestraCarpeta/" . $_FILES['upload']['name'][$i];

    //Movemos a la ruta final
    if(move_uploaded_file($fichTemporal, $destino)) {
       //imprimimos el nombre del archivo subido
       printf("Se ha subido el fichero %s.",$_FILES['upload']['name'][$i]);
    }
  }
}

Redirección WWW con .htaccess

Bueno, no es la primera vez que hablamos por aquí del fichero .htaccess. Hoy vamos a ver cómo utilizarlo para redireccionar nuestro dominio a www siempre, o viceversa. Esto nos permitirá mejorar nuestro SEO y nuestro PageRank.

La cuestión ahora es editar nuestro .htaccess con un editor de texto. Si lo que quieres es redireccionar del dominio sin www al que sí la tiene sería el siguiente código:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^aquitudominio.loquesea [NC]
RewriteRule ^(.*)$ http://www.aquitudominio.loquesea/$1 [L,R=301]

Y para lo contrario, para que siempre entre sin las www, entonces sería:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.aquitudominio.loquesea [NC]
RewriteRule ^(.*)$ http://aquitudominio.loquesea/$1 [L,R=301]

Cambiando aquitodominio.loquesea por lo que corresponda para vuestra web.

Arduino: Recuperar datos guardados en varios bytes de la memoria EEPROM

Seguimos con la memoria EEPROM de Arduino, su memoria no volátil: vimos cómo leer y escribir de forma básica, y vimos cómo guardar un dato mayor de un byte recortándolo y almacenándolo repartido en varias posiciones de memoria. Pero lo que no vimos en ese apartado fue ¿cómo lo recuperamos?

Pues básicamente vamos a hacer lo mismo que en el ejemplo anterior pero al revés, volviendo a tirar de opreaciones de desplazamiento de bit. Declararemos una variable con el tipo de lo que queremos recuperar y junto a ella otra variable contenedor, leo un byte, lo almaceno en la auxiliar, lo desplazo hacia la izquierda para que sea el más significativo y lo anexo al total con una operación OR, y finalmente limpiamos la variable auxiliar.

Enchurrado en código es similar a esto:

   long Numero = 0;
   //Variable contenedor inicializada a 0
   long Contenedor = 0;

  //recorremos el bucle hacia atrás, al revés que en el ejemplo anterior
   for (int i = sizeof(Numero); i > 0 ; i--){

     //Aquí guardamos en el contenedor
     // un byte de datos
     Contenedor = EEPROM.read(i-1);

     //Desplazamos tantos bits como toque
//en esta iteración del bucle.
//El if es porque en la última iteración
//no habría que desplazar.
     if (i != 1){
     Contenedor = Contenedor  << (8*i);
     }

     //Utilizamos la operación a nivel de bit OR para
     //añadir a nuestro resultado final
     //el valor del byte leído.
     Dato = Dato | Contenedor;

    //Reiniciamos la variable
    //auxiliar para evitar problemas
    //con datos leídos previamente
     Contenedor = 0;
   }

Este ejemplo es limitado, ya que sólo te valdría en caso de que hayas guardado un único valor repartido en bytes, como en el ejemplo anterior. En el futuro veremos cómo usar los métodos get() y put() que simplican el tema.

Como en el ejemplo anterior es necesario conocerse las operaciones de desplazamiento de bit y las operaciones lógicas a nivel de bit.

Si tienes interés en Arduino a mi me ha servido de ayuda la wiki de Arduinobot y su manual en PDF.