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