Archivo

Creación de un widgets para buscar palabras en la RAE (Real Academia Española )

septiembre 25th, 2009 by Webmaster

En igoogle podemos utilizar un widgets llamado “Buscón R.A.E” que permite buscar palabras en la R.A.E ( Real Academia Española ).

Este widgets me pareció útil y decidí crear uno para poder utilizarlo en mis proyectos. A continuación os dejo un ejemplo real funcionando, para que podáis ver como es.

Ejemplo real

Esta realizado con javascript y utiliza un iframe para mostrar los resultados. Estos resultados son simplemente una página que devuelve la R.A.E con el significado de la palabra deseada.

El iframe se crea con un ancho del 100% para que se adapte a cualquier lugar donde se inserte. Evidentemente, cada uno puede cambiar las propiedades del iframe, para adaptarlas a sus necesidades.

La única propiedad que no debemos modificar es SRC, porque si cambiamos esta, no obtendremos resultados de búsqueda.

Para terminar dejo el código de este widgets para que podáis insertarlo en vuestra web, blog, …

JavaScript:

 /**
             * Esta funcion busca una palabra en la RAE (www.rae.es)
             *
             * @palabra: la palabra que deseamos buscar.
             * @div: elemento div del documento html donde queremos crear
             * el ifram con el resultado de la busqueda.
             */
            function buscar(palabra, div)
            {
                //codificar la palabra por si lleva acentos
                palabra = encodeURI(palabra);
 
                //Generar url a la que debemos llamar para obtener
                //el resultado de buscar dicha palabra en la RAE
                var url;
 
                    url = "http://buscon.rae.es/draeI/SrvltGUIBusUsual?";
                    url = url + "LEMA=" + palabra + "&origen=RAE&TIPO_BUS=3";
 
               //Generar iframe con la página de la RAE
               var iframe;
 
                    iframe = document.createElement("iframe");
 
                    //Añadir atributos al iframe creado
                    iframe.setAttribute("scroll", "auto");
                    iframe.setAttribute("frameborder", "0");
                    iframe.setAttribute("width", "100%");
                    iframe.setAttribute("height", "300px");
                    iframe.setAttribute("src", url);
 
               //Limpiar el contenido de result
              limpiarDiv(div);
 
               //Guardar el iframe creado dentro del div indicado
               var result;
 
                       result = document.getElementById(div);              
 
                    //Añadir al div el iframe con los resultados
                    result.appendChild(iframe);
            }
 
            /**
             * Limpiar (eliminar) todos los elementos que contenga
             * el div.
             *
             * @id: identificador del elemento div.
             */
            function limpiarDiv(id)
            {
                var div;
 
                    div = document.getElementById(id);
 
                    while(div.hasChildNodes())
                    {
                        div.removeChild(div.lastChild);
                    }
            }

Html:

<!--
            Buscar con Javascript en la web de la RAE
            www.rae.es
        -->
        <p>
            Buscar: &nbsp;
            <input type="text" id="palabra" /> &nbsp;
                <a href="#"
                   onclick="buscar(document.getElementById('palabra').value,
                                   'resultado');"> buscar </a>
        </p>
        <p>
            <div id="resultado"></div>
        </p>

Etiquetas: , , ,

Borrar y rellenar el contenido de un div con DOM

agosto 6th, 2009 by Webmaster

Cuando utilizamos javascript para modificar contenido en una página, tenemos varias opciones. Una de ellas es innerHTML.

Esta opción seria maravillosa, porque permite añadir contenido a un div de forma muy simple, ademas permite añadir código html que sera interpretado como tal.

El inconveniente de innerHTML es que no es una función estándar, es decir, esta no se especifica en el estándar de javascript (ECMA-262).

La otra opción es utilizar DOM, de esta forma respetamos el estándar. Por desgracia utilizar DOM es algo mas complicado que innerHTML.

Para solucionar el problema mencionado al principio, manejar contenido con javascript, he creado varias funciones que nos facilitan este trabajo.

