[Powered by Google Translate] [Seminario: JQUERY] [Vipul Shekhawat, la Universidad de Harvard] [Este es CS50.] [CS50.TV] Si usted estÃ¡ siguiendo a lo largo de en su casa, usted puede tener acceso a mis diapositivas en lÃ­nea por ir a este enlace. Es TjjRWj, en bit.ly. TambiÃ©n puede ir a la URL directamente, que es cloud.cs50.net / ~ vshekhawat, que es mi nombre, y jQuery. Yo le animo a seguir adelante si usted estÃ¡ viendo en casa, y si estÃ¡s aquÃ­, tambiÃ©n, porque se trata de una presentaciÃ³n muy interactiva. 

AsÃ­ que hoy voy a hablar de jQuery, y la primera pregunta es, lo que es jQuery? Este aÃ±o, yo sÃ© que ustedes no han cubierto JavaScript con tanto detalle como lo hemos hecho en los Ãºltimos aÃ±os. JavaScript es, primero de todo, sÃ³lo un lenguaje del lado del cliente que se utiliza para ejecutar secuencias de comandos y cÃ³digo en la mÃ¡quina de cada usuario. AsÃ­ que tienes un servidor que proporciona las pÃ¡ginas web a las personas, pero es posible que desee hacer cosas en su mÃ¡quina, pedir a su equipo para que envÃ­e peticiones al servidor cada 30 segundos o algo asÃ­. Usted puede hacer que el uso de JavaScript. JQuery sÃ³lo proporciona una mayor funcionalidad en la parte superior de JavaScript que hace cosas extra para usted. Si nos fijamos en el contenido en la parte superior, que describe algunas de las cosas que eres capaz de hacer. AsÃ­ que en general, fue creado en enero de 2006. Fue concebido en primer lugar en agosto de 2005. Ha estado por ahÃ­ durante un par de aÃ±os, y es realmente parte del nuevo movimiento de la Web 2.0 que ha hecho de Internet tan brillante. Es la biblioteca de JavaScript mÃ¡s utilizado. MÃ¡s de 19,6 millones de sitios web estÃ¡n utilizando, y el uso sigue aumentando segÃºn builtwith.com, que, al parecer, en el Ãºltimo aÃ±o, acaba de ser constante aumento bastante lineal. Entre los 10 millones de sitios mÃ¡s, todavÃ­a hay - alrededor del 40% de ellos estÃ¡n actualmente utilizando. Facebook utiliza, un montÃ³n de otros sitios web usan actualmente. Usted puede mirar en esas estadÃ­sticas por su cuenta, si lo desea. Y se podrÃ­a decir que es de fiar, ya que tiene una base y 13 miembros de la junta, junto con un equipo de 20 personas que trabajan en Ã©l de forma regular. AsÃ­ que es muy utilizado, tiene una. URL org, es elegante, tiene spin-offs para otras cosas, asÃ­ que es una gran cosa. 

Â¿Por quÃ© utilizarlo? JQuery es muy ligero. Eso significa que no es un archivo enorme. Puede descargar el archivo minified, que es sin todos los espacios en blanco y comentarios, y estÃ¡ a sÃ³lo 32 kB. AsÃ­ que es fÃ¡cil de simplemente tirar en su pÃ¡gina web y acaba de empezar a usarlo. TambiÃ©n estÃ¡ escrito de manera muy eficiente, por lo que no ocupa mucho - que no ralentiza su sitio web mucho mÃ¡s cuando se utiliza. Esto permite implementar cosas que antes eran inviables. Hay algunos aspectos de funcionalidad, como la creaciÃ³n de animaciones, que normalmente serÃ­a muy, muy difÃ­cil de hacer. Pero en jQuery son en realidad muy simple. Y hay algunas cosas que son molestas para hacer, posible en JavaScript, como el envÃ­o de una peticiÃ³n POST, pero para enviar una peticiÃ³n a un servidor, usted tiene que escribir cinco o seis o siete lÃ­neas de cÃ³digo. Ahora sÃ³lo se puede hacer de una sola lÃ­nea de cÃ³digo, en una sola llamada de funciÃ³n. Eso realmente simplifica muchas de las cosas que usted estÃ¡ haciendo. Y todos los niÃ±os frescos lo estÃ¡n utilizando. Por eso, yo me refiero. En mi proyecto final del aÃ±o pasado, que es news.whrb.org, que es para la estaciÃ³n de radio, he creado este blog que acoge a todos los espectÃ¡culos que hemos hecho y los archivos MP3 para ellos. Usted puede navegar a travÃ©s de los Ãºltimos shows, y todo se hace usando jQuery. Se puede decir porque de todas estas animaciones, esencialmente. AsÃ­ que si usted tiene - si va a crear un nuevo post, ves estos pequeÃ±os slideDowns, eso es todo hecho con jQuery. Y esta caÃ­da - de modo que tipo de cosas se hace todo usando jQuery, y usted no tiene que recargar constantemente la pÃ¡gina para navegar el sitio. Otra cosa interesante que se hace uso de jQuery es esta presentaciÃ³n. Estoy usando esta cosa de cÃ³digo abierto llamado scrolldeck, que alguien escribiÃ³ en la parte superior de jQuery. Si realmente se ven en la fuente, se puede ver que que estÃ¡n usando este signo de dÃ³lar, sÃ­mbolo del dÃ³lar se utilizan en jQuery para indicar que una funciÃ³n es una funciÃ³n de jQuery. AsÃ­ que estÃ¡n definiendo un contenedor en la parte superior de jQuery que le permite hacer una presentaciÃ³n de este tipo, y se puede ver que aquÃ­ estÃ¡n incluidos en el archivo jQuery original, que es lo que tendrÃ¡ que incluir si desea utilizar jQuery en sus propios sitios web. 

