1 00:00:00,000 --> 00:00:39,630 2 00:00:39,630 --> 00:00:41,880 DAVID J. Malan: Добре, така че това тук е рамото Myo 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 трябваше качи и че песен вече наредени на опашка нагоре. 8 00:00:57,230 --> 00:01:00,270 Вместо да ме demoing това, Колтън е бил в лабораторията 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 >> АУДИТОРИЯ: Uh, Мария. 15 00:01:14,800 --> 00:01:16,550 >> DAVID J. Malan: Мария, е хубаво да те видя. 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 >> COLTON: Здравейте, хубаво е да се запознаем. 20 00:01:23,050 --> 00:01:24,330 >> DAVID J. Malan: All Добре, така че първата стъпка, ние сме 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 >> COLTON: Първо ще трябва да кука това в нещата. 26 00:01:36,340 --> 00:01:37,170 >> DAVID J. Malan: OK. 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 >> COLTON: Нека да направим това. 30 00:01:42,740 --> 00:01:46,500 >> DAVID J. Malan: А междувременно, така че че всеки може да получите по-близо поглед, 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 >> Така че Колтън се регистрирате устройството сега като Myo свързан с този кабел. 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 OK, продължаваме да опитваме. 42 00:02:30,090 --> 00:02:31,860 >> COLTON: Върви по този начин. 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 >> DAVID J. Malan: OK. 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 >> MARIA: OK. 51 00:02:41,749 --> 00:02:42,540 DAVID J. Malan: No. 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 OK. 60 00:03:01,170 --> 00:03:02,790 Thumb на Пинки. 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 Wave право. 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 >> COLTON: Да, това е странно. 68 00:03:19,665 --> 00:03:21,790 DAVID J. Malan: Wave да правото и да се премести напред. 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 >> DAVID J. Malan: Нуждаете се от помощ? 73 00:03:28,430 --> 00:03:30,027 >> COLTON: Значи ти започваш по този начин. 74 00:03:30,027 --> 00:03:31,860 МАРИЯ: Това е превръщането на друго нещо, все пак. 75 00:03:31,860 --> 00:03:32,390 COLTON: Така е. 76 00:03:32,390 --> 00:03:34,250 DAVID J. Malan: Да, аз не знам защо се показва ви leftie. 77 00:03:34,250 --> 00:03:36,458 COLTON: Защо не try-- Просто се опитвам става по този начин. 78 00:03:36,458 --> 00:03:38,910 79 00:03:38,910 --> 00:03:40,090 >> DAVID J. Malan: Не? 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 >> MARIA: Съжалявам. 84 00:03:49,670 --> 00:03:51,170 DAVID J. Malan: Това не е по твоя вина. 85 00:03:51,170 --> 00:03:53,018 COLTON: Това е добре. 86 00:03:53,018 --> 00:03:55,430 DAVID J. Malan: All Right. 87 00:03:55,430 --> 00:03:56,220 Well-- 88 00:03:56,220 --> 00:03:57,620 >> MARIA: Трябва ли да пропуснете това, тогава? 89 00:03:57,620 --> 00:03:59,620 DAVID J. Malan: Да, нека ви изпускам куката. 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 >> MARIA: Благодаря ви. 101 00:04:28,770 --> 00:04:30,390 >> DAVID J. Malan: Благодаря ви. 102 00:04:30,390 --> 00:04:34,945 Ние ще се придържа към това, но ние ще дадем you-- как за стрес топка тук? 103 00:04:34,945 --> 00:04:38,620 О, and-- 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 че сме направили там по-рано, невероятно TV 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 >> SPEAKER 1: Уважаеми дами и господа, магьосник на име Джош. 110 00:04:54,472 --> 00:05:04,710 111 00:05:04,710 --> 00:05:08,050 >> DAVID J. Malan: И както изглежда, това е нещо за мен текст по време на лекция в момента. 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 >> Така че може да сте прочели през последните месец че това господа тук, Steve 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 се озова в Stanford 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 >> Дълга история кратко, Steve е в крайна сметка спечели, 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 000 служители през последните няколко години. 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 усещане за това колко много енергия Steve носи на всяко представяне той дава. 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 >> -Hey, 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 One Microsoft, една стратегия, един team-- съсредоточени, дисциплинирани, професионални, 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 DAVID J. Malan: Така че ние сме толкова удоволствието да обяви, че Стив ще се присъедини към нас 178 00:08:08,050 --> 00:08:13,320 тук в CS50 следващата сряда в на обичайното място и време тук. 179 00:08:13,320 --> 00:08:14,750 Space-вероятно ще бъде ограничено. 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 Сега, в други новини, аз се случи да попаднете това в The Crimson просто 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 Мисля, че моята първа година, действително да се регистрирате за Harvard Computer Society, които 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 >> АУДИТОРИЯ: Markup за уебсайтове. 227 00:10:22,002 --> 00:10:23,460 DAVID J. Malan: Markup за уебсайт. 228 00:10:23,460 --> 00:10:27,100 Така че това е език за маркиране, че ви позволява да се структурира една уеб страница. 229 00:10:27,100 --> 00:10:30,040 Header отива тук, заглавие отива тук, тялото отива тук. 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 DAVID J. Malan: Добре, добре. 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 DAVID J. Malan: Perfect. 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 >> И ние можем да направим запитвания към други сървъри като Yahoos 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 DAVID J. Malan: Протокол използва, за да говори с бази данни. 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-- Document 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 и отново, тези послания са най-вероятно, като, LI таг, елемент от списъка тагове, може би. 341 00:15:35,880 --> 00:15:37,940 >> Или може би те са просто divs, че продължават да се появяват 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 Нека кликнете Register. 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 Но това, което ключовата Takeaway тук е, че 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 One, това е малко странно гледам, със сигурност в сравнение с 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 >> Но това всъщност е OK. 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 И след това е малко по-секси, защото аз 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 Нека отметка в квадратчето, кликнете Register. 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 >> DAVID J. Malan: Правилно. 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 Има предвид, че други ценности, на разбира се, са текст, известен още като струни. 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 DAVID J. Malan: Добре. 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 >> Но има уловка тук, и това е вид досадно нещо, за което. 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 system-- 543 00:24:10,270 --> 00:24:14,410 Content Management System--, че е прилагане на системата за удостоверяване, 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 DAVID J. Malan: 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-- Asynchronous JavaScript и XML, където 588 00:26:07,880 --> 00:26:10,530 Х за 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, Кеймбридж, Масачузетс, 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 приемаме за даденост, че можем да отидем около Cambridge доста бързо 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 DAVID J. Malan: The пиксели не се освежават. 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 Oxford Street. 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-- много голям американски ISP. 632 00:27:52,680 --> 00:27:56,355 Можете, когато се регистрирате за нов кабел модем услуга или кабелна TV услуга, 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 Oxford, след това ви показва всяка улица 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 е един, къща Winthrop, а името е 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 Така синтаксиса, доста подобно на both-- да 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 И аз имам един бутон Submit. 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 забележите това, което съм направил до тук, ако аз превъртете до главата на тази страница. 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 Concatenation. 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 >> Dollar знак просто изглежда готино. 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 преминаване в този символ като FREE или 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 не ограничени само до Chrome или други подобни. 844 00:38:00,240 --> 00:38:03,530 >> В действителност, if-- Колтън, бихте искали да се присъединят към нас обратно тук 845 00:38:03,530 --> 00:38:06,100 с вашата лаборатория код и Chang, както и? 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 Имаме Andrew на телевизора. 861 00:38:58,360 --> 00:39:00,160 И това, което бихте искали от мен да направя първо? 862 00:39:00,160 --> 00:39:02,409 >> COLTON: Давай напред и просто сложи ръцете си върху този човек 863 00:39:02,409 --> 00:39:04,430 и вие ще видите някои баснословен блясък. 864 00:39:04,430 --> 00:39:07,230 >> DAVID J. Malan: Много хубаво. 865 00:39:07,230 --> 00:39:11,110 Всичко това се случва в реално време. 866 00:39:11,110 --> 00:39:11,889 OK. 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 >> COLTON: Отидете към следващия екран и ще видите. 871 00:39:17,900 --> 00:39:19,136 >> DAVID J. Malan: Добре. 872 00:39:19,136 --> 00:39:21,780 >> COLTON: А забавно малка игра където можете да получите да се роботи. 873 00:39:21,780 --> 00:39:24,738 >> DAVID J. Malan: Добре, така че това е фалшив ръцете ми показват какво да правя. 874 00:39:24,738 --> 00:39:27,920 COLTON: Да Така че продължавайте напред и вземете един от блоковете 875 00:39:27,920 --> 00:39:30,637 и го постави на върха на тялото, че робота. 876 00:39:30,637 --> 00:39:32,137 DAVID J. Malan: О, там е моята ръка. 877 00:39:32,137 --> 00:39:34,000 О. 878 00:39:34,000 --> 00:39:34,780 OK, очарователни. 879 00:39:34,780 --> 00:39:37,500 880 00:39:37,500 --> 00:39:38,650 Чакай малко, OK. 881 00:39:38,650 --> 00:39:41,320 Има отидем. 882 00:39:41,320 --> 00:39:43,590 >> COLTON: Направих една на злополука. 883 00:39:43,590 --> 00:39:45,423 >> DAVID J. Malan: ОК, аз ще получа този човек. 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 OK. 889 00:39:55,490 --> 00:39:55,990 Следваща? 890 00:39:55,990 --> 00:39:56,860 >> COLTON: Разбира се. 891 00:39:56,860 --> 00:39:58,818 >> DAVID J. Malan: Добре, и там е една трета. 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 COLTON: И в този един, можете да получите to-- 895 00:40:03,215 --> 00:40:04,923 DAVID J. Malan: О, това е красива. 896 00:40:04,923 --> 00:40:06,650 COLTON: --yeah, вземете освен това цвете. 897 00:40:06,650 --> 00:40:07,441 DAVID J. Malan: OK. 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 >> COLTON: О, там ще отида. 902 00:40:15,570 --> 00:40:18,680 >> DAVID J. Malan: Ах, Погледнете това. 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 >> OK. 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 >> DAVID J. Malan: Лора? 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 >> COLTON: Hi. 920 00:40:47,650 --> 00:40:48,140 Приятно ми е да се запознаем. 921 00:40:48,140 --> 00:40:49,600 >> DAVID J. Malan: Добре, хайде наоколо. 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 >> АУДИТОРИЯ: No. 927 00:40:58,066 --> 00:40:58,780 >> DAVID J. Malan: Ние не искам още да се откажат. 928 00:40:58,780 --> 00:40:59,280 OK, изчакайте. 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 >> Така мишката върху Пусни. 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 >> DAVID J. Malan: Добре. 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 OK. 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 >> DAVID J. Malan: Да. 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 OK, отидете там. 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 Благодаря много за Laura нашия доброволец. 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 >> SPEAKER 2: На следващото CS50-- 969 00:42:23,640 --> 00:42:35,222