domingo, 13 de diciembre de 2020

Solución de Access denied en MySQL

Si aparece el error Access denied for user 'root'@'localhost' y se está empleando MySQL versión 8, la solución más sencilla es ejecutar en la línea de comandos de MySQL cualquiera de las siguientes sentencias dependiendo si se desea establecer o no una contraseña


Solución en LINUX

En el caso de LINUX el primer paso es abrir el terminal CTRL + ALT + T. Luego ingresar a la consola de MySQL con el comando:

sudo mysql -u root

Solución en WINDOWS

El primer paso en WINDOWS es abrir el CMD con WINDOWS + R o desde el menú inicio escribiendo CMD. Luego ingresar a la consola de MySQL con el comando:

mysql -uroot -p

Luego ingresar cualquiera de las siguientes dos opciones

Sin contraseña


  ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY ''
  

Con contraseña


  ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'clave';
  

viernes, 27 de noviembre de 2020

Creando una tabla en SQLite

Crear la base de datos

Se requiere de un programa que administre bases de datos de SQLite para crear las bases de datos y opcionalmente comprobar si los cambios realizados por aplicaciones externas funcionan. Se puede emplear alguno de estos u otros:

Las bases de datos de SQLite son archivos en lugar de un conjuntos de carpetas y archivos contenidos en un servidor, por lo cual no requieren un puerto.

Una vez instalado el programa, se selecciona la opción de agregar una base de datos

Se agrega una base de datos, se puede seleccionar una existente o crear una nueva

Se procede a crear una base de datos con la extensión "db" y luego realizar un test de conexión

Finalmente, aceptar


Crear la tabla

Mediante el programa se puede crear la tabla y las columnas seleccionando la base de datos:


Luego se debe seguir una serie de pasos para agregar columnas y configurarlas.

  1. Indicar el nombre de la tabla
  2. Agregar columnas
  3. Indicar el nombre de la columna y su tipo, adicionalmente el tamaño. Por ejemplo, columnas que contienen texto o números con decimales.
  4. Indicar los restricciones (constraints) como clave primaria, foránea, campo único, etc.
  5. En algunos casos es necesario agregar una configuración adicional a las restricciones.
  6. Por ejemplo, en los campos PRIMARY KEY de tipo entero, el autoincremento. Además, se puede colocar un nombre a la restricción. Por ejemplo, necesario para claves foráneas.
  7. Finalmente aplicar cambios y repetir el proceso para cada columna que se desee agregar.

Se confirman los cambios, luego aparece el código SQL generado que se puede guardar para tener un Script.



Código SQL

Si se desea, se puede colocar el código directamente, para ello se debe seleccionar el editor SQL como se muestra.

En el editor SQL se debe ingresar lo siguiente y ejecutar (F9 en Windows).

CREATE TABLE inquilinos (
    idinquilinos  INTEGER         PRIMARY KEY AUTOINCREMENT,
    dni           VARCHAR (8)     UNIQUE
                                  NOT NULL,
    nombres       VARCHAR (150)   NOT NULL,
    paterno       VARCHAR (150)   NOT NULL,
    materno       VARCHAR (150)   NOT NULL,
    telefono      VARCHAR (40),
    correo        VARCHAR (200),
    deuda         DECIMAL (10, 2) NOT NULL,
    fecha_ingreso DATE            NOT NULL
);

Finalmente, se podrá apreciar la estructura de la tabla dentro de la base de datos. Cabe recordar que la base de datos "blog.db" es un archivo que estará ubicado en la dirección seleccionada inicialmente y puede ser trasladado donde deseemos.


domingo, 11 de octubre de 2020

Clases y objetos en C++

Objetos

Según la POO son bloques de código que permiten representar cosas (reales o imaginarias) como una persona o una venta. Los objetos se dividen en tres partes:

  • El estado: conjunto de campos o variables (atributos o miembros)
  • El comportamiento: las funciones (métodos o funciones miembro)
  • La identidad: permite identificar un objeto de otro. De forma que cada objeto es identificable respecto a los demás.

Clases

Son estructuras que define las características que tendrá un objeto. Esto es lo que se llama encapsulamiento y es uno de los pilares de la POO.

Atributos

Son un conjunto de variables que definen el estado de una clase pueden ser tipos básicos:
  • int
  • float
  • char
  • bool
  • Tipo colecciones (array), vectores u otros objetos.
Estas no deben ser accesibles desde el exterior, por lo que debe ser de tipo privado.

Metodos

Estos permiten acceder y modificar el estado de una clase.Tenemos dos clases especiales: el constructor y el destructor (el primero permite inicializar o instanciar una clase y el otro liberar recursos)

Además, existen los tradicionales métodos de acceso llamados GET que permiten extraer o mostrar el contenido de los atributos, generalmente sin parámetros salvo en colecciones u otros casos. Debe ser de tipo público. También, están los de modificación llamados SET que permiten modificar desde el exterior el contenido de los atributos asegurando la integridad de la clase, generalmente tienen un parámetro que coincide con el tipo de dato al que desean modificar y son públicos.


#include<iostream>
using namespace std;

class point{
	private:
		double x;
		double y;
	public:		
		//Constructor
		point(double x=0.0,double y=0.0):
			x(x),y(y)// Inicialización
			{}// Sin asignación
            
		//Métodos SET y GET	
		double getX() const {return this->x;}
		setX(double x){this->x=x;}
		double getY() const {return this->y;}
		setY(double y){this->y=y;}
		
		/*Destructor*/
		~point(){
			cout<<endl<<"Elemento destruido"<<endl<<endl;
		}		
};

Tangram con MiniWin

En el siguiente ejemplo se van a recrear las piezas de un tangram empleando triángulos rectángulos para formarlas.

Esto implica crear una o varias funciones para dibujar los triángulos rectángulos. En este caso se optó por usar cuatro funciones llamadas:

  • tipoA
  • tipoB
  • tipoC
  • tipoD

Estas podrían ser "inline", pero se optó por funciones convencionales, las funciones serían:

/*Trabajando con 4 tipos de triángulos rectángulos*/
void tipoA(int x1, int y1, int ta){
	for(int i=0; i<=ta; i++){		
		linea(x1+ta-i,y1+i,x1+ta,y1+i);	
	}
}
void tipoB(int x1, int y1, int ta){
	for(int i=0; i<=ta; i++){		
		linea(x1,y1+i,x1+i,y1+i);	
	}
}
void tipoC(int x1, int y1, int ta){
	for(int i=0; i<=ta; i++){		
		linea(x1+i,y1+i,x1+ta,y1+i);	
	}
}
void tipoD(int x1, int y1, int ta){
	for(int i=0; i<=ta; i++){		
		linea(x1,y1+i,x1+ta-i,y1+i);	
	}
}

Donde cada función corresponde a:

Tipo A Tipo B
    *
   **
  ***
 ****
*****
*
**
***
****
*****
Tipo C Tipo D
*****
 ****
  ***
   **
    *
*****
****
***
**
*

El código completo sería:

#include "miniwin.h"
using namespace miniwin;

const int DIM = 200; // Valor medio del ancho

/*Funciones */
void tipoA(int x1, int y1, int ta){
	for(int i=0; i<=ta; i++){		
		linea(x1+ta-i,y1+i,x1+ta,y1+i);	
	}
}
void tipoB(int x1, int y1, int ta){
	for(int i=0; i<=ta; i++){		
		linea(x1,y1+i,x1+i,y1+i);	
	}
}
void tipoC(int x1, int y1, int ta){
	for(int i=0; i<=ta; i++){		
		linea(x1+i,y1+i,x1+ta,y1+i);	
	}
}
void tipoD(int x1, int y1, int ta){
	for(int i=0; i<=ta; i++){		
		linea(x1,y1+i,x1+ta-i,y1+i);	
	}
}

int main(){
	vredimensiona(2*DIM, 2*DIM);	
	color_rgb(0, 0, 0);
	rectangulo_lleno(0, 0, 2*DIM, 2*DIM);
	
	/*Pieza 1*/
	color(AZUL);
	tipoB(0,0,DIM);
	tipoD(0,DIM,DIM);
	
	/*Pieza 2*/
	color_rgb(255, 150, 0);	
	tipoC(0,0,DIM);
	tipoD(DIM,0,DIM);	
	
	/*Pieza 3*/
	color(VERDE);	
	tipoA(DIM*1.5,0,DIM/2);
	rectangulo_lleno(DIM*1.5,DIM/2,2*DIM,DIM);
	tipoD(DIM*1.5,DIM,DIM/2);
	
	/*Pieza 4*/
	color(ROJO);	
	tipoA(DIM,DIM,DIM);
	
	/*Pieza 5*/
	color(MAGENTA);	
	tipoA(0,DIM*1.5,DIM/2);
	tipoB(DIM/2,DIM*1.5,DIM/2);
	
	/*Pieza 6*/
	color(AMARILLO);	
	tipoA(DIM/2,DIM,DIM/2);
	tipoB(DIM,DIM,DIM/2);
	tipoC(DIM/2,DIM*1.5,DIM/2);
	tipoD(DIM,DIM*1.5,DIM/2);
	
	/*Pieza 7*/
	color_rgb(100,0,155);	
	tipoA(DIM,DIM/2,DIM/2);
	tipoC(DIM,DIM,DIM/2);
	
	refresca();
	return 0;

}

