[Powered by Google Translate] [Семинар: ЈКУЕРИ] [Випул Схекхават, Универзитет Харвард] [Ово је ЦС50.] [ЦС50.ТВ] Ако пратимо заједно код куће, можете заправо мрежи приступим слајдове одете на овај линк. То је ТјјРВј, на бит.ли. Такође можете само идите на УРЛ директно, што је цлоуд.цс50.нет / ~ всхекхават, што је моје име, и јКуери. Топло препоручујемо да пратите ако гледате код куће, а ако си овде, такође, јер је ово прилично интерактивна презентација. 

Дакле, данас ћу говорити о јКуери, а прво питање је, шта је јКуери? Ове године, знам да ви момци нису покривени ЈаваСцрипт у што више детаља као што смо у последњих неколико година. Јава је, пре свега, само клијент-страни језик која се користи за покретање скрипте и код на машини сваког корисника. Дакле, имате сервер који пружа веб странице за људе, али можда ћете желети да урадите ствари на свом рачунару, питајте своју машину да шаљу захтеве на сервер сваких 30 секунди или тако нешто. То можете учинити помоћу ЈаваСцрипт. ЈКуери само омогући већу функционалност на врху ЈаваСцрипт који ради екстра ствари за вас. Ако се осврнемо на садржај на врху, који описује неке од ствари које сте у могућности да урадите. Углавном, она је настала у јануару 2006. Први пут је замишљена у августу 2005. Прошло је око за неколико година, а то је заиста део нове Веб 2.0 покрет да је направио интернет тако сјајна. То је најраспрострањенији ЈаваСцрипт библиотека. Преко 19,6 милиона сајтова га користе, а употреба је и даље у порасту према буилтвитх.цом, који, очигледно, током прошле године, Управо је у сталном порасту прилично линеарно. Међу првих 10 милиона сајтова, још увек има - око 40% њих тренутно га користи. Фацебоок га користи, много других сајтова тренутно га користи. Можете погледати на оне статистике на своје, ако желите. И можете да кажете да је то легално, јер има темељ и 13 чланова одбора, заједно са тимом од 20 људи који раде на њему редовно. Тако да је веома широко користи, има орг УРЛ адресу., То је фенси, има спин-офф за друге ствари, тако да је то велика ствар. 

Зашто би требало да га користите? ЈКуери је веома лаган. То значи да то није велики фајл. Можете преузети тхе минифиед фајл, који је без свих беле површине и коментара, а то је само 32 МБ. Тако да је лако бацили на својој веб страници и само да почнете да га користите. Такође је веома ефикасно написан, тако да не заузима много - не успорава ваш сајт много када га користите. То вам омогућава да спроведе ствари које су и раније биле неизводљиве. Постоје неки аспекти функционалности, као и креирање анимације, које нормално би било веома, веома тешко учинити. Али у јКуери они заправо врло једноставна. И постоје неке ствари које су досадне да уради, могуће у ЈаваСцрипт, као што је слање ПОСТ захтев, али да пошаљете захтев на сервер, морате да напишете пет, шест или седам линија кода. Сада треба само да то уради у једној линији кода, у једном позива функције. То заиста олакшава много ствари које радиш. И све кул деца га користе. До тога, ја сам мислио. У свом завршном пројекту прошле године, што је невс.вхрб.орг, који је за радио станицу, направио сам овај блог који је домаћин све показује да смо урадили и МП3 датотеке за њих. Можете да прегледате последњих емисија, и све је урађено помоћу јКуери. Можете рећи због свих ових анимације, у суштини. Дакле, ако имате - ако правите нови пост, Видите ове мале слидеДовнс, да је све урађено помоћу јКуери. И то Фаде - тако да такве ствари све се ради помоћу јКуери, а ви не морате да стално поново учитате страницу за навигацију сајта. Још једна сјајна ствар која је направљена помоћу јКуери је ово презентација. Ја користим опен соурце ствар звану сцроллдецк, који је неко написао на врху јКуери. Ако се добро погледа извору, можете да видите да они користе овај знак долара; зараду се користе у јКуери да значи да је функција јКуери функција. Дакле, они дефинисање омотач изнад јКуери који вам омогућава да направите презентацију овако, и можете да видите да овде они укључујући оригиналну датотеку јКуери, што је оно што ћете морати да укључите ако желите да користите јКуери у својим сајтовима. 

