[REPRODUCCIÓ DE MÚSICA] DAVID J Malan: Molt bé, benvingut de nou. Això és CS50. Aquest és el cap de setmana de set. I és al final d'aquest carronyer caça del problema va fixar 04:00 que es pot recordar. Després de la recuperació de tots els arxius JPEG de personal, que van ser impugnades, si ho desitja, per fotografiar a tu mateix amb el major nombre d'aquestes persones com puguis. Tenim un munt de presentacions durant les últimes setmanes, de fet, un bon nombre a la dreta abans del migdia avui en dia, alguns dels quals són els que són aquí, atrapat aquí en-- veu com-- Annenberg Hall en hores d'oficina, un aquí a Lowell Casa amb Nick. Aquí està Ramon està atrapat en el telèfon. Això va ser en un dinar CS50. Aquest va ser Jason Skyping amb un company de classe més creativa, qui ho va cridar per telèfon aquesta manera. No sabem de què es tractava. 

[El] 

DAVID J Malan: Però això és digne d'un gigabyte. Aquí és Chang, qui literalment va córrer fora de l'escenari per evitar ser fotografiat 1 dia, però finalment va ser capturat. Aquí és Nick. Aquí és Nick. Aquí és Nick. I aquí és Alison pels camps. I Zamyla fins i tot es va trobar en un concurs de ball. Així que anem a anar a través de aquestes fotos, esbrinar qui va presentar el més la primera, i la recompensa un premi fabulós, com promès en l'especificació. I nosaltres també posarem sobre l'espai que va estar involucrat. 

Un parell de announcements-- així dinar és, de nou, aquest divendres a les 13:15. Per unir-se a nosaltres, Confirmar la seva assistència a aquesta URL aquí. Jason torna a aparèixer aquí d'un de les seccions d'un parell d'anys de nou, el que va succeir a caure en Halloween. I, en efecte, es va vestir com un carbassa aquest any en particular. Si vostè mira aquesta secció de la seva secció a partir del 2011 08:00, si vostè és curiós, en CS50.tv, crec aquest va ser l'any en el qual la seva bomba d'aire estava funcionant. 

Si a continuació, veure el secció semblant el 2012, veurà aquest Jason molt desinfla, des del vestit ja no funcionava, que no és més que dir aquest divendres, si ho agradaria tallar una carbassa amb Daven i Gabe i altres, als caps de RSVP en direcció cs50.harvard.edu. Promet ser molt divertit. Daven, se'ns diu, s'ha forjat carbasses del tot de la seva vida. Gabriel de Brasil mai té tallat una carbassa per Halloween. Així que ser-hi amb ells a mesura que aprèn. 

Seminaris, meanwhile-- pel que vostè aprendrà aviat sobre el que les nostres expectatives són per el projecte final, que en essència es redueixen a el disseny i implementació la majoria de qualsevol projecte d'interès per a que, si bé subjecte a l'aprovació i l'orientació del seu company d'ensenyament. Cap al final de la semestre, presentem una sèrie de seminaris, que són les classes opcionals liderat pels becaris d'ensenyament i de Harvard el personal, els amics del curs a través de campus, sobre diversos temes que són tangencial a la programa subjacent del curs però no obstant aplicable, diversió, i diferent per als projectes finals potencials. 

Per exemple, en primer lloc, si vol per registrar-se, vagi a aquesta URL allà. I aquesta és l'alineació per seminaris sols d'aquest any. Però s'adonen que tenim desenes de seminaris de l'any passat, tots els quals estan vinculats al menú Seminaris opció de la pàgina web del curs. Així que si vostè està pensant en anant més enllà de la seva zona de confort o recollir algunes noves habilitats, per exemple, la programació d'iPhone aplicacions amb Swift, un nou idioma d'Apple o d'Objective-C o aplicacions d'Android o de programació [? cue?] bombetes, o qualsevol dels temes fins aquí i més, a causa xec a la pàgina de registre. 

Així que vam començar i concloure en Dilluns amb mirar HTTP. Així HTTP refresher-- ràpida, Protocol de transferència d'hipertext. Però, què significa això realment? Què significa això realment? És això una mà? Sé que estàs rascant el cap. Però vostè vol proposar el que HTTP és? 

Com els ordinadors: Públic comunicar-se amb [inaudible]. DAVID J Malan: em vaig perdre l'última part. Com es comuniquen els ordinadors con-- 

Servidors d'Internet: audiència. DAVID J Malan: Good-- amb internet servidors, i en concret, els servidors web. Perquè recordo, hi ha un munt de serveis a Internet, alguns dels quals utilitza probablement tots els dies entre el xat i el missatge, el xat i web, i correu electrònic, i similars. I és només l'HTTP protocol que els navegadors web parlar quan es comunica amb servidors web, i viceversa. I l'anàleg al món humà que sigui, Estenc la meva mà per estrènyer algunes una altra d'humà i ell o ella reconeix mitjançant l'ampliació la seva mà també. Així que això és només un protocol, un conjunt de convencions. 

I el que en veritat són aquests convenis? Bé, només es redueix a l'enviament de missatges d'anada i tornada, com hem representat aquí. I hi ha un parell de maneres en que pot enviar aquests missatges. I potser el més comú es coneix com GET. I veurem un contrast a això abans d'hora. 

No obstant això, una sol·licitud GET des d'un navegador al servidor només són aquestes. És un munt de text que posa dins d'un sobre virtual. A l'exterior d'aquest sobre anar un parell de peces de detalls. El que ha d'anar a la sobre, per així dir-ho, a fi d'obtenir una petició com això de mi a un servidor web? Sí. 

AUDIÈNCIA: La seva adreça IP. 

DAVID J Malan: La meva adreça IP en el camp, per així dir-ho, i, per descomptat, la l'adreça IP del destinatari. Però en el cas d'un paquet de web, necessitem una mica més de detall No n'hi ha prou per enviar un sobre a un servidor, perquè aquest servidor podria ser escoltar per a diferents tipus del tràfic d'Internet. Llavors, ¿què més necessitem a més d'IP del destinatari? Sí? 

AUDIÈNCIA: És TCP? DAVID J Malan: Good. TCP-- 

AUDIÈNCIA: Direcció. 

DAVID J Malan: Direcció, o el port, com se l'anomena. Prop, però un número de port TCP. I hi ha un munt d'ells. Però sens dubte el més ha de familiaritzar-se amb el temps sigui 80, que és el valor per defecte que s'utilitza per al trànsit d'Internet. I una altra familiaritzat un aviat hi haurà 443, que s'utilitza per a web segur el trànsit, les adreces URL que comencen amb https. 

Així que això és el que passa dins d'aquest sobre. I obtenir / només significa, donar Me la pàgina web per defecte. Dóna'm la arrel del disc conduir en aquest servidor web. I és d'esperar, el web servidor respondrà amb, OK i el número 200, que està just una convenció dient, sí, tot és de fet bé. Aquí hi ha la pàgina. El tipus de la pàgina web va a ser text, però més específicament, HTML, que estem a punt de submergir-se de nou en. I el punt punt punt just mitjans, aquí hi ha el codi HTML. I aquí és on estem recollir la història d'avui, realment escriure HTML, HyperText Markup Language, que és l'idioma en el qual pàgines web estan escrites. No és un llenguatge de programació. No hi ha funcions o bucles o condicions. És un llenguatge de marcat, així de nou veure avui en dia, que li permet especificar com estructurar i estilitzar estèticament una pàgina web. 

