[Powered by Google Translate] [Seminario: jQuery] [Vipul Shekhawat, Universitato Harvard] [Ĉi tiu estas CS50.] [CS50.TV] Se vi sekvas kune hejme, vi povas efektive aliri al mia diapozitivoj linio irante al tiu ligo. Estas TjjRWj, sur bit.ly. Vi povas ankaŭ simple iru al la adreso rekte, kio estas cloud.cs50.net / ~ vshekhawat, kiu estas mia nomo, kaj jQuery. Mi ege rekomendas al vi sekvi kune se vi rigardas en la domo, kaj se vi estas ĉi tie, ankaŭ, ĉar ĉi tiu estas sufiĉe interaga prezento. 

Do hodiaŭ mi tuj parolos pri jQuery, kaj la unua demando estas, kio estas jQuery? Ĉi tiu jaro, mi scias ke infanoj ne estas kovrita de JavaScript dum detale kiel ni havas en la pasintaj jaroj. Javascript estas, antaŭ ĉio, nur flanko de la kliento lingvo ke vi uzas por kuri skriptoj kaj kodo sur ĉiu uzanto maŝino. Do vi havas servilon kiu havigas retpaĝojn al popolo, sed vi volus fari aĵoj en lia maŝino, demandos siajn maŝino sendi petojn al via servilo ĉiuj 30 sekundoj aŭ io kiel tio. Vi povas fari tion uzante JavaScript. JQuery nur havigas pli funkciojn sur supro de JavaScript kiu faras ekstran aĵojn por vi. Se vi rigardas la enhavojn sur supro, kiu priskribas kelkajn aĵojn ke vi estas kapablaj fari. Do entute, estis kreita en januaro 2006. Ĝi estis unue konceptita de en aŭgusto 2005. Jam pasis ĉirkaŭ dum kelkaj jaroj, kaj estas vere parto de la nova retejo 2.0 movado kiu estas farita la interreto tiel brila. Ĝi estas la plej vaste uzata JavaScript biblioteko. Super 19,6 milionoj retejoj uzas ĝin, kaj la uzado estas ankoraŭ kreskanta laŭ builtwith.com, kiu, ŝajne, dum la lasta jaro, Ĵus estis senĉese kreskanta sufiĉe lineare. Inter la 10 milionoj da lokoj, ekzistas ankoraŭ - ĉirkaŭ 40% de ili nun uzas ĝin. Facebook uzas ĝin, multaj aliaj retejoj nuntempe uzas ĝin. Vi povas rigardi tiujn statistikojn pri viaj propraj, se vi ŝatus. Kaj vi povus diri ke estas legit ĉar ĝi havas fundamenton kaj 13 estraranoj, kune kun teamo de 20 homoj kiuj okupiĝas pri ĝi sur regula bazo. Do ĝi estas tre vaste uzata, ĝi havas. Org URL, estas kaprico, ĝi havas spinon-offs por aliaj aferoj, tiel ke estas granda interkonsento. 

Kial vi uzas ĝin? JQuery estas tre malpeza. Tio signifas, ne estas grandega dosiero. Vi povas elŝuti la minified dosieron, kiu estas sen ĉiuj blankaj spaco kaj komentoj, kaj ĝi estas nur 32 kB. Do estas facile simple ĵeti sur via retpaĝo kaj ĝuste ekuzi ĝin. Estas ankaŭ tre kompetente skribita, do ĝi ne prenas multan - ĝi ne prokrastas retpagxon da kiam vi uzas ĝin. Ĝi permesas apliki tion, kio estis antaŭe neeblaj. Estas iuj aspektoj de funkciojn, kiel krei kuraĝigoj, kiuj kutime estus tre, tre malfacile fari. Sed en jQuery ili estas fakte tre simpla. Kaj tie estas iuj aferoj kiuj estas ĝena fari, eblaj en JavaScript, kiel sendi POST peto, sed sendi peton al la servilo, vi devas skribi kvin aŭ ses aŭ sep linioj de kodo. Nun vi povas simple fari ĝin en unu linio de kodo, en sola funkcio nomita. Tio vere simpligas multajn el la aĵoj kiujn vi faras. Kaj la tuta malvarmeta infanoj uzas ĝin. Por tiu, mi volas diri al mi. En mia lasta projekto pasinta jaro, kiu estas news.whrb.org, kiu estas por la radiostacio, mi kreis ĉi blogo kiuj gastigas ĉiujn montras, ke ni faris kaj la MP3 dosieroj por ili. Vi povas foliumi tra la pasinteco montras, kaj ĝin ĉiuj farita uzante jQuery. Vi povas diri pro ĉiuj tiuj kuraĝigoj, esence. Do se vi havas - se vi kreas novan postenon, vi vidas cxi tiuj malgranduloj slideDowns; kiuj estas ĉiuj farita uzante jQuery. Kaj ĉi blankigi - tiel ke ia aĵo estas ĉiuj farita uzante jQuery, kaj vi ne devas senĉese reŝarĝi la paĝon por navigi la loko. Alia malvarmeta afero, kiu estas farita uzante jQuery estas ĉi prezento. Mi uzas ĉi malferma fonto afero nomata scrolldeck, kiun iu skribis sur supro de jQuery. Se vi vere rigardi la fonto, oni povas vidi ke ili estas uzanta ĉi dolaro signon; dolaro signoj estas uzitaj en jQuery por signifi ke funkcio estas jQuery funkcio. Do ili estas difinanta wrapper sur supro de jQuery kiu permesas vin fari prezenton kiel ĉi tio, kaj vi povas vidi, ke tie ili estas inter la originala jQuery dosiero, kiu estas kion vi devos inkluzivi se volas uzi jQuery en via propra retejo. 

