[MUSIK SPELA] DAVID J MALAN: Okej, välkommen tillbaka. Detta är CS50. Detta är slutet av veckan sju. Och det är i slutet av denna renhållare jakt från problemet satt fyra att du kanske kommer ihåg. Efter återvinna alla dessa JPEG anställda, du utmanades, om du vill, att fotografera dig själv med så många av dessa folk som du kan. Vi fick en massa inlagor under de senaste veckorna, ja, en hel del precis innan middagstid idag, av vilka några är de här, fångas här in-- ser like-- Annenberg Hall på kontorstid, en här i Lowell House med Nick. Här är Ramon fångas på telefonen. Detta var vid en CS50 lunch. Detta var Jason Skyping med en mer kreativ klasskamrat, som ringde honom på detta sätt. Vi vet inte vad det var. 

[LAUGHTER] 

DAVID J MALAN: Men som är värt en gigabyte. Här är Chang, som bokstavligen sprang av scenen att undvika att bli fotograferade en dag, men så småningom fångas. Här är Nick. Här är Nick. Här är Nick. Och här är Alison ned av fälten. Och Zamyla även hittades vid balsal konkurrens. Så vi kommer att gå igenom dessa bilder, räkna ut som lämnat det mest tidigast, och belöning en fantastisk pris, som lovade i spec. Och vi kommer också att följa upp om det utrymme som var inblandad. 

Ett par announcements-- så lunch är, återigen, denna fredag ​​klockan 13:15. Om du vill ansluta sig till oss, OSA på webbadressen här. Jason visas igen här från en av sektionerna ett par år tillbaka, vilket hände att falla på Halloween. Och faktiskt, klädde han som pumpa det året. Om du tittar på det här avsnittet av hans från 2011 avsnitt åtta, om du är nyfiken, vid CS50.tv, tror jag Detta var det år då hans luftpump arbetade. 

Om du sedan titta på liknande avdelning under 2012, du ser den här Jason mycket tömd, eftersom dräkten fungerade inte längre, vilket bara är att säga denna fredag, om du skulle gillar att trampa upp en pumpa med Daven och Gabe och andra, OSA till cheferna vid cs50.harvard.edu adress. Det ser ut att bli väldigt roligt. Daven, vi vill höra, har ristat pumpor hela sitt liv. Gabriel från Brasilien har aldrig ristade en pumpa för Halloween. Så var det med dem som han lär. 

Seminarier, meanwhile-- så du lär dig snart om vad våra förväntningar är för lärdomsprovet, som i huvudsak kommer att koka ner till utforma och genomföra de flesta något projekt av intresse för dig, om än med förbehåll för godkännande och vägledning från din undervisning karl. Mot slutet av den termin, introducerar vi ett antal av seminarier, som är valfria klasser som leds av undervisnings stipendiater och Harvard personal, vänner av kursen över campus, om olika ämnen som är tangentiellt till Naturligtvis underliggande kursplan men icke desto mindre är tillämpligt, roligt och olika för potentiella slutliga projekt. 

Till exempel, först, om du vill att registrera, bege dig till den webbadressen där. Och detta är lineupen för Enbart årets seminarier. Men inser att vi har massor av seminarier från tidigare år, som alla är kopplade i seminarier menyn val på kursens hemsida. Så om du funderar går utöver din komfortzon eller plocka upp några nya färdigheter, exempelvis programmering iPhone appar med Swift, ett nytt språk från Apple eller Objective-C eller Android apps eller programmering [? cue?] glödlampor, eller något av de ämnen upp här och mer på grund av kontroll i registreringssidan. 

Så vi började och avslutades den Måndag med att titta på HTTP. Så snabb refresher-- HTTP, Hypertext Transfer Protocol. Men vad betyder det egentligen? Vad innebär det egentligen? Är det en hand? Jag vet att du bara skrapa huvudet. Men du vill föreslå vad HTTP är? 

Publik: Hur datorer kommunicera med [OHÖRBAR]. DAVID J MALAN: Jag missade den sista delen. Hur datorer kommunicerar with-- 

PUBLIK: Internetservrar. DAVID J MALAN: Good-- med internet servrar och specifikt, webbservrar. Eftersom minns, det finns ett gäng tjänster på Internet, av vilka Du använder troligtvis dagligen mellan chatten och budskap, chatt och webb och e-post, och liknande. Och HTTP är bara protokoll som webbläsare tala vid kommunikation med webbservrar, och vice versa. Och den analoga i mänskliga världen kan vara, Jag sträcker min hand för att skaka lite andra mänskliga talet och han eller hon erkänner genom att utvidga hans eller hennes hand också. Så det är bara ett protokoll, en uppsättning konventioner. 

Och vad faktiskt är dessa konventioner? Tja, bara kokar det ner till skicka meddelanden fram och tillbaka, som vi avbildas här. Och det finns ett par olika sätt i som du kan skicka dessa meddelanden. Och kanske den mest gemensamt kallas get. Och vi får se en kontrast till detta inom kort. 

Men en get begäran från en webbläsare till servern precis ser ut så här. Det är en massa text att det sätter insidan av ett virtuellt hölje. På utsidan av detta hölje gå ett par bitar av information. Vad behöver gå på kuvert, så att säga, för att få en begäran som detta från mig till en webbserver? Yeah. 

PUBLIK: Din IP-adress. 

DAVID J MALAN: Min IP-adress i fältet Från, så att säga, och, naturligtvis, den mottagarens IP-adress. Men i fallet med en webbpaket, Vi behöver lite mer i detalj Det är inte tillräckligt att bara skicka ett kuvert till en server, eftersom den servern kan vara lyssna för olika typer av internettrafik. Så vad mer behöver vi förutom mottagarens IP? Yeah? 

PUBLIK: Är det tcp? DAVID J MALAN: Good. TCP-- 

PUBLIK: Adress. 

DAVID J MALAN: Adress, eller hamn, som det kallas. Nära, men ett TCP-portnummer. Och det finns ett gäng av dessa. Men säkerligen den mest bekant bör så småningom vara 80, vilket är standard som används för webbtrafik. Och en annan bekant en snart kommer att vara 443, som används för säker webb trafik, webbadresser som börjar med https. 

Så det här är vad som händer insidan av detta hölje. Och få / bara sätt ge mig standard webbsida. Ge mig roten av det hårda köra på den webbserver. Och förhoppningsvis, på webben server kommer att svara med, OK och antalet 200, vilket är precis en konvention som säger, ja, alla verkligen är OK. Här är sidan. Den typ av webbsidan kommer att vara text, men mer specifikt, HTML, som vi håller på att dyka tillbaka in. Och dot dot dot bara sätt, här är HTML. Och det är där vi plocka upp historien idag, faktiskt skriva HTML, Hypertext Markup Language, vilket är det språk som webbsidor är skrivna. Det är inte ett programmeringsspråk. Det finns inga funktioner eller öglor eller villkor. Det är ett märkspråk, samt återigen ser idag, som gör att du kan ange hur man kan strukturera och stilisera estetiskt en webbsida. 

