[Powered by Google Translate] [Seminari: jquery] [Vipul Shekhawat, la Universitat de Harvard] [Aquest és CS50.] [CS50.TV] Si vostè està seguint al llarg de a casa, vostè pot tenir accés als meus diapositives en línia per anar a aquest enllaç. És TjjRWj, en bit.ly. També pot anar a la URL directament, que és cloud.cs50.net / ~ vshekhawat, que és el meu nom, i jQuery. Jo us animo a seguir endavant si vostè està veient a casa, i si ets aquí, també, perquè es tracta d'una presentació molt interactiva. 

Així que avui parlaré de jQuery, i la primera pregunta és, el que és jQuery? Aquest any, jo sé que vostès no han cobert JavaScript amb tant detall com ho hem fet en els últims anys. JavaScript és, primer de tot, només un llenguatge del costat del client que s'utilitza per executar seqüències d'ordres i codi en la màquina de cada usuari. Així que tens un servidor que proporciona les pàgines web a les persones, però és possible que vulgueu fer coses al vostre ordinador, demanar al seu equip perquè enviï peticions al servidor cada 30 segons o alguna cosa així. Vostè pot fer que l'ús de JavaScript. JQuery només proporciona una major funcionalitat a la part superior de JavaScript que fa coses extra per a vostè. Si ens fixem en el contingut en la part superior, que descriu algunes de les coses que ets capaç de fer. Així que en general, va ser creat al gener de 2006. Va ser concebut en primer lloc l'agost de 2005. Ha estat per aquí durant un parell d'anys, i és realment part del nou moviment de la Web 2.0 que ha fet d'Internet tan brillant. És la biblioteca de JavaScript més utilitzat. Més de 19,6 milions de llocs web estan utilitzant, i l'ús segueix augmentant segons builtwith.com, que, segons sembla, en l'últim any, acaba de ser constant augment bastant lineal. Entre els 10 milions de llocs més, encara hi ha - voltant del 40% d'ells estan actualment utilitzant. Facebook utilitza, un munt d'altres llocs web fan servir actualment. Vostè pot mirar aquestes estadístiques pel seu compte, si ho desitja. I es podria dir que és de fiar, ja que té una base i 13 membres de la junta, juntament amb un equip de 20 persones que treballen de forma regular. Així que és molt utilitzat, té un. URL org, és elegant, té spin-offs per altres coses, així que és una gran cosa. 

Per què utilitzar-lo? JQuery és molt lleuger. Això vol dir que no és un arxiu enorme. Podeu descarregar l'arxiu minified, que és sense tots els espais en blanc i comentaris, i està a només 32 kB. Així que és fàcil de llençar a la seva pàgina web i acaba de començar a usar-lo. També està escrit de manera molt eficient, pel que no ocupa molt - que no alenteix el seu lloc web molt més quan s'utilitza. Això permet implementar coses que abans eren inviables. Hi ha alguns aspectes de funcionalitat, com la creació d'animacions, que normalment seria molt, molt difícil de fer. Però en jQuery són en realitat molt simple. I hi ha coses que són molestes per fer, possible en JavaScript, com l'enviament d'una petició POST, però per enviar una petició a un servidor, vostè ha d'escriure cinc o sis o set línies de codi. Ara només es pot fer d'una sola línia de codi, en una sola trucada de funció. Això realment simplifica moltes de les coses que vostè està fent. I tots els nens frescos ho estan utilitzant. Per això, jo em refereixo. En el meu projecte final de l'any passat, que és news.whrb.org, que és per l'estació de ràdio, he creat aquest blog que acull tots els espectacles que hem fet i els arxius MP3 per a ells. Vostè pot navegar a través dels últims shows, i tot es fa fent servir jQuery. Es pot dir perquè de totes aquestes animacions, essencialment. Així que si vostè té - si crearà un nou post, veus aquests petits slideDowns, això és tot fet amb jQuery. I aquesta caiguda - de manera que tipus de coses es fa tot fent servir jQuery, i vostè no ha de recarregar constantment la pàgina de navegació en el lloc. Una altra cosa interessant que es fa ús de jQuery és aquesta presentació. Estic usant aquesta cosa de codi obert anomenat scrolldeck, que algú va escriure a la part superior de jQuery. Si realment es veuen en la font, es pot veure que que estan fent servir aquest signe de dòlar, símbol del dòlar s'utilitzen en jQuery per indicar que una funció és una funció de jQuery. Així que estan definint un contenidor a la part superior de jQuery que li permet fer una presentació d'aquest tipus, i es pot veure que aquí estan inclosos en el fitxer jQuery original, que és el que haurà d'incloure si voleu utilitzar jQuery en els seus propis llocs web. 

Tocar en això, com s'instal · la? Vostè pot anar a jQuery.com i descarregar l'arxiu, afegir-lo a un directori web i incloure-la. Així que a la part superior, en l'etiqueta del cap del seu arxiu HTML del seu arxiu HTML principal, només té aquesta línia de codi amb la versió correcta de la versió de jQuery que utilitza. Pots descarregar, aneu a jQuery.com, feu clic a "jQuery descàrrega", i ja ho tens. Això és tot. I, de fet, podem fer una ullada al que sembla. Si fa clic a descarregar, jQuery és això. És només un gran arxiu JavaScript que fa totes les coses de la màgia per a vostè. Aquesta és la versió miniaturitzada, que no es pot llegir en absolut. També es pot veure a la versió de desenvolupament, que es pot llegir però segueix sent molt, molt llarg. És un munt de coses aquí. També es pot vincular a la versió allotjada de Google de la mateixa. Així que vaig a permetre que només es basen en Google per proporcionar-la. Ells proporcionen cada versió de la mateixa, disponibles en tot moment. Així que és probable que pugui confiar a Google de ser l'amfitrió per a vostè. O pot enllaçar a pròpia última versió de jQuery. Tenen una URL que està sempre actualitzat a l'última versió. És jQuery-latest, i hi ha un problema amb això, que és que si el jQuery actualitzat i una mica de la funcionalitat anterior havien torna retrògrad o en desús, potser no - pot començar a no aconseguir el suport més. Així que si vostè escriu un lloc web utilitzant la versió 1.8.2, de moment la versió 2.7 surti algunes de les funcions que ha escrit ja no funcionen. Així que és millor que només ha de descarregar l'arxiu 32 kB, el va posar a la seva pàgina web, i que va a treballar per sempre. 

Vaig a seguir endavant i començar a parlar sobre la funcionalitat real de jQuery. El primer és selectors. Això és el que jQuery es va concebre inicialment per proporcionar. I vostè pot fer clic a la documentació de mirar la documentació detallada dels selectors que vaig a estar cobrint. La idea darrere d'selectors és que vostè pot seleccionar els elements HTML d'una pàgina. Elements d'una pàgina tenen IDs i les classes i altres aspectes que identifiquen els mateixos. Hi ha també -, són de diferents ordres. Part del temps que estan imbricats uns dins dels altres. JQuery li permet crear consultes simples que recuperen elements de la pàgina. A continuació, pot manipular aquests elements amb funcions de jQuery, que és la secció de manipulació anem a arribar a més tard. Vostè pot canviar l'HTML, canviar el CSS, també es pot animar i afegir funcions que s'activen en determinats esdeveniments. Així, per exemple, si fa clic en ell alguna cosa, vol que alguna cosa succeeixi, vostè pot fer que l'ús de jQuery també. I hi ha un gran nombre de formes de seleccionar elements. La majoria d'ells mai he fet servir, però hi ha els bàsics, els quals són molt importants. El selector d'elements, per exemple, si heu seleccionat res que és un div - En realitat tinc el codi obert per a la presentació de diapositives. Així, per exemple, aquí hi ha la primera diapositiva. Aquí tenim un div. Si realment seleccionem tots els divs a la pàgina, només ens donarà una matriu de tots els divs que hi ha en aquest arxiu. El selector d'ID li permet seleccionar qualsevol cosa amb un ID donat. Així que si, per exemple, això té l'ID "què" i si ho vam fer amb # el que en lloc d'un document d'identitat, seria simplement retornar una matriu que té un sol element, i és que els elements de la pàgina. També podem combinar selectors d'aquesta manera per tenir seleccionar només les coses amb IDs que són divs. Així que si. Només seleccioneu divs que tenen aquest ID. Per a la classe que acaba d'utilitzar un punt, que és el mateix que el CSS. Descendent també funciona, així que si vostè té certa classe i s'ha niat elements dins d'ella - així, per exemple, hi ha una certa classe i té una etiqueta d'àncora per enllaçar a una altra pàgina, pot utilitzar aquesta sintaxi per recuperar el vincle. També podeu seleccionar diverses coses alhora, només separar-les per comes, utilitzar qualsevol selector desitja, i vostè seleccionarà tots ells alhora, en una sola matriu. I després hi ha també la no selecció, així que vostè pot seleccionar tots els divs que no tenen alguna classe específica. I això és només una forma útil d'obtenir una introducció a com funciona aquesta selecció. Et vaig a mostrar alguns exemples concrets en un segon. 

Selectors avançats són - aquests són només alguns exemples. Hi ha dotzenes d'ells, però si voleu seleccionar totes les etiquetes d'imatge dins d'algun element, que acaba de fer: la imatge. Si voleu seleccionar els elements, fins i tot, per exemple, si hi ha 20 d'ells, que voleu seleccionar 0, 2, 4, 6 i així successivament, que fas: també, o també pots fer: estrany. Aquests són selectors de pseudo, el que significa que en realitat calculen cada un altre element en lloc d'anar i seleccionant tots ells. Vostè pot també - cada element pot també tenir atributs específics. Així, per exemple, la classe = centre és també un atribut. Per aquesta etiqueta d'àncora, href, hipertext referència, és un atribut també. Així que vostè pot seleccionar una cosa que es vincula a una pàgina específica o simplement - és molt general. Vostè pot seleccionar qualsevol cosa amb qualsevol atribut que desitja. I després, també, atribut conté. Si, per exemple, voleu seleccionar tots els elements d'entrada que tenen la paraula "pas", com el nom d'ells, si una pàgina té un bloc de text d'entrada que es diu "password", això seria una manera de poder seleccionar aquesta. I hi ha molts més. Vostè pot seguir endavant i mirar la documentació i veure exemples concrets de com funciona. 

