13. Nucleo JavaScript: variables, sentencias, tipos de datos y operadores

Introducción

JavaScript es un lenguaje de programación.

En nuestro caso, JavaScript formará parte de nuestras páginas web.

JavaScript permite que una página web sea mas dinámica e interactiva. JavaScript permite añadir, eliminar o cambiar elementos de nuestra web una vez que está cargada en el navegador.

Comentarios

// esto es un comentario de una linea

/* esto también es un comentario de una linea */ 

/* esto es un
 * comentario de
 * varias lineas
 */

Variables 

Cuando creamos un programa informático, los datos se almacenan en variables.

Las variables se suele almacenar en la memoría RAM del dispositivo informático donde se ejecuta el programa.

Imaginemos que queremos hacer un programa con JS que sume dos números:

var a = 3;
var b = 5;
var c = a + b;

En el ejemplo anterior, primeramente declaramos la variable "a" (identificador) y la inicializamos con valor "3". Despues declaramos la variable "b" (identificador) y la inicializamos con valor "5".  Por último, declaramos la variable "c" (identificador) y la inicializamos con el resultado de sumar a + b. La variable "c" tendra valor "8".

En el anterior ejemplo, hemos declarado las variables y al mismo tiempo las inicializabamos, pero también se puede declarar e inicializar la variable por separado. El siguiente código produciría el mismo resultado que antes:

var a;
a = 3;
var b;
b = 5;
var c;
c = a + b;

Sentencias

Una sentencia es una instrucción de un programa.

Las sentencias en JavaScript se distinguen porque llevan un punto y coma (;) al final.

Tipos de datos simples

• Números. numeros enteros o decimales.

          Ejem:   var a = 5; var b = 0.01;

• Cadenas de caracteres (o "strings" en inglés): textos. Podemos usar comillas simples o dobles.

          Ejem:   var a = "hola mundo"; var a = 'hola mundo';

• Booleanos. Dos valores: verdadero (true) y falso (false).

          Ejem:   var a = true; var b = false;

• Null (nulo). Indica ausencia de valor.

          Ejem: var a = null;

• Undefined (indefinido). Indica ausencia de valor.

          Ejem: si declaramos una variable sin inicializarla, por ejemplo:

                      var a;

            el valor de la variable "a" será "undefined".

Tipo de datos compuestos

Los tipos de datos compuestos son datos que están compuestos de otros datos.

• Array (también llamada "tabla" en español): es una lista de datos.

          Ejem.: var marcas = ["fiat", "ford", "renault"];
                     var edades = [23, 58, 39, 14];
              
     En las anteriores sentencias, hemos definido declarado 2 arrays que contienen el mismo tipo de datos (el el primero cadenas de caracteres, y en el segundo números enteros), es lo usual, pero también es posible incluir en una array valores de distinto tipo, e incluso expresiones con operandos:

            Ejem: var a = 5;
                      var edades = [a, 3 + 4,"hola"];

         Es posible también inicializar una variable con un array vacío:

            Ejem: var a = [];

         Imaginemos que queremos cambiar el valor de uno de los elementos del array. Para hacer rereferencia a cada uno de los elementos de un array, usamos los corchetes ([]). Ejem:

                marcas[0] = "peugeot"; // "peugeot" sustituye a "fiat"
       marcas[2] = "seat"; // "seat" sustituye a "renault"

         Al número que aparece entre corchetes se le llama indice o clave ("key" en inglés) e indica la posición de elemento del array al que nos queremos referir. Para referirnos al primer elemento de un array usamos el número "0", para referirnos al segundo usaremos el número "1", y así...
 

• Objetos: 

          Los objetos son muy parecidos a los arrays, pero el indice que cada uno de los elementos puede ser una cadena de caracteres. A cada uno de los elementos que hay dentro de un objeto se les llama "propiedades". Para inicializar un Objeto usaremos las llaves ({ }) en vez de los corchetes.


            Ejem:
         var libro = {
           titulo: "Jarama",
           paginas: 200
         };

           Para referirnos a cada uno de los elementos de un objeto, podemos usar los corchetes ([]) como en los arrays, o un punto (.).

             Ejem:
         libro.titulo = "El Jarama";
         libro["paginas"] = 203;
               

         Como en los arrays, también es posible inicializar un objeto vacio:

         var libro = {};

Operadores aritméticos

• Suma (+): suma dos o más valores, y produce un nuevo valor.

          Ejem: 3 + 2 + 7;

         Si usamos el operador "+" con cadenas de caracteres, las cadenas de caracteres se unen, formando una sola cadena de caracteres. A esta operación se le llama "concatenar".

          Ejem: var a = "hola" + "mundo";// "a" tendra valor "holamundo"

• Resta (-): resta dos valores.

          Ejem: var a = 7 - 4; // "a" tendra valor 3.

• Multiplicación (*): multiplica dos valores.

          Ejem: var a = 3 * 2; // "a" tendrá valor 6

• División (/): divide dos valores.

        Ejem: var a = 6 / 2; // "a" tendrá valor 3

Operadores aritméticos abreviados

• Incremento (++): incrementa el valor de la variable en 1.

          Ejem: var a = 3; a++; // a valdrá 4

• Decremento (--): decrementa el valor de la variable en 1.

          Ejem: var a = 3; a--; // a valdrá 2

• Más igual (+=): 

          Ejem: var a = 3;
                    a += 4; // equivale a var a = a + 4;

• Menos igual (-=): 

          Ejem: var a = 3;
                    a -= 4; // equivale a var a = a - 4;

• Multiplicar igual (*=): 

          Ejem: var a = 3;
                    a *= 4; // equivale a var a = a * 4;

• Dividir igual (/=): 

          Ejem: var a = 3;
                    a /= 4; // equivale a var a = a / 4;

Operadores relacionales

Los operadores relaciones comparan dos valores devolviendo como resultado "true" o "false". Suelen usarse en estructuras de control.

• Menor que (<):

          Ejem: 2 < 3; // esta operación devuelve valor "true"

• Mayor que (>):

          Ejem: 5 > 3; // esta operación devuelve valor "true"

• Menor o igual que (<=):

          Ejem: 5 <= 3; // esta operación devuelve valor "false"

• Mayor o igual que (>=):

          Ejem: 8 >= 10; // esta operación devuelve valor "false"

• Igual que (==):

          Ejem: 10 == 10; // esta operación devuelve valor "true"

• Distinto de (!=):

          Ejem: 9 != 10; // esta operación devuelve valor "true"

Operadores booleanos o lógicos

Los operadores lógicos realizan operaciones entre operandos con valor "true" o "false". Suelen usarse en estructuras de control.

• Operador "y" (&&):

        Ejem:  true && false; //esta operación devuelve "false"

• Operador "o" (||):

        Ejem: true || false; //esta operación devuelve "true".

• Operador "no" (!): en este caso el número de operandos es sólo 1.

           Ejem: !true; // esta operación devuelve "false"

Precedencia de operadores

¿Cual será el resultado de la siguiente operación?

var a = 3 + 4 * 5;

Opción 1: 35;
Opción 2: 23; 

Respuesta: 23. Porque la multiplicación se realiza antes que la suma. 

Se puede forzar que el resultado sea 35 asociando valores a través del operador "()":

var a = (3 + 4) * 5 ;

El siguiente gráfico resume la precedencia de operadores: