lunes, 29 de junio de 2026

Realice un algoritmo que a partir de proporcionarle la velocidad de un automóvil, expresada en kilómetros por hora, proporcione la velocidad en metros por segundo en HTML y JavaScript

Código del ejercicio:

<!DOCTYPE html>
<html lang="es">
<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>
<body>
    <h3>Realice un algoritmo que a partir de proporcionarle la velocidad de un automóvil, expresada en kilómetros por hora, proporcione la velocidad en metros por segundo</h3>
    <form action="">
        <label for="">kilómetros por hora:</label>
        <input type="number" id="kmporh"><br><br>
        <input type="button" value="Convertir" onclick="convertir()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label><br>
        <textarea name="" id="resultado" cols="30" rows="10"></textarea>
    </form>
    <script>
        function convertir(){
            let velocidad = parseFloat(document.getElementById('kmporh').value);
            let convertir = velocidad * 0.277778;
            document.getElementById('resultado').value = convertir.toFixed(2) + " metros por segundo";
        }
    </script>
</body>
</html>

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.
<textarea></textarea> --> define un control de entrada de texto de varias líneas.
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.
.toFixed() --> convierte un número a cadena conservando los N primeros decimales.
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:

Objetivo del ejercicio

Este programa solicita la velocidad de un automóvil en kilómetros por hora (km/h). Después realiza la conversión a metros por segundo (m/s) y muestra el resultado en pantalla.

1. Declaración del documento HTML

<!DOCTYPE html>

Indica que el documento está escrito en HTML5. Esto permite que el navegador interprete correctamente la página.

2. Etiqueta HTML

<html lang="es">

Es la etiqueta principal del documento. El atributo lang="es" indica que la página está en español.

3. Sección <head>

<head> ... </head>

Contiene información importante para el navegador, como la codificación de caracteres, la adaptación a dispositivos móviles y el título de la página.

4. Título del ejercicio

<h3>...</h3>

Muestra el enunciado del ejercicio para que el usuario sepa qué realizará el programa.

5. Formulario

<form> ... </form>

Agrupa todos los controles del programa: etiquetas, cajas de texto, botones y el área donde se muestra el resultado.

6. Etiqueta (label)

<label>Kilómetros por hora:</label>

Muestra un texto indicando qué dato debe ingresar el usuario.

7. Caja de entrada

<input type="number" id="kmporh">

Permite escribir únicamente números. Aquí el usuario ingresa la velocidad en kilómetros por hora.

El identificador id="kmporh" permite que JavaScript encuentre esta caja de texto.

8. Botón Convertir

<input type="button" value="Convertir" onclick="convertir()">

Cuando el usuario hace clic en este botón, se ejecuta la función convertir().

9. Botón Limpiar

<input type="reset" value="Limpiar">

Borra todos los datos escritos en el formulario y deja los controles vacíos.

10. Área de resultado

<textarea id="resultado"></textarea>

Muestra el resultado de la conversión realizada por el programa.

11. Inicio de JavaScript

<script> ... </script>

Dentro de esta etiqueta se escribe el código JavaScript encargado de realizar los cálculos.

12. Función convertir()

function convertir(){ }

Es una función que se ejecuta cuando el usuario presiona el botón Convertir.

13. Obtener el dato ingresado

let velocidad = parseFloat(document.getElementById('kmporh').value);

Esta línea realiza tres acciones:

  • Busca la caja de texto con getElementById().
  • Obtiene el valor escrito por el usuario mediante .value.
  • Convierte ese texto en un número decimal usando parseFloat().

14. Realizar la conversión

let convertir = velocidad * 0.277778;

Multiplica la velocidad por 0.277778, ya que:

1 km/h = 0.277778 m/s.

El resultado queda almacenado en la variable convertir.

15. Mostrar el resultado

document.getElementById('resultado').value = convertir.toFixed(2) + " metros por segundo";

Esta instrucción:

  • Busca el área de texto llamada resultado.
  • Muestra el valor convertido.
  • toFixed(2) limita el número a dos decimales.
  • Agrega el texto "metros por segundo".

Resumen del funcionamiento

  1. El usuario escribe una velocidad en kilómetros por hora.
  2. Hace clic en el botón Convertir.
  3. JavaScript obtiene el número ingresado.
  4. Multiplica la velocidad por 0.277778.
  5. El resultado se muestra en metros por segundo con dos decimales.
  6. Si el usuario pulsa Limpiar, el formulario vuelve a quedar vacío.

No hay comentarios.:

Publicar un comentario

Mostrar los n primeros números de la siguiente serie: 1,6,36,216,1296,7776,46656,... en HTML y JavaScript

Código del ejercicio: <! DOCTYPE html > < html lang = "es" > < head >     < meta charset = ...

Copyright ©2025 Ejercicios de programación. Todos los derechos reservados. ❤️