El resultado visual sería:




domingo, 13 de septiembre de 2020

MiniWin con C++


MiniWin es una pequeña biblioteca gráfica para el lenguaje C++ que permite crear una ventana, pintar en ella, detectar la presión de las teclas. Además del movimiento y botones del mouse

Estructura básica de un programa con MiniWin

Un programa que implemente esta biblioteca debe tener la siguiente estructura:

#include "miniwin.h"
using namespace miniwin;

int main(){
	// Código que implementa las funciones de MinWin
	return 0;
}

Ejemplos:
#include "miniwin.h"
using namespace miniwin;

int main(){
	/* Creando un mensaje en un ventana */
	vredimensiona(400, 300);
   	rectangulo(100, 100, 300, 200);
   	texto(145, 142, "Bienvenidos a C++");
   	refresca();
	return 0;
}

#include "miniwin.h"
using namespace miniwin;

int main(){
	/*Crea la ventana*/
	vredimensiona(200, 200);
	
	// Dibujando una línea
	linea(0, 0, 200, 200);
	
	// Dibujando un rectángulo amarillo
	color(AMARILLO);//Asigna color
	rectangulo(10, 10, 50, 50);
	
	// Dibujando una circunferencia roja
	color(ROJO);//Asigna color
	circulo(150, 50, 20);
	
	// Dibujando un círculo relleno azul
	color(AZUL);//Asigna color
	circulo_lleno(100, 100, 20);
	
	// Dibujando un rectángulo relleno verde
	color(VERDE);//Asigna color
	rectangulo_lleno(150, 150, 200, 200);
	
	refresca();//Dibuja en pantalla
	return 0;
}


Fuentes y enlaces externos:

jueves, 10 de septiembre de 2020

Estructuras en C++

Estructuras condicionales

Estas permiten ejecutar bloques de sentencias de código para una determinada condición, si esta no se cumple se puede optar por no realizar nada o llevar a cabo otro bloque de sentencias, de manera que no pueden ejecutarse ambos bloques, solo uno de ellos.



Condicional IF ELSE Condicional SWITCH CASE
if (condicion1) {
   //Sentencias si 
   //Condicion1 es verdad
}else if (condicion2) {
   //Sentencias si 
   //Condicion2 es verdad
}else {
   //Sentencias si condicion1 y
   //condicion2 no son verdad
}
switch (expresión) {
case x :
   //Sentencias si expresión es "x"
   break;
case y :
   //Sentencias si expresión es "y"
   break;
default:
   //Sentencias para otros casos
}

Aplicación

El siguiente programa pide dos valores al usuario y los compara mostrando el mayor o ambos si son iguales.

#include <iostream>
using namespace std;

int main()
{
	int a;
	int b;
	cout << "Ingrese dos números\n\n";
	cin >> a >> b;

	if (a > b) {
		cout << "Mayor: a = " << a;
	}
	else if (b > a) {
		cout << "Mayor: b = " << b;
	}
	else {
		cout << "Iguales a =  " << a << ', '
			 << "b = " << b << '\n';
	}
	return 0;
}

En el siguiente ejemplo se pide un valor numérico del 1 al 7 y se imprime el valor correspondiente de la semana y una advertencia si el valor es diferente del 1 al 7.

#include <iostream>
using namespace std;

int main()
{
	int num;
	cout << "Ingrese un numero de la semana\n\n";
	cin >> num;
	switch (num){
	case 1:
		cout << "Lunes";
		break;
	case 2:
		cout << "Martes";
		break;
	case 3:
		cout << "Miercoles";
		break;
	case 4:
		cout << "Jueves";
		break;
	case 5:
		cout << "Viernes";
		break;
	case 6:
		cout << "Sabado";
		break;
	case 7:
		cout << "Domingo";
		break;
	default:
		cout << "Valor erroneo";
		break;
	}
	return 0;
}

domingo, 6 de septiembre de 2020

Introducción a C++

Estructura básica

Para escribir un programa en C++ se debe considerar la siguiente estructura básica:


// Función principal
int main()
{
   /*
     El código c++ se coloca en esta sección
   */
   return 0;
}

En la primera línea se coloca la referencia a las bibliotecas que empleará el programa. Los comentarios pueden ser de dos tipos:

  • De línea: empleando //
  • De bloque: empleando /* y */

Entrada y salida de datos

Para escribir un programa en C++ se debe considerar la siguiente estructura básica:

#include <iostream>
using namespace std;

int main()
{
   //Declaración de variables
   int num;
   
   //Entrada de datos
   cin >> num;
   
   //Salida de datos
   cout << "Número: " << num;
   return 0;
}

Datos primitivos

  • bool: El tipo de dato bool, tiene un tamaño de 8 bits y un rango entre 0 y 1 (falso o verdadero).
  • int: El tipo de dato int, tiene un tamaño de 32 bits y un rango entre -2147483648 y 2147483647. Este se usa para números enteros (sin decimales). Sus variantes son:
    • short int: Tiene un tamaño de 16 bits y un rango entre -32768 y 32767.
    • unsigned short int: Tiene un tamaño de 16 bits y un rango entre 0 y 65535.
    • unsigned int: Tiene un tamaño de 32 bits y un rango entre 0 y 4294967295.
    • long long int: Tiene un tamaño de 64 bits y un rango entre -9223372775808 y 9223375775807.
    • unsigned long long int: Tiene un tamaño de 64 bits y un rango entre 0 y 2 elevado a la potencia 64.
  • float: Tiene un tamaño de 32 bits, es usado comúnmente en números con 6 o menos cifras decimales. Tiene un rango entre 1,17549*(e^-38) hasta 3,40282*(e^+38).
  • double: Tiene un tamaño de 64 bits, es usado para números de menos de 15 cifras decimales. Tiene un rango entre 2,22507*(e^-308) hasta 1,79769*(e^308).
    • long double: Tiene un tamaño de 96 bits y una precisión de 18 cifras decimales. Tiene un rango entre 3,3621*(e^-4932) hasta 1,18973*(e^4932).
  • char: Son variables de tipo vector que almacenan cualquier caracter y puede estar con o sin signo.
#include <iostream>
using namespace std;

int main()
{
	//Variables
	int num = 2;
	float dec1 = 3.14;
	double dec2 = -2.1213;
	bool val = false;
	char cad = 'a';
	return 0;
}

jueves, 16 de julio de 2020

Cargar datos en una lista desplegable con PHP

Supongamos que queremos agregar un registro a una tabla que se relaciona mediante una clave foránea con otra, solo requiere que se le ingrese el código o id, pero colocar ello en una caja de texto es incómodo, lo ideal sería desplegar en una lista desplegable vertical los registros de la tabla cuyo identificador o código queremos mostrar. Ilustremos ello con un ejemplo:


Sin lista desplegable Con lista desplegable

Agregar datos







Agregar datos








Trabajaremos con las siguientes tablas:




Ahora vamos a crear ese formulario donde se puedan cargar los datos de "inquilinos" y enviar el "id" a través de un formulario web. Este ejemplo no emplea programación orientada a objetos y nos limitamos a enviar la información.

Creamos el formulario en el archivo"pagoIns.php"
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form class="jpcss" method="post" action="agregar_pago.php">    
            <fieldset>
                <legend>INGRESAR ABONO</legend><br> 
                Ingrese al aportante: <select name="personas">
                    <!--Aquí ira el código PHP-->
                </select><br><br>
                Ingrese el importe: S/ 
                <input type="number" name="importe" min="0.01" step="0.01" value="0.01"><br>  
                <br><br>
                <button onclick="return confirm('¿Seguro que deseas ingresar el pago?')">
                    INGRESAR
                </button>  
            </fieldset>
        </form>
    </body>
</html>

Ahora vamos a realizar tanto la conexión como la consulta SQL en código PHP
<?php
#Parámetros de la BD
$cfg['h'] = 'localhost';  #hostname
$cfg['u'] = 'root';       #usuario
$cfg['p'] = '';           #contraseña (password)
$cfg['b'] = 'blog';       #base de datos
$cfg['r'] = '3306';       #puerto 
#Conexión
$cnx = mysqli_connect($cfg['h'], $cfg['u'], $cfg['p'], $cfg['b'], $cfg['r']);
mysqli_query($cnx, "set names utf8");

#Consulta SQL
$sql = "SELECT idinquilinos id, "
        . "CONCAT_WS (' ',nombres,paterno,materno) "
        . "datos FROM inquilinos;";

#Capturando los datos
$bolsa = mysqli_query($cnx, $sql);
$salida = array();
if ($bolsa != null) {
    while ($row = mysqli_fetch_assoc($bolsa)) {
        $salida[] = $row;
    }
    mysqli_free_result($bolsa);
} else {
    $salida = false;
}
unset($row);
?>

