[Powered by Google Translate] [هفته 9، ادامه داد] [دیوید J. مالان - دانشگاه هاروارد] [این CS50 است. - CS50.TV] 

این CS50 است. این پایان هفته 9 است. بسیار متشکرم. در نهایت. هفته 9. من آن را کردم. امروز صحبت ما در مورد برنامه نویسی وب سایت ما ادامه با چشم به سمت پروژه نهایی، نه به این دلیل که شما را مجبور به انجام کاری مبتنی بر وب برای پروژه نهایی بلکه به این دلیل که هر دو برای پروژه نهایی و یا پس از CS50 این است که قطعا جهت است که در آن نرم افزار مدرن است. و هنوز آن را در واقع نه چیز آسان است. در واقع، یکی از سخت ترین کارها را به انجام جنبه های طراحی است. 

به عنوان مثال، طراحی شده توسط ما به معنی واقع رابط کاربر یا تجربه کاربر. من جرات گفتن - و ما از مجموعه ای از مشکل اخیر هنگامی که یک تعداد کمی از شما قولنج خود را در مورد برخی از قطعه ای از نرم افزار پخش یا سخت افزاری است که به شما infuriates، چه در دانشگاه یا خاموش - بسیاری از سایت های خارج وجود دارد وجود دارد، بسیاری از سخت افزار وجود دارد خارج وجود دارد، این نوع از بمکد. اما واقعیت این است که چیزهایی که هنوز به استفاده بسیار آسان با این حال قدرتمند یک چالش بسیار دشوار است. بنابراین برای امروز من خواسته جوزف و تامی به من ملحق اینجا به طوری که ما می توانیم یک مکالمه داشته باشد، هر دو در مورد طراحی و چه نوع از فرایندهای فکری باید شروع به رفتن را از طریق سر خود را هنگامی که شما طراحی پروژه های نهایی خود را، تلاش های آینده تان است. و سپس با کمک تامی خواهیم در بعضی از جزئیات پیاده سازی را نگاه کنید. چگونه می توانید برخی از دید شما باید بر روی کاغذ و یا در ذهن خود مرور کنید که بعد از آن شما می توانید به برنامه نویسی اجرا با استفاده از برخی از تکنولوژی ها و تکنیک های ما فقط شروع به صحبت کردن در مورد، یعنی جاوا اسکریپت و چیزی حتی جدیدتر، یعنی AJAX، JavaScript در مرورگر ناهمزمان است. است که به شما اجازه می دهد تا به ایجاد پویا بیشتر از یک رابط کاربر واکشی داده های بیشتر و بیشتر به تدریج از یک سرور. بنابراین ما برخی از آن قطعه به خوبی مشاهده کنید. تا به کنار، اگر شما در تمرکز در علم کامپیوتر علاقه مند هستند یا minoring در علم کامپیوتر، می دانم که این جمعه در ظهر در ماکسول دورکین 221 وجود خواهد داشت یک رویداد پیتزا که در آن شما می توانند یاد بگیرند که کمی بیشتر در مورد علوم کامپیوتر. راه برون رفت از درب امروز خود را، شما قادر خواهید بود انتخاب کنید تا یک راهنمای غیر رسمی به CS در دانشگاه هاروارد. ما می خواهیم آن را در سطل زباله در خارج در ارتفاع کمر قرار داده است به طوری که اگر شما می خواهم برای گرفتن و یاد بگیرند کمی بیشتر در مورد CS، که وجود دارد خواهد بود برای شما به عنوان آن را در هفته 0 بود. همچنین اگر شما می خواهم به ما برای CS50 ناهار پیوستن به این روز جمعه در 01:15 سر به cs50.net/lunch. بدون ado بیشتر، من به شما آموزش همکار جوزف اونگ. سلام. [تشویق حضار] با تشکر. اولین بار من در مورد طراحی آموخته بود که در یک کلاس به نام CS179. 

استاد در آن زمان به ما گفت که داستان در مورد یک استاد دیگر که به هتل رفته بود و با استفاده از جرثقیل. آیا می توانم هر کسی به من بگویید چه دستگیره 2 در سمت چپ و راست را انجام دهید؟ [دانشجو] گرم و سرد است. >> داغ و سرد است. خوب است. چیزی که شما به طور معمول انتظار می رود، درست است؟ این استاد بعد از استفاده از شیر آب می خواهد برای دوش گرفتن، و او در ادامه برای استفاده از این. او فکر می کند در سمت چپ و سمت راست را برای گرم و سرد هستند، درست است؟ اما هر کسی می تواند به من بگویید چه این در واقع؟ هر دست؟ [پاسخ دانش آموز نامفهوم] >> یک پیشنهاد است؟ [پاسخ دانش آموز نامفهوم] >> دما؟ بنابراین یکی از آنها کنترل دما و کنترل های دیگر است؟ >> [دانشجو] فشار آب. فشار آب. خوب است. این استاد قدم به این و، فکر آنها در کنترل گرم و سرد، تبدیل یک حق، که او فکر می کند برای داغ، تمام راه را تا زیرا او می خواهد به دوش آب گرم است. خب، این کار واقعا مطابقت کردن، به طوری که او می شود این تجربه بسیار سرگرم کننده در یک دوش آب سرد، و همه ما می دانیم آنچه را که احساس می کند مانند. این یک نمونه از نقص طراحی شده است. منظورم این است که انتظارات خود را از شیر آب مطابقت چیزی نیست که از حمام آمد، است که نوع مایه تاسف برای او. بنابراین این نمونه ای از یک نقص طراحی است که در زندگی واقعی اتفاق می افتد می باشد. اما ما می بینیم که تمام انواع دیگر از آنهایی که به عنوان خوبی است. ما احتمالا طرفداران سیستم MBTA نیست. این یک سیستم مترو واقع در لندن است، که می گوید، "این دکمه استفاده نمی کنید." چرا آن را حتی در وجود دارد؟ چرا ما حتی مراقبت؟ وقتی که من بچه بودم، یکی از فن آوری زرنگ و دانا در خانه بود، هر زمان که کامپیوتر به تصادف، مادرم را به من می آیند، نشان دادن این صفحه و درخواست من چه اتفاقی افتاده است. 

حتی من نمی دانم این به این معنی است. [خنده] چیست؟ [خنده] گاهی اوقات ما مثل توسعه دهندگان نرم افزار احساس فقط چرخش ما. همانطور که کاربران، مانند "چه در جریان است؟ کسی به ما بگویید." این همه پایین می آید به یک مسئله طراحی است. طراحی، ما می توانید ببینید، در مورد زیبایی شناسی صرفا نیست، آن را در مورد چگونه همه چیز نگاه نیست. در اینجا ما می بینیم که این کمی پاپ آپ در اینجا در واقع به نظر می رسد خیلی خوب است. از آن است که سایه قطره در پس زمینه، آن را تا شعاع مرزی رفتن. این نوع بسیار است. این واقعا خوب طراحی نشده است، زیرا آن را بسیار کاربر پسند نیست. که کمی پاپ آپ که می آید تا واقعا نمی هر گونه اطلاعات به من می دهد در مورد آنچه اتفاق افتاده، آن را نشانی از به من بگویید که کاربر چیزی نیست در مورد چگونگی بهبود می یابند از آن خطا. ما می خواهیم در مورد چیزهایی است که طراحی شده است فکر می کنم. اول، آن را به زیبایی شناسی نیست. همچنین برنامه خود را با تن از عملکرد غیر ضروری چاشنی نیست. اگر شما یک رستوران تایلندی، شما احتمالا نمی خواهید یک دندانپزشک را در همان زمان به. و با پرسش های فیس بوک، که هنوز بسیاری از مردم از آن استفاده و آن را در هسته از آنچه آنها ساخت واقعا نمی. و پس از آن به خوبی فکر می کنم در مورد مقدار از چیزهایی که نه زیاد که شما در حال قرار دادن به درخواست شما، اما کیفیت و چگونه شما که تجربه کاربری بهتر در واقع بهبود بر اساس آنچه شما در حال حاضر. 

به طور خلاصه، طراحی به ما می گوید چیزی است که ما باید ساخت. برای مثال، اگر ما در حال ایجاد چیزی است که اجازه دهید همه چیز با ما جستجو مثل گوگل، به عنوان مثال، باید چیزهایی که ما در روش است که نیاز کاربر را به بسیاری از کلیک را برای رسیدن به آنچه آنها می خواهند، و یا باید آن را ما انجام می دهیم در راه است، به عنوان مثال، فوری و یا تکمیل خودکار با گوگل که به شما اجازه می دهد تا ما به نتایج سریعتر؟ فنی و مهندسی شامل، مثل تامی به شما نشان می دهد، در واقع آن را ساخت. هستند بسیاری از انواع طراحی وجود دارد. به عنوان مثال، اگر شما در حال ساخت چیزی برای استقرار چیزی در یک کشور جهان سوم است که در آن برق زیاد یا که فناوری بسیار وجود دارد، شما باید به آنچه که شما در حال ایجاد طراحی در راه است که به راحتی دسترسی به مردم وجود دارد. اما اینکه چه نوع از تصمیم گیری های طراحی دیگر وجود دارد که ممکن است و یا ممکن است که در چیزی شبیه به این؟ آره. من یک دست است. [پاسخ دانش آموز نامفهوم] >> راست. دقیقا. دسترسی به یک چیز است. بسیاری از مردم در مورد فکر نمی کنم، "چه در مورد کاربران من؟" مانند افراط از هر دو طیف است. کاربران که ممکن است معلولیت که من فکر نمی و من فقط در مورد طراحی برای کاربر به طور کلی فکر می کنه. اینترنت قابل دسترسی است توسط هر کس در حال حاضر، و من باید طراحی برای آن دسته از مردم نیز هست. چه نوع از تصمیم گیری های طراحی های دیگر ممکن است شما را؟ بله. >> [دانشجو] هزینه. هزینه. بسیار خوب است. چیز دیگری که ما ممکن است تصمیم گیری های طراحی ما بر اساس هزینه. اگر ما یک کسب و کار، شما می خواهید برای ایجاد چیزی است که هزینه زیادی را برای تولید اما می تواند در هزینه بالا به فروش برسد و یا می توانید با ما برخی از سود دریافت کنید. 

این همه انواع مختلف از طرح است، اما زمانی که ما در حال ایجاد چیزی بر روی اینترنت یا زمانی که ما در حال ایجاد چیزی است که احتمالا می کند که بسیار مقرون به صرفه نیست برای ساختن نام هم اکنون، مانند برنامه های کاربردی اینترنت - شما لازم نیست که سرمایه زیادی را به آن پرتاب به منظور ایجاد چیزی است که در واقع کار می کند - چیزی است که ما بیشتر نگران تجربه کاربر است. ما به این طراحی کاربر محور است. اساسا آنچه طراحی کاربر محور شامل خودتان قرار دادن در کفش از کاربران خود است. اگر کسی علائم برای من، آنها رو بدیهی است که به کاربرد خاص من با یک هدف در ذهن می آیند، با کار آنها می خواهند را پر کنید. و کار خود را نه تنها برای کمک به این کار تکمیل آنها اما برای کمک به این کار تکمیل آنها را به شیوه ای است که کارآمد، بصری، و، به عنوان برخی از شخص گفت: بیش از وجود دارد، در دسترس است. بهره وری به چه معنی است؟ بهره وری یعنی کاربر من چگونه به سرعت کامل کار با توجه به رابط من است. آیا تعداد زیادی کلیک آن را برای آنها از یک مکان به مکان دیگر دریافت کنید؟ آیا این خسته کننده است؟ آیا آنها را برای انجام بسیاری از کارهای تکراری؟ ما می خواهیم این روند را به عنوان کارآمد به عنوان امکان پذیر است به طوری که آنها مجبور به انجام آن نوع از همه چیز. همانطور که شهودی است که، به عنوان مثال، اگر یک کاربر به نظر می رسد تا رابط من، آن آسان است برای آنها از جایی به جای دریافت کنید؟ آیا آن را آسان برای آنها را به کشف کردن آنچه که باید در رابط من کلیک کنید در جهت آنها برای رسیدن به هدف و یا وظیفه ای است که آنها می خواهند برای رسیدن به؟ 

