[Muzikos grojimo] 

DAVID Malan: Tai CS50. Tai devyniÅ³ savaitÄ pradÅ¾ia. Ir tai, kas bÅ«tÅ³ buvo pono Boole 200. gimtadienis. Taigi tai yra biÄiuliai kam mes uÅ¾siminÄ gana kartais apie naudojant BÅ«lio kintamieji true ir false, 1 ir 0, ir tokiÅ³. Ir tai buvo "Google" duoklÄ jam Å¡iandien. Jis pasuko 200. Taigi, jei norite prisijungti prie mÅ«sÅ³ CS50 pietums, paÅ¾velgti Ä¯ nuorodÄ iÅ¡vaizdÄ kurso tinklalapyje. Ir tokie veidai ir draugai kaip tai laukia JÅ«sÅ³ Äia Cambridge. Veidai, kaip Å¡ie jÅ«sÅ³ laukia New Haven. Ir, tiesÄ sakant, Ken Niu Heivenas maloniai padarÄ tai, kas vadinama animacinis GIF Helego Äia neseniai lunch-- GIF dar kitas grafinis failo formatas, su kuria jÅ«s familiar-- kad atrodo Å¡iek tiek kaÅ¾kÄ panaÅ¡aus Ä¯ tai. Taigi tiesiog seka of-- Gerai. Niekas Äia KembridÅ¾o juokiasi. Bet New Haven, tai yra tikrai juokinga, tiesa? Gerai. 

Taigi, prisijungti prie mÅ«sÅ³ ten. Äia Harvarde, Tiksliau, tai, treÄiadienis jei esate antrakursis ar pirmakursis even-- ar net junior-- mÄstymas priÄmimo iÅ¡keitimas Ä¯ kompiuterÄ¯ Mokslas, Å¾inau, kad ten bus BÅ«kite CS patarti teisinga tai TreÄiadienis, netrukus po klasÄ 4:00 PM kompiuteryje Mokslas pastatas Maksvelo Dworkinas. Mes Ä¯dÄti Å¡iÄ kurso s svetainÄ rytoj, taip pat. Donuts, aÅ¡ sakÄ, bus Ä¯teiktas. 

Gerai. Taigi juokinga story-- buvau iÅ¡nyra aplink internete, ir radau keletÄ senÅ³ archyvÅ³ mano buvusios svetainÄje. Ir paaiÅ¡kÄja out-- iÅ¡sprÄsti Å¡iÄ laikas, atrodo, labai laiku nes aÅ¡ surinkti, kad UC rinkimai ketinate pavara vÄl. Taigi aÅ¡ bÄgo UC, prarado apgailÄtinai. O gal tai buvo iÅ¡ dalies kodÄl. Taigi tai buvo mano svetainÄje metu. DÄl tam tikrÅ³ prieÅ¾asÄiÅ³, aÅ¡ maniau jis buvo gera idÄja, prieÅ¡ Å¾mones, kÄ mano platforma buvo ir kodÄl jie turÄtÅ³ balsuoti uÅ¾ mane, kad jie turi spustelÄkite Ä¯vesti suÅ¾inoti, kad informacija, kuri retrospektyviai yra rÅ«Å¡ies Å¡liauÅ¾iantis. AÅ¡ tikrai neÅ¾ino, kas tai buvo. 

Bet tai tikrai ne padÄti savo kampanijÄ. AÅ¡ taip pat nustatÄ, kad vyresnysis Å¡arvuotuose AÅ¡ turÄjau Å¡iÄ Muppet kalendoriÅ³. Muppety buvo rÅ«Å¡ies madinga atgal tada. O gal jie nebuvo. TurÄjau Muppet kalendoriÅ³ atgal tada. Ir aÅ¡ pagalvojau, kad bÅ«Äiau kietas pavadinimas Mano kompiuteris Harvardo universiteto tinkle frogman.student.harvard.edu. Tuo metu, mes visi turÄjo unikaliai identifikuojamas vardÅ³. Ir jÅ«s galite pasirinkti keletÄ Å¡urmulio pavadinimas, o ne savo vardu. Ir aÅ¡ su PÅetwonurek dÄl tam tikrÅ³ prieÅ¾asÄiÅ³. 

Ir tada aÅ¡ started-- AÅ¡ praleido daug laiko aplankys Å¡iÅ³ nuorodÅ³ Å¡Ä¯ rytÄ. Ir tai buvo mano apie puslapÄ¯, kuri dabar rÅ«Å¡ies atrodo Å¾avinga. TaÄiau ji taip pat liudija, kad tik kiek technologija atÄjo. AÅ¡ turiu galvoje, atgal per dienÄ, 486 buvo kaÅ¾kas. Å iÅ³ dienÅ³, tai super, super, Super lÄtai ir gerai maÅ¾iau nei jÅ«s galbÅ«t turite paÄiÅ³ kiÅ¡enÄs Å¡iÅ³ dienÅ³. Yra daugiau ten, kad buvo dar labiau nemalonu. Taigi aÅ¡ palikti jÄ¯ tuo. Bet tai buvo mano pirmas Ä¯siverÅ¾imas Ä¯ web-- oh, ne. Tai nebuvo. Mano pirmasis realus Ä¯siverÅ¾imas Ä¯ interneto programavimo buvo Å¡i svetainÄ, kuri man tiesiog pamirÅ¡o. Tam tikru momentu, aÅ¡ suÅ¾inojau, kaip padaryti pasikartojanÄias fono paveikslÄlius. Ir taip radau tai plytelÄs veiksmingos, kaip ritulio grotuvas, futbolas, golfas ir Rutuliniai, ar kas tai yra uÅ¾ Frosh Moment svetainÄje. Ir tai buvo iÅ¡ tikrÅ³jÅ³, tikrai tos Pirmasis internetinis projektas, aÅ¡ paÄmÄ on-- Manau gal antrakursis metus, jaunesnysis Å¡arvuotuose IÅ¡gÄrus CS50 ir CS51, vienÄ iÅ¡ bendrÅ³ tolesnio klases. AÅ¡ pastebÄjau ieÅ¡kote per archyvuose kad vienas iÅ¡ mano Ä¯pÄdiniams ir draugai, Lee rÅ«Å¡ies pasikeitÄ autoriaus teisiÅ³ Ä¯ save. Bet iÅ¡ tiesÅ³ tai buvo kaÅ¾kas, kad TurÄÄiau savo varÅ¾ymasis Ä¯. TaÄiau tuo metu, Å¡is buvo pirmoji svetainÄ, kaip sakiau prieÅ¡ kelias savaites, kuriuo pirmakursis negalÄjo uÅ¾siregistruoti vidines sporto Äia. Ir taip it turns out kad fono paveikslÄlius kaip kad yra ne tokia gera idÄja. Bet interneto buvo nauja ir visi buvome eksperimentuoti. Ir tai, kÄ aÅ¡ matyt, tuo metu. Gerai. Taigi be tolesnio ceremonija, mes pereiti Ä¯rankiÅ³ Å¡iandien duoti jums, tikrai, galutinis gabalas, kad jÅ«s galite rasti ypaÄ naudinga galutiniams projektams bet taip pat, kad bus pradÄti kad visas pasaulis Wide Web jauÄiasi Å¡iek tiek suprantamesnÄ. IÅ¡ tiesÅ³, mes ketiname pristatyti dar viena programavimo kalba vadinamas JavaScript, kad panaÅ¡us ir skiriasi skirtingais bÅ«dais iÅ¡ kalbÅ³, mes paÅ¾velgÄ iki Å¡iol. 

Taigi, C, prisiminti, tai yra kaupiami kalba. JÅ«s turite paleisti jÄ¯ per sudarytojas. Gauni kodÄ prieÅ¡tarauti kodas arba nuliais ir tie. Ir tie, kurie nuliais ir tie, kurie JÅ«sÅ³ procesoriaus, Central Processing Unit, iÅ¡ tikrÅ³jÅ³ suprasti. PHP, prieÅ¡ingai, yra ne parengtÄ kalba. Tai kÄ? Tai aiÅ¡kinama kalba. Taigi yra keletas programa vadinama vertÄjo, kad turi skaityti it-- virÅ¡aus Ä¯ apaÄioje, kairÄje right-- ir iÅ¡siaiÅ¡kinti, kas visus JÅ«sÅ³ sintaksÄ daro ir tai, ar tai kilpa ar bÅ«klÄ arba bet kuri kita skaiÄius programavimÄ konstruoja. Å tai aiÅ¡kinami kalba. 

Tada mes pristatÄme HTML. Ir HTML nÄra net programavimo kalba. Mes norime, kad tai, kÄ vadiname? Å½ymÄjimo kalba, kuri yra tik iÅ¡galvotas bÅ«das pasakyti tai tarsi neturi programavimo konstrukcijas, pavyzdÅ¾iui, mes matÄme net atgal Ä¯ nulio dienÄ. NÄra kilpos. NÄra nustatytos sÄlygos. Jis tikrai yra kalba apie Å¾enklinimo kopijas savo duomenis ir formatavimo, tai ar struktÅ«ruoti jÄ tam tikru bÅ«du. 

CSS, tuo tarpu, panaÅ¡iai nÄra programavimo kalba. Tai dar labiau estetiÅ¡kai orientuota. Ir tai leidÅ¾ia jums rÅ«Å¡iuoti suderinkite dalykÅ³, pavyzdÅ¾iui, Å¡rifto dydÅ¾io ir spalvÅ³ ir iÅ¡dÄstymas, ir visi, kad. Tada mes turÄjome 

SQL. Taigi SQL tiesÅ³ programavimas kalba tam tikra prasme, nors pritaikyti specialiai su duomenÅ³ bazÄmis. Bet nors mes tik supaÅ¾indinti jus su pasirinkti ir Ä¯raÅ¡yti ir iÅ¡trinti ir atnaujinti ir kitÅ³, pora, Pasirodo, jÅ«s iÅ¡ tikrÅ³jÅ³ galite raÅ¡yti funkcijas arba procedÅ«ros, kaip jie vadinamas, SQL, kad atrodo ir veikia labai patiko PHP ir C funkcijas. Taigi Å¾inau, kad tie, egzistuoja. Bet mes neturime net vargintis su jais kaip mes tik subraiÅ¾yti pavirÅ¡iÅ³ Äia. Ir tada JavaskriptÄ, paskutinis MÅ«sÅ³ kalbos oficialiai pristatÄ. Taigi JavaScript, taip pat yra aiÅ¡kinami kalba. Ir tie, kurie Å¾ino, tai norite jÄ¯ atskirti su kai charakteristika iÅ¡ abiejÅ³ C ir PHP? Kuo ji skiriasi? 

Auditorija: Tai ne renkami. 

DAVID Malan: Pasakykite naujo? 

Auditorija: Tai ne renkami. 

DAVID Malan: Tai ne renkami. Taigi, taip pat yra aiÅ¡kinama. Taigi tai nÄra kaupiami. Bet, kad daro tai, kaip PHP maÅ¾ai. TaÄiau jis vis dar skiriasi nuo PHP keletÄ stulbinanÄiÅ³ bÅ«du, bent tokiu bÅ«du, mes jÄ¯ naudoti. Taip? 

Auditorija: Ji veikia kliento pusÄje. 

DAVID Malan: Ji veikia kliento pusÄje, paprastai. Å tai iÅ¡ tiesÅ³ skiriamasis bÅ«dinga mums dabar. C buvo server-side ta prasme, kad mes padarÄme viskÄ CS50 IDE. PHP Å¡iol buvo serverio pusÄs tiek, nes ji taip pat gauna interpreted-- nÄra parengta, bet interpreted-- viduje CS50 IDE, kuris, Å¾inoma, yra tik serverio ar serveriÅ³ debesyje. 

Bet JavaskriptÄ, net Nors jÅ«s ketinate pradÄti raÅ¡yti jÄ¯, tarkim, pset aÅ¡tuoni, o gal galutinis projects-- esate vyksta Ä¯ deÅ¡inÄ jÄ¯ CS50 IDE ir iÅ¡saugokite jÄ¯ rinkmenose per CS50 IDE, CS50 IDE ir, savo ruoÅ¾tu, debesys serveriai dÄl kuriÅ³ jis vyko, nesiruoÅ¡ia interpretuoti arba vykdyti kodÄ. AtvirkÅ¡Äiai, jis ketina bÅ«ti siunÄiami nepakitÄs forma Å¾emyn narÅ¡yklÄje. Ir tai tada bus IE ar Chrome arba Firefox ar Safari ar kas, kad iÅ¡ tikrÅ³jÅ³ interpretuoja tai, iÅ¡ virÅ¡aus Ä¯ apaÄiÄ, iÅ¡ kairÄs Ä¯ deÅ¡inÄ. Taigi pagrindiniu atskirai iÅ¡ bÅ«dingas Å¡iandien yra tai, kad "JavaScript" yra kliento pusÄje ir PHP, pavyzdÅ¾iui, buvo serverio pusÄs. Dabar, tai yra Ä¯domiÅ³ pasekmiÅ³ uÅ¾, kaip, intelektinÄs nuosavybÄs ir kas iÅ¡ tikrÅ³jÅ³ galite pamatyti savo kodÄ. Ir iÅ¡ tiesÅ³, galite eiti internete ir pamatyti, labiausiai bet kodas, kad kaÅ¾kas turi paraÅ¡yta JavaScript. Kartais tai skaitoma, Kartais tai neskaidri. Bet daugiau apie tai laiku. 

Taigi JavaScript, pakankamai graÅ¾iai, yra Super panaÅ¡Å«s, sintaksiÅ¡kai, C. Ir panaÅ¡iai kaip PHP, nÄra pagrindinÄ funkcija. Jei norite pradÄti raÅ¡yti JavaScript kodas, kaip pamatysite Å¡iandien jÅ«s tiesiog pradÄkite raÅ¡yti jÄ. Bet tai pamatysite, ypaÄ naudingi narÅ¡ykles kontekste. TaÄiau, mano maÅ¾ai disclaimer-- paprastai earlier-- buvo pasakyti, kad jÅ«s galite vis Å iandien naudoti "JavaScript server-side naudojant iÅ¡galvotas sistemÄ, vadinamÄ Node.js kad kai kurie iÅ¡ CS50 paÄios paraiÅ¡kÅ³ yra paraÅ¡yta. Patikrinkite 50 tikrÅ³jÅ³ naudoja Node.js. TaÄiau mes ketiname sutelkti dÄmesÄ¯ Ä¯ JavaScript kliento pusÄje Äia atlikti. 

Taigi Äia yra tam tikrÅ³ sÄlygÅ³ PHP rinkinys. AtsipraÅ¡ome, in-- tikrÅ³jÅ³, kad pareiÅ¡kimas, taip pat yra teisinga. Äia taip pat yra komplektas sÄlygos "JavaScript". SintaksiÅ¡kai, tai identiÅ¡kas C ir PHP. P Boole iÅ¡raiÅ¡kos, Be to, sintaksiÅ¡kai identiÅ¡kas tiek C ir PHP. Mes taip pat turime jungikliai JavaScript, kad atrodo identiÅ¡ki. Mes turime kilpomis, kurios yra struktÅ«ra vienodai, o kilpos, padaryti, o kilpÅ³. 

Tai vienas Å¡iek tiek skiriasi. PHP turÄjo uÅ¾ kiekvienÄ konstrukto kad jums gali bÅ«ti naudojant ar bus naudoti pset septyniÅ³, galbÅ«t. JavaScript turi Å¡iÄ ypatingÄ versijÄ o kur jÅ«s tiesiog pasakyti kaip kintamojo rakto objektas, kuris yra labai glausta bÅ«das pasakyti, jei aÅ¡ turiu object-- ir mes kalbÄti apie tai vÄl Ä¯ moment-- ir aÅ¡ noriu pakartoti virÅ¡ visÅ³ iÅ¡ pagrindiniÅ³ verÄiÅ³ porÅ³ viduje, AÅ¡ neturiu iÅ¡siaiÅ¡kinti, kaip programinio indekso juos su nulis, vienas, du, trys. 

Galiu tiesiog pasakyti tai. Ir ant kiekvienos iteracijos, JavaScript man bus atnaujinti kintama raktÄ bÅ«ti pirmasis raktas, tada kitas raktas, tada kitas raktas, tada kitas raktas, ir taip toliau. Ir aÅ¡ galiu gauti savo verte apdorojant in JavaScript objektas, kaip matysime, taip, lyg tai yra masyvÄ PHP. IÅ¡ tiesÅ³, jei jÅ«s pagaliau suvynioti savo mind aplink kÄ masyvÄ yra PHP, galite galvoti apie tai dabar kaip tapatus JavaScript objektÄ. Bet tai iÅ¡ tiek supaprastinimas. 

Masyvai atrodo, pakankamai graÅ¾iai, identiÅ¡ka PHP iÅ¡skyrus vienÄ poÅ¾ymÄ¯. Yra vienas dalykas, trÅ«ksta Äia kad mes padarÄme pamatyti praÄjusiÄ savaitÄ su PHP. Kas praleista? Taip? NÄra doleris Å¾enklas. Taigi, mes grÄ¯Å¾ome Ä¯ A daugiau normalus pasaulis, kuriame kintamieji neturi doleris Å¾enklai. Bet jÅ«s prieÅ¡dÄlis juos su var, tipiÅ¡kai. Ir var tai kintamÄjÄ¯. Ir panaÅ¡iai kaip PHP yra silpnai typed-- kuriuo yra tipÅ³, yra numeriai ir Ä¯sipareigojimÅ³ ir plÅ«dÄs ir taip forth-- JavaScript panaÅ¡iai turi tipus. Bet tai laisvai Ä¯vedÄte kad mes, programuotojai neturi nurodyti juos. Mes tiesiog turime Å¾inoti kad skirtingÅ³ tipÅ³ egzistuoja. 

Kintamieji, meanwhile-- Äia kaip mes galime paskelbti "Labas, pasauli" kaip eilutÄ. Atkreipkite dÄmesÄ¯, kad tai identiÅ¡kas PHP bet ne dolerio Å¾enklas. Ir tai yra kaÅ¾kas, mes pradÄsite matyti daugiau Å¡iandien kuriuo turite objektÄ su raktais ir vertybes. O jei norite iÅ¡bandyti daryti iÅ¡vadÄ, nuo praÄjusiÅ³ week-- sintaksÄ yra Å¡iek tiek kitoks. Bet Å¡iek tiek normalumas check-- kiek raktai ar Å¡is objektas, atrodo, turi? Taigi matau keturi. Matau du. 

Taigi tai tikrai du. Taigi tai yra kolekcija dvi pagrindinÄs vertÄs poromis. Svarbiausia yra simbolis, kurio vertÄ yra FB. Svarbiausia yra kaina, kurios vertÄ yra 101.53. Taigi tie du pagrindiniai vertÄs poros. Ir atminkite, PHP-- ir tai dar kartÄ tiesiog tarsi sintaksÄs skirtumas. Tai dar ne viskas, kad intelektualiai Ä¯domu. PHP galÄjo paraÅ¡yta tas pats dalyko kaip follows-- citata, lygus. Ir aÅ¡ galiu pasikeisti juos lauÅ¾tiniuose skliaustuose. Ir tada aÅ¡ jÄ¯ pakeisti kotiruojama Å¾odis "kaina". Ir tada aÅ¡ ne naudoti dvitaÅ¡kis. KÄ aÅ¡ naudoju praÄjusiÄ savaitÄ? Taip, lygybÄs Å¾enklas arrow funky notacijos. 

Ir tada aÅ¡ tÄ patÄ¯ Äia. Tas pats Äia. Ir tai viskas. Taigi, tai gerai, jei tai nebuvo tikrai nuskendo Ä¯ atmintÄ¯ tik dar, nes tai tikrai intelektualiai neÄ¯domu. Tai tiesiog sintaksines skirtumus. Bet idÄjos yra lygiai tas pats. Viduje Å¡io kintamojo citata JavaScript yra raktas vertÄs porÅ³ rinkimo, viena iÅ¡ kuriÅ³ yra simbolis, iÅ¡ kuriÅ³ vienas yra kaina. Ir aÅ¡ galiu gauti ne Å¡iÅ³ vertybiÅ³ su tokia sintakse. Tiesiog kaip PHP, galÄjau kaÅ¾kÄ daryti like-- tegul man padaryti Å¡is langelis Å¡iek tiek didesni. Tiesiog kaip PHP, galÄjau padaryti this-- oh, Dammit. Nagi. 

Tiesiog kaip PHP-- Gerai, mes tiesiog naudokite vedÄjas pastabas. Tiesiog kaip PHP, galiu padaryti $ citata $ quote ["simbolis"], ir tai bus man iÅ¡ vertÄ "simboliu." Be JavaScript, tai bus identiÅ¡ki, kuriuo aÅ¡ galiu tik daryti tai. Vienintelis dalykas, kad trÅ«ksta doleris Å¾enklas. 

Taigi pakankamai graÅ¾iai, tada, ten ne visi, kad daug naujo sintaksÄ. Taigi, kÄ Å¡iandien turime sutelkti dÄmesÄ¯ Ä¯ tikrai, yra kai idÄjÅ³ ir programÅ³. Ir pirmas toks programa, kuri jums gali maÄiau, jei nÄrÄ Ä¯ pset septyniÅ³ jau tai sintaksÄ. Taigi pset septyni, jei jÅ«s matÄ ar nematÄ dar, Å¾inau, kad ten yra failas, mes suteikiame JÅ«s vadinamas config.json-- JavaScript Objektas Notation. KodÄl? Mes norÄjome, kad bÅ«tÅ³ galima suteikti Jums su Å¡ablonas su kai kuriÅ³ pagrindiniÅ³ vertÄs poromis. Mes norÄjome, kad bÅ«tÅ³ galima suteikti jums sÄraÅ¡Ä priimanÄiosios, iÅ¡ serverio pavadinimÄ. Mes norÄjome suteikti jums vietaÅ¾enklio savo vardÄ ir slaptaÅ¾odÅ¾io vietos rezervavimo. Jei nematote Tai dar ne nerimauti. Daugiau apie tai pset septyniÅ³ [? spec. ?] Ir tada, Akivaizdu, kad mes norime jums uÅ¾pildyti su-DOS nes kai Ä¯einate Ä¯ CS50 IDE, kiekvienas iÅ¡ jÅ«sÅ³ turÄti savo vartotojo vardÄ ir slaptaÅ¾odÄ¯. 

Taigi, mes galime jau naudojamas pustuzinis ar daugiau skirtingÅ³ failÅ³ formatus. Mes galÄjome naudoti .txt failÄ. Mes galime naudoti CSV failÄ. GalÄtume kada atliekamas su INI failas XML failÄ, visa krÅ«va daugiau akronimai, kad galbÅ«t ne kada nors girdÄjote. Tai tipo savavaliÅ¡kas Dienos pabaigoje. Bet super populiarus Å¡iÅ³ dienÅ³ yra tekstas formatas vadinamas JSON-- JavaScript objektas Notation--, kad atrodo taip. Tai Å¡iek tiek paslaptingas, bet pastebÄsite modelius. JÅ«s pradedate su atvira Curly petneÅ¡omis, ir jÅ«s galÅ³ su tuo paÄiu. Viduje, kad yra kaÅ¾kas. Tai pagrindinis vertÄ pora. Taigi, tai yra objektas, kad aÅ¡ Å¾iÅ«ri Ä¯ ekranÄ Äia kad turi vienÄ raktÄ, kuris turi vienÄ reikÅ¡mÄ. Ir tik iÅ¡vadÄ remdamasis Ankstesnis modelis, kas yra raktas Äia? DuomenÅ³ bazÄs, dalykas iÅ¡ gaubtinÄs kairysis. 

Dabar, vertÄ, atsitinka bÅ«ti Daugkartinio linijos Å¡iuo metu. Bet vertÄ prasideda garbanotas petneÅ¡omis ir baigiasi su garbanotais petneÅ¡omis. Taigi, kÄ siÅ«lytumÄte yra tipas duomenÅ³ bazÄs vertÄ? Å½odynas arba tik daugiau glaustai, objektas. TeisÄ? Tai tipo duomenÅ³ struktÅ«rÄ, galite naudoti kitas struktÅ«ras per save. Taigi, jei visas Å¡is dalykas, mes Skambinimas object-- ir objektÄ yra tik raktas vertÄs pairs-- kiÅÄ vertÄ pati duomenÅ³ bazÄje yra objektas. DÄl duomenÅ³ vertÄ turi visa krÅ«va pagrindiniÅ³ verÄiÅ³ porÅ³, kuriÅ³ pirmasis yra priimanÄiosios, tada pavadinimÄ, tada vardÄ, tada slaptaÅ¾odÄ¯ kiekvieno iÅ¡ jÅ³ reikÅ¡mÄs, tuo tarpu, tai tiesiog nuobodus eilutÄ kabutes. 

Taigi, net jei tai nÄra Super aiÅ¡ku nÄra, Å¾inau, kad tai tik standartas, gana nuobodus bÅ«das saugoti duomenis standartiniu formatu. TaÄiau bendras klaidÅ³ jums gali padaryti net pset septyni, yra maÅ¾ai kvailÅ³ dalykÅ³, pavyzdÅ¾iui, jei jums netyÄia praleisti kablelÄ¯ ten. Tai ketina sukelti failo nebÅ«tinai yra Ä¯skaitomas. Jei netyÄia praleisti dalykÅ³, pavyzdÅ¾iui, Citatos, ji nesiruoÅ¡ia bÅ«ti Ä¯skaitomas. Taigi tai gana nitpicky failo formatas, bet tai vienas, kad super bendra. Ir mes atsitikti jÄ¯ naudoti, nors Jums nereikia naudoti bet kokiÄ JavaScript kitaip, Ä¯ pset septyni. 

Gerai. Taigi nepamirÅ¡kite Å¡iÄ nuotraukÄ. Mes kalbÄjome apie, HTML, tai kodas gali atrodyti taip. Tai hiperteksto kalba [Nesigirdi] dÄl teisingo "Hello, World". Bet tada mes pasiÅ«lÄme o atgal, kad jei jis padeda, galbÅ«t norÄsite pradÄti galvoti apie tai jau kaip medÄ¯. IÅ¡ tiesÅ³, Ä¯dubimas, kad mes naudoti tik skaitomumas labui ar stiliui dÄlei apie kairÄ gali rÅ«Å¡ies bÅ«ti iÅ¡verstas Ä¯ Å¡io medÅ¾io, kur jums turÄti tam tikrÄ specialiÄ Å¡aknÅ³ mazgas, kad mes bendrine vadinamas dokumentas, Å¾emiau kurios yra Å¡aknis HTML elementas arba Å¾yma, HTML, kuri tada turi du vaikai, galvos ir kÅ«no. 

Ir tada savo ruoÅ¾tu, vadovas turi pavadinimÄ. Ir pavadinimas turi teksto reikÅ¡mÄ. Ir kÅ«no panaÅ¡iai yra teksto reikÅ¡mÄ. Taigi, jei esate patenkintas posakis kad taip, galite pasinaudoti Å¡ia HTML ir nupieÅ¡ti kaip paveikslÄlÄ¯ to, deÅ¡inÄ pusÄ yra graÅ¾us psichikos modelis, nes dabar kad mes turime JavaScript, programavimo kalba, kad narÅ¡ykliÅ³ gali vykdyti ir interpretuoti uÅ¾ jus, paaiÅ¡kÄja, kad tai, kÄ mes apie tai, kodu yra pradÄti manipuliuoti tai medÅ¾io struktÅ«ra atmintyje. Neturime statyti Ä® atminties medis. Neturime daryti tarsi pset penkiÅ³ stiliaus duomenÅ³ struktÅ«ra sudÄtingumas. NarÅ¡yklÄ, pakankamai graÅ¾iai, ant AiÅ¡kinant HTML virÅ¡aus Ä¯ apaÄiÄ, kairÄ arba Ä¯ deÅ¡inÄ, yra tiesiog ketiname ranka mums rodyklÄ ekvivalentÄ tai visÄ medÄ¯ nemokamai. Ji visa sunkaus darbo. Å tai kÄ "Mozilla" ir "Apple ir kiti padarÄ dÄl mÅ«sÅ³. 

Ir su JavaScript mes ketiname turÄti galimybÄ kontroliuoti ir keisti ir daryti Ä¯domiÅ³ dalykÅ³ kad medis, kitaip Å¾inomas kaip DOM ar Document Object Model. Kokie dalykai? Na, it turns out, kad JavaScript, ten Å i skalbimo sÄraÅ¡as Ä¯vykiai, kurie gali vykti. Ir mes tikrai ne naudojamas, kad Å½odis nes savaitÄ nulio ir pset nuliui, kai mes kalbÄjome apie nulio. Dauguma iÅ¡ jÅ«sÅ³ turbÅ«t nesinaudojo in savo Scratch projekto renginys. TaÄiau jums gali prisiminti paprastas "Marco Polo PavyzdÅ¾iui, kai mes turÄjome du animacinius, kuriÅ³ vienas sako: "Marco. Kitas kuriÅ³ tada, kai klausymo ir klausos, kad Ä¯vykÄ¯, sakÄ, polo. Jei ne, nedvejodami paÅ¾velgti atgal, kad toli atgal. 

Bet tai tik pasakyti, ir jÅ«s galite rÅ«Å¡ies numanyti iÅ¡ Å¡iÅ³ pavadinimÅ³ dalykÅ³, JavaScript, it turns out, ketina duoti mums keliÄ klausytis uÅ¾ pelÄ Å¾emyn arba pelÄs einame arba raktas Å¾emyn arba raktas einame arba onSubmit onselect arba onresizing kaÅ¾kÄ. Kitaip tariant, bet koks fizinis poveikis kad Å¾mogus gali imtis su narÅ¡ykle kad jÅ«s kiekvienÄ dienÄ, galite paraÅ¡yti kodas, kad klauso Å¡iÅ³ Ä¯vykiÅ³ ir tada daro kaÅ¾kÄ tinkamo. 

PavyzdÅ¾iui, jei jÅ«s naudojate "Google Maps", kas atsitiks, jei paspausite ir Perkelti pelÄ, paprastai? Jei spustelÄkite ir vilkite? Taip? BÅ«tent. Å½emÄlapis pradeda judÄti. Taigi galite rÅ«Å¡iuoti pamatyti, kas Äionai, kas ten. Ir kaip veikia "Google" Ä¯gyvendina tai? Na, matyt, jie naudojant iÅ¡ Å¡iÅ³ atveju pora klausytojÅ³, vienas, kad sako, klausytis ant pelÄs down-- todÄl, kai vartotojas fiziÅ¡kai stumia savo manipuliatoriÅ³ arba jo pele Å¾emyn. Ir tada mes ieÅ¡kome kaÅ¾kas panaÅ¡aus judÄjimo arba kai kitas Ä¯vykis, kad leidÅ¾ia mums fiksuoti pasiprieÅ¡inimÄ. Ir iÅ¡ tiesÅ³, vilkite yra panaÅ¡iai tai dot dot dot sÄraÅ¡Ä galimÅ³ variantÅ³. 

Taigi tai bus galingas bÅ«das pradÄti reaguojant Ä¯ naudotojo net kol jis ar ji iÅ¡ tikrÅ³jÅ³ paspaudÅ¾ia kaÅ¾kas aiÅ¡kiau, kaip pateikti. TaÄiau mes ketiname pristatyti pora temÅ³ ten. Bet pirmiausia leiskite pereiti tam tikru faktinio kodÄ. Taigi, aÅ¡ ruoÅ¡iuosi eiti Ä¯ priekÄ¯ ir atverti Dom-0, kuris yra labai paprastas pavyzdys Äia, kad jei aÅ¡ priartinti tiesiog turi Å¡iÄ Ä¯vestÄ¯ Äia man. Ir aÅ¡ ruoÅ¡iuosi eiti Ä¯ priekÄ¯ ir Ä¯veskite "David" mano vardu ir spustelÄkite Pateikti. 

Ir tada, nors tarsi pigiai, aÅ¡ Å¡iÄ eilutÄ, kad pasirodo, kad sako, "Sveiki, Davidas!" Taigi tai yra natÅ«ra Kaip ir mÅ«sÅ³ "Labas, pasauli" kad mes padarÄme tikrÄ laikÄ atgal C net PHP, nes aÅ¡ dinamiÅ¡kai iÅ¡vedamas mano vardÄ. Galiu padaryti kaÅ¾kieno vardÄ Äia. GalÄÄiau tiesiog pakeisti tai, kaip Ona, spustelÄkite Pateikti. Ir iÅ¡ tiesÅ³, maÅ¾ai pop-up pokyÄiai. 

Dabar, pop-ups yra vienas iÅ¡ dauguma skriaudÅ¾iamos bruoÅ¾ai internete. Ir iÅ¡ tikrÅ³jÅ³, atgal DienÄ pop-up blokatorius atÄjo Ä¯ mados, nes jus bÅ«tÅ³ eiti tam tikru website-- gal abejotina place-- kad bÅ«tÅ³ staiga pradÄti peppering ekranÄ su visa krÅ«va pop-ups. Ir taip Å¡is gebÄjimas pop-up langai prieÅ¡ais vartotojui nebuvo ypaÄ Å¾monijos gerai gavo. Å tai kodÄl jÅ«s matote Å i iÅ¡vengti dalykas, kurie tiesiog daro visa tai, kÄ negraÅ¾i. Taigi mes ketiname need a geresnis bÅ«das paskatinti vartotojÄ. Bet dabar, kad, atrodo, Ä¯ darbÄ. Taigi tiesiog intuityviai, kÄ atrodo, vyksta Äia? AÅ¡ einu Ä¯ priekÄ¯ ir spustelÄkite Pateikti ir tada kaÅ¾kas vyksta, aiÅ¡kiai. Bet kas nevyksta, kad nutiko PraÄjusiÄ savaitÄ bet kuriuo metu aÅ¡ spustelÄjote Pateikti? KÄ neatsitiko ekrane? AtsipraÅ¡ome? Perkrauti. URL nepakeitÄ ne visiems. AÅ¡ pasakiau tai buvo Dom-0, ir aÅ¡ vis dar ne dom-0. Paprastai, mes norime gauti pasikeitÄ kai kuriÅ³ kitÅ³ URL, pavyzdÅ¾iui, register.php arba panaÅ¡iai. 

