Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas
Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas

lunes, 23 de noviembre de 2015

Resolver una ecuación cuadrática

Ecuación cuadrática


Desarrolle un programa que resuelva la ecuación cuadrática ax2+bx+c=0.

La entrada del programa serán a, b y c. La salida serán las soluciones reales de la ecuación.

Por ejemplo, si la entrada son los valores 1, 2 y —8, la salida del programa debe ser:

-4.0
2.0

Si la entrada son los valores 4, 4 y 1, la salida del programa debe ser:

-0.5

Si la entrada son los valores 3, —3 y 1, la salida del programa debe ser:

no hay soluciones reales

Solución


Resolveremos la ecuación reemplazando a, b y c en la fórmula cuadrática:
x= (-b ± √(b2- 4ac) )/ 2a

El discriminante de la fórmula determina cuántas soluciones reales hay, es decir la cantidad de valores de x que satisfacen la ecuación. Si el discriminante es cero hay una solución, si es mayor a 0 hay dos soluciones y si es negativo no hay soluciones reales. El discriminante se calcula como Δ= b2 - 4ac

Cuando el discriminante es cero, la fórmula cuadrática  que queda es x= -b/2a
Cuando el discriminante es mayor a cero nos quedan dos soluciones:
x= (-b + √Δ) / 2a
x= (-b - √Δ) / 2a

Solución en Javascript


function cuadratica(){
  var a;
  var b;
  var c;

  a= prompt( 'Ingresar el valor a: ', 1 );
  // si a es cero o vacio no es una función cuadrática
  if (! (a*1)) return;

  b= prompt( 'Ingresar el valor b: ', 1 );
  c= prompt( 'Ingresar el valor c: ', 1 );

  var discriminante= b*b - 4*a*c;
  if (discriminante < 0){ 
    alert( 'No hay soluciones reales' );
    return;
  }

  if (discriminante){ 
    alert( 'Hay dos soluciones:' ); 
    var solucion = (-b + Math.sqrt(discriminante))/(2*a);
    alert( solucion ); 
    var solucion2 = (-b - Math.sqrt(discriminante))/(2*a);
    alert( solucion2 ); 
  }else{
    var solucion = -b/(2*a);
    alert( 'La unica solucion es ' + solucion );
  }
  return;
}
cuadratica();
cuadratica();
cuadratica();

Solución en Perl


#!/usr/bin/perl
use strict;
use warnings;

print "Ingresar el valor a: ";
my $a = <stdin>;
chomp($a);
if (! $a){ die; }

print "Ingresar el valor b: ";
my $b = <stdin>;
chomp($b);

print "Ingresar el valor c: ";
my $c = <stdin>;
chomp($c);

my $discriminante= $b*$b - 4*$a*$c;
if ($discriminante < 0){ 
  print "No hay soluciones reales \n";
  exit;
}

if ($discriminante){ 
  print "Hay dos soluciones: \n"; 
  my $solucion = (-$b + sqrt($discriminante))/(2*$a);
  print $solucion."\n"; 
  my $solucion2 = (-$b - sqrt($discriminante))/(2*$a);
  print $solucion2."\n"; 
}else{
  my $solucion = -$b/(2*$a);
  print "La unica solucion es $solucion \n";
}


jueves, 19 de noviembre de 2015

Número recíproco


Recíproco o Inverso multiplicativo


El recíproco de un número real x se calcula como 1 dividido por x, excepto cuando x=0, ya que el cero no tiene recíproco.

Desarolle un programa que reciba como entrada un número real, y que entregue como salida el recíproco del número. Si la entrada es 0, la salida debe decir: el cero no tiene reciproco.

Solución en Perl

#!/usr/bin/perl
use strict;
use warnings;

print "Ingresar número: ";
my $valor = <stdin>;
chomp($valor);

if (! $valor){ print "El cero no tiene reciproco \n"; }
else{
  my $reciproco = 1/$valor;
  print "El reciproco de $valor es $reciproco \n";
}

Solución en Javascript

var valor= prompt('Ingresar número',0);
if (! valor){ alert('El cero no tiene reciproco'); }
else{
  var reciproco;
  reciproco = 1/valor;
  alert ('El reciproco de ' + valor + ' es ' + reciproco);
}


martes, 17 de noviembre de 2015

Planètes

Calculer la superficie et le volume d'une sphère


Le volume, en sciences physiques ou mathématiques, est une grandeur qui mesure l'extension d'un objet ou d'une partie de l'espace. La superficie d'un espace au sol ou d'une surface physique plane ou gauche est sa mesure physique exprimée avec une unité de mesure. L'unité correspondante du système international est le mètre carré1 ou l'un de ses multiples ou sous-multiples.
Dans cet exercice, nous proposons de développer un programme dont l'entrée est le rayon d'une planète et sa sortie:
  • La superficie de la planète
  • Le volumen de la planète
