viernes, 12 de mayo de 2017

Variables en JavaScript Parte II - Los tipos de Variable

En JavaScript, como en cualquier lenguaje de programación, se pueden manejar datos de diferentes tipos, que dependerán del valor que tengan. Por ejemplo, si declaramos una variable para que contenga el nombre de un usuario, este será un dato de los que llamamos de cadena o literales, ya que el nombre de una persona esta formado por letras. Si declaramos otra variable, para que contenga su edad, éste será un dato de tipo numérico, ya que lo que contiene es una cifra con la cual podremos hacer cálculos. Si creamos una variable para que contenga, por ejemplo, la fecha de nacimiento del usuario nos encontramos ante un caso distinto, pues las fechas, en JavaScript, son un tipo especial de datos, que se manejan de manera diferente a los literales y a los números.


Observemos el siguiente ejemplo:


<!DOCTYPE html>

<html lang="en">
<head>
            <meta charset="UTF-8">
            <title>Página con JavaScript</title>
            <script type="text/javascript">
                        var cadena = "Esto es una cadena";
                        var numero=75;
                        alert(cadena);
                        alert(numero);
            </script>
</head>
<body>
</body>
</html>


Cuando lo ejecute, lo primero que verá será el cuadro de aviso con el valor asignado a la variable cadena. Lo verá sin comillas. Cuando le asignamos texto a una variable, en el código debemos escribir unas comillas que delimiten dicho texto, pero éstas no forman parte del mismo. El contenido del texto es lo que está escrito entre las comillas. Mucha gente espera que las comillas formen parte del texto, lo cual da origen a muchos errores





Como vemos, ambas variables pueden mostrarse en la página independientemente de su tipo. Por lo tanto, ya sabemos, que el tipo de una variable no influye para que pueda mostrar su valor al usuario aunque, si determina la forma de trabajar con ella, como veremos más adelante.

Como trabajar con variables de texto

A la hora de manejar variables de texto, podemos hacer muchísimas operaciones con ellas, y para eso analizaremos algunos ejemplos:

Concatenaciones

Se conoce como concatenación al proceso de unir dos o mas cadenas en una sola, mediante el uso del operador + (mas). Pero veamos un ejemplo de esto:

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="UTF-8">
            <title>Página con JavaScript</title>
            <script type="text/javascript">
                        var cadena1="Esto es una cadena.";
                        cadena2 = "Y esto es otra";
                        cadena3 = cadena1+cadena2;
                        alert (cadena3);
            </script>
</head>
<body>
           
</body>
</html>




Secuencias de escape

Anteriormente hemos visto que una cadena de texto se escribe en el código entre comillas, pero estas no se almacenan con la cadena. Pero puede ser que en algún momento deseemos que sí aparezcan. Para lograrlo consideremos el siguiente ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="UTF-8">
            <title>Document</title>
            <script type="text/javascript">
                        var variable1="Este aviso dice: \"Hola\".";
                        alert (variable1);
            </script>
</head>
<body>
           
</body>
</html>

Como ven, para lograr que aparezcan las comillas dentro de la cadena de texto, necesitamos agregar es contraslash ( \), si no agregáramos este signo, al momento de poner comillas, JavaScript interpretaría que estamos cerrando o terminando la cadena de caracteres, sin embargo, con el símbolo, le decimos que omita el cierre de la cadena y continúe, se que es un poco difícil de entender, pero, conforme vayamos avanzando en la práctica, van a comprender todo lo que les comento, vamos a hacer una lista, con los caracteres de escape que existen, y haremos algún ejemplo.

Secuencias de escape
Secuencia
Efecto
\\
Inserta un contraslash
\”
Inserta comillas dobles
\’
Inserta comillas simples
\n
Inserta un salto de línea
\f
Inserta un salto de págna
\r
Inserta retorno de carro
\t
Inserta una tabulación
\b
Retrocede un carácter
Veamos un ejemplo con un salto de línea:

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="UTF-8">
            <title>Document</title>
            <script type="text/javascript">
            var variable1 = "Esto es una línea\n Y esto es otra línea";
            alert (variable1);
            </script>
</head>
<body>
           
</body>
</html>


Ahora veamos un ejemplo con una tabulación:

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
        var variable1 = "Esto es un texto\t Y esto una tabulación";
        alert (variable1);
        </script>
</head>
<body>
       
</body>
</html>


Como trabajar con variables numéricas

Como les comentaba líneas arriba la razón de ser de las variables numéricas es realizar algún cálculo con ellas.

Las operaciones aritméticas básicas se realizan en JavaScript mediante los operadores básicos que conocemos desde la escuela (suma, resta, multiplicación y división) (+,-,*,/), además del módulo (%), que aunque tenga el símbolo del porcentaje, no es lo mismo y ya veremos ejemplos de eso.

Suma

La suma en JavaScript se lleva a cabo mediante el operador más (+) y para eso veremos un ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="UTF-8">
            <title>Document</title>
            <script type="text/javascript">
            var primernumero=10, segundonumero=20;
            suma=primernumero+segundonumero;
            alert (suma);
            </script>
</head>
<body>
           
</body>
</html>


Podemos combinar variables de texto, con variables numéricas. Consideremos el siguiente ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var primernumero=10, segundonumero=20;
suma=primernumero+segundonumero;
alert ("La suma de 10 y 20 es: "+suma);
</script>
</head>
<body>

</body>
</html>


