Pasar una función como parámetro en #javascript

Para los que aprendimos un lenguaje Orientado a Objetos antes que javascript algunas veces desconocemos la naturaleza dinámica de este lenguaje, y una de las cosas naturales es poder guardar una función en  una variable e igual enviarse esa función como parámetro.

Existen dos formas de hacerlo y la primera es haciendo una función anónima:


//creamos una función que recorre una lista
function recorreLista(funcionPasadaXParametro){

	//recorremos el arreglo/lista
	//utilizamos la palabra reservada this para referirnos al objeto que es dueño de este metodo.
	for(i=0;i<this.length;i++){

		//ejecutamos la función pasada como parametro, la cual se le envia el elemento actual
		funcionPasadaXParametro(this[i]);
	}

}

//creamos arreglo
arreglo=new Array(1,3,4,5);
//asignamos la funcion al metodo recorre
arreglo.recorre=recorreLista;

//ejecutamos la función pasandole una función anonima
arreglo.recorre(
				//FORMA 1 para pasar una función como paramétro
				//creamos la función anonima
				function(elemento){

					//mostramos el elemento actual
					alert(elemento)
				}
);

La segunda forma de pasar una función como parámetro, es pasando una función existente.


//creamos una función la cual enviaremos
function multiplicaX10(elemento){
	alert(elemento*10);
}

//FORMA 2 para pasar una función como parametro
arreglo.recorre(multiplicaX10);

Nota: Recuerden no poner los paréntesis cuando se pasa una función ya existente como parámetro, el hecho de poner los paréntesis ejecuta la función.

Listas en #javascript. (arreglos, matrices) #push, #pop, #sort, #reverse, #unshift, #forEach.

Las listas en javascript son un tema enorme pero que todo programador de javascript debe conocer a fondo. En esta entrada me enfocare a los aspectos básicos de las listas (arreglos, matrices).

Ver arreglos – curso básico de javascript.

Para crear una lista vacía se puede hacer de las siguientes dos formas:


//Forma 1: corchetes
var lista=[];

//Forma 2: new Array();
var lista=new Array();

Sea cual sea la forma que utilicen para crear una lista (arreglo) es irrelevante.

Ahora para crear una lista con elementos desde el inicio se puede hacer de la siguiente manera:


//Forma 1: corchetes
var lista=new Array("ganzo","perro");

//Forma 2: new Array();
var lista=["ganzo","perro"]

Ahora para recorrer una lista, la mejor manera es por medio del método forEach, el cual itera con cada elemento del arreglo. Este método recibe una función como parámetro, y se utiliza de la siguiente manera:


//creamos nuestra lista
var lista=["ganzo","perro"];

//recorre elemento por elemento y los muestra con alert()
//el atributo i es el elemento actual en cada iteración.

lista.forEach(function(i){
	alert(i)
});

Para agregar un elemento al final del arreglo se utiliza el método push(), y para agregar un elemento al inicio del arreglo se utiliza el método unshift(). En el siguiente ejemplo muestro como se utilizan:


var lista=["ganzo","perro"];

//agregamos pato al final de la lista
lista.push("pato");

//agregamos pez al inicio de la lista
lista.unshift("pez");

//si mostramos nuestra lista ahora se veria así
//>> pez, ganzo, perro, pato

La función pop() elimina el elemento que esta al final (una pila):


var lista=["ganzo","perro","palomo","gato"];

lista.pop();

//si mostramos nuestra lista ahora se veria así
//>> ganzo, perro, palomo

Y por último los métodos sort() y reverse() nos sirven para ordenar nuestra lista ya sea ascendente o descendentemente:


var lista=[5,4,1,9];

lista.sort();
//>> 1, 4, 5, 9

lista.reverse();
//>>9, 5, 4, 1

Todas estas funciones son básicas y nos sirven para el buen manejo de los objetos, y conocerla es obligación de todo programador de javascript.

Existen muchísimas funciones más de listas pero para eso habrá más entradas.

El método map de javascript (listas, matrices, arreglos)

El método map de javascript sirve para llamar una función la cual se ejecutara con cada uno de los elementos de un arreglo (matriz, lista). Este método recibe una función como argumento la cual ejecutara n veces (el número de elementos en nuestro arreglo), y regresara un nuevo arreglo con los resultados.

Su función es la siguiente:


//lista con numeros
var lista=[1,4,9,16,25]

//la función map es inmutable por lo cual debemos asignar lo que regresa a otra lista
//en este caso se lo asignamos a la misma lista
var lista=lista.map(function(elemento){
	//sacamos la raíz cuadrada del elemento
	return Math.sqrt(elemento);
});

