Aprender Programación

Variable: es una palabra a la cual se le pueden guardar valores.

= : es un operador de asignación

Todo se guarda en la memoria de corta duración de la computadora

(RAM)

Alert (“mensaje”): es una función que tiene como objetivo alertar.

Las funciones se invocan abriendo paréntesis y

cerrándolo, que en medio tiene que llevar in
parámetro que este será el valor que le demos a la
función para que ejecute algo.

Verde: cadena de texto correctamente llamado String. Siempre tiene

que llevar comillas.

Programar es controlar el flijo de acciones que ocurren dentro de una

computadora.

Crea tu primer sitio web

Un sitio web funciona correctamente gracias a la participación de

diversos tipos de archivos. Por lo tanto, antes de empezar a crear
nuestro primer sitio web debemos repasar un concepto fundamental
relacionado con la estructura de los archivos.

Aunque en esta clase generaremos un solo archivo para lanzar nuestro

primer sitio web, a lo largo del curso necesitarás crear otros tipos de
archivos para su correcto funcionamiento.

Estructura de un archivo

Se trata de uno de los conceptos más fáciles de asimilar en el universo

de los sistemas operativos. Nada más debes recordar alguno de tantos
archivos que has creado desde que usas un computador.

Es muy probable que hayas pensado que carta.docx o dibujo.jpg eran,

simplemente, nombres de archivos. Resulta que en esa descripción
observamos la estructura de un archivo.

Nombre

Debes tener claro que nombre es, apenas, una parte de la estructura de
un archivo.
Los nombres son personalizados y descriptivos. Solo en algunos casos
deberás asignar nombres predefinidos para que sean leídos
automáticamente, como, por ejemplo, cuando produces un sitio web. La
página principal, por defecto, debe llamarse index.html.

Al asignar nombres a los archivos, debemos tener en cuenta una

recomendación imprescindible como hispanohablantes: no utilizar
caracteres especiales como tildes, comas o la eñe. Tampoco se deben
emplear símbolos como &, $, %, !, o ". Por ejemplo, si debes crear una
presentación en slides para una fecha especial, es mejor que definas el
nombre de la siguiente manera: diaDelNino.pptx

Tal como puedes darte cuenta en el ejemplo anterior, no uso ni tilde ni la

eñe. Además, también debiste haber notado que no he dejado ningún
espacio en el medio. En cambio, he utilizado letras mayúsculas.

Punto (.)

Por más diminuto que nos parezca, el punto es un elemento

importante dentro de la estructura de un archivo.

Este carácter está presente en las estructuras de archivos de

todos los sistemas operativos. Tanto en Windows como en Mac,
Linux, incluso, en Android se usa el punto después del nombre y antes
de la extensión.

Extensión

La extensión de un archivo es el componente que nos permite

distinguirlo antes de ejecutarlo. Por ejemplo, si la extensión
es pdf o mp4, sabemos que el primero es un documento y que el
segundo es un video. Gracias a la extensión conocemos
anticipadamente qué aplicación ejecutará el archivo.

Para el propósito del presente curso, tendremos en cuenta que un

navegador como Chrome lee, entre otros archivos, aquellos cuya
extensión es html. Por esta razón, el primer archivo que crearemos para
lanzar un sitio web será uno que termine en .html. Pero, antes de todo,
es necesario conocer acerca de esta tecnología.

¿Qué es HTML?

HTML es un lenguaje de marcado o de etiquetas. Gracias a las

etiquetas escritas dentro del archivo .html, puedes ver esta página tal y
como está. Las etiquetas html son, algo así, como instrucciones que el
navegador debe decodificar. Viene del inglés HyperText Markup
Language.

Las traducciones al español tienen leves variaciones. Algunos le llaman

“lenguaje de etiquetas” o “marcas de hipertexto”. Otros, simplemente,
“lenguaje de marcado”. Un archivo con extensión HTML contiene texto
plano. HTML no es un archivo de texto enriquecido como los que
producimos en editores como Microsoft Word. Al crear un archivo HTML
no podemos formatear su texto con subrayado o con negrita o con
diferentes colores.

