jueves, 18 de junio de 2026

Calcular el perímetro de un rectángulo 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>Calcular el perímetro de un rectángulo</h3>
    <form action="">
        <label for="">base:</label>
        <input type="number" id="base"><br><br>
        <label for="">altura:</label>
        <input type="number" id="altura"><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 base = parseFloat(document.getElementById('base').value);
            let altura = parseFloat(document.getElementById('altura').value);
            let perimetro = 2 * base + 2 * altura;
            document.getElementById('resultado').value = `${perimetro} cm`;
        }
    </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.
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:

Este programa solicita al usuario la base y la altura de un rectángulo. Después de presionar el botón Calcular, JavaScript obtiene los valores ingresados, calcula el perímetro y muestra el resultado.

1. Título del ejercicio

<h3>Calcular el perímetro de un rectángulo</h3>

Muestra el nombre del ejercicio en la página web.

2. Campo para ingresar la base

Permite al usuario escribir la medida de la base del rectángulo.

3. Campo para ingresar la altura

<label>altura:</label>
<input type="number" id="altura">

Permite ingresar la altura del rectángulo.

4. Botón Calcular

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

5. Botón Limpiar

Borra los valores ingresados y limpia el formulario.

6. Campo de resultado

Muestra el resultado del cálculo del perímetro.

7. Función calcular()

function calcular(){
  let base = parseFloat(document.getElementById('base').value);
  let altura = parseFloat(document.getElementById('altura').value);
  let perimetro = 2 * base + 2 * altura;
  document.getElementById('resultado').value = `${perimetro} cm`;
}

8. Obtener la base

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

Obtiene el valor escrito en el campo base y lo convierte en un número.

9. Obtener la altura

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

Obtiene el valor escrito en el campo altura y lo convierte en un número.

10. Calcular el perímetro

let perimetro = 2 * base + 2 * altura;

Calcula el perímetro del rectángulo utilizando la fórmula:

Perímetro = (2 × base) + (2 × altura)

Ejemplo:

Base = 8 cm
Altura = 5 cm
Perímetro = (2 × 8) + (2 × 5) = 26 cm

11. Mostrar el resultado

document.getElementById('resultado').value = `${perimetro} cm`;

Muestra el resultado final en el cuadro de texto agregando la unidad de medida "cm".

Resumen

El usuario introduce la base y la altura del rectángulo, presiona el botón Calcular, JavaScript realiza la operación del perímetro y finalmente muestra el resultado en pantalla.

Convertir pies a yardas 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>Convertir pies a yardas</h3>
    <form action="">
        <label for="">pie:</label>
        <input type="number" id="pie"><br><br>
        <input type="button" value="Convertir" onclick="convertir()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function convertir(){
            let pie = parseFloat(document.getElementById('pie').value);
            let convertir = pie * 0.333333;
            document.getElementById('resultado').value = `${convertir} yd`;
        }
    </script>
</body>
</html>

Definición de los códigos del ejercicio:

Explicación del Código:

Este programa permite convertir una cantidad de pies (ft) a yardas (yd). El usuario escribe una cantidad en pies, presiona el botón Convertir y el resultado aparece en la caja de texto correspondiente.

1. Campo para ingresar los pies

Este campo permite al usuario ingresar la cantidad de pies que desea convertir.

2. Botón Convertir

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

3. Botón Limpiar

Este botón borra todos los datos ingresados en el formulario.

4. Campo de resultado

Aquí se mostrará el resultado de la conversión en yardas.

5. Función JavaScript

function convertir(){
  let pie = parseFloat(document.getElementById('pie').value);
  let convertir = pie * 0.333333;
  document.getElementById('resultado').value = `${convertir} yd`;
}

La función realiza los siguientes pasos:

Obtiene el valor ingresado en el campo con id pie.
Convierte el valor a número utilizando parseFloat().
Multiplica los pies por 0.333333, ya que 1 pie equivale aproximadamente a 0.333333 yardas.
Muestra el resultado en el campo de texto agregando la unidad yd.

Ejemplo de ejecución

Dato ingresado: 9 pies

Operación:

9 × 0.333333 = 2.999997

Resultado mostrado: 2.999997 yd

Resumen

El programa recibe una cantidad en pies, la convierte a yardas mediante una multiplicación y muestra el resultado automáticamente al usuario.

miércoles, 17 de junio de 2026