Bet net kai aÅ¡ atmesti spustelÄdami Gerai tai, kÄ, Atkreipkite dÄmesÄ¯, kad URL lieka visiÅ¡kai Ä¯dÄti. Ir, iÅ¡ tiesÅ³, jei aÅ¡ Å¡iek tiek skeptiÅ¡kai, leiskite man atverti Chrome ". Leiskite man atverti skirtukÄ Network. Ir pastebÄsite, kad tai tuÅ¡Äias metu. Leiskite man eiti Ä¯ priekÄ¯ ir iÅ¡ naujo Maria. NÄra tinklo srautÄ kokia. Taigi nÄra HTTP. 

Taigi iÅ¡ tiesÅ³, jei Å¾iÅ«riu kodÄ uÅ¾ this-- leiskite uÅ¾daryti Å¡Ä¯ langÄ ir eiti Å½iÅ«rÄti kodÄ. Ä®domu. Atrodo, ten kai NaujÅ³ Å¾odÅ¾ius, tarp jÅ³ scenarijÅ³. Taigi tegul per CS50 iÅ¡vaizdÄ IDE, kÄ aÅ¡ iÅ¡siuntÄ vartotojui. 

Taigi Äia is-- tegul sutelkti dÄmesÄ¯ tik Ä¯ HTML. Å tai apaÄioje pusÄ dom-0.html. Ir pastebÄsite, kad jis gavo pavadinimÄ, galvos Å¾ymeles, kÅ«nas Å¾ymeles, forma Å¾ymÄ. Bet kas Å¡uoliai jums, kaip skiriasi, ypaÄ jei jÅ«s niekada paraÅ¡yta sau bet "JavaScript". Leiskite man pereiti Å¡iek tiek Ä¯ deÅ¡inÄ Äia. AÅ¡ turiu Ä¯vestÄ¯, kitas indÄlis pateikti. AÅ¡ turiu ID, kuris yra tipo naujas. Bet mes matome tai su CSS. Kas kita yra tikrai naujo? Taip? GraÅ¾us. 

Gerai. Taigi, kur ji sako onSubmit, pastebÄti, kas atrodo sekti. Tai poÅ¾ymis HTML nomenklatÅ«rÄ. Jo vertÄ yra tai cituojamÄ eilutÄ Äia. Ir tai atrodo Å¡iek tiek keista iÅ¡ pirmo Å¾vilgsnio. Tai ne HTML. Tai ne CSS. Tai, kaip jÅ«s galite atspÄti, "JavaScript". Taigi atrodo, kad pastatytas Ä¯ tai interneto puslapis yra funkcija vadinama Greet. Ir aÅ¡ iÅ¡vadÄ, kad tik nes tai Å¾odis, sveikinasi. Jis gavo atvirÄ paren, ArtimÅ³ paren, kabliataÅ¡kis. Atrodo, C funkcija, atrodo kaip PHP funkcijai. 

Ir iÅ¡ tiesÅ³, jis ketina bÅ«ti funkcija JavaScript. Tada aÅ¡ grÄ¯Å¾ta klaidinga. Mes grÄ¯Å¾ti Ä¯ kad vos akimirkÄ. Bet kur yra apibrÄÅ¾ta Å¡i funkcija? Na leiskite slinkite aukÅ¡tyn Ä¯ failo virÅ¡uje. Ir nors tai ilgas linija, tai gana paprasta. Leiskite nutolinti Äia ir sutelkti dÄmesÄ¯ Ä¯ Å¡iÅ³ keturiÅ³ eiluÄiÅ³. 

Taigi JavaScript, tiesiog kaip PHP, jÅ«s tiesiog tarkim, tiesiog Å¾odis "funkcija", iÅ¡ funkcijos vardas, ir tada skliausteliuose su bet arguments-- jokiÅ³ argumentÅ³ Å¡iuo atveju. Ir nÄra grÄ¯Å¾imas tipas JavaScript, tik norÄÄiau PHP. Taigi tai Å¡iek tiek laisvesnÄs nei C. Atidaryti garbanotas petneÅ¡omis, netoli garbanotas petneÅ¡omis. Ä®taisyta JavaScript yra function-- nerekomenduojamas function-- bet funkcija vadinama perspÄjimas kuriÅ³ vienintelis tikslas gyvenime yra atsigriebti, kad gana negraÅ¾i greitai, kad mes matÄme prieÅ¡ momentas. 

Dabar tai yra rÅ«Å¡ies gurkÅ¡nis. Kas Äia vyksta? Taigi pradÄkime su pabrÄÅ¾ti viskÄ Äia. Tai tas pats argumentas Ä¯spÄti. Ir kas vyksta? Tai tiesiog atrodo kaip eilutÄ. Ir it turns out, skirtingai PHP ir skirtingai nuo C nesvarbu JavaScript jei jÅ«s vieniÅ¡i arba dvigubomis kabutÄmis. Jie bus lygiaverÄiai. Ir tiesÄ sakant, tai tik populiarus Å¡iÅ³ dienÅ³ uÅ¾ JavaScript programuotojai visada Viengubomis kabutÄmis dÄl kokios nors prieÅ¾asties. Tai tiesiog, kÄ reikia padaryti. Bet mes galime naudoti dvigubas kabutes, taip pat. 

Taigi plius yra naujas veikÄjas. Bet tie iÅ¡ jÅ«sÅ³, kurie jau padarÄ prieÅ¡ tai, kÄ plius reiÅ¡kia? Taip. Jungiant. Taigi mes matÄme tai PHP. Yra tik taÅ¡kas operatorius PHP, kad bus Jungiant dvi eilutes kartu. C buvo kaklo skausmas tai padaryti. Prisiminkite iÅ¡ pset Å¡eÅ¡iÅ³, kuris buvo especial skausmas, kaklo, Jums reikÄs naudoti kaÅ¾kas panaÅ¡aus strcat po paskirstant atminties ant klojinio ar krÅ«vÄ. JÅ«s turÄjote Å¡okti per lankus tik Jungiant dvi eilutes. Be JavaScript, tai super paprasta. Tiesiog naudokite pliuso operatoriÅ³ tarp jÅ³. 

Taigi sudÄtingas ieÅ¡ko dalykas atrodo tai nes pabaigoje Visa tai eilutÄ, aÅ¡ tiesiog Jungiant ant Å¡auktuko. Taigi, jei kas buvo Popping buvo "Sveiki, Davidas", "labas, Ona," "Labas, Marija", ir taip toliau, aiÅ¡kiai kad vidutinio dalykas tarp dviejÅ³ pliusai turi duoti man prieigÄ prie ko? Kas ten tikrai? Taip. Taigi aÅ¡ bandau Äia atsakyti savo vardÄ, tiesa? Taigi jÅ³ pavadinimas popped up finale rezultatas. Taigi, kÄ tai reiÅ¡kia? Na, aÅ¡ pasiÅ«liau anksÄiau, kad nuotrauka, vadinamasis DOM turi Å¡iÄ ypatingÄ root elementÄ keliÄ iki aukÅ¡Äiausio vadinamas dokumentas. Ir dabar, it turns out, kad vyksta yra ypatingas pasaulinÄ kintamasis JavaScript, pastatytas Ä¯ kuriÄ yra visa krÅ«va naudingos funkcijos. Tarp naudinga funkcija yra GalimybÄ gauti bet palikuonis mazgas. Tos kvadratÅ³ arba staÄiakampiÅ³ formomis ar elipsÄs yra tik mazgai medyje, taip sakant. 

Taigi paaiÅ¡kÄja, kad pastatytas Ä¯ JavaScript dokumente objektas yra funkcija, kitaip Å¾inoma kaip metodas, kad vadinama getElementById. UÅ¾ skambina sintaksÄ JavaScript funkcija tai yra viduje daiktu ar kintamasis yra tik su dot Å¾ymÄjimo. Ir mes tai matÄ C kÄ konstrukto sintaksÄ. JÅ«s matote tai pset septyni, rÅ«Å¡ies, rÅ«Å¡iuoti, kai pamatysite CS50 :: uÅ¾klausÄ. DvitaÅ¡kis dvitaÅ¡kis PHP yra dar vienas bÅ«das skambinti funkcija, kad yra viduje tam tikru daiktu. 

Bet dabar JavaScript, tai tik taÅ¡kas. Ir taip Å¡i funkcija, pakankamai graÅ¾iai, rÅ«Å¡ies sako, kas tai does-- gauti elementÄ pagal ID. Elementas yra tik dar vienas vardas uÅ¾ tegus arba mazgo DOM. Ir taip gauti elementÄ pagal ID "pavadinimas" reiÅ¡kia this-- Äia mano HTML. Ir remiantis Å¡io HTML, kÄ mazgas ar kÄ HTML tegus aÅ¡ esu ketina programiÅ¡kai bÅ«ti paskelbtas paskambinÄ document.getElementById? 

Taip, tiksliai. AÅ¡ ruoÅ¡iuosi gauti Ä¯vestÄ¯ elementas yra kurio ID yra "vardas." Taigi bÅ«tent, jÅ«s galite galvoti apie Å¡iÄ funkcijÄ, getElementById, kaip uÅ¾leidimas atgal Å¾ymiklÄ¯ Ä¯ tÄ konkreÄiÄ mazgas Ä¯ medÄ¯. Mes ne parengtas Å¡is medis, bet tai bÅ«das gauti prieigÄ prie Å¡ios staÄiakampis arba staÄiakampis iki unikaliai identifikuojantis jÄ¯ per savo ID. 

Dabar, kodÄl tai naudinga? Na, it turns out kad kai jÅ«s DotarÅeÅ kad mazgas, kad StaÄiakampis matuojant nuo nuotrauka, kad viduje ji mazgas, savo ruoÅ¾tu, yra visa krÅ«va properties-- raktas vertÄs poros arba duomenÅ³, iÅ¡ kuriÅ³ vienas yra vadinamas vertÄ. Taigi paÅ¾odÅ¾iui, tai tipo KuriÅ³ kÄsnis paaiÅ¡kinti visa tai. Bet tuo dienos pabaigoje, visa tai daro, yra suteikti jums eilutÄ, vartotojas turi Ä¯vesti Å ioje hierarchinÄ mados. Bet aÅ¡ nepatinka pora iÅ¡ Å¡iÅ³ dalykÅ³. Arba, tiksliau, ten kai smalsumas dar. Visa tai atrodÄ dirbti. KodÄl manote, kad grÄ¯Å¾au klaidinga po skambina pasveikinti? Tai atrodo Å¡iek tiek negraÅ¾i, kad Turiu du teiginiai yra atskirti kabliataÅ¡kiais. SpÄk. Jei aÅ¡ paÅ¡alinti return false, kÄ gali atsitikti, tiesiog instinktyviai? AtsipraÅ¡ome, pakartokite dar kartÄ? 

Atidarykite Windows krÅ«va. Taigi potencialiai gal kaÅ¾kas kaip kad nutiktÅ³. Kas dar? Gali pateikti praÅ¡ymÄ Kur? Tame paÄiame puslapyje Kad. Taigi, iÅ¡ tiesÅ³, tai, kad arÄiau atsakyti Äia nors, skirtingai nuo praeityje, aÅ¡ ne nurodyta veiksmÅ³ atributas, kuris paprastai mes turime daryti. Pasirodo, ten pagal nutylÄjimÄ. Jei nenurodysite veiksmÅ³, tai tarsi sakydamas pasiÅ«lymÄ, citatos pabaiga arba pati failo pavadinimÄ, kuri Å¡iuo atveju bÅ«tÅ³ bÅ«ti, pavyzdÅ¾iui, dom-0.html. Tai tiesiog rÅ«Å¡ies numanomas, ar veikiau reiÅ¡kÄ. 

