emmgfx

Base64 (encode y decode) en Javascript

Me he pasado un rato buscando alguna función para codificar y decodificar (que no encriptar) cadenas de texto en base64, de la misma forma que lo haría en PHP.

En PHP es algo así:

<?PHP
$cadena = base64_encode('w00t');
echo $cadena; # dzAwdA==
$cadena = base64_decode('dzAwdA==');
echo $cadena; # w00t
?>

Y en Javascript, con el código que pondré a continuación, sería algo así:

<script>
var cadena = Base64.encode('w00t');
alert(cadena); // dzAwdA==
var cadena = Base64.decode('dzAwdA==');
alert(cadena); // w00t
</script>

Seguir leyendo y ver ó escribir comentarios →

La función str_replace() de PHP en Javascript

La función str_replace() de PHP tiene un uso muy sencillo, se le entregan 3 parámetros; la cadena a buscar, la cadena por la que se substituirá, y la cadena sobre la que se va a trabajar. Por ejemplo…

$cadena = 'Prefiero el helado de frutas del bosque';
echo $cadena;
// Prefiero el helado de frutas del bosque

$cadena = str_replace('frutas del bosque','pistacho',$cadena);
echo $cadena;
// Prefiero el helado de pistacho

Más información sobre str_replace() en la página de PHP.

Para hacerlo en Javascript se haría así:

cadena = 'Prefiero el helado de frutas del bosque';
alert(cadena);
// Prefiero el helado de frutas del bosque

cadena = cadena.replace(/frutas del bosque/g,"pistacho");
alert(cadena);
// Prefiero el helado de pistacho

Si sólo se quiere cambiar la primera coincidencia, en vez de utilizar /frutas del bosque/g debería ser "frutas del bosque". El cambio entre //g y "" es aparentemente absurdo y me ha costado varias horas de trabajo… pero de errores se aprende.

str_replace() de PHP en Javascript

El otro día me dio por buscarlo y me di cuenta de que la gente estaba haciendo funciones propias para imitar a str_replace de php en javascript. Es curioso, ya que javascript tiene su propia versión de forma nativa.

Por ejemplo para cambiar un guión bajo por un espacio:

// En ocasasiones puede interesar utilizar nbsp en vez de un espacio
cadena = cadena.replace(/_/g," ");
// El mismo ejemplo con un espacio normal
cadena = cadena.replace(/_/g," ");

Ese ejemplo es utilizando expresiones regulares, pero también se puede utilizar con porciones de cadena:

cadena = 'Buenos tiempos';
cadena = cadena.replace("Buenos","Malos");
alert(cadena); // Mostraría "Malos tiempos"

Recomiendo visitar esta página para aprender a utilizar las expresiones regulares de javascript y leer los comentarios de este articulo para entender mejor el uso de replace. Antes de que me crucifiquen, ya sé que este articulo es muy simple y no explica con demasiada amplitud el uso de replace (de ahí que proponga dos enlaces para entenderlo mejor).

Aprender jQuery, 1: Qué és y por qué usarlo.

Qué és

jQuery es una librería de JavaScript, rápida y concisa que simplifica el tratamiento de documentos HTML, el control de eventos, animaciones, e interacciones AJAX para un desarrollo web rápido. jQuery está diseñado para cambiar la manera en que se escribe JavaScript.

Así (pero en inglés traducido por mi, espero que bien) es como se describe jQuery en la portada de su página oficial.

Aunque haya quien diga que no, yo creo que jQuery es una de las herramientas (por llamarlo de alguna manera) mejor documentadas que hay. Con un mínimo de interés y un poco de imaginación se puede entender rápidamente para qué sirve e imaginar en qué se podría aplicar. Eso sin contar la gran cantidad de recursos y ejemplos que existen, incluso en la misma documentación oficial de la librería. Así que en realidad, ni siquiera hace falta imaginación para entenderlo.

Por qué usarlo

Después de usar jQuery, pensar en dejar de utilizarlo y tener que escribir JavaScript sin algún framework (ya sea jQuery, mootools o cualquier otro) me parece una locura. En sério, sólo de pensar en verme obligado a usar XMLHttpRequest para los temas de AJAX y no poder recurrir a jQuery empiezo a idear excusas para evitarlo.

Y sii no te fias, puedes tener la certeza de que es una librería de calidad, y para demostrarlo en su portada nos recuerdan que Google, Dell, Digg, Technorati, Mozilla, WordPress, Drupal y una infinidad más de sitios utilizan su framework.

Por ejemplo, para hacer una carga de página externa con ajax, usando jQuery sería algo así:

$("#idcapa").load('url/relativa/fichero.php');

Y hacer algo parecido con JavaScript llano sería:

XHConn - Simple XMLHTTP Interface - bfults@gmail.com - 2005-04-08
Code licensed under Creative Commons Attribution-ShareAlike License

http://creativecommons.org/licenses/by-sa/2.0/

*/
function XHConn(){
  var xmlhttp, bComplete = false;
  try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
  catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
  catch (e) { try { xmlhttp = new XMLHttpRequest(); }
  catch (e) { xmlhttp = false; }}}
  if (!xmlhttp) return null;
  this.connect = function(sURL, sMethod, sVars, fnDone) {
    if (!xmlhttp) return false;
    bComplete = false;
    sMethod = sMethod.toUpperCase();
    try {
      if (sMethod == "GET"){
        xmlhttp.open(sMethod, sURL+"?"+sVars, true);
        sVars = "";
      }else{
        xmlhttp.open(sMethod, sURL, true);
        xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
        xmlhttp.setRequestHeader("Content-Type",
          "application/x-www-form-urlencoded");
      }
      xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && !bComplete){
          bComplete = true;
          fnDone(xmlhttp);
        }};
      xmlhttp.send(sVars);
    }
    catch(z) { return false; }
    return true;
  };
  return this;
}

var myConn = new XHConn();
if (!myConn) alert("XMLHTTP not available. Try a newer/better browser.");
var include_terminado = function (oXML) { document.getElementById('include').innerHTML = oXML.responseText; };
function include_dinamico (url){
	document.getElementById('include').innerHTML = "";
	myConn.connect("include.php", "GET", "variable="+url, include_terminado);
}

<a onclick="include_dinamico('hola');" href="#">Link</a>

Además de AJAX, jQuery trabaja con animaciones, DOM, eventos, y permite el uso de plug-ins. Y aunque la sintaxis pueda parecer extraña al principio, es bastante sencilla de entender y cuando se hacen un par de ejercicios en plan “copiar, pegar y modificar” se entiende rápidamente como funciona.

Y cuando me apetezca (dentro de un rato, mañana o quizá nunca), explicaré la sintaxis y otras cosas “importantes”.