Convertir yardas a centímetros 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>Convertir yardas a centímetros</h3>
    <form action="">
        <label for="">yarda:</label>
        <input type="number" id="yarda"><br><br>
        <input type="button" value="Convertir" onclick="convertir()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function convertir(){
            let yarda = parseFloat(document.getElementById('yarda').value);
            let convertir = yarda * 91.44;
            document.getElementById('resultado').value = `${convertir} cm`;
        }
    </script>
</body>
</html>

Definición de los códigos del ejercicio:

Explicación del Código:

Este programa permite convertir una cantidad de yardas a centímetros utilizando HTML para crear la interfaz y JavaScript para realizar el cálculo.

1. Estructura básica del documento

<!DOCTYPE html>
<html lang="es">

<!DOCTYPE html>: Indica que se utiliza HTML5.
<html lang="es">: Define el idioma principal de la página como español.

2. Configuración del documento

<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>

charset="UTF-8": Permite mostrar correctamente caracteres especiales.
X-UA-Compatible: Mejora la compatibilidad con navegadores.
viewport: Hace que la página sea adaptable a celulares y tablets.
title: Define el título que aparece en la pestaña del navegador.

3. Título del ejercicio

<h3>Convertir yardas a centímetros</h3>

Muestra el nombre del ejercicio en la página web.

4. Campo para ingresar las yardas

<label>yarda:</label>
<input type="number" id="yarda">

label: Muestra el texto "yarda:".
input type="number": Permite ingresar números.
id="yarda": Identificador utilizado por JavaScript para acceder al dato ingresado.

5. Botones del formulario

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

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

Convertir: Ejecuta la función convertir().
Limpiar: Borra los datos ingresados en el formulario.

6. Campo para mostrar el resultado

<label>resultado:</label>
<input type="text" id="resultado">

Muestra el resultado de la conversión.
id="resultado": Permite que JavaScript escriba el resultado en este campo.

7. Función JavaScript

function convertir(){
    let yarda = parseFloat(
        document.getElementById('yarda').value
    );

    let convertir = yarda * 91.44;

    document.getElementById('resultado').value =  
        `${convertir} cm`;
}

Paso 1: Obtener la cantidad de yardas

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

Obtiene el valor ingresado por el usuario y lo convierte en un número decimal.

Paso 2: Realizar la conversión

let convertir = yarda * 91.44;

Multiplica la cantidad de yardas por 91.44, ya que una yarda equivale a 91.44 centímetros.

Paso 3: Mostrar el resultado

document.getElementById('resultado').value =  
`${convertir} cm`;

El resultado se muestra automáticamente en el campo de texto acompañado de la unidad "cm".

Ejemplo de ejecución

Si el usuario ingresa:

El cálculo realizado será:

5 × 91.44 = 457.2

Resultado mostrado:

457.2 cm

Resumen

El programa solicita una cantidad de yardas, la convierte a centímetros multiplicándola por 91.44 y muestra el resultado al presionar el botón Convertir.

Convertir pulgadas a metros 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>Convertir pulgadas a metros</h3>
    <form action="">
        <label for="">pulgadas:</label>
        <input type="number" id="pulgadas"><br><br>
        <input type="button" value="Convertir" onclick="convertir()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function convertir(){
            let pulgadas = parseFloat(document.getElementById('pulgadas').value);
            let convertir = pulgadas * 0.0254;
            document.getElementById('resultado').value = `${convertir} m`;
        }
    </script>
</body>
</html>

Definición de los códigos del ejercicio:

Explicación del Código:

Este programa permite convertir una cantidad de pulgadas a metros utilizando HTML para la interfaz y JavaScript para realizar el cálculo.

1. Estructura básica del documento

La etiqueta <!DOCTYPE html> indica que el documento utiliza HTML5. La etiqueta <html lang="es"> establece que el contenido está escrito en español.

2. Encabezado del documento

Dentro de la etiqueta <head> se configuran los datos principales de la página:

charset="UTF-8": permite mostrar correctamente caracteres especiales como tildes y ñ.
viewport: adapta la página a dispositivos móviles.
title: define el título mostrado en la pestaña del navegador.

3. Título del ejercicio

La etiqueta <h3> muestra el texto: "Convertir pulgadas a metros", indicando la función principal del programa.

4. Formulario

El formulario contiene los elementos necesarios para ingresar los datos y mostrar el resultado.

Label pulgadas: indica al usuario el dato que debe ingresar.
Input pulgadas: permite escribir la cantidad de pulgadas.
Botón Convertir: ejecuta la función JavaScript convertir().
Botón Limpiar: borra los datos ingresados.
Input resultado: muestra el valor convertido a metros.

5. Función JavaScript

La función convertir() se ejecuta cuando el usuario presiona el botón Convertir.

Paso 1: Obtener el valor ingresado

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

Se obtiene el valor escrito por el usuario y se convierte a un número decimal utilizando parseFloat().

Paso 2: Realizar la conversión

let convertir = pulgadas * 0.0254;

El valor ingresado se multiplica por 0.0254, ya que 1 pulgada equivale a 0.0254 metros.

Paso 3: Mostrar el resultado

document.getElementById('resultado').value = `${convertir} m`;

El resultado calculado se muestra en el campo de texto identificado con resultado y se agrega la unidad m para indicar metros.

6. Ejemplo de ejecución

Si el usuario ingresa 100 pulgadas:

100 × 0.0254 = 2.54

El programa mostrará:

2.54 m

Resumen

El programa solicita una cantidad de pulgadas, la multiplica por 0.0254 para convertirla a metros y finalmente muestra el resultado en pantalla de forma automática.

Convertir kilogramos a gramos 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>Convertir kilogramos a gramos</h3>
    <form action="">
        <label for="">kilogramos:</label>
        <input type="number" id="kilogramos"><br><br>
        <input type="button" value="Convertir" onclick="convertir()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function convertir(){
            let kilogramos = parseFloat(document.getElementById('kilogramos').value);
            let convertir = kilogramos * 1000;
            document.getElementById('resultado').value = `${convertir} g`;
        }
    </script>
</body>
</html>

Definición de los códigos del ejercicio:

Explicación del Código:

1. Título del ejercicio

<h3>Convertir kilogramos a gramos</h3>

Muestra un título en la página indicando que el programa realiza la conversión de kilogramos a gramos.

2. Formulario

El formulario contiene los campos de entrada, botones y el área donde se mostrará el resultado de la conversión.

3. Campo para ingresar kilogramos

Permite al usuario ingresar una cantidad en kilogramos. El atributo type="number" solo acepta números.

4. Botón Convertir

Cuando el usuario hace clic en este botón, se ejecuta la función convertir() para realizar el cálculo.

5. Botón Limpiar

Borra los datos ingresados en el formulario y limpia el resultado.

6. Campo de resultado

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

7. Función convertir()

function convertir(){ let kilogramos = parseFloat(document.getElementById('kilogramos').value); let convertir = kilogramos * 1000; document.getElementById('resultado').value = `${convertir} g`; }

Esta función se encarga de convertir los kilogramos ingresados a gramos.

parseFloat() obtiene el número escrito por el usuario.
kilogramos * 1000 convierte los kilogramos a gramos.
resultado.value muestra el resultado en la caja de texto.

8. Ejemplo de ejecución

Si el usuario ingresa:

5 kilogramos

El programa realiza el siguiente cálculo:

5 × 1000 = 5000 gramos

Resultado mostrado:

5000 g

Resumen

El programa solicita una cantidad en kilogramos, la multiplica por 1000 para convertirla a gramos y muestra el resultado al presionar el botón Convertir.

Convertir toneladas a kilogramos 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>Convertir toneladas a kilogramos</h3>
    <form action="">
        <label for="">tonelada:</label>
        <input type="number" id="tonelada"><br><br>
        <input type="button" value="Convertir" onclick="convertir()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function convertir(){
            let tonelada = parseFloat(document.getElementById('tonelada').value);
            let convertir = tonelada * 1000;
            document.getElementById('resultado').value = `${convertir} kg`;
        }
    </script>
</body>
</html>

Definición de los códigos del ejercicio:

Explicación del Código:

Este programa permite ingresar una cantidad de toneladas y convertirla automáticamente a kilogramos utilizando HTML y JavaScript.

1. Título del ejercicio

<h3>Convertir toneladas a kilogramos</h3>

Muestra el título principal del ejercicio en la página web.

2. Campo para ingresar toneladas

Permite al usuario escribir la cantidad de toneladas que desea convertir.

3. Botón Convertir

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

4. Botón Limpiar

Borra los datos ingresados en el formulario para realizar una nueva conversión.

5. Campo de resultado

Muestra el resultado final de la conversión en kilogramos.

6. Función JavaScript

function convertir(){ let tonelada = parseFloat(document.getElementById('tonelada').value); let convertir = tonelada * 1000; document.getElementById('resultado').value = `${convertir} kg`; }

Explicación paso a paso