Tuŝante ke, kiel vi instali ĝin? Vi povas simple iru al jQuery.com kaj elŝuti la dosieron, aldoni ĝin al ttt katalogo kaj inkluzivas ĝin. Do ĝuste sur supro, en la kapo etikedo de viaj HTML-dosieron de via ĉefa HTML-dosiero, nur havas tiun linion de kodo kun la korekta versio por kiu versio de jQuery vi uzas. Vi povas elŝuti ĝin tuj jQuery.com, klaku "download jQuery," kaj vi havas ĝin. Estas tio. Kaj efektive, ni povas rigardi kion gxi aspektas. Se vi alklakas elŝuti ĉi tie, jQuery estas tiu. Estas nur unu granda JavaScript dosiero kiu faras la tutan magion ajxojn vi. Ĉi tiu estas la minified versio, kiu ne estas legebla ĉe ĉiuj. Vi povas ankaŭ rigardi la programadon version, kiu estas legebla sed ankoraŭ tre, tre longa. Estas multe da taskoj en tie. Vi ankaŭ povas ligi al Google gastigis version de ĝi. Por ke tuj permesos ke vi simple fidi Google por havigi ĝin. Ili provizas ĉiun version de ĝi, havebla en ĉiu momento. Do vi probable povas fidi Google por gastigi ĝin por vi. Aŭ vi povas ligi al jQuery propra lasta versio. Ili havas URL ke ĉiam ĝisdatigis al la lasta versio. Estas jQuery-lasta, kaj ne estas unu problemo kun tio, kio estas ke se la ĝisdatigita jQuery kaj kelkaj el la antaŭaj funkciojn ili iĝas retrograded aŭ evitinda, mi ne - ĝi eble komencos ne get apogis plu. Do, se vi skribas retejo uzante versio 1.8.2, por kiam versio 2.7 eliras iuj el la funkcioj vi skribis ne funkcias plu. Do estas pli bone simple elŝuti la 32 kB dosiero, metis ĝin sur via retpaĝo, kaj ĝi devos labori ĉiam. 

Mi tuj iros antaŭen kaj komencis paroli pri la reala funkciaro de jQuery. La unua afero estas selectores. Jen kion jQuery komence estis koncipita por provizi. Kaj vi povas klaki sur dokumentado por rigardi la detalan dokumentaron por la selectores Mi tuj iros kovrante. La ideo malantaŭ selectores estas ke vi povas elekti HTML elementoj en paĝo. Elementoj sur paĝo havas IDs kaj klasoj kaj aliaj identigi aspektojn al ili. Ekzistas ankaŭ - they're en malsamaj ordoj. Kelkaj el la tempo ili estas anidaba ene de ĉiu alia. JQuery permesas konstrui simplajn demandojn ke elsxuti elementoj de la paĝo. Tiam vi povas manipuli tiujn elementojn uzante jQuery funkcioj, kiu estas la manipulado sekcio ni ricevos por poste. Vi povas ŝanĝi la HTML, ŝanĝi la CSS, vi ankaŭ povas animi kaj aldoni funkciojn kiuj aktivigas en certaj eventoj. Do, ekzemple, se io klakis, vi volas ion okazi, vi povas fari tion uzante jQuery tiel. Kaj ekzistas grandega nombro da manieroj por elekti elementoj. La plimulto de ili mi neniam uzis, sed estas la bazaj, kiu estas sufiĉe grava. La elemento selector, ekzemple, se vi simple selekti ion kiu estas div - Mi vere havas la kodo malfermita por tiu diapozitivo prezento. Do, ekzemple, jen la unua glito. Ĉi tie ni havas div. Se ni vere elekti la tutan divs en la paĝo, ĝi devos simple doni al ni tabelo de ĉiuj divs kiuj ekzistas en tiu dosiero. La ID selector permesas elekti ion kun donita ID. Do, se ĉi tio, ekzemple, tiu afero havas la ID "kio", kaj se ni tion faris per # kio anstataŭ iuj IRU, estus simple reveni tabelo kiu havas solan elementon kaj tio estas tiu elemento de la paĝo. Ni povas ankaŭ kombini selectores tiamaniere por havi nur elektu tion kun IDs kiuj estas divs. Do jes. Nur elektu divs kiuj havas tiun ID. Por klaso vi simple uzi punkto, estas la sama afero kiel la CSS. Posteulo ankaŭ laboras, do se vi havas iu klaso kaj tio anidaba elementojn ene de ĝi - tial, ekzemple, ekzistas iu klaso kaj ĝi havas ankron etikedo por ligi al alia paĝo, vi povas uzi tiun sintakson por retrovi la ligilon. Vi povas ankaŭ elekti plurajn aferojn samtempe, simple apartigi ilin per komoj, uzi ajnan selector vi ŝatus, kaj vi elektos ĉiuj ili samtempe, en sola tabelo. Kaj tiam ekzistas ankaŭ la ne selector, do vi povas elekti ĉiuj divs kiuj ne havas iujn specifajn klaso. Kaj tio estas nur utila maniero por enkonduko al kiel tiu selektado funkcias. Mi montros al iuj konkretaj ekzemploj en dua. 

Altnivela selectores estas - tiuj estas nur kelkaj ekzemploj. Estas dekoj da tiuj, sed se vi volas selekti ĉiujn bildo etikedoj ene de iu elemento, tiam vi simple fari: bildo. Se vi volas elekti la vespero elementoj, ekzemple, se estas 20 el ili, vi volas elekti 0, 2, 4, 6 kaj tiel plu, vi fari: vespere, cxu vi povas ankaŭ fari: nepara. Ĉi tiuj estas pseŭdo selectores, kio signifas ke ili efektive komputi ĉiu alia ero anstataŭ nur iri kaj selektante ĉiuj ili. Vi povas ankaŭ - ĉiu elemento povas havi ankaŭ specifaj atributoj. Do, ekzemple, la klaso = centro estas ankaŭ atributo. Por ĉi ankron etikedo, href, hiperteksta referenco, estas atributo ankaŭ. Do vi povas elekti iun kiu ligas al specifa paĝo aŭ simple - estas vere ĝenerale. Vi povas elekti ion kun iu atributo kiu vi ŝatus. Kaj poste, ankaŭ, atributo enhavas. Se vi, ekzemple, volis elekti ĉiujn enigo elementoj kiuj havas la vorton "pass" kiel la nomo de ili, se iu paĝo havas eniga teksto bloko kiuj nomiĝas "pasvorto," tio estus unu vojo vi povis elekti tion. Kaj estas multaj pli. Vi povas iri antaŭen kaj rigardu la dokumentado kaj vidi specifajn ekzemplojn de kiel ĝi funkcias. 

