Bueno tocó el turno de nuestro famoso Hola mundo y vamos a aprovechar este capi que teóricamente es
empezar a trabajar contorno y explicar bien el entorno.
Muy bien bãsicas cosas que vamos a aprender en este capítulo tiene que ver con comenzar un proyecto
Nosotros tenemos nuestro explorador de proyectos yo lo que he hecho es crear una carpeta lo pueden hacer
ustedes también y vamos siguiendo los ejercicios una carpeta llamada dos puntos curso J.V los dos puntos
es para que me acomode arriba de todo del disco C y no tenga que ir a buscarlas alfabéticamente.
Vamos a crearle aquí lo vamos a hacer desde el Visual Studio.
Si ustedes aprenden a hacerlo desde aquí lo que he hecho previamente es arrastrar esa carpeta al explorador.
Si ustedes se fijan aquí tengo mi curso J y dentro vamos a crear una carpeta que vamos a llamarla ejercer
uno dentro de ejercer o no vamos a crear un archivo HTML.
Hay un aspecto que es muy importante.
Los archivos de JavaScript tienen una extensión punto J Ese si es que nosotros vamos a crear un archivo
que es lo recomendable.
Vamos a hablar de esto dentro de breves segundos.
Ahora el archivo J.V de Javascript por sí solo no puede ejecutarse.
No existe la forma de ir al navegador y cargar un archivo J.V y ejecutarlo.
Por qué.
Porque en realidad el navegador lo que está buscando por default es un archivo HTML el archivo HTML
que está buscando nuestro servidor nuestro navegador es el que vamos a crear aquí.
El famoso índex HTML.
Vamos a ir aquí al icono que diseñó Feil.
Vamos a crear índex HTML.
Automáticamente detecta que es un HTML y le pone los conceptos de etiqueta y vamos a hacer uso de Emet.
Es uno de los planes que nosotros hemos instalado para que ustedes vean que nos soluciona bastante que
no tenemos que escribir mucho.
Vamos a colocar la palabra HTML y Emet metra las tres posibilidades con las que voy a poder trabajar
con un HTML normal de versión vieja con un HTML versión 5 y con un XML.
Vamos a hacer click en la segunda opción y Emet ya me armã toda la estructura de página para que yo
no tenga que escribir todo esto automáticamente.
Por supuesto va a tener el título le vamos a poner ejerceré 1 y aquí tenemos nuestro Badi muy bien cada
vez que nosotros necesitemos incluir en nuestra página código de JavaScript lo vamos a tener que hacer
encerrado en una etiqueta que es la etiqueta script vamos abrir y cuando cerramos automáticamente nuestros
Plagueis nos cierran la etiqueta muy bien.
Nosotros tenemos tres maneras de escribir código JavaScript en el body significa que mezclado con nuestras
etiquetas de HTML vamos a poder ejecutar código Javascript.
Esto es muy útil y generalmente lo vamos a hacer así porque porque desde aquí vamos a llamar a las funciones
y a los métodos que vamos a ir creando a lo largo del curso de todo lo que tiene que ver con JavaScript.
Pero luego tenemos la posibilidad también de hacerlo dentro de elegir y esto es lo que va a hacer es
que se ejecute ese código o se cargue en esas funciones y esos métodos en memoria antes de que se ejecute
el Badi.
Esto es muy osado cuando voy a llamar a funciones dentro del Bodhi que van a tener que ser previamente
declaradas en el elegida.
Eso es mientras que nosotros no tengamos digamos extrapolado todo el código de JavaScript en otro archivo
como por ejemplo los archivos punto JS.
Ahora qué es lo mejor.
Cuál es la mejor práctica qué es lo profesional.
Profesional profesionales tener todo el código de JavaScript metido en archivos específicos de extensión
puntos JS y que sean llamados desde nuestras páginas HTML.
Por qué.
Porque si todo el código que nosotros coloquemos aquí en nuestras páginas HTML lo queremos llamar desde
otra página no vamos a poder todo lo que coloquemos dentro de nuestra HTML va a ser propietario de esa
página.
Entonces si nosotros tenemos rutinas funciones que queremos que sean utilizadas desde otras páginas
porque son códigos comunes de validación de Lovin por ejemplo o de transformación de un código o de
resultados de formas Saison que nos vienen de una API los queremos mostrar por pantalla.
Conviene que toda esa lógica de programación la tengamos extrapolada en archivos punto.
Es qué es lo que vamos a hacer ahora.
Vamos a hacer un simple Hola mundo.
Entonces dentro de la etiqueta escrit vamos a colocar una instrucción es un método de JavaScript llamado
Alert lo que hace Alert es mostrarme por pantalla una ventana en el navegador con el mensaje que nosotros
coloquemos aquí es una función que hace eso vamos a poner Hola mundo y es muy importante no olvidar
de cerrar la instrucción con Punto y Coma fíjense la diferencia si yo no coloco el punto y coma.
Todo esto queda despintado como que está en una inconsistencia no estoy haciendo lo correcto al colocar
el punto y coma todo vuelve a tener el color normal de las etiquetas de cierre de los respectivos tags
que tengo arriba muy bien ahora qué se hace ahora.
Simplemente voy a grabar esto me índex HTML voy a ir a mi carpeta curso ejerceré 1 y tengo mi índex
le voy a hacer doble click y aquí tenemos nuestro navegador con la ventana que nos dice este PopUp que
nos dice Hola Mundo aquí ven que en lugar de un doble W veo una dirección una web relees lo que está
mostrando es la dirección de donde está nuestro archivo y aquí podemos hacerle aceptar y se terminó
la ejecución de nuestro JavaScript.
Muy bien supongamos que esto nosotros lo queremos trasladar al girar vamos a borrarlo de aquí y vamos
a dejarlo aquí y vamos a hacer lo mismo van a ver que funciona de la misma manera.
Al no estar encerrado dentro de una función o un método lo ejecutará automáticamente porque encuentra
viene ejecutando etiqueta por etiqueta y cuando encuentra esto directamente no tiene ninguna restricción.
Si yo quisiera que esto no se me muestre salvo que yo Badi lo que lo que tengo que hacer es llamar a
esa función lo encierra en una función lo encierra en una función y aquí vamos a ejecutar vamos a grabarlo
vamos a ir a nuestro navegador vamos a darle refrescar y vemos que no hace nada porque por qué ahora
ya el código está encerrado en una función y si esa función no es llamada por nadie no va a hacer absolutamente
nada.
Entonces lo que vamos a hacer aquí es simplemente vamos a poner escrit y aquí vamos a decirle mostrar
mensaje fíjense que automáticamente me detecta que tengo una función y ya me la sugiere voy a dar alentar
mostrar mensaje siempre hay que poner los paréntesis.
Por más que esta función no está recibiendo ningún parámetro y ahora sí voy a grabar y cuando refresco
se muestra mi ventana Hola mundo por qué.
Porque aquí tengo un llamado a esa función y aquí dentro podría haber código mucho más complejo podría
hacer evaluación de de lógica de funciones de variables y en base a una condición que se cumpla puedo
mostrar el mensaje y si esa condición no se cumple no mostrarlo.
Por supuesto con las instrucciones y demás que vamos a ir aprendiendo a lo largo de este curso así que
ahora nos vamos a ver cómo se llama a un archivo JavaScript que es lo último que nos falta y aquí vamos
a hacer un pequeño cambio en GIF donde le vamos a primero vamos a crear un archivo nuevo que lo vamos
a llamar punciones puntos J es fíjense que el ícono ya es diferente al ser un archivo J.
No hace falta que cierre el código en las etiquetas escribe directamente puedo vamos a copiar esto muy
bien y vamos a pegarlo y ya tenemos un archivo vamos a grabar esto tenemos un archivo punto s con una
función Hola mostrar mensaje vamos a ir a nuestro HTML.
Vamos a quitar la función de aquí vamos a aquí decirle Vamos a completar lo habitual aquí lo que va
es un texto JavaScript y aquí vamos a usar una propiedad del escrit de la etiqueta scrip que es el SRC
que significa shows donde vamos a donde vamos a extraer ese archivo JavaScript y le vamos a decir que
está en una carpeta que está aquí mismo y que se llama fijense que aquí ya me lo trae porque detecta
en el proyecto detecta aquí en el explorador en la carpeta que estoy parado detecta que hay un archivo
y ya me lo trae como sugerencia y le voy a decir que lo traiga de ahí mismo muy bien.
Y ahora vamos a decirle vamos a dejar esto tal cual está.
Vamos a grabar vamos a recargar nuestro navegador y está llamando a la función.
Cuál es la diferencia.
La diferencia que el código que me muestra el alerta por pantalla no se encuentra dentro de mi HTML
sino que se encuentra dentro de un archivo llamado funciones punto J.V y ese archivo es referenciado
dentro de mi documento HTML.
Es muy importante saber que no solo archivos js que se encuentren en el servidor en el que se está corriendo
la aplicación en la página y demás sino que también se puede incluir archivos J.V que se encuentran
en otros servidores.
Aquí tendría que poner la web Rael exacta de donde se encuentra ese archivo de JavaScript.
Muy bien vamos a ir ahora al próximo capítulo a seguir aprendiendo y ahora ya hemos empezado a ver código
donde hemos chat con nuestra página de HTML 5.
He empezado a mostrar cosas por pantalla y a trabajar con Chávez que nos vemos en el próximo capítulo.