[Predvaja glasba] 

DAVID Malan: To je CS50. To je začetek devetih tednu. In to je tisto, kar bi morali bil g Boole 200. rojstni dan. Torej, to je fantje komu smo omenili Kar nekaj krat o uporabi Boolove spremenljivke true in false, 1 in 0 in podobno. In to je bil Google poklon njim danes. On bi obrnil 200. Torej, če želite se nam pridružite za CS50 kosilu, si oglejte povezavo na spletni strani seveda je. In taki obrazi in prijatelji so ti vas čakajo tukaj v Cambridgeu. Obrazi kot ti, vas čakajo v New Haven. In v resnici, Ken v New Haven vljudno na kar se imenuje animirani GIF Eli tukaj na nedavni lunch-- GIF še en grafični format datotek, s katero ste familiar-- da izgleda malo nekaj takega. Torej samo zaporedje of-- OK. Nihče tukaj v Cambridgeu se smeje. Toda v New Haven, je to je res smešno, kajne? V redu. 

Tako da se nam pridružite tam. Tukaj na Harvardu, Natančneje, ta sreda, če ste letniku ali novinec even-- ali celo junior-- razmišljanje oblikovanja stikalo v računalnik znanost, vedo, da bom se CS svetovanje sejem to Sreda, kmalu po razredu ob 4:00 uri v računalniku Znanost stavba Maxwell Dworkin. To bomo dal na tečaj je Spletna stran, ki jih jutri, kot dobro. Krofi, bom povedal, bo treba vročiti. 

V redu. Tako smešno story-- sem poking okoli na internetu, in sem našel nekaj starih arhivov moje bivše spletni strani. In se izkaže out-- okoli tega Tokrat se zdi zelo pravočasno saj sem zbrala, da volitve UC je prišlo na orodju spet. Zato sem tekel za UC, izgubila klavrno. In morda je to v delu, zakaj. Torej je bila to moja spletna stran v tistem času. Zaradi neznanega razloga, sem mislil, da je dobra ideja, preden povem ljudem kaj je moja platforma je in zakaj se bi morali glasovati za mene, da imajo kliknite za vstop, da ugotovite, da Informacije, ki se v retrospektivi je nekako grozljivo. Res ne vem, kaj to je. 

Ampak to zagotovo ni pomaga oglaševalsko akcijo. Prav tako sem ugotovila, da ga višji year-- sem imel ta koledar Muppet. Muppets so bili nekako v modi takrat. Ali pa morda niso bili. Imel sem koledar Muppet takrat. In sem mislil, da bi bilo kul, da ime moj računalnik na omrežju Harvard frogman.student.harvard.edu. V času, ko smo vsi imeli unikatno prepoznavnih imen gostiteljev. In lahko izberete nekaj nečimrnosti ime namesto svojega lastnega imena. In sem šel z Človek žaba iz nekega razloga. 

In potem sem started-- sem preživel veliko časa klikom prek teh povezav to jutro. In to je bil moj o stran, ki zdaj nekako zdi čudovit. Vendar pa priča tudi samo kako daleč tehnologija je prišel. Mislim, nazaj v dan, 486 je bilo nekaj. Te dni, to je super, super, super počasen in tudi manj kot ste morda v vaši lastne žepe v teh dneh. Tam je več tam, da je še bolj neprijetno. Torej bom ostati pri tem. Toda to je bil moj prvi plenilec v web-- oh, no. To pa ni bilo. Moj prvi pravi plenilec v spletno programiranje je to mesto, ki sem ga pozabil. Na neki točki, sem se naučil, kako da ponavljajoče se slike v ozadju. In tako sem našel to polaganje ploščic učinkovita, kot hokejista, nogomet in golf žoga, ali karkoli že to je, za spletno stran Frosh IPS. In to je bil v resnici, resnici bilo prvi spletni projekt sem on-- Mislim letniku leto, junior year-- Po zaužitju CS50 in CS51, en skupnih nadaljnjih na razrede. Opazil sem v iskanju po arhivu da je eden od mojih naslednikov in prijatelji, Lee, nekako spremenilo avtorske pravice za sebe. Toda to je bilo res nekaj, kar Jaz bi moral lastnik zadrego. Toda v času, to je bila prva spletna stran, kot sem rekel pred nekaj tedni, s katero novinec lahko Registrirajte se za Notranji šport tukaj. In tako se je izkazalo, da slike ozadja kot da niso tako dobra ideja. Toda web je bilo novo, smo bili vsi eksperimentirati. In to je tisto, kar sem očitno niti v času. V redu. Torej, brez odlašanja, zamenjamo orodja danes, da vam, res, zadnji kos, da boste morda našli še posebej uporabno za končnih projektov ampak tudi, da se bo začela da je celoten svetovni splet počutim malo bolj razumljivo. Dejansko bomo uvesti en programski jezik imenuje JavaScript, ki je podobna in drugačen na različne načine od jezikov, smo pogledal tako daleč. 

Torej C, odpoklic, je ta sestavljen jezik. Moraš teči skozi prevajalnik. Dobiš izvorno kodo, da nasprotuje koda, ali ničle in narave. In to so ničle in tisti, ki vaš CPU, centralna procesna enota, dejansko razumeli. PHP, nasprotno, ni preveden jezik. To je kaj? To je razlaga jezik. Torej je nekaj program, imenovani tolmač, ki mora prebrati it-- vrha do spodaj, levo right-- in ugotoviti, kaj vse skladnja počne in pomeni, ali je zanka ali pogoj ali katero koli drugo število programiranja konstrukti. Torej, to je razlaga jezik. 

Potem smo uvedli HTML. In HTML ni niti programski jezik. Mi bi to, kar imenujemo? Označevalni jezik, ki je le neke vrste fancy način tako rekoč nima programskih konstruktov, kot so smo videli celo nazaj v dan nič. Ni zanke. Ni pogojev. Res je jezik o označevanju kopiranje podatkov in oblikovanje ali ga strukturiranje na nek način. 

CSS, medtem, podobno ni programski jezik. To je še bolj estetsko usmerjen. In to vam omogoča, da razvrstite fine-tune Stvari, kot so velikost pisave in barv in postavitev in vse to. Potem smo imeli 

SQL. Torej SQL je res programiranje jezik, v nekem smislu, čeprav prilagojena posebej do baz podatkov. Toda čeprav samo vam predstavim izbrati in vstavljanje in brisanje in posodobiti in nekaj drugih, Izkazalo se je, da lahko dejansko napisati funkcije ali postopki, kot oni imenuje, v SQL, ki izgledajo in delujejo čisto tako PHP in C funkcij. Torej veste, da tisti, obstajajo. Ampak sploh ne trudim z njimi saj smo samo praska površino tukaj. In potem JavaScript, zadnji naši jeziki uradno predstavil. Torej JavaScript, preveč, je razlaga jezik. In tiste, seznanjeni, storite želite, da se razlikuje z nekaterimi značilnimi tako iz C in PHP? Zaradi česar je drugačen? 

OBČINSTVO: To ni sestavljen. 

DAVID Malan: Ponovi? 

OBČINSTVO: To ni sestavljen. 

DAVID Malan: To se ne zbirajo. Torej je tudi ta, je razlaga. Torej, to je, ne zbirajo. Ampak, zaradi česar je malo všeč PHP. Ampak to je še vedno drugačna od PHP na nek presenetljiv način, vsaj na način, ga bomo uporabili. Ja? 

OBČINSTVO: Teče odjemalsko. 

DAVID Malan: Teče strani odjemalca, običajno. To je res razpoznavni značilno za nas prav zdaj. C je bil na strani strežnika v smislu da smo storili vse, kar je v CS50 IDE. PHP doslej je bilo server-side, če kot je to, preveč, postane interpreted-- ne zbirajo, vendar interpreted-- znotraj CS50 IDE, kar seveda Samo strežnik ali strežnike v oblaku. 

