1 00:00:00,000 --> 00:00:11,470 2 00:00:11,470 --> 00:00:12,764 >> SPEAKER 1: Alle, lige velkommen tilbage. 3 00:00:12,764 --> 00:00:14,140 Dette er CS50. 4 00:00:14,140 --> 00:00:16,800 Og dette er starten på ugen ni. 5 00:00:16,800 --> 00:00:19,960 Og dette er starten af ​​resten af din tid i CS50, hvor vi 6 00:00:19,960 --> 00:00:23,170 overgangen nu, endelig, til internettet aspekt af kurset, hvor du vil 7 00:00:23,170 --> 00:00:26,200 finder, at en masse af de grundlæggende elementer, der vi har været eksportere i ugevis 8 00:00:26,200 --> 00:00:29,270 stadig komme tilbage til at besøge, eller spøger, os. 9 00:00:29,270 --> 00:00:33,440 Men nu, vil du opdage, at det er en størrelsesorden lettere at 10 00:00:33,440 --> 00:00:36,540 udføre bestemte opgaver og løse visse problemer - 11 00:00:36,540 --> 00:00:41,050 så meget, at selv hvis du troede visse problemområder sæt var sjovt i deres 12 00:00:41,050 --> 00:00:44,200 egen måde, jeg tror, ​​at du vil finde at p indstille 7, s. sæt 8, og derefter, 13 00:00:44,200 --> 00:00:47,990 i sidste ende, vil det endelige projekt være desto mere glædeligt, fordi du 14 00:00:47,990 --> 00:00:51,830 finde, at vi begynder at tage for givet nu er tingene gerne memory management, og 15 00:00:51,830 --> 00:00:54,190 pointere, og hvad der foregår på under hætten. 16 00:00:54,190 --> 00:00:57,310 Og igen, tematiske, alle i hele semester har været denne lagdeling 17 00:00:57,310 --> 00:00:58,030 og lagdeling. 18 00:00:58,030 --> 00:01:00,530 Og nu er vi slags op her, stående på 19 00:01:00,530 --> 00:01:01,930 skuldre uger tidligere. 20 00:01:01,930 --> 00:01:05,360 >> Nu husker fra sidste gang, at vi talte om, hvordan internettet arbejdede. 21 00:01:05,360 --> 00:01:08,120 Og dette var måske en forsimpling, men husk, at 22 00:01:08,120 --> 00:01:12,960 hver computer i verden har en IP løse, selv om det er lidt af en 23 00:01:12,960 --> 00:01:14,570 overforenkling stadig. 24 00:01:14,570 --> 00:01:18,180 Og disse adresser bruges til entydigt identificere maskiner, så at 25 00:01:18,180 --> 00:01:22,010 når du sender oplysninger eller pakker, så at sige, kan de have en oprindelse 26 00:01:22,010 --> 00:01:24,000 adresse og en destination adresse. 27 00:01:24,000 --> 00:01:27,830 Og de samme IP-adresser kan bruges både på godt og også for det onde, 28 00:01:27,830 --> 00:01:29,270 til at spore dig, for eksempel. 29 00:01:29,270 --> 00:01:32,200 Faktisk, hver og en af ​​jer med en bærbar computer åben nu, eller en telefon i dit 30 00:01:32,200 --> 00:01:35,070 lomme, har en IP-adresse på Harvards netværk. 31 00:01:35,070 --> 00:01:39,120 Og det er ikke så svært at korrelere det til hvem og hvor du 32 00:01:39,120 --> 00:01:40,180 er i disse dage. 33 00:01:40,180 --> 00:01:42,090 Men mere om det måske i fremtiden. 34 00:01:42,090 --> 00:01:46,510 >> Nu tænkte jeg ville bringe nogle erindringer om [? styrke?] og give dig 35 00:01:46,510 --> 00:01:49,360 andet klip fra en vis dig måske finde bekendt. 36 00:01:49,360 --> 00:01:52,710 Hvis vi kunne dæmpe lyset for blot et par sekunder. 37 00:01:52,710 --> 00:01:53,960 Showet Numb3rs. 38 00:01:53,960 --> 00:01:57,510 39 00:01:57,510 --> 00:02:00,540 >> SPEAKER 2: Det er en 32-bit IPP4 adresse. 40 00:02:00,540 --> 00:02:01,610 >> SPEAKER 3: IPP, som i internettet? 41 00:02:01,610 --> 00:02:02,968 >> SPEAKER 2: Private netværk. 42 00:02:02,968 --> 00:02:04,960 Til Amita private netværk. 43 00:02:04,960 --> 00:02:16,930 44 00:02:16,930 --> 00:02:19,602 Hun er så fantastisk. 45 00:02:19,602 --> 00:02:21,030 >> SPEAKER 3: Kom nu, Charlie. 46 00:02:21,030 --> 00:02:21,490 >> SPEAKER 2: Det er. 47 00:02:21,490 --> 00:02:22,470 Et spejl IP-adresse. 48 00:02:22,470 --> 00:02:27,680 Hun lade os se, hvad hun laver i realtid. 49 00:02:27,680 --> 00:02:30,930 >> SPEAKER 1: OK, så en par ting galt med dette billede. 50 00:02:30,930 --> 00:02:32,920 Så en, og denne ene er acceptabel, dette er faktisk 51 00:02:32,920 --> 00:02:34,400 ikke en gyldig IP-adresse. 52 00:02:34,400 --> 00:02:38,190 En gyldig IP-adresse skal være tal i form w.x.y.z, hvor hver af 53 00:02:38,190 --> 00:02:40,000 disse skrivelser er 0 til 255. 54 00:02:40,000 --> 00:02:42,330 Men det er fint, fordi ligesom film, hvor de falske telefonnumre, 55 00:02:42,330 --> 00:02:43,520 de falske IP-adresser. 56 00:02:43,520 --> 00:02:45,230 Du behøver faktisk ikke ramt reelle servere. 57 00:02:45,230 --> 00:02:46,760 >> Men vel at mærke, det er en browser. 58 00:02:46,760 --> 00:02:50,760 Og browsere ikke begynde udsende computerkode som dette. 59 00:02:50,760 --> 00:02:54,230 Og hvis vi ser lidt dybere, mærke at det sprog, de ser 60 00:02:54,230 --> 00:02:57,040 på skærmen er en kaldet sprog Objective C, hvilket er det sprog 61 00:02:57,040 --> 00:02:59,520 som iPhone apps er skrevet, især dem, der involverer 62 00:02:59,520 --> 00:03:03,540 farveblyanter, som du kan se fra kildekoden her. 63 00:03:03,540 --> 00:03:06,600 64 00:03:06,600 --> 00:03:07,560 >> OK, jeg troede, det var sjovt. 65 00:03:07,560 --> 00:03:12,240 Så dette stykke kode har absolut intet at gøre med, hvad dette 66 00:03:12,240 --> 00:03:13,940 bestemt episode var ca. 67 00:03:13,940 --> 00:03:17,590 Så joke er slags på folk tager til dette givet. 68 00:03:17,590 --> 00:03:20,220 Men det er ikke så svært at få disse tekniske detaljer til højre. 69 00:03:20,220 --> 00:03:21,980 Og jeg vil opfordre dig. 70 00:03:21,980 --> 00:03:25,530 Og faktisk kunne 50 meget vel ødelægge en masse tv-shows og film, eller du 71 00:03:25,530 --> 00:03:27,320 fordi du vil finde, at det er bare ikke muligt, hvad de er 72 00:03:27,320 --> 00:03:28,630 gør på skærmen. 73 00:03:28,630 --> 00:03:31,750 Men ja, det er den kode, som du kunne se det i en iPhone-applikation 74 00:03:31,750 --> 00:03:33,640 eller Mac OS ansøgning. 75 00:03:33,640 --> 00:03:35,685 Det har intet overhovedet at gøre med sikkerhed. 76 00:03:35,685 --> 00:03:38,610 Så hold øje med mere sådanne sjove ting som. 77 00:03:38,610 --> 00:03:42,720 >> Men i dag begynder vi at dykke i virkeligheden dybt til en lang række sprog. 78 00:03:42,720 --> 00:03:45,410 En faktisk, en af ​​de overordnede grillbarer i denne del af 79 00:03:45,410 --> 00:03:51,815 Kurset er ikke at lære at programmere i PHP, ikke at lære SQL per se, ikke 80 00:03:51,815 --> 00:03:58,100 at lære JavaScript per se, men snarere at lære dig selv hvordan man underviser 81 00:03:58,100 --> 00:04:02,030 selv nye sprog, fordi, ja, vi begynder at tage nu 82 00:04:02,030 --> 00:04:06,020 støttehjul off, så efter Selvfølgelig udgang, behøver du ikke forvente en 20 83 00:04:06,020 --> 00:04:08,890 side specifikation til at fortælle dig, hvordan at gennemføre nogle program. 84 00:04:08,890 --> 00:04:12,970 Du har nok ingredienser i din sind, og nok værktøjer i din værktøjskasse 85 00:04:12,970 --> 00:04:15,750 kit, til med hvilken begynde at opbygge løsninger på problemer af interesse for 86 00:04:15,750 --> 00:04:19,130 du for nogle studerende gruppe, for nogle forskningsprojekt, eller virkelig noget 87 00:04:19,130 --> 00:04:20,140 af interesse for dig. 88 00:04:20,140 --> 00:04:24,150 >> Så mod herpå minde om, at dette var det billede, vi trak den sidste gang. 89 00:04:24,150 --> 00:04:27,620 Og det er to computere, klient og sever, taler til hinanden. 90 00:04:27,620 --> 00:04:31,130 Og protokollen, sproget, så at tale, at disse to computere ske 91 00:04:31,130 --> 00:04:33,220 at tale kaldes HTTP. 92 00:04:33,220 --> 00:04:37,730 Og det er netop, der anvendes af computere til at overføre information over 93 00:04:37,730 --> 00:04:38,710 world wide web. 94 00:04:38,710 --> 00:04:41,770 Banen, selvfølgelig er blot én tjeneste der kører på toppen af 95 00:04:41,770 --> 00:04:43,000 såkaldt internettet. 96 00:04:43,000 --> 00:04:48,660 Hvad er en anden tjeneste til rådighed på toppen af ​​internettet i disse dage? 97 00:04:48,660 --> 00:04:51,600 Nogle andre protokol eller - hvad er det? 98 00:04:51,600 --> 00:04:52,300 >> PUBLIKUM: FTP. 99 00:04:52,300 --> 00:04:52,790 >> SPEAKER 1: FTP. 100 00:04:52,790 --> 00:04:54,630 Så File Transfer Protocol er en anden. 101 00:04:54,630 --> 00:04:56,050 De fleste af jer sikkert ikke har brugt det. 102 00:04:56,050 --> 00:04:58,830 Men de fleste af jer sikkert har brugt ting som Gchat, eller instant 103 00:04:58,830 --> 00:05:00,970 messaging mere generelt, bestemt email. 104 00:05:00,970 --> 00:05:04,470 Og dem, også er tjenester, der kører på toppen af ​​internettet, fordi, på 105 00:05:04,470 --> 00:05:08,180 slutningen af ​​dagen, selve internettet virkelig bare hente data fra punkt A til 106 00:05:08,180 --> 00:05:12,480 punkt B. Og det bruger en række partikler selv, en af ​​dem eller to 107 00:05:12,480 --> 00:05:17,340 af dem mest generelt kaldes TCP / IP, hvilket vil sige, at en computer på 108 00:05:17,340 --> 00:05:19,960 Internettet kan faktisk gøre forskellige ting, e-mail, 109 00:05:19,960 --> 00:05:20,980 og web, og så videre. 110 00:05:20,980 --> 00:05:22,220 Google gør en masse af dette. 111 00:05:22,220 --> 00:05:26,310 Så hvordan er disse tjenester entydigt identificeret, vi siger, på en computer 112 00:05:26,310 --> 00:05:29,080 der kan faktisk gøre flere ting? 113 00:05:29,080 --> 00:05:29,860 >> Det portnummer. 114 00:05:29,860 --> 00:05:34,180 Og disse er blot vilkårlige menneske konventioner som 80 er web, 443 er 115 00:05:34,180 --> 00:05:36,580 krypteret web, 25 er e-mail. 116 00:05:36,580 --> 00:05:38,230 Og der er en klaser af andre. 117 00:05:38,230 --> 00:05:41,860 Og disse tal er simpelthen medtaget i disse pakker af oplysninger, de 118 00:05:41,860 --> 00:05:46,230 virtuel kuvert, der faktisk indeholdt en anmodning eller et svar. 119 00:05:46,230 --> 00:05:51,300 >> Så når du kommer tilbage et svar fra web, typisk, behøver du ikke se nogen 120 00:05:51,300 --> 00:05:54,780 numre overhovedet med hensyn til status i svaret. 121 00:05:54,780 --> 00:05:56,770 Du behøver faktisk ikke se indre funktioner i 122 00:05:56,770 --> 00:05:58,090 pakker, der kommer tilbage. 123 00:05:58,090 --> 00:05:59,860 Men 200 har faktisk betyder OK. 124 00:05:59,860 --> 00:06:01,530 Og det betyder alt er godt. 125 00:06:01,530 --> 00:06:02,870 Du har måske set en flok af disse. 126 00:06:02,870 --> 00:06:05,710 Hvilket er nok den mest almindelige du har set på nettet? 127 00:06:05,710 --> 00:06:05,980 >> 404. 128 00:06:05,980 --> 00:06:07,330 Det betyder blot, fil ikke fundet. 129 00:06:07,330 --> 00:06:08,270 Det betyder nogen skruet op. 130 00:06:08,270 --> 00:06:11,450 Du gjorde det ved at stavefejl URL'en, eller nogen andre gjorde ved at give dig en 131 00:06:11,450 --> 00:06:15,100 ugyldig URL, eller de slettede fil og URL er stadig 132 00:06:15,100 --> 00:06:16,130 bliver brugt af mennesker. 133 00:06:16,130 --> 00:06:19,670 Så enhver række årsager kan forklare hvorfor en fil ikke fundet. 134 00:06:19,670 --> 00:06:22,990 Og du vil se, i de kommende uger, disse andre fejlkoder, og du vil 135 00:06:22,990 --> 00:06:24,195 drage fordel af nogle af dem. 136 00:06:24,195 --> 00:06:25,760 Det værste er 500. 137 00:06:25,760 --> 00:06:29,820 Hvis du får en 500 fejl i koden, du har skrevet, tænk på det som en slags af 138 00:06:29,820 --> 00:06:33,290 analog af seg fejl i verden af ​​web-programmering. 139 00:06:33,290 --> 00:06:34,560 Det er ikke helt så dystre. 140 00:06:34,560 --> 00:06:36,660 Men det betyder bare, at et eller andet sted, du skruet op. 141 00:06:36,660 --> 00:06:38,260 Så ser frem til dem. 142 00:06:38,260 --> 00:06:39,910 >> Men lad os se om vi kan se disse i sammenhæng. 143 00:06:39,910 --> 00:06:43,460 Lad mig gå til en browser her og gør følgende. 144 00:06:43,460 --> 00:06:45,710 Så dette er Chrome, hvilket sker for at være installeret i apparatet. 145 00:06:45,710 --> 00:06:49,410 Men de fleste hver browser i disse dage har nogle tilsvarende funktionalitet. 146 00:06:49,410 --> 00:06:52,610 Jeg har tænkt mig at gå op i Chromes menuen og gå til Funktioner, og jeg har tænkt mig at gå 147 00:06:52,610 --> 00:06:53,990 til Developer Tools. 148 00:06:53,990 --> 00:06:57,040 Og du vil se, at denne lille panel åbner i bunden af ​​vinduet. 149 00:06:57,040 --> 00:07:00,190 En anden genvej, for at være ærlig, at jeg normalt bruger mig selv er at Højreklik 150 00:07:00,190 --> 00:07:04,370 eller Kontrol klikke hvor som helst på nettet side og bare gå til Undersøg Element. 151 00:07:04,370 --> 00:07:07,440 Og det vil ikke kun åbne dette har for dig. 152 00:07:07,440 --> 00:07:10,230 Det vil også åbne, specifikt Elements del på 153 00:07:10,230 --> 00:07:11,430 venstre side. 154 00:07:11,430 --> 00:07:12,460 >> Så vi er naturligvis at se Google. 155 00:07:12,460 --> 00:07:13,930 De ændrede deres logo i dag. 156 00:07:13,930 --> 00:07:20,200 Men på hvis jeg rulle ned heroppe, mærke at under Elements, se dig 157 00:07:20,200 --> 00:07:23,460 hvad der kaldes HTML, HyperText Markup Sprog, og det er det sprog, 158 00:07:23,460 --> 00:07:26,000 at dette og alle websider, virkelig er skrevet i. 159 00:07:26,000 --> 00:07:28,950 Men det er faktisk formateret til os så meget mere readably 160 00:07:28,950 --> 00:07:29,970 end det normalt er. 161 00:07:29,970 --> 00:07:34,810 I virkeligheden, jeg hvis zoome ud, og jeg i stedet blot højreklikke eller kontrollere Klik 162 00:07:34,810 --> 00:07:39,630 klik på siden, og derefter gå til Vis Side Source, det er bogstaveligt talt, hvad 163 00:07:39,630 --> 00:07:42,150 Google har sendt ned til min browser. 164 00:07:42,150 --> 00:07:46,480 >> Så nogle eller de personer, skrev Google.com ved hjælp af denne kildekode. 165 00:07:46,480 --> 00:07:47,790 Det meste af dette er ikke HTML. 166 00:07:47,790 --> 00:07:49,340 Det er faktisk en kaldet sprog JavaScript, der 167 00:07:49,340 --> 00:07:50,880 Vi vil komme til på onsdag. 168 00:07:50,880 --> 00:07:55,580 Men hvad Chrome, og hvad enhver browser kan gøre for os, er en slags se 169 00:07:55,580 --> 00:07:59,610 forbi alle distraktioner af skøre syntaks, og sæt hvide rum 170 00:07:59,610 --> 00:08:02,940 for os, og selv syntaksfremhævningen, eller colorize ting for os. 171 00:08:02,940 --> 00:08:06,470 Så vil du opdage, at disse såkaldte udviklingsværktøjer indbygget i browsere 172 00:08:06,470 --> 00:08:10,830 vil gøre dit liv så, så meget lettere fordi du kan udforske, via denne menu 173 00:08:10,830 --> 00:08:13,940 grænseflade, hvad den underliggende kildekode er for 174 00:08:13,940 --> 00:08:15,750 enhver side på internettet. 175 00:08:15,750 --> 00:08:19,070 Og ja, det er en af ​​de mest effektive måder at lære, hvordan man gør 176 00:08:19,070 --> 00:08:22,860 noget nyt, i hvert fald hvis den side er ikke så kompliceret som at overvælde er 177 00:08:22,860 --> 00:08:26,700 at begynde at rode rundt det er HTML, se på sin såkaldte CSS, som vi vil komme 178 00:08:26,700 --> 00:08:30,310 til lidt så godt, at få en forståelse af, hvordan denne programmør 179 00:08:30,310 --> 00:08:33,480 gennemført nogle bestemte Funktionen af ​​siden. 180 00:08:33,480 --> 00:08:36,530 >> Men mere teknisk interessant ret nu er det kommer til at være dette. 181 00:08:36,530 --> 00:08:39,429 Hvis jeg går til fanen Netværk, lad os nu klart dette. 182 00:08:39,429 --> 00:08:43,429 Jeg har tænkt mig at klikke den lille krydser symbol her og derefter 183 00:08:43,429 --> 00:08:45,630 gå til en anden hjemmeside. 184 00:08:45,630 --> 00:08:48,430 Og jeg lige til at skrive i Facebook.com. 185 00:08:48,430 --> 00:08:51,940 Ingen HTTP, ingen HTTPS, ingen WWW. 186 00:08:51,940 --> 00:08:53,850 Lad os rent faktisk at se, hvad der sker her. 187 00:08:53,850 --> 00:08:55,030 >> Enter. 188 00:08:55,030 --> 00:08:58,480 Læg nu mærke en hel masse ting bare dukkede op i denne nederste panel, i 189 00:08:58,480 --> 00:09:00,285 Udover den webside vises i toppen. 190 00:09:00,285 --> 00:09:04,890 Jeg har tænkt mig at rulle tilbage op i Fanen Netværk her og jeg har tænkt mig at 191 00:09:04,890 --> 00:09:06,080 Klik på første række. 192 00:09:06,080 --> 00:09:10,580 Hvad dette værktøj vil afsløre for os er hver eneste af de HTTP-anmodninger 193 00:09:10,580 --> 00:09:13,550 der hurtigt gik bare tilbage og tilbage mellem min browser 194 00:09:13,550 --> 00:09:14,930 og Facebooks server. 195 00:09:14,930 --> 00:09:17,830 Og så hver eneste af disse rækker repræsenterer en sådan anmodning eller 196 00:09:17,830 --> 00:09:20,970 reaktion, en eller flere af disse virtuelle kuvert. 197 00:09:20,970 --> 00:09:24,080 Eller mere afslappet, det er ligesom en person ligesom en person, kunden en i en 198 00:09:24,080 --> 00:09:26,710 restaurant, beder om noget igen og igen og igen. 199 00:09:26,710 --> 00:09:29,400 Og tjeneren holder bringer det tilbage en ad gangen. 200 00:09:29,400 --> 00:09:33,850 >> Så nu, hvis jeg zoomer ind på dette, bemærk og dette vil være den slags ting, 201 00:09:33,850 --> 00:09:36,600 at du er velkommen til og opmuntret at spille med på egen hånd, fordi vi 202 00:09:36,600 --> 00:09:38,150 vil ikke gå igennem alt i stor detalje. 203 00:09:38,150 --> 00:09:40,070 Men bemærk at der er en få underfanerne her - 204 00:09:40,070 --> 00:09:43,700 Sidehoveder, Eksempel Response, Cookies, og timing. 205 00:09:43,700 --> 00:09:48,280 Jeg skal bare se på overskrifter for nu, fordi disse er lidt 206 00:09:48,280 --> 00:09:53,600 ingredienser indersiden af ​​konvolut, hjælper data komme til og fra steder. 207 00:09:53,600 --> 00:09:57,590 >> Så det første, lad mig klikke på dette, Udsigt Kilde siden Request Headers. 208 00:09:57,590 --> 00:10:01,910 Der er kravet om, at min browser, Chrome, i dette tilfælde sendte indersiden af 209 00:10:01,910 --> 00:10:02,910 at virtuel kuvert. 210 00:10:02,910 --> 00:10:04,800 Du husker jeg i sidste uge manuelt, skrevet den, mens 211 00:10:04,800 --> 00:10:06,380 foregiver at være en browser. 212 00:10:06,380 --> 00:10:09,980 Så mindede den server, det er udkig efter den kaldte vært 213 00:10:09,980 --> 00:10:10,835 Facebook.com. 214 00:10:10,835 --> 00:10:13,630 Og så er der lidt mere mystiske oplysninger, som vi vil vinke 215 00:10:13,630 --> 00:10:14,830 vores hænder for nu. 216 00:10:14,830 --> 00:10:18,640 >> Men hvis jeg begynder at rulle ned nu dette vindue, lad mig komme til 217 00:10:18,640 --> 00:10:19,980 respons overskrifter. 218 00:10:19,980 --> 00:10:23,270 Det var, hvad der er i den virtuelle konvolut, der kom tilbage fra 219 00:10:23,270 --> 00:10:24,095 Facebook.com. 220 00:10:24,095 --> 00:10:27,390 Og hvis jeg klikker Vis kilde bare at se den rå tekst på det, 221 00:10:27,390 --> 00:10:28,400 bemærke et par ting. 222 00:10:28,400 --> 00:10:32,130 One, Facebook også taler samme protokollen, version 1.1 heraf. 223 00:10:32,130 --> 00:10:33,390 Så det er dejligt. 224 00:10:33,390 --> 00:10:36,820 Men status kode 301, flyttet permanent. 225 00:10:36,820 --> 00:10:38,880 >> Nå, fik hvor dælen Facebook hen? 226 00:10:38,880 --> 00:10:40,430 Hvad er det at forsøge at formidle til os? 227 00:10:40,430 --> 00:10:44,310 Nå, mærke hernede er der en anden header kaldet Placering. 228 00:10:44,310 --> 00:10:51,050 Så hvorfor er Facebook fortæller mig, at de flyttede permanent til denne URL 229 00:10:51,050 --> 00:10:53,580 siden Location? 230 00:10:53,580 --> 00:10:54,962 Jeg har glemt www. 231 00:10:54,962 --> 00:10:56,250 >> Så det var mit valg. 232 00:10:56,250 --> 00:11:00,450 I virkeligheden, de fleste af os sjældent, sandsynligvis skriv www.whatever.com disse dage. 233 00:11:00,450 --> 00:11:03,390 Men det viser sig en systemadministrator, ligesom Facebooks, kan 234 00:11:03,390 --> 00:11:06,800 konfigurere deres servere på en sådan måde at enten Facebook.com virker, eller 235 00:11:06,800 --> 00:11:12,450 www.Facebook.com virker, eller virkelig, enhver sådan præfiks foran deres 236 00:11:12,450 --> 00:11:13,210 domænenavn. 237 00:11:13,210 --> 00:11:14,500 Så de har gjort det for os. 238 00:11:14,500 --> 00:11:16,910 Og de omdirigere os, sandsynligvis for nogle tekniske, 239 00:11:16,910 --> 00:11:18,100 nogle markedsføringsmæssige årsager. 240 00:11:18,100 --> 00:11:21,570 De ønsker blot at canonicalize på www.Facebook.com. 241 00:11:21,570 --> 00:11:24,040 >> Men det er ikke helt det. 242 00:11:24,040 --> 00:11:28,560 Hvis jeg rulle ned her, lad os se hvad der sker. 243 00:11:28,560 --> 00:11:30,810 Det fortæller mig, at vi flyttede permanent til 244 00:11:30,810 --> 00:11:33,450 http://www.Facebook.com. 245 00:11:33,450 --> 00:11:36,620 Så lad os se på den anden anmodning at min browser sender. 246 00:11:36,620 --> 00:11:40,070 Desværre ser det ud som Facebook har flyttet igen, fordi den anden 247 00:11:40,070 --> 00:11:44,420 anmodning ved at vælge denne URL i stedet for, siger, at også flyttet 248 00:11:44,420 --> 00:11:45,010 permanent. 249 00:11:45,010 --> 00:11:48,140 Og lad mig rulle ned her til respons overskrifter. 250 00:11:48,140 --> 00:11:51,530 Hvor har Facebook gået nu? 251 00:11:51,530 --> 00:11:52,680 >> Så HTTPS. 252 00:11:52,680 --> 00:11:56,130 Så nu Facebook er startet, især i lyset af den nuværende 253 00:11:56,130 --> 00:11:59,750 begivenheder i de seneste måneder, og især også i de seneste par år 254 00:11:59,750 --> 00:12:03,670 at tvinge alle deres brugere, i en god måde at bruge HTTPS, hvilket er mere 255 00:12:03,670 --> 00:12:06,210 sikre, men ikke helt sikker. 256 00:12:06,210 --> 00:12:10,000 Og så nu er min side, min browser er kommer til at anmode om denne tredje webadresse. 257 00:12:10,000 --> 00:12:14,710 Og nu, endelig, vi får ellers uset 200 OK. 258 00:12:14,710 --> 00:12:18,830 >> Så hvad i alverden eller alle disse andre rækker hernede. 259 00:12:18,830 --> 00:12:22,630 Jeg har bogstaveligt talt skrevet én ting, og mit browser synes at have anmodet om som 260 00:12:22,630 --> 00:12:23,840 20 nogle underlige ting. 261 00:12:23,840 --> 00:12:24,640 Hvad er det? 262 00:12:24,640 --> 00:12:25,810 >> PUBLIKUM: Scripts? 263 00:12:25,810 --> 00:12:28,460 >> SPEAKER 1: Scripts, så andre filer skrevet i en kaldet sprog 264 00:12:28,460 --> 00:12:30,780 JavaScript, der, igen, vi vil se lidt af på onsdag. 265 00:12:30,780 --> 00:12:32,760 Hvad ellers? 266 00:12:32,760 --> 00:12:33,390 Style sheets. 267 00:12:33,390 --> 00:12:36,350 Så noget i en kaldet sprog CSS, som vi vil se i en bit. 268 00:12:36,350 --> 00:12:40,690 GIF og jpegs og PNG og billeder, og filmfiler - uanset hvad en webside 269 00:12:40,690 --> 00:12:43,280 har er mest sandsynligt i i form af en fil. 270 00:12:43,280 --> 00:12:46,750 Og så hvad vi ser på den venstre side er der alle de filer 271 00:12:46,750 --> 00:12:50,280 at Chrome skulle hente, rekursivt, hvis du vil, for at 272 00:12:50,280 --> 00:12:52,430 komponere hele den side. 273 00:12:52,430 --> 00:12:56,210 >> Så hvad vi så for et øjeblik siden med Google, hvis jeg klikker på Elements 274 00:12:56,210 --> 00:13:00,470 fanen dette sikker er HTML, den sprog, der komponerer denne side. 275 00:13:00,470 --> 00:13:01,890 Men der er klaser af andre ting. 276 00:13:01,890 --> 00:13:02,640 Der er et logo. 277 00:13:02,640 --> 00:13:04,680 Der er dem, blå-ish ikoner derovre. 278 00:13:04,680 --> 00:13:07,610 Og der er andre elementer stadig på den side, selv kan være 279 00:13:07,610 --> 00:13:08,610 separate filer. 280 00:13:08,610 --> 00:13:11,860 >> Så hvad er rart om en browser er, at det ser på det sprog, vi skal hen 281 00:13:11,860 --> 00:13:14,690 at begynde at skrive, eller du allerede har begyndt at skrive i P sæt 7 tal 282 00:13:14,690 --> 00:13:17,970 ud af, hvor disse filer bor, og går hen og griber dem så godt. 283 00:13:17,970 --> 00:13:21,010 Og jeg kan ikke understrege nok, selv selvom nogle af dette ser måske lidt 284 00:13:21,010 --> 00:13:24,820 mystiske eller overvældende ved første øjekast, lære at programmere 285 00:13:24,820 --> 00:13:28,500 applikationer til internettet, er det uvurderlig til at forstå, hvordan disse 286 00:13:28,500 --> 00:13:29,410 små værktøjer fungerer. 287 00:13:29,410 --> 00:13:33,830 Disse er lidt ligesom GDB som værktøj, men meget enklere i sidste ende at bruge - 288 00:13:33,830 --> 00:13:37,690 og virkelig giver dig øjne i, hvad Vi har taget for givet for 289 00:13:37,690 --> 00:13:39,170 temmelig lang tid nu. 290 00:13:39,170 --> 00:13:42,270 >> Så hvad kan vi nu gøre med disse oplysninger? 291 00:13:42,270 --> 00:13:44,875 Nå, lad os faktisk tage et kig på begreberne underliggende HTML. 292 00:13:44,875 --> 00:13:49,025 Og vi vil udskyde, da vi allerede har, til at sektioner i denne uge, på problemet 293 00:13:49,025 --> 00:13:53,260 indstille 7 specifikation, til nogle af de mere oplysninger om disse sprog. 294 00:13:53,260 --> 00:13:57,020 Men lad os se om vi ikke kan male et billede af, hvad du skal forstå 295 00:13:57,020 --> 00:13:57,940 samlet her. 296 00:13:57,940 --> 00:14:02,280 >> Så HTML, HyperText Markup Language, er ikke et programmeringssprog. 297 00:14:02,280 --> 00:14:03,520 Hvad betyder det egentlig? 298 00:14:03,520 --> 00:14:05,690 Så HTML ligner dette. 299 00:14:05,690 --> 00:14:06,810 Og nogle af jer allerede kender dette. 300 00:14:06,810 --> 00:14:08,130 Nogle af jer har gjort dette i nogen tid. 301 00:14:08,130 --> 00:14:10,270 Men lad os se om vi ikke kan fylde nogle tomme felter samt. 302 00:14:10,270 --> 00:14:11,760 Så opdager et par ting her. 303 00:14:11,760 --> 00:14:13,030 One, det er bare tekst. 304 00:14:13,030 --> 00:14:15,960 Så det er ligesom kildekoden i C, eller et andet sprog. 305 00:14:15,960 --> 00:14:17,750 >> Bemærk, at der forekommer at være et mønster her. 306 00:14:17,750 --> 00:14:20,870 Der er indrykning, men teknisk indrykningen er bare menneske 307 00:14:20,870 --> 00:14:21,205 konvention. 308 00:14:21,205 --> 00:14:24,980 A browsere er ligeglad, hvis der er nyt linjer og faner ligesom vi se der. 309 00:14:24,980 --> 00:14:27,410 Men bemærk, at der er symmetrier her. 310 00:14:27,410 --> 00:14:31,180 Der er, hvad jeg vil kalde, på toppen af denne fil, den åbne tag, eller starten 311 00:14:31,180 --> 00:14:33,030 tag, kaldes HTML. 312 00:14:33,030 --> 00:14:36,800 Og så, nede, perfekt foret up, meget som vi gør med krøllede parenteser, 313 00:14:36,800 --> 00:14:40,910 Vi ser åbneparentes, frem slash, HTML, close beslag. 314 00:14:40,910 --> 00:14:44,610 Så det er den tilsvarende close tag, eller slutningen tag, for at ting. 315 00:14:44,610 --> 00:14:47,990 >> Sammen, alt inde i såkaldte open-tag og luk tag 316 00:14:47,990 --> 00:14:50,440 komponere, hvad vi vil kalde et element. 317 00:14:50,440 --> 00:14:53,910 Og vi vil se, på bare et øjeblik, er det virkelig gerne en node i et træerne. 318 00:14:53,910 --> 00:14:57,470 Fordi hvis du tænker over nu indrykning, der er underforstået her, du 319 00:14:57,470 --> 00:15:00,780 slags har, ligesom, en bedsteforælder node kaldes HTML. 320 00:15:00,780 --> 00:15:06,870 Hvor mange børn kan man sige, der er baseret på dette billede, har den HTML-element? 321 00:15:06,870 --> 00:15:07,720 >> Så sandsynligvis to. 322 00:15:07,720 --> 00:15:10,240 Den ene er hoved element, tilsyneladende. 323 00:15:10,240 --> 00:15:11,710 Og en er kropelementet. 324 00:15:11,710 --> 00:15:12,555 Og hvorfor to børn? 325 00:15:12,555 --> 00:15:15,840 Tja, jeg er bare lidt udlede, at hvis Jeg har en åben hoved tag og derefter en 326 00:15:15,840 --> 00:15:17,820 tæt head tag, der er et element. 327 00:15:17,820 --> 00:15:21,200 Og så, hvis der er en anden åben krop tag og en tæt krop tag, det er ligesom 328 00:15:21,200 --> 00:15:22,340 et andet element. 329 00:15:22,340 --> 00:15:26,000 Så i den forstand, at hvis jeg slags rotate billedet på sin side, er det 330 00:15:26,000 --> 00:15:29,910 som at have en HTML-tag, og derefter en head tag, og derefter en body-tagget, og 331 00:15:29,910 --> 00:15:34,290 så noget tekst, hej verden, dinglende off af kroppen tagget selv. 332 00:15:34,290 --> 00:15:36,620 >> Så vi kan tegne et billede, der kunne se sådan ud. 333 00:15:36,620 --> 00:15:38,020 Formerne er vilkårlige. 334 00:15:38,020 --> 00:15:40,870 Men bemærk, at jeg har brugt slags en ellipse øverst for at repræsentere 335 00:15:40,870 --> 00:15:41,860 selve dokumentet. 336 00:15:41,860 --> 00:15:45,980 Det viser sig at der kan være andre ting indersiden af ​​en webside, som jeg ikke har 337 00:15:45,980 --> 00:15:46,940 trukket her. 338 00:15:46,940 --> 00:15:50,800 Så vi kommer til at endda hænge HTML knude off af en såkaldt dokumentknudepunkt. 339 00:15:50,800 --> 00:15:53,730 Og så har vi hoved og krop og titel, varsel, 340 00:15:53,730 --> 00:15:55,360 som er indlejret yderligere. 341 00:15:55,360 --> 00:15:58,650 Jeg gider ikke at sætte ekstra linje pauser inde i titlen tag. 342 00:15:58,650 --> 00:16:02,710 Det bare følte det var at få lidt for vidtløftig. 343 00:16:02,710 --> 00:16:07,000 Så jeg forlod det i en linje der, med åben titel, hej verden, close titel. 344 00:16:07,000 --> 00:16:09,380 Og så har vi noget tekst dinglende off herfra. 345 00:16:09,380 --> 00:16:12,200 >> Så dette billede vil komme tilbage til os, når vi dykke ned i JavaScript. 346 00:16:12,200 --> 00:16:15,110 Og forstå, at når du skrive HTML som dette, hvad 347 00:16:15,110 --> 00:16:16,250 er en browser gør? 348 00:16:16,250 --> 00:16:19,290 Nå, behøver vi ikke at bekymre dig om hvordan det er at gøre dette, eller hvad 349 00:16:19,290 --> 00:16:23,090 algoritme, men ved slutningen af ​​dagen, når en browser modtager HTML ligesom 350 00:16:23,090 --> 00:16:27,510 at fra Facebook eller Google, analyserer det det, så at sige, det lyder det, 351 00:16:27,510 --> 00:16:31,160 med noget som fread, top til bund, venstre mod højre, og som det 352 00:16:31,160 --> 00:16:36,300 indser, åh, åbent tag, og derefter lukke tag, det begynder at malloc, så at sige, 353 00:16:36,300 --> 00:16:37,800 en knude i et træ. 354 00:16:37,800 --> 00:16:41,130 Og når det støder på, som vi har antydet her med indrykningen, en 355 00:16:41,130 --> 00:16:45,400 barneknudepunkt, malloc'erers en knude for at og fastgøres der til træet. 356 00:16:45,400 --> 00:16:49,150 >> Så træstrukturer, binære træer, ternære træer og større træer, der 357 00:16:49,150 --> 00:16:53,380 Vi kiggede på en uge eller to siden, varsel at det samme princip er 358 00:16:53,380 --> 00:16:54,220 kommer tilbage til os. 359 00:16:54,220 --> 00:16:57,590 Og hvem gennemført, Chrome uanset hold gjorde det formentlig havde 360 00:16:57,590 --> 00:17:00,800 at gennemføre en form for træstruktur under hætten. 361 00:17:00,800 --> 00:17:05,329 Og det i sig selv er nok i en sprog som C eller C + +, eller en lavere 362 00:17:05,329 --> 00:17:08,540 niveau sprog, som vi vil nu bruge toppen af ​​nettet. 363 00:17:08,540 --> 00:17:11,200 >> Så nu, måske, vil dette give mere mening. 364 00:17:11,200 --> 00:17:15,420 Faktiske tatovering fra en fyr, der måske fortryde det i sidste ende, slags. 365 00:17:15,420 --> 00:17:17,359 OK, okay, så en masse af web humor. 366 00:17:17,359 --> 00:17:18,599 Det er ikke virkelig vil over så godt i dag. 367 00:17:18,599 --> 00:17:19,560 Så vi vil gå videre. 368 00:17:19,560 --> 00:17:20,180 Ok. 369 00:17:20,180 --> 00:17:22,760 >> Så lad os tage et kig nu på et par eksempler. 370 00:17:22,760 --> 00:17:24,660 Den enkleste mulige ting kunne være dette. 371 00:17:24,660 --> 00:17:29,170 Jeg har tænkt mig at gå videre og åbne op i gedit en fil kaldet hello.php. 372 00:17:29,170 --> 00:17:31,730 373 00:17:31,730 --> 00:17:36,330 Og inde i her, vil jeg hurtigt bare gøre det, printf, citerer 374 00:17:36,330 --> 00:17:38,590 citat slut, "Hej verden". 375 00:17:38,590 --> 00:17:42,460 >> Så varsel, og jeg vil gøre mit backslash n, Jeg har ikke gidet at erklære main. 376 00:17:42,460 --> 00:17:45,310 Det viser sig, i php, og en masse sprog, behøver du ikke en primær 377 00:17:45,310 --> 00:17:46,090 funktion i sig selv. 378 00:17:46,090 --> 00:17:47,720 Du kan bare begynde at skrive dit program. 379 00:17:47,720 --> 00:17:51,210 Nu, når jeg gemme denne fil, bemærk jeg nødt til at gøre følgende. 380 00:17:51,210 --> 00:17:55,360 Jeg har ikke tænkt at bruge make, og jeg er ikke kommer til at bruge klang, fordi PHP, i modsætning til 381 00:17:55,360 --> 00:17:57,400 C, ikke er en kompileret sprog. 382 00:17:57,400 --> 00:18:01,400 Det er, hvad der kaldes en fortolket sprog, hvilket betyder, at du kører det 383 00:18:01,400 --> 00:18:04,650 som et input gennem et andet program kaldes en tolk. 384 00:18:04,650 --> 00:18:08,150 Og at programmet læser det, top til bund, venstre mod højre, og gør 385 00:18:08,150 --> 00:18:09,290 uanset hvad du fortæller det at gøre. 386 00:18:09,290 --> 00:18:12,920 >> Så i dette tilfælde her har jeg én linje, der siger printf. 387 00:18:12,920 --> 00:18:17,990 Så når jeg kører denne kildekode, hello.php, selvom et program, 388 00:18:17,990 --> 00:18:22,830 sker, bekvemt, at blive kaldt PHP, dette program PHP vil læse 389 00:18:22,830 --> 00:18:26,120 denne fil, top til bund, venstre mod højre, og det kommer til at gøre, hvad jeg 390 00:18:26,120 --> 00:18:30,110 fortælle den at gøre - udføre koden, og hvis den ikke genkender noget, bare 391 00:18:30,110 --> 00:18:31,320 spytte det ud. 392 00:18:31,320 --> 00:18:34,940 Så jeg har tænkt mig at gå videre og kører PHP i hello.php. 393 00:18:34,940 --> 00:18:37,110 Enter. 394 00:18:37,110 --> 00:18:39,690 >> Og det er ikke helt, hvad jeg havde tænkt mig. 395 00:18:39,690 --> 00:18:40,530 Tja, hvorfor er det? 396 00:18:40,530 --> 00:18:43,910 Nå, PHP er et sprog, der er faktisk designet til at være temmelig 397 00:18:43,910 --> 00:18:46,150 sammenflettet med internettet. 398 00:18:46,150 --> 00:18:50,460 Når du foretager websider med dette sprog PHP, da vi snart skal se, vi vil 399 00:18:50,460 --> 00:18:54,560 ønsker at gøre noget som print out linjer som dette. 400 00:18:54,560 --> 00:18:55,940 >> Så jeg har tænkt mig at gøre dette. 401 00:18:55,940 --> 00:19:00,810 Åbneparentes, spørgsmålstegn, PHP, og nu jeg bare led bare for at holde 402 00:19:00,810 --> 00:19:01,960 tingene pæne. 403 00:19:01,960 --> 00:19:04,910 Og nu vil jeg tænkt mig at gøre et spørgsmål markere tæt beslag. 404 00:19:04,910 --> 00:19:06,270 Så der er lidt af asymmetri her. 405 00:19:06,270 --> 00:19:07,490 Du behøver ikke gøre dette. 406 00:19:07,490 --> 00:19:10,530 Og du behøver ikke gøre en skråstreg, så PHP er lidt anderledes. 407 00:19:10,530 --> 00:19:14,610 >> Men nu, hvis jeg køre dette program, PHP hello.php jeg nu 408 00:19:14,610 --> 00:19:16,090 faktisk får Hello World. 409 00:19:16,090 --> 00:19:17,750 Og vi vil se, hvorfor det er værdifuldt. 410 00:19:17,750 --> 00:19:20,960 One, det giver mig mulighed for at angive, super udtrykkeligt dette er 411 00:19:20,960 --> 00:19:22,480 kode, udføre dette. 412 00:19:22,480 --> 00:19:25,480 Og det er faktisk, hvad disse specielle tags indebærer her. 413 00:19:25,480 --> 00:19:30,330 >> Men det betyder også, at hvis jeg bare gøre noget som jeg sigter herovre, at 414 00:19:30,330 --> 00:19:34,000 betyder, at, bogstaveligt talt, der vil bare udskrives uden at 415 00:19:34,000 --> 00:19:36,850 faktisk kalde printf eller print, eller lignende funktion. 416 00:19:36,850 --> 00:19:39,445 Så vi vil vende tilbage til dette på bare et øjeblik. 417 00:19:39,445 --> 00:19:40,470 >> Først, lad os gøre det. 418 00:19:40,470 --> 00:19:43,950 Inde i apparatet, har vi en mappe kaldet vhosts, til virtuel 419 00:19:43,950 --> 00:19:47,000 værter, skråstreg lokal vært, skråstreg offentligheden. 420 00:19:47,000 --> 00:19:50,240 Så det er lidt verbose, men lang historie Kort sagt, er apparatet designet til ikke 421 00:19:50,240 --> 00:19:53,770 kun at understøtte C. Det er også designet til at understøtte PHP. 422 00:19:53,770 --> 00:19:57,440 Men det er også designet til at være en web- server og en database server. 423 00:19:57,440 --> 00:20:00,230 Og det er designet, og virkelig konfigureret, at være minder om enhver 424 00:20:00,230 --> 00:20:04,230 kommercielle web-hosting firma, der du måske betale $ 5 for en måned efter, 425 00:20:04,230 --> 00:20:05,040 $ 100 om måneden for. 426 00:20:05,040 --> 00:20:08,200 Uanset tjenesten er, er det konfigureret at være meget lig en 427 00:20:08,200 --> 00:20:10,170 virkelige verden produktion server. 428 00:20:10,170 --> 00:20:13,485 >> Og hvad det betyder, er, at køre på apparatet er web-server software. 429 00:20:13,485 --> 00:20:15,060 Det sker for at blive kaldt Apache. 430 00:20:15,060 --> 00:20:17,790 Det er bare gratis, og open source, og meget populære. 431 00:20:17,790 --> 00:20:23,260 Og vi har konfigureret Apache at vide at hvis jeg besøger et bestemt URL med 432 00:20:23,260 --> 00:20:28,060 Krom eller enhver browser inde i apparat, for at se ind i denne mappe 433 00:20:28,060 --> 00:20:31,030 for de filer, at den brugeren anmoder om. 434 00:20:31,030 --> 00:20:32,790 >> Med andre ord, lad mig gå videre og gøre det. 435 00:20:32,790 --> 00:20:36,890 Inde i min offentlige mappe, vil jeg at gå videre og oprette en fil 436 00:20:36,890 --> 00:20:39,580 kaldet index.html. 437 00:20:39,580 --> 00:20:41,000 Det giver mig den fane her. 438 00:20:41,000 --> 00:20:44,210 Og jeg har tænkt mig at gå meget hurtigt og gå videre og bang 439 00:20:44,210 --> 00:20:45,010 dette program her. 440 00:20:45,010 --> 00:20:48,410 DOCTYPE HTML, som for nu, bare antage, at du er nødt til at skrive. 441 00:20:48,410 --> 00:20:53,490 Det er bare en mystisk tag, det er ikke virkelig en HTML-tag, der angiver, at 442 00:20:53,490 --> 00:20:55,050 her kommer nogle HTML. 443 00:20:55,050 --> 00:20:57,400 >> Jeg har tænkt mig at gå videre og genskabe hvad vi så for et øjeblik siden. 444 00:20:57,400 --> 00:20:58,650 Her er lederen af ​​siden. 445 00:20:58,650 --> 00:21:01,170 Inde i hovedet var den - 446 00:21:01,170 --> 00:21:01,890 så titel. 447 00:21:01,890 --> 00:21:04,340 Så vi vil sige hej, verden. 448 00:21:04,340 --> 00:21:06,570 Og derefter ned her var body-tagget. 449 00:21:06,570 --> 00:21:08,580 Lad mig slutte kroppen tagget. 450 00:21:08,580 --> 00:21:12,280 Og så her vil jeg også sige, bare for klarhed. hej verden 451 00:21:12,280 --> 00:21:14,770 >> Så dette er velsagtens den enkleste mulige webside, du 452 00:21:14,770 --> 00:21:15,770 kan gøre, der er gyldige. 453 00:21:15,770 --> 00:21:17,030 Det er syntaktisk gyldige. 454 00:21:17,030 --> 00:21:18,620 Alt, hvad der er åbnet er lukket. 455 00:21:18,620 --> 00:21:20,910 Alt er fint i stylet og indrykket. 456 00:21:20,910 --> 00:21:23,600 Så lad os nu se, hvordan jeg kan få adgang til denne fil. 457 00:21:23,600 --> 00:21:25,540 >> Nå, lad mig gå til Chrome her. 458 00:21:25,540 --> 00:21:35,050 Og lad mig gå til http://localhost/index.html. 459 00:21:35,050 --> 00:21:36,200 Så hvad er den lokale vært? 460 00:21:36,200 --> 00:21:39,400 Nå, de fleste helst computer i verden, Linux, Mac OS, Windows, har et kaldenavn 461 00:21:39,400 --> 00:21:40,680 kaldet lokale vært. 462 00:21:40,680 --> 00:21:42,900 Så hvis du nogensinde ønsker at tale til din egen computer - 463 00:21:42,900 --> 00:21:45,140 omend mærkeligt refleksivt - 464 00:21:45,140 --> 00:21:47,080 du kalder dig selv lokale vært. 465 00:21:47,080 --> 00:21:50,390 Ligegyldigt hvad din faktiske computer er kaldes, uanset om det er Davids MacBook 466 00:21:50,390 --> 00:21:52,490 Air, eller noget mere verbose sådan. 467 00:21:52,490 --> 00:21:57,760 >> Så denne URL tilsyneladende kommer til at bruge HTTP til at tale med den lokale vært, 468 00:21:57,760 --> 00:22:00,800 den samme computer, apparatet, og det kommer til at bede om, bare tage en 469 00:22:00,800 --> 00:22:02,570 gætte, hvad fil? 470 00:22:02,570 --> 00:22:04,460 Index.html. 471 00:22:04,460 --> 00:22:08,650 Så apparatet er konfigureret i videre at vide, at hvis jeg beder 472 00:22:08,650 --> 00:22:13,460 for noget som index.html, kigge efter i en mappe kaldet vhosts i en 473 00:22:13,460 --> 00:22:17,950 mappe, der hedder localhost, i en mappe deri kaldet offentligheden. 474 00:22:17,950 --> 00:22:20,400 Det er, hvor alle mine offentlige filer vil være. 475 00:22:20,400 --> 00:22:22,610 Så jeg vil nu trykke Enter. 476 00:22:22,610 --> 00:22:27,100 >> Og damn, der er det forbudt besked, ellers kendt som 403, den 477 00:22:27,100 --> 00:22:28,490 numeriske kode for det. 478 00:22:28,490 --> 00:22:30,130 Så hvad er der galt her? 479 00:22:30,130 --> 00:22:33,210 Tja, det er ikke nok bare at sætte filen indersiden af ​​min mappe. 480 00:22:33,210 --> 00:22:35,790 Jeg har brug for rent faktisk at gøre følgende. 481 00:22:35,790 --> 00:22:40,210 >> Lad mig gå ind i min vhosts biblioteket, i localhost, i offentligheden, så lad og 482 00:22:40,210 --> 00:22:41,680 mig gøre ls dash liter. 483 00:22:41,680 --> 00:22:44,510 Og der er et par andre ting i her til dagens formål. 484 00:22:44,510 --> 00:22:50,540 Men bemærk i venstre side, ved siden af til index.html, vi kun se én RW. 485 00:22:50,540 --> 00:22:53,560 Og i fortiden, hvad har RW stod for? 486 00:22:53,560 --> 00:22:54,240 >> Bare læse eller skrive. 487 00:22:54,240 --> 00:22:58,000 Det faktum, at det siger RW til venstre betyder, at jeg, ejeren af ​​denne fil, kan 488 00:22:58,000 --> 00:22:59,020 læse eller skrive det. 489 00:22:59,020 --> 00:23:05,010 Men jeg har brug for at lade alle mennesker i verden læser dette, men ikke skrive det. 490 00:23:05,010 --> 00:23:09,650 Så jeg har tænkt mig at ændre tilstanden af fil chmod, alt plus r at give 491 00:23:09,650 --> 00:23:13,910 alle læsetilladelse på fil kaldet index.html. 492 00:23:13,910 --> 00:23:18,040 >> Og hvis jeg nu Gentag ls dash l varsel at her over, mere nogle 493 00:23:18,040 --> 00:23:19,160 R s er dukket op. 494 00:23:19,160 --> 00:23:21,090 Og for nu, går spec mere i detaljer. 495 00:23:21,090 --> 00:23:24,450 For P sæt 7, at netop betyder, at alle kan nu læse denne fil. 496 00:23:24,450 --> 00:23:27,790 Hvis jeg går tilbage til min browser nu og genindlæse, voila. 497 00:23:27,790 --> 00:23:28,750 Hej Verden. 498 00:23:28,750 --> 00:23:32,260 >> Og jeg kan endda åbne mine Chrome værktøjer og se, ligesom med Google og 499 00:23:32,260 --> 00:23:34,590 Facebook, at der er min HTML, formateret lidt 500 00:23:34,590 --> 00:23:35,930 forskelligt og farvelagt. 501 00:23:35,930 --> 00:23:40,450 Hvis jeg går til netværket fanen og genindlæse siden, bemærke, at der er få 502 00:23:40,450 --> 00:23:42,900 anmode om, at Chrome er at sende på apparatet. 503 00:23:42,900 --> 00:23:46,020 Der er den 200 for at bestemt fil. 504 00:23:46,020 --> 00:23:49,340 Så kort sagt, er det hvordan alle disse række stykker kommer sammen. 505 00:23:49,340 --> 00:23:53,530 Det bare så sker det, at webserveren vi bruger lige nu er ikke fjern, 506 00:23:53,530 --> 00:23:54,210 som Facebook. 507 00:23:54,210 --> 00:23:58,330 Det er bogstaveligt talt på den samme computer, hvilket er helt OK. 508 00:23:58,330 --> 00:24:00,590 >> Så hvad mere kan vi gøre i en webside? 509 00:24:00,590 --> 00:24:03,110 Nå, bare lad os brise gennem et par af disse ting. 510 00:24:03,110 --> 00:24:07,860 Men lad mig gå videre og genåbne Gedit med index.html. 511 00:24:07,860 --> 00:24:13,980 Og lad mig gå videre og sige hej CS50, gemme denne fil, gå tilbage til 512 00:24:13,980 --> 00:24:16,260 browser, virkelig underwhelming forandring. 513 00:24:16,260 --> 00:24:19,130 >> Men hvad nu, hvis vi ønsker rent faktisk at linke til noget nu? 514 00:24:19,130 --> 00:24:23,480 Så det viser sig, at vi kan have den links i HTML, der er bare tags 515 00:24:23,480 --> 00:24:24,140 selv. 516 00:24:24,140 --> 00:24:27,320 Det sker for at blive kaldt ankerkode. a href lig 517 00:24:27,320 --> 00:24:33,190 https://www.cs50.net, www.cs50.net tæt citat tæt beslag. 518 00:24:33,190 --> 00:24:35,230 Og lad os nu se, hvad andet kommer næste. 519 00:24:35,230 --> 00:24:36,500 >> Jeg har åbnet tag. 520 00:24:36,500 --> 00:24:38,990 Jeg har nu brug for at give det en sætning som CS50. 521 00:24:38,990 --> 00:24:40,600 Lad mig slutte tag. 522 00:24:40,600 --> 00:24:42,010 Og bemærke et par ting. 523 00:24:42,010 --> 00:24:45,270 Selvom der er denne kryptiske ting her, jeg har ikke gentaget det, når du 524 00:24:45,270 --> 00:24:46,010 lukke tag. 525 00:24:46,010 --> 00:24:48,230 Du skal bare lukke tag med sit navn alene. 526 00:24:48,230 --> 00:24:50,940 Og dette er hvad der er kendt som en attribut med en værdi. 527 00:24:50,940 --> 00:24:56,070 Attributter bare ændre adfærd for nogle tag inde i en side. 528 00:24:56,070 --> 00:24:59,150 >> Så dette er det præciseres, at hyper reference, den fancy måde at sige det 529 00:24:59,150 --> 00:25:03,660 URL for denne anker, for dette link, bør være CS50.net. 530 00:25:03,660 --> 00:25:07,440 Og den tekst, vi ønsker at vise Brugeren er ikke så rå webadresse, men snarere 531 00:25:07,440 --> 00:25:08,730 ordet CS50. 532 00:25:08,730 --> 00:25:13,710 >> Så hvis jeg nu genindlæse, lad mig zoome ind for klarhed, lad mig genindlæse siden, 533 00:25:13,710 --> 00:25:16,460 bemærke, at vi har denne gamle skole blå understregede link. 534 00:25:16,460 --> 00:25:20,000 Og hvis jeg svæver over det, og det kommer at være svært at se, i nederste venstre hjørne 535 00:25:20,000 --> 00:25:23,690 hjørne af skærmen, mærke at den siger den webadresse, som 536 00:25:23,690 --> 00:25:24,430 Jeg har tænkt mig at gå. 537 00:25:24,430 --> 00:25:27,940 Og hvis jeg klikker der, voila, nu er jeg gøre websider. 538 00:25:27,940 --> 00:25:30,140 Og vi har ført os til startsiden. 539 00:25:30,140 --> 00:25:32,670 >> Men bemærk hvilket potentiale dette giver os. 540 00:25:32,670 --> 00:25:34,890 Sikkerhed er meget på mode i disse dage. 541 00:25:34,890 --> 00:25:41,210 Hvad hvis jeg i stedet sige noget lignende , og jeg i stedet gå til, siger, lad os 542 00:25:41,210 --> 00:25:42,460 se, fakeCS50.net. 543 00:25:42,460 --> 00:25:44,660 544 00:25:44,660 --> 00:25:46,360 Genindlæs denne side. 545 00:25:46,360 --> 00:25:50,180 >> OK, så mærke til det ligner stadig jeg er gå til CS50, medmindre en klog øje 546 00:25:50,180 --> 00:25:51,560 vil bemærke jeg har tænkt mig at fake CS50. 547 00:25:51,560 --> 00:25:54,550 Jeg kan gætte dette domæne er ikke taget. 548 00:25:54,550 --> 00:25:55,960 OK, så det er ikke tilgængelig. 549 00:25:55,960 --> 00:25:56,600 Så det er godt. 550 00:25:56,600 --> 00:25:57,900 Ingen har faktisk dette domæne. 551 00:25:57,900 --> 00:26:00,380 >> Men lad os være lidt mere ondskabsfuld fordi det er slags dum. 552 00:26:00,380 --> 00:26:02,240 Hvad hvis vi ændre dette til Paypal. 553 00:26:02,240 --> 00:26:09,960 Og hvad hvis vi kalder det, ligesom, www.paypal.badguy.com, 554 00:26:09,960 --> 00:26:12,070 uanset domænet er. 555 00:26:12,070 --> 00:26:13,700 Der sandsynligvis eksisterer. 556 00:26:13,700 --> 00:26:16,260 Så lad mig genindlæse siden. 557 00:26:16,260 --> 00:26:22,890 Og her har vi en slags phishing angreb, P-H-I-S-H-I-N-G, som er den 558 00:26:22,890 --> 00:26:26,760 fjollet ord gives for et angreb, forsøger at fiske oplysninger eller bedre 559 00:26:26,760 --> 00:26:30,450 endnu, penge, ud af folk ved at narre dem til at give oplysninger, 560 00:26:30,450 --> 00:26:31,990 de måske ikke ellers ville gøre. 561 00:26:31,990 --> 00:26:33,500 Det ser helt legit, right? 562 00:26:33,500 --> 00:26:34,930 Jeg skal have et link her Paypal.com. 563 00:26:34,930 --> 00:26:37,700 564 00:26:37,700 --> 00:26:40,430 Retfærdigvis I, hvis kønssorteret det op med nogle grafik, kan vi gøre det ser 565 00:26:40,430 --> 00:26:41,310 mere ligesom PayPal. 566 00:26:41,310 --> 00:26:41,510 Right? 567 00:26:41,510 --> 00:26:43,815 Fordi jeg kunne, som en sidebemærkning Jeg kunne gå til Paypal.com. 568 00:26:43,815 --> 00:26:47,110 Og vi har netop set, hvordan jeg kan se alle deres HTML. 569 00:26:47,110 --> 00:26:50,560 Jeg kunne bare kopiere det og genskabe den æstetik Paypal snarere end gå 570 00:26:50,560 --> 00:26:51,490 gamle skole her. 571 00:26:51,490 --> 00:26:55,010 Men bemærk, selvfølgelig, og det er lidt lille stadig kun i bunden 572 00:26:55,010 --> 00:26:59,190 venstre hjørne, ind som en 10 point skrifttype, du se, hvilken URL du 573 00:26:59,190 --> 00:27:01,310 faktisk kommer til at blive ført til. 574 00:27:01,310 --> 00:27:06,580 >> Og så hvis du nogensinde har fået spam siger gå videre, og du er konto 575 00:27:06,580 --> 00:27:07,420 er blevet kompromitteret. 576 00:27:07,420 --> 00:27:10,615 Klik på dette link og lad os vide din adgangskode, så vi kan sikre, at du er 577 00:27:10,615 --> 00:27:13,010 dig, ikke nogensinde gøre det. 578 00:27:13,010 --> 00:27:14,180 Disse ting burde være en selvfølge. 579 00:27:14,180 --> 00:27:17,670 Men det er vidunderligt morsomt, og tragisk, hvordan hvert år synes dette at 580 00:27:17,670 --> 00:27:19,660 ske til nogle ikke-nul antallet af mennesker. 581 00:27:19,660 --> 00:27:21,400 >> Og det er den skønhed af phishing-angreb. 582 00:27:21,400 --> 00:27:23,160 Du kan sende en million e-mails. 583 00:27:23,160 --> 00:27:27,720 Og selv om 0,01% af folk faktisk klik på Paypal og give dig dit 584 00:27:27,720 --> 00:27:31,040 adgangskode, der er stadig en ikke-nul tal af mennesker, der har bare at give 585 00:27:31,040 --> 00:27:32,200 dig deres penge. 586 00:27:32,200 --> 00:27:36,170 Og sende e-mails, er naturligvis helt let og væsentlige, fri 587 00:27:36,170 --> 00:27:36,970 disse dage. 588 00:27:36,970 --> 00:27:40,410 >> Så lang historie kort, vidunderligt smuk tanke, ikke sandt? 589 00:27:40,410 --> 00:27:44,620 År siden, var den tidligste bane, der muliggør en bane af 590 00:27:44,620 --> 00:27:46,330 hyperlinks blandt ressourcer. 591 00:27:46,330 --> 00:27:49,520 Men så hurtigt, kunne det være anvendes til syge formål. 592 00:27:49,520 --> 00:27:54,100 Og e-mail, er det tilstrækkeligt at sige, er disse dage, har HTML indlejret indeni. 593 00:27:54,100 --> 00:27:55,410 >> Nå, lad mig lige en anden ting. 594 00:27:55,410 --> 00:27:58,640 Og vi vil udskyde stort set til afsnit i Problemet sæt syv til at give dig 595 00:27:58,640 --> 00:28:00,000 udforske de oplysninger. 596 00:28:00,000 --> 00:28:01,990 Men lad mig gå videre og gøre et par ting her. 597 00:28:01,990 --> 00:28:04,840 Jeg har tænkt mig at gå ind og erklære hvad der kaldes en div eller 598 00:28:04,840 --> 00:28:06,080 division af siden. 599 00:28:06,080 --> 00:28:07,770 Lad mig slutte denne div tag. 600 00:28:07,770 --> 00:28:11,460 >> Og jeg har tænkt mig at sige op her toppen af ​​siden. 601 00:28:11,460 --> 00:28:14,940 Og så under denne, vil jeg gøre noget som en anden div, lukke 602 00:28:14,940 --> 00:28:17,800 tag, og gøre bunden af ​​siden. 603 00:28:17,800 --> 00:28:18,840 Og lad os gemme det. 604 00:28:18,840 --> 00:28:21,040 >> Så lad os nu gå tilbage til min fil. 605 00:28:21,040 --> 00:28:22,120 Meget underwhelming. 606 00:28:22,120 --> 00:28:25,520 Men hvad division bruges til, under hætten, er det faktisk 607 00:28:25,520 --> 00:28:26,920 en dejlig konstruktionselement. 608 00:28:26,920 --> 00:28:30,300 Det har ikke nogen æstetik så vidt vi kan se, bortset, tilsyneladende, 609 00:28:30,300 --> 00:28:31,890 sætte ting på nye strækninger. 610 00:28:31,890 --> 00:28:36,290 >> Men varsel, som en sidebemærkning, rammer lige Indtast ikke skære det i HTML som det 611 00:28:36,290 --> 00:28:39,840 gør i C. Du tror måske, at det er kommer til at sætte en dejlig stor kløft mellem 612 00:28:39,840 --> 00:28:41,300 toppen og bunden af ​​siden. 613 00:28:41,300 --> 00:28:43,420 Men det er ignoreret. 614 00:28:43,420 --> 00:28:48,040 White space er hovedsagelig ignoreret i websider andre end den allerførste 615 00:28:48,040 --> 00:28:51,530 space bar eller karakter vognretur, at du rammer på tastaturet. 616 00:28:51,530 --> 00:28:55,370 Hvis du ønsker flere linjeskift, du nødt til at specificere det selv. 617 00:28:55,370 --> 00:28:59,080 >> Så jeg har tænkt mig at gøre et par ting her for at vise, hvad der foregår. 618 00:28:59,080 --> 00:29:02,700 Jeg har tænkt mig at tilføje en attribut, eksisterer Og igen, den måde du lærer 619 00:29:02,700 --> 00:29:07,110 hvilke egenskaber findes, hvilke mærker der findes, virkelig er online referencer. 620 00:29:07,110 --> 00:29:09,750 HTML er den slags sprog - det er ikke et programmeringssprog. 621 00:29:09,750 --> 00:29:12,460 Det er et kodesprog - at efter en god halv time, måske, en time med 622 00:29:12,460 --> 00:29:15,930 det, vil du helt sikkert forstå, de fleste sandsynligt, den grundlæggende idé. 623 00:29:15,930 --> 00:29:20,350 Og så en Google-søgning væk, er alt de mulige tags, du kan være 624 00:29:20,350 --> 00:29:21,170 interesseret i. 625 00:29:21,170 --> 00:29:24,290 Og pr spec, er, at ganske velkommen og opmuntret her. 626 00:29:24,290 --> 00:29:26,120 >> Så lad mig gå videre og gøre noget som dette. 627 00:29:26,120 --> 00:29:28,690 Baggrund-farve. 628 00:29:28,690 --> 00:29:32,060 Og nu vil jeg til at gøre noget som rød, semikolon. 629 00:29:32,060 --> 00:29:33,970 Og du kan gøre dette i et par forskellige måder. 630 00:29:33,970 --> 00:29:36,770 Jeg er bare lidt at skrive det som super eksplicit som muligt. 631 00:29:36,770 --> 00:29:41,960 >> Men det viser sig, at denne værdi her er hvad der kaldes CSS, Cascading Style 632 00:29:41,960 --> 00:29:43,700 Plader, som er en anden sprog helt. 633 00:29:43,700 --> 00:29:46,770 CSS har intet at gøre med åbne tags og nære tags. 634 00:29:46,770 --> 00:29:48,230 Det har at gøre med egenskaber. 635 00:29:48,230 --> 00:29:52,660 >> Og egenskaber er simpelthen nøgleværdi par, som netop betyder, at nogle ord, 636 00:29:52,660 --> 00:29:54,680 colon, og så nogle andre ord. 637 00:29:54,680 --> 00:29:57,940 Og hvis du har flere dem, eller bare en her, kan du ende med en 638 00:29:57,940 --> 00:29:59,390 semikolon, bare for klarhed. 639 00:29:59,390 --> 00:30:01,370 Men det vil også arbejde her. 640 00:30:01,370 --> 00:30:02,500 >> Nu hvad er det kommer til at gøre? 641 00:30:02,500 --> 00:30:03,610 Du kan sikkert gætte. 642 00:30:03,610 --> 00:30:05,930 Lad mig gå videre og genindlæse denne side. 643 00:30:05,930 --> 00:30:07,300 Og nu er det virkelig kommer sammen. 644 00:30:07,300 --> 00:30:09,150 Så toppen af ​​min side er rød. 645 00:30:09,150 --> 00:30:12,380 Men hvad er nøglen her er, at jeg nævnte tidligere, at div giver dig 646 00:30:12,380 --> 00:30:13,220 en division af siden. 647 00:30:13,220 --> 00:30:14,410 Og det er faktisk, hvad den gør. 648 00:30:14,410 --> 00:30:17,920 Det væsentlige opdeler siden i et rektangel, som du derefter kan 649 00:30:17,920 --> 00:30:18,720 manipulere. 650 00:30:18,720 --> 00:30:22,330 >> Og dette begreb rektangler er en slags overbevisende i, at hvis du tænker på 651 00:30:22,330 --> 00:30:26,410 mest enhver hjemmeside, der er sikkert vis struktur til det. 652 00:30:26,410 --> 00:30:29,620 De fleste af jer har sikkert sjældent set Facebook hjemmeside, hvis du er logget 653 00:30:29,620 --> 00:30:30,440 i al den tid. 654 00:30:30,440 --> 00:30:33,920 >> Men på Facebook startside, er der en slags div langs toppen. 655 00:30:33,920 --> 00:30:36,140 Og det kan ikke være så simpelt som en div, men der er en 656 00:30:36,140 --> 00:30:37,560 rektangulære region der. 657 00:30:37,560 --> 00:30:40,290 Resten af ​​siden er ligesom en enorm div, ligesom en meget 658 00:30:40,290 --> 00:30:41,910 større rektangulært område. 659 00:30:41,910 --> 00:30:44,540 Så lang historie kort, bare ved at have disse små byggesten, de 660 00:30:44,540 --> 00:30:49,250 evnen til at modellere ting som rektangler, uanset om bred eller smal, kan du også 661 00:30:49,250 --> 00:30:53,680 gøre kolonner potentielt giver mulighed for at lægge ud sider, virkelig, men du 662 00:30:53,680 --> 00:30:54,100 gerne vil. 663 00:30:54,100 --> 00:30:56,170 Vi er egentlig bare skrabe overfladen her. 664 00:30:56,170 --> 00:30:59,820 >> Ja, hvis jeg gør en anden, lad mig gå videre og gøre stil, 665 00:30:59,820 --> 00:31:05,410 background-color, vil vi gøre noget som blå, tætte citater. 666 00:31:05,410 --> 00:31:06,620 Lad os genindlæse dette. 667 00:31:06,620 --> 00:31:08,260 Så nu det bliver endnu grimmere. 668 00:31:08,260 --> 00:31:11,520 Men nu kan jeg slags vise min P sæt fem færdigheder, right? 669 00:31:11,520 --> 00:31:12,690 Rød. 670 00:31:12,690 --> 00:31:15,640 Det minder mig om RGB, Rød Grøn Blå tripler. 671 00:31:15,640 --> 00:31:19,330 Tja, det viser sig i web-programmering, eller webdesign, som er det, vi har 672 00:31:19,330 --> 00:31:21,650 endnu ikke programmeret noget per se, kan du faktisk 673 00:31:21,650 --> 00:31:22,880 har hexadecimal kode. 674 00:31:22,880 --> 00:31:26,480 Så noget noget, noget noget, noget andet. 675 00:31:26,480 --> 00:31:30,650 Så du kan have seks hexadecimal tegn eller tre, i nogle tilfælde, 676 00:31:30,650 --> 00:31:33,480 og hver af disse spørgsmålstegn skal være en hexadecimal cifre, 677 00:31:33,480 --> 00:31:34,985 nul gennem f. 678 00:31:34,985 --> 00:31:41,000 >> Hvis jeg vil have en masse af rød og ingen grønne, og ingen blå, hvad er 679 00:31:41,000 --> 00:31:43,740 modsatte af nul, når du bruger hex? 680 00:31:43,740 --> 00:31:44,480 Det er f.. 681 00:31:44,480 --> 00:31:51,130 Så jeg kan gøre ff, nul nul, nul nul, gemme denne, og nu kom herned. 682 00:31:51,130 --> 00:31:52,700 Og jeg faktisk ikke se en ændring. 683 00:31:52,700 --> 00:31:56,230 Så citat citat slut "rød" er tilsyneladende synonym for alle røde, 684 00:31:56,230 --> 00:31:57,610 ingen grøn, ingen blå. 685 00:31:57,610 --> 00:31:59,960 I mellemtiden, lad os bevidst ændre dette at være noget 686 00:31:59,960 --> 00:32:01,210 tilfældig, ligesom ABCDF. 687 00:32:01,210 --> 00:32:03,790 688 00:32:03,790 --> 00:32:05,860 >> Lad os se, hvad det er. 689 00:32:05,860 --> 00:32:08,530 Det er en virkelig rart blå, faktisk, baby blå. 690 00:32:08,530 --> 00:32:11,820 Okay, så disse er netop nu lidt tilfældige kombinationer af 691 00:32:11,820 --> 00:32:12,210 tegn. 692 00:32:12,210 --> 00:32:13,410 Så vi vil ikke køre fast i her. 693 00:32:13,410 --> 00:32:15,930 Men igen, dette taler til præcision at du kan begynde at 694 00:32:15,930 --> 00:32:19,090 anvende - selvom du meget overvældet af æstetik. 695 00:32:19,090 --> 00:32:21,750 Faktisk, hvis du virkelig ønsker være imponeret, lad mig gå videre og ændre 696 00:32:21,750 --> 00:32:23,500 skriftstørrelsen, for eksempel. 697 00:32:23,500 --> 00:32:25,960 Og bemærk semikolon, som er nødvendig der. 698 00:32:25,960 --> 00:32:29,570 >> Skriftstørrelse, kan vi være lige latterligt her, 96 point. 699 00:32:29,570 --> 00:32:31,280 Gem det. 700 00:32:31,280 --> 00:32:33,670 Wow, det er en stor skriftstørrelse. 701 00:32:33,670 --> 00:32:35,490 Okay, så det er meget nemt. 702 00:32:35,490 --> 00:32:38,260 Og faktisk er du hovedsageligt ser den allerførste webside jeg lavede 703 00:32:38,260 --> 00:32:40,060 år siden, da jeg først lært denne stuff. 704 00:32:40,060 --> 00:32:42,190 Det er meget nemt at lave meget hæslige ting hurtigt. 705 00:32:42,190 --> 00:32:46,115 >> Og hvis du er fortrolig med Wayback Maskine på archive.org, du 706 00:32:46,115 --> 00:32:48,210 kan finde alle mine hæslige bachelorstuderendes websider. 707 00:32:48,210 --> 00:32:50,090 En havde Kermit Frøen på forsiden. 708 00:32:50,090 --> 00:32:53,150 Jeg gik igennem en fase, hvor jeg troede, det var cool at tage på baggrund af 709 00:32:53,150 --> 00:32:56,320 en rød gardin, da jeg erfarede, hvordan du kan flise billeder igen og igen, og 710 00:32:56,320 --> 00:32:59,540 igen, for at fylde en side med en stor klæbrig rødt gardin. 711 00:32:59,540 --> 00:33:03,120 Og så oven i dette, var et ikon at du skulle klikke på for at komme ind mit hjem 712 00:33:03,120 --> 00:33:04,960 side, fordi det var meget på mode. 713 00:33:04,960 --> 00:33:08,870 >> Og så min første program, jeg nogensinde skrev var ikke i PHP, men på et sprog 714 00:33:08,870 --> 00:33:12,260 kaldet Pearl, en gæstebog, som skrev er en virkelig cool ting, at en 715 00:33:12,260 --> 00:33:14,250 masse mennesker forventer, at du at have på en hjemmeside. 716 00:33:14,250 --> 00:33:17,510 Når du kommer til den side, de vil have dig at logge ind, og sige, hvem du er, 717 00:33:17,510 --> 00:33:18,720 og hvorfor du er der. 718 00:33:18,720 --> 00:33:21,320 Dette er meget 1990'erne stil webdesign. 719 00:33:21,320 --> 00:33:24,130 >> Men i disse dage, helt sikkert, vi har komme meget længere. 720 00:33:24,130 --> 00:33:27,560 Og du vil se, i snit, og selv i problemet sæt syv, ved 721 00:33:27,560 --> 00:33:31,570 gearing biblioteker i disse dage, det er så meget lettere at lave 722 00:33:31,570 --> 00:33:33,400 pænere ting hurtigt. 723 00:33:33,400 --> 00:33:36,550 Virkelig her, er vi bare skrabe overfladen af, hvad du kan gøre 724 00:33:36,550 --> 00:33:37,400 stilistisk. 725 00:33:37,400 --> 00:33:41,660 >> Og faktisk allerede, lad mig understrege at dette allerede er ved at blive grim, ikke 726 00:33:41,660 --> 00:33:46,030 bare æstetisk, men i form af stil af min kode, eller 727 00:33:46,030 --> 00:33:47,260 design af min kode. 728 00:33:47,260 --> 00:33:52,350 Jeg har i øjeblikket comingled HTML, hvilket er de grønlige åbne tags der, med 729 00:33:52,350 --> 00:33:55,160 CSS egenskaber, som er helt legit. 730 00:33:55,160 --> 00:33:57,200 Dette er virkelig, hvor sproget havde sin oprindelse. 731 00:33:57,200 --> 00:34:01,030 >> Men af ​​hensyn til rent design, ligesom vi startede factoring stuff 732 00:34:01,030 --> 00:34:05,370 ud fra C-filer. h-filer, så lad mig faktisk praktiserer den slags 733 00:34:05,370 --> 00:34:07,990 princip og begynde at gøre dette i stedet. 734 00:34:07,990 --> 00:34:13,280 Lad mig sætte en stil tag heroppe, hvilket findes også i HTML, og lad mig 735 00:34:13,280 --> 00:34:15,330 præcisere følgende. 736 00:34:15,330 --> 00:34:16,360 Lad mig slette denne. 737 00:34:16,360 --> 00:34:18,110 Baggrundsfarve bliver rød. 738 00:34:18,110 --> 00:34:19,800 Jeg har tænkt mig at slette denne helt. 739 00:34:19,800 --> 00:34:22,580 Jeg har tænkt mig at slippe af med stil tilskriver, og jeg har tænkt mig at entydigt 740 00:34:22,580 --> 00:34:24,620 identificere denne div med et ord - 741 00:34:24,620 --> 00:34:28,750 vilkårligt, men med rimelighed, citat citat slut "top". Og id er en speciel 742 00:34:28,750 --> 00:34:32,530 attribut, der entydigt definerer en vis HTML-element 743 00:34:32,530 --> 00:34:33,850 som havende denne id. 744 00:34:33,850 --> 00:34:37,969 >> Hvis jeg nu ønsker at stiliseret det heroppe i lederen af ​​min side, indersiden af 745 00:34:37,969 --> 00:34:41,730 style tag, bemærke, at Jeg kan gøre hash toppen. 746 00:34:41,730 --> 00:34:45,300 Og så kan jeg sætte et par krøllede seler, der minder om C, og lad 747 00:34:45,300 --> 00:34:47,130 mig indsætte denne stilisering. 748 00:34:47,130 --> 00:34:49,929 Og lad mig gå videre her og foregribe hvor jeg har tænkt mig med dette. 749 00:34:49,929 --> 00:34:53,380 Lad mig også oprette en at bunden div. 750 00:34:53,380 --> 00:34:58,010 Lad mig få fat i denne hæslige kode fra down her, sætte det ind her, og jeg vil være 751 00:34:58,010 --> 00:35:00,770 lidt mere anal nu og stiliseret det ved blot at sætte tingene på deres egen 752 00:35:00,770 --> 00:35:02,540 linje, der slutter med semikolon. 753 00:35:02,540 --> 00:35:04,430 Lad mig slippe af med stil tag. 754 00:35:04,430 --> 00:35:05,320 >> Men jeg er ikke færdig endnu. 755 00:35:05,320 --> 00:35:07,406 Jeg har brug for at gøre en anden ting. 756 00:35:07,406 --> 00:35:10,070 Ja, id lig citat citat slut, "bottom" eller hvad id jeg ønsker at 757 00:35:10,070 --> 00:35:11,740 giver dette element. 758 00:35:11,740 --> 00:35:13,420 Nu, lad mig gå tilbage herovre. 759 00:35:13,420 --> 00:35:14,360 Og det er grusomme. 760 00:35:14,360 --> 00:35:15,805 Jeg kan ikke beskæftige sig med 96 point. 761 00:35:15,805 --> 00:35:16,960 Lad os gøre 24 point. 762 00:35:16,960 --> 00:35:18,320 Eller du kunne være mere præcis. 763 00:35:18,320 --> 00:35:21,800 Du kan faktisk bruge pixels, sx, så at du virkelig får finere korn 764 00:35:21,800 --> 00:35:23,220 kontrol over din side. 765 00:35:23,220 --> 00:35:26,860 >> Som en sidebemærkning er det ikke nødvendigvis den bedste ting, hvis brugere, 766 00:35:26,860 --> 00:35:29,650 tilgængelighed årsager, ønsker at kunne øge størrelser. 767 00:35:29,650 --> 00:35:32,650 Så indse, at der er måder at gøre ting, der ikke nødvendigvis 768 00:35:32,650 --> 00:35:34,230 hård kode alt. 769 00:35:34,230 --> 00:35:37,220 >> Okay, så det er større, 24 point, end hvad standard er. 770 00:35:37,220 --> 00:35:38,630 Men nu er det en lidt renere. 771 00:35:38,630 --> 00:35:40,230 Og lad mig tage et skridt videre. 772 00:35:40,230 --> 00:35:47,220 Ligesom tanken om header-filer, bemærke, at vi er et skridt tættere på det. 773 00:35:47,220 --> 00:35:52,000 Jeg har indregnet ud, men stadig tilbage, inde på min side, de CSS regler. 774 00:35:52,000 --> 00:35:56,200 Hvorfor skulle jeg ønsker at gå et skridt yderligere, fjerne dette helt, og 775 00:35:56,200 --> 00:35:59,860 sætte det i en separat fil? 776 00:35:59,860 --> 00:36:01,070 >> Så jeg kan genbruge det, ikke? 777 00:36:01,070 --> 00:36:03,155 Det er lige slags intuition lige nu. 778 00:36:03,155 --> 00:36:06,340 Før, jeg påstod, at det var bare få grimme have stil 779 00:36:06,340 --> 00:36:08,480 attributter indersiden af divs selv. 780 00:36:08,480 --> 00:36:09,750 Men bare slags tror, ​​at igennem. 781 00:36:09,750 --> 00:36:13,560 Som din side bliver længere og længere, hvis du lægger her, og her, og 782 00:36:13,560 --> 00:36:18,350 her, og her, alle disse forskellige farver og skriftstørrelser og andre sådanne 783 00:36:18,350 --> 00:36:22,550 attributter, din side er meget hurtigt kommer til at blive uoverskuelig for dig. 784 00:36:22,550 --> 00:36:24,570 >> Hvis nogen kommer op til dig og siger, åh, ved du hvad? 785 00:36:24,570 --> 00:36:28,070 Jeg vil virkelig gerne ændre skriftstørrelsen med yderligere to punkter, du 786 00:36:28,070 --> 00:36:31,275 måske nødt til at gå ud og finde og erstatte et stort antal linjer kode. 787 00:36:31,275 --> 00:36:35,170 Det er meget mere overbevisende at centralisere alle sådanne æstetik her. 788 00:36:35,170 --> 00:36:38,850 Men hvis du gerne vil genbruge dem æstetik i flere websider, alle 789 00:36:38,850 --> 00:36:41,100 jo mere overbevisende for, for Eksempelvis oprette en fil 790 00:36:41,100 --> 00:36:45,290 kaldes med dette indhold. 791 00:36:45,290 --> 00:36:46,680 >> Og lad mig gøre det. 792 00:36:46,680 --> 00:36:51,150 793 00:36:51,150 --> 00:36:51,920 Gem denne fil. 794 00:36:51,920 --> 00:36:55,580 Jeg siger styles.css, vilkårlige, men konventionelle. 795 00:36:55,580 --> 00:36:58,770 Jeg vil sætte det i John Harvard hjem mappespecifikt nu for enkelhed. 796 00:36:58,770 --> 00:37:03,880 Og hvad jeg kan gøre i min web-side er at få slippe af med stil tag helt, 797 00:37:03,880 --> 00:37:08,270 og noget unintuitively bruge et link tag, som ikke giver dig et link i 798 00:37:08,270 --> 00:37:13,140 hyperlinket, klikbare forstand, men hvor jeg siger link href lig 799 00:37:13,140 --> 00:37:15,120 styles.css. 800 00:37:15,120 --> 00:37:20,050 Og forholdet, at dette element har med websiden er at tjene som 801 00:37:20,050 --> 00:37:21,280 sin stil ark. 802 00:37:21,280 --> 00:37:22,670 >> Så hvordan har jeg vide det? 803 00:37:22,670 --> 00:37:25,950 One, du lige har læst manualen, eller du Google rundt, og du 804 00:37:25,950 --> 00:37:27,000 se på forskellige ressourcer. 805 00:37:27,000 --> 00:37:30,520 Jeg mener, der virkelig er, hvordan du afhente teknikker som dette, og i overensstemmelse 806 00:37:30,520 --> 00:37:34,720 med denne idé at undervise sig selv nye sprog, igen, vil du opdage, at 807 00:37:34,720 --> 00:37:38,830 der er kun et begrænset antal ting til alle sprog, at når du får 808 00:37:38,830 --> 00:37:41,310 dem, vil du opdage, at det bliver hurtigere og hurtigere til at skrive. 809 00:37:41,310 --> 00:37:44,180 Faktisk lære et nyt programmeringssprog sproget er så meget hurtigere end en ny 810 00:37:44,180 --> 00:37:47,380 talesprog, fordi disse ting er meget mindre og meget mere 811 00:37:47,380 --> 00:37:48,820 præcist defineret. 812 00:37:48,820 --> 00:37:51,590 >> Men jeg har fremhævet en smule af en anomali her. 813 00:37:51,590 --> 00:37:57,750 Hvorfor har jeg fremhævet dette skråstreg her? 814 00:37:57,750 --> 00:37:59,420 Fordi jeg er nødt til at lukke tag. 815 00:37:59,420 --> 00:38:00,530 Jeg skal lukke tag. 816 00:38:00,530 --> 00:38:02,750 Og du vil finde utallige ressourcer online, der ikke 817 00:38:02,750 --> 00:38:04,080 nødvendigvis tætte tags. 818 00:38:04,080 --> 00:38:08,770 Og realistisk set, er det ikke strengt nødvendigt for teknisk, og der er 819 00:38:08,770 --> 00:38:11,950 grunde virkeligheden browsere er bare temmelig tolerant over for fejl i web 820 00:38:11,950 --> 00:38:14,360 sider, for bedre eller værre, men hovedsagelig værre. 821 00:38:14,360 --> 00:38:18,830 >> Så dette her er bare en renere måde sige noget dumt som dette, 822 00:38:18,830 --> 00:38:22,330 hvor, hvis du ønsker at åbne linket tag men lukker det, er der virkelig ingen forestilling 823 00:38:22,330 --> 00:38:23,720 af indhold til et link-tag. 824 00:38:23,720 --> 00:38:26,000 Det betyder blot indlæse denne fil og lægge den her. 825 00:38:26,000 --> 00:38:30,610 Det er ligesom skarpe omfatter i C. Du kan åbne og lukke et tag på en gang 826 00:38:30,610 --> 00:38:31,660 inden for samme mærke. 827 00:38:31,660 --> 00:38:33,520 Og der er andre eksempler på dette. 828 00:38:33,520 --> 00:38:37,280 Dette er ikke måden at gøre dette, men Den br tag, for linjeskift, hvis jeg 829 00:38:37,280 --> 00:38:41,780 virkelig ønskede at opnå, hvad jeg var forsøger at før ved at trykke Enter, hvis 830 00:38:41,780 --> 00:38:45,380 Jeg eksplicit siger linjeskift, linjeskift, linjeskift, linjeskift og 831 00:38:45,380 --> 00:38:49,100 læg denne side, nu vil du lægge mærke til at bunden af ​​siden er 832 00:38:49,100 --> 00:38:51,940 ja, meget længere nede i bunden af ​​siden. 833 00:38:51,940 --> 00:38:55,840 Men selv det kan gøres meget mere rent med CSS og med margener, 834 00:38:55,840 --> 00:38:58,120 og andre sådanne æstetiske teknikker. 835 00:38:58,120 --> 00:38:59,940 >> Så for nu, er de grillbarer dette. 836 00:38:59,940 --> 00:39:02,320 I HTML har vi disse ting kaldet tags. 837 00:39:02,320 --> 00:39:04,830 I CSS har vi disse ting kaldet egenskaber. 838 00:39:04,830 --> 00:39:08,700 Vi kan comingle disse to sprog, enten ved at bruge den stil attribut, 839 00:39:08,700 --> 00:39:14,240 eller den stil tag, eller bedste endnu, factoring det ud helt, som vi gør 840 00:39:14,240 --> 00:39:17,270 i problemet indstille 7. 841 00:39:17,270 --> 00:39:23,820 Spørgsmål, så, om konceptuelle basics herinde? 842 00:39:23,820 --> 00:39:24,740 >> PUBLIKUM: Jeg har et spørgsmål. 843 00:39:24,740 --> 00:39:25,630 >> SPEAKER 1: Åh, undskyld. 844 00:39:25,630 --> 00:39:28,880 >> PUBLIKUM: Hvorfor var det ikke farvet - 845 00:39:28,880 --> 00:39:31,410 >> SPEAKER 1: Åh, i det andet faneblad? 846 00:39:31,410 --> 00:39:32,232 Det her? 847 00:39:32,232 --> 00:39:33,482 >> PUBLIKUM: Nej, det er ligesom - 848 00:39:33,482 --> 00:39:35,330 849 00:39:35,330 --> 00:39:39,480 >> SPEAKER 1: Åh, det er fordi Jeg var ved at blive sjusket. 850 00:39:39,480 --> 00:39:41,350 Jeg sætter filen i det forkerte sted. 851 00:39:41,350 --> 00:39:47,840 Så hvis jeg faktisk sat det her, og jeg chmod det, alt + r for styles.css og 852 00:39:47,840 --> 00:39:52,050 nu genindlæse siden, vi nu få stilisering tilbage. 853 00:39:52,050 --> 00:39:54,530 Og fordi skriftstørrelser er anderledes, ser vi ikke helt så meget 854 00:39:54,530 --> 00:39:55,010 hvide rum. 855 00:39:55,010 --> 00:39:58,240 Vi stedet se, hvad der er den Standard er i stedet. 856 00:39:58,240 --> 00:40:00,050 Godt spørgsmål. 857 00:40:00,050 --> 00:40:00,846 Ja? 858 00:40:00,846 --> 00:40:02,630 >> PUBLIKUM: Hvorfor er linket tag inde i header? 859 00:40:02,630 --> 00:40:06,270 >> SPEAKER 1: Hvorfor er links tag inde i header - 860 00:40:06,270 --> 00:40:07,650 korte svar, bare fordi. 861 00:40:07,650 --> 00:40:08,930 Det er, hvad der blev besluttet. 862 00:40:08,930 --> 00:40:10,720 Det er, hvor linket tags gå, når du har, hvad der kaldes en 863 00:40:10,720 --> 00:40:13,650 eksterne stylesheet. 864 00:40:13,650 --> 00:40:16,430 Andre spørgsmål? 865 00:40:16,430 --> 00:40:17,770 >> Okay, godt så lad os gøre det. 866 00:40:17,770 --> 00:40:20,500 Vi har så meget sjov foran os i dag. 867 00:40:20,500 --> 00:40:22,480 Det er bare skrabe overfladen af ​​CSS. 868 00:40:22,480 --> 00:40:23,010 Lad os gøre det. 869 00:40:23,010 --> 00:40:25,980 Lad os tage en fem minutters pause her fordi per min e-mail, så lad os hænge i 870 00:40:25,980 --> 00:40:27,200 der indtil 02:30-ish i dag. 871 00:40:27,200 --> 00:40:28,540 Men hvis du er nødt til at forlade, det er fint. 872 00:40:28,540 --> 00:40:30,380 Men vi vil gå videre efter en fem minutters pause. 873 00:40:30,380 --> 00:40:35,930 Og vi vil lære lidt noget om PHP, MySQL og meget mere. 874 00:40:35,930 --> 00:40:44,520 >> Okay, så lad os prøve nu, at binde en nogle af disse ideer sammen og gøre, 875 00:40:44,520 --> 00:40:46,180 sige, vores egen søgemaskine. 876 00:40:46,180 --> 00:40:48,570 Jeg har bemærket, snarere nysgerrigt, følgende. 877 00:40:48,570 --> 00:40:52,610 Når du er på Google.com, er du typisk ved en URL som denne her 878 00:40:52,610 --> 00:40:54,870 med intet efter dot com. 879 00:40:54,870 --> 00:40:59,760 Men hvis jeg søger noget dumt ligesom katte, og tryk på Enter, vi får - ikke 880 00:40:59,760 --> 00:41:01,300 dum, men du kender. 881 00:41:01,300 --> 00:41:05,410 >> OK, så bemærke, øverst på siden, nu har URL'en, selvfølgelig, ændret. 882 00:41:05,410 --> 00:41:07,190 Og det er ikke noget nyt for nogen af ​​os. 883 00:41:07,190 --> 00:41:09,290 Du klikker links og kram der sker på nettet. 884 00:41:09,290 --> 00:41:11,420 Men hvad er interessant her er følgende. 885 00:41:11,420 --> 00:41:14,500 Der er en hel masse rod, men lad mig smider ting, som jeg ikke 886 00:41:14,500 --> 00:41:16,600 helt forstå eller ikke ser virkelig relevant. 887 00:41:16,600 --> 00:41:18,490 >> Lad mig slippe af med dette. 888 00:41:18,490 --> 00:41:20,030 Lad mig slippe af med dette. 889 00:41:20,030 --> 00:41:22,630 Og lad mig bare slippe af alt dette. 890 00:41:22,630 --> 00:41:28,840 Og nu mærke til, at katte er i webadressen, fulgt med en q, så den samme 891 00:41:28,840 --> 00:41:29,710 log ind foran den. 892 00:41:29,710 --> 00:41:32,110 Så det viser sig det er sådan hvordan det virker, når det kommer 893 00:41:32,110 --> 00:41:33,360 til input og output. 894 00:41:33,360 --> 00:41:37,510 >> Vi har længe talt om sorte bokse, right? 895 00:41:37,510 --> 00:41:41,650 Så hvis dette er en implementeret funktion her som en sort boks, tager det input 896 00:41:41,650 --> 00:41:45,290 og producerer output, godt, betyder som du giver input til en 897 00:41:45,290 --> 00:41:49,270 hjemmeside er ved ofte, dens webadresser. 898 00:41:49,270 --> 00:41:52,850 Du skal blot sætte et spørgsmålstegn og derefter en nøgle lig værdi. 899 00:41:52,850 --> 00:41:56,740 Og så måske et og-tegn, og derefter anden nøgle er lig med værdi, så måske 900 00:41:56,740 --> 00:41:58,810 anden-tegn, nøglen er lig med værdi. 901 00:41:58,810 --> 00:42:03,030 Det er hvordan du passere i nøglerne og værdier, par indgange. 902 00:42:03,030 --> 00:42:07,050 >> Så hvis jeg ramte Indtast nu, hvad er interessant ved Google er, at alle 903 00:42:07,050 --> 00:42:10,420 der fylder jeg slettede vises ikke at være strengt nødvendige. 904 00:42:10,420 --> 00:42:15,120 Alt, hvad jeg har brug for at sende til Google er spørgsmål mark q er katte at få 905 00:42:15,120 --> 00:42:16,160 tilbage nogle katte. 906 00:42:16,160 --> 00:42:20,160 Nå, konsekvenserne af det, så, , er, hvis jeg trækker op gedit, jeg startede 907 00:42:20,160 --> 00:42:24,360 at gøre min egen søgemaskine her i en fil kaldet seach0.html. 908 00:42:24,360 --> 00:42:26,750 >> Og lad mig gå videre og slette en linje, som du 909 00:42:26,750 --> 00:42:27,910 var ikke meningen, at se. 910 00:42:27,910 --> 00:42:31,070 Og nu, lad mig gå ind i min egen browser, så ikke til Google, og gå til 911 00:42:31,070 --> 00:42:34,900 http://localhost. 912 00:42:34,900 --> 00:42:36,220 Og det kommer til at komme i vejen. 913 00:42:36,220 --> 00:42:43,240 Så vi er nødt til at sige farvel til at for nu, flytte denne her over, 914 00:42:43,240 --> 00:42:46,270 Åh, nu er vi nødt til at sige farvel til denne fil. 915 00:42:46,270 --> 00:42:51,700 >> Når du har en fil kaldet index.html eller index.php i en 916 00:42:51,700 --> 00:42:54,980 mappe, hvis web-serveren er konfigureret på denne måde, hvad du 917 00:42:54,980 --> 00:42:59,600 jf. standard er indholdet af den fil i stedet for en liste over de 918 00:42:59,600 --> 00:43:02,330 bibliotek, som jeg ønskede her. 919 00:43:02,330 --> 00:43:03,750 Mere om dette i spec. 920 00:43:03,750 --> 00:43:04,610 Du har ikke set det. 921 00:43:04,610 --> 00:43:06,360 >> Så dette er hvad jeg egentlig ville. 922 00:43:06,360 --> 00:43:08,810 Men for et øjeblik siden, var der en fil i denne mappe kaldet 923 00:43:08,810 --> 00:43:11,290 index.html og index.php. 924 00:43:11,290 --> 00:43:13,380 Og så webserveren var viser mig disse filer. 925 00:43:13,380 --> 00:43:15,900 I stedet vil jeg denne mappe notering her. 926 00:43:15,900 --> 00:43:18,340 >> Så jeg har tænkt mig at gå ind i CSS og gå til search0. 927 00:43:18,340 --> 00:43:21,770 Og jeg hævder, at dette er det vil være begyndelsen af ​​min egen konkurrence 928 00:43:21,770 --> 00:43:22,490 søgemaskine. 929 00:43:22,490 --> 00:43:27,630 Og for at gøre dette, vil jeg gå ind her i CSS, åbne og op med 930 00:43:27,630 --> 00:43:30,190 gedit, søgning 0. 931 00:43:30,190 --> 00:43:32,280 Men desværre er der ikke meget foregår her. 932 00:43:32,280 --> 00:43:35,690 Alt jeg gjorde var at bruge en overskrift tag, som sker for at blive kaldt h1, som 933 00:43:35,690 --> 00:43:38,180 væsentligt betyder stor og fed, og det er det. 934 00:43:38,180 --> 00:43:40,810 Men de midler, som vi kan leverer input er via disse 935 00:43:40,810 --> 00:43:42,180 ting kaldet formularer. 936 00:43:42,180 --> 00:43:46,040 >> Så lad mig gå videre og åbne og lukke, præventivt, en form-tag der. 937 00:43:46,040 --> 00:43:48,060 Og lad mig gå videre og gøre noget som dette. 938 00:43:48,060 --> 00:43:51,430 Input, type lig tekst. 939 00:43:51,430 --> 00:43:56,320 Og så lad os lukke tag inden beslagene selv. 940 00:43:56,320 --> 00:43:58,800 Jeg behøver ikke at starte et tekstfelt og stoppe et tekstfelt. 941 00:43:58,800 --> 00:44:01,080 Det er bare at være der eller ej. 942 00:44:01,080 --> 00:44:06,210 >> Og så under det, så lad os gøre input typen lig indsende. 943 00:44:06,210 --> 00:44:06,870 Gem dette. 944 00:44:06,870 --> 00:44:08,630 Og lad os nu bare lave en hurtig tilregnelighed kontrollere. 945 00:44:08,630 --> 00:44:09,820 Lad os genindlæse. 946 00:44:09,820 --> 00:44:10,890 >> OK, så det er ikke dårligt. 947 00:44:10,890 --> 00:44:13,260 Det er ikke Googles stil, men det er ret tæt på. 948 00:44:13,260 --> 00:44:13,920 Der er et tekstfelt. 949 00:44:13,920 --> 00:44:17,190 Jeg kan skrive nogle ting ind, tryk Enter, men der sker ikke noget endnu. 950 00:44:17,190 --> 00:44:21,090 Og det er fordi jeg ikke har angivet en sag om denne formular, så at sige. 951 00:44:21,090 --> 00:44:23,860 Så hvis jeg går tilbage til formularen element det viser sig, og jeg ved, at dette kun 952 00:44:23,860 --> 00:44:27,460 fra at have læst dokumentationen, at formen tag tager en attribut 953 00:44:27,460 --> 00:44:31,880 kaldet handling, der er URL af hjemmesiden, som du 954 00:44:31,880 --> 00:44:34,790 ønsker at sende formularen. 955 00:44:34,790 --> 00:44:37,610 >> Jeg tror ikke rigtig, vi har tid til at gennemføre hele bagenden for en 956 00:44:37,610 --> 00:44:38,570 søgemaskine i dag. 957 00:44:38,570 --> 00:44:41,900 Så vi vil bare sige, eh, gå til google.com / search. 958 00:44:41,900 --> 00:44:43,450 Og lad mig nu lukke mine citater. 959 00:44:43,450 --> 00:44:46,070 Og lad mig yderligere specificere, at den metode til at bruge, er at gå 960 00:44:46,070 --> 00:44:47,120 at blive kaldt får. 961 00:44:47,120 --> 00:44:50,650 >> Lang historie kort, er der to måder, ved mindste, at du kan indsende oplysninger 962 00:44:50,650 --> 00:44:51,880 fra browser til serveren. 963 00:44:51,880 --> 00:44:55,340 Den ene er at få, og for dagens formål, det betyder bare i webadressen. 964 00:44:55,340 --> 00:44:58,730 Du ser præcis de spørgsmålstegn, de lig skilte, og-tegn, der 965 00:44:58,730 --> 00:44:59,780 vi så tidligere. 966 00:44:59,780 --> 00:45:02,890 Eller der er et alternativ, kaldet indlæg. 967 00:45:02,890 --> 00:45:06,490 For nu, ved, at stillingen ofte anvendes når du ønsker at uploade filer, ligesom 968 00:45:06,490 --> 00:45:09,820 billeder og så videre, eller når du ønsker at indsende kreditkortoplysninger, eller 969 00:45:09,820 --> 00:45:13,810 passwords, noget, som det ikke virkelig mening, begrebsmæssigt, eller 970 00:45:13,810 --> 00:45:18,020 sikkerhed klogt, at ende i webadressen på din browser, hvor snooping forældre, 971 00:45:18,020 --> 00:45:21,520 eller roommates, eller nogen med adgang til din computer kan se. 972 00:45:21,520 --> 00:45:23,110 >> Så lad os gemme det her. 973 00:45:23,110 --> 00:45:24,480 Og jeg har brug for at gøre en anden ting. 974 00:45:24,480 --> 00:45:27,250 Det er ikke tilstrækkeligt blot at siger give mig et tekstfelt. 975 00:45:27,250 --> 00:45:29,850 Jeg er nødt til at give denne feltets værdsætter et navn. 976 00:45:29,850 --> 00:45:34,500 Så lad mig låne Googles valg af navne, q og angive dette andet 977 00:45:34,500 --> 00:45:38,150 tilskriver jeg ikke virkelig bekymrer sig om navnet på send-knappen. 978 00:45:38,150 --> 00:45:40,890 Alt jeg bryder mig om er at indsende hvad brugeren typer i. 979 00:45:40,890 --> 00:45:41,940 >> Og nu er det sådan grim. 980 00:45:41,940 --> 00:45:42,820 Det bare siger indsende. 981 00:45:42,820 --> 00:45:46,350 Det viser sig, og jeg ved dette fra dokumentation, kan jeg faktisk sige 982 00:45:46,350 --> 00:45:51,710 værdi er lig citat citat slut "CS50 seach, "nær citat. 983 00:45:51,710 --> 00:45:53,030 Så lad os genindlæse igen. 984 00:45:53,030 --> 00:45:57,020 Så jeg holde rammer Kommando-R eller Kontrol-R på mit tastatur for at genindlæse. 985 00:45:57,020 --> 00:45:58,605 >> Nu har vi et mere interessant søgemaskine. 986 00:45:58,605 --> 00:46:00,340 Det er ikke helt ligner Google endnu, selv om. 987 00:46:00,340 --> 00:46:04,100 Så lad os gå videre her og gøre lidt linjeskift. 988 00:46:04,100 --> 00:46:06,066 >> OK, så nu har vi Google. 989 00:46:06,066 --> 00:46:08,260 Vi har faktisk næsten har Google. 990 00:46:08,260 --> 00:46:10,460 Så nu, hvad der kommer til at ske? 991 00:46:10,460 --> 00:46:12,220 Jeg har tænkt mig at skrive i noget lide katte. 992 00:46:12,220 --> 00:46:16,570 Og browseren kommer til at parse denne form, at jeg defineret. 993 00:46:16,570 --> 00:46:19,470 Og det kommer til at sende brugeren til denne webadresse. 994 00:46:19,470 --> 00:46:23,420 Så denne gang, for nogle nysgerrige grund Jeg fik mere information om bestandene 995 00:46:23,420 --> 00:46:24,410 end om faktiske katte. 996 00:46:24,410 --> 00:46:30,580 Men det er fint, fordi mærke vi stadig sluttede op her, q er lig med katte. 997 00:46:30,580 --> 00:46:35,200 >> Så lang historie kort, synes det rimeligt trivielt at få input fra brugeren. 998 00:46:35,200 --> 00:46:38,190 Og for at være fair, er der bundter af andre typer af formularfelter. 999 00:46:38,190 --> 00:46:41,510 Der er afkrydsningsfelter, og lidt gensidigt eksklusive alternativknapper og 1000 00:46:41,510 --> 00:46:42,960 drop down menuer og meget mere. 1001 00:46:42,960 --> 00:46:46,160 Men alle af dem er så relativt let gennemføres som 1002 00:46:46,160 --> 00:46:48,040 dette tekstfelt var. 1003 00:46:48,040 --> 00:46:52,050 Og i sidste ende, vi bare nødt til at gøre at nogen lytter på den anden 1004 00:46:52,050 --> 00:46:56,490 ende af linjen for at få at oplysninger, der behandles eller anden måde, og 1005 00:46:56,490 --> 00:46:58,440 give os tilbage vores katte. 1006 00:46:58,440 --> 00:47:00,840 >> Lad os kigge på et lidt mere involveret eksempel. 1007 00:47:00,840 --> 00:47:06,020 Lad mig gå ind i min vhost adressekartotek, i lokal vært, offentligheden og hvor jeg 1008 00:47:06,020 --> 00:47:06,980 sætte dagens kildekode. 1009 00:47:06,980 --> 00:47:09,800 Alt dette vil være på kursets hjemmeside for dig at rode med. 1010 00:47:09,800 --> 00:47:15,420 Og hvis jeg går ind i froshims, lad mig åbne up denne fil nu, froshim0.php. 1011 00:47:15,420 --> 00:47:18,460 Denne ene er lidt mere detaljeret, så Vi vil ikke skrive det fra bunden. 1012 00:47:18,460 --> 00:47:21,970 Men bare mærke nu få noget velkendte karakteristika. 1013 00:47:21,970 --> 00:47:24,550 >> One, formular tag, anderledes handling. 1014 00:47:24,550 --> 00:47:25,670 Det er ikke en fuld webadresse. 1015 00:47:25,670 --> 00:47:29,930 Nu er det tilsyneladende for at indgive kaldt register0.php fordi der i et øjeblik, 1016 00:47:29,930 --> 00:47:32,660 Jeg har tænkt mig at lære mig lidt noget om PHP, et programmeringssprog 1017 00:47:32,660 --> 00:47:37,360 sprog, fordi PHP kan bruges til gennemføre, hvad Google implementeret som 1018 00:47:37,360 --> 00:47:39,650 bagenden af ​​deres søgemaskiner. 1019 00:47:39,650 --> 00:47:42,890 >> Google i virkeligheden bruger formentlig nogle Python, nogle C + +, og 1020 00:47:42,890 --> 00:47:44,230 klaser af andre sprog. 1021 00:47:44,230 --> 00:47:48,230 Men vi kan helt sikkert gennemføre søgningen resultater ved hjælp af PHP, hvis vi ønskede. 1022 00:47:48,230 --> 00:47:49,610 Men for nu, vil vi holde det simpelt. 1023 00:47:49,610 --> 00:47:53,320 Og det er faktisk minder om en af de øvrige allerførste hjemmesider jeg 1024 00:47:53,320 --> 00:47:54,490 lavet år siden. 1025 00:47:54,490 --> 00:47:58,160 >> Tilbage i min dag, du har tilmeldt dig murene sport som en freshman ved 1026 00:47:58,160 --> 00:48:00,880 udfylde et stykke papir, gå over gården, droppe og det i 1027 00:48:00,880 --> 00:48:04,890 postkassen af ​​Proctor i Wigglesworth, og det var, hvordan du 1028 00:48:04,890 --> 00:48:05,460 registreret. 1029 00:48:05,460 --> 00:48:09,650 Og så mit projekt kort efter CS50, var at sætte det, der gør perfekt 1030 00:48:09,650 --> 00:48:13,460 forstand, på nettet, var der ikke som på mode dengang som det er nu. 1031 00:48:13,460 --> 00:48:17,510 Men alle vi havde at gøre, var at skabe, væsentlige en HTML-formular. 1032 00:48:17,510 --> 00:48:19,640 >> Og denne form så nogenlunde sådan her. 1033 00:48:19,640 --> 00:48:22,480 Jeg havde en indgang til freshman navn. 1034 00:48:22,480 --> 00:48:27,780 Jeg havde en anden afkrydsningsfeltet for, hvorvidt eller ikke de ønskede at være kaptajn, hvad 1035 00:48:27,780 --> 00:48:30,400 deres køn var og hvad deres dorm var. 1036 00:48:30,400 --> 00:48:33,370 Og så har jeg svært kodet i tingene Ligesom Apley Court og Canaday, 1037 00:48:33,370 --> 00:48:34,880 Grays, og så videre. 1038 00:48:34,880 --> 00:48:36,300 >> Så igen, nye mærker. 1039 00:48:36,300 --> 00:48:39,820 Har ikke set disse før, nye attributter, men temmelig tilgængelige. 1040 00:48:39,820 --> 00:48:42,360 Når du ser et eksempel, du kan slags af låne denne idé og gøre en dråbe 1041 00:48:42,360 --> 00:48:43,820 down menuen for de fleste noget. 1042 00:48:43,820 --> 00:48:46,350 Men hvad er centrale er, at hver af disse ting har navne. 1043 00:48:46,350 --> 00:48:49,720 Og i bunden af ​​denne formular, er der en submit knap, hvis etiket, 1044 00:48:49,720 --> 00:48:51,510 eller værdien, er register. 1045 00:48:51,510 --> 00:48:52,670 >> Så lad os gå til denne side. 1046 00:48:52,670 --> 00:48:55,050 Lad mig gå tilbage til katalogliste. 1047 00:48:55,050 --> 00:48:59,410 Lad mig gå ind froshims, og gå til froshim0.php. 1048 00:48:59,410 --> 00:49:01,150 Så det er hæslig, at være fair. 1049 00:49:01,150 --> 00:49:03,950 Så jeg kunne helt sikkert stilisere dette med nogle CSS, kunne jeg lave nogle 1050 00:49:03,950 --> 00:49:06,890 grafik, måske tilføje nogle farver, og gøre dette smukkere. 1051 00:49:06,890 --> 00:49:10,530 Men funktionelt, ville jeg hævde, at dette er faktisk temmelig færdig. 1052 00:49:10,530 --> 00:49:15,190 >> Desværre, da jeg udfylde denne, David, kaptajn, Mand, vi vælger, 1053 00:49:15,190 --> 00:49:20,510 lad os sige Matthews, Register, alt, hvad der sker, er dette. 1054 00:49:20,510 --> 00:49:21,910 Men bemærk et par grillbarer. 1055 00:49:21,910 --> 00:49:27,130 One, hvad fil returnerede dem resultater, tilsyneladende? 1056 00:49:27,130 --> 00:49:29,470 Så det er faktisk register0.php. 1057 00:49:29,470 --> 00:49:34,570 Så det faktum, at vi så, at handling værdi for et øjeblik siden for register0, dette 1058 00:49:34,570 --> 00:49:37,500 bekræfter, at vi faktisk endte op på det pågældende fil. 1059 00:49:37,500 --> 00:49:39,040 >> Nu er det bare grimme tekst. 1060 00:49:39,040 --> 00:49:42,810 Men bemærk, at denne tekst er kommer fra lokale vært, 1061 00:49:42,810 --> 00:49:44,170 som er fra apparatet. 1062 00:49:44,170 --> 00:49:46,350 Tænk på apparatet nu som bare en web-server, der kunne være i 1063 00:49:46,350 --> 00:49:46,910 Science Center. 1064 00:49:46,910 --> 00:49:48,060 Det kunne være på selve nettet. 1065 00:49:48,060 --> 00:49:49,850 Så det er offentligt tilgængelige. 1066 00:49:49,850 --> 00:49:55,480 >> Så klart, der er nogle måde at videregive formularfelt input til en server 1067 00:49:55,480 --> 00:49:56,840 så det kan gøre noget med dem. 1068 00:49:56,840 --> 00:49:59,020 Desværre, register0 er temmelig dumt. 1069 00:49:59,020 --> 00:50:01,870 Alt det gør, er udskrive et array der ligner dette. 1070 00:50:01,870 --> 00:50:04,790 Og det er ikke et array i forstand, at vi ved det. 1071 00:50:04,790 --> 00:50:08,760 Slår at PHP, og en masse sprog, har ikke kun numerisk 1072 00:50:08,760 --> 00:50:12,350 indekserede arrays hvis første indeks er nul, så en, så to, så prik, 1073 00:50:12,350 --> 00:50:13,780 dot, dot, n minus 1. 1074 00:50:13,780 --> 00:50:16,400 >> Dette er, hvad der kaldes en associative array. 1075 00:50:16,400 --> 00:50:21,150 Et associativt array er en, hvor du kan gemme vigtige værdipar hvor 1076 00:50:21,150 --> 00:50:23,160 nøglen er ikke nødvendigvis et nummer. 1077 00:50:23,160 --> 00:50:25,580 Det kunne faktisk være en streng, et ord. 1078 00:50:25,580 --> 00:50:28,230 Og så dette kan gennemføres, under hætten, viser det sig, 1079 00:50:28,230 --> 00:50:31,896 ved hjælp af en datastruktur kendt som en? 1080 00:50:31,896 --> 00:50:33,600 Tænkte noget dramatisk var ved at ske - 1081 00:50:33,600 --> 00:50:34,840 hash tabellen. 1082 00:50:34,840 --> 00:50:38,955 >> Så en hash tabel, tilbagekaldelse, de af jer, hvem der gjorde det for P sæt 6 eller endda huske 1083 00:50:38,955 --> 00:50:44,110 det, i hvert fald selv hvis du gjorde en prøve, en hash tabel, i vores forbrug, blev brugt til at 1084 00:50:44,110 --> 00:50:45,090 bare gemme ord. 1085 00:50:45,090 --> 00:50:47,980 Men virkelig, var du opbevare nøgler og værdier. 1086 00:50:47,980 --> 00:50:51,940 Hvis du implementeret en hash tabel for P sæt 6 ordbog, tasterne var 1087 00:50:51,940 --> 00:50:56,890 ordene selv, og værdierne var faktisk sandt eller falsk. 1088 00:50:56,890 --> 00:51:00,190 Ja, her, eller implicit, nej, ikke her. 1089 00:51:00,190 --> 00:51:02,140 >> Nå, vi kan generalisere denne idé. 1090 00:51:02,140 --> 00:51:06,230 Og vi kunne bruge en meget lignende data struktur til at gemme ikke strengen 1091 00:51:06,230 --> 00:51:10,180 selv alene i din hash tabel, men antage, at i hver eneste af dine hash 1092 00:51:10,180 --> 00:51:11,130 tabellens noder. 1093 00:51:11,130 --> 00:51:14,210 Og du kan endda gøre dette i et forsøg snarere end blot have en bool. 1094 00:51:14,210 --> 00:51:15,350 Du kunne have noget andet. 1095 00:51:15,350 --> 00:51:19,590 Hvad hvis nøglen ikke var Maxwell, for eksempel, men citat citat slut "navn", eller 1096 00:51:19,590 --> 00:51:22,900 citere citat slut "kaptajn". Og indersiden af dit C datastruktur, du sætter en 1097 00:51:22,900 --> 00:51:26,170 værdi, ikke bare en boolesk, men værdien ligesom citat citat slut "David", eller 1098 00:51:26,170 --> 00:51:28,690 "M" eller "Matthews," og så videre. 1099 00:51:28,690 --> 00:51:33,170 >> Så de samme datastrukturer vi brugte tilsyneladende eksisterer i andre sprog. 1100 00:51:33,170 --> 00:51:37,650 Og jeg ville argumentere de er faktisk meget, meget enklere at få adgang her. 1101 00:51:37,650 --> 00:51:40,300 Lad os i virkeligheden tage et kig nu på nogle sådanne syntaks. 1102 00:51:40,300 --> 00:51:43,120 >> Jeg har tænkt mig at gå ind i en PHP bibliotek. 1103 00:51:43,120 --> 00:51:48,390 Og jeg har tænkt mig at åbne op for en bedre version af hello-0 fra før. 1104 00:51:48,390 --> 00:51:50,270 Bemærk, at alt, hvad jeg gjorde, var tilføje nogle bemærkninger. 1105 00:51:50,270 --> 00:51:52,530 Så vi kan slippe af med den distraktion. 1106 00:51:52,530 --> 00:51:57,610 >> Og dette program gør faktisk udskriver hej fordi jeg har angivet mellem 1107 00:51:57,610 --> 00:52:01,420 tags, som jeg ønsker at udføre denne kode. 1108 00:52:01,420 --> 00:52:03,380 Nu vil vi se på et øjeblik hvorfor det er nyttigt. 1109 00:52:03,380 --> 00:52:05,630 Men lad os åbne en anden eksempel her. 1110 00:52:05,630 --> 00:52:10,430 Lad mig gå videre og åbne op sige, gedit betingelser én. 1111 00:52:10,430 --> 00:52:12,970 >> Dette er langt tilbage i tiden nu. 1112 00:52:12,970 --> 00:52:16,320 Men uger siden, tror jeg, i uge et eller uge to, vi havde en kaldes eksempel 1113 00:52:16,320 --> 00:52:18,470 conditions1.c. 1114 00:52:18,470 --> 00:52:22,050 Og jeg besluttede at reimplement det i PHP, bare at slags understrege, at 1115 00:52:22,050 --> 00:52:26,500 PHP, syntaktisk, er næsten identisk til C. Dette er ikke et stort spring 1116 00:52:26,500 --> 00:52:27,840 fra sidste uge til dette. 1117 00:52:27,840 --> 00:52:31,230 >> Bemærk i toppen af ​​dette program, som begynder, som før, med nogle 1118 00:52:31,230 --> 00:52:34,260 kommentarer, som jeg vil slippe som en distraktion. 1119 00:52:34,260 --> 00:52:37,410 Bemærk, at jeg er i PHP tilstanden i denne fil. 1120 00:52:37,410 --> 00:52:40,160 Så denne kode, vil vi se, vil blive udført. 1121 00:52:40,160 --> 00:52:42,670 Bemærk, at der er readline, som formentlig er den 1122 00:52:42,670 --> 00:52:46,230 analog i PHP for getString. 1123 00:52:46,230 --> 00:52:47,390 Bemærk, det er lidt anderledes. 1124 00:52:47,390 --> 00:52:51,410 Du faktisk angive en prompt til funktion kaldet læst linje, og det er 1125 00:52:51,410 --> 00:52:52,180 hvad brugeren ser. 1126 00:52:52,180 --> 00:52:53,520 Så du behøver ikke at printf manuelt. 1127 00:52:53,520 --> 00:52:54,860 Men det er ikke en big deal. 1128 00:52:54,860 --> 00:52:59,150 Jeg har tænkt mig at gemme, indersiden af ​​$ n, den returnere værdien af ​​dette, så uanset 1129 00:52:59,150 --> 00:53:00,490 bruger typer i er deres int. 1130 00:53:00,490 --> 00:53:01,660 Og her er en anden nysgerrighed. 1131 00:53:01,660 --> 00:53:05,810 Det viser sig, i PHP, enhver variabel skal bare præfiks 1132 00:53:05,810 --> 00:53:06,970 med et dollartegn. 1133 00:53:06,970 --> 00:53:08,110 Det er lidt irriterende. 1134 00:53:08,110 --> 00:53:10,870 Men mærke, hvad jeg ikke har gjort i PHP. 1135 00:53:10,870 --> 00:53:13,980 Hvad mangler fra venstrekanten side af lighedstegnet? 1136 00:53:13,980 --> 00:53:15,430 >> Ingen omtale af typen. 1137 00:53:15,430 --> 00:53:19,400 Så dette er forskelligt fra C. For bedre eller værre, er PHP et løst 1138 00:53:19,400 --> 00:53:20,550 skrevet sprog. 1139 00:53:20,550 --> 00:53:22,010 Det har numre. 1140 00:53:22,010 --> 00:53:23,240 Det har strenge. 1141 00:53:23,240 --> 00:53:24,015 Det har Booleans. 1142 00:53:24,015 --> 00:53:26,220 Og det har et par andre datatyper. 1143 00:53:26,220 --> 00:53:30,570 Men du, programmør, som regel ikke behøver at bekymre sig om dem. 1144 00:53:30,570 --> 00:53:34,010 Opadrettede af dette er, at det gør det lidt lettere at programmere. 1145 00:53:34,010 --> 00:53:35,380 Du kan tænke lidt mindre. 1146 00:53:35,380 --> 00:53:39,840 Ulempen er det også åbner dig op til potentielle fejl, hvis du ved et uheld 1147 00:53:39,840 --> 00:53:43,080 behandle en række som en streng, en streng som et antal, potentielt, men selv 1148 00:53:43,080 --> 00:53:46,150 derefter, PHP, og en masse af sprog, er temmelig tolerant. 1149 00:53:46,150 --> 00:53:49,050 De vil bruge det, der hedder implicit støbning. 1150 00:53:49,050 --> 00:53:55,220 Og hvis du forsøger at bruge n i forbindelse af en numerisk situation, vil det 1151 00:53:55,220 --> 00:53:58,040 konvertere hvad her kommer til at være en streng, fordi hvis brugeren skriver 1152 00:53:58,040 --> 00:54:01,570 noget, og du får det resultat, som med readline, få eller streng, 1153 00:54:01,570 --> 00:54:02,910 der kommer til at returnere en streng. 1154 00:54:02,910 --> 00:54:07,360 >> Men varsel, et par linjer senere, jeg kontrollere, om n er større end nul. 1155 00:54:07,360 --> 00:54:13,370 Så PHP vil implicit kaste min "Streng" 123, eller hvad brugeren 1156 00:54:13,370 --> 00:54:14,860 typer i, ind i en int. 1157 00:54:14,860 --> 00:54:18,730 Så kort sagt, ting bare virker meget mere intuitivt. 1158 00:54:18,730 --> 00:54:23,410 Så vi nu begynde at slappe et par af de ting, som vi har gjort i fortiden. 1159 00:54:23,410 --> 00:54:24,780 >> En masse af disse ting er det samme, selv om. 1160 00:54:24,780 --> 00:54:26,340 Har stadig lig ligemænd. 1161 00:54:26,340 --> 00:54:30,350 Som en sidebemærkning PHP har også lig lig lig, men mere om det, måske i 1162 00:54:30,350 --> 00:54:30,850 fremtiden. 1163 00:54:30,850 --> 00:54:31,150 Det var en. 1164 00:54:31,150 --> 00:54:35,660 Typo men to lighedstegn betyder det samme ting som før, til sammenligning. 1165 00:54:35,660 --> 00:54:37,060 printf betyder det samme som før. 1166 00:54:37,060 --> 00:54:39,160 Backslash n betyder det samme ting som før. 1167 00:54:39,160 --> 00:54:40,390 >> Så hvordan kan jeg køre dette program? 1168 00:54:40,390 --> 00:54:44,400 Nå, som før, hvis jeg gør PHP, conditions1.php, og skriv 1169 00:54:44,400 --> 00:54:46,560 et tal som 123. 1170 00:54:46,560 --> 00:54:47,720 Det er et positivt tal. 1171 00:54:47,720 --> 00:54:49,510 Hvis jeg skriver i 0, jeg vælger 0. 1172 00:54:49,510 --> 00:54:53,700 Og hvis jeg skriver i negativt 123, får jeg tilbage et negativt tal, som kun 1173 00:54:53,700 --> 00:54:59,050 at sige, syntaktisk, PHP er super, super lignende. 1174 00:54:59,050 --> 00:55:03,250 >> Så hvorfor er det nu nyttigt i en web-sammenhæng? 1175 00:55:03,250 --> 00:55:06,710 Nå, lad os gå tilbage til dette froshims eksempel, som så ud, 1176 00:55:06,710 --> 00:55:08,600 igen, ligesom det her. 1177 00:55:08,600 --> 00:55:11,580 Og lad os faktisk trække op websiden igen, som lignede dette. 1178 00:55:11,580 --> 00:55:14,930 Hvad kan vi gøre med det data, der er indsendt? 1179 00:55:14,930 --> 00:55:18,770 >> Nå, lad mig åbne op for en nyere version af denne. 1180 00:55:18,770 --> 00:55:20,920 Og du vil se, at problemet sæt specifikation fører dig 1181 00:55:20,920 --> 00:55:22,850 gennem et par af disse. 1182 00:55:22,850 --> 00:55:29,610 Snarere end at starte med nul, lad os se på froshims3, 1183 00:55:29,610 --> 00:55:31,410 hvilket gør en smule mere. 1184 00:55:31,410 --> 00:55:34,780 >> Bemærk først, faktisk, lad os åbne op, hvad 0 var, så du kan se 1185 00:55:34,780 --> 00:55:37,170 hvad register 0 var. 1186 00:55:37,170 --> 00:55:40,040 Læg mærke til hvad register 0 gjorde. 1187 00:55:40,040 --> 00:55:41,730 En, jeg har kommentarer øverst. 1188 00:55:41,730 --> 00:55:43,900 Slet dem og kun fokusere på dette. 1189 00:55:43,900 --> 00:55:48,730 De fleste af indholdet af register0.php er, naturligvis, hvilket sprog? 1190 00:55:48,730 --> 00:55:49,980 Bare rå PHP. 1191 00:55:49,980 --> 00:55:53,430 >> Så varsel, er denne fil ikke starte med i øjeblikket, åbneparentes, 1192 00:55:53,430 --> 00:55:54,970 spørgsmålstegn, PHP. 1193 00:55:54,970 --> 00:55:59,800 PHP tillader dig at blande PHP-kode med HTML-tags. 1194 00:55:59,800 --> 00:56:04,130 Men jeg har gjort det her inde på siden her. 1195 00:56:04,130 --> 00:56:08,180 >> Nu igen, ville du kun kender det fra have kigget på manualen. print_r, 1196 00:56:08,180 --> 00:56:13,410 det viser sig, er print_recursive. _recursive Og dette er blot en handy 1197 00:56:13,410 --> 00:56:16,780 nyttefunktion, der bare udskriver, rekursivt, uanset hvad du aflevere det. 1198 00:56:16,780 --> 00:56:18,760 Hvis du afleverer den et array, det vil udskrive et array. 1199 00:56:18,760 --> 00:56:20,180 Hvis du afleverer den et nummer, det vil udskrive et nummer. 1200 00:56:20,180 --> 00:56:21,570 Aflevere det en streng, det vil udskrive en streng. 1201 00:56:21,570 --> 00:56:24,500 Hvis du afleverer den en hash tabel, vil udskrive en hash tabel. 1202 00:56:24,500 --> 00:56:26,730 Du behøver ikke at skrive alle af denne kode selv. 1203 00:56:26,730 --> 00:56:29,490 >> Læg nu mærke til, at jeg kommer ind PHP mode herovre. 1204 00:56:29,490 --> 00:56:32,070 Jeg afslutter PHP mode herovre. 1205 00:56:32,070 --> 00:56:35,950 Så når webserveren læser denne fil top til bund, venstre mod højre, fordi 1206 00:56:35,950 --> 00:56:40,750 Det ender i et filnavn kaldes. php, hvad er ikke inde i PHP tags er 1207 00:56:40,750 --> 00:56:42,820 bare at være spytte ud ligesom rå HTML. 1208 00:56:42,820 --> 00:56:43,630 No big deal. 1209 00:56:43,630 --> 00:56:49,280 Men så snart webserveren meddelelser dette, er det kommer til at sige, jeg ikke skulle 1210 00:56:49,280 --> 00:56:51,850 spytte ud, bogstaveligt talt, print_r af post. 1211 00:56:51,850 --> 00:56:54,910 Jeg skulle udføre følgende linje kode. 1212 00:56:54,910 --> 00:56:59,850 >> Så det sidste spørgsmål, så på denne fil er, ja, hvad dælen er det? 1213 00:56:59,850 --> 00:57:00,530 Tag et gæt. 1214 00:57:00,530 --> 00:57:04,230 Hvad er $ _POST, sandsynligvis? 1215 00:57:04,230 --> 00:57:07,070 >> PUBLIKUM: [uhørligt] 1216 00:57:07,070 --> 00:57:08,830 >> SPEAKER 1: Yeah, de udstationerede data. 1217 00:57:08,830 --> 00:57:11,350 Recall, lad os rulle tilbage i tid til bare et øjeblik. 1218 00:57:11,350 --> 00:57:13,165 froshim0 igen, lignede dette. 1219 00:57:13,165 --> 00:57:15,640 En super flertal af dette er blot HTML. 1220 00:57:15,640 --> 00:57:18,410 Igen, nogle mærker, du ikke har set endnu, eller med hvilke 1221 00:57:18,410 --> 00:57:19,360 du allerede kender. 1222 00:57:19,360 --> 00:57:21,990 Men det interessante ting var dette. 1223 00:57:21,990 --> 00:57:27,270 Denne ene linje er, hvad der virkelig forbinder det til vores register0.php fil. 1224 00:57:27,270 --> 00:57:29,200 Jeg indsender via metoden indlæg. 1225 00:57:29,200 --> 00:57:33,130 Og det betyder, at de parametre, brugeren typer i ikke 1226 00:57:33,130 --> 00:57:35,150 kommer til at ende hvor. 1227 00:57:35,150 --> 00:57:36,175 >> De kommer ikke til at dukke op i webadressen. 1228 00:57:36,175 --> 00:57:39,020 De er stadig kommer til at blive sendt fra klient, fra browseren, til 1229 00:57:39,020 --> 00:57:42,080 server, men blot via et andet mekanisme, som vi vil give afkald på vores hænder 1230 00:57:42,080 --> 00:57:44,330 på i dag, men det er ikke i webadressen. 1231 00:57:44,330 --> 00:57:47,630 Men bemærk forholdet nu med indlæg, der efter sædvane er 1232 00:57:47,630 --> 00:57:49,160 små bogstaver her. 1233 00:57:49,160 --> 00:57:54,090 >> Men hvis jeg åbner register0.php, Jeg åbenbart udskriver dette. 1234 00:57:54,090 --> 00:57:56,450 Så dette er lidt af en underlig navnekonvention. 1235 00:57:56,450 --> 00:58:01,430 Men hvad er rart i PHP er, at når bruger PHP i en web-sammenhæng ikke på et 1236 00:58:01,430 --> 00:58:04,480 kommandolinje som jeg gjorde for et øjeblik siden, når du rent faktisk bruger det i en web 1237 00:58:04,480 --> 00:58:10,580 side, i en vhost mappe som vi er, automatisk vil PHP udfylde dette 1238 00:58:10,580 --> 00:58:15,560 ting, som er en associativt array, så at sige, en hash tabel med 1239 00:58:15,560 --> 00:58:17,290 alt, hvad brugeren har skrevet i. 1240 00:58:17,290 --> 00:58:22,000 >> Kort sagt, $ _POST i alle hætter er et global variabel, PHP bare 1241 00:58:22,000 --> 00:58:25,050 magisk skaber for dig, når bruger PHP i en web-sammenhæng. 1242 00:58:25,050 --> 00:58:29,160 Og det lægger inde i det hele navne på parametre i form at 1243 00:58:29,160 --> 00:58:33,200 blev sendt til denne fil, og alle de værdier, som brugeren har indtastet i. 1244 00:58:33,200 --> 00:58:37,790 Så det hænder for dig, hvad brugeren skrevet i denne formular. 1245 00:58:37,790 --> 00:58:42,210 >> Så før vi fik virkelig dumt output for bare at se dette, fordi alt, hvad jeg gjorde 1246 00:58:42,210 --> 00:58:44,400 blev rekursivt udskrive denne array. 1247 00:58:44,400 --> 00:58:46,060 Nøglen er navnet, er værdien David. 1248 00:58:46,060 --> 00:58:46,980 Det centrale er kaptajn. 1249 00:58:46,980 --> 00:58:47,970 Værdien er tændt. 1250 00:58:47,970 --> 00:58:52,300 Og den dobbelte pil og vinklen beslag der, det er bare vilkårlig. 1251 00:58:52,300 --> 00:58:53,270 Dette er ikke kode. 1252 00:58:53,270 --> 00:58:57,690 Dette er blot PHP måde at vise dig hvad værdien af ​​en eller anden nøgle er. 1253 00:58:57,690 --> 00:59:03,000 >> Men lad mig nu foreslå, at der i froshIMs3, det er næsten identisk 1254 00:59:03,000 --> 00:59:04,950 bortset fra at det har gjort til denne fil. 1255 00:59:04,950 --> 00:59:08,570 Og igen, vi kommer til at slags bare blik på dette, bare for at se nogle 1256 00:59:08,570 --> 00:59:12,040 syntaks, men varsel hvad denne fil gør. 1257 00:59:12,040 --> 00:59:14,930 Tage et gæt blot baseret på de strækninger i kode, der sandsynligvis ligne 1258 00:59:14,930 --> 00:59:17,410 Græsk, til en vis grad, tilsyneladende gør. 1259 00:59:17,410 --> 00:59:20,580 1260 00:59:20,580 --> 00:59:23,110 >> Denne fil er en eller anden måde relateret til mail, e-mail. 1261 00:59:23,110 --> 00:59:24,770 Så hvad er dette program gør? 1262 00:59:24,770 --> 00:59:28,740 I denne version jeg hvis blev faktisk udfylde denne formular - og lad mig gå til 1263 00:59:28,740 --> 00:59:30,760 froshIMs3, ikke froshIMs0 - 1264 00:59:30,760 --> 00:59:33,280 1265 00:59:33,280 --> 00:59:34,540 formen ser ens. 1266 00:59:34,540 --> 00:59:37,980 David, kaptajn, male, kollegiet, Matthews. 1267 00:59:37,980 --> 00:59:42,980 Men hvis jeg forelægge dette, denne fil er vil gå til register3.php. 1268 00:59:42,980 --> 00:59:46,330 >> Og jeg hævder, ved at kigge på det er kildekode, går det til 1269 00:59:46,330 --> 00:59:47,650 eller anden måde involverer email. 1270 00:59:47,650 --> 00:59:49,620 Lad mig gå videre og åbne denne op i et større vindue, så vi 1271 00:59:49,620 --> 00:59:51,030 kan se det mere rent. 1272 00:59:51,030 --> 00:59:57,220 Vi arbejder i vhosts, lokal vært, offentligheden, froshims. 1273 00:59:57,220 --> 00:59:58,680 Jeg har tænkt mig at åbne op for en anden program, lige så vi 1274 00:59:58,680 --> 01:00:00,160 kan se mere på én gang. 1275 01:00:00,160 --> 01:00:03,100 >> Så nu her bemærke et par ting. 1276 01:00:03,100 --> 01:00:06,530 På toppen af ​​filen er åben beslag, spørgsmålstegn, PHP. 1277 01:00:06,530 --> 01:00:08,920 Så er der en masse kommentarer, som vi kan ignorere, er 1278 01:00:08,920 --> 01:00:10,450 uinteressant for nu. 1279 01:00:10,450 --> 01:00:11,300 >> Nu er der det. 1280 01:00:11,300 --> 01:00:14,200 Det viser sig PHP har en masse kode kaldet kræve. 1281 01:00:14,200 --> 01:00:19,110 Det er meget ens i ånd til C'er omfatte, hash omfatter, som 1282 01:00:19,110 --> 01:00:21,980 væsentlige griber indholdet af nogle af anden fil og bare plops dem her, 1283 01:00:21,980 --> 01:00:22,930 så du kan bruge dem. 1284 01:00:22,930 --> 01:00:27,060 I dette tilfælde skal apparatet har præinstalleret, et bibliotek, fri og 1285 01:00:27,060 --> 01:00:29,900 open source bibliotek kaldet PHP mailer, at alle kan 1286 01:00:29,900 --> 01:00:30,770 downloader fra internettet. 1287 01:00:30,770 --> 01:00:32,000 Vi gjorde det bare for dig. 1288 01:00:32,000 --> 01:00:36,130 Og det betyder, at jeg nu har email funktionalitet til min rådighed. 1289 01:00:36,130 --> 01:00:38,170 >> Nu bemærke et par ting. 1290 01:00:38,170 --> 01:00:41,120 Jeg har tænkt mig at validere formularen indsendelse. 1291 01:00:41,120 --> 01:00:45,980 Slår ud PHP, en, har udråbstegn point for ikke operatøren, ligesom 1292 01:00:45,980 --> 01:00:49,810 C. Men PHP har også en funktion kaldet tom. 1293 01:00:49,810 --> 01:00:53,920 >> Tøm bare returnerer true hvis værdien af de ting du aflevere det 1294 01:00:53,920 --> 01:00:57,190 parentes er tom, ligesom brugeren ikke skrive noget i. 1295 01:00:57,190 --> 01:01:02,680 Så dette er at sige, og bemærk syntaks, minder meget om C, hvis 1296 01:01:02,680 --> 01:01:07,730 Navnet nøgle, så navnet felt i formularen, der blev forelagt via post, 1297 01:01:07,730 --> 01:01:13,010 brugeren, er ikke at tømme, samt deres køn er ikke tom i den form, 1298 01:01:13,010 --> 01:01:15,980 godt, og deres kollegieværelse er ikke tom - 1299 01:01:15,980 --> 01:01:19,980 men jeg bemærker ligeglad kaptajn, så hvad skal vi gøre? 1300 01:01:19,980 --> 01:01:21,990 >> Jeg har tænkt mig at udføre denne linje kode. 1301 01:01:21,990 --> 01:01:24,100 Og du kan tænke på den slags Ligesom malloc, men det er en lidt 1302 01:01:24,100 --> 01:01:24,800 avanceret end det. 1303 01:01:24,800 --> 01:01:29,200 Men for nu det giver mig en særlig struct af typen PHP mailer. 1304 01:01:29,200 --> 01:01:31,410 Men ignorere nøgleordet nyt for i dag. 1305 01:01:31,410 --> 01:01:35,670 >> Nu vil jeg kalde en funktion kaldet IsSMTP, som siger, at bruge SMTP. 1306 01:01:35,670 --> 01:01:39,380 Dette er port 25, ligesom videoen sidste uge, da de ting kastede 1307 01:01:39,380 --> 01:01:40,710 e-mails i firewallen. 1308 01:01:40,710 --> 01:01:42,440 Port 25 er SMTP. 1309 01:01:42,440 --> 01:01:44,410 SMTP betyder bruge mailserveren. 1310 01:01:44,410 --> 01:01:46,215 Hvilken en kan vi bruge Harvards SMTP.fas.harvard.edu. 1311 01:01:46,215 --> 01:01:48,850 1312 01:01:48,850 --> 01:01:51,590 >> Vi kan indstille fra adresse at være John Harvard. 1313 01:01:51,590 --> 01:01:55,090 Hvis jeg rulle ned yderligere, kan jeg indstille modtageradressen, bare 1314 01:01:55,090 --> 01:01:56,840 vilkårligt at være John Harvard er så godt. 1315 01:01:56,840 --> 01:01:59,210 Så han kommer til at blive e-maile sig selv. 1316 01:01:59,210 --> 01:02:01,600 >> Nu kan jeg sætte emnet at være registreringen. 1317 01:02:01,600 --> 01:02:03,700 Og jeg kan sætte kroppen af e-mail som følger. 1318 01:02:03,700 --> 01:02:06,500 Denne linje ser lidt mere kryptisk, men det er bare fordi der er en masse 1319 01:02:06,500 --> 01:02:07,450 af information i den. 1320 01:02:07,450 --> 01:02:10,670 Én, der er en prik operatør. 1321 01:02:10,670 --> 01:02:14,510 Nogen må vide allerede, hvad dot operatør gør. 1322 01:02:14,510 --> 01:02:15,436 Det er sammenkædning. 1323 01:02:15,436 --> 01:02:19,240 Så hvis du ønsker at tage en streng i PHP, og tilføje det, eller tilføjes i begyndelsen det, for at 1324 01:02:19,240 --> 01:02:23,500 anden streng i PHP, gudskelov dig behøver ikke at bruge strcopy og malloc, 1325 01:02:23,500 --> 01:02:25,490 og alt dette længere. 1326 01:02:25,490 --> 01:02:28,765 >> Hvis du ønsker at sammenkæde to strenge, Hvem bekymrer sig om hukommelsen. 1327 01:02:28,765 --> 01:02:30,850 Lad PHP tal, ud for dig. 1328 01:02:30,850 --> 01:02:35,200 Hvad PHP vil gøre med dot operatør her er bare gøre en stor sætning ud 1329 01:02:35,200 --> 01:02:37,900 for denne linje, denne linje denne linje, denne linje. 1330 01:02:37,900 --> 01:02:40,460 Og nu varsel, går det at tilslutte værdier. 1331 01:02:40,460 --> 01:02:43,680 Så e-mail, John Harvard kommer at modtage, er bogstaveligt talt kommer til at sige 1332 01:02:43,680 --> 01:02:49,450 navn, colon, noget, snarere, så vi lukke streng og sammenkæde på 1333 01:02:49,450 --> 01:02:52,220 hvad brugeren har indtastet i, så en ny linje. 1334 01:02:52,220 --> 01:02:54,570 >> Så på den næste linje af John Harvard email, det vil sige 1335 01:02:54,570 --> 01:02:55,910 Kaptajn, On or Nothing. 1336 01:02:55,910 --> 01:02:57,810 Det kommer til at sige køn, mand eller kvinde. 1337 01:02:57,810 --> 01:02:59,680 Dorm bliver Matthews i mit tilfælde. 1338 01:02:59,680 --> 01:03:03,400 Og så mærke til velkendte semikolon til allersidst. 1339 01:03:03,400 --> 01:03:07,830 Og så hernede, varsel, noget kryptisk stadig, men igen, efter en 1340 01:03:07,830 --> 01:03:12,730 mønster, der vil blive mere fortrolig efter P indstille 7, hvis du sender mail 1341 01:03:12,730 --> 01:03:16,610 returnerer falsk, så gå videre og dø. 1342 01:03:16,610 --> 01:03:19,610 >> Så PHP har en funktion kaldet matrice, der, bogstaveligt talt, bare dræber 1343 01:03:19,610 --> 01:03:22,830 hjemmeside og bare udskriver ud uanset du fortæller det - dens er døende 1344 01:03:22,830 --> 01:03:24,280 ord, så at sige. 1345 01:03:24,280 --> 01:03:28,310 Og at i tilfælde, udskrives ud af, hvad fejlen info er for 1346 01:03:28,310 --> 01:03:29,860 uanset hvad der skete til at gå galt. 1347 01:03:29,860 --> 01:03:34,490 Så lang historie kort her, hvad vi har er et eksempel, hvor når brugeren 1348 01:03:34,490 --> 01:03:39,150 sender formularen, froshim0, froshims3.php, det går til 1349 01:03:39,150 --> 01:03:40,760 register3.php. 1350 01:03:40,760 --> 01:03:45,290 Men register3.php fortsætter derefter at udføre alle disse linjer. 1351 01:03:45,290 --> 01:03:46,620 >> Så der er et par take aways her. 1352 01:03:46,620 --> 01:03:50,380 En, er det tilsyneladende temmelig let, programmatisk, at sende e-mails, 1353 01:03:50,380 --> 01:03:50,830 hvilket er godt. 1354 01:03:50,830 --> 01:03:53,500 Når brugere tilmelder dit websted, i dette tilfælde når de registrere din 1355 01:03:53,500 --> 01:03:56,220 sport, kan du e-mail freshman Proctor, eller John 1356 01:03:56,220 --> 01:03:57,650 Harvard, i dette tilfælde. 1357 01:03:57,650 --> 01:04:01,630 >> Men det betyder også, du kan gøre hvad? 1358 01:04:01,630 --> 01:04:03,970 Sende e-mails fra nogen til nogen. 1359 01:04:03,970 --> 01:04:05,430 Og det er meget sandt. 1360 01:04:05,430 --> 01:04:08,580 Dette er ikke så let gjort, hvis du er vant til at bruge Gmail. 1361 01:04:08,580 --> 01:04:11,310 Men hvis du nogensinde har brugt Eudora eller Outlook, kan du stort set fortælle en 1362 01:04:11,310 --> 01:04:13,720 mail-server, at du er nogen, du ønsker. 1363 01:04:13,720 --> 01:04:16,450 Og det er her, jeg har brug for at sætte på den hat og sige, gør ikke dette. 1364 01:04:16,450 --> 01:04:21,140 Men det er Testamente til, hvor let det er at udføre phishing, og 1365 01:04:21,140 --> 01:04:24,310 sende anonyme e-mails, og spam, mere generelt. 1366 01:04:24,310 --> 01:04:27,330 Og det virkelig kan koges ned til faktum, at alt hvad du behøver, er nogle 1367 01:04:27,330 --> 01:04:28,500 programmeringsmæssig adgang. 1368 01:04:28,500 --> 01:04:31,940 >> Som en sidebemærkning min nærmeste møde med annoncen bord, min egen freshman år 1369 01:04:31,940 --> 01:04:34,320 var, da jeg opdagede denne cool trick, der, wow, kan du 1370 01:04:34,320 --> 01:04:36,850 sende e-mails fra nogen. 1371 01:04:36,850 --> 01:04:39,770 Og så vi havde nogle dumme argument, bogstaveligt talt, i Matthews, 1372 01:04:39,770 --> 01:04:40,790 blandt mine Proctor gruppe. 1373 01:04:40,790 --> 01:04:42,470 Jeg kan ikke engang huske hvad spørgsmålet var. 1374 01:04:42,470 --> 01:04:44,970 Men jeg ville prøve at sætte en ende på denne dumme debat. 1375 01:04:44,970 --> 01:04:48,580 >> Så jeg besluttede jeg vil bare sende en e-mail min Proctor gruppe, for at være foregiver 1376 01:04:48,580 --> 01:04:52,000 den anden fyr, med hvis udtalelse jeg uenige, og få ham affinde til 1377 01:04:52,000 --> 01:04:54,680 uanset min mening var denne debat. 1378 01:04:54,680 --> 01:04:59,320 Og så jeg smedet denne e-mail ved hjælp af en Teknikken ligner i ånd til dette. 1379 01:04:59,320 --> 01:05:01,256 Men det var faktisk nemmere på det tidspunkt. 1380 01:05:01,256 --> 01:05:02,435 Hit send. 1381 01:05:02,435 --> 01:05:06,660 Han var ikke glad for, og heller ikke ville har været ad brættet. 1382 01:05:06,660 --> 01:05:10,280 >> Og jeg var meget hurtigt fanget inden sekunder fordi, som du ved, jeg tilmelder 1383 01:05:10,280 --> 01:05:11,420 mine e-mails på en bestemt måde. 1384 01:05:11,420 --> 01:05:14,200 Og selvom jeg gør det manuelt, i store del, 15 år senere, fordi jeg var 1385 01:05:14,200 --> 01:05:15,080 traumatiseret af det. 1386 01:05:15,080 --> 01:05:16,960 Jeg har ikke en signatur på min e-mail nu. 1387 01:05:16,960 --> 01:05:20,440 Men i 1995, jeg havde bare en SIG, en signatur i min e-mail. 1388 01:05:20,440 --> 01:05:24,630 Så var der denne note siger, Dear Proctor gruppe jeg affinde min mening 1389 01:05:24,630 --> 01:05:31,240 og er enig med David underskrev det, og så ny linje, ny linje, DJM. 1390 01:05:31,240 --> 01:05:36,220 >> Så du skal ikke gøre det, eller i almindelighed træffe Fordelen ved denne teknik. 1391 01:05:36,220 --> 01:05:39,950 Men når de foretager en hjemmeside, som for din endelige projekt, når de foretager en 1392 01:05:39,950 --> 01:05:43,460 website til noget innovativt, dette er, hvordan, pragmatisk, kan du 1393 01:05:43,460 --> 01:05:47,000 løftestang for andre tjenester på internettet ligesom mail og derefter rent faktisk 1394 01:05:47,000 --> 01:05:49,440 sende ting ved hjælp kode. 1395 01:05:49,440 --> 01:05:51,240 >> Så hvordan kan vi forbedre på dette? 1396 01:05:51,240 --> 01:05:54,370 Nå, lad os tage en hurtig rundtur i nogle af de ting, du vil se, 1397 01:05:54,370 --> 01:05:56,170 og derefter tage et kig på et par eksempler. 1398 01:05:56,170 --> 01:05:59,500 Så man, for at berolige, fordi vi flyver gennem PHP. 1399 01:05:59,500 --> 01:06:02,470 Og jeg ved, på et tidspunkt, vil du have til rent faktisk at begynde at skrive dette, hvis du 1400 01:06:02,470 --> 01:06:03,460 ikke allerede har. 1401 01:06:03,460 --> 01:06:06,220 Indse, at den ene, vigtigste er venlig af ud af vinduet med PHP. 1402 01:06:06,220 --> 01:06:09,420 Hvis du ønsker at skrive kode, der får henrettet, skal du bare begynde at skrive det på 1403 01:06:09,420 --> 01:06:13,970 en fil kaldet. php, så længe du har den åbneparentes 1404 01:06:13,970 --> 01:06:15,620 spørgsmålstegn PHP tag. 1405 01:06:15,620 --> 01:06:19,730 >> Men bemærk disse er forhold i php. 1406 01:06:19,730 --> 01:06:22,610 Bemærk, det er nøjagtig den samme slide vi havde i uge et, når vi havde 1407 01:06:22,610 --> 01:06:25,670 forhold i C. Forholdene i PHP er strukturelt og 1408 01:06:25,670 --> 01:06:27,140 syntaktisk det samme. 1409 01:06:27,140 --> 01:06:30,290 Eneste reelle forskel er, hvis du har variabler involveret, har du dem 1410 01:06:30,290 --> 01:06:31,600 dollartegn. 1411 01:06:31,600 --> 01:06:33,970 >> I mellemtiden, boolske udtryk ser ligesom dette for 1412 01:06:33,970 --> 01:06:35,725 eller-ning eller og-ning sammen. 1413 01:06:35,725 --> 01:06:37,780 Skifter ser nøjagtig det samme. 1414 01:06:37,780 --> 01:06:42,180 Hvad er rart i PHP, mens der i C, afbrydere skal være tilfælde på 1415 01:06:42,180 --> 01:06:46,380 primitiver som int'er eller chars, i PHP din sag udsagn kan faktisk være 1416 01:06:46,380 --> 01:06:48,430 På hele strenge, er der faktisk slags nice. 1417 01:06:48,430 --> 01:06:49,480 Sparer dig tid. 1418 01:06:49,480 --> 01:06:50,820 Kunne ikke gøre det i C. 1419 01:06:50,820 --> 01:06:52,880 >> Her er en for-løkke i PHP. 1420 01:06:52,880 --> 01:06:53,740 Det er identiske. 1421 01:06:53,740 --> 01:06:55,400 Kan have nogle dollartegn for disse variabler. 1422 01:06:55,400 --> 01:06:57,530 Du behøver ikke at nævne, at noget er en int. 1423 01:06:57,530 --> 01:07:00,580 Du skal bare erklære det med et dollartegn og navnet på variablen. 1424 01:07:00,580 --> 01:07:01,430 Men en for-løkke er den samme. 1425 01:07:01,430 --> 01:07:02,760 En while-løkke er den samme. 1426 01:07:02,760 --> 01:07:04,870 En gøre, mens løkken er den samme. 1427 01:07:04,870 --> 01:07:06,170 >> Dette er en lidt anderledes. 1428 01:07:06,170 --> 01:07:12,410 Så med PHP, med et array, kan du statisk erklære en matrix, som i C, 1429 01:07:12,410 --> 01:07:14,420 men du bruger firkantede parenteser. 1430 01:07:14,420 --> 01:07:17,060 I C, ville du bruge krøllede parenteser, hvis du selv vidste det. 1431 01:07:17,060 --> 01:07:20,910 Men det er faktisk meget almindeligt i PHP at erklære et array, i dette tilfælde, 1432 01:07:20,910 --> 01:07:23,640 af tal, så ring og variable tal. 1433 01:07:23,640 --> 01:07:25,300 >> Variable selv ser sådan ud. 1434 01:07:25,300 --> 01:07:28,710 Her er en streng, citerer citat slut "Hej verden. "Man kunne have en backslash n. 1435 01:07:28,710 --> 01:07:30,950 Jeg simpelthen ikke i dette tilfælde. 1436 01:07:30,950 --> 01:07:32,640 >> Nu dette er en interessant konstruktion. 1437 01:07:32,640 --> 01:07:33,700 C ikke har dette. 1438 01:07:33,700 --> 01:07:34,700 Men det er super hjælpsom. 1439 01:07:34,700 --> 01:07:38,160 Og du vil se dette i P sæt 7 spec - en for hver konstruktion. 1440 01:07:38,160 --> 01:07:41,800 Hvis du ønsker at gentage i alle de elementer et array, behøver du ikke 1441 01:07:41,800 --> 01:07:45,500 at behandle $ i og $ n, og + +, og alt det der. 1442 01:07:45,500 --> 01:07:47,640 Du kan bogstaveligt talt sige, i PHP, det - 1443 01:07:47,640 --> 01:07:51,890 for hver numre som nummer, så Jeg antager, at $ tal 1444 01:07:51,890 --> 01:07:53,380 er en matrix af tal. 1445 01:07:53,380 --> 01:07:56,460 Og når jeg siger for hver numre som nummer, vil dette 1446 01:07:56,460 --> 01:08:00,505 automatisk, som min loop henretter, opdatere på hver iteration, værdien 1447 01:08:00,505 --> 01:08:03,260 indersiden af ​​dollartegn nummer - 1448 01:08:03,260 --> 01:08:07,730 igen og igen, og igen gå for mig over denne array. 1449 01:08:07,730 --> 01:08:08,735 Så er det bare sparer os koden. 1450 01:08:08,735 --> 01:08:12,250 Ingen semikolon, ingen + + 's, nej jeg er, ingen n s, det er bare dejligt. 1451 01:08:12,250 --> 01:08:13,700 >> Men PHP har også dette. 1452 01:08:13,700 --> 01:08:14,830 Og det er super stærk. 1453 01:08:14,830 --> 01:08:17,410 Og du vil bruge disse, hænder om, i P indstille 7. 1454 01:08:17,410 --> 01:08:21,990 Og associative array også er erklæret med firkantede parenteser. 1455 01:08:21,990 --> 01:08:23,569 Men bemærk syntaksen nu. 1456 01:08:23,569 --> 01:08:26,880 Det er minder om hvad vi så med print_r et øjeblik siden. 1457 01:08:26,880 --> 01:08:31,810 Hvor mange nøgler, som en lille tilregnelighed check, betyder dette array synes at have. 1458 01:08:31,810 --> 01:08:32,689 >> Så det har to. 1459 01:08:32,689 --> 01:08:33,830 Og jeg kalder det et array. 1460 01:08:33,830 --> 01:08:36,760 Men hvis det hjælper, kan du tænke på dette som hash tabel, eller som 1461 01:08:36,760 --> 01:08:37,930 en associativ array. 1462 01:08:37,930 --> 01:08:39,580 Men det er bare en anden type array. 1463 01:08:39,580 --> 01:08:41,080 Og igen, forskellige sprog have disse. 1464 01:08:41,080 --> 01:08:43,810 Vi vil se noget lignende i JavaScript så godt. 1465 01:08:43,810 --> 01:08:44,609 Der er to nøgler. 1466 01:08:44,609 --> 01:08:48,390 Den ene er citat citat slut, "symbolet," en er citere citat slut "pris." Og disse nøgler 1467 01:08:48,390 --> 01:08:49,250 hver har en værdi. 1468 01:08:49,250 --> 01:08:54,420 I dette tilfælde symbol værdi er FB, for Facebook og pris værdi er 49, 26, 1469 01:08:54,420 --> 01:08:56,899 som blev Facebook-aktien pris som i morges. 1470 01:08:56,899 --> 01:09:00,170 >> Så hvad er nyttigt om en associativ array. 1471 01:09:00,170 --> 01:09:02,620 Jeg kunne have haft en numerisk indekseret array med blot 1472 01:09:02,620 --> 01:09:04,120 enkle firkantede parenteser. 1473 01:09:04,120 --> 01:09:09,380 Og jeg kunne have haft dollartegn citat svarer netop dette. 1474 01:09:09,380 --> 01:09:10,529 Lad mig rent faktisk gør det. 1475 01:09:10,529 --> 01:09:14,796 Antag jeg i stedet blot erklæret dette array som. 1476 01:09:14,796 --> 01:09:17,590 Det er helt i orden, syntaktisk. 1477 01:09:17,590 --> 01:09:20,569 Det betyder ikke mister nogen information, per se. 1478 01:09:20,569 --> 01:09:24,760 Jeg kan stadig se, at symbolet er fb, og at prisen er 49, 26. 1479 01:09:24,760 --> 01:09:28,939 Så hvorfor er associative arrays overbevisende? 1480 01:09:28,939 --> 01:09:30,189 >> PUBLIKUM: Du behøver ikke at huske hvor du lægger ting. 1481 01:09:30,189 --> 01:09:32,050 1482 01:09:32,050 --> 01:09:34,130 >> SPEAKER 1: Præcis, behøver du ikke at huske, hvor du lægger ting. 1483 01:09:34,130 --> 01:09:37,670 Du behøver ikke at vilkårligt huske denne bestand symbol er i konsollen nul, 1484 01:09:37,670 --> 01:09:41,479 og aktiekurserne er i beslag én, hvilket er særlig farligt, hvis du 1485 01:09:41,479 --> 01:09:43,220 ændre tingene, til sidst. 1486 01:09:43,220 --> 01:09:46,399 Det er meget pænere at associere hvad vi vil kalde metadata 1487 01:09:46,399 --> 01:09:48,340 med dine faktiske data. 1488 01:09:48,340 --> 01:09:52,399 Jeg ville argumentere for, at det, vi virkelig pleje om her, er fb og 49, 26.. 1489 01:09:52,399 --> 01:09:57,020 Symbolet og prisen er metadata der beskriver de data, vi 1490 01:09:57,020 --> 01:09:58,180 faktisk bekymrer sig om. 1491 01:09:58,180 --> 01:10:01,910 Men det er bare så meget nemmere at få adgang. 1492 01:10:01,910 --> 01:10:04,090 >> Nu, som en sidebemærkning, hvad der er den pris, vi betaler? 1493 01:10:04,090 --> 01:10:06,600 Vi har gjort dette i CS50 i ugevis. 1494 01:10:06,600 --> 01:10:10,740 Denne funktion skal komme på nogle omkostninger. 1495 01:10:10,740 --> 01:10:11,350 Hukommelse. 1496 01:10:11,350 --> 01:10:13,830 Så du ikke bare lagring af en 32-bit heltal, for eksempel. 1497 01:10:13,830 --> 01:10:17,980 Du opbevaring symbol / 0, sandsynligvis. 1498 01:10:17,980 --> 01:10:19,160 Så du bruger mere hukommelse. 1499 01:10:19,160 --> 01:10:22,540 >> Og hvad er udførelsen af ser noget op i et 1500 01:10:22,540 --> 01:10:24,822 associative array, sandsynligvis? 1501 01:10:24,822 --> 01:10:26,590 Det er sandsynligvis langsommere. 1502 01:10:26,590 --> 01:10:29,670 Random access er rart, især når du kan gøre binær søgning. 1503 01:10:29,670 --> 01:10:33,380 Men hvis du rent faktisk er nu på udkig ikke for tal, men for strygere, dette 1504 01:10:33,380 --> 01:10:37,630 virkelig gennemføres under hætte, sandsynligvis som en hash tabel, hvor 1505 01:10:37,630 --> 01:10:42,950 du enten bruge en hash tabel med separat kæde. 1506 01:10:42,950 --> 01:10:46,040 Eller du bruger en prøve til rent faktisk gemme værdier. 1507 01:10:46,040 --> 01:10:50,550 Så måske kan du gøre konstant tid, men du stadig nødt til at se på S-Y-M-B-O-L, 1508 01:10:50,550 --> 01:10:54,510 potentielt, i stedet for bare 32 bits til at se noget op. 1509 01:10:54,510 --> 01:10:58,430 Så igen de samme ideer kommer tilbage til at gentage sig i denne sammenhæng. 1510 01:10:58,430 --> 01:11:02,120 >> Men igen, PHP nu har nogle super globals, at det viser sig, er 1511 01:11:02,120 --> 01:11:02,900 associative arrays. 1512 01:11:02,900 --> 01:11:05,590 Vi oplevede en for et øjeblik siden, $ _POST. 1513 01:11:05,590 --> 01:11:08,400 Og det super global har nøgler og værdier. 1514 01:11:08,400 --> 01:11:10,550 Specifikt tasterne line op med hvad? 1515 01:11:10,550 --> 01:11:14,520 Hvor kommer nøglerne i $ _POST komme fra? 1516 01:11:14,520 --> 01:11:15,380 Blot for at opsummere? 1517 01:11:15,380 --> 01:11:16,480 >> PUBLIKUM: Navn. 1518 01:11:16,480 --> 01:11:17,900 >> SPEAKER 1: Navn, hvor? 1519 01:11:17,900 --> 01:11:19,860 >> PUBLIKUM: [uhørligt] 1520 01:11:19,860 --> 01:11:20,750 >> SPEAKER 1: Navn er attribut. 1521 01:11:20,750 --> 01:11:23,480 Nå, hvor hvor har de oprindeligt kommer fra? 1522 01:11:23,480 --> 01:11:24,120 Formularen. 1523 01:11:24,120 --> 01:11:30,140 Så hvis en HTML-side har en form tag, inderside der er nogle input, ligesom 1524 01:11:30,140 --> 01:11:34,760 afkrydsningsfelter, tekstbokse, drop down menuer, som hver har et navn, dem 1525 01:11:34,760 --> 01:11:40,260 navne ender som nøgler i $ _POST, og helt ærligt, for den sags skyld, _GET $. 1526 01:11:40,260 --> 01:11:42,130 Hvis metoden er at få, samme idé. 1527 01:11:42,130 --> 01:11:43,830 Det er bare på en anden super global. 1528 01:11:43,830 --> 01:11:47,620 Og værdierne, naturligvis komme fra hvad brugeren har indtastet på hans eller 1529 01:11:47,620 --> 01:11:48,890 hendes browser. 1530 01:11:48,890 --> 01:11:49,830 >> Men der er et par andre. 1531 01:11:49,830 --> 01:11:52,140 Der er cookie, som vi vil komme tilbage til sidst. 1532 01:11:52,140 --> 01:11:56,050 Men det er de ting, som du kender på nettet bruger for nogle gode eller onde. 1533 01:11:56,050 --> 01:11:57,420 Men vi vil vende tilbage til. 1534 01:11:57,420 --> 01:12:01,720 Server og session, og de to har nogle særligt værktøj. 1535 01:12:01,720 --> 01:12:03,940 >> Men lad os tage et kig på dette. 1536 01:12:03,940 --> 01:12:13,330 Lad mig gå videre og åbne op et eksempel kaldet mvc0.php Så MVC 1537 01:12:13,330 --> 01:12:14,900 står for følgende. 1538 01:12:14,900 --> 01:12:19,390 Og vi indføre denne tidligere end er typisk, virkelig, for at få dig designe 1539 01:12:19,390 --> 01:12:22,180 Problem sæt 7 og også afgangsprojekter, i form af en industri, 1540 01:12:22,180 --> 01:12:23,670 standard måde, og ren måde. 1541 01:12:23,670 --> 01:12:24,820 Det er godt design. 1542 01:12:24,820 --> 01:12:29,090 >> Så du er klar til at se, og du vil erfaringer, P sæt 7 paradigme, sortere 1543 01:12:29,090 --> 01:12:32,260 af et programmeringssprog tankegang, ser det lidt noget som dette. 1544 01:12:32,260 --> 01:12:35,570 M for Model, C for controller, V for View. 1545 01:12:35,570 --> 01:12:39,690 Lang historie kort, MVC er bare lidt af en metode, måde, et at gøre 1546 01:12:39,690 --> 01:12:43,360 hjemmesider, i særdeleshed, hvor du lægge alle dine, dumme sætning - 1547 01:12:43,360 --> 01:12:44,970 forretningslogik - 1548 01:12:44,970 --> 01:12:49,710 alle dine intellektuelle ejendomsret hvad der kaldes en controller, en fil 1549 01:12:49,710 --> 01:12:54,840 ligesom index.php, vi eller vil se, quote.php eller buy.php. 1550 01:12:54,840 --> 01:12:59,570 >> I forbindelse med Problem sæt 7, din modeller indeholder typisk dine data, 1551 01:12:59,570 --> 01:13:03,860 noget relateret til en database, som vi vil sidst ser, og dine synspunkter 1552 01:13:03,860 --> 01:13:07,510 indeholde æstetik af dit site, HTML, CSS. 1553 01:13:07,510 --> 01:13:10,420 Så vi allerede så det i C lidt bit ved hjælp af. h-filer. 1554 01:13:10,420 --> 01:13:15,010 Vi har virkelig set det for et øjeblik siden med CSS, ved factoring CSS stilisering 1555 01:13:15,010 --> 01:13:16,520 kram ud af vores HTML. 1556 01:13:16,520 --> 01:13:20,730 >> Så MVC er egentlig bare om at tegne linjer i sandet og sige, at 1557 01:13:20,730 --> 01:13:25,400 interessant programmering kode til dit website hører til i, hvad vi vil kalde 1558 01:13:25,400 --> 01:13:26,400 controller. 1559 01:13:26,400 --> 01:13:29,280 Stuff relateret til database typisk ender i en model. 1560 01:13:29,280 --> 01:13:33,070 Men du vil se, i Problem sæt 7, vi fusionere C og M for at holde det simpelt. 1561 01:13:33,070 --> 01:13:37,630 Men visningen er, hvor alle dine HTML og æstetik typisk gå. 1562 01:13:37,630 --> 01:13:39,160 >> Så hvad betyder det reelt? 1563 01:13:39,160 --> 01:13:45,980 Nå, lad mig gå ind i vores MVC bibliotek som følger. 1564 01:13:45,980 --> 01:13:48,880 Og du vil se flere af disse turnerede igennem i spec. 1565 01:13:48,880 --> 01:13:53,200 Så i mvc0, hævder jeg, at det er, ligesom, udgave 0 i CS50 hjemmesider. 1566 01:13:53,200 --> 01:13:56,670 >> Alt hvad vi har, er noget HTML, ligesom en stor h1 tag, tilsyneladende. 1567 01:13:56,670 --> 01:13:57,800 Og så en punktopstilling. 1568 01:13:57,800 --> 01:13:59,860 Jeg har aldrig set en punktopstilling før, men nogen big deal. 1569 01:13:59,860 --> 01:14:01,590 Lad os hurtigt se på kildekoden. 1570 01:14:01,590 --> 01:14:06,610 Slår ud en uordnet liste med kugler er åbneparentes ul med én eller 1571 01:14:06,610 --> 01:14:09,065 flere listeelementer, li. 1572 01:14:09,065 --> 01:14:10,650 Så varsel her er et anker-tag. 1573 01:14:10,650 --> 01:14:12,130 Vi så, at for et øjeblik siden. 1574 01:14:12,130 --> 01:14:13,810 >> Så det er sådan jeg implementeret denne side. 1575 01:14:13,810 --> 01:14:18,460 Jeg har to links, to listeelementer, én ul for uordnet liste, og enden 1576 01:14:18,460 --> 01:14:22,700 Resultatet æstetisk er dette meget smuk hjemmeside, version 0 her. 1577 01:14:22,700 --> 01:14:26,840 Men hvad er interessant nu, er, hvordan dette gennemføres under hætten. 1578 01:14:26,840 --> 01:14:33,590 >> Lad mig gå ind i gedit og åbne dette allerførste eksempel at male et billede. 1579 01:14:33,590 --> 01:14:37,070 Og vi vil se på, hvad der er behæftet med fejl, potentielt her. 1580 01:14:37,070 --> 01:14:43,260 Nu, hvis jeg går ind i localhost, offentligheden, MVC, bemærke et par filer. 1581 01:14:43,260 --> 01:14:45,780 Jeg har tænkt mig at kalde disse for øjeblik, alle regulatorer. 1582 01:14:45,780 --> 01:14:48,640 Men det er lidt af et misbrug, fordi du vil se alt er blandet 1583 01:14:48,640 --> 01:14:49,620 inde i dem. 1584 01:14:49,620 --> 01:14:52,330 >> Og lad mig gå inde i index.php. 1585 01:14:52,330 --> 01:14:54,700 Og vi ser, bogstaveligt talt, den samme HTML. 1586 01:14:54,700 --> 01:14:57,970 Så selvom denne fil ender i . Php, betyder det ikke, det har at 1587 01:14:57,970 --> 01:14:59,500 har nogen PHP-kode. 1588 01:14:59,500 --> 01:15:02,290 Det kan bare være rå HTML, selvom der er slags fjollet. 1589 01:15:02,290 --> 01:15:07,650 Men bemærk der er ingen åbneparentes PHP tagge, bortset fra denne, som ærligt talt, 1590 01:15:07,650 --> 01:15:09,160 er der bare for at tjene som en kommentar. 1591 01:15:09,160 --> 01:15:12,080 Men det er funktionelt ikke selv så interessant. 1592 01:15:12,080 --> 01:15:12,960 >> Men bemærke dette. 1593 01:15:12,960 --> 01:15:15,400 Det interessante er nu, hvad ændringer på denne side. 1594 01:15:15,400 --> 01:15:16,650 Lad mig klikke Forelæsninger. 1595 01:15:16,650 --> 01:15:18,560 Og bemærk URL er ved at ændre sig. 1596 01:15:18,560 --> 01:15:20,930 Nu er jeg ved lectures.php. 1597 01:15:20,930 --> 01:15:22,630 Lad mig klikke på nul. 1598 01:15:22,630 --> 01:15:27,200 Nu er jeg ved week0.php Og lad nu mig åbne disse filer i gedit. 1599 01:15:27,200 --> 01:15:30,120 Ikke bare indekset, men lad mig åbner forelæsningerne. 1600 01:15:30,120 --> 01:15:33,900 Og lad mig slippe af kommentarerne at fokusere på denne del. 1601 01:15:33,900 --> 01:15:37,680 >> Og lad mig nu åbner bare en mere, week0.php, smider kommentarerne, 1602 01:15:37,680 --> 01:15:39,910 bare for at rydde op. 1603 01:15:39,910 --> 01:15:41,720 Og nu mærke til følgende. 1604 01:15:41,720 --> 01:15:47,340 Tænker virkelig slags nøje over design, og lad os gøre det line 1605 01:15:47,340 --> 01:15:52,013 op det samme, hvad der kunne gøres bedre her, tror du? 1606 01:15:52,013 --> 01:15:56,450 1607 01:15:56,450 --> 01:15:57,780 >> Hvordan fik jeg en uge en? 1608 01:15:57,780 --> 01:15:58,480 Hvordan omkring dette. 1609 01:15:58,480 --> 01:16:00,450 Så det er sådan jeg gjorde uge et. 1610 01:16:00,450 --> 01:16:08,290 Jeg gik hen til Filer, Ny, Sæt, Gem, week1.php, og så gik jeg herind. 1611 01:16:08,290 --> 01:16:09,875 Og jeg skiftede en - 1612 01:16:09,875 --> 01:16:11,646 hvad var det, den ene til fredag. 1613 01:16:11,646 --> 01:16:14,430 1614 01:16:14,430 --> 01:16:15,810 Jeg har ændret nuller til én. 1615 01:16:15,810 --> 01:16:17,150 Jeg har ændret det til én. 1616 01:16:17,150 --> 01:16:20,350 >> OK, så nu se på mine filer. 1617 01:16:20,350 --> 01:16:22,100 Hvad kunne gøres anderledes? 1618 01:16:22,100 --> 01:16:25,310 Hvor er muligheden, måske? 1619 01:16:25,310 --> 01:16:28,330 Så der er mulighed for at starte factoring denne ting ud. 1620 01:16:28,330 --> 01:16:32,950 Lad mig åbne op, som en spoiler, for hvad du vil se i P sæt 7.. 1621 01:16:32,950 --> 01:16:38,750 Hvis jeg åbner nu, index.php i version fem af dette, det ser måde 1622 01:16:38,750 --> 01:16:40,730 mere kryptisk, ganske vist. 1623 01:16:40,730 --> 01:16:43,710 >> Men dette nu, er, hvad jeg vil kalde en controller, der er at styre 1624 01:16:43,710 --> 01:16:44,770 logik på min side. 1625 01:16:44,770 --> 01:16:48,510 Og du kan slags rekonstruere, intuitivt, måske, hvad sker der. 1626 01:16:48,510 --> 01:16:50,630 På den første linje, er det lidt kryptisk. 1627 01:16:50,630 --> 01:16:54,040 Men bemærk jeg kræver, gerne med skarpe omfatter, en fil kaldet 1628 01:16:54,040 --> 01:16:55,930 helpers.php. 1629 01:16:55,930 --> 01:16:59,980 Og så jeg ringer, tilsyneladende, en funktion, kaldet render, passerer 1630 01:16:59,980 --> 01:17:00,850 to argumenter. 1631 01:17:00,850 --> 01:17:02,440 >> Den ene er citat citat slut, header. 1632 01:17:02,440 --> 01:17:04,800 Og den anden er, hvilken slags datatype er dette baseret 1633 01:17:04,800 --> 01:17:07,180 på vores syntaks tidligere? 1634 01:17:07,180 --> 01:17:08,160 Det er et associeret array. 1635 01:17:08,160 --> 01:17:11,730 Konkret er det passerer i titlen med nogle metadata, der minder 1636 01:17:11,730 --> 01:17:13,430 mig, hvad det er, og dens værdi. 1637 01:17:13,430 --> 01:17:16,340 Så jeg ser en kodet hårdt ul, så nogle rå HTML. 1638 01:17:16,340 --> 01:17:20,020 Men så er jeg tilbage i PHP mode kalde en funktion render. 1639 01:17:20,020 --> 01:17:24,390 Så selv hvis du aldrig har brugt HTML eller PHP før, og selvom det ser 1640 01:17:24,390 --> 01:17:27,480 skræmmende, hvorfor er dette sandsynligvis bedre design? 1641 01:17:27,480 --> 01:17:31,310 Hvad er bedre om det, baseret på følgeslutning? 1642 01:17:31,310 --> 01:17:32,130 >> PUBLIKUM: [uhørligt] 1643 01:17:32,130 --> 01:17:35,750 >> SPEAKER 1: Mindre afskediget i det der er ikke mere HTML-tag, ikke mere 1644 01:17:35,750 --> 01:17:38,410 hoveder tag, ikke mere krop tag i hver pokkers fil. 1645 01:17:38,410 --> 01:17:41,860 I stedet har jeg indregnet ud fællestræk, og formentlig sætte dem 1646 01:17:41,860 --> 01:17:45,150 i en fil eller anden måde relateret til en header. 1647 01:17:45,150 --> 01:17:48,500 Og samme for det tætte krop tag, den tætte HTML-tag. 1648 01:17:48,500 --> 01:17:52,165 Det er nok hernede inde af sidefoden et sted. 1649 01:17:52,165 --> 01:17:57,050 Og du vil se, i Problem sæt 7 en lille tur gennem dette. 1650 01:17:57,050 --> 01:17:58,070 >> Så hvad der ligger forude? 1651 01:17:58,070 --> 01:18:03,390 Den ene ting, vi ikke har mulighed for endnu for er rent faktisk at gemme data. 1652 01:18:03,390 --> 01:18:06,110 Og så hvad vi vil begynde at se Onsdag, for eksempel, er, at din 1653 01:18:06,110 --> 01:18:08,450 gamle ven Excel eller tal, giver dig mulighed for at gemme masser af 1654 01:18:08,450 --> 01:18:10,060 data i rækker og kolonner. 1655 01:18:10,060 --> 01:18:12,570 Slår ud du kan gøre det i, hvad der er kaldes en database, programmering. 1656 01:18:12,570 --> 01:18:16,620 manisk Og det viser sig, efter at vi vil være i stand til at gemme ting som 1657 01:18:16,620 --> 01:18:20,550 dette, som du vil se igen i P sæt 7, en hel bunke af brugernavne og 1658 01:18:20,550 --> 01:18:23,690 adgangskoder, hvor sidstnævnte er faktisk krypteret, ligesom de 1659 01:18:23,690 --> 01:18:25,550 var i P sæt 2s hacker edition. 1660 01:18:25,550 --> 01:18:29,600 Og i sidste ende, vil du gennemføre denne, din egen eTrade-lignende hjemmeside, 1661 01:18:29,600 --> 01:18:32,220 implementerer kollektivt CS50 finansiering. 1662 01:18:32,220 --> 01:18:36,000 >> Endelig, da du boet her så sent dag, hvis du kommer tilbage til denne del 1663 01:18:36,000 --> 01:18:41,120 af campus, i dag på 4:00 PM, vil vi giver dig ikke kun rådgivning, på SCE-selskaber 1664 01:18:41,120 --> 01:18:44,200 Rådgivning Fair, kl 4:00 i Maxwell-Dworkin, vil vi give dig nogle 1665 01:18:44,200 --> 01:18:47,470 Americone Dream, Cherry Garcia, Chocolate Fudge Brownie, Chokolade 1666 01:18:47,470 --> 01:18:50,840 Chip Cookie Dough, og når du Google Chunky Monkey, du får denne. 1667 01:18:50,840 --> 01:18:53,620 Så alle, der venter på 4:00 PM i Maxwell-Dworkin. 1668 01:18:53,620 --> 01:18:56,736 Se dig på onsdag så godt. 1669 01:18:56,736 --> 01:18:59,960 >> SPEAKER 2: På det næste CS50, RJ sover i. 1670 01:18:59,960 --> 01:19:03,656 1671 01:19:03,656 --> 01:19:04,906 >> RJ: My afsnit! 1672 01:19:04,906 --> 01:19:07,727 1673 01:19:07,727 --> 01:19:08,977 Ha! 1674 01:19:08,977 --> 01:19:12,056 1675 01:19:12,056 --> 01:19:13,306 Åh, 1676 01:19:13,306 --> 01:19:16,374