[Powered by Google Translate] [Семинар: jQuery] [Vipul Shekhawat, Универзитетот Харвард] [Ова е CS50.] [CS50.TV] Ако сте по должината на вашиот дом, вие всушност може да пристапам до мојата слајдови онлајн со одење на овој линк. Тоа е TjjRWj, на bit.ly. Можете исто така да само одете на URL-то директно, кој е cloud.cs50.net / ~ vshekhawat, што е мое име, и jQuery. Силно ве охрабруваме да ги следат заедно ако гледате дома, и ако си тука, исто така, затоа што ова е прилично интерактивна презентација. 

Па денес јас ќе одам да се зборува за jQuery, и на првото прашање е, она што е jQuery? Оваа година, знам дека вие момци не се опфатени вклучите Javascript- во колку детално што ја имаме во изминатите години. JavaScript е, прв од сите, само клиент-страна јазик кои ги користите да се кандидира скрипти и кодот на машина секој корисник. Па имате серверот која обезбедува веб страници на луѓето, но можеби ќе сакате да направите нешто на нивната машина, побара нивната машина да испрати барања до вашиот сервер на секои 30 секунди или нешто слично. Можете да го направите тоа користејќи JavaScript. JQuery само обезбедува поголема функционалност на врвот на вклучите Javascript- која го прави дополнителни работи за вас. Ако се погледне на содржината на врвот, кој ги опишува некои од работите кои сте во можност да го стори. Значи во целост, тоа беше формирана во јануари 2006 година. Тоа беше прв зачнати од во август 2005 година. Тоа е околу за неколку години, и тоа е навистина дел од новиот Веб 2.0 движење кој е направен на интернет толку сјајна. Тоа е најшироко користени JavaScript библиотека. Над 19.600.000 веб-сајтови го користат, како и употреба е уште поголем според builtwith.com, која, очигледно, во текот на минатата година, има само постојано се зголемуваат и прилично линеарно. Меѓу првите 10 милиони сајтови, има уште - околу 40% од нив се во моментов го користите. Фејсбук го користи, многу други веб-сајтови во моментов го користам. Можете да го погледнете овие статистики на свој, ако сакате. И може да се каже дека тоа е legit поради тоа што има основа и 13 членови на одборот, заедно со тим од 20 луѓе кои работат на тоа, на редовна основа. Така што е многу широко се користи, таа има. Org рачно, тоа е фенси, има спин-off за други нешта, па тоа е голема работа. 

Зошто треба да го користам? JQuery е многу лесен. Тоа значи дека тој не е голема датотека. Може да го симнете на minified датотека, која е без сите бел простор и коментари, и тоа е само 32 KB. Па тоа е лесно да се само фрли кон вашиот веб-страница и само за да започнете да го користите. Тоа е, исто така, многу ефикасно напишани, па затоа не заземаат многу - тоа не го успори вашиот сајт многу, кога ќе ја користите. Тоа ви овозможува да се спроведе работи што беа претходно неизводливо. Постојат некои аспекти на функционалност, како и создавање анимации, кои нормално ќе биде многу, многу тешко да се направи. Но во jQuery тие се всушност многу едноставна. А тука се и некои работи кои се досадни да се направи, можно во JavaScript, како и испраќање на POST побарување, но да се испрати барање до сервер, имаш да се напише пет или шест или седум линии на код. Сега можеш само да го направи тоа во една линија од код, во еден единствен повик на функција. Што навистина го поедноставува многу од работите што ќе правиш. И сите кул деца го користат тоа. Со тоа, јас мене значи. Во мојот последен проект минатата година, што е news.whrb.org, што е за радио станица, Јас создаде овој блог кој е домаќин на сите покажува дека ние го направивме и на MP3 датотеки за нив. Можете да пребарувате низ минатото емисии, и тоа е направено со користење на веб. Можете да му кажете затоа што на сите овие анимации, во суштина. Значи, ако имате - ако сте создавање на нов пост, ќе видите овие мали slideDowns; тоа е направено со користење на веб. И ова бледеат - па тој вид на работи е направено со користење на веб, и вие не мора постојано да ја превчитате страница за да отидете на страницата. Уште една кул работа која е направена со користење jQuery е оваа презентација. Јас сум со користење на овој софтвер со отворен код нешто што се нарекува scrolldeck, што некој напишал на врвот на jQuery. Ако навистина се погледне на извор, можете да видите дека тие се со користење на овој знакот за долар, долар знаци се користат во jQuery да означува дека некоја функција е jQuery функцијата. Па тие се дефинирање на омотот на врвот на jQuery кој ви овозможува да се направи презентација вака, и можете да видите дека тука тие се вклучувајќи го и оригиналот jQuery датотека, што е она што ќе треба да се вклучи ако сакате да го користите jQuery во свој веб-сајтови. 

