[Muzika] 

DAVID Malan: Kjo është CS50. Ky është fillimi i javës së nëntë. Dhe kjo është ajo që do të ketë ishte ditëlindja e 200 Z. Boole. Pra, kjo është miqtë për të cilin ne kemi aludoi mjaft disa herë në lidhje me përdorimin Variablat Boolean vërtetë dhe të rremë, 1 dhe 0 dhe të tilla. Dhe kjo ishte Google haraç të tij sot. Ai do të kishte kthyer 200. Pra, nëse ju dëshironi të bashkohen me ne për drekë CS50, hidhini një sy në linkun në faqen e internetit të kursit. Dhe fytyra të tilla dhe miqtë, si këto ju presin këtu në Kembrixh. Fytyrat si këto që ju presin në New Haven. Dhe, në fakt, Ken në New Haven bërë mirësi atë që quhet një GIF animuar i Elit këtu në një të kohëve të fundit lunch-- një GIF është ende tjetër file format grafik, me të cilën ju jeni familiar-- se duket një diçka të vogël si kjo. Pra, vetëm një sekuencë of-- OK. Askush këtu në Kembrixh është qeshur. Por në New Haven, kjo është me të vërtetë qesharake, apo jo? Në rregull. 

Pra, do të bashkohen me ne atje. Këtu në Harvard, në mënyrë specifike, këtë të mërkurë, në qoftë se ju jeni një i paedukuar mjaft apo fillestar even-- apo edhe të menduarit junior-- e marrjes një kaloni në kompjuterin shkencë, e di se nuk do të të një CS këshilluar drejtë kjo E mërkurë, menjëherë pas klasës në 4:00 pm në kompjuter Ndërtesa shkencë Maxwell Dworkin. Ne do të vënë këtë në Sigurisht e website nga nesër, po ashtu. Donuts, unë jam i tha, do të shërbehet. 

Në rregull. Story-- so funny unë u poking rreth në internet, dhe kam gjetur disa arkivat vjetra i ish web faqen time. Dhe kjo rezulton out-- rreth kësaj kohë, ajo duket shumë kohë pasi që unë mbledh se zgjedhjet UC jeni gati veshje deri përsëri. Kështu që unë u zhvillua për UC, të humbur pa fat. Dhe ndoshta kjo ishte pjesërisht pse. Pra, kjo ishte faqen time në atë kohë. Për disa arsye, mendoj se ishte një ide e mirë, para se të thënë njerëzve çfarë platformë ime ishte dhe pse ata duhet të votojnë për mua, se ata kanë të klikoni për të hyrë për të gjetur se informacion, i cili në retrospektivë është lloj i mërzitur. Unë vërtetë nuk e di se çka ishte. 

Por kjo sigurisht nuk e bëri ndihmojnë fushatën time. Unë gjithashtu gjeti se nga lartë year-- Unë kisha këtë kalendar Muppet. Muppets ishin lloj i në modë atëherë. Apo ndoshta ata nuk ishin. Unë kisha një kalendar Muppet prapa pastaj. Dhe unë mendova se do të jetë e ftohtë për emrin kompjuteri im në rrjetin e Harvardit frogman.student.harvard.edu. Në atë kohë, ne të gjithë e kishin unike Emrat e identifikueshme host. Dhe ju mund të zgjidhni disa kotësi emrin në vend të emrit tuaj. Dhe unë shkova me zhytës për disa arsye. 

Dhe atëherë unë started-- kam kaluar shumë e kohës klikuar përmes këtyre lidhjeve kete mengjes. Dhe kjo ishte faqja ime në lidhje me, e cila tani lloj i duket adorable. Por ajo gjithashtu dëshmon për vetëm sa larg teknologjisë ka ardhur. Unë do të thotë, mbrapa në ditë, një 486 ishte diçka. Këto ditë, është super, super, super i ngadalshëm dhe më pak të mirë se ju mund të keni në tuaj Xhepat e vet këto ditë. Ka më shumë atje se ishte edhe më e turpshme. Kështu që unë do të lënë atë në se. Por kjo ishte ime e parë bastisje në web-- oh, jo. Kjo nuk ishte. Përpjekjet e ime e parë e vërtetë në programimin e web ishte kjo faqe, që unë sapo harruar. Në një moment, kam mësuar se si të të bëjë imazhe të përsëritura sfond. Dhe kështu që kam gjetur këtë tjegulla në fuqi, si lojtar hokej, futboll, dhe e golfit top, ose çfarëdo që është për faqen e internetit Frosh IMS. Dhe kjo ishte në të vërtetë, të vërtetë Projekti i parë web-based mora on-- Unë mendoj se ndoshta i paedukuar mjaft vit, year-- vogël pas marrjes CS50 dhe CS51, një e zakonshme klasat vijuese në. Kam vënë re në kërkim nëpër arkivat se një nga pasardhësit e mi dhe miq, Lee, lloj i ndryshuar të drejtën e autorit për veten e tij. Por kjo ishte me të vërtetë diçka që Unë duhet të zotërojnë ndrojtjen për të. Por në atë kohë, kjo ishte në faqen e internetit e parë, siç kam thënë disa javë më parë, me të cilën mund fillestar regjistrohen për sportet i brendshëm këtu. Dhe kështu kjo rezulton që imazhe sfond sikur që nuk janë të tilla një ide e mirë. Por web ishte e re, dhe ne ishim të gjithë eksperimente. Dhe kjo është ajo që unë me sa duket e bëri në atë kohë. Në rregull. Pra, pa zhurmë më tej, ne të kaloni ingranazhet sot për t'ju dhënë, me të vërtetë, pjesa e fundit që ju mund të gjeni veçanërisht e dobishme për projekte finale por edhe që do të fillojë të bërë gjithë botën e gjerë web të ndjehen pak më të kuptueshme. Në të vërtetë, ne jemi duke shkuar për të futur një më shumë gjuhë programimi quajtur JavaScript që është i ngjashëm dhe të ndryshme në mënyra të ndryshme nga gjuhët e kemi shikuar deri tani. 

Pra C, kujtojnë, është kjo gjuhë hartuar. Ju keni marrë për të drejtuar atë nëpërmjet një përpilues. Ju merrni kodin burimor të kundërshtojë Kodi, ose zero dhe ato. Dhe ata janë zero dhe ato që CPU juaj, Central Processing Unit, në fakt e kuptojnë. PHP, nga ana tjetër, nuk është e një gjuhë hartuar. Kjo është një çfarë? Është një gjuhë interpretuar. Pra, ka disa program quajtur një përkthyes që ka për të lexuar lartë it-- të poshtë, majtas në right-- dhe të kuptoj se çfarë të gjithë Sintaksa juaj ka dhe do të thotë, nëse kjo është një lak ose një kusht ose ndonjë numër tjetër i programimit ndërton. Pra, kjo është një gjuhë interpretuar. 

Atëherë ne kemi prezantuar HTML. Dhe HTML nuk është edhe një gjuhë programimi. Ne do të thërrasë atë çfarë? Një gjuhë markup, e cila është vetëm një lloj i mënyrës së sofistikuar për të thënë atë nuk ka konstruktet programimi si ne pamë edhe mbrapa në ditën e Scratch. Nuk ka sythe. Nuk ka kushte. Me të vërtetë është një gjuhë rreth shënuar deri të dhënat tuaja dhe formatimin atë ose strukturimin atë në një farë mënyre. 

CSS, ndërkohë, në mënyrë të ngjashme jo një gjuhë programimi. Është edhe më e orientuar më aesthetically. Dhe kjo ju lejon të lloj nga gjobë-mendje gjëra të tilla si madhësi font dhe ngjyra dhe vendosja dhe të gjithë se. Atëherë kemi pasur 

SQL. Pra SQL është me të vërtetë një programimi gjuha në një kuptim, megjithëse përshtatura në mënyrë specifike për të bazave të të dhënave. Por edhe pse ne vetëm ju prezantoj me zgjidhni dhe të futur dhe fshini dhe përditësimin dhe disa të tjerë, rezulton nga ju mund të vërtetë shkruaj funksione ose procedurat, pasi ata janë quajtur, në SQL që duken dhe të veprojë mjaft si PHP dhe C funksione. Pra, e di se ata ekzistojnë. Por ne nuk do të shqetësojë edhe me ta ndërsa ne vetëm zeroja sipërfaqe këtu. Dhe pastaj JavaScript, e fundit e Gjuhët tona prezantuar zyrtarisht. Pra JavaScript, gjithashtu, është një gjuhë interpretuar. Dhe ata të njohur, të bëjë ju doni për të dalluar atë me disa karakteristike nga të dy C dhe PHP? Çfarë e bën atë të ndryshme? 

Audienca: Kjo nuk është hartuar. 

DAVID Malan: Thuaj përsëri? 

Audienca: Kjo nuk është hartuar. 

DAVID Malan: Kjo nuk është hartuar. Kështu që, gjithashtu, është interpretuar. Pra, kjo nuk është hartuar. Por që e bën atë një pak si PHP. Por është ende e ndryshme nga PHP në një farë mënyre të mrekullueshëm, të paktën në mënyrën se si ne do të përdorin atë. Po? 

Audienca: Ajo shkon klient-side. 

