[REPRODUCCIÓN DE MÚSICA] 

DOUG LLOYD: Así que por ahora somos viejos profesionales en programación web, ¿no? Y hemos cubierto varios idiomas en videos individuales. Y ahora vamos a hacer una más, JavaScript. 

Primero las buenas noticias, JavaScript es una de programación moderno lenguaje mucho como PHP cuya sintaxis se deriva de C, así que es un buen lugar para empezar. Es casi tan antigua como PHP, así, habiendo sido de alrededor de unos 20 años. Fue inventado en torno al mismo tiempo que PHP. Y JavaScript es en realidad bastante fundamental para la experiencia del usuario de la web. De hecho, hay tres lenguas que diría especie de compensar la la experiencia del usuario de interactuar con el sitio web, html, CSS y JavaScript. Y ahora vamos a hablar un poco acerca de JavaScript. 

La mala noticia, sin embargo, con JavaScript es que establece un montón de reglas para sí mismo, y luego se las rompe. Y JavaScript puede ser realidad tipo de reto de aprender, porque es a diferencia de C y PHP, que son muy estructurado y tienen reglas muy rígidas de cómo las cosas pueden funcionar. JavaScript tiene clase de hecho tan flexibles que tal vez las cosas no van a trabajar de la manera que esperamos que, y tal vez realmente no podemos aprender nuestro primer lenguaje de programación como JavaScript. Así que tal vez ya no lo hace fijado ninguna norma, y en realidad no reforzar los buenos hábitos de codificación. Pero ahora que hemos desarrollado con suerte algunos hábitos buenos de codificación, y así podemos empezar a incursionar en JavaScript un poco. 

Para escribir JavaScript, similar a la apertura un archivo C con una extensión C dot o un archivo PHP con una extensión de punto PHP, todo lo que necesitamos hacer es abrir un archivo con la extensión de archivo del punto js. No necesita tener ningún especial delimitadores como lo hicimos en PHP. Ese tipo de ángulo soporte de signo de interrogación PHP que estamos acostumbrados de eso, el camino le decimos a nuestro navegador que lo que tenemos es JavaScript es mediante la inclusión de en una etiqueta html, y vamos a ver un poco acerca de cómo hacer eso en un momento. 

La otra cosa que hace JavaScript diferente, sin embargo, es que se ejecuta en el cliente. Así que recordar con PHP que nunca podríamos ver realmente el PHP que subrayó un sitio web. Si alguna vez vieron The fuente de la página, sólo lo haría ver el html que era generada por que PHP. Pero JavaScript se ejecuta en el cliente. Tienes JavaScript se ejecuta en su computadora. Y es por eso que usted puede hacer cosas como añadir bloqueadores. ¿Correcto? Bloqueo anuncio se hace generalmente por matando a todo el Javascript que se ejecuta en un sitio web en particular. Y debido a que tendría que ejecutar en el lado del cliente de la máquina, sólo puede detener la JavaScript para funcionar por completo. Eso también significa que cuando se utiliza un sitio web que incluye JavaScript, usted tiene que enviar el código JavaScript código como parte de su respuesta http al cliente cuando lo soliciten. Y por lo que no podría querer usar JavaScript para hacer cosas muy sensibles al igual que la información que pasa acerca de las contraseñas de los usuarios hacia atrás y a otro, porque son en realidad va a recibir todo el código fuente, no sólo el HTML que se genera, como sería el caso con, por ejemplo PHP. 

Entonces, ¿cómo incluimos JavaScript en nuestro html para empezar? Bueno, similar a CSS, en realidad, es una especie de cómo lo hacemos aquí. Con CSS tenemos etiquetas de estilo. Y dentro de esas etiquetas de estilo, podemos definir una hoja de estilos CSS. Del mismo modo con JavaScript podemos abrir etiquetas de script, otra etiqueta html que no lo hicimos hablar en nuestro video html, y escribir en JavaScript entre esas etiquetas de script. También, sin embargo, como CSS, que podría vincular en las afueras archivos CSS y tirar de ellos en nuestro programa de esa manera. Con CSS también puede, perdón, con Javascript también podemos especificar el origen atributo de la etiqueta de script para enlazar en JavaScript por separado, por lo que no lo hace tiene que escribirlo en entre etiquetas de script, que puede vincularlo en el uso de que etiqueta script también. Y al igual que con el caso de la CSS, donde recomendamos que probablemente era en su mejor interés para escribir tu CSS en un archivo separado en el caso que necesita para cambiarlo, igualmente hacemos recomendamos que escriba su JavaScript en archivos separados y el uso de la fuente de etiquetas de script atribuir a atar su JavaScript en su html, su página web. 

Así las variables de JavaScript, vamos a empezar a hablar de la sintaxis aquí. Y vamos a ir a través este tipo de forma rápida, porque hemos hecho esto en PHP, por lo que todo esto debe ser bastante familiar. Así variables en JavaScript son muy similar a PHP variables. No hay especificador de tipo, y cuando se introduce una variable, el prefijo con la palabra clave var. En PHP que íbamos a hacer algo así, el signo de dólar x. Así es como hemos indicado una variable, pero no, no mencionan el tipo de la variable en absoluto. Nos gustaría decir algo como signo de dólar x es igual a 44 en PHP. Si hacíamos el lo mismo en JavaScript, diríamos var x es igual a 44. Así var es una especie de camino de introducir una variable. Eso es tal vez un poco más intuitivo que sólo la variable signo de dólar. 

Una vez más, ya que no hay tipos de datos, podríamos hacer esto con cualquier tipo de datos, secuencias, cualquier otra cosa sería todo ser var. Condicionales, todo nuestro viejos amigos de C y PHP todavía están disponibles, por lo que tenemos si, else if, else, switch y pregunta marca de colon. Interruptor restante tan flexible como estaba en PHP, pero todo esto que estás conoce a estas alturas. Y de manera similar con bucles son los antiguos favoritos de tiempo, hacer tiempo, y por seguir a nuestra disposición. Así que ya sabemos mucho del especie JavaScript básico de fundamentos por el solo hecho de tener un poco del conocimiento ahora sobre C y PHP. 

¿Qué pasa con las funciones en JavaScript? Bueno, similar a PHP cada función es introducida con la palabra clave function. Usted dice que la función y, a continuación comenzar a definir su función. ¿Qué es un poco diferente acerca de JavaScript, sin embargo, es la capacidad de tener lo que se llama una función anónima. Así que usted puede definir funciones que no tienen un nombre. Esto es algo que realmente no han visto antes. Realmente Usaremos el concepto de una función anónima un poco más adelante en este video, porque va a hacer un poco más de sentido en su contexto cuando lo vemos en una situación particular que he Construí aquí. Pero vamos a echar un vistazo en lo que es una sencilla JavaScript función podría ser similar. 

Así que me he ido por delante y abierto mi CS50 IDE y ya me he quedado Apache para comenzar mi servidor en ejecución. Y tengo este archivo abierto llamado Home.html. Y voy a zoom en un poco aquí. Y en el fondo, se puede ver el Home.html es sólo un montón de botones. Y estoy afirmando en la parte superior aquí que esta es la sección JavaScript materiales. Así que hay un montón de botones de aquí, pero ¿qué estos botones hacen realmente? 

Bueno, nos dirigiremos a mi IED, y Home.html he abrir aquí. Al principio, aquí es donde estoy vinculando en todos mis archivos de código fuente de JavaScript. ¿Correcto? Así que tengo anonymous.js, clock.js, Estoy usando el atributo de origen de la etiqueta script para enlazar en el archivo. Así que no he escrito ninguna JavaScript directamente en este archivo, pero me he tirado en todo el JavaScript he escrito separado. Y si nos desplazamos hasta aquí, este todos debemos buscar algo familiar con un poco de nueva sintaxis. Tenemos aquí etiqueta de cabecera para funciones y luego un botón. Tengo una entrada que es un botón de tipo, y al parecer cuando hago clic en él, Voy a llamar a algunos función de la fecha de alerta. Y así es como podemos especie de mezclar un poco de JavaScript y HTML. En realidad juegan bastante bien juntos, y lo que al parecer cuando Hago clic en este botón, voy para llamar a una fecha de alerta función. Y del mismo modo tengo definí comportamientos para todos los otros botones que están en esa página home.html, que vamos a seguir volviendo a durante el curso de este vídeo. Pero volvamos a aquí y echar un vistazo en clock.js, que es el Archivo JavaScript que yo escribió que tiene esta primera función vamos a echar un vistazo a. Como se puede ver, empiezo mi JavaScript funcionar con la función de la palabra clave, y yo he dado a éste un nombre, se llama fecha de alerta. Dentro de allí, al parecer, se crea un nueva variable local llamada fecha actual. Y yo voy a asignar un igual a una nueva fecha. Y podríamos entrar en un montón de detalle en cuanto a lo que es una fecha, y realmente JavaScript es tan grande que no podemos posiblemente cubrir todo en un solo video. Pero basta con decir, que esto va para volver a mí un elemento de datos que encapsula la fecha y la hora actual. Estoy almacenando que en una variable que soy al parecer va a alertar a la fecha actual. 

Bueno, lo que hace de alerta fecha actual parece? Vamos a echar un vistazo al archivo en sí la parte posterior sobre la ventana del navegador. Así que de nuevo, este es el botón que me han vinculado a esta función con nombre. Y hago clic allí y mira lo que hizo, alertó. Se apareció este tipo de cuadro diciendo mí que el momento actual es, al parecer, que pone el 4 de noviembre a las 10:43:43 de la mañana. Y si hago clic otra vez, ahora es unos segundos más tarde, ¿no? Así que eso es todo lo que hace esta función. Cuando hago clic en este botón, hace estallar para arriba un mensaje de alerta a mí. Así que en realidad no es demasiado a las funciones eso es diferente de PHP, sólo un poco de nueva sintaxis que viene con el trabajo con JavaScript. 

Arrays en Javascript son muy claro. Para declarar una matriz, se utiliza la sintaxis de corchetes que estamos familiarizados con desde PHP. Y similar a PHP, nos También puede mezclar los tipos de datos. Así que este array, tanto de estas matrices lo haría ser perfectamente legítima JavaScript. Uno que es todos los números enteros, y que se mezclan diferentes tipos de datos. 

¿Qué es algo muy diferente en JavaScript, aunque? Esa es la idea de un objeto. Así que tal vez has oído hablar de programación orientada a objetos. Nosotros no hacemos mucho de eso en CS50, pero vamos a hacer un poco de él aquí en el contexto de JavaScript. Ahora JavaScript tiene la capacidad de comportarse como una programación orientada a objetos idioma, pero no es en sí misma exclusivamente un objeto orientado lenguaje de programación. Y esto viene de nuevo de nuevo a por qué he dicho, puede ser muy difícil de aprender JavaScript como su primera programación idioma, porque no hace adaptarse realmente un paradigma particular. 

