>> [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.