[Powered by Google Translate] [Семинар: Jquery] [Vipul Shekhawat, Harvard University] [Това е CS50.] [CS50.TV] Ако сте заедно след като у дома си, всъщност можете да получите достъп до моите слайдове онлайн , като отидете на този линк. Това е TjjRWj, на bit.ly. Можете също така просто отидете на URL директно, което е cloud.cs50.net / ~ vshekhawat, което е името ми, и Jquery. Аз силно препоръчваме да следват заедно, ако гледате у дома, и ако сте тук, също така, защото това е доста интерактивна презентация. 

Така че днес аз отивам да се говори за JQuery, и на първия въпрос е, какво е JQuery? Тази година, знам, че момчетата не са обхванати JavaScript най-подробно, тъй като имаме в последните години. JavaScript е, на първо място, само на страната на клиента език която се използва за стартирате скриптове и код на машината на всеки потребител. Така че имате сървър, който осигурява уеб страници за хората, но може да искате да направите нещо за тяхната машина, поиска тяхната машина да изпраща заявки към вашия сървър на всеки 30 секунди, или нещо подобно. Можете да направите това използвайки JavaScript. JQuery само осигурява по-голяма функционалност на върха на JavaScript , който прави допълнителни неща за вас. Ако се вгледате в съдържанието на върха, , който описва някои от нещата, които сте в състояние да направи. Така че като цяло, тя е създадена през януари 2006 година. За първи път е замислен през август 2005 година. Той е бил около продължение на няколко години, и това е наистина част от новото движение Web 2.0 че е направена в интернет е толкова гладка. Това е най-широко използваният JavaScript библиотека. Над 19,6 милиона уеб сайтове са го използвате, както и използване на все още нараства според builtwith.com, които, както изглежда, през последните години, току-що е бил непрекъснато нараства доста линейно. Сред топ 10 милиона обекти, все още има - около 40% от тях са го използва в момента. Facebook използва, много други сайтове в момента го използвам. Можете да погледнете тези статистически данни за собствения си, ако искате. И вие може да каже, че е легитимно, защото има фондация и 13 членове на управителния съвет, заедно с екип от 20 души, които работят върху него редовно. Така че това е много широко използван, той има. Орг URL, това е фантазия, тя има съпътстващи дейности за други неща, така че това е голяма работа. 

Защо трябва да го използвам? JQuery е много лек. Това означава, че не е огромен файл. Можете да изтеглите на minified файл, който е без всички празно пространство и коментари, и е само на 32 кБ. Така че е трудно да се хвърля само върху вашата уеб страница и просто да започнете да го използвате. То също е много ефективно писмено, така че не заема много - тя не забави вашия сайт много, когато го използвате. Тя ви позволява да прилагат неща, които преди това са били неприложими. Има някои аспекти на функционалност, като създаване на анимации, които обикновено ще бъде много, много трудно да се направи. Но в Jquery те са всъщност много проста. И има някои неща, които са досадно да се направи, възможно в JavaScript, като изпращане на POST заявка, но да се изпрати искане до даден сървър, трябва да напишете пет или шест или седем реда код. Сега може да го направи в един ред с код, в едно извикване на функция. Това наистина опростява много от нещата, които правиш. И всички готини деца го използвате. С това, аз имам пред вид мен. В окончателния си проект миналата година, което е news.whrb.org, който е за радиото, съм създал този блог който е домакин на всички показва, че сме правили и mp3 файлове за тях. Можете да разглеждате последните предавания, И всичко това е направено с помощта Jquery. Можете да кажете поради всички тези анимация, по същество. Така че, ако имате - ако създавате нов пост, виждате тези малки slideDowns;, че всичко е направено използване JQuery. И това избледняват - така че такива неща е направено използване JQuery, и не е нужно постоянно да се презарежда страницата за навигация на сайта. Друго готино нещо, че е направен използвайки Jquery е тази презентация. Аз съм с това отворено нещо източник наречен scrolldeck, която някой пише на върха на JQuery. Ако действително изглежда при източника, можете да видите, че те използват този знак за долар; доларови знаци се използват в Jquery да означава, че функцията е JQuery функция. Така че те са определяне на обвивката на върха на JQuery , която ви позволява да направи презентация по този начин, и можете да видите, че те са тук, включително на оригиналния файл Jquery, което е това, че ще трябва да се включат, ако искате да използвате JQuery в собствените си сайтове. 