Ese código lo colocaremos al inicio de la siguiente forma. Agregando el código que muestra los datos en la lista desplegable.
<?php
#Parámetros de la BD
$cfg['h'] = 'localhost';  #hostname
$cfg['u'] = 'root';       #usuario
$cfg['p'] = '';           #contraseña (password)
$cfg['b'] = 'blog';       #base de datos
$cfg['r'] = '3306';       #puerto 
#Conexión
$cnx = mysqli_connect($cfg['h'], $cfg['u'], $cfg['p'], $cfg['b'], $cfg['r']);
mysqli_query($cnx, "set names utf8");

#Consulta SQL
$sql = "SELECT idinquilinos id, "
        . "CONCAT_WS (' ',nombres,paterno,materno) "
        . "datos FROM inquilinos;";

#Capturando los datos
$bolsa = mysqli_query($cnx, $sql);
$salida = array();
if ($bolsa != null) {
    while ($row = mysqli_fetch_assoc($bolsa)) {
        $salida[] = $row;
    }
    mysqli_free_result($bolsa);
} else {
    $salida = false;
}
unset($row);
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form class="jpcss" method="post" action="agregar_pago.php">    
            <fieldset>
                <legend>INGRESAR ABONO</legend><br> 
                Ingrese al aportante: <select name="personas">
                    <!--Código PHP-->                    
                    <?php
                    if ($salida) {
                        foreach ($salida as $persona) {
                            ?>
                            <option value="<?= $persona['id'] ?>">
                                    <?= $persona['datos'] ?>
                            </option>
                        <?php }
                    }
                    ?>                
                </select><br><br>
                Ingrese el importe: S/ 
                <input type="number" name="importe" min="0.01" step="0.01" value="0.01"><br>  
                <br><br>
                <button onclick="return confirm('¿Seguro que deseas ingresar el pago?')">
                    INGRESAR
                </button>  
            </fieldset>
        </form>
    </body>
</html>

Entre las líneas 42 y 51 se aprecia el código que despliega los datos en la lista desplegable pudiendo obtener el efecto deseado. Se emplea antes del foreach un condicional, en caso la tabla se encuentre vacía u ocurra un error.

viernes, 19 de junio de 2020

Lenguaje de intercambio JSON

JSON (JavaScript Object Notation - Notación de Objetos de JavaScript) es un formato de intercambio de datos entre sistemas independientes del lenguaje de programación derivado de JavaScript. Sin embargo debido a que emplea convenciones muy empleadas por programadores en la rama del lenguaje C, muchos lenguajes de programación han incluido código para generar y analizar datos en este formato para convertirlos en convertirlos en objetos del lenguaje propio, así se puede concluir que este presenta facilidad de entendimiento tanto para humanos como computadores.

Composición

JSON se construye a partir de dos tipos de estructuras
  • Colección de pares de clave/valor.
    • En lenguajes de programación se tranforman o provienen de un objeto, registro, estructura, diccionario, tabla hash, lista de claves o un arreglo asociativo.
  • Lista de valores. 
    • En lenguajes de programación, esto se implementa o proviene de arreglos, vectores, listas o secuencias.

Sintaxis


En el caso de objetos individuales, este esta delimitad por llaves, dentro aparecen los pares clave valor separados por dos puntos (:) cumpliéndose lo siguiente:
  • La clave siempre será una cadena de texto, el valor puede ser de tipo lógico, textual o numérico.
  • Los valores pueden tomar tres tipos:
    • En el caso del lógico puede ser true o false sin necesidad de comillas
    • En el caso del numérico se emplea el punto para separar enteros de decimales
    • En el caso del texto debe ir entre comillas.

Nota: Se puede dar el caso que el valor de una clave es otro objeto o una colección de estos.

Ejemplo en código:
{
 "alive":true,
 "birthday":"1993-05-17",
 "dni":"96584422",
 "name":"Paul",
 "weight":62.7
}

En el caso de colecciones de objetos, los objetos mantienen su notación anterior y se separan por comas. Además, toda la colección de objetos esta delimitada por corchetes "[" y "]"

Ejemplo en código:
[
 {
  "birthday":"1993-02-07",
  "dni":"10084422",
  "name":"Milagros",
  "weight":52.7
 },
 {
  "birthday":"1992-10-01",
  "dni":"00084422",
  "name":"Yadira",
  "weight":57.0
 },
 {
  "birthday":"1990-01-21",
  "dni":"41557422",
  "name":"Alejandra",
  "weight":49.9
 }
]

En el ejemplo anterior podemos encontrar una colección de tres objetos.


Anidamiento en JSON.

{
   "address":{
      "country":"Peru",
      "department":"Lima"
   },
   "alive":true,
   "birthday":"1993-05-17",
   "dni":"96584422",
   "languages":[
      "Spanish",
      "English"
   ],
   "name":"Paul",
   "pets":[
      {      
         "name":"Argos",
         "type":"dog"
      },
      {      
         "name":"Gardfield",
         "type":"cat"
      }
   ],
   "weight":62.7   
}

Se puede apreciar lo siguiente:

  • La dirección esta compuesta por país y departamento.
  • Tiene un campo lógico llamado "alive"
  • Las fechas viajan en formato de texto
  • Los números como  "weight" no requieren de comillas, pero los códigos como el DNI sí.
  • El campo languages tiene una colección de valores sin clave.
  • En el campo "pets" el valor es una lista de dos objetos con sus propias claves y valores.

Biblioteca gráfica ImageGD en PHP

PHP tiene su propia librería gráfica (al 2020 aún en desarrollo) que permite generar gráficos rectangulares, circulares, lineales y textuales. Además, usar colores en el formato RGB para estos.

Sobre esta biblioteca el manual de PHP menciona:
"PHP no está limitado a crear únicamente salidas HTML. También se puede usar para crear y manipular ficheros de imágenes en una variedad de diferentes formatos de imagen, incluyendo GIF, PNG, JPEG, WBMP y XPM. Aún más práctico es que PHP puede transferir flujos de imagen directamente al navegador. Necesitará compilar PHP con la biblioteca de funciones de imágenes GD para que esto funcione. GD y PHP también pueden requierir otras bibliotecas, dependiendo de los formatos de imagen con los que se quiera trabajar".
Esta biblioteca permite crear imágenes de tipo:
  • JPEG
  • GIF
  • PNG
  • SWF
  • TIFF
  • JPEG2000


Creando una imagen con "imagecreatetruecolor"

<?php

# Definir el tipo de contenido de la página
header("content-type:image/png");

#Crear la imagen con dimensiones de 200px por lado
$imagen = imagecreatetruecolor(200, 200);

# Mostrar la imagen en formato PNG
imagepng($imagen);

# Liberar memoria
imagedestroy($imagen);

?>


Creando colores con "imagecolorallocate"

<?php

# Permite definir un color RGB
$colorRojo= imagecolorallocate($imagen, 255, 0, 0);

# Permite definir un color RGB
$colorBlanco= imagecolorallocate($imagen, 255, 255, 255);

# Permite definir un color RGB
$colorAmarillo= imagecolorallocate($imagen, 255, 255, 0);

?>


Creando figuras

Tenemos diversos métodos para crear figuras con y sin relleno como:


Figuras sin relleno
  • imagearc — Dibuja un arco parcial
  • imageellipse — Dibuja una elipse
  • imagepolygon — Dibuja un polígono
  • imagerectangle — Dibuja un rectángulo
Figuras con relleno
  • imagefilledarc — Dibuja un arco parcial y rellenarlo
  • imagefilledellipse — Dibuja una elipse con relleno
  • imagefilledpolygon — Dibuja un polígono con relleno
  • imagefilledrectangle — Dibuja un rectángulo con relleno


<?php

# Definir el tipo de contenido de la página
header("content-type:image/png");

#Crear la imagen con dimensiones de 200px por lado
$imagen = imagecreatetruecolor(200, 200);

# Permite definir un color RGB
$colorAmarillo= imagecolorallocate($imagen, 255, 255, 0);
$colorRojo= imagecolorallocate($imagen, 255, 0, 0);

# Gráfica de un rectángulo
imagerectangle($imagen, 10, 10, 190, 190, $colorAmarillo);

# Gráfica de un rectángulo con color de relleno
imagefilledrectangle($imagen, 40, 40, 160, 160, $colorRojo); 

# Mostrar la imagen en formato PNG
imagepng($imagen);

# Liberar memoria
imagedestroy($imagen);

?>


IMAGELINE

Esta función permite la creación de líneas con la siguiente sintaxis:
imageline($image, $x1, $y1, $x2, $y2, $color);
  • image: Un recurso image, es devuelto por una de las funciones de creación de imágenes, como imagecreatetruecolor().
  • x1: Coordenada x del primer punto.
  • y1: Coordenada y del primer punto.
  • x2: Coordenada x del segundo punto.
  • y2: Coordenada y del segundo punto.
  • color: El color de la línea. Un identificador de color creado con imagecolorallocate().