Додиривање о томе, како да га инсталирате? Потребно је само да одете на јКуери.цом и свалите, додајте га на веб сајту и да их укључи. Дакле, само на врху, у ХЕАД таг у ХТМЛ датотеке вашег главног ХТМЛ фајл, само имају ту линију кода са исправном верзијом за коју верзију јКуери који користите. Можете га преузети ако одете на јКуери.цом, кликните на "Преузми јКуери," а ви сте га добили. То је то. А у ствари, можемо да погледамо како то изгледа. Ако кликнете на преузети овде, јКуери је ово. То је само једна велика ЈаваСцрипт датотеку која ради све чаробне ствари за вас. Ово је минифиед верзија, која се не може прочитати уопште. Такође можете погледати на развојне верзије, која се очитава али и даље веома, веома дуго. То је доста ствари је тамо. Такође можете да се повежете домаћин верзију Гоогле тога. Тако да ће вам омогућити да се само ослањају на Гоогле-у да га обезбеди. Они пружају сваку верзију, на располагању у сваком тренутку. Тако да вероватно могу да се ослоне на Гоогле-у да га домаћин за вас. Или можете да се повежете са сопственом јКуери је најновију верзију. Они имају УРЛ који је увек ажуриран на најновију верзију. То је јКуери-најновији, и ту је један проблем са тим, а то је да ако се ажурира јКуери и неке претходне функционалности су постаје ретроградед или застареле, то не може - он може да почне да се више не подржава. Дакле, ако пишете сајта користећи верзију 1.8.2, од времена верзији 2.7 излази неке функције које сте написали не раде више. Тако да је боље да се једноставно преузети 32 Кб, стави га на својој веб страници, и то ће заувек радити. 

Ја ћу ићи напред и почну да говоре о стварном функционалности јКуери. Прва ствар је селектор. То је оно што јКуери је првобитно замишљен да пружи. И можете да кликнете на документацији да погледате детаљан документација за селектора ћу да се покрива. Идеја иза селектора је да можете да изаберете ХТМЛ елементе на страници. Елементи на страници има ИД и курсеве и друге идентификационе аспекте на њих. Ту је - они су у различитим налозима. Неки од времена они Нестед унутра једни друге. ЈКуери вам омогућава да изгради једноставне упите које преузимају елементе из страници. Онда можете да манипулишете ови елементи користе јКуери функције, што је манипулација секција ћемо доћи касније. Можете да промените, промените ХТМЛ, ЦСС можете да анимирате и додате функције које активирају у одређеним догађајима. Тако, на пример, ако се нешто кликне, желите да се нешто деси, можете да урадите помоћу јКуери као добро. И постоји велики број начина да изаберете елементе. Већина њих никада нисам користио, али постоје и оне основне, који су веома важни. Елемент селектор, на пример, ако сте тек избором ништа да је див - Ја имам код отворен за овај слајд презентације. Тако, на пример, овде је први слајд. Овде имамо див. Ако смо заиста изабрали све дивови на страници, Само ће нам дати низ свих дива који постоје у овом фајлу. Лична Селектор вам омогућава да изаберете нешто са тим ИД. Дакле, ако се, на пример, ова ствар има ИД "шта" и ако смо то урадили са # што уместо неке ИД, само би вратити низ који има један елемент, а то је да елемент странице. Такође можете комбиновати селектора овај начин тако што Само изаберите оно са личним картама које су ДИВС. Тако да. Само изаберите дивови који имају тај ИД. За класу само користите тачку, то исто што ЦСС. Потомак такође ради, па ако имате неку класу и то је угнездио елемената унутар ње - тако, на пример, постоји нека класа и има сидро ознаку да се повеже на другу страну, можете да користите ову синтаксу да преузме везу. Такође можете да изаберете више ствари одједном, само их одвојите зарезима, Селектор користите било коју желите, а ви ћете изабрати све њих одједном, у једном низу. А онда ту је и није селектор, тако да можете да изаберете све дивови да немају неку посебну класу. А то је само користан начин да се увод у то како селекција делује. Ја ћу показати неке конкретне примере у секунди. 

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

Следећа ствар је ДОМ манипулација. Након што смо изабрали елементе, ми ћемо желети да стварно раде ствари са њима. До сада нисмо гледали на то уопште, али ако погледате документацији, стварно има доста који смо могли да урадимо. У овом тренутку, ми ћемо изабрати елемената на овој презентацији и манипулишу их користи јКуери. Јер ово је имплементиран помоћу јКуери, имамо приступ јКуери библиотеку, и можемо да користимо ове функције у оквиру овог кода. Једна корисна ствар која можда не знате о је конзола. И Гоогле Цхроме је оно што ја користим. Можете да притиснете алт команду Ј или алт контрола Ј да бисте отворили конзолу. У Фирефок-Мислим да је команду Схифт к или контролни схифт К. У Сафари морате ићи промените неке поставке. Постоји веза ако бисте желели да се то уради, али ја препоручујем добијање Цхроме или Фирефок. Па хајде да отворите конзолу, то је овде. То вам омогућава да у основи само уради све што желиш. Дакле, можете само укуцати у створити променљиву зове к, к = 5, хајде да видимо шта је к + 2. Можете чак и да урадите нешто ЦС + Да видимо, к + 45, то ће бити ЦС50. Ви само можете да урадите неке типичне ствари ЈаваСцрипт. Али, можете да урадите јКуери овде. 

Па хајде да погледамо овај први аспект овде. Ми ћемо створити променљиву зове ХТМЛ, што је ниска. Има ознаку пасуса у томе, да се зове неки нови текст. Дакле, имамо овај ХТМЛ, то је неки нови текст, у параграфа додају. Сада смо заиста желите да га додате у страну. Поставио сам га, тако да ХТМЛ за овог става, овај наслов овде, се придружује број. Ако изаберете додавање ИД, а затим додати на њега ХТМЛ променљива Управо сам направио, то ће додати да је ХТМЛ на крају, после овог става ознаке. Дакле, ако то урадимо - ми смо изабрали овај пасус, и ми смо се зове додавање функцију са ХТМЛ променљиву Управо сам додао, то ће додати да је нови текст тамо на страници. Такође можемо препенд, што значи да ће ићи пре, на почетку тог елемента. Дакле, постоји неки нови текст на почетку и касније. Ја могу ићи напред и освежите да се ослободе ових ствари сам управо урадио. Али, то је пример како можете да користите препенд и додати методе да манипулишу ствари на страници, додајте мало ХТМЛ. 

Такође можете променити часове. Назад у овом стилу фајл, направио сам ово за победу класу да има црвену боју текста, неку боју позадине, текста и сенке. Изгледа грозно, али ја могу - Овај став одговара класи ИД. Тако да могу додати класу за победу. Ја могу да изврше ово у конзоли, и да ће додати ту класу, а сада изгледа грозно, као што се очекивало. ЦСС аутоматски добија применити на часове које сте - ако има за ЦСС класу, она аутоматски добија примењује ако промените класу елемента. Онда можемо да га уклоните помоћу уклањање класе. Дакле, ако имате неке унапред дефинисане класе попут црвене или истакне, а онда желите да примените на оне елементе, не морате да урадите све ЦСС стил сваки пут. Потребно је само да додате класу елемента, а онда он ће аутоматски постати - аутоматски ће изгледати прикладно за ту класу. Такође можете да уклоните ствари, па ћу да изаберете све дивови на страници и уклоните их. Шта ће то изгледати? То ће изгледати као да се ништа, па у ствари не постоји ништа лево. Моја презентација је нестао. Ја могу да освежите и вратите га, срећом, јер то је само једном ради, али то је пример уклањања, ако желите да у потпуности уништи елемент ван страници. 

Такође можете да замените, а ја ћу да изаберете све ознаке пасуса на страници и иди у њима и замени било какав текст имају у њима са само реч "тестирање." Ако то урадите, ви ћете заменити сваки пасус на страници са овим тестирањем. Да. Сви су замењени са тестирањем. Дакле, то је пример приступа текст и замени га. Такође може да преузме информације, и то је стварно супер за поља за унос. Ако имате прозор за унос да људи куцате у ствари, људи куцају ствари у њега, Овде смо одабир улаза, сваки улаз ознаку са врстом текста. У овом случају, постоји само један улаз кутија у целој презентацији, па ћемо само изаберите најпре једну, а онда позвати Вал функцију на њему. То даје вредност, а за унос, је вредност само шта год се дешава да се у њему. Дакле, ако то урадимо, то само даје ниске ствари. А ако га јос једном после писања више ствари, он се претвара у више ствари. То је један сјајан начин да приступите елементе за унос, а затим проверите, је ово исправна емаил адреса, да ли је ово важећи датум, на пример. Можете само да преузмете ствари у тренутку док су га људи куцања, а затим проверите да ли је важећа, пошаљите га назад на сервер, ти све што желиш са њим. И тако се приступити шта је у тим кутијама. 

