[Powered by Google Translate] [Həftə 9, davamı] [David J. Malan - Harvard Universiteti] [Bu CS50 edir. - CS50.TV] 

Bu CS50 edir. Bu həftə 9 sonu. Çox təşəkkür edirik. Nəhayət. Həftə 9. Mən var. Bu gün biz web proqramlaşdırma haqqında söhbət davam yekun layihə doğru bir göz ilə, siz web-based bir şey yoxdur, çünki yekun layihələrin lakin son layihələr üçün ya CS50 sonra Bu, əlbəttə, müasir proqram gedir olan istiqamətidir. Və hələ o həqiqətən asan bir şey deyil. Əslində, bunu ən ağır şeyi bir dizayn aspektidir. 

Məsələn, dizayn biz, həqiqətən, istifadəçi interfeysi almaq deməkdir və ya istifadəçi experience hüququ. Daresay I - və biz son bir problem set bilirik siz bir neçə proqram bir parça haqqında sancı yayımlanan zaman və ya hardware kampus və ya off olub, siz infuriates ki - orada sites bir çox var, hardware bir çox orada var bu cür gücünü zaptetti. Lakin reallıq hələ istifadə etmək üçün asan olan şeylər edərək yenə güclü olmasıdır çox çətin bir problemdir. Belə ki, bu gün mən Yusifin və Tommy burada mənə qoşulmaq istədi biz bir söhbət ola bilər, belə ki, həm haqqında dizayn və nə düşünmə proseslərinin cür başını keçir başlamaq lazımdır Siz yekun layihələrin hazırlanması zaman, gələcək səylər. Və sonra Tommy köməyi ilə biz həyata detalların bəzi baxmaq lazımdır. Necə kağız və ya fikrinizi bir görmə ola bilər Əgər proqram icra edə bilər ki, texnologiyaları və texnika bəzi istifadə edərək, biz yalnız söhbət açılmış sonra yəni JavaScript və AJAX, asynchronous JavaScript məhz belə yeni bir şey. Bu bir istifadəçi interfeysi bütün daha dinamik yaratmaq imkan verir bir server tədricən daha çox veri alma ilə. Beləliklə, biz bu gün o parçaları bəzi görəcəksiniz. Bir kənara kimi, kompüter konsentrə maraqlıdır əgər və ya kompüter minoring, bilirəm ki, günorta saatlarında bu cümə Maxwell Dworkin 221 bir pizza hadisə olacaq harada kompüter haqqında bir az daha çox məlumat bilərsiniz. Qapı həyata sizin yol, bu gün siz Harvard CS üçün qeyri-rəsmi guide ala bilərsiniz. Biz bel boyu kənarda zibil qutuları qoyun lazımdır belə ki, bu işğalçı və CS haqqında bir az daha ətraflı məlumat istəyirsinizsə, bu həftə 0 idi ki, sizin üçün olacaq. Siz 1:15 pmsaat bu cümə CS50 nahar üçün bizə qoşulmaq istərdim Həmçinin, əgər cs50.net/lunch giderim. Daha ADO olmadan, sizə tədris işçisi Cozef Ong verir. Salam. [Alqış] Thanks. Mən layihə haqqında öyrəndim ilk CS179 adlı burada bir sinif idi. 

Zamanı professor bizə bir professor haqqında hekayə bildirib bir otel getdi və faucets istifadə etmişdi. Hər kəs sol nə 2 kulplar mənə və sağ edə bilərəmmi? [Tələbə] Seksual və soyuq. >> Isti və soyuq. Yaxşı. Normal gözləmək nə, sağ? Bu kran istifadə sonra professor bir duş almaq istəyir və o, bu istifadə etmək gəlir. O, sol düşünür və sağ tərəfdən sağ, isti və soyuq var? Amma hər kəs mənə bu həqiqətən nə deyə bilərsiniz? Hər əlləri? [Işitilemez tələbə cavab] >> biri təklif edir? [Işitilemez tələbə cavab] >> Temperatur? Belə ki, onlardan biri temperatur və digər nəzarət nəzarət? >> [Tələbə] Su təzyiqi. Su təzyiqi. Yaxşı. Bu professor, bu daxil dolaşır və onlar isti və soyuq nəzarət düşünür o isti, bütün yol qədər hesab edən sağ biri çevrilir o bir isti duş qəbul etmək istəyir. Yaxşı, bu, həqiqətən, uyğun deyil, belə ki, o, bu çox fun deyil təcrübə alır bir soyuq duş olan və biz bütün bu kimi hiss bilirik. Bu bir dizayn qüsur nümunəsidir. Ki, kran onun gözləməsinin ilə nə demək duş çıxdı nə uyğun gəlmədi, Onun üçün uğursuz növü olan. Belə ki, bu real həyatda olur ki, bir dizayn qüsur nümunəsidir. Lakin biz həmçinin digər isə hər cür görürük. Biz yəqin ki, MBTA sisteminin azarkeşləri deyilik. Bu, deyir ki, London həqiqətən bir metro sistemi, "Bu düyməni istifadə deyil." Nə var belə edir? Niyə biz belə qayğı yoxdur? Mən bir uşaq, ev texnologiya fərasət biri olan zaman kompüter avariya ki, zaman mənim ana, mənə gələcək Bu ekran göstərən və mənə xahiş nə baş verib. 

Hətta mən bu nə deməkdir bilmirəm. [Gülüş] nədir? [Gülüş] Bəzən biz proqram developers kimi hiss yalnız trolling Bookmark var. Istifadəçilər biz kimi etdiyiniz kimi, "nə gedir? Biri bizə." Bu, bütün dizayn bir məsələ aşağı düşür. Design, biz göründüyü kimi, estetik sırf deyil o şeyi baxmaq haqqında deyil. Biz bu pop-up burada çox az həqiqətən olduqca gözəl görünür ki, burada baxın. Bu fonda bir damla kölgəsi, bu davam sərhəd radiuses var. Bu olduqca növü var. Çox istifadəçi dostu deyil, çünki, həqiqətən, yaxşı dizayn deyil. Gəlir ki, pop-up Bu az həqiqətən mənə heç bir məlumat vermir neler haqqında, bu istifadəçi kimi mənə bir şey demək deyil ki, səhv bərpa haqqında. Biz dizayn deyil şeylər haqqında düşünmək istəyirəm. Birincisi, estetik deyil. O, həmçinin, gərəksiz funksionallığı ton app içlik deyil. Bir Tay restoran edirsinizsə, siz yəqin ki, eyni zamanda bir diş həkimi olmaq istəmirəm. Və Facebook suallar ilə, bir çox insanlar istifadə edir ki, və onların tikinti nə əsas da həqiqətən deyil. Və bu qədər şeyi miqdarı deyil düşünmək gözəl Siz ərizə lakin keyfiyyəti qoyulması olduğunuz və necə daha yaxşı user experience edirik tərəfindən həqiqətən artıq nə ilə təkmilləşdirilməsi. 

Özetle, dizayn biz qurmaq nə bizə deyir. Məsələn, biz şeyi axtarmaq edək ki, bir şey bina edirsinizsə, Google kimi, misal üçün, biz bir şəkildə şeylər olmalıdır ki, istifadəçi istədiklərini almaq üçün klik çox etmək tələb və ya Google Instant və ya AutoComplete ilə, misal üçün, bir şəkildə bunu etməlidir ki, bizim nəticələr daha sürətli almaq imkan verir? Tommy həqiqətən, tikinti gösterir kimi Engineering, daxildir. Dizayn növlərinin çox var. Məsələn, bir şey bina əgər bir şey yerləşdirmək çox elektrik və ya çox texnologiya olmadığı bir Üçüncü Dünya ölkədə Əgər tikinti ne dizayn var asanlıqla orada insanların imkanı verir bir şəkildə. Amma digər dizayn qərarları növ ola bilər nə və ya bu kimi bir şey cəlb ola bilər? Bəli. Mən bir tərəfdən baxın. [Işitilemez tələbə cavab] >> hüququ. Exactly. Erişilebilirlik bir şeydir. Bir çox insan "Nə mənim istifadəçi?" Haqqında düşünmürəm ya spektrinin ifrata kimi. Mən düşünmədən deyiləm ki, əlil ola bilər olan istifadəçilər var və yalnız ümumi istifadəçi üçün dizayn haqqında düşünür alıram. İnternet, hazırda hər kəs tərəfindən əldə və mən də o insanlar üçün dizayn edilməlidir. Nə digər dizayn qərarları növ edə bilər? Bəli. >> [Tələbə] dəyər. Başa gəlir. Çox yaxşı. Biz dizayn qərarları əsaslandırmaq bilər başqa bir şey dəyəri var. Biz bir iş edirsinizsə, siz istehsal çox dəyəri almaq deyil ki, bir şey yaratmaq istəyirsinizsə, amma xüsusilə yüksək dəyəri ilə sata bilər və ya bizə mənfəət əldə edə bilər. 

Bu layihə bütün müxtəlif növləri var, lakin biz İnternet bir şey bina etdiyiniz zaman və ya biz yəqin ki, indi yaratmaq çox dəyəri olmayan bir şey bina etdiyiniz zaman, Internet applications kimi - siz onu çox kapital atmaq yoxdur həqiqətən çalışır ki, bir şey etmək üçün - nə haqqında daha çox narahat olduğunuz istifadəçi experience edir. Biz bu istifadəçi mərkəzli dizayn çağırırıq. Əsasən hansı istifadəçi mərkəzli dizayn daxildir kullanıcılarınızın ayaqqabı özünüzü qoyulması edir. Mən tikinti alıram nə üçün kimsə əlamətləri qədər varsa, onlar açıq-aydın nəzərə qolu ilə mənim xüsusi ərizə gəldiniz bir vəzifə ilə onlar başa istəyirəm. Və iş onlara tapşırıq tam kömək etmək üçün deyil lakin onların intuitiv, səmərəli bir şəkildə ki, məsələ tam kömək etmək, və bəzi adam orada dediyi kimi, əlçatan. Səmərəlilik nə deməkdir? Səmərəliliyi necə tez mənim istifadəçi mənim interface verilmiş tapşırıq başa deməkdir. Onlara bir yerdən digər almaq üçün klik çox almaq mı? O yorucu deyilmi? Onlar təkrar vəzifələri çox yerinə yetirmək üçün var? Biz mümkün qədər səmərəli kimi proses etmək onlar şeyi bu cür etmək yoxdur. Bir istifadəçi interfeysi mənim qədər görünür əgər intuitiveness görə ki, məsələn, edir, onlara yer yer almaq üçün asandır? Onlar mənim interface basın nə anlamaq üçün asan məqsədilə onlar üçün onlar nail olmaq istəyirik ki, məqsəd və ya vəzifə nail olmaq üçün? 

