Unidad 2. Manejo de La Sintaxis Del Lenguaje

Descargar como pdf o txt
Descargar como pdf o txt
Está en la página 1de 25

Desarrollo de Aplicaciones Web

Desarrollo Web en Entorno Cliente

Unidad 2
Manejo de la sintaxis del lenguaje

Resultado de aprendizaje

Resultado de aprendizaje 2. Escribe sentencias simples, aplicando la sintaxis del lenguaje y


verificando su ejecución sobre navegadores web.

Introducción

Antes de comenzar a desarrollar programas y utilidades con JavaScript es necesario conocer


los elementos básicos con los que se construyen las aplicaciones. En esta unidad se explica en
detalle y comenzando desde cero los conocimientos básicos necesarios para poder
comprender la sintaxis básica de JavaScript.
1
Página

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente

Contenido
1. Sintaxis de JavaScript ............................................................................................................. 3
2. Espacios en blanco ................................................................................................................ 3
3. Comentarios al código ........................................................................................................... 3
4. Variables. Declaración. Inicialización. Ámbito ....................................................................... 4
5. Tipos de variables .................................................................................................................. 6
5.1. Tipos primitivos ............................................................................................................. 6
5.1.1. Variables de tipo undefined ............................................................................... 6
5.1.2. Variables de tipo null .......................................................................................... 6
5.1.3. Variables de tipo boolean.................................................................................... 6
5.1.4. Variables de tipo número ...................................................................................... 7
5.1.5. Variables de tipo cadena de texto ......................................................................... 7
5.2. Tipos de referencia o clases .......................................................................................... 8
6. Conversión de tipos de datos .............................................................................................. 10
7. Operadores .......................................................................................................................... 11
7.1. Operador de asignación .............................................................................................. 11
7.2. Operadores aritméticos............................................................................................... 12
7.3. Operadores de incremento y decremento .................................................................. 12
7.4. Operadores lógicos ...................................................................................................... 14
7.4.1. Operador de negación ......................................................................................... 14
7.4.2. Operador AND ..................................................................................................... 14
7.4.3. Operador OR........................................................................................................ 15
7.5. Operadores relacionales.............................................................................................. 15
7.6. Operador typeof ....................................................................................................... 16
7.7. Operador instanceof .............................................................................................. 16
8. Estructuras de control de flujo ............................................................................................ 17
8.1. Estructura if ............................................................................................................... 17
8.2. Estructura if-else .................................................................................................... 18
8.3. Estructura switch ...................................................................................................... 19
8.4. Estructura for ............................................................................................................. 21
8.5. Estructura while ........................................................................................................ 22
8.6. Estructura do-while .................................................................................................. 23
9. Estructura try..................................................................................................................... 23
10. Cláusula finally ........................................................................................................... 24
2

11. Mensajes ......................................................................................................................... 24


Página

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente

1. Sintaxis de JavaScript
La sintaxis de un lenguaje de programación se define como el conjunto de reglas que deben
seguirse al escribir el código fuente de los programas para considerarse como correctos para ese
lenguaje de programación. Las normas básicas que definen la sintaxis de JavaScript son las
siguientes:

• No se tienen en cuenta los espacios en blanco y las nuevas líneas. Al igual que sucede
con XHTML, el intérprete de JavaScript ignora cualquier espacio en blanco sobrante, por
lo que el código se puede ordenar de forma adecuada para entenderlo mejor (tabulando
las líneas, añadiendo espacios, creando nuevas líneas, etc.)
• Se distinguen las mayúsculas y minúsculas.
• No se define el tipo de las variables. Al crear una variable no es necesario indicar el tipo
de dato que almacenará. De esta forma, una misma variable puede almacenar diferentes
tipos de datos durante la ejecución del script.
• No es necesario terminar cada sentencia con el carácter de punto y coma (;). En la
mayoría de lenguajes de programación es obligatorio terminar cada sentencia con el
carácter de punto y coma. JavaScript no obliga a hacerlo, pero es conveniente seguir la
tradición de terminar cada sentencia con este carácter.
• Se pueden incluir comentarios. Los comentarios se utilizan para añadir información en
el código fuente del programa. Aunque el contenido de los comentarios no se visualiza
por pantalla, sí que se envía al navegador del usuario junto con el resto del script, por lo
que es necesario extremar las precauciones sobre la información incluida en los
comentarios.

2. Espacios en blanco
En JavaScript no se tienen en cuenta los espacios en blanco y las nuevas líneas. Al igual que
sucede con XHTML, el intérprete de JavaScript ignora cualquier espacio en blanco sobrante, por
lo que el código se puede ordenar de forma adecuada para entenderlo mejor tabulando las
líneas, añadiendo espacios, creando nuevas líneas, etc. Sin embargo, en ocasiones estos espacios
en blanco son totalmente necesarios, por ejemplo, para reparar nombres de variables o palabras
reservadas.

A continuación, se muestra un ejemplo donde el espacio en blanco entre var y variable no


puede ser eliminado, pero sí el resto:

var variable = 12;

3. Comentarios al código
A la hora de programar en cualquier lenguaje de programación es muy importante que comentes
tu código. Los comentarios son sentencias que el intérprete de JavaScript ignora. Sin embargo,
estas sentencias permiten a los desarrolladores dejar notas sobre cómo funcionan las cosas en
sus scripts.