El següent pas és la manipulació DOM. Després de seleccionar els elements, anem a voler realment fer coses amb ells. Fins ara no hem vist això en absolut, però si ens fixem en la documentació, no hi ha realment molt que poguéssim fer. En aquest punt, anem a seleccionar els elements d'aquesta presentació i manipular utilitzant jQuery. A causa que aquest es porta a terme fent servir jQuery, tenim accés a la biblioteca jQuery, i podem usar aquestes funcions dins d'aquest codi. Una de les coses útils que vostè pot no saber sobre és la consola. I Google Chrome és el que estic fent servir. Podeu prémer alt comandament J o alt de control J per obrir la consola. A Firefox Crec que és la comanda de canvi de K o de control de canvis K. A Safari has d'anar a canviar alguna configuració. Hi ha un enllaç si voleu fer-ho, però jo recomano aconseguir Chrome o Firefox. Així que anem a obrir la consola, que és aquí baix. Això li permet, bàsicament, només fer el que vulguis. Així que vostè pot simplement escriure en crear una variable anomenada x, x = 5, anem a veure el que x + 2 és. Fins i tot es pot fer alguna cosa com CS + A veure, x + 45, que serà CS50. Vostè només pot fer algunes coses típiques de JavaScript. Però també es pot fer jQuery aquí. 

Així que donem una ullada a aquest primer aspecte aquí. Crearem una variable anomenada HTML, que és una cadena. Té una etiqueta de paràgraf en el mateix, que es diu un text nou. Així que tenim aquest codi HTML, és un text nou, en les etiquetes de paràgraf. Ara que realment volem per afegir-lo a la pàgina. El configuro perquè el codi HTML per aquest paràgraf, aquest títol aquí, és append ID. Si seleccionem append ID i després afegir a la mateixa la variable HTML que acabeu de crear, que se sumarà que l'HTML al final, just després d'aquesta etiqueta de paràgraf. Així que si ho fem - que triem aquest paràgraf, i que hem anomenat la funció append amb la variable HTML Acabo d'afegir, que se sumarà aquest nou text a la dreta allà a la pàgina. També podem anteposar, el que significa que va a anar abans, a principis d'aquest element. Així que hi ha una mica de text nou al començament i després. Puc seguir endavant i refrescar per desfer-aquestes coses només el que he fet. Però això és un exemple de com es pot utilitzar el Prefix i Sufix mètodes per manipular coses a la pàgina, afegir una mica d'HTML. 

També pot canviar de classe. De nou en aquest arxiu d'estil, he creat això per a la classe de victòria que té el color del text vermell, una mica de color de fons, i una ombra de text. Es veu horrible, però en realitat es pot - Aquest paràgraf correspon a ID de classe. Així que pot afegir la classe per la victòria. Puc executar aquesta a la consola, i que va a afegir aquesta classe, i ara es veu horrible, com s'esperava. El CSS automàticament s'aplica a les classes que vostè - si hi ha CSS per a una classe, automàticament s'aplica si canvia la classe d'un element. Llavors podem esborrar usant la classe remove. Així que si vostè té algunes classes predefinides com el vermell o destacat, i que desitja aplicar als elements, vostè no ha de fer tot l'estil CSS cada vegada. Vostè pot afegir la classe a un element, i després es convertirà automàticament - que es veurà de forma automàtica apropiat per a aquesta classe. També podem treure les coses, així que vaig a seleccionar tots els divs a la pàgina i eliminar-los. Què és això va a semblar? Es va a mirar com si res, així que en realitat és gens esquerra. El meu presentació s'ha anat. Puc refrescar-se i portar-ho de tornada, per sort, perquè acaba de publicar una vegada, però això és un exemple de l'eliminació, si vols destruir completament un element de la pàgina. 

També pot sobreescriure, i jo vaig a seleccionar totes les etiquetes de paràgraf a la pàgina i van dins d'ells i reemplaçar qualsevol text que tenen en ells amb només la paraula "prova". Si ho fa, se li reemplaça cada paràgraf a la pàgina amb aquesta prova. Sip. Tots estan reemplaçats per proves. Així que això és un exemple d'accés al text i escrivint sobre ells. També pot recuperar la informació, i això és genial per als camps d'entrada. Si vostè té un quadre d'entrada que la gent està escrivint coses en, la gent està escrivint coses en ell, Aquí seleccionem l'entrada, qualsevol etiqueta d'entrada amb un tipus de text. En aquest cas, només hi ha un quadre d'entrada de tota la presentació, pel que només haurem de seleccionar el primer, i després cridem la funció val en ell. Que torna el valor, i per un quadre d'entrada, el valor és el que passa a ser en el seu interior. Així que si fem això, simplement retorna les coses cadena. I si anomenem de nou després d'haver escrit més coses, esdevé més coses. Aquesta és una gran manera de tenir accés als elements d'un quadre d'entrada i, a continuació, comprovar, es tracta d'una adreça de correu electrònic vàlida, és aquesta una data vàlida, per exemple. Vostè només pot recuperar coses a l'instant, ja que la gent està escrivint, i després comprovar si és vàlida, enviar-la a un servidor, fer el que vulguis amb ell. I així és com s'accedeix al que hi ha dins d'aquestes caixes. 

