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.
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<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&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<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<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<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<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&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);
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.
$(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.
Este tema es un poco rebuscado, ya que muchos de los que trabajan en el ambiente de contratar personal desconocen los aspectos técnicos y es por ello que se crea la problemática de no poder diferenciar un programador experto tan fácilmente.
Yo soy de los que tienen la idea que un currículum es una carta de mentiras donde uno puede ser un súper héroe pero existen puntos clave que te sugiero puedas tomar en cuenta para detectar si un programador es senior o no:
El currículum: el currículum es un medio que presta a la persona a cometer mitomanía pero igual puede la persona misma ahorcarse sola por medio de este. Un currículum lleno de lenguajes de programación es la primera señal de que la persona no tiene nada de senior, así de simple.Es más factible un currículum lleno de herramientas, frameworks o librerías que se engloben a 2 o 3 lenguajes de programación, que todo un libro de colección de lenguajes de programación que no lo hace un experto solo un mentirosillo.
El trabajar en equipo: es poco común que una persona indique en una entrevista de trabajo, cuanto y como ha trabajado en equipo. El trabajar en equipo es de las cosas primordiales, la mayoría de desarrollos son en equipo, y si la persona demuestra que ha trabajado con equipos en lugar de ser un programador solitario (esos programadores que se sienten estrellas) es otro punto extra para demostrar que es un programador senior, un programador senior no es un súper hombre es solo una persona que sabe hacer las cosas bien.
Arquitectura de Software: el conocer conceptos fundamentales de la arquitectura de software, desde básicos como el UML, tipos de arquitecturas, patrones de diseño es tan importante como el saber programar, y a un nivel de senior es algo que debe conocerse por ley.
Base de datos: un senior sabe diseñar una base de datos de cero, también sabe utilizar procedimientos, triggers y funciones en un lenguaje relacional, eso es básico, no digo que sea un DBA pero si tener el nivel de diseñar bien la estructura de la base de datos. Si no sabe hacer esto, esta lejísimos de ser un senior.
Tipos de sistemas: las personas pueden ser senior cuando han resuelto distintos tipos de sistemas, si una persona se la ha pasado haciendo puntos de venta que siempre es lo mismo, el mismo tipo de problema, eso lo aleja demasiado a ser un senior. Un programador senior ha creado sistemas distintos, viéndose en la problemática de diferentes escenarios a los cuales pudo resolver.
Modelo de procesos: si la persona no conoce un modelo de procesos ya sea CMMI, MoProSoft u otro, es probable que no realice software de calidad (es probable porque he conocido personas que no utilizan nada de esto pero crean su propio modelo de procesos sin saberlo y su software es bueno, no excelente pero si es bueno). El no separar el desarrollo del software en procesos indica un sinónimo de ser novato.
Control de versiones: un senior sabe y conoce distintos programas o herramientas de control de versiones de código, si la persona en su vida ha utilizado esto, está lejos de ser un senior. También está lejos de ser un senior una persona que conoce programas de control de versiones pero no le sirve de mucho, nunca sube sus avances (he conocido muchos así y que han perdido hasta 3 semanas de trabajo porque se descompuso su computadora).
Documentar: las personas que no documentan no respetan su trabajo, por lo tanto no son senior (abre un software creado por ti sin documentar hace 2 años, y veras a que me refiero). Documentar el software es tan importante como codificar (esto incluye los comentarios en el código), no documentar el software es crear algo que más tarde nadie sabrá cómo se realizó y se deberá invertir tiempo en ingeniería inversa (como los platillos de marcianos de Roswell).
Honestidad: la honestidad de decir: “No, ese tiempo de entrega es imposible”, la honestidad de decirle al líder de proyecto o al cliente: “eso no está dentro del presupuesto”. La honestidad de saber las limitaciones personales representadas al tiempo del desarrollo son más benéficas que decir si a todo, se beneficia el cliente por no esperar algo que no se le dará, se beneficia el equipo de desarrollo por no involucrarse en tareas imposibles respecto al tiempo, y se beneficia la empresa ya que no quedara mal con nadie. Un senior es honesto en este aspecto.
Existen algunos otros puntos, pero estos para mi son lo primordial para identificar a un senior de un mentirosillo.
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:
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.
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="tucuenta@gmail.com";
//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í.
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.
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);
});
});
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)
La función confirm() de javascript nos permite abrir una alerta en la cual tenemos la opción de confirmar o rechazar alguna pregunta, y dependiendo de la respuesta podemos hacer una acción u otra.
Se utiliza de la siguiente manera:
//la función confirm nos regresa true si es seleccionado si, sino nos regresa false.
if(confirm("¿Eres un pato?")){
alert("cua cua")
}else{
alert("no eres pato")
}
