>> [Sectie 9 - minder comfortabel]
[Nate Hardison - Harvard University]
[Dit is CS50. - CS50.TV]
>> Oke. Dus, laatste deel van het semester.
Om te beginnen, ik weet dat er een aantal kreten te doen wat Ajax zijn geweest,
maar zijn er ook andere onderwerpen die we eerst moeten doen?
Laat me over te schakelen naar de iPad, zodat we -
Laat me zwart in plaats van oranje te gebruiken.
Ajax is op het menu. Elk ander?
Iedere andere onderwerpen die mensen willen zien? Ik hoorde DOM ook eerder.
[Student] jQuery. >> JQuery. Oke.
jQuery. We kunnen een gooi te doen op dat.
[Student] XML. >> XML. >> [Student] JSON. >> XML, JSON. Oke.
PHP? Alle goede? C? Alle goede? >> [Student] Het zou geen kwaad om te praten over PHP.
Hash tabellen? Tries? Gelinkte lijsten?
[Student] Oh, op de quiz van vorig jaar, is er een tafel voor de omega en de grote O.
Yeah. >> [Student] voor de tijd voor de verschillende versies en illusies.
Kunnen we praten over dat? >> Ja. We praten over een beetje van datastructuren.
[Student] Ja. >> [Student] Tries. >> [Hardison] datastructuren.
We praten over een aantal pogingen zeker.
[Student] Kunnen we CSS een beetje? >> Ja, kunnen we een beetje CSS doen.
Eventuele andere onderwerpen? Sam? >> [Student] Scope in PHP. >> [Hardison] Scope.
Scope in PHP. >> [Student] HTTP.
HTTP. Geweldig.
Ik denk dat een manier om dit te doen zou zijn om alles soort chronologisch ordenen
en beginnen met datastructuren aangezien die waren de eerste.
Of we kunnen deze toewijzen een soort van prioriteit weging en ga vanaf daar.
Dus wat denken jullie ervan?
Is er iets dat iedereen aan het sterven is te zien?
Laten we een verhoging van de handen. Hoe zit het met Ajax?
Hoeveel van jullie willen weten over Ajax?
Hoeveel van jullie zijn als, "Man, Ajax, ik heb je"? Niemand. Oke.
Dus Ajax is behoorlijk hoog. Laten ster die vent.
Hoe zit het met DOM? Iedereen klaar om te rocken DOM? Nee? Oke. We zullen dat er ook een ster.
jQuery?
Queryless. Ja. Oke.
Een paar mensen voor jQuery, maar nog steeds mensen zijn een beetje chill met die. Oke.
XML? XML. >> [Student] Gebruik je dat meer dan in de context van Ajax?
In de zin dat - Ja.
Ik bedoel, het is een belangrijk onderdeel van Ajax, dus ik denk dat we kunnen bundelen die met Ajax,
chatten over de hele zaak daar.
JSON? Wat is JSON? Oke, koelen.
Datastructuren? Mensen een goed gevoel daar?
U kent uw gelinkte lijsten, weet je hash tables?
Hoe heeft Speller gaan voor iedereen? Dat was een doozy, huh? Yeah. Oke.
Ja, kunnen we praten een beetje over die maar nogmaals, niet zo belangrijk.
CSS?
Het maken van uw websites look pretty. Oke.
Scope in PHP? Een grote hand daar. Twee grote handen, drie. Oke.
Misschien een medium de hand. >> [Student] Meer dan 2.
Yeah. Sam voert campagne. Haal je handen omhoog.
HTTP? Oke.
>> Dus laten we eens kijken. Het ziet er zeker als Ajax en de DOM zijn voor het grijpen.
Dus laten we beginnen met dat.
Ik denk dat we hebben een paar opties hier.
Een daarvan is het soort van doen een samenvatting van wat Ajax en XML zijn
omdat we niet echt de tijd om dat te doen in de sectie of in het probleem stelt.
Het andere ding is om te duiken in een aantal problemen van voorgaande jaren 'quizzen
en zien wat er aan de hand daar.
Een voorkeur tussen de 2? >> [Student] Ik denk dat concrete voorbeelden zou meer behulpzaam zijn.
Concrete voorbeelden meer behulpzaam? Oke.
Elke degenen in het bijzonder die van u van de Ajax crew?
Eventuele problemen die u wilt bekijken?
[Student] Is het event handler in verband met Ajax op alle? Ik denk that -
JavaScript event handlers niet noodzakelijk betrekking hebben op Ajax. Ze kunnen.
[Student] Ja, dat is een ander concept dat ik niet daadwerkelijk krijgen. >> Oke.
[Student] Maar ik denk dat in de quiz van het afgelopen jaar is er 1 groot probleem
in de latere delen van de quiz die is gerelateerd aan Ajax en de syntaxis die ik niet echt -
Oke. En Ella?
[Student] Ik voel me alsof ik weet wat Ajax is, maar ik zou niet weten hoe het te gebruiken.
Oke. >> [Student] Ik voel me alsof ik niet weet wat Ajax is of hoe het te gebruiken. [Gelach]
Oke. Dat werkt vrij goed.
Laten we eens kijken. Laten we misschien kijken naar een goed voorbeeld van Ajax eerste.
>> Welkom, welkom. Ik hoop dat je goed op de camera zijn.
Zo niet, kunt u hangen in de rug.
>> Goed voorbeeld van Ajax.
Laat ik overschakelen op mijn laptop.
Hier zijn we op Google.com.
Hoeveel van jullie hebben ooit het plezier gespeeld "Hoe kan ik?" spel op Google?
Hoe kan ik - en je krijgt om alle leuke dingen die komen te zien -
zet deze muziek op mijn Tumblr?
En je kunt blijven gaan en je krijgt alle dit soort leuke dingen.
Wat hier gebeurt?
Terwijl u typt in het zoekvak van Google, worden de real-time resultaten updaten.
Dus zet deze - en je merkt dat alle van de resultaten beginnen bijwerking op de webpagina van Google.
Dat is niet iets wat er gebeurt op uw computer.
Het netwerk is betrokken. Google is betrokken bij deze.
Het blijkt dat elke keer dat u een toets indrukt, zeggen als G of L,
en de zoekresultaten-update, wat er gebeurt
is er enige JavaScript op de pagina die is detecteren dat je de toets ingedrukt,
en het is het maken van een verzoek van het netwerk om Google.com te laden op alle van de nieuwste resultaten
die het beste passen bij de query die je tot nu toe hebt getypt.
Helaas, ik denk dat als we kijken naar dit -
Ik ga kijken naar de bron - de meeste van deze Ajax of JavaScript-code in hier
is alle minified en vaak krabbelde een beetje te.
De minification letterlijk is een programma dat u kunt uw JavaScript code uit te voeren door middel van
en het verandert al uw variabele namen en maakt het helemaal onleesbaar
maar probeert uw webbrowser zo kort mogelijk te maken
zodat wanneer u uw JavaScript-bestanden te versturen via het netwerk
je niet hoeft te grote bestanden te laden of te verzenden.
Dus dit spul is vrij moeilijk om te lezen,
maar begraven in hier, welke bevoegdheden deze typeahead - het modewoord van deze -
is Ajax verzoeken.
>> Wat maakt een Ajax-verzoek anders dan een ander soort netwerk verzoek?
Sam? >> [Student] Je hoeft niet de URL te wijzigen. >> [Hardison] Juist. Precies.
Je merkt als ik typ, "hoe kan ik mijn kaakbeen in pairing modus?" [Grinnikt]
Er zijn altijd een aantal leuke - Ja.
Je merkt dat deze URL hier op de top niet verandert,
en de hele pagina is niet verfrissend.
Dus als we kijken naar dit soort dingen hier naar boven, deze bar aan de top, deze Google,
en vervolgens de zwarte balk hier, dat wordt vaak de chroom van een webpagina,
dat is niet te veranderen. De hele pagina is niet verfrissend.
De Ajax-verzoek wordt gebruikt om alleen de resultaten van de pagina te vernieuwen,
alleen dat 1 klein deel van de pagina, zodat je niet hoeft te gaan naar een geheel andere URL,
een heel ander bestand en laadt die in het geheugen.
Dus als je mensen praten over de dynamische Web 2.0 type revolutie horen,
dit was achter een heleboel.
Dit is wat stelt u in staat om een ​​muur post op Facebook schrijven, raakte Post,
en hebben de post verschijnen zonder dat de volledige Facebook-pagina verfrissend
of blader door een bos van foto's en laden van de foto's dynamisch,
want hoeveel zou het zuigen als je naar je Facebook-pagina,
aangeklikt's en dan moest om daar te zitten en te wachten
terwijl alle paar duizend van uw Facebook-foto's in het geheugen geladen?
Dat is een enorme belasting.
Maar met Ajax kun je dat asynchroon doen,
en dat is het asynchrone deel van de Ajax.
>> Oke.
Zijn we goed? Heeft iedereen soort van begrijpen ongeveer wat Ajax doet?
Het is gedaan door de JavaScript, is het gedaan soort dynamisch en asynchroon
nadat de pagina is geladen.
Het komt vaak na als een soort van de reactie op een gebeurtenis,
die ofwel een muisklik of een toetsaanslag of iets dergelijks.
En dan maakt het een oproep naar de server, of u nu op Google.com
of Facebook.com, haalt een aantal nieuwe inhoud aan dan tonen of bijwerken
of iets dergelijks.
>> Cool. Oke.
Laten we eens kijken naar een paar voorbeelden uit voorgaande jaren.
We gaan naar de quizzen.
En dan Charlotte, je Quiz 1 vermelden vanaf 2011. >> [Student] Ja.
Een ding dat ik zal waarschuwen, is dat bij het kijken naar de voorgaande jaren 'quizzen
je zult dit spul heet XHR vaak met relatie met Ajax te zien.
XHR en XML HttpRequest is een soort van de ruwe manier van Ajax, als je wil.
Dit jaar hebben we overgestapt op bijna volledig gebruik van deze jQuery library.
jQuery is een bibliotheek van helper JavaScript-functies en klassen en allerlei goodies,
en jQuery soort abstraheert de ruwe XHR dingen van je af
zodat het een stuk makkelijker om de werkelijke Ajax dingen doen.
Dus als je scrollen door deze eerdere jaren 'quizzen
en je ziet dingen die zegt XHR en nieuwe XML HttpRequest,
al dat soort dingen, kun je negeren.
In plaats daarvan gaan we gewoon de jQuery manier.
We verwachten niet dat je met XML HttpRequest.
Maar goed om te weten dat het synoniem is met dit idee van Ajax,
deze Asynchronous JavaScript ophalen XML of JSON of wat dan ook via het netwerk.
Maar oorspronkelijk werd gecorreleerd met XML of verbonden XML.
>> Oke.
Laten we naar beneden scrollen. Weet je nog welk probleem in het bijzonder, Charlotte?
Was het op deze pagina dat ik ben op zoek naar hier? >> [Student] Ja, ik denk het wel.
[Hardison] Ah, ik heb het. Oke. Yeah.
Laten we praten over dit heel snel.
De manier waarop Ajax werkt is dat je een aantal JavaScript-bestand hebt op uw computer,
en echt het draait soort in de context van uw webbrowser.
Dus als je laatste project is het maken - ik weet het niet - een nieuwe dating site voor Harvard mensen
en u wilt dat uw dating site de mogelijkheid om anonieme berichten te verzenden
van persoon tot persoon of anonieme Facebook wall-achtige berichten
en je wilt Ajax een of andere manier te gebruiken in die zo dat wanneer je een bericht te posten
het niet de hele site te vernieuwen,
in uw JavaScript code zou het opzetten van een nieuwe Ajax-oproep.
Ik ben debatteren over het al dan niet om dit te doen op de laptop.
Het belangrijkste deel van het Ajax gesprek is dat er dit soort asynchroniciteit om het
in die zin dat - laat me terug naar mijn iPad te schakelen -
in de zin dat als ik code die gaat zeggen doen wat Ajax,
Dan kan ik niet op de zeer volgende regel van mijn JavaScript-code
verwachten dat de Ajax zal zijn afgerond.
Wat gebeurt is dat als uw code wordt uitgevoerd achtereenvolgens in JavaScript,
als je dit Ajax belt, bent u in feite het vertakken zich af
en het versturen van een verzoek naar het Internet om enkele server hier,
dat is dit vakje Ik teken en duidelijk het niet tekenen erg goed.
Je forking uit deze oproep aan de server dat gaat even duren
als het gaat uit naar het internet en gaat en slaat die server
en gaat en roept dat PHP-script dat u op de back-end heb geschreven
om daadwerkelijk op te nemen dat anonieme bericht in uw database of iets dergelijks.
Dus dat zal enige tijd uiteindelijk nemen, en dan wanneer de server wordt gedaan verwerking
je Ajax-verzoek, zal het terugkeren naar uw JavaScript-code,
maar je weet niet echt waar, op welk punt in de uitvoering
je gaat naar deze reactie ontvangen.
Hoe wordt dit behandeld in JavaScript?
Dit is waar het vandaan komt in dit probleem dat we het over op de laptop
waar u een handler te registreren, u een bepaalde JavaScript-functie registreren
te lopen wanneer de Ajax-verzoek is voltooid.
U kunt uw Ajax gesprek en dan niet gewoon in het volgende regel code
gaan ervan uit dat de Ajax gesprek heeft afgerond.
Een deel van de schoonheid van dit is dat je wilt dat uw JavaScript om blijven draaien
nadat het de Ajax-oproep is gemaakt, omdat het kan vork uit deze aparte aanvraag
en houd verwerking andere dingen.
Je hebt dit soort concurrency hier gaan waar uw JavaScript blijft lopen kreeg
en blijf het doen van andere leuke dingen, zou kunnen blijven spinnen andere Ajax verzoeken.
Uw Ajax verzoeken gewoon gaan met het netwerk en dan terug te komen wanneer ze terugkomen,
maar als je deze handler functie registreren,
dat is als je weet dat je Ajax oproep is teruggekeerd omdat deze functie wordt aangeroepen.
Dus in plaats van het hebben van deze sequentiële executie pad dat we gewend zijn in C,
heb je wat meer vergelijkbaar met wat we zagen in Kras aan het begin van het semester
waar u deze uitzendingen
en dan heb je deze "als groene vlag geklikt" of "wanneer ik deze gebeurtenis."
Dat is in wezen wat er gebeurt hier in JavaScript met deze Ajax verzoeken.
>> Voor het antwoord op deze vraag op lijn 20,
"In de context van Ajax, wat betekent dit regel code doen?"
kan iemand soort parafraseren wat ik net zei begrip te bevestigen?
[Student] Het spijt me. Wat doet de linker helft van het te zeggen?
[Hardison] xhr.onreadystatechange. Sorry. Krijg ik afgesneden?
Dit is dat XHR syntaxis dat we niet te maken hebben met.
U heeft de vergelijkbaar concept met de jQuery.
Laten we naar Source Code, woensdag, Index.
Laten we eens kijken deze omhoog. Oke. Hebbes.
Hier is dat Ajax syntax dat we het over hebben.
Hier kun je met vermelding van de Ajax-verzoek.
Je zegt, "Dit is de URL Ik wil om uit en ping gaan."
"Ik wil POST gebruiken in plaats van GET."
En dan de data type is "Ik wil JSON te worden geretourneerd."
Nogmaals, XML was een soort van de traditionele ding.
Maar wat we zoekt naar die functie.
Dit is dat hier.
Deze functie (respons) is dat onreadystatechange.
Dit is de handler. Dit is wat wordt uitgevoerd wanneer deze aanvraag terugkomt.
Dus je merkt dat deze functie dat Tommy hier heeft geschreven
dat we over gesproken in lezing op woensdag werd alles over het maken die leuk typeahead voor ons.
Je merkt dat wat hij doet is hij de bouw van de Ajax-verzoek
en dan is er niets na de Ajax-verzoek.
Hij is niet de verwerking van de respons van de Ajax-verzoek na de oproep wordt gedaan.
Hij doet het alleen in deze handler functie
dat zal zo spoedig worden genoemd als het antwoord komt terug.
>> Sam. >> [Student] Heeft Ajax verzoeken moeten zijn van het type POST of kan het GET?
Ze kunnen ofwel. >> [Student] Hoe zou dat werken als je niet de URL te veranderen?
Hoe zou dat werken als je niet de URL te veranderen?
Het is maar net waar de gegevens gaat.
Dus de vraag is kan Ajax verzoeken zijn POST of GET?
Dat is waar het ook kan zijn. Het is gewoon echt een semantisch verschil tussen de POST en GET.
GET meestal betekent dat je gewoon iets uit de server leest
en je bent niet iets te veranderen, terwijl een POST impliceert typisch
dat je het schrijven van gegevens of je schrijft iets op een server.
POST vaak gebruik je wanneer je probeert om ergens staat te veranderen.
Daarom logins altijd met HTTP POST,
terwijl Google maakt een bos van GET-aanvragen.
Eigenlijk, als we terug naar onze Google bijvoorbeeld gaan en als we kijken naar onze developer tools hier,
laten we eens kijken naar de developer tools hier aan de onderkant en openstellen van het netwerk.
Als we beginnen te typen, zie je al deze GET verzoeken komende inch
Je ziet al die GET-aanvragen hier aan de onderkant van het scherm
dat zijn al deze xjs.
Dit is het Ajax-verzoek terug te komen.
En als we waren om op te klikken, kunnen we zien wat het zegt en wat de reactie is.
Het geeft ons al deze informatie over de respons die we kregen
toen we naar Google de headers die hier beneden waren.
Laten we eens zien of het - Het zal ons een query string ergens hebben.
Aanvraag-URL. Yeah.
Oorspronkelijke query, negeer slecht query, tweede pas, hoe ik meter -
Hoe dan ook, ergens in Hier kun je deze "hoe ik meter" vraag vinden
in het verzoek aan de server.
En dan de reactie terugkomen, is wat we zien.
Dus ja, het kan ofwel GET of POST.
Het heeft de neiging om gewoon een semantisch verschil. We kunnen dekken die met HTTP. Ja, Ella?
>> [Student] Is het verschil tussen JSON en XML gewoon dat JSON is moderner?
Is het verschil tussen JSON en XML dat JSON is moderner?
XML en JSON zijn gewoon 2 verschillende manieren van coderen van gegevens.
XML is de Extensible Markup Language.
HTML is een subset van XML.
Dus bijvoorbeeld, laten we trekken TextEdit.
XML is gewoon gedefinieerd als gegevens die zijn ingesloten in een reeks van tags.
Dus html, / html, deze jongens zijn geldig tags.
Laten we blazen deze omvang hier en maak het beter leesbaar.
hello!
XML gewoon definieert een tag als iets als dit
waar je een open hoeksteun, de naam van het label,
en voer een aantal attributen, die HTML we vaak niet attributen.
Maar bijvoorbeeld, als we een script-tag, vaak heeft het de vorm van tekst, webbrowser.
En de binnenkant van de tags is data.
In ware XML kun je eigenlijk bepalen deze tags te zijn wat je wilt.
Het is gewoon een manier van het structureren van uw informatie.
Dus bijvoorbeeld, als ik wilde mijn familie te coderen in XML,
Ik zou zoiets doen, zoals vader en zet dan informatie over hem
en broer en zet informatie over mijn broer.
Alleen deze manier van het structureren van uw gegevens is XML.
JSON, aan de andere kant, volgt de JavaScript Object Notation,
vandaar J-S-O-N, JSON.
Dus in plaats van het schrijven van dit soort tag, dicht tag soort formaat,
we in plaats daarvan schrijf het uit als een JavaScript-object.
Dus de JavaScript-object heeft de accolade om dingen te openen
en dan een accolade om dingen te sluiten.
Laat me uitzoomen een beetje, vergroten
En dan wat je hebt zijn de namen van velden, dus "vader":
en dan kan ik informatie over hem zetten
en dan "broer": en informatie over mijn broer.
En natuurlijk alles wat hier is -
Ik denk dat wat er leuk is aan JSON in tegenstelling tot XML
is omdat een JSON object aan dit object notatie dat JavaScript heeft.
JavaScript kan echt gemakkelijk te trekken die in het geheugen en behandelen net als een JavaScript-object
rechts wanneer u het ontvangen terug van de server.
Er is geen parsing dat het echt om dat te doen is heavy duty of zwaar tillen,
terwijl met XML je moet ofwel plugins of een soort van gebruik -
Afhankelijk van wat je precies wilt verzenden
en wat u gebruikt om de XML te ontvangen, moet u misschien een beetje meer werk parsing doen,
dat deze JavaScript spul, als je gewoon aan het schrijven bent met JavaScript
en u ontvangt JavaScript terug, het is echt makkelijk om mee te werken.
Het andere ding dat mensen soms ook zal noemen
is dat met XML u al deze openstaande tags en sluit-tags,
dus het groot kan krijgen, kan het een beetje opgeblazen.
Dus er zijn sommigen die zal praten over hoe met JSON
je hoeft niet al die geopende tags en sluit-tags, dus het is meer gecomprimeerd.
De reden dat dat belangrijk is, is dat wanneer je dingen over het netwerk te laden
als je praat met een externe server,
hoe minder dat moet via het internet te verzenden, hoe sneller alles gaat.
Hoe dan ook, de sleutel mee te nemen is hier ze zijn gewoon 2 verschillende manieren van het structureren van uw gegevens,
formatteren van uw gegevens.
>> Oke.
Andere vragen? Charlotte?
[Student] Mag ik 1 laatste vraag over de syntaxis van Ajax? >> Sure.
[Student] Als je terug naar het voorbeeld code gaan en gewoon te zoomen een beetje,
er is maar 1 regel code hierboven.
Kunnen we gaan?
op ('keyup', function ()
Is die set van lege haakjes achter op ('keyup' verwijst naar de functie na het succes?
[Hardison] Nee.
Een paar dingen hier.
op ('keyup', dit is een manier van doen het equivalent in Scratch
wanneer een toets wordt ingedrukt en je til af van de sleutel.
Eigenlijk, in JavaScript u op ('KeyDown', op ('keyup', en op ('indrukken',
en je kunt dingen doen op elk van die 3 verschillende evenementen.
Dit is een event handler elk moment een sleutel komt registreren,
en dan is deze functie is dit hele ding
helemaal naar beneden naar daar.
Deze functie heeft geen naam.
Beetje raar.
Al onze functies die we hebben gedaan in C en PHP hebben allemaal namen.
Dit is wat we een anonieme functie aan te roepen. Klinkt logisch, toch? Geen naam. Anoniem.
Wat is handig over de anonieme functie?
Het is duidelijk dat we niet deze functie ergens anders noemen in onze code.
Hoe zouden we deze functie noemen elders in onze code? Dat kunnen we niet.
Er staat geen naam. Ik kan niet zeggen: "Oh ja, bel die functie die ik zei met op ('keyUp'."
Wat is handig erover is echter dat in JavaScript
als we voortdurend registreren deze event handlers -
dat is wat dit heet, je bent deze functie registreren als handler als een toets komt -
is het is echt leuk om te kunnen om gewoon te definiëren deze functies soort inline en gewoon zeggen,
"Toen de keyup wordt ingedrukt, onthoud dit functie die ik ga hier te definiëren,
en het zal deze functie onthouden en dan zal deze functie te doen
wanneer de toets komt.
We praten over dit meer als je eenmaal meer te krijgen in functioneel programmeren.
Dit is een beetje een smaak van die waar we in wezen het passeren van een functie rond
als object, bijna alsof het als een variabele.
In plaats van het passeren van een string of een int, we passeren een functie.
Dat is een beetje een raar ding, maar wat leuk is dat alle variabelen in hier,
binnenkant van deze functie, de scoping kwesties zijn mooi
want als je een variabel tot hier, kunt u verwijzen naar die variabele binnenkant van deze functie
omdat deze functie is de binnenkant van deze andere functie verklaard.
Zo krijg je op een uitkering als dat hebben.
Nogmaals, dat is iets dat meer meta. U zult het dekken in de toekomst klassen.
>> Ja. >> [Student] Aangezien de functie is anoniem, kan het ergens anders worden gebruikt?
Of kan het alleen worden gebruikt in het kader van deze functie?
[Hardison] Het wordt gebruikt in de context van deze functie. Yeah. Ja?
>> Heeft het iets te maken met het feit dat het een objectgeoriënteerde taal?
[Hardison] Heeft het iets te maken met het feit dat het object-georiënteerd?
Ik zou zeggen dat dit heeft meer te maken met het feit dat dit functionele aspecten.
We hebben het over de object-georiënteerde paradigma van de programmering,
en dit is een soort van een van die aspecten van de functionele paradigma van de programmering
waar u het maken van functies die zijn samengesteld uit andere functies
en u passeert functies rond.
>> [Student] JavaScript is dus een functie taal ook.
Het heeft elementen van het, ja. Yeah.
JavaScript en veel -
PHP heeft een aantal van deze ook Python heeft deze zelfde soort dingen,
Ruby heeft dit soort dingen ook, en dit is gebruikelijk in meer van deze moderne talen.
Je echt deze scripttalen dat zijn een soort van jack-of-all-trades.
Het is net als de grote vette Zwitsers zakmes, de een dat je niet eens in je zak
omdat het te breed.
Dat is een beetje hoe sommige van deze talen zijn geworden.
>> Nog meer vragen? Oke.
Hoe zijn jullie je?
Laten we teruggaan naar die quiz echt snel gaan en kijken of we kunnen beantwoorden 21 en 20.
We spraken over 20 zoals we deze handler geregistreerd.
Deze vraag is hier: "Wat zou het effect zijn als we schreven dat lijn met een paar haakjes?"
Zie je het verschil, hoe aan de top zijn er geen haakjes
en hier beneden er tussen haakjes achter de naam van de functie?
Een ding dat is belangrijk op te merken,
hier we verwijzen naar een functie.
Dit is niet een anonieme functie. Het is een naam gekregen, handler,
terwijl in onze Ajax hier dat we waren gewoon op zoek naar,
alle functies die we rond waren op doorreis waren allemaal anoniem: geen functie naam,
geen functie naam.
Dus is het gebruikelijk om deze functies soort inline als anonieme functies definiëren
voor sommige scoping voordelen.
Je zou heel goed deze functie hebt gedefinieerd hier of dit op (functie 'keyUp'.
Je zou deze man hebben gedefinieerd als functies met namen elders in uw JavaScript-code,
en dan in plaats van het definiëren van de functie hier, zou je de naam van de functie passeren
recht op deze plek.
Een ding om op te merken is dat je niet zou willen om de haakjes te gebruiken
als je daarbij de naam van de functie,
want als je de haakjes te gebruiken, bent u impliceren "noemen deze functie,"
terwijl in plaats daarvan hier we willen gewoon de naam van de functie passeren.
Als we kijken naar wat er hier aan de hand, het grote verschil is dat deze top regel code zegt
effectief, onderhouden van een pointer naar de functie genaamd handler,
en wanneer de Ajax-oproep is voltooid, noemen deze functie,
daadwerkelijk uitvoeren van de functie, plug in de argumenten, al dat werk te doen,
dat deze lijn hier beneden zegt in plaats van het handhaven van een pointer
de functie heet handler, dit onreadystatechange veld
zal het resultaat van een functie genaamd naar handler houden,
dus het gaat om handler te evalueren, het gaat om daadwerkelijk handler bellen nu -
niet wanneer de Ajax oproep voltooid, maar op dit moment,
dat is niet wat je wilt doen als je iets schrijft
om te gaan met een Ajax call dat is voltooid.
>> Oke. Vragen over dat? Het is een subtiel verschil.
Het is een subtiel verschil.
Een ding dat ik zou zeker doen als je het niet hebt gedaan -
want dit is nieuwe dingen, het duurt een tijdje voor het echt zinken in
tenzij je daadwerkelijk typt een aantal van deze spullen -
Ik wil u aanmoedigen om te gaan door de broncode
dat Tommy gepresenteerd in collegezalen op woensdag
want hij ging zeker door middel van een heleboel dingen, een soort in een waas.
Ik zou eigenlijk proberen te typen.
Probeer het coderen van sommige spullen.
Maak een bestand. Js. Typ de code zelf. Niet gewoon kopiëren en plakken.
Niet alleen lopen CP.
Probeer dat te doen alleen maar om soort flex je JavaScript spier.
Zien wat de dingen zijn.
Bijvoorbeeld, hier ben ik op zoek naar quote7.js in de broncode van woensdag's lezing.
Proberen te gaan in en in plaats van alleen het maken van al deze functies anoniem,
Kopieer deze code, letterlijk naar beneden naar dit succes code,
Kopieer dit, plak het in een andere functie, en geef het een naam,
en probeer dan het passeren van de naam in en zie wat er gebeurt.
[Student] Kan dat in een apart bestand of in hetzelfde bestand?
Het zou kunnen zijn in een apart bestand als je goed opnemen.
Een ding dat gaat worden -
De truc is werkt deze functie verwijzen naar een van de variabelen die buiten het?
En ik denk dat het alleen betrekking heeft op respons.
Yeah.
U kunt deze naam.
U kunt trekken, kun je het een naam geven, en dan kun je de naam passeren hier.
Dus ik zou geven dat een keer te proberen, kijken hoe dat werkt.
>> Oke. Vragen? Vragen? Ik hou van vragen.
Ik weet niet over jullie, maar ik vind ze.
Hoe hebben jullie het gevoel hierover?
Er is een soort van deze, "Oh, crap" sfeer in de kamer. [Studenten grinniken]
Is dat een soort van hoe jullie je voelt? >> [Student] Ja. >> Ja? Ja, Daniel?
>> [Student] Ik denk dat ik begrijp soort van de algemene concepten die je het over hebt,
zoals de anonieme functies en al deze spullen,
maar ik begrijp niet de helft van de syntaxis die daar op dit moment,
zoals wat ul middelen, li, deze verschillende tags.
Ik denk niet dat ik zou kunnen iets met JavaScript-code. >> Fair.
Is dat een gemeenschappelijk gevoel, gemeenschappelijke gevoel, het klinkt als? Oke.
[Student] Zullen we moeten? >> Zullen we moeten coderen?
Je moet bereid zijn om zoiets te ontleden, zou ik zeggen.
Ik ben niet degene die het schrijven van het examen,
maar ik zou zeker zeggen dat als dat is een gemeenschappelijk gevoel,
soort dat veel van deze syntax hier eruit ziet, "Wat is er aan de hand?"
"Ik ben helemaal zwemmen," laten we dan praten over dat en dat bevestigen.
Klinkt dat goed?
Oke.
>> Dus wat is hier aan de hand? Laten we deze lijn door lijn.
Laten we proberen te gaan rond de kamer.
Ik ga gewoon een beroep doen op mensen 1 voor 1, en geef me je beste gok.
We zullen het snel te doen. Je hebt 5 seconden om te antwoorden.
Als u niet antwoordt, gaan we naar de volgende persoon.
En het is niet een groot probleem, want ik weet dat dit gekke dingen.
We zullen hier opnieuw beginnen. Charlotte, wat doet deze lijn doen?
[Student] Het is het creëren van een variabele genaamd suggesties
en deze gelijk te stellen aan wat ul is. >> [Hardison] Juist.
>> Jimmy, wat is ul?
[Student] Ik weet het niet. >> [Hardison] Oke, cool. Charlotte was helemaal gelijk.
Deze lijn van de code die ik hier heb gemarkeerd verklaart een variabele genaamd suggesties,
een JavaScript-variabele.
We hebben dit var zoekwoord voor die ervoor zorgt dat de variabele blijft lokale maakt kreeg
om de omvang dat het in
En dit ul ding dat we niet echt gezien hebben voor,
laten we kijken of er een goede - Laat me terug naar mijn iPad te schakelen.
Nieuwe pagina.
Ik weet zeker dat jullie het ul eerder gezien.
Het is een ongeordende lijst.
Dus heb je ooit gezien op een webpagina waar je de kogels
en je hebt Thing 1 Thing 2, en zo verder en zo voort?
Dit is een ongeordende lijst.
De manier waarop je dit in HTML zou code is je zou beginnen met een open-tag
dat opent de ongeordende lijst, zou je te sluiten met een close-tag die de ongeordende lijst wordt gesloten,
en vervolgens in het midden zou je naar de lijst items, li.
En in de li's de tekst weer te geven zou zijn, dus Thing 1 en Thing 2.
Dan zouden we onze lijst post-tags sluiten.
Ongeordende lijsten zijn super vaak, want het is een geweldige manier om dezelfde styling krijgen
toegepast op een rij van de dingen.
Dus als je kijkt in, bijvoorbeeld, de PSET 7 code,
een groot deel van de nav pillen, de navigatie-pillen die werden gebruikt voor de verschillende schakels
te kopen, verkopen, Quote, Geschiedenis, dat alles, die zijn geïmplementeerd als ongeordende lijsten,
en ze gebruikt CSS om deze bullet points te verwijderen
en soort dingen veranderen rond een beetje.
Dat is een beetje de kracht van de CSS is dat de HTML beschrijft de structuur.
We hebben een lijst van lijstitems kreeg.
Het is ongeordend. Er is geen eerste, tweede of derde. Het is gewoon een lijst.
En dus standaard het zal tekenen met alleen kogels.
Als we in plaats daarvan hadden ol geschreven, dus ik ga dit veranderen in een ol lijst
in tegenstelling tot een ul, wat zou dat doen?
Het zou te ontdoen van deze kogels, en de standaard zou in plaats daarvan een genummerde lijst worden
want nu hebben we bestellen.
De styling van de lijst is dan wat je spelen met CSS,
en dat is waar de mensen die de Bootstrap bibliotheek schreef voor CSS speelde rond
met de styling van een ongeordende lijst te krijgen om die mooie kleine nav pillen te geven.
Als we kijken naar Google, bijvoorbeeld, laten we eens een kijkje nemen op deze man.
Terug naar "hoe ik meter je moeder" - klinkt een beetje Duits.
Ik hou van het Duits. Het klinkt zo leuk.
Het spijt me als er sprake is van Duitse mensen kijken die beledigd voelen.
Hoe dan ook, als we kijken naar deze links hier aan de top
en we kijken naar wat er aan de hand daar, kunnen we het inspecteren met behulp van deze kerel.
Ik ben weg hier beneden in de hoek.
Ontwikkeltools op Chrome is geweldig.
Als jullie beginnen te spelen met het of opzoeken tutorials voor het, het zal een grote hulp
als je doet op het web gebaseerde projecten.
Ik klik op mijn kleine inspecteur. Ik ga terug omhoog hier.
Ik ga om te zien wat al deze jongens zijn.
Ik vergroten ga ik om te klikken op deze.
Dan kan ik weer uit te zoomen en te zien wat het eigenlijk is in de HTML manier hier beneden.
Het lijkt erop dat Google het is genesteld in een geordende lijst.
Dus we hebben deze overspanning die zegt + U, en dat is genest binnen een anker-tag,
dus dat is wat maakt het aanklikbaar en het linkt het naar mijn Google+ pagina.
Het is genest in een item in de lijst,
en het is genest in deze geordende lijst.
En als ik nu eigenlijk op het item in de lijst, zal het hoogtepunt voor mij daar.
Als ik wijzen op de ongeordende lijst, zie je hoe gaat de focus op de top.
Het verschuift en toont me de hele geordende lijst.
Dus Google heeft zojuist rond gespeeld met de styling om deze lijsten te zien zijn als dat.
Dat is genoeg plezier met lijsten. Terug naar de quiz of dit spul.
Nu weten we wat een ongeordende lijst is - hopelijk.
>> Laten we praten over deze volgende regel code for (var i in response.symbols). Ella.
[Student] Ik heb geen idee. >> [Hardison] Geen idee.
Oke. Je hebt gezien een lus voor, neem ik aan. >> [Student] Ja.
[Hardison] Weet je nog doen voor elke in PHP? >> [Student] Ja.
[Hardison] Dit is precies dat.
Dit is een voor elke lus in JavaScript.
Dit is een kortere weg dan het doen van de for (var i = 0; i <response.symbols.length; i + +),
die we konden doen,
maar dit is een meer beknopte manier van schrijven.
Een ding voorzichtig in JavaScript te zijn is dat dit niet noodzakelijkerwijs de bestelling.
Als response.symbols vermoedelijk een array,
var i zal een index in deze array, maar het is niet noodzakelijk de 0 en de 1
en vervolgens de 2 en dan de 3.
Ze zeggen wel gebruik van de for (var i = 0) als u de zorg over het bestelproces.
Ik denk dat de ander ding om op te merken is dat wanneer we een voor elke in PHP,
we aangegeven de naam matrix eerst en dan hadden we het als trefwoord
en dan gespecificeerd we de waarde die we wilden halen uit de array.
Of we kunnen zowel de sleutel en de waarde die we wilden halen uit de array opgeeft.
Hier zijn we net de index.
We hebben het niet krijgen van de werkelijke element zelf.
Zo zie je maar dat als we gaan hier zijn we eigenlijk het moeten de i-element te halen
uit de response.symbols object.
Het andere ding dat is gek op dit is kunt u dit gebruiken om de lus over objecten in JavaScript
en ophalen van elk van de eigenschappen van dat object 1 op 1.
Als we terug naar dat JavaScript Object Notation afbeelding van mijn familie
waar het was letterlijk de accolades en vader, broer, moeder, dat alles,
je zou kunnen gebruiken een lus over te herhalen dat ook
en ophalen van de eigenschappen 1 voor 1.
Soort van gek.
Dus wat we doen, het eruit ziet, is dat we de opbouw van een HTML-tekenreeks
net als deze reactie zegt: "bouwen html string voor een lijst met suggesties."
We gaan om te beginnen met onze open-tag voor onze ongeordende lijst
waarin we veronderstellen we gaan alle suggesties als lijst items op te slaan.
Dan gaan we lus over alle symbolen in het antwoord
want vergeet niet dit is een typeahead voor CS50 Financiën,
dus we trekken uit de voorraad symbolen 1 voor 1.
En dan zijn we toe te voegen aan onze suggesties touwtje wat?
>> Jared, wat betekent dit eruit?
[Student] Het lijkt alsof het grijpen van een soort database
welke letter u typt,
waardoor een soort suggestie welk woord - >> [Hardison] Ja.
De Ajax-verzoek al eigenlijk niet gaan en pak die. Dit is ons antwoord.
Dit is eigenlijk nadat we hebben gekregen van de reactie van de database, van de server.
>> En dus wat is dit? Wat betekent dit enkele quote ding aan te duiden?
[Student] De enkele quote? >> [Hardison] Ja. Het is gewoon een string, toch?
En dus wat is dit crafting?
Het is een string en we zetten spullen in de string. En wat is de string zoek als?
[Student] Alleen al de suggestie dat We zijn - >> [Hardison] Ja, precies.
Het is de suggestie genest in een anker-tag,
en dat is ook verankerd in een lijst-item, zodat het zal gaan in de lijst.
Letterlijk, alles wat we hier doen is dat we gewoon het opbouwen van een groot HTML string.
We zijn net opbouw daarvan letterlijk als een string in het geheugen.
We zijn niet iets bijzonders te doen.
We zijn niet het creëren van nieuwe knooppunten in de DOM of iets dergelijks.
We zijn letterlijk slechts het bouwen van een string als je uit te schrijven, bijvoorbeeld,
op uw iPad zoals ik - in het geval jullie een iPad en als het schrijven van HTML op uw iPad -
je bent gewoon het schrijven van een grote lange string die is net als ul, li, een ...
en dan zijn we natuurlijk gaan om het te beëindigen met deze ul.
Dus dat is alles wat we krijgen is 1 grote, massieve string.
En binnen is er een li en een een voor elk van de symbolen die we hebben gevonden.
>> En nu verder op, wat doet deze lijn doen, Stella, hier?
Wat houdt deze lijn hier doen?
[Onverstaanbaar student reactie]
[Hardison] Ja. Het is gewoon het toevoegen van deze kerel.
We zijn net eindigt onze lijst. Precies.
>> En dan is deze laatste regel - en dit ziet er soort van goofy -
Het spijt me. Ik weet niet je naam in de rode sweater. Weet je wat dit doet?
Of ga je beslissen nee?
En jij? >> [Student] Zij roept jQuery op, maar ik weet niet precies welke functie het is.
[Hardison] Ja. Het roept jQuery.
Hoe zit het met iemand hier op aan de linkerkant van me?
Weet je wat deze lijn doet? Wat lijkt het alsof het doet als je moest raden?
[Student] indienen om de HTML van de lijst met suggesties, of is het -
Yeah. Wat bedoel je door het indienen?
[Student] Zeggen naar HTML wat we zojuist behandeld in JavaScript
is nu zeker alleen HTML. >> [Hardison] Ja.
Dat is een goede start.
Laten we ontleden dit een beetje meer.
Dat is precies wat dit deel hier doet.
[Student] Welk aspect ervan maakt duidelijk dat het jQuery?
[Hardison] jQuery is dit dollarteken vent.
Wanneer je aan het schrijven bent jQuery, ziet u dit dollarteken all over the place.
Dit is net als in jQuery soort speciaal symbool.
Het doet een heleboel dingen.
In het kader van dit hier, dit deel van de lijn, het is een selector.
Het is de jQuery selector en wordt het selecteren van de HTML-element
dat is de ID suggesties.
Weet je nog hoe HTML-elementen die ID attribuut kan hebben
waar u een paragraaf tag die ID suggesties heeft kan hebben?
Dit jQuery selector zal grijpen dat element
omdat element ergens in het geheugen bestaan.
JavaScript staat is om soort van lokaliseren van dat element en zeggen:
"Oh, oke, jij bent de paragraaf die deze ID heeft,"
en dan dit. html zegt: "Oke, vervanging van de huidige HTML in je
"Met deze nieuwe reeks, deze nieuwe HTML die ik je ga geven."
Dus als we kijken terug over naar de iPad - ha, ha, herinnerde ik me deze keer schakelen -
je vaak invoegen in dingen als divs, dus stel dat we hadden een div dat had id = "suggesties";
We gaan naar de div-tag hier beneden te sluiten.
Wanneer we de jQuery selector om het element in de DOM te grijpen
dat heeft de ID van suggesties, het letterlijk kiest deze hele div hier,
en dan zegt de HTML-methode, "al deze spullen Vervang recht hier
"Midden in dat ul, dat ongeordende lijst die we net opgebouwd."
Letterlijk, als je aan het bekijken was snaar de hele HTML-bestand in het geheugen,
zou je gewoon zeggen: "Ga naar die plek en plof in die ul spul,"
en dan update de pagina, zodat je er nu ziet de ongeordende lijst.
Dus wat heeft dit effectief gedaan is dat het dynamisch bijgewerkt deze div.
De code die we net zagen op de laptop heeft deze div bijgewerkt
de nieuwe suggesties die ergens werden opgehaald van de server te houden.
[Student] Welke suggesties vertegenwoordigt de nieuwe suggesties en de oude suggesties?
De nieuwe suggesties en de oude suggesties.
[Student] Wat vertegenwoordigt welke wordt vervangen en welke doet het vervangen?
[Hardison] Hebbes.
Zie hier, deze man is een string.
Dit specificeert de ID van een element - we noemen het in de DOM -
wat letterlijk betekent gewoon wat HTML-element dat ergens wordt weergegeven
op de webpagina.
Als we kijken naar dit, als we terug naar onze Google-pagina te gaan,
zien we al deze divs en deze ol en deze li's en deze a's.
Deze alle vormen de HTML-elementen die momenteel deel uitmaken van deze pagina.
Deze allen correleren met afzonderlijke elementen op de pagina.
En als we om dit te veranderen, zou je de DOM verandering kijken,
en je kunt dit soort verschuiving zien.
Dus als we waren te typen Harvard, zou je de DOM beginnen te veranderen
en de lijst elementen, te beginnen hier in te veranderen.
Dat is eigenlijk wat er gebeurt.
>> Eens kijken of we een aantal van deze dingen kan vinden midden in hier.
Laten we eens kijken naar deze link. Laten we eens kijken naar deze link Harvard Wikipedia, en we zullen kijken veranderen.
We kunnen zien dat als ik dit heb gekozen, het komt overeen met deze div hier,
die ook deel uitmaakt van een element in de lijst, die direct naast een ander element in de lijst,
die deel uitmaakt van de ongeordende lijst hier.
Nu, wat gebeurt er als we zoeken voor onze mindere school Zuid iets naar beneden?
Het verandert nu.
Dus verloren we onze greep op die div en die lijst element
want nu hebben we verschillende elementen in ons DOM,
andere lijst elementen, lijstitems, verschillende lengtes, dat allemaal.
Dus dit HTML-document wordt dynamisch bijgewerkt.
Oude elementen worden verwijderd, worden nieuwe elementen worden toegevoegd.
Terug hier zijn we gewoon opgeven van dit element, die vermoedelijk stabiel zal zijn
in onze typeahead update
want anders als jQuery een element dat een ID van suggesties heeft niet kunt vinden,
het zal gewoon crashen op dit punt.
En dan zijn we het actualiseren van haar innerlijke HTML.
Dus het is deze lijst items, deze anchor tags die voortdurend wordt bijgewerkt en verfrissen terwijl u typt.
Is dat een betere baan? >> [Student] Dat helpt veel. >> [Hardison] Oke.
De syntax dat je veel zult zien - weten wat deze man doet.
Ken de jQuery selector.
Dit jQuery selector met een hash tag voor impliceert een ID.
Deze man zegt: "Geef me het element dat de ID suggesties heeft."
Deze man hier beneden zegt ook: "Geef me dat hetzelfde element met ID suggesties."
Deze man eronder is iets complexer.
Deze zegt: "Geef me het element met ID vorm-citaat,
"Maar dan naar binnen die vorm en vinden het kind" -
dus deze ruimte hier houdt in dat we gaan naar een kind element, een genest element.
"Zoek de vorm die deze ID heeft en dan vinden de ingang in die vorm wiens naam symbool."
Dit is zeker in Tommy's slides, deze verschillende soorten jQuery selectors.
Je moet weten wat voor soort elementen deze ophaalt.
Bijvoorbeeld, laten we teruggaan naar de iPad echt snel.
Als we een formulier element met id = "form-citaat" -
natuurlijk dat ontbreekt de method = POST of method = GET en actie attributen alsmede
die je moet hebben op formulieren, maar voor dit voorbeeld een formulier, zoals u weet, heeft ingangen
en dat code die we net gezien zouden de ingang element krijgen
dat had name = "symbool".
Dit is belangrijk wanneer je probeert om verschillende gebieden binnenkant van uw formulier in te vullen.
Dit is hoe automatisch vullen werkt.
>> Ja, Ella?
[Student] Wat is het verschil tussen een ID en een klasse? >> Een ID en een klasse? Yeah.
Een klasse wordt gebruikt voor de styling doeleinden.
Een ID wordt gebruikt voor wat het klinkt als: unieke identificatiecode voor een bepaald element.
Dus binnen een HTML-pagina, kunt u slechts 1 element met een bepaalde ID.
Er is maar 1 formulier met de ID-formulier offerte.
Echter, de nav pillen klasse of nav klasse was waarschijnlijk iets dat je gebruikt
mogelijk of zagen in de context van uw Probleemverzameling 7 code.
Een klasse wordt gebruikt om een ​​bepaalde styling van toepassing op een aantal verschillende elementen.
Bijvoorbeeld, in de oude dagen van HTML voordat er style sheets,
voordat er CSS, deze Cascading Style Sheets,
als je wilde een paragraaf centreren of centreren de tekst in een div,
zou je een div te hebben en dan zou je iets als text-align = "center" hebben
zoals als een attribuut in je div.
Dit is niet goed.
De reden dat mensen dit niet willen is omdat dan wanneer je wilde updaten
hoe alles weergegeven op uw website, moest je letterlijk gaan in elke pagina
en elke HTML-bestand en ga veranderen de hele stylings op alle verschillende elementen,
en het was een enorme pijn want vaak je wilde een bos van divs hebben
dat alle centrum werden uitgelijnd of passen op een bepaalde manier.
Dus de oplossing voor dat was de klas.
Nu hebben we een div waar we de klasse gespecificeerd worden wat je het ook wilt noemen.
Je zou kunnen noemen het "midden", en sluit je div ergens hier beneden
en heb je al je leuke dingen daar.
En dan ergens in je stylesheet zou je een bepaalde styling opgeven
dat zou gelden voor deze klasse.
Dit had niet de enige div dat gecentreerd was zijn.
Je zou kunnen hebben andere divs die ook tekst had gecentreerd.
>> Ja, Charlotte? >> [Student] Terug te gaan naar de offerte, wat doet de stip betekenen?
Wat is het punt? >> [Student] Ja.
Terug naar de laptop, bedoel je? >> [Student] Ja. >> Oke.
[Student] Bijvoorbeeld, in deze lijn betekent dat dan dat er deze variabele genaamd val
binnenkant van het formulier? >> Ja.
De dot notatie in JavaScript doet een paar dingen.
In dit geval u belt een functie waarvan de naam val.
Het is een methode.
Dit is waar we in de objectgeoriënteerde spul dat we het over hadden, Sam.
Hier object - in dit geval het ingangselement - een functie of een methode genaamd val
die in feite zegt: "He, zet je de waarde van deze zaak."
Stel je voor dat in plaats van deze gobbledygook hadden we het nummer 7 of de snaar 7 geschreven.
Dat zou de waarde van deze input element te veranderen 7.
[Student] De input element dat alles voor de dot?
[Hardison] De input element, precies, dat het element in de HTML,
binnen de DOM, die overeenkomt met deze query.
[Student] Dus het is ingangselement. Functie en vervolgens wat die waarde zou moeten zijn.
[Hardison] Precies. >> [Student] Oke.
En u ook dit gebruiken om toegang eigenschappen.
Dus als we kijken terug naar de code die we via lijn per lijn te lopen
waar we response.symbols [i]. naam,
we zijn niet een functie roepen hier.
Er zijn geen haakjes.
Een ding moet je gewoon in gedachten te houden als je scheuren door deze code,
als je ziet haakjes, dat betekent functie-aanroep.
Een functie wordt opgeroepen,
en de naam van die functie is wat die haakjes voorafgaat.
Dus in dit geval beneden, het is val. In dit geval hier is het html.
In dit geval hier de naam van de functie letterlijk $,
en we weten alleen dat dit de jQuery selector,
het is de functie die is het selecteren van wat deze man is.
En dan als je niet tussen haakjes te zien, zoals hier of hier,
wat je in plaats daarvan toegang is een eigenschap van het object.
Dit is net als het gebruik van de array notatie.
Het is een alternatief voor de matrix notatie.
Het is gewoon een afkorting.
Dus we toegang tot het gebied symbolen van de response object.
>> We hebben veel over Ajax, DOM, wat HTML, CSS niet veel gedaan.
Willen jullie de laatste 15 minuten of zo te besteden aan deze?
Ik denk dat we moet echt ongeveer 10 minuten voordat we moeten beginnen met inpakken.
Of moeten we terug gaan en praten over een aantal van de andere dingen op onze lijst?
Laten we eens kijken.
Als we terug gaan naar het begin, dan schakelen we over naar mijn iPad weer zo kunnen jullie dit zien,
we hebben veel van Ajax gedaan, hebben we een aantal jQuery gedaan,
we hebben wat JSON gedaan, hebben we een aantal XML gedaan, hebben we een aantal DOM gedaan,
we hebben gedaan wat - nope, niet HTTP. Schrap dat.
Niet veel ruimte. We soort gesproken over CSS - niet echt.
Hebben jullie een goed gevoel over Ajax? Wilt u meer tijd besteden aan Ajax?
Handopsteken. Oke.
DOM? Iedereen wil meer tijd besteden aan DOM?
De gemakkelijkste manier om echt een gevoel voor wat er aan de hand met de DOM -
mensen praten over de DOM en gooi rond, "Oh, de DOM dit, de DOM dat."
Echt de DOM is gewoon de manier waarop al deze HTML-elementen worden in het geheugen.
en het is gewoon uit te leggen - dat is wat het is.
Het is gestructureerd als een boom, en kunt u afzonderlijke HTML-elementen toegang
met dat jQuery selector, dat dollarteken dingetje.
Je kunt dingen manipuleren. U kunt elementen toevoegen aan de DOM.
U kunt een nieuwe paragraaf element toe te voegen aan de DOM,
je weg kan nemen een div element uit de DOM als je wilt.
Dat is alles wat het is. Het is gewoon een soort van de in het geheugen weergave van uw HTML-bestand.
Het kan worden gemanipuleerd en doorlopen.
Hoe zit het met jQuery en dat selector? Ja, Sam?
>> [Student] Betekent dit dat de DOM omvat al uw CSS en JavaScript?
[Hardison] De DOM omvat die knopen, ja.
[Student] Het omvat de HTML dat die andere ondersteunende documenten output?
Als JavaScript wijzigt de HTML als het deed in deze Google -
oeps, sorry, ik ga niet terug op dat.
Weet je nog hoe JavaScript de lijst van Google-resultaten zou wijzigen?
Als JavaScript wijzigt dat, dan zijn die nieuwe lijst elementen zijn nu onderdeel van de DOM.
Zij werden geïnjecteerd in de DOM.
En het blijkt dat de scripts en de stylesheets zelf
zijn inderdaad onderdeel van de DOM.
Je ziet hier beneden dat we deze script knooppunten en deze stijl knooppunten hebt.
JavaScript kan toevoegen en verwijderen deze ook.
Dit is waarom het zo slecht om kwaadaardige JavaScript op uw pagina
is dat het nu kan beginnen met het binnenhalen andere webbrowser van andere plaatsen.
Zodat u kunt beginnen met slechts 1 JavaScript-bestand,
maar dan kan het beginnen te trekken in andere JavaScript-bestanden.
U kunt Ajax gebruiken om te laden in JavaScript en dynamisch hebben nieuwe JavaScript
die op uw webpagina.
Dus het is een echt krachtig ding dat onze browsers kunnen soort van steeds opnieuw maken
en opnieuw aanpassen welke wordt gegenereerd door JavaScript.
>> [Student] Die stijl tags worden opgenomen in CSS?
Laten we eens kijken. Yeah.
Deze CSS, weer kunt u zien waar jQuery kreeg zijn selector uit.
We hebben dit # gb die zegt: "Dit styling geldt voor een element met ID gb."
"Een element met ID gb gaat dit lettergrootte hebben met dit lettertype familie,
"Sans-serif; hoogte."
>> Oke.
Terug naar de iPad.
Hoe zit datastructuren - pogingen, gelinkte lijsten?
Willen jullie een snelle opfriscursus op dat te doen, of zijn jullie voelen -
Yea? Nay? Wie wil datastructuren? Steek je hand op.
Die een hekel datastructuren? >> [Student] Ik wil alleen probeert. >> Je wilt alleen probeert.
Oke.
Is er iemand die niet probeert willen? Wordt iedereen als: "Ik haat probeert. Ik deed het. Probeerde ik het."
[Student] Ik wil gewoon weten over de omega en grote O.
Oke. We kunnen zeker gaan over dat.
Klinkt dat als iets dat we willen doen als een groep? Ja? Zoiets? Nee?
>> Hoe zit het HTTP? Betekent dat lijkt misschien iets meer mensen willen doen?
Of ben je soort, "Eh." Laten we eerst HTTP doen.
Hoeveel van jullie hebben Davids belachelijk geweldig HTTP kort gezien? Iemand?
Ik heb het een hele hoop gezien.
Het was een van de eersten die wij deden, en dus het was alsof we onze demo deze zomer.
Dan heeft het gezien een bos ook, Dan the Man terug.
HTTP en dan is er dit HTTPS ding dat we hebben het over een beetje.
Wat heb je nodig om te weten over HTTP?
Het is letterlijk het protocol voor interactie met een webserver.
Wanneer u wilt Google.com praten, je praat met een andere computer via een netwerk,
wat doe je dan?
Laten we dit misschien doen.
Laat ik trek een terminal.
Hier is mijn kleine terminal venster.
We kunnen iets als telnet, die ons in staat stelt om daadwerkelijk te starten een verbinding naar Google.com doen.
Dit is niet iets wat je moet weten,
maar het is gewoon om te illustreren wat er gebeurt met de HTTP.
www.google.com, poort 80.
Wat is dit?
Het is het maken van een internetverbinding tussen mijn computer en Google.
En het is eigenlijk te sluiten op 173.194.75.99, dat is wat de computer,
sommige Google-server ergens wonen waarschijnlijk uit hier,
hoewel het helemaal terug in Californië zou kunnen zijn.
Nu ben ik aangesloten.
Oke, dat is allemaal goed.
Maar als je naar Google.com, meestal verwacht je Google.com,
sommige HTML te laten zien, toch? Niet alleen dit.
Het probleem is dat ik wil zeggen, "GEEF ME GOOGLE.COM" of wat dan ook.
Maar als ik dat zeg, gebeurt er niets.
In feite, als ik druk op Enter een paar keer, het komt terug en het zegt,
"Dat was een slechte vraag."
Deze zei: "Nee, nee, nee, nee, nee, nee, nee, nee, nee."
"Je kunt niet zomaar spullen inch Je moet eigenlijk HTTP spreken voor mij."
"U moet uw verzoek opmaken als een HTTP-verzoek, als een GET of POST
"Of iets dergelijks."
"En dan zal ik de juiste HTML om u terug te keren."
Zo zie je maar wat het gaf me in dit geval.
Het gaf me HTML dat als ik kopieer het en ik Teksteditor html, als ik het in hier,
en ik sla het op als test.html-oh, kom op.
Webpagina. Daar gaan we.
Nu als ik open Downloads / test.html, nu het gaf me de slechte -
Het niet helemaal maken het als HTML.
Het lijkt erop dat het niet sluiten. Hier, laten we eens kijken.
Nope. Oke.
Het gaat niet te maken. Hoe dan ook, niet van plan om dat uit.
Maar goed, wat het doet is het is terug te keren naar me de HTML,
maar het zegt in wezen: "Je gaf me een goede HTTP-verzoek."
Dus wat hebben we nodig om te weten over HTTP?
Het is de manier van opmaak verzoeken om webservers te komen, meestal, HTML in reactie.
>> Het andere ding om op te merken is dat wanneer u een verzoek om een ​​webserver te maken,
moet u de HTTP-methode die u wilt gebruiken.
We spraken over dit een beetje eerder, waar de 2 groten die we zien
zijn GET en POST.
Er zijn ook een hele hoop andere.
Er is HEAD en PUT en DELETE en al die andere dingen,
maar GET en POST zijn de 2 belangrijkste.
Waar zie je die opduiken? Als je schrijft vormen.
Als je het schrijven van HTML formulieren, moet u de HTTP-methode te specificeren
waarop u wilt dat formulier te verzenden data.
En dan zie je op de server kant als je het schrijven van PHP-code
wanneer u omgaan met de gegevens en moet je kijken in de POST superglobal
of de GET superglobal om de gegevens die werd ingediend door de gebruiker op te halen.
En het verschil tussen GET en POST is dat GET wijzigt de werkelijke URL
en voor het grootste deel kun je zien welke parameters werden doorgegeven aan een GET-aanvraag
heel gemakkelijk gewoon door te kijken in de URL, terwijl bij een POST-aanvraag
u niet doorsturen van de parameters van het verzoek in de URL.
Maar ze zijn niet gecodeerd of iets tenzij je gaat via HTTPS.
De POST-parameters zijn slechts een deel van het -
Ze gaan niet in de URL, effectief.
We hebben de neiging om gewoon een soort van semantisch scheiden van de 2,
die net zegt dat echt, kun je hetzelfde doen met GET die je kunt met POST.
U kunt hetzelfde doen. Het is gewoon dat we ze gebruiken in verschillende situaties.
We maken gebruik van GET als we proberen om gewoon iets te lezen en we gewoon zeggen,
"Geef mij deze gegevens."
En we gebruiken POST meestal wanneer we proberen om iets op de server.
Dat is waarom wanneer u naar Google.com en we deden dat typeahead
we zagen al die GET-aanvragen
omdat we letterlijk alleen informatie ophalen van Google,
terwijl als je een Facebook-wall post te maken, je gaat gebruiken,
het meest waarschijnlijk, een HTTP POST methode om die gegevens te verzenden en een verandering naar Facebook
in de muur, de muur van uw vriend.
Laten we eens kijken.
Ik denk dat het verschil met HTTPS is dat het HTTP, maar versleuteld.
[Grinnikt] Secure.
Yeah. En er zijn een heleboel leuke details daarover.
>> Vragen?
We moeten beginnen met inpakken, en dus zullen we een aantal data structuren te doen aan de zijkant. Charlotte?
[Student] Wat is inbegrepen in de HTTP-header-bestanden van de host naar de methode
en de methode en het nummer? >> Ah.
De beste manier om ernaar te kijken is om naar het tabblad Netwerk
en gewoon zien wat er gebeurt als je gewoon naar Google.com.
U kunt hier beneden komen en je kunt alle van de verschillende HTTP-verzoeken die werden gemaakt zien.
Google.com.
De eerste was ik probeerde om naar Google.com en het zei,
"Oh, Google.com bestaat niet echt."
"Waar je echt wilt om te gaan is naar www.google.com."
Dus ik ben hier omgeleid.
Dat is waar ik heb deze 301 toen kreeg ik de 200 OK.
Dus wat is hier, in je headers?
Het zegt dit is de URL waarop ik het verzoek, de aanvraag methode,
en vervolgens de status code.
Dat zijn de 3 kanjers.
De andere dingen hier, koekjes,
cookies zijn handig voor het uitzoeken van de sessie, als iemand is ingelogd of niet.
Ze zijn ook handig voor het bijhouden van mensen. Dit is hoe websites track die u all over the place.
Ze zetten cookies op uw computer.
Ze zijn opgeleid om cookies andere websites 'als ze kunnen herkennen.
En dan is er nog die andere dingen die de user agent zegt hier.
Deze user agent string identificeert mijn computer naar Google.com en zegt:
"Google.com, zodat je het weet, een gozer loopt deze browser
"Op Intel Mac 10_8_2 ging gewoon naar Google.com."
En dan zijn deze Accepteer dingen gewoon zeggen: "Wat is mijn computer,
"Wat is mijn webbrowser bereid te accepteren?"
Het kan HTML aanvaarden, kan het XML accepteren, al die andere dingen.
Welke tekencoderingen aanvaardt zij?
Is het accepteren gzip gecomprimeerd spullen?
Soms websites zullen dingen comprimeren om het sneller te sturen over het netwerk te maken.
>> Cool. Oke.
Ik denk dat is het voor nu. We zullen sluiten, maar ik zal voor de vragen blijven.
>> [CS50.TV]