1 00:00:00,000 --> 00:00:00,380 2 00:00:00,380 --> 00:00:03,000 >> ALTAVOZ 1: Ahora, en ese último ejemplo, Recordamos que hemos intercalados algunos 3 00:00:03,000 --> 00:00:07,170 El código JavaScript dentro de mi HTML, específicamente, dentro del valor de 4 00:00:07,170 --> 00:00:10,460 el atributo llamado On Enviar para esa etiqueta de formulario. 5 00:00:10,460 --> 00:00:12,850 Ahora para las páginas pequeñas, esto no es una cosa muy importante. 6 00:00:12,850 --> 00:00:15,950 Pero a medida que una página web se hace más largo y más compleja, simplemente poniendo su 7 00:00:15,950 --> 00:00:19,660 El código JavaScript de aquí para allá en el interior del valor de los atributos no es el 8 00:00:19,660 --> 00:00:20,830 mejor diseño. 9 00:00:20,830 --> 00:00:23,440 Mejor si nos factor que salir y al menos, lo puso dentro de 10 00:00:23,440 --> 00:00:25,200 la etiqueta de script en el centro. 11 00:00:25,200 --> 00:00:26,080 >> ¿Cómo hacer esto? 12 00:00:26,080 --> 00:00:30,040 Bueno, vamos a volver a mi forma de etiquetas y primero eliminar este atributo y su 13 00:00:30,040 --> 00:00:31,780 valorar por completo. 14 00:00:31,780 --> 00:00:35,730 Entonces aquí, en lugar de definir una función llamada Greet, vamos a colgar en 15 00:00:35,730 --> 00:00:39,405 a la línea de código que en última instancia, que todavía quieren ejecutar y reemplazar 16 00:00:39,405 --> 00:00:41,560 la función Greet de la siguiente manera. 17 00:00:41,560 --> 00:00:48,190 Document.get Element By ID citar demostración fin de cita - 18 00:00:48,190 --> 00:00:52,410 donde demo, recuerdo, es la única identificador de la forma en sí misma - 19 00:00:52,410 --> 00:00:56,600 punto en presentar, que recordar es el nombre del controlador de eventos en el que 20 00:00:56,600 --> 00:00:57,710 estamos interesados. 21 00:00:57,710 --> 00:01:01,990 Y vamos a asignar que el manejador de presentar el valor que en realidad es un 22 00:01:01,990 --> 00:01:03,740 funcionar en sí. 23 00:01:03,740 --> 00:01:06,390 >> Ahora noto que no soy en realidad llamar a una función aquí. 24 00:01:06,390 --> 00:01:10,650 Estoy en vez de definir un anónimo, conocido de otra manera como una función lambda, 25 00:01:10,650 --> 00:01:14,100 especificando entre estas llaves un montón de código que debe 26 00:01:14,100 --> 00:01:15,490 en realidad ser ejecutado. 27 00:01:15,490 --> 00:01:18,500 En concreto, el código que me gustaría a ejecutar es esa línea que tenía 28 00:01:18,500 --> 00:01:23,370 antes y, a continuación, vamos a añadir a ese return false para que esta forma no es 29 00:01:23,370 --> 00:01:26,950 presentado en última instancia, para poner fin a web remoto servidor de la manera tradicional. 30 00:01:26,950 --> 00:01:30,345 >> Ahora vamos a guardar el archivo, abrirlo en un navegador, y ver qué pasa. 31 00:01:30,345 --> 00:01:33,050 32 00:01:33,050 --> 00:01:39,800 http://localhost/dom-1.html. 33 00:01:39,800 --> 00:01:43,060 Vamos ahora escriba en mi nombre, David, en Enviar. 34 00:01:43,060 --> 00:01:46,900 Y nada parece haber sucedido excepto la URL de mi página parece 35 00:01:46,900 --> 00:01:52,580 han cambiado, como si el formulario fue realidad presentada en el mismo archivo. 36 00:01:52,580 --> 00:01:53,870 >> Ahora ¿por qué podría ser? 37 00:01:53,870 --> 00:01:55,340 Bueno, yo necesito algo más de información. 38 00:01:55,340 --> 00:01:58,700 Así que vamos a seguir adelante y abrir Chrome Herramientas de desarrollo para que yo pueda realmente 39 00:01:58,700 --> 00:02:01,440 mirar a la ventana de la consola para ver si he hecho algo mal. 40 00:02:01,440 --> 00:02:03,330 Puedo acceder a esa vía un par de maneras. 41 00:02:03,330 --> 00:02:07,250 Una de ellas es a través de este menú aquí, a continuación, en Herramientas, y luego hacia abajo para 42 00:02:07,250 --> 00:02:08,509 Herramientas de Desarrollo. 43 00:02:08,509 --> 00:02:12,890 >> Y note aquí en la ficha Consola, Hay un error de tipo no detectada, no se puede 44 00:02:12,890 --> 00:02:15,390 establecer la propiedad de presentar de null. 45 00:02:15,390 --> 00:02:16,900 Ahora ¿por qué podría ser? 46 00:02:16,900 --> 00:02:21,380 Bueno en mi código fuente aquí, aviso que en Enviar creo que es un 47 00:02:21,380 --> 00:02:25,360 propiedad del elemento cuyo identificador único es de demostración. 48 00:02:25,360 --> 00:02:27,810 Un elemento, de nuevo, es sólo un nodo en un árbol. 49 00:02:27,810 --> 00:02:30,870 >> Así que parece que mi navegador no pensar que ese elemento 50 00:02:30,870 --> 00:02:32,500 o existe nodo todavía. 51 00:02:32,500 --> 00:02:33,790 Y, de hecho, no lo hace. 52 00:02:33,790 --> 00:02:37,690 Recordemos que una página web se analiza o leer por un navegador web, de arriba abajo, 53 00:02:37,690 --> 00:02:38,430 izquierda a derecha. 54 00:02:38,430 --> 00:02:41,810 Y así, cuando el código JavaScript es encontrado, por lo general, se ejecuta 55 00:02:41,810 --> 00:02:42,700 enseguida. 56 00:02:42,700 --> 00:02:46,460 >> Pero en este caso, ni siquiera hemos conseguido sin embargo, a la parte de la libertad, la 57 00:02:46,460 --> 00:02:51,100 HTML, en el que dicho formulario con un único demostración identificador ha sido declarada. 58 00:02:51,100 --> 00:02:54,320 Así que estamos tratando de ejecutar mi El código JavaScript antes de ese nodo, incluso 59 00:02:54,320 --> 00:02:58,530 existe en el árbol, que, por supuesto, es problemático porque entonces, sin duda, 60 00:02:58,530 --> 00:03:01,390 el propio elemento será nulo en ese punto en el tiempo. 61 00:03:01,390 --> 00:03:02,390 >> Entonces, ¿cómo solucionarlo? 62 00:03:02,390 --> 00:03:03,810 Bueno, tenemos un par de soluciones. 63 00:03:03,810 --> 00:03:07,200 Pero vamos a intentar el más simple mediante la reubicación mi etiqueta de script de la cabeza 64 00:03:07,200 --> 00:03:11,560 etiquetar a mi cuerpo, pero en concreto, hacia la parte inferior del cuerpo de mi página para que 65 00:03:11,560 --> 00:03:14,170 que está por debajo de los nodos y preguntas. 66 00:03:14,170 --> 00:03:19,930 En concreto, vamos a resaltar y corte la etiqueta de apertura y cierre de etiquetas para el script 67 00:03:19,930 --> 00:03:24,720 y reubicar todo ese bloque de código a la parte inferior del archivo aquí. 68 00:03:24,720 --> 00:03:27,690 >> Ahora bien, esto no es necesariamente el más limpio diseñar, pero al menos lo hará 69 00:03:27,690 --> 00:03:29,530 hacer cumplir el orden correcto de las operaciones. 70 00:03:29,530 --> 00:03:31,495 Vamos a guardar el archivo y vuelva a cargar en mi navegador. 71 00:03:31,495 --> 00:03:34,620 72 00:03:34,620 --> 00:03:40,240 Vamos a cargar la página, vuelva a ingresar mi nombre, y allí, Hola David está de vuelta. 73 00:03:40,240 --> 00:03:42,784