També pot modificar CSS directament, així que en comptes de sumar una classe que té algunes propietats predefinides, vostè pot afegir qualsevol CSS que desitja res. Així que donem una selecte cos, que és tota la presentació, i el color és la característica que defineix el que els colors del text. Si el canviem al vermell, tot el text de la pàgina tornarà vermell. Podem fer alguna cosa com a fons de color blau, aquí anem, és bonic. Pots fer el que vulguis amb això. Usant la propietat CSS, que realment es pot modificar la forma en res s'assembla a qualsevol hora. El següent és els efectes. Els efectes són bàsicament la mateixa cosa que la modificació de la CSS, però realment ofereixen una animació addicional a ella. Així que en lloc de mostrar o ocultar alguna cosa o canviar el color, en realitat es pot fer animació. Aquí està la documentació, si vols fer una ullada a l'àmplia documentació per a això. Però jo vaig a cobrir els principals. Ha les propietats amagar mostrar i. Mostra / oculta ID correspon en realitat a tota la caixa, així que si m'amago, simplement desapareixerà. I puc mostrar de nou si vull fer-la tornar. I és hora de tornar. Això en realitat no desapareix, Jo en realitat no treure'l de la pàgina, que acaba d'establir la propietat CSS de visibilitat a oculta pel que no pot veure més. Hi ha també lliscar cap amunt i feu lliscar cap avall, que li permet tenir aquest efecte. Llisca cap amunt a desaparèixer, i després de que desaparegui es pot lliscar cap avall per fer-la tornar. I ara està de tornada. També hi ha aquest efecte de fos, que - fade ID correspon a aquesta casella. Si s'esvaeixen a terme, llavors desapareixerà lentament. També puc desaparèixer en ella, i que tornarà. També pots fer fade a, que és específic per a la funció de fos. Pot fer que s'esvaeixi a qualsevol opacidad específica que desitja. Així que si vostè s'esvaeixen a poc a poc a la 0.5, que es convertirà en un mitjà visible. Jo puc fer que es vagi a 0,1, i de nou a 1 perquè sigui plenament visible de nou. Aquesta és una altra animació que es pot fer. 

Hi ha també els efectes de palanca. Així que vaig a seleccionar la identificació de palanca, el que correspon a aquesta caixa, i en aquest div pot trucar palanca, i si és visible es tornarà invisible, si és invisible es farà visible de nou. Així que acabo de cridar a aquesta funció de palanca dues vegades, la primera va ser el mateix que la pell, la segona trucada era el mateix que un espectacle. I també es pot fer això amb una palanca s'esvaeixen, que fa el mateix, llevat que en realitat s'esvaeix. I el mateix amb la diapositiva alternar. Ha efectes encadenats, així, el que significa si s'ha seleccionat un element i només trucar a un munt de mètodes d'animació en ell, si volia que s'esvaeixen, i després cap avall, i després amagar-se i després s'esvaeixen en el, ho farà en una fila. Així va desaparèixer, va tornar - per alguna raó, el cuir no van ocórrer. Anem a provar-ho. Sí, per la qual cosa es va esvair i després es va apartar. I hi ha molts més. Vostè pot utilitzar la funció animate per crear les seves pròpies animacions, que és bastant complex, sinó que li proporciona l'extensibilitat infinita. Vostè pot fer qualsevol tipus d'animació que desitgi. També pot utilitzar la cua per fer cua diverses animacions alhora. Així que si vols alguna cosa de volar a través de la pàgina, diapositiva de la part superior dreta a la inferior esquerra, vostè pot fer això, i només tenen un grapat d'accions que van un rere l'altre. 

