[Přehrávání hudby] DAVID J Malan: Dobře, vítej zpátky. To je CS50. To je konec týdne sedm. A to je konec tohoto mrchožrout lov z problému nastavit čtyři které by vás mohly vyvolat. Po uzdravení všech tyto JPEG zaměstnanců, jsi vyzval, pokud byste chtěli, fotografovat se s co nejvíce z těch lidí, jak můžete. Máme spoustu příspěvků v posledních několika týdnech, opravdu, docela málo těsně před polednem dnes, z nichž některé jsou zde, zde chytil in-- vypadá like-- Annenberg Hall v úředních hodinách, jeden zde v Lowell dům s Nickem. Zde je Ramon byl chycen na telefonu. To bylo na CS50 oběd. To byl Jason Skyping se více kreativní spolužák, který mu volal tímto způsobem. Nevíme, co to je. 

[SMÍCH] 

DAVID J Malan: Ale že to stojí za gigabyte. Zde je Chang, který doslova utekl jeviště aby se vyhnuli fotografoval jeden den, ale byl nakonec chycen. Tady je Nick. Tady je Nick. Tady je Nick. A tady je Alison podle oblasti. A Zamyla dokonce bylo zjištěno, u tanečního sálu soutěže. Tak jsme se projít tyto fotografie, přijít na to, kteří podali nejvíce nejdříve, a odměna jeden báječný cena, as slíbil ve spec. A budeme také sledovat informace o prostor, který byl zapojen. 

Pár announcements-- tak oběd je opět tento pátek v 13:15. Pokud byste se k nám připojit, Odpověz na této adrese zde. Znovu se objeví Jason zde z jednoho sekcí pár let zpět, což se stalo padnout na Halloween. A skutečně, se převlékl za dýně daném roce. Pokud se budete dívat této sekci jeho od roku 2011 sekce osm, pokud jste zvědaví, na CS50.tv, myslím, že to byl rok, ve kterém Jeho vzduchové čerpadlo pracoval. 

Máte-li tedy sledovat podobný oddíl v roce 2012, uvidíte tuto Jasona moc vypuštěná, protože oblek již fungoval, což je pouze říci tento pátek, pokud chcete chtěl vyřezat dýni s Daven a Gabe a jiní, RSVP k hlavám na cs50.harvard.edu adresu. To slibuje, že bude skvělá zábava. Daven, nám bylo řečeno, má vyřezávané Dýně celý svůj život. Gabriel z Brazílie má nikdy vyřezávané dýně na Halloween. Takže se tam s nimi, jak se učí. 

Semináře, meanwhile-- takže se dozvíte brzy o tom, co naše očekávání jsou závěrečný projekt, který v podstatě se redukuje na navrhování a provádění většina jakýkoli projekt zajímat vy, i když s výhradou schválení a vedení ze svého učitelského kolegy. Ke konci semestr, jsme představili řadu seminářů, které jsou nepovinné třídy pod vedením výukových kolegy a Harvard zaměstnanci, přátelé kurzu přes kampus, na různá témata, které jsou tečné k hřiště je základní osnova nicméně platí, zábava a jiný potenciální závěrečných prací. 

Například, první, pokud budete chtít zaregistrovat, zamiřte do tamté URL. A to je sestava pro Letošní semináře sám. Ale provádíme máme desítky semináře z let minulých, z nichž všechny jsou spojeny v menu semináře Možnost webových stránek stránce kurzu je. Takže pokud uvažujete o přesahuje svou zónu pohodlí nebo vyzvednout nějaké nové dovednosti, Například, programování iPhone aplikace s Swift, nový jazyk od Apple nebo Objective-C nebo Android nebo programování [? cue?] žárovky, nebo na kteroukoli témat tady a více, díky kontrola z registrační stránce. 

Tak jsme začali, a dospěl k závěru o Pondělí se při pohledu na HTTP. Tak rychle refresher-- HTTP, HyperText Transfer Protocol. Ale co to vlastně znamená? Co to vlastně znamená? Je to ruka? Vím, že jste právě poškrábání vaší hlavě. Ale chcete navrhnout, co HTTP je? 

Diváků: Jak počítače komunikovat s [neslyšitelné]. DAVID J Malan: Stýskalo se mi poslední část. Komunikaci počítačů with-- 

Diváků: internetové servery. DAVID J Malan: Good-- s internetem servery, a zejména, webové servery. Vzhledem k tomu, odvolání, je tu banda služby na internetu, z nichž některé Používáte pravděpodobně denně mezi chatu a zprávy, chat, a web a e-mail, a podobně. A HTTP je jen Protokol, který webové prohlížeče mluví při komunikaci s webové servery, a vice versa. A analog v Lidský svět může být, I rozšířit mou ruku se třást některé další člověk je, a on nebo ona bere na vědomí, rozšířením jeho nebo její ruku stejně. Tak to je jen protokol, soubor konvencí. 

A co vlastně jsou ty konvence? No, je to jen scvrkává na odesílání zpráv tam a zpět, jak vidíte na obrázku. A je tu několik způsobů, jak které můžete posílat tyto zprávy. A snad nejvíce společné je známý jako get. A uvidíme kontrast to netrvalo dlouho. 

Ale požadavek dostat z prohlížeče na server jen vypadá takhle. Je to banda textu, který klade uvnitř virtuálního obálky. Na vnější straně tohoto krytí jít pár kousků detailů. Co je potřeba jít dál obálka, abych tak řekl, s cílem získat žádost jako to ode mne na webový server? Jo. 

Diváků: Vaše IP adresa. 

DAVID J Malan: Moje IP adresa V poli Od, abych tak řekl, a samozřejmě, IP adresa příjemce. Avšak v případě, že webové paketu, potřebujeme trochu více detailů Nestačí jen poslat obálku na server, protože server může být poslechu pro různé typy internetového provozu. Tak co ještě potřebujeme kromě příjemce IP? Jo? 

Diváků: Je to TCP? DAVID J Malan: Dobrý. TCP-- 

Diváků: adresa. 

DAVID J Malan: Adresa, nebo port, jak se to jmenuje. Blízko, ale číslo portu TCP. A je tu spoustu z nich. Ale určitě nejvíce obeznámeni by nakonec 80, což je výchozí nastavení který se používá pro webového provozu. A další povědomý brzo bude 443, který se používá pro bezpečné webu provoz, adresy URL, které začínají řetězcem https. 

Tak tohle je, co se děje uvnitř této obálky. A dostat se / prostě znamená, dát me výchozí webové stránky. Dej mi kořen tvrdý pohon na tomto serveru. A doufejme, web server odpoví, OK a číslo 200, který je jen konvence říká, ano, všechny je opravdu OK. Zde je stránka. Typ webové stránky, bude být text, ale konkrétněji, HTML, které se chystáme potápět zpět do. A dot dot dot jen znamená, tady je HTML. A to je místo, kde jsme vyzvednout příběh dnes, vlastně psaní HTML, HyperText Markup Language, což je jazyk, ve kterém Webové stránky jsou psány. Není to programovací jazyk. Tam je žádné funkce nebo smyčky nebo podmínek. Je to značkovací jazyk, stejně zase vidím dnes, který umožňuje určit jak strukturovat a stylizovat esteticky webové stránky. 

