[Muusika mängib] 

DAVID Humala: See on CS50. See on algusest nädalal üheksa. Ja see on see, mida oleks olnud hr Boole 200. sünnipäeva. Nii et see on stipendiaatide kellele oleme viidanud Juba mõnda korda, kuidas kasutada Loogiline muutujad õige ja vale, 1 ja 0 ja selline. Ja see oli Google'i Tribute to teda täna. Ta oleks saanud 200. Nii et kui soovite liitu meiega CS50 lõunaeine heita pilk link muidugi kodulehel. Ja selline nägu ja sõpradele Nende ootame teid siin Cambridge. Näod nagu need ootavad teid New Haven. Ja tegelikult, Ken New Haven lahkelt teinud mida nimetatakse animeeritud GIF Eli siin hiljutisel lunch-- GIF on veel teise graafilise failivorming, kellega sa oled familiar-- et tundub veidi midagi sellist. Nii lihtsalt jada of-- OK. Keegi siin Cambridge naerab. Kuid New Haven, käesoleva on tõesti naljakas, eks? Hästi. 

Nii ei liitu meiega seal. Siin Harvardi Konkreetsemalt sel kolmapäeval, kui sa oled üliõpilane või uustulnuk even-- või isegi junior-- mõelnud teha lüliti sisse arvuti teaduse, tean, et saad Ole CS nõustamine õiglane see Kolmapäev, varsti pärast klassi 4:00 arvutis teaduse hoone Maxwell Dworkin. Me paneme selle kohta kursuse veebisait homme, samuti. Donuts, ma ütlesin, saab kätte. 

Hästi. Nii naljakas story-- olin poking ümber internet, ja ma leidsin mõned vanad arhiivid minu endine kodulehel. Ja selgub out-- selle ümber aega, tundub väga aktuaalne kuna ma aru, et UC valimised on umbes käik uuesti. Nii et ma jooksin UC, kaotas vaeselt. Ja võib-olla oli see osaliselt, miks. Nii et see oli minu koduleheküljel ajal. Mingil põhjusel ma arvasin, et see oli hea mõte, enne ütlen inimestele Mis minu platvorm oli ja miks nad peaks hääletama mulle, et neil on klõpsata sisenemiseks teada, et informatsioon, mis tagantjärele on selline jube. Ma tõesti ei tea, mis see oli. 

Aga kindlasti ei ole aidata oma kampaania. Avastasin, et vanemate year-- Mul oli see Muppet kalender. Muppets olid omamoodi moes siis. Või äkki nad ei olnud. Mul oli Muppet kalender siis. Ja ma arvasin, et see oleks lahe nimi minu arvuti Harvard võrgus frogman.student.harvard.edu. Ajal, meil kõigil oli üheselt tuvastatav serveri nime. Ja sa võid valida mõned edevus nimi asemel oma nime. Ja ma läksin tuuker mingil põhjusel. 

Ja siis ma started-- veetsin palju aega klikkides neid linke täna hommikul. Ja see oli minu kohta lehel mis nüüd selline tundub jumalik. Aga see ka tunnistust ainult kui kaugele tehnoloogia on jõudnud. Ma mõtlen, et juba järgmisel päeval, 486 oli midagi. Nendel päevadel, see on super, super, super aeglane ja ka vähem kui sa oleks võinud oma omast taskust nendel päevadel. Seal on rohkem seal, et oli isegi piinlik. Nii et ma jätan ta seda. Aga see oli minu esimene Tuhoamisretki web-- oh ei. See polnud. Minu esimene tõeline Tuhoamisretki veebi programmeerimine oli selles kohas, mida ma lihtsalt unustasin. Mingil hetkel sain teada, kuidas teha korduvaid taustapilte. Ja nii ma leidsin selle plaatimistööd tõhusad, nagu hokimängija, jalgpall ja golf pall, või mis iganes see on jaoks Frosh IEd kodulehel. Ja see oli tegelikult, tegelikult esitas Esimene veebipõhine projekti võtsin nüüd-- Ma arvan, et võibolla üliõpilane aastal, junior year-- pärast pildistamist CS50 ja CS51, üks Ühise follow-klassi. Märkasin otsin läbi arhiivi et üks mu pärijatele ja sõbrad, Lee, millist muutunud autoriõigus ise. Aga see oli tõesti midagi sellist Ma peaks ise piinlikkust. Aga ajal, seda oli esimene veebileht, nagu ma ütlesin paar nädalat tagasi, mille uustulnuk saanud registreerida koduseinte spordi siin. Ja nii see osutub et taustapilte niimoodi ei ole nii hea idee. Aga veebis oli uus ja olime kõik katsetavad. Ja see on see, mida ma ilmselt tegid sel ajal. Hästi. Nii ilma pikema jututa, me minna käiku täna teile, tõesti, lõplik tükk, mis võivad teile Eriti kasulik lõplik projektide aga ka seda, et hakkab muuta kogu veeb tunnen natuke arusaadavamaks. Tõepoolest, me ei kavatse võtta kasutusele veel üks programmeerimiskeelt nimetatakse JavaScript, mis on sarnane ja erinevaid erinevalt alates keeltes me vaatasime siiani. 

Nii C, meenutavad, on see koostatud keeles. Sul on käivitada see läbi koostaja. Sa saad lähtekoodi vastuväiteid kood või nullidega ja need. Ja need on nullid ja need, mis Sinu CPU, Central Processing Unit, tegelikult aru. PHP seevastu ei ole kompileeritud keeles. See on see, mida? See on tõlgendatud keeles. Nii et mingi programmi nimetatakse tõlk, et on lugeda see-- ülevalt alt, vasakult right-- ja aru saada, mis kõik Sinu süntaks teeb ja tähendab, kas see on loop või seisund või mis tahes muu arvu programmeerimine konstrueerib. Nii et tõlgendanud keeles. 

Siis tutvustas HTML. Ja HTML ei ole isegi programmeerimiskeelt. Tahame kutsuda mida? Märgistuskeel, mis on lihtsalt mingi fancy viis öelda seda ei ole programmeerimisega konstruktsioone, nagu nägime isegi juba järgmisel päeval Scratch. Puuduvad silmuseid. Puuduvad tingimustel. See on tõesti keel umbes märgistus on teie andmeid ja vormindamist või struktureerimise see mingil moel. 

CSS, vahepeal sarnaselt ei programmeerimiskeelt. See on isegi rohkem esteetiliselt orienteeritud. Ja see võimaldab teil sorteerida ning peensusteni asjad kirja suurus ja värv ja paigutuse ning kõike seda. Siis oli meil 

SQL. Nii SQL on tõepoolest programmeerimine keelt mingis mõttes, kuigi kohandatud spetsiaalselt andmebaasides. Aga isegi kui me ainult tutvustab teile valida ja sisestada ja kustutada ja uuendada ja paar teistega Selgub, saate tegelikult kirjuta funktsioone või menetlused, nagu nad on nimetatakse, SQL, et otsida ja tegutseda päris PHP ja C funktsioone. Nii tean, et need on olemas. Aga me isegi ei viitsinud neid kui me lihtsalt kriimustada pinda siin. Ja siis JavaScript, viimane meie keeli ametlikult kasutusele. Nii JavaScript, liiga, on tõlgendanud keeles. Ja need tuttavad, teha soovite, et eristada seda mõned iseloomulikud nii C ja PHP? Mis teeb see erineb? 

Sihtrühm: See ei ole koostatud. 

DAVID Humala: Ütle uuesti? 

Sihtrühm: See ei ole koostatud. 

DAVID Humala: See ei ole koostatud. Nii see ka on tõlgendanud. Nii see ei ole koostatud. Aga mis teeb natuke nagu PHP. Aga see on ikka erinev PHP mõnel silmatorkav viis, vähemalt viis me kasutame seda. Jah? 