<?php

header("Content-Type: image/png");
$imagen = imagecreatetruecolor(400, 400);
$color = imagecolorallocate($imagen, 255, 255, 0);

# imageline($image, $x1, $y1, $x2, $y2, $color);
imageline($imagen, 12, 33, 300, 200, $color);

# Mostrar la imagen en formato PNG
imagepng($imagen);

# Liberar memoria
imagedestroy($imagen);

?>


IMAGERECTANGLE

Esta función permite la creación de rectágulos con la siguiente sintaxis:
imagerectangle ($image, $x1, $y1, $x2, $y2, $color);
  • image: Un recurso image, es devuelto por una de las funciones de creación de imágenes, como imagecreatetruecolor().
  • x1: Coordenada x de partida.
  • y1: Coordenada y de partida.
  • x2: Coordenada x de llegada.
  • y2: Coordenada y de llegada.
  • color: El color de la línea. Un identificador de color creado con imagecolorallocate().
<?php

header("Content-Type: image/png");
$imagen = imagecreatetruecolor(400, 400);
$color = imagecolorallocate($imagen, 255, 255, 0);

# imagerectangle ($image, $x1, $y1, $x2, $y2, $color);
imagerectangle ($imagen, 12, 33, 300, 200, $color);

# Mostrar la imagen en formato PNG
imagepng($imagen);

# Liberar memoria
imagedestroy($imagen);

?>


IMAGEREARC

Esta función permite la creación de arcos y circunferencias con la siguiente sintaxis:
imagearc($image, $cx, $cy, $ancho, $largo, $inicio, $fin, $color);
  • image: Un recurso image, es devuelto por una de las funciones de creación de imágenes, como imagecreatetruecolor().
  • cx: Coordenada x del centro.
  • cy: Coordenada y del centro.
  • largo: largo del arco.
  • ancho: ancho del arco.
  • inicio: ángulo de inicio en grados sexagésimales.
  • fin: ángulo de fin en grados sexagésimales.
  • color: El color de la línea. Un identificador de color creado con imagecolorallocate()
<?php

header("Content-Type: image/png");
$imagen = imagecreatetruecolor(400, 400);
$color = imagecolorallocate($imagen, 255, 255, 0);

# imagearc($image, $cx, $cy, $an, $la, $ini, $fin, $col);
imagearc ($imagen, 200, 200, 100, 100,0, 360, $color);

# Mostrar la imagen en formato PNG
imagepng($imagen);

# Liberar memoria
imagedestroy($imagen);

?>




Métodos GET y POST con PHP

Para enviar información a través de la web tenemos dos métodos que son el protocolo HTTP que emplea el método POST y mediante la URL que emplea el método GET.


Método GET

Es mucho más veloz, pero tiene ciertas limitaciones como la cantidad de datos a enviar, no se permite enviar archivos y se visualiza el valor enviado por el URL, lo que lo puede hacer aparentemente frágil para sistemas de autentificación, pero si se le añade encriptamiento resulta en un método seguro y veloz.

Supongamos el siguiente formulario en una página llamada "formulario.html"
<!DOCTYPE html>
<html>
    <head>
        <title>Formulario GET</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <form action="receptorget.php" method="GET">
            <label>Nombre</label><br/>
            <input type="text" name="txtNombre"/><br/><br/>
            <label>Clave</label><br/>
            <input type="password" name="txtClave"/>
            <br/><br/>
            <select name="txtIdioma">
                <option value="esp">Español</option>
                <option value="ing">Inglés</option>
                <option value="fra">Francés</option>
            </select><br/><br/><br/>
            <button type="submit">Enviar por GET</button>
        </form>  
    </body>
</html>

Se aprecia que en el formulario aparecen dos atributos con sus respectivos valores que son:
  • action: indica a que página viajarán los datos
  • method: indica la forma de enviar los datos, en este caso GET

La salida visual sería:












En una página llamada "receptorget.php" vamos a recibir estos valores enviados por GET, el URL que aparecerá en el navegador tendrá la siguiente forma:

http://localhost/test/receptorget.php?txtNombre=Paul&txtClave=12345&txtIdioma=ing

El código de "receptorget.php" sería:
<?php

$nombre = $_GET["txtNombre"];
$clave = $_GET["txtClave"];
$idioma = $_GET["txtIdioma"];

echo "Nombre: $nombre <br/>";

echo "Longitud de la clave: " . strlen($clave) . "<br/>";

switch ($idioma) {
    case "esp":
        echo "Habla español";
        break;
    case "ing":
        echo "Habla inglés";
        break;
    case "fra":
        echo "Habla francés";
        break;
    case "":
        echo "No ingresó idioma";
        break;
    default:
        echo "ERROR";
        break;
} ?>

El resultado visual sería el siguiente:
Nombre: Paul
Longitud de la clave: 5
Habla inglés 

Método POST

Es menos veloz que el método GET, pero permite enviar una gran la cantidad de datos, incluidos archivos como fotos y no se visualiza los valores enviados en el URL, lo que lo convierte en el método favorito para inicio de sesión.

Supongamos el siguiente formulario en una página llamada "formulario.html"
<!DOCTYPE html>
<html>
    <head>
        <title>Formulario GET</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <form action="receptorget.php" method="POST">
            <label>Nombre</label><br/>
            <input type="text" name="txtNombre"/><br/><br/>
            <label>Clave</label><br/>
            <input type="password" name="txtClave"/>
            <br/><br/>
            <select name="txtIdioma">
                <option value="esp">Español</option>
                <option value="ing">Inglés</option>
                <option value="fra">Francés</option>
            </select><br/><br/><br/>
            <button type="submit">Enviar por POST</button>
        </form>  
    </body>
</html>

Se aprecia que en el formulario aparecen dos atributos con sus respectivos valores que son:
  • action: indica a que página viajarán los datos
  • method: indica la forma de enviar los datos, en este caso POST

La salida visual sería:












En una página llamada "receptorpost.php" vamos a recibir estos valores enviados por POST, el URL que aparecerá en el navegador no tiene ninguna modificación

El código de "receptorget.php" sería:
<?php

$nombre = $_POST["txtNombre"];
$clave = $_POST["txtClave"];
$idioma = $_POST["txtIdioma"];

echo "Nombre: $nombre <br/>";

echo "Longitud de la clave: " . strlen($clave) . "<br/>";

switch ($idioma) {
    case "esp":
        echo "Habla español";
        break;
    case "ing":
        echo "Habla inglés";
        break;
    case "fra":
        echo "Habla francés";
        break;
    case "":
        echo "No ingresó idioma";
        break;
    default:
        echo "ERROR";
        break;
} ?>

El resultado visual sería el siguiente:
Nombre: Paul
Longitud de la clave: 5
Habla inglés 



El método $_Request["name"]

PHP tiene como método de entrada a GET y POST, pero cuando se desconoce el medio por el que llegarán los datos se puede recurrir al método $

<?php
   $nombre = $_REQUEST["txtNombre"];
   $clave = $_REQUEST["txtClave"];
   $idioma = $_REQUEST["txtIdioma"];
?>

Modificaciones de seguridad

Por cuestiones de seguridad y adaptándonos a los nuevos cambios se reemplaza los $_GET y $POST por:
<?php
$dia =  filter_input(INPUT_GET, 'txtIdioma', FILTER_SANITIZE_STRING);
$clave = filter_input(INPUT_POST, 'txtIdioma', FILTER_SANITIZE_STRING); 
?>


jueves, 11 de junio de 2020

Sesiones en PHP

El manual PHP indica sobre el soporte de las sesiones en PHP: "El soporte para sesiones en PHP consiste en una manera de preservar ciertos datos a través de accesos posteriores, lo que permite crear aplicaciones más personalizadas y mejorar el atractivo de un sitio web."


Crear sesiones

Para mantener seguridad al inicio de sesión, por ejemplo. Se opta por el uso de sesiones, ya que estos valores son almacenados en el servidor y no la computadora del usuario.

Para crear una sesión:
<?php
   
   # Iniciar sesión
   session_start();

   # Declarar los identificadores de sesión y sus valores
   $_SESSION["sesion"]="hola";
   $_SESSION["valor"]=12;

?>

$_SESSION (y todas las variables registradas) son serializadas internamente por PHP.

Operaciones con sesiones
<?php

   # Iniciar sesión
   session_start();

   # Crear sesión
   $_SESSION["valor"]=12;

   # Ver el valor de una sesión
   echo $_SESSION["valor"];

   # Actualizar el valor de una sesión
   $_SESSION["valor"]=100;

   # Cerrar sesión
   unset ( $_SESSION["valor"] ); //Liberar memoria
   session_destroy(); //Cerra la sesión propiamente dicha

?>

Usos de las sesiones

"PHP permite el uso de sesiones, valores que podemos usar para autentificar a un usuario, debe ser una medida adicional al encriptado en la base de datos para iniciar sesión"


SESIÓN PARA INICIO DE SESIÓN

<?php

   /* Colocar dentro del método de autentificación de usuario */

   if (validar()=true){
      # Creamos una sesión
      session_star(); 
      # Creamos una clave
      $_SESSION[ "acceso" ]="E14007a"; 
      # Enviamos a la página de inicio
      header ("location: inicio.php"); 
   } else {
      # Creamos una sesión para evitar conflicto al cerrar la sesión
      session_star();
      # Destruimos la sesión
      session_destroy(); 
      # Lo retornamos a la página de login
      header ("location: login.php");
   }

?>


VALIDAR EL INICIO DE SESIÓN

<?php

   # Iniciamos sesión
   session_start();

   # si la sesion es diferente a la iniciada
   if($_SESSION[ "acceso" ] != "E14007a";){ 
      # Destruimos la sesión
      session_destroy();
      # Lo retornamos a la página de login
      header ("location: login.php");
   }
?>

<!-- CÓDIGO HTML -->

Cookies en PHP

Las cookies pueden ser borradas, aceptadas, ignoradas o bloqueadas según se desee, para esto se debe configurar convenientemente el navegador web.

Del punto de vista lingüístico, el término Cookie es un anglicismo para las "galletas informáticas", estas pueden ser borradas, aceptadas, ignoradas o bloqueadas por el cliente mediante la configuración del navegador web.

Tienen diversas aplicaciones como:
  • Como un contador de visitas al sitio web.
  • Un contenedor de información que se almacena en el computador cliente y puede ser consultado por el servidor. Por ejemplo, un carrito de compras virtual.
  • Hacer seguimiento al cliente. Por ejemplo, gustos de navegación, spyware, etc.
  • Uso con intenciones malignas. Por ejemplo, las Zombie cookies.


Crear COOKIES

Para crear una cookie básica se necesita dos parámetros: el nombre de la cookie y el valor asignado. Se debe crear antes de cargar el documento HTML.
<?php
   setcookie("texto", "Bienvenido a PHP");
   setcookie("contador", 12);
   setcookie("acumulado", 33.5);
?>

Del ejemplo anterior hemos creado 3 cookies que almacenan un valor tipo cadena, tipo entero y tipo decimal. Estos se almacenan en la computadora del usuario de modo que no consumen recursos del servidor.

Llamar COOKIES

Todas las cookies se almacenan en $_COOKIE que tiene forma de array, de forma que se les llama mediante su identificador y ese valor se puede almacenar en una variable o mostrar.
<?php

   //Creamos el cookie en un archivo
   setcookie("contador", 12);

?>
<?php
   //Llamamos al cookie desde otro archivo
   $dato = $_COOKIE["contador"];

   echo $dato; //Mostrara en pantalla 12
?>


Parámetros en una cookie

Los parámetros que podemos pasar son:
  • Clave: el nombre de la cookie.
  • Valor: el valor de la cookie.
  • Duración: el tiempo que la cookie está activa.
  • Ruta: el lugar donde se almacena la cookie.
  • Dominio: el servidor donde se almacena la cookie.
  • Protocolo de seguridad: la cookie se puede transmitir por HTTPS.
  • Uso solo de HTTP: la cookie solo es accesible por http y no por otros como javaScript por ejemplo

Cookie con tiempo y sin tiempo

Se puede indicar la duración de una Cookie, si no lo hacemos esta se destruye al cerrar el navegador.

<?php
   /*Sin tiempo*/
   setcookie("nombre","argos") ;
   /* Duración: hasta que se cierre el navegador*/

   /*Con tiempo*/
   setcookie("apodo","perrosaurio", time() + 30*24*60*60) ; 
   /* Duración: 1 mes
      Con Time() iniciamos en cero, y le agregamos un mes en segundos, 
      no afecta si el usuario cierra el navegador
   */
?>


Cookie con ruta

Se puede indicar una ubicación para almacenar las Cookies.
<?php

   #Con ruta simple
   setcookie("apodo","perrosaurio", time() + 30*24*60*60, "/"); 
   //Se guarda en el directorio raíz

   #Con ruta específica
   setcookie("apodo","perrosaurio", time() + 30*24*60*60, "/cookie"); 
   // Se guarda en la carpeta cookie dentro del directorio raíz

?>

Cookie con dominio

Se puede indicar una ruta distinta a la del computador del cliente para almacenar la información:
<?php

   #Con dominio
   setcookie("nombre","argos", time() + 1000, "/c", "www.argosperro.com") ;

   /*
    * Duración: 1000 segundos
    * Carpeta: "c" dentro del directorio del dominio
    * Dominio donde se almacena: www.argosperro.com
   */

?>

Cookie con protocolos HTTPS y HTTP

Se puede implementar protocolos seguros para las Cookies mediante el siguiente formato.
<?php

   #Si queremos usar un protocolo seguro, hacemos:

   setcookie("galleta", "Hola", time()+1000, "/", "www.gatofeliz.com", true, true);

   /*
    * El primer valor en "true" activa el protocolo seguro
    * El segundo "true" evita que se usen protocolos diferentes al HTTP
    * Es necesario establecer un dominio al cual mandar los valores
   */

?>



sábado, 6 de junio de 2020

Framework Bootstrap 4

Desarrollado por la empresa Twitter como un proyecto interno para evitar el uso de múltiples fuentes de desarrollo, en determinado momento, año 2011, fue liberado y puesto a disposición de la comunidad conviertiendose rápidamente, año 2012, en uno de los marcos de trabajo (Framework) más empleados desde GitHub. Cuenta con 4 versiones siendo la 3ra considerada por muchos la más estable, pero es cada vez mayor el uso que se le da a la 4ta versión.


Versión 3 vs versión 4

  • Bootstrap 4 es la versión más nueva de Bootstrap; con nuevos componentes, hoja de estilo más rápida y más capacidad de respuesta.
  • Bootstrap 4 admite las últimas versiones estables de todos los principales navegadores y plataformas. Sin embargo, Internet Explorer 9 y versiones anteriores no son compatibles.
  • Si es necesario soporte para Internet Explorer 8 o 9, se debe emplear Bootstrap 3. Es la versión más estable de Bootstrap, y aún es compatible con el equipo para correcciones de errores críticos y cambios de documentación. Sin embargo, no se le agregan nuevas funciones.

Formas de agregar Bootstrap a un proyecto

Tenemos 2, la primera es hacer la llamada remota al Framework (entre los proveedores tenemos a MaxCDN) y la segunda es descargarlo y tenerlo como una biblioteca interna.

Mediante MaxCDN

Tendríamos el siguiente código:

<!DOCTYPE html>
<html>
    <head>
        <title>Título de la página</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> 
    </head>
    <body>
        <!--Cuerpo de la página-->
    </body>
</html>


Mediante descarga

Se procede a la página oficial de Bootstrap y en la sección de descargas se sigue las instrucciones: https://getbootstrap.com/docs/4.1/getting-started/download/


Grid Classes

Tiene 5 clases que se pueden emplear para el diseño ppor columnas:
  • .col- (extra small devices - pantalla menor que 576px)
  • .col-sm- (small devices - pantalla mayor o igual que 576px)
  • .col-md- (medium devices - pantalla mayor o igual que 768px)
  • .col-lg- (large devices - pantalla mayor o igual que 992px)
  • .col-xl- (xlarge devices - pantalla mayor o igual que 1200px)

Estas se pueden combinar para obtener diferentes disposiciones y estructuras más flexibles. Además, se puede emplear la clase .col que se autodimensiona como en el siguiente ejemplo.


<!DOCTYPE html>
<html>
    <head>
        <title>Título de la página</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> 
    </head>
    <body>
        <div class="container-fluid">
            <h1>La clase columna</h1>
            <p>Nota: Se autodimensionan automáticamente en una fila de manera que tienen el mismo tamaño</p>
            <div class="row">
                <div class="col" style="background-color:lavender;">.col</div>
                <div class="col" style="background-color:orange;">.col</div>
                <div class="col" style="background-color:lavender;">.col</div>
                <div class="col" style="background-color:orange;">.col</div>
                <div class="col" style="background-color:lavender;">.col</div>
                <div class="col" style="background-color:orange;">.col</div>
            </div>
        </div>
    </body>
</html>

martes, 19 de mayo de 2020

Arreglos con JavaScript

Arrays en JavaScript

Los arrays son colecciones de datos, multiples datos almacenados en una sola variable, para definir un arreglo se debe colocar sus elementos dentro de corchetes y separados por comas.
Se puede crear arreglos de dos formas:
Creando

//Primera forma:
let listA = ["Argos","Pelusa","Shirley"];
//Segunda forma:
let listB = new Array("Argos","Pelusa","Shirley");


Recorriendo un Array

// Tenemos el siguiente arreglo de Strings que contiene 3 elementos:
let mascotas = ["Argos","Pelusa","Shirley"];

// Podemos capturar un valor (El primer valor siempre es [0]):
alert(mascotas[ 1 ]); //mostrará Pelusa en un alert

//Recorrer el arreglo e imprimirlo en consola
for ( let i of mascotas ) {
   console.log(i);
}

Modificando un valor

Para modificar un valor simplemente se usa el operador de asignación indicando entre corchetes la ubicación del elemento

// Tenemos el siguiente arreglo de Strings que contiene 3 elementos:
let mascotas = ["Argos","Pelusa","Shirley"];

// Cambiando un valor:
mascota[ 2 ] = "Gardfield" //Cambiará "Shirley" por Gardfield


Métodos de Array

Encontramos los siguientes:

  • join()
  • toString()
  • pop()
  • push()
  • shift()
  • unshift()
  • length()

let list = new Array("Argos", "Pelusa", "Shirley");

// -- toString()
// Devolverá un String donde los elementos se separan por comas:
let textual = list.toString(); 
console.log(textual); // "Argos,Pelusa,Shirley"

// -- join() --
// Devolverá un String donde los elementos se separan por el parámetro indicado:
let separadores = list.join("#"); 
console.log(separadores); // "Argos#Pelusa#Shirley"

// -- pop() --
list.pop(); //Elimina el último elemento
console.log(list.toString()); //Argos,Pelusa

// -- push() --
list.push("Nerón"); // Agrega un elemento al final
console.log(list.toString()); //Argos,Pelusa,Nerón

// -- shift() --
list.shift(); //Elimina el primer elemento
console.log(list.toString()); //Pelusa,Nerón

// -- unshift() --
list.unshift("Rambito"); // Agrega un elemento al inicio
console.log(list.toString()); //Rambito,Pelusa,Nerón

// -- length --
let longitud = list.length; // Devuelve el tamaño del arreglo
list[list.length] = "Blacky" // Agrega un elemento al final (alternativa a push)
console.log(list.toString()); //Rambito,Pelusa,Nerón,Blacky

// -- splice()
// El primer valor indica la cantidad de nuevos elementos
// El segundo valor la cantidad de elementos eliminados
// Los demás valores son los que se agregarán
list.splice(2, 0, "Lalo", "Koda");
console.log(list.toString()); //Rambito,Pelusa,Lalo,Koda,Nerón,Blacky

// -- sort()
// Ordena el Array (trata a todos los elementos como String)
list.sort();
console.log(list.toString()); //Blacky,Koda,Lalo,Nerón,Pelusa,Rambito

// Se puede almacenar los elementos eliminados asignando a una variable
let eliminados = list.splice(2, 3, "Fede", "Fido");
console.log(eliminados.toString()); // Lalo,Nerón,Pelusa
console.log(list.toString());       // Blacky,Koda,Fede,Fido,Rambito

// ** CONCATENAMIENTO **
// -- concat()
let arr1 = ["Paul", "Isacc"];
let arr2 = ["Fernanda", "Luz", "Abel"];
let arr3 = ["Ramón", "Vicky"];

//Crea un Array que combina los 3 anteriores.
let personas = arr1.concat(arr2, arr3);
console.log(personas.toString()); //Paul,Isacc,Fernanda,Luz,Abel,Ramón,Vicky


Métodos REDUCE, FILTER y MAP

Simplifican el trabajo con los arreglos al no tener que recorrerlos explicitamente, creando menos variables y usando la sintaxis de funciones arrow

REDUCE permite reducir todos los elementos del arreglo a un solo elemento. Como una concatenación de elementos o suma de valores

let nombres = ["Dana", "Dina", "Dona"];
let numeros = [10, 20, 30, 40, 50];

/* ======== REDUCE ========*/
let suma = numeros.reduce((a,v)=>a+v);
console.log(suma); //150

let texto = nombres.reduce((a,v)=>a + " - " + v );
console.log(texto); //Dana - Dina - Dona

FILTER permite reducir crear un arreglo con los elementos que cumplan con la condición indicada.

let valores = [10, 13, 21, 7, 85];
let apellidos  = ["Quispe", "Salinas", "Rosas", "Garcia", "Baltodano"];

/* ======== FILTER ========*/
//Filtramos solo los múltiplos de 5
let multiplos = valores.filter(n => n % 5 === 0);
console.log(multiplos.toString()); // 10,85

//Filtramos solo los apellidos con 6 letras o menos
let apellidosCortos = apellidos.filter(e => e.length <= 6);
console.log(apellidosCortos.toString()); // Quispe,Rosas,Garcia

MAP permite crear un arreglo a partir de los elementos del arreglo inicial.

let sueldos = [950, 1000, 1500, 1200, 3000];

/* ======== MAP ========*/
//Obtener el descuento por AFP del 9% de todos los sueldos
let afp = sueldos.map(n => n * 0.09);
console.log(afp.toString()); // 85.5,90,135,108,270


NOTA Es posible combinar los métodos previos. Por ejemplo:

let datos = [10, 13, 21, 7, 85, 14, 2];

//Obtener la suma de los valores pares
let sumaPar = datos.filter(n => n % 2 === 0).reduce((a, v) => a + v);
console.log(sumaPar); // 26

//Crear un arreglo solo con los valores impares
let impares = datos.filter(n => n % 2 === 1).map(n => n);
console.log(impares.toString()); //13,21,7,85

viernes, 27 de marzo de 2020

Funciones con JavaScript

Las funciones en JavaScript son bloques de código que realizar tareas particulares para las que son diseñadas, pueden retornar un valor o ninguno. Estas se ejecutan cuando son invocadas, esta invocación puede ocurrir cuando:

  • Al ocurrir un evento como: el usuario presiona algo ("onclick" generalmente) o cambia el estado de un elemento (por ejemplo "onchange").
  • Cuando otra función llama a la función.
  • Cuando son funciones que se invocan automáticamente al cargar una página HTML por ejemplo.

Las funciones, además, pueden tener de cero a más parámetros, variables locales y llamar dentro a otras funciones. Por ejemplo, llamar a la función 'Alert'.


Sintaxis

Se coloca la palabra reservada "function", luego el nombre de la función (este no debe empezar con números ni contener espacios en blanco), seguido de los parámetros dentro de paréntesis que son separados por comas si son dos o más. Finalmente, entre llaves se coloca el código de la función.

function nombre(parámetros) {
  // código a ejecutarse  
} 

Función sin retorno Función con retorno
function procedimiento(nombre) {
   alert("Hola " + nombre);
}
function producto(a, b) {
   return a * b;
}


Invocar una función

Dependiendo si la función tiene retorno o no, se invoca de diferentes maneras.

Función sin retorno Función con retorno
 
   procedimiento('gato');
 
 
   let a = producto(2,5);
 


Parámetros predeterminados

Permite que al invocar una función sus parámetros pueden ser obviados al declararse valores predefinidos. Por ejemplo:

function producto(a, b = 1) {
    return r = a * b;
}

console.log(producto(2, 4)); // Resultado: 8, a y b están definidos
console.log(producto(2));    // Resultado: 2, b por defecto tiene valor 1 

Parámetros rest

Permite que una función tenga un número indefinido de parámetros. Por ejemplo:

function sumaRest(...rest) {
    return rest.reduce((a, v) => a + v);
}

console.log(sumaRest(1, 2));       //3
console.log(sumaRest(1, 2, 3));    //6
console.log(sumaRest(1, 2, 3, 4)); //10

Se puede apreciar que la función puede recibir distintas cantidades de parámetros y ejecuta la operación de suma en todos los casos. Se puede mejorar o crear una diferente para que tenga el mismo comportamiento recibiendo además de valores sueltos a arreglos numéricos

function sumaArreglosRest(...ar) {
    return ar.flat().reduce((a, v) => a + v);
}

let numsA = [1, 2, 3, 4, 5];
let numsB = [6, 7, 8, 9, 10];
console.log("Suma numsA: " + sumaArreglosRest(numsA));  //15
console.log("Suma numsB: " + sumaArreglosRest(numsB));  //40
console.log("Suma numsA y numsB: " + sumaArreglosRest(numsA, numsB));  //55

Funciones arrow (flecha)

Son funciones de tipo anónimo que simplifican la construcción de las funciones mediante el uso de las sintaxis lambda y apoyarse en diversos métodos como Map, Reduce o Filter para trabajar con arreglos de manera más simple. Ejemplos

const saludoArrow = () => "Hola JavaScript";
console.log(saludoArrow());

const dobleArrow = a => 2 * a;
console.log("Doble de 2: " + dobleArrow(2));

const sumaArrow = (a, b) => a + b;
console.log("Suma 1 y 2: " + sumaArrow(1, 2));

const promedioArrow = (a = 0, ...r) => {
    if (r.length === 0) {
        return a;
    }
    let prom = a;
    let c = 1;
    prom += r.reduce((a, v) => a + v);
    c += r.length;
    prom /= c;
    return prom;
};
console.log("Promedio sin parámetros: " + promedioArrow());
console.log("Promedio de 10: " + promedioArrow(10));
console.log("Promedio de 10 y 20: " + promedioArrow(10, 20));
console.log("Promedio de 1, 2, 3, 4 y 5: " + promedioArrow(1, 2, 3, 4, 5));

