AnshiG
Bienvenidos a AnshiG.!!

Conectarse

Recuperar mi contraseña


Afiliados Elite


Normales
Kimi wa Petto TOP
Pagerank

Últimos temas
» Blog de Renders!
Dom Ene 03, 2016 2:36 pm por Sakura92

» Hemos vuelto!!
Dom Ene 03, 2016 2:31 pm por Sakura92

» Actualización FEBRERO 2015
Vie Feb 27, 2015 10:22 am por Sakura92

» Cosplay (Varios)
Lun Feb 23, 2015 10:42 am por Sakura92

» Cosplay (Varios)
Lun Feb 23, 2015 10:41 am por Sakura92

» Materias favoritas... y no tanto!
Jue Feb 12, 2015 10:47 am por Sakura92

» Que mascotas tienen, tuvieron y les gustaria tener?
Jue Feb 12, 2015 10:38 am por Sakura92

» Redes sociales
Jue Feb 12, 2015 10:09 am por Sakura92

» PS3: Juegos!
Jue Feb 12, 2015 10:03 am por Sakura92

» Consolas o PC?
Jue Feb 12, 2015 9:55 am por Sakura92

» BUSQUEDA DE STAFF
Mar Feb 10, 2015 7:18 pm por Sakura92

» Requisitos y Datos
Mar Feb 10, 2015 12:03 pm por Sakura92

» Limpieza de afiliados
Mar Feb 10, 2015 9:36 am por Sakura92

» Ola ke Ase?
Lun Dic 09, 2013 8:07 pm por Tetsumi

» Guia 7: Reglamento Administracion
Vie Nov 22, 2013 1:05 pm por Sakura92

» Ideas
Vie Nov 22, 2013 1:02 pm por Sakura92

» Puntos
Vie Nov 22, 2013 12:59 pm por Sakura92

» Reglamento Soporte
Vie Nov 22, 2013 12:58 pm por Sakura92

» Reglamento Tutoriales
Vie Nov 22, 2013 12:57 pm por Sakura92

» Reglamento Galerias
Vie Nov 22, 2013 12:57 pm por Sakura92

» Reglamento Recursos
Vie Nov 22, 2013 12:56 pm por Sakura92

» Reglamento Talleres y Pedidos
Vie Nov 22, 2013 12:56 pm por Sakura92

» Incumplimientos
Vie Nov 22, 2013 12:52 pm por Sakura92

» Wings of Freedom [Elite]
Lun Sep 30, 2013 2:28 pm por Invitado

» Yugi Oh! RPG [Élite]
Miér Ago 07, 2013 2:36 am por Invitado

» OMEGA NEW WORLD [Afiliación Élite ]
Miér Jul 31, 2013 6:08 pm por Invitado

» Creando Mundos [Élite]
Vie Jul 26, 2013 12:22 am por Invitado

» World´s Inuyasha RPG [Normal]
Miér Jul 24, 2013 11:46 pm por Invitado

» Fatal Liberty Rol [Élite]
Mar Jul 16, 2013 10:30 am por Invitado

» Fairy Tail Sekai || Re-Apertura! || Afiliación Elite
Miér Jul 03, 2013 1:50 am por Invitado

» Hi(: !
Lun Jul 01, 2013 3:47 am por #Re Sound

» Hola, Hola, ¿hay alguien ahi?
Lun Jul 01, 2013 3:37 am por #Re Sound

» Bleach: Shadow Of Seireitei [Cambio de dirección]
Sáb Jun 29, 2013 11:52 am por Invitado

» Volvi... nose si para siempre pero volvi xD
Vie Jun 28, 2013 9:08 am por Sakura92

» Me extravié en el cielo, ¿qué puedo hacer?
Vie Jun 28, 2013 8:55 am por Sakura92

» Roma Antiqua {Afiliación Normal}
Dom Jun 23, 2013 3:07 pm por Invitado

» Saint Seiya Cosmos Rebellion Rol [Afiliación Élite]
Dom Jun 16, 2013 12:13 am por Invitado

» Buck Tick Fans [Élite]
Jue Jun 13, 2013 1:49 am por Invitado

» End of Silence [Cambio de dirección y botones]
Vie Mayo 31, 2013 5:54 am por Invitado

» Campamento mestizo [Afiliación Elite]
Miér Mayo 29, 2013 6:11 pm por Invitado

» Render Universe - Elite
Dom Mayo 19, 2013 3:58 pm por Invitado

» Love orange and cyan (tutorial9
Jue Mayo 16, 2013 3:51 pm por Loki

» AVISO
Jue Mayo 16, 2013 8:49 am por Sakura92

» Code Geass: Endless Dark [Élite]
Miér Mayo 01, 2013 2:22 am por Invitado

» Creative Designs (normal)
Mar Abr 30, 2013 12:48 am por Invitado

» Ultimate Inazuma Rol -Cambio de banner-
Jue Abr 25, 2013 1:26 pm por Invitado

» Buenas...
Mar Abr 16, 2013 3:58 pm por Naggar

» Actualizacion de Abril
Mar Abr 16, 2013 2:00 pm por Sakura92

» Texuras y Png hechas por mi (Sueltas) - Actu 13/04
Lun Abr 15, 2013 8:16 am por Jotaro Kujo

» AVISO DE AUSENCIA TEMPORAL
Vie Abr 12, 2013 2:46 pm por Zec



Las imagenes e historias que se posteen en este foro son de sus respectivos dueños, cada uno tendra el link correspondiente a la pagina donde lo ubico su creador originalmente.Todo el materia ya se encuentra bajo licencia por favor si quieres tomar algo comunicarse con la administración del foro, o el dueño del post.
Creative Commons License
Crear
foro
Codigos CSS-HTML-JS

APRENDO EN...
Estudio en Eternal Designs Melody Graphics School ise-graficos

TOMO RECURSOS DE...

RESEÑAS...


Propiedades Basicas Javascript: Eventos

Ver el tema anterior Ver el tema siguiente Ir abajo

Propiedades Basicas Javascript: Eventos

Mensaje por Sakura92 el Sáb Abr 06, 2013 7:10 pm

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE


#002 - Eventos

Recuerda que este tuto es parte de una serie de tutos, en la que se asume que has leído el anterior. También recuerda que se asume que manejas más o menos bien el HTML y CSS.

Los eventos son funciones de js que ejecutan una serie de acciones cuando sucede algo. Haces click y ¡puf! se abre algo. Pasas el mouse y ¡bam! saltan lucecitas de colores (?) En este tuto, aprenderemos a manejar algunos eventos básicos.

1. Ready, set, go!

Un detalle al que nos enfrentamos cuando tratamos con lenguajes de scripts es que generalmente los scripts se cargan antes de que termine de cargar toda la página -especialmente si tenemos muchas imágenes. Entonces, surge el problema de que por ahí el JavaScript llama a un elemento que todavía no fue cargado o algo por el estilo y esa parte deja de funcionar. Para evitar este problema, es usual colocar a todo nuestro js dentro de una función que llamará al total de la página y esperará a que esté cargada para ejecutar a nuestro código. Escrito en jQuery, la función sería:
$(document).ready(function () {
Aquí tu js
})
Analicémoslo un poquito: $(document) es un selector que llamará a todo el HTML, mientras que .ready() es nuestro evento. Lo que va dentro de ready es una función de js (tema a ver en un futuro) que envolverá a nuestro código.

2. Eventos para animaciones

Hay eventos que usualmente son empleados para animaciones: cuando haces click en un botón y se abre una pestaña, y cosas por el estilo. Estos son los más empleados:
EventoSintáxis
Clickear un elemento de id "cajita"$('#cajita').click(function () {lo que sucederá});
Clickear dos veces un elemento de id "cajita"$('#cajita').dblclick(function () {lo que sucederá});
Pasar el mouse sobre un elemento de id "cajita"$('#cajita').hover(function () {lo que sucederá});
Si quieres que lo que sucede cuando empieza el hover (cuando pasas sobre el elemento) sea diferente de lo que sucede cuando termina el hover (cuando sales de encima del elemento), puedes colocarlo así:
$('#cajita').hover(function () {lo que sucederá al empezar el hover}, function () {lo que sucederá al concluir el hover});
Hacer focus* sobre un elemento de id "cajita"$('#cajita').focus(function () {lo que sucederá});
*focus es el nombre técnico de la acción de pararse en un área de escritura, por ejemplo.

Destaquemos algunos detalles que podrían pasar desapercibidos al ojo distraído:
  • Todas estas funciones concluyen con punto y coma. El punto y coma señala el fin del uso de un selector, por lo que por ejemplo si quieres emplear dos de estos eventos en un mismo selector (supongamos, click y hover ambos afectando a #cajita), puedes colocarlos de corrido y sin el punto y coma: $('#cajita').hover(function () {efectos}).click(function () {efectos});
  • Los eventos en sí son la parte destacada en negrita.
  • Estos no son todos los eventos de jQuery, ni por asomo. Son sólo los más usados (:
  • Donde dice "lo que sucederá" se refiere a los efectos que afectarán a los elementos que quieras cuando esos eventos se cumplan. ¡Aprenderemos algunas de esas cosas en el próximo tuto! (;

Espero y no haya sido demasiado liado. En el próximo tuto, veremos qué podemos hacer cuando se da un evento. Cualquier duda, consulta, etc. ¡no duden en dejar su mensaje aquí mismo! (:

​​​​​​​​​​​​​​​​​​​​​​​​​​​

avatar
Sakura92
Webmaster
Webmaster

Mensajes : 175
Puntos : 178942
Reputación : 2
Edad : 25

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.