Такође можете да измените ЦСС директно, тако да уместо додавања класа која има неке унапред дефинисане особине, можете само да додате шта год ЦСС желите да било шта. Па хајде да изаберите тело, што је целу презентацију, а боја је имовина да дефинише шта су боје је текст. Ако га промените у црвену, сав текст на страници ће се претворити у црвену. Можемо да урадимо нешто као плавом позадином, ево га, то је дивно. Можете да урадите шта год желите са овим. Коришћење ЦСС имовине, заиста можете изменити како нешто изгледа у било ком тренутку. Следећа ствар је ефекте. Ефекти су у основи исто што и допунама ЦСС, али они заиста пружају неке додатне анимације на њега. Дакле, уместо да само приказивање или нешто крију или променом боје, ви у ствари можете да га анимирани. Ево документација, ако желите да погледате на обимне документације за њу. Али, ја ћу покрити главне. Постоје прикажете и сакријете својства. Схов / Хиде Ид заправо одговара овом целу кутију, па ако сам га сакрити, само ће нестати. И ја могу да покажем опет ако желим да га врати. И вратио се. Није заиста нестати, Нисам заправо извадите из странице сам подесите ЦСС својство видљивости сакривен тако да не могу да га видим. Ту се померите нагоре и клизе, који вам омогућава да имају овај ефекат. Клизи до нестају, а након што нестане можете га повуците надоле да га врати. А сада се вратио. Ту је овај ефекат бледи, који - бледи ИД одговара овом пољу. Ако га нестати, онда ће полако нестати. Ја могу да бледи, а она ће се вратити. Можете да урадите да бледе, који је специфичан за бледе функцију. Можете да га избледети ни за једно конкретно непрозирности коју желите. Дакле, ако је полако да бледи .5, то ће постати видљива пола. Ја могу да се иде на .1, и назад у 1 да би се у потпуности поново видљиви. То је само још једна анимација коју можете да урадите. 

Ту су пребаците ефекти. Зато ћу да изаберете преклопно ИД, који одговара овом пољу, и на тај див можете позвати пребацивање, ако се то види да ће постати невидљив, ако је невидљиви то ће постати видљив поново. Тако да сам два пута звао преклопно ову функцију, први је био исто као и коже, други позив је иста ствар као представу. И можете да урадите са бледе пребацивање, који ради исту ствар, само што се заправо бледи. И иста ствар са слајда тоггле. Постоје окован ефекте, што значи ако изаберете неки елемент и само позив гомилу анимације метода на њему, Ако сте желели да избледи, а затим слајд доле, а потом сакрили, а затим бледи, он ће их учинити за редом. Тако је нестао, вратио се - из неког разлога, сакриј се није догодило. Хајде да га испробате. Да, тако је избледела, а да се затим склизнуо. А постоји много више. Можете да користите функцију анимирате да креирате сопствене анимације, што је прилично сложен, али то вам пружа могућност проширења бесконачно. Можете направити било какву врсту анимације желите. Такође можете да користите ред да стоје у редовима више анимација у исто време. Дакле, ако желите нешто да лете преко странице, слајд са горње десне до доње леве стране, можете то урадити, и само гомилу акција иду једна за другом. 

Следеће што ћемо да разговарамо је догађаја. Догађаји дозвољавају - до сада, смо сада ствари куцате у конзолу и то је један од начина да се то деси, већ на стварном страни, нећеш бити у стању да чине ствари Тип корисника у конзолу. Желите да се ствари аутоматски догодити. За то, потребно је да користите догађаје који активирају на неком одређеном догађају догоди. Можете да проверите документацију за више детаља. Па да видимо. Желимо да се сакрили или приказали оквир, али сада то дугме не ради ништа, јер нисам га спроведе још. Ја ћу да идем у стварном ХТМЛ страницу. Ево слајд. Постоји див за слајд. Она има класу слајда. Ту је текст. Сада, постоји та кутија и кутија дугме. Како би ми у ствари се то нестане? Пре свега, хајде да напишемо функцију која чини кутија ИД нестати. Ово је синтакса за фунтион, назовимо га хидеТхеБок. Она не узима никакве аргументе, јер нема аргумената да треба предузети. Можемо изабрати ИД кутије. Дакле, помоћу јКуери изаберете, можемо изабрати ИД бок, и онда само она нестаје. Хајде да избледи. Ако водио ову функцију у стварном конзоли, можемо дефинисати ову функцију, можемо назвати хидеТхеБок, и то ради. Али, ми желимо да се то деси када се притисне дугме ствари. Да бисте то постигли, морамо да користимо догађај. Да се ​​веже за неки догађај или неки одређени тастер акција догађа, морамо да изаберете елемент који ће овај догађај изазвати - или да ће покренути догађај, извини. 