Les formules qui sont nécessaires:
Le volume d'une sphère est exprimé en termes de son rayon r\, comme:
V = \frac{4 \pi r^3}{3}
La superficie est 4 fois \pi \, fois son rayon au carré:
\ A = 4\pi r^2

Par exemple, si l'entrée est 6351 (le rayon moyen de la Terre en kilomètres), le programme doit fournir les résultats:
  • Superficie: 510064471.90978825
  • Volume: 1083206916845.7535

Perl Solution

#!/usr/bin/perl
use strict;
use warnings;
print "Entrez la rayon: ";
my $rayon = <stdin>;
chomp($rayon);

my $PI = 4.0 * atan2(1.0,1.0);

my $volume;
$volume = ($rayon * $rayon * $rayon * $PI * 4) / 3;
print "Le volume de la planète est $volume\n";

my $superficie;
$superficie = $rayon * $rayon * $PI * 4;
print "La superficie de la planète est $superficie\n";


Javascript Solution

var rayon= prompt('Entrez la rayon',0);
var volume;
volume = (rayon * rayon * rayon * Math.PI * 4) / 3;
alert ('Le volume de la planète est  ' + volume);
var superficie;
superficie = rayon * rayon * Math.PI * 4;
alert ('La superficie de la planète est ' + superficie);

sábado, 7 de noviembre de 2015

Conversión de temperaturas

Convertir de Grados Celsius a Fahrenheit


El grado Celsius o centígrado es la unidad termométrica que Anders Celsius definió en 1742 considerando las temperaturas de ebullición y de congelación del agua. Es muy utilizada para expresar las temperaturas de uso cotidiano. El grado Fahrenheit es una escala de temperatura propuesta por Daniel Fahrenheit en 1724 y se usa en la mayoría de los países anglosajones, aunque está siendo desplazado paulatinamente.
En este ejercicio proponemos desarrollar un programa cuya entrada sea una temperatura en grados Fahrenheit y su salida sea la temperatura en grados Celsius.
La fórmula de conversión es:
C= (F - 32) * 5/9
Por ejemplo, si la entrada es 131, el programa debe entregar el resultado 55.

Solución en Perl

#!/usr/bin/perl
use strict;
use warnings;
print "Ingrese la temperatura: ";
my $fah = <>;
chomp($fah);
my $cel;
$cel = ($fah - 32) * 5/9;
print "Temperatura de $fah grados Fahrenheit es $cel grados Celsius";

Solución en Javascript

var fah= prompt('Ingrese la temperatura',0);
var cel;
cel = (fah - 32) * 5/9;
alert ('Temperatura de ' + fah + ' grados Fahrenheit es ' + cel + ' grados Celsius');

domingo, 6 de septiembre de 2015

Convertir caracteres entre mayúsculas y minúsculas 2

Convertir el primer carácter de cada palabra del string



La función ucwords() de Php convierte el primer carácter de cada palabra a mayúscula.

// Ejemplo
<?
$foo= 'Viens, fait le pour moi!';
$bar= ucwords($foo); // Viens, Fait Le Pour Moi!
print $bar."\n";

Para hacer lo contrario, es decir, convertir a minúscula el primer carácter de cada palabra, tenemos que trabajar un poco más:


<?
/* 
    # lcwords v1.000
    # Convertir el primer carácter de cada palabra a minúscula
    # input string
    # return string
*/
function lcwords($string)
{
/* Variables temporales */
    # variable loop
    $a = 0;
    # almacenar todas las palabras en un array para luego unirlas en un string y retornarlo
    $string_new = array();
    $string_exp = explode(" ",$string);
    foreach($string_exp as $astring)
    {
        for($a=0;$a<strlen($astring);$a++)
        { 
            # chequear que el carácter es una letra
            # ejemplo: si la palabra es "100PRE" debería convertir la letra P solamente
            # chequear el carácter en la posicion $a
            if(preg_match("'\w'",$astring[$a]))
            {
                $astring[$a] = strtolower($astring[$a]);
                # conseguido! finalizar el bucle
                break;
            }
        }
        $string_new[] = $astring;
    }
    # devolver el string como la unión de las palabras separadas por un espacio
    return implode(" ",$string_new);
}

// Ejemplo 2
$foo = 'Viens, embrasse MOI!';
$bar = lcwords($foo); // viens, embrasse mOI!



En Javascript no hay una función ucwords() como en Php para convertir en mayúsculas la primera letra de cada palabra en un string, pero podemos crear una:

function ucwords(str){
return str.replace(/(^([a-zA-Z\p{M}]))|([ -][a-zA-Z\p{M}])/g,
        function($1){
            return $1.toUpperCase();
        });
}
//Ejemplo
str= "Tout ce qui nous a unis";
console.log(ucwords(str)); // Tout Ce Qui Nous A Unis

Para convertir a minúsculas la primera letra de cada palabra en un string en Javascript, podemos armar esta función lcwords:

function lcwords(str){
return str.replace(/(^([a-zA-Z\p{M}]))|([ -][a-zA-Z\p{M}])/g,
        function($1){
            return $1.toLowerCase();
        });
}
//Ejemplo
str= "Tout ce Qui NOUS a Unis";
console.log(lcwords(str)); // tout ce qui nOUS a unis

Para convertir el primer carácter de cada palabra de un string a mayúsculas o minúsculas en Perl tampoco existe una función ucwords() o lcwords(). Pero podemos usar split, map y join en conjunto para lograr ese efecto. Con split separamos el string en palabras, con map aplicamos una función a cada palabra, en este caso ucfirst o lcfirst, y luego con join volvemos a juntar el string. Veamos el ejemplo:

# Ejemplo 1
$texto = "CES TRaces quE Tu as laisse à Paris";
$texto = join '', map { ucfirst } split /(\s+)/, $texto;
# CES TRaces QuE Tu As Laisse à Paris
print "Texto: " . $texto;
# Ejemplo 2
$texto = "CES TRaces quE Tu as laisse à Paris";
$texto = join '', map { lcfirst } split /(\s+)/, $texto;
# cES tRaces quE tu as laisse à paris
print "Texto: " . $texto;

Un tercer ejemplo

Si además de pasar la primera letra a mayúsculas, queremos las demás en minúsculas, prueba agregar otra función en map, en este orden: ucfirst lc

# Ejemplo 3
$texto = "CES TRaces quE Tu as laisse à Paris";
$texto = join '', map { ucfirst lc } split /(\s+)/, $texto;
# Ces Traces Que Tu As Laisse à Paris
print "Texto: " . $texto;


martes, 1 de septiembre de 2015

Convertir caracteres entre mayúsculas y minúsculas


Convertir todos los caracteres del string


La función de Perl lc() regresa el string pasado como parámetro con todos sus caracteres en minúsculas. En cambio la función uc() regresa el string pasado como parámetro a mayúsculas.

my $s = "La comunidad de compra y venta OnLine de Europa\n";
print("Todo en mayúsculas:\n");
print(uc($s),"\n");
print("Todo en minúsculas:\n");
print(lc($s),"\n");

La función de Javascript toLowerCase() regresa el string pasado como parámetro con todos sus caracteres en minúsculas. En cambio la función toUpperCase() regresa el string pasado como parámetro a mayúsculas.

// Ejemplo 1
var str = "Hola Mundo!";
var res = str.toLowerCase(); 
// Ejemplo 2
var str = "Hola Mundo!";
var res = str.tUpperCase(); 

La función de Php strtolower() regresa el string pasado como parámetro con todos sus caracteres en minúsculas. En cambio la función strtoupper() regresa el string pasado como parámetro a mayúsculas.

$str = "SiguE a tus FavoritoS dESDe aQuí";
$str = strtoupper($str);
// muestra:  SIGUE A TUS FAVORITOS DESDE AQUÍ
echo $str; 
$str = "SiguE a tus FavoritoS dESDe aQuí";
$str = strtolower($str);
// muestra  sigue a tus favoritos desde aquí
echo $str; 

 

Convertir el primer carácter de un string


La función lcfirst() de Perl devuelve el string pasado como parámetro pero con la primera letra cambiada a minúsculas. La función ucfirst() de Perl devuelve el mismo string pero con la primera letra cambiada a mayúsculas.

print lcfirst $str;  // Muestra la primera letra en minúsculas
print ucfirst $str;  // Muestra la primera letra en mayúsculas

La función lcfirst() de Php devuelve el string pasado como parámetro pero con la primera letra cambiada a minúsculas. La función ucfirst() de Php devuelve el mismo string pero con la primera letra cambiada a mayúsculas.

$bar = 'HELLO WORLD!';
$bar = lcfirst($bar);             // hELLO WORLD!
$bar = ucfirst($bar);             // HELLO WORLD!

En Javascript no existen la función lcfirst o ucfirst, pero se puede usar la función charAt() con 0 como argumento para que devuelva el carácter ubicado en la posición 0. A éste carácter le aplicamos la funcion toUpperCase() o toLowerCase() según corresponda. Luego lo concatenamos con el resto del string y así nos queda la respuesta que esperamos.

// ejemplo de un ucfirst simulado
var cadena= "hola mundo!";
var respuesta= cadena.charAt(0).toUpperCase() + cadena.substr(1);
// nos queda "Hola mundo!"

// ejemplo de un lcfirst simulado
var cadena= "Hola Mundo!";
var respuesta= cadena.charAt(0).toLowerCase() + cadena.substr(1);
// nos queda "hola Mundo!"



sábado, 29 de agosto de 2015

Tomar una parte de un string

La función substr en Php

La función substr() en Php retorna la porción de un string entre una posición de comienzo y una longitud dada. Si la longitud es omitida devuelve todos los caracteres hasta el final del string. Ambos parámetros podrían ser negativos.

// Ejemplos 
$rest = substr("0123456"2);      // retorna "23456"
$rest = substr("0123456", -2);     // retorna "56"
$rest = substr("0123456"22);   // retorna "23"
$rest = substr("0123456"2, -2);  // retorna "234"
$rest = substr("0123456", -3, -2); // retorna "4"
$rest = substr("0123456", -3, -3); // retorna ""

La función substr en Perl

La función substr() en Perl retorna una porción del string contenida entre la posición de comienzo y una longitud dada. Si la longitud es omitida devuelve todos los caracteres hasta el final del string. Ambos parámetros podrían ser negativos.

# Ejemplos
my $cadena = "0123456";
my $subcadena = substr($cadena,0,4); # $subcadena contiene "0123";
$subcadena = substr($cadena,1,4);    # $subcadena contiene "1234";
$subcadena = substr($cadena,2);      # $subcadena contiene "23456";
$subcadena = substr($cadena,-4,3);   # $subcadena contiene "345";
$subcadena = substr($cadena,-4,-3);  # $subcadena contiene "3";
$subcadena = substr($cadena,3,-4);   # $subcadena contiene "";
$subcadena = substr($cadena,3,-3);   # $subcadena contiene "3";


La función substring en Javascript

La función substring() en Javascript retorna una porción del string contenida entre dos índices. Si alguno es negativo lo considera como un 0.

var cadena = "0123456";
var rest = cadena.substring( 2);  // retorna "23456"
rest = cadena.substring( -2);     // retorna "0123456"
rest = cadena.substring( 23);   // retorna "2"
rest = cadena.substring( 22);   // retorna ""
rest = cadena.substring( 2, -2);  // retorna "01"
rest = cadena.substring( 0, 2);   // retorna "01"
rest = cadena.substring( -3, -2); // retorna ""
rest = cadena.substring( -3, -3); // retorna ""

La función substr en Javascript

La función substr() en Javascript retorna una porción del string contenida desde una posición inicial y hasta la cantidad de caracteres indicada como segundo parámetro. Si la longitud es negativa, la considera como un 0. Si la posición inicial es negativa, toma la posición inicial desde el final del string en vez de desde el principio.

var cadena = "0123456";
var rest = cadena.substr( 2);   // retorna "23456"
rest = cadena.substr( -2);      // retorna "56"
rest = cadena.substr( 23);    // retorna "234"
rest = cadena.substr( 22);    // retorna "23"
rest = cadena.substr( 2, -2);   // retorna ""
rest = cadena.substr( 0, 2);    // retorna "01"
rest = cadena.substr( -3, -2);  // retorna ""
rest = cadena.substr( -3, -3);  // retorna ""

La función slice en Javascript

La función slice() en Javascript retorna una porción del string contenida entre dos índices. Si algún índice es negativo, toma la posición desde el final del string en vez de desde el principio.

var cadena = "0123456";
var rest = cadena.slice( 2);  // retorna "23456"
rest = cadena.slice( -2);     // retorna "56"
rest = cadena.slice( 2, 3);   // retorna "2"
rest = cadena.slice( 2, 2);   // retorna ""
rest = cadena.slice( 2, -2);  // retorna "234"
rest = cadena.slice( 0, 2);   // retorna "01"
rest = cadena.slice( -3, -2); // retorna "4"
rest = cadena.slice( -3, -3); // retorna ""


sábado, 8 de agosto de 2015

Clase Cuenta Bancaria en JS usando Joose


Problema

Modelizaremos una cuenta bancaria normal. En esta cuenta se puede depositar dinero, retirar dinero y comprobar su saldo actual. No se puede retirar más dinero que el que hay en la cuenta. Además modelizaremos una cuenta corriente con una protección contra sobregiros opcional. La protección contra sobregiros protegerá al propietario de la cuenta corriente retirando automáticamente los fondos necesarios de la cuenta de sobregiro para asegurar que un cheque no rebotará.

Solución

Module("Banco", function (m) {
  Class("Cuenta", {
    has: {
      balance: {
        is: "rw",
        init: 0
      }
    },
    methods: {
      depositar: function (monto) {
        this.setBalance(this.getBalance() + monto)
      },
      retirar: function (monto) {
        if(this.getBalance() < monto) {
          throw "Cuenta sobregirada"
        }
        this.setBalance(this.getBalance() - monto);
        return this.getBalance();
      }
    }
  });
  
  Class("CuentaCorriente", {
    isa: m.Cuenta,
    has: {
      cuentaSobregiro: {
        isa: m.Cuenta,
        is: "rw"
      }
    },
    before: {
      retirar: function (monto) {
        var cantidadEnRojo = monto - this.getBalance()
        
        if(this.cuentaSobregiro && cantidadEnRojo > 0) {
           this.cuentaSobregiro.retirar(cantidadEnRojo);
           this.depositar(cantidadEnRojo);
        }
      }    
    }
  })
}) 

Explicacion

La clase Cuenta tiene un "balance" inicializado en 0 y dos métodos: "depositar" y "retirar". La CuentaCorriente es una subclase de Cuenta que tiene una "cuentaSobregiro" opcional que es de tipo Cuenta. Antes de retirar un monto de la CuentaCorriente verifica si puede sobregirar la cuenta.

Módulos

Module("Banco", function (m) {
...
} 

La función Module() crea el namespace "Banco". Toma como segundo argumento una función que crea las clases Cuenta y CuentaCorriente. La función obtiene un objeto módulo como parámetro, que más tarde será utilizado para facilitar el acceso a otras clases ubicadas dentro del namespace.

Restricciones de Tipo

has: {
  cuentaSobregiro: {
    isa: m.Cuenta,
    is: "rw"
  }
}, 

Aquí introducimos un nuevo atributo para la clase CuentaCorriente llamado "cuentaSobregiro". Usando la palabra clave isa ponemos una restricción de tipo sobre el atributo. Esta restricción es chequeada cada vez que el método setCuentaSobregiro() es usado. Ese método fue creado automáticamente cuando se definió el atributo como rw.

Modificador de método "before"

before: {
  retirar: function (monto) {
    var cantidadEnRojo = monto - this.getBalance()
    
    if(this.cuentaSobregiro && cantidadEnRojo > 0) {
       this.cuentaSobregiro.retirar(cantidadEnRojo);
       this.depositar(cantidadEnRojo);
    }
  }    
} 

Introducimos un método que será ejecutado antes del método retirar(). De esta manera el método original se ve aumentado en su comportamiento. Si el dinero actual en el balance de la cuenta no es suficiente para el retiro, se extrae lo que falta de la cuentaSobregiro y se deposita en la cuenta.

Modificador de método "override"

Otra posible implementación podría haber sido sobreescribir el método retirar() usando el modificador override, el cual permite llamar al método de la superclase haciendo this.SUPER()
override: {
  retirar: function (monto) {
    var cantidadEnRojo = monto - this.getBalance()
      
    if(this.cuentaSobregiro && cuentaSobregiro > 0) {                
      this.cuentaSobregiro.retirar(cantidadEnRojo);
      this.depositar(cantidadEnRojo);
    }

    this.SUPER(amount)
  }
} 

Instanciación de los objetos

Todos los objetos Joose reciben un inicializador estándar que permite inicializar los objetos usando argumentos por nombre en el constructor:
var cajaAhorros= new Banco.Cuenta({ balance: 100 });
var cuentaCorriente= new Banco.CuentaCorriente({ 
    balance:         200, 
    cuentaSobregiro: cajaAhorros
});
console.log("Una cuenta: ");
console.log(cajaAhorros);
console.log("Una cuenta corriente: ");
console.log(cuentaCorriente);
console.log("Operamos en la cuenta con un retiro parcial de 100");
cuentaCorriente.retirar(100);
console.log(cuentaCorriente);
console.log(cajaAhorros);
console.log("Sobregiramos la cuenta con un retiro mayor: 150");
cuentaCorriente.retirar(150);
console.log(cuentaCorriente);
console.log(cajaAhorros);
console.log("Sobregiramos demasiado la cuenta: 300");
cuentaCorriente.retirar(300);

Una cuenta: 
 a Banco.Cuenta { balance=100, meta=a Joose.Class, initialize=initialize(), más...}
Una cuenta corriente: 
 a Banco.CuentaCorriente { balance=200, cuentaSobregiro=a Banco.Cuenta, meta=a Joose.Class, más...}
Operamos en la cuenta con un retiro parcial de 100
 a Banco.CuentaCorriente { balance=100, cuentaSobregiro=a Banco.Cuenta, meta=a Joose.Class, más...}
 a Banco.Cuenta { balance=100, meta=a Joose.Class, initialize=initialize(), más...}
Sobregiramos la cuenta con un retiro mayor: 150
 a Banco.CuentaCorriente { balance=0, cuentaSobregiro=a Banco.Cuenta, meta=a Joose.Class, más...}
 a Banco.Cuenta { balance=50, meta=a Joose.Class, initialize=initialize(), más...}
Sobregiramos demasiado la cuenta: 300
uncaught exception: Cuenta sobregirada

lunes, 3 de agosto de 2015

Web API Console

Comandos


console.log(object[, object, …])
Escribe un mensaje en la consola. Como primer argumento puede aceptar un objeto o un string con especificadores de formato. Por ejemplo %s para string, %d para enteros, %f para flotantes o %o para objetos.
console.log("Usuario %s posee %d créditos", userName, creditCount);

console.debug(object[, object, ...])
Idéntico a console.log.

console.info(object[, object, ...])
Idéntico a console.log pero agrega un ícono "info".

console.warn(object[, object, ...])
Idéntico a console.log pero agrega un ícono "warning".

console.error(object[, object, ...])
Similar a console.log pero agrega un ícono "error" y una traza de la pila.

console.assert(expression[, object, ...])
Testea que una expresión sea verdadera. Si no lo es escribirá un mensaje de error en la consola junto a una traza de la pila. Por ejemplo:
console.assert(list.childNodes.length < 10, "List item count is >= 10");

console.clear()
Limpia la consola.

console.dir(object)
Muestra las propiedades del objeto.

console.trace()
Muestra una traza de la pila en el punto donde es llamado.

console.time(label)
Comienza un timer con una etiqueta label asociada. Cuando console.timeEnd(label) es llamado, el timer es detenido y se muestra en la consola el tiempo transcurrido.

console.profile([title])
Inicia el CPU profile con un título opcional. Para completar el profile llame a console.profileEnd() para que imprima el reporte.

console.count([label])
Escribe el número de veces count() fue ejecutado con el mismo label o las veces que se ejecutó la misma línea de código donde count() fue llamado y ejecutado.

console.table(data[, columns])
Similar a console.log pero muestra los datos en formato de tabla. Por ejemplo:
var languages = [
    { name: "JavaScript", fileExtension: ".js" },
    { name: "Perl", fileExtension: ".pl" },
    { name: "Python", fileExtension: ".py" },
    { name: "Erlang", fileExtension: ".erl" },
    { name: "PHP", fileExtension: ".php" }
];

console.table(languages);
Muestra por consola:

name fileExtension
"JavaScript" ".js"
"Perl" ".pl"
"Python" ".py"
"Erlang" ".erl"
"PHP" ".php"

sábado, 1 de agosto de 2015

Clase Selfie en Joose JS

Código

Class("Fotografia", {
    has: {
        alto: {is: "ro"},
        ancho: {is: "rw"},
    },
    methods: {
        clear: function () {
            this.alto = 0;
            this.setAncho(0);
        }
    }
})
Class("Selfie", {
    isa: Fotografia,
    has: {
        etiqueta: {init: "yo"}
    },
    after: {
        clear: function () {
            this.etiqueta = "yo";
        }
    }
})
var foto= new Selfie({ancho: 360, alto:240});
foto.etiqueta= "Ricky Martin";

Explicación


Este es un ejemplo de Joose para crear una clase que hereda de otra. La función Class() toma dos parámetros: el nombre de la clase y la definición de la clase pasada como un objeto literal. La sintaxis para definir la clases es declarativa y fácil de leer. Las palabras clave como "has", "methods", "isa" y "after" son usadas para expresar diferentes aspectos de la clase.

Atributos


has: {
        alto: {is: "ro"},
        ancho: {is: "rw"},
    }, 

El primer elemento de la declaración de la clase Fotografía es un bloque "has" que define dos atributos de la clase: alto y ancho. El bloque alto: {is: "ro"} define "alto" como de sólo lectura. Mientras que el bloque ancho: {is: "rw"} define "ancho" como un atributo de lectura y escritura. Joose automáticamente crea los métodos getAlto() para "alto" y getAncho() y setAncho() para "ancho". El nombre de estos métodos sigue la convención camelCase, colocando la primera letra del atributo en mayúscula.

has: {
        etiqueta: {init: "yo"}
    }, 

El bloque etiqueta: {init: "yo"} define el atributo "etiqueta" con un valor por default que es el string "yo". Como no se especifica si es rw o ro, por defecto no se crean los métodos de acceso getEtiqueta() y setEtiqueta().

Métodos


methods: {
        clear: function () {
            this.alto = 0;
            this.setAncho(0);
        } 

El bloque "methods" define el método clear() para la clase Fotografía. Podemos poner todos los métodos que queramos. En este caso la función setea "alto" accediendo a la variable directamente, pero modifica "ancho" usando su método modificador creado con la declaración "rw".

Herencia


 isa: Fotografia, 

La cláusula "isa" en la definición de Selfie define que su super clase es Fotografía. Selfie hereda los métodos y atributos de su superclase.

Modificador de método


after: {
        clear: function () {
            this.etiqueta = "yo";
        }
    } 

Joose soporta los llamados modificadores de métodos. Uno de los 5 modificadores que declaran métodos con un comportamiento especial es "after". Aquí define que acciones ejecutar después de llamar al método con el mismo nombre definido en su superclase.

Inicialización


var foto= new Selfie({ancho: 360, alto:240}); 

El objeto literal {ancho: 360, alto:240} es pasado como argumento de un método especial llamada initialize() que lo usa para inicializar los valores del atributo del nuevo objeto.


viernes, 31 de julio de 2015

Construir un módulo Joose JS

Module(name,function)

La función global Module(name,function) hace que crear un namespace para las clases, roles y prototipos sea muy fácil. El módulo automáticamente crea el namespace llamado "name". Las clases que son creadas dentro de la función "function" serán puestas automáticamente dentro del namespace del módulo. Esto reduce el riesgo de conflictos de nombres. Un módulo proporciona una buena forma de estructurar y organizar el código que compone un proyecto (múltiples módulos) o una librería (normalmente un único módulo).

Module("com.test.module", function (m) {
    Class("Test", {
        methods: { world: function () { return "hello" } }
    });
    Class("Test2", {
        methods: { world: function () { return "hello" } }
    })
})

En el ejemplo la clase Test será globalmente conocida bajo el nombre "com.test.module.Test" y así se reduce el riesgo de conflictos de nombres.

jueves, 30 de julio de 2015

Construir una clase Joose JS

La función global Class(name, properties) crea una clase con el nombre "name". La clase es inicializada usando sus propiedades "properties" de esta manera:
  • isa: Indica de qué clase hereda, o sea, su superclase
  • does: Aplica roles a la clase
  • has: Crea atributos para la clase
  • methods: Crea los métodos de instancia
  • classMethods: Crea los métodos de clase
Existen también modificadores de métodos: before, after, around, override, augment

isa

Class("Avion", {
 isa: Transporte
})

En el ejemplo Avion heredará todos los métodos de la clase Transporte. No hay Herencia Múltiple.

does

Class("Pintura", {
 does: Coloreable
})

Aplica roles, a veces llamado traits (algo similiar a mixins), a la clase. Para aplicar múltiples roles se le pasa un array de roles.

has

Class("Puerta",{
 has: {
  color: {
   is: "rw",
   init: "blanca"
  },
  material: {
   is: "ro",
   init: "madera"
  }
 }
}

En el ejemplo la clase Puerta tiene dos atributos: color y material. El atributo "color" es de lectura/escritura y es inicializado a "blanca". El atributo "material" es de sólo lectura y es inicializado a "madera". Joose genera los métodos de acceso a los atributos automáticamente, en este caso se llamarían: getColor(), setColor(), getMaterial(). No hay un método setMaterial() porque fue declarado de sólo lectura.

methods

methods: {
 clear: function(){
  this.setX(0);
  this.setY(0);
 },
 stringify: function(){
  return "" + this.getX() + "," + this.getY()
 }
}

En el ejemplo agregamos dos métodos a la clase, los métodos clear() y stringify(). El primero para limpiar los atributos de la clase y el segundo para devolver un string que representa los valores de sus atributos.

classMethods

classMethods: {
 makeNew: function(){
  return new Punto3D()
 }
}

Funciona como "methods" pero para generar métodos de clase en vez de métodos de instancia. Ahora podemos crear un Punto3D llamando a Punto3D.makeNew()

Modificadores de métodos


Los métodos declarados como "before" son llamados antes del método que sobreescriben. El valor de retorno es descartado.
before: {
 clear: function(){ alert("Antes: " + this.stringify()) }
}

Los métodos declarados como "after" son llamados después del método que sobreescriben. El valor de retorno es descartado.
after: {
 clear: function(){ alert("Después: " + this.stringify()) }
}

Métodos especiales


Los objetos Joose devuelven el string "a ClassName" cuando se llama al método stringify(), siendo ClassName el nombre de la clase a la que pertenece el objeto. Éste método se puede sobreescribir. Algunos engines Js utilizan el método toString(), por eso no se modifica directamente toString(), Joose utiliza stringify().
Existe el método initialize() que Joose automáticamente utiliza para inicializar una instancia como esta: var point = new Point({x:10, y: 10})
Se lo puede sobreescribir para cambiar ese comportamiento. O podría ser útil definir un modificador "after" para el método initialize().

miércoles, 29 de julio de 2015

Clase Punto3D en Javascript usando Joose

Javascript


En Javascript vamos a implementar una clase Punto3D que hereda de la clase Punto implementada antes aquí.
// Implementamos una función para herencia
function inherit(superClass, subClass) {
    for(var i in superClass.prototype) {
        subClass.prototype[i] = superClass.prototype[i]
    }
}
Test.StandardPoint3D = function (x, y, z) {
    this.x = x || 0
    this.y = y || 0
    this.z = z || 0
}
// Hacemos que Test.Standard sea la super clase de Test.StandardPoint3D
inherit(Test.StandardPoint, Test.StandardPoint3D)
// No podemos asignar un nuevo prototipo porque ya tenemos uno de la super clase
Test.StandardPoint3D.prototype.getZ = function () {
    return this.z
}
Test.StandardPoint3D.prototype.setZ = function (z) {
    this.z = z;
}
var superMethod = Test.StandardPoint3D.prototype.clear;
Test.StandardPoint3D.prototype.clear = function () {
    superMethod.apply(this);
    this.z = 0;
}


Joose


Ahora reimplementamos la clase Punto3D usando la librería Joose y vemos que el nuevo código es más compacto y legible porque se ocupa de lo que nos importa.
Module("Test", function (m) {
    Class("Point3D", {
        isa: m.Point,
        has: {
            z: {
                is: "rw",
                init: 0
            }
        },
        after: {
            clear: function () {
                this.setZ(0)
            }
        }
    })
})

domingo, 26 de julio de 2015

Ejemplo de código Joose

Descargamos la libreria joose.js de https://code.google.com/p/joose-js/downloads/list y creamos este pequeño ejemplo llamado runpoint.html:


<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
  <script type="text/javascript" src="./joose.js"></script>
  <title>Joose Point</title>

  <script type="text/javascript">
  Class("Punto", {
   has: {
    x: {is: "rw"},
    y: {is: "rw"}
   },
   methods: {
    clear: function () {
     this.setX(0);
     this.setY(0);
    }
   }
  });

  Class("Punto3D", {
   isa: Punto,
   has: {
    z: {is: "rw"}
   },
   after: {
    clear: function () {
     this.setZ(0);
    }
   }
  });
  </script>

 </head>
 <body>

  <script type="text/javascript">
  var point = new Punto3D();
  point.setX(10);
  point.setY(30);
  var y = point.getY();
  point.z = 1;
  console.log("Un punto: ");
  console.log(point);
  console.log("var y: " + y);
  point.clear();
  console.log("Coordenada z luego de clear: " + point.getZ());
  var point2 = new Punto3D({ x: 10, y: 20});
  console.log("Coordenada y de point2: " + point2.y);
  </script>

 </body>
</html>

La salida en la consola del navegador es algo como esto:



runpoint.html:41 Un punto:
runpoint.html:42 f {x: 10, y: 30, z: 1}
runpoint.html:43 var y: 30
runpoint.html:45 Coordenada z luego de clear: 0
runpoint.html:47 Coordenada y de point2: 20

Clase Punto en Javascript usando Joose

Javascript


En Javascript vamos a implementar una clase Punto con los atributos x e y usando el namespace Test.
if(Test == null) {
    Test = {};
}
Test.StandardPoint = function (x, y) {
    this.x = x || 0
    this.y = y || 0
}
Test.StandardPoint.prototype = {
    getX: function () {
        return this.x
    },
    setX: function (x) {
        this.x = x
    },
    getY: function () {
        return this.y
    },
    setY: function (y) {
        this.y = y;
    },
    clear: function () {
        this.setX(0)
        this.setY(0)
    }
}

Joose


Ahora reimplementamos la clase Punto usando la librería Joose y vemos que el nuevo código es más corto y fácil de leer.
Module("Test", function (m) {
    Class("Point", {
        has: {
            x: {
                is:   "rw",
                init: 0
            },
            y: {
                is:   "rw",
                init: 0
            }
        },
        methods: {
            clear: function () {
                this.setX(0);
                this.setY(0);
            }
        }
    })
})

miércoles, 22 de julio de 2015

Qué es Joose

Qué es el framework Joose

Fuente del Joose

El código fuente de Joose es hosteado en GitHub

Joose

Es una librería open-source de JavaScript que soporta clases, herencia, mixins, traits y programación orientada a aspectos. Su sistema de objetos es multiparadigma, soporta el estilo de programación basado en clases y en prototipos. Joose se especializa en dotar al lenguaje JavaScript de técnicas de programación exitosas, por eso se lo usa a menudo con otros frameworks orientados al DOM/Ajax, como jQuery, YUI, Dojo, Prototype, Mootools y PureMVC.

Ejemplos de clases con Joose

A continuación implementamos dos clases con Joose: la clase Punto y la clase Punto3D
Class("Punto", {
    has: {
        x: {is: "rw"},
        y: {is: "rw"}
    },
    methods: {
        clear: function () {
            this.setX(0);
            this.setY(0);
        }
    }
});

Class("Punto3D", {
    isa: Punto,
    has: {
        z: {is: "rw"}
    },
    after: {
        clear: function () {
            this.setZ(0);
        }
    }
});
Punto3D es una subclase de Punto. Tiene un atributo más y un código adicional que corre antes del método clear() de su superclase. El valor "rw" significa que el atributo del objeto se de lectura y escritura, es decir que automáticamente se generan los métodos de acceso get() y set().

domingo, 8 de febrero de 2015

Un poco de Javascript avanzado

Se trata de una traducción que tiene algunos años, espero que les guste:

Hey, yo no sabía que podías hacer eso


Si tú eres un desarrollador web y vienes del mismo lugar que yo, probablemente has usado un poco de Javascript en tus páginas web, la mayoría para pegar la interface de usuario (UI).

Hasta hace poco, conocía que Javascript tenía más capacidades OO que las que empleaba, pero no me sentía a gusto para usarlas. Cuando los navegadores comenzaron a soportar más características normalizadas de DOM y Javascript, me pareció viable escribir código más complejo y funcional para correr en el cliente. Esto ayudado por el nacimiento del fenómeno AJAX.

Cuando comenzamos a aprender lo que toma escribir nuestras buenas aplicaciones con AJAX, empezamos a notar que el Javascript que solemos usar es realmente tan sólo la punta del iceberg. Vemos ahora que Javascript se usa más allá de los quehaceres simples de UI como la comprobación de la entrada y otras tareas frívolas. El código del cliente ahora es mucho más avanzado y compuesto, tanto como una aplicación real de escritorio o un cliente pesado de un ambiente cliente-servidor. Vemos las librerías de clases, objetos modelo, jerarquías, patrones, y muchas otras cosas que acostumbramos sólo ver del lado del código del servidor. 

Ver más...