SPEAKER 1: Minden, nem szívesen vissza. Ez CS50. És ez a kezdete a hét kilenc. És ez a kezdete a többi idejét CS50, melyben átmenet most végre a weben szempont a tanfolyam, ahol akkor meg, hogy sok a fundamentumok, hogy mi már exportáló hetek még mindig jön vissza, hogy látogassa meg, vagy kísérteni, minket. De most, rájössz, hogy ez egy nagyságrenddel könnyebben elérni bizonyos feladatokat és bizonyos problémákat - olyannyira, hogy még akkor is azt hitted, bizonyos probléma díszlet szórakozás a maga módján, azt hiszem, hogy talál beállítva, hogy p 7, 8 p állítva, majd végül a végleges projekt lesz annál is inkább örömteli, mert akkor meg, hogy elkezdjük magától értetődőnek most a dolgok, mint a memória kezelése, és mutatók, és mi a helyzet az a motorháztető alatt. És ismét, tematikus, mind az egész félévben már nem volt ilyen réteg és rétegződés. És most valami fel Itt állt a vállak hét múlt. 

Nos, emlékszem az utolsó alkalom, hogy beszélt arról, hogy az internet működik. És ez talán egy leegyszerűsítés, de ne feledje, hogy minden számítógép a világon van egy IP foglalkozik, bár ez egy kicsit a leegyszerűsítés is. És ezek a címek használják egyedülállóan meghatározza, hogy a gépek Ha adatokat küld, vagy csomagok, hogy úgy mondjam, akkor van egy kezdőpontja címét és a célállomás címét. És ezek ugyanazt az IP-címeket lehet használni mind a jó és a rossz is, nyomon követni az Ön, például. Sőt, mindenki közületek egy laptop Jelenleg nyitva, vagy a telefont a zseb van IP-címe A Harvard hálózatán. És ez nem is olyan nehéz, hogy összefüggésben, hogy az, hogy ki és hol ezekben a napokban. De még az, hogy talán a jövőben. 

Most gondoltam, hogy vissza néhány emlékek [? növelése?], és adja meg másik klip a show lehet, hogy talál ismerős. Ha tudnánk homályos a fények csak néhány másodpercig. A show Numb3rs. 

SPEAKER 2: Ez egy 32 bites IPP4 címét. 

SPEAKER 3: IPP, mint az internet? 

SPEAKER 2: Private hálózat. A Amita privát hálózat. Ő annyira csodálatos. 

SPEAKER 3: Ugyan már, Charlie. 

SPEAKER 2: Ez. A tükör IP-címet. Ő hagyta, hogy megnézzük, mit csinál, valós időben. 

SPEAKER 1: OK, így néhány dolgot stimmel ezzel a képpel. Tehát az egyik, és ez elfogadható, ez valójában nem érvényes IP-címet. Érvényes IP-címet kell lennie számok Az űrlap w.x.y.z, ahol az egyes ezeket a leveleket a 0-tól 255. De ez rendben van, mert, mint a filmeket, ahol hamis telefonszámot, hogy hamis IP-címek. Valójában nem hit igazi szervereket. 

De ne feledd, hogy ez egy böngésző. És a böngészők nem indul kimenetre számítógépes kódot, mint ez. És ha megnézzük egy kicsit mélyebbre, észre hogy a nyelvet, hogy ők látják A képernyő egy nyelv neve Objective C, amely a nyelv amely iPhone apps van írva, különösen azokat, amelyek ceruzák, ahogy látod a forráskód itt. 

OK, azt hittem, hogy ez vicces. Tehát ezt a kódrészletet egyáltalán semmi köze, amit a adott epizód volt szó. Tehát a vicc van valami az emberek figyelembe ezt adni. De ez nem olyan nehéz, hogy ezek a helyes technikai adatokat. És én arra kérjük Önt. És tényleg, 50 is nagyon jól elrontani A sok TV-műsorok és filmek, vagy mert rájössz, hogy ez csak Nem lehet mit akarnak Ennek a képernyőn. De valóban, ez az a kód, amit lehet látni egy iPhone alkalmazás vagy Mac OS alkalmazás. Ennek semmi köze biztonság. Így tartsa a szemét ki több olyan szórakoztató dolgokat. 

De ma már kezd merülni az igazán mélyen egy egész sor nyelven. Egy valóban, egyik átfogó takeaways ezen részének Természetesen nem az, hogy megtanulják, hogyan kell programozni PHP nem tanulni SQL önmagában nem tanulni JavaScript önmagában, hanem tanítani magát, hogyan kell tanítani magát az új nyelv, mert valóban, kezdjük, hogy most a képzés kerekek le úgy, hogy miután Természetesen a végén, akkor nem várható a 20 oldal specifikáció mondani, hogy milyen hogy végre néhány programot. Van elég összetevőket a szem előtt tartva, és annyi eszközök a szerszám készlet, amellyel kezdeni épület megoldásokat érdekes , hogy néhány diák csoport, néhány kutatási projekt, vagy tényleg valami az Ön számára. 

Tehát felé célból emlékeztetni arra, hogy ez A képen rajzoltam utoljára. És ez két számítógép, ügyfél-és Sever, beszél egymással. És a jegyzőkönyv, a nyelv, így a beszélni, hogy ez a két számítógép történik hogy beszél az úgynevezett HTTP. És ez még csak a protokoll által használt számítógépek át keresztüli információ a világhálón. A web, persze, csak az egyik szolgáltatás futó az első helyen a úgynevezett internet. Mi egy másik szolgáltató elérhető tetején az internet manapság? Néhány más protokoll vagy - mi az? 

Közönség: FTP. 

SPEAKER 1: FTP. Így File Transfer Protocol egy másik. A legtöbb akkor valószínűleg nem használta. De a legtöbben valószínűleg használt dolgok, mint Gchat vagy azonnali üzenetek általában Természetesen e-mailt. És azok is, olyan szolgáltatások, amelyek futnak tetején az internet, mert a A nap végén, az interneten is tényleg csak kap adatokat pontból pont B. és használja a több részecskék önmagában, az egyikük vagy két ezek közül legáltalánosabban az úgynevezett TCP / IP, ami azt jelenti, hogy egy számítógép az interneten is lehet ezzel különböző dolog, e-mail, és a web, és így tovább. Google nem sok ez. Hogy vannak a szolgáltatások egyedülállóan azonosították, nem azt mondjuk, a számítógép amely valójában csinál több dolgot? 

A port számát. És ezek csak önkényes emberi egyezmények, mint 80 web, 443 titkosított web, 25 e-mail. És van egy csokor más. És ezek a számok csak szerepelnek a csomagokat az információ, a virtuális boríték, hogy valóban tartalmazott egy kérés vagy válasz. 

Tehát, ha kap vissza választ a web, általában, nem lát számok egyáltalán szempontjából a státusz kódot a választ. Valójában nem látja a belső működését a csomagok, hogy jöjjön vissza. De 200 valóban azt jelenti, OK. És ez azt jelenti, minden rendben van. Lehet, hogy láttam egy csomó ilyen. Amely talán a leggyakoribb láttad a weben? 

404. Ez csak azt jelenti, a fájl nem található. Ez azt jelenti, hogy valaki elcseszte. Meg is tette, elírásokért az URL-t, vagy valaki más tette azáltal, hogy egy érvénytelen URL, vagy törölte az fájlt, és az URL-t továbbra is használják az emberek. Így tetszőleges számú oka lehet magyarázni miért a fájl nem található. És látni fogod, hogy a hetek, Ezen egyéb hibakódok, és akkor kihasználni néhány közülük. A legrosszabb 500. Ha kapsz egy 500 hiba kódot már írott, gondolom, hogy mivel a fajta a analóg seg hibák a világ a webes programozás. Ez nem annyira szörnyű. De ez csak azt jelenti, hogy valahol, elcseszte. Tehát várom, hogy ilyen. 

De lássuk, mi is ezeket a kontextusban. Hadd menjen a böngésző itt és tegye a következőket. Szóval ez a Chrome, ami történik, a kell szerelni a készüléket. De a legtöbb minden böngésző ezekben a napokban van valami hasonló funkciót. Én megyek be a Chrome menü és válassza az Eszközök és én megyek a Developer Tools. És látni fogod, hogy ez a kis panel nyílik meg az ablak alján. Egy másik parancsikont, hogy őszinte legyek, hogy én általában használ magam, hogy jobb klikk vagy a Control kattintson bárhová a weben oldal és csak megy Vizsgálja Element. És ez nem csak megnyitni ez az Ön számára. Azt is nyitott, különösen, Az elemek tételt a bal oldali. 

Így vagyunk természetesen látni Google. Megváltoztatták a logót ma. De ha lapozás itt, észre , hogy az elemek, látod úgynevezett HTML, HyperText Markup Nyelv, és ez a nyelv hogy ez és az összes weboldalt, Tényleg, nem írt be De valójában formázva számunkra sokkal több olvashatóan mint általában az. Sőt, ha kicsinyíteni, és helyette Csak jobb klikk vagy a Ctrl Click kattintson az oldalon, aztán megy megtekintése Oldal forrása, ez a szó, amit Google küldött le a böngészőt. 

Szóval néhány személy vagy személyek írta Google.com segítségével a forráskód. A legtöbb ilyen nem HTML. Ez valójában egy nyelv úgynevezett JavaScript, amely akkor jön a szerda. De mi Chrome, és mi minden böngésző tehet nekünk, ez a fajta látni múlt minden zavaró a őrült szintaxis, és helyezze vissza white space nekünk, és még a szintaxis kiemelése, vagy színezése dolog számunkra. Így rájössz, hogy ezek az úgynevezett fejlesztői eszközök beépített böngésző teszi az élet így, így sokkal könnyebb mert akkor tárja fel, Ebben a menüben felület, pontosan mi a mögöttes forráskód az minden oldal az interneten. És valóban, ez az egyik leginkább hatékony módja, hogy megtanulják, hogyan kell csinálni valami új, legalábbis, ha az oldal nem olyan bonyolult, hogy elborít, a kezdeni kutakodni ez HTML, nézd at az úgynevezett CSS, ami majd jön hogy egy kicsit is, hogy egy megértése, hogy hogyan programozó végre néhány konkrét jellemzője az oldal. 

De még ennél is érdekesebb technikailag jobb most ez lesz az. Ha elmegyek a Network fülön, nézzük most törléséhez. Megyek kattintson a kis kereszt szimbólum itt, majd megy egy másik weboldalon. És én csak úgy írja A Facebook.com. Nem HTTP, HTTPS nem, nem WWW. Nézzük meg, mi történik valójában itt. 

Enter. Most észre egy csomó dolgot csak meg ebben alsó panel, a Amellett, hogy a weboldal megjelenő tetején. Megyek, hogy lépjünk vissza a Hálózat fül itt, és megyek kattintson az első sorban. Milyen ez az eszköz fog jelenteni számunkra az mindenki a HTTP kérések hogy gyorsan csak ment vissza, és között oda a böngészőm és a Facebook szerverén. És így mindenki azokat a sorokat képvisel egy ilyen kérelmet, illetve válasz, egy vagy több ezek a virtuális borítékot. Vagy még véletlenül, ez olyan, mint egy ember mint egy ember, az ügyfél a étterem, kér valamit újra, és újra, és újra. És a pincér folyamatosan hozza vissza az egyik egy időben. 

Tehát most, ha én nagyítás ezt, észre és ez lesz az a fajta dolog hogy te szívesen és ösztönözni játszani a saját, mert nem megy át minden nagy részletességgel. De észre van egy néhány al tabs itt - Fejlécek, Preview, Response, Cookie-k, és időzítése. Elmegyek nézni fejlécek most azért, mert ezek a kis összetevők belül a borítékot, segít az adatok eljutni, és a helyeket. 