Пре свега, хајде да изаберете ИД бок дугме јер је то дугме, и сада, за то дугме, желимо да створимо неку анимацију када се кликне. Тако да је ова функција клик. Она вам омогућава да повежете другу функцију на њега. Ова функција узима другу функцију као аргумент можемо проћи у хидеТхеБок функцији, и кад год то се кликне на дугме, да функција ће се аутоматски извршити. Дакле, ово ће радити ако се спасити ово, ја ћу освежим, и - један други, жао ми је. Дозволите ми да поправим ово стварно брзо. Ок. Ту смо. Сада је кутија нестаје када притиснете дугме. Такође можете променити ово само фадеТоггле, промените само да бисте сакрили или приказали оквир, и то ће такође радити превише, ако се освеже. Ми може да се сакрије, можемо га показати, и да ће наставити да ради. Још једна ствар коју можемо да урадимо јесте, ми у ствари не морају да дефинишу ову функцију хидеТхеБок пре него што позовете клик функцију. Дакле, уместо дефинисања функције и позива хидеТхеБок, само ћемо га звати ако ова ствар се кликне. Дакле, можемо га дефинисати анонимно овде, што је функција која има Јава. Можете дефинисати функције, нормално, рекли бисмо хидеТхеБок функцију са аргументима, али уместо тога, ми само можемо рећи да функционише без аргумената, покренете коврџаву протезу за дефинисање функције, затвори ту коврџаву браце, а затим једноставно дефинисати функцију овде, у првој и последњој загради заградама да одговарају на аргументе цлицк функције. Дакле, ми пролази у овој функцији, можемо да копирамо тај ред кода овде, и да ће учинити исту ствар. И сада немамо ту функцију рандом фадеТхеБок да седи около без икаквог разлога. Функција је дефинисана анонимно, нема име. То ће само извршити када кликнете на дугме кутији. Дакле, освежавајући још једном, још једном, и можете видети да то и даље ради. А то је како да креирате догађаје. 

Постоји много различитих догађаја који можемо да користимо. Идем да се вратите у конзолу да користи само вам показати како оне функционишу. Личне карте за сваку од њих одговарају свакој кутији. Дакле, ово је кутија клик ИД, ово је кључни број, а ово је миш ИД. Још једна ствар је да је ова акција функција, уместо да куцате га сваки пут, Ја сам заправо отишао напред и дефинише ову акцију функцију овде. Она ради исту ствар као и хидеТхеБок функцију. Она добија у овом пољу и да је или нестаје или бледи га унутра И зато смо у стању да га користе овде. Дакле, ако кликнете на ову клику ИД, желимо да се кутија нестане или се поново појавити. То је иста ствар као и дугме које смо имали у последњем слајду. Сада када ми то зовемо, можемо кликните на овај и кутија ће нестати, затим кликните на њу поново и кутија ће се поново појавити. То је прилично једноставно. Дупли клик ради исту ствар, осим захтева двоструки клик. Дакле, ако кликнете на њега једном и кликнете на њега опет се ништа неће догодити, али ако двапут кликнете брзо, то ће нестати. Ако двапут кликнете опет, он ће се вратити. Дакле, то је прилично једноставно. Тастатура улаз је мало чудно, ја не мислим да је то заправо ради у овом примеру јер је надоле, нагоре и притисните тастер и друге кључне активности активирати без обзира елеменат га везују за. На пример, чак и ако сам везан тастер доле да тело или нешто друго у потпуности, онда ипак би активирали без обзира - то није конкретно. Не морам да се кликом на ово и притисните тастер да би нешто нестане. Ће се активирати без обзира шта елемента Тренутно сам унутра Дакле, они не раде ствари у овом примеру јер ме не препознају као улазак улаз у див улаз са тастатуре. 