//Ahora recorremos con foreach la lista
//foreach funciona de manera similar solo que no regresa la lista
lista.forEach(function(i){

	alert(i)
	//muestra 1,2,3,4,5
})

También podemos llamar una función existente la cual reciba un argumento el cual será nuestro elemento:


//lista con numeros
var lista2=[1,2,3,4,5]

//función que multiplica un numero por 10
function MultiplicaX10(elementoLista){

	return 	elementoLista*10
}

//la función mapa puede enviar parametros a la función que se ejecutara
//se hace de la siguiente manera
var lista2=lista2.map(MultiplicaX10,10);

//mostramos el resultado
lista2.forEach(function(i){

	alert(i)

	//muestra 10,20,30,40,50
})

Nota: La función foreach tiene un funcionamiento parecido, solo que no regresa un arreglo.

Codificar y decodificar base64 en #javascript

Para realizar la codificación y decodificación de base64 en javascript, vamos a utilizar el siguiente código comprimido que ya contiene todo lo necesario, pueden copiarlo en un archivo con extensión “js” o ponerlo en la página web donde va a utilizarlo.

Código Necesario, debe copiarse toda la siguiente línea:


//COPIAR ESTE CÓDIGO
//comienzo de código
var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f&amp;lt;e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n&amp;gt;&amp;gt;2;o=(n&amp;amp;3)&amp;lt;&amp;lt;4|r&amp;gt;&amp;gt;4;u=(r&amp;amp;15)&amp;lt;&amp;lt;2|i&amp;gt;&amp;gt;6;a=i&amp;amp;63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9+/=]/g,"");while(f&amp;lt;e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s&amp;lt;&amp;lt;2|o&amp;gt;&amp;gt;4;r=(o&amp;amp;15)&amp;lt;&amp;lt;4|u&amp;gt;&amp;gt;2;i=(u&amp;amp;3)&amp;lt;&amp;lt;6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/rn/g,"n");var t="";for(var n=0;n&amp;lt;e.length;n++){var r=e.charCodeAt(n);if(r&amp;lt;128){t+=String.fromCharCode(r)}else if(r&amp;gt;127&amp;amp;&amp;amp;r&amp;lt;2048){t+=String.fromCharCode(r&amp;gt;&amp;gt;6|192);t+=String.fromCharCode(r&amp;amp;63|128)}else{t+=String.fromCharCode(r&amp;gt;&amp;gt;12|224);t+=String.fromCharCode(r&amp;gt;&amp;gt;6&amp;amp;63|128);t+=String.fromCharCode(r&amp;amp;63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n&amp;lt;e.length){r=e.charCodeAt(n);if(r&amp;lt;128){t+=String.fromCharCode(r);n++}else if(r&amp;gt;191&amp;amp;&amp;amp;r&amp;lt;224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&amp;amp;31)&amp;lt;&amp;lt;6|c2&amp;amp;63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&amp;amp;15)&amp;lt;&amp;lt;12|(c2&amp;amp;63)&amp;lt;&amp;lt;6|c3&amp;amp;63);n+=3}}return t}}

//fin de código

Ahora muestro un ejemplo para realizar la codificación y decodificación:

Codificar en base64:


//codificar en base64
//variable con contenido "patito"
var variable="patito"

//codificamos a base64 utilizando Base64.encode
var variableBase64=Base64.encode(variable)

//imprimimos el valor
document.writeln(variableBase64);
//imprime cGF0aXRv

Decodificar en base64:


//decodificar en base64
var variableBase64="cGF0aXRv"

//decodificamos a base64 utilizando Base64.decode
var variable=Base64.decode(variableBase64)

//imprimimos el valor
document.writeln(variable);

Marcar activa una opción de un menú al darle clic con #jquery

Ejemplo (da clic en una opción).

Para hacer que un menú nos indique cual es la opción activa, o la sección en que nos encontramos en una página web podemos hacer uso de los selectores de jquery y la función addClass y removeClass.

A continuación anexo el código que permite hacer esto.

Css


#menu .opcion{
	width:20%;
	float:left;
	cursor:pointer;
	background:#ddd;
	color:#000;
	padding:5px 0px 5px 0px;
	text-align:center;

}

#menu .opcionActiva{

	background:#000;
	color:#fff;
}

Html


<div id="menu">
    	<div class="opcion">opción 1</div>
       	<div class="opcion">opción 2</div>
        <div class="opcion">opción 3</div>
        <div class="opcion">opción 4</div>
        <div class="opcion">opción 5</div>