Ir todÄl, jei aÅ¡ ne tai, tegul pastebÄti. Leiskite man iÅ¡saugoti tai. Ir aÅ¡ paÅ¡alinta return false. Leiskite man grÄ¯Å¾ti Ä¯ Å¡Ä¯ pavyzdys ir jÄga perkrauti. Ir jÅ«s galÄjote matyti mane rodo tai ant CS50 aptarti keletÄ kartÅ³ krÅ«va. Jei kas nors kada nors veikiantis funky ir narÅ¡yklÄs nesielgia kaip tikitÄs, Neretai jÅ«s norite turÄti Shift ir tada spustelÄkite Atnaujinti. Tai privers kiekvienÄ failÄ Ä¯ perkraukite o ne naudoti narÅ¡yklÄs talpyklÄ vietos arba kopija, kad dabar leiskite man eiti Ä¯ priekÄ¯ ir atverti savo inspektorius, skirtukÄ Network. AÅ¡ ruoÅ¡iuosi spustelÄkite IÅ¡saugoti Prisijungti nes aÅ¡ nenoriu, kad ji iÅ¡trinti eilutes kartÄ aÅ¡ turiu vis iÅ¡ plakinio toli kitur. 

Leiskite man eiti Ä¯ priekÄ¯ ir Äia tipo Ieva, spustelÄkite Pateikti. Gerai. Tai atrodo taip, kaip tikÄtasi. Jis sako: "Labas, Ieva". Leiskite spustelÄkite Gerai. Ä®domu. Atkreipkite dÄmesÄ¯, kad puslapis pasikeitÄ, nors Ä¯ pradinÄ¯ puslapÄ¯. Atkreipkite dÄmesÄ¯ Ä¯ URL rÅ«Å¡ies pasikeitÄ. Ji pridÅ«rÄ, klaustukÄ, kuris paprastai yra rodiklis, kad mes bandÄme pateikti kaÅ¾kÄ. Ir tada apaÄioje, dar aiÅ¡kiai, Äia yra tikrasis HTTP uÅ¾klausa, kuris gavo 200 atsakÄ, atvedÄ mane atgal Äia. 

Taigi tai yra ne kas mes norime padaryti, tiesa? Nes aÅ¡ nenoriu perkrauti visÄ puslapÄ¯. AÅ¡ vietoj norÄjo grÄ¯Å¾ti klaidinga taip trumpojo jungimo NarÅ¡yklÄ pagal nutylÄjimÄ elgesys, kuris buvo, Å¾inoma, pateikti puslapÄ¯. 

Taigi leiskite paÅ¾velgti Ä¯ iÅ¡vaizdÄ neÅ¾ymiai geresnis pavyzdys. Tai Namas versija viena. Ir pastebite tokius dalykus. Tai gerai, jei jÅ«s neturite Grok visi kodo linijÅ³. Bet kas iÅ¡ esmÄs skiriasi apie Å¡Ä¯ Ä¯gyvendinimÄ? AÅ¡ nustatyta, kad elgiasi tas pats, daro tÄ patÄ¯. KÄ aÅ¡ akivaizdÅ¾iai daroma kitaip? Taip? 

Auditorija: [nesigirdi]. DAVID Malan: Taip. Taigi funkcija yra apibrÄÅ¾ta differently-- Kitaip tariant, nesant nuo formos, ten on-line 7-- arba o, linija 8-- nebÄra padaryti turiu onsubmit atributas. Ankstesniame pavyzdyje, aÅ¡ turÄjo tai. Ir tada aÅ¡ tiesiog paraÅ¡iau savo kodÄ Äia. Ir tada aÅ¡ pasakiau return false. Ir jei jis nebuvo patrinti JÅ«s neteisingas bÅ«das dar, ji turÄtÅ³ pradÄti kiek kaip, kaip HTML, kai mes pradÄjome bendradarbiauti susilieti jÄ su CSS stiliaus atributus, jis tiesiog pradÄjo gauti Å¡iek tiek nepatogus ar jaustis Å¡iek tiek negerai. 

PanaÅ¡iai Äia, jei pradÄdami vartoti HTML, ir tada jÅ«s automatiÅ¡kai pÅ«kÅ¡telÄti Å¡iek JavaScript kodÄ viduryje kotiruojamos eilutÄ, tai nesiruoÅ¡ia bÅ«ti labai aptarnavimo. TeisÄ? Tai net ne akivaizdu, ne pirmas Vieta, kurioje JavaScript kodas. Taigi bÅ«tÅ³ tikrai graÅ¾us, kaip DÄl geresnio dizaino principas, tegul saugo mÅ«sÅ³ HTML visiÅ¡kai atskirti iÅ¡ mÅ«sÅ³ JavaScript. 

Taigi, kaip tai padaryti, kÄ mes padaryti Äia yra following-- mes tiesiog naudoti HTML tik Å¾ymÄjimo. Ir taip variante vienas iÅ¡ to, visi Turiu yra forma su unikaliu identifikatoriumi. Ir tada Å¾emyn Äia, aÅ¡ pasinaudojant iÅ¡ ypatumas JavaScript kuriuo galiu turÄti tai, kas vadinamas anoniminÄ funkcija. Taigi paaiÅ¡kÄja, kad jei aÅ¡ vadinu document.getElementById iÅ¡ "demo" tai kaip suteikti man Å¾ymeklÄ¯ Ä¯ tai mazgas mano medis, forma elementas, taip sakant. 

Dabar, aÅ¡ tiesiog Å¾inau, iÅ¡ Å¾inant HTML tiek dabar mes perskaitÄs kai internete nuoroda, kad forma elementas palaiko visa krÅ«va renginiÅ³ listeners-- Ä¯ Kitaip tariant, skalbiniai sÄraÅ¡as renginÄ¯ klausytojÅ³, kad mes matÄme prieÅ¡ akimirkÄ. AÅ¡ Å¾inau, skaityti dokumentus kad onSubmit yra galiojantis Ä¯vykis klausytojas uÅ¾ forma elementas. 

Taigi, kai aÅ¡ Å¾inau, kad tai saugu man daryti following-- gauti, kad mazgas iÅ¡ medÅ¾io, forma elementas, ir pasiekite jo vadinamasis onSubmit nuosavybÄ. Taigi taÅ¡kas tiesiog reiÅ¡kia, tai yra objekto, kaip specialios vertÄs viduje jo. Ir kas duomenÅ³ tipas aÅ¡ esu paskiriant, matyt, Ä¯ onsubmit, kuris yra efektyviai viduje kintamasis tos mazgo medÅ¾io? Tai viduje tos struct laukas. Kas yra duomenÅ³ tipas? 

Funkcija, taip. Taigi paaiÅ¡kÄja, kad PHP turi tai. Ir nors mes nebuvo papasakoti apie tai, C taip pat turi funkcija patarimÅ³, kad gebÄjimas perduoti ir priskirti funkcijas kaip patys kintamieji "vertybes. Ir mes neketiname regresuoti atgal Ä¯ C. Bet dabar, paaiÅ¡kÄja, kad ant deÅ¡inÄje pusÄje Äia nors ji atrodo Å¡iek tiek funky, tai reiÅ¡kia, ei narÅ¡yklÄ, man funkcijÄ. NesiruoÅ¡iu net vargintis suteikiant tai vardas, nes aÅ¡ tiesiog ketina priskirti tegul jÄ vadina Å¡ios funkcijos adresas nedelsiant onsubmit. Kitaip tariant, narÅ¡yklÄ, jums nereikia Å¾inoti, kÄ Å¡i funkcija vadinama. Jums tiesiog reikia Å¾inoti kur ji yra atmintyje. Ir taip pakanka tik turi vienodÄ Å¾enklÄ ten o ne nerimauti pavadinti tai, kaip foo ar pasveikinti ar bet koks kitas Å¾odis. O dabar tai tik stilistinÄ dalykas. GalÄÄiau perkelti Å¡Ä¯ garbanotas petneÅ¡omis ant the-- sorry-- kitÄ eilutÄ kaip mes paprastai padaryti CS50. Bet JavaScript, tai iÅ¡ tikrÅ³jÅ³ stilistiÅ¡kai bendra tiesiog iÅ¡laikyti garbanotas petneÅ¡omis, The Pirmasis, tÄ pirmÄ eilutÄ. 

Bet toliau, ten nieko Ä¯domaus. Tai atvira garbanotas petneÅ¡omis tik atriboja mano funkcija pradÅ¾ios. Å i funkcija yra dabar identiÅ¡ki, iÅ¡skyrus aÅ¡ Ä¯traukti return false viduje Å¡ios funkcijos. Kadangi paaiÅ¡kÄja out-- ir tik darytumÄte Å¾inau, tai iÅ¡ skaitymo documentation-- kad jei Å¡iÄ funkcijÄ, kad jÅ«s priskirti Ä¯ onSubmit priÅ¾iÅ«rÄtojas False, narÅ¡yklÄ tiesiog Å¾ino ir sutinka, ne pateikti formÄ Ä¯ serverÄ¯. Jei jis grÄÅ¾ina true, tai bus pateikti jÄ¯ Ä¯ dÄl prieÅ¾asÄiÅ³, matysime serverÄ¯ yra naudingi tik akimirkÄ. 

Ir tada kabliataÅ¡kis po garbanotieji petneÅ¡omis ten tiesiog reiÅ¡kia Atlikau apibrÄÅ¾ti funkcijÄ. JÅ«s Å¾inote, kÄ vadiname kuo greiÄiau iÅ¡girsite pasiÅ«lymÄ. Gerai. Tai vis dar be abejo rÅ«Å¡ies negraÅ¾i. Taigi, kÄ mes galime padaryti daugiau? 

Na, it turns out tada versija du, kuris yra last-- ir mes tiesiog Å¾vilgsnis Ä¯ tai. Tuo priÄmimo rizikos jis maÅ¾iau akivaizdus, ââit turns out kad yra biblioteka pasaulis vadinamas JQuery. Ir JQuery yra super populiarus JavaScript biblioteka tai toks populiarus, kad dauguma bet JavaScript-- tai ne neÄ¯prasta, kad Å¾monÄs painioja JQuery JavaScript. KodÄl? Pati JavaScript turi labai VERBOSE bÅ«dai daro Quake document.getElementById, dadadadadada. JÅ«s galÅ³ gale, turintys labai ilgas eilutes kodo. 

Taigi kolegos pavadintas John Resid, kurie iÅ¡ tikrÅ³jÅ³ dirba paleisties iki Å¡iÅ³ dienÅ³, iÅ¡Äjo su Å¡ios bibliotekos metÅ³ prieÅ¡, kad daugelis Å¾moniÅ³ prisidÄjo Ä¯ vadinamas JQuery, kad keiÄiasi Ä® tokiu bÅ«du sintaksÄ. Ir tik todÄl jÅ«s maÄiau tai, nes jÅ«s visada pamatyti, jei darai Å¾iniatinklio galutinis projektas, tai bÅ«tÅ³ lygiavertis bÅ«das Ä¯gyvendinant tÄ paÄiÄ funkcijÄ, naudodami Å is specialus biblioteka. 

