1 00:00:00,000 --> 00:00:04,439 2 00:00:04,439 --> 00:00:07,230 DOUG LLOYD: En este video, queríamos de llamar a la atención separada 3 00:00:07,230 --> 00:00:09,110 a una muy particular elemento de JavaScript 4 00:00:09,110 --> 00:00:11,350 que le puede resultar útil cuando estás empezando 5 00:00:11,350 --> 00:00:15,750 para trabajar en la manipulación de las páginas web y cambiar el contenido de su página web 6 00:00:15,750 --> 00:00:16,460 sobre la marcha. 7 00:00:16,460 --> 00:00:19,450 Y esa es la noción de el Document Object Model. 8 00:00:19,450 --> 00:00:23,030 Así como vimos en nuestro video en JavaScript, objetos son muy flexibles. 9 00:00:23,030 --> 00:00:24,750 >> Y pueden contener diversos campos. 10 00:00:24,750 --> 00:00:28,075 Y aunque no fuimos a una gran cantidad de detalle, esos campos o propiedades, 11 00:00:28,075 --> 00:00:30,200 que haría probablemente más apropiadamente llamarlos 12 00:00:30,200 --> 00:00:33,915 en el contexto de un objeto, incluso esas propiedades pueden ser otros objetos. 13 00:00:33,915 --> 00:00:36,210 Y dentro de esos objetos pueden ser otros objetos. 14 00:00:36,210 --> 00:00:39,630 >> Usted tiene este gran objeto con una gran cantidad de otros objetos 15 00:00:39,630 --> 00:00:43,550 dentro de ella, que tipo de crea esta idea de un gran árbol. 16 00:00:43,550 --> 00:00:47,540 Ahora bien, el objeto de documento es un objeto muy especial en JavaScript 17 00:00:47,540 --> 00:00:52,580 que organiza toda la web página bajo este tipo de paraguas 18 00:00:52,580 --> 00:00:53,470 de un objeto. 19 00:00:53,470 --> 00:00:56,770 Y así, en el interior del documento objetos son objetos que presentan 20 00:00:56,770 --> 00:00:59,630 la cabeza y el cuerpo de su página web. 21 00:00:59,630 --> 00:01:03,760 >> En el interior de esos son otra objetos, etcétera, etcétera, 22 00:01:03,760 --> 00:01:08,411 hasta que su página web tiene toda ha organizado en esta gran objeto. 23 00:01:08,411 --> 00:01:09,660 ¿Cuál es el lado bueno, ¿verdad? 24 00:01:09,660 --> 00:01:12,170 Bueno, sabemos cómo trabajar con objetos en JavaScript. 25 00:01:12,170 --> 00:01:15,840 >> Así que si tenemos un objeto que se refiere a nuestra página Web completa, que 26 00:01:15,840 --> 00:01:19,590 significa llamando a la correcta métodos para manipular dicho objeto 27 00:01:19,590 --> 00:01:22,360 o modificar cierta de sus propiedades, se 28 00:01:22,360 --> 00:01:25,500 puede cambiar los elementos de nuestra página de programación 29 00:01:25,500 --> 00:01:30,210 utilizando JavaScript en lugar de tener para codificar las cosas con, por ejemplo, HTML. 30 00:01:30,210 --> 00:01:33,760 Así que aquí está un ejemplo de un muy simple página web, ¿no? 31 00:01:33,760 --> 00:01:35,850 Tiene etiquetas HTML, una cabeza. 32 00:01:35,850 --> 00:01:37,979 >> Dentro de allí es un título, hola mundo. 33 00:01:37,979 --> 00:01:38,770 Entonces tengo un cuerpo. 34 00:01:38,770 --> 00:01:40,686 Dentro de eso, no tengo tres cosas diferentes. 35 00:01:40,686 --> 00:01:44,170 Tengo una etiqueta de encabezado h2, un párrafo y un enlace. 36 00:01:44,170 --> 00:01:45,920 Esta es una página web muy sencilla. 37 00:01:45,920 --> 00:01:48,590 >> Bueno, ¿podría el documento objeto de este parece? 38 00:01:48,590 --> 00:01:50,700 Bueno, es un poco miedo tal vez al principio. 39 00:01:50,700 --> 00:01:52,510 Pero no deja de ser un gran árbol. 40 00:01:52,510 --> 00:01:54,890 Y en la raíz misma de la misma es documento. 41 00:01:54,890 --> 00:02:00,030 >> Dentro del documento es otra objeto en referencia al HTML de mi página. 42 00:02:00,030 --> 00:02:02,660 Y el código HTML de mi página es todo esto. 43 00:02:02,660 --> 00:02:06,900 Y luego dentro del HTML objeto, tengo un objeto de la cabeza, 44 00:02:06,900 --> 00:02:09,000 que se refiere a todo lo que hay. 45 00:02:09,000 --> 00:02:11,009 >> Y dentro de allí, Tengo un objeto de título. 46 00:02:11,009 --> 00:02:15,620 Y dentro de ahí, tengo otra objetar que es justo hola mundo. 47 00:02:15,620 --> 00:02:18,020 Yo podría tener mi cuerpo representado como este. 48 00:02:18,020 --> 00:02:22,850 >> En el interior de mi cuerpo, tengo una h2 objeto y un objeto de p para el párrafo 49 00:02:22,850 --> 00:02:25,270 y un objeto para un enlace. 50 00:02:25,270 --> 00:02:29,660 Y por lo que este toda jerarquía se puede representar como un árbol grande 51 00:02:29,660 --> 00:02:31,990 con un montón de pequeños poco cosas que salen de ella. 52 00:02:31,990 --> 00:02:33,740 Ahora, por supuesto, cuando estamos programando, nos 53 00:02:33,740 --> 00:02:35,560 no pensar en cosas como un gran árbol. 54 00:02:35,560 --> 00:02:37,980 Queremos ver real código de cosas relacionadas. 55 00:02:37,980 --> 00:02:40,790 >> Y, afortunadamente, podemos utilizar nuestras herramientas de desarrollo 56 00:02:40,790 --> 00:02:46,080 realmente tomar un vistazo a objeto de documento de este sitio web. 57 00:02:46,080 --> 00:02:48,150 Y vamos a hacer eso. 58 00:02:48,150 --> 00:02:49,580 Así que he abierto una pestaña del navegador. 59 00:02:49,580 --> 00:02:51,540 >> Y he abierto Herramientas de Desarrollo. 60 00:02:51,540 --> 00:02:54,460 Y en mi video en JavaScript, que mencionó que la consola no es 61 00:02:54,460 --> 00:02:56,770 Sólo en algún lugar donde imprimimos información, 62 00:02:56,770 --> 00:02:59,560 es también un lugar donde podemos introducir información. 63 00:02:59,560 --> 00:03:01,380 En este contexto, lo Voy a decir es 64 00:03:01,380 --> 00:03:05,720 Me gustaría volver los objetos de documento, 65 00:03:05,720 --> 00:03:07,502 para que pueda empezar a tener una mirada en ella. 66 00:03:07,502 --> 00:03:08,460 Entonces, ¿cómo podría yo hacer esto? 67 00:03:08,460 --> 00:03:10,740 Bueno, si quiero organizarla muy bien, 68 00:03:10,740 --> 00:03:16,317 Voy a decir console.dir, D-I-R. Ahora, yo uso console.log para imprimir solo 69 00:03:16,317 --> 00:03:17,400 algo muy simple. 70 00:03:17,400 --> 00:03:20,450 Pero si quiero organizar este jerárquicamente como un objeto, 71 00:03:20,450 --> 00:03:23,800 Quiero que tipo de estructura como una estructura de directorios. 72 00:03:23,800 --> 00:03:27,400 >> Así que quiero console.dir documento. 73 00:03:27,400 --> 00:03:28,430 Voy a pulsar Enter. 74 00:03:28,430 --> 00:03:32,350 Y justo debajo de él ahora, y voy a zoom aquí, 75 00:03:32,350 --> 00:03:36,000 Tengo este documento de respuesta con una pequeña flecha al lado. 76 00:03:36,000 --> 00:03:39,470 Ahora, cuando abro esta flecha, que va a ser un montón de cosas. 77 00:03:39,470 --> 00:03:42,560 >> Pero vamos a ignorar muchos de la misma y sólo tipo de enfoque 78 00:03:42,560 --> 00:03:46,250 en la parte más importante, por lo que puede comenzar a navegar en este documento. 79 00:03:46,250 --> 00:03:50,125 Hay mucho más a la DOM de solo padre nodos y nodos secundarios. 80 00:03:50,125 --> 00:03:51,500 Hay un montón de cosas accesorias. 81 00:03:51,500 --> 00:03:52,280 >> Así que voy a abrir esto. 82 00:03:52,280 --> 00:03:54,610 Y hay mucho de cosas que aparece. 83 00:03:54,610 --> 00:03:59,000 Pero todo lo que me importa es aquí, los nodos secundarios. 84 00:03:59,000 --> 00:04:00,410 Vamos a abrir eso. 85 00:04:00,410 --> 00:04:03,810 >> Dentro de allí veo algo familiar, HTML. 86 00:04:03,810 --> 00:04:07,670 Así que dentro de nuestro documento un nivel más abajo, HTML. 87 00:04:07,670 --> 00:04:08,550 Abro eso. 88 00:04:08,550 --> 00:04:10,380 ¿Qué estamos esperando? 89 00:04:10,380 --> 00:04:13,760 >> Si usted recuerda de nuestro diagrama, ¿qué debemos encontrar en el interior de HTML? 90 00:04:13,760 --> 00:04:17,275 ¿Qué dos nodos están por debajo de él en el árbol? 91 00:04:17,275 --> 00:04:17,899 Vamos a averiguar. 92 00:04:17,899 --> 00:04:18,940 Abrimos HTML. 93 00:04:18,940 --> 00:04:22,079 Bajamos a sus nodos secundarios. 94 00:04:22,079 --> 00:04:23,440 >> Pop que se abren. 95 00:04:23,440 --> 00:04:25,990 Hay cabeza y el cuerpo. 96 00:04:25,990 --> 00:04:28,540 Y podemos abrir la cabeza. 97 00:04:28,540 --> 00:04:30,460 Ir a los nodos secundarios. 98 00:04:30,460 --> 00:04:31,460 Bueno, ahí está el título. 99 00:04:31,460 --> 00:04:33,293 >> Y podríamos seguir y seguir así para siempre. 100 00:04:33,293 --> 00:04:34,770 Podríamos hacer esto con el cuerpo también. 101 00:04:34,770 --> 00:04:40,090 Pero hay una manera para que veamos el documento organizado como un gran objeto. 102 00:04:40,090 --> 00:04:42,610 Y si nos fijamos en que es un gran objeto que se parece mucho 103 00:04:42,610 --> 00:04:47,480 como el código, lo que significa que podemos empezar para manipular esta gran objeto utilizando 104 00:04:47,480 --> 00:04:51,220 código para cambiar lo que nuestro sitio web se ve y se siente como. 105 00:04:51,220 --> 00:04:54,920 >> Así que es una herramienta muy poderosa tenemos a nuestra disposición ahora. 106 00:04:54,920 --> 00:04:57,360 Así como acabamos de ver, la documento mismo objeto 107 00:04:57,360 --> 00:05:01,392 y todos los objetos dentro de ella tener propiedades y métodos, justo 108 00:05:01,392 --> 00:05:04,100 como cualquier otro objeto que hemos estado trabajando con en JavaScript. 109 00:05:04,100 --> 00:05:08,370 Pero podemos utilizar esas propiedades y utilizar esos métodos para perforar especie de abajo 110 00:05:08,370 --> 00:05:10,900 de la gran documento y obtener más y más y más, 111 00:05:10,900 --> 00:05:13,360 cada vez más finas granos de detalle, hasta que 112 00:05:13,360 --> 00:05:17,510 llegar a una pieza muy específico de nuestro página web que queremos cambiar. 113 00:05:17,510 --> 00:05:22,700 >> Y cuando actualicemos propiedades del Document Object o llame a los métodos, 114 00:05:22,700 --> 00:05:24,450 las cosas podrían suceder en nuestra página web. 115 00:05:24,450 --> 00:05:28,420 Y nosotros no tenemos que hacer ninguna refrescante tener esos cambios surtan efecto. 116 00:05:28,420 --> 00:05:33,160 >> Y eso es una habilidad bastante frío para tener cuando estamos trabajando con el código. 117 00:05:33,160 --> 00:05:37,185 ¿Cuáles son algunas de estas propiedades que son parte de un objeto de documento? 118 00:05:37,185 --> 00:05:40,100 Bueno, probablemente vio una par de ellos muy rápido 119 00:05:40,100 --> 00:05:42,700 como estábamos pasar con velocidad a través del documento gigante 120 00:05:42,700 --> 00:05:45,150 objeto que acabamos de ver en el navegador web. 121 00:05:45,150 --> 00:05:48,420 >> Pero un par de estas propiedades podrían ser cosas como HTML interior. 122 00:05:48,420 --> 00:05:52,950 Y hasta me puede recordar el uso de este en el vídeo JavaScript 123 00:05:52,950 --> 00:05:54,950 al final cuando me estaba hablando de los acontecimientos. 124 00:05:54,950 --> 00:05:56,125 ¿Cuál fue este código HTML interno? 125 00:05:56,125 --> 00:05:59,030 Bueno, es sólo lo que es entre las etiquetas. 126 00:05:59,030 --> 00:06:01,590 >> Y por lo que el código HTML interno, por ejemplo, del título 127 00:06:01,590 --> 00:06:05,390 etiqueta, si hubiéramos seguido adelante en que el ejemplo hace un momento, 128 00:06:05,390 --> 00:06:08,020 habría sido hola mundo. 129 00:06:08,020 --> 00:06:10,140 Ese fue el título de nuestra página. 130 00:06:10,140 --> 00:06:12,370 Otras propiedades incluir el nombre de nodo, que 131 00:06:12,370 --> 00:06:15,810 es el nombre de un archivo HTML elemento como título. 132 00:06:15,810 --> 00:06:19,100 ID, que es el ID atributo de un elemento HTML. 133 00:06:19,100 --> 00:06:23,790 >> Recordemos que podemos señalar especialmente elementos específicos de nuestro HTML 134 00:06:23,790 --> 00:06:27,510 con un atributo ID, que por lo general es muy útil en el contexto de la CSS, 135 00:06:27,510 --> 00:06:29,000 específicamente. 136 00:06:29,000 --> 00:06:33,217 Nodo padre, que es una referencia a lo que es justo por encima de mí en el DOM. 137 00:06:33,217 --> 00:06:35,800 Y nodos hijos, que es un referencia a lo que está por debajo de mí. 138 00:06:35,800 --> 00:06:37,950 Y vimos mucho de eso sólo mirar a través. 139 00:06:37,950 --> 00:06:42,970 Nodos secundarios, así es como llegamos más y más en el árbol. 140 00:06:42,970 --> 00:06:46,590 >> Atributos, eso es sólo un arreglo de los atributos del elemento HTML. 141 00:06:46,590 --> 00:06:50,270 Así que un ejemplo de atributos podría ser si usted tiene una etiqueta de imagen, 142 00:06:50,270 --> 00:06:54,090 por lo general tiene un atributo de origen, quizá una altura y un atributo de ancho. 143 00:06:54,090 --> 00:06:57,120 Y para que no sería más que una matriz de todos los atributos asociados 144 00:06:57,120 --> 00:06:59,300 con ese elemento HTML. 145 00:06:59,300 --> 00:07:04,140 >> El estilo es otro que Qué representa la CSS 146 00:07:04,140 --> 00:07:06,050 estilo de un elemento particular. 147 00:07:06,050 --> 00:07:08,310 Y más adelante en este video, vamos específicamente 148 00:07:08,310 --> 00:07:14,592 estilo de palanca para hacer un par de los cambios en nuestro sitio web. 149 00:07:14,592 --> 00:07:15,800 Así que esas son algunas de las propiedades. 150 00:07:15,800 --> 00:07:17,591 >> Y también algo que hay métodos que podemos 151 00:07:17,591 --> 00:07:22,450 también utilizar para aislar tal vez más rápidamente elementos del objeto de documento. 152 00:07:22,450 --> 00:07:26,730 Tal vez, el más versátil de los cuales es getElementById. 153 00:07:26,730 --> 00:07:31,190 Así que podría decir algo así, porque recuerde que es un método del Documento 154 00:07:31,190 --> 00:07:34,880 Objeto, document.getElementById. 155 00:07:34,880 --> 00:07:39,820 >> Y dentro de esos paréntesis, especifique un elemento HTML con una identificación especial 156 00:07:39,820 --> 00:07:42,330 Atribuyo que tengo previamente establecer y voy de inmediato 157 00:07:42,330 --> 00:07:46,685 ir directamente a ese elemento de la página web en general. 158 00:07:46,685 --> 00:07:49,310 Así que no tengo que perforar quizá a través de todos los de una sola capa. 159 00:07:49,310 --> 00:07:52,841 Yo sólo puedo utilizar este método para encontrarlo, como una especie de búsqueda de calor de misiles, 160 00:07:52,841 --> 00:07:53,340 ¿derecho? 161 00:07:53,340 --> 00:07:56,300 Simplemente va y se encuentra exactamente lo que está buscando. 162 00:07:56,300 --> 00:07:59,290 >> GetElementsByTagName es muy similar en espíritu. 163 00:07:59,290 --> 00:08:02,500 Tal vez esto sería encontrar toda la etiquetas de negrita o todas las etiquetas p 164 00:08:02,500 --> 00:08:05,920 y me da una gran variedad de todo que podría luego trabajar. 165 00:08:05,920 --> 00:08:12,080 appendChild añade algo un nivel en el árbol. 166 00:08:12,080 --> 00:08:16,440 >> Así que puedo añadir toda una nueva elemento de un nivel inferior. 167 00:08:16,440 --> 00:08:19,700 O puedo eliminar un elemento que es un nivel inferior, así que si quiero 168 00:08:19,700 --> 00:08:22,870 eliminar algo de mi página web. 169 00:08:22,870 --> 00:08:28,480 Ahora, una nota de codificación rápido y una rápida ahorro de cefalea nota, es de esperar. 170 00:08:28,480 --> 00:08:31,670 >> getElementById-- la d es minúscula. 171 00:08:31,670 --> 00:08:36,950 No puedo decirle cuántas veces tengo usado getElementById y capitalizado 172 00:08:36,950 --> 00:08:38,336 el d allí. 173 00:08:38,336 --> 00:08:39,460 Debido a que es muy común. 174 00:08:39,460 --> 00:08:42,990 Si escribimos la palabra Identificación, es por lo general el capital que el capital D. 175 00:08:42,990 --> 00:08:44,240 Y mi código simplemente no funciona. 176 00:08:44,240 --> 00:08:45,630 Y no puedo entender por qué. 177 00:08:45,630 --> 00:08:49,490 Este es un muy, muy, muy error común que todo el mundo hace, 178 00:08:49,490 --> 00:08:51,890 incluso los expertos que tienen estado haciendo esto para siempre. 179 00:08:51,890 --> 00:08:55,410 Así que acaba de ser conscientes, getElementById, que d es minúscula. 180 00:08:55,410 --> 00:09:00,080 Y es de esperar, que le ahorra varios minutos por lo menos dolores de cabeza. 181 00:09:00,080 --> 00:09:02,204 >> Entonces, ¿qué significa todo esto nos dicen? 182 00:09:02,204 --> 00:09:03,120 Tenemos estos métodos. 183 00:09:03,120 --> 00:09:04,161 Tenemos estas propiedades. 184 00:09:04,161 --> 00:09:06,610 Ahora bien, si partimos de documento, documento. 185 00:09:06,610 --> 00:09:10,220 lo que sea, ahora podemos llegar a cualquier única pieza de nuestra página web 186 00:09:10,220 --> 00:09:14,870 que queremos usar JavaScript con sólo llamar a estos métodos 187 00:09:14,870 --> 00:09:19,940 y el aprovechamiento de las propiedades que encontramos en varios lugares. 188 00:09:19,940 --> 00:09:24,890 >> Esto puede ser prolijo, esto document.getElementById, 189 00:09:24,890 --> 00:09:28,560 tal vez tienen un nombre de etiqueta larga, tal vez lo hace más llamadas más adelante. 190 00:09:28,560 --> 00:09:31,230 Las cosas pueden ser un poco prolijo. 191 00:09:31,230 --> 00:09:34,480 Y a medida que los programadores, ya que tienes probablemente visto en muchos de estos videos, 192 00:09:34,480 --> 00:09:36,600 no nos gustan las cosas prolijas. 193 00:09:36,600 --> 00:09:38,520 >> Nos gusta ser capaz de hacer las cosas rápidamente. 194 00:09:38,520 --> 00:09:42,640 Así que nos gustaría una más forma concisa para decir algo. 195 00:09:42,640 --> 00:09:46,270 Así que este tipo de cables a la noción de algo llamado jQuery. 196 00:09:46,270 --> 00:09:49,170 Ahora jQuery no es JavaScript. 197 00:09:49,170 --> 00:09:50,350 No es parte de JavaScript. 198 00:09:50,350 --> 00:09:54,790 >> Es una biblioteca que fue escrito por algunos programadores de JavaScript 199 00:09:54,790 --> 00:09:57,060 Hace unos 10 años. 200 00:09:57,060 --> 00:10:01,300 Y su objetivo es simplificar esto lo que es llamada scripting del lado del cliente, lo que 201 00:10:01,300 --> 00:10:04,310 es básicamente lo que estábamos hablando con manipulaciones DOM. 202 00:10:04,310 --> 00:10:11,090 Y así, si quería modificar la color de fondo de mi página web, tal vez 203 00:10:11,090 --> 00:10:11,980 una Div específico. 204 00:10:11,980 --> 00:10:15,325 >> Aquí, estoy parecer conseguir ElementById colorDiv. 205 00:10:15,325 --> 00:10:16,950 Y quiero establecer su color de fondo. 206 00:10:16,950 --> 00:10:20,720 Si estoy usando pura JavaScript usando el Document Object Model, 207 00:10:20,720 --> 00:10:23,990 eso es un montón de cosas, ¿no? document.getElementById 208 00:10:23,990 --> 00:10:25,531 colorDiv.style.backgroundColor = verde. 209 00:10:25,531 --> 00:10:27,260 210 00:10:27,260 --> 00:10:28,050 >> Uf. 211 00:10:28,050 --> 00:10:30,110 Eso era mucho para decir. 212 00:10:30,110 --> 00:10:31,720 Es mucho más que escribir, también. 213 00:10:31,720 --> 00:10:35,760 Y así, en jQuery, que tal vez podemos decir esto un poco más concisa. 214 00:10:35,760 --> 00:10:39,350 La compensación es que es tal vez un poco poco más críptica, de repente, 215 00:10:39,350 --> 00:10:39,850 ¿derecho? 216 00:10:39,850 --> 00:10:43,580 >> Al menos, el tiempo es un poco más explicativo en cuanto a lo que estamos haciendo. 217 00:10:43,580 --> 00:10:49,947 Esta muestra de dólar, paréntesis, comilla simple, hachís, colorDiv, ¿verdad? 218 00:10:49,947 --> 00:10:50,780 ¿Que significa eso? 219 00:10:50,780 --> 00:10:53,640 Bueno, eso es básicamente sólo document.getElementById colorDiv. 220 00:10:53,640 --> 00:10:58,700 >> Pero es esta especie de taquigrafía forma de hacerlo utilizando jQuery. 221 00:10:58,700 --> 00:11:01,380 Vamos a echar un vistazo ahora en un par de maneras diferentes 222 00:11:01,380 --> 00:11:04,520 que puede ser que en realidad utilizar este Document Object 223 00:11:04,520 --> 00:11:06,807 Modelo para manipular piezas de mi sitio. 224 00:11:06,807 --> 00:11:09,140 En particular, vamos que está trabajando en la manipulación 225 00:11:09,140 --> 00:11:14,090 el color de un particular, Div, colorDiv, en una página web. 226 00:11:14,090 --> 00:11:15,299 Así que vamos a echar un vistazo a eso. 227 00:11:15,299 --> 00:11:15,798 Correcto. 228 00:11:15,798 --> 00:11:16,700 Así que estoy en una página. 229 00:11:16,700 --> 00:11:20,750 Se llama test.html al descargar esto si usted quiere jugar con esto. 230 00:11:20,750 --> 00:11:24,730 Y tengo un montón de botones de esta página. 231 00:11:24,730 --> 00:11:27,730 Y yo estoy diciendo funciones individuales para el color de fondo, púrpura, verde, 232 00:11:27,730 --> 00:11:31,330 naranja, azul, una sola función roja, de color de fondo, controlador de eventos 233 00:11:31,330 --> 00:11:34,360 de color de fondo, y el uso de jQuery. 234 00:11:34,360 --> 00:11:38,147 Lo que estoy hablando cuando estoy haciendo esto? 235 00:11:38,147 --> 00:11:39,230 Así que hemos visto en los botones. 236 00:11:39,230 --> 00:11:41,521 Ahora, vamos a echar un vistazo a una parte del código fuente aquí. 237 00:11:41,521 --> 00:11:44,770 Vamos a empezar con test.html. 238 00:11:44,770 --> 00:11:48,100 Así funciones individuales para el fondo el color es lo que he escribí aquí. 239 00:11:48,100 --> 00:11:49,350 Permítanme desplazo un poco. 240 00:11:49,350 --> 00:11:56,170 241 00:11:56,170 --> 00:11:58,820 >> Y te darás cuenta de que yo han definido estos botones 242 00:11:58,820 --> 00:12:03,990 decir cuando se hace clic en este botón, llamar a la función cambia a lila. 243 00:12:03,990 --> 00:12:06,670 Cuando este botón se haga clic, más bien, llamar a la función cambia a verde, 244 00:12:06,670 --> 00:12:08,710 vuelta a la naranja, volverá de color rojo, volverá azul. 245 00:12:08,710 --> 00:12:11,880 Usted probablemente puede adivinar que este tal vez no sea el mejor diseño 246 00:12:11,880 --> 00:12:12,460 sentido, ¿verdad? 247 00:12:12,460 --> 00:12:16,490 >> Sería bueno si pudiera tener un enfoque más general. 248 00:12:16,490 --> 00:12:19,570 Bueno, primero vamos a echar un vistazo en lo que esas cinco funciones son 249 00:12:19,570 --> 00:12:24,400 document.getElementById colorDiv.style.background = púrpura, 250 00:12:24,400 --> 00:12:27,250 verde, naranja, rojo, y azul, respectivamente. 251 00:12:27,250 --> 00:12:30,930 Por lo tanto, no es particularmente el mejor diseño. 252 00:12:30,930 --> 00:12:33,390 >> El siguiente conjunto de botones He es que he escrito 253 00:12:33,390 --> 00:12:36,380 una única función llamada cambiar de color que aparentemente 254 00:12:36,380 --> 00:12:38,960 acepta una cadena como argumento. 255 00:12:38,960 --> 00:12:40,290 Así que esto es un poco mejor. 256 00:12:40,290 --> 00:12:43,840 Púrpura, verde, naranja, rojo, azul es ahora un argumento. 257 00:12:43,840 --> 00:12:46,230 Así que me he escrito una más general caso función de JavaScript, 258 00:12:46,230 --> 00:12:47,771 que podría ser algo como esto. 259 00:12:47,771 --> 00:12:48,680 Estoy pasando. 260 00:12:48,680 --> 00:12:52,090 Este cambio de color es la función esperando un argumento llamado color. 261 00:12:52,090 --> 00:12:54,970 Y yo digo que establezca la color de fondo a color. 262 00:12:54,970 --> 00:12:58,390 Así que aquí representa lo que tengo aquí. 263 00:12:58,390 --> 00:12:59,770 Así que eso es un poco mejor. 264 00:12:59,770 --> 00:13:02,740 >> Pero yo podría ser capaz de hacerlo mejor que eso. 265 00:13:02,740 --> 00:13:06,140 Si vamos a echar un vistazo por la situación controlador de eventos, 266 00:13:06,140 --> 00:13:07,860 Ahora todas estas llamadas tienen el mismo aspecto. 267 00:13:07,860 --> 00:13:10,340 Si usted recuerda de nuestra discusión sobre los controladores de eventos, 268 00:13:10,340 --> 00:13:15,770 Puedo conseguir información acerca de cuál de estos botones se hizo clic y usar eso. 269 00:13:15,770 --> 00:13:19,560 >> Y así, en event.JavaScript, tengo escrita evento de cambio de color, que 270 00:13:19,560 --> 00:13:21,110 se da cuenta de qué botón se hizo clic. 271 00:13:21,110 --> 00:13:23,250 Esa es la línea objeto de activación. 272 00:13:23,250 --> 00:13:25,240 Y entonces aquí, se pone muy prolijo. 273 00:13:25,240 --> 00:13:27,420 Pero lo que estoy haciendo es que estoy ajustar el fondo 274 00:13:27,420 --> 00:13:30,340 color a triggerObject inner.HTML. 275 00:13:30,340 --> 00:13:34,170 Ese es el texto en entre las etiquetas de los botones. 276 00:13:34,170 --> 00:13:36,500 >> Y luego, aparentemente, han para configurarlo a minúsculas. 277 00:13:36,500 --> 00:13:40,780 Y así es como puedo convertir un entero cadena a minúsculas en JavaScript utilizando 278 00:13:40,780 --> 00:13:42,940 ese método a minúsculas. 279 00:13:42,940 --> 00:13:46,570 Porque cuando me puse un color, como que estoy tratando de hacer aquí, 280 00:13:46,570 --> 00:13:48,260 el color tiene que estar en minúsculas. 281 00:13:48,260 --> 00:13:50,920 >> Pero en el botón que tenía, si volvemos a analizar, 282 00:13:50,920 --> 00:13:55,890 Observe que el texto existe escrito con una P de capital para la púrpura. 283 00:13:55,890 --> 00:13:59,140 Y entonces por lo fondo aquí, que aparentemente 284 00:13:59,140 --> 00:14:02,630 tratar de hacer esto utilizando jQuery también. 285 00:14:02,630 --> 00:14:06,000 Y en este caso, no estoy realmente llamar a una función en absoluto. 286 00:14:06,000 --> 00:14:11,430 Que acabo de decir a la clase que estoy utilizando para este botón es un botón jQ. 287 00:14:11,430 --> 00:14:12,360 Eso es. 288 00:14:12,360 --> 00:14:14,950 >> Entonces, ¿cómo saber jQuery lo que estoy haciendo? 289 00:14:14,950 --> 00:14:18,740 Bueno, esta es una de las ventajas recortar desventajas de jQuery. 290 00:14:18,740 --> 00:14:21,560 Puede permitir que haga cosas muy concisa, pero tal vez no 291 00:14:21,560 --> 00:14:22,570 como intuitivamente. 292 00:14:22,570 --> 00:14:25,570 Tal vez los otros tres hacen una poco más de sentido lo que estoy haciendo. 293 00:14:25,570 --> 00:14:29,010 Aquí, sin embargo, ¿qué está pasando? 294 00:14:29,010 --> 00:14:31,940 >> Al parecer, la creación de una función anónima 295 00:14:31,940 --> 00:14:36,790 que se carga cada vez que mi documento está listo, por lo document.ready, 296 00:14:36,790 --> 00:14:38,760 alguna función que va a suceder. 297 00:14:38,760 --> 00:14:40,490 Básicamente, cuando es un documento preparado? 298 00:14:40,490 --> 00:14:42,310 Es cuando mi página se ha cargado. 299 00:14:42,310 --> 00:14:46,540 >> Así que tan pronto como mi página se ha cargado, el siguiente función está siempre listo. 300 00:14:46,540 --> 00:14:54,310 Se dice, si un objeto de tipo jQButton, o si la clase jQButton ha hecho click, 301 00:14:54,310 --> 00:14:55,570 ejecutar esta función. 302 00:14:55,570 --> 00:14:59,360 Así que aquí está dos funciones anónimas, definido dentro de la otra. 303 00:14:59,360 --> 00:15:03,930 >> Así que toda mi contexto aquí hasta ahora es mi página 304 00:15:03,930 --> 00:15:06,520 cuando carga que llama a esta función. 305 00:15:06,520 --> 00:15:09,740 Y esta función está esperando para un botón que se hace clic. 306 00:15:09,740 --> 00:15:14,490 Y cuando se hace clic en un botón, jQ específicamente se hace clic en el botón, 307 00:15:14,490 --> 00:15:17,150 llama a este otro función, que está pasando 308 00:15:17,150 --> 00:15:21,250 para establecer el fondo color de la colorDiv para ser 309 00:15:21,250 --> 00:15:25,990 cualquier texto que se encuentra en entre las etiquetas. 310 00:15:25,990 --> 00:15:28,050 >> Esta es la noción de qué botón se hizo clic. 311 00:15:28,050 --> 00:15:31,230 Pero por lo demás, se trata de una especie de comportarse similar a un evento. 312 00:15:31,230 --> 00:15:34,460 Es sólo la misma manera que expresaría esto en jQuery. 313 00:15:34,460 --> 00:15:36,790 Una vez más, es probable que sea un mucho más intimidante. 314 00:15:36,790 --> 00:15:40,840 No es tan claro como algo así como event.js, 315 00:15:40,840 --> 00:15:45,080 que es tal vez un poco más detallado, pero un poco menos 316 00:15:45,080 --> 00:15:46,000 intimidante. 317 00:15:46,000 --> 00:15:51,460 >> Pero si nos pop de nuevo hacia mi navegador ventana, si empiezo clicking-- así, 318 00:15:51,460 --> 00:15:52,690 eso cambió a morado. 319 00:15:52,690 --> 00:15:54,450 Esta es verde utilizando el método de cadena. 320 00:15:54,450 --> 00:15:56,500 Esta es de color naranja con el controlador de eventos. 321 00:15:56,500 --> 00:15:58,300 >> Esta es rojo usando jQuery, ¿verdad? 322 00:15:58,300 --> 00:16:01,270 Todos ellos se comportan exactamente de la misma. 323 00:16:01,270 --> 00:16:06,509 Ellos sólo hacen uso de diferentes enfoques para resolver el problema. 324 00:16:06,509 --> 00:16:08,550 Hay mucho más para jQuery entonces estamos sin duda 325 00:16:08,550 --> 00:16:10,050 vamos a hablar en este video. 326 00:16:10,050 --> 00:16:15,410 Pero si usted quiere saber más, puede ir a la clase de documentación de jQuery 327 00:16:15,410 --> 00:16:19,710 y aprender un poco más sobre esta biblioteca muy flexible, lo cual 328 00:16:19,710 --> 00:16:22,550 es ideal para hacer del lado del cliente scripting como lo que estábamos haciendo 329 00:16:22,550 --> 00:16:26,240 para manipular el aspecto y sentir de nuestra página Web 330 00:16:26,240 --> 00:16:28,750 con el Document Object Model. 331 00:16:28,750 --> 00:16:29,650 Soy Doug Lloyd. 332 00:16:29,650 --> 00:16:31,930 Esto es CS50. 333 00:16:31,930 --> 00:16:34,022