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 >> DAVID Malan: Това е 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 Faces като тези, очакваме ви в Ню Хейвън. 15 00:00:35,360 --> 00:00:37,800 И, всъщност, Ken в New Haven любезно направи 16 00:00:37,800 --> 00:00:41,594 което се нарича анимиран GIF на Eli тук, в скорошно 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-- OK. 20 00:00:48,179 --> 00:00:49,720 Тук никой не се смее в Кеймбридж. 21 00:00:49,720 --> 00:00:51,720 Но в New Haven, този е наистина смешно, нали? 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 в 16:00 в компютъра науката сграда Maxwell Дворкин. 29 00:01:08,040 --> 00:01:11,890 Ние ще постави този на курса уебсайт, като утре, както добре. 30 00:01:11,890 --> 00:01:14,430 Donuts, аз съм казал, ще бъдат обслужвани. 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 Аз също така, че от страна на старшия year-- имах този Muppet календар. 46 00:01:56,874 --> 00:01:58,540 Muppets са вид на мода тогава. 47 00:01:58,540 --> 00:01:59,456 Или може би те не са били. 48 00:01:59,456 --> 00:02:01,790 Имах Muppet календар тогава. 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 топка, или каквото и да е за сайта на Фрош УИ. 69 00:02:58,040 --> 00:03:01,390 И това е всъщност, наистина на Първият уеб-базиран проект взех on-- 70 00:03:01,390 --> 00:03:03,880 Мисля, че може би второкурсник година, младши year-- 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 че един от моите наследници и приятели, Lee, вид променени 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 но също така, че ще започне да направи целия World Wide Web 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 A език за маркиране, което е просто нещо като луксозен начин на казвайки го 109 00:04:31,650 --> 00:04:35,820 не разполага с програмни конструкции като видяхме дори назад в деня на Scratch. 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 >> CSS, междувременно, по подобен начин Не един език за програмиране. 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 с някои характеристика от двете С и 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 >> DAVID Malan: Кажете отново? 135 00:05:29,930 --> 00:05:31,200 >> АУДИТОРИЯ: Това не е компилиран. 136 00:05:31,200 --> 00:05:31,930 >> DAVID Malan: Това не е компилиран. 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 >> DAVID Malan: Тя работи от страна на клиента, обикновено. 145 00:05:44,000 --> 00:05:47,190 Това е наистина разграничаването характерен за нас в момента. 146 00:05:47,190 --> 00:05:51,170 C е от страна на сървъра, в смисъл, че ние направихме всичко по 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, CS50 IDE и на свой ред, облачни сървъри 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 И това е след това ще бъде IE или 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, достатъчно добре, е супер подобна, синтактично, да C. 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 идентичен на двете С и 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 Но нали ги префикс с Var, обикновено. 213 00:09:00,810 --> 00:09:02,230 И Var означава променлива. 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-- OK, ние ще просто използвайте презентатора бележки. 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 A речника или, по-точно накратко, един обект. 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 Това е HyperText Markup Language [Недоловим] само на "здравей, свят". 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 или Document Object Model. 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 нула, когато говорихме за Scratch. 354 00:15:28,240 --> 00:15:31,390 Повечето от вас вероятно не се е възползвал събитие във вашия Scratch проект. 355 00:15:31,390 --> 00:15:33,850 Но може да се припомни, простата Марко Поло 356 00:15:33,850 --> 00:15:36,760 Например, когато имахме две спрайтове, един от които казаха, Marco. 357 00:15:36,760 --> 00:15:40,180 Другият от които след това, при слушане и слуха, че събитието, заяви, Polo. 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 >> И след това, макар и някак по-евтино, I получите този промпт, който се появи, която казва, 392 00:17:17,940 --> 00:17:19,244 "Здравей, Дейвид!" 393 00:17:19,244 --> 00:17:21,740 Така че това е един вид като нашия "Здравей, свят" 394 00:17:21,740 --> 00:17:25,150 че сме направили известно време назад в C и дори и в PHP, защото съм динамично 395 00:17:25,150 --> 00:17:26,310 изведен моето име. 396 00:17:26,310 --> 00:17:28,230 Мога да направя име на някой друг тук. 397 00:17:28,230 --> 00:17:31,240 Мога просто да промените това да, харесват, Хана, кликнете върху Изпращане. 398 00:17:31,240 --> 00:17:33,780 И наистина, малки изскачащи промени. 399 00:17:33,780 --> 00:17:36,650 >> Сега, изскачащи прозорци са един от повечето малтретирани характеристики на интернет. 400 00:17:36,650 --> 00:17:38,520 И в действителност, обратно в на ден блокиране на изскачащите прозорци 401 00:17:38,520 --> 00:17:40,820 излезе на мода, защото вие ще отида до известна website-- 402 00:17:40,820 --> 00:17:43,604 може би от спорна place-- че би след това изведнъж 403 00:17:43,604 --> 00:17:46,020 започнете peppering вашия екран с цял куп от изскачащи прозорци. 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 Обикновено, ние ще се промени на някой друг URL, като register.php или други подобни. 419 00:18:26,890 --> 00:18:29,560 >> Но дори и когато аз се отхвърли това нещо като кликнете OK, 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 Позволете ми да се отворят раздела Network. 423 00:18:36,860 --> 00:18:38,360 И забележи, че е празна в момента. 424 00:18:38,360 --> 00:18:40,700 Нека да вървим напред и да представи отново Maria. 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 и отидете на View 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 Имам ID, което е един вид ново. 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 Така че това е малко по-свободна, отколкото C. Open фигурна скоба, близо фигурна скоба. 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 и за разлика от C, това няма значение в 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 C е болка в областта на шията, за да направите това. 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-- получите елемент от ID. 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 Отивам да получите на входа елемент има чието ID е "име." 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 много пъти вие ще искате да задържите Shift и щракнете върху Reload. 578 00:25:37,410 --> 00:25:41,480 Това ще принуди всеки файл, за да презареди и не се използва местна кеша на браузъра 579 00:25:41,480 --> 00:25:47,032 или копие, така че сега, нека да вървим напред и да отвори ми инспектор, раздела Network. 580 00:25:47,032 --> 00:25:48,740 Отивам да кликнете Съхрани Log, защото аз 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 Той казва "здравей, Andi." 586 00:25:57,440 --> 00:25:59,420 Позволете ми да кликнете OK. 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 DAVID Malan: Да. 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 >> A функция, да. 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 C също има функция указатели, на способност да се премине и възлага функциите 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 или безименни функции или известен още като ламбда функции? 712 00:31:49,584 --> 00:31:50,190 Two, нали? 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 И след това, само защото аз съм идиот, сега е 123 456 789. 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 Malan, 12345, 123 456 789, а не Ще отметка в квадратчето, регистрирайте. 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 DAVID Malan: О, интересно. 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 >> DAVID Malan: Да. 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 има само ограничен размер на RAM, краен брой гигахерца, 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 Plus, особено по мобилните 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 Но в една версия, където I Започнах да получите тези изскачащи прозорци, 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 >> Във версия one-- там отиваме. 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 Var 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 и преди, това е просто C и 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 Новият неща е това, което е най-DOM? 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 забележите, какво става, когато I кликнете достатъчно бързо. 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-- ми позволява нещо друго, като 90 210. 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-- иначе известни като Asynchronous 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 бяхте буквално удари Control-R или Command-R или щракнете върху бутона за презареждане 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 Messenger работи по същия начин. 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-- OK, хмм интересно. 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 Като пиша, буквално, котки and-- какво се случва 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 Така че тук, какво се случва всеки път I въведете символ, както изглежда? 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 >> DAVID Malan: Точно така. 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 >> EFA: Аз съм Efa. 1035 00:45:59,180 --> 00:45:59,410 >> DAVID Malan: Etha? 1036 00:45:59,410 --> 00:45:59,785 >> EFA: Efa. 1037 00:45:59,785 --> 00:46:00,160 >> DAVID Malan: Efa? 1038 00:46:00,160 --> 00:46:00,730 >> EFA: Да. 1039 00:46:00,730 --> 00:46:01,250 >> DAVID Malan: Радвам се да ви видя. 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 като Колтън е направил, сега може Efa действително се разхожда с върви нагоре, 1046 00:46:14,080 --> 00:46:16,689 надолу, наляво и надясно като Nintendo или Xbox контролер. 1047 00:46:16,689 --> 00:46:18,230 EFA: Отивам да падне от сцената. 1048 00:46:18,230 --> 00:46:20,500 DAVID Malan: Аз искам престои приблизително тук. 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 >> COLTON: Разбира се. 1058 00:46:37,280 --> 00:46:39,980 Така че в момента ние сме зареждане на Oculus, 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 Touchpad ще бъде на дясната страна на слушалката. 1063 00:46:53,430 --> 00:46:54,569 Така че продължавайте напред и tap-- 1064 00:46:54,569 --> 00:46:55,110 EFA: О, човече. 1065 00:46:55,110 --> 00:46:56,443 DAVID Malan: Да, там ще отида. 1066 00:46:56,443 --> 00:47:00,340 1067 00:47:00,340 --> 00:47:02,460 Качеството Efa се виждат е много по-високо качество. 1068 00:47:02,460 --> 00:47:03,831 Това е само Wi-Fi тук. 1069 00:47:03,831 --> 00:47:05,580 COLTON: Така че това, което сте ще искате да направите, 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 Трябва да видите New Game. 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 >> EFA: Сега ли да ми кажете. 1086 00:47:47,300 --> 00:47:50,132 ДОБРЕ. 1087 00:47:50,132 --> 00:47:51,080 >> COLTON: Добре. 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 Perfect. 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 >> EFA: Как да получите най- Карта от пътя? 1102 00:48:11,709 --> 00:48:12,375 COLTON: Погледни нагоре. 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 >> EFA: О, по този начин. 1114 00:48:28,720 --> 00:48:29,261 >> COLTON: Да. 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 EFA: Аз не отивам в тъмната стая. 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 OK, Връщам [недоловим]. 1136 00:49:10,785 --> 00:49:15,520 1137 00:49:15,520 --> 00:49:16,270 COLTON: Добре. 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 >> EFA: Не още. 1145 00:49:29,371 --> 00:49:29,871 COLTON: OK. 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 DAVID Malan: И докато Efa продължава да играе, тъй като бихме могли да направим това по цял ден, 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 >> [MUSIC - "Зайнфелд ТЕМА"] 1159 00:49:57,392 --> 00:49:58,222 1160 00:49:58,222 --> 00:50:00,180 SPEAKER 1: Ами, аз съм поставяне на нова PL монтирате на. 1161 00:50:00,180 --> 00:50:01,800 Току-що промених на OLPF-- 1162 00:50:01,800 --> 00:50:03,980 >> SPEAKER 2: Така че това, което точно правиш? 1163 00:50:03,980 --> 00:50:07,063 >> SPEAKER 1: Е, всеки един от these-- тук, аз ще ви покажа това тук. 1164 00:50:07,063 --> 00:50:08,690 Можете да я видите тук. 1165 00:50:08,690 --> 00:50:09,510 >> SPEAKER 3: Мисля, че съм добър с тях. 1166 00:50:09,510 --> 00:50:09,933 Искаш ли още? 1167 00:50:09,933 --> 00:50:11,325 >> SPEAKER 4: Не, аз съм добре. [Недоловим]. 1168 00:50:11,325 --> 00:50:12,200 >> SPEAKER 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 SPEAKER 1: Различен цвят. 1172 00:50:22,290 --> 00:50:22,890 SPEAKER 2: OK. 1173 00:50:22,890 --> 00:50:26,690 SPEAKER 1: Така че в крайна сметка това, което прави, е да го настройва цветовете of--