[REPRODUCCIÓ DE MÚSICA] 

DOUG LLOYD: Així que per ara som vells professionals en programació web, no? I hem cobert diversos idiomes a vídeos individuals. I ara farem una més, JavaScript. 

Primer les bones notícies, JavaScript és una de programació modern llenguatge molt com PHP la sintaxi es deriva de C, així que és un bon lloc per començar. És gairebé tan antiga com PHP, així, havent estat del voltant d'uns 20 anys. Va ser inventat al voltant al mateix temps que PHP. I Javascript és en realitat bastant fonamental per a l'experiència de l'usuari del web. De fet, hi ha tres llengües que diria espècie de compensar la l'experiència de l'usuari d'interactuar amb el lloc web, html, CSS i JavaScript. I ara anem a parlar una poc sobre JavaScript. 

La mala notícia, però, amb JavaScript és que estableix un munt de regles per a si mateix, i després se les trenca. I JavaScript pot ser realitat tipus de repte d'aprendre, perquè és a diferència de C i PHP, que són molt estructurat i tenen regles molt rígides de com les coses poden funcionar. JavaScript té classe de fet tan flexibles que potser les coses no van a treballar de la manera que esperem que, i potser realment no podem aprendre el nostre primer llenguatge de programació com JavaScript. Així que potser ja no ho fa fixat cap norma, i en realitat no reforçar els bons hàbits de codificació. Però ara que hem desenvolupat amb sort alguns hàbits bons de codificació, i així podem començar a incursionar en JavaScript una mica. 

Per escriure JavaScript, similar a l'obertura un arxiu C amb una extensió C dot o un arxiu PHP amb una extensió de punt PHP, tot el que necessitem fer és obrir un arxiu amb l'extensió d'arxiu del punt js. No necessita tenir cap especial delimitadors com ho vam fer en PHP. Aquest tipus d'angle suport de signe d'interrogació PHP que estem acostumats d'això, el camí li diem al nostre navegador que el que tenim és Javascript és mitjançant la inclusió de en una etiqueta html, i anem a veure una mica sobre com fer això en un moment. 

L'altra cosa que fa JavaScript diferent, però, és que s'executa en el client. Així que recordar amb PHP que mai podríem veure realment el PHP que va subratllar un lloc web. Si alguna vegada van veure The font de la pàgina, només ho faria veure l'html que era generada per que PHP. Però JavaScript s'executa en el client. El vostre JavaScript s'executa a l'ordinador. I és per això que vostè pot fer coses com afegir bloquejadors. Oi? Bloqueig anunci es fa generalment per matant a tot el Javascript que s'executa en un lloc web en particular. I pel fet que hauria de executar en el costat del client de la màquina, només pot aturar la JavaScript per funcionar del tot. Això també vol dir que quan s'utilitza un lloc web que inclou JavaScript, vostè ha d'enviar el codi JavaScript codi com a part de la seva resposta http al client quan ho sol·licitin. I pel que no podria voler utilitzar JavaScript per fer coses molt sensibles de la mateixa manera que la informació que passa sobre les contrasenyes dels usuaris cap enrere i a un altre, perquè són en realitat va rebre tot el codi font, no només l'HTML que es genera, com seria el cas amb, per exemple PHP. 

Llavors, com incloem JavaScript en el nostre html per començar? Bé, similar a CSS, en realitat, és una espècie de com ho fem aquí. Amb CSS tenim etiquetes d'estil. I dins d'aquestes etiquetes d'estil, podem definir un full d'estils CSS. De la mateixa manera amb JavaScript podem obrir etiquetes de script, altra etiqueta html que no ho vam fer parlar en el nostre vídeo html, i escriure en JavaScript entre aquestes etiquetes de script. També, però, com CSS, que podria vincular als afores arxius CSS i tirar d'ells en el nostre programa d'aquesta manera. Amb CSS també pot, perdó, amb Javascript també podem especificar l'origen atribut de l'etiqueta de script per enllaçar en JavaScript per separat, de manera que no ho fa ha de escriure-ho en entre etiquetes de script, que pot vincular en l'ús de que etiqueta script també. I igual que amb el cas de la CSS, on recomanem que probablement era en el seu millor interès per escriure el teu CSS en un arxiu separat en el cas que necessita per canviar-lo, igualment fem recomanem que escrigui la seva JavaScript en arxius separats i l'ús de la font d'etiquetes de script atribuir a lligar la seva habilitat en el seu html, la seva pàgina web. 

