[MUSIC nagpe-play] 

David MALAN: Ito ang CS50. Ito ang simula ng linggo siyam. At ito ay kung ano ang mayroon naging ika-200 na kaarawan Mr. Boole ni. Kaya ito ay ang mga kasama kanino na ipinahihiwatig namin lubos ng ilang beses tungkol sa paggamit ng Boolean variable tunay at huwad, 1 at 0 at tulad. At ito ay Google pagkilala sa kanya ngayon. Gusto niya naka-200. Kaya kung gusto mo na sumali sa amin para sa CS50 tanghalian, tingnan ang mga link sa website ng kurso. At tulad ng mga mukha at mga kaibigan bilang mga naghihintay sa iyo dito sa Cambridge. Mukha tulad ng mga ito Naghihintay sa iyo sa New Haven. At, sa katunayan, Ken in Mabait New Haven ginawa ano ang tinatawag na isang animated GIF ng Eli dito sa isang kamakailan-lamang lunch-- isang GIF pa ay isa pang graphical file format, na kung saan ikaw ay familiar-- na mukhang isang maliit na bagay tulad nito. Kaya ang isang sequence lang of-- OK. Walang isa dito sa Cambridge ay tumatawa. Ngunit sa New Haven, ito ay talagang funny, right? Lahat tama. 

Kaya sumali sa amin doon. Dito sa Harvard, partikular, ito Miyerkules, kung ikaw ay isang sophomore o freshman even-- o kahit junior-- pag-iisip ng paggawa ng isang lumipat sa computer science, alam na may idedetalye maging isang CS pagpapayo fair na ito Wednesday, ilang sandali pagkatapos ng klase sa 4:00 PM sa computer building agham Maxwell Dworkin. Susubukan naming ilagay ito sa kurso ni website sa pamamagitan ng bukas, pati na rin. Donuts, ako sinabi, ay nagsilbi. 

Lahat tama. So funny story-- ako ay poking sa paligid sa internet, at natagpuan ko ang ilang mga lumang archives sa aking mga dating website. At ito ay lumiliko out-- paligid na ito panahon, ito ay tila napaka-napapanahong dahil ipunin ko na ang halalan UC ay up muli si gear. Kaya ako tumakbo para sa UC, nawala nang abang-aba. At marahil ito ay sa bahagi kung bakit. Kaya ito ay ang aking website sa panahon. Para sa ilang mga dahilan, Akala ko ito ay isang magandang ideya, bago nagsasabi sa mga tao kung ano ang aking platform ay at kung bakit sila dapat bumoto para sa akin, na mayroon silang i-click upang ipasok upang malaman na impormasyon, na sa alaala ay uri ng katakut-takot. Hindi ko talaga alam kung ano na. 

Ngunit ito ay tiyak na hindi makatulong sa aking kampanya. Natagpuan ko rin na sa pamamagitan ng Senior year-- ako ay nagkaroon na ito Muppet kalendaryo. Muppets ay uri ng sa popularidad noon. O marahil sila ay hindi. Ako ay may isang Muppet kalendaryo noon. At naisip ko na gusto ito ay cool na pangalan aking computer sa network Harvard ni frogman.student.harvard.edu. Sa oras, namin ang lahat ay katangi-tangi makikilalang pangalan ng host. At maaari kang pumili ng ilang mga vanity pangalan sa halip ng iyong sariling pangalan. At nagpunta ako sa maninisid para sa ilang kadahilanan. 

At pagkatapos started-- ko ako na ginugol ng maraming ng mga oras ng pag-click sa pamamagitan ng mga link na ito ngayong umaga. At ito ay ang aking tungkol sa pahina, na sa ngayon ay uri ng anyong kaibig-ibig. Ngunit ito rin ay nagpapatotoo sa makatarungan paano malayo teknolohiya ay dumating. Ibig sabihin ko, pabalik sa araw, isang 486 ay isang bagay. Ang mga araw, ito ay sobrang, sobrang, sobrang mabagal at maayos mas mababa kaysa sa maaari mong magkaroon sa iyong sariling bulsa ng mga araw. Mayroong higit pa sa doon na ay mas nakakahiya. Kaya makikita ko bang iwan ito sa na. Ngunit iyon ay ang aking unang pandarambong sa web-- oh, hindi. Hindi iyon. Ang aking unang real pandarambong sa web programming ay ang site na ito, na kung saan ko na lang nakalimutan. Sa ilang mga punto, natutunan ko kung paano gumawa ng mga paulit-ulit larawan sa background. At kaya Natagpuan ko ito atip na kapsa epektibo, tulad ng hockey player, football, at golf bola, o kahit na ano na para sa Frosh IMs website. At ito ay tunay na, tunay na ang unang proyekto web-based na kinuha ko on-- Sa tingin ko siguro sophomore taon, junior year-- pagkatapos pagkuha CS50 at CS51, isa ng mga karaniwang follow-on na mga klase. Napansin ko sa mga naghahanap sa pamamagitan ng mga archives na ang isa sa aking mga tagapagmana at mga kaibigan, Lee, uri ng nagbago ang copyright sa kanyang sarili. Ngunit ito ay katunayan ng isang bagay na Dapat ko pag-aari ang kahihiyan sa. Ngunit sa oras na ito, ay ang unang website, na bilang ng ilang linggo na ang nakakaraan ng sinabi ko, sa pamamagitan ng na freshman dati magparehistro para sa nasa loob ng lunsod sports dito. At kaya ito ay lumiliko out na mga larawan sa background tulad na hindi tulad ng isang magandang ideya. Ngunit ang web ay bago, at ay namin ang lahat ng eksperimento. At ito ay kung ano ang aking Lumilitaw na ginawa sa oras. Lahat tama. Kaya nang walang karagdagang linggal, lumipat kami Gears ngayon upang bigyan ka ng, talaga, ang huling piraso na maaari mong mahanap lalong kapaki-pakinabang para sa huling proyekto kundi pati na rin na ay magsisimula sa gumawa ng buong world wide web pakiramdam mas maliwanag nang kaunti. Sa katunayan, kami ay pagpunta sa kitang ipakilala isa pang karagdagang programming language tinatawag na JavaScript na katulad at iba't ibang sa iba't ibang paraan mula sa mga wika kami ay tumingin sa gayon ay malayo. 

Kaya C, pagpapabalik, ay ang pinagsama-sama sa wika. Mayroon kayong upang patakbuhin ito sa pamamagitan ng isang tagatala. Makukuha mo ang source code sa object code, o zeroes at mga bago. At yaong mga zeroes at mga na iyong CPU, central processing unit, talaga maintindihan. PHP, sa pamamagitan ng kaibahan, ay hindi isang naipon wika. Ito ay isang kung ano? Ito ay isang interpreted wika. Kaya may ilang mga program tinatawag na isang interpreter na ay may na basahin it-- itaas hanggang ibaba, kaliwa hanggang right-- at malaman kung ano ang lahat ng iyong syntax ginagawa at ibig sabihin nito, maging ito man ay isang loop o isang kondisyon o anumang iba pang bilang ng mga programming constructs. Kaya na ang isang naisalin wika. 

Pagkatapos ay nagpasimula ng HTML. At HTML ay hindi kahit isang programming language. Gusto naming tumawag ito kung ano? Ang isang markup language, na lamang isang uri ng magarbong paraan ng sinasabi ito ay walang programming constructs tulad ng Nakita namin kahit na sa likod sa araw ng scratch. Walang mga loop. Walang mga kundisyon. Ito ay tunay na isang wika tungkol sa pagmamarka up ang iyong data at pag-format ng mga ito o iistraktura ito sa ilang mga paraan. 

CSS, samantala, katulad hindi isang programming language. Ito ay kahit na higit pa aesthetically oriented. At ito ay nagpapahintulot sa iyo upang ayusin ng fine-tune mga bagay tulad ng laki at kulay ng font at placement at ang lahat ng iyon. Pagkatapos namin 

SQL. Kaya SQL ay talagang isang programming wika sa ilang mga kahulugan, kahit na iniayon partikular na sa mga database. Ngunit kahit na ipakilala lamang namin sa inyo na piliin at ipasok at tanggalin at i-update at isang pares ng mga iba, lumiliko out maaari mong aktwal na sumulat ng mga function o pamamaraan, pati na ang mga ito tinatawag na, sa SQL na hitsura at kumilos lubos tulad ng PHP at C function. Kaya alam na ang mga umiiral. Ngunit hindi namin kahit na abala sa kanila bilang scratch namin sa ibabaw dito. At pagkatapos ay ang JavaScript, ang huling ng ang aming mga wika pormal na ipinakilala. Kaya JavaScript, masyadong, ay isang naisalin wika. At ang mga pamilyar na, gawin gusto mong makilala ang mga ito kasama ang ilang mga katangian na mula sa parehong C at PHP? Ano ang ginagawa itong iba't-ibang? 

Madla: Ito ay hindi pinagsama-sama. 

David MALAN: Sabihing muli? 

Madla: Ito ay hindi pinagsama-sama. 

David MALAN: Ito ay hindi pinagsama-sama. Kaya ito, masyadong, ay naisalin. Kaya ito ay hindi pinagsama-sama. Ngunit na gumagawa ito ng isang maliit na tulad ng PHP. Ngunit ito ay naiiba mula pa rin PHP sa ilang mga kapansin-pansin na paraan, hindi bababa sa paraan gagamitin namin ito. Oo? 

Madla: Ito ay nagpapatakbo ng client-side. 

David MALAN: Ito ay tumatakbo client-side, kadalasan. Iyan ay sa katunayan ang tangi katangian para sa amin sa ngayon. C ay server-side sa kamalayan na ginawa namin ang lahat sa CS50 IDE. PHP kaya malayo ay server-side insofar bilang na ito, masyadong, ay makakakuha ng interpreted-- hindi naipon, ngunit interpreted-- sa loob CS50 IDE, na siyempre ay lamang ng isang server o server sa cloud. 

Ngunit JavaScript, kahit parang ikaw ikaw ay pagpunta upang simulan ang pagsusulat ito para sa, sabihin nating, pset walong at marahil huling projects-- ikaw pagpunta sa karapatan nito sa CS50 IDE at i-save ito in file sa loob ng CS50 IDE, CS50 IDE at, sa turn, ang mga server ng ulap na kung saan ito ay naka-host, ay hindi pagpunta upang bigyang-kahulugan o maipatupad ang iyong code. Sa halip, ito ay pagpunta sa ipapadala sa hindi nagalaw form pababa sa browser. At pagkatapos ito ay magiging IE o Chrome o Firefox o Safari o kahit na ano na ang tunay na kahulugan ito, sa itaas hanggang sa ibaba, kaliwa papuntang kanan. Kaya ang susi tangi katangian para sa araw na ito ay na ang JavaScript ay client-side at PHP, halimbawa, Wala na server-side. Ngayon, ito ay kagiliw-giliw na mga implikasyon para sa, tulad ng, ari-ariang intelektwal at na aktwal na maaaring makakita ng iyong code. At sa katunayan, maaari kang pumunta sa web at makita ang pinaka anumang code na ang isang tao ay may nakasulat sa JavaScript. Minsan ito ay nababasa, kung minsan ito ay nakapailalim. Ngunit higit pa sa na sa takdang panahon. 

Kaya JavaScript, mabuti sapat, ay sobrang katulad, syntactically, upang C. At tulad ng PHP, walang main function. Kung nais mong simulan ang pagsusulat JavaScript code, tulad ng makikita mo sa araw na ito, simulan mo sa pagsusulat lamang ito. Ngunit ito ay, makikita mo, lalo na kapaki-pakinabang sa konteksto ng mga web browser. Gayunpaman, ang aking maliit disclaimer-- karaniwang earlier-- ay upang sabihin na maaari mong unting ngayon gamitin JavaScript server-side gamit ang isang fancy framework na tinatawag Node.js na ang ilan sa mga sariling aplikasyon CS50 ay nakasulat sa. Suriin 50 aktwal na gumagamit Node.js. Ngunit kami ay pagpunta sa focus sa JavaScript client-side dito sa labas. 

Kaya dito ay isang hanay ng mga kondisyon sa PHP. Paumanhin, in-- talaga, na statement, masyadong ay tama. Dito rin ay isang hanay ng mga kondisyon sa JavaScript. Syntactically, ito ay magkapareho sa C at sa PHP. Expression Mr. Boole ay, katulad, syntactically magkapareho sa parehong C at PHP. Kami rin ay may switch sa JavaScript na magkapareho. Mayroon kaming para sa mga loop na nakabalangkas na magkapareho, habang loop, gawin habang loop. 

Isa na ito ay isang maliit na naiiba. Nagkaroon PHP ang para sa bawat tayuan na maaari kang maging gamit o gagamitin sa pset pitong, marahil. Na ito ay may mga espesyal na bersyon ng JavaScript sapagkat kung saan ka literal sabihin ng isang bagay tulad ng para sa mga variable key sa bagay, na ay isang napaka-maikli at malinaw na paraan ng pagsasabi, kung Mayroon akong isang object-- at bibigyan namin ng makipag-usap tungkol sa muli ang mga ito sa isang moment-- at gusto ko upang umulit sa lahat sa mga pangunahing mga pares ng halaga sa loob, Hindi ko na kailangang malaman kung paano ayon sa bilang ng index ang mga ito na may mga zero, isa, dalawa tatlo. 

Maaari ko bang literal sabihin na ito. At sa bawat pag-ulit, JavaScript para i-update ako ng variable key na ang unang, pagkatapos ay ang susunod na key, pagkatapos ay ang susunod na key, at pagkatapos ay ang susunod na key, at iba pa. At maaari kong makuha sa halaga nito sa pamamagitan ng pagpapagamot isang bagay sa JavaScript, bilang namin makita, na parang ito ay isang uugnay array sa PHP. Sa katunayan, kung ikaw ay sa wakas balot ang iyong bale paligid ng kung ano isang nag-uugnay array ay sa PHP, maaari mong isipin ng mga ito para sa ngayon bilang magkapareho sa isang bagay sa JavaScript. Ngunit iyon lamang ang isang piraso ng isang oversimplification. 

Arrays tumingin, mabuti sapat, magkapareho sa PHP maliban para sa isang character. May nawawala dito ang isang bagay na ginawa namin makita ang nakaraang linggo na may PHP. Ano ang mga tinanggal na? Oo? Walang sign dollar. Kaya hindi namin pabalik sa isang mas normal na mundo kung saan variable ay hindi magkaroon ng mga palatandaan dollar. Ngunit mo prefix sa kanila may var, karaniwan. At var nangangahulugan variable. At tulad ng PHP ay maluwag typed-- kung saan may mga uri, may mga numero at mga string at sa kamay at iba forth-- JavaScript parehas ay may mga uri. Ngunit maluwag ito ay nai-type sa na namin ang mga programmers ay hindi na tukuyin ang mga ito. Kami lamang magkaroon upang magkaroon ng kamalayan na umiiral sa iba't ibang uri. 

Variable, dito meanwhile-- ang paraan kung paano maaari nating magpahayag ng "hello, world" bilang isang string. Pansinin na ito ay magkapareho sa PHP ngunit walang dollar sign. At ito ay isang bagay na kami magsisimulang makakita ng higit pang mga araw na ito, kung saan ikaw ay may isang bagay may mga pindutan at mga halaga. At kung gusto mong subukan ang magpakilala mula sa huling week-- ang syntax ay isang maliit na naiiba. Ngunit ang isang maliit katinuan check-- kung gaano karaming key sa bagay na ito tila sa may? Kaya nakikita ko sa apat. Nakakakita ako ng dalawa. 

Kaya ito ay aktwal na dalawang. Kaya ito ay isang koleksyon ng dalawang mga pares ng key-value. Ang susi ay simbolo na ang halaga ay FB. Ang susi ay ang presyo na ang halaga ay 101.53. Kaya ang mga ay dalawang pares ng key-value. At tandaan, PHP-- at ito ay muli lamang uri ng sintaktik pagkakaiba. Ito ay hindi lahat na intellectually kawili-wili. PHP ay maaaring may nakasulat na parehong ito bagay bilang follows-- quote, katumbas. At binago ko ang mga ito sa mga square bracket. At pagkatapos kong baguhin ito sa isang naka-quote na salita, "presyo." At pagkatapos ay hindi ako gumagamit ng colon. Ano ang ginagamit ko noong nakaraang linggo? Oo, ang katumbas sign palaso funky notation. 

At pagkatapos ay ako ay ang parehong bagay dito. Parehong bagay dito. At na ang lahat. Kaya ito ay pinong kung ito ay may hindi talagang mas mababa sa sa memory lang pa dahil ito ay talagang intellectually kawili-wili. Ito lang ang sintaktik pagkakaiba. Ngunit ang mga ideya ay eksaktong kapareho. Inside ng variable na ito quote sa JavaScript ay isang koleksyon ng mga pares ng key-value, isa rito ay simbolo, isa rito ay presyo. At maaari kong makuha sa mga halagang iyon sa mga sumusunod na syntax. Katulad ng sa PHP, maaari ko gawin isang bagay tulad ng ipaalam akong gumawa ng kahon na ito ng isang maliit na mas malaki. Katulad ng sa PHP, maaari ko gumawa this-- oh, dammit. Sige na. 

Katulad ng sa PHP-- OK, bibigyan namin ng gamitin lamang ang mga tala nagtatanghal. Katulad ng sa PHP, maaari kong gawin $ quote ["simbolo"] quote $, at ito ay makakakuha ng sa akin ang halaga ng "simbolo." Sa JavaScript, ito ay magiging magkapareho, kung saan lamang ang maaari kong gawin ito. Ang tanging bagay na nawawala ay ang dollar sign. 

Kaya mabuti sapat, at pagkatapos, may hindi lahat na magkano ang bagong syntax. Kaya ano ngayon ang focus namin sa, talaga, ay ang ilan sa mga ideya at mga aplikasyon. At ang unang tulad ng na application maaari ka tumingin sa kung dived ka sa pset pitong na ito syntax. Kaya sa pset pitong, kung na sa iyo nakita o hindi nakita pa ito, malaman na mayroong isang file na bigyan kami ikaw ay tinatawag config.json-- JavaScript Bagay pagtatanda. Bakit? Nais namin na maaaring magbigay sa iyo ng mga isang template na may ilang mga pares ng key-value. Nais namin na maaaring magbigay sa iyo ng isang listahan ng host, ang pangalan ng server. Nais naming bigyan ka ng isang placeholder para sa iyong username at isang placeholder para sa iyong password. Kung hindi mo nakikita ito pa, huwag mag-alala. Higit sa mga ito sa pset pitong [? spec. ?] At pagkatapos, malinaw naman, gusto namin sa iyo upang punan ang mga na-dos dahil kapag ikaw mag-log sa CS50 IDE, bawat isa sa inyo magkaroon ng iyong sariling username at password. 

