Artículos
Javascript

Escapar caracteres en JavaScript

Creado: 15/Sep/2009 Actualizado: 28/May/2015

Lo más normal es que cuando estemos creando una página web capturemos datos del usuario. Cuando el usuario introduce datos tiene la capacidad, si no ponemos remedio, a que introduzca cualquier carácter. Y en este punto hay que tener un cierto cuidado, ya que el usuario puede introducir caracteres especiales, los cuales en un posterior tratamiento del texto nos pueden generar problemas. Entre ellos tenemos la barra invertida (\), la comilla simple (‘), el ampersand (&),…

Cuando utilizamos Javascript estos caracteres tienes que aparecer escapados mediante la barra invertida. Así la cadena ‘Hola Mundo’ se representará como \’Hola Mundo\’.

 var cadena = "\'Hola Mundo\'";

Cuando estemos utilizando cadenas de caracteres es bueno que intentemos escapar los caracteres. Para ello nos podemos apoyar en las funciones escape() y unescape(). Para poder utilizarlas lo realizaremos de la siguiente forma:

 var cadena1 = escape("'Hola Mundo'");  // El resultado es %27Hola%20Mundo%27
 var cadena2 = escape("20%5=0");  // El resultado es 20%255%3D0

En este ejemplo vamos a coger un texto libre que nos introduzca el usuario y se lo vamos a escapar. Lo primero crear dos áreas de texto mediante textarea:





La función escapar, obtiene el texto de un área de texto, mediante getElementById() y lo vuelca en otra. Aplicando en medio el método escape().

function escapar(){
	document.getElementById("textoescapado").value = escape(document.getElementById('texto').value);
}

Código Fuente

Descárgate el código fuente de Escapar caracteres en JavaScript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Artículos
Prototype

Deshabilitar un elemento del formulario con Prototype

Creado: 13/Sep/2009 Actualizado: 06/Feb/2025

Prototype nos permite manejar elementos de la página web de una forma muy sencilla. Es por ello que nos es muy útil cuando interactuamos con formularios. En este ejemplo vamos a ver cómo podemos deshabilitar un elemento del formulario. Sin necesidad de deshabilitar todo el formulario, cosa que ya vimos en el pasado.

Lo primero que tenemos que hacer es cargar la librería de Prototype:

<script type="text/javascript" src="prototype.js"></script>

Ahora que tenemos cargada la librería de Prototype pasaremos a crear un formulario. Este será sencillo. Una de las cosas sobre las que tenemos que prestar atención es el dar ID a los elementos del formulario. Ya que el código de Prototype se apoyará en dichos ID.

Veamos cómo será nuestro formulario:

<form id="peticion">
  <label for="nombre">Nombre: </label>
  <input id="nombre" type="text"><br>
  <label for="apellido">Apellido: </label>
  <input id="apellido" type="text"><br>
  <input name="genero" type="radio" value="Hombre">Hombre
  <input name="genero" type="radio" value="Mujer">Mujer
</form>

En concreto, vamos a deshabilitar el campo ‘apellido’. Así que será este el ID que manejemos.

El código de Prototype que nos permite deshabilitar un elemento del formulario utilizará el objeto Form.Element y en concreto el método .disable() (o .enable() si queremos volver a habilitar el elemento del formulario). Así que crearemos un botón que nos permita lanzar dicho código.

<input type="button" value="Deshabilitar Apellido" onclick="Form.Element.disable('apellido');">

Como podéis comprobar, es un código realmente sencillo.

Artículos
Javascript

Cambiar estilos dinámicamente

Creado: 12/Sep/2009 Actualizado: 28/May/2015

Desde que se pueden aplicar hojas de estilos en las páginas web se ha entrado en una dinámica en la cual los elementos de la página cambian de color, forma, aparecen y desaparecen, atendiendo a eventos de la propia página. Estos cambios son posibles gracias a que se pueden modificar las propiedades del estilo de un elemento.

Si queremos cambiar el estilo de un determinado objeto de la página dinámicamente. Entendiendo como objeto, cualquier elemento de la página identificado mediante un ID. Tenemos dos posibilidades:

Cambiar una a una cada una de las clases asociadas al estilo. Por ejemplo, el siguiente código realiza dicha función…

objeto.style.color='#003366';
objeto.style.fontFamily='Verdana,Arial,Helvetica,sans-serif';
objeto.style.fontSize='12px';
objeto.style.textDecoration='none';
objeto.style.backgroundColor='#419ad4';

O bien, aplicar un estilo directamente sobre el objeto. Esta segunda forma es mucho más rápida y eficiente. Además, nos permite tener controlados los estilos de la aplicación web y que no se defina un nuevo estilo dentro del código de la página. En este caso deberemos de asignar un estilo a la propiedad className del objeto…

objeto.className='estilo';

El estilo puede estar definido directamente en la misma página o importado de una hoja de estilos. Cuando queremos aplicarselo a un objeto del documento utilizamos el ID y el método .getElementById() para acceder al elemento. La función Javascript genérica quedaría de la siguiente forma:


Código Fuente

Descárgate el código fuente de Cambiar estilos dinámicamente
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Artículos
Javascript

Deshabilitar el botón derecho

Creado: 10/Sep/2009 Actualizado: 28/May/2015

En este ejemplo vamos a ver como bloquear el botón derecho del ratón para evitar que el usuario pueda sacar el menú contextual. Esto es bueno ya que en este menú contextual aparece, entre otras opciones, la de mostrar código fuente.

Ahora que podemos pensar que suprimiendo este menú contextual evitamos que nuestro código fuente sea inspeccionado, si bien existen otras formas de que nuestro código fuente sea sustraido. Eso si, se plantean muchas trabas a la hora de que nuestro código fuente sea inspeccionado.

Una de las peores cosas que tiene Internet son las discrepancias entre los diferentes navegadores. En parte entendibles por la lentitud en la estandarización de los comités (lentitud en comparación con la velocidad de desarrollo de la red).

Aunque DOM Level2 Events intenta estandarizar el control de eventos. No es posible a día de hoy hacer un script único para los diferentes navegadores. Y en todo este embolado, Opera no ofrece el soporte de cancelación de eventos y promueve el uso del menú contextual obtenido por el botón derecho. Un lio.

Si una cosa sigue estando más o menos clara, aunque del tema presionar y el soltar un botón podríamos hacer un monologo, es que los eventos se pueden capturar con el onmousedown. Eso sí, esto puede no evitar el que el navegador lance el menú contextual. A si que no está de más el parar al menú contextual con el atributo oncontextmenu. Al cual, solo necesitaremos darle un valor de false.

document.onmousedown=anularBotonDerecho;
document.oncontextmenu=new Function("return false");

A la hora de calcular el botón presionado tenemos dos alternativas. Los navegadores Internet Explorer siguen basándose en la propiedad event.button y el valor 2 (botón derecho).

if (event.button == 2) {
   alert("Botón derecho pulsado");
}

Por su parte, Firefox y Chrome se apoyan en la propiedad which y sus valores 2 y 3.

if (e.which == 3 || e.which == 2) {
   alert("Botón derecho pulsado");
}

A si que además de validar el botón pulsado, añadiremos en la validación el navegador sobre el que operamos. En este caso nos apoyaremos en la propiedad Navigator.appName

function anularBotonDerecho(e) {


 if (navigator.appName == 'Netscape' 
       && (e.which == 3 || e.which == 2)){
   alert(sMensaje);
   return false;
 } else if (navigator.appName == 'Microsoft Internet Explorer'
       && (event.button == 2)) {
   alert(sMensaje);
 }
}

Código Fuente

Descárgate el código fuente de Deshabilitar el botón derecho
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Artículos
Javascript

Cambiar dinámicamente una imagen con JavaScript

Creado: 09/Sep/2009 Actualizado: 27/Ago/2021

En este ejemplo vamos a explicar como al pasar sobre un enlace cambie una imagen del documento. Para poder llevar a cabo este ejemplo debemos de tener en cuenta una serie de cosas.

La primera es que el código Javascript que se ejecute para cambiar la imagen empezará a ejecutarse cuando se produzca el evento onMouseOver sobre el enlace. Este evento llamará a una función que podemos llamar cambiar.

No se nos debe de olvidar que cuando el usuario abandone el enlace debemos de volver a poner la imagen original. Para ello debemos de capturar el evento onMouseOut que lanzará otra función que llamaremos volver.

<a href="#" onmouseover="cambiar();" onmouseout="volver();">Al pasar sobre mi cambiará la imagen</a>

