[Powered by Google Translate] [Mintegia: jQuery] [Vipul Shekhawat, Harvard Unibertsitateko] [Hau da CS50.] [CS50.TV] Zaren zehar jarraitzen du etxean, benetan sartu ahal izango duzu nire diapositibak online esteka honetan joanda. TjjRWj da, bit.ly. an Dezakezu ere, besterik gabe, URL-zuzenean, horrek cloud.cs50.net / ~ vshekhawat, eta horrek nire izena da, eta jQuery. Animatzen dut oso zehar jarraitu ahal izango duzu ari zaren etxean bada ikusten, Oraindik, eta hemen bada, baita, eta hau nahiko aurkezpen interaktibo bat delako. 

Beraz, gaur egun jQuery buruz hitz egiten ari naiz, eta lehen galdera da, jQuery zer da? Aurten, you guys ez dute estaltzen Ikusteko Javascript-a ezagutzen dut Xehetasun askoz urteetan bezala dugun bezala. Ikusteko Javascript-a da, lehenik eta behin, besterik gabe, bezero-aldean, hizkuntza bat erabiltzen duzun gidoiak eta kodea exekutatu nahi erabiltzaile bakoitzaren makinan. Beraz, zerbitzari bat eskaintzen duen web-orriak pertsona duzu, baina zerbait egin nahi beren makina izan dezakezu, galdetu beren makina eskaerak bidaltzeko zerbitzaria 30 segundotan behin edo horrelako zerbait. Ikusteko Javascript-a erabiliz egin dezakezu. JQuery besterik gehiago funtzionalitatea eskaintzen Javascript gainean duzun gauza estra du. Edukiak begiratuz gero, gainean, azaltzen dituen gauza zaren gai batzuk egin. Beraz, oro har, izan zen 2006ko urtarrilean sortu zen. Izan zen lehen sortu zuen 2005eko abuztuan. Ari izan inguruan urte pare bat, eta benetan, web berria 2.0 mugimenduaren zati hori egin Interneten hain distiratsua. Gehien erabiltzen Javascript liburutegia da. 19,6 milioi web gune daude, eta erabilera gero eta handiagoa da, oraindik ere to builtwith.com arabera, eta horrek, itxuraz, azken urtean, izan berri da etengabe, nahiko lineala handitzeko. 10 milioi goiko guneak, besteak beste, ez da oraindik - 40 inguru horietako% dira gaur egun erabiltzen. Facebook erabiltzen du, webguneak beste asko gaur egun erabiltzen da. Zeure estatistika horiek begiratu dezakezu, litzaidake nahi baduzu. Eta bere ordez esan izan duzu dauka fundazio eta 13 Kontseilariak delako, 20 pertsona lan egiten dute, aldizka-talde batekin batera. Beraz, asko erabiltzen da. Org URL du, dotorea da, spin-off ditu gauzak beste, beraz, big Akordio bat da. 

Zergatik erabiltzen duzun? JQuery oso arina. Horrek esan nahi du, ez da fitxategi handi bat. Deskarga dezakezu minified fitxategia, hau da, espazio zuriak eta iruzkinak gabe, eta soilik 32 kB da. Beraz, erraza da zure web orrian aldera zozketa eta besterik ez da erabiltzen hasteko. Era berean, oso modu eraginkorrean idatzia, eta, beraz, ez da hartzen asko - ez du mantsotu zure web askoz noiz erabili duzu. Gauza izan ziren aurrez unfeasible ezartzeko aukera ematen dizu. Badira funtzionalitatea alderdi batzuk, animazioak sortzeko bezala, normalean oso, oso zaila izango litzateke egin. Baina jQuery en benetan ari dira, oso erraza da. Eta badira gauza batzuk gogaikarriak egin, Ikusteko Javascript-a posible, POST eskaera bat bidali bezala, baina zerbitzari eskaera bat bidaltzeko, idatzi behar duzu bost edo sei edo zazpi kode lerro. Orain besterik egin daiteke, kode lerro bakar bat ere, bakar bat funtzio-deian. Benetan stuff ari zarenean eta asko errazten du. Eta cool kids guztiak erabiliz. Horren arabera, nik esan nahi dut. Nire azken proiektua, iaz, eta horrek news.whrb.org da, den irrati katea da, blog hau sortu dut antolatzen ditu, eta horrek erakusten dugun egin eta horien fitxategiak MP3 guztiak. Iragana ikuskizunen bidez araka dezakezu, eta hori guztia egin jQuery erabiliz. Esan dezakezu delako, animazio horiek guztiak, funtsean. Beraz galtzen duzu - zaren Bidalketa berri bat sortzean, slideDowns txiki horiek ikusten duzu; hori guztia egin jQuery erabiliz. Eta iraungitze hori -, beraz, gauza mota hori guztia egin jQuery erabiliz, eta ez duzu etengabe Berritu orria gune nabigatzeko. Beste cool gauza hori egin jQuery erabiliz aurkezpen hau. Honen iturburu irekiko gauza izeneko scrolldeck dut erabiltzen, duen norbait jQuery gainean idatzi. Benetan jatorrian badute, hori ikusi ahal izango duzu dolarraren ikurra hau erabiltzen ari dira; dolarraren seinaleak jQuery dira erabiltzen funtzio bat jQuery funtzio bat ekarri dute. Beraz Wrapper bat ari dira definitzeko jQuery gainean ahalbidetzen duen aurkezpen bat egin dezakezu horrela, ikusi eta hemen, jatorrizko fitxategi jQuery ari dira barne dezakezu, hau da, zer egiten dute besteak beste, izango dituzu nahi izanez jQuery erabili ahal zure webgune propioa. 