Tocar en eso, Â¿cÃ³mo se instala? Usted puede ir a jQuery.com y descargar el archivo, agregarlo a un directorio web e incluirla. AsÃ­ que en la parte superior, en la etiqueta de la cabeza de su archivo HTML de su archivo HTML principal, sÃ³lo tiene esa lÃ­nea de cÃ³digo con la versiÃ³n correcta de la versiÃ³n de jQuery que utiliza. Puedes descargarlo, vaya a jQuery.com, haga clic en "jQuery descarga", y ya lo tienes. Eso es todo. Y, de hecho, podemos echar un vistazo a lo que parece. Si hace clic en descargar, jQuery es esto. Es sÃ³lo un gran archivo JavaScript que hace todas las cosas de la magia para usted. Esta es la versiÃ³n miniaturizada, que no se puede leer en absoluto. TambiÃ©n se puede ver en la versiÃ³n de desarrollo, que se puede leer pero sigue siendo muy, muy largo. Es un montÃ³n de cosas ahÃ­. TambiÃ©n se puede vincular a la versiÃ³n alojada de Google de la misma. AsÃ­ que voy a permitir que sÃ³lo se basan en Google para proporcionarla. Ellos proporcionan cada versiÃ³n de la misma, disponibles en todo momento. AsÃ­ que es probable que pueda confiar en Google de ser el anfitriÃ³n para usted. O puede enlazar a propia Ãºltima versiÃ³n de jQuery. Tienen una URL que estÃ¡ siempre actualizado a la Ãºltima versiÃ³n. Es jQuery-latest, y hay un problema con eso, que es que si el jQuery actualizado y algo de la funcionalidad anterior habÃ­an vuelve retrÃ³grado o en desuso, puede que no - puede empezar a no conseguir el apoyo mÃ¡s. AsÃ­ que si usted escribe un sitio web utilizando la versiÃ³n 1.8.2, por la versiÃ³n de tiempo de 2,7 salga algunas de las funciones que ha escrito ya no funcionan. AsÃ­ que es mejor que sÃ³lo tiene que descargar el archivo 32 kB, lo puso en su pÃ¡gina web, y que va a trabajar para siempre. 

Voy a seguir adelante y comenzar a hablar acerca de la funcionalidad real de jQuery. Lo primero es selectores. Esto es lo que jQuery se concibiÃ³ inicialmente para proporcionar. Y usted puede hacer clic en la documentaciÃ³n que mirar la documentaciÃ³n detallada de los selectores que voy a estar cubriendo. La idea detrÃ¡s de selectores es que usted puede seleccionar los elementos HTML de una pÃ¡gina. Elementos de una pÃ¡gina tienen IDs y las clases y otros aspectos que identifican a los mismos. Hay tambiÃ©n -; son de diferentes Ã³rdenes. Parte del tiempo que estÃ¡n anidados unos dentro de otros. JQuery le permite crear consultas simples que recuperan elementos de la pÃ¡gina. A continuaciÃ³n, puede manipular estos elementos con funciones de jQuery, que es la secciÃ³n de manipulaciÃ³n vamos a llegar a mÃ¡s tarde. Usted puede cambiar el HTML, cambiar el CSS, tambiÃ©n se puede animar y agregar funciones que se activan en determinados eventos. AsÃ­, por ejemplo, si hace clic en Ã©l algo, quiere que algo suceda, usted puede hacer que el uso de jQuery tambiÃ©n. Y hay un gran nÃºmero de formas de seleccionar elementos. La mayorÃ­a de ellos nunca he usado, pero hay los bÃ¡sicos, los cuales son muy importantes. El selector de elementos, por ejemplo, si acaba de seleccionar nada que es un div - En realidad tengo el cÃ³digo abierto para la presentaciÃ³n de diapositivas. AsÃ­, por ejemplo, aquÃ­ estÃ¡ la primera diapositiva. AquÃ­ tenemos un div. Si realmente seleccionamos todos los divs en la pÃ¡gina, sÃ³lo nos darÃ¡ una matriz de todos los divs que existen en este archivo. El selector de ID le permite seleccionar cualquier cosa con un ID dado. AsÃ­ que si, por ejemplo, esto tiene el ID "quÃ©" y si lo hicimos con # lo que en lugar de un documento de identidad, serÃ­a simplemente devolver una matriz que tiene un solo elemento, y es que los elementos de la pÃ¡gina. TambiÃ©n podemos combinar selectores de esta manera por tener seleccionar sÃ³lo las cosas con IDs que son divs. AsÃ­ que sÃ­. SÃ³lo seleccione divs que tienen ese ID. Para la clase que acaba de utilizar un punto, que es el mismo que el CSS. Descendiente tambiÃ©n funciona, asÃ­ que si usted tiene cierta clase y se ha anidado elementos dentro de ella - asÃ­, por ejemplo, hay una cierta clase y tiene una etiqueta de ancla para enlazar a otra pÃ¡gina, puede utilizar esta sintaxis para recuperar el vÃ­nculo. TambiÃ©n puede seleccionar varias cosas a la vez, sÃ³lo separarlas por comas, utilizar cualquier selector desea, y usted seleccionarÃ¡ todos ellos a la vez, en una sola matriz. Y luego estÃ¡ tambiÃ©n la no selecciÃ³n, asÃ­ que usted puede seleccionar todos los divs que no tienen alguna clase especÃ­fica. Y eso es sÃ³lo una forma Ãºtil de obtener una introducciÃ³n a cÃ³mo funciona esta selecciÃ³n. Te voy a mostrar algunos ejemplos concretos en un segundo. 

Selectores avanzados son - estos son sÃ³lo algunos ejemplos. Hay docenas de ellos, pero si desea seleccionar todas las etiquetas de imagen dentro de algÃºn elemento, que acaba de hacer: la imagen. Si desea seleccionar los elementos, incluso, por ejemplo, si hay 20 de ellos, que desea seleccionar 0, 2, 4, 6 y asÃ­ sucesivamente, que haces: tambiÃ©n, o tambiÃ©n puedes hacer: extraÃ±o. Estos son selectores de seudo, lo que significa que en realidad calculan cada otro elemento en lugar de ir y seleccionando todos ellos. Usted puede tambiÃ©n - cada elemento puede tambiÃ©n tener atributos especÃ­ficos. AsÃ­, por ejemplo, la clase = centro es tambiÃ©n un atributo. Por esta etiqueta de ancla, href, hipertexto referencia, es un atributo tambiÃ©n. AsÃ­ que usted puede seleccionar algo que se vincula a una pÃ¡gina especÃ­fica o simplemente - es muy general. Usted puede seleccionar cualquier cosa con cualquier atributo que desea. Y luego, tambiÃ©n, atributo contiene. Si, por ejemplo, desea seleccionar todos los elementos de entrada que tienen la palabra "paso", como el nombre de ellos, si una pÃ¡gina tiene un bloque de texto de entrada que se llama "password", eso serÃ­a una forma de poder seleccionar esa. Y hay muchos mÃ¡s. Usted puede seguir adelante y mirar la documentaciÃ³n y ver ejemplos concretos de cÃ³mo funciona. 

