[MUSIC SPILLE] DAVID J MALAN: All right, velkommen tilbake. Dette er CS50. Dette er slutten av uken syv. Og det er på slutten av at gatefeier jakt fra oppgavesettet fire som du kanskje husker. Etter å utvinne alle disse JPEG-bilder av ansatte, du ble utfordret, hvis du ønsker, å fotografere deg selv med så mange av de folkene som du kan. Vi fikk en hel haug med innleveringer i løpet av de siste ukene, ja, ganske mange rett før middag dag, hvorav noen er de her fanget her in-- ser like-- Annenberg Hall i kontortiden, en her i Lowell Hus med Nick. Her er Ramon bli fanget på telefonen. Dette var på et CS50 lunsj. Dette var Jason Skyping med en mer kreativ klassekamerat, som ringte ham på denne måten. Vi vet ikke hva dette var. 

[Latter] 

DAVID J MALAN: Men som er verdt en gigabyte. Her er Chang, som bokstavelig talt gikk av scenen å unngå å bli fotografert en dag, men ble til slutt fanget. Her er Nick. Her er Nick. Her er Nick. Og her er Alison ned av feltene. Og Zamyla selv ble funnet på ballsal konkurranse. Så vi vil gå gjennom disse bildene, finne ut som sendte inn mest tidligst, og belønning en fabelaktig premie, som lovet i spec. Og vi vil også følge opp om plassen som var involvert. 

Et par announcements-- så lunsj er, igjen, denne fredag ​​klokken 13:15. Hvis du ønsker å bli med oss, RSVP på at URL her. Jason vises igjen her fra en av delene et par år tilbake, som skjedde å falle på Halloween. Og ja, han kledd som en gresskar det aktuelle året. Hvis du ser denne delen av hans fra 2011 seksjon åtte, hvis du er nysgjerrig, på CS50.tv, tror jeg dette var det året hans luftpumpe var i arbeid. 

Hvis du deretter se på lignende seksjon i 2012, du vil se dette Jason mye deflatert, siden drakten fungerte ikke lenger, som bare er å si denne fredagen, hvis du hadde liker å skjære et gresskar med Daven og Gabe og andre, RSVP til lederne på cs50.harvard.edu adresse. Det lover å bli mye moro. Daven, blir vi fortalt, har skåret Pumpkins hele sitt liv. Gabriel fra Brasil har aldri skåret et gresskar til Halloween. Så vær der sammen med dem som han lærer. 

Seminarer, meanwhile-- så vil du lære snart om hva våre forventninger er for det endelige prosjektet, som i hovedsak vil koke ned til utforming og gjennomføring av mest ethvert prosjekt av interesse for deg, riktignok med forbehold om godkjenning og veiledning fra undervisningen stipendiat. Mot slutten av semester, introduserer vi en rekke av seminarer, som er valgfrie klasser ledet av undervisnings stipendiater og Harvard ansatte, venner av kurset tvers campus, om ulike emner som er tangentielt til underliggende pensum kursets men likevel er aktuelt, morsom og forskjellig for potensielle endelige prosjekter. 

For eksempel, først, hvis du ønsker å registrere, leder til at nettadressen der. Og dette er lineup for årets seminar alene. Men skjønner vi har dusinvis av seminarer fra tidligere år, som alle er knyttet i Seminarer menyen muligheten til kursets hjemmeside. Så hvis du tenker på gå utenfor din komfortsone eller plukke opp noen nye ferdigheter, for eksempel programmering iPhone apps med Swift, et nytt språk fra Apple eller Objective-C eller Android apps eller programmering [? cue?] lyspærer, eller noen av emnene opp her og mer, på grunn av sjekk ut registreringssiden. 

Så begynte vi og konkluderte på Mandag med å se på HTTP. Så rask refresher-- HTTP, Hypertext Transfer Protocol. Men hva betyr det egentlig? Hva betyr det egentlig? Er det en hånd? Jeg vet at du bare skrape hodet. Men du ønsker å foreslå hva HTTP er? 

Målgruppe: Hvordan datamaskiner kommunisere med [uhørbart]. DAVID J MALAN: Jeg savnet den siste delen. Hvordan datamaskiner kommuniserer with-- 

PUBLIKUM: Internett-servere. DAVID J MALAN: bra-- med internett servere, og spesielt, webservere. Fordi tilbakekalling, det er en haug med tjenester på internett, noen som du bruker sannsynligvis daglig mellom chat og melding, chat og web og e-post, og lignende. Og HTTP er bare protokoll som nettlesere snakke når du kommuniserer med webservere, og vice versa. Og den analoge i menneskelige verden kan være, Jeg strekker hånden min å riste litt annet menneske og han eller hun erkjenner ved å utvide hans eller hennes hånd i tillegg. Så det er bare en protokoll, et sett av konvensjoner. 

Og hva faktisk er disse konvensjonene? Vel, det bare koker ned til sende meldinger frem og tilbake, som vi avbildet her. Og det er et par måter som du kan sende disse meldingene. Og kanskje den mest vanlig er kjent som få. Og vi vil se en kontrast til dette før lenge. 

Men en GET-forespørsel fra en nettleser til serveren bare ser ut som dette. Det er en haug med tekst at det setter innsiden av en virtuell konvolutt. På utsiden av at konvolutten gå et par stykker av detaljer. Hva må gå på konvolutt, så å si, for å få en forespørsel som dette fra meg til en web server? Yeah. 

PUBLIKUM: Din IP-adresse. 

DAVID J MALAN: My IP-adresse i Fra-feltet, så å si, og selvfølgelig, mottakers IP-adresse. Men i tilfelle av en nettpakke, Vi trenger litt mer detalj Det er ikke nok bare å send en konvolutt til en server, fordi at serveren kan være lytting etter forskjellige typer av Internett-trafikken. Så hva annet trenger vi foruten mottakerens IP? Yeah? 

PUBLIKUM: Er det TCP? DAVID J MALAN: Good. TCP-- 

PUBLIKUM: Adresse. 

DAVID J MALAN: Adresse, eller port, som det heter. Close, men en TCP portnummer. Og det er en haug av disse. Men sikkert den mest kjent bør slutt være 80, som er standard som brukes for web-trafikk. Og en annen kjent en snart vil være 443, som anvendes for sikker web trafikk, adresser som starter med https. 

Så dette er hva som går innsiden av konvolutten. Og få / bare betyr, gi meg standard nettside. Gi meg roten av hard kjøre på det web server. Og forhåpentligvis, web Serveren vil svare med, OK og tallet 200, som er bare en konvensjon som sier, ja, alt er faktisk OK. Her er siden. Typen nettsiden kommer til å være tekst, men mer spesifikt, HTML, som vi er i ferd med å dykke tilbake til. Og dot dot dot bare betyr, her er HTML. Og det er der vi plukke opp historien i dag, egentlig skrive HTML, Hypertext Markup Language, som er det språket som websider er skrevet. Det er ikke et programmeringsspråk. Det er ingen funksjoner eller sløyfer eller forhold. Det er et kodespråk, så vel igjen ser i dag, som lar deg spesifisere hvordan å strukturere og stilisere estetisk en nettside. 