Kaya maaari ko na ginagamit namin ang isang kalahating dosenang o higit pang iba't ibang mga format ng file. Kami ay maaaring may ginagamit ng isang .txt file. Maaari naming gamitin ang isang CSV file. Kami ay maaaring naka-iinom ng isang INI file, isang XML file, ng buong bungkos ng mas maraming mga acronym na hindi ka maaaring magkaroon ng kailanman narinig. Ito ay uri ng arbitrary sa pagtatapos ng araw. Ngunit sobrang popular na mga araw ay isang teksto format na tinatawag na JSON-- JavaScript Object Notation-- na ganito ang hitsura. Ito ay isang maliit na misteriyoso, ngunit paunawa ang mga pattern. Magsisimula ka sa isang bukas na kulot suhay, at tapusin mo na may parehong. Sa loob ng na ay isang bagay. Ito ay isang pares ng key-value. Kaya ito ay isang bagay na ako naghahanap sa sa screen dito na may isang key, na kung saan ay may isang halaga. At inferring lamang batay sa Nakaraang pattern, kung ano ang susi dito? Database, ang mga bagay na sa kaliwa ng colon. 

Ngayon, ang halaga ng mangyayari sa maging isang maramihang mga linya ng oras na ito. Ngunit ang halaga ay nagsisimula sa isang kulot suhay at nagtatapos sa isang kulot suhay. Kaya kung ano ang gusto ninyong imungkahi ay ang type ng halaga ng database? Ang isang diksyunaryo o, mas lamang succinctly, ang isang bagay. Right? Ito ang uri ng isang istraktura ng data na maaaring gumamit ng iba pang mga istraktura sa loob mismo. Kaya kung ang buong bagay na hindi namin pagtawag ng isang object-- at ang isang bagay ay lamang ng grupo ng key-value pairs-- ang halaga ng database mismo ay isang object. Ang halaga ng database ay may isang buong grupo ng mga pangunahing mga pares ng halaga, ang unang na kung saan ay host, at pagkatapos ay ang pangalan, pagkatapos ay username, pagkatapos password, bawat isa na ang mga halaga, samantala, ito ay lamang ng panganganak string sa loob ng double quotes. 

Kaya kahit na hindi iyon sobrang lamang pa malinaw, alam na ito ay lamang ng isang standard, medyo boring na paraan ng pag-iimbak ng mga data sa isang standard format. Ngunit ang mga karaniwang pagkakamali sa iyo ay maaaring gumawa, kahit na sa pset pitong, ay kaunti tangang bagay-bagay, tulad ng kung ikaw sinasadyang alisin ang comma doon. Na pagpunta sa resulta sa mga file hindi naman sa pagiging nababasa. Kung hindi mo sinasadyang ligtaan mga bagay tulad ng quotes, hindi ito ay magiging kawili-wili. Kaya ito ay isang pretty nitpicky format ng file, ngunit ito ay isang bagay na sobrang pangkaraniwan. At mangyayari namin na gamitin ito, kahit na hindi mo gamitin ang anumang JavaScript sa kabilang banda, sa pset pitong. 

Lahat tama. Kaya tandaan ang larawang ito. Usapan natin ang tungkol, sa HTML, na Maaaring tumingin ang mga code na tulad nito. Ito ang hypertext markup language [Hindi marinig] para lang "hello, world." Ngunit pagkatapos namin ipinanukalang isang habang pabalik na kung ito ay tumutulong, baka gusto mong simulan ang pag-iisip tungkol sa mga ito na tulad ng isang puno. Sa katunayan, ang indentation na tayo gamitin lamang para sa kapakanan na mabasa ni o dahil sa style ni kaliwang Maaari uri ng isinalin sa punong ito, kung saan mo may ilang mga espesyal root node na bibigyan namin ng generically tinatawag na dokumento, sa ibaba kung saan ay ang root HTML element o tag, HTML, na pagkatapos ay may dalawang bata, ulo at katawan. 

At pagkatapos ay sa turn, ulo ay may isang pamagat. At may isang halaga ng teksto ng pamagat. At katawan parehas ay may isang halaga ng teksto. Kaya't kung ikaw ay komportable kasabihan na oo, maaari mong gawin ito HTML at gumuhit ng larawan tulad ng ito, ang kanang bahagi ay isang magandang modelo ng kaisipan dahil ngayon na kami ay may JavaScript, isang programming na wika ng mga browser execute at bigyang-kahulugan para sa iyo, ito ay lumiliko out na kung ano ang hindi namin tungkol sa upang gawin sa code ay magsisimula na manipulahin ito puno ng istraktura sa memorya. Wala kaming upang bumuo ng ang mga puno sa memory. Hindi namin ay may sa gawin ang uri ng mga pset-five-style na istraktura ng data kumplikado. Ang browser, mabuti sapat, sa pagbibigay-kahulugan sa HTML sa itaas hanggang sa ibaba, pakaliwa o pakanan, ay literal pagpunta sa ibigay sa amin ang katumbas ng isang pointer sa na buong puno para sa libre. Ginagawa nito ang lahat ng mga hirap sa trabaho. Iyan ang Mozilla at Apple at ang iba ay may ginawa para sa amin. 

At sa pamamagitan ng JavaScript kami makapupunta sa ma-control at baguhin at gawin kagiliw-giliw na mga bagay-bagay na puno na, kung hindi, na kilala bilang DOM o Document Object Model. Anong mga uri ng mga bagay-bagay? Well, ito lumiliko out na sa JavaScript, may ito listahan ng mga laundry mga kaganapan na maaaring tumagal ng lugar. At kami ay hindi tunay na ginamit na salita dahil linggo zero at pset zero kapag usapan natin ang tungkol sa scratch. Karamihan sa iyo marahil ay hindi gamitin isang kaganapan sa iyong proyekto scratch. Ngunit maaari mong isipin ang simpleng Marco Polo Halimbawa, kung saan nagkaroon kami ng dalawang sprites, isa sa kanino sinabi, Marco. Ang iba pang mga ng kanino pagkatapos, sa pakikinig at pagdinig na kaganapan, sinabi, Polo. Kung hindi, huwag mag-atubiling tumingin sa likod na malayo sa likod. 

Ngunit ito ay para lamang sabihin, at maaari mong uri ng magpakilala mula sa pangalan ng mga ito mga bagay-bagay, JavaScript, ito ay lumiliko out, ay pagpunta sa bigyan kami ng isang paraan upang makinig para sa mouse lapag o mouse akyat o key lapag o key pagpunta pataas o onsubmit onselect o onresizing isang bagay. Sa ibang salita, anumang pisikal na pagkilos na ang isang tao ay maaaring tumagal ng sa isang browser na ginagawa mo sa araw-araw, maaari mong isulat code para sa na nakikinig para sa mga kaganapan at pagkatapos ay isang bagay na angkop. 

Halimbawa, kung ginagamit mo ang Google Maps, ano ang mangyayari kung i-click mo at ilipat ang mouse, karaniwang? Kung nag-click at i-drag? Oo? Mismong. Ang mapa ay nagsisimula upang ilipat. Kaya maaari mong uri ng makita kung ano ang higit dito, kung ano ang doon. At kung paano gumagana ang Google ipatupad na? Well, siguro, ang mga ito ay gamit ang isang pares ng mga kaganapan tagapakinig, isa na sabi, makinig para sa mouse down-- kaya kapag ang user ay pisikal tinutulak ang kanyang trackpad o ang kanyang mouse down. At pagkatapos ay ang aming hinahanap isang bagay tulad ng paggalaw o ilang iba pang mga kaganapan na ay nagbibigay-daan sa amin upang makuha ang drag. At sa katunayan, i-drag ay parehas sa ganitong dot dot dot listahan ng posibleng mga opsyon. 

Kaya ito ay magiging isang malakas paraan upang simulan ang pagtugon sa user kahit bago siya ay nag-klik isang bagay na malinaw na tulad ng isumite. Ngunit kami ay pagpunta sa kitang ipakilala isang pares na mga paksa upang makarating doon. Ngunit una, sabihin transition sa ilang mga aktwal na code. Kaya ako pagpunta upang pumunta magpatuloy at buksan up dom-0, kung saan ay isang napaka-simpleng halimbawa dito na kung ako mag-zoom in lamang na ito ay may input dito para sa akin. At ako pagpunta sa magpatuloy at i-type sa "David" para sa aking pangalan at i-click ang Isumite. 

At pagkatapos ay, kahit na ang uri ng mura, ako na ito ay may prompt na nagpa-pop up na nagsasabing, "hello, David!" Kaya ito ay uri ng tulad ng ating "hello, world" na ginawa namin sandali bumalik sa C at kahit na sa PHP dahil ako na magilas outputted aking pangalan. Ang maaari kong gawin pangalan ng ibang tao dito. Maaari ko lamang baguhin ito sa, tulad ng, Hannah, i-click ang Isumite. At sa katunayan, ang maliit na pop-up na pagbabago. 

Ngayon, ang mga pop-ups ay isa sa mga pinaka-inabuso tampok ng web. At sa katunayan, bumalik sa araw pop-up blockers ay dumating sa katanyagan dahil ikaw Gusto pumunta sa ilang website-- marahil ng isang kahina-hinalang place-- na gagawin pagkatapos ay bigla simulan peppering iyong screen may isang buong grupo ng mga pop-ups. At kaya ito kakayahan na mag-pop up bintana sa harap ng gumagamit ay hindi pa lalo mahusay na natanggap sa pamamagitan ng sangkatauhan. Kaya na ang dahilan kung bakit nakikita mo ito maiwasan bagay, na lamang ang gumagawa ang buong bagay na pangit. Kaya kami ay pagpunta sa kailangan ng isang mas mahusay na paraan upang i-prompt ang user. Ngunit sa ngayon, na parang trabaho. Kaya lang intuitively, kung ano anyong nangyayari dito? Ko sige, at i-click ang Isumite, at pagkatapos ay isang bagay ang nangyayari, malinaw. Ngunit ano ang hindi nangyayari na hindi mangyayari huling linggo anumang oras ako nag-click Isumite? Ano ay hindi mangyayari sa screen? Paumanhin? I-reload. Ang URL ay hindi baguhin sa lahat. Sinabi ko na ito ay dom-0, at ako pa rin sa dom-0. Karaniwan, nais naming makakuha ng nagbago sa ilang iba pang URL, tulad ng register.php o mga katulad. 

Ngunit kahit na bale-walain ko ang bagay na ito sa pamamagitan ng pag-click ang OK, paunawa na ang URL mananatiling ganap na ilagay. At, sa katunayan, kung ako ay isang maliit na may pag-aalinlangan, hayaan mo akong magbukas ng Chrome. Hayaan akong buksan ang tab na Network. At napansin ito ay blangko sa ngayon. Hayaan akong magpatuloy at muling isumite Maria. Walang network ng trapiko kung ano pa man. Kaya walang HTTP. 

Kaya sa katunayan, kung ang hitsura ko sa source code para this-- hayaan mo akong isara ang window at pumunta sa View Source. Kawili-wili. Mukhang mayroong ilang mga bagong tag, kasama ng mga ito script. Kaya sabihin tumagal ng isang pagtingin sa loob ng CS50 IDE eksakto kung ano ako ay nagpadala sa gumagamit. 

Kaya dito is-- sabihin tumutok sa lamang ang HTML. Narito sa ilalim na kalahati ng dom-0.html. At mapansin na ito ay nakuha ng isang pamagat, isang ulo tag, isang katawan tag, isang form na tag. Ngunit ano ang jumps out sa iyo sa lalong ibang-iba, lalo na kung na sa iyo kailanman nakasulat sa iyong sarili ang anumang JavaScript. Hayaan akong mag-scroll sa isang maliit na sa kanan dito. Mayroon akong isang input, isa pang input para isumite. Mayroon akong isang ID, na kung saan ay uri ng bago. Ngunit kami ay hindi makita sa CSS. Ano pa ay talagang bago? Oo? Nice. 

Lahat tama. Kaya kung saan sinasabi nito onsubmit, paunawa kung ano ang tila upang sundin. Ito ay isang katangian sa HTML katawagan. Ang halaga nito ay ang naka-quote na string dito. At ito ang hitsura ng isang maliit na kakaiba sa unang tingin. Ito ay hindi HTML. Ito ay hindi CSS. Ito ay, tulad ng maaari mong hulaan, JavaScript. Kaya tila na nakapaloob sa mga ito web page na ito ay isang function na tinatawag batiin. At ako inferring na lang dahil sa ito ay isang salita, binabati. Ito ay nakuha ng isang bukas paren, malapit paren, semicolon. Mukhang isang C function, ganito ang hitsura ng isang function na PHP. 

At sa katunayan, ito ay pagpunta sa maging isang function JavaScript. Pagkatapos ako bumabalik false. Darating kami pabalik sa na sa ilang sandali lamang. Ngunit kung saan tinukoy ay ang function na ito? Well hayaan mo akong mag-scroll pataas sa itaas ng mga file. At kahit na ito ay isang mahabang linya, ito ay relatibong tapat. Hayaan akong mag-zoom out dito at focus sa mga apat na linya. 

Kaya sa JavaScript, lamang tulad ng PHP, ikaw lamang sabihin nating, sa literal, ang salitang "function," ang pangalan ng function, at pagkatapos ay panaklong sa anumang arguments-- walang argumento sa kasong ito. At walang bumalik uri sa JavaScript, tulad lamang ng PHP. Kaya ito ay isang maliit na looser kaysa sa C. Open kulot suhay, malapit kulot suhay. Nakapaloob sa JavaScript ay isang function hindi isang inirekumendang function-- ngunit ang isang function na tinatawag na alerto na ang tanging layunin sa buhay ay upang hilahin pataas na medyo mainit ang ulo prompt na nakakita kami ng isang sandali ang nakalipas. 

Ngayon na ito ay uri ng isang katiting. Anong nangyayari dito? Kaya simulan upang ipaalam i-highlight ang lahat ng bagay dito. Iyon ang parehong argument upang alertuhan. At ano ang nangyari? Ito lamang ang hitsura ng isang string. At ito ay lumiliko out, hindi tulad ng PHP at hindi katulad C, hindi ito bagay sa JavaScript kung ikaw ay solong quote o double quotes. Magagawa nilang katumbas. At lantaran, ito lang popular na mga araw para sa mga programmer JavaScript upang laging gamitin ang solong quote para sa ilang kadahilanan. Ito lang ang bagay na gawin. Ngunit maaari naming gamitin ang double quotes, pati na rin. 

Kaya plus ay isang bagong character. Ngunit sa mga mo na na tapos na ito bago, ano ang ibig sabihin plus? Oo. Pagdugtungin. Kaya nakita natin ito sa PHP. Mayroon lamang ang tuldok operator sa PHP na ay pagdugtungin ang dalawang string magkasama. C ay isang sakit sa ulo upang gawin ito. Hanapin mula pset anim, na kung saan ay isang espesyal na sakit sa ulo, na iyong nais na gamitin ang isang bagay tulad ng strcat matapos paglaan ng memory sa stack o magbunton. Ikaw ay upang tumalon sa pamamagitan hoops lamang upang pagdugtungin ang dalawang string. Sa JavaScript, ito ay sobrang simple. Gamitin lang ang mga plus operator sa pagitan nila. 

Kaya ang complex na-hinahanap parang ang bagay na ito dahil sa dulo ng ito buong string, ako lamang pagdugtungin sa isang exclamation point. Kaya kung ano ang pop up ay "hello, David," "hello, Hannah," "hello, Maria," at iba pa, malinaw na na gitnang bagay sa pagitan ng dalawang pluses dapat bigyan ako ng access sa kung ano? Ano ang doon para sigurado? Oo. Kaya kailangan ko ng pagpapanggap dito ang sagutin ang kanilang mga pangalan, right? Kaya ang kanilang pangalan pop up sa final resulta. Kaya kung ano ang ibig sabihin nito? Well, iminungkahi ko nang mas maaga sa na larawan na ang tinatawag na DOM na ito ay may mga espesyal na root element paraan ng hanggang top tinatawag na dokumento. At ngayon, ito ay lumiliko out, na pagpunta upang maging isang espesyal na global variable sa JavaScript, na binuo sa kung saan ay isang buong grupo ng mga kapaki-pakinabang na pag-andar. Kabilang sa mga kapaki-pakinabang na pag-andar ay ang kakayahan upang makakuha ng sa anumang descendant node. Ang mga parisukat o parihaba o ellipses ay lamang nodes sa isang puno, kaya na magsalita. 

Kaya ito ay lumiliko out na nakapaloob sa Dokumento object JavaScript ni ay isang function, kung hindi, na kilala bilang isang Ang pamamaraan, na tinatawag getElementById. Ang syntax para sa pagtawag isang function sa JavaScript na sa loob ng isang bagay o isang variable ay may lamang ang notasyon na tuldok. At nakita namin ito sa C ano ang struct syntax. Makikita mo ito sa pset pitong, uri ng, uri ng, kapag nakita mo ang CS50 :: query. Ang colon colon sa PHP ay isa pang paraan ng pagtawag ng isang function na sa loob ng ilang mga bagay. 

Ngunit sa ngayon sa JavaScript, ito ay isang tuldok lamang. At kaya ang function na ito, mabuti sapat, uri ng sabi ano does-- makakuha ng ito elemento ng ID. Ang isang sangkap ay lamang ng isa pang pangalan para sa isang tag o node sa DOM. At kaya makakuha elemento ng ID "pangalan" nangangahulugan this-- narito ang aking HTML. At batay sa mga ito HTML, kung ano node o kung ano ang HTML tag ako pagpunta sa programming na kamay pamamagitan ng pagtawag sa document.getElementById? 

Oo, eksakto. Pupunta ako upang makuha ang input element nandoon na ang ID ay "pangalan." Kaya tiyak, maaari mong mag-isip ng mga function na ito, getElementById, bilang isang paraan ng pagbibigay sa likod ng isang pointer sa mga tiyak na node sa tree. Hindi namin ay may inilabas na ito puno, ngunit ito ay isang paraan ng pagkuha ng access sa na rectangle o na parihaba sa pamamagitan ng katangi-tangi iugnay ito sa pamamagitan ng ID nito. 

Ngayon, ito kapaki-pakinabang kung bakit? Well, ito ay lumiliko out na sa sandaling mo na nakuha na node, na parihaba mula sa litrato, na node sa loob ng mga ito, naman, may isang buong grupo ng mga properties-- mga pares ng key-value o data, isa sa kung saan ay tinatawag na halaga. Kaya literal, ito ay uri ng isang katiting na ipaliwanag ang buong bagay. Ngunit sa pagtatapos ng araw, lahat ng ito ay ay magbibigay sa iyo ng isang string na nag-type ang gumagamit sa sa hierarchical fashion. Ngunit hindi ko gusto ang isang pares ng mga bagay na ito. O sa halip, mayroon pa rin ang ilang mga pag-usisa. Ang lahat ng iyon ay tila upang gumana. Bakit sa tingin mo ako ay nagbalik false pagkatapos ng pagtawag batiin? Ang hitsura ng isang maliit na pangit, na Mayroon akong dalawang mga pahayag doon na pinaghihiwalay ng mga semicolon. Hulaan mo. Kung tinanggal ko ang return false, kung ano maaaring mangyari, katutubo lamang? Paumanhin, sabihin muli? 

