| Para empezar, vamos a introducir tres conceptos fundamentales para la programación en general, variables, constantes y datos o valores. |
| Dato o valor es, como su nombre indica, lo que vale o el contenido de algo. Es decir, si digo que una camisa vale 20 euros, el Valor de la camisa es 20. Si digo que mi nombre es Antonio, el Dato de mi nombre es Antonio. Esto es bastante intuitivo. |
| Una Constante es un valor que permanece invariable siempre. Una constante muy típica es el numero Pi, que vale 3.141592… Este valor nunca cambia, y siempre que lo utilicemos, valdrá lo mismo. |
| En programación, también podemos definir como constantes a aquellos valores que vayan a ser invariables durante toda la ejecución de nuestro programa. Así, si tengo un programa de gestión de un parque de atracciones y la altura minima para que un niño pueda subirse a una atracción es de 1.20 metros, por ejemplo, y sé que eso no va a cambiar, podría definir en mi programa, una constante que se llamara, por ejemplo, altura_minima y que su valor fuera 1,20. Ese valor no cambiaria nunca. |
| Variable es lo contrario de Constante en cuanto al comportamiento de lo que almacenan, y es el elemento que mas se utiliza en programación. Una variable es, en realidad, un nombre que se le da a una zona de memoria del ordenador, donde almacenamos algo (un dato o valor). Esta misma definición vale también para una constante, pero la diferencia radica en que los valores que almacene una variable pueden cambiar durante la ejecución del programa, y los de una constante no. |
| Por ejemplo, si defino una variable llamada Total, con el valor de las compras de una tienda y compro una camisa que vale 20 euros, |
| Total = 20 (esto indica que Total es el nombre de la variable y que 20 es su valor) |
| Pero puede que el cliente desee comprar también un pantalón que vale 35 euros. Entonces, el valor de Total cambia, |
| Total=Total+35 (aquí lo que digo es que la variable Total toma ahora por valor, lo que valía justo antes de esta sentencia, + 35 (que vale el pantalón). Por lo que ahora la variable total tiene como valor, 55. |
| Bueno, esto es la base. Para casi todo vamos a utilizar variables que tienen un nombre y a las que asignaremos datos o valores, ya sea directamente o a través de operaciones. |
| NOTA: En JavaScript, una variable o una constante no se diferencian en nada a la hora de codificarlas. La diferencia la marca el programador, estableciendo que determinadas variables no cambien nunca de valor. Eso la convierte en constantes, aunque a la hora de programar no nos afectará. He comentado el término Constante para que se viera bien la diferencia con el de Variable. |
| NOTA IMPORTANTE: En JavaScript, las variables son sensibles a las mayúsculas y minúsculas. No es lo mismo Nombre que nombre. CUIDADO. |
| Tipos de Datos |
| Dato o valor es lo que se almacena en una variable. En el apartado anterior, los datos que hemos almacenado en la variable Total son números. Ese es el tipo de datos que contiene la variable Total. Contiene valores numéricos. |
| Pero no solo se pueden almacenar números en una variable. Hay muchos otros tipos de datos, y en JavaScript, los tipos de datos básicos son: |
| |
 Números :
|
| 25, 0.3, 123456, -45 |
Booleanos : |
| true o false (significan Verdadero y Falso respectivamente es lo que se llama un tipo de dato lógico). Son valores que actúan como interruptor, solo pudiendo valer uno de estos dos valores, y la ausencia de uno implica la existencia del otro. Por ejemplo, la variable lógica Descuento para mi tienda de ropa contendrá solo un valor verdadero o falso. Si es Verdadero, esa prenda tendrá descuento, y si no es Verdadero, entonces es falso, y no lo tendrá. |
Cadenas (Strings en ingles) : |
| Como "hola" u 'hola'. Son textos y siempre van entre comillas simples o dobles. Por ejemplo, la variable Nombre será de tipo cadena o string porque contiene una cadena de caracteres, la que conforma el nombre de la persona en cuestión. Lo mismo podría decirse para una variable Apellido, o una variable Dirección. Hay que tener en cuenta que podemos poner números en una variable string. La diferencia es que esos números se toman como un carácter cualquiera, y no se puede operar matemáticamente con ellos. |
null : |
| Un valor y tipo especial que indica valor nulo. |
undefined : |
| Un valor y tipo especial que toman las variables cuando no están definidas. Tanto null como undefined son palabras reservadas del lenguaje (en minúsculas). |
| |
|
| Existen otros tipos de datos (fechas, vectores, matrices…), pero en JavaScript, esos datos se definen con objetos. Ya los veremos. |
| Vamos a ver algunos ejemplos: |
 |
| NOTA: Recuerda que las dos // implican que lo que se escribe detrás es un comentario y no se ejecuta. Solo sirve para el esclarecimiento del código. También recuerda que generalmente las líneas de código terminan con punto y coma ‘ ; ‘ . Hay casos en que no es así, y los señalaré a medida que los explique. |
| Variables |
| Generalmente, en los lenguajes de programación se suelen declarar las variables (y las constantes). Esto quiere decir que antes de utilizar cualquier variable, se anuncia que la variable existe, y que tipo de valor va a contener. |
| JavaScript, sin embargo, es un lenguaje de programación débilmente tipado y tipado dinámicamente. Esto significa que no hace falta declarar los tipos de las variables, y que la conversión de tipo se hace dinámicamente, o más bien que las variables son cada vez del tipo del valor que contienen. |
| Vamos a explicar esto. |
| En JavaScript, una variable se declara con la etiqueta var. |
 |
| Pero en la declaración no se le asigna el tipo de dato que va a almacenar (en este caso, las dos variables son del tipo undefined). Esto sí que se hace en otros lenguajes de programación. |
| Débilmente tipado significa que una variable será del tipo del valor que contenga. Esto es, si escribo |
| Nombre=”Antonio”; |
| Como estoy asignando una cadena a la variable Nombre, entonces esa variable es del tipo Cadena. Asi de simple. |
| Edad=37; //es numérica porque le estoy asignando un número. |
| ¿Y qué significa tipado dinámicamente? |
| Pues que si a una variable que es de tipo numérica (porque contiene un número) le asigno ahora una cadena, su tipo cambia. |
| Edad=”hola”; // esta variable ha dejado de ser numérica para convertirse a variable de tipo cadena o string |
| Y para ‘complicar’ más las cosas, tampoco es necesario declarar la variable con var. Con asignarle directamente un valor a una variable, la hemos declarado y tipado. |
| Dirección=”Calle Platero, 9”; //He declarado y tipado la variable Dirección |
| Este tipo de comportamiento de JavaScript hay que analizarlo con cuidado. Es muy cómodo poder utilizar variables tal y como las voy necesitando, sin tener que haberlas tenido en cuenta antes ni haberlas declarado, pero en cuanto el programa va aumentando de tamaño, cualquier error que cometamos será muy difícil de encontrar. |
| Voy a poner dos ejemplos: |
 |
| Este programita coge un precio total de un producto, le quita el iva y le vuelve a quitar los 30 euros del transporte para al final tener en la variable de origen, el precio del producto ante de aplicarle los recargos por transporte e IVA. |
 |
| Este programita hace exactamente lo mismo, pero con diferencias. |
| Primero, he declarado todas las variables y les he asignado valor. Las que tienen un valor inicial se lo he puesto (Total y Transporte) y las que no lo tienen, pero sé que su contenido va a ser numérico, les he asignado valor cero. |
| He creado las variables Transporte para almacenar el coste de este servicio y la variable Precio_base para no trabajar sobre la variable Total y que el resultado esté separado del valor inicial. |
| En la segunda parte he realizado las operaciones. |
| Evidentemente el segundo programa es más largo pero, aunque pueda parecer que es mejor hacerlo como el primer ejemplo porque es mucho mas corto y se codifica menos, en cuanto el programa va aumentando de tamaño, es mucho más práctico hacerlo de la segunda forma. |
| Así, si trabajamos siempre de esta forma, cada vez que tengamos un problema, o si tenemos que revisar algún programa nuestro hecho hace tiempo, sabremos donde buscar las declaraciones de variables, qué tipo de dato contienen y desde donde comienzan a existir. |
| Por esto, yo siempre voy a intentar declarar las variables y tiparlas al comienzo del script, para luego ir utilizándolas. |
| NOTA: Esto que he explicado es absolutamente subjetivo. Que cada cual codifique como quiera. En mi caso particular, después de programar en lenguajes fuertemente tipados como Pascal, creo que esta es la forma adecuada de hacerlo. |
| Literales |
| Hemos hablado de los tipos de variables con los que vamos a trabajar, pero no hemos especificado como se representan sus valores. Vamos a ello. |
| |
Numéricos Enteros: |
| Se pueden expresar en decimal, octal o hexadecimal. |
| Para el que no sepa qué es un número en octal o hexadecimal, diré que un número en octal es aquel que solo se codifica con 8 dígitos (del 0 al 7) y un número en hexadecimal es el que se codifica con 16 dígitos (del 0 al 9 más las letras A,B,C,D,E,F). En principio, no os compliquéis la vida con esto. |
| Un número será considerado Octal si empieza con un 0 y solo tiene números de 0 al 7, y será considerado hexadecimal si empieza con 0x y tiene números del 0 al 9 y las letras que dije antes. Por lo tanto, si escribimos cualquier número que no empiece por cero, ya es considerado decimal. |
| Por ejemplo, |
| |
| A=25; // variable numérica decimal |
| B=016 // variable numérica octal |
| C=0x34EA // variable numérica hexadecimal. |
| |
Numéricos Reales: |
| Constan de parte entera, parte decimal y exponente. La parte decimal va precedida de "." y el exponente de "e" o "E". La E o e representa ‘*10 elevado a’ |
| Por ejemplo, |
| |
| 35.5E4 significa 35.5 * 10 elevado a 4, que es lo mismo que 355000. |
| |
Booleanos: |
| Son los valores true o false (eso ya lo expliqué antes) |
| |
Cadenas o strings: |
| 0 ó más caracteres entre comillas simples o dobles. Si una cadena empieza por comillas de un tipo, hay que terminarla con comillas del mismo tipo. |
| |
| Nombre=”Alfredo’; //eso no vale |
| |
| Los caracteres especiales se ponen con \. |
| |
| \n salta a una nueva línea. |
| \t tabulador. |
| \' ó \" para poner comillas dentro de cadenas. También se pueden poner comillas en una cadena alternándolas. |
| \\ para poner la propia barra "\" |
| |
| Por ejemplo, |
| |
| Parrafo=”C\\ Cuevas Nº 5\nCP:28670 \t Madrid”; |
| |
| Si visualizáramos el contenido de la variable Parrafo (ahora veremos como se hace eso), saldría algo así: |
| |
| C\ Cuevas Nº5 |
| CP:28670 Madrid |
| |
|
| Conversión de tipos |
| Ya sabemos como trabajar con variables, pero es importante tener cuidado con la conversión de tipos dinámica. Voy a poner algunos ejemplos |
| Edad=37; //es numérica porque le estoy asignando un número. |
| Edad=”hola”; // esta variable ha dejado de ser numérica para convertirse a variable de tipo cadena o string. Este ejemplo ya lo puse antes. |
| Pero qué pasa si hago esto: |
| Edad=37 + “4”; |
| Edad2=45 – “12”; |
| Pues eso lo vais a comprobar vosotros mismos. Para ello voy a explicar dos funciones que debéis usar: |
| |
alert (cadena) |
| Función que muestra en la pantalla del navegador una ventana emergente con el contenido de la cadena. Tened en cuenta que se pueden mostrar varias cadenas enlazándolas con el signo + |
| |
| nombre=”Andrés”; |
| edad=35; |
| alert (“Hola, soy “+nombre”+” y tengo “+edad+” años.”); |
| |
|
| |
typeof (operando) |
| Función que devuelve el tipo del operando contenido entre paréntesis. |
| |
|
| Con esto termino este tutorial. Pongo dos ejemplos para que los analicéis. |
 |
| Este EJEMPLO es para que veáis como afecta la posición de los script de JavaScript dentro del documento HTML |
 |
| Interesante EJEMPLO. Si prestáis atención veréis que cuando sumo un valor numérico con uno de tipo cadena, el resultado será que convierte el numero a cadena y los concatena (pega uno tras otro) dando como resultado un valor de tipo cadena. |
| Pero si resto un valor numérico con otro de tipo cadena, como el operador – no existe para las cadenas, intentará convertir a número la cadena y restar numéricamente los dos valores. Para vosotros dejo la prueba de qué pasaría si el valor de tipo cadena no contiene números. |
| NOTA: Si sois tan bueno que no cometéis ningún error, cometedlo a propósito para ver de qué modo cada navegador os los muestra. |
| Y hasta aqui este tutorial. si teneis dudas, el banner de abajo os llevará a donde podeis exponerlas. Os contestaré lo antes posible. |
| |
Español
English
