lunes, 29 de junio de 2026

Calcular el radio de una circunferencia y que la imprima solo si el radio sede a los 50 cm 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 radio de una circunferencia y que la imprima solo si el radio sede a los 50 cm</h3>
    <form action="">
        <label for="">circunferencia:</label>
        <input type="number" id="circunferencia"><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" size="25">
    </form>
    <script>
        function calcular(){
            let circunferencia = parseFloat(document.getElementById('circunferencia').value);
            let radio = circunferencia / (2 * Math.PI);
            if(radio <= 50){
                document.getElementById('resultado').value = `${radio.toFixed(2)} cm`;
            }else{
                document.getElementById('resultado').value = "El radio no sede a los 50 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.
<textarea></textarea> --> define un control de entrada de texto de varias l铆neas.
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.
Math.PI --> representa la relacion entre la longitud de la circunferencia de un circulo y su diametro, la cual es aproximadamente 3.14159.
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 menor o igual ( <= ) devuelve true si el operando izquierdo es menor o igual que el operando derecho, y en false caso contrario.
.toFixed() --> convierte un n煤mero a cadena conservando los N primeros decimales.
`${}` --> los literales de plantilla (cadenas de plantilla) le permiten utilizar cadenas o expresiones incrustadas en forma de cadena.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.

Explicaci贸n del C贸digo:

¿Qu茅 hace este programa?

Este programa solicita al usuario el valor de la circunferencia. Luego calcula el radio utilizando la f贸rmula matem谩tica:

Radio = Circunferencia ÷ (2 × 蟺)

Despu茅s verifica si el radio es menor o igual a 50 cm. Si cumple esa condici贸n, muestra el resultado. En caso contrario, informa que el radio supera los 50 cm.

Explicaci贸n de cada parte del c贸digo HTML

  • <!DOCTYPE html>
    Indica que el documento est谩 escrito en HTML5.
  • <html lang="es">
    Define el idioma de la p谩gina como espa帽ol.
  • <head>
    Contiene la informaci贸n de configuraci贸n del documento.
  • <meta charset="UTF-8">
    Permite mostrar correctamente caracteres como 谩, 茅, 铆, 贸 y 煤.
  • <meta name="viewport">
    Hace que la p谩gina sea adaptable a celulares y tabletas.
  • <title>
    Define el nombre que aparece en la pesta帽a del navegador.
  • <body>
    Contiene todo el contenido visible de la p谩gina.
  • <h3>
    Muestra el t铆tulo del ejercicio.
  • <form>
    Agrupa los controles del formulario.
  • <label>
    Muestra el texto que identifica cada campo.
  • <input type="number">
    Permite ingresar 煤nicamente n煤meros para la circunferencia.
  • <input type="button">
    Ejecuta la funci贸n calcular() cuando el usuario hace clic.
  • <input type="reset">
    Limpia todos los campos del formulario.
  • <input type="text">
    Muestra el resultado del c谩lculo.

Explicaci贸n de cada l铆nea del c贸digo JavaScript

  • function calcular(){
    Crea una funci贸n llamada calcular, que se ejecuta cuando se presiona el bot贸n Calcular.
  • let circunferencia = parseFloat(...);
    Obtiene el valor escrito por el usuario y lo convierte en un n煤mero decimal.
  • let radio = circunferencia / (2 * Math.PI);
    Calcula el radio utilizando la f贸rmula matem谩tica: Radio = Circunferencia ÷ (2 × 蟺).

    Math.PI representa el valor de 蟺 (3.1416 aproximadamente).
  • if(radio <= 50){
    Verifica si el radio es menor o igual a 50 cent铆metros.
  • resultado.value = radio.toFixed(2) + " cm";
    Si la condici贸n es verdadera, muestra el radio con dos decimales y agrega la unidad "cm".
  • else{
    Se ejecuta cuando el radio es mayor a 50 cent铆metros.
  • resultado.value = "El radio no sede a los 50 cm";
    Muestra un mensaje indicando que el radio supera los 50 cm.
  • }
    Finaliza la estructura condicional y la funci贸n.

Resumen del funcionamiento

  1. El usuario escribe el valor de la circunferencia.
  2. Al hacer clic en Calcular, se ejecuta la funci贸n calcular().
  3. El programa calcula el radio usando la f贸rmula matem谩tica.
  4. Comprueba si el radio es menor o igual a 50 cm.
  5. Si cumple la condici贸n, muestra el radio.
  6. Si no la cumple, muestra un mensaje indicando que el radio supera los 50 cm.

Calcular el radio de un c铆rculo 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 radio de un c铆rculo</h3>
    <form action="">
        <label for="">circunferencia:</label>
        <input type="number" id="circunferencia"><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 circunferencia = parseFloat(document.getElementById('circunferencia').value);
            let radio = circunferencia / (2 * Math.PI);
            document.getElementById('resultado').value = `${radio.toFixed(2)} 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.
<textarea></textarea> --> define un control de entrada de texto de varias l铆neas.
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.
Math.PI --> representa la relacion entre la longitud de la circunferencia de un circulo y su diametro, la cual es aproximadamente 3.14159.
.toFixed() --> convierte un n煤mero a cadena conservando los N primeros decimales.
`${}` --> los literales de plantilla (cadenas de plantilla) le permiten utilizar cadenas o expresiones incrustadas en forma de cadena.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.

Explicaci贸n del C贸digo:

Este programa permite calcular el radio de un c铆rculo a partir de la longitud de su circunferencia. El usuario introduce el valor de la circunferencia, presiona el bot贸n Calcular y el programa muestra el radio obtenido mediante una f贸rmula matem谩tica.

Explicaci贸n de cada parte del c贸digo

  • <!DOCTYPE html>
    Indica que el documento utiliza la versi贸n HTML5.
  • <html lang="es">
    Es el elemento principal de la p谩gina y especifica que el contenido est谩 en espa帽ol.
  • <head>
    Contiene informaci贸n del documento, como la codificaci贸n de caracteres y el t铆tulo de la p谩gina.
  • <meta charset="UTF-8">
    Permite mostrar correctamente caracteres especiales como letras con tilde y la letra 帽.
  • <meta name="viewport">
    Hace que la p谩gina sea adaptable a dispositivos m贸viles.
  • <title>
    Define el nombre que aparece en la pesta帽a del navegador.
  • <body>
    Contiene todos los elementos visibles de la p谩gina.
  • <h3>Calcular el radio de un c铆rculo</h3>
    Muestra el t铆tulo del ejercicio.
  • <form>
    Agrupa todos los controles del formulario.
  • <label>
    Muestra el texto Circunferencia:, indicando el dato que debe ingresar el usuario.
  • <input type="number" id="circunferencia">
    Permite ingresar la longitud de la circunferencia. Su identificador es circunferencia.
  • <input type="button">
    Crea el bot贸n Calcular, que ejecuta la funci贸n calcular().
  • <input type="reset">
    Limpia todos los campos del formulario.
  • <input type="text" id="resultado">
    Muestra el resultado obtenido despu茅s del c谩lculo.
  • <script>
    Contiene el c贸digo JavaScript encargado de realizar el c谩lculo.
  • function calcular()
    Define una funci贸n llamada calcular, que se ejecuta al hacer clic en el bot贸n Calcular.
  • parseFloat()
    Convierte el valor ingresado por el usuario en un n煤mero decimal.
  • document.getElementById('circunferencia').value
    Obtiene el valor escrito en la caja de texto de la circunferencia.
  • let radio = circunferencia / (2 * Math.PI);
    Calcula el radio utilizando la f贸rmula:
    Radio = Circunferencia ÷ (2 × 蟺)
    El valor Math.PI representa el n煤mero 蟺 (3.14159...).
  • radio.toFixed(2)
    Redondea el resultado a dos cifras decimales.
  • document.getElementById('resultado').value
    Muestra el radio calculado dentro de la caja de texto resultado junto con la unidad cm.

Resumen del funcionamiento

  1. El usuario escribe la longitud de la circunferencia.
  2. Hace clic en el bot贸n Calcular.
  3. JavaScript obtiene el valor ingresado.
  4. Calcula el radio utilizando la f贸rmula Radio = Circunferencia ÷ (2 × 蟺).
  5. Redondea el resultado a dos decimales.
  6. Muestra el radio calculado en cent铆metros.

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

Este programa permite ingresar una cantidad en cent铆metros y convertirla a metros. Cuando el usuario presiona el bot贸n Convertir, JavaScript realiza el c谩lculo y muestra el resultado en la caja de texto.

Explicaci贸n de cada parte del c贸digo

C贸digo Explicaci贸n
<!DOCTYPE html> Indica que el documento est谩 escrito en 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 de la p谩gina.
<meta charset="UTF-8"> Permite mostrar correctamente letras, n煤meros y caracteres especiales.
<meta name="viewport"...> Hace que la p谩gina se adapte correctamente a celulares y tablets.
<title> Es el t铆tulo que aparece en la pesta帽a del navegador.
<body> Contiene todo el contenido visible de la p谩gina.
<h3> Muestra el t铆tulo "Convertir cent铆metros a metros".
<form> Agrupa todos los controles del formulario.
<label> Muestra el texto que identifica el campo donde se escriben los cent铆metros.
<input type="number" id="centimetro"> Permite ingresar 煤nicamente n煤meros en cent铆metros.
<input type="button"> Crea el bot贸n Convertir que ejecuta la funci贸n convertir().
<input type="reset"> Limpia todos los datos del formulario.
<input type="text" id="resultado"> Muestra el resultado de la conversi贸n.
<script> Contiene el c贸digo JavaScript.
function convertir(){ } Define la funci贸n que realiza toda la conversi贸n.
let centimetro = parseFloat(...) Obtiene el n煤mero escrito por el usuario y lo convierte a un valor decimal.
let convertir = centimetro * 0.01; Convierte los cent铆metros a metros multiplicando por 0.01.
document.getElementById('resultado').value = `${convertir} m`; Muestra el resultado en la caja de texto agregando la unidad m.

Funcionamiento de la funci贸n convertir()

function convertir(){ let centimetro = parseFloat(document.getElementById('centimetro').value); let convertir = centimetro * 0.01; document.getElementById('resultado').value = `${convertir} m`; }

Paso 1: Lee el n煤mero que el usuario escribi贸 en el campo de cent铆metros.

Paso 2: Multiplica ese n煤mero por 0.01, ya que un cent铆metro equivale a 0.01 metros.

Paso 3: Coloca el resultado en la caja de texto de salida y agrega la letra m para indicar que el resultado est谩 en metros.

Ejemplo de ejecuci贸n

Cent铆metros Operaci贸n Resultado
100 100 × 0.01 1 m
250 250 × 0.01 2.5 m
50 50 × 0.01 0.5 m

Resumen

Este ejercicio ense帽a c贸mo obtener un dato desde un formulario, realizar un c谩lculo sencillo con JavaScript y mostrar el resultado nuevamente en la p谩gina. Tambi茅n permite comprender el uso de funciones, variables, parseFloat(), getElementById() y la propiedad value.

Mostrar los n primeros n煤meros m煤ltiplos de 7: 7,14,21,28,35,42,49,56,63,70,... 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>Mostrar los n煤meros m煤ltiplos de 7: 7,14,21,28,35,42,49,56,63,70,...</h3>
    <form action="">
        <label for="">n煤mero:</label>
        <input type="number" id="numero"><br><br>
        <input type="button" value="Mostrar" onclick="mostrar()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label><br>
        <textarea name="" id="resultado" cols="30" rows="10"></textarea>
    </form>
    <script>
        function mostrar(){
            let n = parseInt(document.getElementById('numero').value);
            let t = [], a = 7, c = 1;
            while(c <= n){
                if(a % 7 == 0){
                    t.push(a);
                    c++;
                }
                a++;
            }
            document.getElementById('resultado').value = t;
        }
    </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.
<textarea></textarea> --> define un control de entrada de texto de varias l铆neas.
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.
parseInt() --> analiza un valor como una cadena y devuelve el primer entero.
while --> el ciclo while recorre un bloque de c贸digo siempre que una condici贸n espec铆fica sea verdadera.
.push() --> agrega uno o m谩s elementos al final de un array y devuelve la nueva longitud del array.
<= --> el operador menor o igual ( <= ) devuelve true si el operando izquierdo es menor o igual que el operando derecho, y en false caso contrario.
% --> 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.
++ --> el operador de incremento ( ++ ) incrementa (suma uno a) su operando y devuelve un valor.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.

Explicaci贸n del C贸digo:

Este programa solicita al usuario un n煤mero n. Luego calcula y muestra los n primeros m煤ltiplos de 7. Por ejemplo, si el usuario escribe 5, el programa mostrar谩:

7, 14, 21, 28, 35

1. Estructura principal del documento

C贸digo Explicaci贸n
<!DOCTYPE html> Indica que el documento est谩 escrito en HTML5.
<html> Es el elemento principal donde se encuentra todo el contenido de la p谩gina.
<head> Contiene informaci贸n del documento, como el t铆tulo y la configuraci贸n de caracteres.
<body> Contiene todos los elementos que ver谩 el usuario en la p谩gina web.

2. T铆tulo del ejercicio

C贸digo Explicaci贸n
<h3> Muestra el t铆tulo que explica el objetivo del programa.

El usuario entiende que el programa mostrar谩 los primeros m煤ltiplos de 7.

3. Formulario

C贸digo Funci贸n
<form> Agrupa todos los controles del formulario.
<label> Muestra el texto "N煤mero".
<input type="number"> Permite ingresar la cantidad de m煤ltiplos que se desea mostrar.
<input type="button"> Ejecuta la funci贸n mostrar().
<input type="reset"> Limpia el formulario.
<textarea> Presenta el resultado generado por el programa.

4. Funci贸n mostrar()

Toda la l贸gica del programa se encuentra dentro de esta funci贸n.

C贸digo Explicaci贸n
let n = parseInt(document.getElementById('numero').value); Obtiene el n煤mero ingresado por el usuario y lo convierte en un n煤mero entero.
let t = []; Crea un arreglo vac铆o donde se almacenar谩n los m煤ltiplos encontrados.
let a = 7; La b煤squeda comienza desde el n煤mero 7.
let c = 1; Es un contador que indica cu谩ntos m煤ltiplos ya fueron encontrados.

5. Ciclo while

C贸digo Explicaci贸n
while(c <= n) El ciclo contin煤a hasta encontrar la cantidad de m煤ltiplos solicitados por el usuario.
if(a % 7 == 0) Comprueba si el n煤mero actual es m煤ltiplo de 7 usando el operador m贸dulo (%).
t.push(a); Guarda el m煤ltiplo encontrado dentro del arreglo.
c++; Aumenta el contador porque ya se encontr贸 un nuevo m煤ltiplo.
a++; Pasa al siguiente n煤mero para seguir buscando.

6. Mostrar el resultado

C贸digo Explicaci贸n
document.getElementById('resultado').value = t; Muestra todos los m煤ltiplos almacenados en el 谩rea de texto.

7. Funcionamiento paso a paso

Si el usuario escribe el n煤mero 5, el programa realiza las siguientes acciones:

Paso Resultado
1 Lee el n煤mero 5.
2 Empieza desde el n煤mero 7.
3 Verifica si cada n煤mero es m煤ltiplo de 7.
4 Guarda: 7, 14, 21, 28 y 35.
5 Cuando encuentra los 5 m煤ltiplos, termina el ciclo.
6 Los muestra en el 谩rea de resultados.

8. Resumen

Este programa utiliza un ciclo while para recorrer n煤meros consecutivos a partir del 7. Cada n煤mero se verifica con el operador %. Cuando el residuo de dividir entre 7 es igual a 0, significa que el n煤mero es m煤ltiplo de 7 y se guarda en un arreglo. El proceso contin煤a hasta obtener la cantidad de m煤ltiplos solicitada y finalmente todos ellos se muestran en el cuadro de resultados.

domingo, 28 de junio de 2026

Mostrar los n煤meros m煤ltiplos de 7: 7,14,21,28,35,42,49,56,63,70,... 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 Grado Celsius a Grado Fahrenheit</h3>
    <form action="">
        <label for="">Grado Celsius:</label>
        <input type="number" id="celsius"><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 celsius = parseFloat(document.getElementById('celsius').value);
            let convertir = 1.8 * celsius + 32;
            document.getElementById('resultado').value = `${convertir} °F`;
        }
    </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:

Objetivo del programa

Este programa tiene como objetivo mostrar los primeros diez n煤meros m煤ltiplos de 7: 7, 14, 21, 28, 35, 42, 49, 56, 63 y 70. Para ello utiliza HTML para crear la interfaz y JavaScript para realizar el c谩lculo.

Explicaci贸n de cada parte del c贸digo

  • <!DOCTYPE html>
    Indica al navegador que el documento est谩 desarrollado en HTML5.
  • <html lang="es">
    Especifica que el idioma principal de la p谩gina es espa帽ol.
  • <head>
    Contiene la configuraci贸n general del documento, como la codificaci贸n y el t铆tulo.
  • <meta charset="UTF-8">
    Permite mostrar correctamente caracteres especiales como tildes y la letra 帽.
  • <meta name="viewport">
    Hace que la p谩gina sea adaptable a dispositivos m贸viles y tablets.
  • <title>
    Define el nombre que aparece en la pesta帽a del navegador.
  • <body>
    Contiene todos los elementos visibles de la p谩gina.
  • <h3>
    Muestra el t铆tulo del ejercicio.
  • Bot贸n "Mostrar"
    Cuando el usuario hace clic, ejecuta la funci贸n de JavaScript encargada de generar los m煤ltiplos de 7.
  • Elemento donde se muestra el resultado
    Es el espacio de la p谩gina donde aparecer谩n los n煤meros generados por el programa.
  • <script>
    Contiene el c贸digo JavaScript que realiza el proceso.
  • Funci贸n mostrar()
    Es la funci贸n principal del programa. Se ejecuta al presionar el bot贸n.
  • Ciclo for
    Repite una misma operaci贸n diez veces para obtener los primeros diez m煤ltiplos de 7.
  • Operaci贸n i * 7
    Multiplica el n煤mero de cada repetici贸n por 7 para generar los m煤ltiplos.
  • Mostrar el resultado
    Cada n煤mero calculado se agrega al resultado hasta completar la serie: 7, 14, 21, 28, 35, 42, 49, 56, 63 y 70.

Funcionamiento del programa

  1. El usuario presiona el bot贸n Mostrar.
  2. Se ejecuta la funci贸n mostrar().
  3. El ciclo for realiza diez repeticiones.
  4. En cada repetici贸n se multiplica el contador por 7.
  5. Cada resultado se almacena y se agrega a la lista de salida.
  6. Finalmente, los diez m煤ltiplos aparecen en la p谩gina web.
Resumen

Este ejercicio combina HTML para construir la interfaz y JavaScript para realizar los c谩lculos. El uso de un ciclo for permite repetir autom谩ticamente la multiplicaci贸n por 7 diez veces, obteniendo as铆 los primeros diez m煤ltiplos de este n煤mero y mostr谩ndolos en la p谩gina web.

Convertir Grado Celsius a Grado Fahrenheit 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 Grado Celsius a Grado Fahrenheit</h3>
    <form action="">
        <label for="">Grado Celsius:</label>
        <input type="number" id="celsius"><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 celsius = parseFloat(document.getElementById('celsius').value);
            let convertir = 1.8 * celsius + 32;
            document.getElementById('resultado').value = `${convertir} °F`;
        }
    </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. Declaraci贸n del documento

<!DOCTYPE html>

Indica que el documento utiliza la versi贸n HTML5. Esto permite que el navegador interprete correctamente todo el contenido de la p谩gina.

2. Etiqueta HTML

<html lang="es">

Es la etiqueta principal del documento HTML.

El atributo lang="es" indica que el idioma del sitio es espa帽ol.

3. Encabezado (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>
  • meta charset="UTF-8"
    Permite utilizar correctamente letras con tilde, la letra 帽 y otros caracteres especiales.
  • meta http-equiv
    Mejora la compatibilidad del sitio con algunos navegadores.
  • meta viewport
    Hace que la p谩gina sea adaptable a celulares, tabletas y computadoras.
  • title
    Define el nombre que aparece en la pesta帽a del navegador.

4. T铆tulo del ejercicio

<h3> Convertir Grado Celsius a Grado Fahrenheit </h3>

Muestra el nombre del ejercicio dentro de la p谩gina web.

5. Formulario HTML

<form> <label>Grado Celsius:</label> <input type="number" id="celsius"> <input type="button" value="Convertir" onclick="convertir()"> <input type="reset" value="Limpiar"> <label>Resultado:</label> <input type="text" id="resultado"> </form>
  • label
    Muestra el texto descriptivo del campo.
  • input type="number"
    Permite ingresar 煤nicamente n煤meros correspondientes a los grados Celsius.
  • id="celsius"
    Identifica el cuadro de texto para que JavaScript pueda obtener el valor ingresado.
  • input type="button"
    Crea el bot贸n Convertir.
  • onclick="convertir()"
    Ejecuta la funci贸n convertir() cuando el usuario hace clic en el bot贸n.
  • input type="reset"
    Limpia todos los campos del formulario.
  • input type="text"
    Muestra el resultado de la conversi贸n.
  • id="resultado"
    Identifica el cuadro donde aparecer谩 el resultado.

6. Funci贸n JavaScript

function convertir(){ let celsius = parseFloat( document.getElementById('celsius').value); let convertir = 1.8 * celsius + 32; document.getElementById('resultado').value = `${convertir} °F`; }

Paso 1. Crear la funci贸n

La funci贸n convertir() contiene todas las instrucciones necesarias para realizar la conversi贸n de temperatura. Se ejecuta al hacer clic en el bot贸n Convertir.

Paso 2. Obtener el dato ingresado

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

document.getElementById('celsius') busca el cuadro de texto donde el usuario escribi贸 la temperatura.

.value obtiene el contenido del cuadro.

parseFloat() convierte ese contenido en un n煤mero decimal.

Finalmente, el n煤mero se guarda en la variable celsius.

Paso 3. Realizar la conversi贸n

let convertir = 1.8 * celsius + 32;

Se aplica la f贸rmula para convertir grados Celsius a grados Fahrenheit.

°F = (1.8 × °C) + 32

El resultado obtenido se almacena en la variable convertir.

Paso 4. Mostrar el resultado

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

Se busca el cuadro de texto llamado resultado y se muestra la temperatura convertida agregando el s铆mbolo °F.

7. Funcionamiento del programa

  1. El usuario escribe una temperatura en grados Celsius.
  2. Presiona el bot贸n Convertir.
  3. JavaScript obtiene el n煤mero ingresado.
  4. Aplica la f贸rmula de conversi贸n:
  5. °F = (1.8 × °C) + 32
  6. Finalmente muestra el resultado en grados Fahrenheit.

Calcular el radio de una circunferencia y que la imprima solo si el radio sede a los 50 cm 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. ❤️