Autor Tema: Minitutorial Javascript - onclick  (Leído 2394 veces)

Desconectado kekoman

  • PHPero Master
  • ******
  • Mensajes: 1.180
  • Karma: 45
  • Sexo: Masculino
  • Mi nuevo usuario es marco811
    • Ver Perfil
Minitutorial Javascript - onclick
« en: 29 de Diciembre de 2007, 21:15:39 pm »
Estoy empezando a aprender javascript y he descubierto que me gusta  :) soy muy novato en esto y me gustaria enseñar lo siguiente para los novatos que no saven nada de nada  :) :)
Primero voy a empezar con onclick  :)
Voy a hacer un ejemplo practico:
Cuando hago click en el campo de un formulario se vacie:
Citar
<form>
<p><input onclick="this.value=''" type="text" name="campo1" size="20" value="contenido"></p>
<p><input type="text" name="campo2" size="20" value="contenido"></p>
</form>
Ver ejemplo
Vamos a sacar en evidencia el siguiente código para examinarlo:
onclick=" this.value=' ' "
Al hacer click , este campo tendrá el siguiente valor.
this podemos cambiarlo por campo2 y entonces ya no se cambiara el valor al campo1 , sino al campo2
Ejemplo: Ver ejemplo
también podemos cambiar value por cualquier otra cosa, por ejemplo TYPE
Voy a dar un ejemplo practico:
Citar
<form>
<p><input onclick="campo2.type='text'" type="checkbox" name="other" value="ON">otro</p>
<p><input type="hidden" name="campo2" size="20" value="contenido"></p>
</form>
Ejemplo: Ver ejemplo

también podemos sustituir onclick por cualque otra cosa, por ejemplo:
ondobleclick
onMouseover
onMouseout
etc...
Espero que os haya gustado  :) :)
Saludos!
« Última modificación: 29 de Diciembre de 2007, 21:25:29 pm por kekoman »


Este usuario ya no lo uso, mi nuevo usuario es marco811

Comunidad PHPeros

Minitutorial Javascript - onclick
« en: 29 de Diciembre de 2007, 21:15:39 pm »

Desconectado lalitros

  • PHPer@ Fijo
  • ***
  • Mensajes: 162
  • Karma: 3
  • Sexo: Masculino
    • Ver Perfil
Re: Minitutorial Javascript - onclick
« Respuesta #1 en: 30 de Diciembre de 2007, 08:48:36 am »
karma +

Ootro tutorial como este, asi de sencillos!

Si me dieran a escojer entre el MUNDO y Tu.. Te escojeria a Ti, porque mi MUNDO ERES TU

Desconectado G2K

  • Moderador de Programación General
  • PHPero Master
  • ****
  • Mensajes: 2.245
  • Karma: 76
  • Sexo: Masculino
  • Dame un punto de apoyo y moveré la Tierra
    • Ver Perfil
    • Cristian Torrijos
Re: Minitutorial Javascript - onclick
« Respuesta #2 en: 30 de Diciembre de 2007, 11:13:04 am »
jejeje esto es muy sencillo se suele utilizar mucho para hacer trucos en Webs para hacer efectos asi de cambiar el fondo de la celda de una tabla, el cursor, una imagen de fondo etc.

Tambien existen algunos más como: onblur() onchange() onfocus() onkeydown() onkeypress() onkeyup()...
Campeón del CatSkills de Webs (Enero 2011)
Campeón del SpainSkills de Webs (Abril 2011)
http://www.youtube.com/watch?v=1fBMG8F_hpM
Mejor representante catalan en SpainSkills 2011


Desconectado kekoman

  • PHPero Master
  • ******
  • Mensajes: 1.180
  • Karma: 45
  • Sexo: Masculino
  • Mi nuevo usuario es marco811
    • Ver Perfil
Re: Minitutorial Javascript - onclick
« Respuesta #3 en: 30 de Diciembre de 2007, 11:24:26 am »
karma +

Ootro tutorial como este, asi de sencillos!
Gracias por el karma!
Siempre veo por internet tutoriales que te enseñan un code de 2 paginas y no entiendes nada!


Este usuario ya no lo uso, mi nuevo usuario es marco811

Desconectado lalitros

  • PHPer@ Fijo
  • ***
  • Mensajes: 162
  • Karma: 3
  • Sexo: Masculino
    • Ver Perfil
Re: Minitutorial Javascript - onclick
« Respuesta #4 en: 30 de Diciembre de 2007, 18:24:34 pm »
Si si si claro, estoy contigo!
Espero puedas hacer otros codigos asi de sencillos donde entiendes bien!...
Te ayudaria, pero no se nada de java... jajaja :D por eso quiero aprender!

Si me dieran a escojer entre el MUNDO y Tu.. Te escojeria a Ti, porque mi MUNDO ERES TU

Desconectado Martin10

  • PHPer@ Fijo
  • ***
  • Mensajes: 160
  • Karma: 11
  • Sexo: Masculino
    • Ver Perfil
Re: Minitutorial Javascript - onclick
« Respuesta #5 en: 31 de Diciembre de 2007, 15:29:19 pm »
Podrias agregarle la funcion onBlur() para que cuando si se sale del campo sin escribir nada aparezca de nuevo el texto "contenido". Para eso además tenemos que crear una funcion para que compruebe si se ha escrito algo o no en el texto.
A ver si me sale...

Aclaracion: El evento onBlur se activa cuando el usuario hace click fuera del campo de texto

Funcion que va entre heads:
Código: [Seleccionar]
<script language="javascript">
function contenido () {
   if (document.form.campo1.value=='') { //comprueva si el campo 1 tiene texto
      document.form.campo1.value='contenido'; // si no es así le da el valor "contenido"
   }
   if (document.form.campo2.value=='') { // igual pero con el campo2
      document.form.campo2.value='contenido';
   }
}
</script>

y el form quedarí así :

Código: [Seleccionar]
<form name="form">
<p><input onclick="this.value=''" onblur="contenido()" type="text" name="campo1" size="20" value="contenido"></p>
<p><input onclick="this.value=''" onblur="contenido()" type="text" name="campo2" size="20" value="contenido"></p>
</form>

En el evento onBlur llamamos a la funcion que creamos entre heads, el resto es igual al de kekoman.

Bueno espero que sirva, yo tambien recien estoy empesando con javascript, y esto me sirvio para practicar.

Saludos
8)

Desconectado FrigOr_

  • PHPerit@
  • *
  • Mensajes: 2
  • Karma: 0
    • Ver Perfil
Re: Minitutorial Javascript - onclick
« Respuesta #6 en: 02 de Enero de 2008, 23:08:09 pm »
No muy complejo el código pero la verdad queda muy bien. Y con la función onBlur quedo mejor todabía. Gracias  :P

Desconectado x.mara.x

  • PHPero Master
  • ******
  • Mensajes: 1.364
  • Karma: 57
  • Sexo: Femenino
    • Ver Perfil
Re: Minitutorial Javascript - onclick
« Respuesta #7 en: 17 de Marzo de 2008, 20:23:59 pm »
Te daría una karma, pero no lo enteindo xDDDDDD