Prácticas y Ejercicios de Programación en C – Resolución de una Serie.

Prácticas y Ejercicios de Programación en C – Resolución de una Serie.

No. 57 de 57 de articulos. Practicas C

El ejercicio y práctica de programación en lenguaje C con solución que se propone, es el siguiente:

Realizar una práctica de programación que resuelva la siguiente serie, mediante un bucle for.

Serie: 10,-9,8,-7,6,-5,4,-3,2,-1

Una forma de resolución simple, y como se puede observar en la serie, es que la misma es decreciente de 10 a 1, y simplemente se alterna el valor del signo del número que se visualiza. Teniendo en cuenta esto una posible solución, puede ser la siguiente.

// Crear un ejecicio de programación resuelto con el lenguaje de programación C
// que visualice la siguiente serie.
// 10, -9, 8, -7, 6 ,-5, 4, -3, 2, -1
// www.aprendoencasa.com
// Ejercicios y practicas de programación resueltas en lenguaje C

#include <stdio.h>
#include <stdlib.h>

int main()
{

    // el primer metodo de resolución que se puede aplicar para solucionar el
    // ejercicio o practica de programación que se plantea se puede deducir, viendo
    // la serie, como se puede apreciar la serie empieza en 10 y termina en el valor
    // 1, alternando numeros positivos y negativos, para resolverlo se puede utilizar
    // un bucle de tipo for.
    int contador = 0;
    int signo = 1;
    
    for(contador=10;contador>0;contador--) {
        printf("%d ,",contador*signo);
        signo*=-1;
    }

    return 0;
}

 

El ejercicio anterior al ejecutar el mismo ha de producir una salida, similar a la que se muestra en la imagen siguiente.

 

Bucles – for … in

Bucles – for … in

No. 11 de 12 de articulos. JavaScript

El siguiente bucle que se va a comentar es, el bucle for…in, se podría definir como un bucle incondicional, ya que no utiliza una condición para su funcionamiento.

El bucle se podría traducir por Para…En. Y tiene la siguiente sintaxis.

// Bucle for...in

for(var variable in objeto) {
  Acción/es...;
  Acción/es...;
}

El funcionamiento del bucle seria el siguiente, al entrar al bucle se define una variable, normalmente con var, de esta forma la variable queda disponible de forma local a toda la función donde se encuentra el bucle, a continuación se especifica el objeto sobre el cual se quiere realizar la iteración, en cada iteración se lee una de las propiedades del objeto y el nombre de la misma es asignado a la variable definida anteriormente, el bucle finaliza cuando no encuentra más propiedades que leer del objeto.

El siguiente ejemplo muestra el funcionamiento del bucle for…in, visualizando el nombre de todas las propiedades de un objeto definido previamente.

// Declaración de objeto
var objeto = new Object();

// Declaración de propiedades del objeto
objeto.propiedad1 = "valor_propiedad_1";
objeto.propiedad2 = "valor_propiedad_2";
objeto.propiedad3 = "valor_propiedad_3";
objeto.propiedad4 = "valor_propiedad_4";

// Iterar sobre todas las propiedades del objeto

for ( var leepropiedad in objeto ) {
  console.log(leepropiedad);
}

Al ejecutar el programa, el resultado que ha de mostrar el navegador en su consola, ha de ser similar al que se muestra a continuación. Como se puede apreciar se muestra el nombre de la propiedad y no el valor de la misma.

 

A continuación se visualiza otro ejemplo de utilización del bucle, en el que se itera sobre todas las propiedades del objeto, mostrando su nombre y valor.

// Declaracion del objeto
var coche = new Object();

// Declaracion de propiedades del objeto
coche.numero_ruedas = 4;
coche.color = "rojo";
coche.combustible = "diesel";
coche.ocupantes = 2;
coche.marca = "cualquiera";
coche.modelo = "indiferente";

// Bucle for...in que itera sobre todas las propiedades
// del objeto mostrando en esta ocasión el nombre de la
// propiedad y su valor.

for(var propiedad in coche) {
  console.log(propiedad + " = " + coche[propiedad]);
}

 

Ejercicios y prácticas Diseño Web, Acceso a base de datos y visualización de registros

Ejercicios y prácticas Diseño Web, Acceso a base de datos y visualización de registros

No. 23 de 23 de articulos. HTML5

El siguiente ejercicio y práctica resuelta, muestra la utilización del lenguaje PHP, para acceder a una base de datos MySQL, leer registros de una tabla de datos y mostrarlos en el navegador. El ejercicio y práctica resuelta se ha realizado con dos soluciones, una utilizando solo el lenguaje HTML y PHP, otra utilizando el lenguaje HTML, PHP y JavaScript.