Obtiene el valor ingresado: lee la cantidad escrita en el campo de toneladas.
Convierte el dato a número: parseFloat() transforma el texto en un número decimal.
Realiza la conversión: multiplica las toneladas por 1000 porque una tonelada equivale a 1000 kilogramos.
Muestra el resultado: coloca el valor calculado dentro del campo resultado y agrega la unidad "kg".

7. Ejemplo de ejecución

Dato ingresado: 5 toneladas

Operación: 5 × 1000

Resultado: 5000 kg

Resumen

El programa solicita una cantidad en toneladas, la multiplica por 1000 para obtener los kilogramos equivalentes y muestra el resultado en pantalla.

Convertir horas a segundos 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>Convertir horas a segundos</h3>
    <form action="">
        <label for="">hora:</label>
        <input type="number" id="hora"><br><br>
        <input type="button" value="Convertir" onclick="convertir()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function convertir(){
            let hora = parseFloat(document.getElementById('hora').value);
            let convertir = hora * 3600;
            document.getElementById('resultado').value = `${convertir} s`;
        }
    </script>
</body>
</html>

Definición de los códigos del ejercicio:

Explicación del Código:

Este programa permite ingresar una cantidad de horas y convertirla a segundos utilizando HTML para la interfaz y JavaScript para realizar el cálculo.

1. Título del ejercicio

<h3>Convertir horas a segundos</h3>

Muestra el nombre del ejercicio en la página web.

2. Campo para ingresar las horas

Permite al usuario ingresar la cantidad de horas que desea convertir.

3. Botón Convertir

Al hacer clic en este botón se ejecuta la función convertir().

4. Botón Limpiar

Borra los datos ingresados en el formulario.

5. Campo de resultado

Muestra el resultado de la conversión en segundos.

6. Función JavaScript

function convertir(){
  let hora = parseFloat(document.getElementById('hora').value);
  let convertir = hora * 3600;
  document.getElementById('resultado').value = `${convertir} s`;
}

Esta función realiza la conversión de horas a segundos.

7. Explicación línea por línea

document.getElementById('hora').value obtiene el valor que escribió el usuario.
parseFloat() convierte ese valor a un número decimal.
hora * 3600 realiza la conversión porque una hora tiene 3600 segundos.
document.getElementById('resultado').value muestra el resultado en la caja de texto.
`${convertir} s` agrega la letra "s" para indicar que el resultado está expresado en segundos.

8. Ejemplo de ejecución

Si el usuario ingresa:

2 horas

El programa realiza el cálculo:

2 × 3600 = 7200

Resultado mostrado:

7200 s

Resumen

El programa solicita una cantidad de horas, la multiplica por 3600 para convertirla a segundos y muestra el resultado automáticamente cuando se presiona el botón Convertir.

Páginas

jueves, 18 de junio de 2026

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Título del ejercicio

2. Campo para ingresar la base

3. Campo para ingresar la altura

4. Botón Calcular

5. Botón Limpiar

6. Campo de resultado

7. Función calcular()

8. Obtener la base

9. Obtener la altura

10. Calcular el perímetro

11. Mostrar el resultado

Resumen

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Campo para ingresar los pies

2. Botón Convertir

3. Botón Limpiar

4. Campo de resultado

5. Función JavaScript

Ejemplo de ejecución

Resumen

miércoles, 17 de junio de 2026

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Estructura básica del documento

2. Configuración del documento

3. Título del ejercicio

4. Campo para ingresar las yardas

5. Botones del formulario

6. Campo para mostrar el resultado

7. Función JavaScript

Paso 1: Obtener la cantidad de yardas

Paso 2: Realizar la conversión

Paso 3: Mostrar el resultado

Ejemplo de ejecución

Resumen

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Estructura básica del documento

2. Encabezado del documento

3. Título del ejercicio

4. Formulario

5. Función JavaScript

Paso 1: Obtener el valor ingresado

Paso 2: Realizar la conversión

Paso 3: Mostrar el resultado

6. Ejemplo de ejecución

Resumen

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Título del ejercicio

2. Formulario

3. Campo para ingresar kilogramos

4. Botón Convertir

5. Botón Limpiar

6. Campo de resultado

7. Función convertir()

8. Ejemplo de ejecución

Resumen

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Título del ejercicio

2. Campo para ingresar toneladas

3. Botón Convertir

4. Botón Limpiar

5. Campo de resultado

6. Función JavaScript

Explicación paso a paso

7. Ejemplo de ejecución

Resumen