Així les variables de JavaScript, anem a començar a parlar de la sintaxi aquí. I anirem a través aquest tipus de forma ràpida, perquè hem fet això en PHP, de manera que tot això ha de ser bastant familiar. Així variables en JavaScript són molt similar a PHP variables. No hi ha especificador de tipus, i quan s'introdueix una variable, el prefix amb la paraula clau var. En PHP que anàvem a fer alguna cosa així, el signe de dòlar x. Així és com hem indicat una variable, però no, no esmenten el tipus de la variable en absolut. Ens agradaria dir alguna cosa com signe de dòlar x és igual a 44 en PHP. Si fèiem el el mateix en JavaScript, diríem var x és igual a 44. Així var és una mena de camí d'introduir una variable. Això és potser una mica més intuïtiu que només la variable signe de dòlar. 

Un cop més, ja que no hi ha tipus de dades, podríem fer això amb qualsevol tipus de dades, seqüències, qualsevol altra cosa seria tot ésser var. Condicionals, tot el nostre vells amics de C i PHP encara estan disponibles, pel que tenim si, else if, else, switch i pregunta marca de còlon. Interruptor restant tan flexible com estava en PHP, però tot això que estàs coneix a hores d'ara. I de manera similar amb bucles són els antics favorits de temps, fer temps, i per seguir al nostre abast. Així que ja sabem molt del espècie JavaScript bàsic de fonaments pel sol fet de tenir una mica del coneixement ara sobre C i PHP. 

Què passa amb les funcions en JavaScript? Bé, similar a PHP cada funció és introduïda amb la paraula clau function. Vostè diu que la funció i, a continuació començar a definir la seva funció. Què és una mica diferent sobre JavaScript, però, és la capacitat de tenir el que s'anomena una funció anònima. Així que vostè pot definir funcions que no tenen un nom. Això és una cosa que realment no han vist abans. Realment Farem servir el concepte d'una funció anònima una mica més endavant en aquest vídeo, perquè va a fer una mica més de sentit en el seu context quan ho veiem en una situació particular que he Vaig construir aquí. Però anem a fer una ullada en el que és una senzilla JavaScript funció podria ser similar. 

Així que m'he anat per davant i obert el meu CS50 IDE i ja m'he quedat Apache per començar el meu servidor en execució. I tinc aquesta imatge obert anomenat home.html. I vaig a zoom en una mica aquí. I en el fons, es pot veure el Home.html és només un munt de botons. I estic afirmant en la part superior aquí que aquesta és la secció JavaScript materials. Així que hi ha un munt de botons d'aquí, però ¿què aquests botons fan realment? 

Bé, ens dirigirem al meu IED, i home.html he obrir aquí. Al començament, aquí és on sóc vinculant en tots els meus arxius de codi font de JavaScript. Oi? Així que tinc anonymous.js, clock.js, Estic usant l'atribut d'origen de l'etiqueta script per enllaçar a l'arxiu. Així que no he escrit cap JavaScript directament en aquest arxiu, però m'he tirat a tot el JavaScript he escrit separat. I si ens desplacem fins aquí, aquest tots hem de buscar alguna cosa familiar amb una mica de nova sintaxi. Tenim aquí etiqueta de capçalera per funcions i després un botó. Tinc una entrada que és un botó de tipus, i pel que sembla quan faig clic, Vaig a trucar a alguns funció de la data d'alerta. I així és com podem espècie de barrejar una mica de JavaScript i HTML. En realitat juguen força bé junts, i el que sembla quan Faig clic en aquest botó, vaig per trucar a una data d'alerta funció. I de la mateixa manera tinc vaig definir comportaments per a tots els altres botons que estan en aquesta pàgina home.html, que seguirem tornant a durant el curs d'aquest vídeo. Però tornem a aquí i fer una ullada en clock.js, que és el Arxiu JavaScript que jo va escriure que té aquesta primera funció anem a fer una ullada a. Com es pot veure, començo la meva JavaScript funcionar amb la funció de la paraula clau, i jo he donat a aquest un nom, es diu data d'alerta. Dins d'allí, pel que sembla, es crea un nova variable local anomenada data actual. I jo vaig a assignar un igual a una nova data. I podríem entrar en un munt de detall pel que fa al que és una data, i realment Javascript és tan gran que no podem possiblement cobrir tot en un sol vídeo. Però n'hi ha prou amb dir, que això va per tornar a mi un element de dades que encapsula la data i l'hora actual. Estic emmagatzemant que en una variable que sóc pel que sembla va a alertar la data actual. 