Una de ellas se encarga de eliminar todo el contenido de un div y la otra de escribir un texto ( sin código HTML ).

Podéis ver un ejemplo real aquí.

Funciones:

        //Eliminar el contenido de un div
        function limpiarDiv(id)
        {
            var div;
 
                div = document.getElementById(id);
 
                while(div.hasChildNodes())
                {
                    div.removeChild(div.lastChild);
                }
        }
 
        //Escribir en un div
        function rellenarDiv(id, texto)
        {
            var div;
            var nodoTexto;
 
              div = document.getElementById(id);
 
              nodoTexto = document.createTextNode(texto);
 
              //Llamamos a la función limpiarDiv para eliminar el contenido
              //actual del div.
              limpiarDiv(id);
 
              div.appendChild(nodoTexto);
        }

Etiquetas: , , ,

Contar caracteres de un campo con JavaScript

marzo 25th, 2009 by admin

Con el fin de hacer las cosas mas fáciles y entendibles al usuario he trabajado un poco la interactividad que tienen estos con los formularios.

Al principio no le prestaba mucha atención a este tema. Simplemente creaba un campo con su correspondiente etiqueta descriptiva y ya esta.

Ahora para ayudar al usuario a rellenar los campos adecuadamente y evitar posibles errores, utilizo una función que indica cuando se paso el número máximo de caracteres, cuantos lleva escritos y añadir un máximo de caracteres permitidos.

Esto también da un mayor atractivo al formulario.


Ejemplo real

Ejemplo de uso:

<!-- incluir fichero con la funcion en JavaScript -->
<script src="./contarCaracteres.js" type="text/JavaScript"></script>
 
<!--
Campo al que contaremos los caracteres 
 
* Llamamos a la función con el evento "onKeyDown".
* Le pasamos como parametros:
	- el id del campo (this.id)
	- el id del div donde se mostrara el nº de caracteres actuales
	- el color que tendra el campo en caso de sobrepasar el máximo de caracteres
	- el máximo de caracteres permitidos.
 
-->
<input id="ejemplo" onkeydown="contarCaracteres(this.id, 'nCaracteres','#FF0000',10)" type="text" />
 
<!-- div donde mostraremos el numero de caracteres -->
Caracteres:<div id='nCaracteres'></div>

Función:

function contarCaracteres(campo, id,color,maximo)
{
	/**
	 * variable que contiene el div donde vamos a
	 * escribir y borrar.
	 */
	var div;
 
	/**
	 * variable que guardara el numero total de
	 * caracteres que tiene el campo que estamos
	 * contando.
	 */
	var cTotal;
 
	/**
	 * variable que creara el nodo de texto y el valor
	 * que mostraremos.
	 */
	var tmp;
 
	//Asignar div al div con el que trabajaremos
	div = document.getElementById(id);
 
	//Borrar el contenido del div
	while(div.hasChildNodes())
	{
		div.removeChild(div.lastChild);
	}
 
	//Obtener el número de caracteres del campo en cTotal.
	campo = document.getElementById(campo);
	cTotal = campo.value.length + 1;
 
	/**
	 * Añadirle el atributo maxlenght para evitar que se escriban
	 * mas caracteres de los indicados.
	 */
	campo.setAttribute("maxlength",maximo);
 
	/**
	 * Si se supera el máximo de caracteres permitidos ponemos el fondo
	 * del campo en rojo ó el color indicado.
	 */
	if(cTotal &gt; maximo  ) {
		campo.style.backgroundColor = color;
	}  else {
		campo.style.backgroundColor = "#FFFFFF";
	}
 
	/**
	 * Escribimos el total de caracteres en el div indicado.
	 * Para hacer esto creamos un nodo de texto con el valor de
	 * cTotal. El nodo lo asignamos a tmp
	 */
	tmp = document.createTextNode(cTotal);
 
	//Añadimos el contenido de tmp al div indicado.
	div.appendChild(tmp);
}

Etiquetas: , ,