sábado, 20 de junio de 2026

Convertir metros a milí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 metros a milímetros</h3>
    <form action="">
        <label for="">metro:</label>
        <input type="number" id="metro"><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 metro = parseFloat(document.getElementById('metro').value);
            let convertir = metro * 1000;
            document.getElementById('resultado').value = `${convertir} mm`;
        }
    </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 permite convertir una cantidad ingresada en metros (m) a milímetros (mm). Para ello utiliza HTML para crear la interfaz y JavaScript para realizar el cálculo.

1. Título del ejercicio

<h3>Convertir metros a milímetros</h3>

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

2. Campo para ingresar los metros

<label>metro:</label>
<input type="number" id="metro">
  • label: Muestra el texto "metro:".
  • input type="number": Permite ingresar únicamente números.
  • id="metro": Identifica el campo para que JavaScript pueda leer su valor.

3. Botón Convertir

<input type="button" value="Convertir" onclick="convertir()">
  • Muestra un botón con el texto "Convertir".
  • Cuando el usuario hace clic, se ejecuta la función convertir().

4. Botón Limpiar

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

Borra los datos escritos en el formulario.

5. Campo de resultado

<label>resultado:</label>
<input type="text" id="resultado">
  • Muestra el resultado de la conversión.
  • JavaScript escribe el resultado dentro de este campo.

6. Función JavaScript

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

7. Explicación paso a paso

Paso 1: Obtener el valor ingresado

let metro = parseFloat(document.getElementById('metro').value);
  • Obtiene el número escrito por el usuario.
  • parseFloat() convierte el texto a un número decimal.

Paso 2: Convertir metros a milímetros

let convertir = metro * 1000;
  • Multiplica la cantidad de metros por 1000.
  • Esto se debe a que 1 metro = 1000 milímetros.

Paso 3: Mostrar el resultado

document.getElementById('resultado').value = `${convertir} mm`;
  • Escribe el resultado dentro del campo de texto.
  • Agrega la unidad mm para indicar que el valor está en milímetros.

8. Ejemplo de funcionamiento

Si el usuario ingresa:

3

La operación será:

3 × 1000 = 3000

Resultado mostrado:

3000 mm

Resumen

El programa solicita una cantidad en metros, la multiplica por 1000 para convertirla a milímetros y finalmente muestra el resultado en pantalla mediante JavaScript.

a la/s No hay comentarios.:
Etiquetas:

Convertir metros 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 metros a centímetros</h3>
    <form action="">
        <label for="">metro:</label>
        <input type="number" id="metro"><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 metro = parseFloat(document.getElementById('metro').value);
            let convertir = metro * 100;
            document.getElementById('resultado').value = `${convertir} 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:

Paso 1: Título del ejercicio

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

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

Paso 2: Campo para ingresar los metros

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

Permite al usuario escribir la cantidad de metros que desea convertir. El atributo type="number" indica que solo se pueden ingresar números.

Paso 3: 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() para realizar la conversión.

Paso 4: Botón Limpiar

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

Borra los datos ingresados y deja el formulario listo para una nueva operación.

Paso 5: Campo de resultado

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

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

Paso 6: Función convertir()

function convertir(){
  let metro = parseFloat(document.getElementById('metro').value);
  let convertir = metro * 100;
  document.getElementById('resultado').value = `${convertir} cm`;
}

¿Qué hace cada línea?

1. Obtener el valor ingresado:

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

Busca el valor escrito en el campo de metros y lo convierte a un número decimal para poder realizar operaciones matemáticas.

2. Convertir metros a centímetros:

let convertir = metro * 100;

Multiplica los metros por 100 porque cada metro equivale a 100 centímetros.

3. Mostrar el resultado:

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

Muestra el resultado de la conversión dentro del campo de texto de resultado.

Ejemplo de ejecución

Si el usuario escribe:

8

El programa realiza el cálculo:

8 × 100 = 800

Y muestra:

800 cm

Resumen

El programa solicita una cantidad en metros, la multiplica por 100 y muestra el resultado equivalente en centímetros.

a la/s No hay comentarios.:
Etiquetas:

viernes, 19 de junio de 2026

Calcular el volumen de una esfera 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 volumen de una esfera</h3>
    <form action="">
        <label for="">radio:</label>
        <input type="number" id="radio"><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 radio = parseFloat(document.getElementById('radio').value);
            let pi = 3.1416;
            let volumen = 4 / 3 * pi * (radio * radio * radio);
            document.getElementById('resultado').value = `${volumen} m³`;
        }
    </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:

¿Qué hace este programa?

Este programa solicita al usuario el radio de una esfera, calcula su volumen utilizando una fórmula matemática y muestra el resultado en pantalla.

1. Título del ejercicio

<h3>Calcular el volumen de una esfera</h3>

Muestra el título del programa para indicar al usuario la operación que realizará.

2. Campo para ingresar el radio

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

El usuario introduce el valor del radio de la esfera. El atributo id="radio" permite acceder al dato desde JavaScript.

3. Botón Calcular

<input type="button" value="Calcular" onclick="calcular()">

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

4. Botón Limpiar

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

Borra los datos ingresados en el formulario y permite realizar un nuevo cálculo.

5. Campo de resultado

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

Muestra el volumen calculado por el programa.

6. Función calcular()

function calcular(){
  let radio = parseFloat(document.getElementById('radio').value);
  let pi = 3.1416;
  let volumen = 4 / 3 * pi * (radio * radio * radio);
  document.getElementById('resultado').value = `${volumen} m³`;
}

Esta función realiza todo el proceso de cálculo del volumen de la esfera.

  • Obtiene el radio: Lee el valor ingresado por el usuario y lo convierte a número decimal.
  • Define PI: Guarda el valor aproximado de π (3.1416).
  • Calcula el volumen: Aplica la fórmula matemática de la esfera.
  • Muestra el resultado: Presenta el volumen calculado en el campo resultado.

7. Fórmula utilizada

V = (4/3) × π × r³

Donde:

  • V = Volumen de la esfera.
  • π = 3.1416.
  • r = Radio de la esfera.
  • r³ = Radio elevado al cubo.

Resumen

El usuario introduce el radio de una esfera, presiona el botón Calcular, el programa aplica la fórmula V = (4/3) × π × r³ y finalmente muestra el volumen obtenido en metros cúbicos (m³).

a la/s No hay comentarios.:
Etiquetas:

Convertir millas a pies 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 millas a pies</h3>
    <form action="">
        <label for="">milla:</label>
        <input type="number" id="milla"><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 milla = parseFloat(document.getElementById('milla').value);
            let convertir = milla * 5280;
            document.getElementById('resultado').value = `${convertir} ft`;
        }
    </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 permite convertir una cantidad de millas a pies. El usuario ingresa un valor, presiona el botón Convertir y el sistema muestra automáticamente el resultado.

1. Título del ejercicio

<h3>Convertir millas a pies</h3>

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

2. Campo para ingresar millas

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

Permite al usuario escribir la cantidad de millas que desea convertir. El atributo id="milla" identifica el campo para que JavaScript pueda obtener su valor.

3. 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().

4. Botón Limpiar

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

Borra los datos ingresados en el formulario.

5. Campo de resultado

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

Muestra el resultado final de la conversión.

6. Función JavaScript

function convertir(){ let milla = parseFloat(document.getElementById('milla').value); let convertir = milla * 5280; document.getElementById('resultado').value = `${convertir} ft`; }

7. Explicación paso a paso

Paso 1: Obtener el valor ingresado.

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

Se obtiene el valor del campo de texto y se convierte a número decimal mediante parseFloat().

Paso 2: Realizar la conversión.

let convertir = milla * 5280;

Se multiplica la cantidad de millas por 5280, ya que:

1 milla = 5280 pies

Paso 3: Mostrar el resultado.

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

El resultado se muestra en el cuadro de texto de salida junto con la unidad ft (pies).

8. Ejemplo de ejecución

Si el usuario ingresa:

2 millas

La operación será:

2 × 5280 = 10560

Resultado mostrado:

10560 ft

Resumen

El programa recibe una cantidad de millas, la multiplica por 5280 para convertirla a pies y muestra el resultado automáticamente al presionar el botón Convertir.

a la/s No hay comentarios.:
Etiquetas:

jueves, 18 de junio de 2026

Convertir yardas a pies 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 pies</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 * 3;
            document.getElementById('resultado').value = `${convertir} ft`;
        }
    </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 permite convertir una cantidad de yardas a pies utilizando HTML para crear la interfaz y JavaScript para realizar el cálculo.

1. Declaración del documento HTML

<!DOCTYPE html>

Indica al navegador que el documento está escrito en HTML5.

2. Etiqueta HTML principal

<html lang="es">

Define el inicio del documento HTML y especifica que el idioma es español.

3. Sección <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>
  • charset="UTF-8": Permite usar caracteres especiales como tildes y la letra ñ.
  • X-UA-Compatible: Mejora la compatibilidad con navegadores.
  • viewport: Hace que la página sea adaptable a dispositivos móviles.
  • title: Define el título mostrado en la pestaña del navegador.

4. Título del ejercicio

<h3>Convertir yardas a pies</h3>

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

5. Formulario

<form action=""> ... </form>

Contiene los controles que permiten ingresar datos y mostrar resultados.

6. Campo para ingresar yardas

<label>yarda:</label>
<input type="number" id="yarda">
  • label: Muestra el texto descriptivo.
  • input type="number": Permite ingresar únicamente números.
  • id="yarda": Identificador utilizado por JavaScript para acceder al valor ingresado.

7. 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().

8. Botón Limpiar

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

Borra los datos ingresados y el resultado mostrado.

9. Campo para mostrar el resultado

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

Muestra el resultado de la conversión realizada.

10. Función JavaScript

function convertir(){
  let yarda = parseFloat(document.getElementById('yarda').value);
  let convertir = yarda * 3;
  document.getElementById('resultado').value = `${convertir} ft`;
}

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

  • function convertir(): Define una función llamada convertir.
  • document.getElementById('yarda').value: Obtiene el valor que el usuario escribió.
  • parseFloat(): Convierte el texto ingresado en un número decimal.
  • let convertir = yarda * 3;: Multiplica las yardas por 3 porque 1 yarda = 3 pies.
  • document.getElementById('resultado').value: Coloca el resultado dentro del campo de texto.
  • ft: Es la abreviatura de pies (feet).

12. Ejemplo de funcionamiento

Si el usuario escribe:

8

El programa realiza el cálculo:

8 × 3 = 24

Y muestra:

24 ft

13. Conclusión

Este ejercicio enseña cómo capturar datos desde un formulario HTML, procesarlos mediante JavaScript y mostrar el resultado al usuario. La conversión se realiza utilizando la equivalencia: 1 yarda = 3 pies.

a la/s No hay comentarios.:
Etiquetas:

Calcular el perímetro de un triá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 triángulo</h3>
    <form action="">
        <label for="">lado1:</label>
        <input type="number" id="lado1"><br><br>
        <label for="">lado2:</label>
        <input type="number" id="lado2"><br><br>
        <label for="">lado3:</label>
        <input type="number" id="lado3"><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 lado1 = parseFloat(document.getElementById('lado1').value);
            let lado2 = parseFloat(document.getElementById('lado2').value);
            let lado3 = parseFloat(document.getElementById('lado3').value);
            let perimetro = lado1 + lado2 + lado3;
            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.
parseFloat() --> analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
function --> es un bloque de código diseñado para realizar una tarea en particular.
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 perímetro de un triángulo ingresando las medidas de sus tres lados.

1. Estructura básica del documento

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

Estas líneas indican que el documento está desarrollado en HTML5 y que el idioma principal de la página es español.

2. Configuración del encabezado

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

La primera etiqueta permite utilizar caracteres especiales y la segunda hace que la página sea adaptable a celulares, tablets y computadoras.

3. Título del ejercicio

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

Muestra el título principal que verá el usuario en la página.

4. Campos de entrada

<input type="number" id="lado1">
<input type="number" id="lado2">
<input type="number" id="lado3">

Estos campos permiten ingresar los tres lados del triángulo. El atributo type="number" permite introducir únicamente números.

5. Botones del formulario

<input type="button" value="Calcular" onclick="calcular()">
<input type="reset" value="Limpiar">
  • Calcular: ejecuta la función JavaScript.
  • Limpiar: borra todos los datos ingresados.

6. Obtener los valores ingresados

let lado1 = parseFloat(document.getElementById('lado1').value);
let lado2 = parseFloat(document.getElementById('lado2').value);
let lado3 = parseFloat(document.getElementById('lado3').value);

Estas instrucciones capturan los valores escritos por el usuario y los convierten a números decimales mediante la función parseFloat().

7. Cálculo del perímetro

let perimetro = lado1 + lado2 + lado3;

El perímetro de un triángulo se obtiene sumando la longitud de sus tres lados.

8. Mostrar el resultado

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

El resultado calculado se muestra en el campo de texto llamado resultado junto con la unidad de medida "cm".

Resumen

  1. El usuario ingresa los tres lados del triángulo.
  2. Presiona el botón Calcular.
  3. JavaScript obtiene los valores ingresados.
  4. Se suman los tres lados para obtener el perímetro.
  5. El resultado se muestra en centímetros.
a la/s No hay comentarios.:
Etiquetas:

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

<label>base:</label>
<input type="number" id="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

<input type="button" value="Calcular" onclick="calcular()">

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

5. Botón Limpiar

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

Borra los valores ingresados y limpia el formulario.

6. Campo de resultado

<input type="text" id="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.

a la/s No hay comentarios.:
Etiquetas:
Suscribirse a: Entradas (Atom)

Convertir metros a milímetros 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. ❤️