Bé, el que fa d'alerta data actual sembla? Anem a fer una ullada a l'arxiu en si la part posterior sobre la finestra del navegador. Així que de nou, aquest és el botó que em s'han vinculat a aquesta funció amb nom. I faig clic allà i mira el que va fer, va alertar. Es va aparèixer aquest tipus de quadre dient mi que el moment actual és, segons sembla, que posa el 4 de novembre a les 10:43:43 del matí. I si faig clic una altra vegada, ara és uns segons més tard, no? Així que això és tot el que fa aquesta funció. Quan faig clic en aquest botó, fa esclatar cap amunt un missatge d'alerta a mi. Així que en realitat no és massa a les funcions això és diferent de PHP, només una mica de nova sintaxi que ve amb el treball amb JavaScript. 

Arrays en Javascript són bastant senzill. Per declarar una matriu, s'utilitza la sintaxi de claudàtors que estem familiaritzats amb des de PHP. I similar a PHP, ens També pot barrejar els tipus de dades. Així que aquest array, tant d'aquestes matrius ho faria ser perfectament legítima JavaScript. Un que és tots els nombres enters, i que es barregen diferents tipus de dades. 

Què és una cosa molt diferent en JavaScript, encara? Aquesta és la idea d'un objecte. Així que potser has sentit parlar de La programació orientada a objectes. Nosaltres no fem molt d'això en CS50, però farem una mica d'ell aquí en el context de JavaScript. Ara JavaScript té la capacitat de comportar-se com una programació orientada a objectes idioma, però no és en si mateixa exclusivament un objecte orientat llenguatge de programació. I això ve de nou de nou a per què he dit, pot ser molt difícil d'aprendre JavaScript com la seva primera programació idioma, perquè no fa adaptar realment un paradigma particular. 

C D'altra banda és una llenguatge de programació funcional. Si volem, les funcions són una mena de gran cap, no? Dicten el succeeix tota la resta. Volem canviar les variables, que anomenem funcions. Fem les coses a les funcions. Objectes en canvi, en un llenguatge orientat a objectes, objectes espècie de convertir-se en l'estrella i funcions es converteixen en una mena de secundària. Però el que és un objecte, el que És aquesta noció d'un objecte? Bé, si ajuda, pensa respecte al primer ordenar així com una estructura de C o una estructura que hem après abans. En C, una estructura conté una sèrie de camps, i potser ara podria començar a cridar a aquests camps de propietats. Però les propietats mai valer-se per si mateixos, no? Si defineixo una estructura per a un cotxe així amb els dos següents camps o propietats, un 1 sencer per a l'any del cotxe i un altre un personatge 10 cadena per al model del cotxe, Puc dir alguna cosa com això, Puc declarar una nova variable de tipus struct Herbie cotxe. I llavors puc dir alguna cosa com a iguals herbie.year 1,963, i herbie.model equival Beetle. Està bé. Estic usant els camps de la context de l'estructura, però jo mai podria simplement dir alguna cosa com això. Oi? No puc fer servir el nom del camp independent de l'estructura. És una espècie d'una cosa fonamental. 

Així de ser camps fonamental a les estructures C són molt similars a ser propietats fonamental per a objectes JavaScript. Però el que els fa particularment interessant és que els objectes també poden tenir el estan cridats mètodes, que són realment només una paraula elegant per a les funcions que són inherents a l'objecte també. Així que és una funció que només pot ser trucada en el context d'un objecte. Només un objecte que ha definit aquesta funció dins del seu, si vostè pensa sobre un estructura, la funció es defineix dins de les que defineixen claus de l'estructura. Així que només significa una cosa a l'estructura. I això és una mena del que estem fent aquí amb objectes i mètodes. És bàsicament com estem definir una funció que només té sentit en un objecte particular, pel que trucar a un mètode que l'objecte. I mai podem anomenar a això funció independent de l'objecte, de la mateixa manera que no podem dir any o model independent de l'estructura en C. 

Així que la programació funcional paradigmes veuen alguna cosa com això. Funció i després quan passes en l'objecte com un paràmetre. En una programació orientada a objectes idiomes, aquest tipus de obté capgirat, i ens agradaria pensar Com és això, object.function. Per tant, una mena d'aquest punt operador de nou el que implica que es tracta d'algun tipus de propietat o atribut de l'objecte mateix. Però això és el que un objecte llenguatge de programació orientat podria fer per fer una funció trucar a un mètode, de nou, que és només una paraula especial per a una funció que és inherent a un objecte. Això és el que sintaxi podria ser similar. I així anem a començar a veure alguns això en el context de JavaScript. 

També es pot pensar en un objecte una mena de matriu associativa, que estem familiaritzats amb des de PHP. Recordeu una matriu associativa permet nosaltres tenir parells de valors clau, en lloc de tenir índexs 0, un, dos, tres, i així successivament com que estem acostumats de C matrius. Les matrius associatives poden assignar paraules, com en el video PHP, parlàvem ingredients de les pizzes. I així que vam tenir una matriu anomenats pizzes, i ens tenia formatge era una clau i 8,99 $ era el valor, i després de pepperoni era una clau, 9,99 $ era un valor, i així successivament. I així, també podem pensar en un objectar tipus de similar a un associativa array. I així aquesta sintaxi aquí crearia un nou objecte anomenada herbie amb de dos propietats a l'interior de la mateixa. Any, que s'assigna el valor 1963, i el model, que s'assigna la cadena de Escarabat. 

I noto aquí que estic fent servir cometes simples en JavaScript. Vostè pot utilitzar cometes simples o dobles quan s'està parlant de cadenes. És només convencionalment el cas que la majoria de les vegades quan estàs escrivint JavaScript, només ha d'utilitzar cometes simples. Però podria utilitzar cometes dobles aquí, i això seria perfectament bé també. 

Així que recorda com en PHP vam tenir aquesta idea d'un per a cada llaç que ens permetria per repetir tot el valor de la clau parells d'un associativa matriu, perquè no tenen aquesta capacitat d'iterar a través de 0, un, dos, tres, quatre, etcètera? JavaScript té alguna cosa molt similar, però no diu per a cada bucle, es diu una en bucles. Així que si em vaig dir a mi com això, per a la clau var en l'objecte, això és tipus de similar a dir per a cada cosa com alguna cosa. Però tot el que estic fent aquí és la iteració a través de totes les claus de la meva objecte. I a l'interior de l'arrissat suports allà, ho faria utilitzar objecte clau entre claudàtors per referir al valor en aquest lloc clau. 

Com a alternativa, hi ha fins i tot un altre enfocament. Si tan sols només es preocupen pel valors, puc dir amb clau de l'objecte, i sols recórrer clau dins. Així que per la clau var en l'objecte, no tinc utilitzar claudàtors d'objectes clau dins del bucle. Per clau var l'objecte, que pugui només ha d'utilitzar claus dins del bucle, perquè jo només sóc específicament parlant dels valors allà. 

Així que anem a fer una tal mirar a la diferència només per mostrar ràpidament la diferència entre les quatre en i per la d'un molt específic matriu, el que tenim aquí, setmana matriu. Així que he de trobar una nova matriu que em vaig omplir de set cordes, Dilluns, Dimarts, Dimecres, Dijous, Divendres, Dissabte, Diumenge. I vull ara iterar a través d'aquesta matriu, impressió de certa informació. Si jo faig servir una al bucle imprimir informació, ¿Què creus que em vaig a posar? Bé, anem a fer una ullada. I abans de saltar sobre a la meva finestra del navegador, només sé que console.log és una espècie d'un sol forma de fer una F d'impressió en JavaScript. Però, què és la consola? Bé, això és el que anem anar a fer una ullada a aquest moment. 

OK, així que estem de tornada aquí a la meva finestra del navegador, i jo vaig a obrir les meves eines per a desenvolupadors. Un cop més, només estic colpejant F12 per obrir les eines de desenvolupament. I adonar-se que aquí al superior que he triat consola. Així que aquesta és la noció d'una consola de desenvolupador, i ens permetrà imprimir la informació d'una ullada, alguna cosa així com el terminal, però com veurem una mica més endavant, també podem escriure informació en per interactuar amb la nostra pàgina web. Me'n vaig a apropar una mica aquí, i vaig ara feu clic a en la prova. I quatre en test-- No vaig a et mostrarà el codi per a això en aquest moment, però ho aconseguiràs si descarregar el codi font que s'associa amb aquest vídeo-- és només que en el bucle que vam veure només una Fa segons en la diapositiva. 