El següent que anem a parlar és dels esdeveniments. Esdeveniments que permeten - fins ara, que hem estat el mecanografiar coses a la consola i aquesta és una manera de fer que això passi, sinó en una pàgina real, no seràs capaç de fer les coses de tipus d'usuari a la consola. Vostè vol que les coses succeeixin de forma automàtica. Per a això, cal utilitzar els esdeveniments que activen en algun determinat esdeveniment ocorri. Podeu consultar la documentació de tots els detalls. Així que anem a veure. Volem mostrar o amagar la caixa, però ara aquest botó no fa res perquè no posar-ho en pràctica encara. Aniré a la pàgina HTML actual. Aquí està la diapositiva. Hi ha un div per la diapositiva. Té la classe de diapositiva. Aquí està el text. Ara, hi ha una casella i el botó de caixa. Com podem fer realitat aquest va desaparèixer? En primer lloc, anem a escriure una funció que fa desaparèixer la identificació de la caixa. Aquesta és la sintaxi per funtion, anem a anomenar hideTheBox. No es necessita cap argument, perquè no hi ha arguments que s'han de prendre. Podem seleccionar la identificació de la caixa. Així, utilitzant el jQuery seleccionar, podem seleccionar ID de la caixa, i després simplement fer-lo desaparèixer. Farem que s'esvaeixen. Si ens trobem amb aquesta funció a la consola actual, podríem definir aquesta funció, podem trucar a hideTheBox, i funciona. Però volem que passi quan es prem el botó realitat. Per fer això, hem de fer servir un esdeveniment. Per unir-se a un esdeveniment en alguna tecla específica o algun esdeveniment d'acció, hem de seleccionar l'element que l'esdeveniment es dispararà - o que activarà l'esdeveniment, ho sento. 

Així que en primer lloc, anem a seleccionar el botó de quadre de ID perquè aquest és el botó, i ara, per aquest botó, volem crear una animació quan es fa clic en ell. Així que aquesta funció de clic. Permet enllaçar una altra funció a la mateixa. Aquesta funció pren una altra funció com a argument podem passar a la funció hideTheBox, i cada vegada que es fa clic en aquest botó, aquesta funció s'executarà automàticament. Així que això va a funcionar si salvem això, vaig a refrescar, i - un segon, ho sento. Vaig a corregir això molt ràpid. Okay. Això és. Així que ara la caixa està desapareixent quan fem clic al botó. També podem canviar això a fadeToggle, canviar simplement per amagar o mostrar la caixa, i això també funcionarà també, si ens refresquem. Podem amagar-ho, també podem demostrar-ho, i que seguirem treballant. Una altra cosa que podem fer és, en realitat no hem de definir aquesta funció hideTheBox abans de cridar a la funció de clic. Així que en lloc de definir la funció i cridar hideTheBox, només anem a anomenar si això es fa clic. Així podem definir de forma anònima per aquí, que és una característica que té JavaScript. Podeu definir una funció, normalment, diríem funció hideTheBox amb arguments, però en canvi, només podem dir que funciona sense arguments, iniciar el claudàtor per definir la funció, tancar la clau d'obertura, i després simplement definir la funció aquí, dins del primer parèntesi i l'últim parèntesi que corresponen als arguments de la funció de clic. Així que estem passant en aquesta funció, es pot copiar aquesta línia de codi just aquí, i que farà exactament el mateix. I ara no tenim aquesta funció fadeTheBox atzar que seu voltant sense cap raó aparent. La funció va ser definida anònima, que no té un nom. Només s'executa quan es fa clic al botó de caixa. Molt refrescant, un cop més, un cop més, i es pot veure que encara funciona. I aquesta és la manera de crear esdeveniments. 

Hi ha una gran quantitat d'esdeveniments que podem utilitzar. Vaig a tornar a utilitzar la consola que vostè acaba de mostrar com funcionen. Els identificadors per a cada un d'aquests corresponen a cada caixa. Així que aquest quadre és clic ID, aquesta és la clau d'identificació, i aquest és ID ratolí. Una altra cosa és que hi ha aquesta funció d'acció, en lloc d'escriure a terme tot el temps, De fet, vaig anar per davant i defineix aquesta funció d'acció aquí. Es fa el mateix que la funció hideTheBox. Es fa aquest quadre i, o bé s'esvaeix cap a fora o s'esvaeix ell dins I és per això que som capaços d'utilitzar aquí. Així que si fem clic en aquest tecleig ID, volem fer desaparèixer o reaparèixer la caixa. És el mateix que el botó que hem tingut en l'última diapositiva. Ara, després cridem a això, podem fer clic sobre aquest i la caixa desapareixerà, a continuació, feu clic de nou i el quadre tornarà a aparèixer. Això és bastant simple. Feu doble clic fa el mateix, excepte que requereix un doble clic. Així que si fa clic una vegada i feu clic de nou no passarà res, però si es fa doble clic ràpidament, desapareixerà. Si feu doble clic una altra vegada, va a tornar. Així que això és bastant simple. Entrada de teclat és una mica estrany, jo no crec que realment funciona en aquest exemple perquè la tecla, la tecla i premeu la tecla i altres accions clau activarà independentment element s'enllaça a. Per exemple, tot i que vaig lligar el polsador fins al cos o alguna cosa més complet, llavors seria encara JavaScript no importa - no és específica. No he de fer clic en aquesta opció i premeu una tecla per fer res desapareix. Això s'activa independentment de quin element Estic actualment polz Així que aquests en realitat no funcionen en aquest exemple perquè no em reconeix com entrar en l'entrada a la div teclat. 