Hori ukitzea, nola instalatu duzu? Bakarrik joan zaitezke eta jQuery.com deskargatzeko fitxategia, gehitu web direktorioa bat eta sartu. Beraz, goian, zure fitxategia HTML etiketa buruan HTML fitxategi nagusia, besterik ez dute kode-lerro bertsio zuzena zein bertsio jQuery egiteko erabiltzen ari bazara ere. Deskargatu ahal izango duzu jQuery.com joanda, sakatu "deskargatu jQuery", eta got duzu. Kito. Eta benetan, zer itxura begirada bat hartu ahal izango dugu. Deskargatu hemen klik egiten baduzu, hau jQuery da. Bakar handi Javascript fitxategi duzun gauza guztiak magia egiten da. Hau minified bertsioa, eta hori ezin da irakurri guztietan dago. Dezakezu ere, garapen bertsio begiratzea, hau da, irakurgarri baina oraindik ere oso, oso luzea. Hor gauza asko da. Dezakezu ere, Google-en ospatu den bertsio lotzeko. Beraz, hori besterik ez duzu Google konfiantza eman ahal izateko egingo. Bakoitzean bertsioa, uneoro eskuragarri ematen dute. Beraz, seguruenik dezakezu Google oinarritzea da antolatzailea dezakezu. Edo jQuery en azken bertsioa egin dezakezu lotzeko. URL bat dela beti, azken bertsiora eguneratu dute. JQuery-Azkenengo da, eta ez dago bat duten arazoa da, hau da, gero eguneratu jQuery eta aurreko funtzionalitatea batzuk bihurtzen zuten retrograded edo zaharkitua, Agian ez da - hasteko ez dira onartzen gehiago izan daiteke. Beraz, bada, web gune bat bertsio 1.8.2 erabiliz idazterakoan, denbora bertsioaren arabera 2,7 ateratzen funtzioak idatzitako batzuk ez dute jada. Beraz, hobe da besterik deskargatu 32 kB fitxategia, jarri zure web orrian, eta lan hura betirako izango duzu. 

Aurrera joan eta hasteko jQuery benetako funtzionaltasuna buruz hitz egiten ari naiz. Lehenengo gauza Selectors da. Hau da, zer jQuery hasieran pentsatua ematen. Eta dokumentazioa klik egin dezakezu ikusteko Selectors egon estaltzen noa dokumentazioa zehatza. Selectors atzean ideia da orri batean elementu HTML hauta dezakezu. Orrian elementu izan identifikazioak eta eskolak eta beste identifikatzeko alderdi horiek. Han ere - aginduak ezberdinetan they're. Aldiz ari dira, bata bestearen barruan habiaratuta batzuk. JQuery ahalbidetzen simple kontsultak berreskuratzeko orriaren elementuak eraikitzeko aukera ematen dizu. Ondoren, elementu horiek jQuery funtzioak erabiliz manipulatzen dezakezu, horrek manipulazio atala dugu beranduago iritsi da. HTML, CSS aldatu aldatu ahal izango dira, dezakezu ere animatu eta funtzioak gertakari jakin batzuk aktibatzeko gehitzeko. Beraz, adibidez, zerbait, bertan klik eginez gero, zerbait gertatuko nahi duzun, jQuery erabiliz, baita dezakezu. Eta badira moduak hautatzeko elementu kopurua handi bat. Gehienak inoiz ez dut erabili, baina badira oinarrizko direnak, dira, nahiko garrantzitsua da. Elementu hautatzaileak, adibidez, bazara, besterik gabe, ezer hautatuta duten div bat da - izan dut kodea diapositiba aurkezpen hori irekita. Beraz, adibidez, hemen lehen diapositiba da. Hemen div dugu. Benetan dugu hautatu baduzu divs guztiak orrian, besterik ez ditu eman divs duen fitxategi horretan dauden guztiak sorta bat. ID hautatzaileak aukera ematen jakin batean ID ezer hautatu duzu. Beraz, bada, hau da, adibidez, gauza hau NAN "zer" du eta hau egin dugu galtzen # ordez zer identifikazio batzuen bidez, besterik ez litzateke itzuliko array bat duen elementu bakar bat du, eta hori orriaren elementu dagoela. Era berean, ezin dugu konbinatu Selectors modu horretan edukitzea bakarrik aukeratu gauza identifikazioak direla divs batera. Beraz, bai. Bakarrik aukeratu divs duten ID hori. Klase erabili besterik ez duzu puntu bat, CSS gauza bera da. Ondorengoa ere balio du; hala bada, klase batzuk egin behar duzu eta habiaratuta ditu bere baitan elementu - beraz, adibidez, klase batzuetan ez da bat eta aingura Etiketa behar beste orri bat lotu du, sintaxia erabil dezakezu esteka berreskuratzeko. Ere hauta dezakezu gauza bat baino gehiago aldi berean; besterik koma bitartez banandu arabera, erabili hautatzailea edozein gustatuko litzaidake, eta guztiek aukeratu ahal izango duzu aldi berean, array bakar bat ere. Eta gero ere ez hautatzaile, beraz divs guztiak hautatu ahal izango duzu ez duten partida klase batzuk. Eta hori da, besterik gabe, lagungarria modu sarrera bat lortzeko nola aukeraketa honetan lan egiten du. Bigarren batean hormigoizko adibide batzuk erakusten dut. 

Aurreratua Selectors dira - hauek dira adibide batzuk. Badira horien dozenaka, baina nahi duzun irudia, etiketa guztiak hautatu nahi badituzu elementu batzuk barruan eta, ondoren, egin besterik ez duzu: irudia. Nahi duzu, nahiz eta elementu hautatzeko, adibidez, badaude, horietako 20 bada, 0, 2, 4, 6 eta abar hautatu nahi baduzu, egiten duzu: nahiz eta, edo baita ere egin dezakezu: bakoitiak. Hauek dira sasi Selectors, eta horrek esan nahi du benetan duten konputatu bakoitzean beste elementu bat, baizik eta, besterik gabe, joan eta horiek guztiak hautatuz baino. Ere egin dezakezu - elementu bakoitza ere izan dezake berariazko atributuak. Beraz, adibidez, class = zentro ere bada atributu bat. Aingura etiketa hau, href, hipertestu erreferentzia, atributu bat ere bada. Oro har, benetan da - Beraz, zerbait jakin bati, edo, besterik gabe, loturak hautatu ahal izango duzu. Ezer aukeratu dezakezu atributua edozein litzaidake gustatuko batera. Eta gero, baita ere, atributua dauka. , Adibidez bada, nahi sarrerako elementu guztiak hautatzeko duten hitza "pass" horietako izen gisa, Orri bat sarrera bloke badu deitzen duten "pasahitza," hori horrela hautatzen baduzu, ezin izango nuke. Eta badira beste asko. Aurrera dezakezu eta dokumentazioa begiratu eta ikusi nola funtzionatzen adibide zehatzak. 