Així que vaig a clic que botó i aquí, això és el que ha imprès en el consola, 0, un, dos, tres, quatre, cinc, 06:00. No em imprimeixo la informació dins d'aquests llocs de la matriu, perquè vaig utilitzar una al bucle. I l'interior del cos del bucle, I simplement imprimir clau no clau objectar. Però si ara em aclareixo la consola, i jo canviar a per de prova, i quatre de prova Dic jo faig servir per de bucle lloc i imprimir clau, si faig clic en això, ara m'estic posant la elements reals dins del meu objecte o la meva matriu en aquest cas. La meva sèrie de dies de la setmana. Vaig imprimir dilluns Dimarts, dimecres. Així que aquesta és la diferència entre una al bucle, que imprimeix només les claus si només utilitza clau interior del cos del bucle, i una per de bucle, que imprimeix els valors si s'utilitza només clau a l'interior del cos del bucle. 

Molt bé, com ara comencem a concatenar cadenes i potser barrejar algunes variables amb interpolació com si fóssim capaços de fer en PHP? Bé, estem bastant familiaritzats amb això des de PHP. Així és com ho faríem amb el operador punt per concatenar cadenes. En JavaScript, però, realment fem servir una mica anomenada l'operador més, que és potser fins i tot una mica més intuïtiva, oi? Estem afegint un munt de cadenes junts. Així que anem al capdavant cap enrere una vegada i veure el que aquest imprimirà si estem tractant d'imprimir tota la informació en setmanes fallida. Molt bé, així que aquí baix sota la concatenació de cadenes, Tinc dues opcions, la construcció de la cadena V1 V2 i després edifici cadena. I anem a veure per què necessitarà V2 en un segon. Però vaig clic a edifici V1 cadena, que El codi estàvem Només fer una ullada a, el console.log amb tots els avantatges. Anem a veure si aquesta gravats el que esperem. 

El dilluns és el dia número 01 de la setmana, Dimarts és el dia número 11 de la setmana. Bé, el que jo estava tractant a fer allà era arribar per imprimir Dilluns és el nombre dies un, dimarts és el dia número dos. Però sembla com si jo fos sempre imprimir un. Bé, per què és això? Bé, resulta que fer un altre cop d'ull en aquest petit fragment de codi aquí. Cal notar que estem fent servir el signe més operador en dos contextos diferents. 

I aquí és on potser les coses quin tipus de hem estat dient, oh, és tan gran. Nosaltres no tractem amb els tipus de dades més. Però aquí és on el fet que perdem tipus de dades en realitat pot ser una mica d'un problema per a nosaltres. Ara que l'operador de suma s'utilitza per concatenar cadenes i afegir números junts, Javascript per fer la seva millor conjectura en quant al que jo vull que faci per mi. I en aquest cas, que va endevinar malament. És dia només concatenats, que seria 0, un, dos, tres, quatre, cinc, o sis, i llavors, només es concatena això i després concatenen un. No posar realment junts. I pel que aquestes llengües, PHP i JavaScript, que abstreu aquesta noció de tipus, vostè no ha de tractar amb ell mai més. Ells encara tenen tipus sota el capó. I podem, en situacions així, aprofitar aquest fet dient alguna cosa com potser això, que està dient JavaScript, pel manera, tractar això com un sencer, no tractar-lo com una cadena, fins i tot tot i que estem barrejant cadenes i sencers aquí. 

És només una d'aquestes coses que sembla tan gran en el seu context que nosaltres no hem de tractar amb tipus més, però de vegades hauràs executar en una situació exactament com aquesta, on el fet que vostè no té control sobre els tipus pot tornar-se en contra de vostè si no vas amb compte. I pel que si ens pop tornar a IDE, estic va a netejar la meva consola de nou, i jo vaig a fer clic cordes edifici de la versió 2, que és on jo faig servir aquesta funció parse int. Ara s'està imprimint informació que estic esperant. Nombre de dia de dilluns, dimarts és dia número dos, i així successivament. 