Sihtrühm: Ta jookseb kliendipoolse. 

DAVID Humala: Ta jookseb kliendipoolse tavaliselt. See on tõepoolest tähistav iseloomulik meiega kohe. C oli server-side mõttes et me tegime kõik CS50 IDE. PHP on seni olnud server-side niivõrd kuna ta on liiga, muutub interpreted-- ei koostatud, kuid interpreted-- sees CS50 IDE, mis muidugi on lihtsalt server või serverid pilve. 

Aga JavaScript, isegi kui sa lähed alustada kirjutamist, ütleme, pset Kaheksa ja võibolla lõplik projects-- oled läheb paremale seda CS50 IDE ja salvestage see olevate failide CS50 IDE, CS50 IDE ja omakorda pilv serverid millele see toimus, ei kavatse tõlgendada või täita oma koodi. Pigem läheb saadetakse muutmata kujul alla brauser. Ja see on siis läheb IE või Chrome või Firefox või Safari või mis iganes, et tegelikult tõlgendab see, ülevalt alla, vasakult paremale. Nii võti eraldusmärkide iseloomulik täna on see, et JavaScript on kliendipoolse ja PHP näiteks on server-side. Nüüd on sellel huvitavaid tähendusega jaoks, nagu intellektuaalomandi ja kes võib tegelikult näha oma koodi. Ja tõepoolest, võid minna veebis ja vaadata kõige mingi koodi, et keegi on kirjutatud JavaScript. Mõnikord on loetav, Mõnikord on obfuscated. Aga rohkem sellest õigeaegselt. 

Nii JavaScript, kenasti piisavalt, on super sarnased, süntaktiliselt, et C. Ja palju nagu PHP, pole peamine funktsioon. Kui te soovite alustada kirjalikult JavaScript koodi, kui sa näed täna sa lihtsalt alustada kirjutamist. Aga see on, näete, eriti kasulik kontekstis brausereid. Kuid mu väike disclaimer-- tavaliselt earlier-- oli öelda, et sa ei saa enam täna kasutamiseks JavaScript server-side kasutades väljamõeldud raames kutsutakse Node.js et mõned CS50 enda rakendused on kirjutatud. Vaata 50 tegelikult kasutab Node.js. Aga me ei kavatse keskenduda JavaScript kliendipoolne siin välja. 

Nii et siin on terve rida tingimusi, PHP. Vabandame, in-- tegelikult, et avalduses, samuti on õige. Siin on ka komplekt tingimused JavaScript. Süntaktiliselt on identne C ja PHP. Hr Boole väljendid on, Samuti süntaktiliselt identne nii C ja PHP. Meil on ka lülitite JavaScript et otsida identsed. Meil on silmad, mis on struktureeritud samamoodi, samas silmuseid, teha samas silmuseid. 

See üks on natuke erinev. PHP oli iga konstrukti et võite olla kasutades või siis kasutada pset seitse, ehk. JavaScript peab see eriversioon aga kus sa sõna otseses mõttes midagi öelda nagu muutuja võti objekti, mis on väga sisutihe viis öelda, kui mul on object-- ja me rääkida nende uuesti moment-- ja ma tahan korrata üle kõik võtme väärtus paare sees, Ma ei pea mõtlema, kuidas numbriliselt indeks neid null, üks, kaks, kolm. 

Ma sõna otseses mõttes öelda. Ja iga korduse JavaScript minu uuendab muutuv võti olla esimene võti, siis järgmine võti, siis järgmine võti, siis järgmine võti, ja nii edasi. Ja ma saan oma väärtust, koheldes objekti JavaScript, nagu me näeme, nagu oleks see on assotsiatiivne massiiv PHP. Tõepoolest, kui sa lõpuks mähitakse oma pahanda ümber, mida assotsiatiivne massiiv on PHP, sa ei mõtle seda nüüd identne objekt JavaScript. Aga see on natuke järeleandmisi. 

Massiivid otsida, kenasti piisavalt identsed PHP, välja arvatud üks märk. On üks asi puudu siin et me ei näe eelmisel nädalal PHP. Mis jätta? Jah? No dollari märk. Nii et me oleme tagasi enam normaalne maailmas, kus muutujad ei pea dollari märgid. Aga sa eesliide neid koos var tavaliselt. Ja var tähendab muutuja. Ja palju nagu PHP on lõdvalt typed-- kusjuures esineb liike, seal on numbrid ja stringid ja ujukite ja nii forth-- JavaScript korral on samuti tüübid. Aga see on lõdvalt kirjutada, et me oleme programmeerijad ei pea nende määramist. Me lihtsalt olema teadlik et erinevat tüüpi eksisteeri. 

Muutujad, meanwhile-- siin on, kuidas me võiks kuulutada "Hello, world" string. Pange tähele, et see on identne PHP, kuid ükski dollari märk. Ja see on midagi, me hakkate nägema rohkem täna kusjuures objekt oleks võtmed ja väärtused. Ja kui sa tahad proovida tuletada viimase week-- süntaks on veidi erinev. Aga natuke meelerahu kontroll-- kui palju võtmed see objekt näib olevat? Nii et ma näen nelja. Näen kahte. 

Nii et see on tegelikult kaks. Nii et see on kogumik kahe võtmega väärtus paare. Oluline on sümbol, mille väärtus on FB. Oluline on hind, mille väärtus on 101,53. Nii et need on kaks peamist-väärtus paare. Ja pidage meeles, PHP-- ja see on jälle justkui süntaktilise vahe. See pole veel kõik, mis intellektuaalselt huvitav. PHP võis kirjutatud sama asi nagu follows-- quote, võrdsetena. Ja ma saan muuta neid nurksulgudes. Ja siis ma seda muuta noteeritud sõna "hind." Ja siis ma ei kasuta koolonit. Mida ma kasutan eelmisel nädalal? Jah, võrdusmärk nool funky märke. 

Ja siis ma tegin sama asja siin. Sama asi siin. Ja ongi kõik. Nii et see on hea, kui see ei ole tõesti vajusid mälu lihtsalt veel, sest see on tõesti intellektuaalselt ebahuvitav. See on lihtsalt süntaktiliste erinevusi. Aga ideed on täpselt sama. Toas muutuja Laenu JavaScript on kogumik võtme-väärtuse paarid, millest üks on sümbol, millest üks on hind. Ja ma saan neile väärtustele järgmiste süntaks. Just nagu PHP, suutsin midagi like-- lasta mul see kast veidi suurem. Just nagu PHP, suutsin teha see-- oh, kurat võtaks. Ole nüüd. 

Just nagu PHP-- OK, siis me lihtsalt kasutada saatejuht märkmeid. Just nagu PHP, suudan teha $ quote $ quote ["sümbol"], ja see mind väärtus "sümbol." In JavaScript, see saab olema identsed, millega ma ei saa lihtsalt teha. Ainuke asi, mis on puudu on dollari märk. 

Nii kenasti piisavalt, siis seal on mitte kõik, et palju uusi süntaks. Mis siis täna keskendume, tõesti, on mõningaid ideid ja taotlusi. Ja esimene selline rakendus, mida võiks näinud, kui sa sukeldus pset seitse juba on seda süntaksit. Nii pset seitse, kui olete näinud või ei näinud veel, tean, et seal on fail, mis me anname sa helistasid config.json-- JavaScript Objekti kuju. Miks? Me tahtsime, et oleks võimalik anda teile malli mõned key-väärtus paare. Me tahtsime, et oleks võimalik anda teile nimekirja peremehe nimi server. Me tahtsime teile kohatäide oma kasutajanime ja kohatäide parool. Kui sa ei näe see veel, ärge muretsege. Veel selle aasta pset seitse [? spec. ?] Ja siis, Ilmselt me ​​tahame sind täita ülesandeid sest kui sa sisse logida CS50 IDE, et igaüks teist on oma kasutajanimi ja parool. 