La sekva afero estas DOM manipulado. Post kiam ni elektu elementoj, ni volas vere fari aferojn kun ili. Ĝis nun ni ne rigardis, ke ĉe ĉiu, sed se vi rigardas la dokumentado, ne estas vere multe, ke ni povus fari. Je tiu punkto, ni tuj elektu elementoj sur ĉi tiu prezento kaj manipuli ilin uzante jQuery. Ĉar ĉi tiu estas implementado uzante jQuery, ni havas aliron al la jQuery biblioteko, kaj ni povas uzi tiujn funkciojn ene de tiu kodo. Unu utila afero, kiun vi eble ne scias pri estas la konzolo. Kaj Google Chrome estas kion mi uzas. Vi povas premi alt komando J aŭ alt kontrolo J malfermi la konzolo. En Firefox mi kredas ke estas komando movo K aŭ kontrolo movo K. En Safari vi devas iri ŝanĝi iujn agordojn. Estas ligilo se vi ŝatus fari ĝin, sed mi rekomendas atingi Chrome aŭ Firefox. Do ni malfermi la konzolo, estas ĉi tie. Ĝi permesas vin esence nur faru kion ajn vi volas. Do vi povas simple tajpi en krei variablon nomata x, x = 5, vidu kio x + 2 estas. Vi povas eĉ fari ion kiel CS + Vidu, x + 45, kiu estos CS50. Vi povas simple fari iujn tipajn JavaScript aĵoj. Sed vi ankaŭ povas fari jQuery en ĉi tie. 

Do ni rigardu tiun unuan aspekton tie. Ni tuj kreos variablo nomata HTML, kiu estas ĉeno. Ĝi havas paragrafo etikedo en ĝi, ke nomas iun novan tekston. Do ni havas ĉi HTML, estas iu nova teksto, en paragrafo etikedoj. Nun ni efektive volas aldoni ĝin al la paĝo. Mi starigis gxin tiel, ke la HTML de ĉi tiu paragrafo, ĉi tiu titolo tie, estas append ID. Se ni elektas append ID kaj poste aldonas al ĝi la HTML-variablo Mi ĵus kreis, ĝi aldonos ke HTML fine, ĝuste post tiu alineo etikedo. Do, se ni faras tion - ni elektis tiun alineon, kaj ni nomas la append funkcio kun la HTML variablo Mi ĵus aldonis, ĝi aldonos tiun novan tekston Dekstre sur la paĝo. Ni povas ankaŭ prepend, kio signifas, ĝi iros antaŭe, en la komenco de tiu elemento. Do estas iom nova teksto je la komenco kaj poste. Mi povas antaŭeniri kaj refreŝigi forigi ĉi tiujn aferojn mi ĵus faris. Sed tio estas ekzemplo de kiel vi povas uzi la prepend kaj postglui metodoj manipuli aĵojn sur la paĝo, aldonu iom da HTML. 

Vi povas ankaŭ ŝanĝi klasoj. Reveno en ĉi tiu stilo dosiero, mi kreis tiun por la venko klaso kiu havas tekston ruĝa koloro, kelkaj fona koloro, kaj teksto ombro. Ĝi aspektas malbelega, sed mi povas fakte - tiu alineo korespondas al klaso ID. Do mi povos aldoni la klaso por la venko. Mi povas ekzekuti ĉi en la konzolo, kaj tio aldonos tiu klaso, kaj nun aspektas malbelega, kiel atendita. La CSS aŭtomate ricevas aplikita al la klasoj kiuj vi - se ekzistas CSS por klaso, ĝi aŭtomate ricevas aplikita se vi ŝanĝus la klaso de elemento. Tiam ni povas simple forigi ĝin uzante eltiras klaso. Do se vi havas iujn antaŭdifinita klasoj kiel ruĝa aŭ ruĝa, kaj tiam vi volas apliki tiujn al elementoj, Vi ne devas fari la tutan CSS stiligante ĉiufoje. Vi povas simple aldoni la klaso al elemento, kaj tiam ĝi aŭtomate igas - ĝi estos aŭtomate rigardi taŭga por tiu klaso. Ni povas ankaŭ forigi tion, do mi tuj elektu ĉiuj divs en la paĝo kaj forigi ilin. Kio estas tiu tuj aspektas? Ĝi tuj aspekti kiel nenio, do fakte nenion maldekstren. Mia prezento estas for. Mi povas refreŝigi kaj alportu ĝin, feliĉe, ĉar ĝi estas nur kurante fojo, sed tio estas ekzemplo de migrado, se vi volas tute detrui ero ekstere de la paĝo. 

Vi povas ankaŭ anstataŭigi, kaj mi iros por elekti la tutan alineon etikedoj sur la paĝo kaj iru ene de ili kaj anstataŭi ajn teksto ili havas en ili kun nur la vorto "testado." Se vi faros tion, vi devos anstataŭi ĉiun alineon en la paĝo kun ĉi tiu provoj. Yep. Ili ĉiuj estas anstataŭita per provoj. Do jen unu ekzemplo de aliri la tekston kaj overwriting ĝin. Vi ankaux povas elsxuti informo, kaj ĉi tio estas vere malvarmeta por enigo skatoloj. Se vi havas enigo skatolo ke homoj tajpi rubon en, homoj tajpi rubon en ĝi, ĉi tie ni elektu la enigo, ajna enigo etikedo kun tipo de teksto. En tiu kazo, estas nur unu enigo skatolon en la tuta prezento, tial ni simple elektu la unua, kaj tiam ni nomas la val funkcio sur ĝi. Tio redonas la valoron, kaj por eniga skatolo, la valoro estas nur kion ajn okazas al esti en ĝi. Do, se ni faras ĉi tion, ĝi nur redonas la kordo aĵoj. Kaj se ni nomas ĝin denove post skribi pli aĵoj, igas pli da aĵoj. Tio estas unu granda vojo por aliri elementoj de eniga skatolo, kaj tiam kontrolu, Estas ĉi validan retpoŝtan adreson, estas ĉi valida dato, ekzemple. Vi povas simple elsxuti stuff tuj kiel homoj tajpi ĝin, kaj tiam kontroli ĉu ĝi estas valida, sendu ĝin al servilo, kion ajn vi volas kun ĝi. Kaj tio estas kiel vi aliron kio estas ene tiuj skatoloj. 