Hurrengo gauza DOM manipulazioa da. Hautatu dugu elementu ondoren, nahi benetan egiten gauza haiekin egingo dugu. Orain arte ez dugu hori guztietan begiratzen du, baina dokumentazioa begiratzen baduzu, ez da benetan asko izan dugu. Puntu honetan, aurkezpen honetan elementu aukeratu behar dugu manipulatzeko eta jQuery erabiltzen dituelako. Honetan ezartzen duelako jQuery erabiliz, jQuery liburutegian sartzeko aukera dugu, eta funtzioak horiek erabili ahal izango dugu kode hau epean. Ko erabilgarria gauza daiteke ez duzula ezagutzen kontsola da. Eta, Google Chrome, zer erabiltzen dut. Alt komando J sakatu dezakezu edo ALT kontrol J kontsola ireki. Firefox-en komando shift K edo kontrol shift K. uste dut Safari aldatu ezarpen batzuk joan behar duzu. Badago lotura bat egin behar izanez gero, gustatuko litzaidake, baina Chrome edo Firefox lortzean gomendatzen dut. Hargatik ireki kontsola, behera da hemen. Funtsean, besterik ezer egin nahi duzun aukera ematen du. Beraz, sor dezakezu aldakorreko izeneko x idatzi, x = 5, utzi zer x + 2 da, ikus-en. Zuk egin CS antzeko zerbait + Ikus dezagun, x + 45, duten CS50 izango da. Bakarrik egin ahal izango duzu Javascript batzuk tipikoa stuff. Baina baita ere egin dezakezu jQuery hemen. 

Hargatik hau lehen alderdi begiratu hemen. HTML deitzen zaio, eta horrek kate bat da, aldagai bat sortu behar dugu. Paragrafoan etiketa bat du, eta, hori izeneko testu batzuk. Beraz HTML dugu hau, beste testu batzuk ere, paragrafo etiketak. Orain benetan nahi dugu gehitzeko orria. Ezarri dut, beraz, paragrafo honek HTML kodea, titulu hau, hori append IDa. Hautatu dugu append ID bada, eta, ondoren, hari eransteko HTML aldagai sortu dut, HTML gehituko zaie amaieran, eskuinera paragrafoan etiketa hau ondoren. Beraz, ez dugu badu - paragrafo hau hautatu dugu, eta deitzen dugu aldagai HTML gehitu dut funtzio erantsi du, Testu berriak gehituko zaie bertan orrian. Era berean, gunearen aurretik, eta horrek esan nahi du aurretik joan da, elementu horren hasieran. Beraz, hasieran eta gero at testu berri batzuk. Aurrera dezaket eta freskatu stuff hau besterik ez dut egin kentzeko. Baina hori nola itxi erabili dezakezu adibide bat eta metodo eransteko orrian gauzak manipulatzeko, gehitu HTML batzuk. 

Alda dezakezu klaseak. Itzuli estilo fitxategi honetan, Nik sortutako klase hau irabazi du testu kolore gorri, hondoko kolorea, eta testu itzal bat dauka. Izugarri dirudi, baina, egia esan, ezin dut - paragrafo honetan klasea ID dagokio. Beraz, irabazi du klasean gehitu ahal izango dut. Hau exekutatu ahal izango dut kontsolan, eta klase gehituko zaie, eta gaur egun izugarri ikusten da, espero bezala. CSS automatikoki klase duzun aplikatzen - ez dago klase bat CSS bada, automatikoki aplikatuko aldatu duzu elementu bat klasea bada. Orduan, besterik gabe, ezin dugu kendu kendu klasea erabiliz. Beraz, bada, gorria edo nabarmendutako bezalako klase batzuk aurrez definitutako duzu, eta, ondoren, horiek aplikatzeko elementuak nahi baduzu, ez duzu CSS bakoitzean Sorozabal guztiak egiteko. Besterik gehi klasea elementu bat, eta, ondoren, automatikoki bihurtuko - automatikoki begiratu klasea dela egokia. Era berean, ezin dugu kendu gauzak; beraz divs guztiak hautatu dut orrian eta ezabatu. Zer da duen itxura da? Ezer ez egiteko itxurarik da joan, beraz, ez da benetan, deus ezker. Nire aurkezpena desagertuko da. Freskatu ahal izango dut eta eraman atzera, zorionez, da besterik ez delako behin exekutatzen baina hori kendu adibide bat, nahi eta erabat suntsitu orria off elementu bat bada. 

Ere egin dezakezu gainidatzi, eta paragrafo tags guztiak hautatzeko orrian noa , eta horien barruan, eta edozein dela ere ordeztu testu horiek dira besterik hitza "probak." rekin Hori eginez gero, paragrafo bakoitzean ordezkatu dituzu orrian probak honekin. Yep. Guztiak ari dira probak ordezkatzen du. Beraz, testua sartzeko eta berridazketa adibide bat. Ere egin ditzakezu informazioa eskuratzeko, eta hau da benetan sarrera kaxak cool. Zuk sarrera kutxa jendeak gauzak idazten hartuz gero, Jendeak zerbait idazten sartu, Hemen sarrera, testu-mota etiketa edozein sarrera hautatu ditugu. Kasu horretan, ez bakarrik sarrera batean Aurkezpen-kutxa da, beraz, besterik ez dugu hautatu lehenengoa, eta gero Val funtzioa deitzen dugun horren gainean. Duten balioa itzultzen du, eta sarrera kutxa bat, balioa da, besterik gabe, edozein delarik ere gertatzen da barruan egon. Horretarako dugu, bada, besterik ez da itzultzen katea stuff. Eta deitu badugu berriro ere gauza gehiago idatzi ondoren, txandaka gauza gehiago sartu da. Bat modu handi bat sarrerako kutxa elementuak sartzeko da, eta, ondoren, egiaztatu, hau da baliozko helbide elektronikoa, hau da baliozko data, adibidez. Bakarrik eskuratu ahal izango duzu gauzak berehala jendea bezala idazten, eta, ondoren, egiaztatu da ala ez da baliozko, bidal itzuli zerbitzari bat, ezer nahi zurekin egin. Eta hori nola kaxak horiek barruan sartzen da duzu. 

