3.2. Elementos de Programación

Variables

Las variables o identificadores se utilizan para almacenar valores en un programa; cada variable tiene un nombre que permite referenciarla, nombre que se da en base a unas reglas. En JavaScript un nombre o identificador debe comenzar siempre con una letra o un subrayado; los siguientes caracteres pueden ser dígitos o letras; y nunca se puede usar una palabra reservada como identificador (por ejemplo: true, false, null y undefined).

Una variable se puede declarar en JavaScript, de dos formas:

En el último caso no es imprescindible escribir var, pero es necesario por razones de compatibilidad entre navegadores.

Ejemplos validos de declaración de variables son:

var mi_variable1 = 3;
var mi_variable2 = 5;
var resultado = mi_variable1 +  mi_variable2

JavaScript tiene la peculiaridad de ser un lenguaje tipificado débilmente, esto es, se puede declarar una variable que ahora sea un entero y más adelante una cadena.; Por lo cual es responsabilidad del programador cuidar su contenido.

Tipos de variables

Aunque todas las variables de JavaScript se crean de la misma forma (mediante la palabra reservada var), la forma en la que se les asigna un valor depende del tipo de valor que se quiere almacenar (números, textos, etc.).

Variables numéricas

Almacenan valores numéricos enteros (integer en inglés) o decimales (float en inglés). En este caso, el valor se asigna indicando directamente el número entero o decimal. Los números decimales usan el carácter ( . punto) en vez de  ( , coma) para separar la parte entera y la parte decimal:

var iva = 10;
var total = 234.65;
var distancia = 4.5E06;

JavaScript define 3 valores especiales muy útiles cuando se trabaja con números. En primer lugar se definen los valores ±Infinity para representar números demasiado grandes (positivos y negativos) y con los que JavaScript no puede trabajar.

var variable1 = 3,
var variable2 = 0;
alert(variable1/variable2);
// muestra "Infinity";

El otro valor especial definido por JavaScript es NaN, cuyo nombre viene de “Not a Number”. De esta forma, si se realizan funciones matemáticas con variables no numéricas, el resultado será de tipo NaN.

Para manejar los valores NaN, se utiliza la función relacionada isNaN(), que devuelve true si el parámetro que se le pasa no es un número:

var variable1 = 3;
var variable2 = 'hola';
isNaN(variable1); //    false
isNaN(variable2); //    true
isNaN(variable1 + variable2); // true

Cadenas de texto

Almacenan caracteres, palabras y/o frases de texto. Para asignar el valor a la variable, se encierra el valor entre comillas dobles o simples, para delimitar su comienzo y su final:

var instituto = 'Instituto Tecnológico de Veracruz';
var carrera  = 'Ingeniería en Administración';
var semestre = 'Quinto Semestre';

Algunos caracteres especiales son difíciles de incluir en una variable de texto (tabulador, ENTER, etc.) Por otra parte, como las comillas se utilizan para definir el contenido de la variable, no es posible incluir comillas dentro de la propia cadena de texto.

Para resolver estos problemas, JavaScript define un mecanismo para incluir de forma sencilla caracteres especiales y problemáticos.


Mecanismo para incluir caracteres especiales
Si se incluye... En realidad se está incluyendo...
\n Una nueva línea
\t Un tabulador
\’ Una comilla simple
\” Una comilla doble
\\ Una barra inclinada

Variables de tipo boolean

Son un tipo de variables que solo pueden tomar uno entre dos valores especiales que representan el valor 'verdadero' y el valor 'falso'.

var variable1 = true;
var variable2 = false;

JavaScript convierte automáticamente el resto de variables a sus valores boolean si es necesario. En el caso de los números, el 0 se convierte en false y cualquier otro número distinto de 0 se convierte en true.

Conversión entre tipos de variables

JavaScript incluye un método llamado toString() que permite convertir variables de cualquier tipo a variables de cadena de texto.

var variable1 = true;
// devuelve 'true' como cadena de texto
variable1.toString();
var variable2 = 5;
// devuelve '5' como cadena de texto
variable2.toString(); 

JavaScript también incluye métodos para convertir los valores de las variables en valores numéricos. Los métodos definidos son parseInt() y parseFloat(). Cada uno de ellos convierte la variable que se le indica en un número entero o un número decimal. La conversión numérica de una cadena se realiza carácter a carácter empezando por el de la primera posición. Si ese carácter no es un número, la función devuelve el valor NaN.

Si el primer carácter es un número, se continúa con los siguientes caracteres mientras estos sean números.

var variable1 = 'hola';
parseInt(variable1); // devuelve NaN
var variable2 = '34';
parseInt(variable2); // devuelve 34
var variable3 = '34hola23';
parseInt(variable3); // devuelve 34
var variable4 = '34.23';
parseInt(variable4); // devuelve 34

En el caso de parseFloat(), el comportamiento es el mismo salvo que también se consideran válidos los caracteres que indican la parte decimal del número:

var variable1 = 'hola';
parseFloat(variable1); // devuelve NaN
var variable2 = '34';
parseFloat(variable2); // devuelve 34.0
var variable3 = '34hola23';
parseFloat(variable3); // devuelve 34.0
var variable4 = '34.23';
parseFloat(variable4); // devuelve 34.23

Palabras reservadas

Son palabras especiales que se utilizan para aumentar la legibilidad y separar las entidades sintácticas. Estas palabras no pueden usarse como identificadores.

La siguiente tabla muestra todas las palabras reservadas existentes en JavaScript 1.7, estas palabras tienen o tendrán un significado especial dentro del lenguaje:

Palabras reservadas en JavaScript 1.7
break delete function return typeof
case do if switch var
catch else in this void
continue finally instanceof throw while
default for new try with

Palabras reservadas para desarrollos futuros por la especificación  ECMAScript 262

abstract double implements private throws
boolean enum import protected transient
byte export int public volatile
char extends interface short  
class final long static  
const float native super  
debugger goto package synchronized  

Constantes

Se definen con la palabra clave const. La sintaxis de un identificador de constante es la misma que la de un identificador de variable: debe empezar con una letra o un guión bajo '_' [underscore] y puede contener caracteres alfanuméricos y/o guiones bajos.

const x = 48;

Una constante es asignada en el momento de la declaración y no puede cambiar el valor mediante una asignación o ser re-declarada mientras el script está en ejecución.

Las reglas de ámbito [scope] para constantes son las mismas que para las variables, excepto que la palabra clave const es siempre requerida, incluso para constantes globales. Si la palabra clave es omitida, se asume que el identificador representa a una variable.

No se puede declarar una constante con el mismo nombre de una función o de una variable en el mismo ámbito [scope].

Existen tres constantes predefinidas: true, false y undefined.

Expresiones

Una expresión es cualquier conjunto válido de literales, variables, operadores y expresiones que se evalúan como un único valor; el valor puede ser un número, una cadena o un valor lógico (booleano).

Conceptualmente, hay dos tipos de expresiones: las que asignan un valor a una variable y las que simplemente tienen un valor.

Por ejemplo, la expresión x = 7 es una expresión que asigna a x el valor 7. Esta expresión se evalúa como siete. Dicha expresión usa un operador de asignación.

Por otra parte, la expresión 3 + 4 simplemente se evalúa como siete; no se realiza ninguna asignación. Los operadores usados en dichas expresiones se les llaman simplemente operadores.

JavaScript tiene los siguientes tipos de expresiones:

Operadores

Símbolo matemático que denota un conjunto de operaciones que han de realizarse. En JavaScript los operadores permiten manipular el valor de las variables, realizar operaciones matemáticas o de manejo de texto con sus valores y comparar diferentes variables. De esta forma, los operadores permiten a los programas realizar cálculos complejos y tomar decisiones lógicas en función de comparaciones y otros tipos de condiciones.

Operador de asignación.

Un operador de asignación asigna un valor a su operando izquierdo basándose en el valor de su operando derecho. El operador básico de asignación es el igual (=), el cual asigna el valor de su operador derecho a su operador izquierdo. Esto es, x = y asigna el valor de y a x.

El resto de los operadores de asignación son abreviaturas de operaciones estándar

Operadores de asignación
Operador abreviado Significado
x += y x = x + y
x -= y x = x - y
x *= y x = x * y
x /= y x = x / y
x %= y x = x % y

Operadores de comparación

Un operador de comparación compara sus operandos y devuelve un valor lógico en función de si la comparación es verdadera.

Los operandos pueden ser valores numéricos, de cadena de caracteres, lógicos u objetos. Las cadenas se comparan basándose en el orden lexicográfico estándar, usando los valores Unicode.

Si dos operandos no son del mismo tipo, JavaScript intentará convertir los operandos a un tipo apropiado para la comparación, excepto para los operandos === y !==. Esto acostumbra a resultar en una comparación numérica. La tabla a continuación describe los operadores de comparación.

Operadores de comparación.
Operador Descripción Ejemplos que devuelven verdadero1
Igual
(==)
true si los operandos son iguales. 3 == var1
'3' == var1
3 == '3'
Distinto
(!=)
true si los operandos no son iguales. var1 != 4
var2 != '3'
Igual estricto (===) true si los operandos son iguales y del mismo tipo. 3 === var1
Distinto estricto
(!==)
true si los operandos no son iguales y/o no son del mismo tipo. var1 !== '3'
3 !== '3'
Mayor que
(>)
true si el operando izquierdo es mayor que el derecho. var2 > var1
'12' > 2
Mayor o igual que
(>=)
true si el operando izquierdo es mayor o igual que el derecho. var2 >= var1
var1 >= 3
Menor que
(<)
true si el operando izquierdo es menor que el derecho. var1 < var2
'12' < '2'
Menor o igual que
(<=)
true si el operando izquierdo es menor o igual que el derecho. var1 <= var2
var2 <= 5

1Estos ejemplos asumen que var1 = 3 y var2 = 4.

Operadores aritméticos

Los operadores aritméticos toman valores numéricos (tanto literales como variables) como operandos y devuelven un único valor numérico. Los operadores aritméticos estándar son el de suma (+), el de resta (-), el de multiplicación (*) y el de división (/). Estos operadores trabajan igual que en la mayoría de lenguajes de programación, excepto el operador / que devuelve la división real (de coma flotante), no la división entera como sucede en C o en Java.

< class='-bordered tabla'> Operador Significado + Suma - Resta * Multiplicación / División % Módulo ++ Incremento en uno -- Decremento en uno - Negación

Por ejemplo:

1/2 //devuelve 0.5 en JavaScript
1/2 //devuelve 0 en Java

Operadores lógicos

Los operadores lógicos son generalmente empleados con valores lógicos (booleanos); estos operadores devuelven un valor booleano. Sin embargo, los operadores && y || realmente devuelven el valor de uno de sus operandos, por esto si se emplean con valores no booleanos, podrían devolver un valor no booleano. Los operadores lógicos se describen en la siguiente tabla.


< class='-bordered tabla'> Operadores lógicos. Dado x = 6, y = 7 Operador Descripción Ejemplo Resltado && and (x < 10 && y > 1) true || or (x==5 || y==5) false ! not !(x==y) true

Operadores de cadena de caracteres (String)

Además de los operadores de comparación, los cuales pueden ser empleados con los valores de cadena, el operador de concatenación (+) genera otra cadena que es la unión de los dos operandos de tipo cadena. Por ejemplo, 'mi ' + 'cadena' retorna la cadena 'mi cadena'.

El operador abreviado de asignación += también puede usarse para concatenar cadenas. Por ejemplo, si la variable micadena tiene el valor 'Vera', la expresión micadena += 'cruz' se evalúa como 'Veracruz' y asigna este valor a micadena.

Sentencias condicionales

En JavaScript, como en muchos lenguajes, la sentencia para verificar si una condición se cumple y realizar una acción u otra es if. Su sintaxis es la siguiente:

if(condición) {   instrucciones si se cumple  }
    else { instrucciones si no se cumple }

Ejemplo: El código proporciona una aplicación de la sentencia if.


See the Pen NNPawm by JOSE (@albatros) on CodePen.


switch

Esta expresión se utiliza cuando tenemos múltiples posibilidades como resultado de la evaluación de una sentencia. La sintaxis se presenta a continuación:

switch( expresión ){
   case valor1: sentencias;
        break;
   case valor2: sentencias;
        break;
   case valorn: sentencias;
        break;
   default: sentencias;
       break; 
 } 

Ejemplo: Aproximación a la predicción de los signos del zodiaco


See the Pen PNwJKy by JOSE (@albatros) on CodePen.


Ciclos

Los ciclos son sentencias esenciales en cualquier lenguaje de programación. JavaScript cuenta con tres: while, do while y for. Hay cuatro partes en todos los bucles. Inicialización, cuerpo, iteración y condición.

while: Ejecuta repetidamente el mismo bloque de código hasta que se cumpla una condición de terminación.

[inicialización;]
while(condicion[es]) {
  cuerpo;
  [iteración;]
}     

do..while: Como mínimo siempre se ejecutará el cuerpo del bucle una vez, en el bucle while es posible que no se ejecute ni una sola vez el contenido de este.


[inicialización;]
  do{
   cuerpo;
   [iteración;]
}while(condición);

for:Es el ciclo más común, en el una variable se fija a un valor inicial, que se actualiza con cada ciclo, y cuando el valor cumple una determinada condición, el ciclo se termina. La sintaxis del ciclo es:

for ([inicialización]; [condición]; [expresión]>){ 
        Instrucción o bloque de instrucciones;
}

Hay dos formatos más de ciclos  for, aunque no todas se aplican en todos los navegadores y se expondrán en incisos posteriores.

break: La sentencia break se puede colocar dentro de un ciclo o ciclos anidados. Cuando se ejecuta la sentencia break se abandona el ciclo más interno. A todos los efectos la sentencia breakactúa como un salto a la instrucción siguiente al ciclo en el que se ejecuta.

continue: La sentencia continue, no abandona el ciclo si no hace que se ejecute la siguiente iteración. En el ciclo whilela ejecución del continue hace que el flujo del programa salte a la condición. En el bucle for la ejecución del continue ejecuta la expresión de incremento (decremento), para después continuar normalmente con la condición. Es decir, la ejecución del continue evita que se ejecute durante una interacción el resto del cuerpo del ciclo.

Funciones

Una función es un bloque de código con un nombre. Cada vez que se usa el nombre, se llama a la función y el código de la función es ejecutado. Las funciones pueden llamarse con valores, conocidos como parámetros, que se usan como variables.

Las funciones tienen dos objetivos: organización del programa (archivo o documento) y ejecución del código de la función.

El nombre de una función se escribe inmediatamente después del comando function. Todos los nombres de funciones deben ser únicos y diferentes de los nombres de los comandos que usa JavaScript. No puede haber dos funciones con el mismo nombre.

La lista de parámetros (argumentos) de una función se separa por comas. La función usa esos parámetros en las sentencias de su cuerpo que la configuran.

Los argumentos que se le pasan a una función no pueden ser cambiados en su interior pues se pasan por valor.

Hay tres enfoques principales para la creación de funciones en JavaScript: declarativo/estático, dinámico/anónima, y literal.

Muchas tareas de programación que se puede lograr con el enfoque declarativo. Sin embargo es importante comprender el impacto de cada tipo de declaración antes de usarlas.

La sintaxis de las funciones declarativas es la siguiente:

function nombreFunción(){
   sentencia1;
   sentencia2;
   ...;
   ...;
   [return]
} 

Los parámetros de una función se pasan por valor, los arrays se pasan por referencia.

Nota:Las funciones pueden regresar más de un valor en la versión 1.7. Sin embargo Internet Explorer no acepta completamente esta especificación.

Javascript tiene por característica no tipificar sus variables y cuando de operaciones matemáticas  en particular en la suma dicha característica podría producirnos errores inesperados.

Ejemplo: Calcular las funciones trigonometricas seno y coseno mediante las siguientes series de Taylor. Recuerde que x es un valor en radianes

Solución:

Se presentan las funciones factorial, radianes y decimal

function factorial(n) {
   if(n > 0) {
     returnn * factorial(n - 1);
   } elsereturn1;
}

function radianes( grados) {
  returnMath.PI* grados/180;
}

function decimal(numero,cantDecimales){
 if(cantDecimales > 0){ 
   var i = 0;
   var aux = Math.pow(10, cantDecimales);
  numero = Math.round(numero * aux) /aux;
 }
 return numero;
}

Serie de Taylor

Cálculo del seno mediante la aproximación de Taylor

function seno( angulo ) {
  var error = 0.00000001;
  var x = radianes( angulo % 360);
  var anterior = 1;
  var nuevo = 0;
  var n = 0;
  var m = 0;
  while(Math.abs(anterior - nuevo) >= error) {
       n = 2 * m +1;
       anterior = nuevo;
       nuevo+= Math.pow(-1,m)/factorial(n) 
             * Math.pow(x, n);
       ++m;
  }
  return nuevo;}

Cálculo del coseno mediante la aproximación de Taylor

function coseno( angulo ) {
  var error = 0.00000001;
  var x = radianes( angulo % 360);
  var anterior = 1;
  var nuevo = 0;
  var n = 0;
  var m = 0;
  while(Math.abs(anterior - nuevo) >= error) {
     n = 2 * m; 
	 anterior = nuevo;
	 nuevo += Math.pow(-1,m)/factorial(n)
              * Math.pow(x, n);
     ++m; 
  }
  return nuevo;
}

Impresión de resultados

function calcular() {
	var x = document.getElementById('grados').value;
	var dec = 5;
  var senox   = decimal(seno( x ), dec);
  var cosenox = decimal(coseno( x ), dec);
	document.getElementById('senox').innerHTML  = senox;
	document.getElementById('cosenox').innerHTML= cosenox;
}

Aplicación del código javaScript desde HTML


See the Pen dMPVMR by JOSE (@albatros) on CodePen.