Miércoles, 09 Noviembre 2016 17:14

JavaScript: Definición y uso de variables (i)

Valora este artículo
(0 votos)

Banner Tutoriales en JavaScript: Definiendo y usando variales

Las Variables en JavaScript

Como todo lenguaje de programación JavaScript cuenta con recursos que nos permiten alcanzar objetivos específicos; en esta entrada comenzaremos a hablar con una de ellas: Las variables, sobre las que nos preguntaremos qué son estas variables y cuáles son los usos les podemos dar.

¿Qué son las variables?

Citando parcialmente esta entrada en el sitio de la Facultad de Ingeniería de la UdeLaR, podemos decir que "en programación, las variables son espacios reservados en la memoria que... pueden cambiar de contenido a lo largo de la ejecución de un programa. Una variable corresponde a un área reservada en la memoria principal del ordenador. Para que nuestro código sea más entendible y claro, el identificador de la variable debe ser mnemotécnico, es decir que debe reflejar el uso dentro del programa de la misma."

Como mencionamos en clases, de forma poco rigurosa podríamos entender que una variable es "una entidad en la que podemos almacenar datos variables (de a uno por vez), a los cuales podemos acceder desde un nombre que será constante".

Esa información, que se almacena en la memoria de nuestro dispositivo, recibe un nombre simbólico que nos permite referirnos a él para poder recuperarlo, modificarlo o eliminarlo durante la ejecución de nuestro programa a través de funciones y otras rutinas (en nuestro caso, en JavaScript, aunque éste sería un proceso de validez casi universal). A diferencia de su uso en matemáticos, en programación no solo pueden, sino que hasta debería considerarse buena práctica el asignar a estas variables nombres identificadores claros, que no den lugar a dudas sobre su uso, función o contenido.

Veremos en próximas entradas que las variables pueden ser de varios tipos; entre otros: boleano, numérico (entero, de coma flotante, etc.), de cadena de texto, matricial, definido por el usuario, etc, entendiendo por tipo de variable en realidad al tipo de datos para los que está destinada a almacenar (en algunos lenguajes una misma variable podría almacenar datos de distintos tipos durante distintos momentos de la ejecución del programa).

¿Qué usos tienen las variables?

Las variables permiten nos permiten hacer uso de valores que pueden resultarnos desconocidos, accediendo a ellos a través del nombre identificativo que le daremos a ésta; ejemplos de éstos son los nombres de un usuario que valida un formulario (nombre de usuario y contraseña), los resultado de operaciones aritméticas en una calculadora, etc.

Ejemplo: Cambiando automáticamente el contenido de un párrafo

     <!doctype html>
     <html>
           <head>
                <meta charset="utf-8">
                <title>Cambiando automáticamente el contenido de un párrafo con JavaScript</title>
           </head>
           <body>
                <h2>Contenidos generados con JavaScript:</h2>
               <script type="text/javascript">
                     //javascript
                     var variable1;
                     variable1 = "<h1>Formación Gráfica</h1>";
                     var variable2 = "<h2>Diseño. Cursos y talleres</h2>";
                     var variable3 = "<p><em>Fin del contenido creado con JavaScript</em></p>";
                     document.write(variable1);
                     document.write(variable2);
                     document.write(variable3);
                </script>
                <h2>Breve descripción de códigos:</h2>
                <dl>
                     <dt>var</dt>
                     <dd>Palabra clave para definir una variable.<br>
                               Nota 1: Mediante <em>var variable1;</em> declaramos la variable variable1<br>
                               Nota 2:&nbsp;Mediante var <em>variable2 = "Diseño. Cursos y talleres";</em> no solo declaramos la variable variable2 sino que, en la misma línea, la inicializamos (le asignamos un valor por primera vez.)</dd>
                     <dt>=</dt>
                     <dd>Se usa como signo de asignación; esto es, al término que se encuentra a su izquierda, se le asigna el valor que está a su derecha).</dd>
                     <dt>document.write(expresion1, expresion2,...);</dt>
                     <dd>Permite escribir en el documento en que se encuentra las expresiones dispuestas en medio de sus paréntesis, siendo posible introducir código html en éstos para que luego sea interpretado por el navegador.</dd>
                </dl>
           </body>
      </html>

Podremos comprobar el funcionamiento del código de ejemplo anterior copiando y pegando el código anterior en un nuevo documento html, que debemos abrir luego en cualquier navegador que tenga habilitado la ejecución de códigos de JavaScript.

Ejercicio:

Abrir la consola del navegador y ejecutar los códigos del ejemplo anterior para ver los resultados de la ejecución del script.

Notas importantes: 

  1. JavaScript externos: Es posible realizar llamados a códigos JavaScript externos de la misma forma en que llamamos a una hoja de estilos externa al html; esto es agregando el parámetro src, de la siguiente manera: <script type="text/javascript" src="/jsExterno.js"></script>
    Ejercicio: Crear un documento externo de JavaScript con las instrucciones del ejemplo anterior, y llamarlo desde el body de otro documento html, de modo que genere un resultado idéntico al anterior.
  2. Llamando a un código JavaScript: Es posible llamar (invocar) un código realizado en JavaScript desde el head del documento; antes del cierre del body del documento; o, como en nuestro caso, desde el lugar del código html que necesitemos que JavaScript haga las modificaciones, dependiendo de algunos parámetros que veremos más adelante.
  3. Esta entrada forma parte del curso de Diseño Web dentro del Campus Virtual de Formación Gráfica, donde se encuentra actualizada y adaptada como material didáctico.

Plácido Luna.

Visto 282 veces Modificado por última vez en Sábado, 10 Junio 2017 11:26