Primer Ejercicio. Realizar el acceso a la base de datos y mostrar los registros utilizando HTML y PHP.

 

1º Crear la estructura del sitio web.

En primer lugar, se ha de crear la estructura de carpetas para el sitio web que se desea crear. Obviamente la estructura de carpetas que se crean para albergar un sitio web, depende muchas veces del propio criterio del programador o diseñador web, para este ejercicio se ha planteado una estructura simple.

Los ejercicios están realizados en un ordenador que corre Windows 10 y que, para poder probar las aplicaciones web, tiene instalado el programa XAMPP, el cual realiza las funciones de servidor HTTP y servidor MySQL. En este programa como sabemos, para poder probar los sitios web que diseñamos, se ha de crear una carpeta por cada sitio web, en el directorio o carpeta htdocs, que normalmente se encuentra situado en la ruta C:\xampp\.

Por lo tanto, estando situados en el directorio o carpeta htdocs, se ha de crear una primera carpeta, la cual vamos a denominar “ejercicio1”, y dentro de la misma, se han de crear las carpetas o subdirectorios: css, php, img, html y js. La estructura ha de quedar de forma similar a la que se muestra en la imagen.

2º Crear la base de datos.

Para crear la base de datos se pueden utilizar varios programas, como por ejemplo MySQL WorkBench, que permite realizar la gestión de las bases de datos MySQL, en mi caso yo utilizo un programa diferente, pero el concepto para todos es similar. El programa que utilizo es Navicat.

En Primer lugar, se ha de acceder con el programa al servidor de MySQL estableciendo la conexión necesaria y a continuación indicar que se quiere crear una base de datos, la cual se va a denominar “Ejercicio1”.

Una vez abierta la conexión una forma simple con el programa de crear una base de datos, es realizar un clic con el botón derecho del ratón. Y seleccionar la opción denominada “New Database”

Al pulsar sobre la opción, se ha de presentar un cuadro de dialogo en el cual se ha de especificar, el nombre de la base de datos, el juego de caracteres a utilizar y la intercalación del juego de caracteres a utilizar. En el nombre de la base de datos “Database Name”, especificamos “Ejercicio1” como nombre, en el juego de caracteres “Character Set”, se ha de seleccionar la opción denominada “utf8 – UTF-8 Unicode”, y para la opción de intercalación “Collation”, se ha de especificar la opción denominada “utf8_spanish_ci””

Para finalizar la creación se ha de pulsar sobre el botón “Ok”, y en la parte izquierda del programa se puede observar como aparece la base de datos recién creada.
Seguidamente se ha de crear la tabla de datos que se quiere utilizar posteriormente. Para realizar esta acción en primer lugar se ha de indicar que se quiere abrir la base de datos, para realizar este proceso se ha de hacer un doble clic sobre el nombre de la base de datos, se puede observar que el icono de la misma, adopta un color verde indicando de esta forma que está abierta y activa.

Como se puede observar en la imagen anterior, al abrir la base de datos, en la parte izquierda aparece una nueva sección denominada Tablas “Tables”, y en la barra de herramientas, aparece un botón que permite crear una nueva tabla denominado “New Table”. Al pulsar el botón se entra en la sección del programa correspondiente a la edición de los campos de la tabla

Ahora se han de definir los campos que se quieren crear en la tabla, en este ejercicio se plantea la creación de una tabla que contenga información sobre usuarios. La cual ha de tener los campos y tipos que se especifican a continuación

Los campos especificados son: identificador, nombre, apellidos, fecha_nacimiento, localidad y provincia, como se puede apreciar el tipo de dato para todos es varchar (carácter variable), con una longitud variable dependiendo del campo, a excepción del campo fecha_nacimiento, el cual es de tipo date (fecha).
Se puede ver también que, sobre el campo identificador, en la última columna se ha realizado un clic, de esta forma se indica que el campo es la clave principal de la tabla y se comprueba ya que aparece un símbolo correspondiente a una llave.
Una vez especificados los campos y sus tipos, se cierra la pestaña de creación de la base de datos o se pulsa el botón Save, en la barra de herramientas, para que se solicite el nombre de la tabla e indicar de esta forma que el nombre que se quiere asignar es usuarios.

Ahora para poder posteriormente comprobar que el ejercicio y práctica a realizar funciona correctamente, se han de introducir en la tabla 4 o 5 registros de datos. Para ejecutar esta acción se ha de realizar un doble clic sobre el nombre de la tabla