Допирање на тоа, како да го инсталирате? Вие само може да оди на jQuery.com и да ја преземете датотеката, додадете го во веб директориум и се тоа. Па само на врвот, во главата таг на вашиот HTML датотека од вашите главни HTML датотека, само треба таа линија на кодот со потребната верзија за која верзија на jQuery сте користите. Можете да го преземете со одење на jQuery.com, кликнете на "Download jQuery", и сте го зедов тоа. Тоа е тоа. И всушност, можеме да ги разгледаме во она што изгледа како. Ако кликнете на преземете тука, jQuery е ова. Тоа е само една голема вклучите Javascript-датотека што не сите магија работи за вас. Ова е minified верзија, која не е читлива на сите. Можете исто така да се погледне на развој верзија, која е читлив но сепак многу, многу долги. Тоа е многу нешта во таму. Можете исто така да водат кон домаќин верзија на Google на неа. Така што ќе ви овозможи да само се потпираат на Google да го обезбеди. Тие обезбедуваат секоја верзија на тоа, на располагање на сите времиња. Така што веројатно може да се потпира на Google да го домаќин за вас. Или може да водат до свој jQuery е најновата верзија. Тие имаат URL, кој е секогаш ажурирани да ја најновата верзија. Тоа е jQuery-најновите, и таму е еден проблем со тоа, а тоа е дека ако нема jQuery и некои од претходните функционалност тие се станува retrograded или запоставена, тоа не може - тоа може да почнат да не се поддржани повеќе. Па ако напишете веб користење на верзија 1.8.2, од страна на време верзија 2.7 излегува некои од функциите што го напиша не работат повеќе. Така, тоа е подобро само да ја преземете 32 kB датотека, го стави на вашата веб страница, и тоа ќе работи засекогаш. 

Одам да се оди напред и да почнам да зборувам за вистинските функционалност на jQuery. Првото нешто е селектори. Тоа е она што jQuery првично беше замислен да обезбеди. И можете да кликнете на документација да се погледне во на детална документација за селектори, ќе одам да се покриваат. Идејата зад селектори е тоа што можете да одберете HTML елементи на страница. Елементи на страница имаат лични карти и класи и други идентификување аспекти за нив. Постои, исто така - they're во различни наредби. Некои од тоа време тие се вгнездени внатре едни со други. JQuery ви овозможува да се изгради едноставни пребарувања, кои добивање на елементи од страната. Тогаш може да се манипулира со овие елементи со користење на веб функции, кој е манипулација дел ние ќе дојдеме до подоцна. Можете да ги менувате HTML, промена на CSS, исто така можете да анимира и додадете функции кои активирате на одредени настани. Така, на пример, ако нешто е кликнато, сакаш нешто да се случи, можете да го направите тоа со користење на веб, како и. И постојат голем број на начини да изберете елементи. Повеќето од нив јас никогаш не сум користел, но постојат основните оние, кои се прилично важни. Елементот селектор, на пример, ако сте само изборот ништо дека е една div - Јас всушност имаат кодот отворена за овој слајд презентација. Така, на пример, тука е првиот слајд. Тука имаме DIV. Ако ние всушност изберете сите Divs на страницата, тоа само ќе ни даде низа на сите Divs кои постојат во оваа датотека. На проект селектор ви овозможува да изберете нешто со даден проект. Значи, ако оваа, на пример, тоа нешто има проект "она" и ако ние го сторивме тоа со # она што наместо на некои проект, тоа само ќе се врати низа која има еден елемент, а тоа е дека елемент на страната. Ние, исто така, може да се комбинираат селектори на овој начин со тоа што само изберете работи со лични карти, кои се Divs. Па је. Само изберете Divs кои имаат тој проект. За класа само користење точка, тоа е истото како CSS. Потомок исто така, работи, па ако имате некоја класа и тоа вгнездени елементи во неа - така, на пример, има некои класа и таа има сидро таг да се поврзат со друга страница, можете да го користите оваа синтакса за добивање на линк. Можете исто така да изберете повеќе работи одеднаш, само да ги одвои со запирки, користите било селектор сакате, и ќе ги изберете сите нив одеднаш, во еден единствен низа. И потоа, тука е, исто така, не селектор, па можете да ги изберете сите Divs кои немаат некои специфични класа. И тоа е само корисен начин да се добие вовед во овој избор функционира. Ќе ви покажам некои конкретни примери кои во една секунда. 

Напредно селектори се - овие се само неколку примери. Постојат десетици од овие, но ако сакате да изберете сите на сликата тагови во рамките на некои елемент, тогаш само направи: сликата. Ако сакате да изберете дури елементи, на пример, ако постојат 20 од нив, сакате да изберете 0, 2, 4, 6 и така натаму, ќе го направите: дури, или исто така можете да направите: чудно. Овие се псевдо селектори, што значи дека тие всушност се пресмета секој друг елемент наместо само ќе и избирање на сите од нив. Можете исто така - секој елемент, исто така, може да има специфични атрибути. Така, на пример, класа = центарот е исто така атрибут. За ова сидро таг, href, хипертекст референца, е особина исто така. Така можете да изберете нешто што врски на одредена страница или само - тоа е навистина воопшто. Можете да изберете нешто со било кој атрибут што сакате. А потоа, исто така, атрибутот содржи. Ако, на пример, сакаше да изберете сите влезни елементи кои имаат зборот "помине" како име на нив, ако една страница има внесување текст блок што се вика "лозинка", дека ќе биде еден од начините можете да изберете тоа. И постојат многу повеќе. Можете да одите напред и се погледне на документација и да видиме конкретни примери за тоа како таа работи. 