El siguiente paso es la manipulaciÃ³n DOM. DespuÃ©s de seleccionar los elementos, vamos a querer realmente hacer cosas con ellos. Hasta ahora no hemos visto eso en absoluto, pero si nos fijamos en la documentaciÃ³n, no hay realmente mucho que pudiÃ©ramos hacer. En este punto, vamos a seleccionar los elementos de esta presentaciÃ³n y manipularlos utilizando jQuery. Debido a que este se lleva a cabo usando jQuery, tenemos acceso a la biblioteca jQuery, y podemos usar esas funciones dentro de este cÃ³digo. Una de las cosas Ãºtiles que usted puede no saber acerca es la consola. Y Google Chrome es lo que estoy usando. Puede pulsar alt comando J o alt de control J para abrir la consola. En Firefox Creo que es el comando de cambio de K o de control de cambios K. En Safari tienes que ir a cambiar algunos ajustes. Hay un enlace si desea hacerlo, pero yo recomiendo conseguir Chrome o Firefox. AsÃ­ que vamos a abrir la consola, que estÃ¡ aquÃ­ abajo. Esto le permite, bÃ¡sicamente, sÃ³lo hacer lo que quieras. AsÃ­ que usted puede simplemente escribir en crear una variable llamada x, x = 5, vamos a ver lo que x + 2 es. Incluso se puede hacer algo como CS + A ver, x + 45, que serÃ¡ CS50. Usted sÃ³lo puede hacer algunas cosas tÃ­picas de JavaScript. Pero tambiÃ©n se puede hacer jQuery aquÃ­. 

AsÃ­ que echemos un vistazo a este primer aspecto aquÃ­. Vamos a crear una variable llamada HTML, que es una cadena. Tiene una etiqueta de pÃ¡rrafo en el mismo, que se llama un texto nuevo. AsÃ­ que tenemos este cÃ³digo HTML, es un texto nuevo, en las etiquetas de pÃ¡rrafo. Ahora que realmente queremos para agregarlo a la pÃ¡gina. Lo configuro para que el cÃ³digo HTML para este pÃ¡rrafo, este tÃ­tulo aquÃ­, es append ID. Si seleccionamos append ID y luego agregar a la misma la variable HTML que acaba de crear, que se sumarÃ¡ que el HTML al final, justo despuÃ©s de esta etiqueta de pÃ¡rrafo. AsÃ­ que si lo hacemos - que elegimos este pÃ¡rrafo, y que hemos llamado la funciÃ³n append con la variable HTML Acabo de aÃ±adir, que se sumarÃ¡ este nuevo texto a la derecha allÃ­ en la pÃ¡gina. TambiÃ©n podemos anteponer, lo que significa que va a ir antes, a principios de ese elemento. AsÃ­ que hay algo de texto nuevo en el comienzo y despuÃ©s. Puedo seguir adelante y refrescar para deshacerse de estas cosas sÃ³lo lo que he hecho. Pero eso es un ejemplo de cÃ³mo se puede utilizar el Prefijo y Sufijo mÃ©todos para manipular cosas en la pÃ¡gina, aÃ±adir un poco de HTML. 

TambiÃ©n puede cambiar de clase. De nuevo en este archivo de estilo, he creado esto para la clase de victoria que tiene el color del texto rojo, un poco de color de fondo, y una sombra de texto. Se ve horrible, pero en realidad se puede - Este pÃ¡rrafo corresponde a ID de clase. AsÃ­ que puede agregar la clase por la victoria. Puedo ejecutar esta en la consola, y que va a aÃ±adir esa clase, y ahora se ve horrible, como se esperaba. El CSS automÃ¡ticamente se aplica a las clases que usted - si hay CSS para una clase, automÃ¡ticamente se aplica si cambia la clase de un elemento. Entonces podemos simplemente eliminar usando la clase remove. AsÃ­ que si usted tiene algunas clases predefinidas como el rojo o destacado, y desea aplicar aquellos a los elementos, usted no tiene que hacer todo el estilo CSS cada vez. Usted puede aÃ±adir la clase a un elemento, y luego se convertirÃ¡ automÃ¡ticamente - que se verÃ¡ de forma automÃ¡tica apropiado para esa clase. TambiÃ©n podemos quitar las cosas, asÃ­ que voy a seleccionar todos los divs en la pÃ¡gina y eliminarlos. Â¿QuÃ© es eso va a parecer? Se va a mirar como si nada, asÃ­ que en realidad es nada izquierda. Mi presentaciÃ³n se ha ido. Puedo refrescarse y traerlo de vuelta, por suerte, porque acaba de publicarse una vez, pero eso es un ejemplo de la eliminaciÃ³n, si quieres destruir completamente un elemento de la pÃ¡gina. 

TambiÃ©n puede sobrescribir, y yo voy a seleccionar todas las etiquetas de pÃ¡rrafo en la pÃ¡gina y van dentro de ellos y reemplazar cualquier texto que tienen en ellos con sÃ³lo la palabra "prueba". Si lo hace, se le reemplaza cada pÃ¡rrafo en la pÃ¡gina con esta prueba. Sip. Todos estÃ¡n reemplazados por pruebas. AsÃ­ que eso es un ejemplo de acceso al texto y escribiendo sobre ellos. TambiÃ©n puede recuperar la informaciÃ³n, y esto es genial para los campos de entrada. Si usted tiene un cuadro de entrada que la gente estÃ¡ escribiendo cosas en, la gente estÃ¡ escribiendo cosas en Ã©l, AquÃ­ seleccionamos la entrada, cualquier etiqueta de entrada con un tipo de texto. En este caso, sÃ³lo hay un cuadro de entrada de toda la presentaciÃ³n, por lo que sÃ³lo tendremos que seleccionar el primero, y luego llamamos a la funciÃ³n val en Ã©l. Que devuelve el valor, y por un cuadro de entrada, el valor es lo que pasa a ser en su interior. AsÃ­ que si hacemos esto, simplemente devuelve las cosas cadena. Y si llamamos de nuevo despuÃ©s de haber escrito mÃ¡s cosas, se convierte en mÃ¡s cosas. Esa es una gran manera de tener acceso a los elementos de un cuadro de entrada y, a continuaciÃ³n, comprobar, se trata de una direcciÃ³n de correo electrÃ³nico vÃ¡lida, es esta una fecha vÃ¡lida, por ejemplo. Usted sÃ³lo puede recuperar cosas al instante como la gente estÃ¡ escribiendo, y luego comprobar si es vÃ¡lida, enviarla a un servidor, hacer lo que quieras con Ã©l. Y asÃ­ es como se accede a lo que hay dentro de esas cajas. 

TambiÃ©n puede modificar CSS directamente, asÃ­ que en vez de sumar una clase que tiene algunas propiedades predefinidas, usted puede aÃ±adir cualquier CSS que desea nada. AsÃ­ que echemos un selecto cuerpo, que es toda la presentaciÃ³n, y el color es la caracterÃ­stica que define lo que los colores del texto. Si lo cambiamos al rojo, todo el texto de la pÃ¡gina se volverÃ¡ rojo. Podemos hacer algo como fondo de color azul, ahÃ­ vamos, es hermoso. Puedes hacer lo que quieras con esto. Usando la propiedad de CSS, que realmente se puede modificar la forma en nada se parece a cualquier hora. Lo siguiente es los efectos. Los efectos son bÃ¡sicamente la misma cosa que la modificaciÃ³n de la CSS, pero realmente ofrecen una animaciÃ³n adicional a ella. AsÃ­ que en lugar de mostrar u ocultar algo o cambiar el color, en realidad se puede hacer animaciÃ³n. AquÃ­ estÃ¡ la documentaciÃ³n, si quieres echar un vistazo a la extensa documentaciÃ³n para ello. Pero yo voy a cubrir los principales. Hay las propiedades ocultar mostrar y. Mostrar / ocultar ID corresponde en realidad a toda la caja, asÃ­ que si me escondo, simplemente desaparecerÃ¡. Y puedo mostrar de nuevo si quiero hacerla volver. Y es hora de volver. Esto en realidad no desaparece, Yo en realidad no quitarlo de la pÃ¡gina, que acaba de establecer la propiedad CSS de visibilidad a oculta por lo que no puede ver mÃ¡s. Hay tambiÃ©n deslizarse hacia arriba y deslice hacia abajo, que le permite tener este efecto. Se desliza hacia arriba a desaparecer, y despuÃ©s de que desaparezca se puede deslizar hacia abajo para hacerla volver. Y ahora estÃ¡ de vuelta. TambiÃ©n existe este efecto de fundido, que - fade ID corresponde a esta casilla. Si se desvanecen a cabo, entonces va a desaparecer lentamente. TambiÃ©n puedo desaparecer en ella, y que va a volver. Usted tambiÃ©n puede hacer fade a, que es especÃ­fico para la funciÃ³n de fundido. Puede hacer que se desvanezca a cualquier opacidad especÃ­fica que desea. AsÃ­ que si usted se desvanecen poco a poco a la 0.5, que va a convertirse en un medio visible. Yo puedo hacer que se vaya a 0,1, y de nuevo a 1 para que sea plenamente visible de nuevo. Esa es otra animaciÃ³n que se puede hacer. 

Hay tambiÃ©n los efectos de palanca. AsÃ­ que voy a seleccionar el ID de palanca, lo que corresponde a esta caja, y en ese div puede llamar palanca, y si es visible se volverÃ¡ invisible, si es invisible se harÃ¡ visible de nuevo. AsÃ­ que acabo de llamar a esta funciÃ³n de palanca dos veces, la primera fue lo mismo que la piel, la segunda llamada era lo mismo que un espectÃ¡culo. Y tambiÃ©n se puede hacer esto con una palanca se desvanecen, que hace lo mismo, salvo que en realidad se desvanece. Y lo mismo con la diapositiva alternar. Hay efectos encadenados, asÃ­, lo que significa si se selecciona un elemento y sÃ³lo llamar a un montÃ³n de mÃ©todos de animaciÃ³n en Ã©l, si querÃ­a que se desvanecen, y despuÃ©s hacia abajo, y luego esconderse y luego se desvanecen en el, lo harÃ¡ en una fila. AsÃ­ desapareciÃ³, volviÃ³ - por alguna razÃ³n, el cuero no ocurrieron. Vamos a probarlo. SÃ­, por lo que se desvaneciÃ³ y luego se apartÃ³. Y hay muchos mÃ¡s. Usted puede utilizar la funciÃ³n animate para crear sus propias animaciones, que es bastante complejo, sino que le proporciona la extensibilidad infinita. Usted puede hacer cualquier tipo de animaciÃ³n que desee. TambiÃ©n puede utilizar la cola para hacer cola varias animaciones a la vez. AsÃ­ que si quieres algo de volar a travÃ©s de la pÃ¡gina, diapositiva de la parte superior derecha a la inferior izquierda, usted puede hacer eso, y sÃ³lo tienen un puÃ±ado de acciones que van uno tras otro. 

Lo siguiente que vamos a hablar es de los acontecimientos. Eventos que permiten - hasta ahora, sÃ³lo hemos sido escribir cosas en la consola y esa es una manera de hacer que esto suceda, sino en una pÃ¡gina real, no vas a ser capaz de hacer las cosas de tipo de usuario en la consola. Usted quiere que las cosas sucedan de forma automÃ¡tica. Para ello, es necesario utilizar los eventos que activan en algÃºn determinado evento ocurra. Puede consultar la documentaciÃ³n de todos los detalles. AsÃ­ que vamos a ver. Queremos mostrar u ocultar la caja, pero ahora este botÃ³n no hace nada porque no ponerlo en prÃ¡ctica todavÃ­a. Voy a ir a la pÃ¡gina HTML actual. AquÃ­ estÃ¡ la diapositiva. Hay un div para la diapositiva. Tiene la clase de diapositiva. AhÃ­ estÃ¡ el texto. Ahora, hay una casilla y el botÃ³n de caja. Â¿CÃ³mo podemos hacer realidad este desaparece? En primer lugar, vamos a escribir una funciÃ³n que hace desaparecer el ID de la caja. Esta es la sintaxis para funtion, vamos a llamarlo hideTheBox. No se necesita ningÃºn argumento, porque no hay argumentos que se deben tomar. Podemos seleccionar el ID de la caja. AsÃ­, utilizando el jQuery seleccionar, podemos seleccionar ID de la caja, y luego simplemente hacerlo desaparecer. Vamos a hacer que se desvanecen. Si nos encontramos con esta funciÃ³n en la consola actual, podrÃ­amos definir esta funciÃ³n, podemos llamar a hideTheBox, y funciona. Pero queremos que suceda cuando se pulsa en realidad el botÃ³n. Para hacer eso, tenemos que usar un evento. Para unirse a un evento en alguna tecla especÃ­fica o algÃºn acontecimiento de acciÃ³n, tenemos que seleccionar el elemento que el evento se dispararÃ¡ - o que activarÃ¡ el evento, lo siento. 

AsÃ­ que en primer lugar, vamos a seleccionar el botÃ³n de cuadro de ID porque ese es el botÃ³n, y ahora, para ese botÃ³n, queremos crear una animaciÃ³n cuando se hace clic en Ã©l. AsÃ­ que esta funciÃ³n de clic. Permite enlazar otra funciÃ³n a la misma. Esta funciÃ³n toma otra funciÃ³n como argumento podemos pasar a la funciÃ³n hideTheBox, y cada vez que se hace clic en este botÃ³n, esta funciÃ³n se ejecutarÃ¡ automÃ¡ticamente. AsÃ­ que esto va a funcionar si salvamos esto, voy a refrescar, y - un segundo, lo siento. Voy a corregir esto muy rÃ¡pido. Okay. Eso es. AsÃ­ que ahora la caja estÃ¡ desapareciendo cuando hacemos clic en el botÃ³n. TambiÃ©n podemos cambiar esto a sÃ³lo fadeToggle, cambiarlo simplemente para ocultar o mostrar la caja, y esto tambiÃ©n funcionarÃ¡ tambiÃ©n, si nos refrescamos. Podemos esconderlo, tambiÃ©n podemos demostrarlo, y que seguiremos trabajando. Otra cosa que podemos hacer es, en realidad no tenemos que definir esta funciÃ³n hideTheBox antes de llamar a la funciÃ³n de clic. AsÃ­ que en lugar de definir la funciÃ³n y llamar hideTheBox, sÃ³lo vamos a llamarlo si esto se hace clic. AsÃ­ podemos definir de forma anÃ³nima por aquÃ­, que es una caracterÃ­stica que JavaScript tiene. Puede definir una funciÃ³n, normalmente, dirÃ­amos funciÃ³n hideTheBox con argumentos, pero en cambio, sÃ³lo podemos decir que funciona sin argumentos, iniciar el corchete para definir la funciÃ³n, cerrar la llave de apertura, y luego simplemente definir la funciÃ³n aquÃ­, dentro del primer parÃ©ntesis y el Ãºltimo parÃ©ntesis que corresponden a los argumentos de la funciÃ³n de clic. AsÃ­ que estamos pasando en esta funciÃ³n, se puede copiar esta lÃ­nea de cÃ³digo justo aquÃ­, y que va a hacer exactamente lo mismo. Y ahora no tenemos esta funciÃ³n fadeTheBox azar que estÃ¡ sentado alrededor sin ninguna razÃ³n aparente. La funciÃ³n fue definida anÃ³nima, que no tiene un nombre. SÃ³lo se ejecuta cuando se hace clic en el botÃ³n de caja. Muy refrescante, una vez mÃ¡s, una vez mÃ¡s, y se puede ver que todavÃ­a funciona. Y esa es la forma de crear eventos. 

Hay una gran cantidad de eventos que podemos utilizar. Voy a volver a utilizar la consola que usted acaba de mostrar cÃ³mo funcionan. Los identificadores para cada uno de estos corresponden a cada caja. AsÃ­ que este cuadro es clic ID, Ã©sta es la clave de identificaciÃ³n, y Ã©ste es ID ratÃ³n. Otra cosa es que hay esta funciÃ³n de acciÃ³n, en lugar de escribirlo a cabo todo el tiempo, De hecho, me fui por delante y define esta funciÃ³n de acciÃ³n aquÃ­. Se hace lo mismo que la funciÃ³n hideTheBox. Se hace este cuadro y, o bien se desvanece hacia fuera o se desvanece Ã©l adentro Y es por eso que somos capaces de utilizarlo aquÃ­. AsÃ­ que si hacemos clic en este tecleo ID, queremos hacer desaparecer o reaparecer la caja. Es lo mismo que el botÃ³n que hemos tenido en la Ãºltima diapositiva. Ahora, despuÃ©s llamamos a eso, podemos hacer clic sobre Ã©ste y la caja va a desaparecer, a continuaciÃ³n, haga clic en Ã©l de nuevo y el cuadro volverÃ¡ a aparecer. Eso es bastante simple. Haga doble clic hace lo mismo, excepto que requiere un doble clic. AsÃ­ que si hace clic en Ã©l una vez y haga clic en Ã©l de nuevo no pasarÃ¡ nada, pero si se hace doble clic rÃ¡pidamente, va a desaparecer. Si hace doble clic otra vez, va a volver. AsÃ­ que eso es bastante simple. Entrada de teclado es un poco raro, yo no creo que realmente funciona en este ejemplo porque la tecla, la tecla y pulse la tecla y otras acciones clave activarÃ¡ sin importar quÃ© elemento se enlaza a. Por ejemplo, aun cuando atÃ© el pulsador hasta el cuerpo o algo mÃ¡s completo, entonces serÃ­a todavÃ­a activar no importa - no es especÃ­fica. No tengo que hacer clic en esta opciÃ³n y pulse una tecla para hacer nada desaparece. Esto se activa independientemente de quÃ© elemento Estoy actualmente pulg AsÃ­ que estos en realidad no funcionan en este ejemplo porque no me reconoce como entrar en la entrada a la div teclado. 

Pero si nos fijamos en las acciones del ratÃ³n, el primero se ciernen, y se puede hacer algo de esto con CSS. Si utiliza CSS, se pueden crear de forma que si se pasa sobre algo, entonces sus cambios de estilo. Pero el uso de jQuery puede cambiar los estilos de otras cosas tambiÃ©n. AsÃ­, por ejemplo, vamos a llamar a la acciÃ³n si el ratÃ³n sobre este div. Eso significa que si el ratÃ³n sobre ella, entonces la caja desaparecerÃ¡. Si nos alejamos de ella, el cuadro vuelve a aparecer. Si llamamos a esto y se ciernen sobre ella, la caja no desaparece, y en cuanto nos alejamos, vuelve. Si llamamos a esta funciÃ³n activable en el identificador de ratÃ³n, lo que corresponde a este cuadro, entonces si el ratÃ³n sobre la caja, entonces la caja desaparezca en realidad - es ser cobarde ahora, pero - si nos alejamos de ella, volverÃ¡ a aparecer. En este momento es imposible por alguna razÃ³n. El ratÃ³n entre y funciones de movimiento del ratÃ³n es un tanto similar, pero ligeramente diferentes. RatÃ³n entrar sÃ³lo se activa cuando el ratÃ³n entra en la caja, como se esperaba. AsÃ­ que si usted se mueve en Ã©l, que va a desaparecer. Pero no volverÃ¡ a aparecer cuando se aleje; tendrÃ¡s que volver sobre Ã©l para que regrese. TambiÃ©n estÃ¡ la funciÃ³n de desplazamiento del ratÃ³n, que activarÃ¡ cada vez que el ratÃ³n estÃ¡ presente incluso en el cuadro. AsÃ­ que voy a seguir adelante, apareciendo y desapareciendo. Y en realidad es el registro - que parece que acaba apareciendo y desapareciendo, pero en realidad el registro muchas mÃ¡s acciones que esto, asÃ­ que cuando te alejas sÃ³lo va a seguir adelante porque registra como un millar de ellos. QuizÃ¡s no es un mil. Tal vez cinco. Registra mÃ¡s que eso. El punto es que todas las acciones del ratÃ³n, hay un montÃ³n de ellos. Usted puede leer sobre los otros, pero son un poco diferentes, y usted puede elegir la que mÃ¡s te necesita para cualquier propÃ³sito especÃ­fico que usted estÃ¡ tratando de hacer. 

Lo siguiente que voy a hablar es de AJAX. AJAX, ya sÃ© que no cubrimos JavaScript en tanta profundidad de este aÃ±o, asÃ­ que sÃ³lo voy a hablar de AJAX en general por un minuto. AJAX significa Asynchronous JavaScript y XML. Se trata bÃ¡sicamente de, por ejemplo, cuando estÃ¡s en Facebook y te empuja a la notificaciÃ³n, eso se debe a AJAX se estÃ¡ ejecutando en su navegador web. Cada par de segundos el navegador web en realidad ir a los servidores de Facebook, pidiÃ©ndoles que, Â¿tienes algo nuevo para mÃ­, y luego se vuelve a ti. Esto le permite enviar peticiones a un servidor sin tener que cargar la pÃ¡gina. AsÃ­ que normalmente, si usted estÃ¡ usando PHP y una base de datos, usted tiene que actualizar la pÃ¡gina antes de poder obtener nueva informaciÃ³n desde el servidor. Pero el uso de AJAX, se puede tirar de esa nueva informaciÃ³n constantemente, o tirar de Ã©l cuando hace clic en un botÃ³n o algo por el estilo. AsÃ­ que esto nos permite enviar solicitudes sin necesidad de recargar la pÃ¡gina, y podemos utilizar peticiones GET o POST. 

CONSIGUEN peticiones son, por ejemplo, si a Google.com in English y hacer q test =. Eso les estÃ¡ dando una prueba de consulta. Y eso es una solicitud GET porque estÃ¡ pasando en esos parÃ¡metros en la propia URL. A peticiÃ³n POST es como si usted les estÃ¡ enviando por correo postal. Es como si lo pones en una carta y lo envÃ­a fuera de ellos, pero que en realidad no ver el contenido. No son visibles en la URL. No se puede directamente escribirlo, hay que enviarlo casi en secreto. EstÃ¡ en un poste. Pero el uso de jQuery, puede hacer peticiones GET y POST mucho mÃ¡s fÃ¡cil de lo que normalmente puede utilizar simplemente JavaScript llano. Puede consultar las API que utilizan peticiones GET, y tambiÃ©n se puede comprobar la informaciÃ³n de inicio de sesiÃ³n. En la pÃ¡gina siguiente, he creado esto, que pregunta: "Â¿QuÃ© hay para comer?" mediante la API de alimentos Harvard, asÃ­ que vamos a tirar eso. Esto es sÃ³lo un ejemplo de cÃ³mo se puede utilizar jQuery para hacer una solicitud GET a una API y obtener informaciÃ³n de nuevo de ella. AsÃ­ que queremos ver en el menÃº de hoy, y queremos ver lo que hay para el almuerzo. Esta es la URL para crear una solicitud GET en jQuery. utiliza el $. obtener la funciÃ³n. El primer argumento es la direcciÃ³n URL, por lo que es exactamente lo que estÃ¡ consultando. A continuaciÃ³n, el siguiente argumento es una funciÃ³n que se ejecuta cuando la solicitud GET es completa. AsÃ­ que usted envÃ­a fuera alguna solicitud al servidor, espere a que vuelva. Cuando se viene de vuelta, vas a tomar alguna acciÃ³n con los datos que hay de nuevo desde el servidor. Vamos a seguir adelante y el cÃ³digo de esto tambiÃ©n. No codificar esta bien, a propÃ³sito. AquÃ­ estÃ¡ el TODO. En primer lugar, vamos a usar el enlace de eventos de forma que cuando se pulsa este botÃ³n, que enviamos de una solicitud GET. Y cuando esa solicitud GET regresa con algunos datos, vamos a escribirlo en esta info comida div ID. En primer lugar, vamos a seleccionar el botÃ³n ID alimentos. Cuando se hace clic en Ã©l, queremos que se haga algo. Vamos a hacer que un fuction anÃ³nima, como antes. Se puede envolver esas llaves, y al pulsar este botÃ³n, queremos enviar una solicitud GET para comprobar lo que hay para comer. Para ello, simplemente podemos escribir $. Conseguir. Esta es una funciÃ³n de jQuery, con el signo de dÃ³lar. Se tarda un par de argumentos. La primera de ellas es la URL, la segunda es la funciÃ³n de devoluciÃ³n de llamada, la funciÃ³n que se llama cuando esa solicitud devuelve en realidad. Vamos a construir la URL primero. Podemos obtener de la API que David escribiÃ³ arriba. Vaya aquÃ­, podemos ver que es food.cs50.net/api/1.3/menus, y luego sÃ³lo pasa en los nombres de los parÃ¡metros que desea. AsÃ­ parÃ¡metro 1 es el valor 1. Parece fecha estÃ¡ndar, fecha de inicio, por defecto hasta hoy si no se introduce nada, y fecha de finalizaciÃ³n tambiÃ©n por defecto que hoy en dÃ­a si no se introduce nada. Eso es lo que queremos. Queremos obtener sÃ³lo la informaciÃ³n de hoy en dÃ­a. 

