100 días de código en Javascript... 5ta parte

Continuando con esta serie de posts he aquí más ejemplos de código en Javascript.

35. Recuperar el title de una página:

alert(document.title)

36.Cargar contenido:

<div id="contenedor"></div>
    <script>
      const contenedor = document.querySelector("#contenedor")
      var Robot = {
        nombre: "El Robotron",
        init: function(){
          contenedor.innerHTML = Robot.nombre
        }
      };
      window.addEventListener("load",Robot.init);
    </script>

37. Obtener texto de un atributo:

<span data-offset-key="4lpif-0-0"></span>
<script>
  let elSpan = document.querySelector("[data-offset-key = '4lpif-0-0']");
  elSpan.innerHTML = "<h3>Hola, amigos</h3><p>Esto lo puse yo.</p>";
</script>

38. Funciones (usando jQuery). Pasar parámetros.

var contenedor = $("#contenedor");

//función
function miFuncion(){
    contenedor.html("<marquee behavior='alternate'>Hola, mundo</marquee>");
}
 
//pasar parámetros
function miOtraFuncion(event){
  contenedor.html(event.data.nombre+" "+event.data.apellido);
}

//button
$("#Btn").on( "click", miFuncion);

//button para pasar parámetros
$("#BtnPasar").click({nombre: "Juan", apellido: "Perez"}, miOtraFuncion);

Código HTML:

<div id="contenedor"></div>
<button id="Btn">Ejecuta algo</button>
<button id="BtnPasar">Pasar parámetros</button>

En posteriores publicaciones habrá más código.

Ingeniería económica con C#

Como hemos visto en anteriores posts crear aplicaciones con C# es muy sencillo. En está ocasión crearemos un programa que calcule el valor futuro y rédito de una cantidad a una tasa y periodos definidos.

Necesitaremos:

• Crear una clase llamada Economica.cs
• Una clase principal (Program.cs)

¿Cómo obtenemos los cálculos de valor futuro y rédito?

valor_futuro = valor_presente * pow(1+tasa/100, periodo);
redito = (valor_futuro - valor_presente) / valor_presente;

La clase Economica.cs tendrá tres atributos:

• presente (valor presente)
• tasa (tasa de inversión)
• periodo (periodo de inversión)

Además tendrá dos métodos para calcular valor futuro y rédito
Economica.cs

using System;

namespace clases
{
 public class Economica
 {
  private double presente;
  private double tasa;
  private int periodo;

  public Economica()
  {
   Console.WriteLine("Objeto Economica creado e inicializado");
  }

  public Economica(double presente, double tasa, int periodo)
  {
   this.Presente = presente;
   this.Tasa = tasa;
   this.Periodo= periodo;
  }

  public double Presente
  { 
   get; set;
  }

  public double Tasa
  {
   get; set;
  }

  public int Periodo
  {
   get;set;
  }

  public double Futuro()
  {
   return this.Presente * Math.Pow(1+this.Tasa/100,this.Periodo);
  }

  public double Redito()
  {
   return (this.Futuro()-this.Presente)/this.Presente;
  }  

  public override string ToString(){
   return string.Format("Economica( presente = {0} , tasa = {1} , periodo = {2})", this.presente,this.tasa, this.periodo);
  }

 }
}

Dentro de esta clase principal se creará una lista de tipo Economica:

//Necesitamos para emplear List
using System.Collections.Generic;

//...

List<Economica> listaEconomica = new List<Economica>();
          

Agregaremos objetos tipo Economica:

listaEconomica.Add(new Economica(2400,5,12));
listaEconomica.Add(new Economica(2800,6,8));
listaEconomica.Add(new Economica(2100,5,10));
listaEconomica.Add(new Economica(1930,10,7));
listaEconomica.Add(new Economica(3400,2,12));

Para recorrer la lista (y mostrar los resultados) emplearemos el método ForEach:

listaEconomica.ForEach(eco => 
            {
                Console.WriteLine("Presente = {0}, Tasa = {1} , Periodo = {2}",eco.Presente, eco.Tasa, eco.Periodo);
                Console.WriteLine("Futuro = {0} , Tasa = {1}",eco.Futuro(),eco.Redito());
                Console.WriteLine("------------------------------------------");
            });

Program.cs

using System;
using System.Collections.Generic;
using clases;

namespace proyecto
{
    class Program
    {

     static void Main(string[] args)
     {
         List<Economica> listaEconomica = new List<Economica>();
            listaEconomica.Add(new Economica(2400,5,12));
            listaEconomica.Add(new Economica(2800,6,8));
            listaEconomica.Add(new Economica(2100,5,10));
            listaEconomica.Add(new Economica(1930,10,7));
            listaEconomica.Add(new Economica(3400,2,12));
            listaEconomica.ForEach(eco => 
            {
                Console.WriteLine("Presente = {0}, Tasa = {1} , Periodo = {2}",eco.Presente, eco.Tasa, eco.Periodo);
                Console.WriteLine("Futuro = {0} , Tasa = {1}",eco.Futuro(),eco.Redito());
                Console.WriteLine("------------------------------------------");
            });
     }

    }
}

Podemos ejecutarlo desde terminal:

dotnet run

Links: 
https://codemonkeyjunior.blogspot.com/2014/09/programando-en-c-no-3.html

Visualizar variables de un archivo de configuración en proyecto web ASP .Net

En este post veremos cómo visualizar  las variables de un archivo de configuración (en formato JSON) de de una aplicación web sencilla ASP .NET.

En el anterior post vimos cómo crear un proyecto.

dotnet new webApp -o miwebapp --no-https
cd miwebapp

Creamos dos páginas *.cshtml, amas con nombre Index.cshtml, una de ellas dentro de un directorio llamado Solange.

• Index.cshtml
• Solange/Index.cshtml

Nuestro directorio:

Nuestro archivo JSON  se verá así:

appsettings.json 

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "AllowedHosts": "*",
  "Message": "Aqui un saludo desde el archivo de configuracion",
  "Email": "codemonkey.blogspot@latinmail.com",
  "Author":"Codemonkey Junior",
  "NumberOfPostOnHomePage": 10,
  "ShowAdsOnHomePage": true,
  "PageSize": 10
}

Nuestras páginas *.cshtml:
Index.cshtml

@page
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1 align='center'>Hola, <font color='green'>amigo</font>.</h1>
<p align='center'><b>Estás en la página principal.</b></p>
<p>El curso inicia en <b>@DateTime.Now</b> </p>

<h2>@Configuration["Message"]</h2>
<h2>@Configuration["Author"]</h2>
<h2>@Configuration["Email"]</h2>

<p>Expresiones:</p>
@{
    var booleano = 50 > 100;
    var operacion = 9+3;
}
<p>50 > 100 es @booleano</p>
<p>9 + 3 es @operacion</p>

Solange/Index.cshtml

@page

<h1>Hola, está página está solita.</h1>
<p>Su ubicación está en /Solange</p>

Ahora nuestras clases principales: Startup.cs y Program.cs Startup.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Configuration;

namespace miwebapp
{
    public class Startup
    {
        public IConfiguration Configurations{ get; set; }

        public Startup(IConfiguration config)
        {
            Configurations = config;
        }

          public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseMvc();

            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("<h1 align ='center'>Programando en <font color='blue'>C#</font> como si fuera en primero.</h1><hr/>");
            });

            
        }
    }
}

Program.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Logging;

namespace miwebapp
{
    public class Program
    {
        public static void Main(string[] args)
        {
            Console.WriteLine("Programando en C#");
            CreateWebHostBuilder(args).Build().Run();
        }

        public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
            WebHost.CreateDefaultBuilder(args)
                .UseStartup<Startup>();
    }
}

Desde la terminal tecleamos:

dotnet run

Abrimos el navegador en http://localhost:5000

Al abrir http://localhost:5000/Solange obtendremos:

Crear una aplicación web con ASP .NET

Vamos a crear nuestra primera página web con ASP.NET siguiendo los pasos de la página: https://dotnet.microsoft.com/learn/web/aspnet-hello-world-tutorial/intro

1. Creamos proyecto y nos ubicamos sobre este.

dotnet new webApp -o myWebApp --no-https
cd myWebApp

2. Tecleamos:

dotnet run

3. Abrimos nuestro navegador en http://localhost:5000/

Tenemos nuestra primera aplicación ASP .Net hecha.
Links:
http://codemonkeyjunior.blogspot.com/2019/05/c-y-net-core-en-linux-ubuntu.html

C# y .Net Core en Linux Ubuntu

¿Cómo instalamos .NET Core en Linux (Ubuntu)?
1. Registramos la llave de Microsoft en nuestro sistema:

wget -q https://packages.microsoft.com/config/ubuntu/18.04/packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb

2. Desde terminal instalamos el núcleo:

sudo add-apt-repository universe
sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install dotnet-sdk-2.2

3. Creamos un directorio y nos ubicamos en el. Si tenemos Visual Studio podemos abrir el directotio directamente:

$ mkdir proyecto
$ cd proyecto
#Abrir Visual Studio Code
$ code .

4. Creamos proyecto:

#Crear proyecto
$dotnet new console

Creará un programa (Program.cs) y los archivos necesarios para compilar y ejecutarlo.
Program.cs

using System;

namespace proyecto
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Programando en C#");
        }
    }
}

5. Compilar y ejecutar:

#Listar ayuda
$ dotnet help

#Compilar y ejecutar:
$ dotnet run

Nota: Todo lo anterior también sirve si usas Windows o Mac.

Links:

Contenido de CSharp

AngularJS: Directivas y expresiones

En este post hablaremos de directivas en AngularJS. Pero antes que nada debemos instalar un sencillo y muy útil servidor:

$ npm install -g http-server 

Para ponerlo activo tecleamos desde una terminal:

$ http-server carpetaProyecto/

Abrimos nuestro navegador en http://localhost:8080/ para cerrar tecleamos en la terminal Ctrl + C.

Como vimos en el anterior post AngularJS posee etiquetas especiales llamadas directivas.Éstas directivas son atributos que se agregan a los elementos HTML, por lo regular comienzan con ng-.

Directivas comunes:

• ng-app: para especificar una aplicación.
• ng-controller: para especificar un controlador.
• ng-model: asocia el valor de una variable con el elemento HTML.
• ng-click: para soltar o ejecutar un evento.
• ng-bind: para enlazar un valor del scope con un elemento HTML sin necesidad de {{ }}

Ejemplo. Creamos un módulo y un controlador.

app.js

/*Módulo 'miApp'*/
var app = angular.module('miApp', []);

/*Controlador 'miControlador'*/
app.controller('miControlador', function($scope) {});

En HTML:

view.html

<!-- Definimos la app -->
<html ng-app='miApp'>

<!-- Definimos el controlador -->
<body ng-controller='miControlador'>
   <!-- contenido -->
</body>

¿Cómo defino las expresiones?
Existen dos formas para definir una expresión.

 Primera forma:

{{ expresion }}

Segunda forma:

ng-bind="expresion".

Ejemplo. Algunas expresiones:

{{ 34 + 32 }}

{{ cadena }}

{{ edad>18? "Eres mayor de edad" : "Eres menor de edad" }}

Ejemplo. Una página simple usando AngularJS.

<html ng-app="miApp">

<script src="js/angular.min.js"></script>


<body ng-controller="miControlador">
<h1>{{ titulo }}</h1>

<script>
/*Módulo 'miApp'*/
var app = angular.module('miApp', []);

/*Controlador 'miControlador'*/
app.controller('miControlador', function($scope) {
 
 //$scope es la variable principal
 $scope.titulo ="Codemonkey Junior";

});

</script>

</body>
</html>

Es todo por hoy.

100 días de código en Javascript... 4ta parte

31. Si quieres saber qué día es hoy podemos usar Date.  En este caso extendemos la clase Date y creamos un método getDia() para mostrarlo.

class Fecha extends Date{
  getDia(){
    var dia =this.getDay();
    var result = "";
    switch(dia){
      case 7: result = "Domingo";break;
      case 6: result = "Sabado";break;
      case 5: result = "Viernes";break;
      case 4: result = "Jueves";break;
      case 3: result = "Miercoles";break;
      case 2: result = "Martes";break;
      case 1: result = "Lunes";break;
      default: result = "NO ESPECIFICADO";break;
    }
    return result;
  }

}

let fecha = new Fecha();
console.log("Hoy es ",fecha.getDia());

32. Crear objetos. En el ejemplo vemos que podemos ir agregando nuevos atributos (mes).

var objFecha = {
  "dia":"Viernes",
  "año":"1950",
  "hora":"09:00PM"
}

objFecha.mes ="Enero";
console.log(objFecha);

33. Más ejemplos de herencia en JS:

/*Clase base de todo animal*/
class Animal{}

//Clase base de animales acuáticos
class AnimalAcuatico extends Animal{}

//Clase base de animales terrestres
class AnimalTerrestre extends Animal{}


//Sublcase de clase AnimalAcuatico
class Delfin extends AnimalAcuatico{}


//Subclase de clase AnimalTerrestre
class Rinoceronte extends AnimalTerrestre{}

34.Extender atributos de una clase definida:

/*Cre la clase Computadora con tres atributos iniciales*/

var Computadora = function(sistema_operativo, modelo, marca){
     this.sistema_operativo=sistema_operativo;
     this.modelo=modelo;
     this.marca=marca;
};


//Agregando/extendiendo atributos

Computadora.prototype.dns='';

Computadora.prototype.ip='';

Computadora.prototype.red='';

//Agregando/extendiendo métodos

Computadora.prototype.verComputadora=function(computadora){

var objetoC= 'Computadora 
Modelo: '+computadora.modelo
+"
Marca: "+computadora.marca+"
Sistema operativo: "+computadora.sistema_operativo
+"
IP:" +computadora.ip+"
DNS: "+computadora.dns
+"
RED: "+computadora.red;

document.getElementById('comp').innerHTML= objetoC;

}

¿Cómo creo una instancia?

function crearComputadora(){
//Creo una instancia
var computadora = new Computadora('Linux','HP vPro','HP');

computadora.ip='148.216.33.21';

computadora.dns='148.216.60.1';

computadora.red='Infinitum';

return computadora;

}

Obtengo el objeto:

var obtenerComputadora = function(){
   var comp= crearComputadora();
   comp.verComputadora(comp);
};

Un evento:

/*<button id='btn'>Obtener</button>*/

document.getElementById('btn').addEventListener('click', obtenerComputadora);

Más en el próximo post.

Links:
http://codemonkeyjunior.blogspot.com/2019/04/100-dias-de-codigo-en-javascript-3ra.html