[Powered by Google Translate] [Недела 9, Продолжува] [Дејвид Џ Malan - Универзитетот Харвард] [Ова е CS50. - CS50.TV] 

Ова е CS50. Ова е крај на недела 9. Ви благодарам многу. Конечно. Недела 9. Јас го зедов тоа. Денес ние ја продолжиме нашата разговор за веб програмирање со окото кон завршниот проект, не затоа што треба да направите нешто веб-базирани за конечниот проекти, но бидејќи или за конечниот проекти или по CS50 ова е секако насоката во која современи софтверски се случува. А сепак тоа не е всушност лесна работа. Всушност, една од најтешките работи кои треба да направите е аспект на дизајн. 

На пример, од страна на дизајнот мислиме всушност добивање на корисничкиот интерфејс или корисникот искуство право. Јас daresay - и знаеме од неодамнешниот проблем сет кога неколку од вас емитуваше вашиот колики за некои парче на софтвер или хардвер кој го разбеснува, без разлика дали на кампусот или исклучите - има многу сајтови таму, има многу на хардвер таму, тој вид на смрди. Но, реалноста е дека правењето на нештата кои се лесни за користење, но сепак се моќни е многу тежок предизвик. Значи за денес прашав Јосиф и Томи да ми се придружат тука така што ние може да има разговор, како за дизајн и она што видови на мисловни процеси треба да започне поминува низ вашата глава кога ја дизајнирате вашата конечна проекти, вашите идни потфати. А потоа со помош на Tommy ние ќе разгледаме некои од имплементација детали. Како може да имаат некоја визија на хартија или во вашиот ум што потоа може да се изврши програмски со помош на некои од технологии и техники ние само што почнав да зборувам за, имено JavaScript и нешто уште понови, имено AJAX, асинхрони вклучите Javascript-. Тоа ви овозможува да креирате сите подинамичен на кориснички интерфејс со преземање на повеќе и повеќе податоци постепено од сервер. Па ќе видиме некои од овие фрагменти, како и денес. Како настрана, ако сте заинтересирани во концентрацијата по компјутерски науки или minoring по компјутерски науки, знаат дека овој петок на пладне во Максвел Дворкин 221 ќе има пица настан каде што можете да дознаете малку повеќе за компјутерски науки. На вашиот пат низ вратата денес ќе бидат во можност да ги собереш неофицијален водич за CS на Харвард. Ние ќе го стави на ѓубрето лименки надвор од половината висина така што ако сакате да го имате овој и да научат малку повеќе за CS, кои ќе бидат таму за вас, како што беше во недела 0. Исто така, ако би сакале да ни се придружат за CS50 ручек овој петок во 01:15, се упатат кон cs50.net/lunch. Без натамошно одложување, јас ви даде настава колеги Џозеф Онг. Здраво. [Аплауз] Благодарам. Прв пат дознав за дизајн е во класа тука се нарекува CS179. 

Професорот во времето ни ја раскажа приказната за еден друг професор кои отишле во хотел и се користи чешми. Може ли некој да ми каже што на 2 копчиња за лево и десно направам? [Студент] Жешка и ладна. >> Топла и ладна. Добро. Она што вообичаено се очекува, нели? Овој професор по употреба на тапа сака да се истуширам, и тој продолжува да го користи ова. Тој смета дека на левата и десната страна се за топла и ладна, нели? Но, секој може да ми кажете што овие всушност прават? Секое раце? [Нечујни студент одговор] >> Еден предлог е? [Нечујни студент одговор] >> Температура? Па еден од нив го контролира температурата и други контроли? >> [Студент] притисокот на водата. Притисокот на водата. Добро. Овој професор оди во овој и, мислејќи дека се контролира топло и студено, се врти на десната, што тој мисли дека е жешко, па сè до бидејќи тој сака да ги преземе топол туш. Па, овие навистина не се совпаѓаат, така што тој добива ова не е многу забавно искуство да се биде во ладна туш, и сите знаеме што тоа се чувствува како. Ова е пример на еден дизајн мааната. Што мислам со тоа е неговата очекување од тапа не се поклопува со она што излезе од туш, кој е вид на жално за него. Значи ова е пример на еден дизајн пропустот што се случува во реалниот живот. Но, можеме да видиме сите видови на други, како и. Ние не сме веројатно фанови на системот MBTA. Ова е метрото систем, всушност, во Лондон, кој вели: "Ова копче не е во употреба." Зошто е дури и таму? Зошто ние дури и се грижи? Кога бев дете, се технолошки такт еден во куќата, секогаш кога компјутерот ќе се сруши, мајка ми ќе дојде до мене, ме покажува овој екран и ме прашуваа што се случило. 

Дури и јас не знам што тоа значи. [Смеа] Што? [Смеа] Понекогаш се чувствуваме како развивачите на софтвер се само trolling нас. Како корисници сме како, "Што се случува? Некој ни каже." Ова се сведува на прашање на дизајн. Дизајн, како што можеме да видиме, не е чисто за естетика, тоа не е за тоа како работите изгледаат. Гледаме дека овде овој мал pop-up овде всушност изгледа прилично убаво. Таа има една капка сенка во позадина, има граница радиусите случува. Тоа е вид на убаво. Тоа не е навистина добро дизајниран бидејќи тоа не е многу лесен. Тоа малку pop-up што доаѓа до навистина не ми даде какви било информации за она што се случува, не ми каже нешто како корисник за тоа како да се опорави од таа грешка. Ние сакаме да се размислува за она што дизајн е не. Прво, тоа не е естетика. Тоа е исто така, не кутии вашиот стан со тони непотребна функционалност. Ако сте тајландски ресторан, што веројатно не сакате да биде стоматолог, во исто време. И со Facebook прашања, не дека многу луѓе го користат и тоа не е навистина во сржта на она што тие беа градење. И така тоа е убаво да се мисли не се работи за толку многу количината на работите што ќе се стави на вашата апликација, но квалитетот и како си прави што корисникот искуство подобро од всушност подобрување на она што веќе го имате. 

Во мало, дизајн ни кажува она што треба да се изгради. На пример, ако градиме нешто што нека пребарување работите, како Google, на пример, треба да се прават работите на начин со која се бара од корисникот да се земе многу кликне за да се добие она што тие сакаат, или ние треба да го прават тоа на начин, на пример, со Google Инстант или AutoComplete која ни овозможува да дојдеме до нашите резултати побрзо? Инженеринг вклучува, како Томи ќе ти покажам, всушност градење. Постојат многу видови на дизајн. На пример, ако сте градење нешто за распоредување на нешто во трета земја во светот каде што не е многу електрична енергија или дека многу технологија, треба да дизајн она што го градиме на начин на кој лесно дава пристап до луѓето таму. Но, она што видови на други дизајн одлуки може да има или би можеле да бидат вклучени во нешто како ова? Да. Гледам рака. [Нечујни студент одговор] >> Право. Точно. Пристапноста не е една работа. Многу луѓе не размислуваат за "Што е со моите корисници?" како крајности на било спектар. Имам корисници кои би можеле да имаат посебни дека јас не сум размислување за и јас сум само размислување за дизајнирање за општата корисник. Интернетот е достапен од сите во денешно време, и јас треба да се дизајнирање за оние луѓе, како и. Какви видови на другите дизајн одлуки може да се направи? Да. >> [Студент] трошоци. Чини. Многу добар. Друга работа е што ние би можеле да ги базираме нашите дизајн одлуки за се исплатливи. Ако ние сме бизнис, сакате да се изгради нешто што не им треба многу трошоци за производство но може да се продаваат на особено високи цени или да не добие некоја добивка. 

Овие се сите различни видови на дизајн, но кога градиме нешто на интернет или кога градиме нешто што најверојатно не чини толку многу да се изгради до сега, како Интернет апликации - вие не мора да се фрли многу капитал во неа со цел да се направи нешто што всушност работи - она што ние сме повеќе загрижени за е корисничко искуство. Ние го нарекуваме овој корисник дизајн центриран. Во суштина она што корисникот дизајн центриран вклучува се себе си стави во чевлите на вашите корисници. Ако некој знаци се за она што јас сум градење, тие очигледно дојде до мојата одредена апликација со цел во умот, со задача тие сакаат да се заврши. И вашата работа е не само да им помогне да ја заврши таа задача но да им помогне да ја заврши оваа задача на начин кој е ефикасен, интуитивен, и, како што некои лице, рече таму, достапни. Што значи ефикасност значи? Ефикасност значи колку брзо го моето корисничко заврши задачата дадена мојот интерфејс. Е потребно многу кликне за нив да се добие од едно место до друго? Тоа е мачна? Дали тие мора да се изврши многу повторливи задачи? Ние сакаме да се направи овој процес како ефикасна е можно така што тие не треба да направите оние видови на нештата. Како и за intuitiveness, што е, на пример, ако корисникот изгледа мојот интерфејс, тоа е лесно за нив да се добие од место до место? Тоа е лесно за нив да дознаам што тие мора да кликнете во мојот интерфејс со цел за нив да се постигне целта или задача што тие сакаат да се постигне? 