Con respecto a las funciones Javascript debemos de tener en cuenta como se llama la imagen del documento. Para ello daremos un identificador a la imagen a través de su parámetro ID.

<img src="mt05.jpg" id="matrix">

Como conocemos el nombre de la imagen valdrá con modificar su parámetro src que indica el origen de la imagen.

function cambiar(){
  document.getElementById('matrix').src="mt07.jpg";
}

function volver(){
  document.getElementById('matrix').src="mt05.jpg";
}

Cuando entremos en el enlace se cargará una foto y cuando salgamos, otra.

Código Fuente

Descárgate el código fuente de Cambiar dinámicamente una imagen con JavaScript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
XSLT

Cargar un combo con XSLT

Creado: 08/Sep/2009 Actualizado: 25/Ago/2021

La pretensión de este ejemplo es ver como podemos cargar un combo (desplegable) mediante una hoja XSLT. Es decir, utilizar los datos de un XML para que aparezcan como opciones de un combo.

Para ello partimos de nuestro XML de ejemplo de siempre. Nuestros autores. La verdad es que debería de pensar en sacarlo a una página aparte, ya que solo hago que hacer «copy & paste». Pero veamos como es el XML de autores:



  
    Fuente Ovejuna
    Lope de Vega
    84-9815-002-7
  
  
    La Celestina
    Fernando de Rojas
    84-96390-96-9
  
  
    Don Juan Tenorio
    Jose Zorilla
   84-96390-97-7
  

En nuestro ejemplo vamos a cargar un combo con los títulos de los libros que están dentro del XML. A si que pongámonos manos a la obra con nuestra hoja de transformación.

Hay que recordar que las hojas de transformación son documentos XML. A si que lo primero que veremos en el será la cabecera que lo identifique XML y la definición del namespace de XSL.



Esto era obvio, pero por si acaso había algún despistado, había que recordarlo.

Pero vayamos al meollo. Para conseguir la carga del combo tenemos que definir una plantilla. Dicha plantilla lo que tendrá que hacer es recorrer los elementos libro e ir generando las etiquetas que son las que representan el contenido del combo. Para iterar sobre los elementos utilizamos la etiqueta xsl:for-each.

En dicha etiqueta tenemos que establecer como atributo de iteración, select, el conjunto de etiquetas sobre las que queremos iterar. En nuestro caso libros/libro. Y en cada iteración obtener el valor del atributo. Para esto utilizaremos la etiqueta xsl:value-of, que al igual que la anterior tiene un atributo select, que en este caso indica la etiqueta de la cual se quiere recuperar el valor.

Al final nos queda algo así:


  

Ya que al final, lo que vamos es buscando que la hoja de transformación suelte un código HTML como el siguiente:

A si que como has podido comprobar, dentro de la hoja de transformación entre el código anterior tendremos que añadir la etiqueta SELECT. Quedándonos la hoja de transformación como sigue:

Y poco más. Solo recordar que el documento XML tiene que tener una referencia a la hoja de transformación que lo va a usar:

Artículos
ASP

Reloj con la hora del servidor

Creado: 07/Sep/2009 Actualizado: 27/Ago/2021

En el artículo de ayer veíamos como podíamos crear un reloj en javascript. En este ejemplo se puede ver cómo se obtiene la hora de la máquina cliente donde se ejecuta. (Interesante leerlo antes de afrontar este…)

Me han llegado numerosos emails diciendo cómo hacer esto, pero tomando la hora del servidor. A si que aquí tenéis la respuesta a vuestras dudas. En este caso hemos escogido en lenguaje ASP como lenguaje de servidor, pero no podría valer cualquier otro. Véase PHP, JSP,…

Lo primero que debemos de hacer es recoger la fecha del servidor. En este caso utilizamos la función Now() de ASP para que nos de la fecha actual del servidor.

Lo siguiente será el pasar esa fecha a una rutina Javascript. Para ello lo que hacemos es montar la rutina Javascript «al vuelo». Es decir, el código de la rutina Javascript que se ejecutará en el cliente llevará parte de código de servidor. El servidor antes de devolver la página al cliente tendrá ya una rutina pura y dura Javascript.

Veamos como quedaría:


El ejemplo de crear un reloj en javascript lo que hacía era poner un Timer que lanzaba cada segundo una función, la cual, solicitaba la fecha actualizada. Si hicieramos eso volveríamos a tener la fecha del cliente y no la del servidor. Es por ello que lo que tendremos que hacer es el control manual de la fecha, es decir, incrementar nosotros mismos la fecha, segundo a segundo.

