SELECCIONAR TEXTO DE UN TEXTBOX

Para que el contenido de un textbox quede seleccionado al dar click sobre el, deveremos poner en el evento GotFocus las siguientes lineas:

Código:

Text2.SelStart = 0
Text2.SelLength = Len(Text2.Text)

Buscar un elemento en un arreglo con JS

Existe en php una funcion que nos permite buscar un elemento en un arreglo, sin embargo a la hora de querer realizar esto en js nos encontramos con que no hay un metodo parecido, ya se que es facil implementar esta funcion y san se acabo sin mas escandalo, sin embargo lo interesante que les voy a comentar es como hacerlo a traves de prototype ya se que no es nada del otro mundo pero puede que muchos no lo conozcan y creanme es una gran herramienta.

Prototype es un procedimiento que nos permite agregarle metodos a nuestros objetos y claro que esto tambien aplica a objetos tales como document, array, navigator etc, y ahi es donde radica su importancia, con esto podemos crear una libreria con los metodos mas utiles propios de otros lenguajes y que no hallan su equivalente en javaScript.
Veamos entonces como podemos hacer dicha implementacion:

Array.prototype.in_array = function(p_val) {
for(var i = 0, l = this.length; i <>
if(this[i] == p_val) {
return true;
}
}
return false;
}//fin de la inclusion


Observemos ahora:
En:Array.prototype.in_array = function(p_val) {
Primero seleccionamos en que objeto vamos a integrar el nuevo metodo, en este caso es sobre el objeto Array despues ponemos la palabra prototype que indica que lo que vamos a hacer es agregar un nuevo metodo sobre el objeto array, a continuación declaramos en nombre del nuevo metodo, este puede ser cualquiera solo hay que asegurarnos de que sea intuitivo y facil de recordar ;), en este caso le pusimos in_array, posteriormente declaramos una funcion donde podremos poner todos los parametros que decidamos admitir y finalmente creamos el cuerpo de nuestra funcion como si se tratara de cualquier otra.


Lo que hacemos a continuacion es facil de deducir, creamos un ciclo e inicializamos dos variables una con 0 y la otra con el valor de la longitud del arreglo, despues hacemos un recorrido por el arreglo buscando en cada celda si su contenido es igual a la palabra, numero o caracter buscado, en este caso dicho caracter nos llega en forma de parametro y lo recibe la variable p_val si el caracter es encontrado regresamos verdadero sin embargo si termina de recorrer todo el arreglo sin encontrar el caracter simplemente nos regresa un falso.

for(var i = 0, l = this.length; i <>
if(this[i] == p_val) {
return true; }
}
return false;

Para finalizar provamos nuestro metodo creando una variable tipo arreglo y haciendo una busqueda , si observamos bien la forma de llamar a estos metodos es poniendo el nombre de la variable seguido de un punto y el nombre de nuestro metodo seguido de sus parametros en caso de que los halla.

var v_array = [ 5, 10, 15, 20, 25];
document.writeln(v_array.in_array(10)); // true
document.writeln(v_array.in_array(11)); // false

Comillas y apostrofes

Mega super extra rapido post, para ver cual es la diferencia entre usar comillas y usar apostrofes en nuestro codigo php o js.

• SI PONEMOS APOSTROFES '' EL CONTENIDO SE IMPRIMIRA TAL CUAL, es decir si ponemos: echo 'el carro es de $persona' el resultado deberia de ser el carro es de $persona.
  
  
• SI PONEMOS COMILLAS IMPRIMIRA EL TEXTO E INTERPRETARA LAS VARIABLES, volviendo al ejemplo anterior sitenemos: echo 'el carro es de $persona' se imprimira en pantalla, el carro es de blanca en caso de que $persona=blanca.

Problemas con la ñ y acentos en javaScript

Algunas veces al momento de trabajar con javaScript nos encontramos con que no reconoce los caracteres acentuados o las letras ñ, muchas veces ni cuenta nos damos de que ese error esta latente solo hasta cuando probamos nuestra aplicacion, puede ser que no le demos mucha importancia a esto (y dependiendo para que utilicemos js puede que no la tenga), sin embargo si realizamos las validaciones de nuestro sitio con js puede que este error se convierta en una lata, asi que aqui hay algunas recomendaciones para solucionar este problema.

Casos de error

1) Regularmente con la codificacion utf-8 no debe de haber ningun problema (si no sabes que codificacion tienen tus paginas busca la palabra charset que se encuentra dentro de la etiqueta meta) sin embargo si es asi recomiendo que uses la codificacion española, observa la siguiente linea y prueba si el problema esta solucionado.

< meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
o bien
< meta http-equiv="content-type" content="text/html; charset=es-iso-8859-1" />

el charset debe de ser iso-8859-1 o es-iso-8859-1 que es la codificacion española, con esto en las expresiones regulares ya no tendremos problemas de validar las ñ's.


2) Bueno esta mas que ser la solucion 2 es una extencion de la primera, una vez que cambiamos el charset si estamos interactuando con una base de datos por ejemplo MySQL puede que hallamos observado que los acentos y palabras con ñ simplemente no los guarda, entonces diremos bonita solucion, me arregla un lado pero me descompone otro :P, bueno esto pasa por que sinos fijamos bien en la estructura de nuestra tabla veremos que en la columna cotejamiento tenemos definida la codificacion estandar utf y como ahora estamos usando una codificacion diferente, es logico que la base de datos no guarde la informacion de la manera que es debido, esto se soluciona facilmente cambiando el cotejamiento a uno compatible con nuestro tipo de codificacion, normalmente es un tipo spain o un tipo latin :)

3) Como habia comentado, es raro que la codificacion utf-8 nos de problemas, pero se puede dar la situacion de que la codificacion no sea el problema si no la incompatibilidad entre codificaciones, me explico, a mi me paso lo siguiente:

Tenia un archivo js externo y mi codificacion de paginas era la estandar es decir utf-8, al checar otras paginas en las que usaba expresiones regulares con la misma codificacion, note que no tenia ningun problema con la "ñ" sin embargo en esa pagina donde la evaluacion de los campos se hacia en el archivo externo simplemente no reconocia la ñ como caracter aunque la incluyera explicitamente (que es lo que hay que hacer) en mi expresion regular, no daba con el por que hasta que me di cuenta que como el archivo externo lo habia generado con el blog de notas de windows (de una u otra forma simpre windows tiene la culpa :P broma - broma fue mi estupidez)

