En este capítulo se repasan los operadores relacionales, los operadores lógicos, las estructuras condicionales y se emplean en la resolución de problemas que implican la toma de decisiones. Las soluciones se implementan empleando las clases de la programación orientada a objetos.
Los operadores relacionales son empleados en la escritura de condiciones en programación. Una condición es toda sentencia de la cual se puede determinar su veracidad (true) o falsedad (false).
Los operadores relacionales comparan dos valores (escritos a ambos lados del operador) y devuelven siempre un valor booleano (true o false). JavaScript cuenta con los siguientes operadores relacionales:
| Operador | Descripción |
|---|---|
| == | Igual a |
| === | Igual y del mismo tipo que |
| != | Diferente de |
| !== | Diferente o de otro tipo que |
| > | Mayor a |
| < | Menor a |
| >= | Mayor o igual a |
| <= | Menor o igual a |
Que tienen la misma sintaxis y semántica que en C/C++, sólo que, por defecto, JavaScript realiza automáticamente las conversiones de tipos que sean necesarias, antes de proceder a comparar los valores.
Por ejemplo, se pueden comparar texto con números:
En estas comparaciones, JavaScript, convierte primero el texto en números y luego compara los valores convertidos. No obstante, no es una buena práctica de programación combinar diferentes tipos de datos en una expresión, por lo que se aconseja no emplear esta forma frecuentemente.
La diferencia entre los operadores == y != y los operadores === y !==, radica en que los últimos no realizan ningun tipo de conversión, lo que es más seguro desde el punto de vista de programación, razón por la cual se recomienda su uso.
Por ejemplo, en las siguientes comparaciones, se obtienen resultados distintos con los dos tipos de operadores:
Los operadores lógicos comparan valores booleanos (o expresiones que pueden ser convertidas o interpretadas como booleanos). Conjuntamente los operadores relacionales, permiten escribir expresiones lógicas complejas.
JavaScript cuenta con los siguientes operadores lógicos:
| Operador | Descripción |
|---|---|
| ! | Negación |
| && | Y lógico |
| || | O lógico |
Estos operadores tienen la misma sintaxis y semántica que en C/C++, así, el operador de negación: !, cambia el valor booleano de verdadero a falso y viceversa. El operador "Y": &&, devuelve verdadero sólo si los dos valores que compara son verdaderos, en cualquier otro caso devuelve falso. El operador "O" lógico: ||, devuelve falso sólo si los dos valores que compara son falsos, en cualquier otro caso devuelve verdadero.
JavaScript interpreta como valores falsos: el cero (0), el texto vacío (""), el valor nulo (null) y el valor undefined e interpreta como verdaderos cualquier texto no vacío y cualquier valor no nulo o indefinido.
Por ejemplo, las siguientes instrucciones devuelven la negación de algunos de estos valores:
En JavaScript, al igual que en la mayoría de los lenguajes de programación, los operadores lógicos || e && se evalúan en cortocircuito, esto es, si con el primer valor se puede determinar, sin lugar a dudas, el resultado de la expresión, entonces el resultado es devuelto directamente, sin evaluar (sin tomar en cuenta) el valor restante.
En el caso del operador &&, se sabe que el resultado es falso si el primer valor es falso (porque falso && cualquier otro valor es siempre falso). En el caso del operador ||, se sabe que el resultado es verdadero si el primer valor es verdadero (porque verdadero || cualquier otro valor es siempre verdadero). Tal como se puede comprobar en los siguientes ejemplos, donde, aunque los segundos valores son en realidad erróneos (son variables y/o funciones inexistentes) no generan ningún error, porque el resultado de las expresiones se determinan directamente en base al primer primer término:
A diferencia de C/C++, en JavaScript, el resultado de un operador lógico no siempre es un valor booleano (true/false) sino el valor con el cual se determina la veracidad o falsedad de la expresión.
Así, el operador "Y" (&&) devuelve el primer término, si el mismo equivale a falso y el segundo en caso contrario, mientras que el operador "O" (||) devuelve el primer término si es equivalente a verdadero y el segundo en caso contrario. Tal como se puede ver en los siguientes ejemplos:
Y las siguientes devuelven el segundo valor, pues con el primero no es posible determinar la veracidad o falsedad de la expresión:
Como se dijo previamente, las clases son los planos en base a los cuales se construyen los objetos o las industrias que fabrican los objetos (instancias de la clase).
En JavaScript, una clase puede ser creada en diferentes formas, sin embargo, formalmente, se crea empleando la palabra reservada class, de acuerdo a la siguiente sintaxis:
Todos los elementos de una clase (los elementos mostrados en la sintaxis) son opcionales. Así, es posible crear una clase sin ningún elemento (una clase vacía):
Y, aunque es una clase vacía, se pueden crear objetos (instancias) de esa clase.
Para crear un objeto (una instancia) de una clase se emplea la palabra reservada new, de acuerdo a la siguientes sintaxis:
Así, para crear un objeto ('obj1') de la clase Vacio se escribe:
Como se puede ver, en JavaScript un objeto se representa por llaves. Como en este caso "obj1" es un objeto vacío, las llaves están vacías.
Cada uno de los objetos que se crean a partir de una clase son únicos, aunque tengan los mismos datos, así por ejemplo, si se crea otro objeto vacío:
Y se compara con el objeto creado previamente:
El resultado es falso, porque aunque ambos son objetos vacíos de la misma clase, cada uno tiene su propia dirección de memoria y cuando se comparan objetos, lo que se compara es esa dirección de memoria.
Una vez creado un objeto de una clase, es posible (en JavaScript) añadirle propiedades y métodos. Por ejemplo en las siguientes instrucciones se añaden las propiedades "r=2.3" y "s=4.1" al objeto "obj1" y las propiedades "x=5.2" y "y=7.1" al objeto "obj2":
Y como cada objeto es independiente (aunque sean de la misma clase) las propiedades añadidas a un objeto, no afectan al otro.
Debido a que no se pueden crear dos o más clases con el mismo nombre, cuando se intenta modificar una clase (en la calculadora JavaScript) se produce un error.
Cuando se programa (cuando se codifica) casi siempre es necesario corregir o modificar el progrma y como una clase estándar no puede ser modificada, las clases (en la calculadora JavaScript) se crearan como clases anónimas de acuerdo a la siguiente sintaxis.
Por supuesto, una clase vacía no es de utilidad práctica. Para que una clase sea de utilidad práctica debe contar con algunas propiedades y métodos.
Por ejemplo, se puede crear la clase "Persona", con las propiedades "nombres" (valor por defecto "Carlos") y "apellidos" (valor por defecto "Pérez") y el método "nombreCompleto", que devuelva el nombre completo de la persona:
Observe que en el método "nombre_completo", para acceder a las propiedades del objeto, se escribe this delante del nombre de las propiedades. Como ya se explicó previamente, this es la variable en la que JavaScript recibe (automáticamente) el objeto desde el cual se ha llamado al método.
Creando un objeto de esta clase ("persona1") y llamando al método "nombreCompleto" se obtiene:
Asignando a "persona1" otros nombres y apellidos y llamando al método "nombreCompleto", se obtiene:
No es muy útil crear objetos que tengan propiedades con los mismos valores (como se ha hecho hasta ahora). Por el contrario, en la práctica, las propiedades de los objetos (el estado de los objetos) son casi siempre diferentes.
Para crear un objetos donde sea posible asignar valores diferentes a sus propiedades, se debe programar el constructor de la clase.
El constructor es un método especial (una función) que se ejecuta automáticamente cuando se crea una instancia de la clase (cuando se crea un objeto) y es empleado para asignar valores iniciales a las propiedades del objeto que está siendo creado, así como realizar algunas validaciones y ejecutar los procedimientos iniciales que sean necesarios para dejar el objeto listo para su uso.
Así, en el siguiente ejemplo, se crea la clase "Persona" que, al momento de crear el objeto, permite asignar los nombres, apellidos y cédula de identidad (ci) del objeto. Además, al igual que en los ejemplos anteriores la clase cuenta con el método "nombreCompleto", sólo que ahora es creado con la palabra get por delante. Los métodos creados de esta manera se conocen como métodos getter y se caracterizan porque sólo devuelven un resultado, no reciben ningún dato y son llamados como se llama a una propiedad, es decir escribiendo únicamente el nombre (sin los paréntesis).
A partir de este ejemplo, si un método no recibe ningún dato y sólo devuelve un resultado, debe ser declarado como un método getter.
Ahora, con esta clase y gracias a su constructor, se crean dos objetos ("p1" y "p2") con valores diferentes para cada uno de ellos:
En la programación orientada a objetos (POO), una clase puede (y generalmente lo hace) heredar las propiedades y métodos de otra clase. De hecho (por defecto) todas las clases en JavaScript y en consecuencia, todos los objetos, heredan automáticamente de la clase predefinida Object.
Para que explícitamente una clase herede de otra (extienda a otra) se emplea la palabra reservada extends, de acuerdo al siguiente sintaxis
Cuando la clase padre (la clase base) tiene un constructor y la clase hija declara nuevas propiedades, debe tener su propio constructor y en el mismo, lo primero que se debe hacer es llamar al constructor de la clase padre. Para llamar al constructor de la clase padre, se emplea el método especial super (super permite, también, llamar a los métodos de la clase padre, con la sintaxis: super.método()).
Por ejemplo, en la siguiente instrucción se crea la clase Estudiante, que hereda de la clase Persona (extiende la clase Persona) añadiendo una nueva propiedad: "carrera":
Con el cual se puede crear, por ejemplo, el objeto "estudiante1":
Y desde este objeto, se puede llamar tanto a los métodos y propiedades del padre ("nombreCompleto" y "ci") como a su propiedad ("carrera"):
Como se dijo, todas las clases en JavaScript heredan, automáticamente, de la clase Object, por lo tanto, todos los objetos heredan los métodos dinámicos de esta clase.
De los métodos heredados de Object, son de particular interés los métodos valueOf y toString. El método valueOf (empleando ya en el capítulo previo) es llamado automáticamente por JavaScript, cuando un objeto forma parte de una expresión. Si es posible, JavaScript emplea el valor devuelto por valueOf para realizar las operaciones.
Por defecto, el método valueOf de Object, simplemente devuelve el objeto desde el cual es llamado, lo que no es de utilidad práctica. Por ese motivo las clases que lo heredan (todas las clases) deben sobreescribirlo, para que devuelva un valor que sea de utilidad práctica en las expresiones en las cuales aparecen sus objetos.
Igualmente, el método toString, es llamado automáticamente por JavaScript cuando necesita un texto que represente al objeto. Por defecto el método toString, de la clase Object, devuelve el texto "[object Object]", que no es de utilidad práctica. Por esa razón, este método también debe ser redefinido (reescrito) en las clases que lo heredan (en todas las clases) para que devuelva un valor (un string) que represente adecuadamente al objeto.
Por ejemplo, se pueden sobreescribir estos métodos en la clase Estudiante, de manera que valueOf devuelva (solo a manera de ejemplo) la carrera del estudiante y que toString devuelva su nombre completo:
Ahora, si se crea un objeto de esta clase:
Y se emplea en una expresión, se obtiene:
Porque, JavaScript, al tratarse de una expresión llama automáticamente al método valueOf, con lo que el nombre del objeto es reemplazado por la carrera del estudiante.
Si se requiere la cadena (string) del objeto, como cuando el objeto forma parte de una plantilla literal:
JavaScript llama automáticamente al método toString, con lo que el objeto es reemplazado con el nombre completo del estudiante.
Las expresiones condicionales son aquellas que involucran operadores aritméticos, relacionales y/o lógicos y que devuelven un valor booleano o un valor que puede ser interpretado como booleano.
Algunos problemas condicionales simples pueden ser resueltos empleando dírectamente expresiones condicionales. Por ejemplo, para dertermnar si un número es par (o impar) es suficiente verificar que el residuo de su división entre cero, sea cero.
Para resolver un problema simple como este (empleando una clase) se tienen por lo menos 3 opciones:
El código que resuelve el problema, con la primera opción (clase independiente), es:
La cual permite crear objetos de esta clase y determinar si son pares o impares. Por ejemplo, a continuación se crea el objeto "x" con el números 34 y se determina si es par e impar:
Pero si se emplea el objeto en una expresión, por ejemplo si se le suma un número, o en una plantilla literal:
JavaScript reemplaza (en ambos casos) el objeto "x" por la cadena "[object Object]".
En el primer caso (la suma), JavaScript llama primero a valueOf, pero como el resultado es un objeto (el objeto original), que no puede ser sumado, llama a toString (que devuelve "[object Object]"), entonces concatena (suma) esa cadena a "7" (es decir la cadena del número 7).
En el segundo caso, JavaScript llama a toString y reemplaza "[object Object]" en lugar de "${x}".
En consecuencia, es necesario sobreescribir los métodos valueOf y toString, de manera que devuelvan el número y el texto del número:
Donde los métodos getter "esPar" y "esImpar" siguen funcionando como antes, pero ahora, cuando el objeto aparece en una expresión es reemplazado por su valor numérico y cuando es empleado en una plantilla literal o en cualquier expresión que requiera un texto, es reemplazado por el número en formato de cadena:
El código que resuelve el problema con la segunda opción (clase heredada), es:
Note que la nueva clase no tiene un constructor propio, porque la clase heredada no añade ninguna propiedad. Por lo tanto la clase heredada emplea el constructor de la clase padre ("Number"), que simplemente recibe el número.
Tampoco es necesario sobreescribir los métodos valueOf y toString, porque son heredados de la clase Number y en consecuencia son los métodos correctos para trabajar con números. De hecho, la principal razón por la que no es necesario definir una nueva propiedad en la clase heredada, es porque el método valueOf de la clase Number devuelve el número (el valor primitivo).
Creando el objeto "z", de esta clase, se obtienen los resultados esperados:
Para la tercera opción, no es suficiente añadir el método a la propiedad prototype de la clase Number, como se ha hecho en los anteriores capítulos, porque de esa forma sólo es posible añadir métodos estándar, no métodos getter/setter. Para añadir métodos getter/setter se debe emplear el método estático defineProperty de la clase Object, de acuerdo a la siguiente sintaxis:
Donde solo es imprescindible definir un método getter (get) o un método setter (set), el resto las propiedades son opcionales.
Por defecto enumerable y configurable son falsos, lo que implica que él o los métodos definidos no aparecen como propiedades de la clase (enumerable) y que no pueden ser modificados (configurable). Dado que, casi siempre, es necesario modificar o corregir el código, es prácticamente imprescindible (por lo menos en la calculadora Javascript) colocar la propiedad configurable en true.
Con el método defineProperty se puede añadir también una propiedad a la clase, de acuerdo a la siguiente sintaxis:
Donde sólo es necesario asignar el valor a la propiedad value. El resto de las campos son opcionales y por defecto tienen un valor igual a false, que, en el caso de writable, significa que el valor asignado a la propiedad no puede ser modificado.
Para definir dos o más métodos (o propiedades) al mismo tiempo, una mejor alternativa es el método estático defineProperties, que tiene la sintaxis:
Donde, cada propiedad/método, puede tener todos los campos mostrados en defineProperty.
Como en este caso se quiere añadir dos métodos, la opción más adecuada es defineProperties:
Al tratarse de la clase estándar Number, no es imprescindible crear objetos de esa clase, pues los métodos pueden ser llamados directamente desde los números (como se vio en capítulos previos):
A partir de este capítulo, algunos algoritmos serán presentados en forma de diagramas de flujo. Dichos diagramas han sido elaborados con la ayuda de la librería GoJS.
En los diagramas de flujo se emplearán las formas geométricas estándar. Así, el inicio y el fin se representan con nodos rectangulares de lados redondeados (píldoras):
La entrada de datos y la salida de resultados, se representan, respectivamente, con un paralelogramo y un rectángulo de fondo ondulado:
Para las condiciones (preguntas) se emplea un rombo:
El símbolo para las instrucciones (procesos, operaciones, comandos) es un rectángulo:
Los módulos (subrutinas) se representan con un rectángulo con dos líneas verticales adicionales, a ambos lados:
Aunque no es propiamente un estándar (pero sí una forma ampliamente utilizada en la práctica) para representar la estructura for, se emplea un rectángulo de lados angulares:
Para conectar dos puntos separados del diagrama, se emplean círculos:
Por ejemplo, el siguiente diagrama, corresponde al algoritmo para calcular (y devolver) el perímetro y área de un círculo de radio "r":
Como se puede ver, para calcular el perímetro y área de un círculo, se debe recibir el radio del círculo (r), luego, con el radio recibido se calcula el perímetro (p) y el área (a). Finalmente, se devuelven el perímetro (p) y el área (a) calculados, con lo que el proceso concluye.
Las expresiones matemáticas en los diagramas de flujo, se escribirán empleando los operadores y funciones de JavaScript, pero sin Math en las funciones y constantes matemáticas (como se ha hecho en el ejemplo).
Una vez elaborado el diagrama de flujo, la codificación (el escribir el programa propiamente) es principalmente un proceso mecánico, pues la lógica, que es la secuencia de acciones que resuelven el problema, ya ha sido resuelta en el diagrama de flujo.
Así, el código correspondiente a este diagrama de flujo, implementado como una clase heredada, es:
Para devolver los dos resultados se ha empleado un objeto literal. Como se recordará, un objeto literal se crea encerrando las propiedades del objeto entre llaves. Cada propiedad se crea escribiendo su nombre y su valor. Las propiedades se separan con comas.
Creando un objeto de esta clase, con un radio igual a 2.54 y llamando al método paCirculo, se obtiene:
Los diagramas de flujo, en GoJS, se crean como se muestra en el siguiente video, donde se elabora el diagrama de flujo para sumar dos números:
Además, cualquier acción puede ser deshecha (undo) con el atajo estándar Ctrl+Z y rehecha (redo) con el atajo estándar Ctrl+Y.
En los teléfonos y tabletas se trabaja de la misma forma, sólo que varias de las opciones, como: copiar (Copy), pegar (Paste), cortar (Cut), eliminar (Delete), deshacer (Undo), rehacer (Redo), etc., están disponibles a través del menú contextual que aparece cuando se hace una pulsación larga en uno de los elementos de la gráfica. Además, en los ejercicios, para evaluar la gráfica (con Shift+Enter) debe estar seleccionado el texto de un nodo (de cualquier nodo), para que aparezca el teclado y sea posible pulsar las teclas Shift+Enter.