DAVID Malan: Ajo shkon klient-side, zakonisht. Kjo është me të vërtetë dalluese karakteristike për ne tani. C ishte server-side në kuptimin që ne e bëmë çdo gjë në CS50 IDE. PHP deri më tani ka qenë e server-side përderisa si ajo, gjithashtu, merr interpreted-- jo hartuar, por interpreted-- brenda CS50 IDE, e cila natyrisht është vetëm një server apo servers në re. 

Por JavaScript, edhe pse ju jeni duke shkuar për të filloni të shkruani atë për, të themi, pset tetë dhe ndoshta i fundit projects-- ju jeni do ta djathtë atë në CS50 IDE dhe për të shpëtuar atë në fotografi brenda IDE CS50, CS50 IDE dhe, nga ana tjetër, serverat cloud në të cilën është e priti, nuk janë duke shkuar për të interpretuar apo të ekzekutuar kodin tuaj. Përkundrazi, ajo do të dërgohet në Formulari i pandryshuar deri në shfletuesin. Dhe ajo pastaj do të jetë i IE ose Chrome ose Firefox ose Safari apo çfarëdo që në fakt e interpreton ajo, të lartë e deri në fund, majta në të djathtë. Pra dalluese kyçe karakteristike për sot është se JavaScript është klient-side dhe PHP, për shembull, ka qenë server-side. Tani, kjo ka implikime interesante për, si, pronën intelektuale dhe që në fakt mund të shihni kodin tuaj. Dhe me të vërtetë, ju mund të shkoni në internet dhe të shohim më çdo kodin që dikush ka shkruar në JavaScript. Ndonjëherë është i lexueshëm, nganjëherë është e turbullohet. Por më shumë se në kohën e duhur. 

Pra JavaScript, bukur të mjaftueshme, është super ngjashme, sintaksore, në C. Dhe ashtu si PHP, nuk ka asnjë funksion kryesor. Nëse ju doni të filloni të shkruani Kodi JavaScript, si ju do të shihni sot, ju vetëm të filloni të shkruani atë. Por ajo është, ju do të shihni, veçanërisht dobishëm në kontekstin e shfletuesit web. Megjithatë, pak e mia disclaimer-- zakonisht earlier-- ishte për të thënë se ju mund të gjithnjë Përdorimi sot JavaScript server-side duke përdorur një kornizë dashuroj quajtur Node.js se disa nga aplikacionet e CS50-së janë të shkruara në. Kontrolloni 50 në fakt përdor Node.js. Por ne do të përqëndrohet në JavaScript klient-side këtu në jashtë. 

Kështu që këtu është një grup i kushteve në PHP. Na vjen keq, in-- fakt, që Deklarata, gjithashtu është e saktë. Këtu është edhe një grup i kushtet në JavaScript. Sintaksore, ajo është identike me C dhe PHP. Shprehjet zotit Boole janë, në mënyrë të ngjashme, sintaksore identike me dy C dhe PHP. Ne gjithashtu kemi çelsin në JavaScript që duken identike. Ne kemi për sythe që janë strukturuar njëlloj, ndërsa unazore, të bëni ndërsa sythe. 

Kjo është pak më ndryshe. PHP kishte për çdo konstrukt që ju mund të jetë duke përdorur ose do të përdorë në pset shtatë, ndoshta. Java e ka këtë version të veçantë të për ku ju fjalë për fjalë thoni diçka si për çelës ndryshueshme në objekt, i cili është një mënyrë shumë e ngjeshur e duke thënë: në qoftë se unë kam marrë një object-- dhe ne do flasim për këto përsëri në një moment-- dhe unë dua të iterate mbi të gjitha nga çifte të vlerave kyçe brenda, Unë nuk duhet të kuptoj se si për të Indeksi i numerikisht ato me zero, një, dy, tre. 

Unë mund të them fjalë për fjalë këtë. Dhe në çdo përsëritje, JavaScript për mua do update çelësin ndryshueshme të jetë çelësi i parë, atëherë çelësi tjetër, atëherë çelësi tjetër, atëherë çelësi tjetër, dhe kështu me radhë. Dhe unë mund të merrni me vlerën e tij duke e trajtuar një objekt në JavaScript, si ne do të shohim, sikur kjo është një array associative në PHP. Në të vërtetë, në qoftë se ju më në fund përfundoi tuaj mendjen rreth asaj që një grup asociativ është në PHP, ju mund të mendoni për atë tani për tani si identike me një objekt në JavaScript. Por kjo është pak e një oversimplification. 

Vargjeve duken, bukur të mjaftueshme, identik për të PHP me përjashtim të një karakter. Ka një gjë që mungon këtu që ne e bëmë të shohim javën e kaluar me PHP. Çfarë është lënë jashtë? Po? Asnjë dollar shenjë. Pra, ne jemi kthyer në një më shumë botë normale ku Variablat nuk kanë shenja të dollarit. Por ju bëni prefiksit ato me var, në mënyrë tipike. Dhe var do të thotë ndryshore. Dhe shumë si PHP është lirshëm typed-- ku ka lloje, ka numra dhe vargjet dhe gjithandej dhe kështu forth-- JavaScript në mënyrë të ngjashme ka lloje. Por është e shtypur lirshëm në se NE programuesit nuk duhet të specifikojë ato. Ne vetëm duhet të jenë të vetëdijshëm se llojet e ndryshme ekzistojnë. 

Variablat, meanwhile-- këtu është se si ne mund të deklarojë "hello, bota" si një varg. Vini re se është identike me PHP por asnjë shenjë dollar. Dhe kjo është diçka që ne do të filloni duke parë më sot, ku ju keni një objekt me çelësat dhe vlerat. Dhe në qoftë se ju doni të provoni të konkludoj nga week-- fundit sintaksa është pak më ndryshe. Por një mendje e shëndoshë pak check-- sa Çelësat e bën këtë objekt duket të ketë? Kështu që unë shoh katër. Unë shoh dy. 

Pra, është e vërtetë dy. Pra, kjo është një koleksion e dy palë kyç vlerë. Çelësi është simbol vlera e të cilit është e FB. Çështja kryesore është çmimi vlera e të cilit është 101.53. Pra, këto janë dy palë të rëndësishme të vlerës së. Dhe mbani mend, PHP-- dhe kjo është përsëri vetëm lloj i dallimit sintaksore. Kjo nuk është e gjitha që intelektualisht interesant. PHP mund të ketë shkruar këtë njëjtë gjë si kuotë follows--, është e barabartë. Dhe unë të ndryshojë këto për kllapa katrore. Dhe atëherë unë të ndryshojë kjo në një fjalë cituar, "çmim". Dhe atëherë unë nuk e përdorin një zorrë e trashë. Çfarë kam përdorur javën e kaluar? Po, shenja të barabartë shigjetë simbol i shokuar. 

Dhe pastaj kam bërë të njëjtën gjë këtu. E njëjta gjë këtu. Dhe kjo është e gjitha. Pra, kjo është në rregull në qoftë se kjo nuk ka zhytur me të vërtetë në në kujtesën e vetëm por për shkak se është e vërtetë intelektualisht jointeresant. Është dallimet vetëm sintaktik. Por idetë janë të njëjtë. Brenda kësaj variable të japin kuotën e në JavaScript është një koleksion i çifte kyç vlerë, një nga të cilat është simbol, njëri prej të cilëve është çmimi. Dhe unë mund të merrni në ato vlera me sintaksë e mëposhtme. Ashtu si në PHP, unë mund të bëni diçka like-- le më bëj kjo kuti e madhe pak. Ashtu si në PHP, unë mund të bëjnë this-- oh, dammit. Eja. 

Ashtu si në PHP-- OK, ne do të vetëm përdorni shënimet prezantues. Ashtu si në PHP, unë mund të të bëjë $ $ quote quote ["simbol"], dhe kjo do të merrni mua vlera e "simbol". Në JavaScript, ajo do të jetë identike, ku unë mund ta bëjë këtë vetëm. E vetmja gjë që është mungon është shenja e dollarit. 

Pra bukur të mjaftueshme, atëherë, nuk ka jo të gjithë se shumë sintaksë e re. Pra, ajo që sot ne të përqëndrohet në, me të vërtetë, është disa nga idetë dhe aplikimet. Dhe i pari i tillë kërkesë që ju mund të kanë parë nëse ju fetar në pset shtatë tashmë është kjo sintaksë. Pra, në pset shtatë, në qoftë se ju keni shihet apo nuk shihet atë ende, e di se ka një skedë që ne japim ju quajti config.json-- JavaScript Object simbol. Përse? Ne kemi kërkuar që të jetë në gjendje për të siguruar me një template me disa çifte kyç vlerë. Ne kemi kërkuar që të jetë në gjendje të ju japin një listë e ushtrisë, emri i serverit. Ne kemi kërkuar për të ju jap një placeholder për emrin tuaj të përdoruesit dhe një placeholder për fjalëkalimin tuaj. Nëse ju nuk jeni duke parë kjo ende, jo për t'u shqetësuar. Më shumë për këtë në pset shtatë [? spekulim. ?] Dhe pastaj, Natyrisht, ne duam t'ju për të mbushur në për-dos sepse kur ju hyni në CS50 IDE, secili prej jush kanë emrin tuaj dhe fjalëkalimin. 

