1 00:00:12,270 --> 00:00:16,080 Vamos a realizar a continuación el ejercicio de introducción a JavaScript. 2 00:00:16,290 --> 00:00:17,320 Están listos. 3 00:00:17,440 --> 00:00:20,490 Vamos. 4 00:00:21,120 --> 00:00:26,250 El objetivo del ejercicio es crear un proyecto para iniciar con JavaScript y al finalizar deberemos 5 00:00:26,250 --> 00:00:32,620 observar lo siguiente según se muestra como primer paso vamos a crear un proyecto. 6 00:00:32,630 --> 00:00:38,630 Este proyecto se va a llamar introduccion JavaScript y lo depositamos en la ruta mostrada y damos clic 7 00:00:38,690 --> 00:00:39,470 en Finalizar 8 00:00:44,960 --> 00:00:47,740 agregamos un archivo HTML. 9 00:00:48,170 --> 00:00:55,190 Este nuevo archivo se va a llamar Patch 1 es decir Página 1 y damos clic en Finalizar esta página va 10 00:00:55,190 --> 00:01:04,680 a estar a nivel raíz por lo tanto el campo de fólder está vacío y damos clic en Finalizar como siguiente 11 00:01:04,680 --> 00:01:12,520 paso vamos a agregar un archivo este va a ser un archivo de tipo JS Es decir un archivo JavaScript file. 12 00:01:12,780 --> 00:01:20,690 Así que sobre nuestro proyecto a nivel raíz vamos a dar clic derecho new Java Script fila y así es como 13 00:01:20,690 --> 00:01:24,110 vamos a crear y agregar nuestros archivos de tipo JS 14 00:01:29,010 --> 00:01:33,210 así que agregamos un archivo J.S y este archivo se llama funciones. 15 00:01:33,270 --> 00:01:39,090 Podemos observar que en automático le agrega la extensión punto J.V y también nos vamos a depositar 16 00:01:39,120 --> 00:01:44,850 a nivel raíz así que el campo de folder está vacío y damos clic en Finalizar 17 00:01:48,660 --> 00:01:54,660 como siguiente paso vamos a modificar nuestro archivo índex punto HTML y vamos a agregar lo siguiente 18 00:01:54,930 --> 00:01:57,690 agregamos un doc html. 19 00:01:57,690 --> 00:02:02,740 Abrimos nuestro documento y en el cabecero vamos a agregar un meta. 20 00:02:03,000 --> 00:02:08,550 El título de ejemplo lleva a excluir y esto va a ser lo nuevo que vamos a agregar para poder trabajar 21 00:02:08,550 --> 00:02:09,380 con JavaScript. 22 00:02:09,420 --> 00:02:14,950 Similar al trabajo con las hojas de estilo cuando estamos trabajando con JavaScript podemos agregarlo 23 00:02:15,000 --> 00:02:18,420 de diferentes maneras ya sea en un archivo externo. 24 00:02:18,420 --> 00:02:25,110 También podemos agregar código JavaScript directamente en el cabecero de nuestro documento HTML y también 25 00:02:25,110 --> 00:02:32,000 podemos agregar directamente en el cuerpo o en algunas etiquetas de nuestros elementos HTML. 26 00:02:32,020 --> 00:02:37,200 Sobre todo cuando estamos trabajando con eventos pero en este caso vamos a regarlo de la siguiente manera 27 00:02:37,320 --> 00:02:44,000 directamente en el cabecero agregamos la etiqueta de script e indicamos que el tipo va a ser text diagonal 28 00:02:44,070 --> 00:02:49,710 JavaScript y mandamos a llamar directamente a la función de alerta. 29 00:02:49,970 --> 00:02:55,970 Básicamente como su nombre lo dice esta función de alerta es para mostrar una alerta en el navegador 30 00:02:55,970 --> 00:03:03,840 web así que lo que estamos mostrando es la alerta de Hola mundo pero también como hemos comentado por 31 00:03:03,840 --> 00:03:10,710 medio de JavaScript podemos generar código HTML de manera dinámica así que podemos acceder al Dom es 32 00:03:10,710 --> 00:03:17,070 decir al Document Object Model que ya hemos comentado anteriormente y a través del objeto document es 33 00:03:17,070 --> 00:03:23,010 precisamente que podemos acceder a este objeto de tipo Dom y por medio de la variable document la cual 34 00:03:23,220 --> 00:03:28,110 podemos acceder de manera inmediata cuando estamos trabajando con JavaScript. 35 00:03:28,110 --> 00:03:35,430 Simplemente escribimos document punto right y esto va a agregar contenido HTML directamente a nuestra 36 00:03:35,430 --> 00:03:41,370 página y lo va a mostrar en nuestro navegador así que escribimos document punto right y agregamos una 37 00:03:41,370 --> 00:03:42,020 cadena. 38 00:03:42,060 --> 00:03:47,340 Podemos observar que una cadena la podemos manejar con doble comilla pero también la podemos manejar 39 00:03:47,340 --> 00:03:51,450 con comilla simple y agregamos el siguiente código HTML. 40 00:03:51,450 --> 00:03:57,630 Esto es básicamente una cadena pero podemos observar que ya estamos manejando también etiquetas HTML 41 00:03:58,230 --> 00:04:04,710 así que podemos agregar un título H1 y dentro de esa etiqueta H1 agregamos la cadena Hola Mundo desde 42 00:04:04,710 --> 00:04:10,860 javascript y cerramos esta etiqueta H1 y también cerramos la etiqueta de script. 43 00:04:11,290 --> 00:04:18,430 Cerramos el cabecero y dentro de nuestro body lo que vamos a hacer es agregar un link hacia la página 44 00:04:18,530 --> 00:04:25,420 1.La HTML ya que también vamos a agregar cierto código en esta página 1 para manejar JavaScript desde 45 00:04:25,420 --> 00:04:30,090 un archivo cerramos el body y cerramos nuestro cabecero. 46 00:04:30,090 --> 00:04:36,300 Sin embargo en esta primera página de índex punto HTML lo que estamos haciendo es agregar directamente 47 00:04:36,300 --> 00:04:42,270 JavaScript en nuestro cabecero y desde este cabecero hicimos dos cosas agregamos la etiqueta de script. 48 00:04:42,270 --> 00:04:48,330 Posteriormente mandamos una alerta por medio de la función Alert la cual también podemos acceder directamente 49 00:04:48,330 --> 00:04:55,980 con JavaScript y también accedimos al objeto documento y con este objeto podemos escribir código HTML 50 00:04:56,190 --> 00:04:58,900 a la salida de nuestro documento HTML. 51 00:04:59,010 --> 00:05:02,480 Así que estas son las dos cosas que hicimos en este primer documento. 52 00:05:02,610 --> 00:05:09,540 Ahora vamos a trabajar con nuestro documento base 1.ª HTML lo que vamos a agregar en este documento 53 00:05:09,540 --> 00:05:15,930 lo siguiente agregamos el Doc Taipe la etiqueta de HTML y también agregamos nuestro cabecero como ya 54 00:05:15,930 --> 00:05:16,890 conocemos. 55 00:05:16,890 --> 00:05:22,600 Agregamos el título y el título va a ser saludos desde javascript y lo que vamos a hacer. 56 00:05:22,660 --> 00:05:29,620 Similar al manejo de hojas de estilo es que en este caso en esta página de 1.ª HTML lo que vamos a hacer 57 00:05:29,680 --> 00:05:33,510 es agregar un link hacia el archivo de JavaScript. 58 00:05:33,610 --> 00:05:39,880 En este caso hacia el archivo de funciones punto JS que ya hemos creado anteriormente y para poder agregar 59 00:05:39,910 --> 00:05:45,400 este link lo que vamos a hacer es utilizar la etiqueta de script posteriormente indicamos el tipo que 60 00:05:45,400 --> 00:05:51,850 va a ser un text JavaScript y posteriormente utilizamos el atributo de sours e indicamos que el archivo 61 00:05:51,850 --> 00:05:57,460 se llama funciones punto JS ya que este es el archivo que hemos creado anteriormente de tipo JavaScript 62 00:05:57,840 --> 00:06:03,970 y simplemente cerramos también nuestra etiqueta de script y con eso cerramos nuestro cabecero. 63 00:06:03,970 --> 00:06:09,190 Con esto ya estamos indicando la ubicación de nuestro archivo de JavaScript y con esto en automático 64 00:06:09,310 --> 00:06:15,430 ya podremos hacer uso directamente de las funciones que agreguemos a este archivo de funciones punto. 65 00:06:18,390 --> 00:06:24,210 Ahora lo que vamos a hacer es lo siguiente en nuestra etiqueta de Bodhi lo que vamos a hacer es utilizar 66 00:06:24,270 --> 00:06:25,680 el método holdout. 67 00:06:25,770 --> 00:06:30,600 Este método básicamente se manda llamar cuando se carga a nuestra página HTML. 68 00:06:30,690 --> 00:06:36,540 Precisamente por eso su nombre de un loft es decir cuando se está cargando la página y lo que vamos 69 00:06:36,540 --> 00:06:42,240 a hacer es lo siguiente En este atributo de López podemos mandar a llamar la función de JavaScript y 70 00:06:42,270 --> 00:06:43,860 separando por un punto y coma. 71 00:06:43,890 --> 00:06:47,160 Podemos mandar a llamar varias funciones de JavaScript. 72 00:06:47,430 --> 00:06:54,120 Así que en este caso estamos mandonas llamar la función de saluda y por ello utilizamos los paréntesis 73 00:06:54,180 --> 00:07:00,150 ya que es una función y posteriormente separada por punto y coma mandamos a llamar otra función. 74 00:07:00,150 --> 00:07:06,120 La función de escribe mensaje y también por lo tanto estamos utilizando paréntesis ya que también es 75 00:07:06,120 --> 00:07:13,560 una función y cerramos con punto y coma así que cuando se carga el cuerpo de este archivo HTML se mandan 76 00:07:13,560 --> 00:07:14,040 a llamar. 77 00:07:14,040 --> 00:07:19,800 Estas dos funciones de JavaScript la función de saluda y la función de escribe mensaje. 78 00:07:19,800 --> 00:07:27,800 Estas dos funciones las vamos a agregar posteriormente en el archivo de funciones punto JS Y agregamos 79 00:07:27,860 --> 00:07:34,300 el siguiente comentario El texto HTML de elemento H1 se escribe de manera dinámica. 80 00:07:34,430 --> 00:07:41,270 Pero para poder escribir este contenido de manera dinámica vamos a agregar la etiqueta H1 y con JavaScript 81 00:07:41,480 --> 00:07:48,530 es muy común que agreguemos identificadores a nuestros elementos HTML para que de manera dinámica podamos 82 00:07:48,590 --> 00:07:55,160 acceder a estos elementos y podamos agregar contenido por ejemplo en este caso de manera dinámica al 83 00:07:55,160 --> 00:07:58,220 texto de este elemento H1. 84 00:07:58,220 --> 00:08:05,540 Por ello es que le estamos agregando el identificador el Heydi de mensaje HTML esto para que podamos 85 00:08:05,540 --> 00:08:11,510 acceder como hemos comentado de manera dinámica a este elemento H1 y lo que vamos a hacer es que una 86 00:08:11,510 --> 00:08:18,050 vez que podamos acceder con JavaScript a este elemento lo vamos a recuperar y le vamos a escribir información 87 00:08:18,170 --> 00:08:25,340 a este elemento H1 y cerramos el body y en la etiqueta HTML de nuestro documento vamos a ver ahora el 88 00:08:25,340 --> 00:08:28,670 código de nuestro archivo funciones punto J.V. 89 00:08:28,730 --> 00:08:34,340 Sin embargo debemos recordar estos elementos ya que sabemos que vamos a recuperar y modificar a continuación 90 00:08:34,580 --> 00:08:43,350 con ayuda de JavaScript a continuación vamos a modificar nuestro archivo funciones punto JS Y de esta 91 00:08:43,350 --> 00:08:49,470 manera es como podemos agregar comentarios a nuestros documentos de JavaScript lo que hacemos es diagonal 92 00:08:49,560 --> 00:08:56,070 doble asterisco y cerramos el comentario con asterisco diagonal o también podemos utilizar la doble 93 00:08:56,070 --> 00:08:56,650 barra. 94 00:08:56,700 --> 00:09:01,590 Si este comentario únicamente es de una sola línea así que este es un tipo de comentario para varias 95 00:09:01,590 --> 00:09:05,190 líneas y este es un tipo de comentario para una sola línea. 96 00:09:05,220 --> 00:09:07,450 Esto es muy similar al lenguaje Java. 97 00:09:07,500 --> 00:09:12,420 Posteriormente vamos a declarar una función para declarar una función en JavaScript. 98 00:09:12,510 --> 00:09:18,720 Podemos utilizar directamente la palabra reservada función así que declaramos lo siguiente función y 99 00:09:18,750 --> 00:09:20,560 el nombre de nuestro método. 100 00:09:20,730 --> 00:09:26,880 En este caso este método se llama saluda y no recibe ningún parámetro por lo tanto estamos definiendo 101 00:09:26,940 --> 00:09:29,220 esta función sin parámetros. 102 00:09:29,220 --> 00:09:35,310 Simplemente abrimos y cerramos paréntesis posteriormente vamos a agregar el cuerpo de nuestra función 103 00:09:35,550 --> 00:09:42,590 y para ello utilizamos llaves y empezamos a agregar el siguiente código al cuerpo de nuestra función. 104 00:09:42,710 --> 00:09:49,400 En este caso esta función únicamente va a mandar una alerta cuando se manda llamar y va a desplegar 105 00:09:49,460 --> 00:09:55,890 la alerta de Hola mundo y con eso cerramos también nuestra función y con esta llave cerramos nuestra 106 00:09:55,890 --> 00:09:56,790 función. 107 00:09:56,970 --> 00:10:02,100 Vamos a agregar nuestra segunda función que se llama escribe un mensaje así que escribimos function 108 00:10:02,370 --> 00:10:07,560 posteriormente en nombre de la función que se llama escribir el mensaje y esta función tampoco recibe 109 00:10:07,560 --> 00:10:11,200 ningún parámetro por lo tanto simplemente abrimos y cerramos paréntesis. 110 00:10:11,340 --> 00:10:17,130 Abrimos el cuerpo de nuestra función y agregamos lo siguiente Lo que vamos a hacer es utilizar nuestro 111 00:10:17,130 --> 00:10:18,450 objeto de tipo Dom. 112 00:10:18,450 --> 00:10:20,880 En este caso el objeto document. 113 00:10:20,880 --> 00:10:28,680 Posteriormente vamos a recuperar el elemento llamado Mensaje HTML para poder recuperar este elemento 114 00:10:28,680 --> 00:10:30,080 por medio de JavaScript. 115 00:10:30,120 --> 00:10:37,050 Vamos a utilizar el método GET Element Heydi e indicamos cuál es el elemento que queremos recuperar 116 00:10:37,050 --> 00:10:38,630 de tipo HTML. 117 00:10:38,700 --> 00:10:45,270 Básicamente con esto es como si estuviéramos posicionando en nuestro elemento HTML y estuviéramos listos 118 00:10:45,270 --> 00:10:45,990 para escribir. 119 00:10:46,170 --> 00:10:51,800 Sin embargo para poder agregar información vamos a utilizar en este caso una propiedad. 120 00:10:51,810 --> 00:10:58,680 La propiedad se llama Imer HTML así que escribimos punto immer HTML y con esto. 121 00:10:58,680 --> 00:11:05,220 Ahora si ya estamos posicionados para escribir y agregar contenido HTML y lo que vamos a hacer es agregar 122 00:11:05,220 --> 00:11:11,850 simplemente saludo desde archivo JavaScript pero aquí también podríamos agregar código HTML así que 123 00:11:11,850 --> 00:11:17,910 esta es la cadena que vamos a agregar a nuestro elemento de tipo H1 llamado Mensaje HTML. 124 00:11:18,090 --> 00:11:21,760 Pero podemos observar que ya todos lo estamos haciendo de manera dinámica. 125 00:11:21,840 --> 00:11:27,060 Esta cadena se podría generar de manera dinámica sin ningún problema así que básicamente lo que estamos 126 00:11:27,060 --> 00:11:34,890 haciendo es agregando una nueva cadena a nuestro elemento de tipo H1 llamado Mensaje HTML así que esta 127 00:11:34,890 --> 00:11:41,640 es la sintaxis para que podamos agregar información de manera dinámica a nuestros elementos HTML. 128 00:11:41,640 --> 00:11:47,190 Lo importante aquí es que tenemos que agregar un identificador para que podamos acceder por medio de 129 00:11:47,190 --> 00:11:53,850 la función Get Element Bayardi que se encuentra en nuestro objeto documento y con esto cerramos nuestra 130 00:11:53,850 --> 00:12:00,450 función recuerden que en cada uno de los archivos pueden dar clic para poder acceder al contenido del 131 00:12:00,450 --> 00:12:01,890 código de cada archivo. 132 00:12:01,950 --> 00:12:07,770 Sin embargo se le solicita codificar línea a línea para que quede claro este ejercicio de introducción 133 00:12:07,800 --> 00:12:08,460 a JavaScript 134 00:12:12,750 --> 00:12:13,650 como siguiente paso. 135 00:12:13,680 --> 00:12:19,320 Ejecutamos nuestro proyecto y podemos observar que cuando se carga nuestra página nos manda una alerta 136 00:12:19,650 --> 00:12:26,550 y esta alerta dice Hola Mundo y damos clic en Aceptar y una vez que damos clic en Aceptar. 137 00:12:26,560 --> 00:12:32,290 Entonces se carga la página completamente y nos muestra Hola Mundo desde javascript y un link hacia 138 00:12:32,290 --> 00:12:38,020 la página web y si damos clic en el link hacia la página 1 también nos va a mostrar una alerta y nos 139 00:12:38,020 --> 00:12:41,950 va a mostrar la cadena que hemos agregado de manera dinámica desde javascript 140 00:12:45,560 --> 00:12:50,860 así como conclusión con este ejercicio hemos visto una introducción al uso de JavaScript. 141 00:12:50,970 --> 00:12:56,070 Observamos que una de las formas de utilizar JavaScript es agregando un nuevo archivo con extensión 142 00:12:56,110 --> 00:13:00,020 punto JS en combinación con HTML y JavaScript. 143 00:13:00,020 --> 00:13:06,420 Es que pudimos agregar contenido generado de manera dinámica a nuestra página HTML y así potenciar la 144 00:13:06,420 --> 00:13:09,520 forma en que creamos páginas web. 145 00:13:09,600 --> 00:13:12,090 Por eso concluimos nuestro ejercicio de introducción aullaba.