Докосването на това, как да го инсталирате? Можете просто да отидете на jQuery.com и изтеглете файла, Добавете го към уеб директория и да я включите. Така че просто на върха, в главата тагове на HTML файла на вашия основен HTML файл, просто трябва тази линия на код с правилната версия, за която версия на JQuery, който използвате. Можете да го изтеглите, като отидете на jQuery.com, кликнете върху "Изтегляне Jquery", а вие го имате. Това е всичко. И всъщност, ние можем да погледнем как изглежда. Ако кликнете върху изтеглите от тук, JQuery е това. Това е просто един голям файл JavaScript, който прави цялата магия неща за вас. Това е minified версия, която не се чете на всички. Можете също така да погледнете развитието версия, която може да се чете но все още е много, много дълъг. Това е много неща там. Можете също така да се свържете домакин версия на Google от него. Така, че ще ви позволи да се разчита само на Google да я предостави. Те осигуряват всяка версия на играта, на разположение по всяко време. Така че вероятно можете да разчитате на Google, за да бъде домакин за вас. Или можете да се свържете собствена Jquery най-новата версия. Те разполагат с URL, че винаги е обновена до последната версия. Това е Jquery-късно, а има и един проблем с това, което е, че ако осъвременяване Jquery и някои от предишните функционалност те са става Увреденото или отхвърлена, тя не може - то може да започне да не се поддържа повече. Така че, ако ти напиша уеб сайт използва версия 1.8.2, По времето, когато версия 2.7 излезе някои от функциите, които сте написали вече не работят. Така че е по-добре просто да изтеглите файла 32 KB, сложи го на вашата уеб страница, както и че ще работи вечно. 

Аз ще отида напред и да започнем да говорим за реалната функционалност на JQuery. Първото нещо е селектори. Това е, което Jquery първоначално замислен да осигури. И вие можете да кликнете върху документация, за да разгледате на подробна документация за селектори, на които ще трябва да се покрива. Идеята селектори е, че можете да изберете HTML елементи на страницата. Елементи на една страница имат документи за самоличност и класове и други идентифициращи аспекти към тях. Има също така - ñ това са в различен ред. Някои от времето те са вложени в друг. JQuery дава възможност за изграждане на прости заявки, които извличат елементи от страницата. След това можете да манипулират тези елементи, използващи по закона за функциите, , която е част манипулация ние ще стигнем до по-късно. Можете да промените HTML, CSS промените, можете също да се съживи и добави функции, които активират на определени събития. Така, например, ако нещо се натисне, искате нещо да се случи, можете да направите това използвайки Jquery, както добре. И има огромен брой на начина за избор на елементи. Повечето от тях никога не съм, но има основните,, които са доста важни. Елементът селектор, например, ако сте просто изберете нещо че е Div - Всъщност имам кода отворена за тази презентация. Така, например, ето първия слайд. Тук имаме DIV. Ако ние действително изберете всички Divs на страницата, тя просто ще ни даде масив от всички Divs, които съществуват в този файл. The ID селектор ви позволява да изберете нещо с даден ID. Така че, ако това, например, това нещо има ID "какво" и ако сме направили това с какво # вместо някои ID, тя просто ще върне масив, който има един елемент и това е, че елемент на страницата. Можем също така да комбинирате селектори този начин от наличието изберете само неща с идентификатори, които са Divs. Така че, да. Само изберете Divs, които имат, че ID. За клас просто използвате точка, това е едно и също нещо като CSS. Потомък също работи, така че, ако имате някаква класа и той е вложен елементи в него - така, например, има някакъв клас и има етикет котва за връзка към друга страница, можете да използвате този синтаксис за извличане на връзката. Можете също така да изберете няколко неща наведнъж, просто ги разделят със запетаи, използвате всеки избор, който искате, и вие ще изберете всички от тях едновременно, в един масив. И след това има също така не селектор, така че можете да изберете всички Divs че не е нужно някой конкретен клас. И това е само един полезен начин да се получи едно въведение за това как работи тази селекция. Ще покажа някои конкретни примери в секунда. 

Разширено селектори са - това са само няколко примера. Има десетки такива, но ако искате да изберете всички изображения тагове в рамките на някакъв елемент, тогава просто правим: изображение. Ако искате да изберете дори елементи, например, ако има 20 от тях, искате да изберете 0, 2, 4, 6 и така нататък, да направите: дори, или можете да направите: странно. Това са псевдо селектори, което означава, че те всъщност изчисли всеки друг елемент, а не просто отиваш и изберете всички от тях. Можете също така - всеки елемент може да има специфични характеристики. Така например, клас = център е атрибут. За тази котва маркер, HREF, хипертекст препратка, е атрибут също. Така че можете да изберете нещо, което линкове към конкретна страница или просто - това е наистина цяло. Можете да избирате нещо, всеки атрибут, който искате. И тогава, също така, атрибут съдържа. Ако, например, искаше да изберете всички входни елементи , които имат думата "пас" като име на тях, ако дадена страница има един блок за въвеждане на текст това се нарича "парола", това ще е един начин бихте могли да изберете това. А има и още много други. Можете да отидете напред и да погледнете в документацията и да видим конкретни примери за това как тя работи. 

Следващото нещо е DOM манипулация. След като изберете елементи, ние ще искате наистина да правят неща с тях. Досега не сме разглеждали, че на всички, но ако се вгледате в документацията, има наистина много неща, които бихме могли да направим. В този момент, ние ще изберете от елементите на тази презентация и манипулират ги използвате JQuery. Тъй като това се осъществява чрез използване на JQuery, ние имаме достъп до JQuery библиотека, и ние можем да използваме тези функции в рамките на този код. Едно полезно нещо, което може би не знаете, е на конзолата. И Google Chrome е това, което аз съм с помощта. Можете да натиснете ALT команда J или ALT контрол J, за да отворите конзола. Във Firefox Мисля, че е команда смяна K или контрол на смяната K. В Safari вие трябва да отидете промените някои настройки. Има една връзка, ако искате да го направя, но аз препоръчвам получаване на Chrome или Firefox. Така че нека да се отвори конзолата, че е тук. Тя ви позволява основно само да направя всичко, което искате. Така че можете просто да напишете в създадете променлива наречена X, х = 5, нека да видим какво х + 2 е. Можете дори да направи нещо подобно CS + Да видим, х + 45, който ще бъде CS50. Можете просто да се направят някои типични неща JavaScript. Но можете да направите Jquery тук. 

Така че нека да разгледаме този първи аспект тук. Отиваме да се създаде променлива наречена HTML, който е низ. Тя е с точка етикет в него, това се нарича някакъв нов текст. Така че ние имаме този HTML, това е някакъв нов текст в точка тагове. Сега ние всъщност искаме да го добавите към страницата. Да го настроя така, че HTML за този параграф, тази титла тук, е добавяне ID. Ако изберете за добавяне ID и след това да приложи към него на HTML променлива Току-що създадох, това ще добавим, че HTML в края, точно след тази точка етикет. Така че ако направим това - ние избрахме този параграф, и ние сме нарича функция за добавяне на HTML променлива Аз просто добавя, това ще добавим, че новият текст там на страницата. Можем също така да добавя нищо, което означава, че ще отида и преди, в началото на този елемент. Така че има някакъв нов текст в началото и след това. Мога да отида напред и да обновите да се отървете от тези неща аз току-що направихте. Но това е пример за това как можете да използвате добавя нищо и прилага методи да манипулира неща на страницата, добавете малко HTML. 

Можете също да промените класове. Обратно в този стил файла, които съм създал тази за победата клас , който има червен цвят на текста, някои цвета на фона, и сянка текст. Тя изглежда отвратително, но всъщност мога да - настоящия параграф съответства на клас ID. Така че мога да добавя класа за победата. I може да изпълни това в конзолата, и че ще добави този клас, и сега изглежда отвратително, както се очаква. The CSS автоматично получава прилага към класовете, че ти - ако има CSS за един клас, той автоматично получава прилага ако смените класа на елемент. След това може просто да го премахнете използвайки Remove Class. Така че, ако имате някои предварително определени класове като червено или маркирано, и след това искате да приложите тези, на елементи, не е нужно да се свърши цялата CSS стайлинг всеки път. Можете просто да добавите този клас до един елемент, а след това автоматично ще стане - той автоматично ще изглеждат подходящи за този клас. Можем също така да премахнете неща, така че аз ще да изберете всички Divs на страницата и да ги премахнете. Това, което е, че ще изглежда? Това ще изглежда като нищо, така че всъщност нищо ляво. Презентацията ми е отишъл. I могат да се освежат и да го върне обратно, за щастие, просто защото се показват, след като, но това е един пример за премахване, ако искате напълно да унищожи елемент от страницата. 

Можете също така да презапишете, и аз отивам да изберете всички параграфи тагове на страницата и влез вътре и ги замени текст, каквото имат в тях само с думата "изпитване". Ако направите това, вие ще замени всяка точка на страницата с този тест. Да. Всички те са заменени с изпитване. Така че това е един пример за достъп до текста и да го презаписване. Можете също така да извлече информация, и това е наистина страхотно за полета за въвеждане. Ако имате поле за въвеждане, че хората са пишете неща в, хора пишете неща в нея, Тук ние изберете входа, всеки вход етикет с вида на текста. В този случай, има само едно поле за въвеждане в цялата презентация, така че ние просто ще изберете първия, и след това ще извикаме функцията Val върху него. Това връща стойността, а за полето за въвеждане, стойността е точно каквото се случва да бъде вътре в нея. Така че, ако ние правим това, той просто връща низа неща. И ако ние го наричаме отново след писмено повече неща, тя се превръща в повече неща. Това е един чудесен начин за достъп до елементите на полето за въвеждане, а след това проверете, е тази валиден имейл адрес, е тази валидна дата, например. Можете просто да изтеглите неща незабавно, тъй като хората са я напишете, и след това се проверява дали тя е валидна, го изпрати обратно на сървъра, правиш каквото си искаш с него. И това е начина за достъп до това, което е вътре в тези кутии. 

Можете също така да променят CSS директно, така че вместо да се добави клас, който предлага няколко предварително зададени свойства, може просто да добавят каквото и CSS желаете да нищо. Така че нека да изберете тяло, което е цялата презентация, и цвят е собственост, която определя как цветовете на текста е. Ако го смените с червено, целият текст на страницата ще се превърне в червен. Ние можем да направим нещо като син фон цвят, Ето ни, тя е красива. Можете да направите всичко, което искате с това. Използване на имота CSS, наистина може да се променя как изглежда всичко по всяко време. Следващото нещо е ефекти. Ефекти са едни и същи нещо като модифициране на CSS, но тя предлага някои допълнителни анимация към него. Така че, вместо просто да показва или крие нещо или промяна на цвета, всъщност може да се направи анимационен. Ето и документация, ако искате да погледнете на обширна документация за него. Но аз ще обхваща основните от тях. Има шоуто и свойства се скрие. Покажи / скрий ID действително отговаря на това цялата кутия, Така че, ако аз го скрие, тя просто ще изчезне. И мога да го покажа отново, ако искам да го върна. И това е обратно. Тя всъщност не изчезне, На практика не съм го свалите от страницата, просто настроите собственост на CSS на Скрит така че не може да я види повече. Е там също се плъзга нагоре и се плъзга надолу, която ви позволява да имат такъв ефект. Той се плъзга до изчезне, а след това изчезва можете да го плъзнете надолу, за да го върна. И сега се завръща. Има също така и това избледняват ефект, който - избледняват ID съответства на това поле. Ако го изчезнат, то ще изчезне бавно. Също така мога да го избледняват, и тя ще се върне. Можете също така да избледняват до, която е специфична за избледняват функция. Можете да го избледняват с конкретна непрозрачност, който искате. Така че, ако тя изчезне бавно до 0,5, тя ще се превърне половината видими. Аз мога да се отиде до 0.1, и обратно до един, за да го вижда напълно отново. Това е просто още една анимация, която можете да направите. 

Там са и тумблери ефекти. Така че аз ще изберете превключване ID, което съответства на това поле, и на тази дивизия можете да се обадите превключване а ако това е видимо, че ще стане невидим, ако е невидим ще стане видим отново. Така че аз просто нарича този метод за превключване функция два пъти; първият бе едно и също нещо като кожа, втората покана е едно и също нещо като шоу. И вие можете да направите това и с избледняват превключване, което прави същото нещо, с изключение всъщност избледнява. И едно и също нещо с пързалка превключвате. Има верижни реакции, както и, което означава, ако изберете елемент и просто се обадете куп анимация методи върху него, ако искаш да изчезнат, след това плъзнете надолу, и след това се скрие и след това избледняват, тя ще ги направи в един ред. Така изчезна, се върна - по някаква причина, кожата не се случи. Нека да го изпробвате. Да, така че избледнели и след това го плъзна далеч. И има много повече. Можете да използвате функцията за живата да създадете свои собствени анимации, която е доста сложна, но това ви дава безкрайна разтегливост. Можете да направите всякакъв вид анимация искате. Можете да използвате и опашка, за да се редят на опашки няколко анимации в даден момент. Така че, ако искате нещо да лети по страницата, слайд от горния десен към долния ляв, можете да направите това, и просто трябва един куп на действия, едно след друго. 