Buksan ang isang bungkos ng Windows. Kaya potensyal marahil ng isang bagay tulad na mangyayari. Ano pa? Maaaring magsumite ng kahilingan kung saan? Upang sa parehong pahina. Kaya, sa katunayan, iyon ang na ang mas malapit ang sagot dito, kahit na, hindi katulad sa nakaraan, na hindi ko na hindi tinukoy na mga katangian ng pagkilos, na kung saan ay karaniwang may sa gawin. Ginagawang out mayroong isang default. Kung hindi mo tukuyin ang pagkilos, ito ay tulad ng sinasabi quote, magpanipi o ang pangalan ng file mismo, na sa kasong ito gagawin maging tulad dom-0.html. Lamang ng uri ng Ito ay natukoy, o sa halip ipinahiwatig. 

At kaya kung hindi ko gagawin ito paunawa, hayaan. Hayaan akong i-save ito. At dahil ko na return false. Hayaan akong bumalik sa ito halimbawa at lakas reload ito. At baka may nakita akong magmungkahi ito sa CS50 Talakayin ang isang grupo ng mga beses. Kung ang anumang bagay kailanman kumikilos funky at ang browser ay hindi gumagana tulad ng iyong inaasahan, malimit makikita mo gusto upang i-hold Shift at pagkatapos ay i-click ang I-reload. Iyon ay lakas sa bawat file upang i-reload at hindi gamitin ang mga lokal na cache ng iyong browser o kopyahin kaya na ngayon, hayaan mo akong magpatuloy at buksan ang aking inspector, ang tab na Network. Pupunta ako sa i-click ang Panatilihin Log dahil ako ayaw ito upang tanggalin ang mga hilera isang beses ako makakakuha ng whisked malayo sa ibang dako. 

Hayaan akong magpatuloy dito at type sa Andi, i-click ang Isumite. Lahat tama. Na parang tulad ng inaasahan. Sinasabi nito "hello, Andi." Hayaan akong i-click ang OK. Kawili-wili. Abiso na ang mga pahina ay nagbago, kahit na sa orihinal na pahina. Pansinin ang URL uri ng nagbago. Ito ay nagdagdag ng isang tandang pananong, na kung saan ay karaniwang isang tagapagpahiwatig na sinubukan namin upang isumite ang isang bagay. At pagkatapos ay sa ibaba, kahit na mas malinaw, dito ay ang tunay na mga HTTP kahilingan, kung saan nakuha ng isang tugon ng 200 na dinala ako pabalik dito. 

Kaya ito ay hindi kung ano ang gusto naming gawin, di ba? Dahil hindi ko nais na i-reload ang buong pahina. Sa halip ko nais upang bumalik false upang short circuit default na pag-uugali ng browser, na kung saan ay, of course, upang isumite ang pahina. 

Kaya sabihin kumuha ng isang pagtingin sa isang marginally mas mahusay na halimbawa. Ito ang dom bersyon ng isa. At mapansin ang mga sumusunod. OK lang kung hindi mo grok ang lahat ng mga linya ng code. Ngunit ano ang panimula ng iba't ibang tungkol sa pagpapatupad na ito? Kukunin ko magtadhana ito behaves sa pareho, ay ang parehong bagay. Ano malinaw naman ay ginawa ko na naiiba? Oo? 

Madla: [hindi marinig]. David MALAN: Oo. Kaya ang function ay tinukoy differently-- sa ibang salita, ang mawala sa form, hanggang doon sa 7-- linya o sa halip, line 8-- hindi na ang mayroon ako ang onsubmit attribute. Sa nakaraang halimbawa, ako ay na ito. At pagkatapos ay ako literal na sinulat ng aking code dito. At pagkatapos ay sinabi ko bumalik false. At kung hindi ito ay kuskusin ikaw pa sa maling paraan, ito ay dapat magsimula sa insofar bilang, tulad ng sa HTML, kapag sinimulan namin sa mga co-makisalamuha ito sa CSS sa mga katangian ng estilo, Sinimulan lamang ito upang makakuha ng isang maliit magulo o pakiramdam ng isang maliit na mali. 

Katulad dito, kung simulan mo sa pagkuha ng HTML, at awtomatikong pagkatapos mo gumawa ng mapa ang ilang mga code ng JavaScript sa gitna ng isang naka-quote na string, ito ay hindi magiging masyadong maintainable. Right? Ito ay hindi kahit halata sa unang lugar kung saan ang JavaScript code ay. Kaya magiging talagang maganda bilang isang prinsipyo ng mas mahusay na disenyo, panatilihin ang aming HTML ganap na ipaalam hiwalay mula sa aming JavaScript. 

Kaya upang gawin iyon, kung ano na namin tapos dito ay ang following-- ginagamit namin lamang ang HTML para sa markup lamang. At kaya sa bersyon ng isa sa mga ito, ang lahat ng Ako ay may ay isang form na may isang natatanging ID. At pagkatapos ay down na dito, ako sinasamantala ng isang espesyal na tampok ng JavaScript kung saan ang maaari kong magkaroon ng kung ano ang tinatawag na isang hindi nakikilalang function. Kaya ito ay lumiliko out na kung ang tawag ko document.getElementById ng 'demo' na tulad ng pagbibigay sa akin ng isang pointer sa ito node sa aking mga puno, ang mga elemento na form, kaya na magsalita. 

Ngayon, alam ko na lang mula sa pag-alam ng isang piraso ng HTML ngayon kami ay pagkakaroon ng basahin ang ilang mga online sanggunian, na sumusuporta sa isang form na elemento ang maramihang mga listeners-- kaganapan sa ibang salita, ang mga laundry listahan ng mga kaganapan tagapakinig na nakakita kami ng isang sandali ang nakalipas. Alam ko mula sa pagbabasa ng mga babasahin na onsubmit ay isang wastong kaganapan tagapakinig para sa isang elemento form. 

Kaya minsan alam ko na, ito ay ligtas para sa akin upang gawin ang following-- kumuha na node mula sa puno, ang mga elemento na form, at ma-access ang kanyang tinatawag na onsubmit property. Kaya ang tuldok ay nangangahulugan lamang ito ay isang ari-arian, tulad ng isang espesyal na halaga sa loob ng mga ito. At kung ano ang uri ng data na ako pagtatalaga ng, tila, upang onsubmit, na kung saan ay epektibo ng isang variable sa loob ng na node sa tree? Ito ay isang patlang sa loob ng na struct. Ano ang mga uri ng data? 

Ang isang function, oo. Kaya ito ay lumiliko out na ito ay may PHP. At kahit na kami ay hindi magsasabi sa iyo tungkol dito, C ay mayroon ding mga payo function, ang kakayahan upang pumasa at magtalaga ng mga pag-andar bilang mga halaga ng variable 'sa kanilang sarili. At hindi namin pagpunta umatras pabalik sa C. Ngunit sa ngayon, ito ay lumiliko out na sa kanang gilid dito, kahit na ito hitsura ng isang maliit na funky, nangangahulugan ito, hey browser, bigyan ako ng isang function. Hindi ako pupunta sa kahit abala pagbibigay ito ng isang pangalan dahil literal ako pagpunta sa italaga sabihin tumawag ito ang address ng function na ito agad sa onsubmit. Sa ibang salita, browser, hindi mo na kailangan upang malaman kung ano ang tinatawag na ito function. Kailangan mo lamang na malaman kung saan ito ay sa memorya. At kaya ito suffices lamang upang magkaroon ng isang katumbas sign doon at hindi na mag-abala sa pagbibigay ng pangalan na ito, tulad ng foo o batiin o anumang iba pang mga salita. At ngayon ito ay lamang ng isang pangkakanyahan bagay. Maaari ko bang ilipat ang kulot suhay papunta the-- sorry-- susunod na linya tulad namin ay karaniwang gawin CS50. Ngunit sa JavaScript, ito ay talagang stylistically karaniwang upang panatilihin lamang ang kulot suhay, ang unang isa, na sa unang linya. 

Ngunit mula ngayon, may wala na interesante. Na bukas kulot suhay lamang demarkasyon sa simula ng aking function. Ang function na ay ngayon magkapareho, maliban na hindi ko na Kasama ang return false sa loob ng function na ito. Dahil ito ay lumiliko out-- at gagawin mo lamang malaman na ito mula sa pagbabasa ang documentation-- na kung ang pag-andar na iyong itinalaga sa onsubmit handler nagbabalik false, ang browser lamang ang nakakaalam at sumasang-ayon hindi upang isumite ang form sa isang server. Kung ito ay nagbabalik ng tunay, ito ay isumite ito sa isang server para sa mga kadahilanang kami makita kapaki-pakinabang sa ilang sandali lamang. 

At pagkatapos ay ang semicolon pagkatapos ng ang kulot suhay doon lamang nangangahulugan Tapos na akong pagtukoy sa mga function. Alam mo kung ano ang tawag sa lalong madaling habang naririnig mo ang isang pagsusumite. Lahat tama. Ito ay arguably uri ng pangit pa rin. Kaya ano pa ang maaari naming gawin? 

Well, ito ay lumiliko out at pagkatapos ay sa bersyon ng dalawa, kung saan ay ang last-- at bibigyan namin ng sulyap lang sa ito. Sa ang panganib ng paggawa ng ito hindi maganda, ito ay lumiliko out na mayroong isang library in mundo na tinatawag jQuery. At jQuery ay isang napakabilis popular JavaScript library syanga popular na ang karamihan anumang JavaScript-- ito ay hindi bihira para sa mga tao upang lituhin jQuery sa JavaScript. Bakit? Mismo JavaScript ay tunay maligoy na paraan ng paggawa bagay- document.getElementById, dadadadadada. Humantong sa pagkakaroon ng napaka mahaba ang linya ng code. 

Kaya ang isang kapwa may pangalang Juan Resid, na ang tunay na gumagana para sa isang startup up ng mga araw, ay dumating out na may ganitong taon library nakalipas na maraming tao ang nag-ambag na tinatawag jQuery na ang mga pagbabago ang syntax sa sumusunod na paraan. At kaya lang na nakita mo ito, dahil bibigyan ka walang paltos makita ang mga ito kung ang paggawa ng isang huling proyekto web-based, ito ay ang katumbas na paraan ng pagpapatupad na parehong function gamit ang mga espesyal na library. 