la codificacion del documento habia sido Unicode en vez de utf-8 lo que hice a continuacion fue cambiar la codificacion de la pagina (eso es un decir por que la verdad cree un nuevo archivo que guarde con codificacion utf-8 e hice un copy - paste de mi archivo original al nuevo :D) y con esto como por arte de magia se soluciono el problema :), verifiquen esto por que puede que ahi radique el error.

4) De echo esta solucion debio de ir como numero 1, sin embargo no me acorde hasta que estaba escribiendo el punto anterior, como mencione si usamos expresiones regulares para validar campos una expresion comun es hacer que el campo solo acepte letras eso seria mas o menos algo asi: /^[a-zA-Z]$/ y listo, sin embargo la "ñ" como muchos sabemos no forma parte del alfabeto americano, britanico etc, etc por lo que hay que agregar esta letra de forma explicita, haciendo: /^[a-zA-Z ñ Ñ]$/ y con esto tendremos solucionado el problema, independientemente de las soluciones anteriormente vistas, esta es una correccion que por default debera ir para que mi expresion acepte ñ's perdon por ponerla hasta este punto :P que quieren se me paso :).

como nota: Aunque por deduccion ya lo debieron de haber supuesto(redundate, reundate :P), para los acentos es igual es decir deberan agregarlos explicitamente /^[a-zA-Z ñ Ñ á Á éÉ íÍ óÓ úÚ]$/ traten de intentar esta solucion antes que las anteriores y espero que con esto quede todo resuelto :).

5) Este es el ultimo punto y mas que una solucion es un truco muy util para estos problemas de codificacion, sin embargo alejandonos un poco del titulo, este es un truco para php, que por medio de la funcion mb_convert_encoding es capaz de cambiar la codificacion de los caracteres de un bloque de texto determinado:

$tex = mb_convert_encoding($texto, “ISO-8859-1?, “UTF-8?);

o bien

$tex = mb_convert_encoding("Ñoño nuñes tiene gripíta", “ISO-8859-1?, “UTF-8?);

Bueno es todo en este post espero que alguna de estas soluciones les sirva. =)

Referencia de eventos en JS

Ya se que existen muchas tablitas parecidas a esta, peroyo tambien quiero tener la mia asi que ahi va:

Evento	Tiene efecto sobre	Sucede cuando	Manejador
Abort	imágenes	El usuario cancela la carga de una imagen	onAbort
DblClick	Enlaces,Botones	El usuario hace doble click sobre el objeto	onDblClick
DragDrop	Ventanas	El usuario suelta un objeto sobre la ventana del navegador	onDragDrop
Blur	ventanas y elementos de formularios	El usuario abandona la ventana o elemento (pierde el foco)	onBlur
Change	text fields, textareas, select lists	El usuario cambia el valor de un elemento	onChange
Click	buttons, radio buttons, checkboxes, submit buttons, reset buttons, links	El usuario pulsa sobre el elemento o el enlace	onClick
Error	images, windows	La carga de la ventana o la imagen causa un error	onError
Focus	windows and all form elements	El usuario pasa el control (foco) a un elemento determinado	onFocus
KeyDown	documents, images, links, text areas	El usuario pulsa una tecla	onKeyDown
KeyPress	documents, images, links, text areas	El usuario da una pulsación con una tecla o la mantiene pulsada	onKeyPress
KeyUp	documents, images, links, text areas	El usuario deja de pulsar una tecla	onKeyUp
Load	document, body	El usuario carga una página en el navegador	onLoad
MouseDown	documents, buttons, links	El usuario pulsa una tecla del ratón	onMouseDown
MouseMove		El usuario mueve el ratón	onMouseMove
MouseOut	areas, links	El usuario mueve el cursor fuera del elemento	onMouseOut
MouseOver	links	El usuario mueve el cursor dentro del elemento	onMouseOver
MouseUp	documents, buttons, links	El usuario deja de pulsar una tecla del ratón	onMouseUp
Move	windows	El usuario (o algún script) mueve una ventana	onMove
Reset	forms	El usuario pulsa el botón de reset	onReset
Resize	windows	El usuario (o algún script) redimensiona la ventana del navegador	onResize
Select	text fields, textareas	El usuario selecciona el contenido de los elementos del formulario	onSelect
Submit	forms	El usuario pulsa el botón para enviar un formulario	onSubmit
Unload	document body	El usuario sale de la página (carga otra página o cierra esa ventana del navegador)	onUnload

Incremento de fechas con js y php

Ya se que eh hablado mucho sobre manejo de fechas en js pero este post es a peticion de un amigo y nos plantea un problema muy especifico y que a su ves es muy comun en cierto tipo de desarrollos.

Supongamos que en un sitio debemos manejar dos fechas para un proceso x, la fecha de inicio y la fecha final o limite, la situacion es que una vez establecida la fecha de inicio, automaticamente aparesca la fecha limite que es igua a fecha de inicio + 10 dias habiles, es decir los sabados y domingos no cuentan, bueno pues esto es muy facil de resolver, apoyandonos de la libreria DateJS (si no sabes nada de esta libreria presiona aqui)aunque tambien lo podriamos hacer sin ningun problema con el JS tradicional, esta libreria nos hara mas facil el trabajo. Pues bien lo unico que hay que hacer es insertar la libreria DateJS y crear una funcion como la siguiente:

function aumento_fecha(){

//incremento de diez dias en la fecha

var vjafecha=document.formulario.fecha.value;//obtenemos la fecha de inicio que es regularmente la fecha actual.

var dias=10;// # Dias que se deben incrementar

var nvafecha=Date.parse(vjafecha);//pasando la fecha de inicio leida a un objeto tipo date

var sabDom=0;//numero de sabados y domingos que hay en el rango


for (n=1;n<=dias;n++){//hacemos un ciclo para aumentar los 10 dias

if(nvafecha.is().saturday()|nvafecha.is().sunday()) sabDom=sabDom+1;//preguntamos si el dia es sabado o domingo

nvafecha.addDays(1);//nos pasamos al dia siguiente

}

nvafecha.addDays(sabDom);//aumentamos el # de sabados y domingos encontrados

document.nuevo_ja.f_limite.value=nvafecha.toString('yyyy-MM-dd');//imprimiendo fecha final con el formato año-mes-dia en el textbox f_limite del documento
}