Però si ens fixem en les accions del ratolí, el primer planen, i es pot fer alguna cosa d'això amb CSS. Si s'utilitza CSS, es poden crear de manera que si es passa sobre alguna cosa, llavors els seus canvis d'estil. Però l'ús de jQuery pot canviar els estils d'altres coses també. Així, per exemple, anem a cridar a l'acció si el ratolí sobre aquest div. Això vol dir que si el ratolí sobre ella, llavors la caixa desapareixerà. Si ens allunyem d'ella, el quadre torna a aparèixer. Si anomenem a això i hi ha sobre ella, la caixa no desapareix, i quant ens allunyem, torna. Si cridem a aquesta funció activable en l'identificador de ratolí, el que correspon a aquest quadre, llavors si el ratolí sobre la caixa, llavors la caixa desaparegui en realitat - és ser covard ara, però - si ens allunyem d'ella, tornarà a aparèixer. En aquest moment és impossible per alguna raó. El ratolí entre i funcions de moviment del ratolí és una mica similar, però lleugerament diferents. Ratolí entrar només s'activa quan el ratolí entra a la caixa, com s'esperava. Així que si vostè es mou en ell, que desapareixerà. Però no tornarà a aparèixer quan s'allunyi; hauràs de tornar sobre ell perquè torni. També hi ha la funció de desplaçament del ratolí, que activarà cada vegada que el ratolí està present fins i tot en el quadre. Així que seguiré endavant, apareixent i desapareixent. I en realitat és el registre - que sembla que acaba apareixent i desapareixent, però en realitat el registre moltes més accions que això, així que quan t'allunyes només va a seguir endavant perquè registra com un miler d'ells. Potser no és un mil. Potser 5. Registra més que això. El punt és que totes les accions del ratolí, hi ha un munt d'ells. Vostè pot llegir sobre els altres, però són una mica diferents, i vostè pot triar la que més et necessita per a qualsevol propòsit específic que vostè està tractant de fer. 

El següent que vaig a parlar és d'AJAX. AJAX, ja sé que no cobrim Javascript al tanta profunditat d'aquest any, així que només vaig a parlar d'AJAX en general per un minut. AJAX significa Asynchronous JavaScript i XML. Es tracta bàsicament de, per exemple, quan estàs a Facebook i t'empeny a la notificació, això es deu a AJAX s'està executant en el seu navegador web. Cada parell de segons el navegador web en realitat anar als servidors de Facebook, demanant-los que, tens alguna cosa nova per a mi, i després es torna a tu. Això li permet enviar peticions a un servidor sense haver de carregar la pàgina. Així que normalment, si vostè està utilitzant PHP i una base de dades, vostè ha de actualitzar la pàgina abans de poder obtenir nova informació des del servidor. Però l'ús d'AJAX, es pot tirar d'aquesta nova informació constantment, o estirar-lo quan fa clic a un botó o alguna cosa per l'estil. Així que això ens permet enviar sol · licituds sense necessitat de recarregar la pàgina, i podem utilitzar peticions GET o POST. 

ACONSEGUEIXEN peticions són, per exemple, si a Google.com in English i fer q test =. Això els està donant una prova de consulta. I això és una sol · licitud GET perquè està passant en aquests paràmetres en la pròpia URL. A petició POST és com si vostè els està enviant per correu postal. És com si el poses en una carta i l'envia fora d'ells, però que en realitat no veure el contingut. No són visibles a la URL. No es pot escriure directament en, cal enviar gairebé en secret. Està en un pal. Però l'ús de jQuery, pot fer peticions GET i POST molt més fàcil del que normalment pot utilitzar simplement JavaScript pla. Pot consultar les API que utilitzen peticions GET, i també es pot comprovar la informació d'inici de sessió. A la pàgina següent, he creat això, que pregunta: "Què hi ha per dinar?" mitjançant l'API d'aliments Harvard, així que tirarem això. Això és només un exemple de com es pot utilitzar jQuery per fer una sol · licitud GET a una API i obtenir informació de nou d'ella. Així que volem veure en el menú d'avui, i volem veure el que hi ha per dinar. Aquesta és la URL per crear una sol · licitud GET a jQuery. utilitza el $. obtenir la funció. El primer argument és l'adreça URL, pel que és exactament el que està consultant. A continuació, el següent argument és una funció que s'executa quan la sol · licitud GET és completa. Així que vostè envia fora alguna sol · licitud al servidor, espereu que torni. Quan ve de tornada, vas a prendre alguna acció amb les dades que hi ha de nou des del servidor. Seguirem endavant i el codi d'això també. No codificar aquesta bé, a propòsit. Aquí està l'TOT. En primer lloc, farem servir l'enllaç d'esdeveniments de manera que quan es prem aquest botó, que vam enviar d'una sol · licitud GET. I quan aquesta sol · licitud GET torna amb algunes dades, anem a escriure en aquest butlletí menjar div ID. En primer lloc, anem a seleccionar el botó ID aliments. Quan es fa clic, volem que es faci alguna cosa. Farem que un fuction anònima, com abans. Es pot embolicar aquestes claus, i al prémer aquest botó, volem enviar una sol · licitud GET per comprovar el que hi ha per menjar. Per a això, simplement podem escriure $. Aconseguir. Aquesta és una funció de jQuery, amb el signe de dòlar. Es triga un parell d'arguments. La primera d'elles és la URL, la segona és la funció de devolució de trucada, la funció que es diu quan aquesta sol · licitud torna en realitat. Anem a construir la primera URL. Podem obtenir de l'API que David va escriure dalt. Quin aquí, podem veure que és food.cs50.net/api/1.3/menus, i després només passa en els noms dels paràmetres que desitja. Així paràmetre 1 és el valor 1. Sembla data estàndard, data d'inici, per defecte fins avui si no s'introdueix res, i data de finalització també per defecte que avui en dia si no s'introdueix res. Això és el que volem. Volem obtenir només la informació d'avui en dia. 

