[MUZIKO Ludante] 

DAVID Malan: Jen CS50. Ĉi tiu estas la komenco de semajno naŭ. Kaj tiu estas kio devus estis Mr. Bulea 200th naskiĝtago. Do tiu estas la uloj al kiu ni aludis sufiĉe fojojn pri uzado Buleaj variabloj vera kaj falsa, 1 kaj 0 kaj tia. Kaj tio estis Google omaĝo lin hodiaŭ. Li estus plenuminta 200. Do se vi ŝatus aliĝi nin por CS50 tagmanĝo rigardu la ligilon sur la kurson de afiŝinto. Kaj tiaj vizaĝoj kaj amikoj tiuj atendas vin tie en Kembriĝo. Vizaĝoj kiel tiuj atendas vin en New Haven. Kaj, fakte, Ken en New Haven afable faris kio nomiĝas vigla GIF de Eli tie ĉe freŝa lunch-- GIF estas ankoraŭ alia grafika dosierformato, kun kiu vi estas familiar-- ke aspektas iom io tiamaniere. Do nur sekvenco of-- OK. Neniu tie en Kembriĝo ridas. Sed en New Haven, ĉi Estas vere amuza, ĉu ne? Bone. 

Do aliĝi nin tien. Ĉi tie ĉe Harvard, specife, ĉi tiu merkredo, se vi estas duajarulino aŭ unuajarulo even-- aŭ eĉ junior-- pensadon de farado ŝaltilo en komputilo scienco, scias ke ni havas Esti CS konsilante justa tiun Merkredo, malmulta post klaso je 4:00 ptm en la komputilo scienco konstruaĵo Maxwell Dworkin. Ni metos tion en la kurso retejo de morgaŭ, ankaŭ. Benjetoj, oni diras, estos servita. 

Bone. Komikeco story-- mi ŝovas proksimume sur la Interreto, kaj mi trovis kelkajn malnovajn arkivojn de miaj iamaj retejo. Kaj ĝi rezultas fjordon ĉirkaŭ ĉi tempo, ĝi ŝajnas tre oportuna ekde mi konkludas ke la UC elektoj intencas ilaro supre denove. Do mi kuris por UC, perdis mizere. Kaj eble tiu estis parte kial. Do tio mia retpaĝaro tiutempe. Ial, mi pensis ke estis bona ideo, antaŭ diranta homojn kion mia platformo estis kaj kial ili devus voĉdoni por mi, ke ili havas musklaki eniri eltrovi ke informoj, kiu en retrospekta estas speco de creepy. Mi ne vere scias kion tio estis. 

Sed ĝi certe ne helpi mian kampanjon. Mi ankaŭ trovis, ke altranga year-- mi havis tiun Muppet kalendaro. Muppets estis speco de modajn reen tiam. Aŭ eble ili ne estis. Mi havis Muppet kalendaro tiutempe. Kaj mi pensis ke estus mojose nomon mia komputilo sur Harvard reto frogman.student.harvard.edu. Tiutempe, ĉiuj havis unike identigebla gastiganto nomojn. Kaj vi povus elekti iun vanteco nomo anstataŭ via propra nomo. Kaj mi iris kun Ranulo ial. 

Kaj tiam mi started-- mi pasigis multe el tempo klakanta tra tiuj ligoj ĉimatene. Kaj cxi tio estis mia pri paĝo, kiu nun ia ŝajnas adorables. Sed ankaŭ atestas nur kiom for teknologio venis. Mi volas diri, reen en la tago, a 486 estis io. Tiuj tagoj, ĝi estas super, super, súper malrapida kaj bone malpli ol vi havu en via propraj poŝoj tiuj tagoj. Ekzistas pli sur tie ke estis eĉ pli hontinda. Do mi lasos ĝin en tiu. Sed tio estis mia unua incursión en web-- ho, ne. Tio ne estis. Mia unua reala incursión en retejo programado Estis ĉi tiu retejo, kiun mi ĵus forgesis. En iu punkto, mi lernis kiel fari ripetemajn fono bildoj. Kaj tial mi trovis ĉi kahelaro efika, kiel hockey ludanto, futbalo, kaj golfo pilko, aŭ kio ajn tio estas por la Frosh IMs retejo. Kaj tio estis vere, vere la unua reta projekto mi prenis on-- Mi pensas eble duajarulina jaro, junior year-- post preni CS50 kaj CS51, unu de la komuna sekvaĵo sur klasoj. Mi rimarkis en rigardanta tra la arkivoj ke unu el miaj posteuloj kaj amikoj, Lee, ia ŝanĝita la aŭtorrajto por si. Sed tio estis ja iu kiu Mi devus posedi la embarason al. Sed tiutempe, tiu estis la unua retpaĝaro, kiel mi diris antaŭ kelkaj semajnoj, per kiu unuajarulo povis registriĝu por enurbaj sportoj ĉi tie. Kaj tiel rezultas ke fonbildojn kiel kiuj ne estas tiel bona ideo. Sed la retejo estis nova, kaj ni cxiuj spertis. Kaj jen kion mi ŝajne faris siatempe. Bone. Do sen pli enkonduko, ni ŝanĝi ilaroj hodiaŭ doni vi, vere, la fina peco kiu vi povus trovi speciale utila por fina projektoj sed ankaŭ ke komencos fari la tutan mondon larĝa araneaĵo sentas iomete pli komprenebla. Efektive, ni tuj enkondukos pli programlingvo nomata Ĝavoskripto tio simila kaj malsamaj en malsamaj manieroj de lingvoj ni rigardis tiom. 

Do C, revokon, estas ĉi kompilita lingvo. Vi devas kuri ĝin tra tradukilo. Vi ricevas fontkodon por kontesti kodo, aŭ nuloj kaj aĵoj. Kaj tiuj estas nuloj kaj ke via CPU, Central Processing Unit, reale kompreni. PHP, kontraste, estas ne tradukita lingvo. Estas kio? Estas interpretita lingvo. Do ekzistas iu programo nomita interpretisto ke devas legi it-- supro al fundo, maldekstre right-- kaj elkompreni ĉiuj via sintakso faras kaj signifas, ĉu ĝi estas buklo aŭ kondiĉo aŭ ajna alia nombro de programado konstruas. Do jen interpretita lingvo. 

Tiam ni enkondukis HTML. Kaj HTML ne estas eĉ programlingvo. Ni nomus ĝin kio? A markaĵojn, kiuj estas nur ia kaprico maniero diri tio ne havas ilojn kiel ni vidis eĉ reen en la tago de Scratch. Ekzistas neniuj cikloj. Ne estas kondiĉoj. Ĝi vere estas lingvo pri markante vian datumon kaj formati ĝin aŭ strukturi ŝin iel. 

CSS, dume, simile ne programlingvo. Ĝi estas eĉ pli estetike orientita. Kaj ĝi permesas ordigi el fajne agordi aĵoj kiel tiparo grandeco kaj koloroj kaj lokigo kaj ĉiuj de tiu. Tiam ni havis 

SQL. Do SQL estas efektive programado lingvo iusence, kvankam adaptebla specife al datumbazoj. Sed eĉ se ni nur enkonduki vin al elekti kaj enmeti kaj forigi kaj ĝisdatigi kaj paro de aliaj, rezultas vi povas reale skribi funkciojn aŭ proceduroj, kiel ili estas nomata, en SQL aspektantaj kaj agi tute kiel PHP kaj C funkcioj. Do sciu, ke tiuj ekzistas. Sed ni ne eĉ tedas kun ili kiel ni ĵus skrapi la surfaco ĉi tie. Kaj tiam JavaScript, la lasta el niajn lingvojn formale enkondukita. Do JavaScript, ankaŭ, estas interpretita lingvo. Kaj tiuj familiaraj, do vi volas distingi ĝin kun iuj karakterizaj el ambaŭ C kaj PHP? Kio faras malsama? 

Spektantaro: Ĝi ne estas kompilita. 

DAVID Malan: Diru denove? 

Spektantaro: Ĝi ne estas kompilita. 

DAVID Malan: Ne kompilita. Do, ankaŭ, estas interpretita. Do ĝi ne estas kompilita. Sed kiu faras ĝin iom kiel PHP. Sed estas ankoraŭ malsama PHP en iu okulfrapa maniero, almenaŭ en la vojo ni uzos ĝin. Yeah? 

Spektantaro: Ĝi kuras kliento-flanko. 

DAVID Malan: ĝi kuras kliento-flanko, kutime. Tio ja la karakterizajn karakteriza por ni nun. C estis servilo-flanko en la senco ke ni faris ĉion en CS50 IDE. PHP ĝis nun estis servilo-flanko mezuro kiel ĝi, ankaŭ, ricevas interpreted-- Ne kompilita, sed interpreted-- interne CS50 IDE, kiu kompreneble estas nur servilo aŭ serviloj en la nubo. 

Sed Ĝavoskripto, eĉ kvankam vi vi tuj komenci skribi ĝin por, ni diru, pset ok kaj eble fina projects-- vi estas tuj dekstre en CS50 IDE kaj savi ĝin en dosierojn ene CS50 IDE, CS50 IDE kaj, siavice, la nubo serviloj sur kiu ĝi estas gastigita, ne tuj interpreti aŭ ekzekuti via kodo. Prefere, ĝi tuj estos sendita en senŝanĝa formo malsupreniris al la retumilo. Kaj ĝi estas tiam iranta esti IE aŭ Chrome aŭ Firefox aŭ Safaro aŭ kion ajn tio vere interpretas ĝi, supre sube, maldekstre dekstren. Do la ŝlosilo karakteriza karakteriza por hodiaŭ estas ke JavaScript estas kliento-flanko kaj PHP, ekzemple, estis servanto flanko. Nun, tiu havas interesajn implicojn por, kiel, intelekta proprieto kaj kiu povas vere vidi vian kodon. Kaj efektive, vi povas iri sur la retejo kaj vidi plej ajna kodo kiu iu havas skribita en JavaScript. Foje estas legeblaj, Foje estas sekur. Sed pli en kiuj en konvena tempo. 

Do Ĝavoskripto, bonguste sufiĉa, estas Super simila, sintakse, al C. Kaj multe kiel PHP, ne estas ĉefa funkcio. Se vi volas komenci skribon JavaScript kodo, kiel vi vidos hodiaŭ, vi simple komenci skribi ĝin. Sed estas, vi vidos, aparte utila en la kunteksto de foliumiloj. Tamen, mia malgranda disclaimer-- kutime earlier-- estis diri ke vi povas pli hodiaŭ uzo Javascript servilo-flanko uzante ornama kadro nomita Node.js ke iuj de CS50 propra aplikoj skribitajn en. Kontrolu 50 reale uzas Node.js. Sed ni tuj enfokusigi Ĝavoskripto kliento-flanko tie sur eksteren. 

Do tie estas aro de kondiĉoj en PHP. Pardonu, in-- vere, ke deklaro, tro estas korekta. Ĉi tie estas ankaŭ aro de kondiĉoj en JavaScript. Sintakse, ĝi estas identa al C kaj PHP. Mr. Bulea esprimoj estas, simile, sintakse identa al ambaŭ C kaj PHP. Ni ankaŭ havas ŝaltilojn en Ĝavoskripto kiuj aspektas identaj. Ni havas por bukloj kiuj estas strukturita idente, dum cikloj, fari dum cikloj. 

Ĉi tiu estas iom malsama. PHP havis la por ĉiu konstrukcio ke vi povus esti uzanta aŭ uzos en pset sep, eble. Javascript havas tiu speciala versio de cxar kie laŭvorte diri ion kiel ŝanĝiĝema ŝlosilo en celo, kiu estas tre konciza maniero diri, se mi akiris object-- kaj ni paroli pri tiuj denove en moment-- kaj mi volas persisti super ĉiuj de la ŝlosilo valoro paroj ene, Mi ne devas eltrovi kiel numere indekso ilin per nulo, unu, du, tri. 

Mi povas laŭvorte diras tion. Kaj en ĉiu ripeto, Ĝavoskripto por mi ĝisdatigos la variablo ŝlosilo esti la unua klavo, poste la sekva ŝlosilo, tiam la sekva ŝlosilo, tiam la sekva ŝlosilo, kaj tiel plu. Kaj mi povas akiri ĉe ĝia valoro traktante objekto en JavaScript, kiel ni vidos, kvazaŭ ĝi estas asocieca tabelo en PHP. Efektive, se vi fine envolvita via atentas ĉirkaŭ kion asocieca tabelo estas en PHP, vi povas pensi pri tio nun kiel identa al objekto en JavaScript. Sed tio estas iom de simplificación. 

Arrays rigardu, bele sufiĉe, identaj al PHP krom unu karaktero. Tie estas unu afero mankas tie ke ni vidis pasintsemajne per PHP. Kio preterlasita? Yeah? Neniu dolaro signo. Do ni estas reen al pli normala mondo kie variabloj ne havas dolaro signoj. Sed vi do prefikson ilin kun var, tipe. Kaj var signifas variablo. Kaj multe kiel PHP estas loze typed-- whereby ekzistas tipoj, estas nombroj kaj ĉenoj kaj flosoj kaj tiel forth-- Ĝavoskripto simile havas tipojn. Sed gxi loze entajpis ke ni la programistoj ne devas specifi ilin. Ni simple devas konscii ke malsamaj tipoj ekzistas. 

Variabloj, meanwhile-- jen kiel ni povus deklari "saluton, mondo" kiel linio. Rimarku ke estas identaj al PHP sed neniu dolara signo. Kaj tio estas io ni komencas vidi pli hodiaŭ, whereby vi havas objekton kun klavoj kaj valoroj. Kaj se vi volas provi konkludi el lastaj week-- la sintakso estas iom malsama. Sed iom prudento check-- kiom klavoj signifas tiu objekto ŝajnas havi? Do mi vidas kvar. Mi vidas du. 

Do estas vere du. Do tiu estas kolekto de du ŝlosilaj valoro paroj. La ŝlosilo estas simbolo kies valoro estas FB. La ŝlosilo estas prezo kies valoro estas 101,53. Do tiuj estas du ŝlosilaj valoro paroj. Kaj memoru, PHP-- kaj jen denove nur ia sintaksan diferencon. Ĝi ne estas ĉiuj ke intelekte interesa. PHP eble skribita ĉi sama aĵo kiel follows-- citaĵo, egalaj. Kaj mi ŝanĝos tiujn al rektaj krampoj. Kaj tiam mi ŝanĝos tion al kotizita vorto "prezo." Kaj tiam mi ne uzas dupunkto. Kion mi uzas lasta semajno? Jes, la egalsigno arrow funky skribmaniero. 

Kaj poste mi faris la samon ĉi tie. Sama afero ĉi tie. Kaj jen ĉio. Do ĝi estas bone se tiu havas ne vere enprofundigita en la memoro nur tamen, cxar estas vere intelekte seninteresa. Estas nur sintaksa diferencojn. Sed la ideoj estas precize la sama. Ene de tiu variablo citaĵo en JavaScript estas kolekto de ŝlosila valoro paroj, unu el kiu estas simbolo, el kiuj unu estas prezo. Kaj mi povas akiri tiujn valorojn kun la jenan sintakson. Ĝuste kiel en PHP, mi povis fari ion kiel lasi mi faros ĉi skatolo iom pli granda. Ĝuste kiel en PHP, mi povis fari this-- ho, Dammit. Venu. 

Samkiel en PHP-- OK, Ni nur uzu la anoncisto notoj. Ĝuste kiel en PHP, mi povas fari $ citaĵo $ citaĵo ["simbolo"], kaj tiu ricevos min la valoro de "simbolo". En JavaScript, ĝi tuj estu identaj, per kiu mi povas simple fari tion. La nura afero kiu estas Mankas la dolaro signo. 

Do bele sufiĉe, do ekzistas Ne ĉiuj kiuj multe novaj sintakso. Do kio hodiaŭ nin okupas de, vere, estas iuj de la ideoj kaj la aplikoj. Kaj la unua tia apliko por ke vi vidis se vi plonĝis en pset sep jam estas ĉi sintakso. Do en pset sep, se vi havas vidis aŭ ne vidis ĝin ankoraŭ, scias ke tie estas dosiero kiu ni donas vi nomis config.json-- Ĝavoskripto Objekto Skribmaniero. Kial? Ni volis povi provizi vin kun ŝablono kun iuj ŝlosilaj valoro paroj. Ni volis povi doni vin listo de la gastiganto, la nomo de la servilo. Ni volis doni al vi lokokupilo por via salutnomo kaj lokokupilo por via pasvorto. Se vi ankoraŭ ne vidis ĉi tamen ne maltrankvili. Pli sur tiu en pset sep [? spec. ?] Kaj tiam, evidente, ni volas vin plenigi la al-dos ĉar kiam vi ensalutas en CS50 IDE, ĉiu el vi havas vian propran salutnomon kaj pasvorton. 

Do ni povus uzis duono dekduo aŭ pli malsamaj formatoj de arkivo. Ni povis esti uzinta .txt dosieron. Ni povus uzi CSV-dosiero. Ni povis jam uzis INI-dosiero, XML-dosiero, tuta amaso pli akronimoj ke vi eble ne jam aŭdis. Estas ia arbitra fine de la tago. Sed súper populara tiuj tagoj estas teksto formato nomita JSON-- JavaScript Objekto Notation-- kiu similas ĉi. Estas iom kripta, sed rimarki la mastrojn. Vi komencas kun malferma krispa streĉa, kaj vi finas kun la sama. Ene de tiu estas io. Ĝi estas ŝlosilo-valoro paro. Do tiu estas celo kiun mi rigardante sur la ekrano tie kiu havas ŝlosilon, kiu havas unu valoron. Kaj ĝuste infiriendo bazita sur la antaŭa modelo, kio estas la ŝlosilo tie? Datumbazo, la afero Maldekstre de la dupunkto. 

Nun, la valoro hazarde estas oblo linioj ĉi tempo. Sed la valoro startas kun krispa stegi kaj finiĝas kun buklaj krampoj. Do kion vi proponas estas la tipo de la valoro de datumbazo? Vortaro aŭ, simple pli koncize, objekto. Dekstra? Tiu estas speco de datumstrukturo ke povas uzi aliajn strukturojn ene mem. Do se tiu tuta afero ni estas nomante al object-- kaj objekto estas nur aro de ŝlosila valoro pairs-- la valoro de datumbazo mem estas objekto. La valoro de datumbazo havas tutan faskon de ŝlosila valoro paroj, kies unua Estas gastiganto, do nomi, tiam uzantonomo, tiam pasvorton ĉiu el kies valoroj, dume, estas nur enuiga ĉenon en citiloj. 

Do eĉ se tio ne super klara nur ankoraŭ, scias ke tio estas nur normo, sufiĉe enuiga vojo de stoki datumojn en norma formato. Sed la komuna erarojn vi povus fari, eĉ en pset sep, estas iom stulta aferoj, kiel se hazarde preterlasas la komo tie. Tio tuj rezultos en la dosiero ne nepre esti legebla. Se vi akcidente preterlasi aferoj kiel la citiloj, ĝi ne tuj estos legebla. Do estas bela nitpicky dosierformato, sed ĝi estas unu ke estas super komuna. Kaj ni hazarde uzas ĝin, kvankam vi ne uzu ajnan JavaScript alie, en pset sep. 

Bone. Do memoru tiun bildon. Ni parolis pri, en HTML, ke la kodo povus aspekti ĉi. Jen la hiperteksta Markup Language [Inaudible] por nur "saluton, mondo." Sed tiam ni proponis Momento reen ke se ĝi helpas, Vi eble volas komenci pensi pri tiu jam kiel arbo. Fakte, la deŝovon ke ni uzi nur por legibilidad kalkaj aŭ por stilo kalkaj sur maldekstren povas ia traduki en tiu arbo, kie vi havas iun specialan radiko nodo ke ni genéricamente nomas dokumento, sub kiu estas la radiko HTML elemento aŭ etikedo, HTML, kiu tiam havas du infanoj, kapo kaj korpo. 

Kaj tiam en ĝirado, kapo havas titolon. Kaj titolo havas tekston valoro. Kaj korpo simile havas tekston valoro. Do se vi estas komforta diraĵo ke jes, vi povus preni ĉi HTML kaj desegni bildon kiel tion, la dekstra flanko Estas bela mensa modelo ĉar nun ke ni havas JavaScript, programado lingvo kiu retumiloj povas ekzekuti kaj interpreti por vi, ĝi rezultas ke kion ni estas farontaj en kodo estas komencos manipuli ĉi arbo strukturo en memoro. Ni ne devas konstrui la arbon en memoro. Ni ne devas fari ian pset kvin-stilo datumstrukturo komplekseco. La retumilo, bele sufiĉe, sur interpreti HTML supre sube, maldekstra aŭ dekstra, estas laŭvorte tuj transdoni nin la ekvivalento de puntero al tiu tuta arbo senpage. Ĝi faras ĉiu el la laborego. Tion Mozilla kaj Apple kaj aliaj faris por ni. 

Kaj kun JavaScript ni tuj povos kontroli kaj ŝanĝi kaj fari interesaj aferoj tiu arbo, alie konata kiel DOM aŭ Dokumento Object Model. Kiajn aferojn? Nu, Ĝi rezultas ke en JavaScript, ekzistas ĉi lavbutiko listo de okazaĵoj kiuj povas okazi. Kaj ni ne vere uzis tiun vorto ekde semajno nulo kaj pset nulo kiam ni parolis pri Scratch. Plejparto de vi verŝajne ne uzis evento en via Scratch projekto. Sed vi eble memoras la simpla Marko Polo Ekzemple, kie ni havis du sprites, unu el kiuj diris, Marco. La alia el kiuj tiam, sur aŭskultado kaj aŭdante ke evento, diris, Polo. Se ne, bonvolu retrorigardas tiel foren. 

Sed tio estas nur por diri, kaj vi povas ia konkludi el la nomoj de tiuj aferojn, Ĝavoskripto, rezultas, tuj donos al ni metodon por aŭskulti por muso subiro aŭ muso suprenirantaj aŭ ŝlosilo subiro aŭ klavon suprenirantaj aŭ onsubmit onselect aŭ onresizing ion. Alivorte, ajna fizika ago ke homa povas preni per retumilo ke vi fari ĉiun tagon, Vi povas skribi kodo por kiu aŭskultas por tiuj okazaĵoj kaj tiam faras ion taŭgan. 

Ekzemple, se vi uzas Google Maps, kio okazas se vi klakas kaj movado la muso, tipe? Se vi klakas kaj treni? Yeah? Ekzakte. La mapo komencas movi. Do vi povas ia vidi kio estas tie, kio estas tie. Kaj kiel faras Google planas akcepti? Nu, supozeble, ili estas uzante paron de tiuj evento aŭskultantoj, kiu diras, aŭskulti por sur muso down-- do kiam la uzanto fizike puŝas sian trackpad aŭ lia aŭ ŝia muso malsupren. Kaj tiam ni serĉas io kiel movado aŭ alian eventon, kiu nin permesas kapti trenas. Kaj fakte, treni estas simile en tiu dot dot dot listo de eblaj ebloj. 

Do tiu tuj estos potenca vojo komenci respondi al la uzanto eĉ antaŭ ol li aŭ ŝi vere klakoj io eksplicita kiel submetiĝi. Sed ni tuj enkondukos paro temoj por atingi tien. Sed unue, ni transiro al iu fakta kodo. Do mi tuj iras antaŭen kaj malfermu dom-0, kiu estas tre simpla ekzemplo ĉi tie ke se mi zomi simple havas ĉi enigo tie por mi. Kaj mi tuj iros antaŭen kaj entajpu "Davido" por mia nomo kaj alklaku Proponu. 

Kaj tiam, kvankam ia malmultekoste, mi havas ĉi prompto ke Popoj supren kiu diras, "saluton, David!" Do ĉi tiu estas speco de kiel nia "saluton, mondo" ke ni faris kelktempe reen en C kaj eĉ en PHP ĉar mi dinamike outputted mia nomo. Mi povas fari iu alia nomo tie. Mi povis simple ŝanĝi tion, kiel, Hannah, klaku Proponu. Kaj efektive, la iom popo-supren ŝanĝojn. 

Nun, popo-ups estas unu el la plej mistraktata trajtoj de la retejo. Kaj fakte, reen en la tago popo-up blockers venis en uzateco ĉar vi irus al iuj website-- eble kritikinda place-- kiu volus tiam subite komenci peppering via ekrano kun tuta amaso de pop-ups. Kaj tiel ĉi kapablo pop fenestroj antaŭ la uzanto ne estis aparte bone ricevita por la homaro. Tial do vi vidas ĉi malhelpi aferon, kiu ĵus faras ĉi tuta afero malbela. Do ni tuj bezonas bona maniero instigi la uzanton. Sed nuntempe, tio ŝajnas funkcii. Do ĝuste intuicie, kion ŝajnas esti pasante ĉi tie? Mi iros antaŭen kaj klaku Submetu kaj Tiam io okazas, klare. Sed kio ne okazas ke ja okazis lasta semajno ajn mi klakis Proponu? Kio ne okazis sur la ekrano? Pardonon? Reŝarĝi. La URL ne ŝanĝis tute. Mi diris ke tio estis dom-0, kaj mi estas ankoraŭ ĉe dom-0. Kutime, ni tre baldaŭ ŝanĝis al iuj aliaj URL, kiel register.php aŭ similaj. 