En este punto ya te habrás preguntado, ¿por qué veo este texto en

negrita y en cursiva en el navegador que solo lee archivos HTML, los
cuales son archivos de texto plano?. No te preocupes que no se trata de
un engaño, es una buena pregunta.

La versión actual de HTML incorpora más de un centenar de etiquetas.

En este curso utilizaremos algunas de las que más se implementan en
un sitio web.

Configurando mi sistema operativo en modo profesional

Ahora que ya sabemos lo importante que son las extensiones, estas

deben estar siempre visibles en nuestro sistema operativo. Además, en
el entorno de la programación, es una buena práctica tener a la
vista las extensiones de los archivos que están en nuestro
computador.

Por eso vamos a proceder a realizar la primera actividad de esta

clase: activar la función de Mostrar las extensiones de los
archivos en tu sistema operativo. Esta es una tarea muy sencilla,
aunque varía de acuerdo a la versión de tu sistema operativo. Pero si
trabajas en una versión reciente, el proceso es, aún, más sencillo.

Sitios web con HTML4 / 84

Publicado el 21 de julio de 2022

Seguro ya sabes que un sitio web es, en su forma más básica, un archivo
HTML. Ahora, acompáñame a descubrir el funcionamiento de este
lenguaje, y cómo puedes usarlo para empezar a crear sitios web 🙂.

Fundamentos de HTML
El lenguaje de marcas de hipertexto (HTML) tiene reglas como
cualquier otro lenguaje. Y no son tan complicadas cuando te tomas el
tiempo para explorarlas poco a poco 😉

1️⃣ En HTML la información se organiza con etiquetas

Estas consisten en una palabra o una letra encerradas entre los símbolos
“<” y “>”.

Ej:

<title>

2️⃣ Cada pieza contenida en tu sitio web la encierran etiquetas

de apertura y de cierre

Las etiquetas de cierre tienen un “/” antes de la palabra o letra que

compone la etiqueta.

Ej:

<title>Este es el texto que aparece en la pestaña del navegador</title>

3️⃣ Las etiquetas se escriben sin espacios internos ni mayúsculas

Un error de este estilo (de sintaxis) puede causar que el navegador no

entienda la etiqueta.

4️⃣ Existen algunas etiquetas que se cierran a sí mismas

Estas generalmente no tienen contenido, así que empiezan y

terminan con la etiqueta de apertura. Sin embargo, son muy útiles para
introducir metadatos, organizar elementos de la página, o importar
elementos de otras fuentes.

Solo hay 14 de estas etiquetas. Pero las más comunes son:

Etiquet
Uso
a

<br> Introduce un salto de línea en la página.

<img> Introduce imágenes a tu sitio web.

<input Introduce elementos para que el usuario te de información (cómo

> botones, campos de texto, listas desplegables, entre otros).

<link> Se usa mucho para cargar hojas externas de estilos (archivos

Etiquet
Uso
a

“.css”) para definir los estilos de tu sitio web.

Se usa para darle metadata a tu sitio web (para que el

<meta
navegador y buscadores cómo google puedan trabajar mejor con
>
él).

Ojo, hay una variante de HTML llamada XHTML que requiere que estas
etiquetas terminen en “/>”. Por ese motivo, muchos developers
acostumbran a terminar estas etiquetas de esa manera, incluso en el
HTML común y corriente.

Esto no es obligatorio en el HTML que tú estás aprendiendo ahora, pero

es bueno que lo tengas en mente para cuando trabajes con otros
developers 👍

Ej:

<meta charset=""utf-8"" />

<img src=""./assets/img/Logo.svg"" alt=""Logo de Batata Bit"" />

5️⃣Hay etiquetas cuyo trabajo es contener otras etiquetas

Cuando esto ocurre, se acostumbra usar la “indentación” de código para

distinguir la jerarquía de las etiquetas.

En palabras más simples: Solo tienes que pulsar la tecla “tab” en las
etiquetas hijo para que estas se muevan un poquito hacia la derecha.
Eso te ayudará a distinguir a los padres de los hijos con mayor facilidad.

Ej:

<picture class=""logo"">

<img src=""./assets/img/Logo.svg"" alt=""Logo de Batata Bit"" />

</picture>

6️⃣ Muchas etiquetas HTML utilizan atributos

Estos son información adicional que se agrega en la etiqueta de apertura

para personalizar sus propiedades y funcionalidad.

Estos siguen el siguiente patrón:

NombreDelAtributo=”ValorDelAtributo”

Aprenderás más sobre los atributos poco a poco. Por ahora lo importante
es que sepas que existen 👍

Por cierto, en HTML, la combinación de etiquetas, atributos y contenido

recibe el nombre de elemento.

7️⃣ Puedes encontrar una lista completa de las etiquetas HTML

que puedes usar

Con explicaciones y ejemplos de uso, en este sitio web.

También puedes encontrarlas en referencias oficiales como las

de W3Schools o Mozilla Developers.

Las más comunes para escribir son:

Etiqueta Uso

“Paragraph”, te permite introducir

<p>
párrafos.

“Anchor”, te permite introducir

<a>
hipervínculos.

<b> “Bold”, te permite escribir en negritas.

<i> “Italics”, te permite escribir en cursiva.

“Underline”, te permite escribir texto

<u>
subrayado.
Etiqueta Uso

“Unordered list”, te permite crear una

<ul>
lista desordenada (con puntitos)

“Ordered list”, te permite introducir una

<ol>
lista ordenada (con números o letras).

“List item”, se colocan dentro de

<li> un <ul> o un <ol>, y se convierten en los
elementos de la lista.

“Heading”, insertan títulos y subtítulos en

<h1>, <h2>, <h3>, <h4>, < tu sitio web. El número que acompaña a
h5>, <h6> la “h” representa el nivel del título, dónde
h1 tiene la mayor jerarquía.

8️⃣ Recuerda, los archivos HTML cargan de arriba hacia abajo, un

elemento tras otro

una condicional : es un código que solo se ejecuta si la condición se

cumple

If: es una un si de pregunta

{} se ejecuta después de la condición

== significa comparación

= asignación, es decir entra en la variable

&& dos cosas se comparen al mismo tiempo

Math.floor : quita los decimales

Math.random: pone los números aleatoreos

Las funciones son pedacitos de código que mientras la escribamos con

un proceso general podemos usarlo repetidamente

El nombre de la función es una variable y esta debe de ire minúscula

El parámetro debe de ir entreparentesis

¿Cómo funcionan los ciclos?

Hay varias formas de generar ciclos en programación. Pero todos siguen

la misma lógica:

1. Primero fijas las condiciones. Por ejemplo: “Mientras no sea

sábado, domingo ni feriado”.

2. Luego indicas lo que sucederá cuando las condiciones se cumplan

(operaciones, funciones a ejecutar, entre otros). Por ejemplo: “Voy
a la escuela”.

3. Finalmente, indicas lo que sucederá cuando las condiciones dejen

de cumplirse (operaciones, funciones a ejecutar, entre otros). Por
ejemplo: “Me quedo en casa”.
¿Por qué usar ciclos?

En programación, en ocasiones te toparás con código que tienes que

repetir varias veces para lograr el efecto deseado. Quizás puedas usar
funciones para resumirlos, pero ellas no resuelven el problema cuando
te ves obligado a ejecutarla una y otra vez.

En estos casos, lo mejor es programar un ciclo. De este modo, el ciclo

repetirá un fragmento de código tantas veces como sea necesario hasta
que deje de cumplirse la condición que indicaste.

💡 Ojo, es importante que en el código escribas un modo de que el ciclo

termine. Generalmente se hace aplicando en cada repetición una
pequeña modificación a la variable donde se observa la condición.

Por ejemplo, en el ciclo de ir a la escuela que vimos arriba, cada vez que
evaluamos la condición va a pasar un día. De ese modo, tarde o
temprano llegaríamos al fin de semana o a un día feriado, y no sería
necesario ir a la escuela.

Tu computadora no se va a quemar si por error escribes un ciclo infinito.

Pero tu programa fallará cuando lo ejecute.

Fundamentos para la práctica

Antes de empezar a hacer modificaciones, repasemos los fundamentos

que te permitirán hacerlo:

Operadores de comparación en JavaScript

Hay algunos operadores que te ayudarán a escribir condiciones en tu

código:

Operad
Significado
or

== Retorna “verdadero” si un lado es igual al otro (Ojo, NO

Operad
Significado
or

distingue entre números y strings. Por lo tanto: 3 == “3”

//verdadero).

Retorna “verdadero” si un lado es estrictamente igual al

=== otro (Ojo, SÍ distingue entre números y strings. Por lo tanto: 3
=== “3” //falso).

Retorna “verdadero” si un lado es diferente del otro

!= lado (Ojo, NO distingue entre números y strings. Por lo tanto:
3 != “3” //falso).

Retorna “verdadero” si un lado es estrictamente diferente

!== del otro lado (Ojo, SÍ distingue entre números y strings. Por lo
tanto: 3 != “3” //verdadero).

Funciona como un “y” en la condición. Te permite juntar varias

&& condiciones y devuelve “verdadero” solo si todas se
cumplen.

Devuelve “verdadero” si el valor a la izquierda es menor que el

<
valor a la derecha.

Devuelve “verdadero” si el valor a la izquierda es menor o

<=
igual que el valor a la derecha.

Devuelve “verdadero” si el valor a la izquierda es mayor que el

>
valor a la derecha.

Devuelve “verdadero” si el valor a la izquierda es mayor o

>=
igual que el valor a la derecha.

💡 También tienes el operador ||, que funciona como un “o” en la

condición. Te permite juntar varias condiciones, y devuelve
“verdadero” si alguna de ellas se cumple.

No pudimos incluirlo en la tabla por un problema técnico, pero sientete

libre de usarlo también 👍

💡 Aquí te dejo un fragmento de código que puedes copiar y pegar en la

consola del navegador. Solo cambia la condición y los operadores para
que experimentes como funciona cada operador 👍

if ( X == Y ) {
 console.log( "Verdadero" );

} else {

console.log( "Falso" );

Ciclos While en JavaScript

while es una instrucción en JavaScript (al igual que if) que te permite
crear ciclos. Su estructura es la siguiente:

while ( condición ) {

//Código a ejecutar mientras se cumpla la condición

Por ejemplo:

while ( diaDeLaSemana < 6 ) {

irA( escuela );

diaDeLaSemana = diaDeLaSemana + 1;

//El bloque de código se repetirá hasta que diaDeLaSemana = 6

anímate a experimentar un poco con esto, y luego acompáñame a

realizar la práctica de hoy 😉

Cómo implementar ciclos en el juego de piedra, papel y tijera

Empecemos 😁

1. Agrega variables para contar las victorias

Primero agrega un par de variables que te permitan contar cuantas

victorias, derrotas y empates ha acumulado el jugador. Y también
necesitas modificar el juego para que el jugador los acumule con cada
partida.

Para que el juego no se sienta tan largo vamos a detenerlo luego de 2

victorias o 2 derrotas. Así que es buena idea programar una función que
le informe al jugador los resultados finales, y podrías agregar una
segunda función que reinicie las variables para un próximo juego.
Intenta hacerlo por tu cuenta, y cuando termines compáralo con el
ejemplo de aquí abajo 🙂

//FUNCIÓN PARA LAS ALERTAS

function alertaDeElecciones( quienElije , eleccion ) {

if ( eleccion == 1 ) {

alert( "El " + quienElije + " eligió 🥌" );

} else if ( eleccion == 2 ) {

alert( "El " + quienElije + " eligió 📄" );

} else if ( eleccion == 3 ) {

alert( "El " + quienElije + " eligió ✂️" );

} else {

alert( "Hubo un error con la elección del " + quienElije + " 🙃" );

//FUNCIÓN PARA GENERAR NÚMEROS ALEATORIOS

function numeroAleatorio( min , max ) {

return Math.floor( Math.random() * ( max - min + 1 ) + min );

//FUNCIÓN PARA DECIDIR EL GANADOR

function quienGanaEntre ( eleccionJugador , eleccionOponente ) {

if ( eleccionJugador == eleccionOponente ) {

alert( "¡EMPATE! 🤼" );

empates = empates + 1;

} else if ( eleccionJugador == 1 && eleccionOponente == 3 ) {

alert( "¡GANASTE! 🥳" );

 victorias = victorias + 1;

} else if ( eleccionJugador == 2 && eleccionOponente == 1 ) {

alert( "¡GANASTE! 🥳" );

victorias = victorias + 1;

} else if ( eleccionJugador == 3 && eleccionOponente == 2 ) {

alert( "¡GANASTE! 🥳" );

victorias = victorias + 1;

} else {

alert( "PERDISTE... 😢" );

derrotas = derrotas + 1;

//FUNCIÓN PARA NOMBRAR AL GANADOR FINAL

function mostrarResultados() {

alert("Has acumulado " +

victorias + " victorias, " +

derrotas + " derrotas y " +

empates + " empates.");

if ( victorias == 2 ) {

alert( "TÚ eres el GANADOR" );

resetearVariables();

} else if ( derrotas == 2 ) {

alert( "EL COMPUTADOR es el GANADOR" );

resetearVariables();

} else {
 alert( "Hubo un error... 🙃");

resetearVariables();

//FUNCIÓN PARA RESETEAR VARIABLES DE VICTORIAS

function resetearVariables() {

victorias = 0;

derrotas = 0;

empates = 0;

//ELECCIÓN DEL JUGADOR

let eleccionDelJugador = 0;

eleccionDelJugador = prompt( "Elige: 1 para 🥌, 2 para 📄, 3 para ✂️" );

alertaDeElecciones( "jugador" , eleccionDelJugador );

//ELECCIÓN DEL COMPUTADOR

let eleccionDelComputador = numeroAleatorio( 1 , 3 );

alertaDeElecciones( "computador" , eleccionDelComputador );

//DECIDIENDO EL GANADOR

let victorias = 0;

let derrotas = 0;

let empates = 0;

quienGanaEntre ( eleccionDelJugador , eleccionDelComputador );

2. Implementa el ciclo “while”

Es momento de implementar el ciclo en tu código. Para hacerlo, ten
presente la siguiente información:

 El juego se detiene cuando el jugador acumule dos victorias o dos

derrotas.

 La elección del jugador y del computador debe repetirse en cada

ciclo.

 Al completar el ciclo, debes mostrarle los resultados al jugador y

resetear las variables de juego.

Hacer esto requiere que muevas algunas cosas dentro del código.
Intenta hacerlo por tu cuenta, y luego lo comparas con el código aquí
abajo 😉

//FUNCIÓN PARA LAS ALERTAS

function alertaDeElecciones( quienElije , eleccion ) {

if ( eleccion == 1 ) {

alert( "El " + quienElije + " eligió 🥌" );

} else if ( eleccion == 2 ) {

alert( "El " + quienElije + " eligió 📄" );

} else if ( eleccion == 3 ) {

alert( "El " + quienElije + " eligió ✂️" );

} else {

alert( "Hubo un error con la elección del " + quienElije + " 🙃" );

//FUNCIÓN PARA GENERAR NÚMEROS ALEATORIOS

function numeroAleatorio( min , max ) {

return Math.floor( Math.random() * ( max - min + 1 ) + min );

}
//FUNCIÓN PARA DECIDIR EL GANADOR

function quienGanaEntre ( eleccionJugador , eleccionOponente ) {

if ( eleccionJugador == eleccionOponente ) {

alert( "¡EMPATE! 🤼" );

empates = empates + 1;

} else if ( eleccionJugador == 1 && eleccionOponente == 3 ) {

alert( "¡GANASTE! 🥳" );

victorias = victorias + 1;

} else if ( eleccionJugador == 2 && eleccionOponente == 1 ) {

alert( "¡GANASTE! 🥳" );

victorias = victorias + 1;

} else if ( eleccionJugador == 3 && eleccionOponente == 2 ) {

alert( "¡GANASTE! 🥳" );

victorias = victorias + 1;

} else {

alert( "PERDISTE... 😢" );

derrotas = derrotas + 1;

//FUNCIÓN PARA NOMBRAR AL GANADOR FINAL

function mostrarResultados() {

alert("Has acumulado " +

victorias + " victorias, " +

derrotas + " derrotas y " +

empates + " empates.");

 if ( victorias == 2 ) {

alert( "TÚ eres el GANADOR" );

resetearVariables();

} else if ( derrotas == 2 ) {

alert( "EL COMPUTADOR es el GANADOR" );

resetearVariables();

} else {

alert( "Hubo un error... 🙃");

resetearVariables();

//FUNCIÓN PARA RESETEAR VARIABLES DE VICTORIAS

function resetearVariables() {

victorias = 0;

derrotas = 0;

empates = 0;

//ELECCIÓN DEL JUGADOR

let eleccionDelJugador = 0;

//ELECCIÓN DEL COMPUTADOR

let eleccionDelComputador = 0;

//DECIDIENDO EL GANADOR

let victorias = 0;
let derrotas = 0;

let empates = 0;

while ( victorias < 2 && derrotas < 2 ) {

eleccionDelJugador = prompt( "Elige: 1 para 🥌, 2 para 📄, 3 para ✂️" );

eleccionDelComputador = numeroAleatorio( 1 , 3 );

alertaDeElecciones( "jugador" , eleccionDelJugador );

alertaDeElecciones( "computador" , eleccionDelComputador );

quienGanaEntre ( eleccionDelJugador , eleccionDelComputador );

mostrarResultados();

las instrucciones son términos nativos de la promacion que modifican el

código.

While, es un ciclo verdadero

Estructura de archivos

Toda computadora, e incluso los teléfonos, emplean la misma estructura

de archivos. Esto es un árbol de carpetas dónde se almacena toda la
información del ordenador. En ese sentido, tienes carpetas dedicadas a
diferentes objetivos y todo vive dentro de estas carpetas.

Estructura de archivos según el sistema operativo

💡 En Windows, la carpeta raíz es el disco duro (comúnmente llamado

“C:”).

¿Por qué una “C:”? Pues, alguien le asignó la “A:” y la “B:” a los
disquetes o “Floppy disc” de antes. Así que los discos duros empiezan a
contar a partir de la “C:”.

💡 En el caso de Linux, la carpeta raíz es el “home”. Desde ahí parte todo,

incluyendo tu carpeta de usuario donde guardas todo lo demás.
💡 el caso de una web no es muy diferente. La carpeta raíz generalmente
es tu dominio web (ej.: “www.platzi.com”). Y desde ahí parten todas las
carpetas y archivos que componen tu sitio web.

💡 Ojo

Windows tiene una particularidad en su estructura de archivos: Windows

no presta atención a las mayúsculas en los nombres de carpetas o
archivos. Pero todos los demás sí. La mayoría de los servidores web son
Linux. Y en Linux, la carpeta “Documentos/” es diferente a la
carpeta “documentos/”.

Presta mucha atención al uso de mayúsculas en los nombres de archivos

para tu sitio web. Y, preferiblemente, escribe todos los nombres en
minúscula. En el caso de nombres compuestos, puedes utilizar “_” para
separar las palabras (de_este_modo.txt).

Estructura de archivos relativa

Para escribir una ruta absoluta, tienes que empezar por la carpeta raíz y
escribir la dirección carpeta por carpeta, hasta llegar al archivo que
estás buscando. Por ejemplo:

/home/Freddier/docs/cursito/codigo.html. Sin embargo, recuerda que

naturalmente puedes navegar entre carpetas (en especial si lo haces
desde la terminal de comandos, o desde el explorador de archivos).

Cuando navegas hacia una carpeta, esta se convierte en tu posición

relativa. Y en programación, puedes aprovechar tu posición relativa
para referir a todos los archivos que necesites dentro de esa carpeta, o
incluso un nivel afuera. Por ejemplo, si estás dentro de la carpeta
“programar/”, entonces puedes hacer referencia a un archivo dentro de
ella simplemente por si nombre, o por la dirección que sigue luego.

Dentro de “programar/” puedes invocar archivos que viven dentro de

ella tan fácil como escribir como “imágenes/foto.jpg” o “juego.html”

💡 Esto es importante porque tu sitio web tiene una estructura de

carpetas como esta, dónde se guardan todos los archivos que vas a usar.

Sin embargo, para que el usuario pueda observarlos, antes tienes

que ejecutarlos desde el HTML. Y eso significa que tendrás que
escribir estas rutas de archivos con mucha frecuencia dentro de tu
código.

Estructura de archivos de un sitio web

Todo empieza por la carpeta dónde se encuentra el proyecto. Allí es

dónde suelen estar los archivos HTML del sitio web.

Sin embargo, archivos complementarios como imágenes, código

JavaScript o las hojas de estilos CSS suelen vivir en carpetas diferentes
dentro de la carpeta del proyecto, cada una dedicada a un tipo de
archivo.

💡 Aunque puedes escribir el código directamente en el archivo HTML, la

mejor práctica es escribirlo en archivos separados.

Recuerda que en muchas ocasiones los archivos pueden volverse muy

extensos y complejos. Por esa razón, lo ideal es tener al menos un
archivo para el HTML, otro para el CSS y otro para el código JavaScript.
Esto también te beneficia en tu editor de código porque si trabajas en un
archivo con un solo lenguaje, le das la oportunidad al editor de código de
brindarte todo el soporte que ya tiene para ese lenguaje.
💡 Puedes invocar el código en otros archivos a través de etiquetas HTML
con sus respectivos atributos.

Para ejecutar un archivo CSS se usa:

<link href="css/estilos.css" rel="stylesheet">

Y para ejecutar un archivo JavaScript, colocas:

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

💡 Es importante que coloques la extensión correcta para los archivos. Si

los escribes mal, el navegador no podrá cargarlos para construir tu sitio
web.

Si estás en Windows, recuerda activar la opción para ver las extensiones

de los archivos desde el explorador de archivos → vista → mostrar u
ocultar → Extensiones de nombre de archivo.

Conocer y dominar la estructura de archivos es una habilidad

fundamental para un programador.

De hecho, existe otra habilidad que es de mucha ayuda para

programadores, que consiste en dominar la terminal y línea de
comandos. Esto es relevante para dominar Git o para programar en
backend. Si te interesa, puedes profundizar más en el curso de terminal
y línea de comandos de Platzi.

Pero no dejes de completar este curso. Así que empieza por separar el
código JavaScript del HTML en nuestro juego de piedra, papel o tijera, y
conéctalos con el atributo de la etiqueta <script> que conociste más
arriba (y no olvides revisar la indentación luego de copiar y pegar).

Válida que tu juego aún funciona, puedes usar los archivos de la clase
como punto de comparación si lo necesitas. Y cuando termines continúa
a la siguiente clase, donde aprenderemos sobre qué es el DOM.

¿Qué es el DOM?
El DOM (Document Object Model) es el modelo que usa el navegador
para estructurar las etiquetas HTML y puedes aprovechar esto para
modificarlas y hacer cambios con código JavaScript. ¿Cómo funciona?
Quédate para averiguarlo.

Partes del DOM

En el document es donde cargan todas las etiquetas HTML. Y el

navegador es capaz de detectar todo lo que ocurre a estas etiquetas.