Så dette var en og bare siden vi virkelig sett på, hvis en kort stund, på mandag. Og legg merke til noen fremtredende kjennetegn. Det er mange åpne vinklet brakett og tett vinklet brakett. I mellom de vinklet parentes er ord. Og vi kommer til å begynne ringer disse ordene tags. Så åpen brakett hodet og lukket brakett hodet er de åpne og lukkede koder, eller start- og sluttkoder henholdsvis, av et HTML-element, som vi kaller det, kalt hodet. Og det samme sjargong gjelder til kroppen i HTML og så videre. 

Og hva som er fint er HTML-- og faktisk, vil vi tilbringer veldig lite tid på det, fordi du stort sett bare finne ut hvilke funksjoner det har når du faktisk har et konkret problem å solve-- du vil finne at en nettleser er ganske dum. Det er bare kommer til å do-- ikke ulikt en computer-- det du ber den om. Og så når du har åpent brakett HTML på toppen der, som i hovedsak betyr bare, hei, nettleser, her kommer en nettside skrevet i HTML. 

Når den ser åpen brakett hodet, som bare betyr, hei, nettleser, her kommer hodet, eller den øverste delen av min nettside. Når den ser en lukket brakett hodet, som bare betyr at, hei, det er det for hodet. Standby for noe annet. Og at noe annet er tilsynelatende kommer til å være i kroppen. Og når du ikke har en kode, som du må bare hallo, komma, verden, som bare kommer til å være rå tekst som slutt vises på skjermen. 

Nå, vil du legge merke til også innrykk her. Du kan sikkert antyde hvordan vi stylizing det. Hver gang jeg åpner en kode, så å si, rykke jeg. Og hver gang jeg lukker en kode, jeg un-innrykk tilsvarende i ånden til klammeparentes. Og utover det, jeg er snill for å bruke min dom. Legg merke til at jeg ikke gadd å treffe Skriv inn innsiden av den tittelen tag. Hvorfor? Vel, jeg bare bestemte meg for det så en litt renere for meg, det menneskelige, å bare ikke bry gjør det. Så igjen, det er noen dom kaller bare som det er i C eller hvilket som helst språk. 

Men legg merke til også at denne skrå gir seg en mental modell, ikke å over komplisere det. Men et tre, ikke sant? Hvis du tenker på en web side, tilsynelatende skrevet som dette, som å være pent innrykket på den måten, du kan nesten tenke på den åpne braketten HTML lukket brakett tag er demarcating roten til en node, et familietre stil node i stil med trærne vi så på sist fredag. 

Og ja, har vi på rett her hva vi vil kalle en DOM, D-O-M, dokument objektmodell, en fancy måte å si et tre som representerer som HTML. Og legg merke til at HTML har, vil vi si: som et familietre, to barn. På venstre er hodet. På høyre side er legemet. 

Og akkurat som en mindless tanke øvelse, hodet, selvfølgelig, har hvor mange barn i henhold til denne strukturen? Så bare en, title-- og det er derfor vi har pilen går fra hodet til tittelen. Så det er som om den personen i familietre hadde bare ett avkom. Og så tittelen i seg selv kan sies å ha et barn også. 

Husker at HTML hadde hallo, komma, verden under den. Og jeg har rett og slett trukket det innenfor en ovale i stedet for bare et rektangel å formidle semantisk at selv om det er en node i treet, så å si, det er liksom fundamentalt forskjellig. Det er ikke et merke. Eller mer riktig, det er ikke et element. Det er bare en tekst node, hvis du vil. Men disse er helt vilkårlige menneskerettighetskonvensjoner. Dette er bare nå min måte som representerer det jeg vil som en samlet ring dokumentet. 

Og som en side, den tingen på super øverst i venstre hjørne, åpen brakett utropstegn doc typen HTML, dette ser ut som en kode, men det er dumt hjørne tilfelle hvor det er bare det, kopiert og limt å indikere lesere dette er HTML versjon 5. Verdens forandrer hva Første linje med kode på en side skal være. Dette betyr bare versjon 5. Så det gjør ikke helt ser ut som de andre. 

All right, så med det sa du nå sette pris på denne ganske denne dumme tatovering noen fikk. 

[Latter] 

DAVID J MALAN: All right, og nå la oss faktisk dykke til å gjøre noe med dette. Du vil huske at sist gang Jeg åpnet opp CS50 Appliance og jeg gjorde noe så enkelt som å åpne opp gedit. Og jeg lagret filen selv på min desktop-- steds spesiell-- som hello.html. 

Så la meg gjøre det igjen-- hello.html Enter. Og nå i denne filen, kommer jeg til å gå videre og gjenskape det vi nettopp saw-- doc typen html Så jeg kommer til å gjøre åpen brakett html lukket brakett. Og så kommer jeg til å preemptively åpne og lukke tag. Hvorfor? Bare så jeg ikke glemmer senere. Det er bare god praksis, som åpning og lukking klammeparentes alt på en gang. 

Og så hva som kom neste? Du kan tenke på tatoveringen. 

PUBLIKUM: Hodet. 

DAVID J MALAN: Hodet. Og så i her, jeg hadde tittelen, tror jeg. Og tittelen var vilkårlig, hallo, verden tett tittel. Og deretter ned her, kroppen, for course-- da vi lukker body-koden. Og så bare litt redundant, Jeg hadde det samme her nede. 

Så jeg hevder at dette er en web-side. Dette er noe som kunne nå lever på nettet, selv om selvfølgelig, er det bokstavelig talt lever på skrivebordet mitt akkurat nå. Men ja, hvis jeg minimere gedit, Jeg vil se på skrivebordet mitt ikonet. Selv om dette er apparatet du kan gjøre dette på Mac OS uten TextEdit eller Vinduer med Notepad selv. 

Og hvis jeg går videre og dobbeltklikk at selv, og select-- vel, la oss Ikke velg det fordi Chrome er ikke åpning. La oss gå videre og åpne Chrome. Og så gjør Kommando-O for open Og gå til skrivebordet mitt og åpne denne filen. Det er hvordan en nettleser tolker HTML, øverst til nederst, venstre til høyre. Hei, nettleser her er HTML. Her er hodet. Her er tittelen. Her er kroppen. Og ja, dette er hvordan det gjør at web-side. 

Men legg merke til nettadressen. Ingen av dere kan trekke opp denne spesifikke side på din bærbare PC akkurat nå, selv innsiden av apparatet via denne nettadressen, fordi file: // indikerer det er faktisk på min filsystemet, harddisken min, ikke din. Så dette er ikke alle som nyttig. 

La oss nå bevege seg mot ved bruk av en faktisk web-server. Og det viser seg at CS50 Appliance er mer enn bare et miljø der du kan skrive C-kode og kompilere og kjøre det ut som du har gjort. Det har også blitt konfigurert av personale til å representere en typisk web serveren som er på internett, en som du kan betale for eller en som er i den såkalte nettskyen. 

Og det kjører standard gratis åpen kildekode programvare, for eksempel, noe kalt Apache, som er kanskje fortsatt den mest populære web serverprogramvaren i verden at tusenvis av nettsteder bruker i dag. Og det også selv har programvare som MySQL, som er en databaseserver at vi vil til slutt komme til, som bare er å si Jeg kan begynne å behandle apparatet mitt som en fullverdig server at jeg ikke betaler for andre steder. Det bare lever på min egen laptop for utviklings- og convenience formål. 

