lunes, 29 de junio de 2026

La Municipalidad de Lima Metropolitana desea minimizar los accidentes automovilísticos de la ciudad; para lo cual realiza un diagnóstico, en el informe se advierte que uno de los problemas es el exceso de la velocidad por parte de los conductores. Por lo tanto, como primera medida será enviar automáticamente un mensaje de advertencia a los conductores que superan la velocidad de 30 km/h en HTML y JavaScript

La Municipalidad de Lima Metropolitana desea minimizar los accidentes automovilísticos de la ciudad; para lo cual realiza un diagnóstico, en el informe se advierte que uno de los problemas es el exceso de la velocidad por parte de los conductores. Por lo tanto, como primera medida será enviar automáticamente un mensaje de advertencia a los conductores que superan la velocidad de 30 km/h

Bajo este escenario, se pide diseñar un algoritmo (Pseudocódigo) que permita a la Municipalidad de Lima implementar su primera medida; ingresando el número de placa y la velocidad.

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>La Municipalidad de Lima Metropolitana desea minimizar los accidentes automovilísticos de la ciudad; para lo cual realiza un diagnóstico, en el informe se advierte que uno de los problemas es el exceso de la velocidad por parte de los conductores. Por lo tanto, como primera medida será enviar automáticamente un mensaje de advertencia a los conductores que superan la velocidad de 30 km/h</h3>
    <form action="">
        <label for="">Ingresar número de placa:</label>
        <input type="text" id="placa"><br><br>
        <label for="">Ingresar velocidad:</label>
        <input type="number" id="velocidad"><br><br>
        <input type="button" value="Mostrar" onclick="mostrar()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label><br>
        <textarea name="" id="resultado" cols="30" rows="10"></textarea>
    </form>
    <script>
        function mostrar(){
            let placa = document.getElementById('placa').value;
            let velocidad = parseFloat(document.getElementById('velocidad').value);
            if(velocidad > 30){
                document.getElementById('resultado').value = `Advertencia! exceso de velocidad, supera la velocidad de 30 km/h\nPlaca del vehículo: ${placa}`;
            }
        }
    </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.
onclick --> onclick evento ocurre cuando el usuario hace clic en un elemento.
<textarea></textarea> --> define un control de entrada de texto de varias líneas.
<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.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
> --> el operador mayor que ( > ) devuelve true si el operando izquierdo es mayor que el operando derecho.
`${}` --> los literales de plantilla (cadenas de plantilla) le permiten utilizar cadenas o expresiones incrustadas en forma de cadena.
\n --> es el carácter de salto de línea y se usa para indicar el fin de una línea de texto y el inicio de una línea nueva.
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 ingresar la placa de un vehículo y la velocidad a la que circula. Si la velocidad es mayor a 30 km/h, el sistema muestra automáticamente un mensaje de advertencia indicando que el conductor excedió el límite permitido.

1. Estructura principal del documento

<!DOCTYPE html>

Indica que el documento está escrito en HTML5.

<html lang="es">

Define que la página está escrita en español.

<head>

Contiene la configuración de la página, como el título y la codificación de caracteres.

<meta charset="UTF-8">

Permite mostrar correctamente letras como á, é, í, ó, ú y la ñ.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Hace que la página sea adaptable a celulares, tablets y computadoras.

<title>Ejercicio HTML y JavaScript</title>

Coloca el nombre que aparecerá en la pestaña del navegador.


2. Descripción del problema

<h3>...</h3>

Muestra el enunciado del ejercicio explicando que la municipalidad enviará una advertencia a los vehículos que superen los 30 km/h.


3. Formulario

<form>

Agrupa todos los controles donde el usuario ingresará la información.

Campo para la placa

<input type="text" id="placa">

Permite escribir el número de placa del vehículo.

Campo para la velocidad

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

Permite ingresar la velocidad del vehículo en kilómetros por hora.

Botón Mostrar

<input type="button" value="Mostrar" onclick="mostrar()">

Cuando el usuario hace clic, ejecuta la función mostrar().

Botón Limpiar

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

Borra todos los datos ingresados en el formulario.

Área de resultado

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

Aquí aparecerá el mensaje de advertencia cuando corresponda.


4. Código JavaScript

function mostrar(){ }

Se crea la función llamada mostrar(), que se ejecuta al presionar el botón Mostrar.

Leer la placa

let placa = document.getElementById('placa').value;

Obtiene el texto escrito en el campo de la placa y lo guarda en la variable placa.

Leer la velocidad

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

Obtiene la velocidad ingresada y la convierte en un número decimal mediante parseFloat().

Evaluar la velocidad

if(velocidad > 30){ }

Comprueba si la velocidad es mayor a 30 km/h.

  • Si la velocidad es mayor a 30, entra al bloque del if.
  • Si es igual o menor a 30, no ocurre ninguna acción.

Mostrar el mensaje

document.getElementById('resultado').value = `Advertencia! exceso de velocidad, supera la velocidad de 30 km/h Placa del vehículo: ${placa}`;

Busca el área de texto llamada resultado y escribe un mensaje de advertencia junto con la placa del vehículo utilizando una plantilla de texto (Template Literal).


5. Funcionamiento paso a paso

  1. El usuario escribe la placa del vehículo.
  2. Ingresa la velocidad.
  3. Presiona el botón Mostrar.
  4. JavaScript obtiene los datos ingresados.
  5. Compara la velocidad con el límite de 30 km/h.
  6. Si supera el límite, muestra una advertencia y la placa del vehículo.
  7. Si no supera el límite, no se muestra ningún mensaje.

Resumen

Este ejercicio demuestra cómo HTML crea la interfaz para ingresar datos y cómo JavaScript procesa esa información mediante una condición (if). Cuando la velocidad es mayor a 30 km/h, el programa genera automáticamente una advertencia indicando que el vehículo excedió el límite permitido e informa la placa del conductor.

No hay comentarios.:

Publicar un comentario

Ingresar dos números y determinar si el primer número ingresado es mayor o menor 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. ❤️