Pra, ne mund të kemi përdorur një gjysmë duzinë ose më shumë formate të ndryshme. Ne mund të ketë përdorur një file .txt. Ne mund të përdorur një skedar CSV. Ne mund të kemi përdorur një INI file, një file XML, një bandë e tërë më akronimet që ju nuk mund të keni dëgjuar ndonjëherë. Kjo është lloj i arbitrar në fund të ditë. Por super popullor këto ditë është një tekst format i quajtur JSON-- JavaScript Object Notation-- që duket si kjo. Kjo është pak i fshehtë, por vini re modelet. Ju filloni me një kaçurrel të hapur Braçe, dhe ju të përfundojnë me të njëjtën. Brenda e kjo është diçka. Kjo është një palë kyç vlerë. Pra, kjo është një objekt që unë jam duke kërkuar në në ekran këtu që ka një çelës, e cila ka një vlerë. Dhe vetëm inferring bazuar në model i mëparshëm, çfarë është çelësi këtu? Baza e të dhënave, gjë që e majta e zorrës së trashë. 

Tani, vlera ndodh të jetë rreshta të shumta në këtë kohë. Por vlera e fillon me një kaçurrel shtrëngoj dhe përfundon me një mbajtëse kaçurrel. Pra, çfarë do të ju propozojmë është llojin e vlerës së bazën e të dhënave? Një fjalor apo, thjesht më shumë shkurtimisht, një objekt. E drejtë? Kjo është lloj i një strukture të dhënave që mund të përdorin struktura të tjera brenda vetes. Pra, nëse kjo gjë gjithë ne jemi duke e quajtur një object-- dhe një objekt është vetëm një bandë e kyç vlerës pairs-- Vlera e vetë bazën e të dhënave është një objekt. Vlera e bazën e të dhënave ka një bandë e tërë e çifte kryesore me vlerë, e para e cila është mikpritës, atëherë emri, atëherë emrin, pastaj fjalëkalim, secili prej vlera e të cilit, ndërkohë, është vetëm një varg i mërzitshëm në thonjëza dyshe. 

Pra, edhe në qoftë se nuk është super qartë vetëm ende, e di se kjo është vetëm një standarde, mënyrë mjaft të mërzitshëm e magazinimin e të dhënave në një format standard. Por gabimet e zakonshme që ju mund të bëjë, madje edhe në pset shtatë, janë pak gjëra të trashë, si në qoftë se ju aksidentalisht heq presje atje. Kjo do të rezultojë në dosjen jo domosdoshmërisht qenë i lexueshëm. Nëse ju aksidentalisht heq gjëra të tilla si citate, kjo nuk do të jetë i lexueshëm. Pra, kjo është një format mjaft nitpicky file, por është një që është super i zakonshëm. Dhe ne të ndodhë të përdorin atë, edhe pse ju nuk e përdorni ndonjë javascript ndryshe, në pset shtatë. 

Në rregull. Pra, mbani mend këtë foto. Kemi biseduar rreth, në HTML, që kodi mund të duket si kjo. Kjo është HyperText Markup Language [Padëgjueshme] vetëm për "Hello, bota." Por pastaj kemi propozuar një ndërsa mbrapa se nëse ajo ndihmon, ju mund të dëshironi të filloni të menduarit në lidhje me këtë tashmë si një pemë. Në fakt, gjurmë që ne përdorni vetëm për hir të lehtësi leximi të ose për hir stilin e mbi e majta mund të lloj të jenë të përkthyera në këtë pemë, ku ju kanë disa nyje të veçantë rrënjë që ne do të quajtur generically dokument, nën të cilën është elementi HTML rrënjë ose tag, HTML, e cila më pas ka dy fëmijë, kokë dhe trup. 

Dhe pastaj nga ana tjetër, kreu ka një titull. Dhe titulli ka një vlerë tekst. Dhe trupi në mënyrë të ngjashme ka një vlerë tekst. Pra, nëse ju jeni të kënaqur duke thënë se po, ju mund të marrë këtë HTML dhe të nxjerrë një foto si kjo, në anën e djathtë është një model i mirë mendor, sepse tani se ne kemi JavaScript, një programimi gjuhë që shfletues mund të ekzekutuar dhe interpretuar për ju, rezulton se çfarë ne jemi gati për të bërë në kodin është të fillojë për të manipuluar këtë Struktura pemë në kujtim. Ne nuk kemi për të ndërtuar pema në kujtesë. Ne nuk kemi të bëjmë lloj Struktura e të dhënave pset-pesë-style kompleksiteti. Shfletuesi, bukur të mjaftueshme, mbi interpretimit HTML lartë deri në fund, majtas ose djathtas, është fjalë për fjalë do të ne dorë ekuivalentin e një akrep për këtë të gjithë pemë për të lira. Ai e bën të gjithë punën e vështirë. Kjo është ajo që Mozilla dhe Apple dhe të tjerët kanë bërë për ne. 

Dhe me JavaScript jemi duke shkuar për të të jetë në gjendje për të kontrolluar dhe për të ndryshuar dhe të bëjë gjëra interesante për të kjo pemë, përndryshe i njohur si DOM ose Object Model Document. Cilat llojet e gjërave? E pra, ajo rezulton se në JavaScript, ka kjo listë lavanderi të ngjarje që mund të bëhet. Dhe ne nuk e kemi përdorur me të vërtetë se fjala që javën zero dhe pset zero kur kemi biseduar për para. Shumica prej jush ndoshta nuk e ka përdorur një ngjarje në projektin tuaj Scratch. Por ju mund të kujtojnë të thjeshtë Marco Polo shembull, ku kemi pasur dy sprites, njëri prej të cilëve tha: Marco. Tjetri prej të cilëve më pas, me të dëgjuarit dhe dëgjuar atë ngjarje, tha: Polo. Nëse jo, të ndjehen të lirë për të shikojmë prapa se larg prapa. 

Por kjo është vetëm për të thonë, dhe ju mund të lloj konkludoj nga emrat e këtyre gjëra, JavaScript, ajo rezulton, do të na japë një mënyrë për të dëgjuar për miun shkuar poshtë ose miut duke shkuar deri ose kyç duke shkuar poshtë ose kyç duke shkuar lart ose onselect onsubmit ose onresizing diçka. Me fjalë të tjera, çdo veprim fizik që një njeri mund të marrë me një shfletues që ju bëni çdo ditë, ju mund të shkruani Kodi për që dëgjon për ato ngjarje dhe pastaj bën diçka të përshtatshme. 

Për shembull, në qoftë se ju përdorni Google Maps, çfarë ndodh në qoftë se ju klikoni dhe veprim miu, zakonisht? Nëse ju klikoni dhe terhiq? Po? Pikërisht. Harta fillon të lëvizë. Kështu që ju mund të lloj të shihni se çfarë është gjatë këtu, çfarë është atje. Dhe si Google zbatojnë atë? E pra, me sa duket, ata janë duke përdorur një çift të këtyre ngjarjes dëgjuesit, një që thotë, dëgjoj për në miun down-- kështu kur përdoruesi fizikisht shtyn trackpad e tij ose të tij apo miut saj poshtë. Dhe pastaj ne jemi duke kërkuar për diçka si lëvizje apo ndonjë ngjarje tjetër që na lejon të kapur terhiq. Dhe në fakt, terhiq është në mënyrë të ngjashme në këtë Dot Dot dot listën e opcioneve të mundshme. 

Pra, kjo do të jetë një i fuqishëm mënyrë për të filluar duke iu përgjigjur përdoruesit madje edhe para se ai ose ajo në të vërtetë klikimeve diçka e qartë si dorëzojë. Por, ne jemi duke shkuar për të futur disa tema çift për të arritur atje. Tranzicioni Por së pari, le të në një farë kodin aktual. Kështu që unë jam duke shkuar për të shkuar përpara dhe të hapur dom-0, i cili është një shembull shumë i thjeshtë këtu se në qoftë se kam zmadhuar thjesht ka këtë input këtu për mua. Dhe unë jam duke shkuar për të shkuar përpara dhe shkruani "Davidi" në emrin tim dhe kliko Submit. 

Dhe pastaj, megjithëse lloj çmim të ulët, unë kanë këtë prompt që pops up që thotë se, "hello, David!" Pra, kjo është lloj i si tonë "hello, bota" që ne e bëmë copë herë prapa në C dhe edhe në PHP, sepse unë kam dinamike outputted emrin tim. Unë mund të bëj emrin e dikujt tjetër këtu. Unë thjesht mund të ndryshojë këtë, si Ana, klikoni Submit. Dhe me të vërtetë, e vogla pop-up ndryshime. 

Tani, pop-ups janë një nga shumica e tiparet e dhunuara të web. Dhe në fakt, prapa në e ditë pop-up blockers erdhi në modë, sepse ju do të shkojë në një farë website-- ndoshta një place-- diskutueshme Kjo do pastaj papritmas filloni peppering ekranin tuaj me një bandë e tërë e pop-ups. Dhe kështu kjo aftësi për të pop up dritaret në frontin e përdoruesit nuk ka qenë veçanërisht mirë-pranuar nga njerëzimi. Pra, kjo është arsyeja pse ju shikoni kjo parandaluar gjë, që vetëm e bën këtë gjë të gjithë e shëmtuar. Pra, ne jemi duke shkuar për nevojë për një mënyrë më të mirë për të menjëhershëm të përdoruesit. Por tani për tani, që duket për të punuar. Pra, vetëm intuitive, çfarë duket se po ndodh këtu? Unë shkoj përpara dhe kliko Submit, dhe atëherë diçka po ndodh, në mënyrë të qartë. Por ajo që nuk po ndodh kjo ka ndodhur javën e kaluar çdo herë që unë klikuar Submit? Çfarë nuk ka ndodhur në ekran? Na vjen keq? Ringarkoni. URL nuk ka ndryshuar fare. Unë i thashë se kjo ishte dom-0, dhe unë jam ende në DOM-0. Normalisht, ne do të merrni ndryshuar në disa të tjera URL, si register.php apo si. 

