JavaScript IV - Tipos de valores y sus operadores I

Valores y datos

Un ordenador se compone esencialmente  del binomio de hardware y software, pero lo realmente importante de nuestros equipos son los datos, estos se pueden leer, modificar, crear, borrar. Lo que no es un dato no existe, pero lo que existe, es porque está almacenado en algún tipo de memoria.

Las máquinas almacenan la información en largas cadenas de bits sin importar el dato en sí, todo se reduce a bits, y un bit no es más que un elemento con dos valores, nos han dicho siempre que son unos y ceros, pero estos valores binarios a su vez puede tomar otras formas como verdadero o falso, encendido o apagado… Cualquier información puede representarse como una secuencia de unos y ceros.
 
Los valores

En la inmensidad de unos y ceros guardados en nuestros dispositivos de almacenamiento, de memoria volátil o no volátil, para su uso se fragmenta en porciones de información. En nuestro estudio de JavaScript a estos fragmentos los llamaremos valores.
En la actualidad se trabaja con números astronómicos de bits en lo que sería la memoria volátil de cualquier ordenador y ya si nos vamos a un disco duro las cantidades aumentan.

¿Pero los valores son bits?

Sí, todos los valores están formados por bits, pero estos valores, cada tipo de ellos juega un rol distinto, algunos serán números otros serán trozos de texto, otros serán funciones o bloques de código, etc.

Por lo tanto, podemos decir que los valores serían la unidad mínima dentro de nuestro código.

Para crear un valor no tenemos que hacer nada más que escribirlo, la computadora lo almacenará en algún lugar de su memoria volátil, por lo que si quisiéramos usar grandes cantidades de información a la vez podríamos saturar la memoria física que es limitada, si bien esto es bastante difícil dado el hecho de que no usamos toda la información y valores a la vez, así que tan pronto un valor ya no se usa deja espacio al siguiente, en el área de procesamiento.
  
Variables
 
Como acabamos de decir los valores pueden ser de distintos tipos numéricos, cadenas de texto, booleanos… pero imaginemos que podríamos hacer con estos valores, veamos cómo quedaría un programa que multiplique…
 
7 * 8= resultado
 
Si creásemos un programa así sería poco útil pues solo sería válido para estos dos valores y en ese orden, pero lo podemos hacer de otra manera.
 
El otro camino posible para hacer lo mismo es con variables, las variables en los lenguajes de programación funcionan como estudiamos en el colegio en la clase de matemáticas.
 
Una variable se usa para hacer referencia a un valor, así cuando se crea un programa este funcionaría de igual manera independientemente del valor que se asigne a la variable.
 
Lo que se ha escrito antes podríamos hacerlo así:
 
var a = 7;
var b = 8;
var resultado = a * b;
 
Con var le indicamos que es una variable, después le añadimos un nombre a la variable que queremos crear y luego si lo deseamos asignamos un valor con el operador  =.

De esta forma este programa funcionaría para cualquier par de números que indiquemos. Las siguientes veces que utilicemos dicha variable en el script solo necesitaremos emplear el nombre que le hayamos dado.
 
Valores de tipo numérico

Dentro de los distintos valores con los que podemos operar, hoy vamos a explicar los valores de tipo numéricos y los distintos operadores para trabajar con ellos (en siguientes capítulos continuaremos con los siguientes tipos).
 
Como su nombre indica son los valores que emplean números, tanto como puedan ser enteros, negativos o por ejemplo decimales en JavaScript usan una cantidad fija de bits, 64 bits en total, que teniendo en cuenta este dato, la cantidad de números que se pueden representar en JavaScript sería el resultado de la operación 2 (por ser binario la base) elevado a 64 (número de bits).Unos cuantos trillones, pero tranquilos, si lo calculáis nos sobran bits ?.
 
En los números normales no tendríamos que remarcar nada, en los fraccionarios se escribirán usando un punto para marcar el decimal.

12.67

Se puede usar la notación científica escribiéndolo de la siguiente forma
 
2e5

Que sería lo mismo que
 
2 x 10 elevado a 5
 
 
Números especiales
 
En JavaScript se dispone de tres valores especiales considerados números
 
Infinity   que significa infinitos positivos

-Infinity  infinitos negativos

NaN   su significado es, que no es un número como, por ejemplo
 
Infinty – infinity = NaN
 
Veamos los operadores que operan con estos valores.
 
