1 00:00:00,000 --> 00:00:02,862 >> [MUSIC SPILLE] 2 00:00:02,862 --> 00:00:10,030 3 00:00:10,030 --> 00:00:11,580 >> DAVID MALAN: Dette er CS50. 4 00:00:11,580 --> 00:00:12,880 Dette er starten på uken ni. 5 00:00:12,880 --> 00:00:15,797 Og dette er hva som ville ha vært Mr. Boole 200-årsdag. 6 00:00:15,797 --> 00:00:17,630 Så dette er fellows til hvem vi har hentydet 7 00:00:17,630 --> 00:00:21,800 ganske noen ganger om bruk Boolske variabler sant og usant, 8 00:00:21,800 --> 00:00:22,910 1 og 0 og slikt. 9 00:00:22,910 --> 00:00:25,270 Og dette var Googles hyllest til ham i dag. 10 00:00:25,270 --> 00:00:26,489 Han ville ha slått 200. 11 00:00:26,489 --> 00:00:28,280 Så hvis du ønsker å bli med oss ​​for CS50 lunsj 12 00:00:28,280 --> 00:00:30,279 ta en titt på linken på kursets hjemmeside. 13 00:00:30,279 --> 00:00:33,580 Og slike ansikter og venner som disse venter deg her i Cambridge. 14 00:00:33,580 --> 00:00:35,360 Ansikter som disse venter deg i New Haven. 15 00:00:35,360 --> 00:00:37,800 Og, faktisk, i Ken New Haven vennlig gjort 16 00:00:37,800 --> 00:00:41,594 det som kalles en animert GIF av Eli her på en nylig lunch-- en GIF er ennå 17 00:00:41,594 --> 00:00:44,260 en annen grafisk filformat, som du er familiar-- at 18 00:00:44,260 --> 00:00:46,300 ser litt noe sånt som dette. 19 00:00:46,300 --> 00:00:48,179 Så bare en sekvens of-- OK. 20 00:00:48,179 --> 00:00:49,720 Ingen her i Cambridge ler. 21 00:00:49,720 --> 00:00:51,720 Men i New Haven, denne er virkelig morsomt, ikke sant? 22 00:00:51,720 --> 00:00:52,350 Greit. 23 00:00:52,350 --> 00:00:53,940 >> Så bli med oss ​​der. 24 00:00:53,940 --> 00:00:55,900 Her på Harvard, spesifikt, denne onsdagen, 25 00:00:55,900 --> 00:00:59,480 hvis du er en sophomore eller freshman even-- eller junior-- tenker på å gjøre 26 00:00:59,480 --> 00:01:01,563 en bryter inn i datamaskinen vitenskap, vet at det vil 27 00:01:01,563 --> 00:01:04,440 bli en CS rådgivning rettferdig dette Onsdag, kort tid etter klasse 28 00:01:04,440 --> 00:01:08,040 4:00 PM i datamaskinen vitenskapsbygg Maxwell Dworkin. 29 00:01:08,040 --> 00:01:11,890 Vi vil sette dette på kursets nettside i morgen, også. 30 00:01:11,890 --> 00:01:14,430 Donuts, jeg er blitt fortalt, vil bli servert. 31 00:01:14,430 --> 00:01:15,180 >> Greit. 32 00:01:15,180 --> 00:01:18,790 Så morsomt story-- jeg var poking rundt på internett, 33 00:01:18,790 --> 00:01:23,575 og jeg fant noen gamle arkiver av min tidligere nettside. 34 00:01:23,575 --> 00:01:25,950 Og det viser out-- rundt dette tid, virker det svært betimelig 35 00:01:25,950 --> 00:01:28,910 siden jeg samle at UC valget er i ferd med å gire opp igjen. 36 00:01:28,910 --> 00:01:32,230 Så jeg løp for UC, tapte stort. 37 00:01:32,230 --> 00:01:34,770 Og kanskje dette var delvis hvorfor. 38 00:01:34,770 --> 00:01:37,600 Så dette var min hjemmeside på tiden. 39 00:01:37,600 --> 00:01:40,477 For noen grunn, jeg trodde det var en god idé, før fortelle folk 40 00:01:40,477 --> 00:01:43,310 hva min plattformen var og hvorfor de bør stemme på meg, at de har 41 00:01:43,310 --> 00:01:47,770 til å klikke for å gå inn for å finne ut at informasjon, som i ettertid er 42 00:01:47,770 --> 00:01:48,660 litt skummel. 43 00:01:48,660 --> 00:01:50,910 Jeg vet egentlig ikke hva det var. 44 00:01:50,910 --> 00:01:53,140 >> Men det absolutt ikke hjelpe kampanjen min. 45 00:01:53,140 --> 00:01:56,874 Jeg har også funnet at ved senior year-- Jeg hadde denne Muppet kalenderen. 46 00:01:56,874 --> 00:01:58,540 Muppets var slags på moten tilbake da. 47 00:01:58,540 --> 00:01:59,456 Eller kanskje de ikke var. 48 00:01:59,456 --> 00:02:01,790 Jeg hadde en Muppet kalender tilbake da. 49 00:02:01,790 --> 00:02:04,860 Og jeg tenkte at det ville være kult å navn datamaskinen min på Harvard nettverk 50 00:02:04,860 --> 00:02:07,460 frogman.student.harvard.edu. 51 00:02:07,460 --> 00:02:10,370 På den tiden hadde vi alle entydig identifiserbare vertsnavn. 52 00:02:10,370 --> 00:02:13,150 Og du kan velge noen forfengelighet navn i stedet for ditt eget navn. 53 00:02:13,150 --> 00:02:15,580 Og jeg gikk med froskemann eller annen grunn. 54 00:02:15,580 --> 00:02:19,040 >> Og da jeg started-- Jeg tilbrakte mye tid klikke deg inn på disse linkene 55 00:02:19,040 --> 00:02:20,280 denne morgenen. 56 00:02:20,280 --> 00:02:24,690 Og dette var min om side, som nå slags virker søt. 57 00:02:24,690 --> 00:02:28,210 Men det vitner også å bare hvor langt teknologien har kommet. 58 00:02:28,210 --> 00:02:30,310 Jeg mener, tilbake i dag, en 486 var noe. 59 00:02:30,310 --> 00:02:34,090 I disse dager er det super, super, super slow og godt mindre 60 00:02:34,090 --> 00:02:36,216 enn du kan ha i din egne lommer i disse dager. 61 00:02:36,216 --> 00:02:38,465 Det er mer på det som var enda mer pinlig. 62 00:02:38,465 --> 00:02:39,770 Så jeg skal la det bli med det. 63 00:02:39,770 --> 00:02:42,640 Men det var min første streiftog inn web-- oh, nei. 64 00:02:42,640 --> 00:02:43,180 Det var ikke. 65 00:02:43,180 --> 00:02:47,000 Min første virkelige steg inn i web-programmering var dette stedet, som jeg bare glemte. 66 00:02:47,000 --> 00:02:50,620 På et tidspunkt, lærte jeg å gjøre repetitive bakgrunnsbilder. 67 00:02:50,620 --> 00:02:55,260 Og så fant jeg dette flislegging effektive, som hockeyspiller, fotball og golf 68 00:02:55,260 --> 00:02:58,040 ball, eller hva som er for Frosh lynmeldinger nettside. 69 00:02:58,040 --> 00:03:01,390 Og dette var faktisk, oppriktig første web-basert prosjekt jeg tok on-- 70 00:03:01,390 --> 00:03:03,880 Jeg tror kanskje sophomore år, junior year-- 71 00:03:03,880 --> 00:03:07,622 etter å ha tatt CS50 og CS51, en av felles oppfølgings klasser. 72 00:03:07,622 --> 00:03:09,330 Jeg la merke til i letingen gjennom arkivene 73 00:03:09,330 --> 00:03:12,150 at en av mine etterfølgere og venner, Lee, type endret 74 00:03:12,150 --> 00:03:13,480 opphavsretten til seg selv. 75 00:03:13,480 --> 00:03:17,520 Men dette var faktisk noe som Jeg skal eie forlegenhet til. 76 00:03:17,520 --> 00:03:19,370 Men på den tiden, dette var den første nettsiden, 77 00:03:19,370 --> 00:03:22,220 som jeg sa for noen uker siden, der freshman kunne 78 00:03:22,220 --> 00:03:24,350 registrer for egenutført sport her. 79 00:03:24,350 --> 00:03:27,950 Og så viser det seg at bakgrunnsbilder 80 00:03:27,950 --> 00:03:29,530 sånn er ikke så lurt. 81 00:03:29,530 --> 00:03:31,840 Men nettet var ny, og vi var alle eksperimentere. 82 00:03:31,840 --> 00:03:34,310 Og dette er hva jeg tilsynelatende gjorde på den tiden. 83 00:03:34,310 --> 00:03:34,810 Greit. 84 00:03:34,810 --> 00:03:38,020 Så uten videre, vi bytter tannhjul i dag for å gi deg, egentlig, 85 00:03:38,020 --> 00:03:42,250 den siste brikken som du kan finne spesielt nyttig for avsluttende prosjekter 86 00:03:42,250 --> 00:03:44,780 men også at det vil begynne å gjøre hele world wide web 87 00:03:44,780 --> 00:03:46,680 føler meg litt mer forståelig. 88 00:03:46,680 --> 00:03:49,460 Ja, vi kommer til å introdusere ett programmeringsspråk 89 00:03:49,460 --> 00:03:52,474 kalt Javascript som ligner og forskjellig på forskjellige måter 90 00:03:52,474 --> 00:03:54,140 fra språk har vi sett på så langt. 91 00:03:54,140 --> 00:03:55,807 >> Så C, husker, er dette kompilert språk. 92 00:03:55,807 --> 00:03:57,473 Du er nødt til å kjøre det gjennom en kompilator. 93 00:03:57,473 --> 00:03:59,810 Du får kildekoden til objekt kode, eller nuller og enere. 94 00:03:59,810 --> 00:04:03,000 Og de er nuller og enere som CPU, Central Processing Unit, 95 00:04:03,000 --> 00:04:04,360 faktisk forstår. 96 00:04:04,360 --> 00:04:06,610 PHP, derimot, er ikke et kompilert språk. 97 00:04:06,610 --> 00:04:08,772 Det er en hva? 98 00:04:08,772 --> 00:04:09,980 Det er et tolket språk. 99 00:04:09,980 --> 00:04:11,750 Så det er noen program kalt en tolk som 100 00:04:11,750 --> 00:04:13,708 har å lese it-- topp til bunn, venstre til right-- 101 00:04:13,708 --> 00:04:16,519 og finne ut hva alle syntaksen gjør og betyr, 102 00:04:16,519 --> 00:04:20,200 enten det er en sløyfe eller en tilstand eller hvilket som helst annet antall programmerings 103 00:04:20,200 --> 00:04:20,740 konstruerer. 104 00:04:20,740 --> 00:04:22,210 Så det er et tolket språk. 105 00:04:22,210 --> 00:04:23,910 >> Da vi introduserte HTML. 106 00:04:23,910 --> 00:04:26,440 Og HTML er ikke engang en programmeringsspråk. 107 00:04:26,440 --> 00:04:28,110 Vi vil kalle det hva? 108 00:04:28,110 --> 00:04:31,650 En kodespråk, som er like en slags fancy måte å si det 109 00:04:31,650 --> 00:04:35,820 ikke har programmering konstruerer som vi så selv tilbake i dag av Scratch. 110 00:04:35,820 --> 00:04:36,720 Det er ingen løkker. 111 00:04:36,720 --> 00:04:37,920 Det er ingen forhold. 112 00:04:37,920 --> 00:04:40,820 Det er egentlig et språk om merking av dine data 113 00:04:40,820 --> 00:04:43,620 og formatere den eller strukturere det på noen måte. 114 00:04:43,620 --> 00:04:46,147 >> CSS, i mellomtiden, på samme måte ikke et programmeringsspråk. 115 00:04:46,147 --> 00:04:47,730 Det er enda mer estetisk orienterte. 116 00:04:47,730 --> 00:04:50,470 Og det tillater deg å sortere av fininnstille ting som skriftstørrelse og farger 117 00:04:50,470 --> 00:04:51,850 og plassering, og alt dette. 118 00:04:51,850 --> 00:04:52,370 Da hadde vi 119 00:04:52,370 --> 00:04:53,160 >> SQL. 120 00:04:53,160 --> 00:04:56,010 Så SQL er faktisk et programmerings språk i en viss forstand 121 00:04:56,010 --> 00:04:59,330 riktignok skreddersydd spesielt til databaser. 122 00:04:59,330 --> 00:05:03,347 Men selv om vi bare presentere deg for velge og sette inn og slette og oppdatere 123 00:05:03,347 --> 00:05:05,430 og et par andre, viser seg kan du faktisk 124 00:05:05,430 --> 00:05:07,380 skrive funksjoner eller prosedyrer, som de er 125 00:05:07,380 --> 00:05:11,270 heter, i SQL som ser og handle helt som PHP og C-funksjoner. 126 00:05:11,270 --> 00:05:12,390 Så vet at de eksisterer. 127 00:05:12,390 --> 00:05:15,348 Men vi trenger ikke engang bry seg med dem som vi bare skraper i overflaten her. 128 00:05:15,348 --> 00:05:18,600 Og deretter Javascript, den siste av vårt språk formelt innført. 129 00:05:18,600 --> 00:05:21,029 Så Javascript, også er et tolket språk. 130 00:05:21,029 --> 00:05:23,070 Og de som er kjent, gjør du ønsker å skille det 131 00:05:23,070 --> 00:05:26,960 med noen karakteristiske fra både C og PHP? 132 00:05:26,960 --> 00:05:28,300 Hva gjør det annerledes? 133 00:05:28,300 --> 00:05:29,650 >> PUBLIKUM: Det er ikke utarbeidet. 134 00:05:29,650 --> 00:05:29,930 >> DAVID MALAN: Si igjen? 135 00:05:29,930 --> 00:05:31,200 >> PUBLIKUM: Det er ikke utarbeidet. 136 00:05:31,200 --> 00:05:31,930 >> DAVID MALAN: Det er ikke utarbeidet. 137 00:05:31,930 --> 00:05:33,450 Så det også tolkes. 138 00:05:33,450 --> 00:05:34,760 Så det er ikke utarbeidet. 139 00:05:34,760 --> 00:05:37,210 Men det gjør det litt som PHP. 140 00:05:37,210 --> 00:05:39,545 Men det er fortsatt forskjellig fra PHP i noen slående måte, 141 00:05:39,545 --> 00:05:40,920 minst i måten vi vil bruke den. 142 00:05:40,920 --> 00:05:41,205 Yeah? 143 00:05:41,205 --> 00:05:41,940 >> PUBLIKUM: Det kjører på klientsiden. 144 00:05:41,940 --> 00:05:44,000 >> DAVID MALAN: Det kjører klientsiden, vanligvis. 145 00:05:44,000 --> 00:05:47,190 Det er faktisk den karakteristiske karakteristisk for oss akkurat nå. 146 00:05:47,190 --> 00:05:51,170 C var server-side i den forstand at vi gjorde alt i CS50 IDE. 147 00:05:51,170 --> 00:05:53,630 PHP hittil har vært server-side i den utstrekning 148 00:05:53,630 --> 00:05:56,550 som det også, får interpreted-- ikke utarbeidet, men interpreted-- 149 00:05:56,550 --> 00:06:00,690 inne CS50 IDE, som selvfølgelig er bare en server eller servere i nettskyen. 150 00:06:00,690 --> 00:06:03,070 >> Men Javascript, selv om du du kommer 151 00:06:03,070 --> 00:06:07,000 å begynne å skrive det for, si, PSet åtte og kanskje endelig projects-- du er 152 00:06:07,000 --> 00:06:09,620 kommer til å rette den opp i CS50 IDE og lagre det 153 00:06:09,620 --> 00:06:14,760 i filer i CS50 IDE, CS50 IDE og i sin tur, de sky servere 154 00:06:14,760 --> 00:06:19,160 som det er vert, ikke kommer å tolke eller kjøre koden din. 155 00:06:19,160 --> 00:06:23,880 Snarere, det kommer til å bli sendt i uforandret form ned til nettleseren. 156 00:06:23,880 --> 00:06:26,990 Og det er da kommer til å være IE eller Chrome eller Firefox eller Safari 157 00:06:26,990 --> 00:06:30,697 eller hva som faktisk tolker det, øverst til nederst, venstre til høyre. 158 00:06:30,697 --> 00:06:32,780 Så nøkkelen sært karakteristisk for i dag 159 00:06:32,780 --> 00:06:36,110 er at Javascript er klientsiden og PHP, for eksempel, 160 00:06:36,110 --> 00:06:37,690 har vært på serversiden. 161 00:06:37,690 --> 00:06:40,920 Nå har dette interessante implikasjoner for, som, intellektuell eiendom 162 00:06:40,920 --> 00:06:42,660 og som faktisk kan se koden din. 163 00:06:42,660 --> 00:06:44,860 Og ja, kan du gå på nettet og se mest 164 00:06:44,860 --> 00:06:47,530 noen kode som noen har skrevet i Javascript. 165 00:06:47,530 --> 00:06:50,230 Noen ganger er det lesbar, Noen ganger er det uklar. 166 00:06:50,230 --> 00:06:52,550 Men mer om det i rett tid. 167 00:06:52,550 --> 00:06:57,530 >> Så Javascript, pent nok, er super lignende, syntaktisk, til C. 168 00:06:57,530 --> 00:06:59,364 Og mye som PHP, det er ingen hovedfunksjon. 169 00:06:59,364 --> 00:07:02,113 Hvis du ønsker å begynne å skrive Javascript-kode, som du ser i dag, 170 00:07:02,113 --> 00:07:03,270 du bare begynne å skrive den. 171 00:07:03,270 --> 00:07:06,910 Men det er, vil du se, spesielt nyttige i forbindelse med nettlesere. 172 00:07:06,910 --> 00:07:09,820 Men min lille disclaimer-- vanligvis earlier-- 173 00:07:09,820 --> 00:07:13,790 var å si at du kan stadig i dag bruker Javascript server-side 174 00:07:13,790 --> 00:07:17,655 ved hjelp av en fancy rammeverk kalt Node.js at noen av CS50 egne applikasjoner 175 00:07:17,655 --> 00:07:18,280 er skrevet i. 176 00:07:18,280 --> 00:07:20,640 Sjekk 50 faktisk bruker node.js. 177 00:07:20,640 --> 00:07:24,140 Men vi kommer til å fokusere på Javascript klientsiden her på ut. 178 00:07:24,140 --> 00:07:26,750 >> Så her er et sett av betingelser i PHP. 179 00:07:26,750 --> 00:07:29,350 Beklager, in-- faktisk, at uttalelse, er også riktig. 180 00:07:29,350 --> 00:07:32,200 Her er også et sett med forholdene i Javascript. 181 00:07:32,200 --> 00:07:35,560 Syntaktisk, er det identisk med C og PHP. 182 00:07:35,560 --> 00:07:39,040 Mr. Boole 's uttrykk er, på samme måte, syntaktisk 183 00:07:39,040 --> 00:07:41,190 identisk med både C og PHP. 184 00:07:41,190 --> 00:07:44,100 Vi har også brytere i Javascript som ser identiske. 185 00:07:44,100 --> 00:07:46,350 Vi har for løkker som er strukturert likt, 186 00:07:46,350 --> 00:07:48,140 mens looper, gjøre mens sløyfer. 187 00:07:48,140 --> 00:07:49,980 >> Denne er litt annerledes. 188 00:07:49,980 --> 00:07:53,120 PHP hadde for hver konstruksjon at du kan være å bruke 189 00:07:53,120 --> 00:07:55,320 eller vil bruke i PSet sju, kanskje. 190 00:07:55,320 --> 00:07:59,460 Javascript har denne spesialversjonen av for hvor du bokstavelig talt si noe 191 00:07:59,460 --> 00:08:03,864 som for variabel nøkkelen i objekt, som er en veldig konsis måte å si: 192 00:08:03,864 --> 00:08:06,780 hvis jeg har fått en object-- og vi vil snakke om disse på nytt i en moment-- 193 00:08:06,780 --> 00:08:10,370 og jeg ønsker å iterere over alle av de viktigste verdi parene inne, 194 00:08:10,370 --> 00:08:13,620 Jeg trenger ikke å finne ut hvordan du numerisk indeksere dem med null, en, 195 00:08:13,620 --> 00:08:14,580 to, tre. 196 00:08:14,580 --> 00:08:15,900 >> Jeg kan bokstavelig talt si dette. 197 00:08:15,900 --> 00:08:20,740 Og på hver iterasjon, Javascript for meg vil oppdatere variable nøkkelen 198 00:08:20,740 --> 00:08:24,810 å være den første nøkkelen, og deretter den neste tasten, deretter den neste tasten, deretter den neste tasten, 199 00:08:24,810 --> 00:08:25,510 og så videre. 200 00:08:25,510 --> 00:08:30,000 Og jeg kan få sin verdi ved å behandle et objekt i Javascript, som vi skal se, 201 00:08:30,000 --> 00:08:32,584 som om det er en assosiativ array i PHP. 202 00:08:32,584 --> 00:08:35,750 Faktisk, hvis du endelig pakket din tankene rundt hva en assosiativ array er 203 00:08:35,750 --> 00:08:40,140 i PHP, kan du tenke på det for nå som identisk med et objekt i Javascript. 204 00:08:40,140 --> 00:08:42,030 Men det er litt av en overforenkling. 205 00:08:42,030 --> 00:08:47,230 >> Arrays se, pent nok, identisk til PHP unntatt ett tegn. 206 00:08:47,230 --> 00:08:51,425 Det er en ting som mangler her at vi fikk se i forrige uke med PHP. 207 00:08:51,425 --> 00:08:52,050 Hva er utelatt? 208 00:08:52,050 --> 00:08:53,310 Yeah? 209 00:08:53,310 --> 00:08:54,090 Ingen dollartegn. 210 00:08:54,090 --> 00:08:56,240 Så er vi tilbake til en mer normal verden der 211 00:08:56,240 --> 00:08:58,050 variablene ikke har dollartegn. 212 00:08:58,050 --> 00:09:00,810 Men du prefiks dem med var, typisk. 213 00:09:00,810 --> 00:09:02,230 Og Var betyr variabel. 214 00:09:02,230 --> 00:09:06,440 Og mye som PHP er løst typed-- der det er typer, 215 00:09:06,440 --> 00:09:10,120 det er tall og strenger og flyter og så forth-- 216 00:09:10,120 --> 00:09:11,570 Javascript tilsvar har typer. 217 00:09:11,570 --> 00:09:15,470 Men det er løst skrevet i at vi programmerere behøver ikke å spesifisere dem. 218 00:09:15,470 --> 00:09:18,980 Vi må bare være klar at ulike typer finnes. 219 00:09:18,980 --> 00:09:21,690 >> Variabler, her er meanwhile-- hvordan vi kan erklære "Hei, verden" 220 00:09:21,690 --> 00:09:22,230 som en streng. 221 00:09:22,230 --> 00:09:24,890 Legg merke til det er identisk med PHP men ingen dollartegn. 222 00:09:24,890 --> 00:09:27,120 Og dette er noe vi vil begynner å se mer i dag, 223 00:09:27,120 --> 00:09:30,990 der du har et objekt med nøkler og verdier. 224 00:09:30,990 --> 00:09:32,990 Og hvis du ønsker å prøve å slutte fra forrige week-- 225 00:09:32,990 --> 00:09:34,730 syntaksen er litt annerledes. 226 00:09:34,730 --> 00:09:39,740 Men litt sunn fornuft check-- hvor mange tastene gjør dette objektet ser ut til å ha? 227 00:09:39,740 --> 00:09:40,850 Så jeg ser fire. 228 00:09:40,850 --> 00:09:43,560 Jeg ser to. 229 00:09:43,560 --> 00:09:44,680 >> Så det er faktisk to. 230 00:09:44,680 --> 00:09:47,260 Så dette er en samling av to nøkkelverdipar. 231 00:09:47,260 --> 00:09:49,820 Nøkkelen er symbol der verdien er FB. 232 00:09:49,820 --> 00:09:52,620 Nøkkelen er prisen der verdien er 101,53. 233 00:09:52,620 --> 00:09:54,230 Så de er to nøkkelverdipar. 234 00:09:54,230 --> 00:09:58,120 Og husk, PHP-- og dette er igjen bare slags syntaktisk forskjell. 235 00:09:58,120 --> 00:10:00,170 Det er ikke alle som intellektuelt interessant. 236 00:10:00,170 --> 00:10:04,610 PHP kan ha skrevet denne samme ting som follows-- sitat, likeverdige. 237 00:10:04,610 --> 00:10:06,730 Og jeg endre disse til hakeparenteser. 238 00:10:06,730 --> 00:10:11,240 Og da jeg endre dette til et siterte ord, "pris". 239 00:10:11,240 --> 00:10:12,500 Og da jeg ikke bruker et kolon. 240 00:10:12,500 --> 00:10:15,060 Hva gjorde jeg bruke i forrige uke? 241 00:10:15,060 --> 00:10:18,290 Ja, likhetstegnet arrow funky notasjon. 242 00:10:18,290 --> 00:10:21,470 >> Og så jeg gjorde det samme her. 243 00:10:21,470 --> 00:10:23,580 Samme her. 244 00:10:23,580 --> 00:10:24,240 Og det er alt. 245 00:10:24,240 --> 00:10:27,752 Så det er fint hvis dette har ikke virkelig sunket inn i minnet bare 246 00:10:27,752 --> 00:10:29,960 men fordi det er veldig intellektuelt uinteressant. 247 00:10:29,960 --> 00:10:31,660 Det er bare syntaktiske forskjeller. 248 00:10:31,660 --> 00:10:33,230 Men ideene er nøyaktig det samme. 249 00:10:33,230 --> 00:10:35,910 Innsiden av denne variabelen sitat i Javascript 250 00:10:35,910 --> 00:10:39,020 er en samling av nøkkelverdipar, hvorav den ene er symbol, hvorav 251 00:10:39,020 --> 00:10:39,690 er prisen. 252 00:10:39,690 --> 00:10:42,340 Og jeg kan få på disse verdiene med følgende syntaks. 253 00:10:42,340 --> 00:10:46,280 Akkurat som i PHP, jeg kunne gjøre noe like-- la 254 00:10:46,280 --> 00:10:48,590 meg gjøre denne boksen litt større. 255 00:10:48,590 --> 00:10:52,750 Akkurat som i PHP, jeg kunne gjøre dette-- oh, for faen. 256 00:10:52,750 --> 00:10:53,250 Kom igjen. 257 00:10:53,250 --> 00:10:56,350 258 00:10:56,350 --> 00:11:00,800 >> Akkurat som i PHP-- OK, vil vi bare bruke den som presenterer notater. 259 00:11:00,800 --> 00:11:06,010 Akkurat som i PHP, kan jeg gjøre $ quote $ quote ["symbolet"] 260 00:11:06,010 --> 00:11:08,860 og dette vil få meg verdien av "symbol". 261 00:11:08,860 --> 00:11:12,800 I Javascript, kommer det til å være identiske, der jeg kan bare gjøre dette. 262 00:11:12,800 --> 00:11:14,850 Det eneste som er mangler er dollartegn. 263 00:11:14,850 --> 00:11:17,470 >> Så pent nok, så er det Ikke så mye nytt syntaks. 264 00:11:17,470 --> 00:11:21,025 Så hva vi i dag fokuserer på, egentlig, er noen av ideene og programmene. 265 00:11:21,025 --> 00:11:22,900 Og den første slike applikasjon som du kanskje 266 00:11:22,900 --> 00:11:26,090 har sett hvis du stupte inn PSet sju allerede er dette syntaks. 267 00:11:26,090 --> 00:11:28,980 Så i PSet syv, hvis du har sett eller ikke sett den ennå, 268 00:11:28,980 --> 00:11:33,570 vet at det er en fil som vi gir du ringte config.json-- Java 269 00:11:33,570 --> 00:11:34,661 Object Notation. 270 00:11:34,661 --> 00:11:35,160 Hvorfor? 271 00:11:35,160 --> 00:11:39,540 Vi ønsket å være i stand til å gi deg en mal med noen nøkkelverdipar. 272 00:11:39,540 --> 00:11:44,290 Vi ønsket å være i stand til å gi deg en liste av verten, navnet på serveren. 273 00:11:44,290 --> 00:11:46,710 Vi ønsket å gi deg en plassholder for brukernavnet ditt 274 00:11:46,710 --> 00:11:48,210 og en plassholder for ditt passord. 275 00:11:48,210 --> 00:11:49,410 Hvis du ikke ser dette ennå, for ikke å bekymre deg. 276 00:11:49,410 --> 00:11:51,340 Mer om dette i PSet sju [? spec. ?] Og så, 277 00:11:51,340 --> 00:11:53,173 selvsagt, ønsker vi at du å fylle ut gjøremål 278 00:11:53,173 --> 00:11:55,310 fordi når du logger inn CS50 IDE, hver av dere 279 00:11:55,310 --> 00:11:57,630 har ditt eget brukernavn og passord. 280 00:11:57,630 --> 00:12:00,910 >> Så vi kan har brukt et halvt dusin eller flere forskjellige filformater. 281 00:12:00,910 --> 00:12:02,940 Vi kunne ha brukt en .txt-fil. 282 00:12:02,940 --> 00:12:04,570 Vi kunne brukt en CSV-fil. 283 00:12:04,570 --> 00:12:06,745 Vi kan har brukt en INI-fil, en XML-fil, 284 00:12:06,745 --> 00:12:09,370 en hel haug flere forkortelser som du kanskje ikke har hørt. 285 00:12:09,370 --> 00:12:11,244 Det er litt vilkårlig på slutten av dagen. 286 00:12:11,244 --> 00:12:16,030 Men super populært i disse dager er en tekst format kalt JSON-- Javascript Object 287 00:12:16,030 --> 00:12:18,460 Notation-- som ser ut som dette. 288 00:12:18,460 --> 00:12:20,890 Det er litt kryptisk, men merker mønstrene. 289 00:12:20,890 --> 00:12:24,180 Du starter med et åpent krøllete brace, og du ender med det samme. 290 00:12:24,180 --> 00:12:26,550 Innsiden av det er noe. 291 00:12:26,550 --> 00:12:27,920 Det er en nøkkel-verdi-par. 292 00:12:27,920 --> 00:12:30,580 Så dette er et objekt som jeg er å se på på skjermen her 293 00:12:30,580 --> 00:12:33,690 som har en nøkkel, som har en verdi. 294 00:12:33,690 --> 00:12:37,610 Og akkurat dedusere basert på forrige mønster, hva er nøkkelen her? 295 00:12:37,610 --> 00:12:39,790 Database, ting til venstre side av colon. 296 00:12:39,790 --> 00:12:43,500 >> Nå skjer verdien å være en flere linjer denne gangen. 297 00:12:43,500 --> 00:12:46,760 Men verdien starter med en krøllete spenne og slutter med en klammeparentes. 298 00:12:46,760 --> 00:12:49,480 Så hva ville du foreslår er typen av verdien av databasen? 299 00:12:49,480 --> 00:12:52,160 300 00:12:52,160 --> 00:12:54,670 En ordbok, eller bare mer konsist, et objekt. 301 00:12:54,670 --> 00:12:55,170 Høyre? 302 00:12:55,170 --> 00:13:00,010 Dette er slag av en datastruktur som kan bruke andre strukturer i seg selv. 303 00:13:00,010 --> 00:13:02,750 Så hvis dette hele greia vi er ringer en object-- og et objekt 304 00:13:02,750 --> 00:13:07,101 er bare en haug med nøkkelverdi pairs-- den Verdien av databasen i seg selv er et objekt. 305 00:13:07,101 --> 00:13:10,350 Verdien av databasen har en hel haug av sentrale verdi-par, hvorav den første 306 00:13:10,350 --> 00:13:13,130 er vertskap, deretter navnet, deretter brukernavn, deretter passord, 307 00:13:13,130 --> 00:13:17,550 hver av hvor verdiene, i mellomtiden, er det bare en kjedelig streng i anførselstegn. 308 00:13:17,550 --> 00:13:19,770 >> Så selv om det ikke er super klar ennå, 309 00:13:19,770 --> 00:13:22,740 vet at dette er bare en standard, ganske kjedelig måte 310 00:13:22,740 --> 00:13:25,190 å lagre data i et standardformat. 311 00:13:25,190 --> 00:13:27,700 Men de vanligste feilene du kan gjøre, selv i PSet syv, 312 00:13:27,700 --> 00:13:32,120 er små dumme ting, som hvis du uhell utelate komma der. 313 00:13:32,120 --> 00:13:34,900 Det kommer til å resultere i filen ikke nødvendigvis å være lesbar. 314 00:13:34,900 --> 00:13:38,191 Hvis du ved et uhell utelater ting som sitater, det er ikke til å kunne leses. 315 00:13:38,191 --> 00:13:41,654 Så det er en ganske pirkete filformat, men det er en som er super vanlig. 316 00:13:41,654 --> 00:13:44,820 Og vi måtte bruke den, selv om du ikke bruker noen Javascript ellers 317 00:13:44,820 --> 00:13:46,330 i PSet syv. 318 00:13:46,330 --> 00:13:46,860 >> Greit. 319 00:13:46,860 --> 00:13:48,110 Så husk dette bildet. 320 00:13:48,110 --> 00:13:51,657 Vi snakket om, i HTML, som koden kan se slik ut. 321 00:13:51,657 --> 00:13:54,740 Dette er Hypertext Markup Language [Uhørbart] for bare "hallo, verden." 322 00:13:54,740 --> 00:13:57,570 Men da vi foreslått en stund tilbake at hvis det hjelper, 323 00:13:57,570 --> 00:14:00,210 kan det være lurt å begynne å tenke om dette allerede som et tre. 324 00:14:00,210 --> 00:14:03,730 Faktisk innrykk at vi bruker bare for lesbarhet skyld 325 00:14:03,730 --> 00:14:05,610 eller for stil skyld på venstre kan slags 326 00:14:05,610 --> 00:14:10,040 settes til dette treet, hvor du har noen spesiell rotnoden at vi vil 327 00:14:10,040 --> 00:14:16,860 generisk kalles dokument, under hvilken er roten HTML element eller tag, HTML, 328 00:14:16,860 --> 00:14:19,980 som deretter har to barn, hodet og kroppen. 329 00:14:19,980 --> 00:14:21,750 >> Og så i sin tur har hodet en tittel. 330 00:14:21,750 --> 00:14:23,440 Og tittelen har en tekstverdi. 331 00:14:23,440 --> 00:14:26,130 Og kroppen på samme måte har en tekstverdi. 332 00:14:26,130 --> 00:14:29,220 Så hvis du er komfortabel ordtak at ja, du kan ta denne HTML 333 00:14:29,220 --> 00:14:32,080 og tegner et bilde som dette, høyre side 334 00:14:32,080 --> 00:14:35,910 er en fin mental modell fordi nå at vi har Javascript, et programmerings 335 00:14:35,910 --> 00:14:39,960 språk som nettlesere kan gjennomføre og tolke for deg, 336 00:14:39,960 --> 00:14:42,690 det viser seg at det vi er i ferd med å gjøre i kode 337 00:14:42,690 --> 00:14:45,320 er begynner å manipulere dette trestruktur i minnet. 338 00:14:45,320 --> 00:14:47,070 Vi trenger ikke å bygge treet i minnet. 339 00:14:47,070 --> 00:14:49,880 Vi trenger ikke å gjøre liksom PSet-fem-stil datastruktur 340 00:14:49,880 --> 00:14:50,650 kompleksitet. 341 00:14:50,650 --> 00:14:54,610 Leseren, pent nok, ved tolke HTML topp til bunn, 342 00:14:54,610 --> 00:14:58,600 venstre eller høyre, er bokstavelig talt kommer til å hånd oss ​​tilsvarer en peker 343 00:14:58,600 --> 00:15:00,840 til at hele treet for gratis. 344 00:15:00,840 --> 00:15:02,150 Den gjør alt det harde arbeidet. 345 00:15:02,150 --> 00:15:05,520 Det er det Mozilla og Apple og andre har gjort for oss. 346 00:15:05,520 --> 00:15:09,400 >> Og med Javascript skal vi være i stand til å kontrollere og endre og gjøre 347 00:15:09,400 --> 00:15:12,910 interessante ting til det treet, ellers kjent 348 00:15:12,910 --> 00:15:15,880 som et DOM eller Document Object Model. 349 00:15:15,880 --> 00:15:17,110 Hva slags ting? 350 00:15:17,110 --> 00:15:19,030 Vel, det viser seg at i Javascript, er det 351 00:15:19,030 --> 00:15:22,800 denne vaskeri liste over hendelser som kan skje. 352 00:15:22,800 --> 00:15:26,330 Og vi har egentlig ikke brukt som ord siden uke null og PSet 353 00:15:26,330 --> 00:15:28,240 null når vi snakket om Scratch. 354 00:15:28,240 --> 00:15:31,390 De fleste av dere sannsynligvis ikke bruke en hendelse i Scratch prosjektet. 355 00:15:31,390 --> 00:15:33,850 Men du kanskje husker den enkle Marco Polo 356 00:15:33,850 --> 00:15:36,760 eksempel, der vi hadde to sprites, en av dem sa: Marco. 357 00:15:36,760 --> 00:15:40,180 Den andre av disse og deretter, ved lytting og høre den hendelsen, sa Polo. 358 00:15:40,180 --> 00:15:42,080 Hvis ikke, må du gjerne ser tilbake så langt tilbake. 359 00:15:42,080 --> 00:15:44,450 >> Men dette er bare for å sier, og du kan slags 360 00:15:44,450 --> 00:15:47,730 slutte fra navnene på disse ting, Javascript, viser det seg, 361 00:15:47,730 --> 00:15:53,200 kommer til å gi oss en måte å lytte for mus går ned eller mus går opp 362 00:15:53,200 --> 00:15:57,920 eller tast går ned eller nøkkel går opp eller onsubmit onselect 363 00:15:57,920 --> 00:15:59,740 eller onresizing noe. 364 00:15:59,740 --> 00:16:03,060 Med andre ord, enhver fysisk handling at et menneske kan ta med en nettleser 365 00:16:03,060 --> 00:16:08,210 at du gjør hver dag, kan du skrive kode for som lytter til disse hendelsene 366 00:16:08,210 --> 00:16:10,220 og deretter gjør noe riktig. 367 00:16:10,220 --> 00:16:14,130 >> For eksempel, hvis du bruker Google Maps, hva skjer hvis du klikker og flytte 368 00:16:14,130 --> 00:16:16,250 mus, typisk? 369 00:16:16,250 --> 00:16:17,758 Hvis du klikker og drar? 370 00:16:17,758 --> 00:16:18,258 Yeah? 371 00:16:18,258 --> 00:16:21,701 372 00:16:21,701 --> 00:16:22,200 Nettopp. 373 00:16:22,200 --> 00:16:23,159 Kartet begynner å bevege seg. 374 00:16:23,159 --> 00:16:25,616 Så du kan liksom se hva som er over her, hva som er der borte. 375 00:16:25,616 --> 00:16:27,130 Og hvordan Google gjennomføre det? 376 00:16:27,130 --> 00:16:29,421 Vel, formodentlig, er de ved hjelp av et par av disse hendelsen 377 00:16:29,421 --> 00:16:31,720 lyttere, en som sier, lytte til på mus 378 00:16:31,720 --> 00:16:35,410 down-- så når brukeren fysisk skyver hans styreflaten eller hans eller hennes mus 379 00:16:35,410 --> 00:16:36,010 ned. 380 00:16:36,010 --> 00:16:38,350 Og så ser vi for noe lignende bevegelse 381 00:16:38,350 --> 00:16:41,145 eller annen hendelse som tillater oss å fange dra. 382 00:16:41,145 --> 00:16:45,910 Og faktisk, er å dra på samme måte i denne dot dot dot liste over mulige alternativer. 383 00:16:45,910 --> 00:16:49,140 >> Så dette kommer til å være en kraftig måte å begynne å reagere til brukeren 384 00:16:49,140 --> 00:16:52,824 selv før han eller hun faktisk klikker noe eksplisitt som sender inn. 385 00:16:52,824 --> 00:16:55,240 Men vi kommer til å introdusere et par emner for å komme dit. 386 00:16:55,240 --> 00:16:58,570 Men først, la oss overgang til noen faktiske koden. 387 00:16:58,570 --> 00:17:01,450 Så jeg kommer til å gå videre og åpne opp dom-0, 388 00:17:01,450 --> 00:17:05,869 som er et meget enkelt eksempel her at hvis jeg zoomer inn rett og slett 389 00:17:05,869 --> 00:17:08,500 har denne inngangen her for meg. 390 00:17:08,500 --> 00:17:12,410 Og jeg kommer til å gå videre og skriv inn "David" for mitt navn, og klikk Send. 391 00:17:12,410 --> 00:17:17,940 >> Og så, om enn slags billig, jeg har denne meldingen som dukker opp som sier, 392 00:17:17,940 --> 00:17:19,244 "hallo, David!" 393 00:17:19,244 --> 00:17:21,740 Så dette er slags som vår "Hei, verden" 394 00:17:21,740 --> 00:17:25,150 at vi gjorde en stund tilbake i C og selv i PHP fordi jeg har dynamisk 395 00:17:25,150 --> 00:17:26,310 avgis navnet mitt. 396 00:17:26,310 --> 00:17:28,230 Jeg kan gjøre en annens navn her. 397 00:17:28,230 --> 00:17:31,240 Jeg kunne rett og slett endre dette til, lignende, Hannah, klikk Send. 398 00:17:31,240 --> 00:17:33,780 Og ja, de små pop-up endringer. 399 00:17:33,780 --> 00:17:36,650 >> Nå, pop-ups er en av de de fleste misbrukte funksjoner i nettet. 400 00:17:36,650 --> 00:17:38,520 Og faktisk tilbake dagen pop-up blokkering 401 00:17:38,520 --> 00:17:40,820 kom til mote fordi du ville gå til noen website-- 402 00:17:40,820 --> 00:17:43,604 kanskje en tvilsom sted-- som ville så plutselig 403 00:17:43,604 --> 00:17:46,020 starte peprer skjermen med en hel haug med pop-ups. 404 00:17:46,020 --> 00:17:49,700 Og så denne evnen til å dukke opp vinduer i foran brukeren 405 00:17:49,700 --> 00:17:52,372 har ikke vært særlig godt mottatt av menneskeheten. 406 00:17:52,372 --> 00:17:54,080 Så det er derfor du ser dette hindre ting, 407 00:17:54,080 --> 00:17:55,706 som bare gjør dette hele greia stygg. 408 00:17:55,706 --> 00:17:57,996 Så vi kommer til å trenge en bedre måte å spørre brukeren. 409 00:17:57,996 --> 00:17:59,350 Men for nå, virker det til å fungere. 410 00:17:59,350 --> 00:18:03,320 Så bare intuitivt, hva synes å skje her? 411 00:18:03,320 --> 00:18:07,870 Jeg går videre og klikk Send, og så noe skjer, helt klart. 412 00:18:07,870 --> 00:18:12,870 Men hva er det ikke skjer som skjedde forrige uke når jeg klikket inn? 413 00:18:12,870 --> 00:18:15,940 Hva skjedde ikke på skjermen? 414 00:18:15,940 --> 00:18:17,170 Sorry? 415 00:18:17,170 --> 00:18:18,010 Last. 416 00:18:18,010 --> 00:18:19,720 Nettadressen endret ikke i det hele tatt. 417 00:18:19,720 --> 00:18:22,250 Jeg sa at dette var dom-0, og jeg er fortsatt på dom-0. 418 00:18:22,250 --> 00:18:26,890 Normalt ville vi få endret til en annen URL, som register.php eller lignende. 419 00:18:26,890 --> 00:18:29,560 >> Men selv når jeg avvise denne tingen ved å klikke på OK, 420 00:18:29,560 --> 00:18:32,310 Legg merke til at nettadressen forblir helt satt. 421 00:18:32,310 --> 00:18:35,350 Og, faktisk, hvis jeg er litt skeptisk, la meg åpne opp Chrome. 422 00:18:35,350 --> 00:18:36,860 La meg åpne opp kategorien Network. 423 00:18:36,860 --> 00:18:38,360 Og legg merke til det er tomt for øyeblikket. 424 00:18:38,360 --> 00:18:40,700 La meg gå videre og sende Maria. 425 00:18:40,700 --> 00:18:42,810 Det er ingen nettverkstrafikk overhodet. 426 00:18:42,810 --> 00:18:44,320 Så det er ingen HTTP. 427 00:18:44,320 --> 00:18:47,620 >> Så ja, hvis jeg ser på kildekoden for dette-- la meg lukke dette vinduet 428 00:18:47,620 --> 00:18:49,480 og gå til Vis Source. 429 00:18:49,480 --> 00:18:50,400 Interessant. 430 00:18:50,400 --> 00:18:53,520 Det ser ut som det er noen nye koder, blant dem script. 431 00:18:53,520 --> 00:18:57,490 Så la oss ta en titt innenfor CS50 IDE nøyaktig hva jeg sendt til brukeren. 432 00:18:57,490 --> 00:19:00,690 >> Så her er-- la oss fokusere på HTML eneste. 433 00:19:00,690 --> 00:19:03,500 Her er den nederste halvdelen av dom-0.html. 434 00:19:03,500 --> 00:19:07,830 Og legg merke til at det har en tittel, et hode tag, en kropp tag, en form tag. 435 00:19:07,830 --> 00:19:11,257 Men hva hopper ut til deg som annerledes, spesielt hvis du har aldri 436 00:19:11,257 --> 00:19:12,590 skrevet noen Javascript selv. 437 00:19:12,590 --> 00:19:14,920 La meg bla litt til høyre her. 438 00:19:14,920 --> 00:19:18,330 Jeg har en inngang, en annen inngang for klikker. 439 00:19:18,330 --> 00:19:21,410 Jeg har en ID, som er en slags ny. 440 00:19:21,410 --> 00:19:22,790 Men vi fikk se dette med CSS. 441 00:19:22,790 --> 00:19:24,480 Hva annet er definitivt nytt? 442 00:19:24,480 --> 00:19:24,980 Yeah? 443 00:19:24,980 --> 00:19:30,580 444 00:19:30,580 --> 00:19:32,140 Fin. 445 00:19:32,140 --> 00:19:32,760 >> Greit. 446 00:19:32,760 --> 00:19:35,630 Så der det står onsubmit, merke til hva som synes å følge. 447 00:19:35,630 --> 00:19:38,740 Dette er en egenskap i HTML nomenklatur. 448 00:19:38,740 --> 00:19:40,944 Dens verdi er dette sitert streng her. 449 00:19:40,944 --> 00:19:42,860 Og dette ser litt merkelig ved første øyekast. 450 00:19:42,860 --> 00:19:44,050 Det er ikke HTML. 451 00:19:44,050 --> 00:19:45,240 Det er ikke CSS. 452 00:19:45,240 --> 00:19:47,580 Dette er, som du kanskje skjønner, Javascript. 453 00:19:47,580 --> 00:19:51,850 Så det virker som bygges inn i denne nettside er en funksjon som heter hilse. 454 00:19:51,850 --> 00:19:54,250 Og jeg dedusere at bare fordi det er et ord, hilse. 455 00:19:54,250 --> 00:19:55,880 Det har en åpen paren, nære paren, semikolon. 456 00:19:55,880 --> 00:19:58,095 Ser ut som en C-funksjon, ser ut som en PHP-funksjonen. 457 00:19:58,095 --> 00:20:00,370 >> Og ja, det kommer til å være en Javascript-funksjonen. 458 00:20:00,370 --> 00:20:01,440 Så jeg er tilbake falsk. 459 00:20:01,440 --> 00:20:03,440 Vi vil komme tilbake til at i bare et øyeblikk. 460 00:20:03,440 --> 00:20:05,320 Men hvor er denne funksjonen definert? 461 00:20:05,320 --> 00:20:07,950 Vel la meg bla opp til toppen av filen. 462 00:20:07,950 --> 00:20:11,710 Og selv om det er en lang linje, det er relativt grei. 463 00:20:11,710 --> 00:20:15,000 La meg zoome ut her og fokusere på følgende fire linjer. 464 00:20:15,000 --> 00:20:17,137 >> Så i Javascript, bare som PHP, du bare 465 00:20:17,137 --> 00:20:19,720 si, bokstavelig talt, ordet "funksjon" navnet på funksjonen, 466 00:20:19,720 --> 00:20:22,700 og deretter parentes med noen arguments-- ingen argumenter i denne saken. 467 00:20:22,700 --> 00:20:25,290 Og det er ingen returtype i Javascript, akkurat som PHP. 468 00:20:25,290 --> 00:20:29,470 Så det er litt løsere enn C. Åpne klammeparentes, tett krøllete brace. 469 00:20:29,470 --> 00:20:33,270 Bygget inn Javascript er et function-- ikke en anbefalt function-- 470 00:20:33,270 --> 00:20:35,730 men en funksjon som heter varsling hvis eneste mål i livet 471 00:20:35,730 --> 00:20:38,620 er å trekke opp det ganske stygt be om at vi så et øyeblikk siden. 472 00:20:38,620 --> 00:20:40,950 >> Nå er dette en slags munnfull. 473 00:20:40,950 --> 00:20:42,560 Hva foregår her? 474 00:20:42,560 --> 00:20:45,840 Så la oss begynne å markere alt her. 475 00:20:45,840 --> 00:20:48,540 Det er det samme argumentet for å varsle. 476 00:20:48,540 --> 00:20:49,530 Og hva er det som skjer? 477 00:20:49,530 --> 00:20:51,200 Dette ser ut som en streng. 478 00:20:51,200 --> 00:20:59,180 Og det viser seg, i motsetning til PHP og i motsetning til C, spiller det ingen rolle i Javascript 479 00:20:59,180 --> 00:21:01,090 hvis du apostrof eller doble anførselstegn. 480 00:21:01,090 --> 00:21:02,060 De vil være tilsvarende. 481 00:21:02,060 --> 00:21:03,769 Og ærlig talt, det er bare populært i disse dager 482 00:21:03,769 --> 00:21:06,726 for Javascript programmerere å alltid bruke enkle anførselstegn for noen grunn. 483 00:21:06,726 --> 00:21:07,840 Det er bare ting å gjøre. 484 00:21:07,840 --> 00:21:09,710 Men vi kunne bruke anførselstegn, så vel. 485 00:21:09,710 --> 00:21:11,540 >> Så pluss er en ny karakter. 486 00:21:11,540 --> 00:21:14,512 Men de av dere som har gjort dette før, hva betyr pluss bety? 487 00:21:14,512 --> 00:21:16,440 Yeah. 488 00:21:16,440 --> 00:21:17,120 Sette sammen. 489 00:21:17,120 --> 00:21:18,570 Så vi så dette i PHP. 490 00:21:18,570 --> 00:21:20,315 Det er bare prikken operatør i PHP som 491 00:21:20,315 --> 00:21:22,000 vil sette sammen to strenger sammen. 492 00:21:22,000 --> 00:21:24,000 C var en smerte i nakken for å gjøre dette. 493 00:21:24,000 --> 00:21:27,310 Recall fra PSet seks, som var en spesielle smerter i nakken, 494 00:21:27,310 --> 00:21:29,470 du må bruke noe som strcat 495 00:21:29,470 --> 00:21:31,660 etter tildele minne på stakken eller haugen. 496 00:21:31,660 --> 00:21:34,243 Du måtte hoppe gjennom ringer bare for å sette sammen to strenger. 497 00:21:34,243 --> 00:21:36,040 I Javascript, er det super enkelt. 498 00:21:36,040 --> 00:21:38,030 Bare bruk pluss operatør mellom dem. 499 00:21:38,030 --> 00:21:41,420 >> Så komplekset utseende ting synes å være denne 500 00:21:41,420 --> 00:21:43,490 fordi ved slutten av Hele denne strengen, jeg bare 501 00:21:43,490 --> 00:21:45,797 sette sammen på et utropstegn. 502 00:21:45,797 --> 00:21:48,380 Så hvis det var dukker opp ble "Hei, David", "hallo, Hannah," 503 00:21:48,380 --> 00:21:52,740 "Hei, Maria," og så videre, tydelig at middel ting i mellom de to 504 00:21:52,740 --> 00:21:55,215 plusser må gi meg tilgang til hva? 505 00:21:55,215 --> 00:21:58,855 506 00:21:58,855 --> 00:22:01,991 Hva er i det for sikkert? 507 00:22:01,991 --> 00:22:02,490 Yeah. 508 00:22:02,490 --> 00:22:05,090 Så jeg skal late her besvare deres navn, ikke sant? 509 00:22:05,090 --> 00:22:10,380 Slik at deres navn dukket opp i den endelige resultat. Så hva betyr dette? 510 00:22:10,380 --> 00:22:15,080 Vel, jeg foreslo tidligere i at bilde som den såkalte DOM 511 00:22:15,080 --> 00:22:18,580 har denne spesielle root element vei opp toppen kalt dokument. 512 00:22:18,580 --> 00:22:21,660 Og nå viser det seg, som kommer å være en spesiell global variabel 513 00:22:21,660 --> 00:22:25,250 i Javascript, bygget inn som er en hel haug med nyttig funksjonalitet. 514 00:22:25,250 --> 00:22:31,770 Blant nyttig funksjonalitet er evnen til å få til en hvilken som helst etterkommer-node. 515 00:22:31,770 --> 00:22:37,760 De firkanter eller rektangler eller ellipser er bare noder i et tre, så å si. 516 00:22:37,760 --> 00:22:41,850 >> Så det viser seg at bygget inn Javascript dokument objekt 517 00:22:41,850 --> 00:22:47,300 er en funksjon, ellers kjent som en metode, er at kalles getElementById. 518 00:22:47,300 --> 00:22:50,410 Syntaksen for å ringe en funksjon i Javascript 519 00:22:50,410 --> 00:22:55,220 som er på innsiden av et objekt eller en variabelen er bare med dot notasjon. 520 00:22:55,220 --> 00:22:57,950 Og vi så dette i C hva struct syntaks. 521 00:22:57,950 --> 00:23:03,530 Du ser dette i PSet sju, type, liksom, når du ser CS50 :: søket. 522 00:23:03,530 --> 00:23:08,070 Tykktarmen kolon i PHP er et annet måte for å kalle en funksjon som er 523 00:23:08,070 --> 00:23:09,260 innsiden av noen objekt. 524 00:23:09,260 --> 00:23:11,960 >> Men for nå i Javascript, det er bare en prikk. 525 00:23:11,960 --> 00:23:14,170 Og så denne funksjonen, pent nok, type 526 00:23:14,170 --> 00:23:16,810 sier hva det does-- få element av ID. 527 00:23:16,810 --> 00:23:20,280 Et element er bare et annet navn for en tag eller node i DOM. 528 00:23:20,280 --> 00:23:26,900 Og så får element av ID "navn" betyr dette-- her er min HTML. 529 00:23:26,900 --> 00:23:31,910 Og basert på denne HTML, hva node eller hva HTML-kode er jeg 530 00:23:31,910 --> 00:23:35,097 kommer til å programma være handed ved å ringe document.getElementById? 531 00:23:35,097 --> 00:23:37,650 532 00:23:37,650 --> 00:23:38,500 >> Ja, akkurat. 533 00:23:38,500 --> 00:23:42,670 Jeg kommer til å få input element det hvis ID er «navn». 534 00:23:42,670 --> 00:23:45,140 Så spesielt, kan du tenker på denne funksjonen, 535 00:23:45,140 --> 00:23:49,560 getElementById, som en måte å gi sikkerhets en peker til den spesifikke noden 536 00:23:49,560 --> 00:23:50,060 i treet. 537 00:23:50,060 --> 00:23:51,980 Vi har ikke trukket dette treet, men det er en måte 538 00:23:51,980 --> 00:23:54,900 for å få tilgang til det rektangel eller at rektangel 539 00:23:54,900 --> 00:23:58,090 av entydig identifiserer det via sin ID. 540 00:23:58,090 --> 00:23:59,760 >> Nå, hvorfor er dette nyttig? 541 00:23:59,760 --> 00:24:01,510 Vel, det viser seg at når du har fått 542 00:24:01,510 --> 00:24:07,220 at node, som rektangel fra bilde, som node innsiden av den, 543 00:24:07,220 --> 00:24:10,660 i sin tur har en hel haug med properties-- nøkkelverdipar 544 00:24:10,660 --> 00:24:13,480 eller data, hvorav den ene som kalles verdi. 545 00:24:13,480 --> 00:24:16,500 Så bokstavelig, er det en slags munnfull å forklare hele greia. 546 00:24:16,500 --> 00:24:19,370 Men ved slutten av dagen, alt dette gjør er å gi deg 547 00:24:19,370 --> 00:24:23,070 en streng som brukeren har skrevet i i denne hierarkisk måte. 548 00:24:23,070 --> 00:24:24,820 Men jeg liker ikke en par av disse tingene. 549 00:24:24,820 --> 00:24:27,590 Eller rettere sagt, det er litt nysgjerrighet fortsatt. 550 00:24:27,590 --> 00:24:28,870 Alle som så ut til å fungere. 551 00:24:28,870 --> 00:24:33,420 Hvorfor tror du jeg kom tilbake false etter ringer hilse? 552 00:24:33,420 --> 00:24:35,910 Dette ser litt stygg, at Jeg har to uttalelser der 553 00:24:35,910 --> 00:24:38,730 skilles med semikolon. 554 00:24:38,730 --> 00:24:39,310 Gjett. 555 00:24:39,310 --> 00:24:44,390 Hvis jeg fjernet return false, hva kan skje, bare instinktivt? 556 00:24:44,390 --> 00:24:46,990 557 00:24:46,990 --> 00:24:49,460 Beklager, si igjen? 558 00:24:49,460 --> 00:24:50,530 >> Åpne en haug med Windows. 559 00:24:50,530 --> 00:24:52,780 Så potensielt kanskje noe sånt ville skje. 560 00:24:52,780 --> 00:24:54,422 Hva annet? 561 00:24:54,422 --> 00:24:55,630 Kan sende inn en forespørsel der? 562 00:24:55,630 --> 00:24:59,109 563 00:24:59,109 --> 00:25:00,510 Til samme side. 564 00:25:00,510 --> 00:25:03,110 Så, faktisk, det er det jo nærmere svar her, 565 00:25:03,110 --> 00:25:05,890 selv om, i motsetning i det siste, har jeg ikke 566 00:25:05,890 --> 00:25:09,300 spesifiserte handlingen attributt, som normalt har vi å gjøre. 567 00:25:09,300 --> 00:25:11,780 Det viser seg at det er en standard. Hvis du ikke angir handling, 568 00:25:11,780 --> 00:25:15,370 det er som å si sitat, unquote eller navnet på selve filen, 569 00:25:15,370 --> 00:25:17,850 som i dette tilfelle ville være som dom-0.html. 570 00:25:17,850 --> 00:25:20,420 Det er bare slags utledes, eller snarere underforstått. 571 00:25:20,420 --> 00:25:22,420 >> Og så hvis jeg ikke gjør dette, la oss legge merke til. 572 00:25:22,420 --> 00:25:23,230 La meg lagre dette. 573 00:25:23,230 --> 00:25:25,270 Og jeg har fjernet retur falsk. 574 00:25:25,270 --> 00:25:27,759 La meg gå tilbake til denne eksempel og kraft legg det. 575 00:25:27,759 --> 00:25:30,800 Og du har kanskje sett meg foreslå dette på CS50 Diskuter en haug med ganger. 576 00:25:30,800 --> 00:25:34,560 Hvis noe noensinne opptre funky og Nettleseren er ikke oppfører seg som forventet, 577 00:25:34,560 --> 00:25:37,410 Ofte vil du ønsker å holde Skift og klikk Reload. 578 00:25:37,410 --> 00:25:41,480 Som vil tvinge hver fil for å laste og ikke bruke nettleserens lokale cache 579 00:25:41,480 --> 00:25:47,032 eller kopi slik at nå, la meg gå videre og åpne opp min Inspector, kategorien Nettverk. 580 00:25:47,032 --> 00:25:48,740 Jeg kommer til å klikke Bevar Logg fordi jeg 581 00:25:48,740 --> 00:25:51,660 ønsker ikke å slette radene når jeg blir revet vekk andre steder. 582 00:25:51,660 --> 00:25:54,650 >> La meg gå her fremover og type i Andi, klikk Send. 583 00:25:54,650 --> 00:25:55,150 Greit. 584 00:25:55,150 --> 00:25:56,480 Det virker som forventet. 585 00:25:56,480 --> 00:25:57,440 Det sier "hei, Andi." 586 00:25:57,440 --> 00:25:59,420 La meg klikker OK. 587 00:25:59,420 --> 00:26:00,610 Interessant. 588 00:26:00,610 --> 00:26:05,100 Legg merke til at siden endret, om enn i den opprinnelige siden. 589 00:26:05,100 --> 00:26:06,770 Legg merke til URL form av endret. 590 00:26:06,770 --> 00:26:09,430 Det legges et spørsmålstegn, som vanligvis er en indikator 591 00:26:09,430 --> 00:26:11,260 at vi prøvde å sende noe. 592 00:26:11,260 --> 00:26:13,570 Og deretter ved bunnen, enda mer eksplisitt, 593 00:26:13,570 --> 00:26:17,570 her er selve HTTP-forespørsel, som har en respons på 200 som 594 00:26:17,570 --> 00:26:18,490 brakte meg tilbake hit. 595 00:26:18,490 --> 00:26:20,250 >> Så dette er ikke hva vi ønsker å gjøre, ikke sant? 596 00:26:20,250 --> 00:26:22,166 Fordi jeg ønsker ikke å laste hele siden. 597 00:26:22,166 --> 00:26:24,970 Jeg i stedet ønsket å returnere false slik at kortslutning 598 00:26:24,970 --> 00:26:28,840 nettleserens standard oppførsel, som var selvfølgelig å sende siden. 599 00:26:28,840 --> 00:26:31,700 >> Så la oss ta en titt på en marginalt bedre eksempel. 600 00:26:31,700 --> 00:26:33,920 Dette er dom versjon en. 601 00:26:33,920 --> 00:26:36,680 Og legg merke til følgende. 602 00:26:36,680 --> 00:26:39,150 Det er OK hvis du ikke Grok alle linjene med kode. 603 00:26:39,150 --> 00:26:41,750 Men hva er fundamentalt annerledes om denne implementeringen? 604 00:26:41,750 --> 00:26:44,690 Jeg skal fastsette den oppfører seg på samme, gjør det samme. 605 00:26:44,690 --> 00:26:49,320 606 00:26:49,320 --> 00:26:51,570 Hva har jeg tydeligvis gjort annerledes? 607 00:26:51,570 --> 00:26:52,266 Yeah? 608 00:26:52,266 --> 00:26:53,182 >> PUBLIKUM: [uhørlig]. 609 00:26:53,182 --> 00:27:03,421 610 00:27:03,421 --> 00:27:04,170 DAVID MALAN: Yeah. 611 00:27:04,170 --> 00:27:08,620 Slik at funksjonen er definert differently-- med andre ord, fraværende fra skjemaet, 612 00:27:08,620 --> 00:27:13,180 oppe på linje 7-- eller heller, linje 8-- ikke lenger 613 00:27:13,180 --> 00:27:15,070 jeg har onsubmit attributtet. 614 00:27:15,070 --> 00:27:16,750 I forrige eksempel, jeg hadde dette. 615 00:27:16,750 --> 00:27:18,530 Og da jeg bokstavelig talt skrev koden min her. 616 00:27:18,530 --> 00:27:20,210 Og så sa jeg return false. 617 00:27:20,210 --> 00:27:22,180 Og hvis det ikke gni du feil vei ennå, 618 00:27:22,180 --> 00:27:26,140 Det bør begynne å utstrekning som, akkurat som i HTML, 619 00:27:26,140 --> 00:27:29,530 da vi begynte å co-mingle det med CSS i stil attributter, 620 00:27:29,530 --> 00:27:32,890 det nettopp begynt å få litt rotete eller føles litt feil. 621 00:27:32,890 --> 00:27:35,020 >> Tilsvar her, hvis du begynner å ta HTML, 622 00:27:35,020 --> 00:27:37,419 og deretter automatisk plop noen Javascript-kode 623 00:27:37,419 --> 00:27:40,460 i midten av en sitert streng, er det ikke kommer til å være meget vedlikeholdsvennlig. 624 00:27:40,460 --> 00:27:40,630 Høyre? 625 00:27:40,630 --> 00:27:43,690 Det er ikke engang klart først plassere hvor Javascript-kode er. 626 00:27:43,690 --> 00:27:46,590 Så det ville være veldig hyggelig som et prinsipp om bedre design, 627 00:27:46,590 --> 00:27:50,500 la oss holde våre HTML helt atskilt fra vår Javascript. 628 00:27:50,500 --> 00:27:53,150 >> Så for å gjøre det, det vi har gjort her er following-- 629 00:27:53,150 --> 00:27:56,790 vi bare bruke HTML for markup bare. 630 00:27:56,790 --> 00:28:00,730 Og så i versjon en av denne, alt Jeg har er et skjema med en unik ID. 631 00:28:00,730 --> 00:28:04,630 Og deretter ned her, jeg drar nytte av en spesiell funksjon i Javascript 632 00:28:04,630 --> 00:28:08,480 der jeg kan ha det som er ringte en anonym funksjon. 633 00:28:08,480 --> 00:28:14,150 Så det viser seg at hvis jeg kaller document.getElementById av 'demo' 634 00:28:14,150 --> 00:28:18,890 det er som å gi meg en peker til denne noden i treet mitt, form element, 635 00:28:18,890 --> 00:28:20,100 så å si. 636 00:28:20,100 --> 00:28:22,220 >> Nå, jeg bare vet fra vite litt av HTML 637 00:28:22,220 --> 00:28:26,330 nå er vi å ha lest noen online referanse, som en form element støtter 638 00:28:26,330 --> 00:28:29,950 en hel haug med arrangementet listeners-- i Med andre ord, den vaskeri liste over arrangement 639 00:28:29,950 --> 00:28:31,700 lyttere som vi så for et øyeblikk siden. 640 00:28:31,700 --> 00:28:35,950 Jeg vet fra å lese dokumentasjonen at onsubmit er en gyldig begivenhet 641 00:28:35,950 --> 00:28:38,520 lytteren for en form element. 642 00:28:38,520 --> 00:28:41,480 >> Så når jeg vet det, det er trygt for meg å gjøre 643 00:28:41,480 --> 00:28:45,390 den following-- få som node fra treet, form element, 644 00:28:45,390 --> 00:28:48,070 og nå sin såkalte onsubmit eiendom. 645 00:28:48,070 --> 00:28:49,880 Så prikken betyr bare Dette er en eiendom, 646 00:28:49,880 --> 00:28:52,180 som en spesiell verdi på innsiden av det. 647 00:28:52,180 --> 00:28:55,590 Og hva datatype er jeg tildele, tilsynelatende, 648 00:28:55,590 --> 00:28:58,900 til onsubmit, som er effektivt en variabel inne 649 00:28:58,900 --> 00:29:01,010 av at node i treet? 650 00:29:01,010 --> 00:29:04,100 Det er et felt inne i det struct. 651 00:29:04,100 --> 00:29:05,810 Hva er datatype? 652 00:29:05,810 --> 00:29:07,030 >> En funksjon, ja. 653 00:29:07,030 --> 00:29:08,607 Så det viser seg at PHP har dette. 654 00:29:08,607 --> 00:29:10,440 Og selv om vi ikke fortelle deg om det, 655 00:29:10,440 --> 00:29:16,240 C har også funksjonspekere, de evne til å formidle og tilordne funksjoner 656 00:29:16,240 --> 00:29:18,330 som variabler verdier selv. 657 00:29:18,330 --> 00:29:20,280 Og vi ikke kommer å regress tilbake til C. 658 00:29:20,280 --> 00:29:23,250 Men for nå, viser det seg at på høyre side her, 659 00:29:23,250 --> 00:29:26,260 selv om det ser litt funky, dette betyr, hei nettleser, 660 00:29:26,260 --> 00:29:27,550 gi meg en funksjon. 661 00:29:27,550 --> 00:29:30,560 Jeg kommer ikke til å bry gi det et navn fordi jeg er bokstavelig talt 662 00:29:30,560 --> 00:29:34,450 kommer til å tildele la oss kalle det adressen til denne funksjonen 663 00:29:34,450 --> 00:29:35,994 umiddelbart til onsubmit. 664 00:29:35,994 --> 00:29:39,160 Med andre ord, nettleser, trenger du ikke å vite hva denne funksjonen heter. 665 00:29:39,160 --> 00:29:41,890 Du trenger bare å vite hvor den er i minnet. 666 00:29:41,890 --> 00:29:44,210 Og så det er nok bare å har et likhetstegn der 667 00:29:44,210 --> 00:29:48,240 og ikke å bry navngi denne, som foo eller hilse eller noe annet ord. 668 00:29:48,240 --> 00:29:50,150 Og nå er dette bare en stilistisk ting. 669 00:29:50,150 --> 00:29:53,100 Jeg kunne flytte denne klammeparentes på the-- sorry-- neste linje 670 00:29:53,100 --> 00:29:54,750 som vi vanligvis gjør CS50. 671 00:29:54,750 --> 00:29:57,550 Men i Javascript, er det faktisk stilistisk felles 672 00:29:57,550 --> 00:30:00,450 å bare holde klammeparentes, den en første, på den første linje. 673 00:30:00,450 --> 00:30:02,620 >> Men heretter er det ikke noe interessant. 674 00:30:02,620 --> 00:30:05,830 Det åpne klammeparentes bare avgrenser starten av min funksjon. 675 00:30:05,830 --> 00:30:09,320 Funksjonen er nå identiske, bortsett fra at jeg har 676 00:30:09,320 --> 00:30:11,452 inkludert retur false innsiden av denne funksjonen. 677 00:30:11,452 --> 00:30:13,160 Fordi det viser out-- og du bare ville 678 00:30:13,160 --> 00:30:14,980 vet dette fra lesing den documentation-- 679 00:30:14,980 --> 00:30:19,740 at hvis den funksjonen du tildele til onsubmit handler returnerer false, 680 00:30:19,740 --> 00:30:23,420 leseren bare vet og aksepterer ikke å sende inn skjemaet til en server. 681 00:30:23,420 --> 00:30:27,210 Hvis den returnerer sant, vil det sende den til en server for grunner vi vil se 682 00:30:27,210 --> 00:30:28,700 er nyttige i bare et øyeblikk. 683 00:30:28,700 --> 00:30:31,000 >> Og så semikolon etter krøllete brace det bare 684 00:30:31,000 --> 00:30:32,541 betyr at jeg er ferdig med å definere funksjonen. 685 00:30:32,541 --> 00:30:36,600 Du vet hva jeg skal kalle så snart som du hører en innlevering. 686 00:30:36,600 --> 00:30:37,100 Greit. 687 00:30:37,100 --> 00:30:40,650 Dette er fortsatt uten tvil slags stygge. 688 00:30:40,650 --> 00:30:42,190 Så hva mer kan vi gjøre? 689 00:30:42,190 --> 00:30:45,000 >> Vel, det viser seg da i versjon to, som er last-- 690 00:30:45,000 --> 00:30:46,780 Og vi vil bare blikk på dette. 691 00:30:46,780 --> 00:30:49,850 Med fare for å gjøre det styggere, viser det seg 692 00:30:49,850 --> 00:30:52,160 at det er et bibliotek i verden kalles jQuery. 693 00:30:52,160 --> 00:30:54,900 Og jQuery er en super populære Javascript-biblioteket 694 00:30:54,900 --> 00:30:57,930 det er så populære at de fleste noen JavaScript-- det er ikke 695 00:30:57,930 --> 00:31:00,540 uvanlig for folk å forvirre jQuery med Javascript. 696 00:31:00,540 --> 00:31:01,070 Hvorfor? 697 00:31:01,070 --> 00:31:04,990 Java selv har svært ordrik måter å gjøre things-- 698 00:31:04,990 --> 00:31:07,820 document.getElementById, dadadadadada. 699 00:31:07,820 --> 00:31:10,510 Du ender opp med å ha svært lange linjer med kode. 700 00:31:10,510 --> 00:31:15,550 >> Så en fyr som heter John Resid, som faktisk fungerer for en oppstart 701 00:31:15,550 --> 00:31:18,630 opp i disse dager, kom ut med dette biblioteket år 702 00:31:18,630 --> 00:31:22,070 siden at mange mennesker har bidratt å kalles jQuery som forandrer 703 00:31:22,070 --> 00:31:23,449 syntaksen på følgende måte. 704 00:31:23,449 --> 00:31:25,740 Og bare så du har sett denne, fordi du vil alltid 705 00:31:25,740 --> 00:31:28,140 se dette hvis du gjør en webbasert endelige prosjektet, 706 00:31:28,140 --> 00:31:33,270 dette ville være det samme måte implementere den samme funksjon med 707 00:31:33,270 --> 00:31:34,630 denne spesielle biblioteket. 708 00:31:34,630 --> 00:31:36,680 >> Nå, i stedet for erte den fra hverandre i sin helhet, 709 00:31:36,680 --> 00:31:38,520 la oss bare se på noen mønstre. 710 00:31:38,520 --> 00:31:44,850 Denne syntaksen ser ut til å ha hvor mange anonyme funksjoner 711 00:31:44,850 --> 00:31:49,584 eller navnløse funksjoner eller AKA lambda funksjoner? 712 00:31:49,584 --> 00:31:50,190 To, ikke sant? 713 00:31:50,190 --> 00:31:52,690 Og du vet at selv om du ikke er super skjegg med dette, 714 00:31:52,690 --> 00:31:55,780 bare ved det faktum at det sier funksjon () to ganger. 715 00:31:55,780 --> 00:31:58,172 >> Og det viser seg at hva denne koden er doing-- 716 00:31:58,172 --> 00:32:01,255 og vi vil referere til online referanser, til slutt, for litt hjelp med dette. 717 00:32:01,255 --> 00:32:04,480 Det betyr bare at når dokumentet er klar, 718 00:32:04,480 --> 00:32:07,490 gå videre og registrere følgende funksjon 719 00:32:07,490 --> 00:32:12,064 som sender behandleren for HTML element som unik idé er demo. 720 00:32:12,064 --> 00:32:14,480 Og så, når det skjer, kalle disse to linjer med kode. 721 00:32:14,480 --> 00:32:18,677 Og dette er tragisk, en mer ordrik måte å si return false. 722 00:32:18,677 --> 00:32:21,510 Og vi nevnte dette bare fordi vil du se kode som dette på nettet. 723 00:32:21,510 --> 00:32:23,140 Og det er ingenting å være daunted av. 724 00:32:23,140 --> 00:32:26,057 Men heller, husk at det er kommer til å være vanlig i Javascript 725 00:32:26,057 --> 00:32:26,765 er dette paradigmet. 726 00:32:26,765 --> 00:32:29,510 Og så det er derfor vi vise det for nå. 727 00:32:29,510 --> 00:32:30,010 Greit. 728 00:32:30,010 --> 00:32:32,730 Så uten bolig for mye på at syntaks, 729 00:32:32,730 --> 00:32:37,800 er det er spørsmål om disse eksemplene eller ideer så langt? 730 00:32:37,800 --> 00:32:38,300 Greit. 731 00:32:38,300 --> 00:32:40,220 Så la oss bruke dette for noe nyttig. 732 00:32:40,220 --> 00:32:47,070 Å gjøre en nettside som bare sier hei, så og så er ikke alt som er interessant, 733 00:32:47,070 --> 00:32:47,830 ikke å underwhelm. 734 00:32:47,830 --> 00:32:51,038 Dette kommer ikke til å være vakker, men det kommer til å gjøre noe nyttig. 735 00:32:51,038 --> 00:32:56,350 La meg gå tilbake til min katalog her og åpne opp, sier, form 0.html. 736 00:32:56,350 --> 00:32:59,320 >> Så antar at dette er den freshman egenutført sport registreringsside 737 00:32:59,320 --> 00:33:01,780 uten CSS eller noen følelse av design. 738 00:33:01,780 --> 00:33:05,404 Og jeg ønsker å gå videre og registrer deg her med et passord. 739 00:33:05,404 --> 00:33:08,320 Og jeg kommer til å godta vilkårene og betingelser og klikk Registrer. 740 00:33:08,320 --> 00:33:11,700 Og nå nettstedet sier: "Du er registrert! (Vel, egentlig ikke.) " 741 00:33:11,700 --> 00:33:15,070 Det virker som om det fungerte, men la meg gå videre og tvinge reload. 742 00:33:15,070 --> 00:33:18,720 >> Og la meg si, nei, gjør du ikke trenger min faktiske e-postadresse. 743 00:33:18,720 --> 00:33:21,820 Eller kanskje vi skal bare si post der inne. 744 00:33:21,820 --> 00:33:25,080 Passord vil bli, liksom: 12345. 745 00:33:25,080 --> 00:33:28,810 Og så, bare fordi jeg er en idiot, nå er det 123 456 789. 746 00:33:28,810 --> 00:33:31,150 Og jeg kommer ikke til å sjekke boksen. 747 00:33:31,150 --> 00:33:31,850 >> Hmm. 748 00:33:31,850 --> 00:33:32,350 Greit. 749 00:33:32,350 --> 00:33:34,920 Så det er flere muligheter for forbedring her. 750 00:33:34,920 --> 00:33:39,070 Og du vet, eller vil se i PSet sju, som du kan skrive code-- 751 00:33:39,070 --> 00:33:41,890 og du må skrive kode i PHP-- å forsvare 752 00:33:41,890 --> 00:33:45,780 mot slike bruker feil fordi brukeren klart 753 00:33:45,780 --> 00:33:46,790 har ikke samarbeidet. 754 00:33:46,790 --> 00:33:49,680 Og han eller hun ikke har gitt deg all den verdier du ønsket eller selv i formatet 755 00:33:49,680 --> 00:33:50,630 at du ville ha dem. 756 00:33:50,630 --> 00:33:53,250 Så du vil se i PSet syv som Vi kunne sikkert ha noen 757 00:33:53,250 --> 00:33:55,680 hvis forholdene som sier Hvis e-postadressen 758 00:33:55,680 --> 00:33:59,450 er ikke en username@something.edu, vi kunne bare 759 00:33:59,450 --> 00:34:02,575 si beklager og beklager til brukeren mye, som du kan være i PSet sju. 760 00:34:02,575 --> 00:34:05,700 Eller hvis de ikke har sjekket den boksen, viser seg i PHP, kan du gjenkjenne det, 761 00:34:05,700 --> 00:34:06,200 også. 762 00:34:06,200 --> 00:34:09,389 Og sikkert hvis passordene samsvarer ikke som i register.php 763 00:34:09,389 --> 00:34:11,521 for PSet sju, kan du gjenkjenne det. 764 00:34:11,521 --> 00:34:13,770 Men det er en smerte i hals i at nå ber de 765 00:34:13,770 --> 00:34:15,510 oss til å gå hele veien til serveren. 766 00:34:15,510 --> 00:34:17,053 Brukeren er informert om feilen. 767 00:34:17,053 --> 00:34:19,219 Og minst mindre du bruker noen mer avansert teknikk, 768 00:34:19,219 --> 00:34:20,929 nå har de til å klikke på tilbakepilen. 769 00:34:20,929 --> 00:34:23,300 Ville det ikke være hyggelig, som en rekke nettsteder i dag, 770 00:34:23,300 --> 00:34:26,190 Hvis du hadde mer umiddelbare tilbakemeldinger, kjapt? 771 00:34:26,190 --> 00:34:31,389 >> Med andre ord, la meg gå til versjon en, som kommer til å bli noe penere. 772 00:34:31,389 --> 00:34:33,469 Men det har denne funksjonen. 773 00:34:33,469 --> 00:34:39,590 Malan, 12345, 123456789, ikke kommer til å krysse av i boksen Register. 774 00:34:39,590 --> 00:34:41,330 Passordene er ikke like. 775 00:34:41,330 --> 00:34:44,459 Så selv om dette pop-up er ugly-- vi kan erstatte dette til slutt 776 00:34:44,459 --> 00:34:47,000 med noe som Bootstrap, som du vil se i PSet sju 777 00:34:47,000 --> 00:34:50,239 er et svært populært library-- jeg gjorde oppdage at passordene ikke stemmer overens. 778 00:34:50,239 --> 00:34:50,739 Greit. 779 00:34:50,739 --> 00:34:52,530 Vel, la meg fikse det som brukeren. 780 00:34:52,530 --> 00:34:55,460 La meg gå videre og si 12345, 12345. 781 00:34:55,460 --> 00:34:57,780 Fortsatt ikke sjekker avtalen. 782 00:34:57,780 --> 00:35:00,210 Du må godta vilkår og betingelser. 783 00:35:00,210 --> 00:35:01,760 Så hvorfor? 784 00:35:01,760 --> 00:35:04,100 >> Hvis vi allerede har hevdet at det er en måte, 785 00:35:04,100 --> 00:35:07,260 og vi har krevd at du i PSet sju for å påvise feil 786 00:35:07,260 --> 00:35:09,780 tilstander som dette server-side, hvorfor skulle jeg 787 00:35:09,780 --> 00:35:13,940 bry også gjøre dette i Javascript? 788 00:35:13,940 --> 00:35:15,850 Hva er et argument i favør av å legge til hva 789 00:35:15,850 --> 00:35:18,760 du er i ferd med å se så some-- det er ekstra kompleksitet. 790 00:35:18,760 --> 00:35:23,610 791 00:35:23,610 --> 00:35:25,930 >> Kanskje er det ingen oppside. 792 00:35:25,930 --> 00:35:26,924 Hva kan det være? 793 00:35:26,924 --> 00:35:27,840 PUBLIKUM: [uhørlig]. 794 00:35:27,840 --> 00:35:31,132 795 00:35:31,132 --> 00:35:32,340 DAVID MALAN: Oh, interessant. 796 00:35:32,340 --> 00:35:33,530 Potensielle trusler. 797 00:35:33,530 --> 00:35:37,540 Så sikker på, hvis du ikke håndterer feilaktig brukerundersøkelser så stor, 798 00:35:37,540 --> 00:35:40,170 kanskje det er alle bedre hvis det ikke engang nå serveren din. 799 00:35:40,170 --> 00:35:42,160 Jeg ville presse tilbake dit og si, bør du sannsynligvis 800 00:35:42,160 --> 00:35:43,284 fikse begge disse problemene. 801 00:35:43,284 --> 00:35:44,140 Men det er rettferdig. 802 00:35:44,140 --> 00:35:44,710 Hva annet? 803 00:35:44,710 --> 00:35:45,626 >> PUBLIKUM: [uhørlig]. 804 00:35:45,626 --> 00:35:47,970 805 00:35:47,970 --> 00:35:49,014 >> DAVID MALAN: Yeah. 806 00:35:49,014 --> 00:35:51,680 Denne koden, som vi har sagt før, er tolket på klientsiden. 807 00:35:51,680 --> 00:35:53,846 Det plager ikke serveren, noe som betyr at det ikke skjer 808 00:35:53,846 --> 00:35:55,930 påvirke serverens last eller kapasitet. 809 00:35:55,930 --> 00:35:59,840 Og nå, for lite gamle meg, dette har ingen meningsfull effekt 810 00:35:59,840 --> 00:36:01,970 fordi jeg har en bruker akkurat nå. 811 00:36:01,970 --> 00:36:04,010 >> Men hvis du er noe nettside av anstendig størrelse, 812 00:36:04,010 --> 00:36:07,400 spesielt de største, som Facebook, jo mer du kan holde folk utenfor 813 00:36:07,400 --> 00:36:09,927 av serveren jo bedre fordi en server, selvfølgelig, 814 00:36:09,927 --> 00:36:12,510 bare har en begrenset mengde RAM, et endelig antall gigahertz, 815 00:36:12,510 --> 00:36:16,340 et endelig antall ting den kan gjøre pr tidsenhet. 816 00:36:16,340 --> 00:36:19,170 Så hvis det er flere personer i verden treffer din server, 817 00:36:19,170 --> 00:36:21,750 uhell logging feilaktig, like godt hvis du 818 00:36:21,750 --> 00:36:23,254 kan holde at belastningen på serveren din. 819 00:36:23,254 --> 00:36:25,420 Pluss, spesielt på en mobil device-- Hvis du noensinne 820 00:36:25,420 --> 00:36:29,190 logg inn my.harvard eller Yale nettid eller lignende, 821 00:36:29,190 --> 00:36:32,330 det er denne ventetiden med mye nettsteder sånn der det trengs, 822 00:36:32,330 --> 00:36:34,110 aktig, en jævla sekund eller to ganger. 823 00:36:34,110 --> 00:36:37,979 Og så, min Gud, hvis du skriver feil, så må du slå tilbake og gjøre om det. 824 00:36:37,979 --> 00:36:40,520 Så det er ventetid, spesielt på tregere nettverkstilkoblinger. 825 00:36:40,520 --> 00:36:43,030 Men Javascript, fordi det kjører på klienten 826 00:36:43,030 --> 00:36:46,720 og trenger ikke å gå frem og tilbake over et potensielt treg Internett 827 00:36:46,720 --> 00:36:49,780 tilkobling, kan du få nesten momentant tilbakemeldinger. 828 00:36:49,780 --> 00:36:50,760 >> Så la oss se på dette. 829 00:36:50,760 --> 00:36:54,280 La meg åpne opp form 0 og se på HTML her. 830 00:36:54,280 --> 00:36:56,040 Og la oss bare se hva som skjer. 831 00:36:56,040 --> 00:36:59,460 Dette er en form som Handlingen er register.php. 832 00:36:59,460 --> 00:37:01,530 Jeg bare bruker får så at jeg kunne se nettadressen. 833 00:37:01,530 --> 00:37:05,030 Men for passord, ville vi helt sikkert vil å endre dette til å legge i virkeligheten. 834 00:37:05,030 --> 00:37:06,910 Her er en inngang felt av typen tekst. 835 00:37:06,910 --> 00:37:09,050 Her er en annen inngang felt av typen passord. 836 00:37:09,050 --> 00:37:13,150 Her er, hvis du aldri har sett, en inngang på avkrysnings type. 837 00:37:13,150 --> 00:37:15,250 >> Men det er ingen Javascript her overhodet. 838 00:37:15,250 --> 00:37:18,170 Dette er bare HTML som går til register.php. 839 00:37:18,170 --> 00:37:21,020 Men i versjon en, hvor jeg begynte å få disse pop-ups, 840 00:37:21,020 --> 00:37:23,010 la oss se hva som faktisk skjer her. 841 00:37:23,010 --> 00:37:26,757 I versjon en, hva Jeg kommer til å see-- jeg 842 00:37:26,757 --> 00:37:29,340 tenkte jeg kunne stall nok med nok ord, men jeg løp ut. 843 00:37:29,340 --> 00:37:35,180 844 00:37:35,180 --> 00:37:38,590 >> I versjon one-- der vi går. 845 00:37:38,590 --> 00:37:43,180 I versjon en, merke following-- og er ikke den beste gjennomføringen, 846 00:37:43,180 --> 00:37:44,420 men det er min første. 847 00:37:44,420 --> 00:37:47,680 Legg merke til at under form, har jeg et script tag. 848 00:37:47,680 --> 00:37:49,430 Og et skriptmerket betyr, hei, nettleser, her 849 00:37:49,430 --> 00:37:52,340 kommer noen kode i, typisk, Javascript. 850 00:37:52,340 --> 00:37:54,420 Og nå merke til hva jeg gjør. 851 00:37:54,420 --> 00:37:59,070 På line-- jeg kan knapt Les it linje 32, står det, 852 00:37:59,070 --> 00:38:01,420 Var form-- så gi meg en variabel kalt form. 853 00:38:01,420 --> 00:38:05,049 Og så får document.getElementId med "registrering." 854 00:38:05,049 --> 00:38:05,590 Hva er dette? 855 00:38:05,590 --> 00:38:07,290 Vel, la meg spole opp her. 856 00:38:07,290 --> 00:38:11,510 Og legg merke til, ah, jeg ga form element en vilkårlig men beskrivende idé 857 00:38:11,510 --> 00:38:13,050 for registrering. 858 00:38:13,050 --> 00:38:16,820 Så dette gir meg en variabel som tillater meg å hente den node, 859 00:38:16,820 --> 00:38:19,580 som rektangel i treet heter form. 860 00:38:19,580 --> 00:38:24,460 form.onsubmit midler, hei nettleser, registrere en hendelse lytteren 861 00:38:24,460 --> 00:38:25,470 på dette skjemaet. 862 00:38:25,470 --> 00:38:28,890 Med andre ord, når dette skjemaet innsendt, utføre følgende kode. 863 00:38:28,890 --> 00:38:30,810 Det trenger ikke et navn fordi hvorfor gjør du trenger å vite navnet? 864 00:38:30,810 --> 00:38:32,880 Du trenger bare å vite hva du skal utføre, ergo 865 00:38:32,880 --> 00:38:35,610 det er en anonym eller lambda funksjon. 866 00:38:35,610 --> 00:38:37,632 Og at funksjonen er alle disse linjer her. 867 00:38:37,632 --> 00:38:40,840 Og nå, for å være ærlig, selv om du kanskje ikke noensinne har skrevet Javascript 868 00:38:40,840 --> 00:38:44,200 før, det er bare C og PHP logikk. 869 00:38:44,200 --> 00:38:51,720 Så hvis form.email.value == "" - så hvis e-postfeltet er tomt, 870 00:38:51,720 --> 00:38:54,980 kjefte på brukeren med "Du må oppgi din e-postadresse. " 871 00:38:54,980 --> 00:38:58,980 Annet hvis form.password.value er blank kjefte på brukeren, 872 00:38:58,980 --> 00:39:00,400 "Du må oppgi passordet ditt." 873 00:39:00,400 --> 00:39:04,240 >> Mer interessant logisk, hvis form.password.value ikke 874 00:39:04,240 --> 00:39:08,630 lik form.confirmation.value-- hvor kom bekreftelsen kommer fra? 875 00:39:08,630 --> 00:39:09,470 La meg spole tilbake. 876 00:39:09,470 --> 00:39:12,870 Vel, jeg kalte denne inngangen feltet her passord. 877 00:39:12,870 --> 00:39:15,180 Og jeg kalte dette en her bekreftelse. 878 00:39:15,180 --> 00:39:17,850 Jeg kunne ha kalt det passord to eller noe annet. 879 00:39:17,850 --> 00:39:20,560 Jeg er bare logisk å sjekke at disse to er like. 880 00:39:20,560 --> 00:39:25,760 Else-- det viser seg at dette er Mr. Boole igjen-- en boolsk verdi, i boksen. 881 00:39:25,760 --> 00:39:29,810 Så hvis jeg sier, utrops point-- hvis ikke form.agreement.checked, 882 00:39:29,810 --> 00:39:31,820 kjefte på brukeren også. 883 00:39:31,820 --> 00:39:34,470 >> Så dette syntaks som du vil se er svært vanlig i Javascript, 884 00:39:34,470 --> 00:39:35,970 hvor du har dette prikkete notasjon. 885 00:39:35,970 --> 00:39:37,460 Du starter med et objekt her. 886 00:39:37,460 --> 00:39:41,430 Du dykke i dypere til en til en eiendom som passord. 887 00:39:41,430 --> 00:39:43,280 Og så du får på den faktiske verdien. 888 00:39:43,280 --> 00:39:45,830 Og igjen, her er input. 889 00:39:45,830 --> 00:39:47,310 Her er navnet passord. 890 00:39:47,310 --> 00:39:50,860 Og verdien er uansett menneske har faktisk skrevet i. 891 00:39:50,860 --> 00:39:53,610 >> Så i alle disse tilfellene jeg returnerte falsk. 892 00:39:53,610 --> 00:39:55,800 Men hvis ikke, jeg kommer tilbake sant. 893 00:39:55,800 --> 00:39:58,030 Og så nå ser vi en overbevisende bruk av når 894 00:39:58,030 --> 00:40:00,620 du vil returnere false til stopp hva brukerens gjøre 895 00:40:00,620 --> 00:40:03,200 og gjøre ham eller henne å velge igjen eller skriv igjen. 896 00:40:03,200 --> 00:40:05,870 Ellers, vi returnere true. 897 00:40:05,870 --> 00:40:08,585 >> Og la meg presentere én andre variant av denne bare 898 00:40:08,585 --> 00:40:13,140 til frø viss forståelse av disse. 899 00:40:13,140 --> 00:40:16,850 Vel, i versjon 2 av denne, form 2-- Jeg skal gjøre det med en bølge av en hånd. 900 00:40:16,850 --> 00:40:19,920 Dette er, for de nysgjerrige, jQuery versjonen, 901 00:40:19,920 --> 00:40:23,330 de av dere som kanskje ønsker å prøve seg i det aktuelle biblioteket. 902 00:40:23,330 --> 00:40:25,145 Men la oss start-- og noen spørsmål? 903 00:40:25,145 --> 00:40:29,230 La meg ta en pause for øyeblikket fordi som var rask og mye. 904 00:40:29,230 --> 00:40:32,610 >> Men det fine her er at alle av koden er ganske mye det samme. 905 00:40:32,610 --> 00:40:33,985 Den nye ting er hva som er den dom? 906 00:40:33,985 --> 00:40:35,115 Hva er disse rektangler? 907 00:40:35,115 --> 00:40:35,990 Hva er disse nodene? 908 00:40:35,990 --> 00:40:37,540 Hva er en anonym funksjon? 909 00:40:37,540 --> 00:40:38,830 Hva er en hendelsesbehandling? 910 00:40:38,830 --> 00:40:43,480 Men heldigvis, det meste av det er bare full sirkel fra, sier uke null. 911 00:40:43,480 --> 00:40:43,980 Greit. 912 00:40:43,980 --> 00:40:46,070 Så noe litt mer interessant? 913 00:40:46,070 --> 00:40:49,340 Vel, først av alt, la meg gå videre og åpne opp Google Maps. 914 00:40:49,340 --> 00:40:53,360 Og du vil legge merke til at for en øyeblikket, på delt andre, 915 00:40:53,360 --> 00:40:55,930 Legg merke til hva som skjer når Jeg klikker fort nok. 916 00:40:55,930 --> 00:40:59,720 Og denne forbindelsen ved Harvard er så fort at du egentlig ikke merke til det. 917 00:40:59,720 --> 00:41:04,469 Men hva gjør du slags liksom se hvis jeg klikker og drar veldig fort? 918 00:41:04,469 --> 00:41:07,010 De av dere ser på nettet, hvis du bremse dette til 0.5x hastighet, 919 00:41:07,010 --> 00:41:09,640 du kan se dette bedre. 920 00:41:09,640 --> 00:41:13,550 >> Hva skjedde bare før jeg klikket og dratt? 921 00:41:13,550 --> 00:41:15,900 La meg prøve her-- la meg gjøre noe annet, som 90210. 922 00:41:15,900 --> 00:41:17,550 La oss gå langt unna. 923 00:41:17,550 --> 00:41:19,000 Det var veldig fort, også. 924 00:41:19,000 --> 00:41:22,460 Hva med Disney World? 925 00:41:22,460 --> 00:41:23,190 Det vi går. 926 00:41:23,190 --> 00:41:23,690 OK. 927 00:41:23,690 --> 00:41:26,030 Hva så du for en delt andre? 928 00:41:26,030 --> 00:41:27,200 Akkurat, som, torg, ikke sant? 929 00:41:27,200 --> 00:41:28,930 Plassholdere for fliser? 930 00:41:28,930 --> 00:41:30,270 >> Vel, hva er det som skjer her? 931 00:41:30,270 --> 00:41:35,410 Google Maps er et fint eksempel på denne teknologien som kalles AJAX. 932 00:41:35,410 --> 00:41:38,510 Og det er her vi begynner å bruke Javascript i en spesielt 933 00:41:38,510 --> 00:41:39,277 forlokkende måte. 934 00:41:39,277 --> 00:41:41,610 Tilbake i dag, var det Dette nettsted som heter MapQuest. 935 00:41:41,610 --> 00:41:44,120 Og jeg burde ha tatt en skjermbilde av dette fra 1990-tallet, 936 00:41:44,120 --> 00:41:45,820 der hvis du ønsket å se her opp på kartet, 937 00:41:45,820 --> 00:41:48,590 du ville bokstavelig talt klikker en pil opp på toppen som viste deg 938 00:41:48,590 --> 00:41:49,870 en annen firkant på kartet. 939 00:41:49,870 --> 00:41:51,790 Hvis du ønsket å gå til venstre, du klikket en pil som viste deg 940 00:41:51,790 --> 00:41:53,210 en annen firkant på kartet. 941 00:41:53,210 --> 00:41:54,840 Og noen nettsteder fortsatt gjøre dette i dag. 942 00:41:54,840 --> 00:41:57,820 Men selv MapQuest har fått bedre, som Google Maps. 943 00:41:57,820 --> 00:42:01,880 >> I stedet, hva er bedre disse dager er nettsteder som bruker AJAX. 944 00:42:01,880 --> 00:42:04,510 AJAX-- ellers kjent som Asynkron Javascript og XML, 945 00:42:04,510 --> 00:42:08,370 som er bare en fancy måte å si en teknologi eller teknikk som 946 00:42:08,370 --> 00:42:14,200 tillater en nettleser hjelp av Javascript å foreta ytterligere HTTP-forespørsler 947 00:42:14,200 --> 00:42:16,390 etter at siden er lastet. 948 00:42:16,390 --> 00:42:17,479 Så hva betyr dette? 949 00:42:17,479 --> 00:42:19,270 Vel, det ville være snill av irriterende i Gmail 950 00:42:19,270 --> 00:42:21,103 hvis hver gang du ønsket for å sjekke e-posten, 951 00:42:21,103 --> 00:42:24,940 du hadde bokstavelig talt treffer Ctrl-R eller Kommando-R eller klikk Reload knappen 952 00:42:24,940 --> 00:42:26,580 og hele darn side ville laste. 953 00:42:26,580 --> 00:42:26,800 Høyre? 954 00:42:26,800 --> 00:42:28,460 Det ville blinke hvitt trolig for andre. 955 00:42:28,460 --> 00:42:30,043 Du vil se dum fremdriftslinjen. 956 00:42:30,043 --> 00:42:33,170 Og bare for å se om du har ny hele nettsiden og URL-post, 957 00:42:33,170 --> 00:42:34,580 du er på ville måtte lesse. 958 00:42:34,580 --> 00:42:35,960 >> Men det er ikke det som skjer i Gmail. 959 00:42:35,960 --> 00:42:36,459 Høyre? 960 00:42:36,459 --> 00:42:40,300 Når du får en ny e-post i Gmail, hva som skjer på skjermen? 961 00:42:40,300 --> 00:42:41,480 Det viser bare opp, ikke sant? 962 00:42:41,480 --> 00:42:44,280 Det bare vises magisk som en ny rad i tabellen. 963 00:42:44,280 --> 00:42:47,030 Som faktisk innebærer en anstendig mengde kompleksitet. 964 00:42:47,030 --> 00:42:51,892 Faktisk, hvis du tenker på dette treet, som selv om er en enkel en her, 965 00:42:51,892 --> 00:42:54,100 Gmail-- og jeg må se på koden for å være sure-- 966 00:42:54,100 --> 00:42:58,710 sannsynligvis har en HTML-tabell eller kanskje en uordnet liste som den gjengir 967 00:42:58,710 --> 00:43:01,060 hver av innboksene e-poster som. 968 00:43:01,060 --> 00:43:04,050 >> Og så hvis du forestille deg dette er det er et tre i minnet når du er 969 00:43:04,050 --> 00:43:09,050 bruker Gmail som ser slags type som dette, når Google innser, ooh, 970 00:43:09,050 --> 00:43:12,770 du har en ny e-post, det gjør det ikke ønsker å gjenoppbygge hele treet. 971 00:43:12,770 --> 00:43:16,430 Snarere ønsker det å finne node i treet som representerer din innboks 972 00:43:16,430 --> 00:43:18,580 og bare sette inn en ny node. 973 00:43:18,580 --> 00:43:24,640 >> Så veldig lik PSet fem, hvor du måtte sette noder i en hash table, 974 00:43:24,640 --> 00:43:28,410 på samme måte gjør Google, via Javascript-kode som den har skrevet, 975 00:43:28,410 --> 00:43:31,890 traverse dette treet, finne ut hvor er at innboksen del av vinduet, 976 00:43:31,890 --> 00:43:33,440 og deretter sette inn en ny rad. 977 00:43:33,440 --> 00:43:37,460 Og en ny rad betyr bare én eller flere nye noder i et tre. 978 00:43:37,460 --> 00:43:41,340 >> Og så AJAX er denne teknikken som gjør det mulig for nettopp det. 979 00:43:41,340 --> 00:43:44,440 Når du har besøkt en URL, Men gal lenge det er, 980 00:43:44,440 --> 00:43:46,472 og når siden har blitt lastet, kan du likevel 981 00:43:46,472 --> 00:43:48,430 hente mer data fra internet-- enten det er 982 00:43:48,430 --> 00:43:52,460 en e-post eller en flis av en map-- grip den bak kulissene 983 00:43:52,460 --> 00:43:55,290 og deretter sette det inn på siden slik at menneske ikke egentlig 984 00:43:55,290 --> 00:43:56,910 må vente på det. 985 00:43:56,910 --> 00:43:58,980 >> Facebook Messenger fungerer på samme måte. 986 00:43:58,980 --> 00:44:01,562 En rekke andre websites-- oh, faktisk, selv dette. 987 00:44:01,562 --> 00:44:04,270 Jeg mener, dette er, ærlig, type en irriterende funksjonen disse dager. 988 00:44:04,270 --> 00:44:07,500 Hvis jeg begynner å søke etter cats-- dette er slag av en fryktelig brukeropplevelse. 989 00:44:07,500 --> 00:44:08,990 Det begynner bare å søke etter meg. 990 00:44:08,990 --> 00:44:10,050 Vel hva er det gjør? 991 00:44:10,050 --> 00:44:12,920 Nettadressen har egentlig ikke endret siden jeg begynte å skrive. 992 00:44:12,920 --> 00:44:17,330 Men hva som skjer på tvers av wire-- OK, hmm interessant. 993 00:44:17,330 --> 00:44:20,470 Hva kommer over tråd her bare blir sprøere. 994 00:44:20,470 --> 00:44:21,090 >> OK. 995 00:44:21,090 --> 00:44:24,670 Så la meg gå videre og inspisere element og gå til kategorien Network 996 00:44:24,670 --> 00:44:27,040 og prøve å gjøre dette teknisk og mindre om katter. 997 00:44:27,040 --> 00:44:32,595 Som jeg skriver, bokstavelig talt, katter og-- hva som skjer 998 00:44:32,595 --> 00:44:37,710 per-- jeg ikke kommer til å klikke det. 999 00:44:37,710 --> 00:44:38,210 Greit. 1000 00:44:38,210 --> 00:44:44,280 Så her nede, hva som skjer hver gang jeg skriver et tegn, tilsynelatende? 1001 00:44:44,280 --> 00:44:45,000 Liker, lavt nivå? 1002 00:44:45,000 --> 00:44:47,860 Hva skjer med hver av dem tegnene jeg skriver på tastaturet? 1003 00:44:47,860 --> 00:44:48,359 Yeah? 1004 00:44:48,359 --> 00:44:50,950 PUBLIKUM: [uhørlig]. 1005 00:44:50,950 --> 00:44:52,340 >> DAVID MALAN: Nettopp. 1006 00:44:52,340 --> 00:44:55,600 Hver av disse tegnene er kommer til Google, en av gangen. 1007 00:44:55,600 --> 00:44:58,490 De bygger opp en streng på deres server som representerer 1008 00:44:58,490 --> 00:44:59,936 alt jeg har skrevet i hittil. 1009 00:44:59,936 --> 00:45:01,810 Og hver gang jeg skriver en annen karakter, de 1010 00:45:01,810 --> 00:45:04,530 bruke sin hemmelige saus av en søke algoritme og finne ut, 1011 00:45:04,530 --> 00:45:07,370 mener han denne katten siden eller denne katten siden eller lignende? 1012 00:45:07,370 --> 00:45:10,620 Så i en viss forstand, gir det meg med en bedre opplevelse i at jeg ikke engang 1013 00:45:10,620 --> 00:45:11,860 trenger for å fullføre min tanke. 1014 00:45:11,860 --> 00:45:14,440 Og ja, det er en nyttig ting, autofullfør generelt. 1015 00:45:14,440 --> 00:45:17,690 Hvis deres algoritmer er god nok og hvis mine søk er tydelig nok, 1016 00:45:17,690 --> 00:45:19,300 Jeg trenger ikke å skrive hele ordet. 1017 00:45:19,300 --> 00:45:22,110 De kommer til å fortelle meg hva det er jeg faktisk søker etter. 1018 00:45:22,110 --> 00:45:25,940 Så hva Google kaller instant søk er bare å bruke AJAX, 1019 00:45:25,940 --> 00:45:30,820 bruker kode som gir dem mulighet til å be om ekstra innhold via en nettleser 1020 00:45:30,820 --> 00:45:34,026 bak kulissene ved hjelp av denne nytt språk, Javascript. 1021 00:45:34,026 --> 00:45:35,400 Så vi har et par minutter igjen. 1022 00:45:35,400 --> 00:45:37,710 Og la meg kalle opp min kompis Colton opp på scenen, 1023 00:45:37,710 --> 00:45:40,090 siden det virket spesielt morsomt sist gang 1024 00:45:40,090 --> 00:45:42,290 å innføre en teknologi at noen av dere 1025 00:45:42,290 --> 00:45:44,769 har uttrykt interesse i for endelig prosjekter. 1026 00:45:44,769 --> 00:45:47,310 Vi tenkte det ville være morsomt å bringe opp frivillig, men i dag 1027 00:45:47,310 --> 00:45:50,074 vise deg et tillegg til dette som gjør at you-- yeah, 1028 00:45:50,074 --> 00:45:50,990 Jeg så denne hånden først. 1029 00:45:50,990 --> 00:45:52,900 Kom opp. 1030 00:45:52,900 --> 00:45:53,560 Veldig bra gjort. 1031 00:45:53,560 --> 00:45:55,035 Godt jobbet. 1032 00:45:55,035 --> 00:45:57,410 Jeg kommer til å projisere dette på skjermen i bare et øyeblikk. 1033 00:45:57,410 --> 00:45:58,150 Hva heter du for alle? 1034 00:45:58,150 --> 00:45:59,180 >> EFA: Jeg er 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: Yeah. 1039 00:46:00,730 --> 00:46:01,250 >> DAVID MALAN: Hyggelig å se deg. 1040 00:46:01,250 --> 00:46:01,600 Greit. 1041 00:46:01,600 --> 00:46:02,590 La meg få dette klart. 1042 00:46:02,590 --> 00:46:04,423 Kom over til midten med Colton her. 1043 00:46:04,423 --> 00:46:07,050 Hva Colton har i hendene i dag er en fjernkontroll. 1044 00:46:07,050 --> 00:46:10,440 Så i stedet for å bare stå der i en tredimensjonal verden ser rundt 1045 00:46:10,440 --> 00:46:14,080 som Colton gjorde, nå Efa kan faktisk gå rundt ved å gå opp, 1046 00:46:14,080 --> 00:46:16,689 ned, til venstre og høyre som en Nintendo eller Xbox-kontrolleren. 1047 00:46:16,689 --> 00:46:18,230 EFA: Jeg kommer til å falle av scenen. 1048 00:46:18,230 --> 00:46:20,500 DAVID MALAN: Jeg vil stå omtrent over her. 1049 00:46:20,500 --> 00:46:21,991 Men det er en risiko. 1050 00:46:21,991 --> 00:46:22,490 OK. 1051 00:46:22,490 --> 00:46:25,690 Så gå videre og sette de på. 1052 00:46:25,690 --> 00:46:29,315 La meg gå videre og bytte til skjermen her. 1053 00:46:29,315 --> 00:46:30,670 La meg dempe lysene. 1054 00:46:30,670 --> 00:46:32,780 Og Colton, la meg komme stativ ved siden av deg. 1055 00:46:32,780 --> 00:46:35,520 >> Du ønsker å forklare her do med mic hva vi gjør? 1056 00:46:35,520 --> 00:46:36,380 Vær så god. 1057 00:46:36,380 --> 00:46:37,280 >> COLTON: Sure. 1058 00:46:37,280 --> 00:46:39,980 Så akkurat nå er vi laste opp Oculus, 1059 00:46:39,980 --> 00:46:43,070 Jeg antar operating-- ikke opererer system, men hovedprogrammet, der 1060 00:46:43,070 --> 00:46:46,630 du kan få tilgang til alle spillene og apps som er i biblioteket. 1061 00:46:46,630 --> 00:46:50,060 Så akkurat nå, bør det si peke på styreplaten for å begynne. 1062 00:46:50,060 --> 00:46:53,430 Touchpad kommer til å være på høyre side av headsettet. 1063 00:46:53,430 --> 00:46:54,569 Så sett i gang og tap-- 1064 00:46:54,569 --> 00:46:55,110 EFA: Oh, mann. 1065 00:46:55,110 --> 00:46:56,443 DAVID MALAN: Ja, der du går. 1066 00:46:56,443 --> 00:47:00,340 1067 00:47:00,340 --> 00:47:02,460 Kvaliteten Efa er å se er mye høyere kvalitet. 1068 00:47:02,460 --> 00:47:03,831 Dette er bare Wi-Fi her. 1069 00:47:03,831 --> 00:47:05,580 COLTON: Så hva du er kommer til å ønske å gjøre 1070 00:47:05,580 --> 00:47:08,350 er å se mot toppen høyre på skjermen. 1071 00:47:08,350 --> 00:47:10,420 Jepp, det spillet på den aller øverst til høyre. 1072 00:47:10,420 --> 00:47:14,780 Og så når du velger det, trykker du på styreplaten igjen. 1073 00:47:14,780 --> 00:47:17,010 Jeg tror sine Dreadhalls. 1074 00:47:17,010 --> 00:47:20,820 Og så her er a-- her, la meg holde brillene dine for deg. 1075 00:47:20,820 --> 00:47:24,420 1076 00:47:24,420 --> 00:47:25,790 >> Så ga jeg bare ham en kontroller. 1077 00:47:25,790 --> 00:47:28,886 Så nå kan han styre spillet. 1078 00:47:28,886 --> 00:47:30,510 Han kan bevege seg rundt og sånt. 1079 00:47:30,510 --> 00:47:31,968 Så gå videre og se opp til toppen. 1080 00:47:31,968 --> 00:47:33,640 Du bør se New Game. 1081 00:47:33,640 --> 00:47:36,310 Så sett i gang, og du kan gjøre det. 1082 00:47:36,310 --> 00:47:39,320 Nå, bør du være i stand til å kontrollere selv med kontrolleren, 1083 00:47:39,320 --> 00:47:43,860 også, så snart spillet laster opp her. 1084 00:47:43,860 --> 00:47:46,356 Dette kan være litt skummelt. 1085 00:47:46,356 --> 00:47:47,300 >> EFA: Nå forteller du meg. 1086 00:47:47,300 --> 00:47:50,132 OK. 1087 00:47:50,132 --> 00:47:51,080 >> COLTON: All right. 1088 00:47:51,080 --> 00:47:52,650 Så bekrefter du at du kan bevege deg rundt. 1089 00:47:52,650 --> 00:47:52,750 OK. 1090 00:47:52,750 --> 00:47:53,583 Du kan bevege deg rundt. 1091 00:47:53,583 --> 00:47:54,300 Perfekt. 1092 00:47:54,300 --> 00:47:56,470 Så hvis du ser ned, har du et kart. 1093 00:47:56,470 --> 00:47:58,170 Kart viser deg hvor du er. 1094 00:47:58,170 --> 00:47:59,720 Du kan se deg rundt i rommet. 1095 00:47:59,720 --> 00:48:01,440 Du kan helt snu. 1096 00:48:01,440 --> 00:48:02,128 Ja, akkurat. 1097 00:48:02,128 --> 00:48:02,627 Snu. 1098 00:48:02,627 --> 00:48:05,370 1099 00:48:05,370 --> 00:48:07,125 >> Så ser til venstre. 1100 00:48:07,125 --> 00:48:09,875 Jeg tror det er noe du kan plukke opp på et fat i rommet. 1101 00:48:09,875 --> 00:48:11,709 >> EFA: Hvordan får jeg den kartlegge ut av veien? 1102 00:48:11,709 --> 00:48:12,375 COLTON: Se opp. 1103 00:48:12,375 --> 00:48:12,980 Bare se opp. 1104 00:48:12,980 --> 00:48:13,480 Greit. 1105 00:48:13,480 --> 00:48:13,765 Det du går. 1106 00:48:13,765 --> 00:48:15,181 Nå gå videre og bare snu. 1107 00:48:15,181 --> 00:48:21,460 1108 00:48:21,460 --> 00:48:24,620 Så se lenger til venstre. 1109 00:48:24,620 --> 00:48:25,530 Hold deg i bevegelse igjen. 1110 00:48:25,530 --> 00:48:26,960 Holde utkikk venstre. 1111 00:48:26,960 --> 00:48:27,541 Fortsett. 1112 00:48:27,541 --> 00:48:28,040 Yeah. 1113 00:48:28,040 --> 00:48:28,720 >> EFA: Oh, på den måten. 1114 00:48:28,720 --> 00:48:29,261 >> COLTON: Yeah. 1115 00:48:29,261 --> 00:48:30,999 Gå mot det med kontrolleren. 1116 00:48:30,999 --> 00:48:31,540 Det du går. 1117 00:48:31,540 --> 00:48:32,790 Nå bør det si plukke den opp. 1118 00:48:32,790 --> 00:48:33,360 Det du går. 1119 00:48:33,360 --> 00:48:34,290 Plukk den opp. 1120 00:48:34,290 --> 00:48:35,550 Greit. 1121 00:48:35,550 --> 00:48:38,286 Nå, la oss komme oss ut av dette rommet. 1122 00:48:38,286 --> 00:48:42,209 Gå videre og gå til den døren. 1123 00:48:42,209 --> 00:48:45,000 Så du kommer til å hold-- det står hold knappen for å tvinge den åpen. 1124 00:48:45,000 --> 00:48:46,333 Så gå videre og hold knappen. 1125 00:48:46,333 --> 00:48:48,250 Jepp, tvinger det åpne. 1126 00:48:48,250 --> 00:48:48,750 Greit. 1127 00:48:48,750 --> 00:48:49,410 Godt jobbet. 1128 00:48:49,410 --> 00:48:50,826 Nå er vi vandre ut av rommet. 1129 00:48:50,826 --> 00:48:56,970 1130 00:48:56,970 --> 00:49:01,366 Så jeg kommer til å la resten opp til deg og se hva du finner ut. 1131 00:49:01,366 --> 00:49:02,865 EFA: Jeg har ikke tenkt på det mørke rommet. 1132 00:49:02,865 --> 00:49:07,315 1133 00:49:07,315 --> 00:49:07,815 Å vent. 1134 00:49:07,815 --> 00:49:09,314 Nå må jeg gå ned den mørke hallen? 1135 00:49:09,314 --> 00:49:10,785 OK, jeg kommer tilbake [uhørbart]. 1136 00:49:10,785 --> 00:49:15,520 1137 00:49:15,520 --> 00:49:16,270 COLTON: All right. 1138 00:49:16,270 --> 00:49:17,560 Noen flere elementer for å plukke opp. 1139 00:49:17,560 --> 00:49:19,370 Ser ut som noen mynter. 1140 00:49:19,370 --> 00:49:22,242 Det er en lås hakke. 1141 00:49:22,242 --> 00:49:24,200 Så hvis du finner en låst dør, kan du bruke den. 1142 00:49:24,200 --> 00:49:27,755 1143 00:49:27,755 --> 00:49:28,380 Er du redd? 1144 00:49:28,380 --> 00:49:29,371 >> EFA: Ikke ennå. 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-- ja. 1148 00:49:35,497 --> 00:49:37,330 Bare late som du er faktisk står der. 1149 00:49:37,330 --> 00:49:39,580 Og hvis du slår around-- du er nødt til å bli vant til det. 1150 00:49:39,580 --> 00:49:40,752 Men det er fornuftig. 1151 00:49:40,752 --> 00:49:43,960 DAVID MALAN: Og mens Efa fortsetter å spille, siden vi kunne gjøre dette hele dagen, 1152 00:49:43,960 --> 00:49:45,381 Vi kan alle tærne her ute. 1153 00:49:45,381 --> 00:49:48,130 Men vi har to andre parene, Hvis du ønsker å komme opp og spille. 1154 00:49:48,130 --> 00:49:49,980 Ellers vil vi se deg neste onsdag. 1155 00:49:49,980 --> 00:49:51,354 Takk til våre frivillige i dag. 1156 00:49:51,354 --> 00:49:52,101 [APPLAUSE] 1157 00:49:52,101 --> 00:49:54,506 1158 00:49:54,506 --> 00:49:57,392 >> [MUSIC - "SEINFELD tema"] 1159 00:49:57,392 --> 00:49:58,222 1160 00:49:58,222 --> 00:50:00,180 SPEAKER 1: Vel, jeg er sette en ny PL montere på. 1161 00:50:00,180 --> 00:50:01,800 Jeg bare endret OLPF-- 1162 00:50:01,800 --> 00:50:03,980 >> SPEAKER 2: Så hva nøyaktig er det du gjør? 1163 00:50:03,980 --> 00:50:07,063 >> SPEAKER 1: Vel, hver og en av these-- her, vil jeg vise deg dette i her. 1164 00:50:07,063 --> 00:50:08,690 Du kan se den her. 1165 00:50:08,690 --> 00:50:09,510 >> SPEAKER 3: Jeg tror jeg er bra med disse. 1166 00:50:09,510 --> 00:50:09,933 Vil du ha litt mer? 1167 00:50:09,933 --> 00:50:11,325 >> SPEAKER 4: Nei, jeg er bra. [Uhørbart]. 1168 00:50:11,325 --> 00:50:12,200 >> SPEAKER 3: Nei, [uhørbart]. 1169 00:50:12,200 --> 00:50:12,700 Ha litt. 1170 00:50:12,700 --> 00:50:21,165 1171 00:50:21,165 --> 00:50:22,290 SPEAKER 1: Ulike farger. 1172 00:50:22,290 --> 00:50:22,890 SPEAKER 2: OK. 1173 00:50:22,890 --> 00:50:26,690 SPEAKER 1: Så til slutt hva det gjør er det justerer farge of--