Девід Дж Маланій: Гаразд, так це ось Міо рука група, пару з яких ми Тобто для CS50 остаточних проектів. І це було демонстрацією ми стояли в черзі Ви до заздалегідь, де по суті це досить туго пов'язку тут прислухається до ваших м'язових рухів , Які потім відображують в області програмного забезпечення для ноутбука Колтона тут, які було Itunes і що Пісня вже стояли в черзі. Замість того, щоб мені записувати демо це, Колтон був в лабораторії ясно весь тиждень отримувати демонстрацію готові протягом одного хороброго добровольця. Якщо хтось хотів би приїхати на up-- побачив свою руку першим. Давай до. [00:01:09] Добре. І як тебе звати? [00:01:13] АУДИТОРІЯ: Е-е, Марія. [00:01:14] Девід Дж Маланій: Марія, приємно бачити вас. Давай сюди. Дозвольте мені познайомити вас з Колтон. Колтон, це Марія. [00:01:21] Колтон: Привіт, приємно познайомитися. [00:01:23] Девід Дж Маланій: Все Право, так кроці, ми доведеться вам поставити це на передпліччі так що це досить щільно біля ліктя. А між тим, давайте поставити на нашій Google Glass і ми будемо змішувати технології сьогодні. [00:01:33] Колтон: По-перше, ми повинні будемо підключити це в речах. [00:01:36] Девід Дж Маланій: ОК. Насправді, давайте вашу руку, як близько до цього кабелю, як це можливо так що ми можемо спочатку синхронізувати його. [00:01:41] Колтон: Давайте зробимо це. [00:01:42] Девід Дж Маланій: А між тим, так що кожен може отримати більш близький погляд, ми кинути камеру Ендрю на екрані немає. Тому у нас є кабель USB, це будучи підключений до пов'язкою Марії. І дозвольте мені кинути екран Колтона на проекторі наступному. [00:02:00] Так Колтон реєструє пристрій Тепер, як Міо підключений до цього кабелю. А тепер те, що Марія збираюся робити мить насправді йти через кроки калібрування і навчити програмне забезпечення як її м'язи реагувати коли вона переконатися, попередньо визначені жести, що програмне забезпечення розуміє. Якщо ви хотіли б піти в Передня частина екрану. Добре, продовжуйте пробувати. [00:02:30] Колтон: Перейти подібне. І як, що. І всю дорогу справа. Повертатися. [00:02:35] Девід Дж Маланій: ОК. Іншої точки зору. Це не ви. Це нам. [00:02:40] МАРІЯ: Добре. Девід Дж Маланій: Ні. Давайте перемістити його вище, так це ближче до ліктя, або навіть сильніше. Добре. [00:02:52] Тут ми йдемо. Це було б хороший час для CS52X. Там ми йдемо. [00:02:57] Дуже мило. Добре. Великий палець на мізинець. [00:03:02] Дуже мило. Спред пальці. Добре. Хвиля право. Це цікаво, що показує Ви з лівої hand-- [00:03:17] Колтон: Так, це дивно. Девід Дж Маланій: Хвиля право і рухатися вперед. Перенесемося пропустити або поруч. Це нормально прямо Wave. [00:03:25] МАРІЯ: Я don't-- чекати. [00:03:26] Девід Дж Маланій: Потрібна допомога? [00:03:28] Колтон: Так що ви збираєтеся, як це. МАРІЯ: Це перетворюється Інша справа, однако. Колтон: Це. Девід Дж Маланій: Так я не знаю, чому він показує вам leftie. Колтон: Чому б вам не try-- спробуйте в тому ж дусі. [00:03:38] Девід Дж Маланій: Ні? Може досягати руку з пряміше і зробити його більш різким, як це. Так, добре, давай. [00:03:48] МАРІЯ: Я жалкую. Девід Дж Маланій: Це не ваша вина. Колтон: Це нормально. Девід Дж Маланій: All Right. Well-- [00:03:56] МАРІЯ: Чи повинні ми пропустити це, тоді? Девід Дж Маланій: Так, давайте нехай вам зірватися з гачка. Так що, якщо хтось хотів зробити Остаточний проект, використовуючи цю ріжучу кромку обладнання, розумію, що це може просто взяти трохи звикнути. І this-- реальність це насправді дуже краї. [00:04:10] Це те, що називається Комплект розробника, який призначається, щоб бути істотно пре-реліз так що люди можуть робити те, this-- боротися з ним, фігура про те, як органи народні працювати з технологією. Так що, якщо ви хочете потім, після лекції, ми можемо дозволити вам прийти і зробити ще один удар в цьому. Але в іншому випадку, оплески, якщо ми могли, для Марії прийшли на до. [00:04:26] МАРІЯ: Спасибо. [00:04:28] Девід Дж Маланій: Спасибо. Ми повісити на це, але ми дамо you-- як про стрес м'яч тут? О, і-- if-- да, спасибо. Добре. Таким чином, для цікавих, якби ви були знайомі з звукової вибору що ми зробили там раніше, дивовижний ТВ показати, що ви повинні абсолютно бути випивка-дивитися на Netflix це один тут. [00:04:51] СПІКЕР 1: Пані та панове, чарівник на ім'я Джош. [00:05:04] Девід Дж Маланій: І, мабуть, це річ в текст мене під час лекції зараз. Мені сказали, що Марія був день народження вчора. Так С Днем Народження від CS50 Марії, а також. [00:05:18] Таким чином, ви, можливо, читали в останній місяць що це панове тут, Стів Баллмер, який був насправді клас 1977 в коледжі, Недавно пішов у відставку для Microsoft. Він був студентом тут, то пару років по тому опинився в Стенфорд Business School коли він отримав телефон подзвонити з одним своїм, які жив по коридору від нього тут, в Гарварді. Ім'я цього друга був Білл Гейтс, і в той час, він намагався завербувати Стіва бути Перший діловий чоловік, насправді, в невеликій компанії назвати Microsoft. [00:05:45] Коротше кажучи, Стів в кінцевому підсумку переміг, приєднався Microsoft, коли вони було всього 30 співробітників. І до того часу, він вийшов у відставку зовсім недавно, компанія мала 100 тисяч співробітників За останні кілька років. І так сайт відомий як The Verge підготував цю данину на відео що ми думали, що ми поділився, що дає вам почуття, як багато енергії Стівом призводить до будь-якої презентації він дає. [Відеовідтворення] -Microsoft Походить на четверту дитину. Діти роблять покинути будинок. В цьому випадку, я думаю, Я йду з дому. Ей Білл, whazzap? [00:06:23] -Wazzap? [00:06:24] Ей, WAZZAP? Ми дали величезні можливості. І Білл дав нам таку можливість. Я хочу подякувати Білла за це. Я хочу, щоб ви теж. Темпи інновацій не збирається сповільнюватися. [00:06:42] Це збирається отримати швидше і швидше. Там може бути кілька конкурентів що, на жаль, усунені! [00:06:54] Я люблю цю компанію. Так! Я PC, і я люблю цю компанію! [00:07:08] Розробники, розробники, розробники, Розробники, розробники, розробники, Розробники, розробники. Так! Веб-розробники! [00:07:19] Веб-розробники! Веб-розробники! Послухайте, що ще ви отримати без додаткової оплати! [00:07:28] Виконавчий MS-DOS, призначення календар, карта купа, блокнот, Годинники, панель управління. І, може, ви в це вірите? Reversie! [00:07:35] Записувати їх на CD! Дати їм MSN! Ви відправити їх друзям! [00:07:40] Все з одним клацанням миші! Один Microsoft, одна стратегія, один нашой зосереджені, дисциплінований, професійний, і експерт у всьому, що ми робимо. Дозвольте мені використати лінію зі старого фільму. [00:07:52] Відносини, як акули. Вони рухаються вперед або вони вмирають. Я насправді думаю, що тек компанії однакові. [00:08:01] [END відеовідтворення] Девід Дж Маланій: Отже, ми такі раді повідомляє, що Стів приєднуватиметься до нас тут в CS50 наступну середу в Звичайне місце і час тут. Космічна, ймовірно, буде обмеженим. І так, щоб приєднатися до нас особисто, будь ласка, очолити сьогодні або незабаром після цього в cs50.harvard.edu/register. [00:08:22] І ми будемо стежити за допомогою Вівторок, підтверджуючий плями. З нетерпінням чекаємо, що наступного В середу під час лекції в CS50. Тепер, в інших новинах, я випадково не стикався з цим в Алом просто на днях. [00:08:34] Виходить, що один із співробітників CS50 в і принаймні один із студентів CS50 в в даний час працює для UC Президент і віце-президент, який повернув мене моїм власним днів тому коли я програв вибори UC тріском. Але худа без добра в тому, що це я завжди розповісти історію, що один з Я впевнений, багато причин, я втратив вибори була повна відсутність з талантом ораторського. І так, чесно кажучи, це відвіз мене, що досвід Я думаю, що мій молодший рік, насправді підписати для Гарвардського комп'ютерного товариства, які це група на території кампуса, що проводить різні технічні переговори та інші речі. І я взяв на себе їх навчання семінари і тому мав можливість, Прекрасна можливість, щоб почати працювати на саме це. Але також, я мав можливість протягом цього досвіду щоб навчити себе все більше HTML. І тому я відкладав вчора ввечері Переглядаючи сайт, заснованої HTML Я зробив в як 1997, '98, для мого Кампанія, яка виглядає ось так от. Я знаю. [00:09:29] Because-- і, звичайно, повідомлення цей дивовижний дизайнерське рішення в 1998 році або ще багато чого. Перше, що ви хочете, щоб користувачі зробити після відвідування вашого сайту це повинні натиснути іншу посилання просто ввести свій сайт тут з монахом за, як оповита завісою, де мабуть, моя кампанія платформа. І це все ви отримаєте сьогодні це просто скріншот. Але я читав через, як, мої агітаційні плакати вчора ввечері і моя платформа. [00:09:50] І я був такий злий, в той час. Моя платформа was-- було цікаво. Так що я заспокоїлася відтоді. Але коли-небудь, я буду балотуватися на черговий термін і ми сподіваємося, краще цей час. [00:10:03] Так HTML, що мова, якою я зробив що in-- вас скоро зробити багато more-- щось ми були говорити про останнє і значною мірою брати зрозумілим зараз що ми перейшли на інші мови. Але давайте зупинимося на мить і поставити деякі з цих речей в контексті. Так у реченні, що HTML? [00:10:18] Або, що використовується для? Будь? Так. [00:10:20] АУДИТОРІЯ: розмітки для веб-сайтів. Девід Дж Маланій: розмітки для веб-сайту. Так що це мова розмітки, дозволяє структурувати веб-сторінки. Тема йде тут, назва йде тут, організм переходить тут. Це напівжирний, це italics-- такого роду докладно. [00:10:33] Добре, добре. Так CSS дозволяє you-- і я взяв деякі вольності там з жирним облицюванням і курсивом, бо що краще реалізований з цим. CSS is-- що? Скажімо, в реченні. Будь взагалі. Так. [00:10:46] Аудиторія: Прикраси та матеріал, як, як проектувати його. Девід Дж Маланій: ОК, добре. Прикраси, які дозволяють вам оформити його або стилізувати його з речами, як шрифтом і курсив і квітів, а також більш тонкої зернистої позиціонування елементів. Це свого роду дозволяє приймати речі на останньої милі, так що, якщо, наприклад, в Pset7, ви, можливо, помітили на ваш Портфель сторінки, якщо ви в цей момент вже, що таблиця за замовчуванням, що ви зробити, щоб показати запасами користувальницькі і грошових, ймовірно, виглядає досить огидно за замовчуванням, без пробілів. Все в свого роду забиті разом в рядках і шпальтах. [00:11:18] Ну, з невеликою кількістю CSS, як ви можете зрозуміти ,, Ви можете фактично налаштувати, що і зробити це щось набагато більш знайомі і багато гарніше на вигляд. Так CSS становить близько стилізація сайтів. Але тоді ми ввели ще один мову, PHP, який дозволяє нам робити? [00:11:36] Давайте просто робити те, що? Любою. Добрався до виходити за рамки перші пару рядків. Так. [00:11:40] АУДИТОРІЯ: Генерація динамічного контенту. Девід Дж Маланій: Прекрасно. Генерація динамічного контенту. І ви можете зробити це в будь-яку кількість мов. Ми вирішили використовувати PHP, бо це в частині так, аналогічної синтаксису C. [00:11:50] Але PHP робить саме це. Це дозволяє динамічно генерувати вихід. І деякі з цього виходу може бути HTML, як ми зазвичай робимо. І це також, тому що це Мова програмування, є Механізм, за допомогою якого ми можемо говорити з базами даних. [00:12:03] І ми можемо зробити запити в інші сервери, такі як йеху і програмно зробити що-небудь дійсно, що ви могли б в іншому випадку хочу, щоб змусити комп'ютер робити. Так PHP дозволяє нам почати динамічно виведення контенту. Так за цією логікою, у мене не було динамічний сайт ще в 1998 році. [00:12:16] Це було просто статичним веб-сторінка. Мій контент мав бути змінений шляхом вручну з Gedit або якийсь еквівалент. Але PHP є те, що ми використовували або може бути використаний, а, щось на зразок Сайт Фрош чати, які передбачалося, взяв реєстрації та управляти списком users-- речей, які фактично переході Час, хоча ми, виявляється, використовувати Perl, інша мовою в той час. [00:12:35] І тоді, нарешті, ми ввели SQL-- Structured Query Language. Так ще одна мова який використовується для чого? Використовується для чого? Чи можемо ми ризикувати slight-- Добре, що ми не збираємося отримати набагато далі ніж оркестру тут. АУДИТОРІЯ: Це протокол використовується, щоб поговорити з базами даних. Девід Дж Маланій: протокол використовується, щоб поговорити з базами даних. Дозвольте мені підправити. Це природна мова використовується поговорити з databases-- вибирає і вставки і видалення і оновлення і фактично навіть більше функцій, які ми навіть не пірнав в, але ви можете explore-- є досліджувати, скажімо, остаточний проект. Таким чином, є всі ці різні частини. [00:13:09] І, сподіваюся, Pset7, хоча його специфікація є досить довго, це навмисно довго ходити вас через, як ці речі можуть все набереться разом. Тепер, в понеділок, ми представив нашу останню мову що ми офіційно представити в course-- тобто, JavaScript. Це, як PHP, є інтерпретувати мову. [00:13:25] Але ключовою відмінністю Я запропонував в понеділок є те, що в той час як PHP виконує або інтерпретується на сервері, який в даному випадку є CS50 прилад, або може бути якийсь комерційний веб- Сервер в Інтернеті, JavaScript зазвичай це мова, яка працює на стороні клієнта НЕ сервер side-- так в браузері. Який повинен сказати, так само, як коли я відкрив до Facebook вихідний код і знайшов все з тих файлів .js, Малося на увазі що, коли ви відвідуєте Facebook або найбільш сайти в ці дні, ви отримуєте не тільки HTML, не тільки CSS, але ціла купа JavaScript Код часто у вигляді файлів .js. А потім це browser-- самостійно Mac або PC-- що виконує цей код. [00:14:03] Але ваш браузер виконує його. Ви можете думати, у той пісочниці. Так що код JavaScript не повинно бути можливість видалення файлів на вашому комп'ютері. Це не повинні бути в стані відправляти електронну пошту від вашого імені. Конкретному веб роду обмежує Що ви можете робити з ним. [00:14:17] Так що в цьому сенсі, це трохи менш потужний, мабуть, ніж C. Але JavaScript може, як в сторону, можна використовувати на сервері, хоча ми, як правило, не говорити про це в цьому контексті. Так що тепер давайте зв'язати їх разом. Тиждень плюс тому ми представили деякі HTML на left-- супер нудний веб-сторінки. [00:14:34] Просто каже привіт світ. І тоді я запропонував на Право, можна почасти вкрасти ідеї з нашого обговорення структури даних в C і думати про те, як це ієрархічна Мова розмітки зліва можна зробити або реалізовані в пам'яті як фактичний деревовидної структури з вузлами і покажчики й ті види деталей. Праворуч, ми називаємо що в DOM-- документа Об'єкт Model-- який є тільки химерний спосіб сказати дерево. [00:14:56] Тепер, чому це корисно думати про це таким чином? Бо зараз з JavaScript, тому що у нас є Код, який добирається, щоб грати в цю Середа, фактичний HTML це був відправлений в браузер вужчим були завантажені в пам'ять Браузер в дерево в вашого комп'ютера RAM, як це, ми можемо використати JavaScript насправді пройти або пішки або пошук або змінити що DOM дерево, однак ми хочемо. Таким чином, справді, якщо ви думаєте, про facebook.com, якщо ви використовуєте функцію чату, якщо вас Використання Gmail і функція Gchat, що-небудь, де у вас є Повідомлення, що надходять знову і знову і знову, ці повідомлення, ймовірно, як Л.І. тег, Список товару теги, можливо. [00:15:35] Або, може бути, вони просто діви, які тримають з'являтися кожен раз, коли ви отримуєте миттєве повідомлення. І так, що просто означає, що Facebook або Google робить в будь-який час ви отримаєте Повідомлення від сервера, вони, ймовірно, з використанням JavaScript просто додати ще один вузол щоб це tree-- інший вузол в цьому дерево, яке потім візуально виглядає просто як з нового рядка тексту на екрані. Але вони вставивши в цій структурі даних. [00:15:57] Таким чином, в класах, як CS124 та інші, ви будете насправді писати більше коду проти структури даних, як це. Але зараз в JavaScript, ми просто припускаємо, ми отримуємо всі ці функції вільним від самої мови для. Отже, давайте подивимося на прикладі. [00:16:09] Дозвольте мені відкрити файл з ім'ям form.html. Це супер просто. Це просто виглядає так. [00:16:15] Ні CSS, ні думки до естетики. Це чисто функціональний і, мабуть, я просячи електронній пошті, пароль, пароль ще раз, а потім перевірка погодитися з деякими умовами. Що вихідний код для цього Схоже, це, ймовірно, щось Ви могли б припустити з Трохи думки зараз. У мене є тег форми тут. [00:16:32] Дія очевидно збирається перейти в файл з ім'ям register.php. Метод, який я збираюся використовувати це отримати. А потім я отримав текст поле, ім'я якого по електронній пошті. [00:16:40] У мене є поле пароля чиє ім'я є паролем. У мене інша Поле пароля, чиє ім'я кілька довільно підтвердження. Це просто ще один параметр HTTP. [00:16:49] І тоді ми, ми не використали їх, крім так як Фрош чати демо в class-- прапорець, який є просто типу дорівнює перевірку. І я буду називати цю угоду. Так я начебто довільно, але Зручно назвав ці поля. Так що тепер, коли ця форма набуває представляється, давайте подивимося, що станеться. Якщо я роблю malan@harvard.edu, Я зроблю пароль малиновий. Я зроблю пароль нічого. Давайте не співпрацювати. [00:17:10] І я не буду прапорець. Дозвольте мені посилання Зареєструватися. І це говорить, хм, ви зареєстровані. Не зовсім так. [00:17:16] Але URL змінилося. Так ця форма була явно дозволено представити register.php. Але очевидно, я повинен бути ловити деякі з цих помилок. Тепер, в Pset7 і деякі з наших прикладів лекції, ми, як правило, роздрукувати велика повідомлення червона помилка тут кажучи, відсутній ім'я, або відсутній пароль. Ми зробили це раніше, і ми зроблено на стороні сервера виявлення помилок. [00:17:37] Але багато веб-сайти в ці дні зробити виявлення сторона помилку клієнта де URL не змінюється. Вся сторінка не оновлюється. Ви отримуєте миттєвий зворотний зв'язок з браузера. Може бути, щось йде червоний. [00:17:48] Може бути, ви отримаєте спливаюче. Але вам не потрібно витрачати час відправки Дані сервера ось неповний. Отже, давайте подивимося, як ми могли б досягти цю функцію, а також. [00:17:56] Дозвольте мені піти в form1.html, який виглядає однаково. Але якщо цього разу я malan@harvard.edu і я друкую малиновий і я не співпрацювати і далі але натисніть Реєстрація, помітили тепер. Це не найсексуальніший рішення. Я, принаймні зловив цю помилку. І я використовував попередження Функція в JavaScript-- які ми тільки за допомогою в класі. Загалом, ви не повинні використовувати це бо це може дуже швидко вийти з-під контролю. Але паролі не відповідають є помилка. [00:18:19] Дозвольте мені йти вперед і натисніть OK. Але те, що ключ винос тут є те, що URL не змінилася. Так що я не потрудився витрачати Час сервера з проханням Питання, яке я міг би з'ясували відповідь на собі. [00:18:30] І користувач, навіть при тому, говорили про це більше, ніж призначеними для користувача буду думати про це, матиме миттєвий зворотний зв'язок. Там немає затримки з підключення до мережі. Отже, давайте подивимося на цей вихідний код. [00:18:40] Form1.html зовнішність структурно схожі тут. Форма фактично те ж саме. Але давайте подивимося, що я зробив тут. І є різні способи, щоб зробити це. І я зробив саме прямо послідовник але не самий елегантний спосіб ще. У мене є тег сценарію. Я тоді телефонуйте document.getElementById ('реєстрація'). І я зберігати це значення у формі, змінна. [00:19:04] Так що я зробив? Ви можете думати про document.getElementById як спеціальна функція, JavaScript дає вам що буквально вручає вам покажчик на один з вузлів або прямокутники в цьому дереві. Так що тепер це те, що наша змінна форма в JavaScript насправді вказує на. [00:19:21] Так що тепер синтаксис відрізняється від C. Але ми робимо кілька речей тут. Один з них, це одна трохи дивно дивлячись, звичайно в порівнянні з C. Але подивіться на лінії 35. Так на лівій form.onsubmit. Нагадаємо, що onsubmit є як поля в структури. Якщо ви думаєте про змінну форми просто бути C структура, він може мати декілька полів. [00:19:42] Назад в день, у нас були студенти імена, Ідентифікатори, будинки, ті, начебто полів. Просто подумайте про onsubmit як іншої області. Але це спеціальне поле, бо Браузер запрограмована очікувати .onsubmit щоб не бути значенням як число або рядок, але насправді бути функцією або адресу функції в пам'яті комп'ютера. [00:20:02] І справді, ось що це ключове слово тут робить. Це говорить, дайте мені нову функцію. Але те, що його ім'я буде, мабуть? [00:20:09] Згадуючи понеділок. Як називається це функція, заснована на цьому синтаксисі? Ні, я маю на увазі, є чітко ім'я не associated-- звичайно не в тому, що я виділив тут. [00:20:21] Але що насправді в порядку. Це анонімна функція, або Функція лямбда, як деякі могли б назвати це. І це просто означає, це все-таки функція. Це просто, ви не можете назвати його по імені. Але це не страшно. Тому що знову, браузер був запрограмована компаній, як Google або Microsoft або Mozilla або інші на просто знаю, що якщо в .onsubmit області всередині елемент форми має Значення, розглядати його як function-- покажчик на функцію, якщо хочете. І назвати його, коли форма буде відправлена. [00:20:46] Так що код повинен бути виконаний коли форма відправляється? Мабуть, все всередині фігурної дужки. І це тільки стилістична. [00:20:53] Ви можете зробити це, як ми, як правило, роблять в CS50. Але в JavaScript, більшість людей як правило, тримати його в одному рядку тільки тому, що це більш явно пов'язані із цим функції ключових слів. Так що тепер я роблю? [00:21:03] Якщо form.email.value дорівнює рівних порожній рядок або нічого, ось оповіщення, де я збираюся сказати, Ви повинні вказати свою адресу електронної пошти, а потім повернутися помилковим. І це, що повернення помилковим, що запобігає форму від уявляється. Між тим, якщо значення пароля порожній, я збираюся кричати на користувача і сказати, ви повинні ввести пароль. [00:21:21] Між тим все стає трохи незвичним тут. Якщо form.password.value НЕ одно form.confirmation.value, Інше поле, кричати на користувача, що паролі не збігаються, як вони зробив не хвилину тому. А потім це свого трохи сексуальніше, бо I знаю я знав концептуально, що перевірив це ім'я прапорець в. [00:21:40] Так що я можу просто використовувати вигук Точка сказати, якщо перевірка не checked-- це логічне Значення, правда це чи false-- Я кричав на користувача з цієї причини. В іншому випадку, якщо ми отримаємо через всі ці умови, давайте просто повернутися вірно. Нехай форма представляється. І це буде відбуватися. [00:21:56] Давайте ввести малиновий. Давайте прапорець, натисніть Реєстрація. А тепер я йду до місця призначення. Тепер, немає бази даних є. Там немає нічого цікавого в register.php. Мені просто потрібно було щось насправді говорити. Отже, дозвольте мені зупинитися, тут. Будь-які питання про те, що ми тільки що зробили або те, що деякі з цього нового синтаксису? Добре, так? [00:22:17] АУДИТОРІЯ: Таким чином, будь прапорець автоматично Boolean. Ви не повинні оголошувати, як він. [00:22:21] Девід Дж Маланій: Правильно. Будь прапорець, який посланий до вас від HTML форма в код JavaScript розглядатиметься, так, як Логічне value-- істинним або хибним. Це хороше запитання. Тоді як в інших цінностей, з Звичайно, були текст, AKA рядка. [00:22:36] Гаразд, так що давайте мені назад трохи далі. Те, що було весь сенс цього? Просто щоб бути ясно. Мовляв, ми вже знаємо, навіть з Pset7 і навіть з лекції минулого тижня приклади, які, очевидно, можна перевірити $ _GET $ _POST Лі користувач дасть нам порожнє значення. Пам'ятайте порожню функцію в PHP. [00:22:54] Так просто, щоб було ясно, що одна з причин, ми могли б також хочу зробити цю перевірку помилок всередині браузера? Що мотивація тут? Так. [00:23:06] АУДИТОРІЯ: Швидше, і ви не відправити непотрібні дані на сервер. Девід Дж Маланій: Добре. Це швидше. Ви не відправляти марно дані на сервер. [00:23:12] Таким чином, ви отримуєте назад більш негайну відповідь. І в цілому, то користувач досвід краще. Подумайте про альтернативу. [00:23:17] Якщо для Gmail-- і було так багато років тому. Припустимо, що ви отримали нове повідомлення електронної пошти вашого Gmail рахунок, але єдиний спосіб через бачити, що це, як, перезавантажити всю сторінку. Або, припустимо, ви натискаєте на посилання читати електронну пошту. [00:23:29] Все повинно перезавантажити так що ви можете подивитися електронну пошту. Або Facebook-- ви отримаєте повідомлення чату. Ви не бачите його, поки ви не перезавантажте сторінка або натисніть деякий посилання. [00:23:36] Мовляв, це було б жахливо дратує користувальницький досвід. І це, як це було, ясно, ще коли я балотувався на UC і веб-був набагато менш динамічним і JavaScript не був, як популяризували як це тепер. І все стає набагато динамічнішим і багато іншого на стороні клієнта, в цьому сенсі. [00:23:49] Але є одна заковика тут, і це свого роду дратівливий Gotcha. Просто тому, що ви додаєте стороні клієнта Виявлення як це не означає, Ви можете або повинні відмовитися Виявлення на стороні сервера. Ви по суті хочете розмістити Перевірка помилок в обох місцях. Бо те, що було одним уроку дізнався зі статті я читав уривки від цієї дурної CMS сістема-- Content Management сістема-- що було реалізації своєї системи аутентифікації, його Увійти через який механізм? JavaScript. [00:24:20] АУДИТОРІЯ: JavaScript. Девід Дж Маланій: JavaScript, точно, чи не так? Було допомогою JavaScript. І буквально, ви, хлопці, грав трохи, ймовірно, з інспектором Chrome. І якщо я можу знайти його, огляньте елемент. [00:24:30] Дозвольте мені перейти до робити всі варіанти Chrome. І це, як легко це відключити JavaScript в браузері. Перевірте, немає більше JavaScript. [00:24:38] Таким чином, в справедливості, багато з мережі в ці дні просто буде розірвати, бо Gmail та інші sites-- Facebook-- припустити, що JavaScript включена. Але якщо ви робите щось дурне як тільки перевірка вводу користувачів і перевіряючи його на помилки на стороні клієнта, противник може легко це зробити. А потім ще розумнішими противник, як ви, хлопці, Тепер можна використовувати Telnet або Curl або просто команда команди лінія і насправді відправляти повідомлення на сервер що само не похибка перевіряється. [00:25:05] Так що це більше Рішення користувальницький інтерфейс ніж це фактичний технічний improvement-- реалізації щось на стороні клієнта, як це. Так що тепер побіжний погляд, але потім Я відкласти на онлайн-прогулянки через для цього. У вигляді двох, ми фактично пішли через і очищені і код небагато. Але дозвольте мені відкласти на один з відео ми, швидше за все, код вставки в Pset8 що зайвий раз показує схожий синтаксис з використанням бібліотеки під назвою JQuery, який є супер, супер популярна бібліотека в JavaScript що відверто більшість людей просто використовувати ці дні і навіть заплутати як Сам істота JavaScript. [00:25:37] І це, як правило, включають деякі знаки долара і ключові слова, такі як документ В дужках тут. Але, знову ж, дозвольте мені відкласти до деякі повільні підручники онлайн а не грузнуть в тільки синтаксис. Давайте перейдемо до щось трохи прохолодніше з точки зору застосування цього. [00:25:50] Так зокрема, відпусти мене вперед і відкрити це тут. Підійди. Там ми йдемо. [00:25:59] Дозвольте мені відкрити цю картинку тут. Зайве складним дивиться, але це описує технологію, звану AJAX-- Асинхронний JavaScript і XML, де X для XML насправді більше не дійсно не використовується. Це, як правило, використовувати щось ще називають JSON. [00:26:13] Але от якось начебто Google Maps або Google Earth працює. Давайте спробуємо це на льоту, насправді. Дозвольте мені йти вперед і відкривати до Chrome на моєму браузері. [00:26:21] І дозвольте мені перейти в, кажуть, maps.google.com. І насправді, якщо ти старий Досить згадати, що, як, MapQuest походило назад в день, і, може бути, вони все ще працюють, як це. Коли ви використовували для пошуку something-- 33 Oxford Street, Cambridge, Mass, давайте зробимо this-- вас фактично, якщо ви хотів повернути камеру вгору і вниз, вліво і вправо, ви виглядатиме Велика стрілка на верхній, і це б показати вам ще один кадр карті тут. Або ви б натиснути ліву і вам піде сюди, або повторне клацання і ви б сюди. Але замість них днів, ми, звичайно, просто цілком очевидним, що ми можемо піти навколо Кембриджа досить швидко просто клацнувши і перетягнувши. Але зверніть увагу, що є деякі глюки. [00:26:59] Якщо я зроблю це досить швидко, що, здається, відбувається як я тягнути занадто швидко для комп'ютера, щоб не відставати? Що ти бачиш? Так. [00:27:07] Аудиторія: пікселі не оновиться. Девід Дж Маланій: пікселі не оновиться. Там в actually-- і вам міг бачити це, насправді, якщо ви дивитеся онлайн і пауза це чи насправді уповільнює для once-- ви побачите, що є плитка, квадрати, або трикутники, не вистачає карті до на частку секунди пізніше, більше даних, Ще зображення насправді з'являються на екрані. І справді, якщо ми робимо це, дивлячись до Chrome's-- скажімо, Chrome-- Подивимося. Ми не можемо цього зробити. [00:27:31] О, вигуки. Давайте відкривати maps.google.com. Дозвольте мені зробити вікно більше разів. [00:27:36] Повернутися до +33 Оксфорд-стріт. Те, що було на сайті я був на недавно? У мене була ця, начебто, приватне гучні слова, щоб я що я б тоді миттєве повідомлення будь друг, який був на сайті хто хотів почути його. Там якась веб-сайт. Я думаю, що це Comcast-- так дуже великий американський провайдер. Ви можете, при реєстрації нового кабелю Послуги модем або телебачення кабельне, вони мають форму дуже розумно де вони просять у вас вашу адресу. І є ця дивовижна Функція називається автоматичне заповнення, як Google, що починає заповнювати у відповідь на ваше запитання. [00:28:04] Проблема в тому, що вони роблять автоматичне заповнення на перших речей, які ви вводите. Так що, якщо ви починаєте набирати в 33, це покаже вам, буквально в кожному будинку в Америці, який починається з номером 33 Перш ніж продовжити, щоб очікують, що ви введіть більше. Так що якщо ви наберете 33 Оксфорд, Потім він показує вам кожну вулицю в Америці, що є 33 Оксфорд в його ім'я, незалежно від міста що ви перебуваєте в. [00:28:25] І тоді ви будете продовжувати друкувати. І, нарешті, він розуміє, що вони не роблять Пропозиція послуг в вашому домі в Кембриджі або щось подібне. Але справа в тому, що це найбільш ослиний реалізація авто завершити все. [00:28:34] І я просто хочу від на цій дотичній знову. Але є хороші способи використовувати JavaScript і погані шляхи. І це не обов'язково кращим вибором. [00:28:40] Але справа тут, перш, ніж це тирада, було відкрити інструменти тут і відкрити засоби розробника, як ми закликали раніше, і дивитися Мережі Вкладка як я натискаю дуже швидко. І зауважте, цілий букет з отримуєте запити відбулося. Все це відбулося так як я потягнув. [00:28:57] І швидше за все, дійсно Багато з цих рядків тепер зображення риса JPEG Типи MIME або типи контенту. Це тому, що те, що хром робить кожен раз, коли я натисніть і перетягніть, натисніть і перетягніть, є його реалізації, о, я повинні піти попросити Google для плитки на карті, це тут, швидко завантажити його через HTTP, а потім додати його в так званій DOM з веб-браузерами в дерево пам'яті уявлення, так що користувач, мені, бачить, що оновлений плитку. І це через Техніка називається AJAX. Назад в день, це дійсно був випадок, що якщо вас хотів змінити те, що відбувається на екрані, вам доведеться натисніть вгору, вниз, вліво, прав. І тоді нова сторінка буде відкриватися. Але в ці дні, все є більш динамічним. Це відбувається в тому, як ми, люди б сподіваюся, що це насправді буде в інтерактивному режимі. І це досягає цього, спосіб техніку, звану AJAX, яка є, мабуть, найкращим пояснюється прикладу. По-перше, дозвольте мені йти вперед і відкрити файл називається quote.php в сьогодні код розподіл. [00:29:53] А потім зробимо symbol-- вигуки. Дозвольте мені зробити символ = GOOG всього за якоїсь акції. Або насправді, давайте зробимо один з Pset безкоштовно. Enter. [00:30:05] А тепер зверніть увагу, що я не повернуся. Так що це дійсно Коротше файл PHP, який я писав, що просто запозичує код від функції пошуку Pset7 в і випльовує використовуючи цю фігурну дужку і котирування і позначення товстої кишки, мабуть, ціна поточного запасу для Компанія, яка вам пройти в через GET. Так що це різні від більшості, що ми зроблено в цьому повідомленні я знаходжусь буквально впливів що виглядає як код JavaScript. [00:30:27] Насправді, це об'єкт JavaScript. Насправді, просто щоб бути більш ясним, JavaScript Object Notation-- JSON-- це просто химерний спосіб сказати, що вас може представляти дані в JavaScript набагато як ви можете в PHP за допомогою пари ключ-значення. Так що, якщо я хотів оголосити змінна в JavaScript до представляє Zamyla, для instance-- на-структуру для Zamyla-- і ми будемо називати його студент, ця змінна. Її ID є одним, будинок Уинтроп, і звуть Zamyla. [00:30:53] Але я можу також є масив об'єктів. Так що, якщо я насправді хотів, щоб масив в JavaScript, що містить кілька таких об'єктів, це Час, який представляє штат, Я, можливо, ці три шматки коду назад щоб спина до спини для них три колишні співробітники. Так синтаксис, досить аналогічно і того й іншого, щоб PHP. Але це особливо JavaScript. Це позначення об'єкта. Так що ж це корисно для? [00:31:17] Якщо я написати код, який випльовує JSON-- JavaScript Object Notation-- речі, які Схоже, це і матеріал, який Схоже, структури Zamyla в, Я можу реально використовувати цей в програмах я пишу. Дозвольте мені піти в ajax0.html. І це too-- не набагато думка приділяється естетиці. Але подивіться, що станеться. [00:31:34] Дозвольте мені йти вперед і ввести безкоштовно тут. Натисніть отримати цитату. І зверніть увагу, URL не змінилася. Але я дійсно отримував поп з мабуть, сьогодні дрібні акції ціна $ 0,15. Так що не все так погано. Але різниця в тому, що якимось чином, ці дані повернулася до мене безпосередньо. Але давайте крок до щось більш знайомі. У версії одного з цього, хай мене введіть знову вільний, натисніть кнопку Отримати цитату, і now-- о, це було насправді версія JQuery. Так що давайте me-- я не зробив швидке перемотування вперед досить далеко. Дозвольте мені перейти до другої версії, де я хотів. Зверніть увагу, що я зробив тут. У мене є веб-page-- супер Проста версія будь-який веб-сторінки Ви могли б використовувати сьогодні з текстовим полем тут безкоштовно, а потім, мабуть просто Текст. [00:32:14] Це не є формою тут, мабуть. Але якщо я натискаю отримати цитата, помітили мою веб-сторінку ось-ось зміниться, наче я щойно отримав нового миттєвого повідомлення або як ніби я щойно переїхав карта й потрібні, щоб отримати більше даних додані динамічно на веб-сторінку без зміни URL і користувачем Досвід отримання переривається. Справді, я до сих пір в точно такий же place-- ajax2.html. [00:32:35] Отже, давайте поглянемо тільки на цьому прикладі і подивитися, як це відбувається. Пусти в ajax2.html. І зверніть увагу на форму спочатку. [00:32:44] Тут, внизу, я повертаюся від автозавершення. Іноді він одержує дратує, якщо браузер намагається показати вам, Вся ваша історія. Таким чином, ви можете зробити це в HTML за допомогою просто говорю авто завершити геть. [00:32:53] Я дав цьому текстовому полі symbol-- скоріше, ID символу. І тепер, це цікава особливість. Ми не говорили про тривалість, але ви можете думати про це як пункту тега або СНУ тега. Це те, що називається в лінії елемента, який значить ви не отримаєте пункт розірвати вище і нижче нього. Це просто буде залишатися в режимі онлайн без потрапивши еквівалент увійти. Так що я дав цьому шматок HTML щоб визначити унікальний ідентифікатор що я умовно назвати ціну. І в мене є кнопку Відправити. [00:33:21] Тому що тепер до here-- і це насправді супер дивно, як мало код Ви можете написати робити щодо акуратний things-- помітити, що я зробив тут, якщо I прокрутки вгору до голови цієї сторінки. Я включив перше в моя голова скрипт тег що насправді посилається Подати в іншому місці JavaScript. Це від організації що пише JQuery, і це просто дає вам останні версія їхньої бібліотеки JQuery. [00:33:42] Так що це ніби як гострий включають в C або вимагають в PHP. Ви використовувати тег сценарію з атрибутом джерела. Але тепер моя власна код буде прямо тут. [00:33:52] Зверніть увагу, у мене є функція називається Цитати. І це виглядає трохи загадковий на перший погляд. Але давайте дражнити це один від одного. Дайте мені змінну називається URL в. Призначають його в буквальному сенсі цей рядок. Так, одиночні лапки, подвійні лапки в JavaScript просто дає мені рядок. Що плюс робити? Зчеплення. [00:34:08] Так що це в даний час є синтаксис JQuery який займає трохи звикнути. Але це просто означає йди мені DOM вузлу, чиї унікальний ідентифікатор є символом. Хештегом там означає Унікальний символ ідентифікатора. [00:34:21] Знак долара в дужках просто маю на увазі, обернути це в JQuery свого роду секретний соус так Ви отримуєте додаткову функціональність. А потім .val мабуть Функція, або, як ми говоримо, зараз, Спосіб всередині цього вузла що просто дає вам значення. Коротше кажучи, негарно і заплутаною як це виглядає на перший погляд, це просто означає, отримати з користувачем типізованих в, помістити його в кінці рядка шляхом об'єднання його. Це все. [00:34:43] Так що тепер, останні три рядки. Ви можете вичавити багато Функціональність з трьох ліній. Це знак долара, як в сторону, це просто прізвисько для спеціальної глобальної змінної називається буквально JQuery. [00:34:55] Знак долара виглядає просто здорово. Так громада JQuery тільки почасти з використовували його як свого спеціального символу. Це не означає, що це означає в PHP. В JavaScript, знак долара є так само, як букви алфавіту або число для змінної. [00:35:07] Ви можете просто мати його в якості імені. Просто виглядає здорово. Так спільноти прийняв його як псевдонім для їхньої власної бібліотеки під назвою JQuery. [00:35:13] І це супер популярним. Так що JSON є саме це. Це функція, яка Люди в JQuery писав що отримує JSON з server-- JavaScript Object Notation. З того, що URL він збирається щоб отримати цю інформацію? Як видно з цього URL тут. [00:35:27] А що повинно браузер робити як тільки він повернеться ця відповідь? І це магія AJAX, так, щоб speak-- Asynchronous JavaScript в XML. Це важко зрозуміти, з такою Простий приклад, як ми мали тут. [00:35:41] Але це було асинхронний в почуття, що мій код, коли виконується послав повідомлення Сервер піти отримати мені JSON. І це відбулося дуже швидко що я отримав відповідь. Але, що цікаво, що це рядок коди не повісити свій комп'ютер. [00:35:55] Я не бачу значок спінінг. Я не втратити Здатність рухатися миша. Мій браузер насправді прекрасно. [00:36:01] Бо те, як JavaScript обробляє Відповідь від сервера полягає в наступному. Ви реєструєтеся, що ви називаєте функція зворотного виклику, яка просто означає, агов, JavaScript. Як тільки сервер реагує з JSON, дзвоніть цю анонімну функцію. [00:36:18] І, будь ласка, пройшло в цій функції всі рядки сервер виплюнути як аргумент називають дані. Так, в інших словах, якщо Я збірці динамічно URL quote.php проходження в цьому Символ, як безкоштовний або GOOG або ще багато чого, Я тоді кажу JavaScript піти отримати що URL. Пам'ятайте, що в браузері збирається повернути щось що виглядає як ми бачили earlier-- це. [00:36:42] І те, що другий аргумент тут, щоб отримати JSON каже викликатиме цю функцію коли сервер отримує назад будь то 10 мілісекунд відтепер і 10 секунд по тому. І як тільки ви це зробите, додати ціну на сторінку. Цей синтаксис тут просто значить іди вузол з дерева, чий унікальний ідентифікатор є price-- цей проміжок ми бачили раніше. [00:37:01] Цей метод називається HTML просто каже, йти замінити HTML, що там з data.price. Що data.price? Ну, браузер, нагадаємо, показав мені це, повертаючись. Так що це дані. [00:37:14] І так це трохи загадковий подивитися коми тут. Але насправді, дозвольте мені зробити це. Дозвольте мені просто вставити цей дуже швидко в Gedit і показати це як ми показали, Структура раніше Zamyla в. [00:37:27] Що сервер посилає назад маленький об'єкт, який виглядає наступним чином. І так data.price є просто даючи мені 0,1515. Так багато рухатися частини тут все відразу. [00:37:39] Але ключові винос є що у нас є ця здатність зробити додаткову HTTP Запити, що використовують JavaScript без перезавантаження сторінки. І тоді ми можемо насправді змінити веб-сторінку на льоту. І виходить, що JavaScript та інші мови можна використовувати не тільки в даний час мутувати веб-сторінок, але насправді писати програмне забезпечення у фактичному комп'ютері, не обмежується тільки хром тощо. [00:38:00] Насправді, if-- Колтона, буде вам хотів приєднатися до нас знову тут з вашим кодом лабораторії, і Чанг, а? Давайте підемо далі, поговоривши про анонімні функції і зворотні виклики і дійсно випробовувати долю тут з демо з кровотечею сучасні технології, одним з ці пристрої Elite руху. Тепер, це пристрій, нагадаємо, це невеликий пристрій USB а that-- це beautiful-- який підключається в свій портів USB. [00:38:25] Тут-то і забезпечує введення в формі людини жестів шляхом виявлення за допомогою інфрачервоних променів, по суті, руху від вашої руки. Так тоді як те, що намагався Марія на до було м'язистим, насправді відчуває, що змінюється Ваша рука, це інфрачервоний основі. Так він шукає рухів в роду сфері ноги або близько того з самого пристрою. [00:38:46] Так чому б мені не взяти удар в цьому в першу чергу? І давайте йти вперед і кинути Ви на накладні витрати тут. Так давайте поставимо ноутбук Колтона тут. У нас є Андрій по телевізору. І що б ви хотіли, щоб я зробив в першу чергу? [00:39:00] Колтон: Ідіть вперед і просто покласти руки над цим хлопцем і ви побачите деякі казкові блиск. [00:39:04] Девід Дж Маланій: Дуже приємно. Все це відбувається в режимі реального часу. Добре. Гаразд, і так. Так приємно. Гаразд, що ще ми можемо зробити? [00:39:15] Колтон: Перейти до наступного екрану і бачити. [00:39:17] Девід Дж Маланій: Гаразд. [00:39:19] Колтон: забавну гру де ви отримаєте, щоб зробити роботів. [00:39:21] Девід Дж Маланій: Гаразд, так це це підроблені руки, показуючи, що мені робити. Колтон: Так Так що вперед і захопити один з блоків і поклав його поверх тіла, які робота. Девід Дж Маланій: О, це моя рука. О. ОК, чарівні. Хвилиночку, ОК. Там ми йдемо. [00:39:41] Колтон: Я зробив один на аварії. [00:39:43] Девід Дж Маланій: ОК, я отримаю цей хлопець. Чорт візьми! Коли ми займалися цим у минулому ніч, ви знаєте, що це перейшло в? [00:39:51] Як це. Добре. Далі один? [00:39:55] Колтон: Звичайно. [00:39:56] Девід Дж Маланій: Гаразд, і є третя. Добре. Колтон: І в цьому, ви отримуєте to-- Девід Дж Маланій: О, це один красиво. Колтон: --yeah, вибрати, крім цієї квітки. Девід Дж Маланій: ОК. Ні? Пропущений. [00:40:14] Колтон: О, там ви йдете. [00:40:15] Девід Дж Маланій: ах, подивіться на що. Дуже мило. Ну, чому не "ми беремо з одного добровольця тут хто хотів би прийти на до. Як щодо тут в зеленій зоні, чи не так? [00:40:27] Гаразд, і давайте have-- а не робити це, деякі з вас може знаєте цю гру here-- перерізати мотузку, можливо? Подивимося. У нас є наші окуляри тут? [00:40:37] Добре. Спасибо. Як тебе звуть? [00:40:39] АУДИТОРІЯ: Лаура. [00:40:40] Девід Дж Маланій: Лаура? Приємно бачити. Якщо ви не заперечуєте, поклавши Google Glass за своїми очками. Це Колтон. [00:40:46] Колтон: Привіт. Приємно познайомитися. [00:40:48] Девід Дж Маланій: ОК, давай навколо. Гаразд, так що ви збираєтеся зробити тут, зігравши це раніше, є кладіть руку на Leap Motion тут. І тепер ваша стрілка повинна рухатися. О, ні. [00:40:57] АУДИТОРІЯ: Ні. [00:40:58] Девід Дж Маланій: Ми не хочу, щоб кинути ще. Добре, почекайте. А тут. Так помітити, як ви тримаєте ваш палець над чимось, миша починає йти зелений, який є, як ви виберіть. [00:41:06] Так наведіть курсор миші на Play. І тільки один палець в порядку. А тепер натисніть на маленький зелений хлопець зліва. А тепер тримати, поки вона не заповниться зеленим. Добре. Тепер, начебто, рівень один нагорі. [00:41:16] АУДИТОРІЯ: Так, ми хочемо першого рівня, тут. [00:41:20] Девід Дж Маланій: Добре. Отже, все, що вам зробити, перерізав мотузку. Курсор це біла там. [00:41:28] Дуже мило. Гаразд, він збирається отримати складніше. Так тримати палець на наступний зараз. Добре. Це один важко. [00:41:39] АУДИТОРІЯ: Ось лайно. Добре. Вона хоче, щоб йти цим шляхом. Ось лайно, that-- [00:41:44] Девід Дж Маланій: Так. Вторинна мета отримати всі зірки. Гаразд, наступний. [00:41:53] Давайте подивимося, якщо ви можете отримати цей третій. Добре. Добре, йди туди. [00:42:06] Звичайно. О, дуже добре. Добре. [00:42:11] Так чому б нам не відкласти тут сьогодні? Нехай хто-небудь прийшов на до, хто хоче грати. Велике спасибі Лоре наш волонтер. І ми будемо бачити вас в понеділок. [00:42:18] АУДИТОРІЯ: Ви, напевно, хочете їх назад. [00:42:21] СПІКЕР 2: На наступному CS50--