Следващото нещо, което ние ще говорим за е събития. Събития позволите - до момента, ние току-що пишете неща в конзолата и това е един от начините да стане това, но в условията на реален страница, че няма да бъде в състояние да направи нещата Тип участник в конзолата. Вие искате нещата да се случват автоматично. За това ще трябва да използвате събитията, които активират по някои някои случи събитието. Можете да проверите документацията за пълните подробности. Така че нека да видим. Искаме да скриете или покажете на наказателното поле, но точно сега този бутон не прави нищо, защото аз не го прилага, все още. Аз ще отида на действителната HTML страница. Ето и слайд. Има една дивизия за слайд. Той има класа на слайд. Има текста. Сега, има една кутия и бутон кутия. Как бихме могли да всъщност правят това изчезват? На първо място, нека да напишете функция, която прави ID кутия изчезват. Това е синтаксис за funtion, нека просто го наречем hideTheBox. Тя не взема никакви аргументи, защото няма аргументи, които да бъдат предприети. Ние можем да изберете ID кутия. Така с помощта на JQuery изберете, ние можем да изберете ID поле, и след това просто да изчезне. Нека това изчезнат. Ако ние се завтече тази функция в действителната конзола, бихме могли да определят тази функция, можем да наречем hideTheBox, и тя работи. Но ние искаме това да се случи, когато бутонът е действително натиснат. За да направите това, трябва да използваме едно събитие. За да обвържете събитие с някои специфични бутон или някои случи действие, ние трябва да изберете елемент, че събитието ще се задейства - или, че ще задейства събитие, съжалявам. 

Така че, на първо място, нека да изберете ID бутона кутия защото това е бутона, и сега, за този бутон, искаме да създадем една анимация, когато кликване върху него. Така че тази функция клик. Тя ви позволява да се свързват друга функция към него. Тази функция може да отнеме друга функция като аргумент Ние можем да минем през функцията hideTheBox, и всеки път, когато този бутон е натиснат, тази функция автоматично ще изпълни. Така че това ще работи, ако запазите това, ще освежите, и - едно второ, съжалявам. Позволете ми да се определи това наистина бързо. Добре. Ето. Така че сега кутията изчезва, когато натиснете бутона. Можем също така да промените това просто да fadeToggle, го променят само за да скриете или покажете на наказателното поле, и това също ще работи също, ако обновите. Ние можем да го скрие, ние можем да го покаже, и че ще продължи да работи. Друго нещо, което можем да направим, е, че ние всъщност не трябва да определи тази функция hideTheBox преди да се обадите на клик функция. Така че, вместо на определяне на функцията и призова hideTheBox, ние само ще го наречете, ако това нещо се натисне. Така можем да определим това анонимно тук, което е функция, която има JavaScript. Можете да дефинирате функция; нормално, бихме казали hideTheBox функция с аргументи, а вместо това, ние можем да кажем, функционира без аргументи, стартирате фигурна скоба да се дефинира функция, близо, че фигурна скоба, и след това просто се определи функцията тук, в рамките на първата скоба и последната скоба които отговарят на аргументите на клик функция. Така че ние сме преминаване в тази функция, ние можем да копирате този ред на кода точно тук, и че ще направи точно същото нещо. И сега ние нямаме тази случайна функция fadeTheBox че е около заседание без видима причина. Функцията е определена анонимно, не няма име. Тя ще изпълнява само когато кликнете върху кутията бутона. Така освежаващо още веднъж, още веднъж, и ще видите, че тя продължава да работи. И това е, как да създавате събития. 

Има много различни събития, които можем да използваме. Отивам да се върнете към използването на конзолата просто да ви покажа как те работят. На идентификатори за всяка от тези съответстват на всяка кутия. Така че, това поле е кликване ID, това е от ключово значение ID, а този е мишка ID. Още едно нещо е, че има това действие функция; вместо да го пишете всеки път, Аз всъщност отидох напред и определено това действие функция тук. Той прави същото нещо като hideTheBox функция. Той получава това поле и или го отслабва или да го избледнява инча И затова ние сме в състояние да го използвате тук. Така че, ако кликнете върху тази цел кликнете ID, ние искаме да направим кутията изчезват или се появят отново. Това е едно и също нещо като бутон, който имахме в последния слайд. Сега, след като сме се обадя, че можем да кликнете върху това и кутията ще изчезне, След това кликнете върху него отново и полето ще се появи отново. Това е доста проста. Кликнете два пъти прави същото нещо, освен това изисква двойно щракване. Така че, ако кликнете върху него веднъж и кликнете върху него отново, нищо няма да се случи, но ако кликнете два пъти бързо, тя ще изчезне. Ако кликнете два пъти отново, той ще се върне. Така че това е доста проста. Клавиатурата е малко странно, аз не мисля, че тя наистина работи в този пример защото надолу, нагоре и натиснете клавиша и други ключови действия активирате, без значение кой елемент да го свърже. Например, дори ако обвързани надолу към тялото или нещо друго изцяло, тогава все още ще активирате без значение - това не е специфична. Не е нужно да бъде като кликнете върху това и да натиснете клавиш, за да направи нещо да изчезне. Той ще бъде активирана, независимо от това, което съм в момента елемент инча Така че те всъщност не работят в този пример защото той не ме позна, тъй като въвеждането принос в Div клавиатура. 