Queremos que el formato estÃ© en JSON. Eso es arbitraria, se puede usar cualquier forma que desee. Usted puede utilizar CSV, pero JSON es JavaScript Object Notation. Es muy fÃ¡cil para JavaScript de entender lo que significa, y podemos imprimirlo mÃ¡s fÃ¡cil de esa manera. AsÃ­ que vamos a solicitar en JSON, y pedir el almuerzo vamos. AsÃ­ comida = almuerzo. AsÃ­ que escribir la URL, volvemos aquÃ­. Hay menÃºs. El primer parÃ¡metro es la salida = JSON porque eso es lo que queremos, y separar los parÃ¡metros con una "y". El segundo parÃ¡metro es - no me acuerdo. Meal. Y queremos comida = almuerzo. Puede probar esta URL, escribiendo en su navegador e ir a ella. Se le darÃ¡ una salida. Es sÃ³lo un montÃ³n de cosas que hay para comer. Es en este formato feo. Queremos imprimirlo en nuestra pÃ¡gina en un formato mejor. AsÃ­ que el URL es correcto, ahora sÃ³lo tenemos que escribir una funciÃ³n volver a llamar cuando la solicitud tiene Ã©xito. Esta funciÃ³n en realidad tener un argumento. SerÃ¡ datos. Los datos son lo que regresa de la solicitud GET despuÃ©s se hace la peticiÃ³n GET. Podemos hacer las llaves, aquÃ­ escribimos la funciÃ³n anÃ³nima que realiza, utilizando esos datos cuando tengamos la informaciÃ³n de nuevo. AsÃ­ los datos, cuando escribimos en este URL, esto es lo que los datos que va a ser similar. Va a ser esta gran cadena. Pero lo bueno es que, JavaScript puede analizarlo usando la funciÃ³n JSON.parse. AsÃ­ que vamos a crear una nueva variable llamada de datos de anÃ¡lisis. Y los datos de anÃ¡lisis sintÃ¡ctico es una matriz de objetos. Cada objeto contiene informaciÃ³n como - bueno, vamos a echar un vistazo. Tiene una fecha, una comida, categorÃ­a, receta, todas estas otras cosas. AsÃ­ que vamos a imprimir el nombre de cada uno. Vamos a repetir en toda la gama de cosas que volvamos a Ã©l, y acaba de imprimir cada uno - imprimir el nombre de cada uno. Este es un bucle. 

JavaScript tiene esta sintaxis Ãºtiles donde se puede crear una variable y un bucle sobre una matriz, y var i es sÃ³lo el iterador, asÃ­ que en vez de tener que hacer var i = 0, yo era menos que la longitud, i + +, usted puede ver la var i en los datos analizada. En este ejemplo, los datos analizados (i) se corresponderÃ¡n con el elemento actual de la matriz, el objeto real. Y queremos que el nombre de ella. AsÃ­ que vamos a hacer nombre. Y la Ãºltima cosa es que vamos a tener un poco de jQuery nuevo. En realidad aÃ±adirlo a la div, esta info comida div que estÃ¡ actualmente vacÃ­a. AsÃ­ que vamos a seleccionar a eso. Vamos a usar jQuery y selecta comida info div ID o info comida ID, lo siento. Queremos aÃ±adir a esto. Si hiciÃ©ramos la prueba, por ejemplo, serÃ­a simplemente sobrescribir cada vez. AsÃ­ que sÃ³lo podemos aÃ±adir esto. El elemento actual en la matriz, nos pondremos el nombre de ella, y se lo aÃ±adimos al final de la info comida div ID. Y a continuaciÃ³n, sÃ³lo para que se vea mÃ¡s limpia, tambiÃ©n vamos agregamos un salto de lÃ­nea por lo que no es todo en una sola lÃ­nea. AsÃ­ que si todo va bien, que debe ser bueno - en primer lugar, cada vez que se hace clic en este botÃ³n, se enviarÃ¡ de una solicitud GET a la URL. Cuando los datos se vuelve de ella, va a analizarlo, convertirlo en JSON, lazo sobre toda la matriz que representa los datos, y luego aÃ±adir el nombre y un salto de lÃ­nea para cada lÃ­nea de esta info comida ID que antes estaba vacÃ­a. AsÃ­ que volver a esta pÃ¡gina, vamos a refrescar, clic, saber - no funciona. Eso es lamentable. Y aquÃ­ es donde la depuraciÃ³n entra en juego Index.html, lÃ­nea 1. Es interesante. EstÃ¡ bien, bueno, en lugar de gastar tiempo haciendo esto, yo sÃ³lo voy a tire hacia arriba el archivo hecho que tengo, que es la versiÃ³n completa. No estoy seguro de cuÃ¡l es la diferencia, pero sÃ³lo puedo abrir esto en su lugar. Y vamos a la AJAX, y esto deberÃ­a funcionar correctamente. Eso es lo que era para el almuerzo, en ningÃºn orden en particular, con comillas alrededor de Ã©l, asÃ­ que no es el mÃ¡s bonito. Pero, obviamente, si estuviera haciendo esto para un proyecto final, usted desea que se vea mejor. Pero eso es sÃ³lo un ejemplo sencillo de cÃ³mo se hace la peticiÃ³n GET. Y si nos fijamos en el cÃ³digo real, supongo, estoy bastante seguro de sigue siendo mÃ¡s o menos la misma. Oh, me olvidÃ© de convertirlo en una cadena, eso es todo. No, no estÃ¡ todavÃ­a trabajando. De todos modos, aquÃ­ estÃ¡ el cÃ³digo completo real por lo que este debe ser similar, y hace lo mismo que lo que acabo de implementar. Al hacer clic en el botÃ³n, se utiliza GET JSON para analizar automÃ¡ticamente los datos. Toma los datos de nuevo de Ã©l y recorre toda la gama e imprime el - lo que sea para el almuerzo, el nombre de la misma, y aÃ±ade un salto de lÃ­nea despuÃ©s de cada lÃ­nea. AsÃ­ es como se utiliza la funciÃ³n GET. 

