1 00:00:00,000 --> 00:00:10,632 2 00:00:10,632 --> 00:00:12,340 ALLISON Buchholtz-AU: Todo el derecho de todos. 3 00:00:12,340 --> 00:00:13,520 Bienvenido de nuevo a la sección. 4 00:00:13,520 --> 00:00:15,315 Es nuestra penúltima sección. 5 00:00:15,315 --> 00:00:16,542 Es muy triste. 6 00:00:16,542 --> 00:00:19,500 No sé lo que voy a hacer sin ver que ustedes todos los lunes. 7 00:00:19,500 --> 00:00:20,970 Yo creo que deberíamos solo-- Tal vez podríamos sólo 8 00:00:20,970 --> 00:00:22,710 cumplir aquí y tener la cena o algo así. 9 00:00:22,710 --> 00:00:23,270 No lo sé. 10 00:00:23,270 --> 00:00:24,370 Voy a traer la comida en su lugar. 11 00:00:24,370 --> 00:00:26,290 Nos limitamos a hablar. 12 00:00:26,290 --> 00:00:29,900 Pero sí, la próxima semana lo hará ser nuestra última sección. 13 00:00:29,900 --> 00:00:32,390 >> En ese sentido, usted tiene una prueba la próxima semana. 14 00:00:32,390 --> 00:00:35,660 Sé que me olvidé de hacer mi, como, dos semanas de anticipación la semana pasada, 15 00:00:35,660 --> 00:00:39,140 pero espero que ustedes sabía que esto sucedería. 16 00:00:39,140 --> 00:00:42,880 Esperemos que este es uno de los últimos exámenes parciales para ustedes para el semestre. 17 00:00:42,880 --> 00:00:46,950 Pero va a cubrir toda la material que hemos repasado. 18 00:00:46,950 --> 00:00:50,811 Así que no es como usted puede olvidar unos cuatro bucles o variables. 19 00:00:50,811 --> 00:00:52,560 Debido a que aprendimos aquellos en el principio, 20 00:00:52,560 --> 00:00:55,870 esos son, obviamente, juego justo para su examen. 21 00:00:55,870 --> 00:01:00,150 >> Va a ser el mismo formato, el mismo longitud, por lo que ya están acostumbrados a ello. 22 00:01:00,150 --> 00:01:02,330 No va a ser codificación por problemas en las manos, 23 00:01:02,330 --> 00:01:06,270 tal vez algo de verdadero o falso, tal vez algo de respuesta corta. 24 00:01:06,270 --> 00:01:08,090 Por lo que debe ser familiarizarse con el formato, 25 00:01:08,090 --> 00:01:10,940 especialmente si toma las pruebas de la práctica. 26 00:01:10,940 --> 00:01:13,950 Pero como ya he dicho aquí, es acumulativo, pero definitivamente estamos 27 00:01:13,950 --> 00:01:17,410 va a estar centrado en cosas de la sexta semana en adelante. 28 00:01:17,410 --> 00:01:24,050 Por lo tanto, estamos probablemente no va preguntarle sobre cuántos bytes 29 00:01:24,050 --> 00:01:26,180 se encuentran en cada tipo o ese tipo de cosas, 30 00:01:26,180 --> 00:01:29,730 pero probablemente vamos a ser interesados ​​en cosas como listas enlazadas, 31 00:01:29,730 --> 00:01:32,750 o diferentes estructuras de datos, o algoritmos diferentes 32 00:01:32,750 --> 00:01:33,960 que ya hemos hablado. 33 00:01:33,960 --> 00:01:38,990 Así que asegúrate de que estás realmente sobre ellos, y si 34 00:01:38,990 --> 00:01:41,590 necesita ningún recurso, aquí hay un montón de recursos. 35 00:01:41,590 --> 00:01:44,790 Me acabo de dar clase de una lista rápida allí. 36 00:01:44,790 --> 00:01:48,330 >> La próxima semana será cuestionario revisar durante este tiempo. 37 00:01:48,330 --> 00:01:52,290 Así que si usted tiene alguna pregunta o temas específicos, 38 00:01:52,290 --> 00:01:56,180 cosas específicas sobre el cuestionario que desea ir, por favor 39 00:01:56,180 --> 00:02:01,780 enviar a mí antes de tiempo para que pueda tipo de preparar algún material para eso. 40 00:02:01,780 --> 00:02:06,310 Y además de esto sección de revisión, vamos a 41 00:02:06,310 --> 00:02:09,616 También se sostiene el curso de toda la revisamos como lo hicimos la última vez. 42 00:02:09,616 --> 00:02:11,490 Y va a ser hecho por la misma gente. 43 00:02:11,490 --> 00:02:13,030 No sé si eso hace que sea mejor o peor, 44 00:02:13,030 --> 00:02:15,670 pero va a ser yo, Hannah, Davan, y Gabe nuevo. 45 00:02:15,670 --> 00:02:18,630 Así que si quieres venir a ver todos nosotros bromas entre sí 46 00:02:18,630 --> 00:02:21,270 y caminar a través de concurso opinión, debería 47 00:02:21,270 --> 00:02:22,600 llegado a que el próximo lunes también. 48 00:02:22,600 --> 00:02:26,210 Así que vas a tener un atasco Lunes repleto de opinión concurso, lo cual es bueno 49 00:02:26,210 --> 00:02:29,840 porque entonces usted tiene Martes para procesar a través de todo. 50 00:02:29,840 --> 00:02:32,230 >> Pero sin duda hacer comprobar estos recursos. 51 00:02:32,230 --> 00:02:36,030 Study.csv.net es, con mucho, me pensar, uno de los más útiles, 52 00:02:36,030 --> 00:02:37,990 sobre todo porque tiene una gran cantidad de código de ejemplo, 53 00:02:37,990 --> 00:02:40,490 tiene todos los Power Points con todas las notas sobre él, 54 00:02:40,490 --> 00:02:44,510 que son realmente lo que más me baso de mis materiales de la sección de. 55 00:02:44,510 --> 00:02:47,480 Si hay algo en el anterior secciones que yo pueda haber enviados 56 00:02:47,480 --> 00:02:49,920 que puede que no tenga conseguido, sólo házmelo saber. 57 00:02:49,920 --> 00:02:52,520 Como ejemplo de código de la semana pasada, si alguien no consiguió que, 58 00:02:52,520 --> 00:02:55,930 me acaba de enviar por correo electrónico o venir a hablar conmigo, y me aseguraré de que usted recibe que. 59 00:02:55,930 --> 00:03:02,000 >> Así que con eso, hoy vamos estar hablando de JavaScript. 60 00:03:02,000 --> 00:03:04,690 Así que aquí estamos Tommy, quién era yo sólo hablar con usted anoche. 61 00:03:04,690 --> 00:03:06,670 Amo a Tommy. 62 00:03:06,670 --> 00:03:09,040 JavaScript es su favorito lenguaje, como él dice aquí. 63 00:03:09,040 --> 00:03:14,050 Van a tratar y te dicen que es no es el mejor, y van a estar equivocado. 64 00:03:14,050 --> 00:03:16,510 Así que Tommy es un maestro JavaScript. 65 00:03:16,510 --> 00:03:19,850 No estoy muy a su nivel, pero yo estaba como, 66 00:03:19,850 --> 00:03:22,900 "Tommy, ¿cómo puedo enseñar estos niños de JavaScript? " 67 00:03:22,900 --> 00:03:26,700 Así que me dio algunos consejos, por lo espero que funcionan. 68 00:03:26,700 --> 00:03:31,140 >> Así que un par de cosas que debe saber es que JavaScript es un script del lado del cliente 69 00:03:31,140 --> 00:03:35,560 idioma, por lo que PHP es algo que consideramos más del lado del servidor, 70 00:03:35,560 --> 00:03:39,280 se cargar en el servidor, compilado y ejecutado allí. 71 00:03:39,280 --> 00:03:42,871 Éste se ejecuta en su propia máquina. 72 00:03:42,871 --> 00:03:43,370 DE ACUERDO? 73 00:03:43,370 --> 00:03:46,960 Así que usted carga alguna página JavaScript y se ejecuta en su máquina. 74 00:03:46,960 --> 00:03:49,910 La sintaxis es muy similar a C y PHP. 75 00:03:49,910 --> 00:03:52,490 Vamos a ir a través de algunos ejemplos de JavaScript, 76 00:03:52,490 --> 00:03:56,740 y vas a ver que el forma en que hablamos acerca de las variables, bucles, 77 00:03:56,740 --> 00:03:58,910 y las condiciones son muy similares. 78 00:03:58,910 --> 00:04:00,500 DE ACUERDO? 79 00:04:00,500 --> 00:04:04,490 El hecho de que son tan similares es probablemente va a disparar algunos de ustedes 80 00:04:04,490 --> 00:04:08,529 hasta, en algunos casos, sólo porque podrás incorporar un poco de C 81 00:04:08,529 --> 00:04:09,570 donde no debería estar. 82 00:04:09,570 --> 00:04:14,130 Tal vez usted trata de escribir algo cuando no debería ser escrito. 83 00:04:14,130 --> 00:04:16,540 >> Y en eso, una cosa es saber es que JavaScript 84 00:04:16,540 --> 00:04:19,360 es un tipo dinámico lenguaje, como PHP. 85 00:04:19,360 --> 00:04:21,410 Así que si ustedes recuerden de sección de la semana pasada, 86 00:04:21,410 --> 00:04:23,680 cuando éramos clase de hacer nuestro curso acelerado PHP, 87 00:04:23,680 --> 00:04:28,860 vimos cómo una cadena de uno podría ser convertido en un int uno, y así sucesivamente. 88 00:04:28,860 --> 00:04:31,650 89 00:04:31,650 --> 00:04:34,850 El tipo de variables se determinan en tiempo de ejecución, 90 00:04:34,850 --> 00:04:38,180 por lo que pueden cambiar con el el curso del programa, 91 00:04:38,180 --> 00:04:43,109 y de la misma manera que nunca realmente declarar tipos de variables de PHP, 92 00:04:43,109 --> 00:04:45,900 vamos a estar haciendo lo mismo cosa aquí, donde no estamos realmente 93 00:04:45,900 --> 00:04:49,740 el control de los tipos de nuestras variables, por así decirlo, como lo hacemos en C. 94 00:04:49,740 --> 00:04:52,200 >> Y luego una cosa que es bastante cool es 95 00:04:52,200 --> 00:04:54,090 que puede error comprobar a través de la consola, 96 00:04:54,090 --> 00:04:57,240 con esta gran función console.log, que 97 00:04:57,240 --> 00:05:00,930 permite imprimir diferente variables o los objetos que vamos a 98 00:05:00,930 --> 00:05:01,750 hablar. 99 00:05:01,750 --> 00:05:05,720 Al igual que la semana pasada cuando estaba como, "utilizar esta función," con vertedero 100 00:05:05,720 --> 00:05:10,490 de su conjunto de procesadores esta es una función que desea utilizar, console.log. 101 00:05:10,490 --> 00:05:12,860 Me sorprendió la cantidad de estudiantes en horario de oficina 102 00:05:12,860 --> 00:05:14,530 no sabía acerca de la función de volcado. 103 00:05:14,530 --> 00:05:19,010 Y yo estaba como, "chicos, esta voluntad hacer su vida mucho más fácil ". 104 00:05:19,010 --> 00:05:22,960 >> Muy bien, así que era una especie de sólo una cosa breve, como siempre, 105 00:05:22,960 --> 00:05:24,000 tenemos ejemplos. 106 00:05:24,000 --> 00:05:25,600 Sé que ustedes aman a los. 107 00:05:25,600 --> 00:05:30,930 Así que aquí está un ejemplo de una muy presentar aquí sencilla JavaScript. 108 00:05:30,930 --> 00:05:34,000 Así que sólo va a crear este pop-up que dice: 109 00:05:34,000 --> 00:05:36,336 "Hola mundo", cuando entrar en la página, pero vamos 110 00:05:36,336 --> 00:05:37,960 tratar de caminar a través de esto un poco. 111 00:05:37,960 --> 00:05:43,440 Así que, obviamente esto es sólo como su index.html normal. 112 00:05:43,440 --> 00:05:50,280 Así, sólo nuestra plantilla normal de aquí, y tenemos HTML, tenemos nuestra cabeza, 113 00:05:50,280 --> 00:05:55,580 y al igual que con CSS, cómo incluido algún archivo fuera, ¿verdad? 114 00:05:55,580 --> 00:05:59,260 Tenemos algunos script type texto que está JavaScript. 115 00:05:59,260 --> 00:06:02,680 Y la fuente es hello.js, que es aquí abajo. 116 00:06:02,680 --> 00:06:05,630 Este es el archivo completo de hello.js. 117 00:06:05,630 --> 00:06:09,080 Y luego tenemos algunos título y algo de HTML cuerpo 118 00:06:09,080 --> 00:06:11,050 que en realidad no importa. 119 00:06:11,050 --> 00:06:15,970 >> Lo que pasa es que cuando cargamos esta página, se ejecuta automáticamente este script. 120 00:06:15,970 --> 00:06:16,470 DE ACUERDO? 121 00:06:16,470 --> 00:06:18,790 Así JavaScript será ejecutar automáticamente. 122 00:06:18,790 --> 00:06:22,860 Entonces, ¿qué va a hacer, va ir de inmediato y ejecutar esto. 123 00:06:22,860 --> 00:06:24,110 Y se va a decir, "alerta. 124 00:06:24,110 --> 00:06:25,190 Hola Mundo. " 125 00:06:25,190 --> 00:06:30,840 ¿Cuál es la función de alerta que en realidad genera esta casilla. 126 00:06:30,840 --> 00:06:31,540 DE ACUERDO? 127 00:06:31,540 --> 00:06:33,390 Así que es algo de todos los abarcan. 128 00:06:33,390 --> 00:06:36,700 No hay nada extra que teníamos hacer, además de sólo alerta, 129 00:06:36,700 --> 00:06:40,000 y luego lo que quisiéramos dentro de nuestro cuadro de alerta. 130 00:06:40,000 --> 00:06:40,500 DE ACUERDO? 131 00:06:40,500 --> 00:06:45,080 Así que eso es sólo una super simple ejemplo de lo que el JavaScript. 132 00:06:45,080 --> 00:06:48,110 133 00:06:48,110 --> 00:06:50,070 >> Uno de los muy cool cosas, como veremos, 134 00:06:50,070 --> 00:06:55,150 es que te permite JavaScript para manipular a sus páginas web, 135 00:06:55,150 --> 00:06:57,720 sin tener que ellos recargar cada vez. 136 00:06:57,720 --> 00:07:01,830 Así que si usted want-- por ejemplo, si que se ciernen sobre algo, 137 00:07:01,830 --> 00:07:04,300 si ustedes alguna vez han visto como barras de menú, 138 00:07:04,300 --> 00:07:07,360 o cuando se pasa sobre algunos tema, aparecerá un menú desplegable, 139 00:07:07,360 --> 00:07:08,670 eso es porque de JavaScript. 140 00:07:08,670 --> 00:07:09,170 DE ACUERDO? 141 00:07:09,170 --> 00:07:12,670 Así que usted no está recargando la totalidad La página de conseguir este menú aparezca, 142 00:07:12,670 --> 00:07:17,240 sólo estás buscando alguna específica acción que el usuario ha tomado, 143 00:07:17,240 --> 00:07:21,800 que se llaman eventos que vamos a llegar en, y una vez que vea que usted dice, 144 00:07:21,800 --> 00:07:25,960 "OK, editar algo en esta página y hacer que se vea diferente, 145 00:07:25,960 --> 00:07:28,270 pero sólo editar estas cosas específicas. 146 00:07:28,270 --> 00:07:29,690 No vuelva a cargar todo el asunto ". 147 00:07:29,690 --> 00:07:33,110 Así que en realidad es mucho más agradable, y usted no tiene que volver a cargar las páginas, 148 00:07:33,110 --> 00:07:34,510 y es realmente genial. 149 00:07:34,510 --> 00:07:38,270 >> Declaraciones tan variable, para que pueda especie de ver, 150 00:07:38,270 --> 00:07:40,530 Me puse en la parte superior aquí, vagamente escribe. 151 00:07:40,530 --> 00:07:42,570 Así que esto es muy parecido a PHP. 152 00:07:42,570 --> 00:07:48,770 Nosotros no necesitamos decirle JavaScript qué tipo estamos 153 00:07:48,770 --> 00:07:50,740 esperando cada una de estas variables sea. 154 00:07:50,740 --> 00:07:52,560 Pueden ser cualquier tipo que queremos. 155 00:07:52,560 --> 00:07:57,480 Así se observa en este caso, declaramos ellos de manera muy sencilla, sólo con "var" 156 00:07:57,480 --> 00:08:00,990 y luego lo que queramos nuestro nombre de la variable que sea. 157 00:08:00,990 --> 00:08:05,680 Una cosa a tener en cuenta es que cuando se poner var delante de un nombre de variable, 158 00:08:05,680 --> 00:08:07,520 localmente alcances ella. 159 00:08:07,520 --> 00:08:09,320 DE ACUERDO? 160 00:08:09,320 --> 00:08:14,025 Es totalmente razonable para usted completamente solo borrar la var 161 00:08:14,025 --> 00:08:18,970 y acabo de s es igual CS50, y eso sería una variable global. 162 00:08:18,970 --> 00:08:19,580 DE ACUERDO? 163 00:08:19,580 --> 00:08:22,490 Así que usted puede inicializar las dos cosas, sólo depende de cómo lo quieres. 164 00:08:22,490 --> 00:08:24,448 Así que si estás inicializar dentro de una función, 165 00:08:24,448 --> 00:08:28,070 y desea que la variable de quedarse con ámbito dentro de esa función, 166 00:08:28,070 --> 00:08:31,620 usted va a querer hacer algo así como var nombrar una variable, 167 00:08:31,620 --> 00:08:34,270 frente si lo quieres un ámbito global, que 168 00:08:34,270 --> 00:08:36,240 puede simplemente hacer el nombre de la variable y luego 169 00:08:36,240 --> 00:08:38,270 lo que usted desea es igual a. 170 00:08:38,270 --> 00:08:40,230 DE ACUERDO? 171 00:08:40,230 --> 00:08:45,580 >> Esta es una especie de cosa fresca aquí abajo, porque si nos damos cuenta de nuestra variable 172 00:08:45,580 --> 00:08:47,590 b comienza como cierto. 173 00:08:47,590 --> 00:08:51,280 Y lo que esto puede does-- alguien decirme lo que esto hace? 174 00:08:51,280 --> 00:08:54,190 175 00:08:54,190 --> 00:08:55,890 Así que tenemos un poco de alerta. 176 00:08:55,890 --> 00:09:00,156 ¿Qué tipo de b estar en el principio? 177 00:09:00,156 --> 00:09:00,905 AUDIENCIA: Boolean. 178 00:09:00,905 --> 00:09:01,330 ALLISON Buchholtz-AU: Boolean. 179 00:09:01,330 --> 00:09:01,940 Derecha. 180 00:09:01,940 --> 00:09:07,260 Y luego reasignar b a esta cadena, ¿verdad? 181 00:09:07,260 --> 00:09:11,170 Así que aquí, ¿qué tipo de ayb? 182 00:09:11,170 --> 00:09:12,480 Sería una cadena, ¿verdad? 183 00:09:12,480 --> 00:09:14,900 ¿Cuál es tan importante aviso es que en c, que 184 00:09:14,900 --> 00:09:17,330 Nunca podría hacer casi algo así. 185 00:09:17,330 --> 00:09:22,000 Tendríamos que tener una variable, proyectarlo como algo más, 186 00:09:22,000 --> 00:09:27,185 tal vez hacer alguna función con dos i, voy de un cargo a un número entero. 187 00:09:27,185 --> 00:09:31,063 Pero si nos damos cuenta de que aquí, b muy fácilmente cambios de tipo. 188 00:09:31,063 --> 00:09:33,760 >> AUDIENCIA: ¿Esperar, lo que sólo puede ser como, "hacer b un entero?" 189 00:09:33,760 --> 00:09:34,360 >> ALLISON Buchholtz-AU: Sí. 190 00:09:34,360 --> 00:09:36,185 Usted sólo puede reasignar b en un entero. 191 00:09:36,185 --> 00:09:36,910 >> AUDIENCIA: ¿En serio? 192 00:09:36,910 --> 00:09:38,035 >> ALLISON Buchholtz-AU: Sí. 193 00:09:38,035 --> 00:09:39,810 Y entonces sería un int. 194 00:09:39,810 --> 00:09:43,820 Así que sus variables pueden cambiar a lo largo el curso del programa también. 195 00:09:43,820 --> 00:09:46,410 No son estrictamente mecanografiadas. 196 00:09:46,410 --> 00:09:49,180 Está muy libremente mecanografiada. 197 00:09:49,180 --> 00:09:50,820 DE ACUERDO? 198 00:09:50,820 --> 00:09:54,820 Básicamente las variables pueden hacer lo que quieren, como que tipo de vimos con PHP. 199 00:09:54,820 --> 00:09:59,430 Ellos pueden hacer algunas cosas locas, por lo es importante ser muy cuidadoso. 200 00:09:59,430 --> 00:10:01,200 Nombre sus variables bien. 201 00:10:01,200 --> 00:10:03,450 Si no, lo hace de repente que va a ser así, 202 00:10:03,450 --> 00:10:05,783 "Espera, pensé que esto era un cadena, y ahora es un int, 203 00:10:05,783 --> 00:10:08,170 y yo no estoy muy seguro lo que está pasando aquí ". 204 00:10:08,170 --> 00:10:12,410 Así que esto es sólo un ejemplo simple de mostrando cómo una variable puede fácilmente 205 00:10:12,410 --> 00:10:15,890 cambiar su tipo más el curso de un programa. 206 00:10:15,890 --> 00:10:16,870 >> DE ACUERDO. 207 00:10:16,870 --> 00:10:19,200 Así que esto debe verse súper, súper familiar. 208 00:10:19,200 --> 00:10:21,510 Así que estos son nuestros lazos en JavaScript. 209 00:10:21,510 --> 00:10:27,780 Son exactamente los mismos, excepto por en lugar de cuatro int i es igual a cero, 210 00:10:27,780 --> 00:10:30,470 pudiéramos decir var i es igual a cero. 211 00:10:30,470 --> 00:10:34,100 Y entonces podríamos tener nuestra misma especie del estado, mismo tipo de actualización, 212 00:10:34,100 --> 00:10:36,090 i plus plus funciona bien. 213 00:10:36,090 --> 00:10:39,800 Así cuatro patas son los mismos, ratos son los mismos, 214 00:10:39,800 --> 00:10:41,440 y hacer entre tanto que son exactamente los mismos. 215 00:10:41,440 --> 00:10:44,070 Mismo tipo de formato general. 216 00:10:44,070 --> 00:10:48,840 Notamos, cuatro, entre paréntesis, soportes, todo es lo mismo. 217 00:10:48,840 --> 00:10:51,470 También habrá un punto y coma cuando lleguemos al ejemplo de código. 218 00:10:51,470 --> 00:10:55,250 Ya verás que es bastante lo mismo que c. 219 00:10:55,250 --> 00:10:59,770 >> Por declaraciones de funciones, de nuevo, muy similar. 220 00:10:59,770 --> 00:11:05,100 Tenemos alguna función que sólo dice que es una función, y luego 221 00:11:05,100 --> 00:11:07,660 el nombre de nuestro función, y las entradas. 222 00:11:07,660 --> 00:11:11,590 Y de nuevo si nos damos cuenta, nos tener ningún tipo aquí en absoluto. 223 00:11:11,590 --> 00:11:12,090 Derecho? 224 00:11:12,090 --> 00:11:18,150 No tenemos nada diciendo que éstos deben ser enteros o dobles, o flotadores. 225 00:11:18,150 --> 00:11:19,530 Podrían ser lo que quieran. 226 00:11:19,530 --> 00:11:23,560 Lo importante es darse cuenta de que tenemos que escribir la función de antemano 227 00:11:23,560 --> 00:11:26,430 dejar que JavaScript sabe que esto es en realidad una función. 228 00:11:26,430 --> 00:11:29,820 >> Así que esto es sólo una simple suma función que devuelve xoy, 229 00:11:29,820 --> 00:11:33,800 y luego lo que es también fresco es que en realidad se puede 230 00:11:33,800 --> 00:11:35,950 asignar una función a una variable. 231 00:11:35,950 --> 00:11:41,770 Así que en este caso, la suma es ahora la función que realmente hace suma. 232 00:11:41,770 --> 00:11:47,740 Así que si usted nota aquí, tenemos función, el nombre de la función, las entradas. 233 00:11:47,740 --> 00:11:48,860 Derecho? 234 00:11:48,860 --> 00:11:52,120 Aquí sólo tenemos la función y los insumos. 235 00:11:52,120 --> 00:11:54,310 Esto se llama una función anónima. 236 00:11:54,310 --> 00:11:59,265 Y esto es algo que debe ser nuevo a la mayoría de ustedes, si no todos ustedes. 237 00:11:59,265 --> 00:12:01,140 Así que básicamente lo que esto significa es que no lo hacemos 238 00:12:01,140 --> 00:12:03,050 necesitar nombre de nuestro función en este caso. 239 00:12:03,050 --> 00:12:06,260 Sólo podemos decir: "Está bien, voy a tener esta función que se ejecuta, aquí 240 00:12:06,260 --> 00:12:08,550 son sus entradas, y aquí está lo que va a hacer. " 241 00:12:08,550 --> 00:12:12,540 Y sobre todo cuando se está asignando una función de alguna variable 242 00:12:12,540 --> 00:12:14,950 que vas a manipular, No necesariamente 243 00:12:14,950 --> 00:12:17,116 necesita nombrarlo porque vas a estar refiriéndose 244 00:12:17,116 --> 00:12:20,990 a ella por esta variable nombre, no por cualquier 245 00:12:20,990 --> 00:12:22,840 la función se llama en realidad. 246 00:12:22,840 --> 00:12:23,550 DE ACUERDO? 247 00:12:23,550 --> 00:12:27,810 >> Así que si vemos aquí, tener alguna variable suma ahora 248 00:12:27,810 --> 00:12:30,920 que es igual a la suma de tres y cinco. 249 00:12:30,920 --> 00:12:33,070 Y que iba a conseguir esto. 250 00:12:33,070 --> 00:12:36,750 Y esto sólo tendría alguna alerta, tres más cinco es igual a la cantidad. 251 00:12:36,750 --> 00:12:43,950 Este plus será simplemente concatenar cualquiera que sea nuestra respuesta fue en la cadena. 252 00:12:43,950 --> 00:12:47,420 También fresco, plus puede concatenar cadenas. 253 00:12:47,420 --> 00:12:53,510 >> Para JavaScript, como con PHP, HTML, CSS y como hemos dicho, 254 00:12:53,510 --> 00:12:56,450 muchos de ellos estamos como tomar las ruedas de entrenamiento fuera de aquí 255 00:12:56,450 --> 00:13:02,030 y ustedes tienen una gran cantidad de los conocimientos cómo entender realmente estas cosas. 256 00:13:02,030 --> 00:13:04,280 Son un poco diferente, pero no son tan ajeno 257 00:13:04,280 --> 00:13:09,460 y que usted no puede buscar en Google cosas o mirar hacia arriba en línea con las escuelas w3. 258 00:13:09,460 --> 00:13:12,755 Y realmente estamos esperando que chicos a, una especie de experimento 259 00:13:12,755 --> 00:13:14,400 y aprender por su cuenta. 260 00:13:14,400 --> 00:13:19,490 Así que, sé que esto puede parecer un poco menos completo que algunas de las cosas c 261 00:13:19,490 --> 00:13:21,936 que hacemos, pero eso es en realidad por una razón. 262 00:13:21,936 --> 00:13:25,060 263 00:13:25,060 --> 00:13:28,470 Pero espero que no sea demasiado diferente, y no es abrumadora. 264 00:13:28,470 --> 00:13:31,940 >> Así arrays en JavaScript de nuevo muy, muy similares. 265 00:13:31,940 --> 00:13:32,460 Derecho? 266 00:13:32,460 --> 00:13:36,520 Tenemos cierta matriz de variables eso es igual a corchetes vacíos, 267 00:13:36,520 --> 00:13:40,340 y eso es sólo un conjunto vacío. 268 00:13:40,340 --> 00:13:43,420 Esto es a menudo llamado notación literal de matriz. 269 00:13:43,420 --> 00:13:45,280 Eso es sólo una cosa la llamamos. 270 00:13:45,280 --> 00:13:51,380 Si vemos la matriz de dos aquí, tenemos algunos literal de matriz que tiene tres elementos, 271 00:13:51,380 --> 00:13:51,910 ¿verdad? 272 00:13:51,910 --> 00:13:54,640 Y luego tenemos algunos var tercer elemento que es 273 00:13:54,640 --> 00:13:58,060 alguna variable que sólo va a celebrar esta cadena, JS. 274 00:13:58,060 --> 00:14:01,760 275 00:14:01,760 --> 00:14:06,170 >> Los elementos, buenos a notar, están separados por comas, 276 00:14:06,170 --> 00:14:07,740 como es de esperar. 277 00:14:07,740 --> 00:14:14,630 Y también se puede acceder a estos, como lo hicimos en C, con esta notación índice, ¿verdad? 278 00:14:14,630 --> 00:14:16,950 Tan diferente de PHP Ahora, vamos a volver 279 00:14:16,950 --> 00:14:20,180 a sólo tipo de referencia a las cosas por índice. 280 00:14:20,180 --> 00:14:22,189 Al igual que C, es también el índice cero. 281 00:14:22,189 --> 00:14:25,230 Me siento como que sería muy cruel si de repente hicieron JavaScript uno 282 00:14:25,230 --> 00:14:30,630 índice, y que tenía que completamente repensar la forma de pensar acerca de las matrices. 283 00:14:30,630 --> 00:14:36,140 >> Una cosa interesante es que, en lugar de tener que hacer-- si alguna vez 284 00:14:36,140 --> 00:14:39,240 quería que la longitud de una matriz, tal vez usted iterar a través de él 285 00:14:39,240 --> 00:14:43,430 hasta que encuentre un fin, o usted acaba de saber lo que es. 286 00:14:43,430 --> 00:14:49,310 Debido a que JavaScript está muy floja en más maneras que sólo tipo, como vemos aquí, 287 00:14:49,310 --> 00:14:53,310 sólo podemos hacer que esta matriz más grande porque decidimos. 288 00:14:53,310 --> 00:14:56,177 Si notamos matriz tres tiene tres cosas para comenzar, 289 00:14:56,177 --> 00:14:58,510 pero luego, de repente, estamos como, "oh, es broma. 290 00:14:58,510 --> 00:15:01,370 De hecho, estamos pasando para que sea 101 cosas. " 291 00:15:01,370 --> 00:15:05,300 Así que si alguna vez quieres saber la longitud real de la matriz, 292 00:15:05,300 --> 00:15:06,680 usted lo hace así. 293 00:15:06,680 --> 00:15:10,470 Y vamos a ver mucho de esta notación en los ejemplos, 294 00:15:10,470 --> 00:15:12,730 pero con JavaScript que es típicamente lo 295 00:15:12,730 --> 00:15:16,410 objeto que estás hablando dot cualquier tipo de función 296 00:15:16,410 --> 00:15:17,740 usted desea que se aplique a la misma. 297 00:15:17,740 --> 00:15:18,240 DE ACUERDO? 298 00:15:18,240 --> 00:15:20,520 >> Así que en este caso, nuestro objeto es la matriz de dos, 299 00:15:20,520 --> 00:15:23,470 y decimos que queremos que el longitud de matriz de dos. 300 00:15:23,470 --> 00:15:25,716 Así que esto sólo llama, como la longitud de eso. 301 00:15:25,716 --> 00:15:27,090 Y eso va a devolver su longitud. 302 00:15:27,090 --> 00:15:32,610 303 00:15:32,610 --> 00:15:36,790 También algo a tener en cuenta es que si nos damos cuenta de nuestros arrays, 304 00:15:36,790 --> 00:15:39,830 a diferencia de C, que no tienen a ser todos del mismo tipo. 305 00:15:39,830 --> 00:15:41,670 Esto es mucho más parecido a PHP. 306 00:15:41,670 --> 00:15:45,905 JavaScript es básicamente igual que esta interesante mezcla de la C y PHP. 307 00:15:45,905 --> 00:15:50,020 308 00:15:50,020 --> 00:15:52,170 Así que vamos a entrar en eso. 309 00:15:52,170 --> 00:15:56,750 Por ahora, vamos a asumir que las matrices son básicamente 310 00:15:56,750 --> 00:16:00,640 como arrays de C, en que que se indexan cero. 311 00:16:00,640 --> 00:16:04,120 OK, así que eso es todo. 312 00:16:04,120 --> 00:16:08,850 También se puede simplemente extender una matriz a cualquier índice que desea. 313 00:16:08,850 --> 00:16:14,260 Mientras que esto probablemente SEG en fallo con usted o le dará un cierto error, 314 00:16:14,260 --> 00:16:15,970 JavaScript es como, "nah, está bien. 315 00:16:15,970 --> 00:16:16,620 Yo me encargo. 316 00:16:16,620 --> 00:16:19,460 Iremos directamente donde desea ". 317 00:16:19,460 --> 00:16:24,310 >> OK, así que los objetos son muy importantes. 318 00:16:24,310 --> 00:16:29,720 Ustedes va a utilizar una gran cantidad de estos en su conjunto P, si no recuerdo mal. 319 00:16:29,720 --> 00:16:34,780 Así que lo que estos son similar a la de C son estructuras. 320 00:16:34,780 --> 00:16:39,290 Así que usted puede pensar cuando sobre-- vamos a un ejemplo correcto 321 00:16:39,290 --> 00:16:41,810 después de esto creo que va a hacer mucho más sentido-- 322 00:16:41,810 --> 00:16:45,830 pero básicamente utilizamos objetos a sindicación de información de los cursos relacionados. 323 00:16:45,830 --> 00:16:47,780 Cuando hablamos acerca de estructuras en C, a menudo 324 00:16:47,780 --> 00:16:53,405 hablar de un estudiante que tenía algún nombre, Identificación, casa, ya sabes, la concentración. 325 00:16:53,405 --> 00:16:56,030 Y eso es algo de lo mismo que utilizamos objetos para aquí. 326 00:16:56,030 --> 00:16:59,300 Es sólo para organizar información similar. 327 00:16:59,300 --> 00:17:03,620 >> También se puede pensar en ellos como más similar a las matrices asociativas en PHP. 328 00:17:03,620 --> 00:17:10,010 Así que esta sería una especie de la cosa donde tenemos alguna clave con algún valor, 329 00:17:10,010 --> 00:17:12,859 muy similar a PHP. 330 00:17:12,859 --> 00:17:15,780 Así que usted puede inicializar algunos objeto vacío, como vemos aquí, 331 00:17:15,780 --> 00:17:17,390 sólo con llaves. 332 00:17:17,390 --> 00:17:19,160 Arrays también lo son entre corchetes. 333 00:17:19,160 --> 00:17:21,220 Objetos vacíos son llaves. 334 00:17:21,220 --> 00:17:24,020 Bueno distinción a tener. 335 00:17:24,020 --> 00:17:27,319 Y estos son sólo dos diferentes maneras de definir las propiedades. 336 00:17:27,319 --> 00:17:31,460 Así que esto es una especie de mucho más de una manera que 337 00:17:31,460 --> 00:17:35,220 es similar a PHP, con nuestro matrices asociativas, con la llave, 338 00:17:35,220 --> 00:17:39,910 y nuestro valor, mientras que ésta es-- podrás 339 00:17:39,910 --> 00:17:41,920 ver esto mucho más en JavaScript. 340 00:17:41,920 --> 00:17:43,550 Esto tiende a ser la convención. 341 00:17:43,550 --> 00:17:47,660 Y de la misma manera que lo hicimos matriz de dos longitud de punto, esto es decir, 342 00:17:47,660 --> 00:17:51,580 "OK, dame esto atributo de este objeto ". 343 00:17:51,580 --> 00:17:52,110 Derecho? 344 00:17:52,110 --> 00:17:55,660 Así que de la misma manera que era como, "dame la longitud del atributo de matriz de dos " 345 00:17:55,660 --> 00:17:59,970 esto está diciendo: "dame un poco propiedad de nuestro objeto vacío ". 346 00:17:59,970 --> 00:18:02,890 O en este caso, estamos asignándole cualquier valor aquí. 347 00:18:02,890 --> 00:18:06,200 Pero también se puede acceder a ella de esa manera. 348 00:18:06,200 --> 00:18:09,090 >> Y entonces aquí esto es sólo que muestra dos alertas diferentes. 349 00:18:09,090 --> 00:18:12,320 Así que esto mostraría las alertas sería exactamente el mismo, 350 00:18:12,320 --> 00:18:17,150 es sólo dos formas diferentes de acceder al elemento que queremos. 351 00:18:17,150 --> 00:18:19,552 ¿Tiene eso sentido para todo el mundo? 352 00:18:19,552 --> 00:18:21,510 Me siento como éste probablemente tiene más sentido, 353 00:18:21,510 --> 00:18:23,270 sólo porque estamos saliendo de PHP. 354 00:18:23,270 --> 00:18:26,400 Pero a medida que hacemos más ejemplos, este es, literalmente, exactamente de la misma. 355 00:18:26,400 --> 00:18:28,170 Mucho de esto se acaba de cambiar en la sintaxis. 356 00:18:28,170 --> 00:18:30,710 357 00:18:30,710 --> 00:18:33,030 >> OK, así ejemplos. 358 00:18:33,030 --> 00:18:34,180 Me encanta ejemplos. 359 00:18:34,180 --> 00:18:40,070 Así que aquí está una cierta CS50 variable que es un objeto, 360 00:18:40,070 --> 00:18:42,160 y almacenamos todo esto información sobre el mismo. 361 00:18:42,160 --> 00:18:46,680 Así que tenemos por supuesto, instructor, tfs, conjuntos de procesadores, y grabadas. 362 00:18:46,680 --> 00:18:51,840 Entonces nos damos cuenta de que son casi todos de diferentes tipos. 363 00:18:51,840 --> 00:18:52,340 Derecho? 364 00:18:52,340 --> 00:18:56,230 Así, los objetos pueden almacenar atributos de diferentes tipos. 365 00:18:56,230 --> 00:19:01,220 Podemos pensar en esto- es muy similar a nuestra matriz asociativa en PHP. 366 00:19:01,220 --> 00:19:07,470 Así clave, valor, clave, valor, clave, valor, así sucesivamente y así sucesivamente. 367 00:19:07,470 --> 00:19:11,230 Lo que también es interesante de la misma manera que podemos tener dentro de arrays matrices, 368 00:19:11,230 --> 00:19:14,690 también podemos tener objetos dentro objetos o arrays de los objetos. 369 00:19:14,690 --> 00:19:18,410 Usted está en realidad nunca limitado a sólo una sola de las cosas. 370 00:19:18,410 --> 00:19:24,220 Podemos llegar muy Inceptionesque, justo seguir por la madriguera del conejo allí. 371 00:19:24,220 --> 00:19:26,080 >> Así que si nos damos cuenta, nos tener algún supuesto de que 372 00:19:26,080 --> 00:19:31,120 es una cadena, el instructor que es una cadena, y la matriz, un int y un booleano. 373 00:19:31,120 --> 00:19:36,110 Así que todas estas cosas diferentes. 374 00:19:36,110 --> 00:19:39,600 >> Muy bien, así que, tenemos otro. 375 00:19:39,600 --> 00:19:42,930 Así que en este caso, tenemos una matriz de objetos. 376 00:19:42,930 --> 00:19:45,320 Así que al igual que un objeto puede tener una matriz en ella. 377 00:19:45,320 --> 00:19:47,210 También podemos tener una matriz de objetos. 378 00:19:47,210 --> 00:19:51,250 Esto podría ser útil para pensar similar a la especie 379 00:19:51,250 --> 00:19:54,260 de la forma en que teníamos un hash mesa, tuvimos una matriz 380 00:19:54,260 --> 00:19:56,220 de todos estos diferentes tipos de estructuras que 381 00:19:56,220 --> 00:19:59,070 eran punteros a diferentes nodos y otras cosas. 382 00:19:59,070 --> 00:20:01,420 Pero en este caso, tener una matriz de objetos. 383 00:20:01,420 --> 00:20:04,890 Así que esto es como un array arrays de asociativos. 384 00:20:04,890 --> 00:20:09,430 Así que tener un poco de primer elemento ser el objeto con el nombre de James 385 00:20:09,430 --> 00:20:11,340 y albergar Winthrop. 386 00:20:11,340 --> 00:20:14,780 >> Ustedes podrán recordar algo muy similar a este 387 00:20:14,780 --> 00:20:21,710 con su último conjunto de procesadores, donde si sacó algo de su base de datos, 388 00:20:21,710 --> 00:20:24,480 el primer tipo de cosa en su conjunto era 389 00:20:24,480 --> 00:20:27,110 toda la información acerca el primer usuario que conoció a ella, 390 00:20:27,110 --> 00:20:30,765 y luego había que índice en que para conseguir su acción o su caché 391 00:20:30,765 --> 00:20:32,110 o lo que sea. 392 00:20:32,110 --> 00:20:34,620 Así que esto es muy similar cosa, sólo un poco de cambio 393 00:20:34,620 --> 00:20:39,570 en la sintaxis, el cambio poco en las palabras que usamos para describirlas. 394 00:20:39,570 --> 00:20:45,960 >> Así que si queríamos, ¿alguien puede decir me lo esta alerta gustaría hacer aquí? 395 00:20:45,960 --> 00:20:48,780 O lo que este pedacito de código haría por nosotros? 396 00:20:48,780 --> 00:20:50,992 397 00:20:50,992 --> 00:20:52,616 AUDIENCIA: Te dará todos los nombres. 398 00:20:52,616 --> 00:20:54,900 ALLISON Buchholtz-AU: Derecho, por lo que sería simplemente alertar con todos los nombres 399 00:20:54,900 --> 00:20:57,960 porque sería ir a través de casa i, por lo que empezaría en cero. 400 00:20:57,960 --> 00:21:01,330 Así que me decía: Aceptar que estamos buscando en este primer objeto, el cual 401 00:21:01,330 --> 00:21:03,210 es el primer espacio en nuestra matriz. 402 00:21:03,210 --> 00:21:06,900 Y dice: "dame la atributo, el nombre de ese objeto ". 403 00:21:06,900 --> 00:21:09,030 Así que vamos allí, nos exploración, nos gustaría encontrar el nombre, 404 00:21:09,030 --> 00:21:11,340 y nos gustaría imprimimos James, Molly y Carl. 405 00:21:11,340 --> 00:21:14,410 406 00:21:14,410 --> 00:21:15,799 Cualquier pregunta hasta ahora? 407 00:21:15,799 --> 00:21:17,590 JavaScript desgracia usted va a ser 408 00:21:17,590 --> 00:21:20,950 haciendo un montón de mirar para arriba en su propia, averiguar la sintaxis, 409 00:21:20,950 --> 00:21:21,910 lidiando con él. 410 00:21:21,910 --> 00:21:25,870 Pero por supuesto que estoy siempre aquí, horario de atención es siempre aquí. 411 00:21:25,870 --> 00:21:28,260 Yo podría ser el martes de esta semana. 412 00:21:28,260 --> 00:21:31,050 Así que si usted está allí, usted puede venir a visitar esta semana. 413 00:21:31,050 --> 00:21:32,470 Sería genial. 414 00:21:32,470 --> 00:21:36,260 >> OK, así DOM es el Modelo de documento-Object. 415 00:21:36,260 --> 00:21:38,900 Así que esto es sólo una forma que nos gusta pensar 416 00:21:38,900 --> 00:21:45,720 acerca de cómo nuestro HTML y todo en su interior se organiza. 417 00:21:45,720 --> 00:21:49,930 Esto es muy algo que probablemente van a plantear en su concurso. 418 00:21:49,930 --> 00:21:58,150 Sé que mi año, era como aquí está Archivo HTML, siga los pasos de la DOM para ello. 419 00:21:58,150 --> 00:21:59,770 Y que acaba de llenar en las cosas pequeñas. 420 00:21:59,770 --> 00:22:01,500 Estos deben ser puntos fáciles con suerte. 421 00:22:01,500 --> 00:22:03,450 Esperamos que usted ver-- 422 00:22:03,450 --> 00:22:04,590 >> AUDIENCIA: [inaudible] 423 00:22:04,590 --> 00:22:06,660 >> ALLISON Buchholtz-AU: Así vea este árbol aquí? 424 00:22:06,660 --> 00:22:07,200 >> AUDIENCIA: Sí. 425 00:22:07,200 --> 00:22:08,949 >> ALLISON Buchholtz-AU: Así le preguntarán uso 426 00:22:08,949 --> 00:22:11,750 para rellenar lo que se conoce con el cuerpo. 427 00:22:11,750 --> 00:22:15,770 Tal vez por debajo del cuerpo, tenemos algunos divs o que tienen algunos párrafos, 428 00:22:15,770 --> 00:22:19,160 y le pedimos que complete un árbol muy parecido a esto. 429 00:22:19,160 --> 00:22:21,440 Así que vamos a estar caminando a través de ella. 430 00:22:21,440 --> 00:22:26,120 Así el Documento-Object Modelo es sólo una forma 431 00:22:26,120 --> 00:22:31,240 estructurar y pensar acerca de nuestro HTML gráficamente. 432 00:22:31,240 --> 00:22:33,860 433 00:22:33,860 --> 00:22:35,840 Y también cuando lleguemos en más JavaScript 434 00:22:35,840 --> 00:22:37,640 que va a ser el de manera que en realidad 435 00:22:37,640 --> 00:22:39,990 manipular diferente elementos de la página. 436 00:22:39,990 --> 00:22:43,980 Necesitamos una manera de acceder a cada de las cosas en nuestro HTML, 437 00:22:43,980 --> 00:22:48,050 y por lo que esta nos da una muy forma estandarizada de hormigón 438 00:22:48,050 --> 00:22:51,010 a través de varias páginas web para hacer eso. 439 00:22:51,010 --> 00:22:53,440 >> Así que si sólo caminamos por esto aquí, por supuesto 440 00:22:53,440 --> 00:22:56,790 nuestro documento es como todo nuestro archivo. 441 00:22:56,790 --> 00:22:59,350 Eso, obviamente, tiene sentido que es lo más alto, 442 00:22:59,350 --> 00:23:03,520 y luego tenemos nuestro HTML real, lo que corresponde a esta etiqueta aquí. 443 00:23:03,520 --> 00:23:08,480 Además, si en el guión tus etiquetas correctamente, entonces la creación de este árbol DOM 444 00:23:08,480 --> 00:23:10,530 se convierte en super simple. 445 00:23:10,530 --> 00:23:12,400 Así que tenemos un poco de cabeza aquí. 446 00:23:12,400 --> 00:23:15,780 Tenemos un cuerpo que vemos vástago fuera de HTML, 447 00:23:15,780 --> 00:23:18,530 es por ello que tenemos la cabeza y el cuerpo. 448 00:23:18,530 --> 00:23:22,880 Dentro de la cabeza, tenemos algunos etiqueta del título, una etiqueta de título del final, 449 00:23:22,880 --> 00:23:24,570 así que sabemos lo que viene después de la cabeza. 450 00:23:24,570 --> 00:23:28,040 Y dentro de nuestra etiqueta de título, tenemos hola, mundo. 451 00:23:28,040 --> 00:23:28,740 DE ACUERDO? 452 00:23:28,740 --> 00:23:31,311 Así que esa es toda esta rama izquierda. 453 00:23:31,311 --> 00:23:34,060 Y luego de la rama derecha aquí, vemos que tenemos HTML, 454 00:23:34,060 --> 00:23:38,680 Aceptar que hemos hecho esta parte de la cabeza, estamos mirando sólo al cuerpo, 455 00:23:38,680 --> 00:23:40,670 así que tenemos alguna área del cuerpo. 456 00:23:40,670 --> 00:23:44,350 Y dentro de eso, la única Lo que tenemos es hola, mundo. 457 00:23:44,350 --> 00:23:45,090 DE ACUERDO? 458 00:23:45,090 --> 00:23:54,130 Si tuviéramos cosas como algunos soporte de p y luego 459 00:23:54,130 --> 00:23:57,500 hola, mundo, y luego otra soporte p de adiós, mundo, 460 00:23:57,500 --> 00:24:00,080 tendríamos dos burbujas saliendo de aquí. 461 00:24:00,080 --> 00:24:05,550 Debido a que los dos están bajo el cuerpo, pero son párrafos separados este caso. 462 00:24:05,550 --> 00:24:11,520 Definitivamente hay práctica en que en pruebas anteriores, 463 00:24:11,520 --> 00:24:14,570 así como un montón en línea sobre el mismo. 464 00:24:14,570 --> 00:24:18,260 Aceptar así, esto sólo permite nosotros vemos todo muy bien 465 00:24:18,260 --> 00:24:20,810 y manipular cosas muy sistemática. 466 00:24:20,810 --> 00:24:21,340 DE ACUERDO? 467 00:24:21,340 --> 00:24:23,640 Sabemos exactamente cómo recorrer a través de este árbol, 468 00:24:23,640 --> 00:24:26,910 así que sabemos lo que queremos acceder. 469 00:24:26,910 --> 00:24:31,690 >> Aceptar lo que es por eso que queremos para tener este tipo de modelo, 470 00:24:31,690 --> 00:24:35,190 para que podamos usar cosas como esta, y entendemos lo que quieren decir, 471 00:24:35,190 --> 00:24:38,370 y están estandarizados en todas las cosas que hacemos. 472 00:24:38,370 --> 00:24:45,900 Así que el título del documento de punto es justo el título de our-- todos estos 473 00:24:45,900 --> 00:24:48,960 son bastante explica por sí mismo, Me gusta pensar. 474 00:24:48,960 --> 00:24:51,660 Tres para la primera ejemplos se acaba diciendo, 475 00:24:51,660 --> 00:24:54,770 "Está bien, sólo dame la título de esta página web ". 476 00:24:54,770 --> 00:24:58,030 Así que le dará lo que corresponde al título. 477 00:24:58,030 --> 00:25:01,880 >> Documento dot cuerpo se va a dar todo lo que es dentro de esas etiquetas del cuerpo. 478 00:25:01,880 --> 00:25:03,240 Así que usted puede manipular eso. 479 00:25:03,240 --> 00:25:07,820 Y dot dot cuerpo documento Introduce HTML es muy fresco, 480 00:25:07,820 --> 00:25:11,660 y tal vez no es como super intuitivo, pero el código HTML interno 481 00:25:11,660 --> 00:25:13,740 corresponde a este derecho aquí. 482 00:25:13,740 --> 00:25:17,410 Así que si alguna vez quieres manipular el texto en una página, 483 00:25:17,410 --> 00:25:22,700 normalmente vas a estar haciendo algo con dot cuerpo HTML interno. 484 00:25:22,700 --> 00:25:23,820 DE ACUERDO? 485 00:25:23,820 --> 00:25:31,341 Así HTML interno tiende a referirse a lo que es en realidad entre estas etiquetas. 486 00:25:31,341 --> 00:25:31,840 DE ACUERDO? 487 00:25:31,840 --> 00:25:33,020 Y entonces funciones útiles. 488 00:25:33,020 --> 00:25:40,390 Así que si quería llegar cualquiera de estos, cualquier elemento, 489 00:25:40,390 --> 00:25:43,140 tenemos algunos Id, clase nombre, o el nombre de la etiqueta. 490 00:25:43,140 --> 00:25:47,100 Esto es muy similar a la cosas que hicieron con CSS, ¿verdad? 491 00:25:47,100 --> 00:25:51,360 Donde tenemos algunos selectores que corresponder tanto a una etiqueta, una clase 492 00:25:51,360 --> 00:25:53,800 que ellos, o un Id damos. 493 00:25:53,800 --> 00:25:55,310 Esto es muy de la misma manera. 494 00:25:55,310 --> 00:26:00,720 Si usted tiene algo que tiene cierta clase de perro, 495 00:26:00,720 --> 00:26:05,800 y dices obtener elementos por nombre de la etiqueta, y pones perro en allí-- o lo siento, 496 00:26:05,800 --> 00:26:06,610 nombre de la clase. 497 00:26:06,610 --> 00:26:07,770 Usted puede poner punto en allí. 498 00:26:07,770 --> 00:26:11,780 Se va a devolver todos los elementos a usted que tienen esa clase. 499 00:26:11,780 --> 00:26:13,880 Así que usted puede manipular sólo aquellos. 500 00:26:13,880 --> 00:26:18,430 De la misma manera, tal vez sólo querer manipular algunos cabecera, por lo 501 00:26:18,430 --> 00:26:20,980 algunos encabezado h1, al igual que lo hicimos. 502 00:26:20,980 --> 00:26:24,900 Usted podría hacer llegar los elementos por etiqueta nombrar, porque h1 es un nombre de etiqueta. 503 00:26:24,900 --> 00:26:29,270 Y de la misma manera, si usted quiere conseguir algo único, puede hacerlo etiqueta get. 504 00:26:29,270 --> 00:26:31,100 Obtener elemento por Id. 505 00:26:31,100 --> 00:26:32,710 Y en realidad son un montón de estos. 506 00:26:32,710 --> 00:26:36,300 Estos son sólo como tres de muchos. 507 00:26:36,300 --> 00:26:39,600 Así que si usted va en línea, como Voy a alentar 508 00:26:39,600 --> 00:26:45,342 usted pueda hacer, y hacer algo investigación por su cuenta, 509 00:26:45,342 --> 00:26:48,450 Definitivamente lo recomiendo buscando en todo eso. 510 00:26:48,450 --> 00:26:50,880 Podrían ser súper útil, especialmente cuando 511 00:26:50,880 --> 00:26:57,180 quiere sólo tipo de manipular cosas muy específicas sin tener 512 00:26:57,180 --> 00:27:00,390 ir a través y tratar para analizar fuera todo. 513 00:27:00,390 --> 00:27:03,540 >> OK, así que lo último es JavaScript eventos. 514 00:27:03,540 --> 00:27:10,730 Así que cuando estaba hablando antes acerca de ir a un sitio web, 515 00:27:10,730 --> 00:27:14,340 y cuando se pasa sobre algo, o el puntero del ratón pasa por encima de algo, 516 00:27:14,340 --> 00:27:15,420 otra cosa sucede. 517 00:27:15,420 --> 00:27:17,900 Esto es lo que nos gustaría pensar como un evento. 518 00:27:17,900 --> 00:27:23,970 Así que lo que tenemos que poder ser útil aquí es onclick. 519 00:27:23,970 --> 00:27:29,140 Así que el mío era en vuelo estacionario, el cual, estoy bastante seguro, es sólo en vuelo estacionario. 520 00:27:29,140 --> 00:27:31,300 También un montón de éstos que se puede buscar. 521 00:27:31,300 --> 00:27:34,340 Hay una lista completa en línea de las diferentes cosas 522 00:27:34,340 --> 00:27:37,130 que se puede escuchar. 523 00:27:37,130 --> 00:27:41,220 >> Pero los eventos de JavaScript son básicamente responder a las cosas 524 00:27:41,220 --> 00:27:42,430 que su usuario está haciendo. 525 00:27:42,430 --> 00:27:42,930 Derecho? 526 00:27:42,930 --> 00:27:45,220 Así que su usuario hace algo, eso es un hecho, 527 00:27:45,220 --> 00:27:48,340 y JavaScript responderá sin embargo desea que lo haga. 528 00:27:48,340 --> 00:27:49,770 Se responderá en consecuencia. 529 00:27:49,770 --> 00:27:54,630 Así que en este caso, tenemos algunos onload ventana de punto. 530 00:27:54,630 --> 00:27:57,170 Así que lo que dice es, "esperar hasta cargado de la ventana ". 531 00:27:57,170 --> 00:27:57,780 DE ACUERDO? 532 00:27:57,780 --> 00:28:02,102 Así que cuando todo está cargado, onload, a continuación, puede ejecutar esta función. 533 00:28:02,102 --> 00:28:03,810 Así que cuando todo está cargado, vas 534 00:28:03,810 --> 00:28:07,760 tener algún botón de búsqueda que sufre es un elemento de identificación, 535 00:28:07,760 --> 00:28:13,740 y se imprime lo que elemento es que el botón Buscar. 536 00:28:13,740 --> 00:28:17,050 Y luego tenemos esta variable, decimos: "Está bien, onclick". 537 00:28:17,050 --> 00:28:20,390 Así que cuando escuchamos un click en el botón Buscar, 538 00:28:20,390 --> 00:28:23,990 ejecutar esta función, que es una alerta, haga clic en el botón Buscar. 539 00:28:23,990 --> 00:28:28,910 >> Entonces, ¿qué sucede es-- este es un buen poca representación gráfica aquí. 540 00:28:28,910 --> 00:28:31,480 Así que nuestra carga de documentos, esa es nuestra onload, 541 00:28:31,480 --> 00:28:34,340 nos encontramos con nuestra Búsqueda botón, que es esto. 542 00:28:34,340 --> 00:28:36,570 Estamos buscando a nuestro botón Buscar. 543 00:28:36,570 --> 00:28:40,790 Y luego, cuando el botón de búsqueda es se hace clic, se corresponde con la derecha aquí. 544 00:28:40,790 --> 00:28:41,980 Onclick. 545 00:28:41,980 --> 00:28:47,300 Entonces, finalmente, alertamos a nuestros usuarios, que es esta última línea aquí. 546 00:28:47,300 --> 00:28:48,250 DE ACUERDO? 547 00:28:48,250 --> 00:28:52,960 Así que cada uno de esos cuatro pasos sólo corresponde a las cuatro cajas 548 00:28:52,960 --> 00:28:55,031 allí abajo en la parte inferior. 549 00:28:55,031 --> 00:28:56,405 ¿Tiene eso sentido para todo el mundo? 550 00:28:56,405 --> 00:29:01,120 551 00:29:01,120 --> 00:29:05,200 >> Y entonces una cosa que yo sólo voy mencionar muy, muy brevemente, que yo 552 00:29:05,200 --> 00:29:08,660 animo chicos a ir a buscar más en es 553 00:29:08,660 --> 00:29:13,210 jQuery, que es sólo una biblioteca que se construye en la parte superior de JavaScript. 554 00:29:13,210 --> 00:29:16,480 Es muy útil, ya que con la mayoría de las bibliotecas. 555 00:29:16,480 --> 00:29:18,320 Hay un montón de funciones. 556 00:29:18,320 --> 00:29:21,930 Así que si alguna vez hay algo que que quieres hacer en JavaScript 557 00:29:21,930 --> 00:29:24,880 su primer instinto no debe ser pensar 558 00:29:24,880 --> 00:29:27,340 de, "¿qué función debe Me código? "Que debería ser, 559 00:29:27,340 --> 00:29:29,560 "Déjame ver a alguien es ha hecho esto por mí ". 560 00:29:29,560 --> 00:29:32,800 Debido a que nueve de cada diez veces, alguien lo habrá hecho ya, 561 00:29:32,800 --> 00:29:35,760 y probablemente lo han hecho mejor. 562 00:29:35,760 --> 00:29:39,990 Las personas pasan mucho tiempo haciendo esto, y JavaScript se utiliza muy ampliamente, 563 00:29:39,990 --> 00:29:42,810 para que las personas están constantemente tratar de hacerlo mejor. 564 00:29:42,810 --> 00:29:47,110 Y jQuery tiene un montón de funciones que probablemente será útil para usted 565 00:29:47,110 --> 00:29:50,470 en su proyecto final si eres hacer cualquier cosa con el diseño web. 566 00:29:50,470 --> 00:29:53,480 Como me gusta decir, "trabajo más inteligente, no más difícil ". 567 00:29:53,480 --> 00:29:57,130 Si ustedes hacen eso, va a ser grande. 568 00:29:57,130 --> 00:30:00,330 Cuando estamos en el hackathon no lo hago quiero que seas todo estresado. 569 00:30:00,330 --> 00:30:03,600 Quiero que seas como: "Tengo esto. jQuery tiene mi espalda. 570 00:30:03,600 --> 00:30:05,790 No necesito escribir estas funciones ". 571 00:30:05,790 --> 00:30:07,636 >> Por lo que sólo dos cosas a Recuerdo, voy 572 00:30:07,636 --> 00:30:10,220 a dejar que ustedes miran más en jQuery por su cuenta. 573 00:30:10,220 --> 00:30:13,070 Todo lo que voy a decir es que hace algunas cosas bastante impresionantes 574 00:30:13,070 --> 00:30:15,220 y puede hacer su vida mucho más fácil. 575 00:30:15,220 --> 00:30:17,150 Pero lo que quiere tener es cualquier archivo 576 00:30:17,150 --> 00:30:21,020 que vas a utilizarlo en, usted va a querer estas dos líneas. 577 00:30:21,020 --> 00:30:25,630 Usted va a querer la guión de js jQuery punto js. 578 00:30:25,630 --> 00:30:28,500 Y en realidad su fuente va a ser un poco de URL. 579 00:30:28,500 --> 00:30:35,870 Si se busca en Google jQuery, Google en realidad alberga todos los archivos para usted. 580 00:30:35,870 --> 00:30:38,950 Así que debe de URL de entrada que en su lugar. 581 00:30:38,950 --> 00:30:41,130 Acabo de poner esto aquí por motivos de simplicidad. 582 00:30:41,130 --> 00:30:45,180 Todo esto significa es dónde encontrar su librería jQuery. 583 00:30:45,180 --> 00:30:48,600 Es enorme, por lo que no quiere alojarlo en su propio ordenador 584 00:30:48,600 --> 00:30:53,390 si puede evitarlo, es por ello que tienden a sólo hay que poner en la URL de Google que 585 00:30:53,390 --> 00:30:55,880 acoge todos estos archivos para usted. 586 00:30:55,880 --> 00:30:56,380 DE ACUERDO? 587 00:30:56,380 --> 00:30:58,850 Se busca en Google, te lo prometo que estará allí. 588 00:30:58,850 --> 00:31:01,200 >> Y entonces todo lo Archivo JavaScript que eres 589 00:31:01,200 --> 00:31:07,150 utilizando, así que esto es sólo algunos externos JavaScript archivo que está utilizando. 590 00:31:07,150 --> 00:31:11,570 De la misma manera que nos relacionamos en nuestro CSS archivos, este es el mismo tipo de cosas. 591 00:31:11,570 --> 00:31:15,480 Esto sólo vincula el archivo donde tu JavaScript es. 592 00:31:15,480 --> 00:31:18,970 Y tengo algunos ejemplos con un simple JavaScript. 593 00:31:18,970 --> 00:31:20,220 Así que vamos a ir a través de él. 594 00:31:20,220 --> 00:31:27,230 Y luego, en su índice de JavaScript que es su archivo JavaScript aquí, 595 00:31:27,230 --> 00:31:30,900 esto es una especie de la envoltura que tiene para jQuery. 596 00:31:30,900 --> 00:31:33,860 Ya casi 99.9 por ciento del tiempo va 597 00:31:33,860 --> 00:31:36,800 tener esto en su archivo index.js. 598 00:31:36,800 --> 00:31:40,010 Porque lo que dice es, "No ejecutar nada 599 00:31:40,010 --> 00:31:43,480 hasta que su documento es en realidad listo ", que es exactamente lo que quieres. 600 00:31:43,480 --> 00:31:46,600 Porque si el documento no está listo, y jQuery empieza a hacer las cosas, 601 00:31:46,600 --> 00:31:48,020 es sólo un desastre. 602 00:31:48,020 --> 00:31:50,480 Así que siempre quiero tener este envoltorio. 603 00:31:50,480 --> 00:31:55,760 Y entonces, por las cosas que van allí, me dejará al propio hojeando sus chicos. 604 00:31:55,760 --> 00:32:04,610 >> OK, así que ¿hay alguna pregunta derecha ahora acerca de JavaScript en general? 605 00:32:04,610 --> 00:32:07,420 O el modelo DOM? 606 00:32:07,420 --> 00:32:10,780 Si no, tenemos algunos fresco ejemplos que podemos ir a través, 607 00:32:10,780 --> 00:32:13,120 que ustedes me puede ayudar código. 608 00:32:13,120 --> 00:32:15,877 Pero yo también voy a ser super agradable, y si 609 00:32:15,877 --> 00:32:17,960 no quiero decir nada para ellos, eso está bien. 610 00:32:17,960 --> 00:32:20,510 Puedo también acaba de dar ejemplos. 611 00:32:20,510 --> 00:32:24,581 Pero nada en el PowerPoint antes de seguir adelante? 612 00:32:24,581 --> 00:32:25,080 Fresco. 613 00:32:25,080 --> 00:32:26,990 >> Me siento como ustedes necesita energía. 614 00:32:26,990 --> 00:32:31,516 Así que creo que vamos a empezar con mi ejemplo del partido primero. 615 00:32:31,516 --> 00:32:33,390 Tenemos tres ejemplos, usted tiene su opción. 616 00:32:33,390 --> 00:32:37,720 Así que tenemos reloj, hacia dónde vamos para implementar un reloj real que es 617 00:32:37,720 --> 00:32:41,430 va a actualizar el paso del tiempo. 618 00:32:41,430 --> 00:32:43,310 Tenemos esta gran función Twitter. 619 00:32:43,310 --> 00:32:44,560 Esto-- ¿sabes qué aferrarse. 620 00:32:44,560 --> 00:32:47,220 Vamos a hacer que esto desaparezca. 621 00:32:47,220 --> 00:32:47,950 Bam. 622 00:32:47,950 --> 00:32:49,060 DE ACUERDO. 623 00:32:49,060 --> 00:32:56,132 >> Tenemos esta gran función Twitter aquí, que-- Lo sé, ¿verdad? 624 00:32:56,132 --> 00:32:57,090 Va a ser grande. 625 00:32:57,090 --> 00:32:58,350 ¿Estás emocionado chicos? 626 00:32:58,350 --> 00:33:01,170 Eso va a contar el número de caracteres que le quedan, 627 00:33:01,170 --> 00:33:04,520 así que si escribo en este momento, obviamente todavía dice 140, 628 00:33:04,520 --> 00:33:06,190 pero sabemos que no es el caso. 629 00:33:06,190 --> 00:33:08,570 Y luego con nuestra última aquí, haga clic aquí a la fiesta. 630 00:33:08,570 --> 00:33:12,150 ¿Qué va a pasar es cuando hacemos clic, el fondo de 631 00:33:12,150 --> 00:33:13,340 va a cambiar los colores. 632 00:33:13,340 --> 00:33:17,060 Así que ustedes tienen sus opciones de cuál de ellos desea hacer primero. 633 00:33:17,060 --> 00:33:19,800 Te prometo que lo llevo muy fácil en usted. 634 00:33:19,800 --> 00:33:22,680 Me siento como todo un poco de sólo muy bajo llave en la actualidad. 635 00:33:22,680 --> 00:33:25,540 Así que te voy a caminar a través de la forma vamos a implementar todos estos. 636 00:33:25,540 --> 00:33:28,520 Si quieres sonar en, eso es genial, pero yo 637 00:33:28,520 --> 00:33:30,020 sentir que todo el mundo está un poco cansado. 638 00:33:30,020 --> 00:33:32,970 Así que sólo te voy a caminar a través de estos ejemplos. 639 00:33:32,970 --> 00:33:35,015 ¿Tenemos algo que nos gustaría hacer primero? 640 00:33:35,015 --> 00:33:38,140 641 00:33:38,140 --> 00:33:39,475 Cualquier persona? 642 00:33:39,475 --> 00:33:41,350 Sin preferencia? 643 00:33:41,350 --> 00:33:41,867 DE ACUERDO. 644 00:33:41,867 --> 00:33:42,450 Sabes que? 645 00:33:42,450 --> 00:33:43,290 Estamos en la fiesta. 646 00:33:43,290 --> 00:33:48,380 Siento que ustedes necesitan un poco-- así, vamos a hacer una fiesta de primera. 647 00:33:48,380 --> 00:33:48,880 DE ACUERDO. 648 00:33:48,880 --> 00:33:51,470 649 00:33:51,470 --> 00:33:56,930 >> Así que lo que tenemos aquí-- eso es no se supone que estar allí. 650 00:33:56,930 --> 00:33:57,910 Ahora que es bueno. 651 00:33:57,910 --> 00:33:59,810 DE ACUERDO. 652 00:33:59,810 --> 00:34:03,110 Así que lo que tenemos aquí es sólo una simple página HTML 653 00:34:03,110 --> 00:34:07,840 que ustedes deben estar todos súper conoce de sus dos últimos conjuntos de procesadores. 654 00:34:07,840 --> 00:34:10,212 tenemos nuestro tipo doc aquí. 655 00:34:10,212 --> 00:34:10,920 ¿Todo mundo puede ver? 656 00:34:10,920 --> 00:34:11,420 DE ACUERDO. 657 00:34:11,420 --> 00:34:12,560 Fresco. 658 00:34:12,560 --> 00:34:13,900 Tenemos nuestro HTML obviamente. 659 00:34:13,900 --> 00:34:18,360 Tenemos algo de cabecera que es vinculado a una hoja de estilo que 660 00:34:18,360 --> 00:34:21,420 acaba de hacer mi fuente agradable y grande y en negrita. 661 00:34:21,420 --> 00:34:23,489 Así que no te preocupes por eso. 662 00:34:23,489 --> 00:34:26,437 >> Tenemos un cuerpo con un fondo Id, OK? 663 00:34:26,437 --> 00:34:28,520 Porque vamos a ser cambiando el fondo. 664 00:34:28,520 --> 00:34:31,964 Así que cuando estamos cambiando la fondo de nuestro cuerpo, 665 00:34:31,964 --> 00:34:35,965 que recordamos de hace dos semanas cuando se trata de páginas web. 666 00:34:35,965 --> 00:34:36,840 Así que bueno tener eso. 667 00:34:36,840 --> 00:34:39,270 Y tenemos algunos Id es igual a fiesta. 668 00:34:39,270 --> 00:34:43,909 Este h ref libras sólo significa que que va a ir a la misma página. 669 00:34:43,909 --> 00:34:47,120 Y haga clic aquí a la fiesta, que es por eso que cuando lo hace clic, 670 00:34:47,120 --> 00:34:48,940 debe cambiar los colores, por suerte. 671 00:34:48,940 --> 00:34:54,322 >> Y luego tenemos una secuencia de comandos aquí que es simplemente vinculados a este partido js dot 672 00:34:54,322 --> 00:34:58,100 archivo, que está vacío porque no hemos hecho nada todavía. 673 00:34:58,100 --> 00:35:00,450 Y es tan triste. 674 00:35:00,450 --> 00:35:06,100 Pero muy pronto, que va a cambiar colores, y va a ser impresionante. 675 00:35:06,100 --> 00:35:10,520 >> Así que sólo voy a caminar chicos a través de cómo podríamos abordar este. 676 00:35:10,520 --> 00:35:14,030 Así que lo primero que lo que se quiere hacer, 677 00:35:14,030 --> 00:35:18,050 si estamos cambiando el fondo de el cuerpo, la primera cosa que puede ser que desee 678 00:35:18,050 --> 00:35:22,730 a hacer es realmente agarrar lo que el cuerpo es, ¿verdad? 679 00:35:22,730 --> 00:35:27,690 Así que queremos tener suma, nuestro fondo, y si te fijas, 680 00:35:27,690 --> 00:35:29,567 Acabo automáticamente comience a escribir. 681 00:35:29,567 --> 00:35:32,400 No hay nada especial que necesita hacer para nuestros archivos JavaScript. 682 00:35:32,400 --> 00:35:35,820 Puedo empezar a declarar variables, y declarando funciones aleatorias. 683 00:35:35,820 --> 00:35:38,110 Y es la forma mucho más libre. 684 00:35:38,110 --> 00:35:41,930 Es como con C, dimos a todos estas reglas duras, y que crecieron, 685 00:35:41,930 --> 00:35:43,220 así que estamos como, "ir adelante. 686 00:35:43,220 --> 00:35:44,000 Ser libre. 687 00:35:44,000 --> 00:35:44,870 Haz lo que quieras ". 688 00:35:44,870 --> 00:35:46,280 Y eso es lo que JavaScript está. 689 00:35:46,280 --> 00:35:48,390 Así que tenemos algunos antecedentes aquí. 690 00:35:48,390 --> 00:35:55,900 Con nuestro modelo DOM, sabemos que puede hacer llegar el documento dot elemento, 691 00:35:55,900 --> 00:36:00,290 y si nos damos cuenta de que aquí, nuestro cuerpo tiene un Id. 692 00:36:00,290 --> 00:36:00,930 Derecho? 693 00:36:00,930 --> 00:36:06,310 Así que podemos hacer llegar el documento por Id, y aquí es simple. 694 00:36:06,310 --> 00:36:08,295 ¿Cuál es nuestra Id que queremos aquí? 695 00:36:08,295 --> 00:36:09,170 AUDIENCIA: Antecedentes. 696 00:36:09,170 --> 00:36:11,280 ALLISON Buchholtz-AU: Antecedentes. 697 00:36:11,280 --> 00:36:12,230 Perfecto. 698 00:36:12,230 --> 00:36:14,250 Y punto y coma al final. 699 00:36:14,250 --> 00:36:15,610 Eso no ha desaparecido todavía. 700 00:36:15,610 --> 00:36:17,330 Usted todavía necesita sus puntos y comas. 701 00:36:17,330 --> 00:36:17,830 DE ACUERDO. 702 00:36:17,830 --> 00:36:19,690 Así que esa es nuestra primera. 703 00:36:19,690 --> 00:36:23,880 Y cuando hacemos clic en algo, quiere que pase algo, ¿no? 704 00:36:23,880 --> 00:36:28,270 Así que lo que se quiere alguna variable eso se espera de un clic. 705 00:36:28,270 --> 00:36:32,410 Lo que vamos a hacer es que vamos a hacer nuestra relación más similar a un botón. 706 00:36:32,410 --> 00:36:43,140 Así que vamos a tener algún botón que es igual a documentar dot obtener elemento de identificación. 707 00:36:43,140 --> 00:36:48,670 Y si yo estoy hablando de la haga clic en enlace o haga clic aquí para la fiesta 708 00:36:48,670 --> 00:36:51,850 enlace, ¿qué podría mi Id estar aquí? 709 00:36:51,850 --> 00:36:52,590 Parte. 710 00:36:52,590 --> 00:36:55,200 Correcto. 711 00:36:55,200 --> 00:36:56,500 Aceptar no está tan mal hasta ahora. 712 00:36:56,500 --> 00:36:59,060 Todo el mundo obtiene lo que estamos haciendo? 713 00:36:59,060 --> 00:37:02,100 >> OK, así que ahora tenemos nuestra botón, y queremos 714 00:37:02,100 --> 00:37:04,140 que las cosas cambien cuando hacemos clic en él. 715 00:37:04,140 --> 00:37:08,750 Así que si nos acordamos de nuestro PowerPoint, cosa muy simple que podemos hacer 716 00:37:08,750 --> 00:37:12,140 es sólo punto botón onclick, ¿verdad? 717 00:37:12,140 --> 00:37:14,750 718 00:37:14,750 --> 00:37:18,730 Y eso va a ser igual a alguna función. 719 00:37:18,730 --> 00:37:20,620 Esta es una función anónima. 720 00:37:20,620 --> 00:37:24,620 Y esto sólo como-- realidad estoy va a hacer esto un poco más grande. 721 00:37:24,620 --> 00:37:27,330 >> Así que lo que acabo de hacer aquí es lo que estoy diciendo, OK, 722 00:37:27,330 --> 00:37:31,810 cuando hacemos clic nuestro botón, que es este enlace que sólo nos referimos, 723 00:37:31,810 --> 00:37:34,270 vamos a ejecutar esta función anónima. 724 00:37:34,270 --> 00:37:35,845 No necesitamos ningún insumo. 725 00:37:35,845 --> 00:37:37,220 No nos importa lo que dice el usuario. 726 00:37:37,220 --> 00:37:38,800 Al hacer clic en él, estamos va a hacer lo que queramos, 727 00:37:38,800 --> 00:37:40,660 que es cambiar el color de fondo. 728 00:37:40,660 --> 00:37:42,640 DE ACUERDO? 729 00:37:42,640 --> 00:37:47,224 Así que es por eso que no tenemos entradas, sólo tenemos esta función anónima. 730 00:37:47,224 --> 00:37:49,390 Y ahora estamos en realidad va escribir esta función. 731 00:37:49,390 --> 00:37:55,040 >> Así que hay un montón de maneras que usted podría generar un color aleatorio. 732 00:37:55,040 --> 00:37:59,010 La forma en que lo hice fue para generar tres números aleatorios 733 00:37:59,010 --> 00:38:01,910 y convertirlos a una triple RGB. 734 00:38:01,910 --> 00:38:06,130 Así que esto sólo muestra algunos fresco cosas que si usted es como, "oh, 735 00:38:06,130 --> 00:38:08,464 Necesito generar un azar número. "si el Google, 736 00:38:08,464 --> 00:38:09,630 esto es lo que puedes encontrar. 737 00:38:09,630 --> 00:38:17,580 >> Así que tenemos tres diferentes cosas, var, no de nuevo rojo, verde. 738 00:38:17,580 --> 00:38:18,080 Derecho? 739 00:38:18,080 --> 00:38:20,740 Así que estos son los tres cosas que componen un color. 740 00:38:20,740 --> 00:38:22,220 Azul, rojo y verde. 741 00:38:22,220 --> 00:38:22,960 Fresco. 742 00:38:22,960 --> 00:38:27,050 Y lo que podemos hacer es que sabemos que tiene que estar entre 255, 743 00:38:27,050 --> 00:38:30,140 y si miras un poco generador de números aleatorios, 744 00:38:30,140 --> 00:38:36,000 usted podría conseguir algo como matemáticas puntos aleatorios, que si se mira esto 745 00:38:36,000 --> 00:38:39,230 regresa a algún número entre cero y uno. 746 00:38:39,230 --> 00:38:39,980 DE ACUERDO? 747 00:38:39,980 --> 00:38:44,470 ¿Y qué números de hacer nuestro Triples RGB van entre? 748 00:38:44,470 --> 00:38:47,240 Cero y qué? 749 00:38:47,240 --> 00:38:49,000 ¿Qué pueden ir hasta? 750 00:38:49,000 --> 00:38:49,950 255. 751 00:38:49,950 --> 00:38:53,320 Así que si las matemáticas dot azar va entre cero y uno, 752 00:38:53,320 --> 00:38:56,365 ¿cómo podríamos querer convertir esto? 753 00:38:56,365 --> 00:38:56,990 AUDIENCIA: Tiempo? 754 00:38:56,990 --> 00:38:57,830 ALLISON Buchholtz-AU: Sí, exactamente. 755 00:38:57,830 --> 00:38:58,677 Así que el tiempo es 255. 756 00:38:58,677 --> 00:39:00,888 >> AUDIENCIA: [inaudible] Es como [inaudible]. 757 00:39:00,888 --> 00:39:02,471 ALLISON Buchholtz-AU: Matemáticas puntos aleatorios. 758 00:39:02,471 --> 00:39:03,096 AUDIENCIA: Cool. 759 00:39:03,096 --> 00:39:04,580 ALLISON Buchholtz-AU: Sí. 760 00:39:04,580 --> 00:39:06,300 JavaScript sólo cuida de ti. 761 00:39:06,300 --> 00:39:07,580 DE ACUERDO. 762 00:39:07,580 --> 00:39:09,360 Por lo que podemos hacer eso por todos los éstos. 763 00:39:09,360 --> 00:39:10,540 Derecho? 764 00:39:10,540 --> 00:39:16,480 Matemáticas dot veces al azar 255. 765 00:39:16,480 --> 00:39:17,740 Entendido. 766 00:39:17,740 --> 00:39:18,820 Fresco. 767 00:39:18,820 --> 00:39:23,350 Así que la cosa es que esto puede no devolver un entero. 768 00:39:23,350 --> 00:39:24,080 Derecho? 769 00:39:24,080 --> 00:39:26,450 Tal vez lleguemos algún número entre cero y uno, 770 00:39:26,450 --> 00:39:32,150 y que hace que sea ligeramente apagado, y nuestros RGBs no pueden ser carrozas. 771 00:39:32,150 --> 00:39:33,360 Tienen que ser enteros. 772 00:39:33,360 --> 00:39:37,610 Así que si has probado esto, que probablemente tener un comportamiento errático. 773 00:39:37,610 --> 00:39:38,810 Sería un poco raro. 774 00:39:38,810 --> 00:39:43,200 Así que lo que hacemos es que queremos hacer asegurarse de que éstos se redondean, 775 00:39:43,200 --> 00:39:45,400 y usted podría redondear cualquier manera. 776 00:39:45,400 --> 00:39:47,110 Doblé con piso. 777 00:39:47,110 --> 00:39:49,680 Así que siempre aseguré que redondea hacia abajo. 778 00:39:49,680 --> 00:39:54,440 Pero ir fuera de lo simple que era apenas conseguir un número aleatorio, 779 00:39:54,440 --> 00:39:57,920 ¿cómo crees que podría piso este número? 780 00:39:57,920 --> 00:40:00,720 Es muy similar. 781 00:40:00,720 --> 00:40:02,810 ¿Alguna idea? 782 00:40:02,810 --> 00:40:06,450 Así que si al azar era sólo punto matemáticas al azar, por lo que piensa usted que haríamos piso? 783 00:40:06,450 --> 00:40:09,670 Piso de puntos de Matemáticas. 784 00:40:09,670 --> 00:40:11,340 Y también se puede hacer el techo de puntos matemáticas. 785 00:40:11,340 --> 00:40:14,030 Ronda es una especie de ambigua porque no lo hace 786 00:40:14,030 --> 00:40:16,110 saber si para redondear hacia arriba o hacia abajo redondear. 787 00:40:16,110 --> 00:40:20,797 Así que por lo general siempre hacemos matemáticas piso de punto, techo punto matemáticas. 788 00:40:20,797 --> 00:40:21,380 Pero honestly-- 789 00:40:21,380 --> 00:40:22,780 >> AUDIENCIA: ¿La ronda piso abajo? 790 00:40:22,780 --> 00:40:24,740 >> ALLISON Buchholtz-AU: redondea piso abajo. 791 00:40:24,740 --> 00:40:26,990 Y eso es sólo una elección de mi parte. 792 00:40:26,990 --> 00:40:32,370 >> Así que ahora tenemos nuestros tres números que se han generado de forma aleatoria, 793 00:40:32,370 --> 00:40:36,610 y lo que vamos a hacer ahora es que estamos sólo va a cambiar el fondo. 794 00:40:36,610 --> 00:40:37,310 DE ACUERDO? 795 00:40:37,310 --> 00:40:41,490 Así que ya tenemos nuestra tipo de fondo almacenada 796 00:40:41,490 --> 00:40:43,280 en este elemento denominado fondo. 797 00:40:43,280 --> 00:40:47,300 Entonces, ¿qué te darás cuenta es que, si que jugó un poco con esto, 798 00:40:47,300 --> 00:40:50,460 queremos cambiar el estilo. 799 00:40:50,460 --> 00:40:53,812 Y esto es una especie de algo que usted Google y averiguar, 800 00:40:53,812 --> 00:40:55,020 como la forma de cambiar el color. 801 00:40:55,020 --> 00:40:59,210 >> Pero la forma de acceder a este color es fondo del punto de fondo de punto del estilo. 802 00:40:59,210 --> 00:41:03,490 Así que esto está diciendo dado este objeto, fondo, 803 00:41:03,490 --> 00:41:06,920 que se refiere a que elemento Id allá arriba, 804 00:41:06,920 --> 00:41:10,690 vamos a mirar el estilo dentro del estilo, 805 00:41:10,690 --> 00:41:13,280 vamos a mirar en el fondo. 806 00:41:13,280 --> 00:41:14,270 DE ACUERDO? 807 00:41:14,270 --> 00:41:17,630 Y si vas y ves esto, que podría hacer un poco más de sentido, 808 00:41:17,630 --> 00:41:21,930 pero esto es básicamente diciendo, "Dame este atributo muy específico 809 00:41:21,930 --> 00:41:25,770 de lo que he definido anteriormente ". 810 00:41:25,770 --> 00:41:32,340 Así que lo que estamos cambiando a es algunos RGB, porque tiene sentido. 811 00:41:32,340 --> 00:41:34,780 Estamos utilizando RGB triplica, ¿verdad? 812 00:41:34,780 --> 00:41:41,530 Y nosotros tener-- Quiero asegurarme de que obtener el número correcto de citas aquí. 813 00:41:41,530 --> 00:41:43,940 Así que lo que hacemos es que tenemos RGB, y vamos 814 00:41:43,940 --> 00:41:46,800 a-- esto es como concatenación, que es de color rojo. 815 00:41:46,800 --> 00:41:50,030 816 00:41:50,030 --> 00:41:52,610 Y luego queremos alguna coma. 817 00:41:52,610 --> 00:41:59,925 Y entonces queremos más de color verde, a continuación, algunos coma, y ​​algo de azul. 818 00:41:59,925 --> 00:42:10,640 819 00:42:10,640 --> 00:42:14,120 >> Así que estas ventajas sólo significar como concatenación. 820 00:42:14,120 --> 00:42:19,810 Así que esto es sólo la creación de este cadena que está pasando dentro de RGB. 821 00:42:19,810 --> 00:42:20,310 DE ACUERDO? 822 00:42:20,310 --> 00:42:23,200 823 00:42:23,200 --> 00:42:26,684 >> AUDIENCIA: [inaudible], más luego la de un verde más después el rojo. 824 00:42:26,684 --> 00:42:30,163 >> ALLISON Buchholtz-AU: Sí, porque metí la pata eso. 825 00:42:30,163 --> 00:42:30,890 Está bien que uno. 826 00:42:30,890 --> 00:42:32,110 Oh, espera. 827 00:42:32,110 --> 00:42:32,610 No. 828 00:42:32,610 --> 00:42:36,770 Porque necesito para asegurarse que me dieron todos estos derecha. 829 00:42:36,770 --> 00:42:39,680 830 00:42:39,680 --> 00:42:43,950 Así que voy a explicar en Momento uno. 831 00:42:43,950 --> 00:42:47,040 Verde, azul, perfecto. 832 00:42:47,040 --> 00:42:47,971 Ahora he terminado. 833 00:42:47,971 --> 00:42:48,470 Yo creo. 834 00:42:48,470 --> 00:42:51,570 835 00:42:51,570 --> 00:42:52,530 >> DE ACUERDO. 836 00:42:52,530 --> 00:42:58,085 Entonces, ¿qué es esto, es que el fondo va a ser fijado a una cuerda. 837 00:42:58,085 --> 00:42:58,585 Derecho? 838 00:42:58,585 --> 00:42:59,710 ¿Qué es lo que tenemos aquí. 839 00:42:59,710 --> 00:43:05,870 Va a haber algún RGB 255 comas 255 cero coma, o cualquier número que 840 00:43:05,870 --> 00:43:06,512 tener allí. 841 00:43:06,512 --> 00:43:08,220 Así que estamos haciendo aquí, tenemos un poco de cuerda. 842 00:43:08,220 --> 00:43:11,910 Y lo que queremos hacer, es que estamos tipo de crear dinámicamente 843 00:43:11,910 --> 00:43:14,010 que cuando realmente ejecutar este programa. 844 00:43:14,010 --> 00:43:16,570 Así que esto es un poco de cuerda. 845 00:43:16,570 --> 00:43:20,290 Plus concatena con el valor que el rojo tiene, 846 00:43:20,290 --> 00:43:23,320 que concatena con una coma, que concatena se 847 00:43:23,320 --> 00:43:26,090 con lo verde es, y así sucesivamente, y así sucesivamente. 848 00:43:26,090 --> 00:43:26,660 DE ACUERDO? 849 00:43:26,660 --> 00:43:32,210 Hasta el final, que es el el cierre de paréntesis de esta RGB aquí. 850 00:43:32,210 --> 00:43:32,800 DE ACUERDO? 851 00:43:32,800 --> 00:43:37,230 >> Así que lo que esto va a generar algún comando realmente 852 00:43:37,230 --> 00:43:42,770 es decir RGB de tres números que el fondo se establece ahora. 853 00:43:42,770 --> 00:43:43,940 DE ACUERDO? 854 00:43:43,940 --> 00:43:46,510 Así que vamos a ver si esto funciona. 855 00:43:46,510 --> 00:43:49,720 Espero que así sea, porque si no, yo voy a ser muy triste. 856 00:43:49,720 --> 00:43:50,250 ¡Oh, no. 857 00:43:50,250 --> 00:43:52,710 Aceptar, espera. 858 00:43:52,710 --> 00:43:56,730 Definitivamente fondo dot dot fondo estilo. 859 00:43:56,730 --> 00:43:59,569 Definitivamente me estoy perdiendo algo sólo pequeña. 860 00:43:59,569 --> 00:44:00,610 ¿No tienes chicos odian eso? 861 00:44:00,610 --> 00:44:04,020 Cuando es sólo una pequeña poco de error? 862 00:44:04,020 --> 00:44:04,990 Fondo Todopoderoso. 863 00:44:04,990 --> 00:44:08,391 864 00:44:08,391 --> 00:44:08,890 RGB. 865 00:44:08,890 --> 00:44:09,765 >> AUDIENCIA: [inaudible] 866 00:44:09,765 --> 00:44:11,729 867 00:44:11,729 --> 00:44:12,770 ALLISON Buchholtz-AU: No. 868 00:44:12,770 --> 00:44:14,050 He intentado esto antes de la clase. 869 00:44:14,050 --> 00:44:16,570 Tengo todo lo que hice antes clase por si yo estaba como, 870 00:44:16,570 --> 00:44:17,970 "Espera, ¿qué hice mal?" 871 00:44:17,970 --> 00:44:23,190 Porque yo estaba como, "Lo haré probablemente estropear esto en algún momento ". 872 00:44:23,190 --> 00:44:24,150 Plus verde. 873 00:44:24,150 --> 00:44:26,250 Todo se ve como si fuera concatenado correctamente. 874 00:44:26,250 --> 00:44:29,620 875 00:44:29,620 --> 00:44:30,520 DE ACUERDO. 876 00:44:30,520 --> 00:44:31,870 >> AUDIENCIA: [inaudible] 877 00:44:31,870 --> 00:44:33,810 >> ALLISON Buchholtz-AU: Oh, ahí lo tienes. 878 00:44:33,810 --> 00:44:35,520 Eso es lo que necesitaba. 879 00:44:35,520 --> 00:44:36,805 Mira eso. 880 00:44:36,805 --> 00:44:40,090 Tiffany para rescatar. 881 00:44:40,090 --> 00:44:40,590 Perfecto. 882 00:44:40,590 --> 00:44:41,090 DE ACUERDO. 883 00:44:41,090 --> 00:44:43,834 Ahora vamos a ver si funciona. 884 00:44:43,834 --> 00:44:44,816 Dios mío. 885 00:44:44,816 --> 00:44:45,641 DE ACUERDO. 886 00:44:45,641 --> 00:44:46,140 Espere. 887 00:44:46,140 --> 00:44:48,280 >> AUDIENCIA: El espacio después de la segunda ventaja. 888 00:44:48,280 --> 00:44:50,310 >> ALLISON Buchholtz-AU: ¿Cuál? 889 00:44:50,310 --> 00:44:52,910 Oh, espera, espera. 890 00:44:52,910 --> 00:44:54,870 Desgaste espacio? 891 00:44:54,870 --> 00:44:57,209 >> AUDIENCIA: Segundo más en la concatenación verde. 892 00:44:57,209 --> 00:44:58,250 ALLISON Buchholtz-AU: Oh. 893 00:44:58,250 --> 00:44:59,570 AUDIENCIA: No hay ningún espacio después de que el más, sí. 894 00:44:59,570 --> 00:45:00,790 ALLISON Buchholtz-AU: Usted no es necesario que, pero- 895 00:45:00,790 --> 00:45:01,190 AUDIENCIA: ¡Oh, no lo hace? 896 00:45:01,190 --> 00:45:01,910 ALLISON Buchholtz-AU: Se ve bastante. 897 00:45:01,910 --> 00:45:02,530 AUDIENCIA: OK. 898 00:45:02,530 --> 00:45:03,030 DE ACUERDO. 899 00:45:03,030 --> 00:45:05,170 >> ALLISON Buchholtz AU: Vamos a ver si esto funciona. 900 00:45:05,170 --> 00:45:05,670 DE ACUERDO. 901 00:45:05,670 --> 00:45:07,836 Obviamente estoy fallando en esta demo, que me recuerda 902 00:45:07,836 --> 00:45:12,810 de una conferencia la otra semana, pero sé que esto va a funcionar. 903 00:45:12,810 --> 00:45:15,860 Sé que esto va a funcionar. 904 00:45:15,860 --> 00:45:16,580 Tan cerca. 905 00:45:16,580 --> 00:45:22,330 A menos que yo borré accidentalmente mi guión en este caso. 906 00:45:22,330 --> 00:45:24,035 No, se trata de puntos de partido js. 907 00:45:24,035 --> 00:45:25,776 Aceptar aferrarse. 908 00:45:25,776 --> 00:45:28,650 Voy a copiar esto, y estoy también sólo va a borrar todo, 909 00:45:28,650 --> 00:45:30,108 porque tenía este trabajo antes. 910 00:45:30,108 --> 00:45:32,470 911 00:45:32,470 --> 00:45:33,770 >> Te prometo que funciona. 912 00:45:33,770 --> 00:45:36,160 Si no, voy a mostrarte lo que Tommy es. 913 00:45:36,160 --> 00:45:38,890 Y allí. 914 00:45:38,890 --> 00:45:42,380 >> AUDIENCIA: Usted está haciendo referencia a las partes dot CSS, y es un punto js partido. 915 00:45:42,380 --> 00:45:45,940 >> ALLISON Buchholtz-AU: Ah, bueno aquí es js punto de partido. 916 00:45:45,940 --> 00:45:49,187 Bien, ¿qué he hecho diferente? 917 00:45:49,187 --> 00:45:50,520 Bien, vamos a ver si esto funciona ahora. 918 00:45:50,520 --> 00:45:54,180 919 00:45:54,180 --> 00:45:54,980 Bam. 920 00:45:54,980 --> 00:46:02,110 Por lo tanto, yo no sé lo que hice diferente, pero esto es lo que debe suceder. 921 00:46:02,110 --> 00:46:03,230 Un poco frío. 922 00:46:03,230 --> 00:46:06,650 He hecho clic en este, como, por siempre. 923 00:46:06,650 --> 00:46:11,185 Pero podemos tratar de ver lo que hice diferente que éste tenía. 924 00:46:11,185 --> 00:46:14,560 Yo no sé ustedes, pero esto ve básicamente lo que acabo de escribir. 925 00:46:14,560 --> 00:46:17,950 Probablemente hubo un faltante punto y coma en algún lugar es lo mío. 926 00:46:17,950 --> 00:46:22,064 En realidad después, creo que me estaba perdiendo un punto y coma aquí realmente. 927 00:46:22,064 --> 00:46:24,230 Pero yo no podía verlo porque era fuera de la pantalla. 928 00:46:24,230 --> 00:46:29,040 >> Pero si nos damos cuenta, esto es bastante mucho exactamente lo que acabo de escribir. 929 00:46:29,040 --> 00:46:33,010 Creo que probablemente la parte más difícil de esto es sólo un poco de esta cosa 930 00:46:33,010 --> 00:46:36,830 aquí, la comprensión lo que está haciendo allí. 931 00:46:36,830 --> 00:46:42,230 Este tipo de cosas que se aprenden realmente sólo buscando en Google y honestamente 932 00:46:42,230 --> 00:46:42,880 tratando. 933 00:46:42,880 --> 00:46:46,770 Si crees que hay alguna atributo, probablemente lo es. 934 00:46:46,770 --> 00:46:48,382 Así que probarlo. 935 00:46:48,382 --> 00:46:49,090 Vea lo que sucede. 936 00:46:49,090 --> 00:46:53,000 Como ya he dicho, hay una gran cantidad de la experimentación con el lenguaje Java, 937 00:46:53,000 --> 00:46:56,810 y PHP, y todo lo que cosas, y especialmente CSS. 938 00:46:56,810 --> 00:47:00,046 Esa es la única verdad forma de entenderlo. 939 00:47:00,046 --> 00:47:07,100 >> OK, así que después de ese fiasco con el partido js punto, tenemos otras dos opciones. 940 00:47:07,100 --> 00:47:10,650 Tenemos reloj o Twitter. 941 00:47:10,650 --> 00:47:12,190 Son a la vez interesante. 942 00:47:12,190 --> 00:47:17,720 Tal vez no es tan divertido como partido, que tenía un poco de efecto estroboscópico fresco 943 00:47:17,720 --> 00:47:19,595 cosa al final. 944 00:47:19,595 --> 00:47:21,714 ¿Ustedes tienen alguna preferencia? 945 00:47:21,714 --> 00:47:22,380 AUDIENCIA: Reloj? 946 00:47:22,380 --> 00:47:22,950 ALLISON Buchholtz-AU: Reloj? 947 00:47:22,950 --> 00:47:23,450 DE ACUERDO. 948 00:47:23,450 --> 00:47:25,390 Fresco. 949 00:47:25,390 --> 00:47:30,460 >> Así que de nuevo, tenemos nuestra archivo JavaScript vacía. 950 00:47:30,460 --> 00:47:35,800 Y como vemos aquí, tener algo muy simple de HTML. 951 00:47:35,800 --> 00:47:40,010 Tenemos nuestra hoja de estilo, que sólo Formatos de lo que debe ser similar. 952 00:47:40,010 --> 00:47:42,860 Tenemos nuestro div con un Id de reloj, que 953 00:47:42,860 --> 00:47:44,420 sólo dice, "esto debe ser un reloj." 954 00:47:44,420 --> 00:47:47,650 Y tenemos nuestro enlace en nuestro archivo JavaScript 955 00:47:47,650 --> 00:47:51,400 que en realidad va a generar nuestro reloj para nosotros. 956 00:47:51,400 --> 00:47:56,060 Porque lo bueno, es que se puede establecer JavaScript para actualizar automáticamente 957 00:47:56,060 --> 00:47:56,963 sí mismo. 958 00:47:56,963 --> 00:47:57,810 DE ACUERDO? 959 00:47:57,810 --> 00:48:01,580 Así que en lugar de esperar a que el usuario para golpear Actualizar en una página 960 00:48:01,580 --> 00:48:03,840 de modo que usted puede conseguir hora actualizada, JavaScript 961 00:48:03,840 --> 00:48:06,760 puede actualizarlo sin embargo le gusta. 962 00:48:06,760 --> 00:48:12,082 >> Así, al igual que con nuestro último, queríamos para acceder a nuestro fondo, ¿no? 963 00:48:12,082 --> 00:48:14,790 Entonces, ¿qué crees que podría ser el Lo primero que queremos hacer aquí? 964 00:48:14,790 --> 00:48:19,538 Si estamos tipo de irse este tipo de paradigma aquí? 965 00:48:19,538 --> 00:48:22,200 Probablemente Queremos acceder a nuestro reloj, ¿no? 966 00:48:22,200 --> 00:48:24,724 Así, tenemos un poco de var reloj, que equals-- 967 00:48:24,724 --> 00:48:26,140 ¿qué pensamos que va a ser? 968 00:48:26,140 --> 00:48:29,290 969 00:48:29,290 --> 00:48:42,670 Documento dot obtener elemento por-- también amar Sublime-- Id y nuestra Id es reloj. 970 00:48:42,670 --> 00:48:43,585 Punto y coma. 971 00:48:43,585 --> 00:48:45,710 Tengo que asegúrese de obtener esos puntos y comas en esta ocasión, 972 00:48:45,710 --> 00:48:47,835 porque me siento como que fue el problema de la última vez. 973 00:48:47,835 --> 00:48:55,980 Aceptar lo que, como le estaba diciendo con tratar tener JavaScript refresque a sí mismo, 974 00:48:55,980 --> 00:48:59,655 hay esta gran función, I sé que vino muy bien el año pasado, 975 00:48:59,655 --> 00:49:02,780 No estoy seguro de que es muy útil para este conjunto de procesadores, pero se llama intervalo establecido. 976 00:49:02,780 --> 00:49:05,640 977 00:49:05,640 --> 00:49:08,200 Y esto es realmente muy genial si ustedes hacen nada 978 00:49:08,200 --> 00:49:11,460 con el tiempo o conseguir información actualizada. 979 00:49:11,460 --> 00:49:13,700 En un sitio web para una final proyecto, esto es probablemente 980 00:49:13,700 --> 00:49:16,240 una función que desea conseguir súper familiarizados. 981 00:49:16,240 --> 00:49:19,730 Así que lo que hace es establecer el intervalo que vamos a darle una función, 982 00:49:19,730 --> 00:49:21,830 y con qué frecuencia debería llamar a esta función. 983 00:49:21,830 --> 00:49:22,430 DE ACUERDO? 984 00:49:22,430 --> 00:49:26,890 >> Así que en este caso, sólo vamos a crear una cierta función anónima de nuevo, 985 00:49:26,890 --> 00:49:31,530 Bueno, eso va a llegar nuestra cita, y nuestro tiempo, 986 00:49:31,530 --> 00:49:33,780 y luego actualizar las cosas y lo mostramos. 987 00:49:33,780 --> 00:49:35,130 Así que nos preocuparemos de eso. 988 00:49:35,130 --> 00:49:39,120 Seremos como generar reloj aquí. 989 00:49:39,120 --> 00:49:41,750 Pero lo que necesitamos es la forma a menudo para actualizarlo. 990 00:49:41,750 --> 00:49:43,930 Así que en este caso, es sólo milisegundos. 991 00:49:43,930 --> 00:49:46,877 Así que sólo vamos a hacer 100 milisegundos. 992 00:49:46,877 --> 00:49:48,210 Por supuesto, completamente arbitraria. 993 00:49:48,210 --> 00:49:50,600 Si querías que se actualice mucho más lentamente, lo que pudiste. 994 00:49:50,600 --> 00:49:53,300 No podemos perder el tiempo con el intervalo de tiempo establecido, 995 00:49:53,300 --> 00:49:57,240 qué tan grande es nuestro intervalo después de que conseguimos un reloj de trabajo, que espero poder 996 00:49:57,240 --> 00:49:59,660 llegar. 997 00:49:59,660 --> 00:50:04,110 Así que esto es sólo decir: "Está bien, llame al esta función cada 100 milisegundos ". 998 00:50:04,110 --> 00:50:04,805 DE ACUERDO? 999 00:50:04,805 --> 00:50:07,280 Eso es todo lo que hace. 1000 00:50:07,280 --> 00:50:12,290 >> Entonces, ¿qué queremos que nuestra función para hacer es que queremos tener una fecha 1001 00:50:12,290 --> 00:50:14,200 y algún tiempo es lo vamos a tener. 1002 00:50:14,200 --> 00:50:19,740 Así que podemos comenzar con nuestra fecha es igual a algo, 1003 00:50:19,740 --> 00:50:22,708 y nuestro tiempo es igual a algo que no sabemos todavía. 1004 00:50:22,708 --> 00:50:26,070 1005 00:50:26,070 --> 00:50:29,300 O en realidad, sólo necesitamos la fecha, porque fecha en que se va a incluir todo. 1006 00:50:29,300 --> 00:50:34,310 1007 00:50:34,310 --> 00:50:40,010 De nuevo, si usted acaba de Google nada sobre lo que quieres hacer, si usted escribe, "OK, 1008 00:50:40,010 --> 00:50:41,980 Quiero conseguir el tiempo a través de JavaScript, "que 1009 00:50:41,980 --> 00:50:45,890 le dará esta gran función llamada fecha de obtención. 1010 00:50:45,890 --> 00:50:48,664 Literalmente, la mayoría de las cosas que quieres hacer, 1011 00:50:48,664 --> 00:50:50,830 JavaScript va a tener que se haga para usted ya. 1012 00:50:50,830 --> 00:50:55,770 Por lo que es, literalmente, como nuevo obtener la fecha, que es creating-- 1013 00:50:55,770 --> 00:50:58,600 o una nueva fecha, rather-- que está generando 1014 00:50:58,600 --> 00:51:03,690 algún objeto que representa una fecha. 1015 00:51:03,690 --> 00:51:08,200 >> ¿Y qué vamos a hacer aquí es este es-- voy a escribir esto, 1016 00:51:08,200 --> 00:51:10,820 y luego explicar lo que hace. 1017 00:51:10,820 --> 00:51:12,560 Así que voy a asegurarme de obtener este derecho. 1018 00:51:12,560 --> 00:51:17,950 1019 00:51:17,950 --> 00:51:23,440 >> OK, así que lo que esta función hace, es sólo somos 1020 00:51:23,440 --> 00:51:30,680 creando el código HTML que en realidad va a ir dentro de nuestro div id de reloj. 1021 00:51:30,680 --> 00:51:34,610 Así que lo que esto va a estar haciendo se acaba de generar un poco de cuerda, OK? 1022 00:51:34,610 --> 00:51:38,510 Es decir entonces va a ser trasplantado en nuestro HTML. 1023 00:51:38,510 --> 00:51:42,130 Básicamente lo que va a hacer es lo Nosotros-- lo que yo te mostraré 1024 00:51:42,130 --> 00:51:49,070 es que cualquier cosa que digamos HTML está, vamos a reemplazar este texto aquí 1025 00:51:49,070 --> 00:51:51,090 con lo que es HTML. 1026 00:51:51,090 --> 00:51:56,390 Así que esto va a permitir que cambiemos nuestra RELOJ 1027 00:51:56,390 --> 00:52:00,940 HTML de ser sólo el texto de esta debe ser un reloj, para mostrar en realidad 1028 00:52:00,940 --> 00:52:05,630 los números y las cosas que nos importan aproximadamente, y en realidad ser en punto. 1029 00:52:05,630 --> 00:52:09,810 >> Así que lo que vamos a hacer es que estamos va a empezar a generar este HTML. 1030 00:52:09,810 --> 00:52:16,520 Así, en la misma manera que se utilizó hacer más iguales para enteros, 1031 00:52:16,520 --> 00:52:20,461 ahora usted puede hacer la de las series, excepto que va a concatenar. 1032 00:52:20,461 --> 00:52:20,960 Derecho? 1033 00:52:20,960 --> 00:52:26,070 Como vimos con el punto de partido js, ​​esto sólo concatena todas estas cosas juntas. 1034 00:52:26,070 --> 00:52:31,970 Así que usted puede concatenar diferentes bits de HTML a partir de variables, o pedazos de cuerdas 1035 00:52:31,970 --> 00:52:33,750 que escriba a ti mismo, y esto sólo 1036 00:52:33,750 --> 00:52:38,650 realmente le permite de forma dinámica generar HTML, que es bastante guay. 1037 00:52:38,650 --> 00:52:42,040 Así que si usted tiene algo muy usuario específico, 1038 00:52:42,040 --> 00:52:44,130 esto puede permitir que hagas eso. 1039 00:52:44,130 --> 00:52:47,550 >> Así que tenemos HTML, para que voy a tratar de asegurarme de obtener este derecho. 1040 00:52:47,550 --> 00:52:49,890 Así que vamos a hacer un poco de cabecera h1. 1041 00:52:49,890 --> 00:52:53,610 Así que lo que es importante darse cuenta aquí es que esto es en realidad sólo HTML. 1042 00:52:53,610 --> 00:52:54,460 Derecho? 1043 00:52:54,460 --> 00:52:56,610 Estamos escribiendo real Código HTML en aquí, es 1044 00:52:56,610 --> 00:53:01,090 no sólo una cadena en la normalidad manera que íbamos a pensar en ello. 1045 00:53:01,090 --> 00:53:02,930 Así que tenemos algo de HTML. 1046 00:53:02,930 --> 00:53:04,940 Esto se considera una cadena aquí, sin embargo. 1047 00:53:04,940 --> 00:53:10,380 Y lo hacemos fecha dot-- nosotros que desee obtener nuestros hora. 1048 00:53:10,380 --> 00:53:12,910 De nuevo, si usted fuera a mirar hasta nada sobre la fecha, 1049 00:53:12,910 --> 00:53:16,160 que te diría que son todos los atributos de esa fecha tiene. 1050 00:53:16,160 --> 00:53:17,670 Y aquí está lo que usted puede utilizar en ella. 1051 00:53:17,670 --> 00:53:20,620 Así que es probable que tenga cosas como obtener horas, y obtener minutos, 1052 00:53:20,620 --> 00:53:24,669 y obtener segundos, y obtener milisegundos, y quién sabe qué más tienen. 1053 00:53:24,669 --> 00:53:27,210 Pero si nos fijamos en el documentación, todo va a estar allí. 1054 00:53:27,210 --> 00:53:31,980 >> Así que tenemos obtener horas, y luego nos gustaría 1055 00:53:31,980 --> 00:53:35,614 para concatenar que con-- estoy va a pasar esto aquí. 1056 00:53:35,614 --> 00:53:38,780 Así que si estamos generando en este momento, estamos generar realmente el tiempo, ¿verdad? 1057 00:53:38,780 --> 00:53:43,590 Tenemos horas, y luego lo que está entre horas y minutos? 1058 00:53:43,590 --> 00:53:45,080 Usted tiene un punto y coma, ¿verdad? 1059 00:53:45,080 --> 00:53:48,010 Por eso queremos hacer un poco de punto y coma aquí. 1060 00:53:48,010 --> 00:53:51,780 Y luego queremos conseguir nuestro minutos, por lo que de la misma manera 1061 00:53:51,780 --> 00:53:56,450 que tenemos fecha dot obtener horas, ¿cómo podemos conseguir nuestros minutos? 1062 00:53:56,450 --> 00:54:01,542 Es, literalmente, fecha dot llegar minutos, lo que me gusta. 1063 00:54:01,542 --> 00:54:03,250 Es como, "oh, cómo Cómo puedo obtener mis minutos? " 1064 00:54:03,250 --> 00:54:05,850 Acabo de llegar de mis minutos. 1065 00:54:05,850 --> 00:54:07,500 >> DE ACUERDO. 1066 00:54:07,500 --> 00:54:10,990 Y luego tenemos otros dos puntos aquí. 1067 00:54:10,990 --> 00:54:16,350 Y luego, si queremos conseguir nuestro segundo, ¿cómo podríamos conseguir nuestra segunda? 1068 00:54:16,350 --> 00:54:17,400 Fecha dot llegar segundo. 1069 00:54:17,400 --> 00:54:20,390 1070 00:54:20,390 --> 00:54:21,590 Creo que es muy bueno. 1071 00:54:21,590 --> 00:54:23,589 Y lo que es importante darse cuenta, es que nosotros también 1072 00:54:23,589 --> 00:54:31,730 tenga que cerrar nuestra etiqueta HTML aquí, porque todavía debe ser HTML válida, por lo h1. 1073 00:54:31,730 --> 00:54:33,481 Fresco. 1074 00:54:33,481 --> 00:54:43,110 >> Así que después de eso, podemos hacer reloj dot HTML interno es igual a HTML. 1075 00:54:43,110 --> 00:54:43,930 DE ACUERDO? 1076 00:54:43,930 --> 00:54:46,470 Así que recuerde cómo me dije HTML interno básicamente 1077 00:54:46,470 --> 00:54:50,610 toma lo que sea entre el dos etiquetas que hablamos 1078 00:54:50,610 --> 00:54:54,470 y se inserta o manipula lo que está ahí? 1079 00:54:54,470 --> 00:54:58,290 Así que lo que esto hace, si volvemos a nuestro reloj, 1080 00:54:58,290 --> 00:55:04,180 es que el reloj se refiere a todo dentro de este div. 1081 00:55:04,180 --> 00:55:09,770 Este es el código HTML interno de este reloj div id. 1082 00:55:09,770 --> 00:55:13,930 Y por lo que va a cambiarlo a el HTML que acaba de generar, 1083 00:55:13,930 --> 00:55:16,750 que, que, con suerte, ojalá, ojalá, 1084 00:55:16,750 --> 00:55:21,026 mostrará el tiempo en este momento. 1085 00:55:21,026 --> 00:55:23,960 Ya veremos. 1086 00:55:23,960 --> 00:55:25,170 Por supuesto. 1087 00:55:25,170 --> 00:55:26,860 Así que muchas cuestiones técnicas. 1088 00:55:26,860 --> 00:55:31,480 Sólo-- de Allison soy fuera de mi juego de hoy chicos. 1089 00:55:31,480 --> 00:55:34,136 Bien, eso funciona. 1090 00:55:34,136 --> 00:55:35,760 reloj de puntos HTML interno. 1091 00:55:35,760 --> 00:55:42,097 Fue HTML ¿En serio? 1092 00:55:42,097 --> 00:55:43,180 También esto es lo que sucede. 1093 00:55:43,180 --> 00:55:48,750 Cuando no se puede ver algo, basta con ver su código fuente. 1094 00:55:48,750 --> 00:55:49,250 DE ACUERDO. 1095 00:55:49,250 --> 00:55:51,912 1096 00:55:51,912 --> 00:55:54,870 ¿Usted quiere saber un trabajo fresco alrededor que vamos a hacer aquí? 1097 00:55:54,870 --> 00:55:55,740 >> AUDIENCIA: ¿Puede usted hacer con mayúsculas? 1098 00:55:55,740 --> 00:55:56,580 Las letras mayúsculas? 1099 00:55:56,580 --> 00:55:58,996 Debido a que usted tiene conseguir horas, y luego conseguir minutos. 1100 00:55:58,996 --> 00:56:02,590 >> ALLISON Buchholtz-AU: Se es conseguir hora y get-- oh. 1101 00:56:02,590 --> 00:56:04,945 Usted trate: estrella de oro. 1102 00:56:04,945 --> 00:56:08,114 1103 00:56:08,114 --> 00:56:09,030 Es todo una prueba, chicos. 1104 00:56:09,030 --> 00:56:13,630 1105 00:56:13,630 --> 00:56:17,330 Te prometo que estaba trabajando antes de la clase. 1106 00:56:17,330 --> 00:56:22,590 >> Bien, pero algo fresco saber es que puede También-- si a veces 1107 00:56:22,590 --> 00:56:26,560 sus archivos externos son conseguir un poco loco, 1108 00:56:26,560 --> 00:56:30,960 también puede simplemente ponerlos directamente aquí, lo que tiende a arreglar las cosas. 1109 00:56:30,960 --> 00:56:35,840 Excepto esto es como realmente feo. 1110 00:56:35,840 --> 00:56:38,050 Por supuesto formatear todo. 1111 00:56:38,050 --> 00:56:41,425 Asegúrese de que todo es bonito. 1112 00:56:41,425 --> 00:56:41,925 DE ACUERDO. 1113 00:56:41,925 --> 00:56:47,200 1114 00:56:47,200 --> 00:56:50,621 >> Yo quería hacer todas las demos fresco, y que están simplemente no hacer ejercicio. 1115 00:56:50,621 --> 00:56:51,555 DE ACUERDO. 1116 00:56:51,555 --> 00:56:53,890 Reloj var Script. 1117 00:56:53,890 --> 00:57:00,350 De todas formas, lo importante es que esta es la manera general 1118 00:57:00,350 --> 00:57:01,870 que usted formatee JavaScript. 1119 00:57:01,870 --> 00:57:04,490 Como puede ver, puede ser muy quisquillosos a veces, 1120 00:57:04,490 --> 00:57:08,780 incluso cuando estaba literalmente trabajar hace dos segundos. 1121 00:57:08,780 --> 00:57:11,820 O hace no dos en segundo lugar, pero muy, muy poco. 1122 00:57:11,820 --> 00:57:16,070 >> Así que le muestre lo que debe ser similar, y para mostrar que no estoy loco, 1123 00:57:16,070 --> 00:57:19,730 y que todo es exactamente mismo, esto es lo que debe ser similar. 1124 00:57:19,730 --> 00:57:27,410 No eres más que va a hacer esta parte superior aquí, y si ve fuente de la página, 1125 00:57:27,410 --> 00:57:32,160 si te fijas, que hizo algunos cosas locas, me simplificó. 1126 00:57:32,160 --> 00:57:35,710 Además, el crédito a Tommy McWilliam, que en realidad 1127 00:57:35,710 --> 00:57:38,810 me ayudó a crear estos ejemplos, que es por eso que sé que trabajan. 1128 00:57:38,810 --> 00:57:41,560 Debido a que Tommy es un maestro JavaScript. 1129 00:57:41,560 --> 00:57:43,180 Pero si nos damos cuenta, tenemos un conjunto. 1130 00:57:43,180 --> 00:57:45,170 Tenemos nuestra función de reloj aquí. 1131 00:57:45,170 --> 00:57:48,450 Esto es todo el código JavaScript que que acabamos de escribir, o parte de ella. 1132 00:57:48,450 --> 00:57:51,470 ¡Acabamos de escribir esta de aquí. 1133 00:57:51,470 --> 00:57:54,260 Y tiene un extra función que sólo se rellena 1134 00:57:54,260 --> 00:57:57,790 poniendo un cero antes de una carta o antes de un número si es 1135 00:57:57,790 --> 00:57:59,412 sólo uno de ellos. 1136 00:57:59,412 --> 00:58:02,120 Así que si te fijas, esto es bastante mucho exactamente lo que acabo de escribir. 1137 00:58:02,120 --> 00:58:06,230 Usted tiene algún reloj variable que tiene nuestro elemento, obtener elementos por ID, 1138 00:58:06,230 --> 00:58:07,252 que es reloj. 1139 00:58:07,252 --> 00:58:08,960 Tenemos nuestro intervalo establecido función, que es 1140 00:58:08,960 --> 00:58:12,670 una función anónima que ejecuta todo esto. 1141 00:58:12,670 --> 00:58:16,940 Hemos algunos partir cadena de HTML que entonces dinámicamente 1142 00:58:16,940 --> 00:58:20,750 generar por tener algunos cabecera h1, concatenando 1143 00:58:20,750 --> 00:58:23,950 con obtener las horas, más nuestro colon, además de conseguir 1144 00:58:23,950 --> 00:58:26,860 los minutos, más otro colon, además de nuestras segundos, 1145 00:58:26,860 --> 00:58:29,330 y finalmente el HTML terminando por ello. 1146 00:58:29,330 --> 00:58:34,210 Y luego actualizamos nuestro reloj dot HTML interno a HTML, 1147 00:58:34,210 --> 00:58:37,640 y actualizamos cada 100 milisegundos. 1148 00:58:37,640 --> 00:58:39,060 DE ACUERDO? 1149 00:58:39,060 --> 00:58:42,470 >> Mira, yo prometo que no estoy loco. 1150 00:58:42,470 --> 00:58:43,440 No lo sé. 1151 00:58:43,440 --> 00:58:47,160 No sé por qué no me quiere. 1152 00:58:47,160 --> 00:58:54,030 Siento que tiene el mismo aspecto, pero parece ser que me odia. 1153 00:58:54,030 --> 00:58:59,600 >> Así que vamos a ver si la tercera ronda va mejor. 1154 00:58:59,600 --> 00:59:00,970 Estamos a punto de ver. 1155 00:59:00,970 --> 00:59:02,910 No estoy seguro de cómo esto va a ir. 1156 00:59:02,910 --> 00:59:06,700 Está todo el mundo, al menos, conseguir que el contras, como sólo el tema general 1157 00:59:06,700 --> 00:59:08,480 de JavaScript, sin embargo? 1158 00:59:08,480 --> 00:59:15,660 Espero que sea al menos útil, más de mostrar que es un poco fastidioso. 1159 00:59:15,660 --> 00:59:21,190 Pero el conjunto de problemas va a ser muy divertido. 1160 00:59:21,190 --> 00:59:22,590 Va a ser grande. 1161 00:59:22,590 --> 00:59:24,820 No va a ser tan aburrido ya que esto, no creo. 1162 00:59:24,820 --> 00:59:28,100 Usted realmente va a llegar a ver cosas muy interesantes. 1163 00:59:28,100 --> 00:59:31,734 >> Así que por último pero no menos importante, vamos a tratar el Twitter. 1164 00:59:31,734 --> 00:59:32,900 Estoy muy asustado ahora, chicos. 1165 00:59:32,900 --> 00:59:35,762 No sé cómo va a ir. 1166 00:59:35,762 --> 00:59:39,930 Pero sólo para darle un poco más sabor, y esto es en realidad 1167 00:59:39,930 --> 00:59:44,190 cadenas de manipular y insumos, lo que van a hacer 1168 00:59:44,190 --> 00:59:50,960 Es decir, si nos damos cuenta aquí con HTML-- éste tiene un poco más-- 1169 00:59:50,960 --> 00:59:57,200 tenemos un área de texto, que corresponde a esta área de texto aquí. 1170 00:59:57,200 --> 00:59:58,030 DE ACUERDO? 1171 00:59:58,030 --> 01:00:00,420 Y eso tiene un Id de texto. 1172 01:00:00,420 --> 01:00:04,520 Fue reformado un poco con un poco de anchura y altura 1173 01:00:04,520 --> 01:00:07,310 que hemos predeterminado, y hemos H1, 1174 01:00:07,310 --> 01:00:11,260 que sólo es nuestra cabecera que representa nuestros caracteres restantes. 1175 01:00:11,260 --> 01:00:14,570 Le dimos un poco de Id de caracteres restantes, 1176 01:00:14,570 --> 01:00:18,660 y luego tenemos una secuencia de comandos aquí, que estoy realmente 1177 01:00:18,660 --> 01:00:20,790 esperando el tiempo de tercero el encanto aquí, chicos. 1178 01:00:20,790 --> 01:00:26,750 >> Así que lo que queremos hacer, en el mismo sentido en general 1179 01:00:26,750 --> 01:00:31,480 que hemos hecho con js RELOJ y el punto de partido js como hemos notado, 1180 01:00:31,480 --> 01:00:35,980 Somos nosotros hemos empezado por el acaparamiento de realidad las cosas que nos importan, ¿verdad? 1181 01:00:35,980 --> 01:00:42,330 Así pues, en este caso, hay dos cosas que nos importan, OK? 1182 01:00:42,330 --> 01:00:47,199 Una cosa que en realidad estamos tipo de buscar en la elaboración y los datos de, 1183 01:00:47,199 --> 01:00:48,990 y una cosa que en realidad estamos cambiando. 1184 01:00:48,990 --> 01:00:52,110 1185 01:00:52,110 --> 01:00:53,730 Así que nuestro HTML. 1186 01:00:53,730 --> 01:01:00,370 Si esta es nuestra página web aquí, lo que es los datos que estamos viendo? 1187 01:01:00,370 --> 01:01:03,860 Va a ser lo el texto en nuestras cajas, ¿verdad? 1188 01:01:03,860 --> 01:01:05,310 Así que lo que escribo aquí. 1189 01:01:05,310 --> 01:01:08,150 Eso es lo que quiero saber, o eso es lo que quiero ver. 1190 01:01:08,150 --> 01:01:10,690 Y lo que va a ser cambiando en nuestra página web? 1191 01:01:10,690 --> 01:01:13,550 1192 01:01:13,550 --> 01:01:14,880 Los caracteres restantes. 1193 01:01:14,880 --> 01:01:19,550 Así que de la misma manera, queremos empezar por inicializar las variables 1194 01:01:19,550 --> 01:01:22,030 que en realidad sostienen a esos elementos. 1195 01:01:22,030 --> 01:01:22,890 DE ACUERDO? 1196 01:01:22,890 --> 01:01:29,930 Así que si tenemos un poco de var esa es nuestra área de texto, 1197 01:01:29,930 --> 01:01:33,681 y tenemos un poco de var que queda. 1198 01:01:33,681 --> 01:01:34,180 Derecho? 1199 01:01:34,180 --> 01:01:36,190 Así que estos van a mantener esas dos cosas. 1200 01:01:36,190 --> 01:01:42,370 Así mismo tipo de cosas, documento dot-- bien, estoy 1201 01:01:42,370 --> 01:01:45,920 va a asegurarse de que esto es va a funcionar esta vez. 1202 01:01:45,920 --> 01:01:49,620 Estoy muy inflexible. 1203 01:01:49,620 --> 01:01:53,310 OK, así que si queremos que nuestra área de texto, de acuerdo 1204 01:01:53,310 --> 01:01:55,710 en nuestro HTML, ¿cuál es nuestro identificador? 1205 01:01:55,710 --> 01:01:56,420 ¿Cuál es nuestra identidad? 1206 01:01:56,420 --> 01:01:59,500 1207 01:01:59,500 --> 01:02:05,540 Es sólo va a ser texto porque esto crea nuestra área de texto, OK, 1208 01:02:05,540 --> 01:02:10,320 y nuestra Id es de texto, por lo que es cómo podemos tomar lo que hay allí. 1209 01:02:10,320 --> 01:02:12,130 Aceptar, punto y coma. 1210 01:02:12,130 --> 01:02:13,940 Yo voy a ser súper precisa al respecto, 1211 01:02:13,940 --> 01:02:16,300 porque quiero que esto funcione esta vez. 1212 01:02:16,300 --> 01:02:22,120 Aceptar, hacer lo mismo, conseguir elemento por Id. 1213 01:02:22,120 --> 01:02:25,970 Realmente me estoy preguntando qué tiene causado los otros dos a estropear. 1214 01:02:25,970 --> 01:02:29,750 Aceptar y luego en éste, ¿qué queremos acceder? 1215 01:02:29,750 --> 01:02:30,760 ¿Cuál es nuestra Id aquí? 1216 01:02:30,760 --> 01:02:33,980 1217 01:02:33,980 --> 01:02:36,261 Tenemos otro Id en nuestro HTML, ¿qué es? 1218 01:02:36,261 --> 01:02:37,552 AUDIENCIA: Caracteres restantes. 1219 01:02:37,552 --> 01:02:39,343 ALLISON Buchholtz-AU: Caracteres restantes. 1220 01:02:39,343 --> 01:02:43,360 1221 01:02:43,360 --> 01:02:44,330 >> DE ACUERDO. 1222 01:02:44,330 --> 01:02:46,010 Fresco. 1223 01:02:46,010 --> 01:02:49,800 Así que sólo voy a escribir esto muy rápido. 1224 01:02:49,800 --> 01:02:53,706 1225 01:02:53,706 --> 01:02:55,330 Yo sólo voy a escribir esto en segundos. 1226 01:02:55,330 --> 01:02:56,190 Así área de texto. 1227 01:02:56,190 --> 01:02:59,550 1228 01:02:59,550 --> 01:03:06,180 Lo que es interesante es B function-- allí un montón de funciones que no sólo 1229 01:03:06,180 --> 01:03:09,690 corresponden a su ratón, pero su teclado. 1230 01:03:09,690 --> 01:03:10,190 DE ACUERDO? 1231 01:03:10,190 --> 01:03:16,540 Así que se puede decir cuando una tecla es presionado, se pueden hacer cosas como esas. 1232 01:03:16,540 --> 01:03:20,450 Así que el que estamos utilizando se llama en clave, lo cual 1233 01:03:20,450 --> 01:03:25,320 dice, "si se ha pulsado una tecla su teclado, cuando el usuario ha levantado 1234 01:03:25,320 --> 01:03:28,064 su dedo de ese botón, y la clave se ha convertido sin prensar, 1235 01:03:28,064 --> 01:03:29,480 entonces vamos a hacer algo ". 1236 01:03:29,480 --> 01:03:29,980 DE ACUERDO? 1237 01:03:29,980 --> 01:03:31,370 Así que esto tiene sentido, ¿verdad? 1238 01:03:31,370 --> 01:03:33,540 Debido a que todos los personajes tecleamos, vamos 1239 01:03:33,540 --> 01:03:36,550 a tener que levantar los dedos fuera de la misma, por lo que cuando la tecla sube, 1240 01:03:36,550 --> 01:03:40,980 podemos conocer a disminuir nuestros caracteres restantes. 1241 01:03:40,980 --> 01:03:44,440 >> Así que tenemos algo en clave arriba, y de la misma manera, 1242 01:03:44,440 --> 01:03:47,480 vamos a decir, "Está bien, cuando hacemos eso, nos 1243 01:03:47,480 --> 01:03:55,110 se va a crear una cierta función que va a tomar e, "en este caso, 1244 01:03:55,110 --> 01:03:58,800 y lo que queremos hacer es calcular el número restante. 1245 01:03:58,800 --> 01:04:02,510 OK, así que vamos a empezar mediante la creación de una variable. 1246 01:04:02,510 --> 01:04:05,830 Así que tenemos algo variable r, eso va a representar 1247 01:04:05,830 --> 01:04:07,720 el número de caracteres que nos queda. 1248 01:04:07,720 --> 01:04:08,890 DE ACUERDO? 1249 01:04:08,890 --> 01:04:14,540 Sabemos que partimos 140, y si queremos saber, 1250 01:04:14,540 --> 01:04:18,360 digamos, la longitud de este cadena que de entrada ha estado, 1251 01:04:18,360 --> 01:04:20,860 ¿Ustedes tienen alguna idea cómo podemos hacer eso? 1252 01:04:20,860 --> 01:04:23,900 Sólo con sede fuera de lo obvio cosas, como si nos quisieran horas, 1253 01:04:23,900 --> 01:04:25,870 solíamos obtener horas. 1254 01:04:25,870 --> 01:04:28,860 Sabemos que nuestro objeto es área de texto, pero podrían ustedes 1255 01:04:28,860 --> 01:04:33,050 pensar en lo que podría venir después de él? 1256 01:04:33,050 --> 01:04:35,280 ¿Alguna idea? 1257 01:04:35,280 --> 01:04:41,730 >> Así que tipo de esta una de menos intuitivo, pero es valor de la longitud del punto. 1258 01:04:41,730 --> 01:04:44,700 Así que sólo me dan un poco de atributo de valor que 1259 01:04:44,700 --> 01:04:46,500 es en realidad la longitud de esta cadena. 1260 01:04:46,500 --> 01:04:50,340 Así que va a decir, "OK, estoy buscando en toda esta cadena en el área de texto, 1261 01:04:50,340 --> 01:04:52,730 y yo voy a decir cuánto tiempo es ". 1262 01:04:52,730 --> 01:04:55,500 Porque si recordamos cadenas en realidad sólo son arrays, 1263 01:04:55,500 --> 01:04:58,110 por lo que sólo podemos tomar la longitud de ellos. 1264 01:04:58,110 --> 01:05:01,860 Así que tenemos que. 1265 01:05:01,860 --> 01:05:04,058 Fresco. 1266 01:05:04,058 --> 01:05:09,360 >> Entonces lo que queremos hacer es que No faltará para permitir al usuario 1267 01:05:09,360 --> 01:05:12,340 a la entrada de más de 140 caracteres, ¿no? 1268 01:05:12,340 --> 01:05:15,610 Porque si decimos como, "oh, sólo tienen esta cantidad restante " 1269 01:05:15,610 --> 01:05:20,522 y luego los deje hacer eso de todos modos, que hemos sido mintiendo. 1270 01:05:20,522 --> 01:05:22,230 Y este es otro cosa que JavaScript 1271 01:05:22,230 --> 01:05:24,530 puede ser muy bueno para, es la validación del usuario 1272 01:05:24,530 --> 01:05:29,062 y asegurarse de que su usuario encaja dentro de las reglas 1273 01:05:29,062 --> 01:05:30,270 que usted ha proporcionado a ellos. 1274 01:05:30,270 --> 01:05:36,020 Así que si quieres hacer cosas como hacer Asegúrese que la entrada a alguien de su dirección de correo electrónico, 1275 01:05:36,020 --> 01:05:40,242 o asegurarse de que cuando se Introduce dos contraseñas, coincidían. 1276 01:05:40,242 --> 01:05:41,200 JavaScript puede hacer eso. 1277 01:05:41,200 --> 01:05:44,010 Se podría hacer algo como, "cuando se envía el formulario, "o similar, 1278 01:05:44,010 --> 01:05:48,170 "Cuando botón Enviar formulario es se hace clic, todas estas cosas ". 1279 01:05:48,170 --> 01:05:49,670 Y podemos hacer eso JavaScript. 1280 01:05:49,670 --> 01:05:52,680 Así que eso es justo lo que vamos a hacer aquí. 1281 01:05:52,680 --> 01:05:57,810 >> Entonces, ¿qué podría ser una manera de comprobar si que han pasado más de 140 caracteres? 1282 01:05:57,810 --> 01:06:03,310 ¿Qué va a pasar con nuestro valor de r si lo intentan? 1283 01:06:03,310 --> 01:06:04,760 Va a ser negativo, ¿no? 1284 01:06:04,760 --> 01:06:07,380 O que va a ser menos que o igual a cero. 1285 01:06:07,380 --> 01:06:13,690 Así que podemos usar una si es al igual que todo lo demás. 1286 01:06:13,690 --> 01:06:14,270 DE ACUERDO? 1287 01:06:14,270 --> 01:06:20,480 Y tenemos algunos puntos área de texto valor, y lo que estamos haciendo aquí 1288 01:06:20,480 --> 01:06:29,940 es sólo estamos cutting-- ¿qué es? 1289 01:06:29,940 --> 01:06:30,900 Lo siento. 1290 01:06:30,900 --> 01:06:32,732 Éste, que sólo quieren volver falsa. 1291 01:06:32,732 --> 01:06:34,030 Me confundí. 1292 01:06:34,030 --> 01:06:36,560 Todo agotado de las cosas que no trabaja. 1293 01:06:36,560 --> 01:06:40,010 Aceptar, sólo queremos return false, y luego 1294 01:06:40,010 --> 01:06:44,160 desee mostrar la caracteres restantes, ¿verdad? 1295 01:06:44,160 --> 01:06:48,720 Así que con el reloj, lo hicimos algo con HTML interno, ¿no? 1296 01:06:48,720 --> 01:06:52,070 ¿Dónde lo ponemos igual a algún variables, así que lo que podríamos hacer aquí? 1297 01:06:52,070 --> 01:06:54,590 1298 01:06:54,590 --> 01:06:57,750 ¿Qué estamos cambiando el HTML interno? 1299 01:06:57,750 --> 01:07:02,843 1300 01:07:02,843 --> 01:07:03,780 >> AUDIENCIA: restante? 1301 01:07:03,780 --> 01:07:05,738 >> ALLISON Buchholtz-AU: Estamos cambiando restante. 1302 01:07:05,738 --> 01:07:09,217 1303 01:07:09,217 --> 01:07:11,300 Muy bien, y lo que tenemos , desea configurar igual? 1304 01:07:11,300 --> 01:07:14,440 1305 01:07:14,440 --> 01:07:18,437 Va a ser r, ya que deberían ser nuestros caracteres restantes. 1306 01:07:18,437 --> 01:07:19,600 DE ACUERDO? 1307 01:07:19,600 --> 01:07:26,060 Así que estoy muy nervioso para ver si esto funciona ahora, pero ya veremos. 1308 01:07:26,060 --> 01:07:28,960 1309 01:07:28,960 --> 01:07:29,460 Deja esto. 1310 01:07:29,460 --> 01:07:34,690 1311 01:07:34,690 --> 01:07:37,700 Eso es muy rápido. 1312 01:07:37,700 --> 01:07:38,970 [Inaudible] en Aceptar. 1313 01:07:38,970 --> 01:07:44,574 1314 01:07:44,574 --> 01:07:45,990 Una vez más, yo sólo voy a mostrar. 1315 01:07:45,990 --> 01:07:49,430 Por alguna razón, la mía no decide trabajar, 1316 01:07:49,430 --> 01:07:53,354 pero lo que yo te mostraré es que este es-- oh yo tenía que poner esto en. 1317 01:07:53,354 --> 01:07:57,470 Bien, nos damos cuenta de la misma clase de cosa aquí, para obtener el área de texto. 1318 01:07:57,470 --> 01:08:01,070 >> Además, si usted aviso chico, si hay alguna vez algo que quieres hacer, 1319 01:08:01,070 --> 01:08:04,080 y usted no sabe cómo hacerlo , simplemente haga clic en Ver código fuente de página, 1320 01:08:04,080 --> 01:08:06,632 y que van a decir. 1321 01:08:06,632 --> 01:08:07,840 A veces va a ser encriptado. 1322 01:08:07,840 --> 01:08:11,147 Para su conjunto de procesadores, codificamos todo, por lo que sólo se parece un galimatías. 1323 01:08:11,147 --> 01:08:13,480 Pero si alguna vez hay una realidad sitio web muy interesante que te gusta, 1324 01:08:13,480 --> 01:08:17,729 si sólo clic en Ver código fuente de página, que va a decir cómo hacerlo. 1325 01:08:17,729 --> 01:08:20,770 Así que de nuevo, trabajar más inteligentemente, no más difícil. 1326 01:08:20,770 --> 01:08:24,250 Y como se puede ver aquí, todos estas cosas son lo mismo. 1327 01:08:24,250 --> 01:08:31,930 este de aquí sólo requiere un poco subcadena que, no recuerdo exactamente lo que esto hace. 1328 01:08:31,930 --> 01:08:36,980 Pero, obviamente, lleva algún subcadena del valor de cero a diez, 1329 01:08:36,980 --> 01:08:41,540 y devuelve falso lo que se debe dejar de al usuario de introducir más, 1330 01:08:41,540 --> 01:08:46,040 y luego actualiza obviamente el código HTML interno allí. 1331 01:08:46,040 --> 01:08:47,410 >> Fresco. 1332 01:08:47,410 --> 01:08:53,000 Así grandes tomar las escapadas a partir de hoy, experimento, mirar el código fuente 1333 01:08:53,000 --> 01:08:58,359 porque va a ayudar mucho, y todo el mundo, a veces JavaScript 1334 01:08:58,359 --> 01:09:03,200 puede ser difícil de trabajar y no siempre funcionan de la manera que usted espera que, 1335 01:09:03,200 --> 01:09:05,700 pero sólo seguir intentando porque te prometo que lo hará. 1336 01:09:05,700 --> 01:09:08,376 Te prometo todos estos ejemplos estaban trabajando antes de la clase. 1337 01:09:08,376 --> 01:09:09,750 No entiendo lo que pasó. 1338 01:09:09,750 --> 01:09:13,069 Yo, literalmente, tengo todo lo mismo. 1339 01:09:13,069 --> 01:09:17,660 >> Una cosa más que sólo quiero mostrar chicos que pueden ser super útil 1340 01:09:17,660 --> 01:09:21,630 se en-- lo que estaba trabajando antes? 1341 01:09:21,630 --> 01:09:23,935 Tenemos parte en el trabajo, ¿no? 1342 01:09:23,935 --> 01:09:26,569 Creo que sí. 1343 01:09:26,569 --> 01:09:27,069 Sí. 1344 01:09:27,069 --> 01:09:27,630 Lo hicimos. 1345 01:09:27,630 --> 01:09:28,250 Impresionante. 1346 01:09:28,250 --> 01:09:31,189 OK, así que lo único que ustedes deben saber 1347 01:09:31,189 --> 01:09:33,340 es el registro de la consola de la que hablé. 1348 01:09:33,340 --> 01:09:37,040 Así consolar registro de puntos de hola. 1349 01:09:37,040 --> 01:09:40,430 Así que esto es una especie de la Equivalente JavaScript de printf. 1350 01:09:40,430 --> 01:09:42,810 Así que si alguna vez quieres inspeccionar las variables 1351 01:09:42,810 --> 01:09:49,649 o ver lo que está pasando allí, lo que que puede hacer es, si inspeccionamos elemento, 1352 01:09:49,649 --> 01:09:51,899 es lo que se quiere ir a, y te vas a la consola, 1353 01:09:51,899 --> 01:09:53,770 verás que imprime hola. 1354 01:09:53,770 --> 01:09:55,750 >> Así que podríamos tenerlo imprimir todo lo que queríamos. 1355 01:09:55,750 --> 01:10:04,170 Si queríamos que imprime fondo fondo del punto del estilo del punto, 1356 01:10:04,170 --> 01:10:08,454 debemos ser capaces de ver el RGB triples que aparece. 1357 01:10:08,454 --> 01:10:11,140 O no. 1358 01:10:11,140 --> 01:10:13,520 Yo recuerdo exactamente cómo imprimir una variable así, 1359 01:10:13,520 --> 01:10:17,249 pero usted debería ser capaz de imprimir cosas por el estilo. 1360 01:10:17,249 --> 01:10:19,040 Eso será muy útil para su conjunto de procesadores cuando 1361 01:10:19,040 --> 01:10:23,330 usted está tratando de manipular coordina o lo que sea. 1362 01:10:23,330 --> 01:10:25,270 Así que ellos también cambian esta pieza en clase. 1363 01:10:25,270 --> 01:10:30,750 Esto es diferente de los últimos años, por lo sólo sea agradable a sus TFS, o la TFS 1364 01:10:30,750 --> 01:10:36,350 en horas de oficina en lugar, porque somos tipo de aprendizaje junto con ustedes. 1365 01:10:36,350 --> 01:10:41,230 Pero el registro de la consola era super, super útil para JavaScript año pasado. 1366 01:10:41,230 --> 01:10:42,740 Así que me encanta. 1367 01:10:42,740 --> 01:10:43,780 Aprenda cómo usarlo. 1368 01:10:43,780 --> 01:10:49,026 Es más fácil de usar que el BGF, de modo que debe ser por lo menos un punto más. 1369 01:10:49,026 --> 01:10:50,650 Pero gracias chicos están dando conmigo. 1370 01:10:50,650 --> 01:10:53,400 Siento que mi ejemplos por alguna razón 1371 01:10:53,400 --> 01:10:55,410 simplemente no quería cooperar conmigo, pero yo 1372 01:10:55,410 --> 01:11:01,010 espero que ayudó tipo de conseguirle un poco más en la zona de JavaScript. 1373 01:11:01,010 --> 01:11:04,980 Y enviarme todas sus preguntas para la próxima semana, así que puede ser reparado súper, 1374 01:11:04,980 --> 01:11:09,420 y voy a traer dulces e incluso adicional dulces porque esto era ridículo. 1375 01:11:09,420 --> 01:11:14,000 Pero ustedes son grandes, y tener una semana increíble. 1376 01:11:14,000 --> 01:11:15,584