Tehát először hadd kattintson erre, megtekintése Forrás mellett Kérés fejlécek. Ott van a kéréssel, hogy a böngészőm, Króm, ebben az esetben, elküldte belseje hogy a virtuális borítékot. Majd visszahívja múlt héten kézzel gépelt, miközben úgy tesz, mintha egy böngésző. Aztán emlékeztette a szervert, hogy ez keresi a host neve Facebook.com. És akkor ott van egy kicsit misztikus információ, hogy mi lesz hullám kezünket most. 

De ha elkezd lapozás most Ebben az ablakban, hadd tegyem a válasz fejlécet. Ez volt az, amit ez a virtuális boríték jött vissza Facebook.com. És ha csak kattintson a Forrás megtekintése hogy a nyers szöveget is, észre néhány dolgot. Egy, a Facebook is beszél az azonos protokoll, 1.1-es verzió annak. Szóval ez szép. De status code 301, költözött véglegesen. 

Nos, hol a fenébe Facebook menni? Mi ez próbál közvetíteni nekünk? Nos, észre lent van egy másik header nevű Location. Akkor miért Facebook mondja nekem, hogy a költözött véglegesen az URL mellett hely? Elfelejtettem a www. 

Szóval ez volt az én választásom. Sőt, a legtöbben ritkán, talán, írja www.whatever.com ezekben a napokban. De kiderült, a rendszergazda, mint a Facebook, lehet beállítani a szerver oly módon, hogy vagy Facebook.com működik, vagy www.Facebook.com működik, vagy nagyon, ilyen előtag előtt a domain név. Így tettél, hogy számunkra. És ők átirányításával minket, valószínűleg bizonyos technikai, néhány marketing okokból. Azt akarom, hogy canonicalize A www.Facebook.com. 

De ez nem egészen erről van szó. Ha lapozás itt, most meglátjuk, mi történik. Ez azt mondja nekem, hogy költözött véglegesen http://www.Facebook.com. Tehát nézzük meg a második kérelem hogy a böngészője küld. Sajnos, úgy néz ki, mint a Facebook költözött újra, mert a második kérésére, illetve adja meg, hogy az URL-t helyette, azt mondja, hogy is költözött véglegesen. És hadd lépjünk le itt A válasz fejlécet. Hová Facebook elment? 

Így HTTPS. Tehát most a Facebook már elkezdődött, különösen annak fényében, az aktuális események az elmúlt hónapokban, elsősorban és is az elmúlt években kényszeríteni minden a felhasználók, a jó módja, hogy használjon HTTPS, ami több, biztonságos, bár nem teljesen biztonságos. És most az oldalamon, az én böngészője fogja kérni a harmadik URL. És most, végül, hogy a egyébként láthatatlan 200 OK. 

Tehát mi a világ vagy az összes ezek a többi sor itt. Szó gépelt egy dolog, és az én böngésző, úgy tűnik, hogy kért, mint a 20 néhány furcsa dolgot. Mi ez? 

Közönség: Scripts? 

SPEAKER 1: Scripts, hogy más fájlokat nyelven írt nevű JavaScript, amely ismét fogjuk hogy egy kicsit a szerdán. Mi van még? Stíluslapokat. Tehát valami olyan nyelven nevű CSS, amit majd látni egy kicsit. Gif, és JPEG és PNG, és a képeket, és film - amit egy weboldal valószínűleg már a formájában egy fájlt. És amit látunk a bal oldalon van az összes fájlt hogy a Chrome kellett letölteni, rekurzívan, ha úgy tetszik, annak érdekében, hogy össze a teljes egészében a lap. 

Tehát amit láttunk az előbb a Google, ha rákattintok a Elements lapon ez, persze, a HTML, a nyelv, komponál ezt az oldalt. De van csokor más dolog. Van egy logó. Van a kék-szerű ikonok ott. És van más elemek mindig Az oldal maga lehet külön fájlokba. 

Szóval mi szép egy böngészőt, hogy úgy néz ki, a nyelv megyünk írásához, vagy már elkezdtem írni P készlet 7, a számok hogy hol élnek ezek a fájlok, és megy, és megragadja őket is. És nem tudom eléggé hangsúlyozni, még bár néhány ilyen lehet egy kicsit misztikus vagy elsöprő első pillantásra, Tanulás, hogyan program alkalmazások az interneten, ez felbecsülhetetlen megérteni, hogy ezek kis eszköz működik. Ezek a fajta, mint a GDB, mint a szerszámok, de sokkal egyszerűbb, végső soron, hogy használható - és tényleg ad szemed a mi mi már szedett nyújtott jó ideje már. 

Szóval mit lehet most tenni ez az információ? Nos, valóban, hogy egy pillantást azok a fogalmak, HTML. És mi elhalasztja, hiszen már van, hogy szakaszok ezen a héten, hogy a probléma szett 7 specifikáció, hogy néhány, a több adatait ezeken a nyelveken. De nézzük, ha nem tudunk festeni a kép, hogy mit kell érteni összességében itt. 

Tehát HTML HyperText Markup Language, nem egy programozási nyelv. Mit jelent ez valójában? Így néz ki a HTML, mint ez. És néhányan már tudják ezt. Néhányan már csinál ez egy ideig. De nézzük, ha nem tudja kitölteni néhány üres is. Így észre egy pár dolgot itt. Az egyik, hogy ez csak szöveg. Szóval, mint forráskód C-on, vagy valamilyen más nyelven. 

Figyeljük meg, hogy a jelek hogy egy minta itt. Van behúzás, de technikailag A behúzás csak az emberi egyezmény. A böngészők nem érdekli, ha van új vonalak és lapok, mint látjuk ott. De észre, hogy van szimmetriák itt. Van, mit fogok hívni, a tetején fájl, a nyitott tag vagy a start tag, az úgynevezett HTML. És akkor, lent, teljesen bélelt fel, ugyanúgy, mint mi, kapcsos zárójelek látjuk nyitva tartó, előre slash, HTML, záró zárójel. Szóval ez a megfelelő szoros tag, vagy a végén tag, mert a dolog. 

Együtt, minden belseje úgynevezett open tag és záró tag össze mit fogunk hívni egy elem. És majd meglátjuk, csak egy pillanatra, ez tényleg, mint egy csomópont a fák. Mert ha úgy gondolja, most a bemélyedés ez hallgatólagos itt, ilyen van, mint egy nagyszülő node nevű HTML. Hány gyerek is azt mondja, amely ezen a képen, a HTML elem? 

Így talán kettő. Az egyik a head elem, nyilván. És az egyik a body elem. És miért két gyerek? Nos, én csak egyfajta következtetett, hogy ha Van egy nyitott head tag, majd a szoros fej tag, hogy egy elem. És aztán, ha van egy másik nyitott karosszéria tag és egy közeli body tag, ez olyan, mintha másik elem. Tehát ebben az értelemben, hogy ha a fajta forgatás A kép az oldalán, ez mintha egy HTML tag, majd a fej tag, majd a body tag, és majd néhány szöveget, hello world, lógó le a body tag is. 

Így tudjuk rajzolni a képet, így néz ki. A formák önkényes. De észre, hogy én is használtam a fajta egy ellipszis tetején, hogy képviselje a dokumentumban. Kiderül, nem lehet más dolgokat belsejében egy internetes oldalt, hogy én már nem utalni. Így megyünk is tegye a HTML csomópont le egy úgynevezett dokumentum csomópontot. És akkor mi van fej és test és a cím, értesítés, amely beágyazott tovább. Én nem zavarta ami további vonal szünetek belül a cím. Csak úgy éreztem, ez már-már egy kicsit túl bőbeszédű. Így hagytam egy sorban van, és Open címét, hello world, közel címet. Aztán van néhány szöveg lóg ki innen. 

Tehát ez a kép, vissza fog térni nekünk, amikor azt belevetik magukat JavaScript. És a megértés, hogy ha írni HTML, mint ez, amit egy böngésző csinálsz? Nos, nem kell aggódnia hogyan csinálja ezt, vagy mi algoritmus, de a végén a nap, Amikor a böngésző megkapja HTML-szerű , hogy a Facebook vagy a Google, akkor feldolgozza azt, hogy úgy mondjam, azt olvassa, valami ilyesmit fread, fentről lefelé, balról jobbra, és ahogy felismeri, ó, nyitott tag, majd zárja tag, kezd malloc, hogy úgy mondjam, egy csomópont egy fa. És amikor találkozik, ahogy már hallgatólagos itt a behúzás, a gyermek csomópont, akkor mallocs olyan csomópont, amely és csatlakozik, hogy a fát. 

Így a fa szerkezetek, bináris fák, hármas fák, és nagyobb fák, hogy mi pillantott egy vagy két hete, értesítés hogy ugyanaz az elv jönnek vissza hozzánk. És aki végre, Chrome bármi csapat csinálta, feltehetően már végrehajtani valamilyen fa szerkezet a motorháztető alatt. És maga valószínűleg egy nyelv, mint a C vagy C + +, vagy rövid szénláncú szintű nyelv, hogy mi lesz most már tetején az interneten. 

Tehát most, talán ez lesz hogy több értelme van. Aktuális tetoválás egy fickó, aki talán megbánni végül, milyen. OK, rendben, így sok webes humor. Ez nem igazán fog mint olyan jól ma. Így fogunk lépni. Rendben van. 

Szóval vessünk egy pillantást most meg néhány példát. A lehető legegyszerűbb dolog lehet ez. Én megyek előre, és nyissa fel gedit nevű fájlt hello.php. És azon belül itt, megyek, hogy gyorsan csak ezt, printf, idézve idézet vége, "hello world". 

Így észre, és én megteszem a backslash n Már nem zavar, hogy állapítsa meg fő. Kiderül, a php, és a sok nyelveket, akkor nem kell a fő funkció önmagában. Akkor csak elkezd írni a program. Most, amikor menteni ezt a fájlt, észre vagyok kell majd tegye a következőket. Nem fogom használni, hogy, és én nem vagyok fogja használni csenget, mert a PHP, ellentétben C, nem egy lefordított nyelvet. Ez az, amit a neve az értelmezett nyelv, ami azt jelenti, hogy futtatni inputként egy másik programmal hívott tolmács. És, hogy a program olvassa, felülről lefelé, balról jobbra, és nem bármit is mondani, hogy igen. 

Tehát ebben az esetben is van egy sor, hogy azt mondja printf. Tehát, amikor elindul a forráskód, hello.php, bár egy programot, amely történik, kényelmesen, hogy hívják a PHP, a program a PHP fog olvasni ezt a fájlt, felülről lefelé, balról jobbra, és azt fogja csinálni, amit én mondani, hogy igen - végrehajtása kódot, és ha nem ismeri valamit, csak kiköpi. Szóval megyek előre, és a PHP a hello.php. Enter. 

És ez nem elég, amit akartam. Nos, miért van ez? Nos, PHP egy olyan nyelv, valójában úgy tervezték, hogy meglehetősen összefonódik az interneten. Ha így weboldalakat ezen a nyelven PHP, ahogy azt hamarosan látni, fogjuk akarsz valamit, mint nyomtatott ki hasonló sor. 

Így fogom csinálni. Nyitó zárójel, kérdőjel, PHP, és most én csak fog francia, csak hogy dolgok szép. És most fogok tenni egy kérdést jelölje záró zárójel. Szóval van egy kis aszimmetria itt. Nem ezt. És ezt nem a perjel, így A PHP egy kicsit más. 

De most, ha én futtassa újra a programot, PHP hello.php, most valójában a Hello World. És majd meglátjuk, hogy ez miért fontos. Az egyik, hogy lehetővé teszi számomra, hogy meghatározza, szuper kifejezetten ez kód, ezzel a. És ez az, amit ezek a valóban speciális címkéket jelenti itt. 

De ez azt is jelenti, hogy ha csak nem valami ilyesmit Célom ide, hogy azt jelenti, hogy a szó szoros értelmében, hogy majd csak is kinyomtatható, anélkül, hogy valóban hívja printf, vagy nyomtatott, vagy bármilyen hasonló funkciót. Szóval megyek vissza a csak egy pillanat. 

Először is, nézzük ezt. A készülék belsejét, van egy nevű könyvtárat vhostokat, virtuális házigazdák, slash helyi gépen, perjel nyilvános. Szóval ez egy kicsit bőbeszédű, de hosszú történet Röviden, a készüléket úgy tervezték, nem csak támogassa C is célja, hogy támogassa a PHP. De ez is tervezték, hogy a web szerver és adatbázis szerver. És úgy tervezték, és valóban konfigurált, emlékeztet, hogy minden kereskedelmi web hosting cég lehet fizetni 5 $ havonta, 100 $ havonta. Bármi legyen is a szolgáltatás, ez beállítva hogy nagyon hasonlít egy valós termelési kiszolgálóval. 

És mit jelent az, hogy a futó A készülék a web szerver szoftver. Előfordul, hogy hívják az Apache. Ez csak ingyenes és nyílt forráskódú, és nagyon népszerű. És mi van beállítva Apache tudni hogy ha meglátogat egy bizonyos URL-t, és Chrome böngésző, vagy belsejében készüléket, hogy vizsgálja meg a könyvtár A fájlokat a felhasználó kéri. 

Más szóval, hadd megy előre, és erre a célra. Belül a nyilvános könyvtár, megyek , hogy menjen előre, és hozzon létre egy fájlt index.html nevű. Ez ad nekem a lap itt. És én megyek gyorsan és megy előre, és bumm ki ez a program itt. Doctype HTML, amely most, csak Feltételezzük, hogy a típus. Ez csak egy misztikus tag, ez nem valóban egy HTML tag, amely meghatározza, hogy az Itt van pár HTML. 

Én megyek előre, és újra amit láttunk egy perce. Itt van a feje az oldal. Belül a fej volt - így cím. Tehát azt mondom hello, világ. És akkor itt lent volt a body tag. Hadd fejezzem be a body tag. És akkor itt én is mondom, csak a jobb átláthatóság, hello world. 

Szóval ez az, vitathatatlanul, a legegyszerűbb lehetséges internetes oldalon tehet, hogy ez érvényes-e. Ez szintaktikailag helyes. Mindent, ami nyitva van zárva. Minden a szépen stílusú és tagolt. Szóval most látni, hogyan elérheti ezt a fájlt. 

Nos, hadd menjen a Chrome itt. És hadd menjen http://localhost/index.html. Tehát mi a helyi gépre? Nos, a legtöbb olyan számítógép a világon, Linux, Mac OS, Windows, van egy beceneve az úgynevezett helyi host. Tehát, ha valaha is szeretne beszélni hogy saját számítógép - bár, furcsa reflexszerűen - hívod magad a helyi gazda. Nem számít, milyen a tényleges számítógép hívott, hogy ez David MacBook Air, vagy valami verbose ilyesmi. 

Tehát ez URL látszólag fogja használni a HTTP, hogy beszéljen a helyi gépre, ugyanazon a számítógépen, a készülék és a ez meg fog kérni, csak egy kitalálni, milyen file? Index.html. Így a készülék van-e állítva előre tudják, hogy ha kérdezem valami olyasmit, index.html, keresse meg egy dosszié hívott vhostokat, a elnevezésű mappát localhost, egy mappában ott az úgynevezett nyilvános. Ez az, ahol minden a nyilvános fájlok lesznek. Szóval most megy az Enter leütése. 

És átkozott, ott van az a tiltott üzenetet, más néven 403, a numerikus kódot is. Szóval mi a baj itt? Nos, ez nem elég, hogy az imént a fájl belső én mappába. Meg kell, hogy ténylegesen a következőket. 

Hadd menjek be a vhostokat könyvtárat, localhost, a köz-, és hagyja, hogy tegyem ls kötőjel l. És van néhány más dolog, itt a mai célokra. De észre a bal oldalon, a következő az index.html, csak látni egy RW. És a múltban, milyen már RW állt? 

Csak írni és olvasni. Az a tény, hogy azt mondja a bal rw azt jelenti, hogy a tulajdonos a fájl, olvasni vagy írni. De kell, hogy legyen minden ember a olvassa el ezt a világot, de nem írom meg. Így fogok változtatni a módot a fájl chmod minden plusz r, hogy mindenkinek olvasási engedélyt a index.html nevű fájlt. 

És ha most mégegyszer ls kötőjel l, értesítés hogy itt, egy kicsit R bukkant fel. És most, a spec megy be részletesebben. A P meg 7, ami csak azt jelenti, mindenki most olvasd el ezt a fájlt. Ha megyek vissza a böngészőben most és újra, íme. Hello world. 

És én is kinyitom a Chrome eszközök és nézd meg, mint a Google és a Facebook, hogy ott van a HTML, formázott egy kicsit másképp, és színezett. Ha megy a hálózat fülre, és töltse Az oldal észre, hogy ott van a kap kérheti, hogy a Chrome küld a készülék. Ott van a 200, amely adott fájlt. Tehát röviden, ez így ezek több darab jön össze. Ez csak azért történik, hogy a webszerver mi éppen most nem a távoli, , mint a Facebook. Ez szó szerint ugyanazon a számítógépen, ami teljesen rendben van. 

Szóval, mi mást tehetünk egy weboldal? Nos, csak, hadd szél segítségével egy pár ilyen dolgokat. De hadd menjek előre, és nyissa meg újra Gedit az index.html. És hadd menjen előre, és köszönjön CS50, menteni a fájlt, menj vissza a böngésző tényleg underwhelming változás. 

De mi van, ha azt akarjuk, hogy valóban linket most valamit? Így kiderül, hogy mi lehet a linkeket a HTML, hogy csak címkék magukat. Előfordul, hogy az úgynevezett horgony tag. a href egyenlő https://www.cs50.net, www.cs50.net szoros idézet, záró zárójel. És most lássuk, mi más következik. 

Kinyitottam a címkét. Most kell, hogy ez a kifejezés, mint a CS50. Hadd fejezzem be a tag. És észre néhány dolgot. Annak ellenére, hogy itt van ez a rejtélyes dolog Itt már nem ismétlődik meg, ha zárja a címkét. Csak zárja be a címke névvel egyedül. És ez az, ami ismert, mint egy attribútum értékkel. Attribútumok csak módosítja a viselkedését Néhány tag belsejében egy lap. 

Tehát ez meghatározza, hogy a hiper hivatkozás, a divatos szóval a URL a horgony, mert ez kapcsolat kell, hogy legyen CS50.net. És a szöveg, hogy szeretnénk mutatni a a felhasználó nem, hogy a nyers URL-t, hanem inkább a szó CS50. 

Tehát, ha most újra, hadd zoom be egyértelműség, hadd újratölti az oldalt, észre, hogy itt van ez a régi iskola kék aláhúzott hivatkozásokra. És ha fölé viszi, és ez a helyzet hogy nehéz látni, a bal alsó sarokban sarkában a képernyő, észre hogy azt mondja, az URL-re Én megyek. És ha rákattintok ott, íme, Most csinálok weboldalakat. És mi vezetett magunkat a főoldalra. 

De vegyük észre, mi potenciál ez kínál nekünk. A biztonság nagyon divatos manapság. Mit tegyek, ha ahelyett, hogy mond valamit, mint ezt, és inkább megy, mondjuk, nézzük Látod, fakeCS50.net. Oldal újratöltése. 

OK, így észre, hogy mindig úgy néz ki, mint én vagyok, fog CS50, kivéve ha ügyes szem észre fogja venni fogok hamis CS50. Azt hiszem ezen a területen nem veszik. OK, ez nem áll rendelkezésre. Szóval ez jó. Senki valójában, hogy a domain. 

De legyünk egy kicsit rosszindulatú mert ez hülyeség. Mi lenne, ha változtatni a Paypal. És mi van, ha mi hívjuk ezt, mint például, www.paypal.badguy.com, amit a tartomány. Ez valószínűleg létezik. Tehát most hadd töltse újra a lapot. És itt van valami egy adathalász támadás, P-H-I-S-H-I-N-G, amely a buta szó adott a támadás, hogy megpróbál halat információ vagy jobb mégis, a pénz, ki az emberek a megtévesztett őket, hogy a tájékoztatás lehet, hogy egyébként nem csinál. Ez úgy néz ki, teljesen legális, ugye? Azt kell egy link itt Paypal.com. A tisztesség, ha szexálás fel néhány grafika, akkor azt a látszatot több, mint a PayPal. Nem igaz? Mert nem tudtam, mint egy félre, Tudtam menni Paypal.com. És most láttam, hogyan lehet megtekinthet minden a HTML. Én is csak másolni, és újra a esztétikája Paypal nem megy old school itt. De észre, persze, és ez egy kicsit még kicsi, csak az alsó bal sarokban, a mint a 10-es font, látod, mit URL te valóban lesz vezetett. 

És ha valaha is ütött spam mondás megy előre, és maga veszi veszélybe került. Kérjük, kattintson erre a linkre, és tudassa velünk a jelszót, így tudjuk biztosítani, hogy maga te, soha ne tegye ezt. Ezek a dolgok magától értetődő. De csodálatosan szórakoztató, és tragikus, hogy minden évben úgy tűnik, hogy véletlenül néhány nem-nulla emberek száma. 

És ez a szépség Az adathalász támadások. Lehet küldeni egy millió e-maileket. És még ha a 0,01%-a valójában kattintson Paypal, és adja meg a jelszó, hogy még egy nem nulla szám az emberek, akik már csak így Ön a pénzüket. És e-mail küldése, persze, nagyon egyszerű és lényegében szabad ezekben a napokban. 

Tehát hosszú történet rövid, csodálatosan szép gondolat, nem? Évekkel ezelőtt ez volt a legkorábbi web, amely lehetővé teszi a web hivatkozásokat forrásai között. De olyan gyorsan lehet az használt beteg célokra. És e-mail, elég annyit mondani, hogy ezek nap, már HTML beágyazva. 

Nos, hadd csak egy másik dolog. És akkor elhalasztja nagyrészt részt probléma meg hét lehetővé teszi, hogy vizsgálja meg a részleteket. De hadd menjek előre, és nem egy pár dolgot itt. Fogok menni, és kijelentik, az úgynevezett a div, vagy részlege, az oldal. Hadd zárjam, hogy div tag. 

És azt fogom mondani fel Itt lap tetejére. És akkor ez alatt azt fogom tenni olyasmi, mint egy másik div, zárja be ezt az tag, és nem az oldal alján. És mentsük meg. 

Tehát most menjünk vissza a fájlt. Nagyon underwhelming. De mi részleg használnak, a motorháztető alatt, hogy valójában egy szép szerkezeti elem. Ez nem rendelkezik, amennyiben az esztétikai láthatjuk, nem úgy tűnik, amivel a dolgok az új vonalakon. 

De vegyük észre, mint félre, csak ütő Adja nem vágja a HTML, mint ez nem a C. Azt gondolhatnánk, hogy ez megy, hogy egy szép nagy különbség a felső és az oldal alján. De ez nem veszi figyelembe. White space lényegében figyelmen kívül hagyja a weboldalakat más, mint a legelső szóköz karakter, vagy kocsi vissza, hogy bejön a billentyűzeten. Ha többet szeretne sortörés, akkor kell adnod magad. 

Így fogok tenni néhány dolgot itt, hogy megmutassa, mi folyik itt. Fogok hozzá egy attribútumot, amely létezik, és újra, ahogy tanulni milyen tulajdonságokat létezik, milyen címkéket létezik, tényleg, online referenciák. HTML az a fajta nyelv - ez nem egy programozási nyelv. Ez egy leíró nyelv -, hogy miután a jó fél óra, talán egy órát meg, akkor biztosan fogja a legtöbb valószínű, az alapötlet. És akkor a Google kereső el minden lehetséges címkéket lehet, érdeklő És egy a specifikációt, hogy elég Üdvözöljük és ösztönözni itt. 

Tehát most hadd menjen előre, és valami ilyesmit. Háttér színét. És most, fogok csinálni valamit mint a vörös, pontosvessző. És akkor ezt a egy pár különböző módon. Én csak ilyen gépelés, mint szuper kifejezetten csak lehetséges. 

De kiderül, hogy ez az érték itt úgynevezett CSS, Cascading Style Sheets, amely egy másik nyelv összesen. CSS semmi köze nyitott címkék és záró tag. Ez arról szól, hogy tulajdonságait. 

És tulajdonságok egyszerűen kulcsérték pár, ami csak azt jelenti, néhány szó, vastagbél, majd néhány más szót. És ha van több is, vagy csak Ott van, akkor a végén, hogy egy pontosvessző, csak az egyértelműség kedvéért. De ez is működik itt. 

Nos, mi ezt csinálni? Akkor valószínűleg kitalálni. Hadd menjek előre, és töltse be újra ezt az oldalt. És most már tényleg halad. Így tetején oldalamon piros. De mi a legfontosabb az, hogy már említettem, korábban, hogy a div ad egy részlege az oldalon. És ez valóban mit csinál. Lényegében osztja a lapot egy téglalap, amit aztán manipulálni. 

És ez a fogalom a téglalap a fajta lenyűgöző abban, ha úgy gondolja, a legtöbb olyan honlap, ott valószínűleg bizonyos struktúrát kell létrehozni. A legtöbb akkor valószínűleg ritkán Facebook honlapján, ha bejelentkezett az egész idő alatt. 

De a Facebook honlapján, ott van valamilyen div a felső. És talán nem is olyan egyszerű mint egy div, de van egy négyszögletes régióban. A többi lap, mint hatalmas div, mint egy sokkal nagyobb téglalap alakú terület. Tehát hosszú történet rövid, csak azáltal, hogy ezek a kis építőkockák, a képes modell a dolgokat, mint téglalapok, hogy széles vagy keskeny, akkor is hogy oszlopok potenciálisan lehetővé teszi, hogy feküdt ki oldalakat, tényleg, de akkor szeretne. Mi tényleg csak vakarja a felület itt. 

Valóban, ha nem egy másik, hadd megy előre, és stílus, background-color, akkor tegyünk valamit mint a kék, közeli idézi. Nézzük újra ezt. Így most már egyre még csúnyább. De most már tudom milyen mutogatni a P meg öt készség, nem igaz? Red. Ez jut eszembe a RGB, Red Zöld Kék háromágyas. Nos, kiderült, hogy a webes programozás, vagy web design, ami egy, most már nem programozható semmit önmagában, akkor valóban van hexadecimális kódot. Tehát valami valami, valami valami, valami ilyesmi. Így hat hexadecimális karaktereket, vagy három, bizonyos esetekben, és minden egyes ilyen kérdőjelek kell, hogy legyen egy hexadecimális, nulla a f. 

Ha szeretnénk, hogy a sok vörös és nem zöld és nem kék, mi a szemben a zéró használatakor hex? Ez f. Így tudok ff, nulla nulla, nulla nulla, menteni, és most gyere ide. És valójában nem lát változást. Tehát quote unquote "piros" látszólag egyet minden piros, nem zöld, nem kék. Közben hadd szándékosan változtatni ez, hogy valami véletlen, mint ABCDF. 

Lássuk, mi az. Ez egy nagyon szép kék, valóban, baby blue. Rendben, ezek most valamelyest véletlenszerű kombinációit karakter. Így nem megreked itt. De ismétlem, ez szól a pontosság hogy kezdhetjük alkalmazni - akkor is, ha nagyon túlterheltek az esztétika. Sőt, ha azt szeretné, hogy hatással, hadd menjek előre, és változtassa a betűméretet, például. És észre a pontosvessző, amely szükség van. 

Betűméret, mi is csak nevetséges Itt, 96. pont. Kivéve, hogy. Hú, ez egy nagy betűméretet. Rendben, ez nagyon egyszerű. És valóban, akkor lényegében lát Az első weboldal tettem évvel ezelőtt, amikor először tanult ez a cucc. Nagyon egyszerű, hogy a nagyon undorító dolgok gyorsan. 

És ha már ismeri a Wayback Gép archive.org, akkor megtalálja a förtelmes egyetemista weboldalakat. Az egyiknek Kermit a béka az első. Elmentem egy fázis, amikor azt gondoltam hűvös volt, hogy a háttérben a vörös függöny, amikor megtudtam, hogy hogyan , mozaikszerűen képeket újra, és újra, és Ismét, hogy töltse ki a oldalt egy nagy ragadós vörös függöny. És akkor, a tetején a volt, egy ikon hogy meg kellett a gombra az otthonom oldal, mert ez volt nagyon divatos. 

És akkor az első program, amit valaha írtam nem volt a PHP, de a nyelv gyöngyszemének nevezik, írt egy vendégkönyv, ami egy nagyon jó dolog, hogy egy Sokan várják, hogy egy honlapon. Amikor eljut arra az oldalra, azt akarom, bejelentkezni, és azt mondják, hogy ki vagy, és miért van ott. Ez nagyon 1990-es évek stílusa web design. 

De ezekben a napokban, biztosan, most már jön sokkal messzebb. És látni fogod, szakasz, és még A probléma meg hét, a kihasználva könyvtárak ezekben a napokban, ez így sokkal könnyebb szebb dolgok gyorsan. Tényleg itt, mi csak vakarja a felület, hogy mit lehet tenni stilisztikailag. 

És valóban, már, hadd emeljem ki , hogy ez már kezd csúnya, nem csak esztétikailag, de tekintve a stílus a kódomat, vagy a tervezése kódomat. Én jelenleg comingled HTML, amely a zöldes nyitva címkéket is, és CSS tulajdonságokat, melyek teljesen legális. Ez tényleg, ahol a nyelv volt az eredete. 

De az az érdeke, tiszta design, hasonlóan kezdtük faktoring cucc ki C fájlokat. h kép, legyen én tényleg gyakorolni ezt a fajta elv és kezdeni ezzel ezt helyette. Hadd tegyek fel egy stílust tag itt, ami is létezik HTML, és hagyd, hogy adja meg a következő. Hadd törölni ezt. Háttérszín lesz piros. Fogom törölni ezt teljesen. Fogok megszabadulni a stílus tulajdonítanak, és megyek, hogy egyedülálló módon azonosítsa a div a szó - önkényesen, hanem ésszerűen, idézet idézet vége "top". És id egy speciális tulajdonság, amely egyedi módon definiálja bizonyos HTML elem mintha, hogy id. 

Ha most akar stilizált is, itt a a feje az oldalam, belül a stílus tag, észreveheti, hogy Meg tudom csinálni hash tetején. És akkor én is hogy egy pár göndör nadrágtartó, emlékeztető C, majd hagyja, nekem be abban a stilizáció. És hadd menjen előre, itt és előre hová megyek ezzel. Hadd hozzon létre egyet az alsó div. Hadd fogd ezt a förtelmes kódot le Itt, tedd ide, és én leszek egy kicsit most, és anális stilizált azt módon putting a dolgokat a saját vonal, véget pontosvesszővel. Hadd megszabadulni a stílus tag. 

De nem történt még. Azt kell tennie, még valami. Igen, id egyenlő idézet idézet vége, "alulról" vagy bármi id akarok adni, hogy elem. Nos, hadd menjek vissza ide. És ez szörnyű. Nem tudok foglalkozni 96 pont. Csináljuk 24. pont. Vagy lehetne pontosabb. Tudod valójában használ pixel, px, így hogy valóban kap finomabb gabona felett az oldalon. 

Mellesleg, ez nem feltétlenül a legjobb dolog, ha a felhasználók, a hozzáférhetőség miatt, szeretnék képes növelni méretben. Tehát, hogy vannak módon csinál dolgokat, hogy nem feltétlenül kemény kód mindent. 

Rendben, ez nagyobb, 24 pont, mint bármi az alapértelmezett. De most ez egy kicsit tisztább. És engedjék meg, hogy egy lépéssel tovább. Csakúgy, mint az ötlet a header fájlok, észre vagyunk egy lépéssel közelebb áll. Van faktorált ki, de még mindig maradt, belül az oldalam, a CSS szabályokat. Miért is akarom, hogy egy lépéssel tovább, távolítsa el ezt teljesen, és tedd egy külön fájlban? 

Szóval tudja használni, igaz? Ez csak egyfajta megérzés most. Korábban azt állította, hogy ez csak szerzés csúnya, amelyek a stílust attribútumok belsejében a Divs magukat. De csak egyfajta gondolja, hogy a. Ahogy a lap egyre hosszabb és hosszabb ideig, ha te olyan itt, és itt, és itt és itt, mind a különböző színek és betűméretek, és más hasonló tulajdonságok, az oldal nagyon gyorsan fog válni kezelhetetlen az Ön számára. 

Ha valaki odalép hozzád, és azt mondja: Tudod mit? Nagyon szeretném változtatni a betűméretet két további pontot, akkor Lehet, hogy menjen, és keresse meg és cserélje ki rengeteg sornyi kódot. Sokkal vonzóbb központosítani minden ilyen esztétika itt. De ha szeretné, hogy újra a esztétika több weboldalak, mind A vonzóbb a, a Például hozzon létre egy fájlt megadta azokat a tartalmakat. 

És hadd tegyem ezt. Mentse a fájlt. Mondom styles.css, önkényes, de a hagyományos. Beteszem a John Harvard otthonában címtár most az egyszerűség kedvéért. És mit tehetek a saját weboldal kap megszabadulni a stílus tag összesen, és kissé unintuitively, egy link tag, amely nem ad egy linket a hivatkozásra, kattintható értelme, de ahol azt mondom linkre, href egyenlő styles.css. És a kapcsolat, hogy ez az elem már a weboldal, hogy szolgáljon a stíluslap. 

Szóval hogyan tudom ezt? Egy, csak olvassa el a kézikönyvet, vagy a Google körül, és nézd meg a különböző források. Úgy értem, hogy valóban így felveszi technikák, mint ez, és következetes ez a gondolat a tanítás magát új nyelvek, ismét rájössz, hogy már csak véges számú dolog minden nyelv, ha egyszer őket, akkor rájössz, hogy ez lesz gyorsabban írni. Sőt, a tanulás egy új programozási nyelv sokkal gyorsabb, mint az új beszélt nyelvet, mert ezeket a dolgokat sokkal kisebb és sokkal pontosan meghatározott. 

De már kiemelt egy kicsit Az anomália itt. Miért emeltem ki ezt perjel itt? Mert van, hogy bezárja a tag. Azt kell zárni a címkét. És talál számtalan forrásokat Online, amelyek nem feltétlenül szoros címkéket. És reálisan, ez nem feltétlenül szükséges technikai és vannak miatt a valóság, böngészők csak meglehetősen toleráns a hibák web oldal, a jobb vagy rosszabb, de leginkább rosszabb. 

Szóval ez itt csak egy tisztább módja mond valami hülyeséget, mint ez, ahol, ha meg szeretné nyitni a link tag de zárja be, már tényleg nincs fogalma A tartalom a link tag. Ez csak azt jelenti, betölteni ezt fájlt, és tedd ide. Ez olyan, mint éles felvenni C. A nyit és zár a tag egyszerre ugyanabban a tag. És van más példa erre. Nem ez a módja, de A br tag, a sortörés, ha Nagyon szerettem volna, hogy elérjük azt, amit én próbál mielőtt az Enter, ha Én határozottan mondom sortörés, sortörés, sortörés, sortörés, és akkor újra az oldalt, most észre fogod venni, hogy az oldal alján van, sőt, sokkal messzebb le a lap alján. De még ez is sokkal többet tisztán a CSS, és margók, és más hasonló esztétikai technikák. 

Tehát most, az elvitelre is ezt. A HTML-ben, már ezek dolgokat az úgynevezett címkéket. A CSS, mi ezeket a dolgokat a Tulajdonságok. Tudjuk comingle két nyelven, akár a stílus attribútum, vagy a stílus tag, vagy a legjobb mégis, faktoring ki teljesen, mint mi A probléma meg 7. Kérdések, majd a fogalmi alapokat itt? 

Közönség: Lenne egy kérdésem. 

SPEAKER 1: Ó, sajnálom. 

Közönség: Miért nem színes - 

SPEAKER 1: Ó, a másik lapot? Ez itt? 

Közönség: Nem, ez olyan, mint a - 

SPEAKER 1: Ó, ez azért van, mert Én volt, hogy hanyag. Tettem a fájlt a rossz helyen. Tehát, ha én tényleg tedd itt, és én chmod meg minden + R styles.css, és Most újra az oldalt, most kap a stilizáció vissza. És azért, mert a betűméret más, nem látjuk annyira, fehér térben. Mi ehelyett mi az a alapértelmezett helyett. Jó kérdés. Igen? 

Közönség: Miért van a link tag belsejében a fejléc? 

SPEAKER 1: Miért van az linkek tag belsejében a fejléc - rövid válasz, csak azért, mert. Ez az, amit döntöttek. Ez az, ahol a link címkéket el, amikor Van mit hívják külső stíluslapot. További kérdések? 

Rendben, csináljuk. Van annyira szórakoztató előttünk ma. Ez csak karcolás a felszínen a CSS. Csináljuk ezt. Vessünk egy öt perces szünetet itt mert egy e-mail címemet, hadd tegye a ott, amíg 02:30-ish ma. De ha kell hagyja, hogy rendben van. De majd haladjanak előre után egy öt perces szünetet. És mi tanulni egy kicsit valami a PHP, MySQL, és így tovább. 

Rendben, próbáljuk meg, most, a nyakkendő a Néhány ilyen gondolatok együtt, és, mondjuk, a saját kereső. Észrevettem, inkább kíváncsian, a következő. Ha a Google.com, te jellemzően egy URL-t, mint ez itt semmi után a dot com. De ha keres valami hülyeséget, mint a macskák, és nyomja meg, mi lesz - nem hülye, de te tudod. 

OK, így észre, az az oldal tetején, Most, az URL-t, természetesen, megváltozott. És ez nem valami új bármelyikünk. Ön hivatkozásokra kattintva, meg ilyesmi történik az interneten. De ami itt még érdekesebb a következő. Van egy csomó zűrzavar, de hadd én dobja el dolgokat, hogy én nem Teljesen megértem, vagy nem tényleg meg fontos. 

Hadd megszabadulni ez. Hadd megszabadulni ez. És hadd megszabadulni mindezt. És most észre, hogy macskák az URL, követte egy q, majd egyenlő jelentkezzen be előtte. Így kiderül, ez az, hogy a Ez úgy működik, amikor a bemeneti és kimeneti. 

Már régóta beszéltünk fekete doboz, nem igaz? Tehát ha ez a funkció végre itt, mint egy fekete doboz, tart bemenet és gyárt teljesítmény, nos, az azt jelenti, , amely az Ön által megadott bemenetet a honlap útján, gyakran az URL-eket. Egyszerűen csak fel egy kérdőjel kulcsot, majd egy egyenlő értéket. És akkor talán egy jelet, majd másik kulcsfontosságú egyenlő értékű, akkor talán másik jel, kulcs egyenlő értéket. Így adja át a kulcsokat, és értékek pár bemenet. 

Tehát, ha én Enter most mi érdekes a Google, hogy az összes hogy rendetlenség Töröltem nem jelenik meg miatt feltétlenül szükséges. Csak azt kell, hogy küldje a Google a kérdés q jel megegyezik macskák kap vissza néhány macska. Nos, a következménye az, hogy akkor, az, ha húzza fel gedit, elkezdtem hogy a saját kereső itt nevű fájlt seach0.html. 

És hadd menjen előre, és törölje még egy sort, hogy nem kellett volna látni. És most, hadd menjen a saját böngészője, így nem a Google, és menj http://localhost. És hogy fog útban. Szóval kell majd búcsút hogy most, mozog ez itt, ó, most mi lesz, hogy búcsút a fájlt. 

Ha van egy fájl neve index.html vagy index.php egy könyvtár, ha a web szerver konfigurált ilyen módon, hogy mit fog lásd, alapértelmezés szerint a tartalma, hogy a fájl helyett egy lista a könyvtár, mint szerettem volna itt. Erről bővebben a spec. Nem látni, hogy. 

Tehát ez az, amit valójában akartam. De egy pillanattal ezelőtt, volt egy fájl ebben a mappában nevű index.html és index.php. És így a webszerver volt megmutatta nekem azokat a fájlokat. Ehelyett, azt akarom, ez a könyvtár felsorolja itt. 

Így fogok menni CSS és menj search0. És azt állítják, hogy ez nem lesz az elején a saját versenyképes kereső. És ezt, fogok menni Itt, a CSS, és nyissa fel gedit, keresés 0. De sajnos, van Nem sok minden történik itt. Én csak használni a címsor tag, amely történik, hogy hívják H1, ami lényegében azt jelenti, nagy és merész, és ennyi. De az eszköz, amellyel tudunk biztosítani bemenet ezeken keresztül dolgokat az úgynevezett formában. 

Hadd megy előre, és nyissa ki és zárja be, megelőző jellegű, a form tag ott. És hadd menjen előre, és ezt valami ilyesmi. Bemenet típus egyenlő szöveget. És akkor hadd zárja be a tag a A zárójelben magukat. Nem kell kezdeni egy szöveges mező és megáll a szövegmezőbe. Ez csak ott lesz-e vagy sem. 

És akkor az alábbiakban, hogy csináljuk bemenet típusa egyenlő be. Mentése. És most nézzük csak ezt a gyors józanság ellenőrzés. Nézzük újra. 

OK, ez nem rossz. Ez nem a Google stílusát, de ez elég közel. Van egy szövegmezőbe. Azt is írja néhány dolgot, Enter, de nem történik semmi sem. És ez azért van, mert én még nem meghatározott iránti kereset ebben a formában, hogy úgy mondjam. Tehát, ha megyek vissza a formáját elem kiderült, és tudom, hogy ez csak attól, hogy olvassa el a dokumentációt, A form tag vesz egy attribútum nevű akció, ami az URL- a weboldal, amelyre szeretné küldeni az űrlapot. 

Nem igazán hiszem, hogy van ideje végre a teljes back end egy kereső ma. Szóval csak mondani, ugye, megy a google.com / search. És most hadd zárjam az idézetek. És hadd továbbá arról, hogy a módszert használja folyik hogy hívják kap. 

Hosszú történet rövid, van két módon, a legalábbis, hogy van-e információ benyújtására a böngésző szerverre. Az egyik kap, és a mai célokra hogy csak azt jelenti, az URL-ben. Látod, pontosan kérdőjelek, a egyenlőség jelet, és ampersands hogy láttuk korábban. Vagy van egy másik neve után. Most, tudom, hogy a post gyakran használnak ha azt szeretné, hogy feltölt fájlokat, mint a képek és így tovább, vagy ha azt szeretné, hogy be hitelkártyája adatait, vagy jelszavakat, bármi, hogy nem igazán értelme, fogalmilag, vagy biztonsági bölcs, hogy a végén az URL-ben a böngésző, ahol bepillantás szülők vagy szobatársak, vagy bárki, aki hozzáfér a számítógép lehet látni. 

Szóval, kivéve azt itt. És azt kell tennie, még valami. Nem elegendő csak a mondjuk adj egy szövegmezőbe. Meg kell adni, hogy a mező értékelik a nevet. Hadd kölcsön Google által választott nevek, q, és adja meg, hogy a második attribútum nem igazán érdekel a neve a Küldés gombot. Csak az érdekel nyújt be amit a felhasználó beír be 

És most ez a fajta csúnya. Csak mondja be. Kiderült, és tudom, hogy ez a dokumentáció, azt lehet mondani értéke egyenlő quote unquote "CS50 számonkérését, "közel árajánlatot. Akkor hát újra újra. Szóval folyamatosan üti Command-R, vagy Vezérlő-R a billentyűzetem hogy láthatóvá váljanak. 

Most van egy érdekes kereső. Ez nem egészen néz Google mégis, mégis. Szóval menjünk előre, itt- egy kis sortörés. 

OK, így most már a Google. Igazából majdnem megvan Google. Most mi fog történni? Megyek, hogy írja be valamit mint a macskák. És a böngésző fogja értelmezni hogy a forma, amit megadott. És ez meg fog küldeni a felhasználó, hogy az URL-t. Tehát ebben az időben, valami furcsa oknál fogva, Van még több információ a készletek mint a tényleges macskák. De ez rendben van, mert észre még mindig itt kötöttem ki, q értéke macskák. 

Tehát hosszú történet rövid, úgy tűnik, meglehetősen triviális, hogy adatokat kér a felhasználótól. És az igazat megvallva, van csokrok más típusú űrlapmezőket. Van jelölőnégyzetet, és a kis kölcsönösen exkluzív gombok, és legördülő menük, és így tovább. De ezek közül viszonylag könnyen végrehajtani ez a szöveg a területen volt. És végül, csak van, hogy arról, hogy valaki figyel, a másik a sor végére, hogy kap, hogy a feldolgozott információk, valahogy, és nekünk vissza a macskák. 

Nézzük meg egy kicsit nagyobb részt példa. Hadd menjek be a Vhost könyvtárában, a helyi gazda, az állami, és ahol fel a mai forráskódját. Mindez lesz a pálya website, hogy bütykölni. És ha bemegy froshims, hadd nyissa ezt a fájlt most froshim0.php. Ez az ember egy kicsit bőbeszédű, így nem fogjuk írni ezt a semmiből. De csak észre, most néhány némileg ismerős jellemzőit. 

Egy, form tag, a különböző lépéseket. Ez nem a teljes URL-t. Nos, ez nyilvánvalóan a fájl neve register0.php mert egy pillanat alatt, Én fogom tanítani magamnak egy kis valami PHP egy programozási nyelv, mert a PHP használható a végrehajtani, amit a Google végrehajtani a hátsó végén a keresőmotorok. 

Google, a valóságban, talán használ Néhány Python, néhány C + + és csokor más nyelveken. De minden bizonnyal végre keresés eredmények PHP, ha akarnánk. De most, akkor tartsa egyszerű. És ez valóban emlékeztet egy A másik első weboldalakra készült évvel ezelőtt. 

Az én időmben, akkor regisztrált intramuralis sport, mint egy újonc a kitöltése egy darab papírt, séta az udvaron, és elejtette a postafiók a Proctor Wigglesworth, és ez hogyan regisztrált. És így a projekt röviddel CS50, az volt, hogy, hogy az, ami tökéletes értelemben rá az interneten, ami nem volt mint a divat, akkor, mint most. De meg kellett tennem, hogy hozzon létre, lényegében egy HTML formában. 

És, hogy a forma nézett nagyjából így. Volt egy bemenet a elsőéves nevét. Volt egy másik négyzetet-e vagy vagy nem lenni kapitánya, milyen nemük volt, és milyen kolesz. Aztán keményen kódolt dolgok mint Apley Court és Canaday, Szürke, és így tovább. 

Tehát még egyszer, az új címkéket. Még nem láttam ezeket a korábban, az új tulajdonságok, de viszonylag elérhető. Amint látod, egy példát, akkor milyen A kölcsön az ötletet, és egy csepp legördülő menü a legtöbb semmit. De mi a legfontosabb az, hogy minden egyes ezek a dolgok nevét. És az alján ebben a formában, van a submit gomb amelynek címkéje, vagy érték, nyilvántartásba. 

Menjünk erre az oldalra. Hadd menjek vissza a könyvtár lista. Hadd menjek be froshims, és menj froshim0.php. Szóval rettenetes, hogy tisztességes. Így tudtam határozottan stilizál ezt néhány CSS, tudtam, hogy valami grafika, talán hozzá néhány szín, és ez szebb. De funkcionálisan, azt állítják, hogy ez valójában nagyon teljes. 

Sajnos, amikor én ezt töltse ki, David, kapitány, Férfi, akkor válassza, mondjuk Matthews, Register, minden, ami történik ez. De észre néhány elvitelre. Egy, milyen fájlt vissza a eredmények, úgy tűnik? Így van, valóban, register0.php. Tehát az a tény, hogy láttuk, hogy lépéseket érték egy perce a register0, ez alátámasztja, hogy valóban véget ért fel, hogy az adott fájlt. 

Most ez csak csúnya szöveget. De észre, hogy ez a szöveg érkező helyi gépre, amely a készülék. Szerintem a készülék már mint csak a web szerver, amely lehet a Science Center. Lehet, hogy a tényleges interneten. Tehát ez a nyilvánosság számára hozzáférhetővé. 

Tehát egyértelműen, van valamilyen módon az elhaladó űrlapmező bemenetek szerveren úgy, hogy valamit csinálni velük. Sajnos register0 elég hülye. Csak annyit tesz, hogy nyomtassa ki egy tömb úgy néz ki, mint ez. És ez nem egy tömb a értelemben, hogy tudjuk. Kiderült, hogy a PHP, és sok nyelv, nem csak numerikusan indexelt tömbök amelynek első index nulla, akkor egy, majd két, majd pont, pont, pont, n mínusz 1. 

Ez az, amit a neve egy asszociatív tömb. Egy asszociatív tömb, amelyben tárolhatja kulcs-érték párból, ahol a kulcs nem feltétlenül egy számot. Ez lehet valójában egy string, egy szót sem. És ez lehet megvalósítani, a motorháztető alatt, mint kiderült, adatstruktúra felhasználásával ismert, mint a? Azt hittem, valami drámai fog történni - hash tábla. 

Tehát egy hash tábla, emlékszem, azok, aki csinálta P szett 6, sőt emlékszem , legalábbis akkor is, ha nem egy próbát, a hash tábla, a mi használat, arra használták, hogy csak tárolja szavak. De tényleg, te tárolására kulcsokat és értékeket. Ha végre egy hash tábla P készlet 6 szótár, a kulcsok voltak szavak önmagukban, és az értékeket ténylegesen igaz vagy hamis. Igen, itt, vagy burkoltan, Nem, nincs itt. 

Nos, akkor általánosítani az ötletet. És mi is egy nagyon hasonló adat struktúra tárolására nem a húr magát egyedül a hash tábla, de Tegyük fel, hogy mindenki a hash asztal csomópontok. És akkor is ezt a próbát ahelyett, hogy csak egy bool. Lehet, hogy valami mást. Mi van, ha a kulcs nem volt maxwell, mert Például, de Idézet idézőjel bezárva "név", vagy idézem unquote "kapitány". És belül A C adatstruktúra, akkor tesz egy érték, nem csak a logikai, hanem érték mint idézet unquote "David", vagy "M" vagy "Matthews", és így tovább. 

Tehát ugyanezen adatstruktúrák szoktunk nyilvánvalóan léteznek más nyelveken. És azt állítják, ők valójában sokkal, sokkal egyszerűbb elérni itt. Nézzük valójában egy pillantást most valami hasonló szintaxist. 

Én megyek egy PHP könyvtárba. És fogok nyitni a jobb változata hello-0 előtti. Figyeljük meg, hogy minden, amit tett, adjunk hozzá néhány megjegyzést. Így tudunk megszabadulni, hogy a figyelemelterelés. 

És ez a program nem nyomtatja valóban Helló, mert már meg között címkék akarok végrehajtani, hogy a kódot. Most majd meglátjuk, egy pillanat alatt hogy ez miért hasznos. De nézzük nyitni egy másik példát itt. Hadd menjek előre, és megnyitja azt mondják, gedit feltételek egy. 

Ez így vissza az időben van. De héttel ezelőtt, azt hiszem, az első héten vagy a héten két, volt egy példa az úgynevezett conditions1.c. És úgy döntöttem, hogy újraimplementálni azt a PHP, csak azért, hogy ilyen hangsúlyozni, hogy PHP, szintaktikailag, szinte azonos a C. Ez nem egy hatalmas ugrás a múlt héten ezt. 

Figyeljük meg a tetején a program, amely kezdődik, mint korábban, néhány megjegyzéseket, amit majd megszabadulni , mint a figyelemelterelés. Figyeljük meg, hogy én vagyok a PHP-ben mód ebben a fájlban. Tehát ezt a kódot, majd meglátjuk, lesz végrehajtva. Vegyük észre, hogy ott van readline, ami valószínűleg a analóg PHP a getstring. Figyeljük meg, hogy ez egy kicsit más. Te tényleg meg egy gyors, hogy a nevű függvényt olvasott sort, és ez amit a felhasználó lát. Szóval nem kell printf kézzel. De ez nem egy nagy ügy. Megyek tárolására, belül $ n, a vissza értéke, így bármilyen felhasználó által az ő int. És itt van még egy érdekesség. Kiderül, a PHP, minden változó csak meg kell elé egy dollár jel. Ez egy kicsit bosszantó. De észre, amit én nem tettem a PHP. Mi hiányzik a bal oldali oldalán egyenlőségjel? 

Nem tesz említést a típusát. Szóval ez eltér a C-jobb vagy ami még rosszabb, a PHP gyengén típusos nyelv. Ez nem is számokat. Ez nem is szálakat. Ez van Logikai. És ez nem egy pár más adattípusok. De te, a programozó, általában Nem kell, hogy törődnek velük. Az előnye ennek az, hogy a végeredmény egy kicsit könnyebb a programot. Azt hiszem, egy kicsit kevesebb. A hátránya viszont az is nyílik meg akár lehetséges hibákat, ha véletlenül kezelésére több mint egy string, string számmal, esetleg, de még akkor, PHP, és sok nyelven, elég toleráns. Ők fogják használni az úgynevezett implicit casting. És ha megpróbálod használni n keretében A numerikus helyzet, akkor alakítani, mi itt lesz string, mert ha a felhasználó beír valamit, és megkapod az eredményt, mint a readline, vagy kap string, hogy megy vissza a string. 

De vegyük észre, pár sorral később, azt ellenőrizze, ha n értéke nagyobb, mint nulla. Tehát PHP fog implicit öntött a "String" 123, vagy bármi más a felhasználó típusok, egy int. Tehát röviden, cucc csak működik sokkal több intuitív. Tehát most kezd pihenni néhány dolog, amit tettél a múltban. 

Sok ez a cucc ugyanaz, mégis. Még mindig egyenlő egyenlő. Mint félre PHP is egyenlő értéke értéke, de az, hogy talán a a jövőben. Ez egy. Typo hanem két egyenlő jel ugyanazt jelenti dolog, mint korábban, az összehasonlítás. printf ugyanazt jelenti, mint korábban. Backslash n ugyanazt jelenti dolog, mint korábban. 

Szóval hogyan tudom futtatni ezt a programot? Nos, mint korábban, ha én a PHP, conditions1.php, és írja be több mint 123. Ez egy pozitív szám. Ha írja be 0, 0 vehetem. És ha azt írja negatív 123, kapok vissza a negatív szám, amely csak mondani, szintaktikai, PHP szuper, szuper hasonló. 

Akkor miért ez már hasznos egy internetes kontextusban? Nos, menjünk vissza erre froshims Például, ami úgy festett, újra, így itt. És nézzük valóban húzza fel a weboldalt újra, ami úgy nézett ki, mint ez. Mit tehetünk a adat ez benyújtani? 

Nos, hadd nyit egy újabb verzióját. És látni fogod, hogy a probléma készletek specifikáció végigvezet egy pár ilyen. Ahelyett, hogy indul a nulla, nézzük meg froshims3, amely nem egy kicsit. 

Figyeljük meg az első, valóban, nyissuk fel, mi 0 volt, így látni mi regiszter 0 volt. Figyeljük meg, mi regiszter 0. tett. Egy, már megjegyzéseket a tetején. Törölni ezeket, és elsősorban csak ezen. A legtöbb tartalmának register0.php igen, természetesen, milyen nyelven? Csak nyers PHP. 

Tehát észre, ez a fájl nem indul és abban a pillanatban, nyitó zárójel, kérdőjel, PHP. PHP nem teszi lehetővé, hogy összekeverednek PHP kódot HTML. De én csináltam, hogy itt belül Az oldal itt. 

Most megint, azt csak tudja ezt a Miután megnézte a kézi. print_r, kiderült, a print_recursive. _recursive És ez csak egy ügyes hasznossági függvény, hogy csak kijött, rekurzívan, amit kézzel is. Ha viszont ez egy sor, ez lesz kinyomtatni egy tömb. Ha viszont ez a szám, ez lesz kinyomtatni egy számot. Add, hogy egy string, akkor az nyomtat egy string. Ha viszont ez a hash tábla, kiírja a hash tábla. Nem kell írni az összes , hogy a kódot magad. 

Most veszi észre, hogy én vagyok belépő PHP mód itt. Én kilépés PHP mód itt. Tehát, amikor a szerver beolvassa a fájlt felülről lefelé, balról jobbra, mert a végződik a fájlnév nevű. php, amit nem belső PHP címkék csak lesz nyárson ki, mint a nyers HTML. Nem nagy ügy. De amint a web szerver észreveszi ez azt fogja mondani, hogy nem kellene kiköp, a szó szoros értelmében, print_r utáni. Meg kell végre a következő sor kódot. 

Tehát az utolsó kérdés, akkor a fájl , nos, mi a fene ez? Vegyünk egy tipp. Mi az a $ _POST, talán? 

Közönség: [hangtalan] 

SPEAKER 1: Igen, a kiküldött adatokat. Emlékezzünk, hadd lépjünk vissza idő egy pillanatra. froshim0 ismét, így nézett ki. Egy szuper többsége ez csak HTML. Ismét néhány címkék még nem láttam még, vagy amely amit már ismer. De az érdekes dolog volt ez. Ez egy sor az, ami igazán összeköti ez a mi register0.php fájlt. Én benyújtása keresztül módszer post. És ez azt jelenti, hogy a paraméterek a felhasználó által nem fogja végezni, ahol. 

Ők nem fognak jelenik meg az URL-t. Még mindig fognak küldeni a kliens, a böngésző, hogy a szervert, de csak keresztül más mechanizmus, hogy mi lesz lemond a kezünket A mára, de ez nem az URL-ben. De észre a kapcsolatot most üzenetre, megállapodás szerint, a kisbetűs itt. 

De ha nyit register0.php, Én látszólag nyomtatására. Tehát ez egyfajta furcsa konvenciója. De mi szép a PHP-ben, hogy amikor PHP a web kontextusban, nem a parancssor, mint én egy perce amikor valóban használja a web oldal, a Vhost könyvtárban, mint mi, automatikusan lesz PHP töltse ki az dolog, ami egy asszociatív tömb, hogy úgy mondjam, a hash asztal, mindent, amit a felhasználó beírt szöveg 

Röviden, $ _POST minden sapkák a globális változó, hogy a PHP csak varázslatosan teremt, ha PHP egy webes környezetben. És ez teszi a benne lévő összes nevek a paraméterek a formában, hogy nyújtottak be a fájlt, és az összes az értékeket, amelyeket a felhasználó gépelt be Így átadja neked, amit a felhasználó gépelt be a formában. 

Szóval mielőtt, van tényleg hülye kimenet Az csak látta, mert minden, amit tettem t rekurzívan nyomtassa ezt a tömböt. A kulcs neve az érték David. A kulcs a kapitány. Az érték a. És a dupla nyíl és a szög konzol van, ez csak önkényes. Ez nem kódot. Ez csak a PHP módon mutatja meg milyen értéket néhány kulcs. 

De most hadd javasoljuk, hogy a froshIMs3, ez csaknem azonos kivéve azt állítja, hogy ezt a fájlt. És megint, megyünk, hogy milyen, csak pillantást ez, csak hogy néhány szintaxis, de észre, milyen ezt a fájlt nem. Akkor gondolom csak alapul a vonalak kód, ami valószínűleg nem néz Görög, bizonyos mértékig, látszólag csinál. 

Ez a fájl valahogy kapcsolódik a mail, e-mail. Szóval mi ez a program során? Ebben a verzióban, ha én tényleg töltse ki az űrlapot - és hadd menjen froshIMs3 nem froshIMs0 - formáját ugyanúgy néz ki. David, kapitány, férfi, kollégiumi, Matthews. De ha be ezt, ez a fájl fog menni register3.php. 

És azt állítják, megnézi, hogy ez forráskód, ez lesz a valahogy magában email. Hadd menjek előre, és nyissa meg ezt a fel egy nagyobb ablak, így Láthatjuk, hogy tisztábban. Vagyunk vhostokat, helyi házigazda, nyilvános, froshims. Fogok nyitni egy másik programot, csak hogy még több egyszerre. 

Tehát most itt, észre néhány dolgot. A tetején a fájl van nyitva konzol, kérdőjel, PHP. Aztán ott van egy csomó hozzászólás, amit lehet figyelmen kívül hagyni, a érdektelen most. 

Most itt van ez. Kiderül, PHP sokat A kód neve szükséges. Ez nagyon hasonló szellemben a C a között, hash include, ami lényegében megragadja a tartalmát néhány egyéb állományt, és csak plops őket itt, így használhatja őket. Ebben az esetben a készüléket ki, előre telepített, a könyvtár, a szabad és nyílt forráskódú könyvtár nevű PHP Mailer, hogy bárki letölthető az internetről. Csak nem ez az Ön számára. És ez azt jelenti, hogy most már e-mailben funkcionalitás a rendelkezésemre. 

Most észre néhány dolgot. Megyek, hogy érvényesítse a űrlap benyújtását. Kiderült, hogy a PHP, az egyik, már felkiáltás pont a nem szolgáltató, mint C. De a PHP is van egy függvény nevű üres. 

Üres, csak vissza, ha az érték A dolog, adja le zárójel üres, mint a felhasználó nem írja be semmit Tehát ez azt mondja, és vegyük észre a szintaxis, nagyon emlékeztet a C, ha a név kulcsot, így a név mező formájában, amelyet benyújtott postai úton, a a felhasználó, nem üres, és nemek nem üres a formában is, és a kollégiumi nem üres - de észre nem érdekel kapitány akkor mit fogunk csinálni? 

Fogok végrehajtani ezt a kódsort. És azt hiszem ez a fajta mint a malloc, de ez egy kicsit szakértő, mint ezt. De most ez ad nekem egy speciális struct típusú PHP Mailer. De figyelmen kívül hagyja a kulcsszó új ma. 

Most fogom hívni a függvényt hívják IsSMTP, amely azt mondja, az SMTP. Ez 25-ös port, mint a videó a múlt héten, amikor a dolog dobás az e-maileket a tűzfalat. Port 25 SMTP. SMTP azt használja a levelező szervert. Melyik, tudjuk használni a Harvard SMTP.fas.harvard.edu. 

Tudjuk meg az a cím hogy John Harvard. Ha lapozás tovább, én meg a címzett címe, csak önkényesen, hogy John Harvard is. Így ő lesz elektronikus levél magát. 

Most már meg a témát hogy regisztráció. És én is meg a test az e-mail a következő. Ez a sor úgy néz ki, egy kicsit rejtélyes, de ez csak azért, mert van egy csomó, az információ benne. Egy, van egy pont operátor. Valaki tudja már, mit a pont operátor nem. Ez összefűzés. Tehát, ha azt szeretnénk, hogy a húr a PHP, és csatolja, vagy neve elé azt, hogy egy string PHP, hál 'Istennek, nem kell használni strcopy és malloc, és az összes többé. 

Ha szeretne összefűzni két húrok, aki törődik a memória. Legyen PHP kitalálni az Ön számára. Milyen PHP tenni a pont operátor Itt csak egy nagy mondatot ezt a sort, ez a sor, ezt a sort, ez a sor. És most értesítés, ez lesz hogy dugulás értékeket. Így az e-mail, hogy John Harvard folyik fogadására szó fog mondani név-, vastagbél-, valamit, hanem, akkor közel a húr, és összefűzi a , amit a felhasználó beírt , aztán egy új sort. 

Ezután a következő sorban John Harvard e-mail, akkor fog mondani Kapitány, Be vagy semmi. Ez fogja mondani nem, férfi vagy nő. Dorm lesz Matthews az én esetemben. És akkor észre ismerős pontosvessző a legvégén. Aztán itt, értesítés, kissé rejtélyes is, de a lényeg, miután a minta, amely jobban megismerik után P meg 7, ha elküldi az e-mail false, akkor megy előre, és meghal. 

Tehát PHP függvény nevű hal, amely a szó szoros értelmében, csak megöli a honlapján, és mindig csak ki, amit mondani, hogy - az haldoklik szóval, hogy úgy mondjam. És, hogy abban az esetben, akkor nyomtat , hogy mi a hiba info a mi történt a baj. Tehát hosszú történet rövid itt, mi van egy olyan példa, ahol, ha a felhasználó elküldi az űrlapot, froshim0, froshims3.php, megy register3.php. De register3.php, majd továbblép végrehajtani az összes ezeket a sorokat. 

Szóval van egy pár take szelvény itt. Az egyik, hogy ez nyilvánvalóan elég könnyű, programból, küldjön e-mailt, ami jó. Amikor a felhasználók regisztrálni a helyszínen, Ebben az esetben, ha regisztrál a sport, akkor e-mailben a gólya Proctor, vagy John Harvard, ebben az esetben. 

De ez azt is jelenti, hogy mit csináljon? Küldjön e-mailt bárki bárkinek. És ez nagyon igaz. Ez nem olyan könnyű megtenni, ha van szokva, hogy a Gmail. De ha valaha is használt Eudora vagy Outlook, akkor elég sok mondani a mail szerver, hogy Ön mindenki szeretne. És ez az, ahol el kell helyezni azt a kalapot, és azt mondják, ne tedd ezt. De ez bizonyíték arra, hogy milyen egyszerű az, hogy végre adathalász támadások, és a küld névtelen e-maileket, és a spam, általában. És ez tényleg attól függ, hogy a tény, hogy minden amire szüksége van némi programozott hozzáférést. 

Mellesleg, a legközelebbi találkozás a hirdetés fórumon, a saját első évben, volt, amikor rájöttem, a hűvös fogás, hogy wow, akkor küldjön e-mailt senkitől. És így volt némi buta érv, szó szerint, Matthews, között a Proctor csoport. Már nem is emlékszem, mi a kérdés. De ki akartam próbálni, hogy véget vége ennek a hülye vitát. 

Szóval úgy döntöttem, én is csak e-mailben az én Proctor csoport, úgy tesz, mintha A másik fickó, akinek véleménye I nem értett egyet, és őt belenyugodni amit véleményem volt az adott vitában. És így hamis e-mail használata technika hasonló szellemben ezt. De ez valóban könnyebb abban az időben. Hit küldeni. Nem volt elégedett, és nem is volt a hirdetés fórumon. 

És én nagyon gyorsan kifogott másodpercig, mert, mint tudjuk, aláírom az én e-maileket egy bizonyos módon. És bár tudom, hogy kézzel, nagy rész, 15 évvel később, mert én voltam traumatizált, hogy az. Nekem nincs aláírás az én e-mail van. De 1995-ben, csak volt egy sig, az aláírás az én e-mailben. Így volt ez a megjegyzés azt mondja, Kedves Proctor csoport, én belenyugodni véleményem és egyetért David, aláírt és így így, az új vonal, új vonal, DJM. 

Tehát ne csináld ezt, vagy általában, hogy előnye, ezt a technikát. De amikor, hogy a honlap, mint a A projekt végső, ha így egy website valami vállalkozói, ez így, pragmatikusan, akkor tőkeáttétel egyéb szolgáltatásokat az interneten mint a mail, majd ténylegesen elküldeni a dolgokat a kódot. 

Szóval hogyan lehet javítani a helyzeten? Nos, először is vessünk egy gyors túra néhány dolog, hogy látni fogod, majd vess egy pillantást néhány példa. Tehát az egyik, hogy megnyugtassa, mert repülünk PHP-n keresztül. És tudom, egy bizonyos ponton, akkor ténylegesen írjuk ezt, ha még nem tette meg. Ismerd fel, hogy az egyik, a fő kedves a ki az ablakon a PHP. Ha meg szeretné írni a kódot, hogy lesz végre, akkor csak elkezd írni azt nevű fájl. php amíg akkor a nyitó zárójel kérdőjel PHP tag. 

De észre ezek feltételek php. Figyeljük meg, hogy ez pontosan ugyanazon a lemezen volt az első héten, amikor már körülmények C. Feltételeket PHP szerkezetileg és szintaktikailag ugyanaz. Egyetlen igazi különbség az, ha megvan bevont változók, akkor a dollár jeleket. 

Eközben logikai kifejezések néznek ki, mint ez az vagy-nek vagy and-nek egymással. Kapcsolók ugyanúgy néz ki. Mi a jó a PHP, míg a C-ben kapcsolók kell az esetek primitívek, mint a ints vagy karakter, a PHP-ben Ön esetében nyilatkozatok is lehet egy egész húrok, amely valójában milyen szép. Takarít meg egy kis időt. Nem lehet csinálni, hogy a C- 

Itt egy for ciklust a PHP. Ez azonos. Lehet, hogy néhány dollár jeleket a változókat. Nem kell említeni, hogy az valami egy int. Csak nyilvánítja egy dollár jel és a változó nevét. De egy for ciklus ugyanaz. A while ciklus ugyanaz. A do while ciklus ugyanaz. 

Ez egy kicsit más. A PHP, és egy sor, akkor statikusan kijelentik tömb, mint a C, de használja szögletes zárójelben. A C, akkor használja zárójelek, ha még tudta. De ez valójában nagyon gyakori a PHP nyilatkozni tömb, ebben az esetben, a számok, és hívja a változó számokat. 

Változók maguk is néz ki. Itt van egy string, idézve idézet vége "hello világ. "Lehet, hogy egy backslash n. Én egyszerűen nem ebben az esetben. 

Most ez egy érdekes konstrukció. C nem rendelkezik ezzel. De ez szuper hasznos. És látni fogod ezt a P meg 7 spec - a minden konstrukció. Ha meg szeretné ismételni az összes, a elem egy tömb, akkor nem kell foglalkozni $ i és $ n, és + +, meg minden. Lehet szó mondjuk, PHP, ez - az egyes számok számát, így Feltételezem, hogy $ számok egy tömb a számok. És amikor azt mondom, az egyes számok mint szám, ez lesz a automatikusan, ahogy a ciklus végrehajtja, frissítés, minden ismétlés, az érték belső dollárjel szám - újra, és újra, és újra séta számomra, mint a tömbben. Tehát csak megment minket kódot. Nem pontosvessző, nem + + 's, nem, ez, nem az n, ez csak jó. 

De a PHP is van ez. És ez szuper erős. És akkor használja ezt, kezek A, P meg 7. És asszociatív tömb is kijelentette, szögletes zárójelben. De észre a szintaxis most. Ez az emlékeztető, amit látott A print_r egy perce. Hány gombok, mint egy kis józanság csekket, jelent ez tömb úgy tűnik, hogy. 