Crear los archivos del sitio

Una vez creada la base de datos, se ha de crear la primera página que compone el sitio web, el nombre que se suele dar a esta página es index.htm, index.html o index.php, se utiliza este nombre, ya que por defecto normalmente el servidor busca estos nombres y si los encuentra carga la página automáticamente, sin tener que especificar en la url el nombre de la página a la que acceder.

Como la página que se quiere crear va a tener acceso a la base de datos y ha de mostrar los registros que lea de la tabla de usuarios, esta primera página se va a denominar index.php.

En esta primera página se ha de realizar la conexión con la base de datos, por ello se incluyen llamadas a dos archivos configuración.php y acceso.php, ambos se han de crear en el subdirectorio php de nuestro sitio. El primer archivo se encarga de establecer los valores necesarios para poder realizar la conexión con el servidor MySQL, mientras que el segundo realiza la conexión con MySQL según los datos de configuración especificados.

El archivo index.php, ha de contener el siguiente código.

<?php
    // realizar el enlace con el archivo de configuración
    require_once("./php/configuracion.php");
    // realizar el enlace con el archivo de conexión
    require_once("./php/acceso.php");
?>
<!DOCTYPE HTML>
<html>
<head>
  <title>Ejercicio 1 - MySQL</title>
  <meta charset="utf-8">
  <meta name="author" content="José Sáez">
  <meta name="generator" content="www.aprendoencasa.com">
</head>
<body>
<h1 class="titulo">Ejercicio 1 - Acceso BD MySQL</h1>
<!-- acceso a los registros de la tabla de usuarios y visualización de los mismos
 utilizando una tabla html -->
 <table>
     <thead>
         <tr>
               <th>Id.</th>
               <th>Nombre</th>
               <th>Apellidos</th>
               <th>Localidad</th>
               <th>Provincia</th>
               <th>F. Nacimiento</th>
         </tr>
     </thead>
     <tbody>
         <?php
            // crear la consulta de acceso a los datos de usuarios
            $consulta = "SELECT * FROM usuarios";
            // a continuación se envia la consulta al servidor MySQL
            $resultado = mysqli_query($conexion,$consulta);
            // se recorren los registros visualizando una fila de tabla
            // por cada uno de los registros existentes.
            while( $fila = mysqli_fetch_assoc($resultado) ) {
                echo "<tr>";
                    echo "<td>".$fila['Identificador']."</td>";
                    echo "<td>".$fila['Nombre']."</td>";
                    echo "<td>".$fila['Apellidos']."</td>";
                    echo "<td>".$fila['Localidad']."</td>";
                    echo "<td>".$fila['Provincia']."</td>";
                    echo "<td>".$fila['Fecha_Nacimiento']."<td>";
                echo "</tr>";
            }
         ?>
     </tbody>
 </table>
</body>
</html>

 

En la primera sección del código anterior.

<?php
    // realizar el enlace con el archivo de configuración
    require_once("./php/configuracion.php");
    // realizar el enlace con el archivo de conexión
    require_once("./php/acceso.php");
?>

Se realiza el enlace con dos archivos en php, que son los encargados de realizar la configuración de los datos de acceso al servidor MySQL y la conexión con el motor de base de datos.
El primer archivo con el que se realiza el enlace, es con configuracion.php, el cual se ha de guardar en el directorio o carpeta php, y el contenido del mismo ha de ser el siguiente.

<?php
// Se establecen las variables con los datos de acceso
$servidor = "localhost";
$usuario = "root";
$contra = "";
$basedatos = "ejercicio1";
?>

En este archivo se establecen las variables que sirven para realizar la conexión con el motor de MySQL del programa servidor XAMPP, los valores que se han de indicar por defecto son: localhost, para el nombre del servidor que se almacena en $servidor, root para el nombre de usuario, que se almacena en $usuario, “” (nada) como valor de contraseña, ya que por defecto el programa XAMPP no la establece, este valor se asigna a $contra, y por último ejercicio1 como nombre de la base de datos que se almacena en la variable $basedatos.
Seguidamente y volviendo al archivo index.php, se establece el enlace con el archivo que realiza la conexión con la base de datos de MySQL, el cual se denomina acceso.php, y ha de contener el siguiente código.

<?php
// se establece la conexion con la base de datos.
$conexion = mysqli_connect($servidor,$usuario,$contra,$basedatos);
// se evalua si no se ha producido la conexión en ese caso se finaliza
// la ejecución del programa
if( !$conexion ) {
    die("Error en la conexión con la base de datos");
}
?>

El código que se ha tecleado, permite la conexión con la base de datos, para esta acción se utiliza el comando de PHP, mysqli_connect, el cual tiene la siguiente sintaxis.
$variable_enlace = mysqli_connect(“servidor”,”usuario”,”contraseña”,”basedatos”);
La orden realiza el establecimiento de conexión según la configuración de datos especificadas y en caso de tener éxito en la conexión se utiliza $variable_enlace, como acceso a la misma, en caso de no producirse la conexión la variable de enlace contendrá un valor falso.
Debido al valor devuelto por la orden anterior, se utiliza posteriormente un si condicional, el cual pregunta si “no es verdadera” la variable de enlace, y en caso de no serlo produce la parada del programa utilizando el comando die.
Una vez obtenida la conexión, analizamos el siguiente código dentro de la página index.php, que es el encargado de acceder a la base de datos y leer los registros de datos.

<?php
            // crear la consulta de acceso a los datos de usuarios
            $consulta = "SELECT * FROM usuarios";
            // a continuación se envia la consulta al servidor MySQL
            $resultado = mysqli_query($conexion,$consulta);
            // se recorren los registros visualizando una fila de tabla
            // por cada uno de los registros existentes.
            while( $fila = mysqli_fetch_assoc($resultado) ) {
                echo "<tr>";
                    echo "<td>".$fila['Identificador']."</td>";
                    echo "<td>".$fila['Nombre']."</td>";
                    echo "<td>".$fila['Apellidos']."</td>";
                    echo "<td>".$fila['Localidad']."</td>";
                    echo "<td>".$fila['Provincia']."</td>";
                    echo "<td>".$fila['Fecha_Nacimiento']."<td>";
                echo "</tr>";
            }
         ?>

En primer lugar, se ha de establecer la consulta que se quiere ejecutar en lenguaje SQL y asignarla a la variable $consulta. La consulta ha de ser “SELECT * FROM usuarios”. Que significa “SELECCIONA todosloscampos DE latablausuarios”.

Seguidamente, se envía la consulta al servidor de MySQL para realizar esta acción se ha de ejecutar el comando mysqli_query, el cual tiene la siguiente sintaxis.

$variable_resultado = mysqli_query($variable_enlace,$consulta_a_ejecutar);

El comando anterior envía al servidor MySQL la orden a ejecutar, si la orden no tiene la sintaxis correcta, el servidor MySQL, devuelve un error o advertencia, en caso de que la orden sea correcta el servidor MySQL, devuelve un objeto que contiene los registros que han sido afectados por la orden y los almacena en la variable $variable_resultado. Se ha de tener en cuenta que no se puede acceder directamente a un objeto de tipo result, por lo que se han de utilizar comandos para extraer la información del resultado.

Los comandos que se pueden utilizar para extraer los registros del resultado son mysqli_fetch_array y mysqli_fetch_assoc, la sintaxis y explicación de los mismos es la siguiente.

$variable = myqsli_fetch_array($variable_resultado)

$variable = mysqli_fetch_assoc($variable_resultado)

En ambos casos, la orden extrae un registro del objeto result obtenido y lo asigna a $variable, la cual se convierte de forma automática en un array o matriz que contiene todos los datos del registro leído. En el caso de mysqli_fetch_array, la matriz que se crea, se crea aplicando valores numéricos a los índices, mientras que en el caso de mysli_fetch_assoc, la matriz que se crea contiene índices alfanuméricos que se corresponderán con los nombres de campos de la tabla MySQL leida. A este último tipo de array se les conoce como arrays asociativos, por no manejar índices numéricos y si alfanuméricos.

Una vez ejecuta la orden en $variable, se habran almacenado los datos correspondientes al registro leído y estos datos pueden ser accedidos utilizando los índices correspondientes, como se muestra en los siguientes ejemplos.

echo $variable[0];

echo $variable[‘nombrecampotabla’];

                En el primer caso se accede al dato utilizando el índice numérico y en el segundo el índice asociativo. En el caso de que las ordenes de extracción no consigan leer un registro de la variable objecto de tipo result, bien porque no existen registros que leer o bien porque se ha leído ya el último de los registros del resultado, la variable que se utilice para guardar los datos tomara un valor FALSO.