C Por otra parte es una lenguaje de programación funcional. Si queremos, las funciones son una especie de gran jefe, ¿no? Dictan lo sucede todo lo demás. Queremos cambiar las variables, que llamamos funciones. Hacemos las cosas a las funciones. Objetos en cambio, en un lenguaje orientado a objetos, objetos especie de convertirse en la estrella y funciones se convierten en una especie de secundaria. Pero lo que es un objeto, lo que Es esta noción de un objeto? Bueno, si ayuda, piensa respecto al primero ordenar así como una estructura de C o una estructura que hemos aprendido antes. En C, una estructura contiene una serie de campos, y tal vez ahora podría empezar a llamar a estos campos de propiedades. Pero las propiedades nunca valerse por sí mismos, ¿no? Si defino una estructura para un coche así con los dos siguientes campos o propiedades, uno un entero para el año del coche y otro un personaje 10 cadena para el modelo del coche, Puedo decir algo como esto, Puedo declarar una nueva variable de tipo struct herbie coche. Y entonces puedo decir algo como iguales herbie.year 1,963, y herbie.model equivale Beetle. Eso está bien. Estoy usando los campos de la contexto de la estructura, pero yo nunca podría simplemente decir algo como esto. ¿Correcto? No puedo usar el nombre del campo independiente de la estructura. Es una especie de una cosa fundamental. 

Así que ser campos fundamental a las estructuras C son muy similares a ser propiedades fundamental para objetos JavaScript. Pero lo que los hace particularmente interesante es que los objetos también pueden tener lo están llamados métodos, que son realmente sólo una palabra elegante para las funciones que son inherentes al objeto también. Así que es una función que sólo puede ser llamada en el contexto de un objeto. Sólo un objeto que ha definido esta función dentro de su, si usted piensa acerca de un estructura, la función se define dentro de las que definen llaves de la estructura. Así que sólo significa algo a la estructura. Y eso es una especie de lo que estamos haciendo aquí con objetos y métodos. Es básicamente como estamos definir una función que sólo tiene sentido en un objeto particular, por lo que llamar a un método que del objeto. Y nunca podemos llamar a eso función independiente del objeto, al igual que no podemos decir año o modelo independiente de la estructura en C. 

Así que la programación funcional paradigmas ven algo como esto. Función y luego cuando pasas en el objeto como un parámetro. En una programación orientada a objetos idiomas, este tipo de obtiene volteado, y nos gustaría pensar Cómo es esto, object.function. Por lo tanto, una especie de ese punto operador de nuevo lo que implica que se trata de algún tipo de propiedad o atributo del objeto mismo. Pero esto es lo que un objeto lenguaje de programación orientado podría hacer para hacer una función llamar a un método, de nuevo, que es sólo una palabra especial para una función que es inherente a un objeto. Esto es lo que sintaxis podría ser similar. Y así vamos a empezar a ver algunos de esto en el contexto de JavaScript. 

También se puede pensar en un objeto algo así como una matriz asociativa, que estamos familiarizados con desde PHP. Recuerde una matriz asociativa permite nosotros tener pares de valores clave, en lugar de tener índices 0, uno, dos, tres, y así sucesivamente como que estamos acostumbrados de C matrices. Las matrices asociativas pueden asignar palabras, como en el video PHP, hablábamos ingredientes de las pizzas. Y así que tuvimos una matriz llamados pizzas, y nos tenía queso era una llave y $ 8,99 era el valor, y luego de pepperoni era una clave, $ 9.99 era un valor, y así sucesivamente. Y así, también podemos pensar en un objetar tipo de similar a un asociativa formación. Y así esta sintaxis aquí crearía un nuevo objeto llamada herbie con de dos propiedades en el interior de la misma. Año, que se asigna el valor 1963, y el modelo, que se asigna la cadena de Escarabajo. 

Y noto aquí que estoy usando comillas simples en JavaScript. Usted puede usar comillas simples o dobles cuando se está hablando de cadenas. Es sólo convencionalmente el caso de que la mayoría de las veces cuando estás escribiendo JavaScript, sólo tiene que utilizar comillas simples. Pero podría utilizar comillas dobles aquí, y eso sería perfectamente bien también. 