Por edhe kur unë të shkarkojë kjo gjë duke klikuar OK, vini re se URL qëndron vënë plotësisht. Dhe, në fakt, në qoftë se unë jam pak skeptik, më lejoni të hapur Chrome. Më lejoni të hapë skedën e rrjetit. Dhe vini re kjo është bosh në këtë moment. Më lejoni të shkoj përpara dhe të rikthejë Maria. Nuk ka asnjë të trafikut të rrjetit whatsoever. Kështu që nuk ka HTTP. 

Pra në të vërtetë, në qoftë se unë shoh në kodin burimor për this-- lejoni të mbyllur këtë dritare dhe shkoni tek View Source. Interesante. Ajo duket sikur ka disa tags reja, në mesin e tyre script. Pra, le të marrin një vështrim brenda CS50 IDE pikërisht ajo që kam dërguar për përdoruesit. 

Kështu që këtu is-- le të përqëndrohet në vetëm HTML. Këtu është pjesa e poshtme e DOM-0.html. Dhe vini re se atë e mori një titull, një tag kokë, një tag trup, një tag formë. Por ajo që hedhje jashtë për ju si të ndryshme, veçanërisht në qoftë se ju kurrë nuk kam shkruar ndonjë JavaScript veten. Më lejoni të lëvizni pak të drejtë këtu. Unë kam marrë një kontribut, tjetër input për të paraqesë. Unë kam marrë një ID, që është lloj i ri. Por ne nuk e shohim këtë me CSS. Çfarë tjetër është padyshim e re? Po? Bukur. 

Në rregull. Pra, ku ai thotë onsubmit: vini re çfarë duket për t'u ndjekur. Ky është një atribut në nomenklaturë HTML. Vlera e saj është kjo string cituar këtu. Dhe kjo duket pak pazakontë në shikim të parë. Kjo nuk është HTML. Kjo nuk është CSS. Kjo është, si ju mund të me mend, JavaScript. Pra, duket se i ndërtuar në këtë web faqja është një funksion i quajtur fala. Dhe unë jam inferring se vetëm sepse kjo është një fjalë, përshëndes. Ajo ka një paren hapur, paren ngushtë, pikëpresje. Duket si një funksion C, duket si një funksion PHP. 

Dhe me të vërtetë, ajo do të të jetë një funksion JavaScript. Atëherë unë jam kthyer rreme. Ne do të kthehen në që në një moment të vetëm. Por, ku është ky funksion përkufizohet? E pra më lejoni të lëvizni lart në majë të lëndës. Dhe, edhe pse kjo është një linjë të gjatë, është relativisht e lehtë. Më lejoni të zoom jashtë këtu dhe të përqëndrohet në këto katër rreshta. 

Pra në JavaScript, vetëm si PHP, ju vetëm të themi, fjalë për fjalë, fjala "funksioni" emri i funksionit, dhe pastaj kllapa me ndonjë argumente të nuk ka argumente në këtë rast. Dhe nuk ka asnjë lloj kthim në JavaScript, ashtu si PHP. Pra, kjo është pak lirshëm se C. Mbajtëse hapur kaçurrel, mbajtëse afër kaçurrel. Ndërtuar në JavaScript është një function-- jo një function-- rekomanduara por një funksion të quajtur alarm qëllimi i të cilit i vetëm në jetë është për të tërhequr deri atë goxha e shëmtuar shpejtë që ne pamë një moment më parë. 

Tani kjo është lloj i një kafshatë. Cfare po ndodh ketu? Pra, le të fillojë të nxjerrë në pah çdo gjë këtu. Ky është i njëjti argument për të njoftuar. Dhe çfarë po ndodh? Kjo vetëm duket si një varg. Dhe kjo rezulton, ndryshe nga PHP dhe ndryshe nga C, kjo nuk ka rëndësi në JavaScript në qoftë se ju Kuotat e vetme apo të dyfishtë kuotat. Ata do të jetë e barabartë. Dhe sinqerisht, kjo është vetëm popullarizuar këto ditë për programuesit JavaScript që gjithmonë përdorni kuotat e vetme për disa arsye. Është vetëm gjë për të bërë. Por ne mund të përdorni kuotat e dyfishtë, si edhe. 

Pra, plus është një karakter të ri. Por ata prej jush që keni bërë këtë më parë, çka do të thotë plus? Po. Lidh. Pra, ne pamë këtë në PHP. Nuk është vetëm dot operator në PHP që do të lidh dy vargje së bashku. C ishte një dhimbje në qafë për të bërë këtë. Recall nga pset gjashtë, i cili ishte një dhimbje veçantë në qafë, ju do të duhet të përdorni diçka si strcat pas ndarjes së kujtesës në rafte apo tog. Ju kishte për të kërcejnë përmes hoops vetëm për të lidh dy vargjet. Në JavaScript, është e thjeshtë super. Vetëm të përdorni operatorin plus mes tyre. 

Pra, kompleks-looking gjë duket të jetë kjo sepse në fund e tërë kjo string, unë vetëm lidh në një pikë thirrje. Pra, në qoftë se ajo është popping up u "hello, Davidi" "hello, Ana," "hello, Maria," dhe kështu me radhë, në mënyrë të qartë se gjëja e mesme në mes të dy pluses duhet të më jep akses në çfarë? Çfarë është atje për të sigurt? Po. Kështu që unë do të pretenduar këtu përgjigjet emrin e tyre, apo jo? Pra, emri i tyre popped deri në finale rezultat. Pra, çfarë do të thotë kjo? E pra, unë propozuar më herët në atë foto se e ashtuquajtura DOM ka këtë element të veçantë rrënjë rrugën deri quajtur lartë dokument. Dhe tani, ajo rezulton, se po ndodh të jetë një variabël të veçantë globale në JavaScript, ndërtuar në të cilën është tërë bandë e funksionalitetit të dobishme. Ndër funksionalitetin e dobishme është aftësia për të marrë në çdo nyje pasardhës. Këto sheshe apo rectangles ose ellipses janë vetëm nyjet në një pemë, kështu që të flasin. 

Pra, rezulton se ndërtuar në Dokumenti objekt javascript-së është një funksion, i njohur ndryshe si një metodë, që quhet getElementById. Sintaksa për thirrje një funksion në JavaScript ajo është brenda një objekti ose një variabël është vetëm me dot simbol. Dhe ne pamë këtë në C çfarë sintaksa struct. Ju shikoni këtë në pset shtatë, lloj, lloj, kur ju shikoni CS50 :: pyetje. Zorrë e trashë zorrës së trashë në PHP është një tjetër Mënyra e quajtur një funksion që është brenda ndonjë objekt. 

Por tani për tani në JavaScript, kjo është vetëm një pikë. Dhe kështu ky funksion, bukur të mjaftueshme, lloj i thotë atë që does-- merrni element me ID. Një element është vetëm një tjetër emër për një tag ose nyje në DOM. Dhe kështu që të merrni element me ID "emrin" do të thotë this-- këtu është HTML ime. Dhe në bazë të kësaj HTML, çfarë nyjë apo çfarë HTML tag jam unë do të jetë i programuar duar duke e quajtur document.getElementById? 

Po, pikërisht. Unë jam duke shkuar për të marrë të dhëna Elementi ekziston ID cilit është "emër". Pra konkretisht, ju mund të të mendojnë për këtë funksion, getElementById, si një mënyrë për të dhënë mbështetur një tregues për atë nyje të veçantë në pemë. Ne nuk e kemi tërhequr këtë pemë, por kjo është një mënyrë për të marrë qasje në se drejtkëndësh ose që drejtkëndësh duke unike identifikuar atë nëpërmjet ID saj. 

Tani, pse është kjo e dobishme? E pra, ajo rezulton se një herë ju keni marrë kjo nyje, që drejtkëndësh nga foto, kjo nyje në brendësi të saj, nga ana tjetër, ka një bandë e tërë e properties-- çifte kyç vlerë ose dhënat, një nga të cilat është e quajtura vlerë. Pra fjalë për fjalë, kjo është lloj i një kafshatë për të shpjeguar të gjithë gjë. Por në fund të ditës, e gjithë kjo nuk është të ju jap një varg që përdoruesi shtypur në në këtë mënyrë hierarkike. Por unë nuk e pëlqen një disa nga këto gjëra. Ose më mirë, ka disa kuriozitet ende. E gjithë kjo dukej për të punuar. Pse mendoni se unë u kthye rreme pas thirrje përshëndes? Kjo duket pak e shëmtuar, që Unë kam dy deklarata atje ndarë nga dy pika. Merrni një guess. Në qoftë se kam hequr kthimit të rreme, çfarë mund të ndodhë, vetëm instinktivisht? Na vjen keq, them përsëri? 

Hap një bandë e Windows-it. Pra, potencialisht ndoshta diçka si kjo do të ndodhte. Çfarë tjetër? Mund të paraqesë një kërkesë ku? Në të njëjtën faqe. Pra, në fakt, kjo është ajo sa më afër të përgjigjem këtu, edhe pse, ndryshe nga në të kaluarën, unë nuk kam specifikuar atributi veprimit, të cilat normalisht ne duhet të bëjmë. Rezulton se ka një default. Nëse ju nuk specifikoni veprim, kjo është si duke thënë kuotën, mbyll thonjëzat ose emrin e file vetë, e cila në këtë rast do të të jetë si DOM-0.html. Është vetëm lloj i nxirret, ose më mirë të nënkuptuar. 

Dhe kështu që në qoftë se unë nuk e bëjmë këtë, le të vini re. Më lejoni të shpëtuar këtë. Dhe unë kam hequr kthimit të rreme. Më lejoni të kthehemi në këtë shembull dhe forcë ringarkoni atë. Dhe ju mund të keni parë mua sugjeroj kjo në CS50 Diskutoni një bandë e herë. Nëse ndonjë gjë e ndonjëherë duke vepruar shokuar dhe shfletuesi nuk është sillet si ju presin, shpesh ju do të dëshironi të mbajë Shift dhe pastaj kliko Rifresko. Kjo do të detyrojë çdo fotografi për të rifreskoni dhe nuk e përdorin cache lokale të shfletuesit tuaj ose kopje kështu që tani, më lejoni të shkoj përpara dhe hapur deri Inspektori time, tab rrjetit. Unë jam duke shkuar për të klikoni Ruajtur Kyçu sepse unë nuk duan që ajo të fshini rreshtat një herë kam marrë të whisked larg diku tjetër. 

Më lejoni të shkoj përpara dhe këtu lloji në Andi, klikoni Submit. Në rregull. Kjo duket ashtu siç pritet. Ai thotë se "hello, Andi." Më lejoni të klikoni OK. Interesante. Vini re se kjo faqe ka ndryshuar, megjithëse tek faqja origjinale. Njoftim lloj URL e ndryshuar. Ajo ka shtuar një pikëpyetje, e cila është zakonisht një tregues që ne u përpoq të paraqesë diçka. Dhe pastaj në fund, edhe më shumë në mënyrë të qartë, këtu është HTTP kërkesa aktuale, e cila mori një përgjigje prej 200 që më ktheu këtu. 

Pra, kjo nuk është çfarë ne duam të bëjmë, e drejtë? Sepse unë nuk dua të ringarkoni tërë faqen. Unë në vend të kërkuar për të kthyer rreme në mënyrë që të qark të shkurtër Sjellja e shfletuesit parazgjedhur, e cila ishte, sigurisht, të paraqesë faqe. 

Pra, le të marrin një vështrim në një shembull pak më mirë. Ky është version dom një. Dhe vini re në vijim. Është në rregull nëse ju nuk grok të gjithë nga linjat e kodit. Por ajo që është krejtësisht e ndryshme në lidhje me këtë zbatim? Unë do të përcaktojnë se sillet në njëjtë, bën të njëjtën gjë. Çfarë kam padyshim bërë ndryshe? Po? 

Audienca: [padëgjueshme]. DAVID Malan: Po. Pra, funksioni është përcaktuar differently-- me fjalë të tjera, që mungojnë nga forma, atje lart në linjë 7-- ose në vend, linja 8-- nuk a kam atributin onsubmit. Në shembullin e mëparshëm, kam pasur këtë. Dhe atëherë unë fjalë për fjalë shkruar kodin tim këtu. Dhe atëherë thashë kthimit të rreme. Dhe në qoftë se ajo nuk fshij ju rrugën e gabuar akoma, ajo duhet të fillojë të aq si, ashtu si në HTML, kur kemi filluar të bashkë-shoqërohem it me CSS në atributet stil, ajo sapo ka filluar për të marrë një pak çrregullt ose të ndjehen një gabim të vogël. 

Në mënyrë të ngjashme këtu, në qoftë se ju filloni duke marrë HTML, dhe pastaj ju automatikisht pllum disa kodin e Java skriptet në mes të një varg të cituar, është nuk do të jetë shumë maintainable. E drejtë? Kjo nuk është edhe e qartë në fillim vendin ku kodi JavaScript është. Pra, kjo do të jetë me të vërtetë e bukur si një parim i dizajnit të mirë, le të mbajë HTML tonë plotësisht ndarë nga tonë JavaScript. 

Pra, për të bërë këtë, ajo që ne kemi bërë këtu është following-- ne thjesht përdor HTML vetëm për markup. Dhe kështu në versionin e një prej kësaj, të gjithë Unë kam është një formë me një ID unike. Dhe pastaj poshtë këtu, unë jam duke përfituar i një tipar të veçantë të JavaScript ku unë mund të ketë atë që e quajtur një funksion anonim. Pra, rezulton se në qoftë se unë e quaj document.getElementById e 'demo' kjo është si duke i dhënë mua një tregues për kjo nyje në pemë tim, elementi forma, mënyrë që të flasin. 

Tani, unë vetëm e di nga duke e ditur një grimë e HTML tani ne jemi duke lexuar disa internet reference, që një element formë mbështet një bandë e tërë e listeners-- ngjarje në fjalë të tjera, listë lavanderi të ngjarjes dëgjuesit që kemi parë një moment më parë. Unë e di nga leximi i dokumentacionit se onsubmit është një ngjarje e vlefshme dëgjues për një element formë. 

Pra, një herë unë e di se, është e sigurt për mua për të bërë following-- marrë atë nyje nga pema, elementi forma, dhe qasjen e saj të ashtuquajtur Prona onsubmit. Pra dot vetëm do të thotë kjo është një pronë, si një vlerë të veçantë në brendësi të saj. Dhe çfarë lloji të dhëna jam unë caktimin, me sa duket, te onsubmit, i cili është në mënyrë efektive një variabël brenda e kësaj nyje në pemë? Kjo është një fushë brenda kësaj struct. Çfarë është lloji i të dhënave? 

Një funksion, po. Pra, rezulton se PHP ka kjo. Dhe, edhe pse ne nuk ju them për këtë, C gjithashtu ka funksion, pointers Aftësia për të kaluar dhe të caktojë funksione si vlera të variablave 'vetë. Dhe ne nuk jemi duke shkuar për regres prapa në C. Por tani për tani, rezulton se në anën e djathtë këtu, edhe pse kjo duket pak shokuar, kjo do të thotë, hej shfletues, më jepni një funksion. Unë nuk jam duke shkuar për të shqetësojë edhe duke i dhënë atë një emër për shkak se unë jam fjalë për fjalë do të caktojë le ta quajmë adresa e këtij funksioni menjëherë për onsubmit. Me fjalë të tjera, shfletues, ju nuk keni nevojë të dini se çfarë ky funksion quhet. Ju vetëm duhet të dini ku ajo eshte ne memories. Dhe kështu kjo mjafton vetëm për të kanë një shenjë të barabartë atje dhe mos të shqetësojë emërtimin këtë, si foo ose përshëndes ose ndonjë fjalë tjetër. Dhe tani kjo është vetëm një gjë e stilistik. Unë mund të lëvizë këtë mbajtëse kaçurrel mbi the-- sorry-- linjë tjetër si ne zakonisht e bëjmë CS50. Por në JavaScript, është në fakt stilistikisht të përbashkët për të mbajtur vetëm mbajtëse kaçurrel, The pari, në atë rreshtin e parë. 

Por këtej e tutje, ka asgje interesante. Që mbajtëse hapur kaçurrel vetëm Në kufirin fillimin e funksionit tim. Funksioni është tani identike, përveç unë kam përfshirë false kthimit brenda këtij funksioni. Sepse ajo kthehet out-- dhe ju do të vetëm e di këtë nga leximi documentation-- se nëse funksionin që ju të caktojë për mbajtës onsubmit kthimit të rreme, shfletuesi vetëm e di dhe pranon mos të dorëzojë formularin në një server. Nëse ajo kthehet e vërtetë, ajo do të paraqesë ajo në një server për arsye ne do të shohim janë të dobishme në një moment të vetëm. 

Dhe pastaj pikëpresje pas mbajtëse kaçurrel atje vetëm do të thotë që unë jam bërë përcaktimin e funksionit. Ti e di se çfarë për të thirrur sa më shpejt si ju dëgjoni një parashtresë. Në rregull. Kjo është ende ndoshta lloji i shëmtuar. Pra, çfarë më shumë mund të bëjmë? 

E pra, ajo rezulton pastaj në version dy, që është last-- dhe ne do të vetëm shikim në këtë. Në rrezik për të bërë ajo shëmtuar, rezulton se ka një bibliotekë në bota quajtur jQuery. Dhe jQuery është një super popullor bibliotekë JavaScript kjo është kaq popullore që më ndonjë JavaScript-- kjo nuk është e pazakontë për njerëzit për të ngatërruar jQuery me JavaScript. Përse? Vetë JavaScript ka shumë mënyra fjalëshumë e të bërit things-- document.getElementById, dadadadadada. Ju deri në fund të paturit shumë Linjat e gjata të kodit. 

Pra, një shok me emrin John Reshid, që në fakt punon për një fillimin deri këto ditë, doli me këtë bibliotekë vjet më parë se shumë njerëz kanë kontribuar të quajtur jQuery që ndryshon Sintaksa në mënyrën e mëposhtme. Dhe vetëm kështu që ju keni parë këtë, sepse ju do pa ndryshim shohin këtë nëse duke bërë një Projekti final web-based, kjo do të ishte mënyra ekuivalent i zbatimin e këtij funksioni të njëjtën përdorur kjo bibliotekë të veçantë. 

