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 "привет David!" 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--