>> [Musikken afspilles]
David J MALAN: Okay, velkommen tilbage.
Dette er CS50.
Det er i slutningen af ​​uge syv.
Og det er i slutningen af ​​denne ådselæder jagt fra problem sæt fire
som du måske husker.
Efter at inddrive alle disse JPEG medarbejdere,
De blev udfordret, hvis du gerne vil, at fotografere dig selv med så mange
af de folk, som du kan.
Vi fik en hel bunke af indlæg løbet af de sidste par uger,
ja, en hel lige før middag dag, hvoraf nogle er de her,
fanget her in-- ser like-- Annenberg Hall ved kontortid, en her
i Lowell House med Nick.
Her er Ramon blive fanget på telefonen.
Det var på et CS50 frokost.
Det var Jason Skyping med en mere kreativ klassekammerat,
der ringede ham på denne måde.
Vi ved ikke, hvad det var.
>> [Latter]
>> David J MALAN: Men der er værd at en gigabyte.
Her er Chang, som bogstaveligt løb fra scenen
at undgå at blive fotograferet en dag, men blev til sidst fanget.
Her er Nick.
Og her er Alison nede ved markerne.
Og Zamyla selv blev fundet ved en balsal konkurrence.
Så vi vil gå igennem disse fotos, regne ud
der har indgivet det mest tidligst og belønning
en fabelagtig præmie, som lovet i spec.
Og vi vil også følge op omkring den plads, der var involveret.
>> Et par af announcements-- så frokost er, igen, denne fredag ​​klokken 13:15.
Hvis du gerne vil slutte sig til os, RSVP på denne URL her.
Jason vises igen her fra den ene af afsnittene et par år
tilbage, hvilket skete at falde på Halloween.
Og ja, han klædt som en græskar det pågældende år.
Hvis du ser denne sektion af hans fra 2011 sektion
otte, hvis du er nysgerrig, på CS50.tv, tror jeg
dette var det år, hvor hans luftpumpe arbejdede.
>> Hvis du derefter se lignende afsnit i 2012,
du vil se denne Jason meget deflateret, da dragten ikke længere fungerede,
der er kun at sige denne fredag, hvis du vil
gerne skære et græskar med Daven og Gabe og andre, RSVP til lederne
ved cs50.harvard.edu adresse.
Det tegner til at være sjovt.
Daven, vi får at vide, har skåret Græskar hele sit liv.
Gabriel fra Brasilien har aldrig skåret en græskar til Halloween.
Så være der med dem, som han lærer.
>> Seminarer, meanwhile-- så du lærer hurtigt
om, hvad vores forventninger er for det endelige projekt, som i det væsentlige
vil koges ned til designe og implementere
de fleste helst projekt af interesse for dig, omend betinget af godkendelse
og vejledning fra din undervisning fyr.
Mod slutningen af ​​den semester, introducerer vi en række
af seminarer, som er valgfrie klasser ledet af undervisningen stipendiater og Harvard
personale, venner af kurset på tværs campus, om forskellige emner,
er tangent til den kursus underliggende pensum
men ikke desto mindre relevant, sjov, og anderledes for potentielle endelige projekter.
>> For eksempel først, hvis du gerne vil at registrere, hoved til denne URL der.
Og dette er lineup for dette års seminarer alene.
Men indse vi har dusinvis af seminarer fra de forløbne år, som alle
er forbundet i menuen Seminarer mulighed for kursets hjemmeside.
Så hvis du tænker på går ud over din komfort zone
eller afhente nogle nye færdigheder, for eksempel programmering iPhone
apps med Swift, et nyt sprog fra Apple eller Objective-C
eller Android apps eller programmering [? cue?] pærer, eller nogen af ​​de emner
heroppe og mere, på grund af kontrol ud registrerings siden.
>> Så vi begyndte og afsluttet den Mandag med at se på HTTP.
Så hurtig refresher-- HTTP, HyperText Transfer Protocol.
Men hvad betyder det egentlig?
Hvad betyder det egentlig?
Er det en hånd?
Jeg ved, du bare skrabe dit hoved.
Men du ønsker at foreslå hvad HTTP er?
>> Publikum: Hvordan computere kommunikere med [uhørligt].
David J MALAN: jeg savnede den sidste del.
Hvordan computere kommunikerer med--
>> PUBLIKUM: Internet-servere.
David J MALAN: god-- med internet servere, og især, webservere.
Fordi tilbagekaldelse, der er en masse af tjenester på internettet, hvoraf nogle
du bruger sandsynligvis dagligt mellem chat og besked, chat og web og e-mail,
og lignende.
Og HTTP er bare protokol, som web-browsere
tale, når du kommunikerer med webservere, og vice versa.
Og den analoge i menneskelige verden kunne være,
Jeg udvider min hånd til at ryste nogle andre menneskets og han eller hun
anerkender ved at udvide hans eller hendes hånd så godt.
Så det er bare en protokol, et sæt af konventioner.
>> Og hvad faktisk er disse konventioner?
Nå, det bare koges ned til sende meddelelser frem og tilbage,
som vi afbildet her.
Og der er et par måder, som du kan sende disse meddelelser.
Og måske den mest fælles er kendt som get.
Og vi vil se en kontrast til dette inden længe.
>> Men en get anmodning fra en browser til server bare ligner dette.
Det er en masse tekst, at det sætter inde i en virtuel kuvert.
På ydersiden af ​​denne kuvert gå et par stykker af detaljer.
Hvad skal gå på kuvert, så at sige,
for at få en anmodning som dette fra mig til en webserver?
Ja.
>> PUBLIKUM: Din IP-adresse.
>> David J MALAN: Min IP-adresse i feltet Fra, så at sige,
og naturligvis modtagerens IP-adresse.
Men i tilfælde af en web-pakke, vi har brug for en lidt mere detaljeret
Det er ikke nok blot at Send en kuvert til en server,
fordi denne server kunne være lytter efter forskellige typer
af internet-trafik.
Så hvad skal vi ellers udover modtagerens IP?
Ja?
>> PUBLIKUM: Er det TCP?
David J MALAN: God.
TCP--
>> PUBLIKUM: Adresse.
>> David J MALAN: Adresse, eller port, som det hedder.
Tæt på, men en TCP port nummer.
Og der er en masse af disse.
Men helt sikkert den mest fortrolig bør i sidste ende
80, som er standard der bruges til web trafik.
Og en anden velkendt man snart vil være 443,
som anvendes til sikker web trafik, webadresser, der starter med https.
>> Så dette er, hvad der foregår indersiden af ​​kuverten.
Og få / bare betyder, at give mig fejlwebsite.
Giv mig roden af ​​den hårde køre på, at web-server.
Og forhåbentlig web server vil reagere med, OK
og nummer 200, som er lige en konvention siger, ja, alle
er faktisk OK.
Her er siden.
Typen af ​​websiden kommer til at være tekst, men mere specifikt, HTML,
som vi er ved at dykke tilbage i.
Og prik prik prik bare midler, her er HTML.
Og det er, hvor vi afhente historien i dag,
faktisk skriver HTML, HyperText Markup Language, som
er det sprog, som skrives websider.
Det er ikke et programmeringssprog.
Der er ingen funktioner eller sløjfer eller betingelser.
Det er et kodesprog, samt igen ser i dag,
der giver dig mulighed for at angive hvordan man kan strukturere og stilisere
æstetisk en webside.
>> Så dette var den ene og kun side vi virkelig
kiggede på, hvis kortvarigt, på mandag.
Og bemærke et par iøjnefaldende egenskaber.
Der er en masse åbent vinklet beslag og tæt vinkelklamme.
Mellem de vinklede parentes er ord.
Og vi kommer til at starte kalde disse ord tags.
Så åbneparentes hoved og lukkede beslag hoved
er de åbne og lukkede tags, eller start- og slut-tags
henholdsvis et HTML-element, som vi kalder det, der kaldes hoved.
Og det samme gælder jargon til krop i HTML og så videre.
>> Og hvad er nice er HTML-- og ja, vi får
bruge frygtelig lidt tid på det, fordi du for det meste bare regne ud
hvilke funktioner den har, når du faktisk har et konkret problem
at solve-- du opdage, at en browser er temmelig dum.
Det er bare at gå til do-- ikke ulig a computer-- hvad du fortæller det at gøre.
Og så når du har åbent beslag HTML allerøverst
der, som i det væsentlige betyder bare, hey, browser,
her kommer en webside skrevet i HTML.
>> Når det ser åbneparentes hoved, det betyder bare,
hey, browser, her kommer hovedet, eller den øverste del af min webside.
Når den ser en lukket beslag hoved, det betyder bare, hey,
det er det for hovedet.
Standby til noget andet.
Og at noget andet er tilsyneladende vil være det organ.
Og når du ikke har et tag, ligesom du har bare hej, komma, verden,
der er bare kommer til at være rå tekst, i sidste ende vises på skærmen.
>> Nu, vil du bemærke også indrykningen her.
Du kan sikkert udlede hvordan vi bearbejde det.
Hver gang jeg åbner et tag, så at sige, indrykke jeg.
Og hver gang jeg lukker et tag, jeg un-led,
samme ånd til krøllede parenteser.
Og udover det, er jeg venlig for at bruge min dømmekraft.
Bemærk, at jeg ikke gider at ramme Indtast indersiden af ​​denne titel tag.
Hvorfor?
Nå, jeg har lige besluttet det så en lidt renere til mig, mennesket,
bare ikke gider at gøre det.
Så igen, er der nogle dom kalder bare
ligesom der er i C eller ethvert sprog.
>> Men bemærk også, at denne indrykning egner sig til en mental model,
ikke at over komplicere det.
Men et træ, right?
Hvis du tænker på en web side, tilsyneladende skrevet
ligesom dette, som værende pænt indrykket på den måde,
du kan næsten tænke på åbneparentes HTML lukket beslag tag afgrænse
roden af ​​en node, et stamtræ stil knude i stil med træer
vi kiggede på sidste fredag.
>> Og ja, vi har på lige her hvad vi vil kalde en DOM, D-O-M, dokument
objekt model, en fancy måde at sige et træ, der repræsenterer denne HTML.
Og bemærk, at HTML har, vil vi sige, ligesom en familie træ, to børn.
Til venstre er hovedet.
Til højre er kroppen.
>> Og ligesom en hjernedød tanke øvelse, hoved, har selvfølgelig hvor mange børn
overensstemmelse med denne struktur?
Så bare en, title-- og det er derfor, vi har
pilen går fra hoved til titlen.
Så det er, som om den pågældende person i familietræ havde blot én afkom.
Og så selve titlen kan siges at have et barn også.
>> Husk på, at HTML havde hej, komma, verden under den.
Og jeg har simpelthen trukket det inden for en oval i stedet for et rektangel bare
at formidle semantisk at selvom det er en node i træet, så at sige,
Det er slags fundamentalt anderledes.
Det er ikke et tag.
Eller mere korrekt, det er ikke et element.
Det er bare en tekst node, hvis du vil.
Men disse er helt vilkårlige menneskelige konventioner.
Dette er blot nu min måde repræsenterer, hvad jeg vil som et aggregat
ringe dokumentet.
>> Og som en sidebemærkning, de ting på super øverste venstre hjørne,
åbneparentes udråbstegn doc typen HTML, det ligner et tag,
men det er den dumme hjørne tilfælde, hvor det er bare der, kopieres og indsættes
at angive browsere dette er HTML version 5.
Verden ændrer sig, hvad første linje kode i en side skal være.
Det betyder blot version 5.
Så det gør ikke helt ligne de andre.
>> Okay, så med det sagde, vil du nu sætte pris på
dette forholdsvis denne dumme tatovering nogen fik.
>> [Latter]
>> David J MALAN: Okay, og lad os nu faktisk dykke
til at gøre noget med dette.
Du vil minde om, at sidste gang Jeg åbnede op for CS50 Appliance
og jeg gjorde noget som simpelt som at åbne op gedit.
Og jeg har gemt filen, selv om min desktop-- intetsteds special--
som hello.html.
>> Så lad mig gøre det igen-- hello.html Enter.
Og nu i denne fil, vil jeg gå videre og kopiere det, vi lige
saw-- doc typen html Så jeg har tænkt mig at gøre åbneparentes html lukket beslag.
Og så har jeg tænkt mig at præventivt åbne og lukke tag.
Hvorfor?
Bare så jeg ikke glemmer senere.
Det er bare god praksis, ligesom åbning og lukke krøllede parenteser på én gang.
>> Og hvad så kom næste?
Du kan tænke på tatoveringen.
>> PUBLIKUM: Hovedet.
>> David J MALAN: Hovedet.
Og derefter i her, jeg havde titlen, tror jeg.
Og titlen var vilkårligt, hej, verden tæt titel.
Og derefter ned her, kroppen, af course-- så vi lukker kroppen tag.
Og så bare lidt redundant, Jeg havde den samme ting hernede.
>> Så jeg hævder, at dette er en webside.
Det er noget, kunne nu leve på internettet,
selv om det naturligvis er bogstaveligt talt bor på mit skrivebord lige nu.
Men ja, hvis jeg minimere gedit, Jeg vil se på mit skrivebord dens ikon.
Selv om dette er apparatet, du kunne gøre dette på Mac OS
uden TextEdit eller Vinduer med Notepad selv.
>> Og hvis jeg går videre og dobbeltklik at selv, og select-- godt, lad os
ikke vælge at fordi Chrome er ikke åbne.
Lad os gå videre og åbne Chrome.
Og derefter gøre Kommando-O for åben Og navigere til mit skrivebord
og åbne den pågældende fil.
Det er sådan en browser fortolker HTML, top til bund, venstre til højre.
Hey, browser her er HTML.
Her er hovedet.
Her er titlen.
Her er kroppen.
Og ja, det er sådan det gør denne webside.
>> Men læg mærke webadressen.
Ingen af ​​jer kunne trække op denne specifikke side på din bærbare lige nu,
selv inde i dit apparatet via denne webadresse,
fordi file: // angiver det faktisk på mit filsystem, min harddisk,
ikke dit.
Så det er ikke alt, nyttigt.
>> Lad os nu bevæge sig mod anvende en faktisk webserver.
Og det viser sig CS50 Appliance er mere end blot et miljø, hvor
du kan skrive C-kode og kompilere og køre det ligesom du har gjort.
Det er også blevet konfigureret af personale til at repræsentere en typisk web
server, der er på internettet, en, som du kan betale for
eller en, der er i den såkaldte sky.
>> Og det kører standard gratis open source
software, for eksempel noget kaldet Apache, som måske er
stadig den mest populære web server software i verden
at tusindvis af websteder bruger i dag.
Og det også selv har software som MySQL,
som er en database server at vi i sidste ende vil komme til,
der er kun at sige Jeg kan begynde at behandle
mit apparat som en fuldt udbygget server at jeg ikke betale for andre steder.
Det bare lever på min egen bærbare computer for udviklings- og convenience formål.
>> Så lad os gå videre og drage fordel af dette.
Jeg har tænkt mig at gå videre og åbne en terminal vindue.
Og jeg har tænkt mig at gå videre og move-- faktisk først er jeg
kommer til at navigere til mit skrivebord.
Hvis jeg gør ls, der er hello.html.
Og jeg har tænkt mig at gå fremad og begynde at bruge
en ny mappe vi har ikke brugt før i dag.
>> hello.html-- Jeg har tænkt mig at flytte til ../vhosts til virtuelle hosts--
mere om det i den future-- og derefter ind i en mappe kaldet localhost,
som er øgenavnet givet til næsten enhver computer, uanset om det er en Mac, PC,
eller Linux-computer, og derefter specifikt ind i en mappe, som vi,
personalet allerede oprettet for dig, når du hentede apparatet kaldet
offentligheden.
Og som navnet antyder, noget Jeg sætter i denne mappe, i teorien,
vil nu blive offentlig mindste til mennesker
der har en direkte forbindelse til min computer.
>> Så lad mig nu gå videre og gøre cd til samme mappe
så jeg kan se hvad der er foregår og type LS.
Og ja, det er det eneste derinde.
Jeg hævder nu, fordi jeg har sat dette fil hello.html inde i en mappe
kaldet offentlige inde i en mappe kaldet localhost inde i en mappe
kaldet vhosts, som tak til CS50 personale
er blevet præ-konfigureret til at være roden af ​​din webserver,
Jeg kan nu forhåbentlig gøre dette.
>> Jeg har tænkt mig at åbne en ny fane.
Og jeg har tænkt mig at gå på ikke at file: //.
Jeg har tænkt mig at bruge den faktiske http / localhost, som
igen, er kaldenavnet for min egen server.
Og så har jeg tænkt mig at gå til hvad fil navn, bare for at være klar?
Hvor er denne historie sandsynligvis går?
hello.html.
>> Så med andre ord, vil jeg nu dette er min egen computer, mit eget apparat,
som om det er et virkeligt server.
Dens kaldenavn er localhost.
Men tænk på localhost som gerne Facebook.com google.com, uanset hvad.
Det er bare min lokale navn.
Og så det sidste jeg ønsker, er i roden af ​​harddisken, så at sige,
eller roden af ​​webserveren, ergo skråstreg og derefter
filnavnet hello.html.
>> Lad mig zoome ud og trykke Enter.
Og ja, er der nu min webside.
Så det er lidt anderledes.
Og det er lige så underwhelming.
Dette er den gamle version.
Lad mig formindske skrifttypen tilbage.
Dette er den gamle.
Dette er den nye.
Men hvad er fundamentalt sker nu er, at HTTP bliver brugt.
>> Lad os gøre dette til en lidt mere klar, eller, hvis du vil, en lidt mere kompliceret.
Lad mig gå til nederste højre hjørne af mit apparat.
Og læg mærke til, at alt dette tid, har der været en række.
Det er den unikke adresse af din CS50 Appliance.
Det er en privat adresse, som det fremgår af den 172.16,
hvilket betyder bare kun dig fysisk kan få adgang til denne web-server.
Alt er firewalled og pænt beskyttet fra resten
af verden på grund af denne adressering.
>> Og nu mærke til, men hvis jeg går til denne adresse, ikke i mit apparat,
men i Mac OS-- jeg har tænkt mig at gå tilbage herovre.
Dette er min Mac nu.
Og nu jeg har tænkt mig at åbne op denne version af Chrome her.
Og jeg har tænkt mig at gå til http: //172.16.25 / Og jeg glemmer rest-- 133.
>> Så jeg har tænkt mig at besøge fra min Mac at IP-adressen /hello.html Enter.
Og nu ser jeg fra min Mac at min CS50 Appliance, der er
IP-adresse er at nummer, faktisk opfører
som en web-server på internettet.
Det har ikke en nice let at Husk navn, ligesom Facebook.com,
men det er ved hjælp af HTTP tilsyneladende, selvom Chrome
er en slags forenkle verden for os, men ikke viser os HTTP.
Men det er faktisk præcis det.
Chrome er bare spare nogle tastetryk i disse dage.
Og det er, hvad vi nu ser.
>> Så det er alt fint og godt.
Men det er en temmelig underwhelming side.
Lad mig gå ind og gøre noget lidt anderledes nu.
Så lad mig gå tilbage til gedit.
Og i stedet for hej, verden, lad os sætte et billede.
Og jeg påstod fra before-- lade mig gå ind i min localhost bibliotek offentligheden.
Og lad mig gå videre og kopiere en hel masse filer fra i dag
fra min Dropbox mappe ind på her.
>> Nu hvis jeg skriver ls, se på alle disse filer
at jeg har distribueret af kursus hjemmeside forud for i dag,
hvoraf den ene er stadig hello.html.
Så der er det ene.
Og husker denne tåbelige ene fra sidste time-- cat.jpg.
Så lad mig prøve at indlejre cat.jpg indersiden af ​​min webside.
>> Jeg har tænkt mig at gå videre og gøre cat.jpg, gemme.
Lad mig gå tilbage til Chrome.
Og lad mig zoome ind på skrifttype og nu genindlæse.
Ups, hvor jeg sætte dette?
Standby-- jeg har stadig den gamle version fra mit skrivebord åben.
Så lad mig gå ind i min vhost, min localhost, min offentlige, og hello.html.
Så lad mig nu gå videre og sige cat.jpg indersiden af ​​kroppen
hvor jeg ønsker det skal være vises og genindlæse.
Selvfølgelig er dette ikke korrekt.
>> Så jeg er nødt til at fortælle browseren lidt mere bevidst hvad jeg vil have det til at gøre.
Blot at skrive navnet er naturligvis ikke tilstrækkeligt.
Så huske, at der var en anden tag, image, IMG for korte.
Det er bare fordi mennesker ikke som den type fulde ord.
Og så kan vi gøre source = "cat.jpg".
>> Og nu jeg har tænkt mig at gøre én ting anderledes her.
Selvom alle vores tags hidtil har
havde denne forestilling om en starte tag og en ende tag,
som ikke rigtig gøre sans for et billede, right?
Et billede er enten der eller ikke.
Og så menneskene er kommet med en enklere konvention.
Når du har et tag, der både kan starte og slutte på samme time--
det kan være tom, så at speak-- bare sætte skråstreg indersiden af ​​tag
til allersidst.
Lad mig nu vende tilbage til min browser.
Hit Reload Damn, er noget galt.
Du har sikkert set dette lejlighedsvis på nettet,
selv om det ikke har været din skyld.
Det er webserveren skyld.
Hvad oder dette synes at tyde på?
Det er brudt.
Det er, hvor billedet tilhører.
Ja?
>> PUBLIKUM: Men det gør ikke har adgang til billedet.
>> David J MALAN: Det gør ikke har adgang til billedet.
Det, eller endnu værre, måske det ikke engang eksisterer.
Lad os se om vi ikke kan diagnosticere det.
Husker fra sidste gang, at hvis i Chrome, i apparatet,
eller endda på din Mac eller pc, du gå til menuen Developer
og gå til Developer Tools mulighed, som du sandsynligvis har
anvendes ikke meget eller nogensinde.
Og hvis jeg går til Netværk og genindlæse siden,
lad os faktisk se på HTTP anmodninger, der bliver gjort.
>> Det ligner hello.html er faktisk OK, dermed 200.
Men cat.jpg er et 403.
Så det er ikke en 404.
Fil eksisterer sandsynligvis.
403 betyder forbudt.
Så dette er en smule forvirrende.
Jeg har tænkt mig at gå tilbage til min terminal vindue.
Lad mig zoome op her.
Og lad mig gøre en ls.
Der er de samme filer.
>> Lad mig nu gøre en ls-l, som du har sikkert
brugt før til at se på fil størrelser måske eller tidsstempler.
Og vi ser en hel masse overvældende information.
Men bemærke et par detaljer.
Her er hello.html i dette række her og her er cat.jpg.
Og det er bare apparatet bliver brugervenlig ved at fremhæve JPEG s
i lilla som denne.
Men hvad der ellers er anderledes ved siden af filstørrelsen og filnavnet?
>> PUBLIKUM: [uhørligt].
David J MALAN: Ja, der er to R mere er herovre.
Læg mærke til hvad hello.html har foregår.
Så det viser sig, at navnet denne mappe offentlighed er vigtig.
Alt i denne mappe menes at være public.
Men det er ikke tilstrækkeligt bare for at slippe filer derinde.
Du skal også til at ændre tilstanden af ​​filerne,
ændre tilladelserne for filen til proaktivt ikke
være standardindstillingen, som er, at jeg kun kan læse
og skrive det, jeg er ejeren.
Jeg ønsker, at hele verden alle til være i stand til at læse min fil, så at sige.
Læs betyder bare se den.
>> Og ja, som du kan se i problem sæt syv, det er hvad disse R middelværdi.
Disse to R middelværdi lade alle andre steder i verden også læse det,
især nu, Det er i denne mappe.
Så den nemmeste måde at løse dette er at gå til min prompt og gøre chmod for forandring
mode og derefter gøre et + r, helt, alle, alle, plus r for læse,
og derefter cat.jpg Enter.
Intet synes at ske, som betyder normalt en god ting.
Så ls-l igen-- nu lad os se på cat.jpg.
Og denne tilladelse synes at have ændret sig.
Som en sidebemærkning, hvis du laver en fejl og du, for eksempel,
lige lavet your-- jeg ikke know-- essay offentligt tilgængelige ved et uheld,
du kan gøre det modsatte, chmod a-r.
Selvom ærligt, bør det ikke være i offentlighedens bibliotek
alligevel, hvis det er den bekymring.
>> Så lad os nu gå tilbage til min browser og reload.
Og jeg har tænkt mig at klikke den lille Ghostbusters
symbolet for at fjerne den del af skærm, så vi kan se nye anmodninger.
Og ja, her er Grump Cat fra før.
Men endnu vigtigere, teknisk, der er
nummer 200, som betyder, at vi fik det OK.
Okay, så det er alt fint og godt.
Men vi er ikke at gøre det bedste af hjemmesider,
heller ikke vil vi forsøge alt for hårdt til gøre mest fantasifulde af hjemmesider i dag.
Men lad os i det mindste gøre noget super velkendt før raslende
fra et par andre mærker.
Så formoder jeg ikke bare vil have en kat her.
Antag jeg rent faktisk ønsker dette kat til at linke til noget.
>> Jeg kunne for eksempel gøre noget som dette.
en for anker href for hyper henvisning equals--
og lad os bare gøre noget ligesom www.google.com close
citere tæt beslag.
Og nu søge efter katte.
Luk anker tag.
Så dette har kun én slags af fundamentalt nye detaljer.
Mærkaten naturligvis er forskellige.
Det er det navn, en for anker href eller hyper reference.
>> Men endnu vigtigere, er der denne syntaktiske træk her.
Dette er, hvad vi vil begynde at kalde ikke et tag, men en attribut.
Og en attribut er noget, modificerer opførslen af ​​en tag.
Og denne attribut, href, midler ændre adfærd dette anker
så når der klikkes på, det går til denne URL her.
Og selvfølgelig, at webadressen er Google.
>> I mellemtiden, hvad er dette tekst her kommer til at være?
Nå, der kommer til at være hvad det menneskelige faktisk
ser som det understregede link, så simpelt er det.
Så lad os prøve dette.
Lad mig gemme det.
Jeg er stadig i hello.html.
Men i de udgaver online, vil du se de faktiske filnavne vi allerede forberedt.
Lad mig gå videre og genindlæse.
Og nu er det en meget underwhelming side stadig.
Men hvis jeg svæve over there-- og det er en lidt lille,
men-- du kan se i bunden venstre hjørne af skærmen,
det er faktisk at gå til google.com.
Og hvis jeg klikker der, vil det piskeris mig vej til den faktiske Google.
>> Men bemærk her en mulighed for udnyttelse, lige som en sidebemærkning.
Og vi vil komme tilbage til andre spørgsmål om sikkerhed inden længe.
Fordi der er denne dikotomi mellem hvor du gå og hvad du siger,
du kunne gøre noget lignende denne-- http://www.google.com.
OK, og nu, hvis jeg genindlæse efter at have gemt den pågældende side,
det ser ud som jeg har tænkt mig at gå til Google.
Men der er ingen grund til at jeg nødt til at gå til Google, right?
Jeg kunne faktisk gå til noget lignende badguy.com, genindlæse siden herovre.
Og varsel, det ligner stadig Google.
Og kun hvis jeg er skarp nok til at svæve over her
ser jeg det endda gå til gå til en anden placering.
>> Så hvis du nogensinde har fået en e-mail, især
en fra Paypal, eller tilsyneladende fra Paypal
beder dig om at logge ind til din konto, dette
Derfor bør du aldrig nogensinde klikke links i e-mails,
helt ærligt, nogen links i e-mails.
Hvis du ved, du har den faktiske penge i Paypal eller Bank
of America eller Fidelity eller ethvert websted, skal du skrive det i.
Fordi se hvor nemt det er at narre nogen til at præsentere, hvad
ligner et link.
Men det faktisk kunne gå absolut overalt.
>> Og der er langt større trusler end dette.
I virkeligheden er dette en smule af en tangent nu, men en
af de bedste jeg nogensinde har set som siden er blevet lukket,
er der nogen førte folk at-- så dette kan sige,
klik her for at logge ind på din konto, en bankkonto.
Og dette var Bank of the West.
>> Så nogen har købt dette.
Og det er lidt nemmere at se det i en mono afstand font zoomet
ind på en 30-fods projektor.
Men når det er lille skrifttype i en e-mail, du modtager,
dette ligner bankofthewest.com, ikke bankofthevvest.com,
som nogen havde betalt $ 10 at købe.
Og så førte dem til svarende til nogle dårlige hjemmeside.
>> Og du vil se too-- faktisk vi kan gøre denne-- hvis jeg går til selve hjemmesiden,
bankofthewest.com igen, tilbagekaldelse fra sidste gang
at hvis dette er deres webside og du er spændt på, hvordan det virker,
du kan helt sikkert gå til Chromes udviklingsværktøjer.
Og du kan se alle de HTML pænt formateret der.
>> Men mere til det punkt, du cam-- lad os lukke
denne-- du kan gå til Vis Udvikler Vis kilde.
Hvorfor kan jeg ikke bare kopiere alle, og så er jeg
kan gå ind i min lille gedit vindue her og gøre min egen webside.
Gem dette i hello.html.
Og sandsynligvis dette kommer til at gå i stykker, fordi det ikke er så nemt som regel.
Men nu, hvis jeg genindlæse min egen side på min egen CS50 Appliance og ramte reload,
OK, nogle ting brød.
Men jeg er temmelig tæt på at have min egen bank hjemmeside, right?
Alt dette HTML--
>> [Latter]
>> David J MALAN: --Jeg ikke actually-- og du
ved, at der er nogen derude, som rent faktisk ville klikke på disse links også.
Så klart, nogle ting brød.
Men det kommer til at føre os ind i en diskussion,
unødigt lige nu om, hvad CSS, cascading style sheets, er,
og hvordan du rent faktisk hente de andre HTML-filer
og JPEG-filer GIF-filer, der hjemmesiden kan bruge.
Men alt dette er accomplishable.
Men det virkelig kan koges ned til disse meget simple heuristik.
>> Så lad os nu bare skimme igennem en par andre eksempler på HTML
bare for at give dig en følelse af hvad du ellers kan gøre.
For eksempel, det er list.html.
Antag jeg ønskede at lave en webside med en liste over huse i quad.
Jeg kan bruge den ul tag for uordnet listen og derefter listeelement barn
og derefter gentage over-- eller liste, rather-- husene pågældende.
>> Og hvis jeg åbner det op, lad os gøre det.
Lad os gå ikke til hello.html, men at list.html.
Damn det.
Hvordan kan jeg løse dette?
Det er det samme problem som før, right?
Så lad mig gøre chmod-- oops-- chmod a + r af list.html.
Og nu, hvis jeg gå tilbage til min browser og klik på Reload, der er det.
Så hvis du nogensinde har ønsket at gøre en punktopstilling, kan du gøre det.
Hvis du ønsker at være super fancy og gøre en ordnet liste, ikke en uordnet liste,
ændre dem til ol, genindlæse siden, og nu browseren vil tælle det for dig.
>> Hvad kan vi ellers gøre?
Nå, et par others-- hvis du har fået lange stykker af text--
for eksempel, nogle Latinsk tekst som denne--
og du vil have det i separate stykker, åben p tæt p for afsnit tag.
Og gør det igen og igen.
Og hvis jeg nu åbner denne fil, paragraphs.html, ja, det
bliver irriterende.
Så lad os nu bare gå tilbage til mit prompt, chmod a + r r stjerne .html--
en dejlig lille wild card så at sige.
Det bør rette alle disse problemer for mig.
Lad os genindlæse.
Der er tre stykker.
>> Og lad os nu gå videre og åbne op en anden.
Hvordan omkring bordet?
Du vil opdage table udseende lidt mere kompliceret.
Men det er den samme idea-- åbent tag, åbent tag,
åben, åben, åbne, lukke tag, åbent tag.
Og disse ske at stå for bord, hvis grænse er tilsyneladende
vil være en tykkelse 1-- uanset at means-- tabelrække, bord
data, hvilket betyder en celle.
Og hvis jeg går tilbage til min browser her og gå til table.html,
du kan se noget som dette, hæslige.
Men vi vil komme til det punkt hvor vi kan faktisk
gøre tingene pænere end det.
>> Så lad mig fastsætte for nu.
Der er klaser af flere tags.
Og HTML er vidunderligt at afhente fordi, helt ærligt, alt hvad du behøver at gøre
er at se på de eksisterende websider som du kender.
Og du er ligesom, åh, det er hvordan de gjorde dette æstetisk.
>> Eller du kan slå op nogen online ressource, hvordan HTML virker,
og du vil se at der er en hele ordforråd af andre mærker.
Men med den simple mentale model alene, at næsten enhver mærke du åbner
har at være lukket, det virkelig er tilstrækkelig til at lære sig selv
HTML efter forstå disse grundlæggende ideer tags
attributter og den veludformning at vi har talt om,
lukke noget, som vi måske åbne så vi må ikke forveksle en browser.
Så lad os nu tage dette til et mere interessant niveau
ved at gå til den faktiske.
Og lad os gå til min Mac her til google.com.
Og nu notice-- lad os gøre dette.
Jeg gong at gå til Indstillinger, Søg Indstillinger.
Jeg vil slå denne irriterende øjeblik resultater ting, hvor den straks
begynder at reagere på din indtastning.
Lad os gøre dette ældre skole, så vi faktisk se, hvad der foregår.
>> Så jeg har tænkt mig at gemme min Indstillinger for Google her.
Og nu notice-- Jeg har tænkt mig at søge efter noget som katte.
Og det er stadig gør auto komplet her, men baseret på ting
mennesker har skrevet tidligere.
Men bemærk, hvad der kommer til at ske.
>> I URL'en i øjeblikket er dette, bare google.com.
Og teknisk set er det skråstreg.
Google er bare spare en karakter og ikke viser os det.
De viser os https, bare at være super betryggende, at vi er
på en sikker eller krypteret side.
>> Så lad mig gå videre og søge efter katte.
Nu fik virkelig overvældende hurtigt.
Kig på længden af ​​denne webadresse.
Men det viser sig, at de fleste af disse ting i webadressen er faktisk temmelig ubrugelig.
Jeg har tænkt mig at begynde at slette ting, jeg ikke forstår.
Jeg ser katte.
Jeg forstår katte.
Jeg ved ikke, hvorfor katte er der igen.
Jeg ved virkelig ikke, hvad dette nonsens er.
Så jeg bare kommer til at holde fremhæve og slette ting
at jeg ikke forstår, destillere URL'en i netop dette.
>> Lad mig nu komme indtaste igen.
Det ligner Google stadig virker.
Så en eller anden grund, er de tilføjer en masse ting til deres URL'er som standard.
Men det er ikke strengt nødvendigt.
Så hvad er nice om dette?
Nå, lad mig gå videre og åbne Chromes Inspector.
Der er en lille mus genvej til det.
>> Gå til fanen Netværk.
Og lad mig nu genindlæse denne side en gang mere.
Og jeg holder Shift.
Som en sidebemærkning browsere tendens til at cache eller gemme
information kun for effektivitetens skyld.
Men som regel, holde Shift og ladning vil tvinge alt
at starte forfra fra begyndelsen.
Og det er hvad jeg ønsker at gøre her.
>> Og mærke alle disse rækker, der bare dukkede op.
Det viser sig, at der i enhver given webside side, kan der være blot en fil
involved-- hello.html-- eller der kan være 52, som i dette tilfælde.
Når jeg besøger google.com, tilsyneladende, min browser
starter 52 separate HTTP-anmodninger.
Hvorfor er det?
>> Tja, se på, hvad der er indeni af denne webside op øverst.
Der er ikke kun tekst, men der er egentlige billeder
af katte over til højre.
Der er en farverig logo op her til venstre.
Der er alle disse ikoner for en mikrofon og så videre.
Der er en masse stykker, bygge blokke, scratch stykker, hvis du vil,
til denne webside.
Og hvad browseren gør upon at få den første fil, som
er denne række her, det er hovedsagelig iteration over HTML top
til bund, venstre til højre, på udkig efter ting som billede tags eller andre tags
der er at nævne andre filer og når den ser dem, går og henter dem
via HTTP, levedygtig helhed kuvert metafor,
og viser dem derefter i passende sted på websiden.
>> Men bemærk her, hvis jeg fokuserer på de første kast, søgning katte,
bemærke, at, ja det er ved hjælp af HTTP 1.1.
Og desværre, Google Chrome lige nu i version 39
er slags fordummelse ting ned og ikke viser os de faktiske overskrifter.
Men hvad var faktisk sendt en anmodning for ikke at skråstreg, men / search? q = katte.
>> Nu, hvorfor er det vigtigt?
Nå, jeg har tænkt mig at udlede fra dette, at hvis du Google
understøtter forespørgsler af denne formular, hvorfor jeg ikke gennemføre min egen søgning
motor til CS50, men blot forsiden ende, blot den grafiske brugergrænseflade.
Og vi vil outsource bagenden, den faktiske søgeresultater til Google.
>> Så hvordan kan jeg gøre dette?
Nå, lad mig gå ind i gedit herovre.
Og lad mig gå videre og åbne op, lad os sige, en ny fil.
Og jeg har tænkt mig at gemme denne midlertidigt som search-0.html.
Og så til sidst, vil vi hurtigt frem til den, jeg allerede forberedt.
>> Og jeg har tænkt mig at hurtigt piske doc typen
html åbneparentes html close beslag html.
Så jeg har tænkt mig at gøre hoved luk hoved åben titel CS50
Søg i stedet for Google-søgning.
Hernede Jeg har tænkt mig at have kroppen, hernede tæt krop.
Og nu har jeg brug CS50 Search.
Og faktisk, lad os bygge denne trinvist.
Jeg har tænkt mig at gå videre og lukke denne og faktisk sætte det i min offentlige bibliotek.
Så giv mig bare et øjeblik.
search-0.html-- Jeg har tænkt mig at tidsmæssigt kalder det search.html.
Jeg har tænkt mig at chmod det en + r search.html.
Og nu jeg har tænkt mig at åbne den.
Okay, så det var hurtigt.
Men målet var simpelthen at få os til det punkt,
for at have denne tekst fil kaldet search.html.
Så ikke meget at se på endnu.
Ja, hvis jeg går til min browser, og gå til search.html, det er alt det er.
Men ved du hvad?
Jeg kan være en smule mere avanceret.
Jeg læste i en bog, at der er en overskrift tag kaldet H1.
Og jeg har tænkt mig at gå videre og bruge den åbne h1 og tæt h1.
Genindlæse siden.
Og nu er det større og modigere, ikke så interessant,
men i det mindste strukturelt mere interessant.
Men lad mig nu introducere et andet mærke.
Det viser sig, at der er en form tag.
Og lad mig lukke denne tag.
Og det viser sig at der er et input tag,
har en attribut kaldet type, hvilket er datatypen for feltet,
hvis du vil.
Og kommer til at være af typen tekst.
Og dens værdi går at være CS50 søgning.
Tæt tag.
Og der kommer til at være nogen begrebet åbning og lukning med separate tags.
>> Lad mig gå tilbage herovre og se, hvad der foregår, genindlæse.
Kom interessant.
Det ligner det er et tekstfelt.
Og faktisk havde jeg ikke lyst at sætte en værdi der endnu.
Lad mig gå tilbage her og faktisk få slippe af med denne værdi at holde det simpelt.
I stedet for en værdi, hvad jeg ønskede at give denne ting var et navn.
Og jeg ved ikke, hvad det er, så jeg vil vende tilbage til.
>> Men under det, jeg vil til at gøre input type = indsende.
Og denne værdi vil være CS50 Search.
Og vi vil se, hvorfor jeg flyttes værdien til dette.
Når jeg genindlæse, jeg synes at nu har begyndelsen af ​​min egen søgning
motor, super hæslig, men helt ærligt, det er
ikke et langt indkast fra hvad Googles standard side ser ud.
>> Hvis jeg går her nu, kan jeg skrive i katte og forhåbentlig klik på Søg.
Men jeg er ikke helt færdig endnu, fordi jeg ikke har gennemført,
naturligvis en database.
Jeg har ikke gennemgået den nettet for søgeresultaterne.
Så jeg er nødt til at outsource det til Google.
Så hvordan gør jeg det?
>> Nå, først og fremmest vil jeg nødt til at tilføje og handling
tilskriver min formular tag, er http://www.google.com/search.
Og jeg ved, at kun ved at have udledes ved at kigge nøje
på deres URL'er.
Og nu tage et gæt.
Hvad skal dette tekstfelt sandsynligvis kaldes, baseret på, hvor vi kom
fra før?
>> PUBLIKUM:? Q.
>> DAVID J MALAN:? Q.
Og vi behøver faktisk ikke spørgsmål markere det viser sig, men q er faktisk det,
q for forespørgsel sandsynligvis ved standard bare fordi det er
hvad Larry og Sergey kom op med år siden.
Så lad mig nu genindlæse denne side.
Det ser ikke så forskellig.
Men nu se hvad der sker.
>> Hvis jeg skriver i katte og klik CS50 Søg og lad gå,
Bemærk, at jeg bliver pisket væk faktiske Google.
Nu Google er ved at blive en smule irriterende, at de er
tilføje en ekstra parameter, hvis du vil, til URL'en.
Det er alt happening automatisk på Google side.
>> Den vigtige del er, at jeg synes at have genereret denne anmodning her.
Og ja, det er hvad der sker.
Når du har HTML, ser sådan ud, dette
er en slags web-udviklere notation for at sige, gå videre og oprette en formular
at når det er fremlagt, det kommer til at gå til denne URL.
Og når webadressen har givet værdier for ting som q,
går ikke bare til denne webadresse.
Faktisk, gå til spørgsmål mærket og derefter q = katte.
Vedhæft parameteren, den HTTP parameter som.
>> Og bare for at være super præcis, hvad der bliver udledt her--
men jeg vil være mere explicit-- er at den metode, jeg vil bruge
er få, i stedet for noget lignende indlæg, som vi til sidst vil se.
Så kort sagt, blot ved at forstå HTML og bruge nogle temmelig simple tags,
kan vi nu begynde at skabe vores egen foran slutbrugeren
grænseflade med en søgning motor bag det.
>> Men dette er naturligvis temmelig hæslige.
Så lad mig faktisk åbne op en lidt bedre version.
Dette er den ene jeg forberedt på forhånd, at har nogle kommentarer.
Men du vil se, at jeg temmelig meget genskabt det.
Så dette er allerede tilgængelige online.
Og jeg tilfældigvis præventivt gå til https bare for at holde det simpelt.
>> Og lad os nu åbne op for en næste iteration af dette.
Er version 1 i stedet for 0.
Hvad springer ud på dig så lidt anderledes i dette eksempel?
>> PUBLIKUM: [uhørligt].
>> Ja, der er denne tekst align center.
Dette er lidt underligt heroppe.
Men dette er faktisk nye.
Og måske gætte, hvad der vil ske.
Hvis jeg går til min browser nu og besøge search-1.html,
det er næsten det samme.
Men det er et skridt tættere på at være lidt mere smuk.
Det er stadig grim, men pænere i det mindst Alt er nu centreret.
>> Så det viser sig, at det, jeg bruger er et andet sprog helt kaldet
CSS, cascading style sheets.
Og CSS helt ærligt, er venlig af, i min personlige mening,
et afskyeligt designet sprog.
Det er meget irriterende at huske alle de forskellige detaljer.
Men det er hvad stylizes den Hele worldwide web i dag.
Jeg fornærmet nogen.
Ok.
Så lad os gå tilbage her og se hvordan vi faktisk bruger dette.
Og det viser sig, i det mindste det er faktisk en temmelig simpelt sprog.
Det er bare Nøgleværdiparrene, ejendomme og værdier, egenskaber og værdier.
Faktisk er her en sådan ejendom og værdi.
>> Blot ved hjælp af stil tilskriver på min krop tag
og give det en værdi af en ord kolon og et andet ord,
eller en ejendom, og en værdi, Jeg kan påvirke æstetik
af websiden, ikke nødvendigvis struktur endnu,
men æstetik det.
Og blot ved at google rundt, jeg er klar at CSS, cascading style sheets,
understøtter en egenskab, der kaldes tekst-align, hvis værdi kan
være til venstre, højre eller centrum, for eksempel.
>> Så nu når jeg genindlæse denne side, hvad jeg fik
var en centreret side, men stadig temmelig grim.
Lad os gå videre og åbne up version 2 af Search.
Og nu opdager jeg har gjort lidt mere.
Bemærk at op her inde i hovedet tag, kan der være mere end titel.
I virkeligheden er der en stil tag.
Og det er her, det bliver bare en lidt rodet at se CSS tider.
>> Bemærk, at jeg synes at have noget at strukturelt ser meget anderledes.
Men her er navnet på tag Jeg ønsker at stiliseret.
Her er vores gamle venner krøllet seler og lukkede krøllet parentes.
Og så her er, at ejendommen og dens værdi.
>> Hvis jeg indlæse denne fil, search2.html, slutresultatet er identiske.
Men det er et skridt i retning bedre design.
Ved factoring denne CSS, jeg har ikke blandet det med min HTML.
Og ja, som vi skal se, jeg kunne genbruge disse egenskaber og værdier.
Hvis jeg ønskede at gøre klaser af dele af min webside centreret,
Jeg behøver ikke at skrive style = text-align center over det hele.
Jeg kan sætte på ét sted måske gerne op på toppen.
>> Men selv dette ikke er den bedste design.
Faktisk er en af ​​de ting, du vil lære som du bruger mere og mere tid med
webprogrammering er, at jo mere du kan modularize ting og faktor ting ud
ligesom .h filer lad os faktor ting ud, gerne helpers.c lad os faktor ting ud
et par psets siden.
På samme måde kan vi ønsker at opnå dette.
>> Så mærke i version tre af search.html jeg har
ryddet op lederen af siden og bare sætte
i dette, et link tag, som i modsætning til det navn,
ikke give dig et hyperlink.
Det forbinder til en anden fil ved hjælp af en href, hvis værdi i denne sag,
er search-3.css
Så jeg er klar, vi vil hurtigt.
Men alt jeg gør er en slags for at flytte tingene.
Lad mig åbne search-3.css.
Der er det, intet virkelig til det.
Jeg har lige kopieret og indsat det i en ny fil, ligesom vi indregnet ting ud
i andre filer før.
Og result-- helt underwhelming--
vil være nøjagtig den samme.
Men vi bevæger toward-- nej, det er ikke.
Åh, jeg ved hvorfor.
>> Så det ser ud til at være en fejl.
Og det er i en vis forstand.
Men lad mig åbne min fanen Netværk.
Lad mig genindlæse siden.
Ah, hvorfor CSS ikke anvendes?
Nå, den CSS-fil, på samme måde, har at være verdens læsbar, så at sige.
Og det er for øjeblikket forbudt.
Så lad mig gøre en chmod a + r af stjerne dot CSS-- whoops--
vi er dot CSS er bare filtypenavn for CSS-filer.
Lad mig nu vende tilbage til min browser og reload.
OK, lidt bedre.
>> Nu Lad mig gøre en sidste ting.
På jagt-4.html.
Jeg har en version, som jeg troede bare var måde køligere, omend måde mere
kompliceret.
Lad os se på resultatet først.
Luk dette at give os mere plads.
Skift denne søge-4, Enter.
>> Og nu er en masse ting er brudt.
Jeg har tænkt mig at gå tilbage ind i min mappe her.
Og nu vil jeg bare vil gøre en chmod a + r på en file--
fordi jeg ved, det exists-- kaldet logo.gif, som er et billede.
Og nu genindlæse.
Og wow-- så nu er jeg temmelig tæt, helt ærligt,
at lide 1999-udgaven af ​​Google, og helt ærligt, i 2014-versionen af ​​Google,
højre?
>> Så det er nu gå til deres hjemmeside, i sidste ende, hvis jeg søger efter katte.
Og det er faktisk.
Men hvad gjorde jeg gøre anderledes i denne version 4?
Så vi vil ikke dvæle for meget på det her.
Du vil se dette i problem sat syv vinder.
Men bemærk jeg gjorde et par ting.
>> Jeg introducerede en div tag, som er division,
samme ånd til et stykke tag.
Men en division er ligesom, her er et rektangulært usynligt region
på skærmen.
Lad os give det en unik identifikator, en sidefod, bare
således at vi kan tale om det i vores HTML andetsteds.
Her er en anden div af siden hvis ID vil være indhold.
Det er indholdet af siden.
Og heroppe er overskriften på siden.
>> Med andre ord, har jeg hovedsagelig i HTML am mentalt
visning af denne webside som tre komponenter, en header
heroppe med denne usynlige rektangel, indholdet i midten, og derefter
sidefoden dernede, selv selvom vi ikke ser disse ting.
Fordi jeg ønsker at i mit hoved side her eller i en .css fil,
Jeg kan bruge denne syntaks.
>> Header er ikke et tag.
Det er et id, så det viser ud at ved at gøre #header,
Jeg kan nu anvende en eller flere egenskaber til hovedstød.
Jeg kan gøre det samme indhold, den samme for indhold her.
>> Så for eksempel, i sidefoden, varsel alle disse egenskaber, jeg tilføjer.
Og jeg ved, at de eksisterer blot ved læsning op på dokumentationen for CSS.
Skriftstørrelse bliver smaller-- så nogle relative skriftstørrelse.
Vægten vil være fed.
Margin-- hvor mange pixel omkring it-- er 20 pixel.
Og det kommer til at være centreret.
>> Men lige nu, siden ser sådan ud.
Hvis jeg ikke er tilfreds med mit eksemplar lige der,
Jeg kunne gøre noget ligesom farven rød.
Og så jeg kan gemme denne, genindlæser og nu har jeg stiliseret sidefoden.
Så dette er blot antyder magt af hvad du kan gøre i en webside
til at ændre på tingene.
>> Og endnu sejere end dette, hvis du ønsker at stikke rundt med de faktiske hjemmesider,
du kan ikke permanent ændre dem.
Men hvis jeg åbner op Chromes Inspector igen
og jeg går ikke til den venstre side her, hvilket viser Facebooks HTML,
men viser til højre side alle sine CSS,
kan du enten og ændre tingene på flue.
Så lad mig gå videre og gøre dette.
>> Lad mig gå videre og kontrol klik på denne tilfældige ord her,
underskrive, og klik på Undersøg Element.
Chrome meget bekvemt springer til H1 tag, som Facebook bruger.
Og bemærk her Facebook har slags dovent
hårdt kodet skriftstørrelse som en egenskab her.
>> Så cool ting er dog at hvis jeg faktisk gå ind her
og sige, åh, Facebook, jeg kan ikke lide det 64 pixels, kan vi nu ændre Facebook.
Selvfølgelig er vi kun ændre det for mig personligt i øjeblikket.
Men dette er blot en anden værktøj i vores værktøjskasse
der kommer til at give os mulighed for at nappe og finde ud af, og også diagnosticere
spørgsmål i vores egne websider.
Og vi kunne ligeledes gå over her, hvilket er det samme.
Hvis du virkelig ønsker at få fancy, jeg betyde, nu kan du virkelig mutere siden
og gøre skøre ting.
>> Så hvorfor er alt dette nyttigt?
Nå, i sidste ende, men vi er lyst til at være
stand til at skabe websider, drives af vores egne bagenden,
ikke ved bare Google og outsourcing bagenden der.
Vi har faktisk ønsker værdi, for eksempel,
af vores søgemaskine handling tillægge gå ikke til en anden,
men til noget som search.php, hvor search.php er på vores egen server,
ikke på en andens.
>> Og så for at komme dertil, vi faktisk behov for at indføre et nyt sprog.
Så vi har allerede set på en ny sprog her, eller to virkelig, HTML
og CSS.
Men de virkelig er bare strukturelle og æstetiske sprog.
De er ikke programmering sprog per se.
Og det er omtrent lige så meget formelle tid, som vi vil bruge på dem.
Fordi vi vil begynde nu at overgangen til PHP.
>> Så PHP er et virkeligt programmeringssprog.
Det er et scriptsprog i den forstand, at det er
menes at være lettere vægt end noget lignende C.
Og det er et fortolket sprog, hvilket betyder, at det ikke er kompileret.
Så i en nøddeskal, hvad betød det når vi brugte et sprog som C
og vi var nødt til at kompilere det?
Hvad betyder det at kompilere C kildekoden?
PUBLIKUM: [uhørligt].
David J MALAN: Sig det igen?
PUBLIKUM: [uhørligt].
David J MALAN: Perfect.
Det forvandler det til binær.
Det forvandler det til nuller og ettaller fra faktiske engelsk-lignende kildekode.
Og så kan vi faktisk køre disse nuller og ettaller
ved at passere dem gennem CPU ved at dobbeltklikke på et ikon
eller kører en kommando.
>> PHP og Python og Ruby og Perl og JavaScript
og klaser af andre sprog fortolkes
sprog, hvilket vil sige du ikke samle dem.
Snarere, du fodrer dem som input til et program kaldet en tolk.
Og det tolk, som en anden skrev,
læser din kildekode top til bund, venstre mod højre og blot fortolker
disse linjer og gør hvad du siger.
>> Så hvis du støder på en linje, der siger print,
det ikke nødvendigvis konverteres print til de tilsvarende nuller og ettaller.
Det bare har denne tolk ligesom et stort hvis tilstand, der siger,
hvis programmør instruktion er print, skal du gøre følgende.
Så det fortolker det bare ved slags ræsonnement
gennem hvad du fortæller det at gøre.
>> Og PHP er et af disse sprog.
Og PHP år siden var designet netop til web programmering.
Og det var oprindeligt en meget sjusket rodet sprog.
Og ja, der er en enorm mængde af dårlig PHP kode derude.
Men selve sproget har modnet i årenes løb,
så meget, at nu er det faktisk en fantastisk næste trin
pædagogisk fra C, fordi det er så stoppede kender til alt
du lige har set i de seneste par uger.
>> Den ene oprindelige forskel, vi vil se er der ingen hovedfunktion længere.
Når du begynder at skrive kode, det er bare kommer til at få gennemført uanset hvad,
som vi skal se om et øjeblik.
I mellemtiden, her er hvad en variabel ligner i PHP.
Det er lidt anderledes, men kun knap.
>> I PHP er der ikke stærk skrive.
Der er uge skrive, som netop betyder, at der
er datatyper som strygere og numre og andre ting.
Men du ikke gider at angive hvad de er længere.
PHP tal det ud for dig.
Den dollartegn er bare en beslutning at PHP folk gjort år
siden sådan, at enhver variabel i PHP bare starter med et dollartegn.
Det er faktisk slags nyttige i at det springer ud på dig lidt mere.
>> Men efter, at denne er en tilstand, PHP.
Hvad er anderledes i forhold til C?
Trick question-- ingenting, som er faktisk virkelig rart.
Boolske udtryk i PHP-- samme.
Boolske udtryk med og versus eller, switches, sløjfer, sløjfer, loops-- OK,
dette er forskellige.
>> Så det viser sig der er en par andre funktioner i PHP.
En af dem er faktisk denne, som er vidunderligt praktisk.
Hvis $ tal er en matrix, at du har erklæret tidligere i et program,
du har denne fancy for hver konstruktion at i stedet for at gøre alt dette
irriterende jeg er lig 0, jeg er mindre end dette, [? Jeg ++?]
for hver numre som antal, hvor hver af disse dollartegn værdier er lige
en variabel, og sidstnævnte du kan tænke på som I.
Man kunne kalde det noget, du ønsker.
Jeg kaldte det nummer.
Dette kommer til at gentage over array kaldet numre.
Og på hver iteration, er det gå til automatisk at opdatere
for dig dollartegn nummer variabel, så du hele tiden
har adgang til den variabel, du vil uden at skulle gøre noget firkantet beslag
notation eller indeksering i et array.
>> Ud over, at vi har endda ting som arrays, der ser næsten det samme,
bortset fra at det er meget almindeligt, da vi får se, både i PHP og JavaScript
at pre initialisere et array ved hjælp af firkantede parenteser.
C bruger krøllede parenteser.
Så det er lidt anderledes, selvom vi virkelig ikke bruge det trick meget.
>> Men endnu mere kraftfuldt, PHP har associative arrays,
som er en fancy måde sige hash-tabeller.
I virkeligheden, hvis du ønsker at erklære en hash Tabellen i PHP, i modsætning til i C-- hvor mange
kodelinjer tog det at faktisk gennemfører en hash tabel i C?
Eller hvor mange linjer af kode er det tager at gennemføre en hash tabel i C?
Så det er sikkert en masse, right?
Det er et par dusin, måske 100 eller 200.
Det er nontrivial.
Eller det er ved at være, som vil du hurtigt se, nontrivial
at gennemføre en hashtabel [Uhørligt], og også en chance.
Men i PHP-- og helt ærligt, jeg sandsynligvis ikke bør fortælle dig dette
indtil Monday-- i PHP, hvis du ønsker en tabel, gjort.
Det er en hash table-- så med én linje kode.
Og
>> En masse sprog gør det.
Hav det sjovt med pset fem.
Så en masse sprog gøre dette.
De giver dig disse abstraktioner at andre mennesker, andre programmører,
har skabt for dig, så du kan stå på deres skuldre
og begynde at bruge ideer, der er super overbevisende, ligesom hash-tabeller og træer
og prøvede.
Men du behøver ikke nødvendigvis at gennemføre disse ting selv.
>> Og så i sidste ende, hvad vi kommer til at bruge PHP for
er potentielt skrive programmer af den såkaldte kommandolinje.
Vi kunne genskabe hver program vi har skrevet dette semester hidtil,
undtagen måske breakout som bruger SPL, der er specifik for C i øjeblikket.
Men hver anden problem indstillet, sikkert Mario og Cæsar
og Vigenere og [? Crack?] Og fremefter, vi
kunne re-implementere i PHP, og sandsynligvis en smule lettere.
>> Men hvad vi i sidste ende vil at bruge PHP for er web programmering.
Og vi kommer til at indføre næste uge en mental model, et paradigme kaldet
MVC, model view controller, som hvis du har gjort programmering
før i Python eller Ruby eller andre steder, du
måske kender af dette team med Rails og Django og lignende.
Men hvis du er ny til også dette, vil du se
at dette er faktisk en meget naturlig udvidelse af faktoriseringen
og slags design kode, vi har
gjort i C. Vi vil nu anvende nogle af disse lektioner til PHP
så i sidste ende er vi at implementere vores egne hjemmesider.
Og hvis du er en slags hypnotiseret eller forbløffet
at vi kommer til at gøre alle af så hurtigt,
indse, at næsten alle semester, næsten 90%
for studerende CS50, herunder dem, der aldrig har programmeret før,
ender med at gøre de endelige projekter, er baseret på web-programmering.
Og så vil du se, at de vender tilbage er høj i de kommende uger.
Så vi vil se dig derefter på mandag.
>> SPEAKER 1: Og nu, Deep Tanker ved Daven Farnham.
Hash tabeller.
>> [Latter]