Para incrementar la fecha lo primero que tenemos que hacer es obtener los segundos con getSeconds(), minutos con getMinutes() y hora del servidor con getHours().

var segundos = fecha_js.getSeconds();
var hora = fecha_js.getHours(); 
var minutos = fecha_js.getMinutes();

Y en la función que se ejecute cada segundo (mejor dicho, cada 1000 milésimas) deberemos de seguir el siguiente algoritmo:

segundos++;
   
if (segundos == 60) {
  segundos = 0;
  minutos++;
  if (minutos == 60) {
    minutos = 0;
    hora++;
    if (hora == 24) {
      hora = 0;
    }
  }
}

Es sencillo. Si llegamos a 60 segundos es que ha pasado un minuto. Incrementamos el minuto y ponemos el segundero a 0. Cuando lleguemos a 60 minutos es que ha pasado una hora. Incrementamos la hora y ponemos el minutero a 0. Y por último, cuando lleguemos a 24 horas, ponemos estas a 0.

Lo último del script será poner los datos en un campo input de un formulario. Como siempre, con getElementById() Sencillo ¿no?

document.getElementById("hora").value =  " "  + hora + ":" + minutos + ":" + segundos;

Y volver a ejecutar la función de paso de un segundo:

window.setTimeout("mostrar()",1000); 

Ya tenemos el reloj de nuestro servidor. Claro que siempre y cuando a este no le cambien la fecha on-line ¿verdad?

Artículos
Javascript

Reloj en JavaScript

Creado: 06/Sep/2009 Actualizado: 28/May/2015

Y te preguntaras ¿y para que quiero saber la hora que es?, si quiero saberla, simplemente puedo mirar la barra de mi gestor de ventanas, o simplemente mirarme la muñeca o mirar el fabuloso, reloj de pared, el cual me marca hasta las horas en punto.

Pues nosotros te lo pondremos más fácil. Para que no tengas que perder esos fabulosos segundos en mirar hacia abajo o arriba, e incluso en girar tu muñeca para ver que hora es, te vamos a explicar como poner un reloj en una página web. Aunque, me pregunto yo, si mientras se prepara el ordenador para interpretar las rutinas JavaScript me puedo hacer hasta la cena ¿no?.

Bueno pasamos a lo practico, primeramente obtenemos la fecha y de la fecha mediante los métodos .getHours(), .getMinutes() y .getSeconds() obtenemos la hora, minutos y segundos. Estos métodos son del objeto Date. Recuerda que estos son los de tu maquina.

El codigo seria el siguiente:

var  dia = new Date();
var  hora = dia.getHours();
var  minutos = dia.getMinutes();
var  segundos = dia.getSeconds();

Posteriormente realizaremos una comprobación de que si el valor que tiene en un momento dado cualquiera de las variables anteriores esta entre 0 y 9, añadiremos un cero delante. Simplemente para que nos quede más mona la hora.

if ((segundos > = 0)&&(segundos <= 9)){
  segundos="0"+segundos;
}

Para visualizar la hora en el navegador crearemos un formulario con una entrada de texto.

El valor lo volcamos accediendo al ID del campo del formulario mediante .getElementById().

Y la forma de ejecución es el mostrar la hora cada segundo mediante la función setTimeout(cadena,milisegundos), la cual ejecuta la cadena indicada pasados los milisegundos indicados. (En nuestro caso cada segundo - 1000 msg). Esta función es del objeto Window.

window.setTimeout("mostrar()",1000);

También indicar que hay que empezar a ejecutarlo cuando se cargue la pagina, es por ello que utilizaremos el método onLoad(), para empezar a ejecutarlo, mediante setTimeout().

Código Fuente

Descárgate el código fuente de Reloj en JavaScript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
XSLT

Crear una tabla a partir de datos XML

Creado: 05/Sep/2009 Actualizado: 27/Ago/2021

A la hora de presentar datos una de los artificios más usados son las tablas. Con el lenguaje HTML es muy sencillo el montar una de ellas. Nos basta con controlar las etiquetas TABLE, TR y TD.