Så det var det och enda sida vi verkligen tittade på, om det kortfattat, på måndagen. Och märker några framträdande egenskaper. Det finns en hel del öppna vinklade konsol och nära vinklad konsol. Mellan de vinklade parentes är ord. Och vi kommer att starta kallar dessa ord taggar. Så öppna fäste huvud och sluten fäste huvud är de öppna och slutna taggar, eller start- och sluttaggar respektive av ett HTML-element, som vi kallar det, kallas huvudet. Och samma jargong gäller till kroppen i HTML och så vidare. 

Och vad är trevligt är HTML-- och faktiskt, vi ska bringar oerhört mycket tid på det, eftersom du oftast bara räkna ut vilka funktioner den har när du faktiskt har ett konkret problem att solve-- du kommer att upptäcka att en webbläsare är ganska dum. Det kommer bara att do-- inte olikt a computer-- det du ber den om. Och så när du har öppnat fäste HTML högst upp där, som i huvudsak betyder bara, hey, webbläsare, här kommer en webbsida skriven i HTML. 

När det ser öppet fäste huvud, som bara innebär, hey, webbläsare, här kommer huvudet, eller den översta delen av min hemsida. När den ser en stängd konsol huvud, som bara betyder, hej, det är det för huvudet. Standby för något annat. Och att något annat är tydligen kommer att bli kroppen. Och när du inte har en tagg, som du behöver bara hej, kommatecken, värld, det kommer bara att vara rå text som slutligen visas på skärmen. 

Nu kommer du att märka också inbuktningen här. Du kan förmodligen sluta hur vi stylizing det. Varje gång jag öppnar en tagg, så att säga, jag dra in. Och varje gång jag stänger ett tag, jag un-strecksatsen i samma anda som klammerparenteser. Och utöver det, jag är snäll av att använda min rätt. Observera att jag inte brydde sig att slå Ange insidan av denna titel taggen. Varför? Nåväl, jag bestämde bara att det såg lite renare för mig, det mänskliga, att bara inte bry göra det. Så återigen, det finns en del dom kallar bara som det finns i C eller något annat språk. 

Men märker också att denna utbuktning lämpar sig för en mental modell, inte över komplicera det. Men ett träd, eller hur? Om du tänker på en bana sidan, tydligen skrivit så här, som snyggt indragen på det sättet, du kan nästan tänka på det öppna fästet HTML stängt fäste taggen avgränsning roten av en nod, ett släktträd stil nod i stil med träden vi tittade på i fredags. 

Och faktiskt, vi har till höger här vad vi ska kalla en DOM, D-O-M, dokument objektmodell, ett finare sätt att säga ett träd som representerar denna HTML. Och märker att HTML har, ska vi säga, som ett släktträd, två barn. Till vänster är huvudet. Till höger är kroppen. 

Och precis som en själlös tanke övning, huvud, naturligtvis, har hur många barn enligt denna struktur? Så bara en, title-- och det är därför vi har pilen som går från topp till titeln. Så det är som om den personen i släktträd hade bara en avkomma. Och sedan titeln i sig kan sägas ha ett barn också. 

Minns att HTML hade Hej, kommatecken, värld under den. Och jag har bara dragit den inom en oval i stället för en rektangel bara att förmedla semantiskt att även om det är en nod i trädet, så att säga, det är typ av fundamentalt olika. Det är inte en tagg. Eller rättare, det är inte ett element. Det är bara en text nod, om ni så vill. Men dessa är helt godtyckliga mänskliga konventioner. Detta är bara nu mitt sätt representerar vad jag ska som ett aggregat call dokumentet. 

Och som en sidoreplik, saken på super övre vänstra hörnet, öppen fäste utropstecken doc typ HTML, det här ser ut som en tagg, men det är det dumma hörnet fall det är bara det, kopieras och klistras att ange webbläsare Detta är HTML version 5. Världens håller förändras vad första kodrad i en sida ska vara. Det betyder bara version 5. Så det gör inte riktigt ser ut som de andra. 

Okej, så med det sa, kommer du nu att uppskatta denna ganska denna dumma tattoo någon fick. 

[LAUGHTER] 

DAVID J MALAN: Okej, och nu ska vi faktiskt dyka att göra något med detta. Du kommer ihåg att förra gången Jag öppnade upp CS50 Appliance och jag gjorde något som enkelt som att öppna gedit. Och jag sparade filen även på min desktop-- stans special-- som hello.html. 

Så låt mig göra det igen-- hello.html Enter. Och nu i den här filen, jag ska gå vidare och replikera vad vi just saw-- doc typ html Sen kommer jag att gör öppen fäste html stängd fäste. Och då kommer jag att i förebyggande syfte öppna och stänga taggen. Varför? Bara så jag inte glömmer senare. Det är bara bra metoder, som att öppna klammerparenteser på en gång. 

Och vad kom nästa? Du kan tänka på tatueringen. 

Publik: Huvudet. 

David J MALAN: Huvudet. Och sedan i här, jag hade titeln, tror jag. Och titeln var godtyckligt, Hej, världen nära titel. Och sedan här nere, kropp, av course-- stäng sedan vi body-taggen. Och sedan bara något redundant, Jag hade samma sak här nere. 

Så jag menar att detta är en webbsida. Detta är något som kunde nu leva på webben, även om naturligtvis, det är bokstavligt talat lever på mitt skrivbord just nu. Men sannerligen, om jag minimerar gedit, Jag ser på mitt skrivbord dess ikon. Även om detta är den apparat, du kunde göra det på Mac OS utan Textredigerare eller Fönster med Anteckningar ännu. 

Och om jag går vidare och dubbelklicka att till och med, och select-- väl, låt oss inte välja att eftersom Chrome är inte öppna. Låt oss gå vidare och öppna Chrome. Och gör sedan Kommando-O för öppen Och gå till mitt skrivbord och öppna den filen. Det är så en webbläsare tolkar HTML, uppifrån och ned, från vänster till höger. Hej, här är browser HTML. Här är huvudet. Här är titeln. Här är kroppen. Och faktiskt är det så det gör den webbsidan. 

Men märker webbadressen. Ingen av er skulle kunna dra upp detta specifika sida på din bärbara datorer just nu, även insidan av din apparat via webbadressen, eftersom file: // betyder det faktiskt på mitt filsystem, min hårddisk, inte din. Så det här är inte så användbart. 

Låt oss nu gå mot med hjälp av en verklig webbserver. Och det visar sig att CS50 Appliance är mer än bara en miljö där Du kan skriva C-kod och kompilera och kör det som om du har gjort. Det också har konfigurerats av den personal för att representera en typisk webb server som är på internet, en som du kan betala för eller en som är i den så kallade molnet. 

Och det är igång standard fri öppen källkod programvara, till exempel, något heter Apache, som kanske är fortfarande den mest populära webb serverprogramvaran i världen att tusentals webbplatser använder idag. Och det är också ens har program som MySQL, som är en databas-server att vi så småningom kommer till, vilket bara är att säga Jag kan börja behandla min apparat som ett fullfjädrat server att jag inte betalar för någon annanstans. Den lever bara på min egen laptop för utveckling och bekvämlighetsskäl. 

Så låt oss gå vidare och dra fördel av detta. Jag kommer att gå vidare och öppna upp ett terminalfönster. Och jag kommer att gå vidare och move-- faktiskt, först är jag kommer att gå till mitt skrivbord. Om jag gör ls, det finns hello.html. Och jag kommer att gå framåt och börja använda en ny katalog vi har inte använt tidigare idag. 

hello.html-- Jag ska flytta till ../vhosts för virtuella hosts-- Mer om detta i future-- sedan i en katalog som heter localhost, vilket är smeknamnet på nästan alla datorer, oavsett om det är en Mac, PC, eller Linux-dator, och sedan speciellt i en katalog som vi, personalen som redan skapats för dig när du hämtat apparaten kallas offentligt. Och som namnet antyder, något Jag lägger i denna mapp, i teorin, kommer att nu bli offentliga, åtminstone för människor som har en direkt anslutning till min dator. 

Så nu vill jag gå vidare och göra cd till samma katalog så jag kan se vad som är pågår och typ ls. Och faktiskt, det är enda där. Jag hävdar nu att eftersom jag har lagt det här fil hello.html insidan av en katalog kallas allmänt inne i en katalog kallad lokalvärd insidan av en katalog kallade vhosts, vilka tack vare CS50 personal har förkonfigurerad för att vara roten på din webbserver, Jag kan nu förhoppningsvis göra detta. 

Jag kommer att öppna upp en ny flik. Och jag ska gå inte till fil: //. Jag kommer att använda faktiska http / lokalvärd, vilket återigen, är smeknamnet för min egen server. Och sen ska jag åka till vad filnamn, bara för att vara tydlig? Var finns den här historien förmodligen kommer? hello.html. 

Så med andra ord, vill jag nu här är min egen dator, min egen apparat, som om det är en faktisk server. Dess smeknamn är localhost. Men tänk på localhost som likadana Facebook.com google.com, oavsett. Det är bara min lokala namn. Och sedan det sista jag vill är i roten på hårddisken, så att säga, eller roten till webbservern, ergo snedstreck och sedan filnamnet hello.html. 

Låt mig zooma ut och tryck på Retur. Och faktiskt, det är nu min hemsida. Så det är lite annorlunda. Och det är precis som underwhelming. Detta är den gamla versionen. Låt mig krympa typsnittet tillbaka. Detta är den gamla. Detta är den nya. Men vad som i grunden händer nu är att HTTP används. 

Låt oss göra detta lite mer klar eller, om du vill, lite mer komplicerat. Låt mig gå längst ned till höger hörnet av min apparat. Och märker att allt detta tid, det har varit ett nummer. Det är den unika adressen din CS50 Appliance. Det är en privat adress, som impliceras av 172,16, vilket bara betyder bara att du fysiskt åtkomst till denna webbserver. Allt är brandvägg och snyggt skyddad från resten av världen på grund av detta adressering. 

Och nu märker men om jag går till den här adressen, inte i min apparat, men i Mac OS-- jag ska att gå tillbaka hit. Detta är min Mac nu. Och nu ska jag öppna upp denna version av Chrome här. Och jag kommer att gå till http: //172.16.25 / Och jag glömmer rest-- 133. 

Så jag kommer att besöka från min Mac den IP-adressen /hello.html Enter. Och nu ser jag från min Mac att min CS50 Appliance, som är IP-adressen är att nummer är faktiskt beter som en webbserver på Internet. Det har inte en trevlig lätt ihåg namn som Facebook.com, men det är med hjälp av HTTP tydligen, fastän Krom är typ att förenkla världen för oss men inte visar oss HTTP. Men detta är verkligen just detta. Chrome är bara spara lite tangenter i dessa dagar. Och det är vad vi nu ser. 

Så det är alla fina och bra. Men det är en ganska underwhelming sida. Låt mig gå in och göra något lite annorlunda nu. Så låt mig gå tillbaka till gedit. Och istället för hej, värld, låt oss sätta en bild. Och jag hävdade från before-- låta mig gå i min offentliga localhost katalogen. Och låt mig gå vidare och kopiera en massa filer från idag från min Dropbox mapp till här. 

Nu om jag skriver ls, titta på alla dessa filer att jag har distribueras av kursens hemsida före dagens, varav en är fortfarande hello.html. Så det finns att en. Och minns denna fåniga ett från förra time-- cat.jpg. Så låt mig försöka bädda cat.jpg insidan av min hemsida. 

Jag kommer att gå vidare och gör cat.jpg, spara. Låt mig gå tillbaka till Chrome. Och låt mig zooma in typsnitt och nu ladda om. Oj, där jag lagt detta? Standby-- jag har fortfarande den gamla versionen från min stationära öppen. Så låt mig gå in i min vhost, min localhost, min offentliga och hello.html. Så nu vill jag gå vidare och say cat.jpg insidan av kroppen där jag vill att det ska vara visas och ladda om. Naturligtvis är detta inte korrekt. 

Så jag måste berätta webbläsaren lite mer medvetet vad jag vill att den ska göra. Helt enkelt skriva namnet är uppenbarligen inte tillräckliga. Så minns att det fanns en annan tagg, bild, img för korta. Det är bara för att människor tycker inte om typ hela ord. Och då kan vi göra source = "cat.jpg". 

Och nu ska jag göra en sak annorlunda här. Även om alla våra taggar hittills har hade denna föreställning om en start tagg och en sluttagg, som egentligen inte gör meningsfullt för en bild, eller hur? En bild är antingen där eller inte där. Och så människorna har kommit upp med ett enklare konvention. När du har en tagg som kan både starta och sluta vid samma time-- Det kan vara tom, så att speak-- bara sätta snedstreck inuti taggen i slutet. Låt mig gå tillbaka till min webbläsare. Hit Reload Fan, är fel någonting. Du har säkert sett det här ibland på webben, även om det inte har varit ditt fel. Det är webbservern fel. Vilka dioder detta tyder på? Den är trasig. Det är där bilden tillhör. Yeah? 

PUBLIK: Men det gör det inte har tillgång till bilden. 

DAVID J MALAN: Det inte har tillgång till bilden. Det, eller ännu värre, kanske det inte ens existerar. Låt oss se om vi inte kan diagnostisera det. Minns från förra gången att om i Chrome, i apparaten, eller även på din Mac eller PC, du går till utvecklarmenyn och gå till Developer Tools alternativet, vilket förmodligen du har används inte mycket eller någonsin. Och om jag går till nätverk och ladda om sidan, låt oss faktiskt titta på HTTP förfrågningar som görs. 

Det ser ut som hello.html är faktiskt OK, därav 200. Men cat.jpg är en 403. Så det är inte en 404. Filen finns förmodligen. 403 betyder förbjuden. Så det här är lite förvirrande. Jag kommer att gå tillbaka till min terminalfönster. Låt mig zooma in här uppe. Och låt mig göra en ls. Det finns samma filer. 

