JASON HIRSCHHORN: Bienvenido, todo el mundo, hasta la semana nueve. Tenemos una semana emocionante por delante de nosotros porque tenemos nuestro conjunto problema final. También tenemos un nuevo lenguaje de la marca, JavaScript, que ya se encuentra en medio de la utilización no sólo para este conjunto de problemas, pero muchos de ustedes se probablemente utilizarlo para finales proyectos, especialmente proyectos fin de carrera basados ​​en la web. Así que eso es lo que vamos a repasar hoy después hablar brevemente acerca de los recursos, que hacemos cada semana. Vamos a saltar a JavaScript, y luego vamos a pasar toda la sección con un manos a la codificación de Entrenador de Delfines actividad 2K13, que es como Madden 2013, pero para los delfines y en JavaScript. [Risas] JASON HIRSCHHORN: Así que, como siempre, una lista de los recursos para que usted pueda ver. Estos recursos son especialmente importantes porque la próxima semana en El miércoles es un concurso, su segundo y prueba final de este curso. Al igual concurso cero, es 75 minutos y comienza un poco después de las 13:00. Abarca todo, desde el día cero de este curso, pero sin duda hace hincapié en todo lo que tiene sucedido desde cuestionario uno. Pero, por supuesto, hemos cubierto los bucles en el comienzo del año. Para bucles están probablemente todavía van a ser parte de este concurso, así que no es como se puede pasar por alto todo lo que ocurrido antes de la semana de cinco o cuestionario cero ya que este curso se basa sobre sí mismo mucho. Pero sin duda, el énfasis se pondrá en cosas que hemos aprendido desde la semana seis. Eso incluye PHP, JavaScript, SQL para Sin duda, y también el más avanzado estructuras de datos de las que hablamos en C. Toda una serie de otros temas, pero discutirá que la próxima semana mientras revisamos para el concurso. Y también, como siempre, si tiene alguna preguntas acerca de la prueba como eres preparación, no dude en enviarlas a mi manera. En este momento, ¿alguien tiene alguna preguntas rápidas sobre el concurso? Aceptar. No es necesario preocuparse de él o anormal sobre justo ahora, pero tenlo en la parte posterior de su mente, porque eso es pasando una semana y un día a partir de ahora. Por último, sé que estamos corriendo hacia Al final del semestre - sólo hay dos secciones después esto - pero todavía estoy emocionado y ansiosos por su colaboración si tiene alguna. Quiero hacer las personas del mejores dos secciones jamás. Probablemente será, porque cada sección es increíble y el mejor de todos. No sé cómo eso es posible, pero Todos ellos han sido fantástico, creo. Los comentarios que he recibido ha apagó nada y ninguno desde el hace un par de semanas, así que por favor, dar me algunos comentarios si lo tiene. Se necesitan tres minutos. Usted me puede decir cosas buenas que Quiero que siga haciendo o cosas que pueden trabajar. Yo estoy tratando de ser el mejor maestro posible, o que estoy tratando de hacer lo mejor Que puedo, pero no puedo hacer eso si no lo hago , saben que ustedes están haciendo. Y es difícil saber por qué estás cayendo dormido en clase, así que permítanme saber por qué después de eso fue el caso. Te mostré esta imagen la semana pasada. Se trata de las Teenage Mutant Ninja Turtles moto que tuve cuando era más joven, y seguimos a empujar ustedes sin ruedas de entrenamiento como lo sumergimos que en otro idioma. Pero puede estar seguro, JavaScript, como PHP, es muy similar a lo que has hecho en el pasado. Una gran cantidad de la lógica transfiere el excedente, si no la sintaxis, exactamente uno por uno. Pero, de nuevo, todos estos idiomas que hemos repasado en los últimos dos semana, aunque parece abrumadora, son increíblemente potente y permitirá usted pueda hacer mucho en su proyecto final y probablemente otros sitios web que usted código en el futuro. Así que sin más preámbulos, vamos para empezar a bucear en JavaScript. Vamos a hablar de ello brevemente y entonces realmente entrar en la práctica en parte de esta sección de codificación. Así que JavaScript es un script del lado del cliente idioma, lo que significa que es diferente a PHP y es diferente de C. JavaScript no está compilado y no es ejecutado por el servidor. Más bien, lo cargue. Usted carga una página con JavaScript al cargar una página web, y luego se ejecuta en su máquina. Lo que significa que usted puede ver toda la El código JavaScript que era enviada a su ordenador. A veces se acorta o codificación de un bit, cifra un poco, por lo que no puede decir explícitamente lo que está pasando. Por ejemplo, si usted echa un vistazo CS50 o la necesidad de personal para esta semana de problema establecido, y te vas a service.js, te darás cuenta de que en realidad no puede decirle lo que debe hacer a partir de lo que les hemos dado. Nos encriptada un poco para hacer que un poco más difícil. Sin embargo, se puede ver la exacta Archivo JavaScript que estamos ejecutando y nuestro programa se está ejecutando. Así que eso es lo que significa ser un lenguaje de script del lado del cliente. Al igual que en C y PHP, sin embargo, JavaScript tiene bucles for, if / else condiciones, mientras que los bucles. Similares a PHP, que tiene un bucle foreach también. Y de nuevo, muy similar a la sintaxis que hemos visto en lenguas que ya hemos trabajado. Por último, una de las partes más frescas JavaScript, y algo vamos a estar haciendo mucho hoy, y probablemente tendrás estar haciendo mucho con su conjunto P si no lo han experimentado ya, es usted puede revisar todos los errores que tiene en el código a través de la consola de JavaScript. Nos fijamos en la semana un poco pasado. Nos fijamos en un tipo diferente de la consola para inspeccionar una página, pero en Chrome, de nuevo, se puede ver el diseño, el código HTML, el documento que su página es que le muestra en la pantalla. También puede ver todos los JavaScript formar esa página, y usted puede también, como Le dije: ver todos los errores en la consola de JavaScript. Y vamos a experimentar más que en un poco cuando empezamos la codificación. Una cosa a tener en cuenta sobre JavaScript variables. Al igual que las variables de PHP, son vagamente escrito, por lo que no es necesario darles un tipo específico. En términos de alcance, que se define por la palabra clave "var". Así que si usted no pone una palabra clave en la parte delantera de algo, que acaba de escribir el nombre de la variable, a continuación, una asignación operador, en este caso el signo igual. Me estoy olvidando un punto y coma ahí mismo, pero supongamos que hay un punto y coma allí mismo. Entonces usted está creando una variable global. Si pones la palabra clave "var", y luego usted está dando algún tipo de locales ámbito de aplicación, si eso es de una función o un bucle. Así que eso es una cosa que nota para las variables. JavaScript es el lenguaje. jQuery es la biblioteca construida en la cima de el lenguaje JavaScript, y usted tiene visto antes en la conferencia. Le recomiendo, si usted va a estar usando JavaScript en su última proyecto, que se llega a saber jQuery. Hace todo lo que quieras hacer mucho, mucho más fácil. También viene con una maravillosa documentación y ejemplos para ayudar a conseguir comenzó. Hoy vamos a estar usando jQuery también. Estos, lo que tengo en esta diapositiva, son los conceptos básicos de jQuery. En la parte superior de su archivo HTML o lo que sea - el archivo index.php, su archivo index.html - es necesario incluir estas dos líneas. Se trata de líneas muy genéricas. La primera línea incluye el jQuery Archivo JavaScript, y la segunda línea incluye dondequiera que has escrito su propio código JavaScript. Y, por supuesto, porque en su El código JavaScript que usted ha utilizado probablemente algunas funciones de biblioteca jQuery, que tiene que ir después de la jQuery script de inclusión. Vamos a explorar este de nuevo en un momento. Y finalmente, en el archivo JavaScript Yo llamo a esto una index.js. Podría ser scripts.js. Sea lo que sea, lo que sea JavaScript file has, empiezas general con esta línea de código, muestra de dólar, paren abiertos, documento, cerca paren, período, listo, paren abiertas, la función, paren paren abrir, cerrar, y luego corchete. Lanza tu código dentro de allí, y luego terminar con una llave, cerca paren, punto y coma. Así que toma esto como un hecho. Si usted va a estar usando jQuery, envuelva todo el código jQuery en el interior esta línea de código. Y vamos a ver que de nuevo en un segundo. Una vez más vamos a trabajar con jQuery, y por favor, hacer preguntas a medida que avanzamos hoy en día, pero ¿alguien tiene alguna preguntas acerca de jQuery o JavaScript en este momento? Aceptar. Así que sin más preámbulos, les presento a usted Dolphin Trainer 2K13. Estoy muy emocionado acerca de esta última versión del producto. Oh, no! Estaba tan emocionada. Yo iba a mostrar a ustedes, pero parece que no lo hemos hecho implementado todavía. Vamos a hacer esto un poco más grande. Así que si me carga el código de Dolphin Entrenador - Maldita sea. Lo siento, chicos. Yo estaba trabajando en esto antes de la clase. Yo pensé que tendría que terminar, pero creo que todavía tengo algo trabajo queda por hacer. Pero, por suerte, ustedes todos tienen algún JavaScript y jQuery práctica, por lo que vamos a seguir adelante y terminar esto juntos. Creo que envié ustedes copias de este, porque yo estaba súper emocionada al respecto, por lo que debe tener el mismo código que tengo. Vayamos a - Dang, chicos, lo siento. Vamos a la cabeza en el terminal, sin embargo. Al igual que con su problema pasado conjuntos, si usted tiene mi - vamos a hacer esto un poco más grande, también, para ustedes - usted tomó mi archivo zip. Usted probablemente ha descomprimido ella. Vamos a ir aquí. Y luego, con suerte, se mudó en el mismo directorio donde guardó su problema fijó ocho código. Y salvo en ese directorio para que yo pueda acceder a él - o que todos podemos tener acceso a la código en el navegador Chrome en nuestro ordenador. Y una vez más, para llegar a ese código, simplemente escriba la dirección que se encuentra en la parte inferior, lado derecho de su aparato, aquí abajo. A encontrar su dirección IP. Usted escribe que en el navegador Chrome en el equipo, y en este caso, ya que estamos en la carpeta sección nueve, también tenemos que añadir un la sección nueve slash. Déjame - ¡Uy. Voy a minimizar esto, así que no lo hago hay que seguir accediendo a eso. Así que así es como puedo configurar este código. Yo ya lo he hecho ya. Yo no voy a ir a través de los pasos, porque eso es lo que el a partir del conjunto de problemas camina a través de cómo lo hacen. Así que adelante y obtendrá para establecer este hasta en un segundo, pero primero vamos a explorar este código como un grupo. Vamos a ver lo que hice. Traté de conseguir la mayor parte de lo hecho antes de la clase, pero creo que era un poco más atrás. Así que vamos a abrir index.html. Aceptar. Y index.html es una muy simple página porque no lo hice que desee obtener demasiado loco. Tenía muchas ganas de asegurarse de que estaba trabajando, pero supongo que me no llegó tan lejos. Aquí está la cabeza, lo que viene a la derecha dentro de esas etiquetas HTML, y nos damos cuenta de un par de cosas la derecha del palo. Tenemos el derecho de archivos CSS aquí y el adecuado ubicación del archivo CSS. Tenemos la biblioteca jQuery aquí, y te darás cuenta de algo diferente sobre esto. La fuente es algo muy, muy larga. ajax.googleapis.com/-- manera se parece a una URL, pero no duda parecerse js / jquery.js. Y eso es porque decidí que no quiero tener que descargar el archivo jQuery, y se arrastra y ahorrar en mi biblioteca, y estar responsable de la misma. Más bien, yo sólo voy a tomar la Archivo JavaScript que Google anfitriones. Así que Google en realidad alberga una serie de bibliotecas, y jQuery, ya que es uno de los más populares, que alberga que uno así. Y porque es lo hospeda, no lo hago tenga que preocuparse por ello, y actualizarlo, aunque cuando lo hacen actualizarlo Probablemente voy a tener que cambiar estos números aquí. Pero eso es sólo para hacer que todo mi archivo sistema un poco menos limpio. No me gusta realmente de alojamiento todos estos archivos. Es mucho más agradable si Google tiene que acogerlos para mí. Así que esto, de nuevo, es conseguir que el conjunto JavaScript archivo, pero sólo está siendo organizada por Google en lugar de en mi sistema de archivos en mi computadora. También vemos que puse en dos más archivos dolphins.js y trainer.js. Pronto nos ocuparemos de los de un segundo. Y, por último, este título aquí. ¿Quién me puede decir lo que este código dentro estas etiquetas de título, donde que va en mi página? AUDIENCIA: Al igual que lo que la barra de herramientas o lo que sea? JASON HIRSCHHORN: Sí, en la pestaña poco en la parte superior de la ventana de Chrome. Ahí es donde el texto va. Dentro del cuerpo, como pueda ver, no hay mucho material aquí. Tengo sólo tres divs. Yo les doy algunos identificadores, y Me puse un poco de texto pulgadas Pero supongo que es por eso que hacemos no ver nada por aquí. En realidad, vemos Dolphin Trainer 2K13. Vemos TODO. Yo no sé de dónde va a venir de porque yo no veo que aquí. Así que tal vez esa es una de mis archivos JavaScript. Vamos a comprobar que en un segundo. ¿Puede alguien decirme qué este ID significa aquí? AUDIENCIA: Es una forma de llamar a la sección específica en el [inaudible] presentar? JASON HIRSCHHORN: Si. Es sólo una manera de hacer referencia a este div particular. ID son idealmente único. ¿De acuerdo? Público exigente. Por lo tanto, los identificadores son generalmente único. Usted les da a uno específico elemento en el código. ¿Qué pasa si yo quería hacer referencia a un número de los elementos, ya sea para CSS estilo o jQuery? ¿Qué atributo puedo darles? AUDIENCIA: Class. JASON HIRSCHHORN: Una clase, exactamente. Derecha. OK, así index.html, de nuevo, No hay mucho que hacer aquí. Así que vamos a abrir otro archivo. Vamos a ver lo que tengo. Eso es todo lo que tengo aquí. Vamos a entrar en la carpeta JS. No me voy a preocupar por la CSS por ahora. Abramos dolphins.js. Lo sentimos. O más bien - Aceptar. Así, dolphins.js, que en realidad se ve muy similar a algunos de los códigos que se les dio en el problema fijó ocho. Puede desplazarse a través de ella. ¿Alguien puede decirme, sin embargo, lo que es DELFINES? Esta todas mayúsculas delfines? ¿Qué es eso? ¿Qué tipo de datos es eso? AUDIENCIA: Array. JASON HIRSCHHORN: Es una matriz. Y sabemos que es una matriz porque ver estos corchetes aquí. Y otra persona, lo que es es una serie de? AUDIENCIA: Objetos? JASON HIRSCHHORN: Es una matriz de objetos. Y usted puede ver eso. ¿Y cómo sabes que es una matriz de objetos? AUDIENCIA: Debido a que usted tiene esta de colon arranque entre llaves? JASON HIRSCHHORN: Así es. Así que tengo esas llaves aquí, y entonces usted puede ver la coma separar los diferentes objetos en esta matriz. Y luego dentro de cada objeto, tengo algo colon y algo más. Y lo que es en general esta primera parte, la cosa a la izquierda de los dos puntos? Lo que se llama eso? Genéricamente? ¿Cómo nos referimos a eso? AUDIENCIA: Index? JASON HIRSCHHORN: Índice, o probablemente más generalmente, la tecla. Y luego en la mano derecha lado, el valor. Así índice, clave. Pero si estamos hablando de aquellos que, generalmente nos referimos a la cosa en el lado izquierdo. En una matriz simple, de nuevo, teníamos índices 0. 1. 2. 3. 4. Y en delfines, tendremos delfín 0, delfines 1, 2 delfines, delfines 3, delfines 4. Tenemos también, dentro de este objeto, que en general no hacer referencia a las cosas. O si sólo tenemos este objeto correcto aquí, no vamos a decir que el objeto 0, objeto 1, objeto 2. Vamos a decir el nombre de objeto o tipo de objeto, la duración de objetos, etcétera. Y así es como vamos a llegar al valor en el lado de la mano derecha. Así que si nos dijo el nombre del objeto, por ejemplo, que iba a conseguir esta cadena, "Gracia". Así como ustedes han dicho a mí, delfines es simplemente un conjunto de objetos. Y ves todos los objetos tener un nombre, un tipo, un género. ¿Eso pronuncia correctamente? ¿Alguien? Género? Grande. Una longitud, un peso. ¿Eso pronuncia correctamente? Creo que sí. Y una foto, solo una URL a algunos archivos en línea. Y justo aquí, cerramos la matriz, allá abajo en el lado izquierdo muy lado de mi pantalla. Así que eso es todo el dolphins.js es. Oh, Dios mío. Esto lo explica. Pensé que habíamos terminado todo, pero mirada. Hay toda clase de Todos. Bueno, espero que podamos hacer todo esto junto. Pero primero vamos, antes de que hagamos que, sólo a pie a través de este código muy rápidamente. Así que como he mencionado, nos vemos en el mismo a partir de esta línea que tenía en el diapositivas, (document). ready (function (). Y básicamente lo que va a hacer es esperar hasta que todo en su páginas se ha cargado, así que espere hasta es todo arreglo, todo está bien ir, y luego comenzar a ejecutar este código. Así que si usted necesita para ejecutar algo de PHP, si usted necesita para obtener algunas imágenes, sea ​​lo que sea, todo el código ha sido configurado y listo para ir a su página de índice o lo que la página se ha cargado, y ahora vas a empezar ejecutar su código. Así que lo primero que hacemos es hemos creado esta matriz. Y yo no tengo la palabra clave var allí, así que ¿cuál es la ámbito de aplicación de esta matriz? AUDIENCIA: Es global. JASON HIRSCHHORN: Es global, por lo que ocean_array se puede acceder desde en cualquier lugar en este archivo. Y luego vemos este bucle for. No dice foreach, pero esto es esencialmente un bucle foreach. Y esto es sólo la versión de JavaScript por lo que para cada delfín var en los delfines, qué tipo de datos? A pesar de que, de nuevo, JavaScript no hace tener estos tipos de datos en sí, lo que tipo de datos es el delfín? AUDIENCIA: Objeto. JASON HIRSCHHORN: Es un objeto. Estamos recibiendo cada objeto en la matriz de los delfines. Así que aquí, parece que me olvidé de poner todos estos delfines de nuestra DELFINES gigantes piensan en el ocean_array, por lo que probablemente debería hacer que primero. Y entonces, algo que se llama esta variable piscina. Estoy estableciéndola en null. Y entonces yo llamo a esta función draw_ocean. Entreno un delfín cuando su la imagen se hace clic en - Yo no he hecho eso - y establecer un libre de delfín cuando se hace clic en el botón. Así que estas son las cosas que tengo que hacer. Supongo que debería darte un poco de antecedentes sobre lo que yo estaba tratando de hacer. Así que si vamos aquí, lo que realmente quería esto se vea como era un arreglo de discos hasta aquí, en lugar de lo que dice "TODO:" Yo quería una mesa, en esencia, con la fotos de todos los delfines. Y a continuación, al hacer clic en una imagen, Quería que lo dejó en la mitad inferior de la pantalla y dar toda la información sobre el mismo, y que sería el delfín en la piscina, el delfín que estaba entrenando. Así que pensé que sería genial. Usted tiene todos estos delfines en el océano aquí, a continuación, haga clic en uno, y se iría a la piscina, y entonces usted podría entrenarlo. Así que eso es lo que yo estaba tratando de hacer. Y entonces habría un botón aquí abajo en la piscina, y puede hacer clic, así como: "Set Free", y puede establecer el delfín libre, y volvería en el océano. Así que eso es lo que estaba tratando de crear, pero de nuevo, voy a necesitar su ayuda para crearlo. Así que espero que, algunas de estas palabras clave o algunos de estos términos se iniciará tener sentido ahora, en el contexto de este programa. Sigamos buscando a través de este archivo. Llamamos a esta función draw_ocean. Es la única función que llamamos desde la sección document.ready. Así que llamamos a esta función draw_ocean y todo apunta a que crea una cadena, una variable, aquí. Algo a poner en la cadena, añade más cosas para la cadena, añade más cosas de la cadena, y entonces esta línea de código. Yo digo que imprime la cadena de HTML. Y alguien me explique lo esta línea de código hace? Bueno, primero que nada, lo que hace significa que el signo de dólar? No es una variable de PHP, pero lo quiere decir que el signo de dólar? AUDIENCIA: integración en el ID de HTML - es como si se vincula con el código HTML? JASON HIRSCHHORN: ¿Qué pasa que el signo de dólar? ¿Qué indica el signo del dólar? AUDIENCIA: integración en el HTML de alguna manera? JASON HIRSCHHORN: ¿Dónde hemos visto este signo de dólar antes de JavaScript? Lo vimos en la conferencia. Hemos hablado de ello. ¿Qué significa el signo del dólar? AUDIENCIA: Algo con jQuery? JASON HIRSCHHORN: Exactamente. Esto tiene algo que ver con jQuery. Este signo del dólar significa que estoy utilizando una función de biblioteca jQuery aquí. Exactamente derecha. Así que escribimos el signo del dólar, y luego tenemos este paren abierto y cerrado paren, y en su interior, lo que pasa en el interior hay cuando se está utilizando un función de la biblioteca jQuery, o eres utilizando la librería jQuery? Una vez más, que lo vio en la conferencia. ¿Puede alguien darme - y usted También ver algo aquí. Lo que va dentro de allí? Jeff, dame una suposición. ¿Qué se parece esto, # océano? ¿Dónde hemos visto esto antes? AUDIENCIA: ¿Es una biblioteca o algo así? No tengo ni idea. JASON HIRSCHHORN: Bueno, vamos a me abro punto índice - nope, lugar equivocado. Así que vemos que tenemos algo llamado océano aquí. ¿Dónde hemos visto el hashtag # océano océano, la sintaxis antes? ¿Sí? AUDIENCIA: CSS? JASON HIRSCHHORN: En CSS. Así que queríamos el estilo de algo, recuerde que nosotros pondríamos la CSS hashtag selector de, o hashtag océano, por ejemplo, y todo el formato que hemos querido dar a la cosa con ocean ID pongamos dentro de allí. Así que aquí dentro no es CSS selector va en aquí. jQuery define su propio tipo de selectores. Pero es la misma idea, y de hecho muchos de ellos se superponen con CSS. Así que dentro de estos paréntesis abiertos, poner un selector, y sea cual sea el selector se refiere, eso es lo que usted va a estar usando. Así que en este caso, estoy seleccionar ID océano. Si tuviera una clase - digamos que tengo una clase de cosas llamado "imágenes", y me doy de que a un gran cantidad de elementos, ¿cómo hago referencia una clase de cosas llamadas "imágenes?" AUDIENCIA: Creo que fue punto. JASON HIRSCHHORN: Con un punto. Así que si en vez pongo imágenes de punto de aquí, Eso me daría la clase de cosas llamadas "imágenes". Por supuesto, esto es muy poderoso, y puede hacer referencia a un montón de cosas. De hecho, podría hacer referencia básicamente cualquier etiqueta de HTML. Así que si yo quería hacer eso, td, que es una etiqueta que hemos visto antes, cuando la creación de una mesa. Probablemente usted está familiarizado con que a partir de P puesto siete. En este caso, en realidad va para seleccionar todos. Va a darme array de todas las etiquetas td. Pero eso puede ser un poco abrumador, así que aquí para allá ahora mismo estamos voy a quedar a sólo referencia a los identificadores. Así que lo que esto hace, de nuevo, es que obtiene, en este caso - Lo siento. Vaya aquí, de index.html. Es un océano, en lugar del ID del océano hace referencia a un div, por lo que esta parte de este línea de código obtiene ese div. Y entonces este punto significa que estoy llamando una función, y el nombre de ese función es HTML. Y esa es la abreviatura de, si ustedes lo vieron antes, muestra de dólar, documento, dot obtener elemento por ID, dot HTML interno. Esto es sólo la versión de jQuery. Así la función de HTML sólo obtiene el código HTML interno. De ese elemento. Así que de nuevo, si miramos hacia atrás aquí, vamos a ver que no hay código HTML interno. Y así, si lo hiciera, lo haría estar tratando de conseguir el código HTML. Cuando escribo esto, estoy establecer el código HTML. Así que estoy pasando esta función para cuerda, la cadena que he creado aquí, y diciendo que poner dentro de la div océano. ¿Sí? AUDIENCIA: Cuando usted consigue el HTML, que es sólo el una copia si, ¿no? Usted no está de extraerlo. JASON HIRSCHHORN: Así es. Si yo lo hice y quería para guardar esto en var - ¡Uy. Eso ayudaría a difundir toda la información que estaba allí y guardarlo en otro variables, hacer una copia del mismo. AUDIENCIA: OK. Lo tengo. JASON HIRSCHHORN: Así que creó algunos HTML, salvo que en la cadena. Ahorramos un poco más. Aquí usted ve esa cadena TODO. Así que eso es probablemente donde estamos conseguir que el TODO de cuando entramos en nuestra página. Y, de hecho, si hago clic derecho en TODO, Inspeccionar Elemento, hablamos de esta semana pasada. Así fue como pudimos ver el código HTML estructura de nuestra página. Se dará cuenta de que aquí abajo - vamos a hacer esto un poco más grande, también - tenemos nuestra ocean ID div aquí. Todo el mundo ve que la línea de código? Y eso es lo que los tipos en index.html. Dentro de ella, vemos ahora esto línea de la tabla de código. Y lo que esa línea de la tabla de código es, este es el código que acaba de insertar en este elemento. Y es que mirar dentro de él, nunca colgroup y tbody con tipo. Que se ha añadido para nosotros porque hicimos algunas cosas de lujo. Pero te darás cuenta de que hay la tr, ahí está el td con TODO. Así que parece que, de nuevo, el código que hemos escrito aquí. Eso es exactamente lo que este línea estaba haciendo. Estaba tomando nuestra cadena HTML y poniéndolo dentro de este div aquí. En un principio no tiene nada. Esta página se carga. Signo de dólar, document.ready. Esto comienza a ejecutar. Llamamos a la función draw_ocean y dentro de la función draw_ocean tomamos este código HTML y ponerlo dentro de ese div. Ya pasamos por mucho allí. ¿Alguien tiene alguna pregunta acerca de eso? O cómo funciona, o jQuery? Porque si usted entiende que, a continuación, jQuery debe venir con suerte relativamente fácil. ¿Sí? AUDIENCIA: Lo que había en el interior del paréntesis bajo la impresión HTML cadena, que es el nombre de la variable HTML que han declarado antes? JASON HIRSCHHORN: Esto de aquí? AUDIENCIA: Sí JASON HIRSCHHORN: Si. AUDIENCIA: Así que si usted había llamado que algo más, ese algo más era lo que se ponga aquí. JASON HIRSCHHORN: Exactamente. Y eso es un buen punto. Esto es un poco confuso porque Tengo HTML, html. Esta aquí adentro es el nombre de mi variables, y esto de aquí es el nombre de la función jQuery. AUDIENCIA: Pero para que el jQuery funcionar a trabajar, usted tiene que darle alguna entrada HTML? JASON HIRSCHHORN: Exactamente. O usted tiene que darle una cadena. Pondrá esa cadena en el interior del div o lo que sea. Esto es sólo una cadena. No sé que es HTML, pero obviamente formatearlo con el propósito de ser HTML válido. ¿Eso responde la pregunta? AUDIENCIA: Si. JASON HIRSCHHORN: OK. ¿Sí? AUDIENCIA: ¿Qué pasa si el océano se hace referencia a un botón o algo así? ¿Qué haría el. HTML? ¿Cambiaría eso la texto del botón? JASON HIRSCHHORN: Entonces la pregunta es lo que si se refiriera a un botón? Se va a cambiar el interior HTML de algo. Así que si tiene una etiqueta de apertura y un cierre etiqueta, pondrá algo intermedio la etiqueta de apertura y cierre. Si no hay apertura y cierre etiqueta, no va a hacer nada. AUDIENCIA: Es, literalmente, una copia y pegar tipo de cosas? JASON HIRSCHHORN: Si. Copia y pega algo de cualquiera que sea la variable lo paso, el string lo paso, dentro de los etiquetas de apertura y cierre. Vamos a ver aquí abajo. Oh, Dios mío. draw_pool no lo hizo hacer nada bien allí. Eso es un fastidio. Capacitar, wow. OK, así que no hay mucho más aparte de eso. Así que vamos a empezar, y vamos a solucionar esto. Voy a necesitar todo el mundo de ayudar a hacer esto. No hay realidad que muchas líneas de código, creo yo, a escribir. Creo que lo hice hace un par de años para la versión 2K12, y hay no debe ser el número de líneas de código para escribir. No debería haber eliminado ese código. Debería haber guardado. Oh, loco. De todos modos, vamos a empezar. Así que estoy en esta matriz, o estoy en esta línea, y yo tengo mi ocean_array. Y quiero poner todo esto, todo de este archivo, en mi ocean_array. Entonces, ¿cómo puedo tomar todo de allí, y lo puso en la ocean_array? Es una línea de código. ¿Quién me puede dar esa línea de código o dime, tener alguna idea de lo que esa línea de código debería hacer? ¿Por qué no podemos empezar por aquí, y luego vamos a seguir avanzando por la habitación responder a las preguntas. Kurt? ¿Qué es primero? AUDIENCIA: Ocean_array, soporte, el delfín. Igual DELFINES, soporte, delfín? DELFINES con un capital de todo. JASON HIRSCHHORN: OK. Vamos a caminar a través de la sintaxis. Justo aquí, esto es como un bucle foreach, por lo que en realidad está haciendo un montón de cosas para nosotros. Y los delfines es un objeto. Así que no tenemos que escribir algo como los delfines, delfines, porque delfín sí mismo es el objeto que yo quiero. No es el índice. ¿Eso tiene sentido? AUDIENCIA: Si. JASON HIRSCHHORN: Entonces, ¿cómo proponer el cambio de su código? Si sabemos que se nos da el índice? Oh, lo siento. Eres bueno. Pero, ¿cómo - déjame hacerte una pregunta diferente. Si queremos - vamos a realmente escribir esto. No importa. Vamos a escribir esto. Eso es genial. Lo siento. Estaba muy confuso allí. Dejemos que hay por ahora, y vamos a volver a entrenar a un delfín, el establecimiento de un delfín. Vamos a arreglar primero este océano dibujo función, y vamos a volver a que, Kurt. Pero hasta ahora, todo bien. Echemos un vistazo en el interior draw_ocean. La línea que parece estar mal es este "almacenar imágenes de delfines en el océano en una cadena HTML. "Y justo ahora, al igual que TODO, pero realmente quiere poner a los delfines imágenes en el océano. Entonces, ¿qué, Noah, ¿crees que es lo primero que debería hacer? Si quiero ir a través de todo el matriz, lo que es lo primero Lo que debería hacer? AUDIENCIA: Necesitamos crear un bucle. JASON HIRSCHHORN: Un bucle for. Y lo que debería que bucle parece? AUDIENCIA: A - tenemos que ir a través de cada uno de los delfines en la matriz océano. Así que para los delfines en var - se puede escribir array océano? JASON HIRSCHHORN: ¿Así? AUDIENCIA: Probablemente eso es correcto. JASON HIRSCHHORN: Vamos a seguir con que, por ahora, y luego vamos a volver a ella. Y tú vas a ser responsable para esa línea. Así que tengo por el bucle for. Michael, eres ahora. ¿Qué debo hacer ahora? AUDIENCIA: Usted tendría que tomar la almacenar imágenes de delfines. JASON HIRSCHHORN: Entonces, ¿dónde es que almacena? AUDIENCIA: En la matriz de delfines? JASON HIRSCHHORN: Estoy confundido ahora demasiado acerca de lo que está pasando. Vamos a averiguar cómo podemos hacer debug esto, y luego me iré de nuevo a usted, ¿de acuerdo? ¿Cuál es el equivalente de printf en JavaScript? Annie? AUDIENCIA: Es un documento que escribió? JASON HIRSCHHORN: O cómo puede Veo algo en el consolar abajo en el fondo? AUDIENCIA: console.log. JASON HIRSCHHORN: console.log, exactamente. Así que hagámoslo console.log, y de que vamos sólo hay que poner "delfín" en, OK? Lo ideal sería que si esto funciona, vamos a tener - vamos a ver, allá en ese archivo dolphins.js, había seis delfines, así que debería obtener seis o algo ojalá impreso a la consola, ¿verdad? Ahí es donde estamos tan lejos porque nos hizo la línea de Kurt aquí, y luego hizo Noé bucle for, y tenemos este line, así que espero que deberíamos ver seis cosas impresas en la consola. Así que vamos a ir aquí, vamos a abrir nuestra consolar y refrescar la página. Aceptar, por lo que parece vimos seis índices. Cero, uno, dos, tres, cuatro cinco, sí. AUDIENCIA: ¿Cómo se llega a esa página dentro de tu - JASON HIRSCHHORN: ¿cómo obtengo a esta cosa aquí abajo? AUDIENCIA: No, la página de Chrome en el interior [Inaudible] aparato. ¿Podemos ver eso o no? JASON HIRSCHHORN: Esta Chrome página de aquí? AUDIENCIA: Si. JASON HIRSCHHORN: Así que al igual que en conjunto P ocho, he abierto una ventana de Chrome en mi escritorio, en mi Escritorio del ordenador Macintosh. Y si usted nota aquí este URL para arriba en la parte superior izquierda, que coincide con esta IP abordar aquí. Así que para hacer esto, sin embargo, el principio del problema de especificaciones establecer que camina a través de exactamente cómo hacer esto. Pero yo sólo seguí eso, y en su lugar de con el código de transporte, que acabo de hacer nuestro propio código. Lo bueno es que también puede inspeccionar ocean_array. Así que parece que es ocean_array un conjunto de seis objetos, y vamos a abrir cada uno de ellos. Boom! Una. Así que Kurt, parece que su código funcionó a la perfección. Todo se inició en ocean_array. Porque me equivoqué antes. Pero sí, trabajo impresionante. El ocean_array es correcta, y se ve como ahora vemos que los delfines es un número de 0 a 5, por lo que parecía como una índices de una matriz. Así que dado que el conocimiento, Michael, ¿qué debemos hacer ahora? Pensar en voz alta. ¿Qué es algo que queremos hacer? AUDIENCIA: Queremos obtener la JPEG para cada delfín. JASON HIRSCHHORN: OK. Entonces, ¿cómo podemos hacer referencia - ¿cómo podemos obtener el JPEG? ¿Por dónde empezamos? ¿Dónde se almacena todo? AUDIENCIA: En la ocean_array? JASON HIRSCHHORN: OK. AUDIENCIA: Así ocean_array, delfín - JASON HIRSCHHORN: ¿Cómo conseguir algo en el interior - así que esto nos da ese objeto. Y hemos visto esto antes con la estructura. Entonces, ¿qué tipo de notación Por qué tenemos que usar? AUDIENCIA: Sería el punto. JASON HIRSCHHORN: Un punto. Y entonces, ¿qué campo? AUDIENCIA: Picture? ¿O eso no es un campo - JASON HIRSCHHORN: ¿De qué se llamada en dolphins.js? Y ve, usted puede mirar. Sólo podemos volver aquí. Podemos ver ocean_array, podemos explorarlo. ¿Cómo se llama? AUDIENCIA: Tipo. Espere. Imagen? Dije imagen. JASON HIRSCHHORN: Imagen. Derecha. ¿No suena como si supieras lo que estaban hablando, sin embargo. Sonaba más como una conjetura. Para que la imagen, por lo que le daría nosotros la dirección URL de la imagen. Jeff, usted tiene una pregunta? AUDIENCIA: Sí, no puedo conseguir lo que tiene en su Chrome navegador en mi equipo. Acabo de obtener una "referencia no detectada error, la consola no está definido ". JASON HIRSCHHORN: Tienes configurar todo? AUDIENCIA: Bueno, creo que hizo todo lo que usted lo hizo en la gran pantalla. JASON HIRSCHHORN: Y chmodded todos los archivos? ¿Y usted va a través de toda la instalación? AUDIENCIA: voy a intentarlo de nuevo. JASON HIRSCHHORN: OK. Me salté sobre que una gran cantidad en el comenzando, pero es necesario pasar por todo el montaje al igual que en el a partir de la especificación conjunto de problemas. Chmod todo y asegúrese de que es in AUDIENCIA: Iré y vuelva a comprobar él. Pensé que lo hice, pero Voy a revisar de nuevo. JASON HIRSCHHORN: Entonces, esto se ve como si nos la va a dar cuerda y una foto. Grande. Tenemos la URL de la imagen. ¿Cómo podemos ahora ponemos en - qué pasa si escribimos sólo esto, Michael? AUDIENCIA: simplemente se pone la imagen. En realidad, no mostrarlo. JASON Hirschhorn: Vamos a ver qué pasa. Dejaremos eso. Vamos a correr aquí. Parece que no conseguimos nada. Si exploro esta tabla, parece que el interior - Sí, parece que no entiendo nada. AUDIENCIA: ¿Tenemos que - JASON HIRSCHHORN: Esto es una cadena, el código aquí. ¿Dónde quiero poner esta cadena? AUDIENCIA: Usted quiere lo puso en el océano? JASON HIRSCHHORN: OK. Y aquí estoy poniendo una cadena llamado HTML en el océano. AUDIENCIA: Así sería dólar señal, océano, html [inaudible]. JASON HIRSCHHORN: Eso haría ponerlo directamente en ese país. Pero lo que si quiero agregarlo a - Yo ya estoy creando una cadena, ¿no? Para poner en el océano, lo que es el nombre de esa cadena? AUDIENCIA: HTML. JASON HIRSCHHORN: HTML. Así que ¿qué es lo que escribo a continuación? AUDIENCIA: igual, es igual. O simplemente es igual? JASON HIRSCHHORN: ¿Cuál será suceder si escribo iguales? AUDIENCIA: ¿No será eso configurarlo igual - o no quiere que - AUDIENCIA: Asigne? JASON HIRSCHHORN: Se le asignará, pero, ¿qué va a pasar con todo que se almacenó en ella antes? AUDIENCIA: Va a deshacerse de él. JASON HIRSCHHORN: Va a deshacerse de él. Entonces, ¿cómo puedo añadirlo a la final? Me gustaría simplemente copiar el - AUDIENCIA: Plus es igual. JASON HIRSCHHORN: Plus iguales, perfecto. Eso es exactamente correcto. Así que ahora vamos a ver lo que esto hace. Boom! Oh, Dios mío. Eso es sólo una gran cantidad de texto. Aceptar. Así que parece que tenemos mucho de texto, pero eso es genial. Ustedes han hecho - Sé que esto es difícil, esto es nuevo. Hasta ahora, los tres de ustedes han hecho fantástico. Bueno, tú eres el próximo. ¿Qué debemos hacer ahora? Obviamente, no queremos que jugar sólo la cadena. ¿Sí? AUDIENCIA: Sólo tengo una pregunta. Ya sabes, cuando haces ocean_array, delfín, en los soportes, no es delfín como un asociativa array en sí mismo? JASON HIRSCHHORN: Yo se equivocó al hablar. Dolphin es el índice. AUDIENCIA: pero no es var delfines en el océano - Quiero decir, cuando en un inicio se carga como así, el delfín var en los delfines, no es que dolphin una matriz asociativa? JASON HIRSCHHORN: Este delfín? AUDIENCIA: Si. JASON HIRSCHHORN: No. Este delfín es el índice. AUDIENCIA: OK. Entonces, ¿hay una variable de delfines? Quiero decir, como clave de delfines en la matriz asociativa? JASON HIRSCHHORN: ¿Aquí mismo? Al igual que, dolphin.name? AUDIENCIA: Sí, está ahí como punto de delfines - como no se entiende delfín siendo cada objeto? AUDIENCIA: Sí, eso es lo que yo pensaba, también. AUDIENCIA: Pensé que era como los delfines la matriz asociativa en los delfines. Porque hay seis asociativo matrices en DELFINES, ¿verdad? JASON HIRSCHHORN: Así es. La forma en que hemos escrito este Ahora, no lo es. AUDIENCIA: ¿Por qué es? JASON HIRSCHHORN: Podríamos hacer eso, y hay realmente una función de jQuery llamada. cada uno, que da que cada cosa. Sin embargo, esta sintaxis no es - Me equivoqué antes - esta sintaxis No es que eso es índice. Esto simplemente nos está dando a los índices. Pero usted podría hacer el signo de dólar. Cada uno, que es una función de jQuery. Eso le daría a cada matriz asociativa. A fin de comprobar que fuera. Pero eso es lo que hace todo este código. AUDIENCIA: Así que este primer bucle, me Supongo que sería repetir seis veces porque tiene seis índices. Y entonces el segundo bucle, No es que la iteración del misma cantidad de veces? JASON HIRSCHHORN: Si. AUDIENCIA: Así que realmente no - no se podría haber escrito el primer bucle for una vez más, y habría funcionado. Al igual que, delfín var en los delfines? JASON HIRSCHHORN: Sí, pero estamos ahora usando un ocean_array. Nos hemos trasladado todo al ocean_array porque decimos alguna vez queremos para cambiar lo que está en dolphins.js, o si queremos manipular ocean_array más adelante, no queremos manipular delfines, la variable. Queremos manipular una copia de la misma, porque si queremos tomar algo a cabo, de esta manera sólo estamos va a ser seguro. ¿Eso tiene sentido. AUDIENCIA: Si. JASON HIRSCHHORN: OK. Así, Carlos, ¿cómo puedo aprovechar esta cadena y convertirla en una imagen en lugar, y obtener la imagen real? Usted ha ve este código antes. ¿Cómo lo hago incluir una imagen en una página? AUDIENCIA: ¿Es lo que hicimos acerca que además de HTML es igual a la llamada te guión ancho, ella lo borró? JASON HIRSCHHORN: Este cosas aquí? AUDIENCIA: Si. Más o menos. JASON HIRSCHHORN: no preocuparse por eso. Eso sólo se inicia la cadena HTML. Si quiero incluir una imagen en mi Página web HTML, lo etiqueta debo utilizar? AUDIENCIA: No me acuerdo. JASON HIRSCHHORN: OK. Avie, ayúdalo a cabo? AUDIENCIA: ¿Sería ancla, href, y luego vincularlo? JASON HIRSCHHORN: Así como en un ancla. AUDIENCIA: Usted no necesita vincularlo, sin embargo, ¿no? JASON HIRSCHHORN: ¿Y si sólo que desee crear una imagen? AUDIENCIA: Sería img, y luego src es igual sea cual sea la cadena es? JASON HIRSCHHORN: OK, así que eso es correcto, img. Carlos, vas a a partir de aquí. img significa "imagen", y puestos de src por "fuente". y hay que darle una URL o algunos - ni siquiera un URL. Algunos ubicación en la que imagen se almacena. Así que sé que eso va a conseguirme una imagen, así que ahora ¿cómo puedo poner todo esto juntos, el pensamiento? Tengo un poco de sintaxis tengo que arreglar. ¿Qué es exactamente lo que necesito para escribir, Carlos? AUDIENCIA: No entiendo lo que usted está tratando de hacer. Así que usted está tratando de poner todo las imágenes en una tabla? JASON HIRSCHHORN: Queremos mostrar todas las imágenes de la página. Y vimos cómo esta línea de código a la derecha cuerdas aquí en nuestro cadena HTML y su impresión fuera así. Nosotros en cambio queremos mostrar imágenes. Y nos dimos cuenta, Maru, nos dijo que esta línea de código - así que vamos a ver aquí. Si fuimos y exploramos, vamos a editar esto como HTML. Maru, dijo, si no hacemos este tipo de sintaxis, obtenemos una imagen. ¿Eso tiene sentido? Este es el tipo de cadena que nos realmente quiere poner en el interior del océano buceo, y no simplemente el texto mismo. AUDIENCIA: [inaudible] JASON HIRSCHHORN: ¿Lo sientes? AUDIENCIA: ¿No puedes copiar que uno que Kianna dio, y lo puso en eso - JASON HIRSCHHORN: Copia este, y poner esto aquí? AUDIENCIA: Si. JASON HIRSCHHORN: Eso es cerca, pero hay un problema con esto, y ¿qué es eso? HTML es una cadena, y necesitamos añadir cadenas a la misma. AUDIENCIA: Entonces usted dice - nah. JASON HIRSCHHORN: Y tenemos tres - esto aquí no es una cadena. ¿Cómo podemos hacer que una cadena? ¿Cómo usted siempre hace algo de una cadena? AUDIENCIA: No sé. JASON HIRSCHHORN: Si tengo el texto, ¿cómo puedo hacer que una cadena? Gustaría aquí en esta línea de aquí? AUDIENCIA: Póngalo en una mesa? JASON HIRSCHHORN: ¿Qué pasa con esto? AUDIENCIA: Cita. JASON HIRSCHHORN: Doble citas, ¿verdad? Las comillas dobles hace algo una cadena. Así que hace que una cadena, y esta es una cadena. ¿Cómo puedo poner dos cadenas juntos en JavaScript? AUDIENCIA: Dot. JASON HIRSCHHORN: No dot. Eso es PHP. AUDIENCIA: Plus. JASON HIRSCHHORN: Además, toda la razón. Así que además, y luego lo que haces Propongo que hago aquí? AUDIENCIA: Otra cita. JASON HIRSCHHORN: Otra cita, OK. ¿Cómo finalizo una cadena? AUDIENCIA: Otra cita. JASON HIRSCHHORN: Otra cita. Y ¿cómo puedo poner esta cadena junto con esta cadena? Un plus. Eso es exactamente correcto. Usted acaba de hacer esto por nosotros. Esto es perfecto. Así que ahora vamos a prestar este. Y mira, tenemos un todo montón de imágenes. Oh, Dios mío. Esos son de miedo. Vamos a explorar en un segundo. Sí, Noah? AUDIENCIA: Sé que en realidad no asunto, pero en caso de que cierre su elementos con la etiqueta de imagen? JASON HIRSCHHORN: Podríamos, si que queríamos, cerrar nuestra imagen tag así como así. Vamos a render eso. El, no, no podemos hacer eso. AUDIENCIA: Oh, me rompí. JASON HIRSCHHORN: Creo que esto es la validación, sin embargo. No creo que usted necesita la barra de cierre. Bien, esto es genial. Carlos, muchas gracias. Hasta el momento los cuatro de ustedes han hecho un trabajo increíble. Por supuesto, como se puede ver, estamos la creación de algún tipo de tabla de bisel. Y quisiera que estas cosas estar en una mesa. Entonces, ¿cómo puedo poner estos cosas en una mesa? Necesito un poco más de claridad HTML. Assam, qué tipo de HTML que me estoy perdiendo? AUDIENCIA: Lo que se hace quiere hacer, lo siento? JASON HIRSCHHORN: Quiero poner todo estas imágenes en una tabla, de modo que cada imagen debe estar en una columna de la tabla. ¿Cómo puedo decir que esta es una columna? Usted ha visto este código antes. Esto está en P puesto siete. AUDIENCIA: Me acuerdo de una se tr? JASON HIRSCHHORN: tr es para la fila. AUDIENCIA: No sé si fuera poco mi corazón, pero pude comprobar. JASON HIRSCHHORN: Does alguien recuerda? AUDIENCIA: TD? JASON HIRSCHHORN: td, exactamente correcto. td pone como una columna. Así que si me pongo el td allí, Assam, ¿qué tengo que poner? ¿Qué más tengo que añadir? AUDIENCIA: Usted tiene que cerrarla? JASON HIRSCHHORN: Exactamente. ¿Dónde fue? AUDIENCIA: Justo ahí? JASON HIRSCHHORN: ¿Aquí mismo? AUDIENCIA: Creo que sí. JASON HIRSCHHORN: ¿Qué es esto cerrando aquí? ¿Qué es esto? Esa cosa azul? AUDIENCIA: Eso es para la imagen. Se debe ir después, creo. JASON HIRSCHHORN: OK, exactamente correcto. Así que veamos lo que esto hizo. Oh, eso es raro. Abramos océano, tabla, cuerpo de la tabla, tr. Así que tenemos un montón, pero me no ven las imágenes. Eso es raro. Parece que lo construyó, pero no me muestran las imágenes. Cualquier idea por qué eso podría ser el caso? ¿Alguna idea? AUDIENCIA: Si se desplaza abajo, los verás. JASON HIRSCHHORN: Boom! Así que están allí, pero eso es raro que son todo el camino hacia abajo. AUDIENCIA: ¡Son también todos en una fila. JASON HIRSCHHORN: Y están todos en un fila, y todas son diferentes tamaños. Así Assam, dame una línea más de código si puedo hacer que cada imagen de la mismo tamaño, y parece que no tengo Ya indiqué el tamaño que quieren que sean. ¿Cómo puedo hacer que cada imagen del mismo tamaño? Dar una suposición. ¿Qué pasa con esta línea de código? AUDIENCIA: ¿Se puede hacer Como una constante? JASON HIRSCHHORN: O dónde es otro lugar que podría poner esta línea de código, si yo copio? AUDIENCIA: Durante todo el camino hacia abajo en esa misma línea? JASON HIRSCHHORN: OK, vamos a poner que aquí, toda la razón. Y ahora vamos a ver qué pasa. Oh, Dios mío! Ahora parece que estamos empezando a obtener algo, y parece que todo tipo de encajar en la tabla que que hemos construido en cada td. También, Assam, digamos que me gusta su alturas para ser un poco más - la cosa alturas me está tirando fuera, por lo ¿qué debo fijar a su altura? Escoja cualquier número. AUDIENCIA: 200? JASON HIRSCHHORN: 200. Voy a recoger 100. Eso es genial. Para realmente como 200. Ahí vamos! Bien, ahora esto está empezando a verse un poco mejor y un poquito más organizado. ¿Alguna otra idea de lo que necesitamos hacer para guardar las imágenes de los delfines? ¿Sí? AUDIENCIA: ¿Son las comillas, o la única citas, en torno a los valores de fuente, altura, anchura, son aquellos opcional? JASON HIRSCHHORN: ¿Dónde son comillas simples? PÚBLICO: Al igual que en algunos de los ejemplos, que tendría como altura es igual a la cita "150." Es que no es necesario. JASON HIRSCHHORN: Así que vamos a mira aquí abajo. Si hacemos clic en el océano, entra en la mesa, te darás cuenta de por aquí lo que realmente añadido esas citas para mí. AUDIENCIA: OK. JASON HIRSCHHORN: Y así me doy cuenta de lo que que estamos haciendo parece dolorosamente lento. Nosotros sólo hemos escrito tres líneas de código hasta el momento, o cuatro líneas de código, pero este es, de hecho, el proceso que Paso por cada vez que quiero para hacer de este sitio web. Línea por línea, el uso de la consola hacia abajo aquí, la exploración de las cosas y averiguar a cabo paso a paso, lo que quiero hacer. Así que espero que, este imita para ustedes de una manera buena, pedagógica lo que realmente se hace cuando a crear su sitio web. Vamos a pasar. Hemos creado estas cosas. Voy a realidad - Avie, tengo una gran pregunta para usted. No sé, vamos a pasar. Vamos al "tren de delfines cuando su la imagen se hace clic. "¿Cómo Propongo que escribo esa línea de código? AUDIENCIA: Hay una función llamado "tren". JASON HIRSCHHORN: Hay una función llamado "tren", exactamente a la derecha. AUDIENCIA: Se espera que un índice. JASON HIRSCHHORN: Tren espera un índice, por lo que, en Aceptar. Avie, este es exactamente el razonamiento que me encanta ver. Tren espera un índice. AUDIENCIA: ¿Así que vas tener un bucle. JASON HIRSCHHORN: Bueno, lo que quiero hacer cuando una imagen se hace clic, de manera Avie, ¿Cómo puedo controlar cuando un la imagen se hace clic? Hay un par de maneras de hacer eso. Este es el poder de JavaScript y jQuery, sino también la parte más difícil. AUDIENCIA: Si paréntesis, no. O si el evento paréntesis, o algo relativamente simple? JASON HIRSCHHORN: Así que nos vimos un par maneras de hacer esto en una conferencia. Una cosa era que, aquí abajo, usted podría hacer algo así podría crear una funcionan como el clic, o hacer algo parecido al hacer clic. Todo el mundo recuerda haber visto algo así? Usted lo hace dentro de la etiqueta HTML. Veo algunas caras en blanco. Algunas personas son como, lo que está hablando? Eso está bien, porque creo que esa es la mucho más complicado que hacerlo. Vamos a hacer una mucho más fácil manera usando jQuery. Así, Avie? AUDIENCIA: Hm? JASON HIRSCHHORN: Si yo quiero hacer algo jQuery, obviamente empiezo, como antes, con este signo de dólar, abierto paren, paren cercanos y doble cita aquí. Ahora sabemos que necesito un selector aquí. ¿Qué selector Qué propone se aplicaría a cada imagen o cada sola imagen? AUDIENCIA: Imagen? JASON HIRSCHHORN: Eso es exactamente correcto. Que se aplicará a cada imagen. Obtiene todos ellos. No es una identificación, que no es una clase, es un tipo de etiqueta, y esto va a conseguir cada uno de ellos. Y ahora voy a decirte esto por el momento, y usted puede buscar más documentación en él más adelante, pero esto Lo llamó "on" se ocupa de los eventos. Así que lo que hay que hacer ahora, y que es súper poderoso, es decir qué tipo de evento que está buscando y lo que que quiere hacer cuando usted recibir ese evento. Así que me voy a dar un poco de poco más de código, Avie, a continuación, tienes que ir, ¿vale? AUDIENCIA: OK. AUDIENCIA: A - vamos a decir "Click" en este caso, que usted generalmente utilizar. Así que al hacer clic, y luego nos vamos a pasarlo a una función anónima. Y esta sintaxis que se van a ver mucho, y esperamos que pueda estar escribiendo mucho. Lo que hace es, de nuevo, en el clic imagen de algo que se llama, lo que sea, algo llamado imagen, vamos para ejecutar esta función anónima. No voy a dar un nombre. No estoy pasándolo ningún argumento. Estoy, como, la creación de aquí hay un funciona, y aquí está lo que el código que vas a hacer. Eso es con este medio de sintaxis. Y también, como te darás cuenta, parece muy similar a esto aquí que escribió antes. Aceptar, Avie. Así que usted quiere llamar tren en el índice. ¿Es eso lo que quieres hacer? AUDIENCIA: Si. JASON HIRSCHHORN: Eso es? Aceptar. Vamos a ver qué pasa. AUDIENCIA: Espera, sin embargo. El índice no es una variable en estos momentos. JASON HIRSCHHORN: Así índice no es una variable en estos momentos. Yo no sé de dónde lo obtuviste. AUDIENCIA: [inaudible]. Así que es lo que necesita saber primero que los delfines, pero he hecho clic? JASON HIRSCHHORN: Excelente. Usted tiene que averiguar lo que delfín quedó hecho clic. Esto es un tiro salvaje en la oscuridad. ¿Alguien tiene alguna idea de cómo puedo averiguar lo que he hecho clic delfín? Si no es así, voy a darle a usted, porque esto es una locura. Aceptar. Así que vamos a imprimir a cabo a través de console.log. Esta cosa. Por lo tanto, el signo de dólar, paren abiertas, esta estrecha paren. Así que cuando hago clic en esta imagen, me voy para imprimir esta a la consola, y vamos a ver qué pasa. Volvamos aquí. Vamos a ir a la consola. No hay errores, gracias a Dios. Aceptar. He hecho clic. Déjame hacer eso otra vez. He hecho clic en esta primera imagen, y esto se imprimieron a la consola, esta línea de cosas. Voy a utilizar el palabra "este" mucho. Esta cosa aquí, esto, es muy especial, y que está haciendo exactamente lo Avie quiere que haga. Se está haciendo todo lo que estaba hecho clic en, o lo que sea. Porque de nuevo, este selector sucede para hacer frente a muchas cosas, no lo hacemos necesariamente sabemos que lo que estamos hablando, por lo que queremos averiguar qué cosa estamos hablando acerca a través de esta sintaxis. En este caso aquí, hashtag océano, siempre sabemos lo que estamos va a estar hablando, por lo que realmente no necesitábamos esta dentro de un hashtag océano. Siempre es el océano, que div. Es un ID, una sola cosa es posible. Pero en este caso, esto se aplica a un montón de imágenes, de hecho, seis imágenes, y por lo que queremos saber lo particular, la imagen se hizo clic en. Y parece que este es el tipo de información que obtenemos. Nos parece que algunas de las grandes cadena, y tenemos todo esto información con esta. Tenemos toneladas y toneladas y un montón de cosas. jQuery es super potente. Nos está dando un montón de información sobre este elemento HTML particular. Avie, ¿qué es lo que queremos saber sobre este elemento HTML? AUDIENCIA: Algo así como una identificación. JASON HIRSCHHORN: Un ID. Bueno, tenemos una fuente, una anchura y una altura. AUDIENCIA: Podemos utilizar una fuente. JASON HIRSCHHORN: Nosotros puede utilizar la fuente. Eso nos dará una cadena, una cadena URL. ¿Qué vamos a hacer con que una vez que tengamos eso? ¿Cómo llegamos de vuelta a nuestro índice en ocean_array? AUDIENCIA: Podemos comparar a la otra. JASON HIRSCHHORN: Así que pudimos bucle a través de cada uno. Ahora podríamos bucle de nuevo y luego comparar esto. Imagine lo que sería una manera más sencilla, si pudieras imaginar una? AUDIENCIA: No tener que bucle. JASON HIRSCHHORN: No tener que bucle. AUDIENCIA: Sólo averiguar delfín, [inaudible]. JASON HIRSCHHORN: Calculando lo que fuera delfín. Aceptar. Así que vamos a guardar esa información en esta etiqueta de imagen. Y de nuevo, ahora mismo, parte de este material es simplemente mágico porque podría se muestra que esta por primera vez, pero espero que estas son cosas usted va a estar haciendo. Así que esto es algo mágica que puede hacer. Usted puede ahorrar un poco de metadatos adicionales en un elemento. No va a aparecer, no lo hará afecta a nada. Usted sólo puede guardarla allí. Y propongo que ahorramos el índice con cada imagen. Así que la forma de hacer que es crear un atributo llamado tablero de datos, y a continuación, el nombre que que desee darle. Tablero de datos es una cosa especial que es da a usted, y dice que esto es algo que el usuario se va a crear. Así que estamos creando esta cosa llamada índice, esta tecla llama índice. Y dentro de ella, vamos a poner no sólo uno cada vez, pero ¿qué hacer ponemos dentro de ella, Avie? ¿Qué pasa aquí? AUDIENCIA: Dolphin. JASON HIRSCHHORN: Dolphin. Esa no es la palabra. Dolphin. Y de nuevo, ya imprimimos delfín anterior, que 0, 1, 2, 3, 4, 5, y estamos ahorrando que con la imagen. Así que ahora, si lo hago - y otra vez, ahorramos esos metadatos. ¿Cómo se accede a los metadatos? Es con una función llamada simplemente "datos". Y tiene que pasar una y sólo un argumento, que es el nombre de la cosa. Así que voy a imprimir lo que sigue, y luego voy a tomar preguntas. Pero, en esencia, lo que estoy diciendo dame esta objeto que se ha hecho clic, mirar en todos sus atributos de datos, y el llamado "indexado" dame ese valor. Y vamos a ver qué pasa cuando nos a cargar esta página. Exactamente lo que esperábamos. Una vez más, que era bastante mágico. Acabamos de hacer mucho allí. ¿Quién tiene alguna pregunta acerca de eso? ¿Sí? AUDIENCIA: Sólo tengo una pregunta acerca de su código en vivo. Se utiliza como una comilla simple, doble cita, como allí mismo. JASON HIRSCHHORN: Justo aquí. AUDIENCIA: Si. ¿Hay una razón por la cual usted hace la comillas simples, comillas dobles? JASON HIRSCHHORN: Hay una razón, y esto se remonta a lo que Marcus preguntado antes. En esta línea, que estaba siendo un poco mejor en mi codificación. Quiero esto, y esto es lo que honestamente debería haber hecho todo el tiempo, para la anchura y la altura en particular. Vamos a ver aquí abajo. Usted verá aquí, ¿ves eso? Sé que es un poco pequeña, pero los datos Índice guión es entre comillas dobles. Esas cosas siempre necesitan estar entre comillas dobles. El valor siempre debe estar entre comillas dobles. Pero aquí, si lo hiciera una doble cita, que pondría fin a esta cadena aquí, y ahora yo no estaría escribir en una cadena. Así que tengo alrededor que sólo por el uso de un comilla simple, porque una sola cita no termina la cadena de JavaScript pero en HTML que no le importa si usted es dándole comillas simples o comillas dobles. Simplemente va a interpretarlo como comillas dobles. ¿Eso tiene sentido? ¿Sí? AUDIENCIA: ¿Cómo se consigue que la dirección IP en la parte inferior de su cliente? El mío dice ninguna dirección IP. ¿Hay algo que debería han hecho en [inaudible]. JASON HIRSCHHORN: En su aparato, que no tiene nada? AUDIENCIA: Si. JASON HIRSCHHORN: Hay algo que puede hacer para arreglarlo, pero no estoy va a pasar el tiempo caminando a través de eso ahora mismo. Pero lo podemos hacer después de la sección. AUDIENCIA: Si usted vuelve a la consola, ¿por qué fue el número que aparece 012.321? JASON HIRSCHHORN: Console? Oh, porque yo sólo estaba haciendo clic alrededor salvajemente. AUDIENCIA: Oh, está bien. No importa. JASON HIRSCHHORN: Y de nuevo, puedo hacer clic en algo a veces bajillion. AUDIENCIA: Tengo una pregunta acerca de el bucle de nuevo, el de los bucles. Porque usted sabe que en P establecen ocho, que utilizar una forma diferente de ese bucle. Así que ellos como var i es igual a 0, i menos que, ocean_array.length, i + +. Son aquellos equivalente? JASON HIRSCHHORN: Eso es un estándar para el bucle. O sí, esa es la de los bucles. De hecho, hemos visto que eso es equivalente. AUDIENCIA: Así que eso es equivalente a lo que has hecho aquí? Está uno considera mejor que el otro? JASON HIRSCHHORN: No. Así, una vez más, hemos ido sobre algunas cosas. Ahora nos hemos trasladado nuestra zona de confort y empezó a hacer algunos realmente genial cosas que no hemos ido necesariamente otra vez en clase antes, pero se espera que sea muy potente para que cuando la codificación. Avie, vamos a volver aquí. Tengo el índice del delfín. Ahora ¿qué tengo que hacer? AUDIENCIA: Es necesario entrenarlo. Así que en vez de poner console.log, que puede establecer una variable igual a eso? JASON HIRSCHHORN: OK. ¿Y qué? AUDIENCIA: No estoy seguro si se puede hacer eso. JASON HIRSCHHORN: Así var x es igual a esto, sea lo que vuelve, que va a devolverlo. No tiene importancia. Puede devolver cualquier variable. No hay tipos aquí. AUDIENCIA: O usted podría hacer la llamada a la función. JASON HIRSCHHORN: Sí, ¿por qué no puedo hacerlo? Sólo hacer la llamada a la función. AUDIENCIA: Si. Dicho de otro conjunto de paréntesis. JASON HIRSCHHORN: Perfect. Eso es exactamente correcto. Así que va a llamar a la función de trenes. Por supuesto, no hay nada en el tren función, por lo que propondrá, Akshar, lo que deberán hacerlo en la función de trenes. Dame un poco de pseudo-código. AUDIENCIA: Creo que deberías quitar el Dolphin de la tabla original. JASON HIRSCHHORN: Y esto se está poniendo a Noé anterior por la que copiamos en una nueva matriz. Cierto, no porque lo hacemos para editar nuestro delfines matriz porque ¿qué pasa si otro El programa de usarlo o lo que si queremos para acceder a ella en otro lugar? Nosotros queremos hacer una copia, y eso es el que nos vamos a editar. AUDIENCIA: Después de colocar en su nueva ubicación. JASON HIRSCHHORN: ¿Y qué hacer que tenemos que hacer después de eso? AUDIENCIA: Y luego imprima la información acerca de los delfines. JASON HIRSCHHORN: Eso es exactamente correcto. Nosotros eliminamos del ocean_array, nos lo puso en la piscina, y luego trazamos el océano en la piscina. ¿Cómo se quita el delfín de la ocean_array? AUDIENCIA: Usted va al índice. Oh, está bien. Utilice una función de empalme. JASON HIRSCHHORN: OK, así que eso es correcto. Me vendría bien una función de empalme que toma algo fuera de una matriz y lo condensa. Eso es algo nuevo que no han visto antes. Pero yo realmente quiero mantener un espacio no porque quiero imprimir una espacio en blanco en el océano. AUDIENCIA: Así que usted puede establecer la imagen de ese índice, el ocean_array cuadro del punto del índice. JASON HIRSCHHORN: OK, ocean_array, índice. AUDIENCIA: Imagen Dot. JASON HIRSCHHORN: Imagen Dot. AUDIENCIA: Y lo establece en nulo? JASON HIRSCHHORN: igual a nulo. Aceptar. Así que no hay nada allí, así que a continuación ¿cómo puedo poner en la piscina? Constantino, ¿cómo puedo lo puso en la piscina? Tenemos esta variable nos llama, llamado de la piscina, aquí. AUDIENCIA: ¿Nos hacemos iguales Índice ocean_array? AUDIENCIA: ¿No debería usted cambiar el orden? JASON HIRSCHHORN: Uno seg. ¿Sí? AUDIENCIA: Sí, eso fue realmente un buen punto. JASON HIRSCHHORN: ¿Qué pasa aquí? AUDIENCIA: ¿Es índice? JASON HIRSCHHORN: Índice, exactamente. Y lo que has dicho, Constantine, es algo que debemos hacer? AUDIENCIA: Deberíamos quizá cambiar el orden. JASON HIRSCHHORN: ¿Y por qué cambiamos el orden, tal vez? AUDIENCIA: Porque en ese punto ya es nula. JASON HIRSCHHORN: Así que no todo es nulo, pero hemos perdido la dirección URL de la imagen. ¿Hemos perdido para siempre? AUDIENCIA: Técnicamente no? JASON HIRSCHHORN: Tener lo perdimos para siempre? AUDIENCIA: No. JASON HIRSCHHORN: Bueno, ¿dónde está? AUDIENCIA: En su delfín originales - JASON HIRSCHHORN: Está en los delfines, pero en ocean_array lo hemos perdido para siempre. Así Constantino, puede proponer una mejor manera de escribir esta línea? En realidad, lo siento, ya se ha guardado en la piscina. Lo tenemos en la piscina porque piscina es un objeto, ¿no? Índice Ocean_array, un ocean_array es un conjunto de objetos. Así que la piscina es un objeto, y tenemos una URL en allí, y hacia abajo aquí que está establecido en null. Así que en realidad, no lo hemos hecho perdido para siempre. Es sólo guarda en la piscina. Pero ciertamente no es en ocean_array, y como usted ha dicho, Carlos, es en la matriz delfines. Así que esto parece dulce. Y entonces, ¿cómo se dibuja el mar y la piscina? Mario? AUDIENCIA: Usted puede llamar draw_pool y draw_ocean? Así como, draw_pool, y luego - bueno, sí, no hace falta nada. JASON HIRSCHHORN: Muy bien. ¿Qué draw_pool va a hacer? AUDIENCIA: Dibuje la piscina? JASON HIRSCHHORN: Sí, bueno, ¿qué va a hacer? AUDIENCIA: Lo siento. Usted podría hacer lo mismo cosa, como tener un - JASON HIRSCHHORN: Espera, vamos a llegar allí. Nada. No hace nada en estos momentos. Vamos a ver si esto funciona, sin embargo. ¿Quién nos dio ese código? Akshar y Constantino nos dio ese código? OK, vamos a ver qué pasa. ¡Ah! Eso fue muy emocionante. Se ha ido. Oh, muchacho. Eso es un poco feo. Bueno, podemos volver y arreglar eso más tarde. Me pregunto dónde está? Ahorramos en esa variable piscina. ¿Cómo puedo averiguar si es en esa variable de la piscina? Bueno, de nuevo, el poder de JavaScript y, en particular, las herramientas que Chrome te da, es que usted puede ahora inspeccionar esa variable piscina. Es global, ¿recuerdas? No pusimos la palabra clave var. Así que si escribo Ingrese aquí, Constantino, ¿qué crees que soy va a conseguir cuando me golpeó Ingrese? AUDIENCIA: No sé. JASON HIRSCHHORN: Guess. AUDIENCIA: ¿Nada? JASON HIRSCHHORN: Nada mal. Esa fue una buena suposición, sin embargo. Conseguí el objeto. Recuerde que usted me dio esa línea de código. Piscina, guardó en que un objeto variable. Y, en efecto, vemos el objeto guardó en ella. Eso es impresionante. Podemos inspeccionar desde aquí. Es casi como en tiempo real GDB que podemos mirar a través de nuestro código y averiguar cosas. Eso es super cool y super potente. OK, vamos a terminar con esto. Dibujemos la piscina en cinco minutos. Maru, dame una línea de código para dibujar la piscina. AUDIENCIA: Usted podría tener otro HTML variable, pero / a. JASON HIRSCHHORN: Hagamos es muy simple por ahora. Vamos a imprimir el nombre de el delfín nos estamos entrenando. AUDIENCIA: Y entonces usted puede hacer en dólares firmar, paréntesis de apertura, y luego cita abierta. Supongo piscina libras, si eso era una cosa. No me acuerdo. JASON HIRSCHHORN: Vamos a mirar hacia atrás. Creo que es una cosa. AUDIENCIA: OK, sí. Y cierre de cotización, cerca paréntesis . Html, paréntesis de apertura, y entonces creo que la piscina, como paréntesis abierto 0 o algo así. Cerrar nombre del lunar. No sé si eso funciona. AUDIENCIA: OK, vamos a ver qué pasa. "No se puede leer el nombre de la propiedad indefinido. "Así que de nuevo, esto es lo vamos a revisar. Vamos a explorar esto. Hiciste piscina, bracket0 abierta,. Nombre. Una vez más, hago esto todo el tiempo, y estoy confundido lo que está pasando, lo que hace significa esta advertencia. Echemos un vistazo a la piscina. Echemos un vistazo a soporte de la piscina 0, sin definir. Así que ahí es donde nos estamos quedando en nuestro problema, ¿verdad? Piscina soporte 0 no, obviamente, de existir. ¿Qué crees que existe? AUDIENCIA: Es piscina justo un objeto por sí mismo? JASON HIRSCHHORN: Bueno, lo que Qué dice aquí? Cuando golpeamos Enter en la piscina, ¿qué dice que es? AUDIENCIA: Objeto. JASON HIRSCHHORN: Es un objeto, por lo que? AUDIENCIA: Oh, sí. Así que en lugar de pool.name - JASON HIRSCHHORN: Pool.name da exactamente lo que quería. Y me doy cuenta de que estoy pasando por esta lentamente y machacar este punto, pero esto es exactamente lo que hago estas cosas. Vas a correr en estos bichos durante su proyecto fin de carrera, así que espero esto es lo que le permite ser capaz de utilizar todas estas herramientas. Estos son cruciales y voluntad conseguirle super chulo ahora. Así que no quiero simplemente imprimir el nombre. Vamos a hacer un poco de poco mejor que esto. AUDIENCIA: ¿Qué más quieres que haga? JASON HIRSCHHORN: OK, está bien. Vamos a hacer precisamente esto. Ugh. Chicos, no tienen vida. Aceptar, boom, lo tengo. Se ve bien. Ya verás, Akshar, aquí abajo, hemos nulo, no se encontró. Así que parece que todavía está tratando de encontrar alguna imagen, y que no lo hicieron exactamente lo que queríamos hacer. No vamos a entrar en eso ahora, pero es probable que haya una forma más limpia de haciendo esto. AUDIENCIA: ¿Podrías dejar así un espacio en blanco para la imagen? Al igual que en lugar de establecer que en null, podrías configurarlo para que como un espacio en blanco cuerda o algo? JASON HIRSCHHORN: ¿Así? AUDIENCIA: Si. JASON HIRSCHHORN: [inaudible]. No se ha encontrado. Así que hay una mejor manera de hacerlo. Yo propondría hacer esto. Sólo estableciendo nula allí. Luego, por supuesto, lo que es va a pasar? Se va a desaparecer por completo. Así que si queríamos mantener un espacio y hacer que, es probable que quieren hacer algo aquí también. Voy a empezar. Akshar, dame esta línea de código muy rápido. AUDIENCIA: Si ocean_array, delfín, iguales, iguales, iguales - iguales nulo? Sí. JASON HIRSCHHORN: ¿Entonces qué? AUDIENCIA: A continuación, realice HTML. Sólo tienes que copiar el código de abajo, de verdad. JASON HIRSCHHORN: Copie qué? AUDIENCIA: Usted puede copiar el - JASON HIRSCHHORN: ¿Esto? AUDIENCIA: Si. JASON HIRSCHHORN: Todo eso? No tenemos una imagen. AUDIENCIA: Me refiero a que sólo puede dejar una - sí, usted puede cerrarla. Pero yo creo que hay que establecer el ancho. JASON HIRSCHHORN: Bueno, sólo crear una columna vacía. Aceptar. Y entonces en ese caso, probablemente vamos a querer hacer esto también. Lo sentimos. Oh. No funcionó, pero no estamos conseguir ese error. Vamos a ver lo que pasó aquí. Así que no hay nada allí, así que lo que dijiste que deberíamos añadir? AUDIENCIA: Debemos fijar la anchura de la fila. JASON HIRSCHHORN: ¿En qué? AUDIENCIA: Creo que es 150. AUDIENCIA: Sí, fue de 150. JASON HIRSCHHORN: Vamos a poner esto aquí para mantener mi código consistente. Pero este no es uno. Bueno, bueno. Enviado. ¿De acuerdo? Por lo tanto, todavía se va a ir. AUDIENCIA: Oh, llame ancho? JASON HIRSCHHORN: Parece al igual que el ancho es de 150. Vamos a ver. Ahora vamos a hacer la final, Lo bueno, potente que soy voy a mostrar. No vamos a terminar este código, pero en línea antes de que deje de fumar, todo esto código será correcta. Yo te enviaremos la versión corregida con algunos de mi propio estilo después sección, y que va a ser publicado en Internet. Os animo a seguir explorando esta y utilizar esto como una referencia, pero quiere que le muestre la herramienta final para este clase, y eso es más de aquí en el lado derecho. Y nos fijamos en esta última semana, pero ahora esperamos que sea un poco más familiar a usted y cómoda. Se puede jugar de forma dinámica con el CSS de una página. Hemos hecho ya nos vimos reproducir de forma dinámica con el código HTML. Recuerde que hicimos el derecho haga clic en Editar como HTML? ¿Aquí mismo? Así que hemos jugado de forma dinámica con el código HTML. En la consola, se puede jugar de forma dinámica con el código JavaScript de una página. Por ejemplo, es una válida JavaScript line. Boom, me dieron exactamente lo que quería. Así que podemos jugar de forma dinámica con el HTML, el juego de forma dinámica con el JavaScript. Ahora vamos a dinámicamente jugar con el CSS. Y todo esto es porque es como instantánea, vive retroalimentación GDB, y por lo que puede saber el derecho de algo antes de tener ir su código, y se puede No supongo que lo que es algo va a parecer. Así que esta es super cool duper. Y vamos por fin a ver de forma dinámica jugando con el CSS. Eso es más de aquí a la derecha lado, element.style. Vamos a ello. Aquí está nuestro elemento. Vamos a darle un poco de CSS extra. O lo siento, podríamos darle algo extra CSS, pero es probable que, en este caso, que desee cambiar este atributo. Así que vamos a ir por aquí a esta línea. Oh, no puedo hacer eso aquí. Lo siento. Edite AS - así que eso es cómo se puede editar el CSS. No vamos a editar el CSS en este segundo, pero sí queremos editar el código HTML y darle un atributo extra. ¿Qué es lo que usted propone cambiar esto? Pensé Avie tenía una sugerencia. AUDIENCIA: Ancho de Col? JASON HIRSCHHORN: Eso parecía que no hizo nada. Vamos a tratar de la CSS. AUDIENCIA: [inaudible] de clase? JASON HIRSCHHORN: Dice No trabaja. Le da esa cosa amarilla. AUDIENCIA: Pero [inaudible]. AUDIENCIA: ¿No estás configurando el ancho de una imagen a 150 cuando se hace eso? Al igual que ¿no sólo tiene que utilizar el ancho? JASON HIRSCHHORN: Si. AUDIENCIA: Pero no tenemos una imagen más. JASON HIRSCHHORN: No. No tenemos nada allí. Así que no vamos a resolver el problema específico. Vamos a volver a Akshar de solución, porque quiero establecer un delfín libre por el momento, o eso es lo último Lo que quiero terminar. Así que vamos a dejar esto aquí al tiempo que reconoce que no es bastante correcta, y vamos para volver a ella. Lo siento. Me dijo que podemos dinámicamente cambiar el CSS. Echemos un vistazo a eso y lo hacen que realmente rápidamente. Así que si inspecciono este elemento aquí abajo, y digo que quiero que sea azul, usted puede venir aquí, el color, porque Sé que cambia el color de algo, y vimos cómo cambió de azul. Así soy yo dinámicamente cambiar el CSS. No cambia para bien, pero luego Puedo volver a mi archivo CSS y cambiar el color de un objeto. Aceptar. Eso fue mucho. No terminamos mi programa increíble. Déjame que te lo muestro muy rápido, y luego nos dirigiremos a cabo. Oh, ¿dónde está? ¡No! Espera. OK, así que usted está empacando, un increíble vista previa, o frontal ver, de la próxima vez. Se trata de Entrenador de Delfines 2013, y que no funciona. Grande. [Risas] JASON HIRSCHHORN: Oh! Boom! ¿Qué quiere decir esto? AUDIENCIA: ¿No chmod. JASON HIRSCHHORN: yo no chmod. AUDIENCIA: la fila uno. JASON HIRSCHHORN: Oh, mira eso. Aceptar. Así pues, tengo mis seis delfines. ¿Qué sucede? Vamos a ver. Si entreno uno, ahora la formación de Lili. Oh, quiero hacerte libre, Lili. Hay que ir, de nuevo en el océano. Así que eso fue esta semana. Si usted tiene alguna pregunta, vamos a estar fuera. Y otra vez, te voy a enviar el resto de este código. Gracias, chicos.