martes, abril 17, 2012

Tutorial de desarrollo web, Parte XXVIII: Tipos de datos básicos

Una semana más estamos aquí para el curso de desarrollo web, aunque en esta ocasión yo estoy ya en Alemania así que no estoy controlando si esto se publica, pero no creo que Blogger me defraude. O eso espero. Bueno, sea como sea, aquí están los ejercicios de la semana pasada, para empezar ya con el nuevo tema.
La semana pasada decíamos que el JavaScript nos permitía mucha libertad con respecto a las variables. Eso es porque JavaScript es lo que se llama un lenguaje de programación no tipado. "¿Y qué nos quieres decir con eso?" os preguntaréis. Vamos parte por parte.
En los lenguajes de programación tipados, a la hora de declarar una variable tenemos que especificarle qué tipo de dato se va a guardar en esa variable, y sólo se le podrán introducir datos de ese tipo y aplicar funciones relacionadas con ese tipo. En JavaScript (como ejemplo de lenguaje no tipado) no funciona así, ya que nuestra variable es sólo un hueco de memoria esperando recibir un dato, sin importarle qué tipo de dato sea, lo cual es un arma de doble filo.
Pero que no necesitemos declarar qué tipo de variable es cada cual no significa que en JavaScript no existan los tipos de datos. Todo lo contario, están ahí y nos podrán dar problemas si no los tenemos en cuenta. Por ello es que esta semana vamos a intentar entender cuales son los tipos de datos básicos.
  • Uno de los tipos de datos que podremos guardar en nuestras variables serán los valores enteros (mejor conocidos por los programadores como int o Integer, dependiendo del lenguaje). Si recordamos nuestras lecciones de matemáticas, los números enteros son todos aquellos números finitos que no tengan parte decimal, da igual que sean positivos o negativos. Unos cuantos ejemplos de números enteros serían:
  • 28
  • -19
  • 0
  • 32
  • -130
  • 1822
  • De este modo, si en una variable guardamos cualquier número entero desde -∞ hasta ∞ (sin incluir a ninguno de estos dos valores) decimos que en esa variable tenemos guardado un valor de tipo entero, y por tanto podremos aplicarle todas las operaciones que se le aplican a las variables de tipo entero (aunque en JavaScript no existan los tipos de variables).
  • Subiendo un nivel por encima de los valores enteros tenemos los valores reales (para los programadores habitualmente conocidos como float o double). Los números reales engloban a los enteros, pero además les añaden todos aquellos números con decimales. De este modo, ejemplos de números reales serán los siguientes:
  • 32.0
  • -15.6
  • 37.043
  • -1.0
  • 0.0
  • -0.7
  • Una curiosidad que tienen los valores de tipo entero, sobre todo importante en lenguajes no tipados como es el JavaScript, es que, como veis en nuestros ejemplos, absolutamente todos tienen parte decimal, incluso aunque esta sea 0. En lenguajes tipados esto no tiene tanta importancia en un primer momento, pero en JavaScript, en caso de querer guardar un valor real, debemos recordar siempre incluir su parte decimal incluso aunque no tenga, ya que si no, al no tener definido un tipo para la variable, el lenguaje lo interpretará como un entero.
  • En tercer lugar, tenemos el tipo caracter (char o Character), el cual, como su nombre indica, se trata de un simple caracter que podamos incluir con el teclado. Ejemplos de caracteres son lo ssiguientes:
  • a
  • ?
  • 2
  • -
  • J
  • º
  • \n
  • Como veis, el tipo caracter es el más "dinámico" de todos. Sin embargo, este tipo de datos tiene dos cosas importantes a tener en cuenta. El primero es que todos y cada uno de los caracteres deben ir rodeados por comillas simples (por ejemplo: 'a'). Esto es importante no sólo por el hecho de que nos ayuda a no confundir caracteres con variables, sino que, en caso de querer introducir un caracter numérico (como el 2 que tenemos en el ejemplo), en caso de no entrecomillarlo sería guardado como un entero.
  •  En segundo lugar que cada variable caracter sólo puede guardar un único caracter. Por eso en todos los ejemplos no hay ninguna palabra formada. Tal vez digáis que entonces por qué el último ejemplo tiene dos caracteres ('\n'), de eso hablaremos con el tiempo, pero por lo general la barra inversa (\) se usa en JavaScript para representar caracteres especiales. En el caso de este ejemplo, '\n' representa el caracter "salto de línea" (sí, un salto de línea para un ordenador es un caracter).
  • El último de los tipos básicos es el tipo booleano (bool o Boolean), el tipo de dato binario. Las variables booleanas (cuyo nombre es en honor a George Boole, importante matemático que creó la que se conocería como "Álgebra de Boole") sólo pueden tener dos valores: verdadero o falso. De este modo, sólo existen dos ejemplos de este tipo de variable:
  • true
  • false
  • Los lenguajes de programación suelen aceptar estos valores sin comillas ya que se consideran palabras reservadas del sistema operativo y se reconocen como valores booleanos. Sin embargo, cabe remarcar, por si algún día interactuáis con otros lenguajes de programación, que hay lenguajes donde los valores booleanos son interpretados como 0 (falso) ó 1 (verdadero).
Y tal vez os preguntéis en qué van a afectar estos tipos a la hora de programar. Os voy a dar el ejemplo más básico: el operador +.
Todos hemos usado el operador + alguna vez en nuestra vida. Sirve para sumar dos números, ¿cierto? Pues en programación también es así... casi siempre. Creemos un nuevo documento y démosle una estructura básica HTML para luego abrir una etiqueta <script> en el "body" y empecemos a introducir código:

<script type="text/javascript">
var entero;
var real;
var caracter;
var booleano;
</script>

Bien, hemos declarado una variable de cada uno de los tipos con los que estamos trabajando. Nuestro siguiente paso ahora va a ser asignarle valores. Así que vamos a por ello:

<script type="text/javascript">
var entero;
var real;
var caracter;
var booleano;
entero = 1;
real = 1.0;
caracter = '1';
booleano = true;
</script>

Bien, ahora todas nuestras variables tienen valores, que realmente son bastante similares entre ellos (como dije antes, el valor booleano "true" equivale a 1). Ahora vamos a mostrarnos los valores por pantalla:

<script type="text/javascript">
var entero;
var real;
var caracter;
var booleano;
entero = 1;
real = 1.0;
caracter = '1';
booleano = true;
document.write(entero  + '<br/>');
document.write(real  + '<br/>');
document.write(caracter  + '<br/>');
document.write(booleano + '<br/>');
</script>

Como vemos, he incluido un salto de línea al final de cada write para ver las cosas más claras (si no, todos los resultados habrían salido en una sóla línea). Recordemos que la semana pasada vimos que, para el "document.write", el operador + podía significar concatenación. Aunque no siempre. Ahora lo veremos.
En primer lugar, abramos nuestra página y veamos que nos ha dado este resultado:
1
1
1
true
 Podemos ver que tres de los valores parecen ser exactamente iguales. De hecho, JavaScript ha eliminado la parte decimal de la variable "real" al comprobar que es 0 (otros lenguajes de programación lo habrían guardado, todo depende del lenguaje). De este modo, la variable entera y la variable real vienen a tener el mismo valor exacto. Sin embargo, la variable "caracter" tiene un valor distinto, aunque parezca que es la misma, y finalmente, la variable "booleano" es evidente que tiene otro tipo de valor... Aunque se parece más al valor de "entero" y de "real" que lo que la variable "caracter" se parece a ellas, aunque a primera vista parezca lo contrario. Vamos a comprobar a qué me refiero sumándole uno en el "write" a cada uno de esta manera:


<script type="text/javascript">
var entero;
var real;
var caracter;
var booleano;
entero = 1;
real = 1.0;
caracter = '1';
booleano = true;
document.write(entero + 1  + '<br/>');
document.write(real + 1 + '<br/>');
document.write(caracter + 1 + '<br/>');
document.write(booleano + 1 + '<br/>');
</script>

Como veis, a cada una de las cuatro variables le hago un "+1" en el momento de imprimirlo. Por lo que sabemos hasta la fecha, esto debería "concatenar" sus valores con el 1. Sin embargo, el 1 no es un caracter ni un String (no está entrecomillado). ¿Qué ocurrirá? Ejecutémoslo:
2
2
11
2
¿Pero qué leches ha ocurrido aquí? ¿2? ¿11? ¿De dónde sale todo esto? Bueno, vamos paso a paso para intentar entenderlo.
En primer lugar tenemos que entender que el operador + en JavaScript sirve tanto para concatenar fragmentos de texto (como ya habíamos visto) como para sumar números. Por eso ha reaccionado de manera distinta en cada uno de los cuatro casos depende del tipo de datos que hubiera guardado en la variable. También hay que entender que el JavaScript actúa de arriba abajo y de izquierda a derecha, lo que significa que lo primero que encuentre es lo primero que ejecuta (salvo que encuentre paréntesis, tal como ocurre en matemáticas, pero ya hablaremos de eso). Pero, ¿qué  ha hecho exactamente?
En el primer "write" el navegador se ha encontrado que la primera variable tiene almacenada un valor de tipo entero, así que interpreta que el símbolo + de a continuación debe de ser una suma. Y de hecho, encuentra que el siguiente valor, un 1 literal, también es un valor entero (un número sin entrecomillar es siempre un valor numérico), por lo que toma el valor de la variable "entero" (1) y el valor literal encontrado a continuación (1) y los suma. Finalmente, cuando encuentra el segundo + sigue esperando un entero, pero en su lugar encuentra una ristra de caracteres, momento en el que se da cuenta de que, tal vez, no se espere sumar los valores sino concatenar (ya que una ristra no se puede sumar), pero, como ya sumó lo anterior, a lo hecho pecho, y coge el valor entero obtenido (2) y lo concatena con el salto de línea <br/>.
En la segunda línea le pasa básicamente lo mismo. Encuentra el valor entero (que, recordemos, él había transformado a entero al ver que no tenía decimal) y se lo suma al siguiente valor, también entero, y luego es cuando reacciona para concatenar.
La tercera línea nos muestra ya algo distinto. En este caso, el navegador empieza por encontrar la variable caracter en la que habíamos guardado un caracter '1'. Ya desde el momento en que el navegador comprueba que lo que hay guardado en esa variable es un caracter (como dije antes, se guardó de manera distinta al ser un caracter en lugar de un número) decide que los "+" que aparezcan a partir de entonces serán concatenaciones y no sumas. Por ello, concatena el valor de tipo caracter que hay en la variable "caracter" ('1') con el valor literal que recibe a continuación (1) a pesar de que no sea un caracter, pero, al no ser capaz de sumarlo (ya que no es capaz de ver que el caracter '1' es en realidad un número), lo concatena, y por eso ese resultado tan curioso ("11").
Finalmente, uno de los resultados más sorpresivos es el último, el de la variable "booleano". Pero, tal como había dicho antes, los valores booleanos equivalen a 0 y a 1, de modo que no es difícil imaginar cómo lo ha interpretado el navegador si hemos leído lo anterior.
Y, bueno, hasta aquí los tipos de datos básicos, la semana que viene veremos el primer tipo de dato no básico (y el último durante un tiempo) que son las variables Strings (de las cuales ya hemos hablado por encima).

EJERCICIO


Esta semana no hay realmente material como para mandar un ejercicio, así que propongo simplemente probar el siguiente código e intentar entenderlo. La semana que viene lo explicaremos en detalle al comienzo del post:

<script type="text/javascript">
var entero;
var real;
var caracter;
var booleano;
entero = 1;
real = 1.5;
booleano = true;
document.write('' + entero + ' es un entero. <br/> ');
document.write('' + booleano + 2 + ' son un booleano y un entero. <br/> ');
document.write(real + entero + ' es un número real.<br/>');
</script>


Y, con esto lo dejamos por esta semana, la semana que viene más y mejor.

No hay comentarios: