[Zenelejátszó] DAVID J MALAN: Rendben, szívesen vissza. Ez CS50. Ez a vége a hét hét. És ez a vége, hogy a dögevő vadászat a problémás meghatározott négy hogy lehet felidézni. Miután vissza valamennyi azok JPEG alkalmazottak, te kétségbe, ha úgy gondolja, fényképezni magát, mint sok Az ilyen emberek, mint te. Van egy csomó beadványok Az elmúlt hetekben, sőt, jó néhány jog délelőtt ma, amelyek közül néhány az említett itt, fogott itt in-- néz like-- Annenberg Hall munkaidőben, egy ide Lowell ház Nick. Itt van Ramon lebukás a telefon. Ez volt a CS50 ebédre. Ez volt a Jason Skyping Egy kreatív osztálytársa, aki hívta így. Nem tudom, mi ez. 

[Nevetés] 

DAVID J MALAN: De ez megér egy gigabyte. Itt Chang, aki szó szaladt le a színpadról hogy elkerüljék, hogy fényképezett egy nap, de végül elkapta. Itt van Nick. Itt van Nick. Itt van Nick. És itt van Alison le a mezőket. És még Zamyla találtak egy bálterem versenyt. Így megy át ezeket a képeket, kitalálni benyújtó a legtöbb a legkorábbi, és jutalom egy mesés díjat, mivel ígért a spec. És mi is nyomon mintegy a tér, hogy a részt. 

Pár announcements-- így ebéd az, megint, ez a péntek 13:15. Ha azt szeretné, hogy csatlakozzon hozzánk, RSVP abban URL itt. Jason ismét megjelenik itt egy a szakaszok egy pár évig vissza, ami történt, esik a Halloween. És valóban, ő öltözött tök az adott évre. Ha nézni ezt a részt Az ő 2011-től szakasz nyolc, ha kíváncsi, A CS50.tv, azt hiszem, ez volt az az év, amelyben a levegő pumpa dolgozik. 

Ha majd nézd meg az hasonló szakasz 2012-ben, meglátja ezt Jason sok leeresztett, mivel a ruha már nem működött, amely csak mondani pénteken, ha azt szeretnék faragni egy tök Daven és Gabe és mások, válaszolj a fejek A cs50.harvard.edu címre. Azt ígéri, hogy jó móka lesz. Daven, azt mondták, a faragott tök egész életében. Gabriel Brazíliából soha faragott sütőtök a Halloween. Tehát ott, mert ő tanul. 

Szemináriumok, meanwhile-- így megtudhatja hamarosan arról, milyen elvárásaink vannak az a végleges projekt, amely lényegében majd forraljuk le megtervezése és végrehajtása a legtöbb olyan projekt érdekes te, bár jóváhagyásával és útmutatást a tanítás a fickó. Vége felé a félév, bemutatjuk a szám szemináriumok, amelyek a választható osztályok által vezetett oktatási ösztöndíjasok és a Harvard munkatársai, barátai a kurzus egész campus, különböző témák vannak érintőleges a Persze a mögöttes tananyag de ennek ellenére alkalmazható, szórakoztató, és különböző lehetséges végső projekteket. 

Például először, ha azt szeretné, regisztrálni, fej, hogy URL-t is. És ez a felállás Az idei szemináriumok egyedül. De észre, több tucat szemináriumok tól az elmúlt években, melyek kapcsolódik a szemináriumok menü lehetőség a kurzus honlapján. Tehát, ha gondolkodik túllépve a komfort zónában vagy vesz fel, néhány új készségek, például, programozási iPhone alkalmazásokat Swift, egy új nyelvet Apple vagy Objective-C vagy Android apps vagy programozás [? dákó?] izzók, vagy a téma itt és több, megfelelő ellenőrzés ki a regisztrációs oldalt. 

Így kezdődött, és megállapította, a Hétfő nézi HTTP. Így gyors refresher-- HTTP, HTTP protokoll. De mit is jelent ez valójában? Ez mit is jelent? Ez a kéz? Tudom, hogy te csak vakarja a fejét. De szeretnénk javasolni mi a HTTP? 

KÖZÖNSÉG: Hogyan számítógépek kommunikálni [hallható]. DAVID J MALAN: lekéstem az utolsó rész. Számítógépes kommunikációs with-- 

KÖZÖNSÉG: internetes kiszolgálók. DAVID J MALAN: Good-- internet szerverek, és különösen, web szerver. Mert emlékszem, van egy csomó szolgáltatások az interneten, amelyek közül néhány használata valószínűleg naponta közötti beszélgetés és az üzenet, chat, és a web és e-mail, és a hasonlók. És még csak a HTTP protokoll, amely a böngészők beszélni, ha kommunikál webszerverek, és fordítva. És az analóg az emberi világ lehet, Én kiterjeszteni a kezem, hogy rázza egyes másik ember által, és ő elismeri kiterjesztve ő kezét is. Szóval ez csak egy protokoll, egy sor egyezmények. 

És mi valóban azok egyezmények? Nos, ez csak attól függ, hogy üzenetek küldésére oda-vissza, ahogy itt látható. És van egy pár módon amely küldhet ezeket az üzeneteket. És talán a legfontosabb közös néven kap. És majd meglátjuk a kontraszt e nemsokára. 

De egy GET kérés böngészőből a szerver csak úgy néz ki, mint ez. Ez egy csomó szöveget, hogy hozza belsejében egy virtuális boríték. A külső, hogy a boríték megy egy pár darab részleteket. Mit kell menni a boríték, hogy úgy mondjam, annak érdekében, hogy a kérelem, mint a ezt tőlem, hogy egy webszerver? Igen. 

KÖZÖNSÉG: Az IP-cím. 

DAVID J MALAN: My IP-cím a Feladó mezőben, hogy úgy mondjam, és természetesen, a címzett IP-címét. De abban az esetben egy web csomag, szükségünk van egy kicsit részletesebben Nem elég csak a Levél borítékot a szerveren, mert a kiszolgáló lehet hallgatta a különböző típusú az internetes forgalmat. Szóval mi mást nem is kell mellett a címzett IP? Igen? 

KÖZÖNSÉG: Vajon TCP? DAVID J MALAN: Jó. TCP-- 

KÖZÖNSÉG: cím. 

DAVID J MALAN: cím, vagy port, ahogy hívják. Bezárás, de a TCP port számát. És van egy csomó ilyen. De biztosan a legtöbb ismerős kell végül 80, ami az alapértelmezett használthoz internetes forgalmat. És még egy ismerős egy hamarosan 443, mellyel a biztonságos web forgalom, URL-ek https kezdeni. 

Szóval, ez az, ami megy belsejében a borítékot. És kap / csak azt jelenti, hogy nekem az alapértelmezett weboldalt. Adj a gyökér a kemény meghajtó, hogy a web szerver. És remélhetőleg, az interneten szerver válaszolni fog, OK és a 200-as, amely mindössze egyezményt, mondván, igen, minden valóban az OK gombra. Itt az oldalt. A típus a weboldal fog lehet szöveg, de pontosabban, HTML, amit mindjárt merülni vissza. És pont pont pont csak eszköz, itt van a HTML. És ez az, ahol mi vegye fel a történetet, tulajdonképpen írás HTML, Hypertext Markup Language, amely az a nyelv, amelyen weboldalak írva. Ez nem egy programozási nyelv. Nincs funkció vagy hurkok vagy körülmények között. Ez egy leíró nyelv, valamint újra látni ma, amely lehetővé teszi, hogy meghatározza hogyan kell felépíteni és stilizálhatja esztétikailag egy internetes oldalon. 

Tehát ez volt az egyetlen és csak az oldalon valóban nézett, ha röviden, hétfőn. És észre néhány kiemelkedő jellemzői. Van egy csomó nyitott szögletes tartó és közeli szögletes zárójel. A szögletes között zárójelben vannak szavak. És mi fog kezdeni amelyben ezek a szavak címkéket. Így nyitott zárójel fej és zárt tartó fej a nyitott és zárt címkék, vagy a kezdő és záró címkék illetve egy HTML elem, ahogy mi nevezzük, az úgynevezett fej. És ugyanez érvényes zsargon a test HTML és így tovább. 

És ami szép is HTML-- sőt, fogunk szörnyen kevés időt töltenek vele, mert akkor inkább csak kitalálni milyen funkciók azt, ha valójában egy konkrét probléma hogy solve-- rájössz, hogy A böngésző nagyon buta. Ez csak fog do-- ellentétben nem a computer-- mit mondani, hogy igen. És ha van nyitva konzol HTML legtetején ott, hogy lényegében csak azt jelenti, hé, böngésző, itt jön egy weboldal írt HTML. 

Ha lát nyitva tartó fej, ​​ez csak azt jelenti, hé, böngésző, itt jön a fej, vagy a legfelső része az weboldal. Ha meglát egy zárt konzol fej, ​​ez csak azt jelenti, hé, ez az a fej. Készenléti valami mást. És ez valami más látszólag lesz a szervezetben. És ha nincs címke, mint Ön most hello, vessző, világ, ami csak lesz nyers szöveget végül jelenik meg a képernyőn. 

Most, észre fogod venni, túl a behúzás itt. Akkor talán arra következtethetünk hogyan vagyunk stilizáló azt. Minden alkalommal, amikor megnyit egy tag, hogy úgy mondjam, én behúzása. És minden alkalommal, amikor bezárni Egy tag, én un-francia, hasonló szellemben a kapcsos zárójeleket. És azon túl, hogy én vagyok a fajta használata megítélésem. Vegyük észre, hogy én nem zavarta üti Adja meg a belsejében, amely cím. Miért? Nos, úgy döntöttem, hogy nézett ki a kicsit tisztább számomra, az ember, hogy csak nem zavar csinálja. Szóval megint, van néhány felhívja ítélet csak mint ott van a C vagy bármilyen nyelven. 

Vegyük észre, hogy ez is behúzás alkalmas arra, hogy a mentális modell nem kell túlzott bonyolítja azt. De egy fa, igaz? Ha úgy gondolja, a web oldal, látszólag írott mint ez, mint szépen tagolt így, akkor szinte gondolni a nyitott konzol HTML zárt konzol tag elhatárolására a gyökér a csomópont, a családfa stílus csomópont a stílus a fák megnéztük múlt pénteken. 

És valóban, már az itt mi fogjuk hívni a DOM, D-O-M, dokumentum objektum modell, divatos szóval egy fa, amely jelzi, hogy a HTML. És észre, hogy HTML-ben, azt fogjuk mondani, mint egy családfát, két gyermeke van. A bal oldalon a feje. A jobb oldalon a test. 

És ahogy egy agyatlan gondolat gyakorlat, fej, ​​persze, van, hogy hány gyerek szerint ez a szerkezet? Tehát csak egy, title-- és ezért van a nyíl megy a fejét, hogy a cím. Tehát, mintha az adott személy a családfa már csak egy utód. És akkor maga a cím elmondható, hogy a gyerek is. 

Emlékezzünk vissza, hogy a HTML volt hello, vessző, a világ alatta. És én csak rajzolt belül egy ovális helyett téglalap igazságos közvetíteni szemantikailag hogy bár ez egy csomópont a fában, hogy úgy mondjam, ez a fajta alapvetően különböző. Ez nem tag. Vagy még pontosabban, ez nem egy elemet. Ez csak egy szöveges csomópont, ha úgy tetszik. De ezek teljesen önkényes emberi egyezmények. Ez most az én utam az képviselő, mit fogok mint összesítve hívja a dokumentumot. 

És mint félre, a dolog A szuper bal felső sarokban, nyitott zárójel felkiáltójel doc típusú HTML, ez úgy néz ki, mint egy címke, de ez a hülye sarok esetben, ha hogy csak ott, a vágólapra másolni hogy jelezze a böngészők Ez a HTML 5-ös verzió. A világ folyamatosan változik, amit a első sorban a kód egy oldalon legyen. Ez csak annyit jelent, 5-ös verzió. Tehát nem elég néz ki, mint a többiek. 

Rendben, így az, hogy azt mondta, akkor most értékelni ez elég ez a hülye tetoválás valakinek megvan. 

[Nevetés] 

DAVID J MALAN: Rendben, és most nézzük valóban merülés csinál valamit ezzel. Majd emlékeztetnek arra, hogy utoljára Én megnyitotta a CS50 Appliance és tettem valamit egyszerű, mint megnyitása gedit. És én mentette a fájlt még én desktop-- sehol special-- mint hello.html. 

Hadd csinálni again-- hello.html Enter billentyűt. És most ebben a fájlban, megyek megy előre, és szaporodik, amit most saw-- doc típusú html Akkor megyek do nyitott konzol html zárt konzol. És akkor fogok preemptively nyitni és zárni a tag. Miért? Csak így ne felejtsd el később. Ez csak jó gyakorlat, mint a nyitás és záró kapcsos zárójelek egyszerre. 

És akkor mi következik? Azt hiszem a tetoválás. 

KÖZÖNSÉG: A fej. 

DAVID J MALAN: A fej. És akkor itt, volt a címe, azt hiszem. És a cím volt önkényesen, hello, világ közeli címet. És akkor itt le, a test, a course-- akkor zárja be a body tag. És akkor csak némileg redundáns, Ugyanez volt a dolog itt. 

Szóval azt állítják, hogy ez a weboldal. Ez az, amit most már élőben az interneten, annak ellenére, hogy persze, ez a szó szoros értelmében él az asztalon most. De tényleg, ha minimalizálni gedit, Találkozunk az asztalon az ikonjára. Annak ellenére, hogy ez a készülék, meg tudná csinálni ezt a Mac OS nélkül TextEdit vagy A Windows Jegyzettömb még. 

És ha megy előre, és dupla kattintással hogy még, és select-- jól, hadd nem választható ki, mert Chrome nem nyílik. Menjünk előre, és nyissa meg a Chrome. És akkor nem Command-O nyitott És keresse meg az asztalon és nyissa meg a fájlt. Így a böngésző értelmezi HTML, felülről lefelé, balról jobbra. Hé, itt a HTML böngésző. Itt a fejét. Itt a cím. Itt a test. És valóban, ez hogyan azt teszi, hogy a weboldal. 

Vegyük észre, az URL-t. Egyikőtök sem lehet húzni ezt a különleges oldal a laptopok most, belül is a eszköz útján, hogy URL-t, mivel file: // azt jelzi, hogy valójában én fájlrendszer, a merevlemez, nem a tiéd. Szóval ez még nem minden, hogy hasznos. 

Nézzük most elmozdulni a tényleges webszerver. És kiderül, a CS50 Appliance több, mint egy olyan környezetben, ahol írhatunk C kódot és összeállítása és fuss, mint te csináltál. Azt is be lett állítva a személyzet, hogy képviselje a tipikus web szerver, ami az interneten, az egyik, hogy lehet, hogy fizetni vagy az egyik, hogy az úgynevezett felhő. 

És ez működik szabvány ingyenes, nyílt forráskódú szoftver, például, valami Apache nevű, ami talán még mindig a legnépszerűbb internetes szerver szoftver a világon hogy több ezer weboldalak használata ma. És ez is még van szoftverek, mint a MySQL, amely egy adatbázis-kiszolgáló hogy mi lesz végül eljut, amely csak mondani Kezdhetem kezelésére a készülék, mint a teljes értékű szerver hogy én nem fizet máshol. Csak él, a saját laptop fejlesztés és a kényelem célra. 

Szóval menjünk előre, és kihasználják ezt. Én megyek előre, és nyit egy terminál ablakot. És én megyek előre, és move-- valójában, először vagyok fog navigálni az asztalon. Ha én ls, ott hello.html. És én megyek előre, és kezdi el használni Új könyvtár voltunk előtt nem használt ma. 

hello.html-- fogok mozogni a ../vhosts virtuális hosts-- bővebben a future-- majd egy könyvtár neve localhost, amely az adott becenév szinte bármely számítógép, hogy ez egy Mac, PC, vagy Linux számítógépes, majd különösen a könyvtárba, hogy mi, A személyzet már létre az Ön számára, ha letöltötte a készülék úgynevezett nyilvános. És ahogy a neve is sugallja, valami Tettem ebben a mappában, elméletben, lesz most nyilvános, legalábbis az emberek aki közvetlen kapcsolat a számítógéppel. 

Tehát most hadd menjen előre, és ezt cd hogy ugyanabba a könyvtárba így látom, mi van folyik és típusától ls. És valóban, ez a egyetlen dolog ott. Azt állítják, hogy azért, mert most már, hogy ezt a fájl hello.html belsejében egy könyvtár az úgynevezett nyilvános belsejében egy könyvtár úgynevezett localhost belsejében egy könyvtár nevű vhostokat, amely köszönhetően CS50 személyzet már előre beállítva, hogy a gyökér a webszerver, Most már remélhetőleg erre. 

Megyek, hogy nyit egy új lapot. És én megyek, hogy ne file: //. Fogom használni a tényleges http / localhost, amely ismét a beceneve a saját szerver. És akkor én megyek, hogy milyen fájl nevét, csak hogy világos? Hol van ez a történet valószínűleg megy? hello.html. 

Más szóval, azt akarom, hogy most ezt a az én saját számítógép, a saját készülék, mintha ez egy valódi szerver. A becenév localhost. De gondolom, a localhost, úgy, mint Facebook.com google.com, bármi. Ez csak az én helyi neve. És akkor az utolsó, amit akarok, a gyökere a merevlemez, hogy úgy mondjam, vagy a gyökér a webszerver, ergo a perjel, majd a a fájl neve hello.html. 

Hadd kicsinyítés és nyomja meg az Entert. És valóban, van most a weboldalt. Szóval kicsit más. És ez csak a underwhelming. Ez a régi verzió. Hadd összezsugorodik a betűtípus vissza. Ez a régi. Ez az új. De mi történik alapvetően most az, hogy a HTTP van használatban. 

Nézzük, hogy ez egy kicsit több tiszta vagy, ha úgy tetszik, egy kicsit bonyolultabb. Hadd menjek a jobb alsó sarokban sarkában a készülék. És észre, hogy mindez idő, ott volt a szám. Ez az egyedi cím a CS50 Appliance. Ez egy privát címet, szerint közvetlenül a 172,16, ami csak azt jelenti, csak fizikailag férsz webszerver. Minden tűzfallal és szépen védve a többi a világ, mert ez foglalkozik. 

És most észre bár ha elmegyek ezt a címet, nem az én készüléket, de Mac OS-- megyek hogy menjen vissza ide. Ez az én Mac most. És most megyek nyitni ezt a verziót a Chrome itt. És én megyek a http: //172.16.25 / És elfelejtem a rest-- 133. 

Szóval megyek, hogy látogassa meg az én Mac az IP-/hello.html Enter. És most látom a Mac hogy a CS50 Appliance, aki IP-cím az, hogy szám, valóban viselkedik mint egy webszerver az interneten. Ez nem egy szép könnyű megjegyezhető nevet, mint a Facebook.com, de ez a HTTP látszólag, bár a Chrome A fajta egyszerűsítése a világ a számunkra, de nem mutatja meg nekünk HTTP. De ez valóban pontosan. Chrome csak bizonyos megtakarítás karakternél ezekben a napokban. És ez az, amit most lát. 

Szóval ez mind szép és jó. De ez egy nagyon underwhelming oldalt. Hadd menjen be, és tegyen valamit most egy kicsit másképp. Hadd menjen vissza a gedit. És ahelyett, hogy hello, világ, mondjuk egy képet. És igényelt before-- hadd menjen az én localhost könyvtárba nyilvános. És hadd menjen előre, és másolja a csomó fájlt a mai én Dropbox mappából itt. 

Most, ha az I. típusú ls, nézd egyáltalán ezeket a fájlokat hogy már által terjesztett tanfolyam honlapján előre a mai, amelyek közül az egyik még mindig hello.html. Így van, hogy az egyik. És emlékszem ez egy hülye az utolsó time-- cat.jpg. Hadd próbálja beágyazni cat.jpg belső én weboldal. 

Én megyek előre és nem cat.jpg, mentse. Hadd menjen vissza a Chrome. És hadd nagyítani a font és most újratölti. Hoppá, hol tettem ezt? Standby-- Én még mindig a régi verzió az én desktop nyitva. Hadd menjen az én vhostod, a localhost, a köz-, és hello.html. Tehát most hadd menjen előre, és mondjuk cat.jpg a test belsejét ahol szeretnék, hogy legyen jelenik meg, és töltse be újra. Természetesen, ez nem helyes. 

Szóval meg kell mondani a böngésző egy kicsit még szándékosan akarom csinálni. Egyszerűen írja be a neve nyilvánvalóan nem elegendő. Így emlékszem, hogy volt egy másik tag, kép, img röviden. Ez csak azért, mert az emberek Nem szeretem a típus teljes szavak. És akkor nem tehetünk source = "cat.jpg". 

És most fogok csinálni egy dolog más itt. Annak ellenére, hogy az összes a tag eddig is volt ez a fogalom a kezdődik tag és egy záró tag, ez nem igazán értelme egy kép, ugye? Egy kép vagy van, vagy nincs ott. És így az emberek jöttek fel egy egyszerűbb egyezmény. Ha van egy címke, amely mindkét kezdődik és ér véget az azonos time-- lehet üres, így csak speak-- tedd a perjel belül a tag a legvégén. Most hadd menjek vissza a böngésző. Hit Reload fenébe, valami baj van. Ön valószínűleg látta ezt néha az interneten, akkor is, ha ez nem a te hibád. Ez a web szerver hibája. Mi ódákat ez alapján úgy tűnik,? Ez törött. Ez az, ahol a kép is tartozik. Igen? 

KÖZÖNSÉG: De ez nem férhetnek hozzá a képet. 

DAVID J MALAN: ez nem férhetnek hozzá a képet. Ez, vagy ami még rosszabb, talán nem is létezik. Lássuk, ha nem tudjuk, hogy diagnosztizálni. Emlékezzünk az utolsó alkalom, hogy ha a Chrome, a készülék, vagy akár a Mac vagy PC, megy a fejlesztői menü és megy a Developer Tools opció, amely valószínűleg akkor már nem sokat használt, vagy soha. És ha majd elmegyek Hálózat és újratölti az oldalt, nézzük valóban nézd meg a HTTP kéri, hogy tesznek. 

Úgy néz ki, mint az hello.html Valóban OK, így a 200-at. De cat.jpg a 403. Tehát ez nem a 404-es. A fájl valószínűleg létezik. 403. azt tilos. Szóval ez egy kicsit zavaró. Én megyek vissza az én terminál ablak. Hadd nagyításhoz itt. És hadd tegye egy ls. Van ugyanezen fájlokat. 

Most én egy ls-l, amit már valószínűleg korábban használt, hogy nézd meg a fájl méretek talán vagy időbélyeget. És látunk egy csomó elsöprő információ. Vegyük észre, néhány részletet. Itt van hello.html ebben sor itt és itt cat.jpg. És ez csak a készülék pedig felhasználóbarát kiemelve JPEG a lila, mint ez. De mi mást más mellett a fájl mérete és a fájl nevét? 

KÖZÖNSÉG: [hallható]. DAVID J MALAN: Igen, van két R itt. Figyeljük meg, mi hello.html már folyik. Így kiderül, hogy a nevét ez a könyvtár nyilvános fontos. Bármi ebben a könyvtárban célja, hogy nyilvános. De ez nem elég csak csepp a fájlokat ott. Azt is meg kell változtatni A mód a fájlok, változtatni a jogosultságait a fájl nem proaktív az alapértelmezett beállítás, amely szerint csak tudok olvasni és írni, én pedig a tulajdonos. Azt akarom, hogy az egész világ, hogy mindenki tudja olvasni a fájlt, hogy úgy mondjam. Olvasd csak azt jelenti megtekinthesse. 

És valóban, ahogy látni fogod a probléma meghatározott hét, ez az, amit ezek az R átlag. Ez a két R átlag bárki máshol a világon is olvasni, különösen most, hogy hogy ebben a könyvtárban. Így a legegyszerűbb módja annak, hogy erősít ez, hogy megy a gyors, és nem chmod a változás mód, majd tegye a + r, összesen, mindenki, minden, és r olvasási, majd cat.jpg Enter. Semmi sem történik, ami általában egy jó dolog. Így ls-l again-- most nézzük meg cat.jpg. És ez az engedély Úgy tűnik, hogy megváltozott. Mellesleg, ha egy hiba, és, például, csak tette your-- nem tudom-- esszé nyilvánosan hozzáférhető véletlenül, akkor nem az ellenkezőjét, a chmod-r. Bár őszintén szólva, nem kellene legyen az állami könyvtárban egyébként, ha ez a probléma. 

Tehát most menjünk vissza a böngésző és a reload. És megyek, hogy kattintson A kis Szellemirtók szimbólum egyértelmű, hogy egy részét a képernyőn, így láthatjuk az új kéréseket. És valóban, itt van Grump Cat előtti. De ami még fontosabb, Technikailag van a szám 200, ami azt jelenti, hogy megvan az OK gombra. Rendben, szóval minden szép és jó. De mi nem így legjobb weboldalak sem fogunk próbálni túl nehéz hogy a fanciest weboldalak ma. De nézzük, legalább nem valami szuper ismerős előtt csörgő ki néhány más címkéket. Tegyük fel, hogy én nem csak akar egy macska van. Tegyük fel, hogy tényleg akarom ezt macska linkelni valamit. 

Én is, például nem valami ilyesmi. a horgony href számára hyper referencia equals-- és nézzük csak csinál valamit mint www.google.com bezár idézet záró zárójel. És most keresni macskák. Zárja horgony tag. Tehát ez csak egy fajta Az alapvetően új részlet. A címke természetesen más. Ez a név a horgony href vagy hiper hivatkozást. 

De ami még fontosabb, van ez szintaktikai funkciót itt. Ez az, amit mi kezdjük hívás Nem tag, hanem egy tulajdonság. És egy tulajdonság van valami, módosítja a viselkedését a címke. És ez a tulajdonság, href, eszközök módosítja a viselkedését e horgony hogy amikor valaki rákattint, megy erre az URL itt. És persze, hogy a Google URL. 

Eközben mi ez szöveg itt lesz? Nos, lesz amit az ember valójában látja, mint az aláhúzott link, ennyire egyszerű. Így próbáljuk meg. Hadd menteni. Én mindig hello.html. De a verzió online, látni fogod a tényleges fájlnevek mi előre elkészített. Hadd menjek előre, és töltse be újra. És most ez egy nagyon underwhelming oldal is. De ha felett lebeg there-- és ez egy kicsit kicsi, de-- láthatjuk az alján bal sarkában a képernyő, ez valóban fog google.com. És ha rákattintok, hogy ez lesz habverővel nekem az utat a tényleges Google. 

Vegyük észre, itt egy lehetőség kizsákmányolás, mint egy félre. És akkor jön vissza a többi kérdései biztonság nemsokára. Mert itt van ez a kettősség között, ahová megy, és amit mondasz, meg tudná csinálni valami hasonló this-- http://www.google.com. OK, és most, ha én reload mentése után, hogy a lap, úgy néz ki, én megyek a Google. De nincs ok azt kell, hogy a Google, ugye? Én ténylegesen menni valami hasonló badguy.com, töltse be újra az oldalt itt. És észre, még mindig úgy néz ki, mint a Google. És csak akkor, ha én vagyok az éles ahhoz, hogy felett lebeg ide látom ez is fog megy egy másik helyre. 

Tehát, ha valaha is ütött egy e-mailt, különösen egyet a Paypal, vagy látszólag Paypal kéri, hogy jelentkezzen be a számla, ez Ezért soha ne valaha linkekre kattintva e-maileket, őszintén szólva, minden kapcsolatot az e-maileket. Ha tudja, hogy a tényleges pénzt Paypal vagy banki Amerika vagy Fidelity vagy bármely weboldal, kézzel írja be. Mert nézd, milyen egyszerű, hogy trükk, hogy valaki a mi bemutató úgy néz ki, mint egy link. De valójában lehetett megy teljesen bárhová. 

És még sokkal nagyobb fenyegetések, mint ez. Sőt, ez egy kicsit érintőjének most, de egy A legjobbak, amit valaha láttam amelyet azóta lezárták, valaki vezette az embereket, to-- így ez lehet mondani, Kattintson ide, hogy jelentkezzen be számla, bankszámla. És ez volt a Nyugat Bank. 

Szóval valaki megvette ezt. És ez egy kicsit könnyebb, hogy ez egy fekete-fehér egymástól font nagyítva az egy 30 méteres kivetítő. De amikor ez a kis méret egy e-mail, hogy te fogadó, ez úgy néz ki, mint a bankofthewest.com, nem bankofthevvest.com, amelyet valaki fizetett 10 $ vásárolni. És akkor ez vezette őket, hogy a megegyezik az egyes rossz honlapján. 

És látni fogod too-- valójában tehetünk this-- ha elmegyek az aktuális weboldal, bankofthewest.com, ismét, visszahívással utoljára hogy ha ez a weboldal, és kíváncsi, hogy hogyan működik, akkor biztosan menni Chrome fejlesztői eszközök. És láthatjuk az összes HTML szépen formázott ott. 

De még az a pont, Ön cam-- hadd zárja this-- mehetsz megtekintése Fejlesztő Forrás megtekintése. Miért nem csak másolni minden, és akkor én menj be az én kis gedit ablak itt, és a saját weboldal. Mentsük a hello.html. És valószínűleg ez lesz a szünet, mert ez nem ilyen egyszerű általában. De most, ha én újratölti a saját oldalra Saját CS50 Appliance és hit reload, OK, néhány dolgot tört. De én nagyon közel van az saját banki honlapján, igaz? Mindez HTML-- 

[Nevetés] 

DAVID J MALAN: -I Nem actually-- és tudom, hogy van valaki, aki valójában kattintson az alábbi linkeket is. Tehát egyértelműen, néhány dolgot tört. De ez fog vezetni minket egy vita, szükségtelenül most, hogy milyen CSS, Cascading Style Sheets, vagy, és hogyan, hogy tényleg Töltse le a másik HTML fájlok és JPEG fájlok GIF fájlokat A honlapon is használni. De minden, ami teljesíthető. De ez tényleg attól függ, hogy ezek nagyon egyszerű heurisztika. 

Így most nézzük csak átlássa a néhány további példát a HTML Csak hogy érzékeltessem A mi mást lehet csinálni. Például, ez list.html. Tegyük fel, hogy akartam, hogy egy weboldal egy listát a házak a quad. Lehet használni a ul tag rendezetlen listából, majd a lista elem gyermek majd navigálhat over-- vagy lista, rather-- a házak kérdésre. 

És ha kinyitom ezt fel, csináljuk ezt. Menjünk nem hello.html, de list.html. A fene egye meg. Hogyan lehet ezt orvosolni? Ez ugyanaz a kérdés, mint korábban, igaz? Hadd tegye chmod-- oops-- chmod a + r a list.html. És most, ha megyek vissza a böngésző és kattintson a Reload, ott van. Tehát, ha valaha is akartam, hogy egy felsorolás, akkor erre. Ha azt szeretné, hogy szuper divatos, és rendezett lista, nem egy rendezetlen lista, módosítani azokat, ol, újratölti az oldalt, és most a böngésző létszáma az Ön számára. 

Mi mást tehetnénk? Nos, egy pár others-- ha megvan hosszú bekezdésében text-- például, néhány Latin szöveget, mint this-- és azt szeretné, hogy külön bekezdésben, nyitott p, p közel a paragrafus. És újra meg újra és újra. És ha én most megnyitni ezt a fájlt, paragraphs.html, nos, ez a kezd idegesítő. Tehát most menjünk vissza a azonnali, a chmod + r csillag .html-- Egy szép kis wild card hogy úgy mondjam. Meg kell oldani az összes ezeket a problémákat nekem. Nézzük reload. Van három bekezdés. 

És most menjünk előre és nyit egy másik. Mit szólnál asztalra? Észre fogod venni, asztal néz egy kicsit bonyolultabb. De ez ugyanaz ötletem nyitott tag, nyitott tag, nyitott, nyitott, nyitott, zárt tag, nyitott tag. És ezek történetesen állni asztal, amelynek a határát láthatóan lesz a vastagsága 1-- bármilyen hogy means-- táblázatsor, asztal adat, ami azt jelenti, egy cellába. És ha visszamegyek a böngésző itt és menj table.html, akkor látni valamit mint ez, undorító. De mi lesz a lényeg ahol tudunk valójában a dolgok szebb, mint ezt. 

Hadd kikötik most. Van csokor több tag. És HTML csodálatos, hogy vegye fel mert őszintén szólva, csak annyit kell tennie, A megnézi meglévő internetes oldalak amellyel ismeri. És te, mint ó, ez hogyan tették ezt esztétikailag. 

Vagy meg lehet tekinteni minden online forrás, hogy hogyan működik a HTML, és látni fogja, hogy van egy teljes szókincse más címkéket. De az egyszerű mentális modell egyedül, hogy szinte minden tag megnyitja úgy kell lezárni, ez tényleg nem elég tanítani magát HTML után érthető ezek alapgondolata címkék és attribútumok és a jólformáltsági hogy már beszéltünk, záró semmit, talán nyitott hogy mi ne keverjük össze a böngésző. Úgyhogy most ezt a egy sokkal érdekesebb szint megy a tényleges. És menjünk a Mac-emet itt, a google.com. És most notice-- csináljuk. Én gong menni Beállítások Keresési beállítások. Azt akarom, hogy kapcsolja ki a bosszantó pillanat eredmények dolog, ha azonnal reagál, a gépelés. Csináljuk ezt a régebbi iskola olyan valójában mi folyik itt. 

Szóval megyek, hogy mentse a Google beállításokat. És most notice-- megyek keresni valami, mint a macskák. És ez még mindig csinál auto teljes itt, de alapuló dolgok ember írt a múltban. Vegyük észre, hogy mi fog történni. 

Az URL a pillanatban ez, csak google.com. És technikailag, ez dőlt. A Google csak a megtakarítás jellegű és nem mutatja nekünk. Ők megmutatták https, csak hogy szuper megnyugtató, hogy mi vagyunk a biztonságos és titkosított oldalt. 

Szóval hadd menjen előre, és keressen a macskák. Most ez van igazán elsöprő gyorsan. Nézd meg a hossza az URL-t. De kiderül, hogy a legtöbb ez a cucc Az URL valóban elég használhatatlan. Fogom kezdeni törlése dolog, amit nem értek. Látom a macskák. Megértem a macskák. Én nem tudom, miért a macskák vannak újra. Én tényleg nem tudom mi ez a hülyeség. Szóval csak fog tartani kiemelve és törlése dolgokat hogy én nem értem, desztilláló az URL-t, csak ezt. 

Most hadd kap be újra. Úgy tűnik, a Google még mindig működik. Tehát valamilyen oknál fogva, ők hozzáadása Sok dolog, hogy az URL-alapból. De ez nem feltétlenül szükséges. Tehát mi jó ebben? Nos, hadd menjen előre, és megnyitja Chrome Inspector. Van egy kis egér parancsikont érte. 

Lépjen a Hálózat fülre. És most hadd töltse be Ezen az oldalon még egyszer. És én, aki Shift. Mellesleg, a böngészők általában a cache vagy menteni információ csak a hatékonyság kedvéért. De általában, gazdaság Shift és újratöltés fogja kényszeríteni minden kezdeni az elejétől. És ez az, amit csinálni akarok itt. 

És észre mindezen sorok csak megjelent. Kiderül, hogy az adott internetes oldal, ott lehet, hogy csak egy fájlt involved-- hello.html-- vagy ott Lehet, hogy 52, mint ebben az esetben. Amikor meglátogatom google.com, látszólag, a böngésző indul 52 különálló HTTP kéréseket. Miért van ez? 

Nos, nézzük meg, mi van benne E weboldal felfelé tetején. Ott nem csak a szöveg, de van a tényleges kép A macskák több mint a jobb. Van egy színes logót itt a bal oldalon. Van minden ilyen ikon egy mikrofon, és így tovább. Van egy csomó darab, az épület blokkok, karcolás darab, ha úgy tetszik, az ezen a weboldalon. És mi a böngésző csinál alapján szerzés a legelső fájl, amely ez a sor itt, akkor lényegében iterációjával át a HTML felső lefelé, balról jobbra, keres dolgok, mint a kép a címkék vagy más címkék amelyek idéző ​​dokumentum és ha látja őket, megy, és tölti le őket HTTP, megvalósítható az egész boríték metafora, majd megjeleníti azokat a megfelelő helyen, a weboldalon. 

Vegyük észre, itt, ha én összpontosítani Az első dobás, keresés macskák, észre, hogy valóban ez a HTTP 1.1. És sajnos, a Google Chrome most verzió 39 a fajta dumbing dolgokat, és nem mutatja meg nekünk a tényleges fejléceket. De mi valóban küldött egy kérés a nem vágás, hanem / keresés? q = macskák. 

Nos, miért olyan fontos ez? Nos, megyek következtetni ebből, hogy ha a Google támogatja lekérdezések ebben a formában, hogy miért Nem én végre a saját kereső motor CS50, de csak az első end, csak a grafikus felhasználói felület. És mi kiszervezik a back end, a tényleges keresési eredményeket a Google. 

Szóval, hogyan tudom ezt megtenni? Nos, hadd menjen be a gedit itt. És hadd menjen előre, és nyissa meg fel, mondjuk, egy új fájlt. És fogom menteni ezt átmenetileg search-0.html. És akkor végül, akkor gyorsan előre, hogy az általam előre elkészített. 

És fogok gyorsan felkap doc típus html nyitva tartó html záró zárójel html. Akkor fogok csinálni fej szoros fej nyitott cím CS50 Keresés helyett a Google kereső. Itt lent megyek, hogy a test, ide közel szervezetben. És most kell CS50 Search. És valóban, hadd építeni ezt fokozatosan. Én megyek előre, és zárja be ezt, és ténylegesen azt a nyilvános könyvtárban. Így adja nekem csak egy pillanat. search-0.html-- megyek időben hívják search.html. Megyek chmod + r, hogy egy search.html. És most fogom kinyitni. Rendben, hogy gyors volt. De a cél csak az volt hogy minket a pont Az, hogy ilyen szöveg nevű fájlt search.html. Így nem sok nézni még. Sőt, ha jól megy a böngésző, és menj search.html, hogy ez minden. De tudod mit? Én is egy kicsit cifrább. Olvastam egy könyvben, hogy van A fejléc címke nevű h1. És én megyek előre, és használja, hogy a nyílt és közeli h1 h1. Az oldal újratöltődik. És most ez a nagyobb és merészebb, nem olyan érdekes, de legalább szerkezetileg sokkal érdekesebb. De most hadd mutassam be egy másik tag. Kiderült, van egy form tag. És hadd zárja a címkét. És kiderül, ott a bemeneti címke, amely attribútummal nevű típust, amely az adat típusa mező, ha úgy tetszik. És lesz típusú szöveget. És annak értéke lesz hogy CS50 Search. Bezárás tag. És ott lesz fogalma sem nyitó és záró külön címkékkel. 

Hadd menjek vissza ide, és hogy mi folyik itt, töltse be újra. Első érdekes. Úgy néz ki, hogy ez egy szöveges mező. És tényleg, én nem akartam hogy egy érték van még. Hadd menjek vissza, és valójában kap eltűnjön ez az érték, hogy ez egyszerű. Ahelyett, hogy az érték, amit akartam hogy ez a dolog volt a neve. És nem tudom, mi ez, úgyhogy jöjjön vissza azt. 

De lent, azt akarom, hogy nem input type = benyújtására. És ez az érték lesz CS50 Search. És majd meglátjuk, miért költözött az értéket e. Mikor reload, úgy tűnik, hogy most már a kezdetektől a saját kereső motor, szuper undorító, bár őszintén szólva, ez Nem messze attól, amit dobás A Google az alapértelmezett oldal úgy néz ki, mint a. 

Ha elmegyek itt, most beírhat macskák és remélhetőleg kattintson a Keresés gombra. De én nem teljesen kész még, mert én még nem hajtották végre, nyilván egy adatbázisban. Nem mászott a internetes keresési eredményeket. Szóval kell szervezniük, hogy a Google-nak. Szóval, hogyan tudom ezt megtenni? 

Nos, először is azt kell hozzá és a cselekvés tulajdonít a form tag azt a http://www.google.com/search. És tudom, hogy csak attól, következtethet odafigyelnek saját URL. És most, hogy egy tipp. Mit kell ez a szöveg a területen valószínűleg nevezni, hogy hol jöttünk előtti? 

KÖZÖNSÉG:? Q. 

DAVID J MALAN:? Q. És valójában nem kell kérdés jelölje kiderül, de q valóban azt, q lekérdezés valószínűleg a alapértelmezés, csak azért, mert ez amit Larry és Sergey jött ki évekkel ezelőtt. Tehát most hadd töltse be újra ezt az oldalt. Ez nem úgy néz ki minden más. De most nézzük, mi történik. 

Ha én írja macskák és kattintással CS50 keresése és elengedte, észre kapok felvert el a tényleges Google. Most, a Google, hogy egy kicsit bosszantó az, hogy ők mellékelik egy további paramétert is ha úgy tetszik, az URL-t. Ez minden esemény automatikusan a Google oldalán. 

A fontos az, hogy úgy tűnik, hogy létre ezt a kérést itt. És valóban, ez az, ami történik. Ha van HTML úgy néz ki, mint ez, ez egyfajta webfejlesztők jelölés mert azt mondta, megy előre, és hozzon létre egy űrlap hogy ha ez be, ez fog menni erre az URL. És amikor az URL biztosított értékek a dolgok, mint q, nem megy csak erre az URL. Valójában, menjen a kérdésre jel, majd q = macskák. Hozzáfűzése a paraméter, a HTTP paraméter, mint ezt. 

És csak hogy szuper pontos, mi is következtetni here-- de leszek még explicit-- is hogy a módszer szeretnék használni az kap, ahelyett, hogy valami hasonló üzenetre fogunk végül látni. Tehát röviden, egyszerűen megértés HTML és segítségével néhány meglehetősen egyszerű címke, most már kezd létrehozása saját front end felhasználó felület egy keresés motor mögött. 

De ez persze, elég undorító. Hadd valójában nyit valamivel jobb verzió. Ez az egyik én készített előre, hogy van néhány megjegyzést. De látni fogod, hogy én nagyjából azt újra. Tehát ez már elérhető az interneten. És én történetesen preemptively megy a https, csak, hogy ez egyszerű. 

Most pedig nyit következő iterációs e. Az 1-es verzió 0 helyett. Mi ugrik ki téged enyhén ebben a példában különböző? 

KÖZÖNSÉG: [hallható]. 

Igen, van ez a szöveg igazítása központ. Ez egy kicsit furcsa itt. De ez valóban új. És talán kitalálni, mi fog történni. Ha elmegyek a böngészőm most és látogasson el a search-1.html, ez majdnem ugyanaz. De ez egy lépéssel közelebb hogy egy kicsit szép. Még mindig csúnya, de szebb, hogy a legalább minden meg most középre. 

Így kiderül, hogy amit én használok egy másik nyelv teljesen hívott CSS, lépcsőzetes stíluslapok. És CSS, őszintén szólva, kedves Az, az én személyes véleményem, egy atrociously tervezett nyelv. Nagyon bosszantó, hogy emlékezzen a különböző részleteket. De ez az, amit a stylizes egész világhálót ma. Bántottam meg valakit. Rendben van. Szóval menjünk vissza, és látni hogyan vagyunk valójában ezzel a. És kiderül, legalább ez valójában egy nagyon egyszerű nyelv. Csak kulcs-érték párokat, tulajdonságok és értékek, tulajdonságok és értékek. Sőt, itt van egy ilyen vagyon és az érték. 

Egyszerűen a stílus attribútum testemen tag és így ez egy értéke szó kettőspont és egy szót sem, vagy a vagyon és az érték, Én hatással lehet az esztétika A weboldal, nem feltétlenül a szerkezet még, de az esztétika is. És csak a Googling körül, rájöttem, hogy CSS, Cascading Style Sheets, támogatja a tulajdonság az úgynevezett text-align, amelyek értéke lehet balra, jobbra, vagy középre, például. 

Így most, amikor reload Az oldal, amit én kap volt egy középre oldal de még mindig elég csúnya. Menjünk előre, és nyissa meg fel 2-es verzióját a Search. És most észre tettem egy kicsit. Figyeljük meg, hogy itt belül, a fej címke, nem lehet több, mint a cím. Sőt, van egy stílus címke. És ez az, ahol csak kap kicsit zavaros látás CSS néha. 

Figyeljük meg, hogy úgy tűnik, hogy valami hogy szerkezetileg nagyon különbözik. De itt van a neve a címkét akarok stilizált. Itt vannak a régi barátok göndör fogszabályozó és zárt zárójel. És akkor itt az, hogy vagyon és az értéket. 

Ha betölteni ezt a fájlt, search2.html, a végeredmény azonos. De ez egy lépés a jobb design. A faktoring ki ezt a CSS, én már nem keverik meg a HTML. És valóban, ahogy látni fogjuk, én is újra ezeket a tulajdonságokat és értékeket. Ha akartam tenni fürtök rész a weboldal-központú, Nem kell beírni style = text-align központ az egész hely. Tudom rakni egy helyen Talán, mint felfelé a tetején. 

De még ez nem a legjobb design. Sőt, az egyik dolog, amit tanulni ahogy többet és több időt webes programozás, hogy minél többet tud moduláris rendszermagra dolgok és tényező a dolgokat mint .h fájlok menjünk tényező dolgokat ki, tetszik helpers.c hadd tényező a dolgokat Néhány psets ezelőtt. Hasonlóképpen, talán mi szeretné elérni ezt. 

Így hirdetmény verzió három search.html voltam kitakarította a fejét Az oldal és csak fel ebben, a link tag, amely ellentétben a nevét, nem kapsz egy hivatkozást. Összeköti a másik fájl útján egy href amelynek értéke ebben az esetben, a keresés-3.css Szóval észre megyünk gyorsan. De minden, amit csinálok kedves A mozgó dolgokat. Hadd nyitott search-3.css. Ott van, semmi igazán hozzá. Én csak a vágólapra másolni, majd új fájlt, ugyanúgy, mint mi tényezőként dolgokat ki más fájlokat előtt. És result-- teljesen underwhelming-- lesz pontosan ugyanaz. De haladunk toward-- nem, ez nem az. Ó, tudom, hogy miért. 

Tehát úgy tűnik, hogy egy hiba. És ez bizonyos értelemben. De hadd nyissa fel a Hálózat fülre. Hadd töltse be újra az oldalt. Ah, miért a CSS nem alkalmazzák? Nos, a CSS fájlt, hasonlóan, már hogy a világ olvasható, hogy úgy mondjam. És ez is jelenleg tilos. Hadd csinál a chmod a + r A csillag dot CSS-- whoops-- vagyunk dot CSS csak a fájl kiterjesztése CSS fájlokat. Most hadd menjek vissza a böngésző és a reload. OK, egy kicsit jobban. 

Most én egy utolsó dolog. A keresés-4.html. Nekem van egy változat, azt gondoltam, volt, így hűvösebb, de így több bonyolult. Nézzük meg az eredményt az első. Zárja be ezt az, hogy nekünk több hely. Módosítsa ezt a keresés-4, Enter. 

És most egy csomó dolog van törve. Én megyek vissza az én könyvtárba itt. És most csak csinálni a chmod + r egy egy file-- mert tudom, hogy az úgynevezett exists-- logo.gif, amely egy kép. És most reload. És wow-- így most vagyok elég közel, őszintén szólva, hogy tetszik a 1999 változata a Google, és őszintén szólva, a 2014 változata a Google, ugye? 

Szóval ez most megy a honlapon, végül, ha jól keres macskák. És valóban így van. De mit csináljak másképp ez a verzió a 4.? Tehát nem lakik túl sokat itt. Látni fogod ezt a problémát meghatározott hét végül. De észre csináltam egy pár dolgot. 

Bevezettem egy div tag, amely a szétválás, hasonló szellemben a paragrafus. De egy osztály olyan, mint, itt négyszögletes láthatatlan régió a képernyőn. Adjunk egy egyedi azonosító, lábléc, csak így beszélhetünk azt a HTML máshol. Itt van egy másik div az oldal akinek ID lesz tartalom. Ez az az oldal tartalmát. És itt van az az oldal fejlécében. 

Más szóval, én már alapvetően HTML am szellemileg megtekintésével weboldalt három komponens, a fejléc itt ezzel láthatatlan téglalap, a tartalom a középső, majd a a lábléc lent, még bár nem látjuk ezeket a dolgokat. Mert azt akarom, hogy a fejemben oldal itt, vagy egy css fájlban Tudom használni ezt a szintaxist. 

Fejes nem tag. Ez egy olyan azonosítót kiderül arra, hogy ennek révén #header, Most már alkalmaz egy vagy több tulajdonságok a fejlécet. Meg tudom csinálni ugyanazt a tartalmat, ugyanaz a tartalom itt. 

Így például, a lábléc, közlemény mindezen tulajdonságok én hozzá. És tudom, hogy léteznek, csak az olvasás fel a dokumentációt CSS. Betűméret lesz smaller-- így néhány relatív betűméret. A súlyt lesz merész. Margin-- hány képpont körülbelül it-- 20 pixel. És ez lesz a középpontban. 

De most, az oldal úgy néz ki, mint ez. Ha nem vagyok elégedett a másolás ott, Én is valami ilyesmit színe piros. És akkor tudom menteni ezt, újra, és most már stilizált a lábléc. Szóval ez csak sejteti a teljesítmény Az, hogy mit lehet csinálni egy weboldal a bizonyításra. 

És még hűvösebb, mint ezt, ha azt szeretné, piszkálni körül a tényleges weboldalak, nem lehet tartósan megváltoztatni őket. De ha én nyit Chrome Inspector újra és megyek, hogy nem a bal oldalon itt, ami azt mutatja, Facebook HTML, de azt mutatja, a jobb oldalon oldalán valamennyi CSS, akkor sem, és változtatni a dolgokat menet közben. Szóval hadd menjen előre, és csinálni. 

Hadd menjek előre, és ellenőrzés kattintson erre a random szó itt, írja alá, és kattintson az Elem vizsgálata. Chrome nagyon kényelmesen ugrik a h1 tag, hogy a Facebook segítségével. És észre itt Facebook van ilyen lustán bedrótozott betűméret mint a tulajdonság itt. 

Így a hűvös dolog azonban az, hogy ha tényleg megy itt és azt mondják, jaj, a Facebook, nem szeretem, hogy a 64 pixel, most már változtatni a Facebook. Persze, mi csak azt a változó nekem személyesen a pillanatban. De ez is csak egy szerszámot a szerszám készlet hogy fog lehetővé teszi, hogy csípés és kitalálni, és azt is diagnosztizálni kérdéseket saját weboldalakat. És hasonlóképpen megy át itt, ami egy és ugyanaz. Ha szeretné, hogy divatos, én értem, most már tényleg a mutáció oldal és nem őrült dolgokat. 

Miért van ez az egész hasznos? Nos, végül, vagyunk szeretne majd lenni képes létrehozni weboldalak hajtja a saját hátsó vége, nem csak a Google és outsourcing a háttérben ott. Azt akarjuk, hogy a ténylegesen érték, például, A keresési motor akció attribútum menni, hogy nem valaki más, de valami hasonló search.php, ahol search.php van saját szerver, nem valaki más. 

És így, hogy ott, akkor valójában kell bevezetni az új nyelvet. Így már megnézte egy új nyelv itt, vagy két igazán, HTML és CSS. De tényleg csak szerkezeti és esztétikai nyelven. Ők nem programozás nyelv önmagában. És ez körülbelül annyi hivatalos időt fogunk költeni rájuk. Mivel kezdjük most az átmenet a PHP. 

Tehát a PHP tényleges programozási nyelv. Ez egy programozási nyelv abban az értelemben, hogy ez az célja, hogy könnyebb súly mint valami hasonló C. És ez egy értelmezett nyelv, ami azt jelenti, hogy nem összeállítani. Szóval dióhéjban, mit is jelent amikor használt nyelv, mint a C és mi volt az összeállításhoz? Mit jelent az, hogy fordítsd C forráskód? KÖZÖNSÉG: [hallható]. DAVID J MALAN: Mondd még egyszer? KÖZÖNSÉG: [hallható]. DAVID J MALAN: Tökéletes. Kiderült, hogy a bináris. Kiderült be nullák és egyesek a tényleges angol-szerű forráskód. És akkor mi is valójában fuss azok nullák és egyesek vezetjük őket a CPU dupla kattintással egy ikon vagy futtat egy parancsot. 

PHP és Python és Ruby és Perl és JavaScript és csokor más nyelveket értelmezni nyelvek, ami azt nem kell fordítanod. Inkább adsz őket bemenet a program neve egy tolmács. És ez tolmács, amely valaki más írta, beolvassa a forráskódot felülről lefelé, balról jobbra, és csak értelmezi azokat a sorokat, és azt teszi, amit mondasz. 

Tehát, ha találsz egy vonal, amely azt mondja nyomtatott, ez nem feltétlenül átalakítani nyomtatás a megfelelő nullák. Csak van ez a tolmács, mint a ha nagy a feltétellel, hogy azt mondja, ha programozó utasítás print, akkor tegye a következőket. Így értelmezi, hogy csak az a fajta érvelés át, amit mondasz, hogy igen. 

És a PHP az egyik ilyen nyelven. És a PHP éve tervezték Pontosan webes programozás. És ez volt eredetileg a nagyon hanyag rendetlen nyelvet. És valóban, van egy hatalmas mennyiségű rossz PHP kód odakint. De a nyelv maga érett az évek során, olyannyira, hogy most már valójában egy csodálatos következő lépés pedagógiailag származó C, mert így darned ismerős mindent amit most láttam az elmúlt hetekben. 

Az egyetlen különbség a kezdeti fogjuk látni az, hogy nincs fő funkciója többé. Amikor elkezdi kódot írni, ez csak lesz, hogy végre nem számít, mit, mint látni fogjuk, egy pillanat. Közben itt van, amit a változó néz ki, mint a PHP. Ez egy kicsit más, de csak alig. 

A PHP, nincs erős gépelés. Van hét gépelés, ami éppen azt jelenti, hogy olyan adattípusok, mint a húrok és a számok és egyéb dolgok. De nem zavarja meghatározva mik azok többé. PHP találja ki az Ön számára. A dollár jel csak egy döntés hogy a PHP nép éve ezelőtt úgy, hogy minden változót a PHP csak kezdődik a dollár jel. Ez valójában olyan hasznos, hogy a ugrik ki egy kicsit jobban. 

De azután, hogy ez a egy olyan állapot, PHP. Mi a különbség versus C? Trick question-- semmit, ami valóban nagyon szép. Logikai kifejezések PHP-- ugyanaz. Logikai kifejezések és kontra vagy, kapcsolók, hurkok, hurkok, loops-- OK, ez egy más. 

Így kiderül, van egy pár egyéb tulajdonsága a nyelvnek. Ezek közül az egyik valójában ezt, ami csodálatosan kényelmes. Ha a $ számok egy tömb, ami neked van kijelentette, korábban a program, van ez a képzelet minden konstrukció hogy ahelyett, hogy az összes, hogy bosszantó I értéke 0, I kevesebb, mint ez, [? I ++?] Az egyes számok az szám, ahol az egyes ezen dollár jel értékeket csak egy változó, és az utóbbi lehet gondolni, mint az I. Lehet nevezni, amit akarsz. Hívtam szám. Ez fog végighaladni a tömb hívott számokat. És minden ismétlés, ez fog automatikusan frissíti az Ön számára a dollár jel szám változó, így állandóan van, hogy a változó kívánt anélkül, hogy ezt bármilyen szögletes zárójel jelölés vagy kijelző egy tömbben. 

Azon túl, hogy mi is van a dolgok, mint tömbök, amely majdnem ugyanúgy néznek ki, kivéve, hogy nagyon gyakori, ahogy fogunk látni, mind a PHP és a JavaScript előre inicializálni tömb szögletes zárójelbe. C használ kapcsos zárójeleket. Szóval ez kicsit más, bár mi nem igazán használja ezt a trükköt sok. 

De még nagyobb erővel, PHP asszociatív tömböt, amely divatos módja mondván, hash táblák. Sőt, ha azt szeretnénk, hogy nyilvánítsa a hash táblázat a PHP, ellentétben C-- hány sornyi kódot tartott a ténylegesen olyan hash tábla C? Vagy hány sornyi kód van vesz, hogy végre egy hash tábla C? Szóval lehet, hogy a sok, ugye? Ez egy pár tucat, talán 100 vagy 200. Ez magától értetődő. Vagy szól, hogy legyen, mint Hamarosan látni, nemtriviális hogy végre egy hash tábla [Hallható], valamint egy próbát. De PHP-- és őszintén szólva, én talán nem kell mondani, ez míg Monday-- PHP, ha akarsz egy asztal, kész. Ez egy hash table-- így egy sor kódot. És 

Sok nyelven csinálni. Jó szórakozást a PSET öt. Így sok nyelven ezt. Adnak neked ezeket absztrakciók hogy más emberek, más programozók, hoztak létre az Ön számára, hogy tud állni a vállukon és kezdi el használni ötleteket, szuper kényszerítő, mint a hash táblák és fák és megpróbálja. De nem feltétlenül kell, hogy végre ezeket a dolgokat magad. 

És végül, milyen fogjuk használni a PHP potenciálisan írás programok Az úgynevezett parancssorban. Tudtuk újra minden programot is írtam ebben a félévben eddig, kivéve talán Breakout használó SPL, amely specifikus ről C-re a pillanatban. De minden más probléma beállítva, biztosan Mario és Caesar és Vigenère és [? Crack?] És tovább, mi lehet újra végrehajtani PHP, és talán egy kicsit könnyebben. 

De amit mi végül majd használni a PHP-web programozás. És fogunk bemutatni következő hét a mentális modell, a paradigma az úgynevezett MVC, modell nézet vezérlő, amely ha tettél programozás mielőtt a Python vagy Ruby vagy máshol, akkor talán tudja, ez a csapat a Sínek és övé, és a hasonlók. De ha Ön új a ezt is látni fogod hogy ez valójában egy nagyon természetes kiterjesztése a faktorizáció és az a fajta tervezés A kód, hogy már csinál C. megyünk most alkalmazza néhány ilyen tanulságok PHP így végül vagyunk végrehajtása a saját honlapján. És ha valami megbabonázta vagy meghökkent hogy fogunk csinálni az összes olyan gyorsan, észre, hogy szinte minden félév, közel 90% diákok CS50, beleértve a akik még soha nem programozott korábban, a végén így a végső projektek alapulnak webes programozás. És így látni fogja, hogy a hozamok magasak az elkövetkező hetekben. Szóval találkozunk majd hétfőn. 

SPEAKER 1: És most, mély Gondolatok a Daven Farnham. Hash táblák. 

[Nevetés]