Så la oss gå videre og dra nytte av dette. Jeg kommer til å gå videre og åpne opp et terminalvindu. Og jeg kommer til å gå videre og move-- faktisk, først jeg er kommer til å navigere til skrivebordet mitt. Hvis jeg gjør ls, det er hello.html. Og jeg kommer til å gå videre og begynne å bruke en ny katalog vi har ikke brukt før i dag. 

hello.html-- Jeg kommer til å flytte til ../vhosts for virtuelle hosts-- mer om det i future-- og deretter inn i en katalog som heter localhost, som er kallenavnet gitt til nesten hvilken som helst datamaskin, enten det er en Mac, PC, eller Linux-datamaskin, og deretter spesielt i en katalog som vi, de ansatte som allerede er opprettet for deg når du lastet ned apparatet kalt heten. Og som navnet antyder, noe Jeg satt i denne mappen, i teorien, kommer til å nå bli heten, i det minste i mennesker som har en direkte tilkobling til datamaskinen min. 

Så nå la meg gå videre og gjøre cd til den samme katalogen slik at jeg kan se hva som er skjer og type ls. Og ja, det er det eneste der inne. Jeg hevder nå at fordi jeg har satt dette fil hello.html innsiden av en katalog kalt offentlig innsiden av en katalog kalt localhost innsiden av en katalog kalt vhosts, som takket være CS50 ansatte er forhåndskonfigurert til å være roten av web server, Nå kan jeg forhåpentligvis gjøre dette. 

Jeg kommer til å åpne opp en ny fane. Og jeg kommer til å gå for ikke å file: //. Jeg kommer til å bruke faktiske http / localhost, som igjen, er kallenavnet for min egen server. Og så kommer jeg til å gå til det filnavn, bare for å være klar? Hvor er denne historien trolig kommer? hello.html. 

Så med andre ord, jeg ønsker å nå dette er min egen datamaskin, mitt eget apparat, som om det er en faktisk server. Sitt kallenavn er localhost. Men tenk på localhost som liker Facebook.com google.com, uansett. Det er bare min lokale navnet. Og så den siste jeg ønsker er i roten av harddisken, så å si, eller roten av web server, ergo skråstrek og deretter filnavnet hello.html. 

La meg zoome ut og trykk Enter. Og ja, det er nå min nettside. Så det er litt annerledes. Og det er like uimponerende. Dette er den gamle versjonen. La meg krympe skriften tilbake. Dette er den gamle. Dette er den nye. Men hva som er fundamentalt skjer Nå er at HTTP blir brukt. 

La oss gjøre dette litt mer tydelig, eller, om du vil, litt mer komplisert. La meg gå til høyre hjørne av apparatet mitt. Og legg merke til at alt dette tid, har det vært en rekke. Det er den unike adressen av CS50 Appliance. Det er en privat adresse, som følger av 172.16, som nettopp betyr bare at du fysisk får tilgang til denne web server. Alt er brannmur og pent beskyttet fra resten av verden på grunn av denne adressering. 

Og nå merker selv hvis jeg går til denne adressen, ikke i min apparatet, men i Mac OS-- kommer jeg å gå tilbake over her. Dette er min Mac nå. Og nå kommer jeg til å åpne opp denne versjonen av Chrome her. Og jeg kommer til å gå til http: //172.16.25 / Og jeg glemmer rest-- 133. 

Så jeg kommer til å gå fra min Mac at IP-adressen /hello.html Enter. Og nå ser jeg fra min Mac at min CS50 Appliance, er hvem IP-adressen er at nummer, er faktisk oppfører som en web server på internett. Det har ikke en fin enkel å Husk navn som Facebook.com, men det er ved hjelp av HTTP tilsynelatende, selv om Chrome er form for å forenkle verden for oss, men ikke viser oss HTTP. Men dette er faktisk akkurat det. Chrome er bare å spare litt tastetrykk i disse dager. Og det er det vi nå ser. 

Så det er alt fint og bra. Men det er en ganske uimponerende side. La meg gå inn og gjøre noe litt annerledes nå. Så la meg gå tilbake til gedit. Og i stedet for hallo, verden, la oss sette et bilde. Og jeg hevdet fra before-- la meg gå inn i min localhost katalogen publikum. Og la meg gå videre og kopiere en hel haug med filer fra i dag fra min Dropbox-mappen inn på her. 

Nå hvis jeg skriver ls, ser på alle disse filene at jeg har distribuert av Kursets hjemmeside på forhånd i dag hvorav den ene er fremdeles hello.html. Så det er den. Og husker denne dumme én fra forrige tid-- cat.jpg. Så la meg prøve å bygge inn cat.jpg innsiden av nettsiden min. 

Jeg kommer til å gå videre og gjøre cat.jpg, lagre. La meg gå tilbake til Chrome. Og la meg zoome inn på font og nå lesse. Oops, der jeg sette dette? Standby-- jeg har fortsatt den gamle versjonen fra min stasjonære åpne. Så la meg gå inn i min vhost, min localhost, min offentlige, og hello.html. Så nå la meg gå videre og si cat.jpg innsiden av kroppen der jeg vil den skal være vises og lesse. Selvfølgelig, dette er ikke riktig. 

Så jeg trenger å fortelle leseren litt mer bevisst hva jeg vil den skal gjøre. Bare å skrive navnet er åpenbart ikke tilstrekkelig. Så husker at det var en annen tag, image, img for kort. Det er bare fordi mennesker liker ikke type fulle ord. Og så kan vi gjøre source = "cat.jpg". 

Og nå kommer jeg til å gjøre en ting annerledes her. Selv om alle våre tags hittil har hadde denne oppfatningen av en start tag og en slutt tag, som ikke egentlig gjør sans for et bilde, ikke sant? Et bilde er enten det eller ikke der. Og så mennesker har kommet opp med en enklere konvensjonen. Når du har en kode som kan både starte og slutte på samme tid-- det kan være tomt, så å speak-- bare sette skråstrek innsiden av tag helt på slutten. Nå la meg gå tilbake til nettleseren min. Hit Reload Damn, er noe galt. Du har sikkert sett dette noen ganger på nettet, selv om det ikke har vært din feil. Det er webserveren skyld. Hva oder dette synes å indikere? Det er brutt. Det er der bildet tilhører. Yeah? 

PUBLIKUM: Men det gjør ikke har tilgang til bildet. 

DAVID J MALAN: Det gjør ikke har tilgang til bildet. Det, eller enda verre, kanskje det ikke engang eksisterer. La oss se om vi ikke kan diagnostisere det. Husker fra forrige gang at hvis i Chrome, i apparatet, eller på din Mac eller PC, du går til Developer menyen og gå til utviklerverktøy alternativet, som trolig du har ikke brukt mye eller noen gang. Og hvis jeg går til nettverk og oppdater siden, la oss faktisk se på HTTP forespørsler som blir gjort. 