Així que aquest era l'únic i només la pàgina que realment mirat, encara que breument, dilluns. I notar alguns característiques excel·lents. Hi ha un munt d'angle obert suport i prop del suport en angle. Entre aquells en angle parèntesi són paraules. I anem a començar cridar a aquestes etiquetes de les paraules. Així cap suport obert i el cap del suport tancat són les etiquetes d'obertura i tancament, o les etiquetes d'inici i fi respectivament, d'un element HTML, com ho anomenem, anomenada cap. I s'aplica la mateixa argot al cos en HTML i així successivament. 

I el que és interessant és HTML-- i, de fet, anem a passar terriblement poc temps en ell, perquè vas a la majoria només esbrinar quines característiques té quan realment tenen un problema concret a solve-- trobareu que un navegador és bastant ximple. És només va a fer-- no gaire diferent 1 computer-- el que vostè li diu que faci. I així, quan vostè té obert HTML suport a la part superior allà, que essencialment només vol dir, bé, navegador, aquí ve una pàgina web escrit en HTML. 

Quan es veu el suport obert cap, que només significa, escolta, navegador, aquí ve el cap, o la part superior de la meva pàgina web. Quan es veu un suport tancat cap, que només significa, bé, això és tot pel cap. En espera d'alguna cosa més. I aquesta cosa més és pel que sembla serà el cos. I quan vostè no té una etiqueta, igual que Té tot just hola, coma, món, que només va a ser text sense format que en última instància, es visualitza a la pantalla. 

Ara, vostè notarà massa la indentació aquí. Vostè probablement pot inferir com estem estilitzar ella. Cada vegada que obro una etiqueta, per així dir-ho, em sagnia. I cada vegada que tancar una etiqueta, jo no-guió, similar a la de les claus. I més enllà d'això, estic una mica d'utilitzar el meu judici. Tingueu en compte que no em vaig molestar a copejar Introduïu l'interior d'aquesta etiqueta del títol. Per què? Bé, jo vaig decidir que semblava un poc més net per a mi, l'ésser humà, per no molestar a fer això. Així que de nou, hi ha una mica de diu judici just com existeix en C o en qualsevol idioma. 

Però cal notar també que aquesta sagnia es presta a un model mental, no sobre el compliquen. Però un arbre, no? Si vostè pensa en un web pàgina, pel que sembla escrit així, com bé sagnia d'aquesta manera, gairebé es pot pensar en el suport obert HTML tag suport tancat es delimiten l'arrel d'un node, un arbre de família node d'estil en l'estil dels arbres vam veure divendres passat. 

I, de fet, tenim a la dreta aquí el que anem a trucar a un DOM, D-O-M, document model d'objectes, una forma elegant de dir un arbre que representa que l'HTML. I noti que HTML té, anem a dir, com un arbre de família, dos fills. A l'esquerra hi ha el cap. A la dreta hi ha el cos. 

I així com un exercici de pensament sense sentit, cap, per descomptat, té quants nens d'acord amb aquesta estructura? Així que només un, títol-- i és per això que tenim la fletxa que va des del cap fins al títol. Així que és com si aquesta persona en el arbre de la família tenia només una cria. I a continuació, el títol en si pot es diu que té un nen també. 

Recordem que l'HTML tenia hola, coma, món sota d'ella. I he simplement dibuixat dins d'un ovalada en lloc de només un rectangle transmetre semànticament que encara que es tracta d'un node en l'arbre, per així dir-ho, és una espècie de fonamentalment diferent. No és una etiqueta. O més aviat, no és un element. És només un node de text, si es vol. Però aquests són completament convencions humanes arbitràries. Això és només ara la meva manera de que representa el que vaig com un agregat anomenar el document. 

I com un part, la cosa a la súper de la cantonada superior esquerra, suport obert signe d'exclamació doc tipus HTML, això s'assembla a una etiqueta, però és el cas estúpid cantonada on això és just allà, copiar i enganxar per indicar els navegadors aquesta és la versió de HTML 5. El món no deixa de canviar el que el primera línia de codi en una pàgina ha de ser. Això només vol dir que la versió 5. Pel que no prou assemblar-se als altres. 

Molt bé, així que amb això Vas dir, podràs apreciar ara aquesta força aquest estúpid tatuatge algú va aconseguir. 

[El] 

DAVID J Malan: Molt bé, i ara anem a realment busseig a fer alguna cosa amb això. Vostè recordarà que l'última vegada Vaig obrir la Appliance CS50 i jo vaig fer alguna cosa com simple com obrir gedit. I he salvat l'arxiu, fins i tot en la meva desktop-- enlloc especial-- com hello.html. 

Així que permetin-me fer això nou-- hello.html Intro. I ara en aquest arxiu, que vaig a seguir endavant i repetir el que acabem de saw-- tipus doc html Llavors vaig a fer oberta html suport suport tancat. I després vaig a preventivament obrir i tancar l'etiqueta. Per què? Només perquè no m'oblido més tard. És només una bona pràctica, de la mateixa manera que l'obertura i el tancament de claus tots alhora. 

I llavors, què va venir després? Vostè pot pensar en el tatuatge. 

AUDIÈNCIA: El cap. 

DAVID J Malan: El cap. I després aquí, jo tenia el títol, crec. I el títol va ser arbitràriament, hola, a prop del títol mundial. I després aquí baix, el cos, de descomptat-- llavors tanquem l'etiqueta body. I a continuació, només una mica redundant, Vaig tenir la mateixa cosa aquí baix. 

Així que jo sostinc que aquesta és una pàgina web. Això és una cosa que ara podrien viure a la web, encara que, per descomptat, que és, literalment, vivint en el meu escriptori en aquest moment. Però de fet, si puc minimitzar gedit, Vaig a veure en el meu escriptori en el seu icona. Tot i que aquest és l'aparell, vostè pot fer això en Mac OS sense TextEdit o Bloc de notes de Windows amb fins i tot. 

I si em vaig per davant i feu doble clic que, fins i tot, i select-- bé, anem a No has de seleccionar que a causa Chrome no s'ha obrint. Seguirem endavant i obrir Chrome. I després fer Comando + O per obrir I navegar al meu escriptori i obrir aquest arxiu. Així és com interpreta un navegador HTML, de dalt a baix, d'esquerra a dreta. Ei, aquí hi ha el navegador HTML. Aquí hi ha el cap. Aquí hi ha el títol. Aquí hi ha el cos. I, de fet, així és com que fa que la pàgina web. 

Però noti la URL. Cap de vosaltres podria aixecar aquest específic pàgina en els seus ordinadors portàtils en aquests moments, fins i tot en l'interior del seu aparell a través d'aquesta URL, perquè file: // indica que és en realitat en el meu sistema d'arxius, el disc dur, no el teu. Així que això no és del tot útil. 

Ara anem a avançar cap a utilitzant un servidor web real. I resulta que el CS50 Appliance és quelcom més que un entorn en el vostè pot escriure codi en C i compilar i executar com que has estat fent. També s'ha configurat pel personal per representar una xarxa típica servidor que està a l'Internet, un que podria pagar per o un que està en l'anomenat núvol. 

I s'està executant lliure de codi obert estàndard programari, per exemple, alguna cosa anomenat Apache, que és potser encara la web més popular programari de servidor en el món que milers de llocs web utilitzen avui en dia. I també té fins i tot programari com MySQL, que és un servidor de bases de dades que amb el temps anem a arribar, que no és més que dir Puc començar a tractar el meu aparell com un servidor de ple dret que jo no estic pagant per altra banda. Només viu en el meu propi ordinador portàtil per amb fins de desenvolupament i de conveniència. 

Així que anem a seguir endavant i prendre avantatge d'això. Vaig a seguir endavant i obrir una finestra de terminal. I jo vaig a seguir endavant i move-- realitat, en primer lloc jo sóc anar a navegar al meu escriptori. Si faig ls, hi ha hello.html. I jo vaig a anar endavant i començar a utilitzar un nou directori que hem no s'utilitza abans d'avui. 

hello.html-- vaig a moure a ../vhosts per hosts-- virtuals més sobre això en el futur-- i després en un directori anomenat localhost, que és el sobrenom donat a gairebé qualsevol ordinador, ja sigui un Mac, PC, o Linux, i després específicament en un directori que nosaltres, el personal ja creat per a vostè quan va descarregar l'aparell anomenat públic. I com el seu nom suggereix, res Em vaig posar en aquesta carpeta, en teoria, serà ara públic, almenys a les persones que tenen una directa connexió amb l'ordinador. 

Així que ara em deixis anar per davant i cd a aquest mateix directori perquè jo pugui veure el que hi ha passant i ls tipus. I, de fet, aquesta és la L'únic que hi ha. Afirmo ara que ja he posat aquest hello.html presentar dins d'un directori anomenat públic dins d'un directori anomenat localhost a l'interior d'un directori anomenats vhosts, que gràcies al personal CS50 ha estat pre-configurat per a ser l'arrel del seu servidor web, Puc espere fer ara això. 

Vaig a obrir una nova pestanya. I jo vaig a anar a no presentar: //. Vaig a utilitzar real http / localhost, que de nou, és el sobrenom per al meu propi servidor. I després em vaig a anar al el nom de l'arxiu, només per ser clars? On és aquesta història probablement va? hello.html. 

Així que en altres paraules, vull ara això és el meu propi ordinador, el meu propi aparell, com si es tracta d'un servidor real. El seu sobrenom és localhost. Però pensar en localhost com com Facebook.com google.com, el que sigui. És només el meu nom local. I després la final el que vull és a la arrel del disc dur, per així dir-ho, o l'arrel del servidor web, ergo la barra diagonal i després el nom del fitxer hello.html. 

Permetin-me Allunyar i prem enter. I, en efecte, no és ara la meva pàgina web. Així que és una mica diferent. I és igual de decebedor. Aquesta és la versió antiga. Deixeu-me reduir la mida del tipus de lletra esquena. Aquesta és l'edat. Aquesta és la nova. Però el que està succeint, fonamentalment, ara és que s'està utilitzant HTTP. 

Anem a fer això una mica més clar o, si es vol, una mica més complicat. Déjame anar a la part inferior dreta cantonada de la meva aparell. I adonar-se que tot això temps, hi ha hagut un nombre. Aquesta és l'adreça única de la seva Appliance CS50. És una adreça privada, com es dedueix de la 172.16, que només vol dir que vostè només físicament pot accedir a aquest servidor web. Tot és un tallafocs i molt ben protegida de la resta del món a causa d'aquest adreçament. 

I ara noti encara que si vaig a aquesta direcció, no al meu aparell, però en Mac OS-- vaig tornar per aquí. Aquest és el meu Mac ara. I ara vaig a obrir aquesta versió de Chrome aquí. I jo vaig a anar a http: //172.16.25 / I em oblit de la rest-- 133. 

Així que vaig a visitar de la meva Mac que l'adreça IP /hello.html Intro. I ara que veig des de la meva Mac que el meu CS50 Appliance, que és Adreça IP és que nombre, és, en efecte comportant- com un servidor web a l'Internet. No té un bonic fàcil recordar el nom com Facebook.com, però s'està utilitzant HTTP pel que sembla, tot i que Chrome és una espècie de simplificació del món per a nosaltres, però no ens mostra HTTP. Però això és de fet exactament això. Chrome s'acaba salvant alguns pulsacions en aquests dies. I això és el que ara veiem. 

Així que això és tot bé i bo. Però és una pàgina bastant decebedora. Déjame anar i fer alguna cosa una mica diferent ara. Així que permetin-me tornar a gedit. I en comptes de hola, món, anem a posar una imatge. I jo vaig reclamar des abans-- deixar-me anar en el meu directori públic localhost. I m'ho dius a mi anar endavant i copio 1 tota munt d'arxius a partir d'avui de la meva carpeta de Dropbox a aquí. 

Ara bé, si escric ls, mirar en tots aquests arxius que he distribuït per la el lloc web del curs abans d'avui en dia, un dels quals és encara hello.html. Així que cal un. I recordar aquest ximple d'última cat.jpg temps--. Així que vaig a tractar d'integrar cat.jpg dins de la meva pàgina web. 

Vaig a seguir endavant i fer cat.jpg, estalviar. Permetin-me tornar a Chrome. I permetin-me zoom a la font i ara recarregar. Vaja, on poso això? Standby-- Encara tinc l'edat versió del meu escriptori obert. Així que em deixis anar al meu amfitrió virtual, el meu localhost, el meu públic, i hello.html. Així que ara em deixis anar per davant i dir cat.jpg interior del cos on jo vull que sigui mostrat i tornar a carregar. Per descomptat, això no és correcte. 

Així que he de dir-li al navegador una mica més deliberadament el que jo vull que faci. Simplement escrivint el nom és òbviament no suficient. Així que recorda que hi havia un altre etiqueta, imatge, img, per abreujar. Això és simplement perquè els éssers humans no els agrada les paraules plenes de tipus. I després podem fer font = "cat.jpg". 

I ara me'n vaig a fer una cosa diferent aquí. Tot i que tots les nostres etiquetes fins al moment tenen tingut aquesta noció d'un començar l'etiqueta i una etiqueta final, que en realitat no fan sentit d'una imatge, oi? Una imatge és o existeix o no existeix. I pel que els éssers humans han arribat amb una convenció més simple. Quan vostè té una etiqueta que pot tant començar i acabar al mateix temps-- pot estar buit, de manera que només speak-- posar la barra diagonal dins de l'etiqueta al final. Ara vaig a tornar al meu navegador. Hit Recarregar Maleïda sigui, alguna cosa està malament. Vostè probablement ha vist això de tant en tant a la web, encara que no ha estat culpa teva. És culpa del servidor web. Què odes aquest sembla indicar? És trencat. Aquí és on la imatge pertany. Sí? 

AUDIÈNCIA: Però no ho fa tenir accés a la imatge. 

DAVID J Malan: No tenir accés a la imatge. Això, o pitjor encara, potser que ni tan sols existeix. Anem a veure si no podem diagnosticar això. Recordem de l'última vegada que si a Chrome, en l'aparell, o fins i tot en el teu Mac o PC, vas al menú de desenvolupador i anar a les Eines de desenvolupament opció, que probablement tens no s'utilitza molt o mai. I si vaig a la xarxa i tornar a carregar la pàgina, anem a veure la realitat d'HTTP peticions que s'estan realitzant. 

Sembla que és hello.html de fet bé, per tant, el 200. Però cat.jpg és un 403. Així que no és un 404. File probablement existeix. 403 significa prohibit. Així que això és una mica confús. Vaig a tornar al meu finestra de terminal. Permetin-me acostar-se fins aquí. I m'ho dius a mi fer un ls. Hi ha aquests mateixos arxius. 

Ara m'ho dius a mi fer un ls-l, que vostè probablement utilitzat abans de mirar arxiu mides o potser les marques de temps. I veiem un munt de informació aclaparadora. Però notar alguns detalls. Aquí està hello.html en aquest remar aquí i aquí està cat.jpg. I és només l'aparell sent fàcil d'utilitzar, posant de relleu JPEG en porpra com aquest. Però quina altra cosa és diferent al costat la mida del fitxer i el nom del fitxer? 

AUDIÈNCIA: [inaudible]. DAVID J Malan: Sí, hi ha dos aquí R més. Noti el que ha hello.html passant. Així que resulta que el nom de aquest directori públic és important. Qualsevol cosa en aquest directori està destinat a ser públic. Però no n'hi ha prou només per deixar anar els arxius en allà. També cal canviar la manera dels arxius, canviar els permisos de l'arxiu en forma proactiva no ser la configuració per defecte, que és que només puc llegir i escriure, jo sent el propietari. Vull que tot el món a tot el món ser capaç de llegir el meu arxiu, per així dir-ho. Llegir només significa veure-ho. 

I, de fet, com es veurà en el problema estableix set, això és el que hi ha d'aquests R. Signifiquen aquests dos R que tothom una altra part del món també llegir-lo, sobretot ara que que és en aquest directori. Així que la forma més senzilla de fer això és anar al meu ràpida i fer chmod per al canvi manera i després fan un + r, en conjunt, tots, tots, a més de r per a lectura, i després cat.jpg Retorn. Res sembla succeir, que en general significa una bona cosa. Així ls-l nou-- ara donem una ullada a cat.jpg. I aquest permís semblen haver canviat. Com acotació al marge, si vostè fa una error i que, per exemple, Acabo de fer tu-- No sé-- assaig públicament accessible per accident, vostè pot fer el contrari, chmod a-r. Encara que, francament, no hauria estar al directori públic de totes maneres, si aquesta és la preocupació. 

Així que ara anem a tornar a meu navegador i recàrrega. I jo vaig a fer clic el petit Cazafantasmas símbol per esborrar la part de la pantalla perquè puguem veure noves sol·licituds. I, de fet, aquí hi ha Gat rondinaire d'abans. Però el més important, tècnicament, no és el número 200, que vol dir que vam aconseguir a D'acord. Molt bé, així que això és tot bé i bo. Però no estem fent el millor dels llocs web, ni anem a provar massa difícil fer el més luxós dels llocs web d'avui en dia. Però anem a almenys fer alguna cosa súper familiaritzats abans sotragueig fora d'algunes altres etiquetes. Així que suposo que no només vull un gat aquí. Suposem que realment vull això gat per enllaçar a alguna cosa. 

Jo podria, per exemple, fer alguna cosa com això. una per a href àncora per equals-- referència hiper i farem alguna cosa com www.google.com prop citar claudàtor de tancament. I ara buscar gats. Tancar etiqueta d'ancoratge. Així que això té només una espècie de fonamentalment nou detall. L'etiqueta, per descomptat, és diferent. És el nom d'una de àncora referència href o hiper. 

Però el més important, no hi ha aquesta característica sintàctica aquí. Això és el que anem a començar a cridar no una etiqueta, sinó un atribut. I un atribut és una cosa que modifica el comportament d'una variable. I aquest atribut, href, mitjans modificar el comportament d'aquest ancoratge de manera que quan es fa clic, que va a aquesta URL aquí. I, per descomptat, que la URL és Google. 

Mentrestant, ¿què és això text aquí serà? Bé, això serà el que la realitat humana veu com el subratllat enllaç, tan simple com això. Així que anem a provar això. Permetin-me guardar-lo. Encara estic en hello.html. No obstant això, en les versions en línia, veuràs els noms dels arxius reals que prèviament preparada. Déjame anar per davant i tornar a carregar. I ara és un molt pàgina decebedor encara. Però si hi ha sobre allà-- i que és una mica petita, però- es pot veure a la part inferior cantonada esquerra de la pantalla, que ha fet d'anar a google.com. I si faig clic en això, ho farà em bata camí a la real Google. 

Però cal notar aquí una oportunitat per l'explotació, així com un part. I tornarem a una altra temes de seguretat d'aquí a poc. Perquè no aquesta dicotomia entre el lloc on vas i el que vostè diu, vostè podria fer alguna cosa com esto-- http://www.google.com. Bé, i ara si torno a carregar després de guardar aquesta pàgina, sembla que em vaig a anar a Google. Però no hi ha cap raó per la qual haver d'anar a Google, no? De fet, em podria anar a una cosa així com badguy.com, torneu a carregar la pàgina aquí. I fixeu-vos, encara es veu com Google. I només si estic fort prou per treure per aquí puc veure que és fins i tot anar a anar a un lloc diferent. 

Així que si alguna vegada has ficat un correu electrònic, especialment un Paypal, o aparentment de PayPal demanant-li que ingressi en el seu compte, aquesta és per això que mai ha mai feu clic a enllaços en correus electrònics, francament, els enllaços en els correus electrònics. Si vostè sap que té real diners a Paypal o Banc d'Amèrica o fidelitat o qualsevol lloc web, escriure manualment en. A causa de que es vegi el fàcil que és enganyar algú en la presentació del que s'assembla a un enllaç. Però el que realment podia anar absolutament en qualsevol lloc. 

I hi ha molt més amenaces que això. De fet, aquest és una mica d'una tangent ara, però un dels millors que he vist que ja s'ha tancat, és algú portat a la gent A-- pel que aquest podria dir, feu clic aquí per accedir al seu compte, un compte bancari. I aquest va ser el Banc d'Occident. 

Així que algú va comprar això. I és una mica més fàcil de veure que en una font mico espaiada zoom en en un projector de 30 peus. Però quan és petita font en un adreça de correu electrònic que vostè està rebent, això sembla bankofthewest.com, no bankofthevvest.com, que algú havia pagat $ 10 a comprar. I llavors el que els va portar a la equivalent a una mala pàgina web. 

I veuràs també- realitat que podem fer esto-- si vaig a la pàgina web real, bankofthewest.com, de nou, el record de l'última vegada que si aquesta és la seva pàgina web i vostè és curiós pel que fa a com funciona, que sens dubte pot anar a Eines per a desenvolupadors de Chrome. I vostè pot veure tota la HTML amb un format agradable allà. 

Però més al punt, vostè CAM-- Tanquem esto-- vostè pot anar per Veure Desenvolupador Mostra la font. Per què no puc simplement copio tot això i llavors jo pot entrar en la meva petita finestra gedit aquí i fer la meva pròpia pàgina web. Guardeu això en hello.html. I probablement això va a trencar, perquè no és tan fàcil en general. Però ara si torno a carregar la meva pròpia pàgina en la meva pròpia CS50 Appliance i recàrrega colpejar, Bé, algunes coses es va trencar. Però estic bastant a prop de tenir el meu propi lloc web bancari, oi? Tot això HTML-- 