Així que anem a parlar sobre les funcions de nou. Li vaig prometre que parlaríem d'anònims funcions, i ara el context perquè per fi ha arribat. Així que abans de fer-ho, anem a parlar de nou sobre les matrius per només un segon. Així arrays són una especial cas d'un objecte. De fet, tot en Javascript és en realitat un objecte. Així funcions són una cas especial d'un objecte, sencers són un especial cas d'un objecte, però matrius específicament tenir un nombre de mètodes. Recordeu perquè són objectes, poden tenir propietats i mètodes. Tenen un nombre de mètodes que es pot aplicar a aquests objectes. Hi ha un mètode anomenat mida, array.size, que tornarà a que com era d'esperar el nombre d'elements en la matriu. Array.pop, una mena de la nostra idea de fer esclatar apagat d'una pila, si recordes des del nostre vídeo piles, Elimina l'últim element de la matriu. Array.push afegeix un nou element al final d'una matriu. Array.shift és una espècie de com DQ, s'empalma a terme el primer element d'una matriu. 

Però hi ha també un altre especial mètode d'un array anomenat mapa. I això és una espècie de concepte interessant. Llavors, ¿quina és la idea d'un mapa? Segur que va a veure això en diversos altres idiomes, i no estem parlant d'un tipus de cartògrafs mapa aquí, estem parlant d'una funció de mapeig. En el context que estem parlant aquí, un mapa és una operació especial que pot dur a terme en una sèrie per aplicar una funció particular a cada element de la matriu. i així diríem en aquest cas, potser array.map, i dins d'ella, estem passant en mapa és una funció que volem per a ser aplicat a cada element. Així que és una espècie d'anàleg a usar un bucle per iterar sobre cada element i aplicar una determinada funcionar a cada element, simplement Javascript està construïda en noció d'un mapatge que es pot aplicar. I aquest és un gran context per parlar d'una funció anònima. 

Així que anem a dir que tenim aquesta matriu d'enters. Es diu nums, i que té cinc anys coses en ell, un, dos, tres, quatre, 5. Ara vull traçar alguns funció a aquesta matriu. Vull tenir aplica una funció a cada element de la matriu. Bé, diguem que el que vull fer és doblar tots els elements. El que podria fer és utilitzar un bucle per var I és igual a 0, I és menor que o igual a 4, I més, més, i després doblegar cada número individual. Però també puc fer alguna cosa com això. Puc dir nums era abans un dos tres quatre cinc, ara, però, m'agradaria que t'agradaria aplicar un mapatge en aquesta matriu on m'agradaria que duplicar cada número. I això és exactament ¿Què està passant aquí. Però noto que estic passant en com argument al mapa. Aquesta és una funció anònima. I noto que no he donat aquesta funció un nom, Jo només he donat una llista de paràmetres. I pel que aquest és un exemple d'una funció anònima. 

En general, no cridaria a això funció fora del context del mapa. Estem definint-lo com un paràmetre per cartografiar, pel que en realitat no necessita tenir un nom per a ell si el L'única cosa que li importa és el mapa i es va definir la dreta existeix dins del mapa. I el que aquesta és una funció anònima. No hem pogut per fer això abans. Ubicació alguna funció que accepta un paràmetre, num, i el que fa que la funció es torna num 2 cops. I així, després d'aquesta mapatge s'ha aplicat, això és ara el que sembla nums com, dos, quatre, sis, vuit, 10. I anem a pop al meu finestra del navegador i just fer una ullada a aquest molt ràpid també. 

Així que tinc un altre botó aquí a la meva pàgina d'inici anomenada doble. I quan faig clic doble, i es diu jo abans era un, dos, tres, quatre, cinc després de dos, quatre, sis, vuit, 10. I si torno i feu clic doble de nou, dos, quatre, sis, vuit, 10. I després, després, quatre, 08:00, 12, 16, 20 i, a continuació. I el que estic fent en aquesta funció? Bé, si només pop a IDE i Jo aixeco la meva funció anònima, aquí en la línia del 7 al 13, jo sóc fent una obra de fantasia poc aquí, però jo només estic imprimint el que hi ha actualment a la matriu. Després en la línia 16, 17, i 18, aquí està el meu mapa. Aquí és on estic aplicant aquesta duplicació funció per a cada element. I després una mica més avall, Només estic fent el mateix Que estava fent abans, excepte que ara estic imprimir el contingut de la matriu després. Però tot el que he fet aquí és només ha d'utilitzar una funció anònima per mapear a través de tota una matriu. 

