>> [MUZIKO Ludante]
>> DOUG LLOYD: Do nun ni estas maljunaj pros ĉe ttt programado, dekstra?
Kaj ni kovris plurajn lingvoj en unuopaj videoj.
Kaj nun ni faru unu pli, Ĝavoskripto.
>> Unue la bona novaĵo, Ĝavoskripto estas moderna programado
lingvo multe kiel PHP kies sintakso derivas el C,
do tio estas bona loko por komenci.
Temas pri malnovega PHP, tiel, li estis proksimume 20 jarojn.
Ĝi estis inventita ĉirkaŭ Samtempe kiel PHP.
Kaj JavaScript estas efektive sufiĉe fundamenta por la uzanto sperto
de la retejo.
Fakte, ekzistas tri lingvoj kiuj mi
dirus ia konsistigas la uzanto sperto de interagantaj
kun la retejo, html, css, kaj JavaScript.
Kaj do nun ni parolu iomete pri Ĝavoskripto.
>> La malbona novaĵo, kvankam, kun JavaScript estas ke prende multajn regulojn por si,
kaj tiam rompas ilin.
Kaj JavaScript povas efektive esti speco de defiado por lerni,
ĉar ĝi estas kontraste C kaj PHP, kiu estas tre strukturita
kaj havas tre rigidajn regulojn por kiel aferoj povas funkcii.
Javascript havas specon de akiris tiom fleksebla
ke eble aĵoj ne tuj labori la vojon ni atendas ilin,
kaj eble ni vere ne povas lerni nia unua programlingvo
kiel JavaScript.
Do eble ĉar ĝi ne starigis sin ajnan reguloj,
kaj ĝi faras ne vere efikigi bona kodigo kutimoj.
Sed nun ni espereble disvolvita iu bona kodigo kutimoj,
kaj tiel ni povas komenci Foray en JavaScript iomete.
>> Skribi Ĝavoskripto, simila al malfermo supren C dosieron per punkto C etendo
aŭ PHP dosieron per punkto PHP etendo, ĉiuj ni devas fari estas malfermi dosieron
kun la skalara js dosiersufikso.
Ni ne bezonas havi neniun specialan delimitadores kiel ni faris en PHP.
KE speco de angulo krampo demandosigno PHP
ke ni estas kutimitaj de tio, la vojo ni diru nia navegador kiu kion ni havas estas
JavaScript estas per inkludante HTML-etikedo,
kaj ni vidos iomete pri kiel fari tion en nur momento.
>> La alia afero kiu faras Ĝavoskripto malsamaj,
tamen, estas ke ĝi kuras kliento flanko.
Do memoru kun PHP kiu ni neniam povus vere vidi
la PHP kiu substrekis retejon.
Se ni iam vidis la paĝo fonto, ni nur
vidi la html kiu estis generitaj per tiu PHP.
Sed Javascript kuras kliento flanko.
Via Javascript kuras en via komputilo.
Kaj tial vi povas fari Aĵoj kiel aldoni blockers.
Dekstra?
Ad blokado faras ofte mortigante ĉiujn la Ĝavoskripto
kiu ruliĝas sur aparta retejo.
Kaj ĉar ĝi devus kuri sur via maŝino kliento flanko
Vi nur povas halti la Ĝavoskripto lanĉadon tute.
Tio ankaŭ signifas ke kiam vi uzas retejo kiu inkludas JavaScript,
vi devas sendi la JavaScript fonto kodo kiel parto de via http respondo
al la kliento kiam peti ĝin.
Kaj do vi eble ne volas uzi JavaScript
fari vere sentema aferoj kiel pasanta informo
pri uzulajn pasvortojn dorso kaj elirante, ĉar ili estas reale
tuj ricevos ĉiujn la fontkodon, Ne nur la html kiu generas,
kiel estus la kazo kun diru PHP.
>> Nu do kiel ni inkludas JavaScript en nia html komenci kun?
Nu, simila al CSS, fakte, estas speco de kiel ni faros ĝin ĉi tie.
Kun CSS ni havas stilon etikedoj.
Kaj ene de tiuj stilo etikedoj, ni povas difini CSS stilo folio.
Simile kun JavaScript ni povas malfermi skripto etikedoj,
alia html etikedo ni ne raporti en nia html vídeo,
kaj skribi JavaScript en inter tiuj skripto etikedoj.
Ankaŭ se, kiel CSS, ni povis ligi en ekster CSS dosierojn
kaj tiris ilin en nian programon tiel.
Kun CSS ni ankaŭ povas, Pardonu min, kun JavaScript
ni povas ankaŭ specifi la fonto atributo de la skripto etikedo
ligi en JavaScript aparte, do vi ne
devas skribi ĝin en inter skripto etikedoj, ni
povas ligi ĝin en uzanta ke skripto etikedo ankaŭ.
Kaj same kiel cxe la kazo kun CSS kie ni rekomendas ke ĝi estis verŝajne
en via plej bona intereso por skribi vian CSS en aparta dosiero en kazo
vi devas ŝanĝi ĝin, simile ni rekomendas
ke vi skribu viajn JavaScript en apartaj dosieroj
kaj uzi la skripto etikedoj fonto atribui ligi via JavaScript
en via html, via retpaĝo.
>> Do Javascript variabloj, ni komenci parolante pri la sintakso tie.
Kaj ni iros tra tian rapide,
ĉar ni jam faris tion en PHP, do ĉi devus ĉiujn esti bela familiara.
Do variabloj en JavaScript estas tre simila al PHP variabloj.
Mankas tipo especificación kaj kiam vi enkondukos variablon,
vi prefiksu ĝin kun la var ŝlosilvorto.
En PHP ni farus ion kiel tiu, dolaro signo x.
Tiel estas kiel ni indikis variablo, sed ne, ni
ne mencii la tipo de la variablo ajn.
Ni dirus ion kiel dolara signo x egalas 44 en PHP.
Se ni faris la samon en JavaScript,
ni dirus var x egalas 44.
Do var estas ia nia vojo enkonduki variablon.
Tio eble iom pli intuicia ol nur dolaro signo variablo.
>> Denove, ekde ekzistas neniu datumtipoj, ni povus fari tion
kun ajna datumtipo, kordoj, io alia ĉiuj estus var.
Conditionals, ĉiuj niaj malnovaj amikoj de C kaj PHP
estas ankoraŭ havebla, do ni havas se, alie se, alie, ŝaltilo kaj demando
markon dupunkto.
Ŝaltilo ceteraj kiel fleksebla kiel Estis en PHP, sed ĉiuj el tiuj vi estas
konanta nun.
Kaj simile kun cikloj estas la malnovaj favoritos de dum,
fari dum kaj por ankoraŭ disponebla por ni.
Do jam ni scias multon de la bazaj Javascript ia bazfaktoj
nur virto de havado sufiĉe iomete de scio nun pri C kaj PHP.
>> Kio pri funkcioj en JavaScript?
Nu, simila al PHP ĉiu funkcio estas enkondukita kun la funkcion ŝlosilvorto.
Vi diru funkcio, kaj tiam vi komencas difini vian funkcion.
Kio estas iom malsamaj pri Ĝavoskripto,
kvankam estas la kapablo havi kio nomiĝas anonima funkcio.
Do vi povas difini funkciojn kiuj ne havas nomon.
Tio estas io ni vere ne vidis antaŭe.
Ni vere uzas la koncepton de anonima funkcio
iom poste en tiu video, ĉar ĝi devos
fari iom pli sentita en kunteksto kiam ni vidas ĝin en aparta situacio
ke mi kreitaj tie.
Sed ni simple rigardu je kioma simpla Ĝavoskripto
funkcio povus aspekti.
>> Do mi iris antaŭen kaj malfermis mia CS50 IDE
kaj mi jam ruli Apache komenci mian servilon kurante.
Kaj mi havas tiun dosieron malfermita nomita Home.html.
Kaj mi zomi iom tie.
Kaj baze, vi povas vidi la Home.html estas nur aro da butonoj.
Kaj mi asertas ĉe la supro tie ke tiu estas la JavaScript sekcio
materialoj.
Do ekzistas aro da butonoj tie, sed kion tiuj butonoj reale fari?
>> Nu, ni estrus super al mia IED, kaj mi Home.html malfermu tie.
Tuj en la komenco, jen kien mi kunligi
en ĉiuj miaj Javascript fontodosierojn.
Dekstra?
Do mi havas anonymous.js, clock.js, Mi uzas la fonto atributo
de la skripto etikedo por ligi en dosiero.
Do mi ne skribis ajnan Ĝavoskripto rekte en tiun dosieron,
sed mi tiris en ĉiuj Ĝavoskripto Mi verkis aparte.
Kaj se ni rulumu malsupren tie, ĉi tiu devus ĉiuj rigardi iomete familiara
kun iom da novaj sintakso.
Ni havas ĉi tie kaplinio etikedo por funkcioj kaj tiam butonon.
Mi havas enigaĵoj kiuj estas tipo butono, kaj ŝajne kiam mi klakas ĝin,
Mi tuj vokos iuj funkcii atentigo dato.
Kaj jen kiel ni povas ordigi de miksi supren iomete de JavaScript kaj HTML.
Ili fakte ludi bele bele kune, kaj tiel ŝajne kiam
Mi alklakas la butonon, mi tuj voki iun funkcion atentigo dato.
Kaj simile mi difinis kondutojn por ĉiuj el la aliaj butonoj kiuj
estas sur tiu home.html paĝo, kiun ni observu revenanta
al dum la paso de ĉi tiu video.
Sed ni revenu supren tie kaj rigardu
ĉe clock.js, kiu estas la JavaScript dosiero kiun mi
skribis ke havas tiun unuan funkcion ni tuj rigardu.
Kiel vi povas vidi, mi komencas mian Ĝavoskripto funkcii kun la ŝlosilvorto funkcio,
kaj Mi donos cxi tiun unu a nomo, ĝi nomiĝas atentigo dato.
Ene de tie, mi ŝajne krei nova loka variablo nomita aktuala dato.
Kaj mi tuj asigni egalan al nova dato.
Kaj ni povus enir multajn detale kia dato estas,
kaj vere JavaScript estas tiom granda ke ni neniel povas
kovri ĉion en unu video.
Sed sufiĉas diri, ĉi tiu tuj reveni al mi datumoj ero ke
personigas la aktualan daton kaj tempon.
Mi stokante ke en variablo kiu mi estas ŝajne tuj alarmos aktuala dato.
>> Nu, kion faras atentigo aktuala dato aspektas?
Ni rigardu la dosieron mem malantaŭeniri super en la retumilo fenestro.
Do denove, ĉi tiu estas la butono kiun mi ili ligis al tiu nomita funkcio.
Kaj mi klakas ĝin tie kaj rigardi kion ĝi faris, ĝi alarmis.
Ĝi pusxis supren tian skatolon rakontanta mi ke la nuna tempo estas, ŝajne
ĝi estas novembro 4, je 10:43:43 matene.
Kaj se mi klakas denove, nun ĝi estas kelkaj sekundoj poste, ĉu ne?
Do jen ĉio ĉi funkcio faras.
Kiam mi klakas la butonon, ĝi Popoj supren garde mesaĝo al mi.
Do ekzistas vere ne tro funkcioj
jen malsamaj de PHP, nur iomete da novaj sintakso
kiu venas kun laborado kun JavaScript.
>> Arrays en JavaScript estas bela simpla.
Deklari tabelo, oni uzu la rektaj krampoj sintakso
ke ni estas familiara kun de PHP.
Kaj simila al PHP, ni ankaŭ povas miksi datumtipoj.
Do tiu tabelo, ambaŭ de tiuj aroj estus
esti perfekte legitima Javascript.
Kiu estas ĉiuj entjeroj, kaj kiu estas implikata malsamaj datumtipoj.
>> Kio estas io tre malsama en JavaScript, kvankam?
Tio estas la nocio de objekto.
Do eble vi jam aŭdis pri objektema programado.
Ni ne faras multe de ĝi en CS50, sed ni faros iom de ĝi
tie en la kunteksto de JavaScript.
Nun JavaScript havas la kapablon konduti kiel objekto orientita programado
lingvo, sed ne estas mem ekskluzive objektema
programlingvo.
Kaj tion denove venas reen al kial mi diris,
povas esti tre defia por lerni Ĝavoskripto kiel via unua programado
lingvo, ĉar ĝi ne vere persvadi apartan paradigmo.
>> C aliflanke estas funkcia programlingvo.
Se ni volas, funkcioj estas ia The Big Boss Man, dekstra?
Diktas kion okazas ĉio alia.
Ni volas ŝanĝi variablojn, ni nomas funkcioj.
Ni fari aferojn al funkcioj.
Objektoj anstataŭe, en objektema lingvo,
objektoj ia iĝi la stelo kaj funkcioj fariĝis ia malĉefa.
Sed kio estas objekto, kio estas tiu nocio de objekto?
Nu, se ĝi helpas, pensu pri ĝi ĉe unua speco
de kiel C strukturo aŭ struct ke ni lernis pri antaŭe.
En C, strukturo enhavas nombro de kampoj,
kaj eble ni nun povus komenci nomas tiujn kampojn propraĵoj.
Sed la propraĵoj neniam vere stari sur siaj propraj, ĉu ne?
Se mi difini strukturon por aŭto kiel tiu kun la sekvaj du
kampoj aŭ proprietoj, unu al entjero por la jaro de la aŭto
kaj alia de 10 karaktero ŝnuro por la modelo de la aŭto,
Mi povas diri ion kiel tion, Mi povas deklari nova variablo
de tipo struct aŭto Herbie.
Kaj tiam mi povas diri ion kiel herbie.year egalas 1.963,
kaj herbie.model egalas Beetle.
Estas bone.
Mi uzas la kampojn en la kunteksto de la strukturo,
sed mi neniam povus simple diri ion kiel tion.
Dekstra?
Mi ne povas uzi la kampo nomo sendependa de la strukturo.
Ĝi estas speco de fundamenta afero.
>> Do kampoj esti fundamenta por C strukturoj
estas tre similaj al propraĵoj esti fundamenta por Ĝavoskripto objektoj.
Sed kio igas ilin aparte interesaj
estas ke objektoj povas havi ankaŭ kio estas nomitaj metodoj, kiuj estas vere
nur ornama vorto por funkcioj kiuj estas propra al la objekto ankaŭ.
Do ĝi estas funkcio kiu povas nur esti nomita en la kunteksto de objekto.
Nur objekto kiu difinis tiu funkcio ene de liaj,
se vi pensas pri struct, la funkcio
estas difinita ene tiuj difinanta krispa krampoj de la strukturo.
Do ĝi nur signifas io al la strukturo.
Kaj tio estas speco de kion ni faras tie kun celoj kaj metodoj.
Estas esence kiel ni estas difini funkcio kiu
nur havas sencon en aparta objekto, kaj tiel ni
voku ke metodo de la objekto.
Kaj ni neniam plu nomas tion funkcio sendependa de la objekto,
same kiel ni ne povas diri jaro aŭ modelo sendependa de la struct en C.
>> Do funkcia programado paradigmoj aspektas tiel.
Funkcio kaj tiam kiam vi pasas en la celo kiel parametro.
En objektema programado lingvoj, ĉi tia ricevas
spegulita, kaj ni pensas pri ĝi ŝatas ĉi, object.function.
Do ia ke skalara operatoro denove implicante
ke ĝi estas iu speco de proprieto aŭ atributo de la objekto mem.
Sed jen kion objekto orientita programlingvo
plenumadu fari funkcio vokas metodon, denove, kiu
estas nur speciala vorto por funkcio kiu estas esence propra al objekto.
Jen kion tiu sintakso povus aspekti.
Kaj tial ni komencas vidi iujn de tion en la kunteksto de JavaScript.
>> Vi povas ankaŭ pensi pri objekto ia kiel asocieca tabelo,
kiu ni estas konataj kun de PHP.
Memoru asocieca tabelo permesas ni havos ŝlosilo valoro paroj, anstataŭ
havi indeksoj 0, unu, du, tri, kaj tiel plu kiel estas kutimitaj de C
tabeloj.
Asocia arrays povas mapi vortoj, kiel en la PHP vídeo,
ni parolis pri ĉapelaĵoj de picoj.
Kaj do ni havis tabelo nomita picoj, kaj ni
havis fromaĝo estis ŝlosila kaj $ 8.99 estis la valoron, kaj tiam pepperoni estis ŝlosila,
$ 9.99 estis valoro, kaj tiel plu.
Kaj tial ni povas pensi ankaŭ pri kontesti ia simila al asocieca
tabelo.
Kaj do ĉi tie sintakso kreus novan objekton
nomata Herbie kun du propraĵoj ene de ĝi.
Jaro, kiu estas atribuita la valoro 1963, kaj modelo, kiu estas atribuita la kordo
Skarabo.
>> Kaj rimarki tie, ke mi uzas sola citaĵoj en JavaScript.
Vi povas uzi sola aŭ duobla citaĵoj kiam vi parolas pri kordoj.
Estas nur konvencie la kazo ke plejfoje
kiam vi verkas JavaScript, vi simple uzi solan citaĵoj.
Sed mi povus uzi citiloj ĉi tie, kaj ke estus perfekte bone ankaŭ.
>> Do memoru kiom en PHP ni havis tiun nocion
de a por ĉiu buklo kiu permesus nin persisti super ĉiuj el la ŝlosilaj valoro
paroj de asocieca tabelo, ĉar ni
ne havis tiun kapablecon persisti tra 0, unu, du, tri, kvar,
kaj tiel Plu?
Javascript havas ion tre simila, sed ne nomas lin por ĉiu ciklo,
ĝi nomiĝas cxar en cikloj.
Do se mi diris min ŝatas tiu, por var ŝlosilo en objekto,
tio estas ia simila al jene por ĉiu ion kiel ion.
Sed ĉiuj mi faras ĉi tie estas ripetanta tra ĉiuj klavoj de mia objekto.
Kaj ene de la frizita krampoj tie, mi farus
uzi objekton kvadrataj krampoj ŝlosilo por rilati al la valoro je tiu ŝlosilo situon.
>> Alternative, ekzistas eĉ alian alproksimiĝon.
Se mi nur nur zorgas pri la valoroj, mi povas diri por ŝlosilo de objekto,
kaj nur uzi ŝlosilon ene.
Do por var ŝlosilo en objekto, mi havas uzi objekton rektaj krampoj
ŝlosilo ene la buklo.
Por var ŝlosilo de objekto, mi povas nur uzi ŝlosilon ene la buklo,
ĉar mi estas nur intence parolante pri la valoroj tie.
>> Do ni eble prenos rigardu la diferencon
nur por rapide montri vin la diferenco inter kvar
en kaj por el kun tre specifa tabelo, kiun ni havas ĉi tie, semajno tabelo.
Do mi devos trovi novan tabelo ke mi plenigis kun sep kordoj,
Lundo, mardo, merkredo, Ĵaŭdo, vendredo, sabato, dimanĉo.
Kaj mi volas nun persisti tra ĉi tabelo,
presi el certaj informoj.
Se mi uzas por en buklo elprinti informo,
Kio vi pensas mi tuj ricevis?
Nu, ni rigardu.
Kaj antaŭ ol ni salti super al mia retumilo fenestro,
nur koni ke console.log estas ia unu
maniero fari print F en JavaScript.
Sed kio estas la konzolo?
Nu, jen kion ni iras iri rigardu nun.
>> Bone, do ni estas reen tie en mia retumilo fenestro,
kaj mi tuj malfermu mian programisto iloj.
Denove, mi simple frapanta F12 malfermiĝi programisto iloj.
Kaj rimarki ke tie ĉe la supro mi elektis konzolo.
Do tiu estas la nocio de desarrollador konzolon,
kaj ĝi permesos nin presi informon eksteren,
ia kiel la terminalo, sed kiel vi vidos iom poste,
ni povas ankaŭ tajpi informo en interagi kun nia retpaĝo.
Mi tuj zomi iom tie, kaj mi estas gonna nun alklaku cxar en testo.
Kaj kvar en test-- mi ne gonna montri al vi la kodon por ĝi nun,
sed vi ricevos ĝin se vi elŝuti la fontkodon ke
asociita kun ĉi video-- Estas nur ke por en buklo
ke ni vidis nur dua antaŭe sur la glito.
>> Do mi estas gonna klako ke butonon, kaj super tie,
jen kion estas presita en la konzolon, 0, unu, du, tri, kvar, kvin,
ses.
Mi ne presi la informo interne tiuj tabelo lokoj,
ĉar mi uzis cxar en buklo.
Kaj ene de la korpo de la ciklo, mi nur presita eksteren ŝlosilo ne kontestas ŝlosilo.
Sed se mi nun purigi mian konzolon, kaj mi ŝanĝi al cxar de testo, kaj kvar de testo
Mi diras mi uzas por buklo anstataŭ kaj elprinti ŝlosilo,
se mi klakas ke, nun mi ricevas la faktaj elementoj interne de mia objekto
aŭ mia tabelo en ĉi tiu kazo.
Mia tabelo de semajno tagoj.
Mi presis el lundo, Mardo, merkredo.
Do jen la diferenco inter a por buklo en kiu presas el
nur la klavoj se vi simple uzi ŝlosilo ene de la korpo de la ciklo,
kaj por buklo, kio presaĵoj el la valoroj se vi uzas nur
ŝlosilo ene la korpo de la iteracio.
>> Bone, kiel ni nun komencas concatenate kordoj kaj eble miksi supren
iuj variabloj kun interpolado kiel ni povis fari en PHP?
Nu, ni estas bela familiara kun tiu de PHP.
Jen kiel ni farus ĝin uzante la skalara operatoro al concatenate kordoj.
En JavaScript, kvankam, ni fakte uzi ion
nomata plus operatoro, kiu Estas eble eĉ iomete pli
intuicia, dekstra?
Ni aldonante faskon de kordoj kune.
Do ni direktas denove transiri kaj vidi kion ĉi
presos se ni provas presi ĉiuj la informo en semajno tabelo.
Bone, do sub tien sub kordoj kunmeto,
Mi havas du eblojn, kordoj konstruaĵo V1 kaj tiam string konstruaĵo V2.
Kaj ni vidos kial ni bezonas V2 en sekundo.
Sed mi estas gonna alklaku string konstruaĵo V1, kiu
estas la kodo ni estis nur prenante rigardu,
la console.log kun ĉiuj de la plusoj.
Ni vidu se ĉi presaĵoj kion ni atendas.
>> Lundo estas tago numero 01 de la semajno, Mardo estas tago numero 11 de la semajno.
Nu, kion mi provis fari estis akiri
ĝi presi lundo estas tago nombro unu, Mardo estas tago numero du.
Sed ŝajnas kiel mi ĉiam presi el tiu.
Nu, kial do?
Nu, tio rezultas, preni alian rigardon ĉe ĉi tiu malgranda fragmento de kodo tie.
Rimarku ke ni uzas la alpago operatoro en du malsamaj kuntekstoj.
>> Kaj do tie estas kie eble aferoj ke ni ia estintaj dirante:
Ho, estas tiel granda.
Ni ne trakti datumtipoj anymore.
Sed ĉi tie estas kie la fakto ke ni perdas datumtipoj
povas efektive esti iom de problemo por ni.
Nun ke la plus operatoro estas uzata por concatenate kordoj kaj aldoni nombroj
kune, JavaScript havas fari lian plej bonan divenon
kiel al kion mi volas fari por mi.
Kaj en ĉi tiu kazo, ĝi divenis malĝuste.
Ĝi ĵus seria tago, kio estus 0, unu, du, tri, kvar, kvin, aŭ ses,
kaj tiam ĝi simple kroĉitaj ke kaj tiam kroĉitaj unu.
Ĝi ne fakte adicii ilin kune.
Kaj tial tiuj lingvoj, PHP kaj Javascript,
ke abstrae for ĉi nocio de tipoj,
vi ne devas trakti ĝin anymore.
Ili ankoraŭ havas tipojn sub la kapuĉo.
Kaj ni povas, en situacioj kiel tiu, utiligi tiun fakton
dirante ion kiel eble tiun, kiu
estas diranta Ĝavoskripto, per la maniero, trakti tion kiel entjero,
ne traktas ĝin kiel linio, eĉ kvankam ni miksante kune kordoj
kaj entjeroj tie.
>> Estas nur unu el tiuj aĵoj ke ĝi ŝajnas tiel granda en kunteksto
ke ni ne devas trakti tipoj plu,
Sed foje vi instruos vin kolizii situacio
precize kiel tiu kie la fakto ke vi ne havas kontrolon super tipoj
povas miskarburi sur vi se vi ne estas zorgema.
Kaj do se ni pop reen inte al IDE, mi estas tuj liberigi el mia konzolo denove,
kaj mi tuj klaku kordo konstruaĵo versio du, kiu
Tie estas kie mi uzas ke parse int funkcio.
Nun ĝi estas presi el informo kiun mi atendis.
Lundo la tago numero unu, mardo estas tago numero du, kaj tiel plu.
>> Do ni parolu pri funkcioj denove.
Mi promesis ni parolus pri anonima funkcioj, kaj nun la kunteksto por ke
finfine alvenis.
Do antaŭ ol ni faras tion, ni parolu alian fojon pri arrays por nur sekundo.
Do tabeloj estas speciala kazo de objekto.
Fakte, ĉiu en JavaScript estas fakte objekto.
Do funkcioj estas speciala kazo de objekto,
entjeroj estas speciala kazo de objekto,
sed arrays specife havas kelkajn metodojn.
Memoru ĉar ili estas objektoj, ili povas havi proprietojn kaj metodoj.
Ili havas kelkajn metodojn kiuj povas esti aplikata al tiuj celoj.
Ekzistas metodo nomata grandeco, array.size,
kiu redonos al vin kiel vi povus atendi
la nombro de elementoj en via tabelo.
array.pop, ia kiel nia nocio de krevanta for
de stako, se vi memoras el niaj stakoj vídeo,
forigas la lasta elemento de la tabelo.
array.push aldonas novan elementon al la fino de tabelo.
array.shift estas ia kiel DQ, ĝi splisas eksteren
la unua elemento de tabelo.
>> Sed ekzistas ankaŭ alia speciala metodo de tabelo nomata mapo.
Kaj ĉi tiu estas speco de Interesa koncepto.
Do kio estas la ideo de mapo?
Vi vere vidi ĉi en pluraj aliaj lingvoj,
kaj ni ne parolas pri ia cartógrafos mapi tie,
ni parolas pri surĵeto funkcio.
En la kunteksto ni estas parolas tie, mapo
estas speciala operacio ni povas rezulti sur tabelo
apliki aparta funkcio por ĉiu ero de tiu tabelo.
kaj do ni dirus en ĉi kazo, eble array.map,
kaj ene de ĝi, ni pasante en mapo estas funkcio kiu ni volas
esti aplikita al ĉiu unuopa elemento.
Do ĝi estas speco de analogaj al uzanta buklo persisti super ĉiu ero
kaj apliki apartan funkcii al ĉiu ero,
nur JavaScript havas ĉi enkonstruita nocio de surĵeto kiu povas esti aplikita.
Kaj tiu estas granda kunteksto paroli pri anonima funkcio.
>> Do diru ni havas tiu tabelo de entjeroj.
Ĝi nomiĝas núms, kaj ĝi estas atingis kvin aferoj en ĝi, oni, du, tri, kvar,
kvin.
Nun mi volas mapi iuj funkcio sur al ĉi tabelo.
Mi volas havi funkcion apliki por ĉiu ero de la tabelo.
Nu, ni diru ke kion mi volas fari estas simple duobligi ĉiujn la elementoj.
Kion mi povus fari estas simple uzi buklo por var mi egalas 0, mi estas malpli ol
aŭ egala al 4, mi plie, pli, kaj tiam duobligi ĉiun numeron.
Sed mi povas ankaŭ fari ion kiel tiu.
Mi povas diri núms antaŭe unu, du, tri, kvar, kvin,
Nuntempe, tamen, mi ŝatus ke vi apliki surĵeto sur ĉi tabelo
kie mi ŝatus vin duobligi ĉiun numeron.
Kaj tio estas ĝuste kio okazas ĉi tie.
Sed rimarki kion mi pasante en kiel la argumento por mapi.
Jen anonima funkcio.
Kaj rimarki mi ne donis tiu funkcio nomon,
Mi nur donis gxin parametro listo.
Kaj tiel tio estas ekzemplo de anonima funkcio.
>> Ni ĝenerale neniam nomas tiun funkcio ekster la kunteksto de mapo.
Ni difinante ĝin kiel parametro mapi, kaj do ni ne vere
bezonas havi nomon por ĝi, se la Lin sola kiu lin importas estas mapo
kaj ĝin difinis dekstra tie interne de mapo.
Kaj tiel tio estas anonima funkcio.
Ni ne povis fari tion antaŭe.
Mapo iu funkcio kiu akceptas unu parametro, num,
kaj kion tiu funkcio faras Estas revenas num fojojn 2.
Kaj do post tiu mapado estis aplikita,
tiu estas nun kio núms rigardoj kiel, du, kvar, ses, ok, 10.
Kaj ni vidos pop super al mia retumilo fenestro kaj ĵus
rigardu ĉi vere rapide tiel.
>> Do mi havas alian butono tie en mia hejmpaĝo nomas duobla.
Kiam mi klakas duobla, kaj ĝi rakontas mi antaux gxi estis unu, du, tri, kvar,
kvin post du, kvar, ses, ok, 10.
Kaj se mi iros tien kaj klaku duobla denove, du, kvar, ses, ok, 10.
Kaj tiam poste, kvar, ok, 12, 16, kaj tiam 20.
Kaj kion mi faras en ĉi tiu funkcio?
Nu, se ni nur malfermu super al IDE, kaj Mi eltiros mian anoniman funkcion, tie
sur linio sep tra 13, mi estas faranta iomete delikataĵon tie,
sed mi simple presi el kio estas aktuale en la tabelo.
Tiam sur linio 16, 17, kaj 18, tie estas mia mapo.
Tie estas kie mi aplikanta ĉi duobligo funkcio por ĉiu ununura ero.
Kaj tiam iom pli sube, Mi nur faras la samon
Mi faris antaŭe, krom nun mi estas presi el la enhavon de la tabelo
poste.
Sed ĉiuj mi faris tie estas nur uzi anonima funkcio
mapi tra tuta tabelo.
>> Do unu pli granda temo por raporti en JavaScript estas la nocio de okazaĵo.
Okazaĵo estas iu kiu nur okazas kiam uzanto interagas kun via retejo
paĝo, do eble ili klaku io, aŭ eble la paĝo estas finita ŝarĝo,
aŭ eble ili jam kopiis ilian muson super io,
aŭ ili tajpis ion en eniga kampo.
Ĉiuj de ĉi tiuj aferoj estas okazaĵoj kiu donas sur nia retpaĝo.
Kaj JavaScript havas la kapablon apogi ion
nomata eventa traktilo, kion Estas callback funkcio kiu
respondas html okazaĵo.
Kaj kio estas callback funkcio?
Nu, estas ĝenerale nur alia citi por anonima funkcio.
Ĝi estas funkcio kiu Respondas al okazaĵo.
Kaj tio estas kie ni atingos la ideo de ligado certaj funkcioj
al aparta html atributo.
Plej html elementoj havas subteno por atributo
ke ni ne parolis pri en la html vídeo por iu kiel sur klako
aŭ sur ŝvebado aŭ sur ŝarĝo, ĉiuj el tiuj okazaĵoj
ke vi povas tiam skribi funkcioj kiu traktas tiujn eventojn
kiam tiuj okazaĵoj okazas sur via retpaĝo.
>> Kaj do eble via html aspektas io tiamaniere.
Kaj mi havas du butonojn tie, butono unu kaj butono du,
kaj tie mi havas aktuale difinita nenion,
sed ĉi tiu estas kie la atributo sur klako estas ŝajne parto de mia html etikedo.
Do ŝajne kiam mi difini kio estas daŭriganta ene de tiu atributo,
ĝi tuj estos kelkaj Ĝavoskripto funkcio kiu respondas al la okazaĵo
supozeble de klakanta sur butono unu aŭ butono du.
>> Kio estas speco de cool pri ĉi estas ni povas skribi genérico okazaĵo traktilo.
Kaj tiu evento Handler volo krei eventon objekto.
Kaj la evento objekto informos nin kiu el la du butonoj estis klakita.
Nun kiel faras tiun laboron?
Nu, ĝi eble aspektas tiel.
Do ni unue difini nian butonoj havi respondon al la callback
funkcio kiu nomos kiam la butono estas klakita,
ni vokos okazaĵo atentigo nomo.
Kaj rimarki en ambaŭ kazoj ni pasante en tiu okazaĵo parametro.
Do ni nomas tiun funkcion aŭ kiam ĉi tiu funkcio
Estas lanĉita de la okazaĵo okazas, ĝi tuj kreos tiun eventon objekto
kaj fordoni kiel parametro atentigi nomo.
Kaj tiu evento estas objekto tuj enhavos informon
pri kiu butono estis klakita.
Kaj kiel ĝi faras tion?
Nu, ĝi eble aspektas tiel.
Do nun en mia aparta JavaScript dosiero, mi povus
devos trovi tiun funkcio alert nomon,
denove akceptas ke okazaĵo parametro.
Kaj tiam tie estas kie mi estas eltrovanta kiu butono estis ekigita,
var ellasilon egalas okazaĵo skalara fonto elemento.
Kio estis la fonto kiu kreis tiu okazaĵo objekto kiu estis pasita en?
Ĉu butono aŭ ĉu butono du?
>> Kaj tiam tie ĉiuj mi faras estas presi el trigger.innerhtml.
Nu, en tiu kazo, en ĉi kunteksto, trigger.innerhtml
Estas ĝuste kio estas skribita sur la butono.
Ĝi nur do okazas se ni saltas reen por dua, kiu volus
esti kio estas en inter tiuj butono etikedoj.
Estos butono aŭ butono du.
Kaj ni rigardu kiel tiu evento traktilo volus
aspektas kvazaŭ ni havis ĝin kurante en praktiko.
>> Do unue, vi havas malfermis events.js,
kiu estas la JavaScript dosiero kie Mi difinis ĉi funkcio.
Kaj kiel vi pritondas vidi, estas preskaux precize kion
ni nur vidis sur la glito duan antaŭe.
Kaj mi iros al la hejmpaĝo ni uzis.
Kaj mi havas tie butono unu kaj butono du.
Kaj mi alklakas butono unu.
Vi alklakis butono unu, se vi povas vidi tie en la atentigo.
BONE.
Alklaku sur la butono du, vin alklakis butonon du.
>> Do ambaŭ butonoj havas la sama funkcio alvoko, dekstra?
Ili ambaŭ estis garde nomon okazaĵo, sed tiu okazaĵo objekto
ke gets kreita kiam ni alklakas ĝi rakontas nin kion butono estis klakita.
Ni ne devis skribi du apartajn funkcioj aŭ interkonsento kun havanta
pasi ajna aldona informo.
Ni simple fidanta sur kio Javascript volo
fari por ni, kiuj estas krei ke ia evento objekto pro ni.
Estas multe pli al JavaScript ol kion ni kovras en tiu video,
sed havante tiujn fundamentaj devus akiri vin
sufiĉe longan manieroj lerni ĉion kion vi
devas scii pri tio interesa lingvo.
Mi Doug Lloyd.
Jen CS50.