>> DAVID MALAN: Okej.
Detta är CS50, och detta är I slutet av vecka nio.
Det har varit en virvelvind över de senaste dagarna.
Och problemet satt sju, om du är knä djupt in i det, inser att det är ganska
lite nytt som finns där.
Men låt oss se om vi inte kan pussla allt tillsammans här i korthet
innan dess vridande sig i ännu en annan riktning och ser
var annars kan vi gå.
>> Så hittills har vi pratat om HTML.
Vi har pratat om CSS.
Vi har pratat om PHP.
Du har börjat uppleva SQL.
Idag ska vi prata lite om JavaScript.
Men hur gör alla dessa disparata språk passar ihop?
>> Så vi pratade förra veckan om Begreppet att ha en server.
Så låt oss bara dra denna rektangel som en webbserver här.
Och en webbserver fungerar säkert filer.
Och en del av dessa filer kan vara HTML-filer.
Så en av de saker som en webbserver kan spotta ut kan vara en fil som
Vi ska bara dra ut så här innehåller vissa HTML.
Så i lekmannatermer, vad gör HTML kan du göra?
>> PUBLIK: Sidan ser trevligt.
>> DAVID MALAN: OK, gör en sida ser trevligt, även om jag tror att jag har bevisat
som annars.
Så HTML låter dig lägga ut sidor strukturellt, och det gör att du kan
slags estetiskt märka upp en sida, markera statiskt innehåll, så att du
kan sedan visa den med en webbläsare.
>> Men det är nyckeln.
Det är statiskt innehåll.
Du skriver det, spara det, och sedan skickas du det.
Och webbservern fungerar sedan det upp till besökarna.
>> Men vi stilisera saker med hjälp av en annan språk helt och hållet.
Vi började använda en stil attribut på vissa taggar.
Och stilen attributet låt oss ställa saker som teckenstorlek och färg.
Och du har förmodligen börjat upptäcka, eller du kommer snart att för final
projekt potentiellt, men ändå andra egenskaper som du kan använda i CSS.
Och så i lekmannatermer, vad egentligen då gör CSS göra?
De är bara exempel därav.
Vad innebär det att låta dig göra det HTML verkar inte från vad
vi har sett så här långt?
>> PUBLIK: Definiera stilar själv.
>> DAVID MALAN: Definiera stilar själv.
Så definiera saker som klasser som du kan ha stött på, eller unikt
identifiera noder i ett dokument så att du kan stilisera dem.
Men mer specifikt, skulle jag säga att CSS verkligen gör att du kan ta saker i
sista kilometern och låter dig ange mycket mer exakt estetik,
medan HTML för det mesta låter du strukturera dina sidor.
>> Och även om det finns vissa standardvärden, som vi såg taggen för
en rubrik tagg, vilket grovt sett gjorde saker stora och djärva.
Det är en ganska allmän definition av taggen - stora och djärva.
Vilken textstorlek är det?
Vilken färg är det?
Hur fet är det?
Och CSS kan du mer fint tune sånt.
Förutom layout, som en del av er har sett.
>> Och ärligt talat, är CSS lite av en rörig språk.
Det är mycket kraftfull i att du kan göra bokstavligen alla webbplatser som du har
ses på webben i dag med det, men det är typ av en smärta i nacken.
Och en del av er har slagit i huvudet mot väggarna redan bara för att göra
något dumt som centrum en meny på Problemet set sju om du har fått till
den punkten redan.
>> Men inse, dessa saker bli lättare med tiden.
Du börjar märka mönster.
Och återigen, kommer Google att bli din vän för de olika sätt på vilka du kan
lösa dessa typer av problem.
>> Och jag vågar säga med CSS och HTML mer allmänhet, kan man lösa problem i
många fler sätt, som alla kanske mycket väl vara korrekt, än du kan
i något som C, även nu PHP eller Javascript.
Det finns bara många olika sätt att lägga ut saker.
>> Men det började få rörigt, sade vi.
Bara slags sammanblandning din HTML och din CSS med stil attribut var
lite slarvig.
Och så vi istället sagt, typ av abstrakt sett, att du borde
åtminstone börja faktor ut din CSS förmodligen.
Inte din stil attribut, men åtminstone använder stil-taggen inuti vad
del av webbsidan?
>> PUBLIK: Head.
>> DAVID MALAN: I huvudet.
Fram till nu hade vi bara titeln upp där, men du kan också lägga till en stil
tagga, och du kan lägga din CSS grovt talar mot toppen på sidan.
Men sedan tog vi ett steg längre och vi räknade ut det mer
i en separat fil.
>> Och så dessa två filer var på något sätt nu länkade.
Och faktiskt var det tagg som gjorde det.
Och vad som var ett av de övergripande motiv för facto titt CSS
desto mer?
>> PUBLIK: Återanvändning.
>> DAVID MALAN: Återanvändning.
Rätt?
Du kanske har sett i p-set redan sju att en hel del av sidorna, de
inköpssidan, säljsidan, den portföljsida, troligen
strukturerade något liknande sätt.
Det finns en CS50 finans logotypen högst upp om du inte har bestämt dig för att ändra det.
Det finns en sidfot på ner på sidorna.
Och CSS kan du sedan faktor ut den till en separat fil så att om
du vill ändra något globalt över hela din webbplats, kan du verkligen
bara ändra på ett ställe.
>> Men det finns ett pris som du betalar potentiellt genom att ha vägts in
CSS från min HTML-fil i en separat fil referera den med den
tag, som vi såg i måndags.
Vad kan nackdelen vara på detta?
När jag tänker tillbaka en vecka sedan att när vi är talar om HTTP och TCP / IP och hur
Internet fungerar.
Något över här?
>> PUBLIK: Det tar längre tid.
>> DAVID MALAN: Det tar längre tid.
Varför?
>> PUBLIK: [OHÖRBAR].
>> DAVID MALAN: Ja.
Så det utan tvekan tar lite mer tid.
Eftersom man är CSS uppenbart inte i samma fil.
Så nu har du att göra inte en, men två ansökningar.
Och var och en av dessa ansökningar som vi såg i Chrome i den så kallade inspektör,
och vi tittade på fliken nätverk, var och av dessa filer kräver en HTTP
begäran, som vi såg tar viss tid.
Nu, kanske är det inte mycket.
Kanske är det bara 20 millisekunder.
Det kanske är 200 millisekunder.
>> Men tänk på en sida som Facebook, eller CNN eller Google, som är mycket
större än de exempel vi har tittat på hittills.
Dessa sidor kan ha massor av filer, vilka var och en kan kräva en
hämtning av en fil.
Så saker kan potentiellt börjar sakta ner.
>> Och speciellt i dessa dagar när vi alla har mobiltelefoner i våra fickor och
långsammare internetuppkoppling, behöva vänta ytterligare några millisekunder, några
mer millisekunder för ytterligare filer kan faktiskt vara långsam.
Latens är det ord som beskriver typ för att vänta på att du har att du
upplever när väntar någon upplysning.
>> Men det finns en uppsida.
Så det är inte all slags -
det faktiskt är lite av en gungbräda här.
Nackdelen nu, men vilka webbläsare kan göra om de är smarta för att undvika
behöva begära samma styles.css filen igen kan vara att göra vad?
>> Cache den.
Så caching -
C-A-C-H-E -
innebär i allmänhet här bara för att spara filen du begärde första gången, och
sedan kontrollera din cache för det.
Kontrollera att du är typ av lagringsbehållare, och om du redan har en
kopia av styles.css, även om någon annan sida i p-set, eller någon hemsida,
begär det igen, bara för att ge den användare samma cachad kopia.
Bry dig inte om att begära det.
>> Nackdelen där, men som en del av er har snubblade över i p-set.
Om du gör en ändring på servern och du går tillbaka till webbläsaren och du
ladda om, ibland webbläsaren gör dig en tjänst och inte bry
åter hämtar din styles.css fil eftersom, kom igen, vad är oddsen
att dessa stilar som Facebook använder kommer att förändras timme för timme eller
dag till dag?
Det är ganska lågt.
De kan förändras över tiden, men inte per minut eller per timme.
>> Så ett trick, bara FYI när man gör webb utveckling, ofta hålla ner
skiftnyckel till exempel och sedan på ladda i din webbläsare, och att viljan
vanligtvis tala om för webbläsaren reload allt, även om du redan har
det i cachen.
Så återigen, upsides och nackdelar, men alla av dem
slutligen utforma beslut.
>> Så nu, gjorde vi inte bara avslutar berättelsen här.
Om jag nu går tillbaka och tillbaka och tillbaka och tillbaka, började vi att presentera inte bara
HTML, men PHP.
Så i lekmannatermer, vad gör PHP låt oss göra?
>> PUBLIK: [OHÖRBAR].
>> DAVID MALAN: Vad är det?
>> PUBLIK: Införa logik i koden.
>> DAVID MALAN: Ja, införa logik i koden.
Så det är ett riktigt programmeringsspråk med loopar och variabler och
funktioner och villkor, samt alla de saker som vi har använt vägen tillbaka
när sedan scratch.
Och PHP, vi har sett, kan användas antingen på kommandoraden - det
behöver inte ha något att göra med webben, även om det är
egentligen dess ursprung och vad det tenderar vara bra på och bidrar till -
men du kan använda PHP enbart av naturen av det faktum att den har en print ()
funktion, och en printf ()-funktionen, eller ett eko ()-funktion.
Det finns klasar sätt du kan skriva ut text med PHP.
>> Därför kan du använda denna programmering språk till utgång exakt
vad vi pratade om tidigare.
Du kan dynamiskt generera din HTML.
Kanske inte alla av det.
Kanske hårda kod saker, som den sidhuvud och sidfot, och logotypen,
och dina stilmallar, och allt detta.
Men för något som p-set sju, där du manipulera lager och
visar användarens portfölj, vilket är kommer att dynamiskt förändra, du kan
säkert använda PHP och logiken ger du som programmeringsspråk för att
utmatning dynamiskt delmängder på sidan.
>> Så när du talar om dynamiska webbplatser, eller webbprogrammering, det är
vad du egentligen pratar om.
Med hjälp av ett språk som PHP, eller saker heter Python eller Ruby, eller Java, eller
ytterligare andra språk, för att fråga en databas ofta, eller en annan server, och
sedan dynamiskt spotta ut HTML.
>> Nu slutresultatet, som en sidoreplik, är som HTML på de flesta webbplatser,
inklusive din p-set sju, är förmodligen kommer att bli en stor oreda om
man tittar på käll kod i en webbläsare.
Det är inte en stor sak.
Vid denna punkt, när vi bryr oss om stil, bryr vi oss om det
saker som du skriver.
Vi kommer inte att bry sig om saker att det som din kod utgångar.
Så oroa dig inte om indrag här om det är PHP som är
faktiskt mata grejer.
När allt kommer webbläsaren inte vård, och en human inte kommer att leta
vid källan ändå.
Vi personalen, till exempel, skulle att titta på din PHP.
>> Så låt mig ge ett snabbt exempel nu varför annars detta kan vara användbart.
Så ärligt talat, jag kan inte minnas den senaste gången jag använde C för att lösa ett problem i
den verkliga världen.
Det var nog i forskarskolan vid Jag behövde för att använda ett språk som
var ganska låg nivå och gav mig möjlighet att göra något mycket hög
utföra för att verkligen rädda så många CPU cykler som jag kunde, till stor del
eftersom jag använde enorma datamängder, och varje CPU-cykel räknades.
Och ärligt talat, även i saker som telefoner dessa dagar och andra enheter
där du inte riktigt har så mycket minne och du inte riktigt har så
mycket CPU, med hjälp av snabbare språk fortfarande är tilltalande.
>> Men i den verkliga världen, när du bara vill kasta något program tillsammans med
analysera några data eller du har samlat en hel massa registreringar för
några studentgruppen och vill mycket snabbt automatisera skicka e-post
en efter en till var och en av dem registranter, du kommer att nå för
en högre nivå språk än C så att säga.
Något som PHP eller Python eller Ruby, eller ett halvt dussin andra som finns
dessa dagar.
Men de tre är nog den mest trendiga just nu.
>> Och vad detta innebär är att du kan öppna upp en textredigerare som gedit eller
mest något annat och sedan bara börja skriva kod utan att behöva oroa
om att sammanställa, utan att behöva verkligen oroa minneshantering,
tanke om att lite slarv kommer så småningom komma tillbaka
bita dig om datamängden blir större eller problemet blir stora.
Men vad detta innebär för oss är följande.
>> Låt mig gå vidare och köra stavnings från problem set sex.
Så det här är min trie-baserad implementering som jag använde på den stora
styrelse där jag utförde inte så bra.
Vi kommer tillbaka i en veckas tid och se över de som fick sluta på toppen av
stor ombord på vår sista föreläsning.
Men för nu, låt mig gå vidare och bara kör min lösning i text, så gör vi
King James Bible, och nu kör vi.
>> Så de är alla de förment felstavade ord av
King James Bible.
Och min genomförandet tog halv sekund totalt.
Så inte alltför illa om detta dator.
Men tänk på hur mycket kod jag var tvungen att skriva.
Tänk hur mycket kod som du var tvungen att skriva.
Tänk hur många timmar du spenderat i D-hallen eller din studentrummet eller var
faktiskt koda upp den lösningen.
>> Tja, om jag faktiskt har en högre nivå språk som PHP, ta del av
vad jag kan göra här.
Först antar att detta är i stället din distribution kod.
Det här är en fil som heter stava.
Det är tillgängligt som en del av dagens fördelning kod.
Och jag ska vinka min hand på de flesta av detaljerna, men det är faktiskt
ett intressant exempel på hur du kanske port ett språk
som C över till PHP.
Jag bokstavligen öppnat två textfönster, en med min C-versionen av speller.c,
och jag har precis börjat att översätta den i min bege dig till PHP och skriva ut det med hjälp av
de närmaste likvärdiga funktioner.
>> Så en del av dessa saker är annorlunda.
Vi såg förra gången att PHP inte använder inkludera på riktigt samma sätt.
Den använder kräver normalt, även om inkluderar existerar.
Define är lite annorlunda från # Define i C, men det är
hur vi gör en konstant.
$ Argc det visar sig förekommer i PHP, så vi har sett det förut.
Dessa är bara variabler, allt från som börjar med dollartecken.
Minns dessa är bara ett gäng flytande punkter.
>> Så lång historia kort, är du välkommen att bläddra igenom detta om nyfiken, är detta
nästan en omvandling av linjen-för-line C-versionen av speller.c i PHP.
Och du kan göra det här igen för ett halvt dussin andra språk.
>> Men det som är intressant är det här.
Eller vad är uppriktigt sagt nedslående är detta.
Låt mig gå vidare och skriva om dictionary.php, och hävdar att jag är
kommer att gå vidare och åter genomföra Problemet set sex här.
>> Så låt oss föreslå först att i detta fil, som kommer att genomföras i
PHP, så låt mig öppna mina tags som.
Låt mig ge mig själv en global variabel, $ storleken blir noll.
Och jag ska ge själv en hash-tabell.
Jag använder en hashtabell för denna sak.
Hur förklarar jag en hashtabell i PHP?
Klar.
OK.
>> Så öppna fäste nära fästet representerar vad i PHP, som vi har sett?
En matris, men en array som skulle kunna vara en associativ array.
En associativ array är en datastruktur som
associerar nycklar med värden.
>> Nu på enklast numeriskt indexerad samling, dessa nycklar är vad?
Noll, ett, två, tre, eller hur?
Old school grejer tillbaka från C. Men det kan också vara strängar som foo, och bar,
eller Maxwell, eller någon sådan sträng.
Så jag kan utnyttja det på bara ett ögonblick.
>> Låt mig gå vidare och förklara en funktion som -
låt oss göra load () först.
Så fungerar load ().
Och PHP är lite annorlunda i det du bokstavligen skriver funktion, men du
skriv inte en returtyp.
Jag kommer att gå vidare och säga att lastfunktion () bör ta i
Argumentet $ ordbok, precis som C-versionen gjorde.
Jag gör det från minnet.
>> Och jag föreslår att jag är kommer att göra detta.
Jag är helt enkelt ska göra foreach.
Jag ska ringa en funktion som kallas fil (), som går i namn av att
fil, vilket är den rörliga $ Ordlistan som $ ord.
Och sedan insidan av min för loop här, jag är kommer att gå vidare och lagra i min
$ Tabell som $ ord blir sann.
Klar.
Vänta.
Klar.
OK.
>> Det är lasten ()-funktionen säger i PHP.
Nu, varför det fungerar?
Och jag typ av fusk här.
>> Så, en, foreach vi såg kort förra gången.
Det betyder bara att du kan iterera över en array utan att bry sig med i
och n och plus plus, och allt detta.
Dictionary är naturligtvis filnamnet, ungefär så stora som små, det två
ordböcker som vi använde förra gången.
Filen är en funktion som öppnar upp text fil, läser den i rad för rad, och
händer dig tillbaka ett stort utbud, var och en av vars element är en
linje från den filen.
Så det är en kombination av fopen, och fread och while-slinga, och fclose,
och allt detta.
Slutligen, som ordet betyder bara att det är den variabel jag ska ha tillgång till
på varje iteration i denna slinga.
>> Så kort sagt, denna liner här betyder öppna filen vars namn är i
ordbok, variabeln, iterera över den rad för rad, och varje gång du får
en linje, lagra i en variabel som kallas ord, och sedan göra något med ord.
Vad vill jag göra?
Jag vill sätta ord i min hash-tabell.
>> Tja, kan jag sätta något i min hash tabellen precis som i C
med hjälp av hakparenteser.
Detta är namnet på min hash-tabell.
Jag ska till index in i den hash bord på den här platsen.
Så inte bracket noll, inte fästet ett.
Konsol quote unquote något, oavsett vad det ordet är.
Och precis som du kan ha i din hashtabell arbete trie, du bara lagra
effektivt en Boolean, implicit eller explicit.
Klar.
Jag lagrar värdet true.
>> Nu finns det ett par saker Jag slarva på här.
Tekniskt sett är det att bli en irriterande ny linje, / n, vid slutet av
vart och ett av dessa ord.
Så jag ska nog ringa en PHP funktion kallas chop (), vilket kommer att
bokstavligen hugga av det där.
Och jag faktiskt behöver göra en annan sak.
Jag borde nog öka storleken på varje iteration, så jag håller koll
globalt för vad det är.
Och ärligt talat, och detta är en av de stupider aspekter av PHP, om du är
med hjälp av en global variabel, måste du uttryckligen säger att du är.
Så jag ska faktiskt skriva i den globala $ Storlek, global $ bord, och nu
min funktion är klar.
>> Så inte riktigt så enkelt som tidigare, men antagligen tog mindre tid än C
version, kanske?
OK.
>> Så nu ska vi göra funktionskontrollen ().
Låt oss se om det åtminstone tog timmar i sträck som det tog oss i C. So
Låt mig gå vidare och förklara kontrollera som en funktion.
Tar i argumentet ord, vilket är kommer att komma från stavningskontroll.
Och jag ska bara kolla om det följande variabel isset, bord
fäste strtolower av ord -
låt oss balansera alla mina parenteser -
sedan återvända sant.
Else -
det var verkligen det hårda del av detta program.
Else, returnera false.
Klar.
Det är check ().
>> Nu, varför detta arbete?
Tja, som jag passerade i ett ord, vilket är en sträng.
Två, Jag kollar insidan av hash bord, som kallas $ bord.
Jag tvingar den till gemener genom att ringa en funktion ganska lika tolower () i
C, men det gör hela ordet, inte ett enda tecken.
Och om det är inställt, med andra ord finns det är ett värde som är inställt, med andra ord,
om det är sant, så ja, detta är ett ord.
Eftersom jag lagt det där med last ().
Och om inte, kommer jag att returnera false.
>> Nu de andra är lätt.
Funktion storlek (), hur gör jag detta?
Jag gör allt väsentligt åter $ storlek.
Men jag behöver tekniskt att göra detta irriterande sak.
Och faktiskt upp höra, jag skär ett hörn för många.
Jag måste verkligen göra global $ bord.
>> Men som sagt, lossa).
Lasta () är häpnadsväckande.
Funktion unload ().
Hur jag vill genomföra unload ()?
Klar.
OK.
>> Så lossa (), är minneshantering helt tagit hand om för dig i
något som PHP och en hel del högre nivå språk.
Så det här är fantastiskt.
Liksom varför i helvete har vi spenderat det förflutna åtta plus veckor på C skrift
tydligen riktigt långsam, riktigt tid konsumerar problem med tiotals timmar
av arbeta under våra bälten?
>> Tja, för en sak, detta kan fungera bra för små program.
Den rusade verkligen upp min utvecklingstid.
Men låt oss se vad som händer i den verkliga världen.
>> Låt mig gå in i den här katalogen i ett terminalfönster.
Det finns stavningskontroll.
Och märker som en åt sidan, och du kanske har stött på detta i problembild
sex eller problem set sju.
Du behöver inte strikt behöver avslutar PHP-filer med. php.
Om du lägger en rad som den första på högst upp, det är en speciell linje
av syntax som i huvudsak innebär att hitta det program som kallas PHP och använda den för att
tolka denna fil.
Så nu ingen vet riktigt att Jag kör ett PHP-program.
Jag kan köra det precis som om det var något som sammanställts i C.
>> Men här är det.
Faktiskt, låt oss göra det här igen.
Dropbox/pset6 /.
Det finns stavningskontroll.
OK, 0,44 sekunder.
Det fick fortare denna gång.
>> Nu går vi in ​​i PHP-version.
Fin touch.
Men tänk hur mycket tid Jag sparade på kontorstid.
OK.
>> Så 3,59 sekunder, som faktiskt låter inte korrekt heller.
Men det beror på lång historia kort, när du skriver ut en stor mängd
saker till skärmen, som själv saktar ner saker.
Vad det verkligen tog processorn i apparaten var 3,59 sekunder, i
kontrast till C, som tog 0,44 sekunder senast.
Det är verkligen en order av magnitud annorlunda.
>> Så var är det pris som kommer från?
Varför är det så mycket långsammare?
Varför PHP gå så dåligt?
Danielle?
>> PUBLIK: Du gjorde inte riktigt använda en hash-tabell.
>> DAVID MALAN: Jag gjorde inte riktigt använda en hash-tabell.
Så jag gjorde typ av.
Så det är en associativ array.
Troligtvis, om folket på PHP är riktigt smart, använde de under
huv en faktisk hashtabell implementeras i något som C eller C + +.
Men.
Yeah.
>> PUBLIK: [OHÖRBAR].
>> DAVID MALAN: Ja.
Så var och en av de funktioner som jag skrev nu - faktiskt, kan du säga det en gång till en
lite högre?
>> Publik: Var och en av de funktioner som Du ingår har mycket mer fullständig
kapacitet än -
>> DAVID MALAN: Så det är väldigt sant.
Det finns mycket mer overhead att vi är inte riktigt ser genom att fokusera endast på
dictionary.php, som jag skrev bara.
Däremot finns det en hel tolk gå i bakgrunden.
Det är när jag körde det här programmet, det inte köra kompilerade nollor och ettor
konstruerad för min Intel CPU.
Snarare var det igång rad för rad PHP-kod som ser ut exakt
som vi skrev det.
Och så när du använder en tolkat språk, du
faktiskt betalar detta pris.
Det kommer att ta lite tid att läsa filen uppifrån och ner, vänster till
höger, och sedan köra varje linje om och om igen.
>> Nu i verkligheten, särskilt på nätet, du kan faktiskt påskynda denna process
genom caching resultaten av PHP-kod tolkas.
Och det är vettigt på webben, eftersom om du inte har en användare som
mig här, men 1.000 eller 10.000 användare, då kanske första gången filen är
nås den är långsam, men därefter det är mycket snabbare.
>> Men detta också, återigen, är en avvägning.
Och för något som liknar en forskningsuppgifter in, eller ens något stort som
detta, användarna kommer så småningom börjar känna att avmattningen.
>> Så kort sagt, tolkade språk mycket i ropet, mycket populär, och
ärligt talat är nog de språk du bör nå för vid problemlösning
efter CS50.
Men inse hur mycket du verkligen tar för givet under huven
egentligen de senaste veckorna i hash tabeller och träd och försöker,
vilka används i sista hand för att verkligen genomföra saker som öppet fäste,
hakparentes, som vi nu kan tacksamt tar för givet.
>> Så låt oss ta en titt nu i denna webb-sammanhang.
Och jag nämnde förra gången att det finns ett gäng superglobals i PHP som
är inte riktigt relevant på kommandoraden.
De är mer relevant i sammanhanget med att använda PHP i webbsammanhang.
Så kör PHP på en webbserver för att skapa saker som HTML.
>> Och vi tittade på $ _GET och $ _POST, och det är där automatiskt användarnas
input hamnar helt enkelt om du skickar in en forma till en fil som slutar på. php på en webbsida
server som apparaten.
Men låt oss titta kort på $ _COOKIE Och $ _SESSION.
>> I lekmannaspråk, vad är en cookie som du förstår det i samband med
använda webben?
>> PUBLIK: Fil på datorn.
>> DAVID MALAN: Ja.
Det är en fil på användarens dator planterades av vad webbplatsen
du råkar besöka.
Så när du går till Facebook, när du går till bankofamerica.com, när du går
till google.com, när du går till nästan alla webbplats i världen dessa dagar,
inklusive cs50.net, är en cookie planterad på din dator, vilket är
antingen ett värde som lagras i RAM i dator i webbläsarens minne, eller
ibland verkligen en fil som lagras på din hårddisk.
>> Och vad är normalt lagrad i den filen är inte ditt användarnamn, inte din
lösenord, vanligtvis inte något känsligt om webbplatsen är inte så
bra med deras säkerhet, utan snarare det är en stor unik identifierare bland
andra saker.
Det är ett stort slumptal planterade på din dator men du kan tänka på som
typ av en virtuell handstämpel liknande från en klubb eller någon nöjespark som
gör det möjligt för personalen, ägarna av det tjänsten, för att komma ihåg vem du är.
Så om det stora slumptalet är som 12345678, även om det är uppenbart
inte alltför slumpmässigt, tänker på det som handen stämpel som när du besöker
facebook.com för första gången, de stämpla det numret på din hand.
Och sedan att du talar HTTP, du vara en webbläsare, och eftersom Facebook
uppenbarligen talar samma som en webbsida server, säger protokollet HTTP att
när du sedan besöka facebook.com, oavsett om det är en sekund
senare, en timme senare, även nästa dag, så länge du har inte uttryckligen
loggat ut, som effektivt är som att tvätta händerna.
HTTP säger att du ska presentera din handen stämpel varje gång du
återgå till den webbplatsen.
>> Vad Facebook då gör är att de titta på den handen stämpel och
de säger, åh, 123456789.
Jag vet inte vid första anblicken att detta är David Malan i Cambridge,
Massachusetts, men de kan kontrollera sina databas och säger, åh, den person
på vars dator vi planterade 123456789 är David Malan från Cambridge,
Massachusetts.
Låt oss visa att användaren sedan hans profil sida eller hans News Feed.
>> Men det finns ett problem här om detta är hur webben verkligen fungerar.
Låt oss ta en titt på ett snabbt exempel.
Låt oss faktiskt gå att säga facebook.com.
Men innan vi kunde åka dit, låt mig gå vidare och öppna upp Chrome
Inspector här nere.
Låt mig titta på fliken Nätverk.
Och nu ska vi gå vidare och skriva i https://facebook.com.
Och jag gör det så att vi inte ser alla dessa omdirigeringar och avfall
tid att titta igenom dem.
Låt mig slå in.
>> Okej.
Vi ser en massa förfrågningar.
Det kommer Facebook.
Det finns en hel massa filer.
Och här, per min omnämnande av latens förra gången, det är
många HTTP-förfrågningar.
Men den första är förmodligen de mest intressanta.
>> Så låt oss rulla ner hit, och Jag ska zooma in på en sekund.
Detta kommer att vara typ av en enda röra, men låt oss se.
Facebook skickar oss en massa grejer.
>> Men whoa, intressant.
De planterar inte en, utan fyra begagnade frimärken på min hand här.
Set-Cookie, Set-Cookie, set-kaka, set-cookie.
Och det finns några funktioner här.
Alla av dem nämna några typ av utgångsdatum.
Och det ser ut som Facebook är att hoppas att minnas mig fram till 2015.
Så det är förmodligen den tidpunkt då Jag måste logga ut eller de ska bara
automatiskt antar jag inte kommer tillbaka.
Så det är faktiskt en anständig tid.
>> Och det finns några andra saker som händer här.
Denna cookie verkar vara våld raderas genom att säga att det löpte ut 1970
före cookies existerade.
Så webbläsaren är bara att gå att anta OK, det är som
tvätta händerna stämpeln.
>> Men nu när min webbläsare gör en senare begäran -
Låt mig gå vidare och göra detta igen och ladda om.
Låt mig rulla tillbaka till top begäran och gå ner
här, begäransrubriker.
Lägg märke till detta.
Så nu är jag i inte svarshuvuden, men märker det säger begäransrubriker.
Och märker att min webbläsare som en del av sin begäran efter att ha visat reload har
skickas minst följande information.
Inte set-kaka, men kakan.
Så detta är den linje, HTTP-rubriken så att tala, där min webbläsare är sort
av utan att jag vet att det fram min hand för Facebooks inspektion.
>> Så dessa cookies kan vara används sedan för vad?
För att komma ihåg vem du är, eller minns hur många gånger du har varit där, eller
verkligen någonting.
>> Så här är counter.php.
Och låt mig zooma in på teckensnittet.
Och varje gång jag ladda om denna sida, märker det är att komma ihåg hur många gånger
Jag har varit där.
Tja, det är inte så imponerande.
Låt oss avsluta just den fliken, och nu ska vi gå tillbaka till
http://localhost/counter.php.
>> Åh, det är intressant.
Det mindes fortfarande, även även om jag stängde fliken.
Och ärligt talat, om jag stänger webbläsaren, om de genomförs på rätt sätt, jag
kan fortfarande komma ihåg att denna användare är vem han eller hon var den första gången, och
bara när jag går in i Chromes meny, som hit är här, och gå till
Historia och klicka på Rensa webbinformation, som vissa av er kanske har i
förbi, först då kommer dina cookies faktiskt utgå under web
utveckling.
>> Så, om vi går -
låt oss stänga gedit här.
Och om vi går nu till den här filen.
Låt mig gå in på vår vhosts / localhost / allmänheten, och låt mig göra
counter.php.
Observera att detta är en ganska enkelt program.
Det är en ganska enkel hemsida.
>> Så upp i filen är bara kommentarer.
Men här är en ny linje som du kan redan sett i p-set sju,
session_start ().
Detta är en linje av PHP-kod som huvudsak berättar webbservern, gör
Se till att stämpla händer och göra Glöm inte att kolla handen frimärken.
Det är allt som linjen gör, och det gör allt för att processen för oss.
Sedan märker jag precis har fått två grenar här.
Om räknaren nyckeln insidan av detta särskild global variabel som heter
$ _SESSION Är satt - med andra ord, om det finns något värde där -
Låt oss få det och förvara det på en lokal variabel som heter $ disk.
Else, låt oss tilldela $ räknare standardvärdet 0.
>> Nu här är en aspekt av PHP som är både en välsignelse och en förbannelse.
PHP är lite slarvig.
Så medan i C, vad skulle det omfattningen av räknare har varit
antingen här eller här?
>> Det skulle ha varit begränsat dessa klammerparenteser.
Gissa vad?
I PHP, finns det även utanför de Klammerparenteserna, här och här,
och här, och här, och även ner nedan.
Så jag säger att detta är en välsignelse i den meningen att du inte behöver tänka så
hårt som vi gjorde veckor sedan.
Men det är också lite av en förbannelse i detta oavsett var du använder en variabel i
PHP, åtminstone i ett program som detta, Det är globalt tillgängliga för
bättre eller sämre.
Så du måste hålla i minnet nu när dina variabler kan inte vara odefinierat.
Du kanske har definierat dem någon annanstans.
>> Men vad ska jag göra i slutändan?
Jag kommer att spara in på den globala variabel som ett värde av
räknare nyckel resultatet av gör räknare plus ett.
Så det här är bara det aritmetiska som gör
uppräkning av den räknaren.
Och det faktum att jag lagrar det värde tillbaka här är medel till
huvudsak uppdatera databasen till kom ihåg att användaren 123456789 har varit
här två gånger.
Och när jag gör det igen nästa gång jag ladda om sidan, det kommer att ta
min hand stämpla och säger, åh, Användaren 123456789 har nu
varit här tre gånger.
>> Och så vad PHP och liknande språk gör för oss är att de är att räkna
ut hur och var och hur länge att lagra värdena i denna speciella
superglobal.
Och detta superglobal nästa gång jag besöker sidan är slags magiskt
förifylld, fylld med värden som var där förra gången du besökte,
oavsett om det var en sekund sedan, en vecka sedan, eller 2013 och vi nu talar
ca 2015.
PHP och ta hand webbserver av allt detta för dig.
>> PUBLIK: [OHÖRBAR].
>> DAVID MALAN: Variabler i PHP är väsentligen alltid globala såvida du
förklara dem inne i en funktion, och då är de lokala till
endast funktionen.
Men eftersom jag har inte skrivit något funktioner, är de nu på ett effektivt sätt
globalt under hela min fil här.
>> PUBLIK: Finns det något sätt för att göra dem lokalt?
>> DAVID MALAN: Finns det någon sätt att göra dem lokalt?
Endast genom att linda in dem i funktioner.
Som i den senaste versionen av PHP, kan du göra det med
en anonym funktion.
Men mer om det i ramen för JavaScript.
Men det korta svaret är nej.
Ett längre svar är ja.
Nice.
Bra frågesport fråga.
Okej.
>> Så slutligen, är själva sidan faktiskt ganska enkelt.
Lägg märke till att när jag avslutar PHP-läge, minns att allt det här ner
Nedan är bara att få spotta ut obehandlad till webbläsaren.
Vilket är bra, eftersom jag vill skicka användaren någon HTML, men jag vill
att dynamiskt uppdatera HTML.
Och ett sätt jag kan göra detta är att sortera av mycket snabbt falla tillbaka i PHP
läge, användning öppen fäste frågetecken likhetstecknet, och matas sedan ut värdet
av disk.
>> Eller om det ser lite kryptiskt, detta likhetstecknet är egentligen bara en del
syntaktiskt socker för detta printf ($ räknare).
Men ärligt talat, det är bara lite ful och lite irriterande att skriva.
Så PHP erbjuder mycket fint denna funktion där du kan bara säga det mer
fattat på samma sätt.
>> Så vad som händer under huven?
Låt oss snabbt titta på nätet fliken för counter.php här.
Och låt mig gå vidare och först låt oss rensa dina cookies.
Låt oss klara sökdata sedan tidernas begynnelse.
Låt oss nu gå tillbaka hit.
Nu ska vi ladda om sidan.
Och jag är tillbaka på noll.
Eftersom min hand stämpeln har tvättats, Jag får nu en ny cookie.
>> I själva verket, om jag tittar på fliken nätverk och titta på svarshuvuden, meddelande
att apparaten sänder mig en cookie vars namn är något
godtyckligt, men typ av rimligt, PHPSESSID.
Och det är att skicka mig detta verkligen stort slumptal.
Det är inte ganska många.
Det är inte riktigt hexadecimal.
Det är någon form av alfanumerisk sträng, men förmodligen är det slumpmässigt.
Och det är den hand stämpel så att tala om att jag hänvisar till.
>> Under tiden, om jag klickar på reload och sedan titta på denna andra raden för min andra
framställningar, meddelanden nu att min begäran rubriker inkluderar PHPSESSID motsvarar detta,
inte ställa in-kaka, men bara cookie.
Och det är min webbläsare presentation min hand stämpel.
>> Så nu som en teaser, och vi ska prata mer om det här i en vecka eller så, men
på vilket sätt gör det att du sårbar, ditt Facebook-konto
sårbara, och andra sådana står utsatta?
>> PUBLIK: Om någon har din cookie.
>> DAVID MALAN: Ja, om någon har din cookie.
Jag menar riktigt, ungefär som en del av er kanske har provat på som en klubb eller en
nöjespark, om du försöker något så här för att kopiera stämpeln, om än
bakåt på en annan persons hand, och sedan han eller hon presenterar det som
sin egen, om det faktiskt ser identiska, 123456789, då webben
servern är tydligen bara att lita på att användaren är dig.
>> Och detta är verkligen en grundläggande hot när du använder cookies
för om någon bara kapar så att talar ditt kaka, räknar ut vad det
är, antingen genom att verkligen kopiera den genom att titta på din dator
och vara som, OK.
Davids cookie är JJ3JIK och så vidare, och då de är smarta nog att veta
hur sorts skicka manuellt att cookie från en webbläsare eller från en
program de skriver, de kunde helt logga in på en webbplats som du.
Det är inte så svårt att låtsas vara någon annan om vi inte åter p-set
två, som införde vad?
>> PUBLIK: Cryptography.
>> DAVID MALAN: Lite lite av kryptografi.
Enkel kryptering, åtminstone i Standard Edition, men krypto
ändå.
mindre.
Så det visar sig om du krypterar alla dessa rubriker som använder något som du
kanske vet nu mer familjärt som SSL, Secure Socket Layer, eller https:// URL: er,
då alla dessa saker vi har varit blick på faktiskt krypterad,
vilket innebär att det är som du kan inte läsa handstämpel.
Endast facebook.com kan, eller google.com, eller i detta fall, apparaten kan
Läs den handen stämpel.
>> Tragiskt dock, och igen, detta alltför lämpligt med NSA grejer
för sent, är till och med SSL brytbar.
Och det är faktiskt inte så svårt att ens knäcka den kryptering.
Inte så mycket genom att knäcka krypteringen, men genom att lura
webbläsare till dekryptering datan i förtid.
Men återigen, vi reta dig med detta inom kort.
För nu, bara rädd.
Det är tragiskt slags sant.
>> Okej.
Så, när detta lämnar oss nu?
Nåväl, låt oss göra detta.
Låt oss gå vidare och ta en snabb teaser innan vi tar en paus.
Och jag tror att vi kommer att dröja lite längre idag, men vi kommer att dyka in
något helt nytt och sexigt, vilket kommer fundera för ännu mer.
Så det är teaser.
>> Så SQL, började vi prata om någonsin så kort förra gången.
Du kommer verkligen få händerna smutsiga med en del av det i p-set sju.
Och i lekmannaspråk, gör vad SQL -
S-Q-L -
göra för dig?
Vad är det?
Yeah.
>> Publik: Låt oss dataåtkomst.
>> DAVID MALAN: Yeah.
Det låter dig komma åt data i en databas.
Structured Query Language.
Och detta är i huvudsak en programmeringsspråk.
Det finns funktioner i det som Vi kommer inte ens att använda i klassen.
Men du kan faktiskt definiera funktioner.
De kallas lagrade förfaranden i SQL.
Men vi ska hålla det ganska enkelt och bara använda den för vissa grundläggande funktioner
såsom välja uppgifter, infoga data, uppdatera data, och ta bort data.
>> Och du kan verkligen tänka på en databas, som en SQL-databas, som bara
är Microsoft Excel.
Eftersom SQL hänvisar till en relationsdatabas databas, där
relation betyder bara tabeller.
Rader och kolumner.
Så allt du kan sätta i ett kalkylblad Gillar du eller Google Docs,
Du kan sätta in en SQL-databas genom att förklara ett bord.
>> Nu, hur gör du åt faktiskt denna information?
Tja, med kommandon eller frågor som denna.
SELECT, INSERT, UPDATE och DELETE.
Och för det mesta, de är de fyra enda ingredienserna du behöver för att
göra något ganska kraftfullt i problem som sju.
>> Nu tillbaka i dag, skulle du faktiskt interagera med en databas i en
svart och vitt terminalfönster på en blinkande prompt såhär.
Och databasen vi kör på Apparaten kallas MySQL, som är
fri och öppen källkod databas motor.
Om du Google och läsa Wikipedia artikeln, vet du att namnet är
lite av övergång för vissa versioner av Linux.
Maria databas är faktiskt ett gaffel så att säga av MySQL.
>> Lång historia kort, köpte Oracle MySQL.
Oracle är ett stort företag.
Folk har varit orolig att det skulle inte längre vara lika öppen källkod,
så detta är bara en kopia av MySQL som är fortfarande fri, fortfarande öppen källkod, och
installeras i Fedora Linux som standard.
>> Men det är typ av en smärta i halsen för att bekanta sig med en
databasen på detta sätt.
Så vi är i CS50 apparaten ett gratis open source verktyg som kallas
phpMyAdmin.
Bara en tillfällighet att det är skrivet i PHP.
Det finns ingen grundläggande behöver för PHP här.
Men detta är bara ett webbaserat verktyg som vi ned gratis, installerad i
apparaten, som tillåter oss att ha en grafiskt användargränssnitt med vilken
att utforska p-set sju databas med som att skapa nya databaser,
säga för egen slutlig projekt om du skulle vilja, och i slutändan skapa
dynamiska webbplatser som CS50 Finans som gör att du kan ställa frågor om data och
uppdatera data dynamiskt.
>> Du kommer inte att behöva använda bara en enkel textfil eller CSV.
Du kan faktiskt använda en smart databas program så att du kan utföra mer
sofistikerade frågor än att bara läsa igenom allt linjärt.
>> Så till exempel, är detta vad vi ger du ur lådan för p-set sju.
Detta är ett bord med till synes minst tre kolumner, en av vilka är
användarnamn, varav en är hash, och av vilka den andra är-ID.
>> Men det intressanta, och bara för att locka fram en tanke här, användarnamn
är förmodligen redan unikt, rätt?
Jag menar, de flesta någon hemsida, om du har ett användarnamn, det
kan inte vara två caesars.
Det kan inte finnas två Malans.
Det kan inte finnas två jharvards.
Dess unika.
Annars vet de inte vilka jharvard är det faktiskt.
Så vad kan vara motivationen för också ha en tredje kolumn till vänster
det kallas ID, som ser ut som en nummer som är på liknande sätt unik?
Det känns lite överflödigt till mig vid första anblicken.
Varför skulle det vara spännande att ha inte bara unikt användarnamn,
men också unika nummer?
>> Publik: De kunde ha samma lösenord.
>> DAVID MALAN: Människor kan ha samma lösenord, säker.
Det absolut kunde hända.
Men om de har denna unika användarnamn, jag skulle hävda att det inte riktigt
materia, för om de skriver i sina användarnamn, jag behöver bara kontrollera deras
lösenord, deras hash därav.
Varför annars?
>> Publik: Snabbare sökning.
>> DAVID MALAN: Snabbare sökning.
Varför?
>> Målgrupp: ID är bara en.
>> DAVID MALAN: ID är bara ett tecken, eller för att vara mer exakt, det är ett tal,
så det är nog 32 bitar eller nåt sånt.
Medan användarnamn, tydligen Jason Hirschhorn är uppe är typ av
löjligt lång, och det kommer att ta mig mycket mer tid till sträng
jämför H-I-R-S-C-H-H-O-R-N, och kanske a / 0 eller något liknande, i syfte
att slå upp Jason, i motsats till bara säga ge mig användarnamn nummer två.
Det är 32 bitar.
Det är en enda INT som du måste jämföra.
Och faktiskt, det är exakt varför databaser tenderar att tilldela unika ID till
rader i dem.
>> Nu vad andra datatyper är det förutom INT och tydligen
strängar som denna?
Tja, för att vara mer korrekt, SQL-databaser, som
MySQL har CHAR fält.
Och röding lite missvisande är inte en enda CHAR.
Ett CHAR fält i en MySQL-databas är ett eller flera tecken, men det är en
fast antal tecken.
>> Så till exempel, om jag går över till phpMyAdmin som du kanske redan har, eller
snart kommer ett problem som sju, och jag går till min databas, och bara för skojs skull,
Låt oss skapa en ny tabell som heter testa med bara två kolumner.
Jag ska klicka på Go.
Och det kommer att bli ganska bekant, speciellt när du mixtra
runt på egen hand.
Här kanske jag skriver ID för att skapa en ny tabell av typen int.
Men här jag kan skriva användarnamn återskapa den tidigare tabellen.
Och märker jag har ett helt gäng av olika typer att välja mellan.
>> Och detta är också anledningen till phpMyAdmin är ganska trevligt.
Det är typ av själv-undervisning i att du kan bara typ av peka och klicka, och
titta på rullgardinsmenyer, och utläsa att vilka befogenheter SQL ger dig.
>> Och faktiskt, om jag väljer CHAR, jag sedan behöva ange längden, eller hur
många värden, hur många tecken.
Så mycket gemensamma värderingar är saker som 255, men det är lite lång.
Vanligen är åtta för ett användarnamn.
Men det är lite små i dessa dagar.
Så detta är en design beslut.
Är det 8 tecken max, 32, 255, 1000?
Det är verkligen upp till dig.
Men en CHAR fält är ett fast antal.
Så väljer för få och du är typ av skruvas om du vill ha en längre användarnamn.
Välj alltför många och vad som är Nackdelen?
>> Publik: [OHÖRBAR].
>> DAVID MALAN: Det är slöseri.
Precis som i C, om du har en större bit av minne än du behöver, du är
bara slöseri med tid och slösa utrymme.
Så som ett alternativ, existerar VARCHAR, som löser detta problem genom
behandla längd inte som en fast längd, utan som en maximal längd, och med användning av en
variabelt antal TECKEN, som sedan tenderar att bara använda så många TECKEN som du
faktiskt behöver.
Det låter perfekt.
>> Varför inte vi bli av med Datatypen CHAR då?
Vad kan vara Nackdelen med använder VARCHARs, vilket låter
som det är en fin seger?
Yeah?
>> Publik: [OHÖRBAR].
>> DAVID MALAN: OK, bra.
Så om alla dina data är densamma längd, vad är oro?
>> Publik: Eftersom du slösar bort data genom att berätta för dem alla.
>> DAVID MALAN: Så om alla dina data är samma längd, men skulle jag hävda
att ange en maximal längd på VARCHAR är inte annorlunda från
ange en fast längd på CHAR om du vet att många i förväg.
Men det finns faktiskt, och jag ska sortera på utdrag ur det svaret verkligheten
att det fortfarande finns ett max, vilket skulle kunna vara irriterande, särskilt om du
möter en persons namn som är ovanligt länge som du inte
förutse.
Och det är också en lite mindre effektiv att faktiskt söka på VARCHARs som
motsätter sig söka TECKEN, speciellt för långa bord som har massor och
massor av data.
Så även här, är tematiskt igen inget självklart val.
>> Så bara för att ge dig en känsla av andra datatyper som kan vara av intresse
antingen för p-set sju eller i framtiden, finns INT.
Det finns BIGINT, som är som länge länge.
Det tenderar att vara 64 bitar.
Det finns decimal, vilket du kan se i problemet set, som är en mycket
renare svar på de problem som vi påträffas med flottör och flytande
punkt imprecision.
Och sedan finns det DATETIME.
Det är bokstavligen en datatyp som har att se ut som ett år, en månad, en dag,
och en timme, minut och sekund.
>> Men SQL-databaser har också saker vi ringer index.
Och ett index är något som du ange när du skapar tabellen till
göra sökningar och andra verksamheter mer effektiv.
Specifikt, det finns något som kallas PRIMARY index som du kan
fastställa följande.
>> Vi gjorde detta för dig med användarna tabell ger vi dig.
Men märker om jag manuellt återskapa användarna tabellen här ge
det ett namn på användare.
Jag specificerat redan ID.
Jag specificerade INT.
Jag specificerade användarnamn högst 32 tecken.
Men om vi håller rullning i detta ganska breda fönster, märker att det finns en
massa andra saker som jag kan ange.
>> One, kan jag specificera attributen gillar, vet du vad, det här
INT bör vara UNSIGNED.
Jag vill inte ha negativa tal, så låt oss göra det UNSIGNED.
Null är inte relevant här eftersom Jag vill att varje användare
ha ett unikt nummer.
Jag vill inte att det ska vara noll.
>> Men detta är intressant.
Jag kan ange att ID är antingen primärnyckel i denna databas, eller det är
unikt, eller det är indexerad, eller hela texten.
Så för dagens ändamål, lång historia korta, primär betyder att detta skall
vara både konceptuellt och tekniskt fältet som vi använder för att unikt
identifiera användare.
>> Så när vi tittar upp användare, är denna typ av ett löfte att leta upp dem oftast av
som unik identifierare.
Och databasen kommer att se till att om du har ett användarkonto nummer 3, kan du inte
fysiskt infoga en annan användare med samma nummer 3.
Databasen kommer bara vägra för att spara dina ändringar.
Vilket är en bra sak, eftersom du kan skydda dig från dig själv. själv
>> Alternativt, för användarnamn.
Så den andra raden, återkallelse, är fältet Användarnamn.
Så den andra raden är här användarnamn, som vi gjorde längst till vänster där.
>> Så vad mer kan jag vill ange?
Jag är inte tillåtet, enligt SQL, att specificera två primärnycklar.
Du kan ange en gemensam nyckel där du titta på båda områdena, men de kan inte
sig vara primärnycklar.
Så det är uteslutet.
Så som jag kanske vill välja?
>> Tja, är UNIK i samma anda som en primärnyckel där du anger detta
område skall vara unikt, men det är inte kommer att vara en
Jag använder hela tiden.
Och vi kommer inte att använda den här allt den tid för vilken anledning igen?
Det är långsammare potentiellt om det är en lång användarnamn.
Det är bara ett slöseri med tid.
>> INDEX, under tiden, anges att det är inte att vara unik, men jag skulle vilja
dig att arbeta din magi under huva för att göra det snabbare för mig att
söka på detta område.
Så det här är nog inte relevant här.
För användarnamn, skulle jag hävda att UNIKA är ett bra svar.
Men anta att vi gjort användarna mer intressant än bara användarnamn,
hashar och ID-nummer.
Tänk om vi gav människor fulla namn?
Tänk om vi gav dem adresser och andra uppgifter om dem?
>> Tja, om du anger att en kolumn i en databasen är indexerad, innebär att det
MySQL eller Oracle, eller vad databas du använder, bör arbeta sin magi
och använda någon form av fantasi uppgifter struktur som ett träd, eller en trie, eller en
hash-tabell, eller något för att garantera att när du söker efter data med
välja på just det -
liksom visa mig alla att bor på Oxford Street.
En fråga som det.
Om du har specificerat i förväg att du vill ha ett index på det området, de
sökningar kommer att bli mycket, mycket snabbare.
>> Om du inte anger ett index, den bästa du kan göra är en linjär sökning om
det är inte sorterade.
Men om du anger INDEX, smart människor som gjort databasen -
människor som du som nu vet träd och länder och hashtabeller -
kommer automatiskt att bygga en sådan uppgifter struktur i RAM för att se till att
dessa sökningar är mycket snabbare.
>> FULLTEXT tiden är liknande i anden, men du kan göra wildcard
sökningar, liksom visa mig alla som bor på gator som börjar med
bokstaven O av någon anledning.
Du kan göra sökningar med jokertecken så.
Eller, mer övertygande saker som show mig alla som har ordet -
visa mig alla vars namn börjar med en viss bokstav.
Du kan söka efter nyckelord på detta sätt.
Okej.
>> Så, möjligheter konstruktions det potentiellt.
Det finns andra som jag ska våg mina händer på.
Det visar sig att man kan ha olika lagringsmotorer.
Och det är mer svårbegriplig än vi behöver säkert för problem set sju.
Som standard är ni använder något som kallas InnoDB.
Du ser omnämnande av detta någonstans i phpMyAdmin gränssnitt troligast.
Men vet att det finns annan konstruktion beslut som är av potentiellt
intresse kommer slutprojekt om du gör något webbaserat.
>> Men låt oss göra detta.
Låt oss gå vidare och lägga detta på skärmen som en teaser för en berättelse
engagera dig, en rumskompis, och ett glas mjölk.
Låt oss ta en två minuters eller så bryter här.
Och om du kan stanna kvar, låt oss komma tillbaka, titta lite mer på SQL, och
sedan en bit av JavaScript med p-set åtta i åtanke.
>> Okej.
Så, låt oss få dig att tänka på en hörn fall som kan mycket lätt uppstå
i samband med användning av en databas, eller ärligt talat, även med hjälp av verkliga saker
som uttagsautomater för att få pengar.
Så här är ett kylskåp.
Anta att du har en också i din studentrummet eller ditt hus.
Och du har en rumskompis, och båda du verkligen gillar mjölk till exempel.
>> Så du kommer hem från klass en dag.
Han eller hon är ännu inte tillbaka.
Du öppnar kylen.
Du verkligen vill ha ett stort glas mjölk.
Det finns ingen mjölk.
Så vad gör du?
Du stänger kylskåpet.
Du tar tag i dina nycklar.
Du går ut till torget.
Och du får i kön på CVS på dem själv kassan saker, som alltid
ta längre tid än vad som faktiskt med kassörer.
Hur som helst.
>> Alltså, under tiden, dot dot dot, din rumskompis kommer hem och han eller hon
på samma sätt har en längtan för lite mjölk.
Så han eller hon öppnar kylen, ser ut inuti, och åh, fan.
Ingen mjölk.
Så han eller hon ger sig ut, råkar gå till den andra CVS, som var endast en
blockera bort av någon anledning, och han eller hon får i kö för att köpa lite mjölk.
>> Under tiden, du kommer hem, han eller hon kommer hem, och vad gör
du i slutändan ha?
Dubbelt så mycket mjölk.
Men du egentligen inte gillar mjölk som mycket.
Så nu har du så mycket mjölk som nu en av dem är bara att gå sura
så småningom.
Så det här är ett riktigt dåligt problem.
Rätt?
>> Så vad har hänt?
Så i grunden är denna typ av ett löjligt exempel.
Men under huven, det som vi har haft hända här är er båda kontrollerade
tillståndet för en viss del av minne, kylskåpet.
Ni båda kontrollerade staten av någon variabel.
Ni båda drog en slutsats som du sedan agerade på.
Men tyvärr, när din rumskamrat var i butiken, tillståndet i det
variabel förändrats, han eller hon kom tillbaka och nu vill förändra staten, men
det har redan ändrats på honom eller henne.
Och naturligtvis, skulle han eller hon inte har gått till affären om de visste
att du redan på väg.
>> Så i den verkliga världen, hur kunde du undvika detta problem, förutsatt att du har
ett kylskåp, har du en rumskompis, och du verkligen gillar mjölk?
>> PUBLIK: Kommunicera.
>> DAVID MALAN: Kommunicera.
OK.
Men hur kan du kommunicera?
>> PUBLIK: Lämna en anteckning.
>> DAVID MALAN: Lämna en anteckning, eller hur?
Lämna alltid en anteckning, för fans av showen.
Okej, så alltid lämna ett meddelande, eller satte verkligen som ett hänglås eller något
på kylskåpet som håller din rumskompis från inspekterande staten
denna variabel.
>> Nu, varför skulle detta vara relevant för Problemet satt sju, eller till uttagsautomater.
Tja, tänk dig en värld i en bankomat där du kanske kan gå upp till en ATM
maskin här, och en annan bankomat här.
Och det händer ganska ofta.
Och antar att du hade två ATM-kort, vilket är möjligt att erhålla.
Och du loggar in båda maskinerna effektivt samtidigt, förhoppningsvis
medan ingen tittar.
Och sedan skriva in din PIN-kod ungefär samtidigt.
Och sedan göra en balansfråga för att se hur mycket pengar du har.
Och låt oss säga att du har $ 100 kvar på kontot.
Så i huvudsak samtidigt, du säger ett, noll, noll, anger.
Och du förhoppningsvis få tillbaka lite pengar.
>> Men hur mycket pengar kan du få tillbaka?
Nu datorer i slutet av dagen, särskilt om de pratar med
servrar, inte nödvändigtvis göra saker i den ordning som förväntas.
>> Så antar att vad som händer, på grund av oavsett nätverks frågor hastighet där
är, eller CPU-frågor finns det, eller något liknande, anta att
första ATM kontrollerar ditt saldo och ser, åh, denna person har $ 100.
Men sedan blir distraherad eftersom kanske en säkerhetskopia som händer och så är det
saktar ner.
Eller kanske vid kontroll, nätverket anslutning fick en lite långsammare eftersom
det händer bara.
De är fysiska enheter.
Så under tiden, är den andra ATM frågar samma fråga.
Hur mycket pengar David har? $ 100 är svaret.
Men eftersom den första ATM har ännu inte skickade meddelandet subtrahera $ 100, både
Bankomater har inspekterat bankens valv, ser att det finns $ 100 där, och nu
båda maskinerna potentiellt är kommer att spotta ut ett svar.
>> Nu är det bra för dig i någon mening om vad banken gör i slutändan
är ändra beloppet till minus 100 av sätta variabeln lika med din
bankkonto lika med 0, i motsats att göra minus 100.
Nu i värsta fall för banken -
eller i bästa för banken, under tiden, de ger dig $ 200, och
ditt bankkonto visar nu negativa $ 100, som verkligen inte
gynna dig alls.
Men poängen är att denna ras tillstånd för två rumskamrater uppta
mjölk, eller för två bankomater försöker få pengar och ändra tillståndet hos ett valv
samtidigt föreligger någon gång du har en databas.
>> Nu i problemet satt sju, denna fråga uppstår i den meningen att om du köper en
andel av Facebook lager, och sedan för exempel du köpa en andra del av
Facebook lager, måste du göra ett beslut som programmeraren.
För att avgöra hur du uppdaterar databas, oddsen är att du kommer att
har en rad för detta bestånd, och detta är ett sätt att genomföra den.
Och du kommer att ha en andel av FB, vilket är deras aktiesymbol
för detta användarnamn, eller denna användare ID, en unik identifierare.
>> Men samma historia kan hända här.
Om du gör en SELECT i SQL, som du ser i problembild sju när du ser,
åh, har David en aktie av Facebook lager.
Låt mig nu ändra detta till att vara två aktier, eftersom han vill köpa en
andra aktie.
Men antar att David hade faktiskt två webbläsarfönster öppnas, eller anta att
det är ett gemensamt konto med två makar, och båda av dem försöker utföra
samma operation, där också den potential för ett beslut om att vara
görs utifrån den tidigare tillståndet i världen -
kontot har en aktie -
och både människor, eller båda servrarna, nu försök att säga öka det till två aktier.
Men i detta fall, kanske du har laddat mig pengar för båda aktierna, men
ökas just det en gång.
>> Så kort sagt, det grundläggande problemet här, som med skämt om att lämna ett
notera, eller sätta ett hänglås på det, är om två personer, eller två trådar -
tänker tillbaka på scratch -
kan inspektera tillståndet för en viss variabel och sedan försöka ändra på det rörliga,
men dessa två saker inte händer på samma tid men kan bli avbruten
av andra saker som händer, uppgifter kan komma in i en väldigt konstig tillstånd.
Och du kan dra eller du kan drabbas i betydelsen av de pengar som exempel.
>> Så i problem set sju, vi ger dig detta en rad kod, som länge
historia kort, löser detta problem i MySQL.
Detta mycket lång instruktion som inte även passar på en linje på
Skärmen här ser till att din verksamhet är vad som kallas atom.
Allt händer på en gång, eller det händer inte alls.
Detta mycket lång fras kan inte får avbrytas delvis.
>> Och vad den gör är bokstavligen vad den säger.
Sätt in en tabell med följande tre områden dessa specifika värden,
men den dubbla nyckel, inte gör en insats.
Gör en uppdatering.
Så det här är som att göra en SELECT och en INSERT så att säga på samma gång.
Och det är nyckeln som är nog hänvisas till här?
>> Det visar sig, och du kommer att se detta i Problemet set sju s spec, eftersom
Vi har förklarat att det finns en unik nyckel på denna särskilda bord så att
du kan inte ha flera rader för samma användare med
Samma öre aktiesymbol -
i detta exempel här, är DVN.V en dum öre lager som vi
hänvisa till i spec.
Eftersom vi har förklarat att det är unikt, Vad detta betyder är att om du
Försök att sätta in en dubblett rad, du istället kommer att uppdatera den utan
någon annan som har en chans att förändra tillståndet i världen heller.
Så kort sagt, säkerställer detta saker är atom.
>> Mer allmänt though, databaser som MySQL -
och du inte behöver den här funktionen för p-set sju, men ha det i åtanke för
framtiden -
stödja så kallade transaktioner, där du kan säga
START TRANSbokstavligen.
Du kan sedan köra två SQL-satser.
Och en SQL-sats, som du ser i p-set sju, ser lite
ungefär så här.
Uppdatera en tabell som heter konto.
Ställ in balansen kolumnen motsvarar vad balansen kolumnen för närvarande
är minus 1,000 där antalet, den kontonummer, som användar-ID,
är lika med 2, och sedan uppdatera konto dot dot dot.
>> Så i lekmannatermer, vad gör dessa två frågor verkar göra i
verkliga världen känsla av bank?
>> PUBLIK: Överföra till besparingar.
>> DAVID MALAN: Exakt.
Överföring av medel från en konto till den andra.
Och här är ett annat exempel där man verkligen vill att dessa två saker att hända
eller inte hända.
Du vill inte något att komma i mitten av dem och potentiellt förstöra
matten, eller röra upp hur mycket pengar du har, eller hur mycket
pengar banken har.
Så vad är riktigt nice om transaktioner i MySQL är det, och
databaser mer allmänt, är att de och smarta människor som har genomförts
dessa funktioner lista ut hur man gör Se till att båda dessa saker hända
eller inte alls.
>> Och om du verkligen strävar efter att göra en webbplats som används av människor på
campus, människor i den verkliga världen, gör något i start bemärkelse,
det är dessa typer av designbeslut som
blir aldrig så viktigt.
Annars börjar du att förlora data, förlorar användare, eller i värsta fall som
vi har sett här, potentiellt förlora pengar.
Så återigen, mer om det i problembild sju, samt kanske för en del av
du i slutprojekt.
>> Så låt oss ändra den bilden vi hade nyss bara på ytterligare ett sätt.
Så låt mig faktiskt se om jag kan -
nope, det är borta.
Där är det.
>> Så det är där vi slutade förra gången.
Och det visar sig att vi kommer att kasta en sak i mixen här -
ett språk som kallas Javascript.
Så JavaScript faktiskt passar i detta stycke -
och jag hade inte riktigt tillräckligt med utrymme, så det är inte nu i skala.
OK, detta är verkligen patetiskt.
OK, så det är JavaScript.
Okej.
Jag verkligen gör det en björntjänst.
Okej.
>> Så JavaScript är en annan programmering språk, och vår sista, om det hjälper
försäkra att det finns inte mycket mer av brandposter här.
Så JavaScript är också ett tolkat språk, vilket innebär att du inte
sammanställa det i ettor och nollor.
Du kör bara det.
Men vad är fundamentalt annorlunda med JavaScript oftast är att du
inte köra det på din webbserver.
Det blir inte köras i Apparaten i sig.
Snarare blir det hämtas av en användare via HTTP i sin webbläsare -
Chrome, Safari, Internet Explorer, Firefox, vad som helst -
och det är den webbläsare som utför detta visst programmeringsspråk.
>> Så för att vara tydlig, PHP hittills varit utförs antingen på kommandoraden i
vår svarta och vita fönster, på en server liknande apparaten en dator
gillar apparaten, eller det har varit exekveras av en webbserver
körs på en dator.
Men temat här är att PHP hittills har utförts på serversidan, så
användaren och användarens webbläsare aldrig ser en rad av PHP-kod.
>> Faktum är att om du någonsin öppna en webbläsare för annan din webbplats eller och du
faktiskt se PHP-kod i ditt fönster, någon har skruvas upp.
Eftersom det inte är tänkt att vara skickas till en webbläsare direkt.
Det är tänkt att utföras och vände till något som HTML.
>> Men JavaScript är huvudsakligen tvärtom.
Det är tänkt att köras normalt inne av användarens webbläsarfönster.
Och vilka typer av webbplatser använder JavaScript då dessa dagar?
>> Som bokstavligen varje populära hemsidan.
Varje webbplats som ni antagligen använder dagligen använder JavaScript för
enklaste och även den sexigaste funktionerna.
>> Så något liknande Facebook Chatta om du använder det.
Hur fungerar det egentligen?
Väl hittills, alla de saker vi har gjort med HTML och PHP förutsätter att
du drar upp en URL, och du trycker Enter, och du ser några HTML-innehåll.
Och du klickar på länken, som ändrar URL, ändras på sidan och omladdningar
lite nytt innehåll.
Klicka på en annan webbadress eller skicka ett formulär, du får forslas till en annan sida och
du se några nya innehållet.
>> Men med hjälp av något som Facebook Chat, eller Gchat, eller Google Maps, sällan
gör hela sidan uppdateras så att du ser en vit skärm ett kort ögonblick och
sedan nytt innehåll.
Snarare webbsidor idag är dynamiskt få uppdaterad igen och
igen och igen alla slags av bakom kulisserna.
Och det visar sig att när du går till något som Facebook, eller Gchat,
eller Gmail, och uppdateras sidan automatiskt utan att ladda om
hela skärmen, vad som har hänt är att din webbläsare har gjort slags hemlighet
ytterligare HTTP-förfrågningar -
inte för hela webbsidor, men bara för små bitar av data, såsom
snabbmeddelande om att din vän bara skickade dig, eller statusuppdateringen som
någon precis skickat, eller tweet att någon precis skickat.
Det är bara att göra lite förfrågningar om uppgifter, och sedan med hjälp av JavaScript, detta
programmeringsspråk, för att ändra det webbsidan ser ut utan
server att hjälpa, utan servern som result HTML.
>> Så kort sagt, kan JavaScript användas då att inte bara hämta nya data från
servern utan att ladda om hela sidan eller skicka in ett formulär.
Den kan också användas för att ändra den så kallade DOM -
Document Object Model -
vilket är precis det finare sätt för säger träd HTML
som vi såg förra gången.
>> Så för att lugna, är JavaScript syntaktiskt så liknar C också.
Det finns ingen huvudfunktion.
Du börjar bara skriva koden och det kommer att bli avrättade, eller
tolkas mer korrekt.
Villkor kommer att se ut så här.
Ingen annan än C eller PHP för den delen.
Booleska uttryck eller-ed tillsammans kommer att se ut så här.
-Behandlas tillsammans se ut så här.
>> Växlar kommer se ut så här.
För slingor kommer att se ut så här.
Medan slingor kommer se ut så här.
Gör medan slingorna kommer se ut så här.
>> Detta är nytt.
Så JavaScript har inte en foreach konstruera per se, men denna konstruktion
för variabel i i matrisen, och jag i detta fall blir ett indexvärde.
Så det är lite annorlunda från det foreach, även nya versioner av
JavaScript kommer ut hela tiden, så även dessa språkfunktioner
utvecklas.
>> Och som en sidoreplik, JavaScript dessa dagar kan också användas på en server precis som
PHP med hjälp av ett ramverk som kallas Node.js.
En av CS50 s TF, Kevin, har lett en seminarium om Node.js som är tillgänglig på
cs50.net/seminars.
Så om du är nyfiken, vet att du kan använda detta på serversidan som
väl, men det är en ganska ny trend, men en kraftfull sådan.
>> Det här är lite annorlunda.
Detta är en array i JavaScript.
Och det som slår dig så olika kontra C eller PHP?
Det finns några snabba historier Vi kan tala om här.
Det som saknas jämfört med PHP?
>> PUBLIK: [OHÖRBAR].
>> DAVID MALAN: Ja?
Tyvärr, säger igen?
>> PUBLIK: Inte förklara typen av variabel.
>> DAVID MALAN: Vi ska inte förklara typen av variabel.
Så faktiskt ganska som PHP, är vi inte beskriva olika kategorier av denna variabel.
Snarare är vi mer allmänt säger var för variabel.
Vi har inte PHP: s olägenhet av dollartecken, vilket samtidigt jobbigt att
typ, gör mer klart att något som är en variabel.
Av följande skäl: här är vi slags tillbaka till C: s strategi genom att bara ringa ett
variabel med namnet vi vill för att ge det, som siffror.
Och även som PHP, vi har hakparenteser för
värden inuti som matris.
>> Så variabler i JavaScript också skulle kunna se ut så här.
Lägg märke till här är en sträng som kallas s, men på samma sätt har vi inte specificerat
att det är en sträng.
Här är dock en funktion som inte existerar på exakt samma sätt i PHP,
men lite på liknande sätt.
Detta är ett objekt i JavaScript.
Och föremål är slags den schweiziska armén Kniven av en datastruktur i att man
kan använda dem för en rad olika saker.
>> Här, till exempel, vi förklara en variabel som heter citat.
Typen av den variabeln Ett ändamål.
Du kan se det som en C-struct som har nycklar och värden.
Symbol är en nyckel.
FB är ett värde, till synes en aktiesymbol.
Kommatecken.
Priset är en annan nyckel, och dess värde är tydligen ett flyttal, eller en
antal mer allmänt i JavaScript, på $ 49,26.
>> Så PHP inte har -
Vi har inte sett i PHP-objekt helt så här, men vi såg en analog,
vilket var vad?
>> PUBLIK: [OHÖRBAR].
>> DAVID MALAN: Associativa arrayer.
Så medan PHP har associativa arrayer vars syntax är aldrig något så
annorlunda -
vi såg hakparenteserna.
Vi såg konstiga pilar symboler.
JavaScript har objekt, men detta är mestadels en semantisk skillnad och en
annan synonym för nu.
Men, som en sidoreplik, har PHP också Objekten i ett sätt som Java och andra
språk har föremål i objektorienterad programmering.
Men vi kommer att använda dessa bara för datatyper för nu.
Objekt och associativa arrayer.
>> Detta skulle man kunna göra det lite mer tydlig.
Här är varför ett objekt är användbart.
När du vill deklarera en student, som Zamyla, vi kan faktiskt
kapsla in så att säga inne i det objekt med klamrar precis som
innan en hel nyckelknippa och värderingar i här.
Vi har ett ID, ett hus, och ett namn Zamyla, följt av ett semikolon som
vanligt i slutet.
>> Här nere är också detta något olika, men också mycket kraftfulla
dessa dagar.
Här är en matris, och jag vet att eftersom det finns en hakparentes upp
topp och en hakparentes vid bottnen.
Och detta är en samling av vilka data skriver tydligen i JavaScript?
Detta är en samling av det ser som tre objekt.
Och jag vet att det är ett objekt bara grund av klammerparenteser.
Och märker att det finns öppen klammerparentes, vissa grejer, nära klammerparentes, kommatecken,
sedan lite mer, kommatecken, och sedan lite mer.
Så det är tre argument åtskilda av två kommatecken.
>> Så detta är en array med tre objekt.
Och var och en av dessa objekt verkar vara en student eller anställd av någon
sortera, var och en med ett ID, hus, och namn.
Men jag har kallat detta något kallas JSON -
JavaScript Object Notation.
Och detta är ett dataformat som faktiskt är så mycket populär och i
vogue dessa dagar att om du skriver en program som använder Facebook
API, Twitter API, egentligen nästan någon API ute dessa dagar,
inklusive några av CS50 egen, den data du får tillbaka är inte i
old school CSV-format.
>> Eftersom återkallelse som CSV är super enkelt.
Det är bara kolumner separeras med kommatecken.
JSON uppgifter ger dig mer metadata.
Det associerar en nyckel med varje värde så De behöver inte bara anta att
den nollte kolumnen är ett värde, kolumn en är en annan, är kolumn två varandra.
Allt i ett JSON objekt är här sortens av självbeskrivande, eftersom varje
ett av namnen i den här filen har bokstavligen namn framför det som en
citerade strängen.
>> Så låt oss ta en titt på en några exempel här.
Låt mig gå in i apparaten.
Och låt mig gå in på vår vhost katalog till allmänheten.
Och låt mig gå in i JavaScript katalogen.
Och låt oss gå vidare och öppna upp dom-0.html, där DOM betyder bara
Document Object Model.
Det är trädet grejer som Jag hänvisade till tidigare.
>> Och låt mig föreslå följande.
Här är en webbsida vars kroppen är ganska enkel.
Så här nere på botten, märker jag har ett formulär.
Vi har sett dem förut.
Den har två ingångar, en av vilka har en ID av namn, varav en har en typ av
lämna, och den första ens typ är text.
Så här låter faktiskt ganska enkelt.
>> Låt oss gå hit.
Låt oss gå tillbaka till den här sidan här.
Låt oss gå in localhost, och gå in i vår JavaScript katalog, och gå till
dom-0, och här har vi det här formuläret.
Så det är tydligen all denna sidan gör.
Den har ett namn fält med en Skicka-knapp.
Men jag tänker inte använda PHP här.
Jag kommer att göra sidan allt klient så att säga i JavaScript som följer.
>> Lägg märke till att jag faktiskt har fått namnet området för denna ingång en unik
identifierare, som faktiskt kommer att rädda mig någon gång i en stund.
Och märker har jag infört en annan etikett i huvudet på min hemsida, den
tag.
>> Så det är i denna mening att JavaScript är en klientsidan programmeringsspråk.
I det här fallet, precis som CSS, har jag lagt det rakt insidan av min HTML.
Men märker jag har förklarat en funktion som ser lite ut som PHP
syntaktiskt, men detta är faktiskt JavaScript, eftersom igen, det är
klientsidan i webbläsaren.
Och ta en gissa vad detta kommer att göra, även om vissa av syntaxen
här är nya.
>> Publik: Säg hej till vem.
>> DAVID MALAN: Det kommer att säga hej till den som besöker den här sidan.
Så hur?
>> Så varsel, visar det sig i JavaScript det finns en varning () funktionen.
Detta är en väldigt sorts sorgligt funktion som verkligen tenderar bara att irritera användarna.
Det är inte något du verkligen bör använda typiskt, men det är en snabb och smutsig
sätt slags skriva något till ett grafiskt användargränssnitt
gränssnitt, som en webbläsare.
Lägg märke till här att jag har fått en sträng inom enkla citattecken.
Det visar sig att till skillnad från C, JavaScript kan faktiskt ha dig använda enkel
citat, och ärligt talat är det bara typ av den stilistiska konventionen bland
JavaScript programmerare att använda enkla citattecken.
PHP, har de faktiskt en aning olika innebörd.
Men för nu, vet bara att det är den enda anledningen.
Konventionen i JavaScript är ofta Använd apostrof, men vi skulle kunna använda
citationstecken på båda ställena liksom.
>> Så det här är intressant.
Minns förra gången som vi hade att bild på skärmen som drog ett träd
där du hade HTML noden, och huvud nod, och kroppen noden,
och lite text.
Men det fanns en speciell nod på toppen att jag ringde dokumentet.
Tja, det visar sig i JavaScript, något gång du skriver ett program i JavaScript
i en webbläsare, har du tillgång till en särskild global variabel.
I samma anda som PHP: s superglobals, denna kallas i
gemener dokument.
>> Det är som en struct, men detta struct också har funktioner inne i det.
Så ett C struct har bara data normalt.
Men ett JavaScript-objekt eftersom detta tekniskt också har funktioner,
annars känd som metoder, inne i den.
Och du kan ringa en funktion inuti detta objekt bokstavligen gör sitt
namn, prick, och sedan namnet på funktionen, eller igen metod.
Det är bara en synonym, egentligen.
>> Och vad gör den här funktionen?
Du kan typ av gissning från sitt namn.
Få inslag av ID.
Så detta kommer att söka på webbsidan, söka det trädet, söker
oavsett nod, AKA inslag, har en unikt ID för offert unquote namn.
Och vad ska jag göra?
Jag kommer att få värdet inuti som nod i trädet, och jag kommer
att på något sätt säga hej till det namnet.
>> Så ta en gissning, även om vi har inte sett detta ännu, vad gör det plus
symbolerna betyder här och här förmodligen?
>> PUBLIK: Sammanfoga.
>> DAVID MALAN: Sammanfoga.
Rätt, och dessa är bara sorts designbeslut
folk gjorde år sedan.
I PHP, du sammanfoga saker med prickar.
I C, hoppar du genom flera hoops och kalla funktioner som strCopyDatabaseOK () eller
strcat () eller andra sådana funktioner.
Men i JavaScript, använder du plus.
Så det här är bara sammanfoga tre strängar -
hej, ett namn, och sedan ett utropstecken.
>> Så när och varför är denna funktion heter men?
Tja, ta en gissning från HTML längst ner.
Varför hälsar () anropas eller när?
>> Tydligen så gott jag kan berätta, om in, då detta formuläret skickas,
Jag kommer att göra vad som Insidan av dessa citat.
Och speciellt, jag ska ringa hälsar () och sedan returnera false.
>> Nåväl, låt oss se vad nätet Effekten här är först.
Så låt mig gå vidare och skriva i, säg, Loren, Submit.
Hej Loren.
Låt oss se om kanske det var bara en lycklig genomförande.
Nope.
Så det är att skriva ut vad namnge jag faktiskt lagt där.
>> Men märker vad som inte förändras.
Webbadressen är fortfarande dom-0.html.
Det finns ingen register.php.
Det finns ingen andra filen.
Det finns ingen handling attribut.
Så vad är denna återgång falskt förmodligen gör?
Varför jag kallar hälsar () och sedan vänder falsk förmodligen?
Vad som normalt händer när du klickar på Skicka ett formulär att även vi har
sett under den senaste veckan?
>> PUBLIK: [OHÖRBAR].
>> DAVID MALAN: Det går någonstans, eller hur?
Det går till viss destinationsadress.
Men jag vill inte att det ska ske här.
Jag vill att min webbsida för att vara helt dynamik som Gmail, där när du är
det, du stannar där.
Adressen ändras inte på ett sätt som visar hela sidan laddar om.
Snarare, jag vill bara ändra något som att skriva ut något
här på skärmen.
>> Nåväl låt mig rengöra upp lite.
Jag öppnar inte dom-0, men låt mig öppna upp dom-2.
Bara så du har sett några syntax här.
>> Det visar sig att det som vi just gjorde använder rå JavaScript.
Så det här är verkligen det språk JavaScript.
Några av er kanske känner till ett bibliotek som heter jQuery.
>> Så jQuery är inte samma sak som JavaScript.
Det är bara ett bibliotek som en riktigt smart kille skrev och populariserade sådan
att nästan alla i världen nu använder jQuery vid användning av Javascript.
Och vid första anblicken, ärligt talat, det ser lite mer kryptisk.
Men du kommer att hitta, särskilt om du går där för din slutgiltiga projektet med web
utveckling, ser du att detta rensar upp saker och sparar en hel
några rader kod.
>> Så låt oss bara blick på hur denna form fungerar.
Lägg märke till vad gjorde jag bort tydligen från min HTML?
Det finns ingen på skicka handler så att säga.
Det finns inget attribut.
Eftersom du vet, vad Jag visste inte riktigt gillar?
Jag kände mig som om vi faller i gamla vanor där.
Precis som det börjar känna sig slarvigt att blandas både CSS med
HTML, eftersom du typ att kasta olika språk över hela
plats, på samma sätt gick det börjar känna som en dålig väg att gå ner där
Jag sätter JavaScript-kod på insidan av mitt HTML snarare än facto ut det.
>> Så det är lektionen här.
I dom-2.html, jag facto det.
Och jag gör saker och ting en aning annorlunda.
För nu kommer jag att våg mina händer på vad detta egentligen innebär
under huven.
Men bara för att nu anta att det första kodrad i detta bibliotek
heter jQuery betyder bara när dokumentet är klar, gör följande.
>> Eftersom webbsidor kan ta lite tid att ladda.
Du kan vara på en långsam internet anslutning, och den skulle kunna snurra
och spinning, och slutligen den är laddad.
Denna kodrad bara säger vänta tills hela sidan är klar, det dokument
är klar, innan du utför den här koden.
>> Och nu märker är detta förmodligen den mest användbara första
ta ifrån jQuery.
Denna linje här är mycket lika i anden till detta mycket längre linje här.
Medan rå JavaScript-kod, där föreligger ett dokument globala objektet som
har en funktion som kallas getElementById () de personer som skrev
jQuery förenklat att bara säga dollartecken, och sedan inne i
parentes satte två citat, och sedan sätta en hash symbol följt av
unikt ID som du vill ta.
Så det här är likvärdigt med document.getElementById.
>> Samtidigt. Skicka bara innebär på inlämning av vilken form du är
hänvisa till vänster, gå framåt och utföra detta.
Men det är nu den nyfikenhet också.
Vad är konstigt om vad Jag har markerat här?
Inte bara är det typ av syntaktiskt nytt, det finns också något som saknas.
>> PUBLIK: Det bara kallas funktionen?
Det kallas inte vaken?
>> DAVID MALAN: Ja.
Tja, så alert () är nere här, för att vara rättvis.
Men det finns inget omnämnande av en namn, som ni vet, foo eller
upp något här.
Och faktiskt, det är en av de funktioner av JavaScript som är helt
kraftfull, men också ganska nytt.
Och PHP faktiskt har detta också.
>> Låt mig gå vidare och göra något riktigt snabbt.
Låt mig gå vidare och lägga ut det här.
Låt mig göra det här.
Funktion.
Låt oss kalla hanteraren ().
En hanterarfunktion så att säga.
Något som hanterar någon operation.
Låt mig städa mitt indrag.
Och sätta detta här.
Och sätta det här.
Yep.
OK.
>> Så nu har jag en funktion som heter handler () som jag inte riktigt vet
vad den gör ännu.
Det har bara fortfarande det där.
Whoops.
Tog för mycket.
Nu gör vi det här.
Okej.
Ursäkta.
Okej.
Låt mig göra det här.
OK.
Det ser fint och rakt framåt nu.
Låt mig göra det här.
Gör det här.
Och OK.
Så nu, låt oss sätta det här.
Inget mer programmering i farten.
OK.
>> Så nu, låt oss gå tillbaka till där historien började.
Tidigare sade jag att denna linje här innebär när dokumentet är klart, gå
vidare och göra det.
Vad vill jag göra?
Jo specifikt, jag vill gå vidare och göra följande.
Utför denna kodrad, och sedan vad jag vill att ni ska göra är att ringa det
fungera när formuläret skickas.
>> Nu är det här vad som är intressant.
Detta är inte i sig en funktion.
Lägg märke till att jag inte sätter parenteser här på vanligt sätt.
Jag bokstavligen passerar en funktion som heter hanterare () till en annan funktion
kallas in () som ett argument som även om det är som en variabel.
Och detta är en av funktionerna i JavaScript är funktionerna själva
är egentligen bara objekt.
Faktum är att de är egentligen bara variabler av något slag.
Och om namnet på funktionen är hanterare (), finns det ingen anledning att jag kan inte
låta det gå i som ett argument här.
Och detta innebär att när formuläret med ID för demo är
lämnats in, kallar denna funktion.
>> Men nu, om jag ångra allt detta, varför då gjorde jag kanske göra
detta för en stund sedan?
Nåväl, detta är en anonym funktion.
Eftersom ärligt talat, insåg jag varför är jag bry sig om att slösa tid att förklara en
Funktionen kallas handler () bara för att ringa det i en och endast en plats?
Om jag inte behöver namn, och jag gör inte behöva kalla det mer än en plats,
låt oss bara implementera funktionen precis där jag behöver det.
Och så JavaScript och PHP stöd vad kallas anonyma funktioner som
Tillåt mig att göra just det här.
>> Men vi bara skrapat på ytan.
Låt oss retas med bara ett par slutgiltiga exempel här.
>> Om jag går in i quote.php.
Lägg märke till att detta faktiskt är en PHP funktion, ett PHP-program, som jag skrev
som förväntar sig en HTTP parameter kallad symbol, och jag kan passera in
ett värde som FB.
Och om vi verkligen titta på käll kod, är det att fråga en gratis hemsida
kallas Yahoo Finance, precis som p-set sju, och det är att återvända till mig
något i tydligen format som kallas är JSON -
JavaScript Object Notation.
Det är bara ett objekt.
Lägg märke till de klammerparenteser, citat, tjocktarmen, och kommatecken.
>> Nu under tiden, det är ganska coolt.
För jag kan nog använda en programmerings språk för att generera webbadresser
att se ut så här dynamiskt, rätt?
Jag kan ändra detta till Google och få tillbaka Googles
aktiepris på $ 1,017.55.
Så låt oss se om vi inte kan använda det här nu.
>> Låt mig gå till ajax-0 här, vilket ser ut som följande.
Det är bara en webbplats som har ett formulär med en knapp.
Låt mig här gå vidare och skriva in yhoo för Yahoos aktiesymbol, klickar du på Hämta
Citat, och nu märker jag har fått en varning med 32,86.
>> Låt mig faktiskt gå till en snyggare version på denna sida, version två, och
Skriv in låt oss säga Microsoft, MSFT.
Få offert.
Och nu märker, ingen varning.
Lägg märke där det står pris som skall fastställas?
Det är den enklaste av exempel som tips på vad Gchat, och Facebook
Chatta, och Gmail och andra sådana webbplatser gör genom att faktiskt
ändra webbsidan.
>> Lägg märke till detta.
Låt mig ladda om sidan.
Låt mig öppna Chrome Inspector.
Låt mig gå till elementen fliken här nere.
Nu märker om jag zooma in här nere och öppna upp detta, märker att det här är min
HTML DOM - min Document Object Model.
Det här är min HTML.
Men nu märker, även om det kommer vara lite svårt att se det i både
ställen samtidigt, om jag skriver på FB upp här, titta på botten
på skärmen bara.
>> Det är faktiskt förändras min HTML i farten.
Och det gör det helt enkelt genom att göra något som detta.
Om jag öppnar ajax-2, meddelande om genomförande något så sexigt som
att även om det är ganska fult, men så sofistikerade som det
funktionellt, den har några HTML längst ner.
Men märker jag brukade tagga.
Vi har inte använt det förut, men det är som ett, men det tvingar inte
allt på en ny rad.
Det gör bara ett rektangulärt område på samma linje i huvudsak.
>> Lägg märke till att jag gav det ett ID i pris.
Och det visar sig genom att använda samma JavaScript-bibliotek, jag har en funktion
kallas citat () som heter när formuläret skickas.
Och vad jag gör är det här.
Jag förklara en variabel i JavaScript kallas url, spara värdet
quote.php? symbolen =.
Med andra ord, jag själv börjar att förbereda en HTTP-begäran, och sedan
Jag sammanfoga in på det med ett plus oavsett elementet med ID-nummer
av symbolen är, vilket meddelande är att textfält ända ner hit.
Så precis som vi hade former i det förflutna.
>> Och då visar det sig i jQuery, om du ringa. val (), som kallar på en val
funktion, ett värde funktion, blir det vad användaren har matat in i.
Och så all nätverkstrafik som händer är detta.
$. GetJSON.
>> Och som en sidoreplik, är dollartecken bara en förkortning notation.
Det är verkligen jQuery.getJSON.
Ta mig till JSON från denna URL, och när begäran kommer tillbaka, kalla detta
funktion och passera som argument allt kom tillbaka från servern.
>> Så med andra ord, om jag går tillbaka till webbläsaren, och jag går tillbaka till quote.php,
vad min webbläsare gör är att få denna bit av data.
Och när jag går på denna webbsida här, märka om vi i stället gå till nätverket
fliken och avmarkera den och skriv in något som GOOG för Google och få
Citat, märker sidan ändrades inte.
Men en HTTP-begäran gjordes, och vad kom tillbaka hit om vi tittar på
svaret är en hel massa JSON som vi åt till slut med
denna enkla linje här.
>> Data är det som fått från servern.
Priset är namnet på den nyckel jag bryr mig om.
Så data.price ger mig det.
>> Nu under tiden, och detta är det sista exemplet.
Du kan göra ännu mer med sidan.
Ett faktiskt, väl två.
Vi kan föra tillbaka tagga, om du kommer ihåg det.
Det är JavaScript.
Vi kan göra det.
Mycket spännande.
Vi lämnar det som en cliffhanger.
>> Men mer spännande, kan du göra saker som denna.
Om jag går till geolocation-1, visar det sig att Chrome vet att vi är på
latitud longitud 42,37. -71,10.
Så det finns ännu mer där till ditt förfogande.
Men mer om det nästa vecka.
Vi ses måndag.