Det ser ut som hello.html er faktisk OK, derav 200. Men cat.jpg er en 403. Så det er ikke en 404. Filen eksisterer sannsynligvis. 403 betyr forbudt. Så dette er litt forvirrende. Jeg kommer til å gå tilbake til min terminal-vinduet. La meg zoome inn opp her. Og la meg gjøre en ls. Det er de samme filene. 

Nå la meg gjøre en ls-l, som du har sannsynligvis brukt før å se på fil størrelser kanskje eller tidsstempler. Og vi ser en hel haug med overveldende informasjon. Men legg merke til noen detaljer. Her er hello.html i denne ro her og her er cat.jpg. Og det er bare apparatet blir brukervennlig ved å markere JPEG s i lilla som dette. Men hva annet er annerledes ved siden filstørrelsen og filnavnet? 

PUBLIKUM: [uhørlig]. DAVID J MALAN: Ja, det er to mer R'ene over her. Legg merke til hva hello.html har skjer. Så det viser seg at navnet på denne katalogen publikum er viktig. Noe i denne katalogen er ment å være offentlig. Men det er ikke tilstrekkelig bare for å slippe filer der inne. Du må også endre modusen for filene, endre rettighetene på filen til proaktivt ikke være standardinnstillingen, som er at bare jeg kan lese og skrive det, jeg er eieren. Jeg vil at hele verden er vi alle til være i stand til å lese filen min, så å si. Les betyr bare vise det. 

Og ja, som du ser i problemet satt syv, det er hva disse R'ene gjennomsnittet. Disse to R middel la alle ellers i verden også lese den, spesielt nå som det er i denne katalogen. Så den enkleste måten å løse dette på er å gå til min rask og gjøre chmod for endring modus og deretter gjøre en + r, til sammen, alle, alle, pluss r for lesing, og deretter cat.jpg Enter. Ingenting ser ut til å skje, noe som betyr vanligvis en god ting. Så ls-l igjen-- nå la oss se på cat.jpg. Og denne tillatelsen ser ut til å ha endret seg. Som en side, hvis du gjør en feil og du, for eksempel, bare gjort your-- jeg ikke know-- essay offentlig tilgjengelig ved et uhell, du kan gjøre det motsatte, chmod a-r. Men ærlig, bør det ikke være i offentlig katalog uansett om det er bekymring. 

Så nå la oss gå tilbake til min nettleser og reload. Og jeg kommer til å klikke den lille Ghostbusters symbol for å fjerne den del av skjermen så vi kan se nye forespørsler. Og ja, her er Fisk? Cat fra før. Men enda viktigere, teknisk, er det nummer 200, som betyr at vi fikk det OK. All right, så det er alt fint og bra. Men vi er ikke å gjøre det beste av nettsteder, heller ikke vi kommer til å prøve for hardt å gjøre stiligste av nettsteder i dag. Men la oss i det minste gjøre noe super kjent før rallende av noen andre koder. Så antar at jeg ikke bare vil ha en katt her. Anta at jeg faktisk ønsker dette katten å koble til noe. 

Jeg kan, for eksempel gjøre noe som dette. en for anker href for hyper referansen equals-- og la oss bare gjøre noe som www.google.com nært sitere tett brakett. Og nå søke for katter. Lukk ankerkoden. Så dette har bare en slags av fundamentalt ny detalj. Koden er selvfølgelig annerledes. Det er navnet en for anker href eller hyper referanse. 

Men enda viktigere, er det Dette syntaktisk funksjon her. Dette er hva vi vil begynne å ringe ikke en tag, men et attributt. Og et attributt er noe som modifiserer oppførselen til en tag. Og dette attributtet, href, midler endre virkemåten for denne anker slik at når det klikkes, det går til denne nettadressen her. Og selvfølgelig, er at nettadressen Google. 

I mellomtiden, hva er dette tekst her kommer til å bli? Vel, det kommer til å bli hva mennesket faktisk ser som understreket link, så enkelt som det. Så la oss prøve dette. La meg lagre det. Jeg er fortsatt i hello.html. Men i de versjonene på nettet, vil du se selve filnavnene vi pre-forberedt. La meg gå videre og laste. Og nå er det en veldig uimponerende side fortsatt. Men hvis jeg sveve over det-- og det er litt lite, men-- du kan se i bunnen venstre hjørne av skjermen, det er faktisk kommer til google.com. Og hvis jeg klikker det, vil det visp meg veien til selve Google. 

Men legg merke til her en mulighet for utnytting, akkurat som en digresjon. Og vi vil komme tilbake til andre spørsmål om sikkerhet før lenge. Fordi det er denne motsetningen mellom hvor du går og hva du sier, du kunne gjøre noe sånt dette-- http://www.google.com. OK, og nå hvis jeg reload etter lagring den siden, det ser ut som jeg kommer til å gå til Google. Men det er ingen grunn til at jeg må gå til Google, ikke sant? Jeg kunne faktisk gå til noe sånt badguy.com, oppdater siden over her. Og legg merke til, likevel ser det ut som Google. Og bare hvis jeg er skarp nok til å sveve over her ser jeg det selv kommer til gå til et annet sted. 

Så hvis du noen gang har fått en e-post, spesielt en fra Paypal, eller tilsynelatende fra Paypal ber deg om å logge inn til kontoen din, dette er grunnen til at du bør aldri noensinne klikk lenker i e-poster, ærlig, noen linker i e-poster. Hvis du vet at du har faktiske penger i Paypal eller Bank of America eller Fidelity eller noen nettside, manuelt skrive det i. Fordi ser hvor enkelt det er å lure noen til å presentere hva ser ut som en link. Men det faktisk kunne går absolutt overalt. 

Og det er langt større trusler enn dette. Faktisk er dette litt av en tangent nå, men én av de beste jeg noensinne har sett som siden er blitt stengt, er noens ført folk to-- så dette kan si, klikk her for å logge inn konto, en bankkonto. Og dette var Bank of the West. 

Så noen kjøpte dette. Og det er litt lettere å se det i en mono linjeavstand font zoomet i på en 30-fots projektoren. Men når det er liten skrift i en e-post som du mottar, dette ser ut som bankofthewest.com, ikke bankofthevvest.com, der noen hadde betalt $ 10 for å kjøpe. Og så dette førte dem til tilsvarer noen dårlige nettsider. 

Og du vil se også-- faktisk kan vi gjøre dette-- hvis jeg går til selve nettsiden, bankofthewest.com, igjen, tilbakekalling fra forrige gang at hvis dette er deres web-side og du er nysgjerrig på hvordan det fungerer, du kan sikkert gå til Chrome utviklerverktøy. Og du kan se alle de HTML pent formatert der. 

Men mer til poenget, du cam-- la oss lukke dette-- du kan gå til Vis Utvikler View Source. Hvorfor kan jeg ikke bare kopiere alt dette og da jeg kan gå inn i min lille gedit vindu her og lage min egen nettside. Lagre dette i hello.html. Og sannsynligvis dette kommer til å bryte, fordi det er ikke så enkelt som regel. Men nå hvis jeg laste min egen side på min egen CS50 Appliance og traff reload, OK, brøt noen ting. Men jeg er ganske nær å ha min egen bank nettside, ikke sant? Alt dette HTML-- 

[Latter] 

