>> [9 § - Mindre Bekväm]
[Nate Hardison - Harvard University]
[Det här är CS50. - CS50.TV]
>> Okej. Så, sista delen av terminen.
För att starta, jag vet att det har varit en del skrik att göra några Ajax,
men finns det några andra ämnen som vi borde göra först?
Låt mig gå över till iPad så att vi har -
Låt mig använda svart istället för orange.
Ajax står på menyn. Någon annan?
Alla andra ämnen som folk vill se? Jag hörde DOM också tidigare.
[Elev] jQuery. >> JQuery. Okej.
jQuery. Vi kan göra ett hugg på det också.
[Elev] XML. >> XML. >> [Elev] JSON. >> XML, JSON. Okej.
PHP? Allt bra? C? Allt bra? >> [Elev] Det skulle inte skada att tala om PHP.
Hashtabeller? Antal försök? Länkade listor?
[Elev] Åh, på frågesport från förra året, det finns en tabell för omega och den stora O.
Yeah. >> [Elev] under tiden för de olika typer av versioner och illusioner.
Kan vi prata om det? >> Ja. Vi pratar om en liten bit av datastrukturer.
[Elev] Ja. >> [Elev] Försöker. >> [Hardison] Datastrukturer.
Vi kommer att tala om några försök för säker.
[Elev] Kan vi ha CSS lite? >> Ja, det kan vi göra lite CSS.
Alla andra ämnen? Sam? >> [Elev] Scope i PHP. >> [Hardison] Scope.
Omfattning i PHP. >> [Elev] HTTP.
HTTP. Awesome.
Jag antar att ett sätt att göra detta skulle vara att organisera allt slags kronologiskt
och börja med datastrukturer eftersom de som var tidigast.
Eller vi kan tilldela dem någon form av prioritetsviktning och gå därifrån.
Så vad tycker ni?
Finns det något som alla är döende för att se?
Låt oss göra en höjning av händer. Vad sägs om Ajax?
Hur många av er vill veta om Ajax?
Hur många av er är som, "Man, Ajax, jag har dig"? Ingen. Okej.
Så Ajax är ganska hög. Låt oss stjärnan den killen.
Vad sägs om DOM? Alla redo att rocka DOM? Nej? Okej. Vi stjärnan den också.
jQuery?
Queryless. Ja. Okej.
Ett par personer för jQuery, men fortfarande människor är lite mer chill med det. Okej.
XML? XML. >> [Elev] Använder du att mer än i samband med Ajax?
I den meningen att - Ja.
Jag menar, är det en viktig del i Ajax, så jag antar att vi kan kombinera det med Ajax,
prata om det hela där.
JSON? Vad är JSON? Okej, svalna.
Datastrukturer? Människor känner sig ganska bra där?
Du vet att dina länkade listor, känna dina hashtabeller?
Hur gick Speller går för alla? Det var en doozy, va? Yeah. Okej.
Ja, vi kan prata lite om dem, men återigen, inte så viktigt.
CSS?
Som gör din webbplats ser ganska. Okej.
Omfattning i PHP? En stor hand där borta. Två stora händer, tre. Okej.
Kanske ett medium hand. >> [Elev] Mer än 2.
Yeah. Sam är en kampanj. Upp med händerna.
HTTP? Okej.
>> Så låt oss se. Det ser definitivt ut som Ajax och DOM är att slåss om.
Så låt oss börja med det.
Jag antar att vi har ett par alternativ här.
En är att sorts göra en resumé av vad Ajax och XML är
eftersom vi inte riktigt har tid att göra det i avsnittet eller i problemet ställer.
Den andra saken är att dyka in i en del problem från tidigare års frågesporter
och se vad som händer där.
Varje preferens mellan de två? >> [Elev] Jag tror konkreta exempel skulle vara mer användbar.
Konkreta exempel mer hjälp? Okej.
Alla de i synnerhet de av er från Ajax besättningen?
Eventuella problem som du vill titta på?
[Elev] Är händelsehanterare relaterade till Ajax alls? Jag tror that -
JavaScript-händelsehanterare inte nödvändigtvis relaterar till Ajax. De kan.
[Elev] Ja, det är ett annat begrepp som jag egentligen inte får. >> Okej.
[Elev] Men jag tror i frågesporten från det senaste året finns det 1 stort problem
i de senare delarna av frågesport som är relaterade till Ajax och den syntax som jag inte riktigt -
Okej. Och Ella?
[Elev] Jag känner att jag vet vad Ajax är, men jag vet inte hur man använder det.
Okej. >> [Elev] Jag känner att jag inte vet vad Ajax är eller hur man använder det. [Skratt]
Okej. Det fungerar ganska bra.
Låt oss se. Låt oss kanske titta på ett bra exempel på Ajax först.
>> Välkommen, välkommen. Jag hoppas att du är okej på kameran.
Om inte, kan du hänga i ryggen.
>> Bra exempel på Ajax.
Låt mig gå över till min laptop.
Här är vi på Google.com.
Hur många av er har någonsin spelat det roliga "Hur gör jag?" spel på Google?
Hur gör jag - och du får se alla roliga saker som kommer upp -
sätta denna musik på min Tumblr?
Och du kan hålla på och få all denna typ av roliga saker.
Vad händer här?
När du skriver i Googles sökruta, är realtidsresultat uppdateras.
Så sätta detta - och du märker att alla resultaten starta uppdateringen på webbsidan Google.
Det är inte något som händer på din dator.
Nätverket är inblandad i det här. Google är involverad i detta.
Det visar sig att varje gång du trycker på en knapp, som säger G eller L,
och sökresultaten uppdatering, är vad som händer
är det finns någon JavaScript på den sida som är att upptäcka att du tryckte på knappen,
och det är att göra en nätverksbegäran till Google.com för att ladda upp alla de senaste resultaten
som bäst passar den fråga som du har skrivit hittills.
Tyvärr tror jag att om vi skulle titta på detta -
Jag kommer att titta på källan - det mesta av detta Ajax eller JavaScript-kod i här
är alla minified och ofta kodade lite för.
Den minification bokstavligen är ett program som du kan köra din JavaScript-kod genom
och det förändrar alla dina variabelnamn och gör det helt oläslig
men försöker göra din JavaScript så kort som möjligt
så att när du skickar dina JavaScript-filer över nätverket
du inte behöva ladda eller skicka stora filer.
Så det här är ganska svårt att läsa,
men begravdes i här, vilka befogenheter denna typeahead - modeord för detta -
är Ajax förfrågningar.
>> Vad gör en Ajax begäran skiljer sig från någon annan typ av förfrågan nätverk?
Sam? >> [Elev] Du behöver inte ändra URL. >> [Hardison] Höger. Exakt.
Du märker när jag skriver, "hur ska jag lägga min käkbenet i parningsläge?" [Småskrattar]
Det finns alltid lite kul - Ja.
Du märker att det här URL här uppe i toppen inte förändras,
och hela sidan inte är uppfriskande.
Så om vi tittar på den här typen av grejer rätt upp här, denna bar i toppen, detta Google,
och sedan det svarta fältet upp här, som kallas ofta krom på en webbsida,
det är inte förändras. Hela sidan är inte uppfriskande.
Den Ajax begäran används för att uppdatera bara resultaten från den sida,
just det 1 liten del av sidan så att du inte behöva gå till en helt annan webbadress,
en helt annan fil, och ladda det i minnet.
Så när man hör folk prata om den dynamiska Web 2.0 typ av revolution,
detta låg bakom mycket av det.
Det är detta som gör att du kan skriva en vägg inlägg på Facebook, slå inlägg,
och ha den posten visas utan hela Facebook-sida uppfriskande
eller bläddra igenom en massa bilder och läsa in bilderna dynamiskt,
eftersom hur mycket skulle det suga om du gick till din Facebook-sida,
klickade på foton, och sedan fick sitta där och vänta
medan alla par tusen av dina Facebook-bilder laddas in i minnet?
Det är en enorm belastning.
Men med Ajax kan du göra det asynkront,
och det är den asynkrona delen av Ajax.
>> Okej.
Är vi bra? Får alla slags förstå ungefär vad Ajax gör?
Det är gjort av JavaScript, är det gjort slags dynamiskt och asynkront
efter att sidan har laddats.
Det kommer ofta in efter som ett slags svar på en händelse,
som antingen är ett musklick eller en tangenttryckning eller något liknande.
Och då är det ett samtal tillbaka till servern, oavsett om du är på Google.com
eller Facebook.com, hämtar lite nytt innehåll för att sedan visa eller uppdatera
eller nåt sånt.
>> Cool. Okej.
Låt oss titta på ett par exempel från tidigare år.
Vi går till frågesporter.
Och sedan Charlotte, du nämna Quiz 1 från 2011. >> [Elev] Ja.
En sak som jag kommer att försiktighet är att titta på tidigare års frågesporter
du ser det här som kallas XHR ofta med relationen till Ajax.
XHR och XML httprequest är typ av den råa sätt att göra Ajax, om ni så vill.
I år har vi gått över till nästan helt med hjälp av denna jQuery-biblioteket.
jQuery är ett bibliotek av hjälpar JavaScript-funktioner och klasser och allehanda godsaker,
och jQuery slags abstraherar rå XHR grejer ifrån dig
så att det är mycket lättare att göra själva Ajax grejer.
Så när du bläddrar igenom dessa tidigare års frågesporter
och du ser saker som säger XHR och nya XML httprequest,
alla såna saker, kan du ignorera det.
Istället ska vi bara jQuery vägen.
Vi förväntar oss inte att du ska veta XML httprequest.
Men bra att veta att det är synonymt med denna idé om Ajax,
denna Asynchronous JavaScript hämta XML eller JSON eller vad över nätverket.
Men från början var det korrelerade med XML eller ansluten till XML.
>> Okej.
Låt oss bläddra ner. Kommer du ihåg vilka problem i synnerhet, Charlotte?
Var det den här sidan som jag tittar på just här? >> [Elev] Ja, jag tror det.
[Hardison] Ah, jag har det. Okej. Yeah.
Låt oss tala om det här verkligen snabbt.
Sättet Ajax fungerar är att du har lite JavaScript-fil på din dator,
och verkligen det körs typ av i samband med din webbläsare.
Så om din sista projekt är att göra - jag vet inte - en ny dejtingsajt för Harvard människor
och du vill att din dejtingsajt för att ha möjlighet att skicka anonyma meddelanden
från person till person eller anonyma Facebook väggliknande inlägg
och du vill använda Ajax i att på något sätt så att när du postar ett meddelande
den inte uppdatera hela webbplatsen,
i din JavaScript-kod som du vill ställa in en ny Ajax samtal.
Jag diskuterar om huruvida eller inte att göra detta på den bärbara datorn.
Den viktiga delen om Ajax samtalet är att det är denna typ av asynkronitet till det
i den meningen att - låt mig byta tillbaka till min iPad -
i den meningen att om jag har kod som kommer att säga att göra några Ajax,
då kan jag inte på mycket nästa rad av min JavaScript-kod
förvänta sig att Ajax ska ha genomgått.
Vad som händer är att när koden körs sekventiellt i JavaScript,
När du gör detta Ajax samtal, du är i huvudsak forking ut
och skicka en förfrågan ut till Internet i någon server över här,
vilket är den här rutan Jag ritar och tydligt inte dra det mycket väl.
Du förgrening av denna uppmaning till den server som kommer att ta tid
eftersom det går ut till Internet och går och träffar den servern
och går och kräver att PHP-skript som du har skrivit på bakändan
att faktiskt spela det anonyma meddelandet i din databas eller något liknande.
Så det kommer att ta tid, och sedan så småningom när servern är klar att bearbeta
din Ajax begäran kommer den att återgå till din JavaScript-kod,
men du vet inte riktigt var, när i utförandet
du kommer att få denna respons.
Hur hanteras detta i JavaScript?
Det är där det kommer i det här problemet som vi pratar om på den bärbara datorn
där du registrerar en handler, du registrerar en viss JavaScript-funktion
löpa när Ajax begäran är klar.
Du kan inte bara göra ditt Ajax samtal och sedan i nästa kodrad
anta att Ajax samtalet har avslutats.
En del av skönheten i detta är att du vill att din JavaScript för att fortsätta att köra
efter att det är gjort i Ajax samtal eftersom det kan punga ut denna separata begäran
och fortsätta bearbeta annat.
Du har den här typen av samtidighet gå här där din JavaScript fortsätter att gå
och fortsätter att göra andra roliga saker, skulle kunna fortsätta att snurra ut andra Ajax förfrågningar.
Dina Ajax begär bara att gå ut på nätet och komma tillbaka när de kommer tillbaka då,
men när du registrera hanteraren funktion,
det är då du vet att din Ajax samtal har återvänt eftersom funktionen anropas.
Så istället för att ha denna sekventiell exekvering väg som vi är vana vid i C,
har du vad som är mer likt det vi såg i Scratch i början av terminen
där du har dessa sändningar
och då har du dessa "när grön flagg klickat" eller "när jag tar emot denna händelse."
Det är i grunden vad som händer här i JavaScript med dessa Ajax förfrågningar.
>> För att svaret på denna fråga på rad 20,
"I samband med Ajax, vad betyder den här kodraden gör?"
kan någon slags parafras vad jag sa för att bekräfta förståelse?
[Elev] Jag är ledsen. Vad innebär den vänstra halvan av det?
[Hardison] xhr.onreadystatechange. Ursäkta. Får jag avskuren?
Detta är det XHR syntax som vi inte kommer att ha att göra med.
Du har liknande koncept med jQuery.
Låt oss gå till källkod, onsdag, Index.
Låt oss slå upp det här. Okej. Uppfattat.
Här är det Ajax syntax som vi pratar om.
Här du ange Ajax begäran.
Du säger, "Det här är webbadressen jag vill gå ut och ping."
"Jag vill använda POST istället för GET."
Och sedan datatypen är "Jag vill JSON som ska returneras."
Återigen, XML var typ av den traditionella sak.
Men vad vi letar efter den funktionen.
Detta är det just här.
Denna funktion (svar) är att onreadystatechange.
Det är föraren. Detta är vad som kommer att utföra när denna ansökan kommer tillbaka.
Så du märker att denna funktion som Tommy har skrivit här
som vi talade om i föreläsning på onsdagen var allt om att skapa det roliga typeahead för oss.
Du märker att det han gör är att han bygger på Ajax begäran
och sedan finns det inget efter Ajax begäran.
Han är inte bearbeta svaret från Ajax begäran efter samtalet görs.
Han bara gör det i denna hanterarfunktion
som kommer att kallas så snart svar innebär komma tillbaka.
>> Sam. >> [Elev] Har Ajax förfrågningar måste vara av typen POST eller kan det vara FÅ?
De kan vara antingen. >> [Elev] Hur skulle det fungera om du inte ändrar webbadressen?
Hur skulle det fungera om du inte ändrar webbadressen?
Det beror bara på var data går.
Så frågan är kan Ajax förfrågningar vara POST eller GET?
Det är där det kan vara heller. Det är bara egentligen en semantisk skillnad mellan POST och GET.
GET oftast innebär att du bara läser något från servern
och du inte ändrar något, medan en POST innebär normalt
att du skriver data eller om du ska skriva något på en server.
Ofta du använder POST när du försöker ändra tillstånd någonstans.
Därför inloggningar går alltid med HTTP POST,
medan Google gör en massa GET-förfrågningar.
Egentligen, om vi går tillbaka till våra Google exempel och om vi tittar på våra utvecklingsverktyg här,
låt oss titta på de utvecklingsverktyg här i botten och öppna upp nätverket.
När vi börjar skriva, kan du se alla dessa får förfrågningar kommer in
Du ser alla dessa får förfrågningar här längst ned på skärmen
som är alla dessa xjs.
Detta är den begäran Ajax kommer tillbaka.
Och om vi skulle klicka på det, kan vi se vad den säger och vad dess svar är.
Det ger oss all denna information om det svar som vi fick
När vi skickade till Google rubrikerna som var här nere.
Få se om det har - Det kommer att ha vår frågesträng någonstans.
URL-begäran. Yeah.
Original fråga, ignorera dåligt fråga, andra passet, hur jag meter -
Hur som helst, någonstans här kan du hitta det här "hur jag meter" query
på begäran till servern.
Och då svaret kommer tillbaka är vad vi ser.
Så ja, kan det vara antingen GET eller POST.
Det tenderar att vara bara en semantisk skillnad. Vi kan täcka det med HTTP. Ja, Ella?
>> [Elev] Är skillnaden mellan JSON och XML bara att JSON är mer modernt?
Är skillnaden mellan JSON och XML som JSON är mer modernt?
XML och JSON är bara två olika sätt att koda data.
XML är ett Extensible Markup Language.
HTML är en delmängd av XML.
Så till exempel, låt oss dra upp Textedit.
XML är bara definieras som data som är inneslutna i en serie av etiketter.
Så html, / html, killarna är giltiga taggar.
Låt oss spränga denna storlek här och göra den mer lättläst.
hej!
XML definierar bara en etikett som något liknande
där du har en öppenvinkelfäste, namnet på etiketten,
och sedan valfritt antal attribut, som i HTML vi ofta inte har attribut.
Men till exempel om vi hade en script-tagg, det har ofta den typ av text, Javascript.
Och inne i taggarna är data.
I sann XML kan du faktiskt definiera dessa taggar för att vara vad du vill.
Det är bara ett sätt att strukturera din information.
Så till exempel, om jag ville koda min familj i XML,
Jag skulle kunna göra något sådant, som far och sedan lägga in information om honom
och bror och lägga in information om min bror.
Just detta sätt att strukturera dina data är XML.
JSON, å andra sidan, följer JavaScript Object Notation,
därmed J-S-O-N, JSON.
Så snarare än att skriva med denna typ av tagg, nära tag typ format,
vi istället skriva det som ett JavaScript-objekt.
Så JavaScript-objektet har lockigt stag för att öppna saker
och sedan en klammerparentes att stänga saker.
Låt mig zooma ut lite, zooma in
Och vad du har är namnen på fälten, så "far":
och då kunde jag lägga in information om honom
och sedan "broder": och information om min bror.
Och naturligtvis allt här är -
Jag antar att det är trevligt om JSON i motsats till XML
beror på att en JSON-objekt är i det här objektet notation som JavaScript har.
JavaScript kan verkligen enkelt dra det i minnet och behandla det precis som ett JavaScript-objekt
rätt när du får tillbaka den från servern.
Det finns ingen tolkning att det verkligen har att göra som är tunga eller tunga lyft,
medan med XML måste du använda antingen plugins eller något slags -
Beroende på vad exakt du sänder
och vad du använder för att ta emot XML, kanske du måste göra lite mer arbete parsning,
Detta JavaScript-grejer, om du bara skriver med JavaScript
och du får JavaScript tillbaka, det är verkligen lätt att arbeta med.
Den andra saken som folk också kommer att nämna ibland
är att med XML du har alla dessa öppna taggar och nära taggar,
så det kan bli stor, kan det bli lite uppsvälld.
Så finns det några som kommer att tala om hur med JSON
du behöver inte ha alla dessa öppna taggar och nära taggar, så det är mer komprimerad.
Anledningen till att det är viktigt är att när du måste fylla på saker över nätverket
när du pratar med en fjärrserver,
desto mindre som behöver överföras över Internet, går snabbare allt.
Hur som helst, är nyckeln takeaway här är de bara 2 olika sätt att strukturera data,
formatera dina data.
>> Okej.
Övriga frågor? Charlotte?
[Elev] Kan jag ställa en sista fråga om syntaxen i Ajax? >> Visst.
[Elev] Om du går tillbaka till exempelkod och bara zooma ut lite,
det finns bara 1 rad kod ovan.
Kan vi bara gå upp?
på ('keyUp', ()-funktionen
Är det uppsättning tomma parenteser efter på ('keyUp' hänvisning till funktion efter framgång?
[Hardison] Nej.
Ett par saker här.
på ('keyUp', är detta ett sätt att göra motsvarande i Scratch
av när en knapp trycks in och du lyfter upp bort av nyckeln.
Faktiskt, i JavaScript du har på ('keyDown', på ('keyUp', och på ("knapptryckning",
och du kan göra saker på var och en av dessa tre olika händelser.
Detta är att registrera en händelsehanterare varje gång en knapp kommer upp,
och då denna funktion är hela denna sak
hela vägen ner till där.
Den här funktionen har inget namn.
Slags konstig.
Alla våra funktioner som vi har gjort i C och PHP har alla hade namn.
Detta är vad vi kallar en anonym funktion. Vettigt, eller hur? Inget namn. Anonym.
Vad är praktiskt om den anonyma funktionen?
Uppenbarligen kan vi inte kalla denna funktion någon annanstans i vår kod.
Hur skulle vi kalla den här funktionen på andra håll i vår kod? Vi kan inte.
Det finns inget namn. Jag kan inte säga, "Ja, kalla det fungerar som jag sa med på ('keyUp'."
Vad är praktiskt om det är dock att i JavaScript
när vi ständigt registrerar dessa händelsehanterare -
det är vad det kallas, du registrera denna funktion som en hanterare när en knapp kommer upp -
är det verkligen skönt att kunna bara definiera dessa funktioner sorts inline och bara säga,
"När keyUp trycks, kom ihåg denna funktion som jag kommer att definiera just här,
och det kommer att komma ihåg denna funktion och så kommer det att göra denna funktion
närhelst knappen kommer upp.
Vi ska prata om det här mer när du får mer i funktionell programmering.
Detta är lite av en smak av det där vi i huvudsak passerar en funktion runt
som ett objekt, nästan som om det var som en variabel.
I stället för att passera en sträng eller int, vi passerar en funktion.
Det är lite av en konstig sak, men det som är skönt är att alla variabler i här,
insidan av denna funktion, de avgränsningsfrågor är trevliga
för om du har en variabel upp här, kan du hänvisa till den variabeln insidan av denna funktion
eftersom funktionen deklareras inuti denna andra funktion.
Så du får ha förmåner som det.
Återigen, det är något som är mer meta. Du kommer att täcka det i kommande klasser.
>> Ja. >> [Elev] Eftersom funktionen är anonym, kan den användas någon annanstans?
Eller kan den bara användas i samband med denna funktion?
[Hardison] Den används endast i samband med denna funktion. Yeah. Ja?
>> Har det något att göra med det faktum att det är ett objektorienterat språk?
[Hardison] Har det något att göra med det faktum att det är objektorienterat?
Jag skulle säga att detta har mer att göra med det faktum att det har funktionella aspekter.
Vi pratar om det objektorienterade paradigmet av programmering,
och det är typ av en av de aspekter av den funktionella paradigm för programmering
där du gör funktioner som består av andra funktioner
och du passerar funktioner runt.
>> [Elev] Så JavaScript är ett funktionsspråk också.
Den har inslag av det, ja. Yeah.
JavaScript och många -
PHP har en del av detta också, har Python samma sorts saker,
Ruby har den här sortens grejer också, och detta är vanligt i flera av dessa moderna språk.
Du får verkligen dessa skriptspråk som är typ av jack-of-all-trades.
Det är som den stora feta schweiziska armékniv, en som du inte ens kan sätta i fickan
eftersom det är för stort.
Det är typ hur några av dessa språk har blivit.
>> Fler frågor? Okej.
Hur ska ni känner?
Låt oss gå tillbaka till denna frågesport riktigt snabbt och se om vi kan svara på 21 och 20.
Vi pratade om 20 som vi registrerat hanteraren.
Denna fråga här, "Vad skulle bli effekten om vi skrev den linjen med ett par parenteser?"
du se skillnaden, hur upp i toppen finns det inga parenteser
och här nere finns parentes efter funktionsnamnet?
En sak som är viktigt att notera,
här vi hänvisar till en funktion.
Detta är inte en anonym funktion. Det har fått ett namn, handler,
medan i vår Ajax hit att vi bara tittar på,
alla de funktioner som vi passerar runt var alla anonyma: ingen funktion namn,
ingen funktionsnamnet.
Så det är vanlig praxis att definiera dessa funktioner typ av inline som anonyma funktioner
för en del av avgränsnings fördelar.
Du kan mycket väl ha definierat denna funktion just här eller här på ('keyUp' funktion.
Du kunde ha definierat den här killen som funktioner med namn på andra håll i din JavaScript-kod,
och då istället för att definiera funktionen här, skulle du skicka namnet på funktionen
rätt i denna plats.
En sak att notera är att du inte skulle vilja använda parentes
om du anger namnet på funktionen,
eftersom när du använder parenteser, du antyder "kallar denna funktion"
medan i stället här vi vill bara att passera namnet på funktionen.
Om vi ​​tittar på vad som händer här, är den stora skillnaden att denna översta kodraden säger
effektivt, underhåller en pekare till den funktion som kallas handler,
och när Ajax anrop slut, kalla denna funktion,
faktiskt utföra funktionen, koppla in argumenten, gör allt detta arbete,
Denna linje här nere säger istället för att upprätthålla en pekare
till den funktion som kallas handler, detta onreadystatechange område
kommer att hålla resultatet av en funktion som kallas för hanterare,
så det kommer att utvärdera handler, det kommer att faktiskt ringa handler just nu -
inte när Ajax anrop slut men just nu,
vilket inte är vad du vill göra om du skriver något
att ta itu med en Ajax samtal som är klar.
>> Okej. Frågor om det? Det är en subtil skillnad.
Det är en subtil skillnad.
En sak som jag definitivt skulle föreslå att göra om du inte har gjort det -
eftersom det är nya saker, det tar ett tag för den att verkligen sjunka in
om du faktiskt skriver en del av det här ut -
Jag vill uppmuntra er att gå igenom källkoden
att Tommy presenteras i föreläsning på onsdag
eftersom han definitivt gick igenom en massa saker, typ av i en oskärpa.
Jag skulle faktiskt prova att skriva ut det.
Försök att koda lite saker upp.
Gör en fil. Js. Skriv ut koden själv. Inte bara kopiera och klistra in.
Inte bara köra CP.
Försök att göra det bara för att typ av flex JavaScript muskler.
Se vad det är.
Till exempel, här jag tittar på quote7.js i källkoden från onsdagens föreläsning.
Försök att gå in och i stället för att bara göra alla dessa funktioner anonym,
kopiera den här koden, bokstavligen gå ner till denna framgång kod,
kopiera, klistra in den på en annan funktion, och ge den ett namn,
och sedan försöka passera namnet på och se vad som händer.
[Elev] Kan det vara i en separat fil eller i samma fil?
Det kan vara i en separat fil om du ordentligt inkludera det.
En sak som kommer att bli -
Tricket är inte denna funktion hänvisa till någon av de variabler som ligger utanför det?
Och jag tror att det bara syftar på svar.
Yeah.
Du kan namnge detta.
Du kan dra ut den, kan du ge den ett namn, och sedan kan du skicka namnet på här.
Så jag skulle ge det ett försök, se hur det fungerar.
>> Okej. Frågor? Frågor? Jag älskar frågor.
Jag vet inte om er, men jag gillar dem.
Hur ska ni känner om det här?
Det är lite av det här, "Oh, crap" stämningen i rummet. [Studenter skratt]
Är den typen av hur ni mår? >> [Elev] Ja. >> Yeah? Ja, Daniel?
>> [Elev] Jag tror att jag förstår typ av de övergripande begrepp som du pratar om,
liksom de anonyma funktioner och allt det här,
men jag förstår inte halva den syntax som är där uppe just nu,
gillar vad ul medel, li, dessa olika taggar.
Jag tror inte att jag skulle kunna koda något med JavaScript. >> Fair.
Är det en vanlig känsla, gemensam känsla, det låter som? Okej.
[Elev] Kommer vi behöver? >> Ska vi behöva koda?
Du bör vara beredd att dissekera ungefär så här, skulle jag säga.
Jag är inte den som skriver tentan,
men jag skulle definitivt säga att om det är en vanlig känsla,
typ av att en hel del av den här syntaxen här ser ut, "Vad fan är det som händer?"
"Jag är helt simma," låt oss tala om det och fixa det.
Låter det bra?
Okej.
>> Så vad händer här? Låt oss ta denna rad för rad.
Låt oss försöka gå runt i rummet.
Jag kommer bara att uppmana folk 1 av 1, och ge mig din bästa gissning.
Vi gör det snabbt. Du har 5 sekunder att svara.
Om du inte svarar, vi går till nästa person.
Och det är inte en stor sak eftersom jag vet att det är galna grejer.
Vi börjar här. Charlotte, vad gör denna linje göra?
[Elev] Det skapar en variabel som heter förslag
och ställer in det motsvarar vad ul är. >> [Hardison] Höger.
>> Jimmy, vad är ul?
[Elev] Jag vet inte. >> [Hardison] Okej, coolt. Charlotte var helt rätt.
Denna kodrad som jag har markerat här deklarerar en variabel som heter förslag,
en JavaScript-variabel.
Vi har denna nyckelordet var framför som ser till att variabeln förblir lokala
till den omfattning som det är i.
Och detta ul sak som vi inte har sett förut riktigt,
låt oss se om det finns en god - Låt mig byta tillbaka till min iPad.
Ny sida.
Jag är säker på att ni har sett ul innan.
Det är en oordnad lista.
Så har du någonsin sett på en webbsida där du har kulorna
och du har Thing 1 Thing 2, och så vidare och så vidare?
Detta är en oordnad lista.
Det sätt som du skulle koda detta i HTML är att du skulle börja med en öppen tagg
som öppnar den oordnad lista, skulle du stänger den med en nära tagg som stänger oordnad lista,
och sedan i mitten du måste lista artiklar, li.
Och inne i li s skulle vara den text som ska visas, så Thing 1 och Thing 2.
Då skulle vi stänga våra listämne taggar.
Oordnade listor är super vanligt eftersom det är ett bra sätt att få samma styling
appliceras på en rad olika saker.
Så om du tittar på, till exempel, pset 7 koden,
en hel del av de nav piller, navigerings piller som används för de olika länkarna
Köpa, sälja, Citat, historia, allt detta, de som genomförs som oordnade listor,
och de använde CSS för att ta bort dessa punktlistor
och typ av vända något.
Det är lite av kraften i CSS är att HTML beskriver strukturen.
Vi har en lista med listobjekt.
Det är oordnade. Det finns ingen första, andra eller tredje. Det är bara en lista.
Och så som standard kommer att dra det med bara kulor.
Om vi ​​istället hade skrivit ol, så jag kommer att ändra detta till en ol-lista
i motsats till en ul, vad skulle det göra?
Det skulle bli av med dessa kulor, och standard skulle i stället vara en numrerad lista
för nu har vi beställning.
Formgivningen av listan är då vad du leka med i CSS,
och det är där folk som skrev Bootstrap bibliotek för CSS lekte
med den grafiska utformningen av en oordnad lista för att få den att visa dessa fina små nav piller.
Om vi ​​ser på Google, till exempel, låt oss ta en titt på den här killen.
Tillbaka till "hur jag m din mamma" - låter lite tyska.
Jag älskar tyska. Det låter så kul.
Jag är ledsen om det finns några tyska folk tittar som känner sig kränkt.
Hur som helst, om vi tittar på dessa länkar här uppe på toppen
och vi tittar på vad som händer där, kan vi kontrollera det med den här killen.
Jag är långt nere i hörnet.
Utvecklingsverktyg på Chrome är fantastisk.
Om ni börjar leka med den eller leta upp tutorials för det, det hjälper en hel del
om du gör webbaserade projekt.
Jag klickar på min lilla inspektör. Jag kommer att rulla tillbaka upp hit.
Jag ska se vad alla dessa killar är.
Jag zooma in jag ska klicka på dem.
Sedan kan jag zooma ut och se vad det egentligen är i HTML vägen hit ner.
Det ser ut som Google har kapslade det i en ordnad lista.
Så vi har fått denna spännvidd som säger + Ni, och som är inkapslad i ett ankare tagg,
så det är det som gör den klickbar och länkar den till min Google+ sida.
Den är inkapslad i ett listobjekt,
och den är inkapslad i detta ordnad lista.
Och nu om jag klickar faktiskt listobjektet, kommer det att lyfta fram det för mig där uppe.
Om jag belysa oordnad lista, ser du hur fokus går i toppen.
Den växlar upp och visar mig hela ordnad lista.
Så Google har precis spelat runt med styling för att få dessa listor för att visa upp så där.
Det är tillräckligt kul med listor. Tillbaka till frågesport eller det här.
Nu vet vi vad en oordnad lista är - förhoppningsvis.
>> Låt oss tala om det här nästa kodrad, for (var i in response.symbols). Ella.
[Elev] Jag har ingen aning. >> [Hardison] Ingen aning.
Okej. Du har sett en för loop innan, antar jag. >> [Elev] Ja.
[Hardison] Minns du gör för var i PHP? >> [Elev] Ja.
[Hardison] Det är just det.
Detta är en för varje slinga i JavaScript.
Detta är en kortare väg än att göra det för (var i = 0; i <response.symbols.length, i + +),
som vi skulle kunna göra,
men detta är ett mer koncist sätt att skriva det.
En sak att vara försiktig med i JavaScript är att detta inte nödvändigtvis behöver följa ordningen.
Om response.symbols är förmodligen en matris,
var jag kommer att vara ett index in i denna samling, men det är inte nödvändigtvis det 0 och sedan 1
och sedan 2 och sedan 3.
De säger använda den for (var i = 0) om du bryr dig om beställning.
Jag antar att den andra sak att notera är att när vi använde ett för var och en i PHP,
Vi specificerade matrisen namnet först och sedan hade vi det som sökord
och sedan vi specificerat det värde som vi ville hämta från arrayen.
Eller vi kan ange både nyckeln och det värde som vi ville hämta från arrayen.
Här ska vi bara få indexet.
Vi kommer inte att få den verkliga själva elementet.
Så du ser att när vi går här nere vi faktiskt behöva hämta den i: te elementet
ur response.symbols invända.
Den andra saken som är galen om det här är att du kan använda detta för att slinga över objekt i JavaScript
och hämta var och en av egenskaperna för det objektet 1 med 1.
Om vi ​​gick tillbaka till att JavaScript Object Notation skildring av min familj
där det var bokstavligen de klammerparenteser och far, bror, mamma, allt det,
du kan använda en for-slinga för att iterera över det också
och hämta fastigheterna 1 av 1.
Slags galen.
Så vad vi gör, det ser ut, är att vi bygger upp en HTML-sträng
precis som den här kommentaren säger, "bygga html-sträng för en lista med förslag."
Vi ska börja med vår öppna tagg för vår oordnad lista
där vi antar att vi kommer att lagra alla förslag som listobjekten.
Sen ska vi slinga över alla symbolerna i svaret
eftersom ihåg detta är en typeahead för CS50 Finance,
så vi drar oss ur aktiesymboler 1 av 1.
Och sedan ska vi lägga till våra förslag sträng vad?
>> Jared, hur ser det här ut som?
[Elev] Det verkar som det är att ta tag av någon form av databas
vilken bokstav du skriver in,
lämnar någon form av förslag vad ordet - >> [Hardison] Ja.
I Ajax förfrågan redan faktiskt gick och greppa det. Detta är vårt svar.
Detta är faktiskt efter att vi har fått svaret från databasen från servern.
>> Och så vad är det här? Vad innebär detta enda citat sak beteckna?
[Elev] Den enda anbud? >> [Hardison] Ja. Det är bara en sträng, eller hur?
Och så vad är det här crafting?
Det är en sträng och vi sätter saker i strängen. Och vad som är strängen ser ut?
[Elev] Bara tanken att Vi är - >> [Hardison] Ja, exakt.
Det är förslaget inkapslad i ett ankare tagg,
och det är också förankrad inne i ett listobjekt så att det kommer att gå in i listan.
Bokstavligen, är allt vi gör här vi bara bygga upp en stor HTML-sträng.
Vi ska bara bygga upp det bokstavligen som en sträng i minnet.
Vi ska inte göra något fint.
Vi ska inte skapa nya noder i DOM-eller något liknande.
Vi är bokstavligen bara bygga en sträng som om du skulle skriva ut, till exempel,
på din iPad som jag har - om ni har en iPad och gillar att skriva HTML på din iPad -
du bara skriver en stor lång sträng som är som ul, li, en ...
och då vi givetvis kommer att säga det med denna ul.
Så det är allt vi får är en stor, massiv sträng.
Och inuti finns det en li och en för var och en av de symboler som vi hittade.
>> Och nu, fortsätter den, vad gör den här raden gör, Stella, just här?
Vad gör denna linje göra här?
[Ohörbar studerande respons]
[Hardison] Ja. Det är bara att lägga till den här killen.
Vi bara slutade vår lista. Exakt.
>> Och sedan denna sista raden - och det ser typ av fånig -
Jag är ledsen. Jag vet inte ditt namn i den röda tröjan. Vet du vad detta innebär?
Eller kommer ni att besluta något?
Och du? >> [Elev] Det kallar jQuery på det, men jag vet inte exakt vet vilken funktion det är.
[Hardison] Ja. Det kallar jQuery.
Vad sägs om någon här över på vänster sida av mig?
Vet du vad det här raden gör? Vad ser det ut som det gör om du skulle gissa?
[Elev] Skicka till HTML listan med förslag, eller är det -
Yeah. Vad menar du med att skicka in?
[Elev] Att säga till HTML vad vi just behandlat i JavaScript
är nu definitivt bara HTML. >> [Hardison] Ja.
Det är en bra start.
Låt oss dissekera detta lite mer.
Det är precis vad den här delen gör just här.
[Elev] Vilken aspekt av det gör det klart att det är jQuery?
[Hardison] jQuery är det dollartecken kille.
Varje gång du skriver jQuery, kommer du att se den här dollartecken överallt.
Detta har bara använts i jQuery som typ av en speciell symbol.
Det gör en hel massa saker.
I samband med detta just här, denna del av linjen, är det en väljare.
Det är jQuery väljaren, och det är att välja den HTML-element
som har ID-förslag.
Kom ihåg hur HTML-element kan ha att ID-attribut
där du kan ha en punkt tagg som har ID-förslag?
Denna jQuery väljaren kommer att fånga det elementet
eftersom det elementet måste finnas någonstans i minnet.
JavaScript kan slags precisera det elementet och säga,
"Åh, okej, du är den punkt som har detta ID,"
och sedan detta. html säger, "Okej, ersätta den nuvarande HTML inom dig
"Med den nya strängen, den nya HTML som jag ska ge dig."
Så om vi ser tillbaka över på iPad - ha, ha, mindes jag att byta den här gången -
du ofta sätta in saker som divar, så föreställa sig att vi hade en div som hade id = "förslag";
Vi kommer att stänga div-taggen här nere.
När vi använder jQuery väljaren att greppa elementet i DOM
som har ID-förslag, väljer det bokstavligen hela denna div just här,
och sedan HTML-metoden säger, "Ersätt allt det här rätt i här
"Rätt i det ul, som oordnad lista som vi just byggt upp."
Bokstavligen, om du tittar på hela HTML-filens sträng i minnet,
du skulle bara säga, "Gå in i den platsen och plundra i det ul grejer"
och sedan uppdatera sidan så att du nu ser oordnad lista där.
Så vad detta har faktiskt gjort är det dynamiskt uppdaterade denna div.
Den kod som vi bara såg på den bärbara datorn har uppdaterat denna div
att hålla de nya förslag som hämtades från servern någonstans.
[Elev] Vilka förslag representerar de nya förslag och de gamla förslagen?
De nya förslag och de gamla förslagen.
[Elev] Vad representerar vilken som byts ut och som man gör den ersätter?
[Hardison] Uppfattat.
Se här, den här killen är en sträng.
Detta anger ID på ett element - vi kallar det i DOM -
vilket bokstavligen betyder bara några HTML-element som någonstans visas kan
på webbsidan.
Om vi ​​skulle titta på det här, om vi går tillbaka till vår Google-sida,
Vi ser alla dessa divar och dessa ol-talet och dessa li-talet och dessa a-talet.
Dessa utgör alla de HTML-element som för närvarande utgör den här sidan.
Dessa alla korrelerar till enskilda element på sidan.
Och om vi skulle ändra på detta, skulle du titta på DOM förändring,
och du kan se den här typen av växling.
Så om vi skulle skriva Harvard, skulle du se DOM börjar förändring
och listelementen börjar ändra på här.
Det är faktiskt vad som händer.
>> Låt oss se om vi kan hitta några av det här rätt i här.
Låt oss titta på den här länken. Låt oss titta på detta Harvard Wikipedia länk, och vi kommer att titta på det förändras.
Vi kan se det som jag har valt det här, svarar den till denna div just här,
som också är en del av ett listelement, som ligger precis intill en annan listelement,
vilket är en del av oordnad lista här.
Nu vad händer om vi söker efter vår mindre skola lite söderut?
Det ändras nu.
Så vi förlorade vårt grepp om den div och listelement
för nu har vi olika element i vår DOM,
olika listelement, olika listobjekt, olika längder, allt detta.
Så här HTML-dokument håller uppdateras dynamiskt.
Gamla element tas bort, nya element läggs till.
Tillbaka här vi bara ange detta element, som förmodligen kommer att vara stabil
hela vår typeahead uppdatering,
annars om jQuery inte kan hitta ett element som har ett ID av förslag,
det ska bara krascha på denna punkt.
Och då vi uppdaterar sin inre HTML.
Så det är dessa listobjekt, dessa ankare taggar som ständigt kommer att uppdatera och uppdatera när du skriver.
Betyder det att göra ett bättre jobb? >> [Elev] Det hjälper mycket. >> [Hardison] Okej.
Syntaxen att du kommer att se en hel del - vet vad den här killen gör.
Vet jQuery väljaren.
Denna jQuery väljare med en hash-taggen framför innebär ett ID.
Den här killen säger: "Ge mig det element som har ID-förslag."
Den här killen här nere säger också, "Ge mig som samma element med ID-förslag."
Denna killen nedanför den är något mer komplex.
Det säger, "Ge mig elementet med ID formulär-citat,
"Men sedan gå in formuläret och hitta barnet" -
så detta utrymme här innebär att vi ska ett underordnat element, en kapslad inslag.
"Hitta den form som har detta ID och sedan hitta ingången inne den formen vars namn är symbol."
Detta är definitivt i Tommys föreläsningsbilder, dessa olika typer av jQuery väljare.
Du bör veta vilka typer av element dessa hämtar.
Till exempel, låt oss byta tillbaka till iPad riktigt snabbt.
Om vi ​​hade ett formulärelement med id = "form citat" -
naturligtvis som saknas metoden = POST eller metod = GET och handling attribut samt
att du bör ha på blanketter, men bara för detta exempel ett formulär, som ni vet, har ingångar
och att kod som vi såg bara skulle få ingångselementet
som hade namn = "symbol".
Detta är viktigt när du försöker fylla olika områden inne i formuläret.
Detta är hur auto-fyllning verk.
>> Ja, Ella?
[Elev] Vad är skillnaden mellan ett ID och en klass? >> Ett ID och en klass? Yeah.
En klass används för styling ändamål.
Ett ID används för vad det låter som: unikt identifierar ett visst element.
Så inom en HTML-sida, kan du bara ha 1 element med ett visst id.
Det finns bara 1 formuläret med ID-formen-citat.
Men det nav piller klass eller nav klass var nog något som du använt
möjligen eller såg i samband med din Problem Set 7 kod.
En klass används för att tillämpa en särskild styling till en massa olika element.
Till exempel i de gamla dagarna i HTML innan det fanns stilmallar,
innan det fanns CSS, dessa Cascading Style Sheets,
om du vill centrera ett stycke eller centrera texten i en div,
du skulle ha en div och sedan du skulle ha något som text-align = "center"
som som ett attribut i din div.
Det här är inte bra.
Anledningen folk inte gillar detta beror på att sedan när du ville uppdatera
hur det som visas på din webbplats, du var tvungen att bokstavligen gå in i varje sida
och varje HTML-fil och gå ändra alla stylings på alla de olika delarna,
och det var en enorm smärta eftersom ofta du ville ha ett gäng divar
som alla var centrerad eller passa ett visst sätt.
Så lösningen på det var den klassen.
Nu har vi en div där vi har klassen som anges för att vara vad du vill kalla det.
Du kan kalla det "centrerad", och stäng din div någonstans nere
och du har alla dina roliga grejer där.
Och sedan någonstans i din stilmall som du vill ange en viss styling
som skulle gälla för den här klassen.
Det behövde inte vara den enda div som var centrerad.
Du kan ha andra divar som också hade centrerad text.
>> Ja, Charlotte? >> [Elev] Att gå tillbaka till citatet, vad betyder pricken detta?
Vad är pricken? >> [Elev] Ja.
Tillbaka till den bärbara datorn, menar du? >> [Elev] Ja. >> Okej.
[Elev] Till exempel i denna linje betyder det att det är denna variabel som heter val
insidan av formen? >> Ja.
Den punktnotation i JavaScript gör ett par saker.
I det här fallet du ringer en funktion som heter val.
Det är en metod.
Det är här vi kommer in i objektorienterad saker som vi pratade om, Sam.
Det är där objekt - i detta fall den ingående elementet - har en funktion eller en metod som kallas val
som i princip säger, "Hej, ange ditt värde för att vara det här."
Tänk dig att i stället för denna rappakalja som vi hade skrivit nummer 7 eller strängen 7.
Det skulle ändra värdet på denna ingång inslag att vara 7.
[Elev] Ingångs elementet är allting framför pricken?
[Hardison] Ingångs element, exakt, är elementet i HTML,
inom DOM, matchar denna fråga.
[Elev] Så det är ingångsfunktion inslag. Och sedan vad det värdet ska vara.
[Hardison] Exakt. >> [Elev] Okej.
Och du också använda detta för att komma åt egenskaper.
Så om vi ser tillbaka på den kod som vi gick igenom rad för rad
där vi har response.symbols [i]. namn,
vi inte ringa en funktion här.
Det finns inga parenteser.
En sak du bör bara tänka på när du rippa genom denna kod,
när du ser parenteser, innebär att funktionsanrop.
En funktion som kallas,
och namnet på den funktionen är vad föregår dessa parenteser.
Så i detta fall nere, det är val. I det här fallet just här det är html.
I det här fallet här namnet på funktionen är bokstavligen $,
och vi vet bara att detta är den jQuery väljaren,
det är den funktion som är att välja vad den här killen är.
Och sedan när du inte ser parenteser, som här eller här,
vad du tillgång istället är en egenskap för objektet.
Det är som att använda arrayen notation.
Det är ett alternativ till att använda array notation.
Det är bara en förkortning.
Så vi tillgång till symbolerna inom svarsobjektet.
>> Vi har gjort en hel del på Ajax, DOM, vissa HTML, inte mycket CSS.
Har ni vill spendera de sista 15 minuter eller så på det här?
Jag antar att vi har verkligen fått ca 10 minuter innan vi måste börja slå in.
Eller ska vi gå tillbaka och tala om några av de andra sakerna på vår lista?
Låt oss se.
Om vi ​​går tillbaka till början, vi växlar över till min iPad igen så att ni kan se här,
vi har gjort en hel del Ajax, har vi gjort en del jQuery,
Vi har gjort en del JSON, vi har gjort en del XML, vi har gjort en del DOM,
Vi har gjort en del - nix, inte HTTP. Scratch det.
Inte mycket utrymme. Vi slags talat om CSS - inte riktigt.
Har ni må bra på Ajax? Vill du spendera mer tid på Ajax?
Handuppräckning. Okej.
DOM? Någon som vill spendera mer tid på DOM?
Det enklaste sättet att verkligen få en känsla för vad som händer med DOM -
folk pratar om DOM och kasta runt, "Åh, DOM detta, DOM det."
Verkligen DOM är precis som alla dessa HTML-element hålls i minnet.
och det är bara att förklara - det är vad det är.
Den är uppbyggd som ett träd, och du kan komma åt enskilda HTML-element
med att jQuery väljare, som dollartecken grejen.
Du kan manipulera saker. Du kan lägga till element i DOM.
Du kan lägga till en ny punkt inslag till DOM,
Du kan ta bort en div-element från DOM, om du vill.
Det är allt det är. Det är bara typ av minne representation av din HTML-fil.
Det kan manipuleras och köras.
Vad sägs om jQuery och att väljaren? Ja, Sam?
>> [Elev] Betyder det att DOM innehåller alla dina CSS och JavaScript?
[Hardison] DOM innehåller de noder, ja.
[Elev] Den innehåller HTML som de andra hjälpdokument utgång?
Om JavaScript ändrar HTML som det gjorde i det här Google -
oops, sorry, jag är inte tillbaka på det.
Kom ihåg hur JavaScript skulle ändra listan över Google-resultaten?
Om JavaScript modifierar det, då de nya listelement är nu en del av DOM.
De injicerades i DOM.
Och det visar sig att de skript och arken stil själva
faktiskt är del av DOM.
Du ser här nere att vi har fått dessa script noder och dessa stil noder.
JavaScript kan lägga till och ta bort dessa också.
Det är därför det är så illa att ha skadlig JavaScript på din sida
är att man nu kan börja ta in andra JavaScript från andra platser.
Så du kan börja med bara 1 JavaScript-fil,
men då kan det börja dra i andra JavaScript-filer.
Du kan använda Ajax för att läsa in i JavaScript och dynamiskt ha nya JavaScript
som körs på din hemsida.
Så det är en riktigt kraftfull sak som våra läsare kan slags ständigt på nytt göra
och åter anpassa det som genereras av JavaScript.
>> [Elev] Dessa stil taggar finns i CSS?
Låt oss titta på det. Yeah.
Denna CSS, igen kan du se var jQuery fick sin väljaren från.
Vi har denna # gb som säger, "Denna styling gäller ett element med ID-gb."
"Ett element med ID-gb kommer att ha denna storlek typsnitt med liknande typsnitt,
"Sans-serif; höjd."
>> Okej.
Tillbaka till iPad.
Hur om datastrukturer - försök, länkade listor?
Har ni vill göra en snabb repetition på det, eller är ni känner -
Ja? Nej? Vem vill datastrukturer? Räck upp handen.
Vem hatar datastrukturer? >> [Elev] Jag vill bara försök. >> Du vill bara försök.
Okej.
Är det någon som inte vill ha försök? Är alla som "Jag hatar försök. Jag gjorde det. Jag försökte det."
[Elev] Jag vill bara veta om omega och stora O.
Okej. Vi kan definitivt gå över det.
Låter det som något som vi vill göra som en grupp? Ja? Sortera på? Nej?
>> Hur HTTP? Betyder det verka som något fler människor vill göra?
Eller är du typen av, "Eh." Låt oss göra HTTP först.
Hur många av er har sett Davids löjligt häftigt HTTP-kort? Någon?
Jag har sett det en hel massa.
Det var en av de första som vi gjorde, och så det var liksom vår demo i sommar.
Dan har sett det ett gäng också, Dan the Man tillbaka dit.
HTTP och så finns det här HTTPS sak som vi har pratat om lite.
Vad behöver du veta om HTTP?
Det är bokstavligen bara protokollet för att interagera med en webbserver.
När du vill tala med Google.com, du pratar med en annan dator över ett nätverk,
vad gör du?
Vi kanske gör det.
Låt mig dra upp en terminal.
Här är min lilla terminalfönster.
Vi kan göra något som telnet, vilket ger oss möjlighet att faktiskt starta en anslutning till Google.com.
Detta är inte något som du behöver veta,
men det är bara för att illustrera vad som händer med HTTP.
www.google.com, port 80.
Vad är det här att göra?
Det är att göra en Internet-anslutning mellan datorn och Google.
Och det är faktiskt ansluter till 173.194.75.99, vilket är en viss dator,
vissa Google-server som bor någonstans förmodligen ut här,
om det kan vara hela vägen tillbaka i Kalifornien.
Nu är jag ansluten.
Okej, det är allt bra.
Men när du går till Google.com, vanligtvis du förväntar Google.com,
någon HTML för att visa upp, eller hur? Inte bara detta.
Problemet är att jag vill ha sagt, "GE MIG GOOGLE.COM" eller vad som helst.
Men om jag säger att, händer ingenting.
Faktum är att om jag slog in ett par gånger, det kommer tillbaka och det står,
"Det var en dålig begäran."
Detta sade, "Nej, nej, nej, nej, nej, nej, nej, nej, nej."
"Du kan inte bara lägga saker i. Du har faktiskt tala HTTP till mig."
"Du måste formatera din begäran som en HTTP-begäran, som en GET eller POST
"Eller något liknande."
"Och sedan ska jag tillbaka korrekt HTML till dig."
Så ni ser vad det gav mig i det här fallet.
Det gav mig HTML att om jag kopierar den och jag Edit html, om jag sätter den i här,
och jag spara den som test.html--oh, kom igen.
Webbsida. Så där.
Nu om jag öppnar Nedladdningar / test.html, nu gav mig dåligt -
Det har inte riktigt göra det som HTML.
Det ser ut som det inte stänga den. Här, låt oss se.
Nope. Okej.
Det kommer inte att göra. Hur som helst, inte att räkna ut.
Men hur som helst, vad den gör är det att återvända till mig HTML,
men det säger i grunden, "Du gav mig en ordentlig HTTP-begäran."
Vad behöver vi veta om HTTP?
Det är sättet att formatera förfrågningar till webbservrar för att få, oftast, HTML som svar.
>> Den andra sak att notera är att när du gör en förfrågan till en webbserver,
måste du ange HTTP-metod som du vill använda.
Vi pratade om det här lite tidigare, där de två stora länder som vi ser
är GET och POST.
Det finns också en hel massa andra.
Det finns HEAD och PUT och DELETE, och alla dessa andra saker,
men GET och POST är de två viktigaste.
Var ser ni de dyker upp? När du skriver former.
När du skriver HTML-formulär, måste du ange HTTP-metoden
genom vilken du vill att formulärdata som ska överföras.
Och så du ser det på serversidan när du skriver PHP-kod
när du hanterar data och du måste titta på POST superglobal
eller GET superglobal att hämta data som lämnats in av användaren.
Och skillnaden mellan GET och POST är att GET modifierar den verkliga adressen
och för det mesta kan man se vilka parametrar som skickas till en GET-förfrågan
väldigt lätt bara genom att titta på webbadressen, medan med en begäran POST
du inte sänder parametrarna för ansökan i webbadressen.
Men de är inte krypterad eller något om du kommer över HTTPS.
POST-parametrar är bara en del av den -
De går inte i webbadressen, på ett effektivt sätt.
Vi tenderar att bara typ av semantiskt skilja 2,
som bara säger att riktigt, kan du göra samma sak med GET som du kan med POST.
Du kan göra samma sak. Det är bara det att vi använder dem i olika situationer.
Vi använder GET när vi försöker bara läsa något och vi säger bara,
"Ge mig denna information."
Och vi använder POST vanligtvis när vi försöker uppdatera något på servern.
Det är därför som när du går till Google.com och vi gjorde det typeahead
Vi såg alla dessa får förfrågningar
eftersom vi bokstavligen bara hämta information från Google,
medan om du gör en Facebook-vägg inlägg, du ska använda,
mest troligt, en HTTP POST-metoden för att skicka dessa data och göra en förändring till Facebook
i väggen, din väns vägg.
Låt oss se.
Jag antar att skillnaden med HTTPS är att det är HTTP men krypterad.
[Småskrattar] Säkert.
Yeah. Och det finns en hel del roliga detaljer om det.
>> Frågor?
Vi måste börja linda upp, och så ska vi göra vissa datastrukturer på sidan. Charlotte?
[Elev] Vad ingår i HTTP-header-filer från värden till metoden
och metoden och antalet? >> Ah.
Det bästa sättet att se på det är att gå till fliken Nätverk
och bara se vad som händer när du bara gå till Google.com.
Du kan komma hit och du kan se alla de olika HTTP-förfrågningar som gjorts.
Google.com.
Den första var jag försökte gå till Google.com och det sa,
"Åh, Google.com egentligen inte existerar."
"När du verkligen vill gå är till www.google.com."
Så jag fick omdirigeras här.
Det var där jag fick den här 301 då jag fick 200 OK.
Så vad är här, i dina rubriker?
Det säger att detta är den URL som jag gjorde begäran, begäran-metoden,
och sedan statuskoden.
Det är de tre jättarna.
De andra saker här, kakor,
cookies är praktiskt för att räkna ut sessionen, om någon är inloggad eller inte.
De är också praktiskt för att spåra människor. Detta är hur webbplatser spåra dig överallt.
De sätter cookies på din dator.
De är utbildade för att känna igen andra webbplatser "cookies om de kan.
Och så finns det andra saker som säger user agent här.
Denna användaragentsträng identifierar datorn till Google.com och säger,
"Google.com, bara så du vet, någon snubbe som kör den här webbläsaren
"På Intel Mac 10_8_2 bara gick till Google.com."
Och då dessa acceptera saker bara säga, "Vad är min dator,
"Vad är min webbläsare beredd att acceptera?"
Det kan ta emot HTML, kan den godta XML, allt det här andra grejer.
Vilken typ av teckenkodningar betyder acceptera?
Är det accepterar gzip-packade komprimerad grejer?
Ibland webbplatser kommer att komprimera saker att göra det snabbare att skicka över nätverket.
>> Cool. Okej.
Jag tror att det var allt för nu. Vi kommer att lägga ner, men jag kommer att finnas kvar för frågor.
>> [CS50.TV]