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.
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.
`${}` --> los literales de plantilla (cadenas de plantilla) le permiten utilizar cadenas o expresiones incrustadas en forma de cadena.
Explicación del Código:
1. Declaración del documento
<!DOCTYPE html>
Indica que el documento utiliza la versión HTML5. Esto permite que el navegador interprete correctamente todo el contenido de la página.
2. Etiqueta HTML
<html lang="es">
Es la etiqueta principal del documento HTML.
El atributo lang="es" indica que el idioma del sitio es español.
3. Encabezado (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>
-
meta charset="UTF-8"
Permite utilizar correctamente letras con tilde, la letra ñ y otros caracteres especiales. -
meta http-equiv
Mejora la compatibilidad del sitio con algunos navegadores. -
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.
4. Título del ejercicio
<h3>
Convertir Grado Celsius a Grado Fahrenheit
</h3>
Muestra el nombre del ejercicio dentro de la página web.
5. Formulario HTML
<form>
<label>Grado Celsius:</label>
<input type="number" id="celsius">
<input type="button"
value="Convertir"
onclick="convertir()">
<input type="reset"
value="Limpiar">
<label>Resultado:</label>
<input type="text"
id="resultado">
</form>
-
label
Muestra el texto descriptivo del campo. -
input type="number"
Permite ingresar únicamente números correspondientes a los grados Celsius. -
id="celsius"
Identifica el cuadro de texto para que JavaScript pueda obtener el valor ingresado. -
input type="button"
Crea el botón Convertir. -
onclick="convertir()"
Ejecuta la función convertir() cuando el usuario hace clic en el botón. -
input type="reset"
Limpia todos los campos del formulario. -
input type="text"
Muestra el resultado de la conversión. -
id="resultado"
Identifica el cuadro donde aparecerá el resultado.
6. Función JavaScript
function convertir(){
let celsius =
parseFloat(
document.getElementById('celsius').value);
let convertir =
1.8 * celsius + 32;
document.getElementById('resultado').value =
`${convertir} °F`;
}
Paso 1. Crear la función
La función convertir() contiene todas las instrucciones necesarias para realizar la conversión de temperatura. Se ejecuta al hacer clic en el botón Convertir.
Paso 2. Obtener el dato ingresado
let celsius =
parseFloat(document.getElementById('celsius').value);
document.getElementById('celsius') busca el cuadro de texto donde el usuario escribió la temperatura.
.value obtiene el contenido del cuadro.
parseFloat() convierte ese contenido en un número decimal.
Finalmente, el número se guarda en la variable celsius.
Paso 3. Realizar la conversión
let convertir =
1.8 * celsius + 32;
Se aplica la fórmula para convertir grados Celsius a grados Fahrenheit.
El resultado obtenido se almacena en la variable convertir.
Paso 4. Mostrar el resultado
document.getElementById('resultado').value =
`${convertir} °F`;
Se busca el cuadro de texto llamado resultado y se muestra la temperatura convertida agregando el símbolo °F.
7. Funcionamiento del programa
- El usuario escribe una temperatura en grados Celsius.
- Presiona el botón Convertir.
- JavaScript obtiene el número ingresado.
- Aplica la fórmula de conversión:
- Finalmente muestra el resultado en grados Fahrenheit.
No hay comentarios.:
Publicar un comentario