Así que recuerda cómo en PHP tuvimos esta idea de un para cada lazo que nos permitiría para repetir todo el valor de la clave pares de un asociativa matriz, porque no tienen esta capacidad de iterar a través de 0, uno, dos, tres, cuatro, ¿etcétera? JavaScript tiene algo muy similar, pero no llama para cada bucle, se llama una en bucles. Así que si me dije a mí como esto, para la clave var en el objeto, eso es tipo de similar a decir para cada algo como algo. Pero todo lo que estoy haciendo aquí es la iteración a través de todas las llaves de mi objeto. Y en el interior del rizado apoyos allí, lo haría utilizar objeto clave entre corchetes para referirse al valor en ese lugar clave. 

Como alternativa, hay incluso otro enfoque. Si tan sólo sólo se preocupan por el valores, puedo decir con clave del objeto, y sólo usar llave dentro. Así que para la clave var en el objeto, no tengo utilizar corchetes de objetos clave dentro del bucle. Para clave var del objeto, que pueda sólo tiene que utilizar claves dentro del bucle, porque yo sólo soy específicamente hablando de los valores allí. 

Así que vamos a echar un tal mirar a la diferencia sólo para mostrar rápidamente la diferencia entre las cuatro en y para la de un muy específico matriz, lo que tenemos aquí, semana matriz. Así que tengo que encontrar una nueva matriz que me llené de siete cuerdas, Lunes Martes miercoles, Jueves, Viernes, Sábado, Domingo. Y quiero ahora iterar a través de esta matriz, impresión de cierta información. Si yo uso una en el bucle imprimir información, ¿qué crees que me voy a poner? Bueno, vamos a echar un vistazo. Y antes de saltar sobre a mi ventana del navegador, sólo sé que console.log es una especie de un solo forma de hacer una F de impresión en JavaScript. Pero, ¿qué es la consola? Bueno, eso es lo que vamos ir a echar un vistazo a este momento. 

OK, así que estamos de vuelta aquí en mi ventana del navegador, y yo voy a abrir mis herramientas para desarrolladores. Una vez más, sólo estoy golpeando F12 para abrir las herramientas de desarrollo. Y darse cuenta de que aquí en el superior que he elegido consola. Así que esta es la noción de una consola de desarrollador, y nos permitirá imprimir la información de un vistazo, algo así como el terminal, pero como veremos un poco más adelante, también podemos escribir información en para interactuar con nuestra página web. Me voy a acercar un poco aquí, y voy ahora haga clic en en la prueba. Y cuatro en test-- No voy a te mostrará el código para ello en este momento, pero lo conseguirás si descargar el código fuente que se asocia con este video-- es sólo que en el bucle que vimos sólo una Hace segundos en la diapositiva. 

Así que voy a clic que botón y aquí, esto es lo que ha impreso en el consola, 0, uno, dos, tres, cuatro, cinco, seis. No me imprimo la información dentro de esos lugares de la matriz, porque utilicé una en el bucle. Y el interior del cuerpo del bucle, I simplemente imprimir clave no clave objetar. Pero si ahora me aclaro la consola, y yo cambiar a para de prueba, y cuatro de prueba Digo yo uso para de bucle lugar e imprimir clave, si hago clic en eso, ahora me estoy poniendo la elementos reales dentro de mi objeto o mi matriz en este caso. Mi serie de días de la semana. Imprimí lunes Martes Miércoles. Así que esa es la diferencia entre una en el bucle, que imprime sólo las llaves si sólo utiliza clave interior del cuerpo del bucle, y una para de bucle, que imprime los valores si se utiliza solo clave en el interior del cuerpo del bucle. 

Muy bien, ¿cómo ahora empezamos a concatenar cadenas y tal vez mezclar algunas variables con interpolación como si fuéramos capaces de hacer en PHP? Bueno, estamos bastante familiarizados con esto desde PHP. Así es como lo haríamos con el operador punto para concatenar cadenas. En JavaScript, sin embargo, realmente usamos algo llamada el operador además, que es tal vez incluso un poco más intuitiva, ¿verdad? Estamos añadiendo un montón de cadenas juntos. Así que vamos a la cabeza hacia atrás una y ver lo que este imprimirá si estamos tratando de imprimir toda la información en semanas array. Muy bien, así que aquí abajo bajo la concatenación de cadenas, Tengo dos opciones, la construcción de la cadena V1 V2 y luego edificio cadena. Y vamos a ver por qué necesitará V2 en un segundo. Pero voy clic en edificio V1 cadena, que El código estábamos Sólo echar un vistazo a, el console.log con todas las ventajas. Vamos a ver si esta grabados lo que esperamos. 