Dabar, o ne Tease jis be jos visumÄ, tegul tiesiog paÅ¾velgti Ä¯ kai kuriuos modelius. Å i sintaksÄ atrodo, kiek anoniminiai funkcijos ar bevardis funkcijos arba AKA lambda funkcijos? Du, tiesa? Ir jÅ«s Å¾inote, kad, net jei JÅ«s nesate Super patogÅ«s su tuo, tiesiog tuo, kad ji sako funkcija () du kartus. 

Ir paaiÅ¡kÄja, kad kas tai yra doing-- kodas ir mes kreiptis Ä¯ interneto nuorodomis, galiausiai, kai su Å¡iuo pagalba. Tai tiesiog reiÅ¡kia, kad kai dokumentas yra paruoÅ¡tas, eiti Ä¯ priekÄ¯ ir registruotis taip funkcija kaip pateikti priÅ¾iÅ«rÄtojas HTML elementas, kurio unikali idÄja yra demo. Ir tada, kai tai atsitiks, skambinti Å¡ias dvi eilutes kodo. Ir tai yra, tragiÅ¡kai, labiau daugiaÅ¾odis bÅ«das pasakyti return false. Ir mes paminÄti tai tik todÄl, kad pamatysite kodÄ, kaip Å¡ioje interneto. Ir tai nieko bÅ«ti iÅ¡sigandÄ. Bet, o, turÄkite omenyje, kad tai, kas bus paplitusi JavaScript tai paradigma. Ir taip, tai kodÄl mes parodysime jÄ¯ dabar. Gerai. Taigi be gyvenamÅ³jÅ³ per kiek tÄ sintaksÄ, ten yra kokiÅ³ nors klausimÅ³ apie Å ie pavyzdÅ¾iai ar idÄjos iki Å¡iol? Gerai. Taigi leiskite naudoti Å¡Ä¯ kaÅ¾kÄ naudingo. Padaryti puslapÄ¯, kuris tiesiog sako labas, taip ir taip yra ne visi, kad Ä¯domus, ne underwhelm. Tai vienas nesiruoÅ¡ia bÅ«ti graÅ¾us, bet ji ketina padaryti kaÅ¾kÄ naudingo. Leiskite man grÄ¯Å¾ti Ä¯ savo katalogÄ Äia ir atverti, tarkim, forma-0.html. 

Taigi manau, tai yra pirmakursis vidines sporto registracija puslapis be jokiÅ³ CPT arba bet dizaino prasme. Ir aÅ¡ noriu eiti Ä¯ priekÄ¯ ir Registruokis Äia su slaptaÅ¾odÅ¾iu. Ir aÅ¡ ruoÅ¡iuosi sutinkate su sÄlygomis sÄlygos ir spauskite mygtukÄ "Registruotis. Ir dabar svetainÄje sako: "Tu esi registruotas! (Na, tikrai ne). " Tai atrodo kaip jis dirbo, bet leiskite man eiti Ä¯ priekÄ¯ ir priversti Atnaujinti. 

Ir leiskite man pasakyti, ne, jÅ«s ne reikia mano tikrÄjÄ¯ elektroninio paÅ¡to adresÄ. O gal mes tiesiog pasakyti laiÅ¡kÄ ten. SlaptaÅ¾odis bus, kaip, 12345. Ir tada, tik todÄl, kad aÅ¡ idiotas, dabar tai 123456789. Ir aÅ¡ nesiruoÅ¡ia patikrinti savo dÄÅ¾utÄ. 

Hmm. Gerai. Taigi ten ir turÄjo keletÄ galimybiÅ³ tobulinti Äia. Ir Å¾inote, ar pamatysite pset septyni, kad galite raÅ¡yti code-- ir jÅ«s turÄsite raÅ¡yti kodas PHP-- ginti prieÅ¡ Å¡iÅ³ Viskas rÅ«Å¡iÅ³ klaidos, nes vartotojas aiÅ¡kiai nebendradarbiavo. Ir jis ar ji jums nedavÄ visi vertina jÅ«s norÄjote ar net formatu kad jÅ«s norÄjo juos. Taigi jÅ«s pamatysite pset septyniÅ³ mes tikrai gali turÄti tam tikrÄ Jei sÄlygos, kad pasakyti jei elektroninio paÅ¡to adresÄ nÄra username@something.edu, mes galime tik pasakyti atsipraÅ¡au ir atsipraÅ¡yti vartotojui daug, kaip jÅ«s galite bÅ«ti pset septyni. Arba, jei jie nebuvo patikrinti tÄ langelÄ¯, Pasirodo, PHP, galite aptikti, kad per daug. Ir, Å¾inoma, jei slaptaÅ¾odÅ¾ius nesutampa, kaip register.php uÅ¾ pset septyni, galite aptikti, kad. Bet tai yra skausmas kaklo, kad dabar jie praÅ¡o mums pereiti visÄ keliÄ Ä¯ serverÄ¯. Vartotojas informuojamas apie klaidÄ. Ir bent jau nebent jÅ«s naudojate kai mÄgÄjas bÅ«dai, dabar jie turi paspausti rodyklÄ atgal. Ar nebÅ«tÅ³ puiku, kaip daug svetainiÅ³ Å¡iandien jei jums buvo greitesnis Atsiliepimai, akimirksniu? 

Kitaip tariant, leiskite man eiti Ä¯ versijÄ vienas, kuris bus ne graÅ¾iau. Bet ji turi Å¡iÄ funkcijÄ. Malan, 12345, 123456789, ne ketina paÅ¾ymÄkite langelÄ¯, urÅ¾egitruokite. SlaptaÅ¾odÅ¾iai nesutampa. Taigi, nors tai pop-up yra ugly-- mes galime pakeisti tai galiausiai kaÅ¾kÄ panaÅ¡aus bootstrap, kurÄ¯ pamatysite pset septyniÅ³ yra labai populiarus library-- aÅ¡ nustato, kad slaptaÅ¾odÅ¾iai nesutampa. Gerai. Na, leiskite man nustatyti, kad vartotojui. Leiskite man eiti Ä¯ priekÄ¯ ir pasakyti 12345, 12345. Vis dar tikrinti susitarimÄ. Turite sutikti su nuostatos ir sÄlygos. KodÄl? 

Jei mes jau posited kad yra bÅ«das, ir mes jums reikalingas pset septyni aptikti klaidÄ sÄlygos, kaip tai server-side, kodÄl turÄÄiau nerimauti taip pat daro tai JavaScript? Kas yra ir argumentas palankumas pridÄti kÄ jÅ«s ketinate pamatyti, kaip some-- ten papildomas sudÄtingumas. 

Gal nÄra aukÅ¡tyn kojom. KÄ tai galÄtÅ³ bÅ«ti? Auditorija: [nesigirdi]. DAVID Malan: O, Ä¯domu. Galimas iÅ¡naudoja. Taigi tikrai, jei nesate tvarkymo Klaidingas vartotojo Ä¯vestis, kad didelis, gal tai visi geriau, jei juo nÄra net pasiekti savo serverÄ¯. NorÄÄiau stumti atgal ten ir tarkim, jÅ«s tikriausiai turÄtÅ³ nustatyti abiejÅ³ Å¡iÅ³ problemÅ³. Bet tai teisinga. Kas dar? 

Auditorija: [nesigirdi]. 

DAVID Malan: Taip. Å is kodas, kaip mes sakÄme anksÄiau, yra aiÅ¡kinama kliento pusÄje. Ji nesivargina serverÄ¯, tai reiÅ¡kia, kad nÄra Poveikis serverio apkrova ar gebÄjimus. Ir dabar, tiek senosios mane, tai neturi reikÅ¡mingo poveikio nes turiu vienÄ naudotojÄ dabar. 

Bet jei jÅ«s bet svetainÄ padoraus dydÅ¾io, ypaÄ didÅ¾iausias, kaip "Facebook", daugiau galite iÅ¡laikyti Å¾mones nuo savo serverÄ¯, tuo geriau nes serveryje, Å¾inoma, turi tik baigtinÄ¯ kiekÄ¯ RAM, baigtinio skaiÄiaus gigahercÅ³, baigtinio skaiÄiaus dalykÅ³ jis gali padaryti per laiko vienetÄ. Taigi, jei yra daugiau Å¾moniÅ³ pasaulis pradeda savo serverÄ¯, netyÄia prisijungti neteisingai, lygiai taip pat, jei jus gali laikyti, kad apkrova ne jÅ«sÅ³ serveryje. Be to, ypaÄ Ä¯ mobilÅ³jÄ¯ device-- jei jÅ«s kada nors prisijungti my.harvard arba Yale NetID ar panaÅ¡iai, ten tai latentiÅ¡kumas su daug svetainÄs, pavyzdÅ¾iui, kad, pagal kurÄ¯ jis pasiima, kaip, velniÅ¡kai antrÄ arba du kartais. Ir tada, mano Dieve, jei neteisingai Ä¯vedate, tada jÅ«s turite paspausti atgal ir perdaryti jÄ. Taigi ten latentinis, ypaÄ ant lÄtesniÅ³ tinklo jungtys. Bet JavaScript, nes ji veikia kliento ir nereikia eiti pirmyn ir atgal visoje potencialiai lÄtas interneto ryÅ¡ys, jÅ«s galite gauti beveik momentinis atsiliepimai. 

Taigi paÅ¾velkime Ä¯ tai. Leiskite man atverti forma-0 ir paÅ¾velgti Ä¯ HTML Äia. Ir tegul tik pamatyti, kas vyksta. Tai yra forma, kurio veiksmas yra register.php. AÅ¡ tiesiog naudojant gauti tiek kad galÄÄiau pamatyti adresÄ. Bet slaptaÅ¾odÅ¾iais, mes norime tikrai norite tai pakeisti, kad galÄtumÄte iÅ¡ tikrÅ³jÅ³. Å tai Ä¯vesties laukas tipo tekstÄ. Å tai dar vienas Ä¯Äjimas lauko tipo slaptaÅ¾odÅ¾iu. Äia yra, jei jÅ«s niekada, AN tipo langelÄ¯ Ä¯Äjimas. 

TaÄiau nÄra JavaskriptÄ Äia kokia. Tai tik HTML, kad eina Ä¯ register.php. Bet versijos viena, kur aÅ¡ pradÄjo gauti tuos iÅ¡Å¡okanÄius langus, paÅ¾iÅ«rÄkime, kas iÅ¡ tikrÅ³jÅ³ vyksta Äia. Versijoje vieno, kas AÅ¡ ruoÅ¡iuosi see-- I maniau, kad aÅ¡ galÄtÅ³ vilkinti pakankamai su pakankamai Å¾odÅ¾iais, bet iÅ¡bÄgau. 