TambiÃ©n puede utilizar POST, que yo no tengo tiempo para escribir un ejemplo de ello, pero podemos mirar la documentaciÃ³n. Si nos fijamos en jquery.post, se puede ver que es casi lo mismo. Usted tiene una URL, pero en lugar de pasar parÃ¡metros con - simplemente ponerlos en la cadena de la propia URL, usted tiene que pasar en esta variable de datos que es bÃ¡sicamente una matriz, un diccionario que asigna los parÃ¡metros a los valores. Se pasa que, y que los envÃ­a en el uso de un POST. Y una vez que tienes eso, entonces usted puede tener una funciÃ³n Ã©xito que se ejecuta cuando los datos vienen de vuelta. De lo contrario, es exactamente lo mismo. AsÃ­ que usando POST, es posible que desee utilizar POST, por ejemplo, si tiene un formulario de entrada deja que las contraseÃ±as de entrada de las personas en ella, y enviar las contraseÃ±as de a la secuencia de comandos de servidor, para comprobar en la base de datos si el usuario es vÃ¡lido o no. Usted puede hacer que todo el uso de jQuery en lugar de tener que actualizar la pÃ¡gina en absoluto. Eso es lo que he implementado en el blog que he mostrado antes. Si vamos al portal extremo y cerrar la sesiÃ³n, cierre la sesiÃ³n, Cierre la sesiÃ³n no funciona. Bueno, permÃ­tanme abrirlo en una nueva ventana. AquÃ­ hay una contraseÃ±a, y yo iba a escribir algo al azar. No funciona, pero se puede ver que no nos en realidad tiene que actualizar la pÃ¡gina en absoluto. El cÃ³digo, si quieres echar un vistazo, es todo lo disponible en aquÃ­. AsÃ­ que el cÃ³digo que escribÃ­ el aÃ±o pasado alguna vez. Como se puede ver aquÃ­, estamos enviando una solicitud POST. Tengo un archivo llamado login.php en la parte de atrÃ¡s, que comprueba si la contraseÃ±a es vÃ¡lida. Los parÃ¡metros que pasamos en Son contraseÃ±a asignada a la entrada que estÃ¡ en esta caja de entrada actualmente. Y cuando los datos se vuelve, comprobamos. Si la informaciÃ³n es falsa, entonces se dice contraseÃ±a incorrecta, deslice hacia abajo, y simplemente hacerlo desaparecer despuÃ©s de eso. De lo contrario, cargamos la pÃ¡gina de administraciÃ³n. Y todo esto fue hecho usando JSON. En este nÃºmero de lÃ­neas de cÃ³digo, puedes pasar los datos a la parte de atrÃ¡s, compruebe si es correcta, compruebe si se ha conectado correctamente, y en realidad responder a ella, la reorientaciÃ³n de la persona a la pÃ¡gina correcta o no dejarlos entrar y les dijo que tenÃ­an una contraseÃ±a incorrecta. AsÃ­ que eso es un ejemplo de cÃ³mo se puede utilizar el poste de jQuery para enviar una peticiÃ³n POST a la parte de atrÃ¡s, comprobar si alguien estÃ¡ conectado correctamente. 

Muy bien, asÃ­ que eso es todos los ejemplos que he tenido, y todas las cosas que querÃ­a cubrir. Esas son las cosas mÃ¡s importantes que jQuery le permite hacer: seleccionar elementos, modificarlos mediante la manipulaciÃ³n DOM, puede agregar efectos, active cosas en ciertos eventos, y tambiÃ©n hacer peticiones AJAX muy transparente y sencilla. AsÃ­ que gracias por venir y ver, y si usted tiene cualquier pregunta, sÃ³lo hÃ¡zmelo saber. Â¿SÃ­? [Estudiante] Antes, cuando apareciste, que tenÃ­a JSON despuÃ©s de la peticiÃ³n POST entre comillas, y me preguntaba lo que hicieron. >> SÃ­, ya veo. La cuestiÃ³n era que, en el ejemplo que acaba de aparecer, existÃ­a la palabra JSON entre comillas alrededor de la - Voy a tirar de nuevo - en torno a la funciÃ³n POST. Estoy tirando de Ã©l hacia arriba para mostrar. AsÃ­ que aquÃ­ estÃ¡ esta peticiÃ³n POST, y hay esta JSON entre comillas. Eso define lo que estamos esperando que la salida sea. AsÃ­ que si pasamos en JSON como el tipo de datos esperado, no es un requisito, pero si pasamos adentro, entonces los datos de forma automÃ¡tica se analizarÃ¡n como JSON. AsÃ­ que no tenemos que llamar a la funciÃ³n de anÃ¡lisis JSON en Ã©l, sÃ³lo va a suceder de forma automÃ¡tica. Y si usted echa un vistazo a la documentaciÃ³n de POST, existe esta variable de tipo de datos, el tipo de datos que se espera desde el servidor. Por defecto es una conjetura inteligente que puede estar equivocado, asÃ­ que usted puede dejarlo en blanco, pero es sÃ³lo el tipo de datos en la codificaciÃ³n que estÃ¡ utilizando, ya sea JSON o XML, o algo mÃ¡s. 

Â¿Alguna otra pregunta? EstÃ¡ bien. Si usted tiene cualquier otra pregunta, no dude en enviarme un correo electrÃ³nico en vshekhawat@college.harvard.edu, y las diapositivas y el cÃ³digo debe estar disponible en lÃ­nea muy pronto. Buena suerte con sus proyectos finales, espero que utiliza jQuery. [CS50.TV]