El curso más corto de programación (con JavaScript)
Conceptos fundamentales explicados de la manera más superficial para comenzar a entender de qué se trata la programación
Ahora que tenemos un editor de código podemos crear archivos que nos permitan conservar los programas que hagamos.
El primer paso es dirigirnos a la Barra Lateral
> Explorador
y abrir una carpeta donde guardaremos nuestros proyectos.
Si aún no tenemos una carpeta, podemos crear una directamente desde este menú
Esto nos ayudará a mantener organizados nuestros archivos mientras aprendemos.
Una vez que tengamos abierta una carpeta dentro de VS Code, el panel cambiará ligeramente con una nueva sección.
Ahora podemos darle Clic derecho
> Nuevo archivo
.
Debemos crear un archivo con la extensión .html
, ya que es el tipo de archivos que reconoce un navegador. Por ejemplo: mi-primer-programa.html
.
Dentro de él debemos escribir !
(signo de admiración) para activar el atajo de autocompletado que nos dará el código inicial.
El código se verá algo así:
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body></html>
Este código nos permite crear una página web, que es donde vivirá nuestro código.
Por ahora sólo tenemos código HTML, para ejecutar JavaScript debemos hacer un paso extra.
Hay varias maneras de agregar JavaScript a una página web, por ahora sólo veremos la más sencilla.
Debemos agregar un poco más de código:
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <script> console.log("¡Hola, mundo!"); </script> </body></html>
En medio de <script>...</script>
podemos agregar las líneas de JavaScript que necesitemos.
Ahora el archivo que acabamos de crear lo podemos abrir con nuestro navegador.
Este programa sólo imprime un ¡Hola, mundo!
a la consola, por lo que debemos abrirla para ver el resultado.
De esta manera podemos crear archivos que preserven el código que hagamos a lo largo de las siguientes lecciones. Incluso podemos volver a ellos para repasar los conceptos que vimos.
Recomendamos crear un nuevo archivo para cada lección
Modifica el código dentro de <script>
para imprimir tu nombre en la consola.
Por ejemplo:
console.log("¡Hola, [NOMBRE]!");
Una vez que modificamos el archivo, debemos guardar los cambios y actualizar el navegador para ver los resultados.