DAVID J MALAN: --Jeg ikke actually-- og du vet det er noen der ute som ville faktisk klikker på disse lenkene også. Så klart, brøt noen ting. Men det kommer til å lede oss inn i en diskusjon, unødvendig akkurat nå, med hensyn til hva CSS, Cascading Style Sheets, er, og hvordan du faktisk laste ned de andre HTML-filer og JPEG-filer GIF-filer som nettsiden bruker kanskje. Men alt dette er accomplishable. Men det virkelig koker ned til disse svært enkle heuristikk. 

Så nå la oss bare skumme gjennom en par andre eksempler på HTML bare for å gi deg en følelse av hva annet du kan gjøre. For eksempel er dette list.html. Anta at jeg ønsket å lage en web-side med en liste over husene i quad. Jeg kan bruke ul tag for uordnet listen, og deretter listeelementet barnet og deretter veksle over-- eller liste, rather-- husene i spørsmålet. 

Og hvis jeg åpner dette opp, la oss gjøre dette. La oss gå til ikke å hello.html, men å list.html. Pokker. Hvordan løser jeg dette? Det er det samme problemet som før, ikke sant? Så la meg gjøre chmod-- oops-- chmod a + r av list.html. Og nå hvis jeg går tilbake til nettleseren min og klikk Reload, det er det. Så hvis du noen gang ønsket å lage en punktliste, kan du gjøre det. Hvis du ønsker å være super fancy og gjøre en sortert liste, ikke en uordnet liste, endre disse til ol, oppdater siden, og nå nettleseren vil nummerere det for deg. 

Hva annet kan vi gjøre? Vel, et par others-- hvis du har lange avsnitt av text-- for eksempel, noen Latinske teksten som dette-- og du vil ha den i eget avsnitt, åpen p, tett p for avsnittet tag. Og gjøre det igjen og igjen. Og hvis jeg nå åpner opp denne filen, paragraphs.html, vel, dette blir irriterende. Så nå la oss bare gå tilbake til min teksten, chmod en + r r stjerne .html-- en fin liten wild card så å si. Det bør fikse alt disse problemene for meg. La oss lesse. Det er tre avsnitt. 

Og nå la oss gå videre og åpne opp en annen. Hva med bordet? Du vil merke tabellen utseende litt mer komplisert. Men det er den samme idea-- åpen tag, åpen kode, åpen, åpen, åpen, tett tag, åpen tag. Og disse skje til å stå for tabellen, hvis grensen er tilsynelatende kommer til å bli en tykkelse 1-- uansett at means-- tabellen rad, bord data, noe som betyr en celle. Og hvis jeg går tilbake til nettleseren min her og gå til table.html, du kan se noe som dette, heslig. Men vi vil komme til poenget hvor vi faktisk kan gjøre ting penere enn det. 

Så la meg fastsette for nå. Det er bunter av flere tags. Og HTML er herlig å plukke opp fordi, ærlig, alt du trenger å gjøre er å se på eksisterende nettsider som du er kjent. Og du er like, oh, det er hvordan de gjorde dette estetisk. 

Eller du kan slå opp alle online ressurs med hensyn til hvordan HTML virker, og du vil se at det er en Hele vokabular av andre koder. Men med enkle mental modell alene at nesten hvilken som helst kode du åpner må være lukket, det virkelig ikke nok til å lære seg HTML etter forstå disse grunnleggende ideer om tags og attributter og godt formedness at vi har snakket om, lukking noe som vi kan åpne slik at vi ikke forvirre en nettleser. Så la oss nå ta dette til et mer interessant nivå ved å gå til selve. Og la oss gå til min Mac her, til google.com. Og nå notice-- la oss gjøre dette. Jeg gong å gå til Innstillinger, Innstillinger for søk. Jeg ønsker å slå av denne irriterende øyeblikk Resultatene ting der det umiddelbart begynner å reagere på din skriver. La oss gjøre dette eldre skolen så vi faktisk se hva som skjer. 

Så jeg kommer til å redde min Google-innstillinger her. Og nå notice-- jeg kommer til å søke etter noe som katter. Og det er fortsatt gjør auto komplett her, men basert på ting folk har skrevet i det siste. Men legg merke til hva som kommer til å skje. 

I URL i øyeblikket er dette, bare google.com. Og teknisk sett er det skråstrek. Google er bare å lagre en karakter og ikke viser oss det. De viser oss https, bare å være super betryggende at vi er på en sikker eller kryptert side. 

Så la meg gå videre og søke etter katter. Nå fikk virkelig overveldende raskt. Se på lengden på denne nettadressen. Men det viser seg at de fleste av disse tingene i URL er faktisk ganske ubrukelig. Jeg kommer til å begynne å slette ting jeg ikke forstår. Jeg ser katter. Jeg forstår katter. Jeg vet ikke hvorfor katter er der igjen. Jeg vet virkelig ikke hva dette tullet er. Så jeg skal bare holde utheving og slette ting at jeg ikke forstår, destillere URL i nettopp dette. 

Nå la meg få gå inn igjen. Det ser ut som Google fortsatt fungerer. Så en eller annen grunn, de legger til en masse ting til sin URL-er som standard. Men det er ikke strengt nødvendig. Så hva er fint om dette? Vel, la meg gå videre og åpne opp Chrome Inspector. Det er en liten mus snarvei for det. 

Gå til kategorien Network. Og nå la meg laste denne siden en gang til. Og jeg holder Shift. Som en side, nettlesere har en tendens til å cache eller lagre informasjon bare for effektivitet skyld. Men vanligvis holder Shift og omlasting vil tvinge alt å starte på nytt fra begynnelsen. Og det er det jeg ønsker å gjøre her. 

Og legg merke til alle disse rader som bare dukket opp. Det viser seg at i en gitt web side, kan det være bare en fil involved-- hello.html-- eller det kan være 52, som i dette tilfellet. Når jeg besøker google.com, tilsynelatende, nettleseren min spark av 52 separate HTTP-forespørsler. Hvorfor er det? 

Vel, se på hva som er inni på denne nettsiden opp toppen. Det er ikke bare tekst, men det er faktiske bilder katter over til høyre. Det er en fargerik logo her oppe til venstre. Det er alle disse ikonene for en mikrofon og så videre. Det er en masse stykker, bygge blokker, skrape stykker, om du vil, til denne nettsiden. Og hva leseren gjør på får den aller første filen, som er denne raden her, er det i hovedsak itera over HTML toppen til nederst, venstre til høyre, på jakt etter ting som bilde-koder eller andre koder som er å nevne andre filer og når den ser dem, går og henter dem via HTTP, levedyktig hele konvolutt metafor, og så viser dem i hensiktsmessig plassering i web siden. 

Men legg merke til her hvis jeg fokuserer på de første kast, søke katter, Legg merke til at, ja det er ved hjelp av HTTP 1.1. Og dessverre, Google Chrome akkurat nå i versjon 39 er slags dumbing ting ned og ikke viser oss den faktiske overskrifter. Men hva ble faktisk sendt en forespørsel for ikke å kutte, men / search? q = katter. 

Nå, hvorfor er det viktig? Vel, jeg kommer til å slutte fra dette at hvis du Google støtter søk av dette skjemaet, hvorfor jeg ikke gjennomføre min egen søk motor for CS50, men bare foran ende, bare det grafiske brukergrensesnittet. Og vi vil outsource bakenden, selve søkeresultatene til Google. 