Låt mig göra en ls-l, som du har förmodligen använts tidigare för att titta på fil storlekar kanske eller tidsstämplar. Och vi ser en massa överväldigande informationen. Men märker några detaljer. Här är hello.html i denna ro här och här är cat.jpg. Och det är bara apparaten är användarvänligt genom att markera JPEG s i lila så här. Men vad annat är annorlunda bredvid filstorlek och filnamnet? 

PUBLIK: [OHÖRBAR]. DAVID J MALAN: Ja, det finns ytterligare två R hit. Lägg märke till vad hello.html har på gång. Så visar det sig att namnet på den allmänna abonnent är viktigt. Allt i den här katalogen är tänkt att vara offentliga. Men det är inte tillräckligt bara för att släppa filer där. Du måste också ändra läge för filerna, ändra tillstånd för filen till proaktivt inte vara standardinställning, nämligen att bara jag kan läsa och skriva det, jag är ägaren. Jag vill att hela världen alla att kunna läsa min fil, så att säga. Läs betyder bara visa det. 

Och faktiskt, som du ser i problem sätta sju, det är vad dessa R medelvärde. Dessa två R: s medelvärde låta alla annanstans i världen också läsa den, särskilt nu när det är i den här katalogen. Så det enklaste sättet att åtgärda detta är att gå till min snabb och gör chmod för förändring läge och sedan gör en + r, helt och hållet, alla, allt, plus r för läsning, och sedan cat.jpg Enter. Ingenting verkar hända, vilket betyder oftast en bra sak. Så ls-l igen-- nu låt oss titta på cat.jpg. Och detta tillstånd verkar ha ändrats. Som en sidoreplik, om du gör en misstag och du, till exempel, just gjort your-- jag inte veta-- uppsats tillgängliga för allmänheten genom olycka, Du kan göra det motsatta, chmod a-r. Men ärligt talat, det borde inte vara i den offentliga katalogen i alla fall om det är oro. 

Så nu ska vi gå tillbaka till min webbläsare och ladda om. Och jag ska klicka den lilla Ghostbusters symbol för att rensa den del av skärmen så att vi kan se nya förfrågningar. Och faktiskt, här är Grump katt sedan tidigare. Men ännu viktigare, Tekniskt sett finns det antalet 200, vilket innebär att vi fick det OK. Okej, så det är allt bra och gott. Men vi gör inte det bästa av webbplatser, inte heller kommer vi att försöka för hårt för att gör den häftigaste av webbplatser idag. Men låt oss åtminstone göra något super förtrogen innan skramlande utanför några andra taggar. Så antar att jag inte bara vill ha en katt här. Anta att jag vill verkligen det här katt att länka till någonting. 

Jag kan, till exempel göra något liknande. a för ankar href för hyper referens equals-- och låt oss bara göra något liknande www.google.com nära citera nära fästet. Och nu söka efter katter. Nära ankartaggen. Så det här har bara en sorts av grunden ny detalj. Taggen är naturligtvis annorlunda. Det är namnet a för ankare href eller hyper referens. 

Men ännu viktigare, det finns denna syntaktiska funktion här. Detta är vad vi ska börja ringa inte ett tag, men ett attribut. Och ett attribut är något som modifierar uppförandet av en tagg. Och detta attribut, href, medel ändra beteende för detta ankare så att när den är tryckt, Det går till denna URL här. Och naturligtvis, är att URL Google. 

Samtidigt, vad är detta text här kommer att bli? Jo, det kommer att bli vad människan egentligen ser som den understrukna länk, så enkelt är det. Så låt oss prova detta. Låt mig spara den. Jag är fortfarande i hello.html. Men i de versioner på nätet, kommer du att se själva filnamnen vi pre-förberedda. Låt mig gå vidare och ladda om. Och nu är det en mycket underwhelming sida fortfarande. Men om jag hovrar över there-- och det är lite små, men-- du kan se i botten vänstra hörnet av skärmen, det faktiskt går till google.com. Och om jag klickar på den, kommer det vispa mig sätt att den färdiga skrevs. 

Men märker här en möjlighet för exploatering, precis som en parentes. Och vi ska återkomma till andra frågor om säkerhet inom kort. Eftersom det är denna dikotomi mellan var du går och vad du säger, du kunde göra något liknande this-- http://www.google.com. OK, och nu om jag laddar efter att ha sparat den sidan, det ser ut som jag kommer att gå till Google. Men det finns ingen anledning som jag måste gå till Google, eller hur? Jag kunde faktiskt gå till något i stil med badguy.com, ladda om sidan här. Och varsel, fortfarande ser ut som Google. Och bara om jag är skarp tillräckligt för att sväva över hit ser jag det även kommer att gå till en annan plats. 

Så om du någonsin har fått ett e-postmeddelande, särskilt en från Paypal, eller synes från Paypal ber dig att logga in till ditt konto, detta Därför ska du aldrig någonsin klicka på länkar i e-postmeddelanden, ärligt talat, alla länkar i e-postmeddelanden. Om du vet att du har faktiska pengar i Paypal eller Bank Amerikas eller Fidelity eller något hemsida, manuellt skriva in det. Eftersom ser hur lätt det är att lura någon till att presentera vad ser ut som en länk. Men det kunde faktiskt gå absolut någonstans. 

Och det finns mycket större hot än detta. I själva verket är detta en bit av en tangent nu, men en av de bästa jag någonsin sett som sedan har stängts, är någon ledde folk att-- så detta kan säga, Klicka här för att logga in på ditt konto, ett bankkonto. Och detta var Bank of the West. 

Så någon köpte detta. Och det är lite lättare att se det i en mono avstånd typsnitt zoomas in på en 30-fots projektor. Men när det är små tecken på en e-post som du får, detta ser ut bankofthewest.com, inte bankofthevvest.com, som någon hade betalat $ 10 för att köpa. Och då detta ledde dem till motsvarande del dåliga webbplats. 

Och du ser too-- faktiskt kan vi göra this-- om jag går till själva hemsidan, bankofthewest.com, återigen, minns från förra gången att om detta är deras webbsida och du är nyfiken på hur det fungerar, du kan säkert gå till Chrome utvecklingsverktyg. Och du kan se alla HTML vackert formaterad där. 

Men mer till den punkt, du cam-- låt oss stänga this-- du kan gå till Visa Utvecklare Visa källa. Varför får jag inte kopiera bara allt detta Och sen kan gå in i min lilla gedit fönster här och göra min egen webbsida. Spara i hello.html. Och förmodligen detta kommer att bryta, eftersom det inte är så enkelt oftast. Men nu när jag ladda min egen sida på min egen CS50 Appliance och trycka reload, OK, bröt lite grejer. Men jag är ganska nära att ha min egen bank webbplats, eller hur? Allt detta HTML-- 

[LAUGHTER] 

David J MALAN: --Jag inte actually-- och ni vet att det finns någon där ute som skulle faktiskt klickar dessa länkar också. Så klart, bröt lite grejer. Men det kommer att leda oss in i en diskussion, onödigt just nu, vad CSS, Cascading Style Sheets, är, och hur man faktiskt hämta de andra HTML-filer och JPEG-filer GIF-filer som hemsidan kanske använder. Men allt detta är accomplishable. Men det är verkligen kokar ner till dessa mycket enkla heuristik. 

Så nu ska vi bara skumma igenom en par andra exempel på HTML bara för att ge dig en känsla om vad mer du kan göra. Till exempel är denna list.html. Anta att jag ville göra en webbsida med en lista över hus i quad. Jag skulle kunna använda ul-taggen för oordnad listan och sedan listobjektet barnet och sedan iterera over-- eller lista, rather-- husen i fråga. 

Och om jag öppnar upp detta, låt oss göra detta. Låt oss gå inte hello.html, men att list.html. Fan också. Hur åtgärdar jag detta? Det är samma problem som tidigare, eller hur? Så låt mig göra chmod-- oops-- chmod a + r från list.html. Och nu om jag går tillbaka till min webbläsare och klicka på Uppdatera, där är den. Så om du någonsin velat göra en punktlista, kan du göra det. Om du vill vara super snygga och göra en ordnad lista, inte en oordnad lista, ändra dem till ol, ladda om sidan, och Nu kommer webbläsaren att numrera det åt dig. 

Vad mer kan vi göra? Tja, ett par mot andra, om du har långa stycken av text-- till exempel, en del Latinska texten som this-- och du vill ha det i separata stycken, öppen p, nära p för punkt taggen. Och gör det igen och igen. Och om jag nu öppnar den här filen, paragraphs.html, ja, det här blir irriterande. Så nu ska vi bara gå tillbaka till min snabb, chmod a + r r stjärna .html-- en trevlig liten wild card så att säga. Det borde fixa alla dessa problem för mig. Låt oss ladda om. Det finns tre stycken. 

Och nu ska vi gå vidare och öppna upp en annan. Vad sägs om bord? Du kommer att märka bord ser ut lite mer komplex. Men det är samma idea-- öppen tag, öppna tag, öppna, öppna, öppna, stänga taggen, öppen tag. Och dessa råkar stå för bord, vars gräns är tydligen kommer att bli en tjocklek 1-- oavsett att means-- tabellrad, bord data, vilket innebär en cell. Och om jag går tillbaka till min webbläsare här och gå till table.html, Du kan se något så här, ohyggliga. Men vi ska komma till saken där vi kan faktiskt göra det sötare än så. 

Så låt mig stipulerar för nu. Det finns klasar av fler taggar. Och HTML är underbart att plocka upp eftersom, uppriktigt sagt, allt du behöver göra är att titta på befintliga webbsidor som du känner. Och du är som, åh, det är hur de gjorde detta estetiskt. 

Eller så kan du leta upp någon online resurs för hur HTML fungerar, och du kommer att se att det finns en Hela vokabulär andra taggar. Men med den enkla mental modell Enbart att nästan varje etikett du öppnar har att vara stängd, det är verkligen är tillräckligt för att lära sig HTML efter förstå dessa grundläggande idéer taggar och attribut och välutformning att vi har pratat om, stängnings något som vi kan öppna så att vi inte blandar ihop en webbläsare. Så låt oss nu ta detta till en mer intressant nivå genom att gå till själva. Och låt oss gå till min Mac Här, till google.com. Och nu notice-- låt oss göra detta. Jag gong att gå till Inställningar Sök inställningar. Jag vill stänga av den här irriterande ögonblick resultat sak där den omedelbart börjar svara på ditt skrivande. Låt oss göra detta äldre skolan så vi faktiskt ser vad som händer. 

Så jag kommer att rädda min Googles inställningar här. Och nu notice-- jag ska söka efter något som katter. Och det är fortfarande gör auto komplett här, men baserat på saker folk har skrivit tidigare. Men lägg märke till vad som kommer att hända. 

I URL för tillfället är detta, bara google.com. Och tekniskt är det snedstreck. Google är bara sparar en karaktär och inte visar oss det. De visar oss https, bara att vara super lugnande att vi är på en säker eller krypterad sida. 

Så låt mig gå vidare och söka efter katter. Nu fick verkligen överväldigande snabbt. Titta på längden på den här webbadressen. Men det visar sig att det mesta av det här i webbadressen är faktiskt ganska värdelös. Jag ska börja att ta bort saker som jag inte förstår. Jag ser katter. Jag förstår katter. Jag vet inte varför katter är där igen. Jag vet faktiskt inte vad detta nonsens är. Så jag ska bara hålla lyfta fram och ta bort saker att jag inte förstår, destillering URL till just detta. 

Låt mig få komma in igen. Det ser ut som Google fungerar fortfarande. Så av någon anledning, de lägger till en massa saker till deras webbadresser som standard. Men det är inte absolut nödvändigt. Så vad är trevligt om det här? Nåväl, låt mig gå vidare och öppna Chrome Inspector. Det finns en liten mus genväg för det. 

Gå till fliken Nätverk. Och nu vill jag ladda om denna sida en gång. Och jag håller Shift. Som en sidoreplik webbläsare tenderar att cacha eller spara uppgifter bara för effektivitet skull. Men oftast, hålla Skift och omlastning kommer att tvinga allt att börja om från början. Och det är vad jag vill göra här. 

Och märker alla dessa rader som bara dök upp. Det visar sig att i en viss bana sida kan det finnas bara en fil involved-- hello.html-- eller där kan vara 52, som i detta fall. När jag besöker google.com, tydligen, min webbläsare sparkar av 52 separata HTTP-förfrågningar. Varför är det så? 

Tja, titta på vad som finns inuti på denna webbsida uppe. Det finns inte bara text, men det finns faktiska bilder av katter över till höger. Det finns en färgglad logotyp här uppe till vänster. Det finns alla dessa ikoner för en mikrofon och så vidare. Det finns en massa bitar, bygga block, skrap bitar, om ni så vill, på denna webbsida. Och vad webbläsaren gör på få den allra första filen, som är denna rad här, är det i huvudsak iteration över HTML top till botten, från vänster till höger, söker saker som bildtaggar eller andra taggar som nämner andra filer och när den ser dem, går och hämtar dem via HTTP, livskraftig helhet kuvert metafor, och sedan visar dem i lämplig plats på webbsidan. 

Men märker här om jag fokuserar på de första kast, sök katter, märka det, ja det är med hjälp av HTTP 1.1. Och tyvärr, Google Chrome just nu i version 39 är typ av fördumma ner saker och inte visar oss den verkliga rubriker. Men det som verkligen skickades en förfrågan för att inte slash, men / search? q = katter. 

Nu, varför är det viktigt? Tja, jag ska sluta från det att om du Google stöder frågor av denna form, varför kan jag inte genomföra min egen sökning motor för CS50, men bara på framsidan slut, bara det grafiska användargränssnittet. Och vi ska lägga ut den bakre änden, själva sökresultaten på Google. 

Så hur kan jag göra detta? Nåväl, låt mig gå in i gedit hit. Och låt mig gå vidare och öppna upp, låt oss säga, en ny fil. Och jag kommer att spara den här tillfälligt som sök-0.html. Och så småningom, vi ska snabbt fram till den jag pre-prepared. 

Och jag ska snabbt piska upp doc typ html öppen bygel html nära fästet html. Sen kommer jag att göra huvudet nära huvudet öppen titel CS50 Sök istället för Google-sökning. Här nere kommer jag att ha kroppen, här nere nära kroppen. Och nu behöver jag CS50 sökning. Och faktiskt, låt oss bygga detta stegvis. Jag kommer att gå vidare och avsluta detta och faktiskt lägga den i min offentliga register. Så ge mig bara ett ögonblick. sök-0.html-- jag ska tidsmässigt kalla det search.html. Jag ska chmod det ett + r search.html. Och nu ska jag öppna det. Okej, så det var snabbt. Men målet helt enkelt var att få oss till punkten av att ha denna text fil kallas search.html. Så inte mycket att titta på än. Faktum är att om jag går till min webbläsare, och gå till search.html, det är allt det är. Men vet du vad? Jag kan vara lite snyggare. Jag läste i en bok att det finns en rubrik tagg som heter h1. Och jag kommer att gå vidare och använda den öppna h1 och nära h1. Uppdatera sidan. Och nu är det större och djärvare, inte så intressant, men åtminstone det strukturellt mer intressant. Men nu låt mig presentera en annan tagg. Det visar sig att det finns ett formulär tagg. Och låt mig avsluta den taggen. Och det visar sig att det finns en ingångs tagg som har ett attribut som heter typ, som är datatyp fältet, om du kommer. Och kommer att vara av typen text. Och dess värde går vara CS50 Search. Stäng taggen. Och det kommer att bli någon föreställning om öppna och stänga med åtskilja taggar. 

Låt mig gå tillbaka hit och se vad som händer, ladda om. Att få intressant. Det ser ut som det är ett textfält. Och faktiskt, jag ville inte att sätta ett värde där ännu. Låt mig gå tillbaka hit och faktiskt få bli av med detta värde för att hålla det enkelt. I stället för ett värde, vad jag ville att ge denna sak var ett namn. Och jag vet inte vad det är, så jag ska återkomma till detta. 

Men under det, jag vill ha att göra input type = lämna. Och detta värde blir CS50 sökning. Och vi får se varför jag flyttade värdet till detta. När jag laddar, jag verkar nu ha början av min egen sökning motor, super avskyvärda, men ärligt talat, det är inte ett långt kast från det Googles standardsida ser ut. 

Om jag går här nu, kan jag skriva in katter och förhoppningsvis på Sök. Men jag är inte riktigt klar än, eftersom jag inte har genomförts, uppenbarligen, en databas. Jag har inte sökt igenom den webben för sökresultaten. Så jag måste lägga ut det till Google. Så hur gör jag detta? 

Tja, först och främst vill jag behöver lägga till och handling skriva min blankett tagg som är http://www.google.com/search. Och jag vet att det bara från att ha härledas genom att titta noga på deras webbadresser. Och nu tar en gissning. Vad ska det här textfältet förmodligen kallas, beroende på var vi kom från tidigare? 

PUBLIK:? Q. 

DAVID J MALAN:? Q. Och vi egentligen inte behöver fråga markera det visar sig, men q är verkligen det, q för frågan sannolikt genom standard, bara för att det är vad Larry och Sergey kom med år sedan. Så nu vill jag ladda om sidan. Det ser inte så annorlunda. Men nu se vad som händer. 

Om jag skriver in katter och klick CS50 Sök och släppa taget, märker jag får forslas bort till själva Google. Nu är Google vara lite irriterande eftersom de är att bifoga en ytterligare parameter, om man så vill, till URL. Det är allt händer automatiskt på Google sida. 

Det viktiga är att jag verkar ha genererat denna begäran här. Och faktiskt, det är vad som händer. När du har HTML som ser ut så här, det här är en slags webbutvecklare notation för att säga, gå vidare och skapa ett formulär att när det är in, det kommer att gå till denna URL. Och när webbadressen har gett värden för saker som q, inte bara gå till denna URL. Egentligen gå till fråga märket och sedan q = katter. Bifoga parametern, den HTTP parameter som. 

Och bara för att vara super exakt, vad som framgår här-- men jag ska vara mer explicit-- är att metoden jag vill använda är få, i stället för något som post, som vi så småningom får se. Så kort sagt, helt enkelt genom att förstå HTML och med hjälp av några ganska enkla taggar, Vi kan nu börja skapa vår egen främre slutanvändaren gränssnitt med en sökning motor bakom den. 

Men detta är naturligtvis ganska otäckt. Så låt mig faktiskt öppna upp en något bättre version. Detta är den jag upprättats i framåt som har några kommentarer. Men du kommer att se att jag ganska mycket skapas den. Så det här är redan tillgängliga online. Och jag råkar preemptively gå till https bara för att hålla det enkelt. 

Och nu ska vi öppna upp en nästa iteration av detta. Är version 1 i stället för 0. Vad hoppar ut på dig som något annorlunda i detta exempel? 

PUBLIK: [OHÖRBAR]. 

Ja, det finns denna text align center. Detta är lite konstigt här uppe. Men detta är verkligen ny. Och kanske gissa vad som kommer att hända. Om jag går till min webbläsare nu och besök sök-1.html, det är nästan samma sak. Men det är ett steg närmare vara lite mer söt. Det är fortfarande fult, men sötare i det åtminstone allt är nu centrerad. 

Så visar det sig att det som jag använder är ett annat språk helt och hållet kallas CSS, CSS. Och CSS, ärligt talat, är snäll av, enligt min personliga uppfattning, en atrociously utformad språk. Det är mycket irriterande att komma ihåg alla olika detaljer. Men det är vad stylizes den Hela webben idag. Jag förolämpade någon. Okej. Så låt oss gå tillbaka hit och se hur vi faktiskt använder det. Och det visar sig, åtminstone är det faktiskt en ganska enkelt språk. Det är bara nyckelpar värde, fastigheter och värderingar, egenskaper och värderingar. Ja, här är man sådan egendom och värde. 

Helt enkelt genom att använda stilen attribut på min kropp tagg och ge den ett värde på en Ordet kolon och annat ord, eller en fastighet och ett värde, Jag kan påverka det estetiska av webbsidan, inte nödvändigtvis strukturen ännu, men estetik det. Och bara genom att googla runt, inser jag att CSS, Cascading Style Sheets, uppbär en egenskap som kallas text-align, vars värde kan vara vänster, höger eller center, till exempel. 

