1 00:00:00,000 --> 00:00:39,630 2 00:00:39,630 --> 00:00:41,880 Дэвид Дж Маланом: Ладно, так это вот Мио рука 3 00:00:41,880 --> 00:00:44,450 группа, пару из которых мы есть для CS50 окончательных проектов. 4 00:00:44,450 --> 00:00:47,533 И это было демонстрацией мы стояли в очереди Вы до заранее, где по существу 5 00:00:47,533 --> 00:00:51,120 это довольно туго повязку здесь прислушивается к вашим мышечных движений 6 00:00:51,120 --> 00:00:54,280 , которые затем отображают в области программного обеспечения для ноутбука Колтона здесь, которые 7 00:00:54,280 --> 00:00:57,230 было Itunes и что Песня уже стояли в очереди. 8 00:00:57,230 --> 00:01:00,270 Вместо того, чтобы мне записывать демо это, Колтон был в лаборатории 9 00:01:00,270 --> 00:01:04,129 ясно всю неделю получать демонстрацию готовы в течение одного храброго добровольца. 10 00:01:04,129 --> 00:01:07,430 Если кто-то хотел бы приехать на up-- увидел свою руку первым. 11 00:01:07,430 --> 00:01:09,540 Давай до. 12 00:01:09,540 --> 00:01:12,530 >> Хорошо. 13 00:01:12,530 --> 00:01:13,886 И как тебя зовут? 14 00:01:13,886 --> 00:01:14,800 >> АУДИТОРИЯ: Э-э, Мария. 15 00:01:14,800 --> 00:01:16,550 >> Дэвид Дж Маланом: Мария, приятно видеть вас. 16 00:01:16,550 --> 00:01:17,310 Давай сюда. 17 00:01:17,310 --> 00:01:19,550 Позвольте мне познакомить вас с Колтон. 18 00:01:19,550 --> 00:01:21,290 Колтон, это Мария. 19 00:01:21,290 --> 00:01:23,050 >> Колтон: Привет, приятно познакомиться. 20 00:01:23,050 --> 00:01:24,330 >> Дэвид Дж Маланом: Все Право, так шагу, мы 21 00:01:24,330 --> 00:01:26,204 придется вам поставить это на предплечье 22 00:01:26,204 --> 00:01:29,280 так что это довольно плотно возле локтя. 23 00:01:29,280 --> 00:01:31,940 А между тем, давайте поставить на нашей Google Glass 24 00:01:31,940 --> 00:01:33,720 и мы будем смешивать технологии сегодня. 25 00:01:33,720 --> 00:01:36,340 >> Колтон: Во-первых, мы должны будем подключить это в вещах. 26 00:01:36,340 --> 00:01:37,170 >> Дэвид Дж Маланом: ОК. 27 00:01:37,170 --> 00:01:39,795 На самом деле, давайте вашу руку, как близко к этому кабелю, как это возможно 28 00:01:39,795 --> 00:01:41,160 так что мы можем сначала синхронизировать его. 29 00:01:41,160 --> 00:01:42,740 >> Колтон: Давайте сделаем это. 30 00:01:42,740 --> 00:01:46,500 >> Дэвид Дж Маланом: А между тем, так что каждый может получить более близкий взгляд, 31 00:01:46,500 --> 00:01:50,290 мы бросить камеру Эндрю на экране нет. 32 00:01:50,290 --> 00:01:54,460 Поэтому у нас есть кабель USB, это будучи подключен к повязкой Марии. 33 00:01:54,460 --> 00:02:00,230 И позвольте мне бросить экран Колтона на проекторе следующем. 34 00:02:00,230 --> 00:02:06,000 >> Так Колтон регистрирует устройство Теперь, как Мио подключен к этому кабелю. 35 00:02:06,000 --> 00:02:08,060 А теперь то, что Мария собираюсь делать мгновение 36 00:02:08,060 --> 00:02:10,120 на самом деле идти через шаги калибровки 37 00:02:10,120 --> 00:02:12,830 и научить программное обеспечение как ее мышцы реагировать 38 00:02:12,830 --> 00:02:16,070 когда она убедиться, предварительно определены жесты, что программное обеспечение понимает. 39 00:02:16,070 --> 00:02:17,910 Если вы хотели бы пойти в Передняя часть экрана. 40 00:02:17,910 --> 00:02:26,840 41 00:02:26,840 --> 00:02:30,090 Хорошо, продолжайте пробовать. 42 00:02:30,090 --> 00:02:31,860 >> Колтон: Перейти подобное. 43 00:02:31,860 --> 00:02:32,970 И как, что. 44 00:02:32,970 --> 00:02:34,563 И всю дорогу справа. 45 00:02:34,563 --> 00:02:35,922 Возвращаться. 46 00:02:35,922 --> 00:02:37,740 >> Дэвид Дж Маланом: ОК. 47 00:02:37,740 --> 00:02:38,960 Другой точки зрения. 48 00:02:38,960 --> 00:02:39,620 Это не вы. 49 00:02:39,620 --> 00:02:40,350 Это нам. 50 00:02:40,350 --> 00:02:41,749 >> МАРИЯ: Хорошо. 51 00:02:41,749 --> 00:02:42,540 Дэвид Дж Маланом: Нет. 52 00:02:42,540 --> 00:02:46,720 53 00:02:46,720 --> 00:02:51,540 Давайте переместить его выше, так это ближе к локтю, или даже сильнее. 54 00:02:51,540 --> 00:02:52,680 Хорошо. 55 00:02:52,680 --> 00:02:53,270 >> Здесь мы идем. 56 00:02:53,270 --> 00:02:56,780 Это было бы хорошее время для CS52X. 57 00:02:56,780 --> 00:02:57,670 Там мы идем. 58 00:02:57,670 --> 00:02:58,760 >> Очень мило. 59 00:02:58,760 --> 00:03:01,170 Хорошо. 60 00:03:01,170 --> 00:03:02,790 Большой палец на мизинец. 61 00:03:02,790 --> 00:03:03,380 >> Очень мило. 62 00:03:03,380 --> 00:03:05,140 Спред пальцы. 63 00:03:05,140 --> 00:03:06,240 Хорошо. 64 00:03:06,240 --> 00:03:06,910 Волна право. 65 00:03:06,910 --> 00:03:15,052 66 00:03:15,052 --> 00:03:17,010 Это любопытно, показывающий Вы с левой hand-- 67 00:03:17,010 --> 00:03:19,665 >> Колтон: Да, это странно. 68 00:03:19,665 --> 00:03:21,790 Дэвид Дж Маланом: Волна право и двигаться вперед. 69 00:03:21,790 --> 00:03:22,998 Перенесемся пропустить или рядом. 70 00:03:22,998 --> 00:03:25,020 Это нормально прямо Wave. 71 00:03:25,020 --> 00:03:26,650 >> МАРИЯ: Я don't-- ждать. 72 00:03:26,650 --> 00:03:28,430 >> Дэвид Дж Маланом: Нужна помощь? 73 00:03:28,430 --> 00:03:30,027 >> Колтон: Так что вы собираетесь, как это. 74 00:03:30,027 --> 00:03:31,860 МАРИЯ: Это превращается Другое дело, однако. 75 00:03:31,860 --> 00:03:32,390 Колтон: Это. 76 00:03:32,390 --> 00:03:34,250 Дэвид Дж Маланом: Да я не знаю, почему он показывает вам leftie. 77 00:03:34,250 --> 00:03:36,458 Колтон: Почему бы вам не try-- попробуйте в том же духе. 78 00:03:36,458 --> 00:03:38,910 79 00:03:38,910 --> 00:03:40,090 >> Дэвид Дж Маланом: Нет? 80 00:03:40,090 --> 00:03:42,580 Может достигать руку из прямее 81 00:03:42,580 --> 00:03:46,070 и сделать его более резким, как это. 82 00:03:46,070 --> 00:03:48,176 Да, хорошо, давай. 83 00:03:48,176 --> 00:03:49,670 >> МАРИЯ: Я сожалею. 84 00:03:49,670 --> 00:03:51,170 Дэвид Дж Маланом: Это не ваша вина. 85 00:03:51,170 --> 00:03:53,018 Колтон: Это нормально. 86 00:03:53,018 --> 00:03:55,430 Дэвид Дж Маланом: All Right. 87 00:03:55,430 --> 00:03:56,220 Well-- 88 00:03:56,220 --> 00:03:57,620 >> МАРИЯ: Должны ли мы пропустить это, тогда? 89 00:03:57,620 --> 00:03:59,620 Дэвид Дж Маланом: Да, давайте пусть вам сорваться с крючка. 90 00:03:59,620 --> 00:04:03,130 Так что, если кто-то хотел сделать Окончательный проект, используя эту режущую кромку 91 00:04:03,130 --> 00:04:07,707 оборудование, понимаю, что это может просто взять немного привыкнуть. 92 00:04:07,707 --> 00:04:10,290 И this-- реальность это на самом деле очень крае. 93 00:04:10,290 --> 00:04:12,040 >> Это то, что называется Комплект разработчика, который 94 00:04:12,040 --> 00:04:14,956 предназначается, чтобы быть существенно пре-релиз так что люди могут делать то, 95 00:04:14,956 --> 00:04:18,690 this-- бороться с ним, фигура о том, как органы народные работать 96 00:04:18,690 --> 00:04:19,980 с технологией. 97 00:04:19,980 --> 00:04:21,750 Так что, если вы хотите потом, после лекции, 98 00:04:21,750 --> 00:04:23,750 мы можем позволить вам прийти и сделать еще один удар в этом. 99 00:04:23,750 --> 00:04:26,970 Но в противном случае, аплодисменты, если мы могли, для Марии пришли на до. 100 00:04:26,970 --> 00:04:28,770 >> МАРИЯ: Спасибо. 101 00:04:28,770 --> 00:04:30,390 >> Дэвид Дж Маланом: Спасибо. 102 00:04:30,390 --> 00:04:34,945 Мы повесить на это, но мы дадим you-- как о стресс мяч здесь? 103 00:04:34,945 --> 00:04:38,620 О, и-- if-- да, спасибо. 104 00:04:38,620 --> 00:04:39,715 Хорошо. 105 00:04:39,715 --> 00:04:45,750 Таким образом, для любопытных, если бы вы были знакомы с звуковой выбора 106 00:04:45,750 --> 00:04:47,670 что мы сделали там ранее, удивительный ТВ 107 00:04:47,670 --> 00:04:50,210 показать, что вы должны абсолютно быть выпивка-смотреть на Netflix 108 00:04:50,210 --> 00:04:51,110 это один здесь. 109 00:04:51,110 --> 00:04:54,472 >> СПИКЕР 1: Дамы и господа, волшебник по имени Джош. 110 00:04:54,472 --> 00:05:04,710 111 00:05:04,710 --> 00:05:08,050 >> Дэвид Дж Маланом: И, по-видимому, это вещь в текст меня во время лекции сейчас. 112 00:05:08,050 --> 00:05:11,190 Мне сказали, что Мария был день рождения вчера. 113 00:05:11,190 --> 00:05:14,095 Так С Днем Рождения от CS50 Марии, а также. 114 00:05:14,095 --> 00:05:18,720 115 00:05:18,720 --> 00:05:22,090 >> Таким образом, вы, возможно, читали в последний месяц что это господа здесь, Стив 116 00:05:22,090 --> 00:05:25,260 Баллмер, который был на самом деле класс 1977 в колледже, 117 00:05:25,260 --> 00:05:27,170 Недавно ушедший в отставку для Microsoft. 118 00:05:27,170 --> 00:05:29,620 Он был студентом здесь, то пару лет спустя 119 00:05:29,620 --> 00:05:31,910 оказался в Стэнфорд Business School 120 00:05:31,910 --> 00:05:34,160 когда он получил телефон позвонить с другом своим, которые 121 00:05:34,160 --> 00:05:36,516 жил по коридору от него здесь, в Гарварде. 122 00:05:36,516 --> 00:05:38,640 Имя этого друга был Билл Гейтс, и в то время, 123 00:05:38,640 --> 00:05:42,700 он пытался завербовать Стива быть Первый деловой человек, на самом деле, 124 00:05:42,700 --> 00:05:45,720 в небольшой компании назвать Microsoft. 125 00:05:45,720 --> 00:05:48,960 >> Короче говоря, Стив в конечном итоге победил, 126 00:05:48,960 --> 00:05:52,130 присоединился Microsoft, когда они было всего 30 сотрудников. 127 00:05:52,130 --> 00:05:54,300 И к тому времени, он вышел в отставку совсем недавно, 128 00:05:54,300 --> 00:05:58,100 компания имела 100 тысяч сотрудников За последние несколько лет. 129 00:05:58,100 --> 00:06:01,171 И так сайт известен как The Verge подготовил эту дань на видео 130 00:06:01,171 --> 00:06:02,920 что мы думали, что мы поделился, что дает вам 131 00:06:02,920 --> 00:06:08,380 чувство, как много энергии Стивом приводит к любой презентации он дает. 132 00:06:08,380 --> 00:06:11,884 133 00:06:11,884 --> 00:06:12,550 [ВИДЕОВОСПРОИЗВЕДЕНИЕ] 134 00:06:12,550 --> 00:06:16,220 -Microsoft Походит на четвертого ребенка. 135 00:06:16,220 --> 00:06:18,260 Дети делают покинуть дом. 136 00:06:18,260 --> 00:06:21,875 В этом случае, я думаю, Я ухожу из дома. 137 00:06:21,875 --> 00:06:23,270 Эй Билл, whazzap? 138 00:06:23,270 --> 00:06:24,200 >> -Wazzap? 139 00:06:24,200 --> 00:06:25,320 >> Эй, WAZZAP? 140 00:06:25,320 --> 00:06:28,590 Мы дали огромные возможности. 141 00:06:28,590 --> 00:06:30,210 И Билл дал нам такую ​​возможность. 142 00:06:30,210 --> 00:06:35,520 143 00:06:35,520 --> 00:06:36,770 Я хочу поблагодарить Билла за это. 144 00:06:36,770 --> 00:06:39,630 Я хочу, чтобы вы тоже. 145 00:06:39,630 --> 00:06:42,500 Темпы инноваций не собирается замедляться. 146 00:06:42,500 --> 00:06:45,140 >> Это собирается получить быстрее и быстрее. 147 00:06:45,140 --> 00:06:50,165 Там может быть несколько конкурентов что, к сожалению, устранены! 148 00:06:50,165 --> 00:06:54,337 149 00:06:54,337 --> 00:06:59,564 >> Я люблю эту компанию. 150 00:06:59,564 --> 00:07:00,064 Да! 151 00:07:00,064 --> 00:07:03,452 152 00:07:03,452 --> 00:07:08,250 Я PC, и я люблю эту компанию! 153 00:07:08,250 --> 00:07:13,090 >> Разработчики, разработчики, разработчики, Разработчики, разработчики, разработчики, 154 00:07:13,090 --> 00:07:14,560 Разработчики, разработчики. 155 00:07:14,560 --> 00:07:17,500 156 00:07:17,500 --> 00:07:18,970 Да! 157 00:07:18,970 --> 00:07:19,950 Веб-разработчики! 158 00:07:19,950 --> 00:07:21,420 >> Веб-разработчики! 159 00:07:21,420 --> 00:07:22,890 Веб-разработчики! 160 00:07:22,890 --> 00:07:25,830 161 00:07:25,830 --> 00:07:28,770 Послушайте, что еще вы получить без дополнительной оплаты! 162 00:07:28,770 --> 00:07:31,960 >> Исполнительный MS-DOS, назначение календарь, карта куча, блокнот, 163 00:07:31,960 --> 00:07:33,750 Часы, панель управления. 164 00:07:33,750 --> 00:07:35,461 И, может, вы в это верите? 165 00:07:35,461 --> 00:07:35,960 Reversie! 166 00:07:35,960 --> 00:07:37,270 >> Записывать их на CD! 167 00:07:37,270 --> 00:07:38,660 Дать им MSN! 168 00:07:38,660 --> 00:07:40,422 Вы отправить их друзьям! 169 00:07:40,422 --> 00:07:41,790 >> Все с одним щелчком мыши! 170 00:07:41,790 --> 00:07:48,670 Один Microsoft, одна стратегия, один нашой сосредоточены, дисциплинированный, профессиональный, 171 00:07:48,670 --> 00:07:50,610 и эксперт во всем, что мы делаем. 172 00:07:50,610 --> 00:07:52,670 Позвольте мне использовать линию из старого фильма. 173 00:07:52,670 --> 00:07:54,810 >> Отношения, как акулы. 174 00:07:54,810 --> 00:07:57,480 Они двигаются вперед или они умирают. 175 00:07:57,480 --> 00:08:01,470 Я на самом деле думаю, что тек компании одинаковы. 176 00:08:01,470 --> 00:08:04,801 >> [END ВИДЕОВОСПРОИЗВЕДЕНИЕ] 177 00:08:04,801 --> 00:08:08,050 Дэвид Дж Маланом: Итак, мы так рады сообщает, что Стив будет присоединяться к нам 178 00:08:08,050 --> 00:08:13,320 здесь в CS50 следующую среду в Обычное место и время здесь. 179 00:08:13,320 --> 00:08:14,750 Космическая, вероятно, будет ограниченным. 180 00:08:14,750 --> 00:08:19,650 И так, чтобы присоединиться к нам лично, пожалуйста, возглавить сегодня или вскоре после этого 181 00:08:19,650 --> 00:08:22,600 в cs50.harvard.edu/register. 182 00:08:22,600 --> 00:08:25,780 >> И мы будем следить за помощью Вторник, подтверждающий пятна. 183 00:08:25,780 --> 00:08:29,900 С нетерпением ждем, что в следующем В среду во время лекции в CS50. 184 00:08:29,900 --> 00:08:33,706 Теперь, в других новостях, я случайно не сталкивался с этим в Алом просто 185 00:08:33,706 --> 00:08:34,289 на днях. 186 00:08:34,289 --> 00:08:37,370 >> Получается, что один из сотрудников CS50 в и по крайней мере один из студентов CS50 в 187 00:08:37,370 --> 00:08:40,299 в настоящее время работает для UC Президент и вице-президент, 188 00:08:40,299 --> 00:08:42,950 который вернул меня моим собственным дней назад 189 00:08:42,950 --> 00:08:45,920 когда я проиграл выборы UC треском. 190 00:08:45,920 --> 00:08:48,210 Но худа без добра в том, что это я всегда 191 00:08:48,210 --> 00:08:50,604 рассказать историю, что один из Я уверен, 192 00:08:50,604 --> 00:08:52,770 много причин, я потерял выборы было полное отсутствие 193 00:08:52,770 --> 00:08:54,103 из талантом ораторского. 194 00:08:54,103 --> 00:08:56,950 И так, честно говоря, это отвез меня, что опыт 195 00:08:56,950 --> 00:09:02,235 Я думаю, что мой младший год, на самом деле подписать для Гарвардского компьютерного общества, которые 196 00:09:02,235 --> 00:09:04,610 это группа на территории кампуса, что проводит различные технические переговоры 197 00:09:04,610 --> 00:09:05,318 и другие вещи. 198 00:09:05,318 --> 00:09:08,117 И я взял на себя их обучение семинары и поэтому 199 00:09:08,117 --> 00:09:09,950 имел возможность, Прекрасная возможность, 200 00:09:09,950 --> 00:09:12,620 чтобы начать работать на именно это. 201 00:09:12,620 --> 00:09:15,000 Но также, я имел возможность в течение этого опыта 202 00:09:15,000 --> 00:09:16,930 чтобы научить себя все больше HTML. 203 00:09:16,930 --> 00:09:21,080 И поэтому я откладывал вчера вечером Просматривая сайт, основанной HTML 204 00:09:21,080 --> 00:09:28,066 Я сделал в как 1997, '98, для моего Кампания, которая выглядит вот так вот. 205 00:09:28,066 --> 00:09:29,920 Я знаю. 206 00:09:29,920 --> 00:09:33,340 >> Because-- и, конечно, уведомление этот удивительный дизайнерское решение в 1998 году 207 00:09:33,340 --> 00:09:33,850 или еще много чего. 208 00:09:33,850 --> 00:09:36,475 Первое, что вы хотите, чтобы пользователи сделать после посещения вашего сайта 209 00:09:36,475 --> 00:09:39,860 это должны нажать другую ссылку просто ввести свой сайт здесь с монахом 210 00:09:39,860 --> 00:09:43,940 за, как окутана завесой, где по-видимому, моя кампания платформа. 211 00:09:43,940 --> 00:09:46,330 И это все вы получите сегодня это просто скриншот. 212 00:09:46,330 --> 00:09:49,500 Но я читал через, как, мои агитационные плакаты вчера вечером 213 00:09:49,500 --> 00:09:50,490 и моя платформа. 214 00:09:50,490 --> 00:09:52,960 >> И я был так зол, в то время. 215 00:09:52,960 --> 00:09:55,380 Моя платформа was-- было интересно. 216 00:09:55,380 --> 00:09:57,730 Так что я успокоилась с тех пор. 217 00:09:57,730 --> 00:10:03,550 Но когда-нибудь, я буду баллотироваться на очередной срок и мы надеемся, лучше это время. 218 00:10:03,550 --> 00:10:07,265 >> Так HTML, что язык, на котором я сделал что in-- вас скоро сделать много more-- 219 00:10:07,265 --> 00:10:09,140 что-то мы были говорить о последнее 220 00:10:09,140 --> 00:10:12,460 и в значительной степени брать разумеющимся сейчас что мы перешли на другие языки. 221 00:10:12,460 --> 00:10:15,650 Но давайте остановимся на мгновение и поставить некоторые из этих вещей в контексте. 222 00:10:15,650 --> 00:10:18,040 Так в предложении, что HTML? 223 00:10:18,040 --> 00:10:19,370 >> Или, что используется для? 224 00:10:19,370 --> 00:10:20,208 Любой? 225 00:10:20,208 --> 00:10:20,708 Да. 226 00:10:20,708 --> 00:10:22,002 >> АУДИТОРИЯ: разметки для веб-сайтов. 227 00:10:22,002 --> 00:10:23,460 Дэвид Дж Маланом: разметки для веб-сайта. 228 00:10:23,460 --> 00:10:27,100 Так что это язык разметки, позволяет структурировать веб-страницы. 229 00:10:27,100 --> 00:10:30,040 Заголовок идет здесь, название идет здесь, организм переходит здесь. 230 00:10:30,040 --> 00:10:33,280 Это полужирный, это italics-- такого рода подробно. 231 00:10:33,280 --> 00:10:33,830 >> Хорошо, хорошо. 232 00:10:33,830 --> 00:10:37,620 Так CSS позволяет you-- и я взял некоторые вольности там 233 00:10:37,620 --> 00:10:40,990 с жирным облицовкой и курсивом, потому что что лучше реализован с этим. 234 00:10:40,990 --> 00:10:42,096 CSS is-- что? 235 00:10:42,096 --> 00:10:42,845 Скажем, в предложении. 236 00:10:42,845 --> 00:10:46,000 237 00:10:46,000 --> 00:10:46,720 Любой вообще. 238 00:10:46,720 --> 00:10:46,870 Да. 239 00:10:46,870 --> 00:10:49,286 >> Аудитория: Украшения и материал, как, как проектировать его. 240 00:10:49,286 --> 00:10:51,769 241 00:10:51,769 --> 00:10:52,810 Дэвид Дж Маланом: ОК, хорошо. 242 00:10:52,810 --> 00:10:55,420 Украшения, которые позволяют вам оформить его или стилизовать его 243 00:10:55,420 --> 00:10:59,540 с вещами, как шрифтом и курсив и цветов, а также более тонкой 244 00:10:59,540 --> 00:11:01,330 зернистой позиционирование элементов. 245 00:11:01,330 --> 00:11:04,520 Это своего рода позволяет принимать вещи на последней мили, так что, если, например, 246 00:11:04,520 --> 00:11:08,130 в Pset7, вы, возможно, заметили на ваш Портфель страницы, если вы в этот момент 247 00:11:08,130 --> 00:11:12,270 уже, что таблица по умолчанию, что вы сделать, чтобы показать запасами пользовательские 248 00:11:12,270 --> 00:11:15,740 и денежных, вероятно, выглядит довольно отвратительно по умолчанию, без пробелов. 249 00:11:15,740 --> 00:11:18,420 Все в своего рода забиты вместе в строках и столбцах. 250 00:11:18,420 --> 00:11:20,662 >> Ну, с небольшим количеством CSS, как вы можете понять,, 251 00:11:20,662 --> 00:11:23,870 Вы можете фактически настроить, что и сделать это что-то гораздо более знакомы и много 252 00:11:23,870 --> 00:11:24,870 красивее на вид. 253 00:11:24,870 --> 00:11:27,730 Так CSS составляет около стилизация сайтов. 254 00:11:27,730 --> 00:11:31,970 Но тогда мы ввели еще один язык, PHP, который позволяет нам делать? 255 00:11:31,970 --> 00:11:36,400 256 00:11:36,400 --> 00:11:37,590 >> Давайте просто делать то, что? 257 00:11:37,590 --> 00:11:38,177 Любой. 258 00:11:38,177 --> 00:11:40,010 Добрался до выходить за рамки первые пару строк. 259 00:11:40,010 --> 00:11:40,260 Да. 260 00:11:40,260 --> 00:11:41,719 >> АУДИТОРИЯ: Генерация динамического контента. 261 00:11:41,719 --> 00:11:42,718 Дэвид Дж Маланом: Прекрасно. 262 00:11:42,718 --> 00:11:43,850 Генерация динамического контента. 263 00:11:43,850 --> 00:11:45,808 И вы можете сделать это в любое количество языков. 264 00:11:45,808 --> 00:11:50,120 Мы решили использовать PHP, потому что это в части так, аналогичной синтаксиса C. 265 00:11:50,120 --> 00:11:52,000 >> Но PHP делает именно это. 266 00:11:52,000 --> 00:11:54,620 Это позволяет динамически генерировать выход. 267 00:11:54,620 --> 00:11:57,890 И некоторые из этого выхода может быть HTML, как мы обычно делаем. 268 00:11:57,890 --> 00:12:00,160 И это также, потому что это Язык программирования, является 269 00:12:00,160 --> 00:12:03,240 Механизм, посредством которого мы можем говорить с базами данных. 270 00:12:03,240 --> 00:12:05,730 >> И мы можем сделать запросы в другие серверы, такие как йэху 271 00:12:05,730 --> 00:12:08,660 и программно сделать что-нибудь действительно, что вы могли бы в противном случае 272 00:12:08,660 --> 00:12:10,400 хочу, чтобы заставить компьютер делать. 273 00:12:10,400 --> 00:12:13,580 Так PHP позволяет нам начать динамически вывода контента. 274 00:12:13,580 --> 00:12:16,900 Так по этой логике, у меня не было динамический сайт еще в 1998 году. 275 00:12:16,900 --> 00:12:18,460 >> Это было просто статическим веб-страница. 276 00:12:18,460 --> 00:12:22,250 Мой контент должен был быть изменен путем вручную с Gedit или какой-то эквивалент. 277 00:12:22,250 --> 00:12:25,290 Но PHP является то, что мы использовали или может быть использован, а, 278 00:12:25,290 --> 00:12:27,260 что-то вроде Сайт Фрош чаты, которые 279 00:12:27,260 --> 00:12:31,160 предполагалось, взял регистрации и управлять списком users-- вещей, которые 280 00:12:31,160 --> 00:12:33,550 фактически переходе Время, хотя мы, оказывается, 281 00:12:33,550 --> 00:12:35,990 использовать Perl, другая языком в то время. 282 00:12:35,990 --> 00:12:40,350 >> И тогда, наконец, мы ввели SQL-- Structured Query Language. 283 00:12:40,350 --> 00:12:43,845 Так еще один язык который используется для чего? 284 00:12:43,845 --> 00:12:46,660 285 00:12:46,660 --> 00:12:47,639 Используется для чего? 286 00:12:47,639 --> 00:12:49,430 Можем ли мы рисковать slight-- Хорошо, что мы не собираемся 287 00:12:49,430 --> 00:12:51,263 получить гораздо дальше чем оркестра здесь. 288 00:12:51,263 --> 00:12:53,432 АУДИТОРИЯ: Это протокол используется, чтобы поговорить с базами данных. 289 00:12:53,432 --> 00:12:55,640 Дэвид Дж Маланом: протокол используется, чтобы поговорить с базами данных. 290 00:12:55,640 --> 00:12:56,181 Позвольте мне подправить. 291 00:12:56,181 --> 00:12:59,280 Это естественный язык используется поговорить с databases-- выбирает 292 00:12:59,280 --> 00:13:01,280 и вставки и удаления и обновления и фактически 293 00:13:01,280 --> 00:13:03,840 даже больше функций, которые мы даже не нырял 294 00:13:03,840 --> 00:13:07,920 в, но вы можете explore-- есть исследовать, скажем, окончательный проект. 295 00:13:07,920 --> 00:13:09,560 Таким образом, есть все эти различные части. 296 00:13:09,560 --> 00:13:13,100 >> И, надеюсь, Pset7, хотя его спецификация является довольно долго, 297 00:13:13,100 --> 00:13:15,990 это намеренно долго ходить вас через, как эти вещи могут все 298 00:13:15,990 --> 00:13:17,210 наберется вместе. 299 00:13:17,210 --> 00:13:20,300 Теперь, в понедельник, мы представил нашу последнюю язык 300 00:13:20,300 --> 00:13:23,430 что мы официально представить в course-- то есть, JavaScript. 301 00:13:23,430 --> 00:13:25,720 Это, как PHP, является интерпретировать язык. 302 00:13:25,720 --> 00:13:28,110 >> Но ключевым отличием Я предложил в понедельник 303 00:13:28,110 --> 00:13:32,730 является то, что в то время как PHP выполняет или интерпретируется на сервере, который 304 00:13:32,730 --> 00:13:35,990 в данном случае является CS50 прибор, или может быть какой-то коммерческий веб- 305 00:13:35,990 --> 00:13:39,370 Сервер в Интернете, JavaScript обычно 306 00:13:39,370 --> 00:13:43,650 это язык, который работает на стороне клиента не сервер side-- так в браузере. 307 00:13:43,650 --> 00:13:46,970 Который должен сказать, так же, как когда я открыл до Facebook исходный код и нашел все 308 00:13:46,970 --> 00:13:51,510 из тех файлов .js, Подразумевалось что, когда вы посещаете Facebook или наиболее 309 00:13:51,510 --> 00:13:54,810 сайты в эти дни, вы получаете не только HTML, не только CSS, 310 00:13:54,810 --> 00:13:59,370 но целая куча JavaScript Код часто в виде файлов .js. 311 00:13:59,370 --> 00:14:03,970 А потом это browser-- самостоятельно Mac или PC-- что выполняет этот код. 312 00:14:03,970 --> 00:14:05,990 >> Но ваш браузер выполняет его. 313 00:14:05,990 --> 00:14:08,070 Вы можете думать, в то песочнице. 314 00:14:08,070 --> 00:14:12,420 Так что код JavaScript не должно быть возможность удаления файлов на вашем компьютере. 315 00:14:12,420 --> 00:14:14,730 Это не должны быть в состоянии отправлять электронную почту от вашего имени. 316 00:14:14,730 --> 00:14:17,760 Вашему браузеру рода ограничивает Что вы можете делать с ним. 317 00:14:17,760 --> 00:14:20,630 >> Так что в этом смысле, это немного менее мощный, пожалуй, чем C. 318 00:14:20,630 --> 00:14:24,030 Но JavaScript может, как в сторону, можно использовать на сервере, 319 00:14:24,030 --> 00:14:27,740 хотя мы, как правило, не говорить об этом в этом контексте. 320 00:14:27,740 --> 00:14:29,740 Так что теперь давайте связать их вместе. 321 00:14:29,740 --> 00:14:34,000 Неделю плюс назад мы представили некоторые HTML на left-- супер скучный веб-страницы. 322 00:14:34,000 --> 00:14:35,000 >> Просто говорит привет мир. 323 00:14:35,000 --> 00:14:38,110 И тогда я предложил на Право, можно отчасти украсть идеи 324 00:14:38,110 --> 00:14:41,470 из нашего обсуждения структуры данных в C 325 00:14:41,470 --> 00:14:45,270 и думать о том, как это иерархическая Язык разметки слева 326 00:14:45,270 --> 00:14:49,720 можно сделать или реализованы в памяти как фактический древовидной структуры с узлами 327 00:14:49,720 --> 00:14:51,400 и указатели и те виды деталей. 328 00:14:51,400 --> 00:14:53,820 Справа, мы называем что в DOM-- документа 329 00:14:53,820 --> 00:14:56,800 Объект Model-- который является только причудливый способ сказать дерево. 330 00:14:56,800 --> 00:14:59,520 >> Теперь, почему это полезно думать об этом таким образом? 331 00:14:59,520 --> 00:15:01,680 Потому что сейчас с JavaScript, потому что у нас есть 332 00:15:01,680 --> 00:15:05,810 Код, который добирается, чтобы играть в эту среда, фактический HTML это 333 00:15:05,810 --> 00:15:08,360 был отправлен в браузер уже и уже 334 00:15:08,360 --> 00:15:12,690 были загружены в память Браузер в дерево в вашего компьютера 335 00:15:12,690 --> 00:15:18,270 RAM, как это, мы можем использовать JavaScript на самом деле пройти или пешком или поиск 336 00:15:18,270 --> 00:15:21,800 или изменить что DOM дерево, однако мы хотим. 337 00:15:21,800 --> 00:15:24,040 Таким образом, в самом деле, если вы думаете, о facebook.com, 338 00:15:24,040 --> 00:15:27,660 если вы используете функцию чата, если вас Использование Gmail и функция Gchat, 339 00:15:27,660 --> 00:15:30,540 что-нибудь, где у вас есть Сообщения, поступающие снова и снова 340 00:15:30,540 --> 00:15:35,880 и снова, эти сообщения, вероятно, как Л.И. тег, Список товара теги, возможно. 341 00:15:35,880 --> 00:15:37,940 >> Или, может быть, они просто дивы, которые держат появляться 342 00:15:37,940 --> 00:15:39,770 каждый раз, когда вы получаете мгновенное сообщение. 343 00:15:39,770 --> 00:15:42,960 И так, что просто означает, что Facebook или Google делает 344 00:15:42,960 --> 00:15:45,200 в любое время вы получите Сообщение от сервера, 345 00:15:45,200 --> 00:15:48,740 они, вероятно, с использованием JavaScript просто добавить еще один узел 346 00:15:48,740 --> 00:15:52,700 чтобы это tree-- другой узел в этом дерево, которое затем визуально выглядит просто 347 00:15:52,700 --> 00:15:54,570 как с новой строки текста на экране. 348 00:15:54,570 --> 00:15:57,100 Но они вставив в этой структуре данных. 349 00:15:57,100 --> 00:15:59,742 >> Таким образом, в классах, как CS124 и другие, вы будете 350 00:15:59,742 --> 00:16:02,200 на самом деле писать больше кода против структуры данных, как это. 351 00:16:02,200 --> 00:16:04,310 Но сейчас в JavaScript, мы просто предполагаем, 352 00:16:04,310 --> 00:16:07,920 мы получаем все эти функции свободным от самого языка для. 353 00:16:07,920 --> 00:16:09,210 Итак, давайте посмотрим на примере. 354 00:16:09,210 --> 00:16:13,120 >> Позвольте мне открыть файл с именем form.html. 355 00:16:13,120 --> 00:16:14,601 Это супер просто. 356 00:16:14,601 --> 00:16:15,600 Это просто выглядит так. 357 00:16:15,600 --> 00:16:17,860 >> Нет CSS, ни мысли к эстетике. 358 00:16:17,860 --> 00:16:19,810 Это чисто функциональный и, видимо, я 359 00:16:19,810 --> 00:16:24,000 прося электронной почте, пароль, пароль еще раз, а затем проверка 360 00:16:24,000 --> 00:16:26,150 согласиться с некоторыми условиями. 361 00:16:26,150 --> 00:16:28,740 Что исходный код для этого Похоже, это, вероятно, что-то 362 00:16:28,740 --> 00:16:31,030 Вы могли бы предположить с Немного мысли сейчас. 363 00:16:31,030 --> 00:16:32,840 У меня есть тэг формы здесь. 364 00:16:32,840 --> 00:16:36,190 >> Действие очевидно собирается перейти в файл с именем register.php. 365 00:16:36,190 --> 00:16:37,870 Метод, который я собираюсь использовать это получить. 366 00:16:37,870 --> 00:16:40,880 А потом я получил текст поле, имя которого по электронной почте. 367 00:16:40,880 --> 00:16:43,340 >> У меня есть поле пароля чье имя является паролем. 368 00:16:43,340 --> 00:16:45,420 У меня другая Поле пароля, чье имя 369 00:16:45,420 --> 00:16:47,342 несколько произвольно подтверждение. 370 00:16:47,342 --> 00:16:49,690 Это просто еще один параметр HTTP. 371 00:16:49,690 --> 00:16:54,430 >> И тогда мы, мы не использовали их, кроме так как Фрош чаты демо в class-- 372 00:16:54,430 --> 00:16:56,692 флажок, который является просто типа равна проверку. 373 00:16:56,692 --> 00:16:57,900 И я буду называть это соглашение. 374 00:16:57,900 --> 00:17:00,700 Так я вроде произвольно, но Удобно назвал эти поля. 375 00:17:00,700 --> 00:17:03,450 Так что теперь, когда эта форма приобретает представляется, давайте посмотрим, что произойдет. 376 00:17:03,450 --> 00:17:07,290 Если я делаю malan@harvard.edu, Я сделаю пароль малиновый. 377 00:17:07,290 --> 00:17:09,530 Я сделаю пароль ничего. 378 00:17:09,530 --> 00:17:10,910 Давайте не сотрудничать. 379 00:17:10,910 --> 00:17:12,280 >> И я не буду флажок. 380 00:17:12,280 --> 00:17:13,940 Позвольте мне ссылку Зарегистрироваться. 381 00:17:13,940 --> 00:17:15,420 И это говорит, хм, вы зарегистрированы. 382 00:17:15,420 --> 00:17:16,069 Не совсем так. 383 00:17:16,069 --> 00:17:17,450 >> Но URL изменилось. 384 00:17:17,450 --> 00:17:22,280 Так эта форма была явно разрешено представить register.php. 385 00:17:22,280 --> 00:17:25,160 Но по-видимому, я должен быть ловить некоторые из этих ошибок. 386 00:17:25,160 --> 00:17:27,569 Теперь, в Pset7 и некоторые из наших примеров лекции, 387 00:17:27,569 --> 00:17:30,130 мы, как правило, распечатать большая сообщение красная ошибка здесь 388 00:17:30,130 --> 00:17:33,760 говоря, отсутствует имя, или отсутствует пароль. 389 00:17:33,760 --> 00:17:37,680 Мы сделали это раньше, и мы сделано на стороне сервера обнаружения ошибок. 390 00:17:37,680 --> 00:17:41,580 >> Но многие веб-сайты в эти дни сделать обнаружение сторона ошибке клиента 391 00:17:41,580 --> 00:17:42,810 где URL не меняется. 392 00:17:42,810 --> 00:17:44,101 Вся страница не обновляется. 393 00:17:44,101 --> 00:17:46,940 Вы получаете мгновенную обратную связь из браузера. 394 00:17:46,940 --> 00:17:48,070 Может быть, что-то идет красный. 395 00:17:48,070 --> 00:17:49,190 >> Может быть, вы получите всплывающее. 396 00:17:49,190 --> 00:17:53,240 Но вам не нужно тратить время отправки Данные сервера вот неполный. 397 00:17:53,240 --> 00:17:56,050 Итак, давайте посмотрим, как мы могли бы достичь эту функцию, а также. 398 00:17:56,050 --> 00:17:59,660 >> Позвольте мне пойти в form1.html, который выглядит одинаково. 399 00:17:59,660 --> 00:18:03,530 Но если на этот раз я malan@harvard.edu и я печатаю малиновый 400 00:18:03,530 --> 00:18:07,350 и я не сотрудничать и дальше но нажмите Регистрация, заметили теперь. 401 00:18:07,350 --> 00:18:08,940 Это не самый сексуальный решение. 402 00:18:08,940 --> 00:18:10,900 Я, по крайней мере поймал эту ошибку. 403 00:18:10,900 --> 00:18:12,900 И я использовал предупреждение Функция в JavaScript-- 404 00:18:12,900 --> 00:18:14,090 которые мы только с помощью в классе. 405 00:18:14,090 --> 00:18:16,430 В общем, вы не должны использовать это потому что это может очень быстро выйти 406 00:18:16,430 --> 00:18:17,160 из-под контроля. 407 00:18:17,160 --> 00:18:19,180 Но пароли не соответствуют является ошибка. 408 00:18:19,180 --> 00:18:21,120 >> Позвольте мне идти вперед и нажмите OK. 409 00:18:21,120 --> 00:18:25,040 Но то, что ключ вынос здесь является то, что URL не изменилась. 410 00:18:25,040 --> 00:18:27,960 Так что я не потрудился тратить Время сервера с просьбой 411 00:18:27,960 --> 00:18:30,750 Вопрос, который я мог бы выяснили ответ на себе. 412 00:18:30,750 --> 00:18:33,210 >> И пользователь, даже при том, говорили об этом 413 00:18:33,210 --> 00:18:35,264 больше, чем пользовательскими буду думать об этом, 414 00:18:35,264 --> 00:18:36,680 будет иметь мгновенную обратную связь. 415 00:18:36,680 --> 00:18:39,044 Там нет задержки с подключение к сети. 416 00:18:39,044 --> 00:18:40,460 Итак, давайте посмотрим на этот исходный код. 417 00:18:40,460 --> 00:18:45,600 >> Form1.html внешность структурно похожи здесь. 418 00:18:45,600 --> 00:18:46,810 Форма фактически то же самое. 419 00:18:46,810 --> 00:18:48,330 Но давайте посмотрим, что я сделал здесь. 420 00:18:48,330 --> 00:18:49,913 И есть различные способы, чтобы сделать это. 421 00:18:49,913 --> 00:18:53,690 И я сделал самое прямо последователь но не самый элегантный способ еще. 422 00:18:53,690 --> 00:18:54,869 У меня есть тег сценария. 423 00:18:54,869 --> 00:18:57,035 Я тогда звоните document.getElementById ('регистрация'). 424 00:18:57,035 --> 00:19:00,090 425 00:19:00,090 --> 00:19:04,420 И я хранить это значение в форме, переменная. 426 00:19:04,420 --> 00:19:05,520 >> Так что я сделал? 427 00:19:05,520 --> 00:19:08,960 Вы можете думать о document.getElementById как 428 00:19:08,960 --> 00:19:11,200 специальная функция, JavaScript дает вам 429 00:19:11,200 --> 00:19:14,400 что буквально вручает вам указатель на один из узлов 430 00:19:14,400 --> 00:19:16,520 или прямоугольники в этом дереве. 431 00:19:16,520 --> 00:19:21,470 Так что теперь это то, что наша переменная форма в JavaScript на самом деле указывает на. 432 00:19:21,470 --> 00:19:25,120 >> Так что теперь синтаксис отличается от C. Но мы делаем несколько вещей здесь. 433 00:19:25,120 --> 00:19:30,360 Один из них, это одна немного странно глядя, конечно по сравнению с C. 434 00:19:30,360 --> 00:19:32,180 Но посмотрите на линии 35. 435 00:19:32,180 --> 00:19:35,130 Так на левой form.onsubmit. 436 00:19:35,130 --> 00:19:38,060 Напомним, что onsubmit является как поля в структуры. 437 00:19:38,060 --> 00:19:41,480 Если вы думаете о переменной формы просто быть C структура, 438 00:19:41,480 --> 00:19:42,600 он может иметь несколько полей. 439 00:19:42,600 --> 00:19:46,410 >> Назад в день, у нас были студенты имена, Идентификаторы, дома, те, вроде полей. 440 00:19:46,410 --> 00:19:48,520 Просто подумайте о onsubmit как другой области. 441 00:19:48,520 --> 00:19:53,380 Но это специальное поле, потому что Браузер запрограммирована ожидать 442 00:19:53,380 --> 00:19:57,530 .onsubmit чтобы не быть значением как число или строку, 443 00:19:57,530 --> 00:20:01,180 но на самом деле быть функцией или адрес функции 444 00:20:01,180 --> 00:20:02,570 в памяти компьютера. 445 00:20:02,570 --> 00:20:04,740 >> И в самом деле, вот что это ключевое слово здесь делает. 446 00:20:04,740 --> 00:20:06,710 Это говорит, дайте мне новую функцию. 447 00:20:06,710 --> 00:20:09,390 Но то, что его имя будет, по-видимому? 448 00:20:09,390 --> 00:20:10,800 >> Вспоминая понедельник. 449 00:20:10,800 --> 00:20:13,430 450 00:20:13,430 --> 00:20:17,170 Как называется это функция, основанная на этом синтаксисе? 451 00:20:17,170 --> 00:20:19,784 Нет, я имею в виду, есть четко имя не associated-- конечно 452 00:20:19,784 --> 00:20:21,200 не в том, что я выделил здесь. 453 00:20:21,200 --> 00:20:22,560 >> Но что на самом деле в порядке. 454 00:20:22,560 --> 00:20:25,840 Это анонимная функция, или Функция лямбда, как некоторые могли бы назвать это. 455 00:20:25,840 --> 00:20:27,589 И это просто означает, это все-таки функция. 456 00:20:27,589 --> 00:20:29,400 Это просто, вы не можете назвать его по имени. 457 00:20:29,400 --> 00:20:30,057 Но это не страшно. 458 00:20:30,057 --> 00:20:33,140 Потому что снова, браузер был запрограммирована компаний, как Google 459 00:20:33,140 --> 00:20:38,540 или Microsoft или Mozilla или другие на просто знаю, что если в .onsubmit области 460 00:20:38,540 --> 00:20:43,400 внутри элемент формы имеет Значение, рассматривать его как function-- 461 00:20:43,400 --> 00:20:44,750 указатель на функцию, если хотите. 462 00:20:44,750 --> 00:20:46,910 И назвать его, когда форма будет отправлена. 463 00:20:46,910 --> 00:20:50,350 >> Так что код должен быть выполнен когда форма отправляется? 464 00:20:50,350 --> 00:20:52,526 По-видимому, все внутри фигурной скобки. 465 00:20:52,526 --> 00:20:53,650 И это только стилистическая. 466 00:20:53,650 --> 00:20:55,626 >> Вы можете сделать это, как мы, как правило, делают в CS50. 467 00:20:55,626 --> 00:20:58,250 Но в JavaScript, большинство людей как правило, держать его в одной строке 468 00:20:58,250 --> 00:21:01,960 только потому, что это более явно связанные с этим функции ключевых слов. 469 00:21:01,960 --> 00:21:03,240 Так что теперь я делаю? 470 00:21:03,240 --> 00:21:08,616 >> Если form.email.value равна равных пустая строка или ничего, вот 471 00:21:08,616 --> 00:21:11,490 оповещения, где я собираюсь сказать, Вы должны указать свой адрес электронной почты, 472 00:21:11,490 --> 00:21:12,690 а затем вернуться ложным. 473 00:21:12,690 --> 00:21:15,720 И это, что возвращение ложным, что предотвращает форму от представляется. 474 00:21:15,720 --> 00:21:19,480 Между тем, если значение пароля пустой, я собираюсь кричать на пользователя 475 00:21:19,480 --> 00:21:21,150 и сказать, вы должны ввести пароль. 476 00:21:21,150 --> 00:21:23,700 >> Между тем все становится немного необычным здесь. 477 00:21:23,700 --> 00:21:29,160 Если form.password.value не равно form.confirmation.value, 478 00:21:29,160 --> 00:21:31,680 Другое поле, кричать на пользователя, что пароли 479 00:21:31,680 --> 00:21:33,860 не совпадают, как они сделал не минуту назад. 480 00:21:33,860 --> 00:21:35,780 А потом это своего немного сексуальнее, потому что I 481 00:21:35,780 --> 00:21:40,470 знаю я знал концептуально, что проверил это имя флажок в. 482 00:21:40,470 --> 00:21:45,680 >> Так что я могу просто использовать восклицание Точка сказать, если проверка не 483 00:21:45,680 --> 00:21:48,040 checked-- это логическое Значение, правда это или false-- 484 00:21:48,040 --> 00:21:49,700 Я кричал на пользователя по этой причине. 485 00:21:49,700 --> 00:21:52,300 В противном случае, если мы получим через все эти условия, 486 00:21:52,300 --> 00:21:53,270 давайте просто вернуться верно. 487 00:21:53,270 --> 00:21:54,700 Пусть форма представляется. 488 00:21:54,700 --> 00:21:56,560 И это будет происходить. 489 00:21:56,560 --> 00:21:57,740 >> Давайте ввести малиновый. 490 00:21:57,740 --> 00:22:00,230 Давайте флажок, нажмите Регистрация. 491 00:22:00,230 --> 00:22:01,979 А теперь я иду до места назначения. 492 00:22:01,979 --> 00:22:03,270 Теперь, нет базы данных есть. 493 00:22:03,270 --> 00:22:05,370 Там нет ничего интересного в register.php. 494 00:22:05,370 --> 00:22:07,980 Мне просто нужно было что-то на самом деле говорить. 495 00:22:07,980 --> 00:22:09,140 Итак, позвольте мне остановиться, здесь. 496 00:22:09,140 --> 00:22:16,270 Любые вопросы о том, что мы только что сделали или то, что некоторые из этого нового синтаксиса? 497 00:22:16,270 --> 00:22:17,640 Хорошо, да? 498 00:22:17,640 --> 00:22:20,025 >> АУДИТОРИЯ: Таким образом, любой флажок автоматически Boolean. 499 00:22:20,025 --> 00:22:21,650 Вы не должны объявлять, как он. 500 00:22:21,650 --> 00:22:22,649 >> Дэвид Дж Маланом: Правильно. 501 00:22:22,649 --> 00:22:29,340 Любой флажок, который послан к вам от HTML форма в код JavaScript 502 00:22:29,340 --> 00:22:31,760 будет рассматриваться, да, как Логическое value-- истинным или ложным. 503 00:22:31,760 --> 00:22:32,635 Это хороший вопрос. 504 00:22:32,635 --> 00:22:36,080 В то время как в других ценностей, из Конечно, были текст, AKA строки. 505 00:22:36,080 --> 00:22:38,500 >> Ладно, так что давайте мне назад немного дальше. 506 00:22:38,500 --> 00:22:39,900 То, что было весь смысл этого? 507 00:22:39,900 --> 00:22:41,400 Просто чтобы быть ясно. 508 00:22:41,400 --> 00:22:44,940 Мол, мы уже знаем, даже из Pset7 и даже из лекции на прошлой неделе 509 00:22:44,940 --> 00:22:51,120 примеры, которые, очевидно, можно проверить $ _GET $ _POST Ли пользователь даст нам 510 00:22:51,120 --> 00:22:52,200 пустое значение. 511 00:22:52,200 --> 00:22:54,400 Помните пустую функцию в PHP. 512 00:22:54,400 --> 00:22:58,040 >> Так просто, чтобы было ясно, что одна из причин, мы могли бы также 513 00:22:58,040 --> 00:23:00,535 хочу сделать эту проверку ошибок внутри браузера? 514 00:23:00,535 --> 00:23:03,350 515 00:23:03,350 --> 00:23:06,080 Что мотивация здесь? 516 00:23:06,080 --> 00:23:06,580 Да. 517 00:23:06,580 --> 00:23:09,735 >> АУДИТОРИЯ: Быстрее, и вы не отправить ненужные данные на сервер. 518 00:23:09,735 --> 00:23:10,610 Дэвид Дж Маланом: Хорошо. 519 00:23:10,610 --> 00:23:11,170 Это быстрее. 520 00:23:11,170 --> 00:23:12,920 Вы не отправлять бесполезно данные на сервер. 521 00:23:12,920 --> 00:23:14,670 >> Таким образом, вы получаете обратно более немедленный ответ. 522 00:23:14,670 --> 00:23:16,560 И в целом, то пользователь опыт лучше. 523 00:23:16,560 --> 00:23:17,900 Подумайте об альтернативе. 524 00:23:17,900 --> 00:23:21,160 >> Если для Gmail-- и было так много лет назад. 525 00:23:21,160 --> 00:23:24,160 Предположим, что вы получили новое сообщение электронной почты вашего Gmail счет, но единственный способ через 526 00:23:24,160 --> 00:23:26,510 видеть, что это, как, перезагрузить всю страницу. 527 00:23:26,510 --> 00:23:29,030 Или, допустим, вы нажимаете на ссылка читать электронную почту. 528 00:23:29,030 --> 00:23:31,600 >> Все должно перезагрузить так что вы можете посмотреть электронную почту. 529 00:23:31,600 --> 00:23:33,380 Или Facebook-- вы получите сообщение чата. 530 00:23:33,380 --> 00:23:36,000 Вы не видите его, пока вы не перезагрузите страница или нажмите некоторое ссылку. 531 00:23:36,000 --> 00:23:38,380 >> Мол, это было бы ужасно раздражает пользовательский опыт. 532 00:23:38,380 --> 00:23:41,300 И это, как это было, ясно, еще когда я баллотировался на UC 533 00:23:41,300 --> 00:23:44,760 и веб-был гораздо менее динамичным и JavaScript не был, как популяризировали 534 00:23:44,760 --> 00:23:45,601 как это теперь. 535 00:23:45,601 --> 00:23:47,850 И все становится намного более динамичным и многое другое 536 00:23:47,850 --> 00:23:49,900 на стороне клиента, в этом смысле. 537 00:23:49,900 --> 00:23:54,370 >> Но есть одна загвоздка здесь, и это своего рода раздражающий Gotcha. 538 00:23:54,370 --> 00:23:58,720 Просто потому, что вы добавляете стороне клиента Обнаружение как это не означает, 539 00:23:58,720 --> 00:24:01,430 Вы можете или должны отказаться Обнаружение на стороне сервера. 540 00:24:01,430 --> 00:24:04,080 Вы по существу хотите разместить Проверка ошибок в обоих местах. 541 00:24:04,080 --> 00:24:05,830 Потому что то, что было одним урока узнал 542 00:24:05,830 --> 00:24:10,270 из статьи я читал отрывки от этой глупой CMS система-- 543 00:24:10,270 --> 00:24:14,410 Content Management система-- что было реализации своей системы аутентификации, 544 00:24:14,410 --> 00:24:16,790 его Войти через какой механизм? 545 00:24:16,790 --> 00:24:19,515 546 00:24:19,515 --> 00:24:20,469 JavaScript. 547 00:24:20,469 --> 00:24:21,499 >> АУДИТОРИЯ: JavaScript. 548 00:24:21,499 --> 00:24:23,290 Дэвид Дж Маланом: JavaScript, точно, не так ли? 549 00:24:23,290 --> 00:24:24,610 Было помощью JavaScript. 550 00:24:24,610 --> 00:24:27,120 И буквально, вы, ребята, играл немного, вероятно, 551 00:24:27,120 --> 00:24:28,700 с инспектором Chrome. 552 00:24:28,700 --> 00:24:30,890 И если я могу найти его, осмотрите элемент. 553 00:24:30,890 --> 00:24:33,670 >> Позвольте мне перейти к делать все варианты Chrome. 554 00:24:33,670 --> 00:24:37,080 И это, как легко это отключить JavaScript в браузере. 555 00:24:37,080 --> 00:24:38,950 Проверьте, нет больше JavaScript. 556 00:24:38,950 --> 00:24:41,070 >> Таким образом, в справедливости, много из сети в эти дни 557 00:24:41,070 --> 00:24:43,430 просто будет разорвать, потому что Gmail и другие sites-- 558 00:24:43,430 --> 00:24:46,140 Facebook-- предположить, что JavaScript включена. 559 00:24:46,140 --> 00:24:50,180 Но если вы делаете что-то глупое как только проверка ввода пользователей 560 00:24:50,180 --> 00:24:52,520 и проверяя его на ошибки на стороне клиента, 561 00:24:52,520 --> 00:24:54,940 противник может легко это сделать. 562 00:24:54,940 --> 00:24:57,180 А потом еще умнее противник, как вы, ребята, 563 00:24:57,180 --> 00:25:01,120 Теперь можно использовать Telnet или Curl или просто команда команды линия 564 00:25:01,120 --> 00:25:05,300 и на самом деле отправлять сообщения на сервер что же не погрешность проверяется. 565 00:25:05,300 --> 00:25:08,380 >> Так что это больше Решение пользовательский интерфейс 566 00:25:08,380 --> 00:25:13,060 чем это фактическое техническое improvement-- реализации 567 00:25:13,060 --> 00:25:14,410 что-то на стороне клиента, как это. 568 00:25:14,410 --> 00:25:16,800 Так что теперь беглый взгляд, но затем Я отложить на онлайн-прогулки 569 00:25:16,800 --> 00:25:17,674 через для этого. 570 00:25:17,674 --> 00:25:21,480 В виде двух, мы фактически пошли через и очищены и код немного. 571 00:25:21,480 --> 00:25:23,650 Но позвольте мне отложить на один из видео мы, скорее всего, 572 00:25:23,650 --> 00:25:27,970 код вставки в Pset8 что лишний раз показывает похож синтаксис с использованием библиотеки под названием 573 00:25:27,970 --> 00:25:32,320 JQuery, который является супер, супер популярная библиотека в JavaScript 574 00:25:32,320 --> 00:25:34,510 что откровенно большинство людей просто использовать эти дни 575 00:25:34,510 --> 00:25:37,070 и даже запутать как Сам существо JavaScript. 576 00:25:37,070 --> 00:25:38,950 >> И это, как правило, включают некоторые знаки доллара 577 00:25:38,950 --> 00:25:41,350 и ключевые слова, такие как документ В скобках здесь. 578 00:25:41,350 --> 00:25:44,480 Но, опять же, позвольте мне отложить до некоторые медленные учебники онлайн 579 00:25:44,480 --> 00:25:46,750 а не увязают в только синтаксис. 580 00:25:46,750 --> 00:25:48,630 Давайте перейдем к что-то немного прохладнее 581 00:25:48,630 --> 00:25:50,520 с точки зрения применения этого. 582 00:25:50,520 --> 00:25:57,730 >> Так в частности, отпусти меня вперед и открыть это здесь. 583 00:25:57,730 --> 00:25:58,340 Подойди. 584 00:25:58,340 --> 00:25:59,380 Там мы идем. 585 00:25:59,380 --> 00:26:01,500 >> Позвольте мне открыть эту картинку здесь. 586 00:26:01,500 --> 00:26:03,450 Излишне сложным смотрит, но это 587 00:26:03,450 --> 00:26:07,880 описывает технологию, называемую AJAX-- Асинхронный JavaScript и XML, где 588 00:26:07,880 --> 00:26:10,530 X для XML на самом деле больше не действительно не используется. 589 00:26:10,530 --> 00:26:13,430 Это, как правило, использовать что-то еще называют JSON. 590 00:26:13,430 --> 00:26:16,560 >> Но вот как-то вроде Google Maps или Google Earth работает. 591 00:26:16,560 --> 00:26:18,060 Давайте попробуем это на лету, на самом деле. 592 00:26:18,060 --> 00:26:21,590 Позвольте мне идти вперед и открывать до Chrome на моем браузере. 593 00:26:21,590 --> 00:26:26,236 >> И позвольте мне перейти в, говорят, maps.google.com. 594 00:26:26,236 --> 00:26:29,260 595 00:26:29,260 --> 00:26:31,930 И на самом деле, если ты стар Достаточно вспомнить, что, 596 00:26:31,930 --> 00:26:35,600 как, MapQuest походило назад в день, и, может быть, они все еще работают, как это. 597 00:26:35,600 --> 00:26:38,870 Когда вы использовали для поиска something-- 33 Oxford Street, Cambridge, Mass, 598 00:26:38,870 --> 00:26:40,650 давайте сделаем this-- вас фактически, если вы 599 00:26:40,650 --> 00:26:43,000 хотел повернуть камеру вверх и вниз, влево и вправо, 600 00:26:43,000 --> 00:26:44,920 вы будет выглядеть Большая стрелка на верхней, и это 601 00:26:44,920 --> 00:26:46,921 бы показать вам еще один кадр карте здесь. 602 00:26:46,921 --> 00:26:49,753 Или вы бы нажать левую и вам пойдет сюда, или повторный щелчок 603 00:26:49,753 --> 00:26:51,000 и вы бы сюда. 604 00:26:51,000 --> 00:26:53,000 Но вместо них дней, мы, конечно, просто 605 00:26:53,000 --> 00:26:55,970 само собой разумеющимся, что мы можем пойти вокруг Кембриджа довольно быстро 606 00:26:55,970 --> 00:26:57,550 просто щелкнув и перетащив. 607 00:26:57,550 --> 00:26:59,130 Но обратите внимание, что есть некоторые глюки. 608 00:26:59,130 --> 00:27:02,160 >> Если я сделаю это достаточно быстро, что, кажется, происходит 609 00:27:02,160 --> 00:27:05,960 как я тянуть слишком быстро для компьютера, чтобы не отставать? 610 00:27:05,960 --> 00:27:07,160 Что ты видишь? 611 00:27:07,160 --> 00:27:07,660 Да. 612 00:27:07,660 --> 00:27:09,232 >> Аудитория: пиксели не обновить. 613 00:27:09,232 --> 00:27:10,940 Дэвид Дж Маланом: пиксели не обновить. 614 00:27:10,940 --> 00:27:12,870 Там в actually-- и вам мог видеть это, на самом деле, 615 00:27:12,870 --> 00:27:15,360 если вы смотрите онлайн и пауза это или на самом деле замедляет 616 00:27:15,360 --> 00:27:18,600 для once-- вы увидите, что есть плитка, квадраты, или треугольники, 617 00:27:18,600 --> 00:27:22,040 не хватает карте до на долю секунды позже, больше данных, 618 00:27:22,040 --> 00:27:24,390 Еще изображения на самом деле появляются на экране. 619 00:27:24,390 --> 00:27:29,810 И в самом деле, если мы делаем это, глядя до Chrome's-- скажем, Chrome-- 620 00:27:29,810 --> 00:27:30,310 Посмотрим. 621 00:27:30,310 --> 00:27:31,090 Мы не можем этого сделать. 622 00:27:31,090 --> 00:27:31,860 >> О, возгласы. 623 00:27:31,860 --> 00:27:34,761 Давайте открывать maps.google.com. 624 00:27:34,761 --> 00:27:36,660 Позвольте мне сделать окно больше раз. 625 00:27:36,660 --> 00:27:38,836 >> Вернуться к 33 Оксфорд-стрит. 626 00:27:38,836 --> 00:27:42,010 627 00:27:42,010 --> 00:27:43,760 То, что было на сайте я был на недавно? 628 00:27:43,760 --> 00:27:46,440 У меня была эта, вроде бы, личное громкие слова, чтобы я что я бы тогда мгновенное сообщение 629 00:27:46,440 --> 00:27:48,470 любой друг, который был на сайте кто хотел услышать его. 630 00:27:48,470 --> 00:27:49,345 Там какая-то веб-сайт. 631 00:27:49,345 --> 00:27:52,680 Я думаю, что это Comcast-- так очень большой американский провайдер. 632 00:27:52,680 --> 00:27:56,355 Вы можете, при регистрации нового кабеля Услуги модем или телевидение кабельное, 633 00:27:56,355 --> 00:27:59,230 они имеют форму очень разумно где они просят у вас ваш адрес. 634 00:27:59,230 --> 00:28:01,450 И есть эта удивительная Функция называется автоматическое заполнение, 635 00:28:01,450 --> 00:28:04,600 как Google, что начинает заполнять в ответ на ваш вопрос. 636 00:28:04,600 --> 00:28:08,090 >> Проблема в том, что они делают автоматическое заполнение на первых вещей, которые вы вводите. 637 00:28:08,090 --> 00:28:12,890 Так что, если вы начинаете набирать в 33, это покажет вам, буквально в каждом доме 638 00:28:12,890 --> 00:28:15,790 в Америке, который начинается с номером 33 639 00:28:15,790 --> 00:28:17,920 Прежде чем продолжить, чтобы ожидают, что вы введите более. 640 00:28:17,920 --> 00:28:20,660 Так что если вы наберете 33 Оксфорд, Затем он показывает вам каждую улицу 641 00:28:20,660 --> 00:28:24,726 в Америке, что есть 33 Оксфорд в его имя, вне зависимости от города 642 00:28:24,726 --> 00:28:25,350 что вы находитесь в. 643 00:28:25,350 --> 00:28:26,320 >> И тогда вы будете продолжать печатать. 644 00:28:26,320 --> 00:28:28,930 И, наконец, он понимает, что они не делают Предложение услуг в вашем доме в Кембридже 645 00:28:28,930 --> 00:28:29,920 или что-то подобное. 646 00:28:29,920 --> 00:28:33,410 Но дело в том, что это наиболее ослиный реализация авто 647 00:28:33,410 --> 00:28:34,140 завершить все. 648 00:28:34,140 --> 00:28:36,400 >> И я просто хочу от на этой касательной снова. 649 00:28:36,400 --> 00:28:39,040 Но есть хорошие способы использовать JavaScript и плохие пути. 650 00:28:39,040 --> 00:28:40,750 И это не обязательно лучшим выбором. 651 00:28:40,750 --> 00:28:46,360 >> Но дело здесь, прежде, чем это тирада, было открыть инструменты здесь 652 00:28:46,360 --> 00:28:49,480 и открыть средства разработчика, как мы призвали раньше, 653 00:28:49,480 --> 00:28:52,840 и смотреть Сети Вкладка как я нажимаю очень быстро. 654 00:28:52,840 --> 00:28:55,400 И заметьте, целый букет из получаете запросы произошло. 655 00:28:55,400 --> 00:28:57,310 Все это произошло так как я потащил. 656 00:28:57,310 --> 00:29:00,170 >> И скорее всего, действительно Многие из этих строк 657 00:29:00,170 --> 00:29:04,060 теперь изображение черта JPEG Типы MIME или типы контента. 658 00:29:04,060 --> 00:29:07,750 Это потому, что то, что хром делает каждый раз, когда я нажмите и перетащите, нажмите 659 00:29:07,750 --> 00:29:11,650 и перетащите, является его реализации, о, я должны пойти попросить Google для плитки 660 00:29:11,650 --> 00:29:15,080 на карте, это здесь, быстро загрузить его через HTTP, 661 00:29:15,080 --> 00:29:19,550 а затем добавить его в так называемой DOM с веб-браузерами в дерево памяти 662 00:29:19,550 --> 00:29:24,430 представление, так что пользователь, мне, видит, что обновленный плитку. 663 00:29:24,430 --> 00:29:26,795 И это из-за Техника называется AJAX. 664 00:29:26,795 --> 00:29:28,920 Назад в день, это действительно был случай, что если вас 665 00:29:28,920 --> 00:29:33,050 хотел изменить то, что происходит на экране, вам придется нажмите вверх, вниз, влево, 666 00:29:33,050 --> 00:29:33,550 прав. 667 00:29:33,550 --> 00:29:34,740 И тогда новая страница будет открываться. 668 00:29:34,740 --> 00:29:36,531 Но в эти дни, все является более динамичным. 669 00:29:36,531 --> 00:29:40,490 Это происходит в том, как мы, люди бы надеюсь, что это на самом деле будет в интерактивном режиме. 670 00:29:40,490 --> 00:29:43,210 И это достигает этого, способ технику, называемую 671 00:29:43,210 --> 00:29:46,170 AJAX, которая является, пожалуй, лучшим объясняется примера. 672 00:29:46,170 --> 00:29:49,730 Во-первых, позвольте мне идти вперед и открыть файл 673 00:29:49,730 --> 00:29:53,540 называется quote.php в сегодня код распределение. 674 00:29:53,540 --> 00:29:56,200 >> А потом сделаем symbol-- возгласы. 675 00:29:56,200 --> 00:30:02,399 Позвольте мне сделать символ = GOOG всего за какой-то акции. 676 00:30:02,399 --> 00:30:04,440 Или на самом деле, давайте сделаем один из Pset бесплатно. 677 00:30:04,440 --> 00:30:05,270 Enter. 678 00:30:05,270 --> 00:30:06,580 >> А теперь обратите внимание, что я не вернусь. 679 00:30:06,580 --> 00:30:09,210 Так что это действительно Короче файл PHP, который я 680 00:30:09,210 --> 00:30:13,210 писал, что просто заимствует код от функции поиска Pset7 в 681 00:30:13,210 --> 00:30:17,830 и выплевывает используя эту фигурную скобку и котировки и обозначения толстой кишки, по-видимому, 682 00:30:17,830 --> 00:30:22,747 цена текущего запаса для Компания, которая вам пройти в через GET. 683 00:30:22,747 --> 00:30:24,580 Так что это разные от большинства, что мы 684 00:30:24,580 --> 00:30:26,496 сделано в этом уведомлении я нахожусь буквально выплевывая 685 00:30:26,496 --> 00:30:27,870 что выглядит как код JavaScript. 686 00:30:27,870 --> 00:30:30,020 >> На самом деле, это объект JavaScript. 687 00:30:30,020 --> 00:30:34,130 На самом деле, просто чтобы быть более ясным, JavaScript Object Notation-- JSON-- 688 00:30:34,130 --> 00:30:38,330 это просто причудливый способ сказать, что вас может представлять данные в JavaScript гораздо 689 00:30:38,330 --> 00:30:41,660 как вы можете в PHP с помощью пары ключ-значение. 690 00:30:41,660 --> 00:30:44,270 Так что, если я хотел объявить переменная в JavaScript 691 00:30:44,270 --> 00:30:47,872 к представляет Zamyla, для instance-- на-структуру для Zamyla-- 692 00:30:47,872 --> 00:30:49,580 и мы будем называть его студент, эта переменная. 693 00:30:49,580 --> 00:30:53,060 Ее ID является одним, дом Уинтроп, и зовут Zamyla. 694 00:30:53,060 --> 00:30:55,490 >> Но я могу также есть массив объектов. 695 00:30:55,490 --> 00:30:58,710 Так что, если я на самом деле хотел, чтобы массив в JavaScript, содержащий 696 00:30:58,710 --> 00:31:01,740 несколько таких объектов, это Время, представляющий штат, 697 00:31:01,740 --> 00:31:04,910 Я, возможно, эти три куски кода назад 698 00:31:04,910 --> 00:31:08,560 чтобы спина к спине для них три бывшие сотрудники. 699 00:31:08,560 --> 00:31:12,201 Так синтаксис, довольно аналогично и того и другого, чтобы PHP. 700 00:31:12,201 --> 00:31:13,700 Но это особенно JavaScript. 701 00:31:13,700 --> 00:31:15,940 Это обозначение объекта. 702 00:31:15,940 --> 00:31:17,240 Так что же это полезно для? 703 00:31:17,240 --> 00:31:21,580 >> Если я написать код, который выплевывает JSON-- JavaScript Object Notation-- вещи, которые 704 00:31:21,580 --> 00:31:24,670 Похоже, это и материал, который Похоже, структуры Zamyla в, 705 00:31:24,670 --> 00:31:27,730 Я могу реально использовать этот в программах я пишу. 706 00:31:27,730 --> 00:31:30,660 Позвольте мне пойти в ajax0.html. 707 00:31:30,660 --> 00:31:33,310 И это too-- не намного мысль уделяется эстетике. 708 00:31:33,310 --> 00:31:34,660 Но посмотрите, что произойдет. 709 00:31:34,660 --> 00:31:37,050 >> Позвольте мне идти вперед и ввести бесплатно здесь. 710 00:31:37,050 --> 00:31:38,490 Нажмите получить цитату. 711 00:31:38,490 --> 00:31:41,060 И обратите внимание, URL не изменилась. 712 00:31:41,060 --> 00:31:47,250 Но я действительно получал поп с по-видимому, сегодня мелкие акции цена $ 0,15. 713 00:31:47,250 --> 00:31:49,062 Так что не все так плохо. 714 00:31:49,062 --> 00:31:52,020 Но разница в том, что каким-то образом, эти данные вернулась ко мне напрямую. 715 00:31:52,020 --> 00:31:54,250 Но давайте шаг к что-то более знакомы. 716 00:31:54,250 --> 00:31:58,900 В версии одного из этого, пусть меня введите снова свободен, нажмите кнопку Получить цитату, 717 00:31:58,900 --> 00:32:01,146 и now-- о, это было на самом деле версия JQuery. 718 00:32:01,146 --> 00:32:03,270 Так что давайте me-- я не сделал быстрая перемотка вперед достаточно далеко. 719 00:32:03,270 --> 00:32:05,830 Позвольте мне перейти к второй версии, где я хотел. 720 00:32:05,830 --> 00:32:07,260 Обратите внимание, что я сделал здесь. 721 00:32:07,260 --> 00:32:10,370 У меня есть веб-page-- супер Простая версия любой веб-страницы 722 00:32:10,370 --> 00:32:14,260 Вы могли бы использовать сегодня с текстовым полем здесь бесплатно, а затем, по-видимому просто 723 00:32:14,260 --> 00:32:14,880 Текст. 724 00:32:14,880 --> 00:32:16,860 >> Это не является формой здесь, по-видимому. 725 00:32:16,860 --> 00:32:19,360 Но если я нажимаю получить цитата, заметили мою веб-страницу 726 00:32:19,360 --> 00:32:22,760 вот-вот изменится, как будто я только что получил нового мгновенного сообщения 727 00:32:22,760 --> 00:32:25,360 или как будто я только что переехал карта и нужны, чтобы получить больше данных 728 00:32:25,360 --> 00:32:29,220 добавлены динамически на веб-страницу без изменения URL и пользователем 729 00:32:29,220 --> 00:32:30,980 Опыт получения прерывается. 730 00:32:30,980 --> 00:32:35,750 В самом деле, я до сих пор в точно такой же place-- ajax2.html. 731 00:32:35,750 --> 00:32:39,080 >> Итак, давайте взглянем только на этом примере и посмотреть, как это происходит. 732 00:32:39,080 --> 00:32:42,490 Пусти в ajax2.html. 733 00:32:42,490 --> 00:32:44,770 И обратите внимание на форму сначала. 734 00:32:44,770 --> 00:32:47,092 >> Здесь, внизу, я поворачиваюсь от автозавершение. 735 00:32:47,092 --> 00:32:48,800 Иногда он получает раздражает, если браузер 736 00:32:48,800 --> 00:32:50,508 пытается показать вам, Вся ваша история. 737 00:32:50,508 --> 00:32:53,450 Таким образом, вы можете сделать это в HTML с помощью просто говорю авто завершить прочь. 738 00:32:53,450 --> 00:32:57,290 >> Я дал этому текстовом поле symbol-- скорее, ID символа. 739 00:32:57,290 --> 00:32:58,977 И теперь, это интересная особенность. 740 00:32:58,977 --> 00:33:01,310 Мы не говорили о продолжительности, но вы можете думать об этом 741 00:33:01,310 --> 00:33:03,177 как пункту тега или сНу тега. 742 00:33:03,177 --> 00:33:05,010 Это то, что называется в линии элемента, который 743 00:33:05,010 --> 00:33:07,415 значит вы не получите пункт разорвать выше и ниже него. 744 00:33:07,415 --> 00:33:11,530 Это просто будет оставаться в режиме онлайн без попав эквивалент войти. 745 00:33:11,530 --> 00:33:17,980 Так что я дал этому кусок HTML чтобы определить уникальный идентификатор 746 00:33:17,980 --> 00:33:20,130 что я условно назвать цену. 747 00:33:20,130 --> 00:33:21,560 И у меня есть кнопку Отправить. 748 00:33:21,560 --> 00:33:25,420 >> Потому что теперь до here-- и это на самом деле супер удивительно, как мало код 749 00:33:25,420 --> 00:33:27,660 Вы можете написать делать относительно аккуратный things-- 750 00:33:27,660 --> 00:33:31,800 заметить, что я сделал здесь, если I прокрутки вверх к голове этой страницы. 751 00:33:31,800 --> 00:33:34,970 Я включил первое в моя голова скрипт тег 752 00:33:34,970 --> 00:33:37,410 что на самом деле ссылается Подать в другом месте JavaScript. 753 00:33:37,410 --> 00:33:39,702 Это от организации что пишет JQuery, 754 00:33:39,702 --> 00:33:42,660 и это просто дает вам последние версия их библиотеки JQuery. 755 00:33:42,660 --> 00:33:46,305 >> Так что это вроде как острый включают в C или требуют в PHP. 756 00:33:46,305 --> 00:33:48,900 Вы использовать тег сценария с атрибутом источника. 757 00:33:48,900 --> 00:33:52,030 Но теперь моя собственная код будет прямо здесь. 758 00:33:52,030 --> 00:33:54,170 >> Обратите внимание, у меня есть функция называется Цитаты. 759 00:33:54,170 --> 00:33:56,180 И это выглядит немного загадочный на первый взгляд. 760 00:33:56,180 --> 00:33:57,305 Но давайте дразнить это друг от друга. 761 00:33:57,305 --> 00:33:59,090 Дайте мне переменную называется URL в. 762 00:33:59,090 --> 00:34:01,390 Назначают его в буквальном смысле эту строку. 763 00:34:01,390 --> 00:34:04,530 Так, одиночные кавычки, двойные кавычки в JavaScript просто дает мне строку. 764 00:34:04,530 --> 00:34:06,900 Что плюс делать? 765 00:34:06,900 --> 00:34:08,199 Сцепление. 766 00:34:08,199 --> 00:34:12,610 >> Так что это в настоящее время является синтаксис JQuery который занимает немного привыкнуть. 767 00:34:12,610 --> 00:34:18,310 Но это просто означает иди мне DOM узлу, чьи уникальный идентификатор является символом. 768 00:34:18,310 --> 00:34:21,929 Хэштегом там означает Уникальный символ идентификатора. 769 00:34:21,929 --> 00:34:24,929 >> Знак доллара в скобках просто имею в виду, обернуть это 770 00:34:24,929 --> 00:34:28,510 в JQuery своего рода секретный соус так Вы получаете дополнительную функциональность. 771 00:34:28,510 --> 00:34:31,880 А потом .val видимому Функция, или, как мы говорим, сейчас, 772 00:34:31,880 --> 00:34:35,219 Способ внутри этого узла что просто дает вам значение. 773 00:34:35,219 --> 00:34:38,896 Короче говоря, некрасиво и запутанной как это выглядит на первый взгляд, 774 00:34:38,896 --> 00:34:42,020 это просто означает, получить с пользователем типизированных в, поместить его в конце строки 775 00:34:42,020 --> 00:34:42,880 путем объединения его. 776 00:34:42,880 --> 00:34:43,739 Это все. 777 00:34:43,739 --> 00:34:46,070 >> Так что теперь, последние три строки. 778 00:34:46,070 --> 00:34:48,690 Вы можете выжать много Функциональность из трех линий. 779 00:34:48,690 --> 00:34:52,199 Это знак доллара, как в сторону, это просто прозвище 780 00:34:52,199 --> 00:34:55,800 для специальной глобальной переменной называется буквально JQuery. 781 00:34:55,800 --> 00:34:57,060 >> Знак доллара выглядит просто здорово. 782 00:34:57,060 --> 00:35:00,080 Так община JQuery только отчасти из использовали его в качестве своего специального символа. 783 00:35:00,080 --> 00:35:02,470 Это не значит, что это означает в PHP. 784 00:35:02,470 --> 00:35:06,356 В JavaScript, знак доллара является так же, как буквы алфавита 785 00:35:06,356 --> 00:35:07,480 или число для переменной. 786 00:35:07,480 --> 00:35:09,000 >> Вы можете просто иметь его в качестве имени. 787 00:35:09,000 --> 00:35:09,770 Просто выглядит здорово. 788 00:35:09,770 --> 00:35:11,890 Так сообщества принял его в качестве псевдонима 789 00:35:11,890 --> 00:35:13,390 для их собственной библиотеки под названием JQuery. 790 00:35:13,390 --> 00:35:15,060 >> И это супер популярным. 791 00:35:15,060 --> 00:35:17,620 Так что JSON является именно это. 792 00:35:17,620 --> 00:35:19,920 Это функция, которая Люди в JQuery писал 793 00:35:19,920 --> 00:35:23,340 что получает JSON из server-- JavaScript Object Notation. 794 00:35:23,340 --> 00:35:25,680 Из того, что URL он собирается чтобы получить эту информацию? 795 00:35:25,680 --> 00:35:27,790 Как видно из этого URL здесь. 796 00:35:27,790 --> 00:35:31,180 >> А что должно браузер делать как только он вернется этот ответ? 797 00:35:31,180 --> 00:35:36,500 И это магия AJAX, так, чтобы speak-- Asynchronous JavaScript в XML. 798 00:35:36,500 --> 00:35:41,320 Это трудно понять, с такой Простой пример, как мы имели здесь. 799 00:35:41,320 --> 00:35:44,730 >> Но это было асинхронный в чувство, что мой код, когда 800 00:35:44,730 --> 00:35:48,530 выполняется послал сообщение Сервер пойти получить мне JSON. 801 00:35:48,530 --> 00:35:51,340 И это произошло очень быстро что я получил ответ. 802 00:35:51,340 --> 00:35:55,130 Но, что интересно, что это строка кода не повесить свой компьютер. 803 00:35:55,130 --> 00:35:56,550 >> Я не вижу значок спиннинг. 804 00:35:56,550 --> 00:35:59,200 Я не потерять Способность двигаться мышь. 805 00:35:59,200 --> 00:36:01,340 Мой браузер на самом деле прекрасно. 806 00:36:01,340 --> 00:36:06,290 >> Потому что то, как JavaScript обрабатывает Ответ от сервера состоит в следующем. 807 00:36:06,290 --> 00:36:09,740 Вы регистрируетесь, что вы называете функция обратного вызова, которая 808 00:36:09,740 --> 00:36:12,830 просто означает, эй, JavaScript. 809 00:36:12,830 --> 00:36:16,100 Как только сервер реагирует с JSON, 810 00:36:16,100 --> 00:36:18,750 звоните эту анонимную функцию. 811 00:36:18,750 --> 00:36:23,910 >> И, пожалуйста, прошло в этой функции все строки сервер выплюнуть 812 00:36:23,910 --> 00:36:26,080 в качестве аргумента называют данные. 813 00:36:26,080 --> 00:36:28,360 Так, в других словах, если Я сборке динамически 814 00:36:28,360 --> 00:36:33,370 URL quote.php прохождения в этом Символ, как бесплатный или GOOG или еще много чего, 815 00:36:33,370 --> 00:36:36,830 Я тогда говорю JavaScript пойти получить что URL. 816 00:36:36,830 --> 00:36:39,080 Помните, что в браузере собирается вернуть что-то 817 00:36:39,080 --> 00:36:42,680 что выглядит как мы видели earlier-- это. 818 00:36:42,680 --> 00:36:45,940 >> И то, что второй аргумент здесь, чтобы получить JSON говорит 819 00:36:45,940 --> 00:36:48,450 будет вызывать эту функцию когда сервер получает обратно 820 00:36:48,450 --> 00:36:52,440 будь то 10 миллисекунд отныне и 10 секунд спустя. 821 00:36:52,440 --> 00:36:55,840 И как только вы это сделаете, добавить цену на страницу. 822 00:36:55,840 --> 00:36:58,030 Этот синтаксис здесь просто значит иди узел 823 00:36:58,030 --> 00:37:01,940 из дерева, чей уникальный идентификатор является price-- этот промежуток мы видели ранее. 824 00:37:01,940 --> 00:37:04,320 >> Этот метод называется HTML просто говорит, идти заменить 825 00:37:04,320 --> 00:37:08,770 HTML, что там с data.price. 826 00:37:08,770 --> 00:37:10,200 Что data.price? 827 00:37:10,200 --> 00:37:12,850 Ну, браузер, напомним, показал мне это, возвращаясь. 828 00:37:12,850 --> 00:37:14,540 Так что это данные. 829 00:37:14,540 --> 00:37:18,100 >> И так это немного загадочный посмотреть запятые здесь. 830 00:37:18,100 --> 00:37:19,350 Но на самом деле, позвольте мне сделать это. 831 00:37:19,350 --> 00:37:22,890 Позвольте мне просто вставить этот очень быстро в Gedit 832 00:37:22,890 --> 00:37:27,240 и показать это как мы показали, Структура ранее Zamyla в. 833 00:37:27,240 --> 00:37:31,610 >> Что сервер посылает обратно маленький объект, который выглядит следующим образом. 834 00:37:31,610 --> 00:37:37,140 И так data.price является просто давая мне 0,1515. 835 00:37:37,140 --> 00:37:39,310 Так много двигаться части здесь все сразу. 836 00:37:39,310 --> 00:37:41,860 >> Но ключевые вынос является что у нас есть эта способность 837 00:37:41,860 --> 00:37:44,600 сделать дополнительную HTTP Запросы, использующие JavaScript 838 00:37:44,600 --> 00:37:46,090 без перезагрузки страницы. 839 00:37:46,090 --> 00:37:49,580 И тогда мы можем на самом деле изменить веб-страницу на лету. 840 00:37:49,580 --> 00:37:51,850 И получается, что JavaScript и другие языки 841 00:37:51,850 --> 00:37:54,510 можно использовать не только в настоящее время мутировать веб-страниц, 842 00:37:54,510 --> 00:37:57,960 но на самом деле писать программное обеспечение в фактическом компьютере, 843 00:37:57,960 --> 00:38:00,240 не ограничивается только хром и тому подобное. 844 00:38:00,240 --> 00:38:03,530 >> На самом деле, if-- Колтона, будет вам хотел присоединиться к нам снова здесь 845 00:38:03,530 --> 00:38:06,100 с вашим кодом лаборатории, и Чанг, а? 846 00:38:06,100 --> 00:38:09,140 Давайте пойдем дальше, поговорив о анонимные функции и обратные вызовы 847 00:38:09,140 --> 00:38:13,090 и действительно испытывать судьбу здесь с демо с кровотечением 848 00:38:13,090 --> 00:38:16,480 современные технологии, одним из эти устройства Elite движения. 849 00:38:16,480 --> 00:38:18,940 Теперь, это устройство, напомним, это небольшое устройство USB 850 00:38:18,940 --> 00:38:25,620 а that-- это beautiful-- который подключается в свой портов USB. 851 00:38:25,620 --> 00:38:29,120 >> Тут-то и обеспечивает ввод в форме человека жестов 852 00:38:29,120 --> 00:38:32,560 путем обнаружения с помощью инфракрасных лучей, по сути, движения от вашей руки. 853 00:38:32,560 --> 00:38:35,150 Так в то время как то, что пытался Мария на до было мускулистым, 854 00:38:35,150 --> 00:38:39,000 на самом деле чувствует, что меняется Ваша рука, это инфракрасный основе. 855 00:38:39,000 --> 00:38:44,390 Так он ищет движений в рода сфере ноги или около того 856 00:38:44,390 --> 00:38:46,190 из самого устройства. 857 00:38:46,190 --> 00:38:48,950 >> Так почему бы мне не взять удар в этом в первую очередь? 858 00:38:48,950 --> 00:38:53,100 И давайте идти вперед и бросить Вы на накладные расходы здесь. 859 00:38:53,100 --> 00:38:56,250 Так давайте поставим ноутбук Колтона здесь. 860 00:38:56,250 --> 00:38:58,360 У нас есть Андрей по телевизору. 861 00:38:58,360 --> 00:39:00,160 И что бы вы хотели, чтобы я сделал в первую очередь? 862 00:39:00,160 --> 00:39:02,409 >> Колтон: Идите вперед и просто положить руки над этим парнем 863 00:39:02,409 --> 00:39:04,430 и вы увидите некоторые сказочные блеск. 864 00:39:04,430 --> 00:39:07,230 >> Дэвид Дж Маланом: Очень приятно. 865 00:39:07,230 --> 00:39:11,110 Все это происходит в режиме реального времени. 866 00:39:11,110 --> 00:39:11,889 Хорошо. 867 00:39:11,889 --> 00:39:12,680 Ладно, и да. 868 00:39:12,680 --> 00:39:14,119 Так приятно. 869 00:39:14,119 --> 00:39:15,410 Ладно, что еще мы можем сделать? 870 00:39:15,410 --> 00:39:17,900 >> Колтон: Перейти к следующему экрану и видеть. 871 00:39:17,900 --> 00:39:19,136 >> Дэвид Дж Маланом: Ладно. 872 00:39:19,136 --> 00:39:21,780 >> Колтон: забавную игру где вы получите, чтобы сделать роботов. 873 00:39:21,780 --> 00:39:24,738 >> Дэвид Дж Маланом: Ладно, так это это поддельные руки, показывая, что мне делать. 874 00:39:24,738 --> 00:39:27,920 Колтон: Да Так что вперед и захватить один из блоков 875 00:39:27,920 --> 00:39:30,637 и положил его поверх тела, которые робота. 876 00:39:30,637 --> 00:39:32,137 Дэвид Дж Маланом: О, это моя рука. 877 00:39:32,137 --> 00:39:34,000 О. 878 00:39:34,000 --> 00:39:34,780 ОК, очаровательны. 879 00:39:34,780 --> 00:39:37,500 880 00:39:37,500 --> 00:39:38,650 Минуточку, ОК. 881 00:39:38,650 --> 00:39:41,320 Там мы идем. 882 00:39:41,320 --> 00:39:43,590 >> Колтон: Я сделал один на аварии. 883 00:39:43,590 --> 00:39:45,423 >> Дэвид Дж Маланом: ОК, я получу этот парень. 884 00:39:45,423 --> 00:39:45,923 Черт возьми! 885 00:39:45,923 --> 00:39:48,467 886 00:39:48,467 --> 00:39:51,550 Когда мы занимались этим в прошлом ночь, вы знаете, что это перешло в? 887 00:39:51,550 --> 00:39:54,285 >> Как это. 888 00:39:54,285 --> 00:39:55,490 Хорошо. 889 00:39:55,490 --> 00:39:55,990 Далее один? 890 00:39:55,990 --> 00:39:56,860 >> Колтон: Конечно. 891 00:39:56,860 --> 00:39:58,818 >> Дэвид Дж Маланом: Ладно, и есть третья. 892 00:39:58,818 --> 00:40:01,130 893 00:40:01,130 --> 00:40:01,674 Хорошо. 894 00:40:01,674 --> 00:40:03,215 Колтон: И в этом, вы получаете to-- 895 00:40:03,215 --> 00:40:04,923 Дэвид Дж Маланом: О, это один красиво. 896 00:40:04,923 --> 00:40:06,650 Колтон: --yeah, выбрать, кроме этого цветка. 897 00:40:06,650 --> 00:40:07,441 Дэвид Дж Маланом: ОК. 898 00:40:07,441 --> 00:40:11,170 899 00:40:11,170 --> 00:40:11,670 Нет? 900 00:40:11,670 --> 00:40:14,515 Пропущенный. 901 00:40:14,515 --> 00:40:15,570 >> Колтон: О, там вы идете. 902 00:40:15,570 --> 00:40:18,680 >> Дэвид Дж Маланом: ах, посмотрите на что. 903 00:40:18,680 --> 00:40:19,830 Очень мило. 904 00:40:19,830 --> 00:40:22,470 Ну, почему не "мы берем из одного добровольца здесь 905 00:40:22,470 --> 00:40:24,180 кто хотел бы прийти на до. 906 00:40:24,180 --> 00:40:27,500 Как насчет тут в зеленой зоне, не так ли? 907 00:40:27,500 --> 00:40:30,540 >> Ладно, и давайте have-- а не делать это, некоторые из вас 908 00:40:30,540 --> 00:40:34,590 может знаете эту игру here-- перерезать веревку, возможно? 909 00:40:34,590 --> 00:40:35,100 Посмотрим. 910 00:40:35,100 --> 00:40:37,320 У нас есть наши очки здесь? 911 00:40:37,320 --> 00:40:38,625 >> Хорошо. 912 00:40:38,625 --> 00:40:39,270 Спасибо. 913 00:40:39,270 --> 00:40:39,380 Как тебя зовут? 914 00:40:39,380 --> 00:40:40,350 >> АУДИТОРИЯ: Лаура. 915 00:40:40,350 --> 00:40:41,266 >> Дэвид Дж Маланом: Лаура? 916 00:40:41,266 --> 00:40:42,120 Приятно видеть. 917 00:40:42,120 --> 00:40:45,600 Если вы не возражаете, положив Google Glass за своими очками. 918 00:40:45,600 --> 00:40:46,970 Это Колтон. 919 00:40:46,970 --> 00:40:47,650 >> Колтон: Привет. 920 00:40:47,650 --> 00:40:48,140 Приятно познакомиться. 921 00:40:48,140 --> 00:40:49,600 >> Дэвид Дж Маланом: ОК, давай вокруг. 922 00:40:49,600 --> 00:40:52,516 Ладно, так что вы собираетесь сделать здесь, сыграв это раньше, 923 00:40:52,516 --> 00:40:55,650 является кладите руку на Leap Motion здесь. 924 00:40:55,650 --> 00:40:57,210 И теперь ваша стрелка должна двигаться. 925 00:40:57,210 --> 00:40:57,710 О, нет. 926 00:40:57,710 --> 00:40:58,066 >> АУДИТОРИЯ: Нет. 927 00:40:58,066 --> 00:40:58,780 >> Дэвид Дж Маланом: Мы не хочу, чтобы бросить еще. 928 00:40:58,780 --> 00:40:59,280 Хорошо, подождите. 929 00:40:59,280 --> 00:41:01,200 А здесь. 930 00:41:01,200 --> 00:41:03,530 Так заметить, как вы держите ваш палец над чем-то, 931 00:41:03,530 --> 00:41:06,750 мышь начинает идти зеленый, который является, как вы выберите. 932 00:41:06,750 --> 00:41:08,980 >> Так наведите курсор мыши на Play. 933 00:41:08,980 --> 00:41:10,970 И только один палец в порядке. 934 00:41:10,970 --> 00:41:13,869 А теперь нажмите на маленький зеленый парень слева. 935 00:41:13,869 --> 00:41:15,410 А теперь держать, пока она не заполнится зеленым. 936 00:41:15,410 --> 00:41:15,640 Хорошо. 937 00:41:15,640 --> 00:41:16,990 Теперь, вроде бы, уровень один наверху. 938 00:41:16,990 --> 00:41:20,190 >> АУДИТОРИЯ: Да, мы хотим первого уровня, здесь. 939 00:41:20,190 --> 00:41:21,660 >> Дэвид Дж Маланом: Хорошо. 940 00:41:21,660 --> 00:41:25,500 Итак, все, что вам сделать, перерезал веревку. 941 00:41:25,500 --> 00:41:28,240 Курсор это белая там. 942 00:41:28,240 --> 00:41:28,880 >> Очень мило. 943 00:41:28,880 --> 00:41:31,290 944 00:41:31,290 --> 00:41:32,790 Ладно, он собирается получить сложнее. 945 00:41:32,790 --> 00:41:34,800 Так держать палец на следующий сейчас. 946 00:41:34,800 --> 00:41:37,370 947 00:41:37,370 --> 00:41:39,030 Хорошо. 948 00:41:39,030 --> 00:41:39,999 Это один тяжело. 949 00:41:39,999 --> 00:41:40,966 >> АУДИТОРИЯ: Вот дерьмо. 950 00:41:40,966 --> 00:41:41,466 Хорошо. 951 00:41:41,466 --> 00:41:42,466 Она хочет, чтобы идти по этому пути. 952 00:41:42,466 --> 00:41:44,890 Вот дерьмо, that-- 953 00:41:44,890 --> 00:41:47,120 >> Дэвид Дж Маланом: Да. 954 00:41:47,120 --> 00:41:50,700 Вторичная цель получить все звезды. 955 00:41:50,700 --> 00:41:53,920 Ладно, следующий. 956 00:41:53,920 --> 00:41:57,504 >> Давайте посмотрим, если вы можете получить этот третий. 957 00:41:57,504 --> 00:41:58,004 Хорошо. 958 00:41:58,004 --> 00:42:05,980 959 00:42:05,980 --> 00:42:06,840 Хорошо, иди туда. 960 00:42:06,840 --> 00:42:08,850 >> Конечно. 961 00:42:08,850 --> 00:42:11,230 О, очень хорошо. 962 00:42:11,230 --> 00:42:11,930 Хорошо. 963 00:42:11,930 --> 00:42:13,534 >> Так почему бы нам не отложить здесь сегодня? 964 00:42:13,534 --> 00:42:15,200 Пусть кто-нибудь пришел на до, кто хочет играть. 965 00:42:15,200 --> 00:42:16,880 Большое спасибо Лоре наш волонтер. 966 00:42:16,880 --> 00:42:18,730 И мы будем видеть вас в понедельник. 967 00:42:18,730 --> 00:42:21,190 >> АУДИТОРИЯ: Вы, наверное, хотите их обратно. 968 00:42:21,190 --> 00:42:23,640 >> СПИКЕР 2: На следующем CS50-- 969 00:42:23,640 --> 00:42:35,222