Tak tohle byl ten, a jen stránky opravdu Podíval se na, je-li krátce, v pondělí. A všimněte si pár charakteristickými rysy. Je tu spousta otevřených úhlový držák a zavřete úhlový držák. Mezi těmi, úhlový držáky jsou slova. A jdeme na začátek volá tato slova tagy. Tak otevřený držák hlavice a uzavřený držák hlavice jsou otevřené a uzavřené tagy, nebo počáteční a koncové značky respektive elementu HTML, jak budeme říkat, volal hlavu. A platí stejný žargon k tělu v HTML a tak dále. 

A co je pěkné je HTML-- a opravdu, budeme strávit strašně málo času na to, protože budete většinou jen přijít na to, jaké funkce to má, když vás vlastně mít konkrétní problém na solve-- zjistíte, že prohlížeč je dost hloupé. Je to jen tak do-- není na rozdíl od computer--, co řeknete, že to udělat. A tak, když máte otevřeno držák HTML na samém vrcholu tam, že v podstatě prostě znamená, hej, prohlížeč, Zde je webová stránka napsána v HTML. 

Když to vidí otevřený držák hlava, to jen znamená, hey, prohlížeč, tady je hlava, nebo nejvyšší část mé webové stránky. Když to vidí uzavřený držák hlava, to jen znamená, hej, to je na hlavu. Pohotovostní režim na něco jiného. A to něco je zřejmě bude tělo. A když nemáte značku, jako je máte jen ahoj, čárka, svět, to je jen bude raw text nakonec se zobrazí na obrazovce. 

Teď si možná všimnete, příliš odsazení zde. Můžete si asi odvodit jak jsme to stylizace. Pokaždé, když otevřete záznam, abych tak řekl, jsem odsadit. A pokaždé, když zavřu tag jsem un-odrážka, svým duchem podobat složených závorek. A za to, že jsem typ použití můj úsudek. Všimněte si, že jsem se neobtěžoval bít Zadejte uvnitř tohoto názvu značky. Proč? No, prostě jsem se rozhodl, že to vypadalo malý vysavač pro mě, člověka, jen neobtěžoval dělat, že. Takže znovu, je tu nějaký rozsudek zavolala jako je v C nebo jakémkoli jazyce. 

Ale všimněte si také, že tento zářez půjčuje sebe k duševní modelu, , aby se příliš komplikovat. Ale strom, ne? Pokud si myslíte, že na webu Stránka zřejmě psaný takhle, jako pěkně členité, že tak, můžete téměř myslet na otevřeném držáku HTML uzavřený držák tag je vymezení kořen uzlu, rodokmen styl uzel ve stylu stromů jsme se podívali na minulý pátek. 

A skutečně, máme na tady co zavoláme DOM, D-O-M, dokument objektový model, ozdobný způsob, jak říkat strom, který prohlašuje, že HTML. A všimněte si, že HTML má, budeme říkat, jako rodokmen, má dvě děti. Na levé straně je hlava. Na pravé straně je tělo. 

A stejně jako bezduché myšlenky cvičení, hlava, má samozřejmě, kolik dětí Podle této struktury? Takže jen jeden, title-- a to je důvod, proč máme šipkou od hlavy až k titulu. Takže je to jako by tato osoba ve rodokmen měl jen jednu potomky. A pak samotný název může se říci, že mít dítě taky. 

Připomeňme, že HTML měla Dobrý den, čárka, svět pod ním. A já jsem prostě čerpané v rámci oválný místo obdélníku právě zprostředkovat sémanticky, že i když je to uzel ve stromu, abych tak řekl, je to něco zásadně liší. Není to tag. Nebo přesněji řečeno, není to prvek. Je to jen textový uzel, chcete-li. Ale to jsou zcela libovolné lidské konvence. To je teď můj způsob, jak představuje, co budu jako souhrn zavolejte dokument. 

A jako stranou, věci na Super levém horním rohu, otevřený držák vykřičník doc typ HTML, tohle vypadá jako značku, ale je to hloupé roh případ, kdy to je jen tam, zkopírovat a vložit ukázat prohlížečů toto je HTML verze 5. Svět se neustále mění, co se První řádek kódu do stránky by měly být. To prostě znamená, verze 5. Takže to není úplně vypadají jako ostatní. 

Dobře, tak s tím řekl, budete nyní ocenit to docela to hloupý tetování někdo dostal. 

[SMÍCH] 

DAVID J Malan: Tak jo, a teď se to vlastně skok aby dělali něco s tím. Vzpomeňte si, že naposled Otevřel jsem nahoru CS50 Appliance a já jsem něco jako jednoduché, jak otevírá gedit. A zachránil jsem soubor, i na můj desktop-- nikde special-- jako hello.html. 

Takže dovolte mi, abych to udělal again-- hello.html Enter. A teď v tomto souboru, budu pokračovat a opakovat to, co jsme právě saw-- doc typu html Pak jdu dělat otevřený držák html uzavřený držák. A pak budu preventivně otevřít a zavřít tag. Proč? Jen tak jsem se nezapomeňte později. Je to prostě dobré praxe, jako je otevření a pravou složenou závorkou najednou. 

A co pak přišel další? Můžete myslet na tetování. 

Diváků: hlava. 

DAVID J Malan: hlava. A pak tady, jsem měl titul, myslím. A titul byl svévolně, ahoj, svět blízko titulu. A pak tady dole, tělo, z course-- pak zavřete značku těla. A pak už jen poněkud redundantní, Měl jsem to samé tady dole. 

Tak jsem se tvrdí, že se jedná o webové stránky. To je něco, co by nyní živě na webu, i když samozřejmě, je to doslova žít na mém desktopu právě teď. Ale opravdu, když jsem minimalizovat gedit, Podívám se na mém desktopu jeho ikonu. I přesto, že se jedná o zařízení, toto mohl dělat na Mac OS bez TextEdit nebo Windows Poznámkový blok i. 

A když jsem do toho pusťte a poklepejte že dokonce i vyberte-- dobře, pojďme nelze vybrat, které z důvodu Chrome není otevření. Pojďme dál a otevřete Chrome. A pak to Command-O pro otevřené A přejděte na mém desktopu a tento soubor otevřít. To je, jak prohlížeč interpretuje HTML, shora dolů, zleva doprava. Hele, tady je HTML prohlížeč. Zde je hlava. Tady je titul. Zde je tělo. A skutečně, to je jak to činí, že webové stránky. 

Ale všimněte si URL. Nikdo z vás by mohl vytáhnout tomto konkrétním strana na své notebooky právě teď, dokonce i uvnitř vašich zařízení prostřednictvím této adresy URL, protože soubor: // ukáže, že to je ve skutečnosti na mém souborovém systému, můj pevný disk, není vaše. Takže to není všechno, že užitečné. 

Pojďme se nyní přesunout k použitím skutečné webový server. A ukázalo se, na CS50 Appliance je více než jen prostředí, kde můžete psát kód v C a sestavit a spusťte jej, jako jsi dělal. To také byl konfigurován Zaměstnanci představují typickou web server, který je na internetu, ten, který byste mohli platit za nebo ten, který je v tzv cloudu. 

A je to běh standardní open source Software, například, něco s názvem Apache, což je možná stále nejpopulárnější web Server software na světě že tisíce webových stránek, používají i dnes. A také má dokonce software, jako je MySQL, což je databázový server že budeme nakonec dostat, což je pouze říci Můžu začít léčbu Můj spotřebič jako plnohodnotného serveru že nejsem platit za jinde. Je to prostě žije na svém vlastním notebooku pro vývoj a pohodlí účely. 

