Mediante este sencillo ejemplo veremos cómo podemos crear bordes con puntos. Los cuales podremos aplicar a múltiples objetos de nuestra página HTML.
Los bordes se pueden configurar mediante el atributo border-style. Cuando queremos que el borde sea con puntos, deberemos utilizar el valor «dotted».
border-style:dotted;
Este valor se lo podemos aplicar a varios elementos HTML directamente o bien crear un estilo adhoc donde definamos este tipo de borde. En nuestro ejemplo se lo vamos a aplicar a las tablas y vamos a crear el estilo «borde_con_puntos», el cual, mediante estilos en linea, aplicaremos al elemento concreto que queramos.
Este ejemplo nos va a servir para recorrer un array bidimensional o matriz mediante el lenguaje VBScript. Los pasos son bastante sencillos. Lo primero será rellenar el array con datos. Esto lo vamos a hacer manualmente, posición a posición.
dim miArray(2,3)
miArray(0,0) = "Posición 0,0"
....
Para recorrer la matriz necesitaremos dos variables dentro de dos bucles for. La idea es ir recorriendo fila a fila, y por cada fila recorrer todas sus columnas.
También necesitaremos conocer el tamaño del array, tanto en filas como en columnas. Para ello usaremos la función UBound(matriz) que nos dará número de filas del array. Si queremos conocer el número de columnas deberemos de pasar a la función UBound un segundo parámetro indicando de que dimensión queremos conocer su tamaño UBound(matriz, dimension).
El bucle a utilizar será algo así…
for x=0 to UBound(miMatriz)
for y=0 to UBound(miMatriz,2)
document.write (miMatriz(x,y)
next
next
Será algo muy normal que en el desarrollo de nuestras aplicaciones web tengamos que incluir un formulario para obtener datos del usuario y lo más probable es que dentro de dichos formularios tengamos que recoger datos mediante checkbox. Imaginemos, por ejemplo, obtener los gustos del usuario, los nombre de los boletines a los que se quiere apuntar,….
Por ejemplo….
Actividades Deportivas:
A la hora de almacenar la información seleccionada por el usuario en una base de datos lo primero que se nos puede ocurrir es el almacenar los datos en campos booleanos. Es decir, que tendremos un campo por cada posible opción del formulario. Esto nos obliga a realizar tantos accesos a los campos de la base de datos (para insertar los datos) como campos tengamos, algo así como…
Vamos, un engorro. Y eso sin tener en cuenta que en cualquier momento nos pueden cambiar los requisitos de nuestro formularia y aparecer una nueva opción, lo cual implicaría alterar el diseño de la base de datos y del código que accede a la misma. Esto se complica sobremanera, ¿verdad?.
La solución a este problema es utilizar datos en formato bit. Es decir, nuestras opciones son una ristra de bits, donde el hecho de que un bit este a 1 significa que esa opción esta seleccionada y al estar a 0 significa que no se ha seleccionado la opción.
Partiremos de la base de que no hay ninguna opción seleccionada. Es decir, nuestro valor inicial es un 0.
Cuando el usuario pulse sobre uno de los campos cambiaremos su valor. Si el campo esta en 0 lo cambiaremos a 1 y si esta a 1 lo cambiaremos a 0. Para ello tendremos que hacer una operación de XOR (el operador XOR es ^) entre el valor actual de la cadena y una mascara que solo tenga a 1 el campo seleccionado.
En el caso de que el usuario seleccione baloncesto (su mascara será 01000) deberíamos de realizar la operación:
00000 XOR 01000 = 01000
Si ahora el usuario selecciona atletismo (mascara 00100) realizaremos la operación:
01000 XOR 00100 = 01100
Cuando el usuario pulse sobre una opción seleccionada, como se aplica el XOR, su valor cambiara a 0. Si pulsamos sobre baloncesto:
01100 XOR 01000 = 00100
Solo nos queda seleccionado el atletismo.
El último inconveniente que nos vamos a encontrar es que Javascript no trabaja con representaciones a nivel de bit, sino que lo transforma a valores enteros. Es decir, que nuestras operaciones serán con números enteros que serán potencias del 2.
En el caso expuesto los valores de las opciones serian…
Futbol = 1, Baloncesto = 2, Atletismo = 4, Balonmano = 8 y Gimnasia = 16.
El método que nos permitirá activar o desactivar las opciones es realmente sencillo:
function activarValor (numero) {
checkboxActivados ^= numero;
}
Donde checkboxActivados será la variable general que mantendrá el valor de las selecciones.
Para finalizar recordar que las operaciones entre el valor almacenado y las mascaras se lanzaran en el evento onClick sobre los checkbox.
AJAX podemos verlo como un paradigma de programación Web. Resumiéndolo podemos decir que permite la recarga de datos de la página sin necesidad de una recarga total de la misma. No debemos de tomarnos dicho paradigma como la solución a todos nuestros problemas de rendimiento. Sobre todo porque existen ciertos escenarios donde AJAX complica el diseño de una manera desmesurada.
Si bien, en ciertas ocasiones puede ser algo muy útil. Uno de los ejemplos prácticos es la validación de los datos del formulario. Cuando vamos a recuperar información del usuario podemos utilizar JavaScript de una forma muy potente para validar la información introducida. Por ejemplo podemos validar los tamaños del texto introducido, si cumple algún patrón, si son números o fechas validar rangos y límites,…
Pero todo tiene un límite. Y el límite de las validaciones del cliente es cuando queremos validar lógica de negocio. Me explico, podemos pedirle al usuario que tecleé su usuario y querer validar si existe dicho usuario en nuestra base de datos. Sería algo poco sensato el tener descargado en el cliente el listado entero de usuarios para saber si el dato introducido es correcto o no.
Es en estos casos cuando el paradigma AJAX nos da una gran potencia ya que podemos ir de forma asíncrona al servidor de negocio y validar si existe el dato introducido. De tal manera podemos avisar al usuario de forma rápida si su nombre es válido o no.
En este ejemplo vamos a ver cómo usar el paradigma AJAX para validar si el usuario introducido por pantalla ya le tenemos dado de alta en nuestras bases de datos. Algo muy útil en un formulario de alta de usuarios.
Creando el formulario y la capa oculta
Lo primero que tenemos que hacer es crear la página con el formulario. Tarea simple. ¿Quién no conoce el uso de la etiqueta FORM?
El comportamiento que vamos a dar a nuestro formulario es que una vez el usuario haya introducido su usuario vayamos a validarlo al servidor. Si el servidor me dice que ya existe el usuario, entonces deberemos de mostrarle al usuario una ventana diciéndole que ya existe el usuario en la base de datos.
Es por ello que necesitamos dos cosas más en nuestra página web. La primera es capturar el evento onChange del campo de texto del usuario. Es decir, una vez que el usuario tecleé el usuario y vaya a otro campo realizaremos la validación.
En el código que acabamos de poner llamaremos a la función JavaScript autentica() que será la que realice la validación asíncrona.
La segunda necesidad es la de tener una capa, oculta al principio, donde se le diga al usuario que su usuario ya está ocupado. Dicha capa la mostraremos si la respuesta del servidor es que si está ocupado y la ocultaremos nuevamente si la validación da un resultado positivo.
usuario Ocupado ¡¡¡
Función Autentica
Como hemos indicado en el párrafo anterior, la función autentica() será la que realice la petición asíncrona al servidor.
Dentro de la función lo que haremos serán tres cosas:
Recuperar el valor del usuario introducido por el usuario.
Montar la url del servidor donde el valor del usuario irá como parámetro.
Llamar a la función leer_doc(url) que es la que se encarga únicamente de realizar la petición a la URL indicada como parámetro.
Para realizar la llamada al servidor vamos a crear una variable request que será la que en toda la vida del programa JavaScript mantenga la referencia a la petición.
var req;
Dicha variable será la que dentro de la función leer_doc(url) realice la conexión mediante el objeto XMLHttpRequest.
El objeto XMLHttpRequest tiene dos formas de llamarse dependiendo del navegador en el que nos encontremos (que raro). Si existe el objeto como objeto del navegador bastará con realizar un new sobre el mismo, sino tendremos que instanciarlo como un ActiveX para los navegadores Internet Explorer (versiones 5 y 6). Quedándonos el siguiente código:
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequest y Callback
El objeto XMLHttpRequest se maneja mediante callbacks. ¿Qué quiere decir esto? Que la respuesta del objeto será manipulada por la función que le indiquemos. Para ello tendremos que informar a la variable .onreadystatechange
En nuestro caso será la función procesarRespuesta la que analice la respuesta.
Lo que nos quedará será el realizar la petición a la URL previamente montada. Para ello utilizamos el método .open
Una vez retornada la respuesta por el servidor los datos adjuntos a la misma irán a parar a nuestra función de callback procesarRespuesta().
En este caso, y como veremos en un momento, los datos devueltos por el servidor vienen en formato XML. Los datos los recuperaremos del atributo .responseXML del objeto XMLHttpRequest.
Como la respuesta viene en XML deberemos utilizar funciones del DOM para poder ver que valores tienen y actuar en consecuencia. En este caso la función .getElementsByTagName(«tag»).
Dentro del XML devuelto viene la etiqueta <existe> que tendrá un valor de «true» si el usuario enviado ya existe y un valor de «false» si el valor enviado no existe en la base de datos.
A si que en caso afirmativo pondremos la capa de error de la página a visible (el usuario existe) o la ocultaremos (si el usuario no existe)
function procesarRespuesta(){
respuesta = req.responseXML;
var existe = respuesta.getElementsByTagName('existe')
.item(0).firstChild.data;
if (existe=="true")
document.getElementById("error").style.visibility = "visible";
else
document.getElementById("error").style.visibility = "hidden";
}
Página PHP, ¿Nuestro WebService?
En esto del AJAX pasa a ser algo de vital importancia el uso de servicios web, ya sean WebServices, páginas con script de servidor, CGI o similares.
En nuestro ejemplo la llamada se hace a la https://lineadecodigo.com/samples/existeusuario.php?usuario=miusuario
Es decir, que estamos usando una página PHP.
Dicha página PHP es muy sencilla, y aunque lo suyo sería que fuese a una base de datos, lo que he hecho ha sido devolver un XML estático. Dicho XML solo varía cuando se meta un usuario en concreto («victor»).
true");
} else {
echo("false");
}
?>
Ahora que podemos complicar este código cuanto queramos. Acceder a una base de datos,…
El on AIR Tour es un evento donde expertos de Adobe enseñaran a crear aplicaciones AIR con Adobe Flex, HTML y JavaScript.
Entre los temas que se trataran tenemos:
Creación de su primera aplicación de Adobe AIR con Adobe Flex
Creación de su primera aplicación AIR con HTML y JavaScript
Aprovechamiento de HTML y JavaScript en Adobe AIR
Presentación de la API de Adobe AIR
Implantación y actualización de las aplicaciones AIR
Aplicaciones AIR de empresas intensivas de datos
Utilización de JavaScript Frameworks en las aplicaciones AIR
AIR acondicionado
Supongo que el hecho de que la entrada fuera gratuita ha conseguido que el evento este lleno y por lo tanto no se puede asistir al evento de Madrid.
El on AIR Tour sigue por otras ciudades europeas: Paris, Amsterdam, Bruselas, Londres, Dublin, Estocolmo, Berlin, Warswa, Praga, Munich y Milan hasta el 13 de junio.
Vas a mandar un SMS y solo puedes enviar 150 caracteres. La aplicación a ofrecer al usuario nos va mostrando el número de caracteres que van escritos. Es una ayuda del interface de usuario, haciéndole más usable.
Este simple interface le podemos lograr mediante un área de texto y un poco de código Javascript.
La solución técnica es muy sencilla, ya que el número de caracteres nos la da la longitud del área de texto.
Quizás el principal problema sea saber cada cuanto debemos de realizar el calculo del tamaño del área de texto. Una de las opciones sería realizar el calculo cada vez que el usuario pulse una tecla. Si bien, puede suponer una cuenta demasiado excesiva de los caracteres y habría que intentar hacerlo más espaciado, si bien, sin perder la cuenta.
Otra opción, y la que utilizamos, el utilizar un temporizador, el cual lanzaremos cada un tiempo determinado. Para ello nos apoyamos en el método setTimeOut(funcion,tiempoEnMilisegundos). Donde el parámetro función será la que calcule el tamaño del área y actualice el número de caracteres y el tiempoEnMilisegundos será, pues eso, cada cuantos milisegundos lanzamos el método. Aquí podemos jugar con los valores para ajustarlo. Para empezar vamos a utilizar 300ms.
La primera vez que lancemos el timer será al cargarse la página:
En posteriores ocasiones será cuando finalice de ejecutarse nuestro método WordCountOnLine:
function WordCountOnLine() {
textoArea = document.getElementById("area_texto").value;
// El numero de caracteres es su longitud
numeroCaracteres = textoArea.length;
document.getElementById("caracteres").value = numeroCaracteres;
setTimeout("WordCountOnLine();",300);
}
Este ejemplo se puede incrementar para que se cuenten las palabras introducidas por el usuario. Para ello es recomendable leerse el artículo Contar caracteres y palabras en JavaScript. Si bien, el código para descargar ya lleva incluida esta mejora. Así puedes ver lo simple que es hacerlo.
Código Fuente
Descárgate el código fuente de Contar caracteres on-line Y si te ha gustado nuestro código fuente puedes regalarnos una estrellaStar
Vídeos sobre Javascript
Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.
Si tenemos que describir la Web 2.0 estoy seguro que no podríamos obviar la palabra AJAX. Y es que podríamos decir que la Web 2.0 se sustenta sobre un modelo tecnológico asíncrono, el cual, mediante peticiones/respuesta para regenerar parte de la página busca dar un efecto de mayor velocidad al usuario final. Al menos, mayor que la recarga entera de la página. «Pure AJAX«.
Y si hablamos de AJAX tenemos que hablar del objeto XMLHttpRequest, sobre el cual nos apoyamos para realizar las peticiones asíncronas desde la página web.
Una de las posibilidades que nos ofrece este objeto es la de conocer la información de la cabecera http. Para ello tenemos los métodos .getAllResponseHeaders() o .getResponseHeader(etiqueta). El primero nos dará toda la información de la cabecera y el segundo nos permitirá ir a buscar un valor en concreto.
El uso de estas cabeceras puede ser de lo más variopinto y va desde la validación de las ultimas modificaciones del recurso para ver si es válido o no, control de la cache o del contenido de la respuesta,….
Para poder recuperar las cabeceras lo primero que tenemos que hacer es crear un objeto XMLHttpRequest. A la hora de cargar un objeto XMLHttpRequest lo podremos hacer de dos formas. Mediante el propio objeto XMLHttpRequest o bien mediante un ActiveX para mantener compatibilidad con IE5 e IE6.
req = false;
// Llama objeto XMLHttpRequest
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
if (req.overrideMimeType) {
req.overrideMimeType('text/xml');
}
// Si no funciona intenta utiliar el objeto IE/Windows ActiveX
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
Una vez que tenemos el objeto XMLHttpRequest instanciado deberemos de indicar cual es el método de callback, es decir, que método va a atender la respuesta. Esto lo hacemos mediante el atributo onreadystatechange.
Lo siguiente será llamar al método open, para indicarle los parámetros de conexión: método de envío, URL destino,…
Recuerda que la URL destino del método open tiene que estar en tu mismo dominio. En caso contrario no podrás acceder al contenido de dicha URL.
Por último llamaremos al método send. El cual realizará la conexión.
Hace tiempo me llegaba un email que me pedía que le explicase como se abría y cerraba una ventana, pasado un tiempo. A primera vista puede parecer un poco absurdo ¿para que abrir una ventana y cerrarla después?.
Pues si vuestras mentes son «maliciosas» podríamos pensar que es para abrir una ventana con banners de publicidad del tipo CPM – por impresión – o banners de intercambio que dan ratios de 3:1. Y la verdad es que no estaríamos muy desencaminados, ya que la gestión de la publicidad suele ser su fin más común de este ejemplo.
Como llevar esto a cabo es muy sencillo. Simplemente deberemos de guardarnos la referencia a la página que abrimos (si no la abrimos nosotros no podremos cerrarla). A si que lo primero que hagamos será algo parecido a la siguiente línea de código:
En la variable ventana tendremos la referencia a la ventana que hemos abierto.
Ahora tiene que pasar un cierto tiempo hasta que cerremos la ventana. Pues utilizaremos un timer setTimeOut(funcionALanzar,milisegundos) al cual le pasamos la función que queremos lanzar y el tiempo transcurrido el cual se lanzará dicha función. En nuestro caso serán 5 segundos.
setTimeout(cerrarVentana,5000);
Esa función será la que deberá de cerrar la ventana. ¿Y como puedo cerrar una ventana?. Pues si para abrirla invocamos su método open(), para cerrarla invocaremos su método close().
function cerrarVentana(){
ventana.close();
}
Código Fuente
Descárgate el código fuente de Abrir y cerrar una ventana Y si te ha gustado nuestro código fuente puedes regalarnos una estrellaStar
Vídeos sobre Javascript
Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.
Hace ya bastante tiempo leí en anieto2K un pequeño, pero a la vez interesante artículo sobre como validar números de tarjetas de crédito con JavaScript mediante unas sencillas expresiones regulares en Javascript. La idea es validar una tarjeta de crédito Visa y una tarjeta de crédito MasterCard. En nuestro caso vamos a ver el código completo del ejemplo.
Lo primero que tenemos que saber es el formato de los números de estas tarjetas de crédito, para poder montar las expresiones regulares que lo validen.
Visa, son 4 grupos de 4 dígitos cada uno. Además el primer número de la tarjeta tiene que empezar por 4. Un total de 16 dígitos. Un ejemplo de número de una tarjeta Visa sería el siguiente: 4552 7204 1234 5678.
Mastercard, de igual manera son 4 grupos de 4 dígitos cada uno. Pero en este caso los dos primeros dígitos van del 51 al 55. Un total de 16 dígitos. Un ejemplo sería 5588 3201 2345 6789.
Ahora construyamos las expresiones regulares. Lo primero que tenemos que saber es que una expresión regular comienza con /^ y termina con $/. Entre estos caracteres estará la expresión regular.
/^ expresion regular $/
Como vamos a manejar dígitos tenemos que saber que el dígito lo representa el carácter d. Así:
/^dd$/
sería una expresión regular que validase dos dígitos seguidos. Pero como no es plan de poner una ristra de caracteres d hasta llegar a 16 podemos utilizar la cardinalidad, es decir, el número de veces que se repite un dígito. Para ello utilizamos la siguiente expresión :
{cardinalidad}
Así los dos dígitos quedarían de la siguiente forma:
/^d{2}$/
Alguna cosa más que tenemos que saber es que si queremos que en una posición vaya un número específico valdría con poner el número y de igual forma podemos expresar rangos mediante corchetes y el rango en concreto.
[rango]
Así, si queremos hacer referencia a los números entre el 500 y el 509 podríamos tener la siguiente expresión regular:
/^50[1-9]$/
Por último, si queremos hacer referencia a que un número o carácter aparezca o no, es decir, la opcionalidad. Utilizamos el símbolo de cierre de interrogación (?). Esto nos servirá para hacer referencia que entre los grupos de dígitos de 4 de las tarjetas pueda venir un guión o no.
Finalmente las expresiones regulares de Visa y Mastercard serian las siguientes
Para validar si una cadena se ajusta a una expresión regular tenemos varios métodos. En nuestro caso utilizamos match. Este método le aplicamos directamente sobre la cadena
numer.match(/^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$/)
Esto nos devolverá un valor booleano. Es por ello que simplemente tendremos que comprobar el valor retornado:
if (!visa.match(/^4\d{3}-?\d{4}-?\d{4}-?\d{4}$/))
visa_error = "No es un número de Visa correcto";
if (!mastercard.match(/^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$/))
mastercard_error = "No es un número de Visa correcto";
Cuando ofrecemos un área de texto puede darse el caso que tengamos un límite de los caracteres a ser introducidos. Por lo que es probable que queramos contar caracteres y palabras en Javascript. En este caso sería bueno el irle ofreciendo al usuario el número de caracteres que se han insertado, y de paso las palabras.
Lo primero que vamos a hacer es crear un área de texto en HTML mediante el elemento textarea.
<form id="formulario" action="#">
<textarea id="area" cols="20" rows="10">
Texto dentro del área de texto
</textarea>
<br>
<input type="button" value="Contar las palabras" onclick="WordCount();">
</form>
Dentro del formulario incluimos un botón, que al ser pulsado invocará al método wordCount(), el cual contiene todo el código del ejemplo para contar caracteres y palabras en JavaScript.
Dentro del método wordCount() lo primero será obtener el texto del área de texto (valga la redundancia). Esto lo haremos mediante el método getElementById().
Una vez que tenemos el texto el número de caracteres lo obtenemos mediante la longitud del mismo con la propiedad .length del objeto String:
numeroCaracteres = texto.length;
Lo siguiente es contar las palabras que tiene dicho texto. Para poder hacer esto utilizaremos la función split() la cual trocea una cadena en subcadenas tomando como carácter de corte el que le pasemos como parámetro, y dejándonos el resultado en un array de palabras.
Lo más normal es pensar que contando la longitud del array de palabras tendremos la solución. Pero existen algunos casos que debemos de considerar:
Que exista un blanco al principio del texto.
Que exista un blanco al final del texto.
Que existan varios blancos seguidos.
En los dos primeros casos lo que tendremos que hacer es eliminar los espacios en blanco y en el tercer caso deberemos de reducir los X blancos en uno solo. Las cosas serian más fáciles si contásemos con funciones del estilo trim(), ltrim() o rtrim(). Pero en JavaScript no es el caso.
Para solucionar esto deberemos de recurrir a las expresiones regulares y a la función .replace(). Deberemos de crear expresiones regulares que simulen las excepciones y aplicar un replace (por nada en el primer y segundo caso y por un espacio en el tercer caso).
Las expresiones regulares que simulan las excepciones son:
De esta forma ya habremos conseguido un código que nos permita contar caracteres y palabras en Javascript.
Actualización 20.junio.2009:
El orden de ejecución para la eliminación de blancos será variosBlancos, primerBlanco y ultimoBlanco. Ya que si ejecutamos variosBlancos al final podemos tener un inicio o fin de cadena con varios espacios en blanco que no controlemos.