Но ако се вгледате в действия на мишката, първата е мишката, и той може да направи някои от това, като използвате CSS. Ако използвате CSS, можете да го създадете, така че ако мишката върху нещо, след това му се промени. Но използването на JQuery можете да промените стила на други неща. Така, например, ние пак ще се обадим действия, ако ние мишката върху този DIV. Това означава, че ако ние мишката върху него, след това кутията ще изчезне. Ако се отдалечим от него, полето ще се появи отново. Ако ние наричаме това и мишката върху него, кутията не изчезва, и веднага щом се отдалечим, тя се връща. Ако ние наричаме тази функция висене на мишката ID, което съответства на това поле, след това, ако ние мишката върху полето, след това кутията действително ще изчезне - това е като фънки точно сега, но - ако се движат далеч от нея, тя ще се появи отново. Точно сега това е назад по някаква причина. Мишката въведете функции миши ход са малко подобни, но малко по-различен. Мишка влиза активира само когато мишката влезе в полето, както се очаква. Така че, ако се движи в нея, тя ще изчезне. Но тя няма да се появи отново, когато се отдалечавате, ще трябва да се върнат на него, за да се върне. Освен това има и функцията на мишката ход, който ще активира всеки път, когато мишката е дори присъства в кутията. Така че просто ще продължи да става, избледняване и навън. И това е всъщност излиза - изглежда, че това е просто замира и навън, но всъщност излиза много повече действия, отколкото този, Така че, когато се движат далеч тя просто ще продължа, защото сте влезли като хиляди от тях. Може би не хиляда. Може би пет. Тя регистрира повече от това. Въпросът е, че всички действия на мишката, има много от тях. Можете да прочетете на други такива, но всички те са малко по-различни, и можете да изберете една от двете трябва за което от двете конкретна цел, което се опитвам да направя. 

Следващото нещо, което няма да ви говоря за е AJAX. AJAX, знам, че не покрива JavaScript в толкова задълбочено тази година, така че просто ще говорим за AJAX като цяло за една минута. AJAX е съкращение от Asynchronous JavaScript и XML. Това е основно, например, когато сте на Facebook и те тласка уведомление, това е, защото AJAX се изпълнява на вашия браузер. На всеки няколко секунди вашия уеб браузър е всъщност ще сървърите на Facebook, с молба, имате ли нещо ново за мен, и след това се връща при вас. Това ви позволява да изпращат заявки към сървър без да се налага да се зареди страницата. Така че нормално, ако сте просто използвате PHP и база данни, ще трябва да обнови страницата, преди да може да получи нова информация от сървъра. Но използването на AJAX, можете да дръпнете за тази нова информация непрекъснато, и не дърпайте за него, когато щракнете върху бутона или нещо подобно. Така че, това ни позволява да изпращат искания без презареждане на страницата, и ние можем да използваме или GET или POST заявки. 

GET заявки, например, ако за да Google.com и да направим Q = тест. Това им дава заявка за тест. И това е GET искане, защото това е преминаване в тези параметри в самия URL. A POST искане е все едно да ги изпратите по пощата. Това е като да го сложи в писмото и го пращам на тях, но те всъщност не виждат съдържанието. Те не са видими в URL. Вие не можете директно да го въведете, трябва да го изпрати почти тайно. Това е в пост. Но използването на JQuery, можете да направите GET и POST искания много по-лесно, отколкото обикновено може да използвате просто JavaScript. Вие може да задава въпроси APIs използва GET искания, и можете да проверите данните за вход. На следващата страница, съм създал този, който пита: "Какво има за обяд?" използване на Harvard храна API, така че нека да дръпнеш нагоре. Това е само един пример за това как можете да използвате JQuery да направите заявка за получаване на API и да получите информация обратно от него. Така че ние искаме да видим в менюто за днес, и ние искаме да видим какво има за обяд. Тук е URL да се създаде GET искане в Jquery. използвате $. получите функция. Първият аргумент е URL, така че точно това, което заявки. След това на следващия аргумент е функция, която изпълнява, когато GET искане е завършена. Така ще Ви изпрати някои заявка към сървъра, чакай го да се върне. Когато се върне, ти започваш да се вземат някои мерки, с данните, че се е върнал от сървъра. Да вървим напред и да кодира това, както добре. Аз не кодира това или, нарочно. Тук е TODO. На първо място, нека използваме свързването събитие така че, когато този бутон е натиснат, ние изпращаме една GET заявка. И когато това GET заявка връща с някои данни, ние ще го напиша в тази храна Div информация ID. На първо място, нека да изберете ID бутона храна. При кликване върху него, ние искаме да направим нещо. Нека просто го направи анонимно fuction, както преди. Да наслагвате тези фигурни скоби, и когато този бутон е натиснат, ние искаме да изпрати заявка за получаване на да се провери какво има за обяд. За да направите това, ние можем просто да напишете в $. Точка. Това е JQuery функция, използване на знака за долар. Тя отнема няколко аргументи. Първият от тях е URL, вторият е на обаждане функция, функция, която се нарича когато това искане всъщност връща. Нека просто да се изгради на URL първи. Ние може да го получи от API, че David написах. Отивате тук, можем да видим, че това е food.cs50.net/api/1.3/menus, и след това просто преминават в имената на параметрите, които бихте искали. Така че едно е параметър стойност 1. Тя изглежда като стандартен дата, начало, по подразбиране е днес ако не въведете нищо, а крайната дата също подразбиране до днес, ако не въведете нищо. Това е, което искаме. Искаме просто да получите информация за днес. 