Så hvordan kan jeg gjøre dette? Vel, la meg gå inn i gedit over her. Og la meg gå videre og åpne opp, la oss si, en ny fil. Og jeg kommer til å lagre denne midlertidig som søk-0.html. Og så til slutt, vil vi fort frem til den jeg pre-forberedt. 

Og jeg kommer til å raskt piske opp doc typen html åpen brakett html tett brakett html. Så jeg kommer til å gjøre hodet tett hode åpent tittelen CS50 Søk i stedet for Google-søk. Ned her jeg kommer til å ha kroppen, her nede nær kroppen. Og nå trenger jeg CS50 søk. Og faktisk, la oss bygge dette trinnvis. Jeg kommer til å gå videre og lukke denne og faktisk sette det i min offentlig katalog. Så gi meg bare et øyeblikk. search-0.html-- Jeg kommer til å timelig kaller det search.html. Jeg kommer til å chmod det en + r search.html. Og nå kommer jeg til å åpne den. All right, så det var fort. Men målet var rett og slett å få oss til poenget av å ha denne teksten fil kalt search.html. Så ikke mye å se på ennå. Faktisk, hvis jeg går til nettleseren min, og gå til search.html, det er alt det er. Men vet du hva? Jeg kan være litt mer avansert. Jeg leste i en bok at det er en overskrift tag kalt h1. Og jeg kommer til å gå videre og bruke det åpne h1 og nær h1. Oppdater siden. Og nå er det større og dristigere, ikke alle som interessant, men minst det strukturelt mer interessant. Men nå la meg presentere et annet tag. Det viser seg at det er en form tag. Og la meg avslutte denne koden. Og det viser seg at det er en inngang kode som har en egenskap som kalles type, som er datatypen for feltet, hvis du vil. Og kommer til å være av typen tekst. Og dens verdi kommer å være CS50 søk. Lukk tag. Og det kommer til å være noen forestilling om åpne og lukke med skilletegn mellom tagger. 

La meg gå tilbake hit og se hva som skjer, lesse. Komme interessant. Det ser ut som det er et tekstfelt. Og faktisk, det gjorde jeg ikke ønsker å sette en verdi der ennå. La meg gå tilbake hit og faktisk få kvitt denne verdien for å holde det enkelt. I stedet for en verdi, hva jeg ville å gi denne tingen var et navn. Og jeg vet ikke hva det er, så jeg skal komme tilbake til det. 

Men under det, jeg vil ha å gjøre input type = send. Og denne verdien vil være CS50 søk. Og vi vil se hvorfor jeg flyttet verdien til dette. Når jeg laster, synes jeg å nå har begynnelsen på mitt eget søk motor, super heslig, men ærlig talt, det er ikke et langt innkast fra hva Googles standardside ser ut. 

Hvis jeg går her nå, kan jeg skrive inn katter og forhåpentligvis deretter Søk. Men jeg er ikke helt ferdig ennå, fordi jeg ikke har gjennomført, selvsagt, en database. Jeg har ikke gjennomsøkt nettet for søkeresultatene. Så jeg trenger å outsource det til Google. Så hvordan gjør jeg dette? 

Vel, først av alt jeg må legge til og handling attributt til formen min kode som er http://www.google.com/search. Og jeg vet at det bare fra å ha utledes ved å se nærmere på deres nettadresser. Og nå ta en gjetning. Hva bør dette tekstfeltet trolig bli kalt, basert på hvor vi kom fra før? 

PUBLIKUM:? Q. 

DAVID J MALAN:? Q. Og vi ikke egentlig trenger spørsmålet markere det viser seg, men q er faktisk det, q for søk sannsynligvis av standard, bare fordi det er hva Larry og Sergey kom opp med år siden. Så nå la meg laste denne siden. Det ser ikke så forskjellig. Men nå se hva som skjer. 

Hvis jeg skriver i katter og klikk CS50 Søk og la gå, merker jeg blir revet bort til selve Google. Nå er Google blir litt irriterende ved at de er tilføye en ekstra parameter, om du vil, til nettadressen. Det er alt skjer automatisk på Google side. 

Den viktigste delen er at jeg synes å ha generert denne forespørselen her. Og ja, det er hva som skjer. Når du har HTML som ser slik ut, dette er liksom webutviklere notasjon for å si, gå videre og lage et skjema at når den er sendt, det kommer til å gå til denne nettadressen. Og når nettadressen har gitt verdier for ting som q, ikke gå rett til denne nettadressen. Egentlig, gå til spørsmål mark og deretter q = katter. Tilføye parameter, den HTTP parameter sånn. 

Og bare for å være super presis, hva som blir utledes her-- men jeg vil være mer explicit-- er at metoden jeg vil bruke er få, i stedet for noe sånt post, som vi vil til slutt se. Så kort sagt, ganske enkelt ved å forstå HTML og bruke noen ganske enkle koder, vi kan nå begynne å lage vår egen front end user grensesnitt med et søk Motoren bak det. 

Men dette er selvfølgelig ganske heslig. Så la meg faktisk åpne opp en litt bedre versjon. Dette er den jeg forberedt på avansere som har noen kommentarer. Men du vil se at jeg ganske mye gjenskapt det. Så dette er allerede tilgjengelig på nettet. Og jeg tilfeldigvis preemptively gå til https bare for å holde det enkelt. 

Og nå skal vi åpne opp en neste iterasjon av dette. Er versjon 1 i stedet for 0. Hva hopper ut på deg som litt forskjellige i dette eksempel? 

PUBLIKUM: [uhørlig]. 

Ja, det er denne teksten justere center. Dette er litt rart her oppe. Men dette er faktisk nytt. Og kanskje gjette hva som kommer til å skje. Hvis jeg går til nettleseren min nå og besøke søke-1.html, det er nesten det samme. Men det er et skritt nærmere blir litt mer pen. Det er fortsatt stygg, men penere i at minst alt er nå sentrert. 

Så det viser seg at det som jeg bruker er et annet språk helt kalt CSS, Cascading Style Sheets. Og CSS, ærlig, snill av, etter min personlige mening, en atrociously designet språk. Det er veldig irriterende å huske alle de ulike detaljene. Men det er hva stylizes den Hele verdensomspennende nettet i dag. Jeg fornærmet noen. OK. Så la oss gå tilbake hit og se hvordan vi faktisk bruker dette. Og det viser seg, i hvert fall det er faktisk en ganske enkelt språk. Det er bare sentrale verdi parene, egenskaper og verdier, egenskaper og verdier. Ja, her er ett slik eiendom og verdi. 

Bare ved hjelp av stilen attributt på kroppen min tag og gi den en verdi på en ordet kolon og et annet ord, eller en eiendom og en verdi, Jeg kan påvirke estetikk på web-siden, ikke nødvendigvis strukturen ennå, men estetikk det. Og bare ved googling rundt, skjønner jeg at CSS, Cascading Style Sheets, støtter en egenskap kalt text-align, der verdien kan stå, høyre eller sentrum, for eksempel. 

Så nå når jeg reload denne siden, hva jeg fikk var en sentrert side, men fortsatt ganske stygg. La oss gå videre og åpne opp versjon 2 av Søk. Og nå merker jeg har gjort litt mer. Legg merke til at opp her på innsiden av hodet koden, kan det være mer enn tittelen. Faktisk, det er en stil tag. Og det er her det bare blir en litt rotete seeing CSS noen ganger. 

Legg merke til at jeg synes å ha noe som strukturelt ser veldig annerledes ut. Men her er navnet koden jeg ønsker å stilisert. Her er våre gamle venner krøllete bukseseler og lukket krøllete brace. Og så her er at eiendommen og dens verdi. 

Hvis jeg laste denne filen, search2.html, sluttresultatet er identiske. Men det er et skritt mot bedre design. Ved facto ut denne CSS, har jeg ikke blandes det med min HTML. Og faktisk, så vi får se, jeg kunne gjenbruke disse egenskaper og verdier. Hvis jeg ønsket å lage bunter av deler av min nettside sentrert, Jeg trenger ikke å skrive style = text-align sentrum over alt. Jeg kan sette på ett sted kanskje, liker seg på toppen. 

Men selv dette er ikke den beste design. Faktisk en av de tingene du vil lære som du tilbringer mer og mer tid med web-programmering er at jo mer du kan modularize ting og faktor ting ut som .h filer la oss faktor ting ut, liker helpers.c la oss faktor ting ut noen psets siden. På samme måte kan vi ønsker å oppnå dette. 

Så varsel versjon tre av search.html jeg har ryddet opp hodet siden og bare sette i dette, en link tag, som I motsetning til navnet, ikke gir deg en hyperkobling. Det linker til en annen fil ved hjelp av en href som har en verdi i dette tilfellet er search-3.css Så jeg skjønner vi kommer raskt. Men alt jeg gjør er snill med å flytte ting rundt. La meg åpne søk-3.css. Det er det, ingenting virkelig til det. Jeg bare kopiert og limt det inn i en ny fil, mye som vi priset ting ut til andre filer før. Og result-- helt underwhelming-- kommer til å være akkurat det samme. Men vi flytter toward-- nei, det er ikke det. Oh, jeg vet hvorfor. 

Så det ser ut til å være en bug. Og det er i en viss forstand. Men la meg åpne opp min kategorien Network. La meg oppdater siden. Ah, hvorfor er CSS ikke blir brukt? Vel, CSS-fil, på samme måte, har å være lesbare, så å si. Og det også er i dag forbudt. Så la meg gjøre en chmod a + r stjerne dot CSS-- whoops-- vi er prikk CSS er bare filtype for CSS-filer. Nå la meg gå tilbake til min nettleser og reload. OK, litt bedre. 

Nå la meg gjøre en siste ting. I søk-4.html. Jeg har en versjon som jeg trodde var mye kulere, om enn langt mer komplisert. La oss se på resultatet først. Lukk dette for å gi oss mer plass. Endre dette til søke-4, Enter. 

Og nå er en haug med ting er ødelagt. Jeg kommer til å gå tilbake i min katalog her. Og nå er jeg bare kommer til å gjøre en chmod av a + r på en file-- fordi jeg vet det exists-- kalt logo.gif, som er et bilde. Og nå lesse. Og wow-- så nå er jeg ganske nær, ærlig, å like 1999-versjonen av Google, og ærlig, 2014-versjonen av Google, ikke sant? 

Så det er nå kommer til deres hjemmeside, til slutt, hvis jeg søker etter katter. Og faktisk er det. Men hva gjorde jeg gjøre annerledes i denne versjon 4? Så vi vil ikke dvele for mye på det her. Du vil se dette i problemet satt syv til slutt. Men merker jeg gjorde et par ting. 

Jeg introduserte en div tag, som er divisjon, tilsvarende i ånden til et avsnitt tag. Men en divisjon er akkurat som, her er en rektangulær usynlig region av skjermen. La oss gi den et unikt identifikator, bunntekst, bare slik at vi kan snakke om det i vår HTML andre steder. Her er en annen div på siden hvis ID kommer til å være fornøyd. Det er innholdet på siden. Og her oppe er overskriften på siden. 

Med andre ord, har jeg vesentlig i HTML er mentalt ser denne nettsiden som tre komponenter, en header her opp med denne usynlige rektangel, innholdet i midten, og deretter bunnteksten der nede, selv selv om vi ikke ser disse tingene. Fordi jeg ønsker å i hodet mitt av siden her, eller i en CSS-fil, Jeg kan bruke denne syntaksen. 

Header er ikke et merke. Det er en ID så det viser ut at ved å gjøre #header, Jeg kan nå søke ett eller flere egenskaper til overskriften. Jeg kan gjøre det samme innholdet, den samme for innhold her. 

Så for eksempel, i bunnteksten, varsel alle disse egenskapene jeg legger til. Og jeg vet at de eksisterer bare ved lesing opp på dokumentasjonen for CSS. Skriftstørrelsen skal være smaller-- så noen relativ skriftstørrelse. Vekten kommer til å bli fet. Margin-- hvor mange piksler rundt it er 20 piksler. Og det kommer til å være sentrert. 

Men akkurat nå ser den siden som dette. Hvis jeg ikke er fornøyd med mitt eksemplar akkurat der, Jeg kunne gjøre noe sånt som fargen rød. Og så jeg kan lagre denne, laste, og nå har jeg stilisert bunnteksten. Så dette er bare antydet at strøm av hva du kan gjøre i en web-side å snu ting rundt. 

Og enda kulere enn dette, hvis du vil å rote rundt med faktiske nettsteder, du kan ikke permanent endre dem. Men hvis jeg åpner opp Chrome Inspector igjen og jeg går ikke til venstre side her, som viser Facebooks HTML, men viser til høyre side all sin CSS, du kan enten og forandre ting på sparket. Så la meg gå videre og gjøre dette. 

La meg gå videre og kontroll klikk på denne tilfeldig ord her, signere, og klikk Inspiser Element. Chrome svært beleilig hopper til h1 tag som Facebook bruker. Og legg merke til her Facebook har slags dovent hard kodet skriftstørrelsen som en eiendom her. 

Så kul ting er skjønt at hvis jeg faktisk gå inn her og si, oh, Facebook, jeg liker ikke at 64 piksler, kan vi nå endre Facebook. Selvfølgelig, vi bare endrer det for meg personlig i øyeblikket. Men dette er bare en annen verktøy i vår verktøysett som kommer til å tillate oss å finpusse og finne ut og også diagnostisere problemer i våre egne nettsider. Og vi kunne på samme måte gå over her, som er det samme. Hvis du virkelig ønsker å få fancy, jeg mener, nå kan du virkelig mutere siden og gjøre gale ting. 

Så hvorfor er dette all nyttig? Vel, til slutt, vi er kommer til å ønske å være i stand til å lage websider som er drevet av våre egne rygg ender, ikke ved å bare Google og outsourcing bakenden der. Vi har faktisk ønsker den verdi, for eksempel, av vår søkemotor handling attributt til går ikke til noen andre, men til noe sånt search.php, hvor search.php er på vår egen server, ikke på noen andres. 

