Nerea Robles Cervigón 1ºBACH 1

Primer vídeo

En este vídeo vamos a aprender a añadir elementos de Java script en HTML . Para ello primero crea una hoja nueva de VScodium y añade el principal código de HTML .

Luego simplifica el código quitando algunas líneas de código . Y más tarde abre el documento en Firefox y abre una consola donde va añadiendo código que no aparece en el HTML pero que cuando lo escribe en la consola se añade .

Más tarde añade h1 a la consola como nueva variable de título y le añade texto dentro . Cuando ya ha creado esa variable , mete esa misma variable pero con diferente texto como título y después de todo eso ,al final ,se crea la variable h1 como titulo .

Luego lo añade a la parte del < body> en la consola y cuando buscas esa variable te aparece .

Ahora va ha meter elementos dentro de elementos . Para ello empieza poniendo un titulo con la variable h1 y dentro pone la variable id y un párrafo con la variable id y class .

Más tarde mete todo eso en la consola para incluirlo en el código .

Para comprobar que está todo se mete en inspector y comprueba que este todo el código que anteriormente había en la consola .

Para finalizar con el vídeo dice que puedes crear un input box y meter cualquier tipo de datos ya sea fechas , links u otras cosas .

Segundo Vídeo

En este vídeo vamos a aprender como pasar el código de HTML a JavaScript usando etiquetas de plantilla . Para comenzar abre un documento en Vs Codium con el código básico y luego crea un div y un template tag .

Luego le añade más código dentro del template tag y dice que puedes añadir el código que sea , ya sea más simple o complejo . Abre una consola y podemos ver que no hay nada ya que el template tag es invisible y no se ve, entonces para que se vea el código va a abrir la consola y poco a poco irá añadiendo el código y lo pasa de HTML a JavaScript.

Una vez que ha terminado de escribir todo el código se puede ver el resultado en el documento . Con esto aprendemos a coger código de HTML almacenarlo en una plantilla y luego usarlo en nuestro JavaScript para básicamente tomarlo y colocarlo en algún lugar de nuestra página.

Para buscar y encontrar elementos dentro de la plantilla . Para ello va a la consola y pone el código que veis a continuación para buscar en este caso el elemento h1 .

Este es el código que pone en la consola para buscar el elemento de h1 .

Pero no solo se puede buscar ese elemento sino muchos más como el de la descripción o el de la fecha .Lo único que hay que cambiar el código y sustituir estas partes por el código correspondiente , en el caso de la descripción "desc" y "My new description" y en el caso de la fecha "date" y "12/31/2019" ( puede ser la fecha que tu quieras).

Luego ha añadido esta línea de código para que se vea todo ese código en el documento .

Al usar el elemento < template > es mucho más sencillo y ràpiod buscar un elemento ya que en la consola utilizas el mismo código pero cambiando algunas cosas como ya hemos visto antes . Si no utilizáramos este elemento habría que ir uno por uno y se tardaría mucho más .

Tercer vídeo

En este vídeo vamos a aprender a añadir eventos a nuestro código de HTML . Un evento es algo como hacer click en un botón o subir y bajar en una página.

En este caso vamos a crear un evento para que al pulsar el botón " Click Here" ,que después vamos a cambiarle el nombre , se puedan apuntar más invitados .

Para ello debajo de < /div > ha añadido un < template > y ha copiado el mismo código que el de < div > y lo ha pegado en el < template > . También ha añadido < script > y todo lo que se añada ahí dentro será código de JavaScript .

Ahora al meterse en el documento aparecen 2 Guest name , ya que el primero ya estaba escrito y el segundo se ha puesto ya que todas las líneas del código de < script > han ejecutado lo que pone en el < template > .

Muy a menudo se puede ver el código de JavaScript al final del código de HTML antes del < /body> ya que como el código se lee de arriba a abajo si ponemos el < script > adelante nos va ha dar error .

Luego dentro del código de < script > ha añadido el elemento de function , pero ese elemento no se ejecuta automaticamente por lo que el código de dentro de function esta esperando a ser ejecutado . Para eso se va a la consola y ejecuta la función , podemos ver que ahora si que se añaden los Guests que queramos pero el problema es que no queremos eso , sino queremos que cuando alguien pulse el botón "Click Here" se añadan más Guests .

Para conseguir lo que buscamos , tenemos que añadir un evento dentro del código de JavaScript .

Para comprobar que ha funcionado tenemos que irnos a nuestro documento donde se está ejecutando todo . Ahora si que funciona .

Da igual el elemento que sea el botón como si es un h1 o otra cosa ya que al código de JavaScript no le afecta en nada y ejecuta el código tal cual . Lo único que cambia es el "Click Here". También se puede añadir un evento para cada función , entonces ahora lo que queremos es que al darle al botón dos veces se borre todos los Guests. Para ello hay que añadir esta línea de código .

Cuarto vídeo

En este vídeo vamos a aprender a eliminar elementos individualmente con botones . También vamos a aprender cosas como la propagación de eventos . Empieza añadiendo un botón y lo va ha llamar eliminar .

Luego añade este botón al template para que cuando se añadan más Guests se añadan al lado este botón . Al probarlo podemos ver que el botón no funciona porque tiene una función secundaria y el código se centra en la principal . Para corregir eso va a crear una función y la va ha asignar a un evento .

Después va al documento para comprobarlo y en la consola le indica los distintos botones y la función de cada uno al pulsarlos. Para que haga la función que estamos buscando ha añadido esta línea de código .

Al comprobarlo en la consola si que aparece que ese botón sea el que hemos pulsado .

Ahora en vez de poner que registre ese elemento en la consola , pone para que se elimine . Al comprobarlo si que funciona lo único que elimina el botón de DELETE en vez de el resto de cosas que es lo que buscamos que se elimine .Para ello primero busca en el código de HTML el elemento que se refiere a lo que queremos eliminar y lo añade dentro de las funciones para que al ejecutarlas lo que buscamos que ocurra.

Para comprobar que funciona lo probamos otra vez y ahora si que funciona .