A1. Fundamentos de JavaScript

En esta actividad comprobarás los conceptos estudiados en la UD2. Fundamentos de sintaxis en JavaScript, mediante un proyecto creado con Vite y JavaScript (Vanilla).

El objetivo es ejecutar, modificar y ampliar los ejemplos de los distintos epígrafes de teoría, mostrando los resultados directamente en la página del navegador, en lugar de utilizar console.log() como mecanismo de salida.

1. Preparación del proyecto

Crea un proyecto con Vite, seleccionando la plantilla Vanilla y el lenguaje JavaScript, como se explicó en la UD1.

Organiza las comprobaciones en archivos JavaScript independientes para los distintos apartados de teoría. Puedes utilizar la siguiente estructura orientativa:

ud2/
├── index.html
├── package.json
└── src/
    ├── code.js
    ├── types.js
    ├── variables.js
    ├── operators.js
    ├── conversions.js
    ├── control-flow.js
    └── loops.js

En index.html, incorpora un elemento con id="app" y carga el archivo JavaScript que quieras comprobar mediante una etiqueta <script type="module">.

Inicia el servidor de desarrollo de Vite y abre la aplicación en el navegador.

2. Comprobación de los contenidos

Revisa todos los epígrafes de los siete apartados de teoría y escribe las pruebas necesarias para comprobar los conceptos explicados.

Apartado	Contenidos que debes comprobar
1. Código JavaScript	Elementos básicos del código, expresiones, sentencias, bloques, comentarios y convenciones de escritura.
2. Tipos de datos	Tipos de datos, valores y comprobaciones con typeof.
3. Variables	Declaración, inicialización, var, let, const y ámbito de las variables.
4. Operadores	Operadores estudiados, expresiones y precedencia.
5. Conversiones de tipos	Conversiones explícitas e implícitas y sus resultados.
6. Control de flujo	Condiciones y estructuras de decisión.
7. Bucles	Estructuras de repetición e instrucciones de control de bucles.

Para cada apartado:

• Comprueba mediante código los conceptos de sus distintos epígrafes.
• Modifica los ejemplos de teoría y realiza pruebas adicionales.
• Muestra los resultados de las pruebas en la página web.
• Añade comentarios cuando sea necesario explicar el comportamiento observado.

Ejemplo de solución propuesta

Como referencia, puedes utilizar el ejemplo del apartado Tipos de datos. Consta de un documento HTML y un archivo JavaScript que construye el contenido mediante una template literal y lo muestra en el elemento #app.

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Types</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="main.js"></script>
  </body>
</html>

main.js

/* ========================================
 * INITIALIZATION
 * ======================================== */
const app = document.querySelector("#app");

/* ========================================
 * TEST CODE
 * ======================================== */
const result = `
<h1>Tipos de datos primitivos en Javascript</h1>
<h2>number</h2>
<p>El valor <b>0</b> es de tipo <b>${typeof 0}</b></p>
<p>El valor <b>10</b> es de tipo <b>${typeof 10}</b></p>
<p>El valor <b>-10</b> es de tipo <b>${typeof -10}</b></p>
<p>El valor <b>10.45</b> es de tipo <b>${typeof 10.45}</b></p>
<p>El valor <b>8e100</b> es de tipo <b>${typeof 8e100}</b></p>
<p>El valor <b>NaN</b> es de tipo <b>${typeof NaN}</b></p>
<p>El valor <b>Infinity</b> es de tipo <b>${typeof Infinity}</b></p>
<p>El valor <b>-Infinity</b> es de tipo <b>${typeof -Infinity}</b></p>
<h2>string</h2>
<p>El valor <b>"a"</b> es de tipo <b>${typeof "a"}</b></p>
<p>El valor <b>'a'</b> es de tipo <b>${typeof "a"}</b></p>
<p>El valor <b>"palabra"</b> es de tipo <b>${typeof "palabra"}</b></p>
<p>El valor <b>'palabra'</b> es de tipo <b>${typeof "palabra"}</b></p>
<p>El valor <b>"Una frase completa entre comillas dobles."</b> es de tipo <b>${typeof "Una frase completa entre comillas dobles."}</b></p>
<p>El valor <b>'Otra frase completa entre comillas simples.'</b> es de tipo <b>${typeof "Otra frase completa entre comillas simples."}</b></p>
<p>El valor <b>10</b> es de tipo <b>${typeof 10}</b></p>
<p>El valor <b>10</b> es de tipo <b>${typeof 10}</b></p>
`;

/* ========================================
 * BROWSER OUTPUT
 * ======================================== */
app.innerHTML = result;

En tu proyecto Vite puedes conservar este mismo planteamiento. Si colocas el código JavaScript en src/types.js, modifica la ruta del script en index.html a /src/types.js.

Amplía el ejemplo con las comprobaciones que consideres necesarias y aplica el mismo procedimiento a los demás apartados de la unidad.

3. Entrega

Incorpora el proyecto a tu repositorio de DWEC, dentro del apartado correspondiente a la UD2.

El proyecto debe contener las pruebas de los distintos epígrafes y permitir visualizar sus resultados en el navegador mediante el servidor de desarrollo de Vite.

No es necesario diseñar una interfaz gráfica elaborada. El objetivo es comprobar el funcionamiento del lenguaje JavaScript y presentar los resultados de forma clara.