Es por este motivo que se utiliza un bucle WHILE para recorrer todos los registros del resultado, de esta forma es como preguntar. “Mientras que haya registros en resultado, lo extraes, lo guardas y lo visualizas”. Cuando se llegue al final al no leerse ningún registro se almacena un valor FALSO y el bucle evalúa su condición MIENTRAS QUE SEA VERDADERO, que al no cumplirse hace que finalice el bucle.

Dentro del bucle, se intercala el código HTML y PHP necesario para visualizar con una estructura de página web, los datos obtenidos. En este ejercicio se puede apreciar que se ha utilizado mysqli_fetch_assoc y por dicho motivo en el bucle se utiliza para rescatar los datos el nombre de la variable especificando como índice el nombre que tiene el campo en la base de datos.

Bucles – Do … While

Bucles – Do … While

No. 10 de 12 de articulos. JavaScript

Después de haber utilizado el bucle For (“Para”), a continuación, se describe el primero de los bucles denominados condicionales, ya que dependen de que una condición se cumpla para repetir las acciones que en ellos se especifican.

Este bucle es el denominado do…while, el cual se puede traducir por haz…mientras, el bucle tiene la siguiente sintaxis.

do {
  Acción/es…;
  Acción/es…;
} while ( condición_a_evaluar );

El funcionamiento del bucle seria el siguiente, el flujo del programa entra en el bucle y ejecuta una vez las acciones que se especifican dentro del bloque, cuando haya ejecutado las acciones se evalúa la condición especificada, y en caso de cumplirse se vuelve a repetir el conjunto de acciones, en caso contrario se da por finalizada la ejecución del bucle.

Teniendo en cuenta la sintaxis anterior realizar un ejercicio en el cual se muestren los valores de 1 a 10.

// Ejercicios y prácticas de programación en JavaScript
// Crear variables auxiliares
var contador=0;
// Inicializar el contador 
contador=1;
// repetir mientras que el contador tenga
// un valor inferior a 10
do {
  // visualizar el valor de contador
  console.log(contador);
  // incrementar contador en una unidad
  contador=contador+1;
} while(contador<11);

// Se ha de tener en cuenta que el no incrementar
// el contador puede tener como consecuencia
// la ejecución de un bucle infinito y por tanto
// el bloqueo del programa.
// Gracias por su visita a www.aprendoencasa.com

El resultado que se ha de obtener en la consola del navegador ha de ser similar al que se muestra a continuación.

¡¡ Otro ejercicio con más dificultad !!, no desesperéis si no os sale, intentar realizar ejercicios más simples, hasta lograr entender el que se os plantea a continuación. Recordar que, para un programador, la paciencia y constancia no son virtudes, ¡son obligaciones! 🙂

El ejercicio que se plantea es rellenar una lista de un formulario con los números del 1 al 20 y traspasar a otra lista los números primos de la primera lista.

Para realizar estas acciones se han insertado tres botones, uno que genera los números del 1 al 20 en la primera lista, un segundo botón que permite borrar los números generados de la primera lista y por último otro botón que lee los números de la primera lista y traspasa a la segunda solo aquellos que sean primos.

<!DOCTYPE HTML>
<html>
<head>
  <title>Bucle Do...While</title>
  <meta charset="utf-8">
  <meta name="author" content="josé sáez">
  <meta name="generator" content="www.aprendoencasa.com">
  <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<!-- titulo -->
<h3>Bucle Do...While</h3>
<!-- formulario -->
<form action="#" name="formulario1" id="formulario1">
    <!-- seccion izquierda con lista de números -->
    <section class="izquierda">
        <label for="lista1">Lista con números generados</label>
        <br>
        <select name="lista1" id="lista1" size="20"></select>
    </section>
    <!-- seccion central con los botones de acción -->
    <section class="centro">
        <button id="generar_numeros" name="generar_numeros" id="generar_numeros">Generar Números</button>
        <button id="borrar_lista" name="borrar_lista" id="borrar_lista">Borrar Lista</button>
        <button id="generar_primos" name="generar_primos" id="generar_primos">Generar Primos</button>
    </section>
    <!-- sección derecha con la lista de números primos -->
    <section class="derecha ultimo">
        <label for="lista2">Lista con números primos</label>
        <br>
        <select name="lista2" id="lista2" size="20"></select>
    </section>
    <div class="limpiar"></div>
</form>

<!-- cargar archivo de javascript -->
<script src="principal.js"></script>
</body>
</html>
/*
    Incluir fuentes de google
*/
@import url('https://fonts.googleapis.com/css?family=Sansita');


/* fuente para todo el documento */
body {
    font-family: 'Sansita', sans-serif;
}