Ere alda ditzakezu CSS zuzenean, eta, beraz ordez eransteko klase bat du aurrez definitutako propietate batzuk, besterik gehi ditzakezu edozein dela CSS ezer nahi duzun. Hargatik hautatu gorputza, aurkezpen osoa da, eta kolore jabetza definitzen zer koloreak testua da. Aldatzen badugu, gorria, orria testu guztiak izango dira gorria piztu. Zerbait egin ahal izango dugu atzeko planoaren kolorea urdin bezala, hara joaten gara; ederra da. Ezer honekin nahi duzuna egin dezakezu. CSS jabetza erabiliz, benetan dezakezu alda ezer edozein unetan begira. Hurrengo gauza ondorio da. Efektuak dira, funtsean CSS aldatuz gauza bera, baina benetan ematen dute aparteko animazio batzuk ere. Beraz, horren ordez, edo erakusten ezkutatzen zerbait aldatu edo kolore, benetan egin dezakezu alaiak. Hemen dokumentazioa da, nahi duzun itxura bat hartu ahal izateko zabala dokumentazioa bada. Baina nagusiak direnak estaltzeko noa. Badira ikuskizun eta ezkutatzeko propietateak. Erakutsi / ezkutatu ID benetan osoa kutxa honi dagokio, beraz, ezkutatzen dut bada, besterik ez da desagertzen. Eta erakutsi ahal izango dut berriro nahi dut itzuli egin eta gero. Eta itzuli da. Ez da benetan desagertzen Ez nuen benetan kendu orritik, ezarri dut ikuspena jabetza CSS ezkutuko beraz, ezin duzu ikusi jada. Ez da, gainera, mugitu gora eta behera irristatu; ahalbidetzen duen efektu hori izan behar duzu. Sortu irristatzen da desagertuko, eta desagertu ondoren mugitu dezakezu behera itzuli dadin. Eta, orain, itzuli da. Ez da hau, gainera, iraungitze efektua, eta horrek - iraungitze ID lauki hau dagokio. Desagertzen dut bada, eta, ondoren, poliki-poliki joango da desagertzen. Era berean, ezin dut desagertzen da, eta itzuli egingo da. Era berean, ezin duzu egiteko: urtzea, hau da, iraungitze funtzioa partida. Izan desagertzen edozein partida opakutasun nahi duzun dezakezu. Beraz desagertzen gero, poliki-poliki, .5, bihurtu erdia ikusgai dituzu. Egiteko joan .1 dut, eta itzuli 1 erabat ikusgai egin eta berriro. Hori besterik animazioa beste ahal izango duzu. 

Badira ere toggle ondorioak. Beraz, toggle identifikazio, eta horrek koadro hau dagokio aukeratu dut, eta div horretan txandakatu deitu dezakezu; da ikusgai badago bihurtu ikusezina izango da, da ikusezina bada ikusgai bihurtuko da berriro. Deitzen dut toggle funtzio hau birritan, lehenengoa izan zen ezkutatzeko gauza bera, bigarren deia ikuskizun baten antzekoa izan zen. Eta, gainera, ezin duzu egiteko hau iraungitze toggle batera, den gauza bera, desagertueta benetan salbu du. Eta diapositiba gauza bera aldatzeko. Daude kateatuta efektu baita, eta horrek esan nahi du aukeratu duzu elementu bat izanez gero, eta, besterik gabe, animazio-metodoak sorta bat deitu da, nahi duzun itzali da, nahi izanez gero, ondoren, mugitu behera, eta, gero, ezkutatu, eta gero desagertzen, haiekin egingo du segidan. Beraz, desagertu egin zen, atzera - arrazoiren batengatik, ezkutatu ez zuen gertatuko. Dezagun proba ezazu. Bai, beraz, kanpo desagertu egiten da eta, ondoren, kanpoan slid da. Daude eta askorekin gehiago. Animatu funtzioa erabil dezakezu Zeure animazioak sortzeko, eta hori nahiko konplexua da, baina ematen du extensibility infinitua baita. Edozein animazio mota nahi duzun egin dezakezu. Ere erabili dezakezu ilara ilaran animazioak anitz sortu aldi berean. Beraz, zerbait orrian zehar hegan egin nahi baduzu, beheraino ezkerretik eskuinera goitik diapositiba, hau egin ahal izango duzu, eta besterik ez dute ekintza bat joan ondoren, beste mordo bat. 

