Información sobre la tarea
La entrega será en formato PDF. Leer Entrega y presentación de tareas.
La tarea se calificará con una nota de APTO (10) o NO APTO (0).
Duración actividades obligatorias: 10 horas.
RA 2. Escribe sentencias simples, aplicando la sintaxis del lenguaje y verificando su ejecución sobre navegadores Web.
Actividades
Es muy importante leer los apuntes y realizar las actividades. Los actividades de esta unidad son base para la realización de actividades en las próximas unidades.
Crear cuenta
Crea una cuenta con el correo de la escuela en freeCodeCamp y asegúrate de hacer login antes de empezar con la siguiente actividad.
Hacer público todo tu perfil
En Ajustes de cuenta añade los datos correspondientes a “Nombre”, “Ubicación” y “Acerca de mí” de manera similar a como he hecho yo. Posteriormente deberás guardar los cambios.
Ajustes principales de cuenta
Además, deberás poner todas las opciones en público y guardar los cambios.
Ajustes de privacidad
📷 Haz una captura de tu perfil vacío y añade el enlace de tu perfil público. En mi caso este es mi perfil. Recuerda que tu perfil debe ser público y se te debe poder identificar de manera inequívoca con tu nombre completo o tu código de usuario.
JavaScript básico en freeCodeCamp
Opción 1 (en inglés): Ir a la certificación JavaScript Algorithms and Data Structures (Beta) y hacer el curso “Learn Introductory JavaScript by Building a Pyramid Generator”.
Si tienes el módulo de inglés es obligatorio hacer la Opción 1.
Opción 2 (en español): Ir a la certificación Algoritmos de JavaScript y Estructuras de Datos y hacer el curso “JavaScript básico”.
📷 Cuando termines todos los pasos, haz una captura de tu perfil.
Tabla de multiplicar
Crea los ficheros del proyecto como se muestra a continuación:
Una vez vista la estructura, pasemos a ver el formulario y la inclusión de nuestro fichero .js en el archivo index.html.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8" />
<title>Tabla de multiplicar</title>
<script src="js/tablaMultiplicar.js"></script>
</head>
<body>
<h1>Tabla de multiplicar</h1>
<form onsubmit="mostrarTabla(event)">
<label for="numero">Introduce el número:</label>
<input id="numero" type="number" required />
<input type="submit" value="Mostrar tabla" />
</form>
<div id="tabla"></div>
</body>
</html>
El fichero index.html contiene:
- La inclusión del archivo
tablaMultiplicar.js. - Un formulario para que el usuario introduzca el número del que quiere visualizar su tabla de multiplicar. Este formulario, cuando es enviado (aunque no es enviado a ningún lado, simplemente se valida en lado del cliente), mediante el evento onSubmit del mismo, simplemente llama a la función mostrarTabla() que está definida en nuestro archivo tablaMultiplicar.js.
- Un bloque vacío cuyo
idestablay en el que luego mostraremos los resultados.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const mostrarTabla = (event) => {
event.preventDefault();
const numero = Number(document.getElementById('numero').value);
if (numero >= 0 && numero <= 10) {
let tabla = document.getElementById('tabla');
let tablaMultiplicar = `<h2>Tabla de multiplicar del número ${numero}</h2>`;
tablaMultiplicar += '<ul>';
for (let i = 0; i <= 10; i++) {
tablaMultiplicar += `<li>${numero} * ${i} = ${numero * i}</li>`;
}
tablaMultiplicar += '</ul>';
tabla.innerHTML = tablaMultiplicar;
} else {
alert('El número introducido debe estar entre 0 y 10 (ambos inclusive');
document.getElementById("numero").value = '';
}
}
El fichero tablaMultiplicar.js tiene una función que realiza las siguientes acciones.
- Primero de todo previene que el evento se propague. Todo eso lo entenderás mejor más adelante, pero si no lo hiciese, al terminar limpia los campos y no nos deja ver el resultado (te animo a que comentes dicha línea -línea número 2- para que veas lo que sucede).
- Pasa el valor del campo de texto a número y luego comprueba mediante una sentencia condicional si está entre los valores aceptados o no.
- Si lo está, rellena lo que se quiere mostrar en el bloque cuyo id es tabla mediante un bucle.
- Si no lo está, alerta al usuario del error y elimina el contenido del campo de texto.
📸 Recuerda añadir tu código de usuario y hacer capturas del código funcionando.
Tabla de dividir
Haz lo mismo que en la primera actividad pero en lugar de la tabla de multiplicar haz que aparezca la tabla de dividir.
📸 Recuerda añadir tu código de usuario y hacer capturas del código funcionando.
Estructuras de datos básicas en freeCodeCamp
Ir a la certificación Algoritmos de JavaScript y Estructuras de Datos y hacer el curso “Estructuras de datos básicas”.
📷 Cuando termines todos los pasos, haz una captura de tu perfil.