Sed eĉ kiam mi adiaŭos tion klakante OK, rimarkos ke la URL restas tute metita. Kaj, fakte, se mi estas iomete skeptika, lasu min malfermi Chrome. Lasu min malfermi la Reto langeto. Kaj rimarki ke estas malplenan nuntempe. Lasu min kaj resubmetu Maria. Mankas reto trafiko whatsoever. Do ne estas HTTP. 

Do efektive, se mi rigardas la fontokodon por this-- mi fermu fenestron kaj iri al vidi fontkodon. Interesaj. Ĝi aspektas kiel ekzistas iuj novaj etikedoj, inter ili skripto. Do ni rigardu ene CS50 IDE precize kion mi sendis al la uzanto. 

Do jen is-- ni temigi la HTML nur. Jen la malsupera duono de dom-0.html. Kaj rimarki ke ĝi estas atingis titolon, kapo etikedo, korpo etikedo, formo etikedo. Sed kion elsaltas al vi kiel malsama, speciale se vi neniam skribita ajna JavaScript mem. Lasu min rulumi iom dekstren tie. Mi havas enigaĵoj, alia enigo por submetiĝi. Mi havas IRU, kiu estas speco de nova. Sed ni ja vidis tiun kun CSS. Kio alia estas sendube nova? Yeah? Nice. 

Bone. Do kie diras onsubmit, rimarki kio ŝajnas sekvi. Tiu estas atributo en HTML nomenklaturo. Ĝia valoro estas tiu citita kordoj tie. Kaj tio aspektas iom stranga unuavide. Ĝi ne estas HTML. Ĝi ne estas CSS. Tio estas, kiel vi eble supozas, Ĝavoskripto. Ŝajne do konstruita en tiun retpaĝo estas funkcio nomita Greet. Kaj mi infiriendo ke nur ĉar ĝi estas vorto, saluti. Oni alvenis malfermita paren, proksime paren, punktokomo. Aspektas kiel C funkcio, aspektas kiel PHP funkcio. 

Kaj ja, ĝi tuj esti Javascript funkcio. Tiam Mi revenos falsaj. Ni revenos al ke en nur momento. Sed kie estas tiu funkcio difinita? Nu lasu min rulumi supren al la supro de la dosiero. Kaj eĉ se ĝi estas longa linio, ĝi estas relative simpla. Lasu min malzomi kaj tie temigi tiuj kvar linioj. 

Do en JavaScript, ĵus kiel PHP, vi nur diru, laŭvorte, la vorto "funkcio" la nomo de la funkcio, kaj tiam parentezoj kun ajna arguments-- sen argumentoj en tiu kazo. Kaj ekzistas neniu reveno tipo en JavaScript, ĵus ŝatas PHP. Do estas iom pli malfiksas ol C. Malfermita krispa streĉa, proksime frizita streĉa. Konstruita en Javascript estas function-- ne rekomendita function-- sed funkcio nomita atentigo kies sola celo en la vivo estas tiri supren ke sufiĉe malbela suflori kiun ni vidis antaŭ momento. 

Nun ĉi tiu estas speco de bocado. Kio okazas ĉi tie? Do ni komencu reliefigi ĉio tie. Tio estas la sama argumento de alarmi. Kaj kio okazas? Ĉi nur aspektas kiel ŝnuro. Kaj ĝi rezultas, kontraste PHP kaj kontraste C, ne gravas en JavaScript se vi sola citaĵoj aŭ duobla citaĵoj. Ili estos ekvivalentaj. Kaj sincere, estas nur populara tiuj tagoj por JavaScript programadores ĉiam uzi solan citaĵoj ial. Estas nur la afero por fari. Sed ni povus uzi citiloj, ankaŭ. 

Do plus estas nova karaktero. Sed tiuj el vi, kiuj jam faris tio antaŭe, kion plie diri? Yeah. Concatenate. Do ni vidis tion en PHP. Tie estas nur la punkto operatoro en PHP kiu estos concatenate du kordoj kune. C estis doloro en la kolo por fari tion. Revokon de pset ses, kiuj estis an especial doloro en la kolo, Vi devus uzi io kiel strcat post atribuo memoro sur la stako aŭ la monteto. Vi devis salti tra ringegojn nur concatenate du kordoj. En JavaScript, estas super simpla. Simple uzu la plus operatoro inter ili. 

Do la kompleksa-rigardanta afero ŝajnas esti ĉi ĉar fine de tiun tutan ĉenon, mi ĵus concatenate sur ekkrion punkto. Do se kio estis krevanta supre estis "saluton, David," "saluton, Hannah," "saluton, Maria", kaj tiel antaŭen, klare ke meza afero inter la du plusoj devas doni min aliro al kio? Kio estas en tie dum certa? Yeah. Do mi ŝajnigante tie la respondos iliajn nomon, ĉu ne? Do ilia nomo pusxis supren en la finalo rezulto. Do kio faras ĉi tiun mezumon? Nu, mi proponis pli frue en tiu portreton kiu la tielnomita DOM havas tiun specialan radiko elemento vojo supren supro nomita dokumento. Kaj nun, rezultas, ke tuj esti speciala tutmonda variablo en JavaScript, konstruita en kiun estas tuta aro da utilaj funcionalidades. Inter la utila funcionalidad estas la kapableco akiri en ajna posteulo nodo. Tiuj kvadratoj aŭ rektangulojn aŭ elipsoj estas nur nodoj en arbo, tiel diri. 

Do rezultas ke konstruita en JavaScript estas dokumenton objekto estas funkcio, alie konata kiel metodo, kiu nomas getElementById. La sintakso por vokanta funkcio en JavaScript ke estas ene de objekto aŭ variablo estas ĝuste kun la skalara skribmaniero. Kaj ni vidis tion en C kion la struct sintakso. Vi vidos tion en pset sep, ia, speco de, kiam vi vidas CS50 :: demando. La dupunkto dupunkto en PHP estas alia maniero de nomante funkcio tio ene de iu celo. 

Sed nuntempe en JavaScript, ĝi estas nur punkto. Kaj do ĉi tiu funkcio, bele sufiĉe, ia diras kio does-- akiri elementon de ID. Ero estas nur alia nomo por etikedo aŭ nodo en la DOM. Kaj tiel akiri elementon de ID "nomo" signifas this-- jen mia HTML. Kaj bazita sur ĉi HTML, kio nodo aŭ kio HTML tag estas mi tuj programmatically esti handed nomante document.getElementByID? 

Jes, ĝuste. Mi tuj akiri la enigo elemento tie kies ID estas "nomo". Do specife, vi povas pensi pri tiu funkcio, getElementById, kiel maniero de doni malantaŭeniri puntero al tiu specifa nodo en la arbo. Ni ne portis ĉi arbo, sed ĝi estas maniero akiri aliron al tiu rektangulo aŭ ke rektangulo per unike identigante ĝin tra lia IRU. 

Nun, kial estas tiu utila? Nu, Ĝi rezultas ke unufoje vi akiris ke nodo, ke rektangulo el la bildo, ke nodo en ĝi, siavice, havas tutan faskon da properties-- ŝlosilo-valoro paroj aŭ datumoj, unu el kiu estas nomita valoro. Do laŭvorte, ĝi estas speco de buŝplenon klarigi la tutan aferon. Sed fine de la tago, ĉiuj ĉi faras estas doni vin ĉeno kiu la uzanto tajpas en en tiu hierarkia modo. Sed mi ne ŝatas paro el tiuj aferoj. Aŭ prefere, ekzistas iuj scivolemo ankoraŭ. Ĉiuj kiuj ŝajnis funkcii. Kial vi kredas ke mi revenis falsa post nomi saluti? Ĉi aspektas iom malbela, ke Mi havas du deklaroj tie apartigita per punktokomojn. Prenu divenon. Se mi forigis reveni falsa, kio povus okazi, nur instinkte? Pardonu, diru denove? 