Nii võiksime olen kasutanud pool tosinat või rohkem erinevat vormingut. Me oleks võinud kasutada txt faili. Me võiksime kasutada CSV faili. Võiksime olen kasutanud INI faili, XML-faili, terve hulk rohkem lühendeid, et sa ei oleks kunagi kuulnud. See on selline meelevaldne lõpus päeval. Aga super populaarne nendel päevadel on tekst vormi nimetatakse JSON-- JavaScript Object Notation-- mis näeb välja selline. See on veidi segasena, aga märgata mustreid. Hakkad avatud lokkis traksidega, ja siis lõpuks sama. Toas see on midagi. See on oluline väärtus paari. Nii et see on objekt, mis ma olen vaadates ekraanil siin mis on üks võti, mis on üks väärtus. Ja just aimates põhineb Eelmise muster, mis on võti siin? Andmebaas on asi vasakul jämesooles. 

Nüüd, väärtus juhtub olema mitmekordse read seekord. Aga väärtus algab lokkis traksidega ja lõpeb lokkis traksidega. Mida soovitaksite on tüüpi väärtus andmebaasi? Sõnastik või lihtsalt rohkem lühidalt objekti. Õigus? See on omamoodi andmebaasi struktuur, mis võib kasutada muid struktuure ise. Nii et kui kogu see asi, mida me oleme kokkukutsumise object-- ja objekti on lihtsalt kamp võtmeväärtuste pairs-- väärtus andmebaasi ise on objekt. Väärtus andmebaasis on terve hunnik peamiste väärtus paare, millest esimene on peremees, siis nime ja seejärel kasutajanimi, siis parool iga, mille väärtused, vahepeal on lihtsalt igav string jutumärkidega. 

Nii et isegi kui see ei ole super selge lihtsalt veel, tean, et see on lihtsalt standard, üsna igav viis andmete salvestamiseks vormikohase. Aga tavalisemaid vigu sa võiks teha, isegi pset seitse, on vähe lollusi, nagu siis, kui sa kogemata jätta komaga seal. See läheb kaasa fail ei pea tingimata olema loetav. Kui te kogemata jätta asjad hinnapakkumisi, see ei kavatse olla loetav. Nii et see on päris nitpicky failivorming, kuid see on üks, mis on super ühist. Ja meil juhtub seda kasutada, kuigi sa ei kasuta JavaScript teisiti, in pset seitse. 

Hästi. Seega pidage meeles, see pilt. Me rääkisime, HTML, et kood tunduda see. See on HyperText Markup Language [Kuuldamatu] lihtsalt "Tere, maailm." Aga siis tegime ettepaneku aega tagasi, et kui see aitab, võiksite mõelda sellest juba puuna. Tegelikult taandus, et me kasutada ainult loetavuse päralt või stiili päralt kohta Vasakul liiki tõlgitakse see puu, kus te on mingi eriline Juursõlme võime me üldiselt nimetatakse dokumendi, millest allapoole on just HTML element või sildi, HTML, mis siis on kaks lapsed, pea ja keha. 

Ja siis omakorda pea on pealkiri. Ja pealkiri on teksti väärtus. Ja keha sarnaselt on teksti väärtus. Nii et kui sa oled mugav ütlus et jah, siis võiks seda HTML ja joonista pilt nagu see, paremal pool on kena vaimne mudel, sest nüüd et meil JavaScript, programmeerimine keeles, et brauserid viia ning tõlgendada teile, Selgub, et mida me parasjagu ei koodi on alustada manipuleerida seda puu struktuuri mälu. Me ei pea ehitama puu mälu. Me ei pea tegema omamoodi pset viis stiilis andmestruktuur keerukust. Brauser, kenasti piisavalt, pärast tõlgendamisel HTML ülevalt alla, vasakule või paremale, on sõna otseses mõttes läheb esitate meile samaväärne pointer sellele kogu puu tasuta. Ta teeb kõik raske töö. See, mida Mozilla ja Apple ja teised on teinud meie jaoks. 

Ja JavaScript hakkame oleks võimalik kontrollida ja muuta ning teha Huvitavat et puu, muidu tuntud kui DOM või Document Object Model. Milliseid asju? Noh, tuleb välja, et JavaScript, seal on Selle pesumaja nimekiri sündmused, mis võib toimuda. Ja me ei ole tõesti kasutas seda Sõna kuna nädalal null ja pset null, kui me rääkisime Scratch. Enamik teist ilmselt ei kasutanud sündmuse oma Scratch projekti. Aga sa võiks meenutada, lihtne Marco Polo Näiteks, kui meil oli kaks haldjaid, kellest üks ütles, Marco. Teised kellest siis upon kuulamine ja kohtuistungil, et ürituse ütles, Polo. Kui ei ole, võid vabalt tagasi vaadata, et palju tagasi. 

Aga see on lihtsalt öelda, ja saate laadi tuletada nende nimed asju, JavaScript, selgub, läheb meile, kuidas kuulata hiire allakäik või hiir läheb üles või võti läheb alla või võti läheb üles või onSubmit onselect või onresizing midagi. Teisisõnu, füüsilise tegevuse et inimene saaks võtta brauseris mida te teete iga päev, võite kirjutada kood, mis jälgib neid sündmusi ja siis teeb midagi asjakohast. 

Näiteks, kui te kasutate Google Maps, Mis juhtub, kui klõpsad ja liikuda hiire, tüüpiliselt? Kui teil klõpsata ja liigutada? Jah? Täpselt. Kaardil hakkab liikuma. Nii saab omamoodi näha, mis on siin, mis on seal. Ja kuidas Google rakendada seda? Noh, arvatavasti on nad lehe paar neist Sündmuse kuulajad, mis ütleb, kuulake hiire down-- nii et kui kasutaja füüsiliselt surub oma puutepadi või tema hiir allapoole. Ja siis me otsime midagi liikumine või mõni muu sündmus, mis võimaldab meil jäädvustada lohistada. Ja tegelikult, drag on sarnaselt käesoleva dot dot dot nimekiri võimalikest valikutest. 

Nii et see saab olema võimas viis alustada vastates kasutaja isegi enne kui ta tegelikult klõpsab midagi selgesõnaline nagu esitama. Aga me ei kavatse võtta kasutusele paar teemat sinna. Aga kõigepealt lubage üleminek mõned tegelikku koodi. Nii et ma lähen edasi ja avada dom-0, mis on väga lihtne näide siin, et kui ma suumida lihtsalt on selle sisendi siin minu jaoks. Ja ma lähen edasi minna ja kirjutada "David" minu nimi ja vajutage Edasta. 

Ja siis, kuigi omamoodi odavalt, ma küsiks, et hüppab, mis ütleb, "Tere, David!" Nii et see on omamoodi nagu meie "Hello, world" et me tegime mõnda aega tagasi C ja isegi PHP sest ma olen dünaamiliselt väljastada minu nimi. Ma suudan kellegi nime siin. Ma võiks lihtsalt muuta seda, nagu, Hannah, kliki Saada. Ja tõepoolest, väike pop-up muutused. 

Nüüd, pop-ups on üks kõige kuritarvitanud omadused veebis. Ja tegelikult tagasi Päeva hüpikakende jõustusid moes, sest sa tahaks minna mõnda website-- ehk küsitav place-- See oleks siis äkki alustada peppering ekraani terve hunnik pop-ups. Ja nii see võime hüppavad aknad ees kasutajale ei olnud eriti hästi vastu inimkonna. Nii et miks sa näed Selle vältimiseks asi, mis lihtsalt teeb kogu see asi kole. Nii et me läheme vaja parem viis kiire kasutaja. Aga nüüd, et tundub, et töö. Nii lihtsalt intuitiivselt, mida Tundub, et siin toimub? Ma minna ja klõpsake Esita ning siis midagi juhtub, selgelt. Aga mida ei juhtu, et juhtus Viimase nädala igal ajal ma klõpsatud Esita? Mida ei juhtunud ekraanil? Vabandust? Värskenda. URL ei muutu üldse. Ma ütlesin, et see oli dom-0, ja ma olen ikka veel dom-0. Tavaliselt me ​​tahaks saada muutunud mõne muu URL, nagu register.php vms. 