[El] 

DAVID J Malan: --Jo no actually-- i vostè saben que hi ha algú per aquí que seria realment feu clic en aquests enllaços també. Així que clarament, algunes coses es va trencar. Però això va a conduir nosaltres en una discussió, innecessàriament en aquest moment, pel que fa al CSS, fulls d'estil en cascada, són, i com a realitat descarregar els altres arxius HTML i JPEG arxius GIF que el lloc web podria estar utilitzant. Però tot això és realitzable. Però el que realment es redueix a aquestes molt simples heurístiques. 

Així que ara anem a llegir-lo a través d'un parell d'altres exemples d'HTML només per donar-li un sentit de què més es pot fer. Per exemple, aquest és list.html. Suposem que jo volia fer una pàgina web amb una llista de cases al pati. Podria utilitzar l'etiqueta ul per desordenada llista i llavors el nen element de la llista i després iterar over-- o llista, rather-- les cases en qüestió. 

I si obro això, farem això. Anem a no hello.html, però a list.html. Maleïda sigui. Com puc solucionar això? És el mateix problema que abans, oi? Així que m'ho dius a mi fer oops-- chmod-- chmod a + r de list.html. I ara si em vaig de tornada al meu navegador i feu clic a Actualitza, aquí està. Així que si alguna vegada has volgut fer una llista amb vinyetes, es pot fer això. Si vols ser super luxós i fer una llista ordenada, no una llista desordenada, canviar aquells ol, torneu a carregar la pàgina, i ara el navegador numerar per vostè. 

Què més podem fer? Bé, un parell de altres-- si tens llargs paràgrafs de text-- Per exemple, alguns Text llatí com esto-- i vol que en paràgrafs separats, p obert, prop de p per a l'etiqueta de paràgraf. I fer-ho una i altra vegada. I si ara obro aquest arxiu, paragraphs.html, bé, això és cada vegada molest. Així que ara anem a tornar a la meva ràpida, chmod a + r r estrella .html-- un petit comodí per dir-ho. S'ha de solucionar tots aquests problemes per a mi. Anem a tornar a carregar. Hi ha tres paràgrafs. 

I ara anem a seguir endavant i obrir un altre. Què hi ha de taula? Es donarà compte de les mirades de taula una mica més complex. Però és la mateixa idea-- etiqueta oberta, etiqueta oberta, obert, obert, obert, prop de l'etiqueta, etiqueta oberta. I això passa en repòs durant taula, la frontera és aparentment serà un gruix 1-- qualsevol que significa: fila de la taula, taula dades, el que significa una cèl·lula. I si torno al meu navegador aquí i anar a table.html, es pot veure alguna cosa així, horrible. Però anem a arribar al punt on puguem realment fer les coses més boniques que això. 

Així que permetin-me estipulo per ara. Hi ha raïms de més etiquetes. I HTML és meravellós per recollir perquè, francament, tot el que ha de fer és mirar a les pàgines web existents amb el qual està familiaritzat. I vostè és com, oh, així com ho van fer estèticament. 

O vostè pot buscar qualsevol línia de recursos pel que fa a com funciona l'HTML, i veuràs que hi ha una tot el vocabulari d'altres etiquetes. Però amb el model mental senzill només que gairebé qualsevol etiqueta s'obre ha de ser tancat, el que realment no és suficient per ensenyar a un mateix HTML després d'entendre aquestes idees bàsiques d'etiquetes i atributs i la bona formació que hem parlat, res de tancar perquè puguem obrir perquè no confonguem un navegador. Així que anem a prendre ara aquesta a un nivell més interessant per anar a la real. I anem a anar al meu Mac aquí, a google.com. I ara notice-- farem això. Estic gong per anar a Configuració, Configuració de cerca. Vull desactivar aquesta instantània molest resultats cosa on immediatament comença responent a la seva escriptura. Anem a fer aquesta escola més vell, així veiem realment el que està passant. 

Així que em vaig a salvar la meva La configuració de Google aquí. I ara notice-- vaig a buscar alguna cosa com gats. I encara està fent acte completa aquí, però sobre la base de les coses la gent ha escrit en el passat. Però adonar-se del que passarà. 

A l'adreça URL en el moment és això, només google.com. I tècnicament, és barra. Google acaba de salvar a un personatge i no nosaltres que mostrar. Ells ens estan mostrant https, només a ser super tranquil·litzador que estem en una pàgina segura o xifrada. 

Així que m'ho dius a mi anar per davant i la recerca dels gats. Ara bé, això es va posar molt aclaparadora ràpidament. Mira la longitud d'aquesta URL. Però resulta que la major part d'aquest material a l'URL és en realitat bastant inútil. Vaig a començar a esborrar coses que no entenc. Veig gats. Entenc gats. No sé per què els gats són allà de nou. Realment no ho sé el que és aquesta tonteria. Així que només vaig a mantenir destacant i eliminació de la matèria que jo no entenc, destil·lació de la URL en només això. 

Ara vaig a aconseguir entrar de nou. Sembla que Google segueix funcionant. Així que, per alguna raó, estan agregant un munt de coses que per defecte de la seva URL. Però no és estrictament necessari. Així que el que és bo sobre això? Bé, deixa anar per davant i obrir l'inspector de Chrome. Hi ha una petita drecera de ratolí per a això. 

Anar a la fitxa Xarxa. I ara permetin-me recàrrec aquesta pàgina una vegada més. I jo estic sostenint Shift. Com acotació al marge, navegadors tendeixen a emmagatzemar en memòria cau o desar informació només pel bé de l'eficiència. Però en general, Shift i la celebració de recàrrega obligarà a tot el per començar de nou des del principi. I això és el que vull fer aquí. 

I compte tots aquests files que només apareixien. Resulta que en qualsevol web determinada pàgina, pot ser que hi hagi un sol arxiu involved-- hello.html-- o no podria ser 52, com en aquest cas. Quan visito google.com, pel que sembla, el meu navegador arrenca 52 peticions HTTP separades. Perquè és això? 

Bé, mira el que hi ha dins d'aquesta pàgina web fins a la part superior. No hi ha només text, però no hi ha imatges reals de gats de més a la dreta. Hi ha un logotip colorit fins aquí a l'esquerra. Hi ha tots aquests icones per a un micròfon i així successivament. Hi ha una gran quantitat de peces, construcció de blocs, peces d'esgarrapades, si es vol, a aquesta pàgina web. I el que el navegador està fent en aconseguint el primer arxiu, que és aquesta fila aquí, és essencialment iteració en la part superior d'HTML a baix, d'esquerra a dreta, a la recerca de coses com les etiquetes d'imatge o altres etiquetes que estan esmentant altres arxius i quan se'ls veu, va i els va a buscar a través d'HTTP, tota viable metàfora sobre, i després els mostra a la ubicació adequada en la pàgina web. 

Però cal notar aquí si em centre en els primers gats tir, recerca, adonar que, de fet, està utilitzant HTTP 1.1. I, per desgràcia, Google Chrome ara en la versió 39 és una espècie d'embrutiment i coses no ens mostra les capçaleres reals. Però el que en veritat és enviat una sol·licitud per no retallar, però / recerca? q = gats. 