Una vez creada la funcion la mandamos llamar ya sea en la carga del body onload="aumento_fecha" o cuando la caja de texto de fecha inicial pierda el foco o cuando la de fechalimite obtenga el foco etc.

Claro??? espero que si, secillo??? sin duda alguna pero eso si muy eficaz ;)

Pero no nos detengamos aqui, supongamos ahora y como es natural que los dias feriados tambien son tomados como dias inhabiles y por lo tanto deben ser ignorados en el incremento de los 10 dias, una forma sencilla de hacer esto es almacenando esos dias en una base de datos, para la siguiente solucion se tomo en cuenta que en una base existe un campo para cada mes del año en el cual se encuentran los dias inhabiles separados con comas, de la siguiente manera:
enero -> 1,5,12
febrero-> 10, 23, 28
etc.

Tomando en cuenta estas consideraciones, una de las soluciones que podemos poner en pratica es la siguiente:

MANEJO DE FECHAS EN JAVA SCRIPT parte 1

Un saludo a todos los lectores, en este post vamos a hablar un poco del manejo de fechas con

javaScript, como aclaracion no pretendo hacer un analisis extenso sobre este tema si no mas

bien crear una pequeña guia de referencia de la cual podamos partir para ahondar mas en este

tema.

-¿Como maneja java Script las fechas?

Ah pues bien amigo para empezar te dire que el objeto encargado de la manipulacion de fechas

en JS es el objeto date.

JS maneja las fechas en milisegundos, esto se entendera mejor en el ejemplo.

Todos los valores que pasemos como parametros al constructor del objeto date seran entero.

En los meses 0 = ENERO y 11 = DICIEMBRE

En los dias 0 = DOMINGO y 6 = SABADO

Las horas se ponen en formato HH:MM:SS (las horas van de 0 a 23, los minutos y los segundos de

0 a 59)

Si creamos un objeto date sin parametros, este tomara los valores de la fecha actual

ejemplos:

var fecha= new Date(2008,11); en parametros (año, mes)
var fecha= new Date(2008,11,12); en parametros (año, mes,dia)
var fecha= new Date(2008,11,12,10); en parametros (año, mes, dia, horas)
var fecha= new Date(2008,11, 12, 10, 30); en parametros (año, mes, dia, horas, minutos)
var fecha= new Date(2008,11, 12, 10, 30, 50); en parametros (año, mes, dia, horas, minutos, segundos)


-ok, ok ya se como construir un objeto Date pero ahora dime ¿que puedo hacer con ese mentado objeto?

Ah bueno mi querido amigo para poder manipular este objeto como en todos debemos de hacer uso

de sus metodos los cuales se dividen en 2, los primeros sirven para obtener informacion del
objeto date tales como la fecha actual o en que año estamos etc, el segundo tipo de metodos
sirven para establecer los valores del objeto date, es decir podemos hacer que un objeto date
nos guarde el valor de un año poniendo setYear(1999); pues bien sin mas te dejo con los
metodos mas comunes del objeto date:

metodos:
nota: llamar metodos ejemplo: fecha.getDate(); donde fecha es un objeto date

getDate(); devuelve el dia como un entero entre 1 y 31

getDay(); devuelve un num del 0 al 6 indicando siel dia es lunes, martes, miercoles ...

getHours(); Devuelve la hora

getMinutes(); Devuelve los minutos

getMonth(); devuelve el mes como un numero de 0 a 11

getTime(); Devuelve el tiempo transcurrido en milisegundos desde el 1 de enero de 1970 hasta

el momento definido en el objeto date

getYear(); devuelve el año

si a los metodos anteriores les quitamos el get y le ponemos el set podemos modificar dicho

parametro en el objeto date p.e:

setDate(12,0) en parametros (dia, mes)->pone en el objeto date el valor del dia 12 del mes de enero.

setDay();
setHours(); ... etc

toGMTString(); Devuelve una cadena que usa las convenciones de internet con la zona horaria.


- Ah orale pues no esta tan complicado esto del objeto date pero ahora dime ¿ para que puedo ocupar todo esto?

Bueno bueno me agrada que vallas entendiendo todo, pues bien como en todo tipo de

programacion, la funcionalidad que puedas encontrarle ah esto solo esta limitado por tu

creatividad, ahora bien los usos mas comunes que se le dan a los objetos date son para guardar

fechas ya sea la actual o una especifica y hacer operaciones con ellas.

-Haber haber, ahi si ya me perdiste como es eso de hacer operaciones con ellas???

Ok no te preocupes tal vez no fui lo bastante claro pero ahora te explico, puede ser muy

posible que un cliente te pida en una aplicacion el manejo de fechas como por ejemplo el

establecer determinadas fechas limites, es decir que pongas una fecha limite apartir de la

fecha actual y llegada la fecha limite el sistema que desarrollamos nos mande un aviso.

Para que me entiendas mejor has de cuenta que hoy es 12 de agosto del 2008 y que registras un

pedido ya que tu eres dueño de una tienda de viveres, ahora ese pedido en automatico sabemos

que debe de ser entregado antes de 10 dias apartir de la fecha en que se registro el pedido,

pues bien usando el objeto date sumaremos esos 10 dias a nuestra fecha actual para de esta

manera obtener la fecha limite de esta forma si el pedido aun no ah sido atendido y la fecha

limite esta por cumplirse, podemos mandar un mensage informando elvencimiento de dicha fecha.

-ok ok creo que ya te entendi eso de sumar fechas y me supongo que para restar es algo similar, pero segun me acuerdo dijiste que java script maneja todo lo que son fechas en milisegundos, entonces no me queda muy claro ¿como puedo sumar o restar fechas?

ok lo siento tienes razon esto puede parecer muy confuso sin embargo es muy sencillo, me

alegra que mencionaras la propiedad que dice que JS maneja las fechas en milisegundos, eso

quiere decir que pones atencion y vas realmente por buen camino, ademas esta propiedad es la

base para el manejo de fechas con JS. Muchos olvidan esta propiedad y quieren manejar fechas

sumandole al objeto date un numero o haciendo teatro y maromas.

-bien bien si ya dijiste mucho pero la verdad no te acabo de entender