Ngayon, sa halip na mang-ulol ito bukod sa kabuuan nito, Tingnan lang natin ang ilang mga pattern ipaalam. Syntax na ito ay lilitaw upang magkaroon kung gaano karaming mga hindi kilalang function o hindi mailarawan function o AKA lambda function? Two, tama? At alam mo na, kahit na hindi ka super umaliw sa mga ito, sa pamamagitan lamang ng mga katotohanan na ito sabi function (dalawang beses). 

At ito ay lumiliko out na kung ano ang code na ito ay doing-- at kami ay sumangguni sa online na mga sanggunian, sa huli, para sa ilang mga tulong sa mga ito. Ito ay nangangahulugan lamang na kapag ang dokumento ay handa na, sige at magrehistro ang mga sumusunod na pag-andar bilang ang isumite handler para sa mga HTML element na ang natatanging mga ideya ay demo. At pagkatapos ay, kapag nangyari iyon, tumawag ito ng dalawang linya ng code. At ito ay, nakalulungkot, ang isang mas maligoy na paraan ng pagsasabi bumalik false. At nabanggit namin ito dahil lang makikita mo ang code na ito sa online. At ito ay wala na sa pamamagitan ng daunted. Ngunit sa halip, panatilihin sa isip na kung ano ang magiging karaniwan sa JavaScript ay ito tularan. At kaya na ang dahilan kung bakit ipinapakita namin ito para sa ngayon. Lahat tama. Kaya nang walang tirahan masyadong marami sa na syntax, ay may anumang mga katanungan sa mga halimbawa o mga ideya kaya ngayon? Lahat tama. Kaya natin gamitin ito para sa isang bagay na kapaki-pakinabang ipaalam. Paggawa ng isang web page na lang sabi ni hello, gayon ay hindi lahat na kawili-wili, hindi underwhelm. Isa na ito ay hindi pagpunta sa maging maganda, ngunit ito ay pagpunta sa gawin ang isang bagay na kapaki-pakinabang. Hayaan akong bumalik sa aking direktoryo dito at magbukas ng, sabihin nating, form-0.html. 

Kaya ipagpalagay na ito ay ang freshman nasa loob ng lunsod sports page registration nang walang anumang CSS o anumang pang-unawa ng mga disenyo. At gusto ko upang magpatuloy at magrehistro dito ng isang password. At ako pagpunta sa sumang-ayon sa mga tuntunin at kundisyon at i-click ang Register. At ngayon sinasabi ng website, "Ikaw nakarehistro! (Well, hindi tunay.) " Na parang tulad ito nagtrabaho, ngunit hayaan mo akong magpatuloy at pilitin reload. 

At hayaan mo akong sabihin, hindi, hindi mo kailangan ang aking aktwal na mga email address. O siguro kami lang sabihin mail sa doon. Password ay, tulad ng, 12345. At pagkatapos, dahil lang ako isang tanga, ngayon ito ay 123456789. At hindi ako pagpunta upang suriin ang iyong kahon. 

Hmm. Lahat tama. Kaya may ilang mga pagkakataon para sa pagpapabuti dito. At alam mo, o makita sa pset pitong, na maaari mong isulat code-- at magkakaroon ka na magsulat code sa PHP-- upang ipagtanggol laban sa mga uri ng mga user error dahil ang user malinaw Matagal nang hindi nakipagtulungan. At siya ay hindi na ibinigay sa iyo ng lahat ng mga mga halaga na gusto mo o kahit na sa format na iyong nais ang mga ito. Kaya makikita mo sa pset pitong na maaari naming tiyak na magkaroon ng ilang mga kung ang mga kondisyon na sabihin kung ang email address ay hindi isang username@something.edu, maaaring namin lamang sabihin ng paumanhin at humihingi ng paumanhin para sa gumagamit marami, tulad ng maaari kang maging sa pset pitong. O kung hindi sila ay may tsek na kahon, lumiliko out sa PHP, maaari mong tuklasin na, masyadong. At tiyak kung ang mga password Hindi tumutugma ang bilang sa register.php para sa pset pitong, maaari mong tuklasin na. Ngunit iyon lamang ang isang sakit sa leeg sa na ngayon sila kahilingan sa amin upang pumunta sa lahat ng mga paraan sa server. Ang user ay alam ng mga error. At hindi bababa maliban kung gumamit ka ilang mga may interes na pamamaraan, ngayon ay mayroon sila upang mag-click sa arrow sa likod. Hindi ba ito ay nice, tulad ng isang pulutong ng mga website sa araw, kung nagkaroon ka ng mas agarang feedback, agad? 

Sa ibang salita, hayaan mo akong pumunta sa bersyon isa, na kung saan ay magiging walang prettier. Ngunit ito ay may tampok na ito. Malan, 12345, 123456789, hindi pagpunta sa check ang kahon, Register. Ang mga password ay hindi tumutugma. Kaya kahit na ang mga pop-up ay ugly-- maaari naming palitan ito sa huli may isang bagay tulad Bootstrap, na kung saan makikita mo sa pset pitong ay isang napaka-tanyag na library-- ginawa ko nahuli na ang mga password ay hindi tumutugma. Lahat tama. Well, hayaan mo akong ayusin na bilang ng gumagamit. Hayaan akong magpatuloy at sabihin 12345, 12345. Hindi pa rin pagtingin sa mga kasunduan. Kailangan mong sumang-ayon sa tuntunin at kundisyon. Kaya bakit? 

Kung kami ay posited na na may isang paraan, at ko na kinakailangan namin sa inyo sa pset pitong sa tiktikan error kondisyon tulad nito server-side, bakit pa ako abala paggawa din ito sa JavaScript? Ano ang isang argument sa pabor ng pagdaragdag ng kung ano ang ikaw ay tungkol sa upang makita ang bilang some-- mayroong mga karagdagang kumplikado. 

Siguro ay walang nakabaligtad. Ano ang maaaring ito? Madla: [hindi marinig]. David MALAN: Oh, kawili-wili. Potensyal na nagsasamantala. Kaya bang, kung hindi ka na paghawak maling input ng user na malaki, marahil ito ay ang lahat ng mas mahusay na kung ito ay hindi kahit na maabot ang iyong mga server. Gusto ko uurong doon at sabihin nating, dapat mong malamang ayusin pareho ng mga problema. Ngunit iyon lamang ang fair. Ano pa? 

Madla: [hindi marinig]. 

David MALAN: Oo. Ang code na ito, tulad ng sinabi namin bago, ay naisalin na sa client-side. Ito ay hindi abala ang server, na nangangahulugan na ito ay hindi epekto ng pag-load o kapasidad ng server. At ngayon, para sa maliit na gulang ako, ito ay walang makabuluhang epekto dahil ako ay may isang user sa ngayon. 

Ngunit kung ikaw ay anumang website ng disenteng laki, lalo na ang pinakamalaking, tulad ng Facebook, mas marami ang maaari mong panatilihin off tao ng iyong server ang mas mahusay na dahil ang isang server, siyempre, may takda na halaga ng RAM lamang, hangganan bilang ng gigahertz, hangganan bilang ng mga bagay-bagay ito ay maaaring gawin sa bawat yunit ng oras. Kaya kung may mga karagdagang mga tao sa mundo naaabot ang iyong server, sinasadyang pag-log hindi tama, tulad ng mabuti kung ikaw maaaring panatilihin na load off ng iyong server. Plus, lalo na sa isang mobile device-- kung na sa iyo kailanman mag-log sa my.harvard o NetID o ang katulad Yale, mayroong ito ang latency na may maraming mga mga website tulad ng na kung saan ito ay tumatagal, tulad ng, isang mapahamak segundo o dalawang kung minsan. At pagkatapos, aking Diyos, kung mistype mo, pagkatapos ay kailangan mong pindutin ang bumalik at gawing muli ang mga ito. Kaya may latency, lalo na sa mas mabagal na mga koneksyon ng network. Ngunit JavaScript, dahil ito ay tumatakbo sa mga client at hindi kailangan upang bumalik-balik sa kabuuan ng isang potensyal na mabagal na internet koneksyon, maaari kang makakuha ng ang halos agarang feedback. 

Kaya tingnan natin ito ipaalam. Hayaan akong buksan up form-0 at tingnan ang HTML dito. At sabihin makita kung ano ang nangyayari sa. Ito ay isang form na action ay register.php. Lamang ako gamit makakuha kaya na maaari kong makita ang URL. Ngunit para sa mga password, gusto namin tiyak na nais upang baguhin ito upang mag-post sa katotohanan. Narito ang isang input field ng uri ng teksto. Narito ang isa pang input larangan ng type ng password. Narito ang, kung hindi mo pa nakikita, isang input checkbox uri ng. 

Ngunit walang JavaScript dito kahit ano pa man. Ito ay lamang ng HTML na papunta sa register.php. Ngunit sa isang bersyon, kung saan ako nagsimula upang makakuha ng mga pop-ups, sabihin makita kung ano talaga ang mangyayari dito. Sa bersyon ng isa, ano Pupunta ako sa see-- ko naisip kaya kong stall sapat na may sapat na mga salita, ngunit ako ran out. 