И, конечно, како еден човек рече таму, пристапност е многу важна. [Машки звучник] Станува збор за пристапност за нешта како визија, како како можам да всушност дизајнира нешто за некој кој е слеп? О. За луѓето кои не може да се види на сите, имаме нешто што се нарекува читачи на екран. Што треба да направите е да треба да се изгради својата веб-страница на начин дека, на пример, особено технологии она што го нарекуваме - Постојат многу работи сега. Мислам дека има читачи на екран наречен JAWS. Многу од овие работи се потпира на она што ние го нарекуваме област правила со цел да се прочита на корисникот она што е присутно на оваа страница. За оние луѓе кои не може да се види, треба да бидете сигурни дека овие читачи на екран всушност може да ги собереш на содржината на страницата и всушност може да се покаже вашите корисници, ако не може да се види, барем сеуште можете да се разбере содржината на оваа страница. Да. Во ред. Доволно зборува за добар дизајн. Ајде да зборуваме за лоши дизајн. Тоа се работи што не треба да прават. Може ли некој да ми каже за нивните искуства со Craigslist и она што тие мислат дека не е толку голема за овој дизајн? Да. >> [Студент] Мислам дека има премногу зборови во една област. Премногу зборови, нели? Целосно огромно. Ќе дојде до оваа страница и вие ќе бидете поздравени со целиот куп на работите тука дека дури и да не е важно за вас. На пример, можете да живеат во една држава која не започне со ова писмо. Да речеме дека живеете во Тексас или нешто. 

Мора да дојдете сите на патот надолу на страницата за да стигнете до локацијата што се во. Јас сум од Бостон, па нека ме погледне во Масачусетс. Каде е Масачусетс? Ох, тој е во право тука. Ох, тоа е Бостон. Во ред. Ајде да погледнеме во Бостон. [Смеа] Прилично големо, нели? Непријатна работи таму. [Смеа] Да речеме дека јас сум во потрага по некаде да живеат. Колку луѓе, всушност, се користи Craigslist? Тони на вас. Постојат многу лоши начини да се погледне во тоа, но ајде да погледнеме ова. Која е разликата помеѓу img и слика? Може ли некој да ми каже? Има всушност е никаква разлика. Тие значат иста работа, но тие имаат различни етикети за нив поради некоја причина. Ако јас кликнете на Има слика, ништо не се случува на оваа страница. Јас всушност треба да кликнете на Барај повторно за нешто да се случи. Што може да биде подобро дизајн одлука дека може да се направи таму? Ако сум притискањето на ова филтер, веројатно сакате да филтрирање од страна на таа одредена акција или дека одредена категорија. Значи наместо да притиснете Барај повторно, јас само автоматски може да направи за филтрирање вид на Google стил, каде што тие го прават тоа веднаш. [Malan] Но, не формира како што ние ги видовме досега мора да биде физички поднесени со притискање на Enter најмалку или со кликнување на копчето? Како сте ги виделе досега, вие всушност треба да кликнете на Прати да се направи тие работи. 

Но, како Томи ќе ви покаже во вториот, таму се всушност начини за така што кога ќе кликнете на тоа нешто тој автоматски може да испрати она што ние го нарекуваме на барање AJAX и да добијат податоци назад и филтер вашите резултати моментално. Постојат тони на нешта кои се во ред со овој интерфејс. [Malan] Можете да пребарувате за Кембриџ? Има нешто малку аномално тука каде што се грижат за Кембриџ а сепак сте добивање Westford, Пролет Хил, West Newton и слично. Веројатно не е идеален. >> Веројатно не е идеален. Како би можел да бидам во можност да се направи искуство на корисникот подобро на оваа страница? Да. >> [Студент] инструкции. Во ред. Инструкции во каква смисла? [Студент] На пример, нешто што за прв пат корисници кои дури и не знаат што Craigslist е или ако не знаете што сте би требало да се направи. Право. Па објасни она што Craigslist е на оваа страница е важно. Ние всушност може да каже корисници што оваа страница е всушност за. Ако јас сум само посета на овој, гледам еден куп на локации. Јас дури и не знаат што тие значат. Но, уште поважно, само гледајќи во овој интерфејс, се сеќавам морав да дојдете долу еден тон работи да се најде одредена заедница дека јас всушност се грижи за ова. Што е побрз начин да го направите тоа? Да. [Студент] Поделете ги нагоре во исток, запад региони. >> Океј. Можев да ги делат во повеќе категории кои може да ми помогне побрзо се утврди како да стигнете до таа одредена локација. [Студент] Ставете паѓачката листа. >> Право. Во ред. Јас може да се користи опаѓачкото мени затоа што имаат фиксен сет на работите и ние би можеле да ги покаже во опаѓачкото мени. На тој начин не заземаат многу простор на екранот. Но, дури и подобро од тоа, што да правиме? Да. >> [Нечујни студент одговор] >> Може да се каже дека повторно? >> [Студент] полето за пребарување. Да, поле за пребарување. Тоа е одлично. Она што всушност може да направи е ако се погледне назад на слајдови, поле за пребарување. Автоматско. Многу лесен начин да пребарувате низ резултатите кои знаете дека се во собата. Ако почнам пишување фотогалерии, само ми покаже сите резултати кои имаат BO внатрешноста на нив. Тој начин многу лесно може да најдете особено оној што сакаат да одат на наместо да се движите низ оваа навистина голема листа. 

Овие се сите видови на навистина ниски виси овошје што некој кој го спроведува Craigslist всушност може да направи да се направи обид на веб страната на многу подобро за одреден корисник. Во ред. Доволно зборува за лоши веб-сајтови. Ајде да зборуваме за Фејсбук. Кога Фејсбук излезе, а особено Фејсбук слики, имало многу други услуги во време што може да ги прави истите работи. Тие би можеле да ги организирате вашите фотографии во албуми. Што можете да направите е да можете да ги организираат во групи, како и. Можете да ги организира по датум. Можете да го направите сите овие конкретни нешта. Но, дали некој знае она што го направи Фејсбук слики експлодираат во тоа време не беше ослободен? Да. >> [Студент] Тагови. >> Тагови. Точно. Имаме Мило овде, кој е наш куче маскота со тоа bandana CS50. Можете да видите дека имаме оваа означување функција во средината. И она што го направи Фејсбук слики, така интересна од употребливост гледна точка е тоа што всушност е дозволено на луѓето преку овој да се вклучат своите пријатели во нивните слики. За Фејсбук, бидејќи нивниот веб-сајт е особено социјалните, тоа е за изградба на овој вид на општествена атмосфера. Тоа подобри искуството на слики многу повеќе бидејќи тие може да почне велејќи: "Овие се врски меѓу луѓето, и овие се слики за луѓето што навистина се грижат. " Дел од тоа е исто така еден вид нарцизам. Луѓето сакаат да бидат означени во фотографии и работи како што. Иако тоа не е секогаш добра човечка особина, во исто време тоа е врз основа на добар дизајн одлуки затоа што луѓето всушност се грижи за вакви работи. Значи тоа е Фејсбук фотографии. 

Но, ајде да зборуваме Фејсбук поопшто. Сигурен сум дека многу луѓе тука имаат мислење за Фејсбук, двете добар дизајн одлуки и лоши дизајн одлуки. Значи, да се пропустливи или да бидат среќни. Ајде. Знам дека сите од вас го користат Фејсбук. Некој мора да има нешто лошо да се каже или нешто добро да се каже за тоа. Да. [Студент] Во вести храна има многу нешта јас не навистина се грижат. Вести храна не покаже многу работи што не може да се грижи за него. Имате пријатели на Фејсбук кои не се сретнале за 2 или 3 години и ќе видите нивните вести резултати никнуваат во вашиот News Feed и не навистина се грижат за неа. Фејсбук всушност направен обид да се направи ова подобро, и тие всушност се обиде да им помогнам на релевантни резултати на врвот на вести храна, како на крајот така што всушност гледаат на работите од пријатели кои се релевантни за вас или вашите блиски пријатели. Нешто друго? Да. [Нечујни студент одговор] >> Може да се каже дека повторно? [Студент] Рекламите се релативно дискретен. >> Во која смисла? [Нечујни студент одговор] Тие немаат светлината на екранот, како и банери. Во ред. Тоа е добро. Ако се сеќавате на интернет од 90-тите - >> [Malan] Јас бев таму. >> Тој беше таму. [Смеа] Може да се сеќавам трепка GIFs средини, светликаво работи, Geocities стил вид на работи. Тоа навистина не е пример за добар дизајн затоа што тоа е навистина оттргнува од содржината. Уметноста Јеил веб-сајт користи за да имаат анимирани GIFs како нивното потекло и не можеше да се прочита ништо на страната, но претпоставувам дека некој всушност разговаравме со нив и сега е малку поинаква. [Malan] Тоа е многу подобро сега. >> Тоа е многу подобро сега, како може да се види. >> [Malan] Oh yeah. Баш убаво, само - Да. Во ред. 

Дел од тоа е исто така прави вашата страница можеби многу минималистички и многу разбирливо па работите на страница проток на начин што е многу логично и не се во начинот на едни со други. Какви видови на други работи се добри за Фејсбук или лошо за Фејсбук? Ајде само да имаат дизајн разговор тука. О. Каде? Да. [Студент] Новиот Хронологија на системот ви овозможува да пребарувате профилот на лицето за нивното минато. Ooh, временската линија. Хронологија е голема работа, бидејќи тоа ви овозможува труп вашите пријатели назад, кога тие биле во средно училиште. Хронологија е добро, бидејќи тоа ви овозможува да се филтрира низ содржината многу побрзо, што ви овозможува да најдете работи кои инаку би ви земе навистина долго време да се најде само лизгање нагоре и надолу, нагоре, нагоре, нагоре, нагоре, нагоре, како враќање во времето. Но, потоа, тука е исто така еден вид на недостатоци дека во однос на корисничкото искуство. Она што би можело да биде? Голем збор, која започнува со П-Р. >> [Студент] приватност. >> Приватност, нели? Приватноста е голем корисник искуство прашање. Ова е една од работите мразам најмногу за Фејсбук. [Смеа] [Malan] Како можам сега. Дејвид не сфаќаат ова всушност се случило до вчера. Па сега тој знае дека секој пат кога ќе го разговарате знам тој е ме игнорира. [Malan] Незгодната дел беше бев всушност го игнорира, и не знаев знаеше бев го игнорира. [Смеа] Приватноста е голем проблем. Некој тука може да ми каже што би можело да биде лошо за Фејсбук приватност и покрај тоа што тие го прават вакви работи? Што е тоа особено тешко да се направи во однос на Фејсбук приватност? Тој вид на е водечки прашање. Да. >> [Студент] Криење на вашиот слики од некои луѓе. Право. Токму така, за да се скрие Вашите фотографии од одредени луѓе. Тие имаат оваа мала, мала копчето во горниот десен која ти овозможува да префрлате приватноста на слика. Нивната приватност опции се многу различни меѓу различни видови на менија. 