Bir nəfər orada bildirib və nəhayət, accessibility çox vacibdir. [Kişi natiq] Bu görmə kimi şeylər üçün accessibility gəlir Mən, həqiqətən, kor olan kimsə üçün bir şey dizayn nə istəyirsiniz? Oh. Bütün görmək bilməyən insanlar üçün, biz ekran oxucu deyilən bir şey var. Nə lazımdır bir şəkildə veb qurmaq lazımdır ki, məsələn, biz dediyimiz xüsusi texnologiyaları - İndi şeyi çox var. Mən Jaws adlı ekran oxucuları var. Bunlar çox biz sahəsi qaydaları zəng nə etibar səhifə dair nə istifadəçi həyata oxumaq üçün. Göremiyorum edənlər üçün, siz əmin etmək lazımdır ki, bu ekran oxucuların əslində səhifə içerik ala bilər və həqiqətən, sizin users göstərə bilər, Gördüyünüz halda, ən azı hələ səhifə içerik anlayarlar. Bəli. Okay. Kifayət qədər yaxşı dizayn söhbət. Pis dizayn haqqında danışmaq edək. Bu nə ki şeylər. Hər kəs Craigslist ilə təcrübə haqqında misiniz və nə düşündüklərini bu layihə barədə belə böyük deyil? Bəli. >> [Tələbə] Mən çox sözlə bir sahədə var edirəm. Çox çox sözlə, sağ? Tamamilə böyük. Bu səhifə gəlmək və burada şeyi bütün dəstə ilə qarşılandı edirik hətta sizin üçün əhəmiyyətli ola bilər. Məsələn, bu məktubu ilə başlayır ki, bir dövlət yaşayır. Gəlin siz Texas və ya bir şey yaşamaq demək. 

Siz var yeri almaq üçün səhifə aşağı bütün yol hərəkət etmək var. I Boston dən edirəm, mənə Massaçusets baxaq. Massachusetts haradadır? Oh, burada var. Oh, Boston var. Okay. In Boston baxaq. [Gülüş] Pretty böyük, sağ? Orada yöndəmsiz şeylər. [Gülüş] Gəlin Mən yaşamaq üçün haradasa arıyorum deyirlər. Necə bir çox insanlar həqiqətən Craigslist istifadə? Siz ton. Bu baxmaq, lakin bu baxaq olduqca pis yolları var. Img və pic arasında fərq nədir? Hər kəs mənə deyə bilərsiniz? Əslində heç bir fərq yoxdur. Onlar eyni şey demək, onlar nədənsə onlar üçün müxtəlif yazıları var. I var tıklarsanız Image, heç bir səhifə olur. Mən, həqiqətən, nə bir şey daha Axtar basın. Nə var edilə bilər ki, bir yaxşı dizayn qərar ola bilər? Hesab edirəm ki, filter tıklayarak alıram, mən yəqin ki, xüsusi fəaliyyət Süzme etmək istəyirəm və ya xüsusi kateqoriya. Əvəzinə yenidən Axtar basın malik Belə ki, yalnız avtomatik filtreleme edə onlar dərhal bunu Google stil növ. [Malan] Amma biz onlara bu günə qədər fiziki təqdim olunmalıdır gördüm kimi təşkil etmir vuraraq ən azı və ya bir düyməsinə tıklayarak daxil edin? Siz onları gördüm ki, siz həqiqətən o şeyə təqdim basın. 

Lakin Tommy ikinci gösterir kimi, həqiqətən, sizin üçün yol var ki şey basın avtomatik olaraq göndərə bilərsiniz, belə ki, biz bir AJAX tələb zəng və geri məlumat almaq və dərhal nəticələri filtrelemek nə. Bu interfeys ilə səhv şeylər ton var. [Malan] Siz Cambridge üçün axtarış edə bilərəmmi? Siz Cambridge qayğı yerləşir yüngül anomal bir şey burada var və hələ WESTFORD, Bahar Hill, West Newton və kimi əldə edirik. Yəqin ki, heç ideal. >> Yəqin ki, ideal deyil. Mən bu səhifə, istifadəçi experience daha yaxşı etmək üçün edə bilər? Bəli. >> [Tələbə] Təlimatlar. Okay. Mənada nə cür təlimat? Məsələn [tələbə], hətta Craigslist nə bilməyən ilk dəfə istifadəçilər üçün bir şey və ya siz nə etməli olduğunuz bilmirəm. Sağ. Belə ki Craigslist Bu səhifə nə izah vacibdir. Biz, həqiqətən, bu səhifə üçün əslində nə istifadəçilər deyə bilərsiniz. Mən yalnız bu səfər edirəm, mən locations bütün dəstə görürük. Mən hətta onlar demək nə bilmirəm. Amma daha əhəmiyyətlisi, yalnız bu interface baxaraq Mən xüsusi icma tapmaq şeyi bir ton aşağı diyirləyin idi unutmayın Mən, həqiqətən, bu barədə qayğı ki. Hesab edirəm ki, ola bilər bir sürətli yolu nədir? Bəli. [Tələbə] onlara şərq, qərb rayonlarında qədər bölün. Okay. >> Mən daha sürətli müəyyən kömək edə bilər ki, kateqoriyalar onları bölmək bilər xüsusi yeri almaq üçün necə. [Tələbə] açılan siyahısı qoyun. >> Hüququ. Okay. Biz şeyi sabit dəsti var, çünki mən bir açılan menyu istifadə edə bilər və biz bir açılan menyu onları göstərmək bilər. Bu yolla o, ekranda çox yer tutur deyil. Lakin daha yaxşı, biz nə edə bilər? Bəli. Siz daha >> [işitilemez tələbə cavab] >> demək olarmı? >> [Tələbə] Axtar qutusu. Bəli, bir axtarış qutusu. Bu harika. Biz slaydlar, axtarış qutusuna geri baxmaq əgər biz həqiqətən nə bilər. Autocomplete. Bilirsiniz ki, nəticələri ilə axtarmaq üçün çox asan bir sıra var. I BO yazaraq başlamaq istəyirsinizsə, yalnız mənə onların BO daxilində olan bütün nəticələri göstərir. Bu yolla çox asanlıqla Mən getmək istəyirəm xüsusi bir tapa bilərsiniz əvəzinə bu, həqiqətən böyük siyahısını diyirləyin üçün olan. 

Bu, həqiqətən, aşağı asma meyvə bütün növ ki Craigslist həyata kimsə həqiqətən onların xüsusi istifadəçi üçün bir çox yaxşı web təcrübə etmək üçün nə edə bilər. Okay. Yetər pis saytları haqqında söhbət. Facebook haqqında danışmaq edək. Facebook çıxdı, xüsusilə Facebook photos zaman, eyni şeyi edə biləcək zamanda digər xidmətləri çox olmuşdur. Onlar albom daxil photos təşkil edə bilər. Nə edə bilər, həmçinin dəstləri onları təşkil bilər. Siz tarixi ilə onları təşkil edə bilər. Siz bütün bu xüsusi şeyi bilər. Amma hər kəs Facebook photos onu azad edilib və zaman partlayışa edib nə bilir? Bəli. >> [Tələbə] Tags. >> Tags. Exactly. Biz CS50 bandana ilə it maskot olan burada Milo var. Siz biz ortada bu etiketleme xüsusiyyət var ki, görə bilərsiniz. Və nə bir Kullanışlılık baxımdan Facebook photos qədər maraqlı edib əslində bu vasitəsilə insanların photos onların dostları cəlb icazə edir. Facebook üçün, onların veb xüsusən sosial, çünki sosial mühit bu cür tikinti haqqında. Bu daha çox photos təcrübəsi təkmilləşdirilir onlar həqiqətən deyərək başlamaq bilər, çünki "Bu, insanlar arasındakı əlaqələri var və bu, həqiqətən, qayğı insanların photos var. " Bir hissəsi də sort narcissism edir. İnsanlar kimi foto və şeyləri tagged etmək istəyirəm. Yaxşı bir insan xislət mütləq deyil baxmayaraq, eyni zamanda yaxşı dizayn qərarları əsasında insanlar həqiqətən bu kimi şeylər haqqında qayğı, çünki. Belə ki, Facebook photos var. 

Lakin daha çox, ümumiyyətlə Facebook danışaq. Mən burada insanların çox Facebook haqqında fikirlər var əminəm yaxşı dizayn qərarları və pis dizayn qərarları həm də. Belə nin çıxış və ya xoşbəxt olsun. Hadi. Mən sizin bütün Facebook istifadə bilirik. Bəziləri deyə pis bir şey və ya bu barədə demək yaxşı bir şey var. Bəli. Xəbər feed ildə [tələbə] Mən, həqiqətən, haqqında qayğı yoxdur çox şey var. Bu news feed haqqında qayğı bilər çox şey göstərmək deyil. Siz 2 və ya 3 il görüşüb olmayan Facebook dostları var və onların xəbər nəticələri news feed qədər yaratma bax və həqiqətən bu barədə qayğı yoxdur. Facebook həqiqətən, bu daha yaxşı etmək üçün cəhd etdi və onlar, həqiqətən, mərhumun kimi news feed üst müvafiq nəticələr çıxarmaq denedim belə ki, həqiqətən siz və ya yaxın dostları üçün müvafiq olan dostları şeyi görürük. Başqa bir şey? Bəli. Daha ki, [işitilemez tələbə cavab] >> demək olarmı? [Tələbə] reklam nisbətən sadə olur. Nə mənada >>? [Işitilemez tələbə cavab] Onlar plakatlar kimi, ekranda işıq yoxdur. Okay. Bu yaxşı. Siz 90-cı Internet xatırlayıram varsa - >> [Malan] Mən var idi. >> O, var idi. [Gülüş] Siz sparkly flashing gifs fonları şeyi xatırlayıram bilər Şeyi GeoCities stil sort. Bu, həqiqətən bir yaxşı dizayn nümunəsi deyil həqiqətən content dağıtan, çünki. Onların fon kimi animasiya gifs üçün istifadə Yale incəsənət veb və siz səhifə heç bir şey oxumaq bilmədi amma kimsə həqiqətən, onlara danışdım və indi bir az fərqli danışarlar. [Malan] indi çox yaxşıdır. Gördüyünüz kimi, indi çox yaxşı >>. >> [Malan] Bəli Oh. Yalnız böyük, yalnız - Bəli. Okay. 

Bir hissəsi də səhifə bəlkə çox minimalist və çox aydın edir çox məntiqi bir şəkildə səhifə axını şeyi belə və hər bir digər yolu yoxdur. Başqa şeylər nə növ Facebook haqqında yaxşı və ya Facebook haqqında pis? Nin yalnız burada bir dizayn söhbət edək. Oh. Harada? Bəli. [Tələbə] Yeni Timeline sistemi onların keçmiş haqqında şəxsin profili axtarış imkan verir. , Timeline Ooh. Bu sapı dostlara imkan verir, çünki Timeline bir böyük şey geri onlar orta məktəbdə olanda. Bir çox sürətli content vasitəsilə filtrelemek imkan verir, çünki Timeline, yaxşı bu başqa tapmaq üçün həqiqətən uzun müddət qəbul ki şeyi tapmaq imkan verir yalnız zaman geri gedir kimi, up, up, up, up, up, kaydırarak və aşağı. Amma sonra bir İşin mənfi tərəfi odur növ istifadəçi təcrübəsi baxımından o da var. Nə ola bilər? P-R ilə başlayır ki, böyük söz. >> [Tələbə] Privacy. >> Privacy, sağ? Privacy böyük bir user experience məsələdir. Bu indi Facebook haqqında ən nifrət şeyi biridir. [Gülüş] [Malan] kimi indi. David bu həqiqətən dünən qədər baş dərk etməyib. Belə ki, indi o, mən ona söhbət hər dəfə o, mənə məhəl edilmişdir var bilirsiniz ki, bilir. [Malan] Mən, həqiqətən, ona olan yöndəmsiz hissəsi məhəl edilmişdir və mən o mən ona məhəl bilirdi bilmirdim. [Gülüş] Privacy böyük bir məsələdir. Burada hər kəs Facebook gizlilik haqqında pis ola bilər nə mənə deyə bilərsiniz bu kimi şeylər ki başqa? O Facebook gizlilik hörmət etmək xüsusilə ağır nədir? Ki, sort aparıcı sual. Bəli. >> [Tələbə] müəyyən insanların şəkilləri gizlət. Sağ. Məhz, müəyyən insanların şəkilləri gizlətmək. Onlar bir şəkil gizlilik keçid imkan verir ki, yuxarı sağ bu kiçik, az düyməsini var. Onların gizlilik variantları çox menyular müxtəlif növ arasında müxtəlif olunur. 

Onlar son vaxtlar bu barədə çox yaxşı kazanılmış sonra, lakin bu halda olmaq üçün istifadə Gördüğünüz photos arkadaşlarınızla qarşısını almaq istəyirdi zaman ki, siz kimi olan bir çox mürəkkəb 5-addım prosesi keçmək lazımdır Mənə bu linki vurun, qoy indi mənə yenidən basın, qoy, məni yenidən basın bildirin Mənə insanlar mənim photos bax bilməyən müəyyən edək. Bu Facebook hissəsi xüsusilə yaxşı deyil istifadəçi təcrübəsi haqqında çox həqiqətən, onlara azadlıq verir, çünki nəfər görmək nə nəzarət etmək. Biz bu istifadəçi nəzarət və azadlıq zəng. Siz imkan değilseniz users ki, səmərəli və asan bir şəkildə, sonra istifadəçi experience bütün həqiqətən böyük deyil.  Uşaqlar Facebook haqqında bir şey demək istəyirsinizmi? Mən bu kapatabilirim? [Ong] Bu söndürmək bilməz və Facebook hissəsi böyük Kullanışlılık qüsur deyil. Bu xüsusiyyət - Mən, həqiqətən, dünən onu baxdı - siz bunu edə bilər ki, ya var və ya bir yerdə, çox dərin dəfn edir Facebook recesses Mən bütün bu işlevselliği aradan necə anlamaq bilməz. [Malan] Lakin bəzən bu qərarların aşkar deyil uşaqlar müxtəlif CS50 applications bizə faydalı rəy çox verilən çünki və kurs istifadə edən saytları. Biz bu istək və təklifləri bütün həyata deyil. 

Ki, Part, bu zaman bir funksiyası var ki, bir çox sorğu almaq üçün amma bəzən biz kimi şüurlu bir qərar, "Təklifi üçün təşəkkür edirik, ancaq biz razı deyilik." Users bir şey etmək lazımdır Əgər siz həqiqətən, sizin nə karar verirsiniz siz mütləq deyil? hətta Bu, həqiqətən, sizin users nə dinləmək arasında gözəl balans var deyə yerləşir və həqiqətən, xətti bir növ olan "Biz bu istifadəçi nə etmək fikrində deyilik". Və xüsusilə də, mən olduqca yaxşı yekunlaşdırır ki Henry Ford tərəfindən quote var idi. "Mən nə istədiyini insanlar xahiş olsaydı, onlar daha sürətli atlar istədiyini söylədi olardı." Hər kəs o quote həqiqətən nə deməkdir ayrı sataşmaq və sort edə bilərəmmi? Bu, istifadəçilər istədikləri nə yalnız deyil lakin bu çox var - [Tələbə] Onlar mümkün nə bilmirəm. Hissəsində onlar mümkün olduğunu bilmirəm. Ki, ayrı bir az daha Tease. Siz nə deməkdir? [Işitilemez tələbə cavab] Bu yaxşı. Mən burada demək çalışdığınız hesab insanlar istədiyiniz nə deyil. Onlar daha sürətli atlar istəyirəm. Ne həqiqətən istəyirsinizsə, sürətli hərəkət etmək qabiliyyəti lakin onlar həqiqətən nail olan orta bilmirəm. Siz istifadəçi gəlmək və istifadəçilər bir şey demək zaman və onlar, "Biz bu xüsusiyyətləri və bu xüsusiyyətləri və bu funksiyalar istəyirəm", siz demək siz mütləq düşünmək istəmirəm "Mənə davam edək "Və onlar aşkar nə həyata" amma nə barədə düşünmək istəyirəm "ideyaları sort edirəm ki, əldə edə bilər?" edir Əslində nə istəyirsiniz? 

Və sizə nə bu sorğu cavab verən bir şey dizayn edir lakin mütləq istifadəçi razı gözləyir ki, yolu. Belə ki, çox real baxımından son layihələr kimi bir şey üçün, daha yaxşı bir şey edilməsi gəldiyi zaman faydalı Heuristic, nə bu dizayner onun haqqında bu təkəbbür var, xüsusilə də əgər siz növ ən yaxşı nə vasitəsi, siz, istifadəçilər daxil ola bilər amma həqiqətən ki, rəy alınması haqqında necə getmək yoxdur? Son layihələri, çox konkret, nə burada optimal nəticələr istehsal? Nə optimal nəticələr istehsal - və mən ikinci bu artıq gedəcək - inkişaf və sonra test və sonra iterating bu prosesdir. Əgər bir şey dizayn zaman Mən test demək adətən siz kimi, olduqca yaxşı hesab edirəm "Mən belə bir böyük dizayner deyiləm. Hər kəs bu sevgi gedir." Və sonra orada söndürmək və insanlar nədənsə həqiqətən kimi deyil. Nə üçün siz insanlar kimi ki şeyə hissələri almaq lazımdır və insanlar kimi deyil ki, hər şeyi Revamp. Bu, çox aydın proses kimi səslənir, lakin bu proses daim iterating Əgər siz artıq inşa etdik nə üst sizə kömək edən bir prosesdir Öz dizayn bacarıqları saflaşdırmaq həm də dizayn saflaşdırmaq kömək edir yalnız insanlar həqiqətən daha əvvəl idi artıq məhsul üçün təşəkkür edirik ki,. 

Mən sizə həqiqətən edə bilər nə daha konkret nümunələr üzərində getmək lazımdır. Məhsulun son Məsələn növ kimi, KANO baxaq. Həyata gələndə KANO çox məşhur idi. Niyə hər kəs təxmin edə bilər? Siz onu istifadə Əgər bu kimi şeylər növ hansılardır və ya nə kimi deyil şeyi növləri var? Bəli. >> [Işitilemez tələbə cavab] >> OK. Bir hissəsi ki, istifadəçi daha geniş bir sorğu var imkan olunur kimi bir çox məhdudlaşdırıcı bir daha "Siz başlanğıc tarixi seçin var "Və sizin son tarix seçin var." Əslində, bu barədə çevik imkan verir və siz intervalında uçuşlar bütün verir. Başqa bir şey? [Tələbə] Onlar qiyməti haqları daxildir. Onlar qiymət haqları daxil edin. Vergilər və hər şeyi həqiqətən yuxarı sol ki, qiymətində düz getmək belə ki, siz həqiqətən bir $ 240 uçuş üçün payment etdiyiniz düşünən aldattýn deyilik həqiqətən $ 330 zaman. Başqa bir şey? Bəli. [Işitilemez tələbə cavab] Onlar həqiqətən ki, bunu bildirin əgər mən əmin deyiləm. Səhv ola bilər. Siz xüsusi filtreler daha çox çəki qoymaq istəyirsinizsə maraqlı bir şey ola bilər onlar üst ki, filter bağlı nəticələri təkan verir. Lakin hər kəs bu sol qədər xüsusi nə mənə deyə bilərsiniz? Necə ənənəvi əvvəl İnternet xidməti üzrə uçuş axtarmaq idi? 

Bəli. Əgər >> [işitilemez tələbə cavab] >> demək olarmı - [Tələbə] Hər bir hava. >> Bəli. Hər bir hava öz veb var. Bu şeyləri birləşdirir. Və? [Tələbə] Siz tərk etdiyiniz dəqiq nə vaxt bilirik. Siz tərk etdiyiniz dəqiq nə vaxt bilmirəm amma xüsusilə filtreler bağlı. Mənə KANO qoparmaq edək. Allah Oh, pop-up. Bad istifadəçi təcrübəsi. Mən bu kaydırıcıyı hərəkət ne olur? [Tələbə] Avtomatik yenilikləri. >> [Ong] Avtomatik yenilikləri. Çox vacib olan bir şey var. Bu əvvəl, bir uçuş yuxarı baxmaq istəyirdi zaman, Siz daxil yeri, sizin çıxış yeri, mətbuat Axtarış qoymaq idi ki, emal və nəticələri göstərmək olar. Əgər sorğu dəyişmək istəyirsə, siz iki dəfə geri düyməsini basın olacaq sıfırdan yeni bir sorğu daxil edin və daha artıq yoxdur və. Bu kimi bir şey haqqında gözəl şey ortada bir çox [anlaşılmaz] şey istifadə edir. Bu kimi bir şey olduqda, bu tələb off tumurcuqları və dərhal bütün nəticələri qaytarır. Dərhal rəy Bu cür KANO wildly məşhur etmişdir ki, bir şey mənə yalnız mənim sorğu dəyişdirmək üçün həqiqətən asandır çünki və müəyyən bir sıra ətrafında olan şeyləri anlamağa geri və irəli, geri və irəli, geri və irəli getmək üçün olmadan. Belə ki, bu sizin veb dizayn etdiyiniz zaman düşünmək istəyirəm şeyi bütün növ var. Mənim users çalışırıq hansı yolu ilə getmək üçün nasıl çox səmərəli edə bilər və mümkün qədər tez onların son məqsədi əldə etmək olar? [Malan] Və əvvəllər mütləq istədiklərini bilməyən istifadəçilər haqqında Yusifin nöqtəsi, uşaqlar indi HTML haqqında nə əsaslanır və onay, radio düymələri seçin menyular, giriş sahələri və bənzəri var necə bir uçuş üçün start zaman aldığınız anlayışı həyata olardı? 

Bu müxtəlif UI mexanizmlərinin hansı istifadə edir? Yalnız əvvəl tədris ki, HTML məbləği bilirsinizsə və siz giriş radio düymələr, onay, açılan verilməsi və giriş qutusuna bilirik təbii seçim tarixləri seçmək üçün nə olardı? [Tələbə] Input. >> Input. Və ya bəlkə hətta bir açılan tarixləri bütün, sağ? Belə ki, həyata keçirə bilər ki, sol tərəfdə bu kimi daha mürəkkəb UI mexanizmləri ilə bir kaydırıcıyı ilə bu proses daha asan edə bilər vaxt davamlı, çünki, insanlar adətən diskret chunks baxımından bu düşünmürəm. Bütün hüquqlar. Son şey. On Kullanışlılık heuristics. Biz danışıb hər şeyi yəqin ki, bu kateqoriyalar biri altında düşür. Siz sites online dərc olunacaq bu link, getmək edin sizin sayt dizayn kimi, həqiqətən, bilərsiniz, ağıl bu heuristics saxlamaq thumb və bu qaydaları. Layihələr, mən app daha yaxşı dizayn üçün nə təklif ilk kağız prototip etmək. Siz ərizə haqqında düşünür istəyirsinizsə zaman, çox tez bu kimi baxmaq istəyirəm nə eskiz və əmin olun bütün qutuları istifadəçi istifadə etmək üçün çox asan bir şəkildə təşkil olunur və hətta dostlara bu kağız prototipləri göstərir və fokus qrup başlamaq. Sadəcə, birlikdə 2 və ya 3 nəfər almaq və yalnız bu kağız prototipləri haqqında kran isteyin və onlar, həqiqətən, neler anlamaq görmek üçün onlara yeni ekranları göstərir. 