Malfermu faskon de Vindozo. Do potenciale eble iu kiel tio okazus. Kion alian? Povus prezenti peton kie? Al la sama paĝo. Do, fakte, tio estas ke la proksiman respondi ĉi tie, kvankam, kontraste en la pasinteco, mi ne specifis la ago atributo, kiu kutime devas fari. Rezultas tie estas defaŭlta. Se vi ne specifas ago, estas kiel diri citaĵo, unquote aŭ la nomo de la dosiero mem, kiu en ĉi tiu kazo estus esti kiel dom-0.html. Ĝi simple speco de konkludita, aŭ prefere implicita. 

Kaj do se mi ne faras tion, ni rimarkos. Lasu min savi ĉi. Kaj mi forigis reveno falsa. Lasu min reiri al tiu Ekzemple kaj forto reŝarĝi ĝin. Kaj vi eble vidis min sugesti tio sur CS50 Diskutu faskon da fojoj. Se io iam agante funky kaj la retumilo kondutas kiel vi atendas, ofte vi volas okazigi Shift kaj tiam alklaku Reŝarĝi. Kiu devigos ĉiun dosieron reŝarĝi kaj ne uzi vian retumilo loka konservejo aŭ kopion por ke nun, lasu min antaŭeniri kaj malfermu mian Inspektisto, la Reto langeto. Mi tuj alklaki Preserve Ensalutu ĉar mi ne volas ĝin forigi la vicoj iam mi akiras forblovita aliloke. 

Lasu min ĉi tie kaj tipo en Andi, klaku Proponu. Bone. Tio ŝajnas kiel atendis. Ĝi diras "saluton, Andi." Lasu min klaku OK. Interesaj. Rimarku ke la paĝo ŝanĝis, kvankam al la origina paĝo. Rimarki la URL ia ŝanĝita. Ĝi aldonis demandosignon, kiu ĝenerale indikilo ke ni provis prezenti ion. Kaj tiam ĉe la fundo, eĉ pli eksplicite, tie estas la fakta HTTP peto, kiu ricevis respondon de 200 ke venigis min tien. 

Do ne tion ni volas fari, ĉu ne? Ĉar mi ne volas reŝarĝi la tuta paĝo. Mi anstataŭe volis reveni malvera por tiel fuŝkontakto la retumilo defaŭlta konduto, kiu Estis, kompreneble, por submeti la paĝo. 

Do ni rigardu kiel marĝene pli bona ekzemplo. Jen dom versio unu. Kaj rimarkis la sekvan. Estas bone se vi ne grok ĉiuj la linioj de kodo. Sed kio estas fundamente malsama pri tiu ekzekuto? Mi kondiĉas kondutas la sama, faras same. Kion mi evidente farita malsame? Yeah? 

Spektantaro: [inaudible]. DAVID Malan: Yeah. Do la funkcio estas difinita differently-- alivorte, forestanta de la formo, tie supre sur linio 7-- aŭ prefere, linio 8-- ne plu mi havas la onsubmit atributo. En la antaŭa ekzemplo, mi havis tion. Kaj tiam mi laŭvorte skribis mian kodo tie. Kaj poste mi diris reveno falsa. Kaj se ĝi ne froti vi malĝustan manieron tamen, ĝi devus komenci mezuro kiel, ĝuste kiel en HTML, kiam ni komencis ko-kunfandigxas ĝi kun CSS en stilo atributoj, ĝi ĵus komencis akiri iom senorda aŭ senti iom malĝusta. 

Simile cxi tie, se vi komencas prenanta HTML, kaj tiam vi aŭtomate Plop iuj JavaScript kodo en la mezo de citita kordoj, ĝi estas ne tuj estos tre mantenible. Dekstra? Estas eĉ ne evidente unue loko kie la kodo JavaScript estas. Do ĝi estus vere bela kiel principo de bona dezajno, ni konservos niajn HTML tute apartigu el niaj Javascript. 

Do fari tion, kion ni farita ĉi tie estas la following-- ni simple uzi HTML por markado nur. Kaj tiel en versio unu el tio, ĉiuj Mi estas formo kun unika ID. Kaj poste malsupren tie, mi utiligante de speciala trajto de Ĝavoskripto per kiu mi povas havi kio estas nomita anonima funkcio. Do rezultas ke se mi nomas document.getElementByID de 'demo' jen kiel doni al mi montrilon al tiu nodo en mia arbo, la formo elemento, tiel diri. 

Nun, mi nur scias el sciante iom de HTML nun ni leginte iun rete aludo, ke formo elemento subtenas tuta aro da okazaĵo listeners-- en Alivorte, la lavbutiko listo de evento aŭskultantoj ke ni vidis antaŭ momento. Mi scias de leganta la dokumentado ke onsubmit estas valida okazaĵo aŭskultanto por formo elemento. 

Do iam mi scias ke, ĝi estas sekura por ke mi faru la following-- akiri tiun nodo de la arbo, la formo elemento, kaj aliri lia tn onsubmit proprieto. Do la skalara nur signifas ĉi estas propraĵo, kiel speciala valoro ene de ĝi. Kaj kion datumtipo estas mi asignanta, ŝajne, al onsubmit, kiu estas efike variablon ene de tiu nodo en la arbo? Estas kampo ene de tiu struct. Kio estas la datumtipo? 

Funkcio, yeah. Do rezultas ke PHP havas tiun. Kaj eĉ se ni ne parolis al vi pri ĝi, C ankaŭ havas funkcion punteros, la kapablon pasi kaj asigni funkciojn kiel variabloj 'valoroj mem. Kaj ni ne tuj al malprogresas reen al C. Sed nuntempe, Ĝi rezultas ke sur la dekstra flanko tie, eĉ se ĝi aspektas iom funky, tiu signifas, hej retumilo, Lasu min funkcio. Mi ne tuj eĉ tedas donante li nomon ĉar mi estas laŭvorte tuj asigni ni nomas ĝin la adreso de tiu funkcio tuj al onsubmit. Alivorte, retumilo, vi ne bezonas scii kion tiu funkcio nomiĝas. Vi nur bezonas scii kie estas en memoro. Do sufiĉas nur por havas egalan signon tie kaj ne tedi enoficigante ĉi, kiel foo aŭ saluti aŭ ajna alia vorto. Kaj nun tio estas nur stila afero. Mi povus kopii ĉi buklaj krampoj sur the-- sorry-- sekva linio kiel ni kutime faras CS50. Sed en JavaScript, ĝi estas fakte stile komuna por nur konservi la krispa streĉa, la unua, en tiu unua linio. 

Sed ekde nun, ekzistas nenio interesa. Ke malfermita krispa streĉa nur demarca la komenco de mia funkcio. La funkcio estas nun identa, krom mi havas inkludis la reveno falsa ene de tiu funkcio. Ĉar ĝi turnas fjordon kaj vi farus nur scias tion de legado la documentation-- ke se la funkcio kiun vi atribuas al la onsubmit traktilo revenas falsa, la retumilo nur scias kaj konsentas ne sendi la formularon al servanto. Se ĝi revenas vera, ĝi submetos ĝi al servanto por kialoj ni vidos estas utilaj en nur momento. 

Kaj tiam la punktokomo post la krispa streĉa tie nur signifas Mi faritaj difinanta la funkcio. Vi scias kiel nomi tiel frue kiel vi aŭdas submetiĝo. Bone. Tio estas ankoraŭ eble ia malbela. Do kio pli povas fari? 

Nu, Ĝi rezultas tiam en versio du, kio estas la last-- kaj ni simple ekrigardi ĉi. Al risko de farado ĝi pli malbelaj, rezultas ke tie estas biblioteko en la mondo nomita jQuery. Kaj jQuery estas súper populara JavaScript biblioteko ke estas tiom populara ke plej ajna JavaScript-- ĝi ne estas nekomuna por homoj konfuzi jQuery kun JavaScript. Kial? Ĝavoskripto mem havas tre abundajn manieroj fari things-- document.getElementByID, dadadadadada. Vi finos supre havanta tre longaj linioj de kodo. 

Do ulo nomita John Resid, kiu fakte laboras por startup tiujn tagojn, elvenis kun tiu biblioteko jaroj antaŭ ke multaj homoj kontribuis al nomita jQuery kiu ŝanĝas la sintakso en la jena maniero. Kaj ĝuste tial vi vidis tiun, ĉar vi nevarie vidu ĉi se faranta reta fina projekto, tiu estus la ekvivalenta maniero de efektivigado tiu sama funkcio uzante tiu speciala biblioteko. 

