>> [9 § - vähemmän mukavaksi]
[Nate Hardison - Harvardin yliopisto]
[Tämä on CS50. - CS50.TV]
>> Selvä. Niin, viimeinen osa lukukauden.
Aloittaa, tiedän, että on ollut joitakin huudot tehdä joitakin Ajax,
mutta onko olemassa muita aiheita, että meidän pitäisi tehdä ensin?
Saanen siirtyä iPad niin, että meillä on -
Anna minun käyttää mustaa sijasta oranssi.
Ajax on ruokalistalla. Muita?
Muita aiheita, että ihmiset haluavat nähdä? Kuulin DOM liian aikaisemmin.
[Opiskelija] jQuery. >> JQuery. Okei.
jQuery. Voimme tehdä puukottaa sekin.
[Opiskelija] XML. >> XML. >> [Opiskelija] JSON. >> XML, JSON. Okei.
PHP? Kaikki hyvin? C? Kaikki hyvin? >> [Opiskelija] Ei haittaisi puhua PHP.
Hash taulukoita? Yrittää? Liittyy lista?
[Opiskelija] Voi, on tietokilpailu viime vuonna, on pöytä omega ja iso O.
Joo. >> [Opiskelija] on aika erilaisia ​​versioita ja illuusioita.
Voimmeko puhua siitä? >> Joo. Me puhumme hieman tietorakenteita.
[Opiskelija] Joo. >> [Opiskelija] Yrittää. >> [Hardison] Tietorakenteet.
Me puhumme joitakin yrittää varmasti.
[Opiskelija] Voimmeko CSS vähän? >> Joo, me voimme tehdä vähän CSS.
Muita aiheita? Sam? >> [Opiskelija] Scope PHP. >> [Hardison] Scope.
Laajuus PHP. >> [Opiskelija] HTTP.
HTTP. Mahtava.
Oletan yksi tapa tehdä tämä olisi järjestää kaiken sellaista kronologisesti
ja aloittaa tietorakenteiden koska nämä olivat pian.
Tai voimme antaa nämä jonkinlainen etusija painotus ja mennä sieltä.
Niin mitä te olette mieltä?
Onko jotain, että kaikki on kuolemassa nähdä?
Tehdään nostaa käsiä. Entä Ajax?
Kuinka moni teistä kaverit haluavat tietää Ajax?
Kuinka moni teistä ovat kuin, "Man, Ajax, sain sinut"? Kukaan. Selvä.
Joten Ajax on melko korkea. Katsotaanpa tähden, että kaveri.
Entä DOM? Jokainen valmis rokkaamaan DOM? Ei? Okei. Me tähden, että yksi liikaa.
jQuery?
Queryless. Kyllä. Okei.
Pari ihmistä jQuery, mutta silti ihmiset ovat hieman chill kanssa. Okei.
XML? XML. >> [Opiskelija] Käytätkö että yli yhteydessä Ajax?
Siinä mielessä, että - Kyllä.
Tarkoitan, että se on keskeinen osa Ajax, joten kai voimme niputtaa että Ajax,
jutella koko juttu siellä.
JSON? Mikä on JSON? Okei, viileä.
Tietorakenteita? Ihmiset tunne melko hyvä siellä?
Tiedät liittyvät luettelot, tietää hash taulukoita?
Miten Speller mennä kaikille? Se oli doozy, huh? Joo. Okei.
Joo, voimme puhua hieman näistä mutta jälleen kerran, ole niin tärkeää.
CSS?
Tekeminen sivustot näyttää aika. Okei.
Laajuus PHP? Yksi iso käsi tuolla. Kaksi isoa kättä, kolme. Okei.
Ehkä medium käsi. >> [Opiskelija] Yli 2.
Joo. Sam kampanjoi. Kädet ylös.
HTTP? Okei.
>> Katsotaanpa. Se näyttää varmasti kuin Ajax ja DOM ovat jaossa.
Joten aloitetaan siitä.
Kai meillä on pari vaihtoehtoa täällä.
Yksi on eräänlainen tehdä kertaus mitä Ajax ja XML ovat
koska meillä ei todellakaan ole aikaa tehdä, että pykälässä tai ongelma asettaa.
Toinen asia on sukeltaa joitakin ongelmia edellisvuosien tietokilpailuja
ja katso, mitä siellä tapahtuu.
Mitään etusijaa 2? >> [Opiskelija] Mielestäni konkreettisia esimerkkejä olisi enemmän hyötyä.
Konkreettisia esimerkkejä enemmän hyötyä? Selvä.
Mitään niistä erityisesti ne teistä päässä Ajax miehistön?
Ongelmat haluat katsoa?
[Opiskelija] Onko tapahtumakäsittelijän liittyvät Ajax ollenkaan? Luulen that -
JavaScript tapahtumankäsittelijät eivät välttämättä liity Ajax. He voivat.
[Opiskelija] Joo, se on toinen käsite, että en itse saada. >> Okei.
[Opiskelija] Uskon kuitenkin tietovisa viimeisen vuoden on 1 iso ongelma
myöhemmissä osissa tietokilpailu, joka liittyy Ajax ja syntaksin en oikeastaan ​​-
Selvä. Ja Ella?
[Opiskelija] Tunnen tiedän mitä Ajax on, mutta en tiedä, miten sitä käytetään.
Okei. >> [Opiskelija] Minusta tuntuu, etten tiedä mitä Ajax on tai miten sitä käytetään. [Naurua]
Okei. Joka toimii melko hyvin.
Katsotaanpa. Katsotaanpa ehkä katsoa hyvä esimerkki Ajax ensin.
>> Tervetuloa, tervetuloa. Toivottavasti olet kunnossa kameran.
Jos ei, voit hengailla takana.
>> Hyvä esimerkki Ajax.
Saanen siirtyä minun laptop.
Täällä olemme Google.com.
Kuinka moni teistä kaverit ovat koskaan pelannut hauskaa "Miten?" peli Google?
Miten voin - ja saat nähdä kaikki hauskoja asioita, jotka keksivät -
laittaa tämän musiikkia minun Tumblr?
Ja voit jatkaa ja saada kaikki tällaista hauskaa.
Mitä täällä tapahtuu?
Kuten kirjoitat Googlen hakukenttään, reaaliaikaiset tulokset päivittämässä.
Niin laita tähän - ja huomaat, että kaikki tulokset alkavat päivityksistä on Google-sivulla.
Se ei ole jotain, joka tapahtuu tietokoneen.
Verkosto on mukana tässä. Google on mukana tässä.
On käynyt ilmi, että joka kerta kun painat näppäintä, kuin sanoa G tai L,
ja hakutulokset päivitys, mitä tapahtuu
on olemassa joitakin JavaScript sivun, joka havaitsee, että olet painanut näppäintä,
ja se tekee verkon pyynnön Google.com kasapäin kaikki uusimmat tulokset
jotka parhaiten sopivat kyselyn, että olet kirjoittanut tähän mennessä.
Valitettavasti uskon, että jos me tarkastelemme tätä -
Olen menossa katsomaan lähde - suurin osa tästä Ajax tai JavaScript-koodia täällä
on kaikki minified ja usein sekaisin hieman liikaa.
Minification kirjaimellisesti on ohjelma voit suorittaa JavaScript-koodin avulla
ja se muuttaa kaikki muuttujien nimet ja tekee siitä täysin lukukelvoton
mutta yrittää tehdä JavaScript mahdollisimman lyhyt
niin, että kun lähetät JavaScript-tiedostot verkon kautta
et tarvitse ladata tai lähettää suuria tiedostoja.
Joten tätä tavaraa on melko vaikea lukea,
mutta haudattu tänne, mitä valtuuksia tämä typeahead - muotisana tämän -
on Ajax pyyntöjä.
>> Mikä tekee Ajax pyynnöstä eroaa minkä tahansa muun verkon pyynnöstä?
Sam? >> [Opiskelija] et muuta URL. >> [Hardison] Oikea. Täsmälleen.
Huomaat kuin kirjoitan, "miten laitan leukaluu pariliitoksenmuodostustilassa?" [Naurahtaa]
On aina hauskaa - Joo.
Huomaat, että tämä URL täällä yläosassa ei muutu,
ja koko sivu ei ole virkistävää.
Joten jos katsomme tällaista kamaa asti täällä, tämä yläreunassa, tämä Google,
ja sitten musta palkki täällä, jota usein kutsutaan Chrome web-sivun,
joka ei muutu. Koko sivu ei ole virkistävää.
Ajax pyyntö käytetään virkistämään vain tulokset sivulla,
vain, että 1 pieni osa sivun niin et tarvitse mennä täysin eri URL,
täysin eri tiedostoa ja lataa se muistiin.
Joten kun kuulet puhuttavan dynaaminen Web 2.0 tyyppi vallankumous,
tämä oli takana paljon se.
Tämä on mitä voit kirjoittaa seinälle viesti Facebook, osuma Post,
ja ovat post näkyvät ilman koko Facebook-sivulla virkistävä
tai selata kasan kuvia ja ladata valokuvia dynaamisesti,
sillä kuinka paljon se imee jos meni Facebook-sivulle,
napsautti valokuvat ja sitten piti istua siellä ja odottaa
Vaikka kaikki pari tuhatta oman Facebook-valokuvia ladattu muistiin?
Se on valtava kuormitus.
Mutta Ajax voit tehdä sen asynkronisesti
ja se on asynkroninen osa Ajax.
>> Selvä.
Olemmeko hyvä? Onko jokainen tavallaan ymmärtää suunnilleen, mitä Ajax tekee?
Se tapahtuu JavaScript, se on tehty eräänlainen dynaamisesti ja asynkronisesti
kun sivu ladataan.
Se tulee usein jälkeen eräänlaisena vastauksena tapahtumaan,
joka on joko hiiren napsautuksella tai näppäimen painallus tai jotain.
Ja sitten se tekee puhelun takaisin palvelimelle, olitpa Google.com
tai Facebook.com, hakee uusia sisältöä sitten näyttää tai päivittää
tai jotain sellaista.
>> Cool. Selvä.
Katsotaanpa pari esimerkkiä aiemmilta vuosilta.
Menemme tietokilpailuja.
Ja sitten Charlotte, olit viittaavat Quiz 1 alkaen 2011. >> [Opiskelija] Joo.
Yksi asia aion varovaisuutta on, että tarkastellaan edellisvuosien tietokilpailuja
näet tätä kamaa kutsutaan XHR usein suhde Ajax.
XHR ja XML HttpRequest on eräänlainen raaka tapa tehdä Ajax, jos haluatte.
Tänä vuonna olemme siirtynyt lähes kokonaan käyttämällä tätä jQuery-kirjaston.
jQuery on kirjasto auttaja JavaScript-funktiot ja luokat ja kaikenlaisia ​​herkkuja,
ja jQuery eräänlainen abstrakti raaka XHR tavaraa pois teiltä
niin, että se on paljon helpompi tehdä todellinen Ajax kamaa.
Joten kun selaat näitä edellisvuosien tietokilpailuja
ja te näette kamaa, joka sanoo XHR ja uusien XML HttpRequest,
kaikki tuollaista kamaa, voit ohittaa sen.
Sen sijaan aiomme vain jQuery tavalla.
Emme odota sinun tietävän XML HttpRequest.
Mutta hyvä tietää, että se on synonyymi ajatusta Ajax,
Tämän Asynchronous JavaScript hakemalla XML-tai JSON tai mitä tahansa verkon yli.
Mutta alun perin se korreloi XML tai liitetty XML.
>> Selvä.
Katsotaanpa selaa alaspäin. Muistatko mikä ongelma erityisesti Charlotte?
Oliko tällä sivulla, että minä katson täällä? >> [Opiskelija] Joo, luulen niin.
[Hardison] Ah, sain sen. Okei. Joo.
Puhutaanpa tästä todella nopeasti.
Tapa Ajax toimii on sinulla joitakin JavaScript-tiedoston tietokoneeseen,
ja oikeastaan ​​se on käynnissä eräänlainen yhteydessä selaimessasi.
Joten jos opinnäytetyö on tehdä - en tiedä - uusi dating sivusto Harvard ihmisiä
ja haluat dating sivusto on kyky lähettää nimettömiä viestejä
henkilöstä tai anonyymi Facebook seinämäisen viestiä
ja haluat käyttää Ajax, että jotenkin niin, että kun lähettää viestin
se ei päivitä koko sivuston,
oman JavaScript-koodin voisitte perustaa uuden Ajax puhelun.
Olen keskustelemme siitä tai ei tehdä tämän kannettavan tietokoneen.
Tärkeä osa noin Ajax puhelu on, että tällainen asynchronicity siihen
siinä mielessä, että - haluan vaihtaa takaisin minun iPad -
siinä mielessä, että jos minulla on koodi, joka aikoo sanoa tehdä joitakin Ajax,
niin en voi heti seuraavana linja minun JavaScript-koodia
odottaa, että Ajax on suorittanut.
Mitä tapahtuu, on, että koodi toimii peräkkäin JavaScript,
kun teet tämän Ajax puhelun, olet lähinnä forking pois
ja lähettämällä pyynnön ulos Internet jossain palvelimelle tänne,
mikä on tämä jos olen piirtäminen ja selvästikään ole piirtämällä hyvin.
Olet forking pois tämän pyynnön palvelimelle, että vie jonkin aikaa
koska se menee pois Internet ja menee ja lyö että palvelin
ja menee ja pyytää, että PHP-skripti, jonka olet kirjoittanut loppupäätä
todella tallentaa, että nimetön viesti tietokannassa tai jotain sellaista.
Niin, että kestää jonkin aikaa, ja sitten lopulta, kun palvelin on tehty käsittely
Ajax pyynnöstä, se palaa oman JavaScript-koodin,
mutta et todellakaan tiedä, missä, missä vaiheessa toteutus
aiot Tämä vastaus tulee.
Miten tämä hoidetaan JavaScript?
Tämä on, jos se tulee tähän ongelmaan, että me puhumme laptop
jos olet rekisteröitynyt ohjaaja, voit rekisteröityä erityisesti JavaScript-toiminto
kulua siitä, kun Ajax pyyntö on päättynyt.
Et voi vain tehdä Ajax puhelun ja sitten heti seuraavassa koodiriviä
olettaa, että Ajax puhelu on päättynyt.
Osa kauneutta tämän on haluat JavaScript jatkuu
kun se on tehty Ajax puhelun, koska se voi haarautuvat pois tästä erillistä pyyntöä
ja pitää käsittelystä muut asiat.
Sinulla tällaista samanaikaisuuden menossa täällä, jossa JavaScript toimii edelleen
ja pitää tehdä muita hauskoja asioita, voisi jatkaa pyörimistä pois muita Ajax pyyntöjä.
Ajax pyyntöjä vain mennä verkkoon ja sitten tulla takaisin kun he tulevat takaisin,
mutta kun rekisteröidyt tästä käsittelyfunktio,
silloin tiedät, että Ajax puhelu on palannut sillä tämä toiminto saa kutsutaan.
Joten sen sijaan, että tämä vaiheittainen polkuun, että olemme tottuneet C,
olet mitä enemmän samanlainen kuin mitä näimme Scratch alussa lukukauden
jos sinulla on näitä lähetyksiä
ja sitten on näitä "kun vihreä lippu napsautetaan" tai "kun saan tämän tapahtuman."
Se on lähinnä mitä täällä tapahtuu JavaScript näiden Ajax pyyntöjä.
>> Jos vastaus tähän kysymykseen on line 20,
"Yhteydessä Ajax, mitä tämä koodiriviä tehdä?"
voi joku sellainen mukaillen, mitä juuri sanoin vahvistaa ymmärrystä?
[Opiskelija] Olen pahoillani. Mitä vasen puoli se sano?
[Hardison] xhr.onreadystatechange. Anteeksi. Saan katkaista?
Tämä on se XHR syntaksin että emme tarvitse käsitellä.
Sinulla on samanlainen käsite jQuery.
Mennään Source Code, keskiviikkona indeksi.
Katsotaanpa tämän. Selvä. Sain sen.
Tässä on, että Ajax syntaksin puhumme.
Täällä olet täsmennetään Ajax pyynnöstä.
Sanot: "Tämä on URL haluan mennä ulos ja ping."
"Haluan käyttää POST vastakohtana saada."
Ja sitten tietotyyppi on "Haluan JSON palautetaan."
Jälleen XML oli sellainen perinteinen juttu.
Mutta mitä etsimme on juuri se.
Tämä on se täällä.
Tämä toiminto (vaste) on, että onreadystatechange.
Tämä on ohjaaja. Tämä on mitä tulee suorittaa, kun tämä pyyntö tulee takaisin.
Niin huomaat, että tämä toiminto, että Tommy on kirjoittanut täällä
että puhuimme luento keskiviikkona oli kyse luomisesta että hauskaa typeahead meille.
Huomaat, että mitä hän tekee on hän rakentaa Ajax pyynnöstä
ja sitten ei ole mitään, kun Ajax pyynnöstä.
Hän ei käsittele vastaus Ajax pyynnöstä sen jälkeen, kun puhelu soitetaan.
Hän vain tekee sen tässä käsittelyfunktio
joita kutsutaan niin pian kuin vastaus ei tule takaisin.
>> Sam. >> [Opiskelija] Onko Ajax pyyntöjen on oltava tyyppiä POST tai se voi olla saada?
Ne voivat olla joko. >> [Opiskelija] Miten se työtä, jos et ole muuttumassa URL?
Miten se toimi, jos et ole muuttumassa URL?
Se vain riippuu siitä, missä tiedot on menossa.
Joten kysymys on voi Ajax pyyntöjä olla POST tai GET?
Siellä se voi olla joko. Se on vain todella semanttinen ero POST ja GET.
GET tarkoittaa tyypillisesti, että olet juuri lukemassa jotain palvelimelta
ja et ole muuttamatta mitään, kun taas POST tyypillisesti merkitsee
että olet kirjallisesti tietoja tai kirjoitat jotain palvelimelle.
Usein käytät POST kun yrität vaihtaa tilaa jonnekin.
Siksi kirjautuminen aina mennä HTTP POST,
ottaa huomioon, että Google tekee kasan GET pyyntöjä.
Oikeastaan, jos menemme takaisin meidän Googlen esimerkkiä ja jos katsomme meidän kehitystyökaluja täällä,
Katsotaanpa kehitystyökaluja täällä alareunassa ja avata verkkoon.
Kuten me aloittaa kirjoittamisen, voit nähdä kaikki nämä GET tulossa sisään
Näet kaikki nämä GET täällä ruudun alareunassa
jotka ovat kaikki nämä XJS.
Tämä on Ajax pyynnöstä tulossa takaisin.
Ja jos me klikkaa sitä, voimme nähdä, mitä se sanoo ja mitä sen vastaus on.
Se antaa meille kaiken tämän tietoa vastauksen, että saimme
kun lähetimme Google otsikot, jotka olivat täällä.
Katsotaanpa, jos se on - Se on meidän kyselymerkkijono jonnekin.
URL-osoitteen. Joo.
Alkuperäinen kyselyn, sivuuttaa huono kysely, toisessa läpiviennissä, miten mittari -
Joka tapauksessa, jossain täällä Löydät "miten mittari" kyselyn
tehdyn pyynnön palvelimelle.
Ja sitten vastaus tulevat takaisin on mitä me näemme.
Joten kyllä, se voi olla joko GET tai POST.
Se on yleensä vain semanttinen ero. Voimme kattaa että HTTP. Kyllä, Ella?
>> [Opiskelija] Onko eroa JSON ja XML vain, että JSON on modernimpi?
Onko ero JSON ja XML JSON on modernimpi?
XML ja JSON ovat vain 2 eri tapoja koodaus tietoja.
XML on Extensible Markup Language.
HTML on osajoukko XML.
Niinpä esimerkiksi, nyt vedä ylös TextEdit.
XML on juuri määritelty data, joka on suljettu useita tunnisteita.
Joten html, / html, nämä kaverit ovat voimassa tageja.
Katsotaanpa räjäyttää tämän kokoluokan täällä ja sen luettavuuden parantamiseksi.
Hei!
XML vain määrittelee tag olevan jotain tällaista
jos sinulla on avoin kulmasulkeen, nimi tag,
ja sitten minkä tahansa määrän ominaisuuksia, jotka HTML emme useinkaan ole määritteitä.
Mutta esimerkiksi jos meillä olisi komentosarjatunnus, usein se on tekstin tyyppi, JavaScript.
Ja sisältä tunnisteiden tiedot.
Vuonna totta XML voit itse määritellä nämä koodit olla mitä haluat.
Se on vain tapa jäsentää tietosi.
Niinpä esimerkiksi, jos halusin koodata perheeni XML,
Voisin tehdä jotain tällaista, kuten isä ja sitten laittaa tietoa hänestä
ja veli ja laittaa tietoa veljeni.
Juuri tämä tapa jäsentää tietosi on XML.
JSON, toisaalta, seuraa JavaScript Object Notation,
siten J-S-O-N, JSON.
Joten mieluummin kuin kirjoittaa tällaista tag, lähellä tunnistetyyppi muodossa,
me sen sijaan kirjoittaa sen JavaScript olio.
Joten JavaScript olio on kihara ahdin avata asioita
ja sitten kihara ahdin sulkea asioita.
Saanen loitontaa vähän, zoomata sisään
Ja sitten mitä olet ovat Kenttien nimiä, joten "isä":
ja sitten voisin laittaa tietoa hänestä
ja sitten "veli": ja tietoa veljeni.
Ja tietenkin kaikki tässä -
Luulen, mitä on mukavaa noin JSON vastakohtana XML
johtuu JSON esine on tämän esineen merkintätapa että JavaScript on.
JavaScript voi todella helposti vetää, että muistiin ja hoitaa sitä yhtä JavaScript Object
oikea, kun saat sen takaisin palvelimelle.
Ei ole jäsentämiseen, että se todella on tehdä se raskaan tai raskainta,
kun taas XML voit käyttää joko plugins tai jonkinlainen -
Riippuen siitä, mitä olet lähettävät
ja mitä käytät vastaanottamaan XML, voit joutua tekemään hieman enemmän työtä jäsentämiseen,
tämä JavaScript kamaa, jos olet vain kirjallisesti JavaScript
ja joudut vastaanottamaan JavaScript takaisin, se on todella helppo työskennellä.
Toinen asia, että ihmiset myös mainita joskus
on, että XML sinulla on kaikki nämä avoimet koodit ja lähellä tunnisteet,
joten se voi saada iso, se voi saada hieman paisunut.
Joten joitakin jotka kertovat, miten JSON
sinulla ei ole kaikki nämä avoimet koodit ja lähellä tunnisteet, joten se on enemmän pakattuja.
Syystä, että se on tärkeää, että kun täytyy ladata asioita verkon kautta
kun puhut etäpalvelimeen,
vähemmän, joka on siirtää Internetin, nopeammin kaikki menee.
Joka tapauksessa, avain takeaway tässä ne ovat vain 2 eri tapoja jäsentää tietosi,
alustus tietosi.
>> Selvä.
Muita kysymyksiä? Charlotte?
[Opiskelija] Saanko kysyä 1 viimeinen kysymys syntaksi Ajax? >> Toki.
[Opiskelija] Jos menet takaisin esimerkki koodin ja vain loitontaa vähän,
siellä on vain 1 rivi koodia edellä.
Voisimmeko mennä ylös?
päälle ("keyup", function ()
On, että joukko tyhjiä jälkeen suluissa on ("keyup" viittaa toiminnon jälkeen menestys?
[Hardison] No
Pari asiaa täällä.
päälle ("keyup", tämä on tapa tehdä vastaavan Scratch
milloin painetaan ja nostat ylös pois-näppäintä.
Oikeastaan ​​JavaScript sinulla on ("keydown" puolesta ("keyup", ja ("keypress"
ja voit tehdä asioita kunakin näistä 3 eri tapahtumissa.
Tämä on rekisteröitymättä tapahtumankäsittelijänä tahansa näppäintä nousee,
ja sitten tämä toiminto on tämä koko juttu
kaikki alas sinne.
Tämä toiminto ei ole nimeä.
Oudolta.
Kaikkia toimintojamme olemme tehneet C ja PHP kaikki saaneet nimet.
Tämä on mitä me kutsumme Nimetön toiminto. Järkevää, eikö? No name. Anonymous.
Mikä on kätevä noin Nimetön toiminto?
On selvää, emme voi kutsua tätä toimintoa missään muualla meidän koodi.
Miten me kutsumme tätä toimintoa muualla meidän koodi? Emme voi.
Ei ole nimeä. En voi sanoa, "Ai joo, soittaa, että toiminto, sanoin siitä ('keyup'."
Mikä on kätevä siitä kuitenkin on, että JavaScript
kun olemme jatkuvasti rekisteröitymättä nämä tapahtumankäsittelijät -
sitähän tämä on nimeltään, olet rekisteröitymättä tätä toimintoa käsittelijä, kun avain tulee esiin -
on se todella mukava pystyä vain määritellä nämä toiminnot sellaista Inline ja vain sanoa,
"Kun keyup painetaan, muistakaa tämä toiminto, aion määritellä täällä,
ja se muistaa toimintoa ja sitten se tekee tämän toiminnon
kun avain tulee esiin.
Puhumme tästä enemmän, kun saat enemmän toiminnallisiksi ohjelmointia.
Tämä on hieman maku, että jos olemme pohjimmiltaan kulkee toiminto ympärillä
objektina, ikään kuin se olisi kuin muuttuja.
Sen sijaan kulkee merkkijono tai int, jossa olemme toiminto.
Sellainen outo juttu, mutta mitä mukavaa on, että kaikki muuttujat täällä,
sisällä tätä toimintoa, rajausmenettelyn kysymykset ovat mukavia
koska jos sinulla on vaihteleva täällä, voit viitata muuttujan sisällä tätä toimintoa
sillä tämä toiminto on julistettu sisällä tämän toisen toiminnon.
Joten saat olla etuja, kuten että.
Kerran, että on jotain, joka on enemmän meta. Sinun peitä se tulevaisuudessa luokissa.
>> Joo. >> [Opiskelija] Koska toiminto on anonyymi, sitä voi käyttää jossain muualla?
Vai voiko sitä käyttää vain osana tätä toimintoa?
[Hardison] Sitä käytetään ainoastaan ​​yhteydessä tätä toimintoa. Joo. Kyllä?
>> Onko sillä jotain tekemistä sen kanssa, että se on olio-ohjelmointikieli?
[Hardison] Onko sillä jotain tekemistä sen kanssa, että se on olio-?
Sanoisin, että tämä on enemmän tekemistä sen kanssa, että tämä on toiminnalliset näkökohdat.
Puhumme olio-paradigman ohjelmointi,
ja tämä on tavallaan yksi niistä näkökohdista toiminnallinen paradigma ohjelmointi
jos teet toimintoja, jotka koostuvat muiden toimintojen
ja olet ohimennen toimintojen ympärille.
>> [Opiskelija] Joten JavaScript on funktio kieli myös.
Se on sen elementin, kyllä. Joo.
JavaScript ja monet -
PHP on joitakin tämäkin Python on tämä samanlaista tavaraa,
Ruby on tällainen juttuja kuin hyvin, ja tämä on yleinen enemmän näitä moderneja kieliä.
Olet todella saada nämä ohjelmointikieliä, jotka ovat eräänlainen jokapaikanhöylä.
Se on kuin iso rasva Sveitsin armeijan veitsi, joka ei voi edes laittaa taskuun
koska se on liian laaja.
Sellainen, miten jotkut näistä kielistä on tullut.
>> Muita kysymyksiä? Selvä.
Miten te tunne?
Mennään takaisin siihen tietokilpailu todella nopea ja katso jos voimme vastata 21 ja 20.
Puhuimme 20 kun me rekisteröinyt tämän handler.
Tämä kysymys, "Mikä olisi vaikutusta, jos me kirjoitti, että linjassa pari suluissa?"
näet eron, kuinka ylös yläosassa ei ole suluissa
ja täällä on sulkeissa funktion nimi?
Yksi asia, että on tärkeää huomata,
täällä olemme viitaten toiminto.
Tämä ei ole anonyymi toimintoa. Se on annettu nimi, ohjaaja,
kun taas meidän Ajax täällä, että olimme vain katsomalla,
kaikki toiminnot, jotka olimme kulkee ympäri olivat kaikki Anonyymi: Ei funktion nimi,
ei toimintoa nimi.
Joten se on yleinen käytäntö on määrittää nämä toiminnot sellaista Inline nimettöminä toiminnot
joidenkin rajausmenettelyjen etuja.
Voisit hyvin voinut määritelty tätä toimintoa täällä tai tämä ('keyup toimintoa.
Olisit voinut määritelty tämä kaveri kuin toimintoja nimiä muualla JavaScript-koodin,
ja sitten sen sijaan määritellä toiminnon täällä, voisitte siirtää funktion nimi
oikeus tällä paikalla.
Yksi asia huomata on, että et halua käyttää suluissa
jos olisit ohimennen funktion nimi,
koska kun käytät suluissa, olet viitteellä "kutsua tätä toimintoa,"
katsoo sen sijaan täällä me vain haluamme siirtää toiminnon nimi.
Jos katsomme, mitä täällä tapahtuu, suuri ero on, että tämä ylimmällä rivillä koodia sanoo
tehokkaasti, ylläpitää osoitin toiminto nimeltään ohjaaja,
ja kun Ajax puhelun valmis asettamaan tätä toimintoa,
tosiasiallisesti suorittaa toiminnon, kytke väitteitä, tehdä kaikkea tätä työtä,
tämä rivi tänne sanoo säilyttämisen sijasta osoittimen
on toiminto nimeltä ohjaaja, tällä onreadystatechange alalla
aikoo järjestää tuloksen toiminto nimeltään ohjaajalle,
joten se tulee arvioida käsittelijä, se tulee todella soittaa handler juuri nyt -
ei kun Ajax puhelun yllä, mutta juuri nyt,
joka ei ole mitä haluat tehdä, jos olet kirjoittamassa jotain
käsitellä Ajax puhelun, joka on valmistunut.
>> Selvä. Kysymyksiä siitä? Se on hiuksenhieno ero.
Se on hiuksenhieno ero.
Yksi asia, jonka haluan ehdottomasti ehdottaa tekee, jos et ole tehnyt sitä -
koska tämä on uutta tavaraa, se kestää hetken aikaa se todella uppoavat
ellet todella kirjoitat joitakin tämän tavaraa ulos -
Olen sinun kannattaa käydä läpi lähdekoodia
että Tommy esitetty luento keskiviikkona
koska hän varmasti meni läpi paljon tavaraa, tavallaan hämärtää.
Olin itse kokeilla kirjoittaa sitä.
Kokeile koodaus joitakin juttuja ylös.
Tee. Js-tiedoston. Kirjoita ulos koodin itse. Älä kopioi ja liitä.
Älä vain ajaa CP.
Turha yrittää vain sellainen flex JavaScript lihas.
Katso, mitä asiat ovat.
Esimerkiksi tässä Etsin quote7.js vuonna lähdekoodin keskiviikon luento.
Kokeile menossa ja eikä vain tehdä kaikki nämä toiminnot nimettömänä,
Kopioi tämä koodi, kirjaimellisesti mene alas tämän menestyksen koodin,
Kopioi tämä, liitä se toisen toiminnon, ja antaa sille nimi,
ja yritä sitten kulkee nimi ja katso mitä tapahtuu.
[Opiskelija] Voisiko se olla erilliseen tiedostoon tai saman tiedoston?
Se voisi olla erillinen tiedosto, jos oikein kuuluu se.
Yksi asia, joka tulee olemaan -
Temppu on tämä toiminto viitata johonkin muuttujat, jotka ovat sen ulkopuolella?
Ja mielestäni se vain viittaa vastausta.
Joo.
Voit nimetä tätä.
Voit vetää sen pois, voit antaa sille nimi, ja sitten voit siirtää nimen täällä.
Joten Antaisin että kokeilla, miten se toimii.
>> Selvä. Kysymyksiä? Kysymyksiä? Rakastan kysymyksiä.
En tiedä teistä, mutta pidän niistä.
Miten te tunne tästä?
Siellä on tavallaan tämän "Voi paska" tunnelma huoneessa. [Opiskelijat hihittää]
On sellainen, miten te tunnette? >> [Opiskelija] Joo. >> Niin? Kyllä, Daniel?
>> [Opiskelija] Luulen ymmärtäväni sellaista yleistä käsitteitä, jotka puhut,
kuten anonyymi toiminnot ja kaikki jutut,
mutta en ymmärrä puoli syntaksin se tuonne ylös,
Kuten mitä ul keinoin, li, nämä eri tunnisteita.
En usko, että olisin voinut koodaamaan jotain JavaScript. >> Fair.
Onko se yhteinen tunne, yhteinen tunne, se kuulostaa? Okei.
[Opiskelija] Tuleeko meidän? >> Onko meidän täytyy koodata?
Sinun tulisi olla valmis leikellä jotain tällaista, sanoisin.
En ole yksi kirjallisesti tentti,
mutta haluan ehdottomasti sanoa, että jos tämä on yhteinen tunne,
sellainen, että paljon tätä syntaksin täällä näyttää, "Mitä helvettiä?"
"Olen täysin uinti", niin puhutaanpa siitä ja korjata sen.
Kuulostaako hyvältä?
Selvä.
>> Joten mitä täällä tapahtuu? Otetaanpa tämä rivi riviltä.
Kokeillaan menee ympäri huonetta.
Olen juuri menossa kutsua ihmisiä 1 1, ja antaa minulle paras arvaus.
Teemme sen nopeasti. Sinulla 5 sekuntia aikaa vastata.
Jos et vastaa, siirrymme seuraavalle henkilölle.
Ja se ei ole iso juttu, koska tiedän, tämä on hullua kamaa.
Aloitamme täällä. Charlotte, mitä tämä linja tehdä?
[Opiskelija] Se luo muuttuja nimeltä ehdotuksia
ja asettamalla se sama mitä ul on. >> [Hardison] Oikea.
>> Jimmy, mikä on UL?
[Opiskelija] En tiedä. >> [Hardison] Okei, viileä. Charlotte oli täysin oikeassa.
Tämä rivi koodia, että olen korostanut täällä julistaa muuttuja nimeltä ehdotuksia,
JavaScript muuttuja.
Meillä tätä var avainsanan edessä joka varmistaa, että muuttuja pysyy paikallisen
soveltamisalaan, että se on sisään
Ja tämä ul asia, että emme ole ennen nähneet oikeastaan,
Katsotaan, jos siellä on hyvä - Haluan siirtyä takaisin minun iPad.
Uusi sivu.
Olen varma, että te olette nähneet ul ennen.
Se Järjestämätön lista.
Joten oletko koskaan nähnyt web-sivu, jossa on luoteja
ja sinulla on Thing 1, Thing 2, ja niin edelleen ja niin edelleen?
Tämä on Järjestämätön lista.
Tavalla kuin koodata tätä HTML on sinun aloittaa avoin tag
joka avaa Järjestämätön lista, olisit sulkea sen lähellä tunniste, joka sulkee Järjestämätön lista,
ja sitten keskeltä sinun täytyy luettelokohteiden, li.
Ja sisällä li n olisi näytettävä teksti, joten Thing 1 ja Thing 2.
Sitten olisimme suljemme luettelokohde tageja.
Järjestämättömiä luettelot ovat erittäin yleistä, koska se on hyvä tapa saada sama tyyli
sovelletaan rivi asioita.
Joten jos tarkastellaan esimerkiksi PSET 7 koodia,
paljon nav pillereitä, navigointi pillereitä, joita käytettiin eri linkkien
ostaa, myydä, Quote, historian, kaikki tämä, nämä on toteutettu järjestämättömiä listoja,
ja ne käytetään CSS poistaa nämä bullet pistettä
ja laji muuttaa asioita ympärillä hieman.
Sellainen voima CSS on, että HTML kuvailee rakennetta.
Meillä lista luettelokohteiden.
Se on järjestämättömiä. Ei ole ensimmäinen, toinen tai kolmas. Se on vain lista.
Ja niin oletuksena se vetää se vain luoteja.
Jos sen sijaan oli kirjoittanut oli, joten aion vaihtaa tämän ol lista
toisin kuin ul, mitä se tekee?
Näin päästäisiin eroon näistä luoteja, ja oletuksena mielestä olisi numeroitu lista
koska nyt meillä tilaus.
Muotoilu Lista on sen jälkeen mitä leikkiä CSS,
ja se jos ihmiset, jotka kirjoittivat Bootstrap kirjaston CSS pelannut
kanssa muotoilu Järjestämätön lista saada se näyttää ne mukava pikku nav pillereitä.
Jos katsomme Google, esimerkiksi katsotaanpa katsomaan tämä kaveri.
Takaisin "miten mittari äitisi" - kuulostaa saksalaista.
Rakastan saksa. Se kuulostaa niin hauskaa.
Olen pahoillani, onko Saksan ihmisiä katsomassa kuka tuntevat loukkaantunut.
Joka tapauksessa, jos katsomme näitä linkkejä täällä yläosassa
ja katsomme, mitä siellä tapahtuu, voimme tarkastaa sen avulla tämä kaveri.
Olen alas täällä nurkassa.
Kehitystyökaluja Chrome on mahtava.
Jos te alkaa leikkiä sen kanssa tai etsiä tutorials, se auttaa paljon
jos teet web-urakointiin.
Napsautan pikku tarkastaja. Aion vierittää takaisin tänne.
Aion nähdä, mitä kaikki nämä kaverit ovat.
Olen zoomata aion napsauttavat näitä.
Sitten voin zoomata takaisin ulos ja nähdä, mitä se todellisuudessa on HTML alas tänne.
Näyttää siltä, ​​Google on sisäkkäisiä sitä järjestetty lista.
Joten meillä tämä span, jossa lukee + Sinä, ja joka on sisäkkäin ankkuri tag,
joten se tekee siitä klikattava ja se kytketään se minun Google+-sivun.
Se on sisäkkäin luettelokohde,
ja se on sisäkkäin tämän järjestetty lista.
Ja nyt jos olen itse napsauta luettelon kohtaan, se tuo esiin sen minulle siellä.
Jos Korostan Järjestämätön lista, näet kuinka painopiste menee yläreunassa.
Se siirtää ylös ja näyttää minulle koko järjestetty lista.
Joten Google on juuri pelannut styling saada nämä luettelot näy niin.
Se riittää hauskaa listojen kanssa. Takaisin tietokilpailuun tai tätä kamaa.
Nyt tiedämme, mitä Järjestämätön lista on - toivottavasti.
>> Puhutaanpa tästä seuraavan rivin koodi, (var i response.symbols). Ella.
[Opiskelija] Minulla ei ole aavistustakaan. >> [Hardison] Ei aavistustakaan.
Okei. Olet nähnyt silmukka ennen, oletan. >> [Opiskelija] Joo.
[Hardison] Muistatko tekee kunkin PHP? >> [Opiskelija] Kyllä.
[Hardison] Tämä on juuri sitä.
Tämä on jokaisen silmukan JavaScript.
Tämä on lyhyempi tapa kuin tehdä varten (var i = 0; i <response.symbols.length; i + +),
jonka voisimme tehdä,
mutta tämä on enemmän ytimekkäästi kirjoittamisesta.
Yksi asia on varottava JavaScript on, että tämä ei välttämättä seuraa järjestyksessä.
Jos response.symbols on oletettavasti array,
var i on indeksi tähän array, mutta se ei välttämättä ole 0, ja sen jälkeen 1
ja sitten 2 ja sitten 3.
He eivät sano käyttöä varten (var i = 0) jos välität tilaus.
Oletan toinen asia huomata on, että kun käytimme kunkin PHP,
tarkensimme array nimi ensin ja sitten meillä oli niin avainsanan
ja sitten me määritetyn arvon, että halusimme hakea array.
Tai voisimme määrätä sekä avain ja arvo, että halusimme hakea array.
Täällä me vain saada indeksiin.
Emme saada todellinen itse elementin.
Niin näet, että kun menemme tänne olemme todella ottaa hakea nnen elementin
ulos response.symbols vastustaa.
Toinen asia, joka on hulluna tähän on, voit käyttää tätä silmukan yli esineitä JavaScript
ja hakea jokainen ominaisuuksia, että kohteen 1 1.
Jos menisimme takaisin, että JavaScript Object Notation kuvaus perheeni
missä se oli kirjaimellisesti nämä aaltosulkeita ja isä, veli, äiti, kaikki,
voit käyttää silmukan kerrata yli, että sekä
ja hakea ominaisuudet 1 1.
Hullulta.
Joten mitä teemme, se näyttää, on me rakentaa HTML merkkijono
aivan kuten tämä kommentti sanoo, "rakentaa html merkkijono listan ehdotuksia."
Aiomme aloittaa meidän avoin tag meidän Järjestämätön lista
jossa oletamme aiomme tallentaa kaikki ehdotukset luettelona kohdetta.
Sitten aiomme lenkki kaikki symbolit vastaus
koska muistaa tämä on typeahead varten CS50 Finance,
joten olemme jättäytyneet pois osakesymboleja 1 1.
Ja sitten me lisäämällä ehdotuksemme string mitä?
>> Jared, mitä tämä näyttää?
[Opiskelija] Tuntuu siltä se tarttumalla jonkinlaisesta tietokannasta
mitä kirjain kirjoittaessasi,
jättäen jonkinlainen ehdotus, mitä sana - >> [Hardison] Joo.
Ajax pyynnöstä jo itse ei mennä ja napata että. Tämä on meidän vastauksemme.
Tämä on itse asiassa sen jälkeen, kun olemme saaneet vastetta tietokannasta, palvelimesta.
>> Ja niin mitä tämä on? Mitä tämä yksi tarjous juttu tarkoittavat?
[Opiskelija] heittomerkki? >> [Hardison] Joo. Se on vain merkkijono, eikö?
Ja niin mitä tämä on askartelu?
Se on merkkijono ja me laitamme tavaraa merkkijono. Ja mitä on merkkijono näköisenä?
[Opiskelija] Vain ehdotus, että Me olemme - >> [Hardison] Joo, aivan.
Se on ehdotus sisäkkäin ankkuri tag,
ja se on myös ankkuroitu sisällä luettelokohde niin, että se menee luettelosta.
Kirjaimellisesti, kaikki teemme täällä on me vain rakentaa ison HTML merkkijono.
Me vain rakentaa sitä kirjaimellisesti merkkijono muistiin.
Emme tee mitään fancy.
Emme uusia solmuja DOM tai mitään sellaista.
Me kirjaimellisesti vain rakentaa merkkijono kuin olisit kirjoittaa ulos, esimerkiksi
iPadissa kuten minä - jos teillä on iPad ja kuten kirjoittaa HTML iPadissa -
olet vain kirjallisesti iso pitkä merkkijono, joka on kuin ul, li, ...
ja sitten me tietysti menossa irtisanoa tämän ul.
Niin, että kaikki olemme pääsemässä on 1 iso, massiivinen jono.
Ja sisälle on lisätty li ja kullekin symboleja, jotka löysimme.
>> Ja nyt jatkaen, mitä tämä linja tehdä, Stella, täällä?
Mitä tämä linja tehdä täällä?
[Äänetön opiskelija vastausta]
[Hardison] Joo. Se on vain lisäämällä tämä kaveri.
Olemme juuri päättyneen listallamme. Täsmälleen.
>> Ja sitten tämä lopullinen linja - ja tämä näyttää ikään Hessu -
Olen pahoillani. En tiedä nimeäsi punainen collegepaita. Tiedätkö mitä tämä tekee?
Vai aiotko päättää mitään?
Ja sinä? >> [Opiskelija] Se kehottaa jQuery sitä, mutta en tarkalleen tiedä, mikä toimiakseen se on.
[Hardison] Joo. Se kehottaa jQuery.
Entä täällä ketään yli vasemmalla puolella minua?
Tiedätkö mitä tämä linja ei? Mitä se tuntua se tekee, jos pitäisi arvata?
[Opiskelija] alistumisen HTML ehdotusluettelon, vai onko se -
Joo. Mitä tarkoitat toimittamalla?
[Opiskelija] sanovat HTML mitä me juuri käsitelty JavaScript
on nyt ehdottomasti vain HTML. >> [Hardison] Joo.
Se on hyvä alku.
Katsotaanpa leikellä tätä hieman enemmän.
Juuri tämä osa tekee täällä.
[Opiskelija] Mikä osa siitä tekee selväksi, että se on jQuery?
[Hardison] jQuery on tällä dollarin merkki kaveri.
Aina olet kirjoittamassa jQuery, näet tämän dollarin merkki koko paikka.
Tämä on juuri käytetty jQuery eräänlaisena erityinen tunnusmerkki.
Se tekee koko joukko asioita.
Osana tätä täällä, tämä osa linja, se on valitsin.
Se on jQuery valitsin, ja se on valita HTML-elementti
, joka on tunnus ehdotuksia.
Muistatko, kuinka HTML-elementtejä voi olla, että tunnus-määritteen
jossa voit olla kohta tunniste, joka on tunnus ehdotuksia?
Tämä jQuery valitsin napata että elementti
koska tämä elementti on olemassa jossain muistissa.
JavaScript pystyy tavallaan paikantaa että elementin ja sanoa,
"Selvä, olet kohta, jossa on tämä tunnus"
ja sitten tämä. html sanoo: "Okei, korvata nykyinen HTML sisääsi
"Tämä uusi merkkijono, tämä uusi HTML että aion antaa teille."
Joten jos katsomme taaksepäin at iPad - ha, ha, minä muistin vaihtaa tällä kertaa -
Oletko usein lisättävän asioita, kuten divs, joten kuvitella meillä oli div joka oli id ​​= "ehdotuksia";
Aiomme sulkea div tag tänne.
Kun käytämme jQuery valitsin napata osa DOM
joka on tunnus ehdotuksia, se kirjaimellisesti valitsee tämän koko div täällä,
ja sitten HTML menetelmä sanoo: "Korvaa kaikki tämän juttuja täällä
"Oikeassa, että ul, että Järjestämätön lista, että me vain rakennettu."
Kirjaimellisesti, jos olit näyttämässä koko HTML-tiedoston merkkijono muistiin,
te vain sanoa: "Menkää että paikalla ja jysäyttää että ul tavaraa,"
ja sitten päivittää sivu, jotta voit nyt nähdä Järjestämätön lista siellä.
Joten mitä tämä on tosiasiallisesti tehnyt, on se päivitetään dynaamisesti tämän div.
Koodi, joka me vain näki kannettava tietokone on päivitetty tämän div
pitää uusia ehdotuksia, jotka haettiin palvelimen jonnekin.
[Opiskelija] Mitä ehdotuksia edustaa uutta ehdotuksia ja vanhan ehdotuksia?
Uusia ehdotuksia ja vanhoja ehdotuksia.
[Opiskelija] Mitä tarkoittaa kumpi on vaihtumassa ja kumpi tekee korvaa?
[Hardison] Sain sen.
Katso täällä, tämä kaveri on merkkijono.
Tämä määrittää ID elementti - me kutsumme sitä DOM -
joka kirjaimellisesti tarkoittaa vain joitakin HTML-elementti, joka on jossain näytössä
www-sivulla.
Jos me tarkastelemme tätä, jos menemme takaisin meidän Googlen sivulle,
näemme kaikki nämä divs ja nämä ol ja näiden li ja nämä on.
Nämä kaikki ovat HTML-elementit, jotka tällä hetkellä muodostavat tällä sivulla.
Nämä kaikki korreloivat yksittäisille elementtejä sivulla.
Ja jos olisimme muuttaa tätä, voisitte katsella DOM muutos,
ja voit nähdä tällaista siirtymässä.
Joten jos olisimme kirjoittaa Harvard, näkisitte DOM alkavat muuttua
ja listaelementit alkaa muuttua täällä.
Se on oikeastaan ​​mitä tapahtuu.
>> Katsotaan jos voimme löytää joitakin tämän juttuja tänne.
Katsotaanpa tätä linkkiä. Katsotaanpa tätä Harvardin linkki, ja me katsella sitä muuttaa.
Voimme nähdä, että olen valinnut tämän, se vastaa tämän DIV täällä,
joka on myös osa listaelementin, joka on aivan toiseen listaan ​​elementti,
joka on osa Järjestämätön lista täällä.
Nyt mitä tapahtuu, jos me etsiä meidän vähemmän koulun hieman alas etelään?
Se muuttuu nyt.
Joten menetimme kahvaa että div ja että listaelementin
koska nyt meillä on erilaisia ​​elementtejä meidän DOM,
eri listaelementit, eri lista kohteita, eripituisia, kaikki tämä.
Joten tämä HTML-asiakirjaa päivitetään dynaamisesti.
Vanhat osat ovat poistettu, uudet elementit ovat lisätään.
Tänne me vain täsmennetään tämä elementti, joka oletettavasti on vakaa
koko meidän typeahead päivitys,
koska muuten jos jQuery ei löydä elementti, joka on tunnus ehdotuksia,
se tulee vain kaatua tässä vaiheessa.
Ja sitten me päivittää sen sisäinen HTML.
Joten se on näiden lista kohteita, nämä ankkuri tunnisteita, jotka jatkuvasti päivittää ja virkistää kirjoittaessasi.
Tarkoittaako tämä tehdä parempaa työtä? >> [Opiskelija] Se auttaa paljon. >> [Hardison] Okei.
Syntaksin että näet paljon - tietää, mitä tämä kaveri tekee.
Tiedä jQuery valitsin.
Tämä jQuery valitsin hash tag edessä merkitsee tunnus.
Tämä kaveri sanoo: "Anna minulle elementti, joka on tunnus ehdotuksia."
Tämä kaveri tänne myös sanoo, "Anna minulle, että sama elementti tunnus ehdotuksia."
Tämä kaveri alapuolella on hieman monimutkaisempi.
Tämä sanoo, "Anna minulle elementin ID form-lainaus,
"Mutta sitten mennä sisälle, että muoto ja löytää lapsi" -
joten tätä tilaa täällä merkitsee, että me aiomme alielementti, elementtitasoa.
"Etsi lomake, jossa on tämä tunnus ja sitten löytää tulo sisältä että muoto, jonka nimi on symboli."
Tämä on ehdottomasti Tommyn luentokalvot, näitä erilaisia ​​jQuery valitsimia.
Sinun pitäisi tietää, millaisia ​​elementtejä nämä noutamista.
Esimerkiksi, katsotaanpa siirtyä takaisin iPad todella nopeasti.
Jos meillä olisi lomakkeen elementti id = "form-lainaus" -
tietenkin, että puuttuu method = POST tai method = GET ja toiminta attribuutteja sekä
että sinun pitäisi olla lomakkeita, mutta vain tässä esimerkissä lomakkeen, kuten tiedätte, on tulot
ja että koodi, joka me vain näki saisi syöttöosassa
että oli name = "symboli".
Tämä on tärkeää, kun yrität täyttää eri alojen sisällä lomakkeen.
Näin auto-täyttö toimii.
>> Kyllä, Ella?
[Opiskelija] Mitä eroa tunnus ja luokka? >> ID ja luokka? Joo.
Luokka käytetään muotoilu tarkoituksiin.
ID käytetään sitä miltä se kuulostaakin: yksilöi erityinen tekijä.
Joten sisällä HTML-sivun, sinulla voi olla vain 1 elementti erityisesti tunnus.
On vain 1 lomake ID form-lainaus.
Kuitenkin NAV pillereitä luokkaan tai NAV luokka oli luultavasti jotain, että käytit
mahdollisesti tai näki yhteydessä oman Harjoitus 7 koodia.
Luokka käytetään soveltaa erityisesti Muotoillaksesi joukko erilaisia ​​elementtejä.
Esimerkiksi vanhaan HTML ennen oli tyylisivut,
ennen oli CSS, nämä CSS,
jos halusi keskittää kappaleen tai keskittää tekstin div,
sinun on div ja sitten sinun on jotain text-align = "center"
samankaltaisina määrite omassa div.
Tämä ei ole hyvä.
Syystä ihmiset eivät pidä tästä, koska silloin kun halusi päivittää
miten asiat näytetään sivustossasi, sinun piti kirjaimellisesti mennä jokaisella sivulla
ja jokainen HTML-tiedosto ja mennä muuttaa kaikki stylings kaikista eri elementtejä,
ja se oli valtava kipua, koska usein halusi olla nippu divs
jotka kaikki keskustan linjassa tai sovi tietyllä tavalla.
Niinpä ratkaisu, joka oli luokkaa.
Nyt meillä on div, jossa meillä on luokkatarkennetulle olla mitä haluat kutsua sitä.
Voisit kutsua sitä "keskellä" ja sulje div jonnekin tänne
ja sinulla on kaikki hauskaa siellä.
Ja sitten jossain tyylisivuusi voisitte määrittää tietyn muotoilu
jota sovellettaisiin tähän luokkaan.
Tämä ei tarvitse olla ainoa div, joka oli keskittynyt.
Voisit olla muita divs että oli myös keskitettyä tekstiä.
>> Kyllä, Charlotte? >> [Opiskelija] Palataan lainaus, mitä piste tarkoittaa?
Mikä on piste? >> [Opiskelija] Joo.
Takaisin kannettava tietokone, sinun tarkoittaa? >> [Opiskelija] Joo. >> Okei.
[Opiskelija] Esimerkiksi tämä linja ei se tarkoita sitä, etteikö tämä muuttuja nimeltä Val
sisällä muodossa? >> Joo.
Dot merkintä JavaScript ei pari asiaa.
Tässä tapauksessa soitat funktio, jonka nimi on val.
Se tapa.
Tämä on, jos pääsemme olio-kamaa, että puhuimme, Sam.
Tämä on, jos esine - tässä tapauksessa input-elementti - on funktio tai menetelmä nimeltä val
että pohjimmiltaan sanoo, "Hei, aseta arvo on tämä asia."
Kuvittele, että tämän sijasta kapulakieli meillä oli kirjoittanut numeron 7 tai merkkijono 7.
Joka muuttaisi arvo tämän tuloyksikön olevan 7.
[Opiskelija] tulo elementti on kaiken edessä piste?
[Hardison] input-elementti, tarkalleen, on elementtinä HTML,
sisällä DOM, joka vastaa tämän kyselyn.
[Opiskelija] Joten se on input-elementti. Toiminto ja sitten mitä tämän arvon pitäisi olla.
[Hardison] Aivan. >> [Opiskelija] Okei.
Ja voit myös käyttää tätä pääsy ominaisuuksia.
Joten jos katsomme taaksepäin ylös koodin että olimme kävely läpi rivi riviltä
jossa meillä on response.symbols [i]. nimen,
emme vaatii toimia täällä.
Ei ole suluissa.
Yksi asia sinun pitäisi vain pitää mielessä, kun rip läpi tätä koodia,
kun näet suluissa, joka tarkoittaa funktiokutsuna.
Toiminto on nimeltään,
ja nimi, joka tehtävä on mitä edeltää näiden suluissa.
Joten tässä tapauksessa alhaalla, se on val. Tässä tapauksessa täällä se on html.
Tässä tapauksessa täällä funktion nimi on kirjaimellisesti $,
ja me vain tiedämme, että tämä on jQuery valitsin,
Se on tehtävä, joka on valita mitä tämä kaveri on.
Ja sitten kun et näe suluissa, kuten tässä tai täällä,
mitä olet päästä sijaan on kohteen ominaisuuden.
Tämä on kuin käyttämällä array merkintää.
Se on vaihtoehto käyttää array merkintää.
Se on vain pika.
Olemme siis päästä symbolit alalla vasteen esineen.
>> Olemme tehneet paljon Ajax, DOM, joitakin HTML, ei paljon CSS.
Te haluatte viettää viimeisen 15 minuuttia tai niin tästä?
Kai me todella sait noin 10 minuuttia ennen meidän on aloitettava käärimistä.
Vai pitäisikö meidän mennä takaisin ja puhua joistakin muista asioista listallamme?
Katsotaanpa.
Jos menemme takaisin alkuun, meidän siirtyä minun iPad uudelleen niin te voi nähdä tämän,
olemme tehneet paljon Ajax, olemme tehneet joitakin jQuery,
olemme tehneet joitakin JSON, olemme tehneet joitakin XML, olemme tehneet joitakin DOM,
olemme tehneet joitakin - Ehei, ei HTTP. Raapia.
Ei paljon sijaa. Olemme tavallaan puhuneet CSS - Ei oikeastaan.
Onko teillä tuntuu hyvältä Ajax? Haluatko viettää enemmän aikaa Ajax?
Kättä. Okei.
DOM? Joku haluaa viettää enemmän aikaa DOM?
Helpoin tapa todella saada tuntea, mitä tapahtuu ja DOM -
puhutaan DOM ja heittää noin, "Oh, DOM tämä, DOM, että."
Todella DOM on vain tapa kaikki nämä HTML-elementtien säilyvät muistissa.
ja se on vain selittää - sitähän se on.
Se on rakenteeltaan kuin puu, ja voit käyttää yksittäisiä HTML-elementtejä
kanssa jQuery valitsin, että dollarin merkki juttu.
Voit käsitellä asioita. Voit lisätä elementtejä DOM.
Voit lisätä uusi kohta elementin DOM,
voit ottaa pois div elementin DOM jos haluat.
Sitä se on. Se on vain eräänlainen muistoksi edustus HTML-tiedoston.
Se voidaan manipuloida ja kulki.
Entä jQuery ja että valitsin? Kyllä, Sam?
>> [Opiskelija] Tarkoittaako tämä, että DOM sisältää kaikki CSS ja JavaScript?
[Hardison] DOM sisältää ne solmut, kyllä.
[Opiskelija] Se sisältää HTML nämä muut ylimääräiset asiakirjat tuotos?
Jos JavaScript muuttaa HTML kuin se teki tässä Google -
oho, anteeksi, en palaa tähän.
Muista miten JavaScript olisi muuttaa luetteloa Googlen tulos?
Jos JavaScript muuttaa, niin sitten nämä uuden luettelon tekijät ovat nyt osa DOM.
Ne ruiskutetaan DOM.
Ja käy ilmi, että skriptit ja tyylisivut itse
ovat todellakin osa DOM.
Näet täällä, että meillä nämä käsikirjoituksen solmut ja nämä tyyliin solmut.
JavaScript voi lisätä ja poistaa näitä liikaa.
Siksi se on niin paha olla haitallisen JavaScript sivusi
on, että se voi nyt aloittaa tuomalla muita JavaScript muista paikoista.
Joten voit aloittaa vain 1 JavaScript-tiedoston,
mutta sitten se voi alkaa vetää muissa JavaScript-tiedostot.
Voit käyttää Ajax ladata JavaScript ja dynaamisesti on uusi JavaScript
käynnissä Web-sivulla.
Joten se on todella voimakas asia, että meidän selaimet pystyvät eräänlainen jatkuvasti uudelleen tehdä
ja uudelleen sopeutua mitä ollaan tekemässä JavaScript.
>> [Opiskelija] Ne tyyli tunnisteet sisältyvät CSS?
Katsotaanpa sitä. Joo.
Tämä CSS jälleen voit nähdä, missä jQuery sai valitsin alkaen.
Meillä tämä # gb joka sanoi: "Tämä tyyli koskee elementti tunnus gb."
"Elementti ID gb joutuu tämän koko Tekstin tällä fonttiperheen,
"Sans-serif; korkeus."
>> Okei.
Takaisin iPad.
Entä tietorakenteita - yrittää, linkitetyt?
Te haluatte tehdä nopea kertaus, vai te olette tunne -
Niin? Nay? Kuka haluaa tietorakenteita? Nosta kätesi.
Joka vihaa tietorakenteita? >> [Opiskelija] Haluan vain yrittää. >> Haluat vain yrittää.
Okei.
Onko kukaan halua yrittää? Ovatko kaikki kuten, "Vihaan yrittää. Tein sen. Yritin sitä."
[Opiskelija] Haluan vain tietää omega ja iso O.
Okei. Voimme varmasti mennä yli siitä.
Kuulostaako jotain, että haluamme tehdä ryhmänä? Kyllä? Tavallaan? Ei?
>> Entä HTTP? Kuulostaako jotain enemmän ihmiset haluavat tehdä?
Vai oletko sellainen, "Eh." Tehdään HTTP ensin.
Kuinka moni teistä kaverit ovat nähneet Davidin naurettavan mahtava HTTP lyhyt? Anybody?
Olen nähnyt sen koko joukko.
Se oli yksi ensimmäisiä, jotka teimme, ja niin se oli kuin meidän demo tänä kesänä.
Dan on nähnyt se nippu liian, Dan the Man takaisin sinne.
HTTP ja sitten on tämä HTTPS asia, että olemme puhuneet hieman.
Mitä sinun tarvitsee tietää HTTP?
Se on kirjaimellisesti vain protokolla vuorovaikutuksessa web-palvelin.
Kun haluat puhua Google.com, puhut toiseen tietokoneeseen verkon välityksellä,
mitä teet?
Katsotaanpa ehkä tehdä tämän.
Saanen vetää terminaali.
Tässä on minun pikku pääteikkunaa.
Me voimme tehdä jotain telnet, jonka avulla voimme todella alkaa yhteyden Google.com.
Tämä ei ole jotain sinun täytyy tietää,
mutta se on vain havainnollistaa mitä tapahtuu HTTP.
www.google.com, portti 80.
Mitä tämä tekee?
Se tekee Internet-yhteyden minun tietokone ja Google.
Ja se on todella yhteyden 173.194.75.99, joka on joitakin tietokoneen,
Joissakin Google-palvelimen elää jossain luultavasti täällä,
vaikka se voi olla aina takaisin Kaliforniassa.
Nyt olen kytketty.
Okei, siinä kaikki hyvä.
Mutta kun menet Google.com, tyypillisesti odotat Google.com,
joitakin HTML näyttää, eikö? Ei vain tätä.
Ongelmana on haluan sanoa: "Anna minulle GOOGLE.COM" tai mitä tahansa.
Mutta jos sanon, että mitään ei tapahdu.
Itse asiassa, jos osuin Anna pari kertaa, se tulee takaisin ja se sanoo,
"Se oli huono pyynnöstä."
Tämä sanoi: "Ei, ei, ei, ei, ei, ei, ei, ei, ei."
"Et voi vain laittaa tavaraa sisään Sinulla on todellakin puhua HTTP minulle."
"Sinun täytyy muotoilla pyyntöön, koska HTTP-pyynnön, koska GET tai POST
"Tai jotain sellaista."
"Ja sitten palaan oikea HTML sinulle."
Niin näet mitä se antoi minulle tässä asiassa.
Se antoi minulle HTML, että jos voin kopioida sen ja minä TeXturi html, jos laitan sen tänne,
ja minä tallenna se test.html--Älä viitsi.
Web-sivun. Siellä mennään.
Nyt jos avaan Downloads / test.html, nyt se antoi minulle huono -
Se ei aivan tee sitä HTML.
Se näyttää siltä kuin se ei sulje se. Täällä, katsotaanpa.
Ehei. Okei.
Se ei tule tehdä. Anyway, ei tule sen selville.
Mutta joka tapauksessa, mitä se tekee on se palaa minulle HTML,
mutta se sanoo olennaisesti, "Et antanut minulle oikea HTTP-pyynnön."
Joten mitä meidän täytyy tietää HTTP?
Se on tapa muotoilun pyyntöjä web-palvelimia saada tyypillisesti HTML vastauksena.
>> Toinen asia huomata on, että kun teet pyynnön web-palvelimelle,
sinun täytyy myös määrittää HTTP-menetelmä, jota haluat käyttää.
Puhuimme tästä hieman aiemmin, jossa 2 isoa että näemme
ovat GET ja POST.
On myös koko joukko muita vaatimuksia.
On HEAD ja laittaa ja poistaa ja kaikki nämä muut asiat,
mutta GET ja POST ovat 2 tärkeimmät.
Missä näet niitä ilmaantuu? Kun olet kirjoittamassa muotoja.
Kun kirjoitat HTML lomakkeet, sinun täytyy määrittää HTTP menetelmä
jonka haluat, että lomakkeen tiedot lähetetään.
Ja sitten näet sen palvelimen puolella, kun olet kirjoittamassa PHP-koodin
kun käsittelee tietoja ja sinun täytyy katsoa POST superglobal
tai GET superglobal hakea tietoja toimitti käyttäjä.
Ja ero GET ja POST on, että GET muuttaa varsinaisen osoitteen
ja suurimmaksi osaksi näet, mitä parametrit välitetään GET-pyynnön
hyvin helposti vain katsomalla URL, kun taas POST pyynnön
et välittää parametrit pyynnön URL.
Mutta ne eivät ole salattuja tai mitään, ellei aiot HTTPS.
POST parametrit ovat vain osa -
He eivät mene URL, tehokkaasti.
Meillä on taipumus vain sellainen semanttisesti erottaa 2,
joka sanoo vain, että todella voit tehdä saman asian kanssa GET, että voit kanssa POST.
Voit tehdä saman. Se on vain, että käytämme niitä eri tilanteissa.
Käytämme GET kun yritämme vain lukea jotain ja me vain sanovat:
"Anna minulle näitä tietoja."
Ja käytämme POST tyypillisesti, kun yritämme päivittää jotain palvelimelle.
Siksi kun menet Google.com ja olimme tekemässä, että typeahead
näimme kaikki GET
koska olimme kirjaimellisesti vain tietojen noutaminen Google,
ottaa huomioon, että jos teet Facebook seinään postitse aiot käyttää,
todennäköisimmin, HTTP POST-menetelmää lähettää että tiedot ja tehdä tarvittavat muutokset Facebook
teidän seinään, ystäväsi seinään.
Katsotaanpa.
Luulen ero HTTPS on, että se on HTTP mutta salattu.
[Naurahtaa] Secure.
Joo. Ja on paljon hauskoja yksityiskohtia siitä.
>> Kysymyksiä?
Meidän on alettava niputtamiseen, ja niin teemme joitakin tietorakenteita puolella. Charlotte?
[Opiskelija] mitä sisältyy HTTP header-tiedostot isännästä menetelmä
ja menetelmä ja numero? >> Ah.
Paras tapa tarkastella sitä on mennä Network-välilehti
ja vain nähdä, mitä tapahtuu, kun vain mennä Google.com.
Voit tulla tänne ja voit nähdä kaikki eri HTTP tulleisiin pyyntöihin.
Google.com.
Ensimmäinen oli Yritin mennä Google.com ja se sanoi,
"Voi, Google.com ei todellisuudessa ole olemassa."
"Jos todella haluat mennä on www.google.com."
Joten sain ohjataan täällä.
Siellä sain tämän 301 sitten sain 200 OK.
Joten mikä on täällä, teidän otsikot?
Se sanoo, että tämä on URL, johon tein pyynnöstä pyynnön menetelmä,
ja sitten tilan koodi.
Ne ovat 3 biggies.
Muita asioita täällä, evästeet,
evästeet ovat kätevä miettiminen istunnon, jos joku on kirjautunut tai ei.
Ne ovat myös kätevä seurata ihmisiä. Näin sivustot seurata sinua koko paikka.
He laittoivat evästeitä tietokoneellesi.
Heidät on koulutettu tunnistamaan muut sivustot evästeitä, jos he voivat.
Ja sitten on tämä muita juttuja, että sanoo User Agent täällä.
Tämä user agent string tunnistaa tietokoneeni Google.com ja sanoo,
"Google.com, juuri niin tiedät, jotkut jätkä juoksentelee tässä selaimessa
"Intel Mac 10_8_2 vain meni Google.com."
Ja sitten nämä Hyväksy asiat vain sanoa: "Mikä on minun tietokone,
"Mikä on minun web-selain valmis hyväksymään?"
Se voi hyväksyä HTML, se voi hyväksyä XML, tämä kaikki muut jutut.
Millaisia ​​merkkikoodausten se hyväksyy?
Se hyväksy gzipattu pakattu kamaa?
Joskus sivustot pakkaa asioita tehdä sen nopeammin lähettää verkon yli.
>> Cool. Selvä.
Mielestäni se nyt. Suljemme alas, mutta minä pysyn kysymyksiä.
>> [CS50.TV]