Tak pojďme do toho a využít tohoto. Chystám se jít dopředu a otevřít okno terminálu. A já jdu dál a move-- vlastně poprvé jsem bude navigovat na mém desktopu. Pokud se mi ls, je tu hello.html. A já jdu dopředu a začít používat nový adresář máme nepoužíval před dnes. 

hello.html-- budu pohybovat na ../vhosts pro virtuální hosts-- o tom více v future-- a pak do adresáře s názvem localhost, což je přezdívka daná téměř jakýkoliv počítač, ať už je to Mac, PC, nebo Linux počítač, a pak konkrétně do adresáře, který jsme my, Zaměstnanci již vytvořili pro vás, když jste si přístroj s názvem veřejná. A jak již název napovídá, cokoliv Dal jsem v této složce, v teorii, bude nyní veřejnosti, alespoň pro lidi kteří mají přímý připojení k počítači. 

Takže teď nech mě jít dopředu a dělat cd téhož adresáře tak vidím, co je děje a typu ls. A vskutku, to je Jediné, co tam je. Tvrdím nyní, že proto, že jsem si tohle soubor hello.html uvnitř adresáře nazývá veřejná uvnitř adresáře s názvem localhost uvnitř adresáře tzv vhosts, které díky zaměstnancům CS50 byl pre-nakonfigurován tak, aby je kořen webového serveru, Nyní mohu snad udělat. 

Jdu otevřít novou kartu. A já jdu ne file: //. Chystám se použít skutečný http / localhost, což znovu, je přezdívka pro mou vlastní server. A pak jsem jít s tím, co název souboru, jen aby bylo jasno? Je-li tento příběh asi bude? hello.html. 

Takže jinými slovy, chci teď tohle je můj vlastní počítač, moje vlastní zařízení, jako by je to skutečné serveru. Jeho přezdívka je localhost. Ale myslet na localhost jako jako Facebook.com google.com, cokoliv. Je to jen můj místní název. A pak finále chci, je v kořen pevného disku, abych tak řekl, nebo kořen webového serveru, ergo lomítko a pak název souboru hello.html. 

Dovolte mi, abych oddálit a stiskněte klávesu Enter. A opravdu, tam je teď moje webové stránky. Takže je to trochu jinak. A to je jen jako nezaujatý. Toto je stará verze. Dovolte mi, abych zmenšit písmo zpět. To je starý. To je nová. Ale co je v podstatě děje nyní je, že HTTP je používán. 

Udělejme to trochu jasnější, nebo chcete-li, trochu komplikovanější. Nech mě jít na pravém dolním rohu v pravém horním rohu mého zařízení. A všimněte si, že to všechno čas, tam bylo mnoho. To je jedinečná adresa vašeho CS50 Appliance. Je to soukromá adresa, Jak vyplývá z 172,16, což prostě znamená jen fyzicky přístup k této webový server. Vše je firewallem a pěkně chráněn od zbytku světa protože toto řešení. 

A teď si všimnout ale když půjdu do tato adresa není v mém zařízení, ale Mac OS-- jdu vrátit se sem. To je můj Mac nyní. A teď jdu otevřít tato verze Chrome zde. A já jdu na http: //172.16.25 / A jsem zapomenout na rest-- 133. 

Takže jdu na návštěvu z mého počítače Mac že IP adresa /hello.html Enter. A teď vidím z mého počítače Mac že mé CS50 Appliance, který je IP adresa je, že číslo, skutečně chová jako webový server na internetu. Nemá pěkný snadné zapamatovatelný název jako Facebook.com, ale je to pomocí HTTP Zdá se, že i když chrom je druh zjednodušení svět pro nás, ale nám to ukazuje HTTP. Ale je to opravdu přesně to. Chrome je jen ukládání některých úhozů v těchto dnech. A to je to, co vidíme. 

Tak to je vše v pořádku a dobré. Ale je to docela nezaujatý stránku. Nech mě jít a něco udělat dnes trochu jinak. Tak nech mě jít zpátky do gedit. A místo toho, ahoj, svět, pojďme dát obrázek. A já jsem tvrdil, ze before-- nech mě jít do mé localhost adresáře veřejnosti. A nech mě jít napřed a kopírování celá parta souborů od dnešního dne z mého Dropbox složky na zde. 

Nyní, když jsem typ LS, podívejte se na všech těchto souborech že jsem distribuované Webová stránka hřiště je v předstihu dnes, z nichž jeden je ještě hello.html. Takže tam je to jedno. A připomínají tuto hloupou jeden z minulého time-- cat.jpg. Tak zkusím vložit cat.jpg uvnitř mé webové stránky. 

Chystám se jít dopředu a to cat.jpg, zachránit. Nech mě jít zpátky do Chromu. A dovolte mi přiblížit písmo a teď znovu. Jejda, kde jsem si to? Standby-- pořád mám ten starý verze z mého stolního Open. Tak nech mě jít do mého VHOST, můj localhost, můj veřejný a hello.html. Takže teď nech mě jít dopředu a říkají cat.jpg uvnitř těla tam, kde chci, aby to bylo Zobrazí se a znovu. Samozřejmě, že to není správné. 

Tak musím říct, prohlížeče malý více záměrně, co chci, aby to dělat. Jednoduše napsáním název samozřejmě není dostačující. Tak připomenout, že tam byl další tag, obraz, img krátkosti. Je to jen proto, že lidé nelíbí typu Plný slova. A pak můžeme udělat zdroj = "cat.jpg". 

A teď budu dělat Jedna věc tu jiný. I když všechny Naše značky, doposud měl tento pojem začít tag a koncový tag, že není opravdu smysl pro obrázek, ne? Obraz je buď tam, nebo tam není. A tak lidé přišli s jednodušší úmluvy. Máte-li značku, která může jak začínat a končit ve stejném time-- to může být prázdný, tak se speak-- jen vložit lomítko uvnitř tagu na samém konci. Nyní mi dovolte vrátit se k mému prohlížeči. Hit Reload Sakra, něco je špatně. Pravděpodobně jste viděl občas na webu, i když to není tvoje vina. Je to chyba webového serveru. Co ódy to naznačují? Je to rozbité. To je místo, kde se obraz patří. Jo? 

Diváků: Ale to není mají přístup k obrazu. 

DAVID J Malan: Nezáleží mají přístup k obrazu. Že, nebo ještě hůře, možná není ani neexistuje. Uvidíme, jestli se nemůžeme diagnostikovat, že. Připomeňme si z poslední doby, že pokud Chrome, v zařízení, nebo dokonce i na vašem počítači Mac nebo PC, jdete do menu pro vývojáře a přejděte na Nástroje pro vývojáře možnost, která pravděpodobně nemáš moc nepoužívá, nebo vůbec. A když půjdu k síti a znovu načtěte stránku, pojďme se vlastně podívat na HTTP požadavky, které jsou vyrobeny. 

Vypadá to, že je hello.html opravdu v pořádku, tedy 200. Ale cat.jpg je 403. Takže to není 404. Soubor pravděpodobně existuje. 403 znamená zakázáno. Tak to je trochu matoucí. Chystám se vrátit k mému terminálovém okně. Dovolte mi, abych přiblížení tady. A dovolte mi udělat ls. Je tu tytéž soubory. 

Nyní mi dovolte udělat ls-l, které jste pravděpodobně používá před podívat se na soubor Velikosti možná nebo časová razítka. A vidíme spoustu zdrcující informace. Ale všimněte si, že pár detailů. Zde je hello.html v tomto řádku tady a tady je cat.jpg. A to je právě spotřebičem uživatelsky přívětivý zvýrazněním JPEG je ve fialové takhle. Ale co jiného se liší u velikost souboru a název souboru? 

Diváků: [neslyšitelné]. DAVID J Malan: Jo, je tu více dvě R je tady. Všimněte si, co hello.html se děje. Tak to dopadá, že jména tento adresář veřejnost je důležité. Vše, co v tomto adresáři má být veřejná. Ale to nestačí jen přesouvat soubory tam. Také je potřeba změnit způsob souborů, změnit oprávnění soubor, který chcete aktivně ne je výchozí nastavení, což je to, že jen umím číst a psát, já jako vlastník. Chci celý svět všechny v moci přečíst můj soubor, abych tak řekl. Přečtěte si prostě znamená zobrazení. 

A skutečně, jak uvidíte v problému nastavit sedm, to je to, co znamenají, že takovýto R je. Tyto dvě R je průměrná nechat všechny jinde ve světě i přečíst, zvlášť teď, je to v tomto adresáři. Takže nejjednodušší způsob, jak to napravit, je jít do mého řádku a to chmod ke změně Režim a potom proveďte + R, dohromady, všichni, všichni, a r pro čtení, a pak cat.jpg Enter. Se zdánlivě nic neděje, což obvykle znamená dobrou věc. Takže ls-l again-- nyní Pojďme se podívat na cat.jpg. A toto oprávnění Zdá se, že se změnily. Mimochodem, pokud uděláte chyba a vy, například, právě udělal your-- nemám víš-- esej veřejně přístupné náhodou, můžete dělat pravý opak, chmod a-R. I když upřímně řečeno, to by nemělo ve veřejném seznamu stejně, jestli je to problém. 

Takže teď se vraťme do můj prohlížeč a Obnovit. A já jdu na tlačítko malý Ghostbusters symbol jasné, že část obrazovky, takže můžeme vidět nové požadavky. A skutečně, zde je Bručoun Cat před rokem. Ale mnohem důležitější je, technicky, je číslo 200, která znamená, že to mám v pořádku. Dobře, tak to je vše v pořádku a dobré. Ale my ne dělat to nejlepší z webových stránek, ani se budeme snažit příliš těžké aby nejmódnější webových stránek dnes. Ale pojďme aspoň něco Super seznámit před chrastící mimo několika dalších značek. Takže předpokládám, že nemám jen chcete kočku zde. Dejme tomu, že vlastně chci to kočka odkazy na něco. 

Bych mohl, například něco takového. pro kotevní překlad pro hyper reference equals-- a řekněme něco jako www.google.com konci citovat zavřít držák. A nyní hledat pro kočky. Close kotva tag. Takže to má jen jeden druh ze zcela nové detail. Tag samozřejmě, je jiný. Je to název pro kotvu href nebo hyper reference. 

Ale mnohem důležitější je, že je tento syntaktický funkce zde. To je to, co začneme volat ne tag, ale atribut. A atribut je něco, co mění chování značky. A tento atribut href, prostředky změnit chování tohoto kotvy tak, že když je to klikli, to jde na tuto adresu URL zde. A samozřejmě, že URL je Google. 

Mezitím, co je to text zde bude? No, že to bude co vlastně lidské vidí jako podtržený odkaz, tak jednoduché, jak to. Takže zkusme to. Dovolte mi, abych ji uložíte. Jsem stále v hello.html. Ale ve verzích pro on-line, uvidíte skutečné názvy souborů jsme předem připravených. Nech mě jít dopředu a znovu. A teď je to velmi nezaujatý strana stále. Ale když jsem se vznášet se nad there-- a je to trochu malé, ale- můžete vidět na spodní části levém rohu obrazovky, to opravdu bude google.com. A když jsem klepněte na to, že to bude metla mi cestu k vlastnímu Google. 

Ale všimněte zde příležitost pro vykořisťování, stejně jako stranou. A vrátíme se k jiným otázky bezpečnosti před dlouho. Vzhledem k tomu, že je tato dichotomie mezi, kam jít, a to, co říkáte, byste mohli udělat něco jako tohle-- http://www.google.com. OK, a teď když jsem znovu po uložení tuto stránku, to vypadá, že půjdu na Google. Ale neexistuje žádný důvod, proč jsem jít na Google, ne? Mohl bych opravdu jít do něčeho, jako je badguy.com, znovu načtěte stránku sem. A oznámení, stále vypadá jako Google. A pouze v případě, že jsem ostrý dost vznášet se nad zde Nevidím to dokonce jít jít na jiné místo. 

Takže pokud jste někdy dostali e-mail, a to zejména jeden z Paypal, nebo zdánlivě z Paypal s výzvou k přihlášení na váš účet, to je důvod, proč byste měli nikdy někdy na odkazy v e-mailech, upřímně řečeno, všechny odkazy v e-mailech. Pokud víte, že máte skutečný peníze na Paypal nebo bankou Ameriky nebo Fidelity nebo na kteroukoli webové stránky, ručně zadejte ji. Vzhledem k tomu, podívejte se, jak snadné je přimět někoho do prezentovat to, co vypadá jako odkaz. Ale ve skutečnosti šlo jít naprosto kdekoli. 

A je tu mnohem větší hrozby, než tohle. Ve skutečnosti, je to trochu tečny nyní, ale jeden z těch nejlepších, co jsem kdy viděl která od té doby byla uzavřena, je někdo vedl lidé to-- tak to by mohl říct, Klikněte zde pro přihlášení do vašeho účet, bankovní účet. A to byla Bank of the West. 

Takže někdo koupil tohle. A je to trochu lépe vidět je v mono rozloženy písmo zvětšovat v na 30 stop projektorem. Ale když je to malé písmo e-mail, že jste příjem, to vypadá jako bankofthewest.com, ne bankofthevvest.com, které někdo zaplatil 10 dolarů koupit. A pak to vedlo je, aby ekvivalent nějaké špatné webové stránky. 

A uvidíte too-- vlastně můžeme udělat tohle-- když půjdu na aktuální webové stránky, bankofthewest.com, opět, stažení z poslední doby že pokud je to jejich webové stránky a jste zvědaví, jak to funguje, můžete samozřejmě jít do Vývojářské nástroje Chrome. A můžete vidět všechny HTML tam pěkně formátovaný. 

Ale více k věci, jste cam-- pojďme uzavřít tohle-- můžete jít Zobrazit Developer Zobrazit zdrojový kód. Proč jsem jen kopírovat to vše a pak jsem může jít do mého malého gedit okně tady a vytvořit svůj vlastní webové stránky. Uložte na tuto hello.html. A pravděpodobně to bude zlomit, protože to není tak snadné obvykle. Ale teď, když znovu načíst svou vlastní stránku na moje vlastní CS50 Appliance a stiskněte Obnovit, OK, některé věci zlomil. Ale jsem dost blízko, aby s moje vlastní bankovní webové stránky, ne? To vše HTML-- 

[SMÍCH] 