Aga isegi kui ma jätta see asi klõpsates OK, märgata, et URL jääb täielikult panna. Ja tegelikult, kui ma olen natuke skeptiline, lubage mul avada Chrome. Lubage mul avada vahekaarti Network. Ja teate see on praegu tühi. Lubage mul minna ja uuesti Maria. Pole võrguliiklust üldse. Seega puudub HTTP. 

Nii tõesti, kui ma vaadata lähtekoodi jaoks see-- andke mulle selle akna sulgeda ja minna Vaata Allikas. Huvitavad. Tundub, seal on mõned uued sildid, nende seas script. Võtame pilk jooksul CS50 IDE täpselt, mida ma saadetakse kasutaja. 

Nii et siin on-- olgem keskenduda HTML ainult. Siin on alumine pool dom-0.html. Ja märkad, et see sai tiitli, pea tag, keha sildi, vormi tag. Aga mis hüppab teile erinevad, eriti kui sa oled kunagi kirjutatud ühegi JavaScript ise. Lubage mul kerida natuke paremale siin. Mul on sisend, teise sisendiks esitada. Mul on ID, mis on selline uus. Aga me ei näe seda CSS. Mida muud on kindlasti uut? Jah? Nice. 

Hästi. Nii et kui ta ütleb onSubmit, pane tähele, mis tundub järgivat. See on atribuut HTML nomenklatuur. Selle väärtus on see jutumärkide siin. Ja see tundub veidi imelik esmapilgul. See ei ole HTML. See ei ole CSS. See on, nagu te võite arvata, JavaScript. Seega tundub, et ehitada sinna veebileht on funktsioon nimega tervitama. Ja ma aimates, et lihtsalt sest see on sõna, tervitada. See ju avatud paren, lähedal paren, semikooloniga. Paistab C funktsioon, näeb välja nagu PHP funktsiooni. 

Ja tõepoolest, see läheb olla JavaScript funktsioon. Siis ma tagasi vale. Me tuleme tagasi et üks hetk. Aga kus on see funktsioon defineeritud? Noh las ma keri üles üles faili. Ja kuigi see on pikas reas, see on suhteliselt lihtne. Lubage mul suumimiseks siin keskenduda nende nelja. 

Nii JavaScript, lihtsalt nagu PHP, sa lihtsalt ütleme, sõna otseses mõttes sõna "funktsioon," nimi funktsiooni, ja siis sulgudes mis tahes arguments-- ühtegi argumenti käesolevas asjas. Ja pole mingit tagasipöördumist tüübist JavaScript, just nagu PHP. Nii et see on veidi vabam kui C. Avatud lokkis traksidega, tihe lokkis traksidega. Ehitatud JavaScript on funktsioon-- ei ole soovitatav funktsioon-- kuid funktsioon nimega alert kelle ainus eesmärk elus on tõmme, et päris kole küsib, et me nägime hetk tagasi. 

Nüüd on see omamoodi suutäie. Mis siin toimub? Nii hakakem esile kõik siin. See on sama argument hoiatada. Ja mis toimub? See lihtsalt tundub string. Ja selgub, et erinevalt PHP erinevalt C, ei ole oluline JavaScript Kui te ülakoma või jutumärkide. Nad on samaväärne. Ja ausalt öeldes, see on lihtsalt populaarne nendel päevadel JavaScript programmeerijad alati Kasutada ülakoma mingil põhjusel. See on lihtsalt asi, mida teha. Aga me võiksime kasutada jutumärkides, samuti. 

Nii pluss on uus tegelane. Aga need, kes seda teinud seda enne, mida ei pluss tähendab? Jah. CONCATENATE. Nii me nägime seda PHP. Seal on lihtsalt dot operaator PHP, et on concatenate kaks stringid koos. C oli tüütu seda teha. Meenuta pset kuus, mis oli especial valu kaela, siis oleks kasutada midagi strcat Pärast eraldamise mälu virnas või hunnik. Sul oli hüpata kaudu kõvadele lihtsalt concatenate kaks stringi. In JavaScript, see on super lihtne. Lihtsalt pluss operaatori vahel. 

Nii keeruka väljanägemisega asi tundub olevat see sest lõpus kogu see string, ma lihtsalt concatenate kohta hüüumärk. Nii et kui see, mis oli avanemise oli "Tere, David", "Tere, Hannah," "Tere, Maria," ja nii edasi, on selgelt et keset asi kahe plussid peab andma mulle juurdepääsu mida? Mis on seal kindel? Jah. Nii et ma teeseldes siin vastata nende nimi, eks? Nii oma nimi hüppasid üles viimases tulemus. Mida see tähendab? Noh, ma varem väljapakutud et Pildi et nn DOM on see eriline root element tee kuni top nimetatakse dokumendi. Ja nüüd selgub, et läheb olla eriline globaalse muutuja JavaScript, ehitatud, mis on terve hulk kasulikke funktsioone. Kasulike funktsionaalsus on võime saada igal järeltulija sõlme. Need ruudud või ristkülikud või ellipsid on vaid tippe puu, nii rääkida. 

Nii selgub, et ehitatud JavaScript dokumendi objekti on funktsioon, sest muidu tuntakse meetod, mis nimetatakse getElementByld. Süntaks helistades Funktsiooni JavaScript mis on sees eseme või muutuja on lihtsalt dot märke. Ja me nägime seda C mida struct süntaks. Sa näed seda pset seitse, omamoodi, omamoodi, kui näed CS50 :: päring. Koolon koolon PHP on teine kuidas kutsuda funktsioon, mis on sees mingi objekti. 

Aga nüüd JavaScript, see on lihtsalt dot. Ja nii see funktsioon, kenasti piisavalt, millist ütleb, mida ta does-- saada elemendi ID. Element on lihtsalt teine ​​nimi silti või sõlme DOM. Ja nii saan elemendi ID "name" tähendab see-- siin on minu HTML. Ja põhineb see HTML, mida sõlme või mida HTML tag olen ma läheb programmiliselt antakse helistades document.getElementById? 

Jah, täpselt. Ma lähen sisend element olemas, kelle ID on "nime." Nii öeldes saab mõtle seda funktsiooni, getElementByld, kui võimalus anda tagasi kursor selle konkreetse sõlme puu. Me ei ole koostatud selle puu, aga see on nii saada ligipääs sellele ristkülik või ristkülik poolt üheselt kindlaks selle kaudu oma ID. 

Nüüd, miks on see kasulik? Noh, selgub et kui olete saanud et sõlm, mis ristkülikut pilt, mis sõlme sees on, omakorda on terve hunnik properties-- võtme-väärtuse paarid või andmeid, millest üks on nn väärtus. Nii sõna otseses mõttes, see on selline suutäie selgitada kogu asja. Aga lõpus päeval, Kõik see teeb on teile string, et kasutaja sisestatud selles hierarhilises vormis. Aga ma ei meeldi paari neid asju. Või õigemini, seal on mõned uudishimu ikka. Kõik see tundus töötada. Miks sa arvad, et ma tagasi vale pärast helistab tervitama? See tundub veidi kole, et Mul on kaks avaldust seal eraldatud semikooloniga. Võtke vist. Kui ma välja tagasi vale, mida Võib juhtuda, vaid instinktiivselt? Vabandame, öelge uuesti? 

Avage kamp Windows. Nii potentsiaalselt võibolla midagi niimoodi juhtuks. Mida veel? Võib esitada taotluse, kus? Samal lehel. Nii, et tegelikult see, et lähemale vastata siin kuigi erinevalt minevikus, ma ei ole määratud tegevuse omadus, mis tavaliselt me ​​peame tegema. Selgub seal on default. Kui te ei täpsusta tegevuskava, see on nagu öelda quote, lõppeb või faili nimi ise, mis antud juhul oleks olla nagu dom-0.html. See on lihtsalt selline järeldada, või pigem kaudselt. 

Ja kui ma ei tee seda, olgem märgata. Lubage mul salvestada. Ja ma olen ära tagastamise vale. Lubage mul minna tagasi selle Näiteks ja Sundlaadi ta. Ja te võite mind näinud soovitan Selle kohta CS50 Arutle kamp korda. Kui midagi on kunagi tegutsev funky ja brauseri ei käitu nagu te ootate, Sageli tahad hoida Shift ja seejärel nuppu Värskenda. See sunnib iga faili laadimiseks ja ei kasuta oma brauseri kohaliku vahemälu või koopia, nii et nüüd, lubage mul minna ja avada minu inspektor, vahekaarti Network. Ma lähen klõpsa Säilita Logi sest ma ei taha seda kustutada ridu kui ma saan pühitakse minema mujale. 

Lubage mul minna siin ja kirjuta Andi, kliki Saada. Hästi. See tundub nagu oodatud. See ütleb: "Tere, Andi." Lubage mul klõpsake OK. Huvitavad. Pange tähele, et lehekülge muuta, kuigi algne lehel. Märka URL liiki muutunud. Ta lisas, küsimärk, mis on tavaliselt indikaatorina et me püüdsime esitada midagi. Ja siis allosas, Veelgi täpsemalt, siin on tegelik HTTP taotlust, mis sai vastuseks 200, et tõi mulle siia tagasi. 

Nii et see pole see, mida me tahame teha, eks? Sest ma ei taha lehte ümber laadida. Ma asemel tahtis tagasi vale, et lühise brauseri vaikimisi käitumist, mis Loomulikult oli, esitama lehel. 

Võtame pilk natuke parem näide. See on dom versiooni üks. Ja märkate järgmist. See on OK, kui sa ei grok kõik rida koodi. Aga mis on täiesti erinev selle rakendamist? Ma sätestada see käitub Sama, teeb sama asja. Mida ma ilmselt teisiti teha? Jah? 

Sihtrühm: [kuuldamatu]. DAVID Humala: Jah. Nii funktsioon on defineeritud differently-- Teisisõnu, puudu kujul, seal on line 7-- või Pigem line 8-- enam Kas mul on onSubmit atribuut. Eelmises näites, mul oli see. Ja siis ma sõna otseses mõttes kirjutas oma koodi siin. Ja siis ma ütlesin tagasi vale. Ja kui see ei hõõru sa valesti veel see peaks hakkama niivõrd kui, nagu HTML, kui me hakkasime tegema koostööd segama see CSS stiili omadusi, see lihtsalt hakkas natuke räpane või tunnevad natuke valesti. 

Samamoodi siin, kui kui alustate HTML, ja siis automaatselt sulpsti mõned JavaScript koodi keset jutumärkide, see on ei kavatse olla väga hooldatav. Õigus? See ei ole isegi selge esimesel koht, kus JavaScripti koodi. Seega oleks tore, kui põhimõte parem disain, Jätame meie HTML täielikult eraldi JavaScripti. 

Nii et seda teha, mida me oleme teha siin on following-- me lihtsalt kasutada HTML Markup ainult. Ja nii versioonis üks selle kõik Mul on on vorm, millel on unikaalne ID. Ja siis siin ma olen ära eriline omadus JavaScript kusjuures ma ei ole see, mida on nimetatakse anonüümne funktsioon. Nii selgub, et kui ma kutsun document.getElementById of "demo" see on nagu andes mulle viit Selle sõlme minu puu, vormi element, niiöelda. 

Nüüd ma lihtsalt tean teades natuke HTML nüüd oleme lugenud mõned online viide, et vormi element toetab terve hunnik korral listeners-- sisse Teisisõnu, pesumaja nimekiri sündmus kuulajatele, et me nägime hetk tagasi. Ma tean, lugedes dokumentatsiooni et onSubmit on kehtiv juhul kuulaja jaoks vormi element. 

Nii et kui ma tean, et see on ohutu, et ma teeksin following-- saada, et sõlm puu, vormi element, Juurdepääs oma nn onSubmit vara. Nii dot tähendab lihtsalt see on vara, nagu eriline väärtus sees on. Ja mida andmete tüübi olen ma määrates ilmselt to onSubmit, mis on tõhusalt muutuja sees Selle sõlme puu? See on valdkond sees, et struct. Milline on andmete tüübi? 

Funktsioon, yeah. Nii selgub, et PHP on see. Ja kuigi me ei öelda teile seda, C on ka funktsioon suunanäitajaks, on võime läbida ja anda ülesandeid kui muutujate väärtused ise. Ja me ei hakka regress tagasi C. Aga nüüd selgub, et Paremal pool siin, kuigi see tundub veidi funky, tähendab see, hey brauser, mulle funktsiooni. Ma ei hakka isegi viitsinud andes seda nime, sest ma olen sõna otseses mõttes läheb loovutada olgem nimetame seda aadress seda funktsiooni kohe onSubmit. Teisisõnu, brauseri, siis ei ole vaja teada, mis seda funktsiooni nimetatakse. Sa lihtsalt pead teadma kui see on mälu. Ja nii piisab lihtsalt on võrdusmärk seal ja ei viitsinud nimetades seda, nagu suva või tervitama või mõni muu sõna. Ja nüüd on see lihtsalt stilistilise asi. Ma võiks liikuda selles lokkis traksidega peale the-- sorry-- järgmisele reale nagu me tavaliselt CS50. Aga JavaScript, et see on tegelikult stiililiselt ühise muudkui lokkis traksidega, siis Esimene, sellele esimesele reale. 

Aga edaspidi, seal on midagi huvitavat. See avatud lokkis traksidega lihtsalt piiritleb algust oma funktsiooni. Funktsioon on nüüd identsed, välja arvatud Olen lisatud tagastamise vale sees seda funktsiooni. Kuna selgub out-- ja siis oleks ainult Seda teame lugemine documentation-- et kui funktsioon, et te määrata et onSubmit handler naaseb vale, brauser lihtsalt teab ja on nõus mitte esitada kujul serverisse. Kui ta naaseb tõsi, esitab ta see server põhjustel me näeme on kasulikud hetk. 

Ja siis semikooloni pärast lokkis traksidega seal lihtsalt tähendab, et ma olen teinud Funktsiooni määrav. Sa tead, mida nimetame niipea kui kuulete esitamist. Hästi. See on ikka vaieldamatult selline kole. Mida rohkem me saame teha? 

Noh, selgub siis version kaks, mis on last-- ja me lihtsalt pilk see. Kell risk teha see koledam, selgub et seal on raamatukogu maailma nimega jQuery. Ja jQuery on super Populaarseim JavaScript raamatukogu see on nii populaarne, et kõige mis tahes JavaScript-- see ei ole tavaline, et inimesed segadusse jQuery JavaScript. Miks? JavaScript on ise väga lobise viise things-- document.getElementById, dadadadadada. Sa lõpuks võttes väga pikk rida koodi. 

Nii mehe nimega John Resid, kes tegelikult töötab startup kuni nendel päevadel, tuli välja Selle raamatukogu aastat tagasi, et paljud inimesed on aidanud et nn jQuery, mis muudab süntaks järgmisel viisil. Ja just nii olen näinud seda, Sest sa oled alati vaata seda, kui teed veebipõhine lõplik projekt, see oleks samaväärne võimalus rakendamisel, et sama funktsiooni abil see eriline raamatukogu. 

