GUÍA DE ESTUDIO JAVASCRIPT

LABORATORIO DE
COMPUTACIÓN

INF - 113

M. Sc. Aldo Ramiro Valdez Alvarado

La Paz – Bolivia
2019
TABLA DE CONTENIDOS

3. JAVASCRIPT .................................................................................................................... 1
3.1. Introducción. ................................................................................................................ 1
3.2. Breve historia............................................................................................................... 1
3.3. Cómo incluir JavaScript en documentos HTML. ........................................................ 2
3.3.1. Incluir JavaScript en la cabecera del documento HTML. .................................... 2
3.3.2. Definir JavaScript en un archivo externo. ............................................................ 3
3.3.3. Incluir JavaScript en el cuerpo del documento HTML. ....................................... 4
3.4. Etiqueta <noscript> ............................................................................................... 4
3.5. Sintaxis ........................................................................................................................ 5
3.6. Programación básica. ............................................................................................... 6
3.6.1. Variables. .............................................................................................................. 6
[Link]. Variables numéricas. ..................................................................................... 7
[Link]. Variables de cadenas de texto. ....................................................................... 7
[Link]. Arrays. ........................................................................................................... 8
[Link]. Variables booleanas. ...................................................................................... 8
3.6.2. Operadores. ........................................................................................................... 8
[Link]. Operador de Asignación. ............................................................................... 9
[Link]. Operadores de Incremento y decremento. ..................................................... 9
[Link]. Operadores Lógicos. ...................................................................................... 9
[Link]. Operadores Matemáticos. ............................................................................ 10
[Link]. Operadores Relacionales. ............................................................................ 11
3.6.3. Estructuras de control de flujo. ........................................................................... 12
[Link]. Estructura if. ................................................................................................ 12
[Link]. Estructura for. .............................................................................................. 13
[Link]. Estructura while. .......................................................................................... 14
[Link]. Estructura do … while. ................................................................................ 14
[Link]. Estructura switch. ........................................................................................ 15
3.6.4. Funciones. ........................................................................................................... 15
3.8.5. Funciones útiles en JavaScript. ........................................................................... 20
[Link]. Funciones sobre cadenas de texto. ............................................................... 20
[Link]. Funciones sobre arrays. ............................................................................... 22
[Link]. Funciones sobre números. ........................................................................... 24
3.9. Eventos. ..................................................................................................................... 24
3.9.1. Modelos de Eventos............................................................................................ 25
[Link]. Modelo básico de eventos............................................................................ 25
[Link]. Modelo de eventos estándar. ....................................................................... 25
[Link]. Modelo de eventos de Internet Explorer...................................................... 26
3.9.2. Modelo básico de eventos................................................................................... 26
[Link]. Tipos de eventos. ......................................................................................... 26
[Link]. Manejadores de eventos............................................................................... 26
UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

3. JAVASCRIPT

3.1. Introducción.

JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas

Web dinámicas. Una página Web dinámica es aquella que incorpora efectos como texto que
aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con
mensajes de aviso al usuario.

Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es

necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos
con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de
procesos intermedios.

A pesar de su nombre, JavaScript no guarda ninguna relación directa con el lenguaje de

programación Java. Legalmente, JavaScript es una marca registrada de la empresa Oracle.

3.2. Breve historia.

A principios de los años 90, la mayoría de usuarios que se conectaban a Internet lo hacían
con módems a una velocidad máxima de 28.8 kbps. En esa época, empezaban a desarrollarse
las primeras aplicaciones Web y, por tanto, las páginas Web comenzaban a incluir
formularios complejos.

Con unas aplicaciones Web cada vez más complejas y una velocidad de navegación tan lenta,
surgió la necesidad de un lenguaje de programación que se ejecutara en el navegador del
usuario. De esta forma, si el usuario no rellenaba correctamente un formulario, no se le hacía
esperar mucho tiempo hasta que el servidor volviera a mostrar el formulario indicando los
errores existentes.

Brendan Eich, un programador que trabajaba en Netscape, pensó que podría solucionar este
problema adaptando otras tecnologías existentes (como ScriptEase) al navegador Netscape
Navigator 2.0, que iba a lanzarse en 1995. Inicialmente, Eich denominó a su lenguaje
LiveScript. Posteriormente, Netscape firmó una alianza con Sun Microsystems para el
desarrollo del nuevo lenguaje de programación.

Además, justo antes del lanzamiento Netscape decidió cambiar el nombre por el de
JavaScript. La razón del cambio de nombre fue exclusivamente por marketing, ya que Java
era la palabra de moda en el mundo informático y de Internet de la época.

La primera versión de JavaScript fue un completo éxito y Netscape Navigator 3.0 ya

incorporaba la siguiente versión del lenguaje, la versión 1.1. Al mismo tiempo, Microsoft
lanzó JScript con su navegador Internet Explorer 3. JScript era una copia de JavaScript al
que le cambiaron el nombre para evitar problemas legales.

Para evitar una guerra de tecnologías, Netscape decidió que lo mejor sería estandarizar el
lenguaje JavaScript. De esta forma, en 1997 se envió la especificación JavaScript 1.1 al

LABORATORIO DE COMPUTACIÓN INF – 113 1

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

organismo ECMA (European Computer Manufacturers Association). ECMA creó el comité

TC39 con el objetivo de “estandarizar de un lenguaje de script multiplataforma e
independiente de cualquier empresa”. El primer estándar que creó el comité TC39 se
denominó ECMA-262, en el que se definió por primera vez el lenguaje ECMAScript.

Por este motivo, algunos programadores prefieren la denominación ECMAScript para

referirse al lenguaje JavaScript. De hecho, JavaScript no es más que la implementación que
realizó la empresa Netscape del estándar ECMAScript. La organización internacional para la
estandarización (ISO) adoptó el estándar ECMA-262 a través de su comisión IEC, dando
lugar al estándar ISO/IEC-16262.

ECMA ha publicado varios estándares relacionados con ECMAScript. En Junio de 1997 se

publicó la primera edición del estándar ECMA-262. Un año después, en Junio de 1998 se
realizaron pequeñas modificaciones para adaptarlo al estándar ISO/IEC-16262 y se creó la
segunda edición.

La tercera edición del estándar ECMA-262 (publicada en Diciembre de 1999) es la versión

que utilizan los navegadores actuales y se puede consultar gratuitamente en
[Link]

A pesar de haber estado en desarrollo durante mucho tiempo ECMAScript 4 nunca vio la luz.
ECMAScript 5 se publicó en 2011 y es el que está completamente soportado por todos los
navegadores modernos. A partir de la versión 6, que se publicó en 2015, se decidió publicar
actualizaciones anuales, denominándose esta última la ECMAScript 2015. A la fecha se han
publicado la ECMAScript 2016, ECMAScript 2017, ECMAScript 2018 que agregaron
funcionalidades al lenguaje. ECMA también ha definido varios estándares relacionados con
ECMAScript, como el estándar ECMA-357, que define una extensión conocida como E4X
y que permite la integración de JavaScript y XML.