DAVID J Malan: --I ani actually-- a vím, že je to někdo, kdo by ve skutečnosti klikněte na tyto odkazy také. Tak jasně, některé věci zlomil. Ale to povede nám do diskuze, zbytečně právě teď, na to, co CSS, kaskádové styly, jsou, a jak jste vlastně stáhnout další soubory HTML a JPEG soubory GIF soubory, které Webové stránky by mohly být pomocí. Ale to všechno je proveditelný. Ale je to opravdu scvrkává Tyto velmi jednoduché heuristiky. 

Takže teď pojďme jen prolistovat Několik dalších příkladů HTML jen aby vám pocit co jiného můžete dělat. Například, to je list.html. Dejme tomu, že jsem chtěl, aby se webové stránky se seznamem domů v quad. Mohl bych použít tag ul pro neuspořádaný seznam a pak položka seznamu dítě a pak opakovat over-- nebo seznamu, rather-- domy v otázce. 

A když jsem to otevřít se, jdeme na to. Pojďme není hello.html, ale list.html. Sakra. Jak mohu tento problém vyřešit? Je to stejný problém jako předtím, ne? Tak mě nech dělat chmod-- oops-- chmod + r list.html. A teď když jsem se vrátit do svého prohlížeče a klepněte na tlačítko Načíst znovu, tady to je. Takže pokud jste někdy chtěli, aby seznam s odrážkami, můžete to udělat. Chcete-li být super fantazie a vytvořit uspořádaného seznamu, není neuspořádaný seznam, změnit ty, ol, znovu načtěte stránku, a Nyní prohlížeč bude počítat za vás. 

Co jiného můžeme dělat? No, pár others-- pokud máte dlouhé odstavců text-- Například, některé Latinský text jako tohle-- a budete chtít v samostatných odstavcích, open p, v blízkosti p tagu odstavce. A to znovu a znovu. A když jsem teď otevřít tento soubor, paragraphs.html, dobře, to je stále nepříjemné. Takže teď pojďme se vrátit k mému výzva, chmod a + r r hvězda .html-- pěkný malý divoká karta, abych tak řekl. To by měly stanovit všechny tyto problémy pro mě. Pojďme znovu. K dispozici jsou tři body. 

A teď pojďme do toho a otevřít jednu další. Jak se o stůl? Určitě jste si všimli stolní vzhled trochu složitější. Ale je to stejné idea-- open tag, open tag, open, open, open, close tag, open tag. A to se stalo, stát stůl, jehož hranice je zřejmě Bude tloušťku 1-- cokoliv že means-- řádek tabulky, tabulka dat, což znamená buňku. A když jsem se vrátit do svého prohlížeče tady a jít do table.html, můžete vidět něco takhle, odporná. Ale dostaneme do bodu, kde můžeme skutečně dělat věci hezčí než to. 

Dovolte mi tedy stanovit nyní. Je tu svazky více značek. A HTML je úžasné vyzvednout protože upřímně řečeno, vše, co potřebujete udělat, se podívat na stávajících webových stránek s nimiž jste se seznámili. A ty jsi jako, oh, to je jak dělali to esteticky. 

Nebo se můžete podívat na všechny on-line zdroje o tom, jak funguje HTML, a uvidíte, že tam je Celý slovník dalších značek. Ale s jednoduchým mentálním modelu sám, že téměř jakýkoli štítek otevření musí být uzavřeny, je to opravdu se stačí naučit sám HTML po porozumět tyto základní myšlenky značek a atributy a dobře formedness že jsme mluvili o tom, zavřít něco, co bychom mohli otevřít takže nemáme plést prohlížeč. Takže pojďme se teď to zajímavější úrovně tím, že půjdete na aktuální. A pojďme na mém Macu zde, na google.com. A teď notice-- pojďme to udělat. Jsem gong jít Nastavení, Nastavení hledání. Chci vypnout tento nepříjemný okamžik Výsledky věc, okamžitě tam, kde začne reagovat na vaše psaní. Pojďme to udělat starší školu tak jsme skutečně vidět, co se děje. 

Takže já jdu, abych si zachránil Nastavení zde Google. A teď notice-- budu hledat něco jako kočky. A je to stále dělá auto Kompletní tady, ale na základě věcí, lidé zadali v minulosti. Povšimněme si ale, co se bude dít. 

V URL v okamžiku, kdy je to jen google.com. A technicky je to lomítko. Google právě ukládání znak a není nám to ukazuje. Jsou nám ukazuje https, jen být super uklidňující, že jsme v zabezpečeném nebo šifrované stránky. 

Tak nech mě jít dopředu a hledat pro kočky. Teď to byl opravdu ohromující rychle. Podívejte se na délce této adresy URL. Ale ukazuje se, že většina z těchto věcí v URL je vlastně k ničemu. Chystám se začít mazat věci nerozumím. Vidím kočky. Chápu kočky. Nevím, proč kočky jsou tam znovu. Já opravdu nevím, co to nesmysl je. Tak jsem jen tak, aby zvýraznění a mazání věci že nechápu, destilace URL do právě tento. 

Nyní mi dovolte si znovu zadávat. Vypadá to, že Google stále pracuje. Takže z nějakého důvodu, že přidáváte spousta věcí na jejich adresy URL ve výchozím nastavení. Ale to není nezbytně nutné. Takže to, co je hezké o tom? No, nech mě jít dopředu a otevřít Chrome Inspector. Tam je to trochu zkratka myš pro něj. 

Přejděte na kartu Síť. A teď mi dovolte znovu Tato stránka ještě jednou. A já stisknutou klávesou Shift. Mimochodem, prohlížečů mají tendenci do mezipaměti nebo uložit informace jen kvůli účinnosti je. Ale obvykle, držení Shift a překládka donutí vše začít znovu od začátku. A to je to, co chci dělat. 

A všimněte si všechny tyto řádky, které právě objevil. Ukazuje se, že v daném web strana, může tam být jen jeden soubor involved-- hello.html-- nebo tam může být 52, jako v tomto případě. Když jsem se navštívit google.com, zdá se, že můj prohlížeč začíná 52 jednotlivé HTTP požadavky. Proč tomu tak je? 

No, podívejte se na to, co je uvnitř této webové stránky do horní části. K dispozici je nejen text, ale je tu skutečné obrazy koček více než na pravé straně. K dispozici je barevné logo tady na levé straně. Je tu vše z těchto ikon pro mikrofon a tak dále. Je tu hodně kusů, stavební bloky, stírací kousky, chcete-li, na této webové stránce. A co je na tom prohlížeč na dostat úplně první soubor, který je tento řádek zde, jak se v podstatě iterace přes vrchol HTML dolů, zleva doprava, hledá věci, jako je image značky nebo jiné značky které se zmínit další soubory a když to vidí, jde a načte je přes HTTP, životaschopný celek obálka metafora, a pak se zobrazí v vhodné umístění na webové stránce. 

Ale všimněte zde, pokud se zaměřím na První hod, vyhledávání koček, Všimněte si, že ve skutečnosti je to pomocí protokolu HTTP 1.1. A bohužel, Google Chrome právě teď ve verzi 39 je druh dumbing věci dolů a Není nám ukazuje skutečné záhlaví. Ale to, co se skutečně poslal, je požadavek za to, lomítko, ale / search? q = kočky. 