Nota: se aprecia que cuando existen 2 parámetros a más o ninguno es necesario usar paréntesis. Por ejemplo, () o (a = 0, ...r), en caso sea un solo parámetro el uso es opcional. En caso del cuerpo de la función si es una sola línea el uso de llaves { } es opcional, en caso de ser más líneas de código se deben emplear como en el último ejemplo.


Estructuras repetitivas con JavaScript

Las estructuras repetitivas permiten ejecutar bloques de sentencias múltiples veces, aun si no conocemos el número de veces que debe repetirse el código. Se puede usar para ello una determinada condición, de manera que el bloque se detendrá cuando no se cumpla la condición.
Ejemplo práctico: al ingresar productos en una factura, el proceso se repite una y otra vez.


Estructura FOR

Se emplea cuando se conoce la cantidad de repeticiones o al recorrer un arreglo o vector.

for ( let i = [valor inicial]; i <= [valor máximo]; i++ ) {
   //Sentencias que se van a repetir: "(valor máximo - valor inicial)" veces
}


for ( const i of [variables iterables] ) {
   //Sentencias que se van a repetir tantas veces como elementos tenga
   //el arreglo, string, maps, nodeLists o similares
}

for ( const i in [variable tipo objeto] ) {
   //Sentencias que se van a repetir tantas veces como elementos tenga
   //el objeto, se puede usar en arreglos
}

Ejemplos

Supongamos que deseamos imprimir los primeros 10 número naturales mediante un procedimiento

function naturales() {
    let salida = ""; 
    for (let i = 1; i <= 10; i++) {
        salida += i + " ";
    }
    console.log(salida);
}

naturales(); // Salida: 1 2 3 4 5 6 7 8 9 10 	

Supongamos que tenemos un arreglo con nombre y deseamos agregar numeración delante de ellos e imprimirlos en pantalla.

let nombres = ["Dana", "Dina", "Dona"];

function enumerar(lista){
    let aux = 0;
    for (const val of lista) {
        console.log(`${++aux}.- ${val}`);
    }
}
enumerar(nombres);
/* Salida
1.- Dana
2.- Dina
3.- Dona
*/

Observación: el uso de las comillas invertidas y ${...} sirven para la interpolación en template literals, puedes ver más información haciendo clic aquí


Supongamos que tenemos un objeto y deseamos mostrar todos sus elementos

let perro = {nombre: "Argos", raza: "pastor alemán"};

function elementos(objeto){
    for (const item in objeto) {
        console.log(item + " = " + objeto[item]);
    }
}

elementos(perro);

/*Salida:
nombre = Argos
raza = pastor alemán
*/


Estructura WHILE y DO WHILE

Se emplea cuando el número de repeticiones no es conocido, pues depende de una condición. El punto a analizar es si se debe o no ejecutar la iteración por lo menos una vez.

while ( condición ) {
   //Sentencias que se van a repetir mientras condición sea verdadera
}

do {
   //Sentencias que se van a repetir mientras condición sea verdadera
}while ( condición ); 


Estructuras condicionales con JavaScript

Las estructuras condicionales permiten ejecutar bloques de sentencias de código para una determinada condición, si esta no se cumple se puede optar por no realizar nada o llevar a cabo otro bloque de sentencias, de manera que no pueden ejecutarse ambos bloques, solo uno de ellos.
Ejemplo práctico: al ingresar nuestra contraseña de una red social, si es incorrecta no podemos ingresar, pero si es correcta ingresamos a nuestra cuenta.


Condicional IF ELSE Condicional SWITCH CASE
if (condicion1) {
   //Sentencias si 
   //Condicion1 es verdad
}else if (condicion2) {
   //Sentencias si 
   //Condicion2 es verdad
}else {
   //Sentencias si condicion1 y
   //condicion2 no son verdad
}
switch (expresión) {
case x :
   //Sentencias si expresión es "x"
   break;
case y :
   //Sentencias si expresión es "y"
   break;
default:
   //Sentencias para otros casos
}


Operador ternario

Cuando tenemos una estructura condicional simple no anidada y sin "else if", lo más óptimo es utilizar un operador ternario, hay que tener en cuenta que no debe ser usado a diestra y siniestra, solo en casos donde exista un retorno de valor.


Condicional if-else Condicional con operador ternario
/*Codicional clásico*/
if (condicion) {
   //Sentencias si 
   //Condicion es verdad
}else {
   //Sentencias si condicion
   //no son verdad
}
/*Codicional clásico*/
[variable u otro] (condicion) ?
   //Sentencias si 
   //Condicion es verdad
:
   //Sentencias si condicion
   //no son verdad 
;  // cerrar la sentencia al final


Ejemplo en consola

Supongamos que tenemos una función que debe validar la edad de una persona. Si es mayor o no de 20 años

function validar(edad){
    let salida;
    if(edad > 20){
        salida = "Mayor de 20 años";
    }else{
        salida = "Menor de 20 años";
    }
    return salida;
}

console.log(validar(10));
console.log(validar(30));

La salida será:

Menor de 20 años
Mayor de 20 años

Podemos simplificar el código empleando el operador ternario, recordando que su uso es principalmente en asignaciones o similares y donde se ejecuta código para el caso verdadero y falso

function validar(edad) {
    return (edad > 20) ? "Mayor de 20 años" : "Menor de 20 años";
}

console.log(validar(10));
console.log(validar(30));

La salida será:

Menor de 20 años
Mayor de 20 años

NOTA: los operadores ternarios se pueden anidar.

Fundamentos de JavaScript

¿Qué es JavaScript?

Es un lenguaje de programación del tipo intérprete (vas traduciendo las sentencia una tras otra y no todas). Su principal fortaleza es en la programación web, pero se puede encontrar en distintos tipos de proyectos y aplicaciones.


Variables de JavaScript

Para declarar una variable en JS existen 4 formas que son anteponer "let", "const", "var" o no anteponer nada. No es necesario indicar el tipo de dato como en otros lenguajes de programación, nuestra variable se adapta al tipo de valor contenido


  • Si bien, se puede declarar una variable sin anteponer nada, no es una buena práctica
  • Se emplea const para constantes, valores que no van a alterarse
  • Se puede emplear var o let para valores que irán cambiando, la diferencia entre ambos, es que var es una versión antigua y puede producir un conflicto conocido como "hoisting" o elevación que permite asignar un valor a una variable y luego declararla o que sea accedida fuera de su entorno o "scope". Se recomiendo emplear let en nuevos proyectos.
/*
Aprendiendo a declarar variables
*/
const PI = 3.1416 //Constante numérica
var num; // Variable declarada con VAR, puede o no tener una asignación
let numero = 100; // variable numérica (es posible solo declararla y luego asignarle valor)
let texto = "hola :v"; // variable String
let logico = false; // variable lógica
let objeto = {nombre: "Argos", peso: 23}; // variable tipo objeto
let arreglo = ["Argos","Gardfield","Shyrley", "Pelusa"]; // variable tipo array

Además, podemos apreciar como se crean comentarios de línea con // y de bloque con /* y */

Ejecutar JavaScript en consola

En equivalencias con otros lenguajes de programación, en el caso de JavaScript, se emplea la combinación console.log(...) que puede contener múltiples elementos. Por ejemplo:

/*Función de suma de dos elementos*/
function suma(a, b) {
    let r = a + b;
    return `${a} + ${b} = ${r}`;
}

console.log(suma(5, 10));

En la consola del navegador donde se ejecute el HTML que contiene al código JS se apreciará:
5 + 10 = 15
Se puede emplear la sentencia console.log("Hola mundo"); para el clásico mensaje de saludo.


JavaScript con HTML

JavaScript puede ser insertado dentro de un documento HTML mediante la etiqueta <script> o en documentos .js separados que pueden ser llamados en la etiqueta <script>, especialmente útil cuando se llama a la biblioteca JQuery por ejemplo.



Insertado como archivo externo Insertado dentro del archivo HTML
<head>
   <script src="doc.js" 
      type="text/javascript">
   </script>
</head>
<script type="text/javascript">

   //Código JS

</script>

Existe otras formas de ejecutar código JavaScript en HTML, una de ellas es colocar el código como valor del atributo "onclick" como el siguiente ejemplo:


<!DOCTYPE html>
<html>
   <head>
 <title>Prueba</title>
   </head>
   <body>        
 <!-- Elementos HTML -->
 <label>Ingrese las notas</label><br/><br/>
 #1: <input type="number" min='0' max='20' id='n1'/><br/>
 #2: <input type="number" min='0' max='20' id='n2'/><br/>
 #3: <input type="number" min='0' max='20' id='n3'/><br/>
 #4: <input type="number" min='0' max='20' id='n4'/><br/>
 <br/>
 <!-- Código JavaScript dentro de un elemento HTML -->
 <button type='button' onclick="
  /* Código JavaScript dentro de onclick */
  let n1 = parseInt(getElementById('n1').value);
  let n2 = parseInt(getElementById('n2').value);
  let n3 = parseInt(getElementById('n3').value);
  let n4 = parseInt(getElementById('n4').value);  
  let prom = (n1+n2+n3+n4)/4;
  getElementById('prom').innerHTML=prom;
  /* Fin del codigo JS */
 ">Procesar</button>
 <br/>
 Promedio: <span id='prom'>&nbsp;</span> 
   </body>