mira lo que quiero decir es que algunos al no estar familiarizados con el objeto date frente a

situaciones como:

sumarle fecha limite ->3 dias apartir de la fecha actual

entonces ellos hacen algo como:

var fecha_actual=new Date();
var fecha_limite=fecha_actual + 3;

Eso por supuesto que es incorrecto,al menos en la estructura elemental de javaScript, algo

como eso se puede lograr a traves de ciertas librerias que ya comentaremos despues, pues bien

te decia y por que es incorrecto?

- no se tu dime, tu eres el que me esta enseñando

jejeje que conchudote me saliste eh pues bien eso es incorrecto por que presisamente se

olvidaron de lapropiedad que me dijiste, quieren sumar el tiempo en dias y ...

- ya se ya se JS maneja el tiempo en milisegundos, pero entonces como le hago para agregar esos 3 dias que quiero digo, segun tu ejemplo?

ahh tipo listillo, ok te dire mira lo primero ya lo sabes todo se maneja en milisegundos, lo

segundo que debes de saber es que los dos metodos que te permitiran manipular de la forma que

queremos las fechas son los metodos getTime() y setTime();, por sino recuerdas para que servia

cada uno aqui te lo vuelvo a repetir:

getTime(); Devuelve el tiempo transcurrido en milisegundos desde el 1 de enero de 1970 hasta

el momento definido en el objeto date

setTime(); Establece una fecha pasandole en milisegundos el valor de esta.


Pues bien para manejar fechas esos son los elementos basicos que siempre debemos recordar.

ok,ok ya te entendi eso pero ya me lo repetiste muchas veces, dejate de rodeos y terminame de explicar como manipulo esas fechas???

Mira pues contigo, ok ya me dejo de rodeos tu ansiedad me agrada por que parece que estas
sediento de conocimientos, pues mira para que acabes de entender esto aqui te pongo un ejemplo
que encontre en:

http://www.webestilo.com/foros/mensaje.phtml?foro=11&msg=39495

, acoplado a nuestro caso que es aumentar 3 dias la fecha actual para obtener asi la fecha limite.

-vaya hasta que por fin vas a poner algo interesante!!!!

Bueno como ya repeti hasta el cansancio JS maneja el tiempo en milisegundos por lo que los 3

dias que deseamos sumar a la fecha actual los debemos de convertir a milisegundos, bueno por

si no andas muy despierto la conversion quedaria asi = 3dias x 24 horas x 60 minutos x 60

segundos x 1000 para pasar todo a milisegundos, ahora veamos como hacemos esto en una funcion:


function actualizar(){
milisegundos=parseInt(3*24*60*60*1000);//pasando los 3 dias a milisegundos

fecha=new Date();//creamos un objeto date con la fecha actual
dia=fecha.getDate();//obtenemosdia actual
mes=fecha.getMonth()+1;//obtenemos mes actual
anio=fecha.getYear();//obtenemos el año actual

document.theForm.campo1.value=dia+"/"+mes+"/"+anio;//mostramos la fecha actual en un campo de texto.

tiempo=fecha.getTime(); //obtenemos el valor en milisegundos de la fecha actual.

total=fecha.setTime(parseInt(tiempo+milisegundos)); //sumamos a el valor obtenido los

milisegundos correspondientes a los 3 dias que deseamos aumentar, en caso de que quisieras

estabeceruna fecha 3 dias antes en vez de 3 dias despues, restamos el valor en vez de sumarlo.

dia=fecha.getDate();
mes=fecha.getMonth()+1;
anio=fecha.getYear();

document.theForm.campo2.value=dia+"/"+mes+"/"+anio; //establecemos fecha limite en un campo de texto
}

Aunque este manejo de fechas sea correcto, es mejor que este calculo lo hagas si es posible en
el servidor en lugar del cliente.

proximo post DateJs donde veremos lo facil que es el manejo de fechas con esta libreria gratuita y que nos simplifica en buen medida el trabajo, ademas es muy facilde implementar, bueno hasta el siguiente post.

Redireccion de paginas

Muchas veces tenemos la necesidad de realizar un redireccionamiento entre una y otra página. Si el servidor contaba con soporte para lenguajes como ASP, CGI o PHP esto era muy fácil, pero para aquellos que no lo tienen, pueden utilizar alguno de los siguientes métodos.



1- Inserta el siguiente script entre las etiquetas <head> y </head>:

<head>

<script languaje="JavaScript">

location.href='direccion.html';

</script>

</head>

2 - Otro método puede ser agregando la acción OnLoad dentro del Body:

<BODY onLoad = "parent.location = 'Direccion.html'">

3 - También se suele utilizar la etiqueta meta Refresh, para redireccionar a X cantidad de segundos:

<META HTTP-EQUIV="Refresh" CONTENT="0;URL=direccion.html">

0 es la cantidad de segundos que va a esperar antes de realizar la redirección

Y direccion.html es la página a redireccionar

Uso de un Archivo externo en JS (compartir codigo) y algo +

Al momento de realizar una aplicacion de tamaño regular al fin de un tiempo podremos observar que como en muchos otros casos existe si no mucho una buena cantidad de codigo que se repite en la mayoria de nuestras paginas, para el buen programador eso aveces suele ser molesto ya que al final de nuestra aplicacion tendremos muchas lineas de codigo repetido que aumentan el tamaño de nuestra aplicacion, una solucion a esta situacion es poner todo ese codigo que se usa constantemente en un archivo con extension .js, cabe aclarar que en ese archivo ira unica y exclusivamente codigo javascript y se invocara en nuestra pagina principal de la siguiente manera:

<script languaje="JavaScript" src="codigo.js"></script>

Mientras buscaba el como hacer esta insercion me encontre con 2 posiciones ambas validas sobre el uso de archivos externos, unos dicen que no tiene caso hacer uso de archivos externos ya que volvemos a lo que en un principio queriamos eliminar, explico esto:
Una ves descargada la pagina al momento de llamar una funcion contenida en nuestro archivo externo, el navegador tendra que ponerse en contacto nuevamente con el servidor para leer este archivo y eso es sacrilegio ya que una de las ideas con las cuales nacio JS era presisamente evitar realizar llamadas constantemente al servidor para de este modo disminuir el trafico que se pudiera generar con este, por tal motivo muchos se ponen en contra del uso de archivos externos, sin embargo en la otra cara de la moneda el uso de archivos externos tiene dos grandes y claras ventajas:

1. El código sólo se carga una vez.Para el resto de páginas en que se use el archivo, el navegador utilizará la copia del fichero que tiene en la caché (no lo descarga de nuevo).
2. Modificando un sólo fichero cambiamos el código de todas las páginas en las que se utiliza (esto es algo realmente importante).

A mi parecer el uso de archivos externos es recomendable, sin embargo cada uno de ustedes tiene la ultima palabra ya que cada uno se enfrenta a situaciones diferentes en las que deberan sopesar si las ventajas de usar codigo encapsulado js son mayores a las de no usarlo.

Otro punto que tambien hay que tener en cuenta que la incluisión de JavaScript en ficheros externos sólo está soportada a partir de las versiones 3.x del IE y del Navigator, aunque esto ya no tiene tanta importancia como años anteriores ya que son pocos los ordenadores que no vengan con IE 6 como minimo, no esta de mas mencionarlo.

A continuacion unos pequeños tips para evitar errores comunes:

FORMATO DE UN ARCHIVO .JS

• Los archivos js se guardan con el formato "nombreDelArchivo.js"
• El fichero js solo debera de contener codigo javaScript, el archivo nos generara error o simplemente no funcionara si le incluimos codigo html, ni siquiera debera llevar las etiquetas de script( <script languaje="JavaScript" > y </script> )

Otra mencion que nos podria ser util, se puede ver en el siguiente bloque de codigo:


<html>

<head>

<title>Usando js</title>



<script language="Javascript" src="scripts.js">

<!--

alert (' Error con el fichero js ');

// -->

</script>



</head>

<body>

Aqui va el resto de la página

</body>

</html>


Como se podra observar entre las etiquetas de llamada del script existe codigo(en este caso es un mensage de alerta), este codigo no se ejecutara a menos que la lectura del archivo .js falle, es decir en este ejemplo si algo falla al momento de caragar el archivo scripts.js saldra una ventana informandonos del error.

OTROS
Existen ocasiones en que apesar de que todo nuestro codigo parece estar bien y aunque lo revisamos ya por enesima al momento de probar nuestra aplicacion esta inexplicablemente no funciona como deseamos y nos saca valores extraños, aqui 3 puntitos que hay tomar en cuenta y que pueden causar el comportamiento extraño de nuestra aplicacion sin que nosotros nos demos cuenta:

1. Evitar que las funciones creadas tengan el mismo nombre que algun campo.
2. A veces al momento de jalar un valor de un formulario puede que el valor que nos mande sea undefined, una causa posible de este error es que tal vez estamos repitiendo el nombre o el id de los elementos por lo que el programa no sabe a cual de los 2 elementos te refires y por eso te manda un valor de undefined.
3. En las expresiones regulares siempre comenzar con el signo de ^y terminar con el de $
   

jQuery

jQuery es un nuevo tipo de biblioteca o framework de Javascript que permite simplificar la manera de interactuar con los documentos HTML, permitiendo manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a nuestras páginas web. jQuery, al igual que otras librerías, ofrece una serie de funcionalidades basadas en Javascript que de otra manera requerirían de mucho más código. Es decir, con las funciones propias de esta librería se logran grandes resultados en menos tiempo y espacio.

Muy util, ademas es gratuita.
links ayuda:
info: http://es.wikipedia.org/wiki/JQuery
descaragas: http://jquery.com/

Metodos utiles JavaScript

M 1: getElementById()
Uso: var elemento = document.getElementById(id);

Este método pertenece al objeto document. Con él obtendremos el objeto que hace referencia al elemento con un id concreto. Por ejemplo, queremos obtener el objeto del elemento “status”:

<div>

<span id=”status”>Hola mundo...</span>

</div>

<script type=”text/javascript”>

// Obtenemos el elemento “status”

var el = document.getElementById(“status”);

// Mostramos mediante una alerta el contenido del elemento

alert(el.innerHTML);

</script>



Función 2: getElementsByTagName()
Uso:var array_elementos= elemento.getElementsByTagName(tag);

Sirve para obtener un array con todos los elementos con un tag concreto que están contenidos dentro de un elemento. Veamos una ejemplo. Queremos cambiar el color del texto de todos los elementos con tag “A” contenidos dentro del elemento con id “links”:

<a href=”/”>Home</a>

<div id=”links”>

<a href=”http://google.com”>Google</a>

<a href=”http://ubuntu.com”>Ubuntu</a>

<a href=”http://debian.org”>Debian</a>

</div>

<script type=”text/javascript”>

// Obtenemos el elemento con id “links”

var el = document.getElementById(“links”);

// Ahora obtenemos todos los elementos con tag A que hay

// dentro del elemento 'el'

var as = el.getElementsByTagName(“A”);

// Y finalmente recorremos el array de elementos para

// cambiarles el color a cada uno

for (var i=0; i<as.length; i++) {

as[i].style.color = ‘#000'; // negro

}

</script>



Función3: join()
Uso: var string = array.join(string);

El método join() pertenece al objeto Array (todos los arrays en JavaScript son un objeto Array), y nos servirá para unir todos los elementos de un array para forma una cadena de texto. Es el equivalente en PHP a implode(). Ejemplo: Queremos unir todos los nombres de un array mediante comas:
// Creamos el array de nombres
var nombres = ['Luis','Javier','Sancho','Roberto','Rafael','Manuel'];
// Unimos todos los elementos separándolos por comas
var juntos = nombres.join(“, “);
// Y lo mostramos
alert(juntos);

unción4: split()
Uso:var array = string.split(string);

Al igual que join(), split() también es un método del objeto Array, aunque sirve exactamente para lo contrario: dividir una cadena de texto en un array. Siguiendo con el ejemplo anterior:
var juntos = “Luis, Javier, Sancho, Roberto”;
var nombres = juntos.split(“, “);
for (var i=0; i)...

Truco: Usados ambos métodos conjuntamente podremos crear una función para sustituir un texto por otro en una cadena dada:
function str_replace(cadena, cambia_esto, por_esto) {
return cadena.split(cambia_esto).join(por_esto);
}
alert(str_replace('Hola mundo!','mundo','world'));