3.3. Cómo incluir JavaScript en documentos HTML.

La integración de JavaScript y HTML es muy flexible, ya que existen al menos tres formas
para incluir código JavaScript en las páginas web.

3.3.1. Incluir JavaScript en la cabecera del documento HTML.

El código JavaScript se encierra entre etiquetas <script> y se incluye dentro de la cabecera

del documento (dentro de la etiqueta <head>):

<!DOCTYPE html>
<head>
<title>Ejemplo de código JavaScript en el head</title>
<script>
function miFuncion() {
[Link]("demo").innerHTML = "Cambiamos párrafo";
}
</script>

LABORATORIO DE COMPUTACIÓN INF – 113 2

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

</head>
<body>
<h2>JavaScript en la Cabecera</h2>
<p id="demo">Un párrafo</p>
<button type="button" onclick="miFuncion()">CAMBIAR</button>
</body>
</html>

Este método se emplea cuando se define un bloque pequeño de código o cuando se quieren
incluir instrucciones específicas en un determinado documento HTML que completen las
instrucciones y funciones que se incluyen por defecto en todos los documentos del sitio Web.
El principal inconveniente es que, si se quiere hacer una modificación en el bloque de código,
es necesario modificar todas las páginas que incluyen ese mismo bloque de código
JavaScript.

3.3.2. Definir JavaScript en un archivo externo.

Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript que
los documentos HTML enlazan mediante la etiqueta <script>. Se pueden crear todos los
archivos JavaScript que sean necesarios y cada documento HTML puede enlazar tantos
archivos JavaScript como necesite. Ejemplo:

Archivo [Link]

function miFuncion() {
[Link]("demo").innerHTML = "Cambiamos párrafo";
}

Documento HTML

<!DOCTYPE html>
<head>
<title>Ejemplo de código JavaScript en otro archivo</title>
<script src="script/[Link]"></script>
</head>
<body>
<h2>JavaScript en la Cabecera</h2>
<p id="demo">Un párrafo</p>
<button type="button" onclick="miFuncion()">CAMBIAR</button>
</body>
</html>

Cada etiqueta <script> solamente puede enlazar un único archivo, pero en una misma
página se pueden incluir tantas etiquetas <script> como sean necesarias.

Los archivos de tipo JavaScript son documentos normales de texto con la extensión .js, que
se pueden crear con cualquier editor de texto como Notepad, Wordpad, EmEditor, UltraEdit,
Vi, etc.

LABORATORIO DE COMPUTACIÓN INF – 113 3

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

La principal ventaja de enlazar un archivo JavaScript externo es que se simplifica el código

HTML de la página, que se puede reutilizar el mismo código JavaScript en todas las páginas
del sitio web y que cualquier modificación realizada en el archivo JavaScript se ve reflejada
inmediatamente en todas las páginas HTML que lo enlazan.

3.3.3. Incluir JavaScript en el cuerpo del documento HTML.

Este último método es el menos utilizado, ya que consiste en incluir trozos de JavaScript
dentro del código HTML de la página:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de código JavaScript en el body</title>
</head>
<body>
<h1>Una página Web</h1>
<p id="demo">Un parrafo</p>
<button type="button" onclick="miFuncion()">Prueba este</button>
<script>
function miFuncion() {
[Link]("demo").innerHTML = "Cambio, no?";
}
</script>
</body>
</html>

El mayor inconveniente de este método es que ensucia innecesariamente el código HTML

de la página y complica el mantenimiento del código JavaScript. En general, este método
sólo se utiliza para definir algunos eventos y en algunos otros casos especiales, como se verá
más adelante.

3.4. Etiqueta <noscript>

Algunos navegadores no disponen de soporte completo de JavaScript, otros navegadores

permiten bloquearlo parcialmente e incluso algunos usuarios bloquean completamente el uso
de JavaScript porque creen que así navegan de forma más segura. En estos casos, es habitual
que, si la página web requiere JavaScript para su correcto funcionamiento, se incluya un
mensaje de aviso al usuario indicándole que debería activar JavaScript para disfrutar
completamente de la página.

El lenguaje HTML define la etiqueta <noscript> para mostrar un mensaje al usuario

cuando su navegador no puede ejecutar JavaScript. El siguiente código muestra un ejemplo
del uso de la etiqueta <noscript>:

<body>
<noscript>
<p>Bienvenido a Mi Sitio</p>

LABORATORIO DE COMPUTACIÓN INF – 113 4

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

<p>La página que estás viendo requiere para su funcionamiento el uso

de JavaScript. Si lo has deshabilitado intencionadamente, por favor
vuelve a activarlo</p>
</noscript>
</body>

La etiqueta <noscript> se debe incluir en el interior de la etiqueta <body> (normalmente

se incluye al principio de <body>). El mensaje que muestra <noscript> puede incluir
cualquier elemento o etiqueta HTML.

3.5. Sintaxis

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: como sucede
con HTML, 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: al igual que sucede con la sintaxis de
las etiquetas y elementos HTML. Sin embargo, si en una página HTML se utilizan
indistintamente mayúsculas y minúsculas, la página se visualiza correctamente,
siendo el único problema la no validación de la página. En cambio, si en JavaScript
se intercambian mayúsculas y minúsculas el script no funciona.
• 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. El nombre de una variable
solo puede empezar con una letra, un guion bajo o el símbolo de dólar.
• Es un lenguaje interpretado: las sentencias del lenguaje son ejecutadas, uno por
uno, en el mismo orden que fueron escritas.
• 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 (;). Aunque JavaScript no obliga a hacerlo, es conveniente seguir la
tradición de terminar cada sentencia con el carácter del punto y coma (;). Para una
mejor lectura, se suele evitar sentencias mayores a los 80 caracteres.
• Usa bloques de código: las sentencias se agrupan en bloques dentro de llaves ({ }),
su propósito es definir sentencias que se ejecutan juntas.
• 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, si 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. JavaScript define dos tipos de comentarios: los de una sola línea
y los que ocupan varias líneas.

LABORATORIO DE COMPUTACIÓN INF – 113 5

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

Ejemplo de comentario de una sola línea:

// a continuación se muestra un mensaje

[Link]("mensaje de prueba");

Los comentarios de una sola línea se definen añadiendo dos barras oblicuas (//) al principio
de la línea. Ejemplo de comentario de varias líneas:

/* Los comentarios de varias líneas son muy útiles

cuando se necesita incluir bastante información
en los comentarios */
[Link]("mensaje de prueba");

Los comentarios multilínea se definen encerrando el texto del comentario entre los símbolos
/* y */.

3.6. Programación básica.

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

los elementos básicos con los que se construyen las aplicaciones.

3.6.1. Variables.

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. Las
variables en JavaScript se crean mediante la palabra reservada var. Ejemplo:

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.

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 rehacer de la siguiente manera:

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

LABORATORIO DE COMPUTACIÓN INF – 113 6

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

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. En
otras palabras, se pueden utilizar variables que no se han definido anteriormente mediante la
palabra reservada var. El ejemplo anterior también es correcto 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 (más
adelante se verán las diferencias entre variables locales y globales) 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.

Aunque todas las variables de JavaScript se crean de la misma forma (mediante la palabra
reservada var), la forma en la que se les asigna un valor depende del tipo de valor que se
quiere almacenar (números, textos, etc.).

[Link]. Variables numéricas.

Se utilizan para almacenar valores numéricos enteros (llamados integer en inglés) o

decimales (llamados float en inglés). En este caso, el valor se asigna indicando directamente
el número entero o decimal. Los números decimales utilizan el carácter “.” (punto) en vez de
“,” (coma) para separar la parte entera y la parte decimal:

var iva = 16; // variable tipo entero

var total = 234.65; // variable tipo decimal

[Link]. Variables de cadenas de texto.

Se utilizan para almacenar caracteres, palabras y/o frases de texto. Para asignar el valor a la
variable, se encierra el valor entre comillas dobles o simples, para delimitar su comienzo y
su final:

var mensaje = "Bienvenido a nuestro sitio web";

var nombreProducto = 'Producto ABC';
var letraSeleccionada = 'c';

LABORATORIO DE COMPUTACIÓN INF – 113 7

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

En ocasiones, el texto que se almacena en las variables no es tan sencillo. Si por ejemplo 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';

[Link]. Arrays.

Un array es una colección de variables, que pueden ser todas del mismo tipo o cada una de
un tipo diferente. Ejemplo:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes",

"Sábado", "Domingo"];

Para definir un array, se utilizan los caracteres “[“ y “]” para delimitar su comienzo y su final
y se utiliza el carácter , (coma) para separar sus elementos:

var nombre_array = [valor1, valor2, ..., valorN];

Una vez definido un array, es muy sencillo acceder a cada uno de sus elementos. Cada
elemento se accede indicando su posición dentro del array. La única complicación, que es
responsable de muchos errores cuando se empieza a programar, es que las posiciones de los
elementos empiezan a contarse en el 0 y no en el 1. Ejemplo:

var diaSeleccionado = dias[0]; // diaSeleccionado = "Lunes"

var otroDia = dias[5]; // otroDia = "Sabado"

[Link]. Variables booleanas.

Las variables de tipo boolean o booleano también se conocen con el nombre de variables de
tipo lógico. Una variable de tipo boolean almacena un tipo especial de valor que solamente
puede tomar dos valores: true (verdadero) o false (falso). A continuación se muestra un par
de variables de tipo booleano:

var clienteRegistrado = false;

var ivaIncluido = true;

3.6.2. Operadores.

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.

LABORATORIO DE COMPUTACIÓN INF – 113 8

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

[Link]. 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;

[Link]. Operadores de Incremento y decremento.

Estos dos operadores solamente son válidos para las variables numéricas y se utilizan para
incrementar o decrementar en una unidad el valor de una variable. Ejemplo:

var numero = 5;
++numero;
[Link](numero); // numero = 6

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. 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;
[Link](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. En el siguiente ejemplo:

var numero1 = 5;
var numero2 = 2;
numero3 = numero1++ + numero2;
//El valor de numero3 = 7, y de numero1 = 6
var numero1 = 5;
var numero2 = 2;
numero3 = ++numero1 + numero2;
//El valor de numero3 = 8, y de 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.

[Link]. 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

LABORATORIO DE COMPUTACIÓN INF – 113 9

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

función de ciertas condiciones. El resultado de cualquier operación que utilice operadores

lógicos siempre es un valor lógico o booleano.

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;

[Link](!visible); // Muestra "false" y no "true"

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

variable original es de tipo booleano, es muy sencillo obtener su negación. Sin embargo, para
obtener la negación de una variable de tipo numérico o carácter, se realiza en primer lugar 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.

La operación lógica AND obtiene su resultado combinando dos valores booleanos. El

operador se indica mediante el símbolo &&.

var valor1 = true;

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

La operación lógica OR también combina dos valores booleanos. El operador se indica

mediante el símbolo ||.

var valor1 = true;

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

[Link]. Operadores Matemáticos.

JavaScript permite realizar manipulaciones matemáticas sobre el valor de las variables

numéricas. Los operadores definidos son: suma (+), resta (-), multiplicación (*), división (/)
y exponente (**). Ejemplo:

var numero1 = 10;

var numero2 = 5;
resultado = numero1 / numero2; // resultado = 2

LABORATORIO DE COMPUTACIÓN INF – 113 10

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

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 matemático, que
es el operador módulo, que calcula el resto de la división entera de dos números. El operador
módulo en JavaScript se indica mediante el símbolo %:

var numero1 = 10;

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

Los operadores matemá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

[Link]. Operadores Relacionales.

Los operadores relacionales definidos por JavaScript son idénticos a los que definen las
matemáticas: mayor que (>), menor que (<), mayor o igual (>=), menor o igual (<=), igual
que (==) y distinto de (!=). 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 (==), que se utiliza para comparar
el valor de dos variables, por lo que es muy diferente del operador =, que se utiliza para
asignar un valor a una variable:

// El operador "=" asigna valores

var numero1 = 5;

LABORATORIO DE COMPUTACIÓN INF – 113 11

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

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

// 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 encuentre 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 (a es menor que b, b es menor
que c, A es menor que a, etc.)

3.6.3. Estructuras de control de flujo.

Las estructuras de control de flujo, son instrucciones del tipo si se cumple esta condición,
haz esto; si no se cumple, haz esto otro. También existen instrucciones del tipo repite esto
mientras se cumpla esta condición.

[Link]. Estructura if.

Se emplea para tomar decisiones en función de una condición. Su definición formal es:

if(condicion) {
...
}

La condición que controla el if() puede combinar los diferentes operadores lógicos y
relacionales mostrados anteriormente:

var mostrado = false;

if(!mostrado) {
[Link]("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) {

LABORATORIO DE COMPUTACIÓN INF – 113 12

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

[Link]("Es la primera vez que se muestra el mensaje");

}

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. Su definición formal es la
siguiente:

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

Ejemplo:

var edad = 18;

if(edad >= 18) {
[Link]("Eres mayor de edad");
}
else {
[Link]("Todavía eres menor de edad");
}

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

if(edad < 12) {

[Link]("Todavía eres muy pequeño");
}
else if(edad < 19) {
[Link]("Eres un adolescente");
}
else if(edad < 35) {
[Link]("Aun sigues siendo joven");
}
else {
[Link]("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().

[Link]. Estructura for.

La estructura for permite realizar repeticiones (también llamadas bucles):

for(inicializacion; condicion; actualizacion) {

...

LABORATORIO DE COMPUTACIÓN INF – 113 13

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

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.

var mensaje = "Hola, estoy dentro de un bucle";

for(var i = 0; i < 5; i++) {
[Link](mensaje);
}

[Link]. Estructura while.

La estructura while permite crear bucles que se ejecutan ninguna o más veces, dependiendo
de la condición indicada. Su definición formal es:

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) {
resultado += i;
i++;
}
[Link](resultado);

[Link]. Estructura do … while.

El bucle de tipo 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. Su definición formal es:

do {

LABORATORIO DE COMPUTACIÓN INF – 113 14

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

...
} 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 “;” (al contrario de lo que sucede con el bucle while
simple). 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);
[Link](resultado);

[Link]. Estructura switch.

La estructura if...else 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.

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. Su definición
formal es:

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

3.6.4. Funciones.

Cuando se desarrolla una aplicación compleja, es muy habitual utilizar una y otra vez las
mismas instrucciones. Un script para una tienda de comercio electrónico por ejemplo, tiene
que calcular el precio total de los productos varias veces, para añadir los impuestos y los
gastos de envío. Cuando una serie de instrucciones se repiten una y otra vez, se complica
demasiado el código fuente de la aplicación, ya que:

LABORATORIO DE COMPUTACIÓN INF – 113 15

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

• El código de la aplicación es mucho más largo porque muchas instrucciones están

repetidas.
• Si se quiere modificar alguna de las instrucciones repetidas, se deben hacer tantas
modificaciones como veces se haya escrito esa instrucción, lo que se convierte en un
trabajo muy pesado y muy propenso a cometer errores.

Las funciones son la solución a todos estos problemas, tanto en JavaScript como en el resto
de lenguajes de programación. Una función es un conjunto de instrucciones que se agrupan
para realizar una tarea concreta y que se pueden reutilizar fácilmente. Las funciones en
JavaScript se definen mediante la palabra reservada function, seguida del nombre de la
función. Su definición formal es la siguiente:

function nombre_funcion() {
...
}

El nombre de la función se utiliza para llamar a esa función cuando sea necesario. El
concepto es el mismo que con las variables, a las que se les asigna un nombre único para
poder utilizarlas dentro del código. Por ejemplo, se crea una función llamada
suma_y_muestra de la siguiente forma:

function suma_y_muestra() {
resultado = numero1 + numero2;
[Link]("El resultado es " + resultado);
}

Aunque la función anterior está correctamente creada, no funciona como debería ya que le
faltan los “argumentos”, que se explican en la siguiente sección. Una vez creada la función,
desde cualquier punto del código se puede llamar a la función para que se ejecuten sus
instrucciones. La llamada a la función se realiza simplemente indicando su nombre,
incluyendo los paréntesis del final y el carácter “;” para terminar la instrucción:

function suma_y_muestra() {
resultado = numero1 + numero2;
[Link]("El resultado es " + resultado);
}

var resultado;
var numero1 = 3;
var numero2 = 5;
suma_y_muestra();
numero1 = 10;
numero2 = 7;
suma_y_muestra();
numero1 = 5;
numero2 = 8;
suma_y_muestra();
...

LABORATORIO DE COMPUTACIÓN INF – 113 16

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

Las funciones más sencillas no necesitan ninguna información para producir sus resultados.
Sin embargo, la mayoría de funciones de las aplicaciones reales deben acceder al valor de
algunas variables para producir sus resultados. Las variables que necesitan las funciones se
llaman argumentos. Antes de que pueda utilizarlos, la función debe indicar cuántos
argumentos necesita y cuál es el nombre de cada argumento. Además, al invocar la función,
se deben incluir los valores que se le van a pasar a la función. Los argumentos se indican
dentro de los paréntesis que van detrás del nombre de la función y se separan con una coma
(,). Siguiendo el ejemplo anterior, la función debe indicar que necesita dos argumentos,
correspondientes a los dos números que tiene que sumar:

function suma_y_muestra(primerNumero, segundoNumero) { ... }

A continuación, para utilizar el valor de los argumentos dentro de la función, se debe emplear
el mismo nombre con el que se definieron los argumentos:

function suma_y_muestra(primerNumero, segundoNumero) { ... }

var resultado = primerNumero + segundoNumero;
[Link]("El resultado es " + resultado);
}

Dentro de la función, el valor de la variable primerNumero será igual al primer valor que se
le pase a la función y el valor de la variable segundoNumero será igual al segundo valor que
se le pasa. Para pasar valores a la función, se incluyen dentro de los paréntesis utilizados al
llamar a la función:

// Definición de la función
function suma_y_muestra(primerNumero, segundoNumero) { ... }
var resultado = primerNumero + segundoNumero;
[Link]("El resultado es " + resultado);
}
// Declaración de las variables
var numero1 = 3;
var numero2 = 5;
// Llamada a la función
suma_y_muestra(numero1, numero2);

En el código anterior, se debe tener en cuenta que:

• Aunque casi siempre se utilizan variables para pasar los datos a la función, se podría
haber utilizado directamente el valor de esas variables: suma_y_muestra(3, 5);
• El número de argumentos que se pasa a una función debería ser el mismo que el
número de argumentos que ha indicado la función. No obstante, JavaScript no
muestra ningún error si se pasan más o menos argumentos de los necesarios.
• El orden de los argumentos es fundamental, ya que el primer dato que se indica en la
llamada, será el primer valor que espera la función; el segundo valor indicado en la
llamada, es el segundo valor que espera la función y así sucesivamente.
• Se puede utilizar un número ilimitado de argumentos, aunque si su número es muy
grande, se complica en exceso la llamada a la función.

LABORATORIO DE COMPUTACIÓN INF – 113 17

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

• No es obligatorio que coincida el nombre de los argumentos que utiliza la función y

el nombre de los argumentos que se le pasan. En el ejemplo anterior, los argumentos
que se pasan son numero1 y numero2 y los argumentos que utiliza la función son
primerNumero y segundoNumero.

A continuación se muestra otro ejemplo de una función que calcula el precio total de un
producto a partir de su precio básico:

// Definición de la función
function calculaPrecioTotal(precio) {
var impuestos = 1.16;
var gastosEnvio = 10;
var precioTotal = ( precio * impuestos ) + gastosEnvio;
}
// Llamada a la función
calculaPrecioTotal(23.34);

No obstante, el código anterior no es demasiado útil, ya que lo ideal sería que la función
pudiera devolver el resultado obtenido para guardarlo en otra variable y poder seguir
trabajando con este precio total:

function calculaPrecioTotal(precio) {
var impuestos = 1.16;
var gastosEnvio = 10;
var precioTotal = ( precio * impuestos ) + gastosEnvio;
}
// El valor devuelto por la función, se guarda en una variable
var precioTotal = calculaPrecioTotal(23.34);
// Seguir trabajando con la variable "precioTotal"

Afortunadamente, las funciones no solamente puede recibir variables y datos, sino que
también pueden devolver los valores que han calculado. Para devolver valores dentro de una
función, se utiliza la palabra reservada return. Aunque las funciones pueden devolver valores
de cualquier tipo, solamente pueden devolver un valor cada vez que se ejecutan.

function calculaPrecioTotal(precio) {
var impuestos = 1.16;
var gastosEnvio = 10;
var precioTotal = ( precio * impuestos ) + gastosEnvio;
return precioTotal;
}
var precioTotal = calculaPrecioTotal(23.34);
// Seguir trabajando con la variable "precioTotal"

Para que la función devuelva un valor, solamente es necesario escribir la palabra reservada
return junto con el nombre de la variable que se quiere devolver. Como la función devuelve
un valor, en el punto en el que se realiza la llamada, debe indicarse el nombre de una variable
en el que se guarda el valor devuelto:

LABORATORIO DE COMPUTACIÓN INF – 113 18

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

var precioTotal = calculaPrecioTotal(23.34);

Si no se indica el nombre de ninguna variable, JavaScript no muestra ningún error y el valor

devuelto por la función simplemente se pierde y por tanto, no se utilizará en el resto del
programa. En este caso, tampoco es obligatorio que el nombre de la variable devuelta por la
función coincida con el nombre de la variable en la que se va a almacenar ese valor.

Si la función llega a una instrucción de tipo return, se devuelve el valor indicado y finaliza la
ejecución de la función. Por tanto, todas las instrucciones que se incluyen después de un
return se ignoran y por ese motivo la instrucción return suele ser la última de la mayoría de
funciones.

Para que el ejemplo anterior sea más completo, se puede añadir otro argumento a la función
que indique el porcentaje de impuestos que se debe añadir al precio del producto.
Evidentemente, el nuevo argumento se debe añadir tanto a la definición de la función como
a su llamada:

function calculaPrecioTotal(precio, porcentajeImpuestos) {

var gastosEnvio = 10;
var precioConImpuestos = (1 + porcentajeImpuestos/100) * precio;
var precioTotal = precioConImpuestos + gastosEnvio;
return precioTotal;
}
var precioTotal = calculaPrecioTotal(23.34, 16);
var otroPrecioTotal = calculaPrecioTotal(15.20, 4);

El ámbito de una variable (llamado “scope” en inglés) es la zona del programa en la que se
define la variable. JavaScript define dos ámbitos para las variables: global y local. El
siguiente ejemplo ilustra el comportamiento de los ámbitos:

function creaMensaje() {
var mensaje = “Mensaje de prueba”;
}
creaMensaje();
[Link](mensaje);

El ejemplo anterior define en primer lugar una función llamada creaMensaje que crea una
variable llamada mensaje. A continuación, se ejecuta la función mediante la llamada
creaMensaje(); y seguidamente, se muestra mediante la función [Link]() el valor de
una variable llamada mensaje.
Sin embargo, al ejecutar el código anterior no se muestra ningún mensaje por pantalla. La
razón es que la variable mensaje se ha definido dentro de la función creaMensaje() y por
tanto, es una variable local que solamente está definida dentro de la función.

Cualquier instrucción que se encuentre dentro de la función puede hacer uso de esa variable,
pero todas las instrucciones que se encuentren en otras funciones o fuera de cualquier función
no tendrán definida la variable mensaje. De esta forma, para mostrar el mensaje en el código
anterior, la función [Link]() debe llamarse desde dentro de la función.

LABORATORIO DE COMPUTACIÓN INF – 113 19

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

creaMensaje():
function creaMensaje() {
var mensaje = “Mensaje de prueba”;
[Link](mensaje);
}
creaMensaje();

Además de variables locales, también existe el concepto de variable global, que está definida
en cualquier punto del programa (incluso dentro de cualquier función).

var mensaje = “Mensaje de prueba”;

function muestraMensaje() {
[Link](mensaje);
}

El código anterior es el ejemplo inverso al mostrado anteriormente. Dentro de la función

muestraMensaje() se quiere hacer uso de una variable llamada mensaje y que no ha sido
definida dentro de la propia función. Sin embargo, si se ejecuta el código anterior, sí que se
muestra el mensaje definido por la variable mensaje.

3.8.5. Funciones útiles en JavaScript.

JavaScript incorpora una serie de herramientas y utilidades (llamadas funciones y

propiedades) para el manejo de las variables. De esta forma, muchas de las operaciones
básicas con las variables, se pueden realizar directamente con las utilidades que ofrece
JavaScript.

[Link]. Funciones sobre cadenas de texto.

A continuación se muestran algunas de las funciones más útiles para el manejo de cadenas
de texto.

length, calcula la longitud de una cadena de texto (el número de caracteres que la forman)

var mensaje = "Hola Mundo";

var numeroLetras = [Link]; // numeroLetras = 10

+, se emplea para concatenar varias cadenas de texto

var mensaje1 = "Hola";

var mensaje2 = " Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo"

Además del operador +, también se puede utilizar la función concat()

var mensaje1 = "Hola";

var mensaje2 = [Link](" Mundo"); // mensaje2 = "Hola Mundo"

LABORATORIO DE COMPUTACIÓN INF – 113 20

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

Los espacios en blanco se pueden añadir al final o al principio de las cadenas y también se
pueden indicar forma explícita:

var mensaje1 = "Hola";

var mensaje2 = "Mundo";
var mensaje = mensaje1 + " " + mensaje2; // mensaje = "Hola Mundo"

toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres

en mayúsculas:

var mensaje1 = "Hola";

var mensaje2 = [Link](); // mensaje2 = "HOLA"

toLowerCase(), transforma todos los caracteres de la cadena a sus correspondientes

caracteres en minúsculas:

var mensaje1 = "HolA";

var mensaje2 = [Link](); // mensaje2 = "hola"

charAt(posicion), obtiene el carácter que se encuentra en la posición indicada:

var mensaje = "Hola";

var letra = [Link](0); // letra = H
letra = [Link](2); // letra = l

indexOf(caracter), calcula la posición en la que se encuentra el carácter indicado dentro de

la cadena de texto. Si el carácter se incluye varias veces dentro de la cadena de texto, se
devuelve su primera posición empezando a buscar desde la izquierda. Si la cadena no
contiene el carácter, la función devuelve el valor -1:

var mensaje = "Hola";

var posicion = [Link]('a'); // posicion = 3
posicion = [Link]('b'); // posicion = -1

lastIndexOf(caracter), calcula la última posición en la que se encuentra el carácter indicado

dentro de la cadena de texto. Si la cadena no contiene el carácter, la función devuelve el valor
-1:

var mensaje = "Hola";

var posicion = [Link]('a'); // posicion = 3
posicion = [Link]('b'); // posicion = -1

La función lastIndexOf() comienza su búsqueda desde el final de la cadena hacia el principio,

aunque la posición devuelta es la correcta empezando a contar desde el principio de la
palabra.

LABORATORIO DE COMPUTACIÓN INF – 113 21

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

substring(inicio, final), extrae una porción de una cadena de texto. El segundo parámetro es
opcional. Si sólo se indica el parámetro inicio, la función devuelve la parte de la cadena
original correspondiente desde esa posición hasta el final:

var mensaje = "Hola Mundo";

var porcion = [Link](2); // porcion = "la Mundo"
porcion = [Link](5); // porcion = "Mundo"
porcion = [Link](7); // porcion = "ndo"

Si se indica un inicio negativo, se devuelve la misma cadena original:

var mensaje = "Hola Mundo";

var porcion = [Link](-2); // porcion = "Hola Mundo"

Cuando se indica el inicio y el final, se devuelve la parte de la cadena original comprendida

entre la posición inicial y la inmediatamente anterior a la posición final (es decir, la posición
inicio está incluida y la posición final no):

var mensaje = "Hola Mundo";

var porcion = [Link](1, 8); // porcion = "ola Mun"
porcion = [Link](3, 4); // porcion = "a"

Si se indica un final más pequeño que el inicio, JavaScript los considera de forma inversa, ya
que automáticamente asigna el valor más pequeño al inicio y el más grande al final:

var mensaje = "Hola Mundo";

var porcion = [Link](5, 0); // porcion = "Hola "
porcion = [Link](0, 5); // porcion = "Hola "

split(separador), convierte una cadena de texto en un array de cadenas de texto. La función

parte la cadena de texto determinando sus trozos a partir del carácter separador indicado:

var mensaje = "Hola Mundo, soy una cadena de texto!";

var palabras = [Link](" ");
// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de",
"texto!"];

Con esta función se pueden extraer fácilmente las letras que forman una palabra:

var palabra = "Hola";

var letras = [Link](""); // letras = ["H", "o", "l", "a"]

[Link]. Funciones sobre arrays.

A continuación se muestran algunas de las funciones más útiles para el manejo de arrays:

length, calcula el número de elementos de un array

LABORATORIO DE COMPUTACIÓN INF – 113 22

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

var vocales = ["a", "e", "i", "o", "u"];

var numeroVocales = [Link]; // numeroVocales = 5

concat(), se emplea para concatenar los elementos de varios arrays

var array1 = [1, 2, 3];

array2 = [Link](4, 5, 6); // array2 = [1, 2, 3, 4, 5, 6]
array3 = [Link]([4, 5, 6]); // array3 = [1, 2, 3, 4, 5, 6]

join(separador), es la función contraria a split(). Une todos los elementos de un array para
formar una cadena de texto. Para unir los elementos se utiliza el carácter separador indicado

var array = ["hola", "mundo"];

var mensaje = [Link](""); // mensaje = "holamundo"
mensaje = [Link](" "); // mensaje = "hola mundo"

pop(), elimina el último elemento del array y lo devuelve. El array original se modifica y su
longitud disminuye en 1 elemento.

var array = [1, 2, 3];

var ultimo = [Link]();
// ahora array = [1, 2], ultimo = 3

push(), añade un elemento al final del array. El array original se modifica y aumenta su
longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)

var array = [1, 2, 3];

[Link](4);
// ahora array = [1, 2, 3, 4]

shift(), elimina el primer elemento del array y lo devuelve. El array original se ve modificado
y su longitud disminuida en 1 elemento.

var array = [1, 2, 3];

var primero = [Link]();
// ahora array = [2, 3], primero = 1

unshift(), añade un elemento al principio del array. El array original se modifica y aumenta
su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)

var array = [1, 2, 3];

[Link](0);
// ahora array = [0, 1, 2, 3]

reverse(), modifica un array colocando sus elementos en el orden inverso a su posición

original:

var array = [1, 2, 3];

[Link]();

LABORATORIO DE COMPUTACIÓN INF – 113 23

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

// ahora array = [3, 2, 1]

[Link]. Funciones sobre números.

A continuación se muestran algunas de las funciones y propiedades más útiles para el manejo
de números.

NaN, (del inglés, “Not a Number”) JavaScript emplea el valor NaN para indicar un valor
numérico no definido (por ejemplo, la división 0/0).

var numero1 = 0;
var numero2 = 0;
[Link](numero1/numero2); // se muestra el valor NaN

isNaN(), permite proteger a la aplicación de posibles valores numéricos no definidos