Следното нешто е ДОМ манипулација. Откако ќе ги изберете елементи, ние ќе сакаат да всушност направи нешто со нив. Досега не сме гледаше дека на сите, но ако се погледне на документацијата, има навистина многу што можеме да направиме. Во овој момент, ние ќе треба да изберете елементи на оваа презентација и манипулира со нив користење jQuery. Бидејќи ова се спроведува со користење jQuery, имаме пристап до jQuery библиотеката, и можеме да ги користат овие функции во рамките на овој код. Една корисна работа што вие не смеете да знаете за е конзола. И Google Chrome е она што јас сум користење. Можете да притиснете Alt команда Ј или alt контрола J за да ја отвори конзола. Во Firefox Мислам дека е команда промена K или контрола промена К Во Safari треба да се оди промена на некои поставки. Има еден линк ако сакате да го направи тоа, но јас препорачувам добивање Chrome или Firefox. Па ајде да се отвори на конзолата, тоа е овде долу. Тоа ви овозможува да само во основа направи нешто што сакате. Па едноставно можете да напишете во создаде променлива наречена X, x = 5, ајде да видиме што x + 2 е. Можете дури и да се направи нешто како CS + Ајде да видиме, x + 45, што ќе биде CS50. Можете само да направите некои типични го вклучите Javascript нешта. Но вие исто така може да го направи jQuery во тука. 

Па ајде да се погледне на овој првиот аспект тука. Ние ќе треба да се создаде променлива наречена HTML, која е стринг. Таа има став таг во тоа, дека се вика некои нови текстот. Значи имаме овој HTML, тоа е некој нов текст, во став тагови. Сега ние всушност сакате да го додадете во страната. Јас го постави, така што на HTML за овој став, овој наслов тука, е додавај проект. Ако ние избираме додавај проект, а потоа додадете на тоа HTML кодот променлива јас само замислен, тоа ќе додадете дека HTML на крајот, веднаш по овој став таг. Значи, ако ние го правам тоа - ние избрани овој став, и ние го нарече додавај функција со HTML променлива Јас само додаде, тоа ќе се додаде дека новиот текст право таму на страницата. Ние, исто така може да ставете пред, што значи дека ќе одат пред, на почетокот на тој елемент. Па има некаков нов текст на почетокот и потоа. Јас може да оди напред и освежување да се ослободи од овој материјал Јас сум само направено. Но тоа е пример за тоа како можете да го користите ставете пред и додаваат методи да се манипулира работи на страница, да додадете некои HTML. 

Исто така можете да ја промените часови. Назад во овој стил датотека, Јас направивме ова за победа класа кој има текст во боја црвена, некои боја на позадината, и текст сенка. Тоа изгледа грозен, но можам всушност - овој став одговара на класа проект. За да можам да додадете класа за победа. Јас може да се изврши ова во конзола, и дека ќе додадам дека класа, а сега тоа изгледа грозен, како што се очекуваше. На CSS автоматски станува применува на класи кои вас - ако има CSS за една класа, тој автоматски добива применува ако го промените класа на елементот. Тогаш ние само може да го отстрани користење отстрани класа. Значи, ако имате некои претходно дефинирани класи како црвена или обележан, и тогаш ќе сакате да се применуваат овие да се елементи, вие не мора да го направите сите CSS стил во секое време. Вие само може да додадете класа на елемент, и тогаш тоа автоматски ќе стане - тој автоматски ќе изгледа соодветно за таа класа. Ние, исто така може да се отстранат нешта, па ќе одам да изберете сите Divs на оваа страница и отстранете ги. Што е тоа што ќе изгледа? Тоа се случува да изгледа како ништо, па таму е всушност ништо лево. Мојата презентација е нема. Јас може да се освежи и да се вратиме, за среќа, бидејќи тоа е само трчање еднаш, но тоа е пример за отстранување, ако сакате целосно да ги уништи елемент исклучите страница. 

Можете, исто така, може да запише, а јас ќе одам да изберете сите пасус на страната и да си одат во нив и да го замени она што текстот што ги имаат во нив само со зборот "тестирање." Ако го направите ова, ќе го замени секој став на страницата со ова тестирање. Да. Тие се сите заменети со тестирање. Па тоа е пример за пристапување на текст и пребрише тоа. Можете исто така да добијат информации, и ова е навистина кул за влез кутии. Ако имате влез кутија што луѓето се пишува нешто во, луѓето се пишува нешто во неа, тука ние изберете влез, секој влез таг со еден вид на текст. Во овој случај, има само еден влез кутија во целата презентација, па ние само ќе го изберете првиот, а потоа ние го нарекуваме функција на val на неа. Кој се враќа на вредноста, и за влез кутија, вредноста е само она што се случува да биде во него. Значи, ако го правиме тоа, тоа само се враќа стрингот нешта. И ако ние ја нарекуваме, повторно по пишувањето повеќе работи се претвора во повеќе нешта. Тоа е еден одличен начин за пристап до елементите на влез кутија, а потоа проверете, е ова валидна е-мејл адреса, дали е ова валиден датум, на пример. Можете само да се потсетите работи веднаш како што луѓето го пишувате, и потоа проверете дали тоа е валиден, го испрати назад до серверот, направи нешто што сакате со него. А тоа е како да пристапите она што е внатре оние кутии. 

Исто така можете да менувате CSS директно, па наместо за додавање на класа која има некои претходно дефинирани својства, можете само да додадете она што CSS дека сакате да ништо. Па ајде избери тело, која е целата презентација, и бојата е имотот што го дефинира она што боите на текстот е. Ако ние го промени на црвено, сите на текстот во страницата ќе се сврти кон црвено. Можеме да направиме нешто како боја на позадина сина, таму ќе одиме, тоа е убава. Можете да направите нешто што сакате со ова. Користење на имотот CSS, можете навистина да ги менувате како нешто изгледа во секое време. Следното нешто е ефекти. Ефекти се во основа истото што се промената на CSS, но тие всушност се обезбедат некои дополнителни анимација на него. Така, наместо на само покажува или крие нешто или промена на бојата, вие всушност може да направи анимиран. Тука е документација, ако сакате да ги погледне на обемна документација за тоа. Но јас ќе одам да се покријат главните оние. Постојат шоуто и се кријат својства. Прикажи / скриј проект всушност, соодветствува со целата оваа кутија, па ако јас го сокрие, тоа само ќе исчезне. И јас да ја прикажете повторно ако сакам да го направите да се врати. И тоа е назад. Тоа всушност не исчезне, Јас всушност не го отстраните од страница, јас само го поставите имотот CSS на видливост до скриени па не можете да го видите веќе. Исто така има слајд нагоре и слајд надолу; која ви овозможува да имаат овој ефект. Тоа слајдови до исчезне, и по таа исчезнува можете да го слајд надолу да се направи тоа се врати. И сега е назад. Тука е и оваа бледнеат ефект, кој - бледнеат проект одговара на ова поле. Ако ја снема, тогаш тоа полека ќе исчезне. Јас, исто така може да го бледнеат, и тоа ќе се врати. Исто така можете да го направите бледнеат да, која е специфична за бледнеат функција. Можете да го згаснат на било која специфична непроѕирноста што сакате. Па ако го снема полека да 0,5, тоа ќе стане половина видливи. Можам да се направи тоа оди во 0,1, и назад до 1 да се направи целосно видлива повторно. Тоа е само уште една анимација која можете да направите. 

Постојат, исто така, на вклучите ефекти. Па ќе одам да го изберете вклучите проект, што одговара на ова поле, и врз таа div можете да се јавите вклучите, ако е видливо тоа ќе стане невидлива, ако тоа е невидлив тоа ќе стане видлива повторно. Па јас само се нарекува овој вклучите функцијата двапати; првата беше истото како кријат, на вториот повик беше ист нешто како шоу. И исто така можете да го направите ова со бледеат вклучите, кој го прави истото, освен тоа всушност згаснува. И истото со слајд смениш. Постојат оковани ефекти, како и, што значи Ако одберете елемент и само се јавите еден куп на анимација методи на неа, ако ти сакаше тоа да ги снема, а потоа слајд надолу, а потоа се кријат а потоа исчезнат во, тоа ќе ги направи по ред. Така исчезнаа, се вратија - за некоја причина, кријат не се случи. Ајде да го испробаш. Да, па тоа избледени надвор, а потоа се лизна далеку. И има многу повеќе. Можете да го користите живи функција да се создаде свој анимации, која е прилично комплексна, но тоа ви обезбедува со бесконечна разтегаемост. Можете да направите било каков вид на анимација го сакате. Исто така можете да го користите задача да задача до повеќекратни анимации во исто време. Значи, ако сакате нешто да лета низ страница, слајд од горниот десен агол на долниот лев, можете да го направите тоа, и само имаат еден куп на акции случува една по друга. 

Следното нешто што се случува да се зборува за е настани. Настани ви овозможи - досега ние само се пишување работи во конзола и тоа е еден начин да се направи ова се случи, но на вистински страница, вие нема да бидете во можност да направи на корисникот тип работи во конзола. Сакате работите да се случи автоматски. За тоа, ќе треба да користите настани што ја раздвижуваат на некои одредени настан се случува. Можете да проверите на документацијата за целосна детали. Дали ќе видиме. Ние сакаме да се скрие или прикаже кутија, но токму сега на ова копче не прави ништо, бидејќи јас не го спроведе уште. Одам да се оди на вистински HTML страница. Тука е слајд. Има div за слајд. Таа има класата на слајд. Тука е и текстот. Сега, постојат ова поле и кутија копче. Како би ние всушност го прават овој исчезне? Прво на сите, ајде да се напише функција која го прави на полето проект исчезне. Ова е синтакса за funtion, ајде да го наречеме hideTheBox. Тоа не презема никакви аргументи, бидејќи нема аргументи да се преземат. Можеме да изберете кутија проект. Па со користење на jQuery изберете, може да изберете кутија проект, а потоа само да исчезне. Ајде да го прават тоа ги снема. Ако ние трчаше оваа функција во конкретната конзола, ние би можеле да се дефинираат оваа функција, можеме да го наречеме hideTheBox, и тоа функционира. Но ние сакаме тоа да се случи кога копчето е всушност е притиснато. Да го стори тоа, ние мора да ја користи некој настан. Да се ​​поврзе со настан кој за некои специфични копче или некоја акција се случува, ние мора да го изберете елемент дека настанот ќе активира - или дека ќе активира настан, жал. 

Значи прво на сите, ајде да изберете кутија копчето проект затоа што тоа е копчето, и сега, за тоа копче, ние сакаме да се создаде анимација кога е кликнато. Така што овој клик функција. Тоа ви овозможува да се поврзе друга функција на него. Оваа функција е потребно уште една функција како аргумент ние може да го положат во функција hideTheBox, и кога ова копче е кликнато, таа функција автоматски ќе изврши. Па ова ќе работи ако ние ја зачувате оваа, јас ќе се освежи, и - една секунда, Жал ми е. Дозволете ми да го надминете овој навистина брзо. Во ред. Таму ќе одиме. Па сега на кутија исчезнува кога ќе кликнете на копчето. Ние, исто така, да го промените ова само fadeToggle, промени тоа само за да се скрие или прикаже кутија, и ова исто така ќе работат премногу, ако се одмориме. Можеме да го сокрие, ние исто така може да го покаже, и дека ќе продолжат да работат. Друга работа е што можеме да направиме е, ние не, всушност треба да се дефинира овој hideTheBox функција пред да се јавите на клик функција. Така, наместо на дефинирање на функција и повикувајќи hideTheBox, ние сме само ќе го наречеме ако тоа нешто е кликнато. Значи можеме да го дефинираме тоа анонимно овде, што е карактеристика што го вклучите Javascript-има. Можете да дефинирате функција; нормално, би рекле функција hideTheBox со аргументи, но наместо тоа, ние само може да се каже функционира без аргументи, започне кадрава голема заграда да се дефинира функција, затвори таа голема заграда кадрава, а потоа само се дефинира функција во тука, во рамките на првата заграда и последните загради кои одговараат на аргументите на клик функција. Па ние сме поминува во оваа функција, ние може да ја копирате на оваа линија код токму тука, и дека ќе се направи иста работа. И сега ние не ја имаат оваа случаен fadeTheBox функција што седи околу за да нема некоја очигледна причина. Функцијата беше дефинирана анонимно, тоа не да има име. Тоа само ќе се изврши кога ќе кликнете на полето копче. Па освежувачки уште еднаш, уште еднаш, и ќе видите дека се уште работи. И тоа како ќе се создаде настани. 

Постојат голем број на различни настани кои можеме да го користиме. Одам да се вратиш назад со користење на конзола само да ви покаже како овие работи. На ИД за секој од овие одговараат на секое поле. Значи ова поле е клик проект, овој е клучен проект, и ова е глувчето проект. Уште една работа е дека постои оваа акција функција; наместо пишување го ова секој пат, Јас всушност отиде напред и дефинирани оваа акција функција овде долу. Тоа го прави истото како hideTheBox функција. Станува ова поле и или тоа згаснува или згаснува внатре И тоа е причината зошто ние сме во можност да го користам тука. Значи, ако ние кликнете на овој клик проект, ние сакаме да се направи кутија исчезне или се појавува. Тоа е истото како на копчето што го имавме во последниот слајд. Сега, по што ние го нарекуваме тоа, ние може да кликнете на овој и кутија ќе исчезне, потоа кликнете на неа повторно и кутија ќе се појавува. Тоа е прилично едноставна. Двоен клик прави истото, освен тоа бара двоен клик. Па ако кликнете на неа еднаш и кликнете на неа повторно ништо нема да се случи, но ако сте двојно кликнете брзо, тоа ќе исчезне. Ако сте двојно кликнете повторно, ќе се врати. Па тоа е прилично едноставна. Тастатура за внес е вид на чудни, јас не мислам дека тоа всушност се работи во овој пример бидејќи клучот надолу, нагоре и притискање на копче и други клучни активности активирате без разлика што елементот што го врзуваат за. На пример, дури и ако јас обврзани клучните надолу на телото или нешто друго во целост, тогаш тоа, сепак, ќе го активира без разлика - тоа не е специфична. Јас не мора да биде кликнување на ова и притиснете на копчето да се направи нешто исчезне. Тоа ќе биде активирана без оглед на она елемент Јас сум во моментов внатре Па овие не се всушност работат во овој пример поради тоа што не ме препозна како влегуваат влез во тастатура за внес DIV. 

Но, ако се погледне на глувчето акции, првиот е лебди, и што може да направи некои од овие користење на CSS. Ако користите CSS, можете да го создаде, така што ако ти лебдиш над нешто, тогаш нејзиниот стил промени. Но со користење на jQuery можете да ги менувате стилови на други работи, како и. Така, на пример, ние ќе треба да се јавите акција ако ние лебдат над овој div. Тоа значи дека ако ние лебди над неа, тогаш поле ќе исчезне. Ако ние се движат подалеку од него, кутијата ќе се појавува. Ако ние го нарекуваме овој и лебдиш над неа, кутијата се исчезне, и веднаш штом ќе се движат подалеку, тоа доаѓа назад. Ако ние го нарекуваме оваа функција лебдиш на глувчето проект, што одговара на ова поле, а потоа, ако ние лебдат над кутијата, тогаш кутија, всушност, ќе исчезне - тоа е да се биде фанки токму сега, но - ако ние се движат подалеку од него, тоа ќе се појавува. Токму сега таа е наназад поради некоја причина. На глувчето да влезе и да глувчето потег функции се донекаде слични, но малку поинаква. Глувчето внесете активира само кога глувчето ќе влезе во кутија, како што се очекуваше. Па ако се преселат во него, тоа ќе исчезне. Но, тоа не ќе се појавува кога ќе се движат подалеку, вие ќе треба да се движи назад кон него за тој да се врати. Исто така на глувчето потег функција, која ќе го активира секогаш кога глувчето е дури и се присутни во кутија. Па тоа само ќе продолжи да оди, одѕвонуваше во и надвор. А тоа е всушност сеча - ми се чини дека тоа е само одѕвонуваше во и надвор, но тоа е всушност влезете многу повеќе акции од ова, па кога ќе се отселам тоа само ќе продолжи да оди затоа што логирани како илјада од нив. Можеби не илјада. Можеби пет. Тоа најавува повеќе од тоа. Поентата е, сите на глувчето активности, постојат многу од нив. Можете да прочитате на другите, но сите тие се малку различни, и можете да изберете кој било од нив оној што треба за кое одредена цел, ти се обидуваш да се направи. 

Следното нешто, ќе одам да се зборува за е AJAX. AJAX, знам дека не покрие вклучите во колку длабочината на оваа година, па јас сум само ќе зборуваме за AJAX воопшто за една минута. AJAX залага за Асинхронни JavaScript и XML. Тоа е во основа, на пример, кога сте на Фејсбук и тоа ви турка известување, тоа е затоа што AJAX е се извршува на Вашиот веб пребарувач. На секои неколку секунди вашиот веб прелистувач е всушност ќе сервери на Фејсбук, барајќи од нив, дали имате нешто ново за мене, и тогаш тоа се враќа кон тебе. Ова ви овозможува да испратите барања за сервер без всушност морале да се вчита страната. Па нормално, и ако сте само користење на PHP и базата на податоци, ќе мора да се освежи страница пред да можат да добијат нови информации од серверот. Но со користење на AJAX, можете да се повлече за таа нови информации постојано, или повлечете за тоа кога ќе кликнете на копчето или нешто слично. Па ова ни овозможува да испрати барања без претовар на страницата, и ние може да го користи или GET или POST барањата. 

GET барања се, на пример, ако сте за да Google.com и не q = тест. Тоа е давајќи им барањето тест. И тоа е GET барањето, бидејќи тоа е поминува во тие параметри во URL-то себе. А пост барање е како да сте ги испраќа по пошта. Тоа е како да го стави во писмото и бродот го исклучувам со нив, но тие не се всушност ја видите содржината. Тие не се видливи во URL-то. Вие не може директно да го напишете, вие мора да го испрати речиси тајно. Тоа е во еден пост. Но со користење на jQuery, можете да направите GET и POST барањата многу полесно отколку што нормално би можело користејќи само обичен вклучите Javascript-. Можете да пребарување API-јата користење GET барања, и вие исто така може да се провери за информации за најава. На следната страница, јас ја создале оваа, која прашува, "Што има за ручек?" користење на Харвард храна API-то, па ајде да се повлече дека до. Ова е само еден пример за тоа како можете да го користите jQuery да се направи GET барањето на API и да добијат информации се врати од неа. Затоа сакаме да се види во менито за денес, и ние сакаме да видиме што е за ручек. Тука е рачно да се создаде GET барањето во jQuery. го користите $. добие функција. Првиот аргумент е URL-то, па токму она што сте доведување во прашање. Тогаш следниот аргумент е функција која извршува кога GET барањето е завршена. Па ви испратиме исклучи некои барање до серверот, ќе чека тој да се врати. Кога тоа не дојде назад, си оди за да се преземат некои мерки со податоците што се враќа од серверот. Ајде да одиме напред и кодот тоа како добро. Јас не го кодот на оваа или, намерно. Тука е НАПРАВИ. Прво на сите, ајде да го користите случај обврзувачки така што кога на ова копче е притиснато, ние испраќам GET барањето. И кога тоа GET барањето се враќа со некои податоци, ние ќе го запишам во овој оброк информации ID DIV. Прво на сите, ајде да изберете храна копчето проект. Кога е кликнато, ние сакаме тоа да се направи нешто. Ајде само да го направи анонимен fuction, како и досега. Може да заврши оние големите загради, и кога ова копче е притиснато, ние сакаме да се испрати GET барањето да се провери што е за ручек. Да го стори тоа, ние едноставно можете да напишете во $. Добие. Ова е jQuery функцијата, со користење на знакот за долар. Таа ги зема неколку аргументи. Првиот е URL-то, втората е повратен повик функција, функција што се вика кога тоа барање, всушност, се враќа. Ајде да се изгради на URL-то во прв план. Ние може да го добие од API, што Давид го напишал до. Случува тука, можеме да видиме дека тоа е food.cs50.net/api/1.3/menus, и можеш само помине во имињата на параметри кои вие би сакале. Па параметар 1 е вредност 1. Тоа изгледа како стандарден датум, датумот на почеток, стандардно денес ако не внесете ништо, и краен датум, исто така, стандардно до денес, ако не внесете ништо. Тоа е она што го сакаме. Ние сакаме само да добиете информации за денес. 