Vi ankaux povas modifi CSS rekte, do anstataŭ aldoni klaso kiu havas iujn antaŭdifinita propraĵoj, vi povas simple aldoni ajn CSS vi volas nenion. Do ni elektu korpo, kiu estas la tuta prezento, kaj koloro estas la propraĵo kiu difinas kio estas la koloroj de la teksto. Se ni ŝanĝas ĝin al ruĝa, la tuta teksto en la paĝo turnos al ruĝa. Ni povas fari ion kiel fona koloro blua, tie ni iros, ĝi estas bela. Vi povas fari kion ajn vi volas kun tiu. Uzante la CSS proprieto, vi povas vere ŝanĝi kiel io aspektas en ajna momento. La sekva afero estas efikoj. Efektoj estas esence la sama aĵo kiel modifi la CSS, sed fakte havigi iun ekstra kuraĝigo al ĝi. Do anstataŭ ĝuste montrante aŭ kaŝi iun aŭ ŝanĝi la koloro, vi povas efektive fari ĝin vigla. Jen la dokumentadon, se vi volas rigardi la vastan dokumentado por ĝi. Sed mi iros por kovri la ĉefaj. Estas la programo kaj kaŝi propraĵoj. Montri / kaŝi ID efektive respondas al tiu tuta skatolo, do se mi kaŝi ĝin, ĝi estos simple malaperos. Kaj mi povas montri ĝin denove se mi volas fari ĝin reveni. Kaj estas dorso. Ĝi fakte ne malaperas, Mi ne vere forigi ĝin el la paĝo, mi ĵus starigis la CSS propraĵo de videblecon al kaŝita tial vi ne povas vidi ĝin plu. Tie estas ankaŭ gliti tien kaj gliti suben, por ke permesas havi tiun efekton. Ĝi glitas supren malaperi, kaj post kiam ĝi malaperas vi povas gliti ĝin por fari ĝin reveni. Kaj nun ĝi estas dorso. Ekzistas ankaux ĉi blankigi efekton, kiu - blankigi ID respondas al tiu skatolo. Se mi forvelkos ĝin, tiam ĝi tuj malrapide malaperas. Mi ankaŭ povas dilui ĝin, kaj ĝi revenos. Vi povas ankaŭ fari blankigi, kiu estas specifa al la fade funkcio. Vi povas havi ĝin forvelkos al ajna specifa opakeco ke vi volas. Do se vi forvelkos ĝin malrapide al .5, ĝi devos esti duono videbla. Mi povas fari ĝin iru al .1, kaj reen al 1 por fari ĝin plene videbla denove. Tio estas nur alia kuraĝigo kiu vi povas fari. 

Ekzistas ankaŭ la ebligi efektoj. Do mi tuj elektu la ebligi ID, kiu korespondas al ĉi tiu skatolo, kaj en tiu div vi povas voki ebligi, se tio estas videbla igos nevidebla, se ĝi estas nevidebla ĝi iĝos videbla denove. Do mi simple nomis tiun ebligi funkcion dufoje: la unua estis la sama afero kiel kaŝi, la dua alvoko estis la sama afero kiel spektaklo. Kaj vi ankaŭ povas fari tio kun fade ebligi, kiuj faras la samon, se gxi efektive velkas. Kaj tion saman kun la diapozitivo Baskuligi. Esas ĉenita efektoj tiel, kio signifas se vi elektas ero kaj simple nomas aron da kuraĝigo metodoj sur ĝi, se oni volis ĝin fade out, tiam gliti malsupren, kaj tiam kaŝi kaj tiam forvelki, ĝi faros ilin en unu vico. Tiel malaperis, revenis - ial, la felon ne okazis. Ni provu ĝin. Jes, do ĝi malaperis el kaj tiam glitis for. Kaj estas multaj pli. Vi povas uzi la animitajn funkcio krei vian propran kuraĝigoj, kiuj estas sufiĉe kompleksa, sed havigas al vi kun senfinaj extensibilidad. Vi povas fari iu ajn speco de kuraĝigo vi volas. Vi povas ankaŭ uzi voston al vosto ĝis multnombraj kuraĝigoj samtempe. Do se vi volas ion por flugi trans la paĝo, gliton el la supra dekstra gxis malsupre maldekstre, vi povas fari tion, kaj ĝuste havas faskon da agoj tuj unu post la alia. 