Nə istəyirəm ki, tapşırıq həvəsləndirmək, onlara bir tapşırıq verir ki, və yalnız onlara app vermək və onlardan istifadə edək. Onlara kənarda təlimat vermir. Siz, həqiqətən, onlara bax imkan verir ki, bir şekilde app ilə qarşılıqlı imkan istəyirəm Əgər siz onları yanında daimi deyil, əgər onlar necə istifadə edərdi. Və bu çox vacibdir. Xüsusi şeyi ətrafında almaq insanlar üçün ki, anlayışların çox verəcək Mən onlara niyyətində olmadığını bir şəkildə? Onlar ekranda xüsusi UI mexanizmlərindən istifadə edirsiniz bir şəkildə hacky növü? Onlara bu yol nə üçün mən niyyətində deyil idi. Və bir dəfə ilə tamamlayın, siz nə istəyirsiniz? Sizin dizayn qayalar, sağ? Nə istəyirəm siz daha nə sonra bu proses inkişaf və istəyirəm. Belə ki, bu inkişaf sonra dostlara göstərmək, bu test inkişaf test inkişaf, test, təkrarlamaq, və və irəli. Design bir çox bu mənada prosesi iterativ edir. Siz, həqiqətən, bu barədə hər şeyi həyata sonra bir şey qurmaq və var əvvəl həyata və geri ki yaxşılaşdırılması etməyib. İndi kimi inkişaf hissəsi ki, Tommy fasilədən sonra sizə göstərmək üçün gedir nə və necə AutoComplete kimi bir şey həyata edə bilər olduqca sadə bir şəkildə. [Malan] kimi Tommy bir sual sonra, burada edir. A erkən saytları çox - zaman Yusif, 1990-cı stil veb bildirib o, bir başlanğıc seçin istəyirdi yerləşir həyata və son dəfə idi səmimi, bu gün geri gün və hətta bəzi saytlarda, Bunu yolu, bir açılan bir saat seçin edir siz, PM, açılan, bəlkə AM seçmək dəqiqədə seçin sonra 3 dəfə edin. Və 6 klik və bəlkə bəzi scrolling ilə istifadəçi həqiqətən bu mənada tarix və / və ya vaxt intervalında bir növ təmin edə bilər. 

Belə ki, mütləq suboptimal və hələ bu günə qədər biz heç bir ifadəli imkanlarını gördük dillərinin hər hansı biz bir şey sexier etmək baxdı sonra başlanğıc və son dəfə bu kaydırıcıyı kimi. Amma biz Not danışıb zaman həftə 0 geri düşünüyorsanız, çox yalnız müəyyən şeylər ki widgets var idi. Siz, həqiqətən, yalnız loops və şərtləri və kimi kimi bu əsasları var idi. Belə ki, yalnız HTML özəllikləri müstəqil, indi çox abstractly düşüncə cür həqiqətən bu başlanğıc və son zaman kaydırıcıyı kimi bir şey ilə nə gedir? Mən siçan hərəkət və mən sol ki, az kök rəmzi basın və sürükleyerek başlamaq, program, bu həyata etmək istəyirəm nə ki, baş etmək olar? Hansı sual, xahiş etmək nə Boolean ifadələr istəyirsiniz? Ne həqiqətən olub? Sammy? [Tələbə] kursor mövqeyi harada? >> Yaxşı. Kursor mövqeyi haradadır? Bu, biz Not geri ifadə etmək üçün lazım bir şey idi o yeri və ya hətta rəng və ya kimi əsaslanır olub. Siz bazar ertəsi belə qısa heç geri bilər bunlar bütün hadisələr adlanır var idi Web dünya və s onclick və onkeypress kimi şeylər var və onkeyup və onmouseover və onmouseout. Belə ki, biz qəbul etdik, hətta bunlar Web verilir ki, həyata siz heç bir fikrim yoxdur, hətta Facebook və Gmail kimi saytlar ilə mühazirə, hətta bu kimi bir şey yoxdur çünki bəlkə ki, həyata necə və ya Problem, bu eyni əsasları ilə həyata, 7 göstərilməyib HTTP və parametrləri ilə GET və POST, biz bu günə qədər baxdı etdiyiniz əsas HTML giriş ilə və proqram mexanizmləri ilə bir anda Tommy nin haqqında tətbiq ki, Siz həftə 0 etdiyi kimi özünüzü ifadə edə bilərsiniz çox daxilən sürükleyerek və bırakarak. 

Belə ki, Tommy MacWilliam və Web üçün bizə yeni puzzle ədəd bildirib ki. Bütün hüquqlar. My name Tommy və mən JavaScript söhbət etmək gedirəm. Bir disclaimer: Mən JavaScript yaxşı proqramlaşdırma dili deyil ki, fikir am bütün bütün dünyada. Mənə razı insanlar çox, lakin bu yalnız gözəl. Başqa bir sinif və ya digər dillər üçün C yazmaq varsa, sonra, C geri, bu da aşağı bataqlıqlaşmışdır almaq üçün siz bütün aşağı səviyyədə ətraflı həqiqətən sinir bozucu deyil Əgər C yazmaq üçün necə annoying haqqında kədərli hiss etdiyiniz əgər, yalnız geri bəzi JavaScript yazın. Bu nirvana var. Siz pis gün daha yaxşı hiss edəcəyik. JavaScript sehrli bir çox şeyi manipulyasiya etmək qabiliyyəti gəlir ki, səhifə artıq mövcuddur. Biz PHP scripts yazdığı zaman, onlar, server edam edildi və nəticədə PHP script yəqin ki, bəzi HTML çıxış edir. Bu HTML müştəriyə göndərilir və o idi. PHP bir səhifə bir düğme əlavə etmək istəyirsinizsə, misal üçün, həqiqətən bunu edə bilərsiniz. Bu yeni bir HTML faylı göstərmək və brauzerinizin ki göndərmək lazımdır. JavaScript ilə biz onlar səhifədə artıq bile biz şeyi təkmilləşdirə bilər bilirik ki, və bu, çünki biz daha çox ani geribildirim bilər hansı həqiqətən bizim saytda istifadəçi experience artırır. JavaScript seçiciler bir sürətli recap. Biz bir HTML səhifə download Biz bilirik ki, ki, DOM təmsil edəcək. 

DOM unutmayın elementləri bu böyük iyerarxiyasının bağlı yalnız burada bu böyük ağac. Biz pset 7 bazaları ilə işləyib zaman, biz necə lazım olan ilk şey biri bazası sorğu idi. Biz bu böyük istifadəçi masa var və bəzən biz yalnız demək istəyirəm "Mən yalnız bir şərt uyğun ki, bu istifadəçilərin bəzi istəyirik." Eynilə, biz DOM zaman biz bu querying bəzi yol lazımdır. Deyə bəzi yol lazımdır, "Mən bu kimi baxmaq ki, düymələr bütün istəyirəm "Və ya page bütün şəkilləri." Bu seçiciler buna imkan verir. Belə ki, yalnız bir sürətli recap. Burada Bu birinci, bu # təqdim seçin gedən nədir? Hər kəs xatırlayıram varmı? [Işitilemez tələbə cavab] >> Bəli, dəqiq. Bu təqdim bir ID ki, səhifə üzrə element seçin gedir. Və belə ki, hash tag bu selector kimlikleri ilə işləmək üçün gedir deyir. Necə ikinci haqqında, bu. Mərkəzli ki, nə seçin olacaq? Bəli. >> [Tələbə] Class. Məhz >>. İndi bu sinif seçin gedir. ID və burada sinif arasında fərq ID benzersiz olmalıdır adətən hansı məkanda siz artıq aradığınız. Siz bütün web səhifə üzərində axtarış edilmişdir əgər, həqiqətən, yalnız təqdim, bu halda belə ki, müəyyən ID 1 element olmalıdır. Dərsləri ilə, digər tərəfdən, biz eyni səhifə 1-dən artıq element ola bilər eyni sinifdə ilə. Bu səhifədə mərkəzi ki, hər şey seçmək istəyirəm deyərək üçün faydalı ola bilər daha çox yalnız 1 şey. 

Və, nəhayət, burada bu son bir, bir az daha mürəkkəbdir lakin nə bu DOM seçin gedir? [Işitilemez tələbə cavab] >> ki, nə var? [Tələbə] bir tag ki, bir şey. Biz burada 2 hissədən var >>. Ikinci hissəsi, mən daxil bir tag bu tags seçmək istəyirsiniz gedir giriş tag hər hansı bir element belə. Amma yalnız giriş bütün seçin istəmirəm bir submit 'düyməsinə kimi bir giriş ola bilər, çünki və bir metin qutusu kimi bir giriş ola bilər. Mən dedi alıram bu kvadratşəkilli mötərizələri mən yalnız elementləri seçin istəyirəm növü mətn var. Somewhere mənim HTML tag I növü adlı atributu var, və atribut dəyəri mətn olmalıdır. Belə ki, necə burada birinci hissəsi haqqında? Bu selector ilk söz sonra sonra bir yer və bu giriş hissəsi formasıdır. Ki, qarşısında forma qoyaraq, nə edir? Bu əsasən bizim sorğu məhdudlaşdırmaq niyyətindədir. Bu səhifə haqqında bir giriş olan halda ola bilər şəklində nəslindən olmayan. Bu edəcəyik Mən yalnız mənə bu demək olacaq haradasa onlara yuxarıda olan giriş tags şəklində bəzi valideyn element. Və bu yolla biz bu daha iyerarxik sorğu edə bilər biz yalnız bir selector uyğun hər şey seçmək üçün yoxdur. Biz başqa bir şey ki, sorğu limit çərçivəsində cür bilərsiniz. Belə ki, indi biz səhifə elementləri seçin necə ki, nin AJAX haqqında bir az danışmaq edək. AJAX asynchronous JavaScript və XML dayanır ki hələ çox moda kisaltmasidir. Bu, sadəcə belə XML data təmsil yalnız bir yol olduğunu olur. 

Son itirilmiş populyarlıq belə, belə ki, AJAX-ci ildə X bütün vaxt istifadə olunmur. Əsasən, AJAX, bizə imkan verir nə HTTP istekleri etmək olunur JavaScript kontekstindən. Bizim web browser etdiyiniz və biz pages ətrafında naviqasiya edirik və biz bir link basın zaman, nə bizim browser etmək niyyətindədir biz basın nə keçid HTTP tələb edir. Ki, işin varsa, sonra David, deyirdi kimi Lakin həmişə ideal deyil biz həmişə istifadəçilər Submit düyməsinə basın və ya bir link basın etmək bir şey bir HTTP sorğu cəlb etmək niyyətindədir ki, baş etmək üçün. Belə ki, AJAX ilə biz JavaScript adından bu sorğu edə bilər. Istifadəçi səhifə və ya bir şey baş qarşılıqlı zaman o deməkdir ki, biz, həqiqətən, bizim saytda bəzi digər PHP faylına bir programmatic tələb edə bilər və ya başqa bir şey və fayl spits ki, məlumat almaq. Nin AJAX nümunə nəzər salaq. Bu inşallah bizim bəzi tanış olan bizim CS50 Maliyyə səhifə. Biz bu səhifənin HTML baxsaq, biz, bir neçə şeyi əlavə etdik ki, burada Mən bu forması ID verilmiş etdiyiniz biri. I id = "şəklində quote" dedi etdik. Bu DOM seçin bu bir az daha asan olacaq yalnız çünki bu etdik Mən çox sadə sorğu edə bilər-ci ildən. Mən burada etmək istəyirəm CS50 Maliyyə bəzi problemi həll istəyirəm. Biz finance.cs50.net getmək əgər, Mən bir quote almaq üçün hər zaman, mən bu Al Sitat düyməsini basın və Quote düyməsini sonra başqa bütün səhifə üçün mənə edir alın. Mən başqa quote istəyirsinizsə, mən Geri 'düyməsinə edib və sonra bu yazın, Mən bir quote almaq və mən Geri 'düyməsinə basın. Bu, həqiqətən ən yaxşı user experience deyil. Bu fond qiymətləri almaq üçün yavaş əgər kim həqiqətən site istifadə edir? Belə ki, nə biz AJAX ilə etmək istəyirik ayrıca səhifə gedir ki, addım aradan qaldırılması deyil nəticələri keçirmək üçün. 

Biz, həqiqətən, yalnız xahiş edirik ki, həqiqətən kiçik qiyməti və yalnız bir veri həqiqətən kiçik bir məbləğ var. Belə ki, digər bütün HTML səhifə getmək mənim üçün heç bir ehtiyac yoxdur HTML bütün yeni batch download, bəlkə, bəzi daha images download bəzi digər CSS faylları yalnız mənə çox sadə suala cavab vermək üçün necə çox bu fond dəyəri yoxdur. AJAX ilə biz bu çox asan edə bilərsiniz. Biz quote.js adlı JavaScript faylı birləşdirən edirəm ki, burada aşağı baxın. Nin həqiqətən fayl açmaq edək. Yoxdur. Mənim JavaScript faylları bütün HTML yerləşir gedir ki, web browser gedə bilərsiniz. Sonra, JavaScript, burada ayrı bir kataloq var və indi burada quote.js edir. Bu faylı üst mən yüklənmək üçün bütün səhifə gözləyin istəyirəm ki, burada deyir bir şey etmək üçün cəhd əvvəl. Nə lazımdır? Mən burada gedirəm ki, növbəti şey start bir element axtarır ki, həyata çevirir bəzi selector gəlir. Bu element səhifədə yüklənən əvvəl bu JavaScript heç icra olunarsa, sonra etmək üçün cəhd hər şeyi işləmək niyyətində deyil Mən hələ yoxdur ki, bir şey seçmək üçün cəhd gedirəm, çünki. Belə ki, top bu xətt Mən hər şeyi dolu qədər gözləyin istəyirəm deyir belə biz arıyorum hansı elementləri səhifə həqiqətən ki, təmin edirik. Burada Bu dollar işarəsi I jQuery adlı kitabxana kullanıyorum deməkdir. Bu jQuery kitabxana bizə yalnız baxdım ki, bu seçiciler istifadə etməyə imkan verir. Bir arqument kimi bu # formu quote keçən sonra $ söyləyərək, İndi biz yalnız bir göz edirdilər ki, forma seçilməsi alıram. İndi elə yaddaş ki, forma nümayəndəliyi var. 

Indi bu obyekt, forma Bu, İndi çağırdı funksiyasından istifadə edirəm. Bu fəaliyyət göstərmir bir hadisə handler əlavə olacaq edir. Biz qulaq asmaq olacaq ki, tədbirdə submit hadisədir. Belə ki, 'düyməsinə və ya presleri təqdim edən istifadəçi klik edin zaman Bu hadisə yanğın davam edir. Bu daxil qoşulma, mən indi şəklində default davranış yalnış bilər. Bu JavaScript olmadan şəklində təqdim edəcəkdir nə PHP fayl ki, fəaliyyət atribut istifadə edilir. Ancaq əvəzinə, indi gözləmək, gözləmək, gözləmək, mən, həqiqətən, bunu istəmirəm deyən deyiləm. Mən sizə getmək və bəzi PHP fayl təqdim etməyə cəhd əvvəl bu baş istəyirəm. İndi mən nə istəyirəm nə? Bu nöqtədə fond qiyməti nə yüklemek üçün birtəhər AJAX istifadə etmək istəyirik. Bilmək lazımdır ilk şey istifadəçi axtarır nə fond edir. Başqa selector istifadə gedirəm ki etmək. Bu əvvəl baxdı üçüncü selector edir. Bu form-quote şəxsiyyət ilə bu formu element başlamaq istəyirəm ki, deyir. Sonra yerdə ki, forma daxilində giriş element olmalıdır var ki, simvolu bir adı var. Biz HTML geri baxsaq, biz bir daxil olduğunu gördüm [name = simvol]. Yəni bu istifadəçi daxil yazıyor ki, mətn qutusuna seçin gedir deməkdir. Bu gözəl deyil. Biz mətn qutusuna var. İndi biz bunun içərisində nə bilmək kifayətdir. , Biz burada bu metodu zəng edə bilərsiniz ki, bu. Val etmək üçün, və bu Sizə nə mətn qutusuna bilirik deyir. Mən sizə bu mətn qutusuna tipli istifadəçi nə mənə demək istəyirəm. İndi biz istifadəçi kimi daxil tipli nə bərabərdir rəmzi adlı simli var Bu gözəl deyil. Biz tələb etmək artıq string istifadə edə bilərsiniz. Bu burada yeni funksiya, bu $, istisna olmaqla, biz artıq elementləri seçilməsi üçün olacaq biz jQuery tərəfindən bizə təqdim etdiyi fərqli bir funksiyası zəng etmək olacaq. Bu AJAX funksiyası həqiqətən bu HTTP request üçün neler edir. Belə ki, bir neçə şeyi izah etmək lazımdır. Mən xahiş getmək istədiyiniz biz bu funksiya demək lazımdır ilk şey. Somewhere mənim layihə I quote.php adlı HTML kataloq daxilində bu fayl var. I localhost / quote.php getmək əgər mən bu faylı əldə edə bilərsiniz, biz yalnız bu kimi gördüm. 

Hesab edirəm ki, səhifə müraciət etmək mənim JavaScript istəyirəm. Ne tür sorğu indi? Şəklində olan üsulu = "post" atributu var ki, əvvəl, gördüm və o, POST sorğu etmək olacaq deməkdir belə deyil, bir GET tələbi daha URL bir şey qoymaq niyyətində deyil biz yalnız, məsələn, web browser ilə səhifə əldə əgər yalnız atəş olacaq. İndi mən bir HTTP POST sorğu etmək istəyirəm dedi sonra quote.php yerləşən səhifə. Biz şəklində təqdim zaman ki, forma daxilində giriş elementlər daxil ola bilər unutmayın ki $ _POST dəyişən ilə. Bu günə qədər hekayə, biz, həqiqətən, hələ heç bir məlumat yanaşı göndərməmişik. Biz yalnız bir AJAX xahiş edirik bildirib etdik və burada edirik sorğu növü var. İndi biz əslində səhifə bəzi data göndərmək lazımdır. Biz data adlanan bu əmlak istifadə edə bilərsiniz ki etmək. Bu əmlakın dəyəri həqiqətən assosiativ sıra edir. Bunun səbəbi bu bizə data yalnız 1 ədəd daha çox göndərmək imkan verir. Bu qıvrım aşırma burada digər buruq aşırma daxilində iç içə var görə. Bu assosiativ seriallarda olan düymələri eyni şey olacaq o ad forma elementləri atributları kimi. Ki, simvolu əsas boyunca göndərmək varsa, o deməkdir ki, mənim PHP səhifə $ _POST [simvolu] Bu data əldə edə bilərsiniz deməkdir ki, biz bir formada təqdim olunduğu əvvəl etdiyiniz kimi. İndi isə faktiki data biz göndərmək istədiyiniz bu assosiativ array dəyəri içərisində olacaq. 

Biz dəyişən adlı simvolu bu mətn saxlanılır və biz indi simvolu əsas boyunca gönderiyorsanız və istifadəçi daxil tipli hər hansı bir dəyəri İndi biz PHP fayl icra, bu HTTP tələb etdik və yalnız bu müraciət etdi ki, müştəri artıq geri bir məlumat göndərmək olacaq. İndi server bizə dediyi hər hansı cavab lazımdır. Biz uğur adlandırıb burada bu son mülkiyyət ki etmək. Bu müvəffəqiyyətin əsas dəyəri həqiqətən, funksiyanı olacaq və bu JavaScript ilə edə bilərsiniz həqiqətən sərin şeyi biridir. Yalnız siz, assosiativ array dəyəri daxilində kimi ints ya seriallarda ola bilər biz də bir funksiya ola bilər. Belə ki, uğur deyərək, bu mənim açarıdır. A kolon, dəyəri gəlir burada deyir və bu dəyəri həqiqətən bir funksiyası var. Beləliklə, biz bu funksiya özlüyündə bir ad vermək lazım deyil. Biz yalnız bu bir funksiyası olacaq deyə bilərik. Bu 1 mübahisə etmək olacaq. Bu funksiya üçün dəlil olacaq nə server tələbi bizə geri göndərdi. Bizim browser bir tələb edir zaman yalnız kimi, server geri bir şey göndərir və brauzerinizin, o biz yalnız bir sorğu AJAX kontekstində, server, geri bir şey göndərib və indi biz bir string kimi təmsil ediblər. Ki, simli ilə Mən yalnız sayfadaki göstərmək istəyirəm. Mən son bir selector üçün gedirəm ki etmək. Mən ID qiyməti element seçin istəyirəm. Bu, yalnız mən səhifə yaratdıq ki, boş bir div deyil Mən server bizə geri göndərdi nə olduğunu div məzmunu müəyyən etmək istəyirik. Mən, həqiqətən, quote.php bir az redaktə etdik. 

Əksinə render zəng və bəzi səhifə göstərilməsi çox, quote.php indi sadəcə bir string kimi fond dəyəri çap edir. Siz həqiqətən səhifə əgər Belə ki, yalnız kiçik simli görəcək fond qiyməti nə edir. Biz burada nə etmək lazımdır son bir şey yalnız bu funksiya yalan qaytarır əmin edir. Bu deyir ki, mən bir hadisə handler daxilində Ben əgər və hadisə handler əvəzinə doğru qaytarılması yalan qaytarır ki, yanğın orijinal hadisə istəmirəm deməkdir. Bu halda, heç bir JavaScript və olmasaydı biz bir formada təqdim bizim web browser "Mən yanaşı data göndərmək gedirəm" deyə davam edir və onlar başqa bir sayfaya göndərmək olacaq. İndi AJAX istifadə etdiyiniz Çünki, başqa səhifə üçün istifadəçi göndərmək üçün ehtiyac yoxdur. Biz yalnız bu səhifə dinamik results olacaq. Biz, həqiqətən, onlara hər yerdə getmək istəmirəm, mən eyni page qalmaq istəyirəm. Belə ki, yalan qaytarılması, biz şəklində bizim üçün bunu deyil ki, təmin edir. Bu həqiqətən kimi görünür nə nəzər salaq. Bizim quote səhifə eyni görünür. Biz nə görə bilərsiniz məni yerə burada inspektor qoparmaq edək. Bir az böyük olun. Biz HTTP istekleri bütün görə bilərsiniz ki, biz Network nişanı açmaq əgər saxla, bu sayfada olur. 

Simvolu mənə AAPL yazın və sitat al basın bildirin. İndi Apple payı dollar bir sıra xərcləri gördüm ki, yalnız səhifə çıxdı, lakin URL bütün dəyişmədi. Əslində, burada yalnız etdiyiniz HTTP tələb edir. Biz quote.php bir POST müraciət etdi. Bu mənada edir. Bu server bizə geri göndərdi edir. Bu, artıq images və bu kimi şeylər bu nəhəng HTML sənəd var yalnız mətn xətti, və biz yalnız mətn xətti göstərilir. Biz başlıqlarını geri və biz, həqiqətən, bu HTTP request daxilində göndərilən nə varsa, biz simvolu və AAPL dəyəri əsas boyunca göndərdi burada görə bilərsiniz olan istifadəçi kimi daxil tipli nə Bu gözəl, ancaq hələ bir az annoying var. Mən hələ fond quote almaq üçün bu düyməni basın. Biz məşğul insanlar istəyirik və biz düymələri basın zaman yoxdur. Google Instant həyata Google müddət əvvəl bu bir az həyata keçirilir. Siz yazaraq etdiyiniz kimi Google Instant edir ki, bu, yalnız sizin üçün nəticələri tapılanlar başlayır belə ki Axtarış tıklayarak narahat yoxdur. Əslində, bir əyləncə hekayə ilə bağlıdır. Google Instant çıxdı sonra, insanlar kimi idi "Whoa, bu super gözəl deyil." "Bu sərin edir." Və Stanford bir tələbə aşağı zamanı 19 olan YouTube Ani adlanan bu site etdi. Bütün YouTube Instant səmərəli dərhal YouTube axtarış edir deyil. Belə ki, daha Axtar YouTube.com və hit üçün getmək üçün olan çox, Mən CS50 kimi YouTube Ani bir şey yazmağa başlayın zaman, biz bunu yavaş internet bağlantısı üçün cəhd ki, burada oldu Bu nəticələr yaşamaq yaşayır. Biz, həqiqətən, bizim quote.js fayl çox sadə dəyişiklik edə bilər ki etmək. Şəklində təqdim edildiyi anda biz bu hadisəni əlavə edirik. Biz, həqiqətən, istifadəçi artıq ki, formasını təqdim etmək istəmirəm belə-in əvəzinə bu hadisə istifadəçi presleri əsas hər zaman yanğın bildirin. Edək ilk keyup təqdim gələn hadisə dəyişdirmək üçün. Çox formasını təqdim etmək üçün, gözləmə artıq o deməkdir ki, hər zaman əsas bərk, bir şey baş verəcək. Bu artıq bütün forma bu keyup hadisə əlavə etmək üçün əhəmiyyət kəsb edir. Biz, həqiqətən, yalnız axtarış qutusu qayğı. 

Indi ki, biz çox form-quote çox, bu olmaq dəyişə bilərsiniz seçmək üçün şəklində quote və biz daxil olacaq (= mətn yazın) və ya (= simvol adı) deyə bilər - biz istədiyiniz hər hansı. İndi biz nə üçün son bir şey var. Biz geri yalan deyəndə burada saxla biz ki default hadisə yanğın istəmirəm bildirib. Biz indi aradan Amma əgər yalnız belə ki, baş biz yazın nə artıq browser göstərilir niyyətində deyil bir mətn qutusuna yazaraq default davranış olardı, çünki. Biz artıq, belə ki, bu qayıdışı yalan məhv edək ki, yalnış istəyirəm. Mən AAPL yazaraq start zaman ki, saxlamaq və indi səhifə yeniden edin burada alt hissesi avtomatik doldurulması ki, görürsünüz. Belə ki, burada CS50 Maliyyə Instant edir. YouTube Instant haqqında həqiqətən fun hekayə ki, tələbə yalnız növ, bir 1-gecə layihə kimi yazmışdır və növbəti gün o, YouTube CEO tərəfindən iş təklif edilib. Kimi belə sadə, siz CS50 tələbələr, son layihələr YouTube bir iş əldə edə bilərsiniz. Kimi bir şey doğru, son layihə üçün həqiqətən sərin fikir var? Biz inteqrasiya etmək istəyirdi ki, bəzi mövcud funksionallıq idi. Biz istifadəçi təcrübəsi bir az təkmilləşdirmək və birdən YouTube Ani bir şey axtarış bir çox daha asan ola bilər müntəzəm YouTube-da axtarış edir. Belə ki özetle AJAX var. 

Joseph göstərirdi ki, nümunələr, biz, autocompletes bir çox gördüm biz xatırlamaq yoxdur, çünki o autocompletes həqiqətən, həqiqətən, lazımlı var - Məsələn, əgər Apple üçün fond qiymət xatırlamıram və biz yalnız o deyil, yalnız mənə dedi daha aa bir şey bilmek "Bu şey bir payı, bu qədər pul edir" I növ səhmlərinin aa ilə başlamaq bilmək istərdim. Biz artıq daxil olan Bootstrap kitabxana ilə həqiqətən gözəl ki, edə bilərsiniz CS50 Maliyyə içərisində. Siz JavaScript tag üçün buraya gəlmək və Typeahead aşağı diyirləyin varsa, Bu, yalnız kimsə artıq bizim üçün yazdığı gözəl bir plugin edir və biz asanlıqla bu kimi işlevselliği istifadə edə bilərsiniz. Mən A tipli və burada A. ilə başlamaq ki, bəzi dövlətlərin siyahısı Gəlin mən bu həqiqətən sərin hesab edirəm ki, demək və bu, məni mənim səhifə Bu daxil etmək üçün vaxt var. Bu, həqiqətən, həqiqətən sadə ki, həyata çevirir. Nin quote3.js burada üzərində jump edək. Mənim fayl bir az fərqli görünür. Down burada AJAX məhsullarının bütün eyni. Mən başqa bir sayfaya getmək olmadan fond data yüklemek üçün istəyirəm. Ancaq indi bu plugin istifadə etmək istəyirik. Bu Bootstrap sənədlərin edirəm ki, necə dəqiq böyük nümunələr var. Mən demək istəyirəm ki, "Burada mən AutoComplete istədiyiniz giriş var" və mən typeahead adlanan bu funksiya zəng gedirəm və bizim üçün Typeahead məhsullarının bütün idarə edəcək. Bu siyahı başlamaq, bu bizim filtreleme bütün edəcəyik. O bilməlidir yalnız biz autocompleting ne data deyil. Mən yalnız sənədlərin oxu və nümunələri baxaraq bu əsas aşkar. Mən bu mənbə əsas, bu açar dəyəri versələr Mən AutoComplete istədiyiniz şeyi yalnız bir sıra edir. Bu dəyişən bu başqa fayl gəldi. Mən symbols.js açmaq. 

Bu symbols.js strings olan yalnız bu, həqiqətən, həqiqətən, böyük array edir NASDAQ bu fond simvol bütün. Mən HTML, belə jharvard, vhosts, globalhost, html, şablonlar, geri tullanmaq istəyirsinizsə quote_form. Indi quote3.js deyirlər ki, ildən, mənə burada o cümlədən alıram JavaScript fayl dəyişdirmək imkan verir. İndi quote3.js var, mən ki, ayrı-ayrı JavaScript faylı yüklemek üçün gedirəm ki, Bootstrap AutoComplete ki biridir. İndi brauzerinizin geri jump zaman, səhifə yeniden və mən aa yazmağa başlayın mənim AutoComplete var. Və həqiqətən kimi sadə idi. Mən "Burada mən AutoComplete istədiyiniz şey" yalnız bildirib ki kodu 1 xətti var idi, və birdən-birə mən bütün səy deyil, bütün çox bu, həqiqətən, həqiqətən, gözəl funksionallıq var. Web sites və şeyi xüsusilə ön tərəfdə inkişaf edirik ki, Bu halda bir çox tapmaq olacaq. Orada həqiqətən sərin pulsuz kitabxana bir çox çox var ki, bu kimi şeylər etmək asan super edir. Hər kəs sadəcə simvol bu böyük siyahısında autocompleting hər hansı çatışmazlıqlar hesab edə bilərəmmi? Bu yanaşma ilə yaxşı deyil ki, bir şey ola bilər? Bəli. >> [Tələbə] Saat, siz [işitilemez] bir çox halda Bəli. Hal-hazırda biz bu böyük JavaScript fayl indirirken edirik və simvol bir çox var. Biz məhsullarının bir ton varsa belə, bu cür ola bilər yalnız axtarış olmayan gizlilik artırmaq həm də faktiki fayl indirirken. Böyük. Başqa bir şey? Hal-hazırda bağlı heç bir real mənada var. Burada göstərilir ki, A, şirkətlər yazın edin A. ilə başlamaq ən məşhur şirkətlər ola bilər 

Mən Apple almaq əvvəl, mən arıyorum tapmaq üçün bir neçə simvol bilər. Bu AutoComplete bağlı bu mənada mövcut deyil. Bu, sadəcə, demək olacaq "Mən göstərmək gidiyorum eşleşen bir şey." Bunun əvəzinə o, mən elə-belə mənim axtarış bəzi aidiyyəti inteqrasiya etmək istərdim. , Finance.yahoo.com, Yahoo! Maliyyə buraya getmək Əgər Yahoo! Maliyyə səhifə simvolu daxil etmək üçün cəhd edin və mən GOOG yazmağa başlayın, mən şey bu gözəl siyahısı var. Yahoo! Maliyyə daha ağıllı burada bir şey edir kimi aydın görünür. Onlar bir aidiyyəti yoxdur və onlar da əlavə məlumat fond adı kimi. Mən, həqiqətən, rəmzləri yalnız fond siyahısını əldə edə bilər ki, bir şey var. Mən bunu istəyirik və mən onu gedirəm. Edək, bir neçə şeyi ki etmək. Gəlin ilk bu səhifədə inspektor açmaq biz bu səhifə bütün yeniden deyil ki, gördüm, çünki belə ki, yəqin ki, onun data yüklənməsi üçün elə AJAX istifadə edir. Biz loading nə data tapa bilərsiniz. Mən bu Network sekmesini basın, bu işdən başlamaq ki, sorğu bütün olacaq. Mən Goo yazın əgər İndi biz yeni bir HTTP sorğu var ki, görə bilərsiniz. Məlumatlar gələn yerləşir Ü Bu yəqin edir. Kifayət qədər Əlbəttə, mən qəribə adlı bir bit olan bu URL baxsaq, biz Yahoo öz data off göndərir bu dəqiq olduğunu görə bilərsiniz. 

