Curso Práctico de JavaScript

Curso Práctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Cómo integrar JavaScript en HTML

5/24
Recursos

Aportes 68

Preguntas 17

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Si van a crear varios archivos con el mismo nombre pero diferente extensión, por consola es muy fácil de la siguiente forma:

touch nombreArchivo.{extension, extension, extension}

Ej:

touch figuras.{html,js}
touch button.{html,js,css}

Recomiendo la extension de VSCode Live Server como para no tener que refrescar la página todo el tiempo:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Poquito fuera de tema, pero en este sitio pueden editar más bonito sus README c:

Hola, como estan? ! dato interesante, a medida que el programa avance… tendran por ejemplo 2 archivos js al mismo tiempo, y nosotros como devs “uniremos” html con js…bien les dire algo que me parecio muy relevante! cuando unan html con js mediante la etiqueta script es muy importante que lo unan dependiendo de como js deba leer los archivos… ej:
HTML
<script src=“leeme a mi primero!!”></script>
<script src=“leeme a mi despues!!”></script>
Esto es un ejemplo muy poco interesante y casi obvio, pero realmente es importante(o por lo menos para mi) ya que no sabia de la importancia de poner las etiquetas en orden segun como lo lea js!.
Espero que les sirva este dato! 😃

# platzi-curso-practico-javascript

...

## Taller #1: figuras geométricas

- Primer paso: definir las fórmulas
- Segundo paso: implementar la fórmulas en JavaScript 
- Tercer paso: crear funciones
- Cuarto paso: integrar JS con HTML

## Taller #2: porcentaajes y descuentos

- Primer paso: definir las fórmulas
- Segundo paso: implementar la fórmulas en JavaScript 
- Tercer paso: crear funciones
- Cuarto paso: integrar JS con HTML

## Taller #3: promedio, mediana y moda

- Primer paso: definir las fórmulas
- Segundo paso: implementar la fórmulas en JavaScript 
- Tercer paso: crear funciones
- Cuarto paso: integrar JS con HTML
# curso-practico-javascript

Desde Visual Studio Code se pueden previsualizar los archivos .md

¿Cuándo es bueno escribir código js en el archivo html?

En esta clase el profe vinculo el archivo.js al html con la etiqueta <script>. Eso es lo que la mayoria de desarrolladores hacen, ya que el archivo.js es enorme. A veces incluso tienen que hacer una carpeta llena de archivos js, ya que las lineas de código rebasan las 5 mil.
Sin embargo, cuando vas a usar poquito código JavaScript, es cuando se recomienda escribir el código en el archivo html, de la siguiente manera:

<script>
  @code
</script>

Les comparto los talleres de este curso transformado en una aplicación web usando la metodología Mobile First.

Enlace al sitio en Github Pages…

También les dejo el repositorio en Github…

Para quienes deseen compilar desde VSCODE para ahorrar el cambio de programa con cada test, recomiendo la extensión Code Runner. Todo lo que deben hacer es instalarlo, escribir el código JS, seleccionarlo, dar click derecho y click en “Run code”, esto hará que el código se ejecute en la consola de VSCODE. Lo encuentro bastante práctico ya que podemos hacer innumerable cantidad de test en la misma app de una manera mucho mas rápida. 😃 (Nota: solo se ejecuta el código seleccionado)

Hola comunidad, si en caso colocaron inicialmente file:/// seguido de la ruta en su navegador, y aun así no funciono, les puede servir escribir el siguiente comando en su terminal : explorer.exe .

Con esto podrán navegar entre las carpetas como normalmente lo hacen en windows, y luego podrán buscar el archivo html y ejecutarlo.

Espero les sirva.

Hey ! Si quieres continuar el curso usando TypeScript y evitarte toda la configuracion de webpack , puedes usar Parcel que es una alternativa muy rapida y comoda

Solo tienes que instalarlo

npm install parcel