La sekva afero ni iras por paroli pri estas eventoj. Eventoj permesas vin - ĝis nun, ni ĵus estis skribante tion en la konzolo kaj kiu estas unu maniero por fari ĉi okazos, sed en reala paĝo, vi ne iras por povi fari la uzanto tipo aĵoj en la konzolo. Vi deziras ĉion aŭtomate. Por tio, vi devas uzi okazaĵoj kiuj aktivigas sur iu certa evento okazas. Vi povas kontroli la dokumentadon por la detaloj. Do ni vidu. Ni volas kaŝi aŭ montri la skatolon, sed nun tiun butonon ne faras nenion ĉar mi ne apliki ĝin ankoraŭ. Mi tuj iros al la efektiva HTML-paĝo. Jen la glito. Tie estas div la glito. Ĝi havas la klaso de glito. Jen la teksto. Nu, jen estas tio skatolo kaj la skatolo butono. Kiel ni fakte fari ĉi malaperas? Unue, ni skribi funkcio kiu faras la skatolo ID malaperas. Ĉi tiu estas la sintakson por funtion, ni simple nomas ĝin hideTheBox. Ĝi ne portas neniun argumentoj, ĉar ne estas argumentoj por esti prenita. Ni povas elekti la skatolo ID. Do uzante la jQuery elektu, ni povas elekti skatolo IRU, kaj tiam simple fari ĝin malaperi. Ni faru ĝin fade out. Se ni kuris tiu funkcio en la fakta konzolo, ni povus difini tiu funkcio, ni povas nomi hideTheBox, kaj ĝi funkcias. Sed ni volas ke ĝi okazos kiam la butono enŝovis. Por fari tion ni devas uzi okazaĵon. Ligi evento al iu specifa butono aŭ iu ago okazas, ni devas elekti la elemento kiu la evento deĉenigi - aŭ kiu deĉenigi la okazaĵo, sorry. 

Do unue: ni elektu la skatolon butonon ID ĉar tio estas la butonon, kaj nun, por tiu butono, ni volas krei kuraĝigon kiam ĝi klakis. Do tie estas tio klako funkcio. Ĝi permesas vin ligi alia funkcio al ĝi. Ĉi tiu funkcio prenas alian funkcion kiel argumenton ni povas pasi en la hideTheBox funkcio, kaj kiam tiu butono estas klakis, tiu funkcio aŭtomate ekzekuti. Do tio funkcios se ni savi tiun, mi refreŝigi, kaj - dua, mi bedaŭras. Permesu al mi korekti tiun vere rapide. Okay. Tie ni iru. Do nun la skatolo malaperas kiam ni klaku la butonon. Ni povas ankaŭ ŝanĝi ĉi tion al nur fadeToggle, ŝanĝi ĝin ĝuste por kaŝi aŭ montri la skatolo, kaj tio ankaŭ laboros ankaŭ, se ni fortigu. Ni povas kaŝi ĝin, ni povas ankaŭ montri ĝin, kaj tio daŭre funkcias. Alia afero kiun ni povas fari estas, ni ne vere devas difini ĉi hideTheBox funkcio antaŭ ol ni nomas la click funkcio. Do anstataŭ difini la funkcio kaj nomante hideTheBox, ni nur tuj nomas ĝin se tiu afero estas klakis. Do ni povas difini ĝin anonime en ĉi tie, kiu estas funkcio kiu JavaScript havas. Vi povas difini funkcio; kutime, ni dirus funkcio hideTheBox kun argumentoj, sed anstataŭe, ni povas simple diri funkcii sen argumentoj, komenci la krispa streĉa por difini la funkcio, fermi tiun krispa streĉa, kaj poste nur difini la funkcio en ĉi tie, ene de la unua parentezo kaj la lasta parentezo kiuj respondas al la argumentoj de la click funkcio. Do ni pasas en tiu funkcio, oni povas kopii tiun linion de kodo ĝuste ĉi tie, kaj kiu faros la ĝusta sama aĵo. Kaj nun ni ne havas ĉi hazarda fadeTheBox funkcio kiu sidas ĉirkaŭe sen evidenta kialo. La funkcio difinis anonime, ĝi ne havas nomon. Ĝi estos nur ekzekuti kiam ni klaku sur la skatolo butono. Do refreŝiga ankoraŭfoje, pli tempon, kaj vi povas vidi, ke ĝi ankoraŭ funkcias. Kaj tio estas kiel vi krei okazaĵoj. 

Ekzistas multe da malsamaj okazaĵoj ke ni povas uzi. Mi tuj ŝanĝi reen al uzante la konzolo al nur montri al vi kiel tiuj laboro. La IDs por ĉiu el tiuj respondas al ĉiu skatolo. Do ĉi tiu skatolo estas klako ID, ĉi tiu estas ŝlosila ID, kaj ĉi tiu estas muso ID. Unu pli bona estas, ke ekzistas tiu ago funkcio; anstataŭ tajpi ĝin ĉiufoje, Mi fakte antaŭeniris kaj difinis tiun agon funkcio ĉi tie. Ĝi faras la samon kiel la hideTheBox funkcio. Ĝi ricevas tiun skatolon, kaj ĉu velkas ĝin aŭ velkas it in Kaj jen kial ni povas uzi ĝin ĉi tie. Do, se ni alklaku ĉi klako ID, ni volas fari la skatolo malaperas aŭ reaperi. Estas la sama afero kiel la butono kiun ni havis en la lastaj glito. Nun post ni nomas tio, ni povas alklaki tion kaj la skatolo malaperos, poste alklaku denove kaj la skatolo reaperos. Tio estas sufiĉe simpla. Duobla klako faras la samon, krom tio postulas duoblan klakon. Do se vi alklakas ĝin unu fojo alklaku denove nenio okazos, sed se vi duoble musklaku rapide, ĝi devos malaperi. Se vi duoble klaku denove, ĝi revenos. Por ke estas sufiĉe simpla. Klavaro enigo estas speco de stranga, mi ne kredas ke efektive funkcias en ĉi tiu ekzemplo ĉar la ŝlosilo malsupren, ŝlosilo supren kaj ŝlosilo gazetaro kaj aliaj ŝlosilaj agoj aktivigi ne gravas kion elemento vi ligos ĝin por. Ekzemple, eĉ se mi ligis ŝlosilo malsupren al korpo aŭ ion alian tute, tiam ĝi estus ankoraŭ aktivigi ajn - ĝi ne estas specifa. Mi ne devas klaki sur tiu kaj premi klavon por fari ion malaperas. Estus aktivigis sendistinge de kion elemento Mi estas aktuale in Do tiuj ne vere funkcias en ĉi tiu ekzemplo ĉar ne rekonas min kiel eniri enigo en la klavaro enigo div. 