Али, ако се осврнемо на акције миша, прва је да лебди, а то може да уради нешто од тога користи ЦСС. Ако користите ЦСС, можете да га направите тако да ако пређете преко нечега, затим њен стил мења. Али користи јКуери можете да промените стилове других ствари као добро. Тако, на пример, ми ћемо звати акцију ако ми лебди над овом див. То значи да ако ми лебди над њим, онда кутија ће нестати. Ако кренемо даље од њега, кутија ће се поново појавити. Ако ми то називамо и лебди над њим, кутија не нестаје, и чим смо се удаљи, то врати. Ако зовемо ову функцију на ховер миша ИД, који одговара том пољу, онда ако пређете преко пољу, онда бок ће заиста нестати - то је фанки бити сада, али - ако се удаљи од њега, он ће се поново појавити. Сада је уназад је из неког разлога. Миш и уђе миш помера функције су донекле слична, али мало другачије. Миш унесите активира само када је миш уђе у кутију, као што се очекује. Дакле, ако се преселите у њу, она ће нестати. Али то се неће поново појавити када се удаљи, да ћете морати да се врати на њега за то да се врати. Ту је и функција миш потез, који ће се активирати кадгод миш је још присутан у кутији. Тако да ћу само наставите даље, бледи и напоље. И то је заправо логовање - чини се као да је то само бледи и ван, али то је заправо пријавити много више акција од овог, Дакле, када се удаљи само ћу наставим јер је пријављени као хиљаду њих. Можда не хиљаду. Можда пет. Евидентира више од тога. Поента је, све акције миша, има много њих. Можете да прочитате на оних других, али они се незнатно разликују, и можете да изаберете шта год вам је потребно је један за који год наменски ви покушавате да урадите. 

Следеће што ћу говорити о је Ајакс. АЈАКС, знам да нисмо покривају ЈаваСцрипт за што веће дубине ове године, па ја ћу говорити о АЈАКС уопште на минут. АЈАКС је скраћеница за асинхрони ЈаваСцрипт и КСМЛ. То је у основи, на пример, када сте на Фацебоок-у и он вам гура обавештење, то је зато што АЈАКС је покренут на Вашем бровсеру. Сваки пар секунди ваш бровсер је заправо ће Фацебоока серверима, питајући их, да ли имате нешто ново за мене, а онда се врати на вас. То вам омогућава да шаљете захтеве на сервер без стварног потребе да учита страницу. Па нормално, ако сте само помоћу ПХП и базе података, морате да освежите страницу да бисте могли да добијете нову информацију са сервера. Али користећи АЈАКС, можете повући за ту стално новим информацијама, или повуците за то када кликнете на дугме или нешто слично. Дакле, то нам омогућава да шаљете захтеве, без поновног учитавања странице, и можемо да користимо или ГЕТ или ПОСТ захтеве. 

ГЕТ захтеви су, на пример, ако се на Гоогле.цом и до К = тест. То им даје упита тест. И то је ГЕТ захтев, јер је то пролази у оним параметрима у самом УРЛ. ПОСТ захтев је као да сте их шаље поштом. То је као да сте га ставили у писму и послати га на њих, али они заправо не виде садржај. Они нису видљиви у адресу. Ви не можете директно да откуцате, морате да је пошаљете готово тајно. То је у посту. Али користи јКуери, можете да урадите ГЕТ и ПОСТ захтева много лакше него што би иначе могли да користите једноставно ЈаваСцрипт. Можете претраживати помоћу АПИ ГЕТ захтева, а такође можете да проверите информације за пријављивање. На следећој страници, ја то створио, који пита, "Шта има за ручак?" коришћењем АПИ Харварду хране, па хајде да се повуче. Ово је само пример како можете да користите јКуери да ГЕТ захтев на АПИ и добијају повратне информације од њега. Дакле, желимо да видите мени за данас, и ми желимо да видимо шта има за ручак. Ево УРЛ адреса да креирате ГЕТ захтев за јКуери. користите $ добити функцију.. Први аргумент је адреса, па шта сте упита. Онда следећи аргумент је функција која се извршава када ГЕТ захтев потпун. Дакле, пошаљите неки захтев серверу, сачекајте да се врати. Када се врати, ти ћеш да предузме неку акцију са подацима који се вратио са сервера. Идемо напред и шифра и ово. Ја нисам ни ово кодирају, намерно. Ево ТОДО. Пре свега, хајде да користите везивање догађаја тако да када се притисне ово дугме, можемо испратити ГЕТ захтев. А када се то враћа ГЕТ захтев са неким подацима, ћемо написати у овај оброк див ИД информација. Пре свега, хајде да изаберете ИД хране дугме. Када се кликне, желимо то да урадимо нешто. Хајде само да направи анонимну Фуцтион, као и раније. Да завршимо те витичасте заграде, а када се притисне дугме, желимо да пошаље ГЕТ захтев да проверите шта има за ручак. Да бисте то урадили, можемо да пишемо у $ добити.. Ово је јКуери функција, користећи знак за долар. Потребно је неколико аргумената. Први је УРЛ адреса, други је да повратни функција, функција која се зове када је тај захтев у ствари враћа. Хајде да прво изгради УРЛ. Можемо добити од АПИ Написао сам да је Давид. Одлазак овде, можемо видети да је то фоод.цс50.нет/апи/1.3/менус, а онда само прође у називима параметара које сте желели. Дакле, параметар је вредност 1 1. Изгледа као стандардног датума, почетни датум, подразумева се да је данас ако не унесете ништа, а крајњи датум такође подразумевана до данас, ако не унесете ништа. То је оно што желимо. Желимо само да добију информације за данас. 