Hurrengo gauza hitz egin dugu ekitaldi bat da. Ekitaldi ahalbidetzen duzu - orain arte, besterik ez dugu egin dira gauzak idazten kontsolan sartu eta hori, modu batean hau gerta dadin, hau da, baina beti uneko orrialdean, ez duzu gai izango egin erabiltzaile mota gauza kontsola batean. Gauzak automatikoki gertatuko nahi duzu. Hori dela eta, gertakari hori zenbait gertaera jakin batzuk gertatzen aktibatzeko erabili behar duzu. Osoa xehetasunak dokumentazioa kontsulta dezakezu. Beraz, ikus dezagun. Ezkutatzeko edo erakusteko kutxa nahi dugu, baina orain botoi honetan ez du ezer egin nuen, ez delako ezartzea da oraindik. Izateko benetako HTML orrira noa. Hemen diapositiba da. Ez dago diapositiba for div bat da. Diapositiba klase ditu. Testu da. Orain, ez dago kutxa honetan eta kutxa botoia da. Nola egin dugu hau benetan desagertzen? Lehenik eta behin, ikus dezagun idatzi funtzio bat egiten duen kutxa ID desagertu. Hau funtion sintaxia da, dezagun, besterik gabe deitzen hideTheBox. Ez du argumenturik hartzen, ez dago argumentuak hartu behar delako. Kutxa ID hautatu ahal izango dugu. JQuery hautatu erabiliz, beraz, kutxa ID aukeratu ahal izango dugu, eta, gero, besterik gabe, egin desagertuko. Dezagun out desagertzen da. Ran dugu funtzio hori bada benetako kontsolan, funtzio hau definitu genezake; hideTheBox deitu ahal izango dugu, eta lan egiten du. Baina gerta botoia sakatzen da benetan nahi dugu. Horretarako, ekitaldi bat erabili behar dugu. Gertaera bat lotu ahal izateko zenbait botoi edo ekintza batzuk gertatzeko, elementu ekitaldia egingo aktibatu hautatu behar dugu - edo gertaera bat aktibatu egingo da, barkatu. 

Beraz, lehenik eta behin, utzi hautatu kutxa botoia ID dituen botoia da, eta, orain, botoi hori delako, animazio bat sortu nahi denean, bertan klik egin nahi dugu. Beraz, egin klik funtzio hau. Behar du, funtzio beste lotu ahalbidetzen ditu. Funtzio honek beste funtzio bat hartzen du argumentu gisa hideTheBox funtzioa ahal izango dugu, eta, betiere, botoi honetan klik egitean, funtzio automatikoki exekutatu. Beraz, hau gordetzeko dugun honetan, bada, freskatu dut lan egingo du, eta - ko bigarren, sentitzen dut. Demagun hau konpontzeko me benetan azkar. Ongi da. Ez dago goaz. Beraz, orain koadroan desagertzen botoia sakatu dugu. Era berean, ezin dugu hau aldatu besterik fadeToggle, aldatzeko zerbait ezkutatzeko edo erakusteko koadroan, eta hau izango da, halaber, lan gehiegi, freskatu badugu. Ezkutatu egin ahal dugu, baita ere erakutsi ahal izango dugu, eta hori lan egiten jarraituko du. Beste gauza bat egin ahal izango dugu, ez dugu benetan izan hideTheBox funtzio hau definitzeko deitu aurretik dugu klik funtzioa. Beraz ordez funtzioa definitu eta hideTheBox deitzen, bakarrik ari gara deia egiteko gauza hau sakatzen bada. Beraz definitzen anonimoki ahal izango dugu hemen, duen ezaugarri bat Javascript duela da. Funtzio bat defini dezakezu, normalean, funtzio hideTheBox esango genuke argumentuak, baina horren ordez, besterik gabe, esan dezakegu funtzionatu ez argumentuak, hasteko kizkur giltza funtzioa definitu, itxi kizkur giltza dela, eta, gero, besterik gabe, funtzioa definitu hemen, parentesi lehen eta azken parentesi barruan Klik duten funtzioaren argumentuak dagozkie. Ari garen funtzio honetan, beraz, pasatzen, kode-lerro hau kopiatu ahal izango dugu hemen, eta hori zehatza gauza bera egingo du. Eta orain, ez dugu hau ausazko fadeTheBox funtzioa hori inguruan eserita ez itxurazko arrazoirik. Funtzioa definitu zen anonimoki, ez du izenik. Bakarrik izango da exekutatu klik kutxa botoia dugu. Beraz, beste behin ere freskagarri bat, denbora gehiago, eta oraindik ere ikusten duten lan dezakezu. Eta hori nola gertakari sortuko duzu. 

Badira ekitaldi ezberdinak ahal dugun erabili asko. Atzera joateko kontsola erabiliz soilik erakutsiko dizu nola lan horiek noa. Horietako bakoitzaren identifikazioak kutxa bakoitzari dagozkio. Lauki hau click ID da, beraz, hau da ID gakoa da, eta hau saguaren ID da. Gauza bat gehiago da, ez dagoela ekintza honen funtzioa da; baino gehiago idazten denbora guztietan, Benetan joan nintzen aurretik, eta ekintza honen funtzioa definitu behera hemen. HideTheBox funtzioa gauza bera egiten du. Lauki hau eta bai hura desagertueta edo bertan desagertueta sartu lortzen da Eta horregatik erabiltzeko gai izango gara hemen. Beraz, egin klik ID hau dugu klik eginez gero, kutxa desagertu edo berriro egin nahi dugu. Botoia gauza bera azken diapositiba dugula izan da. Orain ondoren deitzen dugun honetan, ezin dugu sakatu eta kutxa desagertu egingo da, ondoren, egin klik berriro eta kutxa izango da berriro agertuko. Hori nahiko erraza da. Klik bikoitza gauza bera egiten du, eskatzen ezik ezazu klik bikoitza. Beraz, klik egiten baduzu, behin eta egin klik berriro, ez da ezer gertatuko, baina bikoitza baduzu sakatu azkar, desagertzen joango da. Bikoitz klik egiten baduzu, berriz ere, itzuli egingo da. Beraz, hori nahiko erraza da. Teklatu sarrera bitxi mota da, ez dut uste adibide honetan benetan lan egiten gakoa behera, tekla eta tekla sakatu eta beste funtsezko ekintza delako aktibatzeko zer elementu ditu lotu duzun axola gabe. Adibidez, nahiz eta gako lotuak I behera gorputza, edo beste zerbait erabat, orduan oraindik litzateke aktibatzeko Gaia ez - ez da partida. Nik ez dut hau egin behar da klik eginez, eta sakatu tekla bat ezer desager dadin. Ditu aktibatuta egongo litzateke edozein elementu egun naiz sartu du Beraz, horiek ez dira benetan adibide honetan lan ez delako ez ni aitortu sarrera sartzen teklatu sarrera div sartu. 

