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>Calcular el salario semanal de un empleado a los que se les paga 15 Bs por hora si estás no superan las 35 horas. Cada hora por encima de 35 se considerará extra y se paga a 22 Bs</h3>
    <form action="">
        <label for="">Horas trabajadas:</label>
        <input type="number" id="hora"><br><br>
        <input type="button" value="Calcular" onclick="calcular()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function calcular(){
            let hora = parseFloat(document.getElementById('hora').value);
            if(hora > 35){
                dif = hora - 35;
                sueldo = (dif * 22) + (35 * 15);
            }else{
                sueldo = hora * 15;
            }
            document.getElementById('resultado').value = `El sueldo es ${sueldo} Bs.`;
        }
    </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.
<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.
else --> se usa para especificar un bloque de código a ejecutar, si la misma condición es falsa.
> --> el operador mayor que ( > ) devuelve true si el operando izquierdo es mayor que el operando derecho.
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:

Este programa permite calcular el salario semanal de un empleado según la cantidad de horas trabajadas. Las primeras 35 horas se pagan a 15 Bs por hora. Si el empleado trabaja más de 35 horas, las horas adicionales se consideran horas extras y se pagan a 22 Bs por hora.

1. Estructura HTML

<!DOCTYPE html>
Indica que el documento utiliza la versión HTML5.
<html lang="es">
Especifica que el idioma del documento es español.
<head>
Contiene la información de configuración de la página, como la codificación, el tamaño de pantalla y el título.
<body>
Contiene todos los elementos visibles para el usuario.
<h3>
Muestra el título o enunciado del ejercicio.
<form>
Agrupa todos los controles del formulario.
<label>
Muestra el texto descriptivo del campo "Horas trabajadas".
<input type="number">
Permite ingresar únicamente valores numéricos correspondientes a las horas trabajadas.
<input type="button">
Ejecuta la función calcular() cuando el usuario hace clic en el botón.
<input type="reset">
Borra toda la información ingresada en el formulario.
<input type="text">
Muestra el sueldo calculado por el programa.

2. Explicación del código JavaScript

3. Función de cada línea del código

function calcular()
Define la función que se ejecutará cuando el usuario presione el botón Calcular.
let hora = parseFloat(...)
Obtiene el valor escrito por el usuario y lo convierte en un número para poder realizar operaciones matemáticas.
if(hora > 35)
Comprueba si el empleado trabajó más de 35 horas.
dif = hora - 35;
Calcula cuántas horas extras trabajó el empleado.
sueldo = (dif * 22) + (35 * 15);
Calcula el sueldo pagando:
- 35 horas normales a 15 Bs.
- Las horas extras a 22 Bs.
else
Se ejecuta cuando el empleado trabajó 35 horas o menos.
sueldo = hora * 15;
Calcula el sueldo multiplicando todas las horas trabajadas por 15 Bs.
document.getElementById('resultado').value
Muestra el salario calculado dentro de la caja de texto llamada resultado.

4. ¿Cómo funciona el programa?

El usuario escribe la cantidad de horas trabajadas.
Hace clic en el botón Calcular.
JavaScript obtiene el número ingresado.
Verifica si existen horas extras.
Calcula el salario correspondiente.
Finalmente muestra el sueldo en la caja de resultado.

5. Resumen

El código utiliza HTML para crear la interfaz donde el usuario ingresa las horas trabajadas y JavaScript para realizar el cálculo del salario. Si el empleado trabaja hasta 35 horas, todas se pagan a 15 Bs. Si trabaja más de 35 horas, las horas adicionales se pagan a 22 Bs. Finalmente, el programa muestra el sueldo total obtenido.

Ejercicios de programación

Páginas

domingo, 28 de junio de 2026

Calcular el salario semanal de un empleado a los que se les paga 15 Bs por hora si estás no superan las 35 horas. Cada hora por encima de 35 se considerará extra y se paga a 22 Bs en HTML y JavaScript