jueves, 25 de junio de 2026

Eliminar un carácter x de una cadena 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>Eliminar un carácter x de una cadena</h3>
    <form action="">
        <label for="">Ingresar texto:</label>
        <input type="text" id="s"><br><br>
        <label for="">Ingrese un carácter:</label>
        <input type="text" id="x"><br><br>
        <input type="button" value="Mostrar" onclick="mostrar()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function mostrar(){
            let s = document.getElementById('s').value;
            let x = document.getElementById('x').value;
            let aux = "", i = 0, sw = 0;
            while(i < s.length){
                if(s[i] == x && sw == 0){
                    sw = 1;
                }else{
                    aux = aux + s[i];
                    sw = 0;
                }
                i++;
            }
            document.getElementById('resultado').value = aux;
        }
    </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.
while --> el ciclo while recorre un bloque de código siempre que una condición específica sea verdadera.
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 que ( < ) devuelve true si el operando izquierdo es menor que el operando derecho.
length --> la propiedad length devuelve la longitud de una cadena.
== --> el operador de comparacion ( == ) comprueba si sus dos operandos son iguales y devuelve un resultado booleano.
&& --> el operador lógico AND ( && ) (conjunción lógica) para un conjunto de operandos booleanos será true si y solo si todos los operandos son true. De lo contrario será false.
++ --> 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:

1. Título de la página

<title>Ejercicio HTML y JavaScript</title>

Define el título que aparecerá en la pestaña del navegador.

2. Encabezado principal

<h3>Eliminar un carácter x de una cadena</h3>

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

3. Campo para ingresar el texto

Permite escribir la cadena de texto donde se eliminará un carácter.

4. Campo para ingresar el carácter

Permite ingresar el carácter que se desea eliminar de la cadena.

5. Botón Mostrar

onclick="mostrar()"

Ejecuta la función mostrar() cuando el usuario hace clic en el botón.

6. Obtener los datos ingresados

let s = document.getElementById('s').value;
let x = document.getElementById('x').value;

Obtiene la cadena de texto y el carácter ingresados por el usuario.

7. Crear variables auxiliares

let aux = "", i = 0, sw = 0;

aux almacenará la nueva cadena.
i servirá para recorrer la cadena.
sw funcionará como una bandera de control.

8. Recorrer la cadena

while(i < s.length)

Recorre cada carácter de la cadena desde el primero hasta el último.

9. Verificar si el carácter coincide

if(s[i] == x && sw == 0)

Comprueba si el carácter actual es igual al carácter que se desea eliminar.

10. No agregar el carácter encontrado

sw = 1;

Cuando encuentra el carácter indicado, evita que se agregue a la nueva cadena.

11. Agregar los demás caracteres

aux = aux + s[i];

Si el carácter es diferente, se agrega a la nueva cadena almacenada en aux.

12. Avanzar al siguiente carácter

i++;

Incrementa el contador para continuar recorriendo la cadena.

13. Mostrar el resultado

document.getElementById('resultado').value = aux;

Muestra la nueva cadena sin el carácter eliminado en el campo de resultado.

Resumen del ejercicio

El programa solicita una cadena de texto y un carácter. Luego recorre la cadena, elimina las apariciones del carácter indicado y finalmente muestra el texto resultante.

Contar las veces que se repite un carácter x en una frase 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>Contar las veces que se repite un carácter x en una frase</h3>
    <form action="">
        <label for="">Ingresar texto:</label>
        <input type="text" id="s"><br><br>
        <label for="">Ingrese un carácter:</label>
        <input type="text" id="x"><br><br>
        <input type="button" value="Mostrar" onclick="mostrar()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado" size="45">
    </form>
    <script>
        function mostrar(){
            let s = document.getElementById('s').value.toLowerCase();
            let x = document.getElementById('x').value.toLowerCase();
            let i = 0, cc = 0;
            while(i < s.length){
                if(s[i] == x){
                    cc++;
                }
                i++;
            }
            document.getElementById('resultado').value = `Las veces que se repite el carácter ${x} es ${cc} veces.`;
        }
    </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.