Baina saguaren ekintzak begiratuz gero, lehenengoa, flotatzen ari da, eta hau CSS erabiliz egin daiteke. Erabiltzen duzun CSS bada, sor dezakezu, beraz, zerbait gainetik pasatzean bada, ondoren, bere estilo aldaketak. JQuery erabiliz, baina beste gauza estiloak alda dezakezu baita. Beraz, adibidez, ekintza deitzeko div honen gainean pasatzean galtzen goaz. Horrek esan nahi du bere gainean dugu pasatzean gero, kutxa desagertu egingo da. Mugitu dugu kanpoan bada, kutxa izango da berriro agertuko. Deitzen dugun hori bada, eta haren gainean flotatzen, kutxa ez da desagertu, eta ahalik eta azkarren mugitu dugu kanpoan, atzera dator. Deitu badugu gainetik pasatzean funtzio hau saguaren ID gainean, horrek lauki hau dagokio, eta gero kutxa gainean dugu pasatzean bada, ondoren, kutxa izango da benetan desagertzen - funky da baloia oraintxe, baina - mugitu dugu kanpoan bada, agertuko ditu. Oraintxe atzeraka da arrazoiren batengatik. Sagua sartu eta sagua mugitu funtzio hauek oso antzekoa da, baina apur bat desberdina da. Mouse idatzi bakarrik aktibatzen denean sagua koadroan, espero bezala sartzen da. Beraz, sartu mugituko zara, bada, desagertzen joango da. Baina, ez da berriro agertuko denean urrundu duzu; dute atzera mugitu da kalera da itzuli beharko duzu. Ez da, gainera, sagua mugitu funtzioa, hau da, aktibatzeko betiere, sagu are kutxa presente. Beraz, besterik ez da joan mantentzeko, eta ateratzen lausotzen. Eta benetan ari da saioa hasten - da bezala lausotzen hasi dela dirudi, eta, baina benetan da asko gehiago, hori baino ekintza hasten, beraz, urrundu besterik ez duzu gorde horietako mila bezala saioa hasi delako joan. Agian ez, mila. Agian bost. Hori baino gehiago erregistroak ditu. Puntua da, sagua ekintza guztiak daude, eta horietako asko. Irakur dezakezu, beste bai, baina guztiak dira desberdinak, eta bietatik bat jaso behar duzun dezakezu edozein xede berezietarako egin saiatzen ari bazara. 

Hurrengo gauza, hitz egingo dut AJAX da. AJAX, ez dugu estaltzen Javascript sakonera askoz ere aurten ez dakit, beraz, besterik ez naiz AJAX buruz hitz egiteko, oro har, minutu bat egingo da. AJAX Asynchronous JavaScript and XML dago. Funtsean da, adibidez, Facebook-en Oraindik duzu eta bultzada duzun jakinarazpena, hori AJAX da zure nabigatzailean delako exekutatzen. Behin segundo pare zure nabigatzailean da benetan Facebook-en zerbitzariak, joan horiek eskatuz, ezer egin berria duzu, niretzat, eta, ondoren, atzera dator behar duzu. Horrek aukera ematen die eskaerak bidaltzeko zerbitzari benetan orria kargatu beharrik gabe. Beraz, normalean, zaren besterik ez bada PHP eta datu-base bat erabiliz, orria freskatu behar duzu berria informazioa lortu aurretik zerbitzaritik. Baina AJAX erabilita, eta informazio berria dezakezu tira, etengabe, edo da tira, botoia edo horrelako ezer klik. Honetan, beraz, eskaerak bidaltzeko aukera ematen digu orria berritu gabe, eta bai GET edo POST eskaerak dezakegu. 

GET eskaerak dira, adibidez, izanez gero Google.com in eta zer q = test. Hori emanez, kontsulta-proba bat. Eta, hori lortzeko, eskaera bat egin da parametro horietan duelako URL bera sartu igaroz. POST eskaera bat balitz bezala, haiei bidaltzen ari zaren mezua bidez. Jarri naiz gutun batean eta ontziratu off haiekin da, baina ez dute benetan ikusiko edukia. Oraindik ez dute URL ikusgai. Ezin duzu zuzenean idatzi zuen; bidal ia isilpean duzu. Da post bat da. Baina jQuery erabiliz, egin GET eta eskaerak argitaratzeko dezakezu askoz ere erraz normalean besterik lautada Ikusteko Javascript-a erabiliz baino. APIak kontsulta dezakezu eskaerak erabiliz, eta, gainera, ezin duzu saioa hasteko informazioa egiaztatzeko. Hurrengo orrian, hau sortu dut, eta hori eskatu dio, "Zer da bazkaltzeko?" Harvard elikagaien API erabiliz, beraz, tira dezagun sortu duten. Hau nola erabili jQuery dezakezu GET eskaera bat egin nahi API baten adibidea da eta informazioa lortzeko back from. Beraz, menua ikusi ahal izateko, gaur egun nahi dugu, eta zer bazkaltzeko da ikusi nahi dugu. Hemen URL jQuery eskaera Talde bat sortu nahi da. eta $ erabili behar dituzu. lortzeko funtzioa. Lehen argumentua URL da, beraz, zehatz-mehatz zer neurketako zaren. Ondoren, hurrengo argumentua funtzio bat exekutatzen denean GET eskaera osatu da. Beraz off bidaltzeko eskaera batzuk zerbitzariak, itxaron atzera etorri behar. Noiz etorriko du atzera, ekintza batzuk hartu datu hori atzera zerbitzariak tik duzu. Goazen aurrera eta hau bai kodea. Ez nuen kode hau bai, nahita. Hemen TODO da. Lehenik eta behin, utzi erabiltzen gertaera loteslea beraz, orduan botoi hau sakatzen da, off bidaliko dugu eskaera bat. Noiz eta, hori lortzeko eskaera itzuliko da hainbat datu, idatzi honetan bazkari info ID div sartu dugu. Lehenik eta behin, utzi hautatu elikagaien botoia IDa. Denean, bertan klik egin, zerbait egin nahi dugu. Dezagun, besterik gabe, egin da fuction anonimo bat, orain arte bezala. Kizkur giltza horiek bildu daitezke, eta noiz botoi hau sakatzen da, GET eskaera bat bidali nahi dugu zer bazkaltzeko da egiaztatzeko. Horretarako, aski izango dugu $ idatzi. Lortzeko. JQuery funtzioa hau da, dolarraren ikurra erabiliz. Argumentuak pare bat hartzen du. Lehenengoa URL da, bigarrena atzeradei funtzioa, funtzioa deitzen da denean, eskaera hori benetan itzultzen. Dezagun, besterik gabe, eraikitzeko URL lehen. Lor dezakegu API batetik David idatzi du. Hemen, ikus dela food.cs50.net/api/1.3/menus ahal izango dugu, eta, ondoren, parametroak litzateke gustatuko izenak besterik ez duzu gainditu. Beraz, parametro-1 balioa 1 da. Itxura data estandarrak bezala da, hasiera data, itxura, gaur egun, ez baduzu ezer sartu, eta, era berean, amaiera data lehenetsiak gaur egun ez baduzu ezer sartu. Hori da, zer nahi dugun. Besterik lortu, gaur egun, informazioa nahi dugun. 