/* Formulario */
body form {
    width: 90%;
    margin: 0 auto;
    padding: 1%;
    box-sizing: border-box;
    border: 1px solid grey;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

/* Sección izquierda del formulario */
.izquierda, .centro, .derecha {
    box-sizing: border-box;
    float: left;
    margin-right: 5%;
    width: 30%;
}

label {
    margin-bottom: 5px;
    display: block;
    text-align: center;
}

select {
    width: 100%;
    background-color: #66CC99;
    color: #ffffff;
}

button {
    border: none;
    background-color: #0099CC;
    padding: 5px;
    width: 100%;
    color: #ffffff;
    height: 40px;
    margin: 5px;
}

.ultimo {
    margin-right: 0px;
}




.limpiar {
    clear: both;
}
/*
    Bucle do ... while ejercicios y prácticas de programación aprendoencasa.com
*/

window.onload = function() {
    document.getElementById("generar_numeros").addEventListener("click",function(e){
        e.preventDefault();
        var lista = document.getElementById("lista1");
        lista.options.length = 0;
        var contar=1;
        do {
            let opcion = document.createElement("option");
            opcion.text = contar;
            lista.add(opcion);
            contar=contar+1;
        } while(contar<=20);
    });
    document.getElementById("borrar_lista").addEventListener("click",function(e){
        e.preventDefault();
        var lista = document.getElementById("lista1");
        lista.options.length = 0;
    });
    document.getElementById("generar_primos").addEventListener("click",function(e){
        e.preventDefault();
        let listap = document.getElementById("lista1");
        let listas = document.getElementById("lista2");
        let cuantoslistap = listap.options.length;
        if(cuantoslistap>0) {
            let contar=0;
            do {
                let numero = 0;
                numero = listap.options[contar].text;
                let divisor_inicial = 2;
                let divisor_final = numero;
                let divisores = divisor_inicial;
                let primo = "si";
                for(let d = divisor_inicial; d < divisor_final && primo=="si" ; d++ ) {
                    if( numero%d == 0 ) {
                        primo="no";
                    }
                }
                if(primo=="si") {
                    let opcion = document.createElement("option");
                    opcion.text = numero;
                    listas.add(opcion);
                }
                contar++;
            } while(contar<cuantoslistap);
        }
    })
}

 

Bucles – For

Bucles – For

No. 9 de 12 de articulos. JavaScript

Uno de los procedimientos más utilizados en cualquier lenguaje de programación es la utilización de bucles. Un bucle es la repetición de un conjunto de sentencias, un numero determinado de veces o su repetición mientras se cumpla una condición.

En varios lenguajes de programación se establecen diferencias entre las diferentes sentencias para realizar bucles, distinguiéndolas principalmente en bucles condicionales y bucles incondicionales.

En JavaScript no se aprecia tal distinción ya que las sentencias que sirven para realizar iteraciones, tienen todo un factor de condición.

Aun así, es conveniente saber aplicar un tipo u otro y esto dependerá en gran medida de que se sepa el principio y final de un bucle, o el bucle dependa de una condición. Dependiendo de esta medida a tomar se utilizará una sentencia u otra.

La primera sentencia para realizar bucles, es el bucle denominado For (“Para”), el cual tiene la siguiente sintaxis:

for ( variable = valor_inicial ; condición_a_evaluar ; incremento ) {
     acción/es a realizar ;
     acción/es a realizar ;
};

 

El funcionamiento de la sentencia For, es el siguiente, cuando el flujo del programa entra en el bucle, se asigna en primer lugar “valor_inicial”, a la “variable” especificada, a continuación se realiza la evaluación de la condición especificada en “condición_a_evaluar”, si la condición se cumple, es decir es verdadera se ejecutan las acciones especificadas dentro del bloque correspondiente al bucle, otra forma de expresarlo es que se ejecutan las ordenes que estén situadas entre las llaves { } del bucle, una vez ejecutadas las sentencias del bloque, se aplica a “variable” el incremento especificado por “incremento” y se vuelve a evaluar la condición, repitiéndose el proceso de nuevo si es verdadera y finalizando la ejecución del bucle en caso de ser falsa.

A este tipo de bucle se les denomina incondicionales, aunque como se ha comentado anteriormente tengan condición, y normalmente se han de utilizar cuando se conoce el principio y el final de repetición del bucle.

Teniendo en cuenta la sintaxis anterior, el siguiente ejercicio práctico con solución, plantea un algoritmo que visualice los números del 1 al 10.

/*
  Algoritmo que visualiza los números del 1 al 10
*/

var numeros = 0;
for( numeros = 1 ; numeros < 11 ; numeros++ ) {
    console.log(numeros);
}

/*
  Algoritmo que visualiza los números del 10 al 1
*/

for (let contar = 10 ; contar > 0 ; contar-- ) {
    console.log(contar);
}

/*
  Ejercicios y prácticas de programación en JavaScript
  Gracias por visitar www.aprendoencasa.com
*/

 

 

Poco a poco iremos incrementado la dificultad de los ejercicios y es por eso que intercalaremos explicaciones de otros temas. En esta ocasión el bucle For, que hemos utilizado en el ejemplo anterior, utiliza para aplicar el incremento de valor a la unidad el operador ++.

Se puede utilizar para incrementar o decrementar el valor de la variable el operador unario “Incremento” ( ++ ), y el operador unario “Decremento”.

La función del operador ++ es la de aumentar en una unidad el valor del operando, dependiendo de donde se situa respecto al operando se denomina preIncremento o posIncremento. Observe el siguiente ejemplo:

/*
  Ejemplo práctico operador Incremento y Decremento
*/
var NumeroA = 10;
var NumeroB = 10;
var NumeroC = 0;
var NumeroD = 0;
NumeroC = NumeroA++;
NumeroD = ++NumeroB;
console.log("A = "+NumeroA);
console.log("B = "+NumeroB);
console.log("C = "+NumeroC);
console.log("D = "+NumeroD);

El resultado una vez ejecutado en el navegador es el siguiente.

Como se puede ver en el ejemplo la variable “NumeroC”, contiene como valor 10, esto es mientras que el resto contiene como valor 11, es debido a que se ha utilizado el operador como postincremento y por tanto primero se realiza en primer lugar la asignación y posteriormente se aumenta el valor de la variable “NumeroA”, en una unidad.

Volviendo a la sentencia For para realizar bucles, el incremento no necesariamente ha de ser de una unidad, ya que se puede utilizar el concepto de acumulador para el incremento, variable=variable+valor.

El siguiente ejemplo práctico muestra un ejercicio en el cual se realiza la visualización de los números pares entre 2 y 20.

/*
 Ejercicios y prácticas resueltas en JavaScript
 Sentencia For - Bucles
 www.aprendoencasa.com
 
 Ejercicio: Visualizar los números pares entre 2 y 20
 
*/

for(let numero=2; numero<=20 ; numero=numero+2 ) {
  console.log( numero );
}

El resultado en el navegador ha de ser el siguiente.

El siguiente ejercicio resuelto que se muestra solicita mediante un formulario html, los valores de inicio y final del bucle for, y visualiza como quedaría el bucle generado y el resultado que se obtendría del mismo.

 

<!DOCTYPE HTML>
<html>
<head>
  <title>Bucle For - Javascript</title>
  <meta charset="utf-8">
  <meta name="author" content="José Sáez">
  <meta name="generator" content="www.aprendoencasa.com">
  <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
    <!-- Titulo -->
    <h3>Bucle For - Javascript</h3>
    <!-- Parrafos explicación -->
    <p>Ejercicios y prácticas de programación en JavaScript con solución</p>
    <p>El siguiente ejercicio muestra el uso del bucle For en JavaScript permitiendo la introducción de los valores iniciales y finales del bucle, mostrando el resultado en el navegador.</p>
    <!-- Formulario de petición de datos -->
    <form action="#" name="formulario1" id="formulario1">
        <label for="Inicio">Inicio</label><br>
        <input type="text" name="Inicio" id="Inicio" /><br>
        <label for="Final">Final</label><br>
        <input type="text" name="Final" id="Final" /><br><br>
        <!-- Botones -->
        <button id="generar" name="generar">Generar</button>
        <button id="ejecutar" name="ejecutar">Ejecutar</button>
    </form>
    <br>
    <!-- Ventana previsualización Orden -->
    <label for="generado">Previsualizar Sentencia</label><br>
    <textarea name="generado" id="generado" cols="60" rows="5" readonly></textarea>
    <br>
    <!-- Ventana previsualización resultado -->
    <label for="resultado">Resultado</label><br>
    <textarea name="resultado" id="resultado" cols="60" rows="5" readonly></textarea>
    <!-- Inserción de script javascript -->
    <script src="principal.js"></script>
</body>
</html>

 

/*
    FUENTES GOOGLE FONTS
    ====================
    Importar fuentes del servidor google
*/

@import url('https://fonts.googleapis.com/css?family=Sansita');
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=Nova+Mono');


/* Establecer la fuente del titulo */
body h3 {
    font-family: 'Sansita', sans-serif;
}

/* Establecer la fuente de los parrafos */
body p {
    font-family: 'PT Sans', sans-serif;
}


/* Establecer estilos para el area de texto de previsualizacion de la sentencia For */
#generado {
    background-color: #EEEEEE;
    color: #ffffff;
    font-family: 'Nova Mono', monospace;
}
/*
    Funcion a ejecutar al cargar la página
*/
window.onload = function() {
    /* Asignar evento al botón generar sentencia */
    document.getElementById('generar').addEventListener("click",function(e){
        e.preventDefault();
        var areagenerado = document.getElementById("generado");
        areagenerado.innerHTML = "for (let x = "+document.getElementById("Inicio").value +
        " ; x <= "+document.getElementById("Final").value + " ; x++) {\n" +
        " console.log( '-' + x  );\n" +
        "}";
    });
    /* Asignar evento al botón generar previsualización */
    document.getElementById("ejecutar").addEventListener("click",function(e){
        e.preventDefault();
        var arearesultado = document.getElementById("resultado");
        var mensaje = "";
        var inicio = document.getElementById("Inicio").value;
        var final = document.getElementById("Final").value;
        for(let x=inicio; x<=final; x++) {
            mensaje=mensaje+"-"+x;
        }
        arearesultado.innerHTML = mensaje;
    });
}

 