Toda JavaScript, celo čeprav ti boš da začnete pisati za, recimo, pset osem in morda končno projects-- ste dogaja, da je prav v CS50 IDE in ga shranite v datotekah v CS50 IDE, CS50 IDE in v zameno, strežniki v oblaku na kateri je gostila, se ne bo interpretirati ali izvršiti svojo kodo. Namesto, da se dogaja, da se pošlje v nespremenjeni obliki do brskalnika. In to je potem bo IE ali Chrome ali Firefox ali Safari ali karkoli, ki dejansko interpretira je, od zgoraj navzdol, od leve proti desni. Torej, ključni razlikovati značilne za danes je, da je JavaScript na strani odjemalca in PHP, na primer, je bil na strani strežnika. Zdaj, kar ima zanimive posledice Kajti, kot je, intelektualno lastnino in kdo lahko dejansko videli svojo kodo. In res, lahko greš na spletu in si oglejte najbolj vsaka koda, da je nekdo napisan v JavaScript. Včasih je berljivo, Včasih je to obfuscated. Ampak več o tem pravočasno. 

Torej JavaScript, dovolj lepo, je super podobno, skladenjsko, da C. In tako kot so PHP, ni glavna funkcija. Če želite, da začnete pisati JavaScript kodo, kot boste videli danes, ste pravkar začeli pisati. Ampak to je, boste videli, zlasti uporabna v okviru spletnih brskalnikov. Vendar pa je moj mali disclaimer-- običajno earlier-- je reči, da si lahko bolj Uporaba danes JavaScript server-side uporabo fancy okvir imenovano Node.js da so nekateri od lastnih aplikacij CS50 je so napisani v. Preverite, 50 dejansko uporablja Node.js. Vendar se bomo osredotočili na JavaScript client-side tu naprej. 

Torej, tukaj je nabor pogojev v PHP. Oprostite, in-- pravzaprav, da Izjava, preveč je pravilna. Tukaj je tudi niz razmere v JavaScript. Skladenjsko je identičen C in PHP. Izrazi gospoda Boole so, podobno skladenjsko identičen tako C in PHP. Imamo tudi stikala v JavaScript ta pogled enaki. Imamo za zanke, ki so strukturiran enako, medtem zank, naredite medtem zank. 

Ta je malo drugačen. PHP imela za vsak konstrukt da vas bo morda s pomočjo ali bodo uporabljali v pset sedem, morda. JavaScript je to posebno različico za kjer boste dobesedno nekaj reči kot za spremenljivo ključ v objektu, ki je zelo jedrnat način rekel, če imam object-- in bomo spet govoriti o njih v moment-- in želim ponoviti čez vse ključnih parov vrednosti znotraj, Nimam, da ugotovimo, kako številčno indeks jih z nič, enega, dva, tri. 

Ne morem dobesedno povedati. In na vsaki ponovitvi, JavaScript bo za mene posodobite spremenljivo ključ da je treba najprej ključ, potem naslednji ključ, potem naslednji tipko, potem naslednji ključ, In tako naprej. In lahko dobim na svoji vrednosti, ki jo obravnava objekt v JavaScriptu, kot bomo videli, kot da to je asociativno paleto v PHP. Pravzaprav, če boste na koncu zavit vaš moti okoli kakšna asociativni array je v PHP, lahko si misliš o njem za zdaj, kot je identičen predmet v JavaScriptu. Ampak to je malo pretirano poenostavljanje. 

Nizi poglej, dovolj lepo, enaka PHP razen za en znak. Še ena stvar, ki manjka tukaj da smo videli prejšnji teden s PHP. Kaj je izpuščena? Ja? Ni znak za dolar. Tako smo se vrnili k več normalen svet, v katerem spremenljivke nimajo dolar znakov. Vendar vam jih predpono z var, običajno. In var pomeni spremenljivko. In podobno kot PHP je ohlapno typed-- čemer obstajajo vrste, obstajajo številke in godala in boje in tako forth-- JavaScript podobno ima vrst. Ampak to je ohlapno tipkal po tem, da smo, programerji nimajo, da jih določite. Moramo se zavedati, da obstajajo različne vrste. 

Spremenljivke, meanwhile-- tukaj je, kako smo lahko razglasi "Zdravo, svet" kot niz. Opazimo, da je identična PHP vendar ni znak za dolar. In to je nekaj, kar bomo začeli videvati več danes, s katerim imate predmet s tipkami in vrednot. In če želite, da bi poskušali sklepati iz lanskega week-- sintaksa je malo drugačna. Ampak malo sanity check-- koliko Tipke ne objekt zdi, da imajo? Torej, vidim štiri. Vidim dva. 

Torej, to je pravzaprav dva. Torej gre za zbiranje dva para ključ vrednostjo. Ključno je simbol, katerega vrednost je FB. Ključno je cena, katerega vrednost je 101.53. Torej, to so dva para ključ-vrednost. In ne pozabite, PHP-- in to je zopet nekako skladenjske razlike. To pa še ni vse, da je intelektualno zanimiva. PHP morda napisal ta isti stvar kot follows-- citatom, enaka. In jaz spremeniti to, da oglatih oklepajih. In potem sem se spremeniti to citiran beseda, "cena". In potem sem ne uporabljate dvopičja. Kaj sem uporabiti prejšnji teden? Ja, enačaj arrow funky zapis. 

In potem sem storil isto stvar tukaj. Ista stvar tukaj. In to je vse. Torej, to je v redu, če to ni res potonila v spominu samo še zato, ker je to res intelektualno nezanimiva. To je samo skladenjske razlike. Toda ideje so popolnoma enake. Znotraj te spremenljivke quote v JavaScript je zbirka parov ključ-vrednost, od katerih je simbol, od katerih je cena. In jaz lahko dobite na teh vrednotah z naslednjo sintakse. Tako kot v PHP, sem lahko narediti nekaj like-- pustiti mi, da je to polje malo večji. Tako kot v PHP, sem lahko da this-- oh, prekleto. Daj no. 

Tako kot v PHP-- OK, bomo samo uporabo voditelj zapiske. Tako kot v PHP, sem lahko storiti $ quote $ quote ["simbol"], in ta bo dobil me Vrednost "simbol." V JavaScript, da se dogaja, da se identična, s katerim lahko sem to storiti. Edina stvar, ki je manjka, je znak za dolar. 

Torej dovolj lepo, potem pa je ni vse, da je veliko novih sintaksa. Torej, kaj smo danes osredotočiti na, res, je nekaterih idej in aplikacij. In prva taka aplikacija, ki vam morda so videli, če ste se vrgli v pset sedem že to sintakso. Torej, v pset sedem, če ste videl ali ni videl še, vem, da obstaja datoteka, ki smo dali si poklical config.json-- JavaScript Object Notation. Zakaj? Želeli smo, da bi lahko, da vam z predlogo, z nekaj parov ključ-vrednost. Želeli smo, da bi lahko, da vam seznam gostitelja, ime strežnika. Želeli smo, da bi vam ograda za vaše uporabniško ime in ograda za vaše geslo. Če ne vidite to še ne skrbi. Več o tem v pset sedmih [? spec. ?] In potem, Očitno je, da vam želim izpolniti-DOS ker, ko se prijavite v CS50 IDE, vsak od vas imajo svoje uporabniško ime in geslo. 