Formatua du JSON izan nahi dugu. Hori besterik arbitrarioa; edozein nahi duzun erabil dezakezu. CSV erabili ahal izango duzu, baina JSON Javascript Object idazkera. Oso erraza da JavaScript zer esan nahi duen ulertu ahal izateko, eta inprimatu ahal izango dugu, errazago horrela. Hargatik eskatu JSON, eta dezagun eskaera bazkaria. Beraz, otordu = bazkaria. Just sortu idazteko URL horretan, atzera egingo dugu hemen. Ez menuak. Lehenengo parametroa irteera = JSON da hori delako da zer nahi dugun, eta parametroak banatzeko duzu 'eta'. Bigarren parametroa - Ez dut gogoratzen. Bazkaria. Eta bazkari = lunch nahi dugu. URL hau probatu ahal izango duzu idatzi zure nabigatzailean eta bertara joanda. Emango dizu irteera batzuk. Besterik ez da bat gauza mordo duten bazkaria da. Da hau itsusi formatuan da. Inprimatu gure orria aldera hobea formatuan nahi dugu. URL zuzena da, beraz, orain behar dugu funtzio bat idazteko atzera deitu behar den eskaera behar bezala. Funtzio honek benetan hartu argudio bat. Datuak izango da. Datu da, zer bueltatzen lortzeko eskaera lortzeko eskaera egin ondoren. Kizkur giltza egin ahal izango dugu; hemen anonimoak funtzioa idatzi dugu hori exekutatzen du, datuak erabiliz, informazioa lortu dugu atzera. Datuak Beraz, idatzitako URL honetan, hau da, datuak behar da itxura du. Kate handi hau izango da joan. Baina gauza ona da, Javascript da analizatu ahal JSON.parse funtzioa erabiliz. Hargatik sortu izeneko analisi datuak aldagai berri bat. Eta analisi datuak objektuen array bat da. Objektu bakoitzak, hala nola informazio badu - Beno, utz ditzagun. Data bat, bazkari bat, kategoria, errezeta, hau beste gauza guztiak ditu. Hargatik, besterik inprimatu bakoitzaren izena. Dezagun gauzak array osoan lortu dugu atzera bertatik zehar batetik bestera joateko, eta besterik inprimatu ko bakoitzean - inprimatu bakoitzaren izena. Hau da, begizta da. 

Ikusteko Javascript-a hau lagungarria sintaxia non aldagai bat eta begizta array bat baino gehiago sortzeko aukera ematen dizu, var, eta besterik ez da i iterator, beraz ordez var i = 0 egin behar izan du, luzera baino txikiagoa izan zen, i, i + +, besterik gabe, egin dezakezu var i datuak analizatu ziren. Adibide honetan, analizatu datuak (i) izango da, gaur egungo elementu dagozkie array, benetako xedea. Eta izena lortzeko atera nahi dugu. Hargatik, besterik gabe, egin izena. Eta azken gauza da, jQuery batzuk berriro goaz. Benetan gehitu div da, hau bazkari info div hori da gaur egun hutsik. Hargatik hautatu duten. JQuery eta aukeratu bazkari info div NAN edo bazkari info ID erabiliko dugu, barkatu. To honetan erantsi nahi dugu. Proba egin dugu bada, adibidez, besterik ez litzateke Gainidaztea bakarrean aldi bakoitzean. Beraz, ezin dugu hau eransteko. Array elementu egungo izena, lortuko dugu irten, , eta erantsi egingo dugu bazkari info ID div amaieran. Eta gero, begiratu besterik garbiagoa izan dadin, Era berean, erantsi dugu line break bat da, beraz, ez da dena on-line. Beraz Dena ondo badago, hori ona izan behar du - lehenik eta behin, betiere, botoi honetan klik egitean, bidali beharko da GET eskaera bat URL hau. Noiz datuak bueltatzen da, batetik, eta analizatu egingo da, piztu, JSON, array osoa datuak ordezkari begizta baino gehiago sartu, eta, gero, erantsi izena eta lerro haustura bat honetan bazkari info ID izan zen aurrez hutsik lerro bakoitzean. Beraz, atzera joan orrialde honetan, freskatu egingo dugu, klik, jakin - ez du lan. Hori Penagarria. Eta hau da, non arazketa dator sartu Index.html, linea 1. Hori da interesgarria. Guztiak eskubidea, ondo, baino, denbora hori egiteko, besterik ez naiz joan tira gora egin fitxategia izan dut, eta horrek amaitu bertsioa da. Ez dakit zer diferentzia da, baina ezin dugu sortu hau ireki ordez. Eta joan AJAX dugu, eta hau behar bezala funtzionatuko dute. Hau da, zer bazkaria izan zen, gaur egun, ordena zehatzik gabe, bere inguruan komatxo, beraz, ez da politena da. Baina, jakina, ziren badituzu egiteko azken proiektua da, egiteko hobeto begiratu nahi duzun. Baina besterik ez nola GET eskaera egin duzu adibide sinple bat da. Eta benetako kodea begiratuz gero, asmatzen ari naiz, nahiko ziur nago oraindik nahiko askoz berdinak. Oh, bihurtzeko kate bat ahaztu zait, kito. Ez, oraindik ez da lanean ari. Nolanahi ere, hemen benetako kodea amaitu da zer behar duen itxura eman, eta zer inplementatu dut gauza bera egiten du. Noiz botoia sakatu on duzu, lortu JSON automatikoki analizatu datuak erabiltzen du. Datu hartzen du berriro, eta, oro har, array bidez begiztak eta kanpo grabatuak - edozein dela bazkaltzeko da gaur egun, bere izena, eta eransten lerro bakoitzaren ondoren etenaldia lerro bat. Hori nola GET funtzioa erabili behar dituzu. 