Så nu när jag laddar denna sida, vad jag fick var ett centrerat sida, men fortfarande ganska ful. Låt oss gå vidare och öppna upp version 2 av Search. Och nu märker jag gjort lite mer. Lägg märke till att här uppe insidan av huvudet etikett, kan det finnas mer än titeln. I själva verket finns det en stil tagg. Och det är här det blir bara en lite rörigt seeing CSS ibland. 

Observera att jag verkar ha något som strukturellt ser mycket annorlunda ut. Men här är namnet på taggen jag vill stiliserad. Här är våra gamla vänner lockigt hängslen och sluten klammerparentes. Och så här är att egendom och dess värde. 

Om jag ladda denna fil, search2.html, slutresultatet är identiska. Men det är ett steg mot bättre design. Genom facto ut denna CSS, jag har inte sammanblandas det med min HTML. Och faktiskt, när vi får se, jag kunde återanvända dessa egenskaper och värderingar. Om jag ville göra klasar av delar av min hemsida centrerad, Jag behöver inte skriva style = text-align centrum överallt. Jag kan sätta på ett ställe kanske, gillar upp på toppen. 

Men även detta är inte den bästa designen. Faktum är att en av de saker du kommer att lära dig när du spenderar mer och mer tid med webbprogrammering är att ju mer du kan modularisera saker och faktor saker som .h filer låt oss faktor grejer, gillar helpers.c låt oss faktor saker några psets sedan. På samma sätt kanske vi vill uppnå detta. 

Så varsel version tre av search.html jag har rensas upp huvudet av sidan och bara sätta i detta, en länk tagg, som motsats till namnet, inte ger dig en hyperlänk. Den länkar till en annan fil genom ett href vars värde i det här fallet, är sök-3.css Så jag inser att vi kommer snabbt. Men allt jag gör är snäll att flytta runt saker. Låt mig fritext-3.css. Där är det, inget verkligen till det. Jag bara kopieras och klistras in den i ett nytt fil, ungefär som vi räknade grejer ut till andra filer innan. Och result-- helt underwhelming-- kommer att vara exakt samma. Men vi ska flytta toward-- nej, det är inte. Åh, jag vet varför. 

Så det verkar vara en bugg. Och det är i någon mening. Men låt mig öppna min fliken Nätverk. Låt mig ladda om sidan. Ah, varför är CSS inte tillämpas? Tja, den CSS-fil, på samma sätt, har att vara läsbara, så att säga. Och det är för närvarande förbjuden. Så låt mig göra en chmod a + r av stjärnan dot CSS-- whoops-- vi är dot CSS är bara filnamnstillägg för CSS-filer. Låt mig gå tillbaka till min webbläsare och ladda om. OK, lite bättre. 

Låt mig göra en sista sak. På jakt-4.html. Jag har en version som jag tänkte var långt kylaren, om än mycket mer komplicerat. Låt oss titta på resultatet först. Stäng det här för att ge oss mer utrymme. Ändra detta för att söka-4, Enter. 

Och nu en massa saker är trasiga. Jag kommer att gå tillbaka in i min katalog här. Och nu ska jag bara ska göra en chmod a + r på en file-- eftersom jag vet att det exists-- heter logo.gif, som är en bild. Och nu ladda om. Och wow-- så nu är jag ganska nära, ärligt talat, gilla 1999 års version av Google, och ärligt talat, 2014-versionen av Google, rätt? 

Så det är nu går till deras hemsida, i slutändan, om jag söker efter katter. Och faktiskt är det. Men vad har jag gjort annorlunda i denna version 4? Så vi kommer inte att uppehålla mig för mycket på det här. Du kommer att se detta i problem ställa sju småningom. Men märker jag gjorde ett par saker. 

Jag presenterade en div taggen, som är division, i samma anda som ett stycke tagg. Men en division är precis som, här är en rektangulär osynlig region av skärmen. Låt oss ge det en unik identifierare, en sidfot, precis så att vi kan tala om den i vår HTML annat håll. Här är en annan div av sidan vars ID kommer att vara nöjd. Det är innehållet på sidan. Och här uppe är rubriken på sidan. 

Med andra ord, jag har huvudsakligen i HTML am mentalt tittar på det här webbsidan som tre komponenter, en header här uppe med denna osynliga rektangel, innehållet i mitten, och sedan sidfoten ner nedan, även även om vi inte ser dessa saker. Eftersom jag vill i mitt huvud för sida här, eller i en .css fil, Jag kan använda den här syntaxen. 

Nick är inte en tagg. Det är ett ID så det vänder ut att genom att göra #header, Jag kan nu tillämpa en eller flera egenskaper till header. Jag kan göra samma innehåll, samma för innehåll här. 

Så till exempel, i sidfoten, meddelande alla dessa egenskaper jag lägga. Och jag vet att de existerar bara genom att läsa upp dokumentationen för CSS. Teckenstorlek kommer att bli smaller-- så några relativa teckenstorlek. Vikten kommer att bli fet. Margin-- hur många pixlar runt det-- är 20 pixlar. Och det kommer att vara centrerad. 

Men just nu, sidan ser ut så här. Om jag inte är nöjd med mitt exemplar just där, Jag skulle kunna göra något liknande färg röd. Och då kan jag spara detta, ladda om, och nu har jag stiliserad sidfoten. Så det här är bara antyder makten av vad du kan göra i en webbsida att ändra runt saker. 

Och ännu kallare än så här, om du vill att rota runt med verkliga webbplatser, du kan inte permanent ändra dem. Men om jag öppnar upp Chromes Inspector igen och jag går inte till vänster Här, som visar Facebooks HTML, men visar på höger sidan alla dess CSS, kan du antingen och ändra saker i farten. Så låt mig gå vidare och göra det. 

Låt mig gå vidare och kontroll klicka på denna slumpmässiga ord här, underteckna, och klicka Inspektera Element. Chrome hoppar mycket bekvämt till h1 tagg som Facebook använder. Och märker här Facebook har slags slött hårdkodad teckenstorlek som en egenskap här. 

Så cool sak är dock att om jag faktiskt gå in här och säger, åh, Facebook, jag tycker inte om det 64 pixlar, kan vi nu ändra Facebook. Visst, vi bara ändra det för mig personligen just nu. Men detta är bara ännu en verktyg i vår verktygslåda det kommer att ge oss möjlighet att justera och räkna ut och även diagnostisera frågor i våra egna webbsidor. Och vi kunde likaledes gå över här, vilket är samma sak. Om du verkligen vill få lust, jag menar, nu kan du verkligen mutera sidan och göra galna saker. 

Så varför är det allt bra? Tja, i slutändan är vi kommer att vilja vara kunna skapa webbsidor som drivs av vår egen rygg ändar, inte genom att bara Google och outsourcing bakändan där. Vi vill faktiskt värde, till exempel, av vår sökmotor agerande skriva gå inte till någon annan, men till något liknande search.php, där search.php ligger på vår egen server, inte på någon annans. 

