Código del ejercicio: Multiplicación de dos números
Definición de los códigos del ejercicio:
<h3></h3> --> representa un encabezado de nivel 3.<form></form> --> se utiliza para crear un formulario HTML para la entrada del usuario.
<br> --> produce un salto de línea en el texto.
<label></label> --> representa una etiqueta para un elemento en una interfaz de usuario.
<input> --> etiqueta especifica un campo de entrada donde el usuario puede ingresar datos.
onclick --> onclick evento ocurre cuando el usuario hace clic en un elemento.
<script></script> --> contiene comandos u ordenes que se van ejecutando de manera secuencial y comúnmente se utilizan para controlar el comportamiento de un programa en específico o para interactuar con el sistema operativo.
function --> es un bloque de código diseñado para realizar una tarea en particular.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
parseFloat() --> analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.
Explicación del Código:
Este programa permite multiplicar dos números ingresados por el usuario mediante un formulario HTML. Cuando se hace clic en el botón Calcular, una función escrita en JavaScript realiza la operación y muestra el resultado en la pantalla.
1. Declaración del documento HTML
<!DOCTYPE html>Indica que el documento está escrito en HTML5.
<html lang="es">Inicia el documento HTML y especifica que el idioma de la página es español.
2. Sección <head>
<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>Ejercicio HTML y JavaScript</title>
</head>Cada línea cumple una función específica:
| Código | Función |
|---|---|
| meta charset="UTF-8" | Permite mostrar correctamente letras, acentos y caracteres especiales. |
| meta http-equiv="X-UA-Compatible" | Hace que el navegador utilice el modo más moderno de visualización. |
| meta viewport | Hace que la página sea adaptable a celulares, tabletas y computadoras. |
| title | Define el nombre que aparece en la pestaña del navegador. |
3. Título del formulario
<h3>Multiplicación de dos números</h3>Muestra el título principal del ejercicio.
4. Formulario
<form>
...
</form>El formulario contiene todos los controles que utiliza el usuario para ingresar datos y visualizar el resultado.
5. Primer número
<label>número 1:</label>
<input type="number" id="n1">El usuario escribe el primer número. El atributo id="n1" permite que JavaScript pueda obtener su valor.
6. Segundo número
<label>número 2:</label>
<input type="number" id="n2">Permite ingresar el segundo número que será multiplicado.
7. Botón Calcular
<input type="button"
value="Calcular"
onclick="calcular()">Cuando el usuario hace clic sobre este botón, se ejecuta la función calcular().
8. Botón Limpiar
<input type="reset" value="Limpiar">Borra todos los datos ingresados en el formulario.
9. Campo resultado
<input type="text" id="resultado">Aquí se muestra el resultado de la multiplicación.
10. Función JavaScript
function calcular(){
let n1 = parseFloat(document.getElementById('n1').value);
let n2 = parseFloat(document.getElementById('n2').value);
let m = n1 * n2;
document.getElementById('resultado').value = m;
}11. Explicación línea por línea
| Línea | Explicación |
|---|---|
| function calcular(){ | Crea una función llamada calcular. |
| document.getElementById('n1') | Busca el cuadro donde el usuario escribió el primer número. |
| .value | Obtiene el contenido escrito por el usuario. |
| parseFloat() | Convierte el texto ingresado en un número decimal para poder realizar operaciones matemáticas. |
| let m = n1 * n2; | Multiplica ambos números y guarda el resultado en la variable m. |
| document.getElementById('resultado').value = m; | Muestra el resultado dentro del cuadro de texto llamado resultado. |
12. Funcionamiento del programa
- El usuario escribe el primer número.
- Escribe el segundo número.
- Hace clic en Calcular.
- JavaScript obtiene ambos valores.
- Los convierte a números mediante parseFloat().
- Realiza la multiplicación.
- Finalmente muestra el resultado en el campo resultado.
13. Resumen
Este ejercicio muestra cómo combinar HTML para crear un formulario y JavaScript para realizar una operación matemática. Además, utiliza getElementById() para acceder a los elementos del formulario, parseFloat() para convertir los datos a números y el operador * para realizar la multiplicación. El resultado se presenta automáticamente en el campo correspondiente, permitiendo al usuario conocer el producto de los dos números ingresados.
Código del ejercicio: Multiplicación de cinco números
Definición de los códigos del ejercicio:
<h3></h3> --> representa un encabezado de nivel 3.<form></form> --> se utiliza para crear un formulario HTML para la entrada del usuario.
<br> --> produce un salto de línea en el texto.
<label></label> --> representa una etiqueta para un elemento en una interfaz de usuario.
<input> --> etiqueta especifica un campo de entrada donde el usuario puede ingresar datos.
onclick --> onclick evento ocurre cuando el usuario hace clic en un elemento.
<script></script> --> contiene comandos u ordenes que se van ejecutando de manera secuencial y comúnmente se utilizan para controlar el comportamiento de un programa en específico o para interactuar con el sistema operativo.
function --> es un bloque de código diseñado para realizar una tarea en particular.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
parseFloat() --> analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.
Explicación del Código:
1. Declaración del documento HTML
Indica que el documento está escrito en HTML5, permitiendo que el navegador interprete correctamente todo el contenido de la página.
2. Etiqueta HTML
Es la etiqueta principal del documento. El atributo lang="es" indica que el contenido de la página está escrito en español.
3. Sección <head>
Contiene información de la página que no se muestra directamente al usuario, como la codificación de caracteres, el título y la configuración para dispositivos móviles.
4. Título del ejercicio
Muestra el título del ejercicio para indicar al usuario cuál es la función del programa.
5. Formulario
Agrupa todos los controles del ejercicio, como las cajas de texto, botones y el resultado.
6. Cajas de texto para ingresar números
Cada caja permite ingresar un número. El atributo id identifica cada campo para que JavaScript pueda obtener su valor.
7. Botón Calcular
Cuando el usuario hace clic en este botón, se ejecuta la función calcular(), encargada de realizar la multiplicación.
8. Botón Limpiar
Limpia todos los campos del formulario y deja el ejercicio listo para realizar un nuevo cálculo.
9. Caja de resultado
Muestra el resultado obtenido después de multiplicar los cinco números ingresados por el usuario.
10. Función calcular()
Esta función contiene todas las instrucciones necesarias para obtener los valores, realizar la multiplicación y mostrar el resultado.
11. Obtener los valores de las cajas de texto
Obtiene el número escrito por el usuario en la caja de texto. La función parseFloat() convierte el contenido en un número decimal para poder realizar operaciones matemáticas.
12. Multiplicar los números
Multiplica los cinco números ingresados por el usuario y guarda el resultado en la variable m.
13. Mostrar el resultado
Coloca el resultado de la multiplicación dentro de la caja de texto con el identificador resultado, permitiendo que el usuario vea el resultado final.
Resumen
Este programa solicita al usuario cinco números, los convierte a valores numéricos mediante parseFloat(), realiza la multiplicación de todos ellos y muestra el resultado en una caja de texto al presionar el botón Calcular. El botón Limpiar borra todos los datos para poder realizar un nuevo cálculo.
No hay comentarios.:
Publicar un comentario