Желимо формат да буде у ЈСОН. То је само произвољна, можете користити било који облик који желите. Можете да користите ЦСВ, ЈСОН али је ЈаваСцрипт Објецт Нотатион. То је врло лако за ЈаваСкрипт да схвате шта то значи, и можемо да одштампате лакше на тај начин. Па хајде да га тражи у ЈСОН, па хајде да захтев ручак. Дакле, оброк = ручак. Само да напишем ту УРЛ адресу, да се вратимо овде. Има менији. Први параметар је излаз = ЈСОН јер то је оно што желимо, а ви одвојите параметре са "и". Други параметар је - не сећам се. Оброк. И ми желимо оброк = ручак. Можете да тестирате ову УРЛ адресу тако да је откуцате у ваш бровсер и иде на њега. То ће вам дати неки излаз. То је само гомила ствари која је за ручак. То је у овом ружном формату. Ми желимо да га одштампате на нашој страници у бољем формату. Тако је УРЛ адреса исправна, сада само треба да напишете функцију дозвати када је захтев успешан. Ова функција ће заиста узети аргумент. То ће бити подаци. Подаци су оно што се враћа из ГЕТ захтев након ГЕТ захтев се врши. Можемо да урадимо витичасте заграде, овде ћемо писати анонимне функције да извршава, користе те податке када се вратимо информације. Дакле података, када смо уписали у овом УРЛ, то је оно што су подаци ће да изгледа. То ће бити тај огроман стринг. Али добра ствар је, Јава се може га анализирати помоћу ЈСОН.парсе функције. Дакле, хајде да креирамо нову променљиву под именом рашчланити података. И рашчланити података је низ објеката. Сваки објекат садржи информације као што су - па, хајде да погледамо. Има датум, оброк, категорију, рецепт, све ове друге ствари. Хајде да се одштампа име за сваки од њих. Да прелазили преко читавог низа ствари које се вратимо из ње, и само одштампате сваки - одштампате име сваког од њих. Ово је за петљу. 

Јава је ово било корисно синтаксу, где можете да креирате променљиву и петље преко низа, вар и ја само је итератора, па уместо да раде и = 0, И била је мања од дужине, и + +, можете једноставно да урадите вар и рашчлањен у подацима. У овом примеру, изврсавају подаци (и) ће одговарати тренутној елемент низа, стварни објекат. И ми желимо да се име из њега. Дакле, хајде да то име. Још једна ствар је, да ћемо опет имати неки јКуери. Заправо додајте је у ДИВ, овај оброк Информације див који је тренутно празна. Па хајде да изаберете. Ми ћемо користити јКуери и изаберите оброк ИД инфо ДИВ, или оброк ИД информација, извини. Желимо да се додаје на то. Ако смо урадили тест, на пример, само би га замените сваки пут. Дакле, можемо само додати ово. Садашњи елемент у низу, ми ћемо добити име од тога, и ми ћемо га додати на крају оброка див ИД информација. А онда само да изгледа чистије, такође ћемо додати новог реда, тако да није све на једној линији. Дакле, ако све буде у реду, требало би да буде добро - Пре свега, кад год то се кликне на дугме, то ће испратити ГЕТ захтев на овај УРЛ. Када се подаци врати од њега, он ће га анализирам, претворити га у ЈСОН, петља по целом низу заступа те податке, а затим додати име и прелом реда за сваки ред у овој ИД инфо оброк који је претходно празан. Дакле, да се вратимо на ову страну, ми ћемо освежити, клик, сазнати - не ради. То је несрећна. И ту ступа на сцену отклањање грешака Индек.хтмл, линија 1. То је занимљиво. У реду, па, уместо да проводе време радећи ово, ја ћу да повуците уради фајл који имам, који је завршен верзија. Нисам сигуран која је разлика, али можемо само да уместо тога отворити ово. И идемо на АЈАКС, а то би требало да исправно ради. То је оно што је било за ручак данас, у одређеном редоследу, са наводнике око њега, тако да није најлепша. Али, очигледно, ако сте радили за ово финале пројекта, ти би да изгледа боље. Али, то је само једноставан пример како да урадите ГЕТ захтев. И ако погледамо стварне код, претпостављам, прилично сам сигуран то је још увек прилично исти. Ох, заборавио сам да га конвертујете у стринг, то је то. Не, то је још увек не ради. Без обзира, ово је стварни број завршених за шта то треба да изгледа, и то ради исту ствар као и оно што сам управо спроводи. Када кликнете на дугме, она користи ГЕТ ЈСОН да аутоматски анализирам податке. Потребно податке натраг из ње и петље кроз цео низ и штампају се - шта год има за руцак данас, како се зове, и додаје линије паузе након сваког реда. Тако можете користити ГЕТ функцију. 