Així que una més gran tema per parlar en Javascript és la noció d'un esdeveniment. Un esdeveniment és una cosa que simplement succeeix quan un usuari interactua amb la seva web pàgina, així que potser feu clic en alguna cosa, o potser la pàgina hagi acabat de carregar-se, o potser s'han mogut el ratolí sobre alguna cosa, o que hagi escrit alguna cosa en un camp d'entrada. Totes aquestes coses són esdeveniments que s'estan produint a la nostra pàgina web. I JavaScript té la capacitat de suportar alguna cosa anomenat un controlador d'esdeveniments, que és una funció de devolució de trucada que respon a un esdeveniment html. I el que és una funció de devolució de trucada? Bé, en general és més que un altre nom per a una funció anònima. És una funció que respon a un esdeveniment. I aquí és on arribem a la idea de la unió de certes funcions a un atribut html en particular. La majoria dels elements HTML tenen suport a un atribut que no ens parlem al html vídeo per a alguna cosa com el clic o en vol estacionari o en la càrrega, tots aquests esdeveniments que a continuació, pot escriure funcions que tenen a veure amb aquests esdeveniments quan aquests esdeveniments produir a la teva pàgina web. 

I el que potser el seu html es veu alguna cosa com això. I tinc dos botons d'aquí, un botó i el botó de dos, i aquí tinc actualment res definit, però aquí és on l'atribut de clic és aparentment part de la meva etiqueta html. Així que pel que sembla quan em defineixo el que és passant dins d'aquest atribut, que serà una cosa de JavaScript funció que respon a l'esdeveniment presumiblement de fer clic a botó d'un sol botó o dos. 

Què és una mena de fresc sobre això és que pot escriure un controlador d'esdeveniments genèric. I aquest controlador d'esdeveniments crear un objecte d'esdeveniment. I l'objecte d'esdeveniment ens dirà quin dels dos botons es fa clic. Ara, com funciona això? Bé, podria ser alguna cosa com això. Així que definirem en primer lloc els nostres botons per tenir una resposta a la devolució de trucada funció que es diu quan es fa clic al botó, anomenarem esdeveniment Nom d'alerta. I notar en els dos casos estem passar en aquest paràmetre d'esdeveniment. Així que cridem a aquesta funció o quan aquesta funció és provocada per l'esdeveniment succeeixi, que crearà aquest objecte d'esdeveniment i passar-ho com paràmetre per alertar nom. I això és objecte d'esdeveniment va a contenir informació sobre el qual es va fer clic al botó. ¿I com es fa això? Bé, podria ser alguna cosa com això. Així que ara en el meu separada Arxiu JavaScript, podria de trobar aquest Nom de la funció d'alerta, el que de nou accepta que paràmetre d'esdeveniment. I llavors aquí és on sóc detectant quin botó s'activa, gallet var equival esdeveniment element d'origen de punts. Quina va ser la font que va crear aquest objecte d'esdeveniment que va ser aprovada en? Va ser el botó un o dos botons era ella? 

I llavors aquí tot el que estic fent és imprimir trigger.innerhtml. Doncs bé, en aquest cas, en aquest context, trigger.innerhtml és just el que està escrit en el botó. El que passa si saltem esquena per un segon, que ho faria ser el que està en entre aquestes etiquetes de botons. Serà botó d'un o dos botons. I anem a fer una ullada a com aquest controlador d'esdeveniments faria mirar si haguéssim de funcioni en la pràctica. 

Així, en primer lloc, que hi hagi obertes events.js, que és l'arxiu JavaScript al He definit aquesta funció. I com es pot veure, és gairebé exactament el que acabem de veure en la diapositiva fa un segon. I vaig a anar a la pàgina d'inici que hem estat utilitzant. I tinc aquí el botó Un i dos botons. I vaig a fer clic en un botó. Va fer clic al botó d'un, si pot veure aquí a l'alerta. D'ACORD. Feu clic al botó de dos, fet clic en un botó de dos. 

Així que els dos botons tenen la mateixa crida a la funció, no? Tots dos estaven nom d'alerta esdeveniment, però aquest objecte d'esdeveniment que es crea quan fem clic a que ens diu quin botó es va fer clic. Nosaltres no hem d'escriure dos per separat funcions o fer front a tenir per passar qualsevol informació addicional. Estem confiant en ho farà JavaScript fer per nosaltres, que és crear aquesta tipus d'esdeveniment objecte en el nostre nom. Hi ha molt més per a JavaScript de el que hem cobert en aquest vídeo, però tenir aquests fonamental ha de aconseguir- un llarg camí força a aprendre tot el que necessita saber sobre aquest llenguatge interessant. Sóc Doug Lloyd. Això és CS50.