Og så for å komme dit, vi faktisk behov for å innføre et nytt språk. Så vi har allerede sett på en ny språket her, eller to egentlig, HTML og CSS. Men de virkelig er bare strukturelle og estetiske språk. De er ikke programmering språk per se. Og det er omtrent like mye formell tid som vi vil bruke på dem. Fordi vi vil begynne nå å gå over til PHP. 

Så PHP er en faktisk programmeringsspråk. Det er et skriptspråk i den forstand at den er ment å være lettere vekt enn noe sånt som C. Og det er et tolket språk, noe som betyr at det ikke er utarbeidet. Så i et nøtteskall, hva gjorde det bety når vi brukte et språk som c og vi måtte kompilere den? Hva betyr det å kompilere C kildekoden? PUBLIKUM: [uhørlig]. DAVID J MALAN: Si det igjen? PUBLIKUM: [uhørlig]. DAVID J MALAN: Perfect. Det gjør den til binær. Det gjør den til nuller og enere fra faktisk engelsk-lignende kildekoden. Og da kan vi faktisk kjøre disse nuller og enere ved å føre dem gjennom CPU ved å dobbeltklikke på et ikon eller kjører en kommando. 

PHP og Python og Ruby og Perl og Javascript og bunter av andre språk er tolket språk, som er å si du trenger ikke samle dem. Snarere mate deg dem som innspill til et program kalt tolk. Og som tolk, som noen andre skrev, leser kildekoden topp til bunn, venstre til høyre og bare tolker disse linjene og gjør hva du sier. 

Så hvis du støter på en linje som sier print, det betyr ikke nødvendigvis konvertere print til tilsvarende nuller og enere. Det har nettopp dette tolk som et stort hvis tilstand som sier: hvis programmerer instruksjon er print, så gjør følgende. Så det tolker det bare av typen argumentasjon gjennom det du forteller det til å gjøre. 

Og PHP er et av disse språkene. Og PHP år siden er designet nettopp for web-programmering. Og det var i utgangspunktet en veldig slurvete rotete språk. Og ja, det er en stor mengden av dårlig PHP-kode der ute. Men språket selv har modnet med årene, så mye at nå er det faktisk en fantastisk neste trinn pedagogisk fra C fordi det er så darned kjent for alt du nettopp har sett i de siste ukene. 

Den ene første forskjellen vi får se er det ingen hovedfunksjon lenger. Når du begynner å skrive kode, det er bare kommer til å bli henrettet uansett hva, så vi får se om et øyeblikk. I mellomtiden, her er hva en variable ser ut i PHP. Det er litt annerledes, men bare så vidt. 

I PHP, det er ikke sterk typing. Det er uke skrive, som bare betyr at det er datatyper som strenger og tall og andre ting. Men du trenger ikke bry spesifisere hva de er lenger. PHP tall det ut for deg. Dollartegnet er bare en avgjørelse at PHP folk gjorde år siden slik at enhver variabel i PHP bare starter med et dollartegn. Det er faktisk slags nyttig ved at den hopper ut på deg litt mer. 

Men etter det, dette er en tilstand i PHP. Hva er annerledes i forhold til C? Trick question-- ingenting, som er faktisk veldig fin. Boolske uttrykk i PHP-- samme. Boolske uttrykk med og versus eller, brytere, sløyfer, sløyfer, loops-- OK, dette er annerledes. 

Så det viser seg at det er en par andre funksjoner i PHP. En av dem er faktisk dette, som er fantastisk praktisk. Hvis $ tall er en matrise som du har deklarert som tidligere i et program, du har denne fancy for hver konstruksjon at i stedet for å gjøre alt dette irriterende I er lik 0, er jeg mindre enn dette, [? Jeg ++?] for hvert tall som nummer, hvor hvert av disse dollar sign verdier er bare en variabel, og sistnevnte du kan tenke på som I. Du kan kalle det hva du vil. Jeg kalte det nummeret. Dette kommer til å iterere over matrisen kalles tall. Og på hver iterasjon, er det kommer til å automatisk oppdatere for deg dollartegnet nummer variabel, slik at du hele tiden har tilgang til variabelen du vil uten å måtte gjøre noe hakeparentes notasjon eller indeksering inn i en matrise. 

Utover det har vi til ting som matriser, som ser nesten det samme, bortsett fra at det er veldig vanlig, så vi vil se, både i PHP og Javascript til pre initial en matrise bruker hakeparenteser. C bruker klammeparentes. Så det er litt annerledes, selv om Vi gjorde egentlig ikke bruke det trikset mye. 

Men enda mer kraftfullt, PHP har assosiative matriser, som er en fancy måte si hash tabeller. Faktisk, hvis du ønsker å erklære en hash tabellen i PHP, i motsetning til i C-- hvor mange linjer med kode tok det å faktisk gjennomføre en hash table i C? Eller hvor mange linjer med kode er det tar å gjennomføre en hash table i C? Så det er nok mye, ikke sant? Det er et par dusin, kanskje 100 eller 200. Det er triviell. Eller det handler om å være, som du vil snart se, nontrivial å gjennomføre en hash table [Uhørbart] og også en prøve. Men i PHP-- og ærlig, jeg sannsynligvis bør ikke fortelle deg dette inntil Monday-- i PHP, hvis du ønsker et bord, gjort. Det er en hash table-- så med en kodelinje. Og 

En rekke språk gjør det. Ha det gøy med PSet fem. Så mye språk gjør dette. De gir deg disse abstraksjoner at andre mennesker, andre programmerere, har skapt for deg, slik at du kan stå på sine skuldre og begynne å bruke ideer som er super overbevisende, som hash tabeller og trær og prøver. Men du trenger ikke nødvendigvis å implementere disse tingene selv. 

Og så til slutt, hva vi kommer til å bruke PHP for er potensielt skrive programmer av den såkalte kommandolinjen. Vi kunne gjenskape hvert program Vi har skrevet dette semesteret så langt, bortsett fra kanskje Breakout som bruker SPL, som er spesifikk for C-i øyeblikket. Men alle andre oppgavesettet, sikkert Mario og Caesar og Vigenère og [? Crack?] Og videre, vi kunne re-implementere i PHP, og trolig litt lettere. 

Men hva vi til slutt kommer å bruke PHP for web-programmering. Og vi kommer til å introdusere neste uke en mental modell, et paradigme kalt MVC, modell view controller, som om du har gjort programmering før i Python eller Ruby eller andre steder, du kanskje vet om dette teamet med Rails og Django og lignende. Men hvis du er ny på dette også, vil du se at dette er faktisk en veldig naturlig forlengelse av faktorisering og hva slags utforming kode som vi har gjort i C. Vi skal nå bruke noen av disse timene til PHP slik at til syvende og sist, er vi implementere våre egne nettsider. Og hvis du er liksom hypnotisert eller overrasket at vi kommer til å gjøre alle de så raskt, innse at nesten alle semester, nesten 90% av studenter CS50, inkludert de som aldri har programmert før, ender opp med å gjøre endelige prosjekter som er basert på web-programmering. Og så vil du se at avkastningen er høy i ukene som kommer. Så vi vil se deg da på mandag. 

SPEAKER 1: Og nå, Deep Tanker ved Daven Farnham. Hash tabeller. 

[Latter]