Ara, per què és tan important? Bé, jo vaig a deduir d'això que si Google dóna suport a les consultes d'aquesta manera, per què No puc implementar la meva pròpia recerca motor per al CS50, però només la part davantera final, només la interfície gràfica d'usuari. I anem a externalitzar la part de darrere, la recerca real dóna lloc a Google. 

Llavors, ¿com puc fer això? Bé, deixa anar en gedit aquí. I m'ho dius a mi anar per davant i obro fins, diguem, un nou arxiu. I em vaig a guardar aquest temporalment com a recerca 0.html. I després, finalment, anem ràpid endavant a la qual jo ja preparats. 

I jo vaig a assotar ràpidament tipus doc html suport obert html a prop suport html. Llavors em vaig a fer cap prop del cap del títol obert CS50 Cercar en lloc de la cerca de Google. Aquí sota tindré el cos, aquí baix a prop del cos. I ara necessito CS50 Cerca. I, de fet, anem a construir aquesta manera incremental. Vaig a seguir endavant i tancar això i en realitat el va posar en el meu directori públic. Així que em donen només un moment. recerca-0.html-- vaig a temporalment dir-search.html. Vaig a chmod 1 search.html + r. I ara me'n vaig a obrir-lo. Molt bé, així que això va ser ràpid. Però l'objectiu era simplement per dur-nos al punt d'haver aquest text arxiu anomenat search.html. Així que no hi ha molt a veure encara. De fet, si em vaig al meu navegador, i anar a search.html, això és tot el que és. Però saps què? Puc ser una mica més luxós. Vaig llegir en un llibre que hi ha una etiqueta de capçalera anomenat h1. I jo vaig a seguir endavant i utilitzar aquest h1 h1 s'obren i tanquen. Actualitzar la pàgina. I ara és més gran i més audaç, no tan interessant, però almenys estructuralment més interessant. Però ara permetin-me presentar a una altra etiqueta. Resulta que hi ha una etiqueta de formulari. I permetin-me tancar aquesta etiqueta. I resulta que hi ha una etiqueta d'entrada que té un atribut anomenat tipus, que és el tipus de dades del camp, si es vol. I serà de tipus text. I el seu valor es va ser CS50 Cercar. Tancar la etiqueta. I no hi haurà cap noció de obertura i tancament amb separar les etiquetes. 

Permetin-me tornar aquí i veure el que està passant, torneu a carregar. Aconseguir interessant. Sembla que es tracta d'un camp de text. I en realitat, jo no volia per posar un valor encara. Permetin-me tornar aquí i realment obtinc desfer-se d'aquest valor perquè sigui senzill. En lloc d'un valor, el que volia per donar aquesta cosa era un nom. I jo no sé el que és, així que vaig a tornar a això. 

Però sota d'això, vull fer input type = enviar. I aquest valor serà CS50 Cerca. I anem a veure per què mogut el valor a aquest. Quan torno a carregar, em sembla que ara tenen els inicis de la meva pròpia recerca motor, super horrible, encara que, francament, és no un tir lluny del que Pàgina per defecte de Google s'assembla. 

Si vaig aquí ara, jo puc escriure gats i tant de bo feu clic a Cerca. Però no estic molt fet encara, perquè no he implementat, òbviament, una base de dades. No he rastrejat la Web de resultats de cerca. Així que he de subcontractar que Google. Llavors, ¿com ho faig? 

Bé, en primer lloc em que hagi de afegir i acció atribuir a la meva forma d'etiqueta que és http://www.google.com/search. I sé que només per tenir inferida per mirar de prop en la seva URL. I ara prendre una conjectura. Què li dec aquest camp de text, probablement, ser cridat, sobre la base d'on venim des d'abans? 

AUDIÈNCIA :? Q. 

DAVID J Malan :? Q. I en realitat no necessitem pregunta marcar resulta, però q és de fet, q per a consulta probablement per Per defecte, només perquè això és el que Larry i Sergey se li va ocórrer fa anys. Així que ara m'ho dius a mi tornar a carregar aquesta pàgina. No es veu tan diferent. Però ara observin el que passa. 

Si escric en gats i clic CS50 Buscar i deixar anar, noto si portar distància a real Google. Ara, Google està sent una mica molest en què estan afegint un paràmetre addicional, si es vol, a l'adreça URL. Això és tot succés de forma automàtica a la banda de Google. 

La part important és que em sembla haver generat aquesta petició aquí. I, en efecte, això és el que passa. Quan vostè ha de HTML són aquestes, aquest és una espècie de notació dels desenvolupadors web per dir, seguir endavant i crear un formulari que quan es va presentar, que va a anar a aquesta adreça URL. I quan la URL ha proporcionat valors per a coses com q, no anar sol a aquesta adreça URL. En realitat, passi a la pregunta marca i llavors q = gats. Annexar el paràmetre, el Paràmetre HTTP així. 

I només per ser super exacte, el que està sent inferir aquí-- però vaig a estar més explicit-- és que el mètode que vull fer servir és aconseguir, en lloc d'alguna cosa com ja, que finalment ens veurem. Així que en resum, només per la comprensió HTML i l'ús d'algunes etiquetes bastant simples, ara podem començar a crear nostre propi usuari final front interfície amb una recerca motor darrere d'ell. 

Però això, és clar, és bastant horrible. Així que m'ho dius a mi en realitat obro una mica millor versió. Aquest és el que jo vaig preparar a endavant que sempre ha alguns comentaris. Però veuràs que jo més o menys recreat. Així que això ja està disponible en línia. I va ser així que de forma preventiva anar a https només per mantenir les coses simples. 

I ara anem a obrir un següent iteració d'aquest. És la versió 1 en lloc de 0. El que salta a la vista com a poc diferent en aquest exemple? 

AUDIÈNCIA: [inaudible]. 

Sí, hi ha un centre d'alineació de text. Això és una mica estrany aquí. Però això és realment nou. I potser d'endevinar el que passarà. Si vaig a la meva navegador ara i visitar recerca-1.html, és gairebé la mateixa cosa. Però és un pas més a prop de sent una mica més bonic. Encara és lleig, però més bonic que almenys tot el que ara està centrat. 

Així que resulta que el que estic fent servir és un altre idioma per complet anomenat CSS, fulls d'estil en cascada. I CSS, francament, és una espècie de, en la meva opinió personal, un llenguatge dissenyat atroçment. És molt molest per recordar tots els diversos detalls. Però és el que estilitza la a tot el web a tot el món avui en dia. He ofès algú. Bé. Així que anem a tornar aquí i veure com en realitat estem fent servir això. I resulta que, almenys és en realitat un llenguatge bastant simple. És només parells de valors clau, propietats i valors, propietats i valors. De fet, aquí està un aquesta propietat i el valor. 

Simplement usant l'estil atribuir al meu cos de l'etiqueta i que li dóna un valor d'un de còlon paraula i una altra paraula, o una propietat i un valor, Puc afectar l'estètica de la pàgina web, no necessàriament l'estructura, però, però l'estètica de la mateixa. I amb només buscar a Google voltant, m'adono que les fulles CSS, d'estil en cascada, dóna suport a una propietat anomenada text-align, el valor pot ser esquerra, dreta o centre, per exemple. 