El lunes es el día número 01 de la semana, El martes es el día número 11 de la semana. Bueno, lo que yo estaba tratando que hacer allí era llegar para imprimir Lunes es el número días uno, Martes es el día número dos. Pero parece como si yo fuera siempre imprimir una. Bueno, ¿por qué es eso? Bueno, resulta que echar otro vistazo en este pequeño fragmento de código aquí. Nótese que estamos usando el signo más operador en dos contextos diferentes. 

Y aquí es donde tal vez las cosas que tipo de hemos estado diciendo, oh, es tan grande. Nosotros no tratamos con los tipos de datos más. Pero aquí es donde el hecho que perdemos tipos de datos en realidad puede ser un poco de un problema para nosotros. Ahora que el operador de suma se utiliza para concatenar cadenas y añadir números juntos, Javascript para hacer su mejor conjetura en cuanto a lo que yo quiero que haga por mí. Y en este caso, que adivinó mal. Es día sólo concatenados, que sería 0, uno, dos, tres, cuatro, cinco, o seis, y entonces, sólo se concatena eso y luego concatenan una. No poner realmente juntos. Y por lo que estas lenguas, PHP y JavaScript, que abstrae esta noción de tipos, usted no tiene que tratar con él nunca más. Ellos todavía tienen tipos bajo el capó. Y podemos, en situaciones así, aprovechar ese hecho diciendo algo como tal vez esto, que está diciendo JavaScript, por el manera, tratar esto como un entero, no tratarlo como una cadena, incluso aunque estamos mezclando cadenas y enteros aquí. 

Es sólo una de esas cosas que parece tan grande en su contexto que nosotros no tenemos que tratar con tipos más, pero a veces tendrás ejecutar en una situación exactamente como esta, donde el hecho de que usted no tiene control sobre los tipos puede volverse en contra de usted si no tienes cuidado. Y por lo que si nos pop volver a IDE, estoy va a limpiar mi consola de nuevo, y yo voy a hacer clic cuerdas edificio de la versión dos, que es donde yo uso esa función parse int. Ahora se está imprimiendo información que estoy esperando. Número de día del lunes, martes es día número dos, y así sucesivamente. 

Así que vamos a hablar acerca de las funciones de nuevo. Le prometí que hablaríamos de anónimos funciones, y ahora el contexto para que por fin ha llegado. Así que antes de hacerlo, vamos a hablar de nuevo acerca de las matrices por sólo un segundo. Así arrays son una especial caso de un objeto. De hecho, todo en JavaScript es en realidad un objeto. Así funciones son una caso especial de un objeto, enteros son un especial caso de un objeto, pero matrices específicamente tener un número de métodos. Recuerde porque son objetos, pueden tener propiedades y métodos. Tienen un número de métodos que se puede aplicar a esos objetos. Hay un método llamado tamaño, array.size, que volverá a que como era de esperar el número de elementos en la matriz. Array.pop, algo así como nuestra idea de hacer estallar apagado de una pila, si recuerdas desde nuestro vídeo pilas, Elimina el último elemento de la matriz. Array.push agrega un nuevo elemento al final de una matriz. Array.shift es una especie de como DQ, se empalma a cabo el primer elemento de una matriz. 

