DAVID J. MALAN: Okei, joten tämä tässä Myo varsi bändi, pari jota ovat jo CS50 opinnäytetöiden. Ja se oli osoitus meidän jonossa sinut etukäteen, mistä pohjimmiltaan tässä melko tiukka käsivarsihihnalla täällä kuuntelee lihasten liikkeitä että kuvataan sitten ohjelmisto Colton kannettavalle tänne joka oli iTunes ja että laulu jo jonottivat. Sijaan minua demoing tämän, Colton on ollut laboratoriossa selvästi koko viikon päästä esittelyn valmiina yksi rohkea vapaaehtoinen. Jos joku haluaisi tulla on up-- näki kätesi ensin. Tule ylös. [00:01:09] Selvä. Ja mikä on nimesi? [00:01:13] Yleisö: Tuota, Maria. [00:01:14] DAVID J. MALAN: Maria, kiva nähdä sinua. Tule tänne. Sallikaa minun esitellä sinulle Colton. Colton, tämä on Maria. [00:01:21] COLTON: Hei, mukava tavata. [00:01:23] DAVID J. MALAN: Kaikki oikea, niin ensimmäinen vaihe, olemme menossa on laittaa tämä on teidän kyynärvarren niin, että se on melko tiukka lähelle kyynärpäähän. Ja sillä välin, katsotaanpa laittaa Google Glass ja me sekoita teknologiaa tänään. [00:01:33] COLTON: Ensin meidän täytyy koukku tämän huomioon asioita. [00:01:36] DAVID J. MALAN: OK. Oikeastaan, katsotaanpa laittaa käsien lähelle tätä kaapelia mahdollisimman jotta voimme ensin synkronoida sen. [00:01:41] COLTON: Tehdään tämä. [00:01:42] DAVID J. MALAN: Ja sillä välin, joten että jokainen voi saada lähemmäksi silmäyksellä, me nakata Andreaksen kamera ruudulle siellä. Joten meillä on USB-kaapeli, joka on on liitetty Maria otti vastuun kantaakseen. Ja haluaisin nakata Colton näytöllä ylös projektorin seuraavan. [00:02:00] Joten Colton rekisteröitymättä laite nyt Myo liitetty tämän kaapelin. Ja nyt, mitä Marian aikoo tehdä hetkellisesti on itse kävellä läpi kalibroinnin vaiheet ja opettaa ohjelmistot miten hänen lihakset vastata kun hän tekee tietyn ennalta määritetyn eleet, että ohjelmisto ymmärtää. Jos haluat mennä näytön edessä. OK, pitää yrittää. [00:02:30] COLTON: Mene näin. Ja niin. Ja aina oikeassa. Mene takaisin. [00:02:35] DAVID J. MALAN: OK. Eri näkökulmasta. Se et ole sinä. Se on meille. [00:02:40] MARIA: OK. DAVID J. MALAN: Ei. Siirrytään sitä ylempänä, joten se on lähemmäksi kyynärpää, tai jopa tiukempi. Selvä. [00:02:52] Nyt mennään. Tämä olisi hyvä aika CS52X. Siellä mennään. [00:02:57] Very nice. OK. Peukalon pinky. [00:03:02] Very nice. Levitä sormin. Hyvä. Aalto oikeassa. Se on kumma osoittaa sinulle vasemmalla hand-- [00:03:17] COLTON: Joo, se on outo. DAVID J. MALAN: Wave oikealle ja eteenpäin. Nopeasti eteenpäin ohittaa tai seuraavaan. Se on OK Wave oikeassa. [00:03:25] MARIA: Minä don't-- odota. [00:03:26] DAVID J. MALAN: Tarvitsetko apua? [00:03:28] COLTON: Eli olet menossa näin. MARIA: Se kääntyy Toinen asia, vaikka. COLTON: On. DAVID J. MALAN: Joo en tiedä Siksi sitä näyttämällä vasuri. COLTON: Miksi et try-- vain kokeilla menossa näin. [00:03:38] DAVID J. MALAN: o? Ehkä tavoittaa kätesi ulos hieman suorempi ja tehdä siitä jyrkemmin kuin tämä. Joo, OK, tule. [00:03:48] MARIA: Olen pahoillani. DAVID J. MALAN: Se ei ole sinun syysi. COLTON: Se on hyvä. DAVID J. MALAN: All Right. Well-- [00:03:56] MARIA: Pitäisikö meidän ohittaa tämän jälkeen? DAVID J. MALAN: Kyllä, katsotaanpa voit pälkähästä. Joten jos joku haluaisi tehdä Opinnäytetyö käyttämisen kärjessä laitteisto, ymmärtää se voi vain kestää hieman totuttelua. Ja this-- todellisuus on tämä on todella hyvin verenvuoto reuna. [00:04:10] Tämä on mitä kutsutaan Developer Kit, joka on tarkoitus olla olennaisesti pre-release jotta ihmiset voivat tehdä juuri this-- taistella sen kanssa, kuva miten ihmisten elimet toimivat teknologian kanssa. Joten jos haluat Jälkeenpäin jälkeen luento, Voimme antaa sinulle tulla ja ottaa toisen puukottaa sitä. Mutta muuten, aplodit, jos Voisimme Maria tulit ylös. [00:04:26] MARIA: Kiitos. [00:04:28] DAVID J. MALAN: Kiitos. Me roikkua kiinni, mutta annamme sinä-- Entä stressipallo täällä? Voi, and-- if-- Joo, kiitos. Selvä. Joten utelias, jos olisit tunne hyvä valinta että teimme siellä aikaisemmin, uskomattoman TV osoittavat, että sinun pitäisi ehdottomasti olla humalahakuinen katselun Netflix on tämä yksi täällä. [00:04:51] SPEAKER 1: Hyvät naiset ja herrat, taikuri nimeltä Josh. [00:05:04] DAVID J. MALAN: Ja ilmeisesti, se on asia tekstin minulle aikana luento nyt. Olen kerrotaan, että Maria oli syntymäpäivä eilen. Joten hyvää syntymäpäivää alkaen CS50 Maria samoin. [00:05:18] Joten ehkä lukenut viime kuussa että tämä kollegat täällä, Steve Ballmer, joka oli itse asiassa luokka 1977 College, äskettäin eläkkeelle Microsoft. Hän oli perustutkintoa täällä, sitten pari vuotta myöhemmin löytänyt itsensä Stanford Business School kun hän sai puhelimen soittaa hänen ystävänsä, jotka oli asunut alas sali häneltä täällä Harvardissa. Että kaverin nimi oli Bill Portit, ja tuolloin, hän yritti värvätä Steve olla Ensimmäinen liike henkilö, todella, pienen yrityksen nimi Microsoft. [00:05:45] Pitkä tarina lyhyt, Steve lopulta voitti yli, liittyi Microsoftin kun he oli vain 30 työntekijää. Ja kun hän eläkkeellä aivan äskettäin, Yhtiön palveluksessa oli 100000 työntekijää viime vuosina. Ja niin sivusto tunnetaan Verge valmistettu tämä kunnianosoitus video että ajattelimme yhteinen, joka antaa sinulle tunne kuinka paljon energiaa Steve tuo esittelyä hän antaa. [VIDEOTOISTOSTA] -Microsoft On kuin neljäsosa lapsi. Lapset tekevät poistua talosta. Tässä tapauksessa, luulisin Lähden talon. Hei Bill, whazzap? [00:06:23] -Wazzap? [00:06:24] -Hei, Wazzap? Meille on annettu valtava mahdollisuus. Ja Bill antoi meille siihen mahdollisuuden. Haluan kiittää Bill siitä. Haluan sinun myös. Innovaatiovauhti ei aio hidastaa. [00:06:42] Se tulee saada nopeammin ja nopeammin. Siellä saattaa olla muutama kilpailijoita että valitettavasti eliminoitu! [00:06:54] Rakastan tämän yrityksen. Kyllä! Olen PC, ja rakastan tätä yritystä! [00:07:08] Kehittäjät, kehittäjät, kehittäjät, kehittäjät, kehittäjät, kehittäjät, kehittäjät, kehittäjät. Kyllä! Web-kehittäjille! [00:07:19] Web-kehittäjille! Web-kehittäjille! Kuuntele mitä muuta saada ilman lisämaksua! [00:07:28] MS-DOS-johtoon, tapaaminen kalenteri, kortti kasa, muistilehtiö, kello, ohjauspaneeli. Ja voitko uskoa sitä? Reversie! [00:07:35] Polttaa ne CD! Lähettää ne MSN! Voit postittaa ne ystävillesi! [00:07:40] Kaikki yhdellä klikkauksella! Yksi Microsoft, yksi strategia, yksi team-- keskittynyt, kurinalainen, ammatti, ja asiantuntija kaikessa mitä teemme. Saanen käyttää linja vanhan elokuvan. [00:07:52] Ihmissuhteet ovat kuin haita. Ne eteenpäin tai ne kuolevat. Olen itse sitä mieltä, tech yritykset ovat samat. [00:08:01] [END VIDEOTOISTOSTA] DAVID J. MALAN: Eli olemme niin tyytyväisiä ilmoittaa, että Steve liittyy joukkoomme täällä CS50 ensi keskiviikkona klo paikkakunta ja aika täällä. Space todennäköisesti rajallinen. Ja niin liittymään meihin henkilökohtaisesti, ota suunnata tänään tai pian sen jälkeen jotta cs50.harvard.edu/register. [00:08:22] Ja me jatkotoimet Tiistai vahvistaa paikkoja. Odotan, että ensi Keskiviikko aikana luento CS50. Nyt muita uutisia, satuin törmännyt tämän Crimson juuri toinen päivä. [00:08:34] On käynyt ilmi, että yksi CS50: n henkilöstö ja ainakin yksi CS50: n opiskelijoita parhaillaan käynnissä UC puheenjohtaja ja varapuheenjohtaja, joka toi minut takaisin omaa päivää takaisin kun menetin UC vaalit surkeasti. Mutta hyvääkin että on olen aina kerro tarina on, että yksi olen varma monia syitä menetin vaalit oli täydellinen puuttuminen on lahjakkuutta julkinen puhuminen. Ja niin aivan rehellisesti, se ajoi minut, että kokemus Luulen junior vuonna, itse allekirjoittaa jopa Harvardin Computer Society, joka on ryhmä kampuksella että omistaa useita teknisiä neuvotteluja ja muita asioita. Ja otin niiden opetus seminaareja ja siksi oli tilaisuus, ihana tilaisuus, aloittaa työskentelyn juuri tämän. Mutta myös, minulla oli tilaisuus aikana tämä kokemus opettaa itselleni sitäkin HTML. Ja niin minä lykänneet viime yönä katsellut HTML pohjainen sivusto Tein kuten 1997, -98, minun -kampanja, joka näyttää tältä täällä. Tiedän. [00:09:29] Because-- ja tietenkin huomautus tämä hämmästyttävä muotoilu päätös vuonna 1998 tai vaikka mitä. Ensimmäinen asia, jonka haluat käyttäjien tehdä kun vierailevat sivustolla on saada napsauttaa toista linkkiä juuri Syötä sivuston täällä munkki takana kuin verhottu verho, jossa ilmeisesti kampanjan alusta oli. Ja tämä on kaikki mitä saat tänään on vain kuvakaappaus. Mutta luin läpi, kuten, kampanjani julisteita viime yönä ja minun foorumi. [00:09:50] Ja olin niin vihainen tuolloin. Oma alusta was-- se oli mielenkiintoinen. Joten olen rauhoittunut sen jälkeen. Mutta jonain päivänä, minä juoksen uudelleen ja toivottavasti parempi tällä kertaa. [00:10:03] Niin HTML, että kieli, jolla tein että in-- voit pian tehdä paljon more-- on jotain olemme olleet puhumme myöhässä ja pitkälti itsestään selvänä nyt että olemme siirtyneet muille kielille. Mutta katsotaanpa keskeyttää hetkeksi ja laittaa nämä asiat yhteydessä. Joten lauseen, mikä on HTML? [00:10:18] Tai, mitä käytetään? Kukaan? Kyllä. [00:10:20] Yleisö: Markup sivustoille. DAVID J. MALAN: Markup verkkosivuilla. Joten se on kuvauskieli voit jäsentää sivun. Header menee täällä, otsikko menee täällä, kehon menee täällä. Tämä on lihavoituna, tämä on italics-- tällaista yksityiskohtia. [00:10:33] OK, hyvä. Joten CSS avulla sinä-- ja minä otti vapauksia siellä kanssa rohkea päin ja kursiivilla koska että on parempi toteuttaa tämä. CSS is-- mitä? Sanoa lauseen. Kuka tahansa. Joo. [00:10:46] Yleisö: koristeet ja juttuja, kuten miten suunnitella sitä. DAVID J. MALAN: OK, hyvä. Koristeita, joiden avulla voit suunnitella sitä tai tyylitellä se asioita, kuten lihavointia ja kursiivilla ja värejä ja myös hienoja rakeinen asemoinnit. Se tavallaan voit ottaa asiat viimeisen mailin niin, että jos, esimerkiksi, vuonna Pset7, olet ehkä huomannut teidän portfolio sivun, jos olet tässä vaiheessa jo, että oletustaulukko että olet tehdä näyttää käyttäjän varastossa tilojen ja käteistä luultavasti näyttää melko hirveä oletuksena ilman valkoista tilaa. Kaikki on eräänlainen pullollaan yhdessä riveihin ja sarakkeisiin. [00:11:18] Hyvin, hieman CSS, niin saatat huomata, voit itse muokata sitä ja tehdä siitä jotain paljon tuttuja ja paljon kauniimpi katsoa. Joten CSS on noin stilisointi sivustot. Mutta sitten otimme käyttöön vielä toinen kieli, PHP, joka antaa meidän tehdä mitä? [00:11:36] Haluan vain tehdä mitä? Ketään. Sai venture ulkopuolella pari ensimmäistä riviä. Joo. [00:11:40] Yleisö: Luo dynaamista sisältöä. DAVID J. MALAN: Perfect. Tuottaa dynaamista sisältöä. Ja voit tehdä tämän rajoittamattoman määrän kielillä. Satumme käyttää PHP koska se on osittain niin samanlainen kuin C syntaksin. [00:11:50] Mutta PHP juuri näin. Sen avulla voit dynaamisesti tuotos. Ja joitakin että tuotanto voi olla HTML, koska olemme yleensä tehneet. Ja se on myös, koska se on ohjelmointikieli, on mekanismi, jonka kautta Voimme puhua tietokantoihin. [00:12:03] Ja voimme tehdä kyselyjä muita palvelimia kuten Yahoos ja ohjelmallisesti tehdä mitään todella, että et olisi muuten halua pakottaa tietokonetta tehdä. Joten PHP antaa meidän alkaa dynaamisesti syöttöä sisältöä. Joten tämän logiikan, minulla ei ollut dynaamisen sivuston jo vuonna 1998. [00:12:16] Se oli vain staattinen web-sivun. Oma sisältö oli muuttunut manuaalisesti gedit tai muuta vastaavaa. Mutta PHP on mitä me käytetään tai voineet käyttää, vaan sillä jotain Frosh pikaviestejä sivusto, joka piti ottaa rekisteröinnit ja hallita luettelo users-- asioista, todella siirtymässä aikaa, vaikka meillä sattuu käyttää Perl, eri kieli tuolloin. [00:12:35] Ja sitten lopuksi, esittelimme SQL-- Structured Query Language. Niin vielä toinen kieli joka on käytetty mitä? Käytetään mitä? Voimmeko lähteä slight-- OK, emme aio saada paljon kauemmas kuin orkesteri täällä. Yleisö: Se on protokolla tapana puhua tietokantoihin. DAVID J. MALAN: protokolla tapana puhua tietokantoihin. Saanen nipistää. Se on luonnollinen kieli puhua databases-- valitsee ja insertit ja poistaa ja päivityksiä ja itse jopa enemmän ominaisuuksia, jotka emme ole edes sukeltanut osaksi, mutta voit halutessasi explore-- olla etsintään vaikkapa opinnäytetyön. Joten on näiden eri kappaletta. [00:13:09] Ja toivottavasti Pset7, vaikka sen erittely on varsin pitkä, se on tarkoituksella pitkä kävellä sinua läpi, miten nämä asiat voivat kaikki on kirjoitettu yhteen. Nyt maanantaina, me Esittelimme viime kieli että me virallisesti käyttöön vuonna course-- eli JavaScript. Tämä, kuten PHP, on tulkittu kieli. [00:13:25] Mutta keskeinen ero Ehdotin maanantaina on, että kun PHP on täytäntöönpanovaltiossa tai tulkitaan palvelimella, joka Tässä tapauksessa on CS50 laite, tai ehkä joitakin kaupallisia web palvelimen internetissä, JavaScript yleensä on kieli, joka toimii asiakkaan puolella ei palvelimen side-- niin selaimessa. Toisin sanoen, aivan kuten silloin, kun avasin up Facebook lähdekoodin ja löysi kaikki Näiden Js tiedostot, implisiittisesti oli että kun käyt Facebookissa tai eniten sivustot näinä päivinä, saat ei vain HTML, ei vain CSS, mutta koko joukko JavaScript koodi usein muodossa Js-tiedostoja. Ja sitten se browser-- oma Mac tai PC-- joka suorittaa kyseisen koodin. [00:14:03] Mutta selain suorittaa sen. Voit ajatella eräänlainen hiekkalaatikko. Jotta JavaScript-koodi ei saa olla voi poistaa tiedostoja tietokoneessa. Sen ei pitäisi pystyä lähettää sähköposteja puolestasi. Selaimesi sellainen toimenpide rajoittaa mitä voit tehdä sen kanssa. [00:14:17] Joten siinä mielessä, se on hieman vähemmän voimakas, ehkä, kuin C. Mutta JavaScript voi, koska syrjään, voidaan käyttää palvelimessa, vaikka me ei yleensä puhu siitä tässä yhteydessä. Joten nyt Katsotaanpa sitoa nämä yhteen. Viikko plus sitten esitimme joitakin HTML on left-- Super tylsä ​​web-sivulla. [00:14:34] Vain sanoo hello world. Ja sitten ehdotin oikeus voimme sellaista varastaa ideoita meidän keskustelu tietorakenteita C ja miettiä, miten tämä hierarkkinen markup language vasemmalla voitu tehdä tai panna täytäntöön muistiin koska todellinen puurakenteen solmut ja viitteitä ja tuollaiset tiedot. Oikealla, kutsumme että DOM-- Document Esineet Model-- joka on vain hieno tapa sanoa puu. [00:14:56] Nyt miksi tämä hyödyllistä ajattele sitä tällä tavalla? Koska nyt JavaScript, koska meillä on koodi, joka saa pelata tässä ympäristö, todellinen HTML, joka on lähetetty selaimelle jo ja on jo ladattu muistiin selain puuksi tietokoneen RAM näin, voimme käyttää JavaScript itse kulkea tai kävellä tai haku tai muuttaa tätä DOM puun kuitenkin haluamme. Joten itse asiassa, jos luulet noin facebook.com, jos käytät chat-toimintoa, jos Gmailin ja Gchat ominaisuus, mitä jos sinulla on tulevat viestit uudelleen ja uudelleen ja uudelleen, kyseiset viestit ovat todennäköisesti, kuten, LI tag, listan osa tageja, ehkä. [00:15:35] Tai ehkä he vain divs että pitää näkyä joka kerta kun saat pikaviestin. Ja niin että vain sitä mitä Facebook tai Google tekee on aina saat viestin palvelimelta, ne luultavasti JavaScriptin avulla vain lisätä toisen solmun Tämän tree-- toiseen solmuun tämän puu, joka sitten visuaalisesti vain näyttää kuin uusi rivi tekstiä ruudulla. Mutta he asetat tähän tietorakenne. [00:15:57] Niin luokissa kuin CS124 ja toiset, luultavasti itse kirjoittaa enemmän koodia vastaan tietorakenteita kuten tämä. Mutta nyt JavaScript, me vain olettaa saamme kaiken tämän toiminnallisuuden ilmaiseksi kieltä itse. Joten katsotaanpa esimerkki. [00:16:09] Saanen avata tiedoston nimeltä form.html. Se on erittäin yksinkertaista. Se vain näyttää tältä. [00:16:15] Ei CSS, ei ajatellut estetiikkaa. Se on puhtaasti toiminnallinen ja ilmeisesti olen pyytää sähköpostin, salasana, salasana uudelleen, ja sitten tarkistaa sopia joihinkin ehdot. Mikä lähdekoodi näyttää on luultavasti jotain arvata saattaa kanssa hieman ajatellut nyt. Minulla muoto tag täällä. [00:16:32] Toiminta on ilmeisesti menossa Siirry tiedoston nimeltä register.php. Menetelmä aion käyttää on saada. Ja sitten minulla teksti kenttä, jonka nimi on sähköpostiosoite. [00:16:40] Minulla salasana kenttä jonka nimi on salasana. Minulla toisen salasana kenttä jonka nimi on jokseenkin mielivaltaisesti vahvistus. Se on vain yksi HTTP-parametri. [00:16:49] Ja sitten me olemme ole käyttänyt näitä paitsi koska Frosh infrastruktuurin demon class-- valintaruutu, joka on vain tyyppi on sama kuin tarkistaa. Ja soitan, että sopimus. Joten olen sellainen mielivaltaisesti vaan sopivasti nimetty näillä aloilla. Niin että nyt kun tämä muoto saa toimitettu, katsotaan mitä tapahtuu. Jos teen malan@harvard.edu, Teen salasana Crimson. Teen salasanan mitään. Älkäämme yhteistyötä. [00:17:10] Enkä ruutu. Minäpä valitse Register. Ja se sanoo, hm, olet rekisteröitynyt. Ei oikeastaan. [00:17:16] Mutta URL muuttunut. Joten tässä muodossa on selvästi sallittu alistumaan register.php. Mutta oletettavasti, minun pitäisi olla kiinni joitakin näistä virheistä. Nyt Pset7 ja joissakin meidän luento esimerkkejä, me yleensä tulostaa iso punainen virheilmoitus täällä sanomalla, puuttuu nimi, tai puuttuvat salasana. Olemme tehneet, että ennen Niistä meillä Done palvelimen puolella virheiden havaitsemiseen. [00:17:37] Mutta monet sivustot näinä päivinä tehdä asiakkaan puolella virheiden havaitsemiseen jos URL-osoite ei muutu. Koko sivu ei päivity. Voit saada välitöntä palautetta selaimesta. Ehkä jotain menee punainen. [00:17:48] Ehkä saat pop up. Mutta et tuhlaa aikaa lähettämistä palvelimen tiedot, joka on epätäydellinen. Katsotaanpa, miten voimme saavuttamiseksi ominaisuus samoin. [00:17:56] Anna minun mennä form1.html, joka näyttää samalta. Mutta jos tällä kertaa teen malan@harvard.edu ja kirjoitan Crimson enkä yhteistyötä entisestään mutta valitse Register, huomaa nyt. Se ei ole seksikkäin ratkaisu. Olen ainakin kiinni tämän virheen. Ja olen käyttänyt hälytys toiminto JavaScript-- josta olemme vain käyttämällä luokassa. Yleensä sinun ei pitäisi käyttää tätä koska se voi hyvin nopeasti ulos valvonnan. Mutta salasanat eivät täsmää on virhe. [00:18:19] Anna minun mennä eteenpäin ja valitse OK. Mutta mitä näppäintä takeaway täällä on se, että URL-osoite ei muutu. Joten en ole vaivautunut kuihtumista palvelimen aika kysyä sitä kysymys, että voisin olla tajunnut vastaus itselleni. [00:18:30] Ja käyttäjä, vaikka puhuneet tästä pidempään kuin käyttäjän menossa ajatella tätä, joutuu välittömän palautteen. Ei ole latenssi verkkoliitäntä. Joten katso tätä lähdekoodia. [00:18:40] Form1.html näyttää rakenteeltaan samanlaisia ​​täällä. Muoto on itse asiassa sama. Mutta katsotaanpa, mitä tein täällä. Ja siellä on erilaisia ​​tapoja tehdä tätä. Ja olen tehnyt eniten suoraan seuraaja, mutta ei kaikkein tyylikäs tapa vielä. Minulla komentosarjatunnus. Sitten soittaa document.getElementById ('rekisteröinti'). Ja minä tallentaa että arvo muodossa, muuttuja. [00:19:04] Joten mitä minä olen tehnyt? Voit ajatella document.getElementById olevan erityinen toiminto, joka JavaScript antaa sinulle että kirjaimellisesti käsiä osoitin yksi solmujen tai suorakaiteen tässä puussa. Joten nyt, että mitä meidän muodossa muuttuja JavaScript on todella suunnattu. [00:19:21] Joten nyt syntaksi eroaa C. Mutta me teemme muutamia asioita täällä. Yksi, tämä on vähän outo näköinen, varmasti vs. C. Mutta katsokaa linja 35. Niin vasemmalla form.onsubmit. Muista, että onsubmit on kuten kentän struct. Jos luulet muotoa muuttuja ollaan vasta C struct, se saattaa olla joillakin aloilla. [00:19:42] Takaisin seuraavana päivänä, meillä oli opiskelijoita nimiä, Tunnukset, talot, ne millaisia ​​kentät. Ajatelkaapa onsubmit kuin toinen kenttä. Mutta se on erikoisala, koska selain on valmiiksi ohjelmoitu odottaa .onsubmit jotta ei olla arvoa kuten numero tai merkkijono, mutta itse asiassa olla funktio tai osoitteen funktio tietokoneen muistiin. [00:20:02] Ja todellakin, sitähän Tämän avainsanan täällä tekee. Tämä sanoo, anna minulle uusi toiminto. Mutta mikä on sen nimi olemaan, ilmeisesti? [00:20:09] Muistelen maanantaina. Mikä on nimi tämän Toiminto perustuu tähän syntaksi? Ei, en tarkoita, siellä on selvästi no name associated-- varmasti ei mitä olen korostanut täällä. [00:20:21] Mutta se on todella ok. Tämä on nimetön funktio, tai lambda toimivat jotkut saattavat kutsua sitä. Ja se tarkoittaa vain sitä, se on silti tehtävä. Se on vain, et voi kutsua sitä nimeltä. Mutta se on ok. Koska uudelleen, selain on ollut esiohjelmoima yritykset, kuten Google tai Microsoft tai Mozilla tai muita henkilöitä juuri tietää, että jos .onsubmit kenttä sisällä lomakkeen elementin arvo, pitää sitä function-- toiminnon osoitin, jos haluatte. Ja kutsua sitä, kun lomake lähetetään. [00:20:46] Joten mitä koodi olisi toteutettava kun lomake lähetetään? Ilmeisesti kaikki sisällä kihara ahdin. Ja tämä on vain tyylillinen. [00:20:53] Tämän voi tehdä esimerkiksi meillä on tapana tehdä CS50. Mutta JavaScript, useimmat ihmiset pyrkivät pitämään sen samalla rivillä vain koska se lisää selvästi on liittyy avainsanan toiminto. Mitä nyt teen? [00:21:03] Jos form.email.value yhtä kuin vertaistensa tyhjä merkkijono tai ei mitään, tässä on hälytys, jossa aion sanoa, sinun on annettava sähköpostiosoitteesi, ja sitten return false. Ja se, että paluu väärä, että estää lomakkeen toimittamisesta. Samaan aikaan, jos salasana arvo on tyhjä, aion huutaa käyttäjä ja sanoa, sinun on annettava salasana. [00:21:21] Samalla asiat menevät hieman harrastaja täällä. Jos form.password.value ei yhdenvertaisen form.confirmation.value, muulla alalla, huuda käyttäjälle, että salasanat eivät täsmää, koska ne ei hetki sitten. Ja sitten tämä yksi on vähän seksikkäämpi koska en tietää Tiesin käsitteellisesti että tarkistettu on valintaruutu nimi. [00:21:40] Joten voin vain käyttää huudahdus kohta sanoa, jos tarkastus ei ole checked-- se Boolen arvo, totta vai false-- Minä huutaa käyttäjälle tästä syystä. Muuten, jos saamme läpi kaikki nämä ehdot, Haluan vain palata totta. Olkoon lomake toimitetaan. Ja tämä sitten tapahtuu. [00:21:56] Katsotaanpa kirjoittaa Crimson. Katsotaan tarkistaa ruudussa Register. Ja nyt käyn läpi määränpäähän. Nyt ei ole tietokannassa. Ei ole mitään mielenkiintoista vuonna register.php. Tarvitsin vain jotain todella puhua. Joten anna minun keskeyttää, täällä. Kaikki kysymykset siitä, mitä olemme juuri tehneet tai mitä jotkut tämän uuden syntaksi on? OK, joo? [00:22:17] Yleisö: Joten kaikki valintaruutu on automaattisesti Boolen. Sinun ei tarvitse ilmoittaa sitä niin. [00:22:21] DAVID J. MALAN: Oikein. Mikä tahansa ruutua, joka on lähetetty teille HTML-muodossa sinun JavaScript-koodia kohdellaan, kyllä, koska Boolean value-- tosi tai epätosi. Se on hyvä kysymys. Kun taas muut arvot, ja Tietenkin on ollut teksti, AKA jouset. [00:22:36] Okei, joten saanen kelata hieman pidemmälle. Mikä oli idea tästä? Vain olla selvä. Kuten tiedämme jo, jopa Pset7 ja jopa viime viikon luento esimerkkejä, että voimme tietenkin tarkistaa $ _GET $ _POST Nähdä, jos käyttäjä antaa meille tyhjä arvo. Muista tyhjä funktio PHP. [00:22:54] Joten vain olla selvää, mitä yksi syy meidän pitää myös haluta tehdä tämän virheentarkistus sisällä selaimen? Mikä motivaatio täällä? Joo. [00:23:06] Yleisö: Nopeampi, ja et Lähetä turha tiedot palvelimelle. DAVID J. MALAN: Hyvä. Se on nopeampaa. Et lähetä hyödytön tiedot palvelimelle. [00:23:12] Niin saat takaisin enemmän välitöntä vastausta. Ja kaiken kaikkiaan, käyttäjä kokemus on parempi. Ajattele vaihtoehto. [00:23:17] Jos Gmail-- ja oli tapauksessa useita vuosia sitten. Oletetaan, että olet saanut uuden sähköpostiviestin Gmail huomioon, mutta ainoa tapa, nähdä, että on, kuten, lataa koko sivun. Tai Oletetaan napsauta linkki lukea sähköpostia. [00:23:29] Kaiken täytyy ladata niin että näet sähköpostiosoite. Tai Facebook-- saat chat-viestin. Et näe sitä ennen kuin lataat sivu tai valitse jokin yhteys. [00:23:36] Kuten tämä olisi hirveän harmittaa käyttökokemuksen. Ja tämä on mitä se oli, selvästi, takaisin kun juoksin UC ja web oli paljon vähemmän dynaaminen ja JavaScript ollut yhtä suosituksi kuin se on nyt. Ja asiat menevät paljon dynaamisempi ja paljon muuta asiakkaan puolella siinä mielessä. [00:23:49] Mutta on saalis täällä, ja tämä on tavallaan ärsyttävää Sainpas. Vain koska voit lisätä asiakkaan puolella havaitseminen kuin tämä ei tarkoita voit tai pitäisi luopua Palvelin puolella tunnistus. Te pohjimmiltaan halua laittaa virhetarkistus- molemmissa paikoissa. Sillä se, mitä oli yksi ja opetus artikkelista luin joitakin otteita mistä tämä typerä CMS system-- Content Management System-- että oli toteuttamisessa authentication järjestelmä, sen kirjautuminen kautta millä mekanismilla? JavaScript. [00:24:20] Yleisö: JavaScript. DAVID J. MALAN: JavaScript, tarkalleen, eikö? Se oli JavaScriptin avulla. Ja kirjaimellisesti, teillä pelataan hieman luultavasti Chromen Inspector. Ja jos löydän sen, tarkastaa elementti. [00:24:30] Anna minun mennä yli tehdä kaikki Chromen vaihtoehtoja. Ja tämä on, kuinka helppoa se on poista JavaScript selaimessasi. Tarkista, enempää JavaScript. [00:24:38] Niin oikeudenmukaisuus, paljon web näinä päivinä on juuri menossa rikki, koska Gmail ja muut sites-- Facebook-- olettaa, että JavaScript on käytössä. Mutta jos teet jotain typerää kuin vain validointi käyttäjien tulo ja tarkistamalla sen virheet asiakkaan puolelta, vastustaja voi helposti tehdä tämän. Ja sitten vielä älykkäämpiä Vastustaja kuten te nyt voisi käyttää Telnet tai Curl tai vain komentorivin komentoja ja itse lähettää viestejä palvelimelle että samalla jotka eivät ole virheettömiä tarkastettu. [00:25:05] Joten tämä on enemmän käyttöliittymä päätös kuin se on todellinen tekninen improvement-- täytäntöönpanosta jotain asiakkaan puolella, kuten tässä. Joten nyt nopealla silmäyksellä, mutta sitten Minä lykätä online kävellä kautta tämä yksi. Muodossa kaksi, me todella meni läpi ja siivottu koodia hieman. Mutta haluaisin siirtää yhdelle videoista meidän täytyy luultavasti Upota Pset8 että vain näyttää samanlainen syntaksin avulla kirjasto nimeltään jQuery, joka on super, super suosittu kirjasto JavaScript että rehellisesti useimmat ihmiset vain käyttää näinä päivinä ja jopa sekoittaa kuin olento JavaScript itse. [00:25:37] Ja se pyrkii ottamaan Joissakin dollarin merkkejä ja avainsanoja, kuten dokumentti Suluissa täällä. Mutta jälleen kerran, sallikaa minun taipua hitaampaa tutorials verkossa sijaan sotkeutuko vain syntaksin. Siirrytään eteenpäin jotain hieman viileämpi kannalta sovelluksia tästä. [00:25:50] Niin erityisesti, anna minun mennä eteenpäin ja avata tämän tästä. Tule. Siellä mennään. [00:25:59] Saanen avata tätä kuvaa täällä. Tarpeettoman monimutkaisia näköinen, mutta se kuvaa tekniikkaa kutsutaan AJAX-- Asynchronous JavaScript ja XML, jossa X XML on oikeastaan ei enää oikeastaan ​​käytetä. Se yleensä käyttää jotain muuten kutsutaan JSON. [00:26:13] Mutta tässä on se, miten jotain Google Maps tai Google Earth toimii. Kokeillaan tätä lennossa, todella. Anna minun mennä eteenpäin ja avata Chrome selaimessa. [00:26:21] Ja anna minun mennä, sanoa, maps.google.com. Ja todella, jos olet vanha tarpeeksi muistaa mitä, kuten, MapQuestistä oli kuin takaisin seuraavana päivänä, ja ehkä ne vielä toimivat näin. Kun käytetään etsiä something-- 33 Oxford Street, Cambridge, Mass, Tehdään this-- sinua todella, jos halusi pannulla ylös ja alas, vasemmalle ja oikealle, te näyttäisi iso nuoli päälle, ja se näkyy, toinen runko kartan täällä. Tai voisitte Klikkaa vasemmalla sinulle menisi tänne, tai toisella napsautuksella ja menisit tänne. Vaan nämä päivää, me tietenkin vain itsestään selvänä, että voimme mennä noin Cambridge melko nopeasti klikkaamalla ja vetämällä. Mutta huomaa siellä on joitakin virheitä. [00:26:59] Jos en tee tätä tarpeeksi nopeasti, mitä näyttää tapahtuvan niin vedän hieman liian nopeasti tietokoneen pysyä? Mitä näet? Joo. [00:27:07] Yleisö: pikselit eivät päivitä. DAVID J. MALAN: pikselit eivät päivitä. On actually-- ja sinua Tämän on nähty, todella, jos olet katsomassa netissä ja tauko tämä tai oikeastaan ​​hidastaa asioita alas varten once-- näet, että on olemassa laatat, neliöitä tai ruutuihin puuttuvat karttaa, kunnes Sekunnin murto myöhemmin, enemmän tietoa, Katso lisää kuvia itse ruudulle. Ja itse asiassa, jos teemme tämän näköinen up Chrome's-- sanotaanko, Chrome-- Katsotaanpa. Emme voi tehdä sitä. [00:27:31] Oh, oho. Katsotaanpa avata maps.google.com. Haluan tehdä ikkunan isompi uudelleen. [00:27:36] Mene takaisin 33 Oxford Street. Mikä oli verkkosivuilla olin viime aikoina? Minulla oli tämä, kuten yksityinen rant itselleni, että olin silloin pikaviestiin joku ystävä, joka oli verkossa jotka halusivat kuulla sen. Siellä on joitakin verkkosivuilla. Minusta se on Comcast-- niin erittäin suuri amerikkalainen ISP. Voit, kun rekisteröitymisestä uuden kaapelin modeemin palvelu tai kaapeli-tv-palvelu, he ovat muotoa hyvin kohtuullisesti jos he kysyvät sinulta osoitteesi. Ja on tämä hämmästyttävä ominaisuus nimeltä automaattinen täydennys, Google, joka alkaa täyttyä on vastaus kysymykseesi. [00:28:04] Ongelmana on, he tekevät automaattinen täydennys ensimmäisen asioita, jotka kirjoitat. Joten jos alkaa kirjoittaa 33, se näyttää kirjaimellisesti jokaisen talon Amerikassa, joka alkaa kanssa numero 33 ennen kuin jatkat odottaa voit kirjoittaa enemmän. Joten jos kirjoitat 33 Oxford, Tämän jälkeen kerrotaan, joka kadulla Amerikassa, joka on 33 Oxford Nimestään huolimatta kaupunki että olet. [00:28:25] Ja sitten jatkat kirjoittamista. Ja lopuksi, se tajuaa, että ne eivät tarjous palvelua kotiisi Cambridge tai jotain sellaista. Mutta kohta on, tämä on kaikkein aasimainen täytäntöönpano auto loppuun koskaan. [00:28:34] Ja olen juuri menossa pois tästä tangentti uudelleen. Mutta on olemassa hyviä keinoja käyttää JavaScript ja huonoja tapoja. Ja se ei ole välttämättä paras. [00:28:40] Mutta kohta täällä, ennen kuin tämä vuodatus, oli avata työkalut tänne ja avata kehitystyökalut, kuten olemme kannustetaan ennen, ja katsella Network välilehdellä klikkaan todella nopeasti. Ja huomaa läjän on saada pyyntöjä tapahtunut. Kaikki tämä tapahtui sen jälkeen raahasin. [00:28:57] Ja todennäköisesti, todellakin paljon näitä rivejä nyt on kuva slash JPEG MIME-tyypit tai sisällön tyyppejä. Tämä johtuu siitä, mitä kromi on tekemässä joka kerta kun klikkaa ja vedä, valitse ja vedä, on se ymmärtämättä, Oh, I täytyy mennä kysymään Google laatta kartalle, joka on täällä, nopeasti ladata sen HTTP, ja lisää se sitten ns DOM web-selaimet muistiin puu edustus niin, että käyttäjä, minulle, näkee, että päivitetty laatta. Ja tämä johtuu tekniikkaa kutsutaan AJAX. Takaisin seuraavana päivänä, se todella oli kyse, että jos Halusimme muuttaa mitä ruudulla, sinun on napsautettava ylös, alas, vasemmalle, oikea. Ja sitten uusi sivu avaisi. Mutta näinä päivinä, kaikki on dynaamisempi. Se tapahtuu sillä tavalla me ihmiset olisi Toivottavasti se todella olisi vuorovaikutteisesti. Ja se saavuttaa tämän tapa tekniikkaa kutsutaan AJAX, joka on ehkä paras selittää esimerkki. Ensinnäkin haluan mennä eteenpäin ja avata tiedosto nimeltään quote.php sisään Nykypäivän jakelu koodi. [00:29:53] Ja anna minun tehdä symbol-- oho. Anna minun tehdä symboli = GOOG vain joitakin varastossa. Tai oikeastaan, tehkäämme yksi PSET ILMAISEKSI. Enter. [00:30:05] Ja nyt huomaa, mitä saan takaisin. Joten tämä on todella lyhyt PHP-tiedosto, että minä kirjoitti, että yksinkertaisesti lainaa koodi alkaen Pset7 n lookup toiminto ja sylkee tällä kihara ahdin ja lainausmerkit ja paksusuolen merkintätapa, ilmeisesti, nykyinen osakkeen hinta yritys, joka ohitat kautta saada. Joten tämä on erilainen useimmista mitä olemme tehty kyseisessä ilmoituksessa olen kirjaimellisesti sylkee mitä näyttää JavaScript-koodia. [00:30:27] Itse asiassa tämä on JavaScript-objekti. Itse asiassa vain olla selvempi, JavaScript Object Notation-- JSON-- on vain hieno tapa sanoa, että te voi edustaa tiedot JavaScript paljon kuten voit PHP näppäimellä arvo pareja. Joten jos halusin julistaa muuttuja JavaScript ja edustaa Zamyla varten instance-- struct varten Zamyla-- ja me kutsumme sitä opiskelija, tämä muuttuja. Hänen ID on yksi, talo on Winthrop, ja nimi on Zamyla. [00:30:53] Mutta voin olla myös joukko esineitä. Joten jos olen itse halunnut array JavaScript sisältävät useita esineitä, tämä aika Henkilöstöä edustavat, Saatan olla nämä kolme paloina koodi takaisin takaisin takaisin näille kolmen entisen henkilökunnan jäsentä. Niin syntaksi, kaunis samanlainen both-- PHP. Mutta tämä on erityisen JavaScript. Se on esine merkintätapa. Joten mikä on tämä hyödyllinen? [00:31:17] Jos kirjoitan koodia, joka sylkee JSON-- JavaScript Object Notation-- kamaa, että näyttää tältä tai tavaraa, näyttää Zamyla rakennetta, Voin todellakin käyttävät tätä ohjelmiin kirjoitan. Anna minun mennä ajax0.html. Ja tämä too-- ole paljon on tarpeen ryhtyä estetiikkaa. Vaan katsoa mitä tapahtuu. [00:31:34] Anna minun mennä eteenpäin ja kirjoita ilmaiseksi täältä. Klikkaa saada lainaan. Ja huomaa URL ei ole muuttunut. Mutta en saa pop up kanssa ilmeisesti Nykypäivän penniäkään varastossa hinta 0,15 dollaria. Joten kaikki, että huono. Mutta ero on se, että jotenkin, tämä tieto tuli takaisin minulle suoraan. Mutta katsotaanpa ottaa askel kohti jotain tutumpi. Versiossa yksi tämän, haluan tyyppi Vapaa uudelleen, napsauta Hae lainaus, ja now-- Voi, tämä oli todella jQuery versio. Joten me-- en nopeasti eteenpäin aivan tarpeeksi pitkälle. Anna minun mennä versio kaksi, mikä on kun halusin. Huomaa, mitä olen tehnyt täällä. Minulla on web page-- Super yksinkertainen versio tahansa web-sivun voit käyttää tänään tekstikenttään täällä ilmaiseksi ja sitten ilmeisesti juuri tekstiä. [00:32:14] Tämä ei ole lomake tästä, ilmeisesti. Mutta jos klikkaan saada lainaus, huomaa minun verkkosivu on muuttumassa kuin olisin juuri uuden pikaviestin tai kuin olisin juuri muuttanut kartta ja tarpeen saada lisää tietoa lisätään dynaamisesti web-sivun ilman URL muuttuu ja käyttäjä kokemus saada keskeytynyt. Itse olen vielä täsmälleen sama place-- ajax2.html. [00:32:35] Joten katsomaan vain tätä esimerkkiä ja miten tämä tapahtuu. Anna minun mennä ajax2.html. Ja huomaa muotoon ensin. [00:32:44] Tänne, olen kääntämällä pois automaattinen täydennys. Joskus se saa harmittaa jos selain yrittää näyttää koko historia. Joten voit tehdä sen HTML vain sanomalla automaattinen täydennys pois. [00:32:53] Olen antanut tämän tekstin kenttä symbol-- pikemminkin tunnus symboli. Ja nyt, tämä on mielenkiintoinen piirre. Emme ole puhuneet span, mutta voit ajatella sitä kuten kappaleen tag tai div tag. Se, mitä kutsutaan in-line-elementti, joka tarkoittaa et saa kohta rikkoa yläpuolella ja alapuolella. Se on juuri menossa pysyä verkossa ilman lyömällä vastaa tulevat. Joten olen antanut tämän kimpale HTML määritetään yksilöllinen tunniste että minä mielivaltaisesti kutsutaan hintaan. Ja minulla on Lähetä-painiketta. [00:33:21] Koska nyt here-- ja tämä on oikeastaan ​​erittäin hämmästyttävää, kuinka vähän koodia Voit kirjoittaa tehdä Suhteellisen siisti things-- huomaa, mitä olen tehnyt täällä, jos en selaa jopa pään tällä sivulla. Olen mukana ensin pääni komentosarjatunnus joka todella viittaa JavaScript-tiedosto muualle. Tämä on organisaatiosta joka kirjoittaa jQuery, ja tämä on vain antaa sinulle uusimmat versio heidän jQuery-kirjaston. [00:33:42] Joten tämä on tavallaan kuin terävät sisällyttää C tai vaatia PHP. Käytät komentosarjatunnus kanssa lähdemääritteen. Mutta nyt oma koodi on olemaan oikeassa täällä. [00:33:52] Huomaa Minulla on toiminto nimeltään lainausmerkkejä. Ja se näyttää hieman arvoituksellinen ensi silmäyksellä. Mutta katsotaanpa kiusaa tämä toisistaan. Anna minulle muuttuja nimeltä URL. Määrittää sen kirjaimellisesti tätä merkkijonoa. Joten, heittomerkkejä, lainausmerkit vuonna JavaScript vain antaa minulle merkkijono. Mitä plus tehdä? Ketjuttamista. [00:34:08] Joten tämä nyt on jQuery syntaksin joka vie hieman totuttelua. Mutta tämä tarkoittaa vain mennä saada minut DOM solmu, jonka yksilöllinen tunniste on symboli. Hashtag siellä tarkoittaa yksilöllinen tunniste symboli. [00:34:21] Dollarin merkki Suluissa tarkoita vain, kääri tämä jQuery eräänlainen salainen kastike niin saat lisää toiminnallisuutta. Ja sitten .val on ilmeisesti toiminnon, tai kuten me sanomme nyt, menetelmä sisällä tämän solmun että vain antaa sinulle arvoa. Niin lyhyt, ruma ja sekava koska tämä näyttää ensi silmäyksellä, tämä tarkoittaa vain saada käyttäjän kanssa kirjoitettu vuonna, laita se lopussa merkkijonon ketjuttamalla sitä. Siinä kaikki. [00:34:43] Joten nyt, kolme viimeistä riviä. Voit puristaa paljon toiminnallisuus pois kolme riviä. Tämä dollarin merkki, koska syrjään, on vain lempinimi erityinen globaali muuttuja kutsutaan kirjaimellisesti jQuery. [00:34:55] Dollarin merkki vain näyttää siistiltä. Joten jQuery yhteisö juuri sellainen Käytettyjen sen omaksi erikoissymboli. Se ei tarkoita sitä, mitä se tarkoittaa PHP. JavaScript, dollarin merkki on aivan kuin kirjainmerkki tai numero muuttuja. [00:35:07] Voit vain se nimi. Vain näyttää siistiltä. Joten yhteisö otti sen lempinimi oman kirjaston nimeltään jQuery. [00:35:13] Ja se on erittäin suosittu. Joten JSON on juuri näin. Se on toiminto, joka ihmiset on jQuery kirjoitti joka saa JSON peräisin server-- JavaScript Object merkintätapa. Siitä, mitä URL on se menee saada nämä tiedot? Ilmeisesti tästä URL-osoite tähän. [00:35:27] Ja mitä pitäisi selain toimi Heti kun se pääsee takaisin tästä vastauksesta? Ja tämä on taika AJAX, niin speak-- Asynchronous JavaScript XML. On vaikea nähdä tällaista Yksinkertainen esimerkki koska meillä oli täällä. [00:35:41] Mutta tämä oli asynkroninen siinä mielessä, että minun koodi, kun teloitettiin lähetti viestin palvelin mennä hakemaan minulle JSON. Ja se tapahtui erittäin nopeasti että sain vastauksen. Mutta mikä on mielenkiintoista on se, että tämä rivi koodia ei roikkunut minun tietokone. [00:35:55] En nähnyt spinning kuvaketta. En menetä kyky liikkua hiirtä. Oma selain oli oikeastaan ​​täysin hieno. [00:36:01] Sillä se, miten JavaScript käsittelee Palvelimen vastaus on seuraava. Ilmoitat mitä haluat soittaa takaisinkutsufunktio, joka tarkoittaa vain sitä, hei, JavaScript. Heti kun palvelin vastaukseksi JSON, voitte soittaa nimettömän toimintoa. [00:36:18] Ja ota siirtyi tämän toiminnon riippumatta merkkijono palvelimelle sylkemään argumentiksi kutsutaan tietoja. Eli toisin, sanoen, jos Olen kokoonpano dynaamisesti URL quote.php kulkee tässä symboli, kuten ilmainen tai GOOG tai vaikka mitä, Olen niin kerron JavaScript mennä saada, että URL-osoite. Muista, että selain aikoo palata jotain joka näyttää näimme earlier-- tätä. [00:36:42] Ja mitä toiseen väitteeseen tästä saada JSON sanoo kutsuisin tätä toimintoa Kun palvelin saa takaisin onko se 10 millisekuntia lähtien tai 10 sekunnin kuluttua. Ja heti kun teet, Lisää hinta sivulle. Tämä syntaksi täällä vain tarkoittaa mene saada solmuun puusta, jonka yksilöllinen tunniste on price-- että span näimme aiemmin. [00:37:01] Tätä menetelmää kutsutaan HTML sanoo vain, mene vaihda HTML, joka on siellä data.price. Mikä data.price? No, selain, muistaa, näytti tämä tulossa takaisin. Joten tämä on tieto. [00:37:14] Ja niin se on vähän arvoituksellinen nähdä pilkkuja täällä. Mutta itse asiassa, anna minun tehdä tätä. Saanen liitä tämä todella nopeasti osaksi gedit ja näytettävä tämä kuin näytimme Zamyla n rakenne aikaisemmin. [00:37:27] Mitä palvelin lähettää takaisin on pieni esine, joka näyttää tältä. Ja niin data.price on vain antaa minulle 0,1515. Niin paljon liikkuvia osat täällä kaikki kerralla. [00:37:39] Mutta avain noutoruokapaikkoja on että meillä on tämä kyky tehdä ylimääräisiä HTTP pyyntöjä JavaScriptin avulla ilman lataa sivu. Ja sitten voimme todella muuttaa sivun lennossa. Ja käy ilmi, että JavaScript ja muilla kielillä voidaan käyttää nyt ei vain muuntua verkkosivuja, mutta itse kirjoittaa ohjelmisto todellisessa tietokoneessa, ei rajoitu vain Chrome tai vastaavaa. [00:38:00] Itse asiassa, if-- Colton, voisitteko haluavat liittyä meihin takaisin tänne teidän lab koodin, ja Chang samoin? Mennään eteenpäin, nyt kun olen puhunut Anonymous toimii ja kutsuja ja todella uhmata kohtaloa täällä live demo vuotavia huipputeknologiaa, yksi Näiden Elite rörelsedon. Nyt tämä laite, muistaa, on pieni USB-laite samoin that-- se beautiful-- joka liitetään USB-portit. [00:38:25] Ja sitten se antaa tulon muodossa ihmisen eleitä havaitsemalla infrapuna- palkit, olennaisesti, liikkeet käsivarresta. Joten taas mitä Maria yritti päälle ennen oli lihaksikas, oikeastaan ​​tunne mikä muuttuu kätesi, tämä on infrapuna perustuu. Joten se etsii liikkeiden sisällä eräänlainen pallo jalka tai niin laitteen itse. [00:38:46] Joten miksi en ota puukottaa tämän ensimmäisen? Ja mennään eteenpäin ja heittää sinut riippukuljettimella täällä. Joten laittaa Colton n kannettavan täällä. Meillä Andrew televisiossa. Ja mitä haluaisit minun tekevän ensin? [00:39:00] COLTON: Menkää ja juuri laita käsiäsi tämä kaveri ja näet upeita glitter. [00:39:04] DAVID J. MALAN: Very nice. Tämä kaikki tapahtuu reaaliajassa. OK. Okei, ja juu. Niin mukavaa. Okei, mitä muuta voimme tehdä? [00:39:15] COLTON: Siirry seuraavaan näytön ja nähdä. [00:39:17] DAVID J. MALAN: Okei. [00:39:19] COLTON: hauska pieni peli jossa saat tehdä robotteja. [00:39:21] DAVID J. MALAN: Okei, joten tämä on väärennös kädet osoittaa minulle, mitä tehdä. COLTON: Kyllä Joten mene eteenpäin ja napata yksi lohkojen ja laita se päälle, että robotin kehoon. DAVID J. MALAN: Voi, on käteni. Oh. OK, ihastuttava. Hetkinen, OK. Siellä mennään. [00:39:41] COLTON: Tein yksi onnettomuus. [00:39:43] DAVID J. MALAN: OK, saan tämän kaveri. Perhana! Kun olimme harjoitella tätä viimeksi yö, tiedät mitä tämä vajosi? [00:39:51] Kuten tämä. OK. Seuraava? [00:39:55] COLTON: Toki. [00:39:56] DAVID J. MALAN: Okei, ja siellä on kolmasosa. Selvä. COLTON: Ja tässä yksi, saat to-- DAVID J. MALAN: Oh, tämä on kaunis. COLTON: --yeah, haukkua tämän kukan. DAVID J. MALAN: OK. Ei? Hukata. [00:40:14] COLTON: Voi, siellä mennään. [00:40:15] DAVID J. MALAN: Ah, katso että. Very nice. No, miksi dont 'otamme pois yksi vapaaehtoinen täällä jotka haluavat tulla ylös. Entä tuolla vihreä, se on? [00:40:27] Selvä, ja katsotaanpa have-- sen sijaan tehdä, että jotkut teistä ehkä tiedätte tämä peli here-- leikata köyden, kenties? Katsotaanpa. Meillä lasit tänne? [00:40:37] OK. Kiitos. Mikä sinun nimesi on? [00:40:39] Yleisö: Laura. [00:40:40] DAVID J. MALAN: Laura? Mukava nähdä. Jos et mielessä laskemisesta Google Glass yli lasit. Tämä on Colton. [00:40:46] COLTON: Hei. Hauska tavata. [00:40:48] DAVID J. MALAN: OK, tule ympäri. Okei, niin mitä aiot tehdä täällä, se on pelannut tätä ennen, on laita kättä Leap Motion täällä. Ja nyt nuolen pitäisi liikkua. Voi, nope. [00:40:57] Yleisö: Ei. [00:40:58] DAVID J. MALAN: Me eivät halua lopettaa vielä. OK, odota. Tänne. Niin huomaa kuin pidät sormellaan jotain, hiiri alkaa mennä vihreä, joka on, miten osoitat. [00:41:06] Joten hääriä Toista. Ja vain yksi sormi on hieno. Ja nyt klikkaa pikku vihreä kaveri vasemmalla. Ja nyt pitää, kunnes se täyttyy vihreä. Hyvä. Nyt, kuten, taso yksi ylös. [00:41:16] Yleisö: Joo, me haluamme tason yksi, täällä. [00:41:20] DAVID J. MALAN: Hyvä. OK, joten sinun tehdä, on leikata köyden. Kohdistin on valkoinen yksi siellä. [00:41:28] Very nice. Okei, se on noin kovemmaksi. Joten pidä sormea ​​seuraava nyt. Hyvä. Tämä vaikea. [00:41:39] Yleisö: Voi paska. OK. Se haluaa mennä näin. Voi paska, that-- [00:41:44] DAVID J. MALAN: Joo. Toissijainen tavoite on saada kaikki tähdet. Okei, seuraava. [00:41:53] Katsotaanpa, jos voit saada tämä kolmas. Hyvä. OK, mene tuonne. [00:42:06] Toki. Voi hyvin mukava. Selvä. [00:42:11] Joten miksi emme lykätä täällä tänään? Anna kenenkään tulla jopa joka haluaa pelata. Kiitos paljon Laura Vapaaehtoisemme. Ja näemme sinut maanantaina. [00:42:18] Yleisö: Et luultavasti halua näitä takaisin. [00:42:21] SPEAKER 2: Seuraavalla CS50--