Operadores Aritméticos

En JavaScript podemos realizar operaciones aritméticas como sumar, restar, multiplicar… las cuales a partir de 2 valores numéricos (pueden ser literales o variables) nos devuelve un tercer valor resultante, esto se vería de esta manera:
 
Operando      operador        operando     
 2                    +                    5                     = resultado
 
Como podemos ver los números en una operación aritmética se llaman operandos.
La operación que se realizará la define el operador.
 
<!DOCTYPE html>

<html>

<body>
 
<p>Vamos a ver una operación simple de suma de dos números 2 más 5</p>
 
<button id="aqui" onclick="cambiar_texto()">Pulsa para ver el resultado</button>
 
<p id="ejemplo1"></p>
 
<script>
var resultado = 2 + 5;

function cambiar_texto() {
document.getElementById("ejemplo1").innerHTML = resultado;
}
</script>
 
</body>

</html>
 

Vamos a ver una operación simple de suma de dos números 2 más 5

Pulsa para ver el resultado

Ejemplo 1

En este ejemplo hemos usado el operador + para realizar una suma, 2 + 5 = 7
Pero vamos a repasar el código
 
<p>Vamos a ver una operación simple de suma de dos números 2 más 5</p>
 
En esta línea no hay más que texto usando la etiqueta de html <p>, la cual sirve para colocar un bloque de texto.
 
<button id="aqui" onclick="cambiar_texto()">Pulsa para ver el resultado</button>
 
Creamos un botón el cual referenciamos como id= “aquí” y usamos el manejador de eventos onclick para activar la función cambiar_texto(), en el botón hemos puesto “pulsa para ver el resultado”.
 
<p id="ejemplo1"></p>
 
En esta línea preparamos un bloque de texto con la etiqueta <p> referenciado con id= “ejemplo1”, este bloque estará vacío hasta que pulsemos el botón
 
var resultado = 2 + 5;
 
La línea declara la variable resultado que le indicamos que su valor es 2 + 5.
 
function cambiar_texto() {
document.getElementById("ejemplo1").innerHTML = resultado;
}
 
En las siguientes líneas declaramos la función cambiar_texto(), con document.getElementById() elegimos el bloque de texto vacío referenciado con id= “ejemplo1” y con .innerHTML le decimos que queremos poner en ese bloque de texto.
 
En el primer ejemplo usamos números literalmente pero como en el ejemplo de a continuación podemos usar variables.
 
<!DOCTYPE html>

<html>

<body>
 
<p>Vamos a ver una operación simple de suma de dos números 2 más 5</p>
 
<button id="aqui" onclick="cambiar_texto2()">Pulsa para ver el resultado</button>
 
<p id="ejemplo2"></p>
 
<script>

var a = 2;

var b = 5;

var resultado2 = a + b;

function cambiar_texto2() {
document.getElementById("ejemplo2").innerHTML = resultado2;
}

</script>
 
</body>

</html>

Vamos a ver una operación simple de suma de dos números 2 más 5

Pulsa para ver el resultado

​Ejemplo 2
 
O incluso expresiones como:
 
<!DOCTYPE html>
<html>
<body>
<p>Vamos a ver la operación
<br>
<br>
b + (5 + 15) * a = resultado
<br>
<br>
Donde b = 3 + 2 y a = 2</p>
 
<button id="aqui" onclick="cambiar_texto3()">Pulsa para ver el resultado</button>
 
<p id="ejemplo3"></p>
 
<script>
 
       var a = 2;
 
       var b = 3 + 2;
 
       var resultado3 = b + (5 + 15) * a;
 
 
       function cambiar_texto3() {
       document.getElementById("ejemplo3").innerHTML = resultado3;
       }
 
</script>
 
 
 
</body>
</html>

Vamos a ver la operación

b + (5 + 15) * a = resultado

Donde b = 3 + 2 y a = 2

Pulsa para ver el resultado

​Ejemplo 3

Los símbolos + y  * usados encima de estas líneas son como habréis adivinado la suma y la multiplicación, nos faltará por ver – resta , / división y % resto (serviría para calcular el resto en una división de dos operandos) al igual que en matemáticas en el ejemplo de arriba el orden de las operaciones será el siguiente: primero se opera los valores que están dentro del paréntesis, los paréntesis igual que en matemáticas también nos ayudarán a cambiar la precedencia por defecto.
 
b + (5 + 15) * a = resultado 
 
Luego se multiplica el resultado por a =2
 
b + 20 * a = resultado 
 
 y luego la suma donde b = 3 + 2 por lo tanto b = 5.
 
b + 40 = resultado 
 
El orden de los 5 operadores son igual que los que nos enseñaron en el colegio / ,  * y  %  tienen la misma precedencia.
Después irían –  y + que tienen a su vez la misma precedencia.
Y en caso de coincidir en la misma precedencia se comenzaría a operar de izquierda a derecha.
 
Aquí os dejamos un ejemplo del operador módulo % por ser tal vez el menos conocido, el cual  nos da el resto de una división.

<!DOCTYPE html>

<html>

<body>

<p>Vamos a ver la operación
<br>
<br>
a % b= resultado
<br>
<br>
El resulado es el resto de la división de esos dos números
<br>
a = 7
<br>
b = 3
</p>
 
<button id="aqui" onclick="cambiar_texto4()">Pulsa para ver el resultado</button>
 
<p id="ejemplo4"></p>
 
<script>
 
                var a = 7;
 
                var b = 3;
               
                var resultado4 = a % b;
 
 
                function cambiar_texto4() {
                document.getElementById("ejemplo4").innerHTML = resultado4;
                }
 
</script>
 
 
 
</body>

</html>

Vamos a ver la operación

a % b= resultado

El resulado es el resto de la división de esos dos números
a = 7
b = 3

Pulsa para ver el resultado

​Ejemplo 4
 
Operadores aritméticos Unarios
 
En JavaScript además de los operadores aritméticos ya descritos disponemos de los Unarios, un operador unario es un operador que solo necesita un valor para operar, hasta ahora con un operador y dos valores nos devolvían un tercero esto es un operador binario, ahora con un operador unario y un valor nos devuelve otro valor, veamos:
 
Incremento ++ que es un operador unario. Su función es incrementar en una unidad al operando
 
<!DOCTYPE html>

<html>

<body>

<p>Vamos a ver la operación
<br>
<br>
7 incrementado en uno
</p>
 
<button id="aqui" onclick="cambiar_texto5()">Pulsa para ver el resultado</button>
 
<p id="ejemplo5"></p>
 
<script>
 
                var a = 7;
 
                a++;
 
               
                var resultado5 = a;
 
 
                function cambiar_texto5() {
                document.getElementById("ejemplo5").innerHTML = resultado5;
                }
 
</script>
 
 
 
</body>

</html>

Vamos a ver la operación

7 incrementado en uno

Pulsa para ver el resultado

Ejemplo 5
 
Veamos que sucede cuando repetimos varias veces el incremento…
 
<!DOCTYPE html>

<html>

<body>

<p>Vamos a ver la operación
<br>
<br>
7 incrementado en 4
</p>
 
<button id="aqui" onclick="cambiar_texto6()">Pulsa para ver el resultado</button>
 
<p id="ejemplo6"></p>
 
<script>
 
                var a = 7;
 
                a++;
                a++;
                a++;
                a++;
               
                var resultado6 = a;
 
 
                function cambiar_texto6() {
                document.getElementById("ejemplo6").innerHTML = resultado6;
                }
 
</script>
 
 
 
</body>

</html>

Vamos a ver la operación

7 incrementado en 4

Pulsa para ver el resultado

Ejemplo 6
 
 
Decremento - - Su función es restar una unidad al operando, su funcionamiento es igual al de incremento, funcionando distinto si precede o no al operando.
 
<!DOCTYPE html>

<html>

<body>

<p>Vamos a ver la operación
<br>
<br>
7 decremento en uno
</p>
 
<button id="aqui" onclick="cambiar_texto7()">Pulsa para ver el resultado</button>
 
<p id="ejemplo7"></p>
 
<script>
 
                var a = 7;
 
                a--;
               
                var resultado7 = a;
 
 
                function cambiar_texto7() {
                document.getElementById("ejemplo7").innerHTML = resultado7;
                }
 
</script>
 
</body>

</html>

Vamos a ver la operación

7 decremento en uno

Pulsa para ver el resultado

Ejemplo 7
 
Y hasta aquí esta semana practicar y nos vemos pronto.

​Manuel Castelló (kasmangou)

Temas relacionados: Programación, Redacción independiente, kasmangou, JavaScript 

Reconocimientos y más información sobre la obra gráfica
ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.