toLowerCase() --> convierte una cadena en letras minúsculas.
while --> el ciclo while recorre un bloque de código siempre que una condición específica sea verdadera.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
< --> el operador menor que ( < ) devuelve true si el operando izquierdo es menor que el operando derecho.
length --> la propiedad length devuelve la longitud de una cadena.
== --> 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.
`${}` --> 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

Se crea una página web con un formulario que permite ingresar una frase, escribir un carácter, ejecutar el cálculo y mostrar el resultado.

2. Campo para ingresar la frase

El elemento input con id="s" permite al usuario escribir la frase en la que se buscará el carácter.

3. Campo para ingresar el carácter

El elemento input con id="x" permite escribir el carácter que se desea buscar dentro de la frase.

4. Botón Mostrar

Al hacer clic en el botón Mostrar, se ejecuta la función JavaScript llamada mostrar().

5. Obtener los datos

La función obtiene la frase y el carácter utilizando document.getElementById(). Luego, ambos valores se convierten a minúsculas con toLowerCase() para evitar diferencias entre mayúsculas y minúsculas.

6. Variables de control

La variable i sirve para recorrer la frase carácter por carácter, mientras que cc almacena la cantidad de repeticiones encontradas.

7. Recorrer la frase

El ciclo while recorre toda la frase desde el primer carácter hasta el último.

8. Comparar los caracteres

En cada recorrido se compara el carácter actual de la frase con el carácter ingresado por el usuario. Si son iguales, la variable cc aumenta en uno.

9. Mostrar el resultado

Cuando termina el recorrido, se muestra un mensaje indicando cuántas veces aparece el carácter dentro de la frase.

10. Botón Limpiar

El botón Limpiar elimina los datos del formulario para que el usuario pueda realizar una nueva búsqueda.

Resumen del funcionamiento

El programa solicita una frase y un carácter, recorre toda la frase, cuenta cuántas veces aparece dicho carácter y finalmente muestra el total encontrado.

Multiplicación de dos números, cuando multiplique 0 * 0 muestre un mensaje "El producto de 0 por cualquier número es 0" 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>Multiplicación de dos números, cuando multiplique 0 * 0 muestre un mensaje "El producto de 0 por cualquier número es 0"</h3>
    <form action="">
        <label for="">número 1:</label>
        <input type="number" id="n1"><br><br>
        <label for="">número 2:</label>
        <input type="number" id="n2"><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="35">
    </form>
    <script>
        function calcular(){
            let n1 = parseFloat(document.getElementById('n1').value);
            let n2 = parseFloat(document.getElementById('n2').value);
            if(n1 == 0 && n2 == 0){
                document.getElementById('resultado').value = "El producto de 0 por cualquier número es 0.";
            }else{
                document.getElementById('resultado').value = n1 * n2;
            }
        }
    </script>
</body>
</html>

Definición de los códigos del ejercicio:

<h3></h3> --> representa un encabezado de nivel 3.
<form></form> --> se utiliza para crear un formulario HTML para la entrada del usuario.
<br> --> produce un salto de línea en el texto.
<label></label> --> representa una etiqueta para un elemento en una interfaz de usuario.
<input> --> etiqueta especifica un campo de entrada donde el usuario puede ingresar datos.
onclick --> onclick evento ocurre cuando el usuario hace clic en un elemento.
<script></script> --> contiene comandos u ordenes que se van ejecutando de manera secuencial y comúnmente se utilizan para controlar el comportamiento de un programa en específico o para interactuar con el sistema operativo.
function --> es un bloque de código diseñado para realizar una tarea en particular.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
parseFloat() --> analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
else --> se usa para especificar un bloque de código a ejecutar, si la misma condición es falsa.
== --> el operador de comparacion ( == ) comprueba si sus dos operandos son iguales y devuelve un resultado booleano.
&& --> el operador lógico AND ( && ) (conjunción lógica) para un conjunto de operandos booleanos será true si y solo si todos los operandos son true. De lo contrario será false.
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 ingresar dos números y multiplicarlos utilizando HTML y JavaScript. Además, si ambos números ingresados son 0, el programa muestra el mensaje: "El producto de 0 por cualquier número es 0."