Искаме форматът да бъде в JSON. Това е просто произволно; можете да използвате всяка форма, която искате. Можете да използвате CSV, но JSON е JavaScript Object Notation. Това е много лесно за JavaScript да се разбере какво означава това, и ние можем да го отпечатате по-лесно по този начин. Така че нека си го поискат в JSON, и нека обяд поискване. Така хранене = обяд. Само да напиша, че URL, да се върнем тук. Има менюта. Първият параметър е продукция = JSON защото това е, което ние искаме, а вие се разделят на параметрите с "и". Вторият параметър е - аз не си спомням. Meal. И ние искаме обяд хранене =. Можете да тествате този URL, като я напишете в браузъра си и ще го. Тя ще ви даде някаква продукция. Това е просто един куп неща, които има за обяд. Тя е в този грозен формат. Искаме да го отпечатате върху нашата страница в по-добра форма. Така че URL е правилен, сега ние просто трябва да напише функция да се обади, когато искането е уважено. Тази функция ще вземе реално аргумент. Това ще бъде данни. Данните са това, което се връща от GET искане след GET искане е направено. Ние можем да направим на фигурни скоби; тук пишем анонимно функция които изпълнява, като се използват тези данни, когато получите информация обратно. Така данните, когато сме въвели в този URL, това е, което данните ще изглежда така. Той ще бъде този огромен низ. Но хубавото е, JavaScript може да го анализира с помощта на JSON.parse функция. Така че нека да създадете нова променлива наречена разбора данни. , И го анализира данни е масив от обекти. Всеки обект съдържа информация като - добре, нека да разгледаме. Тя е с дата, място за хранене, категория, рецепта, всичко това други неща. Така че нека просто да отпечатате името на всеки от тях. Нека обхождане на целия масив от нещата, които ние се върна от него, и просто разпечатате всеки един - отпечатване на името на всеки от тях. Това е за линия. 

JavaScript е полезна синтаксис, където можете да създадете променлива и линия над масив, и VAR I е само на итератор, така че вместо да се налага да правя VAR I = 0, аз бях по-малко от дължината, аз + +, може просто да правя аз в Var анализирани данни. В този пример, анализирани данни (I), ще съответства на текущия елемент на масива, на самия обект. И ние искаме да получите името от него. Така че нека просто направи име. И последното нещо, което е, ние ще имаме някои Jquery отново. Всъщност го добавите към Div, тази дивизия хранене информация, че е празна. Така че нека да изберете това. Ще използваме Jquery и изберете храна ID информация дивизия, или ID хранене информация, съжалявам. Искаме да приложи към това. Ако сме направили тест, например, тя просто ще го презапишете всеки път. Така че ние може просто да добавите това. Сегашната елемент в масива, ще получите името от него, и ние ще го добавите към края на хранене Div информация ID. И след това просто да го правят да изглежда по-чисти, ние също така ще добавите нов ред, така че не е всичко на един ред. Така че, ако всичко върви добре, че трябва да бъде добър да - На първо място, когато този бутон е натиснат, той ще изпрати заявка за получаване на този URL. Когато данните се връща от него, той ще го направи разбор, превърната в JSON, линия за целия масив, представляващ тази данни, и след това добавете името и нов ред на всеки ред в тази ID хранене информация, която преди е била празна. Така че се връщам към тази страница, ще опресним, клик, разберете - тя не работи. Това е жалко. И това е мястото, където дебъгване идва инча Index.html, линия 1. Това е интересно. Добре, добре, вместо да прекарват времето си правиш това, аз съм просто ще издърпайте направи файл, който имам, която е завършена версия. Не съм сигурен каква е разликата, но ние можем само да отворите това вместо нея. И отиваме на AJAX, и това трябва да работи правилно. Това е, което е за обяд днес, в никакъв определен ред, с кавички около него, така че не е най-красивата. Но, очевидно, ако сте правили това за окончателен проект, ще го правят да изглежда по-добре. Но това е само един прост пример за това как да направите GET искане. И ако погледнем действителният код, аз съм се познае, аз съм сигурен, че тя все още е почти същото. О, забравих да го превърне в низ, това е всичко. Не, все още не работи. Независимо от това, тук е застроена завършени код за това, което трябва да изглежда тя, и го прави същото нещо като това, което аз просто изпълнение. Когато кликнете върху бутона, той използва GET JSON автоматично да анализира данните. Отнема отново данните от него и вериги през целия масив и отпечатва - каквото има за обяд днес, името на играта, и добавя нов ред след всеки ред. Ето как да използвате GET функция. 