</div>

Javascript


$(document).ready(function(){

	//selector a la clase opcion para darle función al evento click
	$(".opcion").click(function(){

		//eliminamos la clase activa por si una opción la contiene
		$(".opcion").removeClass("opcionActiva");

		//asignamos la clase opcionActiva a la opción presionada
		$(this).addClass("opcionActiva")

	})
})

Simplemente hago uso de addClass y removeClass de jquery para añadir o remover la clase de CSS opcionActiva.

La función addClass sirve para agregar una clase de css a un elemento y la función removeClass sirve para lo contrario.

¿Cómo obtener los correos de una cuenta de Gmail con php? #imap

En php existe un módulo llamado imap dedicado a las conexiones a correos, este módulo contiene un conjunto de funciones que nos ayudan a realizar esta tarea fácilmente.

Pero antes tenemos que cambiar la siguiente configuración en nuestra cuenta de Gmail para permitir a una aplicación externa conectarse.

Primero(con sesión creada en gmail para hacer estos cambios claro) debemos activar la opción de permitir conexiones de aplicaciones externas en la siguiente liga:

https://www.google.com/settings/security/lesssecureapps

Seleccionamos Activar y Guardar.

La segunda configuración es  para que Gmail nos permita conectarnos por el protocolo IMAP. Basta con que vayamos a la configuración de Gmail y seleccionemos la siguiente opción y demos guardar.

configuracion imap

En el siguiente código, realizo la conexión a una cuenta de Gmail por medio del protocolo imap y a la vez obtengo los asuntos de los correos.

Clase

class ObtieneMails{

	//usuario de gmail, email a donde deseamos conectarnos
	var $user="[email protected]";
	//password de nuestro email
	var $password="tuPasswordDeGmail";
	//inforrmación necesaria para conectarnos al INBOX de gmail,
	//incluye el servidor, el puerto 993 que es para imap, e indicamos que no valide con ssl
	var $mailbox="{imap.gmail.com:993/imap/ssl/novalidate-cert}INBOX";

	var $fecha="01-MAR-2015"; //desde que fecha sincronizara

	//metodo que realiza todo el trabajo
	function obtenerAsuntosDelMails(){

		//realizamos la conexión por medio de nuestras credenciales
		 $inbox = imap_open($this->mailbox,$this->user,$this->password) or die('Cannot connect to Gmail: ' . imap_last_error());

		  //con la instrucción SINCE mas la fecha entre apostrofes ('')
		  //indicamos que deseamos los mails desde una fecha en especifico
		  //imap_search sirve para realizar un filtrado de los mails.
		 $emails=imap_search($inbox,'SINCE "'.$this->fecha.'"');

		 //comprbamos si existen mails con el la busqueda otorgada
		 	if($emails) {
				 //ahora recorremos los mails
				 foreach($emails as $email_number)
				{
					 //leemos las cabeceras de mail por mail enviando el inbox de nuestra conexión
					 //enviando el identificdor del mail
					$overview=imap_fetch_overview($inbox,$email_number);

					//ahora recorremos las cabeceras para obtener el asunto
					foreach($overview as $over){

						//comprobamos que exista el asunto (subject) en la cabecera
						//y si es asi continuamos
						if(isset($over->subject)){

							//aqui pasa algo curioso
							//el asunto vendra con caracteres raros
							//para ello anexo una función que lo limpia y lo muestra ya legible
							//en lenguaje mortal
							$asunto=$this->fix_text_subject($over->subject);

							//y aqui simplemente hacemos un echo para mostrar el asunto
							echo utf8_decode($asunto)."n";
						}
					}

				}
			}

	}

	//arregla texto de asunto
	function fix_text_subject($str)
	{
		$subject = '';
		$subject_array = imap_mime_header_decode($str);

		foreach ($subject_array AS $obj)
			$subject .= utf8_encode(rtrim($obj->text, "t"));

		return $subject;
	}

}

Ejecución

//creamos el objeto
$oObtieneMails= new ObtieneMails();

//ejecutamos el metodo
$oObtieneMails->obtenerAsuntosDelMails();

 la función imap_search contiene muchísimas variantes para realizar filtrados en los correos y todos los pueden ver dando clic aquí.

Realizar una petición Post con Php enviando Json como contenido del mensaje.

Para realizar una petición Post enviando contenido Json en php, podemos utilizar la curl_init() la cual nos crea una sesión de tipo cURL con la cual podemos establecer conexión a una url.

Junto con la función curl_init(), debemos utilizar la función curl_setopt() en la cual enviaremos las opciones de nuestra petición y el contenido json. Y también utilizaremos la función curl_exec() que es la que se encarga de mandar el mensaje.