Torej lahko smo uporabili pol ducata ali več različnih formatih. Lahko bi uporabili .txt datoteko. Lahko bi uporabili datoteko CSV. Smo se lahko uporabi INI datoteka, datoteka XML, cel kup več kratic, ki ki ste jih morda ne bi kdaj slišal. To je nekako arbitrarna Na koncu dneva. Ampak super priljubljena v teh dneh je besedilo format imenuje JSON-- JavaScript Object Notation-- ki izgleda takole. To je malo nejasen, ampak obvestilo vzorce. Začnete z odprtim Curly brace, in jo na koncu z isto. Znotraj da je nekaj. To je par ključna vrednost. Torej gre za objekt, ki sem gledaš na zaslonu tukaj da ima ključ, ki ima eno vrednost. In samo sklepanje, ki temelji na prejšnji vzorec, kaj je ključna tukaj? Baza podatkov je stvar leva kolona. 

Zdaj, vrednost se zgodi, da bo a več vrstic tokrat. Vendar pa vrednost začne z Curly naramnicami in se konča z kodrasti opornico. Torej, kaj bi vi predlagali, je Tip vrednosti podatkovni bazi? Slovar, ali samo več kratko, predmet. Prav? To je nekako strukture podatkov, ki Lahko uporabite druge strukture v sebi. Torej, če je to stvar smo sklica object-- in predmet je samo kup ključnih vrednosti pairs-- Vrednost same baze podatkov je predmet. Vrednost zbirke podatkov ima cel kup ključnih parov vrednosti, od katerih prvi je gostitelj, potem ime, nato pa uporabniško ime, nato pa geslo, vsak od katerih vrednosti, medtem, je samo dolgočasen niz v dvojnih narekovajih. 

Torej, tudi če to ni super jasno samo še, vem, da je to le Standard, dokaj dolgočasno pot shranjevanje podatkov v standardni obliki. Vendar skupni You napake Morda bo celo v pset sedem, so malo neumne stvari, kot če vas pomotoma izpustite vejico tam. To se dogaja, da povzroči v datoteki niso nujno berljive. Če pomotoma izpustite stvari, kot citati, da je ne bo berljivo. Torej, to je precej nitpicky format datotek, ampak to je tisto, ki je super pogosti. In se zgodi, da ga uporabljate, čeprav ti pa ne uporabljajte nobenih JavaScript drugače, v pset sedem. 

V redu. Torej, ne pozabite to sliko. Pogovarjala sva se o tem, v HTML, ki koda je lahko videti takole. To je HyperText Markup Language [Neslišno] za samo "Pozdravljen, svet." Ampak potem smo predlagali časa nazaj, da če to pomaga, boste morda želeli, da začnete razmišljati O tem je že kot drevo. Dejstvo je, da vdolbina uporabljajte samo zavoljo berljivost je ali zavoljo stilu o levo lahko nekako je treba prevesti v ta drevesa, kjer vas nekaj posebnega korensko vozlišče, da bomo generično imenovane dokument, pod katero je korenina HTML element ali tag, HTML, ki ima nato dva otroci, glava in telo. 

In nato v zameno, vodja ima naslov. In naziv ima besedilno vrednost. In telo ima podobno besedilno vrednost. Torej, če ste zadovoljni pregovor da ja, lahko bi to HTML in sestaviti sliko, kot je to je desna stran je lepo mentalni model, ker zdaj da imamo JavaScript, programiranje jezik, ki brskalniki lahko izvedbo in interpretacijo za vas, se izkaže, da je kaj smo na tem, da v kodi se začnejo manipulirati to drevesne strukture v pomnilniku. Nimamo graditi drevo v spomin. Nimamo storiti nekako pset-pet-style struktura podatkov kompleksnost. Brskalnik, dovolj lepo, ko tolmačenje HTML vrha do dna, levo ali desno, se dobesedno dogaja, da nam roko ekvivalent kazalca na tem celotnem drevesu brezplačno. To počne vse trdo delo. To je tisto, Mozilla in Apple in so drugi storili za nas. 

In z JavaScriptom bomo biti sposoben nadzorovati in spreminjati in delati zanimivih stvari za da drevo, sicer znana kot DOM ali Document Object Model. Kakšne stvari? No, izkaže se, da v JavaScript, tam je ta perilo seznam dogodki, ki lahko potekajo. In smo res ne uporablja, da beseda, saj teden nič in pset nič, ko smo se pogovarjali o tem nič. Večina vas verjetno niso uporabljali dogodek v vašem Scratch projektu. Vendar boste morda odpoklic preprost Marco Polo Primer, kjer smo imeli dva sprites, eden od njiju je dejal, Marco. Druga od katerih potem, ko poslušanje in sluha ta dogodek, je dejal, Polo. Če ne, vas prosimo, da pogledam nazaj tako daleč nazaj. 

Toda to je samo zato, da pravijo, in si lahko nekako sklepamo iz imen teh Stvari, JavaScript, se je izkazalo, se dogaja, da nam pot poslušati za miško Padamo ali miško gredo gor ali ključ gredo dol ali ključ gredo gor ali onsubmit onselect ali onresizing nekaj. Z drugimi besedami, vsak mehansko da lahko človek sprejme z brskalnikom da vam vsak dan, lahko pišete koda za da posluša tiste dogodke in potem naredi nekaj primernega. 

Na primer, če uporabljate Google Maps, kaj se zgodi, če kliknete in poteza miška, običajno? Če kliknete in povlečete? Ja? Točno tako. Zemljevid začne premikati. Torej lahko nekako videti, kaj je tukaj, kaj je tam. In kako Google izvajati to? No, verjetno, oni z uporabo nekaj teh dogodka poslušalci, tisti, ki pravi, poslušaj na miško down-- tako da ko uporabnik fizično potisne njegovo sledilno ploščico ali njegov miško dol. In potem smo iskali nekaj podobnega gibanja ali kakšen drug dogodek, nam omogoča, da zajame upor. In v resnici, drag je prav v tem dot dot dot seznam možnih opcij. 

Torej, to se dogaja, da je močan način za začetek odziva na uporabnika še preden je on ali ona dejansko klikne nekaj eksplicitno kot oddajte. Ampak bomo uvesti par teme do tja. Ampak najprej, kaj je prehod do neke dejanske kode. Torej bom šel naprej in se odprejo dom-0, ki je zelo preprost primer tukaj, da če bom povečavo preprosto tukaj ima ta vhod za mene. In bom, da gredo naprej in vnesite "David" za moje ime in kliknite Pošlji. 

In potem, čeprav nekako ceneje, sem imajo ta poziv, ki pops up, ki pravi, "Zdravo, David!" Torej, to je nekako tako kot naš "Hello, world" da smo naredili nekaj časa nazaj v C in celo v PHP, ker sem dinamično izhodu moje ime. Jaz lahko naredim ime nekoga drugega tu. Lahko bi preprosto spremeniti to, podobno, Hannah, kliknite Pošlji. In res, malo pop-up sprememb. 

Zdaj, pop-ups so ena izmed večina zlorabljenih značilnosti spleta. In dejansko nazaj na dan pop-up blokatorji prišel v modi, saj vas bi šel do neke website-- morda vprašljiva place-- da bi potem nenadoma začetek peppering zaslona z cel kup pop-ups. In tako je to sposobnost, da pop up okna v sprednji strani uporabnika ni bil posebno človeštvo dobro sprejet. Torej, to je, zakaj vidite to preprečili stvar, ki samo naredi to stvar grda. Torej bomo potrebovali boljši način za poziv uporabniku. Ampak za zdaj, se zdi, da deluje. Torej samo intuitivno, kaj Zdi se, da se tukaj dogaja? Grem naprej in kliknite Submit in potem kaj se dogaja, je jasno. Ampak, kaj se ne dogaja, da se je zgodilo prejšnji teden kadarkoli sem kliknil Submit? Kaj se ni zgodilo na zaslonu? Žal? Osveži. URL ni spremenilo na vseh. Rekel sem, da je to dom-0, in sem še vedno na domu-0. Običajno sva se spremeni v nekaj drugega URL, kot register.php ali podobno. 