Sa bersyon one-- doon pumunta kami. Sa bersyon ng isa, mapapansin ang following-- at ito ay hindi ang pinakamahusay na pagpapatupad, ngunit ito ay ang aking unang. Pansinin na sa ibaba ng form, mayroon akong isang script tag. At isang script tag ibig sabihin nito, hey, browser, dito dumating ang ilang mga code sa, kadalasan, JavaScript. At ngayon, pansinin kung ano ang ginagawa ko. On line-- Maaari ko bahagya basahin it-- line 32, sinasabi nito, var form-- kaya ninyo ako isang variable na tinatawag na form. At pagkatapos ay makakuha document.getElementId ng "registration." Ano ito? Well, hayaan mo akong i-rewind up dito. At pansinin, ah, Nagbigay ako ng mga elemento ng form isang arbitrary ngunit mapaglarawang ideya ng registration. Kaya ito ay nagbibigay sa akin ng isang variable na ay nagbibigay-daan sa akin upang sunggaban na node, na parihaba sa tree na tinatawag na form. form.onsubmit paraan, hey browser, magrehistro ng isang kaganapan tagapakinig sa form na ito. Sa ibang salita, kapag ang form na ito ay isinumite, gawin ang sumusunod na code. Hindi ito kailangan ng isang pangalan dahil bakit kailangan mong malaman ang pangalan mo? Kailangan mo lamang na malaman kung ano ang dapat isakatuparan, samakatuwid ito ay isang di-kilala o lambda function. At na function ay lahat ng mga linyang dito. At ngayon, upang maging matapat, kahit na kayo Hindi maaaring magkaroon ng kailanman nakasulat JavaScript bago, ito lang ang C at PHP logic. Kaya kung form.email.value == "" - kaya kung ang field email ay blangko, sumigaw sa mga user na may "ay dapat mo magbigay ng iyong email address. " Iba Pa kung form.password.value ay blangko sumigaw sa gumagamit, "Dapat kang magbigay ng iyong mga password." 

Iba pa kawili-wili lohikal, kung form.password.value hindi pantay form.confirmation.value-- kung saan ginawa pagkumpirma mula sa darating? Hayaan akong i-rewind. Well, ako na tinatawag na input na ito field here password. At tinawag ko ang isang ito dito confirmation. Ay maaaring magkaroon ng tinatawag na ito password dalawa o ano pa man. Lamang ako ng lohikal checking na ang mga dalawang ay ang parehong. Else-- ito ay lumiliko out na ito ay si Ginoong Boole again-- isang Boolean halaga, ang check box. Kaya kung sinasabi ko, exclamation point-- kung hindi form.agreement.checked, sumigaw sa mga gumagamit pati na rin. 

Kaya ang syntax na ito makikita mo ay laganap sa JavaScript, kung saan ikaw ay may ganitong may mga tuldok pagtatanda. Magsisimula ka sa isang bagay dito. Sumisid ka sa mas malalim sa isang upang isang ari-arian tulad ng password. At pagkatapos mong makakuha ng sa kanyang aktwal na halaga. At muli, dito ay ang input. Narito ang password pangalan. At ang halaga nito ay kahit na ano ang ng tao ay tunay na nag-type sa. 

Kaya sa lahat ng mga ito kaso, ibinalik ko na hindi totoo. Ngunit kung hindi, bumalik ako totoo. At kaya ngayon namin makita ang isang nakakahimok paggamit ng kapag Gusto mong ibalik false na itigil ang kung ano ang mga gumagamit ng paggawa at gumawa ng kanya pumili muli o i-type muli. Kung hindi, bumalik kami totoo. 

At hayaan mo akong ipakilala ang isa iba pang mga variant ng ito lamang upang magbigay ng binhi ng ilang-unawa ng mga iyon. Well, sa bersyon 2 ng ito, form-2-- Kailangan kong gawin ito na may isang wave ng isang kamay. Ito ay, para sa mga curious, ang jQuery bersyon, sa mga ka na maaaring nais na wiligan sa partikular na library. Ngunit ni start-- at anumang mga katanungan ipaalam? Hayaan akong i-pause para sa sandaling ito dahil na noon ay mabilis at ng maraming. 

Ngunit ang magandang bagay dito ay na ang lahat ng code ay medyo marami ang parehong. Ang bagong bagay-bagay ay kung ano ang dom? Ano ang mga parihaba? Ano ang mga nodes? Ano ang isang hindi nakikilalang na function? Ano ang isang kaganapan handler? Pero thankfully, karamihan sa mga iyon ay lamang buong bilog mula sa, sabihin nating, linggo zero. Lahat tama. Kaya ang isang bagay na bahagyang mas kawili-wili? Well, una sa lahat, ipaalam sa akin pumunta magpatuloy at buksan up ang Google Maps. At mapapansin mo na para sa isang sandali, sa ikalawang hati, paunawa kung ano ang mangyayari kapag Click ako mabilis sapat. At ito na koneksyon sa Harvard ay kaya mabilis na hindi mo talaga mapansin ito. Ngunit ano ang gagawin mo uri ng uri ng makita kung ako mag-click at i-drag talagang mabilis? Sa mga ka nanonood online, kung ikaw ay mabagal ito sa bilis 0.5x, maaari mong makita na ito ng mas mahusay. 

Ano ang nangyayari lang bago ako nag-click at drag? Hayaan akong subukan here-- gawin sa akin ibang bagay, tulad ng 90210. Halina't malayo. Iyon ay talagang mabilis, masyadong. Paano ang tungkol sa Disney World? Mayroon kaming pumunta. SIGE. Ano ang nakita mo para sa isang ikalawang hati? Basta, tulad ng, mga parisukat, di ba? Placeholder para sa tile? 

Well, kung ano ang nangyayari sa dito? Google Maps ay isang magandang halimbawa ng ito teknolohiya na tinatawag na AJAX. At ito ay kung saan magsisimula kami upang gamitin ang JavaScript sa isang partikular na kaakit-akit na paraan. Bumalik sa araw, nagkaroon ang website na ito na tinatawag na MapQuest. At dapat kong kinuha ng isang screenshot ng mga ito mula sa 1990s, kung saan kung nais mong tumingin hanggang dito sa mapa, Gusto mong literal i-click ang isang arrow up sa tuktok na nagpakita sa iyo isang iba't ibang mga square ng mapa. Kung iyong nais na ilipat sa kaliwa, mo nag-click ang isang arrow na nagpakita sa iyo isang iba't ibang mga square ng mapa. At ang ilang mga website pa ring gawin ito ngayon. Ngunit kahit MapQuest may tapat na paraan mas mahusay na, tulad ng Google Maps. 

Sa halip, kung ano ang mas mahusay na mga araw na ito ay mga website na gumagamit ng AJAX. AJAX-- sa kabilang banda na kilala bilang Asynchronous JavaScript at XML, na kung saan ay lamang ng isang magarbong paraan ng sinasabi isang teknolohiya o pamamaraan na ay nagpapahintulot sa isang browser gamit ang JavaScript upang gumawa ng karagdagang mga kahilingan ng HTTP pagkatapos ay nai-load ang pahina. Kaya kung ano ang ibig sabihin nito? Well, magiging uri ng mga nakakainis sa Gmail kung sa bawat oras na gusto mo upang suriin ang iyong mail, literal mo ay nagkaroon ng hit Control-R o Command-R o i-click ang I-reload na button at nais i-reload ang buong pahina darn. Right? Mas flash puti marahil para sa ikalawa. Gusto mong makita ang mga tangang progress bar. At lamang upang makita kung may bagong ka mail, ang buong web page at ang URL ikaw ay nasa ay kailangang i-reload. 

Ngunit iyon ay hindi kung ano ang mangyayari sa Gmail. Right? Kapag kumuha ka ng isang bagong email sa Gmail, ano ang mangyayari sa screen? Ito lamang ay nagpapakita up, di ba? Magically lilitaw lamang bilang isang bagong hilera sa talahanayan. Iyan ang tunay na nagsasangkot ng isang disenteng halaga ng pagiging kumplikado. Sa katunayan, kung sa tingin mo tungkol sa punong ito, na kahit na ay isang simpleng isa dito, Gmail-- at Gusto may sa hitsura sa code na sure-- marahil ay may isang HTML talahanayan o baka isang unordered listahan na ito ay nag-render bawat isa sa iyong mga inbox ng mga email bilang. 

At kaya kung isipin mo na ito doon Puno ito sa memory kapag ikaw ay gamit ang Gmail na ganito ang uri ng uri ng tulad nito, kapag napagtanto Google, ooh, Mayroon ka ng isang bagong email, ito ay hindi nais na muling itayo ang buong puno. Sa halip, ito ay nais na mahanap ang node in ang puno na kumakatawan sa iyong inbox at ipasok lamang ang isang bagong node. 

Kaya lubos na katulad sa pset limang, na kung saan kayo nagkaroon na ipasok nodes sa isang hash table, parehas ang Google ay, sa pamamagitan ng JavaScript code na ito ay nakasulat, pagtawid puno na ito, malaman kung saan ay na bahagi ng window inbox, at pagkatapos ay ipasok ang isang bagong hilera. At isang bagong hilera ay nangangahulugan lamang ng isa o higit pang mga bagong nodes sa isang puno. 

At kaya AJAX ay mga pamamaraan na ito na nagbibigay-daan para sa eksaktong na. Kapag binisita mo ang isang URL, gayunpaman mabaliw katagal ito ay, at sa sandaling ang pahina ay may nai-load, maaari ka pa sunggaban ng mas maraming data mula sa internet-- kung ito ay isang email o ng isang tile ng isang map-- grab ito sa likod ng mga eksena at pagkatapos ay ipasok ito sa pahina upang ang mga tao ay hindi tunay kailangang maghintay para sa mga ito. 

Facebook Messenger ay gumagana sa parehong paraan. Anumang bilang ng iba pang mga websites-- naku, talaga, kahit na ito. Ibig kong sabihin, ito ay, lantaran, uri ng isang nakakainis na tampok ang mga araw na ito. Kung sinimulan ko na naghahanap para cats-- ito ay uri ng isang kakila-kilabot na karanasan ng user. Ito lamang ay nagsisimula na naghahanap para sa akin. Well kung ano ang ginagawa nito? Ang URL ay hindi talagang nagbago mula noong nagsimula ako mag-type. Ngunit ano ang nangyayari sa buong wire-- OK, Hmm interesting. Ano kaya ang nangyari sa buong wire dito lamang ang makakakuha ng weirder. 

SIGE. Kaya hayaan mo akong magpatuloy at siyasatin elemento at pumunta sa tab na Network at subukan na gumawa ito teknikal at mas tungkol sa cats. Habang nagta-type ako, literal, cats at- kung ano ang nangyayari per-- hindi ako pagpunta sa i-click na iyon. Lahat tama. Kaya down na dito, kung ano ang nangyayari sa bawat time ko type ang isang karakter, tila? Tulad ng, mababang antas? Ano ang nangyayari sa bawat isa sa mga character ako type sa aking keyboard? Oo? Madla: [hindi marinig]. 

David MALAN: Eksakto. Ang bawat isa sa mga character na ito ay pagpunta sa Google, nang paisa-isa. Ang mga ito ay gusali up ng isang string sa kanilang mga server na kumakatawan lahat ng bagay ko na nai-type sa gayon ay malayo. At sa bawat oras na nagta-type ako isa pang character, sila gamitin ang kanilang mga lihim na sarsa ng isang algorithm sa paghahanap at malaman kung, ang ibig sabihin niya sa pahinang ito cat o pahina cat ito o ang gusto? Kaya sa ilang mga kahulugan, ito ay nagbibigay sa akin ng isang mas mahusay na karanasan sa na hindi ko kahit na kailangan upang makumpleto ang aking pag-iisip. At sa katunayan, ito ay isang kapaki-pakinabang bagay, autocomplete sa pangkalahatan. Kung ang kanilang mga algorithm ay mahusay na sapat at kung ang aking paghahanap ay malinaw na sapat, Hindi ko na kailangang i-type ang buong salita. Sila ay pagpunta sa sabihin sa akin kung ano ito ay tunay na ako na naghahanap para sa. Kaya kung ano ang tawag Google instant search ay lamang gamit ang AJAX, gamit ang code na nagbibigay-daan sa kanila upang hilingin karagdagang nilalaman sa pamamagitan ng isang web browser sa likod ng mga eksena na ito gamit ang bagong wika, JavaScript. Kaya kami ng ilang minuto ang natitira. At hayaan mo akong tawagan up ang aking buddy Colton up papunta sa entablado, dahil ito ay tila lalo na masaya huling oras upang ipakilala ang isang technology na ang ilan sa iyo may nagpahayag ng interes in para sa pangwakas na proyekto. Naisip namin na gusto itong maging masaya upang dalhin up ng isang volunteer, bagaman, ngayon upang ipakita sa iyo ang isang karagdagan sa ito na nagbibigay-daan you-- oo, Unang nakita ko ang kamay na ito. Lumapit sa up. Tunay na magaling. Magaling. Pupunta ako sa project na ito sa ang screen sa sandali lamang. Ano ang inyong pangalan para sa lahat? 

EFA: Ako Efa. 

David MALAN: Etha? 

EFA: Efa. 

David MALAN: Efa? 

EFA: Oo. 

David MALAN: Nice upang makita ka. Lahat tama. Hayaan akong makakuha ng ito ay handa na. Pumunta ka rito sa gitna na may Colton dito. Ano ay Colton sa kanyang mga kamay ngayon ay isang remote control. Kaya sa halip na lamang tumayo doon sa isang three-dimensional na mundo sa paligid bilang Colton ginawa, ngayon maaari Efa talagang maglakad sa paligid sa pamamagitan ng pagpunta up, pababa, pakaliwa, at karapatan tulad ng isang Nintendo o Xbox controller. EFA: ako pagpunta sa mahulog off ang yugto. David MALAN: gagawin ko ay tumayo humigit-kumulang sa paglipas dito. Ngunit iyon ay isang panganib. SIGE. Kaya't sige, at ilagay ang mga on. Hayaan akong magpatuloy at lumipat sa screen dito. Hayaan akong madilim ang mga ilaw. At Colton, hayaan mo akong dumating stand sa tabi mo. 

Gusto mo bang ipaliwanag dito may mic kung anong ginagawa namin? Ito na. 

COLTON: Oo naman. Kaya ngayon hindi namin loading up ang Oculus, Hulaan ko hindi operating-- operating system, ngunit ang mga pangunahing programa, kung saan Maaari mong ma-access ang lahat ng mga laro at mga apps na sa iyong library. Kaya sa ngayon, ito ang dapat sabihin i-tap ang touchpad upang magsimula. Touchpad ay magiging sa kanang bahagi ng headset. Kaya sige lang at tap-- EFA: Oh, tao. David MALAN: Oo, doon ka pumunta. Ang kalidad Efa ay nakakakita ay mas mataas na kalidad. Ito ay lamang ang Wi-Fi dito. COLTON: Kaya kung ano ang iyong pagpunta sa gusto mong gawin ay tumingin patungo sa tuktok kanan ng screen. Oo, na game sa kanang pinakatuktok. At pagkatapos ay kapag ikaw ay pagpili ito, i-tap muli ang touchpad. Sa tingin ko Dreadhalls nito. At pagkatapos dito ay a-- dito, ipaalam akong hawakan ang iyong mga salamin para sa iyo. 

Kaya lang ako nagbigay sa kanya ng isang controller. Kaya ngayon siya ay maaaring kontrolin ang laro. Maaari niyang ilipat sa paligid at bagay-bagay na tulad ng. Kaya sige lang at tumingin hanggang sa tuktok. Dapat mong makita ang Bagong Laro. Kaya't sige, at maaari mong gawin iyon. Ngayon, dapat mong ma-control iyong sarili sa mga controller, pati na rin, sa lalong madaling ang laro ay naglo-load up dito. Ito ay maaaring maging isang maliit na bit nakakatakot. 

EFA: Ngayon sabihin mo sa akin. SIGE. 

COLTON: Lahat ng karapatan. Kaya kumpirmahin na maaari mong ilipat sa paligid. SIGE. Maaari mong ilipat sa paligid. Perpekto. Kaya't kung tiningnan mo pababa, mayroon kang isang mapa. Ipinapakita sa iyo ng Mapa kung nasaan ka. Maaari mong tingnan ang paligid ng kuwarto. Maaari mong ganap na i-paligid. Oo, eksakto. Umikot. 

Kaya tumingin sa iyong kaliwa. Tingin ko ay may isang bagay na maaari mong pick up sa isang bariles sa kuwarto. 

EFA: Paano ako makakakuha ng mapa sa labas ng paraan? COLTON: Look up. Maghanap lamang. Lahat tama. May pumunta ka. Ngayon magpatuloy at i lamang sa paligid. Kaya tumingin na malayo sa iyong kaliwa. Panatilihin ang paglipat kaliwa. Panatilihin ang naghahanap kaliwa. Tuloy lang. Oo. 

EFA: Oh, na paraan. 

COLTON: Oo. Maglakad patungo ito sa controller. May pumunta ka. Ngayon ang dapat sabihin itong kunin. May pumunta ka. Pulutin. Lahat tama. Ngayon, sabihin makakuha ng kuwartong ito. Sige at maglakad sa na pinto. Kaya ikaw ay pagpunta sa hold-- sinasabi nito matagal ang pindutan upang pilitin ito bukas. Kaya't sige, at pindutin nang matagal ang pindutan. Oo, pilitin buksan ito. Lahat tama. Magaling. Ngayon kami ay naglalakad sa labas ng kuwarto. Kaya ako pagpunta sa iwanan ang natitira up sa iyo at makita kung ano ang iyong malaman. EFA: Hindi ako pupunta sa madilim na silid. Oh, maghintay. Ngayon ay mayroon akong upang pumunta down ang madilim hall? OK, ako pagpunta bumalik [hindi marinig]. COLTON: Lahat ng karapatan. Ang ilang mga higit pang mga item sa pick up. Ganito ang hitsura ng ilang barya. Iyan ay isang lock pick. Kaya kung nahanap mo ang isang naka-lock pinto, maaari mong gamitin iyon. Takot ka ba? 

EFA: Hindi pa. COLTON: OK. 

Pretend-- oo. Magpanggap lamang ikaw talagang nakatayo doon. At kapag isinara mo ang around-- nakuha mo na masanay ito. Ngunit ito ang akma. David MALAN: At habang Efa patuloy na i-play, dahil maaari naming gawin ito sa buong araw, maaari naming ang lahat tip-daliri dito. Ngunit kami ay may dalawang iba pang mga pares, kung nais mong magkaroon ng at i-play. Kung hindi man, kami ay makikita ikaw ay susunod sa Miyerkules. Salamat sa iyo sa aming mga volunteer ngayon. [Palakpakan] 

[MUSIC - "SEINFELD TEMA"] Tagapagsalita 1: well, ako paglalagay ng isang bagong PL mount on. Lamang ako ay nagbago ang OLPF-- 

Tagapagsalita 2: Kaya ano eksakto ang ginagawa mo? 

Tagapagsalita 1: Well, ang bawat isa sa these-- dito, kukunin ko na ipakita sa iyo ang isang ito sa dito. Maaari mo itong makita dito mismo. 

Tagapagsalita 3: palagay ko ako mabuti sa mga ito. Gusto mo pa? 

Tagapagsalita 4: Hindi, ako ay mabuti. [Hindi marinig]. 

Tagapagsalita 3: Hindi, [hindi marinig]. Kumuha ka. Tagapagsalita 1: Iba't ibang kulay. Tagapagsalita 2: OK. Tagapagsalita 1: Kaya sa huli kung ano ito ay ito ay nag-aayos ng kulay of--