Och så för att komma dit, vi faktiskt behovet av att införa ett nytt språk. Så vi har redan tittat på en ny språket här, eller två egentligen, HTML och CSS. Men de är egentligen bara strukturella och estetiska språken. De är inte programmering språk per se. Och det är ungefär lika mycket formella tid som vi tillbringar på dem. Eftersom vi ska börja nu att övergå till PHP. 

Så PHP är en faktisk programmeringsspråk. Det är ett skriptspråk i den meningen att det är tänkt att vara lättare vikt än något som C. Och det är ett tolkat språk, vilket innebär att det inte är sammanställt. Så i ett nötskal, vad gjorde detta när vi använde ett språk som C och vi var tvungna att sammanställa den? Vad innebär det att kompilera C källkod? PUBLIK: [OHÖRBAR]. DAVID J MALAN: Säg det igen? PUBLIK: [OHÖRBAR]. DAVID J MALAN: Perfect. Det visar den till binär. Det visar den till ettor och nollor från faktiska engelskliknande källkod. Och då kan vi faktiskt köra dessa nollor och ettor genom att passera dem genom CPU genom att dubbelklicka på en ikon eller kör ett kommando. 

PHP och Python och Ruby och Perl och JavaScript och klasar av andra språk tolkas språk, det vill säga du behöver inte kompilera dem. Snarare matar du dem som indata till ett program som heter tolk. Och det tolk, som någon annan skrev, läser din källkod topp till botten, vänster till höger och bara tolkar dessa linjer och gör vad du säger. 

Så om du får raden där det står print, det behöver inte nödvändigtvis konvertera print till motsvarande nollor och ettor. Det har bara denna tolk som ett stort om tillstånd som säger: Om programmerarens instruktion är print, gör sedan följande. Så det tolkar det bara med typ av resonemang genom vad du säger den att göra. 

Och PHP är ett av dessa språk. Och PHP år sedan utformades just för webbprogrammering. Och det var från början en mycket slarviga rörigt språk. Och faktiskt, det finns en enorm Mängden dåliga PHP-kod där ute. Men själva språket har mognat under åren, så mycket så att nu är det faktiskt en underbar nästa steg pedagogiskt från C eftersom det är så förbaskat bekant för allt du just har sett under de senaste veckorna. 

Den ena ursprungliga skillnaden vi får se finns det finns ingen huvudfunktion längre. När du börjar skriva kod, det är bara kommer att få verkställas oavsett vad, som vi ser i ett ögonblick. Under tiden, här är vad en variabel ser ut i PHP. Det är lite annorlunda, men bara knappt. 

I PHP finns det inte stark typning. Det finns vecka att skriva, vilket bara innebär att det är datatyper som strängar och siffror och andra saker. Men du behöver inte bry specificera vad de är längre. PHP siffror ut det åt dig. Dollartecknet är bara ett beslut att PHP människor gjort år sedan så att varje variabel i PHP bara börjar med ett dollartecken. Det är faktiskt ganska användbart i det den hoppar ut på dig lite mer. 

Men efter det här är ett tillstånd i PHP. Vad är annorlunda jämfört med C? Lura question-- ingenting, som är faktiskt riktigt trevligt. Booleska uttryck i PHP-- detsamma. Booleska uttryck med och kontra eller, switchar, slingor, slingor, loops-- OK, den här är annorlunda. 

Så visar det sig att det finns en par andra funktioner i PHP. En av dem är faktiskt denna, vilket är fantastiskt bekvämt. Om $ tal är en array som du har förklarats tidigare i ett program, du har denna fantasi för varje konstruktion som istället för att göra allt detta irriterande jag är lika med 0, I är mindre än detta, [? I ++?] för varje nummer som nummer, där varje av dessa dollarteckenvärden är bara en variabel, och den senare du kan tänka på som I. Du kan kalla det vad du vill. Jag kallade det nummer. Detta kommer att iterera över arrayen kallas nummer. Och på varje iteration, det kommer att automatiskt uppdatera för dig dollartecken nummer variabel så att du hela tiden ha tillgång till den variabel som du vill utan att behöva göra något hakparentes notation eller indexering i en array. 

Utöver detta har vi även saker som matriser, som ser nästan samma, förutom att det är väldigt vanligt, eftersom vi ska se, både i PHP och Javascript till pre initiera en array med hjälp av hakparenteser. C använder klammerparenteser. Så det är lite annorlunda, även om vi verkligen använder inte det tricket mycket. 

Men ännu mer kraftfullt, PHP har associativa arrayer, vilket är ett finare sätt att säga hashtabeller. Faktum är att om du vill deklarera en hash bord i PHP, till skillnad från i C-- hur många kodrader tog det att faktiskt genomföra en hashtabell i C? Eller hur många rader kod är det tar att genomföra en hashtabell i C? Så det är nog en hel del, eller hur? Det är några dussin, kanske 100 eller 200. Det är triviala. Eller det är på väg att bli, eftersom Du kommer snart att se, icke-trivial att genomföra en hashtabell [OHÖRBAR] och även ett försök. Men i PHP-- och ärligt talat, jag förmodligen inte berätta detta tills Monday-- i PHP, om du vill ha ett bord, gjort. Det är en hash table-- så med en rad kod. Och 

Många språk gör det. Ha kul med pset fem. Så många språk gör detta. De ger dig dessa abstraktioner att andra människor, andra programmerare, har skapat för dig så att du kan stå på sina axlar och börja använda idéer som är super övertygande, som hashtabeller och träd och försöker. Men du behöver inte nödvändigtvis genomföra dessa saker själv. 

Och så i slutändan, vad vi kommer att använda PHP för är potentiellt skriva program av den s.k. kommandorad. Vi kan återskapa alla program Vi har skrivit den här terminen så här långt, utom kanske Breakout som använder SPL, som är specifik för C vid tillfället. Men alla andra problem inställt, säkert Mario och Cesar och Vigenère och [? Crack?] Och framåt, vi kunde åter genomföra i PHP, och nog lite lättare. 

Men vad vi i slutändan kommer att använda PHP för är webbprogrammering. Och vi kommer att presentera nästa vecka en mental modell, ett paradigm som kallas MVC, Model View Controller, som om du har gjort programmering tidigare i Python eller Ruby eller någon annanstans, du kanske vet av denna lag med Skenor och Django och liknande. Men om du är ny på detta också, kommer du att se att detta faktiskt är en mycket naturlig förlängning av faktorisering och den typ av konstruktion kod som vi har gjort i C. Vi ska nu tillämpa vissa av dessa lektioner till PHP så att i slutändan är vi genomföra våra egna webbplatser. Och om du är typ av hypnotiserade eller förvånad att vi kommer att göra alla av så snabbt, inser att nästan varje termin, nästan 90% av studenter CS50, inklusive sådana som aldrig har programmerat förut, sluta göra examensarbeten som är baserade på webbprogrammering. Och så kommer du att se att avkastningen är höga i de kommande veckorna. Så vi kommer att se dig sedan i måndags. 

TALARE 1: Och nu, Djup Tankar från Daven Farnham. Hashtabeller. 

[LAUGHTER]