Trabajo de Promoción - Manejo de Variables en JavaScript

Conceptos y Paradigmas de Lenguajes de Programación

2012

Trabajo de Promoción

Manejo de Variables en JavaScript

Grupo 4Rapetti, Darío 2802/9Zalewski, Ezequiel 11023/9


Índice Página

● Í ndice - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 2● Introducción - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 3● Sintaxis de las variables - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 3● Tipos de datos que almacenan las variables - - - - - - - - - - - - - - - - - - - - 4

○ String - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 5○ Number - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 5○ Boolean - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 6○ Objetos y Arrays - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 6○ Undefined - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 7○ Null - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 7

● Manejo de variables - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 8○ Declaración - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 8○ Diferencias entre declarar variables con var , o no declararlas - - - - 9○ Alcance de las variables - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 9

Variables locales - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 9 Variables globales - - - - - - - - - - - - - - - - - - - - - - - - - - - - 10

● Punteros y Parámetros - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -10● Uso de la Memoria - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 11● Conclusión - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 12● Bibliografía - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 12

2/12


En el presente documento trataremos sobre los aspectos referidos al tema “Manejo de variables en JavaScript”. Describiremos temas básicos como su sintaxis, semántica, el alcance y tiempo de vida y algunas características más profundas como tipo de pasaje como parámetro, clases, prototipos, Garbage Collector.

IntroducciónJavaScript es un lenguaje de programación interpretado, dialecto del estándar

ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas, en bases de datos locales al navegador aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo.

JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo Java y JavaScript no están relacionados y tienen semánticas y propósitos diferentes.

Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del Document Object Model (DOM).

Tradicionalmente se venía utilizando en páginas web HTML para realizar operaciones y únicamente en el marco de la aplicación cliente, sin acceso a funciones del servidor. JavaScript se interpreta en el agente de usuario, al mismo tiempo que las sentencias van descargándose junto con el código HTML.

Sintaxis de las variablesLos nombres de las variables han de construirse con caracteres alfanuméricos, el

carácter subrayado “_” o el signo de pesos “$”. Aparte de esta, hay una serie de reglas adicionales para construir nombres para variables. La más importante es que tienen que comenzar por un carácter alfabético o el subrayado. No podemos utilizar caracteres raros como el signo “+”, un espacio o un “%”.

Nombres admitidos para las variables podrían ser:● Nombre● lugarDeNacimiento● _apellido

También hay que evitar utilizar nombres reservados como variables, por ejemplo no podemos usar para nuestra variable palabras como “return” o “for”, que son utilizadas para estructuras del propio lenguaje. Veamos ahora algunos nombres de variables que no está permitido utilizar:

3/12


● 7dias● mi nombre● return● f%oo

Tipos de datos que almacenan las variablesLas variables no necesitan ser declaradas para algún tipo específico, ya que pueden

almacenar datos de cualquier tipo en cualquier momento, es decir que este lenguaje es débilmente tipado.

Al momento de la asignación, JavaScript asigna los tipos por nosotros de forma interna.Relacionado al tipado débil esta la coerción de los datos, si bien lo realiza el intérprete

interno según ciertas reglas, en determinados casos, resultan muy poco intuitivas y pueden convertirse en fuente de errores.

Algunas de las reglas de coerción que utiliza son:● Si en una operación de suma uno de los operandos es una cadena, el tipo de datos final será otra cadena con el valor acumulado, y los siguientes, concatenados siempre siguiendo un orden estricto de izquierda a derecha.

console.log( 7 + 7 + "7" ); // "147"● Para el resto de operaciones básicas ( resta, multiplicación y división ), siempre trata de convertir en primer lugar las cadenas en números

console.log( "10" - 2 - 4 ); // 4● En los método de comparación no-estricta ‘==’ siempre trata de realizar una conversión desde cadenas a números para su evaluación.

