[Powered by Google Translate] [Тиждень 9, продовження]
[David J. Малан - Гарвардський університет]
[Це CS50. - CS50.TV]
>> Це CS50. Це кінець тижня 9. Велике спасибі.
Нарешті. 9-й тиждень. Я отримав його.
Сьогодні ми продовжуємо нашу розмову про веб-програмуванні
віч-на остаточний проект, а не тому, що ви повинні щось зробити веб-
для остаточного проектів, але тому, що або для остаточного проекту або після CS50
це, звичайно, напрямок, в якому сучасне програмне забезпечення не збирається.
І все ж це насправді не легка річ.
У самому справі, одна з найважчих речей, щоб зробити аспекті дизайну.
>> Наприклад, дизайн ми маємо на увазі насправді отримати користувальницький інтерфейс
або користувальницький досвід права.
Наважуся сказати, - і ми знаємо з останніх поставленого завдання
, Коли деякі з вас ефір ваші нарікання про деякі шматок програмного забезпечення
або обладнання, яке дратує вас, як на кампусі або вимкнений -
є багато сайтів там, є багато апаратних там,
такий відстій.
Але реальність така, що робить речі, які легкі у використанні, але, тим не менш потужні
це дуже складне завдання.
Таким чином, на сьогоднішній день я попросив Йосипа і Томмі приєднатися до мене тут
так що ми можемо вести розмову, як про дизайн
і які розумові процеси повинні почати рухатися через вашу голову
При розробці остаточного проекту, ваших починаннях.
А потім за допомогою Томмі ми будемо дивитися на деякі деталі реалізації.
Як ви можете мати деякі бачення на папері або в умі
, Який потім можна виконати програмно
за допомогою деяких технологій і техніки ми тільки почали говорити про те,
а саме наявність і щось ще більш нових, а саме AJAX, асинхронний JavaScript.
Це дозволяє створювати все більш динамічним з інтерфейсу
по вибірці більше і більше даних поступово з сервера.
Таким чином, ми побачимо деякі з цих фрагментів, а сьогодні.
Як осторонь, якщо ви зацікавлені в концентрації в області комп'ютерних наук
або minoring в області комп'ютерної науки, знають, що в цю п'ятницю опівдні
У Максвелла Дворкін 221 буде піца події
де ви можете дізнатися трохи більше про комп'ютерних наук.
На вашому шляху до дверей сьогодні ви зможете підібрати неофіційними керівництво CS в Гарварді.
Ми помістимо його в сміттєві баки на вулиці в талії
так що якщо ви хочете, щоб захопити це і дізнатися трохи більше про CS,
що там буде для вас, як це було в тиждень 0.
Крім того, якщо ви хочете приєднатися до нас на обід CS50 в цю п'ятницю в 1:15 вечора,
попрямувати в cs50.net/lunch.
Не мудруючи лукаво, я даю вам навчання колег Йосип Онг.
Привіт. [Оплески]
Спасибі.
У перший раз я дізнався про дизайн був у класі тут називають CS179.
>> Професор в той час, розповів нам історію про інше професором
який виїхав в готель і використовувати крани.
Чи може хто-небудь сказати мені, що на 2 кнопки на лівій і правій робити?
[Студент] Гарячі і холодні. >> Гарячі і холодні. Добре.
Те, що ви зазвичай очікуєте, чи не так?
Цей професор після використання крана хоче, щоб прийняти душ, і він починає це використовувати.
Він вважає, що ліва і права сторони для гарячого і холодного, вірно?
Але хто може сказати мені, що це насправді?
Будь руки?
[Нерозбірливо відповідь студента] >> Одна з пропозицій полягає?
[Нерозбірливо відповідь студента] >> температури?
Таким чином, одна з них контролює температуру й інші елементи керування? >> [Студент] тиск води.
Тиск води. Добре.
Цей професор заходить в це і, думаючи, що вони контролюють гарячої та холодної,
Виходить правильний, яке він вважає для гарячого, все, аж до
тому що він хоче прийняти теплий душ.
Ну, це насправді не збігаються, так що він отримує це не дуже весело досвідом
бути в холодний душ, і всі ми знаємо, яке це.
Це приклад помилки проектування.
Що я маю на увазі, що це його очікування від крана
не відповідають тому, що вийшла з душу,
яка є своєрідною невдало для нього.
Так що це приклад помилки проектування, що відбувається в реальному житті.
Але ми бачимо, всякі інші, а також.
Ми, ймовірно, не вентилятори системи MBTA.
Це система метро насправді в Лондоні, який говорить: "Ця кнопка не використовується".
Чому навіть там? Навіщо нам ще потрібно?
Коли я був дитиною, будучи технічно просунутих в будинку,
, Коли комп'ютер буде катастрофа, моя мама прийде до мене,
показав мені цей екран і питає мене, що трапилося.
>> Навіть не знаю, що це означає.
[Сміється] Що?
[Сміх]
Іноді ми відчуваємо, що розробники програмного забезпечення просто троллінг нас.
Так як користувачі ми кшталт: "Що відбувається? Хтось каже нам".
Це все зводиться до питання дизайну.
Дизайн, як ми бачимо, не є чисто про естетику,
це не про те, як все виглядає.
Ми бачимо тут, що це невелике спливаюче тут насправді виглядає досить добре.
Він має тінь на задньому плані, вона має межу радіусів відбувається.
Це свого роду красива.
Це не дуже добре розроблена, тому що це не дуже зручно для користувача.
Це маленьке спливаюче вікно, яке з'являється на самому ділі не дати мені будь-яку інформацію,
Про те, що відбувається, вона не кажіть мені нічого, як користувач
про те, щоб оправитися від цієї помилки.
Ми хочемо, щоб думати про те, що дизайн це не так.
По-перше, це не естетика.
Він також не начинці вашого застосування з купою непотрібної функціональності.
Якщо ви тайський ресторан, ви, ймовірно, не хочу бути стоматологом в той же час.
І з Питань Facebook, не так багато людей використовували його
і це було насправді не на основі того, що вони будували.
І це так приємно думати не стільки кількістю речей
що ви кладете в ваше додаток, але якість
і як ви робите, що користувальницький досвід краще
насправді поліпшення від того, що ви вже маєте.
>> Загалом, дизайн говорить нам, що ми повинні будувати.
Наприклад, якщо ми будуємо те, що давайте шукати речі,
Google, як, наприклад, ми повинні робити речі, таким чином,
, Що вимагає від користувача потрібно багато кліків, щоб отримати те, що вони хочуть,
або ми повинні робити це таким чином, наприклад, з Google Instant, або автозаповнення
, Що дозволяє нам дістатися до наших результатів швидше?
Інженерні включає в себе, як Томмі покаже вам, насправді її створення.
Є багато типів дизайну.
Наприклад, якщо ви створюєте щось, щоб розвернути щось
У країні третього світу, де існує не так багато електрики або, що набагато технології,
Ви повинні проектувати те, що ви будуєте
таким чином, що легко дає доступ до народу.
Але те, що всякі інші дизайнерські рішення чи можуть бути
або можуть бути залучені в щось подібне?
Так. Я бачу руку.
[Нерозбірливо відповідь студента] >> праві. Саме так. Доступність це одне.
Багато людей не думають про те, "Як щодо моїх користувачів?"
як крайності або спектру.
У мене є користувачі, які можуть мати інвалідність, що я не думав про
і я просто думав про проектування для звичайного користувача.
Інтернет доступний кожному в наш час,
і я повинна бути розробка для тих людей.
Що всякі інші дизайнерські рішення ви могли б зробити?
Так. >> [Студент] вартості.
Варто. Дуже добре.
Інша справа, ми могли б засновувати наші рішення дизайну на це витрат.
Якщо ми бізнес, ви хочете побудувати щось, що не займе багато витрати на виробництво
але може продати в особливо високої вартості або можете отримати нам деяку прибуток.
>> Всі ці різні види дизайну, але, коли ми будуємо щось в інтернеті
або коли ми будуємо те, що, ймовірно, не варто було б стільки будувати зараз,
як інтернет-додатки - ви не повинні кидати багато капіталу в ній
для того, щоб зробити щось, що насправді працює -
те, що ми більше турбуються про те, користувальницький досвід.
Ми називаємо цей користувач орієнтованого дизайну.
По суті, користувач орієнтованого дизайну включає в себе ставить себе на місце ваших користувачів.
Якщо хтось підпишеться на те, що я будую,
Очевидно, вони приходять до мене конкретне застосування з метою,
із завданням вони хочуть, щоб закінчити.
І ваше завдання не тільки допомогти їм виконати це завдання
але, щоб допомогти їм виконати це завдання таким чином, щоб ефективно, інтуїтивно,
і, як кілька людей сказали там, доступною.
Що ефективності значить?
Ефективність означає, як швидко у мого користувачеві виконати завдання з огляду на мій інтерфейс.
Займає багато кліків для них, щоб потрапити з одного місця в інше?
Це утомливо? Чи повинні вони виконувати безліч завдань, що повторюються?
Ми хочемо зробити цей процес якомога більш ефективної
таким чином, вони не повинні робити ті види речей.
Що стосується інтуїтивності, тобто, наприклад, якщо користувач дивиться мій інтерфейс,
це легко для них, щоб дістатися з одного місця в інше?
Це легко для них, щоб з'ясувати, що вони повинні натиснути на мій інтерфейс
для них, для досягнення мети або завдання, які вони хочуть добитися?
>> І, нарешті, як один чоловік сказав, що там, доступність дуже важлива.
[Чоловік динамік] Воно приходить до доступності такі речі, як бачення,
подобається, як я насправді створити щось для тих, хто сліпий?
Ох. Для тих, хто не може бачити взагалі, у нас є те, що називається читання з екрану.
Те, що ви повинні зробити, це ви повинні створити свій сайт таким чином,
, Що, наприклад, конкретних технологій, що ми називаємо -
Є багато речей зараз.
Я думаю, що є програма читання з екрану JAWS називається.
Багато з цих речей розраховувати на те, що ми називаємо області правил
для того, щоб зачитати користувачеві, що присутня на сторінці.
Для тих людей, хто не може бачити, ви повинні переконатися, що ці читання з екрану
дійсно може забрати вміст на сторінці і може реально показати користувачам,
Якщо ви не можете бачити, принаймні, ще можна зрозуміти зміст сторінки.
Так. Добре.
Вистачить говорити про хороше дизайні. Давайте поговоримо про поганий дизайн.
Це речі, які ви не повинні робити.
Може хто-небудь сказати мені про свій досвід з Craigslist
і що вони думають не так великий цей дизайн?
Так. >> [Студент] Я думаю, що занадто багато слів в одній області.
Занадто багато слів, правильно? Повністю переважною.
Ви прийшли на цю сторінку, і ви зустріли з цілою купою речей тут
, Що може навіть не має значення для вас.
Наприклад, ви живете в одну державу, яке не починається з цієї букви.
Припустимо, ви живете в Техасі або щось.
>> Ви повинні прокрутити весь шлях вниз сторінки, щоб дістатися до місця ви знаходитеся.
Я з Бостона, тому дозвольте мені дивитися в штаті Массачусетс. Де Массачусетс?
О, це прямо тут. О, це Бостоні. Добре.
Давайте подивимося на Бостон. [Сміх]
Досить переважною, чи не так?
Незручні речі там. [Сміх]
Скажімо, я шукаю десь жити.
Скільки людей насправді використовували Craigslist? Тонни вас.
Є досить погано способів дивитися на це, але давайте подивимося на це.
У чому різниця між IMG і рис? Може хто-небудь сказати мені?
Там насправді немає ніякої різниці.
Вони мають на увазі одне і те ж, але у них різні ярлики для них з деяких причин.
Якщо я натискаю на має образ, нічого не відбувається на сторінці.
Я насправді потрібно натиснути пошук знову щось трапиться.
Що може бути краще дизайн рішення, яке може бути зроблено там?
Якщо я клікнувши на цю фільтра, я, ймовірно, хочете, щоб фільтр з тим, що певні дії
чи інша категорія.
Таким чином, замість того, щоб натиснути пошук знову, я міг би просто автоматично виконувати фільтрацію
зразок Google стиль, в якому вони роблять це миттєво.
[Малан] Але не утворює, як ми бачили їх досі мають бути фізично представлені
натиснувши Enter або принаймні натискання кнопки?
Як ви бачили їх так далеко, вам насправді потрібно натисніть кнопку Відправити, щоб зробити ці речі.
>> Але, як Томмі покаже вам, на другому, насправді способів для Вас
такі, що при натисканні на цю річ він може автоматично відправляти
що ми називаємо запит AJAX і отримати дані назад і фільтрувати результати миттєво.
Є купа речей, які не так з цим інтерфейсом.
[Малан] Чи можете ви шукати Cambridge?
Там-то трохи аномальна тут, де ви піклуєтеся про Cambridge
і тим не менше ви отримуєте Westford, Spring Hill, West Newton тощо.
Напевно, не ідеальні. >> Напевно, не ідеальні.
Як я міг би бути в змозі зробити роботу користувачів краще на даній сторінці?
Так. >> [Студент] Інструкції.
Добре. Інструкції в який сенс?
[Студент] Наприклад, річ для користувачів-новачків, які навіть не знають, що Craigslist є
або ви не знаєте, що ви повинні робити.
Право. Так, пояснюючи, що Craigslist на цій сторінці дуже важливо.
Ми можемо дійсно сказати, що користувачі цієї сторінки насправді для.
Якщо я просто відвідування цього, я бачу цілу купу місць. Я навіть не знаю, що вони означають.
Але що більш важливо, просто дивлячись на цей інтерфейс,
Пам'ятаєте, я була прокрутіть вниз тонни речей, щоб знайти конкретний співтовариство
що я насправді дбав про про це.
Що швидше, як я міг це зробити? Так.
[Студент] Розділіть їх на схід, захід регіонах. >> Добре.
Я міг би розділити їх на кілька категорій, які могли б мені допомогти швидше визначити
як дістатися до конкретного місця.
[Студент] Покласти в списку, що розкривається. >> Праві. Добре.
Я міг би використовувати випадаюче меню, тому що у нас є певний набір речей
і ми могли б показати їх у випадаючому меню.
Таким чином, він не займає так багато місця на екрані.
Але ще краще, ніж те, що ми можемо зробити?
Так. >> [Нерозбірливо відповідь студента] >> Чи можете ви сказати це знову? >> [Студент] поле пошуку.
Так, вікно пошуку. Це здорово.
Що ми можемо зробити, це насправді, якщо ми подивимося назад, на слайдах, вікно пошуку.
Автозаповнення. Дуже легкий спосіб пошуку з допомогою результати, які ви знаєте, в наборі.
Якщо я починаю набирати BO, просто покажіть мені всі результати, які мають BO всередині них.
Таким чином я можу дуже легко знайти Зокрема, одна я хочу, щоб
замість того, щоб прокрутити це дійсно великий список.
>> Всі ці види дуже низько висять плодів, що той, хто здійснює Craigslist
реально можете зробити, щоб зробити досвід на веб-сайті набагато краще для їх конкретного користувача.
Добре. Вистачить говорити про поганих сайтів.
Давайте поговоримо про Facebook.
При Facebook вийшов, і, зокрема Facebook фотографії,
було багато інших послуг, в той час, які могли б зробити те ж саме.
Вони можуть організувати свої фотографії в альбоми.
Що ви можете зробити це можна організувати їх у набори, а також.
Ви могли б організувати їх за датою. Ви можете робити всі ці конкретні речі.
Але хто знає, що зробив Facebook фотографії вибухнути в той час він був випущений?
Так. >> [Студент] Теги. >> Теги. Саме так.
У нас є Milo тут, який є наша собака талісман з бандана CS50.
Ви бачите, що у нас є ця позначки в середині.
А те, що зробило Facebook фотографії так цікаво з точки зору юзабіліті
є те, що вона насправді дозволив людям через цей залучати своїх друзів в їхніх фотографій.
Для Facebook, так як їх веб-сайт є особливо соціальних,
мова йде про створення такої соціальної атмосфері.
Це поліпшило досвід фотографій набагато більше
тому що вони можуть насправді починають говорити: «Це зв'язків між людьми,
і ці фотографії людей, яких ви насправді хвилює ".
Частина з них також роду нарцисизм.
Людям подобається бути помічені у фотографіях тощо.
Хоча це не обов'язково гарна людська риса,
У той же час він заснований на хороших дизайнерських рішень
тому що люди насправді дбає про такі речі.
Так от Facebook фотографії.
>> Але давайте поговоримо Facebook в цілому.
Я впевнений, що тут багато людей мають думка про Facebook,
і хороші дизайнерські рішення і поганих дизайнерських рішень.
Так що давайте запобігти або бути щасливим.
Підемо. Я знаю, що всі ви використовуєте Facebook.
Хтось повинен мати щось погане сказати або щось хороше, щоб сказати про це. Так.
[Студент] У стрічці новин є багато речей, які я насправді не хвилює.
Стрічка новин дійсно показує багато речей, які ви, можливо, не хвилює.
У вас є друзі на Facebook, кого ви не зустрічалися протягом 2 або 3 років
і ви побачите їх результати новини з'являються у вашій стрічці новин
і ви дійсно не піклуються про неї.
Facebook фактично зробив зусилля, щоб зробити це краще,
і вони дійсно намагалися проштовхнути релевантні результати в початок стрічки новин останнім часом
так що ви насправді бачите речі друзями, які мають відношення до вам або вашим близьким друзям.
Небудь ще? Так.
[Нерозбірливо відповідь студента] >> Чи можете ви сказати це знову?
[Студент] оголошення відносно непомітно. >> В якому сенсі?
[Нерозбірливо відповідь студента] Вони не мають світла на екрані, як і банерів.
Добре. Це добре.
Якщо ви пам'ятаєте Інтернет з 90-х років - >> [Малан] Я був там. >> Він був там. [Сміх]
Можливо, ви пам'ятаєте блимати GIF-фони, блискучі речі,
GeoCities стилю роду речі.
Це дійсно не є прикладом хорошого дизайну
тому що це дійсно відволікає від змісту.
На сайті Єльського мистецтва використовується для анімованих GIF-файлів мають в якості фону
і ви не могли прочитати що-небудь на сторінці,
але я думаю, хтось насправді говорив з ними, і тепер це трохи по-іншому.
[Малан] Це набагато краще. >> Це набагато краще, як ви можете бачити. >> [Малан] О, так.
Просто здорово, просто - Так. Добре.
>> Частково це також робить ваші сторінки, можливо, вельми мінімалістський і дуже зрозумілі
так що всі на сторінці потік таким чином, що дуже логічно і не заважати один від одного.
Що всякі інші речі хорошого Facebook або погано про Facebook?
Давайте просто є дизайн розмова тут.
Ох. Де? Так.
[Студент] Нова система Timeline дозволяє шукати профіль людини про своє минуле.
Ох, Timeline.
Timeline це велика річ, тому що вона дозволяє стебла друзів
тому, коли вони були в середній школі.
Терміни добре, тому що дозволяє фільтрувати через зміст набагато швидше,
вона дозволяє знайти речі, які б в іншому випадку ви прийняті дуже довгий час, щоб знайти
просто прокрутка вгору і вниз, вгору, вгору, вгору, вгору, вгору, як повернутися в часі.
Але є також свого роду недолік, що з точки зору користувача.
Що це може бути?
Великі слова, які починаються з P-R. >> [Студент] Безпека. >> Privacy, вірно?
Конфіденційність є великою проблемою взаємодії з користувачем.
Це одна з речей, які я ненавиджу найбільше в Facebook зараз. [Сміх]
[Малан] Як мені зараз.
Давид не розумію, це сталося насправді до вчорашнього дня.
Так що тепер він знає, що кожен раз, коли я спілкуватися йому, що я знаю, що він ігнорував мене.
[Малан] ніяково частина була я на самом деле звертаючи на нього уваги,
і я не знаю, що він знав, що я звертаючи на нього уваги. [Сміх]
Конфіденційність є великою проблемою.
Чи може хто-небудь тут, скажіть мені, що може бути поганого про конфіденційність Facebook
крім того, що вони роблять такі речі?
Що це особливо важко зробити по відношенню до Facebook приватне життя?
Такого роду є однією з провідних питання.
Так. >> [Студент] приховати фотографії від певних людей.
Право. Саме, щоб приховати фотографії від певних людей.
Вони мають цю маленьку, маленьку кнопку в правому верхньому куті, що дозволяє перемикати конфіденційності фото.
Їх параметри конфіденційності дуже різноманітні між різними видами меню.
>> Вони отримали багато краще про це недавно, але це була справа
що всякий раз, коли ви хочете, щоб ваш друзів бачити фотографії,
Вам доведеться пройти через дуже складний 5-ступінчастий процес буття, як,
Дозвольте мені натисніть на це посилання, тепер дозвольте мені знову натисніть, дозвольте мені знову натисніть,
Дозвольте мені вказати, які люди не можуть побачити мої фотографії.
Це не особливо добре на участь у Facebook
тому, що так багато про користувальницький досвід насправді дає їм свободу
контролювати те, що люди можуть бачити.
Ми називаємо це користувальницький контроль і свободи.
Якщо ви не дозволяючи своїм користувачам зробити це таким чином, що є ефективним і інтуїтивно зрозумілим,
, То ваш користувальницький досвід не дуже великий, що на всіх.
Хіба ви, хлопці, хотіли сказати що-небудь про Facebook?
Як відключити?
[Ong] Ви не можете відключити цю функцію, і це величезний недолік юзабіліті з боку Facebook.
Ця функція - Я дійсно подивився на нього вчора -
це або, що ви не можете зробити це або його поховали десь дуже, дуже глибоко
в надрах Facebook, тому що я не можу зрозуміти, як відключити цю функцію взагалі.
[Малан] Але іноді ці рішення не є очевидними
тому що ви, хлопці дали нам багато корисної інформації про різних додатків CS50
і веб-сайтах, в курсі використовуються.
Ми ще не реалізували всі ці прохання і пропозиції.
>> Частково це для отримання так багато запитів, що це функція часу,
але іноді ми просто прийняти свідоме рішення, як,
"Спасибі за пропозицію, але ми не згодні".
Так як же насправді вирішити, що ви повинні робити, якщо ваші користувачі думаю, що ви повинні зробити щось
навіть якщо ви не обов'язково?
Це тонкий баланс між фактично слухати те, що говорять користувачі
а насправді по якійсь лінії, де ви говорите,
"Ми не збираємося робити те, що ці користувачі говорять".
І зокрема, я думаю, що була цитата Генрі Форда, який підсумовує це досить добре.
"Якби я запитав людей, чого вони хотіли, вони б сказали, що вони хотіли швидше коней".
Чи може хто-небудь на зразок дражнять один від одного, що це цитата насправді означає?
Справа не тільки в тому, що користувачі знають, чого хочуть,
але більш того -
[Студент] Вони не знають, що це можливо.
У першій частині вони не знають, що це можливо.
Tease, що крім трохи більше. Що ви маєте на увазі?
[Нерозбірливо відповідь студента]
Це добре. Те, що я думаю, що ми намагаємося сказати тут те, що люди знають, чого вони хочуть.
Вони хочуть швидше коні.
Те, що вони дійсно хочуть це вміння рухатися швидше,
але вони дійсно не знаю середовища за допомогою якого можна домогтися.
Коли ви приходите до своїх користувачам і користувачам розповісти вам дещо
і вони скажуть вам: «Ми хочемо, щоб ці особливості і ці особливості і ці функції",
Ви не хочете, щоб обов'язково думати про "Дозвольте мені йти вперед
»І здійснити те, що вони явно говорять:"
але те, що ви хочете думати про те, "Які ідеї я можу отримати від цього?"
Чого вони дійсно хочуть?
>> А звідти, що ви можете зробити, це створити щось, що задовольняє ці запити
але не обов'язково в тому, що користувач очікує, що вона буде задоволена.
Так, щось подібне до остаточного проекту, в дуже реальному вираженні,
Що корисного евристичного, коли справа доходить до створення чогось кращого,
особливо якщо дизайнер цього зарозумілості про нього
, В якому ви начебто знаю, що краще, ви могли б отримувати з ваших користувачів,
але як ви насправді йти про отримання, що зворотний зв'язок?
У фіналі проекту, дуже конкретно, то, що виробляє оптимальні результати тут?
Що дає оптимальні результати - і я піду з цього у другому -
це процес розробки і тестування, а потім ітерації.
Що я маю на увазі тестування, як правило, при створенні чогось
Ви думаєте, що це досить добре, начебто, "я такий великий дизайнер. Кожен буде любити цього".
І тоді ви поклали його там, і людям не дуже подобається, з деяких причин.
Те, що ви повинні зробити, ви повинні прийняти частину речей, які люди роблять, як
і переробити те, що люди не люблять.
Це звучить як дуже очевидний процес, але цей процес постійно ітерації
понад те, що ви вже побудували це процес, який допомагає вам
не тільки удосконалювати власні навички дизайну, але також допомагає вам поліпшити дизайн
так, що люди насправді цінують ваш продукт ще більше, ніж раніше.
>> Я піду за більш конкретні приклади того, що ви могли б насправді.
Як свого роду останній приклад продукту, давайте подивимося на байдарці.
KAYAK, коли він вийшов було дуже, дуже популярні.
Чи може хто-небудь здогадатися, чому?
Які види речей, які ви хотіли про це, якщо ви використовували його
або які види речей, які ви не любите?
Так. >> [Нерозбірливо відповідь студента] >> Гаразд.
Ось частина його дозволяючи користувачеві є запит, який є більш експансивної
чим дуже обмежувальним кшталт: "Ви повинні вибрати дату початку
», І ви повинні вибрати дату закінчення».
Насправді, він дозволяє бути гнучкими про це, і це дає вам всі польоти в цьому діапазоні.
Небудь ще?
[Студент] Вони включають в себе збори в ціну.
Вони включають збори у вартість.
Податки та речі насправді йти прямо в цю ціну в лівому верхньому
так що ви не обманули, думаючи, що ви насправді платите за $ 240 польотів
коли це дійсно $ 330.
Небудь ще? Так.
[Нерозбірливо відповідь студента]
Я не впевнений, якщо вони дійсно дозволяють це зробити.
Я можу помилятися.
Це може бути цікава річ, якщо ви хочете, щоб помістити більше ваги на певних фільтрів
так що вони штовхають результати, пов'язані з цим фільтром на самому верху.
Але хто може сказати мені, що такого особливого в цьому ліва сторона?
Як ви традиційно подивитися політ на інтернет-послуг до цього?
>> Так. >> [Нерозбірливо відповідь студента] >> Чи можете Ви сказати, що -
[Студент] Кожна авіакомпанія. >> Да. Кожна авіакомпанія має свій власний веб-сайт.
Це об'єднує речі. І?
[Студент] Ви точно знаєте, в який час ти їдеш.
Ви точно знаєте, що раз, коли ви їдете,
але пов'язане з фільтрами, зокрема.
Дозвольте мені підтягти каяк.
О, Боже, спливаючих вікон. Невдалий досвід користувача.
Що відбувається, коли я рухаю цей повзунок?
[Студент] Автоматичні оновлення. >> [Ong] Автоматичні оновлення.
Це те, що дуже важливо.
До цього, коли ви хотіли, щоб подивитися польоту,
Ви повинні були покласти в свій вхід місце розташування, місця виходу, натисніть Search,
він буде обробляти, що і показати свої результати.
Якщо ви хочете змінити ваш запит, вам доведеться натиснути назад двічі,
увійти в новий запит з нуля, а потім робити це знову і знову.
Гарна річ про щось, як це він використовує дуже [нерозбірливо] річ в середині.
Всякий раз, коли ви робите щось на зразок цього, він стріляє з проханням
і повертає вам всі результати відразу.
Такого роду негайного зворотного зв'язку є те, що зробив KAYAK дико популярний
тому що це дійсно легко для мене просто змінити мій запит
і з'ясувати те, що навколо певного діапазону
без того, щоб повернутися назад і вперед, взад і вперед, взад і вперед.
Таким чином, ці всякі речі, які ви хочете думати про те, коли ви розробляєте ваш сайт.
Як я можу зробити це дуже ефективно для моїх користувачів, щоб пройти через все, що вони працюють на
і щоб дістатися до їх кінцевої мети якомога швидше?
[Малан], і крапка Йосипа раніше про користувачів, не обов'язково знаючи, що вони хочуть,
заснований на тому, що ви, хлопці, тепер знаємо про HTML
і у вас є прапорці, радіо-кнопки, виберіть меню, поля вводу тощо,
Як би реалізувати поняття вибору часу початку польоту?
>> Який з цих різних механізмів UI ви б використовували?
Якщо ви просто знати кількість HTML, який викладав до
і ви знаєте, входи радіо-кнопки, прапорці, списки, що розкриваються, і поле введення,
що б ваш природний вибір був для вибору дати?
[Студент] вхід. >> Input. Або, може бути, навіть розкривається з усіма датами, вірно?
Так і з більш складними механізмами користувальницького інтерфейсу, як це на лівій стороні, які можна реалізувати,
Ви можете зробити цей процес набагато більш інтуїтивно за допомогою повзунка
тому що час безперервно, і люди зазвичай не думають в термінах окремі частини.
Добре. Остання річ.
Десять евристики юзабіліті.
Всі речі, про які ми говорили, ймовірно, підпадають під одну з цих категорій.
Якщо ви йдете по цьому посиланню, яку сайтах буде розміщена в Інтернеті,
Ви дійсно будете мати можливість, як створити свій сайт, щоб ці евристики на увазі,
і ці правила великого пальця.
Для ваших проектів, то, що я пропоную вам зробити для того, щоб проектувати ваш додаток краще
це робити паперових прототипів в першу чергу.
Коли ви думаєте про вашому додатку, дуже швидко накидати, що ви хочете, щоб вона виглядала, як
і переконайтеся, що всі коробки розташовані таким чином, що є дуже інтуїтивним для користувача, щоб використовувати
і навіть показати ці паперові прототипи ваших друзів і почати фокус-груп.
Просто отримати 2 або 3 людини разом і попросіть їх просто натисніть на ці паперові прототипи,
і показати їм нові екрани, щоб побачити, якщо вони дійсно розуміють, що відбувається.
>> Те, що ви хочете зробити, це дати їм завдання, мотивувати цю задачу,
і просто дати їм додатки і дозволити їм використовувати його.
Не давати їм вказівки далі.
Ви хочете, щоб насправді дати їм взаємодіяти з вашим додатком таким чином, що дозволяє вам бачити
як вони будуть використовувати його, якщо ви не стояли поруч з ним.
І це дуже важливо.
Це дасть вам багато осяянь, щоб люди обійти конкретні речі
таким чином, що я не збирався їх?
Чи використовують вони конкретні механізми для користувача інтерфейсу на екрані
таким чином, що це свого роду Hacky?
Я не збирався для них зробити це таким чином.
І як тільки ви закінчите з цим, що ви хочете зробити?
Ваша порід дизайн, чи не так?
Те, що ви хочете зробити, ви хочете розвинути, а потім зробити цей процес знову і знову.
Так покажіть його друзям, як тільки ви створили його, протестувати його,
розробки, тестування, розробки, тестування, ітерації, далі і далі і вперед.
Дизайн дуже ітераційний процес в цьому сенсі.
Ви насправді потрібно щось побудувати, а потім реалізувати речі про нього
що ви не розумієте до і повернутися назад і поліпшення від цього.
Тепер, що стосується розвитку частина, це те, що Томмі збираюся показати Вам, після перерви
і як ви могли б реалізувати щось подібне автозаповнення
таким чином, досить просто.
[Малан] Як Томмі встановлює тут, питання тоді.
Багато з перших сайтів - і коли сказав Йосип 1990-х років стиль сайту,
це було реалізації, де, якщо ви хочете, щоб вибрати час початку і закінчення часу,
чесно кажучи, ще в день і навіть на деяких веб-сайтах сьогодні,
як ви робите це ви берете в годині їзди від списку, що розкривається
Ви вибираєте хвилин від випадаючого, може бути, ви вибираєте AM, PM,
а потім ви зробите це ще 3 рази.
І так з 6 кліків і, можливо, деякі прокрутки
користувачеві може реально забезпечити якусь дату і / або час діапазон в цьому сенсі.
>> Так виразно оптимальним, і все ж досі ми не бачили ніяких виразних можливостей
У будь-якому з мов, ми дивилися на щось сексуальніше
як це слайдер час початку і час закінчення.
Але якщо ви згадаєте тиждень 0, коли ми говорили про Scratch,
там теж не було віджетів, які тільки що зробили певні речі.
Ви дійсно тільки що ці основи, такі як цикли і умови тощо.
Таким чином, вид просто думати дуже абстрактно зараз, незалежно від особливостей HTML,
те, що відбувається насправді щось подібне до цього часу початку і кінця повзунок часу?
Коли я рухаю мишею і я натискаю на цю маленьку моркву символ зліва
і почати перетягування, програмним, що це ви хочете бути в змозі здійснити
щоб це сталося?
Які питання, які логічні вирази ви хочете, щоб мати можливість запитати?
Що відбувається насправді? Семмі?
[Студент] Де позицію курсора? >> Добре. Де позицію курсора?
Це було те, в чому ми потребували, щоб висловити назад в Scratch,
чи був він заснований на місці або навіть колір і т.п..
Ви могли б пригадати дуже коротко в понеділок були всі ці речі називаються події
У світі Web, і таким чином, є такі речі, як OnClick і OnKeyPress
і OnKeyUp і OnMouseOver і onmouseout.
Так розумію, що навіть ці речі, які ми приймали як належне на веб-
з сайтів, як Facebook і Gmail, навіть якщо ви не знаєте,
як ви, можливо, здійснювати, тому що немає нічого навіть подібного в лекції
або задач 7, розумієш, що з цим точно такі ж основи,
з HTTP і параметри GET і POST і,
з основною HTML входів, які ми розглянули досі
і в одну мить з програмними механізмами, Томмі збирається ввести
Ви можете почати, щоб виразити себе так само, як ви робили в тиждень 0
з дуже інтуїтивно перетягування.
>> Таким чином, з урахуванням сказаного, Томмі MacWilliam і деякі нові шматочки головоломки для нас для Web.
Добре. Мене звати Томмі, і я буду говорити про JavaScript.
Просто обмовка: Я дотримуюся думки, що наявність є кращим мовою програмування
В цілому весь світ.
Є багато людей, які зі мною не погодяться, але це просто дивно.
Як тільки ви повернетеся до C, якщо у вас є, щоб написати C для іншого класу або інших мов,
Це просто дуже засмучує у всіх низькорівневих деталей ви повинні загрузнути дюйма
Так що якщо ви ніколи не сумувати про те, як дратує C, щоб написати,
просто повернутися, написати кілька JavaScript. Це нірвана.
Ви будете почувати себе набагато краще про вашу поганий день.
Багато магії JavaScript виходить від його здатності маніпулювати речами
, Які вже знаходяться на сторінці.
Коли ми писали нашу PHP скрипти, вони виконуються на сервері,
і в кінці кінців, що PHP скрипт, ймовірно, виводити деякі HTML.
Це HTML було відправлено клієнтові, а потім, що це було.
Якщо PHP хотів додати кнопку на сторінці, наприклад, вона не може цього зробити.
Це повинно було б зробити зовсім новий HTML файл і відправити його в браузер.
За допомогою JavaScript ми знаємо, що ми можемо поновити речі, а вони вже на сторінці,
і через це ми можемо надати набагато більш миттєвий зворотний зв'язок,
, Який буде дійсно поліпшити користувальницький досвід на нашому сайті.
Тільки швидке повторення селекторів JavaScript.
Ми знаємо, що коли ми завантажити HTML-сторінку,
який буде представлений в DOM.
>> DOM пам'ятайте саме це велике дерево, де елементи пов'язані в цій великій ієрархії.
Коли ми працювали з базами даних в PSET 7,
одна з перших речей, яку ми повинні знати, як зробити, це запити до бази даних.
У нас є велика таблиця користувачів, і іноді ми просто хочемо сказати,
"Я хочу тільки деякі з цих користувачів, які відповідають певній умові."
Точно так само, коли у нас є DOM ми повинні якимось чином запиті він.
Нам потрібен якийсь спосіб сказати: "Я хочу, щоб всі кнопки, які виглядають так
»Або все зображення на сторінці."
І ці селектори дозволяють нам це зробити.
Так що швидке резюме.
Це перша тут, це # уявити, що це таке збираєтеся вибрати? Хтось пам'ятає?
[Нерозбірливо відповідь студента] >> Так, саме так.
Це буде вибрати елемент на сторінці, яка має ідентифікатор уявити.
І так, що хеш-тег говорить, що це селектор буде працювати з ідентифікаторами.
Як щодо другої, це. Центру, що буде, що вибрати?
Так. >> [Студент] класу. >> Саме так. Це зараз збираєтеся вибрати по класу.
Різниця між ID та класу тут, як правило, ідентифікатор повинен бути унікальним
в будь-який простір, ви шукаєте більш.
Так що, якщо ви шукали по всій веб-сторінки,
Ви дійсно повинні мати тільки 1 елемент з, що деякі ID, тому в даному випадку уявити.
З класами, з іншого боку, ми можемо мати більш ніж 1 елемент на одній сторінці
з тим же класом.
Це може бути корисно для говорячи, що я хочу, щоб вибрати все, що по центру сторінки
, А не тільки 1 річ.
>> І, нарешті, ця остання тут трохи складніше,
Але що це буде вибрати з DOM?
[Нерозбірливо відповідь студента] >> Що це таке?
[Студент] нічого, що тег. >> У нас є 2-х частинах тут.
Друга частина буде сказати, що я хочу, щоб вибрати ці мітки з тегом введення,
так що будь-який елемент, який є введення тегов.
Але я не хочу, щоб просто вибрати всі входи
тому що те начебто кнопки відправки може бути вхід
і щось на зразок текстового поля може бути вхід.
Так що з цим квадратних дужках я кажу, я тільки хочу, щоб вибрати ті елементи,
, Які мають тип тексту.
Десь в моєму HTML-теги У мене є атрибут типу,
і значення цього атрибута має бути текст.
Так як про цю першій частині тут?
Перше слово цього селектора формі, то у мене є простір, а потім це вхідної частини.
Що це робити, поставивши форму перед ним?
Це буде в основному обмежує наш запит.
Це може бути так, що у нас є кілька входів на сторінці
, Які не є нащадками форми.
Що це буде зробити це буде сказати, що я тільки хочу вхідних тегів, які десь над ними
деякі батьківський елемент форми.
І ось таким чином ми можемо зробити їх більш ієрархічні запити
так що ми не просто повинні вибрати всі відповідні даному селектору.
Ми можемо виду граничного обсягу цього запиту на щось інше.
Так що тепер ми знаємо, як вибрати елементи на сторінці,
Давайте поговоримо трохи про AJAX.
AJAX є все ще дуже модно абревіатурою, що розшифровується як Asynchronous JavaScript і XML.
Просто так вийшло, що XML є лише деякі зі способів представлення даних.
>> Таке втратив популярність останнім часом, так що X в AJAX не використовується весь час.
Загалом, що AJAX дозволяє нам зробити, це HTTP запити
З контексту JavaScript.
Коли ми знаходимося в нашому веб-браузер, і ми навігації по сторінках і клацаємо по посиланню,
що наш браузер буде зробити, це HTTP запит до того, що ми натискаємо посилання.
Але це не завжди ідеальні, тому що якщо це так, то як Давид говорив:
Ми завжди повинні зробити користувачі натискають кнопку Submit або натисніть посилання
для того, щоб щось сталося, що збирається залучити запиту HTTP.
Так що з AJAX ми можемо зробити ці запити від імені JavaScript.
Це означає, що всякий раз, коли користувач взаємодіє зі сторінкою або що-небудь трапиться,
ми дійсно можемо зробити програмний запит в інший файл PHP на нашому сайті
або що-небудь ще, і отримати дані, що файл випльовує.
Давайте подивимося на прикладі AJAX.
Це наша CS50 сторінка фінансів, з яким, ми сподіваємося, що деякі з нас знайоме.
Якщо ми подивимося на HTML цієї сторінки, ми бачимо тут, що я додав кілька речей,
однією з яких я дав цю форму ID.
Я вже говорив ID = "форм-цитату".
Я зробив це тільки тому, що він збирається зробити це трохи легше вибрати з DOM
так як я можу просто зробити дуже простий запит.
Що я хочу зробити тут, я хочу, щоб виправити деякі проблеми з CS50 фінансів.
Так що, якщо ми йдемо в finance.cs50.net,
кожен раз, коли я хочу отримати цитату, я повинен натиснути цю кнопку Get Цитата
і що Отримати спеціальна пропозиція кнопку, а потім бере мене в іншу цілу сторінку.
А якщо я хочу ще однією цитатою, потрібно натискати кнопку Назад, а потім ввести його,
Я отримую цитати, і я вдарив кнопку Назад.
Це дійсно не кращий користувальницький досвід.
Хто б реально використовувати сайт, якщо це так повільно, щоб ціни на акції?
Отже, що ми хочемо зробити з AJAX, це видалити цей крок йти на окрему сторінку
Для перегляду результатів.
>> Те, що ми дійсно тільки просити, що насправді невелика ціна,
і це тільки дуже мала кількість даних.
Таким чином, немає необхідності, щоб я ще цілий HTML сторінки,
Завантажити нову партію HTML, може бути, скачати деякі інші зображення,
деякі інші файли CSS тільки для мене, щоб відповісти на це дуже просте питання
про те, скільки робить цю вартості акцій.
За допомогою AJAX ми можемо зробити це набагато простіше.
Ми бачимо тут, що я компонування у файл JavaScript називають quote.js.
Давайте насправді відкрити файл. Не там.
Всі мої файли JavaScript будуть розташовані в HTML
так що веб-браузер може отримати до нього доступ.
Тоді у нас є окремий каталог тут для JavaScript,
і тепер ось quote.js.
У верхній частині цього файлу це говорить тут, що я хочу чекати цілу сторінку для завантаження
перш, ніж я намагаюся робити. Чому це необхідно?
Виявляється, що наступне, що я збираюся зробити, так це почати шукати елемент
, Що відповідає деякий селектор.
Якщо це буде коли-небудь JavaScript виконуються перед цим елементом завантажується на сторінку,
Потім все, що я намагаюся зробити, це не буде працювати
тому що я збираюся спробувати, щоб вибрати те, що поки не існує.
Таким чином, ця лінія нагорі говорить, що я хочу, щоб ти почекай, поки всі не завантажуються
так що ми гарантували, що будь-які елементи я шукаю насправді на цій сторінці.
Цей знак долара означає тут я використовую бібліотеку під назвою jQuery.
Це JQuery бібліотеки дозволяє нам використовувати ці селектори, які ми тільки що розглянули.
Говорячи $ переходячи потім в якості аргументу ця форма # лапки,
Я тепер вибрати цю форму, яку ми тільки поглянули на.
Тепер у мене є уявлення, що форма в пам'яті якось.
>> На цьому об'єкті зараз, це подання форми,
Я тепер за допомогою функції закликали.
Що ця функція робить це збирається приєднати обробник подій.
Подія, яку ми збираємося прослуховувати цю подію відправки.
Таким чином, коли користувач натискає кнопку Submit, що або натискає Enter,
ця подія буде спрацьовувати.
При викликах в це, я тепер можу перевизначити поведінку за замовчуванням форми.
Без цього JavaScript, форма представить до того, що PHP файлів
Ми використовували в тому, що дія атрибуту.
Але замість цього, я зараз говорю, почекай, почекай, почекай, я не хочу, щоб ви насправді зробити це.
Я хочу, щоб це відбулося, перш ніж піти і спробувати уявити деякі файли PHP.
Тепер те, що я хочу робити?
На даний момент я хочу використовувати AJAX якось завантажити в те, що ціни на акції.
Перше, що мені потрібно знати, це те, що фондовий користувач дивиться вгору.
Для цього я буду використовувати інший селектор.
Це вже третій селектор ми дивилися раніше.
Це говорить про те, що я хочу розпочати цю форму елемента з ID форм-цитати.
Потім десь всередині, що форми там повинен бути вхід елемента
, Який має назву символу.
Якщо ми оглянемося на нашу HTML, ми побачили, що у нас був вхід [ім'я = символ].
Це означає, що це буде вибрати, що текстове поле, яке користувач вводить в.
Це добре. У нас є текстове поле.
Тепер нам просто потрібно знати, що всередині нього.
Для цього ми можемо назвати цей метод тут, це. Вал,
і це говорить, що я знаю, що текстове поле у ​​вас є.
Я хочу, щоб ти сказав мені, що це, введений користувачем в це поле.
Тепер у нас є рядок називається символ, який дорівнює будь-який користувач ввели дюйма
Це добре. Ми можемо використовувати цей рядок зараз, щоб зробити наше прохання.
Це нова функція тут, це $,
крім ми більше не буде вибору елементів,
Ми збираємося виклику різних функцій, наданого нам JQuery.
Ця функція AJAX є те, що насправді відбувається, щоб зробити цей запит HTTP.
Таким чином, ми повинні сказати їй кілька речей.
Перше, що ми повинні сказати це функція, де я хочу проханням піти.
Десь в моєму проекті у мене є цей файл всередині HTML директорію з ім'ям quote.php.
Я можу отримати доступ до цього файлу, ми бачили, саме так, якщо я йду на локальний / quote.php.
>> Я хочу, щоб мої JavaScript, щоб зробити запит на цій сторінці.
Який запит зараз?
Ми бачили раніше, що форма має цей метод = "повідомлення" атрибут,
і це означає, що він збирається зробити POST запит,
так що не збирається небудь в URL, а не GET запит,
який буде просто звільнений, якщо ми просто зверталися сторінки з веб-браузера, наприклад.
Тепер, коли ми сказали, що я хочу зробити запит HTTP POST
на сторінці розташований на quote.php.
Коли ми дізнайтеся, пам'ятайте, що ми могли отримати доступ до елементів введення всередині цієї форми
з $ _POST змінних.
До цих пір в історії, яку ми, власне, не надіслали ніяких даних поки немає.
Ми тільки що сказали, що ми робимо запит AJAX
і ось тип запиту ми робимо.
Тепер нам потрібно насправді відправити деякі дані на сторінку.
Для цього ми можемо використовувати це властивість, зване даних.
Значення цієї властивості насправді асоціативний масив.
Причиною цього є це дозволяє нам направити більше всього в 1 порції даних.
Ось чому у нас є ці фігурні дужки тут вкладений в ці інші фігурні дужки.
Ключі в цих асоціативних масивів буде те ж саме
як ті атрибути імені в нашій елементи форми.
Це означає, що якщо я посилаю за ключовими символом,
це означає, що моя сторінка PHP може отримати доступ до цих даних з $ _POST [символ]
так само, як ми робили це раніше, коли ми були відправкою форми.
А тепер фактичних даних ми хочемо послати
буде значення всередині цієї асоціативний масив.
>> Ми зберегли цей текст в змінній символ,
і тому ми посилаємо по даний час ключовим символом
і значення будь-який користувач ввели дюйма
Зараз ми зробили цей запит HTTP, наш PHP файл виконується,
і він збирається відправити деякі дані назад тепер до клієнта, який тільки що зробив це прохання.
Тепер ми повинні реагувати на все, що офіціант сказав нам.
Для цього у нас є це остання властивість називається тут успіху.
Значення цього успіху ключ насправді буде функція,
і це одна з дійсно цікавих речей можна зробити за допомогою JavaScript.
Не тільки у вас є цілі масиви або як значення всередині асоціативний масив,
Ми також може мати функцію.
Так, кажучи, успіх, це мій ключ.
Товстої кишки говорить тут йде значення,
і в даний час значення цього насправді є функцією.
Тому ми не повинні дати цієї функції ім'я саме по собі.
Ми можемо тільки сказати, що це буде деяка функція. Це займе 1 аргумент.
В якості аргументу цієї функції буде
все, що сервер відправив нас назад із запиту.
Так само, як коли наш браузер робить запит, сервер посилає щось натомість
і браузер відображає його,
У контексті AJAX ми просто зробили запит, сервер послав щось натомість,
і тепер ми, що представлено у вигляді рядка.
З цією рядком я б хотів, щоб побачити, що на сторінці.
Для цього я буду мати одну останню селектора.
Я хочу, щоб вибрати елемент з ID ціною.
Це просто порожні справ, які я створив на сторінці,
і я хочу, щоб встановити вміст цього DIV бути будь-який сервер відправив нас назад.
Я насправді зміна quote.php небагато.
>> Замість виклику візуалізації і рендеринга деякі сторінки,
quote.php зараз просто збирається роздрукувати вартості акцій у вигляді рядка.
Так що якщо ви були насправді відвідати сторінку, ви б просто бачити, що невеликі рядки
все, що ціна акції.
Останнє, що нам потрібно зробити, тут просто переконайтеся, що ця функція повертає брехня.
Це говорить про те, що якщо я усередині обробника події
і що обробник події повертає брехня замість повернення правда,
це означає, що я не хочу початкове подія, щоб стріляти.
У цьому випадку, якщо б ми не мали JavaScript, і ми представили форму,
наш веб-браузера буде сказати: "Я збираюся відправити ці дані разом"
і вони збираються послати вас на іншу сторінку.
Оскільки ми використовуємо AJAX в даний час, немає необхідності відправляти користувача на іншу сторінку.
Ми просто збираємося для відображення результатів динамічного на цій же сторінці.
Ми дійсно не хочемо, щоб вони нікуди йти, і я хочу, щоб залишитися на тій же сторінці.
Так що, повертаючись помилковим, ми гарантуємо, що форма не зробить це за нас.
Давайте поглянемо на те, що це насправді виглядає.
Наші цитати сторінки виглядає однаково.
Дозвольте мені підтягти інспектор сюди, щоб ми могли бачити, що відбувається.
Зробити це трохи менше, величезні.
Пам'ятайте, що якщо ми відкриваємо вкладку Мережа, це де ми можемо бачити всі запити HTTP
що відбувається на сторінці.
>> Для символу дозвольте мені ввести AAPL і натисніть Отримати спеціальна пропозиція.
Тепер ми побачили, що частка Apple, стоїть деяка кількість доларів
тільки що з'явився на сторінці, але URL не зміниться.
У самому справі, тут HTTP запиту, який ми тільки що зробили.
Ми зробили POST запит quote.php. Це має сенс.
Це те, що сервер відправив нас назад.
Це вже не цієї гігантської HTML документа із зображеннями тощо,
це просто рядок тексту, а потім ми просто відображаються рядки тексту.
Якщо ми повернемося до заголовків і подивитися, що ми насправді посланий всередині цього запиту HTTP,
Ми бачимо тут, що ми послали по ключовим символом і значенням AAPL,
яких є те, що користувач ввів дюйма
Це добре, але це все одно трохи дратує.
Я все ще повинен натиснути цю кнопку, щоб одержати котирування акцій.
Ми зайняті люди, і у нас немає часу, щоб натиснути кнопку.
Google зрозумів, що це якийсь час назад, коли вони здійснюються Google Instant.
Що Google Instant робить це, як ви друкуєте він просто починає показувати результати для вас
так що вам не доведеться турбуватися про навіть натиснути Search.
Насправді, кумедна історія пов'язана з цим.
Як тільки Google Instant вийшов, люди на кшталт: "Вау, це супер дивним".
"Це так здорово".
І студент вниз в Стенфордському який був 19 в той час,
Про цей сайт під назвою YouTube Instant.
Всі миттєвих YouTube робить це ефективно шукати YouTube миттєво.
Таким чином, замість того, щоб піти на YouTube.com і натисніть Search,
коли я починаю набирати в YouTube миттєвих щось подібне CS50,
ми могли бачити тут, що вона намагається на повільне підключення до Інтернету
заповнити ці результати жити.
Щоб це зробити, ми дійсно можемо зробити дуже простий модифікації нашого файлу quote.js.
Зараз ми кріплення цю подію, коли форми.
Ми не хочемо, щоб користувач стверджує, що форма більше,
так що давайте замість вогонь цю подію кожен раз, коли користувач натискає клавішу.
Для цього давайте спочатку змінити події з представить KeyUp.
Це означає, що, не чекаючи вигляді представити
кожен раз, коли натиснута клавіша, щось трапиться.
Він більше не має сенс докласти цю KeyUp подій в цілому вигляді.
Ми дійсно піклуються тільки про те, що вікно пошуку.
>> Щоб вибрати, що зараз ми можемо змінити це, щоб бути, а не форма лапки,
Форма лапки, і ми повинні вхід (тип = текст) або ми могли б сказати (Name = символ) -
все, що ми хочемо.
Тепер є ще одна річ, яку ми повинні зробити.
Пам'ятайте, тут, коли ми сказали повернення хибним
Ми сказали, що ми не хочемо, щоб події за замовчуванням, щоб стріляти.
Але так уже сталося, що, якщо ми відключаємо, що зараз,
все, що ми ввести не буде відображатися в браузері більше
тому що це було б за умовчанням не вводити в текстове поле.
Ми більше не хочемо, щоб перевизначити, так що давайте зруйнувати це повернення хибним.
Якщо ми збережемо, що і перезавантажте сторінку, тепер, коли я починаю набирати AAPL
Ви побачите, що ціна акції в нижній тут завершується автоматично.
Так от CS50 фінансів Instant.
Насправді кумедна історія про миттєвих YouTube
є те, що студент просто якась написав це як 1-ночі проекту,
і на наступний день він був запрошений на роботу в YouTube генеральний директор.
Так само просто, як це, ви CS50 студентів, ваші остаточні проекти ви можете отримати роботу на YouTube.
Щось в цьому роді це дійсно класна ідея для остаточного проекту, чи не так?
У нас були деякі існуючі функції, які ми хотіли інтегрувати с.
Ми поліпшення користувацького досвіду небагато,
і раптом пошуку щось на YouTube миттєвих може бути набагато простіше
ніж шукати його на регулярній YouTube.
Так от AJAX в двох словах.
>> У прикладах, що Йосип був показують, ми бачили багато autocompletes,
і ті, autocompletes, дійсно, дуже зручно, тому що ми не маємо пам'ятати -
Наприклад, якщо ви не пам'ятаєте ціну акцій для компанії Apple
і ми просто знаємо, що це аа щось, а не просто говорив мені,
"Частка ця річ коштує стільки-то грошей"
Я ніби як знаємо, що акції починаються з аа.
Ми можемо зробити це дійсно добре з початкового завантаження бібліотеки, яка вже включена
Усередині CS50 фінансів.
Якщо ви прийшли сюди, щоб теги JavaScript і Прокрутіть вниз до TYPEAHEAD,
це просто хороший плагін, який хтось вже писав для нас,
і ми можемо легко використовувати його функціональність, як це.
Я набрав в і ось список деяких держав, які починаються з A.
Давайте припустимо, що я думаю, що це дійсно здорово, і це час для мене, щоб включити це на моїй сторінці.
Виявляється, що це дуже, дуже просте.
Давайте перейдемо сюди, щоб quote3.js.
Мій файл виглядає трохи по-іншому.
Тут, внизу всі мої речі AJAX те ж саме.
Я хочу, щоб завантажити дані про запаси без того, щоб перейти до іншої сторінки.
Але зараз я хочу використовувати цей плагін.
Bootstrap документації має велике прикладів того, як саме я можу це зробити.
Я хочу сказати: "Ось входу, що я хочу автозаповнення"
і Я буду називати цю функцію називають гарячих клавіш,
і що збирається обробляти все TYPEAHEAD речі для нас.
Це буде ініціалізувати список, він буде робити все наше фільтрації.
Єдине, що він повинен знати, які дані ми autocompleting далі.
Так я дізнався цю кнопку, просто читаючи документацію, і, дивлячись на приклади.
Якщо я даю йому ключ джерела, значення цього ключового
тільки деякі масив, що я хочу, щоб автозаповнення.
Ця змінна прийшла з цього іншого файлу.
Я відкриваю symbols.js.
>> Це symbols.js саме це дуже, дуже великий масив, що містить рядки
всіх цих символів акцій з NASDAQ.
Якщо я хочу, щоб повернутися до HTML, так jharvard, віртуальних доменів, globalhost, HTML, шаблони,
quote_form.
Так що тепер називається quote3.js, дозвольте мені змінити файл JavaScript я в тому числі тут.
Тепер у мене є quote3.js, так що я збираюся завантажити в тому, що окремий файл JavaScript,
той, який має, що Bootstrap автозаповнення.
Тепер, коли я стрибаю назад в браузер, перезавантажте сторінку, і я починаю набирати А.А.,
ось і мій автозаповнення. І це було дійсно так просто.
Я був 1 рядок коду, який просто сказав: "Ось що я хочу автозаповнення"
І раптом я це дуже, дуже гарна функціональність не так вже багато зусиль на всіх.
Як ви розробляєте веб-сайтів і особливо лицьовій стороні кінці речей,
Ви збираєтеся знайти це так багато.
Є багато, багато, багато дійсно класних безкоштовних бібліотек там
, Які роблять його супер легко робити такі речі.
Чи можна думати про будь-які недоліки просто autocompleting на цьому великому списку символів?
Що може бути те, що це не найкращий з таким підходом?
Так. >> [Студент] час, якщо у вас є багато [нерозбірливо]
Так. Зараз ми Завантажуючи великий файл JavaScript і там багато символів.
І тому, якщо у нас є тонни речей, це могло вигляді збільшення латентності не тільки пошук
але і завантаження сам файл.
Великий. Небудь ще?
Зараз немає ніяких реальних почуття актуальності.
Якщо я ввожу, компанії, які показують тут
Не може бути найбільш популярних компаній, які починаються з A.
>> Перш ніж дістатися до Apple, це може зайняти кілька символів, щоб знайти те, що я шукав.
Це автозаповнення не має цього почуття актуальності.
Це просто буде сказати: "Все, що відповідає Я йду, щоб побачити".
Замість цього, я хотів би, щоб хоч якось інтегрувати деякі актуальність в моєму пошуку.
Якщо я йду сюди, щоб Yahoo! Finance, finance.yahoo.com,
Якщо я намагаюся, щоб ввести символ на сторінці Yahoo! фінансів
і я починаю набирати GOOG, у мене є хороший список речей.
Очевидно, це виглядає як Yahoo! Finance робить щось більш розумне тут.
Вони мають деяке відношення і у них також є додаткова інформація
як назва акції.
Це те, що я не можу отримати тільки з моєї складі список символів.
Я хочу цього, і тому я збираюся взяти його.
Щоб зробити це, давайте зробимо кілька речей.
Давайте спочатку відкрити інспектору на цій сторінці
тому що ми бачили, що ця сторінка не перезавантажуючи на всіх,
так що це можливо, з використанням AJAX якось по навантаженню його дані.
Ми можемо з'ясувати, які дані він завантажується.
Якщо я натискаю на цій вкладці Мережа, вони буде всі запити, які починають бути звільнений.
Тепер, якщо я набираю в слизу, ми можемо бачити, що я тільки що отримав новий запит HTTP.
Це, напевно, де ці дані звідки.
Звичайно ж, якщо я дивлюся на цей URL, який є трохи дивним ім'ям,
ми бачимо, що це саме те, де Yahoo посилає від його дані.
>> Я створив окремий файл під назвою suggest.php, що дуже схожий по духу до функції пошуку.
Це в основному збирається зробити запит на адресу Yahoo, повернути деякими даними,
і відправити його назад до мене.
Тепер, замість того, щоб використовувати цей великий, величезний список символів,
Я можу використовувати Yahoo, хороші речі актуальності,
і я не потрібно завантажувати, що масові файл JavaScript.
Я тільки збираюся знести насправді відповідні символи акцій.
Давайте перейдемо до цих.
Таким чином, HTML, JS. Ми зараз в quote4.
Тепер ми більше не використовується, що великий список файлів JavaScript.
Але є невелика вид дизайну проблема.
Ми вже говорили про те, що в AJAX є асинхронним.
Це означає, що, коли я роблю запит AJAX,
так прямо тут, на лінії 8, це де мої AJAX запит насправді звільнили.
Скажімо, зараз у мене є деякий код сюди, що збирається робити деякі речі
хотів попередити користувача або змінити щось на сторінці.
Що не відбудеться це тільки браузер, не збирається чекати це прохання продовжити
до приходу вниз і натиснути цю лінію.
Це асинхронна частина.
Він збирається зробити це прохання і сказав: "Всякий раз, коли ви закінчите,
«Повернутися і викликати цю функцію, що я сказав вам дзвонити всередині успіх".
Це означає, що ми не можемо просто завантажити всі акції заздалегідь.
Ми повинні зробити запит і чекати чогось повернутися.
Це означає, що і раніше, ми могли б просто сказати Bootstrap,
"Ось список речей, які я хочу, щоб ви автозаповнення".
Ми більше не можемо цього робити, тому що ми не знаємо,
чого ми хочемо насправді автозаповнення далі.
На щастя, Bootstrap думав про це, тому що ці розумні хлопці там,
і вони фактично дали нам інший спосіб завантажити цю TYPEAHEAD плагін.
Перш, значення цієї властивості джерела Саме ця великий масив речей, щоб автозаповнення.
>> Тепер властивості джерела насправді є функцією,
і мета ця функція з'ясувати, що речі для автозаповнення на це.
Як це відбувається, щоб зрозуміти це вона збирається запитати Yahoo! Finance
що найкращі речі для автозаповнення є.
Для цього я збираюся зробити дуже схожі AJAX запит.
Я буду просити цю сторінку в suggest.php.
Я хочу відправити символам досі.
І тепер мій успіх, Bootstrap документації сказав мені,
що для того, щоб заповнити цей список речей,
все, що мені потрібно зробити, це передати цей масив тепер до функції зворотного виклику.
Але почекайте хвилину.
Якщо це повинен бути масив і AJAX відправляє мене назад текст,
як це можливо?
Це вводить новий спосіб обміну даними називається JSON.
У цьому випадку ми не просто відправивши назад прості рядки тексту.
Тепер ми маємо справу з більш складними список символів акцій.
Ці символи акцій може також включати такі речі, як назва компанії або поточної ціни.
Тільки за допомогою великого довгий рядок, яка не відформатований в будь передбачуваним чином
Не буде кращий спосіб отримати ці дані з сервера Yahoo до мене
таким чином, я можу легко зрозуміти.
JSON це технологія, яка використовує в своїх інтересах, як ми створюємо асоціативні масиви в JavaScript.
Це дуже схоже JavaScript асоціативний масив,
а насправді, це тому, що вона є.
JSON стоїть для позначення об'єкта JavaScript.
Це, в основному узгоджений формат для передачі даних туди і назад.
Ось цей об'єкт JSON JSON або це асоціативний масив
посилає мене деякі дані про курс.
>> Ключами цього масиву є такі речі, як, звичайно, що має значення CS50,
і тут ми бачимо, що в мене може бути значення, яке є масивом.
Я не повинен робити такі речі, як розібрати рядків і шукати коми
і робити божевільні речі, як, що.
Тому що ця оголошений в цьому форматі JSON,
JavaScript і JQuery вже є функції для перетворення рядка
, Який виглядає наступним JSON у фактичних JavaScript асоціативний масив
що ми можемо працювати.
Зробити це так само просто, як кажуть, що більше не є цей файл, suggest.php,
відправивши мене просто рядок тексту,
Але я знаю, що це збирається посилати мене назад JSON.
Це означає, що JSON можуть бути перетворені в JavaScript асоціативний масив.
І Jquery, я б хотів, щоб ви зробити це для мене.
Це означає, що ця відповідь параметром тут,
це вже не просто рядком.
Тому що ми сказали JQuery, що тут відбувається деяке JSON,
JQuery буде достатньо розумна, щоб сказати: "Ти хотів JSON?"
"Я збираюся перетворити це в асоціативний масив для вас".
Давайте насправді подивіться на вкладці Мережа, як тільки ми quote4.js.
Ми змінимо це і перезавантажте сторінку.
Тепер я збираюся набрати в-раз.
Я зробив декілька запитів, щоб suggest.php, але тепер ця відповідь,
а не просто рядок, це JSON.
Так що у мене відкрита фігурна дужка говорить: "Ось йде асоціативний масив".
>> Перший і єдиний ключ цього асоціативний масив називають символами,
а то ось масив всіх відповідних символів
приходить зараз з Yahoo! Finance, а не від гігантського списку.
Ось як я можу просто заповнити цей плагін автозаповнення
з деякими даними, які не походить від місцевих файл, який уже вирішений
а від чогось іншого.
Виходить, що ми дійсно можемо скористатися технологією називається JSONP,
або JSON з доповненням, що дозволить усунути цю suggest.php посередників.
Але замість того, щоб робити це, давайте замість цього поглянемо на те, як я можу поліпшити це навіть більше.
Мені дуже подобається TYPEAHEAD завантажувача. Це дійсно хороший.
Але ми отримуємо добре JavaScript, і ми хочемо, щоб частково це робити самим,
Може бути, поглянемо на те, що цей плагін можна було б робити.
Давайте більше не використовую, що TYPEAHEAD річ,
і давайте спробуємо зробити цей список пропонованих акцій самих себе.
Тут, в quote6.php ми збираємося почати таким же чином.
Кожен раз, коли хтось типи щось, ми хочемо зробити запит AJAX.
Це схоже на наш оригінальний CS50 фінансів Instant.
Замість того, щоб запит на quote.php,
Ми зараз робить запит на той же файл, як і раніше, це suggest.php,
які тільки збираються витягувати дані з Yahoo! Finance.
>> Знову ж таки, ми все ще очікуємо JSON, але з тих пір TYPEAHEAD не робить це для нас,
ми також повинні послати за значенням, яке знаходиться всередині поточного текстового поля.
Тепер ми знаємо, що запитати Yahoo! Finance для,
і тепер ось функції, які ми хочемо виконати після завершення запиту.
Ми не маємо плагін, щоб зробити список для нас,
так от, де ми насправді збираємося побудувати список пропозицій.
Щоб зробити це, багато подобається в PHP ми об'єднані цих великих рядків HTML
Потім ми надрукували їх, ми можемо зробити точно такий же річчю в JavaScript.
Спочатку ми збираємося почати цей рядок називаються пропозиції,
і цей рядок просто буде містити деякі HTML.
Ми хочемо, щоб бути список речей, так що ми збираємося почати з цього списку тегів,
і тепер ми збираємося перебрати всі символи, які були повернуті назад до нас.
Пам'ятайте, тому що ми сказали Тип даних: 'JSON', це не рядок.
Це вже масив для нас. Ось це дійсно круто.
Ми можемо просто сказати: "Я хочу, щоб додати елемент списку".
Ми помістимо його всередину елемента в сторону, що,
ми дамо йому клас пропозицій, тому ми знаємо, що це таке,
а тепер ось символ того, що ми повернулися з Yahoo! Finance.
>> Після того як ми створили елемент для кожного з символів ми отримали назад,
Ми просто хочемо, щоб закрити список.
Так що тепер пропозиції являє собою цей маленький фрагмент HTML
що якщо покласти на сторінці буде список речей, які ми шукаємо.
Тепер давайте насправді покласти, що на сторінці.
Для цього я насправді створив ще один порожній справ, і я дав йому ID пропозицій.
Багато чого, як ми встановили зміст справ, що буде відображатися ціна акцій даних,
тепер ми просто хочемо, щоб встановити зміст цього DIV до того, що цей рядок
, Який містить ці символи.
За допомогою цього методу HTML, це пропозиції змінної, цей рядок є рядком HTML.
Я хочу, щоб ви, що HTML і покласти його всередину справ називається пропозицій.
Ми лише запасною щось DOM зараз.
Ми додали деякі нові елементи в DOM, що ми можемо тепер відображаються на сторінці.
Давайте подивимося, як це виглядає.
Якщо ми завантажуємо в quote6 і тепер ми повертаємося,
Тепер, коли я починаю набирати AAPL, у нас більше немає, що Bootstrap автозаповнення,
але тепер у нас є цей список, який ми зробили самі.
Це трохи потворнішим, ніж трохи Bootstrap TYPEAHEAD, наприклад,
але це дозволить нам зробити ще одну річ.
Коли ми шукали в цьому Bootstrap плагін,
ми бачили, що, коли ми autocompleted, один з автозаповнення значень було AAPL.
Це може бути не таким корисним.
Як користувач, я не міг відразу розпізнати всі символи акцій.
Те, що я, ймовірно, більш імовірно, визнають є фактичні імена компанії.
Таким чином, не було б дійсно корисно, якби замість того, щоб говорити AAPL
це сказав щось на кшталт Apple,
Тому що ми прокату цьому самі, ми можемо дуже легко зробити.
Давайте відкриємо наш останній файл цитати тут, так quote7.
>> Те ж саме. Я тільки що створив ще один PHP файл, який буде повертатися до нас більше, ніж просто символи.
Це також дасть нам назад імен компанії.
І тому ми робимо те ж саме. Ми робимо запит AJAX.
Після завершення запиту, ми збираємося виконати цю функцію тут,
і ця функція буде побудувати великий рядки елементів.
Але різниця в тому, що цінність цих списках вже не просто символ,
Тепер це ім'я.
Таким чином, у нас є одна невелика проблема.
Коли ми використовуємо наш пошук, ми повинні якимось чином передати її символом.
Ми не можемо пройти пошуку щось на зразок Microsoft Corporation.
Ми повинні передати його MSFT.
Коли ми пишемо HTML, у нас є багато хороших вбудованих атрибутів.
Можливо, пов'язано з його HREF або класу.
Але що нам дійсно потрібно зараз для кожного з цих посилань
мати запас символ, пов'язаний з ним.
Там немає вбудованого HTML атрибут символ акції,
Але, на щастя, HTML5 дозволяє нам створювати наші власні атрибути, щоб бути все, що ми хочемо.
Говорячи даними символом, я представила новий атрибут
, Ім'я якого я тільки що зробив, і це добре, тому що я попередив його з цими даними.
Ми збираємося зберігати всередині є символ з фондового зараз.
Що це означає, що навіть якщо ми відображення значення назви компанії
Усередині нашого автозаповнення, ми все ще пам'ятаючи символ
, Пов'язане з кожною компанією.
Те, як ми робимо, що знаходиться всередині цього елемента.
Таким чином, це означає, що ми повинні зробити ще одну зміну.
Коли ми натискаємо це зараз, нам потрібно насправді скористатися символом атрибутом
, А не тільки його вартість.
Якщо резервне копіювання, яке ми надаємо обробник події для пропозицій.
Всякий раз, коли одна з цих пропозицій натиснута зараз, я хочу щось зробити.
Що я хочу зробити, це змінити значення цього поля введення.
Тепер я хочу встановити цю ж функцію знач.
>> Таким чином, без жодних аргументів ця функція Val повертає вам те, що вже в текстове поле,
але якщо ви даєте йому рядки, він збирається взяти цей рядок і помістити його в текстове поле.
Я вибравши його в текстове поле таким же чином.
Це ім'я є символом внутрішньої форми цитати.
Тепер я посилаю його значення атрибуту даними символом.
Ця річ тут нового, це $ (це).
Що це означає є елементом, який був вибраний.
Ми бачимо тут, що ми не підключаючи події клацання
до кожного елементу з класом пропозицію індивідуально.
Швидше, ми наближаємося до цього трохи по-іншому.
Замість цього ми говоримо, коли щось всередині цього DIV пропозиції,
, Які пам'ятають це просто контейнер для цього списку,
якщо щось усередині цієї справ натиснута і має клас пропозицію,
Я хочу, щоб ця подія до пожежі.
По суті, це означає, що ми можемо зробити, це ми можемо використовувати цей же обробник події
для всіх речей в списку.
Так що ми не повинні мати один обробник подій для першого елемента
і інший обробник події для другого елементу.
Ми можемо замість цього говорять: "Я хочу той же обробник події застосувати до всього в моєму списку".
Але ми повинні якимось чином дізнатися, який елемент був обраний.
Це "це" ключове слово представляє саме це.
Це об'єкт, який був просто натиснув користувач.
Якби я просто натиснув на третю посилання, це представляє елемент, що 3 посилання,
Це означає, що я можу отримати його атрибут, символ даних,
яких ми знаємо повинен містити символ, пов'язаний з компанією, я просто натиснув.
Якщо ми повернемося назад до нашого фінансів сторінки
Ми бачимо тепер, що як тільки я починаю вводити щось подібне MSFT,
Ми більше не отримуєте тільки символи акцій,
Ми зараз отримую реальних компаній.
Але коли я натискаю на одну з цих компаній,
ми бачимо, що ми насправді заповнення поле не з назвою компанії
але з тим, що зберігається всередині цих даних атрибутів.
І тому, якщо я насправді перевірити один із цих елементів клацнувши правою кнопкою миші
і натиснувши кнопку Перевірити елемент, ми можемо дійсно побачити, як це виглядає.
>> Пам'ятайте, що це те, що ми створили всередині цього циклу
Коли ми будували вгору, що рядок HTML.
Ми бачимо тут, що це дані символ має значення MSFT, що превосходно.
Це те, що ми очікували.
Це символ, і це, як ми отримали значення, яке ми повинні були використовувати
всередині цього текстового поля.
Цього достатньо для цитатою формі, тому що це нудно.
Давайте просто зробити декілька швидких поліпшень нашому портфоліо.
Якщо ви використовували CS50 фінансів на деякий час, і ви починаєте купувати і продавати багато акцій,
в кінці кінців ця таблиця буде отримати досить великий,
і ви будете хотіти, біржових зведень, звичайно.
Після того як таблиця дуже, дуже великий, вона може бути корисною для користувачів, щоб спробувати знайти їм.
Усередині вікно пошуку, якщо я почну вводити щось подібне Дісней
і, дивлячись на мої акції Міккі Мауса, ми бачимо, що таблиця зараз фільтрації
заснований на тому, що я тільки що ввели дюйма
Ця функція виглядає супер складним, але насправді, дуже легко
з JQuery і JavaScript.
Це portfolio.php файл містить файл JavaScript називають portfolio.js.
Давайте подивимося на це.
Таким чином, HTML, JS, портфоліо.
Ось де ми робимо, що пошук на стіл.
Перше, що мені потрібно зробити, це прикріпити обробник події, що текстове поле
тому що ми знаємо, що ми хочемо, щоб наша функція фільтрації для стрільби
кожен раз, коли користувач натискає щось, тому що у нас немає часу для пошуку кнопки.
Перше, що потрібно зробити, це зрозуміти, що шукає користувач,
так само, як ми робили раніше.
Це ключове слово вказує на поточний елемент користувач взаємодіє з.
>> Тому що користувач взаємодіє з вікном пошуку,
$ Це являє поле пошуку
так this.val дає нам те, що всередині вікна пошуку користувач в даний час друкувати.
Отже, тепер, що ми хочемо зробити, ми хочемо перебрати всі рядки
Усередині нашого столу.
Щоб вибрати всі рядки в нашій таблиці, я дав цю таблицю ID таблиці портфеля,
і кожен рядок являє собою елемент TR,
так що це селектор збирається повернутися до мене великий масив
всіх рядків в моїй таблиці.
Тепер я хочу перебрати цей масив.
Я не могли б ви для циклу, але JQuery насправді дає нам хороші функція під назвою "кожен".
Що кожен робить це кожен приймає один аргумент,
і цей аргумент є функцією.
Що він збирається робити це вона збирається застосувати цю функцію до кожного елементу всередині цього списку.
Ця функція приймає один аргумент, що це е,
і коли ця функція буде виконана, ця адреса буде замінити перший рядок,
Потім другий ряд, а потім третій ряд.
По цьому шляху, це те ж саме, як працює цикл
, А потім з'ясувати поточний елемент на основі індексу всередині вашого циклу.
На кожній ітерації для кожного з цих елементів у таблиці,
Я хочу перевірити, якщо текст елемента - текст комірки всередині рядків -
відповідає тому, що я шукав.
Це велика довга рядок команд, як я міг це зробити.
По-перше, знову ж таки, це зараз називається - бо всередині нова функція -
це зараз поточний рядок у таблиці.
Я хочу взяти поточний рядок у таблиці,
і я хочу, щоб всі його діти.
Пам'ятайте, що DOM є ієрархічне дерево,
Це означає, що елементи мають кілька дітей.
>> Це. Дітей Функція збирається повернути мені назад масив з усіх елементів
, Які є діти, в даному випадку, рядок у таблиці.
Це просто клітини всередині рядка.
Я просто хочу, щоб здійснити пошук по першій клітинці.
Це. Перша функція говорить, дайте мені перший елемент у цьому масиві.
Потім текст функції говорить мені отримати саме те, що знаходиться всередині цієї комірки
так як я хочу, щоб здійснити пошук по цьому тексту.
Нарешті, давайте перетворити його в нижній регістр,
так що ми можемо зробити текст без урахування регістра запитів.
Нарешті, ми хочемо, щоб переконатися, що рядки всередині таблиці містить рядок, яку ми шукаємо.
IndexOf функції в JavaScript робить саме це.
Він говорить нам, чи ні ця рядок містить інший рядок.
Якщо це правда, що клітина містить те, що я шукаю,
Потім я хочу, щоб переконатися, що це показано на малюнку.
Показати метод скаже: "Самая елемент".
Якщо це не так, то це означає, що те, що я шукаю не міститься
в цьому ряду, і тому я хочу, щоб приховати від користувача.
Це досягається, що хороший ефект фільтрації, де вже не бачимо всієї таблиці.
Якщо ви зацікавлені в тому, щоб зробити цей тікер, а також,
ми розмістимо джерело в Інтернеті. Але це дійсно просто.
JQuery є дивовижні методи для цих анімації та роботи з CSS властивостями.
Отже, ось це для мене.
>> Що ж чекає нас попереду? Як ви побачите в протягом декількох днів, остаточну пропозицію проектів пов'язано.
Остаточне пропозицію проектів буде поставити вам кілька запитань,
але серед них буде три віхи -
один "гарний" віха, один краще віха, і один кращий.
Ідея в тому, щоб допомогти дійсно ви, хлопці, встановити ваші очікування
таким чином, щоб мінімально ви будете щасливі з виходом ваш остаточний проект
і це буде "добре" до цих пір, як ви стурбовані.
Але тоді в інтересах отримання вам досягти тільки трохи до чогось кращого
або щось краще, ми також сортувати підштовхнути вас до того, як добре.
CS50 Hack-A-Thon, тим часом, протягом декількох тижнів.
Як правило, ми робимо це на основі основі лотерею, тому що інтерес,
але цілком імовірно, ми будемо приймати кілька сотень з нас в автобуси від Harvard Square
до Kendall Square, де Microsoft має красивий об'єкт влучно назвав "ботанік" -
Дослідження Нової Англії та Центру розвитку.
Ми доберемося туди близько 8 години вечора Нам доведеться трохи їжі.
Близько 1 ранку нам доведеться ще трохи їжі.
Близько 5 години ранку, якщо ви ще не спить ми попрямуємо до IHOP або прийняти вас назад в кампус.
Мета є, щоб зануритися в остаточному проектів
поряд з однокласниками і персоналу.
Потім через кілька днів це CS50 ярмарок,
яка насправді означає бути можливість для вас, хлопці, щоб продемонструвати свої роботи
і досягненнях за семестр
в той час як пліч-о-пліч один з одним і отримати відчуття того, що все зробили.
З урахуванням сказаного, велике спасибі Томмі і з Йосипом,
і ми будемо бачити Вас в понеділок.
[Оплески]