Можете да използвате POST, което аз не са имали време да напиша един пример за това, но ние можем да погледнем в документацията. Ако се вгледате в jquery.post, можете да видите, че това е почти едно и също нещо. Имате URL, но вместо да преминават параметрите - просто да ги сложите в низ за самата URL, ще трябва да преминат през тези данни променлива че е в основата на масив, речник, че карти параметри на ценности. Минавате, че в, и че ги изпраща в използването на POST. И след като веднъж сте, че тогава може да има функция успех , който изпълнява, когато данните се връща. В противен случай, това е точно същото. Така че използвате POST, може да искате да използвате POST, например, ако имате един вход форма Нека хората ви входни пароли в нея и изпрати тези пароли отстъпка на гърба си-край скрипт, за да се провери в базата данни дали пълномощникът е валиден или не. Можете да направите това като всички използват JQuery вместо да се налага да се обнови страницата на всички. Ето как се изпълнява в блог, който ви показах по-рано. Ако отидем до края портал и да излезете, да излезете, Изход не работи. Е, нека просто да го отворите в нов прозорец. Тук има парола, и щях да напишете нещо произволно. Тя не работи, но можете да видите, че не сме всъщност трябва да се обнови страницата на всички. Кодът, ако искате да го погледнете, е всички налични тук. Така че кода съм написал миналата година по някое време. Както можете да видите тук, ние сме изпращане на POST заявка. Имам един файл, наречен login.php в задния край, която проверява дали паролата е валидна. Параметрите, които приемаме в са парола, съпоставена с на входа, която е в този вход кутия в момента. И когато данните се върне, ние проверяваме. Ако данните са неверни, тогава казваме неправилна парола, тя се плъзга надолу, и просто да изчезне след това. В противен случай, ние се зареди страницата за администриране. И всичко това беше направено чрез JSON. При това много редове код, може просто да премине на данни към задния край, проверете дали това е правилно, проверете дали сте логнати за правилно, и всъщност отговори на него, пренасочване на лицето, на правилната страница или не им дава възможност да влезете и да им кажете, че те са имали неправилна парола. Така че това е пример за това как бихте могли да използвате JQuery POST За да изпратите заявка за обратно POST вашия край, проверка дали някой е влизал правилно. 

Добре, така че това е всички примери, които имах, и всички други неща исках да покрие. Това са основните неща, които Jquery ви позволява да направите: изберете елементи, да ги променяте използва DOM манипулация, можете да добавяте ефекти, активирайте неща на определени събития, и също така да направи AJAX искания много безпроблемно и лесно. Така че ви благодаря, че дойдохте или гледане, и ако имате някакви въпроси, просто ми кажи. Да? [Student] Обратно, когато ви показах, трябваше JSON след POST искане в кавички, и аз просто се чудех какво направих. >> Да, виждам. Въпросът е, че в примера просто показа, имаше думата JSON в кавички около - Аз просто ще го спра отново - около POST функция. Аз просто го дърпа нагоре за да покаже. Така че тук е това POST заявка, а има и този JSON в кавички. Това просто определя това, което ние очакваме изхода да бъде. Така че, ако премине в JSON като очакваната тип данни, това не е изискване, но ако искаме да ги прекара, След това данните ще бъдат автоматично разпознаване като JSON. Така че ние не трябва да се обадите на разбор JSON функция върху него, тя просто ще стане автоматично. И ако погледнете документацията за POST, има този тип данни променлива, вида на очакваните данни от сървъра. По подразбиране е интелигентно предположение, че може и да греша, за да можете да оставите празно, но това е само видът на данните в кодиране, който използвате, независимо дали е JSON или XML или нещо друго. 

Някакви други въпроси? Добре. Ако имате други въпроси, не се колебайте да ми пишете в vshekhawat@college.harvard.edu, и диапозитиви и кодовете да са на разположение онлайн съвсем скоро. Успех с окончателните проекти, надявам се да използвате JQuery. [CS50.TV]