console.log( 1 == "1" ); // TrueEn algunos casos se pueden generar un error que puede pasar inadvertido como por

ejemplo cuando operamos en bases diferentes al sistema decimalconsole.log( 1 + 012 ); // 11

Para estos casos JavaScript proporciona una serie de métodos “cast” que pueden ser usados por el programador para realizar la conversión.

Hay tres tipos de datos principales, dos tipos de datos compuestos y dos tipos de datos especiales:

Tipos de datos principales (primitivos):● String● Number● Boolean

Tipos de datos compuestos (de referencia):● Objeto● Array

Tipos de datos especiales● Null● Undefined

4/12


En JavaScript no existen las clases, sin embargo estas se pueden simular con las funciones. Se declara una función como una constructora de propiedades y métodos y se la invoca para crear algún objeto. Además se puede rescribir sus métodos utilizando el operador “prototype”

function PseudoClase(idClase, aValue) { this.idClase = idClase; this.aValue = aValue; this.muestraValue = function() { alert(this.aValue); }PseudoClase.prototype.muestraId = function() { alert(this.idClase);}var instanciaPseudoClase = new PseudoClase(3, 7);instanciaPseudoClase.muestraId();

StringLas variables de tipo string permiten almacenar cualquier sucesión de caracteres. Cada

carácter de la cadena se encuentra en una posición a la que se puede acceder individualmente, siendo el primer carácter el de la posición 0.

El valor de estas variables se indica encerrado entre comillas simples o doblesPara incluir un carácter de control (saltos de línea, tabulación, etc.) se utiliza el carácter

de escape “\”.Esta variable es automáticamente traducida a un valor de referencia para que de esta

forma se pueda utilizar como un objeto de la clase String junto con todas sus propiedades y métodos.

A partir de JavaScript 1.0 se puede utilizar el operador new sobre la clase String para crear un variables de tipo String.

var cadena1 = ‘Un “String”\n’;var cadena2 = new String (‘\tUn “String”’);

NumberInternamente, todos los números se guardan como valores de punto flotante, por lo que

no se hace distinción de estos.Los enteros pueden ser representados en base 10, en base hexadecimal agregando el

prefijo “0x” y en base octal agregando el prefijo “0” seguido de un número del 0 al 7.45 decimal0378 octal0xAf hexadecimal

Los de punto flotantes también pueden representarse en su notación científica utilizando la letra “e” para indicar la potencia.

0.0001 flotante notación normal

5/12


1.0e-4 flotante notación científica3.45e2 flotante notación científica

Además, existen valores especiales: ● NaN (no un número): cuando se realizan operaciones sobre datos inadecuados, como sobre un string ● Infinito positivo. Esto se usa cuando un número positivo es demasiado grande para representarlo.● Infinito negativo. Esto se usa cuando un número negativo es demasiado grande para representarlo.● Positivo y Negativo 0. Se distingue entre cero positivo y negativo.

BooleanMientras que los tipos de datos de cadena y numérico pueden tener un número

prácticamente ilimitado de valores diferentes, el tipo de dato Booleano sólo puede tener dos: los literales true y false. Un valor Booleano expresa la validez de una condición: indica si es verdadera o no.

Las comparaciones realizadas en las secuencias de comandos siempre tienen un resultado Booleano. Observe la siguiente línea de código:

y = (x == 2000);En este caso, el valor de la variable x se prueba para establecer si es igual al número

2000. Si es así, el resultado de la comparación es el valor Booleano true, que se asigna a la variable y. En caso contrario, el resultado de la comparación será el valor Booleano false.

Este tipo de valores es especialmente útil en las estructuras de control. Ejemplo: if (x == 2000)

z = z + 1; else

x = x + 1;Puede utilizar cualquier tipo de expresión como expresión comparativa. Toda expresión

que dé como resultado una cadena 0, null, undefined o vacía se interpretará como false. Las expresiones que den como resultado cualquier otro valor se interpretarán como true.

Objetos y ArraysAl igual que sucede con otros lenguajes de programación, los objetos se emplean en

JavaScript para organizar el código fuente de una forma más clara y para encapsular métodos y funciones comunes.

Técnicamente, un objeto es un array asociativo formado por propiedades y métodos, por tanto puede usarse la tradicional noción de arrays para definirlos, otras forma son la notación por puntos y la JSON.

JSON (JavaScript Object Notation) es un formato sencillo para el intercambio de información. El formato JSON permite representar estructuras de datos (arrays) y objetos (arrays asociativos) en forma de texto. La notación de objetos mediante JSON es una de las

6/12


características principales de JavaScript y es un mecanismo definido en los fundamentos básicos del lenguaje.

Notación de arrays:var elArray = new Array();var elObjeto = new Object();elObjeto['id'] = "10";elObjeto['nombre'] = "Objeto de prueba";

Notación por puntos:var elArray = new Array();var elObjeto = new Object();elObjeto.id = "10";elObjeto.nombre = "Objeto de prueba";

Notation JSON:var array = [];var objeto = { ‘nombre’: "Objeto de prueba", ‘id’: "10"};

UndefinedA todas las variables sin inicializar se les asigna el valor “undefined”, valor que

también es devuelto cuando se consulta por las propiedades de un elemento que no existe. En una variable booleana, el valor undefined es considerado como el valor False.

var test; // variable declarada pero no definida, ... // ... tiene el valor undefined

var testObj = {};alert(test); // la variable test existe pero su valor no ...

// ... está definido, muestra undefinedalert(testObj.myProp); // testObj existe, pero la propiedad no, ...

// ... muestra undefinedalert(undefined == null); // chequeo no restricto, muestra truealert(undefined === null); // chequeo restricto, muestra false

No existe en el lenguaje un valor literal para undefined, por lo que (x == undefined) no es una prueba segura de chequear si una variable es indefinida, porque en las versiones anteriores a ECMAScript 5, se puede por ejemplo declarar var undefined = "Variable definida";. Una forma más segura de comparar sería (typeof x === 'undefined').

NullA diferencia de undefined, el valor null es utilizado para indicar que una variable ha

sido declarada pero sin asignarle un valor particular. En una variable booleana, el valor null es considerado como el valor false.

Null es un tipo primitivo del lenguaje denotado por la palabra “null”. Cuando se realizan chequeos restrictos de tipos, el valor null no es igual al valor false.

7/12


alert(null == undefined); // chequeo no restricto, retorna truealert(null === undefined); // chequeo restricto, retorna falsealert(typeof null === 'object'); // true

Manejo de variables

DeclaraciónEn la mayoría de los lenguajes de programación es obligatorio declarar cada variable

antes de utilizarla en el código mientras que en JavaScript se puede hacer sobre la marcha según las vayamos necesitando.

Durante la ejecución de un programa, al llegar a la declaración de una variable, en ese momento se reserva el espacio en memoria y se agrega una referencia a las listas de variables y valores que son utilizadas por el Recolector de Basura (Garbage Collector) al momento de liberar memoria (tema que se amplía más adelante).

Hay dos maneras de declarar variables: Declaración explícita: Consiste en usar la sentencia var seguida del nombre de la variable. Esta opción es la más recomendada para que el código sea más legible. Declaración implícita: Es cuando escribimos directamente el nombre de la variable. En este caso debe ir acompañada obligatoriamente de un valor.

// declaración explícitavar cuidad;// declaración implícitacuidad = 'tablaLiquidacionHonorarios';// declaración explícita múltiplevar ciudad, provincia;// declaración explícita múltiple con inicializaciónvar cuidad = ‘La Plata’, provincia = ‘Buenos Aires’;// declaración implícita múltiple con inicializaciónciudad = ‘La Plata’, provincia = ‘Buenos Aires’;

También se pueden declarar constantes, por ejemplo el número pi, o un valor máximo. Se declaran con la sentencia const. Esta opción sólo es soportada a partir del motor 1.5 de JavaScript. Estas variables no pueden ser modificadas, sin embargo en navegadores en la que no son soportadas son tratadas como variables normales, pudiendo generarse errores con su modificación.

Diferencias entre declarar variables con var, o no declararlasComo hemos dicho, en JavaScript tenemos libertad para declarar o no las variables con

la palabra var, pero los efectos que conseguiremos en cada caso serán distintos. En concreto, cuando utilizamos var estamos haciendo que la variable que estamos declarando sea local al

8/12


ámbito donde se declara. Por otro lado, si no utilizamos la palabra var para declarar una variable, ésta será global a toda la página, sea cual sea el ámbito en el que haya sido declarada.

En el caso de una variable declarada en la página web, fuera de una función o cualquier otro ámbito más reducido, nos es indiferente si se declara o no con var, desde un punto de vista funcional. Esto es debido a que cualquier variable declarada fuera de un ámbito es global a toda la página. La diferencia se puede apreciar en una función por ejemplo, ya que si utilizamos var la variable será local a la función y si no lo utilizamos, la variable será global a la página.

<script type=”text/JavaScript” language=”JavaScript”>var num = 10; function miFuncion (){

num = 23; document.write(num); //imprime 23

} document.write(num); //imprime 10 //llamamos a la función miFuncion(); document.write(num); //imprime 23

</script>

Alcance de las variablesEn JavaScript no se puede acceder a variables que hayan sido definidas en otra página.

Por tanto, la propia página donde se define es el ámbito más habitual de una variable y le llamaremos a este tipo de variables globales a la página. Se verá que se pueden hacer variables con ámbitos distintos del global, es decir, variables que tendrán validez en lugares más acotados.

Variables locales

Las variables locales tienen valor tan sólo dentro de la función en que se han declarado, es decir, dentro del bloque de código comprendido entre function(){ y la llave de cierre } y deben declararse dentro de estos bloques.

<script type=”text/JavaScript” language=”JavaScript”>function miFuncion (){

var variableLocal }

</script>Se puede declarar una variable local con el mismo nombre que una global, en este caso

la variable global será visible desde toda la página, excepto en el ámbito donde está declarada

9/12


la variable local ya que en este sitio ese nombre de variable está ocupado por la local y es ella quien tiene validez.

<script type=”text/JavaScript” language=”JavaScript”>var num = 10; function miFuncion (){ var num = 23;

document.write(num); //imprime 23 } document.write(num); //imprime 10

</script>Sólo puede ser accedida dentro de la función. Cuando el script termina la ejecución de

la función, la variable es destruida.

Variables globales

Las variables globales tienen valor para todo el documento HTML y se deben declarar al inicio del script y fuera de toda función: el lugar preferible es en las marcas <SCRIPT> de la sección <HEAD> de tal manera que creemos los contenedores de los valores antes de darles cualquier uso.

<script type=”text/JavaScript” language=”JavaScript”>var variableGlobal;

</script>Todas las funciones dentro de la página pueden accederla. El tiempo de vida de estas

variables comienza cuando son declaradas y termina cuando la página es cerrada.

Punteros y ParámetrosEn JavaScript no existe manejo de punteros como en otros lenguajes. Internamente

maneja como pasar los valores según su tipo. Si son datos tipo primitivos los pasa como una copia pero si son objetos o funciones los pasa como referencia. Esto quiere decir que si pasamos un array u otro objeto como parámetro a una función y lo modificamos, estos cambios serán persistente al finalizar la función.

En una función se puede pasar cualquier números de parámetros y aquellos parámetros que no hayan sido declarados como tal en el cuerpo de la función, se encuentran almacenados en una variable de tipo object llamada “arguments”, que puede ser accedida como si fuera un array, esta variable es creada solo si se pasan parámetros que no se hayan definido en la cabecera de la función y su tiempo de vida y alcance comprende desde que se invoca la función hasta que esta termina.

10/12


Uso de la MemoriaEn JavaScript el manejo de memoria está controlada por el navegador, esto no quiere

decir que algún programa pueda controlar o administrar la memoria RAM, por tanto no existe un limite de memoria para un programa JavaScript pero si afecta al cliente.

El método de liberación de memoria que se utiliza es el Garbage Collector, precisamente con algún algoritmo Mark-and-Sweep dependiendo del navegador web (en JavaScript 1.1 se utiliza el algoritmo Reference Counting dado que fue implementado en Netscape). Este tipo algoritmo funciona en dos pasos, el primero, es recorrer todas las variables declaradas en el entorno de JavaScript y poner una marca en los valores referenciados por estás, en el caso de que se un objeto o array lo hace de forma recursiva. En el segundo paso, hace un recorrido por la lista de valores y desaloca de memoria aquellos que no han sido marcados ya que esto indica que no han podido ser referenciados por ninguna variable.

Adicionalmente, se provee a los objetos de un método llamado “finalize()” que es invocado antes de que este sea desalocado de memoria. El objeto debe sobrescribir este método para realizar cualquier tarea de limpieza final, como la liberación de recursos del sistema (ficheros, conexiones, etc.).

A partir de JavaScript 1.1, las variables pueden ser eliminadas de memoria al utilizar el operador “delete” salvo cuando estas referencian a los objetos en cuyo caso sólo eliminan la referencia dejando al Garbage Collector como encargado de sacarla de memoria.

El mayor problema a evitar en el manejo de memoria son las referencias circulares, estas surgen cuando se le asigna a una variable de JavaScript un objeto DOM (interfaz de programación de aplicaciones para acceder, añadir y cambiar dinámicamente contenido estructurado en documentos con lenguajes como ECMAScript), y a este se le asigna la misma variable como atributo. Hacer esto implica que la variable siempre estará referenciada por un objeto DOM el cual posee un contador de referencias que maneja su permanencia en memoria, por tal motivo el Garbage Collector nunca podrá eliminarla de la memoria y el objeto DOM tampoco se eliminará ya que es referenciado por esta misma variable.

Ocurren también referencias circulares cuando se escriben funciones dentro de otras, porque cuando una función es escrita dentro de otra se mantiene una referencia a la que la incluye (para poder usar sus variables).

11/12


ConclusiónJAVASCRIPT es un lenguaje popular que cuenta con mucha documentación y códigos

de ejemplo en internet. La forma de pasaje de parámetros, la declaración y manejo de objetos y las operaciones

entre diferentes tipos de variables junto con toda su sintaxis hacen de JavaScript un lenguaje muy flexible, pero a la vez poco legible si no se programa siguiendo alguna convención en la escritura del código.

Otro aspecto importante de este lenguaje es la libertad que le brinda al programador de desligarse del manejo de los espacios en memoria y dedicar todo su esfuerzo en el desarrollo del código de la aplicación. Sin embargo, esta libertad no está libre de inconvenientes dado que al ser dedicado a la programación web en la que se utilizan diferentes elementos fuera del ámbito del propio lenguaje, se pueden generar fugas de memoria al establecerse referencias circulares. De todas formas, como su forma de manejar la memoria está dado por el navegador web y cada uno implementa su propio estilo, este último problema se encuentra en continuo análisis y desarrollo de mejoras.

Bibliografía● http :// es . wikipedia . org ● http :// www . desarrolloweb . com ● http :// www . librosweb . es / ajax / ● http :// msdn . microsoft . com / es - es / library

12/12

Trabajo de Promoción - Manejo de Variables en JavaScript

Documents

Transcript of Trabajo de Promoción - Manejo de Variables en JavaScript