Pero hay también otro especial método de un array llamado mapa. Y esto es una especie de concepto interesante. Entonces, ¿cuál es la idea de un mapa? Usted realmente va a ver esto en varios otros idiomas, y no estamos hablando de un tipo de cartógrafos mapa aquí, estamos hablando de una función de mapeo. En el contexto que estamos hablando aquí, un mapa es una operación especial que puede llevar a cabo en una serie para aplicar una función particular a cada elemento de la matriz. y así diríamos en este caso, tal vez array.map, y dentro de ella, estamos pasando en mapa es una función que queremos para ser aplicado a cada elemento. Así que es una especie de análogo a usar un bucle para iterar sobre cada elemento y aplicar una determinada funcionar a cada elemento, simplemente Javascript esta construida en noción de un mapeo que se puede aplicar. Y este es un gran contexto para hablar de una función anónima. 

Así que vamos a decir que tenemos esta matriz de enteros. Se llama nums, y que tiene cinco años cosas en él, uno, dos, tres, cuatro, cinco. Ahora quiero trazar algunos función a esta matriz. Quiero tener aplica una función a cada elemento de la matriz. Bueno, digamos que lo que quiero hacer es doblar todos los elementos. Lo que podría hacer es utilizar un bucle para var I es igual a 0, I es menor que o igual a 4, I más, más, y luego doblar cada número individual. Pero también puedo hacer algo como esto. Puedo decir nums era antes uno dos tres CUATRO CINCO, ahora, sin embargo, me gustaría que te gustaría aplicar un mapeo en esta matriz donde me gustaría que duplicar cada número. Y eso es exactamente que esta pasando aqui. Pero noto lo que estoy pasando en como argumento al mapa. Esta es una función anónima. Y noto que no he dado esta función un nombre, Yo sólo he dado una lista de parámetros. Y por lo que este es un ejemplo de una función anónima. 

Por lo general, no llamaría a esto función fuera del contexto del mapa. Estamos definiéndolo como un parámetro para cartografiar, por lo que en realidad no necesita tener un nombre para él si el Lo único que le importa es el mapa y se definió la derecha existe dentro del mapa. Y lo que esta es una función anónima. No hemos podido para hacer esto antes. Ubicación alguna función que acepta un parámetro, num, y lo que hace que la función se vuelve num 2 veces. Y así, después de esta mapeo se ha aplicado, esto es ahora lo que parece nums como, dos, cuatro, seis, ocho, 10. Y vamos a pop a mi ventana del navegador y justo mira esto muy rápido también. 

Así que tengo otro botón aquí en mi página de inicio llamada doble. Y cuando hago clic doble, y se dice yo antes era uno, dos, tres, cuatro, cinco después de dos, cuatro, seis, ocho, 10. Y si vuelvo y haga clic doble de nuevo, dos, cuatro, seis, ocho, 10. Y luego, después, cuatro, ocho, 12, 16, 20 y, a continuación. Y lo que estoy haciendo en esta función? Bueno, si sólo pop a IDE y Yo levanto mi función anónima, aquí en la línea del siete al 13, yo soy haciendo una obra de fantasía poco aquí, pero yo sólo estoy imprimiendo lo que hay actualmente en la matriz. Luego en la línea 16, 17, y 18, ahí está mi mapa. Aquí es donde estoy aplicando esta duplicación función para cada elemento. Y luego un poco más abajo, Sólo estoy haciendo lo mismo Que estaba haciendo antes, excepto que ahora estoy imprimir el contenido de la matriz después. Pero todo lo que he hecho aquí es sólo tiene que utilizar una función anónima para mapear a través de toda una matriz. 

Así que una más gran tema para hablar en JavaScript es la noción de un evento. Un evento es algo que simplemente sucede cuando un usuario interactúa con su web página, así que tal vez haga clic en algo, o tal vez la página haya terminado de cargarse, o tal vez se han movido el ratón sobre algo, o que haya escrito algo en un campo de entrada. Todas estas cosas son eventos que se están produciendo en nuestra página web. Y JavaScript tiene la capacidad de soportar algo llamado un controlador de eventos, que es una función de devolución de llamada que responde a un evento html. Y lo que es una función de devolución de llamada? Bueno, por lo general es más que otro nombre para una función anónima. Es una función que responde a un evento. Y aquí es donde llegamos a la idea de la unión de ciertas funciones a un atributo html en particular. La mayoría de los elementos HTML tienen apoyo a un atributo que no nos hablamos en el html vídeo para algo como el clic o en vuelo estacionario o en la carga, todos estos eventos que a continuación, puede escribir funciones que tienen que ver con esos eventos cuando esos eventos producirse en tu página web. 

Y lo que tal vez su html se ve algo como esto. Y tengo dos botones de aquí, un botón y el botón de dos, y aquí tengo actualmente nada definido, pero aquí es donde el atributo de clic es aparentemente parte de mi etiqueta html. Así que al parecer cuando me defino lo que es pasando dentro de ese atributo, que va a ser algo de JavaScript función que responde al evento presumiblemente de hacer clic en botón de un solo botón o dos. 

¿Qué es una especie de fresco sobre esto es que puede escribir un controlador de eventos genérico. Y este controlador de eventos crear un objeto de evento. Y el objeto de evento nos dirá cuál de los dos botones se hace clic. Ahora, ¿cómo funciona eso? Bueno, podría ser algo como esto. Así que vamos a definir en primer lugar nuestros botones para tener una respuesta a la devolución de llamada función que se llama cuando se hace clic en el botón, llamaremos evento Nombre de alerta. Y notar en ambos casos estamos pasar en este parámetro de evento. Así que llamamos a esta función o cuando esta función es provocada por el evento suceda, que va a crear este objeto de evento y pasarlo como parámetro para alertar nombre. Y eso es objeto de evento va a contener información sobre el que se hizo clic en el botón. ¿Y cómo se hace eso? Bueno, podría ser algo como esto. Así que ahora en mi separada Archivo JavaScript, podría que encontrar este Nombre de la función de alerta, lo que de nuevo acepta que parámetro de evento. Y entonces aquí es donde estoy detectando qué botón se activa, gatillo var equivale evento elemento de origen de puntos. ¿Cuál fue la fuente que creó este objeto de evento que fue aprobada en? ¿Fue el botón uno o dos botones era ella? 

Y entonces aquí todo lo que estoy haciendo es imprimir trigger.innerhtml. Pues bien, en este caso, en este contexto, trigger.innerhtml es justo lo que está escrito en el botón. Lo que pasa si saltamos espalda por un segundo, que lo haría ser lo que está en entre esas etiquetas de botones. Será botón de uno o dos botones. Y vamos a echar un vistazo a cómo este controlador de eventos haría mirar si tuviéramos que funcione en la práctica. 

Así, en primer lugar, que haya abiertas events.js, que es el archivo JavaScript en He definido esta función. Y como se puede ver, es casi exactamente lo que acabamos de ver en la diapositiva hace un segundo. Y voy a ir a la página de inicio que hemos estado usando. Y tengo aquí el botón Uno y dos botones. Y voy a hacer clic en un botón. Hizo clic en el botón de uno, si puede ver aquí en la alerta. OK. Haga clic en el botón de dos, hecho clic en un botón de dos. 

Así que los dos botones tienen la misma llamada a la función, ¿no? Ambos estaban nombre de alerta evento, pero este objeto de evento que se crea cuando hacemos clic en que nos dice qué botón se hizo clic. Nosotros no tenemos que escribir dos por separado funciones o hacer frente a tener para pasar cualquier información adicional. Estamos confiando en lo hará JavaScript hacer por nosotros, que es crear esa tipo de evento objeto en nuestro nombre. Hay mucho más para JavaScript de lo que hemos cubierto en este video, pero tener éstos fundamental debe conseguirle un largo camino bastante a aprender todo lo que necesita saber acerca de este lenguaje interesante. Soy Doug Lloyd. Esto es CS50.