Ere erabili dezakezu POST, horrek ez nuen denbora gora idatzi ahal izateko adibide bat, baina dokumentazioa ahal izango dugu. Jquery.post begiratuz gero, ikusten dela, ia gauza bera egin dezakezu. URL bat behar duzu, baina horren ordez parametroak erabiliz pasatzea - besterik ipintzeko URL bera katean, , datuen aldagai hau gainditu behar duzu hori da, funtsean, array bat, hiztegi bat mapak balio duten parametroak. Pasatzen duzu, eta haiek bidaltzen POST bat erabiliz. Eta behin, orduan arrakasta funtzioa eduki ahal izango duzu duten exekutatzen direnean datuak bueltatzen. Bestela, zehazki, ez da gauza bera. Beraz POST erabiliz, nahi POST erabili ahal izatea, adibidez, zuk sarrera inprimaki bat bada pertsonen sarrera pasahitzak utzi du, eta pasahitzak horiek bidali Zure back-end gidoia, datu-basearen erabiltzaileak duten ala ez da baliozkoa edo ez ikusteko. Egin dezakezu guztiak jQuery ordez erabiliz orrialde freskatzeko guztiak edukitzea. Hori nola inplementatu blog erakutsi duten dizut lehenago hasi nintzen. Amaiera atariko genuen joan eta saioa, saioa, Saioa amaitu ez du funtzionatzen. Beno, goazen ireki besterik ez dit sortu leiho berri batean. Hemen ez duzu bat da, eta zerbait ausazko idatzi zen dut. Ez du lan, baina ikusi egin ez dugula dezakezu benetan izan orrialde freskatzeko guztiak. Kodea, nahi duzu begiratzen bada, guztien eskura dago hemen. Kodea da, beraz, iaz idatzi dut noizbait. Hemen ikus daiteke, POST eskaera bat bidaltzen ari gara. Izeneko fitxategia atzeko muturrean Erabiltzailea daukat, egiaztatzen duen pasahitza da baliozko bada. Parametro batean igaro duzu, eta kartografiatu dira sarrera duten sarrerako kutxa hau da, gaur egun. Eta noiz datuak bueltatzen dugu egiaztatu. Datu faltsua bada, ondoren, pasahitza okerra da esaten dugu, irristatu du behera, eta besterik egin ondoren desagertuko da. Bestela, admin orria kargatu dugu. Eta hori guztia egin JSON erabiliz. Kode-lerro honetan, besterik gabe dezakezu pasatzeko datuak atzera amaieran, egiaztatu da ala ez da zuzena, behar bezala egiaztatu den ala ez duzu saioa hasi, eta benetan erantzuteko, pertsona berbideratu zuzena orria edo ez saioa uzteko, eta horiek kontatzea izan dutela Pasahitz okerra. Beraz, nola jQuery POST erabil daiteke adibide bat POST eskaera bat bidaltzeko zure atzera amaieran, Norbaitek bai saioa hasi behar bezala egiaztatuz. 

Ondo da, hori adibide nuen, eta gauzak estaltzeko nahi izan dut, beraz. Horiek nagusien jQuery gauza egiteko aukera ematen duena egiteko dira: hautatu elementuak, horiek aldatzeko DOM manipulazioa erabiliz, efektuak gehitu ahal izango dituzu, gauzak aktibatzeko gertakari jakin batzuetan, eta, gainera, AJAX eskaerak egin baitituzte eta oso erraz. Beraz, eskerrik asko edo datozen ikusteko, eta edozein zalantza izanez gero, besterik gabe, let me know. Bai? [Ikasleentzako] Itzuli duzunean erakutsi, JSON izan duzu komatxo POST eskaera egin ondoren, eta besterik ez nintzen zer egin zuen galdetzen. >> Bai, ikusten dut. , Galdetu zion, hori adibidea erakutsi dut, ez zen komatxo JSON hitzaren inguruan - Dut tira da berriro - post funtzioaren inguruan. Besterik ez naiz hura tiraka sortu erakusteko. Beraz, hemen POST eskaera hau da, eta ez komatxo JSON hau. Hori besterik ez da definitzen zer irteera behar izan gara zain. Hala bada JSON igaroko dugu, datu mota espero bezala, ez da baldintza bat, baina pasatzen badugu ere, ondoren, datuak automatikoki JSON gisa analizatu. Beraz, ez dugu analisi du JSON funtzioa deitzen da eta, besterik ez da gertatuko automatikoki. Eta hartu duzu POST dokumentazioa begirada bat izanez gero, hau ez dago datu-mota aldagai, zerbitzariak espero datu mota da. Lehenetsi bat adimentsuak etxebizitza hori okerra izan daiteke, beraz, hutsik utzi dezakezu, baina datu-mota da ari zaren, erabiltzen da ala ez da JSON edo XML edo beste zerbait kodeketa da. 

Beste edozein galdera? Guztiak eskubidea. Duzu, beste edozein galdera baldin bada, sentitzen free me elektronikoetan vshekhawat@college.harvard.edu at, eta diapositibak eta kodea eskuragarri konektatuta egon behar du polita laster. Zure proiektuak azken Zorte ona, espero jQuery erabiltzen dituzu. [CS50.TV]