domingo, 21 de junio de 2026

Calcular el 谩rea 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 谩rea 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 area = base * altura;
            document.getElementById('resultado').value = `${area} 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.
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.
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 ejercicio permite calcular el 谩rea de un rect谩ngulo usando HTML y JavaScript. El usuario ingresa la base y la altura, y el sistema realiza el c谩lculo autom谩ticamente.

1. Estructura HTML

Se utilizan campos de entrada para la base y la altura, adem谩s de un bot贸n para ejecutar el c谩lculo y un campo donde se muestra el resultado.

  • input base: permite ingresar la base del rect谩ngulo.
  • input altura: permite ingresar la altura del rect谩ngulo.
  • bot贸n calcular: ejecuta la funci贸n JavaScript.
  • resultado: muestra el 谩rea calculada.

2. JavaScript

La funci贸n calcular() obtiene los valores ingresados, los convierte a n煤meros y realiza la multiplicaci贸n.

  • Obtiene la base con getElementById.
  • Obtiene la altura con getElementById.
  • Multiplica base × altura.
  • Muestra el resultado en pantalla con “cm²”.

3. Resultado

El resultado final es el 谩rea del rect谩ngulo, mostrado en cent铆metros cuadrados (cm²).

a la/s No hay comentarios.:
Etiquetas:

Calcular el 谩rea de un cuadrado 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 谩rea de un cuadrado</h3>
    <form action="">
        <label for="">lado:</label>
        <input type="number" id="lado"><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 lado = parseFloat(document.getElementById('lado').value);
            let area = lado * lado;
            document.getElementById('resultado').value = `${area} 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.
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.
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:

1. Estructura HTML

El c贸digo HTML define la estructura b谩sica de la p谩gina. Incluye etiquetas como <html>, <head> y <body> que organizan el contenido.

2. Formulario

Se utiliza un formulario para ingresar el valor del lado del cuadrado. El usuario escribe un n煤mero en un campo de tipo number.

3. Bot贸n Calcular

Al hacer clic en el bot贸n, se ejecuta la funci贸n calcular() en JavaScript, que realiza la operaci贸n matem谩tica.

4. C谩lculo en JavaScript

El valor ingresado se obtiene con getElementById, se convierte a n煤mero con parseFloat, y luego se multiplica por s铆 mismo para obtener el 谩rea del cuadrado.

5. Resultado

El resultado se muestra en un campo de texto agregando la unidad cm².

a la/s No hay comentarios.:
Etiquetas:

Determinar si un n煤mero es impar 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>Determinar si un n煤mero es impar</h3>
    <form action="">
        <label for="">n煤mero:</label>
        <input type="number" id="numero"><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 numero = parseInt(document.getElementById('numero').value);
            if(numero % 2 != 0){
                document.getElementById('resultado').value = `El n煤mero ${numero} es impar.`; 
            }else{
                document.getElementById('resultado').value = `El n煤mero ${numero} no es impar.`;
            }
        }
    </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.
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 de modulo ( % ) devuelve el resto de la divisi贸n.
!= --> el operador de desigualdad ( != ) comprueba si sus dos operandos no son iguales y devuelve un resultado booleano.
function --> es un bloque de c贸digo dise帽ado para realizar una tarea en particular.
parseInt() --> analiza un valor como una cadena y devuelve el primer entero.
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 ingresar un n煤mero y determinar si es impar utilizando HTML y JavaScript.

Explicaci贸n de cada parte

C贸digo Funci贸n
<!DOCTYPE html>Indica que el documento utiliza HTML5.
<html lang="es">Define el idioma del documento.
<head>Contiene la configuraci贸n de la p谩gina.
<body>Contiene el contenido visible.
<form>Agrupa los controles del formulario.
<input type="number">Permite ingresar un n煤mero.
<input type="button">Ejecuta la funci贸n calcular().
<script>Contiene el c贸digo JavaScript.
function calcular()Define la funci贸n que verifica si el n煤mero es impar.
parseInt()Convierte el dato ingresado en un n煤mero entero.
document.getElementById()Obtiene un elemento por su identificador.
numero % 2Calcula el residuo de dividir el n煤mero entre 2.
if(numero % 2 != 0)Comprueba si el residuo es diferente de cero.
elseSe ejecuta cuando el n煤mero es par.
.valueMuestra el resultado en la caja de texto.

Funcionamiento

  1. El usuario escribe un n煤mero.
  2. Hace clic en Calcular.
  3. JavaScript obtiene el n煤mero ingresado.
  4. Calcula el residuo usando el operador %.
  5. Si el residuo es distinto de 0, el n煤mero es impar.
  6. En caso contrario, el n煤mero es par.
  7. El resultado se muestra en la caja de texto.

Ejemplo

N煤mero Residuo Resultado
9 1 El n煤mero 9 es impar.
14 0 El n煤mero 14 no es impar.

Resumen

El operador % obtiene el residuo de la divisi贸n entre 2. Si el residuo es diferente de 0, el n煤mero es impar; de lo contrario, el n煤mero es par.

a la/s No hay comentarios.:
Etiquetas:

Determinar si un n煤mero es par 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>Determinar si un n煤mero es par</h3>
    <form action="">
        <label for="">n煤mero:</label>
        <input type="number" id="numero"><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 numero = parseInt(document.getElementById('numero').value);
            if(numero % 2 == 0){
                document.getElementById('resultado').value = `El n煤mero ${numero} es par.`; 
            }else{
                document.getElementById('resultado').value = `El n煤mero ${numero} no es par.`;
            }
        }
    </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.
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 de modulo ( % ) devuelve el resto de la divisi贸n.
== --> el operador de comparacion ( == ) comprueba si sus dos operandos son iguales y devuelve un resultado booleano.
function --> es un bloque de c贸digo dise帽ado para realizar una tarea en particular.
parseInt() --> analiza un valor como una cadena y devuelve el primer entero.
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 que el usuario escriba un n煤mero y, al hacer clic en el bot贸n Calcular, JavaScript verifica si el n煤mero es par o impar. Finalmente, el resultado se muestra en una caja de texto.

1. Declaraci贸n del documento 

<!DOCTYPE html>

Indica al navegador que el documento est谩 escrito utilizando la versi贸n HTML5. Esto permite que la p谩gina funcione correctamente en los navegadores modernos.

2. Etiqueta HTML 

<html lang="es">

Es la etiqueta principal del documento HTML. Todo el contenido de la p谩gina debe estar dentro de ella.

El atributo lang="es" indica que el idioma de la p谩gina es espa帽ol.

3. La 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>

La etiqueta <head> contiene informaci贸n importante sobre la p谩gina, pero esta informaci贸n no aparece directamente en el navegador.

  • <meta charset="UTF-8">
    Permite mostrar correctamente caracteres especiales como la 帽, las vocales con tilde y otros s铆mbolos.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">
    Hace que Internet Explorer utilice su versi贸n m谩s moderna para mostrar la p谩gina.
  • <meta name="viewport">
    Hace que la p谩gina sea adaptable a computadoras, tabletas y tel茅fonos m贸viles.
  • <title>
    Es el nombre que aparece en la pesta帽a del navegador.

4. La secci贸n body 

<body>

Dentro de esta etiqueta se encuentra todo el contenido visible de la p谩gina web, como t铆tulos, formularios, botones y cajas de texto.

5. T铆tulo del ejercicio 

<h3>
Determinar si un n煤mero es par
</h3>

La etiqueta h3 muestra un t铆tulo en la p谩gina para indicar de qu茅 trata el ejercicio.

6. Formulario 

<form action="">

...

</form>

La etiqueta form agrupa todos los controles del formulario, como cajas de texto, botones y etiquetas.

El atributo action="" est谩 vac铆o porque toda la operaci贸n se realiza con JavaScript y no se env铆an datos a otro archivo.

7. Etiqueta del n煤mero 

<label>
N煤mero:
</label>

La etiqueta label muestra el texto "N煤mero:", indicando al usuario qu茅 dato debe ingresar.

8. Caja para ingresar el n煤mero 

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

Esta etiqueta crea una caja donde el usuario puede escribir un n煤mero.

  • type="number"
    Permite ingresar 煤nicamente valores num茅ricos.
  • id="numero"
    Asigna un identificador 煤nico a la caja de texto para que JavaScript pueda acceder a su contenido.

9. Bot贸n Calcular 

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

Este bot贸n ejecuta la funci贸n calcular() cuando el usuario hace clic sobre 茅l.

  • type="button"
    Indica que el control es un bot贸n.
  • value="Calcular"
    Es el texto que aparece escrito sobre el bot贸n.
  • onclick="calcular()"
    Llama a la funci贸n calcular() al hacer clic.

10. Bot贸n Limpiar 

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

Este bot贸n borra todos los datos escritos en el formulario y lo deja listo para realizar un nuevo c谩lculo.

11. Caja donde se muestra el resultado 

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

Aqu铆 aparece el mensaje indicando si el n煤mero ingresado es par o no.

  • type="text"
    Crea una caja de texto para mostrar informaci贸n.
  • id="resultado"
    Permite que JavaScript escriba el resultado en esta caja.

12. Inicio del c贸digo JavaScript 

<script>
...
</script>

La etiqueta <script> contiene el c贸digo JavaScript que realiza los c谩lculos y controla el funcionamiento del programa.

13. Funci贸n calcular() 

function calcular(){

}

La palabra function crea una funci贸n llamada calcular. Esta funci贸n se ejecuta cuando el usuario presiona el bot贸n Calcular.

14. Obtener el n煤mero ingresado 

let numero =
parseInt(
document.getElementById("numero").value  
);

Esta l铆nea obtiene el n煤mero escrito por el usuario y lo guarda en la variable numero.

  • let
    Declara una variable.
  • numero
    Es el nombre de la variable donde se almacenar谩 el valor.
  • document.getElementById("numero")
    Busca el elemento cuyo identificador es numero.
  • .value
    Obtiene el valor que el usuario escribi贸.
  • parseInt()
    Convierte el texto ingresado en un n煤mero entero.

15. Verificar si el n煤mero es par 

if(numero % 2 == 0){

La estructura if comprueba si el n煤mero es divisible entre 2.

El operador % calcula el residuo de una divisi贸n.

Ejemplos:

  • 8 % 2 = 0
  • 10 % 2 = 0
  • 15 % 2 = 1
  • 9 % 2 = 1

Si el residuo es igual a cero, significa que el n煤mero es par.

16. Mostrar que el n煤mero es par 

document.getElementById("resultado").value =  
`El n煤mero ${numero} es par.`;

Si la condici贸n del if es verdadera, JavaScript escribe el mensaje indicando que el n煤mero es par.

17. La instrucci贸n else 

else{

}

La palabra else se ejecuta cuando la condici贸n del if es falsa.

En este caso significa que el n煤mero no es divisible exactamente entre 2.

18. Mostrar que el n煤mero no es par 

document.getElementById("resultado").value =  
`El n煤mero ${numero} no es par.`;

Cuando el n煤mero es impar, JavaScript muestra este mensaje en la caja de resultado.

19. Fin de la funci贸n 

}

Esta llave indica el final de la funci贸n calcular().

20. Funcionamiento general del programa

  1. El usuario escribe un n煤mero.
  2. Hace clic en el bot贸n Calcular.
  3. JavaScript obtiene el n煤mero ingresado.
  4. Convierte el dato a un n煤mero entero mediante parseInt().
  5. Calcula el residuo usando el operador %.
  6. Si el residuo es 0, muestra que el n煤mero es par.
  7. Si el residuo es diferente de 0, indica que el n煤mero no es par.
  8. El resultado aparece en la caja de texto correspondiente.

21. Conclusi贸n

Este ejercicio muestra c贸mo combinar HTML y JavaScript para crear un programa interactivo. HTML se utiliza para construir la interfaz del formulario, mientras que JavaScript obtiene el valor ingresado por el usuario, verifica si el n煤mero es divisible entre dos mediante el operador % y utiliza la estructura condicional if...else para mostrar el resultado correspondiente. Es un ejercicio b谩sico que ayuda a comprender el uso de variables, operadores, condiciones y la interacci贸n entre HTML y JavaScript.

a la/s No hay comentarios.:
Etiquetas:

Convertir metros 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 metros a pies</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 * 3.28084;
            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:

1. Declaraci贸n del documento HTML

<!DOCTYPE html>

Indica que el documento est谩 escrito en HTML5. Gracias a esta declaraci贸n, el navegador interpreta correctamente todas las etiquetas del documento.

2. Etiqueta <html>

<html lang="es">

Es la etiqueta principal del documento. El atributo lang="es" indica que la p谩gina est谩 escrita 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>Convertir metros a pies</h3>

Muestra el nombre del ejercicio en la p谩gina.

5. Formulario

<form> ... </form>

Agrupa todos los controles del ejercicio, como las cajas de texto y los botones.

6. Caja para ingresar los metros

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

Permite al usuario escribir la cantidad de metros que desea convertir. Al ser de tipo number, solo admite n煤meros.

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(), que realiza el c谩lculo.

8. Bot贸n Limpiar

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

Limpia todas las cajas del formulario para realizar una nueva conversi贸n.

9. Caja de resultado

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

Aqu铆 se muestra el resultado de la conversi贸n en pies.

10. Etiqueta <script>

<script> ... </script>

Contiene el c贸digo JavaScript que realiza el funcionamiento del ejercicio.

11. Funci贸n convertir()

function convertir(){ }

Esta funci贸n se ejecuta cuando el usuario presiona el bot贸n Convertir. Su objetivo es leer el dato ingresado, realizar el c谩lculo y mostrar el resultado.

12. Obtener el valor ingresado

let metro = parseFloat(document.getElementById('metro').value);
  • document.getElementById('metro') busca la caja donde el usuario escribi贸 el n煤mero.
  • .value obtiene el valor escrito.
  • parseFloat() convierte ese dato en un n煤mero decimal para poder realizar operaciones matem谩ticas.

13. Conversi贸n de metros a pies

let convertir = metro * 3.28084;

Multiplica la cantidad de metros por 3.28084, porque un metro equivale aproximadamente a 3.28084 pies.

Ejemplo: Si el usuario escribe 8 metros, el programa realiza el c谩lculo:

8 × 3.28084 = 26.24672 pies

14. Mostrar el resultado

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

El programa coloca el resultado dentro de la caja de texto y agrega la unidad ft, que significa pies.

15. Funcionamiento del programa

  1. El usuario escribe una cantidad de metros.
  2. Hace clic en el bot贸n Convertir.
  3. JavaScript obtiene el n煤mero ingresado.
  4. Multiplica el valor por 3.28084.
  5. Finalmente muestra el resultado en pies (ft).
a la/s No hay comentarios.:
Etiquetas:

s谩bado, 20 de junio de 2026

Convertir metros a pulgadas 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 pulgadas</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 * 39.3701;
            document.getElementById('resultado').value = `${convertir} in`;
        }
    </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:

C贸digo Explicaci贸n
<!DOCTYPE html> Indica que el documento utiliza HTML5.
<html lang="es"> Define el inicio del documento HTML e indica que el idioma es espa帽ol.
<head> Contiene la informaci贸n de configuraci贸n del documento.
<meta charset="UTF-8"> Permite mostrar correctamente caracteres especiales como la 帽 y los acentos.
<meta http-equiv="X-UA-Compatible" content="IE=edge"> Hace que Internet Explorer utilice la versi贸n m谩s reciente de su motor de renderizado.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Hace que la p谩gina sea adaptable a celulares, tabletas y computadoras.
<title> Define el t铆tulo que aparece en la pesta帽a del navegador.
<body> Contiene todo el contenido visible de la p谩gina web.
<h3>Convertir metros a pulgadas</h3> Muestra el t铆tulo del ejercicio.
<form> Agrupa todos los elementos del formulario.
<label>metro:</label> Etiqueta que indica al usuario que debe ingresar la cantidad de metros.
<input type="number" id="metro"> Permite ingresar 煤nicamente n煤meros. El identificador metro permite acceder al dato desde JavaScript.
onclick="convertir()" Al hacer clic en el bot贸n, ejecuta la funci贸n convertir().
<input type="reset"> Limpia todos los campos del formulario.
<input type="text" id="resultado"> Muestra el resultado de la conversi贸n.
<script> Contiene el c贸digo JavaScript.
function convertir() Crea una funci贸n llamada convertir, la cual realiza toda la conversi贸n.
let metro = parseFloat(document.getElementById('metro').value); Obtiene el valor escrito por el usuario y lo convierte en un n煤mero decimal.
let convertir = metro * 39.3701; Convierte los metros a pulgadas multiplicando por 39.3701.
document.getElementById('resultado').value = `${convertir} in`; Muestra el resultado dentro del cuadro de texto agregando la unidad in (pulgadas).
</script> Finaliza el c贸digo JavaScript.
</body> Finaliza el contenido visible de la p谩gina.
</html> Finaliza el documento HTML.

Resumen del funcionamiento

El usuario escribe una cantidad de metros y hace clic en el bot贸n Convertir. La funci贸n convertir() obtiene ese valor, lo multiplica por 39.3701, ya que 1 metro equivale a 39.3701 pulgadas, y finalmente muestra el resultado en el campo de texto acompa帽ado de la unidad in.

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

Calcular el 谩rea de un rect谩ngulo 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. ❤️