Vamos a realizar a continuación el ejercicio de introducción a JavaScript.
Están listos.
Vamos.
El objetivo del ejercicio es crear un proyecto para iniciar con JavaScript y al finalizar deberemos
observar lo siguiente según se muestra como primer paso vamos a crear un proyecto.
Este proyecto se va a llamar introduccion JavaScript y lo depositamos en la ruta mostrada y damos clic
en Finalizar
agregamos un archivo HTML.
Este nuevo archivo se va a llamar Patch 1 es decir Página 1 y damos clic en Finalizar esta página va
a estar a nivel raíz por lo tanto el campo de fólder está vacío y damos clic en Finalizar como siguiente
paso vamos a agregar un archivo este va a ser un archivo de tipo JS Es decir un archivo JavaScript file.
Así que sobre nuestro proyecto a nivel raíz vamos a dar clic derecho new Java Script fila y así es como
vamos a crear y agregar nuestros archivos de tipo JS
así que agregamos un archivo J.S y este archivo se llama funciones.
Podemos observar que en automático le agrega la extensión punto J.V y también nos vamos a depositar
a nivel raíz así que el campo de folder está vacío y damos clic en Finalizar
como siguiente paso vamos a modificar nuestro archivo índex punto HTML y vamos a agregar lo siguiente
agregamos un doc html.
Abrimos nuestro documento y en el cabecero vamos a agregar un meta.
El título de ejemplo lleva a excluir y esto va a ser lo nuevo que vamos a agregar para poder trabajar
con JavaScript.
Similar al trabajo con las hojas de estilo cuando estamos trabajando con JavaScript podemos agregarlo
de diferentes maneras ya sea en un archivo externo.
También podemos agregar código JavaScript directamente en el cabecero de nuestro documento HTML y también
podemos agregar directamente en el cuerpo o en algunas etiquetas de nuestros elementos HTML.
Sobre todo cuando estamos trabajando con eventos pero en este caso vamos a regarlo de la siguiente manera
directamente en el cabecero agregamos la etiqueta de script e indicamos que el tipo va a ser text diagonal
JavaScript y mandamos a llamar directamente a la función de alerta.
Básicamente como su nombre lo dice esta función de alerta es para mostrar una alerta en el navegador
web así que lo que estamos mostrando es la alerta de Hola mundo pero también como hemos comentado por
medio de JavaScript podemos generar código HTML de manera dinámica así que podemos acceder al Dom es
decir al Document Object Model que ya hemos comentado anteriormente y a través del objeto document es
precisamente que podemos acceder a este objeto de tipo Dom y por medio de la variable document la cual
podemos acceder de manera inmediata cuando estamos trabajando con JavaScript.
Simplemente escribimos document punto right y esto va a agregar contenido HTML directamente a nuestra
página y lo va a mostrar en nuestro navegador así que escribimos document punto right y agregamos una
cadena.
Podemos observar que una cadena la podemos manejar con doble comilla pero también la podemos manejar
con comilla simple y agregamos el siguiente código HTML.
Esto es básicamente una cadena pero podemos observar que ya estamos manejando también etiquetas HTML
así que podemos agregar un título H1 y dentro de esa etiqueta H1 agregamos la cadena Hola Mundo desde
javascript y cerramos esta etiqueta H1 y también cerramos la etiqueta de script.
Cerramos el cabecero y dentro de nuestro body lo que vamos a hacer es agregar un link hacia la página
1.La HTML ya que también vamos a agregar cierto código en esta página 1 para manejar JavaScript desde
un archivo cerramos el body y cerramos nuestro cabecero.
Sin embargo en esta primera página de índex punto HTML lo que estamos haciendo es agregar directamente
JavaScript en nuestro cabecero y desde este cabecero hicimos dos cosas agregamos la etiqueta de script.
Posteriormente mandamos una alerta por medio de la función Alert la cual también podemos acceder directamente
con JavaScript y también accedimos al objeto documento y con este objeto podemos escribir código HTML
a la salida de nuestro documento HTML.
Así que estas son las dos cosas que hicimos en este primer documento.
Ahora vamos a trabajar con nuestro documento base 1.ª HTML lo que vamos a agregar en este documento
lo siguiente agregamos el Doc Taipe la etiqueta de HTML y también agregamos nuestro cabecero como ya
conocemos.
Agregamos el título y el título va a ser saludos desde javascript y lo que vamos a hacer.
Similar al manejo de hojas de estilo es que en este caso en esta página de 1.ª HTML lo que vamos a hacer
es agregar un link hacia el archivo de JavaScript.
En este caso hacia el archivo de funciones punto JS que ya hemos creado anteriormente y para poder agregar
este link lo que vamos a hacer es utilizar la etiqueta de script posteriormente indicamos el tipo que
va a ser un text JavaScript y posteriormente utilizamos el atributo de sours e indicamos que el archivo
se llama funciones punto JS ya que este es el archivo que hemos creado anteriormente de tipo JavaScript
y simplemente cerramos también nuestra etiqueta de script y con eso cerramos nuestro cabecero.
Con esto ya estamos indicando la ubicación de nuestro archivo de JavaScript y con esto en automático
ya podremos hacer uso directamente de las funciones que agreguemos a este archivo de funciones punto.
Ahora lo que vamos a hacer es lo siguiente en nuestra etiqueta de Bodhi lo que vamos a hacer es utilizar
el método holdout.
Este método básicamente se manda llamar cuando se carga a nuestra página HTML.
Precisamente por eso su nombre de un loft es decir cuando se está cargando la página y lo que vamos
a hacer es lo siguiente En este atributo de López podemos mandar a llamar la función de JavaScript y
separando por un punto y coma.
Podemos mandar a llamar varias funciones de JavaScript.
Así que en este caso estamos mandonas llamar la función de saluda y por ello utilizamos los paréntesis
ya que es una función y posteriormente separada por punto y coma mandamos a llamar otra función.
La función de escribe mensaje y también por lo tanto estamos utilizando paréntesis ya que también es
una función y cerramos con punto y coma así que cuando se carga el cuerpo de este archivo HTML se mandan
a llamar.
Estas dos funciones de JavaScript la función de saluda y la función de escribe mensaje.
Estas dos funciones las vamos a agregar posteriormente en el archivo de funciones punto JS Y agregamos
el siguiente comentario El texto HTML de elemento H1 se escribe de manera dinámica.
Pero para poder escribir este contenido de manera dinámica vamos a agregar la etiqueta H1 y con JavaScript
es muy común que agreguemos identificadores a nuestros elementos HTML para que de manera dinámica podamos
acceder a estos elementos y podamos agregar contenido por ejemplo en este caso de manera dinámica al
texto de este elemento H1.
Por ello es que le estamos agregando el identificador el Heydi de mensaje HTML esto para que podamos
acceder como hemos comentado de manera dinámica a este elemento H1 y lo que vamos a hacer es que una
vez que podamos acceder con JavaScript a este elemento lo vamos a recuperar y le vamos a escribir información
a este elemento H1 y cerramos el body y en la etiqueta HTML de nuestro documento vamos a ver ahora el
código de nuestro archivo funciones punto J.V.
Sin embargo debemos recordar estos elementos ya que sabemos que vamos a recuperar y modificar a continuación
con ayuda de JavaScript a continuación vamos a modificar nuestro archivo funciones punto JS Y de esta
manera es como podemos agregar comentarios a nuestros documentos de JavaScript lo que hacemos es diagonal
doble asterisco y cerramos el comentario con asterisco diagonal o también podemos utilizar la doble
barra.
Si este comentario únicamente es de una sola línea así que este es un tipo de comentario para varias
líneas y este es un tipo de comentario para una sola línea.
Esto es muy similar al lenguaje Java.
Posteriormente vamos a declarar una función para declarar una función en JavaScript.
Podemos utilizar directamente la palabra reservada función así que declaramos lo siguiente función y
el nombre de nuestro método.
En este caso este método se llama saluda y no recibe ningún parámetro por lo tanto estamos definiendo
esta función sin parámetros.
Simplemente abrimos y cerramos paréntesis posteriormente vamos a agregar el cuerpo de nuestra función
y para ello utilizamos llaves y empezamos a agregar el siguiente código al cuerpo de nuestra función.
En este caso esta función únicamente va a mandar una alerta cuando se manda llamar y va a desplegar
la alerta de Hola mundo y con eso cerramos también nuestra función y con esta llave cerramos nuestra
función.
Vamos a agregar nuestra segunda función que se llama escribe un mensaje así que escribimos function
posteriormente en nombre de la función que se llama escribir el mensaje y esta función tampoco recibe
ningún parámetro por lo tanto simplemente abrimos y cerramos paréntesis.
Abrimos el cuerpo de nuestra función y agregamos lo siguiente Lo que vamos a hacer es utilizar nuestro
objeto de tipo Dom.
En este caso el objeto document.
Posteriormente vamos a recuperar el elemento llamado Mensaje HTML para poder recuperar este elemento
por medio de JavaScript.
Vamos a utilizar el método GET Element Heydi e indicamos cuál es el elemento que queremos recuperar
de tipo HTML.
Básicamente con esto es como si estuviéramos posicionando en nuestro elemento HTML y estuviéramos listos
para escribir.
Sin embargo para poder agregar información vamos a utilizar en este caso una propiedad.
La propiedad se llama Imer HTML así que escribimos punto immer HTML y con esto.
Ahora si ya estamos posicionados para escribir y agregar contenido HTML y lo que vamos a hacer es agregar
simplemente saludo desde archivo JavaScript pero aquí también podríamos agregar código HTML así que
esta es la cadena que vamos a agregar a nuestro elemento de tipo H1 llamado Mensaje HTML.
Pero podemos observar que ya todos lo estamos haciendo de manera dinámica.
Esta cadena se podría generar de manera dinámica sin ningún problema así que básicamente lo que estamos
haciendo es agregando una nueva cadena a nuestro elemento de tipo H1 llamado Mensaje HTML así que esta
es la sintaxis para que podamos agregar información de manera dinámica a nuestros elementos HTML.
Lo importante aquí es que tenemos que agregar un identificador para que podamos acceder por medio de
la función Get Element Bayardi que se encuentra en nuestro objeto documento y con esto cerramos nuestra
función recuerden que en cada uno de los archivos pueden dar clic para poder acceder al contenido del
código de cada archivo.
Sin embargo se le solicita codificar línea a línea para que quede claro este ejercicio de introducción
a JavaScript
como siguiente paso.
Ejecutamos nuestro proyecto y podemos observar que cuando se carga nuestra página nos manda una alerta
y esta alerta dice Hola Mundo y damos clic en Aceptar y una vez que damos clic en Aceptar.
Entonces se carga la página completamente y nos muestra Hola Mundo desde javascript y un link hacia
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
va a mostrar la cadena que hemos agregado de manera dinámica desde javascript
así como conclusión con este ejercicio hemos visto una introducción al uso de JavaScript.
Observamos que una de las formas de utilizar JavaScript es agregando un nuevo archivo con extensión
punto JS en combinación con HTML y JavaScript.
Es que pudimos agregar contenido generado de manera dinámica a nuestra página HTML y así potenciar la
forma en que creamos páginas web.
Por eso concluimos nuestro ejercicio de introducción aullaba.