1 00:00:00,000 --> 00:00:02,862 >> [Грає музика] 2 00:00:02,862 --> 00:00:10,030 3 00:00:10,030 --> 00:00:11,580 >> Девід Малан: Це CS50. 4 00:00:11,580 --> 00:00:12,880 Це початок тижня дев'ятій. 5 00:00:12,880 --> 00:00:15,797 І це те, що матиме був 200-річчя г Буля. 6 00:00:15,797 --> 00:00:17,630 Так що це хлопці кому ми згадували 7 00:00:17,630 --> 00:00:21,800 досить кілька разів про використання Логічні змінні істинні і помилкові, 8 00:00:21,800 --> 00:00:22,910 1 і 0 тощо. 9 00:00:22,910 --> 00:00:25,270 І це було Google, данину з ним сьогодні. 10 00:00:25,270 --> 00:00:26,489 Він перетворився б 200. 11 00:00:26,489 --> 00:00:28,280 Так що, якщо ви хочете, щоб приєднатися до нас на обід CS50, 12 00:00:28,280 --> 00:00:30,279 поглянути на посилання на веб-сайті курсу. 13 00:00:30,279 --> 00:00:33,580 І такі особи, як і друзі це чекає вас тут, в Кембриджі. 14 00:00:33,580 --> 00:00:35,360 Особи, як вони чекають Вас в Нью-Хейвені. 15 00:00:35,360 --> 00:00:37,800 І справді, Кен Нью-Гейвен люб'язно 16 00:00:37,800 --> 00:00:41,594 те, що називається Анімовані GIF Ілая тут недавно lunch-- GIF ще 17 00:00:41,594 --> 00:00:44,260 інший графічний формат файлу, з якою ви familiar--, що 18 00:00:44,260 --> 00:00:46,300 виглядає трохи щось подібне. 19 00:00:46,300 --> 00:00:48,179 Так просто послідовність of-- ОК. 20 00:00:48,179 --> 00:00:49,720 Тут ніхто в Кембриджі чи не сміється. 21 00:00:49,720 --> 00:00:51,720 Але в Нью-Хейвені, це це дійсно смішно, чи не так? 22 00:00:51,720 --> 00:00:52,350 Добре. 23 00:00:52,350 --> 00:00:53,940 >> Так що приєднуйтесь до нас там. 24 00:00:53,940 --> 00:00:55,900 Тут, в Гарварді, Зокрема, це середа, 25 00:00:55,900 --> 00:00:59,480 якщо ви студент-другокурсник або першокурсник even-- або навіть junior-- мислення рішень 26 00:00:59,480 --> 00:01:01,563 перемикач в комп'ютер наука, знати, що там буде 27 00:01:01,563 --> 00:01:04,440 Будьте CS консультування справедливо це Середа, незабаром після класу 28 00:01:04,440 --> 00:01:08,040 в 4:00 вечора в комп'ютері наука будівлю Максвелл Дворкін. 29 00:01:08,040 --> 00:01:11,890 Ми поставити це на курс-х сайт завтра, як добре. 30 00:01:11,890 --> 00:01:14,430 Пончики, я сказав, буде поданий. 31 00:01:14,430 --> 00:01:15,180 >> Добре. 32 00:01:15,180 --> 00:01:18,790 Так смішно story-- я тикати навколо в Інтернеті, 33 00:01:18,790 --> 00:01:23,575 і я знайшов деякі старі архіви мого колишнього сайту. 34 00:01:23,575 --> 00:01:25,950 І виходить out-- навколо цього Час, здається, дуже своєчасно 35 00:01:25,950 --> 00:01:28,910 так я розумію, що вибори UC близько готуватися знову. 36 00:01:28,910 --> 00:01:32,230 Так що я побіг за UC, втратив нещасно. 37 00:01:32,230 --> 00:01:34,770 І, може бути, це було в частині, чому. 38 00:01:34,770 --> 00:01:37,600 Так що це був мій веб-сайт в той час. 39 00:01:37,600 --> 00:01:40,477 З якоїсь причини, я думав, що це було гарна ідея, перш, ніж говорити людям, 40 00:01:40,477 --> 00:01:43,310 що моя платформа була, і чому вони повинні голосувати за мене, що у них є 41 00:01:43,310 --> 00:01:47,770 натиснути, щоб увійти, щоб знайти, що інформація, яка в ретроспективі це 42 00:01:47,770 --> 00:01:48,660 вид моторошний. 43 00:01:48,660 --> 00:01:50,910 Я дійсно не знаю, що це було. 44 00:01:50,910 --> 00:01:53,140 >> Але це, звичайно, не допомогти моїй кампанії. 45 00:01:53,140 --> 00:01:56,874 Я також виявив, що старший год-- мене була ця календар Маппет. 46 00:01:56,874 --> 00:01:58,540 Маппет-шоу були почасти в моді в той час. 47 00:01:58,540 --> 00:01:59,456 Або, може бути, вони не були. 48 00:01:59,456 --> 00:02:01,790 Я був календар Маппет тоді. 49 00:02:01,790 --> 00:02:04,860 І я думав, що це було б здорово, щоб ім'я мій комп'ютер в мережі Гарварда 50 00:02:04,860 --> 00:02:07,460 frogman.student.harvard.edu. 51 00:02:07,460 --> 00:02:10,370 У той час, ми все однозначно ідентифікуються імена хостів. 52 00:02:10,370 --> 00:02:13,150 А ви могли б вибрати кілька марнославство ім'я замість свого імені. 53 00:02:13,150 --> 00:02:15,580 І я пішов з плавця з деяких причин. 54 00:02:15,580 --> 00:02:19,040 >> І тоді я started-- я провів багато часу натискання через ці посилання 55 00:02:19,040 --> 00:02:20,280 цього ранку. 56 00:02:20,280 --> 00:02:24,690 І це була моя сторінка о, який в даний час вид здається чарівні. 57 00:02:24,690 --> 00:02:28,210 Але це також свідчить про те, щоб просто як далеко технологія прийшла. 58 00:02:28,210 --> 00:02:30,310 Я маю на увазі, тому в день, 486 було щось. 59 00:02:30,310 --> 00:02:34,090 У ці дні, це супер, супер, супер повільно і добре менш 60 00:02:34,090 --> 00:02:36,216 ніж ви могли б мати у своєму власні кишені в ці дні. 61 00:02:36,216 --> 00:02:38,465 Там більше там, що був ще більш ніяково. 62 00:02:38,465 --> 00:02:39,770 Тому я залишаю його на що. 63 00:02:39,770 --> 00:02:42,640 Але це був мій перший набіг в web-- про, немає. 64 00:02:42,640 --> 00:02:43,180 Це не було. 65 00:02:43,180 --> 00:02:47,000 Мій перший реальний набіг в веб-програмуванні був цей сайт, який я просто забув. 66 00:02:47,000 --> 00:02:50,620 У якийсь момент, я дізнався, як зробити повторювані фонові зображення. 67 00:02:50,620 --> 00:02:55,260 І так я знайшов це черепиця ефективно, як хокеїста, футбол, гольф і 68 00:02:55,260 --> 00:02:58,040 куля, або що б це не для сайту Фрош IMS. 69 00:02:58,040 --> 00:03:01,390 І це було насправді, дійсно перший веб-проект на основі я взяв on-- 70 00:03:01,390 --> 00:03:03,880 Я думаю, що, може бути, студент-другокурсник рік, молодший год-- 71 00:03:03,880 --> 00:03:07,622 після того, CS50 і CS51, один із загальних подальших по класах. 72 00:03:07,622 --> 00:03:09,330 Я помітив, дивлячись у в архівах 73 00:03:09,330 --> 00:03:12,150 що один з моїх наступників і друзі, Лі, начебто змінилося 74 00:03:12,150 --> 00:03:13,480 авторське право до себе. 75 00:03:13,480 --> 00:03:17,520 Але це було дійсно те, що Я повинен володіти замішання. 76 00:03:17,520 --> 00:03:19,370 Але в той час, це був перший сайт, 77 00:03:19,370 --> 00:03:22,220 як я сказав кілька тижнів тому, за допомогою якого міг першокурсник 78 00:03:22,220 --> 00:03:24,350 зареєструватися очної спорту тут. 79 00:03:24,350 --> 00:03:27,950 І так виходить, що фонові зображення 80 00:03:27,950 --> 00:03:29,530 так не така хороша ідея. 81 00:03:29,530 --> 00:03:31,840 Але полотно було новим, і все, що ми експериментували. 82 00:03:31,840 --> 00:03:34,310 І це те, що я мабуть, зробив в той час. 83 00:03:34,310 --> 00:03:34,810 Добре. 84 00:03:34,810 --> 00:03:38,020 Так що без подальших церемоній, ми перемикаємо Шестерні сьогодні, щоб дати вам, насправді, 85 00:03:38,020 --> 00:03:42,250 заключна частина, що ви могли б знайти особливо корисно для кінцевих проектів 86 00:03:42,250 --> 00:03:44,780 але також, що почне зробити весь світ павутину 87 00:03:44,780 --> 00:03:46,680 відчуваю себе трохи більш зрозумілим. 88 00:03:46,680 --> 00:03:49,460 Справді, ми збираємося представити ще одну мову програмування 89 00:03:49,460 --> 00:03:52,474 називається JavaScript, що схоже і відрізняється по-різному 90 00:03:52,474 --> 00:03:54,140 від мовах ми дивилися на досі. 91 00:03:54,140 --> 00:03:55,807 >> Так C, нагадаємо, це компільований мову. 92 00:03:55,807 --> 00:03:57,473 Ви повинні запустити його через компілятор. 93 00:03:57,473 --> 00:03:59,810 Ви вихідний код об'єкта Код, або нулів і одиниць. 94 00:03:59,810 --> 00:04:03,000 І ті й нулі ті, які ваш процесор, Центральний процесор, 95 00:04:03,000 --> 00:04:04,360 насправді зрозуміти. 96 00:04:04,360 --> 00:04:06,610 PHP, навпаки, не компільований мову. 97 00:04:06,610 --> 00:04:08,772 Це що? 98 00:04:08,772 --> 00:04:09,980 Це інтерпретована мова. 99 00:04:09,980 --> 00:04:11,750 Так що якась програма називається інтерпретатор, який 100 00:04:11,750 --> 00:04:13,708 повинен прочитати it-- зверху знизу, зліва right-- 101 00:04:13,708 --> 00:04:16,519 і з'ясувати, що всі ваш синтаксис робить і означає, 102 00:04:16,519 --> 00:04:20,200 чи є це петля або стан або будь-яке інше число програмування 103 00:04:20,200 --> 00:04:20,740 будує. 104 00:04:20,740 --> 00:04:22,210 Так ось це інтерпретована мова. 105 00:04:22,210 --> 00:04:23,910 >> Тоді ми ввели HTML. 106 00:04:23,910 --> 00:04:26,440 І HTML навіть не мова програмування. 107 00:04:26,440 --> 00:04:28,110 Ми б назвали це що? 108 00:04:28,110 --> 00:04:31,650 Мова розмітки, який знаходиться всього свого роду химерний спосіб сказати це 109 00:04:31,650 --> 00:04:35,820 не програмне конструкції, такі як ми бачили, навіть назад в день нуля. 110 00:04:35,820 --> 00:04:36,720 Там немає петель. 111 00:04:36,720 --> 00:04:37,920 Там немає умов. 112 00:04:37,920 --> 00:04:40,820 Це справді є мова про розмітку даних 113 00:04:40,820 --> 00:04:43,620 і форматування або структурування його в деякому роді. 114 00:04:43,620 --> 00:04:46,147 >> УС, тим часом, аналогічно не є мовою програмування. 115 00:04:46,147 --> 00:04:47,730 Це навіть більш естетично орієнтованої. 116 00:04:47,730 --> 00:04:50,470 І це дозволяє сортувати тонкої настройки такі речі, як розмір шрифту і кольору 117 00:04:50,470 --> 00:04:51,850 та розміщення, і все, що. 118 00:04:51,850 --> 00:04:52,370 Тоді ми мали 119 00:04:52,370 --> 00:04:53,160 >> SQL. 120 00:04:53,160 --> 00:04:56,010 Так SQL дійсно програмування мову в деякому розумінні, 121 00:04:56,010 --> 00:04:59,330 хоча з урахуванням спеціально для баз даних. 122 00:04:59,330 --> 00:05:03,347 Але навіть якщо ми тільки познайомити вас з вибрати і вставити і видалити і оновити 123 00:05:03,347 --> 00:05:05,430 і кілька інших, Виявляється, можна насправді 124 00:05:05,430 --> 00:05:07,380 написати функції або процедури, оскільки вони 125 00:05:07,380 --> 00:05:11,270 називається, в SQL, які виглядають і діють зовсім як функції PHP і C. 126 00:05:11,270 --> 00:05:12,390 Так знаєте, що існує. 127 00:05:12,390 --> 00:05:15,348 Але ми навіть не возитися з ними як ми тільки що подряпати поверхню тут. 128 00:05:15,348 --> 00:05:18,600 І тоді JavaScript, останній з наші мови офіційно представила. 129 00:05:18,600 --> 00:05:21,029 Так JavaScript, теж інтерпретована мова. 130 00:05:21,029 --> 00:05:23,070 І тих, хто знайомий, зробити Ви хочете, щоб відрізнити його 131 00:05:23,070 --> 00:05:26,960 з деякими характеристика і від C і PHP? 132 00:05:26,960 --> 00:05:28,300 Чим вона відрізняється? 133 00:05:28,300 --> 00:05:29,650 >> АУДИТОРІЯ: Це не складено. 134 00:05:29,650 --> 00:05:29,930 >> Девід Малан: раз сказати? 135 00:05:29,930 --> 00:05:31,200 >> АУДИТОРІЯ: Це не складено. 136 00:05:31,200 --> 00:05:31,930 >> Девід Малан: Це не складено. 137 00:05:31,930 --> 00:05:33,450 Так що, теж інтерпретується. 138 00:05:33,450 --> 00:05:34,760 Так що це не складено. 139 00:05:34,760 --> 00:05:37,210 Але що робить його трохи як PHP. 140 00:05:37,210 --> 00:05:39,545 Але він як і раніше відрізняється від PHP в деякому вражаючим чином 141 00:05:39,545 --> 00:05:40,920 принаймні, в тому, як ми будемо його використовувати. 142 00:05:40,920 --> 00:05:41,205 Так? 143 00:05:41,205 --> 00:05:41,940 >> АУДИТОРІЯ: Це працює на стороні клієнта. 144 00:05:41,940 --> 00:05:44,000 >> Девід Малан: Вона працює на стороні клієнта, зазвичай. 145 00:05:44,000 --> 00:05:47,190 Це дійсно відмінна характерно для нас прямо зараз. 146 00:05:47,190 --> 00:05:51,170 С була на стороні сервера в тому сенсі, що ми зробили все, що в CS50 IDE. 147 00:05:51,170 --> 00:05:53,630 PHP цих пір було серверний оскільки 148 00:05:53,630 --> 00:05:56,550 як це, теж, отримує interpreted-- не складений, але interpreted-- 149 00:05:56,550 --> 00:06:00,690 всередині CS50 IDE, що, звичайно, просто сервер або сервери в хмарі. 150 00:06:00,690 --> 00:06:03,070 >> Але в JavaScript, навіть хоча вам ви збираєтеся 151 00:06:03,070 --> 00:06:07,000 щоб почати писати його, скажімо, PSET вісім і, можливо, остаточне projects-- ви 152 00:06:07,000 --> 00:06:09,620 збирається вірно це в CS50 IDE і зберегти його 153 00:06:09,620 --> 00:06:14,760 файлів, що знаходяться CS50 IDE, IDE CS50 і, у свою чергу, хмара серверів 154 00:06:14,760 --> 00:06:19,160 на якому він розміщується, не збирається інтерпретувати або виконувати код. 155 00:06:19,160 --> 00:06:23,880 Швидше за все, це буде відправлено у незмінному вигляді до браузері. 156 00:06:23,880 --> 00:06:26,990 І це те буде І.Є. або Chrome або Firefox або Safari 157 00:06:26,990 --> 00:06:30,697 або щось насправді інтерпретує, що це зверху вниз, зліва направо. 158 00:06:30,697 --> 00:06:32,780 Так Основними відмітними характерно для сьогоднішнього дня 159 00:06:32,780 --> 00:06:36,110 є те, що JavaScript є стороні клієнта і PHP, наприклад, 160 00:06:36,110 --> 00:06:37,690 Був на стороні сервера. 161 00:06:37,690 --> 00:06:40,920 Тепер, це має цікаві наслідки для, як, інтелектуальної власності 162 00:06:40,920 --> 00:06:42,660 і хто можете побачити код. 163 00:06:42,660 --> 00:06:44,860 І справді, ви можете піти в Інтернеті і подивитися, найбільш 164 00:06:44,860 --> 00:06:47,530 будь-який код, який хтось написано в JavaScript. 165 00:06:47,530 --> 00:06:50,230 Іноді це читається, іноді це затемнений. 166 00:06:50,230 --> 00:06:52,550 Але про це в свій час. 167 00:06:52,550 --> 00:06:57,530 >> Так JavaScript, досить красиво, це супер схоже, синтаксично, щоб С. 168 00:06:57,530 --> 00:06:59,364 І так само, як PHP, немає Основна функція. 169 00:06:59,364 --> 00:07:02,113 Якщо ви хочете, щоб почати писати Код JavaScript, як ви побачите сьогодні, 170 00:07:02,113 --> 00:07:03,270 Ви просто почати писати. 171 00:07:03,270 --> 00:07:06,910 Але це, ви побачите, зокрема, корисно в контексті веб-браузерів. 172 00:07:06,910 --> 00:07:09,820 Тим не менш, мій маленький disclaimer-- зазвичай earlier-- 173 00:07:09,820 --> 00:07:13,790 було сказати, що ви можете більш сьогодні використання JavaScript на стороні сервера 174 00:07:13,790 --> 00:07:17,655 за допомогою фантазії рамки під назвою Node.js що деякі з власних додатків CS50 в 175 00:07:17,655 --> 00:07:18,280 написані на. 176 00:07:18,280 --> 00:07:20,640 Перевірте 50 фактично використовує Node.js. 177 00:07:20,640 --> 00:07:24,140 Але ми збираємося зосередитися на JavaScript на стороні клієнта тут на. 178 00:07:24,140 --> 00:07:26,750 >> Так ось набір умов в PHP. 179 00:07:26,750 --> 00:07:29,350 На жаль, насправді in--, що Заява, теж правильно. 180 00:07:29,350 --> 00:07:32,200 Тут же набір умови в JavaScript. 181 00:07:32,200 --> 00:07:35,560 Синтаксично це ідентична С і PHP. 182 00:07:35,560 --> 00:07:39,040 Вирази г Буля є, Аналогічно, синтаксично 183 00:07:39,040 --> 00:07:41,190 ідентичні як C і PHP. 184 00:07:41,190 --> 00:07:44,100 У нас також є перемикачі в JavaScript, що виглядають ідентично. 185 00:07:44,100 --> 00:07:46,350 У нас є для петель, які структуровані однаково, 186 00:07:46,350 --> 00:07:48,140 в той час як петлі, робити, поки петлі. 187 00:07:48,140 --> 00:07:49,980 >> Цей трохи відрізняється. 188 00:07:49,980 --> 00:07:53,120 PHP мав для кожної конструкції що ви могли б використовувати 189 00:07:53,120 --> 00:07:55,320 або будуть використовувати в PSET сьомій, може бути. 190 00:07:55,320 --> 00:07:59,460 JavaScript має цю спеціальну версію для того, де ви в буквальному сенсі щось сказати 191 00:07:59,460 --> 00:08:03,864 як для змінної ключ в об'єкт, який дуже коротким способом сказати, 192 00:08:03,864 --> 00:08:06,780 якщо я отримав object-- і ми говорити про них ще раз в moment-- 193 00:08:06,780 --> 00:08:10,370 і я хочу, щоб перебрати всі з пар ключ-значення всередині, 194 00:08:10,370 --> 00:08:13,620 Я не повинні з'ясувати, як чисельно індексувати їх з нуля, однієї, 195 00:08:13,620 --> 00:08:14,580 два, три. 196 00:08:14,580 --> 00:08:15,900 >> Я можу сказати, що це в буквальному сенсі. 197 00:08:15,900 --> 00:08:20,740 І на кожній ітерації, JavaScript для мене буде оновлювати ключ змінної 198 00:08:20,740 --> 00:08:24,810 щоб бути першим ключем, то в наступному ключ, то наступний ключ, то наступний ключ, 199 00:08:24,810 --> 00:08:25,510 і так далі. 200 00:08:25,510 --> 00:08:30,000 І я можу отримати на його вартості обробкою об'єкт в JavaScript, як ми побачимо, 201 00:08:30,000 --> 00:08:32,584 неначе що це Асоціативний масив в PHP. 202 00:08:32,584 --> 00:08:35,750 Справді, якщо ви, нарешті, загорнутий ваш проти того, що навколо асоціативний масив 203 00:08:35,750 --> 00:08:40,140 в PHP, ви можете думати про нього, як зараз ідентичні об'єкта в JavaScript. 204 00:08:40,140 --> 00:08:42,030 Але це трохи спрощення. 205 00:08:42,030 --> 00:08:47,230 >> Масиви дивіться, досить красиво, ідентичні в PHP для одного символу, за винятком. 206 00:08:47,230 --> 00:08:51,425 Там одна річ, вистачає тут що ми бачили минулого тижня з PHP. 207 00:08:51,425 --> 00:08:52,050 Що опущений? 208 00:08:52,050 --> 00:08:53,310 Так? 209 00:08:53,310 --> 00:08:54,090 Немає знак долара. 210 00:08:54,090 --> 00:08:56,240 Так ми повернулися до більш нормальним світ, де 211 00:08:56,240 --> 00:08:58,050 змінні не мають знаки долара. 212 00:08:58,050 --> 00:09:00,810 Але ви префікс їх з Вар, зазвичай. 213 00:09:00,810 --> 00:09:02,230 І вар означає змінну. 214 00:09:02,230 --> 00:09:06,440 І так само, як PHP є вільно typed-- якої є види, 215 00:09:06,440 --> 00:09:10,120 Є числа і рядки і плаває і так forth-- 216 00:09:10,120 --> 00:09:11,570 JavaScript аналогічно має види. 217 00:09:11,570 --> 00:09:15,470 Але це слабо типізований, що ми, програмістам не потрібно вказувати їх. 218 00:09:15,470 --> 00:09:18,980 Ми просто повинні бути в курсі що існують різні типи. 219 00:09:18,980 --> 00:09:21,690 >> Змінні, meanwhile-- ось як ми могли б оголосити "привіт, світ" 220 00:09:21,690 --> 00:09:22,230 у вигляді рядка. 221 00:09:22,230 --> 00:09:24,890 Зверніть увагу, що це збігається з PHP, але не знак долара. 222 00:09:24,890 --> 00:09:27,120 І це те, що ми почати бачити більше сьогодні, 223 00:09:27,120 --> 00:09:30,990 в результаті чого у вас є об'єкт з ключами і значеннями. 224 00:09:30,990 --> 00:09:32,990 І якщо ви хочете, щоб спробувати вивести з останнього week-- 225 00:09:32,990 --> 00:09:34,730 синтаксис трохи відрізняється. 226 00:09:34,730 --> 00:09:39,740 Але трохи розсудливості check-- скільки ключі це об'єкт, здається, є? 227 00:09:39,740 --> 00:09:40,850 Так я бачу чотири. 228 00:09:40,850 --> 00:09:43,560 Я бачу два. 229 00:09:43,560 --> 00:09:44,680 >> Так це насправді два. 230 00:09:44,680 --> 00:09:47,260 Так що це колекція з двох пар ключ-значення. 231 00:09:47,260 --> 00:09:49,820 Ключ символ, значення якого FB. 232 00:09:49,820 --> 00:09:52,620 Ключ ціна, значення якого 101.53. 233 00:09:52,620 --> 00:09:54,230 Так що ті дві пари ключ-значення. 234 00:09:54,230 --> 00:09:58,120 І пам'ятайте, PHP-- і це знову тільки вид синтаксичної різниці. 235 00:09:58,120 --> 00:10:00,170 Це не все, що інтелектуально цікавим. 236 00:10:00,170 --> 00:10:04,610 PHP міг би написати це ж річ, як follows-- цитатою, дорівнює. 237 00:10:04,610 --> 00:10:06,730 І я змінити їх на квадратні дужки. 238 00:10:06,730 --> 00:10:11,240 І тоді я можу змінити це в лапках слово, "ціна." 239 00:10:11,240 --> 00:10:12,500 І тоді я не використовувати двокрапку. 240 00:10:12,500 --> 00:10:15,060 Що я використовую минулого тижня? 241 00:10:15,060 --> 00:10:18,290 Так, знак рівності стрілка фанки позначення. 242 00:10:18,290 --> 00:10:21,470 >> І тоді я зробив те ж саме тут. 243 00:10:21,470 --> 00:10:23,580 Те ж саме тут. 244 00:10:23,580 --> 00:10:24,240 І це все. 245 00:10:24,240 --> 00:10:27,752 Так що це нормально, якщо це не має дійсно затонув в пам'яті тільки 246 00:10:27,752 --> 00:10:29,960 ще й тому, що це дійсно інтелектуально нецікавим. 247 00:10:29,960 --> 00:10:31,660 Це просто синтаксичні відмінності. 248 00:10:31,660 --> 00:10:33,230 Але ідеї точно те ж саме. 249 00:10:33,230 --> 00:10:35,910 Усередині цієї змінної цитата JavaScript 250 00:10:35,910 --> 00:10:39,020 це колекція пар ключ-значення, один з яких є символом, одна з яких 251 00:10:39,020 --> 00:10:39,690 є ціна. 252 00:10:39,690 --> 00:10:42,340 І я можу отримати при тих значеннях з наступним синтаксисом. 253 00:10:42,340 --> 00:10:46,280 Так само, як в PHP, я міг зробити щось like-- нехай 254 00:10:46,280 --> 00:10:48,590 мені зробити це вікно трохи більше. 255 00:10:48,590 --> 00:10:52,750 Так само, як в PHP, я міг зробити this-- о, чорт візьми. 256 00:10:52,750 --> 00:10:53,250 Давай. 257 00:10:53,250 --> 00:10:56,350 258 00:10:56,350 --> 00:11:00,800 >> Так само, як в PHP-- Добре, ми просто використовувати Дарувальник нотатки. 259 00:11:00,800 --> 00:11:06,010 Так само, як в PHP, я можу зробити $ цитата $ цитата ["символ"], 260 00:11:06,010 --> 00:11:08,860 і це допоможе мені значення "символ". 261 00:11:08,860 --> 00:11:12,800 У JavaScript, це буде ідентичні, в результаті чого я можу просто зробити це. 262 00:11:12,800 --> 00:11:14,850 Єдине, що це вистачає знак долара. 263 00:11:14,850 --> 00:11:17,470 >> Так досить добре, те, що є не все, що багато нового синтаксису. 264 00:11:17,470 --> 00:11:21,025 Так що сьогодні ми орієнтуємося на, дійсно, деякі з ідей і додатків. 265 00:11:21,025 --> 00:11:22,900 І перший такий додаток, що ви могли б 266 00:11:22,900 --> 00:11:26,090 бачили, якщо ви пірнули в PSET сім уже цей синтаксис. 267 00:11:26,090 --> 00:11:28,980 Таким чином, в PSET сьомій, якщо у Вас є бачив або не бачив ще, 268 00:11:28,980 --> 00:11:33,570 знаю, що є файл, який ми даємо Ви назвали config.json-- JavaScript 269 00:11:33,570 --> 00:11:34,661 Object Notation. 270 00:11:34,661 --> 00:11:35,160 Чому? 271 00:11:35,160 --> 00:11:39,540 Ми хотіли, щоб бути в змозі надати Вам з шаблон з деяких пар ключ-значення. 272 00:11:39,540 --> 00:11:44,290 Ми хотіли, щоб бути в змозі дати вам список хоста, назва сервера. 273 00:11:44,290 --> 00:11:46,710 Ми хотіли, щоб дати вам Місце для вашого імені користувача 274 00:11:46,710 --> 00:11:48,210 і заповнювач для вашого пароля. 275 00:11:48,210 --> 00:11:49,410 Якщо ви не бачите це ще не про що турбуватися. 276 00:11:49,410 --> 00:11:51,340 Докладніше про це в PSET сьомій [? спекуляція ?] І потім, 277 00:11:51,340 --> 00:11:53,173 Очевидно, ми хочемо вас заповнити в-DOS 278 00:11:53,173 --> 00:11:55,310 тому що, коли ви входите в CS50 IDE, кожен з вас 279 00:11:55,310 --> 00:11:57,630 мати свій власний логін і пароль. 280 00:11:57,630 --> 00:12:00,910 >> Таким чином, ми могли б використовувати півтора десятка або більше різних форматів файлів. 281 00:12:00,910 --> 00:12:02,940 Ми могли б використовувати файл .txt. 282 00:12:02,940 --> 00:12:04,570 Ми могли б використовувати файл CSV с. 283 00:12:04,570 --> 00:12:06,745 Ми могли б використовується INI-файл, XML-файл, 284 00:12:06,745 --> 00:12:09,370 ціла купа більше Скорочення, що Ви не могли б коли-небудь чув. 285 00:12:09,370 --> 00:12:11,244 Це свого роду довільне в кінці дня. 286 00:12:11,244 --> 00:12:16,030 Але супер популярні в ці дні є текст формат, званий JSON-- JavaScript Object 287 00:12:16,030 --> 00:12:18,460 Notation--, що виглядає як це. 288 00:12:18,460 --> 00:12:20,890 Це трохи загадковим, але зверніть увагу, шаблони. 289 00:12:20,890 --> 00:12:24,180 Ви починаєте з відкритим кучерявого дужка, і ви в кінцевому з тим же. 290 00:12:24,180 --> 00:12:26,550 Всередині щось, що. 291 00:12:26,550 --> 00:12:27,920 Це пара ключ-значення. 292 00:12:27,920 --> 00:12:30,580 Так що це об'єкт, який я дивлячись на на екрані тут 293 00:12:30,580 --> 00:12:33,690 який має один ключ, який має одне значення. 294 00:12:33,690 --> 00:12:37,610 І тільки виведення на основі попередня модель, що ключовим тут? 295 00:12:37,610 --> 00:12:39,790 База даних, річ, щоб лівий товстої кишки. 296 00:12:39,790 --> 00:12:43,500 >> Тепер, значення буває а кілька рядків на цей раз. 297 00:12:43,500 --> 00:12:46,760 Але значення починається з кучерявим готуватися і закінчується з фігурної дужки. 298 00:12:46,760 --> 00:12:49,480 Так що ви могли б запропонувати це Тип значення бази даних? 299 00:12:49,480 --> 00:12:52,160 300 00:12:52,160 --> 00:12:54,670 Словник або просто більш лаконічно, об'єкт. 301 00:12:54,670 --> 00:12:55,170 Вірно? 302 00:12:55,170 --> 00:13:00,010 Це свого роду структури даних, можна використовувати й інші структури в собі. 303 00:13:00,010 --> 00:13:02,750 Так що, якщо все це справа ми Виклик object-- і об'єкт 304 00:13:02,750 --> 00:13:07,101 це всього лише купка ключ-значення pairs-- значення самої бази даних є об'єктом. 305 00:13:07,101 --> 00:13:10,350 Значення бази даних має цілий букет з пар ключ-значення, перший з яких 306 00:13:10,350 --> 00:13:13,130 це господар, то назвати, то ім'я користувача, пароль, то, 307 00:13:13,130 --> 00:13:17,550 кожен з яких значення, між тим, це просто нудно рядок в подвійних лапках. 308 00:13:17,550 --> 00:13:19,770 >> Таким чином, навіть якщо це не супер ясно тільки поки, 309 00:13:19,770 --> 00:13:22,740 знаю, що це всього лише стандарт, досить нудно спосіб 310 00:13:22,740 --> 00:13:25,190 зберігання даних в стандартному форматі. 311 00:13:25,190 --> 00:13:27,700 Але загальні помилки, які ви може зробити, навіть в PSET сьомій, 312 00:13:27,700 --> 00:13:32,120 маленькі дурні речі, як, якщо вас випадково опустити кому там. 313 00:13:32,120 --> 00:13:34,900 Це збирається привести у файлі не обов'язково бути читаним. 314 00:13:34,900 --> 00:13:38,191 Якщо ви випадково опустити речі, як котирування, він не збирається бути читаним. 315 00:13:38,191 --> 00:13:41,654 Так що це досить nitpicky формат, але це той, який дуже часто. 316 00:13:41,654 --> 00:13:44,820 І ми вирішили використовувати його, хоча Ви не використовувати будь JavaScript в іншому випадку, 317 00:13:44,820 --> 00:13:46,330 в PSET сім. 318 00:13:46,330 --> 00:13:46,860 >> Добре. 319 00:13:46,860 --> 00:13:48,110 Так що пам'ятайте цю картину. 320 00:13:48,110 --> 00:13:51,657 Ми говорили, в HTML, що код може виглядати наступним чином. 321 00:13:51,657 --> 00:13:54,740 Це мова розмітки гіпертексту [Нерозбірливо] для всього "Hello, World". 322 00:13:54,740 --> 00:13:57,570 Але тоді ми запропонували Деякий час тому, що, якщо це допоможе, 323 00:13:57,570 --> 00:14:00,210 Ви могли б почати думати про це вже у вигляді дерева. 324 00:14:00,210 --> 00:14:03,730 Справді, поглиблення що ми використовувати тільки заради читаності в 325 00:14:03,730 --> 00:14:05,610 або заради стилю в на ліва можете вид 326 00:14:05,610 --> 00:14:10,040 бути переведені в цьому дереві, де ви є спеціальний кореневий вузол, який ми 327 00:14:10,040 --> 00:14:16,860 зазвичай називають документ, нижче якого корінь HTML-елемент або тег, HTML, 328 00:14:16,860 --> 00:14:19,980 який потім два діти, голова і тіло. 329 00:14:19,980 --> 00:14:21,750 >> А потім, у свою чергу, глава має назву. 330 00:14:21,750 --> 00:14:23,440 І назву має текстове значення. 331 00:14:23,440 --> 00:14:26,130 І тіло подібно має текстове значення. 332 00:14:26,130 --> 00:14:29,220 Так що, якщо ви відчуваєте себе комфортно приказка що так, ви могли б взяти цю HTML 333 00:14:29,220 --> 00:14:32,080 і намалювати картину, як це, права сторона 334 00:14:32,080 --> 00:14:35,910 хороший ментальна модель, тому що тепер що у нас є JavaScript, програмування 335 00:14:35,910 --> 00:14:39,960 мова, яка браузери виконувати і інтерпретувати для вас, 336 00:14:39,960 --> 00:14:42,690 Виявляється, що те, що ми збираємося зробити в коді 337 00:14:42,690 --> 00:14:45,320 це почати маніпулювати це Структура дерева в памяти. 338 00:14:45,320 --> 00:14:47,070 Ми не повинні будувати дерево в пам'яті. 339 00:14:47,070 --> 00:14:49,880 Ми не повинні робити вигляд Структура даних PSET п'ять-стиль 340 00:14:49,880 --> 00:14:50,650 Складність. 341 00:14:50,650 --> 00:14:54,610 Браузер, досить красиво, на інтерпретації HTML зверху вниз, 342 00:14:54,610 --> 00:14:58,600 вліво або вправо, буквально збирається передати нам еквівалента покажчик 343 00:14:58,600 --> 00:15:00,840 до цього всього дереву безкоштовно. 344 00:15:00,840 --> 00:15:02,150 Це робить всю важку роботу. 345 00:15:02,150 --> 00:15:05,520 Це те, що Mozilla і Apple, та інші зробили для нас. 346 00:15:05,520 --> 00:15:09,400 >> І з JavaScript ми будемо бути в змозі контролювати і змінювати і робити 347 00:15:09,400 --> 00:15:12,910 цікаві речі що дерево, інакше відомий 348 00:15:12,910 --> 00:15:15,880 як DOM або об'єктної моделі документів. 349 00:15:15,880 --> 00:15:17,110 Які речі? 350 00:15:17,110 --> 00:15:19,030 Ну, виходить, що в JavaScript, є 351 00:15:19,030 --> 00:15:22,800 цей список прання події, які можуть мати місце. 352 00:15:22,800 --> 00:15:26,330 І ми дійсно не використали, що Слово з тижня нулю і PSET 353 00:15:26,330 --> 00:15:28,240 нулю, коли ми говорили про порожньому. 354 00:15:28,240 --> 00:15:31,390 Більшість з вас, ймовірно, не використовувати подія у вашому подряпин проекту. 355 00:15:31,390 --> 00:15:33,850 Але ви, можливо, пам'ятаєте простий Марко Поло 356 00:15:33,850 --> 00:15:36,760 Наприклад, коли у нас було два спрайт, один з яких сказав, Марко. 357 00:15:36,760 --> 00:15:40,180 Інший з яких потім, при прослуховування і чути, що подія, сказав, Поло. 358 00:15:40,180 --> 00:15:42,080 Якщо ні, не соромтеся озирнутися назад, що далеко назад. 359 00:15:42,080 --> 00:15:44,450 >> Але це просто кажуть, і ви можете вид 360 00:15:44,450 --> 00:15:47,730 вивести з назв цих речі, JavaScript, виявляється, 361 00:15:47,730 --> 00:15:53,200 збирається дати нам можливість слухати для миші спускаючись або миші підійшовши 362 00:15:53,200 --> 00:15:57,920 або ключ спускаючись або клавішу вгору або onsubmit onselect 363 00:15:57,920 --> 00:15:59,740 або щось onresizing. 364 00:15:59,740 --> 00:16:03,060 Іншими словами, будь-яка фізична дія що людина може взяти з браузером 365 00:16:03,060 --> 00:16:08,210 що ви робите кожен день, ви можете написати Код для який слухає тих подій 366 00:16:08,210 --> 00:16:10,220 а потім робить щось підходяще. 367 00:16:10,220 --> 00:16:14,130 >> Наприклад, якщо ви використовуєте Google Maps, що станеться, якщо клацнути і перемістити 368 00:16:14,130 --> 00:16:16,250 миша, як правило ,? 369 00:16:16,250 --> 00:16:17,758 Якщо ви клацніть і перетягніть? 370 00:16:17,758 --> 00:16:18,258 Так? 371 00:16:18,258 --> 00:16:21,701 372 00:16:21,701 --> 00:16:22,200 Точно. 373 00:16:22,200 --> 00:16:23,159 Карта починає рухатися. 374 00:16:23,159 --> 00:16:25,616 Таким чином, ви можете сортувати, бачать те, що тут, що там. 375 00:16:25,616 --> 00:16:27,130 І як Google реалізувати це? 376 00:16:27,130 --> 00:16:29,421 Ну, мабуть, вони використовуючи пару цих події 377 00:16:29,421 --> 00:16:31,720 слухачі, один, що говорить, слухайте на миші 378 00:16:31,720 --> 00:16:35,410 down-- тому, коли користувач фізично штовхає його трекпад або його або її мишкою 379 00:16:35,410 --> 00:16:36,010 вниз 380 00:16:36,010 --> 00:16:38,350 І тоді ми шукаємо щось на зразок руху 381 00:16:38,350 --> 00:16:41,145 або який-небудь інший випадок, який дозволяє захопити опору. 382 00:16:41,145 --> 00:16:45,910 І справді, це так само перетягнути в цьому точка точка точка список можливих варіантів. 383 00:16:45,910 --> 00:16:49,140 >> Таким чином, це буде потужним спосіб почати відповідати користувачеві 384 00:16:49,140 --> 00:16:52,824 навіть перш, ніж він чи вона насправді кліків то явне, як представити. 385 00:16:52,824 --> 00:16:55,240 Але ми збираємося представити пара теми потрапити. 386 00:16:55,240 --> 00:16:58,570 Але спочатку, давайте перехід в якийсь реальний код. 387 00:16:58,570 --> 00:17:01,450 Так що я збираюся піти вперед і відкрити будинок-0, 388 00:17:01,450 --> 00:17:05,869 який є дуже простий приклад тут, що якщо я просто збільшити 389 00:17:05,869 --> 00:17:08,500 має цей вхід тут для мене. 390 00:17:08,500 --> 00:17:12,410 І я збираюся йти вперед і ввести в "Давид" на моє ім'я і натисніть кнопку Надіслати. 391 00:17:12,410 --> 00:17:17,940 >> А потім, хоча начебто дешево, я Тобто це запрошення, яке з'являється, що говорить, 392 00:17:17,940 --> 00:17:19,244 "привіт, Девід!" 393 00:17:19,244 --> 00:17:21,740 Так що це свого роду як наш "привіт, світ" 394 00:17:21,740 --> 00:17:25,150 що ми зробили деякий час тому в C і навіть в PHP, тому що я динамічно 395 00:17:25,150 --> 00:17:26,310 виводиться моє ім'я. 396 00:17:26,310 --> 00:17:28,230 Я можу зробити ім'я когось іншого тут. 397 00:17:28,230 --> 00:17:31,240 Я міг би просто змінити це, як Ханна, натисніть кнопку Надіслати. 398 00:17:31,240 --> 00:17:33,780 І справді, маленькі спливаючі зміни. 399 00:17:33,780 --> 00:17:36,650 >> Тепер, спливаючі вікна є одним з найпоширенішим особливості в Інтернеті. 400 00:17:36,650 --> 00:17:38,520 І справді, ще в в день спливаючі блокатори 401 00:17:38,520 --> 00:17:40,820 увійшли в моду, тому що ви буде йти в якийсь website-- 402 00:17:40,820 --> 00:17:43,604 можливо, під питанням place-- що б потім раптом 403 00:17:43,604 --> 00:17:46,020 почати закидати екран з цілою купою спливаючих вікон. 404 00:17:46,020 --> 00:17:49,700 І так ця здатність вискакувати Вікна в перед користувачем 405 00:17:49,700 --> 00:17:52,372 була особливо добре прийнятий людством. 406 00:17:52,372 --> 00:17:54,080 Так ось чому ви бачите це запобігти саме, 407 00:17:54,080 --> 00:17:55,706 який тільки робить все це справа некрасиво. 408 00:17:55,706 --> 00:17:57,996 Отже, ми збираємося, щоб потребувати кращий спосіб, щоб спонукати користувача. 409 00:17:57,996 --> 00:17:59,350 Але зараз, що, здається, працює. 410 00:17:59,350 --> 00:18:03,320 Так що просто інтуїтивно, що Здається, що тут відбувається? 411 00:18:03,320 --> 00:18:07,870 Я йду вперед і натисніть кнопку Надіслати, а то щось відбувається, ясно. 412 00:18:07,870 --> 00:18:12,870 Але те, що не відбувається, що трапилося Минулого тижня в будь-який час я натиснув уявити? 413 00:18:12,870 --> 00:18:15,940 Що не відбулося на екрані? 414 00:18:15,940 --> 00:18:17,170 На жаль? 415 00:18:17,170 --> 00:18:18,010 Оновити. 416 00:18:18,010 --> 00:18:19,720 URL-адреса не зміниться. 417 00:18:19,720 --> 00:18:22,250 Я сказав, що це був будинок-0, і я все ще в Будинку-0. 418 00:18:22,250 --> 00:18:26,890 Як правило, ми отримати змінилося в іншій Посилання, як register.php або тому подібне. 419 00:18:26,890 --> 00:18:29,560 >> Але навіть коли я звільнити ця річ, натиснувши кнопку ОК, 420 00:18:29,560 --> 00:18:32,310 Зверніть увагу, що URL залишається повністю на місці. 421 00:18:32,310 --> 00:18:35,350 І, справді, якщо я трохи скептично, дозвольте мені відкрити Chrome. 422 00:18:35,350 --> 00:18:36,860 Дозвольте мені відкрити вкладку Мережа. 423 00:18:36,860 --> 00:18:38,360 І зауважте, це порожній на даний момент. 424 00:18:38,360 --> 00:18:40,700 Дозвольте мені йти вперед і повторно Марію. 425 00:18:40,700 --> 00:18:42,810 Там немає мережевого трафіку взагалі. 426 00:18:42,810 --> 00:18:44,320 Так ні HTTP. 427 00:18:44,320 --> 00:18:47,620 >> Так насправді, якщо я дивлюся на вихідному коді для this-- дозвольте мені закрити це вікно 428 00:18:47,620 --> 00:18:49,480 і перейти до Переглянути Source. 429 00:18:49,480 --> 00:18:50,400 Цікаво. 430 00:18:50,400 --> 00:18:53,520 Схоже, є деякі Нові мітки, серед них сценарій. 431 00:18:53,520 --> 00:18:57,490 Отже, давайте поглянемо протягом CS50 IDE саме те, що я послав до користувача. 432 00:18:57,490 --> 00:19:00,690 >> Так от давайте is-- зосередитися на тільки HTML. 433 00:19:00,690 --> 00:19:03,500 Ось в нижній половині Дом-0.html. 434 00:19:03,500 --> 00:19:07,830 І зауважте, що він отримав назву, голова тег, тег тіла, форма тега. 435 00:19:07,830 --> 00:19:11,257 Але те, що вискакує вам як різні, особливо якщо ви ніколи не 436 00:19:11,257 --> 00:19:12,590 написано будь JavaScript самостійно. 437 00:19:12,590 --> 00:19:14,920 Дозвольте мені трохи прокрутите щоб прямо тут. 438 00:19:14,920 --> 00:19:18,330 Я отримав вхід, інший вхід для уявити. 439 00:19:18,330 --> 00:19:21,410 Я отримав ідентифікатор, який є свого роду новий. 440 00:19:21,410 --> 00:19:22,790 Але ми бачимо це CSS. 441 00:19:22,790 --> 00:19:24,480 Що ще, безумовно, новий? 442 00:19:24,480 --> 00:19:24,980 Так? 443 00:19:24,980 --> 00:19:30,580 444 00:19:30,580 --> 00:19:32,140 Ніцца. 445 00:19:32,140 --> 00:19:32,760 >> Добре. 446 00:19:32,760 --> 00:19:35,630 Так, де він говорить onsubmit, зауважити, що, здається, слід. 447 00:19:35,630 --> 00:19:38,740 Це є атрибутом в HTML номенклатури. 448 00:19:38,740 --> 00:19:40,944 Його значення це рядок в лапках тут. 449 00:19:40,944 --> 00:19:42,860 І це виглядає трохи дивно на перший погляд. 450 00:19:42,860 --> 00:19:44,050 Це не HTML. 451 00:19:44,050 --> 00:19:45,240 Це не CSS. 452 00:19:45,240 --> 00:19:47,580 Це, як ви вже могли здогадатися, JavaScript. 453 00:19:47,580 --> 00:19:51,850 Так що, схоже, що вбудований в цей Веб-сторінка є функцією називається Вітаю. 454 00:19:51,850 --> 00:19:54,250 І я просто виведення що бо це слово, вітаю. 455 00:19:54,250 --> 00:19:55,880 Він отримав відкриту Хлопець, Закрити Хлопець, крапка з комою. 456 00:19:55,880 --> 00:19:58,095 Схоже, функції C, виглядає як функції PHP. 457 00:19:58,095 --> 00:20:00,370 >> І справді, він збирається функція JavaScript. 458 00:20:00,370 --> 00:20:01,440 Потім я повертаюся хибним. 459 00:20:01,440 --> 00:20:03,440 Ми повернемося до що в хвилину. 460 00:20:03,440 --> 00:20:05,320 Але де ця функція визначена? 461 00:20:05,320 --> 00:20:07,950 Ну дозвольте мені прокручування вгору у верхній частині файлу. 462 00:20:07,950 --> 00:20:11,710 І хоча це довга лінія, це відносно проста. 463 00:20:11,710 --> 00:20:15,000 Дозвольте мені масштабу тут і зосередити увагу на цих чотирьох ліній. 464 00:20:15,000 --> 00:20:17,137 >> Таким чином, в JavaScript, просто як PHP, ви просто 465 00:20:17,137 --> 00:20:19,720 скажімо, в буквальному сенсі, слово "функція", ім'я функції, 466 00:20:19,720 --> 00:20:22,700 а потім дужки з будь-яким НЕ arguments-- жодних аргументів в цьому випадку. 467 00:20:22,700 --> 00:20:25,290 І повернення тип в JavaScript, так само, як PHP. 468 00:20:25,290 --> 00:20:29,470 Так що це трохи слабкіше, ніж С. Відкрити фігурна дужка, недалеко фігурна дужка. 469 00:20:29,470 --> 00:20:33,270 Вбудований в JavaScript є function-- не рекомендується function-- 470 00:20:33,270 --> 00:20:35,730 а функція називається оповіщення чия єдина мета в житті 471 00:20:35,730 --> 00:20:38,620 це підтягнути, що досить потворні підкажіть що ми бачили хвилину тому. 472 00:20:38,620 --> 00:20:40,950 >> Тепер це свого роду ковтком. 473 00:20:40,950 --> 00:20:42,560 Що тут відбувається? 474 00:20:42,560 --> 00:20:45,840 Отже, давайте почнемо з виділити всі тут. 475 00:20:45,840 --> 00:20:48,540 Це той же самий аргумент, щоб попередити. 476 00:20:48,540 --> 00:20:49,530 І що відбувається? 477 00:20:49,530 --> 00:20:51,200 Це виглядає просто як рядок. 478 00:20:51,200 --> 00:20:59,180 І виявляється, на відміну від PHP і на відміну від С, не має значення, в JavaScript 479 00:20:59,180 --> 00:21:01,090 якщо ви одинарні лапки або подвійні лапки. 480 00:21:01,090 --> 00:21:02,060 Вони будуть еквівалентні. 481 00:21:02,060 --> 00:21:03,769 І, чесно кажучи, це просто популярні в ці дні 482 00:21:03,769 --> 00:21:06,726 для програмістів JavaScript, щоб завжди використовувати одинарні лапки для якоїсь причини. 483 00:21:06,726 --> 00:21:07,840 Це тільки те, що робити. 484 00:21:07,840 --> 00:21:09,710 Але ми могли б використовувати подвійні лапки, а також. 485 00:21:09,710 --> 00:21:11,540 >> Так плюс новий персонаж. 486 00:21:11,540 --> 00:21:14,512 Але ті з вас, які зробили це раніше, що робить плюс на увазі? 487 00:21:14,512 --> 00:21:16,440 Так. 488 00:21:16,440 --> 00:21:17,120 Об'єднати. 489 00:21:17,120 --> 00:21:18,570 Таким чином, ми бачили це в PHP. 490 00:21:18,570 --> 00:21:20,315 Там просто точка оператор в PHP, що 491 00:21:20,315 --> 00:21:22,000 об'єднуватиме два рядки разом. 492 00:21:22,000 --> 00:21:24,000 З біль у шиї, щоб зробити це. 493 00:21:24,000 --> 00:21:27,310 Нагадаємо, з PSET шостій, який був особлива біль у шиї, 494 00:21:27,310 --> 00:21:29,470 Ви повинні були б використовувати щось на зразок strcat 495 00:21:29,470 --> 00:21:31,660 після виділення пам'яті в стеку або в купі. 496 00:21:31,660 --> 00:21:34,243 Ви мали стрибати через обручі просто з'єднати два рядки. 497 00:21:34,243 --> 00:21:36,040 У JavaScript, це супер просто. 498 00:21:36,040 --> 00:21:38,030 Просто використовуйте оператор плюс між ними. 499 00:21:38,030 --> 00:21:41,420 >> Таким чином, комплекс виду що, здається, це 500 00:21:41,420 --> 00:21:43,490 бо врешті Вся ця рядок, я просто 501 00:21:43,490 --> 00:21:45,797 об'єднати на знаком оклику. 502 00:21:45,797 --> 00:21:48,380 Так що, якщо те, що було вискакувати був "привіт, Девід," "привіт, Ханна," 503 00:21:48,380 --> 00:21:52,740 "привіт, Марія", і так далі, ясно що середній річ між двома 504 00:21:52,740 --> 00:21:55,215 плюси повинні дати мені доступ до чого? 505 00:21:55,215 --> 00:21:58,855 506 00:21:58,855 --> 00:22:01,991 Що там напевно? 507 00:22:01,991 --> 00:22:02,490 Так. 508 00:22:02,490 --> 00:22:05,090 Так що я буду робити вигляд, тут відповісти на їхні ім'я, чи не так? 509 00:22:05,090 --> 00:22:10,380 Таким чином, їх ім'я вискочило у фіналі Результат. Отже, що ж це означає? 510 00:22:10,380 --> 00:22:15,080 Ну, я запропонував раніше в тому, що картина, так званий DOM 511 00:22:15,080 --> 00:22:18,580 має цей спеціальний кореневий елемент спосіб нагорі називається документ. 512 00:22:18,580 --> 00:22:21,660 А тепер, виявляється, що відбувається як особливий глобальної змінної 513 00:22:21,660 --> 00:22:25,250 в JavaScript, вбудований в якої є ціла купа корисних функцій. 514 00:22:25,250 --> 00:22:31,770 Серед корисна функціональність є Можливість отримати в будь нащадок вузла. 515 00:22:31,770 --> 00:22:37,760 Ці квадрати або прямокутники або еліпси тільки вузли в дереві, так би мовити. 516 00:22:37,760 --> 00:22:41,850 >> Так що виходить, що вбудований в Документ об'єкт в JavaScript 517 00:22:41,850 --> 00:22:47,300 є функцією, інакше відомий як Метод, який називається getElementById. 518 00:22:47,300 --> 00:22:50,410 Синтаксис для виклику функція в JavaScript 519 00:22:50,410 --> 00:22:55,220 що знаходиться всередині об'єкта або змінна тільки з точковою нотації. 520 00:22:55,220 --> 00:22:57,950 І ми бачили це в C те, що синтаксис структурою. 521 00:22:57,950 --> 00:23:03,530 Ви бачите це в PSET сьомій, начебто, начебто, коли ви бачите CS50 :: запит. 522 00:23:03,530 --> 00:23:08,070 Двокрапка двокрапка в PHP це ще один спосіб виклику функції, що це 523 00:23:08,070 --> 00:23:09,260 усередині якого-небудь об'єкта. 524 00:23:09,260 --> 00:23:11,960 >> Але зараз в JavaScript, це просто крапка. 525 00:23:11,960 --> 00:23:14,170 І тому ця функція, досить красиво, вид 526 00:23:14,170 --> 00:23:16,810 каже, що це does-- отримати елемент за ідентифікатором. 527 00:23:16,810 --> 00:23:20,280 Елемент це просто інша назва для тега або вузла в DOM. 528 00:23:20,280 --> 00:23:26,900 І тому отримати елемент, ID "ім'я" означає this-- ось мій HTML. 529 00:23:26,900 --> 00:23:31,910 І на основі цього HTML, те, що вузол або що HTML-теги це я 530 00:23:31,910 --> 00:23:35,097 збирається програмно бути передані по телефону document.getElementById? 531 00:23:35,097 --> 00:23:37,650 532 00:23:37,650 --> 00:23:38,500 >> Так, саме так. 533 00:23:38,500 --> 00:23:42,670 Я йду, щоб отримати вхід елемент існує, чий ідентифікатор "ім'я." 534 00:23:42,670 --> 00:23:45,140 Так зокрема, ви можете думаю, цієї функції, 535 00:23:45,140 --> 00:23:49,560 getElementById, як спосіб дати резервне покажчик на цей конкретний вузол 536 00:23:49,560 --> 00:23:50,060 в дереві. 537 00:23:50,060 --> 00:23:51,980 Ми не тягне це дерево, але це спосіб 538 00:23:51,980 --> 00:23:54,900 отримання доступу до, що прямокутник або прямокутник, що 539 00:23:54,900 --> 00:23:58,090 за унікальною ідентифікації його за допомогою своєї ID. 540 00:23:58,090 --> 00:23:59,760 >> Тепер, чому це корисно? 541 00:23:59,760 --> 00:24:01,510 Ну, це виявляється що як тільки ви отримали 542 00:24:01,510 --> 00:24:07,220 що вузол, що прямокутник з картина, що вузол всередині нього, 543 00:24:07,220 --> 00:24:10,660 у свою чергу, має цілий букет пари properties-- ключ-значення 544 00:24:10,660 --> 00:24:13,480 або дані, одна з яких називається значення. 545 00:24:13,480 --> 00:24:16,500 Так буквально, це добро з рот, щоб пояснити все це. 546 00:24:16,500 --> 00:24:19,370 Але в кінці дня, все це робить, це дати вам 547 00:24:19,370 --> 00:24:23,070 рядок, що користувач ввів в в цьому ієрархічному порядку. 548 00:24:23,070 --> 00:24:24,820 Але я не люблю пара з цих речей. 549 00:24:24,820 --> 00:24:27,590 Або, скоріше, є деякі цікавість ще. 550 00:24:27,590 --> 00:24:28,870 Все, що здавалося, на роботу. 551 00:24:28,870 --> 00:24:33,420 Чому ви думаєте, я повернувся ложно після виклику вітати? 552 00:24:33,420 --> 00:24:35,910 Це виглядає трохи негарно, що У мене є дві заяви 553 00:24:35,910 --> 00:24:38,730 розділених крапкою з комою. 554 00:24:38,730 --> 00:24:39,310 Візьміть здогад. 555 00:24:39,310 --> 00:24:44,390 Якщо я видалив повернутися помилковим, те, що може статися, тільки інстинктивно? 556 00:24:44,390 --> 00:24:46,990 557 00:24:46,990 --> 00:24:49,460 На жаль, ще раз кажу? 558 00:24:49,460 --> 00:24:50,530 >> Відкрийте купу Windows. 559 00:24:50,530 --> 00:24:52,780 Так, може бути, щось потенційно як це буде відбуватися. 560 00:24:52,780 --> 00:24:54,422 Що ще? 561 00:24:54,422 --> 00:24:55,630 Може подати заявку де? 562 00:24:55,630 --> 00:24:59,109 563 00:24:59,109 --> 00:25:00,510 Для тій же сторінці. 564 00:25:00,510 --> 00:25:03,110 Так, справді, це, що ближче відповісти тут, 565 00:25:03,110 --> 00:25:05,890 хоча на відміну від в минулому, я не 566 00:25:05,890 --> 00:25:09,300 вказано атрибут дії, які, як правило, ми повинні зробити. 567 00:25:09,300 --> 00:25:11,780 Виявляється є за замовчуванням. Якщо ви не вкажете дії, 568 00:25:11,780 --> 00:25:15,370 це, як кажуть цитату, кінець цитати або назва самого файлу, 569 00:25:15,370 --> 00:25:17,850 який в цьому випадку буде бути як Будинок-0.html. 570 00:25:17,850 --> 00:25:20,420 Це просто якась висновок, або, скоріше, мається на увазі. 571 00:25:20,420 --> 00:25:22,420 >> І тому, якщо я не роблю це, давайте помічати. 572 00:25:22,420 --> 00:25:23,230 Дозвольте мені зберегти це. 573 00:25:23,230 --> 00:25:25,270 І я видалив повернення помилкове. 574 00:25:25,270 --> 00:25:27,759 Дозвольте мені повернутися до цього прикладом і силою перезавантажити його. 575 00:25:27,759 --> 00:25:30,800 І ви могли бачити мені запропонувати це на CS50 Обговорити купу разів. 576 00:25:30,800 --> 00:25:34,560 Якщо що-небудь коли-небудь діючи в стилі фанк і браузеру не веде, як ви очікуєте, 577 00:25:34,560 --> 00:25:37,410 часто ви хочете провести Зрушення і натисніть Оновити. 578 00:25:37,410 --> 00:25:41,480 Це змусить кожен файл, щоб перезавантажити і не використовувати локальний кеш браузера 579 00:25:41,480 --> 00:25:47,032 або копія, так що тепер, дозвольте мені йти вперед і Відкрити мій інспектор, перейдіть на вкладку Мережа. 580 00:25:47,032 --> 00:25:48,740 Я збираюся натисніть Заповідник Вхід бо я 581 00:25:48,740 --> 00:25:51,660 не хочу, щоб видалити рядки Як тільки я отримаю відвезли в іншому місці. 582 00:25:51,660 --> 00:25:54,650 >> Дозвольте мені йти вперед тут і введіть Andi, натисніть кнопку Надіслати. 583 00:25:54,650 --> 00:25:55,150 Добре. 584 00:25:55,150 --> 00:25:56,480 Це, здається, як і очікувалося. 585 00:25:56,480 --> 00:25:57,440 Він каже: "привіт, Енді." 586 00:25:57,440 --> 00:25:59,420 Дозвольте мені натисніть кнопку ОК. 587 00:25:59,420 --> 00:26:00,610 Цікаво. 588 00:26:00,610 --> 00:26:05,100 Зверніть увагу, що сторінка змінилася, хоча на вихідну сторінку. 589 00:26:05,100 --> 00:26:06,770 Зверніть увагу на URL вид змінився. 590 00:26:06,770 --> 00:26:09,430 Він додав, знак питання, який зазвичай є показником 591 00:26:09,430 --> 00:26:11,260 що ми намагалися представити щось. 592 00:26:11,260 --> 00:26:13,570 І тоді на дні, ще більш явно, 593 00:26:13,570 --> 00:26:17,570 тут актуальний запит HTTP, який отримав відповідь, що 200 594 00:26:17,570 --> 00:26:18,490 привів мене сюди. 595 00:26:18,490 --> 00:26:20,250 >> Так що це не те, що ми хочемо зробити, правильно? 596 00:26:20,250 --> 00:26:22,166 Тому що я не хочу, щоб перезавантажити всю сторінку. 597 00:26:22,166 --> 00:26:24,970 Я замість хотів повернутися ложно таким чином, щоб коротке замикання 598 00:26:24,970 --> 00:26:28,840 поведінка за умовчанням браузера, який було, звичайно, уявити сторінку. 599 00:26:28,840 --> 00:26:31,700 >> Отже, давайте поглянемо на незначно краще приклад. 600 00:26:31,700 --> 00:26:33,920 Це будинок версія одного. 601 00:26:33,920 --> 00:26:36,680 І зверніть увагу на наступне. 602 00:26:36,680 --> 00:26:39,150 Це нормально, якщо ви не звертав уваги всі рядків коду. 603 00:26:39,150 --> 00:26:41,750 Але те, що в корені відрізняється про реалізацію цього? 604 00:26:41,750 --> 00:26:44,690 Я обумовити це поводиться те ж саме, робить те ж саме. 605 00:26:44,690 --> 00:26:49,320 606 00:26:49,320 --> 00:26:51,570 Що я, очевидно, зробили по-іншому? 607 00:26:51,570 --> 00:26:52,266 Так? 608 00:26:52,266 --> 00:26:53,182 >> АУДИТОРІЯ: [нерозбірливо]. 609 00:26:53,182 --> 00:27:03,421 610 00:27:03,421 --> 00:27:04,170 Девід Малан: Так. 611 00:27:04,170 --> 00:27:08,620 Таким чином, функція визначена differently-- іншими словами, відсутніх з форми, 612 00:27:08,620 --> 00:27:13,180 там на лінії 7-- або мало, лінія 8-- більше не 613 00:27:13,180 --> 00:27:15,070 я маю onsubmit атрибут. 614 00:27:15,070 --> 00:27:16,750 У попередньому прикладі, я повинен був це. 615 00:27:16,750 --> 00:27:18,530 А потім я буквально написав свою код тут. 616 00:27:18,530 --> 00:27:20,210 І тоді я сказав повернутися помилковим. 617 00:27:20,210 --> 00:27:22,180 І якщо це не терти Ви неправильно все ж, 618 00:27:22,180 --> 00:27:26,140 вона повинна почати остільки а, як і в HTML, 619 00:27:26,140 --> 00:27:29,530 коли ми почали співпрацювати поспілкуватися його з CSS в атрибути стилю, 620 00:27:29,530 --> 00:27:32,890 він просто почав отримувати трохи брудний або відчувати себе трохи неправильно. 621 00:27:32,890 --> 00:27:35,020 >> Аналогічно тут, якщо Ви почнете приймати HTML, 622 00:27:35,020 --> 00:27:37,419 і потім ви автоматично грюкнути код JavaScript 623 00:27:37,419 --> 00:27:40,460 в середині рядка в лапках, це НЕ буде дуже супроводі. 624 00:27:40,460 --> 00:27:40,630 Вірно? 625 00:27:40,630 --> 00:27:43,690 Це навіть не очевидно на перший місце, де код JavaScript, є. 626 00:27:43,690 --> 00:27:46,590 Так що було б дійсно добре, як принцип кращого дизайну, 627 00:27:46,590 --> 00:27:50,500 давайте тримати наш HTML повністю відокремити від нашої JavaScript. 628 00:27:50,500 --> 00:27:53,150 >> Таким чином, щоб зробити це, те, що ми зробити ось following-- 629 00:27:53,150 --> 00:27:56,790 ми просто використовуємо HTML для розмітки тільки. 630 00:27:56,790 --> 00:28:00,730 І так у версії з цього, всі У мене є форма з унікальним ідентифікатором. 631 00:28:00,730 --> 00:28:04,630 А потім сюди, я, користуючись спеціальної особливістю JavaScript 632 00:28:04,630 --> 00:28:08,480 в результаті чого я можу мати те, що називається анонімної функцією. 633 00:28:08,480 --> 00:28:14,150 Так що виходить, що якщо я буду називати document.getElementById з "демо" 634 00:28:14,150 --> 00:28:18,890 це як давати мені покажчик цей вузол в моєму дереві, елемент форми, 635 00:28:18,890 --> 00:28:20,100 так би мовити. 636 00:28:20,100 --> 00:28:22,220 >> Тепер, я просто знаю, від знаючи трохи HTML 637 00:28:22,220 --> 00:28:26,330 Тепер ми, прочитавши деякі онлайн довідник, що елемент форми підтримує 638 00:28:26,330 --> 00:28:29,950 ціла купа listeners-- подій в Іншими словами, список пральня події 639 00:28:29,950 --> 00:28:31,700 слухачі, які ми бачили хвилину тому. 640 00:28:31,700 --> 00:28:35,950 Я знаю, від читання документації що onsubmit є дійсним подією 641 00:28:35,950 --> 00:28:38,520 слухач для елемента форми. 642 00:28:38,520 --> 00:28:41,480 >> Тому, як тільки я знаю, що, це безпечно для мене, щоб зробити 643 00:28:41,480 --> 00:28:45,390 following-- отримати цей вузол з дерева, елементи форми, 644 00:28:45,390 --> 00:28:48,070 і отримати доступ до так званих onsubmit власності. 645 00:28:48,070 --> 00:28:49,880 Таким чином, точка просто означає, це властивість, 646 00:28:49,880 --> 00:28:52,180 як особливу цінність всередині нього. 647 00:28:52,180 --> 00:28:55,590 І те, що тип даних це я призначення, мабуть, 648 00:28:55,590 --> 00:28:58,900 щоб onsubmit, що ефективно змінна всередині 649 00:28:58,900 --> 00:29:01,010 цього вузла в дереві? 650 00:29:01,010 --> 00:29:04,100 Це поле всередині цієї структури. 651 00:29:04,100 --> 00:29:05,810 Що тип даних? 652 00:29:05,810 --> 00:29:07,030 >> Функція, так. 653 00:29:07,030 --> 00:29:08,607 Так що виходить, що PHP має це. 654 00:29:08,607 --> 00:29:10,440 І хоча ми не сказати вам про це, 655 00:29:10,440 --> 00:29:16,240 С також має покажчики на функції, в здатність передавати і призначити функції 656 00:29:16,240 --> 00:29:18,330 а самі значень змінних. 657 00:29:18,330 --> 00:29:20,280 І ми не збираємося регресувати назад до C. 658 00:29:20,280 --> 00:29:23,250 Але зараз, виявляється, що на правій стороні тут, 659 00:29:23,250 --> 00:29:26,260 навіть якщо це виглядає трохи фанки, це означає, ей-браузер, 660 00:29:26,260 --> 00:29:27,550 дати мені функції. 661 00:29:27,550 --> 00:29:30,560 Я не збираюся навіть турбуватися даючи це ім'я, тому що я буквально я 662 00:29:30,560 --> 00:29:34,450 збирається призначити давайте називати його адресу цієї функції 663 00:29:34,450 --> 00:29:35,994 негайно onsubmit. 664 00:29:35,994 --> 00:29:39,160 Іншими словами, браузер, вам не потрібно знати, що називається ця функція. 665 00:29:39,160 --> 00:29:41,890 Вам просто потрібно знати, де він знаходиться в пам'яті. 666 00:29:41,890 --> 00:29:44,210 І так достатньо просто є знак рівності є 667 00:29:44,210 --> 00:29:48,240 і не турбувати назвавши це, як Foo чи вітати або будь-яке інше слово. 668 00:29:48,240 --> 00:29:50,150 А тепер це просто стилістична річ. 669 00:29:50,150 --> 00:29:53,100 Я міг би перемістити цю фігурну дужку на the-- sorry-- наступному рядку 670 00:29:53,100 --> 00:29:54,750 як ми зазвичай робимо CS50. 671 00:29:54,750 --> 00:29:57,550 Але в JavaScript, це насправді стилістично загального 672 00:29:57,550 --> 00:30:00,450 просто тримати фігурну дужку, то Перший, на цій першій лінії. 673 00:30:00,450 --> 00:30:02,620 >> Але далі, є нічого цікавого. 674 00:30:02,620 --> 00:30:05,830 Це відкрита фігурна дужка тільки розмежовує початок моєї функції. 675 00:30:05,830 --> 00:30:09,320 Функція тепер ідентичні, за винятком мене є 676 00:30:09,320 --> 00:30:11,452 включені повернутися помилковим всередині цієї функції. 677 00:30:11,452 --> 00:30:13,160 Бо виходить out-- і ви б тільки 678 00:30:13,160 --> 00:30:14,980 знаю, що це від читання documentation-- 679 00:30:14,980 --> 00:30:19,740 що якщо функції, що ви призначаєте до onsubmit обробник повертає брехня, 680 00:30:19,740 --> 00:30:23,420 браузер просто знає та погоджується з тим, не уявляти форму на сервер. 681 00:30:23,420 --> 00:30:27,210 Якщо вона повертає правда, вона представить це до сервера з причин, які ми побачимо 682 00:30:27,210 --> 00:30:28,700 корисні в хвилину. 683 00:30:28,700 --> 00:30:31,000 >> А потім, після коми фігурна дужка є тільки 684 00:30:31,000 --> 00:30:32,541 означає, що я зроблено визначенні функції. 685 00:30:32,541 --> 00:30:36,600 Ви знаєте, що, як тільки зателефонувати як ви чуєте уявлення. 686 00:30:36,600 --> 00:30:37,100 Добре. 687 00:30:37,100 --> 00:30:40,650 Це як і раніше можливо вид некрасиво. 688 00:30:40,650 --> 00:30:42,190 Так що ще ми можемо зробити? 689 00:30:42,190 --> 00:30:45,000 >> Ну, це виявляється то в другої версії, яка є last-- 690 00:30:45,000 --> 00:30:46,780 і ми просто погляд на це. 691 00:30:46,780 --> 00:30:49,850 На ризик прийняття це уродливее, виявляється 692 00:30:49,850 --> 00:30:52,160 що є бібліотека світ називається JQuery. 693 00:30:52,160 --> 00:30:54,900 І JQuery це супер Бібліотека JavaScript популярним 694 00:30:54,900 --> 00:30:57,930 це так популярні, що більшість будь JavaScript-- це не 695 00:30:57,930 --> 00:31:00,540 рідкість для людей, щоб заплутати JQuery з JavaScript. 696 00:31:00,540 --> 00:31:01,070 Чому? 697 00:31:01,070 --> 00:31:04,990 Сам JavaScript має дуже багатослівні способи ведення things-- 698 00:31:04,990 --> 00:31:07,820 document.getElementById, dadadadadada. 699 00:31:07,820 --> 00:31:10,510 Ви в кінцевому підсумку, дуже довгі рядки коду. 700 00:31:10,510 --> 00:31:15,550 >> Таким чином, людина на ім'я Джон Resid, хто насправді працює на старті 701 00:31:15,550 --> 00:31:18,630 до цих днів, вийшов з цією бібліотекою років 702 00:31:18,630 --> 00:31:22,070 назад, що багато людей внесли свій внесок щоб назвати JQuery, який змінює 703 00:31:22,070 --> 00:31:23,449 синтаксис наступним чином. 704 00:31:23,449 --> 00:31:25,740 І тільки так ви бачили це, тому що ви будете незмінно 705 00:31:25,740 --> 00:31:28,140 побачити це, якщо робити Остаточний проект веб-інтерфейсом, 706 00:31:28,140 --> 00:31:33,270 це було б рівнозначно спосіб реалізації цієї ж функції, використовуючи 707 00:31:33,270 --> 00:31:34,630 це спеціальна бібліотека. 708 00:31:34,630 --> 00:31:36,680 >> Тепер, замість дражнити це один від одного в повному обсязі, 709 00:31:36,680 --> 00:31:38,520 давайте просто подивимося на деякі зразки. 710 00:31:38,520 --> 00:31:44,850 Цей синтаксис, здається, є скільки анонімні функції 711 00:31:44,850 --> 00:31:49,584 або безіменні функції або лямбда-функції AKA? 712 00:31:49,584 --> 00:31:50,190 По-друге, чи не так? 713 00:31:50,190 --> 00:31:52,690 І ви знаєте, що, навіть якщо Ви не супер зручні з цим, 714 00:31:52,690 --> 00:31:55,780 просто той факт, що говорить функція () двічі. 715 00:31:55,780 --> 00:31:58,172 >> І виходить, що те, що цей код doing-- 716 00:31:58,172 --> 00:32:01,255 і ми будемо посилатися на інтернет-посилань, в кінцевому рахунку, з якоїсь допомогу в цьому. 717 00:32:01,255 --> 00:32:04,480 Це просто означає, що, коли документ готовий, 718 00:32:04,480 --> 00:32:07,490 йти вперед і зареєструватися наступна функція 719 00:32:07,490 --> 00:32:12,064 як представити обробнику HTML елемент, унікальна ідея є демо. 720 00:32:12,064 --> 00:32:14,480 А потім, коли це відбудеться, називати ці два рядки коду. 721 00:32:14,480 --> 00:32:18,677 І це, на жаль, більш детальний спосіб сказати повернутися помилковим. 722 00:32:18,677 --> 00:32:21,510 І ми говорили про це тільки тому, що Ви побачите код, як це онлайн. 723 00:32:21,510 --> 00:32:23,140 І це нічого не лякайтеся. 724 00:32:23,140 --> 00:32:26,057 Але замість того, майте на увазі, що те, що буде поширений в JavaScript 725 00:32:26,057 --> 00:32:26,765 це парадигма. 726 00:32:26,765 --> 00:32:29,510 І ось чому ми показуємо його зараз. 727 00:32:29,510 --> 00:32:30,010 Добре. 728 00:32:30,010 --> 00:32:32,730 Так, не зупиняючись занадто багато на цьому синтаксисі, 729 00:32:32,730 --> 00:32:37,800 чи є які-небудь питання по ці приклади та ідеї досі? 730 00:32:37,800 --> 00:32:38,300 Добре. 731 00:32:38,300 --> 00:32:40,220 Отже, давайте використовувати це для чогось корисного. 732 00:32:40,220 --> 00:32:47,070 Створення веб-сторінки, просто говорить привіт, так і так не все, що цікаво, 733 00:32:47,070 --> 00:32:47,830 НЕ underwhelm. 734 00:32:47,830 --> 00:32:51,038 Цей не збирається бути красивим, але це буде робити щось корисне. 735 00:32:51,038 --> 00:32:56,350 Дозвольте мені повернутися до моєї директорії тут і відкрити, припустимо, форма-0.html. 736 00:32:56,350 --> 00:32:59,320 >> Отже, нехай це першокурсник очний спортивні сторінці реєстрації 737 00:32:59,320 --> 00:33:01,780 без CSS або якомусь сенсі дизайну. 738 00:33:01,780 --> 00:33:05,404 І я хочу, щоб йти вперед і Зареєструйтеся тут з паролем. 739 00:33:05,404 --> 00:33:08,320 І я збираюся погодитися з умовами та умови і натисніть Register. 740 00:33:08,320 --> 00:33:11,700 І тепер веб-сайт говорить, "Ви зареєстровано! (Ну, не зовсім.) " 741 00:33:11,700 --> 00:33:15,070 Це здається, що це працює, але дозвольте мені йти вперед і змусити перезавантаження. 742 00:33:15,070 --> 00:33:18,720 >> І дозвольте мені сказати, ні, ви не потрібен мій фактична адреса електронної пошти. 743 00:33:18,720 --> 00:33:21,820 Або, може бути, ми просто скажемо, пошту там. 744 00:33:21,820 --> 00:33:25,080 Пароль буде, як, 12345. 745 00:33:25,080 --> 00:33:28,810 А потім, тільки тому, що я ідіот, тепер це 123456789. 746 00:33:28,810 --> 00:33:31,150 І я не збираюся, щоб перевірити вашу коробку. 747 00:33:31,150 --> 00:33:31,850 >> Хм. 748 00:33:31,850 --> 00:33:32,350 Добре. 749 00:33:32,350 --> 00:33:34,920 Так що кілька можливостей для поліпшення тут. 750 00:33:34,920 --> 00:33:39,070 І ви знаєте, або буде побачити в PSET сім то ви можете написати code-- 751 00:33:39,070 --> 00:33:41,890 і ви будете мати, щоб написати код в PHP-- захищати 752 00:33:41,890 --> 00:33:45,780 проти цих видів користувача помилки, тому що користувач явно 753 00:33:45,780 --> 00:33:46,790 не співпрацює. 754 00:33:46,790 --> 00:33:49,680 І він або вона не дала вам все цінує ви хотіли або навіть у форматі 755 00:33:49,680 --> 00:33:50,630 що ви хотіли їх. 756 00:33:50,630 --> 00:33:53,250 Таким чином, ви побачите в PSET сім то ми могли б, звичайно, є деякі 757 00:33:53,250 --> 00:33:55,680 якщо умови, які говорять Якщо адреса електронної пошти 758 00:33:55,680 --> 00:33:59,450 НЕ username@something.edu, Ми могли б просто 759 00:33:59,450 --> 00:34:02,575 сказати, вибачте, і вибачитися перед користувачем багато, як ви могли б бути в PSET сім. 760 00:34:02,575 --> 00:34:05,700 Або, якщо вони не перевірили цю коробку, Виявляється в PHP, ви можете виявити, що, 761 00:34:05,700 --> 00:34:06,200 теж. 762 00:34:06,200 --> 00:34:09,389 І, звичайно, якщо паролі не збігаються, як у register.php 763 00:34:09,389 --> 00:34:11,521 для PSET сьомій, ви можете виявити, що. 764 00:34:11,521 --> 00:34:13,770 Але це біль в шия, що зараз вони просять 765 00:34:13,770 --> 00:34:15,510 нам пройти весь шлях до сервера. 766 00:34:15,510 --> 00:34:17,053 Користувач інформується про помилку. 767 00:34:17,053 --> 00:34:19,219 І принаймні, якщо ви не використовуєте деякі химерні методи, 768 00:34:19,219 --> 00:34:20,929 тепер у них є, щоб натиснути стрілку назад. 769 00:34:20,929 --> 00:34:23,300 Не було б приємно, як багато веб-сайтів сьогодні, 770 00:34:23,300 --> 00:34:26,190 якщо у вас більше безпосереднє зворотний зв'язок миттєво? 771 00:34:26,190 --> 00:34:31,389 >> Іншими словами, дозвольте мені перейти до версії Один з них, який збирається бути не красивіше. 772 00:34:31,389 --> 00:34:33,469 Але у нього є ця функція. 773 00:34:33,469 --> 00:34:39,590 Малан, 12345, 123456789, що не збирається прапорець, зареєструйтесь. 774 00:34:39,590 --> 00:34:41,330 Паролі не збігаються. 775 00:34:41,330 --> 00:34:44,459 Таким чином, навіть якщо це спливаюче вікно ugly-- ми можемо замінити це в кінцевому підсумку 776 00:34:44,459 --> 00:34:47,000 щось на зразок Bootstrap, який ви побачите в PSET сьомій 777 00:34:47,000 --> 00:34:50,239 є дуже популярним library-- я виявити, що паролі не збігаються. 778 00:34:50,239 --> 00:34:50,739 Добре. 779 00:34:50,739 --> 00:34:52,530 Ну, дозвольте мені виправити як користувач. 780 00:34:52,530 --> 00:34:55,460 Дозвольте мені йти вперед і сказати, 12345 12345. 781 00:34:55,460 --> 00:34:57,780 Тим не менш, не перевіряючи угоду. 782 00:34:57,780 --> 00:35:00,210 Ви повинні погодитися на правила та умови. 783 00:35:00,210 --> 00:35:01,760 Так чому? 784 00:35:01,760 --> 00:35:04,100 >> Якщо ми вже покладено що є спосіб, 785 00:35:04,100 --> 00:35:07,260 і ми зобов'язані вам в PSET сьомій виявити помилку 786 00:35:07,260 --> 00:35:09,780 Умови, як це серверний, чому я повинен 787 00:35:09,780 --> 00:35:13,940 обтяжувати також робити це в JavaScript? 788 00:35:13,940 --> 00:35:15,850 Що таке аргумент у послуга додавання, що 789 00:35:15,850 --> 00:35:18,760 Ви збираєтеся, щоб побачити, як some-- є додаткова складність. 790 00:35:18,760 --> 00:35:23,610 791 00:35:23,610 --> 00:35:25,930 >> Може бути, немає ніг. 792 00:35:25,930 --> 00:35:26,924 Що б це могло бути? 793 00:35:26,924 --> 00:35:27,840 АУДИТОРІЯ: [нерозбірливо]. 794 00:35:27,840 --> 00:35:31,132 795 00:35:31,132 --> 00:35:32,340 Девід Малан: О, цікаво. 796 00:35:32,340 --> 00:35:33,530 Потенційні подвиги. 797 00:35:33,530 --> 00:35:37,540 Так, що, якщо ви не обробляє неправильне введення користувача, що великий, 798 00:35:37,540 --> 00:35:40,170 може бути, це все краще, якщо це навіть не досягти ваш сервер. 799 00:35:40,170 --> 00:35:42,160 Я б відсунути там і скажімо, ви повинні, ймовірно, 800 00:35:42,160 --> 00:35:43,284 вирішити обидві ці проблеми. 801 00:35:43,284 --> 00:35:44,140 Але це справедливо. 802 00:35:44,140 --> 00:35:44,710 Що ще? 803 00:35:44,710 --> 00:35:45,626 >> АУДИТОРІЯ: [нерозбірливо]. 804 00:35:45,626 --> 00:35:47,970 805 00:35:47,970 --> 00:35:49,014 >> Девід Малан: Так. 806 00:35:49,014 --> 00:35:51,680 Цей код, як ми вже говорили раніше, інтерпретуються на стороні клієнта. 807 00:35:51,680 --> 00:35:53,846 Це не турбує сервер, що означає, що ні 808 00:35:53,846 --> 00:35:55,930 вплинути навантаження сервера або пропускну здатність. 809 00:35:55,930 --> 00:35:59,840 А тепер, для маленької старої мене, це не має ніякого значущого впливу 810 00:35:59,840 --> 00:36:01,970 тому що у мене один користувач прямо зараз. 811 00:36:01,970 --> 00:36:04,010 >> Але якщо ви будь сайт пристойного розміру, 812 00:36:04,010 --> 00:36:07,400 особливо великий, як Facebook, тим більше ви можете тримати людей від 813 00:36:07,400 --> 00:36:09,927 вашого сервера краще тому сервері, звичайно, 814 00:36:09,927 --> 00:36:12,510 має тільки кінцеве кількість оперативної пам'яті, кінцеве число гігагерц, 815 00:36:12,510 --> 00:36:16,340 кінцеве число речей він може зробити в одиницю часу. 816 00:36:16,340 --> 00:36:19,170 Так що, якщо є більше людей в світ удару сервер, 817 00:36:19,170 --> 00:36:21,750 випадково реєстрації неправильно, як добре, якщо ви 818 00:36:21,750 --> 00:36:23,254 може зберегти це навантаження сервері. 819 00:36:23,254 --> 00:36:25,420 Крім того, особливо на рухомий device-- якщо ви коли-небудь 820 00:36:25,420 --> 00:36:29,190 увійти в my.harvard або NetID Єльського і т.п., 821 00:36:29,190 --> 00:36:32,330 там це затримка з великою кількістю сайти, як те, завдяки чому він займає, 822 00:36:32,330 --> 00:36:34,110 як, чертовски секунду або дві, іноді. 823 00:36:34,110 --> 00:36:37,979 А потім, мій Бог, якщо ви помилилися при введенні, то ви повинні завдати у відповідь удар і переробляти. 824 00:36:37,979 --> 00:36:40,520 Так що затримка, особливо на повільних мережних підключень. 825 00:36:40,520 --> 00:36:43,030 Але в JavaScript, бо він працює на клієнта 826 00:36:43,030 --> 00:36:46,720 і не потрібно йти вперед і назад по потенційно повільним інтернетом 827 00:36:46,720 --> 00:36:49,780 підключення, ви можете отримати миттєва зворотний зв'язок майже. 828 00:36:49,780 --> 00:36:50,760 >> Отже, давайте подивимося на це. 829 00:36:50,760 --> 00:36:54,280 Дозвольте мені відкрити форма-0 і подивитися на HTML тут. 830 00:36:54,280 --> 00:36:56,040 І давайте подивимося, що відбувається. 831 00:36:56,040 --> 00:36:59,460 Це форма якого дію register.php. 832 00:36:59,460 --> 00:37:01,530 Я тільки за допомогою отримати так що я міг побачити адресу. 833 00:37:01,530 --> 00:37:05,030 Але для паролів, ми, безумовно, хочемо щоб змінити це, щоб створювати в реальності. 834 00:37:05,030 --> 00:37:06,910 Ось поле введення типу тексту. 835 00:37:06,910 --> 00:37:09,050 Ось ще один вхід поле типу пароля. 836 00:37:09,050 --> 00:37:13,150 Ось, якщо ви ніколи не бачили, вхід типу прапорець. 837 00:37:13,150 --> 00:37:15,250 >> Але немає JavaScript тут взагалі. 838 00:37:15,250 --> 00:37:18,170 Це тільки HTML, що йде register.php. 839 00:37:18,170 --> 00:37:21,020 Але у версії однієї, де я почав отримувати ці спливаючі вікна, 840 00:37:21,020 --> 00:37:23,010 давайте подивимося, що насправді тут відбувається. 841 00:37:23,010 --> 00:37:26,757 У версії одного, те, що Я збираюся see-- I 842 00:37:26,757 --> 00:37:29,340 Я думав, може паралізувати достатньо з досить слів, але я вибіг. 843 00:37:29,340 --> 00:37:35,180 844 00:37:35,180 --> 00:37:38,590 >> У версії одно-- ми йдемо. 845 00:37:38,590 --> 00:37:43,180 У версії однієї, зверніть увагу на following-- і не краща реалізація, 846 00:37:43,180 --> 00:37:44,420 але це мій перший. 847 00:37:44,420 --> 00:37:47,680 Зверніть увагу, що нижче Форма, у мене є сценарій тег. 848 00:37:47,680 --> 00:37:49,430 І сценарій тег означає, агов, браузер, ось 849 00:37:49,430 --> 00:37:52,340 приходить код в, зазвичай JavaScript. 850 00:37:52,340 --> 00:37:54,420 А тепер зверніть увагу, що я роблю. 851 00:37:54,420 --> 00:37:59,070 На line-- я можу ледве прочитати it-- лінії 32, він говорить, 852 00:37:59,070 --> 00:38:01,420 вар form-- так що дайте мені змінна називається форма. 853 00:38:01,420 --> 00:38:05,049 А потім отримати document.getElementId з "реєстрації". 854 00:38:05,049 --> 00:38:05,590 Що це? 855 00:38:05,590 --> 00:38:07,290 Ну, дозвольте мені назад тут. 856 00:38:07,290 --> 00:38:11,510 І зауважте, ах, я дав вид елемента довільна, але описовий ідея 857 00:38:11,510 --> 00:38:13,050 реєстрації. 858 00:38:13,050 --> 00:38:16,820 Так що це дає мені змінна, дозволяє мені захопити цей вузол, 859 00:38:16,820 --> 00:38:19,580 що прямокутник в дереві називається форму. 860 00:38:19,580 --> 00:38:24,460 form.onsubmit кошти, гей-браузер, реєстрації Прослуховувач події 861 00:38:24,460 --> 00:38:25,470 в цій формі. 862 00:38:25,470 --> 00:38:28,890 Іншими словами, коли ця форма представлені, виконати наступний код. 863 00:38:28,890 --> 00:38:30,810 Це не потрібно, тому що ім'я чому ви повинні знати ім'я? 864 00:38:30,810 --> 00:38:32,880 Вам просто потрібно знати, що для виконання, отже 865 00:38:32,880 --> 00:38:35,610 це анонімний або лямбда функції. 866 00:38:35,610 --> 00:38:37,632 І, що функція всі з цих рядків тут. 867 00:38:37,632 --> 00:38:40,840 І тепер, щоб бути чесним, навіть якщо ви можливо, не коли-небудь написаних JavaScript 868 00:38:40,840 --> 00:38:44,200 перш, це просто С і PHP логіка. 869 00:38:44,200 --> 00:38:51,720 Так що, якщо form.email.value == "" - так що якщо поле порожнім електронна пошта, 870 00:38:51,720 --> 00:38:54,980 кричати на користувача з "Ви повинні свою адресу електронної пошти ". 871 00:38:54,980 --> 00:38:58,980 Інакше, якщо form.password.value порожній крик у користувача, 872 00:38:58,980 --> 00:39:00,400 "Ви повинні вказати свій пароль." 873 00:39:00,400 --> 00:39:04,240 >> Більш цікаво логічно, якщо form.password.value НЕ 874 00:39:04,240 --> 00:39:08,630 одно form.confirmation.value-- куди підтвердження прийшли? 875 00:39:08,630 --> 00:39:09,470 Дозвольте мені назад. 876 00:39:09,470 --> 00:39:12,870 Ну, я назвав цей вхід поле тут пароль. 877 00:39:12,870 --> 00:39:15,180 І я назвав цей тут підтвердження. 878 00:39:15,180 --> 00:39:17,850 Я міг би назвати його пароль два або що-небудь ще. 879 00:39:17,850 --> 00:39:20,560 Я просто логічно перевірки що ці два є однаковими. 880 00:39:20,560 --> 00:39:25,760 Else-- виявляється, що це пан Буль again-- логічне значення, прапорець. 881 00:39:25,760 --> 00:39:29,810 Так що, якщо я кажу, знак point-- якщо не form.agreement.checked, 882 00:39:29,810 --> 00:39:31,820 кричати на користувача, а також. 883 00:39:31,820 --> 00:39:34,470 >> Так цей синтаксис ви бачите дуже поширені в JavaScript, 884 00:39:34,470 --> 00:39:35,970 де у вас є цей точками. 885 00:39:35,970 --> 00:39:37,460 Ви починаєте з об'єкта тут. 886 00:39:37,460 --> 00:39:41,430 Ви пірнати глибше, щоб до властивість, як пароль. 887 00:39:41,430 --> 00:39:43,280 І тоді ви отримаєте на його фактичної вартості. 888 00:39:43,280 --> 00:39:45,830 І знову, тут вхід. 889 00:39:45,830 --> 00:39:47,310 Ось це ім'я пароль. 890 00:39:47,310 --> 00:39:50,860 І його значення незалежно від людина насправді набрали в. 891 00:39:50,860 --> 00:39:53,610 >> Так у всіх з них випадки, я повернувся помилковими. 892 00:39:53,610 --> 00:39:55,800 Але якщо ні, я повернуся правда. 893 00:39:55,800 --> 00:39:58,030 І ось тепер ми бачимо переконливим використання при 894 00:39:58,030 --> 00:40:00,620 Ви повернеться хибним зупинити те, що робить користувача 895 00:40:00,620 --> 00:40:03,200 і зробити його або її вибір знову або введіть ще раз. 896 00:40:03,200 --> 00:40:05,870 В іншому випадку, ми повертаємося правда. 897 00:40:05,870 --> 00:40:08,585 >> І дозвольте мені представити одного Інший варіант це просто 898 00:40:08,585 --> 00:40:13,140 щоб насіння його деяке розуміння. 899 00:40:13,140 --> 00:40:16,850 Ну, у версії 2 цього форм-2-- Я зроблю це з помахом руки. 900 00:40:16,850 --> 00:40:19,920 Це для тих, цікаво, версія JQuery, 901 00:40:19,920 --> 00:40:23,330 тих з вас, хто хотів би плескатися в цій конкретній бібліотеці. 902 00:40:23,330 --> 00:40:25,145 Але давайте start-- і будь-які питання? 903 00:40:25,145 --> 00:40:29,230 Дозвольте мені зупинитися на мить, бо Це було швидко і багато. 904 00:40:29,230 --> 00:40:32,610 >> Але хороша річ тут є те, що всі коду в значній мірі те ж саме. 905 00:40:32,610 --> 00:40:33,985 Новий матеріал, що є будинок? 906 00:40:33,985 --> 00:40:35,115 Які ці прямокутники? 907 00:40:35,115 --> 00:40:35,990 Які ці вузли? 908 00:40:35,990 --> 00:40:37,540 Що таке анонімні функції? 909 00:40:37,540 --> 00:40:38,830 Що таке обробник події? 910 00:40:38,830 --> 00:40:43,480 Але, на щастя, більшість того, що це просто повне коло, скажімо, нульовий тижня. 911 00:40:43,480 --> 00:40:43,980 Добре. 912 00:40:43,980 --> 00:40:46,070 Так щось трохи більш цікавим? 913 00:40:46,070 --> 00:40:49,340 Ну, в першу чергу, дозвольте мені перейти вперед і відкрити Google Maps. 914 00:40:49,340 --> 00:40:53,360 І ви помітите, що для момент, на частку секунди, 915 00:40:53,360 --> 00:40:55,930 зауважити, що відбувається, коли Я натисніть досить швидко. 916 00:40:55,930 --> 00:40:59,720 І цей зв'язок в Гарварді так швидко, що ви навіть не помічаєте його. 917 00:40:59,720 --> 00:41:04,469 Але те, що ви ніби як би побачити якщо я натисніть і перетягніть дуже швидко? 918 00:41:04,469 --> 00:41:07,010 Ті з вас перегляду онлайн, якщо ви уповільнити це швидкість 0,5 ×, 919 00:41:07,010 --> 00:41:09,640 Ви можете побачити це краще. 920 00:41:09,640 --> 00:41:13,550 >> Що відбувається просто перш, ніж я натиснув і тягли? 921 00:41:13,550 --> 00:41:15,900 Дозвольте мені спробувати here-- зробимо щось ще, як 90210. 922 00:41:15,900 --> 00:41:17,550 Давайте далеко. 923 00:41:17,550 --> 00:41:19,000 Це було дуже швидко, занадто. 924 00:41:19,000 --> 00:41:22,460 Як щодо Disney World? 925 00:41:22,460 --> 00:41:23,190 Там ми йдемо. 926 00:41:23,190 --> 00:41:23,690 ДОБРЕ. 927 00:41:23,690 --> 00:41:26,030 Що ви бачите на частки секунди? 928 00:41:26,030 --> 00:41:27,200 Просто, як, квадратів, вірно? 929 00:41:27,200 --> 00:41:28,930 Заповнювачі для плитки? 930 00:41:28,930 --> 00:41:30,270 >> Ну, що тут відбувається? 931 00:41:30,270 --> 00:41:35,410 Google Maps є гарним прикладом ця технологія, що називається AJAX. 932 00:41:35,410 --> 00:41:38,510 І це, де ми почнемо використовувати JavaScript зокрема 933 00:41:38,510 --> 00:41:39,277 заманливо шлях. 934 00:41:39,277 --> 00:41:41,610 Назад в день, було Цей сайт називається MapQuest. 935 00:41:41,610 --> 00:41:44,120 І я повинен був прийнято Скріншот цього з 1990-х років, 936 00:41:44,120 --> 00:41:45,820 де, якщо ви хочете, щоб шукати тут, на карті, 937 00:41:45,820 --> 00:41:48,590 Ви буквально натисніть стрілку нагорі, що показав вам, 938 00:41:48,590 --> 00:41:49,870 інший квадрат карті. 939 00:41:49,870 --> 00:41:51,790 Якщо ви хочете, щоб рухатися вліво, ви натиснув стрілку, який показав вам 940 00:41:51,790 --> 00:41:53,210 інший квадрат карті. 941 00:41:53,210 --> 00:41:54,840 А деякі веб-сайти досі це сьогодні. 942 00:41:54,840 --> 00:41:57,820 Але навіть MapQuest отримав краще, як Google Maps. 943 00:41:57,820 --> 00:42:01,880 >> Замість того, що краще них дні сайти, які використовують AJAX. 944 00:42:01,880 --> 00:42:04,510 AJAX-- інакше відомий як Асинхронний JavaScript і XML і 945 00:42:04,510 --> 00:42:08,370 яка є просто химерний спосіб сказати технологія або метод, який 946 00:42:08,370 --> 00:42:14,200 дозволяє, використовуючи браузер JavaScript зробити додаткові запити HTTP 947 00:42:14,200 --> 00:42:16,390 після сторінка була завантажена. 948 00:42:16,390 --> 00:42:17,479 Отже, що ж це означає? 949 00:42:17,479 --> 00:42:19,270 Ну, це було б свого роду дратує в Gmail 950 00:42:19,270 --> 00:42:21,103 якщо кожен раз, ви хотіли перевіряти пошту, 951 00:42:21,103 --> 00:42:24,940 Ви буквально вдарив управління R або- Команда-R або натисніть кнопку Reload 952 00:42:24,940 --> 00:42:26,580 і сторінка цілому штопати б перезавантажити. 953 00:42:26,580 --> 00:42:26,800 Вірно? 954 00:42:26,800 --> 00:42:28,460 Було б блимати білим ймовірно, секунду. 955 00:42:28,460 --> 00:42:30,043 Ви б бачили дурні індикатор. 956 00:42:30,043 --> 00:42:33,170 І просто щоб подивитися, якщо у вас є новий пошта, вся веб-сторінка і URL 957 00:42:33,170 --> 00:42:34,580 Ви знаходитесь на доведеться перезавантажити. 958 00:42:34,580 --> 00:42:35,960 >> Але це не те, що відбувається в Gmail. 959 00:42:35,960 --> 00:42:36,459 Вірно? 960 00:42:36,459 --> 00:42:40,300 Коли ви отримуєте нову електронну пошту в Gmail, те, що відбувається на екрані? 961 00:42:40,300 --> 00:42:41,480 Це просто показує, вгору, вправо? 962 00:42:41,480 --> 00:42:44,280 Це просто чарівно з'являється як нового рядка в таблиці. 963 00:42:44,280 --> 00:42:47,030 Це насправді залучає пристойну кількість складності. 964 00:42:47,030 --> 00:42:51,892 Справді, якщо ви думаєте про це дерево, які, хоча є простим тут, 965 00:42:51,892 --> 00:42:54,100 Gmail--, і я повинен дивитися на код, щоб бути sure-- 966 00:42:54,100 --> 00:42:58,710 ймовірно, має HTML таблицю або, може бути, невпорядкований список, що робить 967 00:42:58,710 --> 00:43:01,060 кожного з ваших поштових скриньках листи як. 968 00:43:01,060 --> 00:43:04,050 >> І тому, якщо ви собі це є це дерево в пам'яті, коли ви 969 00:43:04,050 --> 00:43:09,050 за допомогою Gmail, який виглядає вид роду як це, коли Google розуміє, ох, 970 00:43:09,050 --> 00:43:12,770 у вас є нове повідомлення електронної пошти, це не хочу, щоб відновити всі дерево. 971 00:43:12,770 --> 00:43:16,430 Швидше за все, він хоче, щоб знайти вузол в дерево, яке представляє вашу поштову скриньку 972 00:43:16,430 --> 00:43:18,580 і просто вставити новий вузол. 973 00:43:18,580 --> 00:43:24,640 >> Так дуже схожий на Pset п'ять, де ви довелося вставити вузли в хеш-таблицю, 974 00:43:24,640 --> 00:43:28,410 аналогічно робить Google, за допомогою Код JavaScript, що він написав, 975 00:43:28,410 --> 00:43:31,890 траверс цього дерева, з'ясувати, де є те, що входять до складу вікна, 976 00:43:31,890 --> 00:43:33,440 а потім вставити новий рядок. 977 00:43:33,440 --> 00:43:37,460 І нова рядок просто означає одне або більше нові вузли в дереві. 978 00:43:37,460 --> 00:43:41,340 >> І так AJAX ця техніка що дозволяє саме це. 979 00:43:41,340 --> 00:43:44,440 Після того як ви відвідали URL, Однак з розуму довго це, 980 00:43:44,440 --> 00:43:46,472 і після того, як сторінка має був завантажений, ви все ще можете 981 00:43:46,472 --> 00:43:48,430 захопити більше даних з internet-- Чи це 982 00:43:48,430 --> 00:43:52,460 по електронній пошті або плитка з map-- схопити його за лаштунками 983 00:43:52,460 --> 00:43:55,290 а потім вставте його в сторінку таким чином, що людина насправді не 984 00:43:55,290 --> 00:43:56,910 повинні чекати. 985 00:43:56,910 --> 00:43:58,980 >> Facebook Посланник працює точно так само. 986 00:43:58,980 --> 00:44:01,562 Будь-яка кількість інший websites-- ой, насправді, навіть це. 987 00:44:01,562 --> 00:44:04,270 Я маю на увазі, це, чесно кажучи, вид дратує особливість в ці дні. 988 00:44:04,270 --> 00:44:07,500 Якщо я починаю пошук cats-- це це свого роду жахливої ​​користувацького досвіду. 989 00:44:07,500 --> 00:44:08,990 Це просто починає шукати для мене. 990 00:44:08,990 --> 00:44:10,050 Ну те, що він робить? 991 00:44:10,050 --> 00:44:12,920 URL-адреса дійсно не змінився так як я почав друкувати. 992 00:44:12,920 --> 00:44:17,330 Але те, що відбувається поперек wire-- ОК, хм цікаво. 993 00:44:17,330 --> 00:44:20,470 Що відбувається поперек дроти тут просто отримує більш дивним. 994 00:44:20,470 --> 00:44:21,090 >> ДОБРЕ. 995 00:44:21,090 --> 00:44:24,670 Отже, дозвольте мені йти вперед і перевірити елемент і перейдіть на вкладку Network 996 00:44:24,670 --> 00:44:27,040 і спробувати зробити це технічна і менше про кішок. 997 00:44:27,040 --> 00:44:32,595 Оскільки я друкую, в буквальному сенсі, кішки і-- що відбувається 998 00:44:32,595 --> 00:44:37,710 per-- Я не збираюся натисніть що. 999 00:44:37,710 --> 00:44:38,210 Добре. 1000 00:44:38,210 --> 00:44:44,280 Так тут, що відбувається кожного раз я введіть символ, мабуть? 1001 00:44:44,280 --> 00:44:45,000 Як, низький рівень? 1002 00:44:45,000 --> 00:44:47,860 Те, що відбувається з кожним з тих, символи я друкую на клавіатурі? 1003 00:44:47,860 --> 00:44:48,359 Так? 1004 00:44:48,359 --> 00:44:50,950 АУДИТОРІЯ: [нерозбірливо]. 1005 00:44:50,950 --> 00:44:52,340 >> Девід Малан: Точно. 1006 00:44:52,340 --> 00:44:55,600 Кожен з цих символів збирається Google, по одному. 1007 00:44:55,600 --> 00:44:58,490 Вони будують рядок на своєму сервері, який представляє 1008 00:44:58,490 --> 00:44:59,936 все, що я набрав в досі. 1009 00:44:59,936 --> 00:45:01,810 І кожен раз, коли я типу ще один персонаж, вони 1010 00:45:01,810 --> 00:45:04,530 використовувати їх секретний соус з Алгоритм пошуку і з'ясувати, 1011 00:45:04,530 --> 00:45:07,370 він мав на увазі цю сторінку кішки або цю сторінку кішка або т.п.? 1012 00:45:07,370 --> 00:45:10,620 Таким чином, в певному сенсі, це дає мені з краще досвід, що я навіть не 1013 00:45:10,620 --> 00:45:11,860 потрібно завершити свою думку. 1014 00:45:11,860 --> 00:45:14,440 І справді, це корисний річ, автозаповнення в цілому. 1015 00:45:14,440 --> 00:45:17,690 Якщо їх алгоритми досить добре і якщо мої пошуки достатньо очевидно, 1016 00:45:17,690 --> 00:45:19,300 Я не доведеться набирати ціле слово. 1017 00:45:19,300 --> 00:45:22,110 Вони збираються, щоб сказати мені, що це є насправді я шукав. 1018 00:45:22,110 --> 00:45:25,940 Так що Google називає миттєво Пошук тільки за допомогою AJAX, 1019 00:45:25,940 --> 00:45:30,820 за допомогою коду, який дозволяє їм запитувати додатковий контент через веб-браузер 1020 00:45:30,820 --> 00:45:34,026 за лаштунками з використанням цього Нова мова, JavaScript. 1021 00:45:34,026 --> 00:45:35,400 Отже, ми маємо пару хвилин залишилося. 1022 00:45:35,400 --> 00:45:37,710 І дозвольте мені викликати мого приятеля Колтон на сцену, 1023 00:45:37,710 --> 00:45:40,090 так здавалося Особливо весело востаннє 1024 00:45:40,090 --> 00:45:42,290 ввести технологію що деякі з вас 1025 00:45:42,290 --> 00:45:44,769 висловили зацікавленість в остаточних проектів. 1026 00:45:44,769 --> 00:45:47,310 Ми думали, що це буде весело, щоб принести до добровольцем, хоча, сьогодні 1027 00:45:47,310 --> 00:45:50,074 щоб показати вам додаток до це дозволяє, що you-- да, 1028 00:45:50,074 --> 00:45:50,990 Я бачив цю руку першому. 1029 00:45:50,990 --> 00:45:52,900 Давай до. 1030 00:45:52,900 --> 00:45:53,560 Дуже добре зроблено. 1031 00:45:53,560 --> 00:45:55,035 Хороша робота. 1032 00:45:55,035 --> 00:45:57,410 Я збираюся цього проекту на екран в хвилину. 1033 00:45:57,410 --> 00:45:58,150 Ваше ім'я для всіх? 1034 00:45:58,150 --> 00:45:59,180 >> ОДВ: Я Ефа. 1035 00:45:59,180 --> 00:45:59,410 >> Девід Малан: етанольне? 1036 00:45:59,410 --> 00:45:59,785 >> ОДВ: Ефа. 1037 00:45:59,785 --> 00:46:00,160 >> Девід Малан: Ефа? 1038 00:46:00,160 --> 00:46:00,730 >> ОДВ: Так. 1039 00:46:00,730 --> 00:46:01,250 >> Девід Малан: Приємно бачити вас. 1040 00:46:01,250 --> 00:46:01,600 Добре. 1041 00:46:01,600 --> 00:46:02,590 Дозвольте мені отримати це готові. 1042 00:46:02,590 --> 00:46:04,423 Приходьте до посередині з Колтон тут. 1043 00:46:04,423 --> 00:46:07,050 Що Колтон має у своїх руках сьогодні пульт дистанційного керування. 1044 00:46:07,050 --> 00:46:10,440 Таким чином, замість просто стояти там в тривимірний світ озираючись 1045 00:46:10,440 --> 00:46:14,080 як це зробив Колтон, тепер Ефа може насправді ходити, піднімаючись, 1046 00:46:14,080 --> 00:46:16,689 вниз, вліво і вправо, як у Nintendo або Xbox контролер. 1047 00:46:16,689 --> 00:46:18,230 ОДВ: Я збираюся падати на сцену. 1048 00:46:18,230 --> 00:46:20,500 Девід Малан: я буду стояти приблизно тут. 1049 00:46:20,500 --> 00:46:21,991 Але це ризик. 1050 00:46:21,991 --> 00:46:22,490 ДОБРЕ. 1051 00:46:22,490 --> 00:46:25,690 Так що вперед і покласти на тих ,. 1052 00:46:25,690 --> 00:46:29,315 Дозвольте мені йти вперед і перейти до екрану тут. 1053 00:46:29,315 --> 00:46:30,670 Дозвольте мені тьмяне світло. 1054 00:46:30,670 --> 00:46:32,780 І Колтон, дозвольте мені прийти стенд поруч з вами. 1055 00:46:32,780 --> 00:46:35,520 >> Ви хочете, щоб пояснити тут з мікрофоном, що ми робимо? 1056 00:46:35,520 --> 00:46:36,380 Тут ви йдете. 1057 00:46:36,380 --> 00:46:37,280 >> Колтон: Звичайно. 1058 00:46:37,280 --> 00:46:39,980 Так що зараз ми погрузка на Окулус, 1059 00:46:39,980 --> 00:46:43,070 Я думаю, operating-- не працює системи, але основна програма, де 1060 00:46:43,070 --> 00:46:46,630 Ви можете отримати доступ всі ігри і програми, які знаходяться у вашій бібліотеці. 1061 00:46:46,630 --> 00:46:50,060 Так що зараз, він повинен сказати Тачпед почати. 1062 00:46:50,060 --> 00:46:53,430 Сенсорна панель буде на права сторона гарнітури. 1063 00:46:53,430 --> 00:46:54,569 Так що вперед і tap-- 1064 00:46:54,569 --> 00:46:55,110 ОДВ: О, людина. 1065 00:46:55,110 --> 00:46:56,443 Девід Малан: Так, там ви йдете. 1066 00:46:56,443 --> 00:47:00,340 1067 00:47:00,340 --> 00:47:02,460 Якість Ефа бачить набагато більш високу якість. 1068 00:47:02,460 --> 00:47:03,831 Це тільки Wi-Fi тут. 1069 00:47:03,831 --> 00:47:05,580 Колтон: Так що ви збирається хотіти зробити 1070 00:47:05,580 --> 00:47:08,350 це подивитися в бік верхньої правій частині екрана. 1071 00:47:08,350 --> 00:47:10,420 Так, це гра на дуже верхньому правому куті. 1072 00:47:10,420 --> 00:47:14,780 А потім, коли ви обираєте це, Тачпед знову. 1073 00:47:14,780 --> 00:47:17,010 Я думаю, що його Dreadhalls. 1074 00:47:17,010 --> 00:47:20,820 А потім тут A-- тут, нехай мені тримати ваші окуляри для вас. 1075 00:47:20,820 --> 00:47:24,420 1076 00:47:24,420 --> 00:47:25,790 >> Так що я просто дав йому контролер. 1077 00:47:25,790 --> 00:47:28,886 Так що тепер він може контролювати гру. 1078 00:47:28,886 --> 00:47:30,510 Він може пересуватися тощо. 1079 00:47:30,510 --> 00:47:31,968 Так йдуть вперед і дивляться на вершині. 1080 00:47:31,968 --> 00:47:33,640 Ви повинні побачити нову гру. 1081 00:47:33,640 --> 00:47:36,310 Так що вперед, і ви можете зробити це. 1082 00:47:36,310 --> 00:47:39,320 Тепер, ви повинні бути в змозі контролювати самостійно з контролером, 1083 00:47:39,320 --> 00:47:43,860 а також, як тільки гра завантажує тут. 1084 00:47:43,860 --> 00:47:46,356 Це може бути трохи страшно. 1085 00:47:46,356 --> 00:47:47,300 >> ОДВ: Тепер ви скажіть мені. 1086 00:47:47,300 --> 00:47:50,132 ДОБРЕ. 1087 00:47:50,132 --> 00:47:51,080 >> Колтон: Гаразд. 1088 00:47:51,080 --> 00:47:52,650 Так підтвердити, що ви можете пересуватися. 1089 00:47:52,650 --> 00:47:52,750 ДОБРЕ. 1090 00:47:52,750 --> 00:47:53,583 Ви можете пересуватися. 1091 00:47:53,583 --> 00:47:54,300 Ідеальний. 1092 00:47:54,300 --> 00:47:56,470 Так що, якщо ви подивіться вниз, у вас є карта. 1093 00:47:56,470 --> 00:47:58,170 Карта показує вам, де ви знаходитесь. 1094 00:47:58,170 --> 00:47:59,720 Ви можете подивитися навколо кімнати. 1095 00:47:59,720 --> 00:48:01,440 Ви можете повністю розвернутися. 1096 00:48:01,440 --> 00:48:02,128 Так, саме так. 1097 00:48:02,128 --> 00:48:02,627 Поверніться. 1098 00:48:02,627 --> 00:48:05,370 1099 00:48:05,370 --> 00:48:07,125 >> Так що дивіться на ваш зліва. 1100 00:48:07,125 --> 00:48:09,875 Я думаю, що є щось ви можете забрати на бочці в кімнаті. 1101 00:48:09,875 --> 00:48:11,709 >> ОДВ: Як я можу отримати намітити шляхи? 1102 00:48:11,709 --> 00:48:12,375 Колтон: Подивіться. 1103 00:48:12,375 --> 00:48:12,980 Просто подивіться вгору. 1104 00:48:12,980 --> 00:48:13,480 Добре. 1105 00:48:13,480 --> 00:48:13,765 Ось так. 1106 00:48:13,765 --> 00:48:15,181 Тепер йти вперед і просто розвернутися. 1107 00:48:15,181 --> 00:48:21,460 1108 00:48:21,460 --> 00:48:24,620 Так що дивіться далі наліво. 1109 00:48:24,620 --> 00:48:25,530 Продовжуйте рухатися вліво. 1110 00:48:25,530 --> 00:48:26,960 Продовжуйте дивитися наліво. 1111 00:48:26,960 --> 00:48:27,541 Продовжувати йти. 1112 00:48:27,541 --> 00:48:28,040 Так. 1113 00:48:28,040 --> 00:48:28,720 >> ОДВ: О, це так. 1114 00:48:28,720 --> 00:48:29,261 >> Колтон: Так. 1115 00:48:29,261 --> 00:48:30,999 Підійдіть до нього з контролером. 1116 00:48:30,999 --> 00:48:31,540 Ось так. 1117 00:48:31,540 --> 00:48:32,790 Тепер він повинен сказати забрати його. 1118 00:48:32,790 --> 00:48:33,360 Ось так. 1119 00:48:33,360 --> 00:48:34,290 Забрати його. 1120 00:48:34,290 --> 00:48:35,550 Добре. 1121 00:48:35,550 --> 00:48:38,286 Тепер, давайте вийти з цієї кімнати. 1122 00:48:38,286 --> 00:48:42,209 Ідіть вперед і йти до тієї двері. 1123 00:48:42,209 --> 00:48:45,000 Таким чином, ви будете hold-- він говорить утримуйте кнопку, щоб змусити його відкритим. 1124 00:48:45,000 --> 00:48:46,333 Так що вперед і утримуйте кнопку. 1125 00:48:46,333 --> 00:48:48,250 Так, змушуючи його відкрити. 1126 00:48:48,250 --> 00:48:48,750 Добре. 1127 00:48:48,750 --> 00:48:49,410 Хороша робота. 1128 00:48:49,410 --> 00:48:50,826 Тепер ми йдемо з кімнати. 1129 00:48:50,826 --> 00:48:56,970 1130 00:48:56,970 --> 00:49:01,366 Так що я збираюся залишити інші до Вам і бачити те, що ви дізналися. 1131 00:49:01,366 --> 00:49:02,865 ОДВ: Я не збираюся в темній кімнаті. 1132 00:49:02,865 --> 00:49:07,315 1133 00:49:07,315 --> 00:49:07,815 Ой, почекайте. 1134 00:49:07,815 --> 00:49:09,314 Тепер я повинен йти по темному коридору? 1135 00:49:09,314 --> 00:49:10,785 ОК, я збираюся назад [нерозбірливо]. 1136 00:49:10,785 --> 00:49:15,520 1137 00:49:15,520 --> 00:49:16,270 Колтон: Гаразд. 1138 00:49:16,270 --> 00:49:17,560 Деякі інші елементи, щоб забрати. 1139 00:49:17,560 --> 00:49:19,370 Схоже, кілька монет. 1140 00:49:19,370 --> 00:49:22,242 Це відмичку. 1141 00:49:22,242 --> 00:49:24,200 Так що, якщо ви знайдете замкнений двері, ви можете використовувати. 1142 00:49:24,200 --> 00:49:27,755 1143 00:49:27,755 --> 00:49:28,380 Ви боїтеся? 1144 00:49:28,380 --> 00:49:29,371 >> ОДВ: Поки немає. 1145 00:49:29,371 --> 00:49:29,871 Колтон: ОК. 1146 00:49:29,871 --> 00:49:34,850 1147 00:49:34,850 --> 00:49:35,497 >> Pretend-- так. 1148 00:49:35,497 --> 00:49:37,330 Просто вид ви насправді стояв. 1149 00:49:37,330 --> 00:49:39,580 І якщо ви дозволите around-- Ви повинні звикнути до нього. 1150 00:49:39,580 --> 00:49:40,752 Але це має сенс. 1151 00:49:40,752 --> 00:49:43,960 Девід Малан: І в той час Ефа продовжує грати, так як ми могли б зробити це протягом усього дня, 1152 00:49:43,960 --> 00:49:45,381 ми всі можемо навшпиньках тут. 1153 00:49:45,381 --> 00:49:48,130 Але у нас є два інших пар, якщо ви хочете, щоб підійти і грати. 1154 00:49:48,130 --> 00:49:49,980 В іншому випадку, ми побачимо ви наступного середу. 1155 00:49:49,980 --> 00:49:51,354 Спасибі нашому добровольцем сьогодні. 1156 00:49:51,354 --> 00:49:52,101 [Оплески] 1157 00:49:52,101 --> 00:49:54,506 1158 00:49:54,506 --> 00:49:57,392 >> [МУЗИКА - "Seinfeld ТЕМА"] 1159 00:49:57,392 --> 00:49:58,222 1160 00:49:58,222 --> 00:50:00,180 СПІКЕР 1: Ну, я покласти новий PL змонтувати на. 1161 00:50:00,180 --> 00:50:01,800 Я тільки що змінив OLPF-- 1162 00:50:01,800 --> 00:50:03,980 >> СПІКЕР 2: Так що саме ви робите? 1163 00:50:03,980 --> 00:50:07,063 >> СПІКЕР 1: Ну, кожен з these-- тут, я покажу вам цей тут. 1164 00:50:07,063 --> 00:50:08,690 Ви можете бачити це прямо тут. 1165 00:50:08,690 --> 00:50:09,510 >> СПІКЕР 3: я думаю, що я добре з цим. 1166 00:50:09,510 --> 00:50:09,933 Ви хочете ще? 1167 00:50:09,933 --> 00:50:11,325 >> СПІКЕР 4: Ні, я добре. [Нерозбірливо]. 1168 00:50:11,325 --> 00:50:12,200 >> СПІКЕР 3: Ні, [нерозбірливо]. 1169 00:50:12,200 --> 00:50:12,700 У деяких з них. 1170 00:50:12,700 --> 00:50:21,165 1171 00:50:21,165 --> 00:50:22,290 СПІКЕР 1: Різні кольори. 1172 00:50:22,290 --> 00:50:22,890 СПІКЕР 2: ОК. 1173 00:50:22,890 --> 00:50:26,690 СПІКЕР 1: Так в кінцевому рахунку те, що його робить це регулює колір of--