Ampak tudi ko sem razreši ta stvar s klikom na OK, opazili, da je URL ostane popolnoma dal. In v resnici, če sem malo skeptični, naj odprejo Chrome. Naj odprejo zavihek Omrežje. In opazil, da je prazno, v tem trenutku. Naj gredo naprej in znova Maria. Ni omrežnega prometa whatsoever. Torej ni HTTP. 

Torej res, če gledam na izvorno kodo za this-- Naj zaprete to okno in pojdite na View Source. Zanimivo. Izgleda, da obstaja nekaj Nove oznake, med njimi tudi scenarij. Torej, kaj je si oglejte v CS50 IDE točno to, kar sem poslal za uporabnika. 

Torej, tukaj is-- dovolimo osredotočiti na samo HTML. Tu je spodnja polovica Dom-0.html. In opazil, da je to dobil naziv, oznaka glava, telo tag, oblika tag. Toda kaj skoči ven na vas kot drugačen, še posebej, če ste nikoli napisana vsaka JavaScript sami. Dovolite mi, da se pomaknete malo do tukaj. Imam vhod, en vhod za predložitev. Imam ID, ki je nekako novo. Vendar nismo videli to s CSS. Kaj drugega je vsekakor novega? Ja? Lepo. 

V redu. Torej, kje je pravi onsubmit, opazili, kaj se zdi, da jim sledijo. To je atribut v nomenklaturi HTML. Njegova vrednost je to citiral niz tukaj. In to izgleda malo čudno na prvi pogled. To ni HTML. To ni CSS. To je, kot ste lahko uganiti, JavaScript. Tako se zdi, da je vgrajen v ta Spletna stran je funkcija imenuje Greet. In sem sklepala, da samo ker je to beseda, pozdravi. Ima odprto paren, Zapri paren, podpičje. Izgleda funkcijo C, Izgleda funkcijo PHP. 

In res, da se bo je funkcija JavaScript. Potem sem se vračajo false. Vrnili se bomo na da v samo trenutek. Ampak kje je ta funkcija opredeljena? No, mi se pomaknite navzgor na vrhu datoteke. In čeprav je dolga vrsta, je razmeroma enostavna. Naj pomanjšati tukaj in osredotočiti na teh štirih vrsticah. 

Torej v JavaScript, samo kot so PHP, ki ste jo pravkar recimo, dobesedno, beseda "funkcijo," ime funkcije in nato oklepaje z vsemi arguments-- nobenih argumentov v tej zadevi. In ni tip povratka v JavaScript, tako kot PHP. Torej, to je malo bolj ohlapna kot C. Odpri kodrasti naramnicami, blizu kodrasti brace. Vgrajene v JavaScript je function-- ni priporočljivo function-- ampak funkcija imenuje opozorilo katerih edini namen v življenju je, da se potegnite navzgor, da je precej grda spodbudilo, da smo videli pred nekaj trenutki. 

Zdaj je to nekako zalogaja. Kaj se tukaj dogaja? Torej začnimo s izpostaviti vse tukaj. To je isti argument za opozarjanje. In kaj se dogaja? To samo izgleda kot niz. In se je izkazalo, za razliko od PHP in za razliko od C, ni važno v JavaScript če ste enojni narekovaji ali dvojni narekovaji. Oni so enakovredni. In odkrito povedano, to je samo priljubljena v teh dneh za programerje JavaScript, da vedno Uporabite enojne narekovaje iz nekega razloga. To je samo stvar. Vendar smo lahko uporabite dvojne narekovaje, kot dobro. 

Torej plus je nov lik. Toda tisti, ki ste jih naredili to prej, kaj plus pomeni? Ja. Združevanje. Tako smo to videli v PHP. Tam je samo pika operater v PHP, ki bo združevanje dveh nizov skupaj. C je bila bolečina v vratu, da to storijo. Odpoklic iz pset šest, ki je bila especial bolečine v vratu, bi morali uporabiti nekaj podobnega strcat po dodeljevanju pomnilnika na skladovnicah ali na kup. Boste morali skočiti skozi obroče samo za združevanje dveh nizov. V JavaScript, to je super enostavna. Samo uporabite operator plus med njimi. 

Torej kompleks videza stvar zdi, da je to ker konec ves ta niz, sem združevanje na klicajem. Torej, če je, kaj je bilo popping up je bil "Pozdravljeni, David", "zdravo, Hannah," "Pozdravljeni, Maria," in tako naprej, je jasno da srednji stvar med dvema pluse mi mora omogočiti dostop do česa? Kaj je tam za prepričani? Ja. Torej bom pretvarjal tukaj odgovoriti na svoje ime, kajne? Zato njihovo ime izstrelil v finalu rezultat. Torej, kaj to pomeni? No, sem že predlagal, da Slike da ti DOM ima to posebno korenski element pot do top imenuje dokument. In zdaj se je izkazalo, da se dogaja za posebno globalna spremenljivka v JavaScript, zgrajena v katerega je cel kup uporabnih funkcionalnosti. Med uporabno funkcionalnost je Sposobnost, da se ob vsakem potomec vozlišču. Te kvadrate ali pravokotnike ali elipse so le vozlišča v drevesu, tako rekoč. 

Tako se izkaže, da je vgrajen v Dokument objekt Javascript je funkcija, sicer znan kot Metoda, ki se imenuje getElementById. Sintakso za klic funkcija v JavaScriptu da je v notranjosti objekta ali spremenljivka je samo z dot zapisu. In to smo videli v C kaj struct sintakso. Vidiš to pset sedem, vrsta, nekako, ko vidite CS50 :: poizvedbo. Debelo črevo debelo črevo v PHP je še en način kliče funkcijo, ki je znotraj nekega objekta. 

Ampak za zdaj v JavaScript, to je samo pika. In tako je ta funkcija, dovolj lepo, vrsta pravi, kaj does-- dobil element po ID. Element je samo drugo ime za oznako ali vozlišča v DOM. In tako dobili element s šifri "ime" pomeni this-- tukaj je moja HTML. In na osnovi tega HTML, kaj vozlišče ali kaj HTML tag sem jaz bo programsko biti handed s pozivom document.getElementById? 

Ja, točno. Jaz grem, da bi dobili vhod element obstaja katere ID je "ime". Torej, še posebej, lahko mislim te funkcije, getElementById, kot način dajanja nazaj kazalec na to posebno vozlišče v drevesu. Nismo pripravljeni to drevo, ampak to je način dobili dostop do da pravokotnik ali da pravokotnik ki ga enolično ga označi prek ID. 

Zdaj, zakaj je to koristno? No, se izkaže, da ko ste gotten da vozlišče, da pravokotnik iz Slike, da vozlišče znotraj nje, V zameno, ima cel kup parov properties-- ključ-vrednost ali podatkov, od katerih je ena imenovani vrednost. Torej dobesedno, to je nekakšen zalogaj, da pojasni vso stvar. Toda na koncu dneva, vse to pa je, ti dam niz, da uporabnik vtipka v tej hierarhični način. Vendar mi ni všeč Nekaj ​​od teh stvari. Oziroma, tam je še vedno nekaj radovednosti. Vse se je zdelo, da deluje. Zakaj misliš, da sem se vrnil false po klicu pozdravim? To izgleda malo grdo, da Imam dve izjavi tam ločene s podpičjem. Ugibaj. Če sem odstranil vrne false, kar se lahko zgodi, samo nagonsko? Žal mi je, še enkrat rečem? 