Los comentarios ocupan espacio dentro de tu código de JavaScript, por lo que cuando alguien se
descargue vuestro código necesitará más o menos tiempo, dependiendo del tamaño de vuestro
fichero. Aunque esto pueda ser un problema, es muy recomendable que documentes tu código
lo máximo posible.
3
Página

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
JavaScript permite dos estilos de comentarios. Un estilo consiste en dos barras inclinadas hacia
la derecha sin espacios entre ellas (//) y es muy útil para comentar una línea sencilla. JavaScript
ignorará cualquier carácter a la derecha de esas barras inclinadas en la misma línea, incluso si
aparecen en el medio de una línea.

// A continuación se muestra un mensaje


console.log("mensaje de prueba");

Para comentarios que ocupen varias líneas podemos emplear /* para comenzar la sección de
comentarios y */ para cerrar la sección de comentarios.
/* Los comentarios de varias líneas son muy útiles
cuando se necesita incluir bastante información
en los comentarios */
console.log("mensaje de prueba");

4. Variables. Declaración. Inicialización. Ámbito


Las variables en los lenguajes de programación siguen una lógica similar a las variables utilizadas
en otros ámbitos, como las matemáticas. Una variable es un elemento que se emplea para
almacenar y hacer referencia a otro valor. Gracias a las variables es posible crear programas
genéricos, es decir, programas que funcionan siempre igual independientemente de los valores
concretos utilizados. De la misma forma que si no existieran las variables en matemáticas no se
podrían definir las ecuaciones y fórmulas, en programación no se podrían hacer programas
realmente útiles sin ellas.

El siguiente programa suma dos números utilizando variables para almacenar y referirse a cada
número:

numero_1 = 3
numero_2 = 1
resultado = numero_1 + numero_2

Los elementos numero_1 y numero_2 son variables que almacenan los valores que utiliza el
programa. La variable resultado se calcula siempre en función del valor almacenado por las
variables anteriores, por lo que este programa funciona correctamente para cualquier par de
números indicado. Si se modifica el valor de las variables numero_1 y numero_2, el programa
sigue funcionando correctamente.

Las variables en JavaScript se crean mediante la palabra reservada var. De esta forma, el
ejemplo anterior se puede realizar en JavaScript de la siguiente manera:

var numero_1 = 3;
var numero_2 = 1;
var resultado = numero_1 + numero_2;

La palabra reservada var solamente se debe indicar al definir por primera vez la variable, lo
que se denomina declarar una variable. Cuando se utilizan las variables en el resto de
instrucciones del script solamente es necesario indicar su nombre. En otras palabras, en el
ejemplo anterior sería un error indicar lo siguiente:

var numero_1 = 3;
4

var numero_2 = 1;
Página

var resultado = var numero_1 + var numero_2;

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
Si cuando se declara una variable se le asigna también un valor se dice que la variable ha sido
inicializada. En JavaScript no es obligatorio inicializar las variables, ya que se pueden declarar
por una parte y asignarles un valor posteriormente. Por tanto, el ejemplo anterior se puede hacer
de la siguiente manera:

var numero_1;
var numero_2;
numero_1 = 3;
numero_2 = 1;
var resultado = numero_1 + numero_2;

Una de las características más sorprendentes de JavaSript para los programadores habituados a
otros lenguajes de programación es que tampoco es necesario declarar las variables, es decir,
se pueden utilizar variables que no se han definido anteriormente mediante la palabra reservada
var. El ejemplo anterior también puede realizarse en JavaScript de la siguiente forma:

var numero_1 = 3;
var numero_2 = 1;
resultado = numero_1 + numero_2;

La variable resultado no está declarada, por lo que JavaScript crea una variable global y le
asigna el valor correspondiente. De la misma forma, también sería correcto el siguiente código:
numero_1 = 3;
numero_2 = 1;
resultado = numero_1 + numero_2;

En cualquier caso, se recomienda declarar todas las variables que se vayan a utilizar.

El nombre de una variable también se conoce como identificador y debe cumplir las siguientes
normas:

• Sólo puede estar formado por letras, números y los símbolos $ (dólar) y _ (guión bajo).
• El primer carácter no puede ser un número.

Recuerda

A continuación, se indica el listado de palabras reservadas en JavaScript y que no podemos utilizar para
nombrar nuestras variables, parámetros, funciones, operadores o etiquetas:
• abstract • long
• boolean break byte • native new null
• case catch char class const • package private protected public
continue • return
• debugger default delete do • short static super switch
double synchronized
• else enum export extends • this throw throws transient true try
• false final finally float for typeof
function • var volatile void
• goto • while with
• if
5

implements import in
Página

instanceof int interface

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente

Por lo tanto, las siguientes variables tienen nombres correctos:

var $numero1;
var _$letra;
var $$$otroNumero;
var $_a__$4;

Sin embargo, las siguientes variables tienen identificadores incorrectos:

var 1numero; // Empieza por un número


var numero;1_123; // Contiene un carácter ";"

5. Tipos de variables
JavaScript divide los distintos tipos de variables en dos grupos: tipos primitivos y tipos de
referencia o clases.

5.1. Tipos primitivos


JavaScript define cinco tipos primitivos: undefined, null, boolean, number y string.
Además de estos tipos, JavaScript define el operador typeof para averiguar el tipo de una
variable.

5.1.1. Variables de tipo undefined


Las variables de tipo undefined se corresponden a las variables que han sido definidas y
todavía no se les ha asignado un valor:
var variable1;
typeof variable1; // Devuelve "undefined"

5.1.2. Variables de tipo null


Las variables de tipo null son similares a undefined y, de hecho, en JavaScript se consideran
iguales (undefined == null). El tipo se suele utilizar para representar objetos que en ese
momento no existen.

var nombreUsuario = null;

5.1.3. Variables de tipo boolean


Las variables de tipo boolean, también conocidas con el nombre de variables de tipo lógico,
son variables que sólo pueden almacenar uno de los dos valores especiales definidos y que
representan el valor true (verdadero) o false (falso). Los valores true y false son valores
especiales, de forma que no son palabras ni números ni ningún otro tipo de valor. Este tipo de
variables son esenciales para crear cualquier aplicación. Cuando es necesario convertir una
variable numérica a una variable de tipo boolean, JavaScript aplica la siguiente conversión: el
número 0 se convierte en false y cualquier otro número distinto de 0 se convierte en true.
Por este motivo, en ocasiones se asocia el número 0 con el valor false y el número 1 con el
valor true.

var variable1 = true;


var variable2 = false;
6
Página

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente

5.1.4. Variables de tipo número


Las variables de tipo número son representadas internamente como un dato de 64 bits en coma
flotante, al igual que el tipo de dato double en Java. A diferencia de otros lenguajes de
programación, no existe una diferente entre un número entero y otro decimal, por lo que 1 y
1.0 son el mismo valor. Esto es significativo, ya que evitamos los problemas de desbordamiento
en tipos de dato pequeños al no existir necesidad de conocer el tipo de dato. Si el número es
entero se indica su valor directamente:

var variable1 = 10;

Si el número es decimal se utiliza el carácter punto (.) en vez de coma (,) para separar la parte
entera y la parte decimal:
var variable2 = 234.65;

Además del sistema numérico decimal, también se pueden indicar valores en el sistema octal (si
se incluye un cero delante del número) y en sistema hexadecimal (si se incluye un cero y una x
delante del número):

var variable1 = 10;


var variable_octal = 034;
var variable_hexadecimal = 0xA3;

JavaScript también define tres valores especiales muy útiles cuando se trabaja con números. En
primer lugar, se definen los valores Infinity y –Infinity para representar números
demasiado grandes (positivos y negativos) y con los que JavaScript no puede trabajar.
var variable1 = 3, variable2 = 0;
console.log(variable1/variable2); // Muestra "Infinity"

El otro valor especial definido por JavaScript es NaN, que es el acrónimo de Not a Number. De
esta forma, si se realizan operaciones matemáticas con variables no numéricas el resultado será
de tipo NaN. Para manejar los valores NaN se utiliza la función relacionada isNaN(), que
devuelve true si el parámetro que se le pasa no es un número:
var variable1 = 3;
var variable2 = "hola";
isNaN(variable1); // false
isNaN(variable2); // true
isNaN(variable1 + variable2); // true

5.1.5. Variables de tipo cadena de texto


Las variables de tipo cadena de texto permiten almacenar cualquier sucesión de caracteres, por
lo que se utilizan ampliamente en la mayoría de aplicaciones JavaScript. 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. Para asignar el valor a una variable de este tipo se encierra
el valor entre comillas dobles o simples:

var variable1 = "hola";


var variable2 = 'mundo';
var variable3 = "hola mundo, esta es una frase más larga";
7
Página

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
En ocasiones, el texto que se almacena en las variables no es tan sencillo. Si el propio texto
contiene comillas simples o dobles, la estrategia que se sigue es la de encerrar el texto con las
comillas (simples o dobles) que no utilice el texto:

/* El contenido de texto1 tiene comillas simples, por lo que se encierra


con comillas dobles */
var texto1 = "Una frase con 'comillas simples' dentro";

/* El contenido de texto2 tiene comillas dobles, por lo que se encierra


con comillas simples */
var texto2 = 'Una frase con "comillas dobles" dentro';

Además, existen otros caracteres que son difíciles de incluir en una variable de texto (tabulador,
ENTER, etc.). Para resolver estos problemas, JavaScript define un mecanismo para incluir de
forma sencilla caracteres especiales y problemáticos dentro de una cadena de texto. El
mecanismo consiste en sustituir el carácter problemático por una combinación simple de
caracteres. A continuación, se muestran las conversiones que se deben utilizar:

• Si se quiere incluir…• Se debe incluir…


Una comilla simple \'
Una comilla doble \"
Una barra inclinada \\
Un retroceso \b
Una tabulación \t
Una nueva línea \n
Un salto de línea \r
Un avance de página \f
Tabla 1. Caracteres especiales

De esta forma, el ejemplo anterior que contenía comillas simples y dobles dentro del texto se
puede rehacer de la siguiente forma:
var texto1 = 'Una frase con \'comillas simples\' dentro';
var texto2 = "Una frase con \"comillas dobles\" dentro";

Este mecanismo de JavaScript se denomina mecanismo de escape de los caracteres


problemáticos y es habitual decir que los caracteres han sido escapados.

5.2. Tipos de referencia o clases


Aunque JavaScript no define el concepto de clase, los tipos de referencia se asemejan a las clases
de otros lenguajes de programación. Los objetos en JavaScript se crean mediante la palabra
reservada new y el nombre de la clase que se va a instanciar. De esta forma, para crear un
objeto de tipo String se indica lo siguiente:

var variable1 = new String("hola mundo");

Los paréntesis solamente son obligatorios cuando se utilizan argumentos, aunque se


recomienda incluirlos incluso cuando no se utilicen.

JavaScript define una clase para cada uno de los tipos de datos primitivos. De esta forma, existen
objetos de tipo Boolean para las variables booleanas, Number para las variables numéricas y
8

String para las variables de cadenas de texto. Las clases Boolean, Number y String
Página

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
almacenan los mismos valores de los tipos de datos primitivos y añaden propiedades y
métodos para manipular sus valores.

var longitud = "hola mundo".length;

La propiedad length sólo está disponible en la clase String, por lo que en principio no debería
poder utilizarse en un dato primitivo de tipo cadena de texto. Sin embargo, JavaScript convierte
el tipo de dato primitivo al tipo de referencia String, obtiene el valor de la propiedad length
y devuelve el resultado. Este proceso se realiza de forma automática y transparente para el
programador.

En realidad, con una variable de tipo String no se pueden hacer muchas más cosas que con su
correspondiente tipo de dato primitivo. Por este motivo, no existen muchas diferencias prácticas
entre utilizar el tipo de referencia o el tipo primitivo, salvo en el caso del resultado del operador
typeof y en el caso de la función eval(), como se verá más adelante.

La principal diferencia entre los tipos de datos es que los datos primitivos se manipulan por valor
y los tipos de referencia se manipulan por referencia. Los conceptos por valor y por referencia
son iguales que en el resto de lenguajes de programación, aunque existen diferencias
importantes.

Cuando un dato se manipula por valor, lo único que importa es el valor en sí. Cuando se asigna
una variable por valor a otra variable, se copia directamente el valor de la primera variable en la
segunda. Cualquier modificación que se realice en la segunda variable es independiente de la
primera variable. De la misma forma, cuando se pasa una variable por valor a una función sólo
se pasa una copia del valor. Así, cualquier modificación que realice la función sobre el valor
pasado no se refleja en el valor de la variable original.

En el siguiente ejemplo, una variable se asigna por valor a otra variable:

var variable1 = 3;
var variable2 = variable1;

variable2 = variable2 + 5;
// Ahora variable2 = 8 y variable1 sigue valiendo 3

La variable2 se asigna por valor en la variable1. Aunque las dos variables almacenan en
ese momento el mismo valor, son independientes y cualquier cambio en una de ellas no afecta
a la otra. El motivo es que los tipos de datos primitivos siempre se asignan y se pasan por valor.

Sin embargo, en el siguiente ejemplo se utilizan tipos de datos de referencia:

// variable1 = 25 diciembre de 2009


var variable1 = new Date(2009, 11, 25);
// variable2 = 25 diciembre de 2009
var variable2 = variable1;

// variable2 = 31 diciembre de 2010


variable2.setFullYear(2010, 11, 31);
// Ahora variable1 también es 31 diciembre de 2010

En el ejemplo anterior, se utiliza un tipo de dato de referencia que se verá más adelante, que se
9

llama Date y que se utiliza para manejar fechas. Se crea una variable llamada variable1 y se
Página

inicializa la fecha a 25 de diciembre de 2009. Al constructor del objeto Date se le pasa el año, el

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
número del mes (siendo 0 = enero, 1 = febrero, ..., 11 = diciembre) y el día (al contrario que el
mes, los días no empiezan en 0 sino en 1). A continuación, se asigna el valor de la variable1 a
otra variable llamada variable2. Como Date es un tipo de referencia, la asignación se realiza
por referencia. Por lo tanto, las dos variables quedan unidas y hacen referencia al mismo objeto,
al mismo dato de tipo Date. De esta forma, si se modifica el valor de variable2 el valor de
variable1 se verá automáticamente modificado.

6. Conversión de tipos de datos


JavaScript es un lenguaje de programación no tipado, lo que significa que una misma variable
puede guardar diferentes tipos de datos a lo largo de la ejecución de la aplicación. De esta forma,
una variable se podría inicializar con un valor numérico, después podría almacenar una cadena
de texto y podría acabar la ejecución del programa en forma de variable booleana. No obstante,
en ocasiones es necesario que una variable almacene un dato de un determinado tipo. Para
asegurar que así sea, se puede convertir una variable de un tipo a otro, lo que se denomina
typecasting.

Cuando intentamos sumar dos números, si uno de esos dos números está en formato de cadena
de texto, JavaScript lo que hará es intentar convertir el otro número a una cadena y los
concatenará de la siguiente manera:

4 + "5" // resultado = "45"

Otro ejemplo podría ser el siguiente:

4 + 5 + "6" // resultado = "96"

Esto puede resultar ilógico, pero sí que tiene su lógica. La expresión se evalúa de izquierda a
derecha. La primera operación funciona correctamente devolviendo el valor de 9, pero al
intentar sumarle una cadena de texto "6" JavaScript convierte el número anterior a una cadena
de texto y lo concatenará al comienzo del "6". Para convertir cadenas a números dispones de
las funciones parseInt() y parseFloat(), que convierten las variables que se le indican en
un número entero o en un número decimal, respectivamente. Estas funciones devuelven el valor
NaN si el carácter que se les pasa no es un número. Si el primer carácter es un número, se
continúa con los siguientes caracteres mientras estos sean números.

var variable1 = "hola";


parseInt(variable1); // Devuelve NaN

var variable2 = "34";


parseInt(variable2); // Devuelve 34

var variable3 = "34hola23";


parseInt(variable3); // Devuelve 34

var variable4 = "34.23";


parseInt(variable4); // Devuelve 34

En el caso de parseFloat(), el comportamiento es el mismo que el anterior, pero también se


considera válido el carácter . que indica la parte decimal del número:
10

var variable1 = "hola";


Página

parseFloat(variable1); // Devuelve NaN

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
var variable2 = "34";
parseFloat(variable2); // Devuelve 34.0

var variable3 = "34hola23";


parseFloat(variable3); // Devuelve 34.0

var variable4 = "34.23";


parseFloat(variable4); // Devuelve 34.23

Si lo que deseas es realizar la conversión de números a cadenas es mucho más sencillo, ya que
simplemente tienes que concatenar una cadena vacía al principio y, de esta forma, el número
será convertido a su cadena equivalente:

("" + 3400) // resultado = "3400"


("" + 3400).length // resultado = 4

En el segundo ejemplo podemos ver la gran potencia de la evaluación de expresiones. Los


paréntesis fuerzan la conversión del número a una cadena. Una cadena de texto en JavaScript
tiene una propiedad asociada con ella que es la longitud (length), la cual te devolverá en este
caso el número 4, indicando que hay 4 caracteres en la cadena 3400. La longitud de una cadena
es un número, no una cadena.

JavaScript también incluye un método toString(), el cual permite convertir variables de


cualquier tipo a variables de cadena de texto, tal y como se muestra en el siguiente ejemplo:

var variable1 = true;


variable1.toString(); // Devuelve "true" como cadena de texto
var variable2 = 5;
variable2.toString(); // Devuelve "5" como cadena de texto

7. Operadores
Las variables por sí solas son de poca utilidad. Hasta ahora, sólo se ha visto cómo crear variables
de diferentes tipos. Para hacer programas realmente útiles son necesarias otro tipo de
herramientas.

Los operadores permiten manipular el valor de las variables, realizar operaciones matemáticas
con sus valores y comparar diferentes variables. De esta forma, los operadores permiten a los
programas realizar cálculos complejos y tomar decisiones lógicas en función de comparaciones
y otros tipos de condiciones.

7.1. Operador de asignación


El operador de asignación es el más utilizado y el más sencillo. Este operador se utiliza para
guardar un valor específico en una variable. El símbolo utilizado es =.

var numero1 = 3;

A la izquierda del operador siempre debe indicarse el nombre de una variable. A la derecha del
operador se pueden indicar variables, valores, condiciones lógicas, etc.:
var numero1 = 3;
11

var numero2 = 4;
Página

/* Error porque la asignación siempre se realiza a una variable,


por lo que en la izquierda no se puede indicar un número */

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
5 = numero1;

// Ahora la variable numero1 vale 5


numero1 = 5;

// Ahora, la variable numero1 vale 4


numero1 = numero2;

7.2. Operadores aritméticos


JavaScript permite realizar manipulaciones aritméticas sobre el valor de las variables numéricas.
Los operadores definidos son suma (+), resta (-), multiplicación (*) y división (/).

var numero1 = 10;


var numero2 = 5;
resultado = numero1 / numero2; // resultado = 2
resultado = 3 + numero1; // resultado = 13
resultado = numero2 – 4; // resultado = 1
resultado = numero1 * numero 2; // resultado = 50

Además de los cuatro operadores básicos, JavaScript define otro operador aritmético que no es
sencillo de entender cuando se estudia por primera vez, pero que es muy útil en algunas
ocasiones. Se trata del operador módulo, el cual calcula el resto de la división entera de dos
números. Por ejemplo, si se divide 10/5 la división es exacta y da un resultado de 2. El resto de
esa división es 0, por lo que el módulo es igual a 0. Sin embargo, si se divide 9/5 la división no es
exacta, el resultado es 1 y el resto 4, por lo que el módulo es igual a 4. El operador módulo en
JavaScript se indica mediante el símbolo %, que no debe confundirse con el cálculo del
porcentaje:

var numero1 = 10;


var numero2 = 5;
resultado = numero1 % numero2; // resultado = 0

numero1 = 9;
numero2 = 5;
resultado = numero1 % numero2; // resultado = 4

Los operadores aritméticos también se pueden combinar con el operador de asignación para
abreviar su notación:
var numero1 = 5;
numero1 += 3; // numero1 = numero1 + 3 = 8
numero1 -= 1; // numero1 = numero1 - 1 = 4
numero1 *= 2; // numero1 = numero1 * 2 = 10
numero1 /= 5; // numero1 = numero1 / 5 = 1
numero1 %= 4; // numero1 = numero1 % 4 = 1

7.3. Operadores de incremento y decremento


Los operadores de incremento y decremento solamente son válidos para las variables
numéricas y se utilizan para incrementar o decrementar en una unidad el valor de una variable.
Por ejemplo:
12

var numero = 5;
Página

++numero;
console.log(numero); // numero = 6

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
El operador de incremento se indica mediante el prefijo ++ en el nombre de la variable. El
resultado es que el valor de esa variable se incrementa en una unidad. Por lo tanto, el anterior
ejemplo es equivalente a:

var numero = 5;
numero = numero + 1;
console.log(numero); // numero = 6

De forma equivalente, el operador decremento (indicado como un prefijo -- en el nombre de


la variable) se utiliza para decrementar el valor de la variable:

var numero = 5;
--numero;
console.log(numero); // numero = 4

El anterior ejemplo es equivalente a:

var numero = 5;
numero = numero - 1;
console.log(numero); // numero = 4

Los operadores de incremento y decremento no solamente se pueden indicar como prefijo del
nombre de la variable, sino que también es posible utilizarlos como sufijo. En este caso, su
comportamiento es similar, pero muy diferente.

var numero = 5;
numero++;
console.log(numero); // numero = 6

El resultado de ejecutar el script anterior es el mismo que cuando se utiliza el operador


++numero, por lo que puede parecer que es equivalente indicar el operador ++ delante o detrás
del identificador de la variable. Sin embargo, el siguiente ejemplo muestra sus diferencias:
var numero1 = 5;
var numero2 = 2;
numero3 = numero1++ + numero2;
// numero3 = 7, numero1 = 6

var numero1 = 5;
var numero2 = 2;
numero3 = ++numero1 + numero2;
// numero3 = 8, numero1 = 6

Si el operador ++ se indica como prefijo del identificador de la variable su valor se incrementa


antes de realizar cualquier otra operación. Si el operador ++ se indica como sufijo del
identificador de la variable su valor se incrementa después de ejecutar la sentencia en la que
aparece.

Por lo tanto, en la instrucción numero3 = numero1++ + numero2; el valor de numero1 se


incrementa después de realizar la operación (primero se suma y numero3 vale 7, después se
incrementa el valor de numero1 y vale 6). Sin embargo, en la instrucción numero3 =++numero1
+ numero2; primero se incrementa el valor de numero1 y después se realiza la suma (primero
13

se incrementa numero1 y vale 6, después se realiza la suma y numero3 vale 8).


Página

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente

7.4. Operadores lógicos


Los operadores lógicos son imprescindibles para realizar aplicaciones complejas, ya que se
utilizan para tomar decisiones sobre las instrucciones que debería ejecutar el programa en
función de ciertas condiciones. El resultado de cualquier operación que utilice operadores
lógicos siempre es un valor lógico o booleano.

7.4.1. Operador de negación


Uno de los operadores lógicos más utilizados es el de la negación. Se utiliza para obtener el valor
contrario al valor de la variable:

var visible = true;


console.log(!visible); // Muestra "false" y no "true"

La negación lógica se obtiene prefijando el símbolo ! al identificador de la variable. El


funcionamiento de este operador es el siguiente:

variable !variable
true false
false true
Tabla 2. Operador de negación

Si la variable original es de tipo booleano es muy sencillo obtener su negación. Sin embargo, para
obtener la negación de un número o de una cadena de texto hay que realizar su conversión a un
valor booleano:

• Si la variable contiene un número se transforma en false si vale 0 y en true para


cualquier otro número (positivo o negativo, decimal o entero).
• Si la variable contiene una cadena de texto se transforma en false si la cadena es
vacía ("") y en true en cualquier otro caso.

var cantidad = 0;
vacio = !cantidad; // vacio = true

cantidad = 2;
vacio = !cantidad; // vacio = false

var mensaje = "";


mensajeVacio = !mensaje; // mensajeVacio = true

mensaje = "Bienvenido";
mensajeVacio = !mensaje; // mensajeVacio = false

7.4.2. Operador AND


La operación lógica AND obtiene su resultado combinando dos valores booleanos. El operador
se indica mediante el símbolo && y su resultado solamente es true si los dos operandos son
true:

Variable1 Variable2 Variable1 && variable2


true true true
14

true false false


false true false
Página

false false false


Tabla 3. Operador AND

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
var valor1 = true;
var valor2 = false;
resultado = valor1 && valor2; // resultado = false

valor1 = true;
valor2 = true;
resultado = valor1 && valor2; // resultado = true;

7.4.3. Operador OR
La operación lógica OR también combina dos valores booleanos. El operador se indica mediante
el símbolo || y su resultado es true si alguno de los dos operandos es true:

Variable1 Variable2 Variable1 && variable2


true true true
true false true
false true true
false false false
Tabla 4. Operador OR

var valor1 = true;


var valor2 = false;
resultado = valor1 || valor2; // resultado = true

valor1 = false;
valor2 = false;
resultado = valor1 || valor2; // resultado = false

7.5. Operadores relacionales


Los operadores relacionales definidos por JavaScript son idénticos a los que definen las
matemáticas: mayor que (>), menor que (=), menor o igual (<=), igual que (==) y distinto de
(!=). Los operadores que relacionan variables son imprescindibles para realizar cualquier
aplicación compleja. El resultado de todos estos operadores siempre es un valor booleano:

var numero1 = 3;
var numero2 = 5;
resultado = numero1 > numero2; // resultado = false
resultado = numero1 < numero2; // resultado = true

numero1 = 5;
numero2 = 5;
resultado = numero1 >= numero2; // resultado = true
resultado = numero1 <= numero2; // resultado = true
resultado = numero1 == numero2; // resultado = true
resultado = numero1 != numero2; // resultado = false

Se debe tener especial cuidado con el operador de igualdad (==), ya que es el origen de la
mayoría de errores de programación, incluso para los usuarios que ya tienen cierta experiencia
desarrollando scripts. El operador == se utiliza para comparar el valor de dos variables y el
operador = se utiliza para asignar un valor a una variable:
15

// El operador "=" asigna valores


var numero1 = 5;
Página

resultado = numero1 = 3; // numero1 = 3 y resultado = 3

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
// El operador "==" compara variables
var numero1 = 5;
resultado = numero1 == 3; // numero1 = 5 y resultado = false

Los operadores relacionales también se pueden utilizar con variables de tipo cadena de texto:

var texto1 = "hola";


var texto2 = "hola";
var texto3 = "adios";
resultado = texto1 == texto3; // resultado = false
resultado = texto1 != texto2; // resultado = false
resultado = texto3 >= texto2; // resultado = false

Cuando se utilizan cadenas de texto, los operadores mayor que (>) y menor que (<) siguen un
razonamiento no intuitivo: se compara letra a letra comenzando desde la izquierda hasta que se
encuentra una diferencia entre las dos cadenas de texto. Para determinar si una letra es mayor
o menor que otra, las mayúsculas se consideran menores que las minúsculas y las primeras letras
del alfabeto son menores que las últimas. Por ejemplo: a es menor que b, b es menor que c, A
es menor que a, etc.

7.6. Operador typeof


El operador typeof se emplea para determinar el tipo de dato que almacena una variable. Su
uso es muy sencillo, ya que sólo es necesario indicar el nombre de la variable cuyo tipo se quiere
averiguar. Los posibles valores de retorno del operador son: undefined, boolean, number,
string para cada uno de los tipos primitivos y object para los valores de referencia y para los
valores de tipo null.

El operador typeof no distingue entre las variables declaradas, pero no inicializadas y las
variables que ni siquiera han sido declaradas:

var variable1;

// Devuelve "undefined", aunque la variable1 ha sido declarada


typeof variable1;

// Devuelve "undefined", la variable2 no ha sido declarada


typeof variable2;

7.7. Operador instanceof


El operador typeof no es suficiente para trabajar con tipos de referencia, ya que devuelve el
valor object para cualquier objeto independientemente de su tipo. Por este motivo, JavaScript
define el operador instanceof para determinar la clase concreta de un objeto.

var variable1 = new String("hola mundo");


typeof variable1; // Devuelve "object"
variable1 instanceof String; // Devuelve true

El operador instanceof sólo devuelve como valor true o false. De esta forma, instanceof
no devuelve directamente la clase de la que ha instanciado la variable, sino que se debe
comprobar cada posible tipo de clase individualmente.
16
Página

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente

8. Estructuras de control de flujo


Los programas que se pueden realizar utilizando solamente variables y operadores son una
simple sucesión lineal de instrucciones básicas. Sin embargo, no se pueden realizar programas
que muestren un mensaje si el valor de una variable es igual a un valor determinado y no
muestren el mensaje en el resto de casos. Tampoco se puede repetir de forma eficiente una
misma instrucción, como por ejemplo sumar un determinado valor a todos los elementos de un
array. Para realizar este tipo de programas son necesarias las estructuras de control de flujo, que
son instrucciones del tipo si se cumple esta condición, hazlo; si no se cumple, haz esto otro.
También existen instrucciones del tipo repite esto mientras se cumpla esta condición. Si se
utilizan estructuras de control de flujo los programas dejan de ser una sucesión lineal de
instrucciones para convertirse en programas inteligentes que pueden tomar decisiones en
función del valor de las variables.

8.1. Estructura if
La estructura más utilizada en JavaScript y en la mayoría de lenguajes de programación es la
estructura if. Se emplea para tomar decisiones en función de una condición.

La sintaxis de esta estructura es la siguiente:

if(condicion) {
...
}

Si la condición se cumple (su valor es true) se ejecutan todas las instrucciones que se
encuentran dentro del bloque de instrucciones. Si la condición no se cumple (su valor es false)
no se ejecuta ninguna instrucción contenida en el bloque y el programa continúa ejecutando el
resto de instrucciones del script. Por ejemplo:

var mostrarMensaje = true;


if(mostrarMensaje) {
console.log("Hola Mundo");
}

En el ejemplo anterior, el mensaje sí que se muestra al usuario ya que la variable


mostrarMensaje tiene un valor de true y, por lo tanto, el programa entra dentro del bloque
de instrucciones del if. El ejemplo se podría reescribir también de la siguiente manera:

var mostrarMensaje = true;


if(mostrarMensaje == true) {
alert("Hola Mundo");
}

En este caso, la condición es una comparación entre el valor de la variable mostrarMensaje y


el valor true. Como los dos valores coinciden, la igualdad se cumple y, por lo tanto, la condición
es cierta, su valor es true y se ejecutan las instrucciones contenidas en ese bloque del if.

La comparación del ejemplo anterior suele ser el origen de muchos errores de programación al
confundir los operadores == y =. Las comparaciones siempre se realizan con el operador == y
el operador = solamente asigna valores.
17

var mostrarMensaje = true;


Página

// Se comparan los dos valores

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
if(mostrarMensaje == false) {
...
}

// Error - Se asigna el valor "false" a la variable


if(mostrarMensaje = false) {
...
}

La condición que controla el if puede combinar los diferentes operadores lógicos y relacionales
mostrados anteriormente:
var mostrado = false;
if(!mostrado) {
console.log("Es la primera vez que se muestra el mensaje");
}

Los operadores AND y OR permiten encadenar varias condiciones simples para construir
condiciones complejas:

var mostrado = false;


var usuarioPermiteMensajes = true;
if(!mostrado && usuarioPermiteMensajes) {
console.log("Es la primera vez que se muestra el mensaje");
}

La condición anterior está formada por una operación AND sobre dos variables. A su vez, a la
primera variable se le aplica el operador de negación antes de realizar la operación AND. De esta
forma, como el valor de mostrado es false, el valor !mostrado sería true. Como la variable
usuarioPermiteMensajes vale true, el resultado de !mostrado &&
usuarioPermiteMensajes sería igual a true && true, por lo que el resultado final de la
condición del if sería true y, por lo tanto, se ejecutan las instrucciones que se encuentran
dentro del bloque del if.

8.2. Estructura if-else


En ocasiones, las decisiones que se deben realizar no son del tipo si se cumple la condición, hazlo;
si no se cumple, no hagas nada. Normalmente, las condiciones suelen ser del tipo si se cumple
esta condición, hazlo; si no se cumple, haz esto otro. Para este segundo tipo de decisiones existe
una variante de la estructura if llamada if-else.

La sintaxis de esta estructura es la siguiente:

if(condicion) {
...
} else {
...
}

Si la condición se cumple (su valor es true) se ejecutan todas las instrucciones que se
encuentran dentro del if. Si la condición no se cumple (su valor es false) se ejecutan todas las
instrucciones contenidas en else. Por ejemplo:
18

var edad = 18;


Página

if(edad >= 18) {

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
console.log("Eres mayor de edad");
} else {
console.log("Todavía eres menor de edad");
}

Si el valor de la variable edad es mayor o igual que el valor numérico 18 la condición del if se
cumple y, por lo tanto, se ejecutan sus instrucciones y se muestra el mensaje Eres mayor de edad.
Sin embargo, cuando el valor de la variable edad no es igual o mayor que 18 la condición del if
no se cumple, por lo que automáticamente se ejecutan todas las instrucciones del bloque else.
En este caso, se mostrará el mensaje Todavía eres menor de edad.

El siguiente ejemplo compara variables de tipo cadena de texto:

var nombre = "";


if(nombre == "") {
console.log("Aún no nos has dicho tu nombre");
} else {
console.log("Hemos guardado tu nombre");
}

La condición del if anterior se construye mediante el operador ==, que es el que se emplea
para comparar dos valores (no confundir con el operador = que se utiliza para asignar valores).
En el ejemplo anterior, si la cadena de texto almacenada en la variable nombre es vacía (es igual
a "") se muestra el mensaje definido en el if. En otro caso, se muestra el mensaje definido en
el bloque else.

La estructura if-else se puede encadenar para realizar varias comprobaciones seguidas:

if(edad < 12) {


console.log("Todavía eres muy pequeño");
} else if(edad < 19) {
console.log("Eres un adolescente");
} else if(edad < 35) {
console.log("Aun sigues siendo joven");
} else {
console.log("Piensa en cuidarte un poco más");
}

No es obligatorio que la combinación de estructuras if-else acabe con la instrucción else, ya


que puede terminar con una instrucción de tipo else if.

8.3. Estructura switch


La estructura switch se puede utilizar para realizar comprobaciones múltiples y tomar
decisiones complejas. Sin embargo, si todas las condiciones dependen siempre de la misma
variable, el código JavaScript resultante es demasiado redundante:

if(dia == 1) {
console.log("Hoy es lunes.");
} else if(dia == 2) {
console.log("Hoy es martes.");
} else if(dia == 3) {
19

console.log("Hoy es miércoles.");
} else if(dia == 4) {
Página

console.log("Hoy es jueves.");

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
} else if(dia == 5) {
console.log("Hoy es viernes.");
} else if(dia == 6) {
console.log("Hoy es sábado.");
} else if(dia == 0) {
console.log("Hoy es domingo.");
}

En estos casos, la estructura switch es la más eficiente, ya que está especialmente diseñada
para manejar de forma sencilla múltiples condiciones sobre la misma variable.

La sintaxis de esta estructura es la siguiente:

switch(variable) {
case valor_1:
...
break;
case valor_2:
...
break;
...
case valor_n:
...
break;
default:
...
break;
}

La estructura switch se define mediante la palabra reservada switch seguida, entre


paréntesis, del nombre de la variable que se va a utilizar en las comparaciones. Como es habitual,
las instrucciones que forman parte del switch se encierran entre las llaves ({}).

Dentro del switch se definen todas las comparaciones que se quieren realizar sobre el valor de
la variable. Cada comparación se indica mediante la palabra reservada case seguida del valor
con el que se realiza la comparación. Si el valor de la variable utilizada por switch coincide con
el valor indicado por case, se ejecutan las instrucciones definidas dentro de ese case.

Normalmente, después de las instrucciones de cada case se incluye la sentencia break para
terminar la ejecución del switch, aunque no es obligatorio. Las comparaciones se realizan por
orden, desde el primer case hasta el último, por lo que es muy importante el orden en el que
se definen los case.

Si ningún valor de la variable del switch coincide con los valores definidos en los case se utiliza
el valor default para indicar las instrucciones que se ejecutan en el caso en el que ningún
case se cumpla para la variable indicada. Aunque default es opcional, las estructuras switch
suelen incluirlo para definir al menos un valor por defecto para alguna variable o para mostrar
algún mensaje por pantalla.

El ejemplo anterior realizado con if-else se puede rehacer mediante la estructura switch:
20

switch(dia) {
case 1: console.log("Hoy es lunes."); break;
Página

case 2: console.log("Hoy es martes."); break;


case 3: console.log("Hoy es miércoles."); break;

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
case 4: console.log("Hoy es jueves."); break;
case 5: console.log("Hoy es viernes."); break;
case 6: console.log("Hoy es sábado."); break;
case 0: console.log("Hoy es domingo."); break;
}

8.4. Estructura for


Las estructuras if y if-else no son muy eficientes cuando se desea ejecutar de forma
repetitiva una instrucción. Por ejemplo, si se quiere mostrar un mensaje cinco veces se podría
pensar en utilizar el siguiente if:

var veces = 0;
if(veces < 4) {
console.log("Mensaje");
veces++;
}

Se comprueba si la variable veces es menor que 4. Si se cumple se entra dentro del if, se
muestra el mensaje y se incrementa el valor de la variable veces. Así se debería seguir
ejecutando hasta mostrar el mensaje las cinco veces deseadas.

Sin embargo, el funcionamiento real del script anterior es muy diferente al deseado, ya que
solamente se muestra una vez el mensaje por pantalla. La razón es que la ejecución de la
estructura if no se repite y la comprobación de la condición sólo se realiza una vez,
independientemente de que dentro del if se modifique el valor de la variable utilizada en la
condición. La estructura for permite realizar este tipo de repeticiones, también llamadas
bucles, de una forma muy sencilla.

La sintaxis de esta estructura es la siguiente:

for(inicializacion; condicion; actualizacion) {


...
}

La idea del funcionamiento de un bucle for es la siguiente: mientras la condición indicada se


siga cumpliendo, repite la ejecución de las instrucciones definidas dentro del for. Además,
después de cada repetición, actualiza el valor de las variables que se utilizan en la condición.

• La inicialización es la zona en la que se establece el valor inicial de la variable que


controla la repetición.
• La condición es el único elemento que decide si continua o se detiene la repetición.
• La actualización es el nuevo valor que se asigna después de cada repetición a las
variables que controlan la repetición.
var mensaje = "Hola, estoy dentro de un bucle";
for(var i = 0; i < 5; i++) {
console.log(mensaje);
}

En primer lugar, se crea la variable i y se le asigna el valor de 0. Esta zona de inicialización


21

solamente se tiene en consideración justo antes de comenzar a ejecutar el bucle. Las siguientes
repeticiones no tienen en cuenta esta parte de inicialización.
Página

var i = 0;

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
Los bucles se siguen ejecutando mientras se cumplan las condiciones y se dejan de ejecutar
justo después de comprobar que la condición no se cumple. En este caso, mientras la variable i
valga menos de 5 el bucle se ejecuta indefinidamente.

i < 5

Como la variable i se ha inicializado a un valor de 0 y la condición para salir del bucle es que i
sea menor que 5, si no se modifica el valor de i de alguna forma el bucle se repetiría
indefinidamente. Por ese motivo, es imprescindible indicar la zona de actualización, en la que
se modifica el valor de las variables que controlan el bucle. En este caso, el valor de la variable i
se incrementa en una unidad después de cada repetición. La zona de actualización se ejecuta
después de la ejecución de las instrucciones que incluye el for.

i++

Así, durante la ejecución de la quinta repetición el valor de i será 4. Después de la quinta


ejecución, se actualiza el valor de i, que ahora valdrá 5. Como la condición es que i sea menor
que 5, la condición ya no se cumple y las instrucciones del for no se ejecutan una sexta vez.

Normalmente, la variable que controla los bucles for se llama i, ya que recuerda a la palabra
índice y su nombre tan corto ahorra mucho tiempo y espacio.

8.5. Estructura while


El estructura while permite crear bucles que se ejecutan ninguna o más veces, dependiendo
de la condición indicada.

La sintaxis de esta estructura es la siguiente:

while(condicion) {
...
}

El funcionamiento del bucle while se resume en: mientras se cumpla la condición indicada,
repite indefinidamente las instrucciones incluidas dentro del bucle.

Si la condición no se cumple ni siquiera la primera vez, el bucle no se ejecuta. Si la condición se


cumple se ejecutan las instrucciones una vez y se vuelve a comprobar la condición. Si se sigue
cumpliendo la condición se vuelve a ejecutar el bucle y así se continúa hasta que la condición no
se cumpla.

Evidentemente, las variables que controlan la condición deben modificarse dentro del propio
bucle, ya que, de otra forma, la condición se cumpliría siempre y el bucle while se repetiría
indefinidamente.

El siguiente ejemplo utiliza el bucle while para sumar todos los números menores o iguales que
otro número:

var resultado = 0;
var numero = 100;
var i = 0;
while(i <= numero) {
22

resultado += i;
i++;
Página

}
console.log(resultado);

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
El programa debe sumar todos los números menores o igual que otro dado. Por ejemplo, si el
número es 5, se debe calcular: 1 + 2 + 3 + 4 + 5 = 15.

Este tipo de condiciones (suma números mientras sean menores o iguales que otro número dado)
se resuelven muy fácilmente con los bucles while, aunque también se podían resolver con
bucles for.

En el ejemplo anterior, mientras se cumpla la condición, es decir, mientras que la variable i sea
menor o igual que la variable numero, se ejecutan las instrucciones del bucle.

Dentro del bucle se suma el valor de la variable i al resultado total (resultado) y se actualiza
el valor de la variable i, que es la que controla la condición del bucle. Si no se actualiza el valor
de la variable i, la ejecución del bucle continua infinitamente o hasta que el navegador permita
al usuario detener el script.

8.6. Estructura do-while


El estructura do-while es muy similar al bucle while, salvo que en este caso siempre se
ejecutan las instrucciones del bucle al menos la primera vez.

La sintaxis de esta estructura es la siguiente:

do {
...
} while(condicion);

De esta forma, como la condición se comprueba después de cada repetición, la primera vez
siempre se ejecutan las instrucciones del bucle. Es importante no olvidar que después del while
se debe añadir el carácter punto y coma (;), al contrario de lo que sucede con el bucle while.

Utilizando este bucle se puede calcular fácilmente el factorial de un número:


var resultado = 1;
var numero = 5;
do {
resultado *= numero; // resultado = resultado * numero
numero--;
} while(numero > 0);
alert(resultado);

En el código anterior, el resultado se multiplica en cada repetición por el valor de la variable


numero. Además, en cada repetición se decrementa el valor de esta variable numero. La
condición del bucle do-while es que el valor de numero sea mayor que 0, ya que el factorial de
un número multiplica todos los números menores o iguales que él mismo, pero hasta el número
1 (por ejemplo, el factorial de 5 es 5 x 4 x 3 x 2 x 1 = 120).

Como en cada repetición se decrementa el valor de la variable numero y la condición es que


numero sea mayor que cero, en la repetición en la que numero valga 0 la condición ya no se
cumple y el programa sale del bucle do-while.

9. Estructura try
23

La estructura try consiste en un bloque de código que se ejecuta de manera normal y captura
cualquier excepción que se pueda producir en ese bloque de sentencias.
Página

Su sintaxis es la siguiente:

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
try {
funcion_que_no_existe();
} catch(ex) {
console.log("Error detectado: " + ex.description);
}

En este ejemplo, llamamos a una función que no está definida y, por lo tanto, provoca una
excepción en JavaScript. Este error es capturado por la cláusula catch, la cual contiene una serie
de sentencias que indican que acciones realizar con esa excepción que acaba de producirse. Si
no se produce ninguna excepción en el bloque try, no se ejecuta el bloque dentro de catch.

10. Cláusula finally


La cláusula finally contiene las sentencias a ejecutar después de los bloques try y catch.
Las sentencias incluidas en este bloque se ejecutan siempre, se haya producido una excepción o
no. Un ejemplo clásico de utilización de la cláusula finally es la de liberar recursos que el
script ha solicitado.

abrirFichero()
try {
escribirFichero(datos);
} catch(ex) {
// Tratar la excepción
} finally {
cerrarFichero(); // siempre se cierra el recurso
}

11. Mensajes
Los mensajes son ventanas que se lanzan al usuario para hacer que éste reaccione ante una
situación o nos informe ante una duda. Realmente, todos los mensajes se obtienen a través del
objeto window, el cual veremos más adelante.

A continuación, se explican los mensajes alert(), prompt() y confirm().

• alert(). Es el mensaje más usado. Saca un mensaje por pantalla que sólo puede ser
aceptado. Su uso es mostrar información al usuario, pero resaltándola de la página. Su
sintaxis es la siguiente:

alert(texto_del_mensaje);

• prompt(). Es una ventana que pide entrar datos al usuario. Esta función devuelve un
valor que se puede usar en el código si es asignado a una variable. Su sintaxis es la
siguiente:

prompt(texto_del_mensaje,valor_por_defecto);

El parámetro valor_por_defecto no es obligatorio, pero al incluirle permite asignar


un valor al cuadro de texto en el que el usuario tiene que introducir información. Por
ejemplo:

prompt("¿Qué quieres hacer?","Comer");


24

El resultado de lo que el usuario responde se almacena en la variable resultado y al


Página

principio la ventana contendrá el valor Comer en el cuadro de texto destinado al usuario.

Celia Pozo Ledesma


Desarrollo de Aplicaciones Web
Desarrollo Web en Entorno Cliente
Naturalmente, el usuario podrá variar este valor si lo desea. El cuadro de diálogo que
saca prompt posee dos botones, uno de Aceptar y otro de Cancelar. Si el usuario pulsa
Cancelar la función prompt devuelve el valor nulo (null).

• confirm(). Saca un mensaje de confirmación que tiene dos botones: Aceptar y


Cancelar. Su sintaxis es la siguiente:
prompt(texto_del_mensaje)

La ventana mostrará un texto elegido, normalmente una pregunta, y el usuario elegirá si


desea aceptar o no el contenido. Confirm devuelve un valor true en el caso de que el
usuario acepte el mensaje y false en caso contrario.
25
Página

Celia Pozo Ledesma

También podría gustarte