Volem que el format estigui en JSON. Això és arbitrària, es pot usar qualsevol forma que desitgi. Vostè pot utilitzar CSV, però JSON és JavaScript Object Notation. És molt fàcil per a JavaScript d'entendre el que significa, i podem imprimir més fàcil d'aquesta manera. Així que anem a sol · licitar en JSON, i demanar l'esmorzar anem. Així menjar = dinar. Així que escriure la URL, tornem aquí. Hi ha menús. El primer paràmetre és la sortida = JSON perquè això és el que volem, i separar els paràmetres amb una "i". El segon paràmetre és - no me'n recordo. Meal. I volem menjar = dinar. Podeu provar aquesta URL, escrivint en el seu navegador i anar-hi. Se li donarà una sortida. És només un munt de coses que hi ha per menjar. És en aquest format lleig. Volem imprimir a la nostra pàgina en un format millor. Així que l'URL és correcte, ara només hem d'escriure una funció tornar a trucar quan la sol · licitud té èxit. Aquesta funció en realitat tenir un argument. Serà dades. Les dades són el que torna de la sol · licitud GET després es fa la petició GET. Podem fer les claus, aquí escrivim la funció anònima que realitza, utilitzant aquestes dades quan tinguem la informació de nou. Així les dades, quan escrivim en aquest URL, això és el que les dades que serà similar. Serà aquesta gran cadena. Però el millor és que, JavaScript pot analitzar utilitzant la funció JSON.parse. Així que anem a crear una nova variable anomenada de dades d'anàlisi. I les dades d'anàlisi sintàctica és una matriu d'objectes. Cada objecte conté informació com - bo, anem a fer una ullada. Té una data, un dinar, categoria, recepta, totes aquestes altres coses. Així que anem a imprimir el nom de cada un. Anem a repetir en tota la gamma de coses que tornem a ell, i acaba d'imprimir cada un - imprimir el nom de cada un. Aquest és un bucle. 

JavaScript té aquesta sintaxi útils on es pot crear una variable i un bucle sobre una matriu, i var i és només l'iterador, així que en comptes d'haver de fer var i = 0, jo era menor que la longitud, i + +, pots fer-ho var i en les dades analitzades. En aquest exemple, les dades analitzades (i) es correspondran amb l'element actual de la matriu, l'objecte real. I volem que el nom d'ella. Així que farem nom. I l'última cosa és que tindrem una mica de jQuery nou. En realitat afegir-lo a la div, aquesta informació div menjar que està actualment buida. Així que anem a seleccionar això. Anem a fer servir jQuery i selecta menjar info div ID o info menjar ID, ho sento. Volem afegir a això. Si féssim la prova, per exemple, seria simplement sobreescriure cada vegada. Així que només podem afegir això. L'element actual a la matriu, ens posarem el nom d'ella, i l'hi afegim al final del menjar info div ID. I a continuació, només perquè es vegi més neta, també anem afegim un salt de línia pel que no és tot en una sola línia. Així que si tot va bé, que ha de ser bo - en primer lloc, cada vegada que es fa clic en aquest botó, s'enviarà d'una sol · licitud GET a l'URL. Quan les dades es torna d'ella, va a analitzar-lo, convertir-lo en JSON, llaç sobre tota la matriu que representa les dades, i després afegir el nom i un salt de línia per a cada línia d'aquest butlletí menjar ID que abans estava buida. Així que tornar a aquesta pàgina, anem a refrescar, clic, saber - no funciona. Això és lamentable. I aquí és on entra en joc la depuració Index.html, línia 1. És interessant. Està bé, bé, en lloc de gastar temps fent això, jo només vaig a tiri cap amunt el fitxer fet que tinc, que és la versió completa. No estic segur de quina és la diferència, però només puc obrir això al seu lloc. I anem a la AJAX, i això hauria de funcionar. Això és el que era per al dinar, en cap ordre en particular, amb cometes al voltant d'ell, així que no és el més bonic. Però, òbviament, si estigués fent això per a un projecte final, vostè desitja que es vegi millor. Però això és només un exemple senzill de com es fa la petició GET. I si ens fixem en el codi real, suposo, estic bastant segur segueix sent més o menys la mateixa. Oh, em vaig oblidar de convertir-lo en una cadena, això és tot. No, no està encara treballant. De totes maneres, aquí està el codi complet real pel que aquest ha de ser similar, i fa el mateix que el que acabo d'implementar. En fer clic al botó, s'utilitza GET JSON per analitzar automàticament les dades. Presa les dades de nou d'ell i recorre tota la gamma i imprimeix el - el que sigui per dinar, el nom de la mateixa, i afegeix un salt de línia després de cada línia. Així és com s'utilitza la funció GET. 