Nun, anstataŭ tease ĝin aparte en ĝia tuteco, ni nur rigardas iujn mastrojn. Tiu sintakso aperas havi kiom da anonimaj funkcioj aŭ sennomaj funkcioj aŭ AKA lambda funkcioj? Du, dekstra? Kaj vi scias, ke eĉ se vi ne estas súper comfy kun tiu, nur per la fakto ke ĝi diras funkcio () dufoje. 

Kaj ĝi rezultas ke kion tiu kodo estas doing-- kaj ni raporti al perretaj referencojn, finfine, por iu helpo kun ĉi tiu. Tiu nur signifas ke kiam la dokumento estas preta, antaŭeniri kaj registriĝu la sekva funkcio kiel la submeto traktilo por la HTML elemento kies sola ideo estas demo. Kaj tiam, kiam tiu okazas, nomas tiujn du linioj de kodo. Kaj jen estas, tragike, oni pli abundajn maniero diri reveni falsaj. Kaj ni menciis ĉi nur pro Vi vidos kodo kiel tiu linio. Kaj estas nenio por esti timigis. Sed prefere, memoru, ke kio estas tuj esti komuna en JavaScript estas tiu paradigmo. Kaj tiel tio estas kial ni montras gxin nun. Bone. Do sen logxante tro multe en tiu sintakso, ili estas ajnaj demandoj sur tiuj ekzemploj aŭ ideoj tiel malproksime? Bone. Do ni uzu tiun por io utila. Farante retpaĝon kiu nur diras saluton, tiel kaj tiel estas ne cxiuj interesaj, ne underwhelm. Ĉi tiu ne tuj estos bela, sed tuj fari ion utilan. Lasu min reiri al mia dosierujo tien kaj malfermu, diru, formo-0.html. 

Do supozu ĉi estas la unuajarulo enurbaj sportoj registriĝo paĝon sen ajna CSS aŭ ajna senco de dezajno. Mi volas iri antaŭen kaj registri tie kun pasvorto. Kaj mi tuj konsentas al la terminoj kaj kondiĉojn kaj klaku Registro. Kaj nun la retejo diras, "Vi estas registrita! (Nu, ne vere.) " Tio ŝajnas kiel ĝi funkciis, sed lasu min antaŭeniri kaj devigi Reload. 

Kaj lasu min diri, ne, vi ne bezonas mian fakta retadreso. Aŭ eble ni nur diros poŝto en tie. Pasvorto estos, kiel, 12345. Kaj tiam, nur ĉar mi estas idioto, nun ĝi estas 123456789. Kaj mi ne tuj kontroli viajn skatolo. 

Hmm. Bone. Do ekzistas pluraj ŝancoj por plibonigo tie. Kaj vi scias, aŭ vidos en pset sep, kiujn vi povas skribi code-- kaj vi devos skribi kodo en PHP-- defendi kontraŭ tiuj specoj de uzanto eraroj ĉar la uzanto klare ne kunlaboris. Kaj li aŭ ŝi ne donis al vi ĉiujn aprezas vi volis aŭ eĉ en la formato ke vi deziris ilin. Do vi vidos en pset sep ke ni certe povus havi iun se kondiĉoj kiuj diras se la retadreson ne estas username@something.edu, ni povus simple diru bedaŭras kaj pardonpetas al la uzanto da, kiel vi povus esti en pset sep. Aŭ se ili ne kontrolis tiun skatolon, rezultas en PHP, vi povas detekti ke, tro. Kaj certe se la pasvortoj ne egalas kiel en register.php por pset sep, vi povas detekti tiun. Sed tio estas doloro en la kolo en tiu nun ili petas ni iri la tutan vojon al la servilo. La uzanto estas informita de la eraro. Kaj almenaŭ se vi uzas iuj amatoro teknikoj, nun ili devi klaki la dorso sago. Ĉu ne estus agrabla, kiel multaj retejoj hodiaŭ, se vi havis pli tujan retrosciigon, senprokraste? 

Alivorte, mi povas iri al versio unu, kiu tuj estos pli bela. Sed ĝi havas tiun funkcion. Malan, 12345, 123456789, ne tuj kontroli la skatolon, Register. Pasvortoj ne kongruas. Do kvankam tiu popmuziko-supre estas ugly-- ni povas anstataŭigi tiun eventuale kun iu kiel Bootstrap, kiun vi vidos en pset sep Estas tre populara biblioteko mi faris detekti ke la pasvortoj ne egalas. Bone. Nu, lasu min korekti ke kiel la uzanto. Lasu min kaj diri 12345, 12345. Ankoraŭ ne kontrolanta la interkonsento. Vi devas konsenti la terminoj kaj kondiĉoj. Do kial? 

Se ni jam postulatis ke troveblas solvo, kaj ni postulis vin pset sep detekti eraro kondiĉojn ŝatas tion servilo-flanko, kial mi ĝeni ankaŭ sekvas la JavaScript? Kio estas argumento favoro de aldonado kio vi estas estonta vidi kiel some-- ekzistas kroma komplekseco. 

Eble ne estas inversita. Kio povus esti? Spektantaro: [inaudible]. DAVID Malan: Ha, interese. Potencialaj heroaĵoj. Tiel certa, se vi ne uzado erara uzanto enigo tiun grandan, eble estas pli bone se ĝi eĉ ne atingos vian servilon. Mi premus reen tie kaj diru, vi supozeble ripari ambaŭ de tiuj problemoj. Sed tio estas justa. Kion alian? 

Spektantaro: [inaudible]. 

DAVID Malan: Yeah. Tiu kodo, kiel ni diris antaŭe, estas interpretita en la kliento-flanko. Ne ĝenas la servilo, kio signifas ĝin ne efiki la servila ŝarĝo aŭ kapablo. Kaj nun, por iom maljuna min, tiu havas signifoplenan efekto ĉar mi havas unu uzanto nun. 

Sed se vi estas iu retejo de deca grandeco, precipe la plej grandaj, kiel Facebook, La pli vi povas teni homojn for de via servilo la bona ĉar servilon, kompreneble, nur havas finia kvanto de memoro RAM, finia nombro de gigaherco, finia nombro de aferoj ĝi povas fari por unuo de tempo. Do se estas pli personoj en la mondo batante via servilo, hazarde ensalutanta malĝuste, egale bone, se vi povas subteni tiun ŝarĝon vian servilon. Plus, speciale sur moveblaj device-- Se vi iam ensaluti my.harvard aŭ Yale netid aŭ simile, tie estas tio la latencia kun multaj retejoj kiel tiu, per kiu ĝi prenas, kiel, diable dua aŭ du foje. Kaj tiam, mia Dio, se vi mistype, tiam vi devas bati reen kaj refari ĝin. Do ekzistas latencia, speciale sur malrapidaj rilatoj de reto. Sed Ĝavoskripto, ĉar ĝi kuras en la kliento kaj ne bezonas iri tien kaj reen trans potenciale malrapidaj interreto konekto, Vi povas akiri preskaŭ _instantaneous_ sugestoj. 

Do ni rigardu tiun. Lasu min malfermi formo-0 kaj rigardi HTML. Kaj ni simple vidos kio okazas. Tiu estas formo kies ago estas register.php. Mi nur uzante tiom ke mi povus vidi la URL. Sed por pasvortoj, ni volas certe volas ŝanĝi ĉi sendi fakte. Jen eniga kampo de tipo teksto. Jen alia enigo kampo de tipo pasvorton. Jen, se vi neniam vidis, enigaĵoj de tipo markobutono. 

Sed ne estas JavaScript tie whatsoever. Tiu estas nur HTML kiu iras al register.php. Sed en versio, kie mi iris repreni tiuj popo-ups, ni vidu kio reale okazas tie. En versio unu, kio Mi tuj Konsideru mi pensis mi povis ekhalti sufiĉe kun sufiĉe da vortoj, sed mi kuris eksteren. 

En versio one-- tie ni iras. En versio unu, rimarki la following-- kaj ne estas la plej bona efektivigo, sed ĝi estas mia unua. Rimarku ke sub la formon, mi havas skripton etikedo. Kaj skripto etikedo signifas, hey, retumilo, tie venas iu kodo en, tipe, Ĝavoskripto. Kaj nun, rimarki kion mi faras. Sur line-- mi povas apenaŭ legi it-- linio 32, ĝi diras, var form-- tiom donu min ŝanĝiĝema nomita formo. Kaj tiam akiri document.getElementId de "registriĝo." Kio estas ĉi tio? Nu, lasu min malantaŭenigi tien. Kaj rimarki, ah, mi donis la formo elemento arbitran sed priskriba ideo de registriĝo. Do tio donas min variablo kiu permesas min ekpreni tiu nodo, ke rektangulo en la arbo nomata formo. form.onsubmit rimedoj, hej retumilo, registri eventon aŭskultanto sur tiu formo. En aliaj vortoj, kiam tiu formo estas prezentita, ekzekuti la sekvan kodon. Ĝi ne bezonas nomon ĉar kial vi devas scii la nomon? Vi nur bezonas scii kio ekzekuti, ergo ĝi estas anonima aŭ lambda funkcio. Kaj tio funkcio estas ĉiuj tiuj linioj tie. Kaj nun, por esti honesta, kvankam vi eble ne iam skribita Ĝavoskripto antaŭe, ĝi estas nur C kaj PHP logiko. Do se form.email.value == "" - do se la retpoŝto kampo estas malplena, krias al la uzanto kun "Vi devas provizi vian retpoŝtadreson. " Else se form.password.value estas malplenan krias al la uzanto, "Vi devas provizi vian pasvorton." 

Pli interese logike, se form.password.value ne egala form.confirmation.value-- kien konfirmo venas? Lasu min malantaŭenigi. Nu, mi alvokis tiun enigo kampo tie pasvorton. Mi vokas ĉi tiu tie konfirmo. Mi povus esti nomita ĝi Pasvorto du aŭ io alia. Mi nur logike kontrolanta ke tiuj du estas la sama. Else-- rezultas tiu ĉi estas sinjoro Boole again-- Bulea valoro, la markobutonon. Do se mi diras, ekkrion point-- se ne form.agreement.checked, krias al la uzanto tiel. 

Do tiu sintakso vi vidos estas tre komunaj en JavaScript, kie vi havas tiun punktita skribmaniero. Vi komencas kun objekto tie. Vi plonĝi en profundan al al propraĵo kiel pasvorto. Kaj tiam vi ricevas ĉe lia reala valoro. Kaj cetere, jen estas la enigo. Jen la nomo pasvorton. Kaj ĝia valoro estas kion ajn la homa efektive entajpis. 

Do en ĉiuj tiuj kazoj, mi revenis falsaj. Sed se ne, mi reveni vera. Kaj tial nun ni vidas konvinka uzo de kiam vi revenus perfidas ĉesi kion la uzanto faras kaj el li aŭ ŝi elektas denove aŭ tajpi denove. Alie, ni revenas vera. 

Kaj lasu min enkonduki unu alia varianto de ĉi nur semi iun komprenon de tio. Nu, en versio 2 de tiu, formo-2-- Mi tion faros kun ondo de mano. Tio estas, por tiuj scivolema, la jQuery versio, tiuj el vi kiuj volos dabble en tiu aparta biblioteko. Sed ni start-- kaj demandojn? Lasu min paŭzo por momento ĉar kiu estis rapida kaj tre. 

Sed la bela afero estas, ke ĉiuj de la kodo estas preskaux la sama. La nova materialo estas kio estas la dom? Kio tio estas ortanguloj? Kion signifas tiuj nodoj? Kio estas anonima funkcio? Kio okazaĵo traktilo? Sed dankeme, plej de tio estas simple plena cirklo de, diru, semajno nulo. Bone. Do io iomete pli interesa? Nu, unue, lasu min iri antaŭen kaj malfermu Google Maps. Kaj vi rimarkos ke dum kelka momento, en la dua partio, rimarki kio okazas kiam Mi klakas sufiĉe rapide. Kaj tiu rilato en Harvard estas tiel rapide ke vi ne vere rimarkas ĝin. Sed kion vi ia speco de vidos se mi klakas kaj treni vere rapide? Tiuj el vi rigardi en linio, se vi malrapidigi tiun al 0.5x rapido, vi povas vidi ĉi bona. 

Kio okazis ĝuste antaŭ mi klakis kaj trenis? Mi provu here-- lasu min fari io alia, kiel 90210. Ni iru malproksimen. Tio estis vere rapida, tro. Kion pri Disney Mondo? Tie ni marŝos. BONE. Kion vi vidis por fendi dua? Ĝuste, kiel, kvadratoj, justa? Anstataŭaĵojn por kaheloj? 

Nu, kio okazas ĉi tie? Google Maps estas bela ekzemplo de tiu teknologio kiu nomiĝas AJAX. Kaj tio estas kie ni komencos uzi la JavaScript en aparte alloga maniero. Reen en la tago, Estis ĉi tiu retejo nomis MapQuest. Kaj mi prenis ekrankopio de tiu de la 1990- kie se vi volis rigardi supren tie sur la mapo, vi estus laŭvorte klaku sago supre ĉe la pinto kiu montris vin malsama kvadrato de la mapo. Se vi volis iru maldekstren, vi klakis sagon kiu montris vin malsama kvadrato de la mapo. Kaj iuj retejoj ankoraŭ faras ĉi hodiaŭ. Sed eĉ MapQuest alvenis bona, kiel Google Maps. 

Anstataŭe, kio estas pli bona tiuj tagoj estas retejoj kiuj uzas AJAX. AJAX-- alie konata kiel Asynchronous JavaScript kaj XML, kio estas nur fantazio maniero diri teknologio aŭ tekniko kiu permesas foliumilo uzante JavaScript fari aldonan HTTP petojn post la paĝo estas ŝarĝita. Do kio faras ĉi tiun mezumon? Nu, ĝi estus speco de ĝena en Gmail se ĉiufoje kiam vi volis kontroli vian poŝton, vi estis laŭlitere frapi Kontrolo-R aŭ Komando-R aŭ klaku Reŝarĝi butono kaj la tuta Darn paĝo devus freŝigi. Dekstra? Estus ekbrili blanka probable por dua. Vi vidus la stulta progreso trinkejo. Kaj ĝuste al vidi se vi havas novan poŝto, la tuta retpaĝo kaj la URL vi estas ĉe devus freŝigi. 

Sed tio ne estas kion okazas en Gmail. Dekstra? Kiam vi ricevas novan retpoŝton en Gmail, kio okazas sur la ekrano? Ĝi nur aperas, dekstra? Ĝi ĵus magie aperas kiel novan vicon en la tabelo. Ke reale engaĝas deca kvanto de komplekseco. Fakte, se vi pensas pri tiu arbo, kiu kvankam estas simpla tien, Gmail-- kaj mi devas rigardi ĉe la kodo esti sure-- probable havas HTML tablo aŭ eble neordigitan liston ke ĝi bildigas ĉiu el viaj inboxes retpoŝtoj kiel. 

Kaj do se vi imagu ĉi tie estas arbo en memoro kiam vi estas uzante Gmail kiu aspektas ia speco de kiel tiu, kiam Google rimarkas, ooh, vi havas novan retmesaĝon, ĝi ne volas rekonstrui la tutan arbon. Prefere, ĝi volas trovi la nodon en la arbo kiu reprezentas vian enirkesto kaj simple enmeti novan nodon. 

Do tre simila al pset kvin, kie vi devis enmeti nodoj en hash tablo, simile faras Google, tra JavaScript kodo kiu skribis, través tiu arbo, eltrovi kie estas ke enirkesto parto de la fenestro, kaj tiam enmeti novan vicon. Kaj nova vico nur signifas unu aŭ pli novaj nodoj en arbo. 

Kaj tiel AJAX estas ĉi tekniko kiu permesas por ĝuste tion. Kiam vi vizitis URL, tamen freneza longe ĝi estas, kaj unufoje la paĝo havas estis ŝarĝitaj, vi povas ankoraŭ ekpreni pli datumoj de la internet-- ĉu ĝi estas retmesaĝon aŭ brikon de map-- Ekpreni ĝin malantaŭ la scenoj kaj poste enmeti ĝin en la paĝon tiel ke la homaj ne vere atendi ĝin. 