y crear un script en package.json para correrlo

 "scripts": {
    "start": "parcel index.html --port 8080"
  },
 "dependencies": {
    "parcel": "^2.0.0-beta.2",
    "typescript": "^4.3.5"
  }

y ya puedes trabajar con tus archivos .ts desde tu html de una manera rapida !

Puedes leer mas sobre este bundler en sus docs y en este post

Emmet & VSCode


Para todos los que quieran aprender un poco más de cómo agilizar su escritura de código con Emmet, les comparto el Cheatsheet de Emmet para que puedan leerlo, estudiarlo y hasta descargarlo para consultarlo cuando lo necesiten:

https://docs.emmet.io/cheat-sheet/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src='./figuras.js'></script>
</body>
</html>

5. Cómo integrar JavaScript en HTML

Existen varias formas de integrar código javascript en un archivo html:

La primera forma y poco recomendada es que dentro del body declarar un archivo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>figuras geométricas</title>
  </head>
  <body>
    <h1>Figuras geométricas</h1>
    <script>
	//código js
    </script>
  </body>
</html>

La segunda forma es utilizar un atributo source de la etiqueta javascript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>figuras geométricas</title>
  </head>
  <body>
    <h1>Figuras geométricas</h1>
    <script src="dirección del archivo"></script>
  </body>
</html>

Cómo acceder a los archivos del proyecto desde el navegador

Para acceder a los archivos de nuestro computador se debe saber la ubicación. Si no posicionamos en la carpeta del proyecto desde la terminal
se puede utilizar el comando pwd y nos dará como resultado la dirección de la carpeta.

Para acceder desde el navegador se debe de escribir el prefijo file:/// y luego la dirección de la carpeta.

file:///ubicación-de-la-carpeta/file.html

Para vim yo uso bracey, por si alguno lo necesita

es mejor instalar la extensión “Live Server” y luego click en “go live” o simplemente arrastrar el .html hacia la ventana del navegador.

esto se ve muy básico, pero necesario para los noobies como yo jejeje

No pude abrir mi carpeta en Chrome añadiendo file:/// . En mi caso era porque tenía mi carpeta del proyecto dentro del Disco C , y para abrirlo desde Chrome debía utilziar C:///ruta , ahí si pude ver el proyecto.
Espero les sirva a alguien 😃

A mí no me funcionó, pero existe una extención en Visual Studio que te permite abrir tus archivos directamente en el navegador para así poder ir inspeccionandolos. Se llama Live Server

Si tienen VSCode, recuerden el shortcut para setear de una HTML.
con escribir un :

!

y presionar tab cuando aparezca el Emmet Abbreviation

En la clase de hoy realizamos los siguientes pasos

  • Fuimos a nuestro proyecto y añadimos una descripción del primer taller al archivo README, hay que recordar que para crear un título o encabezado utilizamos el signo de #
  • Luego, dentro de la carpeta del proyecto creamos una subcarpeta donde creamos nuestros primeros archivos con los cuales trabajaremos, le coloqué “figuras.js” y “figuras.html”
  • Dentro de nuestro archivo HTML colocamos el título de la página, luego un h1 que dice figuras geométricas y enlazamos nuestro archivo de JavaScript al archivo HTML con la etiqueta <script src="./figuras.js"> </script> recordamos que cuando estamos dentro de la misma carpeta solo utilizamos el ./ para buscar un archivo.

Toca aprender Markdown para escribe aportes bonitos.

por si alguna parsona le aparece el error de que no se carga el javascript y no se muestra en la consola del navegador.
cuando unan el javascript con el html pongan el codigo del script de esta forma

<script src=“figuras.js”></script>

como que causa algun tipo de error ponerlo de esta forma

<script src="./figuras.js"></script>

Con control + shift + i te sale directamente el inspector, si lo haces con + c te sale directamente para escanear elementos de la página

Puedes cambiar a español así:

<html lang="es">