Explicación de cada parte del código

Parte del código	Función
<!DOCTYPE html>	Indica que el documento utiliza HTML5.
<html lang="es">	Define que la página está escrita en español.
<head>	Contiene la configuración general de la página web.
<meta charset="UTF-8">	Permite mostrar correctamente caracteres especiales y acentos.
<meta name="viewport">	Hace que la página sea adaptable a celulares y tablets.
<title>	Define el título que aparece en la pestaña del navegador.
<h3>	Muestra el enunciado del ejercicio en la página.
<form>	Agrupa todos los controles del formulario.
<label>	Muestra el texto descriptivo de cada campo.
<input type="number" id="n1">	Permite ingresar el primer número.
<input type="number" id="n2">	Permite ingresar el segundo número.
<input type="button">	Crea el botón que ejecuta el cálculo.
onclick="calcular()"	Llama a la función calcular() cuando se hace clic en el botón.
<input type="reset">	Limpia todos los campos del formulario.
<input type="text" id="resultado">	Muestra el resultado o el mensaje generado por el programa.
<script>	Contiene el código JavaScript que realiza las operaciones.
function calcular()	Define la función encargada de realizar el cálculo.
parseFloat()	Convierte los valores ingresados a números decimales.
document.getElementById()	Obtiene un elemento de la página mediante su identificador.
if(n1 == 0 && n2 == 0)	Comprueba si ambos números son iguales a cero.
&&	Operador lógico AND. Ambas condiciones deben ser verdaderas.
resultado.value = "El producto de 0 por cualquier número es 0."	Muestra el mensaje especial cuando se ingresa 0 y 0.
else	Se ejecuta cuando la condición del if no se cumple.
n1 * n2	Realiza la multiplicación de los dos números ingresados.
resultado.value = n1 * n2	Muestra el resultado de la multiplicación en la caja de texto.

Resumen del funcionamiento

El usuario ingresa dos números y presiona el botón Calcular. La función calcular() obtiene los valores ingresados y verifica si ambos son cero. Si son cero, muestra el mensaje: "El producto de 0 por cualquier número es 0.". En caso contrario, multiplica los dos números y muestra el resultado en el campo correspondiente.

miércoles, 24 de junio de 2026

Mostrar el primer número negativo de cuatro números 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 el primer número negativo de cuatro números</h3>
    <form action="">
        <label for="">número 1:</label>
        <input type="number" id="n1"><br><br>
        <label for="">número 2:</label>
        <input type="number" id="n2"><br><br>
        <label for="">número 3:</label>
        <input type="number" id="n3"><br><br>
        <label for="">número 4:</label>
        <input type="number" id="n4"><br><br>
        <input type="button" value="Mostrar" onclick="mostrar()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function mostrar(){
            let n1 = parseInt(document.getElementById('n1').value);
            let n2 = parseInt(document.getElementById('n2').value);
            let n3 = parseInt(document.getElementById('n3').value);
            let n4 = parseInt(document.getElementById('n4').value);
            if(n1 < 0){
                document.getElementById('resultado').value = n1;
            }else if(n2 < 0){
                document.getElementById('resultado').value = n2;
            }else if(n3 < 0){
                document.getElementById('resultado').value = n3;
            }else if(n4 < 0){
                document.getElementById('resultado').value = n4;
            }else{
                document.getElementById('resultado').value = "No existe número negativo.";
            }
        }
    </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.
parseInt() --> analiza un valor como una cadena y devuelve el primer entero.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
else if --> se usa para especificar una nueva condición para probar, si la primera condición es falsa.
else --> se usa para especificar un bloque de código a ejecutar, si la misma condición es falsa.
< --> el operador menor que ( < ) devuelve true si el operando izquierdo es menor que el operando derecho.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.

Explicación del Código:

¿Qué hace este programa?

Este programa permite ingresar cuatro números. Después de presionar el botón Mostrar, el programa revisa los números en el mismo orden en que fueron escritos y muestra únicamente el primer número negativo que encuentre. Si ninguno de los cuatro números es negativo, muestra el mensaje: "No existe número negativo."

Explicación de cada parte del código

<!DOCTYPE html>
Indica que el documento utiliza HTML5.
<html lang="es">
Informa que la página está escrita en español.
<head>
Contiene la información principal del documento, como la codificación, el tamaño de la pantalla y el título de la página.
<meta charset="UTF-8">
Permite mostrar correctamente letras con acentos y la letra ñ.
<meta name="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.
<body>
Contiene todo el contenido visible de la página.
<h3>
Muestra el título del ejercicio.
<form>
Agrupa todos los controles del formulario.
<label>
Muestra el nombre de cada campo donde se ingresan los números.
<input type="number">
Permite al usuario escribir únicamente valores numéricos.
<input type="button">
Crea el botón Mostrar, que ejecuta la función mostrar().
<input type="reset">
Limpia todos los datos escritos en el formulario.
<input type="text">
Muestra el resultado obtenido por el programa.
<script>
Contiene el código JavaScript encargado de realizar el proceso.

Explicación de la función `mostrar()`

function mostrar(){ }

Se crea una función llamada mostrar(). Esta función se ejecuta cuando el usuario hace clic en el botón Mostrar.

let n1 = parseInt(document.getElementById('n1').value);

Obtiene el valor escrito en el primer cuadro de texto y lo convierte en un número entero utilizando parseInt().

Las siguientes líneas hacen exactamente lo mismo para los otros tres números:

let n2 = parseInt(document.getElementById('n2').value); let n3 = parseInt(document.getElementById('n3').value); let n4 = parseInt(document.getElementById('n4').value);

if(n1 < 0){

Comprueba si el primer número es menor que cero. Si lo es, significa que es negativo y se muestra como resultado.

document.getElementById('resultado').value = n1;

Escribe el primer número negativo encontrado en la caja de resultado.

}else if(n2 < 0){

Si el primer número no es negativo, el programa revisa el segundo número.

}else if(n3 < 0){

Si el segundo tampoco es negativo, revisa el tercer número.

}else if(n4 < 0){

Si los tres primeros no son negativos, revisa el cuarto número.

}else{ document.getElementById('resultado').value = "No existe número negativo."; }

Si ninguno de los cuatro números es negativo, el programa muestra el mensaje: "No existe número negativo."

¿Cómo trabaja el programa?

El usuario escribe cuatro números.
Hace clic en el botón Mostrar.
JavaScript lee los cuatro valores.
Comienza revisando el primer número.
Si encuentra un número negativo, lo muestra inmediatamente y deja de revisar los demás.
Si ninguno es negativo, informa que no existe ningún número negativo.

Ejemplo

Entrada:

Número 1: 8 Número 2: 15 Número 3: -6 Número 4: -10

Resultado:

-6

Aunque el cuarto número también es negativo, el programa muestra solamente el primero que encuentra al revisar los datos de izquierda a derecha.

Calcular la división de dos números, mostrando un mensaje de error si hubiera 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 la división de dos números, mostrando un mensaje de error si hubiera</h3>
    <form action="">
        <label for="">número 1:</label>
        <input type="number" id="n1"><br><br>
        <label for="">número 2:</label>
        <input type="number" id="n2"><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 n1 = parseFloat(document.getElementById('n1').value);
            let n2 = parseFloat(document.getElementById('n2').value);
            if(n2 == 0){
                document.getElementById('resultado').value = "No se puede dividir entre cero.";
            }else{
                document.getElementById('resultado').value = n1 / n2;
            }
        }
    </script>
</body>
</html>

Definición de los códigos del ejercicio:

<h3></h3> --> representa un encabezado de nivel 3.
<form></form> --> se utiliza para crear un formulario HTML para la entrada del usuario.
<br> --> produce un salto de línea en el texto.
<label></label> --> representa una etiqueta para un elemento en una interfaz de usuario.
<input> --> etiqueta especifica un campo de entrada donde el usuario puede ingresar datos.
onclick --> onclick evento ocurre cuando el usuario hace clic en un elemento.
<script></script> --> contiene comandos u ordenes que se van ejecutando de manera secuencial y comúnmente se utilizan para controlar el comportamiento de un programa en específico o para interactuar con el sistema operativo.
function --> es un bloque de código diseñado para realizar una tarea en particular.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
parseFloat() --> analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
else --> se usa para especificar un bloque de código a ejecutar, si la misma condición es falsa.
== --> el operador de comparacion ( == ) comprueba si sus dos operandos son iguales y devuelve un resultado booleano.
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:

1. Estructura HTML

Código	Función
`<!DOCTYPE html>`	Indica que el documento está escrito en HTML5.
`<html lang="es">`	Inicia la página 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 como á, é, í, ó, ú y la ñ.
`<meta name="viewport">`	Hace que la página se adapte correctamente a celulares y tablets.
`<title>`	Define el nombre que aparece en la pestaña del navegador.

2. Formulario

Código	Función
`<form>`	Contiene todos los controles del formulario.
`<label>`	Muestra el texto que identifica cada caja de entrada.
`<input type="number">`	Permite ingresar únicamente números.
`id="n1"`	Identifica el primer número.
`id="n2"`	Identifica el segundo número.
`<input type="button">`	Crea el botón Calcular que ejecuta la función `calcular()`.
`<input type="reset">`	Limpia todas las cajas del formulario.
`id="resultado"`	Es la caja donde se muestra el resultado o el mensaje de error.

3. Función JavaScript

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

Código	Explicación sencilla
`function calcular(){`	Crea una función llamada calcular, que se ejecuta cuando el usuario hace clic en el botón Calcular.
`let n1 = parseFloat(...)`	Obtiene el primer número escrito por el usuario y lo convierte en un número decimal.
`let n2 = parseFloat(...)`	Obtiene el segundo número y también lo convierte en un número decimal.
`if(n2 == 0)`	Comprueba si el segundo número es cero.
`resultado.value = "No se puede dividir entre cero."`	Si el divisor es cero, muestra un mensaje de error porque una división entre cero no está permitida.
`else`	Si el segundo número es diferente de cero, continúa con la operación.
`resultado.value = n1 / n2;`	Realiza la división del primer número entre el segundo y muestra el resultado.

5. ¿Cómo funciona el programa?

El usuario escribe el primer número.
Luego escribe el segundo número.
Hace clic en el botón Calcular.
JavaScript obtiene ambos números.
Comprueba si el segundo número es cero.
Si es cero, muestra el mensaje: "No se puede dividir entre cero."
Si no es cero, realiza la división y muestra el resultado en la caja de texto.

6. Resumen

Este programa permite dividir dos números ingresados por el usuario. Antes de realizar la división, JavaScript verifica que el segundo número no sea cero. Si el divisor es cero, el programa muestra un mensaje de error para evitar una operación inválida. En caso contrario, calcula la división y presenta el resultado en la pantalla.

Sacar el promedio de cuatro números 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>Sacar el promedio de cuatro números</h3>
    <form action="">
        <label for="">número 1:</label>
        <input type="number" id="n1"><br><br>
        <label for="">número 2:</label>
        <input type="number" id="n2"><br><br>
        <label for="">número 3:</label>
        <input type="number" id="n3"><br><br>
        <label for="">número 4:</label>
        <input type="number" id="n4"><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 n1 = parseInt(document.getElementById('n1').value);
            let n2 = parseInt(document.getElementById('n2').value);
            let n3 = parseInt(document.getElementById('n3').value);
            let n4 = parseInt(document.getElementById('n4').value);
            let promedio = Math.round((n1 + n2 + n3 + n4) / 4);
            document.getElementById('resultado').value = `El promedio es ${promedio}`;
        }
    </script>
</body>
</html>

Definición de los códigos del ejercicio:

Explicación del Código:

Este programa solicita cuatro números al usuario mediante un formulario en HTML. Después, JavaScript obtiene esos valores, calcula el promedio de los cuatro números y muestra el resultado en una caja de texto.

1. <!DOCTYPE html>

Indica que el documento utiliza la versión HTML5.

2. <html lang="es">

Inicia el documento HTML e indica que el idioma del contenido es español.

3. <head>