j

Ejercicio 1 - Bucle For

Realizar un ejercicio que visualice los números del 1 al 10 en orden inverso.

j

Ejercicio 2 - Bucle For

Vamos a complicar los ejercicios. Realizar un ejercicio en el cual se visualice una cuenta de 1 a 10, y a la vez, una cuenta inversa de 10 a 1.

j

Ejercicio 3 - Bucle For

Más complicación!!, realizar un ejercicio en el cual se visualicen los números primos del 1 al 20.

Control de Flujo – Switch

Control de Flujo – Switch

No. 8 de 12 de articulos. JavaScript

La sentencia switch al igual que la anterior sentencia “si condicional” permite realizar ciertas acciones dependiendo del valor y evaluación de una variable. Es decir, realiza la comprobación del valor de una variable y según su valor ejecuta unas ordenes u otras.

La sintaxis que se ha de utilizar para la sentencia switch, es la siguiente.

switch ( variable_a_evaluar ) {
  case Valor :
    acción/es a realizar …;
    break;
  case Valor :
    acción/es a realizar …;
    break;
  default:
    acción/es a realizar;
    break;
}

Para comprender su funcionamiento mejor, vamos a plantear un caso en el cual se solicita el “estado civil” de una persona, las opciones posibles serán “casado”, “separado”, “soltero” y “viudo”, a las distintas opciones le asignaremos un valor a cada una desde 1 a 4, y la sentencia switch ha de evaluar el valor y según cual sea visualizar un mensaje u otro. El ejercicio planteado podría ser el siguiente.