FORMAS DE ABRIR NUESTRO HTML PARA LOS QUE TENEMOS WSL:
Primera forma:
-Acceder a mi terminal de ubuntu y asegurarme de estar en mi home/nombredeusuario
-cd nombredemicarpeta
-code .
-open with live server
Segunda forma:
-Abrir mi terminal Ubuntu
-Estar en mi home/nombredeusuario
-Colocar: explorer.exe .
-Nos abrirá nuestro explorador de archivos y encontraremos nuestra carpeta, arrastramos el index.html al navegador y listo.

ASÍ ME FUNCIONÓ A MI…

Les recomiendo la extension “Live Preview” abre una ventana dentro de visual studio code sin necesidad de abrir el explorador y sin estar haciendo refresh a cada rato y se hacen los cambios al momento , muy suave!

Me gusta el curso como va paso a paso.

Me ha gustado como explica el profesor.

Para abrir el archivo HTML en le navegador desde el Visual Studio Code de una manera mas rápida, sigue los siguientes paso:


1 . Guarda el archivo con (Ctrl + S)
2 . Abre el archivo en tu Navegador Predeterminado con (Alt + L O)

NOTA: Si tienes dos monitores puedes ver los cambios de tu archivo HTML, en tiempo real. Activando el “Autoguardado” en la pestaña “Archivo” de tu VSCode

Cómo abrir el directorio en el navegador en Windows, si estamos trabajando en WSL:

En la terminal usamos el comando:

explorer.exe .

Esto abre la carpeta en el explorador de Windows, copiamos la ruta de la carpeta y la pegamos en el navegador.
Listo.

pero que bonito

Mi ruta empezaba con /c/Users/Janet/Documents/Cursos…

Y me mandaba la ruta al buscador de google, entonces le quité el /c y le puse c: y entré a mi carpeta, aunque en lo que redirigía me apareció ese file:///

Por si necesitan copiar alguna salida de la terminal sin utilizar el mouse

e.g:

pwd | pbcopy

Ctrl K y luego S para guardar TODOS los archivos de una sola vez en VSCode

Pegar la ruta en Safari no funciona. Tuve que hacerlo en Chrome.

Me gusta que aunque es un curso de javascript, explica los pequeños detalles que necesitamos saber de html y git ❤️

Puedes incluir imágenes:

<img id="logo" src="imagen.jpg" />

También si usan Windows subsystem for linux (wsl) pueden usar el comando

explorer.exe .

Eso les abre la carpeta en la que están trabajando desde su explorador de archivos en windows.

Tambien se podria instalar en visual code la extension Live Server, para ver reflegado nuestros cambios en tiempo real
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Para todos los que estén aquí, les recomiendo que instalen la extensión de Live Server en VSCode, con el fin de poder ejecutar las páginas web con solo darle al clic derecho, y seleccionar “Open with live server”.

Si desean crear README’s más rápido, acá les dejo este sitio :
README

Comparto una extensión que te permite ejecutar cualquier cambio en HTML- CCS sin estar refrescando el navegador es Live Server - VScode 😃

también la extensión emmet ayuda mucho con el código HTML y tiene sus versiones para los diferentes lenguajes

Bien explicadito, vamos bien con el curso profe.

No se recomienda poner la etiqueta <script> dentro del body, ya que se considera una mala práctica.
Lo recomendable, es colocar el script dentro de la etiqueta <head>, pero para que se ejecute hasta después de que termine de cargar la página le agregamos el atributo defer a la etiqueta <script>.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Figuras geométricas | Curso Práctico de JavaScript en Platzi</title>
  <script src="./figuras.js" defer></script>
</head>
<body>
  <h1>Figuras geométricas</h1>
</body>
</html>

También podemos agregar el file.js dentro del head pero con la opción defer

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Figuras Geométricas</title>
        <script src="./figuras.js" defer></script>
    </head>
    <body>
        <h1>Figuras Geométricas</h1>

        <!-- <script src="./figuras.js"></script> -->
    </body>
</html>