Тие ги добиле многу подобро за него во последно време, но тоа се користи за да биде случај дека секогаш кога ќе сакаше да се спречи вашите пријатели од гледање слики, ќе мора да одат преку многу комплицирана 5-чекор процес да биде како, дозволете ми да кликнете на овој линк, сега дозволете ми да кликнете повторно, дозволете ми да кликнете повторно, дозволете ми да наведете кои луѓето не може да се види моите фотографии. Тоа не е особено добро на дел Фејсбук бидејќи толку многу за корисникот искуство е, всушност, давајќи им слобода да го контролираат она што луѓето може да се види. Ние го нарекуваме овој корисник контрола и слобода. Ако не сте допуштајќи вашите корисници го направите тоа на начин кој е ефикасен и интуитивен, тогаш вашето корисничко искуство не е навистина толку голем на сите.  Ќе ви момци сакал да кажам нешто за Фејсбук? Како да ја исклучам овој одмор? [Ong] Вие не може да се претвори овој исклучи, а тоа е огромен употребливост мааната од страна на Фејсбук. Оваа функција - Јас всушност погледна во него вчера - Тоа е или дека не можете да го стори тоа или тоа е погребан некаде многу, многу длабоко во вдлабнатини на Фејсбук бидејќи не можам да дознаам како да го исклучите оваа функција на сите. [Malan] Но понекогаш овие одлуки не се очигледни бидејќи вие момци ни даде многу корисни повратни информации за различни CS50 апликации и веб-сајтови дека курсот користи. Ние не се имплементираат сите овие барања и предлози. 

Дел од тоа е за добивање на толку многу барања дека тоа е функција од времето, но понекогаш и ние само се направи свесна одлука како, "Ви благодариме за предлогот, но ние не се согласуваат." Па, како да навистина да одлучи што треба да направите ако вашиот корисници мислите дека треба да се направи нешто дури и ако не мора? Тоа е деликатна рамнотежа меѓу всушност слушање на она што велат вашите корисници а всушност имаат некој вид на линија, каде што ќе кажеш, "Ние нема да го стори она што овие корисници се каже." А особено, мислам дека имаше еден цитат од Хенри Форд кој ги резимира оваа до прилично добро. "Ако јас го праша луѓето што сакаат, тие би рекле дека сакаат побрзо коњи." Секој може да се најде на разграничат што таа понуда навистина значи? Тоа не е само дека корисниците знаат што сакаат, но тоа е повеќе тоа - [Студент] Тие не знаат што е можно. Во дел тие не знам што е можно. Душманке дека освен малку повеќе. Што сакаш да кажеш со тоа? [Нечујни студент одговор] Тоа е добро. Она што мислам дека ние се обидуваме да кажам тука е дека луѓето знаат што сакаат. Тие сакаат побрзо коњи. Она што тие навистина сакаат е способноста да се движи побрзо, но тие навистина не знаат медиум преку кој да се постигне тоа. Кога ќе дојде до вашите корисници и вашите корисници да ви кажам нешто и тие ти кажам: "Ние сакаме овие карактеристики и овие карактеристики и овие карактеристики," не сакате да мора да се размислува за, "Дозволете ми да одиме напред "И имплементација на она што експлицитно се каже" но она што го сакате да се размислува за е: "Што вид на идеи можам да добијам од тоа?" Што прават тие всушност сакаат? 

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

Јас ќе одам во текот на повеќе конкретни примери на она што всушност може да направи. Како вид на последниот пример на еден производ, да ги погледнеме во кајак. Кајак кога излезе беше многу, многу популарни. Секој може да се погоди зошто? Кои се видови на нешта ви се допаѓа во врска со овој ако го користи или она што се видови на работи не ви се допаѓа? Да. >> [Нечујни студент одговор] >> Океј. Тоа е дел од тоа е да им се овозможи на корисникот да има побарување што е повеќе експанзивна од многу рестриктивни еден како, "Треба да изберете вашиот датум "И ќе мора да го изберете вашиот краен датум." Всушност, тоа ви овозможува да бидат флексибилни за тоа и тоа ви дава сите летови во тој опсег. Нешто друго? [Студент] Тие вклучуваат трошоци во цената. Тие ги вклучуваат трошоци во цената. Даноците и работи, всушност, оди директно во таа цена во горниот лев па вие не сте излажани во размислување дека сте всушност плаќаат за 240 $ лет кога тоа е навистина $ 330. Нешто друго? Да. [Нечујни студент одговор] Не сум сигурен дека ако тие навистина може да го прават тоа. Јас би можеле да бидат погрешно. Тоа може да биде интересна работа, ако сакате да се стави поголема тежина на одредени филтри така што тие им помогнам на резултатите во врска со тој филтер до врвот. Но, секој може да ми кажете што е толку посебно во врска со овој левата страна? Како го традиционално се погледне до лет на Интернет сервис пред тоа? 

Да. >> [Нечујни студент одговор] >> Може да се каже дека - [Студент] Секоја авиокомпанија. >> Да. Секоја авиокомпанија има свој веб-сајт. Ова консолидира работи. И? [Студент] Знаеш точно колку време сте оставајќи. Вие не знаат точно колку време сте оставајќи, но поврзани со филтри, а особено. Дозволете ми да се повлече до кајак. О, Боже, pop-up прозорци. Лошо корисничко искуство. Што се случува кога ќе се преселат овој лизгач? [Студент] Автоматските ажурирања. >> [Ong] Автоматските ажурирања. Тоа е нешто што е многу важно. Пред ова, секогаш кога ќе сака да се погледне до летот, ти мораше да се стави во вашиот влез локација, вашиот излез локација, притиснете пребарување, тоа ќе го обработи и да покаже вашите резултати. Ако си сакал да го промени вашето барање, ќе треба да притиснете назад двапати, влезе во нова побарување од нула, а потоа го направи тоа одново и одново. На убаво нешто за вакво нешто е тоа што користи многу [неразбирливо] нешто во средината. Секогаш кога ќе направи нешто како овој, тоа пука надвор барање и тоа ви се враќа сите резултати веднаш. Овој вид на брз одговор е нешто што го направи кајак многу популарен затоа што тоа е навистина лесно за мене да само ги променам моите пребарување и да дознаам работите кои се околу одреден опсег без да одат напред и назад, напред и назад, напред и назад. Значи овие се сите видови на нешта сакате да се размислува за кога сте дизајнирање вашиот вебсајт. Како можам да се направи тоа многу ефикасен за мојот корисниците да одат преку она што тие си работат на и да се дојде до нивната евентуална цел што е можно побрзо? [Malan] И до точка на Joseph порано за корисниците не мора да знаат што сакаат, врз основа на она што вие момци сега знаеме за HTML и имаш обележувачи, радио копчиња, изберете менија, полиња за внесување и слично, како ќе се спроведе идејата за подигање на проектот време за лет? 

Која од овие различни адаптери механизми што ќе го користи? Ако само знаат износот на HTML дека учеа пред и знаеш влезови се радио копчиња, изберете, капка-падови, и влез кутија, што ќе се вашиот природен избор се за подигање датуми? [Студент] влез. >> Влез. Или можеби дури и опаѓачкото со сите датуми, нели? Значи со повеќе комплексни адаптери механизми, како оваа на левата страна што може да се спроведе, може да се направи овој процес многу повеќе интуитивна со лизгачот бидејќи времето е постојан, а луѓето обично не мислам на тоа во смисла на дискретни парчиња. Во ред. Последно нешто. Десет употребливост хеуристичко. Сите работи што зборуваше за веројатно припаѓа во една од овие категории. Ако одите на овој линк, кој сајтови ќе бидат објавени на интернет, всушност ќе биде во можност да, како што дизајн вашиот сајт, да ги задржи овие хеуристичко на ум и овие правила на палецот. За вашите проекти, она што јас Ви препорачуваме да се направи со цел да се дизајнира вашиот стан подобро е да се направи хартија Текара во прв план. Кога сте размислување за вашата апликација, многу брзо скицирам она што го сакате тоа да изгледа како и бидете сигурни дека сите полиња се подредени на начин кој е многу интуитивен за на корисникот да го користите па дури и покажуваат овие хартија прототипови на вашите пријатели и на проектот фокус групи. Само да добијат 2 или 3 лица заедно и замолете ги да едноставно кликнете на овие хартија прототипови, и да им покажеме нови екрани да се види дали тие навистина се разбере што се случува. 

Што сакате да направите, е да им даде задача, мотивира таа задача, и само им даде на стан и нека го користите. Не им даде инструкции подалеку од тоа. Сакате да всушност нека комуницирате со вашиот стан во начинот на кој ви овозможува да видите како ќе го користи ако не стоеја веднаш до нив. И тоа е многу важно. Тоа ќе ви даде многу увид за тоа се луѓето добивање околу одредени нешта на начин на кој јас не ги имаат намера да? Се тие користат одредена UI механизми на екранот на начин кој е вид на hacky? Немав намера за нив да го направи тоа на тој начин. И откако ќе завршиш со тоа, што сакаш да направам? Вашиот дизајн карпи, нели? Што сакате да направите е да сакате да се развие, а потоа направи тој процес одново. Така покажуваат дека во пријатели еднаш сте го развива, го тестот, развој, тестирање, развој, тестирање, iterate, и натаму и напред. Дизајн е многу итеративен процес во оваа смисла. Ти всушност треба да се изгради нешто и потоа реализира работи за тоа дека не се сетив порано и се врати и да се подобри од тоа. Сега, како што за развој дел, тоа е она што Томи ќе ви покаже по пауза и како може да биде во можност да се спроведе вакво нешто AutoComplete на начин кој е прилично едноставна. [Malan] Како Томи поставува тука, прашање тогаш. Многу од најраните веб-сајтови - и кога Јосиф рече 1990 стил веб-сајт, тоа беше имплементации каде што ако сакаше да изберете проектот време и крајот време, искрено, назад во текот на денот, па дури и на некои веб-сајтови денес, на начин да го направите ова е да изберете еден час од опаѓачкото, Вие избирате минути од опаѓачкото, можеби ке го одберете AM, премиерот, а потоа да го направите тоа 3 пати. И така со 6 кликне а можеби и некои лизгање Вашето корисничко всушност може да обезбеди некој вид на датум и / или време опсег во оваа смисла. 

Значи дефинитивно неоптимална а сепак досега видовме нема експресивен способности во која било од јазиците ние погледна да се направи нешто sexier како овој лизгач на проектот време и крајот на времето. Но, ако се сетам на недела 0 кога ние разговаравме за гребење, таму немаше Widgets, што го направија некои работи. Навистина, само имаа овие основи како петелките и услови и слично. Значи каков вид на само размислување многу апстрактно сега, независно од деталите на HTML, она што е навистина се случува со вакво нешто проектот време и крајот Време лизгачот? Кога ќе се движи мојот глушец и јас кликнете на тоа малку морков симбол на левата и да почне влечење, програмски, што е тоа што сакате да бидете во можност да се спроведе да го направат тој да се случи? Што прашања, што Булова изрази сакате да бидете во можност да прашам? Што навистина се случува? Sammy? [Студент] Каде е позицијата на покажувачот? >> Добро. Каде е позицијата на покажувачот? Ова беше нешто што ни е потребно да го изразат назад во нула, дали тоа беше врз основа на локација, па дури и бојата или слично. Може да се потсетиме некогаш толку кратко во понеделникот имаше сите овие нешта наречени настани во светот на веб, и така има работи како onclick и onkeypress и onkeyup и onmouseover и onmouseout. Така сфаќаат дека дури и овие нешта ние сме биле преземање здраво за готово на интернет со сајтови како Фејсбук и Gmail, дури и ако немате идеја како што веројатно ќе се спроведе тоа, бидејќи нема ништо дури и како тоа во предавање или Проблем Намести 7, свесни дека со овие исти основи, со HTTP и параметри и GET и POST, со основен HTML влезови дека ние сме ја погледна досега и во еден момент со програмски механизми кои на Tommy за да се воведе можете да почнете да се изразите себеси исто како што направи во недела 0 со многу интуитивно влечење и пуштање. 

Па со тоа, рече, Томи MacWilliam и некои нови мозаик парчиња за нас за Веб. Во ред. Моето име е Томи и јас одам да се зборува за JavaScript. Само Општи услови: Јас сум на мислење дека JavaScript е најдобар програмски јазик во целиот целиот свет. Постојат многу луѓе кои не се согласуваат со мене, но тоа е само неверојатно. Откако ќе се вратиме Ц, ако треба да се напише C за друга класа или некои други јазици, тоа е само навистина фрустрирачки во сите ниско ниво детали што треба да се заглави внатре Значи, ако сте некогаш чувствува тажна за тоа како досадни Ц е да се напише, само оди назад, пишуваат некои вклучите Javascript-. Тоа е нирвана. Ќе се чувствувате многу подобро за вашиот лош ден. Голем дел од магијата на JavaScript доаѓа од неговата способност да манипулира работи кои се веќе на страната. Кога ние напиша нашите PHP скрипти, тие биле егзекутирани на серверот, и на крајот дека PHP скрипта најверојатно излез некои HTML. Дека HTML е испратен до клиентот, а потоа тоа беше тоа. Ако PHP сакаа да додадете копче на страница, на пример, тоа навистина не може да го направи тоа. Тоа ќе мора да го направи сосема нов HTML датотека и испратете ја на прелистувачот. Со JavaScript знаеме дека можеме да ажурирате работи, додека тие се веќе на страницата, и поради тоа ние може да обезбеди многу повеќе инстант фидбек, што навистина ќе се подобри корисничкото искуство на нашата веб страница. Само брз повториме на JavaScript селектори. Знаеме дека кога ќе преземете една HTML страница, тоа ќе биде претставен во ДОМ. 

ДОМ запамети е само овој голем дрво каде елементите се поврзани во оваа голема хиерархија. Кога работевме со бази на податоци во pset 7, една од првите работи што треба да знаете како да направам е да се пребарува базата на податоци. Имаме оваа големи корисници маса, а понекогаш и ние само сакаме да се каже, "Јас само сакам некои од овие корисници кои одговараат на некои состојба." Слично на тоа, кога имаме ДОМ ние треба некој начин на доведување во прашање тоа. Ние треба некој начин да се каже: "Сакам сите копчиња кои изгледаат вака "Или сите на сликите на оваа страница." И овие селектори ни овозможи да го сторат тоа. Значи само еден брз повториме. Оваа прва овде, овој # поднесе, што е тоа што ќе изберете? Дали некој се сеќавам? [Нечујни студент одговор] >> Да, точно. Ова се случува да изберете елемент на страница, која има број на покорат. И така што хаш таг вели дека ова селектор ќе работат со лични карти. Како за вториот, ова. Центриран, она што ќе изберете? Да. >> [Студент] класа. >> Токму така. Ова што сега се случува да изберете од класа. Разликата меѓу ID и класа тука е генерално проект треба да биде уникатен во рамките на она што просторот сте во потрага завршена. Значи, ако сте биле во потрага во текот на целиот веб страница, Дали навистина само треба да имаат 1 елемент со одредени проект, така што во овој случај на покорат. Со часови, од друга страна, може да имаме повеќе од 1 елементи на истата страница со истата класа. Ова може да биде корисно за велејќи дека сакате да го изберете она што е центриран на страница наместо само 1 работа. 

И, конечно, оваа последната тука е малку повеќе комплицирано, но она што е ова се случува да изберете од ДОМ? [Нечујни студент одговор] >> Што е тоа? [Студент] Нешто што е таг. >> Имаме 2 дела тука. Во вториот дел се случува да се каже Сакам да изберете овие тагови со ознака на влез, па секој елемент кој е влезен таг. Но јас не сакаат да само да одбереш сите влезови затоа што нешто како копче Прати може да биде влез и нешто како поле за текст може да биде влез. Така да со овие загради јас велам дека само сакате да изберете оние елементи кои се од тип текст. Некаде во мојот HTML таг Имам атрибут наречен тип, и вредноста на тој атрибут треба да биде текстот. Па, како за овој прв дел овде? Првиот збор на овој селектор е форма тогаш имам простор, а потоа овој влез дел. Што значи дека направи, ставање на форма пред тоа? Ова се случува да во основа ограничување на нашите пребарување. Тоа може да биде случај дека имаме некои влезови на страница кои не се потомци на форма. Што тоа ќе го направите ова е да се каже дека само сакаат влез тагови кои имаат некаде над нив некои родител елемент на формата. И така на овој начин можеме да ја направиме овие повеќе хиерархиска кверија па ние не само треба да изберете што појавување на дадена селектор. Ние можеме да вид на ограничување на обемот на таа пребарување на нешто друго. Па сега дека знаеме како да изберете елементи на страницата, ајде да разговараме малку за AJAX. AJAX е сеуште многу трендовски акроним кој се залага за асинхрони JavaScript и XML. Тоа само така се случува, дека XML е само некој начин да се претставуваат податоци. 

Овој вид на изгубени популарност во последно време, па Х во AJAX не се користи цело време. Во суштина, она што AJAX ни овозможува да направите е да HTTP барања од контекстот на JavaScript. Кога сме во нашиот веб прелистувачот и ние сме навигацијата низ страници и ќе кликнете на линкот, што нашата интернет пребарувач се случува да направите е да бидете HTTP барање до она што врската ќе кликнете. Но, тоа не е секогаш идеално, бидејќи ако тоа е случај, тогаш како Давид рече: ние секогаш треба да се направи корисници кликнете на копчето достави или кликнете на линкот со цел да се направи нешто да се случи тоа ќе вклучува HTTP барање. Значи со AJAX можеме да направиме овие барања во име на JavaScript. Тоа значи дека секогаш кога корисникот се поврзува со страницата или нешто се случува, ние всушност може да направи програмски барање на некои други PHP фајл на нашиот веб сајт или нешто друго и добивање на податоци кои таа датотека плука. Ајде да ги погледнеме еден пример на AJAX. Ова е нашиот CS50 финансии страница со кој се надевам дека некои од нас се запознаени. Ако ги погледнеме на HTML кодот на оваа страница, можеме да видиме тука што јас додадов неколку работи, од кои јас сум дал овој формулар за идентификација. Сум рече id = "форма понуда". Јас го направив тоа само затоа што тоа се случува да се направи ова е малку полесно да изберете од ДОМ бидејќи јас само може да се направи еден многу едноставен пребарување. Она што сакам да го направите тука е сакам да се утврдат некои проблем со CS50 финансии. Значи, ако ние одиме finance.cs50.net, секој пат кога ќе сакате да се добие понуда, морам да кликнете на ова Get Цитат копче, и дека Земи Цитат копче тогаш ме носи на друга целата страница. И ако сакам друг цитат, морам да хит на копчето Назад, а потоа го напишете, Јас добие понуда, а јас хит на копчето Назад. Ова навистина не е најдобар корисничко искуство. Кои навистина ќе го користи сајт, ако тоа е толку бавно да се добие на цените на акциите? Значи она што сакате да го направите со AJAX е да се отстрани тој чекор да одат на посебна страница со цел да видите резултати. 

Она на што сме навистина само бара е тоа што навистина мала цена, и тоа е само една навистина мала количина на податоци. Па нема потреба за мене да одат друг целиот HTML страница, преземете една цела нова серија на HTML, можеби преземете некои повеќе слики, некои други CSS фајлови само за мене да одговори на тоа многу едноставно прашање колку прави овој парк цена. Со AJAX може да се направи тоа многу полесно. Гледаме долу тука дека јас сум поврзување во датотека вклучите наречен quote.js. Да, всушност се отвори таа датотека. Не постои. Сите мои JavaScript датотеки ќе бидат лоцирани во HTML така што на веб прелистувачот може да го пристап. Тогаш имаме посебен директориум тука за JavaScript, а сега тука е quote.js. На врвот на оваа датотека ова вели дека овде сакам да се чека за целата страница да се вчита пред да се обиде да направи нешто. Зошто е тоа потребно? Излегува дека следното нешто, ќе одам да направите тука е да почнат да бараат за елемент која одговара на некои селектор. Ако ова го вклучите Javascript-се некогаш извршени пред овој елемент е оптоварена на страницата, тогаш сè јас се обидувам да не се оди на работа затоа што јас ќе одам да се обиде да избере нешто што не е таму. Значи оваа линија до врвот вели Сакам да почека додека сè е преполн па ние сме гарантира дека секој елементи Јас сум во потрага по се всушност на оваа страница. Ова знакот за долар тука значи јас сум со користење на библиотека наречена jQuery. Ова jQuery библиотеката ни овозможува да ги користат овие селектори дека ние само ја погледна. Велејќи $ потоа поминува како аргумент овој # форма понуда, Јас сум сега изборот таа форма што ние едноставно се погледне во. Сега имам застапеност на таа форма во меморијата некако. 

На овој објект сега, оваа претстава на формата, Јас сум сега користење на функцијата повика. Што оваа функција не е тоа се случува да се закачите на некој настан управувачот. Случај ние ќе слуша за е случај поднесе. Па кога корисникот ќе кликне дека копчето Submit или притиска Enter, овој настан ќе оган. Од hooking во ова, јас сега може да ја замени стандардно однесување на формата. Без ова JavaScript, форма ќе ги достават до она PHP фајл ние се користи во таа акција атрибут. Но, наместо тоа, јас сум сега велат, чекај, чекај, чекај, не сакам да всушност го направите тоа. Сакам ова да се случи пред да одите и да се обиде да ги достават до некои датотеката PHP. Сега она што сакам да направам? Во овој момент јас сакам да се користи AJAX некако да се вчита во она што цената на акциите е. Првото нешто што треба да знаеме е тоа што акциите на корисникот е во потрага нагоре. Да го направите тоа, ќе одам да користите друг селектор. Ова е третиот селектор ние погледна пред. Ова се вели дека сакам да започнете оваа форма елемент со проект на образец-понуда. Потоа некаде во внатрешноста на таа форма треба да има влезен елемент што има име на симбол. Ако ги погледнеме назад во нашите HTML, видовме дека имавме влез [име = симбол]. Тоа значи дека ова ќе го избере тој текст дека корисникот пишува во. Тоа е убаво. Имаме полето за текст. Сега ние само треба да знаеш што е внатре во неа. Да го стори тоа можеме да го наречеме овој метод тука, ова. Вредност, и овој вели знам што полето за текст кој го имате. Сакам да ми кажете што е тоа на корисникот внесе во тој текст кутија. Сега имаме низа наречен симбол кој е еднаков на она што корисникот внесе внатре Тоа е убаво. Можеме да го користиме тој стринг сега да ја направиме нашата барање. Ова е нова функција тука, оваа $, освен ние повеќе нема да биде изборот елементи, ние ќе се повикуваат различна функција која е предвидено да ни jQuery. Оваа функција AJAX е она што всушност се случува да се направи овој HTTP барање. Значи ние треба да го кажам неколку работи. Првото нешто што ние треба да каже на оваа функција е местото каде што сакате барањето да се оди. Некаде во мојот проект имам оваа датотека внатрешноста на HTML директориумот наречен quote.php. Можам да пристапите до оваа датотека, видовме, само вака, ако одам на локалниот компјутер / quote.php. 

Сакам моите JavaScript за да направи барање на оваа страница. Каков вид на барање сега? Видовме пред тоа во форма има тој метод = "пост" атрибут, а тоа значи дека ќе направи еден пост барање, па тоа не се случува да се стави нешто во URL-то, наместо GET барањето, кои само ќе биде отпуштен ако ние само посетена страница со веб пребарувачот, на пример. Сега ние рековме Сакам да се направи пост HTTP барањето до страница се наоѓа на quote.php. Кога ќе ги достават форма, се сеќавам би можеле да пристапите на влезни елементи во внатрешноста на таа форма со кои $ _POST променлива. Досега во приказната не сме всушност пратени заедно сите податоци уште. Ние само рече дека ние сме прави барање AJAX и тука е тип на барањето правиме. Сега ние треба да всушност испрати некои податоци за оваа страница. Да го стори тоа можеме да го користиме овој имот наречен податоци. Вредноста на овој имот е всушност асоцијативна низа. Причината за ова е тоа ни овозможува да испрати повеќе од само 1 парче на податоците. Тоа е причината зошто имаме овие големи загради тука вгнездени внатре на овие други големи загради. Клучеви во овие асоцијативни низи се случува да биде истото како оние името атрибути во нашата форма елементи. Тоа значи дека ако јас испрати заедно со клучот на симбол, тоа значи дека мојот PHP страница може да пристапите до оваа податоци со $ _POST [симбол] исто како што беше порано кога бевме поднесување на формуларот. И сега вистинските податоци сакаме да испратиме ќе биде вредноста во внатрешноста на оваа асоцијативна низа. 

Ние чуваат овој текст во променлива наречена симбол, и така ние испраќаме заедно сега клуч на симболот и вредноста на она што корисникот внесе внатре Сега ние го направиле ова барање HTTP, нашите PHP датотеката погубен, и тоа ќе го испратам некои податоци назад сега на клиент кој само го направи ова барање. Сега ние треба да се одговори на она што на серверот ни рече. Да го стори тоа имаме последниот имот тука наречен успех. Вредноста на овој успех Клучот е всушност ќе биде во функција, и ова е една од навистина кул работи што можете да направите со JavaScript. Не само што може да има ints или низи како вредност во внатрешноста на асоцијативна низа, ние, исто така, може да има функција. Значи, велејќи успех, ова е мојот клуч. Две точки вели тука доаѓа вредност, а сега вредноста на ова е всушност функција. Значи ние не треба да им даде на оваа функција име по себе. Ние само може да се каже ова ќе биде некоја функција. Тоа се случува да се земе 1 аргумент. Го аргументот до оваа функција ќе биде без оглед на серверот ни испрати назад од барањето. Исто како кога нашите пребарувачот прави барање, серверот испраќа нешто назад и прелистувачот се прикажува, во контекст на AJAX ние само го направи барање, серверот испратени нешто назад, и сега имаме кои претставен како стринг. Со тоа стринг Јас само би сакал да се прикаже дека на оваа страница. Да го направите тоа, ќе одам да имаат еден последен селектор. Сакам да изберете елемент со ID цена. Ова е само празна div дека сум создадена на страницата, и јас сакам да го поставите содржината на таа div да биде она на серверот ни испрати назад. Јас сум всушност изменета quote.php малку. 

Наместо нарекувајќи рендерирање и прикажување на некои страница, quote.php сега е едноставно се случува да се печати вредноста на акциите како стринг. Значи, ако сте во ситуација да всушност ја посетите страницата, само ќе видите дека малите низа на она што цената на акциите е. Едно последно нешто што треба да направите тука е само бидете сигурни дека оваа функција враќа false. Што ова кажува е дека ако јас сум во внатрешноста на еден настан управувачот и тој настан управувачот се враќа false наместо враќање вистина, тоа значи дека не сакам оригиналниот настан на оган. Во овој случај, ако не се имате било какви JavaScript и ние достави форма, нашата веб пребарувач се случува да се каже, "Јас одам да испрати дека податоците заедно" и тие ќе ти пратам на друга страница. Бидејќи ние сме со користење на AJAX сега, нема потреба да се испрати на корисникот на друга страница. Ние сме само ќе се прикаже резултатите динамички на истата страница. Ние навистина не сакаат да одат било каде, и сакам да остане на истата страница. Значи со враќање лажни, ние се осигура дека формата не го стори тоа за нас. Ајде да ги погледнеме во она што овој всушност изгледа како. Нашата понуда страница изгледа исто. Дозволете ми да се повлече до инспекторот долу тука, па можеме да видиме што се случува. Направете го тоа малку помалку огромна. Запомни, ако ние се отвори на мрежата јазичето, ова е местото каде што може да се види сите на HTTP барања кои се случуваат на оваа страница. 