Sed se vi rigardas la muson agoj, la unua estas ŝvebi, kaj ĝi povas fari iuj de ĉi uzante CSS. Se vi uzas CSS, vi povas krei ĝin tiel ke se vi ŝvebi super io, tiam lia stilo ŝanĝojn. Sed uzante jQuery vi povas ŝanĝi la stilojn de aliaj aferoj ankaŭ. Do, ekzemple, ni iras nomi agon se ni ŝvebi super ĉi div. Tio signifas, se ni ŝvebi super ĝi, tiam la skatolo malaperos. Se ni malproksimigi de ĝi, la skatolo reaperos. Se ni nomas tion kaj ŝvebi super ĝi, la skatolo ne malaperas, kaj tuj kiam ni malproksimigas, ĝi revenos. Se ni nomas tiun Hover funkcio sur la muso IRU, kiu korespondas al ĉi tiu skatolo, tiam se ni ŝvebi super la skatolo, tiam la skatolo efektive malaperi - ĝin esti funky ĝuste nun, sed - se ni malproksimigi de ĝi, ĝi reaperos. Ĝuste nun ĝi estas malantaŭen ial. La muso eniras kaj muso movado funkcioj estas iom similaj, sed iomete malsama. Muso eniri nur aktivigas kiam la muso eniras la skatolo, tiel atendita. Do se vi movas en ĝin, ĝi povos malaperi. Sed ne reaperos kiam vi malproksimigi; vi devos kopii reven por ĝi reveni. Ekzistas ankaŭ la muso movado funkcio, kiu aktivigos ĉiufoje kiam la muso estas eĉ ĉeestas en la skatolo. Do ĝi devos simple daŭre iras, estingiĝas kaj eliris. Kaj ĝi estas fakte tala - ĝi ŝajnas kiel ĝi estas nur estingiĝas en kaj ekstere, sed ĝi estas fakte tala multe pli agoj ol tio, do kiam vi malproksimigi ĝin povos ĝuste teni tuj ĉar ensalutinta kiel mil el ili. Eble ne, mil. Eble kvin. Ĝi registras pli ol tio. La punkto estas, ĉiuj muso agojn, estas multe da ili. Vi povas legi sur la alia, sed ili ĉiuj estas iomete malsama, kaj vi povas elekti kiun ajn oni vin bezonas por kiu ajn specifa celo vi provas fari. 

Post tio mi tuj paroli pri estas AJAX. AJAX, mi scias ke ni ne kovris JavaScript en tiel profundo ĉi tiu jaro, do mi simple tuj parolos pri AJAX en ĝenerala por minuto. AJAX staras por Asynchronous JavaScript kaj XML. Ĝi estas esence, ekzemple, kiam vi estas en Facebook kaj ĝi pelas al vi sciigo, ke estas ĉar AJAX kuras sur via retumilo. Ĉiu paro de duaj via retumilo estas reale tuj Facebook serviloj, demandante ilin, ĉu vi havas ion novan por mi, kaj tiam revenas al vi. Tio permesas al vi sendi petojn al servilo sen efektive ŝargi la paĝo. Tiel kutime, se vi simple uzi PHP kaj datumbazo, vi devas refreŝigi la paĝon antaŭ ol vi povos akiri novan informon de la servilo. Sed uzante AJAX, vi povas tiri por novaj informoj senĉese, aŭ tiri por ĝin kiam vi klakas butonon aŭ io kiel tio. Do tio ni permesas sendi petojn sen lardas la paĝo, kaj ni povas uzi aŭ GET aŭ POST petoj. 

