viernes, 21 de febrero de 2025

Mostrar los números del 1 al 10 en JavaScript

Código del ejercicio: Con ciclo while

<!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 JavaScript</title>
</head>
<body>
    <script>
        let numero = 1;
        while(numero <= 10){
            document.write(numero + '<br>');
            numero = numero + 1;
        }
    </script>
</body>
</html>

Definición de los códigos del ejercicio:

<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.
while --> el ciclo while recorre un bloque de código siempre que una condición específica sea verdadera.
for --> el ciclo for recorre un bloque de código varias veces.
<= --> 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 incremento ( ++ ) incrementa (suma uno a) su operando y devuelve un valor.
document.write --> imprime el texto especificado en la página.
+ --> se usa para concatenar cadenas, cadenas a constantes o a variables.

Explicación del Código:

Este código HTML con JavaScript muestra los números del 1 al 10 en la página web. Aquí te explico cada parte:

1. Estructura básica del HTML

  • <!DOCTYPE html>: Indica que el documento es HTML5.
  • <html lang="es">: Define el idioma del documento como español.
  • <head>: Contiene información del documento, como el título y la codificación de caracteres.
  • <meta charset="UTF-8">: Permite mostrar correctamente los caracteres especiales en español.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Hace que la página se adapte a diferentes tamaños de pantalla.
  • <title>Ejercicio JavaScript</title>: Define el título de la página.

2. Código JavaScript en <script>

  • let numero = 1;: Declara una variable llamada numero y le asigna el valor inicial de 1.
  • while(numero <= 10) { ... }: Es un bucle while, que repite el código dentro de las llaves {} mientras la condición numero <= 10 sea verdadera.
  • document.write(numero + '<br>');: Muestra el valor de numero en la página y agrega un salto de línea (<br>).
  • numero = numero + 1;: Incrementa el valor de numero en 1 en cada iteración del bucle.

Resultado en la página:

Se mostrarán los números del 1 al 10 en líneas separadas.

Código del ejercicio: Con ciclo for

<!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 JavaScript</title>
</head>
<body>
    <script>
        for(let numero = 1; numero <= 10; numero++){
            document.write(numero + '<br>');
        }
    </script>
</body>
</html>

Definición de los códigos del ejercicio:

<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.
while --> el ciclo while recorre un bloque de código siempre que una condición específica sea verdadera.
for --> el ciclo for recorre un bloque de código varias veces.
<= --> 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 incremento ( ++ ) incrementa (suma uno a) su operando y devuelve un valor.
document.write --> imprime el texto especificado en la página.
+ --> se usa para concatenar cadenas, cadenas a constantes o a variables.

Explicación del Código:

1. <!DOCTYPE html>: Define el tipo de documento como HTML5.

2. <html lang="es">: Indica que el contenido de la página está en español.

3. <head>: Contiene información sobre el documento, como la codificación de caracteres y el título de la página.

4. <meta charset="UTF-8">: Define la codificación de caracteres como UTF-8 para que los caracteres especiales se muestren correctamente.

5. <meta http-equiv="X-UA-Compatible" content="IE=edge">: Asegura que el navegador use la última versión de su motor de renderizado.

6. <meta name="viewport" content="width=device-width, initial-scale=1.0">: Hace que la página sea responsiva y se ajuste al tamaño de la pantalla en dispositivos móviles.

7. <title>Ejercicio JavaScript</title>: Define el título de la página que aparece en la pestaña del navegador.

8. <body>: Contiene el contenido visible de la página web.

9. <script>: Dentro de esta etiqueta se coloca el código JavaScript que se ejecuta en el navegador.

10. for(let numero = 1; numero <= 10; numero++): Es un bucle for que inicia con numero igual a 1 y sigue incrementándolo hasta llegar a 10. Para cada valor de numero, ejecuta el código dentro de las llaves {}.

11. document.write(numero + '<br>');: Muestra el valor de numero seguido de un salto de línea (<br>) en la página web.

Este código muestra los números del 1 al 10 en la página, cada uno en una línea nueva.

No hay comentarios.:

Publicar un comentario

Cómo hacer un diagrama de flujo

Los diagramas de flujo son diagramas que muestran los pasos de un proceso. Los diagramas de flujo básicos son fáciles de crea...

Copyright ©2025 Ejercicios de programación. Todos los derechos reservados. ❤️