Mən ruhunda axtarış funksiyası çox bənzər ki suggest.php adlı ayrı-ayrı fayl yaratdıq. Bu əsasən Yahoo URL üçün bir sorğu etmək olacaq, bəzi data geri almaq və mənə geri göndərin. İndi daha çox rəmzləri bu böyük, nəhəng siyahısını istifadə edərək, daha çox, Mən, Yahoo-nun gözəl aidiyyəti şeyi istifadə edə bilərsiniz və mən kütləvi JavaScript faylı yoxdur. Mən yalnız faktiki müvafiq fond simvol aşağı çəkmək üçün gedirəm. Ki, daxil jump edək. Belə ki, html, js. Biz quote4 indi istəyirik. İndi biz artıq JavaScript faylları böyük siyahısını istifadə edərək, edirik. Amma dizayn problem kiçik bir cür burada var. Biz AJAX-ci ildə A asynchronous olduğunu bildirib etdik. Nə o deməkdir ki, mən bir AJAX müraciət etmək zaman ki, mənim AJAX tələb həqiqətən atəş yerləşir Ü belə burada line 8, bu. Gəlin indi bir şeylər edəcəksən ki, aşağı burada kodu demək səhifə, istifadəçi və ya dəyişiklik bir şey xəbərdarlıq istəyirəm. Deyil baş verəcək deyil hansı brauzer davam etmək üçün bu sorğu üçün gözləmək niyyətində deyil əvvəl endiyini və bu istiqamətdə vuruş. Bu asynchronous hissəsi. O, bu tələb etmək və bitirmək zaman "demək olacaq "Qayıtmaq və mən uğur daxilində zəng etmək üçün sizə dedim ki, funksiyası zəng". Biz əvvəlcədən bütün səhmlər yalnız download bilməz deməkdir. Biz tələb etmək və geri qayıtmaq bir şey gözləmək lazımdır. Əvvəl o deməkdir ki, biz sadəcə, Bootstrap deyə bilərsiniz "Burada mən AutoComplete istədiyiniz şeyi siyahısı." Biz bilirik, çünki biz artıq artıq bunu edə bilər biz həqiqətən AutoComplete istəyirəm nə. O orada ağıllı uşaqlar, çünki Neyse, Bootstrap, bu fikir və onlar, həqiqətən, bizə bu Typeahead plugin yüklemek üçün başqa yol verdi. Əvvəl, bu mənbə əmlakın dəyəri AutoComplete şeyi yalnız bu böyük array idi. 

İndi mənbə əmlak, əslində bir funksiyası və bu funksiya məqsədi ilə AutoComplete üçün şeylər nə anlamaq üçün. Bu rəqəm olacaq yolu bu Yahoo! Maliyyə soruşmaq olacaq ki, AutoComplete ən yaxşı şeylər edir. Mən bir çox oxşar AJAX müraciət etmək gidiyorum ki etmək. Mən suggest.php Bu səhifə tələb gedirəm. Mən hələ də simvol boyunca göndərmək istəyirəm. İndi mənim uğur, bu Bootstrap sənədləri mənə ki, bəlkə, şeyi ki, siyahı yaşayır Mən lazım olan bütün zəng funksiyası bu array qəbul edilir. Amma bir dəqiqə gözləyin. Bu bir sıra olması ehtimal edilir və AJAX, geri mətn mənə göndərir edin necə mümkündür? Bu JSON adlı data mübadiləsi yeni bir yol təqdim edir. Bu halda biz yalnız mətn sadə bir string geri göndərilməsi deyilik. İndi biz fond simvol bu daha mürəkkəb siyahısı ilə məşğul olursunuz. Bu fond simvol da şirkətin adı və ya cari qiymətlərlə kimi şeylər daxildir. Hər hansı əvvəlcədən şəkildə biçimlendirilmelidir deyil ki, böyük bir uzun string istifadə Mənə Yahoo server bu məlumat almaq üçün ən yaxşı yolu olacaq deyil Mən asanlıqla anlamaq olar ki, bir yol. JSON biz JavaScript assosiativ serialların yaratmaq necə istifadə edir ki, bir texnologiyadır. Bu, bir JavaScript assosiativ sıra kimi bir çox görünür çünki və əslində bu. JSON JavaScript Obyekt Notation qısaltmasıdır. Bu əsasən bir geri və irəli data ötürülməsi üçün format razılaşdırılmış edir. Bu JSON obyekt və ya bu JSON assosiativ array Burada Mənə bir kurs haqqında bəzi məlumatlar göndərir. 

Bu serialın düymələri cs50 dəyəri var ki, kurs kimi şeylər və aşağı burada mən bir sıra bir dəyər ola bilər ki, görürük. Mən strings həyata parse kimi şeylər var və vergülləri axtarmaq deyil və belə crazy şeyi. Bu JSON formatda elan Çünki, JavaScript və jQuery artıq bir string çevirmək funksiyaları faktiki JavaScript assosiativ array bu JSON kimi görünür ki, biz işləmək bilər. Bunu, artıq bu fayl, suggest.php olduğunu söyləyən kimi sadə deyil geri sadəcə mətn string mənə göndərilməsi ancaq geri JSON mənə göndər olacaq bilirik. Yəni JSON bir JavaScript assosiativ array çevrilə bilər deməkdir. Və belə jQuery, mən sizə, mənim üçün bunu istəyirəm. Bu o deməkdir ki, burada bu cavab parametr, bu artıq yalnız simli deyil. Biz jQuery bildirib etdik ki, burada bəzi JSON gəlir jQuery demək kifayət qədər ağıllı olacaq, "Siz JSON istəyirdi?" "Mən sizin üçün assosiativ array o çevirmək üçün gedirəm." Biz quote4.js var bir dəfə-nin faktiki Network nişanı nəzər salaq. Biz bu dəyişdirmək və səhifə yeniden olacaq. İndi yenidən bir-bir yazın gedirəm. Mən suggest.php üçün bir neçə müraciətləri qəbul, lakin indi bu cavab sonra deyil, yalnız simli deyil, bu, JSON var. Mən açıq buruq brace deyərək var "Burada assosiativ sıra gəlir." 

Bu assosiativ serialın ilk və yeganə əsas, simvollar adlanır və sonra burada müvafiq rəmzləri bütün bir sıra edir ki, nəhəng siyahısı, Yahoo! Maliyyə indi gəlir. Mən sadəcə bu AutoComplete plugin yaşayır necə ki, artıq müəyyən olan bir yerli fayl gələn deyil ki, bəzi məlumatları ilə amma başqa bir şey. Bu, biz, həqiqətən, JSONP adlı texnologiya istifadə edə bilər çıxır ki, və ya padding ilə JSON ki, bu suggest.php komisyoncu aradan qaldıracaq. Lakin əvəzinə ki, bunu isə əvəzinə mən bu daha inkişaf edə bilər necə nəzər salaq. Mən Bootstrap nin Typeahead həqiqətən istəyirəm. Bu, həqiqətən gözəl. Amma JavaScript yaxşı əldə edirik və biz növ bu özümüzü etmək istəyirəm bəlkə bu plugin edir ola bilər nə bir göz atın. Ki Typeahead şey istifadə edir artıq etsin, və-nin təklif səhmlərinin bu siyahı özümüzü etmək edək. Burada quote6.php biz eyni şəkildə başlamaq olacaq. Hər dəfə kimsə növləri bir şey, bir AJAX müraciət etmək istəyirəm. Bu, bizim orijinal CS50 Maliyyə Instant kimi. Əksinə quote.php müraciət edilməsi daha indi əvvəlki kimi eyni fayl xahiş edirik, bu suggest.php, olan yalnız Yahoo! Maliyyə data çəkmək niyyətindədir. 

Yenə, biz hələ də JSON bekliyorsanız, lakin Typeahead bizim üçün bunu deyil indi bəri biz də cari mətn qutusuna daxilində olduğunu dəyəri boyunca göndərmək lazımdır. İndi biz, Yahoo! Maliyyə soruşmaq üçün nə və indi burada biz sorğu başa bir dəfə icra etmək istəyirəm ki, funksiyası var. Biz, bizim üçün siyahısı etmək üçün plugin yoxdur biz, həqiqətən, təkliflər bir siyahısını yaratmaq niyyətində olduğunuz belə burada. Bunu etmək üçün, çox PHP kimi biz HTML bu böyük strings concatenated sonra biz onları çap biz JavaScript eyni dəqiq şey edə bilərsiniz. Birinci biz, təklif adlanan bu simli başlamaq olacaq və bu simli yalnız bir HTML ehtiva edir. , Biz hər şeyi bir siyahısı olsun, biz bu siyahı tag ilə başlamaq olacaq və indi biz geri ki, rəmzləri bütün təkrarlamaq olacaq. Biz Veri bildirib etdik, çünki saxla: "json, bu simli deyil. Bu, artıq bizim üçün bir sıra edir. Bu, həqiqətən, sərin var. Biz sadəcə "Mən sizə bir siyahısını element əlavə etmək istəyirəm.", Deyə bilərsiniz Biz ki, yan bir bir element daxili qoymaq lazımdır biz nə bilirik ki, biz, bu təkliflər bir sinif verəcəyik və indi burada Yahoo! Maliyyə geri var ki rəmzidir. 

Sonra biz geri kazanılmış etdik simvol hər bir element yaratdıq biz yalnız siyahısı off bağlamaq istəyirik. Belə ki, indi təklif bu kiçik HTML parçası təmsil bir səhifə qoymaq zaman aradığınız şeyi siyahı olacaq. İndi həqiqətən səhifə haqqında qoymaq bildirin. Mən, həqiqətən, bir boş div yaratdıq və mən bu təklifləri bir ID verilmiş etdiyiniz etmək. Biz fond data qiyməti göstərilmir ki div məzmunu müəyyən Çox kimi biz yalnız bu simli nə üçün bu div məzmunu müəyyən etmək istəyirəm bu simvol olan var. Bu HTML metodu istifadə edərək, bu təkliflər dəyişən, bu simli, HTML bir simli edir. Mən sizə HTML almaq və təkliflər adlanan div daxilində qoymaq istəyirik. Biz yalnız indi DOM üçün bir şey əlavə etdik. Biz indi page bilərsiniz ki, DOM bəzi yeni elementlər əlavə etdik. Bu kimi görünür nə edək. Biz quote6 ilə yük və indi biz qayıtmaq edin İndi AAPL yazaraq start zaman, biz artıq Bootstrap AutoComplete var lakin indi biz özümüz ki, bu siyahıda var. Bu, misal üçün, Bootstrap Typeahead daha az uglier edir lakin bu, bizim başqa bir şey imkan vermir. Biz Bootstrap plugin baxaraq zaman, biz autocompleted zaman, AutoComplete dəyərlərdən biri AAPL olduğunu gördüm. Ki, faydalı ola bilər. Bir istifadəçi kimi, dərhal fond rəmzləri bütün tanımaq bilər. Şirkətin faktiki adları Mən yəqin ki, tanımaq üçün daha çox Ben var. Belə ki, həqiqətən faydalı ola əgər daha çox AAPL deyərək deyil bu Apple kimi bir şey dedi Biz bu özümüzü yayılmış etdik, çünki biz həqiqətən asanlıqla bunu edə bilər. Nin burada bizim son quote fayl açmaq edək quote7 belə. 