Facebook Messenger laboras sammaniere. Ajna numero de aliaj websites-- ho, fakte, eĉ ĉi. Mi volas diri, tiu estas, sincere, ia ĝena karakterizaĵo tiuj tagoj. Se mi ekserĉi por cats-- ĉi estas speco de horora sperto. Ĝi ĵus komencas serĉanta min. Nu kion ĝi faras? La URL ne vere ŝanĝis ekde mi komencis tajpadon. Sed kio okazas trans la wire-- OK, hmm interese. Kio okazas trans la drato tie nur ricevas weirder. 

BONE. Do lasu min antaŭeniri kaj inspekti elemento kaj iras al la Reto langeto kaj provi fari tiun teknika kaj malpli pri katoj. Kiel mi tajpas, laŭvorte, katoj kaj-- kio okazas per-- mi ne tuj alklaku tio. Bone. Do malsupren tie, kio okazas ĉiun tempo mi tajpas karakteron, ŝajne? Kiel, malalta nivelo? Kio okazas kun ĉiu el tiuj karakteroj mi tajpas ĉe mia klavaro? Yeah? Spektantaro: [inaudible]. 

DAVID Malan: Ĝuste. Ĉiu de tiuj karakteroj estas iri al Google, unuope. Ili konstruas supren kordo sur ilia servilo kiu reprezentas ĉion mi jam tajpis en tiom. Kaj ĉiufoje mi tajpas alian karakteron, ili uzi sian sekretan saŭcon de serĉu algoritmon kaj eltrovi, tio signifas tiu kato paĝon aŭ tiu kato paĝo aŭ simile? Do iusence, ĝi provizas min per bona sperto en tiu mi ne agos bezonas kompletigi mian penson. Kaj ja, ĝi estas utila aferon, autocompletar ĝenerale. Se ilia algoritmoj estas sufiĉe bona kaj se miaj serĉoj estas evidenta sufiĉe, Mi ne devas tajpi la tutan vorton. Ili tuj diru al mi kio Estas mi fakte sercxis. Do kion Google nomas momenteto serĉo estas ĝuste uzi AJAX, uzante kodon kiu permesas al ili peti aldona enhavo tra retumilo malantaŭ la scenoj uzante ĉi nova lingvo, Ĝavoskripto. Do ni havas paron minutoj. Kaj lasu min nomas mian buddy Colton solajn sur la scenejo, ekde sxajnis aparte amuza lastfoje enkonduki teknologion ke iuj el vi esprimis intereson en por fina projektoj. Ni pensis ĝin estus amuza alporti supren volontulo, kvankam, hodiaŭ montri vin Krom ĉi tio permesas you-- yeah, Mi vidis tiun manon unue. Venu supren. Tre bone farita. Bona laboro. Mi tuj projektos ĉi sur la ekranon en nur momento. Kio estas via nomo por ĉiuj? 

EFA: Mi Efa. 

DAVID Malan: Etha? 

EFA: Efa. 

DAVID Malan: Efa? 

EFA: Yeah. 

DAVID Malan: Nice vidi vin. Bone. Lasu min preni tiun preta. Venu sur super al la mezo kun Colton tie. Kio Colton havas en liaj manoj hodiaŭ estas kontrolo remoto. Do anstataŭ nur staras tie en tridimensia mondo ĉirkaŭrigardante kiel Colton faris, nun Efa povas fakte ĉirkaŭpromeni irante supren, sube, maldekstra, dekstra kaj kiel Nintendo aŭ Xbox regilo. EFA: Mi tuj fali de la scenejo. DAVID Malan: mi volas staru malglate super tie. Sed tio estas risko. BONE. Do iru antaŭen kaj metis tiujn sur. Lasu min kaj ŝanĝi al la ekrano tie. Lasu min dim la lumoj. Kaj Colton, lasu min venu stari apud vi. 

Ĉu vi volas klarigi tie kun la mic kion ni faras? Jen. 

COLTON: Sure. Do ĝuste nun ni estas ŝargado supren la Oculus, Mi supozas operating-- ne funkcias sistemo, sed la ĉefa programo, kie vi povas aliri ĉiujn ludojn kaj apps kiu estas en via biblioteko. Do nun, ĝi dirus frapeti la touchpad komenci. Touchpad tuj estos sur la dekstra flanko de la aŭdilo. Do iru antaŭen kaj tap-- EFA: Ho viro. DAVID Malan: Yeah, tie vi iras. La kvalito Efa vidanto estas multe pli alta kvalito. Tiu estas ĝuste la Wi-Fi ĉi tie. COLTON: Do kio vi estas tuj deziras fari estas rigardi al la supro dekstre de la ekrano. Yep, ke ludo sur la plejsupro pravas. Kaj tiam kiam vi elektante ĝi, frapeti la touchpad denove. Mi pensas ĝian Dreadhalls. Kaj tiam tie estas a-- tie, lasu mi tenas viajn okulvitrojn por vi. 

Do mi ĵus donis al li regilo. Do nun li povas kontroli la ludon. Li povas movi kaj da tio. Do iru antaŭen kaj rigardas supren al la pinto. Vi devus vidi nova ludo. Do iru antaŭen kaj vi povas fari tion. Nun, vi devus povi regi mem kun la controlador, tiel, kiam la ludo ŝarĝas supren tie. Tio povas esti iom timiga. 

EFA: Nun vi rakontu al mi. BONE. 

COLTON: Bone. Do konfirmi ke vi povas movi. BONE. Vi povas movi. Perfekta. Do se vi rigardas malsupren, vi havas mapon. Mapo montras vin kie vi estas. Vi povas rigardi ĉirkaŭ la ĉambro. Vi povas tute turni ĉirkaŭe. Jes, ĝuste. Turnu. 

Do rigardu al via maldekstro. Mi kredas, ke estas io vi povas kapti sur barelo en la ĉambro. 

EFA: Kiel igi la mapi ekstere de la vojo? COLTON: Rigardu. Nur rigardu supren. Bone. Tie vi iros. Nun iru antaŭen kaj nur turni ĉirkaŭe. Do rigardu pluen al via maldekstro. Konservu movanta lasita. Konservu rigardante lasis. Daŭrigu. Yeah. 

EFA: Ho, ke vojo. 

COLTON: Yeah. Piediro al ĝi kun la controlador. Tie vi iros. Nun ĝi devus diri repreni ĝin. Tie vi iros. Repreni ĝin. Bone. Nun, ni foriru el ĉi tiu ĉambro. Antaŭen kaj piediras al la pordo. Do vi tuj hold-- diras tenas la butonon por devigi ĝin malferma. Do iru antaŭen kaj tenas la butonon. Yep, devigante ĝin malfermi. Bone. Bona laboro. Nun ni promenis ekster la ĉambro. Do mi tuj forlasi la resto supren al vi kaj vidi kion vi eltrovas. EFA: mi ne tuj en la malluma ĉambro. Ho, atendu. Nun mi devas iri malsupren la malluma salono? OK, mi tuj revenos [inaudible]. COLTON: Bone. Iuj pli ítems al repreni. Aspektas kiel iuj moneroj. Tio seruro pioĉon. Do se vi trovas ŝlosita pordon, vi povas uzi tion. Ĉu vi timas? 

EFA: Ankoraŭ ne. COLTON: OK. 

Pretend-- yeah. Nur ŝajnigi ke vi estas fakte staras tie. Kaj se vi turnas around-- vi devas alkutimiĝi al ĝi. Sed tio havas sencon. DAVID Malan: Dum Efa daŭre ludi, ĉar ni povis fari tiun tutan tagon, ni povas ĉiuj pintoj de siaj piedoj el tie. Sed ni ja havas du aliaj paroj, se vi ŝatus veni kaj ludi. Alie, ni vidos vi apud merkrede. Dankon al nia volontulo hodiaŭ. [Aplaŭdo] 

[MUZIKO - "Seinfeld TEMO"] Parolanto 1: Nu, mi estas metante nova PL levigxus tiel. Mi ĵus ŝanĝis la OLPF-- 

Parolanto 2: Do kio ĝuste vi faras? 

Parolanto 1: Nu, ĉiu de these-- tien, mi montros al vi ĉi tiu en ĉi tie. Vi povas vidi ĝin ĉi tie. 

Parolanto 3: mi opinias min bona kun tiuj. Vi volas iun pli? 

Parolanto 4: Ne, mi estas bona. [Inaudible]. 

Parolanto 3: Ne, [inaudible]. Havas kelkajn. Parolanto 1: Malsama koloro. Parolanto 2: OK. Parolanto 1: Do finfine kio faras estas ĝi ĝustigas la koloro of--