Recomiendo descargar la extensión Live Server de VS Code para al momento de guardar el navegador se actualice solito sin necesitad de teclear F5

Buena clase. Seguimos avanzando en el proyecto. 👦🏻

quiero decirles que cuando van a abrir el inspector de elementos desde Windows es con anticlick o click dereho. (tamnien se puede mas directo preionando ctrl +mayus+I)

y tambien la etiqueta <script src=>, yo la suelo usar dentro de la etiqueta <head>… me dicen si ustedes la usan en el <body> como lo hace el prof…?

Hasta ahora todo bien y sin problemas.

el profe es muy bueno y por eso creo que hasta el vid5 no hemos aprovechado su potencial

alguien sabe como abrir el archivo desde ubuntu?

Entonces por lo que se infiere (porque nunca se dice literalmente), la forma “menos profesional” de incluir JS en nuestro HTML para que se ejecute automáticamente es poner el código directamente dentro del tag script… Es pregunta de examen pero al poner eso la da incorrecta. Así que supongo que esa pregunta se responde eligiendo una al azar y a ver si le das a la correcta.

No sé si alguien ya lo mencionó pero se puede usar con la librería Math que les dejo el link para descargarlo. https://mathjs.org/download.html

Math.pow('variable',2)

voy a empezar a subir todos mis proyectos a github.

<script src="./figuras.js"></script>

El </script> al final es importante, de lo contrario no funciona.

Bueno, cada dia se aprende mas y mas 😃

Para correr tu archivo figuras.html desde tu WSL hacer los siguientes pasos:
Primero: Instalar la Extensión Live Server
Segundo: Dar click Derecho en el archivo figuras.html
Tercero: Dar click En Open with live Server
Automáticamente te abrirá el archivo en el navegador local de Windows, y así podrás visualizar tu archivo Html.

Si : no les funciona el clone por que el curso de git lo llevaste en windows y luego en el de prework instalaste wls (ese fue mi caso).
este video te servira:

Pueden usar la extensión de VSCode Live Server https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
De esta manera podran correr su html en un servidor virtual y ver en tiempo real los cambios sin tener que refrescar el navegador.

este chabon me habla como si fuese un mogolico me pone un poco nervioso

Buen curso

las dev tool del navegador sólo las podrás usar desde Chorome, si vas con MacOs vas a tener que usarlo en lugar de safari.

Alternativamente podemos usar el attributo booleano defer en la etiqueta <script>. Poner la etiqueta de script al final de <body> funciona bien con navegadores legacy, pero hoy en día defer cuenta con mucho soporte por parte de los navegadores más populares (96.81% al presente día según can I use aquí).
.
defer tiene la ventaja de ser más rápido pués carga el JS de manera asincrona (mientras carga el HTML) y espera a que se termine de parsear el HTML para ejecutar el código.
.
En cambio al poner la etiqueta al final del <body> el navegador tiene que cargar y parsear primero el HTML, luego el JS y al final ejecutarlo.
.

Así usaríamos defer en y la etiqueta de script en el <head>

<head>
	...
	<script src="./js/app.js" defer></script>
</head>

Si hay alguien usando WSL linux ubuntu, y tenga problemas para grabar sus archivos, prueben con esto

sudo chown -R "miusuario" y la ruta donde estan ubicados (pueden usar pwd para saber la ruta)

y esto les dejara guardar sus archivos en linux a la vez que ejecutan VSCode sin problema.
Atte: ya me ha pasado varias veces ya se como solucionar este problemilla.

En la terminal puedes escribir
touch figuras.html
touch figuras.js y te va a generar cada archivo sin necesidad de usar el mouse.

No pude abrir mi carpeta en Chrome añadiendo file:/// . En mi caso era porque tenía mi carpeta del proyecto dentro del Disco D , y para abrirlo desde Chrome debía utilziar D:///ruta , ahí si pude ver el proyecto.
Espero les sirva a alguien 😃