Nüüd, selle asemel tease ta peale tervikuna, Lihtsalt pilk mõned mustrid. See süntaks on ilmselt kui palju anonüümseid funktsioone või nimetu funktsioonid või AKA lambda toimib? Kaks, eks? Ja sa tead, et isegi kui sa ei ole super hubane seda, lihtsalt asjaolu, et see ütleb funktsiooni () kaks korda. 

Ja selgub, et mida see kood on doing-- ja me vaadake Interneti viited, lõpuks selleni, et mõned aidata sellega. See tähendab lihtsalt, et kui dokument on valmis, minna ja registreerida järgmine funktsioon kui esitada käitlejale HTML element, kelle unikaalne idee on demo. Ja siis, kui see juhtub, Neid kutsutakse rida koodi. Ja see on traagiliselt rohkem lobise viis öelda tagasi vale. Ja me rääkisime sellest lihtsalt sellepärast, näete kood, nagu see online. Ja see on midagi, mida daunted. Aga mitte, pidage meeles, et see, mis on saab olema levinud JavaScript on see paradigma. Ja nii see on, miks me näitame seda nüüd. Hästi. Nii ei eluruumi liiga palju, et süntaks, on olemas mis tahes küsimustele Nende näidete või ideid siiani? Hästi. Nii saab seda kasutada midagi kasulikku. Making veebilehele, mis lihtsalt ütleb tere, nii ja nii ei ole nii huvitav, mitte jhk. See üks ei kavatse olla ilus, kuid see ei tee mitte midagi kasulikku. Las ma lähen tagasi oma kataloogi siin ja avada, öelda, vormi-0.html. 

Nii arvan, et see on uustulnuk intramural spordi registreerimise leht ilma CSS või mingit mõtet disaini. Ja ma tahan minna ja registreerida siin parooliga. Ja ma nõustun tingimused ja klõpsake registri. Ja nüüd kodulehel ütleb: "Sa oled Registreeritud! (Noh, tegelikult mitte.) " See tundub nagu see toimis, kuid lubage mul minna ja Sundlaadi. 

Ja lubage mul öelda, ei, sa ei ole vajan oma tegeliku e-posti aadress. Või äkki me lihtsalt öelda mail seal. Parool, nagu, 12345. Ja siis, just sellepärast, et ma olen idioot, nüüd on 123456789. Ja ma ei kavatse kontrollida oma kasti. 

Hmm. Hästi. Nii et mitmeid võimalusi arenguruumi. Ja sa tead, või on näha pset seitse, et saate kirjutada code-- ja sa pead kirjutama koodi PHP-- kaitsta vastu selliseid kasutaja vigu, sest kasutaja selgelt ei teinud koostööd. Ja ta ei ole andnud teile kõigile väärtustab sa tahtsid või isegi formaadis et sa tahtsid neid. Nii näete pset seitse, et Me võiks kindlasti olla mõned Kui tingimused, mis ütlevad Kui e-posti aadress ei ole username@something.edu, me võiks lihtsalt öelda sorry ja vabandust kasutaja palju, nagu te võite olla pset seitse. Või kui nad ei ole kontrollinud, et kast Selgub, PHP, võite avastada, et liiga. Ja kindlasti, kui paroolid ei sobi nagu register.php jaoks pset seitse, võite avastada, et. Aga see valu on kaela, et nüüd on nad nõuda meil minna kõik viis server. Kasutaja on teavitatud viga. Ja vähemalt kui te ei kasuta mõned Kasvataja tehnikaid, nüüd on nad klõpsata tagasi noolt. Kas poleks tore, nagu palju veebisaite täna kui sul oleks vahetum tagasisidet, koheselt? 

Teisisõnu, lubage mul minna versioon üks, mis saab olema mingit ilusam. Aga see ei ole seda funktsiooni. Humala, 12345, 123456789, ei läheb kast, Registreeru. Paroolid ei kattu. Nii et kuigi see pop-up on ugly-- Me ei saa seda asendada lõpuks koos midagi Bootstrap, mis näete pset seitse on väga populaarne library-- tegin tuvastada, et paroolid ei kattu. Hästi. Noh, las ma lahendan et kui kasutaja. Lubage mul minna ja öelda, 12345, 12345. Ikka ei kontrollimiseks kokkuleppele. Sa pead nõustuma tingimusi. Miks? 

Kui me oleme juba paika pannud, et seal on viis, ja me oleme kohustatud teile pset seitse tuvastada viga tingimused, nagu seda server-side, miks ma peaksin viitsinud ka seda teed JavaScript? Mis argument kasuks, lisades, mida sa parasjagu näha kui some-- seal on veel keerulisemaks. 

Võib-olla ei ole tagurpidi. Mis see võiks olla? Sihtrühm: [kuuldamatu]. DAVID Humala: Oh, huvitav. Potentsiaalne ärakasutamine. Nii kindel, kui sa ei käitlemise ekslik kasutaja sisend, et suur, võibolla on kõik parem kui see isegi ei jõua oma server. Ma lükkaks sinna tagasi ja ütleme, siis tuleb ilmselt määrata need mõlemad probleemid. Aga see on õiglane. Mida veel? 

Sihtrühm: [kuuldamatu]. 

DAVID Humala: Jah. See kood, nagu me varem öelnud, on tõlgendada kliendipoolse. See ei häiri server, mis tähendab seda ei juhtu mõjutada serveri koormus või võimsust. Ja nüüd, vähe vana mulle, see ei ole märkimisväärset mõju sest mul on üks kasutaja kohe. 

Aga kui sa oled igal kodulehel korraliku suurusega, Eriti suurim, nagu Facebook, rohkem võite hoida inimesi maha oma server parem sest server muidugi on ainult piiratud kogus RAM, hulga gigahertsi, hulga asju seda saab teha ajaühikus. Nii et kui seal on rohkem inimesi maailma lööb oma server, kogemata metsaraie valesti, sama hästi kui te saab hoida, et lasti maha oma server. Plus, eriti mobiilse device-- Kui olete kunagi logige my.harvard või Yale'i netid vms, seal on see peiteaeg palju veebilehed nagu see, mille ta võtab, nagu, kuradi teine ​​või kaks mõnikord. Ja siis, mu Jumal, kui sisestasite vale, siis sa pead vajuta tagasi ja uuesti sooritada. Nii et latency, eriti aeglasem võrguühenduste. Aga JavaScript, sest see töötab kliendi ja ei ole vaja minna edasi ja tagasi üle potentsiaalselt aeglane internet ühendus, võite saada peaaegu hetkega tagasisidet. 

Nii vaatame seda. Lubage mul avada vormi 0 vaadata HTML siin. Ja olgem lihtsalt näha, mis toimub. See on vorm, mille tegevus on register.php. Ma lihtsalt kasutades saada nii et ma ei näe URL. Aga paroole, me tahaks kindlasti tahame Selle muutmiseks postitada tegelikkuses. Siin on sisestusväli tüübiga teksti. Siin on veel üks sisend valdkonnas Sisestage parool. Siin on, kui sa pole kunagi näinud, sisend-tüüpi kast. 

Aga seal ei ole JavaScript siin üldse. See on lihtsalt HTML et läheb register.php. Aga versiooni üks, kus ma hakkasin saama need pop-ups, Vaatame, mis tegelikult juhtub siin. Versioonis üks, mida Ma lähen see-- ma arvasin, et võiks varisemine piisavalt piisavalt sõnu, aga ma jooksin välja. 

In versioon one-- seal me läheme. Versioonis üks, märka following-- ja ei ole parim rakendamine, aga see on minu esimene. Pange tähele, et allpool kujul, mul on script tag. Ja script tag tähendab, hey, brauser, siin on mõned koodi, Tavaliselt JavaScript. Ja nüüd, märkate, mida ma teen. On LINE suudan vaevu Loe see-- rida 32, siis ütleb, var form-- nii mulle muutuja nimega kujul. Ja siis saan document.getElementId "registreerimine". Mis see on? Noh, las ma kerida siin. Ja teate, ah, ma andsin vormi element suvaline, kuid kirjeldav idee Registreerimise. Nii et see annab mulle muutuja võimaldab mul haarata, et sõlm, et ristküliku puu nimega kujul. form.onsubmit vahenditega, hey brauser, registreerida sündmus kuulaja Selles vormis. Teisisõnu, kui see vorm on esitatud, täita järgmine kood. See ei ole vaja nime, sest miks sa pead teadma nime? Sa lihtsalt pead teadma mida täita, ergo see on anonüümne või lambda funktsiooni. Ja see funktsioon on kõik need read siin. Ja nüüd, kui aus olla, kuigi sa ei oleks kunagi kirjutatud JavaScript enne, see on lihtsalt C ja PHP loogika. Nii et kui form.email.value == "" - nii et kui e-posti valdkonnas on tühi, kisa kasutajale "Te peate annavad oma e-posti aadress. " Else kui form.password.value on tühi kisa kasutaja, "Te peate andma oma parooli." 

Veelgi huvitavam on loogiliselt kui form.password.value ei võrdne form.confirmation.value-- Kust kinnituse tulevad? Lubage mul kerida. Noh, ma helistasin selle sisendi valdkonnas siin salasõna. Ja ma helistasin selle ühe siin kinnitust. Ma oleks võinud seda nimetas Parooli kaks või midagi muud. Ma lihtsalt loogiliselt kontroll et need kaks on sama. Else-- selgub see hr Boole again-- tõeväärtuse, ruut. Nii et kui ma ütlen, hüüatus point-- Kui ei ole form.agreement.checked, kisa nii kasutajale. 

Nii et see süntaks näete on väga levinud JavaScript, kus teil see punktiir märke. Sa alustad objekt siin. Sa sukelduda sügavamale A vara nagu parool. Ja siis saad sa selle tegelikku väärtust. Ja jälle, siin on sisend. Siin on parool. Ja selle väärtus on sõltumata Inimese tegelikult kirjutada. 

Nii kõigis neis juhtudel, ma tagasi vale. Aga kui mitte, ma tagasi tõsi. Ja nii nüüd näeme kaalukaid kasutamine, kui siis oleks tagasi false lõpetada see, mida kasutaja teeb ja teha teda valida uuesti või kirjuta uuesti. Muidu me naasta tõsi. 

Ja lubage mul tutvustada üks muu variant see lihtsalt seemne mingi ettekujutus sellest. Noh, versioon 2 sellest, vormi-2-- Ma teen seda koos laine poolt. See on neile, uudishimulik, jQuery versioon, Neile, kes võiksid võõpama, et eelkõige raamatukogu. Aga olgem start-- ja küsimusi? Lubage mul peatuda hetkeks, sest et oli kiire ja palju. 

Aga hea asi on see, et kõik kood on üsna sama. Uus kraam, mida on dom? Mis need ristkülikud? Mis on need sõlmed? Mis anonüümne funktsioon? Mis sündmus handler? Aga õnneks, enamus sellest on lihtsalt ring täis, ütleme, nädal null. Hästi. Nii midagi veidi huvitavam? Noh, esiteks lubage mul minna edasi ja avada Google Maps. Ja märkad, et ette Praegu on sekundi murdosa, pane tähele, mis juhtub siis, kui Ma vajutan piisavalt kiiresti. Ja sellega seoses Harvardi on nii kiire, et sa tõesti ei märka seda. Aga mida sa selline omamoodi näha kui ma klõpsata ja liigutada tõesti kiire? Neile, vaadates online, kui sa aeglaselt seda 0,5x kiirusega, näed seda parem. 

Mis juhtub lihtsalt enne kui ma klõpsatud ja tirisid? Las ma proovin siin--, las ma teen midagi muud, näiteks 90210. Lähme kaugel. See oli tõesti kiire, liiga. Kuidas Disney World? Seal me läheme. OKEI. Mida sa nägid sekundi murdosa? Just, nagu ruudud, eks? Kohatäited plaadid? 

Noh, mis siin toimub? Google Maps on kena näide Selle tehnoloogia seda nimetatakse AJAX. Ja see on koht, kus me hakkame kasuta JavaScript eriti võluv viis. Juba järgmisel päeval oli Selle veebilehe nimega MapQuest. Ja ma oleks võtnud screenshot sellest alates 1990 kus, kui sa tahtsid otsida siin kaardil siis oleks sõna otseses mõttes klõpsake noolt kuni ülaosas et näitasin teile erineva ruudu kaardil. Kui sa tahad liikuda vasakule, siis klõpsatud noole, mis näitas sulle erineva ruudu kaardil. Ja mõned veebilehed ikka seda teha täna. Aga isegi MapQuest on saanud parem, nagu Google Maps. 

Selle asemel, mida on parem neid päeva on veebilehed, et kasutada AJAX. AJAX-- muidu tuntud Asynchronous JavaScript ja XML, mis on lihtsalt fancy viis öelda tehnoloogia või tehnikat, mis võimaldab brauseris JavaScript teha täiendavaid HTTP taotlusi pärast lehekülge on koormatud. Mida see tähendab? Noh, see oleks omamoodi tüütu Gmaili Kui iga kord, kui tahtsin kontrollida oma posti, sa olid sõna otseses mõttes tabas kontroll-R või Command-R või vajuta Reload nuppu ja kogu paganama lehele oleks uuesti. Õigus? Oleks vilkuma valge ilmselt teine. Sa näeksid loll progress bar. Ja lihtsalt et näha, kas teil on uusi mail, kogu veebilehe ja URL sa oled oleks uuesti laadida. 

Aga see pole see, mida juhtub Gmail. Õigus? Kui sa saad uue e-posti Gmail, mis juhtub ekraanil? See lihtsalt näitab üles, eks? See lihtsalt võluväel ilmub nagu uus rida tabelis. See tegelikult kaasneb korralik summa keerukust. Tegelikult, kui sa arvad seda puud, mis, kuigi on lihtne siin, Gmail-- ja ma pean otsima kell kood olla sure-- Tõenäoliselt on HTML tabeli või äkki järjestamata nimekirja, et see muudab iga oma postkastidesse kirju nagu. 

Ja kui te kujutate ette, see on on puu mälu, kui sa oled Gmaili, mis näeb välja selline omamoodi nagu see, kui Google saab aru, ooh, sul on uus e-posti, see ei ole soovite taastada terve puu. Pigem soovib leida sõlme puu, mis esindab oma postkasti ja lihtsalt sisestada uue sõlme. 

Nii väga sarnane pset viis, kus te tuli sisestada sõlmede ümber hash tabelit, Samamoodi ei Google kaudu JavaScript koodi, et see on kirjutatud, Rihma seda puud, aru saada, kus on see, et postkasti akna osa, ja siis lisab uue rea. Ja uue rea tähendab lihtsalt üks või enam uut tippe puu. 

Ja nii AJAX on see tehnika mis võimaldab just nii. Kui olete külastanud URL, aga hull pikk see on, ja kui leht on laaditud, saate siiski Haara rohkem andmeid internet-- kas see on talle või plaat on map-- haarata kulisside taga ja siis pistke see lehekülg nii, et inimene ei ole tegelikult pead ootama seda. 

Facebook Messenger töötab samamoodi. Iga rida teisi websites-- oh, tegelikult isegi seda. Ma mõtlen, et see on ausalt öeldes selline tüütu funktsioon nendel päevadel. Kui ma alustan otsivad cats-- seda on selline jube kasutaja kogemus. See lihtsalt hakkab otsima mind. Noh, mida ta teeb? URL ei ole muutunud sest ma hakkasin kirjutama. Aga mis toimub kogu wire-- OK, hmm huvitav. Mis toimub kogu traat siin lihtsalt muutub imelikum. 

OKEI. Nii et lubage mul minna ja kontrollida element ja minna vahekaarti Network ja proovige teha seda tehniline ja vähem umbes kassid. Nagu ma kirjutada, sõna otseses mõttes, kassid and-- mis toimub per-- Ma ei kavatse klõpsake seda. Hästi. Nii siin, mis toimub iga kord, kui ma kirjutad, ilmselt? Like, madal? Mis toimub iga nende tegelased ma kirjutades minu klaviatuuri? Jah? Sihtrühm: [kuuldamatu]. 

DAVID Humala: Täpselt. Kõik need tegelased on läheb Google, üks korraga. Nad ehitavad üles string oma server, mis tähistab kõike olen sisestanud siiani. Ja iga kord, kui ma kirjutada teise iseloomu, nad kasutada oma saladust kaste on otsingu algoritm ja nuputada, Kas ta tähenda see kass lehele või sellele kassile lehele vms? Nii mingis mõttes annab see mulle parem kogemus, et ma isegi ei peavad täitma minu mõte. Ja tõepoolest, see on kasulik asi, autotäitm üldiselt. Kui oma algoritme on piisavalt hea ja kui minu otsingud on ilmne piisavalt, Mul ei ole kirjutada terve sõna. Nad ei ütle mulle, mida see on ma tegelikult otsivad. Mida Google nõuab kohest otsing on lihtsalt AJAX, kasutades koodi, mis võimaldab neil taotleda täiendava sisu veebibrauseri kaudu kulisside taga, kasutades seda Uue keele JavaScript. Nii et meil on paar minutit aega. Ja andke mulle helistama minu sõber Colton kuni lavale, kuna see tundus eriti lõbus viimast korda kehtestada tehnoloogia et mõned teist on väljendanud huvi aastal lõpliku projekti. Arvasime, et see oleks lõbus tuua kuni vabatahtlikuna, kuigi täna näidata teile lisaks see, mis võimaldab sina-- yeah, Ma nägin seda kätt esimene. Tule üles. Väga hästi tehtud. Tubli töö. Ma lähen projekti selle kohta ekraan hetk. Mis su nimi on kõigi jaoks? 

EFA: ma olen Efa. 

DAVID Humala: Etha? 

EFA: EFA. 

DAVID Humala: EFA? 

EFA: Jah. 

DAVID Humala: Tore teid näha. Hästi. Las ma saan selle valmis. Tulge üle keskel koos Colton siin. Mis Colton on käes täna on kaugjuhtimispult. Nii et pigem lihtsalt seista seal on kolmemõõtmelise maailma vaatan nagu Colton tegin, nüüd Efa saab tegelikult jalutada minnes üles alla, vasakule ja paremale nagu Nintendo või Xbox kontroller. EFA: Ma lähen kukkuda etapil. DAVID Humala: ma seista umbes siin. Aga see on risk. OKEI. Nii et laske käia ja panna neid edasi. Lubage mul minna ja lülitub ekraan siin. Lubage mul päevasõidutulede tuled. Ja Colton, lase mind tulnud seista sinu kõrval. 

Kas sa tahad, et selgitada siin koos mikrofoniga, mida me teeme? Palun. 

COLTON: Muidugi. Nii just nüüd laadimise üles Oculus, Ma arvan operating-- ei tööta süsteemi, kuid peamine programm, kus pääsete kõik mängud ja apps, mis on oma raamatukogu. Nii kohe, see peaks ütlema koputage puuteplaadi alustada. Puuteplaat saab olema kohta paremal pool peakomplekti. Nii et laske käia ja tap-- EFA: Oh, mees. DAVID Humala: Jah, seal lähete. Kvaliteedi Efa on näha on palju kõrgema kvaliteediga. See on lihtsalt Wi-Fi siin. COLTON: Mis sa oled tahame seda teha on välja ülalt paremas servas. Yep, et mäng väga üleval paremal. Ja siis, kui sa valides see, koputage puuteplaadi uuesti. Ma arvan, et tema Dreadhalls. Ja siis siin on a_N siin, las mul hoida oma prillid eest. 

Nii et ma lihtsalt andsin talle kontroller. Nüüd ta saab juhtida mängu. Ta võib liikuda ja värki. Nii et laske käia ja otsida üles. Sa peaksid nägema New Game. Nii et laske käia ja mida saate teha, et. Nüüd siis peaks olema võimalik kontrollida ennast töötleja, samuti kiiresti mängu laeb siin. See võib olla natuke hirmutav. 

EFA: Nüüd sa mulle öelda. OKEI. 

COLTON: Okei. Nii kinnitavad, et saate liikuda. OKEI. Võite liikuda. Perfect. Nii et kui sa vaatad alla, siis on kaart. Kaart näitab, kus sa oled. Võite vaadata ruumis ringi. Võite täiesti ümber pöörata. Jah, täpselt. Pööra ümber. 

Seega otsige oma vasakule. Ma arvan, et seal on midagi, mida saab korja barreli ruumis. 

EFA: Kuidas saada map välja viis? COLTON: Vaata üles. Lihtsalt otsida. Hästi. Palun. Nüüd minna ja lihtsalt ümber pöörata. Nii vaatame kaugemale oma vasakule. Liigu vasakule. Hoidke vaadates vasakule. Jätka. Jah. 

EFA: Oh, nii. 

COLTON: Jah. Kõnni suunas kontrolleriga. Palun. Nüüd peaks ütlema tulla. Palun. Pick it up. Hästi. Nüüd lähme siit toast välja. Lase käia ja jalutada, et uks. Nii et sa lähed hold-- öeldakse hoidke nuppu, et panna see avatud. Nii et laske käia ja hoidke nuppu all. Yep, sundides seda avada. Hästi. Tubli töö. Nüüd kõnnid toast välja. Nii et ma jätan ülejäänud up sulle ja vaata, mida sa teada. EFA: ma ei kavatse pimedas ruumis. Oh, oota. Nüüd on mul minna pimedas saalis? OK, ma lähen tagasi [kuuldamatu]. COLTON: Okei. Mõned rohkem punkte kiirenemist. Paistab, mõned mündid. See on lukk pick. Nii et kui sa leiad lukustatud uks, mida saab kasutada, et. Kas sa kardad? 

EFA: Pole veel. COLTON: OK. 

Pretend-- yeah. Lihtsalt teeselda olete tegelikult seisis seal. Ja kui lülitad lihtsalt ringi sa pead harjuda sellega. Aga see on mõistlik. DAVID Humala: Ja samas Efa jätkuvalt mängida, sest me ei tee seda kogu päeva, me kõik tip-toe siin. Aga meil on veel kaks paari, Kui soovite tulla ja mängida. Vastasel juhul näeme Teile järgmise kolmapäeval. Aitäh meie vabatahtlikele täna. [APPLAUSE] 

[MUSIC - "Seinfeld teema"] SPEAKER 1: Noh, ma olen paneb uue PL mount. Ma lihtsalt muutnud OLPF-- 

SPEAKER 2: Mis siis täpselt sa teed? 

SPEAKER 1: Noh, iga üks these-- Siin ma näitan sulle see siin. Te näete seda siin. 

SPEAKER 3: Ma arvan, et ma olen hea nende. Sa tahad veel? 

SPEAKER 4: Ei, ma olen hea. [Kuuldamatu]. 

SPEAKER 3: Ei, [kuuldamatu]. Kas mõned. SPEAKER 1: erinevat värvi. SPEAKER 2: nuppu OK. SPEAKER 1: Nii lõpuks, mida ta ei ole see reguleerib värvi of--