Així que ara, quan torno a carregar aquesta pàgina, el que em va fer arribar era una pàgina centrat, però tot i així és bastant lleig. Seguirem endavant i obrir fins a la versió 2 de Cerca. I ara noto que he fet una mica més. Cal notar que fins aquí dins del cap etiqueta, no pot haver-hi més de títol. De fet, hi ha una etiqueta d'estil. I aquí és on s'acaba de crear una poc CSS visió desordenada de vegades. 

Recordeu que em sembla que tenen alguna cosa que estructuralment es veu molt diferent. Però aquí hi ha el nom de l'etiqueta vull estilitzat. Aquí hi ha els nostres vells amics arrissat aparells ortopèdics i claudàtor tancat. I llavors aquí és que propietat i el seu valor. 

Si em carrega aquest arxiu, search2.html, el resultat final és idèntic. Però és un pas cap a un millor disseny. Per factoritzar aquest CSS, tinc no barrejada amb el meu HTML. I, de fet, com veurem, que podia reutilitzar aquestes propietats i valors. Si jo volia fer rams de parts de la meva pàgina web centrats, Jo no he d'escriure style = text-align centre de tot el lloc. Puc posar en un sol lloc Potser, com en la part superior. 

Però fins i tot això no és el millor disseny. De fet, una de les coses que vostè aprendrà a mesura que passen més i més temps amb programació web és que com més es pot modularitzar les coses i les coses de factors fora com arxius .h deixar-nos factor de matèria cap a fora, helpers.c agradaria deixar que ens coses de factors fora Fa un parell de conjunts de processadors. De la mateixa manera, podríem desitgi per aconseguir això. 

Així que notar en la versió tres search.html tinc netejat el cap de la pàgina i només cal posar en aquest, una etiqueta d'enllaç, que Malgrat el nom, no et dóna un enllaç. Vincula a un altre arxiu a través de 1 href el valor en aquest cas, és la recerca-3.css Llavors m'adono que anem ràpidament. Però tot el que estic fent és una espècie de moure les coses. Déjame obert recerca 3.css. Aquí està, res realment a ella. Acabo de copiar i enganxar en un nou arxiu, igual que ens factorizada coses fora en altres arxius abans. I el result-- completament underwhelming-- serà exactament el mateix. Però ens estem movent toward-- no, no ho és. Oh, jo sé per què. 

Per tant, sembla ser un error. I és en algun sentit. Però permetin-me obrir el meu fitxa Xarxa. Permetin-me tornar a carregar la pàgina. Ah, per què no s'està aplicant la CSS? Bé, l'arxiu CSS, de la mateixa manera, té per a ser llegible món, per dir-ho. I també està prohibit. Així que m'ho dius a mi fer un chmod a + r d'estrella dot CSS-- whoops-- estem CSS punt és només el extensió d'arxiu per als arxius CSS. Ara vaig a tornar a meu navegador i recàrrega. Bé, una mica millor. 

Ara m'ho dius a mi fer una última cosa. A la recerca-4.html. Tinc una versió que m'acaba d'ocórrer era manera més freda, encara que de forma més complicat. Vegem el resultat en primer lloc. Tancar aquesta per donar-nos més espai. Canviar aquesta a la recerca-4, Enter. 

I ara un munt de coses estan trencades. Vaig a tornar en el meu directori aquí. I ara només faré 1 chmod de a + r en un file-- perquè sé que exists-- diu logo.gif, que és una imatge. I ara recarregar. I wow-- així que ara estic molt a prop, francament, de la mateixa manera que la versió 1999 de Google, i francament, la versió 2014 de Google, Oi? 

Així que és ara anar al seu lloc web, en última instància, si la recerca per als gats. I de fet ho és. Però ho vaig fer de manera diferent en aquesta versió 4? Així que no anem a insistir-hi gaire aquí. Vostè veurà això en un problema establir 07:00 eventualment. Però noto que vaig fer un parell de coses. 

Jo vaig presentar un div etiqueta, que és la divisió, similar a la de una etiqueta de paràgraf. Però una divisió és igual, aquí està una regió rectangular invisible de la pantalla. Anem a donar-li un únic identificador, un peu de pàgina, només perquè puguem parlar de en el nostre HTML en un altre lloc. Hi ha un altre div de la pàgina el ID serà contingut. És el contingut de la pàgina. I fins aquí és la capçalera de la pàgina. 

En altres paraules, no tinc essencialment en HTML sóc mentalment visualització d'aquesta pàgina web com tres components, una capçalera fins aquí amb aquest rectangle invisible, el contingut en el medi, i després el peu de pàgina a baix, fins i tot encara que no veiem aquestes coses. Perquè vull en el meu cap de La pàgina d'aquí, o en un arxiu .css, Puc fer servir aquesta sintaxi. 

Capçalera no és una etiqueta. És una identificació perquè es posi que fent #header, Ara puc aplicar un o més propietats a la capçalera. Jo puc fer el mateix contingut, el mateix per al contingut aquí. 

Així, per exemple, al peu de pàgina, avís totes aquestes propietats que estic afegint. I sé que hi ha només per la lectura amunt a la documentació per al CSS. Mida de la font serà smaller-- pel que alguns mida de la font relativa. El pes serà audaços. Margin-- quants píxels voltant it-- és de 20 píxels. I estarà centrat. 

Però en aquest moment, la pàgina són aquestes. Si no estic satisfet amb la meva còpia allà mateix, Jo podria fer alguna cosa com color vermell. I llavors puc guardar aquest, torneu a carregar, i ara he stylized el peu de pàgina. Així que això és només insinuant el poder del que pot fer en una pàgina web de canviar les coses. 

I fins i tot més fred que això, si vostè vol a furgar amb els llocs web reals, no es pot canviar permanentment. Però si obro Inspector de Chrome de nou i jo no vaig a l'esquerra aquí, el que mostra el codi HTML de Facebook, però mostra a la dreta banda tota la seva CSS, vostè pot i canviar les coses sobre la marxa. Així que me n'aniré endavant i fer això. 

Déjame anar per davant i control feu clic en aquesta paraula a l'atzar aquí, signar, i feu clic a inspeccionar Element. Chrome salta molt convenientment a l'etiqueta h1 que Facebook està fent servir. I notar aquí Facebook té tipus de mandrosament codificat mida de la font com una propietat aquí. 

Així que la cosa fresca, tot i que és que si jo realment vaig aquí i diuen, oh, Facebook, no m'agrada que 64 píxels, que ara poden canviar de Facebook. Per descomptat, només estem canviant per a mi personalment en el moment. Però això és només un altre eina a la nostra caixa d'eines que permetrà a nosaltres per a modificar i esbrinar i també diagnosticar assumptes en les nostres pròpies pàgines web. I de la mateixa manera podríem anar més aquí, que és la mateixa cosa. Si realment voleu aconseguir la suposició, jo dir, ara que realment pot mutar la pàgina i fer coses boges. 

Per què és tot això útil? Doncs bé, en última instància, estem voldrà ser capaç de crear pàgines web que són impulsats pels nostres propis fins d'esquena, no només per Google i l'externalització de la final de tornada allà. En realitat volem que el valor, per exemple, de l'acció del nostre motor de cerca atribuir a anar no a una altra persona, sinó a alguna cosa com search.php, on search.php està en el nostre propi servidor, no en una altra persona. 

I així, per arribar-hi, que en realitat que hagi d'introduir un nou llenguatge. Així que ja hem vist en un nou idioma aquí, o dos realment, HTML i CSS. Però el que realment són només idiomes estructurals i estètiques. No estan programant idiomes per se. I això és el més formal, temps que passarem sobre ells. Com que anem a començar ara per a la transició a PHP. 

Així que PHP és un real llenguatge de programació. És un llenguatge de scripting en el sentit que és destinat a ser un pes més lleuger que alguna cosa com C. I és un llenguatge interpretat, el que significa que no està compilat. Així que en poques paraules, què significava quan fem servir un llenguatge com C i vam haver de compilar? Què significa per a compilar el codi font en C? AUDIÈNCIA: [inaudible]. DAVID J Malan: Digui-ho una altra vegada? AUDIÈNCIA: [inaudible]. DAVID J Malan: Perfecte. Es converteix en binari. Es converteix en zeros i uns a partir del codi font Anglès-com a real. I llavors podem realment executar aquests zeros i uns fent-los passar a través de la CPU fent doble clic a una icona o executar una ordre. 

PHP i Python i Ruby i Perl i JavaScript i raïms d'un altre llengües s'interpreten llengües, el que és dir no compila ells. Més aviat, els dónes de menjar com a entrada a un programa que es diu un intèrpret. I aquest intèrpret, que algú més va escriure, llegeix el codi font de dalt a baix, esquerra a dreta i només interpreta aquestes línies i fa el que diu. 

Així que si et trobes amb un línia que diu d'impressió, no converteix necessàriament impressió als zeros i uns corresponents. Només té aquest intèrpret com si un estat gran que diu: si les instruccions del programador és impressió, i després fer el següent. Per tant, l'interpreta només per tipus de raonament a través del que vostè està dient que faci. 

I PHP és un d'aquests idiomes. I fa anys PHP va ser dissenyat precisament per a la programació web. I va ser inicialment un llenguatge desordenat molt descuidat. I, en efecte, hi ha una enorme quantitat de mal codi PHP per aquí. Però la pròpia llengua ha madurat amb els anys, tant és així que ara és en realitat un meravellós pas següent pedagògicament de C perquè és tan condemnadament familiar per a tot vostè acaba de veure en les últimes setmanes. 

L'única diferència inicial ja veurem és que no hi ha funció principal ja. En iniciar l'escriptura de codi, és només aconseguirà executat tant i fa, com veurem en un moment. Mentrestant, això és el que un la variable es veu com en PHP. És una mica diferent, però només tot just. 

En PHP, no hi ha tipatge fort. No hi ha setmana escrivint, que només vol dir que hi ha són els tipus de dades, com les cadenes i els números i altres coses. Però no et molestis especificant el que són més. PHP s'ho imagina per a vostè. El signe del dòlar és només una decisió que les persones fan de PHP anys fa de tal manera que qualsevol variable en PHP només comença amb un signe de dòlar. És en realitat una mica útil, ja que que salta a la vista una mica més. 

Però després d'això, aquest és una condició en PHP. Què és diferent en comparació amb C? Truc pregunta-- res, que és realment agradable. Expressions booleanes en PHP-- la mateixa. Expressions booleanes amb i davant o, els interruptors, els bucles, els bucles, loops-- Acceptar, aquest és diferent. 

Així que resulta que hi ha un parell d'altres funcions en PHP. Un d'ells és en realitat aquest, que és meravellosament còmoda. Si $ nombres és una matriu que tens declarat prèviament en un programa, vostè té aquesta fantasia per a cada construcció que en lloc de fer tot això em molesta és igual a 0, I és menys que això, [? I ++?], per a cada un dels números com el nombre, on cada d'aquests valors de signe de dòlar és simplement una variable, i el segon vostè pot pensar com jo Se li podria dir el que vulguis. El vaig trucar nombre. Això va a iterar sobre la matriu flama nombres. I en cada iteració, és va a actualitzar de forma automàtica perquè el nombre de la mostra de dòlar variable de manera que vostè constantment tenir accés a la variable que desitja sense haver de fer cap claudàtor la notació o la indexació en una matriu. 

Més enllà d'això, fins i tot tenim coses com matrius, que semblen gairebé el mateix, excepte que és molt comú, com veurem veure, tant en PHP i JavaScript de comprovar la validesa inicialitzar una matriu utilitzant claudàtors. C utilitza claus. Així que és lleugerament diferent, encara que nosaltres no ho fem servir molt aquest truc. 

Però fins i tot amb més força, PHP té matrius associatives, que és una forma elegant de dir les taules hash. De fet, si vostè vol declarar un hash taula en PHP, a diferència d'en quants C-- línies de codi es triga a realment implementar una taula hash en C? O el nombre de línies de codi és prendre per implementar una taula hash en C? Així que és probable que sigui molt, oi? És unes poques dotzenes, potser 100 o 200. És trivial. O es tracta de ser, com aviat veuràs, no trivial per implementar una taula hash [Inaudible] i també una oportunitat. Però en PHP-- i francament, probablement no hauria de dir això fins Monday-- en PHP, si vols una taula, fet. Això és un hash table-- així amb una línia de codi. I 

Una gran quantitat d'idiomes que fer. Diverteix-te amb pset 05:00. Així que una gran quantitat d'idiomes fer això. Et donen aquestes abstraccions que altres persones, altres programadors, han creat per a vostè de manera que vostè pot estar aturat sobre les seves espatlles i començar a utilitzar les idees que són super convincent, com taules i arbres de hash i tracta. Però vostè no té necessàriament que posar en pràctica aquestes coses per tu mateix. 

I així, en última instància, el que farem servir PHP per està potencialment escriure programes de la crida de línia d'ordres. Podríem recrear cada programa hem escrit aquest semestre fins al moment, excepte potser Breakout que utilitza SPL, que és específic a C en el moment. Però tots els altres problemes configurat, sens dubte Mario i César i Vigenère i [? Esquerda?] I des d'ara, ens podria tornar a posar en pràctica en PHP, probablement una mica més fàcilment. 

Però el que estem en última instància, va utilitzar PHP per a programació web és. I anem a introduir proper setmana un model mental, un paradigma anomenat MVC, controlador de vista de model, que si has fet la programació abans en Python o Rubí o en un altre lloc, vostè podria saber d'aquest equip amb Rails i Django i similars. Però si sou nou en això també, vostè veurà que aquest és en realitat una molt natural extensió de la factorització i el tipus de disseny de codi que hem estat fent en C. Anem a ara aplicar algunes d'aquestes lliçons a PHP per la qual cosa, en última instància, som la implementació dels nostres propis llocs web. I si vostè és una espècie de hipnotitzat o sorprès que farem tot el tan ràpidament, adonar-se que gairebé tots els semestre, gairebé el 90% d'estudiants CS50, inclosos els que mai han programat abans, acabar fent projectes finals que es basen en la programació web. I pel que veurà que els retorns són alts en les pròximes setmanes. Així que anem a veure a continuació, dilluns. 

ALTAVEU 1: I ara, Deep Pensaments d'Daven Farnham. Les taules hash. 

[El]