Tani, në vend se vë në lojë ajo përveç në tërësinë e tij, le të vetëm shikoni në disa modele. Kjo Sintaksa duket të ketë Sa funksionon anonim ose funksionet Nameless ose funksione AKA lambda? Dy, e drejtë? Dhe ju e dini se, edhe në qoftë se ju nuk jeni super i qetë me këtë, vetëm nga fakti se ajo thotë se funksioni () dy herë. 

Dhe kjo rezulton se çfarë ky kod është doing-- dhe ne do të referohemi referenca në internet, në fund të fundit, për disa ndihmë me këtë. Kjo thjesht do të thotë se kur dokumenti është gati, të shkojnë përpara dhe të regjistroheni funksioni vijim si paraqesin mbajtës për HTML Elementi ide unike e të cilit është demo. Dhe pastaj, kur kjo ndodh, quajmë këto dy rreshta të kodit. Dhe kjo është, tragjikisht, një më shumë Mënyra fjalëshumë të thënë kthimit të rreme. Dhe ne përmendur kjo vetëm për shkak ju do të shihni kodin si ky online. Dhe kjo është asgjë për t'u tmerruar nga. Por më tepër, mbani në mend se çfarë është do të jenë të zakonshme në JavaScript është kjo paradigmë. Dhe kështu kjo është arsyeja pse ne tregojmë atë për tani. Në rregull. Pra, pa banesë shumë shumë në atë sintaksë, po ka ndonjë pyetje në Këta shembuj ose ide deri tani? Në rregull. Pra, le të përdorim këtë për diçka të dobishme. Marrja e një faqe web që vetëm thotë përshëndetje, kështu dhe kështu nuk është e gjitha që interesante, mos underwhelm. Kjo nuk do të jenë të bukur, por ajo do të bëjë diçka të dobishme. Më lejoni të kthehem në directory time këtu dhe të hapur, të themi, forma-0.html. 

Pra mendoj kjo është studente faqe sportive i brendshëm e regjistrimit pa ndonjë CSS apo ndonjë kuptim të dizajnit. Dhe unë dua të shkoj përpara dhe regjistruar këtu me një fjalëkalim. Dhe unë jam duke shkuar për të rënë dakord me kushtet dhe kushtet dhe klikoni Regjistrohu. Dhe tani faqen e internetit të thotë: "Ti je regjistruar! (Pra, jo të vërtetë.) " Kjo duket si ajo ka punuar, por më lejoni të shkoj përpara dhe të detyrojë reload. 

Dhe më lejoni të them, jo, ju nuk e bëni nevojë adresën aktuale time email. Apo ndoshta ne do të themi vetëm postën në atje. Fjalëkalimi do të jetë, si, 12345. Dhe pastaj, vetëm për shkak se unë jam i një idiot, tani është 123456789. Dhe unë nuk jam duke shkuar për të kontrolluar kutinë tuaj. 

Hmm. Në rregull. Pra, ka disa mundësi për përmirësim këtu. Dhe ju e dini, ose do të shohim në pset shtatë, që ju mund të shkruani code-- dhe ju do të keni për të shkruar kod në PHP-- për të mbrojtur kundër këtyre llojeve të përdoruesit gabime sepse përdoruesi në mënyrë të qartë nuk ka bashkëpunuar. Dhe ai ose ajo nuk ju ka dhënë të gjitha vlerat që ju të kërkuar apo edhe në formatin që keni kërkuar ato. Pra, ju do të shihni në pset shtatë që ne me siguri mund të kemi disa nëse kushtet që thonë në qoftë se e-mail adresën nuk është një username@something.edu, ne mund vetëm them keq dhe kërkoj falje për përdoruesit shumë, si ju mund të jetë në pset shtatë. Ose në qoftë se ata nuk e kanë kontrolluar atë kuti, rezulton në PHP, ju mund të zbulojë se, shumë. Dhe sigurisht nëse fjalëkalimet nuk përputhen si në register.php për pset shtatë, ju mund të zbulojë atë. Por kjo është një dhimbje në qafë në se tani ata kërkojnë ne që të shkojnë të gjithë rrugën në server. Ky përdorues është në dijeni të gabimit. Dhe të paktën nëse ju përdorni disa teknika njohës, tani ata duhet të klikoni mbrapa shigjetën. Nuk do të jetë e bukur, si një shumë e faqeve sot, në qoftë se keni pasur më të menjëhershëm reagime, çast? 

Me fjalë të tjera, më lejoni të shkoj në versionin një, e cila do të jetë jo prettier. Por ajo ka këtë funksion. Malan, 12345, 123456789, nuk do të kontrolloni kutinë, Regjistrin. Fjalëkalimet nuk përputhen. Pra, edhe pse kjo pop-up është ugly-- ne mund të zëvendësojë këtë përfundimisht me diçka si bootstrap, që ju do të shihni në pset shtatë është një library-- shumë popullor kam bërë zbuluar se fjalëkalimet nuk përputhen. Në rregull. E pra, më lejoni të rregullojmë se si përdoruesit. Më lejoni të shkoj përpara dhe të thonë 12345, 12345. Ende nuk e kontrolluar marrëveshjen. Ju duhet të bien dakord të Termat dhe Kushtet. Pra, pse? 

Në qoftë se ne kemi shtruar tashmë se ka një mënyrë, dhe ne kemi kërkuar që ju në pset shtatë për të zbuluar gabimin kushtet si kjo server-side, pse duhet unë mërzit gjithashtu duke bërë këtë në JavaScript? Çfarë është një argument në favor të shtuar çfarë ju jeni gati për të parë si some-- ka kompleksitet shtesë. 

Ndoshta nuk ka kokë. Çfarë mund të jetë? Audienca: [padëgjueshme]. DAVID Malan: Oh, interesante. Shfrytëzon të mundshme. Aq i sigurt, në qoftë se ju nuk jeni trajtimin të dhëna të gabuara përdorues se madhe, Ndoshta kjo është e gjitha më mirë në qoftë se ai as nuk arrijnë serverin tuaj. Unë do të shtyjë përsëri atje dhe të themi, ju ndoshta duhet të fix dy këto probleme. Por kjo është e drejtë. Çfarë tjetër? 

Audienca: [padëgjueshme]. 

DAVID Malan: Po. Ky kod, siç kemi thënë më parë, është interpretuar në anën e klientit. Ajo nuk e mërzit server, që do të thotë se nuk ka ndikojnë ngarkesën e serverit apo kapacitet. Dhe tani, për pak më të vjetër, kjo nuk ka efekt kuptimplotë sepse unë kam një përdorues të drejtë tani. 

Por nëse ju jeni ndonjë Faqja e internetit e madhësisë të mirë, sidomos më i madh, si Facebook, më shumë ju mund të mbani njerëzit jashtë i serverit tuaj më të mirë sepse një server, natyrisht, ka vetëm një sasi e fundme e RAM, një numër i caktuar i gigahertz, një numër i caktuar i gjërave ajo mund të bëjë për njësi të kohës. Pra, nëse ka më shumë njerëz në bota goditur serverin tuaj, aksidentalisht prerjet gabimisht, ashtu si edhe në qoftë se ju mund të mbani atë peshë off serverin tuaj. Plus, sidomos në një celular device-- në qoftë se ju keni ndonjëherë hyni në my.harvard ose Netid Yale ose të ngjashme, ka kjo latente me një shumë të faqet e internetit si ajo ku ajo merr, si, një mallkim i dytë ose dy herë. Dhe pastaj, Perëndia im, në qoftë se ju mistype, atëherë ju keni për të goditur prapa dhe bëj sërish atë. Pra, ka latente, veçanërisht në lidhjet e ngadalshme e rrjetit. Por JavaScript, sepse ajo shkon në klientin dhe nuk ka nevojë për të shkuar mbrapa dhe me radhë nëpër një internet potencialisht të ngadaltë lidhje, ju mund të merrni reagime gati i menjëhershëm. 

Pra, le të shohim në këtë. Më lejoni të hapë forma-0 dhe shikoni në HTML këtu. Dhe le të vetëm të shohim se çfarë po ndodh. Kjo është një formë e të cilit veprimi është register.php. Unë jam vetëm duke përdorur të merrni aq që unë mund të shoh URL. Por për fjalëkalime, ne do të me siguri duam për të ndryshuar këtë për të postuar në realitet. Këtu është një fushë input e tekstit tipit. Ja një tjetër input Fusha e tipit fjalëkalim. Këtu është, në qoftë se ju kurrë nuk kam parë, një input i tipit checkbox. 

Por nuk ka asnjë JavaScript këtu whatsoever. Kjo është vetëm HTML që shkon në register.php. Por në versionin e parë, ku unë filluar të marrë ato pop-ups, le të shohim se çfarë në të vërtetë ndodh këtu. Në versionin e parë, çfarë Unë jam duke shkuar për see-- I mendova se mund të ngecë mjaft me fjalë të mjaftueshme, por unë vrapoi jashtë. 

Në versionin one-- atje ne do të shkojmë. Në versionin e parë, vini re following-- dhe nuk është implementimi mirë, por kjo është e ime e parë. Vini re se nën nivelin e formë, unë kam një tag script. Dhe një tag script do të thotë, hej, shfletues, këtu vjen një kod në, në mënyrë tipike, JavaScript. Dhe tani, vini re atë që unë jam duke bërë. Në line-- unë mund mezi lexuar it-- rreshti 32, ai thotë: var form-- kështu jepni një ndryshore të quajtur formë. Dhe pastaj merrni document.getElementId e "regjistrimit". Çfarë është kjo? E pra, më lejoni të Rewind këtu. Dhe vini re, ah, unë i dha elementin formë një ide arbitrare, por përshkrues e regjistrimit. Pra, kjo më jep një variabël që lejon mua për të rrëmbyer atë nyje, që drejtkëndësh në pemë të quajtur formë. Mjetet form.onsubmit, hej shfletues, regjistruar një dëgjues ngjarje në këtë formë. Me fjalë të tjera, kur kjo formë është paraqitur, të ekzekutuar kodin e mëposhtëm. Ajo nuk ka nevojë për një emër, sepse pse ju duhet të dini emrin? Ju vetëm duhet të dini Çfarë duhet për të ekzekutuar, ergo është një funksion anonim ose lambda. Dhe kjo është funksioni të gjitha këto linja këtu. Dhe tani, të jem i sinqertë, edhe pse ju nuk mund të ketë shkruar ndonjëherë JavaScript para, kjo është vetëm C dhe PHP logjikë. Pra, nëse form.email.value == "" - kështu që nëse fusha mail-i është bosh, çirrem në përdorues me "Ju duhet sigurojë adresën tuaj të postës elektronike. " Tjetër në qoftë se form.password.value është Yell bosh në përdoruesit, "Ju duhet të japë fjalëkalimin tuaj." 

Më interesant logjikisht, nëse form.password.value nuk ka form.confirmation.value-- barabartë ku ka konfirmimi erdhi nga? Më lejoni të Rewind. E pra, unë e quajti këtë input fushë këtu fjalëkalim. Dhe unë e quajti këtë një të tillë këtu konfirmim. Unë mund të ketë e quajti atë Fjalëkalimi dy apo ndonjë gjë tjetër. Unë jam vetëm duke kontrolluar logjikisht që këto dy janë të njëjta. Else-- rezulton kjo është z Boole again-- një vlerë Boolean, kutin. Pra, nëse unë them, thirrje point-- nëse nuk form.agreement.checked, çirrem në të përdoruesit, si dhe. 

Pra, kjo sintaksë ju do të shihni është shumë e zakonshme në JavaScript, ku ju e keni këtë shënim me pika. Ju filloni me një objekt këtu. Ju pikiatë në të thellë për një për një pronë si password. Dhe pastaj ju merrni në vlerën e saj aktuale. Dhe përsëri, këtu është input. Këtu është emri fjalëkalimin. Dhe vlera e saj është çfarëdo e njeriut në fakt ka shtypur në. 

Pra, në të gjitha këto raste, u ktheva rreme. Por në qoftë se jo, unë të kthehet e vërtetë. Dhe kështu që tani ne shohim një Përdorimi bindëse e kur ju do të kthehet rreme në ndaluar atë që përdoruesi të bërë dhe të bëjë atë ose të saj të zgjedhin sërish ose shkruani përsëri. Përndryshe, ne kthim i vërtetë. 

Dhe më lejoni të prezantoj një variant tjetër i kësaj vetëm për pasardhësit disa të kuptuarit e tyre. E pra, në versionin 2 të kësaj, formë-2-- Unë do të bëjë atë me një valë e një dore. Kjo është, për ata kurioz, versioni jQuery, ata prej jush që mund të duan të ujit në këtë bibliotekë të veçantë. Por le të start-- dhe ndonjë pyetje? Më lejoni të bëj një pauzë për momentin sepse që ishte e shpejtë dhe shumë. 

Por gjëja e mirë këtu është se të gjithë i kodit është shumë e shumë të njëjtën gjë. Stuff e re është ajo që është dom? Cilat janë këto rectangles? Cilat janë këto nyje? Çfarë është një funksion anonim? Çfarë është një mbajtës ngjarje? Por fatmirësisht, shumica e kjo është vetëm rreth të plotë nga, të themi, javën zero. Në rregull. Pra, diçka pak më interesante? E pra, para së gjithash, më lejoni të shkoj përpara dhe të hapur Google Maps. Dhe ju do të vëreni se për një moment, për të ndarë të dytë, vini re se çfarë ndodh kur Unë klikoni shpejtë të mjaftueshme. Dhe kjo lidhje në Harvard është aq shpejt që ju të vërtetë nuk e vërejnë atë. Por çfarë do të lloj lloj i shoh në qoftë se unë klikoni dhe terhiq të vërtetë të shpejtë? Ata prej jush shikuar në internet, në qoftë se ju ngadalshëm kjo për të shpejtuar 0.5x, ju mund të shihni këtë më mirë. 

Çfarë po ndodhte vetëm para se të klikuar dhe zvarritur? Më lejoni të provoni here-- më lejoni të bëj diçka tjetër, si 90.210. Le të shkojnë larg. Kjo ishte me të vërtetë i shpejtë, too. Si për Disney World? Atje shkojmë. NE RREGULL. Çfarë keni parë për një ndarje të dytë? Ashtu, si, sheshet, e drejtë? Placeholders për pllaka? 

E pra, çfarë po ndodh këtu? Google Maps është një shembull i mirë i kjo teknologji që quhet AJAX. Dhe kjo është ajo ku ne do të fillojmë të përdorin JavaScript në një veçanërisht mënyrë tërheqës. Mbrapa në ditë, nuk ka pasur Kjo faqe e internetit quajtur MapQuest. Dhe unë duhet të ketë marrë një screenshot e kjo nga vitet 1990, ku në qoftë se ju të kërkuar për të kërkoni këtu në hartë, ju fjalë për fjalë do të klikoni një shigjetë deri në krye që ju tregoi një shesh të ndryshme të hartës. Në qoftë se ju të kërkuar për të lëvizur majtas, ju klikuar një shigjetë që ju tregoi një shesh të ndryshme të hartës. Dhe disa faqet e internetit ende bëjnë këtë sot. Por edhe MapQuest ka marrë më mirë, si Google Maps. 

Në vend të kësaj, ajo është më mirë këto ditë është faqet e internetit që përdorin AJAX. AJAX-- njohur ndryshe si Asinkron JavaScript dhe XML, e cila është vetëm një mënyrë e sofistikuar për të thënë një teknologji apo teknikë që lejon një shfletues duke përdorur JavaScript për të bërë shtesë HTTP kërkesa pas faqe është ngarkuar. Pra, çfarë do të thotë kjo? E pra, kjo do të jetë lloj i bezdisshëm në Gmail në qoftë se çdo herë do të donit për të kontrolluar postën tuaj, ju kishte goditur fjalë për fjalë Control-R ose Command-R ose kliko butonin Reload dhe e tërë faqja mallkuar do të reload. E drejtë? Ajo do flash bardhë ndoshta për sekondë. Ju do të shihni shiritin budalla progresit. Dhe vetëm për të parë nëse keni të ri postë, e tërë faqja web dhe URL ju jeni në do të duhet të ringarkoni. 

Por kjo nuk është ajo që ndodh në Gmail. E drejtë? Kur ju merrni një email të ri në Gmail, çfarë ndodh në ekran? Ajo thjesht tregon lart, e drejtë? Ajo vetëm magjike shfaqet si një rresht të ri në tryezë. Që në fakt përfshin një sasi të mirë e kompleksitetit. Në fakt, në qoftë se ju mendoni rreth kësaj peme, e cila edhe pse është e thjeshtë këtu, Gmail-- dhe unë do të duhet të shikoni në kodin të jetë sure-- ndoshta ka një tryezë HTML apo ndoshta një listë të renditura se ajo bën secili prej inboxes tuaj email si. 

Dhe kështu që nëse ju imagjinoni këtë ka është një pemë në kujtim kur ju jeni duke përdorur Gmail që duket lloj lloj si kjo, kur Google e kupton, ooh, ju keni një email të ri, ajo nuk ka duan për të rindërtuar tërë pemë. Përkundrazi, ai dëshiron për të gjetur nyjen në pemë që përfaqëson kutinë tuaj dhe vetëm futur një nyje të re. 

Pra, shumë e ngjashme me pset pesë, ku ju kishte për të futur nyjet në një tabelë hash, në mënyrë të ngjashme e bën Google, nëpërmjet Kodi JavaScript që ajo ka shkruar: Traverse kësaj peme, të kuptoj se ku është se një pjesë inbox e dritares, dhe pastaj futur një rresht të ri. Dhe një rresht i ri thjesht do të thotë një ose më shumë nyje të reja në një pemë. 

Dhe kështu AJAX është kjo teknikë që lejon për pikërisht këtë. Pasi të keni vizituar një URL, megjithatë çmendur kohë është, dhe pasi faqja ka qenë i ngarkuar, ju prapë mund të kap më shumë dhënat nga internet-- nëse kjo është një email ose një tjegull e dalin nga harta rrëmbej atë prapa skenave dhe pastaj futur atë në faqen e në mënyrë që human nuk ka vërtetë duhet të prisni për të. 

Facebook Messenger punon në të njëjtën mënyrë. Çdo numër i websites-- tjera oh, në të vërtetë, edhe kjo. Unë do të thotë, kjo është, sinqerisht, lloj i një funksion i bezdisshëm këto ditë. Nëse unë të fillojnë kërkimin për cats-- këtë është lloj i një user experience tmerrshme. Ajo thjesht fillon në kërkim për mua. E pra çfarë është ajo duke bërë? URL nuk ka ndryshuar me të vërtetë që kur kam filluar typing. Por, çfarë po ndodh Përtej wire-- OK, hmm interesante. Çfarë po ndodh Përtej tela këtu vetëm merr weirder. 

NE RREGULL. Pra më lejoni të shkoj përpara dhe të inspektojë element dhe të shkojnë në tab Rrjeti dhe të përpiqet të bëjë këtë teknik dhe më pak për macet. Si unë lloji, fjalë për fjalë, macet and-- çfarë po ndodh per-- Unë nuk jam duke shkuar për të klikoni atë. Në rregull. Kështu që këtu poshtë, çfarë po ndodh çdo herë unë lloji një karakter, me sa duket? Si, niveli i ulët? Çfarë po ndodh me secilin nga ata karaktere Unë jam i shtypur në tastierën e mia? Po? Audienca: [padëgjueshme]. 

DAVID Malan: Pikërisht. Secila prej këtyre personazheve është duke shkuar për të Google, një në një kohë. Ata po ndërtojnë një varg në serverin e tyre që përfaqëson çdo gjë që unë kam shtypur në deri më tani. Dhe çdo herë që unë lloji tjetër karakter, ata përdorin salcë e tyre e fshehtë e një kërko algorithm dhe të kuptoj se, nënkupton ai këtë faqe cat ose kjo faqe mace apo si? Pra, në një kuptim, ajo siguron mua me një përvojë më të mirë në atë që unë nuk e bëj edhe duhet për të përfunduar mendimin tim. Dhe me të vërtetë, kjo është një e dobishme gjë, autocomplete në përgjithësi. Nëse algoritme e tyre janë mjaft të mira dhe nëse kërkimet e mia janë mjaft të dukshme, Unë nuk duhet të shkruani të gjithë fjalën. Ata do të më thoni se çfarë ajo po unë në fakt jam në kërkim për. Pra, çfarë Google quan çastit Kërkimi është vetëm duke përdorur AJAX, duke përdorur kodin që u lejon atyre për të kërkuar Përmbajtja shtesë nëpërmjet një shfletues web në prapaskenë duke përdorur këtë gjuhë e re, JavaScript. Pra, ne kemi disa minuta majtë. Dhe më lejoni të thërras buddy tim Colton deri në skenë, pasi ajo dukej veçanërisht fun hera e fundit për të futur një teknologji se disa prej jush kanë shprehur interes në për projekte finale. Ne menduam se do të jetë kënaqësi për të sjellë deri vullnetar, edhe pse, sot për të treguar ju një shtesë në kjo që lejon ju, duke filluar vërtet, Unë pashë këtë dorë të parë. Eja up. Bërë shumë mirë. Punë e mirë. Unë jam duke shkuar për të projektuar këtë në ekran në një moment të vetëm. Si e keni emrin për të gjithë? 

EFA: Unë jam Efa. 

DAVID Malan: Etha? 

EFA: Efa. 

DAVID Malan: Efa? 

EFA: Po. 

DAVID Malan: Nisë për të parë ju. Në rregull. Më lejoni të merrni këtë të gatshme. Ejani në më shumë të mesme me Colton këtu. Çfarë Colton ka në duart e tij sot është një telekomandë. Pra, në vend se vetëm të qëndrojë aty në një tre-dimensionale botën sy rreth e rrotull siç bëri Colton, tani mund Efa në fakt ecin përreth duke shkuar lart, poshtë, majtas, dhe të djathtë si një Nintendo ose Xbox kontrollues. EFA: Unë do të bie në skenë. DAVID Malan: Unë do të qëndrojnë afërsisht mbi këtu. Por kjo është një rrezik. NE RREGULL. Pra shkoni përpara dhe të vënë ato në. Më lejoni të shkoj përpara dhe kaloni në ekran këtu. Më lejoni të zbehtë dritat. Dhe Colton, më lejoni vijnë të qëndrojnë pranë teje. 

A doni për të shpjeguar këtu me mic çfarë jemi duke bërë? Këtu ju shkoni. 

COLTON: Sigurisht. Deri tani ne jemi ngarkimit deri Oculus, I guess operating-- nuk veprojnë sistem, por programi kryesor, ku ju mund të hyni të gjitha lojrat dhe Apps që janë në bibliotekën tuaj. Deri tani, ajo duhet të them trokitje e lehtë touchpad për të filluar. Touchpad do të jetë mbi anën e djathtë të kufje. Pra shkoni përpara dhe tap-- EFA: Oh, njeri. DAVID Malan: Yeah, ju shkoni atje. Cilësia Efa është duke parë është e cilësisë shumë më e lartë. Ky është vetëm Wi-Fi këtu. COLTON: Pra, çfarë ju jeni do të dëshironi të bëni po shikoni drejt krye e djathtë të ekranit. Po, kjo lojë në të djathtë shumë të lartë. Dhe pastaj kur ju jeni zgjedhur ajo, prekni touchpad përsëri. Unë mendoj Dreadhalls saj. Dhe pastaj këtu është a-- këtu, le të Më të mbajtur syzet për ju. 

Kështu që unë sapo i dha atij një kontrollues. Kështu që tani ai mund të kontrollit të lojës. Ai mund të lëvizë dhe stuff like that. Pra shkoni përpara dhe të kërkoni deri në krye. Ju duhet të shikoni New lojë. Pra shkoni përpara dhe ju mund ta bëni atë. Tani, ju duhet të jetë në gjendje për të kontrolluar veten me kontrollues, si dhe, sa më shpejt loja ngarkesa deri këtu. Kjo mund të jetë pak e frikshme. 

EFA: Tani më thoni. NE RREGULL. 

COLTON: Në rregull. Pra konfirmoj që ju mund të lëvizë. NE RREGULL. Ju mund të lëvizë. Përsosur. Pra, nëse ju shikoni poshtë, ju keni një hartë. Map ju tregon se ku je. Ju mund të shikoni nëpër dhomë. Ju mund plotësisht të kthehet rreth. Po, pikërisht. Kthehet rreth. 

Kështu që shikoni në të majtë tuaj. Unë mendoj se ka diçka që ju mund të marr në një fuçi në dhomë. 

EFA: Si mund të merrni hartë nga rruga? COLTON: Shiko lart. Vetëm shikoni lart. Në rregull. Nuk ju shkoni. Tani shkoni përpara dhe vetëm të kthehet rreth. Kështu që shikoni më larg në të majtë tuaj. Mbani lëviz majtas. Mbani në kërkim largua. Do të mbajë. Po. 

EFA: Oh, në këtë mënyrë. 

COLTON: Po. Ecni në drejtim të tij me kontrollues. Nuk ju shkoni. Tani ajo duhet të them të vini ta merrni. Nuk ju shkoni. Marr atë. Në rregull. Tani, le të dal nga kjo dhomë. Shkoni përpara dhe të ecin në atë derë. Pra, ju jeni do të hold-- ajo thotë se mbajtur butonin për të detyruar atë të hapur. Pra shkoni përpara dhe të mbajë butonin. Po, duke e detyruar atë të hapur. Në rregull. Punë e mirë. Tani ne jemi duke ecur nga dhoma. Kështu që unë jam duke shkuar për të lënë pjesën tjetër deri për ju dhe të shohim se çfarë ju gjeni. EFA: Unë nuk jam duke shkuar në dhomë të errët. Oh prit. Tani unë kam për të shkuar poshtë sallë të errët? OK, unë jam duke shkuar prapa [e padëgjueshme]. COLTON: Në rregull. Disa artikuj më shumë për të marr. Duket sikur disa monedha. Kjo është një lock vini. Pra, nëse ju gjeni një të mbyllur derë, ju mund të përdorni atë. A jeni i frikësuar? 

EFA: Ende. COLTON: OK. 

Pretend-- vërtet. Vetëm të pretendojë se ju jeni në fakt duke qëndruar atje. Dhe në qoftë se ju kthehet around-- ju keni marrë për të mësohen me të. Por kjo ka kuptim. DAVID Malan: Dhe ndërsa Efa vazhdon të luajnë, pasi ne mund të bëjmë këtë gjatë gjithë ditës, ne të gjithë mund tip-shputë këtu. Por ne nuk kemi dy palë të tjera, në qoftë se ju dëshironi të dalë dhe të luajnë. Përndryshe, ne do të shohim ju e ardhshëm të mërkurën. Faleminderit për vullnetarët tonë sot. [Duartrokitje] 

[MUSIC - "Seinfeld TEMA"] SPEAKER 1: E pra, unë jam vënë një PL ri mali në. Unë vetëm ndryshuar OLPF-- 

SPEAKER 2: Pra, çfarë saktësisht jeni duke bërë? 

SPEAKER 1: E pra, secili prej these-- këtu, unë do t'ju tregoj një në këtë këtu. Ju mund të shihni atë të drejtë këtu. 

SPEAKER 3: Unë mendoj se unë jam i mirë me këto. Ju doni disa më shumë? 

SPEAKER 4: Jo, unë jam i mirë. [Padëgjueshme]. 

SPEAKER 3: Jo, [e padëgjueshme]. Kanë disa. SPEAKER 1: ngjyra të ndryshme. SPEAKER 2: OK. SPEAKER 1: Pra, në fund të fundit çfarë ajo nuk është ajo rregullon ngjyrën of--