Como vemos es muy sencillo utilizar el operador (+), para realizar una suma. JavaScript nos proporciona otro operador para realizar la suma de una manera que podamos llamar "abreviada". Se trata del signo más igual (+=). Cuesta un poco familiarizarse con el, especialmente aquellos que no tienen experiencia previa, por eso empezaremos a hacerlo desde ahora.

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="UTF-8">
            <title>Document</title>
            <script type="text/javascript">
            var variable1= 10, variable2=20;
            variable1+=variable2;
            alert ("La suma de 10 y 20 es: "+variable1);
            </script>
</head>
<body>
           
</body>
</html>

Como vemos, el operador (+=) nos sirve, para realizar una suma abreviada, pero sigamos adelante con más ejemplos, ahora de la resta

Resta

La resta se lleva a cabo, mediante el operador menos (-). Al igual que la suma, es muy sencilla de programar en JavaScript. Consideremos el siguiente ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var minuendo=20, sustraendo=15, resta;
resta = minuendo-sustraendo;
alert ("20 menos 15 son: "+resta);
</script>
</head>

<body>

</body>

</html>



Como podemos ver la resta es muy similar a la suma, solo cambia el signo, también existe el signo -= (menos igual) que funciona exactamente igual a la suma.

Multiplicación

La multiplicación en JavaScript se lleva a efecto mediante el operador asterisco (*), es igual a las demás operaciones y también existe el *=.

División

La division en JavaScript (y en la mayoría de los lenguajes de programación) se realiza con la barra, llamada slash (/), también existe el signo /=.

JavaScript puede manejar números fraccionarios con la misma facilidad que los números enteros.

Veamos un ejemplo de las cuatro operaciones básicas



<!DOCTYPE html>

<html lang="en">

<head>

            <meta charset="UTF-8">

            <title>Document</title>

            <script type="text/javascript">

                        //Declaramos e inicializamos las variables de los operandos

                        var sumando_1=6.3, sumando_2=7.2, suma, linea_1;

                        var minuendo = 4.7, sustraendo=2.7, resta, linea_2;

                        var multiplicando = 2.88, multiplicador=3.432, producto, linea_3;

                        var dividiendo = 23.47, divisor=8.36, cociente, linea_4;



                        //Calculamos los resultados

                        suma = sumando_1 + sumando_2;

                        resta= minuendo - sustraendo;

                        producto = multiplicando * multiplicador;

                        cociente = dividiendo / divisor;



                        //Preparamos los resultados para su presentación

                        linea_1 = "La suma de " + sumando_1 + " y " + sumando_2 + "es: "+ suma;

                        linea_2 = "La resta de " + minuendo  + " y " + sustraendo  + "es: "+ resta;

                        linea_3 = "El producto de " + multiplicando+ " y " + multiplicador + "es: "+ producto;

                        linea_4 = "El cociente de " + dividiendo + " y " + divisor + "es: "+ cociente;



                        //Mostramos los resultados

                        alert (linea_1 + "\n" + linea_2 + "\n" + linea_3 + "\n" + linea_4);

            </script>

</head>

<body>

           

</body>

</html>




En este ejemplo se hace uso de todas las operaciones básicas, espero les quede claro, quisiera hacer una mención de un caso en particular: la división entre cero. Muchos lenguajes de programación modernos generar un error cuando se trata de llevar acabo una operación de este tipo. Sin embargo, JavaScript lo trata de un modo especial y no genera error alguno. De hecho realiza lo que dicen las matemáticas al respecto: cualquier número dividido entre cero da como resultado infinito, y eso es lo que hace precisamente JavaScript. Consideremos el siguiente ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="UTF-8">
            <title>Document</title>
            <script type="text/javascript">
                        var dato =34/0;
                        alert ("El dato vale: " + dato);
            </script>
</head>
<body>
           
</body>
</html>


Módulo

Tal como lo acabamos de ver, las divisiones no siempre dan un cociente exacto. En muchos casos es interesante poder obtener el residuo de una división. JavaScript nos proporciona para este fin, un operador llamado módulo (%), que se representa mediante el signo de tanto por ciento (%). Consideremos el siguiente ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="UTF-8">
            <title>Document</title>
            <script type="text/javascript">
                        var dividiendo = 10, divisor = 4, resto
                        resto = dividiendo % divisor;
                        alert ("El resto de dividir 10 entre 4 es: " + resto);
            </script>
</head>
<body>
           
</body>
</html>

Incremento y decremento

En un programa informático  es tan habitual incrementar o decrementar una variable numérica en una unidad que la mayor parte de los lenguajes de programación modernos emplean unos operadores específicos para estas funciones: son los operadores de increment (++) y de decremento (--). Consideremos el siguiente ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="UTF-8">
            <title>Document</title>
            <script type="text/javascript">
            variable1=10;
            variable1++;
            alert(variable1);
            </script>
</head>
<body>
           
</body>
</html>




En el decremento sucede exactamente lo mismo, solo que resta en lugar de sumar.

Hasta aquí el post sobre los tipos de variables, en nuestro siguiente post seguiremos trabajando con las variables, pero ahora veremos como saber el tipo de una variable y cambiar también su tipo, debo mencionar que existen otros tipos de variables que no vimos, pero veremos mas adelante, como son el valor bool y el valor DATE.

Espero que este post haya sido de su agrado y utilidad, saben que cualquier duda estoy a la orden, espero den clic en +1, compartan, comenten o den clic en algún anuncio.


Banderas de Visitantes

Flag Counter