Contiene la configuración de la página, como la codificación de caracteres, el diseño adaptable y el título del documento.

4. <body>

Aquí se encuentra todo el contenido visible de la página: el formulario, los botones y el resultado.

5. Título del ejercicio

<h3>Sacar el promedio de cuatro números</h3>

Muestra el título que identifica el ejercicio.

6. Formulario

Agrupa todos los controles donde el usuario ingresa los datos.

7. Etiquetas (label)

<label>Número 1:</label>

Muestran el nombre de cada campo para que el usuario sepa qué dato debe escribir.

8. Cajas de texto

Permiten ingresar únicamente números. Cada caja tiene un identificador (id) diferente para que JavaScript pueda obtener su contenido.

9. Botón Calcular

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

10. Botón Limpiar

Borra todos los datos escritos en el formulario.

11. Caja de resultado

Muestra el promedio calculado por el programa.

12. Función calcular()

function calcular(){ }

Es la función que realiza todo el proceso del cálculo del promedio.

13. Obtener los números

let n1 = parseInt(document.getElementById('n1').value);

document.getElementById() busca el campo mediante su identificador.

.value obtiene el valor escrito por el usuario.

parseInt() convierte ese valor en un número entero.

14. Calcular el promedio

let promedio = Math.round((n1+n2+n3+n4)/4);

Primero suma los cuatro números.

Luego divide el resultado entre cuatro para obtener el promedio.

Finalmente, Math.round() redondea el resultado al entero más cercano.

15. Mostrar el resultado

document.getElementById('resultado').value = `El promedio es ${promedio}`;

Escribe el promedio obtenido dentro de la caja de texto del resultado.

Resumen del funcionamiento

El usuario escribe cuatro números.
Hace clic en Calcular.
JavaScript obtiene los cuatro valores.
Los convierte en números enteros.
Suma los cuatro números.
Divide la suma entre cuatro.
Redondea el promedio.
Muestra el resultado en la caja de texto.

Páginas

jueves, 25 de junio de 2026

Eliminar un carácter x de una cadena en HTML y JavaScript

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Título de la página

2. Encabezado principal

3. Campo para ingresar el texto

4. Campo para ingresar el carácter

5. Botón Mostrar

6. Obtener los datos ingresados

7. Crear variables auxiliares

8. Recorrer la cadena

9. Verificar si el carácter coincide

10. No agregar el carácter encontrado

11. Agregar los demás caracteres

12. Avanzar al siguiente carácter

13. Mostrar el resultado

Resumen del ejercicio

Contar las veces que se repite un carácter x en una frase en HTML y JavaScript

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Estructura HTML

2. Campo para ingresar la frase

3. Campo para ingresar el carácter

4. Botón Mostrar

5. Obtener los datos

6. Variables de control

7. Recorrer la frase

8. Comparar los caracteres

9. Mostrar el resultado

10. Botón Limpiar

Resumen del funcionamiento

Multiplicación de dos números, cuando multiplique 0 * 0 muestre un mensaje "El producto de 0 por cualquier número es 0" en HTML y JavaScript

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

Explicación de cada parte del código

Resumen del funcionamiento

miércoles, 24 de junio de 2026

Mostrar el primer número negativo de cuatro números en HTML y JavaScript

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

¿Qué hace este programa?

Explicación de cada parte del código

Explicación de la función mostrar()

¿Cómo trabaja el programa?

Ejemplo

Calcular la división de dos números, mostrando un mensaje de error si hubiera en HTML y JavaScript

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Estructura HTML

2. Formulario

3. Función JavaScript

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

5. ¿Cómo funciona el programa?

6. Resumen

Sacar el promedio de cuatro números en HTML y JavaScript

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. <!DOCTYPE html>

2. <html lang="es">

3. <head>

4. <body>

5. Título del ejercicio

6. Formulario

7. Etiquetas (label)

8. Cajas de texto

9. Botón Calcular

10. Botón Limpiar

11. Caja de resultado

12. Función calcular()

13. Obtener los números

14. Calcular el promedio

15. Mostrar el resultado

Explicación de la función `mostrar()`