Дэвид Дж Маланом: Ладно, так это вот Мио рука группа, пару из которых мы есть для 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--