Eyni şey. Mən yalnız simvollar daha bizə qayıtmaq edəcək başqa PHP fayl yaratdıq. Bu da bizim şirkətin adları geri verəcək. Və biz eyni şeyi edirik. Biz AJAX xahiş edirik. Sorğu başa sonra, biz burada bu funksiyanı yerinə olacaq və bu funksiya elementlərin böyük simli qurmaq niyyətindədir. Amma burada fərq bu siyahıları dəyəri, artıq yalnız rəmzi olduğunu İndi adı var. Beləliklə, biz kiçik bir problemi var. Biz axtarış istifadə edərək, biz elə bu simvolu qəbul etmək lazımdır. Biz Microsoft Corporation kimi axtarış bir şey keçə bilər. Biz MSFT keçmək lazımdır. Biz HTML yazılı olduğunuzda, biz gözəl daxili atributları çox var. A bir href və ya bir növü ilə bağlı ola bilər. Amma nə biz, həqiqətən, indi ehtiyac bu əlaqələrin hər üçün Bugün bir fond rəmzi var. Heç bir daxili HTML atribut stock rəmzi üçün var lakin xoşbəxtlikdən, HTML5 bizə istədiyiniz hər hansı olmaq üçün öz atributları yaratmaq imkan verir. Data-simvolu deyərək, yeni bir atributu təqdim etdik onun adı yalnız təşkil edib və bu data ilə prefaced çünki bu tamam. Biz artıq fond oradan rəmzi daxilində saxlamaq olacaq. Nə deməkdir ki, biz şirkətin adı dəyəri gösterdiğinizi baxmayaraq ki, bizim AutoComplete daxilində, biz hələ rəmzi xatırlayaraq edirik ki, hər bir şirkət ilə bağlıdır. Biz bunu edirik yolu bu element özü daxilində deyil. Belə ki, biz bir daha dəyişiklik etmək lazımdır deməkdir. İndi basın zaman, biz, həqiqətən, rəmzi atributu istifadə etmək lazımdır yalnız onun dəyəri daha çox. Biz geri varsa, biz təkliflər üçün hadisə handler veririk. Bu təkliflər bir indi tıklandığında zaman, mən bir şey etmək istəyirəm. Mən istəyirəm ki, giriş qutusuna dəyəri dəyişmək edir. İndi bu val funksiyasını təyin etmək istəyirik. 

Belə ki, hər hansı arqumentlər bu val funksiyası mətn qutusuna artıq nə sizə qaytarır, siz bir string vermək ancaq o string almaq və mətn qutusuna qoymaq olacaq. Eyni şəkildə mətn qutusuna seçilməsi alıram. Bu adı form-quote rəmzi daxilində deyil. İndi bu xüsusiyyətini data-simvolu dəyəri göndərilməsi alıram. Burada Bu şey, bu $ (bu) yeni. Bu istinad tıklayan ki elementidir. Biz bir klik hadisə əlavə deyilik ki, burada görə bilərsiniz fərdi təklif sinfinin hər element üçün. Əksinə, biz fərqli bu bir az yaxınlaşan edirik. Əvəzində biz zaman bu təkliflər div bir şey daxilində deyərək edirik hansı unutmayın ki, siyahı üçün yalnız konteyner edir bu div daxilində bir şey tıklayan və təklif bir sinif var, əgər Mən bu hadisə yanğın istəyirəm. Əsasən bu biz nə edə bilər nə deməkdir biz bu eyni hadisə handler yenidən istifadə edə bilərsiniz ki, siyahıda olan hər şeyi edir. Beləliklə, biz ilk element üçün hadisə handler var yoxdur İkinci element üçün və müxtəlif hadisə handler. Biz yerinə "Mən eyni hadisə handler mənim siyahısı hər şeyi müraciət etmək istəyirəm.", Deyə bilərsiniz Amma biz elə tıklayan olan element bilmək lazımdır. Bu, "bu" söz yalnız təmsil edir. Bu istifadəçi tərəfindən tıklayan ki, obyekt. Mən yalnız 3-cü link tıklayan, bu ki, 3-cü link element təmsil I onun atributu, data-simvolu almaq o deməkdir ki, biz bilirik ki, mən yalnız tıkladığınız şirkəti ilə bağlı olan simvol ehtiva edir. Bizim maliyyə səhifə geri tullanmaq, əgər Biz artıq bir dəfə mən MSFT kimi bir şey yazmağa başlayın görə bilərsiniz biz yalnız fond rəmzləri əldə etdiyiniz artıq indi faktiki şirkətlər əldə edirik. Amma bu şirkətlərin birini basın zaman, biz şirkətin adı ilə biz, həqiqətən, mətn qutusuna deyil populating etdiyiniz görə bilərsiniz lakin həmin data atributları daxilində saxlanılır edilmişdir nə ilə. Və mən, həqiqətən, doğru tıklayarak bu elementlərin bir yoxlayın, əgər və Element Inspect tıklayarak, biz, həqiqətən, bu kimi görünür nə görə bilərsiniz. 

Bu biz loop üçün daxilində yaradılmış bir şey saxla biz HTML ki, simli yaradılmasına zaman. Biz bu data-simvolu böyük olan MSFT, dəyəri var ki, burada görə bilərsiniz. Biz gözləyirdik budur. Bu simvol var ki, biz istifadə üçün lazım olan dəyəri var necə bu mətn qutusuna daxilində. Ki, qazma növü var, çünki kifayət qədər quote forma üçün. Nin yalnız bizim portfelinin səhifə bəzi sürətli aksesuarların etmək edək. Bir müddət CS50 Maliyyə istifadə varsa, siz səhmlərinin bir çox alış-satış başlamaq nəticədə bu cədvəl, olduqca böyük almaq niyyətindədir və əlbəttə fond ticker, istədiyiniz olacaq. Masa, həqiqətən, həqiqətən, böyük bir dəfə, o, artıq axtarış üçün cəhd istifadəçi üçün faydalı ola bilər. Mən Disney kimi bir şey yazmağa başlayın əgər axtarış qutusu Inside və Mickey Mouse fond axtarır, biz masa indi filtreleme ki bilərsiniz Mən daxil tipli dayalı Bu işlevsellik super çətin görünür, lakin bu, həqiqətən, həqiqətən, asan jQuery və JavaScript ilə. Bu portfolio.php fayl portfolio.js adlı JavaScript fayl daxildir. In ki, nəzər salaq. Belə ki, html, js, portfel. Biz masa axtarış bunu edirik burada. Mən nə etmək lazımdır ilk şey ki, mətn qutusuna bir hadisə handler əlavə edir biz filtreleme funksiyası yanğın istəyirəm bilirik ki, çünki hər dəfə istifadəçi presleri bir şey biz Axtar düymələri üçün vaxt yoxdur, çünki. Biz nə etmək lazımdır ilk şey, istifadəçi üçün axtarış nə həyata rəqəm edir kimi biz əvvəl etdi. Bu söz, istifadəçi ilə əlaqə ki, cari element aiddir. 

Istifadəçi axtarış qutusu ilə əlaqə Çünki, Bu axtarış qutusu təmsil $, belə this.val istifadəçi hazırda yazıyor axtarış qutusuna daxilində nə bizə verir. Belə ki, indi biz nə etmək istədiklərini biz satır bütün təkrarlamaq istəyirik bizim masa daxilində. Bizim cədvəldə bütün satırları seçin, mən ki, masa masa portfelinin bir ID verdi və hər satır, bir TR element təmsil olunur Bu selector mənə böyük array qayıtmaq üçün gedir mənim masa bütün satır. İndi ki, array üzərində təkrarlamaq istəyirəm. Mən loop üçün bir ola bilər, lakin jQuery həqiqətən bizə adlı gözəl funksiyasını təmin "hər". Nə hər deyil, hər bir mübahisə edir ki, və mübahisə bir funksiyası var. Nə etmək olur ki, bu siyahı daxilində hər element üçün funksiyası tətbiq olacaq edir. Bu funksiya, e ki, bir arqument edir və bu funksiyanı yerinə zaman, bu e, ilk sıraya ilə əvəz edir sonra ikinci sırada, sonra üçüncü sırada. Bu yolla, bu loop üçün çalışan eyni şey və sonra loop üçün göstəricisi daxilində əsasında cari element figuring. Hər iteration hazırda masa bu elementlərin hər biri üçün, Sıra daxilində hüceyrə mətn - Mən element mətnini yoxlamaq istəyirəm - Mən üçün axtarış alıram nə uyğun gəlir. Əmrləri Bu böyük uzun string mən bunu necə edir. Birincisi, yenidən, bu indi aiddir - bir yeni funksiya daxilində çünki - bu artıq masa cari sıra edir. Mən masa mövcud sıra almaq istəyirəm və mən onun uşaqlar bütün almaq istəyirəm. Unutmayın, DOM, bir hiyerarşik ağac elementləri uşaqlar bir sıra deməkdir. 

Bu. Uşaqlar funksiya mənə bütün öğeleri bir sıra qayıtmaq üçün gedir Bu halda, cədvəldə bir sıra, uşaqları var. Bu sadəcə sıra daxilində hüceyrələri edir. Mən ilk hüceyrə üzərində axtarış etmək istəyirəm. Bu. Ilk funksiyası mənə array ilk element vermək deyir. Sonra mətn funksiyası ki, hüceyrə daxilində var mənə dəqiq nə deyir Hesab edirəm ki, mətn üzərində axtarmaq istəyirsinizsə ildən. Nəhayət, nin bu kiçik çevirmək bildirin biz mətn halda hissiz sorğu edə bilər. Nəhayət, bir masa daxilində ki, simli biz aradığınız string varsa görmək istəyirik. JavaScript ildə indexOf funksiyası yalnız edir. Bu simli bir string şey və ya bizə deyir. Bu mobil mən üçün axtarış alıram nə olan doğru varsa, sonra mən bu göstərilir ki, əmin etmək istəyirəm. Bu şou metodu "element göstər." Deyəcəklər Bu belə deyil, onda ki, mən olan deyil üçün axtarış alıram nə deməkdir ki, sıra ərzində, və gizlətmək istəyirsinizsə belə istifadəçi edir. Artıq biz bütün cədvələ bax yerləşir ki, gözəl filtreleme effekti verir. Yaxşı kimi, bu ticker etmək istəyirsinizsə biz online mənbə göndərmək lazımdır. Amma həqiqətən sadə. JQuery bu animasiyalar və manipulyasiya CSS xassələri zəhmli metodları var. Belə ki, mənə bu. 

Hansı sonra irəlidə yalan? Bir neçə gün görəcəksiniz ki, son layihələr təklif bağlıdır. Son layihələr təklif, bir neçə sual olacaq lakin onların arasında üç mərhələləri olacaq - bir "yaxşı" mərhələ, bir yaxşı mərhələ və bir yaxşı. Uşaqlar kömək həqiqətən olan fikir sizin gözləntiləri müəyyən belə minimal sizin yekun layihə çıxışı ilə xoşbəxt olacaq və bu qədər narahat edir kimi "yaxşı" olacaq. Amma sonra bir şey üçün bir az olmaq üçün əldə faiz daha yaxşı və ya yaxşı bir şey, biz də yaxşı qarşı siz təkan və düzmək lazımdır. Bu CS50 Hack-a-Thon, eyni zamanda, bir neçə həftə edir. Adətən, çünki maraq lotereya əsasında əsasında bunu, lakin odds biz Harvard meydanında olan Otobüs bizə bir neçə yüz almaq lazımdır olunur aşağı Microsoft tutarlı "NERD" adlı gözəl harada olduğu Kendall Meydanı - Yeni İngiltərə Tədqiqat və İnkişaf Mərkəzi. Biz 8 radələrində Biz bəzi ərzaq lazımdır orada almaq lazımdır. 1 günortaya qədər ətrafında biz bəzi qida lazımdır. Around 5 hələ oyaq əgər biz kampus geri IHOP və ya almaq üzərində rəhbərlik lazımdır edirəm. Orada məqsədi son layihələrinə dalış etmək sinif yoldaşları və personal yanaşı. Sonra bir neçə gün sonra CS50 Ədalətli edir uşaqlar iş sergilemek üçün olan həqiqətən imkan deməkdir dövr və nailiyyətlər bir-biri ilə omuz silinən və hər kəs nə hissi əldə edir. Bildirib ki, Tommy və Cozef çox thanks, və biz Bazar ertəsi görəcəksiniz.  [Alqış]