Odprite kup Windows. Torej, lahko morda kaj kot da bi se zgodilo. Kaj drugega? Lahko predloži zahtevek kje? Na isti strani. Torej, v resnici, to je to bližje odgovoriti tukaj, čeprav v nasprotju V preteklosti sem imel ne določeno dejanje atribut, ki običajno moramo storiti. Izkazalo se je, da je privzeta. Če ne določite dejanje, to je, kot pravi, citiram, konec citata ali ime same datoteke, ki v tem primeru bi se kot doma-0.html. To je samo nekako sklepati, oziroma implicitno. 

In tako, če ne bom to naredil, kaj je opazil. Naj rešiti to. In sem odstranjen return false. Naj grem nazaj na to Primer in sila ga osvežite. In ste morda videli mi predlagamo to na CS50 Pogovorite kup krat. Če sploh je kdaj deluje funky in Brskalnik se ne obnaša, kot ste pričakovali, velikokrat boste želeli imeti Shift in kliknite Reload. Da bo prisilila vse datoteke, da osvežite in ne uporabljate brskalnika lokalni predpomnilnik ali kopijo, tako da je zdaj, naj gredo naprej in odprla svoj inšpektor jeziček Omrežje. Bom kliknite Ohranimo Prijavite se, ker sem Ne želim, da izbrišete vrstice Nekoč sem se stepena stran drugje. 

Naj gredo naprej tu in tip v Andi, kliknite Pošlji. V redu. Da se zdi, kot je bilo pričakovano. Piše "zdravo, Andi." Naj kliknite OK. Zanimivo. Opazimo, da je stran spremenila, čeprav na izvirno stran. Obvestilo URL vrste spremenjen. Dodala je, vprašaj, ki je navadno pokazatelj da smo poskušali, da predloži nekaj. In nato na dnu, Še bolj eksplicitno, tukaj je dejansko zahteva HTTP, ki je dobil odgovor od 200, ki me je pripeljal sem nazaj. 

Torej, to je tisto, kar ni želimo narediti, kajne? Ker ne želim, da osvežite celo stran. Jaz namesto želel vrniti false tako kratkega stika Privzeta nastavitev brskalnika, ki je, seveda, da predloži stran. 

Torej, vzemimo si na nekoliko boljši primer. To je dom različica eden. In opazili naslednje. To je v redu, če ne gročiti vse vrstic kode. Ampak tisto, kar je bistveno drugačen o izvajanju? Bom določa, da se odziva Enako, počne isto stvar. Kaj sem seveda naredil drugače? Ja? 

OBČINSTVO: [neslišno]. DAVID Malan: Ja. Torej je funkcija definirana differently-- z drugimi besedami, odsotnosti iz obliki, tam gor na spletu 7-- ali namesto, linija 8-- ni več imam na onsubmit atribut. V prejšnjem primeru, to bi imel. In potem sem dobesedno napisal svojo kodo tukaj. In potem sem rekel vrne false. In če ne drgnite ste napačen način še, da bi se morala začeti, če kot je, tako kot v HTML, ko smo ga začeli sodelovati družijo s CSS v atributov sloga, je pravkar začel, da bi dobili malo grdo ali pa se počutijo malo narobe. 

Podobno tukaj, če začnete jemati HTML, in nato samodejno Pasti nekaj JavaScript kodo sredi uvrščenega niza, to je ne bo zelo vzdrževati. Prav? To sploh ni očitno na prvi kraj, kjer je koda JavaScript. Tako da bi bilo res lepo, kot je načelo boljše zasnove, dajmo ohranimo naš HTML popolnoma loči od našega JavaScript. 

Torej za to, kar smo tu storiti je following-- smo preprosto uporabite HTML samo pribitek. In tako v različici eno od njih, vse Imam je oblika z edinstveno ID. In potem sem dol, sem izkoristila posebne značilnost JavaScript s katerim imam lahko kaj imenuje anonimni funkcija. Tako se izkaže, da če kličem document.getElementById od "demo" to je tako, kot bi mi kazalec To vozlišče v mojem drevesu, oblika element, tako rekoč. 

Zdaj, jaz samo vem, od vedo malo HTML Zdaj smo prebrali nekaj na spletu referenca, ki podpira obliko element cel kup dogodkov listeners-- v Z drugimi besedami, perilo seznam dogodka poslušalci, ki smo jih videli pred nekaj trenutki. Vem iz branjem dokumentacije da onsubmit je veljavna dogodek poslušalec za opažnega elementa. 

Torej, ko vem, da je, da je varno za mene following-- dobili, da je vozlišče od drevesa, oblika element, in dostopajte do svoje tako imenovane onsubmit lastnina. Tako da je pika pomeni le To je lastnost, kot posebno vrednost znotraj nje. In kaj podatkovni tip sem jaz dodeljevanje, očitno, da onsubmit, ki je učinkovito spremenljivka notranjosti navedene vozlišča v drevesu? To je področje, znotraj tega struct. Kaj je podatkovni tip? 

Funkcija, ja. Tako se izkaže, da ima PHP to. In čeprav smo pa vam ne povem o tem, C ima tudi funkcijo kazalce, na Sposobnost, da prenese in dodelite funkcije kot vrednosti spremenljivk "samih. In ne bomo nazadovati nazaj na C. Ampak za zdaj, se izkaže, da na desni strani tod čeprav izgleda malo funky, to pomeni, hej brskalnik, dajte mi funkcijo. Jaz ne bom niti trudile daje to ime, ker sem dobesedno dogaja, da dodelite dajmo ga pokličete naslov te funkcije takoj onsubmit. Z drugimi besedami, brskalnik, ki jih ne potrebujete vedeti, kaj se ta funkcija imenuje. Moraš vedeti kadar je v pomnilniku. In tako je dovolj le, da imajo enačaj tam in ne da bi se trudil poimenovanje tega, kot je foo ali pozdravi ali katerikoli drug izraz. In zdaj je to samo slogovna stvar. Jaz bi premaknil kodrasti oklepaja na the-- sorry-- naslednjo vrstico kot smo ponavadi CS50. Toda v JavaScript, je dejansko stilistično pogosti samo obdržati kodrasti oklepaja je Prvo, na tej prvi vrstici. 

Ampak v nadaljevanju, pa je nič zanimivega. To open curly brace samo razmejuje začetek mojega delovanja. Funkcija je sedaj enaki, razen Sem vključila return false znotraj te funkcije. Ker se je izkazalo out-- in vi bi samo to vedo iz branja documentation-- da če funkcijo, ki jo dodelite na onsubmit trener vrne false, brskalnik samo ve in se strinja, ne predloži obrazec s strežnikom. Če se vrne true, bo predložila je na strežnik za razlogov, bomo videli so uporabni v nekaj trenutkov. 

In potem podpičje po kodrasti brace tam samo pomeni končam opredeljuje funkcijo. Veš kaj, takoj poklicati kot ste slišali predložitev. V redu. To je še vedno verjetno nekako grd. Torej, kaj več lahko storimo? 

No, se izkaže, nato pa v Različica dva, ki je last-- In bomo samo pogled na to. Na tveganje za izdelavo je grši, se izkaže, da je knjižnica svet imenuje jQuery. In jQuery je super priljubljena knjižnica JavaScript da je tako priljubljen, da je večina vsaka JavaScript-- to ni nič nenavadnega, da ljudje zmedlo jQuery z JavaScript. Zakaj? JavaScript sama ima zelo verbose načini delovanja things-- document.getElementById, dadadadadada. Boste na koncu z zelo dolgih vrstic kode. 

Torej, kolega z imenom John RESID, ki dejansko dela za zagon up v teh dneh, je prišel ven s to knjižnico let nazaj, da so mnogi ljudje prispevali imenuje jQuery, ki se spreminja skladnja na naslednji način. In samo zato, da ste videli to, saj boste vedno glej to, če delaš Spletni končni projekt, to bi bilo ekvivalent način izvajanju tega enako funkcijo z uporabo to posebno knjižnico. 