En el siguiente ejemplo utilizaremos XSLT para montar una tabla XHTML. Los datos de dicha tabla serán los datos que vayan en el XML. Para ello, lo primero que haremos será crear nuestro documento XML con la información a mostrar. Usamos un XML que representa información de libros:



  
    Fuente Ovejuna
    Lope de Vega
    84-9815-002-7
  
  
    La Celestina
    Fernando de Rojas
    84-96390-96-9
  
  ...

Básicamente, como descripción de nuestro ejemplo, lo que vamos a hacer es recorrer los elementos de un path determinado e ir creando filas de la tabla.

Pero vamos por partes. Lo primero que tenemos que hacer en nuestro documento XSL, dentro de la plantilla principal es declarar la cabecera de la tabla:





  

Mis Libros

Una vez que tenemos la cabecera, tenemos que iterar por los elementos. Para cada fila hay que crear una etiqueta TR, que es una fila, y para cada elemento una etiqueta TD, que es una celda. Quedándonos el siguiente código:


  

Podemos comprobar que estamos mezclando el código XHTML con el código XSLT sin ningún problema. Para recorrer los elementos del documento XML utilizamos la etiqueta xsl:for-each, la cual, mediante el atributo select identifica un path en el árbol XML. En nuestro ejemplo, al mostrar los contenidos de los libros, el path será libros/libro.

Los valores de los elementos son recuperados mediante el xsl:value-of, que al igual que sucede con xsl:for-each, tiene un atributo select con el elemento XML a recuperar.

Solo nos quedará el cerrar la tabla dentro de la plantilla. El código más sencillo de todos:

     
Titulo Autor

Aunque sea algo obvio, cabe recordar, que en el documento XML hay que crear un enlace al documento de transformación XSLT.

XSLT

Mi primer XSLT

Creado: 04/Sep/2009 Actualizado: 27/Ago/2021

XSLT es un lenguaje que nos permite transformar documentos XML de un formato a otro. Por ejemplo transformar documentos XML en documentos XHTML u otros documentos XML.

Para crear nuestro primer XSLT lo primero que tenemos que hacer es escribir nuestro fichero XML. En el caso de este ejemplo vamos a construir un documento de libros como vemos a continuación:



  
    Fuente Ovejuna
    Lope de Vega
    84-9815-002-7
  
  
    La Celestina
    Fernando de Rojas
    84-96390-96-9
  
  ...

Lo que vamos a hacer mediante el XSLT es obtener información del documento XML y crear un documento XHTML donde se vean dichos datos.

Para construir el documento XSLT lo primero que tenemos que saber es que, este, es a su vez otro documento XML. Por lo tanto, la primera línea que nos encontraremos será la definición del XML.

Lo siguiente es empezar a definir la hoja de estilos y el namespace asociado

En todo documento XSLT, su cuerpo, es formado por las plantillas. Estas nos indicaran a partir de que elemento del documento XML vamos a empezar a trabajar. Para nuestro ejemplo, y ya que vamos a pintar en pantalla el primer libro y el primer autor, nos posicionaremos dentro de la estructura libros dela siguiente forma:

El propio documento XSLT combina sentencias de transformación con código HTML. Por lo que encontraremos a continuación es un documento HTML.



Mi primer documento XSLT

...Código XSLT...

Aunque las sentencias del XSLT son bastantes, la que nosotros necesitamos conocer en este momento es la que nos ayuda a obtener el valor de una etiqueta XML. Cabe indicar que todas las etiquetas XSLT empiezas por xsl que es el namespace definido anteriormente.

Así, para recuperar el valor de una etiqueta usamos xsl:value-of. Como atributo de esta etiqueta encontramos select. El cual, nos sirve para seleccionar el nodo (elemento) del cual queremos extraer su valor:


Tanto en el template con el atributo match, como en la etiqueta xsl:value-of con el atributo select estamos utilizando valores XPath. Estos lo que vienen a reflejar, en grandes rasgos, son elementos dentro del árbol XML.

Lo último que nos quedará hacer es reflejar en el documento XML la relación con su fichero de transformación. Para ello utilizamos la siguiente línea dentro del fichero XML:

Aunque la potencia del XSLT es muy grande, nos vamos a encontrar que hay navegadores que no lo soportan. En el grupo de los navegadores que si lo soportan encontramos a FireFox, Internet Explorer 6,… y en el grupo de los que no Opera 8, Internet Explorer 5,…

Seguro que en el futuro, todos los navegadores incluirán el soporte de este potente lenguaje de transformación.