[Music kucheza] DAVID Malan: Hii ni CS50. Huu ni mwanzo wa wiki tisa. Na hii ni nini ingekuwa Imekuwa Mheshimiwa Boole ya 200 ya kuzaliwa. Hivyo hii ni wenzake ambao tumekuwa alluded kabisa baadhi ya nyakati kuhusu kutumia Vigezo Boolean kweli na uongo, 1 na 0 na hayo. Na hii ilikuwa ya Google ujira kwake leo. Yeye ingekuwa akageuka 200. Hivyo kama wewe Ningependa kujiunga na sisi kwa CS50 chakula cha mchana, tuangalie kiungo kwenye tovuti kozi. Na nyuso hizo na marafiki kama hizi wakisubiri wewe hapa katika Cambridge. Nyuso kama haya wakisubiri wewe katika New Haven. Na, kwa kweli, Ken katika New Haven huruma alifanya kile kinachoitwa GIF animated wa Eli hapa katika hivi karibuni lunch-- GIF ni bado mwingine graphical faili, na ambayo wewe ni familiar-- kwamba inaonekana kitu kidogo kama hii. Hivyo tu mlolongo of-- sawa. Hakuna mtu hapa katika Cambridge ni huku akicheka. Lakini katika New Haven, hii ni kweli funny, sawa? Sawa. Hivyo kujiunga nasi pale. Hapa katika Harvard, hasa, Jumatano hii, kama wewe ni sophomore au Freshman even-- au hata junior-- kufikiri ya maamuzi kubadili kwenye kompyuta sayansi, unajua kwamba kuna itabidi kuwa CS kutoa ushauri wa haki hii Jumatano, muda mfupi baada ya daraja la katika 04:00 katika kompyuta jengo sayansi Maxwell Dworkin. Tutaweza kuweka hii juu ya kozi ya tovuti na kesho, kama vile. Donuts, nimeambiwa, itakuwa aliwahi. Sawa. Hivyo funny story-- nilikuwa poking karibu kwenye mtandao, na nimeona baadhi nyaraka mzee ya tovuti yangu ya zamani. Na ni zamu nje kuzunguka hili muda, inaonekana wakati sana tangu mimi kukusanya kwamba uchaguzi UC ni kuhusu gia tena. Hivyo mimi mbio kwa UC, waliopotea vibaya. Na labda hii ilikuwa katika sehemu kwa nini. Hivyo hii ilikuwa tovuti yangu kwa wakati mmoja. Kwa sababu fulani, nilifikiri ilikuwa wazo nzuri, kabla ya kuwaambia watu nini jukwaa yangu ilikuwa na ndiyo maana lazima kupiga kura kwa ajili yangu, kwamba wana click kuingia ili kujua kwamba habari, ambayo katika retrospect ni aina ya creepy. Mimi si kweli kujua nini hiyo ilikuwa. Lakini ni hakika hakuwa kusaidia kampeni yangu. Mimi pia kupatikana kuwa na waandamizi year-- Mimi nilikuwa kalenda hii Muppet. Muppets walikuwa aina ya katika Vogue kisha nyuma. Au labda hawakuwa. Mimi nilikuwa kalenda Muppet kisha nyuma. Na nilifikiri d kuwa baridi kwa jina kompyuta yangu kwenye mtandao Harvard frogman.student.harvard.edu. Wakati huo, sisi wote walikuwa kipekee zinazotambulika jeshi majina. Na unaweza kuchagua baadhi ubatili jina badala ya jina yako mwenyewe. Na mimi akaenda pamoja frogman kwa sababu fulani. Na kisha mimi started-- mimi alitumia mengi muda kubonyeza kwa njia ya viungo hizi asubuhi hii. Na hii ilikuwa yangu kuhusu ukurasa, ambayo sasa inaonekana aina ya adorable. Lakini pia alionyesha tu jinsi mbali teknolojia imekuja. I mean, nyuma katika siku, 486 na kitu. Siku hizi, ni super, super, super polepole na vizuri chini kuliko unaweza kuwa katika yako mifuko mwenyewe siku hizi. Kuna zaidi juu ya pale kwamba Ilikuwa hata zaidi ya aibu. Hivyo mimi itabidi kuondoka ni saa hiyo. Lakini hiyo ilikuwa yangu ya kwanza kuliingia katika web-- loo, hakuna. Hiyo haikuwa hivyo. Yangu ya kwanza ya kuliingia halisi katika programu ya mtandao Ilikuwa tovuti hii, ambayo mimi tu alisahau. Katika hatua nyingine, Mimi kujifunza jinsi ya kufanya repetitive picha background. Na hivyo nimeona tiling hii ufanisi, kama Hockey mchezaji, mpira wa miguu, na gofu mpira, au chochote kile kwa ajili ya tovuti Frosh IMS. Na hii ilikuwa kweli, dhati kwanza ya mradi wa mtandao msingi Mimi alichukua on-- Nadhani labda sophomore mwaka, junior year-- baada ya kuchukua CS50 na CS51, moja ya kawaida madarasa kufuatilia juu ya. Niliona katika kuangalia kupitia nyaraka kuwa moja ya warithi wangu na marafiki, Lee, aina ya kubadilishwa hati miliki mwenyewe. Lakini hii ilikuwa kweli kitu ambacho Mimi lazima kumiliki aibu kwa. Lakini wakati huo, hii Ilikuwa tovuti kwanza, kama nilivyosema wiki chache zilizopita, ambayo inaweza Freshman kujiandikisha kwa ajili ya michezo intramural hapa. Na hivyo ni zamu nje kwamba picha background kama kwamba si kama wazo nzuri. Lakini mtandao ilikuwa mpya, na sisi wote walikuwa majaribio. Na hii ni nini mimi inaonekana alifanya wakati huo. Sawa. Hivyo bila wasiwasi zaidi, sisi kubadili gia leo kukupa, kwa kweli, kipande ya mwisho kwamba unaweza kupata muhimu hasa kwa ajili ya miradi ya mwisho lakini pia kwamba kuanza kufanya dunia nzima kote mtandao kujisikia kidogo kueleweka zaidi. Hakika, tunakwenda kuanzisha moja zaidi lugha ya programu aitwaye JavaScript hiyo ni sawa na tofauti kwa njia tofauti kutoka lugha tumekuwa inaonekana katika hivi sasa. Hivyo C, kukumbuka, ni lugha hii ulioandaliwa. Nimepata kukimbia kwa njia compiler. Kupata chanzo kanuni ya kupinga kanuni, au zeroes na wale. Na wale ni zeroes na wale ambao CPU yako, Central Processing Unit, kweli kuelewa. PHP, kwa kulinganisha, ni si ulioandaliwa lugha. Ni nini? Ni lugha kufasiriwa. Hivyo kuna mpango baadhi aitwaye mkalimani kwamba ina kusoma juu it-- kwa chini, kushoto na right-- na kufikiri nini yote ya syntax yako haina maana na, kama ni kitanzi au hali au idadi yoyote ya programu anajenga. Hivyo hiyo ni lugha kufasiriwa. Kisha sisi ilianzisha HTML. Na HTML si hata lugha ya programu. Tunatarajia simu yake nini? Lugha ghafi, ambayo ni tu aina ya dhana njia ya kusema hayo hana programu constructs kama tuliona hata nyuma katika siku za Scratch. Hakuna mizunguko. Hakuna masharti. Ni kweli ni lugha kuhusu kuashiria up data zako na formatting au jinsia yake kwa namna fulani. CSS, wakati huo huo, vile vile si lugha ya programu. Ni hata zaidi aesthetically oriented. Na utapata aina ya faini-tune mambo kama ukubwa wa herufi na rangi na upangaji na yote hayo. Kisha tulikuwa na SQL. Hivyo SQL ni kweli kompyuta lugha katika baadhi ya hisia, angalau kulengwa hasa kwa database. Lakini, hata kama sisi tu kuanzisha wewe kuchagua na kuingiza na kufuta na kurekebisha na michache ya watu wengine, zamu nje unaweza kweli kuandika kazi au taratibu, kama wao ni kuitwa, katika SQL ili kuangalia na kutenda kabisa kama PHP na C kazi. Basi jua ya kwamba wale kuwepo. Lakini hatuna hata bother pamoja nao kama sisi tu scratch ya uso hapa. Na kisha JavaScript, mwisho wa Lugha yetu ilianzisha rasmi. Hivyo JavaScript, pia, ni kufasiriwa lugha. Na wale jamaa, kufanya unataka kuitofautisha pamoja na baadhi ya tabia kutoka kwa C na PHP? Nini hufanya hivyo tofauti? Watazamaji: Ni si ulioandaliwa. DAVID Malan: Sema tena? Watazamaji: Ni si ulioandaliwa. DAVID Malan: Ni si ulioandaliwa. Hivyo, pia, ni kufasiriwa. Hivyo si ulioandaliwa. Lakini kwamba inafanya kidogo kama PHP. Lakini bado ni tofauti na PHP katika baadhi ya njia fora, angalau kwa njia tutaweza kuitumia. Yeah? Watazamaji: Ni anaendesha mteja upande. DAVID Malan: Ni anaendesha mteja upande, kwa kawaida. Hiyo ni kweli pekee tabia kwa ajili yetu hivi sasa. C alikuwa server-upande kwa maana ya kwamba sisi alifanya kila kitu katika CS50 IDE. PHP hivi sasa imekuwa server-upande kadiri kama hayo, pia, anapata interpreted-- si ulioandaliwa, lakini interpreted-- ndani ya CS50 IDE, ambayo bila shaka ni tu server au watumishi katika wingu. Lakini JavaScript, hata ingawa wewe utaenda kuanza kuandika ni kwa, kusema, pset nane na labda mwisho projects-- uko kwenda kwa haki ni katika CS50 IDE na ila ni katika mafaili ndani ya CS50 IDE, CS50 IDE na, kwa upande wake, watumishi wingu ambayo ni mwenyeji, si kwenda kutafsiri au kutekeleza kanuni yako. Badala yake, ni kwenda kutumwa katika aina unaltered chini ya browser. Na ni kisha kwenda kuwa IE au Chrome au Firefox au Safari au chochote kwamba kweli kutafsiri hivyo, juu hadi chini, kushoto na kulia. Hivyo pekee muhimu tabia kwa ajili ya leo ni kwamba JavaScript ni mteja upande na PHP, kwa mfano, imekuwa server-upande. Sasa, hii ina maana ya kuvutia kwa, kama, haki miliki na ambao wanaweza kweli kuona kanuni yako. Na hakika, unaweza kwenda kwenye mtandao na kuona zaidi kanuni yoyote kwamba mtu ana Imeandikwa katika JavaScript. Wakati mwingine ni someka, wakati mwingine ni obfuscated. Lakini zaidi juu ya kwamba katika wakati wake. Hivyo JavaScript, nicely kutosha, ni super sawa, syntactically, kwa C. Na kiasi kama PHP, hakuna kazi kuu. Kama unataka kuanza kuandika JavaScript kificho, kama utaona leo, wewe tu kuanza kuandika hayo. Lakini ni, utaona, hasa muhimu katika mazingira ya browsers mtandao. Hata hivyo, mdogo wangu disclaimer-- kawaida earlier-- ilikuwa ni kusema kuwa unaweza inazidi leo matumizi JavaScript server-upande kutumia mfumo dhana inayoitwa Node.js kwamba baadhi ya maombi CS50 ya mwenyewe yameandikwa katika. Angalia 50 kweli anatumia Node.js. Lakini sisi ni kwenda kuzingatia JavaScript mteja upande hapa juu ya nje. Hivyo hapa ni seti ya hali katika PHP. Samahani, in-- kweli, kwamba Taarifa hiyo, pia ni sahihi. Hapa pia ni seti ya hali katika JavaScript. Syntactically, ni kufanana na C na kwa PHP. Maneno Bw Boole ya watu, vile vile, syntactically kufanana na wote C na PHP. Sisi pia kuwa swichi katika JavaScript ili kuangalia kufanana. Tuna kwa mizunguko kwamba ni muundo identically, wakati tanzi, kufanya wakati matanzi. Hii moja kidogo tofauti. PHP alikuwa kwa kila kujenga kwamba unaweza kuwa kwa kutumia au watatumia katika pset saba, labda. JavaScript ina toleo hili maalum ya kwa ambapo literally kusema kitu kama kwa kutofautiana muhimu katika kitu, ambayo Ni njia succinct sana ya kusema, kama mimi nimepata object-- na tutaweza majadiliano juu ya haya tena katika moment-- na mimi nataka iterate juu ya yote ya thamani jozi ufunguo ndani, Sina kufikiri jinsi ya numerically ripoti yao kwa sifuri, moja, mbili, tatu. Siwezi kusema literally hii. Na juu ya kila iteration, JavaScript kwa ajili yangu itakuwa update muhimu kutofautiana kuwa muhimu kwanza, kisha ufunguo ijayo, kisha ufunguo ijayo, kisha ufunguo ijayo, na kadhalika. Na siwezi kupata katika thamani yake na kutibu kitu katika JavaScript, kama tutaweza kuona, kana kwamba ni safu associative katika PHP. Hakika, kama wewe hatimaye amefungwa yako akili kuzunguka kile safu associative ni katika PHP, unaweza kufikiria ni kwa sasa kama kufanana na kitu katika JavaScript. Lakini hiyo ni kidogo ya kurahisisha. Arrays kuangalia, nicely kutosha, kufanana kwa PHP isipokuwa kwa tabia moja. Kuna jambo moja kukosa hapa kwamba tulifanya ona wiki iliyopita na PHP. Nini liliondolewa? Yeah? Hakuna ishara ya dola. Hivyo sisi ni nyuma ya kawaida zaidi duniani ambapo vigezo hawana dola ishara. Lakini wewe kufanya kiambishi yao na var, kawaida. Na var ina maana kutofautiana. Na kiasi kama PHP ni loosely typed-- ambapo kuna aina, kuna idadi na masharti na ikifungwa na hivyo sana aliye mzaa JavaScript vile vile ina aina. Lakini ni loosely typed katika kuwa sisi programmers hawana kutaja yao. Sisi tu kuwa na ufahamu kwamba aina mbalimbali zipo. Vigezo, meanwhile-- hapa ni jinsi gani tupate kutangaza "hello, ulimwengu" kama kamba. Taarifa ni sawa na PHP lakini hakuna ishara ya dola. Na hii ni kitu tutaweza kuanza kuona zaidi leo, ambapo una kitu na funguo na maadili. Na kama unataka kujaribu na kudai kutoka mwisho week-- syntax ni tofauti kidogo. Lakini akili timamu kidogo check-- wangapi funguo haina kitu hicho wanaonekana kuwa na? Hivyo naona nne. Mimi naona mbili. Hivyo ni kweli mbili. Hivyo hii ni mkusanyiko ya mbili jozi ufunguo thamani. Ufunguo ni ishara ambao thamani ni FB. Muhimu ni bei ambao thamani ni 101.53. Basi hizo mbili jozi ufunguo thamani. Na kumbuka, PHP-- na hii ni mara ya pili tu aina ya tofauti kisintaksia. Siyo kila kitu kielimu ya kuvutia. PHP inaweza wameandika hiyo Jambo kama follows-- kunukuu, sawa. Na mimi mabadiliko hayo kwa mabano mraba. Na kisha mimi kubadili hali hii kwa alinukuliwa neno, "bei." Na kisha mimi si kutumia matumbo. Je, mimi kutumia wiki iliyopita? Yeah, ishara sawa mshale nukuu funky. Na kisha mimi alifanya kitu kimoja hapa. Same kitu hapa. Na kwamba wote. Hivyo ni nzuri kama hii ina si kweli imezama katika kumbukumbu tu lakini kwa vile ni kweli kielimu uninteresting. Ni tofauti tu kisintaksia. Lakini mawazo ni sawa. Ndani ya kutofautiana hii kunukuu katika JavaScript ni mkusanyiko wa muhimu-thamani jozi, mojawapo ikiwa ni ishara, moja ambayo ni bei. Na siwezi kupata katika maadili hayo na syntax zifuatazo. Kama ilivyo katika PHP, mimi naweza kufanya kitu kama basi mimi kufanya sanduku huu kidogo kubwa. Kama ilivyo katika PHP, mimi naweza kufanya Haya loo, Dammit. Kuja juu. Kama ilivyo katika PHP-- sawa, tutaweza tu kutumia maelezo mtangazaji. Kama ilivyo katika PHP, siwezi kufanya $ kunukuu $ kunukuu ["ishara"], na hii itakuwa kupata yangu thamani ya "ishara." Katika JavaScript, ni kwenda kuwa kufanana, ambapo naweza tu kufanya hivyo. Kitu tu kwamba ni kukosa ni ishara ya dola. Hivyo nicely kutosha, basi, kuna si wote kwamba mengi mapya syntax. Kwa hiyo kile leo sisi kuzingatia, kwa kweli, ni baadhi ya mawazo na maombi. Na kwanza vile maombi kwamba waweza tumeona kama wewe dived katika pset saba tayari ni syntax hii. Hivyo katika pset saba, kama wameweza kuonekana au si kuonekana ni bado, kujua kwamba kuna faili kwamba sisi kutoa wewe kuitwa config.json-- JavaScript Kitu nukuu. Kwa nini? Tulitaka kuwa na uwezo wa kutoa kwa template na baadhi jozi ufunguo thamani. Tulitaka kuwa na uwezo wa kukupa orodha wa jeshi, jina la seva. Tulitaka kukupa placeholder kwa jina lako na placeholder kwa password yako. Kama siyo kuona huu bado, wasiwe na wasiwasi. Zaidi juu ya hili katika pset saba [? spec. ?] Na kisha, ni wazi, tunataka kujaza kwa-dos kwa sababu wakati wewe kuingia katika CS50 IDE, kila mmoja wenu na jina lako mwenyewe na neno la siri. Hivyo tunaweza umetumia nusu kadhaa au zaidi tofauti muundo faili. Tunaweza wametumia faili txt. Tuliweza kutumika jalada la CSV. Tunaweza umetumia INI file, XML file, Vifupisho rundo zima zaidi kwamba unaweza kuwa na milele habari. Ni aina ya holela mwisho wa siku. Lakini super maarufu siku hizi ni maandishi muundo inayoitwa JSON-- JavaScript Object Notation-- kwamba inaonekana kama hii. Ni kidogo cryptic, lakini taarifa mwelekeo. Unaweza kuanza kwa curly wazi Brace, na wewe kuishia na moja. Ndani ya kwamba ni kitu. Ni jozi ufunguo thamani. Hivyo hii ni kitu kwamba mimi nina kuangalia juu ya screen hapa ambayo ina muhimu moja, ambayo ina thamani moja. Na tu inferring kulingana na mfano uliopita, nini ufunguo hapa? Mbegu, jambo kwa upande wa kushoto wa koloni. Sasa, thamani hufanyika kuwa mistari mingi wakati huu. Lakini thamani huanza na curly wanakabiliwa na kuishia na brace curly. Hivyo gani wewe kupendekeza ni aina ya thamani ya database? Kamusi au, kama zaidi ufupi, kitu. Sawa? Hii ni aina ya muundo data kwamba Unaweza kutumia miundo mingine ndani ya yenyewe. Hivyo kama jambo hili zima tuko wito object-- na kitu ni tu rundo la muhimu-thamani wanyama: thamani ya Mbegu yenyewe ni kitu. Thamani ya database ina rundo zima ya thamani jozi ufunguo, ya kwanza ambayo ni jeshi, basi jina, kisha jina la mtumiaji, basi neno la siri, kila mmoja ambaye maadili, wakati huo huo, ni kamba tu boring katika quotes mbili. Hivyo hata kama si kwamba super wazi bado tu, kujua kwamba hii ni kiwango cha, njia ya haki boring ya kuhifadhi data katika muundo standard. Lakini makosa ya kawaida wewe inaweza kufanya, hata katika pset saba, ni mambo kidogo kijinga, kama kama wewe ajali saza comma huko. Hiyo inaenda kusababisha faili si lazima kuwa someka. Kama ajali saza mambo kama quotes, siyo kwenda kuwa someka. Hivyo ni pretty nitpicky faili, lakini ni moja kwamba ni super kawaida. Na sisi kutokea kwa matumizi yake, hata kama huna matumizi yoyote JavaScript vinginevyo, katika pset saba. Sawa. Basi kumbuka picha hii. Kuongelea, katika HTML, kwamba kificho ili kuangalia kama hii. Hii ni HyperText ghafi lugha [Inaudible] kwa ajili tu "hello, ulimwengu." Lakini basi sisi mapendekezo wakati nyuma kwamba kama inasaidia, unaweza kutaka kuanza kufikiri kuhusu hili tayari kama mti. Kwa kweli, anatengeneza kwamba sisi kutumia tu kwa ajili ya readability au kwa ajili style ya juu kushoto Unaweza aina ya kutafsiriwa katika mti huu, ambapo kuwa na baadhi ya nodi mizizi maalum ambayo tutaweza yaliyotokea aitwaye hati, chini ambayo ni mzizi HTML kipengele au tag, HTML, ambayo kisha ina mbili watoto, kichwa na mwili. Na kisha kwa upande wake, mkuu ana cheo. Na kichwa ina thamani maandishi. Na mwili vile vile ina thamani maandishi. Hivyo kama wewe ni starehe msemo kwamba ndiyo, unaweza kuchukua HTML huu na kuchora picha kama hivyo, upande wa kulia ni nzuri mfano wa akili kwa sababu sasa kwamba tuna JavaScript, Programu lugha ambayo browsers Unaweza kutekeleza na kutafsiri kwa wewe, zinageuka kuwa kile sisi ni juu ya kufanya katika kanuni ni kuanza kuendesha hii muundo wa mti katika kumbukumbu. Hatuna kujenga mti katika kumbukumbu. Hatuna cha kufanya aina ya data ya muundo pset na tano-style utata. Browser, vizuri kutosha, juu ya kutafsiri HTML juu hadi chini, kushoto au kulia, ni halisi kwenda mkono sisi sawa na pointer kwa kuwa mti mzima kwa ajili ya bure. Ni anafanya yote ya kazi ngumu. Hiyo ni nini Mozilla na Apple na wengine wamefanya kwa ajili yetu. Na na JavaScript ni sisi kwenda na uwezo wa kudhibiti na mabadiliko na kufanya mambo ya kuvutia kwa kwamba mti, vinginevyo inayojulikana kama DOM au Document Object Model. Ni aina gani ya mambo? Naam, ni zamu nje kwamba katika JavaScript, kuna orodha hii kufulia ya matukio ambayo unaweza kuchukua nafasi. Na sisi si kweli kutumika kwamba neno tangu wiki sifuri na pset sifuri wakati sisi aliyesema kuhusu Scratch. Wengi wenu pengine hakutumia tukio katika Scratch mradi wako. Lakini unaweza kukumbuka rahisi Marco Polo mfano, ambapo tulikuwa na mbili sprites, mmoja wao alisema, Marco. Wengine ambao wakati huo, juu ya kusikiliza na kusikia tukio hilo, alisema, Polo. Kama siyo, kujisikia huru na kuangalia nyuma kwamba mbali nyuma. Lakini hii ni kwa kusema, na unaweza aina ya infer kutoka majina ya hivi mambo, JavaScript, ni zamu nje, ni kwenda kutupa njia ya kusikiliza kwa panya kwenda chini au panya kwenda au ufunguo kwenda chini au ufunguo kwenda juu au onsubmit onselect au onresizing kitu. Kwa maneno mengine, hatua yoyote ya kimwili kwamba binadamu wanaweza kuchukua na browser kwamba kufanya kila siku, unaweza kuandika kificho kwa kuwa anasikiliza kwa matukio hayo na kisha haina kitu sahihi. Kwa mfano, kama wewe kutumia Google Maps, kile kinachotokea kama wewe click na hoja panya, kawaida? Kama click na Drag? Yeah? Hasa. Ramani kuanza kwa hoja. Hivyo unaweza aina ya kuona nini zaidi ya hapa, nini zaidi ya hapo. Na jinsi gani Google kutekeleza hayo? Naam, labda, wao uko kutumia michache ya tukio hizi wasikilizaji, moja ambayo anasema, kusikiliza kwa juu ya panya down-- hivyo wakati mtumiaji kimwili inasukuma trackpad yake au au wake panya yake chini. Na kisha sisi ni kuangalia kwa kitu kama harakati au baadhi ya tukio nyingine ambazo inaruhusu sisi kukamata Drag. Na kwa kweli, Drag ni vile vile katika hii dot dot dot orodha ya chaguzi iwezekanavyo. Hivyo hii ni kwenda kuwa na nguvu njia ya kuanza kukabiliana na mtumiaji hata kabla ya yeye au yeye kweli Clicks kitu wazi kama kuwasilisha. Lakini tunakwenda kuanzisha mada wanandoa ya kufika huko. Lakini kwanza, hebu mpito kwa baadhi ya kanuni halisi. Hivyo mimi nina kwenda mbele na kufungua dom-0, ambayo ni mfano rahisi sana hapa kwamba kama mimi kuvuta tu ina mchango huu hapa kwa ajili yangu. Na mimi nina kwenda mbele na aina katika "David" kwa jina langu na bonyeza Kuwasilisha. Na kisha, angalau aina ya bei nafuu, mimi na hii haraka kwamba pops up kwamba anasema, "hello, Daudi!" Hivyo hii ni aina ya kama yetu "hello, ulimwengu" kwamba tulifanya muda nyuma katika C na hata katika PHP kwa sababu nimekuwa dynamically outputted jina langu. Siwezi kufanya jina ya mtu mwingine hapa. Mimi naweza kubadili tu huu kwa, kama, Hana, bonyeza Kuwasilisha. Na hakika, kidogo pop-up mabadiliko. Sasa, viibukizi ni moja ya Makala zaidi vibaya wa mtandao. Na kwa kweli, nyuma katika siku pop-up blockers alikuja Vogue kwa sababu wewe aliamua kwenda kwa baadhi website-- labda place-- kuhojiwa kwamba ingekuwa kisha ghafla kuanza peppering screen yako na rundo zima la ibukizi. Na hivyo uwezo huu kwa pop up madirisha mbele ya mtumiaji haijawahi hasa vizuri kupokea na ubinadamu. Hivyo ndiyo sababu unaweza kuona hii kuzuia jambo, ambayo tu hufanya jambo hili zima mbaya. Hivyo sisi ni kwenda haja njia bora ya kuchochea mtumiaji. Lakini kwa sasa, kwamba inaonekana kazi. Hivyo tu intuitively, nini inaonekana kuwa kinachotokea hapa? Mimi kwenda mbele na bonyeza Kuwasilisha, na basi kitu kinatokea, ni wazi kuwa. Lakini nini siyo kinachotokea kwamba hakuwa na kutokea wiki iliyopita wakati wowote mimi clicked Kuwasilisha? Nini hakuwa na kutokea kwenye screen? Pole? Reload. URL hakuna mabadiliko wakati wote. Nilisema hii ilikuwa dom-0, na mimi bado nina katika dom-0. Kwa kawaida, tunatarajia kupata iliyopita kwa baadhi ya wengine URL, kama register.php au kama. Lakini hata wakati mimi kumfukuza jambo hili kwa kubonyeza OK, taarifa kwamba URL anakaa kabisa kuweka. Na, kwa kweli, kama mimi nina kidogo wasiwasi, napenda kufungua Chrome. Hebu kufungua tabo Network. Na taarifa ni tupu kwa sasa. Hebu kwenda mbele na resubmit Maria. Hakuna trafiki mtandao wowote. Hivyo hakuna HTTP. Hivyo kweli, kama mimi kuangalia chanzo kanuni Haya kwa napenda karibu ya dirisha hii na kwenda View Chanzo. Kuvutia. Inaonekana kama kuna baadhi ya vitambulisho mpya, kati yao script. Hivyo hebu tuangalie ndani ya CS50 IDE nini hasa mimi alimtuma kwa mtumiaji. Hivyo hapa is-- hebu kuzingatia HTML tu. Hapa ni nusu ya chini ya dom-0.html. Na taarifa kwamba ni got cheo, tag kichwa, tag mwili, tag fomu. Lakini anaruka nini nje na wewe kama mbalimbali, hasa kama wewe sijawahi Imeandikwa yoyote JavaScript mwenyewe. Hebu kitabu kidogo na haki hapa. Mimi nimepata pembejeo, pembejeo nyingine kwa kuwasilisha. Mimi nimepata kitambulisho, ambayo ni aina ya mpya. Lakini hatukuwa kuona hii na CSS. Kile kingine ni dhahiri mpya? Yeah? Nzuri. Sawa. Hivyo ambapo anasema onsubmit, taarifa ya nini inaonekana kufuata. Hii ni sifa katika HTML utaratibu wa majina. Thamani yake ni hii kamba alinukuliwa hapa. Na hii inaonekana kidogo weird katika mtazamo wa kwanza. Siyo HTML. Siyo CSS. Hii ni, kama unaweza nadhani, JavaScript. Hivyo inaonekana kwamba kujengwa katika hii mtandao ukurasa ni kazi kuitwa kusalimiana. Na mimi nina inferring kwamba tu kwa sababu ni neno, kusalimiana. Ni got Paren wazi, Paren karibu, semicolon. Inaonekana kama C kazi, Inaonekana kama PHP kazi. Na hakika, ni kwenda kuwa kazi JavaScript. Basi mimi nina kurudi uongo. Tutaweza kurudi kwa kwamba katika muda tu. Lakini pale ambapo ni kazi hii inaelezwa? Vizuri basi mimi kitabu juu juu ya faili. Na hata kama ni foleni ndefu, ni kiasi moja kwa moja. Hebu zoom nje hapa na kuzingatia mistari haya manne. Hivyo katika JavaScript, tu kama PHP, wewe tu kusema, literally, neno "kazi," jina la kazi, na kisha mabano na yoyote arguments-- hakuna hoja katika kesi hii. Na hakuna aina ya kurudi katika JavaScript, tu kama PHP. Hivyo ni kidogo looser kuliko C. Wazi curly brace, karibu curly brace. Kujengwa katika JavaScript ni function-- si function-- ilipendekeza lakini kazi kuitwa tahadhari ambao lengo pekee katika maisha ni kuvuta up kwamba pretty mbaya kuchochea kuwa tuliona wakati iliyopita. Sasa hii ni aina ya Mouthful. Nini kinaendelea hapa? Basi hebu kuanza kwa kuonyesha kila kitu hapa. Hiyo ni hoja hiyo kwa macho. Na nini kinaendelea? Hii tu inaonekana kama kamba. Na zinageuka, tofauti na PHP na tofauti C, haijalishi katika JavaScript kama wewe moja quotes au quotes mbili. Wao utakuwa sawa. Na kusema ukweli, ni tu maarufu siku hizi kwa JavaScript programmers daima kutumia quotes moja kwa sababu fulani. Ni tu kitu cha kufanya. Lakini tunaweza kutumia quotes mbili, pia. Hivyo pamoja na ni tabia mpya. Lakini wale ambao wameweza done hii kabla, je, pamoja na maana gani? Naam. Concatenate. Hivyo tuliona hii katika PHP. Kuna tu nukta operator katika PHP kwamba Itakuwa concatenate masharti mawili kwa pamoja. C mara maumivu ya shingo ya kufanya hivyo. Kumbuka kutoka pset sita, ambayo ilikuwa maumivu especial katika shingo, ingekuwa kutumia kitu kama strcat baada ya kugawa kumbukumbu juu ya stack au lundo. Alikuwa na kuruka kupitia hoops tu kwa concatenate masharti mawili. Katika JavaScript, ni super rahisi. Tu kutumia pamoja operator kati yao. Hivyo tata-kuangalia Jambo inaonekana kuwa hii kwa sababu mwishoni mwa kamba hii nzima, mimi tu concatenate juu ya mshangao uhakika. Hivyo kama kilichokuwa yanajitokeza ilikuwa "hello, Daudi," "hello, Hana," "hello, Maria," na kadhalika, ni wazi kuwa kwamba jambo katikati katika kati ya mbili pluses Lazima unipe upatikanaji wa nini? Nini huko kwa uhakika? Naam. Hivyo mimi itabidi kujifanya hapa kujibu majina yao, sawa? Hivyo majina yao popped up katika fainali Matokeo yake. Hivyo hii ina maana gani? Naam, mimi mapendekezo ya awali kwa kuwa picha kwamba kinachojulikana DOM ina kipengele hiki maalum mzizi njia ya juu juu aitwaye hati. Na sasa, ni zamu nje, kwamba itakuja kuwa maalum variable kimataifa katika JavaScript, kujengwa katika ambayo ni rundo zima la utendaji muhimu. Miongoni mwa utendaji muhimu ni uwezo wa kupata wakati wowote nodi kuwa mtoto. Wale viwanja au mistatili au ellipses ni nodes tu katika mti, hivyo kusema. Hivyo zinageuka kuwa kujengwa katika JavaScript ya hati kitu ni kazi, inayojulikana kama mbinu, kwamba wito getElementById. Syntax kwa ajili ya wito kazi katika JavaScript kuwa ni ndani ya kitu au a kutofautiana ni tu kwa nukta nukuu. Na tuliona hii katika C nini struct syntax. Unaweza kuona hii katika pset saba, aina ya, aina ya, wakati unaweza kuona CS50 :: swala. Matumbo ya matumbo katika PHP ni mwingine njia ya wito kazi hiyo ni ndani ya baadhi kitu. Lakini kwa sasa katika JavaScript, ni tu nukta. Na hivyo kazi hii, vizuri kutosha, aina ya anasema nini does-- kupata kipengele na ID. Kipengele ni jina la mtu mwingine kwa tag au nodi katika DOM. Na hivyo kupata kipengele na ID "jina" ina maana Haya hapa ni HTML yangu. Na kulingana na HTML huu, ni nini node au nini HTML tag mimi nipo kwenda programmatically kuwa mitupu kwa kupiga document.getElementByID? Yeah, kwa uhakika. Mimi nina kwenda kupata pembejeo kipengele huko ambao ID ni "jina." Hivyo hasa, unaweza kufikiria kazi hii, getElementById, kama njia ya kutoa kuunga pointer nodi kwamba maalum katika mti. Sisi si inayotolewa huu mti, lakini ni njia ya kuweza kupata kwamba Mstatili au kwamba Mstatili na ya kipekee kutambua hilo kupitia ID wake. Sasa, kwa nini hii ni muhimu? Naam, ni zamu nje kwamba mara moja umefanya wamezipata kwamba nodi, kwamba mstatili kutoka picha, kwamba nodi ndani yake, kwa upande wake, ina rundo zima la properties-- muhimu-thamani jozi au data, mmoja wa iitwayo thamani. Hivyo literally, ni aina ya Mouthful kueleza jambo zima. Lakini mwisho wa siku, zote hii haina ni kukupa kamba kwamba mtumiaji typed katika kwa mtindo huu tabaka za madaraka. Lakini mimi si kama michache ya mambo haya. Au tuseme, kuna baadhi ya udadisi bado. Yote hayo walionekana kazi. Kwa nini unafikiri mimi kurudi uongo baada ya kupiga kusalimiana? Hii inaonekana kidogo mbaya, kwamba Nina kauli mbili huko kutengwa kwa semicolons. Kuchukua nadhani. Kama mimi kuondolewa kurudi uongo, nini kinaweza kutokea, tu instinctively? Samahani, kusema tena? Kufungua kundi la Windows. Hivyo uwezekano labda kitu kama kwamba lingetokea. Nini kingine? Huenda kuwasilisha ombi wapi? Kwa ukurasa mmoja. Kwa hiyo, kwa kweli, hiyo ni kwamba karibu kujibu hapa, ingawa, tofauti na katika siku za nyuma, nimekuwa si maalum hatua sifa, ambayo kwa kawaida sisi kufanya. Zinageuka kuna chaguo-msingi. Kama huna bayana hatua, ni kama kusema quote, unquote au jina la faili yenyewe, ambayo katika kesi hii ingekuwa kuwa kama dom-0.html. Ni aina tu ya inferred, au tuseme an. Na hivyo kama mimi si kufanya hivyo, hebu taarifa. Napenda kuokoa hii. Na nimekuwa kuondolewa kurudi uongo. Hebu kwenda nyuma hii mfano na nguvu upya yake. Na unaweza kuwa na kuonekana kwangu kupendekeza huu juu ya CS50 Jadili rundo la nyakati. Kama kitu amewahi kaimu funky na kisakuzi si tabia kama wewe kutarajia, mara nyingi utasikia wanataka kushikilia Kuhama na kisha bonyeza Reload. Hiyo itakuwa nguvu kila faili na upya na si kutumia browser yako cache za mitaa au nakala ili sasa, basi mimi kwenda mbele na kufungua Mkaguzi yangu, tab Network. Mimi nina kwenda bonyeza Kuhifadhi Fungua kwa sababu mimi hawataki kufuta safu mara moja mimi kupata whisked mbali mahali pengine. Hebu kwenda mbele hapa na Aina katika Andi, bonyeza Kuwasilisha. Sawa. Hiyo inaonekana kama ilivyotarajiwa. Inasema "hello, Andi." Napenda bonyeza OK. Kuvutia. Taarifa kwamba ukurasa iliyopita, japo kwa asili ukurasa. Taarifa URL aina ya iliyopita. Iliongeza alama swali, ambayo ni kawaida kiashiria kwamba sisi alijaribu kuwasilisha kitu. Na kisha chini, hata zaidi waziwazi, hapa ni halisi ombi HTTP, ambayo got majibu ya 200 kwamba akanileta tena hapa. Hivyo hii ni nini tunataka kufanya, sawa? Kwa sababu mimi sitaki upya ukurasa mzima. Mimi badala alitaka kurudi uongo ili mzunguko mfupi tabia default browser, ambayo ilikuwa, bila shaka, kuwasilisha ukurasa. Basi hebu tuangalie kidogo bora mfano. Hii ni dom toleo moja. Na taarifa ifuatayo. Ni sawa kama huna grok zote ya mstari wa kanuni. Lakini nini ni tofauti kimsingi kuhusu utekelezaji hili? Mimi itabidi inasema ina tabia huo huo, haina kitu kimoja. Nini mimi ni wazi kufanyika tofauti? Yeah? Watazamaji: [inaudible]. DAVID Malan: Yeah. Hivyo kazi inaelezwa differently-- kwa maneno mengine, kukaa mbali na fomu, hadi pale kwenye mstari 7-- au badala yake, mstari 8-- tena kufanya nina sifa onsubmit. Katika mfano uliopita, nilikuwa na hii. Na kisha mimi literally aliandika kificho wangu hapa. Na ndipo nikasema kurudi uongo. Na kama hakuwa na kusugua wewe njia sahihi bado, ni lazima kuanza kwa kadiri kama, kama vile katika HTML, wakati sisi ilianza kwa ushirikiano kuchanganyika ni na CSS katika sifa style, ni tu kuanza kupata kidogo messy au kuhisi vibaya kidogo. Vile vile hapa, kama kuanza kuchukua HTML, na kisha moja kwa moja plop baadhi JavaScript kificho katikati ya kamba alinukuliwa, ni si kwenda kuwa maintainable sana. Sawa? Siyo hata dhahiri kwa mara ya kwanza mahali ambapo JavaScript kificho ni. Hivyo itakuwa kwa kweli ni nzuri kama kanuni ya kubuni bora, hebu kuweka HTML yetu kabisa tofauti na yetu JavaScript. Hivyo kufanya hivyo, nini tumekuwa kufanyika hapa ni following-- sisi tu kutumia HTML kwa ghafi tu. Na hivyo katika toleo moja ya hii, kila Nina ni fomu kwa ID kipekee. Na kisha chini hapa, mimi nina kuchukua faida ya kipengele maalum ya JavaScript ambapo naweza kuwa nini aitwaye kazi bila majina. Hivyo ni zinageuka kuwa kama mimi wito document.getElementByID ya 'demo' hiyo ni kama kunipa pointer nodi hii katika mti wangu, aina kipengele, hivyo kusema. Sasa, mimi tu kujua kutoka kujua kidogo ya HTML sasa tuko baada ya kusoma baadhi online kumbukumbu, kwamba fomu kipengele inasaidia rundo zima la tukio listeners-- katika Kwa maneno mengine, kufulia orodha ya tukio wasikilizaji kuwa tuliona wakati iliyopita. Najua kutokana na kusoma nyaraka kwamba onsubmit ni tukio halali Msikilizaji kwa namna kipengele. Hivyo mara Najua kwamba, ni salama kwa mimi kufanya following-- kupata kwamba nodi kutoka mti, aina kipengele, na upatikanaji wake kinachojulikana onsubmit mali. Hivyo nukta tu ina maana hii ni mali, kama thamani maalum ndani yake. Na nini data aina mimi nipo kumshirikisha, inaonekana, kwa onsubmit, ambayo ni ufanisi kutofautiana ndani ya ya kwamba nodi katika mti? Ni uwanja ndani ya kwamba struct. Nini aina data? Kazi, yeah. Hivyo zinageuka kuwa PHP ina hii. Na hata kama sisi Sikuwaambieni kuhusu hilo, C pia ina kazi kuyatumia, uwezo wa kupitisha na kuwapa majukumu kama vigezo 'maadili wenyewe. Na sisi siyo kwenda regress nyuma C. Lakini kwa sasa, ni zamu nje kwamba juu ya upande wa kulia hapa, hata kama inaonekana kidogo funky, njia hii, hey browser, nipe kazi. Sitakuja kwa hata bother kutoa ni jina kwa sababu mimi nina literally kwenda kuwapa hebu simu yake pepe ya kazi hii mara moja kwa onsubmit. Kwa maneno mengine, browser, huna haja kujua nini kazi hii kuitwa. Wewe tu haja ya kujua ambapo ni katika kumbukumbu. Na hivyo yatosha tu kuwa ishara sawa kuna na si kwa kujisumbua kumtaja hii, kama foo au kusalimiana au neno mwingine yeyote. Na sasa hii ni kitu Stylistic. Mimi nilikuwa hoja brace curly hii kwenye the-- sorry-- mstari unaofuata kama sisi kwa kawaida kufanya CS50. Lakini katika JavaScript, ni kweli stylistically kawaida kuweka tu brace curly, moja ya kwanza, juu ya kwamba mstari wa kwanza. Lakini baadaye, kuna kitu kuvutia. Hiyo wazi curly brace tu demarcates mwanzo wa kazi yangu. Kazi ni sasa kufanana, isipokuwa nimekuwa pamoja kurudi uongo ndani ya kazi hii. Kwa sababu ni zamu nje na wewe ungekuwa tu najua hili kutokana na kusoma documentation-- kwamba kama kazi ambayo wewe kuwapa kwa handler onsubmit anarudi uongo, kisakuzi tu anajua na anakubaliana si kuwasilisha fomu kwa kompyuta. Kama kuirudisha kweli, itakuwa kuwasilisha kwa server kwa sababu tutaona ni muhimu katika muda tu. Na kisha semicolon baada ya brace curly kuna tu ina maana mimi nina kosa kufafanua kazi. Unajua nini kuwaita haraka kama wewe kusikia kuwasilisha. Sawa. Hii ni bado arguably aina ya mbaya. Kwa hiyo kile zaidi tunaweza kufanya nini? Naam, ni zamu nje kisha katika toleo la mawili, ambayo ni last-- na tutaweza tu mtazamo saa hii. Katika hatari ya kufanya ni uglier, ni zamu nje kwamba kuna maktaba katika dunia aitwaye jQuery. Na jQuery ni super maarufu JavaScript maktaba hiyo ni hivyo maarufu kwamba wengi yoyote JavaScript-- siyo kawaida kwa watu kuwachanganya jQuery na JavaScript. Kwa nini? JavaScript yenyewe ina sana njia verbose ya kufanya things-- document.getElementByID, dadadadadada. Wewe kuishia kuwa sana mistari mirefu ya kificho. Hivyo wenzake aitwaye John Resid, ambao kwa kweli kazi kwa ajili ya startup up siku hizi, akatoka na hii miaka maktaba iliyopita kwamba watu wengi wamechangia kwa aitwaye jQuery kwamba mabadiliko syntax kwa njia zifuatazo. Na hivyo tu wameweza kuona hivyo, kwa sababu utasikia invariably kuona hii kama kufanya mtandao msingi mradi wa mwisho, hii itakuwa ni njia sawa na kutekeleza kazi hiyo kwa kutumia huu maktaba maalum. Sasa, badala ya tease ni mbali katika ukamilifu wake, hebu tu kuangalia baadhi mwelekeo. Syntax hii inaonekana kuwa na wangapi kazi bila majina au majukumu Nameless au AKA lambda kazi? Mbili, sawa? Na unajua kwamba, hata kama wewe si super comfy na hii, tu na ukweli kwamba anasema kazi () mara mbili. Na zinageuka kuwa nini kanuni hii ni doing-- na tutaweza kutaja marejeo online, hatimaye, kwa baadhi ya msaada na hii. Hii ina maana kwamba wakati hati ni tayari, kwenda mbele na kujiandikisha kazi zifuatazo kama kuwasilisha handler kwa HTML kipengele ambaye kipekee Wazo ni demo. Na kisha, wakati hiyo ikitokea, piga mistari hizi mbili za kificho. Na hii ni, kusikitisha, zaidi njia verbose ya kusema kurudi uongo. Na sisi zilizotajwa hii kwa sababu tu utaona kanuni kama hii online. Na ni kitu kuwa daunted na. Lakini badala yake, kukumbuka kwamba nini kwenda kuwa kawaida katika JavaScript ni dhana hii. Na hivyo ndiyo sababu sisi kuonyesha kuwa kwa sasa. Sawa. Hivyo bila makao pia mengi juu ya kwamba syntax, ni kuna maswali yoyote juu ya mifano hii au mawazo hivi sasa? Sawa. Basi hebu kutumia hii kwa kitu muhimu. Maamuzi ukurasa wa mtandao kwamba tu anasema hello, hivyo na hivyo si yote ya kuvutia, si kwa underwhelm. Hii moja si kwenda kuwa nzuri, lakini ni kwenda kufanya kitu muhimu. Hebu kwenda nyuma ya saraka yangu hapa na kufungua, kusema, fomu-0.html. Hivyo tuseme hii ni Freshman intramural michezo usajili ukurasa bila CSS yoyote au maana yoyote ya kubuni. Na mimi nataka kwenda mbele na kujiandikisha hapa na password. Na mimi nina kwenda kwa kukubaliana na masharti na hali na click Daftari. Na sasa tovuti hiyo anasema, "Wewe ni kusajiliwa! (Naam, si kweli.) " Hiyo inaonekana kama ni kazi, lakini basi mimi kwenda mbele na kulazimisha Reload. Na napenda kusema, hapana, huna haja yangu ya barua pepe halisi. Au labda tutaweza tu kusema pepe huko. Password itakuwa, kama, 12345. Na kisha, kwa sababu tu mimi nina idiot, sasa ni 123456789. Na mimi si kwenda kuangalia sanduku yako. Hmm. Sawa. Hivyo kuna fursa kadhaa kwa ajili ya kuboresha hapa. Na unajua, au utaona katika pset saba, unaweza kuandika code-- na itabidi kuandika kificho katika PHP-- kutetea dhidi ya aina hii ya mtumiaji makosa kwa sababu mtumiaji wazi hana kushirikiana. Na yeye au yeye haijatoa nyote maadili alitaka au hata katika muundo kwamba alitaka yao. Hivyo utaona katika pset saba kwamba tunaweza hakika kuwa baadhi kama hali hiyo inasema nini kama barua pepe si username@something.edu, tunaweza tu kusema pole na kuomba msamaha kwa mtumiaji mengi, kama unaweza kuwa katika pset saba. Au kama si checked sanduku kwamba, zamu nje katika PHP, unaweza kugundua kwamba, mno. Na hakika kama manenosiri si mechi kama katika register.php kwa pset saba, wewe inaweza kuchunguza jambo hilo. Lakini hiyo ni maumivu katika shingo kwa kuwa sasa wao kuomba sisi kwenda njia yote kwa kompyuta. User ni taarifa ya upotevu. Na angalau isipokuwa wewe kutumia baadhi ya mbinu fancier, sasa wana click nyuma mshale. Je, si ni kuwa nzuri, kama mengi ya Nje leo, kama alikuwa na zaidi ya mara moja maoni, papo hapo? Kwa maneno mengine, napenda kwenda kwa toleo la moja, ambayo ni kwenda kuwa hakuna prettier. Lakini ni gani kipengele hiki. Malan, 12345, 123456789, si kwenda kuangalia sanduku, Daftari. Nywila si mechi. Hivyo hata kama hii pop-up ni ugly-- tunaweza kuchukua nafasi hii hatimaye na kitu kama Bootstrap, ambayo utaona katika pset saba ni maktaba maarufu sana Nilifanya kuchunguza kwamba nywila hailingani. Sawa. Naam, napenda kurekebisha kuwa kama mtumiaji. Hebu kwenda mbele na kusema 12345, 12345. Bado si kuangalia makubaliano. Lazima kukubaliana na sheria na masharti. Hivyo kwa nini? Kama tumekuwa tayari posited kwamba kuna njia, na tumekuwa required wewe katika pset saba kuchunguza makosa hali kama hii server-upande, kwa nini mimi kujisumbua pia kufanya hivyo katika JavaScript? Nini hoja katika neema ya kuongeza kile wewe ni juu ya kuona kama some-- kuna utata ziada. Labda hakuna suala la mafanikio. Je, inaweza kuwa kitu gani? Watazamaji: [inaudible]. DAVID Malan: Ah, ya kuvutia. Uwezo ushujaa. Hivyo uhakika, kama wewe si utunzaji potofu mtumiaji pembejeo kwamba kubwa, labda ni wote bora kama haina hata kufikia kompyuta yako. Napenda kushinikiza nyuma huko na kusema, unapaswa pengine kurekebisha wote wawili wa matatizo hayo. Lakini hiyo ni haki. Nini kingine? Watazamaji: [inaudible]. DAVID Malan: Yeah. Kanuni hii, kama sisi alisema kabla, ni kufasiriwa juu ya mteja upande. Haina bother server, ambayo ina maana hana athari mzigo server au uwezo. Na sasa, kwa umri mdogo kwangu, hii haina athari maana kwa sababu mimi na mtumiaji mmoja hivi sasa. Lakini kama wewe ni yoyote tovuti ya ukubwa heshima, hasa kubwa, kama Facebook, zaidi unaweza kuweka watu mbali Server yako bora kwa sababu server, bila shaka, tu ina kiasi kidogo cha RAM, finite idadi ya gigahertz, finite idadi ya mambo inaweza kufanya kwa kitengo cha wakati. Hivyo kama kuna watu zaidi katika dunia kupiga kompyuta yako, ajali magogo kimakosa, tu kama vile ikiwa unaweza kuweka mzigo kwamba mbali kompyuta yako. Plus, hasa kwenye simu device-- kama wameweza milele kuingia katika my.harvard au Netid Yale au kama, kuna hii latency na mengi ya tovuti kama kwamba ambapo inachukua, kama, damn pili au mbili wakati mwingine. Na kisha, Mungu wangu, mkiwa mistype, basi una hit nyuma na Rudia. Hivyo kuna utulivu, hasa juu ya uhusiano polepole mtandao. Lakini JavaScript, kwa sababu ni anaendesha juu ya mteja na haina haja ya kwenda na kurudi katika mtandao uwezekano wa polepole uhusiano, unaweza kupata karibu instantaneous maoni. Hivyo hebu tuangalie hii. Hebu kufungua fomu-0 na tuangalie HTML hapa. Na hebu tu kuona nini kinaendelea. Hii ni aina ambao hatua ni register.php. Mimi tu kutumia kupata hivyo kwamba mimi naweza kuona URL. Lakini kwa siri, tunatarajia shaka unataka kubadili hali hii baada ya katika hali halisi. Hapa ni pembejeo uwanja wa aina maandishi. Hapa ni pembejeo nyingine uwanja wa aina password. Hapa ni, kama wewe sijawahi kuona, mchango wa aina checkbox. Lakini hakuna JavaScript hapa wowote. Hii ni HTML tu kwamba huenda kwa register.php. Lakini katika toleo moja, ambapo mimi kuanza kupata wale viibukizi, hebu angalia nini hasa kinatokea hapa. Katika toleo moja, nini Mimi nina kwenda see-- mimi walidhani mimi naweza duka kutosha kwa maneno ya kutosha, lakini mimi mbio nje. Katika toleo one-- kuna sisi kwenda. Katika toleo moja, taarifa following-- na sio utekelezaji bora, lakini ni yangu ya kwanza. Taarifa kwamba chini fomu, nina tag script. Na tag script ina maana, hey, browser, hapa inakuja baadhi ya kanuni katika, kawaida, na javascript. Na sasa, taarifa nini mimi kufanya. On line-- naweza vigumu kusoma it-- kujipanga 32, inasema, var form-- hivyo nipe kutofautiana kuitwa fomu. Na kisha kupata document.getElementId ya "usajili." Hii ni nini? Naam, napenda rewind hapa. Na taarifa, ah, mimi alitoa fomu kipengele holela lakini maelezo wazo ya usajili. Hivyo hii anitiaye kutofautiana kwamba inaruhusu mimi kwa kunyakua kwamba nodi, kuwa Mstatili katika mti inayoitwa fomu. njia form.onsubmit, hey browser, kusajili tukio msikilizaji juu ya aina hii. Kwa maneno mengine, wakati fomu hii ni kuwasilishwa, kutekeleza kanuni zifuatazo. Haina haja jina kwa sababu kwa nini unahitaji kujua jina? Wewe tu haja ya kujua nini nitafanya, ergo ni bila majina au lambda kazi. Na kazi ambayo ni yote ya mistari haya hapa. Na sasa, kwa kuwa waaminifu, hata kama wewe wanaweza kuwa na milele imeandikwa na javascript kabla, ni tu C na PHP mantiki. Hivyo kama form.email.value == "" - hivyo kama uwanja barua pepe ni tupu, kelele mtumiaji na "Lazima kutoa barua pepe yako. " Mwingine kama form.password.value ni tupu yell katika mtumiaji, "Ni lazima kutoa password yako." Zaidi ya kuvutia mantiki, kama form.password.value hana form.confirmation.value-- sawa wapi uthibitisho kuja kutoka? Napenda rewind. Naam, mimi kuitwa pembejeo huu uwanja hapa password. Na mimi kuitwa hii moja hapa uthibitisho. Mimi nilikuwa na kuitwa ni nenosiri mbili au kitu kingine chochote. Mimi tu mantiki ya kuangalia kwamba hizi mbili ni sawa. Else-- ni zamu nje hii ni Mheshimiwa Boole again-- thamani Boolean, sanduku kuangalia. Hivyo kama mimi kusema, mshangao point-- kama si form.agreement.checked, kelele katika user pia. Hivyo syntax hii utaona ni kawaida sana katika JavaScript, ambapo una nukuu hii dotted. Unaweza kuanza kwa kitu hapa. Wewe kupiga mbizi katika undani kwa kwa mali kama password. Na kisha kupata katika thamani yake halisi. Na tena, hapa ni pembejeo. Hapa ni jina password. Na thamani yake ni chochote binadamu ina kweli typed katika. Hivyo katika yote haya kesi, mimi kurudi uongo. Lakini kama si, mimi kurudi kweli. Na hivyo sasa tunaona matumizi ya kulazimisha ya wakati ungependa kurudi uongo kwa kuacha kile mtumiaji kufanya na kufanya kwake kuchagua tena au aina nyingine tena. Vinginevyo, sisi kurudi kweli. Na napenda kuanzisha moja lahaja nyingine ya hii tu mbegu baadhi ya ufahamu wake. Naam, katika toleo 2 ya hii, fomu-2-- Mimi itabidi kufanya hivyo kwa wimbi la mkono. Hii ni, kwa wale curious, jQuery toleo, wale ambao kutaka dabble katika kwamba maktaba fulani. Lakini hebu start-- na maswali yoyote? Napenda pause kwa muda kwa sababu iliyokuwa haraka na mengi. Lakini jambo zuri hapa ni kwamba wote wa kanuni ni pretty kiasi sawa. Mambo mapya ni nini dom? Ni rectangles haya? Ni nodi hiyo ni nini? Nini kazi bila majina? Nini tukio handler? Bali nashiriki, wengi ambayo ni ya haki mzunguko kamili kutoka, kusema, wiki sifuri. Sawa. Hivyo kitu kidogo zaidi ya kuvutia? Naam, awali ya yote, napenda kwenda mbele na kufungua Google Maps. Na utasikia taarifa kwamba kwa muda, juu ya mgawanyiko wa pili, taarifa kile kinachotokea wakati Mimi bonyeza kasi ya kutosha. Na uhusiano huu katika Harvard ni hivyo kasi kwamba wewe si kweli taarifa hiyo. Lakini je, aina ya aina ya kuona kama mimi click na Drag kweli kasi? Wale wa wewe kuangalia online, kama wewe polepole huu kwa 0.5x kasi, unaweza kuona hili vizuri. Kile kilichojitokeza tu kabla mimi clicked na kuvutana? Hebu jaribu here-- napenda kufanya kitu kingine, kama 90,210. Hebu kwenda mbali. Hiyo ilikuwa kweli kasi, pia. Vipi kuhusu Disney World? Kuna sisi kwenda. SAWA. Je, unaweza kuona kwa kupasuliwa pili? Tu, kama, viwanja, sawa? Placeholders kwa matofali? Naam, ni nini kinaendelea hapa? Google Maps ni mfano mzuri wa teknolojia hii kwamba wito AJAX. Na hii ni mahali ambapo tutaweza kuanza kwa kutumia JavaScript katika hasa alluring njia. Nyuma katika siku, kulikuwa na tovuti hii inaitwa MapQuest. Na mimi lazima wamechukua Je, ungependa wa hili kutoka miaka ya 1990, ambapo kama alitaka kuangalia juu hapa kwenye ramani, ungependa halisi bonyeza mshale juu kwa juu ambayo ilionyesha wewe mraba mbalimbali za ramani. Kama alitaka hoja kushoto, unaweza clicked mshale ambayo ilionyesha wewe mraba mbalimbali za ramani. Na baadhi ya Nje bado kufanya hivyo leo. Lakini hata MapQuest imenipatia bora, kama Google Maps. Badala yake, ni nini ni bora hizi Siku ni tovuti ambazo kutumia AJAX. AJAX-- inayojulikana kama Asynchronous JavaScript na XML, ambayo ni njia tu ya dhana ya kusema teknolojia au mbinu ambayo inaruhusu browser kutumia JavaScript kufanya maombi ya ziada HTTP baada ukurasa imekuwa kubeba. Hivyo hii ina maana gani? Naam, itakuwa ni aina ya annoying katika Gmail kama kila wakati alitaka kuangalia barua pepe yako, wewe alikuwa literally kugonga Kudhibiti-R au Amri-R au bonyeza kifungo Reload na zima darn ukurasa ingekuwa upya. Sawa? Itakuwa flash nyeupe pengine kwa mara ya pili. Ungependa kuona kijinga maendeleo bar. Na tu kuona kama una mpya pepe, mtandao mzima ukurasa na URL uko katika ingekuwa upya. Lakini si kwamba kile kinachotokea katika Gmail. Sawa? Baada ya kupata email mpya katika Gmail, nini kinatokea kwenye screen? Ni tu inaonyesha juu, sawa? Ni tu magically inaonekana kama safu mpya katika meza. Kwamba kweli inahusisha heshima kiasi cha utata. Kwa kweli, kama wewe kufikiri juu ya mti huu, ambayo hata kama ni moja rahisi hapa, Gmail-- na ningependa kuwa na kuangalia katika kanuni kuwa sure-- pengine ina meza HTML au labda orodha unordered kwamba mithili kila mmoja inboxes yako ya barua pepe kama. Na hivyo kama wewe kufikiria hili kuna ni mti katika kumbukumbu wakati uko kutumia Gmail kwamba inaonekana aina ya aina ya kama hii, wakati Google anatambua, ooh, una email mpya, haina wanataka kujenga upya mti mzima. Badala yake, anataka kupata nodi katika mti kwamba inawakilisha Inbox yako na tu kuingiza nodi mpya. Hivyo ni sawa na pset tano, ambapo alikuwa kuingiza nodes katika meza hash, vile vile anafanya Google, kupitia JavaScript kificho kwamba ameandika, traverse mti huu, kufikiri ambapo ni kwamba Inbox sehemu ya dirisha, na kisha kuingiza safu mpya. Na safu mpya tu ina maana moja au zaidi nodes mpya katika mti. Na hivyo AJAX ni mbinu hii ambayo inaruhusu kwa hasa kwamba. Mara baada ya umefanya alitembelea URL, Hata hivyo mambo kwa muda mrefu ni, na mara moja ina ukurasa wamekuwa kubeba, unaweza bado kunyakua data kutoka zaidi internet-- kama ni barua pepe au tile ya map-- kunyakua hiyo nyuma ya pazia na kisha kuingiza ndani ya ukurasa ili binadamu haina kweli kusubiri kwa ajili yake. Facebook Mtume kazi kwa njia hiyo hiyo. Idadi yoyote ya websites-- mengine loo, kwa kweli, hata hii. I mean, hii ni, kusema ukweli, aina ya annoying kipengele siku hizi. Kama mimi kuanza kwa ajili ya kutafuta cats-- hii Ni aina ya kutisha user uzoefu. Ni tu kuanza kwa ajili ya kutafuta yangu. Vizuri nini ni kufanya? URL hana kweli iliyopita tangu mimi kuanza kuandika. Lakini nini kinaendelea katika wire-- sawa, hmm kuvutia. Nini kinaendelea katika waya hapa tu anapata weirder. SAWA. Hivyo basi mimi kwenda mbele na kukagua kipengele na kwenda tab Mtandao na kujaribu kufanya hii kiufundi na kidogo kuhusu paka. Kama mimi aina, literally, paka and-- nini kinatokea per-- Sitakuja click hiyo. Sawa. Hivyo hapa chini, nini kinatokea kila wakati mimi aina tabia, inaonekana? Kama, kiwango cha chini? Nini kinatokea kwa kila moja ya hizo wahusika mimi nina kuandika kwenye keyboard yangu? Yeah? Watazamaji: [inaudible]. DAVID Malan: Hasa. Kila mmoja wa wahusika hao ni kwenda Google, moja kwa wakati mmoja. Wao ni kujenga kamba kwenye kompyuta zao kuwa inawakilisha kila kitu nimekuwa typed katika hivi sasa. Na kila wakati mimi aina tabia nyingine, wao kutumia mchuzi yao ya siri ya kutafuta algorithm na kufikiri, anamaanisha ukurasa huu paka au ukurasa huu paka au kama? Hivyo katika baadhi ya hisia, inatoa yangu kwa uzoefu bora katika kwamba mimi si hata haja ya kukamilisha mawazo yangu. Na hakika, ni muhimu Jambo, autocomplete kwa ujumla. Kama algorithms yao ni nzuri ya kutosha na kama upekuzi wangu ni dhahiri kutosha, Sina ya aina ya neno zima. Wao wanaenda kuniambia nini ni mimi nina kweli kwa ajili ya kutafuta. Kwa hiyo kile Google wito papo search ni kutumia tu AJAX, kutumia kanuni ambayo inaruhusu yao ya kuomba maudhui ya ziada kupitia mtandao browser nyuma ya pazia kutumia hii lugha mpya, na javascript. Hivyo tuna dakika kadhaa wa kushoto. Na napenda kuwaita na rafiki yangu Colton hadi kwenye hatua, tangu ilionekana hasa furaha mara ya mwisho kuanzisha teknolojia kwamba baadhi yenu wameonyesha nia katika miradi ya mwisho. Tulidhani ni d kuwa na furaha ya kuleta up kujitolea, ingawa, leo kuwaonyesha Mbali na hii ambayo inaruhusu you-- yeah, Niliona hii mkono kwanza. Kuja juu juu. Vizuri sana kufanyika. Kazi nzuri. Mimi nina kwenda kwa mradi huu juu ya screen katika muda tu. Nini jina lako kwa kila mtu? EFA: Mimi ni Efa. DAVID Malan: Etha? EFA: Efa. DAVID Malan: Efa? EFA: Naam. DAVID Malan: Nice kuona wewe. Sawa. Napenda kupata hii tayari. Kuja juu juu kwa katikati na Colton hapa. Nini Colton ina mikononi mwake leo ni udhibiti wa kijijini. Hivyo badala ya kusimama pale katika tatu-dimensional dunia kuangalia kote kama Colton hivyo, sasa Efa Unaweza kweli kutembea kwa kwenda juu, chini, kushoto, na haki kama Nintendo au Xbox mtawala. EFA: Mimi nina kwenda kuanguka mbali ya hatua. DAVID Malan: Mimi kusimama takribani zaidi ya hapa. Lakini hiyo ni hatari. SAWA. Hivyo kwenda mbele na kuweka wale juu ya. Hebu kwenda mbele na kubadili screen hapa. Napenda dim taa. Na Colton, napenda kuja kusimama karibu na wewe. Je, unataka kueleza hapa kwa mic nini sisi ni kufanya? Hapa kwenda. COLTON: Ni kweli. Hivyo sasa hivi tuko upakiaji up Oculus, Nadhani operating-- si kazi mfumo, lakini mpango kuu, ambapo unaweza kupata michezo yote na programu ya kwamba ni katika maktaba yako. Hivyo sasa hivi, ni lazima kusema bomba touchpad kuanza. Touchpad kwenda kuwa juu ya upande wa kifaa cha kichwa kulia. Hivyo kwenda mbele na tap-- EFA: Oh, mtu. DAVID Malan: Yeah, kuna kwenda. Ubora Efa ni kuona ni ubora juu sana. Hii ni Wi-Fi hapa. COLTON: Kwa hiyo ni nini uko atataka kufanya ni kuangalia kuelekea juu kulia wa screen. Yep, kwamba mchezo juu ya haki juu sana. Na kisha wakati wewe ni kuchagua hivyo, bomba touchpad tena. Nadhani Dreadhalls wake. Na kisha hapa ni a-- hapa, hebu mimi kushikilia glasi yako kwa ajili yenu. Hivyo mimi tu alimpa mtawala. Hivyo sasa anaweza kudhibiti mchezo. Yeye unaweza kuzunguka na mambo kama hayo. Hivyo kwenda mbele na kuangalia juu juu. Unapaswa kuona New michezo. Hivyo kwenda mbele na unaweza kufanya hivyo. Sasa, unapaswa kuwa na uwezo wa kudhibiti mwenyewe na mtawala, pamoja, haraka kama mchezo mizigo hapa. Hii inaweza kuwa ni kidogo kidogo inatisha. EFA: Sasa unaweza kuniambia. SAWA. COLTON: zote haki. Hivyo kuthibitisha kwamba unaweza kuzunguka. SAWA. Unaweza kuzunguka. Kamilifu. Hivyo kama wewe kuangalia chini, una ramani. Ramani inaonyesha wapi. Unaweza kuangalia kuzunguka chumba. Unaweza kabisa kugeuka. Yeah, kwa uhakika. Geuka. Ili kuangalia kwa upande wa kushoto yako. Nadhani kuna kitu unaweza kuchukua juu ya pipa katika chumba hicho. EFA: Je, mimi kupata ramani nje ya njia? COLTON: Angalia up. Hebu angalia juu. Sawa. Kuna kwenda. Sasa kwenda mbele na kugeuka tu kuzunguka. Ili kuangalia mbali zaidi kwa upande wa kushoto yako. Kusonga kushoto. Kuendelea kutafuta kushoto. Endelea kwenda. Naam. EFA: Oh, kwa njia hiyo. COLTON: Naam. Kutembea kuelekea kwa mtawala. Kuna kwenda. Sasa ni lazima kusema pick it up. Kuna kwenda. Pick it up. Sawa. Sasa, hebu kupata nje ya chumba hiki. Kwenda mbele na kutembea kwa mlango huo. Hivyo wewe ni kwenda hold-- inasema kushikilia kifungo kwa nguvu ya wazi. Hivyo kwenda mbele na kushikilia kifungo. Yep, kulazimisha kufungua. Sawa. Kazi nzuri. Sasa sisi ni kutembea nje ya chumba. Hivyo nina kwenda kwa kuacha wengine juu na wewe na kuona nini kujua. EFA: Mimi si kwenda katika chumba giza. Oh, ngoja. Sasa nina kwenda chini ukumbi giza? OK, mimi nina kwenda nyuma [inaudible]. COLTON: zote haki. Baadhi ya vitu zaidi kuchukua. Inaonekana kama baadhi sarafu. Hiyo ni kufuli pick. Hivyo kama wewe kupata imefungwa mlango, unaweza kutumia hiyo. Je, wewe hofu? EFA: Si bado. COLTON: Sawa. Pretend-- yeah. Tu kujifanya uko kweli amesimama. Na kama wewe kugeuka around-- nimepata kupata kutumika yake. Lakini ni mantiki. DAVID Malan: Na wakati Efa inaendelea kucheza, tangu tunaweza kufanya hivyo siku zote, tunaweza zote ncha-toe nje hapa. Lakini sisi tunayo jozi wengine wawili, kama Ningependa kuja na kucheza. Vinginevyo, tutaona wewe ijayo siku ya Jumatano. Asante kwa kujitolea yetu ya leo. [Makofi] [Music - "Seinfeld THEME"] SPIKA 1: Naam, mimi nina kuweka mpya PL mlima juu. Mimi tu iliyopita OLPF-- SPIKA 2: Kwa hiyo ni nini hasa unafanya nini? SPIKA 1: Naam, kila mmoja these-- hapa, mimi nitakuonyesha hii moja katika hapa. Unaweza kuona haki hapa. SPIKA 3: Nadhani mimi nina mzuri na hayo. Unataka baadhi zaidi? SPIKA 4: Hapana, mimi nina nzuri. [Inaudible]. SPIKA 3: Hapana, [inaudible]. Kuwa na baadhi ya. SPIKA 1: rangi tofauti. SPIKA 2: Sawa. SPIKA 1: Hivyo hatimaye kile gani ni anpassar rangi of--