var numero1 = 0;
var numero2 = 0;
if(isNaN(numero1/numero2)) {
[Link]("La división no está definida para los números
indicados");
}
else {
[Link]("La división es igual a => " + numero1/numero2);
}

Infinity, hace referencia a un valor numérico infinito y positivo (también existe el valor -
Infinity para los infinitos negativos)

var numero1 = 10;

var numero2 = 0;
[Link](numero1/numero2); // se muestra el valor Infinity

toFixed(digitos), devuelve el número original con tantos decimales como los indicados por
el parámetro dígitos y realiza los redondeos necesarios. Se trata de una función muy útil por
ejemplo para mostrar precios.

var numero1 = 4564.34567;

[Link](2); // 4564.35
[Link](6); // 4564.345670
[Link](); // 4564

3.9. Eventos.

Hasta ahora, todas las aplicaciones y scripts que se han creado tienen algo en común: se
ejecutan desde la primera instrucción hasta la última de forma secuencial. Gracias a la
estructuras de control de flujo (if, for, while) es posible modificar ligeramente este
comportamiento y repetir algunos trozos del script y saltarse otros trozos en función de
algunas condiciones.
LABORATORIO DE COMPUTACIÓN INF – 113 24
UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

Este tipo de aplicaciones son poco útiles, ya que no interactúan con los usuarios y no pueden
responder a los diferentes eventos que se producen durante la ejecución de una aplicación.
Afortunadamente, las aplicaciones Web creadas con el lenguaje JavaScript pueden utilizar el
modelo de programación basada en eventos.

En este tipo de programación, los scripts se dedican a esperar a que el usuario “haga algo”
(que pulse una tecla, que mueva el ratón, que cierre la ventana del navegador). A
continuación, el script responde a la acción del usuario normalmente procesando esa
información y generando un resultado.

Los eventos hacen posible que los usuarios transmitan información a los programas.
JavaScript define numerosos eventos que permiten una interacción completa entre el usuario
y las páginas/aplicaciones Web. La pulsación de una tecla constituye un evento, así como
hacer clic o mover el ratón, seleccionar un elemento de un formulario, redimensionar la
ventana del navegador, etc.

JavaScript permite asignar una función a cada uno de los eventos. De esta forma, cuando se
produce cualquier evento, JavaScript ejecuta su función asociada. Este tipo de funciones se
denominan “event handlers” en inglés y suelen traducirse por “manejadores deeventos”.

3.9.1. Modelos de Eventos.

Crear páginas y aplicaciones Web siempre ha sido mucho más complejo de lo que debería
serlo debido a las incompatibilidades entre navegadores. A pesar de que existen decenas de
estándares para las tecnologías empleadas, los navegadores no los soportan completamente
o incluso los ignoran.

Las principales incompatibilidades se producen en el lenguaje HTML, en el soporte de hojas

de estilos CSS y sobre todo, en la implementación de JavaScript. De todas ellas, la
incompatibilidad más importante se da precisamente en el modelo de eventos del navegador.

Así, existen hasta tres modelos diferentes para manejar los eventos dependiendo del
navegador en el que se ejecute la aplicación.

[Link]. Modelo básico de eventos.

Este modelo simple de eventos se introdujo para la versión 4 del estándar HTML y se
considera parte del nivel más básico de DOM. Aunque sus características son limitadas, es
el único modelo que es compatible en todos los navegadores y por tanto, el único que permite
crear aplicaciones que funcionan de la misma manera en todos los navegadores.

[Link]. Modelo de eventos estándar.

Las versiones más avanzadas del estándar DOM (DOM nivel 2) definen un modelo de
eventos completamente nuevo y mucho más poderoso que el original. Todos los navegadores
modernos lo incluyen, salvo Internet Explorer.

LABORATORIO DE COMPUTACIÓN INF – 113 25

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

[Link]. Modelo de eventos de Internet Explorer.

Internet Explorer utiliza su propio modelo de eventos, que es similar pero incompatible con
el modelo estándar. Se utilizó por primera vez en Internet Explorer 4 y Microsoft decidió
seguir utilizándolo en el resto de versiones, a pesar de que la empresa había participado en la
creación del estándar de DOM que define el modelo de eventos estándar.

3.9.2. Modelo básico de eventos.

[Link]. Tipos de eventos.

En este modelo, cada elemento o etiqueta HTML define su propia lista de posibles eventos
que se le pueden asignar. Un mismo tipo de evento (por ejemplo, hacer clic al botón izquierdo
del ratón) puede estar definido para varios elementos HTML diferentes y un mismo elemento
HTML puede tener asociados varios eventos diferentes.

El nombre de cada evento se construye mediante el prefijo on, seguido del nombre en inglés
de la acción asociada al evento. Así, el evento de hacer clic a un elemento con el ratón se
denomina onclick y el evento asociado a la acción de mover el ratón se denomina
onmousemove.

Los eventos más utilizados en las aplicaciones web tradicionales son onload para esperar a
que se cargue la página por completo, los eventos onclick, onmouseover, onmouseout para
controlar el ratón y onsubmit para controlar el envío de los formularios.

Algunos eventos como onclick, onkeydown, onkeypress, onreset, onsubmit permiten evitar
la acción por defecto de ese evento. Más adelante se muestra en detalle este comportamiento,
que puede resultar muy útil en algunas técnicas de programación.

Las acciones típicas que realiza un usuario en una página web pueden dar lugar a una sucesión
de eventos. Al pulsar por ejemplo sobre un botón de tipo <input type=”submit”> se
desencadenan los eventos onmousedown, onclick, onmouseup y onsubmit de forma
consecutiva.

[Link]. Manejadores de eventos

Un evento de JavaScript por sí mismo carece de utilidad. Para que los eventos resulten útiles,
se deben asociar funciones o código JavaScript a cada evento. De esta forma, cuando se
produce un evento se ejecuta el código indicado, por lo que la aplicación puede responder
ante cualquier evento que se produzca durante su ejecución.

Las funciones o código JavaScript que se definen para cada evento se denominan manejador
de eventos y como JavaScript es un lenguaje muy flexible, existen varias formas diferentes
de indicar los manejadores:

• Manejadores como atributos de los elementos HTML.

• Manejadores como funciones JavaScript externas.
LABORATORIO DE COMPUTACIÓN INF – 113 26
UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

• Manejadores semánticos.

a) Manejadores de eventos como atributos HTML

Se trata del método más sencillo y a la vez menos profesional de indicar el código JavaScript
que se debe ejecutar cuando se produzca un evento. En este caso, el código se incluye en un
atributo del propio elemento HTML. En el siguiente ejemplo, se quiere mostrar un mensaje
cuando el usuario haga clic con el ratón sobre un botón:

<input type="button" value="Clic aquí y verás"

onclick="[Link]('Gracias por el clic');" />

En este método, se definen atributos HTML con el mismo nombre que los eventos que se
quieren manejar. El ejemplo anterior sólo quiere controlar el evento de hacer clic con el ratón,
cuyo nombre es onclick. Así, el elemento HTML para el que se quiere definir este evento,
debe incluir un atributo llamado onclick.

El contenido del atributo es una cadena de texto que contiene todas las instrucciones
JavaScript que se ejecutan cuando se produce el evento. En este caso, el código JavaScript
es muy sencillo ([Link](’Gracias por hacer clic’);), ya que solamente se trata de
mostrar un mensaje.

En este otro ejemplo, cuando el usuario hace clic sobre el elemento <div> se muestra un
mensaje y cuando el usuario pasa el ratón por encima del elemento, se muestra otro mensaje:

<div onclick="[Link]('Has hecho clic con el ratón');"

onmouseover="[Link]('Acabas de pasar el ratón por encima');">

Puedes hacer clic sobre este elemento o simplemente pasar el ratón por encima </div>

Este otro ejemplo incluye una de las instrucciones más utilizadas en las aplicaciones
JavaScript más antiguas:

<body onload="[Link]('La página se ha cargado

completamente');">
...
</body>

El mensaje anterior se muestra después de que la página se haya cargado completamente, es

decir, después de que se haya descargado su código HTML, sus imágenes y cualquier otro
objeto incluido en la página.

b) Manejadores de eventos y variable this

JavaScript define una variable especial llamada this que se crea automáticamente y que se
emplea en algunas técnicas avanzadas de programación. En los eventos, se puede utilizar la

LABORATORIO DE COMPUTACIÓN INF – 113 27

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

variable this para referirse al elemento HTML que ha provocado el evento. Esta variable es
muy útil para ejemplos como el siguiente:

Cuando el usuario pasa el ratón por encima del <div>, el color del borde se muestra de color
negro. Cuando el ratón sale del <div>, se vuelve a mostrar el borde con el color gris claro
original.

Elemento <div> original:

<div id="contenidos" style="width:150px; height:60px; border:thin

solid silver">
Sección de contenidos...
</div>

Si no se utiliza la variable this, el código necesario para modificar el color de los bordes, sería
el siguiente:

<div id="contenidos" style="width:150px; height:60px; border:thin

solid silver"
onmouseover="[Link]('contenidos').[Link]
or='black';"
onmouseout="[Link]('contenidos').[Link]
r='silver';">
Sección de contenidos...
</div>

El código anterior es demasiado largo y demasiado propenso a cometer errores. Dentro del
código de un evento, JavaScript crea automáticamente la variable this, que hace referencia al
elemento HTML que ha provocado el evento. Así, el ejemplo anterior se puede reescribir de
la siguiente manera:

<div id="contenidos" style="width:150px; height:60px; border:thin

solid silver"
onmouseover="[Link]='black';"
onmouseout="[Link]='silver';">
Sección de contenidos...
</div>

El código anterior es mucho más compacto, más fácil de leer y de escribir y sigue
funcionando correctamente aunque se modifique el valor del atributo id del <div>.

c) Manejadores de eventos como funciones externas

La definición de los manejadores de eventos en los atributos HTML es el método más sencillo
pero menos aconsejable de tratar con los eventos en JavaScript. El principal inconveniente
es que se complica en exceso en cuanto se añaden algunas pocas instrucciones, por lo que
solamente es recomendable para los casos más sencillos.

LABORATORIO DE COMPUTACIÓN INF – 113 28

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

Si se realizan aplicaciones complejas, como por ejemplo la validación de un formulario, es

aconsejable agrupar todo el código JavaScript en una función externa y llamar a esta función
desde el elemento HTML.

Siguiendo con el ejemplo anterior que muestra un mensaje al hacer clic sobre un botón:

<input type="button" value="Hace clic y verás"

onclick="[Link]('Gracias por hacer clic');" />

Utilizando funciones externas se puede transformar en:

function muestraMensaje() {
[Link]('Gracias por hacer clic');
}

<input type="button" value="Hace clic y verás"

onclick="muestraMensaje()" />

Esta técnica consiste en extraer todas las instrucciones de JavaScript y agruparlas en una
función externa. Una vez definida la función, en el atributo del elemento HTML se incluye
el nombre de la función, para indicar que es la función que se ejecuta cuando se produce el
evento.

La llamada a la función se realiza de la forma habitual, indicando su nombre seguido de los

paréntesis y de forma opcional, incluyendo todos los argumentos y parámetros que se
necesiten.

El principal inconveniente de este método es que en las funciones externas no se puede seguir
utilizando la variable this y por tanto, es necesario pasar esta variable como parámetro a la
función:

function resalta(elemento) {
switch([Link]) {
case 'silver':
case 'silver silver silver silver':
case '#c0c0c0':
[Link] = 'black';
break;
case 'black':
case 'black black black black':
case '#000000':
[Link] = 'silver';
break;
}
}

<div style="width:150px; height:60px; border:thin solid silver"

onmouseover="resalta(this)" onmouseout="resalta(this)">
Sección de contenidos...

LABORATORIO DE COMPUTACIÓN INF – 113 29

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

</div>

En el ejemplo anterior, la función externa es llamada con el parámetro this, que dentro de la
función se denomina elemento. La complejidad del ejemplo se produce sobre todo por la
forma en la que los distintos navegadores almacenan el valor de la propiedad borderColor.

Mientras que Firefox almacena (en caso de que los cuatro bordes coincidan en color) el valor
black, Internet Explorer lo almacena como black black black black y Opera almacena su
representación hexadecimal #000000.

d) Manejadores de eventos semánticos

Los métodos que se han visto para añadir manejadores de eventos (como atributos HTML y
como funciones externas) tienen un grave inconveniente: ensucian el código HTML de la
página. Como es conocido, una de las buenas prácticas básicas en el diseño de páginas y
aplicaciones web es la separación de los contenidos (HTML) y su aspecto o presentación
(CSS).

Siempre que sea posible, también se recomienda separar los contenidos (HTML) y su
comportamiento o programación (JavaScript). Mezclar el código JavaScript con los
elementos HTML solamente contribuye a complicar el código fuente de la página, a dificultar
la modificación y mantenimiento de la página y a reducir la semántica del documento final
producido.

Afortunadamente, existe un método alternativo para definir los manejadores de eventos de

JavaScript. Esta técnica es una evolución del método de las funciones externas, ya que se
basa en utilizar las propiedades DOM de los elementos HTML para asignar todas las
funciones externas que actúan de manejadores de eventos. Así, el siguiente ejemplo:

<input id="hace clic" type="button" value="Hace clic y verás"

onclick="[Link]('Gracias por hacer clic');" />

Se puede transformar en:

// Función externa
function muestraMensaje() {
[Link]('Gracias por hacer clic');
}

// Asignar la función externa al elemento

[Link]("hace clic").onclick = muestraMensaje;
// Elemento HTML
<input id="hace clic" type="button" value="Hace clicme y verás" />

La técnica de los manejadores semánticos consiste en:

1. Asignar un identificador único al elemento XHTML mediante el atributo id.

2. Crear una función de JavaScript encargada de manejar el evento.

LABORATORIO DE COMPUTACIÓN INF – 113 30

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

3. Asignar la función externa al evento correspondiente en el elemento deseado.

El último paso es la clave de esta técnica. En primer lugar, se obtiene el elemento al que se
desea asociar la función externa:

[Link]("hace clic");

A continuación, se utiliza una propiedad del elemento con el mismo nombre que el evento
que se quiere manejar. En este caso, la propiedad es onclick:

[Link]("hace clic").onclick = ...

Por último, se asigna la función externa mediante su nombre sin paréntesis. Lo más
importante (y la causa más común de errores) es indicar solamente el nombre de la función,
es decir, prescindir de los paréntesis al asignar la función:

[Link]("hace clicble").onclick = muestraMensaje;

Si se añaden los paréntesis después del nombre de la función, en realidad se está ejecutando
la función y guardando el valor devuelto por la función en la propiedad onclick de
elemento.

// Asignar una función externa a un evento de un elemento

[Link]("hace clic").onclick = muestraMensaje;

// Ejecutar una función y guardar su resultado en una propiedad de

un elemento
[Link]("hace clic").onclick = muestraMensaje();

La gran ventaja de este método es que el código HTML resultante es muy “limpio”, ya que
no se mezcla con el código JavaScript. Además, dentro de las funciones externas asignadas
sí que se puede utilizar la variable this para referirse al elemento que provoca el evento.

El único inconveniente de este método es que la página se debe cargar completamente antes
de que se puedan utilizar las funciones DOM que asignan los manejadores a los elementos
HTML. Una de las formas más sencillas de asegurar que cierto código se va a ejecutar
después de que la página se cargue por completo es utilizar el evento onload:

[Link] = function() {
[Link]("hace clic").onclick = muestraMensaje;
}

La técnica anterior utiliza el concepto de funciones anónimas, que no se va a estudiar, pero

que permite crear un código compacto y muy sencillo. Para asegurarse que un código
JavaScript va a ejecutarse después de que la página se haya cargado completamente, sólo es
necesario incluir esas instrucciones entre los símbolos { y }:

[Link] = function() {

LABORATORIO DE COMPUTACIÓN INF – 113 31

UNIVERSIDAD MAYOR DE SAN ANDRÉS
CARRERA DE INFORMÁTICA

...
}

En el siguiente ejemplo, se añaden eventos a los elementos de tipo

input=text de un formulario complejo:

function resalta() {
// Código JavaScript
}

[Link] = function() {
var formulario = [Link]("formulario");
var camposInput = [Link]("input");
for(var i=0; i<[Link]; i++) {
if(camposInput[i].type == "text") {
camposInput[i].onclick = resalta;
}
}
}
Ejercicio 14

LABORATORIO DE COMPUTACIÓN INF – 113 32