Tehát két. És Én ezt egy tömb. De ha ez segít, akkor gondolom Az ezt hash tábla, vagy egy asszociatív tömb. De ez csak egy másik típusú tömb. És ismét, több nyelven ezeket. Meglátjuk hasonlót JavaScript is. Van két kulcsot. Az egyik idézet idézet vége, "szimbólum," az egyik idézet idézet vége "árát". És azok a gombok mindegyike egy értéket. Ebben az esetben a szimbólum értéke FB, a Facebook, és az ár az érték a 49, 26, ami Facebook részvényei ár a ma reggel. 

Tehát mi a hasznos egy asszociatív tömb. Tudtam volna számszerűen indexelt tömb csak egyszerű, szögletes zárójelben. És nem tudtam volna dollárjel quote egyenlő csak ez. Hadd valójában csinálni. Tegyük fel, hogy inkább csak kijelentette, ez a tömb, mint ezt. Ez teljesen érvényes, szintaktikailag. Nem veszíti el információt, önmagában. Még mindig látom, hogy a szimbólum fb, valamint, hogy az ár 49, 26. Akkor miért van asszociatív tömbök vonzó? 

Közönség: Nem kell emlékezni ahová dolgokat. 

SPEAKER 1: Pontosan, nem kell emlékezni ahová dolgokat. Nem kell emlékezni önkényesen hogy az állomány szimbólum zárójelben nulla, és a tőzsdei árfolyamok is a konzol egy, ami különösen veszélyes, ha változtatni a dolgokat, végül is. Sokkal szebb társítani mit fogunk hívni metaadatok a tényleges adatok. Azt állítják, hogy amit igazán érdekel az itt fb és 49., 26.. A szimbólum és az ár metaadatok , amely leírja az adatok azt tényleg érdekel. De ez csak annyi könnyebben elérhetővé. 

Most, egy félre mi Az ár, amit fizetni? Mi már ezt A CS50 hetekig. Ezt a szolgáltatást jön néhány költség. Memória. Szóval nem csak tárolja a 32 bites integer, például. Te tárolása szimbólum / 0, valószínűleg. Szóval használ több memóriát. 

És mi a teljesítmény keres valamit egy asszociatív tömb, talán? Valószínűleg lassabb. Véletlen hozzáférésű szép, különösen ha meg tudod csinálni bináris keresést. De ha tényleg már akik nem a számok, hanem a vonósok, a igazán valósul alatt motorháztető, valószínűleg a hash tábla, ahol a használ vagy egy hash tábla külön láncolás. Vagy használj egy próbát, hogy ténylegesen tárolja az értékeket. Így talán meg tudod csinálni állandó, de még mindig meg kell nézni, S-Y-M-B-O-L, potenciálisan, ahelyett, hogy csak 32 bit keresni valamit. Tehát még egyszer, az azonos gondolatok jönnek vissza, hogy visszatérnek ebben az összefüggésben. 

De ismétlem, a PHP most néhány szuper globals, hogy kiderült, az asszociatív tömbök. Láttunk egy pár perce, $ _POST. És ez szuper globális van kulcsokat és értékeket. Pontosabban, a billentyűk sorban, amit? Hol a kulcsokat a $ _POST származik? Csak hogy újra bedugni? 

Közönség: név. 

SPEAKER 1: Név, hol? 

Közönség: [hangtalan] 

SPEAKER 1: név a tulajdonság. Hát hol, hol tettek eredetileg származik? A formában. Tehát, ha egy HTML oldalon van egy form tag, belsejében, amelyek közül néhány bemenet, mint a jelölőnégyzetek, szövegdobozok, legördülő menük, amelyek mindegyike egy nevet, e név végén, mint kulcs a $ _POST, és őszintén szólva, ha már itt tartunk, $ _GET. Ha a módszer get, ugyanezt a gondolatot. Ez csak egy másik szuper globális. És az értékek, természetesen származik , amit a felhasználó beírt az ő vagy a böngészőt. 

De van még néhány más. Van süti, amit majd gyere vissza végül. De ezek azok a dolgok, hogy tudod A web használ valami jó vagy rossz. De majd jön vissza, hogy a. Server és a munkamenet, és a két néhány speciális segédprogramot. 

De vessünk egy pillantást erre. Hadd menjen előre, és nyit egy példát hívott mvc0.php Így MVC áll a következő. És be ezt korábban is jellegzetes, tényleg, hogy neked tervezés Probléma szett 7, és végső projektek A sort egy iparág szokásos módon, és tiszta módon. Jó design. 

Szóval hamarosan látni, és akkor tapasztalat, a P meg 7, paradigma, sort a programozási gondolkodásmód, úgy néz ki, egy kis valamit, mint ez. M modell, C-Controller, V View. Hosszú történet rövid, MVC csak ilyen módszertan, a módja annak, hogy weboldalak, különösen az, amely akkor fel az összes, hülye kifejezés - üzleti logika - az összes szellemi tulajdon az úgynevezett a vezérlő, a fájl mint index.php, vagy majd meglátjuk, quote.php vagy buy.php. 

Keretében a probléma meg 7, a modellek általában tartalmaznak az adatokat, bármi kapcsolódó adatbázis, ahogy fogjuk végül látni, és a véleményét tartalmazzák az esztétika a helyén, a HTML, a CSS. Így már látta ezt a C egy kicsit bit használatával. h fájlokat. Tényleg láttam egy perce CSS, a faktoring a CSS stilizáció dolgok a mi HTML. 

Tehát MVC tényleg csak a rajz vonalak a homokban, és azt mondja, a érdekes programozási kódot webhely tartozik, amit hívjuk a vezérlő. Stuff kapcsolódó adatbázis tipikusan végül egy modellt. De látni fogod, a probléma meg 7, akkor összeolvad C és M, hogy ez egyszerű. De a kilátás, ahol minden a HTML és az esztétika általában menni. 

Szóval, mit jelent ez a gyakorlatban? Nos, hadd menjen be a MVC könyvtárban az alábbiak szerint. És akkor még több ilyen turnézott a spec. Tehát mvc0 azt állítják, hogy ez, mint, verzió 0 CS50 honlapján. 

Minden van egy kis HTML, mint a nagy h1 tag, látszólag. És akkor a felsorolás. Még soha nem láttam a felsorolás korábban, de nem nagy ügy. Nézzük gyorsan nézd meg a forráskódot. Kiderült, hogy egy rendezetlen lista golyókkal nyitva tartó ul egy vagy több listaelemek, li. Tehát Közlemény Itt egy horgony tag. Azt láttuk, hogy egy perce. 

Szóval ez hogyan hajtják végre ezen az oldalon. Van két linket, két lista elem, egy ul a rendezetlen lista, és a végén eredmény, esztétikailag, ez nagyon szép honlap, 0-s verzió itt. De ami érdekes, most az, hogy ez a valósul a motorháztető alatt. 

Hadd menjek be gedit és nyissa fel a első példa, hogy festeni egy képet. És nézzük meg, mi a hibás, potenciálisan itt. Most, ha elmegyek a localhost, az állami, MVC, észre néhány kép. Fogom nevezni ezeket, hogy a Jelenleg minden vezérlő. De ez egy kicsit a visszaélés, mert látni fogod, minden a legnagyobb keverik belsejében őket. 

És hadd menjen be a index.php. És azt látjuk, a szó szoros értelmében, az ugyanazt a HTML. Így, bár ezt a fájlt végződik . Php, Ez nem jelenti azt, hogy bármilyen PHP kódot. Ez csak a nyers HTML, bár ez pont olyan ostoba. De észre nincs nyitva tartó PHP tag, kivéve ezt, ami, őszintén szólva, csak ott szolgál megjegyzést. De ez funkcionálisan nem még olyan érdekes. 

De észre. Ami érdekes, az, hogy milyen változás ezen az oldalon. Hadd kattintson előadások. És észre az URL megváltozik. Most vagyok lectures.php. Hadd kattintson nulla. Most én vagyok a week0.php És most nekem megnyitni ezeket a fájlokat a gedit. Nem csak index, de most én nyit előadásokat. És hadd megszabadulni a hozzászólások összpontosítani a csak részben. 

És most hadd nyitnak csak még egy, week0.php, dobja el a megjegyzéseket, csak azért, hogy tiszta a fel. És most értesítést a következő. Gondolkodás tényleg valami figyelmesen a design, és tegyük vonal fel ugyanaz, mit lehetne tenni jobb itt, mit gondolsz? 

Hogy nem vettem, hogy egy héten egy? Hogy erről. Szóval így csináltam egy hétig. Odamentem Fájl, Új, Beillesztés, Mentés, week1.php, aztán mentem itt. És én megváltozott egy - mi volt ez, az egyik a péntek. Megváltoztattam a nullát egyet. Megváltoztattam ez egy. 

OK, így most nézd meg a fájlokat. Mit lehet tenni másképp? Hol van a lehetőség, talán? Tehát ott van a lehetőség, hogy indul faktoring ezt a cuccot. Hadd nyit, mint a spoiler, a mit fogsz látni P set 7. Ha nyit, most index.php-es verzió öt az, úgy néz ki ahogy több rejtélyes, kétségkívül. 

De ez, most én is így fogom hívni a vezérlő, amely irányítja a logikája oldalam. És tudod milyen rekonstruálni, ösztönösen, talán, mi folyik itt. Az első sorban, ez egy kicsit rejtélyes. De észre én igénylő, mint a éles include, a fájl neve helpers.php. És akkor hívom, úgy tűnik, a funkció, az úgynevezett render, átadva két érv. 

Az egyik idézet idézet vége, fejléc. A másik pedig, hogy milyen adattípus ezt alapú a mi szintaxis korábban? Ez egy asszociatív tömbként. Pontosabban, ez halad a címben néhány metaadat emlékeztet , hogy mi ez, és az értékét. Aztán látom a kemény kódolt ul, így néhány nyers HTML. De aztán itt vagyok PHP módban hívás funkció render. Tehát akkor is, ha soha nem használt HTML vagy PHP előtt, és bár ez úgy néz ki, ijesztőbb, miért van ez valószínűleg jobb design? Mi a jobb róla, alapuló következtetés? 

Közönség: [hangtalan] 

SPEAKER 1: Kevesebb felesleges, hogy nincs több HTML tag, nem több fej tag, nem több body tag minden rohadt fájlt. Ehelyett már faktorált ki hasonlóságok és feltehetően őket egy fájlba valamilyen módon kapcsolódnak a fejlécet. És ugyanezt a szoros test tag, a szoros HTML tag. Ez talán itt lent belül A lábléc valahol. És látni fogod, hogy probléma meg 7, egy kis túra ez. 

Szóval, mi vár ránk? Az egyetlen dolog, amit még nem képesek még a az, hogy ténylegesen az adatok tárolására. És mit fogunk kezdeni, hogy Szerda, például az, hogy a régi barát Excel, vagy számok, tárolását teszi lehetővé sok adatok sorokban és oszlopokban. Kiderült, hogy meg tudod csinálni, hogy mi nevezett adatbázis programozással. mániás És kiderül, ezt követően, leszünk képesek tárolni a dolgokat, mint a ezt, látni fogja újra P set 7, egy csomó felhasználónevek és jelszavakat, melyek közül az utóbbi a valójában titkosított, ugyanúgy, mint ők volt P set 2 hacker kiadás. És végül, akkor végre ezt, Saját Etrade-szerű weboldal végrehajtja együttesen CS50 finanszírozás. 

Végül pedig tartózkodott itt ilyen későn ma, ha jön vissza, hogy ez a része A campus, a 04:00 ma, mi lesz Önnek nem csak tanácsot, az SCE Tanácsadás Fair, at 16:00 a Maxwell-Dworkin, akkor ad egy kis Americone álom, Cherry Garcia, Chocolate Fudge Brownie, csokoládé Chip Cookie Tészta, és, ha a Google Chunky Monkey, megkapod ezt. Tehát minden, hogy várja a 04:00 PM-Maxwell Dworkin. Találkozunk szerdán is. 

SPEAKER 2: A következő CS50, RJ alszik be 

RJ: A rész! Ha! Oh,