Nyní, proč je to tak důležité? No, já jdu k odvození z toho, že pokud Google podporuje dotazy tohoto formuláře, proč ne mám implementovat své vlastní hledání motor CS50, ale jen přední konec, jen grafické uživatelské rozhraní. A budeme zadávat zadní část, výsledky skutečné hledání na Google. 

Tak jak to mám udělat? No, nech mě jít do gedit sem. A nech mě jít napřed a otevřít up, řekněme, nový soubor. A já jdu zachránit tento dočasně jako hledání-0.html. A nakonec, budeme rychle vpřed na kterou jsem předem připravených. 

A já jdu rychle vybičovat typu doc html otevřený držák html v blízkosti držák html. Pak budu dělat hlavu v blízkosti hlavy otevřené titul CS50 Hledat místo vyhledávání Google. Tady budu mít tělo, tady blízko těla. A teď musím CS50 hledání. A vlastně, pojďme stavět to postupně. Chystám se jít dopředu a zavřete to a skutečně dát to v mém veřejném seznamu. Tak mi dej jen jeden okamžik. search-0.html-- Chystám se časově říkají search.html. Chystám se chmod to + r search.html. A teď jdu otevřít. V pořádku, takže to bylo rychle. Ale cílem prostě bylo abychom se dostali do bodu, mít tento text Soubor s názvem search.html. Takže není moc na pohled, ale. Ve skutečnosti, když půjdu do svého prohlížeče, a přejít na search.html, to je vše, co je. Ale víte co? I může být trochu milovník. Četl jsem v knize, že je tu tag záhlaví s názvem h1. A já jdu dál a používat tuto open H1 a zavřít h1. Znovu načtete stránku. A teď je to větší a odvážnější, není tak zajímavé, ale aspoň strukturálně zajímavější. Ale teď mi dovolte představit jinou značku. Ukazuje se, že je to tag formuláře. A dovolte mi ukončit tento tag. A ukázalo se, je tu vstupní tag, který má atribut s názvem typu, který je datový typ pole, chcete-li. A bude typu textu. A jeho hodnota se děje být CS50 hledání. Close tag. A tam to bude bez pojem otevírání a zavírání s oddělenými tagy. 

Dovolte mi, abych se vrátit sem a zjistit, co se děje, znovu. Začíná být zajímavé. Vypadá to, že je to textové pole. A vlastně, já jsem nechtěl dát hodnotu tam ještě. Nech mě jít zpátky a skutečně dostat zbavit této hodnoty, aby to jednoduché. Místo toho, aby hodnoty, co jsem chtěl aby tuto věc byl název. A já nevím, co to je, tak se vrátím k tomu. 

Ale pod tím chci dělat input type = odeslat. A tato hodnota bude CS50 hledání. A uvidíme, proč jsem přesunul hodnotu tohoto. Když jsem se znovu, se mi zdá nyní Počátky mé vlastní vyhledávání motor, super odporná, ale upřímně řečeno, je to ne daleko dohodil od toho, co Výchozí stránka Google vypadá. 

Pokud jdu teď tady, můžu zadat kočky a doufejme, klepněte na tlačítko Hledat. Ale já nejsem zcela neskončil, proto, že jsem neprovedl, Je zřejmé, že databáze. Nemám lezl web na výsledky vyhledávání. Tak jsem třeba zadávat, že pro Google. Tak jak to mám udělat? 

No, v první řadě bych je třeba přidat a akce připisovat mé formě tagu, který je http://www.google.com/search. A vím, že jen z nutnosti dovodit bližším pohledu v jejich URL. A teď hádejte. Co by měl tento text pole pravděpodobně nazvat, podle toho, kde jsme přišli před rokem? 

Diváků:? Q. 

DAVID J Malan:? Q. A už vůbec se skutečně potřebují otázku označit to dopadá, ale q je skutečně to, q na dotaz, pravděpodobně default, jen proto, že to je co Larry a Sergey přišel s lety. Takže teď mi dovolte znovu načtěte tuto stránku. Nevypadá to tak odlišné. Ale teď sledujte, co se stane. 

Kdybych zadejte koček a klepněte na tlačítko CS50 Hledání a pustit, Všiml jsem si bleskurychle od skutečné Google. Nyní Google je, že je trochu nepříjemné v tom, že jsou připojí další parametr, chcete-li, na adresu URL. To je vše děje automaticky na straně Google. 

Důležitou součástí je, že se zdá aby přinesly tuto žádost zde. A opravdu, to, co se stane. Máte-li HTML, které vypadá to, toto je druh webové vývojáře zápisu že to říkám, jděte do toho a vytvořit formulář že když je předložen, to bude jít na tuto adresu URL. A když URL poskytl hodnoty pro věci, jako je Q, nechodí jen na tuto adresu URL. Vlastně, přejděte na otázku značka a pak q = kočky. Připojit parametr, Parametr HTTP takhle. 

A právě být super přesné, to, co je odvodit here-- ale budu víc explicit-- je že metoda, kterou chcete použít je dostat, místo něčeho jako příspěvek, který budeme nakonec vidět. Takže ve zkratce, jednoduše tím, že pochopení HTML a používat některé docela jednoduché tagy, nyní můžeme začít vytvářet naše přední koncový uživatel rozhraní s vyhledávání Motor za ním. 

Ale to je samozřejmě docela odporná. Dovolte mi tedy vlastně otevírají o něco lepší verze. To je ten, I připravené v předem, že má nějaké připomínky. Ale uvidíte, že já do značné míry znovu ji. Tak to je on-line již k dispozici. A já jsem náhodou preventivně jít na https jen, aby to jednoduché. 

A teď pojďme otevřít další iterace tohoto. Je verze 1 místo 0. Co vyskočí na vás jako mírně různé v tomto příkladu? 

Diváků: [neslyšitelné]. 

Jo, je tu tento text align centrum. To je trochu divný tady. Ale tohle je opravdu nový. A možná hádejte, co se bude dít. Pokud jdu do svého prohlížeče nyní a navštívit search-1.html, je to skoro totéž. Ale je to krok blíže je trochu hezčí. Je to stále ošklivá, ale hezčí v tom, že alespoň všechno je teď ve středu. 

Tak se ukáže, že to, co jsem pomocí je jiný jazyk úplně volal CSS, kaskádové styly. A CSS, upřímně řečeno, je druh na, podle mého osobního názoru, otřesně navržený jazyk. To je velmi nepříjemné na paměti všechny různé detaily. Ale to je to, co stylizuje Celý celosvětově web dnes. Jsem urazil někoho. Dobrá. Takže pojďme zpátky a vidět jak jsme vlastně používat to. A ukázalo se, alespoň, že je to vlastně docela jednoduchý jazyk. Je to jen dvojice klíčů hodnota, vlastnosti a hodnoty, vlastnosti a hodnoty. Opravdu, tady je jeden takový majetek a hodnotu. 

Jednoduše pomocí stylu atribut mého těla tagu a dávat to hodnotu Slovo tlustého střeva a další slovo, nebo vlastnost a hodnotu, Mohu ovlivnit estetiku webové stránky, ne ještě nutně struktura, ale estetika ní. A právě Googling kolem, jsem si uvědomil, že CSS, kaskádové styly, podporuje vlastnost nazvanou text-align, jehož hodnota může se doleva, doprava nebo na střed, například. 