Ние сакаме форматот да биде во JSON. Тоа е само произволни; можете да го користите која било форма што сакате. Можете да го користите CSV, но JSON е да го вклучите Javascript Цел Нотација. Тоа е многу лесно за JavaScript за да разбере што значи тоа, и можеме да го испечатите полесно на тој начин. Па ајде да го побараат во JSON и барање на ручек ајде. Па оброк = ручек. Само за да пишуваат дека URL-то, ние одиме назад тука. Има менија. Првиот параметар е излез = JSON затоа што тоа е она што го сакаме, а вие се разделиме параметри со "и". Вториот параметар е - Јас не се сеќавам. Оброк. И ние сакаме оброк = ручек. Можете да ја тестирате оваа рачно со пишување во вашиот прелистувач и ќе го. Тој ќе ви даде некои излез. Тоа е само еден куп на работи кои за ручек. Тоа е во оваа грда формат. Ние сакаме да го испечатите врз нашата страница во подобра форма. Значи адресата е точна, сега ние само треба да напише функција да се јавиме кога барањето е успешна. Оваа функција, всушност, ќе преземе аргумент. Тоа ќе биде податоци. На податоците е она што се враќа од GET барањето по GET барањето е направено. Можеме да направиме големи загради; тука ние пишуваме на анонимен функција кој извршува, со користење на податоците кога ќе го добиеме информации назад. Така што податоците, кога ние ја внеле во овој URL, тоа е она што на податоци се случува да изгледа. Тоа се случува да биде оваа огромна низа. Но, добрата работа е, JavaScript може да го анализирам со користење на JSON.parse функција. Па ајде да се создаде нов променлива наречена анализирам податоци. И анализирам податоци е низа од објекти. Секој објект содржи информации како што се - добро, ајде да ги разгледаме. Таа има датум, оброк, категорија, рецепт, сето ова други нешта. Па да испечатите на име за секој од нив. Ајде да iterate во текот на цела низа на работи кои ние се вратам од него, и само печати од секоја една - печатење на името на секој од нив. Ова е за телефонска линија. 

Го вклучите Javascript-има оваа корисна синтакса каде што може да се создаде променлива и јамки низ низа, и var i е само на iterator, па наместо да се направи var i = 0, јас бев помал од должината, i + +, вие само може да го направи var i во разложени податоци. Во овој пример, разложени податоци (i) ќе одговара на тековниот елемент на низата, вистинската објект. И ние сакаме да го добиете името надвор од неа. Па да се направи име. И последното нешто што е, ние ќе треба да имаат некои jQuery повторно. Всушност го додадете на div, овој оброк инфо div кој во моментов е празна. Па ајде да го изберете тоа. Ќе искористиме jQuery и изберете оброк инфо div проект, или оброк информации ID, жалам. Ние сакаме да додадете на ова. Ако ние го сторивме тест, на пример, тоа само ќе ја пребришете секој време. Па ние само може да се додаваат ова. Тековниот елемент во низа, ние ќе добиете името надвор од неа, и ние ќе ја додадете на крајот од оброкот информации ID DIV. А потоа само да го направите да изгледа почиста, ние, исто така, ќе додаде линија пауза па тоа не е сите на една линија. Значи, ако се оди добро, тоа треба да биде добро да - Прво на сите, секогаш кога ова копче е кликнато, тоа ќе го испраќам GET барањето за оваа адреса. Кога податоците се враќа од него, ќе го анализирам, да ја претвори во JSON, јамка во текот на цела низа претставуваат дека податоците, и потоа додадете го името и линија пауза за секоја линија во овој оброк информации ID што беше претходно празна. Па ќе се вратам на оваа страница, ние ќе се освежи, клик, да дознаете - тоа не функционира. Тоа е жално. И ова е местото каде дебагирање влегува внатре Index.html, алинеја 1. Тоа е интересно. Добро, добро, наместо да трошат време го прават тоа, јас сум само ќе повлечете го направи датотека дека имам, кој е завршен верзија. Не сум сигурен дека она што разликата е, но ние само може да ја отворите оваа, наместо. И ние одиме на AJAX, и ова треба да работи коректно. Тоа е она што беше за ручек денес, во никој особено ред, со наводници околу неа, па тоа не е најубаво. Но, очигледно, ако се прави ова за финалниот проект, ќе го направите да изгледа подобро. Но тоа е само еден едноставен пример за тоа како вие го направите GET барањето. И ако се погледне на реалните код, јас сум Сомневајќи се, јас сум прилично сигурен тоа е сè уште прилично многу исти. О, јас заборавив да го конвертирате стринг, тоа е тоа. Не, тоа е сè уште не функционира. Без разлика, тука е вистински завршени код за она што овој треба да изгледа, и тоа го прави истото како и она што јас само реализира. Кога ќе кликнете на копчето, тоа го користи добијам JSON автоматски да се интерпретира на податоци. Се зема на податоци се врати од тоа и јамки низ целата низа и отпечатоци од - сé што е за ручек денес, името на тоа, и додава линија пауза по секоја линија. Тоа е како имате потреба при користење на GET функција. 