Función5: addEventListener() / attachEvent()
Uso: Internet Explorer: elemento.attachEvent(“on”+evento, funcion);
Resto de navegadores: elemento.addEventListener(evento, funcion, false);

Ambos métodos hacen exactamente lo mismo, sólo que, como ocurre en otros cientos de ocasiones, Microsoft usa su propia implementación del DOM. Con este método añadiremos eventos a cualquier elemento de la página web, tal como onclick, onmouseover, onmouseout, etc.

Veamos un ejemplo. Crearemos una función para la abstracción de navegadores, es decir, para que funcione tanto en IE como en Firefox o cualquier otro navegador; y después añadiremos el evento onclick a varios elementos DIV para que muestre su contenido mediante una alerta al hacer clic sobre ellos.


<div id=”frases”>

<div>Hola mundo!</div>

<div>Foo bar</div>

<div>Lorem Ipsum</div>

</div>

<script type=”text/javascript”>

// Creamos la funcion para añadir eventos

function nuevo_evento(elemento, evento, funcion) {

if (elemento.addEventListener) {

elemento.addEventListener(evento, function, false);

} else {

elemento.attachEvent(“on”+evento, function);

}

}

// Obtenemos los elementos DIV a los que queremos añadir nuestro evento onclick

var divs = document.getElementById(“frases”).getElementsByTagName(“DIV”);

// Recorremos todos los divs

for (var i=0; i<divs.length; i++) {

// Añadimos el evento onclick al div

nuevo_evento(divs[i], “click”, function(){

// Hacemos que muestre el contenido del DIV

alert(this.innerHTML);

});

}

</script>

Cuando hagamos clic en uno de los DIV, se nos mostrará una ventana de alerta con su contenido.

Función6: focus()
Uso: elemento.focus();

Con este método conseguiremos pasar el foco a un elemento de un formulario. Ejemplo:

<form>

<input type=”text” id=”nombre” value=”Javier” />

<input type=”text” id=”apellidos” value=”Perez” />

</form>

<a href=”#” onclick=”document.getElementById(“nombre”).focus()”>Nombre</a>

<a href=”#” onclick=”document.getElementById(“apellidos”).focus()”>Apellidos</a>



unción7: createElement() / appendChild()
Uso: var elemento = document.createElement(tag);

Con éste método del objeto document crearíamos un nuevo elemento con un tag determinado. Ejemplo: var div = document.createElement('DIV');
Uso: elemento1.appendChild(elemento2);

Con este método añadiremos el elemento “elemento2” a “elemento1”. En el siguiente ejemplo, añadiremos elementos a una lista de forma dinámica:

<input type=”text” id=”texto” />

<input type=”button” value=”Crear” onclick=”crear()” />

<ul id=”lista”></ul>

<script type=”text/javascript”>

function crear() {

// Obtenemos el valor entrado en la caja de texto

var valor = document.getElementById(“texto”).value;

// Creamos un nuevo elemento LI

var li = document.createElement(“LI”);

// Añadimos el valor introducido al nuevo elemento

li.innerHTML = valor;

// Añadimos el elemento LI a la lista UL

var ul = document.getElementById(“UL”);

ul.appendChild(li);

// Vaciamos la caja de texto

document.getElementById(“texto”).value = “”;

}

</script>



Función8: removeChild()
Uso: elemento.removeChild(hijo);

Este método es el usado para eliminar elementos. Se elimina el elemento hijo del objeto. Si queremos eliminar un objeto concreto, tendremos que hacerlo de la siguiente manera:
// Obtenemos el elemento
var el = document.getElementById(“elemento-a-eliminar”);
// Obtenemos el padre de dicho elemento
// con la propiedad “parentNode”
var padre = el.parentNode;
// Eliminamos el hijo (el) del elemento padre
padre.removeChild(el);


Función9: setTimeout() / setInterval()
Uso:var temporizador = setTimeout(funcion, milisegundos);
var intervalo = setInterval(funcion, milisegundos);

Ambos métodos (objeto window) nos sirven para ejecutar código javascript cada x milisegundos, bien para que se ejecute una sóla vez (setTimeout) o bien para que se ejecute ilimitadamente (setInterval). Ambos se pueden cancelar mediante clearTimeout(temporizador) y clearInterval(intervalo). Veamos un ejemplo, donde se muestra la hora y fecha del sistema cada segundo en un DIV:

<div id=”fecha”></div>

<script type=”text/javascript”>

setInterval(function(){

document.getElementById(“fecha”).innerHTML = new Date();

},1000);

</script>




Función10: alert() / confirm() / prompt()
Uso: alert(mensaje);
var resultado = confirm(mensaje);
var resultado = prompt(mensaje, valor);

Con estos métodos (objeto window) mostraremos ventanas modales al usuario. Con alert() simplemente, como hemos visto en otros puntos, mostraremos un mensaje. Con confirm() haremos exactamente lo mismo, pero además obligará al usuario a seleccionar entre dos opciones, una positiva y otra negativa, que se devolverá como parámetro (boolean). Y con prompt() pediremos al usuario que introduzca un texto en una ventana modal. Veamoslo con un ejemplo:
// Pedimos al usuario que introduzca su nombre
var nombre = prompt(“Introduzca su nombre”);
// Pedimos confirmación
if (confirm(“¿Seguro que su nombre es ”+nombre+”?”)) {
// Respuesta afirmativa...
alert(“Hola ”+nombre);
}

confirm() es muy útil para confirmar clics en enlaces comprometidos, que hagan operaciones críticas como eliminación de datos.

<a href=”http://miweb.com/delete/record?id=123” onclick=”return confirm('¿Está seguro?');”>Eliminar registro</a>



Existen muchos más métodos a nuestra disposición, aunque hay que tener en cuenta que Internet Explorer no cumple el estándar ECMAScript/DOM (entre otros tantos estándares web), y puede que un método no funcione igual en IE que en Firefox o Safari.

Aprenderse el DOM es fundamental para poder llegar a ser un buen profesional, pero por suerte para nosotros existen librerías Javascript que nos harán la vida mucho más fácil, como jQuery, la sensación del momento entre los programadores Javascript.

Validacion de textbox con java script

Antes de empezar con este post aqui les pongo la direccion de un manual muy bueno de JS, no esta de mas que le den una checada: http://www.jorgesanchez.net/web/javascript.pdf
links ayuda:
http://www.elcodigo.net/tutoriales/jsavanzado/jsavanzado13.html
http://questchile.wordpress.com/2007/08/22/manejando-eventos-del-teclado-con-javascript/


Ahora si empezamos:

Supongamos que tenemos una caja de texto donde guardaremos el nombre de nuestro usuario:




<html>

<head></head>

<body>

<form id="nuevo" name="nuevo" method="post" action="manejador_php_del_formulario.php">

Nombre

<input type="text" name="nombre" />

</form>

</body></html>

nota: El uso del formulario (etiqueta form) no es precisamente necesario si no se quiere enviar la informacion capturada a algun lado como p.e una cuenta de correo o una bd.

Bueno ya tenemos nuestra caja de texto en una pagina html ahora definimos que es lo que queremos validar, en primer lugar nos interesa que la caja de texto no se encuentre vacia. veamos como validar esto:

nota2: Recordar que es recomendable poner el codigo js dentro de las etiquetas de cabecera (head) aunque puede ir en cualquier otro lado.
_________________________________________________
VALIDAR QUE UN CAMPO NO SE ENCUENTRE VACIO
SECCION DE CODIGO
----------------------------------------------------------------------



<script language="javascript" type="text/javascript"> //declaramos inicio de codigo JS

//esta funcion nos sirve para saber si hay por lo menos un caracter dentro del texbox, muchos hacen simplemente algo como

//if (campo=="") alert ("favor de no insertar su nombre");, pero esta validacion puede estar sujeta a errores ya que si el usuario inseta uno o muchos espacios en blanco la condicion anterior dejara de ser verdadera ya que el texbox contendra algo aunque estos sean espacios en blanco, por eso aqui saltamos los espacios en blanco y verificamos si hay algo mas.

function vacio(q) { //la variable q contiene el valor del texbox

for ( i = 0; i < q.length; i++ ) { //la funcion q.length devuelve el tamaño de la palabra contenia por el textbox

if ( q.charAt(i) != " " ) {//la funcion q.charAt nos deuelve el caracter contenido en la posicion i de la variable q

return true

}

}

return false;

}



//valida que el campo no este vacio y no tenga solo espacios en blanco

function valida(F) {



if( vacio(F.campo.value) == false ) {

alert("Escriba su nombre");

return false

} else {

alert("Gracias por su cooperacion");



return true

}



}



</script>



<!-- codigo html: -->

<p><FORM NAME="formulario" METHOD="post" ACTION="mailto:miEmail@miDominio.com" onSubmit="return valida(this);">Introduzca usu nombre por favor:<BR><INPUT TYPE="text" NAME="campo" size="8"><BR><INPUT TYPE="submit" name="validar" value="Validar"></FORM></p>

<!-- nota: Es importante hacer una pausa para que observen la siguiente linea: onSubmit="return valida(this)" que es la llamada a la funcion JS dado el evento de enviar el formulario (onSubmit), observamos que valida(this), es la funcion, this es el parametro que nos hace referencia a que le mandamos el conjunto de valores contenidos en el formulario, esta valor es sinonimo de document.nombreFormulario y para finalizar es importante observar la palabra return, esta palabra cobra importancia cuando se encuentra como evento de la etiqueta form, el por que es el siguiente:

Como habran visto en las funciones JS que creamos terminamos siempre con un return ya sea return false o return true, lo que hace esto es regresar un valor (true o false)al sitio desde donde se llamo la funcion en este caso onSubmit="return valida(this)" y aqui a su vez por la instruccion return enviamos el falor recivido de la funcion valida(this) ya sea un false o un true al formulario, esto es muy importante ya que si enviamos un return false nos estara diciendo que las validaciones son incorrectas y el formulario no se enviara, si por el contrario enviamos un true quiere decir que las validaciones son correctas y el formulario sera enviado a su destino, el cual esta definido por el parametro action, en este caso se mandara a una direccion de correo: ACTION="mailto:miEmail@miDominio.com" aunque puede ser enviado a un script que pueda manejar esta informacion, ya sea de AJAX, ASP y muy comunmente a uno de PHP: ACTION="prosesar_informacion.php".-->

____________________________________________________
--------------------------------------------------------------------------


Ahora bien como en este caso como estamos hablando de un nombre, comunmente estos no contienen numeros por lo que la segunda validacion sera que acepte solo letras, esto se puede hacer de 2 formas una dejar al usuario que escriba su nombre tal cual y cuando ocurra un evento como p.e que pierda el foco, se presione enter o cuando se presione un boton se checa el nombre que escribio el usuario y si este contiene numeros mandar un mensage de error y poner en blanco el textbox, o bien podemosverificar letra por letra lo que inserta el usuario y si la tecla presionada es un numero simplemente ignorarla , es decir que no aparesca en el textbox, veamos practicamente como es esto:


_____________________________________________________
VALIDAR QUE SOLO HAYA LETRAS, forma 1
(sin usar expresiones regulares)
SECCION DE CODIGO
---------------------------------------------------------------------------



<script language="javascript" type="text/javascript">//inicio del codigo JS



//esta funcion recibe una palabra como parametro y verifica que todos los caracteres de la palabra sean caracteres validos.



function ValidaCampo(campo) {

var caracter

var caracteres = "abcdefghijklmnopqrstuvwxyzñABCDEFGHIJKLMNOPQRSTUVWXYZÑáéíóúÁÉÍÓÚ" + String.fromCharCode(13) //en esta variable se guardaran todos los caracteres que pueden ser aceptados, la funcion String.fromCharCode(13) nos devuelve el caracter que en codigo se representa por un 13 en este caso el 13 representa un enter.



var contador = 0

for (var i=0; i < campo.length; i++) { //creamos un ciclo para recorrer caracter por caracter la palabra contenida en la variable campo

caracter = campo.substring(i, i + 1) //con la funcion substring obtenemos el caracter de la posicion i de la palabra a validar

if (caracteres.indexOf(caracter) != -1) {//lo que hacemos aqui es buscar si el caracter contenido en la variable caracter se encuentra en la palabra caracteres ,esto a traves de la funcion indexOf la cual detecta si en una frase o cadena existe un valor o palabra identica. si es asi nos devuelve el indice que indica la pocicion donde lo encontro, si no lo encuentra nos manda un numero negativo.



contador++

} else {

alert("ERROR: No se acepta el caracter '" + ubicacion + "'.")

return false

}

}



alert("Datos correctos.")

return true

}



</script>



<!-- LINEA HTML -->

<form id="nuevo" name="nuevo" method="post" action="manejador_php_del_formulario.php" OnSubmit="return ValidaCampo(this.nombre.value);">

VALIDAR QUE SOLO HAYA LETRAS, forma 2
____________________________________________________________
(USANDO EXPRESIONES REGULARES)
links ayuda:http://www.elcodigo.net/tutoriales/jsavanzado/jsavanzado5.html Chequen el link ahi va la teoria esta ok
http://javascript.espaciolatino.com/lengjs/jsgram/expregulares.htm Tablas de referencia muy utiles para la creacion de expresiones regulares.
SECCION DE CODIGO
--------------------------------------------------------------------------------------
Una expresion regular se declara de la siguiente manera:
var miexpresion=/expresion/; donde:
miexpresion es el nombre de la variable que guardara la expresion
"/" indica el inicio y el fin de la expresion
expresion es el formato que deseamos que nuestras cadenas a validar contengan.
nota: para evitar posibles errores en las expresiones regulares es recomendable siempre iniciar con ^ y terminar con $.

para validar una cadena se hace mediante el metodo test propio de las expresiones regulares, veamos esto:

var respuesta=miexpresion.test("cadena_a_validar");

Que es lo que pasa aqui, bien pues dado un formato determinado a "miexpresion", la cadena "cadena_a_validar" debera cumplir con ese formato, si esto es asi la funcion regresara true, en caso contrario regresara false, veamos como es esto:




<script language="JAVASCRIPT">

var expresion=/a/;//esta expresion nos verifica si en la cadena a validar se encuentra la letra a p.e devuelve true si la cadena a validar es "azul","casa","a","la" etc y devuelve false si no existe ninguna a p.e "perro","l"



var expresion2=/^a/;//si ponemos el simbolo ^ forzamos a que nuestra cadena comience con a, es decir la cadena sera valida (la funcion regresara true) en cadenas tales como "azul","amarillo","arcon" y false en cadenas como "mama","sala","la"



var expresion3=/a$/;//si ponemos el simbolo $ forzamos a que nuestra cadena termine en a, es decir una cadena valida sera "casa" y una no valida sera "arancel".



var expresion4=/[0-9a-fA-F]+/;//si encerramos caracteres entre [] lo que nos dice es que su contenido es opcional es decir una cadena valida es aquella puede contener numero o letras ya sea mayusculas o minusculas con lo caul una cadena valida seria "hola agente 007" y una no valida seria "hola agente 007$", con el signo + forzamos a que la cadena contenga como minimo un caracter o mas ya que si no la funcion tambien tomaria como valida cadenas sin ningun caracter "".



//como mencionamos para evaluar la expresion simplemente se pone elnombre de la variable que contiene la expresion regular y se llama a la funcion test:



if (expresion2.test("hola")){ alert ("La cadena empieza con a")}

else alert ("La cadena no inicia con a");

</script>




nota: para ver todas las funciones con las que podemos auciliarnos a la hora de construir expresiones regulares verificar el siguiente link:

http://javascript.espaciolatino.com/lengjs/jsgram/expregulares.htm



para finalizar evaluemos nuestro campo nombre para que solo acepte letras:




<script language="javascript">

var er_nombre=/[A-Za-z]/;

function validar(f){

if(er_nombre.test(f.nombre.value))

alert ("el nombre es correcto puede contienur");

else alert("su nombre tiene carcteres no permitidos favor de verificarlo, gracias");

}

</script>



<!--

<form id="nuevo" name="nuevo" onSubmit="return validar(this);" method="post" action="manejador_php_del_formulario.php">

-->

___________________________________________________________
VALIDANDO QUE SOLO HAYA LETRAS forma 3
(verificando letra por letra)
links ayuda:http://questchile.wordpress.com/2007/08/22/manejando-eventos-del-teclado-con-javascript/
----------------------------------------------------------------------------------------------

Otra forma de validar un textbox es verificar si la tecla que se pulso corresponde a un caracter valido si es asi la escribe si no simplemente la ignora, para saber si ese caracter es valido se puede usar cualquiera de las dos funciones anteriores, ahora bien para saber como capturar letra por letra veamos el siguiente ejemplo:

el textbox en codigo html seria:



<input type="text" name="nombre" onkeydown="tecla(event);" />



y el codigo JS seria:

<script type="text/javascript">

//la funcion tecla recibe como parametro el ultimo evento que sucedio, en este caso como el text box esta configurado para llamar a la funcion cada que se presione una tecla, la funcion recibira presisamente el evento que se genero al presionar esa tecla, los eventos contienen mucha informacion de la cual se puede sacar provecho, en esta ocasion queremos saber que tecla desencadno dicho evento pero esta no es launica informacion que podemosobtener de esa variable tipo evento que recibimos, para saber mas acerca del objeto event checar este enlace:

http://www.librosweb.es/javascript/capitulo6/obteniendo_informacion_del_evento_objeto_event.html



function tecla (e)

{

var evt = e ? e : event;//no se espanten al ver esta expresion es un simple if lo que nos dice es que: si la variable e es true entonces asignamos a evt el valor e(e?e), si la variable es false entonces asignamos el ultimo evento ocurrido a la variable evt (:event)



var key = window.Event ? evt.which : evt.keyCode;//esta validacion se hace por la compativilidad de los navegadores, explico: el IE utiliza un objeto llamado window.event para capturar sus eventos y usa el metodo whitch para saber que tecla se presiono, mientras tanto otros navegadores como el firefox o el desaparecido netscape utilizan el metodo keyCode para saber cual es la tecla presionada y para ellos no existe el window.event, es por eso que si el navegador del usuario es IE el window.event va a regresar un true por lo tanto asignamos el valor de evt.which es decir la tecla que se presiono, repito esto hablando del IE por otro lado si window.event da false significa que el navegador no usa este metodo y por lo tanto no es el IE por lo consiguiente usamos el metodo propio (evt.keyCode) para asignarle a la variable key la tecla que se preiono.

alert (key);//y por ultimo imprimimos el caracter que se recibio.

}

</script>







bueno espero que les sea de ayuda dudas, sugerencias, comentarios, dolencia y demas no duden en profesarlas.ciao