Takže teď, když jsem se znovu Tato stránka, co jsem si byl střed stránky, ale stále dost ošklivé. Pojďme dál a otevřete up verze 2 Hledat. A teď Všiml jsem si udělal trochu víc. Všimněte si, že se zde uvnitř hlavy tag, může existovat více než titul. Ve skutečnosti, tam je tag styl. A to je místo, kde to jen dostane Trochu chaotický vidění CSS někdy. 

Všimněte si, že jsem se zdá, že mají něco že strukturálně vypadá úplně jinak. Ale tady je název tag chci stylizované. Zde jsou naše staré přátele kudrnaté šle a uzavřené složená závorka. A pak je, že majetku a jeho hodnota. 

Kdybych načíst tento soubor, search2.html, Konečný výsledek je stejný. Ale je to krok směrem k lepšímu designu. Vytknutím tuto CSS, jsem ne smíšeny s mým HTML. A skutečně, jak uvidíme, mohl bych znovu použít tyto vlastnosti a hodnoty. Kdybych chtěl, aby se kytice části mé webové stránky na střed, Nemám psát style = text-align centrum všude. Můžu dát na jednom místě Možná, rád se nahoře. 

Ale ani to není nejlepší návrh. Ve skutečnosti, jedna z věcí, se dozvíte jak budete trávit víc a víc času s web programování je, že čím více si můžete modularizovat věcí a faktorů věci jako .h soubory dejte nám faktoru věci ven, Líbí se helpers.c dejte nám faktorů věci několika psets lety. Stejně tak bychom mohli chcete dosáhnout. 

Takže si všimnout ve verzi tři search.html jsem vyčistit hlavu stránky a jen dát v tomto, tag link, který na rozdíl od jména, nedává hypertextový odkaz. To odkazuje na jiný soubor prostřednictvím href, jehož hodnota je v tomto případě, je search-3.css Tak jsem si uvědomit, že budeme rychle. Ale všechno, co dělám, je druh pohybujících se věci kolem. Dovolte mi, abych otevřít Search-3.css. Tady to je, opravdu nic k tomu. Jen jsem zkopírovat a vložit ji do nové souboru, stejně jako my zapracovány věci z do jiných souborů před. A result-- zcela underwhelming-- bude úplně stejný. Ale jdeme toward-- ne, to ne. Oh, já vím proč. 

Takže se zdá, že se tuto chybu. A to je v nějakém smyslu. Ale dovolte mi, abych otevřela svou kartu Síť. Dovolte mi, abych znovu načtete stránku. Ach, proč je CSS nepoužívají? No, soubor CSS, podobně, má být svět čitelný, abych tak řekl. A taky je v současné době zakázané. Dovolte mi tedy dělat chmod + R hvězdy dot CSS-- whoops-- jsme tečka CSS je jen Přípona souboru CSS souborů. Nyní mi dovolte vrátit se můj prohlížeč a Obnovit. OK, trochu lépe. 

Nyní mi dovolte udělat jednu poslední věc. Ve vyhledávání-4.html. Mám verzi, že jsem si myslel, byla cesta chladnější, i když mnohem více komplikované. Pojďme se podívat na výsledek jako první. Zavřete to nám více prostoru. Změnit to hledat-4, Enter. 

A teď spoustu věcí, jsou rozbité. Chystám se vrátit do mého seznamu zde. A teď jsem jen dělat chmod o + r na file-- protože vím, že exists-- nazývá logo.gif, což je obraz. A teď znovu. A wow-- tak teď jsem docela blízko, upřímně řečeno, rád verzi Google 1999, a upřímně řečeno, verze Google 2014 že jo? 

Takže to teď bude na své webové stránky, nakonec, když jsem hledat pro kočky. A skutečně je. Ale to, co jsem udělal jinak V této verzi 4? Takže nebudeme zabývat příliš mnoho na to zde. Uvidíte to v problému nastavit sedm nakonec. Povšimněme si ale udělal jsem si pár věcí. 

Představil jsem div tag, což je divize, svým duchem podobat tagu odstavce. Ale rozdělení je, stejně jako, tady je obdélníkový neviditelný region obrazovky. Pojďme dát jedinečný identifikátor, zápatí, jen takže můžeme hovořit o je v našem HTML jinde. Zde je další div stránky jehož číslo bude spokojen. Je to obsah stránky. A tady je hlavička stránky. 

Jinými slovy, jsem v podstatě v HTML jsem mentálně prohlížení této webové stránky, jako tři složky, hlavičkové sem s touto neviditelnou obdélník, obsah ve středu, a poté zápatí dole, a to i když nevidíme ty věci. Protože chci, aby v mé hlavě strana zde, nebo v souboru CSS, Mohu použít tuto syntaxi. 

Header není tag. Je to číslo, takže se ukáže, na to, že tím, že dělá #header, Nyní mohu použít jeden nebo více vlastnosti do hlavičky. Mohu dělat stejný obsah, stejný za obsah zde. 

Tak například, v zápatí, oznámení Všechny tyto vlastnosti jsem přidávání. A já vím, že existují jen tím, že čtení se na dokumentaci pro CSS. Velikost písma bude smaller-- takže některé relativní velikost písma. Hmotnost bude tučně. Margin-- kolik pixelů kolem to-- je 20 pixelů. A to bude ve středu. 

Ale teď, stránka vypadá takto. Pokud nejsem spokojen s moje kopie právě tam, Mohl jsem udělat něco jako červenou barvou. A pak jsem si to uložit, načíst, a teď jsem stylizované zápatí. Takže je to jen naznačuje na napájení o tom, co můžete udělat na webové stránce změnit věci kolem. 

A dokonce chladnější než to, pokud chcete tropit si s aktuální webové stránky, nelze je trvale změnit. Ale když otevřu Znovu Chrome Inspector a jdu ne na levé straně tu, která ukazuje Facebooku HTML, ale ukazuje na pravé straně na pravé straně všechny své CSS, můžete buď a změnit věci v reálném čase. Tak nech mě jít dopředu a to. 

Nech mě jít napřed a kontrola Kliknutím na této náhodné slovo zde, podepsat, a klepněte na tlačítko Zkontrolovat prvek. Chrome velmi výhodnou skočí na tag h1, že Facebook používá. A všimněte si zde Facebook má trochu líně pevně dané velikosti písma jako vlastnost zde. 

Takže super věc však je, že když jsem vlastně jít sem a říkají, oh, Facebook, nelíbí se mi, že 64 pixelů, můžeme nyní změnit Facebook. Samozřejmě, že jsme jen jej změnit pro mě osobně v tuto chvíli. Ale to je jen další nástrojem v našem sadě nářadí , co se děje, aby nám vylepšit a přijít na to, a také diagnostikovat problémy v našich vlastních webových stránkách. A mohli bychom podobně projít tady, což je totéž. Pokud se opravdu chcete dostat fantazie, jsem znamenat, nyní můžete skutečně mutovat stránku a dělat šílené věci. 

Tak proč je to všechno užitečné? No, nakonec jsme bude chtít být schopen vytvořit webové stránky, které jsou poháněny vlastními zadních koncích, ne jen Google a outsourcing back-end tam. Vlastně chceme hodnoty, například, akce našeho vyhledávače atribut jít ne na někoho jiného, ale něco jako search.php, kde search.php je na našem vlastním serveru, ne na někoho jiného. 

A tak se tam dostat, jsme vlastně je třeba zavést nový jazyk. Tak už jsme se podíval na jeden nový Jazyk zde, nebo dva opravdu, HTML a CSS. Ale ve skutečnosti jsou jen konstrukční a estetické jazyky. Nejsou to programování jazyky samy o sobě. A to je asi tak formální čas jako budeme trávit na nich. Vzhledem k tomu, začneme nyní přejít na PHP. 

PHP, takže je aktuální programovací jazyk. Je to skriptovací jazyk v tom smyslu, že je to má být lehčí než něco jako C A to je interpretovaný jazyk, což znamená, že to není kompilován. Takže ve zkratce, co to znamená, když jsme použili jazyk C a museli jsme ho sestavit? Co to znamená kompilovat C zdrojový kód? Diváků: [neslyšitelné]. DAVID J Malan: Řekni to znovu? Diváků: [neslyšitelné]. DAVID J Malan: Perfect. Ukazuje to na binární. Ukazuje to do nuly a ty z aktuální anglicky jako zdrojový kód. A pak můžeme skutečně spustit tyto nuly a ty průchodem CPU poklepáním na ikonu nebo spuštěním příkazu. 

PHP a Python a Ruby a Perl a JavaScript a kytice ostatní jazyky jsou interpretovány jazyky, což znamená, nemáte sestaví z nich. Spíše, krmit jako vstup do program s názvem tlumočníka. A to interpret, který někdo napsal, čte zdrojový kód shora dolů, zleva doprava a jen interpretů tyto řádky a dělá to, co říkáte. 

Takže pokud narazíte na řádek, který říká, že tisk, nemusí to nutně převést tisk s odpovídajícími nul a jedniček. Je to jen má tuto tlumočníka jako big-li podmínka, která říká, pokud instrukce programátora je tisk, proveďte následující kroky. Tak to interpretuje právě podle druhu uvažování tím, co říkáte to udělat. 

A PHP je jedním z těchto jazyků. A před PHP lety byl navržen tak, Právě pro programování pro web. A to bylo zpočátku velmi nedbalý chaotický jazyk. A opravdu, je tu obrovský Množství špatné PHP kódu tam. Ale jazyk sám dozrála v průběhu let, natolik, že teď je to ve skutečnosti nádherný další krok pedagogicky z C, protože je to tak zatraceně povědomě vše jste právě viděli v posledních několika týdnech. 

Jeden počáteční rozdíl uvidíme je není hlavní funkcí už. Když začnete psát kód, je to jen bude vykonán bez ohledu na to, jak uvidíme za chvíli. Mezitím, tady je to, co proměnná vypadá v PHP. Je to trochu jinak, ale jen stěží. 

V PHP, že to není silný psaní. Je tu týden psaní, která se právě zde znamená, jsou datové typy, jako jsou řetězce a čísla a dalších věcí. Ale nemusíte se obtěžovat s uvedením to, co oni jsou už ne. PHP čísla je pro vás. Znak dolaru je jen rozhodnutí že PHP lid let Před tak, že všechny proměnné v PHP právě začíná znakem dolaru. Je to vlastně trochu užitečný v tom, že vyskočí na vás trochu víc. 

Ale po tom, toto je stav, v PHP. To, co je ve srovnání s C? Trick question-- nic, což je ve skutečnosti opravdu pěkné. Booleovské výrazy v PHP-- stejné. Booleovské výrazy se a oproti nebo přepínače, smyčky, smyčky, loops-- OK, to je jiný. 

Tak to dopadá, že je pár dalších funkcí v PHP. Jedním z nich je ve skutečnosti to, který je úžasně pohodlné. Je-li $ čísel je pole, které jste deklarován dříve v programu, Máte tento chuť na každý konstrukt že namísto toho, aby to vše nepříjemné I = 0, I je méně než to, [? I ++?] pro každý čísel jako čísla, kde každý z těchto znamení hodnoty dolaru je jen variabilní, a druhý si můžete myslet jako já Dalo by se to nazvat, co chcete. Zavolal jsem to číslo. To bude iterovat přes pole volaných čísel. A v každé iteraci, je to bude automaticky aktualizovat pro tebe číslo znak dolaru variabilní, takže si neustále mají přístup k proměnné, kterou chcete aniž by bylo nutné dělat žádné hranatou závorku notace nebo indexovací do matice. 

Kromě toho, máme dokonce věci, jako je pole, které vypadají téměř stejně, kromě toho, že je to velmi časté, jak jsme to vidět, jak v PHP a JavaScriptu provést předběžnou inicializaci pole pomocí hranatých závorek. C používá složené závorky. Takže je to trochu odlišné, i když jsme se opravdu použít ten trik moc. 

Ale ještě mocněji, PHP je asociativní pole, což je ozdobný způsob, jak říkat hash tabulky. Ve skutečnosti, pokud chcete deklarovat hash Tabulka v PHP, na rozdíl od C- kolik řádků kódu trvalo skutečně realizovat hash tabulky v C? Nebo kolik řádků kódu je to z při provádění hash tabulky v C? Takže je to asi hodně, že? Je to několik desítek, možná 100 nebo 200. To je netriviální. Nebo je to o tom, že, jak budete brzy vidět, netriviální realizovat hash tabulky [Neslyšitelné] a také vyzkoušet. Ale v PHP-- a upřímně řečeno, já asi neměl ti to říct, až Monday-- v PHP, pokud chcete tabulku, hotovo. To je hash table-- tak s jedním řádkem kódu. A 

Mnoho jazyků udělat. Bavte se s pset pět. Takže hodně jazyků udělat. Dávají vám tyto abstrakce že jiní lidé, jiné programátory, vytvořili pro vás tak, že můžete postavit na svých bedrech a začít používat myšlenky, které jsou super přesvědčivé, jako hash tabulky a stromy a snaží se. Ale nemusíte nutně provádět ty věci sami. 

A tak nakonec to, co budeme používat PHP pro je potenciálně psaní programů z tzv příkazového řádku. Mohli bychom se znovu každý program jsme napsal tento semestr tak daleko, snad s výjimkou Breakout, který využívá SPL, která je specifická pro C v současné době. Ale každý jiný problém nastavit, určitě Mario a Caesar a Vigenere a [? Crack?] A dál jsme mohla znovu zavést v PHP, a asi trochu snadněji. 

Ale co my nakonec bude PHP používat je web programování. A budeme zavádět další týden mentální model, vzor nazvaný MVC, pohled modelu regulátor, které, pokud jste udělali programování předtím v Pythonu nebo Ruby nebo jiném místě, budete možná víte, tento tým se Kolejnice a Django a podobně. Ale pokud jste novým to taky, uvidíte že je to ve skutečnosti velmi přirozený rozšíření faktorizace a druh konstrukce kódu, který máme dělal v C. Budeme nyní použít některé z těchto lekcí do PHP takže nakonec jsme provádění našich vlastních webových stránek. A pokud jste trochu uchvácen nebo ohromen že budeme dělat všechny tak rychle, Uvědomuji si, že téměř každý semestr, téměř 90% studentů CS50, včetně těch, kteří nikdy naprogramováno, skončit dělat závěrečné projekty, které jsou založeny na webovém programování. A tak uvidíte, že se vrátí jsou vysoko v následujících týdnech. Tak jsme vás vidět a pak v pondělí. 

SPEAKER 1: A teď, Hluboká Myšlenky od Daven Farnham. Hash tabulky. 

[SMÍCH]