var estadocivil = 1;
switch ( estadocivil ) {
case 1:
    document.write(“El  usuario/a está casado/a”);
    break;
  case 2:
    document.write(“El usuario/a está separado/a”);
    break;
  case 3:
    document.write(“El usuario/a está soltero/a”);
    break;
case 4:
    document.write(“El usuario/a está viudo/a”);
    break;
default:
    document.write(“El usuario/a  no ha tecleado una opción válida”);
    break;
}

 

La sentencia “break”, que incluye cada grupo de instrucciones, hace que el programa solo ejecute las acciones que corresponden al valor evaluado, si se omite el programa continuara ejecutando las sentencias de los diferentes casos expresados en la sentencia switch.

Aprovechando esta circunstancia, se puede utilizar “break” o no para examinar “rangos” de valores, supongamos que se quiere realizar un programa en el cual se solicita un valor de 1 a 10 y dependiendo de si el valor introducido es de 1 a 4, el descuento de un artículo será del 2%, si es de 5 a 8 será del 3% y si es de 9 a 10 será del 4%. Teniendo en cuenta los parámetros anteriores puede quedar así su programación.

var tipo = 7;

switch( tipo ) {
  case 1:
  case 2:
  case 3:
  case 4:
       descuento = 2/100;
       break;
  case 5:
  case 6:
  case 7:
  case 8:
       descuento = 3/100;
       break;
  case 9:
  case 10:
       descuento = 4/100;
       break;
  default:
       descuento = 0;
       break;
}

 

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies