[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ış]