Y para dejar todo esto claro a continuación un código sencillo en el cual voy comentando paso a paso que se está realizando:


                //url de la petición
		$url = 'https://pato.com/login';

		//inicializamos el objeto CUrl
		$ch = curl_init($url);

		//el json simulamos una petición de un login
		$jsonData = array(
			'usuario' => 'pato', //código fijo
			'password' => 'pato123456'
		);

		//creamos el json a partir de nuestro arreglo
		$jsonDataEncoded = json_encode($jsonData);

		//Indicamos que nuestra petición sera Post
		curl_setopt($ch, CURLOPT_POST, 1);

		 //para que la peticion no imprima el resultado como un echo comun, y podamos manipularlo
		 curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

		//Adjuntamos el json a nuestra petición
		curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonDataEncoded);

		//Agregamos los encabezados del contenido
		curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));

		 //ignorar el certificado, servidor de desarrollo
                  //utilicen estas dos lineas si su petición es tipo https y estan en servidor de desarrollo
		 //curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
                 //curl_setopt($process, CURLOPT_SSL_VERIFYHOST, FALSE);

		//Ejecutamos la petición
		$result = curl_exec($ch);

Nota: La línea comentada: “curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE)” sirve para peticiones a servidores https desde un servidor de desarrollo el cual no tiene modo seguro.

¿Cómo animar el scroll del navegador al dar clic en una liga o menú? #jquery #javascript

Ver ejemplo.

Para realizar un movimiento del scroll en el navegador de forma animada, vamos a hacer uso de la función anímate de jquery(puedes visitar mi entrada donde hablo a fondo de esta función) y también haremos uso de la función offset para obtener el valor de nuestro elemento destino.

El siguiente código hace posible la animación del scroll de una manera rápida y fácil:

Html


<!-- menu para dar clic -->
    <div style="height:50%; width:120px; position:fixed; top:100px; font-size:20px; background:#000; color:#fff; opacity:.5; padding:10px;">
    	<a href="#opcion1"  class="scroll">Ir a opcion 1</a><br />
        <a href="#opcion2"  class="scroll">Ir a opcion 2</a><br />
        <a href="#opcion3"  class="scroll">Ir a opcion 3</a><br />
        <a href="#opcion4"  class="scroll">Ir a opcion 4</a><br />
        <a href="#opcion5"  class="scroll">Ir a opcion 5</a><br />
        <a href="#opcion6"  class="scroll">Ir a opcion 6</a><br />
    </div>

    <!-- los elementos destino -->
    <div style="height:500px; background:#fff;">
    	<p id="opcion1">Un pato</p>
    </div>
     <div style="height:500px; background:#eee;">
    	<p id="opcion2">Dos pato</p>
    </div>
     <div style="height:500px; background:#ddd;">
    	<p id="opcion3">Tres pato</p>
    </div>
     <div style="height:500px; background:#ccc;">
    	<p id="opcion4">Cuatro pato</p>
    </div>
     <div style="height:500px; background:#bbb;">
    	<p id="opcion5">Cinco pato</p>
    </div>
     <div style="height:500px; background:#aaa;">
    	<p id="opcion6">Seis pato</p>
    </div>

Javascript


$(document).ready(function(){	
  $(".scroll").click(function(event){					 
 //bloqueamos la función del anchor original					 
 event.preventDefault();					 
 //dirigimos de manera animada al id del anchor					 
 $('html,body').animate({											 
 //le indicamos al scroll vertical que se dirija al objeto con el id											 
 //guardado en el anchor a su posición top.											 
 scrollTop:$(this.hash).offset().top											 
 },1000);	
});
});

Ver ejemplo.

Nota: la función offset nos sirve para obtener la posición de un elemento, en este caso el top de elemento respecto a la página.

¿Cómo utilizar prompt() de javascript? Mensaje de alerta con input text para escribir

La función prompt(), es una función de alerta de javascript, la cual tiene un comportamiento de mostrar un mensaje y a su vez un input text(caja de texto) en el cual el usuario puede capturar un texto. El texto capturado puede ser guardado en una variable y con esta realizar la acción deseada.

Se utiliza de la siguiente manera:


//El primer parametro es el texto a mostrar, el segundo es el texto por defecto en el input text
var texto = prompt("¿Cual es tu nombre?", "Texto por defecto");

//comparamos el texto obtenido, sea distinto a el texto por defecto
if(texto!="Texto por defecto")
  alert("Tu nombre es: "+texto)