GET petoj estas, ekzemple, se vi al Google.com kaj do q = testo. Tio donas al ili konsulto testo. Kaj tio estas Get peto ĉar ĝi estas pasanta en tiuj parametroj en la URL mem. A POST peto estas kvazaŭ vi sendante ilin tra post. Estas kiel vi metis ĝin en letero kaj transporti ĝin al ili, sed ili ne vere vidas la enhavon. Ili ne estas videbla en la URL. Vi ne povas rekte tajpi gxin, vi devas sendi ĝin preskaŭ sekrete. Ĝi estas en fosto. Sed uzante jQuery, vi povas fari GET kaj POST petoj multe pli facile ol vi kutime povus uzi nur ordinaraj JavaScript. Vi povas konsulti API uzante GET petojn, kaj vi povas kontroli ankaŭ por ensaluto informo. En la sekva paĝo, mi kreis ĉi tiu, kiu petas, "Kio estas por tagmanĝi?" uzante la Harvard manĝo API, do ni tiri ke ĝis. Tiu estas nur ekzemplo de kiel vi povas uzi jQuery fari Get peto API kaj akiri informon reprenos gxin. Do ni volas vidi la menuon por hodiaŭ, kaj ni volis vidi kio estas por tagmanĝi. Jen la URL por krei Get peton en jQuery. vi uzas la $. akiri funkcio. La unua argumento estas la adreso, do precize kion vi informpeti. Tiam la sekva argumento estas funkcio kiu ekzekutas kiam la Get peto estas kompleta. Do vi sendos sur kelkaj peton al la servilo, atendu gxin reveni. Kiam ĝi revenis, vi iras preni iun agon kun la datumoj kiuj estas for de la servilo. Ni iru antaŭen kaj programi ĉi tiel. Mi ne kodi ĉi ankaŭ ne, celkonscie. Jen la `TODO '. Unue, ni uzas la okazaĵon binding por ke, kiam tiu butono estas premita, ni sendos la suferintojn Get peton. Kaj kiam tiu GET peto revenas kun iuj datumoj, Ni tuj skribi ĝin en ĉi tiun manĝon info ID div. Unue, ni elektu la manĝo butonon ID. Kiam ĝi estas klakis, ni volas fari ion. Ni simple fari anonima fuction, kiel antaŭe. Ĉu enpaki tiuj buklaj krampoj, kaj kiam tiun butonon estas premita, ni volas sendi Get peto por kontroli kio estas por tagmanĝi. Por fari tion, ni povas simple tajpi en $. Akiras. Tio ĉi estas jQuery funkcion, uzante la dolaro signo. Ĝi prenas paron da argumentoj. La unua estas la URL, la dua estas la callback funkcio, la funkcio kiu nomiĝas kiam tiu peto fakte revenas. Ni simple konstrui la URL-unua. Ni povas atingi ĝin el la API, ke David redaktis. Irante ĉi tien, ni povas vidi ke ĝi estas food.cs50.net/api/1.3/menus, kaj tiam vi simple preterpasas en la nomoj de la parametroj, ke vi ŝatus. Do parametro 1 estas valoro 1. Ĝi aspektas kiel normo dato, starti dato, implicite hodiaŭ se vi ne eniras nenion, kaj fino dato ankaŭ implicite al hodiaŭ se vi ne eniras nenion. Tio estas kion ni volas. Ni volas nur ricevi la informon por hodiaŭ. 

Ni volas ke la formato estas en XML. Tio estas nur arbitra, vi povas uzi ajnan formon, kiun vi volas. Vi povas uzi CSV, sed JSON estas JavaScript Objekto Skribmaniero. Ĝi estas tre facila por JavaScript por kompreni, kion tio signifas, kaj ni povas presi ĝin pli facile tiel. Do ni petas en JSON, kaj estu peto lunĉo. Do manĝo = lunĉo. Nur por redakti ke URL, ni reiru tie. Ekzistas menuoj. La unua parametro estas eligo = JSON ĉar tio kion ni volas, kaj vi disigi la parametroj kun 'kaj.' La dua parametro estas - mi ne memoras. Manĝo. Kaj ni volas manĝo = lunĉo. Vi povas provi ĉi URL tajpante ĝin en vian retumilon kaj tuj ĝi. Ĝi donos al vi iom da eligo. Estas nur aron da aĵoj estas por tagmanĝi. Ĝi estas en ĉi tiu malbela formato. Ni volas presi ĝin sur nia paĝo en pli bona formato. Do la URL estas ĝusta, nun ni nur bezonas skribi funkcio nomi reen kiam la peto estas prospera. Ĉi tiu funkcio estos reale preni argumento. Estos datumoj. La datumoj estas kio venas el inter la Get peto post la Get peto estas farita. Ni povas fari la krispa krampoj; ĉi tie ni skribu la anoniman funkcion kiu ekzekutas, uzante tiun datumon kiam ni atingos la informo dorso. Do datumoj, kiam ni tajpita en ĉi tiu URL, ĉi tio estas kion la datumoj tuj aspekti. Ĝi tuj estos tiu grandega kordo. Sed la bona afero estas, JavaScript povas analizi ĝin uzante la JSON.parse funkcio. Do ni krei novan variablon nomata parse datumoj. Kaj parse datenoj estas tabelo de objektoj. Ĉiu objekto enhavas informojn kiel - nu, ni rigardu. Ĝi havas daton, manĝo, kategorio, recepto, ĉio tio aliaj aferoj. Do ni nur presi la nomo por ĉiu. Ni persisti sur la tuta aro de aĵoj kiujn ni reiros de ĝi, kaj ĝuste presi ĉiun - elprinti la nomon de ĉiu. Tio estas por buklo. 

Javascript estas helpema sintakso, kie vi povas krei ŝanĝiĝema kaj buklo super tabelo, kaj var i estas nur la iterator, do anstataŭ devi fari var i = 0, i estis malpli ol la longeco, mi + +, vi povas simple fari var i en analizitajn datumoj. En ĉi tiu ekzemplo, analizitajn datumoj (i) respondos al la nuna ero de la tabelo, la reala objekto. Kaj ni volas akiri la nomon el ĝi. Do ni nur faru nomo. Kaj la lasta afero, ni tuj havos iujn jQuery denove. Efektive aldoni ĝin al la div, ĉi manĝo info div tio aktuale malplena. Do ni elektu tio. Ni uzas jQuery kaj elektu manĝo info div ID, aŭ manĝo info ID, sorry. Ni volas postglui al ĉi tio. Se ni faris provon, ekzemple, estus simple anstataŭigi ĝin ĉiun solan fojon. Do ni povas simple aldonas ĉi. La aktuala elemento en la tabelo, ni ricevos la nomon el ĝi, kaj ni aldonas ĝin al la fino de la manĝo info ID div. Kaj tiam nur por igi ĝin rigardi pli pura, ni ankaŭ postglui al linerompo tuj kiam ne ĉiuj en unu linio. Do, se ĉiu iras bone, ke devus esti bona - antaŭ ĉio, krom se ĉi butono klakis, ĝi sendos suferintojn Get peto al ĉi tiu URL. Kiam la datumoj revenas de ĝi, ĝi devos analizi ĝin, igi ĝin JSON, buklo sur la tuta tabelo kiu reprezentas tiun datumon, kaj poste aldonas la nomon kaj linerompo al ĉiu linio en tiu manĝo info ID kiuj estis antaŭe malplena. Do reiri al tiu paĝo, ni fortigu, klako, trovu - ĝi ne funkcias. Tio estas malfeliĉa. Kaj ĉi tiu estas kie elpuriganta venas in Index.html, linio 1. Tio estas interesa. Bone, nu, prefere ol elspezi tempon farante tion, mi simple tuj elsxiros la faritaj dosiero kiun mi havas, kiuj estas la kompletigita versio. Mi ne certas kio estas la diferenco estas, sed ni povas nur malfermi tiun supren anstataŭe. Kaj ni iru al la AJAX, kaj ĉi tiu devus funkcii ĝuste. Tio estas kio estis por tagmanĝo hodiaŭ, en neniu aparta ordo, kun citiloj ĉirkaŭ ĝi, do ĝi ne estas la plej bela. Sed, evidente, se vi faras tion por fina projekto, vi farus aspektas pli bone. Sed tio estas nur simpla ekzemplo de kiel vi faras la Get peton. Kaj se ni rigardas la reala kodo, mi konjektas, mi estas sufiĉe certa ĝi estas ankoraŭ sufiĉe da la samaj. Ho, mi forgesis konverti ĝin al ŝnuro, jen ĝi. Ne, ĝi estas ankoraŭ ne funkcias. Sendepende, jen la reala kompletigita kodo por kio ĉi tiu devus aspekti kiel, kaj gxi faras la samon kiel kio mi nur implementado. Kiam vi klakas sur la butono, ĝi uzas GET JSON por aŭtomate analizi la datumojn. Ĝi prenas la datumoj reprenos gxin kaj cikloj tra la tuta tabelo kaj gravuraĵoj el la - kion ajn estas por tagmanĝi hodiaŭ, la nomon de ĝi, kaj appends linion ripozon post ĉiu linio. Tiel estas kiel vi uzas la Get funkcio. 

Vi povas ankaŭ uzi POST, kiun mi ne havis tempon redakti ekzemplo por tio, sed ni povas rigardi la dokumentaron. Se vi rigardas jquery.post, Vi povas vidi ke ĝi estas preskaŭ la sama afero. Vi havas URL, sed anstataŭ pasi parametrojn uzante - nur metante ilin en la kordo por ke la URL mem, vi devas pasi en ĉi datumoj variablo ke estas esence tabelo, vortaron, kiu mapoj parametrojn por valoroj. Vi pasas ke, kaj kiu sendas ilin en uzanta POST. Kaj kiam vi havas tiun, tiam vi povas havi sukceson funkcio kiu ekzekutas kiam la datumoj revenos. Alie, ĝi estas precize la sama. Do uzante POST, vi eble deziras uzi POST, ekzemple, se vi havas enigo formo vi lasu homoj enigo pasvortojn en ĝin, kaj sendu la pasvortojn ekstere al via dorso-fino skripton, por kontroli en la datumbazo ĉu tiu uzanto estas valida aŭ ne. Vi povas fari, ke ĉiuj uzas jQuery anstataŭ devi refreŝigi la paĝon ajn. Tio estas kiel mi implementado en la blogo kiun mi montris al vi pli frue. Se ni iras al la fino portalo kaj elsaluti, elsaluti, Elsaluti ne funkcias. Nu, mi simple malfermi ĝin en nova fenestro. Tie estas pasvorto, kaj mi tuj tajpi en iu hazarda. Ĝi ne funkcias, sed vi povas vidi, ke ni ne efektive havas por refreŝigi la paĝon ajn. La kodo, se vi volas rigardi ĝin, estas ĉiuj haveblaj en ĉi tie. Do la kodo mi skribis pasintjare iam. Kiel vi povas vidi ĉi tie, ni sendante POST peton. Mi havas dosieron nomatan login.php en la dorso fino, kiuj kontrolas se la pasvorto estas validaj. La parametroj ni pasas en estas pasvorto, mapita al la enigo tio estas en ĉi tiu enigo skatolo nuntempe. Kaj kiam la datumoj revenas, ni kontrolu. Se la datumoj estas malvera, tiam ni diros malĝusta pasvorto, gliti gxin kaj ĝuste malaperigi post tio. Alie, ni montru la administranton paĝo. Kaj tio estis tute farita per JSON. En ĉi multaj linioj de kodo, vi povas simple pasas la datumojn al la dorso fino, kontroli ĉu ĝi estas korekta, kontrolu ĉu vi ensalutinta korekte, kaj efektive respondas al ĝi, redireccionando la persono al la ĝentila paĝo aŭ ne lasante ilin ensaluti kaj dirante al ili, ke ili havis malĝustan pasvorton. Do jen unu ekzemplo de kiel vi povis uzi jQuery POST sendi POST peton al via dorso fino, kontrolanta ĉu iu estas ensalutinta ĝuste. 

Bone, do tio estas ĉiuj ekzemploj mi havis, kaj cxiujn aferojn mi volis kovri. Tiuj estas la ĉefaj aĵoj kiuj jQuery permesas al vi fari: elekti elementojn, modifi ilin uzante DOM manipulado, vi povas aldoni efektojn, aktivigi tion en certaj eventoj, kaj ankaŭ fari AJAX petoj tre perfekte kaj facile. Do dankon pro veni aŭ rigardante, kaj se vi havas demandojn, simple lasu min scii. Jes? [Studenta] Back kiam vi montris, vi devis JSON post la POST peto en citiloj, kaj mi estis nur demandante kion tio faris. >> Jes, mi vidas. La demando estis ke, en la ekzemplo Mi nur montris, tie estis la vorto JSON en citilojn ĉirkaŭ la - Mi nur tiris ĝin supren - ĉirkaŭ la POST funkcio. Mi simple tirante ĝin montri. Do jen estas tio POST peto, kaj tie estas tio JSON en citiloj. Ke ĝuste difinas kion ni atendis la eliron esti. Do, se ni pasas en JSON kiel la atendata datumtipo, ĝi ne estas postulo, sed se ni pasas ĝin, tiam la datumoj estos aŭtomate analizitaj kiel JSON. Do ni ne devas alvoki JSON parse funkcio sur ĝi, tio devos okazi nur aŭtomate. Kaj se vi rigardu la dokumentadon por POST, ekzistas ĉi tiu datumtipo variablo, la tipo de datumoj atendi de la servilo. Ĝi implicite inteligenta konjekton kiu povas esti erara, tiel vi povas lasi ĝin malplena, sed estas ĝuste la tipo de datumoj en kodiga ke vi uzas, cxu gxi estas JSON aŭ XML aŭ ion alian. 

Aliajn demandojn? Ĉio bone. Se vi havas aliajn demandojn, bonvolu retpoŝti al mi ĉe vshekhawat@college.harvard.edu, kaj la diapozitivojn kaj kodo estu havebla surlinia sufiĉe frue. Bonŝancon kun via fina projektoj, esperas ke vi uzas jQuery. [CS50.TV]