Zdaj, namesto draži to odraža v celoti, kaj je samo pogled na nekatere vzorce. Zdi, da ta sintaksa, da imajo koliko anonimnih funkcije ali brezimnih funkcije ali AKA lambda funkcije? Dva, kajne? In veš, da je, tudi če niste super udoben s tem, tik ob dejstvu, da je pravi, da funkcija () dvakrat. 

In se izkaže, da kaj je ta koda je doing-- in bomo sklicujejo na spletnih referenc, navsezadnje, za nekaj pomoči s tem. To samo pomeni, da ko je dokument pripravljen, iti naprej in se prijavite naslednjim funkcija kot predloži vodnika za HTML element, katerega edinstvena ideja je demo. In potem, ko se to zgodi, pokličite teh dveh vrstic kode. In to je tragično, bolj verbose način rekel vrne false. In mi je to omenil samo zato, ker boste videli kodo, kot je ta na spletu. In to ni nič, da se jih prestrašijo. Ampak, imejte v mislih, da je tisto, kar je bo skupno v JavaScriptu je ta paradigma. In da je, zakaj smo ga kažejo za zdaj. V redu. Torej, brez stanovanja preveč toliko o tem skladnje, se obstaja kakršna koli vprašanja o ti primeri ali ideje tako daleč? V redu. Torej, kaj je to uporabijo za kaj koristnega. Izdelava spletne strani, ki samo pozdravi, tako in tako ni vse, da je zanimivo, ne underwhelm. Tole se ne bo lepo, vendar pa bo naredil kaj koristnega. Naj grem nazaj na moj imenik tukaj in odprla, pravijo, form-0.html. 

Torej domnevam, da je to bruc Skupni notranji športni registracija stran brez CSS ali nobenem smislu oblikovanja. In želim, da gredo naprej in Registrirajte se tukaj z geslom. In bom, da se strinjajo s pogoji in pogoji, in kliknite register. In zdaj na spletni strani pravi: "Vi ste registrirani! (No, ni res.) " Da se zdi, kot je delal, vendar Naj gredo naprej in na silo reload. 

In naj povem, ne, ne boste potrebujete mojo dejansko e-poštni naslov. Ali morda bomo samo reči pošto tam. Geslo bo, kot, 12345. In potem, samo zato, ker sem idiot, zdaj je 123456789. In ne bom, da preverite svoje polje. 

Hmm. V redu. Torej je več možnosti za izboljšave tukaj. In veš, ali bodo videli v pset sedem, da lahko pišete code-- in boste morali napisati kode v PHP-- za obrambo pred temi vrstami uporabnika napake, saj uporabnik jasno ni sodelovala. In on ali ona ni dal vse Vrednosti ste želeli ali celo v obliki ki si jih je želel. Tako boste videli v pset sedmih da smo lahko zagotovo imeli nekaj če pogoji, ki pravijo, če e-poštni naslov ni username@something.edu, smo lahko samo reči žal in se opravičujem za uporabnika toliko, kot si lahko v pset sedem. Ali če niso preverili to škatlo, Izkazalo se je v PHP, lahko zazna, da je preveč. In seveda, če gesla ne ujemajo kot v register.php za pset sedem, lahko zazna, da je. Ampak, da je bolečina v vratu, da zdaj zahtevajo nam, da gredo vse do strežnika. Uporabnik je obveščen o napaki. In vsaj če boste uporabili nekaj luksuznih tehnike, zdaj imajo, da kliknete na puščico nazaj. Ali ne bi bilo lepo, kot je veliko spletnih strani danes če bi imeli bolj neposreden povratne informacije, takoj? 

Z drugimi besedami, naj grem na različico ena, ki se bo brez lepši. Vendar pa ima to funkcijo. Malan, 12345, 123456789, ne dogaja, da potrdite polje, register. Gesla se ne ujemata. Torej, čeprav je to pop-up je ugly-- to lahko zamenjate sčasoma z nekaj podobnega Bootstrap, ki jih boste videli v pset sedmih je zelo priljubljen library-- sem zazna, da gesli se ne ujemata. V redu. No, naj se določi, da kot uporabnik. Naj gredo naprej in rekli, 12345, 12345. Še vedno ne preverjanje sporazuma. Morate strinjati z Pravila in pogoji. Torej, zakaj? 

Če smo že postavljena da obstaja način, in smo vas zahteva pset sedem za odkrivanje napake pogoji, kot je ta server-side, zakaj bi jaz sitnost tudi to počne v JavaScript? Kaj je argument v uslugo dodajanja kaj ste o tem, da se vidijo kot some-- tam je dodatna kompleksnost. 

Morda ni narobe. Kaj bi lahko bilo? OBČINSTVO: [neslišno]. DAVID Malan: Oh, zanimivo. Potencialni izkorišča. Tako prepričan, če niste ravnanje napačna vnosa od uporabnika, da super, morda je vse bolje, če to sploh ne doseže vaš strežnik. Jaz bi potisnite nazaj tja in recimo, bi verjetno morali popraviti tako teh problemov. Ampak to je pošteno. Kaj drugega? 

OBČINSTVO: [neslišno]. 

DAVID Malan: Ja. Ta koda, kot smo rekli, razlagati na strani odjemalca. To ne moti strežnik, kar pomeni, da ne vplivajo na obremenitev strežnika ali zmogljivosti. In zdaj, za malo staro mene, to nima pomembnega učinka ker imam enega uporabnika zdaj. 

Ampak, če ste koli Spletna stran dostojnega velikosti, zlasti največji, kot so Facebook, bolj lahko ljudem off vašega strežnika bolje ker strežnik, seveda, ima le končno količino RAM-a, končna številka GHz, končna številka stvari to lahko naredimo na časovno enoto. Torej, če obstaja več ljudi v svet hitting vaš strežnik, naključju se prijavite nepravilno, prav tako dobro, če vas lahko obdržite, da razbremeni vaš strežnik. Plus, še posebno na mobilniku device-- Če ste kdaj prijavite v my.harvard ali NETID Yale ali podobno, tam je to latence z veliko spletne strani, kot je ta, s katerim se traja, podobno, prekleto sekundo ali dve, včasih. In potem, moj Bog, če boste zatipkali, potem moraš udaril nazaj in ga redo. Torej je latence, zlasti na počasnejši omrežnih povezav. Toda JavaScript, ker teče na odjemalcu in ni treba iti naprej in nazaj čez potencialno počasnega interneta povezave, lahko dobite Skoraj trenutna povratne informacije. 

Torej, si oglejmo to. Naj odprejo oblika-0 in poglej HTML tukaj. In kaj je samo videti, kaj se dogaja. To je oblika čigar Tožba je register.php. Jaz sem samo s pomočjo dobil tako da sem lahko videl URL. Ampak za gesla, bi zagotovo želeli spremeniti to objavili v resnici. Tukaj je vnosno polje za vnos besedila. Tu je še en vhod Področje tipa gesla. Tu je, če še nikoli niste videli, vhod tipa polje. 

Vendar ni JavaScript Tukaj whatsoever. To je samo HTML, ki gre za register.php. Toda v različici eno, kjer sem je začel, da bi dobili te pop-ups, Pa poglejmo, kaj se dejansko dogaja tukaj. V različici enega, kaj Bom see-- I Mislil sem, da bi lahko stojnici dovolj z dovolj besed, ampak sem tekel ven. 