و در نهایت، به عنوان یک فرد گفت: بیش از وجود دارد، در دسترس است بسیار مهم است. [مرد سخنگویی آن به دسترسی برای چیزهایی مانند بینایی می آید، دوست دارم که چگونه می توانم در واقع طراحی چیزی برای کسی که کور است؟ آه. برای افرادی که نمی تواند را در همه، ما باید چیزی به نام خوانندگان روی صفحه نمایش است. آنچه شما باید انجام دهید این است که شما باید وب سایت خود را در راه ساخت که، برای مثال، به ویژه از فن آوری های ما تماس بگیرید - هستند بسیاری از چیزهایی که در حال حاضر وجود دارد. من فکر می کنم خوانندگان روی صفحه نمایش وجود دارد به نام JAWS. بسیاری از این چیزها تکیه بر آنچه که ما قوانین منطقه به منظور خواندن را برای کاربر چیزی است که در حال حاضر در صفحه است. برای آن دسته از افرادی که نمی توانید ببینید، شما باید مطمئن شوید که این صفحه خوانندگان در واقع می تواند انتخاب کنید تا محتوا بر روی صفحه و در واقع می تواند کاربران خود را نشان می دهد، اگر شما نمی توانید ببینید، حداقل شما هنوز هم می توانید مطالب را بر روی صفحه را درک کنید. آره. باشه. به اندازه کافی صحبت کردن در مورد طراحی خوب است. اجازه دهید بحث در مورد طراحی بد. این ها چیزهایی هستند که شما باید انجام دهید. آیا می توانم هر کسی به من بگویید در مورد تجارب خود را با Craigslist در و چه فکر می کنند این است که در مورد این طرح بسیار بزرگ نیست؟ بله. >> [دانشجوی] من فکر می کنم بیش از حد بسیاری از واژه ها در یک منطقه وجود دارد. بیش از حد بسیاری از کلمات، درست است؟ کاملا خسته کننده باشد. این صفحه تا به حال می آیند و شما با یک دسته کامل از چیزهایی که تا اینجا مورد استقبال که حتی به شما ممکن است مهم نیست. به عنوان مثال، شما را در یک حالت می کند که با این حرف آغاز زندگی می کنند. اجازه دهید به شما می گویند و یا چیزی در تگزاس زندگی می کنند. 

شما را به تمام راه را به پایین صفحه برای رسیدن به محل سکونت شما در حرکت است. من از بوستون هستم، پس مرا در ماساچوست نگاه کنیم. ماساچوست کجاست؟ آه، آن را در اینجا ببینید. آه، آن بوستون. باشه. اجازه دهید نگاهی به بوستون. [خنده] بسیار سخت و طاقت فرسا است، درست است؟ چیزهای بی دست و پا بیش از وجود دارد. [خنده] بیایید می گویند من به دنبال جایی برای زندگی می کنند. چگونه بسیاری از مردم که در واقع Craigslist در استفاده می شود؟ تن از شما. خیلی بد از راه به در نگاه کنید، اما اجازه دهید نگاهی به این وجود دارد. تفاوت بین IMG و PIC چه خبر؟ آیا می توانم هر کسی به من بگویید؟ در واقع تفاوت وجود دارد. منظور آنها دقیقا همان چیزی که است، اما آنها برچسب های مختلف آنها را برای برخی از این دلیل است. اگر من تا به روی عکس کلیک کنید، هیچ چیز اتفاق می افتد بر روی صفحه است. من در واقع جستجوی مجدد چیزی است که اتفاق می افتد را کلیک کنید. چه ممکن است یک طراحی بهتر تصمیم گیری است که می تواند انجام شود وجود دارد؟ اگر من کلیک کردن بر روی آن فیلتر، من احتمالا می خواهید به آن عمل خاص فیلتر یا آن دسته خاص. بنابراین به جای نیاز به دوباره جستجو را فشار دهید، من فقط به طور خودکار می تواند انجام فیلترینگ مرتب کردن بر اساس از سبک گوگل جایی که آنها این کار را انجام فورا. [مالان] اما آیا نمی شود به عنوان دیده ایم، آنها تا کنون باید به صورت فیزیکی ارائه توسط هدف قرار دادن حداقل و یا کلیک کردن بر روی یک دکمه را وارد کنید؟ همانطور که شما آنها را تا کنون دیده می شود، شما در واقع باید به کلیک بر روی ثبت به انجام آن چیز است. 

اما به عنوان تامی شما را در یک ثانیه را نشان می دهد، در واقع راه برای شما وجود دارد به طوری که هنگامی که شما بر روی چیزی که کلیک کنید آن را به طور خودکار می توانید ارسال آنچه که ما به یک درخواست AJAX و دریافت داده ها به عقب و فیلتر کردن نتایج خود را بلافاصله. تن از چیزهایی است که در اشتباه هستند با این رابط وجود دارد. [مالان] آیا می توانم شما را برای کمبریج را جستجو کنم؟ چیزی کمی غیر عادی وجود دارد که در آن شما در مورد کمبریج مراقبت و در عین حال شما Westford، بهار هیل، غرب نیوتن و مانند آن. احتمالا نه ایده آل است. >> احتمالا ایده آل نیست. چگونه ممکن است من قادر به تجربه کاربر را بهتر در این صفحه خاص؟ بله. >> [دانشجو] راهنمای. باشه. دستورالعمل ها در چه نوع از حس؟ [دانشجو] به عنوان مثال، یک چیز برای اولین بار که حتی نمی دانند چه Craigslist در این است یا شما نمی دانید آنچه که شما قرار است انجام دهد. راست. بنابراین در توضیح آنچه Craigslist در این است در این صفحه مهم است. ما در واقع می تواند به کاربران این صفحه است که در واقع برای. اگر من تنها با بازدید از این، می بینم دسته تمام نقاط. من حتی نمی دانم آنها چه می. اما مهمتر از آن، فقط در این رابط به دنبال به یاد داشته باشید من تا به حال به حرکت کردن یک تن از چیزهایی که برای پیدا کردن یک جامعه خاص که من واقعا در مورد مراقبت. یک راه سریعتر که می تواند انجام دهد؟ بله. [دانشجو] تقسیم آنها تا به شرق، مناطق غرب. >> درست است. من می توانم آنها را به دسته های بیشتری است که می تواند به من کمک کند سریعتر تعیین تقسیم چگونه به آن مکان خاص. [دانشجو] قرار دادن لیست کشویی است. >> راست. باشه. من می توانم یک منوی کشویی به دلیل ما مجموعه ای ثابت از چیزهایی استفاده کنید و ما می توانیم آنها را در یک منوی کشویی را نشان می دهد. به این ترتیب آن را کند نمی شود تا فضای بسیار بر روی صفحه نمایش. اما حتی بهتر از آن، چه می توانیم بکنیم؟ بله. >> [پاسخ دانش آموز نامفهوم] >> که به شما می گویند؟ >> [دانشجو] کادر جستجو. آره، یک جعبه جستجو. که بزرگ است. چیزی که ما در واقع می توانید انجام دهید این است اگر ما نگاهی به اسلایدهای جعبه جستجو، می باشد. تکمیل خودکار. بسیار راه آسان برای جستجو از طریق نتایج این است که شما می دانید در یک مجموعه هستند. اگر من شروع به تایپ BO، فقط به من نشان بده تمام نتایج به دست آمده است که در داخل BO از آنها. به این ترتیب من به راحتی می توانید پیدا کنید یکی از خاص من می خواهم برای رفتن به به جای نیاز به حرکت از طریق این لیست واقعا بزرگ است. 

اینها همه انواع واقعا کم حلق آویز میوه است که کسی که در حال اجرای Craigslist در در واقع می تواند تجربه در وب سایت خیلی بهتر برای کاربر خاص خود را به انجام دهد. باشه. به اندازه کافی صحبت کردن در مورد وب سایت های بد است. اجازه دهید بحث در مورد فیس بوک. وقتی فیس بوک بیرون آمد، و به ویژه عکس های فیس بوک، بسیاری از خدمات دیگر در این زمان است که می تواند انجام دهد دقیقا همان چیزهایی وجود دارد. آنها می توانند عکس های خود را به آلبوم را سازماندهی کنند. آنچه شما می توانید انجام دهید این است که شما می توانید آنها را به مجموعه، سازماندهی و همچنین. شما می توانید آنها را بر اساس تاریخ سازماندهی کنند. شما می توانید تمام این چیز ها خاص انجام دهد. اما آیا هر کسی می دانم چه فیس بوک عکس منفجر در آن زمان منتشر شد؟ بله. >> [دانشجو] برچسب ها برچسب ها >>. دقیقا. ما میلو در اینجا، طلسم سگ خود را با آن دستمال گلدار CS50. شما می توانید ببینید که در حال حاضر این قابلیت برچسب زدن در وسط. و چه عکس فیس بوک از نقطه نظر قابلیت استفاده بسیار جالب ساخته شده است این است که آن را در واقع اجازه داد تا مردم را از طریق این شامل دوستان خود را در عکس های خود را. برای فیس بوک، از وب سایت خود را به خصوص اجتماعی، در مورد ساخت این نوع از جو اجتماعی است. بهبود تجربه از عکس ها خیلی بیشتر زیرا آنها در واقع می تواند شروع و گفت: "این ارتباط میان مردم، و این عکس در مورد افرادی که شما در واقع در مورد مراقبت هستند. " بخشی از آن نیز خودشیفتگی مرتب سازی بر اساس. مردم دوست دارند در عکس ها و چیزهایی مانند که برچسب گذاری شود. در حالی که یک صفت خوب انسان نیست، در همان زمان آن را بر اساس تصمیمات طراحی خوب چرا که مردم در واقع در مورد چیزهایی مثل این مراقبت. به طوری که عکس در فیس بوک. 

اما اجازه دهید بحث در فیس بوک به طور کلی. من مطمئن هستم که تعداد زیادی از مردم در اینجا نظرات خود را در مورد فیس بوک، هر دو تصمیم گیری طراحی خوب و بد تصمیمات طراحی است. پس خالی یا خوشحال. در تاریخ آمده است. من می دانم که همه شما استفاده از فیس بوک. کسی که به چیزی بد برای گفتن و یا چیزی برای گفتن در مورد آن است. بله. [دانشجو] در خبر است بسیاری از چیزهایی که من واقعا نمی مراقبت وجود دارد. خبر می کند نشان می دهد که بسیاری از چیزهایی که شما ممکن است در مورد مراقبت. شما دوستان در فیس بوک است که شما به مدت 2 یا 3 سال رعایت نشده و دیدن نتایج، اخبار خود را در خبر خود را ظاهر می و شما در مورد آن اهمیتی نمی دن. فیس بوک در واقع تلاش برای ساختن بهتر، و آنها در واقع سعی کردم به فشار مربوط به خبر از اواخر سال بنابراین شما در واقع همه چیز از دوستانی که مربوط به شما و یا دوستان نزدیک خود را ببینید. هر چیز دیگری؟ بله. [پاسخ دانش آموز نامفهوم] >> که به شما می گویند؟ [دانشجو] تبلیغات نسبتا محجوب است. >> به چه معنا است؟ [پاسخ دانش آموز نامفهوم] آنها نور را بر روی صفحه نمایش را نداشته باشند، مانند بنر. باشه. این خوب است. اگر شما به یاد داشته باشید از طریق اینترنت از '90s - >> [مالان] من وجود دارد. >> او وجود دارد. [خنده] شما ممکن است چشمک زن های gif زمینه، sparkly همه چیز را به یاد داشته باشید، GeoCities مرتب کردن بر اساس سبک از همه چیز. این واقعا یک مثال از یک طراحی خوب نیست چرا که آن را واقعا از محتوا منحرف می کند. وب سایت هنر ییل مورد استفاده قرار گیرد به GIFs متحرک به عنوان پس زمینه خود را و شما می توانید هر چیزی را بر روی صفحه به عنوان خوانده شده اما من حدس می زنم کسی که در واقع به آنها صحبت کرد و در حال حاضر آن را کمی متفاوت است. [مالان] بهتر در حال حاضر. >> بهتر در حال حاضر، شما می توانید ببینید. >> [مالان] اوه آره. فقط بزرگ، فقط - آره. باشه. 

بخشی از آن است همچنین ساخت صفحه شما احتمالا بسیار مینیمالیستی و بسیار قابل فهم بنابراین چیزهایی در جریان صفحه در راه است که بسیار منطقی و در راه از یکدیگر نیست. انواع از چیزهای دیگر خوب در مورد فیس بوک و یا بد در مورد فیس بوک هستند؟ اجازه دهید فقط مکالمه طراحی. آه. کجا؟ آره. [دانشجوی] سیستم گاهشمار جدید به شما اجازه می دهد تا به جستجو مشخصات فرد در مورد گذشته خود است. آه، گاهشمار. گاهشمار یک چیز بزرگ است، زیرا آن را به شما اجازه می دهد ساقه دوستان خود زمانی که آنها در مدرسه بالا بود. گاهشمار خوب است، چرا که آن را به شما اجازه می دهد تا از محتوای خیلی سریع تر فیلتر، این اجازه می دهد تا به شما در پیدا کردن چیزهایی که در غیر این صورت گرفته به شما یک زمان واقعا طولانی برای پیدا کردن فقط بالا رفتن و پایین، تا، تا، تا، تا، تا، مانند رفتن به عقب در زمان. اما پس از آن نوع از حرکت نزولی نیز وجود دارد که در شرایط استفاده از تجربه کاربر. چه چیزی ممکن است؟ کلمه بزرگ است که با P-R شروع می شود. >> [دانشجو] حفظ حریم خصوصی است. حریم شخصی >>، درست است؟ حریم خصوصی کاربر شماره تجربه بزرگ است. این یکی از چیزهایی که من از آنها بدم میاید بیشتر در مورد فیس بوک در حال حاضر است. [خنده] [مالان] همانطور که من در حال حاضر. دیوید متوجه نیست که این در واقع تا دیروز اتفاق افتاده است. بنابراین در حال حاضر او می داند که هر بار که به او چت می کنم من می دانم که او به من شده است نادیده گرفتن است. [مالان] بخش بی دست و پا بود من در واقع نادیده گرفتن او را، و من نمی دانم او می دانستم که من او را نادیده گرفتن است. [خنده] حریم خصوصی یک مسئله بزرگ است. آیا می توانم هر کسی به من بگویید چه ممکن است در مورد حفظ حریم خصوصی فیس بوک بد علاوه بر این واقعیت است که آنها انجام کارهای شبیه به این؟ آنچه در آن است بسیار سخت را با احترام به حریم خصوصی فیس بوک انجام دهید؟ که مرتب سازی بر اساس یک سوال پیشرو است. بله. >> [دانشجو] عکس های خود را از افراد خاصی مخفی شود. راست. دقیقا، برای مخفی کردن عکس های خود را از افراد خاصی است. آنها را به این کوچک، دکمه کوچک در سمت راست بالا است که به شما اجازه می دهد حفظ حریم خصوصی از یک عکس را تغییر دهید. گزینه های حفظ حریم خصوصی خود در بین انواع مختلف از منوهای بسیار متنوع است. 

آنها خیلی بهتر در مورد آن بدست اخیرا، اما از آن استفاده می شود به صورت که هر زمان که شما می خواهید برای جلوگیری از دوستان خود را از دیدن عکس ها، شما می توانید از طریق 5 مرحله بسیار پیچیده بودن مثل، اجازه دهید این لینک کلیک کنید، در حال حاضر به من اجازه دوباره کلیک کنید، اجازه دهید من دوباره کلیک کنید، اجازه دهید من مشخص است که مردم می توانند عکس های من را نمی بینید. که خوب است به خصوص در بخش فیس بوک چون خیلی در مورد تجربه کاربر است که در واقع به آنها آزادی برای کنترل آنچه مردم می توانید ببینید. ما به این کاربر کنترل و آزادی است. اگر شما اجازه کاربران خود را انجام دهد که در راه است که کارآمد و بصری، سپس تجربه کاربری شما را واقعا بزرگ است نه در همه.  آیا شما بچه ها می خواهم برای گفتن هر چیزی در مورد فیس بوک؟ چگونه می توانم من به نوبه خود این خاموش؟ [اونگ] شما می توانید این خاموش روشن نیست، و این یک نقص بزرگ قابلیت استفاده بر روی بخشی از فیس بوک است. این ویژگی - من در واقع دیروز را در آن نگاه کرد - آن که یا شما می توانید آن را ندارند و یا آن را به خاک سپرده شد جایی بسیار، بسیار عمیق است در recesses از فیس بوک به دلیل من نمی تواند کشف کردن که چگونه به غیر فعال کردن این قابلیت در همه. [مالان] اما گاهی اوقات این تصمیم گیری واضح نیست دلیل این که شما بچه ها به ما داده اند بسیاری از بازخورد مفید در CS50 برنامه های مختلف و وب سایت های که در این دوره با استفاده از. همه ما از این درخواست ها و پیشنهادات اجرا نیست. 

بخشی از این برای گرفتن درخواست بسیاری از است که آن را یک تابع از زمان، اما گاهی اوقات ما فقط یک تصمیم آگاهانه، مانند "با تشکر از شما برای این پیشنهاد، اما ما مخالف است." پس چگونه می توانم به شما در واقع چیزی است که شما باید انجام دهید تصمیم بگیرند که اگر کاربران شما فکر می کنم شما باید چیزی را انجام دهید حتی اگر شما لزوما نه؟ این یک تعادل خوب بین در واقع گوش دادن به آنچه که کاربران شما می گویند و در واقع نوعی از خط که در آن به شما می گویند، "ما قصد داریم برای انجام این کاربران می گویند." و به طور خاص، من فکر می کنم نقل قول هنری فورد است که خلاصه این بالا خیلی خوب بود. "اگر من مردم خواسته بود و آنچه آنها می خواستند، آنها را گفته اند که آنها می خواستند اسب سریعتر است." آیا می توانم هر کسی را اذیت جدا چه که نقل قول واقعا به معنای مرتب کردن بر اساس مسئله این است که کاربران می دانیم که آنها چه می خواهند، اما آن را که - [دانشجوی] آنها نمی دانند که چه چیزی ممکن است. در بخشی از آنها نمی دانند که چه چیزی ممکن است. کسی را دست انداختن که از هم جدا کمی بیشتر است. چه چیزی شما را در آن چیست؟ [پاسخ دانش آموز نامفهوم] این خوب است. چیزی که من فکر می کنم ما در حال تلاش برای گفتن در اینجا این است که مردم می دانند که چه می خواهند. آنها می خواهند اسب سریعتر. آنچه آنها واقعا می خواهند که توانایی به حرکت سریعتر است، اما آنها واقعا نمی دانند وسیله ای است که توسط آن برای دستیابی به آن است. هنگامی که شما را به کاربران خود می آیند و به کاربران خود را به شما بگویم چیزی و شما آنها را بگویید، "ما می خواهیم این ویژگی ها و این ویژگی ها و این ویژگی ها،" شما نمی خواهید که لزوما در مورد فکر می کنم، "اجازه بده تا من به جلو بروید "و اجرای آنها به صراحت می گویند،" اما آنچه که شما می خواهید را به فکر کردن در مورد این است که: "چه نوع از ایده ها می تواند از آن؟" چه آنها در واقع می خواهند؟ 

و از آنچه شما می توانید انجام دهید این طراحی چیزی است که ارضا کسانی که درخواست اما نه لزوما در راه است که کاربر انتظار دارد آن را به راضی است. بنابراین برای چیزی شبیه به پروژه های نهایی، در شرایط بسیار واقعی، اکتشافی مفید که آن را به ساخت چیزی بهتر می آید، به خصوص اگر طراح این غرور درباره او به موجب آن شما را مرتب سازی بر اساس بدانند چه چیزی بهترین است، شما ممکن است ورودی را از کاربران خود را، اما چگونه می توانم به شما در واقع در مورد گرفتن که بازخورد؟ در پروژه نهایی، بسیار مشخص است، چه تولید نتایج مطلوب در اینجا؟ تولید نتایج مطلوب - و من بیش از این در یک ثانیه - این روند در حال توسعه و سپس تست و پس از آن تکرار شده است. چیزی که من از آزمایش به معنی این است معمولا وقتی چیزی را طراحی شما فکر می کنید آن را نسبتا خوب، مثل، "من یک طراح بزرگ است. هر کس در حال رفتن به عشق این است." و سپس آن را به شما را از وجود دارد و افراد نمی دانند واقعا برای برخی از دلایل آن را می خواهم. چیزی که شما باید انجام دهید این است که شما را به بخش هایی از چیزهایی است که مردم دوست و وصله پینه کردن چیزهایی است که مردم دوست ندارند. آن را مانند یک فرایند بسیار آشکار است به نظر می رسد، اما به طور مداوم تکرار این فرآیند در بالا از آنچه شما در حال حاضر ساخته شده است یک فرایند است که به شما کمک می کند نه تنها بهبود مهارت های طراحی خود را بلکه همچنین کمک می کند تا طراحی را اصلاح کنید به طوری که مردم در واقع درک محصول خود را حتی بیشتر از آنچه که قبلا. 

من بیش از نمونه های عینی تر از چیزی است که شما در واقع ممکن است انجام دهد. به عنوان مرتب کردن بر اساس آخرین نمونه از یک محصول، اجازه دهید نگاهی به KAYAK. KAYAK هنگامی که آن بیرون آمد، بسیار، بسیار محبوب بود. آیا می توانم هر کسی حدس بزنید چرا؟ انواع چیزهایی که شما را در این مورد می خواهم اگر شما از آن استفاده می شود. و انواع چیزهایی که شما را دوست ندارند چه هستند؟ بله. >> [پاسخ دانش آموز نامفهوم] >> درست است. که بخشی از آن است که به کاربر اجازه پرس و جو است که بیشتر متمایل به توسعه از یک بسیار محدود مانند، "شما باید تاریخ شروع خود را انتخاب کنید "و شما را مجبور به انتخاب تاریخ پایان دهید." در واقع، آن را به شما اجازه می دهد تا در مورد آن انعطاف پذیر باشد و آن را به شما می دهد همه از پرواز در آن محدوده است. هر چیز دیگری؟ [دانشجو] آنها عبارتند از هزینه در قیمت است. آنها این کار شامل هزینه در قیمت. مالیات و چیزهایی در واقع مستقیما به آن قیمت را در سمت چپ بالا بروید به طوری که شما را به فکر فریب است که شما در واقع برای یک پرواز 240 $ پرداخت زمانی که آن را واقعا 330 $ است. هر چیز دیگری؟ بله. [پاسخ دانش آموز نامفهوم] من مطمئن هستم که اگر آنها در واقع به شما اجازه انجام این کار است. من ممکن است اشتباه باشد. که ممکن است چیزی که جالب است اگر شما می خواهید برای قرار دادن وزن بیشتر در مورد فیلترهای خاص به طوری که آنها فشار نتایج مربوط به آن فیلتر به بالا. اما هر کسی می تواند به من بگویید که چه چیز خاصی در مورد این سمت چپ است؟ چطور شد که شما به طور سنتی نگاه پرواز در خدمات اینترنت پیش از این؟ 

بله. >> [پاسخ دانش آموز نامفهوم] >> آیا می توانم به شما می گویند که - [دانشجویی] در هر شرکت هواپیمایی است. >> آره. هر هواپیمایی دارای وب سایت خود می باشد. این تحکیم چیزها می شود. و؟ [دانشجوی] شما می دانید دقیقا همان چیزی است که زمانی که شما در حال ترک. شما نمی دانید دقیقا همان چیزی است که زمانی که شما در حال ترک، اما مربوط به فیلترها به طور خاص است. اجازه بدهید من بالا بکشد KAYAK. آه خدا، پاپ آپ. تجربه کاربری است. چه اتفاقی می افتد زمانی که من حرکت این لغزنده است؟ [دانشجو] به روز رسانی خودکار است. >> [اونگ] خودکار به روز رسانی. این چیزی است که بسیار مهم است. پیش از این، هر زمان که شما می خواهید برای نگاه کردن به یک پرواز، شما تا به حال در محل ورودی، محل خروجی خود را، جستجو را فشار دهید قرار داده، آن که و پردازش کرده و نتایج خود را نشان می دهد. اگر شما می خواهید به درخواست شما، شما را مجبور به بازگشت دو بار فشار دهید، را وارد کنید در یک پرس و جوی جدید از ابتدا، و سپس آن را انجام دهد بارها و بارها. چیز خوب در مورد چیزی شبیه به این است که از آن استفاده می کند بسیار [ناخوانا] چیزی که در وسط است. هر زمان که شما چیزی شبیه به این، آن شاخه های درخواست آن را می گرداند و به شما تمام نتایج به سرعت. این نوع از بازخورد فوری، چیزی ساخته شده است که KAYAK wildly محبوب چرا که آن را واقعا آسان است برای من به پرس و جو من و از چیزهایی که در اطراف یک محدوده خاص هستند بدون نیاز به رفتن به عقب و جلو، عقب و جلو، به عقب و جلو. پس این ها همه انواع چیزهایی که می خواهید به فکر کردن در مورد زمانی که شما در حال طراحی وب سایت شما. چگونه می توانم آن را بسیار کارآمد برای کاربران من را از طریق رفتن به هر آنچه که آنها در حال کار بر روی و به هدف نهایی خود را در اسرع وقت؟ [مالان] و به نقطه یوسف پیش از آن در مورد کاربران لزوما دانستن آنچه آنها می خواهند، بر اساس آنچه که شما بچه ها در حال حاضر در مورد HTML می دانم و شما باید چک باکس، دکمه های رادیویی، منو انتخاب کنید، زمینه های ورودی و مانند، چگونه مفهوم از چیدن یک زمان شروع پرواز به شما پیاده سازی؟ 

که از آن مکانیسم UI های مختلف می استفاده می کنید؟ اگر شما فقط مقدار از HTML است که قبلا آموزش داده شد می دانم و شما می دانید ورودی دکمه های رادیویی، چک باکس ها، افت فراز و جعبه ورودی، آنچه را که انتخاب طبیعی خود را برای چیدن خرما بوده است؟ [دانشجو] ورودی. ورودی. >> یا شاید حتی یک قطره به پایین با تاریخ، درست است؟ بنابراین با مکانیسم های پیچیده تر UI شبیه به این را در سمت چپ است که شما می توانید پیاده سازی، شما می توانید این فرایند را با یک نوار لغزنده بسیار بیشتر بصری چون زمان پیوسته است، و مردم معمولا به آن فکر می کنم نه در شرایط استفاده از قطعات مجزا است. بسیار خوب. آخرین چیزی. ده اکتشافی قابلیت استفاده. احتمالا همه چیزهایی که ما صحبت در مورد زیر یکی از این دسته بندی ها قرار می گیرند. اگر شما به این لینک که از سایت های اینترنتی، شما در واقع قادر خواهید بود تا به عنوان شما طراحی سایت خود را، نگه داشتن این ابتکارات را در ذهن و این قوانین از انگشت شست. برای پروژه های خود، چیزی که من پیشنهاد می کنم شما را به منظور طراحی برنامه خود را بهتر است به انجام نمونه مقاله برای اولین بار. هنگامی که شما در حال فکر کردن در مورد درخواست شما، بسیار به سرعت طرح آنچه شما می خواهید آن را به شبیه و مطمئن شوید که تمام جعبه ها در راه است که بسیار حسی برای کاربر به استفاده مرتب و حتی این نمونه های کاغذ را به دوستان خود نشان می دهد و شروع به گروه تمرکز. فقط 2 یا 3 نفر با هم دریافت کنید و از آنها بخواهید فقط در این نمونه مقاله شیر، و آنها را به صفحه نمایش جدید نشان می دهد تا ببینید که آیا آنها در واقع درک چه خبر است. 

چیزی که شما می خواهید برای انجام این کار این است که آنها یک کار را، که کار را ایجاد انگیزه، و فقط آنها را به برنامه و اجازه استفاده از آنها را. آیا به آنها دستورالعمل ها فراتر از آن نیست. شما می خواهید به واقع اجازه دهید آنها را با برنامه خود را در راه است که به شما اجازه می دهد که دیدن تعامل چگونه آنها آن را اگر شما ایستاده بودند در کنار آنها استفاده کنید. و این بسیار مهم است. است که شما تعداد زیادی از بینش را به عنوان افرادی هستند که به دست آوردن چیزهایی خاص در راه است که من آنها را قصد ندارم به؟ آیا آنها با استفاده از مکانیزم های خاص UI بر روی صفحه نمایش در راه است که نوع hacky است؟ من قصد ندارم آنها را به آن انجام دهید. و هنگامی که شما با آن انجام می شود، چه چیزی می خواهید کاری انجام دهید؟ سنگ طراحی کنید، درست است؟ چیزی که شما می خواهید برای انجام این کار این است که شما می خواهید برای توسعه و پس از انجام این روند را دوباره و دوباره. بنابراین نشان دادن آن به دوستان هنگامی که شما آن را توسعه، تست، توسعه، تست، توسعه، آزمایش، تکرار، و در و رو به جلو است. طراحی یک فرآیند تکرار شونده در این معنا بسیار است. شما در واقع به ایجاد چیزی و سپس متوجه همه چیز در مورد آن است که شما قبل از درک نمی کنند و به عقب برویم و بهبود از آن. در حال حاضر، به عنوان بخشی از توسعه، این چیزی است که تامی در جریان است را به شما نشان می دهد پس از شکستن و چگونه شما ممکن است قادر به اجرای چیزی شبیه به تکمیل خودکار در راه است که نسبتا ساده است. [مالان] ع تامی مجموعه تا اینجا، یک سوال پس از آن. بسیاری از قدیمیترین وب سایت ها - و هنگامی که یوسف گفت: سال 1990s سبک وب سایت، پیاده سازی شده که در آن اگر شما می خواهید برای انتخاب زمان شروع و زمان پایان، رک و پوست کنده، در روز و حتی در برخی از وب سایت امروز، راه را به شما انجام این کار این است که ساعت شما را از منوی کشویی انتخاب کنید. دقیقه انتخاب شما از منوی کشویی، شاید شما را انتخاب AM، PM، و سپس شما را که 3 بار. و به این ترتیب با 6 کلیک و شاید برخی از پیمایش کاربر خود را در واقع می تواند نوعی از تاریخ و / یا محدوده زمانی به این معنا را ارائه می کنند. 

پس قطعا کمتر از حد مطلوب و در عین حال تا کنون دیده ایم قابلیت رسا در هر یک از زبان های ایم در نگاه به جذاب چیزی مثل این گوشی کشویی از زمان شروع و زمان پایان. اما اگر شما فکر می کنم تا هفته 0 زمانی که ما در مورد ابتدا صحبت کردیم، بیش از حد وجود دارد ویدجت که فقط به چیزهای خاصی بودند. شما واقعا فقط به حال این اصول مانند حلقه ها و شرایط و مانند آن است. بنابراین نوع فقط فکر بسیار انتزاعی در حال حاضر، مستقل از خاص از HTML، چیزی است که واقعا با چیزی شبیه به این زمان شروع و پایان اسلایدر زمان؟ هنگامی که موس من حرکت و من در آن نماد هویج کوچک در سمت چپ کلیک کنید و شروع به کشیدن، برنامه نویسی، آنچه که شما می خواهید می شود قادر به اجرای را که اتفاق می افتد؟ چه سوالاتی، چه عبارات بولی آیا شما می خواهید می شود قادر به درخواست؟ چه چیزی واقعا در رفتن؟ سامی؟ [دانشجوی] که در آن موقعیت مکان نما؟ >> خوب است. موقعیت مکان نما کجاست؟ این چیزی است که ما نیاز به ابراز بازگشت به خراش بود، آیا آن را بر اساس محل سکونت و یا حتی رنگ و یا مانند بود. شما ممکن است همیشه به یاد می آورم که به طور خلاصه در دوشنبه همه این چیزها وجود دارد به نام رویدادها در دنیای وب، و بنابراین چیزهایی مانند onclick و onkeypress وجود دارد و هم OnKeyUp و onmouseover و onmouseout. به طوری که حتی این چیزهایی که ما شده ایم برای گرفتن بر روی وب اعطا درک با سایت هایی مانند فیس بوک و جیمیل، حتی اگر شما هیچ ایده شما احتمالا خواهد بود که از آنجا که هیچ چیزی حتی شبیه به آن را در سخنرانی وجود دارد اجرای یا مشکل مجموعه 7، متوجه باشید که با این اصول همان، با HTTP و پارامترها و GET و POST، با ورودی های پایه HTML که ما تا کنون در نگاه و در یک لحظه با مکانیسم های برنامه ریزی شده است که در مورد تامی را به شما معرفی می تواند به شما شروع به بیان خودتان را درست مثل شما در هفته 0 توسط بسیار طور مستقیم با کشیدن و رها کردن. 

پس با که گفت، تامی MacWilliam و برخی از قطعات پازل جدید برای ما برای وب سایت. بسیار خوب. نام تامی است و من قصد دارم به صحبت کردن در مورد جاوا اسکریپت. فقط یک اعلامیه سلب مسئولیت: من بر این عقیده هستم که جاوا اسکریپت بهترین زبان برنامه نویسی در کل تمام جهان است. تعداد زیادی از مردم که با من مخالف وجود دارد، اما آن را فقط شگفت انگیز است. هنگامی که شما به بازگشت به C، اگر شما مجبور به نوشتن C یکی دیگر از کلاس و یا برخی از زبان های دیگر، واقعا در تمام جزئیات سطح پایین شما باید خسته کننده برای دریافت گرفتار کردن شوید. بنابراین اگر شما همیشه احساس غمگین در مورد چگونگی مزاحم C برای نوشتن، فقط بازگشت، نوشتن بعضی از جاوا اسکریپت. نیروانا است. شما احساس بسیار بهتری نسبت به روز بد خود را. بسیاری از سحر و جادو از جاوا اسکریپت می آید از توانایی خود را برای دستکاری همه چیز که در حال حاضر بر روی صفحه است. هنگامی که ما در اسکریپت های PHP خود نوشت، آنها بر روی سرور اجرا شد، و در نهایت که PHP اسکریپت احتمالا خروجی برخی از HTML است. که HTML به مشتری فرستاده شد، و پس از آن بود که آن را. اگر PHP می خواستم برای اضافه کردن یک دکمه به یک صفحه، برای مثال، آن را واقعا نمی تواند انجام این کار است. آن را تمام فایل های جدید های HTML به ارائه و ارسال از آن است که به مرورگر. با جاوا اسکریپت ما می دانیم که ما می توانیم همه چیز را در حالی که آنها در حال حاضر در صفحه به روز رسانی، و به همین دلیل ما می توانیم ارائه بازخورد بسیار بیشتری از طریق مسنجر، که واقعا تجربه کاربر در وب سایت ما را بهبود بخشد. فقط یک روکش سریع از انتخابگرهای جاوا اسکریپت. ما می دانیم که زمانی که یک صفحه HTML ما دانلود، که در DOM نشان داده شده است. 

DOM به یاد داشته باشید فقط به این درخت بزرگ که در آن عناصر در این سلسله مراتب بزرگ مربوط است. زمانی که ما با پایگاه داده در pset 7 کار می کرد، یکی از اولین چیزهایی که ما نیاز به می دانم که چگونه به انجام این کار بود، پرس و جو از پایگاه داده است. در حال حاضر این جدول کاربران بزرگ است، و گاهی اوقات ما فقط می خواهم بگویم، "من فقط می خواهم برخی از این کاربرانی که مطابقت دارند برخی از شرایط است." به همین ترتیب، هنگامی که ما DOM ما نیاز به برخی از راه پرس و جو آن است. ما نیاز به برخی از راه گفت، "من می خواهم از دکمه که شبیه به این "یا تمام تصاویر را بر روی صفحه است." و این انتخابگرهای به ما اجازه می دهد برای انجام این کار است. پس فقط سریع روکش. این یکی از اولین، این # ارسال، چیزی است که با رفتن به Select؟ آیا کسی به یاد داشته باشید؟ [پاسخ دانش آموز نامفهوم] >> بله، دقیقا. این است که رفتن به یک عنصر را انتخاب کنید در صفحه ای است که دارای یک ID از ارائه. و به طوری که مخلوط برچسب می گوید این انتخاب شده است به همراه IDS کار. چگونه در مورد دوم، این است. محور، چه خواهد شد که انتخاب کنید؟ آره. >> [دانشجو] کلاس. >> دقیقا. این در حال حاضر رفتن به کلاس را انتخاب کنید. تفاوت بین ID و کلاس در اینجا به طور کلی این ID باید منحصر به فرد در داخل فضای هر آنچه که شما در جستجوی بیش از. بنابراین اگر شما در جستجوی بیش از یک صفحه وب را، شما واقعا فقط باید 1 عنصر که با ID خاص داشته باشند، بنابراین در این مورد ارائه شده است. با کلاس ها، از سوی دیگر، ما می توانیم بیش از 1 عنصر در همان صفحه با همان کلاس. این می تواند مفید باشد گفت: من می خواهم که همه چیز بر روی صفحه متمرکز را انتخاب کنید نه فقط 1 چیزی. 

و در نهایت، این یکی از آخرین در اینجا کمی پیچیده تر است. اما آنچه در این است که رفتن به از DOM را انتخاب کنید؟ [پاسخ دانش آموز نامفهوم] >> که؟ [دانشجو] هر چیزی که یک برچسب. >> ما دارای 2 بخش است. بخش دوم از رفتن به می گویند من می خواهم به انتخاب این برچسب ها با برچسب های ورودی، ماوس، کیبورد، بنابراین هر عنصر که یک تگ ورودی است. اما من نمی خواهم فقط انتخاب همه ورودی چرا که چیزی شبیه به یک دکمه submit می تواند ورودی و چیزی شبیه به یک جعبه متن می تواند یک ورودی است. بنابراین با این براکت من گفت: من فقط می خواهم به انتخاب این عناصر که از نوع متن است. جایی در تگ HTML من من یک ویژگی به نام نوع، و ارزش که صفت است به متن. پس چگونه در مورد این بخش اول در اینجا؟ فرم کلمه برای اولین بار از این انتخاب این است پس من باید فضا و سپس این قسمت ورودی می باشد. چه که انجام دهید، و قرار دادن فرم در مقابل آن؟ این امر اساسا محدود کردن پرس و جو ما. این می تواند باشد که در حال حاضر برخی از ورودی ها بر روی صفحه که فرزندان از یک فرم نیست. آنچه را انجام خواهد داد این خواهد گفت: من فقط می خواهم از تگ های ورودی است که در جایی بالاتر از آنها را داشته باشد برخی از عنصر پدر و مادر از یک فرم است. و در این راه ما می توانیم از این نمایش داده شد بیشتر سلسله مراتبی بنابراین ما نه تنها باید همه چیز را مطابق انتخاب داده شده را انتخاب کنید. ما می توانیم نوع محدودیت دامنه که پرس و جو به چیز دیگری است. بنابراین در حال حاضر ما می دانیم که چگونه به انتخاب عناصر در صفحه، اجازه دهید بحث کمی در مورد AJAX. AJAX مخفف هنوز هم بسیار مرسوم، مد روز است که مخفف جاوا اسکریپت و XML ناهمگام است. این فقط اتفاق می افتد که XML است که تنها برخی از راه برای نشان دادن داده ها است. 

این نوع از محبوبیت از دست رفته به تازگی، پس X در AJAX در همه زمان ها استفاده نمی شود. در واقع، آنچه AJAX اجازه می دهد تا ما را به انجام درخواست های HTTP از چهار چوب از جاوا اسکریپت. هنگامی که ما در مرورگر وب ما هستید و ما به مرور در اطراف صفحات و ما با کلیک بر یک لینک، مرورگر ما این است که برای انجام این کار، ایجاد یک درخواست HTTP به هر لینک ما کلیک کنید. اما این همیشه ایده آل نیست زیرا در صورتی که این مورد، پس از آن به عنوان دیوید گفته بود، ما همیشه به کاربران روی دکمه ارسال کلیک کنید و یا روی یک پیوند کلیک کنید به منظور ایجاد هر چیزی رخ می دهد که شامل یک درخواست HTTP است. بنابراین با AJAX ما می توانیم این درخواست را به نمایندگی از جاوا اسکریپت. این بدان معناست که هر زمان که کاربر در تعامل با صفحه و یا هر چیزی که اتفاق می افتد، ما در واقع می تواند یک درخواست برنامه ریزی شده به برخی از فایل های PHP بر روی وب سایت ما را یا هر چیز دیگری و بازیابی داده هایی را که که فایل تف. بیایید نگاهی به یک نمونه از AJAX. این صفحه بودجه CS50 ما را که با آن امیدوارم بعضی از ما آشنا است. اگر ما را در HTML این صفحه نگاه کنید، ما می بینیم که در اینجا من به چند چیز، که یکی از آنها من با توجه به این ID. من گفت: ID = "فرم نقل قول" است. من انجام داده ام این کار را فقط به خاطر اینکه آن را به رفتن به این بیت کمی ساده تر را انتخاب کنید از DOM از آنجایی که من فقط می توانید پرس و جو بسیار ساده است. آنچه من می خواهم به انجام این کار در اینجا است که من می خواهم به حل بعضی از مشکل با CS50 بودجه می باشد. بنابراین اگر ما به finance.cs50.net به، هر بار که من می خواهم به یک نقل قول، من به روی این دکمه کلیک اعلان و این که دکمه نقل قول و سپس من را به یکی دیگر از تمام صفحه است. و اگر من می خواهم به یک نقل قول دیگر، من باید به دکمه برگشت و پس از آن من در تایپ، من یک نقل قول، و من دکمه برگشت. این است که واقعا بهترین تجربه کاربر نمی باشد. چه کسی واقعا سایت اگر آن است که آهسته برای دریافت قیمت سهام استفاده می کنید؟ بنابراین آنچه که ما می خواهیم با AJAX انجام دهید این است که حذف این مرحله از رفتن به یک صفحه جداگانه به منظور مشاهده نتایج. 

آنچه ما واقعا فقط برای پرسیدن که این قیمت واقعا کوچک است، و این که فقط مقدار کمی از داده ها است. پس هیچ نیازی نیست برای من به رفتن یکی دیگر از کل صفحه HTML وجود دارد، دانلود یک دسته جدیدی از HTML، ممکن است تصاویر برخی از دانلود، برخی از فایل های CSS دیگر فقط برای من برای پاسخ به این سوال بسیار ساده است چقدر قیمت این سهام است. با AJAX ما باعث می شود که این بسیاری از ساده تر است. ما می بینیم که در اینجا من ارتباط را در یک فایل جاوا اسکریپت به نام quote.js. اجازه دهید در واقع باز کردن آن فایل. نداشته باشد. همه از فایل های جاوا اسکریپت من در حال رفتن به در HTML قرار داده شود به طوری که مرورگر وب می تواند به آن دسترسی داشته باشید. پس ما می توانیم یک دایرکتوری جداگانه برای جاوا اسکریپت، و در حال حاضر در اینجا quote.js است. در بالای این فایل، این می گوید که در اینجا من می خواهم برای تمام صفحه صبر کنید تا لود شود قبل از اینکه من سعی می کنم تا هر کاری را انجام دهند. این است که چرا لازم است؟ به نظر می رسد که چیزی که بعد از من قصد دارم در اینجا به انجام است، شروع به دنبال یک عنصر که منطبق بر برخی از انتخابگر است. اگر این جاوا اسکریپت است که تا کنون اعدام شده قبل از این عنصر در صفحه لود شده، سپس همه چیز من سعی می کنم به انجام کار نمی کند چون من قصد دارم به سعی کنید به انتخاب چیزی است که وجود دارد نشده است. پس این خط را تا بالا می گوید که من می خواهم به شما صبر کنید تا همه چیز لود بنابراین ما تضمین شده است که هر عنصر من به دنبال در واقع بر روی صفحه است. این علامت دلار در اینجا به این معنی است که من با استفاده از کتابخانه جی کوئری. این کتابخانه JQuery اجازه می دهد تا ما را به استفاده از این انتخابگرهای که ما فقط نگاه. با گفتن دلار پس از آن عبور از در به عنوان یک استدلال به این # فرم نقل قول، من در حال حاضر انتخاب آن شکلی که ما فقط در زمان نگاهی به. در حال حاضر من به نمایندگی از آن در حافظه به نحوی است. 

این شیء در حال حاضر، این نمایندگی به فرم، من در حال حاضر با استفاده از یک تابع نامیده می شود. این تابع انجام می دهد آن است که رفتن به ضمیمه یک event handler. این رویداد است که ما قصد داریم به گوش رویداد ارسال شده است. بنابراین، هنگامی که کلیک کاربر ارسال را فشار دهید و یا فشار وارد کنید، این رویداد در حال رفتن به آتش کشیدند. با اتصال به این، من در حال حاضر می تواند رفتار به طور پیش فرض از فرم زیر پا بگذارند. بدون این جاوا اسکریپت، فرم را به ارائه هر فایل PHP ما در آن صفت استفاده می شود. اما در عوض، من در حال حاضر و گفت: صبر کنید، صبر کنید، صبر کنید، من نمی خواهم شما را به واقع انجام این کار است. من می خواهم این اتفاق قبل از اینکه شما بروید و سعی کنید برای ارسال به چند فایل PHP. حالا چه من می خواهم به انجام این کار؟ در این مرحله من می خواهم به استفاده از AJAX در قیمت سهام به نحوی به بار. اولین چیزی که من نیاز به دانستن این است که چه سهام به کاربر این است که به دنبال. برای انجام این کار است که من قصد دارم برای استفاده از یکی دیگر از انتخاب. این انتخاب سوم ما در قبل از نگاه است. این ماده می گوید که من می خواهم برای شروع کردن این عنصر با ID نقل قول از فرم. سپس در جایی در داخل از آن فرم به عنوان یک عنصر ورودی وجود دارد است که به نام نماد است. اگر ما نگاهی به HTML ما، ما شاهد است که ما تا به حال یک ورودی [NAME = نماد]. این بدان معنی است که این امر که جعبه متن را انتخاب کنید که کاربر در حال تایپ کردن به. خوب می باشد. ما جعبه متن. در حال حاضر ما فقط باید بدانید که چه چیزی در داخل آن است. برای انجام این کار ما می توانیم از این روش در اینجا تماس بگیرید، این وال. و به این می گوید: من می دانم چه جعبه متن به شما می باشد. من می خواهم شما را به من بگو آنچه در آن است که کاربر را در جعبه متن تایپ شده است که. در حال حاضر ما باید یک رشته به نام نماد که برابر است به هر کاربر تایپ شوید. خوب می باشد. ما می توانیم این رشته در حال حاضر از درخواست ما را به. این یک تابع جدید در اینجا، این، به جز ما دیگر برای رفتن به انتخاب عناصر، ما در حال رفتن به فراخوانی یک تابع مختلف که توسط jQuery را به ما ارائه شده است. این تابع AJAX همان چیزی است که در واقع رفتن به این درخواست HTTP است. بنابراین ما باید آن را چند چیز را بگویم. اولین چیزی که ما باید برای گفتن این تابع این است که در آن من می خواهم درخواست خود را به رفتن. جایی در پروژه های من من این فایل را در داخل دایرکتوری HTML به نام quote.php. من می توانم این فایل دسترسی پیدا کنید، ما، درست مثل این دیدم، اگر من به localhost را / quote.php. 

من می خواهم جاوا اسکریپت من را به یک درخواست به آن صفحه است. چه نوع درخواست در حال حاضر؟ ما شاهد بودیم قبل از آن شکل است که روش = "ارسال" ویژگی، و این بدان معناست که این رفتن به یک درخواست POST، پس از آن برای قرار دادن هر چیزی در URL، به جای یک درخواست GET، که از کار اخراج شود اگر ما فقط با مرورگر وب قابل دسترسی، برای مثال. حالا ما گفت: من می خواهم برای ایجاد یک درخواست HTTP POST به صفحه واقع در quote.php. هنگامی که فرم ما ارسال کنید، به یاد داشته باشید ما می توانیم عناصر ورودی در داخل از آن فرم دسترسی داشته باشید که با متغیر $ _POST. تا کنون در داستان ما در امتداد هر گونه اطلاعات در واقع نه فرستاده نشده است. ما فقط گفت: ما در حال ساخت یک درخواست AJAX و در اینجا به نوع درخواست ما در حال ساخت است. در حال حاضر ما باید در واقع به برخی از داده ها را به صفحه. برای انجام این کار است که ما می توانیم از این ویژگی به نام داده ها استفاده کنید. ارزش این ویژگی است که در واقع یک آرایه انجمنی است. دلیل این کار این است که آن را به ما اجازه می دهد تا به ارسال بیش از فقط 1 قطعه ای از داده ها است. به همین دلیل است که ما باید این آکولاد در اینجا داخل این پرانتز فرفری دیگر تو در تو. کلید ها در این آرایه های انجمنی در حال رفتن به همان چیزی که به عنوان کسانی که به نام صفات عناصر فرم است. این بدان معنی است که اگر من به همراه یک کلید از نماد ارسال، این بدان معناست که صفحه PHP من می تواند دسترسی به این داده ها با $ _POST [نماد] درست مثل قبل از زمانی که ما ارائه یک فرم بود. و در حال حاضر داده های واقعی ما می خواهیم به ارسال رفتن به داخل مقدار این آرایه انجمنی. 

ما این متن را در یک نماد متغیر به نام ذخیره می شود، و بنابراین ما ارسال در امتداد هم اکنون یک کلید از نماد و یک مقدار از هر آنچه کاربر تایپ شوید. حالا ما این درخواست HTTP، فایل پی اچ پی ما را اعدام کرده است. و آن را از رفتن به ارسال برخی از داده ها در حال حاضر به مشتری است که به تازگی ساخته شده این درخواست. در حال حاضر ما نیاز به پاسخ دادن به هر سرور به ما گفت. برای انجام این کار است که ما باید این ویژگی آخر در اینجا به نام موفقیت. مقدار کلید موفقیت این است که در واقع برای رفتن به یک تابع، و این یکی از چیزهایی که واقعا سرد است که شما می توانید با جاوا اسکریپت انجام شده است. نه تنها می تواند برای نوع داده int و یا آرایه ای که به عنوان ارزش در داخل یک آرایه انجمنی، ما همچنین می توانیم یک تابع داشته باشد. بنابراین با گفتن موفقیت این کلید من است. روده بزرگ می گوید: در اینجا می آید ارزش، و در حال حاضر ارزش این است که در واقع یک تابع است. بنابراین ما نیاز به این تابع را به نام فی نفسه. ما فقط می تواند این است که برای رفتن به برخی از عملکرد می گویند. این را به 1 بحث است. بحث ها و منازعات را به این تابع خواهد بود هر سرور ما ارسال بازگشت از درخواست. درست مثل زمانی که ما می سازد یک درخواست به سرور می فرستد چیزی و مرورگر آن را نمایش در زمینه AJAX ما فقط یک درخواست به سرور فرستاده چیزی، و در حال حاضر ما آن را به عنوان یک رشته نشان داده شده است. با استفاده از این رشته من فقط برای صفحه نمایش است که بر روی صفحه می خواهم. برای انجام این کار است که من قصد دارم به یکی از انتخاب آخرین. من می خواهم به این عنصر با قیمت ID را انتخاب کنید. این فقط یک DIV خالی که من در صفحه، و من می خواهم به مجموعه ای از مطالب که دیو به هر سرور ما ارسال بازگشت. من در واقع اصلاح quote.php بیتی. 

به جای فراخوانی رندر و ارائه برخی، quote.php در حال حاضر است که به سادگی رفتن به نسخه قابل چاپ از ارزش سهام را به عنوان یک رشته است. بنابراین اگر شما به واقع بازدید از صفحه، شما فقط این رشته کوچک را ببینید هر چه قیمت سهام است. آخرین چیزی که ما باید انجام دهیم در اینجا فقط مطمئن شوید که این تابع مقدار false برگرداند. این می گوید این است که اگر من در داخل یک اداره کننده رویداد و این که اداره کننده رویداد را برمی گرداند نادرست به جای بازگشت واقعی، این بدان معنی است که من می توانم در رویداد اصلی به آتش می خواهم. در این حالت، اگر هیچ جاوا اسکریپت را نداشته باشند و ما به یک فرم، مرورگر وب سایت ما در حال رفتن به می گویند، "من قصد دارم برای ارسال این اطلاعات همراه، و آنها در حال رفتن به شما ارسال به یک صفحه دیگر. از آنجا که ما در حال استفاده از AJAX در حال حاضر، بدون نیاز به کاربر را به یک صفحه دیگر وجود دارد. ما فقط رفتن به صفحه نمایش نتایج به صورت پویا بر روی این صفحه همان. ما واقعا نمی خواهم که آنها را به همه جا بروم، و من می خواهم به ماندن در همان صفحه. بنابراین با بازگشت به غلط، به شما اطمینان می دهیم که شکل این کار را برای ما انجام نمی. اجازه دهید نگاهی به آنچه که این در واقع به نظر می رسد. صفحه نقل قول ما به نظر می رسد همان است. اجازه بدهید من بازرس را بالا بکشد، بنابراین ما می توانید ببینید چه خبر است در اینجا. آن را کمی کمتر بزرگ. به یاد داشته باشید اگر ما برای باز کردن زبانه شبکه، این است که ما می توانیم از درخواست های HTTP را ببینید که اتفاق می افتد بر روی صفحه است. 

برای یک نماد به شما اجازه می دهد تا من در AAPL تایپ کرده و کلیک کنید دریافت نقل قول. در حال حاضر ما دیدم که سهم اپل هزینه های برخی از تعدادی از دلار فقط بر روی صفحه ظاهر شد، اما این URL را تغییر دهید نه در همه. در واقع، در اینجا به درخواست HTTP است که ما فقط ساخته شده است. ما یک درخواست POST به quote.php. که حس می کند. این همان چیزی است که به سرور ما ارسال بازگشت. این دیگر این سند HTML غول پیکر با تصاویر و چیزهایی شبیه به آن، این فقط یک خط از متن، و پس از آن ما فقط به خط از متن نمایش داده می شود. اگر ما به عقب را به هدر و ببینیم که چه چیزی است که ما در واقع در داخل این درخواست HTTP فرستاده می شود، ما را در اینجا می توانید ببینید که ما در امتداد یک کلید از نماد و یک ارزش AAPL فرستاده می شود، است که آنچه را که کاربر تایپ شوید. این خوب است، اما هنوز هم کمی آزار دهنده است. من هنوز هم می توانید با کلیک بر روی این دکمه نقل قول سهام برای به دست آوردن. ما مردم مشغول هستیم و ما هم به کلیک بر روی دکمه ندارد. گوگل متوجه این موضوع کمی در حالی که پیش زمانی که آنها به اجرا در گوگل از طریق مسنجر. Google مسنجر را انجام می دهد این است که شما در حال تایپ آن را فقط شروع به نمایش نتایج برای شما بنابراین شما لازم نیست که به نگرانی در مورد حتی کلیک کردن جستجو. در واقع، یک داستان سرگرم کننده مربوط به آن است. هنگامی که گوگل از طریق مسنجر بیرون آمد، مردم بودند، مانند "ایست، این است که فوق العاده شگفت انگیز است." "این خیلی باحال است." و دانش آموز را در دانشگاه استنفورد که 19 در آن زمان بود این سایت به نام یوتیوب از طریق مسنجر ساخته شده است. همه از طریق مسنجر یوتیوب به طور موثر یوتیوب فورا جستجو کنید. بنابراین به جای نیاز به رفتن به YouTube.com و ضربه جستجو، زمانی که من شروع به تایپ کردن به چیزی یوتیوب از طریق مسنجر مانند CS50، ما در اینجا می توانم ببینم که آن را تلاش برای اتصال به اینترنت آهسته جمعیت این نتایج زنده. برای انجام این کار ما در واقع باعث می شود که اصلاح بسیار ساده به فایل quote.js. در حال حاضر ما در حال اتصال این رویداد هنگامی که فرم را مشاهده کنید. ما واقعا نمی خواهید به کاربر را ارائه که به شکل دیگر، بنابراین به جای آتش این رویداد هر بار که کاربر فشار یک کلید به شما اجازه می دهد تا. برای انجام این کار ابتدا اجازه دهید تغییر این رویداد را از تسلیم به keyup. این بدان معنی است که به جای انتظار برای فرم برای ارسال، هر بار که کلید فشار داده شده است، و این چیزی است که اتفاق خواهد افتاد. این دیگر را حس می کند به ضمیمه این رویداد keyup به شکل کامل. ما واقعا فقط در مورد مراقبت از جعبه جستجو که. 

برای انتخاب است که در حال حاضر، ما می تواند تغییر کند این را، به جای نقل قول از فرم، فرم نقل قول می کنیم و ورودی (نوع متن =) داشته باشند و یا ما می گویند (نام نماد =) - هر چه ما می خواهیم. در حال حاضر یکی از آخرین چیزی که ما باید انجام دهیم وجود دارد. به یاد داشته باشید را در اینجا هنگامی که ما گفت: بازگشت کاذب ما گفت: ما نمی خواهیم که رویداد به طور پیش فرض به آتش. اما این فقط اتفاق می افتد که اگر ما غیر فعال کردن که در حال حاضر، هر چه ما در نوع قصد ندارم به نشان می دهد تا در مرورگر دیگر زیرا آن رفتار به طور پیش فرض از تایپ کردن را در یک جعبه متن. ما دیگر نمی خواهید به باطل است که، بنابراین اجازه دهید از بین بردن این بازگشت غلط. در صورتی که ما ذخیره و بارگذاری مجدد صفحه، در حال حاضر زمانی که من شروع به تایپ AAPL شما خواهید دید که قیمت سهام در پایین در اینجا به طور خودکار در تکمیل است. بنابراین در اینجا این است که CS50 مالی از طریق مسنجر. در واقع یک داستان سرگرم کننده در مورد یوتیوب از طریق مسنجر این است که دانش آموز فقط نوع آن را به عنوان یک پروژه 1-شب نوشت، و روز بعد او را به کار CEO یوتیوب ارائه شده است. بنابراین تا زمانی که که ساده است، شما CS50 دانش آموزان، پروژه های نهایی خود را می توانید به شما یک کار را در یوتیوب. چیزی شبیه به آن ایده واقعا سرد برای یک پروژه نهایی است، درست است؟ ما تا به حال برخی از قابلیت های موجود که ما می خواستیم به ادغام با. به ما در بهبود تجربه کاربر کمی، و ناگهان در جستجوی چیزی در یوتیوب از طریق مسنجر ممکن است آسان تر زیادی از جستجو آن را بر روی YouTube به طور منظم است. به طوری که AJAX به طور خلاصه. 

در نمونه که جوزف نشان دادن، ما شاهد مقدار زیادی از autocompletes، و آن autocompletes هستند واقعا، واقعا دستی به این دلیل ما مجبور نیست به خاطر داشته باشید - برای مثال، اگر شما به یاد داشته باشید قیمت سهام اپل نه و ما فقط می دانم آن چیزی AA، به جای تنها گفتن به من، "هزینه های یک سهم از این چیزی که این پول زیاد است، من به نوعی می خواهم به دانستن آنچه که سهام با AA شروع. ما می توانیم که واقعا سادگی کار با کتابخانه خود راه انداز که در حال حاضر شامل در داخل از CS50 بودجه. اگر شما می آیند تا در اینجا به تگ جاوا اسکریپت و پایین به Typeahead، این فقط یک پلاگین خوب است که کسی در حال حاضر برای ما نوشت، و ما به راحتی می تواند قابلیت های خود را شبیه به این استفاده کنید. من در تایپ و در اینجا این است که یک لیست از برخی از کشورهای است که با A. شروع اجازه دهید بگویم که من فکر می کنم این واقعا سرد است و وقت آن است برای من که شامل در این صفحه من است. به نظر می رسد که این واقعا، واقعا ساده است. پرش در اینجا به quote3.js. فایل به نظر می رسد کمی متفاوت است. را در اینجا همه از چیزهای AJAX من همان است. من می خواهم برای بار کردن داده های سهام بدون نیاز به رفتن به یک صفحه دیگر. اما در حال حاضر من می خواهم به استفاده از این پلاگین می باشد. مستندات مربوط به خود راه انداز نمونه های زیادی از که دقیقا چگونه من می توانم که انجام می باشد. من می خواهم بگویم، "ورودی است که من به تکمیل خودکار بر روی می خواهید، و من قصد دارم به این تابع به نام typeahead، و این رفتن برای رسیدگی به همه چیزهای Typeahead برای ما. فهرست مقداردهی اولیه، آن را به تمام از فیلتر ما انجام دهد. ، تنها چیزی که آن را نیاز به دانستن چه اطلاعات ما در حال autocompleting بر روی. بنابراین متوجه شدم این کلید تنها با خواندن اسناد و نگاه کردن به نمونه است. اگر من آن را یک کلید از منبع، مقدار این کلید را فقط برخی از مجموعه ای از چیزهایی که من به تکمیل خودکار بر روی می خواهید می باشد. این متغیر در آمد از این فایل های دیگر است. من باز کردن symbols.js. 

این symbols.js واقعا، واقعا بزرگ فقط این آرایه شامل رشته همه از این نماد سهام NASDAQ. اگر من می خواهم به پرش به HTML، بنابراین jharvard، vhosts، globalhost، html، قالب، quote_form. از آنجا که در حال حاضر به نام quote3.js، اجازه تغییر فایل جاوا اسکریپت من در اینجا از جمله من. حالا من quote3.js، بنابراین من قصد دارم که در فایل جاوا اسکریپت جداگانه باز، که است که تکمیل خودکار خود راه انداز. حالا وقتی که من پرش به مرورگر، بارگذاری مجدد صفحه، و من شروع به تایپ AA، تکمیل خودکار من وجود دارد. و این واقعا به همین سادگی است. من تا به حال 1 خط از کد که فقط گفت: "در اینجا چیزهایی که من به تکمیل خودکار بر روی می خواهید، و ناگهان من که این واقعا، واقعا خوب با قابلیت های زیادی از تلاش خود را در همه. همانطور که شما در حال توسعه وب سایت ها و به خصوص در سمت انتهای همه چیز، شما در حال رفتن به پیدا کردن این است که زیادی مورد. زیادی، زیادی، بسیاری از کتابخانه های واقعا رایگان در خارج وجود دارد وجود دارد که آن را فوق العاده آسان برای انجام چیزهایی مثل این. آیا می توانم هر کسی از هر گونه اشکالاتی از سادگی autocompleting در این لیست بزرگی از نمادها فکر می کنید؟ چه چیزی می تواند چیزی است که با این روش بهترین است؟ آره. >> [دانشجو] زمان، اگر شما تعداد زیادی از [نامفهوم] آره. در حال حاضر ما در حال دانلود این فایل جاوا اسکریپت بسیار زیادی دارد و بسیاری از نمادها وجود دارد. و بنابراین اگر ما یک تن از مسائل، این نوع می تواند از افزایش رکود نه تنها در جستجوی اما همچنین دانلود فایل واقعی است. بزرگ است. هر چیز دیگری؟ در حال حاضر هیچ حس واقعی از ارتباط وجود دارد. اگر من در A، شرکت هایی که نشان می دهد تا در اینجا تایپ کنید ممکن است محبوب ترین شرکت های است که با A. شروع 

قبل از من به اپل دریافت کنید، ممکن است شخصیت های برخی برای پیدا کردن آنچه من به دنبال. این تکمیل خودکار نشانی از این حس ارتباط ندارد. این فقط رفتن به می گویند، "هر چیزی که منطبق من قصد دارم به نشان دادن است." به جای آن، من می خواهم به برخی از ارتباط به نحوی به جستجوی من ادغام. اگر من در اینجا به بودجه یاهو، finance.yahoo.com، اگر من سعی می کنم به وارد کردن یک نماد در صفحه یاهو امور مالی و من شروع به تایپ کردن GOOG، من این فهرست خوبی از همه چیز است. واضح به نظر می رسد مانند امور مالی یاهو انجام شده است چیزی بیشتر باهوش اینجا. آنها برخی از ارتباط و آنها نیز به اطلاعات اضافی مانند نام سهام. این چیزی است که من واقعا تنها با فهرست سهام من از نمادهای نمی تواند. من می خواهم این و من قصد دارم به آن را. برای انجام این کار اجازه انجام این کار چند چیز است. بیایید برای اولین بار باز کردن بازرس در این صفحه از آنجا که ما دیدم که این صفحه مجدد نیست در تمام، پس از آن احتمالا با استفاده از AJAX به نحوی در حال بارگذاری اطلاعات است. ما می توانید دریابید که چه داده های آن را در حال بارگذاری است. اگر من این شبکه بر روی زبانه کلیک کنید، این ها برای رفتن به تمام درخواست های که شروع به اخراج می شود. حالا اگر من در گو تایپ، ما می توانید ببینید که من فقط یک درخواست HTTP جدید. این است که احتمالا جایی که داده ها است که از. مطمئن شوید که به اندازه کافی است، اگر من در این URL، که کمی عجیب و غریب به نام نگاه کنید، ما می توانید ببینید که این دقیقا همان جایی که یاهو در حال ارسال داده های خود را از. 

در من ایجاد کرده اید یک فایل جداگانه به نام suggest.php که در روح بسیار شبیه به تابع مراجعه. این اساسا برای ایجاد یک پرس و جوی URL یاهو، برخی از داده ها، و ارسال آن را به من برگرداند. در حال حاضر، به جای استفاده از این بزرگ، لیست عظیمی از نمادها، من می توانم همه چیز خوب ارتباط یاهو استفاده کنید، و من لازم نیست که عظیم فایل های جاوا اسکریپت برای دانلود. من فقط رفتن به جلو و در واقع مربوط به نماد سهام. اجازه دهید که به پرش. بنابراین HTML، JS. ما در حال حاضر در quote4. در حال حاضر ما در حال دیگر با استفاده از این فهرست بزرگی از فایل های جاوا اسکریپت. اما یک نوع کوچک از مشکل طراحی در اینجا وجود دارد. ما گفت که در AJAX ناهمزمان است. آنچه را که بدان معنی است که زمانی که من را یک درخواست AJAX، در اینجا در خط 8، این است که در آن درخواست AJAX است که در واقع از کار اخراج شده است. بیایید می گویند در حال حاضر من به برخی از کد را در اینجا است که به انجام برخی مسائل می خواهم هشدار به کاربر و یا چیزی تغییر بر روی صفحه است. چه اتفاق می افتد این است که مرورگر برای این درخواست صبر کنید تا ادامه قبل از پایین آمدن و برخورد این خط است. این بخش ناهمگام است. رفتن به این درخواست را و گفت، "هر زمان که شما به پایان برسد، "دوباره و فراخوانی آن تابع است که من به شما گفته به داخل از موفقیت تماس بگیرید." این بدان معناست که ما می توانیم نه تنها دانلود همه سهام را از قبل است. ما نیاز به درخواست و انتظار برای چیزی است که به دوباره. این بدان معناست که قبل از آن، ما به سادگی می تواند راه انداز را بگویید، "در اینجا لیستی از چیزهایی که من می خواهم به تکمیل خودکار بر روی است." ما دیگر می توانید انجام دهید که دیگر چرا که ما نمی دانیم آنچه که ما به واقع تکمیل خودکار می خواهم. خوشبختانه، راه انداز فکر کردم از این به این دلیل بچه ها هوشمند بیش از وجود دارد، و آنها در واقع به ما راه دیگری برای بارگذاری این پلاگین Typeahead. قبل از آن، ارزش این اموال منبع فقط این آرایه بزرگ از چیزهایی که تکمیل خودکار بود. 

در حال حاضر اموال منبع است که در واقع یک تابع، و هدف از این تابع این است که بفهمد چه چیزهایی که به تکمیل خودکار بر روی. راه رفتن به شکل که از رفتن به از امور مالی یاهو آنچه را که بهترین چیز را به تکمیل خودکار هستند. برای انجام این کار است که من قصد دارم به درخواست بسیار شبیه AJAX. من قصد دارم به درخواست این صفحه در suggest.php. من می خواهم به همراه ارسال این نمادها هنوز هم. و در حال حاضر موفقیت من، اسناد و مدارک خود راه انداز به من گفت که به منظور پر که لیستی از همه چیز، همه من نیاز به انجام این کار این است که در این آرایه منتقل می کند در حال حاضر به callback function. اما یک دقیقه صبر کنید. اگر این قرار است به یک آرایه و AJAX است من ارسال متن، چطور چنین چیزی ممکن است؟ این معرفی یک راه جدید برای تبادل اطلاعات به نام JSON. در این صورت ما نه تنها با ارسال یک رشته ساده از متن. در حال حاضر ما در حال برخورد با این لیست پیچیده تر از نمادهای سهام است. این نماد سهام نیز می تواند چیزهایی مانند نام شرکت و یا قیمت فعلی باشد. فقط با استفاده از یک رشته بزرگ طولانی است که به هیچ وجه قابل پیش بینی نیست فرمت نمی تواند بهترین راه برای به دست آوردن این اطلاعات را از روی سرور یاهو به من در راه است که من به راحتی می توانید درک کنند. JSON یک تکنولوژی است که طول می کشد استفاده از نحوه ایجاد آرایه های انجمنی در جاوا اسکریپت است. این به نظر می رسد بسیاری مانند یک آرایه انجمنی جاوا اسکریپت، و در واقع، آن را به دلیل آن است. JSON مخفف نشانه گذاری شی جاوا اسکریپت می باشد. این است که اساسا بر اساس فرمت برای انتقال داده ها به عقب و جلو به توافق رسیدند. در اینجا این شی JSON یا JSON آرایه های انجمنی در حال ارسال من برخی از اطلاعات در مورد یک دوره. 

کلید های این آرایه چیزهایی مانند دوره است که دارای ارزش cs50، و پایین در اینجا ما می توانید ببینید که من می تواند یک ارزش است که یک آرایه را داشته باشند. من لازم نیست که برای انجام کارهای مانند پارسه خارج رشته و به دنبال کاما و انجام کارهای دیوانه شبیه به آن. دلیل این است که در این فرمت JSON اعلام شده است، جاوا اسکریپت و jQuery در حال حاضر از توابع برای تبدیل یک رشته که به نظر می رسد مثل این JSON را به یک آرایه انجمنی واقعی جاوا اسکریپت که ما می توانیم با آنها کار کنید. انجام این کار است که به عنوان ساده به عنوان کرد و گفت که دیگر این فایل، suggest.php، ارسال بازگشت من به سادگی یک رشته از متن، اما من می دانم که رفتن به من ارسال JSON. این بدان معنی است که آن های JSON را می توان به یک آرایه انجمنی جاوا اسکریپت تبدیل شده است. و بنابراین، jQuery، من می خواهم شما را به انجام این کار برای من است. این بدان معنی است که این پارامتر پاسخ در اینجا، این است که دیگر فقط یک رشته است. از آنجا که ما jQuery را گفته ام که در اینجا می آید برخی از JSON، jQuery است خواهد بود به قدر کافی هوشمند هست برای گفتن، "شما می خواستم JSON؟" "من قصد دارم برای تبدیل آن به یک آرایه انجمنی برای شما است." اجازه دهید در واقع نگاهی در تب شبکه هنگامی که quote4.js. ما این تغییر بارگذاری مجدد صفحه. در حال حاضر من قصد دارم در تایپ دوباره. من دو درخواست به suggest.php، اما در حال حاضر این پاسخ، و نه تنها رشته، JSON است. بنابراین من باید یک بریس باز فرفری و گفت: "در اینجا می آید یک آرایه انجمنی است." 

کلید اولین و تنها از این آرایه انجمنی به نام نمادها، و پس از آن در اینجا مجموعه ای از تمام نمادهای مربوطه در حال حاضر از امور مالی یاهو، از این فهرست غول پیکر نیست. این که چگونه من به سادگی می تواند جمعیت این پلاگین تکمیل خودکار با برخی از داده هایی که از فایل های محلی که در حال حاضر از پیش تعیین شده نیست اما چیز دیگری است. به نظر می رسد که ما در واقع می تواند با استفاده از یک تکنولوژی به نام JSONP، یا JSON با پد است، که به این واسطه suggest.php از بین بردن. اما به جای انجام این کار، اجازه دهید به جای نگاه در من چگونه می توانم این را حتی بیشتر بهبود. من واقعا دوست دارم Typeahead خود راه انداز. این واقعا خوب است. اما ما در حال گرفتن خوب در جاوا اسکریپت است و ما می خواهیم به نوعی از انجام این کار خودمان، شاید نگاهی به آنچه این افزونه می تواند انجام شود. دیگر استفاده از آن چیزی Typeahead، و اجازه دهید سعی کنید این لیست سهام پیشنهادی خود را به. در اینجا به در quote6.php ما قصد داریم به شروع کردن به همان شیوه. هر نوع کسی چیزی، ما می خواهیم به ایجاد یک درخواست AJAX. این است که شبیه به اصلی CS50 بودجه ما از طریق مسنجر. به جای ساخت یک درخواست به quote.php، ما در حال حاضر ساخت یک درخواست به که همان فایل را به عنوان قبل از، این suggest.php، است که فقط رفتن به جلو و داده ها را از امور مالی یاهو. 

باز هم، ما هنوز هم در انتظار JSON، اما در حال حاضر از Typeahead این کار را برای ما انجام نمی دهد، ما نیز باید برای ارسال در امتداد ارزش است که در داخل جعبه متن. در حال حاضر ما می دانیم که چه چیزی را باید از امور مالی یاهو، و بنابراین در حال حاضر در اینجا تابع است که ما می خواهیم برای اجرای یک بار درخواست کامل است. ما این افزونه را فهرست برای ما، بنابراین در اینجا است که ما در واقع برای ساخت یک لیست از پیشنهادات. برای انجام این کار، بسیار شبیه به در PHP متنی طولانی این رشته بزرگ از HTML سپس ما آنها را چاپ می شود، ما می توانیم چیز یکسان در جاوا اسکریپت انجام دهید. در ابتدا ما قصد داریم برای شروع این رشته به نام پیشنهادات و این رشته فقط شامل برخی از HTML است. ما می خواهیم آن را به صورت یک لیست از چیزهایی است، بنابراین ما در حال رفتن به شروع کردن این لیست با برچسب و در حال حاضر ما در حال رفتن به تکرار بیش از همه از نمادهایی است که دوباره به ما بازگردانده شدند. به یاد داشته باشید، چرا که ما کرده ایم نوع داده: "JSON 'گفت: این رشته نمی باشد. این است که در حال حاضر مجموعه ای برای ما است. این واقعا سرد است. ما به سادگی می توانید، می گویند: "من می خواهم شما را به یک عنصر لیست اضافه." ما آن را در داخل یک عنصر یک طرف آن قرار داده است، ما آن را در یک کلاس پیشنهادات را بنابراین ما می دانیم آنچه در آن است، و در حال حاضر در اینجا این است که نماد آن است که ما از امور مالی یاهو. 

هنگامی که ما یک عنصر برای هر یک از نمادهای ما رو بدست بازگشت ما فقط می خواهید برای بستن لیست است. بنابراین در حال حاضر پیشنهادات نشان دهنده این قطعه کمی HTML که زمانی که بر روی یک صفحه قرار داده شده است برای رفتن به لیستی از چیزهایی که ما به دنبال آن هستید. در واقع قرار داده است که بر روی صفحه بگذارید. برای انجام این کار است که من در واقع یکی دیگر از دیو خالی و من به آن یک ID از پیشنهادات و انتقادات. بسیار شبیه به محتویات DIV که قیمت سهام از داده های نمایش داده را تعیین می کنند، ما در حال حاضر فقط به مجموعه ای از مطالب این دیو را به هر قدر این رشته می خواهم که شامل این نمادها می باشد. با استفاده از این روش HTML، این متغیر پیشنهادات، این رشته، یک رشته از HTML است. من می خواهم شما را به که HTML و قرار دادن آن در داخل DIV به نام پیشنهادات. ما فقط چیزی برای DOM افزوده در حال حاضر. کرده ایم افزود: برخی از عناصر جدید به DOM است که ما در حال حاضر می توانید بر روی صفحه نمایش داده شده است. بیایید ببینیم که چه چیزی به نظر می رسد. اگر ما در quote6 بارگذاری و در حال حاضر ما آمده ایم، در حال حاضر زمانی که من شروع به تایپ AAPL، ما دیگر لازم نیست که خود راه انداز تکمیل خودکار، اما ما در حال حاضر در این لیست است که ما خودمان ساخته شده است. این زشت کمی از Typeahead راهانداز است، به عنوان مثال، اما این به ما اجازه می دهد یک چیز دیگر را به انجام. هنگامی که ما در پلاگین خود راه انداز است که به دنبال ما دیدم که زمانی که ما autocompleted، یکی از ارزش های تکمیل خودکار AAPL بود. که می تواند خیلی مفید است. به عنوان یک کاربر، بلافاصله ممکن است تشخیص همه از نمادهای سهام. چیزی که من احتمالا بیشتر احتمال دارد به رسمیت شناختن نام واقعی این شرکت است. بنابراین آن را نمی تواند واقعا مفید است اگر به جای گفت AAPL این گفت چیزی شبیه به اپل از آنجا که ما از نورد این خود ما هستیم، ما واقعا به راحتی می تواند انجام دهد. اجازه دهید باز کردن آخرین فایل نقل قول: ما در اینجا، بنابراین quote7. 

همین. من فقط یکی دیگر از فایل های PHP است که به ما بیشتر از فقط نمادهای شده است. این همچنین به ما نام شرکت. و بنابراین ما در حال انجام همین کار است. ما در حال ساخت یک درخواست AJAX. هنگامی که درخواست را تکمیل کرده است، ما قصد داریم برای اجرای این تابع در اینجا، و این تابع برای ساختن یک رشته بزرگ از عناصر است. اما تفاوت در اینجا این است که ارزش این لیست نیست فقط نماد، در حال حاضر نام. بنابراین ما باید یک مشکل کوچک است. هنگامی که ما از مراجعه به ما، ما باید به نحوی آن را نماد عبور. ما می توانیم چیزی مراجعه به شرکت هایی مانند مایکروسافت عبور نمی کند. ما باید به تصویب آن MSFT. هنگامی که ما در حال نوشتن HTML، ما باید مقدار زیادی ساخته شده است در ویژگی های خوب. ممکن است با یک عکاس هنگام عکسبرداری و یا یک کلاس مرتبط است. اما آنچه ما واقعا نیاز در حال حاضر این است که برای هر یک از این لینک ها برای نماد سهام در ارتباط با آن است. هیچ ساخته شده است در ویژگی های HTML برای نماد سهام وجود دارد اما خوشبختانه، HTML5 اجازه می دهد تا ما را به ویژگی های خود را به هر کاری که ما می خواهیم. گفت: نماد داده ها، من به معرفی یک صفت جدید که نام من فقط ساخته شده تا، و این خوب است چون من آن را با این داده ها مقدمه. ما در حال رفتن به داخل وجود دارد نماد فروشگاه از سهام در حال حاضر. آنچه را که بدان معنی است که حتی اگر ما در حال نشان دادن ارزش از نام این شرکت در داخل از تکمیل خودکار ما، ما هنوز به خاطر سپردن نماد است که با هر یک از این شرکت در ارتباط است. راه ما در حال انجام آن است در داخل خود این عنصر است. به طوری که این معنی است که ما نیاز به ایجاد یک تغییر بیشتر. هنگامی که ما آن را کلیک کنید در حال حاضر، ما نیاز داریم که در واقع امکان استفاده از ویژگی های نماد نه تنها ارزش خود را. اگر ما را به بالا، یک event handler به ما پیوست به پیشنهادات. هر گاه یکی از این پیشنهادات کلیک در حال حاضر، من می خواهم به انجام کاری است. چیزی که من می خواهم به انجام این کار این است که تغییر مقدار آن جعبه ورودی. حالا من می خواهم به تنظیم این تابع همان وال است. 

بنابراین بدون هیچ گونه استدلال این تابع VAL می گرداند تا شما را به آنچه در حال حاضر در جعبه متن، اما اگر شما آن را یک رشته، آن را به رفتن به این رشته را قرار داده و آن را به جعبه متن. من انتخاب جعبه متن خود را در همان شیوه است. نام آن را در داخل نماد شکل نقل قول است. در حال حاضر من ارسال آن ارزش از ویژگی نماد داده. این نکته در اینجا این است، این (این). اشاره به این عنصر که کلیک شده است. ما در اینجا می توانید ببینید که ما در حال اتصال یک رویداد کلیک به هر یک از عناصر با یک کلاس از پیشنهاد به صورت جداگانه. در عوض، ما در حال نزدیک شدن به این کمی متفاوت است. در عوض ما گفت: هر زمان که در داخل هر چیزی از این دیو پیشنهادات، که فقط به یاد داشته باشید که ظرف برای آن فهرست، اگر چیزی در داخل این DIV کلیک کرده و آن را به یک کلاس از پیشنهاد، من می خواهم این رویداد را به آتش. اساسا چه این به این معنی است که ما می توانیم انجام است که ما می توانیم از این کنترل رویداد مشابه استفاده مجدد برای تمام چیزهایی که در لیست است. بنابراین ما لازم نیست که کنترل یک رویداد برای این عنصر اول به و کنترل رویداد های مختلف را برای این عنصر دوم. ما به جای آن می توانید، می گویند: "من می خواهم همان Event Handler را به همه چیز را در لیست اعمال می شود." اما ما باید به نحوی می دانم که عنصر کلیک. این "این" کلمه کلیدی نشان دهنده که فقط. این شی که فقط توسط کاربر کلیک می باشد. اگر من فقط لینک 3 کلیک، این نشان دهنده این عنصر که از لینک 3 که بدان معنی است که من می توانم صفات مرتبط با آن، داده، نماد، که ما می دانیم که حاوی نماد که با شرکت من فقط کلیک همراه است. اگر ما پرش به صفحه امور مالی ما، ما می توانید ببینید که در حال حاضر یک بار من شروع به تایپ کردن چیزی شبیه به MSFT، ما دیگر فقط نمادهای سهام، ما در حال حاضر شرکت های واقعی است. اما هنگامی که من در یکی از این شرکت ها را کلیک کنید، ما می توانید ببینید که ما در واقع پر از جعبه متن با نام شرکت اما با هر آنچه در داخل از آن ویژگی های داده ها ذخیره شده بود. و بنابراین اگر من در واقع یکی از این عناصر با راست کلیک کردن بر روی بازرسی و کلیک کردن بازرسی عنصر، ما در واقع می تواند آنچه به نظر می رسد مثل را ببینید. 

به یاد داشته باشید این چیزی است که ما در داخل حلقه ایجاد هنگامی که ما بنا شد تا این رشته از HTML است. ما در اینجا می توانید ببینید که نماد این اطلاعات دارای ارزش MSFT، که فوق العاده است. این چیزی است که ما انتظار داشتند. این نماد است و این که چگونه ما به این ارزش است که ما نیاز به استفاده از در داخل این جعبه متن. که به اندازه کافی برای شکل اعلان به این دلیل است که این نوع از خسته کننده است. اجازه دهید فقط برخی از پیشرفت سریع به صفحه نمونه کارها ما. اگر شما به CS50 بودجه در حالی که برای استفاده می شود و شما شروع به خرید و فروش بسیاری از سهام، در نهایت این جدول بسیار بزرگ، و شما در حال رفتن به خواهید سهام های اخیر، البته. هنگامی که جدول واقعا، واقعا بزرگ است، می تواند آن را برای کاربر مفید را امتحان کنید تا بیش از آن را جستجو کنید. در داخل جعبه جستجو اگر من شروع به تایپ کردن چیزی شبیه دیزنی و به دنبال سهام میکی موس من، ما می توانید ببینید که در جدول در حال حاضر فیلتر است بر اساس آنچه که من فقط تایپ شوید. این قابلیت به نظر می رسد فوق العاده پیچیده است، اما این واقعا، واقعا آسان با jQuery و جاوا اسکریپت. این فایل portfolio.php شامل یک فایل جاوا اسکریپت به نام portfolio.js. بیایید نگاهی به آن. بنابراین HTML، JS، نمونه کارها. اینجا جایی است که ما در حال انجام است که بر روی میز است. اولین چیزی که من باید برای انجام این کار این است که یک event handler به آن جعبه متن زیرا ما می دانیم که ما می خواهیم فیلتر ما تابع را به آتش هر بار که کاربر فشار چیزی چون ما زمان دکمه جستجو نیست. اولین چیزی که ما باید انجام دهیم این است که کشف کردن آنچه را که کاربر در حال جستجو برای درست مثل ما قبل از انجام. این کلمه اشاره به عنصر فعلی که کاربر در تعامل با. 

از آنجا که کاربر در تعامل با جعبه جستجو، این نشان دهنده جعبه جستجو، بنابراین this.val به ما می دهد که چه چیزی در داخل جعبه جستجو این کاربر در حال حاضر در حال تایپ کردن است. بنابراین، در حال حاضر آنچه که ما می خواهیم انجام دهیم این است که ما می خواهیم به تکرار بیش از همه از ردیف در داخل جدول. برای انتخاب همه سطرها در جدول ما، من به آن جدول ID از جدول نمونه کارها، و هر سطر توسط یک عنصر TR نشان داده شده، بنابراین این انتخاب به بازگشت به من آرایه بزرگ همه ردیف در جدول من. در حال حاضر من می خواهم به تکرار بیش از آن آرایه. من می تواند شما را برای حلقه، ولی jQuery در واقع ما فراهم می کند عملکرد خوب به نام "هر". هر می کند این است که هر کدام طول می کشد یک آرگومان، و این استدلال یک تابع است. آنچه در آن به انجام آن است که رفتن به اعمال آن تابع را برای هر عنصر در داخل این لیست است. این تابع یک آرگومان که الکترونیکی، و زمانی که این تابع اجرا شده است، این نامه است که با رفتن به سطر اول جا به جا شود، سپس ردیف دوم، و سپس ردیف سوم است. به این ترتیب، این همان چیزی در حال اجرا برای حلقه است و پس از آن بدانند عنصر فعلی در داخل شاخص خود را برای حلقه است. در هر تکرار، برای هر یک از این عناصر در جدول، من می خواهم در صورتی که متن این عنصر را بررسی کنید - متن از سلول داخل ردیف - مطابقت آنچه که من جستجو برای. بزرگ این رشته طولانی از دستورات این است که چگونه من می توانم انجام این کار است. اول، دوباره، این در حال حاضر به اشاره - از آنجا که آن را در داخل یک تابع جدید - این است که در حال حاضر سطر فعلی در جدول است. من می خواهم را به ردیف در جدول، و من می خواهم به همه فرزندان خود است. به یاد داشته باشید، DOM یک درخت سلسله مراتبی است، که بدان معنی است که عناصر تعدادی از کودکان می باشد. 

این عملکرد کودکان در حال رفتن به من بازگشت به مجموعه ای از تمام عناصر هستند که کودکان، در این مورد، یک ردیف در جدول. این فقط به سادگی به سلول ها داخل سطر. من فقط می خواهم برای بیش از سلول اول جستجو. این تابع اول می گوید من این عنصر برای اولین بار در آن آرایه را. سپس تابع متن می گوید: من دقیقا همان چیزی است که در داخل آن سلول از آنجایی که من می خواهم به بیش از آن متن را جستجو کنید. در نهایت، اجازه دهید آن را به کوچک تبدیل، بنابراین ما می توانیم به صورت متن نمایش داده شد حساس انجام دهد. در نهایت، ما می خواهیم برای دیدن در صورتی که رشته ای در داخل یک جدول شامل رشته ای است که ما در حال جستجو برای. فقط تابع indexOf در جاوا اسکریپت می کند که. این به ما می گوید یا نه، این رشته شامل یکی دیگر از رشته است. اگر این درست است که سلول شامل چه من، پس از آن من می خواهم تا مطمئن شوید که آن را نشان داده است. این روش نشان می دهد خواهد گفت، "این عنصر است." اگر این مورد نیست، پس این بدان معناست که هر چه من در جستجوی موجود نیست در آن ردیف، و بنابراین من می خواهم برای مخفی کردن از کاربر است. که به که اثر فیلتر خوب که در آن دیگر ما می بینیم که کل جدول است. اگر شما در چگونه این های اخیر و همچنین علاقه مند است، منبع آنلاین ارسال خواهیم. اما این واقعا ساده است. کاربران jQuery روش های عالی برای این انیمیشن ها و دستکاری خواص CSS است. بنابراین، آن را برای من است. 

چه پس از آن در پیش روست؟ همانطور که شما در عرض چند روز، پیشنهاد پروژه های نهایی است که به علت. پیشنهاد نهایی پروژه شما چند سوال بپرسید. اما در میان آنها خواهد بود سه نقاط عطف - 1 نقطه عطف "خوب"، یکی نقطه عطفی بهتر، و یکی از بهترین. این ایده که واقعا به شما کمک بچه ها، مجموعه ای از انتظارات شما به طوری که با حداقل شما خوشحال خواهد شد که خروجی با پروژه نهایی خود را و آن را "خوب" خواهد بود تا آنجا که به شما مربوط است. اما پس از آن در منافع به شما برای رسیدن به فقط کمی به چیزی بهتر یا بهترین چیزی، ما همچنین باید از سوق دادن شما به سوی آن و همچنین مرتب سازی بر اساس. هک CS50-a-مراسم، در همین حال، در چند هفته است. به طور معمول، ما این کار را بر اساس اساس قرعه کشی به خاطر منافع، اما شانس هستند خواهیم چند صد نفر از ما در اتوبوس از دانشگاه هاروارد میدان را به پایین میدان کندال جایی که مایکروسافت یک مرکز زیبا به درستی نام "NERD" - جدید مرکز تحقیقات انگلستان و توسعه. وجود دارند که ما باید حدود 8 بعد از ظهر ما به بعضی از مواد غذایی داشته باشند. در حدود 1:00 خواهیم برخی غذاهای بیشتری داشته باشد. حدود 5 اگر شما هنوز هم بیدار خواهیم سر به IHOP و یا شما را به دانشگاه. هدف وجود دارد، به پروژه های نهایی شیرجه رفتن در کنار همکلاسی و کارکنان. سپس چند روز بعد از آن، در نمایشگاه CS50، که واقعا به معنای به عنوان یک فرصت برای شما بچه ها به نمایش گذاشتن کار خود را و دستاوردهای ترم در حالی که مالش شانه با یکدیگر و گرفتن حس چه هر کس انجام است. با که گفت، بسیاری از لطف به تامی و به یوسف، و ما شما را در روز دوشنبه را ببینید.  [تشویق حضار]