Такође можете да користите ПОСТ, што ја нисам имао времена да напишем пример за то, али можемо да погледамо документацију. Ако погледате јкуери.пост, можете да видите да је скоро иста ствар. Имате УРЛ адресу, али уместо доношења параметре помоћу - само их стављајући у низу за самог УРЛ, морате да прође у овом променљиве података који је у основи низ, речник који Мапе параметри вредности. Ти то проћи у, и да их шаље у коришћењу ПОСТ. А када то имате, онда можете имати функцију успех да извршава када подаци врати. Иначе, потпуно је исти. Дакле користи ПОСТ, можда ћете желети да користите ПОСТ, на пример, уколико имате форму за унос пустите људе уноса лозинки у њега, и шаље те лозинке на на свој бацк-енд сценарио, да провере у бази података да ли је корисник важи или не. Можете да урадите све користи јКуери уместо да освежите страницу уопште. Тако сам спроведен у блогу који сам вам показао раније. Ако одемо на крај портала и одјавите, пријавите се, Пријави се не ради. Па, само да је отворим у новом прозору. Овде постоји лозинка, а хтео сам да откуцате нешто насумично. То не ради, али можете да видите да ми нисмо заправо треба да освежите страницу уопште. Код, ако желите да погледате, Све је доступно овде. Тако код сам написао негде прошле године. Као што можете видети овде, ми слање ПОСТ захтев. Имам фајл под називом логин.пхп у задњем крају, која проверава да ли је важећа лозинка. Параметри су у Пролазимо лозинка, мапирани улаз који је у овој поље за унос тренутно. А када се подаци не врати, ми смо проверили. Ако су подаци лажни, онда кажемо погрешну лозинку, гурните га доле, и само она нестаје после тога. Иначе, ми смо учитали Админ страну. И то је све урађено помоћу ЈСОН. У овом многим линијама кода, само може да прође податке на леђа крај, проверите да ли је то тачно, проверите да ли сте пријављени исправно, и заправо реагују на њега, преусмеравање особу на правој страници или не допуштајући им да се пријавите и да им кажемо да су имали погрешну лозинку. Дакле, то је пример како можете да користите јКуери ПОСТ да пошаљете захтев постављали на задњем крају, провере да ли је неко пријављен исправно. 

У реду, тако да су сви примери које сам имао, и све ствари које сам желео да покрије. То су главне ствари које јКуери омогућава да урадите: изаберите елементе, модификовати их користе манипулацију ДОМ, можете да додате ефекте, активирајте ствари на одређеним догађајима, и такође не АЈАКС захтеве врло лако и једноставно. Дакле, хвала вам што сте дошли, или гледање, и ако имате било каквих питања, само ми јавите. Да? [Студент] Назад кад си се појавила, имали ЈСОН после ПОСТ захтева у наводницима, и само сам се питао шта је урадио. >> Да, видим. Питање је да, у примеру сам управо показао, ту је била реч ЈСОН наводницима око - Ја ћу га поново подићи - око ПОСТ функције. Само га вуче горе да покаже. Дакле, ево овај пост захтев, а ту је тај ЈСОН наводницима. То само дефинише шта очекујемо излаз да буде. Дакле, ако прођемо у ЈСОН као очекивани тип података, то није услов, али ако то прође у, затим подаци ће аутоматски бити анализирати као ЈСОН. Тако да не морате да позовете ЈСОН парсати функцију на њему, само ће се десити аутоматски. А ако погледамо документације за ПОСТ, ту је овај тип података променљива, тип података који се очекује од сервера. Она је по подразумеваним интелигентног Претпостављам да може бити погрешно, тако да можете да га оставите празно, али то је само тип података у кодирање које користите, да ли је ЈСОН или КСМЛ или нешто друго. 

Има ли још питања? У реду. Уколико имате било каквих питања, слободно ми е-маил на всхекхават@цоллеге.харвард.еду, и слајдови и број треба да буде доступан онлине ускоро. Срећно са завршних пројеката, надам се да користите јКуери. [ЦС50.ТВ]