Archivo de la categoría: JavaScript/AJAX

Referencia online jQuery 1.2

Una página que nos puede servir de gran ayuda en nuestros desarrollo jQuery. Nos presenta de manera visual una referencia completa de las funcionalidades de este framework. A día de hoy lo encontramos actualizado a la versión 1.2.6.

Referencia online jQuery 1.2.

Anuncios

Abrir enlaces en ventanas nuevas (target=”_blank”) en XHTML

Más de uno se habrá llevado una sorpresa, una amarga sorpresa, al hacer su primer proyecto en XHTML Strict e intentar usar el atributo target en la etiqueta de enlace (target=”_blank”)

<a href="http://www.websenior.es" target="_blank">WebSenior</a>

habrá podido observar como dicho código hace lo que tiene que hacer, abrir el enlace en una nueva ventana, pero si ha intentado validar su web como XHTML Strict el validador le habrá dicho que el atributo target no es válido.

Que no cunda el pánico, usando un poco de Javascript (o muy poco Javascript si usamos un Framework) tendremos solucionado nuestro problema.

Lo primero, evidentemente, es eliminar el target=”_blank” de todo nuestro proyecto, y sustituirlo por rel=”external”.

Lo siguiente es programar en Javascript que queremos el comportamiento de target=”_blank” en las etiquetas a que sean rel=”external”, esto se consigue con el siguiente código, que luego comento.

function linkExternos() {
	if (!document.getElementsByTagName) return;
	var elemsA = document.getElementsByTagName("a");
	for (var i=0; i < elemsA.length; i++) {
		var elemA = elemsA&#91;i&#93;;
		if (elemA.getAttribute("href") && elemA.getAttribute("rel") == "external")
			elemA.target = "_blank";
	}
}
window.onload = linkExternos;
&#91;/sourcecode&#93;

La función <strong>linkExternos </strong>recoge todos los elementos a de nuestro documento XHTML, para cada uno de ellos, se recorre todos sus atributos, en caso de que ese elemento <strong>a</strong> tenga un atributo <strong>href</strong> y otro <strong>rel </strong>con valor <strong>external</strong>, se especifica que su <strong>target</strong> (destino) sea <strong>_blank</strong>. Por último se asigna la función al evento <strong>onload</strong> para que se ejecute cuando el documento sea cargado por el navegador.

Si usamos un framework de Javascript podremos ahorrarnos bastante código. En caso de <strong>jQuery </strong>quedaría así:


$(document).ready(function(){
	$("a[@rel='external']").attr("target", "_blank");
});

Pasar array PHP a JavaScript (JSON)

JSON (JavaScript Object Notation) es un formato de datos con notación JavaScript que últimamente está de moda gracias al auge de las tecnologías AJAX. Digamos que es una alternativa al uso de XML, que libera de peso la respuesta AJAX en algunos casos (no requiere el cierre de etiqueta), hace una mejor representación de estructura de datos y requiere menor coste de procesamiento.

Un caso típico en el que deberíamos usar JSON es la petición de un listado de datos mediante AJAX. Imaginemos que la petición se hace a un archivo PHP (a partir de la versión 5.2  tenemos funcionalidades relacionadas con JSON disponible y activadas por defecto) que genera una estructura datos del listado en la variable $l_a_data con el siguiente formato:

[
Array
(
    [0] => Array
           (
             [nombre] => "Francisco"
             [apellidos] => "Torres"
           )

    [1] => Array
           (
             [nombre] => "Juanma"
             [apellidos] => "Torres"

           )
)

Podríamos fácilmente entonces convertir esta estructura array a una cadena con el formato JSON con la sentencia:


$l_str_json = json_encode($l_a_data);

y enviar esta cadena JSON como response del proceso AJAX. En este caso lo que enviamos es:

[
   {
      "nombre":"Francisco","apellidos":"Torres",
      "nombre":"Juanma","apellidos":"Torres"
   }
]

Para analizar  esta cadena recibida en el código JavaScript simplemente haremos:

var l_a_json = eval('(' + responseJSON + ')');

Con lo que ya tenemos un array en JavaScript con los datos provenientes del response del AJAX invocado que generó los datos de nuestro listado.

Un inconveniente de este método es el uso de eval() en una estructura de datos. Esto nos puede presentar problemas de seguridad, así que sólo deberíamos usarlo en entornos de confianza. Como alternativa y con el objetivo de evitar problemas de seguridad, debemos utilizar algún parseador de JSON de JavaScript, se pueden encontrar en json.org (parte inferior de la página, apartado JavaScript)

Obtrusive Javascript Checker

Plugin para Firefox para localizar la presencia de Javascript Obstrusivo en nuestros desarrollos.

Obtrusive Javascript Checker

En la página de su autor podemos ver su funcionamiento, así como otros soportes de descargas, como en script para GreaseMonkey.

Javascript no obtrusivo (II)

Hoy en día se está poniendo muy de moda en el mundo de desarrollo web este término, tal y como comentabamos hace unos dias en la entrada Javascript no obstrusivo.

Parece que se está confundiendo Javascript no obstrusivo con el uso de Frameworks de Javascript, como por ejemplo JQuery y Prototype. Y no hay inconveniente ninguno en hacer un código HTML o XHTML sin programar eventos Javascript en dicho código y no usar algún Framework de Javascript.

Es tan sencillo como este código:


document.getElementById("div_click").onclick = function(){
   HolaMundo();
};

Viene a decir: “Cuando se haga click en el elemento que tenga por ID “div_click” se ejecutará la función HolaMundo.”

Aquí tenéis el código completo del ejemplo:

ejemplo.html:


<html>

   <body>
<div id="div_click">Click aquí</div>
<script type="text/javascript" src="ejemplo.js"></script>

   </body>
</html>

ejemplo.js:


//funciones

function HolaMundo(){
   alert("HolaMundo");
}

//lanzadores de eventos
document.getElementById("div_click").onclick = function(){
   HolaMundo();
};

Quien dice “.onclick” puede decir “.onfocus”, “.ondblclick”, o cualquier otro evento.

Si lo que queremos es programar el evento onload del body, haremos esto:


window.onload = function(){

   HolaMundo();

}

Testeador de expresiones regulares para JavaScript

En más de una ocasión nos vemos obligados a comprobar si nuestras expresiones regulares son correctas.

Para este trabajo nos puede ayudar la web Regex Tester, la cual permite insertar una expresión regular para JavaScript, y verificarla con los valores que queramos.

jQuery quicksearch Plugin

Una vez más me he visto gratamente sorprendido por otro plugin para el framework jQuery. Y es que si tenemos en nuestro sitio web algún tipo de listado (tablas, párrafos, listas,…) y deseamos establecer un filtro que en tiempo real vaya actualizando dicho listado con los registros que se ajusten a la búsqueda, sin duda alguna, necesitamos el plug-in quicksearch.

Puedes descargárte su última versión y ver distintos ejemplos de uso en su web oficial.

jQuery Quicksearch