També pot utilitzar POST, que jo no tinc temps per escriure un exemple d'això, però podem mirar la documentació. Si ens fixem en jquery.post, es pot veure que és gairebé el mateix. Vostè té una URL, però en lloc de passar paràmetres amb - simplement posar-los en la cadena de la pròpia URL, vostè ha de passar en aquesta variable de dades que és bàsicament una matriu, un diccionari que assigna els paràmetres als valors. Es passa que, i que els envia a l'ús d'un POST. I un cop tens això, llavors vostè pot tenir una funció èxit que s'executa quan les dades vénen de tornada. En cas contrari, és exactament el mateix. Així que fent servir POST, és possible que vulgueu utilitzar POST, per exemple, si té un formulari d'entrada deixa que les contrasenyes d'entrada de les persones en ella, i enviar les contrasenyes de a la seqüència de comandaments de servidor, per comprovar en la base de dades si l'usuari és vàlid o no. Vostè pot fer que tots usant jQuery en lloc d'haver d'actualitzar la pàgina en absolut. Això és el que he implementat al blog que he mostrat abans. Si anem al portal extrem i tancar la sessió, tanqueu la sessió, Tanqueu la sessió no funciona. Bé, permetin-me obrir-lo en una nova finestra. Aquí hi ha una contrasenya, i jo anava a escriure alguna cosa a l'atzar. No funciona, però es pot veure que no ens en realitat ha de actualitzar la pàgina en absolut. El codi, si vols fer una ullada, és tot el disponible a aquí. Així que el codi que vaig escriure l'any passat alguna vegada. Com es pot veure aquí, estem enviant una sol · licitud POST. Tinc un arxiu anomenat login.php a la part de darrere, que comprova si la contrasenya és vàlida. Els paràmetres que passem a Son contrasenya per al l'entrada que està en aquesta caixa d'entrada actualment. I quan les dades es torna, comprovem. Si la informació és falsa, llavors es diu contrasenya incorrecta, feu lliscar cap avall, i simplement fer-lo desaparèixer després d'això. En cas contrari, carreguem la pàgina d'administració. I tot això va ser fet usant JSON. En aquest número de línies de codi, pots passar les dades a la part de darrere, comprovi si és correcta, comproveu si s'ha connectat correctament, i en realitat respondre-hi, la reorientació de la persona a la pàgina correcta o no deixar-los entrar i els va dir que tenien una contrasenya incorrecta. Així que això és un exemple de com es pot utilitzar el pal de jQuery per enviar una petició POST a la part de darrere, comprovar si algú està connectat. 

Molt bé, així que això és tots els exemples que he tingut, i totes les coses que volia cobrir. Aquestes són les coses més importants que jQuery li permet fer: seleccionar elements, modificar mitjançant la manipulació DOM, pot afegir efectes, activi coses en certs esdeveniments, i també fer peticions AJAX molt transparent i senzilla. Així que gràcies per venir i veure, i si vostè té qualsevol pregunta, només fes-m'ho saber. Sí? [Estudiant] Abans, quan vas aparèixer, que tenia JSON després de la petició POST entre cometes, i em preguntava el que van fer. >> Sí, ja veig. La qüestió era que, en l'exemple que acaba d'aparèixer, existia la paraula JSON entre cometes al voltant de la - Vaig a tirar de nou - al voltant de la funció POST. Estic tirant-lo cap amunt per mostrar. Així que aquí està aquesta petició POST, i hi ha aquesta JSON entre cometes. Això defineix el que estem esperant que la sortida sigui. Així que si passem a JSON com el tipus de dades esperat, no és un requisit, però si passem endins, llavors les dades de forma automàtica s'analitzaran com JSON. Així que no hem de cridar a la funció d'anàlisi JSON en ell, només va a succeir de forma automàtica. I si vostè fes un cop d'ull a la documentació de POST, existeix aquesta variable de tipus de dades, el tipus de dades que s'espera des del servidor. Per defecte és una conjectura intel · ligent que pot estar equivocat, així que vostè pot deixar en blanc, però és només el tipus de dades en la codificació que utilitzeu, ja sigui JSON o XML, o alguna cosa més. 

Alguna altra pregunta? Està bé. Si vostè té qualsevol altra pregunta, no dubteu a enviar un correu electrònic en vshekhawat@college.harvard.edu, i les diapositives i el codi ha d'estar disponible en línia molt aviat. Bona sort amb els seus projectes finals, espero que utilitza jQuery. [CS50.TV]