Acceder a las propiedades de un IFRAME mediante Javascript

Si necesitamos acceder a las propiedades de un iframe que esté incorporado en nuestra página lo podemos hacer de una forma muy sencilla con la siguiente función:

function getIframe(id){
  var myframe = document.getElementById(id);
  var content = (myframe.contentWindow || myframe.contentDocument);
  return content.document;
}

A esta función le pasamos el id del iframe y obtendremos un objeto que podremos manejar y cambiar por ejemplo el color de fondo. Para ponerle el fondo de color gris lo haríamos así:

  var myframe = getIframe('myframe');
  myframe.body.backgroundColor = '#CCC';
}

La propiedad contentDocument es soportada por los principales navegadores excepto Internet Explorer, que solamente la soporta a partir de la versión 8 si está especificado !DOCTYPE. Para las versiones anteriores de Internet Explorer hay que usar contentWindow.

Ordenar array UTF-8 con Javascript

Ordenar arrays con Javascript es una función muy habitual que ejecutamos los programadores web. Sin embargo, existen ocasiones en que lo que queremos ordenar lleva tildes, eñes o cualquier grafía de otro alfabeto.

Cuando ocurre esto, el método habitual de ordenación sort() no sirve ya que nos los ordena en último lugar. Veamos un ejemplo:

var myarray = ['Álex', 'Juan', 'José', 'Antonio', 'Carlos'];
myarray.sort(); // Queda ordenado como Antonio, Carlos, José, Juan, Álex

Para este tipo de caracteres necesitamos una función específica para ordenar, que podría convertirse en nuestro método sort() si nuestro alfabeto habitual lleva caracteres Unicode. Para realizar la ordenación UTF-8 tenemos que hacer lo siguiente:

var myarray = ['Álex', 'Juan', 'José', 'Antonio', 'Carlos'];
myarray.sort(function(a,b){return a.localeCompare(b);}); // Queda ordenado como Álex, Antonio, Carlos, José, Juan

Función sleep, delay, pause o wait en Javascript

Hoy mismo hemos necesitado realizar una función que nos permitiese de forma fácil hacer un sleep, delay, pause o wait mediante Javascript.

Esto es realmente sencillo si usamos un setTimeout() pero no quería tener que llamar a otra función al pasar el tiempo especificado así que he buscado un poco en google y he encontrado esta:

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Fuente:

http://www.sitepoint.com/delay-sleep-pause-wait/

Función in_array en Javascript

La función in_array() de PHP comprueba si existe un valor dentro del array y nos devuelve true o false. Esta función no existe en Javascript pero la podemos crear fácilmente.

Tenemos el siguiente array en Javascript:

var arrCiudades = ['Londres', 'París', 'Roma', 'Madrid', 'Moscú'];

Si usásemos el framework JQuery no habría problema ya que ya la lleva implementada y simplemente tendríamos que hacer lo siguiente:

if ($.inArray('Madrid', arrCiudades)){ 
  alert('Encontrada'); 
} else { 
  alert('No encontrada'); 
}

En Javascript lo que hacemos es añadírsela al objeto Array de la siguiente forma:

Array.prototype.in_array = function(){ 
  for (var i in this) { 
    if (this[i] == arguments[0]){ 
      return true; 
    }
  } 
  return false; 
}

Podríamos haber buscado simplemente con el método indexOf() que nos devuelve un -1 si no existe o el índice si sí que encuentra el elemento, pero no funciona con el navegador Internet Explorer 8 y anteriores.

Una vez tenemos esto ya podemos buscar si el elemento existe en el array con la siguiente llamada:

if (arrCiudades.in_array('Madrid')){ 
  alert('Encontrada'); 
} else { 
  alert('No encontrada'); 
}

Espero que les pueda servir.

Convertir la primera letra de un string en mayúsculas en PHP y Javascript

Si necesitamos convertir la primera letra de un string a mayúsculas tenemos una forma muy sencilla en PHP mediante la función directa ucfirst.

$str = 'micadena';
echo ucfirst($str); // Micadena

En cambio con Javascript no tenemos ninguna función directa y la tenemos que crear nosotros.

var str = 'micadena';
str = str[0].toUpperCase() + str.slice(1);
alert(str); // Micadena

Espero que les sirva.

Función nl2br en Javascript

La función nl2br de PHP nos proporciona una utilidad a la hora de recuperar información de la base de datos que se ha guardado con caracteres de salto de línea o break line. Lo que realiza en definitiva es convertir los caracteres \r\n, \n\r, \r y \n por <br> o <br />.

Para realizar esto mismo en Javascript podemos usar la siguiente función:

function nl2br(str, is_xhtml) {
  var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '< br />' : '< br>'; // Eliminar el espacio antes del br

  return (str + '')
    .replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}

Fuente:

http://phpjs.org/functions/nl2br/

Eliminar elemento array Javascript

Si deseamos eliminar un elemento de un array en Javascript tenemos varios métodos que podemos utilizar:

Operador delete

Con el operador delete realmente no estamos eliminando. Si nos fijamos lo que realmente hemos conseguido es establecer el valor undefined al elemento del array.

var myArray = ["A", "B", "C"];
delete myArray[1];  // myArray -> ["A", undefined, "C"]

Método pop()

Si lo que necesitamos es eliminar un elemento al final de un array podemos utilizar este método pop().

var myArray = ["A", "B", "C"];
myArray.pop();  // myArray -> ["A", "B"]

Método shift()

Con este operador shift() lo que conseguimos hacer es eliminar el primer elemento del array.

var myArray = ["A", "B", "C"];
myArray.shift();  // myArray -> ["B", "C"]

Método splice(index, count)

A pesar de que el método splice() sirve también para añadir elementos a un array, si solamente usamos los dos primeros parámetros, lo que estaremos haciendo será eliminar elementos. Con este ejemplo podremos apreciar mejor qué sucede.

var myArray = ["A", "B", "C"];
myArray.splice(1, 1);  // myArray -> ["A", "C"]

Resumen

En resumen, si tenemos un array definido de la siguiente forma: myArray = ["A", "B", "C"] los métodos vistos anteriormente nos devolverán los siguientes resultados:

• delete myArray[1] -> devuelve ["A", undefined, "C"]
• myArray.pop() -> devuelve ["A", "B"]
• myArray.shift() -> devuelve ["B", "C"]
• myArray.splice(1, 1) -> devuelve ["A", "C"]
• myArray.splice(0, 2) -> devuelve ["C"]
• myArray.splice(1, 0, "D", "E") -> devuelve ["A", "D", "E", "B", "C"]

Llenar una cadena con ceros a la izquierda mediante Javascript

Hace un año aproximadamente colgué en este enlace la forma de llenar una cadena con ceros a la izquierda especificando la longitud de la cadena que se deseaba mediante PHP. En esta ocasión me ha hecho falta con Javascript y aquí os dejo la función:

function zerofill(valor, longitud){
  var cad = new Array(1+longitud).join('0');
  return (cad+valor).slice(-cad.length);
}

Obtener lista de parámetros pasados por GET mediante Javascript

Si necesitamos obtener una lista de los parámetros que nos han pasado en una url y necesitamos hacerlo con Javascript lo podemos realizar sin problemas con esta pequeña función que os dejo a continuación:

function getParamsGET(){
 var url = document.location.href;
 var strparams = url.split('?')[1];
 var arrparams = strparams.split('&');
 var arrget = {};

 for (var i = 0, l = arrparams.length; i < l; i++){
  var arrtmp = arrparams[i].split('=');
  arrget[arrtmp[0]] = unescape(decodeURI(arrtmp[1]));
 }
 return arrget;
}

Convertir tamaño de puntos a píxels con Javascript

Hoy os dejo una sencilla función que tuve que buscar para convertir el tamaño de una fuente de puntos a píxels y así poder averiguar qué iba a ocupar un texto mediante Javascript.

La función es la siguiente:

function pttopx(valpt){
 var valpx = parseInt(valpt, 10);
 valpx = parseInt(((valpx*96)/72), 10);
 return valpx;
}

Ordenar array numérico con Javascript

En Javascript la ordenación de arrays se realiza con el método array.sort(). Sin embargo, esta ordenación es lexicográfica y alfanumérica, con lo que si deseamos ordenar un array numérico tendremos problemas. Veamos este ejemplo:

var myarray = [40,100,1,5,25,10];
myarray.sort(); //La función devuelve [1,10,100,25,40,5]

Lo mismo ocurre si intentamos ordenar de forma descendente, ya que primero deberíamos ordenar ascendentemente con el método array.sort() y después invertir el resultado con el método array.reverse(). Al venir ya incorrecta la ordenación ascendente, el método reverse() simplemente nos imprimiría [5,40,25,100,10,1].

Para solucionar estos problemas es muy sencillo. Simplemente pasamos una función como argumento del método sort() y ya tenemos el array numérico ordenado ascendentemente:

var myarray = [40,100,1,5,25,10];
myarray.sort(function(a,b){return a - b}); //La función devuelve [1,5,10,25,40,100]

Para ordenar descendentemente podríamos usar el método reverse() sobre el resultado anterior o invertir la resta de los parámetros de la función que usamos dentro del sort() de la siguiente forma:

var myarray = [40,100,1,5,25,10];
myarray.sort(function(a,b){return b - a}); //La función devuelve [100,40,25,10,5,1]

Convertir numéricos con toFixed() y toPrecision() en Javascript

Estas dos funciones son una forma muy sencilla de convertir o formatear valores numéricos en Javascript.

Con la función toFixed() convertimos un número a string con una longitud exacta de valores decimales. Así pues, si se especifican más decimales de los que tiene el valor numérico original, nos añadirá ceros por detrás.

La función toPrecision() en cambio lo que hace es formatear un número a una longitud total concreta. Al igual que con la anterior función, nos añade ceros por detrás si la longitud especificada es mayor que la que tiene la variable numérica.

Veamos algunos ejemplos:

var num = 5.56789;
document.write(num.toFixed()); //6 -> sin decimales
document.write(num.toFixed(2)); //5.57
document.write(num.toFixed(4)); //5.5679
document.write(num.toFixed(6)); //5.567890 -> añade ceros por detrás
document.write(num.toFixed(8)); //5.56789000 -> añade ceros por detrás

document.write(num.toPrecision()); //5.56789 -> devuelve el número original
document.write(num.toPrecision(2)); //5.6
document.write(num.toPrecision(4)); //5.568
document.write(num.toPrecision(6)); //5.56789
document.write(num.toPrecision(8)); //5.5678900 -> añade ceros por detrás

Convertir cadenas de texto en números en Javascript

Os dejo un par de funciones Javascript muy útiles para convertir cadenas de texto a números enteros y decimales. Estas funciones se llaman parseInt y parseFloat.

La función parseInt evalúa una cadena y devuelve un entero. La sintaxis es parseInt(string, radix) donde string es la cadena a convertir y radix se utiliza para especificar el sistema numérico a usar. Si el parámetro radix no se especifica, Javascript asume lo siguiente:

• Si la cadena empieza por "0x", Javascript interpreta que se tiene que convertir a hexadecimal.
• Si empieza por "0" se asume que se quiere convertir a octal.
• Si empieza por cualquier otra cadena se asume que el número base 10 (sistema decimal).

Ejemplos de uso:

<script>
document.write(parseInt("10")); //10
document.write(parseInt("10.33")); //10
document.write(parseInt("34 45 66")); //34
document.write(parseInt(" 60 ")); //60
document.write(parseInt("40 years")); //40
document.write(parseInt("He was 40")); //NaN
document.write(parseInt("10",10)); //10
document.write(parseInt("010")); //10
document.write(parseInt("10",8)); //8
document.write(parseInt("0x10")); //16
document.write(parseInt("10",16)); //16
</script>

La función parseFloat evalúa la cadena y devuelve un número decimal. Al igual que con parseInt, esta función analiza caracter a caracter hasta que encuentra el final de la cadena o un caracter no válido. Si el primer caracter no es numérico devuelve NaN.

Veamos algunos ejemplos:

<script>
document.write(parseFloat("10")); //10
document.write(parseFloat("10.33")); //10.33
document.write(parseFloat("34 45 66")); //34
document.write(parseFloat(" 60 ")); //60
document.write(parseFloat("40 years")); //40
document.write(parseFloat("He was 40")); //NaN
</script>

Fuente:

http://www.w3schools.com/jsref/jsref_parseint.asp

http://www.w3schools.com/jsref/jsref_parsefloat.asp

Funciones PHP en Javascript. Proyecto php.js

Con este post pretendemos hablar de un proyecto de código libre que ya lleva mucho tiempo activo, php.js. Se trata de una gran colección de funciones Javascript basadas en muchas de las funciones más comunes y utilizadas de PHP.

La web del proyecto es http://phpjs.org, que como podremos ver proporciona el código fuente de las funciones de forma totalmente libre y gratuita.

El apartado Functions es especialmente interesante ya que en él encontramos el listado completo de las funciones creadas agrupadas por categorías y pulsando sobre cada función podemos obtener el código fuente para añadirlo a nuestra aplicación web.

El repositorio para las descargas lo encontramos en github cuya url es https://github.com/kvz/phpjs.

Obtener dirname y basename de un fichero en Javascript

Si necesitamos con Javascript obtener el nombre del directorio padre o el nombre del fichero de una ruta a fichero completa lo podemos conseguir con estas dos funciones que utilizan una expresión regular para conseguirlo:

function basename(path) {
    return path.replace(/\\/g,'/').replace( /.*\//, '' );
}

function dirname(path) {
    return path.replace(/\\/g,'/').replace(/\/[^\/]*$/, '');
}

Aleatorizar un array en Javascript

Con esta sencilla función conseguimos ordenar de forma aleatoria los elementos de un array:

function shuffle(arr) {
 for (var j, x, i = arr.length; i; j = parseInt(Math.random() * i,10), x = arr[--i], arr[i] = arr[j], arr[j] = x) {}
 return arr;
}

Quitar espacios con ltrim, rtrim y trim en Javascript

La función trim es una función muy utilizada en cualquier lenguaje de programación. En Javascript estas funciones no están implementadas aunque son unas funciones muy sencillas de programar.

LTRIM (Quitar espacios por la izquierda)

function ltrim(s) {
   return s.replace(/^\s+/, "");
}

RTRIM (Quitar espacios por la derecha)

function rtrim(s) {
   return s.replace(/\s+$/, "");
}

TRIM (Quitar espacios por la derecha e izquierda)

function trim(s) {
   return rtrim(ltrim(s));
}

Leer variables GET de una URL mediante Javascript

Es posible que necesitemos obtener los valores de una serie de parámetros que nos llegan por GET en una URL mediante Javascript. Con una sencilla función en la que utilizamos una expresión regular sobre el location.href obtendremos un array asociativo con el resultado. La página de la que queremos extraer los valores podría ser example.html?param1=value1¶m2=value2. Código

function getUrlVars() {
 var map = {};
 var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
  map[key] = value;
 });
 return map;
}

Llamada a la función

var params = getUrlVars();
var first = params["param1"];
var second = params["param2"];
 
alert(first);
alert(second);

Obtener número aleatorio entre un rango de números con Javascript

Con este simple código obtenemos un número aleatorio entre dos números dados.

function randomRange(ini, fin){
 return Math.floor(Math.random()*(fin-ini+1)+ini);
}

Oscurecer el color de un objeto HTML mediante Javascript o PHP

Una función que puede ser bastante útil es la de oscurecer un color que tenemos en formato hexadecimal. Yo lo uso para cambiar el color de un objeto HTML al pasar por encima de él y así obtengo el mismo color que el original pero más oscuro.
La función en PHP sería la siguiente:

 function oscurecerColor($color, $cant){
  //voy a extraer las tres partes del color
  $rojo = substr($color,1,2);
  $verd = substr($color,3,2);
  $azul = substr($color,5,2);

  //voy a convertir a enteros los string, que tengo en hexadecimal
  $introjo = hexdec($rojo);
  $intverd = hexdec($verd);
  $intazul = hexdec($azul);

  //ahora verifico que no quede como negativo y resto
  if($introjo-$cant>=0) $introjo = $introjo-$cant;
  if($intverd-$cant>=0) $intverd = $intverd-$cant;
  if($intazul-$cant>=0) $intazul = $intazul-$cant;

  //voy a convertir a hexadecimal, lo que tengo en enteros
  $rojo = dechex($introjo);
  $verd = dechex($intverd);
  $azul = dechex($intazul);

  //voy a validar que los string hexadecimales tengan dos caracteres
  if(strlen($rojo)<2) $rojo = "0".$rojo;
  if(strlen($verd)<2) $verd = "0".$verd;
  if(strlen($azul)<2) $azul = "0".$azul;

  //voy a construir el color hexadecimal
  $oscuridad = "#".$rojo.$verd.$azul;

  //la función devuelve el valor del color hexadecimal resultante
  return $oscuridad;
 }

Y su equivalente en Javascript

function oscurecerColor(color, cant){
 //voy a extraer las tres partes del color
 var rojo = color.substr(1,2);
 var verd = color.substr(3,2);
 var azul = color.substr(5,2);

 //voy a convertir a enteros los string, que tengo en hexadecimal
 var introjo = parseInt(rojo,16);
 var intverd = parseInt(verd,16);
 var intazul = parseInt(azul,16);

 //ahora verifico que no quede como negativo y resto
 if (introjo-cant>=0) introjo = introjo-cant;
 if (intverd-cant>=0) intverd = intverd-cant;
 if (intazul-cant>=0) intazul = intazul-cant;

 //voy a convertir a hexadecimal, lo que tengo en enteros
 rojo = introjo.toString(16);
 verd = intverd.toString(16);
 azul = intazul.toString(16);

 //voy a validar que los string hexadecimales tengan dos caracteres
 if (rojo.length<2) rojo = "0"+rojo;
 if (verd.length<2) verd = "0"+verd;
 if (azul.length<2) azul = "0"+azul;

 //voy a construir el color hexadecimal
 var oscuridad = "#"+rojo+verd+azul;

 //la función devuelve el valor del color hexadecimal resultante
 return oscuridad;
}