Código del ejercicio:
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.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
function --> es un bloque de código diseñado para realizar una tarea en particular.
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.
`${}` --> los literales de plantilla (cadenas de plantilla) le permiten utilizar cadenas o expresiones incrustadas en forma de cadena.
Explicación del Código:
Código original
<!DOCTYPE html>
<html lang="es">
...
<script>
function convertir(){
let centimetro=parseFloat(document.getElementById('centimetro').value);
let convertir=centimetro*10;
document.getElementById('resultado').value=`${convertir} mm`;
}
</script>
Explicación de cada parte
| Código | Función |
|---|---|
| <!DOCTYPE html> | Indica que el documento utiliza HTML5. |
| <html lang="es"> | Inicia la página e indica que el idioma es español. |
| <head> | Contiene la configuración del documento. |
| meta charset="UTF-8" | Permite mostrar correctamente caracteres especiales. |
| meta viewport | Hace que la página sea responsive. |
| title | Define el nombre que aparece en la pestaña del navegador. |
| <body> | Contiene el contenido visible. |
| <h3> | Muestra el título del ejercicio. |
| <form> | Agrupa los controles del formulario. |
| input type="number" | Permite ingresar únicamente números. |
| input type="button" | Ejecuta la función convertir() al hacer clic. |
| input type="reset" | Limpia los datos del formulario. |
| input type="text" | Muestra el resultado de la conversión. |
| <script> | Contiene el código JavaScript. |
Explicación de la función convertir()
function convertir(){
let centimetro = parseFloat(document.getElementById('centimetro').value);
let convertir = centimetro * 10;
document.getElementById('resultado').value = `${convertir} mm`;
}
- Se crea la función
convertir(), que se ejecutará al presionar el botón Convertir. - Obtiene el valor escrito por el usuario mediante
document.getElementById('centimetro').value. - parseFloat() convierte ese valor de texto a un número decimal.
- Realiza la operación: multiplica los centímetros por 10, ya que 1 cm = 10 mm.
- Muestra el resultado en la caja de texto con el texto "mm".
Ejemplo
Si el usuario escribe 15, el programa realiza:
15 × 10 = 150 mm
Ese resultado aparece automáticamente en el cuadro de resultado.
15 × 10 = 150 mm
Ese resultado aparece automáticamente en el cuadro de resultado.
Resumen
- El usuario escribe una cantidad en centímetros.
- Presiona el botón Convertir.
- JavaScript obtiene el dato.
- Multiplica el valor por 10.
- El resultado se muestra en milímetros.
No hay comentarios.:
Publicar un comentario