Исто така можете да го користите пост, кој јас немав време да пишуваат пример за тоа, но можеме да се погледне на документација. Ако се погледне на jquery.post, можете да видите дека тоа е речиси иста работа. Имате URL-то, но наместо за полагање параметри користејќи - само да ги стави во низа за URL-то себе, ќе мора да помине во овој податок променлива дека е во основа на низа, речникот што мапи параметри на вредностите. Ќе помине дека во, и дека ги праќа во користење на еден пост. И штом еднаш ќе го имаме тоа, тогаш ќе може да има успех функција кој извршува кога податоците се враќа. Инаку, тоа е токму истото. Па преку пошта, можеби ќе сакате да го користите POST, на пример, ако имате влезен форма сте ги споделите со луѓе внесување лозинки во неа, и испрати оние лозинки надвор на вашиот back-end сценариото, за да се провери во базата на податоци без разлика дали тој корисник е валиден или не. Можете да го направите сите користење jQuery наместо да се освежи страница на сите. Тоа е како јас спроведува во блог дека јас ти го покажав претходно. Ако одиме до крај порталот и одјавите, се одјавите, Одјавете се не функционира. Па, дозволете ми само да го отворат во нов прозорец. Тука постои лозинка, и јас требаше да напишеш во нешто случаен избор. Тоа не функционира, но може да се види дека ние не сме всушност треба да се освежи страница на сите. Го кодот, ако сакате да се погледне во него, е сите достапни тука. Па го кодот напишав минатата година некаде. Како што можете да ја видите тука, ние сме испраќање на POST побарување. Јас имам еден фајл наречен login.php во задниот крај, која проверува дали лозинка е валидна. На параметрите ние помине во се лозинка, одбележан со влезот тоа е во овој влез кутија во моментов. И кога податоците се враќа, ние се провери. Ако податоците се лажни, тогаш велиме погрешна лозинка, го слајд надолу, и само да исчезне после тоа. Инаку, можеме да се вчита на админ страницата. И ова е направено со користење JSON. Во овој многу линии на код, што само може да помине на податоци на задниот крај, проверете дали тоа е правилно, проверете дали сте најавени правилно, а всушност одговорат на тоа, ги пренасочува лицето на точната страница или не допуштајќи им да се најавите и им кажува дека тие имале погрешна лозинка. Па тоа е пример за тоа како можете да го користите jQuery пост да испрати POST барањето до вашите задниот крај, проверка дали некој ќе ме правилно. 

Сите во право, па тоа е сите примери имав, и сето останато што сакав да се покријат. Тоа се главните работи што jQuery ви овозможува да направите: изберете елементи, да ги измените користење на ДОМ манипулација, можете да додадете ефекти, активирајте работи за одредени настани, и исто така не AJAX барањата многу елегантно и лесно. Па ви се заблагодарам за доаѓаат или гледање, и ако имате било какви прашања, само да ме известите. Да? [Студентите] Назад кога ви покажа, ти мораше JSON по пост барање во наводници, а јас бев само се прашувам што тоа го правеше. >> Да, го гледам. Прашањето беше дека, во примерот, јас само покажа, таму беше зборот JSON во наводници околу - Јас само ќе го повлече повторно - околу POST функција. Јас сум само да го влече да се покаже. Па тука е овој пост барање, и таму е овој JSON во наводници. Дека само го дефинира она што ние го очекуваме на излез да биде. Значи, ако ние помине во JSON, како очекуваните тип на податоци, тоа не е услов, но ако ние го помине во, тогаш податоци автоматски ќе бидат разложени како JSON. Па ние не треба да се јавите на анализирам JSON функција на неа, тоа само ќе се случи автоматски. И ако погледнете во документацијата за пост, постои овој тип на податоци променлива, видот на податоците очекува од серверот. Тоа се поклопува со интелигентна претпоставка дека може да биде во ред, па можете да оставете го полето празно, но тоа е само видот на податоците во кодирање дека сте користење, без разлика дали тоа е JSON или XML или нешто друго. 

Било какви други прашања? Сите во право. Ако имате било какви други прашања, се чувствуваат слободни да ми мејл на vshekhawat@college.harvard.edu, и слајдови и кодот треба да биде достапен онлајн наскоро. Среќно со вашата конечна проекти, се надевам ќе го користите jQuery. [CS50.TV]