>> [Muziek]
DAVID J MALAN: Oké, welkom terug.
Dit is CS50.
Dit is het einde van week zeven.
En het is het einde van die scavenger jacht van probleem set vier
dat je nog wel herinneren.
Na het herstellen van alle die JPEG's van het personeel,
u werden uitgedaagd, als je wilt, om jezelf te fotograferen met zo veel
van die mensen als je kunt.
We hebben een hele hoop van inzendingen in de afgelopen paar weken,
inderdaad, nogal wat recht voor de middag Vandaag, waarvan sommige de hier,
hier gevangen in-- ziet like-- Annenberg Hall op kantooruren, één hier
in Lowell House met Nick.
Hier is Ramon wordt gevangen op de telefoon.
Dit was een CS50 lunch.
Dit was Jason Skypen met een meer creatieve klasgenoot,
die hem op deze manier gebeld.
We weten niet wat dit was.
>> [Lachen]
>> DAVID J MALAN: Maar dat is een gigabyte waard.
Hier is Chang, die liep letterlijk van het podium
om te voorkomen dat wordt gefotografeerd één dag, maar werd uiteindelijk gevangen.
Hier is Nick.
En hier is Alison door de velden.
En Zamyla zelfs werd gevonden bij een danszaal concurrentie.
Dus zullen we door gaan deze foto's, erachter te komen
die ingediend de meest de vroegste en beloning
een fantastische prijs, zoals beloofd in de spec.
En we zullen ook de follow-up over de ruimte die betrokken was.
>> Een paar announcements-- dus lunch is, nogmaals, deze vrijdag om 13:15.
Indien u graag om met ons mee, RSVP op die URL hier.
Jason verschijnt weer hier van de ene van de secties een paar jaar
terug, dat gebeurd op Halloween te vallen.
En inderdaad, hij gekleed als een pompoen dat jaar.
Als u dit gedeelte kijken van zijn uit 2011 deel
acht, als je nieuwsgierig bent, bij CS50.tv, denk ik
Dit was het jaar waarin zijn luchtpomp werkte.
>> Als je dan kijken naar de vergelijkbare sectie in 2012,
zie je dit Jason veel leeggelopen, omdat het pak niet meer functioneerde,
die alleen zeggen deze vrijdag, als je wilt
graag een pompoen met Daven carve en Gabe en anderen, RSVP aan de hoofden
bij cs50.harvard.edu adres.
Het belooft heel leuk zijn.
Daven, wordt ons verteld, heeft gesneden pompoenen zijn hele leven.
Gabriel uit Brazilië heeft nooit gesneden een pompoen voor Halloween.
Er dus bij hen als hij leert.
>> Seminars, meanwhile-- dus je zult snel leren
over wat onze verwachtingen zijn voor het uiteindelijke project, die in wezen
zal neerkomen op ontwerpen en implementeren van
vrijwel elk project van belang zijn voor u, zij het onder voorbehoud van de goedkeuring
en begeleiding van uw onderwijs collega.
Tegen het einde van de semester, introduceren we een aantal
van seminars, die optioneel lessen zijn geleid door de leer fellows en Harvard
personeel, vrienden van de cursus over campus, over verschillende onderwerpen die
tangentiaal aan de onderliggende syllabus cursus
maar toch van toepassing, fun, en anders voor potentiële afstudeeropdrachten.
>> Zo, de eerste, als je wilt aan te melden, ga dan naar die URL daar.
En dit is de line-up voor seminars dit jaar alleen.
Maar beseffen we hebben tientallen seminars van de afgelopen jaren, die allemaal
zijn gekoppeld in het menu Seminars optie van de website van de cursus.
Dus als u denkt over verder te gaan dan je comfort zone
of het oppakken van een aantal nieuwe vaardigheden, bijvoorbeeld het programmeren iPhone
apps met Swift, een nieuwe taal Apple of Objective-C
of Android apps of programmeren [? cue?] gloeilampen, of een van de onderwerpen
hier en meer, te wijten check uit de registratie pagina.
>> Dus we begonnen en afgesloten op Maandag met kijken naar HTTP.
Dus snel refresher-- HTTP, HyperText Transfer Protocol.
Maar wat betekent dat eigenlijk?
Wat betekent dat eigenlijk?
Is dat een hand?
Ik weet dat je gewoon je hoofd krabben.
Maar je wilt voorstellen wat HTTP is?
>> Publiek: Hoe computers communiceren met [onverstaanbaar].
DAVID J MALAN: Ik miste het laatste deel.
Hoe computers communiceren met--
>> Publiek: Internet servers.
DAVID J MALAN: goed-- met internet servers, en in het bijzonder, webservers.
Omdat recall, er is een heleboel diensten op het internet, waarvan sommige
je dagelijkse waarschijnlijk gebruik tussen de chat en bericht, chat, en web-en e-mail,
en dergelijke.
En HTTP is gewoon de protocol dat web browsers
spreken bij de communicatie met webservers, en vice versa.
En de analoge in de menselijke wereld zou kunnen zijn,
Verleng ik mijn hand om wat te schudden andere menselijke en hij
erkent door de uitbreiding zijn of haar hand ook.
Dus dat is gewoon een protocol, een set van conventies.
>> En wat inderdaad zijn die verdragen?
Nou, het komt gewoon neer op verzenden van berichten heen en weer,
zoals wij hier afgebeeld.
En er zijn een paar manieren in waarin je kunt deze berichten te verzenden.
En misschien wel het meest voorkomende is bekend als get.
En we zullen een contrast zien dit duurde niet lang.
>> Maar een get verzoek van een browser naar server net ziet er zo uit.
Het is een bos van tekst die het brengt binnenkant van een virtuele enveloppe.
Aan de buitenzijde van de enveloppe ga een paar stukken van details.
Wat er moet gaan op de envelop, zo te zeggen,
met het oog op een verzoek als te krijgen dit van mij naar een webserver?
Yeah.
>> Publiek: Uw IP adres.
>> DAVID J MALAN: Mijn IP adres in het veld, om zo te zeggen,
en natuurlijk, de IP-adres van de ontvanger.
Maar in het geval van een web pakket, we moeten een beetje meer detail
Het is niet voldoende alleen om stuur een envelop met een server,
omdat die server zou kunnen zijn luisteren naar verschillende types
van internetverkeer.
Dus wat hebben we nodig Naast IP van de ontvanger?
Yeah?
>> Publiek: Is het TCP?
DAVID J MALAN: Goed.
TCP--
>> Publiek: Adres.
>> DAVID J MALAN: Adres, of poort, zoals dat heet.
Dichtbij, maar een TCP poort nummer.
En er is een bos van deze.
Maar zeker de meest vertrouwd moet uiteindelijk
80, dat is de standaard één gebruikt voor webverkeer.
En een ander vertrouwd men straks 443,
die wordt gebruikt voor veilige web verkeer, URL's die beginnen met https.
>> Dus dit is wat er gebeurt binnenkant van die enveloppe.
En krijg / betekent gewoon, geef me de standaard webpagina.
Geef me de root van de harde rijden op die webserver.
En hopelijk, het web server zal reageren met, OK
en het getal 200, dat is net een conventie die zegt, ja, alle
inderdaad OK.
Hier is de pagina.
Het type van de webpagina gaat zijn tekst, maar meer specifiek, HTML,
die we op het punt om weer in te duiken.
En de dot dot dot net betekent hier de HTML.
En dat is waar we pikken het verhaal van vandaag,
eigenlijk het schrijven van HTML, HyperText Markup Language,
is de taal waarin webpagina's worden geschreven.
Het is geen programmeertaal.
Er is geen functies of lussen of voorwaarden.
Het is een opmaaktaal, zo goed zien vandaag opnieuw,
die u toelaat om te specificeren hoe te structureren en te stileren
esthetisch een webpagina.
>> Dus dit was de een en alleen pagina we echt
keek bij kortstondig, op maandag.
En merk op een paar saillante kenmerken.
Er is veel open schuine bracket en dicht schuine beugel.
Tussen deze hoek haakjes zijn woorden.
En we gaan beginnen roepen die woorden labels.
Bracket hoofd zo open en gesloten beugel hoofd
de open en gesloten markeringen, of het begin en eind tags
respectievelijk een HTML-element, zoals we het zullen noemen, heet hoofd.
En hetzelfde jargon geldt lichaam in HTML enzovoort.
>> En wat is er leuk is HTML-- en inderdaad, zullen we
besteden ontzettend weinig tijd op het, omdat je meestal gewoon uitzoeken
welke functies het heeft wanneer je daadwerkelijk een concreet probleem
om solve-- je dat vinden een browser is vrij dom.
Het gaat gewoon om niet in tegenstelling tot doen-- een computer-- wat je hem vertelt wat te doen.
En dus, als u hebt geopend bracket HTML aan de top
daar, die in wezen betekent gewoon, hey, browser,
hier komt een webpagina geschreven in HTML.
>> Bij het zien van haakje openen hoofd, dat betekent,
hey, browser, hier komt het hoofd, of het bovenste gedeelte van mijn webpagina.
Bij het zien van een gesloten beugel hoofd, dat betekent gewoon, hey,
dat is het voor het hoofd.
Standby voor iets anders.
En dat er iets anders is blijkbaar gaat het lichaam.
En als je niet van een tag, zoals hebben je hebt gewoon hallo, komma, wereld,
dat zal alleen maar rauwe tekst zijn dat Uiteindelijk wordt in het scherm.
>> Nu, je zult ook merken de insprong hier.
Je kunt waarschijnlijk afleiden hoe we stileren het.
Elke keer als ik een tag te openen, zo te zeggen, ik inspringen.
En elke keer als ik sluiten een tag, ik un-streepje,
in dezelfde geest om accolades.
En buiten dat, ik ben een beetje van het gebruik van mijn oordeel.
Merk op dat ik niet de moeite te raken Voer binnenkant van die titel tag.
Waarom?
Nou, ik heb net besloten dat het leek een beetje schoner voor mij, de mens,
gewoon niet de moeite om dat te doen.
Dus nogmaals, er is een aantal oordeel noemt gewoon
alsof er in C of welke taal dan ook.
>> Maar merk ook dat dit inspringen leent zich voor een mentaal model,
niet te over compliceren.
Maar een boom, toch?
Als je denkt aan een web pagina, blijkbaar geschreven
als dit, als zijnde mooi ingesprongen op die manier,
kun je bijna denken aan de open beugel HTML gesloten beugel tag wordt de afbakening
de wortel van een knoop, een stamboom stijl knooppunt in de stijl van de bomen
we gekeken naar afgelopen vrijdag.
>> En inderdaad, we hebben aan de rechter hier wat wij een DOM, D-O-M, document zullen noemen
object model, een mooie manier om te zeggen een boom die dat HTML vertegenwoordigt.
En merk op dat HTML heeft, zullen we zeggen, als een stamboom, twee kinderen.
Aan de linkerkant is het hoofd.
Aan de rechterkant is het lichaam.
>> En net als een hersenloze denkoefening, hoofd, heeft natuurlijk hoeveel kinderen
Volgens deze structuur?
Dus gewoon een, title-- en dat is waarom we hebben
de pijl die van het hoofd tot de titel.
Dus het is alsof die persoon in de stamboom had net een jongen.
En dan de titel zelf kan worden gezegd dat een kind te hebben.
>> Bedenk dat de HTML gehad hallo, komma, wereld eronder.
En ik heb gewoon getekend binnen een ovaal in plaats van een rechthoek net
semantisch brengen dat, hoewel Het is een knooppunt in de boom, zo te zeggen,
het is een soort van fundamenteel anders.
Het is niet een tag.
Of beter gezegd, het is niet een element.
Het is gewoon een tekst knooppunt, als je wil.
Maar deze zijn volledig arbitraire menselijke conventies.
Dit is nu net mijn manier van neerkomt op wat ik zal als een aggregaat
noem het document.
>> En als een terzijde, het ding op de super linker bovenhoek,
geopend beugel uitroepteken doc het type HTML, dit ziet eruit als een tag,
maar het is de domme hoek geval dat is er gewoon, gekopieerd en geplakt
de browsers geven Dit HTML versie 5.
De wereld blijft veranderen wat de eerste regel van de code in een pagina moeten zijn.
Dit betekent alleen versie 5.
Het maakt dus niet helemaal kijken als de anderen.
>> Oké, dus met dat zei, je zult nu waarderen
dit vrij deze domme tattoo iemand kreeg.
>> [Lachen]
>> DAVID J MALAN: Oké, en laten we nu eigenlijk duik
in iets met dit te doen.
Je zult zien dat de vorige keer herinneren Ik opende de CS50 Appliance
en ik deed iets als simpel als openstelling gedit.
En ik redde het bestand zelfs op mijn desktop-- nergens speciale--
als hello.html.
>> Dus laat me dat doen again-- hello.html Enter.
En nu in dit bestand, ga ik ga je gang en repliceren wat we net
saw-- doc soort html Dan ga ik doen openen beugel html gesloten beugel.
En dan ga ik preemptively openen en sluiten van de tag.
Waarom?
Gewoon zo denk ik niet later vergeet.
Het is gewoon goede praktijken, zoals het openen en sluiten accolades tegelijk.
>> En wat kwam daarna?
U kunt denken aan de tatoeage.
>> Publiek: Het hoofd.
>> DAVID J MALAN: Het hoofd.
En dan hier, ik had de titel, denk ik.
En de titel was willekeurig, hello, wereld dicht titel.
En dan naar beneden hier, het lichaam, van course-- dan sluiten we de body tag.
En dan gewoon enigszins redundant, Ik had het zelfde ding hier beneden.
>> Dus ik beweren dat dit een webpagina.
Dit is iets dat kon nu live op het web,
hoewel natuurlijk, het is letterlijk wonen op mijn bureaublad nu.
Maar inderdaad, als ik gedit minimaliseren, Ik zie op mijn bureaublad zijn icoon.
Ook al is dit het apparaat, U kan dit doen op Mac OS
zonder TextEdit of Ramen met Notepad zelfs.
>> En als ik ga je gang en dubbelklik dat zelfs, en select-- goed, laten we
niet selecteren omdat Chrome is niet te openen.
Laten we verder gaan en openen Chrome.
En doe dan Command-O voor de open En ga naar mijn bureaublad
en open dat bestand.
Dat is hoe een browser interpreteert HTML, van boven naar beneden, van links naar rechts.
Hey, browser hier is HTML.
Hier is het hoofd.
Hier is de titel.
Hier is het lichaam.
En inderdaad, zo het maakt dat de webpagina.
>> Maar let op de URL.
Niemand van jullie zou kunnen trekken deze specifieke pagina op uw laptops op dit moment,
zelfs de binnenkant van uw apparaat via de URL,
omdat file: // geeft aan dat het eigenlijk op mijn bestandssysteem, mijn harde schijf,
niet de jouwe.
Dus dit is niet zo handig.
>> Laten we nu bewegen in de richting met behulp van een echte web-server.
En het blijkt dat de CS50 Appliance is meer dan alleen een omgeving waarin
kun je C-code schrijven en compileren en voer het uit als je hebt gedaan.
Ook is geprogram- personeel om een ​​typische web vertegenwoordigen
server dat is op het internet, een die je zou betalen voor
of een die in de zogenaamde cloud.
>> En het draait standaard gratis open source
software bijvoorbeeld iets genaamd Apache, die misschien
nog steeds de meest populaire web server software in de wereld
dat duizenden websites vandaag de dag gebruiken.
En het heeft ook zelfs software zoals MySQL,
dat een databaseserver dat we uiteindelijk zullen krijgen,
die alleen zeggen Ik kan gaan behandelen
mijn apparaat als een volwaardige server dat betaal ik niet voor elders.
Het leeft gewoon op mijn eigen laptop voor ontwikkeling en gemak doeleinden.
>> Dus laten we verder gaan en profiteren van deze.
Ik ga om te gaan en open een terminal venster.
En ik ga om verder te gaan en move-- eigenlijk, eerst ben ik
gaan om te navigeren naar mijn bureaublad.
Als ik ls doen, er is hello.html.
En ik ga om te gaan gang en beginnen met
een nieuwe map we hebben niet gebruikt voor vandaag.
>> hello.html-- Ik ga verhuizen naar ../vhosts voor virtuele hosts--
meer daarover in de future-- en vervolgens in een map met de naam localhost,
die de bijnaam bijna elke computer, of het nu een Mac, PC,
of Linux-computer, en vervolgens specifiek in een directory die we,
het personeel al voor u gemaakt wanneer u het apparaat genaamd gedownload
publiek.
En zoals de naam al doet vermoeden, om het even wat Ik zet in deze map, in theorie,
gaat nu publiek ten minste mensen
die een directe verbinding met mijn computer.
>> Dus nu laat ik doorgaan en doen cd om diezelfde directory
zodat ik kan zien wat er er aan de hand en het type ls.
En inderdaad, dat is het enige wat in daar.
Ik eis nu dat, want ik heb dit gezet bestand hello.html binnenkant van een directory
genoemd openbare binnenkant van een directory riep localhost binnenkant van een directory
genaamd vhosts die dankzij CS50 personeel
is vooraf geconfigureerd om te zijn de root van uw webserver,
Ik kan nu hopelijk zal dit doen.
>> Ik ga naar het openen van een nieuw tabblad.
En ik ga om te gaan niet naar bestand: //.
Ik ga werkelijk te gebruiken http / localhost, die
nogmaals, is de bijnaam voor mijn eigen server.
En dan ga ik om te gaan met wat bestandsnaam, alleen maar om duidelijk te zijn?
Waar is dit verhaal waarschijnlijk gaat?
hello.html.
>> Dus met andere woorden, ik wil nu dit is mijn eigen computer, mijn eigen apparaat,
alsof het een echte server.
Zijn bijnaam is localhost.
Maar denk aan localhost als soortgelijke Facebook.com google.com, wat dan ook.
Het is gewoon mijn lokale naam.
En dan is het laatste wat ik wil is in de wortel van de harde schijf, om zo te zeggen,
of de root van de webserver, ergo de slash en dan
de bestandsnaam hello.html.
>> Laat me uitzoomen en druk op Enter.
En inderdaad, er is nu mijn webpagina.
Dus het is iets anders.
En het is net zo underwhelming.
Dit is de oude versie.
Laat me krimpen het lettertype terug.
Dit is de oude.
Dit is de nieuwe.
Maar wat er fundamenteel gebeurt Nu is dat HTTP wordt gebruikt.
>> Laten we dit een beetje meer duidelijk of, als je wil, een beetje ingewikkelder.
Laat me gaan naar rechtsonder bovenhoek van mijn toestel.
En merk op dat dit alles tijd, er is al een aantal.
Dat is het unieke adres van uw CS50 Appliance.
Het is een privé-adres, zoals wordt gesuggereerd door de 172,16,
wat betekent gewoon alleen je fysiek hebt toegang tot deze webserver.
Alles is een firewall en mooi beschermd tegen de rest
van de wereld hierdoor adressering.
>> En merk nu al als ik naar dit adres, niet in mijn toestel,
maar in Mac OS-- ik ga om terug te gaan hier.
Dit is mijn Mac nu.
En nu ga ik om open te stellen deze versie van Chrome hier.
En ik ga naar http: //172.16.25 / En ik vergeet de rest-- 133.
>> Dus ik ga bezoeken uit mijn Mac dat IP-adres /hello.html Enter.
En nu zie ik vanuit mijn Mac dat mijn CS50 Appliance, die is
IP adres dat nummer, wordt inderdaad gedraagt
zoals een webserver op het internet.
Het duurt niet een mooi en makkelijk om te hebben onthouden naam zoals Facebook.com,
maar het is met behulp van HTTP blijkbaar, hoewel Chrome
is een soort van de vereenvoudiging van de wereld voor ons, maar ons niet zien HTTP.
Maar dit is inderdaad precies dat.
Chrome is gewoon besparen sommige toetsaanslagen deze dagen.
En dat is wat we nu zien.
>> Dus dat is allemaal prima en goed.
Maar het is een vrij underwhelming pagina.
Laat me naar binnen gaan en iets te doen een beetje anders nu.
Dus laat me terug gaan naar gedit.
En in plaats van hallo, wereld, laten we een beeld.
En ik beweerde van before-- laat me gaan in mijn localhost directory publiek.
En laat me gaan en een kopie van een hele hoop bestanden van vandaag
uit mijn Dropbox-map in hier.
>> Nu als ik typ ls, kijk al deze bestanden
die ik heb verspreid door de website cursus op voorhand van vandaag,
een daarvan is nog hello.html.
Dus er is die ene.
En herinneren deze dwaze van vorig tijd-- cat.jpg.
Dus laat me proberen te verankeren cat.jpg binnenkant van mijn webpagina.
>> Ik ga om verder te gaan en doe cat.jpg, te redden.
Laat me teruggaan naar Chrome.
En laat me in de zoomen lettertype en nu opnieuw.
Oeps, waar ik dit?
Standby-- Ik heb nog steeds de oude versie van mijn Desktop geopend.
Dus laat me gaan in mijn vhost, mijn localhost, mijn publiek, en hello.html.
Dus nu laat ik doorgaan en zeg cat.jpg binnenkant van het lichaam
waar ik wil dat het is weergegeven en herladen.
Natuurlijk, dit is niet correct.
>> Dus ik moet de browser een beetje vertellen meer bewust wat ik wil dat het doet.
Gewoon typen van de naam is duidelijk onvoldoende.
Zo herinneren dat er nog een tag, beeld, img voor kort.
Dat is gewoon omdat mensen hou niet van het type volledige woorden.
En dan kunnen we de bron doen = "cat.jpg".
>> En nu ga ik doen een ding anders hier.
Hoewel alle onze labels tot nu toe hebben
had dit begrip start-tag en een eind tag,
dat lukt nog niet echt gevoel voor een beeld, toch?
Een beeld is er of niet.
En zo is de mens zijn gekomen up met een eenvoudiger conventie.
Wanneer u een tag die kan zowel beginnen en eindigen op hetzelfde tijd--
het kan leeg zijn, dus om gewoon speak-- zet de slash binnenkant van de tag
helemaal aan het eind.
Nu wil ik terug naar mijn browser.
Klik Reload Verdomme, is er iets mis.
Je hebt dit waarschijnlijk gezien af en toe op het web,
zelfs als het niet jouw schuld is geweest.
Het is de schuld van de webserver.
Wat odes deze lijken erop te wijzen?
Het is gebroken.
Dat is waar het beeld hoort.
Yeah?
>> Publiek: Maar het doet niet hebben toegang tot het beeld.
>> DAVID J MALAN: Het maakt niet hebben toegang tot het beeld.
Dat, of erger, misschien er bestaat niet eens.
Laten we eens kijken of we niet kunnen diagnosticeren dat.
Herinneren van de vorige keer dat als in Chrome, in het apparaat,
of zelfs op uw Mac of pc, ga je naar de Developer menu
en ga naar de Developer Tools optie, die waarschijnlijk je hebt
weinig of nooit gebruikt.
En als ik ga naar netwerk en reload de pagina,
laten we eigenlijk kijken naar de HTTP bewerkingen die worden gemaakt.
>> Het lijkt erop dat hello.html is inderdaad OK, vandaar de 200.
Maar cat.jpg is een 403.
Dus het is niet een 404.
File waarschijnlijk bestaat.
403 betekent verboden.
Dus dit is een beetje verwarrend.
Ik ga om terug te gaan naar mijn terminal venster.
Laat me inzoomen tot hier.
En laat me doen een ls.
Er is diezelfde bestanden.
>> Nu wil ik u een ls-l, die je hebt waarschijnlijk
eerder gebruikt om te kijken naar het bestand maten misschien of timestamps.
En we zien een hele hoop overweldigende informatie.
Maar let op een paar details.
Hier is hello.html in deze rij hier en hier is cat.jpg.
En het is gewoon het apparaat dat gebruiksvriendelijk door te wijzen op JPEG's
in paars als deze.
Maar wat anders is naast de bestandsgrootte en de naam van het bestand?
>> Publiek: [onverstaanbaar].
DAVID J MALAN: Ja, er is nog twee R's hier.
Let op wat hello.html is er aan de hand.
Zo blijkt het dat de naam deze directory publiek is belangrijk.
Alles wat in deze map wordt bedoeld publiek.
Maar het is niet voldoende gewoon, bestanden in daar.
Je moet ook veranderen de wijze van de bestanden,
verander de permissies van het bestand naar proactief niet
zijn de standaardinstelling, en dat is dat ik alleen kan lezen
en schrijf het, ik zijnde de eigenaar.
Ik wil dat de hele wereld iedereen in staat zijn om mijn dossier te lezen, om zo te zeggen.
Lees betekent gewoon bekijken.
>> En inderdaad, zoals u zult zien in probleem stelde zeven, dat is wat de gemiddelde deze R's.
Deze twee R's gemiddelde laat iedereen anders in de wereld te lezen het ook,
zeker nu het is in deze map.
Dus de eenvoudigste manier om dit op te lossen is om ga naar mijn prompt en doe chmod voor verandering
modus en doe dan een + r, helemaal, iedereen, alles, plus r voor lezen,
en dan cat.jpg Enter.
Niets lijkt te gebeuren, welke betekent meestal een goede zaak.
Dus ls-l again-- nu Laten we eens kijken naar cat.jpg.
En deze toestemming lijken te zijn veranderd.
Even terzijde, als je een fout en je, bijvoorbeeld,
zojuist uw-- ik niet weten-- essay publiekelijk toegankelijke door een ongeval,
kunt u het tegenovergestelde doen, chmod a-r.
Hoewel eerlijk gezegd, het moet niet zijn in de publieke directory
toch als dat de zorg.
>> Dus laten we nu teruggaan naar mijn browser en reload.
En ik ga klikken de kleine Ghostbusters
symbool dat deel van het wissen scherm, zodat we kunnen nieuwe aanvragen zien.
En inderdaad, hier is Grump Kat van voor.
Maar wat nog belangrijker is, technisch, er
nr 200, die betekent dat we het OK.
Oké, dus dat is allemaal prima en goed.
Maar we zijn niet het maken van het beste van websites,
noch gaan we te hard om te proberen maken de chicste van websites vandaag.
Maar laten we in ieder geval iets te doen super vertrouwd voordat ratelende
off een paar andere labels.
Dus stel ik wil niet alleen een kat hier.
Stel dat ik eigenlijk dit wil kat om te linken naar iets.
>> Ik zou kunnen, bijvoorbeeld iets als dit te doen.
een voor anker href voor hyper verwijzing equals--
en laten we gewoon iets doen zoals www.google.com dicht
citeer dicht beugel.
En nu zoeken naar katten.
Sluiten anchor tag.
Dit heeft dus slechts één soort van fundamenteel nieuw detail.
De tag natuurlijk anders.
Het is de naam van een voor anker href of hyper referentie.
>> Maar nog belangrijker, er is Deze syntactische functie hier.
Dit is wat we beginnen te bellen niet een tag, maar een attribuut.
En een attribuut is iets dat wijzigt het gedrag van een tag.
En dit attribuut, href, middelen het gedrag van dit anker te wijzigen
zodat wanneer het wordt geklikt, het gaat om deze URL hier.
En natuurlijk, die URL is Google.
>> Ondertussen, wat is dit tekst hier zal worden?
Nou, dat gaat worden Wat de werkelijk menselijke
ziet als het onderstreepte koppeling, zo simpel is dat.
Dus laten we dit proberen.
Laat ik sla het op.
Ik ben nog steeds in hello.html.
Maar in de versies online, zult u zien de werkelijke bestandsnamen we pre-voorbereid.
Laat me gaan en herladen.
En nu is het een zeer underwhelming pagina nog steeds.
Maar als ik de muis boven er-- en het is een beetje klein,
maar-- je kunt zien in de bodem linker bovenhoek van het scherm,
het is inderdaad gaat om google.com.
En als ik dat klikt, zal het klop me weg naar de werkelijke Google.
>> Maar merk hier een kans voor uitbuiting, net als een terzijde.
En we komen terug naar andere komen kwesties van veiligheid voordat lang.
Want er is deze tweedeling tussen waar je heen gaat en wat je zegt,
je kon iets doen als dit-- http://www.google.com.
OK, en nu als ik herladen na het opslaan van die pagina,
het lijkt erop dat ik ga om te gaan naar Google.
Maar er is geen reden dat ik moeten gaan naar Google, toch?
Ik zou eigenlijk naar iets als badguy.com, herlaad de pagina hier.
En let op, het ziet er nog steeds als Google.
En alleen als ik scherp genoeg hier boven te zweven
zie ik het is zelfs naar naar een andere locatie.
>> Dus als je ooit hebt gekregen een e-mail, in het bijzonder
één van Paypal, of schijnbaar van Paypal
waarin u wordt gevraagd om in te loggen om uw account, dit
Daarom moet je nooit ooit op koppelingen in e-mails,
eerlijk gezegd, geen links in e-mails.
Als je weet dat je daadwerkelijk hebt geld in Paypal of Bank
van Amerika of Fidelity of enige website, handmatig typt u deze in.
Want kijk eens hoe gemakkelijk het is om truc iemand in het presenteren van wat
ziet eruit als een link.
Maar het kon eigenlijk ga absoluut overal.
>> En er is veel groter bedreigingen dan dit.
In feite is dit een beetje van een raaklijn nu maar één
van de beste die ik ooit heb gezien die inmiddels is gesloten,
is iemand leidde mensen to-- dus dit zou kunnen zeggen,
Klik hier om in te loggen in uw rekening, een bankrekening.
En dit was Bank of the West.
>> Dus iemand kocht deze.
En het is een beetje makkelijker om te zien het in een mono-spaced 'lettertype ingezoomd
in op een 30-voet projector.
Maar als het is klein lettertype in een e-mail die u ontvangt,
dit ziet eruit als bankofthewest.com, niet bankofthevvest.com,
die iemand had betaald $ 10 te kopen.
Vervolgens leidde dit hen naar de equivalent van een aantal slechte website.
>> En je zult zien too-- eigenlijk kunnen we doen dit-- als ik naar de eigenlijke website,
bankofthewest.com, weer, recall van de vorige keer
dat als dit is hun webpagina en je benieuwd hoe het werkt bent,
je kunt zeker naar Chrome developer tools.
En u kunt al het zien HTML er netjes opgemaakt.
>> Maar meer to the point, je cam-- laten sluiten
dit-- je kunt gaan naar Beeld Developer Bron weergeven.
Waarom heb ik niet gewoon kopiëren dat alles En toen ik
kan gaan in mijn kleine gedit venster hier en maak mijn eigen webpagina.
Bewaar deze in hello.html.
En waarschijnlijk dit gaat breken, want het is niet zo gemakkelijk gewoonlijk.
Maar nu als ik herlaad mijn eigen pagina op Mijn eigen CS50 Appliance en raakte reload,
OK, wat spullen kapot.
Maar ik ben er vrij dicht bij het hebben van mijn eigen banking website, toch?
Dit alles HTML--
>> [Lachen]
>> DAVID J MALAN: --Ik niet actually-- en je
weet er iemand zijn die zou eigenlijk op deze links ook.
Zo duidelijk, wat spullen kapot.
Maar dat gaat leiden ons in een discussie,
onnodig op dit moment, met betrekking tot wat CSS, cascading style sheets, zijn,
en hoe je eigenlijk download dan de andere HTML-bestanden
en JPEG-bestanden GIF-bestanden die de website zouden kunnen worden gebruikt.
Maar dat alles is accomplishable.
Maar het is echt neer op deze zeer eenvoudige heuristiek.
>> Dus nu laten we gewoon doorlopen een aantal andere voorbeelden van HTML
alleen maar om u een idee te geven van wat je nog kunt doen.
Zo, dit is list.html.
Neem nu dat je een webpagina maken met een lijst van de huizen in de quad.
Ik zou de ul-tag te gebruiken voor niet-geordende lijst en de lijst-item kind
en dan herhalen over-- of lijst, rather-- de huizen in kwestie.
>> En als ik open dit op, laten we dit doen.
Laten we gaan niet naar hello.html, maar om list.html.
Verdomme.
Hoe kan ik dit oplossen?
Het is hetzelfde probleem als voorheen, toch?
Dus laat me doen chmod-- oops-- chmod a + r van list.html.
En nu als ik ga terug naar mijn browser en klik op Reload, daar is het.
Dus als je ooit hebt willen maken een lijst met opsommingstekens, kunt u dat doen.
Wilt u super luxe te zijn en een geordende lijst, niet een ongeordende lijst,
veranderen die aan ol, herlaad de pagina, en nu de browser zal het nummer voor u.
>> Wat kunnen we anders doen?
Nou, een paar others-- indien je hebt lange alinea van text--
bijvoorbeeld sommige Latijnse tekst zoals dit--
en u wilt het in aparte paragrafen, geopend p, dicht p voor de paragraaf tag.
En doe het opnieuw en opnieuw.
En als ik het nu open te stellen dit bestand, paragraphs.html, nou, dit
wordt steeds vervelend.
Dus nu laten we gewoon terug naar mijn prompt, chmod a + r r ster .html--
een leuk klein wild card om zo te zeggen.
Het moet allemaal op te lossen deze problemen voor mij.
Laten we het herladen.
Er zijn drie paragrafen.
>> En nu laten we gaan vooruit en het openstellen van een andere.
Wat dacht je van tafel?
U zult tafel looks merken een beetje ingewikkelder.
Maar het is hetzelfde idea-- geopend tag open tag,
geopend, open, openen, sluiten tag open tag.
En deze toevallig voor te staan tafel, waarvan de grens is blijkbaar
gaat een dikte 1-- wat dat means-- tafel rij, tafel
gegevens, waardoor een cel.
En als ik ga terug naar mijn browser hier en ga naar table.html,
kun je iets zien als dit, afschuwelijk.
Maar we zullen naar het punt te krijgen waar we kunnen eigenlijk
maken dingen mooier dan dat.
>> Dus laat mij bepalen voor nu.
Er is trossen van meer tags.
En HTML is prachtig om te halen want, eerlijk gezegd, alles wat je hoeft te doen
is kijken naar bestaande webpagina's waarmee je bekend bent.
En je bent zoals, oh, dat is hoe zij deden dit esthetisch.
>> Of u kunt kijken op elke online middelen hoe HTML werkt,
en je zult zien dat er een hele vocabulaire van andere labels.
Maar met de eenvoudige mentale model alleen dat bijna elke tag die u opent
moet worden afgesloten, echt doet voldoende om zichzelf te leren
HTML na begrijpen deze fundamentele ideeën van labels
en attributen en de welgevormdheidsregels dat we het over gehad hebben,
sluiten van iets dat we zouden kunnen openen zodat we niet verwarren een browser.
Dus laten we nu dit naar een interessanter niveau
door naar de eigenlijke.
En laten we naar mijn Mac hier, naar google.com.
En nu notice-- laten we dit doen.
Ik gong naar Instellingen, Search Settings.
Ik wil dat dit vervelend moment uit te schakelen resultaten ding waar het onmiddellijk
begint te spelen op uw het typen.
Laten we dit de oudere school, zodat we echt zien wat er gaande is.
>> Dus ik ga sparen mijn Google instellingen hier.
En nu notice-- ik ga zoeken naar iets als katten.
En het is nog steeds auto doet hier volledig, maar op basis van de dingen
mensen in het verleden hebben getypt.
Maar let op wat er gaat gebeuren.
>> In het URL momenteel is dit, gewoon google.com.
En technisch, het is slash.
Google is gewoon het opslaan van een karakter en ons dat niet laten zien.
Zij tonen ons https, net super geruststellend dat we zijn
op een beveiligde of versleutelde pagina.
>> Dus laat me gaan en zoeken naar katten.
Nu kreeg dit echt overweldigend snel.
Kijk naar de lengte van deze URL.
Maar het blijkt dat de meeste van dit spul in de URL is eigenlijk vrij nutteloos.
Ik ga om te beginnen het schrappen dingen die ik niet begrijp.
Ik zie katten.
Ik begrijp katten.
Ik weet niet waarom katten zijn er weer.
Ik weet het echt niet wat dit onzin is.
Dus ik ga gewoon blijven markeren en verwijderen stuff
dat begrijp ik niet, destilleren van de URL in alleen deze.
>> Laat me nu krijg voeren opnieuw.
Het lijkt erop dat Google nog steeds werkt.
Dus om wat voor reden, ze zijn het toevoegen van een veel dingen om standaard hun URL.
Maar het is niet strikt noodzakelijk.
Dus wat leuk is over dit?
Nou, laat me gaan en openstellen van Chrome Inspector.
Er is een kleine muis snelkoppeling voor.
>> Ga naar het tabblad Netwerk.
En nu laat ik herladen Deze pagina opnieuw.
En ik houd Shift.
Even terzijde, browsers de neiging om te cachen of opslaan
informatie gewoon omwille van de efficiëntie van.
Maar meestal, houdt Shift en herladen zal alles dwingen
om opnieuw te beginnen vanaf het begin.
En dat is wat ik hier wil doen.
>> En merk op al deze rijen die net verschenen.
Het blijkt dat in een bepaalde web pagina, kan er slechts één bestand
involved-- hello.html-- of er misschien 52, zoals in dit geval.
Toen ik bezoek google.com, blijkbaar, mijn browser
start 52 afzonderlijke HTTP-verzoeken.
Waarom is dat?
>> Nou, kijk naar wat er in zit van deze webpagina up top.
Er is niet alleen tekst, maar er is werkelijke beelden
katten naar rechts.
Er is een kleurrijke logo hier links.
Er is al deze iconen een microfoon enz.
Er is een hoop stukken, het bouwen van blokken, scratch stukken, als je wil,
naar deze webpagina.
En wat de browser doet op om het eerste bestand, dat
is deze rij hier, het is in wezen itereren over de HTML-top
naar beneden, links naar rechts, naar dingen als image-tags of andere labels
die zijn het vermelden andere bestanden en wanneer hij ze ziet, gaat en haalt hen
via HTTP, levensvatbare hele envelop metafoor,
en dan geeft ze weer in de geschikte locatie in de webpagina.
>> Maar let hier als ik mij richten op de eerste worp, zoeken katten,
merken dat, inderdaad het is met HTTP 1.1.
En helaas, Google Chrome nu in versie 39
is soort vervlakking dingen naar beneden en niet die ons de werkelijke headers.
Maar wat was inderdaad verzonden is een verzoek voor niet slash, maar / search? q = katten.
>> Nu, waarom is dat belangrijk?
Nou, ik ga afleiden hieruit dat als je Google
steunt vragen van dit formulier, waarom denk ik niet mijn eigen zoektocht te implementeren
motor voor CS50, maar gewoon de voorkant end, alleen de grafische user interface.
En we zullen de back-end uit te besteden, de werkelijke zoekresultaten bij Google.
>> Dus hoe kan ik dit doen?
Nou, laat me gaan in gedit hier.
En laat me gaan en openen up, laten we zeggen, een nieuw bestand.
En ik ga dit redden tijdelijk als search-0.html.
En dan uiteindelijk, zullen we snel uit naar degene die ik pre-voorbereid.
>> En ik ga snel zweep up type doc
html geopend beugel html dicht beugel html.
Dan ga ik naar het hoofd doen dicht hoofd geopend titel CS50
Zoek in plaats van Google search.
Hierna ga ik hebben het lichaam, hier beneden dicht lichaam.
En nu moet ik CS50 zoeken.
En eigenlijk, laten we bouwen dit stapsgewijs.
Ik ga om te gaan en sluit deze en eigenlijk zet het in mijn openbare map.
Dus geef me maar een ogenblik.
search-0.html-- ik ga temporeel noemen het search.html.
Ik ga het chmod a + r search.html.
En nu ga ik om het te openen.
Oké, dus dat was snel.
Maar het doel was gewoon om ons naar het punt
van het hebben van deze tekst bestand genaamd search.html.
Dus niet veel om naar te kijken maar toch.
Sterker nog, als ik naar mijn browser, en ga naar search.html, dat is alles wat het is.
Maar weet je wat?
Ik kan een beetje liefhebber.
Ik las in een boek dat er is een titel tag genaamd h1.
En ik ga om verder te gaan en gebruiken die geopend h1 en dicht h1.
Reload de pagina.
En nu is het groter en opvallender, niet zo interessant,
maar ten minste het structureel interessanter.
Maar nu wil ik een andere tag invoeren.
Het blijkt dat er een form tag.
En laat mij sluiten die tag.
En het blijkt dat er's een input-tag die
heeft een attribuut type, dat is het gegevenstype van het veld,
als je wil.
En gaat van het type tekst te zijn.
En de waarde ervan gaat om CS50 Search.
Sluiten tag.
En er zullen er geen notie van te zijn het openen en sluiten met tags te scheiden.
>> Laat me terug te gaan hier en zien wat er gaande is, opnieuw te laden.
Getting interessant.
Het ziet eruit alsof het een tekstveld.
En eigenlijk wilde ik niet tot een waarde nog daar te zetten.
Laat me hier terug te gaan en daadwerkelijk krijgen ontdoen van deze waarde om het simpel te houden.
In plaats van een waarde, wat ik wilde om dit ding te geven was een naam.
En ik weet niet wat het is, dus ik zal hierop terugkomen.
>> Maar onder dat, ik wil om input type = submit doen.
En deze waarde zal zijn CS50 Search.
En we zullen zien waarom ik verplaatst de waarde aan.
Toen ik herladen, ik schijn nu het begin van mijn eigen zoektocht
motor, super afschuwelijk, maar eerlijk gezegd, het is
niet een ver afstand van wat Google's standaard pagina eruit ziet.
>> Als ik ga hier nu, kan ik typ in katten en hopelijk klik op Zoeken.
Maar ik ben nog niet klaar, want ik heb niet geïmplementeerd,
uiteraard een database.
Ik heb niet kroop de web voor zoekresultaten.
Dus ik moet uitbesteden die naar Google.
Dus hoe kan ik dit doen?
>> Nou, allereerst wil ik actie moeten voegen en
toeschrijven aan mijn vorm tag die is http://www.google.com/search.
En ik weet dat alleen van het hebben van afgeleid door nauw kijken
bij hun URL's.
En nu neem een ​​gok.
Wat moet dit tekstveld waarschijnlijk worden genoemd, afhankelijk van waar we kwamen
van voor?
>> Publiek:? Q.
>> DAVID J MALAN:? Q.
En we eigenlijk niet vraag hebt markeren het blijkt, maar q is inderdaad het,
q voor de zoekopdracht waarschijnlijk door standaard, gewoon omdat dat is
wat Larry en Sergey kwam met jaren geleden.
Dus nu laat ik herlaad deze pagina.
Het maakt niet zo heel verschillend uitzien.
Maar nu kijk wat er gebeurt.
>> Als ik typ in katten en klik CS50 Zoek en laten gaan,
merk ik word meegetroond weg naar werkelijke Google.
Nu, Google is een beetje vervelend in dat ze
het toevoegen van een extra parameter, als je wil, naar de URL.
Dat is alles happening automatisch op Google kant.
>> Het belangrijkste is dat ik schijn hier dit verzoek te hebben gegenereerd.
En inderdaad, dat is wat er gebeurt.
Wanneer u HTML dat ziet er zo uit, dit
is een soort van web-ontwikkelaars notatie voor te zeggen, ga je gang en maak een vorm
dat wanneer het wordt ingediend, het gaat om naar deze URL.
En als de URL heeft verstrekt waarden voor dingen als q,
ga niet alleen naar deze URL.
Eigenlijk, ga naar vraag mark en dan q = katten.
Voeg de parameter, de HTTP parameter als dat.
>> En alleen maar om super precies te zijn, wat er wordt afgeleid hier--
maar ik zal meer explicit-- is dat de methode die ik wil gebruiken
is te krijgen, in plaats van iets als post, die we uiteindelijk zullen zien.
Dus in het kort, gewoon door te begrijpen HTML en het gebruik van een aantal vrij eenvoudige tags
kunnen we nu gaan creëren onze eigen front-end gebruiker
interface zoekopdracht motor erachter.
>> Maar dit is natuurlijk vrij afschuwelijk.
Dus laat me eigenlijk open een iets betere versie.
Dit is degene die ik bereid in vooruit dat is voorzien van commentaar.
Maar je zult zien dat ik vrij veel ontspande het.
Dus dit is nu al online beschikbaar.
En ik heb toevallig preemptively ga naar https alleen maar om het simpel te houden.
>> En nu laten we het openen van een volgende iteratie van.
Is versie 1 in plaats van 0.
Wat springt op je af als iets verschillende in dit voorbeeld?
>> Publiek: [onverstaanbaar].
>> Ja, er is deze tekst align center.
Dit is een beetje raar hier.
Maar dit is inderdaad nieuw.
En misschien raden wat er gaat gebeuren.
Als ik naar mijn browser nu en bezoek search-1.html,
het is bijna hetzelfde.
Maar het is een stap dichter bij een beetje meer vrij.
Het is nog steeds lelijk, maar mooier in dat tenminste alles is nu gecentreerd.
>> Zo blijkt het dat wat ik gebruik wordt een andere taal helemaal genaamd
CSS, cascading style sheets.
En CSS, eerlijk gezegd, is een soort van, in mijn persoonlijke mening,
een gruwelijk ontworpen taal.
Het is erg vervelend te onthouden de verschillende details.
Maar het is wat stileert de hele wereldwijde web vandaag.
Ik beledigd iemand.
Prima.
Dus laten we terug te gaan hier en zie hoe we eigenlijk met behulp van deze.
En het blijkt, althans het is eigenlijk een vrij eenvoudige taal.
Het is gewoon sleutel waarde paren, eigenschappen en waarden, eigenschappen en waarden.
Inderdaad, hier is een dergelijke eigenschap en waarde.
>> Gewoon met behulp van de stijl attribuut op mijn lichaam tag
en het een waarde van een woord dikke darm en een ander woord,
of een eigenschap en een waarde, Ik kan beïnvloeden de esthetiek
van de webpagina, niet se maar de structuur
maar de esthetiek van het.
En net door Googlen rond, ik realiseer dat CSS, cascading style sheets,
ondersteunt een eigenschap genaamd text-align, waarvan de waarde kan
worden overgelaten, rechts of midden, bijvoorbeeld.
>> Dus als ik nu herlaad deze pagina, wat ik kreeg
was een gecentreerde pagina, maar nog steeds vrij lelijk.
Laten we verder gaan en openen up versie 2 van Search.
En nu merk ik heb een beetje meer gedaan.
Merk op dat hier binnenkant van het hoofd tag, kan er meer dan titel.
In feite is er een stijl tag.
En dit is waar het wordt gewoon een beetje rommelig seeing CSS soms.
>> Merk op dat ik schijn iets te hebben die structureel ziet er heel anders uit.
Maar hier is de naam van de tag Ik wil gestileerd.
Hier zijn onze oude vrienden krullend braces en gesloten accolade.
En dan is hier dat eigendom en de waarde ervan.
>> Als ik dit bestand te laden, search2.html, het eindresultaat identiek.
Maar het is een stap in de richting van een beter ontwerp.
Door factoring uit deze CSS, ik heb niet vermengd mijn HTML.
En inderdaad, zoals we zullen zien, ik kon hergebruiken deze eigenschappen en waarden.
Als ik wilde trossen van maken delen van mijn web pagina gecentreerd,
Ik hoef niet te style = text-align typt centrum all over the place.
Ik kan op een plaats zetten misschien graag op naar de top.
>> Maar zelfs dit is niet de beste ontwerp.
In feite, een van de dingen die je leert als je meer en meer tijd doorbrengen met
web programmeren is dat hoe meer je kunt modularizeren dingen en factor dingen uit
zoals .h bestanden laat ons factor spullen uit, graag helpers.c laat ons factor dingen uit
een paar psets geleden.
Op dezelfde manier zouden we Om dit te bereiken.
>> Dus bericht in versie drie van search.html Ik heb
opgeruimd het hoofd van de pagina en zet
in deze, een link-tag, die in tegenstelling tot de naam,
geeft je niet een hyperlink.
Het verbindt aan een ander bestand door middel van een href waarvan de waarde in dit geval,
is search-3.css
Dus ik besef dat we snel gaan.
Maar alles wat ik doe is een soort van bewegende dingen rond.
Laat me Open Search-3.css.
Daar is het, niets echt aan.
Ik gewoon gekopieerd en geplakt in een nieuwe bestand, net zoals we meegenomen spullen uit
in andere bestanden voor.
En de result-- volledig underwhelming--
zal precies hetzelfde.
Maar we gaan verhuizen toward-- nee, het is niet.
Oh, ik weet waarom.
>> Dus het lijkt een bug te zijn.
En het is in zekere zin.
Maar laat ik open mijn tabblad Netwerk.
Laat me de pagina geladen is.
Ach, waarom is de CSS niet wordt toegepast?
Nou, het CSS-bestand, op dezelfde manier, heeft iedereen leesbaar te zijn, om zo te zeggen.
En het ook is momenteel verboden.
Dus laat me een chmod a + r doen van ster dot CSS-- whoops--
we zijn dot CSS is gewoon de bestandsextensie voor CSS-bestanden.
Laat me nu terug te gaan naar mijn browser en reload.
OK, een beetje beter.
>> Nu laat me doen een laatste ding.
In search-4.html.
Ik heb een versie die ik dacht was veel koeler, zij het veel meer
ingewikkeld.
Laten we eens kijken naar het resultaat als eerste.
Sluit dit aan ons meer ruimte te geven.
Wijzig deze om te zoeken-4, Enter.
>> En nu een hoop dingen zijn gebroken.
Ik ga om terug te gaan in mijn directory hier.
En nu ben ik gewoon gaan doen een chmod van een + r op een file--
omdat ik weet dat exists-- genoemd logo.gif, dat een beeld.
En nu herladen.
En wow-- nu dus ik ben aardig in de buurt, eerlijk gezegd,
om net als de versie van Google 1999, en eerlijk gezegd, de 2014 versie van Google,
toch?
>> Dus het is nu naar hun website, uiteindelijk, als ik zoek naar katten.
En inderdaad het is.
Maar wat heb ik anders doen in deze versie 4?
Zodat we niet te veel hier verder op ingaan.
U zult dit zien in probleem stelde zeven uiteindelijk.
Maar merk ik deed een paar dingen.
>> Ik een div geïntroduceerd tag, die divisie,
in dezelfde geest om een ​​paragraaf tag.
Maar een scheiding is net als, hier is een rechthoekig onzichtbare gebied
van het scherm.
Laten we het een unieke identifier, een voettekst, net
zodat we kunnen praten over het in onze HTML elders.
Hier is nog een div van de pagina wiens ID zal tevreden zijn.
Het is de inhoud van de pagina.
En hier is de header van de pagina.
>> Met andere woorden, ik heb wezen in HTML ben mentaal
het bekijken van deze webpagina als drie componenten, een header
hier met deze onzichtbare rechthoek, de inhoud in het midden, en dan
de voettekst beneden, zelfs hoewel we die dingen niet zien.
Want ik wil in mijn hoofd van pagina hier, of in een CSS-bestand,
Ik kan deze syntaxis gebruiken.
>> Header is niet een tag.
Het is een code blijkt erop dat door het doen van #header,
Ik kan nu van toepassing van één of meer eigenschappen aan de header.
Ik kan dezelfde inhoud te doen, hetzelfde voor de inhoud hier.
>> Dus bijvoorbeeld in de footer, bericht al deze eigenschappen Ik voeg.
En ik weet dat ze bestaan ​​alleen door het lezen omhoog op de documentatie voor CSS.
Lettergrootte gaat smaller-- te zijn dus sommige relatieve lettergrootte.
Het gewicht zal vet worden.
Margin-- hoeveel pixels rond het-- is 20 pixels.
En het zal worden gecentreerd.
>> Maar op dit moment, de pagina ziet er als volgt uit.
Als ik ben niet blij met mijn exemplaar daar,
Ik kon iets als kleur rood doen.
En dan kan ik dit redden, herladen, en nu heb ik de voettekst gestileerd.
Dus dit is gewoon zinspeelde op de kracht van wat u kunt doen in een webpagina
om dingen te veranderen rond.
>> En nog cooler dan dit, als je wilt om rond te porren met de werkelijke websites,
kun je permanent niet te veranderen.
Maar als ik het openstellen Chrome Inspector weer
en ik ga niet naar de linkerkant hier, dat Facebook de HTML laat zien,
maar toont rechts kant al haar CSS,
kunt u of en dingen veranderen op de vlieg.
Dus laat me ga je gang en doe dit.
>> Laat me ga je gang en controle Klik op deze willekeurig woord hier,
ondertekenen, en klik Inspect Element.
Chrome zeer gunstig springt naar de h1-tag die Facebook gebruikt.
En let hier Facebook heeft soort lui
hard gecodeerd lettergrootte als een woning hier.
>> Dus het koele ding is dat als ik hier eigenlijk gaan in
en zeggen: oh, Facebook, ik hou niet van dat 64 pixels, kunnen we nu veranderen Facebook.
Natuurlijk, we zijn alleen te veranderen voor mij persoonlijk op dit moment.
Maar dit is gewoon een andere hulpmiddel in onze tool kit
dat gaat ons in staat om te tweaken en erachter te komen en ook te diagnosticeren
problemen in onze eigen webpagina's.
En we konden evenzo gaan over Hier, hetgeen hetzelfde.
Als je echt wilt leren fancy, ik bedoel, nu kan je echt muteren de pagina
en doen gekke dingen.
>> Dus waarom is dit alles nuttig?
Nou ja, uiteindelijk zijn we gaat te willen zijn
in staat om webpagina's te maken die worden gedreven door onze eigen achterkanten,
niet door alleen Google en het uitbesteden van de back-end daar.
We willen eigenlijk de waar, bijvoorbeeld,
van actie onze zoekmachine toeschrijven aan niet anders te gaan naar iemand,
maar om iets als search.php, waar search.php is op onze eigen server,
niet op iemand anders.
>> En dus om er te komen, we eigenlijk nodig hebt om een ​​nieuwe taal te introduceren.
Dus we hebben al gekeken naar een nieuwe taal hier, of twee echt, HTML
en CSS.
Maar ze zijn echt gewoon structurele en esthetische talen.
Ze zijn niet te programmeren talen per se.
En dat is ongeveer net zo veel formele tijd zoals we zullen besteden.
Omdat we nu beginnen om de overgang naar PHP.
>> Dus PHP is een daadwerkelijke programmeertaal.
Het is een scripttaal in de zin dat het
bedoeld lichter gewicht dan iets als C.
En het is een geïnterpreteerde taal, wat betekent dat het niet gecompileerd.
Dus in een notendop, wat deed het betekenen wanneer we een taal als C gebruikt
en we hadden om het te compileren?
Wat betekent het om C-broncode te compileren?
Publiek: [onverstaanbaar].
DAVID J MALAN: Zeg het nog eens?
Publiek: [onverstaanbaar].
DAVID J MALAN: Perfect.
Het verandert het in binaire.
Het verandert het in nullen en enen van de werkelijke Engels-achtige broncode.
En dan kunnen we eigenlijk lopen die nullen en enen
door ze door de CPU door te dubbelklikken op een pictogram
of het uitvoeren van een opdracht.
>> PHP en Python en Ruby en Perl en JavaScript
en trossen van andere talen worden geïnterpreteerd
taal wil zeggen je hoeft ze niet te compileren.
Integendeel, je ze voeden als input voor een programma met de naam van een tolk.
En dat tolk, die iemand anders heeft geschreven,
leest de bron-code van boven naar beneden, van links naar rechts en net interpreteert
die lijnen en doet wat je zegt.
>> Dus als je geconfronteerd met een lijn die lettertjes staat,
Het hoeft niet per se om te zetten druk de overeenkomstige nullen en enen.
Het heeft alleen deze tolk als een grote als voorwaarde dat zegt,
als instructie programmeur is print, doe dan het volgende.
Interpreteert het zo gewoon door soort redeneringen
door wat je hem vertelt te doen.
>> En PHP is een van deze talen.
En PHP jaar geleden werd ontworpen Juist voor web programmeren.
Het was aanvankelijk erg slordig rommelig taal.
En inderdaad, er is een enorme hoeveelheid slechte PHP-code die er zijn.
Maar de taal zelf heeft gerijpt door de jaren heen,
zozeer zelfs dat nu is eigenlijk een prachtige volgende stap
pedagogisch uit C, want het is zo verdomd bekend voor alles
je net hebt gezien in de afgelopen weken.
>> De ene aanvankelijke verschil zien we wel is er geen belangrijke functie meer.
Wanneer u het schrijven van code start, het is gewoon gaat krijgen geëxecuteerd er ook gebeurt,
zoals we zullen zien in een moment.
Ondertussen, hier is wat een variabele eruit ziet in PHP.
Het is een beetje anders, maar nauwelijks.
>> In PHP, is er niet sterk te typen.
Er is week te typen, wat betekent dat er gewoon
zijn data types zoals strings en nummers en andere dingen.
Maar je hoeft niet lastig te specificeren wat ze zijn niet meer.
PHP cijfers het uit voor je.
Het dollarteken is gewoon een beslissing dat de PHP mensen maakten jaren
geleden zodanig dat elke variabele in PHP net begint met een dollarteken.
Het is eigenlijk wel handig in dat het springt uit bij u een beetje meer.
>> Maar na dat, dit is een aandoening in PHP.
Wat is er anders ten opzichte van C?
Trick question-- niets, dat is eigenlijk heel leuk.
Booleaanse expressies in PHP-- hetzelfde.
Booleaanse uitdrukkingen met en versus of, switches, lussen, lussen, loops-- OK,
Dit is anders.
>> Dus het blijkt dat er een paar andere functies in PHP.
Eén van hen is eigenlijk dit, die heerlijk handig.
Als $ getallen is een array die je hebt eerder in een programma worden aangemeld,
je hebt deze voorliefde voor elk construct dat in plaats van dat te doen
vervelende I gelijk is aan 0, I is minder dan dit, [? I ++?],
voor elke getallen als getal, waarbij elke van die dollarteken waarden is gewoon
een variabele, en deze je kunt bedenken als I.
Je zou het wat je wilt bellen.
Ik belde het nummer.
Dit gaat om meer dan herhalen de array gebelde nummers.
En elke iteratie, het gaat automatisch bij te werken
voor je het dollarteken nummer variabele zodat je constant
hebben toegang tot de variabele die u wilt zonder enige vierkante haak doen
notatie of indexeren in een array.
>> Buiten dat, we hebben zelfs dingen als arrays, die bijna hetzelfde uitzien,
behalve dat het heel gebruikelijk, zoals we zullen te zien, zowel in PHP en JavaScript
vooraf initialiseren een array met behulp van vierkante haken.
C maakt gebruik van accolades.
Dus het is iets anders, hoewel we hebben niet echt die truc veel.
>> Maar misschien nog krachtiger, PHP heeft associatieve arrays,
dat is een mooie manier om zeggen hash tabellen.
In feite, als je wilt om een ​​hash te verklaren tabel in PHP, in tegenstelling tot in C-- hoeveel
regels code duurde het om daadwerkelijk implementeren van een hash table in C?
Of hoeveel regels code is het het nemen van de implementatie van een hash table in C?
Dus het is waarschijnlijk een stuk, toch?
Het is een paar dozijn, misschien 100 of 200.
Het is moeilijk te raden.
Of het gaat over te zijn, als U zult al snel zien, niet-triviale
een hash table implementeren [Onverstaanbaar] en ook een keer te proberen.
Maar in PHP-- en eerlijk gezegd, ik Waarschijnlijk moet je niet vertellen
totdat Monday-- in PHP, indien je wilt een tafel, klaar.
Dat is een hash table-- zo met een regel code.
En
>> Een groot aantal andere talen dat doen.
Veel plezier met pset vijf.
Dus een groot aantal andere talen doen dit.
Ze geven je deze abstracties dat andere mensen, andere programmeurs,
hebben gecreëerd voor u, zodat U kunt op hun schouders staan
en beginnen met ideeën die zijn super meeslepend, zoals hash tabellen en bomen
en probeert.
Maar je hoeft niet per se te implementeren die dingen zelf.
>> En dus uiteindelijk, wat we gaan om PHP te gebruiken voor
wordt mogelijk het schrijven van programma's van de zogenaamde command line.
Konden we elk programma opnieuw we hebben dit semester geschreven tot nu toe,
behalve misschien Breakout die SPL gebruikt, die specifiek is C op dit moment.
Maar elke andere probleem stellen, zeker Mario en Caesar
en Vigenere en [? Crack?] En verder, we
kon opnieuw te implementeren in PHP, en waarschijnlijk iets makkelijker.
>> Maar wat we uiteindelijk gaan om PHP te gebruiken voor is web programmeren.
En we gaan introduceren volgende week een mentaal model, een paradigma genoemd
MVC, model view controller, die, als je hebt gedaan programmeren
voordat in Python of Ruby of elders, u
zouden weten van dit team met Rails en Django en dergelijke.
Maar als je nieuw bent dit ook, zie je
dat dit eigenlijk een heel natuurlijke uitbreiding van de factorisatie
en de soort van het ontwerp van de code die we hebben
gedaan in C. We gaan nu gelden een aantal van die lessen aan PHP
zodat uiteindelijk wij de implementatie van onze eigen websites.
En als je een soort van gebiologeerd of verbaasd
dat we gaan doen alle zo snel
beseffen dat bijna elke semester, bijna 90%
van studenten CS50, waaronder die die nog nooit hebt geprogrammeerd,
uiteindelijk het maken van de definitieve projecten die zijn gebaseerd op web programmeren.
En dus zul je zien dat de rendementen zijn hoog in de komende weken.
Dus we zullen je dan zien op maandag.
>> SPEAKER 1: En nu, Deep Gedachten door Daven Farnham.
Hash tabellen.
>> [Lachen]