V različici one-- tam gremo. V različici enega, opazili following-- in ni najboljša izvedba, ampak to je moj prvi. Opazimo, da pod oblika, imam scenarij oznako. In script tag pomeni, hej, brskalnik, tukaj pride neko kodo, tipično, JavaScript. In zdaj, opazili, kaj delam. Na line-- Komaj preberi it-- vrstico 32, se pravi, var form-- mi tako dal spremenljivka imenovana oblika. In potem dobil document.getElementId za "registracijo." Kaj je to? No, naj me nazaj tukaj gor. In obvestilo, ah, sem dal obrazec element samovoljno, ampak opisna zamisel registracije. Torej, to mi daje spremenljivko, ki mi omogoča, da zgrabite to vozlišče, da je pravokotnik v drevo imenovano obliko. form.onsubmit sredstva, hej brskalnik, Registrirajte se dogodek poslušalca na tem obrazcu. Z drugimi besedami, če je to oblika predložen, izvršiti naslednjo kodo. To ne potrebuje ime, ker zakaj morate vedeti ime? Moraš vedeti kaj izvršiti, ergo je anonimno ali lambda funkcija. In da je funkcija vseh teh črt. In zdaj, če sem iskren, čeprav vas morda ne bi nikoli napisal JavaScript pred tem, to je samo logika C in PHP. Torej, če form.email.value == "" - tako da, če je polje email prazno, kričati na uporabnika z "Moraš zagotoviti vaš e-poštni naslov. " Else if form.password.value prazno Yell na uporabnika, "Morate zagotoviti svoje geslo." 

Bolj zanimivo logično, če form.password.value ne enako form.confirmation.value-- kjer je potrditev prišel? Naj nazaj. No, sem poklical ta vhod Polje tukaj geslo. In sem poklical tole tukaj potrditev. Lahko bi ga imenovali Geslo dva ali karkoli drugega. Jaz sem samo logično preverjanje da sta ti dve enaki. Else-- se izkaže, da je to gospod Boole again-- Boolova vrednost, potrditveno polje. Torej, če rečem, klicaj Point-- če ne form.agreement.checked, kričati na uporabnika, kot tudi. 

Torej, to sintakso boste videli, je zelo pogosti v JavaScript, kjer imate to pikčasto zapis. Začnete s predmetom tukaj. Se potopite v globlje a do lastnost kot geslo. In potem prideš na njegove dejanske vrednosti. In spet, tukaj je vhod. Tu je geslo, ime. In njegova vrednost je glede na človek je dejansko vnesli. 

Torej, v vseh teh primeri, sem se vrnil false. Če pa ne, se vrnem true. In tako zdaj smo videli prepričljiv uporaba, ko bi vrnil false stop kaj uporabnik počne in da mu ali ji izbrati znova ali znova tipkati. V nasprotnem primeru se bomo vrnili res. 

In naj vam predstavim eno druga varianta to samo da seme njih nekaj razumevanja. No, v različici 2 ta, oblika-2-- Jaz bom to naredil z valom roko. To je za tiste, radoveden, različica jQuery, tiste, ki bi želeli Praćakati v tem posebnem knjižnici. Ampak kaj je start-- in vsa vprašanja? Naj premor za trenutek zato ker da je hitro in veliko. 

Ampak lepo stvar tukaj je, da so vsi kode je precej isto. Nova stvar je, kaj je dom? Kaj so ti pravokotniki? Katere so te vozle? Kaj je anonimna funkcija? Kaj je dogodek trener? Ampak na srečo je večina, ki je le polni krog od, recimo, ničelni teden. V redu. Torej nekaj, kar je nekoliko bolj zanimivo? No, najprej, pusti me naprej in se odprejo Google Zemljevida. In boste opazili naslednje: da Trenutek, v delčku sekunde, opazili, kaj se zgodi, ko I kliknite dovolj hitro. In ta povezava na Harvardu je tako hitro, da ne boste res opazili. Toda kaj nekako nekako videti če sem kliknite in povlecite zelo hitro? Tisti, ki gledate na spletu, če boste počasi to hitrostjo 0.5x, lahko vidite, to bolje. 

Kaj se je dogajalo tik preden sem kliknil in vlekli? Naj poskusim here-- mi storiti nekaj drugega, kot je 90210. Pojdiva daleč. To je bil res hiter, preveč. Kako približno Disney World? Tam gremo. V REDU. Kaj ste videli, za delček sekunde? Samo, kot, kvadratov, kajne? Ograde za ploščice? 

No, kaj se dogaja tukaj? Google Maps je lep primer Ta tehnologija, ki se imenuje AJAX. In to je, če bomo začeli uporabite JavaScript v posebej Privlačen način. Nazaj na dan, je bilo Ta spletna stran imenuje MapQuest. In moral sem sprejeti screenshot tega od leta 1990, kjer, če si hotel poglej tu gor na zemljevidu, bi dobesedno kliknite puščico na vrhu, ki vas je pokazala, drugačen kvadratni zemljevida. Če bi želeli za premikanje levo, vas kliknili puščico, ki vam pokazala drugačen kvadratni zemljevida. In nekatere spletne strani še vedno storite to danes. Toda tudi je MapQuest gotten bolje, kot je Google Maps. 

Namesto tega, kaj je boljše ti dni je spletnih strani, ki uporabljajo AJAX. AJAX-- sicer znan kot Asinhroni JavaScript in XML, ki je samo fancy način rekel tehnologijo ali tehniko, ki omogoča brskalnik z uporabo JavaScript narediti dodatne zahteve HTTP potem ko je bil naložen. Torej, kaj to pomeni? No, bi bilo nekako siten v Gmailu če vsakič, ko si hotel preveriti vašo pošto, si je dobesedno udaril Control-R ali Command-R ali kliknite gumb Reload in je celotna stran darn bi osvežite. Prav? To bi utripala bela Verjetno za sekundo. Ti bi videli neumnega vrstico napredovanja. In samo zato, da vidim, če imate novo mail, celotno spletno stran in URL ste na bi bilo, da osvežite. 

Ampak to ni tisto, kar se zgodi v Gmailu. Prav? Ko dobiš novo e-pošto v Gmail, kaj se dogaja na zaslonu? To samo kaže navzgor, kajne? To samo čudežno pojavi kot novo vrstico v tabeli. Ki dejansko vključuje dostojno znesek kompleksnosti. V bistvu, če mislite, da o tem drevesu ki čeprav je preprost tod Gmail-- in sem moral iskati na kodo, da bi sure-- Verjetno ima HTML tabele ali morda Neurejen seznam, da postane vsak vaš Prejeto e-pošte, kot. 

In tako, če si predstavljate to tam je drevo v spomin, ko ste uporabljate Gmaila, ki izgleda nekako nekako kot je ta, ko je Google zaveda, ooh, imate novo e-poštno sporočilo, da ne želite obnoviti celotno drevo. Namesto, da želi, da bi našli vozlišče v drevo, ki predstavlja vaš poštni predal in samo vstavite novo vozlišče. 

Torej, zelo podoben pset pet, kjer vas moral vstaviti vozlišč v hash tabele, Podobno počne Google, prek JavaScript kode, ki jih je napisal, traverse tega drevesa, ugotovimo, kje je, da poštni predal del okna, in nato vstavite novo vrstico. In nova vrstica pomeni le eno ali več novih vozlišč v drevesu. 

In tako AJAX je ta tehnika ki omogoča točno to. Ko ste obiskali URL, pa noro dolg je, in ko ima stran bil naložen, lahko še vedno zgrabi več podatkov od internet-- ali je e-pošta ali ploščic iz map-- ga zgrabi v zakulisju in ga nato vstavite v stran tako da človeško resnici ne morali čakati na to. 

Facebook Messenger deluje na enak način. Poljubno število drugih websites-- oh, pravzaprav tudi to. Mislim, to je, odkrito povedano, vrsta siten imajo v teh dneh. Če začnem iskati cats-- to je nekako grozno uporabniško izkušnjo. Samo začne iskati zame. No, kaj je delal? URL je res ni spremenila odkar sem začel tipkati. Ampak, kaj se dogaja čez wire-- OK, hmm zanimivo. Kaj se dogaja čez žica tukaj samo postane bolj čudne. 

V REDU. Zato mi dovolite, pojdi naprej in preglejte element in pojdite na jeziček Network in poskusite, da bi to tehnično in manj o mačkah. Kot sem tip, dobesedno, mačke in-- kaj se dogaja per-- ne bom, da kliknete, da. V redu. Torej tukaj, kaj se dogaja vsak Tokrat sem vtipkate, očitno? Kot, nizka stopnja? Kaj se dogaja z vsako izmed tistih, znakov sem tipkanje na moji tipkovnici? Ja? OBČINSTVO: [neslišno]. 

DAVID Malan: Točno tako. Vsaka od teh znakov je dogaja, da Google, ena naenkrat. So izgradnjo niz na njihovem strežniku, ki predstavlja Vse doslej sem tipkal v. In vsakič, ko sem tip drug znak, ki jih uporabite svojo skrivnost omako iskanje algoritem in ugotoviti, pa je pomenilo to stran mačka ali ta stran mačka ali podobno? Torej v nekem smislu, da mi zagotavlja z boljšo izkušnjo s tem, da jaz sploh ne potrebujete za dokončanje mojo misel. In res, da je to koristno stvar, autocomplete na splošno. Če so njihovi algoritmi dovolj dobra in če so moji iskanj dovolj očitna, Nimam vnesti celotno besedo. Ti mi boš povedala, kaj jo se bom dejansko iščejo. Torej, kaj Google zahteva takojšnje Iskanje se samo z uporabo AJAX, s pomočjo kode, ki jim omogoča, da zahteva dodatna vsebina preko spletnega brskalnika V zakulisju, ki uporabljajo to nov jezik, JavaScript. Torej imamo par minut tekme. In naj me pokliče moj kolega Colton gor na oder, Ker se je zdelo še posebej zabavno zadnji čas uvesti tehnologijo da nekateri od vas so izrazile interes v za končne projekte. Mislili smo, da bi bilo zabavno, da bi up prostovoljec, čeprav danes da vam pokažem dodatek k to, da you-- omogoča ja, Videl sem to roko prvi. Pridi gor. Zelo dobro opravljeno. Dobro opravljeno. Jaz grem s tem projektom na zaslon v samo trenutek. Kako ti je ime za vsakogar? 

EFA: Jaz sem Efa. 

DAVID Malan: Etha? 

EFA: Efa. 

DAVID Malan: Efa? 

EFA: Ja. 

DAVID Malan: Lepo vas je videti. V redu. Naj mi to pripravljen. Pridi k srednji s Colton tukaj. Kaj je Colton v svojih rokah Danes je daljinski upravljalnik. Torej, ne samo stati tam v tridimenzionalni svet si ogledujem kot je to storil Colton, zdaj Efa lahko dejansko hodi okrog z tekoč gor, dol, levo in desno Like Nintendo ali Xbox krmilnik. EFA: bom padel z odra. DAVID Malan: Bom stati približno tukaj. Toda to je tveganje. V REDU. Torej, pojdi naprej in dal tistim na. Naj gredo naprej in preklopite na zaslonu tukaj. Naj zatemnite luči. In Colton, pusti me pridejo stojalo zraven tebe. 

Ali želite, da tu razložiti z mikrofonom, kaj delamo? Izvoli. 

COLTON: Seveda. Torej, zdaj smo nalaganju gor Oculus, Mislim operating-- ne deluje Sistem, toda glavni program, kadar lahko dostopate do vseh iger in Aplikacije, ki so v knjižnici. Torej sedaj, bi morala reči dotaknite touchpad za začetek. Touchpad dogaja, da se na desno stran slušalk. Torej, pojdi naprej in tap-- EFA: Oh, človek. DAVID Malan: Ja, tam greš. Kakovost Efa je videti je veliko višja kakovost. To je samo Wi-Fi tukaj. COLTON: Torej, kaj ste dogaja, da želijo narediti je pogledati proti vrhu desno od zaslona. Ja, ta igra na zelo zgornjem desnem kotu. In potem, ko si izberete je znova dotaknite sledilne ploščice. Mislim, da svoje Dreadhalls. In potem je tu a-- sem, naj me imajo svoje kozarce za vas. 

Tako sem mu dal samo krmilnik. Torej, zdaj je lahko nadzor nad igro. On lahko premikate in stvari, kot je ta. Torej, pojdi naprej in poglej gor na vrh. Moral bi videti New Game. Torej, pojdi naprej in lahko to storite. Zdaj bi morali biti sposobni nadzorovati sami s krmilnikom, kot tudi, kakor hitro Igra se naloži tukaj. To je lahko malce strašljivo. 

EFA: Zdaj pa mi povej. V REDU. 

COLTON: V redu. Tako potrdili, da se lahko premikate naokoli. V REDU. Lahko premikate. Popolna. Torej, če pogledaš dol, imate zemljevid. Karta vam pokaže, kje ste. Si lahko ogledate po sobi. Lahko popolnoma obrnil. Ja, točno. Obrni se. 

Torej, poglej na vaši levi. Mislim, da je nekaj, kar lahko poberem na sodček v sobi. 

EFA: Kako dobim začrtati poti? COLTON: Poglejte gor. Samo poglej gor. V redu. Izvolite. Zdaj pa pojdi in samo obrnil. Torej pogledati dlje na vaši levi. Premikajte se levo. Naj bo videti levo. Nadaljuj. Ja. 

EFA: Oh, da je tako. 

COLTON: Ja. Sprehodite se do nje s krmilnikom. Izvolite. Zdaj bi bilo reči, da to dvignili. Izvolite. Poberi. V redu. Zdaj pa ven iz te sobe. Pojdi naprej in hodi na ta vrata. Torej boš hold-- piše držite gumb, da ga odprejo. Torej, pojdi naprej in držite gumb. Ja, zaradi česar ga odprete. V redu. Dobro opravljeno. Sedaj hodimo ven iz sobe. Tako da bom moral preostanek up za vas in videli, kaj boste izvedeli. EFA: Ne grem v temnici. Oh, počakajte. Zdaj pa moram iti dol temno dvorano? OK, grem nazaj [neslišno]. COLTON: V redu. Nekaj ​​več predmetov, da poberem. Izgleda nekaj kovancev. To je kramp ključavnico. Torej, če ste našli zaklenjen Vrata, ki jih lahko uporabite, da. Se bojiš? 

EFA: Ne še. COLTON: OK. 

Pretend-- ja. Pretvarjaj se, da ste dejansko stoji tam. In če zavijete around-- moraš navaditi na to. Ampak to smiselno. DAVID Malan: In medtem Efa naprej igrati, saj lahko to počnemo ves dan, smo lahko vse tip-toe tukaj. Imamo pa dva druga para, če bi rad prišel gor in igral. Sicer pa bomo videli boste naslednjič v sredo. Hvala za naš prostovoljec danes. [Aplavz] 

[MUSIC - "Seinfeld TEMA"] SPEAKER 1: No, jaz sem dajanje nov PL mount naprej. Pravkar sem spremenil OLPF-- 

SPEAKER 2: Torej, kaj točno delaš? 

SPEAKER 1: No, vsak od these-- tukaj vam bom pokazal tole tukaj. Lahko ga vidite tukaj. 

SPEAKER 3: Mislim, da sem dobro z njimi. Hočete še več? 

SPEAKER 4: Ne, jaz sem dobro. [Neslišno]. 

SPEAKER 3: Ne, [neslišno]. Imajo nekateri. SPEAKER 1: Različne barve. SPEAKER 2: OK. SPEAKER 1: Torej, na koncu, kaj jo pa je, da prilagaja barvo of--