Versijoje one-- ten einame. Versijoje vienÄ, pastebÄsite following-- ir nÄra geriausia Ä¯gyvendinimas, bet tai mano pirmas. Atkreipkite dÄmesÄ¯, kad Å¾emiau forma, turiu scenarijÅ³ Å¾ymÄ. Ir scenarijÅ³ Å¾yma reiÅ¡kia, ei, narÅ¡yklÄ, Äia ateina tam tikrÄ kodÄ, Paprastai JavaScript. Ir dabar, pastebÄsite, kÄ darau. Apie line-- galiu vos skaityti it-- 32 eilutÄje, jis sako, var form-- todÄl man kintamasis vadinamas forma. Ir tada gauti document.getElementId "registracija". Kas tai? Na, leiskite man atsukti Äia. Ir praneÅ¡imas, ah, aÅ¡ davÄ formos elementÄ savavaliÅ¡kas, bet apraÅ¡omojo idÄja Registravimo. Taigi, tai suteikia man kintamÄjÄ¯, kad leidÅ¾ia man patraukti, kad mazgas, kad staÄiakampis medyje vadinamas formÄ. form.onsubmit priemonÄs, ei narÅ¡yklÄ, uÅ¾siregistruoti atveju klausytojas Å ioje formoje. Kitaip tariant, kai Å¡i forma yra pateikta, Ä¯vykdykite Å¡iÄ kodÄ. Tai nereikia, nes vardÄ kodÄl jums reikia Å¾inoti vardÄ? Jums tiesiog reikia Å¾inoti KÄ vykdyti, ERGO tai anoniminis arba lambda funkcija. Ir tai funkcija yra visÅ³ Å¡iÅ³ eiluÄiÅ³ Äia. Ir dabar, bÅ«ti sÄÅ¾iningais, net jei gali ne kada nors paraÅ¡yta JavaScript anksÄiau, tai tik C ir PHP logika. Taigi, jei form.email.value == "" - taigi, jei el.paÅ¡to laukas yra tuÅ¡Äias, klykauti vartotojui su "Tu privalai pateikti savo elektroninio paÅ¡to adresÄ. " Kita, jei form.password.value yra tuÅ¡Äias klykauti ne vartotojui, "JÅ«s turite nurodyti slaptaÅ¾odÄ¯". 

Dar Ä¯domiau, logiÅ¡kai, jei form.password.value nÄra lygus form.confirmation.value-- kur gi patvirtinimas atÄjo? Leiskite man atgal. Na, aÅ¡ pavadino Å¡Ä¯ Ä¯vesties laukas Äia slaptaÅ¾odÄ¯. Ir aÅ¡ paÅ¡aukiau Å¡Ä¯ vienÄ Äia patvirtinimas. GalÄjau jÄ¯ pavadino slaptaÅ¾odis du ar kas nors kitas. AÅ¡ tiesiog logiÅ¡kai tikrinti , kad Å¡ie du yra ta pati. Else-- it turns out tai p Boole again-- BÅ«lio vertÄ, Å¾ymÄs langelÄ¯. Taigi, jei aÅ¡ sakau, Å¡auktukas point-- jei ne form.agreement.checked, klykauti vartotojui, taip pat. 

Taigi tai sintaksÄ pamatysite yra Labai daÅ¾ni JavaScript, kur jÅ«s turite Å¡Ä¯ punktyras notacijos. JÅ«s pradedate su objektu Äia. JÅ«s pasinerti giliau Ä¯ A panaÅ¡us slaptaÅ¾odÅ¾iu nuosavybÄ. Ir tada jÅ«s gausite savo tikrÄjÄ vertÄ. Ir vÄl, Äia yra Ä¯Äjimas. Äia yra vardas SlaptaÅ¾odis. Ir jos vertÄ yra nepriklausomai Å½mogaus faktiÅ¡kai Ä¯vedÄte. 

Taigi, visi Å¡ie atvejai, grÄ¯Å¾au klaidinga. Bet jei ne, aÅ¡ grÄ¯Å¾ti tiesa. Ir todÄl dabar matome Ä¯tikinamÅ³ naudojimas, kai Jums sugrÄ¯Å¡ klaidinga Sustabdyti, kÄ vartotojas daro ir padaryti jÄ¯ arba jÄ pasirinkti vÄl arba Ä¯veskite dar kartÄ. PrieÅ¡ingu atveju, mes grÄ¯Å¾tame tiesa. 

Ir leiskite man pristatyti vienÄ Kitas variantas tai tik sÄklos Å¡iek tiek suvokimÄ. Na, Å¡io 2 versija, forma-2-- AÅ¡ tai padaryti su rankoje bangos. Tai yra, tiems, iÅ¡vengti, JQuery versija Tiems iÅ¡ jÅ«sÅ³, kurie galbÅ«t norÄsite taÅ¡kytis toje konkreÄioje bibliotekoje. Bet tegul start-- ir kokiÅ³ nors klausimÅ³? Leiskite man pristabdyti metu, nes kad buvo greitai ir daug. 

Bet graÅ¾us dalykas Äia yra tai, kad visi kodo yra gana daug tÄ patÄ¯. Nauja medÅ¾iaga yra kas yra dom? Kas tai yra staÄiakampiai? Kokie Å¡ie mazgai? Kas yra anoniminÄ funkcija? Kas Ä¯vykis priÅ¾iÅ«rÄtojas? Bet laimei, dauguma tai tik pilnas ratas nuo, tarkim, nulinÄs savaitÄ. Gerai. Taigi kaÅ¾kas Å¡iek tiek Ä¯domesnis? Na, visÅ³ pirma, leiskite man eiti Ä¯ priekÄ¯ ir atverti Google Maps. Ir jÅ«s pastebÄsite, kad dÄl momentas, nuo sekundÄs, pastebÄti, kas atsitinka, kai AÅ¡ spustelÄkite pakankamai greitai. Ir tai Harvarde ryÅ¡ys yra toks greitai, kad jÅ«s tikrai pastebÄti. Bet kÄ jÅ«s rÅ«Å¡ies tarsi pamatyti jei aÅ¡ spustelÄkite ir vilkite tikrai greitai? Tiems iÅ¡ jÅ«sÅ³, Å¾iÅ«ri internete, Jei lÄtai tai 0,5 k greiÄiu, matote Å¡Ä¯ geriau. 

Kas vyksta tik PrieÅ¡ aÅ¡ spustelÄjote ir nutempÄ? Leiskite man pabandyti here-- leiskite man padaryti kaÅ¾kas, kaip ir 90210. Vykime toli. Tai buvo tikrai greitai, per daug. Kaip apie Disney World? Äia mes eiti. GERAI. KÄ jÅ«s matote sekundÄs? Tiesiog, kaip, aikÅ¡tÄse, tiesa? Pamainymai PlyteliÅ³? 

Na, kas vyksta Äia? "Google Maps" yra graÅ¾us pavyzdys Tai technologija, kuri vadinama AJAX. Ir tai, kai mes pradÄsime naudoti JavaScript ypaÄ viliojantis bÅ«das. Atgal Ä¯ dienÄ, buvo Å i svetainÄ vadinamas MapQuest. Ir aÅ¡ turÄjo priimtas Screenshot tai nuo 1990, kur, jei norite ieÅ¡koti Äia Å¾emÄlapyje, jÅ«s tiesiog spustelÄkite rodyklÄ iki virÅ¡uje, kad jums parodÄ, kitoks aikÅ¡tÄ Å¾emÄlapyje. Jei nori judÄti Ä¯ kairÄ, jums paspaudÄte rodyklÄ, kad jums parodÅ¾iau kitoks aikÅ¡tÄ Å¾emÄlapyje. Ir keletas svetainiÅ³, vis dar tai padaryti Å¡iandien. Bet net MapQuest turi DotarÅeÅ geriau, kaip "Google Maps". 

Vietoj to, kas geriau tai dienÅ³ yra svetainiÅ³, kurios naudoja AJAX. AJAX-- kitaip Å¾inomas kaip Asinchroninis JavaScript ir XML, kuri yra tik iÅ¡galvotas bÅ«das pasakyti technologijÅ³ ar metodas, kuris leidÅ¾ia narÅ¡yklÄ, naudojant "JavaScript" atlikti papildomus HTTP uÅ¾klausas Po puslapis buvo Ä¯keltas. Taigi, kÄ tai reiÅ¡kia? Na, tai bÅ«tÅ³ natÅ«ra erzina Gmail jei kaskart jÅ«s norÄjote patikrinti savo laiÅ¡kus, Jums buvo tiesiog paspauskite Valdymo R arba KomandÅ³ R arba spustelÄkite mygtukÄ Perkrauti ir visa adyti puslapis bÅ«tÅ³ perkraukite puslapÄ¯. TeisÄ? BÅ«tÅ³ flash balta turbÅ«t sekundÄ. Galima bÅ«tÅ³ pamatyti kvailas juosta. Ir tik pamatyti, jei jÅ«s turite naujÄ paÅ¡tas, visa interneto puslapis ir URL esate ne tektÅ³ iÅ¡ naujo Ä¯kelti. 

Bet tai dar ne tai, kas vyksta "Gmail". TeisÄ? Kai jÅ«s gaunate naujÄ laiÅ¡kÄ Ä¯ "Gmail", kas vyksta ekrane? Tai tiesiog rodo, tiesa? Jis tiesiog stebuklingai atrodo kaip naujos eilÄs stalo. Tai iÅ¡ tikrÅ³jÅ³ yra susijÄs su padoraus dydÅ¾io sudÄtingumo. IÅ¡ tiesÅ³, jei jÅ«s manote apie Å¡io medÅ¾io, kuris nors yra paprastas vienas iÅ¡ Äia, Gmail-- ir aÅ¡ turiu ieÅ¡koti Ä¯ kodÄ, kad bÅ«tÅ³ sure-- tikriausiai turi HTML lentelÄ arba gal tikriausias nerÅ«Å¡iuotas sÄraÅ¡as, kad ji teikia kiekvienas iÅ¡ jÅ«sÅ³ paÅ¡to dÄÅ¾utÄ laiÅ¡kÅ³ kaip. 

Ir todÄl, jei jÅ«s galite Ä¯sivaizduoti, tai ten yra atminties, kai jÅ«s medis naudojant "Gmail", kad atrodo rÅ«Å¡ies rÅ«Å¡iuoti kaip Å¡is, kai "Google" supranta, ooh, jÅ«s turite naujÄ laiÅ¡kÄ, jis neturi norite atstatyti visÄ medÄ¯. GreiÄiau, jis nori rasti mazgas medis, kuris atstovauja savo paÅ¡to dÄÅ¾utÄ ir tiesiog Ä¯terpti naujÄ virÅ¡Å«nÄ. 

Taigi labai panaÅ¡us Ä¯ pset penki, kur jÅ«s turÄjo Ä¯terpti mazgus Ä¯ maiÅ¡os lentelÄ, PanaÅ¡iai daro "Google", per JavaScript kodÄ, kad ji paraÅ¡yta, Traverse Å¡io medÅ¾io, iÅ¡siaiÅ¡kinti, kur yra tai, kad gautieji lango dalis, ir tada Ä¯terpti naujÄ eilutÄ. O nauja eilÄ tiesiog reiÅ¡kia vienÄ ar daugiau naujÅ³ mazgÅ³ medÄ¯. 

Ir taip, AJAX yra Å¡is metodas kuri leidÅ¾ia bÅ«tent tai. SukÅ«rÄ aplankÄ URL TaÄiau beprotiÅ¡ka ilgai jis yra, ir kai puslapis yra buvo pakrautas, vis tiek galite patraukti daugiau duomenÅ³ iÅ¡ internet-- ar tai Å¾inutÄ siÅ³sti arba iÅ¡ map-- plyteliÅ³ patraukti jÄ¯ uÅ¾kulisiuose ir tada Ä¯terpti jÄ¯ Ä¯ puslapyje taip, kad Å¾mogaus tikrai ne turi laukti uÅ¾ jÄ¯. 

"Facebook" Messenger "veikia taip pat. Bet kita websites-- skaiÄius Oh, iÅ¡ tikrÅ³jÅ³, net tai. AÅ¡ turiu galvoje, tai yra, tiesÄ sakant, rÅ«Å¡ies erzina funkcija Å¡iÅ³ dienÅ³. Jei aÅ¡ pradedu ieÅ¡koti cats-- tai rÅ«Å¡ies Å¾iaurios vartotojo patirtÄ¯. Jis tiesiog pradeda ieÅ¡koti uÅ¾ mane. Na kÄ jis daro? URL nÄra tikrai pasikeitÄ nes aÅ¡ pradÄjau raÅ¡yti. Bet tai, kas vyksta visoje wire-- Gerai, hmm Ä¯domu. Kas vyksta visoje vielos Äia tiesiog gauna weirder. 

GERAI. Taigi leiskite man eiti Ä¯ priekÄ¯ ir patikrinkite elementas ir eiti Ä¯ skirtukÄ Network ir pabandyti padaryti tai techninis ir maÅ¾iau apie kates. Kaip aÅ¡ tipo, paÅ¾odÅ¾iui, katÄs and-- kas vyksta per-- NesiruoÅ¡iu paspausti, kad. Gerai. Taigi Å¾emyn Äia, Kas vyksta kiekvienÄ laikas I tipo simbolÄ¯, matyt? Kaip, Å¾emas lygis? Kas vyksta su kiekviena iÅ¡ tÅ³, personaÅ¾us aÅ¡ raÅ¡yti Ä¯ mano klaviatÅ«ros? Taip? Auditorija: [nesigirdi]. 

DAVID Malan: BÅ«tent. Kiekvienas iÅ¡ Å¡iÅ³ simboliÅ³ yra vyksta Ä¯ "Google", vienu metu. Jie kurti eilutÄ savo serveryje, kuris atstovauja viskas, aÅ¡ Ä¯vedÄte iki Å¡iol. Ir kiekvienÄ kartÄ, kai aÅ¡ tipo kitu charakteriu, jie naudoti savo slaptÄ padaÅ¾u, turinti paieÅ¡kos algoritmas ir iÅ¡siaiÅ¡kinti, Ar jis reiÅ¡kia Å i katÄ puslapÄ¯ ar tai katÄ puslapis ar pan? Taigi tam tikra prasme, tai suteikia man geriau patirtis, kad aÅ¡ net ne reikia uÅ¾baigti savo mintÄ¯. Ir iÅ¡ tiesÅ³, tai naudinga dalykas, Automatinis apskritai. Jei jÅ³ algoritmai yra pakankamai gera ir jei mano paieÅ¡kos yra pakankamai akivaizdus, AÅ¡ neturiu Ä¯vesti visÄ Å¾odÄ¯. Jie ketina pasakyti man, kÄ jis yra aÅ¡ iÅ¡ tikrÅ³jÅ³ ieÅ¡ko. Taigi, kÄ "Google" ragina momentiniai paieÅ¡ka tik naudojant AJAX, naudojant kodÄ, kuris leidÅ¾ia jiems praÅ¡yti Papildoma informacija per interneto narÅ¡yklÄ uÅ¾kulisiuose naudojant Å¡Ä¯ nauja kalba, "JavaScript". Taigi, mes turime keletÄ minuÄiÅ³ liko. Ir leiskite man iÅ¡kviesti Mano biÄiulis Colton iki ant scenos, nes ji atrodÄ ypaÄ smagu paskutinÄ¯ kartÄ pristatyti technologijÄ kad kai kurie iÅ¡ jÅ«sÅ³ iÅ¡reiÅ¡kÄ susidomÄjimÄ Ä¯ galutiniÅ³ projektÅ³. Mes galvojome, kad bÅ«Äiau Ä¯domus pareikÅ¡ti iki savanoris, nors Å¡iandien parodyti jums papildymus tai, kad leidÅ¾ia you-- taip, MaÄiau Å¡Ä¯ rankÄ pirmas. Nagi iki. Labai gerai padaryta. Å aunuolis. AÅ¡ ruoÅ¡iuosi PROJEKTAS Å is ant Ä® akimirkÄ ekrane. Koks jÅ«sÅ³ vardas visiems? 

ALE: AÅ¡ Efa. 

DAVID Malan: Etha? 

ALE: Efa. 

DAVID Malan: Efa? 

ALE: Taip. 

DAVID Malan: Malonu Jus matyti. Gerai. Leiskite gauti tai paruoÅ¡ta. Ateik Ä¯ daugiau kaip Ä¯ viduryje Colton Äia. Kas Colton turi savo rankose Å¡iandien yra nuotolinio valdymo pultelis. Taigi, o ne tiesiog stovÄti ten A trimatis pasaulis dairausi kaip tai darÄ Colton, dabar Efa gali iÅ¡ tikrÅ³jÅ³ vaikÅ¡Äioti aplink kuriÄ einame, Å¾emyn, Ä¯ kairÄ ir Ä¯ deÅ¡inÄ tarsi "Nintendo" arba "Xbox kontrolierius. ALE: AÅ¡ ruoÅ¡iuosi nukristi Ä¯ scenÄ. DAVID Malan: aÅ¡ stovÄti maÅ¾daug Äia. Bet, kad yra rizikos. GERAI. Taigi pirmyn ir Ä¯dÄti tie ant. Leiskite man eiti Ä¯ priekÄ¯ ir pereiti prie ekrano Äia. Leiskite artimosios Å¡viesos. Ir Colton, leiskite man ateiti stendas Å¡alia tavÄs. 

Ar norite paaiÅ¡kinti Äia su MIC, kÄ mes darome? Äia jÅ«s einate. 

COLTON: Å½inoma. Taigi dabar mes pakrovimo iki Oculus, Manau, operating-- neveikia sistema, taÄiau pagrindinÄ programa, kur galite prieiti prie visÅ³ Å¾aidimÅ³ ir Programos, kurios yra jÅ«sÅ³ bibliotekoje. Taigi dabar, ji turÄtÅ³ pasakyti bakstelÄkite Touchpad pradÄti. JutiklinÄ ketina bÅ«ti apie deÅ¡inÄje pusÄje ausines. Taigi pirmyn ir tap-- ALE: Oi, vyras. DAVID Malan: Taip, ten jÅ«s einate. KokybÄs PakartotinÄ¯ pamatyti yra daug aukÅ¡tesnÄs kokybÄs. Tai tik Wi-Fi Äia. COLTON: Taigi, kÄ jÅ«s ketinate norite daryti yra paÅ¾velgti Ä¯ virÅ¡Å³ deÅ¡iniajame ekrano kampe. Taip, tai Å¾aidimas labai virÅ¡uje deÅ¡inÄje. Ir tada, kai jÅ«s pasirinkdami jis vÄl bakstelÄkite jutiklinÄs planÅ¡etÄs. Manau, kad jos Dreadhalls. Ir tada Äia yra a-- Äia, tegul man turÄti savo akinius uÅ¾ jus. 

Taigi aÅ¡ tiesiog davÄ jam valdiklÄ¯. Taigi, dabar jis gali kontroliuoti Å¾aidimÄ. Jis gali judÄti ir stuff like that. Taigi pirmyn ir ieÅ¡koti Ä¯ virÅ¡Å³. JÅ«s turÄtumÄte pamatyti naujÄ Å¾aidimÄ. Taigi pirmyn, ir jÅ«s galite tai padaryti. Dabar, jums turÄtÅ³ bÅ«ti suteikta galimybÄ kontroliuoti BÅ«k su valdikliu, taip pat, kaip tik Å¾aidimas Ä¯kelia Äia. Tai gali bÅ«ti Å¡iek tiek baisu. 

ALE: Dabar galite man papasakoti. GERAI. 

COLTON: Visos deÅ¡inÄ. Taigi patvirtinti, kad jÅ«s galite judÄti. GERAI. JÅ«s galite judÄti. Tobula. Taigi, jei jums atrodo Å¾emyn, jÅ«s turite Å¾emÄlapÄ¯. Å½emÄlapis parodo jums, kur esate. JÅ«s galite ieÅ¡koti aplink kambarÄ¯. JÅ«s galite visiÅ¡kai apsisukti. Taip, tiksliai. Apsisuk. 

Taigi atrodo, kad jÅ«sÅ³ pusÄje. AÅ¡ manau, kad yra kaÅ¾kas, galite pasiimti ant kambario barelÄ¯. 

ALE: Kaip aÅ¡ galiu gauti Å¾emÄlapÄ¯ iÅ¡ kelio? COLTON: PaÅ¾velkite Ä¯ virÅ¡Å³. Tiesiog ieÅ¡koti. Gerai. Na Å¡tai. Dabar eikite Ä¯ priekÄ¯ ir tiesiog apsisukti. Taigi ieÅ¡koti toliau Ä¯ savo kairÄ. Laikyti juda Ä¯ kairÄ. Laikyti ieÅ¡ko kairÄje. TÄsk. Taip. 

ALE: O, kad taip. 

COLTON: Taip. PasivaikÅ¡Äiojimas Ä¯ jÄ¯ su valdikliu. Na Å¡tai. Dabar ji turÄtÅ³ pasakyti pasiimti. Na Å¡tai. Pakelk. Gerai. Dabar galime iÅ¡eiti iÅ¡ Å¡io kambario. Eiti Ä¯ priekÄ¯ ir eiti Ä¯ tas duris. Taigi, jÅ«s ketinate hold-- ji sako palaikykite mygtukÄ priversti jÄ¯ atvirÄ. Taigi pirmyn ir palaikykite mygtukÄ. Taip, verÄia jÄ¯ atidaryti. Gerai. Å aunuolis. Dabar mes vaikÅ¡Äioti iÅ¡ kambario. Taigi, aÅ¡ ruoÅ¡iuosi palikti pailsÄti iki jums ir pamatyti, kÄ suÅ¾inoti. ALE: NesiruoÅ¡iu Ä¯ tamsioje patalpoje. O palauk. Dabar aÅ¡ turiu eiti Ä¯ tamsiÄ salÄ? Gerai, aÅ¡ einu atgal [nesigirdi]. COLTON: Visos deÅ¡inÄ. Kai daugiau elementÅ³ pasiimti. Atrodo, kad kai kuriÅ³ monetÅ³. Å tai spyna pasiimti. Taigi, jei radote uÅ¾rakinta durys, galite naudoti, kad. Ar tu bijai? 

ALE: Dar nÄra. COLTON: Gerai. 

Pretend-- taip. Tiesiog apsimesti esate iÅ¡ tikrÅ³jÅ³ stovi. Ir jei Ä¯jungsite around-- jÅ«s turite priprasti prie jo. Bet tai turi prasmÄ. DAVID Malan: Ir nors Efa toliau Å¾aisti, nes mes galime tai padaryti visÄ dienÄ, mes visi galime TIP-Toe Äia. Bet mes turime kitas dvi poras, jei norite ateiti ir Å¾aisti. PrieÅ¡ingu atveju, mes matome kitÄ kartÄ, treÄiadienÄ¯. DÄkojame mÅ«sÅ³ savanoriui ir Å¡iandien. [Plojimai] 

[Muzika - "Seinfeld tema"] GARSIAKALBIS 1: Na, aÅ¡ iÅ¡leisti naujÄ PL montuoti ant. AÅ¡ tiesiog pakeitÄ OLPF-- 

SPEAKER 2: Taigi, kas tiksliai tu darai? 

GARSIAKALBIS 1: Na, kiekvienas iÅ¡ these-- Äia aÅ¡ jums parodysiu Å¡Ä¯ vienÄ Äia. Galite pamatyti jÄ¯ Äia. 

GARSIAKALBIS 3: Manau, kad esu geras su jais. JÅ«s norite Å¡iek tiek daugiau? 

GARSIAKALBIS 4: Ne, aÅ¡ gera. [Nesigirdi]. 

GARSIAKALBIS 3: Ne, [nesigirdi]. Ar kai kurie. GARSIAKALBIS 1: skirtingÅ³ spalvÅ³. SPEAKER 2: Gerai. GARSIAKALBIS 1: Taigi galiausiai, kas tai daro tai sureguliuoja spalvÅ³ of--