За симбол дозволете ми да напишете AAPL и кликнете Get Изрека. Сега видовме дека дел од Епл чини околу бројот на долари само се појави на страницата, но URL не се промени на сите. Всушност, тука е HTTP барање дека ние само го направи. Ние направивме POST барањето до quote.php. Тоа има смисла. Тоа е она што на серверот ни испрати назад. Тоа веќе не оваа гигантска HTML документ со слики и работи како што, тоа е само линија на текстот, а потоа ние едноставно се прикажани линија на текстот. Ако се вратиме на заглавија и да видиме што всушност пратени во внатрешноста на ова барање HTTP, можеме да видиме овде дека сме испратени заедно со клучот на симбол и вредноста на AAPL, што е она што корисникот внесе внатре Ова е убаво, но тоа е уште малку досадни. Јас се уште треба да кликнете на ова копче за да го добиете акции цитат. Ние сме зафатени со луѓе и ние немаме време да кликнете на копчињата. Google реализира ова малку време пред кога тие ги применија Google Инстант. Што Google Инстант не е како што го пишувате тоа само почнува прикажување на резултатите за Вас така да не мора да се грижите за дури кликнување пребарување. Всушност, забава приказна во врска со тоа. Откако Google Инстант излезе, луѓето беа како, "Леле, ова е супер неверојатен." "Ова е толку кул." И студент долу на Стенфорд кој беше 19 во тоа време направи овој сајт наречен YouTube инстант. Сите Инстант YouTube не е ефикасно пребарување на YouTube веднаш. Така, наместо да одат на YouTube.com и хит пребарување, кога ќе почнете да пишувате во ЈуТјуб инстант нешто како CS50, можеме да видиме тука дека тоа е обид да се на бавна интернет конекција доверат овие резултати во живо. Да го направите тоа ние всушност може да направи многу едноставна модификација на нашите quote.js датотека. Токму сега ние сме со приложување овој настан кога форма се поднесува. Ние навистина не сакате да се направи на корисникот поднесува таа форма повеќе, па ајде наместо оган овој настан секој пат кога корисникот ќе ја притиска копче. Да го стори тоа ајде прво промена на настан од достават до keyup. Тоа значи дека наместо да чека за форма да ги достават, секој пат кога ќе се притисне копчето, нешто ќе се случи. Тоа не е логично да се закачите на овој keyup настан за целиот форма. Ние навистина само се грижат за тоа поле за пребарување. 

За да изберете што сега, ние може да го промени тоа да биде, наместо форма понуда, форма-понуда и ние ќе имаат влез (тип = текст) или можеме да кажеме (име = симбол) - она што го сакаме. Сега има едно последно нешто што треба да направите. Запомни овде кога ќе рече дека враќањето лажни рековме дека не сакате тоа стандардно случај на пожар. Но, тоа само така се случува, дека ако се оневозможи дека сега, што и да напишете нема да се појави во прелистувачот повеќе затоа што тоа ќе биде стандардно однесување на пишување во полето за текст. Ние веќе не сакате да ги избегне тоа, па ајде да ги уништи ова враќање лажни. Ако ние спаси и вчитување на страната, сега кога почнете да пишувате AAPL ќе видите дека цената на акциите на дното тука ја завршува автоматски. Па овде е CS50 финансии Инстант. Всушност забава приказна за YouTube Инстант е дека студентските само вид на го напишал како 1 ноќ проект, а следниот ден тој беше понудена работа од страна на YouTube извршен директор. Значи толку едноставно како што, можете CS50 студенти, вашата крајна проекти може да ви работа на YouTube. Такво нешто е навистина кул идеја за финалниот проект, нели? Имавме некои постоечки функционалност која сакавме да се интегрираат со. Ние се подобри корисничкото искуство малку, и одеднаш бараат нешто на YouTube Инстант може да биде многу полесно од пребарувањето за тоа на редовна Јутјуб. Значи тоа е AJAX во мало. 

Во примерите дека Јосиф бил да ги покажувате, видовме многу autocompletes, и оние autocompletes се, навистина, навистина корисна, бидејќи ние не треба да се сеќавам - На пример, ако не се сеќавам на цената на акциите на Apple а ние само знам дека е аа нешто, отколку само велејќи дека за мене, "А дел од оваа работа чини ова многу пари" Јас вид на Би сакал да знам што акции се започне со аа. Ние можеме да правиме што навистина убаво со подигање библиотека која е веќе вклучена внатрешноста на CS50 финансии. Ако дојде до тука за да таг JavaScript и дојдете до Typeahead, ова е само еден убав додаток дека некој веќе пишуваше за нас, и можеме лесно да го користите неговата функционалност се допаѓа ова. Јас ја внеле во А и тука е листа на некои држави што почнуваат со А Да речеме дека мислам дека ова е навистина кул и тоа е време за мене да го вклучите ова на мојата страница. Излезе дека ова е навистина, навистина едноставно. Ајде да скокаат над тука за да quote3.js. Мој датотека изгледа малку поинаква. Долу тука сите мои AJAX работи е иста. Сакам да се вчита на акции на податоци, без да одат во друга страница. Но сега сакам да го користите овој приклучок. На подигање документација има голема примери за тоа како точно можам да го направите тоа. Сакам да кажам "Тука е влез што сакам да AutoComplete на" и јас одам да се јавите на оваа функција наречена typeahead, и дека се случува да се справи со сите на Typeahead работи за нас. Тоа ќе се иницијализира на листата, тоа ќе го стори на сите наши филтрирање. Единственото нешто што треба да знаеме е тоа што податоците сме autocompleting натаму. Така дознав ова копче само со читање на документација и гледа во примери. Ако јас го даде клучот на извор, вредноста на овој клуч само некои низа на работи што сакам да AutoComplete натаму. Оваа променлива дојде од оваа друга датотека. Јас се отвори symbols.js. 

Ова symbols.js е само овој, навистина, навистина голема низа која содржи стрингови на сите овие акции симболи од NASDAQ. Ако сакам да скокне назад во HTML, па jharvard, vhosts, globalhost, HTML, шаблони, quote_form. Бидејќи тоа е сега се нарекува quote3.js, дозволете ми промена на датотеката вклучите сум вклучувајќи тука. Сега имам quote3.js, па ќе одам да се вчита во таа посебна вклучите Javascript-датотека, оној кој вели дека подигање Автоматско комплетирање. Сега кога ќе скокне назад во прелистувачот, од страната, и јас почнете да пишувате аа, таму е мојата Автоматско комплетирање. И тоа беше навистина толку едноставно како што. Имав 1 линија на кодот кој само рече: "Еве работите што сакате да AutoComplete на" и одеднаш имам навистина, навистина убаво функционалност со не во целина многу напор на сите. Како што се развивање на веб-сајтови, а особено пред крајот страна на нештата, ви се случува да се најде ова е случај многу. Постојат многу, многу, многу навистина кул слободен библиотеки таму кои го прават тоа супер лесно да се прават работите се допаѓа ова. Секој може да се мисли на било недостатоци едноставно autocompleting на оваа голема листа на симболи? Што би можело да биде нешто што не е најдобар со овој пристап? Да. >> [Студент] Време, ако имате голем број на [недоловим] Да. Токму сега ние сме симнување овој огромен вклучите Javascript-датотека и има многу симболи. И така, ако имаме еден тон работи, ова би можело вид на зголемување на латенцијата не само на пребарувањето но исто така и симнување на реалните датотека. Велики. Нешто друго? Токму сега нема вистинска смисла на важност. Ако јас внесете А, компаниите кои се појавуваат тука не може да биде од најпопуларните компании кои почнуваат со А 

Пред да стигнам до Apple, тоа може да потрае некое повеќе знаци да се најде она што го барам. Ова AutoComplete не ја имаат оваа чувство на важност. Тоа е само случува да се каже, "Нешто што одговара Одам да се прикаже." Наместо тоа, би сакал некако да се интегрираат некои значење во моите пребарувања. Ако одам овде на Yahoo! финансии, finance.yahoo.com, Ако се обидам да внесете симбол на страница Yahoo! Финансии и јас почнете да пишувате GOOG, имам оваа убава листа на работи. Јасно, тоа изгледа како Yahoo! финансии прави нешто повеќе умен тука. Тие имаат некои релевантноста и тие исто така имаат дополнителни информации како името на акцијата. Тоа е нешто што јас навистина не може да се добие само со моите акции листа на симболи. Сакам ова и така ќе одам да го земам. Да го направите тоа, ајде да направи неколку работи. Ајде прво се отвори на инспекторот на оваа страница бидејќи видовме дека оваа страница не е претовар на сите, па тоа е веројатно користење на AJAX некако да се вчитување на податоците. Ние можеме да дознаете што податоците што се товарење. Ако јас кликнете на оваа мрежа табот, овие се случува да бидат сите барања кои почнуваат да бидат отпуштени. Сега, ако јас внесете пета, можеме да видиме дека јас само доби нов HTTP барање. Ова е веројатно каде што податоците се иде од. Секако, ако се погледне на овој рачно, што е малку чудно име, можеме да видиме дека тоа е токму каде што Јаху е испраќање во близина на нејзиниот податоци од. 

Јас направивме посебен фајл наречен suggest.php тоа е многу слични во духот со пребарување функција. Тоа е во основа ќе се направи пребарување на URL Јаху, се врати некои податоци, и го испрати назад до мене. Сега, наместо користење на оваа голема, огромна листа на симболи, Можам да користам убав релевантност работи Јаху, и јас не треба да преземете дека голем вклучите Javascript-датотека. Јас само ќе се повлече надолу всушност релевантни симболите на акции. Ајде да фрламе во тоа. Значи HTML, js. Ние сме сега во quote4. Сега сме веќе со користење дека голема листа на JavaScript датотеки. Но, има еден мал вид на дизајн проблем тука. Ние рековме дека А во AJAX е асинхрони. Што значи тоа е дека кога ќе се направи барање AJAX, па токму тука на алинеја 8, ова е местото каде што мојата AJAX барање е, всушност, отпуштен од работа. Да речеме дека сега имам некои код овде што се случува да се направи некои работи како го известува корисникот или да промените нешто на оваа страница. Што нема да се случи е интернет пребарувач не се случува да се чека за ова барање да се продолжи пред слегува и притискање на оваа линија. Тоа е асинхрони дел. Тоа се случува да се направи ова барање и да каже, "Кога ќе завршите, "Се врати и повик таа функција која ти реков да се јавите во внатрешноста на успех." Тоа значи дека ние не само да преземете сите акции однапред. Ние треба да се направи на барање и да чекаат за нешто да се врати. Тоа значи дека пред тоа, ние едноставно може да каже подигање, "Тука е листа на работи кои сакам да AutoComplete натаму." Повеќе не можеме да го направи тоа веќе, бидејќи ние не знаеме она што сакаме да всушност Автоматско комплетирање на. За среќа, подигање мислев на ова, бидејќи тие се паметни момци таму, и тие всушност ни даде уште еден начин да се вчита оваа Typeahead приклучок. Пред, вредноста на овој извор на имотот е само овој голем спектар на работи кои треба да AutoComplete натаму. 

Сега извор на имотот е всушност функција, и целта на оваа функција е да дознаам што работи да AutoComplete на се. Начинот на кој таа се случува да дознаам дека надвор е дека ќе побара Yahoo! финансии што најдобро работи кои треба да AutoComplete се. Да го направите тоа, ќе одам да се направи многу слични AJAX барање. Одам да побара оваа страница на suggest.php. Сакам да испратам по симболи уште. И сега ми успех, подигање документација ми кажа дека со цел да се населуваат таа листа на нештата, сите што треба да направите е да помине во оваа низа сега на повратен повик функција. Но, чекајте. Ако ова треба да биде низа и AJAX ме испрати назад текст, како е тоа можно? Ова се воведува нов начин на размена на податоци наречена JSON. Во овој случај ние не сме само испраќање назад едноставен низа на текст. Сега ние сме се занимаваат со оваа покомплексни листа на акции симболи. Овие акции симболи, исто така може да вклучува работи како името на компанијата или тековни цени. Само со користење на голем долга низа тоа не е форматирана во било предвидлив начин е нема да биде најдобар начин да се добие овие податоци од серверот Yahoo до мене на начин на кој лесно може да се разбере. JSON е технологија која носи предност на тоа како ние создаваме асоцијативни низи во JavaScript. Ова изгледа многу како го вклучите Javascript-асоцијативна низа, и во Всушност, тоа е поради тоа што е. JSON стои за JavaScript Цел Нотација. Ова е во основа на договорени формат за пренос на податоци и назад. Еве овој објект JSON или овој JSON асоцијативна низа е ме испраќање на некои податоци за курсот. 

Клучевите од оваа низа се работи како се разбира дека има вредност од cs50, и овде можеме да видиме дека јас може да има вредност, која е низа. Јас не треба да ги правите нештата како анализирам од жици и барате запирки и направи луди работи како што. Бидејќи ова е прогласена во овој формат JSON, JavaScript и jQuery веќе имаат функции да конвертирате стринг што личи ова JSON во вистински вклучите асоцијативна низа дека можеме да работиме со. Прави тоа е толку едноставно како велејќи дека повеќе не е оваа датотека, suggest.php, испраќање ме назад едноставно низа на текст, но знам дека тоа се случува да се ми испраќа назад JSON. Тоа значи дека на JSON може да се конвертира во вклучите Javascript-асоцијативна низа. И така jQuery, јас би сакал да го направи тоа за мене. Тоа значи дека овој одговор параметар тука, ова не е само низа. Бидејќи ние сме изјави jQuery дека тука доаѓа некои JSON, jQuery се случува да бидат доволно паметни за да се каже ", сакаше Можете JSON?" "Одам да го конвертирате дека во асоцијативна низа за вас." Да, всушност, да погледнам во мрежата јазичето еднаш имаме quote4.js. Ќе промени оваа и вчитување на страната. Сега ќе одам да напишеш во-а повторно. Сум направил неколку барања до suggest.php, но сега овој одговор, наместо само на стрингот, тоа е JSON. Значи имам отворен кадрава голема заграда велејќи: "Еве доаѓа асоцијативна низа." 

Прв и единствен клуч на овој асоцијативна низа е наречен симболи, а потоа тука е низа на сите релевантни симболи доаѓаат сега од Yahoo! финансии не, од тој гигантски листа. Тоа е како јас едноставно може да се доверат оваа AutoComplete приклучок со некои податоци што не излегува од локална датотека која веќе однапред но од нешто друго. Излегува дека ние всушност може да ги искористат предностите на технологијата наречена JSONP, или JSON со баласт, што ќе се елиминира овој suggest.php посредник. Но, наместо тоа да го направам, ајде, наместо да ги разгледаме во тоа како можам да се подобри ова уште повеќе. Навистина ми се допаѓа Typeahead подигање на. Тоа е навистина убаво. Но, ние сме добивање на добри во JavaScript и ние сакаме да се вид на направите тоа самите себеси, можеби ги разгледаме во она што овој приклучок може да се прави. Ајде веќе не ја користат таа Typeahead работа, и ајде да се обидеме да се направи оваа листа на предложени акции нас самите. Тука во quote6.php ние ќе започнете на ист начин. Секој пат кога некој тип нешто, ние сакаме да се направи барање AJAX. Ова е слично на нашата изворна CS50 финансии Инстант. Наместо барање до quote.php, ние сме сега за упатување барање до истата датотека како и досега, оваа suggest.php, што е само ќе се повлече податоци од Yahoo! Финансии. 

Повторно, ние сме сè уште очекуваме JSON, но сега од Typeahead не е тоа за нас, ние исто така треба да се испрати по вредност што е внатре во тековната полето за текст. Сега знаеме што да прашате Yahoo! финансии за, па сега тука е функцијата што сакаме да се изврши еднаш на барање заврши. Ние немаме приклучокот да се направи листа за нас, па тука е местото каде што ние, всушност, ќе се изгради листа на предлози. За да го направите тоа, многу сличен во PHP ние concatenated овие големи низи на HTML а потоа ние ги печатат, ние може да го стори истото точната нешто во JavaScript. Прво ние ќе започнете оваа низа наречен предлози, и оваа низа е само ќе содржат некои HTML. Ние сакаме тоа да биде листа на работи, па ние ќе започнете со оваа листа таг, и сега ние ќе iterate во текот на сите симболи кои беа вратени назад кон нас. Запомни, затоа што рековме тип на податоци: "JSON, ова не е стринг. Ова е веќе низа за нас. Тоа е навистина кул. Ние едноставно може да се каже, "Сакам да додадам еден елемент од листа." Ние ќе ја ставам внатре во елемент во страна на тоа, ние ќе го даде класа на предлози за да знаеме што е тоа, а сега тука е симбол кој се вративме од Yahoo! Финансии. 

Откако ние направивме елемент за секој од симболите што ги добиле назад, ние само сакаме да се затвори листата. Па сега предлози претставува оваа мала HTML фрагмент дека кога се стави на страната ќе биде на листата на работи што го барате. Сега ајде да всушност се стави дека на оваа страница. За да го направите тоа дека јас сум всушност се создаваат уште празни div и сум го дал проект на предлози. Слично како ние во собата на содржината на div што ќе се прикаже цената на акциите податоци, ние сега само сакате да го поставите на содржината на овој div на она што овој стринг е која ги содржи овие симболи. Со користење на овој HTML метод, овој предлози променлива, овој стринг е низа на HTML. Сакам да се земе дека HTML и стави го во внатрешноста на div наречен предлози. Ние само додава нешто на ДОМ сега. Додадовме некои нови елементи на ДОМ што ние сега може да се прикаже на оваа страница. Ајде да видиме што ова изгледа како. Ако ние се вчита во quote6 и сега ќе се вратиме, сега кога ќе почнете да пишувате AAPL, ние веќе не имаат тоа подигање AutoComplete, но сега имаме оваа листа која ние самите се направени. Ова е малку погрда од подигање Typeahead, на пример, но тоа не ни дозволуваат да направат една друга работа. Кога бевме во потрага во тоа подигање приклучок, видовме дека кога ние autocompleted, еден од AutoComplete вредности беше AAPL. Тоа не може да биде така корисни. Како корисник, не веднаш да го признае сите на симболите на акции. Она што јас сум веројатно со поголема веројатност да се признае се вистинските имиња на компанијата. Па не би било навистина од голема помош ако наместо велејќи AAPL оваа рече нешто како Apple АД Бидејќи ние сме валани оваа нас самите, ние навистина лесно да го направите тоа. Да се ​​отвори нашата последна понуда датотека тука, па quote7. 

Истото. Јас сум само создаде друг PHP датотеката која ќе се врати на нас повеќе отколку само симболи. Исто така, ќе ни даде назад имиња на компанијата. И така ние сме прави истото. Ние сме прави барање AJAX. Откако барањето има завршено, ние ќе треба да се изврши оваа функција овде, и оваа функција ќе се изгради голема низа на елементи. Но, разликата тука е дека вредноста на овие листи не е само симбол, тоа е сега името. Значи имаме еден мал проблем. Кога ние ги користиме нашите збор, ние треба некако да го положат симбол. Ние не може да помине збор нешто како што е Microsoft Corporation. Ние треба да помине тоа MSFT. Кога сме пишување HTML, имаме многу убаво вграден атрибути. А можеби се поврзани со него на href или класа. Но, она што навистина треба сега е за секој од овие линкови да имаат акции симбол поврзани со неа. Нема вграден за акции симбол HTML атрибут, но за среќа, HTML5 ни овозможува да се создаде нашата сопствена атрибути да биде она што сакаме. Велејќи податоци симбол, јас сум воведе нов атрибут чие име јас само составен, и ова е во ред затоа што тоа упатувајќи со овие податоци. Ние ќе се складира во внатрешноста на таму симбол од акции сега. Што значи тоа е дека иако ние сме прикажување на вредноста на името на компанијата внатрешноста на нашите AutoComplete, ние сме сè уште сеќавајќи се на симболот која е поврзана со секоја компанија. Начинот на кој ние правиме што е внатре во овој елемент себе. Па тоа значи дека ние треба да се направи уште една промена. Кога ќе кликнете на неа сега, ние треба да се, всушност, ги искористат предностите на симболот атрибут наместо само неговата вредност. Ако ние се врати, ние придаваат настан управувачот за предлози. Секогаш кога една од овие предлози е кликнато сега, сакам да направам нешто. Она што сакам да направите е промена на вредноста на тој влез кутија. Сега сакам да го поставите на овој ист вредност функција. 

Значи без никакви аргументи оваа функција вредност се враќа на вас она што е веќе во полето за текст, но ако го даде стринг, тоа се случува да се земе дека низа и го ставив во полето за текст. Јас сум изборот својот текст полето во ист начин. Тоа е име е симбол внатрешноста на форма-понуда. Сега сум го испраќа вредноста на атрибутот податоци симбол. Оваа работа тука е нов, овој $ (ова). Што ова се однесува на е елемент кој е кликнато. Можеме да видиме дека овде не сме поврзани еден клик настан на секој елемент со класа на предлог поединечно. Наместо тоа, ние сме се приближува оваа малку поинаку. Наместо тоа, ние велиме секогаш кога нешто внатре од овој div предлози, што се сеќавам е само сад за таа листа, ако нешто внатре од овој div е кликнато и има класа на предлог, Сакам овој настан да оган. Во суштина она што тоа значи можеме да направиме е дека ние може да повторна употреба на истата оваа настан управувачот за сите нешта во листата. Значи ние не треба да имаат еден настан управувачот за прв елемент и различен настан управувачот за вториот елемент. Ние наместо да се каже, "Сакам истиот настан управувачот да се применува се што е во мојата листа." Но ние треба да некако знаат кој елемент е кликнато. Овој "овој" клучен збор претставува токму тоа. Ова е објект кој е само кликна од страна на корисникот. Ако јас само кликна 3 линк, ова претставува елемент на таа 3rd линк, што значи дека може да се добие своите атрибути, податоци-симбол, кои знаеме мора да содржи симболот што е поврзано со компанијата Јас само кликнато. Ако ние скок назад во нашите финансии страница, можеме да видиме сега дека јас еднаш почнете да пишувате нешто како MSFT, ние не добиваат само симболите на акции, ние сме сега се вистински компании. Но, кога ќе кликнете на еден од овие компании, можеме да видиме дека ние сме всушност населувањето не полето за текст со името на компанијата но со она што беа складирани во внатрешноста на овие податоци атрибути. И така, ако Јас всушност испита еден од овие елементи со десен клик и кликнете Увид Елемент, ние всушност може да се види она што оваа изгледа. 

Запомни ова е нешто што ние направивме внатре во тоа за телефонска линија кога бевме градење на таа низа на HTML. Можеме да видиме дека овде овој податок-симбол има вредност од MSFT, што е одлично. Тоа е она што ние очекувавме. Тоа е симбол и на тој начин добивме вредност што ни е потребно да го користите внатрешноста на овој текст. Тоа е доволно за понуда форма затоа што тоа е вид на здодевни. Ајде само направи некои брзи подобрувања во нашето портфолио страница. Ако сте користеле CS50 финансии за некое време и да започнете купување и продавање на многу акции, на крајот на оваа табела се случува да добиете прилично голема, и ви се случува да сакаат акции тикер, се разбира. Откако маса е навистина, навистина голем, тоа би можело да биде корисно за на корисникот да се обидете да пребарување преку неа. Внатрешноста на поле за пребарување ако почнете да пишувате нешто како Дизни и барате ми Мики Маус акции, можеме да видиме дека на маса е сега филтрирање врз основа на она што јас само ја внеле внатре Оваа функционалност изгледа супер комплицирано, но навистина, навистина лесно со jQuery и JavaScript. Ова portfolio.php датотека вклучува датотека вклучите наречен portfolio.js. Ајде да ги разгледаме во тоа. Значи HTML, js, портфолио. Еве каде ние сме прави дека пребарување на табелата. Првото нешто што треба да направите е да прикачите настан управувачот на тоа поле за текст затоа што знаеме дека ние сакаме нашите филтрирање функција на оган секој пат кога корисникот ќе ја притиска нешто затоа што немаат време за пребарување копчиња. Првото нешто што ние треба да направите е да дознаам што на корисникот е во потрага по, исто како што беше порано. Оваа клучен збор се однесува на тековниот елемент на корисникот е во интеракција со. 

Бидејќи корисникот е во интеракција со полето за пребарување, $ Ова претставува полето за пребарување, па this.val ни дава она што е внатре во полето за пребарување на корисникот е во моментов пишувате. Значи, сега што сакаме да направите е да сакаме да iterate во текот на сите редови внатрешноста на нашата маса. За да изберете сите редови во нашата маса, дадов таа табела лична карта на табелата портфолио, и секој ред е претставена со елемент ТР, па ова селектор ќе се врати да ме голема низа на сите редови во мојата маса. Сега сакам да iterate преку таа низа. Јас би можеле да ви за телефонска линија, но jQuery всушност, ни дава убав функција наречена "секој". Она што секој го прави тоа е секоја трае еден аргумент, и тој аргумент е во функција. Што тоа се случува да направите е да тоа се случува да се применуваат таа функција на секој елемент во внатрешноста на оваа листа. Оваа функција зема еден аргумент дека е e, и кога оваа функција се извршува, ова е ќе биде заменет со првиот ред, потоа вториот ред, а потоа и третиот ред. Со овој начин, ова е истото како водење на за телефонска линија а потоа да пронајдат тековниот елемент врз основа на индексот на внатрешноста на вашиот за јамка. Во секој повторување, за секој од овие елементи во табелата, Сакам да проверите дали текстот на елемент - текстот на ќелијата во внатрешноста на ред - одговара на она што јас сум барате. Ова големо долга низа на команди е како јас да го правам тоа. Прво, повторно, ова сега се однесува на - затоа што тоа е во внатрешноста на новата функција - ова е сега тековниот ред во табелата. Сакам да го тековниот ред во табелата, и сакам да ги добиете сите од своите деца. Запомнете, ДОМ е хиерархиска дрво, што значи дека елементи имаат голем број на деца. 

Ова. Деца функција ќе се врати да ме врати низа на сите елементи кои се деца на, во овој случај, по ред во табелата. Ова е само едноставно клетки во внатрешноста на ред. Јас само сакам да се бараат во текот на првата ќелија. Ова. Првата функција вели дај ми првиот елемент во таа низа. Потоа текстот функција вели ме точно она што е внатре од таа ќелија бидејќи сакам да пребарување преку тој текст. Конечно, да го претворите во мали букви, така што можеме да направиме текст случај нечувствително пребарувања. Конечно, ние сакаме да видиме дали стрингот внатрешноста на маса содржи низа ние сме во потрага по. На indexOf функција во вклучите Javascript-не само тоа. Тоа ни кажува дали или не овој стринг содржи друга низа. Ако е точно дека во ќелијата содржи она што јас сум во потрага по, тогаш сакам да бидете сигурни дека тоа го покажа. Шоуто метод ќе каже, "Прикажи елементи." Ако ова не е случај, тогаш тоа значи дека она што јас сум во потрага по не е содржан во рамките на тој ред, и така сакам да се скрие е од корисникот. Тоа се постигнува тоа убаво филтрирање ефект каде што веќе не можеме да видиме на целата маса. Ако сте заинтересирани за тоа како да се направи овој тикер, како и, ние ќе ја објавите извор онлајн. Но, тоа е навистина едноставно. JQuery има страшни методи за овие анимации и манипулирање со CSS особини. Значи, тоа е тоа за мене. 

Што тогаш лежи напред? Како што ќе видите за неколку дена, конечниот проекти предлог се должи. Конечниот проекти предлог ќе ви поставам неколку прашања, но меѓу нив ќе биде три пресвртници - еден "добар" пресвртница, еден подобар пресвртница, и еден најдобар. Идејата е навистина да им помогне на вас момци поставите вашите очекувања така што минимално ќе бидете задоволни со излез на вашиот финалниот проект и тоа ќе биде "добар" толку колку што сте загрижени. Но, тогаш во интерес на добивање да се постигне само малку да се нешто подобро или нешто најдобро, ние исто така ќе ти се поттикнат да кон тоа како добро. На CS50 hack-а-thon, пак, е за неколку недели. Обично, тоа го правиме тоа на лотарија основа основа, бидејќи од интерес, но шансите се ќе потрае неколку стотици од нас во шатл автобуси од Харвард плоштад до Kendall плоштад каде што Мајкрософт има убава објект во потполност се нарекува "nerd" - Нова Англија истражувачки и развоен центар. Ќе одам таму околу 20:00 Ќе имаат некоја храна. Околу 01:00 ќе имаме малку повеќе храна. Околу 5:00 ако сте сеуште будна ќе минете во текот IHOP или да ве однесе назад во кампусот. Целта не е да се нурне во финалето проекти заедно на соучениците на персоналот. Потоа неколку дена подоцна е CS50 саем, која е навистина значи да се биде можност за вас момци да ја покажат својата работа и достигнувања за семестар додека триење рамениците едни со други и добивање на чувство за она што сите би го правеле. Со тоа, вели, многу благодарение на Томи и на Јосиф, и ние ќе се видиме в понеделник.  [Аплауз]