</html>

Esto genera el siguiente resultado:




#1:
#2:
#3:
#4:


Promedio:  

Podemos ver el uso de algunas funciones como parseInt, getElementById, innerHTML y value.
A grandes rasgos se puede explicar su funcionamiento:


  • parseInt: Convierte un String válido a entero, para poder hacer operaciones aritméticas.
  • getElementById: captura un elemento HTML indicando su id
  • innerHTML: inserta contenido dentro del elemento HTML
  • value: captura el valor del atributo 'value' de un elemento HTML

jueves, 26 de marzo de 2020

Agrupación de selectores CSS

Mediante CSS se permite aplicar una serie de propiedades a varios elementos que pueden cumplir diferentes condiciones, la más usual es la de ser un elemento "hijo" de otro, tenemos:

  • Combinación simple de selectores
  • Selector descendente
  • Selector de etiqueta de clase
  • Selector de hijos
  • Selectores adyacentes
  • Pseudoclases

Aplicación y ejemplo


Combinación simple de selectores

En este caso se aplica las mismas propiedades a diversos elementos, pueden ser cualquier tipo de selector. Se separan con comas ',' y luego se definen las propiedades y sus valores.

<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
        p,a,span{
	   color: #139349;
	   font-family: 'Tahoma'
	}		 
      </style>
   </head>
   <body>        
      <!-- Elementos HTML -->
      <a>Soy una oración</a><br/><br/>
      <span>Palabra</span>
      <p>Soy un parrafo</p>
   </body>
</html>
Soy una oración

Palabra

Soy un parrafo



Combinación de selectores descendente

En este caso se aplica las propiedades al último elemento si cumple con la condición de estar anidado dentro del selector anterior. En el ejemplo, se tiene una etiqueta <div> que contiene una etiqueta <p> y dentro una <span>. Además, dos etiquetas <span>. El código CSS indica que solo se aplique la propiedad si hay un <span> dentro de un <div>.

Los elementos descendentes solo se separan mediante espacios.

<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
        div span{
	   color: #F00041;			
	}		 
      </style>
   </head>
   <body>        
      <!-- Elementos HTML -->
      <div> 
	<p>Soy una <span>palabra</span> especial</p>
      </div>      
      <span>Amigo</span><br/><br/>
      <span>Enemigo</span>
   </body>
</html>
Soy una palabra especial

Amigo

Enemigo


Combinación de etiqueta con clase

En este caso se aplica las mismas propiedades las etiquetas o elementos HTML que tienen como clase la especificada en el código CSS. En el ejemplo el color solo cambiará si la etiqueta es de tipo <p> y además el nombre de la clase es 'texto'

<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
        p.texto{
	   color:#F000F0;
	}		 
      </style>
   </head>
   <body>        
      <!-- Elementos HTML -->
      <span class='texto'>Span con clase</span>
      <p>Párrafo sin clase</p>
      <p class='texto'>Párrafo con clase</p>
   </body>
</html>
Span con clase

Párrafo sin clase

Párrafo con clase

Combinación de selectores hijos

En este caso se aplica las propiedades al último elemento si cumple con la jerarquía establecida, para el ejemplo, se aplicará solo si <span> está contenido en <p>, que a la vez debe estar contenido en <div>. Solo en ese caso cambia de color el contenido de <span>

<!DOCTYPE html>
<html>
   <head>
     <title>Prueba</title>
     <!-- Código CSS -->
     <style>
	div > p > span{
	   color:#0007D8;
	}		 
     </style>
   </head>
   <body>        
     <!-- Elementos HTML -->
     <div>
	<p>Div <span>que contiene</span> un párrafo y un span</p>
     </div>
     <p>Párrafo que <span>contiene</span> un span</p>
   </body>
</html>

Div que contiene un párrafo y un span

Párrafo que contiene un span

Combinación de selectores adyacentes

En este caso se aplica las mismas propiedades al segundo elemento luego del signo + siempre y cuando este se encuentre luego del elemento señalado previamente. Para el ejemplo, se aplica el efecto de color y negrita al elemento <span> solo si está después de un elemento <label>

<!DOCTYPE html>
<html>
   <head>
	<title>Prueba</title>
	<!-- Código CSS -->
	<style>
		label + span{
		   color: #FC943E;
		   font-weight: bold;
		}		 
	</style>
   </head>
   <body>        
	<!-- Elementos HTML -->
	<label>Nombres: </label>
	<span>Argos</span>
	<br/>
	<span>Nombres: </span>
	<label>Garfield</label>
   </body>
</html>
Nombres: Argos

Nombres: Garfield

Combinación de etiquetas con atributos especiales

En este caso se aplica las propiedades al elemento al cambiar su estado según lo especificado. En este ejemplo se emplea 'hover' que significa que cuando pasemos el cursor encima del elemento, este debe cambiar de color.

<!DOCTYPE html>
<html>
   <head>
	<title>Prueba</title>
	<!-- Código CSS -->
	<style>
	  span:hover{
		color: red;
	  }	 
	</style>
   </head>
   <body>        
	<!-- Elementos HTML -->
	<span>Argos</span>
   </body>
</html>
Argos (Si no pasa el cursor)

Argos (Si pasa el cursor)



Selectores en CSS

Los selectores básicos en CSS son:
  • De tipo
  • De clase
  • De ID
  • Universales
  • De atributo

Nota: Una clase se asigna en HTML mediante la propiedad "class"; un ID con "id", el atributo depende de las propiedades del elemento.

/*De tipo (un elemento HTML)*/
div {propiedad: valor;}

/*De clase (asignado a un elemento HTML con el atributo class)*/
.fondo {propiedad: valor;}

/*De ID (asignado a un elemento HTML con el atributo id)*/
#cuadro {propiedad: valor;}

/*Universales (se aplican a todas las etiquetas, * significa todos)*/
* {propiedad: valor;}

/*De atributo (se aplica si se cumple con determinado valor en un atributo)*/
input [type=submit] {propiedad: valor;}


Ejemplos

Selector de tipo
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
         p{
            color: red;
            background-color: pink;
         }
      </style>
   </head>
   <body>        
      <!-- Elemento HTML -->
      <p>Buenas tardes mundo</p>
      <p class='unaClase'>Buenas noches mundo</p>
      <p id='unId'>Adiós mundo</p>
   </body>
</html>
Resultado: Todas las etiquetas <p> se ven afectado por el código CSS

Buenas tardes mundo
Buenas noches mundo
Adiós mundo
Selector de clase
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
         p.texto{
            color: red;
            background-color: pink;
         }
      </style>
   </head>
   <body>        
      <!-- Elemento HTML -->
      <p>Buenas tardes mundo</p>
      <p class='texto'>Buenas noches mundo</p>
      <span class='texto'>Adiós mundo</span>
   </body>
</html>
Resultado: Solo las etiquetas <p> que tienen como clase 'texte' se ven afectado por el código CSS, si hubiéramos puesto ".text" en lugar de "p.texto" se modificaría el estilo de la etiqueta <span>

Buenas tardes mundo
Buenas noches mundo
Adiós mundo
Selector de id
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
         #elegido{
            color: red;
            background-color: pink;
         }
      </style>
   </head>
   <body>        
      <!-- Elemento HTML -->
      <p>Buenas tardes mundo</p>
      <p class='elegido'>Buenas noches mundo</p>
      <p id='elegido'>Adiós mundo</p>
   </body>
</html>
Resultado: Solo las etiquetas <p> que tienen como id 'elegido' se ven afectado por el código CSS

Buenas tardes mundo
Buenas noches mundo
Adiós mundo
Selector universal
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
         *{
            color: red;
            background-color: pink;
         }
      </style>
   </head>
   <body>        
      <!-- Elemento HTML -->
      <p>Buenas tardes mundo</p>
      <div>Buenas noches mundo</div>
      <h1>Adiós mundo</h1>
   </body>
</html>
Resultado: Todas las etiquetas se ven afectado por el código CSS

Buenas tardes mundo
Buenas noches mundo
Adiós mundo
Selector de atributo
<!DOCTYPE html>
<html>
   <head>
      <title>Prueba</title>
      <!-- Código CSS -->
      <style>
         a[href='#']{
            color: red;
            background-color: pink;
         }
      </style>
   </head>
   <body>        
      <!-- Elemento HTML -->
      <a>Buenas tardes mundo</a><br/>
      <a href='#'>Buenas noches mundo</a><br/>
      <a href='www.google.com'>Adiós mundo</a>
   </body>
</html>
Resultado: Solo las etiquetas <a> cuyo atributo 'href' tiene valor '#' se ven afectado por el código CSS

Buenas tardes mundo
Buenas noches mundo
Adiós mundo